/* Auth layout — split: panel visual kiri, form kanan (login, lupa password) */

.auth-shell {
    min-height: 100vh;
    display: flex;
}

/* ---- Panel visual kiri — hitam pekat + light-streak emas melengkung
   (acuan: banner "Spilla Business Ecosystem", bukan blur-orb gumpalan) ---- */
.auth-visual {
    position: relative;
    flex: 1 1 46%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    overflow: hidden;
    background: #08070a;
}
/* Light streak emas — garis melengkung tipis dari sudut kiri-bawah, spt banner acuan */
.auth-streak {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .8;
}
.auth-streak svg { width: 100%; height: 100%; }
/* Aksen biru elektrik tipis di sisi kanan, kontras kecil spt banner acuan */
.auth-visual::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 45%;
    background: linear-gradient(115deg, transparent 60%, rgba(111,195,255,.06) 100%);
    pointer-events: none;
}
/* Vignette halus supaya teks di tengah tetap kontras terhadap streak */
.auth-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 55% at 50% 45%, rgba(8,7,10,.55) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.auth-visual-content {
    position: relative;
    z-index: 2;
    max-width: 380px;
    text-align: center;
}
.auth-visual-logo { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 20px; }
.auth-visual-title { font-size: 26px; margin-bottom: 12px; }
.auth-visual-tagline { font-size: 14px; line-height: 1.7; margin-bottom: 36px; }

.auth-visual-stats {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}
.auth-visual-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border-soft);
    font-size: 13px;
    color: var(--text-dim);
}
.auth-visual-stat i { color: var(--amber); font-size: 15px; flex-shrink: 0; }

/* ---- Form kanan ---- */
.auth-form-wrap {
    flex: 1 1 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-5);
    background: var(--bg);
}
.auth-form-inner { width: 100%; max-width: 380px; }

@media (max-width: 900px) {
    .auth-shell { flex-direction: column; }
    .auth-visual { flex: 0 0 auto; padding: var(--space-5) var(--space-4); min-height: 220px; }
    .auth-visual-stats { display: none; } /* ringkas di mobile, hindari scroll panjang */
    .auth-visual-logo { width: 48px; height: 48px; margin-bottom: 12px; }
    .auth-visual-title { font-size: 20px; margin-bottom: 6px; }
    .auth-visual-tagline { font-size: 13px; margin-bottom: 0; }
    .auth-form-wrap { padding: var(--space-5) var(--space-4); }
}
@media (max-width: 480px) {
    .auth-visual { min-height: 190px; padding: var(--space-4); }
    .auth-visual-tagline { display: none; } /* hemat ruang di layar sangat sempit */
}