/* =========================================================
   HALAMAN LOGIN TANDEMKU (Auth/portal_login)
   Kiri: deskripsi aplikasi di panel bergaya primarybanner dashboard (gradien biru).
   Kanan: form langsung di latar putih (tanpa kartu).
   Warna mengikuti dashboard: biru #2563eb / #1e40af, aksen oranye
   #f76400 (dk-oranye) & hijau #16a34a (dk-hijau). Font Plus Jakarta Sans.
   Sengaja tanpa gambar, teks gradien, efek kaca, cahaya, atau kartu ikon.
   Halaman auth lain (lupa/reset password, MFA) masih memakai styleslogin.css.
   ========================================================= */
html,
body.auth-split {
    height: 100%;
}

body.auth-split {
    margin: 0;
    overflow: hidden; /* halaman pas satu layar; hanya area form yang boleh scroll di kondisi ekstrem */
    background: #fff;
    color: #101828;
    font-family: "Plus Jakarta Sans", Metropolis, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.auth-wrap {
    display: flex;
    height: 100vh;
    height: 100dvh; /* tinggi layar nyata di ponsel (bilah alamat muncul/hilang) */
}

/* ---------- Kiri: deskripsi aplikasi (biru) ---------- */
.auth-info {
    flex: 0 0 44%;
    max-width: 44%;
    margin: 14px; /* sama di semua sisi, termasuk kanan (batas dengan kolom form) */
    padding: clamp(1.25rem, 4vh, 2.5rem) clamp(1.75rem, 3.2vw, 3.25rem);
    min-height: 0;
    overflow: hidden;
    border-radius: 26px;
    /* gaya primarybanner-banner dashboard: gradien biru + lingkaran dekoratif */
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: 0 .75rem 2rem rgba(78, 115, 223, .25);
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.auth-info::before,
.auth-info::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.auth-info::before {
    top: -90px;
    right: -90px;
    width: 260px;
    height: 260px;
    background: rgba(255, 255, 255, .08);
}

.auth-info::after {
    bottom: -70px;
    left: -70px;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, .05);
}

.auth-info > * {
    position: relative;
    z-index: 1;
}

.auth-info-head {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.auth-logo {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-logo img {
    max-width: 38px;
    max-height: 38px;
}

.auth-info-head b {
    display: block;
    font-size: .95rem;
    color: #fff;
}

.auth-info-head span {
    font-size: .78rem;
    color: #c7d7fe;
}

.auth-info-main {
    /* dekat dengan logo (tidak lagi ditengahkan vertikal); footer didorong ke bawah */
    margin: clamp(1.5rem, 6vh, 3.5rem) 0 0;
    padding: 0 0 clamp(.75rem, 3vh, 2rem);
    max-width: 560px;
}

.auth-info-label {
    display: inline-block;
    padding: .38rem .8rem;
    border-radius: 8px;
    background: #f76400;
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.auth-info-nama {
    margin: clamp(.6rem, 1.8vh, 1.1rem) 0 0;
    font-size: clamp(1.9rem, min(3vw, 6.2vh), 3rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: #fff;
}

.auth-garis {
    width: 56px;
    height: 4px;
    margin: clamp(.6rem, 1.8vh, 1.1rem) 0 clamp(.5rem, 1.6vh, 1rem);
    border-radius: 999px;
    background: #f76400;
}

.auth-info-kepanjangan {
    font-size: 1.1rem;
    font-weight: 600;
    color: #dbe6ff;
}

.auth-info-teks {
    margin: clamp(.4rem, 1.5vh, .9rem) 0 0;
    font-size: .95rem;
    line-height: 1.75;
    color: #c7d7fe;
}

.auth-daftar {
    margin: clamp(.8rem, 3vh, 2rem) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.auth-daftar li {
    display: flex;
    gap: 1.1rem;
    align-items: baseline;
    padding: clamp(.45rem, 1.6vh, 1rem) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.auth-daftar .no {
    min-width: 1.8rem;
    font-size: .85rem;
    font-weight: 800;
    color: #fdba74;
    font-variant-numeric: tabular-nums;
}

.auth-daftar b {
    display: block;
    font-size: .95rem;
    color: #fff;
}

.auth-daftar span.teks {
    display: block;
    margin-top: .15rem;
    font-size: .85rem;
    line-height: 1.55;
    color: #c7d7fe;
}

.auth-info-foot {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    font-size: .76rem;
    color: #a9bff8;
}

/* ---------- Kanan: form (tanpa kartu) ---------- */
.auth-form-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(1rem, 3vh, 1.75rem) clamp(1.25rem, 3vw, 2.75rem);
    overflow-y: auto; /* pengaman: layar sangat pendek (mis. ponsel landscape + keyboard) */
}

.auth-form-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: .8rem;
    color: #667085;
}

.auth-brand-mini {
    display: none;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    color: #101828;
}

.auth-brand-mini img {
    height: 36px;
    width: auto;
}

.auth-form-inner {
    width: 100%;
    max-width: 400px;
    margin: auto;
    padding: clamp(.75rem, 3vh, 2rem) 0;
}

.auth-title {
    margin: 0 0 .5rem;
    font-size: clamp(1.45rem, 4vh, 1.9rem);
    font-weight: 800;
    letter-spacing: -.025em;
    color: #101828;
}

.auth-subtitle {
    margin-bottom: clamp(1rem, 3.5vh, 2rem);
    font-size: .92rem;
    line-height: 1.6;
    color: #475467;
}

.auth-label {
    display: block;
    margin-bottom: .4rem;
    font-size: .84rem;
    font-weight: 600;
    color: #1d2939;
}

.auth-field {
    position: relative;
}

.auth-input {
    height: 50px;
    padding: 0 1rem;
    border: 1.5px solid #d0d5dd;
    border-radius: 12px;
    background: #fff;
    font-size: .94rem;
    color: #101828;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-input::placeholder {
    color: #98a2b3;
}

.auth-input:hover {
    border-color: #98a2b3;
}

.auth-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
}

.auth-input.is-invalid {
    border-color: #dc2626;
    background-image: none;
}

.auth-input.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .15);
}

.auth-input-password {
    padding-right: 3rem;
}

.auth-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #667085;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-toggle:hover {
    background: #f2f4f7;
    color: #1d2939;
}

.auth-toggle svg {
    width: 18px;
    height: 18px;
}

.auth-feedback {
    display: none;
    margin-top: .4rem;
    font-size: .8rem;
    color: #dc2626;
}

.auth-feedback.show {
    display: block;
}

.auth-link {
    font-size: .84rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-link-oranye {
    color: #f76400;
}

.auth-link-oranye:hover {
    color: #d45500;
}

.auth-btn {
    height: 50px;
    width: 100%;
    border-radius: 12px;
    font-weight: 700;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    transition: background .15s ease, transform .15s ease;
}

.auth-btn-primary {
    border: 0;
    background: #2563eb;
    color: #fff;
}

.auth-btn-primary:hover {
    background: #1e40af;
    color: #fff;
}

.auth-btn-primary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .25);
}

.auth-btn-primary:active {
    transform: translateY(1px);
}

.auth-btn-primary svg {
    width: 17px;
    height: 17px;
    transition: transform .2s ease;
}

.auth-btn-primary:hover svg {
    transform: translateX(3px);
}

/* Loading (seperti desain lama): spinner cincin putih berputar, tombol redup & disabled */
.auth-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-putar .8s linear infinite;
    flex-shrink: 0;
}

@keyframes auth-putar {
    to { transform: rotate(360deg); }
}

.auth-btn-primary.loading,
.auth-btn-primary:disabled {
    opacity: .85;
    cursor: progress;
    pointer-events: none;
    background: #2563eb;
    color: #fff;
}

.auth-btn-primary.loading .auth-spinner {
    display: inline-block;
}

.auth-btn-primary.loading svg {
    display: none;
}

.auth-input[readonly] {
    background: #f9fafb;
}

/* selama form diproses: tautan & tombol lain tidak bisa diklik */
.auth-sedang-proses a.auth-btn,
.auth-sedang-proses .auth-link,
.auth-sedang-proses .auth-kembali {
    pointer-events: none;
    opacity: .55;
}

.auth-btn-google {
    border: 1.5px solid #d0d5dd;
    background: #fff;
    color: #1d2939;
    text-decoration: none;
}

.auth-btn-google:hover {
    background: #f9fafb;
    border-color: #98a2b3;
    color: #101828;
}

.auth-btn-google img {
    width: 18px;
    height: 18px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1.5rem 0;
    font-size: .8rem;
    color: #667085;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e4e7ec;
}

.auth-alert {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: .8rem .95rem;
    border-radius: 12px;
    border-left: 4px solid #dc2626;
    background: #fef2f2;
    color: #991b1b;
    font-size: .86rem;
    line-height: 1.5;
}

.auth-alert svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* jenis pesan mengikuti warna dashboard (_pesan.php) */
.auth-alert-sukses { border-left-color: #16a34a; background: #ecfdf3; color: #067647; }
.auth-alert-peringatan { border-left-color: #f76400; background: #fff4ec; color: #b93815; }
.auth-alert-info { border-left-color: #2563eb; background: #eff6ff; color: #1e40af; }

/* ---------- Elemen halaman OTP, lupa & reset password ---------- */
.auth-kembali {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: clamp(1rem, 3vh, 1.75rem);
    font-size: .84rem;
    font-weight: 600;
    color: #475467;
    text-decoration: none;
}

.auth-kembali:hover {
    color: #2563eb;
}

.auth-kembali svg {
    width: 16px;
    height: 16px;
}

.auth-akun {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.25rem;
    padding: .65rem .85rem;
    border-radius: 12px;
    background: #f2f4f7;
    font-size: .85rem;
    color: #344054;
    min-width: 0;
}

.auth-akun svg {
    width: 16px;
    height: 16px;
    color: #2563eb;
    flex-shrink: 0;
}

.auth-akun span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-otp {
    height: 64px;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: .6em;
    padding-left: calc(1rem + .6em); /* imbangi letter-spacing agar angka tetap di tengah */
    font-variant-numeric: tabular-nums;
}

.auth-otp::placeholder {
    color: #d0d5dd;
}

.auth-petunjuk {
    margin-top: .45rem;
    font-size: .8rem;
    line-height: 1.5;
    color: #667085;
}

.auth-btn-sekunder {
    border: 1.5px solid #d0d5dd;
    background: #fff;
    color: #344054;
    text-decoration: none;
}

.auth-btn-sekunder:hover {
    border-color: #98a2b3;
    background: #f9fafb;
    color: #101828;
}

.auth-kekuatan {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: .65rem;
}

.auth-kekuatan span {
    height: 5px;
    border-radius: 999px;
    background: #e4e7ec;
    transition: background .2s ease;
}

.auth-kekuatan span.lemah { background: #dc2626; }
.auth-kekuatan span.sedang { background: #f76400; }
.auth-kekuatan span.kuat { background: #16a34a; }

a.auth-btn {
    text-decoration: none;
}

.auth-footer {
    display: none;
    justify-content: center;
    gap: .5rem;
    font-size: .76rem;
    color: #667085;
    text-align: center;
}

/* ---------- Responsif ---------- */
@media (max-width: 1199.98px) {
    .auth-info { flex-basis: 46%; max-width: 46%; }
}

/* Laptop / PC: tinggi area browser lebih kecil dari resolusi layar (1366x768 ~ 650px,
   1920x1080 ~ 950px). Teks pendukung disembunyikan bertahap agar tidak terpotong. */
@media (min-width: 992px) and (max-height: 1000px) {
    .auth-info-teks { display: none; } /* kepanjangan nama & daftar 01-04 tetap tampil */
}

/* Laptop (tinggi <= 760px): keterangan item TETAP tampil, ukuran & jarak dirapatkan */
@media (min-width: 992px) and (max-height: 760px) {
    .auth-logo { width: 44px; height: 44px; border-radius: 13px; }
    .auth-logo img { max-width: 32px; max-height: 32px; }
    .auth-info-main { margin-top: clamp(1rem, 3vh, 1.75rem); }
    .auth-info-nama { font-size: clamp(1.7rem, min(2.6vw, 5vh), 2.4rem); }
    .auth-daftar li { padding: clamp(.35rem, 1vh, .6rem) 0; }
    .auth-daftar b { font-size: .9rem; }
    .auth-daftar span.teks { font-size: .76rem; line-height: 1.4; margin-top: .1rem; }
}

@media (min-width: 992px) and (max-height: 640px) {
    .auth-logo { width: 40px; height: 40px; border-radius: 12px; }
    .auth-logo img { max-width: 28px; max-height: 28px; }
    .auth-info-head span { display: none; }
    .auth-info-label { font-size: .66rem; padding: .28rem .65rem; }
    .auth-garis { margin: .5rem 0 .45rem; }
    .auth-info-kepanjangan { font-size: .95rem; }
    .auth-daftar { margin-top: .6rem; }
    .auth-daftar li { padding: .3rem 0; }
    .auth-daftar span.teks { font-size: .74rem; }
}

/* Tablet & ponsel: form saja */
@media (max-width: 991.98px) {
    .auth-info { display: none; }
    .auth-form-top { justify-content: flex-start; }
    .auth-brand-mini { display: flex; }
    .auth-footer { display: flex; flex-wrap: wrap; }
}

/* Ponsel pendek: perkecil input & jarak */
@media (max-width: 991.98px) and (max-height: 680px) {
    .auth-input, .auth-btn { height: 44px; }
    .auth-subtitle { font-size: .86rem; }
    .auth-brand-mini img { height: 30px; }
    .auth-divider { margin: 1rem 0; }
    .auth-btn-primary.mt-4 { margin-top: 1rem !important; }
    .auth-form-panel .mb-3 { margin-bottom: .75rem !important; }
}

/* Ponsel landscape / sangat pendek: hanya form inti */
@media (max-height: 480px) {
    .auth-brand-mini, .auth-footer, .auth-subtitle, .auth-petunjuk, .auth-akun { display: none; }
    .auth-kembali { margin-bottom: .5rem; }
    .auth-otp { height: 52px; font-size: 1.4rem; }
    .auth-title { font-size: 1.3rem; margin-bottom: .75rem; }
    .auth-form-inner { padding: .25rem 0; }
    .auth-info-teks, .auth-daftar span.teks { display: none; }
}