/* ==========================================================================
   SIAP IPDN — HALAMAN MASUK
   ==========================================================================

   Tata letak terbelah dua: sisi kiri menyatakan ini aplikasi apa, sisi kanan
   mengurus pekerjaannya.

   Memakai token yang SAMA dengan aplikasi (tokens.css). Sebelumnya halaman ini
   menduplikasi seluruh paletnya sebagai hex hard-coded tanpa satu pun variabel,
   sehingga menggeser warna aplikasi tidak pernah ikut menggeser halaman masuk.
   ========================================================================== */

.auth {
    min-height: 100vh;
    display: grid;
    /* Kiri sedikit lebih lebar: sisi kanan hanya perlu selebar formulirnya, dan
       kolom formulir yang terlalu lebar membuat medannya melebar tanpa guna. */
    grid-template-columns: 1.15fr 1fr;
    background: var(--surface-card);
}

/* ── Panel kiri ────────────────────────────────────────────────────────────*/

.auth__panel {
    position: relative;
    overflow: hidden;
    background: var(--a-700);
    display: flex;
}

/* Foto gerbang & gedung rektorat IPDN (public/img/bg.jpeg).

   Fotonya hanya 549×364 piksel, sedangkan panel ini ±1.000 piksel lebar
   (±2.000 di layar Retina) — diperbesar ±4×. Dua hal menyembunyikan
   pembesarannya:
     1. buram tipis yang disengaja, sehingga terbaca sebagai efek, bukan
        foto pecah; skala 1,04 menutup tepi transparan akibat blur;
     2. lapisan dongker di atasnya (::after), yang sekaligus menjaga teks
        putih tetap terbaca di atas langit yang terang.
   Ganti dengan foto ≥2.000 piksel lebar untuk hasil yang tajam — cukup
   timpa berkasnya, CSS ini tidak perlu diubah.

   Jalur relatif terhadap berkas CSS ini (css/siap/ → ../../img/), jadi tetap
   benar walau aplikasi dipasang di subfolder. */
.auth__latar {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--a-800);   /* tampil sesaat sebelum foto termuat */
}

.auth__latar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../../img/bg.jpeg') center 40% / cover no-repeat;
    filter: blur(1.5px) saturate(.9);
    transform: scale(1.04);
}

/* Lapisan dongker: tipis di atas supaya gerbang dan gedungnya tetap terlihat,
   pekat di bawah tempat slogan berada. Bukan hiasan — tanpa lapisan ini teks
   putih di atas langit siang tidak terbaca. */
.auth__latar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(13, 36, 73, .72) 0%,
        rgba(13, 36, 73, .38) 30%,
        rgba(13, 36, 73, .55) 55%,
        rgba(10, 28, 58, .92) 82%,
        rgba(10, 28, 58, .96) 100%
    );
}

.auth__panel-isi {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--s-10) clamp(var(--s-8), 5vw, 64px);
    width: 100%;
    color: var(--n-0);
}

.auth__merek { display: flex; align-items: center; gap: var(--s-3); }

.auth__merek-nama {
    font-size: 1.4rem;
    font-weight: var(--fw-bold);
    letter-spacing: .5px;
    line-height: 1.1;
}

.auth__merek-sub {
    font-size: var(--t-2xs);
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

/* Lambang IPDN adalah segel BULAT dengan cincin dongker — di atas latar yang
   juga dongker tepinya lenyap, jadi ia butuh alas putih dan cincin emas. */
.auth__logo {
    width: 52px; height: 52px;
    background: var(--n-0);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--a-emas);
}

.auth__logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }

.auth__logo--ringkas {
    width: 64px; height: 64px;
    margin: 0 auto var(--s-5);
    box-shadow: 0 0 0 2px var(--a-emas), 0 8px 20px rgba(18, 48, 94, .18);
}

.auth__panel-bawah { max-width: 30ch; }

.auth__slogan {
    /* Warna DITULIS EKSPLISIT, tidak diwarisi dari .auth__panel-isi.
       base.css menyetel `h1..h6 { color: var(--text) }`, dan aturan itu
       mengalahkan warna yang diwarisi — jadi slogan ini pernah dirender navy
       tua di atas latar navy tua alias tak terlihat sama sekali. Paragraf di
       bawahnya lolos hanya karena <p> tidak kena aturan tersebut. */
    color: var(--n-0);
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    letter-spacing: -.5px;
    margin: 0 0 var(--s-4);
}

.auth__slogan-sub {
    font-size: var(--t-base);
    color: rgba(255, 255, 255, .68);
    line-height: 1.65;
    margin: 0;
    max-width: 42ch;
}

/* ── Sisi formulir ─────────────────────────────────────────────────────────*/

.auth__form-sisi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s-8) var(--s-6);
    gap: var(--s-6);
}

.auth__kartu {
    width: 100%;
    max-width: 384px;
}

.auth__judul {
    font-size: 1.65rem;
    font-weight: var(--fw-bold);
    color: var(--text);
    letter-spacing: -.4px;
    margin: 0 0 var(--s-2);
}

.auth__subjudul {
    font-size: var(--t-base);
    color: var(--text-muted);
    margin: 0 0 var(--s-6);
}

.auth__kaki {
    font-size: var(--t-2xs);
    color: var(--text-faint);
    margin: 0;
}

/* ── Kendali ───────────────────────────────────────────────────────────────*/

.auth__kartu .form-label {
    font-size: var(--t-sm);
    font-weight: var(--fw-medium);
    color: var(--text-body);
    margin-bottom: var(--s-2);
}

.auth__kartu .form-control {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    font-size: var(--t-base);
}

/* Tombol utama gelap, bukan bergradasi.

   Bidang datar gelap terbaca sebagai satu tindakan tegas; gradasi dengan
   bayangan berwarna dan efek terangkat membuatnya terasa seperti tombol iklan.
   Warnanya navy institusi, jadi identitasnya tetap terbaca. */
.btn-login {
    width: 100%;
    background: var(--a-700);
    border: 1px solid var(--a-700);
    border-radius: var(--r-md);
    padding: var(--s-3);
    font-size: var(--t-md);
    font-weight: var(--fw-semi);
    color: var(--n-0);
    transition: background .15s;
}

.btn-login:hover,
.btn-login:focus {
    background: var(--a-800);
    border-color: var(--a-800);
    color: var(--n-0);
}

/* Kotak sandi dengan tombol mata di dalamnya. Memakai position, bukan
   input-group Bootstrap: input-group memecah radius dan garis batasnya jadi
   dua bidang yang harus disambung ulang. */
.kotak-sandi { position: relative; }

.kotak-sandi .form-control { padding-right: var(--s-10); }

.kotak-sandi__mata {
    position: absolute;
    right: var(--s-2); top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: none;
    color: var(--text-faint);
    border-radius: var(--r-sm);
    cursor: pointer;
}

.kotak-sandi__mata:hover { color: var(--text-body); background: var(--surface-sunken); }

/* ── Pemisah "atau" ────────────────────────────────────────────────────────*/

.auth__pemisah {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-5) 0;
    font-size: var(--t-xs);
    color: var(--text-faint);
}

.auth__pemisah::before,
.auth__pemisah::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Tombol Google ─────────────────────────────────────────────────────────*/

.btn-google {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: var(--s-2);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s-3);
    font-size: var(--t-base);
    font-weight: var(--fw-medium);
    color: var(--text-body);
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.btn-google:hover {
    background: var(--surface-sunken);
    border-color: var(--border-strong);
    color: var(--text);
}

.auth-link { color: var(--a-500); text-decoration: none; font-size: var(--t-sm); }
.auth-link:hover { text-decoration: underline; }

/* ── Responsive ────────────────────────────────────────────────────────────*/

@media (max-width: 991.98px) {
    /* Panel kiri disembunyikan, bukan ditumpuk di atas formulir: di ponsel ia
       akan mendorong medan masuk ke bawah lipatan, dan yang datang ke halaman
       ini datang untuk masuk — bukan membaca slogan. */
    .auth { grid-template-columns: 1fr; }
    .auth__panel { display: none; }
    .auth__form-sisi { min-height: 100vh; }
}

@media (max-width: 575.98px) {
    .auth__form-sisi { padding: var(--s-6) var(--s-4); }
    .auth__judul { font-size: 1.45rem; }
}