/* Neobrutalism slim — layout v1, palet v2. Warna utama bisa diganti dari Admin (CSS variable). */
:root{
  --ink:#121212; --paper:#f8f3e6; --white:#fff; --muted:#59554a;
  --primary:#ffdc58; --secondary:#ff85a2; --accent:#6cd0ff;
  --purple:#c299ff; --green:#4de084; --orange:#ff9d42; --red:#ff6b5e;
  --bd:2px solid var(--ink); --sh:3px 3px 0 var(--ink); --sh-s:2px 2px 0 var(--ink);
  --mono:'Fira Code',ui-monospace,Menlo,monospace; --sans:'DM Sans',system-ui,sans-serif; --disp:'Space Grotesk','DM Sans',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:500 15px/1.55 var(--sans);overflow-x:hidden;
  background-image:radial-gradient(rgba(18,18,18,.16) 1px,transparent 1px);background-size:20px 20px}
body.menu-open{overflow:hidden}
a{color:inherit}
button{font-family:inherit}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
[hidden]{display:none!important}

/* header */
.top{border-bottom:var(--bd);background:var(--primary);position:sticky;top:0;z-index:10}
.bar{display:flex;align-items:center;justify-content:flex-start;gap:10px;height:56px}
.bar .nav{margin-left:auto}
.bar-tools{display:flex;align-items:center;gap:8px;margin-left:10px}
.brand{display:flex;align-items:center;gap:10px;font:800 19px var(--disp);letter-spacing:-.04em;text-decoration:none}
.logo{display:grid;place-items:center;width:30px;height:30px;background:var(--white);border:var(--bd);box-shadow:var(--sh-s);font:800 15px var(--disp);transform:rotate(-4deg)}
.nav{display:flex;align-items:center;gap:6px;font:700 13px var(--mono)}
.nav a{padding:3px 8px;text-decoration:none;border:2px solid transparent}
.nav a:hover{background:var(--white);border-color:var(--ink);box-shadow:var(--sh-s)}
.menu-button{display:none;padding:6px 12px;border:var(--bd);background:var(--white);font:800 12px var(--mono);box-shadow:var(--sh-s);cursor:pointer}
@media(max-width:940px){
  .bar-tools{margin-left:auto}
  .menu-button{display:block}
  .nav{position:fixed;inset:64px 12px auto;z-index:11;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px;background:var(--white);border:var(--bd);box-shadow:var(--sh)}
  .nav.open{display:flex}
  .nav a{padding:12px;border:0;border-bottom:2px dashed var(--ink)}
  .nav a:last-of-type{border-bottom:0}
  .nav .chip{align-self:flex-start;margin:8px 0 2px 8px}
}

/* banner & ticker */
.announce{margin:16px 0 0;padding:10px 14px;border:var(--bd);background:var(--green);box-shadow:var(--sh-s);font-weight:700;font-size:14px}
.announce.warn{background:var(--orange)}
.ticker{overflow:hidden;border-bottom:var(--bd);background:var(--ink);color:var(--primary);font:700 12px var(--mono);letter-spacing:.08em;white-space:nowrap}
.track{display:inline-flex;animation:marq 30s linear infinite;padding:6px 0}
.track span{padding:0 20px}
@keyframes marq{to{transform:translateX(-50%)}}

/* hero */
.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;align-items:center;padding:42px 0 20px}
.tag{display:inline-block;margin:0 0 14px;padding:2px 10px;border:var(--bd);background:var(--accent);box-shadow:var(--sh-s);font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;transform:rotate(-1deg)}
h1{margin:0 0 12px;font:800 clamp(32px,6vw,50px)/1.04 var(--disp);letter-spacing:-.045em}
mark{background:var(--secondary);color:var(--ink);padding:0 .16em;border:var(--bd);box-shadow:var(--sh-s);display:inline-block;transform:rotate(-1.5deg)}
.lead{margin:0;max-width:52ch;color:var(--muted);font-size:16px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{padding:12px 14px;border:var(--bd);box-shadow:var(--sh)}
.stat b{display:block;font:800 28px/1.1 var(--disp);letter-spacing:-.04em}
.stat span{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.s1{background:var(--green);transform:rotate(1deg)} .s2{background:var(--accent);transform:rotate(-1deg)} .s3{background:var(--purple);transform:rotate(-.6deg)} .s4{background:var(--orange);transform:rotate(.8deg)}
@media(max-width:760px){.hero{grid-template-columns:1fr;padding-top:28px}}

/* cards */
.card{background:var(--white);border:var(--bd);box-shadow:var(--sh);padding:18px;margin-bottom:18px}
.c-yellow{background:var(--primary)} .c-pink{background:var(--secondary)} .c-blue{background:var(--accent)} .c-green{background:var(--green)} .c-purple{background:var(--purple)} .c-orange{background:var(--orange)}
.grid{display:grid;gap:18px;grid-template-columns:1.25fr 1fr;margin:18px 0}
.grid .card{margin:0}
@media(max-width:760px){.grid{grid-template-columns:1fr}}
h2{margin:0 0 14px;font:800 18px var(--disp);display:flex;align-items:center;gap:10px;letter-spacing:-.02em}
h2 small{margin-left:auto;font:500 12px var(--mono);color:var(--muted)}
h3{margin:0 0 6px;font:800 16px var(--disp)}
p{margin:0}
.n{display:grid;place-items:center;width:26px;height:26px;background:var(--white);border:var(--bd);box-shadow:var(--sh-s);font:800 12px var(--mono)}
label{display:block;margin-bottom:6px;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.05em}
.row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.row.gap{align-items:center;margin-top:14px}
input,select,textarea{flex:1;min-width:0;padding:10px 12px;border:var(--bd);background:var(--white);color:var(--ink);font:700 15px var(--mono);border-radius:0;outline:none}
textarea{width:100%;resize:vertical;min-height:70px;font-weight:500}
input:focus,select:focus,textarea:focus{box-shadow:var(--sh-s)}
input[type=color]{flex:none;width:56px;height:42px;padding:2px;cursor:pointer}
input[type=checkbox]{flex:none;width:20px;height:20px;accent-color:var(--ink)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.btn{display:inline-block;padding:10px 16px;border:var(--bd);background:var(--white);color:var(--ink);font:800 14px var(--sans);cursor:pointer;box-shadow:var(--sh-s);text-decoration:none;transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.btn:disabled{opacity:.55;cursor:wait;transform:none}
.btn.dark{background:var(--ink);color:var(--primary)}
.btn.wa{background:var(--green)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.danger{background:var(--red)}
.hint{margin-top:10px;color:var(--muted);font-size:13px}
.c-yellow .hint,.c-blue .hint,.c-pink p,.c-green p,.c-purple p,.c-orange p{color:#2a2823}
.error{margin-top:14px;padding:10px 12px;border:var(--bd);background:var(--red);font-weight:700;font-size:14px}
.ok{margin-top:14px;padding:10px 12px;border:var(--bd);background:var(--green);font-weight:700;font-size:14px}
.chip{display:inline-block;padding:1px 9px;border:var(--bd);background:var(--white);font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.chip[data-s=ok],.chip[data-s=online]{background:var(--green)}
.chip[data-s=pairing],.chip[data-s=load],.chip[data-s=connecting]{background:var(--primary)}
.chip[data-s=bad],.chip[data-s=offline]{background:var(--red)}
.chip[data-s=premium]{background:var(--purple)}

/* kode pairing */
.code{display:block;width:100%;margin-top:18px;padding:14px;border:var(--bd);background:var(--white);color:var(--ink);box-shadow:var(--sh);text-align:center;font:800 clamp(26px,7vw,38px) var(--mono);letter-spacing:.14em;cursor:copy;user-select:all;-webkit-user-select:all;transition:background .15s}
.code:hover,.code.copied{background:var(--green)}
.timer{margin-left:auto;font:700 13px var(--mono)}
.steps{margin:16px 0 0;padding-left:20px;font-size:14px}
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 18px}
.how div{display:flex;align-items:center;gap:10px;padding:10px 12px;border:var(--bd);background:var(--white);box-shadow:var(--sh-s);font-weight:700;font-size:13px}
.how b{flex:none;display:grid;place-items:center;width:28px;height:28px;border:var(--bd);border-radius:50%;background:var(--orange);font:800 13px var(--disp)}
@media(max-width:760px){.how{grid-template-columns:1fr 1fr}}

/* list & database */
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:var(--bd);background:var(--white)}
.list .num{font:700 14px var(--mono)}
.list .nm{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .sp{margin-left:auto;display:flex;gap:6px;align-items:center}
.card>.list li{background:var(--paper)}
.c-blue .list li{background:var(--white)}
.tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tab{padding:6px 14px;border:var(--bd);background:var(--white);font:800 13px var(--mono);cursor:pointer;box-shadow:var(--sh-s)}
.tab.active{background:var(--ink);color:var(--primary)}
.toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.toolbar select{flex:0 0 auto}
.dbstats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.dbstats span{padding:3px 10px;border:var(--bd);background:var(--paper);font:700 12px var(--mono)}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:12px;font:700 13px var(--mono)}
.empty{padding:14px;border:2px dashed var(--ink);text-align:center;color:var(--muted);font-size:14px}

/* konten */
.ch{display:flex;gap:16px;align-items:flex-start}
.ch-ico{flex:none;display:grid;place-items:center;width:58px;height:58px;background:var(--white);border:var(--bd);box-shadow:var(--sh-s);font-size:26px;transform:rotate(-4deg)}
@media(max-width:520px){.ch{flex-direction:column}}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
.g3 .card{margin:0}
.g3 p{font-size:14px}
@media(max-width:760px){.g3{grid-template-columns:1fr}}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pills code{padding:2px 9px;border:var(--bd);background:var(--purple);font:700 13px var(--mono);box-shadow:var(--sh-s)}
code{font-family:var(--mono)}
.price{display:flex;flex-direction:column;justify-content:space-between;position:relative}
.price.pop{background:var(--primary);transform:translateY(-6px)}
.price .amt{margin:10px 0;padding-bottom:10px;border-bottom:var(--bd);font:800 28px var(--disp);letter-spacing:-.04em}
.price .amt sub{font:500 12px var(--mono);letter-spacing:0}
.price ul{list-style:none;margin:0 0 16px;padding:0;font-size:14px;font-weight:600}
.price li{padding:6px 0;border-bottom:2px dashed var(--ink)}
.badge{position:absolute;top:-12px;right:14px;padding:2px 10px;border:var(--bd);background:var(--secondary);font:800 11px var(--mono);box-shadow:var(--sh-s)}
details{border:var(--bd);background:var(--paper);margin-bottom:8px}
summary{cursor:pointer;padding:10px 12px;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:10px}
summary::after{content:"+";font:800 16px var(--mono)}
details[open] summary{background:var(--primary);border-bottom:var(--bd)}
details[open] summary::after{content:"–"}
details p{padding:10px 12px;font-size:14px;color:var(--muted)}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:18px 16px 40px;color:var(--muted);font:500 12px var(--mono)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:9px 16px;border:var(--bd);background:var(--green);font:700 13px var(--mono);box-shadow:var(--sh);z-index:20}
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.track{animation:none}.js .reveal{opacity:1;transform:none;transition:none}}

/* admin */
.admin-tabs{margin-top:22px}
.field{margin-bottom:14px}
.field .hint{margin-top:4px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:700px){.fgrid{grid-template-columns:1fr}}
.colors{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.colors .field{margin:0}
.presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.preset{padding:0;border:var(--bd);box-shadow:var(--sh-s);cursor:pointer;display:flex;overflow:hidden;background:none}
.preset i{display:block;width:26px;height:26px}
.toggle{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:var(--bd);background:var(--paper);margin-bottom:8px;font-weight:700;font-size:14px;text-transform:none;letter-spacing:0;font-family:var(--sans);cursor:pointer}
.toggle small{display:block;font-weight:500;color:var(--muted)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{padding:7px 9px;border:2px solid var(--ink);text-align:left}
.tbl th{background:var(--primary);font:800 11px var(--mono);text-transform:uppercase}
.tbl td.m{font-family:var(--mono);font-weight:700}
.tbl-wrap{overflow-x:auto}

.nav-static{display:flex!important;position:static!important;padding:0!important;border:0!important;box-shadow:none!important;background:none!important;flex-direction:row!important}
.nav-static a{border:2px solid transparent!important}
.admin-main{padding-top:24px;padding-bottom:40px}
h2.mt{margin-top:8px} h2.mt2{margin-top:22px}
.field input:not([type=color]):not([type=checkbox]),.field select{width:100%}

.hero-side{display:grid;gap:14px}
.profile{display:flex;align-items:center;gap:14px;padding:12px;border:var(--bd);background:var(--purple);box-shadow:var(--sh)}
.profile img,.profile-ph{flex:none;width:72px;height:72px;border:var(--bd);background:var(--white);object-fit:cover}
.profile-ph{display:grid;place-items:center;font-size:34px}
.profile h3{margin:0;font-size:18px}.profile p{font-size:13px;font-weight:700}
.thumb-prev{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.thumb-prev img{width:84px;height:84px;object-fit:cover;border:var(--bd);background:var(--white)}

/* ===== ikon Font Awesome & interaksi ===== */
i.fa-solid,i.fa-brands{font-style:normal}
.btn i,.tab i,.nav a i,.chip i{margin-right:6px}
.btn.icon-only i{margin:0}
.btn.lg{padding:13px 22px;font-size:15px}
.btn,.tab,.stat,.feat,.pill{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.btn:hover{box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.nav a i{font-size:12px}
.nav a.active{background:var(--white);border-color:var(--ink);box-shadow:var(--sh-s)}
.logo i{font-size:15px}
.tag i{margin-right:6px}
.stat{display:block;text-decoration:none;color:var(--ink);position:relative;transition:transform .12s,box-shadow .12s}
.stat:hover{transform:translate(-2px,-3px) rotate(0)!important;box-shadow:5px 5px 0 var(--ink)}
.stat>i{position:absolute;right:12px;top:10px;font-size:22px;opacity:.35}
.n i{font-size:12px}
.hint i,h3 i,h2 i{margin-right:6px}
h2 .n i{margin:0}
.dbstats span i{margin-right:6px}
.search{position:relative;flex:1;min-width:140px;display:flex}
.search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.6;pointer-events:none}
.search input{padding-left:34px;width:100%}
.hide-sm{font-weight:500}
@media(max-width:600px){.hide-sm{display:none}}
.gap-top{margin-top:12px}
.list .num i{margin-right:8px;opacity:.6}

/* kartu fitur yang bisa diklik */
.feat{display:block;width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s;position:relative;margin:0}
.feat:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.feat:active{transform:translate(2px,2px);box-shadow:none}
.feat .fi{display:grid;place-items:center;width:44px;height:44px;margin-bottom:10px;background:var(--white);border:var(--bd);box-shadow:var(--sh-s);font-size:20px;transform:rotate(-4deg)}
.feat h3{margin-bottom:4px}
.feat p{font-size:14px}
.feat .more{display:inline-block;margin-top:10px;font:800 12px var(--mono)}
.feat .more i{transition:transform .12s}
.feat:hover .more i{transform:translateX(4px)}

/* perintah (klik untuk salin) */
.pill{padding:4px 11px;border:var(--bd);background:var(--purple);font:700 13px var(--mono);box-shadow:var(--sh-s);cursor:pointer;color:var(--ink)}
.pill:hover{background:var(--primary);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.pill:active{transform:translate(2px,2px);box-shadow:none}

/* dialog detail fitur */
.dlg{width:min(92vw,520px);padding:18px;border:var(--bd);background:var(--white);color:var(--ink);box-shadow:8px 8px 0 var(--ink);margin:auto}
.dlg::backdrop{background:rgba(18,18,18,.55)}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.dlg-head h3{margin:0;font-size:20px}
.cmdlist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.cmdlist button{display:flex;width:100%;gap:12px;align-items:center;justify-content:space-between;padding:9px 12px;border:var(--bd);background:var(--paper);cursor:pointer;text-align:left;font:inherit;color:var(--ink);box-shadow:var(--sh-s)}
.cmdlist button:hover{background:var(--primary)}
.cmdlist code{font-weight:700}
.cmdlist span{font-size:13px;color:var(--muted)}

/* tombol kembali ke atas */
.totop{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border:var(--bd);background:var(--primary);box-shadow:var(--sh);font-size:18px;cursor:pointer;z-index:9;color:var(--ink)}
.totop:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.totop:active{transform:translate(2px,2px);box-shadow:none}


/* =====================================================================
   v3 — tampilan lebih hidup (stiker, doodle, tape) + FAQ baru + notifikasi
   ===================================================================== */

/* ---------- hero ---------- */
.hero{position:relative}
.hero h1{position:relative}
.hero h1 mark{position:relative}
.stickers{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin:22px 0 0;padding:0}
.stickers li{padding:4px 11px;border:var(--bd);background:var(--white);font:700 12px var(--mono);box-shadow:var(--sh-s);transform:rotate(var(--r,-1deg))}
.stickers li i{margin-right:6px}
.stickers .st1{--r:-2deg;background:var(--accent)} .stickers .st2{--r:1.4deg;background:var(--green)} .stickers .st3{--r:-.8deg;background:var(--orange)}
.hero-side{position:relative}
.burst{position:absolute;z-index:2;right:-14px;top:-34px;width:92px;height:92px;pointer-events:none;filter:drop-shadow(3px 3px 0 var(--ink))}
.burst polygon{fill:var(--secondary);stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;transform-origin:50px 50px;animation:spin 22s linear infinite}
.burst text{font:800 15px var(--disp);fill:var(--ink);transform:rotate(-9deg);transform-origin:50px 50px}
.burst text+text{font-size:12px;letter-spacing:.06em}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.burst{right:-6px;top:-44px;width:78px;height:78px}}

/* judul bagian: stiker nomor lebih besar, warna bergantian */
h2 .n{width:34px;height:34px;font-size:15px;transform:rotate(-5deg);background:var(--accent)}
section:nth-of-type(3n+2)>h2 .n{background:var(--secondary);transform:rotate(4deg)}
section:nth-of-type(3n)>h2 .n{background:var(--green);transform:rotate(-2deg)}
#features>h2,#security>h2,#pricing>h2{font-size:22px;margin-bottom:16px}

/* kartu: pita (tape) ala tempelan kertas */
.g3>.card:not(.feat),.grid>.card{position:relative}
.g3>.card:not(.feat):not(.price)::before{content:"";position:absolute;top:-11px;left:50%;width:62px;height:20px;transform:translateX(-50%) rotate(var(--tr,-3deg));background:rgba(255,255,255,.55);border:1.5px solid rgba(18,18,18,.55);box-shadow:1px 1px 0 rgba(18,18,18,.35)}
.g3>.card:nth-child(2n)::before{--tr:3deg}
.g3>.card:nth-child(3n)::before{--tr:-1deg}
.reveal.card:hover{box-shadow:5px 5px 0 var(--ink)}
.card{transition:box-shadow .15s}

/* langkah-langkah: nomor + panah penghubung */
.how{counter-reset:st}
.how div{position:relative;counter-increment:st}
.how div::before{content:counter(st);position:absolute;top:-10px;left:-6px;display:grid;place-items:center;width:22px;height:22px;background:var(--ink);color:var(--primary);font:800 11px var(--mono);border:var(--bd)}
@media(min-width:761px){.how div:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;width:12px;height:12px;border-top:3px solid var(--ink);border-right:3px solid var(--ink);transform:translateY(-50%) rotate(45deg);z-index:1}}

/* kartu fitur: nomor & ikon bergantian miring */
.feat{overflow:hidden}
.feat .idx{position:absolute;right:12px;top:10px;font:800 13px var(--mono);opacity:.45}
.feat .fi{width:50px;height:50px;font-size:22px;box-shadow:3px 3px 0 var(--ink)}
.feat:nth-child(even) .fi{transform:rotate(5deg)}
.feat:hover .fi{transform:rotate(0) scale(1.06)}
.feat .fi{transition:transform .15s}

/* footer */
.site-foot{margin-top:40px;background:var(--ink);color:var(--paper);position:relative;border-top:var(--bd)}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;background:linear-gradient(135deg,var(--ink) 25%,transparent 25%) -8px 0,linear-gradient(225deg,var(--ink) 25%,transparent 25%) -8px 0;background-size:16px 12px}
.site-foot .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:26px 16px 30px;color:var(--paper)}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand .logo{color:var(--ink)}
.foot-brand b{display:block;font:800 17px var(--disp);color:var(--primary)}
.foot-brand small{font:500 12px var(--mono);color:#cfc9b8}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 16px;font:700 13px var(--mono)}
.foot-links a{text-decoration:none;color:var(--paper);border-bottom:2px solid transparent;padding-bottom:1px}
.foot-links a:hover{border-color:var(--primary);color:var(--primary)}

/* ---------- FAQ ---------- */
.faq{position:relative;margin:34px 0 18px;padding:22px 20px 22px;background:var(--white);border:var(--bd);box-shadow:var(--sh)}
.faq::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(18,18,18,.07) 31px 32px)}
.faq>*{position:relative}
.faq-head{display:flex;gap:20px;align-items:center;margin-bottom:20px}
.faq-art{flex:none;width:112px}
.faq-art svg{display:block;width:100%;overflow:visible}
.faq-art path{stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round}
.faq-art .b1{fill:var(--primary);transform-origin:40px 40px;animation:wob 5s ease-in-out infinite}
.faq-art .b2{fill:var(--secondary);transform-origin:80px 70px;animation:wob 5s ease-in-out -2.5s infinite}
.faq-art text{font:800 34px var(--disp);fill:var(--ink)}
.faq-art .q2{font-size:30px}
@keyframes wob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-2px)}}
.kicker{display:inline-block;margin:0 0 8px;padding:1px 9px;background:var(--ink);color:var(--primary);font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;transform:rotate(-1.5deg)}
.faq-title h2{display:block;margin:0 0 6px;font-size:clamp(22px,4.2vw,30px);line-height:1.1;letter-spacing:-.04em}
.faq-sub{color:var(--muted);font-size:14px;max-width:56ch}

.faq-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
.faq-tools .search{flex:1 1 240px}
.faq-cats{display:flex;flex-wrap:wrap;gap:8px}
.faq-cat{padding:6px 12px;border:var(--bd);background:var(--paper);font:800 12px var(--mono);cursor:pointer;color:var(--ink);box-shadow:var(--sh-s);transition:transform .08s,box-shadow .08s}
.faq-cat sup{margin-left:5px;font-size:10px;opacity:.6}
.faq-cat:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.faq-cat.active{background:var(--ink);color:var(--primary)}

.faq-grid{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:start}
@media(max-width:820px){.faq-grid{grid-template-columns:1fr}.faq-head{align-items:flex-start}.faq-art{width:84px}}
.faq-list{display:grid;gap:10px}
.qa{--c:var(--primary);margin:0;border:var(--bd);background:var(--paper);box-shadow:var(--sh-s);transition:transform .12s,box-shadow .12s;overflow:hidden}
.qa.k1{--c:var(--primary)} .qa.k2{--c:var(--secondary)} .qa.k3{--c:var(--accent)} .qa.k4{--c:var(--green)} .qa.k5{--c:var(--purple)}
.qa:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.qa[open]{background:var(--white);box-shadow:5px 5px 0 var(--ink)}
.qa summary{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:10px 12px;cursor:pointer;font-weight:800;font-size:15px;line-height:1.3;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after,.qa[open] summary::after{content:none}
.qa[open] summary{background:var(--c);border-bottom:var(--bd)}
.qa-num{flex:none;display:grid;place-items:center;min-width:34px;height:30px;padding:0 6px;background:var(--c);border:var(--bd);font:800 12px var(--mono);transform:rotate(-3deg)}
.qa[open] .qa-num{background:var(--white)}
.qa-q{flex:1}
.qa-tog{flex:none;position:relative;width:26px;height:26px;border:var(--bd);background:var(--white)}
.qa-tog::before,.qa-tog::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:3px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .2s}
.qa-tog::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa[open] .qa-tog::after{transform:translate(-50%,-50%) rotate(0)}
.qa[open] .qa-tog{background:var(--ink)}
.qa[open] .qa-tog::before,.qa[open] .qa-tog::after{background:var(--c)}
.qa-a{padding:12px 14px 14px 58px;font-size:14.5px;color:#2a2823;animation:qa-in .22s ease}
.qa-a p{color:inherit;padding:0;font-size:inherit}
.qa-tag{display:inline-block;margin-top:10px;font:700 11px var(--mono);color:var(--muted)}
@keyframes qa-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:520px){.qa-a{padding-left:14px}}

.faq-aside{position:sticky;top:76px;padding:18px 16px;background:var(--secondary);border:var(--bd);box-shadow:var(--sh);transform:rotate(1deg)}
.faq-aside::before{content:"";position:absolute;top:-11px;left:50%;width:64px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,255,255,.6);border:1.5px solid rgba(18,18,18,.55)}
.aside-ico{display:grid;place-items:center;width:46px;height:46px;margin-bottom:10px;background:var(--white);border:var(--bd);box-shadow:var(--sh-s);font-size:20px;transform:rotate(-5deg)}
.faq-aside h3{font-size:18px;margin-bottom:6px}
.faq-aside p{font-size:14px;color:#2a2823}
.aside-btns{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.aside-btns .btn{text-align:center}
@media(max-width:820px){.faq-aside{position:relative;top:0;transform:none}}

/* ---------- notifikasi: lonceng, panel, kartu ---------- */
.bell{position:relative;display:grid;place-items:center;width:38px;height:38px;border:var(--bd);background:var(--white);box-shadow:var(--sh-s);cursor:pointer;font-size:16px;color:var(--ink);transition:transform .08s,box-shadow .08s}
.bell:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.bell:active{transform:translate(2px,2px);box-shadow:none}
.bell[aria-expanded=true]{background:var(--ink);color:var(--primary)}
.bell-badge{position:absolute;top:-9px;right:-9px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;background:var(--red);color:var(--ink);border:var(--bd);font:800 11px var(--mono);border-radius:10px}
.bell.ring i{animation:ring 1s ease 1}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-16deg)}45%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}

.notif{position:fixed;z-index:12;top:64px;right:12px;width:min(390px,calc(100vw - 24px));max-height:min(74vh,620px);display:flex;flex-direction:column;background:var(--paper);border:var(--bd);box-shadow:6px 6px 0 var(--ink);animation:pop .16s ease}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.notif-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--primary);border-bottom:var(--bd)}
.notif-head h3{margin:0 auto 0 0;font-size:16px}
.notif-list{overflow:auto;padding:10px;display:grid;gap:10px;align-content:start}
.notif-empty{padding:30px 20px;text-align:center;color:var(--muted);font-size:14px}
.notif-empty i{font-size:30px;margin-bottom:10px;opacity:.5}

/* kartu notifikasi — lihat bagian "Notifikasi v4" di bawah */

/* banner disematkan */
.pinned{display:grid;gap:10px;margin-top:16px}
.pinned:empty{display:none}
.pin{--tc:var(--accent);display:flex;align-items:center;gap:12px;padding:10px 12px;border:var(--bd);background:var(--tc);box-shadow:var(--sh-s);font-size:14px}
.pin.t-update{--tc:var(--purple)} .pin.t-promo{--tc:var(--secondary)} .pin.t-success{--tc:var(--green)} .pin.t-warning{--tc:var(--orange)}
.pin-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;background:var(--white);border:var(--bd);transform:rotate(-4deg)}
.pin-txt{flex:1;min-width:0;white-space:pre-line;overflow-wrap:anywhere}
.pin-txt span{font-weight:500}
.pin-x,.push-x{flex:none;width:28px;height:28px;border:var(--bd);background:var(--white);cursor:pointer;color:var(--ink)}
.pin-x:hover,.push-x:hover{background:var(--red)}
@media(max-width:560px){.pin{flex-wrap:wrap}.pin-txt{flex-basis:calc(100% - 100px)}}

/* kartu "masuk" di pojok kanan atas */
.push-stack{position:fixed;z-index:15;top:70px;right:12px;width:min(340px,calc(100vw - 24px));display:grid;gap:10px;pointer-events:none}
.push{--tc:var(--accent);pointer-events:auto;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border:var(--bd);background:var(--white);box-shadow:5px 5px 0 var(--ink);cursor:pointer;animation:slide-in .28s cubic-bezier(.2,.9,.3,1.2)}
.push.t-update{--tc:var(--purple)} .push.t-promo{--tc:var(--secondary)} .push.t-success{--tc:var(--green)} .push.t-warning{--tc:var(--orange)}
.push.out{animation:slide-out .22s ease forwards}
.push-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;background:var(--tc);border:var(--bd);transform:rotate(-4deg)}
.push-txt{flex:1;min-width:0;display:grid;font-size:13px;line-height:1.35}
.push-txt b{font:800 14px var(--disp)}
.push-txt span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@keyframes slide-in{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes slide-out{to{opacity:0;transform:translateX(40px)}}

/* popup broadcast */
.bc-dlg-body .ntc{box-shadow:none;border:0;padding:0}
.bc-dlg-body .ntc-ico{width:54px;height:54px;font-size:24px}
.bc-dlg-body h4{font-size:20px}
.bc-dlg-body p{font-size:15px}
.bc-dlg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:12px;border-top:2px dashed var(--ink)}
.bc-dlg-foot .hint{margin:0}

/* ---------- admin: broadcast ---------- */
.bc-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:start;margin-bottom:18px}
.bc-grid>*{margin:0}
@media(max-width:820px){.bc-grid{grid-template-columns:1fr}}
.types{display:flex;flex-wrap:wrap;gap:8px}
.type-btn{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:var(--bd);background:var(--white);font:800 12px var(--mono);cursor:pointer;color:var(--ink);box-shadow:var(--sh-s)}
.type-btn.t-info{--tc:var(--accent)} .type-btn.t-update{--tc:var(--purple)} .type-btn.t-promo{--tc:var(--secondary)} .type-btn.t-success{--tc:var(--green)} .type-btn.t-warning{--tc:var(--orange)}
.type-btn.active{background:var(--tc);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.counter{float:right;font:500 12px var(--mono);color:var(--muted)}
.bc-prev{position:sticky;top:72px}
.bc-hist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bc-item{display:grid;gap:10px;padding:12px;border:var(--bd);background:var(--paper)}
.bc-item .ntc{box-shadow:none}
.bc-item.dim .ntc{opacity:.55}
.bc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:700 12px var(--mono)}
.bc-meta .sp{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.chip[data-s=live]{background:var(--green)} .chip[data-s=off]{background:var(--paper)} .chip[data-s=expired]{background:var(--orange)}

@media(prefers-reduced-motion:reduce){.burst polygon,.faq-art .b1,.faq-art .b2,.bell.ring i,.push,.notif,.qa-a{animation:none}}


/* ============================================================
   Notifikasi v4 — strip tipe berwarna, gambar sampul, thumbnail
   ============================================================ */
.ntc{--tc:var(--accent);position:relative;display:block;background:var(--white);border:var(--bd);box-shadow:var(--sh-s)}
.ntc.t-info{--tc:var(--accent)} .ntc.t-update{--tc:var(--purple)} .ntc.t-promo{--tc:var(--secondary)} .ntc.t-success{--tc:var(--green)} .ntc.t-warning{--tc:var(--orange)}
.ntc-top{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--tc);border-bottom:var(--bd);font:800 11px var(--mono);text-transform:uppercase;letter-spacing:.07em;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 6px,transparent 6px 12px)}
.ntc-type i{margin:0 3px 0 0}
.ntc-pin{font-size:11px}
.ntc-top time{margin-left:auto;font-weight:600;text-transform:none;letter-spacing:0;color:rgba(18,18,18,.72)}
.ntc-cover{margin:0;aspect-ratio:16/9;overflow:hidden;border-bottom:var(--bd);background:repeating-linear-gradient(45deg,var(--paper) 0 8px,#ece5d0 8px 16px)}
.ntc-cover img{display:block;width:100%;height:100%;object-fit:cover}
.ntc-cover.img-broken{display:none}
.ntc-main{padding:12px 14px 14px}
.ntc h4{margin:0 0 4px;font:800 17px/1.25 var(--disp);letter-spacing:-.01em;overflow-wrap:anywhere}
.ntc p{font-size:14px;color:#2a2823;white-space:pre-line;overflow-wrap:anywhere}
.ntc .btn{margin-top:12px}
.ntc.unread{background:#fffbe6}
.ntc.unread::after{content:"";position:absolute;top:-7px;right:-7px;width:15px;height:15px;background:var(--red);border:var(--bd);border-radius:50%;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.25)}}

/* thumbnail di banner & toast */
.pin-img,.push-img{flex:none;display:block;overflow:hidden;border:var(--bd);background:var(--white);box-shadow:var(--sh-s)}
.pin-img{width:52px;height:52px} .push-img{width:44px;height:44px}
.pin-img img,.push-img img{display:block;width:100%;height:100%;object-fit:cover}
.pin-img.img-broken,.push-img.img-broken{display:none}
.pin{box-shadow:var(--sh)}

/* popup */
.bc-dlg{padding:0;overflow:visible;width:min(94vw,460px)}
.bc-dlg-body{padding:16px 16px 0}
.bc-dlg-body .ntc{box-shadow:none}
.bc-dlg-body .ntc h4{font-size:21px}
.bc-dlg-body .ntc p{font-size:15px}
.bc-dlg-foot{margin:16px;margin-top:14px}

/* ============================================================
   Admin v4
   ============================================================ */
.admin-main{padding-top:20px}
.adm-hero{position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px;margin-bottom:16px;background:var(--ink);color:var(--paper);border:var(--bd);box-shadow:var(--sh);overflow:hidden}
.adm-hero::after{content:"";position:absolute;right:-36px;top:-36px;width:84px;height:84px;background:var(--primary);opacity:.9;transform:rotate(18deg);border:var(--bd)}
.adm-hero .ah-ico{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:54px;height:54px;background:var(--primary);color:var(--ink);border:2px solid var(--paper);box-shadow:3px 3px 0 var(--secondary);font-size:24px;transform:rotate(-5deg)}
.adm-hero h1{position:relative;z-index:1;margin:0;font-size:clamp(22px,5vw,30px);color:var(--primary)}
.adm-hero p{position:relative;z-index:1;font-size:13px;color:#d9d3c0;max-width:46ch}
.adm-hero .ah-pills{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ah-pill{padding:2px 10px;border:2px solid var(--paper);background:transparent;color:var(--paper);font:700 11px var(--mono)}
.ah-pill.ok{background:var(--green);color:var(--ink);border-color:var(--ink)} .ah-pill.warn{background:var(--orange);color:var(--ink);border-color:var(--ink)}
.admin-tabs{position:sticky;top:57px;z-index:8;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 -16px 16px;padding:10px 16px;background:var(--paper);border-bottom:var(--bd);scrollbar-width:none}
.admin-tabs::-webkit-scrollbar{display:none}
.admin-tabs .tab{flex:none;white-space:nowrap}
.admin-tabs .tab i{margin-right:6px}
.admin-tabs .tab.active{box-shadow:3px 3px 0 var(--secondary)}

/* login */
.login-wrap{display:grid;place-items:center;min-height:62vh}
.login-card{position:relative;width:min(100%,420px);margin:0;padding:26px 22px 22px;text-align:center;background:var(--primary)}
.login-card::before{content:"";position:absolute;top:-12px;left:50%;width:78px;height:22px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,255,255,.65);border:1.5px solid rgba(18,18,18,.55)}
.lock-ico{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 12px;background:var(--white);border:var(--bd);box-shadow:var(--sh);font-size:28px;transform:rotate(-5deg)}
.login-card h2{justify-content:center;margin-bottom:6px;font-size:22px}
.login-card .sub{font-size:14px;margin-bottom:16px}
.login-card form{text-align:left}
.pw{position:relative;display:flex}
.pw input{padding-right:46px}
.pw .eye{position:absolute;right:0;top:0;bottom:0;width:42px;border:0;border-left:var(--bd);background:var(--paper);cursor:pointer;color:var(--ink)}
.login-card .btn.dark{width:100%;margin-top:12px;padding:12px}
.login-card .hint{text-align:left;font-size:12.5px}

/* broadcast composer */
.bc-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.tpls{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tpl{padding:4px 10px;border:2px dashed var(--ink);background:rgba(255,255,255,.55);font:700 12px var(--mono);cursor:pointer;color:var(--ink)}
.tpl:hover{background:var(--white);border-style:solid}
.tpl i{margin-right:5px}
.dz{position:relative;display:grid;place-items:center;gap:4px;padding:18px 12px;text-align:center;border:2px dashed var(--ink);background:rgba(255,255,255,.6);cursor:pointer;transition:background .12s,transform .12s}
.dz:hover,.dz.over{background:var(--white);transform:translate(-1px,-1px)}
.dz i{font-size:26px}
.dz b{font:800 14px var(--sans)} .dz span{font-size:12px;color:var(--muted)}
.dz input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.dz.busy{opacity:.6;pointer-events:none}
.img-up{position:relative;border:var(--bd);background:var(--white);box-shadow:var(--sh-s);aspect-ratio:16/9;overflow:hidden}
.img-up img{display:block;width:100%;height:100%;object-fit:cover}
.img-up .btn{position:absolute;right:8px;top:8px}
.seg{display:flex;gap:0;margin-bottom:12px;border:var(--bd);box-shadow:var(--sh-s);background:var(--white)}
.seg button{flex:1;padding:6px 4px;border:0;border-right:var(--bd);background:transparent;font:800 12px var(--mono);cursor:pointer;color:var(--ink)}
.seg button:last-child{border-right:0}
.seg button.active{background:var(--ink);color:var(--primary)}
.pv-stage{padding:14px;border:2px dashed var(--ink);background:var(--paper);display:grid;gap:10px;align-content:start;min-height:120px}
.pv-stage .push{width:100%;animation:none;cursor:default}
.pv-stage .pin{box-shadow:var(--sh-s)}
.pv-stage .pin-x{pointer-events:none}
.bc-item{box-shadow:var(--sh-s);background:var(--white)}
.bc-item .ntc{box-shadow:none}
.bc-item.dim .ntc{opacity:.5;filter:grayscale(.5)}
@media(max-width:820px){.bc-grid{grid-template-columns:minmax(0,1fr)}.bc-prev{position:static}}

/* keamanan */
.sec-list{display:grid;gap:8px;margin-bottom:16px}
.sec-it{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:var(--bd);background:var(--paper)}
.sec-it .si{flex:none;display:grid;place-items:center;width:32px;height:32px;border:var(--bd);font-size:14px;background:var(--green)}
.sec-it.warn .si{background:var(--orange)} .sec-it.bad .si{background:var(--red)}
.sec-it b{display:block;font:800 14px var(--sans)} .sec-it small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4}
.aud{max-height:340px;overflow:auto}
.aud .tbl td{font-size:12px}
.chip[data-s=sec]{background:var(--accent)}

@media(prefers-reduced-motion:reduce){.ntc.unread::after{animation:none}.dz{transition:none}}
.pv-pop{border:var(--bd);background:var(--white);box-shadow:var(--sh)}
.pv-pop .btn{pointer-events:none}
.imgurl{display:block;margin-top:6px;width:100%}

/* mobile: tab admin jadi grid agar semua terlihat; tombol tutup banner di pojok */
@media(max-width:600px){
  .admin-tabs{position:static;display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0 0 16px;padding:0 0 14px;background:none;border-bottom:0}
  .admin-tabs .tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;font-size:12px}
  .admin-tabs .tab i{margin:0;font-size:16px}
}
.pin{position:relative}
@media(max-width:560px){
  .pin{padding-right:44px}
  .pin-x{position:absolute;top:8px;right:8px}
  .pin-txt{flex-basis:calc(100% - 80px)}
}