/* Halaman masuk/daftar/atur ulang — token sama dengan portal /sso/ dan Officer (sso/styling/ui.css). */
:root {
    --u-ink: #0f172a;
    --u-ink-2: #334155;
    --u-muted: #64748b;
    --u-line: #e2e8f0;
    --u-line-soft: #eef2f6;
    --u-bg: #f6f7f9;
    --u-surface: #ffffff;
    --u-surface-2: #f8fafc;
    --u-accent: #1f4fd1;
    --u-accent-hover: #163a9e;
    --u-accent-soft: #e8eefc;
    --u-success: #146c2e;
    --u-success-soft: #e7f6ec;
    --u-warning: #8a4b00;
    --u-warning-soft: #fdf1dc;
    --u-danger: #b42318;
    --u-danger-soft: #fde8e6;
    --u-radius: 8px;
    --u-radius-lg: 12px;
    --u-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    --u-shadow-lg: 0 10px 30px rgba(15, 23, 42, .10);
    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-size: .9rem;
    --bs-body-color: var(--u-ink);
    --bs-body-bg: var(--u-bg);
    --bs-border-color: var(--u-line);
    --bs-border-radius: var(--u-radius);
    --bs-primary: #1f4fd1;
    --bs-primary-rgb: 31, 79, 209;
    --bs-link-color: #1f4fd1;
    --bs-link-color-rgb: 31, 79, 209;
    --bs-link-hover-color: #163a9e;
    --bs-link-hover-color-rgb: 22, 58, 158;
}
.btn-primary {
    --bs-btn-bg: #1f4fd1; --bs-btn-border-color: #1f4fd1; --bs-btn-hover-bg: #163a9e; --bs-btn-hover-border-color: #163a9e;
    --bs-btn-active-bg: #163a9e; --bs-btn-active-border-color: #163a9e; --bs-btn-disabled-bg: #1f4fd1; --bs-btn-disabled-border-color: #1f4fd1;
}
.btn-outline-primary {
    --bs-btn-color: #1f4fd1; --bs-btn-border-color: #c7d5f7; --bs-btn-hover-bg: #1f4fd1; --bs-btn-hover-border-color: #1f4fd1;
    --bs-btn-active-bg: #163a9e; --bs-btn-active-border-color: #163a9e;
}
body.auth-body { background: var(--u-bg); min-height: 100vh; margin: 0; }

/* ── Kerangka: panel merek (desktop) + kolom formulir ───────────── */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .auth-shell { grid-template-columns: minmax(380px, 44%) minmax(0, 1fr); } }

.auth-brand {
    display: none; position: relative; overflow: hidden; color: #fff; padding: 48px 56px;
    background: radial-gradient(120% 90% at 0% 0%, #2c5fe6 0%, #1f4fd1 38%, #163a9e 72%, #0f2a75 100%);
}
@media (min-width: 992px) { .auth-brand { display: flex; flex-direction: column; } }
.auth-brand::after {
    content: ""; position: absolute; inset: auto -120px -160px auto; width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); pointer-events: none;
}
.auth-brand-logo { display: inline-flex; align-items: center; background: #fff; border-radius: 12px; padding: 8px 14px; align-self: flex-start; }
.auth-brand-logo img { height: 30px; width: auto; display: block; }
.auth-brand-body { margin: auto 0; max-width: 460px; position: relative; z-index: 1; }
.auth-brand h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 12px; }
.auth-brand-lead { color: rgba(255, 255, 255, .82); font-size: .98rem; line-height: 1.6; margin-bottom: 28px; }
.auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.auth-points li { display: flex; gap: 12px; align-items: flex-start; }
.auth-points .ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; }
.auth-points b { display: block; font-weight: 600; font-size: .92rem; }
.auth-points span { color: rgba(255, 255, 255, .75); font-size: .84rem; line-height: 1.45; }
.auth-brand-foot { position: relative; z-index: 1; display: flex; gap: 10px; align-items: center; font-size: .84rem; color: rgba(255, 255, 255, .8); }
.auth-brand-foot a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.auth-main { display: flex; flex-direction: column; min-height: 100vh; }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.auth-top-logo img { height: 30px; width: auto; }
@media (min-width: 992px) { .auth-top-logo { visibility: hidden; } }
.auth-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 16px 32px; }
.auth-card {
    width: 100%; max-width: var(--auth-card-width, 420px); background: var(--u-surface); border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg); box-shadow: var(--u-shadow-lg); padding: 28px;
}
@media (max-width: 575.98px) { .auth-card { padding: 22px 18px; border-radius: 14px; } }
.auth-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.auth-sub { color: var(--u-muted); margin: 0 0 22px; font-size: .9rem; }

/* ── Formulir ───────────────────────────────────────────────────── */
.auth-card .form-label, .auth-label { font-weight: 600; font-size: .85rem; color: var(--u-ink-2); margin-bottom: 6px; }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.auth-label-row a { font-size: .82rem; font-weight: 600; text-decoration: none; }
.auth-card .form-control, .auth-card .form-select { border-radius: var(--u-radius); border-color: var(--u-line); padding: .62rem .8rem; font-size: .92rem; }
.auth-card .form-control:focus, .auth-card .form-select:focus { border-color: var(--u-accent); box-shadow: 0 0 0 3px rgba(31, 79, 209, .15); }
.auth-input { position: relative; }
.auth-input > .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--u-muted); font-size: .9rem; pointer-events: none; }
.auth-input > .form-control { padding-left: 2.35rem; }
.auth-input > .toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--u-muted); padding: 8px 10px; border-radius: 6px; }
.auth-input > .toggle:hover { color: var(--u-ink); background: var(--u-surface-2); }
.auth-input > .form-control.has-toggle { padding-right: 2.6rem; }
.auth-help { color: var(--u-muted); font-size: .8rem; margin-top: 6px; line-height: 1.45; }
.auth-error { color: var(--u-danger); font-size: .82rem; margin-top: 6px; }
.auth-card .btn { border-radius: var(--u-radius); font-weight: 600; padding: .62rem 1rem; }
.auth-card .btn-lg { padding: .72rem 1rem; font-size: .95rem; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--u-muted); font-size: .8rem; margin: 18px 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--u-line); }
.btn-google { background: #fff; border: 1px solid var(--u-line); color: var(--u-ink); display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-google:hover { background: var(--u-surface-2); border-color: #cbd5e1; color: var(--u-ink); }
.btn-google svg { width: 18px; height: 18px; }
.btn-wa { background: #fff; border: 1px solid var(--u-line); color: #128c4a; }
.btn-wa:hover { background: #effaf3; border-color: #bfe6cc; color: #0d6b38; }
.auth-note { font-size: .78rem; color: var(--u-muted); text-align: center; margin-top: 8px; }
.auth-callout { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--u-radius); padding: 10px 12px; font-size: .85rem; margin-bottom: 18px; background: var(--u-accent-soft); color: #1d3a8f; }
.auth-callout.is-warning { background: var(--u-warning-soft); color: var(--u-warning); }
.auth-callout.is-success { background: var(--u-success-soft); color: var(--u-success); }
.auth-callout i { margin-top: 2px; }
.auth-links { display: flex; justify-content: center; gap: 6px 18px; flex-wrap: wrap; margin-top: 18px; font-size: .85rem; }
.auth-links a { font-weight: 600; text-decoration: none; }

/* Bantuan akun (accordion ringan) */
.auth-help-box { margin-top: 20px; border-top: 1px solid var(--u-line); padding-top: 14px; }
.auth-help-box > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .86rem; color: var(--u-ink-2); }
.auth-help-box > summary::-webkit-details-marker { display: none; }
.auth-help-box > summary .chev { margin-left: auto; transition: transform .2s; color: var(--u-muted); font-size: .75rem; }
.auth-help-box[open] > summary .chev { transform: rotate(180deg); }
.auth-qa { margin-top: 12px; display: grid; gap: 10px; }
.auth-qa div { background: var(--u-surface-2); border: 1px solid var(--u-line-soft); border-radius: var(--u-radius); padding: 10px 12px; }
.auth-qa b { display: block; font-size: .84rem; margin-bottom: 2px; }
.auth-qa p { margin: 0; font-size: .82rem; color: var(--u-ink-2); line-height: 1.5; }

/* Tab segmen (lupa kata sandi) */
.auth-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--u-surface-2); border: 1px solid var(--u-line); border-radius: 10px; padding: 4px; margin-bottom: 20px; }
.auth-seg .nav-link { border: 0; border-radius: 7px; color: var(--u-muted); font-weight: 600; font-size: .85rem; padding: .5rem .6rem; background: none; }
.auth-seg .nav-link.active { background: #fff; color: var(--u-accent); box-shadow: var(--u-shadow); }

/* Captcha (widget account/elements/captcha.html via crispy) */
.auth-card #div_id_captcha legend, .auth-card [id^="div_id_"] > label.form-label:empty { display: none; }
.auth-card img.captcha { height: 46px; width: auto; border-radius: var(--u-radius); border-color: var(--u-line); background: #fff; }
.auth-card .form-text { color: var(--u-muted); font-size: .78rem; }
.auth-card .mb-3:last-child { margin-bottom: 0; }

/* Kaki */
.auth-foot { padding: 14px 20px 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; align-items: center; font-size: .78rem; color: var(--u-muted); }
.auth-foot a { color: var(--u-ink-2); text-decoration: none; font-weight: 600; }
.auth-foot a:hover { color: var(--u-accent); }
.auth-foot .sep { flex-basis: 100%; height: 0; }
@media (min-width: 768px) { .auth-foot { justify-content: space-between; } .auth-foot .sep { display: none; } }

/* Tombol helpdesk & pemilih bahasa mengambang: beri ruang di ponsel */
@media (max-width: 575.98px) { .auth-foot { padding-bottom: 84px; } }
@media print { .auth-brand, .auth-top, .auth-foot, .language-selector-wrapper { display: none !important; } }
.auth-card .form-control, .auth-card .form-select { background-color: #fff; }
@media (max-width: 575.98px) { .auth-foot { padding-right: 72px; padding-left: 16px; justify-content: flex-start; } .auth-foot nav { justify-content: flex-start !important; } }

/* Pemicu & popup bantuan akun (halaman masuk) */
.auth-help-trigger { width: 100%; margin-top: 18px; padding: 12px 2px 0; border: 0; border-top: 1px solid var(--u-line); background: none; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .86rem; color: var(--u-ink-2); text-align: left; }
.auth-help-trigger:hover { color: var(--u-accent); }
.auth-help-trigger .chev { margin-left: auto; color: var(--u-muted); font-size: .75rem; }
.auth-modal { border: 0; border-radius: 14px; }
.auth-modal .modal-header { border-bottom: 1px solid var(--u-line); padding: 14px 18px; }
.auth-modal .modal-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.auth-modal .modal-body { padding: 16px 18px 18px; }
.auth-modal .auth-qa { margin-top: 0; }
.auth-link-list { margin-top: 14px; display: grid; gap: 8px; }
.auth-link-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--u-line); border-radius: var(--u-radius); text-decoration: none; color: var(--u-ink); background: #fff; }
.auth-link-list a:hover { border-color: #c7d5f7; background: var(--u-accent-soft); }
.auth-link-list .ic { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--u-accent-soft); color: var(--u-accent); }
.auth-link-list b { display: block; font-size: .86rem; }
.auth-link-list small { display: block; color: var(--u-muted); font-size: .76rem; }
.auth-link-list .go { margin-left: auto; color: var(--u-muted); font-size: .75rem; }
@media (max-width: 575.98px) { .auth-modal { border-radius: 0; } }