/* =====================================================================
   PESTA RAKYAT 2026 — Tampilan Publik (nuansa Merah Putih, mobile-first)
   ===================================================================== */
:root{
  --merah:#C8102E; --merah-tua:#9E0B22; --merah-muda:#FCE9EC;
  --putih:#ffffff; --krem:#FFF8F6; --emas:#F5B700;
  --teks:#1F1416; --teks-2:#6B5A5D; --garis:#EFDCDF;
  --ok:#11845B; --err:#C8102E;
  --radius:16px; --shadow:0 10px 30px -12px rgba(158,11,34,.25);
  --nav-h:68px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--teks); background:var(--krem); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
}
a{color:var(--merah)}
button,input,select{font:inherit}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff; text-align:center;
  background:linear-gradient(160deg,var(--merah) 0%,var(--merah-tua) 100%);
  padding:28px 16px 64px;
}
.hero::after{ /* gelombang putih bawah = bendera */
  content:""; position:absolute; left:-5%; right:-5%; bottom:-40px; height:80px;
  background:var(--krem); border-radius:50% 50% 0 0;
}
.hero .confetti{position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(circle,#fff 1.5px,transparent 2px),radial-gradient(circle,var(--emas) 1.5px,transparent 2px);
  background-size:42px 42px,58px 58px; background-position:0 0,20px 14px}
.hero img{width:104px;height:104px;position:relative;filter:drop-shadow(0 8px 16px rgba(0,0,0,.25))}
.hero h1{position:relative;margin:10px 0 2px;font-size:1.65rem;font-weight:800;letter-spacing:.3px}
.hero p{position:relative;margin:0;opacity:.92;font-size:.92rem}
.hero .chips{position:relative;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.hero .chip{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 12px;font-size:.8rem;font-weight:600}

/* ---------- Kontainer & kartu ---------- */
.wrap{max-width:640px;margin:-36px auto 0;padding:0 16px;position:relative;z-index:2}
.card{background:var(--putih);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--garis);padding:20px}
.card + .card{margin-top:14px}
.card h2{margin:0 0 4px;font-size:1.2rem}
.muted{color:var(--teks-2);font-size:.88rem}
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Syarat & Ketentuan ---------- */
.sk{counter-reset:sk;margin-top:14px}
.sk-item{display:flex;gap:12px;padding:14px 0;border-top:1px dashed var(--garis)}
.sk-item:first-child{border-top:0}
.sk-ico{flex:0 0 38px;height:38px;border-radius:12px;background:var(--merah-muda);color:var(--merah);display:grid;place-items:center}
.sk-ico svg{width:20px;height:20px}
.sk-item h3{margin:0 0 4px;font-size:.98rem}
.sk-item p,.sk-item li{margin:0;font-size:.9rem;color:#3d2f31}
.sk-item ul{margin:6px 0;padding-left:18px}
.sk-item li{margin:2px 0}
.sk-sign{text-align:right;font-weight:800;color:var(--merah);margin-top:10px;letter-spacing:.5px}
.agree{display:flex;gap:12px;align-items:flex-start;background:var(--merah-muda);border-radius:12px;padding:14px;margin-top:16px;cursor:pointer}
.agree input{width:22px;height:22px;accent-color:var(--merah);flex:0 0 auto;margin-top:2px}
.agree span{font-size:.9rem;font-weight:600}

/* ---------- Tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border:0;border-radius:12px;padding:14px 18px;font-weight:700;font-size:1rem;cursor:pointer;
  background:var(--merah);color:#fff;transition:transform .1s,background .2s,opacity .2s;min-height:50px}
.btn:hover{background:var(--merah-tua)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.outline{background:#fff;color:var(--merah);border:2px solid var(--merah)}
.btn.outline:hover{background:var(--merah-muda)}
.btn svg{width:20px;height:20px}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.mt{margin-top:16px}

/* ---------- Formulir ---------- */
.field{margin-top:14px}
.field label{display:block;font-weight:700;font-size:.88rem;margin-bottom:6px}
.field label .req{color:var(--merah)}
.input{width:100%;border:1.5px solid var(--garis);background:#fff;border-radius:12px;padding:13px 14px;font-size:1rem;color:var(--teks);
  transition:border .15s,box-shadow .15s;min-height:50px;-webkit-appearance:none;appearance:none}
select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.input:focus{outline:0;border-color:var(--merah);box-shadow:0 0 0 4px rgba(200,16,46,.12)}
.field.invalid .input{border-color:var(--err);background:#FFF5F6}
.field .err{display:none;color:var(--err);font-size:.8rem;margin-top:5px;font-weight:600}
.field.invalid .err{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--garis);border-radius:12px;padding:12px;font-weight:700;cursor:pointer;margin:0;min-height:50px;background:#fff}
.seg input:checked + label{border-color:var(--merah);background:var(--merah-muda);color:var(--merah)}
.seg input:focus-visible + label{box-shadow:0 0 0 4px rgba(200,16,46,.15)}
.hint{font-size:.78rem;color:var(--teks-2);margin-top:5px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Tiket ---------- */
.ticket{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--garis);max-width:420px;margin:0 auto}
.ticket-head{background:linear-gradient(160deg,var(--merah),var(--merah-tua));color:#fff;padding:18px;display:flex;gap:12px;align-items:center}
.ticket-head img{width:58px;height:58px}
.ticket-head b{display:block;font-size:1.15rem}
.ticket-head small{opacity:.9}
.ticket-body{padding:20px 20px 6px;text-align:center}
.ticket-body .yth{font-size:.85rem;color:var(--teks-2);margin:0}
.ticket-body .nm{font-size:1.25rem;font-weight:800;margin:2px 0 12px;word-break:break-word}
.ticket-body .lbl{font-size:.8rem;color:var(--teks-2);margin:0}
.ticket-body .reg{font-size:2.4rem;font-weight:800;color:var(--merah);letter-spacing:0;margin:0 0 6px;font-variant-numeric:tabular-nums}
.ticket-body .congrats{font-size:.92rem;margin:4px 0 0}
.ticket-qr{display:flex;justify-content:center;padding:14px 0 6px}
.ticket-qr #qrbox{padding:10px;background:#fff;border:2px solid var(--merah-muda);border-radius:14px}
.ticket-qr #qrbox img,.ticket-qr #qrbox canvas{display:block;width:190px;height:190px}
.perf{position:relative;height:22px;margin:4px 0}
.perf::before{content:"";position:absolute;left:18px;right:18px;top:50%;border-top:2px dashed var(--garis)}
.perf::after,.perf span{content:"";position:absolute;top:0;width:22px;height:22px;border-radius:50%;background:var(--krem)}
.perf::after{right:-11px} .perf span{left:-11px}
.ticket-info{padding:2px 20px 16px;font-size:.88rem;display:grid;gap:8px}
.ticket-info div{display:flex;gap:10px;align-items:flex-start}
.ticket-info svg{width:18px;height:18px;color:var(--merah);flex:0 0 auto;margin-top:2px}
.ticket-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-top:1px solid var(--garis);font-size:.82rem}
.ticket-foot b{color:var(--merah)}
.ticket-flag{height:8px;background:linear-gradient(180deg,var(--merah) 50%,#fff 50%)}
.badge-ok{display:inline-flex;align-items:center;gap:6px;background:#E7F6EF;color:var(--ok);font-weight:700;font-size:.8rem;border-radius:999px;padding:4px 10px;margin-top:8px}
.success-banner{display:flex;gap:12px;align-items:center;background:#E7F6EF;color:#0b5e40;border-radius:14px;padding:14px;margin-bottom:14px;font-weight:600;font-size:.92rem}
.success-banner svg{width:28px;height:28px;flex:0 0 auto}

/* ---------- Navigasi bawah ---------- */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--garis);
  box-shadow:0 -8px 24px -12px rgba(0,0,0,.15);padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav .inner{max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);height:var(--nav-h)}
.bottom-nav button{background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--teks-2);font-size:.74rem;font-weight:700;cursor:pointer;position:relative}
.bottom-nav button svg{width:24px;height:24px}
.bottom-nav button.active{color:var(--merah)}
.bottom-nav button.active::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 4px 4px;background:var(--merah)}
.bottom-nav button.locked{opacity:.5}

/* ---------- Toast & loading ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 20px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);
  background:#1F1416;color:#fff;padding:12px 18px;border-radius:12px;font-size:.9rem;font-weight:600;opacity:0;pointer-events:none;
  transition:.25s;z-index:60;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--err)}
.spin{width:20px;height:20px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
footer.site{text-align:center;font-size:.78rem;color:var(--teks-2);padding:22px 16px 6px}

@media (max-width:380px){.grid2{grid-template-columns:1fr}.hero h1{font-size:1.4rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}