/* ========================================================================
   ADIP RMX — MODAL POPUP FLOATING AUTHENTICATION (Dark Glassmorphism v2)
   TAHAP 1 — REDESIGN UI/UX TOTAL (visual + animasi only).
   ADDITIVE / DROP-IN: nama class lama dipertahankan semua (auth-modal-overlay,
   auth-modal-card, auth-tab-btn, auth-field, dst) supaya auth-modal.js LAMA
   tetap jalan tanpa diubah -- Zero-Break Policy. Class baru ditambahkan di
   sisi, tidak ada yang dihapus.
   ======================================================================== */

:root {
    --auth-bg-0: #050505;
    --auth-bg-1: #0d0d10;
    --auth-glass: rgba(14, 14, 17, 0.72);
    --auth-border: rgba(255, 255, 255, 0.09);
    --auth-border-hover: rgba(255, 255, 255, 0.22);
    --auth-text: #ffffff;
    --auth-text-dim: rgba(255, 255, 255, 0.55);
    --auth-text-faint: rgba(255, 255, 255, 0.32);
    --auth-success: #22c55e;   /* Emerald */
    --auth-error: #ef4444;     /* Crimson */
    --auth-warning: #f59e0b;   /* Amber */
    --auth-google: #4285F4;
    --auth-github: #ffffff;
}

/* -------------------- Overlay: fade + backdrop-blur hidup -------------------- */
.auth-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.06), rgba(0,0,0,0.72) 60%);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .38s cubic-bezier(.22,1,.36,1), backdrop-filter .5s ease, visibility 0s linear .38s;
}
.auth-modal-overlay.open {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity .38s cubic-bezier(.22,1,.36,1), backdrop-filter .5s ease, visibility 0s;
}
body.auth-modal-locked { overflow: hidden; }

/* -------------------- Card: scale-up + glow border mewah -------------------- */
.auth-modal-card {
    width: 100%;
    max-width: 428px;
    max-height: min(92vh, 860px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 40%),
        var(--auth-glass);
    border: 1px solid var(--auth-border);
    border-radius: 24px;
    padding: 30px 24px 24px;
    position: relative;
    isolation: isolate;
    box-shadow:
        0 30px 80px rgba(0,0,0,0.6),
        0 2px 0 rgba(255,255,255,0.05) inset,
        0 0 0 1px rgba(0,0,0,0.4);
    transform: scale(.88) translateY(28px);
    opacity: 0;
    transition: transform .5s cubic-bezier(.22,1.4,.36,1), opacity .35s ease;
}
.auth-modal-overlay.open .auth-modal-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.auth-modal-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: 25px;
    padding: 1px;
    background: conic-gradient(from 180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.18));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .8;
}
.auth-modal-card::-webkit-scrollbar { width: 5px; }
.auth-modal-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

/* -------------------- Close button -------------------- */
.auth-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: 1px solid var(--auth-border);
    background: rgba(255,255,255,0.06);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .2s ease, border-color .2s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
}
.auth-modal-close:hover { background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.4); transform: rotate(90deg); }
.auth-modal-close:active { transform: rotate(90deg) scale(.9); }
.auth-modal-close:focus { outline: none; }
.auth-modal-close:focus-visible { outline: none; }

/* -------------------- Header -------------------- */
.auth-modal-header {
    text-align: center;
    margin-bottom: 20px;
    animation: authFadeUp .5s cubic-bezier(.22,1,.36,1) both;
    animation-delay: .06s;
}
.auth-modal-logo {
    width: 48px; height: 48px; object-fit: contain; margin-bottom: 10px; border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.auth-modal-header h2 {
    color: #fff; font-size: 19px; font-weight: 800; margin: 0 0 5px;
    letter-spacing: .2px;
    background: linear-gradient(180deg, #fff, rgba(255,255,255,0.72));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-modal-header p { color: var(--auth-text-dim); font-size: 12.5px; margin: 0; }

/* -------------------- Social login grid (Google / GitHub OAuth 2.0 ONLY) -------------------- */
.auth-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 4px;
    animation: authFadeUp .5s cubic-bezier(.22,1,.36,1) both;
    animation-delay: .12s;
}
@media (max-width: 480px) {
    .auth-social-grid { grid-template-columns: 1fr; }
}
.auth-social-btn .auth-social-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-social-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    border-radius: 999px;
    padding: 12.5px 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, filter .2s ease;
}
.auth-social-btn img, .auth-social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-social-btn:hover { transform: translateY(-2px); }
.auth-social-btn:active { transform: translateY(0) scale(.98); }
.auth-social-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.auth-modal-google-btn, .auth-social-btn.google {
    background: #fff; color: #1F1F24;
}
.auth-modal-google-btn:hover, .auth-social-btn.google:hover { box-shadow: 0 10px 26px rgba(66,133,244,0.32); }

.auth-social-btn.github {
    background: #0d0d10; color: #fff; border: 1px solid rgba(255,255,255,0.16);
}
.auth-social-btn.github:hover { box-shadow: 0 10px 26px rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); }

.auth-social-btn.coming-soon { opacity: .5; cursor: default; }
.auth-social-btn.coming-soon::after {
    content: 'Segera'; margin-left: 6px; font-size: 10px; font-weight: 700;
    background: rgba(245,158,11,0.18); color: var(--auth-warning);
    padding: 2px 7px; border-radius: 999px; letter-spacing: .3px;
}

.auth-social-btn .auth-ripple, .auth-modal-submit-btn .auth-ripple {
    position: absolute; border-radius: 50%; transform: scale(0);
    background: rgba(0,0,0,0.12); pointer-events: none;
    animation: authRipple .55s ease-out forwards;
}

/* -------------------- Divider -------------------- */
.auth-modal-divider {
    display: flex; align-items: center; gap: 10px; margin: 18px 0 14px;
    animation: authFadeUp .5s cubic-bezier(.22,1,.36,1) both; animation-delay: .16s;
}
.auth-modal-divider::before, .auth-modal-divider::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
}
.auth-modal-divider span { color: var(--auth-text-faint); font-size: 10.8px; white-space: nowrap; text-transform: uppercase; letter-spacing: .4px; }

/* -------------------- Tabs with sliding active-indicator -------------------- */
.auth-modal-tabs {
    position: relative;
    display: flex;
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--auth-border);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 18px;
    animation: authFadeUp .5s cubic-bezier(.22,1,.36,1) both; animation-delay: .2s;
}
.auth-tab-indicator {
    position: absolute;
    top: 4px; bottom: 4px; left: 4px;
    width: calc((100% - 8px) / 2);
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    transition: transform .38s cubic-bezier(.34,1.56,.64,1);
    z-index: 0;
}
.auth-tab-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    font-weight: 600;
    padding: 9px 6px;
    border-radius: 999px;
    cursor: pointer;
    transition: color .3s ease;
    white-space: nowrap;
}
.auth-tab-btn.active { color: #0A0A0C; }

/* -------------------- Email OTP switch link + panel (Tahap 4) -------------------- */
.auth-otp-switch-link {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--auth-text-dim);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 4px 6px 14px;
    cursor: pointer;
    transition: color .2s ease;
}
.auth-otp-switch-link i { margin-right: 5px; color: var(--auth-success); }
.auth-otp-switch-link:hover { color: #fff; }

.auth-otp-form { display: flex; flex-direction: column; gap: 13px; }
.auth-otp-code-block { display: flex; flex-direction: column; gap: 12px; animation: authFadeUp .4s cubic-bezier(.22,1,.36,1) both; }
.auth-otp-code-input {
    font-size: 26px !important;
    letter-spacing: 10px;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-weight: 700;
}
.auth-otp-timer { margin: 0; font-size: 11.5px; color: var(--auth-text-faint); text-align: center; }
.auth-otp-resend-btn {
    background: transparent; border: none; color: var(--auth-success);
    font-size: 12.5px; font-weight: 700; text-align: center; cursor: pointer;
    padding: 4px; transition: opacity .2s ease;
}
.auth-otp-resend-btn:disabled { opacity: .4; cursor: not-allowed; }
.auth-otp-resend-btn:not(:disabled):hover { text-decoration: underline; }

/* -------------------- Form + fields -------------------- */
.auth-modal-form { display: flex; flex-direction: column; gap: 13px; }
.auth-field {
    display: flex; flex-direction: column; gap: 6px;
    animation: authFadeUp .45s cubic-bezier(.22,1,.36,1) both; animation-delay: .24s;
}
.auth-field span { color: var(--auth-text-dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.auth-field input {
    width: 100%;
    max-width: 100%;
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--auth-border);
    color: #fff;
    font-size: 15px;
    padding: 13px 14px;
    border-radius: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.auth-field input:focus {
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.05);
}
.auth-field input.invalid { border-color: var(--auth-error); box-shadow: 0 0 0 4px rgba(239,68,68,0.12); }
.auth-field input.valid { border-color: var(--auth-success); }

.auth-password-wrap { position: relative; display: flex; }
.auth-password-wrap input { padding-right: 44px; }
.auth-eye-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: var(--auth-text-dim);
    width: 34px; height: 34px; cursor: pointer; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    transition: color .2s ease, background .2s ease;
}
.auth-eye-toggle:hover { color: #fff; background: rgba(255,255,255,0.08); }

.auth-password-meter { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.auth-password-meter span {
    display: block; height: 100%; width: 0; border-radius: 4px;
    transition: width .3s cubic-bezier(.22,1,.36,1), background .3s ease;
    background: var(--auth-error);
}
.auth-password-meter span.weak { background: var(--auth-error); }
.auth-password-meter span.medium { background: var(--auth-warning); }
.auth-password-meter span.strong { background: var(--auth-success); }

/* -------------------- Inline message -------------------- */
.auth-inline-msg {
    min-height: 0; font-size: 12.5px; margin: 0; color: var(--auth-error);
    display: none; line-height: 1.5; padding: 10px 12px; border-radius: 10px;
    background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.22);
}
.auth-inline-msg.show { display: flex; align-items: center; gap: 7px; animation: authShake .42s ease; }
.auth-inline-msg.success {
    color: var(--auth-success);
    background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.25);
    animation: authFadeUp .4s ease;
}

/* -------------------- Submit button -------------------- */
.auth-modal-submit-btn {
    width: 100%;
    background: #fff;
    color: #0A0A0C;
    font-weight: 700;
    font-size: 14.5px;
    border: none;
    border-radius: 999px;
    padding: 14px 16px;
    cursor: pointer;
    margin-top: 4px;
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, opacity .2s ease;
    animation: authFadeUp .45s cubic-bezier(.22,1,.36,1) both; animation-delay: .3s;
}
.auth-modal-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,255,255,0.16); }
.auth-modal-submit-btn:active { transform: translateY(0) scale(.98); }
.auth-modal-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; box-shadow: none; }

/* -------------------- Footer -------------------- */
.auth-modal-footer {
    text-align: center; margin-top: 20px;
    animation: authFadeUp .45s cubic-bezier(.22,1,.36,1) both; animation-delay: .34s;
}
.auth-modal-footer a { color: var(--auth-text-dim); font-size: 12px; text-decoration: none; transition: color .2s ease; }
.auth-modal-footer a:hover { color: #fff; text-decoration: underline; }
.auth-modal-footer p {
    color: var(--auth-text-faint); font-size: 10.5px; margin: 12px 0 0;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.auth-modal-footer p i { color: var(--auth-success); }

/* -------------------- Keyframes -------------------- */
@keyframes authFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes authShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
@keyframes authRipple {
    to { transform: scale(2.6); opacity: 0; }
}
@keyframes authSpin {
    to { transform: rotate(360deg); }
}
.auth-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.25); border-top-color: rgba(0,0,0,0.75);
    animation: authSpin .6s linear infinite; display: inline-block;
}
.auth-social-btn.github .auth-spinner, .auth-social-btn.apple .auth-spinner {
    border: 2px solid rgba(255,255,255,0.25); border-top-color: #fff;
}

/* -------------------- Reduced motion -------------------- */
@media (prefers-reduced-motion: reduce) {
    .auth-modal-overlay, .auth-modal-card, .auth-modal-header, .auth-social-grid,
    .auth-modal-divider, .auth-modal-tabs, .auth-field, .auth-modal-submit-btn, .auth-modal-footer {
        animation: none !important; transition-duration: .01ms !important;
    }
}

/* -------------------- Mobile fit-to-screen (HP-first, zero horizontal overflow) -------------------- */
@media (max-width: 480px) {
    .auth-modal-overlay { padding: 10px; align-items: flex-end; }
    .auth-modal-card {
        max-width: 100%;
        width: 100%;
        max-height: 90vh;
        padding: 24px 18px 20px;
        border-radius: 22px 22px 0 0;
        transform: translateY(40px);
    }
    .auth-modal-card::before { border-radius: 23px 23px 0 0; }
    .auth-modal-overlay.open .auth-modal-card { transform: translateY(0); }
    .auth-modal-header h2 { font-size: 17px; }
    .auth-tab-btn { font-size: 10.6px; padding: 9px 4px; }
    .auth-modal-close { top: 12px; right: 12px; width: 40px; height: 40px; }
    .auth-social-btn { padding: 13px 14px; font-size: 13.5px; }
}
@media (max-width: 480px) {
    .auth-modal-card { padding: 20px 14px 16px; }
    .auth-field input { font-size: 14px; padding: 12px; }
}

/* ========================================================================
   MODUL BARU: HIGH-SECURITY HARDENING UI
   Turnstile/reCAPTCHA container, security badge strip, TOTP 2FA step,
   Passkey/WebAuthn button, rate-limit banner. STRICT MONOCHROME
   (hitam/putih/grayscale saja) — TIDAK ada warna baru selain accent
   sukses/error/warning yang sudah ada di :root sebelumnya.
   ======================================================================== */

.auth-security-strip {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 2px 0 14px; font-size: 10.5px; color: var(--auth-text-faint);
    letter-spacing: .3px; text-transform: uppercase;
}
.auth-security-strip i { color: var(--auth-text-dim); }
.auth-security-strip .auth-security-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--auth-success); box-shadow: 0 0 6px var(--auth-success);
    display: inline-block; margin: 0 2px;
}

.auth-turnstile-wrap {
    display: flex; justify-content: center; margin: 4px 0 14px;
    min-height: 0; transition: min-height .25s ease;
}
.auth-turnstile-wrap.pending { min-height: 66px; }

.auth-inline-hint {
    font-size: 11px; color: var(--auth-text-faint); text-align: center;
    margin: -8px 0 12px; line-height: 1.5;
}
.auth-inline-hint strong { color: var(--auth-text-dim); }

/* -------------------- Rate-limit / lockout banner -------------------- */
.auth-ratelimit-banner {
    display: none; align-items: flex-start; gap: 9px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 14px;
    font-size: 12px; color: var(--auth-text-dim); line-height: 1.55;
}
.auth-ratelimit-banner.show { display: flex; }
.auth-ratelimit-banner i { color: var(--auth-warning); margin-top: 2px; }

/* -------------------- 2FA TOTP verification step -------------------- */
.auth-2fa-panel {
    display: none; flex-direction: column; gap: 14px;
    animation: authFadeUp .4s cubic-bezier(.22,1,.36,1) both;
}
.auth-2fa-panel.show { display: flex; }
.auth-2fa-icon {
    width: 56px; height: 56px; margin: 4px auto 0; border-radius: 18px;
    background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
    border: 1px solid var(--auth-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff;
}
.auth-2fa-title { text-align: center; font-size: 15px; font-weight: 700; color: #fff; margin: 0; }
.auth-2fa-desc { text-align: center; font-size: 12px; color: var(--auth-text-dim); margin: -6px 0 0; line-height: 1.5; }

/* -------------------- Passkey / WebAuthn button -------------------- */
.auth-passkey-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
    background: transparent; border: 1px dashed rgba(255,255,255,0.28);
    color: var(--auth-text-dim); font-weight: 600; font-size: 12.5px;
    border-radius: 999px; padding: 11px 16px; cursor: pointer; margin-top: 4px;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.auth-passkey-btn:hover { border-color: rgba(255,255,255,0.55); color: #fff; background: rgba(255,255,255,0.04); }
.auth-passkey-btn:disabled { opacity: .5; cursor: not-allowed; }
.auth-passkey-btn i { color: #fff; }

/* -------------------- Security Center (2FA/Passkey enrollment) mini-modal -------------------- */
.sec-center-overlay {
    position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center;
    justify-content: center; padding: 16px;
    background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.06), rgba(0,0,0,0.78) 60%);
    backdrop-filter: blur(0px); opacity: 0; visibility: hidden;
    transition: opacity .35s ease, backdrop-filter .5s ease, visibility 0s linear .35s;
}
.sec-center-overlay.open {
    opacity: 1; visibility: visible; backdrop-filter: blur(10px);
    transition: opacity .35s ease, backdrop-filter .5s ease, visibility 0s;
}
.sec-center-card {
    width: 100%; max-width: 420px; max-height: min(90vh, 720px); overflow-y: auto;
    background: var(--auth-glass); border: 1px solid var(--auth-border); border-radius: 22px;
    padding: 24px; color: #fff; position: relative;
}
.sec-center-close {
    position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--auth-border); background: rgba(255,255,255,0.06); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sec-center-section { border-top: 1px solid var(--auth-border); padding-top: 16px; margin-top: 16px; }
.sec-center-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.sec-center-section h3 { font-size: 14px; margin: 0 0 6px; }
.sec-center-section p { font-size: 12px; color: var(--auth-text-dim); margin: 0 0 12px; line-height: 1.55; }
.sec-center-qr { display: block; margin: 0 auto 12px; border-radius: 12px; border: 1px solid var(--auth-border); background: #fff; padding: 8px; }
.sec-center-secret {
    font-family: monospace; font-size: 13px; letter-spacing: 1px; text-align: center;
    background: rgba(255,255,255,0.05); border: 1px solid var(--auth-border); border-radius: 10px;
    padding: 8px; margin-bottom: 12px; word-break: break-all;
}
.sec-center-btn {
    width: 100%; background: #fff; color: #0A0A0C; font-weight: 700; font-size: 13px;
    border: none; border-radius: 999px; padding: 11px; cursor: pointer; margin-top: 6px;
}
.sec-center-btn.ghost { background: transparent; color: #fff; border: 1px solid var(--auth-border); }
.sec-center-btn:disabled { opacity: .6; cursor: not-allowed; }
.sec-center-status { font-size: 11.5px; margin-top: 8px; text-align: center; color: var(--auth-text-dim); }
.sec-center-status.error { color: var(--auth-error); }
.sec-center-status.success { color: var(--auth-success); }