Update style.css

style.css

@@ -135,6 +135,52 @@ body {
     transform: rotate(180deg);
 }
 
+/* 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 */