/* =========================================
   LOGIN & AUTH PAGE STYLE
   ========================================= */

/* 1. SECTION FULL SCREEN */
.login-section {
    width: 100%;

    /* UBAH DISINI: Gunakan min-height yang aman */
    /* calc(100vh - 80px) artinya tinggi layar dikurangi perkiraan tinggi navbar */
    min-height: 100vh;

    /* TAMBAHKAN PADDING ATAS LEBIH BESAR */
    /* Sebelumnya 100px, kita naikkan jadi 150px atau 180px */
    padding-top: 150px;
    padding-bottom: 80px;

    background-color: #080f1f;

    /* Pastikan flexbox tetap rata tengah tapi menghormati padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 2. LOGIN CARD (GLASSMORPHISM) */
.login-card {
    background: rgba(11, 22, 44, 0.75); /* Navy Gelap Transparan */
    backdrop-filter: blur(20px);         /* Efek Blur Kaca */
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);

    position: relative;
    overflow: hidden;
}

/* Garis Neon Hiasan di Atas Card */
.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, #0061f2, #06b6d4);
}

/* 3. INPUT FIELDS (DARK INTEGRATED) */
/* Background untuk Ikon Input Group */
.bg-navy-input {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #b0b8c4;
}

/* Input Form Utama */
.form-control-dark {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    padding: 12px 15px;
    height: auto;
}

/* Efek Fokus Input */
.form-control-dark:focus {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-color: #0061f2 !important; /* Border Biru */
    box-shadow: none;
    color: white;
}

/* Saat Input di-klik, Ikon di sebelahnya ikut menyala biru */
.input-group:focus-within .input-group-text {
    border-color: #0061f2 !important;
    color: #38bdf8;
}
.input-group:focus-within .form-control-dark {
    border-color: #0061f2 !important;
}

/* 4. TOMBOL & ALERT */
.shadow-lg-green {
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
    transition: 0.3s;
}
.shadow-lg-green:hover {
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.5);
    transform: translateY(-2px);
}

/* Alert Error Merah Transparan */
.bg-danger-soft {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* Checkbox */
.form-check-input:checked {
    background-color: #0061f2;
    border-color: #0061f2;
}

@media (max-height: 800px) {
    .login-section {
        padding-top: 180px; /* Paksa turun lebih jauh */
        justify-content: flex-start; /* Jangan dipaksa tengah, biarkan mengalir dari atas */
    }
}