@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Michroma&display=swap');
/* SPARKTIVE brand – TEMA TETAP (tidak ikut mode gelap/terang HP)
   Charcoal #22272d (latar) + hijau stabilo #cbfe01 (aksen) + putih (teks) */
:root{
  color-scheme:dark; /* memberi tahu browser: halaman sudah gelap, jangan diubah otomatis */
  --bg:#22272d;   /* latar utama – sama dengan background foto brand */
  --card:#2b3138; /* kartu / panel */
  --tx:#ffffff;   /* teks utama */
  --mu:#a7afb8;   /* teks sekunder */
  --ac:#cbfe01;   /* hijau stabilo brand */
  --ac2:#22272d;
  --ink:#16191d;  /* teks di atas hijau stabilo */
  --act:#cbfe01;  /* link */
  --dk:#16191d;   /* panel paling gelap: menu bawah, header admin */
  --dk2:#2b3138;
  --soft:#333d2c; /* latar lembut bernuansa hijau */
  --bd:#3a414a;   /* garis */
  --ok:#9be15d;
  --er:#ff6b6b;
  --wa:#25d366;
  --hd:"Michroma","Space Grotesk",system-ui,sans-serif
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{background:var(--bg);color:var(--tx);font:15px/1.5 "Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--act);font-weight:600}
::selection{background:var(--ac);color:var(--ink)}
.loading{min-height:100vh;display:grid;place-content:center;text-align:center;gap:8px;background:var(--bg);color:#fff}
.loading .mu{color:var(--mu)}
.lg{width:220px;max-width:70vw;background:#0d0f0a;border-radius:12px;padding:12px 16px}
.hl{height:38px;width:auto;background:#0d0f0a;border-radius:8px;padding:8px 10px;display:block}
.mu{color:var(--mu);font-size:13px}
.er{color:var(--er);font-size:13px;min-height:18px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:16px}
.card h3{margin:0 0 4px;font-size:16px}
.big{font-size:24px;font-weight:800}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.grid.w{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row>*{flex:1;min-width:0}
.sec{margin:20px 0 10px;font:400 15px/1.3 var(--hd);text-transform:uppercase;letter-spacing:.02em}
.sec.sec-sm{font:700 12px/1.3 "Space Grotesk",system-ui,sans-serif;letter-spacing:.04em;margin:16px 0 8px}
.btn{display:inline-block;border:1px solid var(--bd);background:var(--card);color:var(--tx);padding:9px 14px;border-radius:10px;font:inherit;cursor:pointer;white-space:nowrap;text-decoration:none;text-align:center}
.btn:hover{border-color:var(--ac)}
.btn.p{background:var(--ac);color:var(--ink);border-color:var(--ac);font-weight:700}
.btn.p:hover{background:var(--dk);color:var(--ac);border-color:var(--ac)}
.btn.ok{background:var(--ok);color:var(--ink);border-color:var(--ok);font-weight:700}
.btn.d{background:var(--er);color:#fff;border-color:var(--er)}
.btn.wa{background:var(--wa);color:#fff;border-color:var(--wa);font-weight:700}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.bl{display:block;width:100%}
.btn:disabled{opacity:.55;cursor:wait}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);color:var(--tx);font:inherit;margin:4px 0 10px}
input::placeholder,textarea::placeholder{color:#8a929c}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 35%,transparent)}
textarea{min-height:80px;resize:vertical}
label{font-size:13px;color:var(--mu)}
table{width:100%;border-collapse:collapse}
td,th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--bd);font-size:14px;vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mu)}
.sc{overflow-x:auto}
.tag{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.tag.w{background:var(--ac);color:var(--ink)}
.tag.x{background:color-mix(in srgb,var(--er) 18%,transparent);color:var(--er)}
.code{font-family:ui-monospace,Menlo,monospace;background:var(--soft);border:1px dashed var(--ac);color:var(--tx);padding:4px 10px;border-radius:8px;font-weight:700}
/* login & pendaftaran: latar charcoal + glow hijau stabilo */
body:has(.auth){background:radial-gradient(120% 60% at 100% 0%,color-mix(in srgb,var(--ac) 40%,transparent) 0%,transparent 55%),radial-gradient(90% 50% at 0% 100%,color-mix(in srgb,var(--ac) 22%,transparent) 0%,transparent 60%),var(--bg);min-height:100vh}
.auth{max-width:420px;margin:0 auto;padding:6vh 16px 40px}
.auth .card{padding:22px;border:0;border-top:6px solid var(--ac);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.notice{background:var(--soft);border:1px solid var(--ac);border-left:6px solid var(--ac);border-radius:14px;padding:14px;margin:12px 16px}
#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:6px;width:min(92%,420px);pointer-events:none}
#toast div{background:var(--dk);color:#fff;border-left:5px solid var(--ac);padding:10px 14px;border-radius:10px;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
/* member (mobile) */
.app{max-width:440px;margin:0 auto;background:var(--bg);min-height:100vh;padding-bottom:96px;position:relative}
.mh{background:radial-gradient(120% 90% at 100% 0%,#e6ff7a 0%,transparent 60%),var(--ac);color:var(--ink);padding:16px 16px 44px;border-radius:0 0 28px 28px}
.mh h2{font:400 18px/1.25 var(--hd);text-transform:uppercase}
.mh.s{padding-bottom:18px}
.top{display:flex;justify-content:space-between;align-items:center}
.srch{margin:-26px 16px 0;background:var(--card);border:2px solid var(--ac);border-radius:30px;box-shadow:0 6px 18px rgba(0,0,0,.35);display:flex;align-items:center;padding:0 16px;gap:8px;position:relative}
.srch input{border:0;background:transparent;margin:0;padding:12px 0;outline:0;box-shadow:none}
.pills{display:flex;gap:10px;padding:16px}
.pills button{flex:1;padding:10px;border-radius:12px;border:2px solid var(--ac);background:transparent;color:var(--tx);font:inherit;font-weight:700;cursor:pointer}
.pills .on{background:var(--ac);color:var(--ink);border-color:var(--ac)}
.bn{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 16px;border-radius:18px;scrollbar-width:none}
.bn::-webkit-scrollbar,.ev::-webkit-scrollbar,.hs::-webkit-scrollbar{display:none}
.sl{flex:0 0 100%;scroll-snap-align:start;min-height:140px;padding:18px;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:6px;position:relative;overflow:hidden}
.sl b{font:400 17px/1.3 var(--hd);text-transform:uppercase}
.sl:nth-child(1){color:var(--ink)}
.sl:nth-child(2) b{color:var(--ac)}
.sl:nth-child(3){color:var(--ink)}
.sl::after{content:"";position:absolute;right:-26px;bottom:-26px;width:96px;height:96px;border-radius:26px;transform:rotate(-14deg);background:currentColor;opacity:.12}
.sl:nth-child(2)::after{background:var(--ac);opacity:.9}
.dots{display:flex;justify-content:center;gap:6px;margin:10px 0}
.dt{width:8px;height:8px;border-radius:50%;background:var(--bd);transition:width .2s}.dt.on{background:var(--ac);width:22px;border-radius:99px}
.sc4{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px 10px}
.ic{background:none;border:0;color:var(--tx);font:inherit;font-size:12px;cursor:pointer;padding:0}
.ic i{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 4px;border-radius:16px;background:var(--ac);font-size:26px;font-style:normal}
.ic:nth-child(even) i{background:var(--dk);box-shadow:inset 0 0 0 1px var(--bd)}
.ic i .gmi{width:34px;height:34px;object-fit:contain;display:block}
.ic i .gmi.blk{filter:brightness(0)}
.gmi.s{width:18px;height:18px;vertical-align:-4px;object-fit:contain}
.ev{display:flex;gap:10px;overflow-x:auto;padding:0 16px 4px;scrollbar-width:none}
.ev button{flex:0 0 80px;height:80px;border-radius:50%;background:var(--ac) center/cover;color:var(--ink);display:grid;place-items:center;text-align:center;font-weight:800;font-size:11px;padding:6px;border:3px solid var(--ac);cursor:pointer;overflow:hidden}
.ev button span{background:rgba(0,0,0,.7);color:var(--ac);padding:2px 5px;border-radius:6px}
.mt{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 8px}.mt h2{margin:0;font:400 15px/1.3 var(--hd);text-transform:uppercase}
.lnk{background:var(--dk);color:var(--ac);border:0;border-radius:99px;padding:6px 14px;font-weight:700;cursor:pointer;font:inherit;font-size:13px}
.hs{display:flex;gap:12px;overflow-x:auto;padding:0 16px 8px;scrollbar-width:none}
.pc{flex:0 0 220px;border:1px solid var(--bd);border-radius:16px;overflow:hidden;background:var(--card);cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit}
.pc .im{height:100px;background:linear-gradient(135deg,#16191d 0%,#22272d 45%,#cbfe01 100%) center/cover;display:grid;place-items:center;font-size:36px}
.pc .bd{padding:10px}
.empty{margin:0 16px;padding:18px;text-align:center;border:1px dashed var(--bd);border-radius:14px;color:var(--mu);font-size:14px}
.tb{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,440px);background:var(--dk);border-top:1px solid var(--bd);display:flex;padding:6px 2px calc(6px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0;box-shadow:0 -4px 14px rgba(0,0,0,.35);z-index:5}
.tb button{flex:1;background:none;border:0;color:#a7afb8;font:inherit;font-size:11px;cursor:pointer;padding:4px 0}
.tb button span{display:block;font-size:21px;width:44px;margin:0 auto 1px;border-radius:12px;padding:2px 0}
.tb .on{color:var(--ac);font-weight:700}.tb .on span{background:var(--ac)}
.tb span .tbi{width:26px;height:26px;object-fit:contain;display:block;margin:3px auto 2.5px}
.tb .on span .tbi{filter:brightness(0)}
.tb .on span .tbc{filter:none}
.pad{padding:16px}
.wafab{position:fixed;right:max(14px,calc(50% - 206px));bottom:calc(84px + env(safe-area-inset-bottom,0px));width:52px;height:52px;border-radius:50%;background:var(--wa);color:#fff;border:0;font-size:26px;box-shadow:0 4px 14px rgba(0,0,0,.4);z-index:6;cursor:pointer}
.pimg{width:100%;height:180px;object-fit:cover;display:block}
.ph{height:120px;display:grid;place-items:center;font-size:42px;background:linear-gradient(135deg,#16191d 0%,#22272d 45%,#cbfe01 100%)}
.inc td:last-child{text-align:right;color:var(--ok);font-weight:700;white-space:nowrap}
/* admin */
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.ah{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;flex-wrap:wrap;background:var(--dk);color:#fff;padding:10px 14px;border-radius:16px;border-bottom:4px solid var(--ac)}
.ah .mu{color:var(--mu)}
.ah .btn{background:transparent;color:#fff;border-color:var(--bd)}
.ah .btn:hover{background:var(--ac);color:var(--ink);border-color:var(--ac)}
nav.at{display:flex;gap:6px;overflow-x:auto;margin-bottom:16px;padding-bottom:4px}
nav.at button{border:1px solid var(--bd);background:var(--card);color:var(--tx);padding:8px 14px;border-radius:10px;font:inherit;cursor:pointer;white-space:nowrap}
nav.at button.on{background:var(--ac);color:var(--ink);border-color:var(--ac);font-weight:700}
.badge{background:var(--er);color:#fff;border-radius:99px;padding:0 7px;font-size:11px;margin-left:4px}
.lr{display:flex;gap:6px;margin-bottom:6px;align-items:center}
.lr input,.lr select{margin:0}
.thumb{width:100%;height:140px;object-fit:cover;border-radius:10px;display:block;margin:4px 0 8px}
@media (max-width:520px){.wrap{padding:12px}td,th{font-size:13px}}
.stats{grid-template-columns:repeat(3,1fr)}.stats .card{padding:10px 12px}
.stats .card:first-child{background:var(--ac);border-color:var(--ac);color:var(--ink)}
.stats .card:first-child .mu{color:#3a4a14}
/* override warna banner (inline style di app.js) agar cukup ganti file ini saja */
.sl:nth-child(1){background:linear-gradient(135deg,#cbfe01,#e2ff6b)!important}
.sl:nth-child(2){background:linear-gradient(135deg,#16191d,#2b3138)!important}
.sl:nth-child(3){background:linear-gradient(135deg,#eaffb0,#cbfe01)!important}