/* ================================================================
   Indosat Platinum — Auth (login / forgot / reset)
   Minimal · elegant · single centered card on dark metallic field
   ================================================================ */

:root {
    --pt-obsidian: #050505;
    --pt-black:    #0A0A0A;
    --pt-charcoal: #1A1A1B;
    --pt-graphite: #2A2A2C;
    --pt-iron:     #3D3D3F;
    --pt-steel:    #4D4D4F;
    --pt-pewter:   #7A7A7C;
    --pt-silver:   #A8A9AD;
    --pt-shine:    #C0C0C0;
    --pt-platinum: #E5E4E2;
    --pt-pearl:    #F2F2F4;
    --pt-mist:     #F7F7F8;
    --pt-white:    #FFFFFF;
    --pt-gold:        #C9A047;
    --pt-gold-bright: #E8B83A;
    --pt-gold-deep:   #8C6E2F;
    --pt-gold-soft:   #F5E6B8;
    --pt-red:         #ED1C24;
    --pt-red-dk:      #c41017;
    --pt-success:     #2D8F7F;
    --pt-rule:        #E8E8EA;
}

* { box-sizing: border-box; }

body {
    font-family: 'Prompt', 'Inter', system-ui, -apple-system, sans-serif;
    margin: 0; padding: 0;
    min-height: 100vh;
    color: var(--pt-black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Preloader ───────────────────────────────────────────────── */
.auth-preloader {
    position: fixed; inset: 0;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.auth-preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.auth-preloader-spinner {
    width: 44px; height: 44px;
    border: 3px solid rgba(201, 160, 71, 0.20);
    border-top-color: var(--pt-gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Page / background ───────────────────────────────────────── */
.auth-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
}
.auth-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(201,160,71,0.10), transparent 60%),
        linear-gradient(160deg, #0c0c0d 0%, #121214 55%, #0a0a0b 100%);
}
.auth-bg::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -40%;
    width: 120vw; height: 80vh;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(201,160,71,0.06), transparent);
    pointer-events: none;
}

/* ─── Card ────────────────────────────────────────────────────── */
.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 410px;
    background: var(--pt-white);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 40px 36px 28px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 2px 0 rgba(255,255,255,0.04) inset;
}

/* thin gold top accent */
.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 28px; right: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, transparent, var(--pt-gold), var(--pt-gold-bright), var(--pt-gold), transparent);
}

/* ─── Brand ───────────────────────────────────────────────────── */
.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}
.auth-brand__mark {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #121214, #2a2a2c);
    border: 1px solid var(--pt-gold-deep);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.auth-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.auth-brand__name {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: var(--pt-black);
    letter-spacing: -0.01em;
}
.auth-brand__sub {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pt-pewter);
}

/* ─── Heading ─────────────────────────────────────────────────── */
.auth-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--pt-black);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.auth-tagline {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pt-gold-deep);
    letter-spacing: 0.02em;
    margin: 0 0 24px;
}

/* ─── Alert ───────────────────────────────────────────────────── */
.auth-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    margin-bottom: 18px;
    cursor: pointer;
}
.auth-alert i { font-size: 18px; flex-shrink: 0; }
.auth-alert.error   { background: #fdecec; color: var(--pt-red-dk); border: 1px solid #f6cccd; }
.auth-alert.success { background: #e7f4f1; color: var(--pt-success); border: 1px solid #c2e3dc; }

/* ─── Form ────────────────────────────────────────────────────── */
.auth-field { margin-bottom: 16px; }
.auth-field > label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pt-pewter);
    margin-bottom: 6px;
}
.auth-field input[type="text"],
.auth-field input[type="password"] {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--pt-rule);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--pt-black);
    background: var(--pt-mist);
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.auth-field input::placeholder { color: var(--pt-silver); }
.auth-field input:focus {
    outline: none;
    background: var(--pt-white);
    border-color: var(--pt-gold);
    box-shadow: 0 0 0 3px rgba(201,160,71,0.18);
}

.auth-input-wrap { position: relative; }
.auth-input-wrap input { padding-right: 44px; }
#pwToggle {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 0; background: none;
    color: var(--pt-pewter);
    cursor: pointer;
    border-radius: 8px;
    transition: color .15s, background .15s;
}
#pwToggle:hover { color: var(--pt-gold-deep); background: var(--pt-mist); }
#pwToggle i { font-size: 19px; }

/* ─── Row: remember + forgot ──────────────────────────────────── */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 22px;
}
.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--pt-steel);
    cursor: pointer;
    user-select: none;
}
.auth-check input {
    width: 16px; height: 16px;
    accent-color: var(--pt-gold-deep);
    cursor: pointer;
}
.auth-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-gold-deep);
    text-decoration: none;
    transition: color .15s;
}
.auth-link:hover { color: var(--pt-red); text-decoration: underline; }

/* ─── Button ──────────────────────────────────────────────────── */
.auth-btn {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--pt-white);
    background: linear-gradient(135deg, #161617, #2a2a2c);
    cursor: pointer;
    transition: transform .12s, box-shadow .2s, filter .2s;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.auth-btn:hover { filter: brightness(1.08); box-shadow: 0 8px 22px rgba(0,0,0,0.24); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:disabled { opacity: 0.7; cursor: default; }

/* ─── Footer ──────────────────────────────────────────────────── */
.auth-foot {
    margin-top: 22px;
    text-align: center;
    font-size: 12px;
    color: var(--pt-pewter);
}

/* ─── Shake on error ──────────────────────────────────────────── */
.auth-card.shake { animation: shake 0.45s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    .auth-page { padding: 16px; }
    .auth-card { padding: 32px 22px 24px; border-radius: 16px; }
    .auth-title { font-size: 22px; }
}