/* =========================================================================
   HALAMAN AUTENTIKASI (masuk & daftar)
   -------------------------------------------------------------------------
   Kartu dua sisi: identitas layanan di kiri, formulir di kanan.
   Di bawah 992px tumpukannya berubah vertikal dan sisi kiri diringkas jadi
   kepala kartu supaya formulir tetap berada di zona jempol.
   ========================================================================= */

.halaman-auth{
    min-height:100vh;
    min-height:100dvh;
    display:flex; align-items:center; justify-content:center;
    padding:24px 16px;
}

.auth-bungkus{ width:100%; max-width:1040px; }

.auth-kartu{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    background:#fff;
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 30px 80px -24px rgba(10,90,2,.38);
}

/* -- Sisi identitas -------------------------------------------------------- */
.auth-sisi{
    background:var(--bk-gradasi);
    color:#fff;
    padding:44px 38px;
    display:flex; flex-direction:column;
    position:relative; overflow:hidden;
}
.auth-sisi::after{
    content:''; position:absolute; right:-90px; bottom:-90px;
    width:280px; height:280px; border-radius:50%;
    background:rgba(255,255,255,.08); pointer-events:none;
}
.auth-sisi > *{ position:relative; z-index:2; }

.auth-merek{ display:flex; align-items:center; gap:13px; margin-bottom:34px; }
.auth-merek img{
    height:52px; width:auto; object-fit:contain;
    background:#fff; border-radius:14px; padding:6px;
}
.auth-merek span{ display:flex; flex-direction:column; line-height:1.2; }
.auth-merek b{ color:#fff; font-size:1.06rem; }
.auth-merek small{ font-size:.75rem; color:rgba(255,255,255,.72); }

.auth-sisi h2{
    color:#fff; font-size:clamp(1.35rem,2.4vw,1.85rem);
    margin-bottom:14px; letter-spacing:-.02em;
}
.auth-sisi > p{ color:rgba(255,255,255,.85); font-size:.95rem; margin-bottom:28px; }

.auth-poin{ list-style:none; padding:0; margin:0 0 auto; }
.auth-poin li{
    display:flex; align-items:flex-start; gap:12px;
    padding:9px 0; font-size:.92rem; color:rgba(255,255,255,.9);
}
.auth-poin i{ font-size:1.1rem; margin-top:2px; color:rgba(255,255,255,.75); }

.auth-kembali{
    display:inline-flex; align-items:center; gap:8px;
    color:rgba(255,255,255,.85); font-size:.88rem; font-weight:600;
    margin-top:30px; min-height:44px;
}
.auth-kembali:hover{ color:#fff; }

/* -- Sisi formulir --------------------------------------------------------- */
.auth-isi{ padding:44px 38px; display:flex; flex-direction:column; justify-content:center; }
.auth-isi .alert{ border-radius:14px; border:none; font-size:.92rem; }

.auth-judul{ margin-bottom:26px; }
.auth-judul h1{ font-size:1.5rem; margin-bottom:7px; }
.auth-judul p{ color:var(--bk-teks-lembut); font-size:.94rem; margin:0; }

/* Kolom sandi dengan tombol lihat/sembunyi */
.kolom-sandi{ position:relative; }
.kolom-sandi .form-control{ padding-right:52px; }
.lihat-sandi{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:42px; height:42px; border:none; background:transparent;
    color:var(--bk-teks-lembut); font-size:1.1rem; cursor:pointer;
    border-radius:10px;
}
.lihat-sandi:hover{ color:var(--bk-primer); background:var(--bk-permukaan-2); }

/* Pemisah "atau" */
.auth-pemisah{
    display:flex; align-items:center; gap:14px;
    margin:22px 0; color:var(--bk-teks-lembut); font-size:.84rem;
}
.auth-pemisah::before,
.auth-pemisah::after{ content:''; flex:1; height:1px; background:var(--bk-garis); }

/* Tombol Google */
.btn-google{
    display:flex; align-items:center; justify-content:center; gap:11px;
    width:100%; min-height:48px;
    border:1.5px solid var(--bk-garis); border-radius:999px;
    background:#fff; color:var(--bk-teks);
    font-weight:700; font-size:.94rem; cursor:pointer;
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.btn-google:hover{ border-color:var(--bk-primer); background:var(--bk-permukaan-2); transform:translateY(-1px); }
.btn-google svg{ width:20px; height:20px; flex:0 0 auto; }

.auth-kaki{ text-align:center; margin-top:24px; font-size:.92rem; color:var(--bk-teks-lembut); }
.auth-kaki a{ font-weight:700; }

/* Kekuatan sandi */
.kekuatan-sandi{ margin-top:9px; }
.kekuatan-alur{ height:6px; border-radius:999px; background:var(--bk-garis); overflow:hidden; }
.kekuatan-isi{ height:100%; width:0; border-radius:999px; transition:width .3s ease, background .3s ease; }
.kekuatan-teks{ font-size:.8rem; margin-top:5px; display:block; color:var(--bk-teks-lembut); }

/* =========================================================================
   RESPONSIF
   ========================================================================= */
@media (max-width:991.98px){
    .auth-kartu{ grid-template-columns:1fr; }
    /* Sisi identitas diringkas jadi kepala kartu: daftar keunggulan
       disembunyikan agar formulir tidak terdorong jauh ke bawah layar. */
    .auth-sisi{ padding:28px 26px; }
    .auth-sisi h2{ font-size:1.25rem; margin-bottom:8px; }
    .auth-sisi > p{ margin-bottom:0; font-size:.9rem; }
    .auth-merek{ margin-bottom:20px; }
    .auth-poin,
    .auth-kembali{ display:none; }
    .auth-isi{ padding:30px 26px 34px; }
}

@media (max-width:575.98px){
    .halaman-auth{ padding:0; align-items:stretch; }
    .auth-bungkus{ max-width:none; }
    .auth-kartu{ border-radius:0; min-height:100dvh; box-shadow:none; }
    .auth-sisi{ padding:24px 20px; border-radius:0; }
    .auth-sisi h2{ font-size:1.12rem; }
    .auth-merek img{ height:44px; }
    .auth-isi{ padding:26px 20px 40px; }
    .auth-judul h1{ font-size:1.28rem; }
}

/* Layar pendek melintang: sisi identitas disembunyikan sepenuhnya supaya
   formulir tetap muat tanpa menggulir. */
@media (max-height:520px) and (orientation:landscape){
    .auth-sisi{ display:none; }
    .halaman-auth{ padding:16px; }
    .auth-kartu{ min-height:0; }
}

/* -- Mode aksesibilitas ---------------------------------------------------- */
:root[data-kontras="tinggi"] .auth-kartu{ background:#000 !important; border:2px solid #fff; }
:root[data-kontras="tinggi"] .auth-sisi{ background:#000 !important; border-right:2px solid #fff; }
:root[data-kontras="tinggi"] .btn-google{ background:#000 !important; color:#fff !important; border-color:#fff !important; }

:root[data-kontras="gelap"] .auth-kartu{ background:#17291B; }
:root[data-kontras="gelap"] .auth-isi{ background:#17291B; }
:root[data-kontras="gelap"] .btn-google{ background:#1E3524; color:#E2F0E4; border-color:rgba(21,127,4,.26); }
:root[data-kontras="gelap"] .auth-judul p,
:root[data-kontras="gelap"] .auth-kaki{ color:#9DB3A2; }