/* ============================================================
   AUTH PAGES — Compact, modern, fully responsive
   Dipakai oleh: login, register, otp-verify, forgot-password, reset-password
   Brand: Orange #F7941D · Purple #7B2ABD
   ============================================================ */

/* ─── BACKGROUND ───────────────────────────────────────────────── */
.auth-bg {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(ellipse at top left, rgba(247, 148, 29, .12) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(123, 42, 189, .22) 0%, transparent 55%),
        linear-gradient(135deg, #1a0533 0%, #2d0a5e 50%, #4a1383 100%);
    padding: clamp(.75rem, .4rem + 1.5vw, 1.5rem) clamp(.75rem, .5rem + .8vw, 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.auth-bg::before {
    content: '';
    position: absolute;
    inset: -50%;
    background:
        radial-gradient(circle at 20% 30%, rgba(247, 148, 29, .07) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(123, 42, 189, .12) 0%, transparent 30%);
    animation: authFloatBg 22s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes authFloatBg {
    0%   { transform: translate(0, 0) rotate(0); }
    100% { transform: translate(2%, 3%) rotate(8deg); }
}

/* ─── LAYOUT SHELL — desktop max-width dikecilkan ──────────────── */
.auth-shell {
    width: 100%;
    /* desktop dulu 400px, sekarang 340px — jauh lebih ramping */
    max-width: min(340px, 100%);
    position: relative;
    z-index: 1;
}
.auth-shell--wide {
    /* register pakai 2-kolom di desktop → butuh lebih lebar; di mobile tetap 100% */
    max-width: min(520px, 100%);
}

/* ─── 2-COLUMN ROW — dipakai register untuk pasangan field ─────── */
.auth-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(.55rem, .45rem + .3vw, .75rem);
    align-items: start;
}
.auth-row-2 > .auth-field { min-width: 0; }
/* Di layar sempit (mobile/tablet sempit), collapse ke 1 kolom */
@media (max-width: 480px) {
    .auth-row-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ─── LOGO HEADER ──────────────────────────────────────────────── */
.auth-logo-wrap {
    text-align: center;
    /* dulu max 1.25rem, sekarang max 1rem */
    margin-bottom: clamp(.75rem, .55rem + .5vw, 1rem);
}
.auth-logo-wrap a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}
.auth-logo-wrap img {
    /* dulu max 42px, sekarang max 34px */
    width: clamp(32px, 28px + .4vw, 34px);
    height: clamp(32px, 28px + .4vw, 34px);
    object-fit: contain;
}
.auth-logo-text {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    /* dulu max 1.4rem, sekarang max 1.15rem */
    font-size: clamp(1.05rem, .95rem + .35vw, 1.15rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
}
.auth-logo-text .accent { color: #F7941D; }
.auth-tagline {
    color: rgba(255, 255, 255, .6);
    /* dulu max .825rem, sekarang max .76rem */
    font-size: clamp(.75rem, .73rem + .08vw, .76rem);
    margin-top: .15rem;
    margin-bottom: 0;
}

/* ─── CARD — padding desktop dikecilkan agar tidak "gendut" ────── */
.auth-card-modern {
    background: #fff;
    /* dulu max 1.25rem, sekarang max 1rem */
    border-radius: clamp(.875rem, .75rem + .4vw, 1rem);
    /* dulu max 1.85rem (~30px), sekarang max 1.35rem (~22px) */
    padding: clamp(1.25rem, .95rem + 1vw, 1.35rem);
    box-shadow:
        0 14px 36px -10px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .05);
}

/* ─── HEADINGS — font desktop diturunkan ───────────────────────── */
.auth-h1 {
    /* dulu max 1.45rem, sekarang max 1.2rem */
    font-size: clamp(1.15rem, 1.05rem + .35vw, 1.2rem);
    font-weight: 800;
    color: #1a0533;
    margin: 0 0 .15rem 0;
    text-align: center;
    letter-spacing: -.02em;
    line-height: 1.25;
}
.auth-h1 .auth-emoji {
    display: inline-block;
    margin-left: .15em;
    font-size: .8em;
    vertical-align: -.05em;
}
.auth-sub {
    color: #6b7280;
    /* dulu max .875rem, sekarang max .8rem */
    font-size: clamp(.78rem, .76rem + .08vw, .8rem);
    text-align: center;
    /* dulu max 1.35rem, sekarang max 1.05rem */
    margin: 0 0 clamp(.95rem, .8rem + .5vw, 1.05rem) 0;
    line-height: 1.45;
}

/* ─── ALERTS ───────────────────────────────────────────────────── */
.auth-alert {
    padding: .5rem .7rem;
    border-radius: .5rem;
    /* dulu max .82rem, sekarang max .76rem */
    font-size: clamp(.72rem, .7rem + .12vw, .76rem);
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-bottom: .7rem;
    line-height: 1.4;
}
.auth-alert--error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.auth-alert--success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.auth-alert--info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.auth-alert .bi { font-size: 1em; flex-shrink: 0; margin-top: .1em; }

/* ─── GOOGLE BUTTON — desktop lebih kecil ──────────────────────── */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    /* dulu max .7rem, sekarang max .55rem */
    padding: clamp(.5rem, .43rem + .2vw, .55rem);
    background: #fff;
    border: 1.5px solid #e5e7eb;
    color: #1f2937 !important;
    border-radius: .55rem;
    font-weight: 600;
    /* dulu max .875rem, sekarang max .8rem */
    font-size: clamp(.78rem, .76rem + .1vw, .8rem);
    text-decoration: none !important;
    transition: all .18s ease;
    cursor: pointer;
    margin-bottom: .7rem;
    line-height: 1.2;
}
.btn-google:hover {
    background: #fafbfc;
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05), 0 0 0 3px rgba(123, 42, 189, .06);
    color: #1f2937 !important;
}
.btn-google svg { flex-shrink: 0; }

/* ─── DIVIDER ──────────────────────────────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #9ca3af;
    /* dulu max .72rem, sekarang max .66rem */
    font-size: clamp(.62rem, .6rem + .1vw, .66rem);
    margin: .65rem 0;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5e7eb 50%, transparent);
}

/* ─── FORM FIELDS — input desktop dikecilkan ───────────────────── */
.auth-field {
    /* dulu max .95rem, sekarang max .72rem */
    margin-bottom: clamp(.65rem, .55rem + .35vw, .72rem);
}
.auth-field-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* dulu max .78rem, sekarang max .72rem */
    font-size: clamp(.68rem, .66rem + .1vw, .72rem);
    font-weight: 600;
    color: #374151;
    margin-bottom: .3rem;
    letter-spacing: .01em;
}
.auth-input-wrap { position: relative; }
.auth-input-wrap .bi-prefix {
    position: absolute;
    left: clamp(.6rem, .5rem + .2vw, .75rem);
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: .9rem;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
}
.auth-input-wrap .text-prefix {
    position: absolute;
    left: clamp(.6rem, .5rem + .2vw, .75rem);
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: clamp(.78rem, .76rem + .1vw, .82rem);
    font-weight: 600;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
}
.auth-input {
    width: 100%;
    /* dulu max .72rem padding-y, sekarang max .55rem */
    padding: clamp(.5rem, .43rem + .2vw, .55rem) clamp(.7rem, .6rem + .2vw, .85rem);
    padding-left: clamp(1.85rem, 1.65rem + .65vw, 2.15rem);
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: .55rem;
    /* dulu max .9rem, sekarang max .82rem */
    font-size: clamp(.8rem, .77rem + .12vw, .82rem);
    color: #111827;
    transition: all .15s ease;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.35;
}
.auth-input.with-text-prefix { padding-left: clamp(2.35rem, 2.15rem + .65vw, 2.65rem); }
.auth-input::placeholder { color: #9ca3af; }
.auth-input:hover { border-color: #d1d5db; background: #fff; }
.auth-input:focus {
    outline: none;
    background: #fff;
    border-color: #7B2ABD;
    box-shadow: 0 0 0 3px rgba(123, 42, 189, .12);
}
.auth-input.has-toggle { padding-right: 2.25rem; }
.auth-input.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}
.auth-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

.auth-toggle-btn {
    position: absolute;
    right: .3rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #9ca3af;
    padding: .3rem .4rem;
    cursor: pointer;
    transition: color .15s;
    z-index: 2;
    line-height: 1;
}
.auth-toggle-btn:hover { color: #7B2ABD; }
.auth-toggle-btn .bi { font-size: .95rem; }

.auth-field-error {
    color: #ef4444;
    /* dulu max .76rem, sekarang max .7rem */
    font-size: clamp(.66rem, .64rem + .08vw, .7rem);
    margin-top: .25rem;
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* ─── LINKS ────────────────────────────────────────────────────── */
.auth-link {
    color: #7B2ABD;
    font-weight: 600;
    text-decoration: none;
    font-size: inherit;
}
.auth-link:hover { color: #5b1a8c; text-decoration: underline; }

/* ─── CHECKBOX ─────────────────────────────────────────────────── */
.auth-check {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    /* dulu max .85rem, sekarang max .78rem */
    font-size: clamp(.74rem, .72rem + .1vw, .78rem);
    color: #4b5563;
    user-select: none;
    cursor: pointer;
    line-height: 1.4;
    margin-bottom: .7rem;
}
.auth-check input[type="checkbox"] {
    width: .95rem;
    height: .95rem;
    accent-color: #7B2ABD;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: .15rem;
}

/* ─── PRIMARY BUTTON — desktop lebih pendek ────────────────────── */
.btn-auth-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    /* dulu max .75rem, sekarang max .6rem */
    padding: clamp(.55rem, .48rem + .25vw, .6rem);
    background: linear-gradient(135deg, #F7941D 0%, #ee7e0a 100%);
    color: #fff !important;
    border: 0;
    border-radius: .55rem;
    font-weight: 700;
    /* dulu max .95rem, sekarang max .85rem */
    font-size: clamp(.82rem, .78rem + .15vw, .85rem);
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 4px 12px rgba(247, 148, 29, .28);
    text-decoration: none;
    margin-top: .25rem;
    font-family: inherit;
    line-height: 1.2;
}
.btn-auth-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #ee7e0a 0%, #d97306 100%);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(247, 148, 29, .38);
    transform: translateY(-1px);
}
.btn-auth-primary:active { transform: translateY(0); }
.btn-auth-primary:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

/* ─── FOOTER ROW (di dalam card) ───────────────────────────────── */
.auth-footer-row {
    text-align: center;
    /* dulu max 1.15rem, sekarang max .85rem */
    margin-top: clamp(.85rem, .7rem + .5vw, .85rem);
    padding-top: clamp(.7rem, .55rem + .5vw, .85rem);
    border-top: 1px solid #f3f4f6;
    color: #6b7280;
    /* dulu max .85rem, sekarang max .78rem */
    font-size: clamp(.74rem, .72rem + .1vw, .78rem);
}

/* ─── BACK HOME LINK (di luar card) ────────────────────────────── */
.auth-back-home {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: rgba(255, 255, 255, .6);
    /* dulu max .82rem, sekarang max .76rem */
    font-size: clamp(.72rem, .7rem + .1vw, .76rem);
    text-decoration: none;
    margin-top: clamp(.6rem, .5rem + .4vw, .85rem);
    width: 100%;
    justify-content: center;
    transition: color .15s;
}
.auth-back-home:hover { color: #fff; }

/* ─── PASSWORD STRENGTH METER ──────────────────────────────────── */
.pw-strength {
    margin-top: .3rem;
    height: 3px;
    border-radius: 3px;
    background: #e5e7eb;
    overflow: hidden;
}
.pw-strength-bar {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: width .3s, background .3s;
}
.pw-strength-text {
    /* dulu max .75rem, sekarang max .7rem */
    font-size: clamp(.66rem, .64rem + .08vw, .7rem);
    color: #6b7280;
    margin-top: .2rem;
    display: block;
}

/* ─── OTP — big icon + 6 boxes (desktop dikecilkan) ────────────── */
.auth-icon-big {
    /* dulu max 2.75rem, sekarang max 2.2rem */
    font-size: clamp(2rem, 1.7rem + 1.2vw, 2.2rem);
    line-height: 1;
    text-align: center;
    margin-bottom: .55rem;
}

.otp-inputs {
    display: flex;
    justify-content: center;
    gap: clamp(.3rem, .25rem + .2vw, .4rem);
    margin: clamp(.85rem, .7rem + .5vw, 1rem) 0 .7rem;
}
.otp-input {
    /* dulu max 48x56, sekarang max 40x48 */
    width: clamp(36px, 32px + 1vw, 40px);
    height: clamp(44px, 40px + 1vw, 48px);
    text-align: center;
    /* dulu max 1.4rem, sekarang max 1.2rem */
    font-size: clamp(1.1rem, 1rem + .4vw, 1.2rem);
    font-weight: 800;
    color: #111827;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: .55rem;
    transition: all .15s ease;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
}
.otp-input:hover  { border-color: #d1d5db; background: #fff; }
.otp-input:focus  {
    outline: none;
    background: #fff;
    border-color: #7B2ABD;
    box-shadow: 0 0 0 3px rgba(123, 42, 189, .12);
}
.otp-input.filled {
    border-color: #F7941D;
    background: #fff7ed;
}

.otp-countdown {
    text-align: center;
    /* dulu max .78rem, sekarang max .72rem */
    font-size: clamp(.7rem, .68rem + .1vw, .72rem);
    color: #6b7280;
    margin-bottom: .7rem;
}
.otp-countdown .timer {
    font-weight: 700;
    color: #ef4444;
    font-variant-numeric: tabular-nums;
}

.auth-resend-row {
    text-align: center;
    margin-top: .7rem;
    /* dulu max .82rem, sekarang max .76rem */
    font-size: clamp(.72rem, .7rem + .1vw, .76rem);
    color: #6b7280;
}
.auth-resend-row .btn-link {
    background: transparent;
    border: 0;
    color: #7B2ABD;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    text-decoration: none;
}
.auth-resend-row .btn-link:hover { text-decoration: underline; color: #5b1a8c; }
.auth-resend-row .btn-link:disabled {
    color: #9ca3af;
    cursor: not-allowed;
    text-decoration: none;
}

/* ─── SMALL-SCREEN TIGHTENING ──────────────────────────────────── */
@media (max-width: 380px) {
    .auth-shell, .auth-shell--wide { max-width: 100%; }
    .auth-card-modern { padding: 1.1rem; }
    .otp-input { width: 38px; height: 44px; }
}