/* =========================================================================
   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(127,29,29,.30);
}

/* -- Sisi identitas -------------------------------------------------------- */
.auth-sisi{
    background:var(--sl-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(--sl-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(--sl-teks-lembut); font-size:1.1rem; cursor:pointer;
    border-radius:10px;
}
.lihat-sandi:hover{ color:var(--sl-primer); background:var(--sl-permukaan-2); }

/* Pemisah "atau" */
.auth-pemisah{
    display:flex; align-items:center; gap:14px;
    margin:22px 0; color:var(--sl-teks-lembut); font-size:.84rem;
}
.auth-pemisah::before,
.auth-pemisah::after{ content:''; flex:1; height:1px; background:var(--sl-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(--sl-garis); border-radius:999px;
    background:#fff; color:var(--sl-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(--sl-primer); background:var(--sl-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(--sl-teks-lembut); }
.auth-kaki a{ font-weight:700; }

/* Kekuatan sandi */
.kekuatan-sandi{ margin-top:9px; }
.kekuatan-alur{ height:6px; border-radius:999px; background:var(--sl-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(--sl-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; }
}

/* -- Dasar formulir (halaman auth tidak memuat panel.css) ------------------ */
.halaman-auth .form-label{ font-weight:700; font-size:.86rem; margin-bottom:6px; }
.halaman-auth .wajib{ color:var(--sl-primer); }
.halaman-auth .form-control,
.halaman-auth .form-select{
    border:1.5px solid var(--sl-garis); border-radius:12px;
    padding:11px 14px; min-height:48px; font-family:inherit; color:var(--sl-teks);
}
.halaman-auth .form-control:focus,
.halaman-auth .form-select:focus{
    border-color:var(--sl-primer); box-shadow:0 0 0 4px rgba(220,38,38,.1);
}
.halaman-auth .form-check-input:checked{ background-color:var(--sl-primer); border-color:var(--sl-primer); }
.halaman-auth .form-text{ font-size:.78rem; color:var(--sl-teks-lembut); }
.halaman-auth a{ color:var(--sl-primer); text-decoration:none; }
.halaman-auth a:hover{ color:var(--sl-primer-gelap); }
.halaman-auth .auth-sisi a{ color:inherit; }
.pesan-galat{ font-size:.8rem; color:#b91c1c; }

.lewati-ke-isi{ position:absolute; left:-9999px; }
.lewati-ke-isi:focus{ left:16px; top:16px; z-index:10; background:#fff; padding:8px 14px; border-radius:10px; }

/* -- Kolom kode OTP -------------------------------------------------------- */
.kolom-otp{
    font-size:1.7rem !important; font-weight:800; text-align:center;
    letter-spacing:.5em; padding-left:.5em !important;
    font-variant-numeric:tabular-nums;
    box-shadow:var(--sl-neu-cekung);
}
.otp-tujuan{
    display:flex; align-items:center; gap:10px;
    background:var(--sl-primer-lembut); border-radius:12px;
    padding:12px 14px; font-size:.9rem; margin-bottom:20px;
}
.otp-tujuan i{ color:var(--sl-primer); font-size:1.2rem; }

/* Kotak kode di layar: hanya muncul di lingkungan lokal tanpa SMTP. Warnanya
   amber, bukan merah tema, supaya jelas terbaca sebagai keadaan pengembangan
   dan tidak berbaur dengan bagian biasa halaman ini. */
.otp-layar{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    background:#fffbeb; border:1px dashed #f59e0b; border-radius:14px;
    padding:14px 16px; margin-bottom:20px; text-align:center;
}
.otp-layar-label{
    font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    color:#b45309;
}
.otp-layar-kode{
    font-size:2rem; font-weight:800; letter-spacing:.34em; padding-left:.34em;
    line-height:1.15; color:#92400e; font-variant-numeric:tabular-nums;
    user-select:all;
}
.otp-layar-ket{ font-size:.78rem; line-height:1.5; color:#92400e; }
.otp-ulang{
    display:flex; justify-content:space-between; align-items:center;
    gap:10px; flex-wrap:wrap; margin-top:18px; font-size:.88rem;
    color:var(--sl-teks-lembut);
}
.otp-ulang .btn-tautan{
    border:none; background:none; padding:6px 4px; min-height:44px;
    color:var(--sl-primer); font-weight:700; cursor:pointer;
}
.otp-ulang .btn-tautan:disabled{ color:var(--sl-teks-lembut); cursor:not-allowed; }