/* Login.css - Versi yang Dirapikan */

/* General Body Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Menggunakan font yang lebih modern */
    background: #ebf9fb; /* Warna latar belakang cerah */
    display: flex; /* Menggunakan flexbox untuk penempatan elemen */
    justify-content: center; /* Memusatkan konten secara horizontal */
    align-items: center; /* Memusatkan konten secara vertikal */
    min-height: 100vh; /* Memastikan body mengambil seluruh tinggi viewport */
    margin: 0; /* Menghilangkan margin default body */
    padding: 20px; /* Memberikan sedikit padding di sekitar konten */
    box-sizing: border-box; /* Memastikan padding tidak menambah lebar/tinggi elemen */
}

/* Page Title (h1) */
h1 {
    text-align: center;
    font-weight: 400; /* Sedikit lebih tebal dari 300, agar lebih terbaca */
    color: #333; /* Warna teks gelap */
    margin-bottom: 30px; /* Ruang di bawah judul */
    font-size: 2em; /* Ukuran font lebih besar */
}

/* Login Box Title */
.tulisan_login {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5em; /* Ukuran font lebih besar untuk judul login */
    color: #555; /* Warna teks abu-abu tua */
    margin-bottom: 25px; /* Ruang di bawah tulisan login */
    font-weight: bold; /* Lebih menonjol */
}

/* Login Box Container */
.kotak_login {
    width: 100%; /* Default width */
    max-width: 380px; /* Batasan lebar maksimum */
    background: white;
    border-radius: 10px; /* Sudut membulat */
    padding: 40px; /* Padding yang lebih besar */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* Bayangan yang lebih halus */
    /* Menghilangkan margin: 80px auto; karena sudah pakai flexbox di body */
    box-sizing: border-box; /* Memastikan padding tidak menambah lebar elemen */
}

/* Form Labels */
label {
    font-size: 0.95em; /* Ukuran font sedikit lebih kecil dari default */
    color: #666; /* Warna teks abu-abu */
    display: block; /* Memastikan label berada di barisnya sendiri */
    margin-bottom: 8px; /* Ruang di bawah label */
    font-weight: bold; /* Lebih menonjol */
}

/* Form Input Fields */
.form_login {
    width: 100%;
    padding: 12px 15px; /* Padding yang lebih baik */
    font-size: 1em; /* Ukuran font standar */
    margin-bottom: 25px; /* Ruang di bawah input */
    border: 1px solid #ddd; /* Border abu-abu terang */
    border-radius: 5px; /* Sudut membulat */
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transisi halus saat fokus */
}

.form_login:focus {
    border-color: #2aa7e2; /* Border biru saat fokus */
    outline: none; /* Menghilangkan outline default browser */
    box-shadow: 0 0 0 3px rgba(42, 167, 226, 0.2); /* Efek bayangan saat fokus */
}

/* Submit Button */
.tombol_login {
    background: #2aa7e2; /* Biru cerah */
    color: white;
    font-size: 1.1em; /* Ukuran font sedikit lebih besar */
    font-weight: bold; /* Lebih menonjol */
    width: 100%;
    border: none;
    border-radius: 5px; /* Sudut membulat */
    padding: 12px 20px;
    cursor: pointer; /* Menunjukkan bahwa ini bisa diklik */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transisi halus */
}

.tombol_login:hover {
    background-color: #1a8ccb; /* Biru sedikit lebih gelap saat hover */
    transform: translateY(-2px); /* Efek sedikit naik saat hover */
}

.tombol_login:active {
    transform: translateY(0); /* Kembali ke posisi semula saat diklik */
}

/* Link (Kembali) */
.link {
    color: #2aa7e2; /* Warna biru konsisten dengan tombol */
    text-decoration: none; /* Tanpa garis bawah */
    font-size: 0.9em; /* Ukuran font sedikit lebih kecil */
    display: block; /* Memastikan link berada di barisnya sendiri */
    text-align: center;
    margin-top: 20px; /* Ruang di atas link */
    transition: color 0.3s ease; /* Transisi warna saat hover */
}

.link:hover {
    color: #1a8ccb; /* Biru sedikit lebih gelap saat hover */
    text-decoration: underline; /* Garis bawah saat hover */
}

/* Alert Messages */
.alert {
    background: #e44e4e; /* Merah untuk pesan error */
    color: white;
    padding: 12px;
    text-align: center;
    border: 1px solid #b32929;
    border-radius: 5px; /* Sudut membulat */
    font-size: 0.95em;
    margin-bottom: 20px; /* Ruang di bawah alert */
}

/* Responsive Adjustments */
@media (max-width: 480px) {
    .kotak_login {
        padding: 25px; /* Kurangi padding di layar kecil */
        margin: 20px; /* Kurangi margin di layar kecil */
    }

    h1 {
        font-size: 1.5em; /* Kecilkan judul di layar sangat kecil */
    }

    .tulisan_login {
        font-size: 1.2em; /* Kecilkan judul login di layar sangat kecil */
    }
}