/* Pride Console - landing page
   Satu tema gelap + aksen emas, mengikuti aplikasi. */

:root{
  --ink:#0d0e12; --panel:#16181f; --panel-2:#1e212a; --line:#2a2e39;
  --fg:#eceae4; --muted:#9a9ca6;
  --gold:#f2b636; --gold-2:#ffd75e; --gold-ink:#1a1503;
  --ok:#4fd18b; --bad:#ff6b5e; --idle:#6b7080; --info:#6aa8ff;
  --f-display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --f-body:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --f-board:"Orbitron","Bricolage Grotesque",system-ui,sans-serif;
  --r:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.6;margin:0}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:clamp(28px,4.2vw,44px);font-weight:800}
h3{font-size:20px;font-weight:700}
p{margin:0}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:20px}
section{padding-block:88px;border-top:1px solid var(--line)}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.lead{color:var(--muted);font-size:18px;max-width:60ch}
.sec-head{display:grid;gap:14px;margin-bottom:40px;max-width:760px}
.num{font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;padding:12px 20px;border-radius:10px;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;color:var(--fg);background:transparent;transition:filter .15s,border-color .15s,background .15s}
.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-gold:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line)}
.btn-ghost:hover{border-color:var(--muted)}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.btn:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* mockup bar + catatan */

/* nav */
nav.top{border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.logo{font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.logo i{width:26px;height:26px;border-radius:7px;background:var(--gold);display:grid;place-items:center;color:var(--gold-ink);font-style:normal;font-size:13px}
.logo span{color:var(--gold)}
.navlinks{display:flex;gap:26px;font-size:14.5px;color:var(--muted)}
.navlinks a{text-decoration:none}.navlinks a:hover{color:var(--fg)}
.navcta{display:flex;gap:10px}
.navcta .btn{padding:9px 14px;font-size:14px}
@media (max-width:880px){.navlinks{display:none}.navcta .btn-ghost{display:none}}

/* hero: tagline bergilir + sebelum/sesudah */
.hero{padding-block:48px 80px;border-top:0;overflow:hidden}
.hero h1{font-size:clamp(38px,5.4vw,64px);font-weight:800}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.chips{display:flex;gap:8px 18px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.chips span::before{content:"✓ ";color:var(--ok);font-weight:700}
.hv3{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.h3-copy{display:grid;gap:22px;min-width:0}
.h3-title{min-height:3.3em}
.h3-title span,.h3-title em{display:inline;transition:opacity .35s,filter .35s}
.h3-title.swap span,.h3-title.swap em{opacity:0;filter:blur(6px)}
.h3-wrap{display:grid;gap:14px;min-width:0}
.h3-compare{position:relative;aspect-ratio:5/4;max-width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line);user-select:none}
.h3-side{position:absolute;inset:0}
.h3-before{background:repeating-linear-gradient(#efe7d4 0 27px,#c9d6e8 27px 28px),#efe7d4}
.h3-after{background:radial-gradient(120% 100% at 100% 0%,rgba(242,182,54,.14),transparent 60%),var(--panel);clip-path:inset(0 0 0 var(--pos))}
.slide{position:absolute;inset:0;display:grid;place-items:center;padding:12% 7% 7%;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s;pointer-events:none}
.slide.on{opacity:1;transform:none}
.h3-tag{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:#3a2a1a;color:#f4ead6;padding:3px 9px;border-radius:6px}
.h3-tag.ok{left:auto;right:14px;background:var(--gold);color:var(--gold-ink)}
.paper{width:100%;max-width:380px;display:grid;gap:4px;transform:rotate(-2deg);color:#2b3a67}
.hand{font-family:"Caveat","Comic Sans MS",cursive;font-size:clamp(18px,2.4vw,25px);line-height:1.15}
.hand:first-child{font-size:clamp(22px,3vw,31px);font-weight:700;text-decoration:underline}
.hand s{color:#b33}
.hand.total{color:#c0392b;font-weight:700;font-size:clamp(22px,2.8vw,30px);margin-top:6px}
.hand.note-r{justify-self:end;color:#7a5a2a}
.hand.stamps{letter-spacing:.15em;color:#2b3a67}
.sumcard{width:100%;max-width:360px;background:var(--panel-2);border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:10px;box-shadow:0 20px 50px -20px #000}
.sc-h{display:grid;gap:2px;border-bottom:1px solid var(--line);padding-bottom:10px}
.sc-h b{font-family:var(--f-display);font-size:20px}.sc-h span{font-size:12.5px;color:var(--muted)}
.sc-r{display:flex;justify-content:space-between;gap:10px;font-size:14.5px}
.sc-r span{color:var(--muted)}.sc-r b{font-family:var(--f-mono)}
.sc-r .down{color:var(--bad);font-size:11px;margin-left:4px}
.sc-r.big{border-top:1px solid var(--line);padding-top:10px;font-size:17px}
.sc-r b.ok{color:var(--ok)}
.sc-time{font-size:12px;color:var(--gold);font-family:var(--f-mono)}
.sc-big{font-family:var(--f-display);font-weight:800;font-size:32px;color:var(--ok)}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:70px}
.bars i{display:block;background:var(--line);border-radius:4px 4px 0 0}
.bars i.today{background:var(--gold)}
.lockscr{display:grid;justify-items:center;gap:4px;text-align:center;background:radial-gradient(ellipse at 50% 40%,#1a1608,#0b0c10 70%);border:8px solid #17191f;border-radius:10px;aspect-ratio:16/9;align-content:center}
.lockscr svg{width:30px}
.lockscr b{font-family:var(--f-board);font-weight:900;color:var(--gold);letter-spacing:.08em;font-size:18px}
.lockscr span{font-size:11.5px;color:var(--muted);font-family:var(--f-mono)}
.mini-mcard{aspect-ratio:1.586;border-radius:14px;padding:16px;display:grid;grid-template-rows:auto 1fr auto;color:var(--gold-ink);background:linear-gradient(135deg,#ffe08a,#f2b636 45%,#b9821a)}
.mini-mcard>span{font-family:var(--f-board);font-weight:900;font-size:12px;letter-spacing:.08em}
.mini-mcard>b{font-family:var(--f-mono);font-size:22px;letter-spacing:.12em;align-self:center}
.mini-mcard div{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600}
.h3-compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:5}
.h3-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--gold);z-index:4;pointer-events:none;box-shadow:0 0 18px rgba(242,182,54,.6)}
.h3-handle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;font-style:normal;font-weight:800;box-shadow:0 6px 20px -4px #000}
.h3-compare:focus-within .h3-handle i{outline:2px solid #fff;outline-offset:3px}
.h3-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.h3-tabs button{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:9px;padding:9px 4px;font:600 13px var(--f-body);cursor:pointer}
.h3-tabs button[aria-selected=true]{color:var(--fg);border-color:var(--gold)}
.h3-tabs button i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--gold)}
.h3-tabs button[aria-selected=true] i{animation:tabprog var(--dur,6s) linear forwards}
.h3-wrap.paused .h3-tabs button i{animation-play-state:paused}
@keyframes tabprog{to{width:100%}}
@media (max-width:920px){.hv3{grid-template-columns:1fr;gap:32px}.h3-title{min-height:0}}
@media (max-width:480px){.h3-compare{aspect-ratio:4/5}}
@media (prefers-reduced-motion:reduce){.slide,.h3-title span,.h3-title em{transition:none}.h3-tabs button i{animation:none!important}}

/* ======= panggung demo ======= */
.demo{display:grid;grid-template-columns:330px 1fr;gap:40px;align-items:start}
@media (max-width:900px){.demo{grid-template-columns:1fr}}
.demo-label{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.demo-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(79,209,139,.2)}
.phone{background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:16px;display:grid;gap:12px;box-shadow:0 24px 60px -24px #000;min-width:0}
.ph-h{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);font-family:var(--f-mono)}
.ph-title{font-weight:800;font-size:15px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg button{background:var(--panel-2);border:1px solid var(--line);color:var(--fg);border-radius:9px;padding:9px 4px;font:600 13px var(--f-body);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.row span{color:var(--muted)}
.row b{font-family:var(--f-mono)}
.div{border-top:1px dashed var(--line)}
.ctrl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ctrl .btn{padding:10px 8px;font-size:13.5px}
.smalllbl{font-size:12px;color:var(--muted);font-weight:600}
.pill{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:2px 8px}
.pill.on{background:rgba(79,209,139,.15);color:var(--ok)}
.pill.end{background:rgba(255,107,94,.15);color:var(--bad)}
.pill.idle{background:rgba(107,112,128,.2);color:var(--idle)}
.pill.pause{background:rgba(106,168,255,.15);color:var(--info)}
.hint{font-size:13px;color:var(--muted)}
.hint b{color:var(--gold)}

/* TV */
.tv-wrap{display:grid;gap:14px;min-width:0}
.tv-stage{position:relative;padding:6px 6px 26px}
.tv-glow{position:absolute;inset:4% 2% 10%;border-radius:40px;filter:blur(46px);opacity:0;transition:opacity .8s;background:conic-gradient(from 200deg,#ff3d9a,#7b5cff,#2ee6ff,#ffb13d,#ff3d9a);animation:glowspin 8s linear infinite}
@keyframes glowspin{to{filter:blur(46px) hue-rotate(360deg)}}
.tv-stage.lit .tv-glow{opacity:.55}
.tv-stage.amber .tv-glow{opacity:.28;background:radial-gradient(closest-side,#f2b636,transparent);animation:none}
.tv{background:#000;border:12px solid #17191f;border-bottom-width:18px;border-radius:16px;aspect-ratio:16/9;max-width:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #2a2d35,0 20px 40px -20px #000;z-index:1}
.tv::before{content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);width:34px;height:4px;border-radius:2px;background:#2a2d35;z-index:9}
.tv-stand{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:28%;height:20px;background:linear-gradient(#1b1d23,#0f1014);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);z-index:0}
.tv-led{position:absolute;right:16%;bottom:23px;width:6px;height:6px;border-radius:50%;background:var(--bad);box-shadow:0 0 8px var(--bad);z-index:2;transition:.3s}
.tv-stage.lit .tv-led{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.scr{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .5s}
.scr.off{background:radial-gradient(ellipse at 30% 20%,#15171d,#050507 70%)}
.scr.game{opacity:0;background:#120726}
.scr.game canvas{width:100%;height:100%;display:block}
.scanlines{position:absolute;inset:0;pointer-events:none;z-index:6;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:6;box-shadow:inset 0 0 60px rgba(0,0,0,.7);border-radius:6px}
.scr.boot{z-index:5;opacity:0;pointer-events:none;background:#000}
.scr.boot .beam{position:absolute;left:0;right:0;top:50%;height:100%;transform:translateY(-50%) scaleY(.004) scaleX(0);background:#fff;box-shadow:0 0 30px 6px #bfe3ff}
.scr.boot .splash{position:relative;display:grid;gap:6px;justify-items:center;text-align:center;opacity:0}
.scr.boot .splash .lg{font-family:var(--f-board);font-weight:900;letter-spacing:.12em;font-size:clamp(16px,3vw,30px);color:var(--gold);text-shadow:0 0 18px rgba(242,182,54,.7)}
.scr.boot .splash .sub{font-family:var(--f-mono);font-size:clamp(10px,1.4vw,13px);color:#cfe6ff;letter-spacing:.2em}
.scr.boot .splash .ld{width:120px;max-width:40%;height:4px;border-radius:4px;background:#222;overflow:hidden;margin-top:6px}
.scr.boot .splash .ld i{display:block;height:100%;width:0;background:var(--gold)}
.tv.booting .scr.boot{opacity:1;transition:none}
.tv.booting .scr.boot .beam{animation:beam 1.6s cubic-bezier(.2,.8,.2,1) forwards}
.tv.booting .scr.boot .splash{animation:splash 1.6s .55s forwards}
.tv.booting .scr.boot .splash .ld i{animation:load 1s .7s ease-in-out forwards}
@keyframes beam{0%{transform:translateY(-50%) scaleY(.004) scaleX(0);opacity:1}18%{transform:translateY(-50%) scaleY(.004) scaleX(1);opacity:1}38%{transform:translateY(-50%) scaleY(1) scaleX(1);opacity:1}55%{opacity:0}100%{opacity:0;transform:translateY(-50%) scaleY(1) scaleX(1)}}
@keyframes splash{0%{opacity:0;transform:scale(.9)}20%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.04)}}
@keyframes load{to{width:100%}}
.tv.shutting .scr.boot{opacity:1;transition:none;background:transparent}
.tv.shutting .scr.game{animation:crtoff .55s cubic-bezier(.6,0,.9,.4) forwards;opacity:1}
@keyframes crtoff{0%{transform:scale(1);filter:brightness(1)}45%{transform:scaleY(.006) scaleX(1);filter:brightness(4)}100%{transform:scaleY(.006) scaleX(0);filter:brightness(6)}}
.hud{position:absolute;top:10px;right:10px;z-index:7;display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:4px 10px;font-family:var(--f-mono);font-size:clamp(11px,1.5vw,14px);backdrop-filter:blur(4px)}
.hud::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok)}
.hud.low{color:var(--bad);border-color:var(--bad);animation:hudblink 1s steps(2) infinite}
.hud.low::before{background:var(--bad);box-shadow:0 0 6px var(--bad)}
@keyframes hudblink{50%{opacity:.55}}
.toast{position:absolute;left:50%;bottom:12%;z-index:7;transform:translate(-50%,20px);background:rgba(13,14,18,.92);border:1px solid var(--gold);color:var(--fg);border-radius:10px;padding:8px 14px;font-size:clamp(11px,1.5vw,14px);opacity:0;transition:.35s;max-width:80%;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.scr.pause{z-index:4;background:rgba(5,8,14,.6);backdrop-filter:grayscale(1) blur(2px);opacity:0;font-family:var(--f-board);font-weight:900;letter-spacing:.1em;font-size:clamp(16px,3vw,28px);color:var(--info)}
.scr.lock{background:radial-gradient(ellipse at 50% 40%,#1a1608,#0b0c10 65%);opacity:0;text-align:center;align-content:center;gap:8px;padding:8%}
.scr.lock .padlock{width:clamp(28px,5vw,44px);justify-self:center;margin-bottom:4px}
.tv[data-s=locked] .scr.lock .padlock{animation:slam .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes slam{from{transform:translateY(-30px) scale(1.4);opacity:0}}
.scr.lock .lg{font-family:var(--f-board);font-weight:900;font-size:clamp(14px,2.4vw,24px);color:var(--gold);letter-spacing:.06em}
.scr.lock .t{font-size:clamp(11px,1.5vw,15px);color:var(--muted)}
.scr.lock .st{font-family:var(--f-mono);font-size:clamp(10px,1.3vw,13px);border:1px solid var(--line);border-radius:6px;padding:3px 10px;justify-self:center}
.tv[data-s=on] .scr.game,.tv[data-s=pause] .scr.game,.tv[data-s=pause] .scr.pause,.tv[data-s=locked] .scr.lock{opacity:1}
.tv.booting .scr.game{opacity:0}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--fg);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.mode svg{grid-row:1/3;width:30px;height:30px}
.mode b{font-size:15px}
.mode span{color:var(--muted);font-size:12.5px;line-height:1.35}
.mode[aria-pressed=true]{border-color:var(--gold);background:rgba(242,182,54,.08)}
.mode:disabled{cursor:not-allowed;opacity:.55}
.mode-facts{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted)}
.mode-facts span::before{content:"✓ ";color:var(--ok);font-weight:700}
.mode-facts span.no::before{content:"✕ ";color:var(--idle)}
@media (max-width:520px){.modes{grid-template-columns:1fr}}
.plugdev{position:absolute;left:3%;bottom:0;z-index:3;display:none;align-items:end;gap:6px}
.tv-stage.plugmode .plugdev{display:flex}
.tv-stage.plugmode{padding-bottom:70px}
.tv-stage.plugmode .tv-stand{bottom:48px}
.tv-stage.plugmode .tv-led{bottom:67px}
.plugdev .cord{width:46px;height:20px;border-bottom:3px solid #2a2d35;border-left:3px solid #2a2d35;border-radius:0 0 0 12px;margin-bottom:12px}
.plugdev .body{width:44px;height:52px;border-radius:12px;background:linear-gradient(#f4f4f2,#d9dbe0);border:1px solid #9aa0aa;position:relative;display:grid;place-items:center;box-shadow:0 8px 18px -8px #000}
.plugdev .body::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid #b8bcc4}
.plugdev .body i{position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:#555;transition:.25s}
.plugdev.on .body i{background:#4fd18b;box-shadow:0 0 8px #4fd18b}
.plugdev .lbl{align-self:center;white-space:nowrap;margin-left:4px;font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.plugdev.click .body{animation:click .35s}
@keyframes click{40%{transform:scale(.92)}}
.plugdev .spark{position:absolute;top:-8px;left:50%;width:2px;height:2px;border-radius:50%;box-shadow:0 0 0 0 rgba(79,209,139,.7);opacity:0}
.plugdev.click .spark{animation:spark .6s}
@keyframes spark{0%{opacity:1;box-shadow:0 0 0 0 rgba(79,209,139,.7)}100%{opacity:0;box-shadow:0 0 0 26px rgba(79,209,139,0)}}
.tv.plugmode .scr.boot .splash .lg{color:#fff;text-shadow:0 0 14px rgba(110,170,255,.8);letter-spacing:.2em}
.tv-meta{display:flex;gap:10px 22px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.tv-meta b{font-family:var(--f-mono);color:var(--fg)}
.log{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-family:var(--f-mono);font-size:12.5px;color:var(--muted);display:grid;gap:4px;max-height:130px;overflow:auto}
.log div b{color:var(--gold);font-weight:500}

/* cafe */
.menu{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mi{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px;text-align:left;color:var(--fg);font:600 13.5px var(--f-body);cursor:pointer;display:grid;gap:2px}
.mi:hover{border-color:var(--gold)}
.mi small{color:var(--muted);font-weight:500;font-family:var(--f-mono);font-size:11px}
.mi:disabled{opacity:.4;cursor:not-allowed}
.bill{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:12px;min-width:0}
.bill-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bill-h b{font-family:var(--f-display);font-size:22px}
.bill-line{display:grid;grid-template-columns:1fr auto auto;gap:12px;font-size:14.5px;align-items:center}
.bill-line span{color:var(--muted);font-family:var(--f-mono);font-size:13px}
.bill-line b{font-family:var(--f-mono);font-weight:500}
.bill-line.new{animation:flash 1s}
@keyframes flash{from{background:rgba(242,182,54,.18)}to{background:transparent}}
.total{display:flex;justify-content:space-between;font-family:var(--f-display);font-weight:800;font-size:26px;border-top:1px solid var(--line);padding-top:12px}
.stock{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sk{background:var(--panel-2);border-radius:10px;padding:10px;display:grid;gap:4px;font-size:12px;color:var(--muted)}
.sk b{font-family:var(--f-mono);font-size:18px;color:var(--fg)}
.sk.low b{color:var(--bad)}
.bar{height:5px;border-radius:9px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;background:var(--ok);transition:width .3s}
.sk.low .bar i{background:var(--bad)}
.split{display:grid;gap:8px}
.split input{width:100%;accent-color:var(--gold)}
.paid{background:rgba(79,209,139,.1);border:1px solid rgba(79,209,139,.4);color:var(--ok);border-radius:10px;padding:10px 12px;font-size:14px}
@media (max-width:560px){.stock{grid-template-columns:1fr 1fr}}

/* membership */
.pkgs{display:grid;gap:8px}
.pkg{display:grid;grid-template-columns:1fr auto;gap:2px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;color:var(--fg);font:inherit;text-align:left}
.pkg[aria-pressed=true]{border-color:var(--gold);background:rgba(242,182,54,.08)}
.pkg b{font-size:14.5px}.pkg span{color:var(--muted);font-size:12.5px}.pkg em{font-style:normal;font-family:var(--f-mono);font-size:13px;grid-row:1/3;grid-column:2;align-self:center}
.mdemo{display:grid;gap:28px 32px;align-items:start}
.mdemo>div{min-width:0;display:grid;gap:14px;align-content:start}
.m-phone{grid-area:phone}.m-card{grid-area:card}.m-side{grid-area:side}
.mdemo[data-layout=c]{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"phone phone" "card side"}
.mdemo[data-layout=c] .phone{grid-template-columns:1fr 1fr 1fr;align-items:center}
.mdemo[data-layout=c] .phone>.ph-h{grid-column:1/-1}
.mdemo[data-layout=c] .phone .pkgs{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
.mdemo[data-layout=c] .phone .div,.mdemo[data-layout=c] .phone .smalllbl{display:none}
.mdemo[data-layout=c] .phone .ctrl{grid-column:2/3}
@media (max-width:1040px){
  .mdemo[data-layout=c]{grid-template-columns:minmax(0,1fr);grid-template-areas:"phone" "card" "side"}
}
@media (max-width:720px){
  .mdemo[data-layout=c] .phone{grid-template-columns:1fr}
  .mdemo[data-layout=c] .phone .pkgs{grid-template-columns:1fr}
  .mdemo[data-layout=c] .phone .ctrl{grid-column:auto}
}
.mcard{aspect-ratio:1.586;width:100%;max-width:100%;border-radius:20px;padding:clamp(18px,2.4vw,28px);display:grid;grid-template-rows:auto 1fr auto;color:var(--gold-ink);container-type:inline-size;
  background:linear-gradient(135deg,#ffe08a 0%,#f2b636 42%,#b9821a 100%);box-shadow:0 30px 60px -30px rgba(242,182,54,.6);position:relative;overflow:hidden;transition:transform .5s}
.mcard::before{content:"";position:absolute;right:-12%;bottom:-30%;width:70%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(26,21,3,.12);box-shadow:0 0 0 22px rgba(26,21,3,.05),0 0 0 48px rgba(26,21,3,.04)}
.mcard::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 45%,transparent 60%);transform:translateX(-100%);transition:transform 1.2s}
.mcard.shine::after{transform:translateX(100%)}
.mcard:hover{transform:rotate(-1deg) translateY(-3px)}
.mcard.empty{background:repeating-linear-gradient(135deg,var(--panel) 0 12px,var(--panel-2) 12px 24px);color:var(--muted);box-shadow:none;border:1px dashed var(--line)}
.mcard.empty::before{display:none}
.mcard .top{display:flex;justify-content:space-between;align-items:start;position:relative}
.mcard .brand{font-family:var(--f-board);font-weight:900;font-size:clamp(12px,4.2cqi,18px);letter-spacing:.08em}
.mcard .tier{display:block;font-family:var(--f-mono);font-size:clamp(10px,3cqi,13px);font-weight:700;letter-spacing:.14em;margin-top:4px;opacity:.75}
.mcard .chip{width:clamp(36px,10cqi,52px);aspect-ratio:4/3;border-radius:7px;background:linear-gradient(135deg,#fff3c4,#c9962a);border:1px solid rgba(26,21,3,.3)}
.mcard.empty .chip{background:var(--line);border:0}
.mcard .code{font-family:var(--f-mono);font-weight:700;font-size:clamp(18px,7.5cqi,38px);letter-spacing:.12em;align-self:center;position:relative}
.mcard.empty .code{font-size:clamp(14px,5cqi,26px)}
.mcard .bottom{display:flex;justify-content:space-between;align-items:end;gap:10px;font-size:clamp(11px,2.8cqi,13px);position:relative}
.mcard .bottom b{display:block;font-size:clamp(14px,4cqi,19px)}
.mcard .saldo{text-align:right}
.mcard .saldo b{font-family:var(--f-mono);font-size:clamp(18px,6cqi,30px)}
.saldobar{height:8px;border-radius:9px;background:var(--line);overflow:hidden}
.saldobar i{display:block;height:100%;background:var(--gold);transition:width .6s}
.saldo-cap{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);font-family:var(--f-mono)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:2px}
.kpi span{font-size:12px;color:var(--muted)}
.kpi b{font-family:var(--f-display);font-size:24px;font-weight:800}
.kpi.wide{grid-column:1/-1;background:linear-gradient(135deg,rgba(79,209,139,.1),var(--panel) 60%)}
.kpi.wide b{color:var(--ok);font-size:28px}
.ledger{display:grid;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px 14px;min-height:56px}
.ledger:empty::before{content:"Riwayat transaksi muncul di sini.";color:var(--muted);font-size:13px;padding-block:16px}
.lg-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding-block:9px;border-bottom:1px solid var(--line);font-size:13.5px;animation:rowin .35s}
.lg-row:last-child{border-bottom:0}
@keyframes rowin{from{opacity:0;transform:translateY(-6px)}}
.lg-row .tt{font-family:var(--f-mono);font-size:10.5px;border-radius:5px;padding:1px 6px}
.tt.buy{background:rgba(79,209,139,.15);color:var(--ok)}.tt.use{background:rgba(255,107,94,.15);color:var(--bad)}
.lg-row b{font-family:var(--f-mono)}
.lg-row b.plus{color:var(--ok)}.lg-row b.min{color:var(--bad)}
/* ======= live status ======= */
.style-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;gap:8px;margin-bottom:18px}
.style-tabs button{display:grid;gap:2px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--fg);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.style-tabs button b{font-size:14.5px}
.style-tabs button span{font-size:12.5px;color:var(--muted);line-height:1.35}
.style-tabs button[aria-pressed=true]{border-color:var(--gold);background:rgba(242,182,54,.08)}
.status-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px;align-items:start}
@media (max-width:960px){.status-grid{grid-template-columns:1fr}}
.stage-st{min-width:0}
.sv{display:none}
.stage-st[data-sv=cards] .sv-cards,.stage-st[data-sv=list] .sv-list,.stage-st[data-sv=bar] .sv-bar,.stage-st[data-sv=bio] .sv-bio{display:block}
.board,.wlist,.wbar,.wbio{--b-bg:#050505;--b-fg:#ffffff;--b-acc:#ffd400;--b-card:#ffd400;--b-card-ink:#141100;--b-dim:#2b2b2b}
.site{border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0}
.site-bar{display:flex;gap:8px;align-items:center;background:var(--panel-2);padding:8px 12px;border-bottom:1px solid var(--line)}
.site-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.site-bar span{flex:1;background:var(--ink);border-radius:6px;padding:3px 10px;font-family:var(--f-mono);font-size:12px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* gaya 1: papan kartu */
.board{padding:30px 24px 26px;background:var(--b-bg);color:var(--b-fg);display:grid;gap:22px;transition:background .3s}
.board .bh{text-align:center;display:grid;gap:6px}
.board .bh small{font-family:var(--f-board);font-size:11px;letter-spacing:.35em;color:var(--b-acc)}
.board .bh h4{margin:0;font-family:var(--f-board);font-weight:900;font-size:clamp(22px,3.6vw,34px);letter-spacing:.04em}
.board .bh h4 span{color:var(--b-acc)}
.board .count{display:flex;gap:14px;align-items:center}
.board .count strong{font-family:var(--f-board);font-weight:900;font-size:clamp(46px,7vw,72px);line-height:.9;color:var(--b-acc)}
.board .count div{font-family:var(--f-board);font-weight:700;font-size:clamp(12px,1.8vw,16px);line-height:1.25}
.board .count p{font-size:12.5px;opacity:.7;font-family:var(--f-body);font-weight:500;margin-top:4px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px}
.tile{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));background:var(--b-card);color:var(--b-card-ink);padding:12px 12px 10px;display:grid;gap:4px;min-height:96px;transition:background .4s,color .4s}
.tile .tp{font-family:var(--f-board);font-size:9px;font-weight:700;background:rgba(0,0,0,.14);justify-self:start;padding:2px 6px}
.tile .nm{font-family:var(--f-board);font-weight:700;font-size:13px}
.tile .ss{font-family:var(--f-board);font-weight:900;font-size:11.5px;letter-spacing:.04em;align-self:end}
.tile .eta{font-family:var(--f-mono);font-size:10.5px;opacity:.8}
.tile.busy{background:var(--b-dim);color:var(--b-fg)}
.tile.busy .tp{background:rgba(255,255,255,.1)}
.tile.busy .ss{color:var(--bad)}
.tile.pause .ss{color:var(--info)}
.board .foot{font-size:11.5px;opacity:.55}
/* gaya 2: daftar ringkas di website terang */
.cs-light{background:#faf7f2;color:#2a2622;display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px;padding:22px}
.cs-light .art{display:grid;gap:12px;align-content:start}
.cs-light .art .nav{display:flex;justify-content:space-between;align-items:center;font:700 15px Georgia,"Times New Roman",serif}
.cs-light .art .nav span{font:500 12px var(--f-body);color:#8a8178}
.cs-light .art .img{aspect-ratio:16/10;border-radius:10px;background:radial-gradient(circle at 30% 60%,#1f7a4a 0 18%,transparent 19%),radial-gradient(circle at 62% 40%,#c0392b 0 6%,transparent 7%),radial-gradient(circle at 72% 58%,#f1c40f 0 6%,transparent 7%),linear-gradient(135deg,#17643c,#0f4a2b);box-shadow:inset 0 0 0 10px #6b3d1f}
.cs-light .art h5{margin:0;font:700 22px Georgia,serif}
.cs-light .art p{font-size:13.5px;color:#6f675e}
.cs-light .art .ln{height:9px;border-radius:5px;background:#ece5da}
.wlist{background:var(--b-bg);color:var(--b-fg);border-radius:14px;border:1px solid var(--b-dim);padding:14px;display:grid;gap:10px;align-content:start;font-family:var(--f-body)}
.wlist .wh{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:14px}
.wlist .wh i{font-style:normal;font-size:11px;font-weight:700;color:var(--b-acc);display:flex;align-items:center;gap:5px}
.wlist .wh i::before{content:"";width:7px;height:7px;border-radius:50%;background:#2fbf71;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.wlist .sum{font-size:13px;opacity:.75}
.wlist .sum b{color:var(--b-acc);font-size:15px;opacity:1}
.wlist ul{list-style:none;margin:0;padding:0;display:grid;max-height:330px;overflow:auto}
.wlist li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-block:7px;border-top:1px solid var(--b-dim);font-size:13px}
.wlist li small{display:block;font-size:10.5px;opacity:.6}
.st-pill{font-size:10.5px;font-weight:800;border-radius:99px;padding:2px 9px;white-space:nowrap}
.st-pill.free{background:#2fbf71;color:#fff}
.st-pill.busy{background:var(--b-dim);color:var(--b-fg)}
.st-pill.pause{background:#4a7bd6;color:#fff}
/* gaya 3: bar di atas website */
.cs-dark2{background:#0c1220;color:#e8edf7}
.wbar{background:var(--b-card);color:var(--b-card-ink);display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 18px;font-size:13.5px;font-weight:700}
.wbar .big{font-family:var(--f-display);font-size:18px;font-weight:800}
.wbar .dots{display:flex;gap:4px}
.wbar .dots i{width:10px;height:10px;border-radius:3px;background:rgba(0,0,0,.25)}
.wbar .dots i.free{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.wbar .types{display:flex;gap:6px;flex-wrap:wrap}
.wbar .types span{background:rgba(0,0,0,.12);border-radius:6px;padding:2px 8px;font-size:12px}
.wbar a{margin-left:auto;color:inherit;font-size:12.5px}
.cs-dark2 .hero2{padding:34px 26px 30px;display:grid;gap:12px;background:radial-gradient(80% 120% at 80% 0%,rgba(91,140,255,.25),transparent 60%)}
.cs-dark2 .hero2 small{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:#8fa6d8}
.cs-dark2 .hero2 h5{margin:0;font:800 clamp(24px,3.4vw,36px) var(--f-display)}
.cs-dark2 .hero2 .row2{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.cs-dark2 .hero2 .row2 div{height:70px;border-radius:10px;background:linear-gradient(135deg,#1b2740,#121a2c)}
/* gaya 4: link bio di HP */
.bio-wrap{display:grid;place-items:center;padding:26px;background:repeating-linear-gradient(45deg,var(--panel) 0 14px,var(--panel-2) 14px 28px);border:1px solid var(--line);border-radius:14px}
.wbio{width:min(300px,100%);border-radius:30px;border:8px solid #17191f;background:var(--b-bg);color:var(--b-fg);padding:22px 16px;display:grid;gap:12px;justify-items:center;text-align:center;box-shadow:0 30px 60px -20px #000}
.wbio .av{width:62px;height:62px;border-radius:50%;background:var(--b-acc);color:var(--b-card-ink);display:grid;place-items:center;font:900 22px var(--f-board)}
.wbio h5{margin:0;font:800 17px var(--f-display)}
.wbio .handle{font-size:12px;opacity:.6;margin-top:-8px}
.wbio .bigc{font:900 46px/1 var(--f-board);color:var(--b-acc)}
.wbio .bigc+span{font-size:12.5px;opacity:.75;margin-top:-4px}
.wbio .grp{width:100%;display:grid;gap:6px}
.wbio .grp div{display:flex;justify-content:space-between;background:var(--b-dim);border-radius:10px;padding:8px 12px;font-size:13px}
.wbio .grp b{color:var(--b-acc)}
.wbio .grp b.full{color:var(--bad)}
.wbio .lnk{width:100%;border-radius:12px;padding:10px;font-weight:800;font-size:13.5px;background:var(--b-acc);color:var(--b-card-ink)}
.wbio .lnk.ghost{background:transparent;border:1px solid var(--b-dim);color:var(--b-fg)}
/* galeri layout bebas */
.ideas-head{display:grid;gap:8px;margin:56px 0 22px;max-width:760px}
.ideas-head h3{font-size:clamp(22px,2.8vw,30px);font-weight:800}
.ideas-head p{color:var(--muted)}
.ideas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.ideas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ideas{grid-template-columns:1fr}}
.idea{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.idea .iv{aspect-ratio:16/10;position:relative;overflow:hidden;display:grid;place-items:center;padding:14px}
.idea .it{padding:14px 16px 16px;display:grid;gap:4px;align-content:start}
.idea .it b{font-size:15.5px}
.idea .it p{color:var(--muted);font-size:13.5px;line-height:1.45}
.idea .it .how{font-family:var(--f-mono);font-size:11px;color:var(--gold);letter-spacing:.06em;text-transform:uppercase}
/* 1 denah lantai */
.lv-floor{background:#e9e4da}
.floor{position:relative;width:100%;height:100%;border:4px solid #4a4038;border-radius:4px;background:repeating-linear-gradient(90deg,#efe9df 0 22px,#e6dfd3 22px 23px)}
.floor .seat{position:absolute;width:15%;height:20%;border-radius:4px;display:grid;place-items:center;font:700 9px var(--f-mono);color:#fff;background:#b9b1a5;transition:background .4s}
.floor .seat.free{background:#2fbf71;box-shadow:0 0 0 3px rgba(47,191,113,.25)}
.floor .seat.pause{background:#4a7bd6}
.floor .door{position:absolute;bottom:-4px;left:44%;width:12%;height:4px;background:#e9e4da}
.floor .cashier{position:absolute;right:4%;bottom:6%;width:18%;height:14%;border-radius:4px;background:#4a4038;color:#fff;font:700 8px var(--f-body);display:grid;place-items:center}
/* 2 neon sign */
.lv-neon{background:radial-gradient(ellipse at 50% 30%,#2a0d2e,#0a050c 70%)}
.neon{display:grid;gap:12px;justify-items:center}
.neon .sign{font:400 clamp(28px,3.6vw,40px)/1 "Caveat",cursive;color:#ff6fd8;text-shadow:0 0 6px #ff6fd8,0 0 18px #ff2fb9,0 0 36px #ff2fb9}
.neon .sign b{color:#7dfcff;text-shadow:0 0 6px #7dfcff,0 0 18px #22d3ee,0 0 36px #22d3ee;font-weight:700}
.neon .bulbs{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:90%}
.neon .bulbs i{width:14px;height:14px;border-radius:50%;background:#3a1f3a;transition:.4s}
.neon .bulbs i.free{background:#7dfcff;box-shadow:0 0 8px #22d3ee,0 0 16px #22d3ee}
/* 3 donut */
.lv-donut{background:#f7f5ff}
.donut{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;color:#241f3a}
.donut .ring{width:110px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#6d4aff var(--p,40%),#e2dcff 0);transition:background .4s}
.donut .ring div{width:72%;aspect-ratio:1;border-radius:50%;background:#f7f5ff;display:grid;place-content:center;text-align:center}
.donut .ring b{font:800 28px/1 var(--f-display)}
.donut .ring span{font-size:10px;color:#6b6489}
.donut ul{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:12px}
.donut li{display:flex;justify-content:space-between;gap:10px}
.donut li b{color:#6d4aff}
/* 4 ticker */
.lv-ticker{background:#111;place-items:stretch;padding:0;align-content:center}
.ticker{display:grid;gap:10px}
.ticker .tk-h{display:flex;justify-content:space-between;padding:0 14px;color:#fff;font:700 12px var(--f-mono)}
.ticker .tk-h b{color:#ffd400}
.ticker .belt{overflow:hidden;background:#ffd400;color:#111;border-block:2px solid #000}
.ticker .belt div{display:inline-flex;gap:26px;white-space:nowrap;padding:9px 0;font:800 13px var(--f-body);animation:tick 18s linear infinite}
.ticker .belt span::before{content:"● ";color:#0a8f47}
.ticker .belt span.busy::before{color:#c0392b}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker .belt.b2{background:#1c1c1c;color:#fff}
.ticker .belt.b2 div{animation-direction:reverse;animation-duration:24s}
/* 5 per tipe */
.lv-type{background:#0f1a14}
.types{width:100%;display:grid;gap:8px}
.types .ty{display:grid;grid-template-columns:70px 1fr auto;gap:10px;align-items:center;color:#e6f5ec;font-size:12.5px}
.types .ty b{font-family:var(--f-display);font-size:14px}
.types .tbar{height:12px;border-radius:99px;background:#22352a;overflow:hidden}
.types .tbar i{display:block;height:100%;background:linear-gradient(90deg,#2fbf71,#9be15d);transition:width .5s}
.types .ty em{font-style:normal;font-family:var(--f-mono);font-size:11.5px;color:#9be15d}
.types .ty em.full{color:#ff8a7a}
/* 6 timeline */
.lv-time{background:#fff;place-items:stretch}
.tl{display:grid;gap:4px;align-content:center;color:#1f2430;font-size:10.5px}
.tl .row{display:grid;grid-template-columns:62px 1fr;gap:8px;align-items:center}
.tl .row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl .track{position:relative;height:10px;border-radius:5px;background:#e3f6ea}
.tl .track i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:#f0b6ad;transition:width .5s}
.tl .track i.pause{background:#b9cdf2}
.tl .axis{display:grid;grid-template-columns:62px 1fr;gap:8px;color:#8a90a0;font-family:var(--f-mono);font-size:9.5px}
.tl .axis div{display:flex;justify-content:space-between}

/* carousel contoh implementasi */
.car{display:grid;gap:18px}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(90%,1060px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none;overscroll-behavior-x:contain}
.car-track::-webkit-scrollbar{display:none}
.slide-card{scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.sv-vis{min-height:470px;display:grid;place-items:center;padding:22px;background:#0a0b0e;min-width:0}
.sv-vis.pattern{background:radial-gradient(circle at 30% 20%,rgba(242,182,54,.08),transparent 50%),repeating-linear-gradient(45deg,#101217 0 14px,#0c0e12 14px 28px)}
.sv-txt{padding:28px 24px;display:grid;gap:10px;align-content:center;border-left:1px solid var(--line)}
.sv-txt .dev{justify-self:start;font-size:11.5px;font-weight:700;color:var(--fg);background:var(--panel-2);border:1px solid var(--line);border-radius:99px;padding:3px 10px}
.sv-txt .how{font-family:var(--f-mono);font-size:11.5px;color:var(--gold);letter-spacing:.08em;text-transform:uppercase}
.sv-txt h3{font-size:clamp(20px,2.3vw,27px);font-weight:800}
.sv-txt p{color:var(--muted);font-size:14.5px}
.sv-txt .fit{font-size:13.5px;color:var(--fg);border-top:1px solid var(--line);padding-top:12px}
.sv-txt .fit::before{content:"✓ ";color:var(--ok);font-weight:700}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2fbf71;margin-right:6px;vertical-align:1px;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
/* jendela browser desktop */
.bw{width:100%;border-radius:12px;overflow:hidden;border:1px solid #2a2e39;background:#fff;box-shadow:0 30px 60px -30px #000;display:flex;flex-direction:column}
.bw-bar{display:flex;gap:7px;align-items:center;background:#1e212a;padding:8px 12px}
.bw-bar i{width:10px;height:10px;border-radius:50%;background:#3a3e4a}
.bw-bar i:nth-child(1){background:#ff5f57}.bw-bar i:nth-child(2){background:#febc2e}.bw-bar i:nth-child(3){background:#28c840}
.bw-bar span{flex:1;margin-left:8px;background:#0d0e12;border-radius:6px;padding:3px 10px;font-family:var(--f-mono);font-size:11.5px;color:#9a9ca6;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bw-body{position:relative;min-height:340px;color:#1f1c18}
.bw-body.dark{background:#050505}
.bw-body.dark .board{padding:20px 18px}
.bw-body.dark .tiles{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:7px}
.bw-body.dark .tile{min-height:74px;padding:9px}
/* slide 2: banner website */
.hero-site{background:linear-gradient(100deg,rgba(8,10,25,.95) 30%,rgba(8,10,25,.55)),radial-gradient(circle at 75% 40%,#3b4cff 0,#1a1f5c 30%,#090b1c 70%);color:#fff;padding:0 0 22px}
.hs-nav{display:flex;align-items:center;gap:18px;padding:14px 22px;font-size:12.5px;color:#c5c9e8}
.hs-nav b{font:900 15px var(--f-board);color:#fff;margin-right:auto;letter-spacing:.04em}.hs-nav b span{color:#7d8cff}
.hs-nav em{font-style:normal;background:#fff;color:#0b0d20;border-radius:6px;padding:5px 11px;font-weight:700}
.hs-main{display:grid;grid-template-columns:1fr 280px;gap:20px;padding:18px 22px 0;align-items:center}
.hs-copy{display:grid;gap:10px}
.hs-copy small{font:700 10.5px var(--f-mono);letter-spacing:.18em;color:#9aa6ff}
.hs-copy h5{margin:0;font:800 clamp(22px,2.6vw,32px)/1.1 var(--f-display)}
.hs-copy p{font-size:13px;color:#c5c9e8}
.hs-btn{justify-self:start;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:700}
.live-card{background:rgba(255,255,255,.96);color:#141414;border-radius:16px;padding:16px;display:grid;gap:10px;box-shadow:0 20px 40px -12px rgba(0,0,0,.6)}
.lc-h{display:flex;align-items:center;font-size:12px;font-weight:800}
.lc-h em{font-style:normal;font-weight:500;color:#888;margin-left:auto;font-size:11px}
.lc-big{font:800 22px var(--f-display)}
.lc-big b{color:#16a34a;font-size:30px}
.lc-rows{display:grid;gap:6px}
.lc-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;border-top:1px solid #eee;padding-top:6px}
.chip{font-size:11.5px;font-weight:700;border-radius:99px;padding:2px 9px;white-space:nowrap}
.chip.ok{background:#dcfce7;color:#15803d}
.chip.no{background:#fee2e2;color:#b91c1c}
.lc-btn{background:#16a34a;color:#fff;text-align:center;border-radius:10px;padding:9px;font-weight:800;font-size:13.5px}
/* frame HP */
.pf{position:relative;width:min(290px,100%);height:440px;border:9px solid #16181d;border-radius:36px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -20px #000}
.pf-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:38%;height:18px;background:#16181d;border-radius:0 0 12px 12px;z-index:3}
.pf-scr{position:absolute;inset:0;overflow:auto;scrollbar-width:none;padding:26px 14px 14px;display:grid;gap:12px;align-content:start;color:#1b1b1f;font-size:13px}
.pf-scr::-webkit-scrollbar{display:none}
.pf-scr.light{background:#f5f5f7}
/* slide 3: kartu ringkas */
.mp-head{display:flex;gap:10px;align-items:center}
.mp-head .av{width:42px;height:42px;border-radius:50%;background:#111;color:#ffd400;display:grid;place-items:center;font:900 14px var(--f-board);flex:none}
.mp-head b{display:block;font-size:15px}.mp-head span{font-size:12px;color:#6b6b75}
.mp-card{background:#fff;border-radius:16px;padding:14px;display:grid;gap:10px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.mp-top{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:#444}
.mp-top em{font-style:normal;font-family:var(--f-mono);color:#888}
.mp-big{display:flex;align-items:baseline;gap:8px}
.mp-big b{font:800 44px/1 var(--f-display);color:#16a34a}
.mp-big span{font-size:13px;color:#555}
.segbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;height:12px}
.segbar i{border-radius:3px;background:#d4d4d8;transition:background .4s}
.segbar i.f{background:#22c55e}.segbar i.p{background:#60a5fa}
.seg-leg,.ap-leg{display:flex;gap:12px;font-size:11px;color:#666}
.seg-leg i,.ap-leg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px;vertical-align:-1px;background:#d4d4d8}
.seg-leg i.f,.ap-leg i.f{background:#22c55e}.seg-leg i.p,.ap-leg i.p{background:#60a5fa}
.mp-next{font-size:12.5px;background:#f4f4f5;border-radius:10px;padding:8px 10px;color:#333}
.mp-next b{color:#111}
.mp-btns{display:grid;gap:8px}
.mp-btns span{text-align:center;border-radius:12px;padding:11px;font-weight:800;background:#fff;border:1px solid #e4e4e7}
.mp-btns span.mpwa{background:#22c55e;color:#fff;border-color:#22c55e}
/* slide 4: kartu per jenis */
.light-site{background:#faf7f2;padding:20px 22px}
.ls-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ls-head h5{margin:0;font:700 22px Georgia,"Times New Roman",serif}
.ls-head span{font-size:12px;color:#8a8178}
.cat-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cc{background:#fff;border:1px solid #ece5da;border-radius:14px;overflow:hidden;display:grid}
.cc .pic{height:74px;display:grid;place-items:center;font:900 16px var(--f-board);color:#fff;letter-spacing:.06em}
.cc .bd{padding:10px 12px 12px;display:grid;gap:6px}
.cc .nm{font-weight:800;font-size:14px}
.cc .pr{font-size:12px;color:#8a8178}
.cc .av{font-size:12.5px;font-weight:700}
.cc .av.ok{color:#15803d}.cc .av.no{color:#b91c1c}
.cc .nx{font-size:11.5px;color:#8a8178;min-height:16px}
.cc .bk{text-align:center;border-radius:9px;padding:7px;font-size:12.5px;font-weight:800;background:#1f1c18;color:#fff}
.cc .bk.off{background:#ece5da;color:#8a8178}
/* slide 5: denah di HP */
.ap-bar{display:grid;grid-template-columns:24px 1fr 24px;align-items:center;text-align:center;font-size:15px;margin-top:-4px}
.ap-bar span{font-size:22px;color:#888}
.ap-leg{justify-content:center}
.pf .floor{position:relative;width:80%;justify-self:center;aspect-ratio:1/1;flex:none;border:3px solid #3f3f46;border-radius:6px;background:repeating-linear-gradient(90deg,#fafafa 0 18px,#f1f1f3 18px 19px)}
.pf .floor .seat{position:absolute;width:26%;height:15%;border-radius:6px;display:grid;place-items:center;font:700 10px var(--f-mono);color:#fff;background:#a1a1aa;border:0;cursor:pointer;transition:background .4s,transform .15s}
.pf .floor .seat.free{background:#22c55e}
.pf .floor .seat.pause{background:#60a5fa}
.pf .floor .seat.sel{outline:3px solid #111;outline-offset:2px;transform:scale(1.05)}
.pf .floor .door{position:absolute;bottom:-3px;left:38%;width:24%;height:3px;background:#f5f5f7;font-size:8px;color:#888;text-align:center;line-height:14px}
.pf .floor .cashier{position:absolute;right:5%;bottom:6%;width:30%;height:12%;border-radius:5px;background:#3f3f46;color:#fff;font:700 9px var(--f-body);display:grid;place-items:center}
.sheet{background:#fff;border-radius:14px;padding:12px;display:grid;gap:6px;box-shadow:0 -4px 16px rgba(0,0,0,.08)}
.sheet .sh-t{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:14px}
.sheet .sh-s{font-size:12px;color:#666}
.sheet .sh-b{text-align:center;border-radius:10px;padding:9px;font-weight:800;background:#22c55e;color:#fff}
.sheet .sh-b.off{background:#e4e4e7;color:#71717a}
/* slide 6: segera kosong */
.sk-sec{background:#fff;border-radius:14px;padding:12px;display:grid;gap:10px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.sk-t{font-weight:800;font-size:14px;display:flex;justify-content:space-between;align-items:center}
.sk-t b{background:#22c55e;color:#fff;border-radius:99px;padding:1px 9px;font-size:12px}
.sk-chips{display:flex;flex-wrap:wrap;gap:6px}
.sk-chips span{background:#dcfce7;color:#15803d;border-radius:8px;padding:5px 9px;font-size:12px;font-weight:700}
.sk-chips span small{display:block;font-weight:500;color:#4d7c5d;font-size:10.5px}
.sk-list{display:grid;gap:9px}
.sk-row{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}
.sk-row b{font-size:13.5px}
.sk-row .in{font-size:12px;font-weight:800;color:#b45309;text-align:right}
.sk-row .sub{font-size:11px;color:#71717a}
.sk-row .at{font-size:11px;color:#71717a;text-align:right;font-family:var(--f-mono)}
.sk-row .pb{grid-column:1/-1;height:5px;border-radius:9px;background:#f4f4f5;overflow:hidden}
.sk-row .pb i{display:block;height:100%;background:#f59e0b;border-radius:9px;transition:width .5s}
/* slide 7: bar pengumuman */
.ann{display:flex;align-items:center;background:#111;color:#fff;font-size:12.5px;overflow:hidden}
.ann-l{flex:none;background:#16a34a;padding:8px 12px;font-weight:800;font-size:11.5px;letter-spacing:.06em;position:relative;z-index:1}
.ann-l .dot{background:#fff}
.ann-belt{overflow:hidden;flex:1}
.ann-belt div{display:inline-flex;gap:28px;white-space:nowrap;padding:8px 0;animation:tick 26s linear infinite}
.ann-belt span.f{color:#4ade80;font-weight:700}
.ann-belt span.b{color:#d4d4d8}
.ann-belt span.b b{color:#fbbf24}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ts-nav{display:flex;align-items:center;gap:20px;padding:14px 22px;border-bottom:1px solid #eee;font-size:13px;color:#555}
.ts-nav b{font:900 15px var(--f-board);color:#0f3d2e;margin-right:auto}.ts-nav b span{color:#16a34a}
.ts-body{padding:18px 22px;display:grid;gap:14px}
.ts-h{height:110px;border-radius:12px;background:linear-gradient(135deg,#0f3d2e,#16a34a)}
.ts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ts-grid div{height:70px;border-radius:10px;background:#f1f5f2}
@media (max-width:980px){.cat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.hs-main{grid-template-columns:1fr}}
@media (max-width:860px){
  .car-track{grid-auto-columns:94%}
  .slide-card{grid-template-columns:1fr}
  .sv-vis{min-height:0;padding:14px}
  .sv-txt{border-left:0;border-top:1px solid var(--line);padding:20px}
  .bw-body.dark .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bw-body.dark .tile .tp,.bw-body.dark .tile .eta{display:none}
  .bw-body.dark .tile{min-height:54px;padding:7px}
  .bw-body.dark .tile .nm{font-size:10.5px}.bw-body.dark .tile .ss{font-size:9.5px}
  .hs-nav span,.ts-nav span{display:none}
  .ts-grid{grid-template-columns:repeat(2,1fr)}
}
.car-ctrl{display:flex;align-items:center;gap:14px}
.car-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--fg);font-size:18px;cursor:pointer;display:grid;place-items:center}
.car-btn:hover{border-color:var(--gold);color:var(--gold)}
.car-btn:disabled{opacity:.35;cursor:not-allowed}
.car-dots{display:flex;gap:7px;flex:1;justify-content:center;flex-wrap:wrap}
.car-dots button{width:9px;height:9px;border-radius:99px;border:0;padding:0;background:var(--line);cursor:pointer;transition:width .25s,background .25s}
.car-dots button[aria-selected=true]{width:28px;background:var(--gold)}
.car-count{font-family:var(--f-mono);font-size:13px;color:var(--muted);min-width:44px;text-align:center}
.car-foot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;margin-top:28px;border-top:1px solid var(--line);padding-top:24px}
.car-foot p{color:var(--muted);max-width:64ch}
.car-foot p b{color:var(--fg)}
@media (prefers-reduced-motion:reduce){.car-track{scroll-behavior:auto}.ann-belt div{animation:none}}

/* panel pengaturan */
.cfg{display:grid;gap:18px;min-width:0}
.cfg .grp{display:grid;gap:8px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:7px 10px;color:var(--fg);font:600 13px var(--f-body);cursor:pointer}
.sw i{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.2)}
.sw[aria-pressed=true]{border-color:var(--gold)}
.sw input[type=color]{width:22px;height:22px;border:0;padding:0;background:none;cursor:pointer}
.where{display:grid;gap:8px;font-size:14px}
.where div{display:flex;gap:10px;align-items:baseline;color:var(--muted)}
.where b{color:var(--fg);min-width:96px}
.uses{display:grid;gap:8px;font-size:14.5px;color:var(--muted);padding:0;margin:0;list-style:none}
.uses li::before{content:"→ ";color:var(--gold)}
@media (max-width:640px){.cs-light{grid-template-columns:1fr}.cs-dark2 .hero2 .row2{grid-template-columns:1fr 1fr}}

/* masalah -> solusi, cara mulai, tabel, faq, form (dari v1) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stats div{background:var(--ink);padding:22px 20px;display:grid;gap:4px}
.stats strong{font-family:var(--f-display);font-size:34px;font-weight:800}
.stats span{color:var(--muted);font-size:14px}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}}
section.tight{padding-block:40px}
.pair{display:grid;grid-template-columns:1fr 32px 1fr;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding-block:16px}
.pair .bad{color:var(--muted)}.pair .bad strong{color:var(--fg);display:block;font-weight:600}
.pair .arr{color:var(--gold);font-family:var(--f-mono);text-align:center}
.pair .good strong{display:block;color:var(--gold);font-weight:700}
@media (max-width:700px){.pair{grid-template-columns:1fr}.pair .arr{text-align:left}}
.start{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:m}
.start div{border-top:2px solid var(--gold);padding-top:18px;display:grid;gap:8px;counter-increment:m}
.start div::before{content:"Langkah " counter(m);font-family:var(--f-mono);font-size:12px;color:var(--gold);letter-spacing:.08em;text-transform:uppercase}
.start p{color:var(--muted);font-size:15px}
@media (max-width:760px){.start{grid-template-columns:1fr}}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14.5px}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
thead th.us{color:var(--gold)}
td.us{background:rgba(242,182,54,.06);color:var(--fg);font-weight:600}
td{color:var(--muted)}td:first-child{color:var(--fg)}
tbody tr:last-child td{border-bottom:0}
.y{color:var(--ok)}.n{color:var(--bad)}
.faq{display:grid;max-width:860px}
.faq details{border-bottom:1px solid var(--line);padding-block:18px}
.faq summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-family:var(--f-mono);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);margin-top:10px;max-width:68ch}
.signup{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.signup .side{display:grid;gap:18px}
.signup .side ul{margin:0;padding-left:18px;color:var(--muted);display:grid;gap:6px}
form.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
form.card .full{grid-column:1/-1}
form.card label{display:grid;gap:6px;font-size:13.5px;color:var(--muted)}
form.card input,form.card select{background:var(--ink);border:1px solid var(--line);border-radius:9px;color:var(--fg);padding:11px 12px;font:15px var(--f-body);width:100%}
.ferr{color:var(--bad);font-size:14px}
.fhint{color:var(--muted);font-size:12.5px;text-align:center}
.btn-wa{background:#25d366;color:#05210f}
.btn-wa:hover{filter:brightness(1.06)}
.okmsg pre{white-space:pre-wrap;font-family:var(--f-mono);font-size:12.5px;color:var(--fg);background:var(--ink);border-radius:8px;padding:10px;margin:8px 0}
.okmsg a{color:var(--ok);font-weight:700}
.okmsg{grid-column:1/-1;background:rgba(79,209,139,.1);border:1px solid rgba(79,209,139,.4);color:var(--ok);border-radius:10px;padding:12px 14px;font-size:14.5px}
@media (max-width:860px){.signup{grid-template-columns:1fr}}
@media (max-width:520px){form.card{grid-template-columns:1fr}}
footer{border-top:1px solid var(--line);padding-block:36px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;background:#25d366;color:#05210f;font-weight:700;border-radius:99px;padding:12px 18px;text-decoration:none;font-size:14px;box-shadow:0 10px 30px -8px rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){.scr,.mcard,.mcard::after,.saldobar i,.tile,.toast{transition:none}.tv-glow,.hud.low{animation:none}html{scroll-behavior:auto}}
/* =========================================================
   RESPONSIVE: tablet & HP (override di akhir supaya menang)
   ========================================================= */
:root{--navh:64px}
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:45;background:rgba(13,14,18,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
nav.top .wrap{min-height:var(--navh);padding-block:10px}
.navlinks a{padding-block:10px}
html{scroll-padding-top:calc(var(--navh) + 12px)}
.menu-btn{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;place-items:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .2s,background .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-btn[aria-expanded=true] span{background:transparent}
.menu-btn[aria-expanded=true] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded=true] span::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none;border-top:1px solid var(--line);padding:8px 20px 18px;background:rgba(13,14,18,.98)}
.mnav a{display:block;padding:13px 2px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600}
.mnav .btn{display:flex;justify-content:center;width:100%;margin-top:14px;border-bottom:0}
.mnav a.ghost-link{color:var(--muted)}
nav.top.open .mnav{display:block}
.wa svg{display:none}
/* tabel perbandingan: label untuk mode kartu */
@media (max-width:880px){
  .menu-btn{display:grid}
  .navcta .btn-gold{display:none}
}
/* tablet portrait: demo tetap 2 kolom */
@media (min-width:700px) and (max-width:900px){
  .demo{grid-template-columns:270px minmax(0,1fr);gap:24px}
  .demo .phone{padding:12px}
}
/* membership: tablet 2 kolom, kartu tidak raksasa */
@media (max-width:1040px){
  .mdemo[data-layout=c]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"phone phone" "card side"}
}
@media (max-width:720px){
  .mdemo[data-layout=c]{grid-template-columns:minmax(0,1fr);grid-template-areas:"phone" "card" "side"}
  .m-card .mcard{max-width:420px;justify-self:center}
}
/* isi jendela browser di carousel menyesuaikan lebarnya sendiri */
.bw{container-type:inline-size}
@container (max-width:620px){
  .hs-main{grid-template-columns:1fr}
  .hs-copy h5{font-size:22px}
  .cat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ts-grid{grid-template-columns:repeat(2,1fr)}
  .hs-nav span,.ts-nav span{display:none}
}
@container (max-width:380px){
  .live-card{padding:12px}
  .cc .pic{height:52px}
}
/* hero */
@media (max-width:920px){
  .h3-wrap{max-width:560px;width:100%;justify-self:center}
}
/* ===== HP ===== */
@media (max-width:640px){
  section{padding-block:56px}
  .stats div{padding:18px 16px}
  .stats strong{font-size:clamp(22px,7vw,28px);white-space:nowrap}
  .stats span{font-size:13px}
  .sec-head{margin-bottom:28px}
  .lead{font-size:16.5px}
  .hero{padding-block:28px 48px}
  .hero h1{font-size:clamp(34px,10vw,44px)}
  .h3-title{min-height:2.3em}
  .hero .ctas .btn{flex:1 1 auto;justify-content:center}
  /* tombol WA melayang jadi bulat */
  .wa{width:56px;height:56px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:0}
  .wa svg{display:block;width:28px;height:28px}
  footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  footer .wrap{flex-direction:column;align-items:flex-start;gap:10px}
  /* masalah -> solusi jadi kartu */
  .pair{grid-template-columns:1fr;gap:8px;padding-block:18px}
  .pair .arr{display:none}
  .pair .good{border-left:3px solid var(--gold);padding-left:12px}
  /* tabel jadi kartu, kolom Pride Console di depan */
  .tbl-wrap{border:0;overflow:visible}
  .tbl-wrap table{min-width:0}
  .tbl-wrap thead{display:none}
  .tbl-wrap tbody{display:grid;gap:12px}
  .tbl-wrap tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
  .tbl-wrap td{border:0;padding:0;font-size:13.5px}
  .tbl-wrap td:first-child{grid-column:1/-1;font-weight:700;font-size:15px}
  .tbl-wrap td.us{grid-column:1/-1;order:1;background:rgba(242,182,54,.08);border-radius:9px;padding:9px 11px;font-size:14.5px}
  .tbl-wrap td.us::before{content:"Pride Console";display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:2px}
  .tbl-wrap td:nth-child(2),.tbl-wrap td:nth-child(3){order:2}
  .tbl-wrap td:nth-child(2)::before{content:"Buku / Excel";display:block;font-size:11px;color:var(--idle)}
  .tbl-wrap td:nth-child(3)::before{content:"Billing PC lokal";display:block;font-size:11px;color:var(--idle)}
  /* carousel: kontrol di atas, slide tidak ikut setinggi slide terpanjang */
  .car{gap:14px}
  .car-ctrl{order:-1}
  .car-track{align-items:start}
  .sv-txt .fit{display:none}
  .sv-txt{gap:8px}
  .sv-txt h3{font-size:21px}
  /* membership: tombol paket 1 kolom tetap rapi */
  .mdemo[data-layout=c] .phone .ctrl{grid-column:auto}
}
/* titik carousel: area sentuh lebih besar tanpa mengubah tampilan */
.car-dots button{position:relative}
.car-dots button::after{content:"";position:absolute;inset:-12px -4px}
/* Demo 1 di HP: TV menempel di atas saat tombol kasir digulir */
@media (max-width:699px){
  #billing .demo{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  #billing .tv-wrap{display:contents}
  #billing .tv-wrap>.demo-label{order:1;margin-bottom:-6px}
  #billing .modes{order:2}
  #billing .mode-facts{order:3}
  #billing .tv-stage{order:4;position:sticky;top:calc(var(--navh) + env(safe-area-inset-top,0px));z-index:5;background:var(--ink);margin-inline:-20px;padding:10px 20px 22px;box-shadow:0 12px 20px -14px #000}
  #billing .demo>div:first-child{order:5}
  #billing .tv-meta{order:6}
  #billing .log{order:7}
  #billing .tv-stage .tv{max-width:440px;margin-inline:auto}
  #billing .modes .mode span{display:none}
  #billing .mode-facts{font-size:12px}
}
@media (max-width:900px){
  .demo .c-sum{display:flex}
}
.c-sum{display:none;justify-content:space-between;align-items:center;background:var(--panel-2);border-radius:10px;padding:9px 12px;font-size:13.5px}
.c-sum b{font-family:var(--f-mono);color:var(--gold)}


.demo-link{color:var(--muted);font-size:14.5px}
.demo-link a{color:var(--gold);font-weight:700}