Update style.css

style.css

@@ -89,7 +89,8 @@ body {
 .currency-select {
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
+    gap: 20px; /* Tambahkan jarak antar elemen */
     width: 100%;
     margin: 20px 0;
     flex-wrap: wrap;
@@ -98,19 +99,18 @@ body {
 .currency-group {
     display: flex;
     flex-direction: column;
-    margin: 10px;
     flex-grow: 1;
-    width: 100%;
-    max-width: 180px;
+    max-width: 300px; /* Lebar maksimum untuk dropdown */
 }
 
 .currency-group label {
     font-weight: bold;
     font-size: 16px;
+    margin-bottom: 5px;
 }
 
 .currency-group select {
-    padding: 10px;
+    padding: 15px; /* Sesuaikan padding */
     font-size: 16px;
     width: 100%;
     border-radius: 8px;
@@ -181,17 +181,18 @@ body {
 
 .steps {
     display: flex;
+    flex-direction: row; /* Default horizontal */
     justify-content: center;
     margin-top: 20px;
     flex-wrap: wrap;
-    gap: 20px;
+    gap: 20px; /* Tambahkan jarak antar kotak */
 }
 
 .step {
     background-color: #e0e0e0;
     padding: 20px;
     margin: 10px;
-    width: 300px;
+    flex: 1 1 300px; /* Ukuran fleksibel dengan lebar minimum */
     border-radius: 8px;
     text-align: center;
 }
@@ -215,27 +216,17 @@ body {
 
 @media screen and (max-width: 768px) {
     .currency-select {
-        flex-direction: column;
+        flex-direction: column; /* Ubah jadi vertikal */
         align-items: center;
     }
 
-    .currency-group {
-        width: 100%;
-        max-width: 200px;
-    }
-
     .steps {
-        flex-direction: column;
+        flex-direction: column; /* Kotak menjadi vertikal */
+        align-items: center; /* Tengah untuk tampilan mobile */
     }
 
-    .currency-box input,
-    .currency-select select,
-    .currency-select button {
-        width: 100%;
-    }
-
-    .currency-select button {
-        margin: 10px 0;
+    .currency-group {
+        max-width: 100%; /* Lebar penuh untuk mode mobile */
     }
 }
 
@@ -245,4 +236,8 @@ body {
     .currency-select button {
         width: 100%;
     }
+
+    .steps {
+        gap: 15px; /* Kurangi jarak antar kotak di layar kecil */
+    }
 }