html, body.balai { height: auto; min-height: 100%; overflow: auto; background: var(--krem); }
body.balai { padding: 0 max(16px, var(--sa-r)) calc(32px + var(--sa-b)) max(16px, var(--sa-l)); }
.balai-atas { max-width: 720px; margin: 0 auto; padding: calc(18px + var(--sa-t)) 0 8px; display: grid; gap: 14px; }
.kembali { font-size: .85rem; font-weight: 600; color: var(--laut); text-decoration: none; }
.balai-judul { display: flex; gap: 14px; align-items: center; }
.balai-judul .logo { width: 48px; height: 48px; flex: none; }
.balai-judul small { color: var(--oranye); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }
.balai-judul h1 { font: 800 clamp(1.6rem, 5vw, 2.3rem)/1.05 var(--display); margin: 2px 0 0; letter-spacing: -.01em; }
.balai-main { max-width: 720px; margin: 0 auto; display: grid; gap: 18px; }
.stepper { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stepper li { font-size: .7rem; color: var(--redup); border-top: 4px solid var(--krem2); padding-top: 6px; line-height: 1.3; }
.stepper li b { color: var(--kayu); font-size: .78rem; }
.stepper li.ok { border-color: var(--sawah); }
.stepper li.on { border-color: var(--oranye); }
.stepper li.on b { color: var(--oranye); }
.loket { background: #fff; border-radius: 22px; padding: clamp(18px, 4vw, 28px); box-shadow: 0 10px 30px rgba(51,36,26,.08); display: grid; gap: 14px; }
.loket h2 { font: 800 1.45rem/1.15 var(--display); margin: 0; text-wrap: balance; }
.loket p { margin: 0; }
.tiket { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--krem); border: 2px dashed var(--krem2); border-radius: 14px; padding: 10px 16px; }
.tiket small { color: var(--redup); font-size: .72rem; display: block; }
.tiket b { font: 800 1.6rem var(--display); font-variant-numeric: tabular-nums; }
.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.perks div { background: var(--krem); border-radius: 14px; padding: 12px 14px; font-size: .85rem; }
.perks b { display: block; margin-bottom: 2px; }
.form { display: grid; gap: 12px; }
.f { display: grid; gap: 6px; font-weight: 600; font-size: .88rem; }
.in { border: 2px solid var(--krem2); border-radius: 12px; padding: 12px 14px; background: #fff; width: 100%; font-weight: 500; }
.in:focus { border-color: var(--oranye); outline: 0; }
.seg { display: inline-flex; background: var(--krem); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; font-weight: 700; font-size: .85rem; }
.seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 2px 6px rgba(51,36,26,.12); }
.pilihan { display: flex; flex-wrap: wrap; gap: 8px; }
.pilihan button { border: 2px solid var(--krem2); background: #fff; border-radius: 999px; padding: 7px 12px; font-size: .82rem; font-weight: 600; }
.pilihan button[aria-pressed="true"] { border-color: var(--oranye); background: #FFF3E8; color: #A2470F; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--kayu2); }
.chk input { margin-top: 3px; accent-color: var(--oranye); }
.baris-tombol { display: flex; flex-wrap: wrap; gap: 10px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.pesan { border-radius: 12px; padding: 10px 14px; font-size: .86rem; background: #FDECDC; color: #8A3B0E; }
.pesan.ok { background: #E5F1DC; color: #3F7A2A; }
.kode-besar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--kayu); color: var(--krem); border-radius: 16px; padding: 14px 14px 14px 22px; }
.kode-besar span { font: 800 clamp(1.8rem, 8vw, 2.6rem)/1 var(--display); letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.tunggu { display: flex; gap: 10px; align-items: center; font-size: .85rem; color: var(--redup); }
.tunggu i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--krem2); border-top-color: var(--oranye); animation: putar 1s linear infinite; flex: none; }
@keyframes putar { to { transform: rotate(360deg); } }
.pad-wrap { border: 2px dashed var(--krem2); border-radius: 16px; background: #FFFDF8; position: relative; }
.pad-wrap canvas { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; }
.pad-wrap .garis-ttd { position: absolute; left: 24px; right: 24px; bottom: 44px; border-bottom: 1px solid var(--krem2); pointer-events: none; }
.ktw-wrap { display: grid; gap: 14px; }
.ktw-wrap canvas { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 16px 40px rgba(51,36,26,.22); }
.balai-kaki { max-width: 720px; margin: 22px auto 0; color: var(--redup); font-size: .85rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .tunggu i { animation: none; } }
.balai-kaki a { color: var(--redup); }