/* =====================================================================
   auth.css — halaman Sign-in & Sign-up (split sinematik).
   Taruh di: assets/css/auth.css
   ===================================================================== */

/* Sembunyikan navbar & footer di halaman auth (biar full-screen bersih) */
body[data-page="auth-page"] .nav,
body[data-page="auth-page"] .foot { display: none; }
body[data-page="auth-page"] #main { padding: 0; }

.auth {
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}

/* ---------- Panel kiri (sinematik) ---------- */
.auth__aside {
    position: relative; overflow: hidden;
    display: grid; place-items: center; padding: 3rem;
    background: linear-gradient(160deg, #1d0a0b, #2a1216 55%, #0c0a09);
}
.auth__aside-img {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    transform: scale(1.05);
    animation: authDrift 16s ease-in-out infinite alternate;
}
@keyframes authDrift { to { transform: scale(1.14) translateY(-2%); } }
.auth__aside-veil {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg, rgba(12,10,9,.45), rgba(12,10,9,.78)),
        radial-gradient(120% 90% at 18% 100%, color-mix(in srgb, var(--cinnabar) 42%, transparent), transparent 60%);
}
.auth__aside-content { position: relative; z-index: 2; text-align: center; max-width: 22ch; }
.auth__seal { font-family: var(--font-cn); font-size: clamp(3rem, 8vw, 5rem); color: var(--cinnabar-bright); display: block; }
.auth__quote {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); line-height: 1.35;
    color: var(--text-on-ink); margin-top: 1rem;
}

/* ---------- Panel kanan (form) ---------- */
.auth__main {
    display: grid; place-items: center;
    padding: 3rem 1.6rem; background: var(--ink-900);
}
.auth__form-wrap { width: min(380px, 100%); position: relative; }
.auth__back {
    display: inline-block; margin-bottom: 2rem;
    color: var(--text-on-ink-dim); font-size: var(--step-sm); transition: color .3s;
}
.auth__back:hover { color: var(--gold); }
.auth__title { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.8rem); margin: .5rem 0 .4rem; }
.auth__sub { color: var(--text-on-ink-dim); margin-bottom: 2rem; }

.auth__error {
    background: color-mix(in srgb, var(--cinnabar) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--cinnabar) 55%, transparent);
    color: #f3d9d4; padding: .8em 1em; border-radius: 10px;
    font-size: var(--step-sm); margin-bottom: 1.4rem;
}

.field { margin-bottom: 1.1rem; }
.field label {
    display: block; font-size: .78rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--gold); margin-bottom: .45rem;
}
.field input {
    width: 100%; padding: .85em 1em;
    background: var(--ink-800); color: var(--text-on-ink);
    border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
    border-radius: 10px; font: inherit;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}

.auth__form .btn { width: 100%; justify-content: center; margin-top: .6rem; }

.auth__alt { margin-top: 1.8rem; color: var(--text-on-ink-dim); font-size: var(--step-sm); }
.auth__alt a { color: var(--gold); border-bottom: 1px solid transparent; transition: border-color .3s; }
.auth__alt a:hover { border-color: var(--gold); }

/* ---------- Mobile: jadi full-screen, panel kiri jadi banner atas ---------- */
@media (max-width: 860px) {
    .auth { grid-template-columns: 1fr; }
    .auth__aside { min-height: 34svh; padding: 2rem; }
    .auth__main { padding: 2.4rem 1.4rem 3rem; }
}