/*
 * Gaya halaman pendaftaran publik.
 *
 * ── Mengapa berkas statis, bukan <style> sebaris ─────────────────────────
 *
 * `SecurityHeaders` mengirim `default-src 'self' data: blob:` pada setiap rute
 * grup `web`, dan CSP tanpa `style-src` jatuh kembali ke `default-src`. Gaya
 * sebaris karena itu DIBLOKIR peramban — halaman tetap 200, tetapi tampil
 * telanjang, dan tidak ada satu pun uji HTTP yang menangkapnya sebab
 * penegakannya terjadi di peramban.
 *
 * Panel Filament kebetulan tidak terkena: ia mendeklarasikan middleware-nya
 * sendiri dan tidak melewati grup `web`, sehingga tidak pernah menerima header
 * itu. Mengandalkan kebetulan itu bukan pilihan.
 *
 * Berkas ini disajikan dari origin yang sama, jadi ia lolos `'self'` tanpa
 * satu pun kelonggaran CSP — dan tetap tidak membutuhkan Node maupun Vite.
 */

@import url('tokens.css');

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── Kerangka dua kolom ─────────────────────────────────────────── */

.shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

/*
    Panel kiri muncul hanya di layar lebar.

    Di ponsel ia DISEMBUNYIKAN sepenuhnya, bukan ditumpuk di atas
    formulir. Alasannya bukan estetika: pendaftar di ponsel harus dapat
    melihat kolom pertama tanpa menggulir, dan panel setinggi layar di
    atasnya membuat formulirnya seolah tidak ada.
*/
.aside { display: none; }

@media (min-width: 62rem) {
    .shell { grid-template-columns: 1.05fr 1fr; }
    .aside { display: flex; }
}

.aside {
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    padding: 3.5rem 3rem;
    color: #eef2ff;
    background:
        radial-gradient(115% 85% at 8% 4%, #3b82f6 0%, transparent 55%),
        radial-gradient(95% 75% at 92% 96%, #1e40af 0%, transparent 60%),
        linear-gradient(158deg, #1e3a8a 0%, #172554 100%);
}

.aside-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.aside-mark {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .7rem;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .18);
}

.aside h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.7rem, 2.4vw, 2.3rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
    font-weight: 700;
}

.aside p.sub {
    margin: 0 0 2.25rem;
    color: #c7d2fe;
    font-size: 1rem;
    max-width: 34ch;
}

.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.points li { display: flex; gap: .8rem; align-items: flex-start; }
.points svg { flex: none; margin-top: .2rem; color: #93c5fd; }
.points strong { display: block; font-weight: 600; font-size: .95rem; }
.points span { color: #c7d2fe; font-size: .875rem; line-height: 1.5; }

.aside-foot { color: #a5b4fc; font-size: .8rem; }

/* ── Kolom formulir ─────────────────────────────────────────────── */

.main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.15rem 3rem;
}

.panel { width: 100%; max-width: 27rem; }

.mobile-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1.75rem;
    font-weight: 700;
    color: var(--ink);
}

@media (min-width: 62rem) { .mobile-brand { display: none; } }

.mobile-mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .6rem;
    color: #fff;
    background: linear-gradient(150deg, #3b82f6, #1d4ed8);
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: 2rem 1.75rem;
    box-shadow: var(--shadow);
}

h1 {
    margin: 0 0 .4rem;
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.025em;
    font-weight: 700;
}

.lede { margin: 0 0 1.75rem; color: var(--muted); font-size: .925rem; }

/* ── Kolom isian ────────────────────────────────────────────────── */

.field { margin-bottom: 1.15rem; }

label {
    display: block;
    margin-bottom: .4rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink-soft);
}

input {
    width: 100%;
    padding: .625rem .75rem;
    font: inherit;
    font-size: .9375rem;
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--line-strong);
    border-radius: .5rem;
    transition: border-color .15s, box-shadow .15s;
}

input::placeholder { color: var(--muted); opacity: .7; }

input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3.5px var(--ring);
}

input[aria-invalid="true"] { border-color: var(--error); }

.hint, .error, .ok {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .4rem;
    font-size: .78rem;
    line-height: 1.45;
}

.hint { color: var(--muted); }
.error { color: var(--error-ink); }
.ok { color: var(--ok); }
.error svg, .ok svg { flex: none; margin-top: .18rem; }

/* ── Tombol ─────────────────────────────────────────────────────── */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: 1.6rem;
    padding: .7rem 1rem;
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--brand-ink);
    background: var(--brand-deep);
    border: 0;
    border-radius: .5rem;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s, transform .05s;
}

.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3.5px var(--ring); }

.btn-quiet {
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line-strong);
}

/* ── Aksesori ───────────────────────────────────────────────────── */

.foot {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .875rem;
    color: var(--muted);
}

a { color: var(--brand); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }

.notice {
    display: flex;
    gap: .7rem;
    margin-top: 1.25rem;
    padding: .85rem .95rem;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--ink-soft);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: .625rem;
    text-align: left;
}

.notice svg { flex: none; margin-top: .2rem; color: var(--muted); }
.notice strong { color: var(--ink); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.15rem;
    padding: .3rem .7rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ok-ink);
    background: color-mix(in srgb, var(--ok) 12%, transparent);
    border-radius: 999px;
}

.mark-round {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1.25rem;
    border-radius: 999px;
}

.mark-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.mark-bad { color: var(--error-ink); background: var(--error-bg); }

.center { text-align: center; }

/* Persetujuan syarat layanan — wajib sebelum optik dapat dibuat. */
.consent {
    margin: 4px 0 20px;
}

.consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    cursor: pointer;
}

.consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--brand);
    cursor: pointer;
}

.consent input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--ring);
    border-radius: 4px;
}

.consent a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}