Update style.css

style.css

@@ -1,55 +1,3 @@
-body {
-    font-family: 'Poppins', Arial, sans-serif; /* Font modern */
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    overflow-x: hidden; /* Prevent horizontal scroll */
-    background-color: white; /* Warna dasar putih */
-}
-
-/* Navbar */
-.navbar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    background-color: #004d00; /* Hijau tua */
-    color: white;
-    padding: 10px 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    z-index: 1000;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Bayangan ringan */
-}
-
-.navbar .logo img {
-    height: 40px;
-}
-
-.navbar .logo img:hover {
-    transform: scale(1.1); /* Efek hover */
-    transition: transform 0.3s ease;
-}
-
-/* Headline */
-.headline {
-    text-align: center;
-    background-color: #004d00; /* Hijau tua */
-    color: white;
-    padding: 60px 20px;
-    margin-top: 50px;
-}
-
-.headline h1 {
-    font-size: 36px;
-    font-weight: bold;
-}
-
-.headline p {
-    font-size: 18px;
-}
-
 /* Converter Content */
 .content {
     background-color: #004d00; /* Hijau tua */
@@ -57,8 +5,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,38 +22,62 @@ body {
     box-sizing: border-box;
 }
 
-/* Currency Input dan Select yang konsisten */
-.currency-box input,
-.currency-group select {
+/* 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;
+    color: #004d00; /* Hijau tua */
+    margin-bottom: 5px;
+}
+
+.currency-box input {
     padding: 15px;
     font-size: 16px;
-    width: 100%; /* Pastikan input dan select memenuhi lebar container */
+    width: 100%;
     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 */
+/* Menyusun From, Swap, dan To secara horizontal */
 .currency-select {
     display: flex;
-    flex-direction: row;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
     width: 100%;
     gap: 20px;
     margin: 20px 0;
-    flex-wrap: wrap;
 }
 
-/* Penyesuaian grup currency */
 .currency-group {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-    max-width: 200px; /* Lebar maksimal untuk elemen select */
-    margin-bottom: 20px; /* Menambahkan margin untuk spasi antar elemen */
+}
+
+.currency-group select {
+    padding: 15px;
+    font-size: 16px;
+    width: 100%;
+    border-radius: 8px;
+    border: 1px solid #ccc;
 }
 
 /* Swap Button */
@@ -128,92 +102,12 @@ body {
     transform: rotate(180deg);
 }
 
-/* Convert Button */
-#convert-btn {
-    background-color: #004d00; /* Hijau tua */
-    color: white;
-    cursor: pointer;
-    padding: 15px 30px;
-    font-size: 16px;
-    border: none;
-    border-radius: 8px;
-    margin-top: 20px;
-    transition: background-color 0.3s ease, transform 0.2s ease;
-}
-
-#convert-btn:hover {
-    background-color: #003300; /* Hijau lebih gelap */
-    transform: translateY(-2px); /* Sedikit naik */
-}
-
-/* How-to-Use Section */
-.how-to-use {
-    background-color: white;
-    color: black;
-    padding: 40px 20px;
-    margin-top: 20px;
-    text-align: center;
-}
-
-.how-to-use h2 {
-    font-weight: bold;
-    margin-bottom: 20px;
-    color: #004d00; /* Hijau tua */
-}
-
-.steps {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 20px;
-}
-
-.step {
-    background-color: #f0f0f0;
-    padding: 20px;
-    border-radius: 8px;
-    text-align: center;
-    transition: background-color 0.3s ease, transform 0.3s ease;
-}
-
-.step:hover {
-    background-color: #e0e0e0;
-    transform: translateY(-5px);
-}
-
-.step h3 {
-    font-weight: bold;
-    color: #004d00; /* Hijau tua */
-}
-
-/* Footer */
-.footer {
-    background-color: #004d00; /* Hijau tua */
-    color: white;
-    padding: 20px 0;
-    text-align: center;
-    margin-top: 40px;
-    border-top: 2px solid #003300;
-}
-
-.footer-content p {
-    margin: 5px 0;
-}
-
-.footer-content a {
-    color: white;
-    text-decoration: none;
-    margin: 0 10px;
-    transition: color 0.3s ease;
-}
-
-.footer-content a:hover {
-    color: #ccc;
-}
-
-/* Responsivitas */
+/* Mode Mobile */
 @media screen and (max-width: 768px) {
     .currency-select {
-        flex-direction: column;
+        flex-direction: column; /* Menyusun dropdown dan tombol secara vertikal */
+        justify-content: center;
+        align-items: center;
         gap: 10px; /* Menambah jarak antar elemen */
     }
 
@@ -225,18 +119,29 @@ body {
     }
 
     .currency-group {
-        width: 100%; /* Agar select tampil penuh di layar kecil */
+        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;
-        justify-content: space-between;
-        gap: 20px;
+        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 {
-        width: 45%;  /* Membatasi lebar grup agar tidak terlalu lebar */
+        display: flex;
+        flex-direction: column; /* Label dan dropdown disusun secara vertikal */
+        align-items: center;
     }
 }