/* --- CSS Anda yang Sudah Direvisi dan Dilengkapi --- */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

 /* Reset dan Font */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Inter", sans-serif;
 }

 /* Body Background */
 body {
     background: #F4F5F7;
 }

 /* Container untuk Menengahkan */
 .container {
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 20px;
     /* Tambahkan padding untuk layar kecil */
 }

 /* Kotak Login */
 .login-box {
     background: #ffffff;
     width: 100%;
     /* Atur lebar menjadi 100% di dalam container */
     max-width: 420px;
     /* Batasi lebar maksimum */
     padding: 45px;
     border-radius: 16px;
     box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
     text-align: center;
 }

 /* Logo */
 .logo {
     width: 110px;
     margin-bottom: 10px;
     /* Jika logo.png tidak ada, Anda mungkin perlu menggantinya dengan teks atau ikon placeholder */
 }

 /* Judul Utama */
 h2 {
     font-size: 22px;
     font-weight: 600;
 }

 /* Subtitle */
 .subtitle {
     font-size: 14px;
     color: #555;
     margin-bottom: 25px;
 }

 /* Label Input */
 label {
     display: block;
     text-align: left;
     font-size: 14px;
     margin-bottom: 6px;
     font-weight: 500;
 }

 /* Input Text & Password */
 input[type="text"],
 input[type="password"] {
     width: 100%;
     padding: 12px;
     border: 1px solid #dcdcdc;
     border-radius: 8px;
     margin-bottom: 18px;
     background: #f5f5f5;
 }

 /* Focus state yang lebih baik */
 input[type="text"]:focus,
 input[type="password"]:focus {
     outline: none;
     border-color: #0d0d16;
     /* Warna border saat fokus */
     background: #ffffff;
 }


 /* Ingat Saya Checkbox */
 .remember {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 18px;
     /* Perluas area klik untuk label "Ingat Saya" */
     cursor: pointer;
 }

 .remember label {
     margin-bottom: 0;
     cursor: pointer;
     font-weight: 400;
     /* Ubah font-weight agar tidak terlalu tebal */
 }

 .remember input[type="checkbox"] {
     margin: 0;
     width: auto;
     /* Agar checkbox tidak selebar 100% */
     height: auto;
     margin-right: -8px;
     /* Karena gap sudah 8px */
     /* Tambahan untuk konsistensi */
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     width: 16px;
     height: 16px;
     border: 1px solid #dcdcdc;
     border-radius: 4px;
     cursor: pointer;
     position: relative;
     top: 0;
     transform: none;
     /* Hilangkan transform */
     background: #ffffff;
 }

 .remember input[type="checkbox"]:checked {
     background-color: #0d0d16;
     border-color: #0d0d16;
 }

 .remember input[type="checkbox"]:checked::after {
     content: '✓';
     color: white;
     font-size: 10px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 /* Tombol Masuk */
 .btn {
     width: 100%;
     background: #0d0d16;
     color: white;
     padding: 12px;
     border-radius: 8px;
     font-size: 15px;
     font-weight: 600;
     border: none;
     cursor: pointer;
     transition: background 0.3s ease;
     /* Transisi untuk hover */
 }

 .btn:hover {
     background: #1f202a;
     /* Warna sedikit lebih gelap saat hover */
     opacity: 1;
     /* Hapus opacity: 0.9 agar transisi lebih smooth */
 }

 /* Footer */
 .footer {
     margin-top: 20px;
     font-size: 12px;
     color: #777;
 }

 /* Pesan Error */
 .error-msg {
     background: #ffdddd;
     color: #b70000;
     padding: 10px;
     border-radius: 6px;
     margin-bottom: 15px;
     border: 1px solid #ff8a8a;
     text-align: left;
     /* Perbaiki perataan agar lebih rapi */
 }

 /* Wrapper Password */
 .password-wrapper {
     position: relative;
     width: 100%;
 }

 /* Ikon Mata */
 .eye-icon {
     width: 22px;
     position: absolute;
     right: 12px;
     top: calc(50% - 9px);
     /* Posisikan lebih akurat di tengah input */
     transform: translateY(-50%);
     cursor: pointer;
     opacity: 0.6;
 }

 .eye-icon:hover {
     opacity: 1;
 }