Update style.css

style.css

@@ -1,3 +1,4 @@
+/* Body */
 body {
     font-family: 'Poppins', Arial, sans-serif; /* Font modern */
     margin: 0;
@@ -57,8 +58,10 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-direction: column; /* Menyusun elemen secara vertikal */
 }
 
+/* Container untuk semua elemen konversi */
 .converter-container {
     display: flex;
     flex-direction: column;
@@ -72,11 +75,28 @@ body {
     box-sizing: border-box;
 }
 
+/* Flexbox untuk bagian input Amount, From, Swap, dan To */
+.currency-box {
+    display: flex;
+    flex-direction: column; /* Menyusun input dan label secara vertikal */
+    width: 100%;
+    gap: 20px;
+}
+
+/* Untuk input amount */
+.currency-box .amount {
+    display: flex;
+    justify-content: space-between; /* Menjaga jarak antar elemen */
+    align-items: center;
+    gap: 15px;
+    width: 100%;
+}
+
 .currency-box label {
     font-weight: bold;
     font-size: 16px;
-    margin-bottom: 5px;
     color: #004d00; /* Hijau tua */
+    margin-bottom: 5px;
 }
 
 .currency-box input {
@@ -88,21 +108,21 @@ body {
     box-sizing: border-box;
 }
 
+/* Menyusun From, Swap, dan To secara horizontal */
 .currency-select {
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
     width: 100%;
     gap: 20px;
     margin: 20px 0;
-    flex-wrap: wrap;
 }
 
-.currency-group label {
-    font-weight: bold;
-    font-size: 16px;
-    margin-bottom: 5px;
-    color: #004d00; /* Hijau tua */
+.currency-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
 }
 
 .currency-group select {
@@ -133,21 +153,55 @@ body {
 /* Tidak ada rotasi pada desktop */
 @media screen and (min-width: 769px) {
     #swap-btn {
-        transform: rotate(0deg); /* Tidak ada rotasi pada tampilan desktop */
+        transform: rotate(0deg); /* Pastikan tombol swap tetap horizontal */
     }
 }
 
 /* Rotasi tombol untuk tampilan mobile dan tablet */
 @media screen and (max-width: 768px) {
     #swap-btn {
-        transform: rotate(90deg); /* Rotasi 90 derajat pada tampilan mobile/tablet */
+        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 */
     }
 }
 
 /* Hover efek */
 #swap-btn:hover {
     background-color: #003300; /* Warna lebih gelap saat hover */
-    transform: rotate(180deg); /* Rotasi lebih lanjut saat hover */
+    transform: rotate(180deg);
+}
+
+/* Mode Mobile */
+@media screen and (max-width: 768px) {
+    .currency-select {
+        flex-direction: column; /* Menyusun dropdown dan tombol secara vertikal */
+        justify-content: center;
+        align-items: center;
+        gap: 10px; /* Menambah jarak antar elemen */
+    }
+
+    .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 {
+        flex-direction: row; /* Menyusun elemen secara horizontal */
+        align-items: center;
+        gap: 20px; /* Jarak antar elemen */
+    }
+
+    .currency-group {
+        display: flex;
+        flex-direction: column; /* Label dan dropdown disusun secara vertikal */
+        align-items: center;
+    }
 }
 
 /* Convert Button */