Update style.css

style.css

@@ -72,24 +72,22 @@ body {
     box-sizing: border-box;
 }
 
-.currency-box label {
-    font-weight: bold;
-    font-size: 16px;
-    margin-bottom: 5px;
-    color: #004d00; /* Hijau tua */
-}
-
-.currency-box input {
+/* Currency Input dan Select yang konsisten */
+.currency-box input,
+.currency-group select {
     padding: 15px;
     font-size: 16px;
-    width: 100%;
+    width: 100%; /* Pastikan input dan select memenuhi lebar container */
     border-radius: 8px;
     border: 1px solid #ccc;
     box-sizing: border-box;
+    margin-bottom: 10px; /* Memberi ruang antara input dan elemen lainnya */
 }
 
+/* Konsistensi tampilan grup currency */
 .currency-select {
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
     align-items: flex-start;
     width: 100%;
@@ -98,19 +96,14 @@ body {
     flex-wrap: wrap;
 }
 
-.currency-group label {
-    font-weight: bold;
-    font-size: 16px;
-    margin-bottom: 5px;
-    color: #004d00; /* Hijau tua */
-}
-
-.currency-group select {
-    padding: 15px;
-    font-size: 16px;
+/* Penyesuaian grup currency */
+.currency-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     width: 100%;
-    border-radius: 8px;
-    border: 1px solid #ccc;
+    max-width: 200px; /* Lebar maksimal untuk elemen select */
+    margin-bottom: 20px; /* Menambahkan margin untuk spasi antar elemen */
 }
 
 /* Swap Button */
@@ -135,54 +128,6 @@ body {
     transform: rotate(180deg);
 }
 
-/* Style CSS sebelumnya */
-
-/* Mode Mobile */
-@media screen and (max-width: 768px) {
-    .currency-select {
-        display: flex;
-        flex-direction: column; /* Menyusun dropdown dan tombol secara vertikal */
-        justify-content: center;
-        align-items: center;
-        gap: 10px; /* Menambah jarak antar elemen */
-    }
-
-    #swap-btn {
-        transform: rotate(90deg); /* Rotasi tombol swap supaya bisa terlihat seperti tombol tukar */
-        width: 40px;
-        height: 40px;
-        margin: 0; /* Menghilangkan margin untuk posisi yang lebih tepat */
-    }
-
-    .currency-group {
-        display: flex;
-        flex-direction: column; /* Menyusun label dan dropdown secara vertikal */
-        align-items: center;
-    }
-}
-
-/* Mode Web dan Tablet */
-@media screen and (min-width: 769px) {
-    .currency-select {
-        display: flex;
-        flex-direction: row; /* Menyusun elemen secara horizontal */
-        align-items: center;
-        gap: 20px; /* Jarak antar elemen */
-    }
-
-    #swap-btn {
-        transform: rotate(0deg); /* Pastikan tombol swap tetap horizontal */
-        width: 50px;
-        height: 50px;
-    }
-
-    .currency-group {
-        display: flex;
-        flex-direction: column; /* Label dan dropdown disusun secara vertikal */
-        align-items: center;
-    }
-}
-
 /* Convert Button */
 #convert-btn {
     background-color: #004d00; /* Hijau tua */
@@ -263,4 +208,35 @@ body {
 
 .footer-content a:hover {
     color: #ccc;
+}
+
+/* Responsivitas */
+@media screen and (max-width: 768px) {
+    .currency-select {
+        flex-direction: column;
+        gap: 10px; /* Menambah jarak antar elemen */
+    }
+
+    #swap-btn {
+        transform: rotate(90deg); /* Rotasi tombol swap supaya bisa terlihat seperti tombol tukar */
+        width: 40px;
+        height: 40px;
+        margin: 0; /* Menghilangkan margin untuk posisi yang lebih tepat */
+    }
+
+    .currency-group {
+        width: 100%; /* Agar select tampil penuh di layar kecil */
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .currency-select {
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 20px;
+    }
+
+    .currency-group {
+        width: 45%;  /* Membatasi lebar grup agar tidak terlalu lebar */
+    }
 }