/* ==========================================================================
   MEMBER-AUTH-THEME.CSS — Tema halaman auth (login) Fulfillin Member
   ==========================================================================

   File ini adalah TEMPLATE tema: semua warna, jarak, dan tipografi halaman
   auth bersumber dari design token di bawah — jangan hardcode warna di luar
   blok token.

   BASE COLOR  : ubah SATU variabel (--auth-brand) di bawah untuk re-theme
                 seluruh halaman auth (login, nanti forgot/reset).
                 #ff3e1d  = merah brand (sampel yang disetujui)
                 #c8102e  = merah yang dipakai UI member saat ini
   THEME       : light (default) + dark via atribut [data-theme="dark"]
                 pada <html> (di-set oleh JS kecil di head blade login).
   SCOPING     : semua selector dibungkus .member-auth sehingga tidak
                 bentrok dengan CSS Sneat / fulfillin-theme.css.

   Cara pakai di blade:
     <link rel="stylesheet" href="{{ asset('css/member-auth-theme.css') }}?v={{ filemtime(public_path('css/member-auth-theme.css')) }}">
   ========================================================================== */

/* ══════════════════════ DESIGN TOKENS ══════════════════════ */
:root {
    color-scheme: light;

    /* ── BASE COLOR — satu sumber warna brand ── */
    --auth-brand:          #ff3e1d;   /* ← ubah di sini untuk re-theme */
    --auth-brand-deep:     #C91F19;   /* versi lebih gelap (logo) */
    --auth-brand-press:    #E23513;   /* hover tombol */
    --auth-brand-tint:     rgba(255, 62, 29, .10);
    --auth-brand-tint-soft:rgba(255, 62, 29, .06);

    /* ── Surface & ink (mode terang) ── */
    --auth-bg:            #F5F6F8;
    --auth-surface:       #FFFFFF;
    --auth-surface-raise: #FBFCFD;
    --auth-ink:           #16181D;
    --auth-ink-soft:      #4A5260;
    --auth-muted:         #7A8494;
    --auth-line:          #E4E7EC;
    --auth-line-strong:   #C9CFD8;
    --auth-line-hover:    #AEB6C2;
    --auth-ok:            #12B76A;
    --auth-panel-deco:    rgba(22, 24, 29, .04);
    --auth-shadow:        0 1px 2px rgba(16,24,40,.04), 0 12px 32px -12px rgba(16,24,40,.10);
    --auth-shadow-float:  0 4px 12px rgba(16,24,40,.08);

    /* ── Tipografi tema ── */
    --auth-font-display:  'Sora', sans-serif;
    --auth-font-body:     'Inter', sans-serif;
    --auth-font-mono:     'IBM Plex Mono', monospace;
}

[data-theme="dark"] {
    color-scheme: dark;

    /* ── Surface & ink (mode gelap) ── */
    --auth-bg:            #0B0E13;
    --auth-surface:       #12161D;
    --auth-surface-raise: #171C25;
    --auth-ink:           #EDEFF2;
    --auth-ink-soft:      #A8B0BC;
    --auth-muted:         #7C8695;
    --auth-line:          #232A35;
    --auth-line-strong:   #33404F;
    --auth-line-hover:    #4A5A6E;
    --auth-ok:            #2BD683;
    --auth-panel-deco:    rgba(255, 255, 255, .05);
    --auth-shadow:        0 1px 2px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.6);
    --auth-shadow-float:  0 4px 14px rgba(0,0,0,.5);

    /* brand accent tetap, teks brand dibuat lebih terang di latar gelap */
    --auth-brand-deep:    #FF6B4A;
    --auth-brand-press:   #FF5A35;
    --auth-brand-tint:    rgba(255, 62, 29, .16);
    --auth-brand-tint-soft: rgba(255, 62, 29, .08);
}

/* ══════════════════════ LAYOUT UTAMA ══════════════════════ */
.member-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    font-family: var(--auth-font-body);
    color: var(--auth-ink);
    background: var(--auth-bg);
    transition: background .3s ease, color .3s ease;
}

.member-auth a { color: var(--auth-brand); text-decoration: none; font-weight: 600; }
.member-auth a:hover { text-decoration: underline; }
.member-auth :focus-visible { outline: 2px solid var(--auth-brand); outline-offset: 2px; border-radius: 6px; }

/* ══════════════════════ PANEL KIRI — BRAND ══════════════════════ */
.member-auth .brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    overflow: hidden;
    background:
        linear-gradient(var(--auth-panel-deco) 1px, transparent 1px),
        linear-gradient(90deg, var(--auth-panel-deco) 1px, transparent 1px),
        var(--auth-surface-raise);
    background-size: 44px 44px;
    animation: member-rise .7s cubic-bezier(.22, .8, .24, 1) both;
}

/* glow merah lembut khas gudang */
.member-auth .brand-panel::before {
    content: "";
    position: absolute;
    width: 560px; height: 560px;
    left: -220px; top: -220px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--auth-brand-tint) 0%, transparent 62%);
    pointer-events: none;
}

.member-auth .brand-top {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.member-auth .app-logo {
    height: 44px;
    width: auto;
    display: block;
    filter: none;
}
[data-theme="dark"] .member-auth .app-logo {
    /* logo app berwarna merah gelap transparan → perlu dicerahkan di latar gelap */
    filter: brightness(1.6);
}

.member-auth .portal-chip {
    margin-left: auto;
    font-family: var(--auth-font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--auth-brand);
    background: var(--auth-brand-tint-soft);
    border: 1px solid var(--auth-brand-tint);
    padding: .35rem .7rem;
    border-radius: 99px;
    white-space: nowrap;
}

.member-auth .brand-mid { position: relative; max-width: 34rem; }

.member-auth .brand-mid h1 {
    font-family: var(--auth-font-display);
    font-weight: 600;
    font-size: clamp(1.9rem, 3.2vw, 2.8rem);
    line-height: 1.15;
    letter-spacing: -.03em;
    margin: 0 0 1.1rem;
    color: var(--auth-ink);
}
.member-auth .brand-mid h1 em { font-style: normal; color: var(--auth-brand); }

.member-auth .brand-mid p {
    color: var(--auth-ink-soft);
    font-size: 1.02rem;
    line-height: 1.65;
    max-width: 30rem;
    margin: 0;
}

.member-auth .trust-points {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    display: grid;
    gap: .7rem;
}
.member-auth .trust-points li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--auth-font-mono);
    font-size: .8rem;
    color: var(--auth-ink-soft);
}
.member-auth .trust-points .tick {
    width: 20px; height: 20px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--auth-brand-tint-soft);
    color: var(--auth-brand);
}
.member-auth .trust-points .tick svg { display: block; }

/* ── Kartu operasional (live telemetry) ── */
.member-auth .ops-card {
    position: relative;
    background: var(--auth-surface);
    border: 1px solid var(--auth-line);
    border-radius: 16px;
    padding: 1.15rem 1.25rem;
    box-shadow: var(--auth-shadow);
    max-width: 34rem;
}
.member-auth .ops-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .9rem;
}
.member-auth .live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--auth-ok);
    animation: member-pulse 2.2s ease-out infinite;
}
@keyframes member-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(18, 183, 106, .45); }
    70%  { box-shadow: 0 0 0 9px rgba(18, 183, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); }
}
.member-auth .ops-head .label {
    font-family: var(--auth-font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--auth-muted);
}
.member-auth .ops-head .time {
    margin-left: auto;
    font-family: var(--auth-font-mono);
    font-size: .72rem;
    color: var(--auth-muted);
}
.member-auth .ops-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
.member-auth .ops-stat .num {
    font-family: var(--auth-font-mono);
    font-weight: 500;
    font-size: 1.35rem;
    letter-spacing: -.02em;
    color: var(--auth-ink);
}
.member-auth .ops-stat .lbl {
    font-size: .72rem;
    color: var(--auth-muted);
    margin-top: .15rem;
    line-height: 1.35;
}
.member-auth .ops-stat + .ops-stat {
    border-left: 1px solid var(--auth-line);
    padding-left: 1rem;
}

/* konveyor dengan paket berjalan */
.member-auth .conveyor {
    position: relative;
    height: 36px;
    border-radius: 10px;
    background: var(--auth-surface-raise);
    border: 1px solid var(--auth-line);
    overflow: hidden;
}
.member-auth .belt {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 6px;
    transform: translateY(-50%);
    background: repeating-linear-gradient(90deg, var(--auth-line-strong) 0 10px, transparent 10px 20px);
    animation: member-belt .9s linear infinite;
    border-radius: 99px;
}
@keyframes member-belt { to { background-position: 20px 0; } }
.member-auth .parcel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 20px;
    border-radius: 4px;
    background: var(--auth-surface);
    border: 1.5px solid var(--auth-brand);
    box-shadow: var(--auth-shadow-float);
    animation: member-slide 8s linear infinite;
}
.member-auth .parcel::after {
    content: "";
    position: absolute;
    inset: 5px 6px;
    background: repeating-linear-gradient(90deg, var(--auth-line-strong) 0 2px, transparent 2px 5px);
}
.member-auth .p2 { animation-duration: 11s; animation-delay: 2.8s; opacity: .85; }
.member-auth .p3 { animation-duration: 7s;  animation-delay: 5.4s; opacity: .7; }
@keyframes member-slide {
    0%   { left: -40px; }
    100% { left: calc(100% + 12px); }
}
.member-auth .ops-foot {
    margin-top: .85rem;
    font-family: var(--auth-font-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--auth-muted);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.member-auth .ops-foot .barcode { display: block; color: var(--auth-muted); }

.member-auth .brand-foot {
    position: relative;
    font-size: .8rem;
    color: var(--auth-muted);
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
}

/* ══════════════════════ PANEL KANAN — FORM ══════════════════════ */
.member-auth .form-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    animation: member-rise .7s cubic-bezier(.22, .8, .24, 1) .08s both;
}
.member-auth .form-top { display: flex; justify-content: flex-end; }

.member-auth .theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .8rem;
    border: 1px solid var(--auth-line);
    border-radius: 99px;
    background: var(--auth-surface);
    color: var(--auth-ink-soft);
    font-family: var(--auth-font-body);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--auth-shadow-float);
    transition: border-color .2s, color .2s, transform .15s;
}
.member-auth .theme-toggle:hover {
    border-color: var(--auth-line-strong);
    color: var(--auth-ink);
    transform: translateY(-1px);
}
.member-auth .theme-toggle svg { display: block; }
.member-auth .theme-toggle .icon-sun { display: none; }
.member-auth .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .member-auth .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .member-auth .theme-toggle .icon-moon { display: none; }

.member-auth .form-wrap {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 2rem 0;
}
.member-auth .form-card { width: 100%; max-width: 26.5rem; }

.member-auth .eyebrow {
    font-family: var(--auth-font-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--auth-brand);
    margin-bottom: .9rem;
}
.member-auth .form-card h2 {
    font-family: var(--auth-font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    letter-spacing: -.025em;
    margin: 0 0 .55rem;
    color: var(--auth-ink);
}
.member-auth .form-card .lead {
    color: var(--auth-ink-soft);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0 0 1.8rem;
}

/* ── Field & input ── */
.member-auth .field { margin-bottom: 1.15rem; }
.member-auth .field label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .45rem;
    color: var(--auth-ink);
}
.member-auth .field label .forgot { font-size: .8rem; font-weight: 600; }

.member-auth .input-wrap { position: relative; }
.member-auth .input-wrap .ico {
    position: absolute;
    left: .95rem; top: 50%;
    transform: translateY(-50%);
    color: var(--auth-muted);
    pointer-events: none;
    display: flex;
}
.member-auth .input-wrap input {
    width: 100%;
    height: 48px;
    padding: 0 .95rem 0 2.7rem;
    font-family: var(--auth-font-body);
    font-size: .95rem;
    color: var(--auth-ink);
    background: var(--auth-surface);
    border: 1px solid var(--auth-line-strong);
    border-radius: 12px;
    transition: border-color .2s, box-shadow .2s;
}
.member-auth .input-wrap input::placeholder { color: var(--auth-muted); }
.member-auth .input-wrap input:hover { border-color: var(--auth-line-hover); }
.member-auth .input-wrap input:focus {
    outline: none;
    border-color: var(--auth-brand);
    box-shadow: 0 0 0 4px var(--auth-brand-tint);
}

.member-auth .eye-btn {
    position: absolute;
    right: .55rem; top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    border: none;
    background: transparent;
    color: var(--auth-muted);
    cursor: pointer;
    border-radius: 8px;
    display: grid;
    place-items: center;
}
.member-auth .eye-btn:hover { color: var(--auth-ink); background: var(--auth-brand-tint-soft); }
.member-auth .eye-btn svg { display: block; }
.member-auth .eye-btn .icon-eye-off { display: none; }
.member-auth .eye-btn.show .icon-eye-off { display: block; }
.member-auth .eye-btn.show .icon-eye { display: none; }

.member-auth .field .msg {
    display: none;
    align-items: center;
    gap: .4rem;
    margin-top: .45rem;
    font-size: .8rem;
    color: var(--auth-brand);
    font-weight: 500;
}
.member-auth .field .msg svg { display: block; }
.member-auth .field.error .msg { display: flex; }
.member-auth .field.error input {
    border-color: var(--auth-brand);
    box-shadow: 0 0 0 4px var(--auth-brand-tint);
}

/* ── Banner error form-level (login gagal: "Email atau password salah") ──
   Memakai token tema agar konsisten dengan state error field-level. */
.member-auth .form-alert {
    display: none;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.15rem;
    padding: .7rem .9rem;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--auth-brand-deep);
    background: var(--auth-brand-tint-soft);
    border: 1px solid var(--auth-brand-tint);
}
.member-auth .form-alert.show { display: flex; }
.member-auth .form-alert svg { flex: 0 0 auto; color: var(--auth-brand); }

/* ── Baris form: remember + lupa password ── */
.member-auth .form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.15rem 0 1.4rem;
}
.member-auth .check {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-size: .85rem;
    color: var(--auth-ink-soft);
    user-select: none;
}
.member-auth .check input { position: absolute; opacity: 0; pointer-events: none; }
.member-auth .check .box {
    width: 18px; height: 18px; flex: none;
    border: 1.5px solid var(--auth-line-strong);
    border-radius: 5px;
    display: grid;
    place-items: center;
    background: var(--auth-surface);
    transition: background .15s, border-color .15s;
}
.member-auth .check input:checked + .box { background: var(--auth-brand); border-color: var(--auth-brand); }
.member-auth .check input:checked + .box svg { opacity: 1; }
.member-auth .check .box svg { opacity: 0; color: #fff; transition: opacity .15s; }

/* ── Tombol utama ── */
.member-auth .btn-primary {
    width: 100%;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: var(--auth-brand);
    color: #fff;
    font-family: var(--auth-font-display);
    font-weight: 600;
    font-size: .98rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(255, 62, 29, .55);
    transition: background .2s, transform .15s;
}
.member-auth .btn-primary:hover { background: var(--auth-brand-press); transform: translateY(-1px); }
.member-auth .btn-primary:active { transform: translateY(0); }
.member-auth .btn-primary:disabled { opacity: .75; cursor: progress; transform: none; }
.member-auth .spinner {
    width: 18px; height: 18px;
    display: none;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: member-spin .7s linear infinite;
}
.member-auth .btn-primary.loading .spinner { display: block; }
@keyframes member-spin { to { transform: rotate(360deg); } }

.member-auth .divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--auth-muted);
    font-size: .78rem;
}
.member-auth .divider::before,
.member-auth .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--auth-line);
}

.member-auth .btn-otp {
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: var(--auth-surface);
    color: var(--auth-ink);
    font-family: var(--auth-font-body);
    font-weight: 600;
    font-size: .92rem;
    border: 1px solid var(--auth-line-strong);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.member-auth .btn-otp:hover {
    border-color: var(--auth-brand);
    background: var(--auth-brand-tint-soft);
}
.member-auth .btn-otp svg { color: var(--auth-brand); }

.member-auth .form-card .foot {
    margin-top: 1.8rem;
    text-align: center;
    font-size: .85rem;
    color: var(--auth-ink-soft);
}

/* ══════════════════════ TOAST ══════════════════════ */
.member-auth .toast {
    position: fixed;
    left: 50%; bottom: 1.5rem;
    transform: translate(-50%, 140%);
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--auth-surface);
    color: var(--auth-ink);
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    padding: .85rem 1.1rem;
    font-size: .88rem;
    font-weight: 500;
    box-shadow: var(--auth-shadow);
    transition: transform .35s cubic-bezier(.22, .8, .24, 1);
    z-index: 50;
}
.member-auth .toast.show { transform: translate(-50%, 0); }
.member-auth .toast svg { color: var(--auth-ok); }
.member-auth .toast.is-error svg { color: var(--auth-brand); }

/* Tombol bantuan WhatsApp (components/wa-help) — melayang kanan bawah */
.member-auth .wa-help {
    position: fixed;
    right: 1.25rem; bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #25d366;
    color: #fff;
    border-radius: 999px;
    padding: .7rem 1.1rem;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
    transition: transform .2s ease, box-shadow .2s ease;
    z-index: 40;
}
.member-auth .wa-help:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37, 211, 102, .45); color: #fff; }
.member-auth .wa-help:focus-visible { outline: 2px solid var(--auth-ink); outline-offset: 3px; }
@media (max-width: 560px) {
    .member-auth .wa-help { right: 1rem; bottom: 1rem; padding: .8rem; }
    .member-auth .wa-help span { display: none; }
}

/* ══════════════════════ RESPONSIVE ══════════════════════ */
@media (max-width: 960px) {
    .member-auth { grid-template-columns: 1fr; }
    .member-auth .brand-panel {
        justify-content: flex-start;
        padding: 1.5rem 1.5rem 2rem;
    }
    .member-auth .brand-panel::before { width: 380px; height: 380px; left: -160px; top: -160px; }
    .member-auth .brand-mid h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .member-auth .ops-card,
    .member-auth .brand-foot,
    .member-auth .trust-points { display: none; }
    .member-auth .form-panel { padding: 1.5rem 1.5rem 2.5rem; }
    .member-auth .form-wrap { place-items: start stretch; padding: 1.5rem 0 0; }
    .member-auth .form-top { position: absolute; top: 1.2rem; right: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .member-auth *, .member-auth *::before, .member-auth *::after {
        animation: none !important;
        transition: none !important;
    }
}

@keyframes member-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============ Login OTP (mode inline) ============ */
.member-auth .otp-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    margin: 0 0 1rem;
    border: none;
    background: none;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--auth-muted);
    cursor: pointer;
}
.member-auth .otp-back:hover { color: var(--auth-brand); }
.member-auth .otp-info {
    margin: 0 0 1rem;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--auth-muted);
}
.member-auth .otp-code-input {
    letter-spacing: .4em;
    text-align: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.15rem;
    font-weight: 500;
}
.member-auth .otp-resend {
    margin: .9rem 0 0;
    font-size: .8rem;
    color: var(--auth-muted);
    text-align: center;
}
.member-auth .otp-resend .resend-btn {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--auth-brand);
    cursor: pointer;
}
.member-auth .otp-resend .resend-btn:disabled { opacity: .6; cursor: default; }