/* Kiosk TV — desain 1920×1080 (PRD §9.5), diskalakan utuh ke layar apa pun lewat transform di kiosk.js.
   Gaya "ruang gelap": satu bidang navy (--ground) di semua layar; yang dibaca/disentuh tampil sebagai
   permukaan putih; amber hanya untuk aksi utama. Datar: tanpa gradien, tanpa bayangan saat diam.
   Gerak: transform/opacity saja, tekan = mengecil (160 ms), masuk = naik + muncul berurutan.
   Sudut: --r-panel / --r-tile / --r-control / --r-pill saja (lihat tokens.css). */
html, body { height: 100%; overflow: hidden; background: #0F1D3D; }
body {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation; overscroll-behavior: none; cursor: default;
}

#viewport { position: fixed; inset: 0; display: grid; place-items: center; }
#stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; overflow: hidden; background: var(--ground); color: var(--on-dark);
}
.screen { position: absolute; inset: 0; padding: 56px 96px 64px; display: flex; flex-direction: column; }

/* Masuk berurutan: elemen dengan [data-in] naik 20px + muncul; urutan lewat --i (diisi kiosk.js). */
[data-in] { animation: rise-in 560ms var(--ease-out-strong) backwards; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } }

/* ── Tombol ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 20px; white-space: nowrap;
  border: 0; border-radius: var(--r-pill); cursor: pointer; font-weight: 800;
  transition: transform 160ms var(--ease-out-strong), background-color 160ms ease;
}
.btn:active, .btn.is-pressed { transform: scale(.97); }
.btn .icon { width: 44px; height: 44px; }
.btn-cta { min-height: 116px; min-width: 480px; padding: 0 64px; font-size: 40px; letter-spacing: -.3px; background: var(--accent); color: var(--ink); }
.btn-cta:active, .btn-cta.is-pressed { background: var(--accent-strong); }
.btn-cta[disabled] { opacity: .7; }
.btn-primary { min-height: 116px; padding: 0 56px; font-size: 36px; background: var(--brand-600); color: #fff; }
.btn-primary:active { background: var(--brand-700); }
.btn-secondary { min-height: 116px; padding: 0 48px; font-size: 34px; background: var(--brand-50); color: var(--primary-strong); }
.btn-secondary:active { background: var(--brand-100); }
/* Kontrol di atas ground: satu langkah nada lebih terang, teks terang */
.btn-icon, .btn-back { height: 104px; border-radius: var(--r-tile); background: var(--ground-2); color: var(--on-dark); }
.btn-icon { width: 104px; padding: 0; }
.btn-icon .icon { width: 48px; height: 48px; }
.btn-back { padding: 0 40px 0 32px; font-size: 30px; }
.btn-icon:active, .btn-back:active { background: var(--ground-3); }

/* ── Merek ────────────────────────────────────────────────────────────────── */
.logos { display: flex; align-items: center; gap: 32px; }
.logos img { height: 56px; width: auto; display: block; filter: brightness(0) invert(1); }
.logos img.lbz { height: 62px; }
.logos .sep { width: 2px; height: 44px; background: rgba(241, 245, 254, .28); border-radius: var(--r-pill); }
.logos-bar { gap: 28px; flex: none; }
.logos-bar img { height: 48px; } .logos-bar img.lbz { height: 54px; }
.logos-bar .sep { height: 40px; }
.brand-top { position: absolute; top: 56px; left: 96px; display: flex; }

/* Status untuk staf (status nyata: online / offline / antrean) */
.staff-dot {
  position: absolute; right: 28px; bottom: 18px; display: flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 700; color: var(--on-dark-mute);
}
.staff-dot i { width: 14px; height: 14px; border-radius: 50%; background: var(--good); }
.staff-dot.offline i { background: var(--on-dark-mute); }
.staff-dot.queued i { background: var(--warn); }

/* ── Bar atas umum ────────────────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; gap: 32px; height: 104px; flex: none; }
.topbar .spacer { flex: 1; }
.screen-title { font-family: var(--font-brand); font-size: 58px; font-weight: 700; letter-spacing: -.01em; margin: 0; line-height: 1.05; color: var(--on-dark); }

/* ── L1 Attract: satu benda terang (pratinjau laporan), satu benda solid terang (CTA) ── */
.attract { cursor: pointer; padding: 72px 96px 80px; }
.attract-top { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex: none; }
.attract-event { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; font-size: 24px; line-height: 1.3; font-weight: 500; color: var(--on-dark-soft); }
.attract-event strong { font-size: 28px; font-weight: 700; color: var(--on-dark); letter-spacing: -.01em; }
.attract-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 680px; gap: 96px; align-items: center; padding-top: 24px; }
.attract-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
/* Judul memakai huruf wordmark BERANI (Montserrat) agar layar awal terbaca sebagai merek. */
.attract .display { font-family: var(--font-brand); font-size: 164px; line-height: .96; font-weight: 700; letter-spacing: -.01em; margin: 0 0 0 -4px; color: var(--on-dark); }
.attract-sub { margin: 48px 0 0; max-width: 780px; font-size: 46px; line-height: 1.2; font-weight: 500; letter-spacing: -.015em; color: var(--on-dark-soft); text-wrap: balance; }
.attract-reward { margin: 28px 0 64px; max-width: 820px; font-size: 30px; line-height: 1.35; font-weight: 500; color: var(--on-dark-soft); text-wrap: balance; }
.attract-reward b { font-weight: 700; color: var(--on-dark); }
/* Ajakan di layar idle: cincin amber yang mengembang & pudar (transform/opacity saja) */
.attract .btn-cta { position: relative; }
.attract .btn-cta::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 4px var(--accent); opacity: 0; animation: invite 3.2s var(--ease-out-strong) infinite 1.6s;
}
@keyframes invite { 0% { opacity: .7; transform: scale(1); } 45%, 100% { opacity: 0; transform: scale(1.12, 1.3); } }

/* Pratinjau laporan — fragmen produk nyata (gauge & aspek dari CONTENT) */
.report-preview { margin: 0; padding: 40px 44px 44px; border-radius: var(--r-panel); background: var(--surface); color: var(--ink); display: flex; flex-direction: column; gap: 22px; }
.rp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-size: 22px; font-weight: 600; color: var(--muted); }
.rp-head b { font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.rp-gauge { position: relative; width: 400px; margin: 0 auto; text-align: center; }
.rp-gauge .gauge { width: 400px; height: 220px; }
.rp-gauge .gauge-value { margin-top: -4px; font-size: 72px; color: var(--brand-800); letter-spacing: -2px; }
.rp-gauge .gauge-value small { font-size: 32px; }
.rp-levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 21px; font-weight: 600; }
.rp-levels li { display: flex; align-items: center; gap: 12px; background: none; color: var(--ink); }
.rp-levels i { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.rp-levels .tone-critical i { background: var(--critical); }
.rp-levels .tone-warn i { background: var(--warn); }
.rp-levels .tone-ok i { background: var(--ok); }
.rp-levels .tone-good i { background: var(--good); }
.rp-aspects { list-style: none; margin: 2px 0 0; padding: 24px 28px; border-radius: var(--r-tile); background: var(--brand-50); display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; font-size: 20px; line-height: 1.25; font-weight: 600; color: var(--ink); }
.rp-aspects li { display: flex; align-items: flex-start; gap: 12px; }
.rp-aspects .icon { width: 24px; height: 24px; margin-top: 1px; color: var(--primary); stroke-width: 3; }

/* Jarum "mencari": dipakai di layar awal & gerbang (hasil belum diketahui) */
.needle-scan .needle { transform-box: view-box; transform-origin: 300px 300px; animation: sweep 9s var(--ease-in-out-strong) infinite; }
@keyframes sweep {
  0%, 100% { transform: rotate(-62deg); }
  22%, 34% { transform: rotate(18deg); }
  56%, 68% { transform: rotate(64deg); }
  86% { transform: rotate(-20deg); }
}

/* ── L2 Pilih jalur ───────────────────────────────────────────────────────── */
.path-title { flex: 1; }
.path-cards { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; }
.path-card {
  position: relative; border: 0; border-radius: var(--r-panel); cursor: pointer; text-align: left; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; padding: 56px; background: var(--surface); color: var(--ink);
  transition: transform 160ms var(--ease-out-strong), box-shadow 160ms ease;
}
.path-card .path-icon { width: 152px; height: 152px; border-radius: var(--r-tile); display: grid; place-items: center; }
.path-card .path-icon .icon { width: 92px; height: 92px; stroke-width: 1.75; }
.path-card.owner .path-icon { background: var(--brand-600); color: #fff; }
.path-card.newbie .path-icon { background: var(--accent); color: var(--ink); }
.path-card .path-head { display: flex; flex-direction: column; gap: 40px; }
.path-card .path-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.path-card .gets { display: flex; flex-direction: column; gap: 12px; }
.path-card .gets span { display: inline-flex; align-items: center; gap: 14px; align-self: flex-start; padding: 12px 26px 12px 18px;
  border-radius: var(--r-pill); background: var(--brand-50); font-size: 28px; font-weight: 700; }
.path-card .gets .icon { width: 30px; height: 30px; stroke-width: 3; color: var(--good); }
.path-card h2 { margin: 0 0 14px; font-family: var(--font-brand); font-size: 60px; font-weight: 700; letter-spacing: -.01em; line-height: 1.05; }
.path-card p { margin: 0; font-size: 34px; font-weight: 500; color: var(--muted); }
.path-card .go { width: 112px; height: 112px; border-radius: 50%; flex: none; display: grid; place-items: center; transition: transform 240ms var(--ease-out-strong); }
.path-card .go .icon { width: 52px; height: 52px; }
.path-card.owner .go { background: var(--brand-600); color: #fff; }
.path-card.newbie .go { background: var(--ink); color: #fff; }
.path-card:active, .path-card.is-pressed { transform: scale(.98); box-shadow: inset 0 0 0 6px var(--brand-500); }
.path-card.newbie:active, .path-card.newbie.is-pressed { box-shadow: inset 0 0 0 6px var(--accent); }
.path-card.is-pressed .go { transform: translateX(10px); }

/* ── L3 Pertanyaan ────────────────────────────────────────────────────────── */
.progress { display: flex; align-items: center; justify-content: center; gap: 20px; flex: none; }
.progress-label { order: 2; font-size: 22px; font-weight: 700; color: var(--on-dark-mute); white-space: nowrap; }
.progress-track { display: flex; align-items: center; gap: 10px; }
.progress-track i { width: 14px; height: 14px; border-radius: var(--r-pill); background: var(--ground-3); transition: width 300ms var(--ease-out-strong), background-color 300ms ease; }
.progress-track i.done { background: var(--brand-500); }
.progress-track i.now { width: 48px; background: var(--on-dark); }
.q-main { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.q-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; }
.q-hint { margin: 0; font-size: 28px; font-weight: 500; color: var(--on-dark-soft); }
.q-text { margin: 0; font-size: 56px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; max-width: 1500px; color: var(--on-dark); text-wrap: balance; }
.answers { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(168px, auto); gap: 28px; }
.answer {
  position: relative; display: flex; align-items: center; gap: 32px; padding: 20px 104px 20px 32px; text-align: left;
  border: 0; border-radius: var(--r-tile); background: var(--surface); color: var(--ink); cursor: pointer;
  font-size: 36px; line-height: 1.25; font-weight: 600;
  transition: transform 160ms var(--ease-out-strong), opacity 240ms ease, box-shadow 160ms ease;
}
.answer .letter {
  width: 68px; height: 68px; border-radius: var(--r-control); flex: none; display: grid; place-items: center;
  background: var(--brand-50); color: var(--primary); font-size: 30px; font-weight: 800;
  transition: background-color 160ms ease, color 160ms ease;
}
.answer .tick {
  position: absolute; right: 32px; top: 50%; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%;
  background: var(--brand-600); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.6);
  transition: opacity 150ms ease, transform 320ms var(--ease-spring);
}
.answer .tick .icon { width: 34px; height: 34px; stroke-width: 3; }
.answer:active { transform: scale(.98); }
/* Setelah memilih: jawaban lain meredup agar pilihan jelas */
.answers.has-choice .answer:not(.is-selected) { opacity: .35; }
.answer.is-selected { box-shadow: inset 0 0 0 5px var(--brand-500); }
.answer.is-selected .letter { background: var(--brand-600); color: #fff; }
.answer.is-selected .tick { opacity: 1; transform: scale(1); }

/* ── L4 Analisis: cincin progres nyata (ANALYZE_MS) + langkah ─────────────── */
.analyzing { align-items: center; justify-content: center; gap: 44px; }
.analyze-ring { position: relative; width: 240px; height: 240px; }
.analyze-ring svg { width: 240px; height: 240px; display: block; transform: rotate(-90deg); }
.analyze-ring .track { stroke: var(--ground-2); }
.analyze-ring .arc { stroke: var(--brand-500); stroke-dasharray: 1; stroke-dashoffset: 1; animation: ring-fill var(--analyze-ms, 2100ms) var(--ease-in-out-strong) forwards; }
@keyframes ring-fill { to { stroke-dashoffset: 0; } }
.analyze-ring .core { position: absolute; inset: 40px; border-radius: 50%; background: var(--surface); color: var(--brand-600); display: grid; place-items: center; }
.analyze-ring .core .icon { width: 72px; height: 72px; stroke-width: 1.75; }
.analyzing h1 { margin: 0; font-family: var(--font-brand); font-size: 60px; font-weight: 700; letter-spacing: -.01em; color: var(--on-dark); }
.steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 22px; min-width: 760px; }
.steps li { display: flex; align-items: center; gap: 22px; font-size: 34px; font-weight: 600; color: var(--on-dark-mute); opacity: .5; transition: opacity 300ms ease, color 300ms ease; }
.steps li .dot { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ground-2); color: #fff; transition: background-color 200ms ease, transform 320ms var(--ease-spring); }
.steps li .dot .icon { width: 30px; height: 30px; stroke-width: 3; opacity: 0; transform: scale(.6); transition: opacity 150ms ease, transform 320ms var(--ease-spring); }
.steps li.on { opacity: 1; color: var(--on-dark); }
.steps li.done .dot { background: var(--good); }
.steps li.done .dot .icon { opacity: 1; transform: none; }

/* ── L5 Gerbang & L6 Hasil: dua panel putih berdampingan ─────────────────── */
.result .result-title { flex: 1; }
.result-body { flex: 1; display: grid; grid-template-columns: 1fr 640px; gap: 48px; margin-top: 28px; min-height: 0; }
.result-main { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.gauge-wrap { position: relative; width: 560px; margin: 0 auto; text-align: center; }
.gauge { width: 560px; height: 308px; display: block; overflow: visible; }
.gauge .needle { transform-origin: 300px 300px; transition: transform 1100ms var(--ease-spring); }
.gauge-value { margin-top: 6px; font-size: 120px; font-weight: 800; line-height: 1; letter-spacing: -4px; color: var(--ink); }
.gauge-value small { font-size: 40px; color: var(--muted); letter-spacing: 0; font-weight: 700; }
.level-pill { display: inline-flex; align-items: center; padding: 14px 34px; border-radius: var(--r-pill); font-size: 36px; font-weight: 800; }
.tone-critical { background: var(--critical-soft); color: var(--critical-ink); }
.tone-warn { background: var(--warn-soft); color: var(--warn-ink); }
.tone-ok { background: var(--ok-soft); color: var(--ok-ink); }
.tone-good { background: var(--good-soft); color: var(--good-ink); }
.result-level { text-align: center; }
.blocker-label { font-size: 26px; font-weight: 700; color: var(--muted); }
.blocker-value { font-size: 46px; font-weight: 800; letter-spacing: -1px; line-height: 1.12; }

.persona-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; perspective: 1600px; }
.persona-kicker { font-size: 40px; font-weight: 600; color: var(--muted); margin: 0; }
.persona-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.persona-card.flip { animation: flip-in 760ms var(--ease-out-strong) both; }
@keyframes flip-in { from { opacity: 0; transform: rotateY(-70deg) scale(.92); } to { opacity: 1; transform: none; } }
.persona-icon { width: 168px; height: 168px; border-radius: 50%; background: var(--persona); color: #fff; display: grid; place-items: center; }
.persona-icon .icon { width: 96px; height: 96px; }
.persona-name { margin: 0; font-family: var(--font-brand); font-size: 76px; font-weight: 700; letter-spacing: -.01em; color: var(--persona); line-height: 1; }
.persona-tagline { margin: 0; font-size: 36px; font-weight: 600; line-height: 1.3; max-width: 760px; color: var(--ink); text-wrap: balance; }

/* Panel kanan (gerbang kontak & terkirim) */
.contact {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--surface); color: var(--ink); border-radius: var(--r-panel); padding: 36px 52px;
}
.contact h2 { margin: 0 0 12px; font-family: var(--font-brand); font-size: 42px; font-weight: 700; letter-spacing: -.01em; }
.contact p.lead { margin: 0 0 22px; font-size: 27px; line-height: 1.35; font-weight: 500; color: var(--muted); text-wrap: balance; }
.qr-box { position: relative; background: var(--brand-50); padding: 20px; border-radius: var(--r-tile); }
.qr-box svg { width: 300px; height: 300px; display: block; }
/* Sudut pemindai yang "bernapas": tanda QR siap dipindai */
.qr-box::after { content: ''; position: absolute; inset: -10px; border-radius: 34px; box-shadow: inset 0 0 0 4px var(--brand-500); opacity: 0; animation: qr-breathe 2.8s ease-in-out infinite 1s; pointer-events: none; }
@keyframes qr-breathe { 0%, 100% { opacity: 0; transform: scale(.98); } 50% { opacity: .9; transform: scale(1); } }
.qr-label { margin-top: 16px; font-size: 30px; font-weight: 800; display: flex; align-items: center; gap: 12px; }
.qr-label .icon { width: 40px; height: 40px; color: var(--primary); }
.or { margin: 18px 0; font-size: 26px; font-weight: 700; color: var(--muted); }
.contact .btn-primary { width: 100%; }

/* Gerbang: pratinjau terkunci (bentuk hasil tanpa angka/nama) */
.locked { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 40px 40px 44px; border-radius: var(--r-panel); background: var(--surface); color: var(--ink); }
.locked-label { margin: 0; font-size: 30px; font-weight: 700; color: var(--muted); }
.locked-art { filter: blur(8px) saturate(.7); opacity: .55; pointer-events: none; }
.locked-gauge { width: 480px; text-align: center; }
.locked-gauge .gauge { width: 480px; height: 264px; }
.locked-gauge .gauge-value { font-size: 96px; }
.persona-card.ghost { width: 640px; padding: 24px; gap: 18px; --persona: var(--brand-500); }
.persona-card.ghost .persona-icon { width: 120px; height: 120px; }
.persona-card.ghost .persona-name { font-size: 64px; }
.locked-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -30%); display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 32px; border-radius: var(--r-pill); background: var(--ground); color: var(--on-dark); font-size: 28px; font-weight: 700; white-space: nowrap; }
.locked-badge .icon { width: 34px; height: 34px; color: var(--accent); }
.gate-lead { margin: 32px 0 0; font-size: 32px; line-height: 1.4; font-weight: 500; color: var(--on-dark-soft); text-wrap: pretty; }

/* Hasil: panel kiri */
.result-panel { align-items: center; justify-content: center; padding: 48px 72px; border-radius: var(--r-panel); background: var(--surface); color: var(--ink); }
.result-panel .result-level { margin: 16px 0 32px; }
.result-panel .blocker { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 32px; border-radius: var(--r-tile); background: var(--brand-50); text-align: center; }
.result-panel .blocker-label { display: inline-flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 600; }
.result-panel .blocker-label .icon { width: 30px; height: 30px; color: var(--critical); }
.result-panel .blocker-value { font-size: 48px; letter-spacing: -1px; }
.result-panel.is-persona { box-shadow: inset 0 0 0 4px var(--persona); }
.result-panel.is-persona .persona-wrap { gap: 20px; }
/* Konteks bisnis laundry di bawah tagline: blok nada lembut warna persona */
.persona-context { display: flex; gap: 16px; align-items: flex-start; max-width: 800px; margin: 8px 0 0; padding: 24px 28px; border-radius: var(--r-tile);
  background: var(--persona-soft); text-align: left; font-size: 27px; line-height: 1.45; font-weight: 400; color: var(--ink); text-wrap: pretty; }
.persona-context .icon { width: 36px; height: 36px; flex: none; margin-top: 2px; color: var(--persona); }
.persona-context b { display: block; margin-bottom: 4px; font-size: 27px; font-weight: 800; color: var(--persona); }

/* Terkirim: panel kanan */
.contact.sent { gap: 0; }
.sent-icon { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #fff; margin-bottom: 28px;
  animation: pop 560ms var(--ease-spring) 240ms backwards; }
.sent-icon .icon { width: 64px; height: 64px; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } }
.contact.sent .lead { margin-bottom: 24px; font-weight: 400; color: var(--ink); }
.contact.sent .lead b { font-weight: 700; }
.sent-voucher { display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--warn-ink); font-size: 24px; font-weight: 700; }
.sent-voucher .icon { width: 32px; height: 32px; }
.sent-note { margin: 24px 0 32px; font-size: 24px; line-height: 1.45; font-weight: 400; color: var(--muted); text-wrap: balance; }
.contact.sent .btn-cta { min-width: 360px; }
.contact.sent .count { margin-top: 18px; font-size: 22px; font-weight: 600; color: var(--muted); }

/* ── L5b Form TV ──────────────────────────────────────────────────────────── */
.form-screen { padding: 24px 96px 40px; }
.form-top { height: 100px; }
.form-top .btn-back, .form-top .btn-icon { height: 96px; }
.form-top .btn-icon { width: 96px; }
.form-title { margin: 14px 0 20px; font-family: var(--font-brand); font-size: 46px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; color: var(--on-dark); }
/* Ritme vertikal: label 8 → input → 6 → pesan error (ruang tetap), antarbaris 12 */
.fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 12px; }
.field label { display: block; font-size: 26px; font-weight: 700; margin-bottom: 8px; color: var(--on-dark-soft); transition: color 160ms ease; }
.field.is-active label { color: var(--on-dark); }
.field .input {
  height: 88px; border-radius: var(--r-control); background: var(--surface); color: var(--ink);
  display: flex; align-items: center; padding: 0 32px; font-size: 38px; font-weight: 600; overflow: hidden; white-space: nowrap; cursor: text;
  transition: box-shadow 200ms var(--ease-out-strong);
}
.field .input .ph { color: #64748B; font-weight: 500; } /* 4,6:1 pada putih */
.field.is-active .input { box-shadow: inset 0 0 0 4px var(--brand-500), 0 0 0 6px rgba(98, 143, 244, .35); }
.field.is-active .input::after { content: ''; width: 4px; height: 48px; background: var(--brand-600); margin-left: 3px; animation: caret 1s steps(1) infinite; flex: none; }
@keyframes caret { 50% { opacity: 0; } }
.field.has-error .input { box-shadow: inset 0 0 0 4px var(--critical); animation: shake 320ms var(--ease-out-strong); }
@keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.field .err { height: 28px; margin-top: 6px; display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; color: #FCA5A5; }
.field .err .icon { width: 26px; height: 26px; }
.form-actions { display: flex; align-items: center; gap: 40px; margin: 8px 0 28px; }
/* Pemberitahuan persetujuan (menekan Kirim = setuju) */
.consent-note { flex: 1; display: flex; align-items: center; gap: 12px; margin: 0; padding: 0 8px; font-size: 21px; font-weight: 400; line-height: 1.3; color: var(--on-dark-soft); }
.consent-note .icon { width: 28px; height: 28px; flex: none; color: #4ADE80; }
.form-actions .btn-cta { min-width: 480px; min-height: 84px; }

.kbd { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-panel); background: var(--ground-2); }
.kbd-row { display: flex; gap: 10px; }
.kbd.swap .kbd-row { animation: kbd-in 180ms var(--ease-out-strong) both; }
@keyframes kbd-in { from { opacity: 0; transform: translateY(6px); } }
.key {
  flex: 1 1 0; height: 80px; min-width: 120px; border: 0; border-radius: var(--r-control); background: var(--surface); cursor: pointer;
  font-size: 38px; font-weight: 700; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 12px;
  transition: transform 100ms var(--ease-out-strong), background-color 100ms ease;
}
.key .icon { width: 44px; height: 44px; }
/* Tombol keyboard dipakai ratusan kali: umpan balik instan, tanpa animasi panjang */
.key:active, .key.is-pressed { background: var(--brand-100); transform: scale(.95); }
.key.wide { flex-grow: 1.6; } .key.wider { flex-grow: 2.4; } .key.space { flex-grow: 5; }
.key.fn { background: var(--brand-200); color: var(--primary-strong); font-size: 30px; }
.key.go { background: var(--brand-600); color: #fff; font-size: 30px; }
.key.go:active { background: var(--brand-700); }
.kbd-num { justify-content: center; }
.kbd-num .key { flex: 0 0 300px; }

/* ── Modal (satu-satunya yang melayang: boleh berbayang) ─────────────────── */
.modal { position: absolute; inset: 0; background: rgba(8, 16, 36, .72); display: grid; place-items: center; z-index: 50; animation: fade 200ms ease; }
@keyframes fade { from { opacity: 0; } }
.modal-card { width: 1000px; background: var(--surface); color: var(--ink); border-radius: var(--r-panel); padding: 64px; text-align: center;
  box-shadow: 0 40px 80px rgba(4, 10, 26, .45); animation: modal-in 280ms var(--ease-out-strong); }
@keyframes modal-in { from { transform: translateY(16px) scale(.97); opacity: 0; } }
.modal-card h2 { margin: 0 0 16px; font-family: var(--font-brand); font-size: 60px; font-weight: 700; letter-spacing: -.01em; }
.modal-card p { margin: 0 0 40px; font-size: 34px; font-weight: 500; color: var(--muted); }
.modal-count { font-size: 140px; font-weight: 800; line-height: 1; color: var(--brand-600); margin-bottom: 32px; }
.modal-actions { display: flex; gap: 32px; justify-content: center; }

/* ── Gerak ────────────────────────────────────────────────────────────────── */
#confetti { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
/* Gerak dikurangi: tanpa perpindahan; perubahan nada/opacity tetap ada */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .persona-card.flip { animation: fade 300ms both !important; }
}