:root {
    --primary-color: #229799; /* Warna utama */
    --secondary-color: #F4F8F7; /* Warna sekunder */
    --text-color: #333333; /* Warna teks */
    --muted-color: #767676; /* Warna teks redup */
    --white-color: #FFFFFF; /* Warna putih */
    --error-color: #DC3545; /* Warna untuk pesan error */
}

body {
    font-family: 'Arial', sans-serif; /* Font untuk seluruh halaman */
    background-color: var(--primary-color); /* Warna latar belakang */
    background-image: url('../images/background_login_admin.png'); /* Gambar latar belakang */
    background-size: cover; /* Menutupi seluruh area */
    background-position: center; /* Pusat gambar */
    background-repeat: no-repeat; /* Tidak mengulang gambar */
    color: var(--text-color); /* Warna teks */
}

.container-fluid {
    min-height: 100vh; /* Tinggi minimal 100% viewport */
    display: flex; /* Menggunakan flexbox */
    align-items: center; /* Vertikal center */
    justify-content: center; /* Horizontal center */
}

.card {
    width: 200%; /* Lebar 100% */
    max-width: 600px; /* Lebar maksimum 400px */
    background-color: var(--white-color); /* Warna latar belakang kartu */
    border-radius: 15px; /* Sudut melengkung */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Bayangan */
    padding: 2rem; /* Padding dalam kartu */
}

h1 {
    color: var(--primary-color); /* Warna judul */
    font-size: 2rem; /* Ukuran font judul */
    font-weight: 700; /* Ketebalan font */
    margin-bottom: 0.5rem; /* Margin bawah */
}

p {
    color: var(--muted-color); /* Warna paragraf */
    font-size: 1rem; /* Ukuran font paragraf */
    margin-bottom: 1.5rem; /* Margin bawah */
}

.form-control {
    background-color: var(--secondary-color); /* Warna latar belakang input */
    border: 1px solid var(--white-color); /* Border input */
    border-radius: 10px; /* Sudut melengkung */
    height: 50px; /* Tinggi input */
    font-size: 1rem; /* Ukuran font input */
}

.btn {
    height: 50px; /* Tinggi tombol */
    font-size: 1rem; /* Ukuran font tombol */
    font-weight: bold; /* Ketebalan font tombol */
    text-transform: uppercase; /* Huruf kapital */
}

.btn-primary {
    background-color: var(--primary-color); /* Warna latar belakang tombol utama */
    border-color: var(--primary-color); /* Warna border tombol utama */
    color: var(--white-color); /* Warna teks tombol utama */
}

#emailError {
    color: var(--error-color); /* Warna untuk pesan error */
    font-size: 0.875rem; /* Ukuran font pesan error */
    margin-top: 0.5rem; /* Margin atas */
}

@media (max-width: 576px) {
    .card {
        padding: 1.5rem; /* Padding dalam kartu untuk perangkat kecil */
    }

    h1 {
        font-size: 1.75rem; /* Ukuran font judul untuk perangkat kecil */
    }

    p {
        font-size: 0.875rem; /* Ukuran font paragraf untuk perangkat kecil */
    }
}