Update style.css

style.css

@@ -1,11 +1,11 @@
 /* Body */
 body {
-    font-family: 'Poppins', Arial, sans-serif; /* Font modern */
+    font-family: 'Roboto', Arial, sans-serif; /* Ganti font ke Roboto */
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    overflow-x: hidden; /* Prevent horizontal scroll */
-    background-color: white; /* Warna dasar putih */
+    overflow-x: hidden;
+    background-color: white;
 }
 
 /* Navbar */
@@ -14,14 +14,14 @@ body {
     top: 0;
     left: 0;
     width: 100%;
-    background-color: #004d00; /* Hijau tua */
+    background-color: #004d00;
     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 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .navbar .logo img {
@@ -29,14 +29,14 @@ body {
 }
 
 .navbar .logo img:hover {
-    transform: scale(1.1); /* Efek hover */
+    transform: scale(1.1);
     transition: transform 0.3s ease;
 }
 
 /* Headline */
 .headline {
     text-align: center;
-    background-color: #004d00; /* Hijau tua */
+    background-color: #004d00;
     color: white;
     padding: 60px 20px;
     margin-top: 50px;
@@ -53,12 +53,12 @@ body {
 
 /* Converter Content */
 .content {
-    background-color: #004d00; /* Hijau tua */
+    background-color: #004d00;
     padding: 40px 20px;
     display: flex;
     justify-content: center;
     align-items: center;
-    flex-direction: column; /* Menyusun elemen secara vertikal */
+    flex-direction: column;
 }
 
 /* Container untuk semua elemen konversi */
@@ -70,15 +70,15 @@ body {
     max-width: 800px;
     padding: 30px;
     border-radius: 12px;
-    background-color: white; /* Kontras putih */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan ringan */
+    background-color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     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 */
+    flex-direction: column;
     width: 100%;
     gap: 20px;
 }
@@ -86,7 +86,7 @@ body {
 /* Untuk input amount */
 .currency-box .amount {
     display: flex;
-    justify-content: space-between; /* Menjaga jarak antar elemen */
+    justify-content: space-between;
     align-items: center;
     gap: 15px;
     width: 100%;
@@ -95,7 +95,7 @@ body {
 .currency-box label {
     font-weight: bold;
     font-size: 16px;
-    color: #004d00; /* Hijau tua */
+    color: #004d00;
     margin-bottom: 5px;
 }
 
@@ -135,56 +135,48 @@ body {
 
 /* Swap Button */
 #swap-btn {
-    background-color: #004d00; /* Hijau tua */
+    background-color: #004d00;
     color: white;
     cursor: pointer;
     border-radius: 50%;
     border: none;
-    font-size: 20px;
-    height: 50px;
-    width: 50px;
+    font-size: 24px; /* Lebih besar untuk web */
+    height: 60px; /* Ukuran lebih besar */
+    width: 60px; /* Ukuran lebih besar */
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 20px auto;
-    transition: background-color 0.3s ease, transform 0.2s ease;
-}
-
-/* Tidak ada rotasi pada desktop */
-@media screen and (min-width: 769px) {
-    #swap-btn {
-        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 tombol swap supaya bisa terlihat seperti tombol tukar */
-        width: 40px;
-        height: 40px;
-        margin: 0; /* Menghilangkan margin untuk posisi yang lebih tepat */
-    }
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan */
+    font-weight: bold;
 }
 
-/* Hover efek */
 #swap-btn:hover {
-    background-color: #003300; /* Warna lebih gelap saat hover */
+    background-color: #003300;
     transform: rotate(180deg);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Efek bayangan lebih kuat saat hover */
 }
 
 /* Mode Mobile */
 @media screen and (max-width: 768px) {
     .currency-select {
-        flex-direction: column; /* Menyusun dropdown dan tombol secara vertikal */
+        flex-direction: column;
         justify-content: center;
         align-items: center;
-        gap: 10px; /* Menambah jarak antar elemen */
+        gap: 10px;
+    }
+
+    #swap-btn {
+        transform: rotate(90deg); /* Rotasi tombol swap */
+        width: 50px;
+        height: 50px;
+        margin: 0;
     }
 
     .currency-group {
         display: flex;
-        flex-direction: column; /* Menyusun label dan dropdown secara vertikal */
+        flex-direction: column;
         align-items: center;
     }
 }
@@ -192,21 +184,27 @@ body {
 /* Mode Web dan Tablet */
 @media screen and (min-width: 769px) {
     .currency-select {
-        flex-direction: row; /* Menyusun elemen secara horizontal */
+        flex-direction: row;
         align-items: center;
-        gap: 20px; /* Jarak antar elemen */
+        gap: 20px;
+    }
+
+    #swap-btn {
+        transform: rotate(0deg); /* Pastikan tombol swap tetap horizontal */
+        width: 60px; /* Ukuran lebih besar */
+        height: 60px; /* Ukuran lebih besar */
     }
 
     .currency-group {
         display: flex;
-        flex-direction: column; /* Label dan dropdown disusun secara vertikal */
+        flex-direction: column;
         align-items: center;
     }
 }
 
 /* Convert Button */
 #convert-btn {
-    background-color: #004d00; /* Hijau tua */
+    background-color: #004d00;
     color: white;
     cursor: pointer;
     padding: 15px 30px;
@@ -218,8 +216,8 @@ body {
 }
 
 #convert-btn:hover {
-    background-color: #003300; /* Hijau lebih gelap */
-    transform: translateY(-2px); /* Sedikit naik */
+    background-color: #003300;
+    transform: translateY(-2px);
 }
 
 /* How-to-Use Section */
@@ -234,7 +232,7 @@ body {
 .how-to-use h2 {
     font-weight: bold;
     margin-bottom: 20px;
-    color: #004d00; /* Hijau tua */
+    color: #004d00;
 }
 
 .steps {
@@ -258,12 +256,12 @@ body {
 
 .step h3 {
     font-weight: bold;
-    color: #004d00; /* Hijau tua */
+    color: #004d00;
 }
 
 /* Footer */
 .footer {
-    background-color: #004d00; /* Hijau tua */
+    background-color: #004d00;
     color: white;
     padding: 20px 0;
     text-align: center;