/* Tema kiosk Broadway — panggung sirkus (merah / emas / krem). */
:root{
  --red:#b00e1b; --red-deep:#5c0a10; --red-ink:#3d060b;
  --gold:#f5b700; --gold-deep:#c8940a;
  --cream:#fbf1de; --cream-2:#f3e3c4;
  --ink:#1a1210; --blue:#1f6feb; --blue-deep:#0f4bb0; --ok:#1f9d55;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:radial-gradient(120% 120% at 50% 0%,#2a0d10,#140608 70%);
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  align-items:stretch; justify-content:stretch; padding:0; color:#fff}

/* ---- frame mesin + lampu marquee (isi penuh jendela browser) ---- */
.machine{width:100%; flex:1; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#2a0d10,#1a0709); border-radius:0;
  padding:clamp(10px,1.6vw,20px);
  box-shadow:inset 0 0 0 2px rgba(245,183,0,.15)}
.screen-mount{position:relative; border-radius:16px; padding:14px;
  flex:1; min-height:0; display:flex}
.bulbs{position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:
    radial-gradient(circle,var(--gold) 0 2.2px,transparent 3px) 0 0/22px 22px,
    radial-gradient(circle,var(--gold) 0 2.2px,transparent 3px) 0 100%/22px 22px,
    radial-gradient(circle,var(--gold) 0 2.2px,transparent 3px) 0 0/22px 22px,
    radial-gradient(circle,var(--gold) 0 2.2px,transparent 3px) 100% 0/22px 22px;
  background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
  filter:drop-shadow(0 0 3px rgba(245,183,0,.8)); animation:chase 1.1s steps(2) infinite; opacity:.9}
@keyframes chase{50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.bulbs{animation:none}}

/* ---- layar ---- */
.screen{position:relative; flex:1; min-height:0; border-radius:8px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% -10%,#d21826 0%,var(--red) 42%,var(--red-deep) 100%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.35); display:flex}
.view{position:absolute; inset:0; padding:4% 5%; display:flex; flex-direction:column; width:100%}

.brandbar{display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:10px}
.brand .fb{font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.85;
  border-right:1px solid rgba(255,255,255,.35); padding-right:10px}
.brand .bw{font-family:Georgia,serif; font-weight:700; letter-spacing:.14em; color:var(--gold);
  text-shadow:0 1px 0 var(--gold-deep),0 0 12px rgba(245,183,0,.5); font-size:clamp(13px,2.1vw,20px)}
.stepdot{font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.8}

/* home */
.home{justify-content:center; align-items:stretch}
.home h2{font-family:Georgia,serif; margin:0; line-height:.95; text-transform:uppercase; letter-spacing:.02em}
.home .l1{font-size:clamp(16px,3.4vw,30px); color:var(--cream)}
.home .l2{font-size:clamp(34px,8vw,72px); color:var(--gold);
  text-shadow:0 3px 0 var(--gold-deep),0 0 26px rgba(245,183,0,.55)}
.home .sub{max-width:40ch; opacity:.92; line-height:1.5; font-size:clamp(11px,1.7vw,15px)}

/* hero: teks kiri + carousel wahana kanan */
.home-hero{flex:1; min-height:0; display:flex; align-items:center; gap:4%; margin-top:2%}
.hero-copy{flex:0 0 40%; text-align:left; display:flex; flex-direction:column; gap:10px}

/* carousel wahana */
.ridecar{flex:1; min-width:0; align-self:stretch; display:flex; flex-direction:column;
  justify-content:center; gap:12px; padding:2% 0}
.ridecar-stage{position:relative; flex:1; min-height:0; border-radius:20px; overflow:hidden;
  box-shadow:0 18px 34px -14px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.12)}
.ride-slide{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2%; text-align:center; padding:6% 8%;
  opacity:0; transform:scale(1.06); transition:opacity .6s ease, transform .6s ease}
.ride-slide.on{opacity:1; transform:none}
.ride-glow{position:absolute; inset:0;
  background:radial-gradient(90% 70% at 50% 32%,rgba(255,255,255,.28),transparent 60%);
  pointer-events:none}
.ride-emoji{font-size:clamp(60px,13vw,128px); line-height:1;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.35)); animation:ridefloat 4s ease-in-out infinite}
@keyframes ridefloat{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.ride-emoji{animation:none}}
.ride-slide figcaption{display:flex; flex-direction:column; gap:2px; position:relative}
.ride-name{font-family:Georgia,serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:clamp(15px,2.6vw,26px); color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.45)}
.ride-desc{font-size:clamp(10px,1.5vw,14px); color:rgba(255,255,255,.92);
  text-shadow:0 1px 4px rgba(0,0,0,.4)}
/* tema warna per slide (terasa seperti aneka wahana) */
.ride-slide.g0{background:radial-gradient(120% 100% at 50% -10%,#ff5a6a,#b00e1b 70%,#5c0a10)}
.ride-slide.g1{background:radial-gradient(120% 100% at 50% -10%,#4aa3ff,#1f6feb 60%,#0f3f8c)}
.ride-slide.g2{background:radial-gradient(120% 100% at 50% -10%,#37d6a6,#12987a 60%,#0a5a49)}
.ride-slide.g3{background:radial-gradient(120% 100% at 50% -10%,#c07bff,#7a34c9 60%,#4a1b80)}
.ride-slide.g4{background:radial-gradient(120% 100% at 50% -10%,#ffb648,#e8890f 60%,#9c5806)}
.ride-slide.g5{background:radial-gradient(120% 100% at 50% -10%,#ff7ac0,#d61f83 60%,#8a1155)}
.ridecar-dots{display:flex; gap:8px; justify-content:center}
.rdot{width:9px; height:9px; padding:0; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.22); transition:.2s}
.rdot.on{background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 10px rgba(245,183,0,.8); transform:scale(1.25)}

@media (max-width:560px){
  .home-hero{flex-direction:column; gap:2%; margin-top:0}
  .hero-copy{flex:0 0 auto; text-align:center; align-items:center}
  .home .sub{display:none}
  .ridecar{padding:0}
}

/* tombol emas */
.cta,button.cta{border:none; cursor:pointer; font:inherit; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; text-decoration:none; text-align:center;
  background:linear-gradient(180deg,#ffd23f,var(--gold)); color:var(--ink);
  border-radius:14px; padding:clamp(12px,2.2vw,18px) clamp(24px,5vw,48px); font-size:clamp(14px,2.4vw,22px);
  box-shadow:0 8px 0 var(--gold-deep),0 14px 22px rgba(0,0,0,.3); transition:.12s; display:inline-block}
.cta:hover{transform:translateY(-2px)}
.cta:active{transform:translateY(4px); box-shadow:0 4px 0 var(--gold-deep)}
/* tombol sekunder: bentuk & ukuran SAMA dgn .cta, beda warna (merah) */
.cta.ghost{background:linear-gradient(180deg,#cf2230,var(--red)); color:#fff;
  box-shadow:0 8px 0 var(--red-ink),0 14px 22px rgba(0,0,0,.3)}
.cta.ghost:active{box-shadow:0 4px 0 var(--red-ink)}

.vtitle{font-family:Georgia,serif; text-transform:uppercase; letter-spacing:.03em; margin:3% 0 2.5%;
  font-size:clamp(15px,2.6vw,26px); color:var(--cream)}
.vtitle small{display:block; font-family:'Segoe UI',sans-serif; font-weight:600; letter-spacing:.02em;
  text-transform:none; opacity:.8; font-size:.52em; margin-top:.3em}

/* paket */
.pkgs{display:grid; grid-template-columns:repeat(4,1fr); gap:2.2%; flex:1}
.pkg{position:relative; border-radius:14px; padding:6% 5%; display:flex; flex-direction:column; gap:4%;
  background:var(--cream); color:var(--ink); border:2px solid transparent; cursor:pointer; transition:.14s;
  text-decoration:none; text-align:center; align-items:center; justify-content:center}
.pkg:hover{transform:translateY(-4px); border-color:var(--gold)}
.pkg .plays{font-family:Georgia,serif; font-weight:700; font-size:clamp(34px,7.5vw,66px); line-height:.85; color:var(--red)}
.pkg .pname{font-weight:800; text-transform:uppercase; letter-spacing:.03em; font-size:clamp(14px,2.6vw,22px); line-height:1.1}
.pkg .price{margin-top:6%; font-weight:800; font-variant-numeric:tabular-nums; font-size:clamp(18px,3.2vw,30px); color:var(--red-ink)}
.pkg .price s{display:block; opacity:.5; font-weight:600; font-size:.62em; margin:0 0 2px}
.pkg.blue{background:linear-gradient(180deg,#eaf1ff,#d7e5ff); border-color:var(--blue)}
.pkg.blue .plays{color:var(--blue-deep)}
.tagpop{position:absolute; top:-10px; right:8px; background:var(--red); color:#fff; font-size:clamp(9px,1.4vw,12px); font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px}
.tagblue{position:absolute; top:-10px; right:8px; background:var(--blue); color:#fff; font-size:clamp(9px,1.4vw,12px); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px}
.vfoot{margin-top:2.5%; text-align:center; font-size:clamp(9px,1.4vw,12px); opacity:.9}

/* registrasi */
.reg{display:grid; grid-template-columns:1fr 1fr; gap:4%; flex:1; align-items:stretch}
.cam{background:#0c0405; border-radius:12px; border:1px solid rgba(255,255,255,.15); position:relative;
  display:flex; flex-direction:column; overflow:hidden}
.cam video,.cam canvas.snap-cv{width:100%; height:100%; object-fit:cover; flex:1; background:#241a16}
.cam .feedwrap{flex:1; position:relative; min-height:0}
.oval{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44%; aspect-ratio:3/4; border:3px dashed var(--gold); border-radius:50%; opacity:.85; pointer-events:none}
.facechk{position:absolute; left:0; right:0; bottom:0; padding:7px 10px; display:flex; align-items:center; gap:7px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.75)); font-size:clamp(9px,1.4vw,12px)}
.dot{width:8px; height:8px; border-radius:50%; background:#999}
.dot.ok{background:var(--ok); box-shadow:0 0 8px var(--ok)}
.dot.bad{background:#e0453b; box-shadow:0 0 8px #e0453b}
.cam .snapbtn{border:none; cursor:pointer; font:inherit; font-weight:700; font-size:clamp(10px,1.6vw,13px);
  background:var(--gold); color:var(--ink); padding:10px; letter-spacing:.04em; text-transform:uppercase}
.form{background:var(--cream); color:var(--ink); border-radius:12px; padding:4.5%; display:flex; flex-direction:column; gap:3.5%}
.fld{display:flex; flex-direction:column; gap:4px}
.fld label{font-size:clamp(9px,1.4vw,12px); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--red-deep)}
.fld input{background:#fff; border:1px solid #d9cbb2; border-radius:7px; padding:9px 11px;
  font-size:clamp(11px,1.7vw,15px); color:var(--ink); font-family:inherit}
.fld input:focus{outline:2px solid var(--gold); border-color:var(--gold)}
.stepper{display:flex; align-items:center; gap:10px}
.stepper button{width:34px; height:34px; border-radius:8px; border:none; background:var(--red); color:#fff;
  font-size:20px; font-weight:800; cursor:pointer; line-height:1}
.stepper .q{font-family:Georgia,serif; font-weight:700; font-size:clamp(16px,2.6vw,24px); min-width:28px; text-align:center}
.totrow{margin-top:auto; display:flex; align-items:baseline; justify-content:space-between;
  border-top:2px dashed #d9cbb2; padding-top:9px}
.totrow .k{font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:clamp(10px,1.5vw,13px)}
.totrow .v{font-family:Georgia,serif; font-weight:700; color:var(--red); font-variant-numeric:tabular-nums; font-size:clamp(16px,2.8vw,26px)}

/* pembayaran */
.pay{flex:1; display:grid; grid-template-columns:1.1fr 1fr; gap:5%; align-items:center}
.payinfo .amtk{font-size:clamp(10px,1.5vw,13px); text-transform:uppercase; letter-spacing:.14em; opacity:.85}
.payinfo .amt{font-family:Georgia,serif; font-size:clamp(26px,6vw,52px); color:var(--gold); line-height:1;
  text-shadow:0 2px 0 var(--gold-deep)}
.paylist{list-style:none; margin:5% 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.paylist li{display:flex; align-items:center; gap:9px; font-size:clamp(10px,1.6vw,13px)}
.paylist .b{width:6px; height:6px; border-radius:50%; background:var(--gold)}
.timer{margin-top:6%; display:inline-flex; align-items:center; gap:8px; background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:7px 14px; font-size:clamp(10px,1.5vw,13px)}
.timer .live{width:22px; height:22px; border-radius:50%; border:3px solid rgba(255,255,255,.22);
  border-top-color:var(--gold); animation:spin .8s linear infinite; flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.timer .live{animation:none}}
.qrcard{background:var(--cream); color:var(--ink); border-radius:14px; padding:5%; display:flex;
  flex-direction:column; align-items:center; gap:9px}
.qrbrand{display:flex; align-items:center; gap:7px; font-weight:800; font-size:clamp(11px,1.7vw,14px)}
.qrbrand .g{background:var(--ok); color:#fff; border-radius:5px; padding:2px 7px; font-size:.8em}
.qrcard img{width:clamp(120px,24vw,190px); height:auto; border-radius:6px; background:#fff}
.qrhint{font-size:clamp(8px,1.3vw,11px); color:#7a6; font-weight:700}

/* tiket */
.ticketwrap{flex:1; display:grid; grid-template-columns:1.15fr 1fr; gap:5%; align-items:center}
/* checkmark sukses beranimasi */
.success-check{position:relative; width:clamp(84px,14vw,124px); margin:0 0 4%}
.success-check svg{width:100%; height:auto; display:block;
  filter:drop-shadow(0 6px 16px rgba(34,181,115,.45))}
.success-check::before{content:""; position:absolute; inset:-6%; border-radius:50%;
  border:3px solid rgba(245,183,0,.7); opacity:0;
  animation:sc-ripple 1s .35s ease-out forwards}
.sc-bg{fill:#22b573; transform-origin:60px 60px; transform:scale(0);
  animation:sc-pop .45s cubic-bezier(.2,.8,.3,1.5) forwards}
.sc-tick{fill:none; stroke:#fff; stroke-width:9; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:90; stroke-dashoffset:90; animation:sc-draw .4s .38s ease-out forwards}
@keyframes sc-pop{to{transform:scale(1)}}
@keyframes sc-draw{to{stroke-dashoffset:0}}
@keyframes sc-ripple{0%{transform:scale(.65); opacity:.85} 100%{transform:scale(1.55); opacity:0}}
@media (prefers-reduced-motion:reduce){
  .sc-bg{transform:none; animation:none}
  .sc-tick{stroke-dashoffset:0; animation:none}
  .success-check::before{animation:none}
}

.tkmsg h2{font-family:Georgia,serif; text-transform:uppercase; color:var(--cream); margin:0 0 3%;
  letter-spacing:.02em; font-size:clamp(16px,3vw,28px)}
.tkmsg p{margin:0 0 5%; opacity:.9; line-height:1.5; font-size:clamp(11px,1.6vw,14px); max-width:34ch}
.ticket{background:var(--cream); color:var(--ink); border-radius:12px; position:relative; overflow:hidden;
  box-shadow:0 16px 30px rgba(0,0,0,.35)}
.ticket .top{background:var(--red); color:#fff; padding:5% 6%; display:flex; align-items:center; justify-content:space-between}
.ticket .top .bw{font-family:Georgia,serif; color:var(--gold); letter-spacing:.12em; font-weight:700; font-size:clamp(12px,2vw,17px)}
.ticket .top .pdf{font-size:9px; letter-spacing:.1em; text-transform:uppercase; background:rgba(0,0,0,.25); padding:3px 7px; border-radius:5px}
.perf{border-top:2px dashed #d9cbb2; position:relative}
.perf::before,.perf::after{content:""; position:absolute; top:-9px; width:16px; height:16px; border-radius:50%; background:var(--red)}
.perf::before{left:-8px} .perf::after{right:-8px}
.ticket .body{padding:5% 6%; display:grid; grid-template-columns:1fr auto; gap:6%; align-items:center}
.ticket .plays{font-family:Georgia,serif; font-weight:700; color:var(--red); font-size:clamp(20px,4vw,34px); line-height:.9}
.ticket .meta{font-size:clamp(9px,1.4vw,12px); line-height:1.7}
.ticket .meta b{color:var(--red-deep)}
.ticket .body img{width:clamp(64px,13vw,92px); height:auto}
.ticket .code{grid-column:1/-1; text-align:center; font-variant-numeric:tabular-nums; letter-spacing:.2em;
  font-weight:800; font-size:clamp(11px,1.9vw,15px); border-top:1px solid #d9cbb2; padding-top:4%}

/* strip banyak tiket (bundle 2×/3× → beberapa lembar) */
.ticketstrip{display:flex; flex-direction:column; gap:14px; max-height:82vh; overflow-y:auto; padding-right:6px}
.ticketstrip::-webkit-scrollbar{width:8px}
.ticketstrip::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3); border-radius:8px}
.ticketstrip .ticket{width:100%; flex:0 0 auto}
.tkdl{grid-column:1/-1; display:block; text-align:center; margin-top:3%; padding-top:4%;
  border-top:1px solid #d9cbb2; font-size:clamp(10px,1.5vw,12px); font-weight:700;
  color:var(--red-deep); text-decoration:none; letter-spacing:.02em}

.btnrow{display:flex; gap:10px; flex-wrap:wrap}

/* deck bawah layar: kredit developer (kiri) + tombol aksi (kanan) */
.deck{margin-top:14px; padding:2px 8px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap}
.devcredit{display:flex; align-items:center; gap:12px}
.devcredit img{height:40px; width:auto; display:block; filter:drop-shadow(0 3px 8px rgba(0,0,0,.55))}
.devcredit .dc-txt{display:flex; flex-direction:column; line-height:1.15}
.devcredit .dc-lbl{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62)}
.devcredit .dc-name{font-family:Georgia,serif; font-weight:800; letter-spacing:.1em;
  font-size:clamp(15px,2.1vw,19px); color:var(--gold); text-shadow:0 1px 0 var(--gold-deep),0 0 14px rgba(245,183,0,.4)}
.deck-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end}
.deck-actions:empty{display:none}
@media(max-width:640px){ .deck{justify-content:center; text-align:center} .deck-actions{justify-content:center} }

.error{background:rgba(0,0,0,.35); border:1px solid var(--gold); color:#fff; border-radius:10px;
  padding:10px 14px; font-size:13px; margin-top:10px}
a{color:inherit}

/* catatan kecil di panel pembayaran */
.paynote{margin-top:14px; background:rgba(0,0,0,.28); border:1px dashed var(--gold);
  border-radius:10px; padding:9px 12px; font-size:clamp(10px,1.4vw,12.5px); line-height:1.45; opacity:.95}

/* toast notifikasi (URL tersalin) */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:#111; color:#fff; border:1px solid var(--gold); border-radius:12px;
  padding:12px 20px; font-size:14px; font-weight:600; box-shadow:0 12px 30px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:.22s; z-index:50; max-width:90vw; text-align:center}
.toast.show{opacity:1; transform:translate(-50%,0)}