/* ==========================================================================
   Tema "Pasar Pro Kartu" (v3.2) — dimuat setelah ps2.css untuk etalase pembeli, panel admin, dan panel staf. Owner tidak ikut.
   Satu bahasa kartu: sudut 14px, garis bawah tebal 3px, kepala kartu berikon, teks minimal 12px, tombol sejajar di dasar kartu.
   Ketebalan font diatur admin lewat --w-teks / --w-judul / --w-label (Admin > Tampilan).
   ========================================================================== */
:root{
  --w-teks:600;--w-judul:800;--w-label:800;
  --font:'Lexend Deca','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --accent-dark:#1976d2;--harga:#f05a1a;--harga-bg:#fff1ea;--emas:#f5a400;
  --bg:#eef3f9;--card:#fff;--soft:#e8f3fe;--tert:#f4f7fb;--info-bg:#e8f3fe;
  --text:#14233a;--muted:#52647b;--faint:#74859b;--border:#dfe7f1;--line:#e9eff6;
  --radius:14px;--radius-sm:11px;--shadow:rgba(20,40,80,.07);
}
:root[data-mode=dark]{--bg:#242424;--card:#313131;--soft:#3a3a3a;--tert:#3d3d3d;--info-bg:#3a3a3a;--text:#ededed;--muted:#bcbcbc;--faint:#929292;--border:#454545;--line:#3e3e3e;--harga:var(--accent-text);--harga-bg:#3d3d3d;--shadow:rgba(0,0,0,.35)}
@media(prefers-color-scheme:dark){:root:not([data-mode]){--bg:#242424;--card:#313131;--soft:#3a3a3a;--tert:#3d3d3d;--info-bg:#3a3a3a;--text:#ededed;--muted:#bcbcbc;--faint:#929292;--border:#454545;--line:#3e3e3e;--harga:var(--accent-text);--harga-bg:#3d3d3d;--shadow:rgba(0,0,0,.35)}}

body{font-family:var(--font);font-weight:var(--w-teks);font-size:14px;letter-spacing:0}
h1,h2,h3,h4{font-weight:var(--w-judul);letter-spacing:-.005em}
b,strong,label,th{font-weight:var(--w-label)}
.btn{font-weight:700;border-radius:var(--radius-sm)}
input,select,textarea{font-weight:600;border-width:1.5px;background:var(--tert)}
input:focus,select:focus,textarea:focus{background:var(--card)}
.ik{vertical-align:-.2em}

/* ---------- kartu: bahasa utama ---------- */
.card,.surface,.sf-card,.sf-cat,.sf-wallet,.sf-rv,.sf-row,.ul-card,.ul-sum,.pf-cover,.pd,.lb-row,.sv-row,.faq-i,.rowbtn,.tamu,.rc,.cnt-strip>div{border-bottom-width:3px}
.card,.surface,.k{background:var(--card);border:1px solid var(--border);border-bottom-width:3px;border-radius:var(--radius);box-shadow:0 1px 2px var(--shadow)}
.k{overflow:hidden;min-width:0;margin-bottom:12px}
.kh{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.kh h2,.kh h3{margin:0;flex:1;min-width:0;font-size:15px;font-weight:var(--w-judul)}
.kh .ic,.ic-chip{width:30px;height:30px;border-radius:9px;background:var(--info-bg);color:var(--accent-text);display:grid;place-items:center;font-size:15px;flex:none}
.kh a,.kh .lihat{font-size:12.5px;font-weight:700;color:var(--accent-text);white-space:nowrap}
.kb{padding:14px}
.kh .cd{font-variant-numeric:tabular-nums;background:#14233a;color:#fff;border-radius:7px;padding:3px 9px;font-size:12px;font-weight:700}
:root[data-mode=dark] .kh .cd{background:#000}

/* ---------- label: menarik dan konsisten ---------- */
.lbl,.sf-badge,.pill,.lb,.st,.tag,.ul-tag{font-weight:var(--w-label)}
.lbl{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:12px;line-height:1.4;white-space:nowrap}
.lbl.hot,.sf-badge{background:linear-gradient(135deg,#ff6a1a,#ff3d57);color:#fff;box-shadow:0 2px 6px rgba(255,80,40,.35)}
.lbl.b{background:var(--info-bg);color:var(--accent-text)}.lbl.ok{background:var(--ok-bg);color:var(--ok)}.lbl.warn{background:var(--warn-bg);color:var(--warn)}
.lbl.gold{background:linear-gradient(135deg,#ffc83d,#f59e0b);color:#4a2f00}
.sf-badge{border-radius:8px 8px 8px 0;padding:3px 9px;font-size:11.5px}
body[data-label=lembut] .lbl.hot,body[data-label=lembut] .sf-badge{background:var(--harga-bg);color:var(--harga);box-shadow:none}
body[data-label=outline] .lbl.hot,body[data-label=outline] .sf-badge{background:transparent;color:var(--harga);border:1.5px solid var(--harga);box-shadow:none}
.sf-card .tg{background:var(--info-bg);color:var(--accent-text);padding:2px 9px;border-radius:99px;align-self:flex-start;letter-spacing:.02em;font-size:11px}
.st{border-radius:99px}

/* ---------- header: strip biru, isi putih ---------- */
.sf-hdr{background:var(--accent);backdrop-filter:none;border-bottom:0;box-shadow:0 2px 10px rgba(21,101,192,.25)}
.sf-brand,.sf-brand b{color:#fff}.sf-brand img,.sf-brand .lg{background:#fff;color:var(--accent);border-radius:11px}
.sf-search input{background:#fff;color:#14233a;border:0;border-radius:11px;font-weight:600}.sf-search input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.sf-search i.ic{color:#6b7c93}
.sf-ibtn{color:#fff;border-radius:11px}.sf-ibtn:hover{background:rgba(255,255,255,.16)}.sf-ibtn b{background:#ff3d57;border:2px solid var(--accent)}
.sf-nav a{color:rgba(255,255,255,.88);border-radius:10px;font-weight:700}.sf-nav a:hover{background:rgba(255,255,255,.14);color:#fff}.sf-nav a.on{background:#fff;color:var(--accent-dark)}
.sf-login{background:#fff;color:var(--accent-dark)!important;border-radius:11px;font-weight:800}
.wallet-pill{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff;border-radius:11px}.wallet-pill b{color:#fff}.wallet-pill .wp-ic{background:#fff;color:var(--accent);border-radius:8px}
.sf-mobsearch{background:var(--accent);padding-bottom:12px!important}
.sf-hdr .sf-suggest{color:var(--text)}

/* ---------- beranda ---------- */
.sf-hero{border-radius:var(--radius);border-bottom:3px solid #0d47a1;background:linear-gradient(120deg,#1565c0,var(--accent) 70%,#4fb3ff);padding:22px}
.sf-hero h1{font-weight:var(--w-judul)}
.sf-hero .btn{border-radius:var(--radius-sm)}
.sf-sec{margin:22px 0 10px}.sf-sec h2{font-size:16px;display:flex;align-items:center;gap:8px}
.sf-cats{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.sf-cat{align-items:center;text-align:center;padding:14px 8px;border-radius:var(--radius);gap:8px}
.sf-cat .ic{width:46px;height:46px;border-radius:13px;font-size:21px;background:var(--c,var(--info-bg));color:var(--accent-text)}
.sf-cat b{font-size:13px}
.sf-cat:hover,.sf-card:hover,.pc:hover{border-color:var(--accent)}
.sf-grid{gap:12px}
.sf-card{border-radius:12px;padding:8px;gap:0}
.sf-card .im{aspect-ratio:4/3;border-radius:9px}
.sf-card .bd{padding:10px 4px 4px;gap:6px}
.sf-card b{min-height:2.7em;font-weight:700}
.sf-card .pr{color:var(--harga);font-weight:800;font-size:15.5px}
.sf-card .pr s{color:var(--faint)}
.sf-stars{color:var(--emas)}
.sf-wallet{border-radius:var(--radius)}.sf-wallet .acts a{border-radius:var(--radius-sm);font-weight:700}
.last-order{border-radius:var(--radius);border-bottom-width:3px}
.rc,.sf-row,.sf-rv,.ul-card,.lb-row,.sv-row,.faq-i,.rowbtn{border-radius:12px}
.cnt-strip b{color:var(--accent-text)}
.fav-btn{background:rgba(255,255,255,.94);color:#6b7c93}.fav-btn.on{color:#ef4444}

/* ---------- menu bawah (HP) ---------- */
.sf-mnav{border-top:1px solid var(--border);box-shadow:0 -4px 16px var(--shadow);padding:6px 6px max(6px,env(safe-area-inset-bottom))}
.sf-mnav a{border-radius:12px;font-weight:700;font-size:11.5px;gap:2px;color:var(--faint);padding:6px 2px}
.sf-mnav a .ik,.sf-mnav a i{font-size:22px;width:1.1em;height:1.1em}
.sf-mnav a.on{color:var(--accent-text);background:var(--info-bg)}.sf-mnav a.on::before{display:none}

/* ---------- tombol bantuan, toast, notifikasi ---------- */
.help>button{background:var(--accent);box-shadow:0 8px 20px rgba(21,101,192,.4);border-radius:16px;width:52px;height:52px;font-size:24px}
.help.off>button{background:#78909c}
.help .opts a{border-radius:14px;border-bottom-width:3px}.help .opts a i{border-radius:10px}
.toast{background:#14233a;color:#fff;border-radius:12px;font-weight:700}
.sosial-toast{border-radius:14px;border-bottom-width:3px}
.pbar{height:3px}

/* ---------- form, tabel, banner ---------- */
.banner{border-radius:var(--radius-sm);font-weight:600}
.tbl th{font-weight:var(--w-label)}
.modal>div{border-radius:var(--radius);border-bottom-width:3px}

/* ---------- panel admin & staf: kartu yang sama ---------- */
.nb-card,.nb-side,.nb-kpi{border-bottom-width:3px}
.sa-top{background:var(--accent);color:#fff;border-bottom:0}.sa-top .sa-who small,.sa-top .sa-who b{color:#fff}.sa-top .hb,.sa-top .sf-ibtn{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
.sa-bot{box-shadow:0 -4px 16px var(--shadow)}.sa-bot a .ik,.sa-bot a i{font-size:22px}.sa-bot a.on{background:var(--info-bg);border-radius:12px}
.sa-side a{font-weight:700}

/* ---------- cetak ukuran sentuh nyaman di HP ---------- */
@media(max-width:560px){
  .sf-cats{grid-template-columns:repeat(4,1fr);gap:8px}.sf-cat{padding:10px 4px}.sf-cat .ic{width:42px;height:42px;font-size:19px}.sf-cat b{font-size:12px}
  .sf-hero{padding:18px}.sf-hero h1{font-size:21px}
}
@media(min-width:900px){
  .sf-main{padding-top:20px}
  .sf-cats{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}

/* ---------- bintang & hati (SVG) ---------- */
.sf-stars{display:inline-flex;gap:1px;color:var(--emas);vertical-align:middle;letter-spacing:0}.sf-stars .ik{width:1em;height:1em;vertical-align:baseline}.sf-stars .mati{color:var(--border)}
.ul-rate button,.stars button{display:inline-grid;place-items:center}.ul-rate button .ik,.stars button .ik{width:1em;height:1em;vertical-align:baseline}
.fav-btn .ik{width:18px;height:18px}.fav-btn.on{color:#ef4444}
.pwchk span .ik{width:12px;height:12px;vertical-align:-2px}

/* ---------- beranda Pasar Pro Kartu ---------- */
.hero2{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;margin-bottom:10px}
.hero2 .sf-hero{margin:0;display:flex;flex-direction:column;justify-content:center;min-height:170px}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);margin:0!important;align-content:center}
.st3{padding:16px 8px;text-align:center;min-width:0}.st3+.st3{border-left:1px solid var(--line)}
.st3 b{display:block;font-size:22px;line-height:1.2;color:var(--accent-text);font-variant-numeric:tabular-nums}.st3 b.on{color:var(--ok)}
.st3 span{font-size:12px;color:var(--muted);display:block;margin-top:2px}.st3 span a{color:inherit}
.trust{display:flex;gap:8px 16px;flex-wrap:wrap;margin:0 2px 14px;font-size:12.5px;font-weight:700;color:var(--muted)}
.trust span,.trust a{display:inline-flex;gap:6px;align-items:center;color:var(--muted)}.trust .ik{color:var(--accent-text)}
.sf-cat .ic{background:var(--c,var(--accent));color:#fff;box-shadow:0 3px 8px color-mix(in srgb,var(--c,var(--accent)) 40%,transparent)}
.sf-cat{border-width:1px;border-bottom-width:3px;background:var(--tert)}
.sf-card .im{background:linear-gradient(135deg,var(--c,#2196f3),color-mix(in srgb,var(--c,#2196f3) 65%,#000));color:rgba(255,255,255,.92);font-size:34px}
.sf-card .im .ik{width:1.3em;height:1.3em}
.sf-card .im img{object-fit:cover}
.sf-card .meta{min-height:1.5em;gap:4px}.sf-card .meta .sf-stars{font-size:13px}
.sf-card{background:var(--card)}
.kb .sf-list,.kb .sf-grid{margin:0}
.k .sf-wallet small{display:flex;gap:6px;align-items:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}.two>.k{margin-bottom:12px}
.podium{margin:6px 0 0}
.lc i,.sv-row .ic,.rowbtn .ic{font-size:1em}
.last-order .ik{font-size:20px}.last-order i.ic{width:40px;height:40px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center}
@media(max-width:860px){.hero2{grid-template-columns:1fr}.two{grid-template-columns:1fr}.stats3{order:2}}
@media(max-width:560px){.kb{padding:12px}.sf-grid{gap:10px}.sf-card .bd{padding-top:8px}}
.sf-card .meta b{display:inline;min-height:0;-webkit-line-clamp:unset;font-size:12.5px;color:var(--text)}
.sf-card .meta{align-items:center}
@media(min-width:900px){.sf-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sa-top .sa-who small,.sa-top .sa-who small .ik{color:#fff;opacity:.92}
.sa-top .sa-live i{color:#7dffa8;font-size:11px;width:.9em;height:.9em}.sa-top .sa-live.off i{color:#ff9a90}
.sa-top img,.sa-top .logo{background:#fff;border-radius:10px}
[hidden]{display:none!important}

/* ---------- gambar: foto penuh, logo di tengah, cadangan rapi ---------- */
.sf-card .im img,.rc .im img,.pc .ph img{width:100%;height:100%;object-fit:cover;display:block}
.sf-card .im.logo{background:#fff;--c:#fff}.sf-card .im.logo img{object-fit:contain;padding:14%;background:#fff}
:root[data-mode=dark] .sf-card .im.logo{background:#f4f7fb}
.sf-row .ic img,.sf-sg .ic img{object-fit:contain;background:#fff;padding:2px}
.sf-card .im:has(img){background:var(--tert)}.sf-card .im.logo:has(img){background:#fff}
.sf-card .im img[loading]{background:var(--tert)}
/* galeri & foto akun game */
.gal .trk img{object-fit:cover}.thumbs img{object-fit:cover}
.agrid .cv{background:linear-gradient(135deg,#7c4dff,#4527a0);color:rgba(255,255,255,.9)}.agrid .cv img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- ulasan ringkas ---------- */
.ul-card{padding:12px 14px;border-radius:12px;margin-bottom:10px;font-size:13px}
.ul-hd{gap:9px}.ul-who b{font-size:13.5px}.ul-mail{font-size:11.5px;color:var(--faint);font-weight:500;margin-left:4px}
.ul-meta{gap:6px;font-size:11.5px;margin-top:1px;flex-wrap:wrap}.ul-meta .sf-stars{font-size:12px}.ul-ver{color:var(--ok);font-weight:700;display:inline-flex;gap:3px;align-items:center}.ul-ver .ik{width:12px;height:12px}
.ul-tags{margin-top:8px;gap:5px}.ul-tag{font-size:11px;padding:2px 8px}
.ul-txt{margin:8px 0 0;font-size:13px;line-height:1.5}.ul-prod{margin-top:8px;font-size:11.5px;padding:4px 8px}
.ul-ft{margin-top:8px}.ul-vote{padding:3px 10px;font-size:11.5px}.ul-vote .ik{width:12px;height:12px}
.ul-car .ul-card{flex:0 0 min(80%,300px)}
.ul-sum{padding:14px;border-radius:14px;gap:12px}@media(min-width:700px){.ul-sum{grid-template-columns:160px 1fr}}.ul-big b{font-size:38px}.ul-big .sf-stars{font-size:16px}

/* ---------- kartu Customer Service (beranda) ---------- */
.hero-side{display:grid;gap:12px;align-content:stretch}
.hero-side .stats3,.hero-side .cs-card{margin:0!important}
.cs-card{display:flex;align-items:center;gap:12px;padding:14px;flex-wrap:wrap}
.cs-av{position:relative;width:46px;height:46px;border-radius:14px;background:var(--info-bg);color:var(--accent-text);display:grid;place-items:center;font-size:23px;flex:none}
.cs-dot{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;background:#9aa7b8;border:3px solid var(--card)}
.cs-card.on .cs-dot{background:#1fbd6a;box-shadow:0 0 0 0 rgba(31,189,106,.55);animation:csp 1.8s infinite}.cs-card.off .cs-dot{background:#f5a400}
@keyframes csp{70%{box-shadow:0 0 0 8px rgba(31,189,106,0)}100%{box-shadow:0 0 0 0 rgba(31,189,106,0)}}
.cs-tx{flex:1;min-width:150px}.cs-tx b{display:block;font-size:14.5px}.cs-tx span{display:block;font-size:13px;font-weight:700}.cs-card.on .cs-tx span{color:var(--ok)}.cs-card.off .cs-tx span{color:var(--warn)}
.cs-tx small{display:block;font-size:11.5px;color:var(--faint);margin-top:1px}
.cs-act{display:flex;gap:8px;flex-wrap:wrap}.cs-act .btn{width:auto;padding:9px 14px}
@media(max-width:860px){.cs-act{width:100%}.cs-act .btn{flex:1}}
@media(max-width:860px){.hero2{grid-template-columns:1fr}}

/* ---------- pencarian di header: teks selalu terbaca (terang dan gelap), saran lebih lebar ---------- */
.sf-hdr .sf-search input,.sf-hdr .sf-search input:focus,.sf-hdr .sf-search input:hover{background:#fff;color:#14233a;-webkit-text-fill-color:#14233a;caret-color:#1976d2}
.sf-hdr .sf-search input::placeholder{color:#6b7c93;-webkit-text-fill-color:#6b7c93;opacity:1}
.sf-search .sf-suggest{width:max(100%,min(440px,92vw));left:0;right:auto}
.sf-sg>span:nth-child(2){flex:1;min-width:0}
.sf-sg b,.sf-sg small{color:var(--text)}.sf-sg small{color:var(--muted)}.sf-sg .pr{flex:none;color:var(--harga)}
@media(max-width:560px){.sf-search .sf-suggest{width:100%}}

/* ---------- tutorial video ---------- */
.tut-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.tut-card{background:var(--card);border:1px solid var(--border);border-bottom-width:3px;border-radius:14px;overflow:hidden;min-width:0;display:flex;flex-direction:column}
.tut-play,.tut-card iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:linear-gradient(135deg,#1565c0,#0d47a1);position:relative;padding:0;cursor:pointer;overflow:hidden}
.tut-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tut-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.95);color:#e53935;display:grid;place-items:center;font-size:30px;box-shadow:0 6px 18px rgba(0,0,0,.3);transition:transform .15s}
.tut-play:hover .tut-btn{transform:translate(-50%,-50%) scale(1.08)}
.tut-bd{padding:12px 14px 14px;display:grid;gap:4px}.tut-bd h3{margin:0;font-size:14.5px;line-height:1.35}.tut-bd p{margin:0;font-size:13px;color:var(--muted)}.tut-bd .tg{justify-self:start;background:var(--info-bg);color:var(--accent-text);font-size:11px;font-weight:800;border-radius:99px;padding:2px 9px}

/* ---------- referral, daftar ringkas ---------- */
.ref-box{display:flex;gap:8px;align-items:center;background:var(--tert);border-radius:11px;padding:8px 8px 8px 12px}.ref-box code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.s2l{display:grid;gap:8px}.s2l>div{display:flex;gap:10px;align-items:center;padding:8px 10px;background:var(--tert);border-radius:11px;font-size:13px}

/* v3.6: pita pengumuman, tombol WhatsApp melayang, hitung mundur promo */
.fx-pita{background:#14233a;color:#fff;font-size:13px;font-weight:700;text-align:center;line-height:1.4}.fx-pita .in{max-width:1180px;margin:0 auto;padding:8px 16px}.fx-pita a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fx-wa{position:fixed;z-index:60;left:14px;bottom:84px;display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#fff;border-radius:999px;padding:12px 14px;font-weight:800;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.22);text-decoration:none}.fx-wa .ik{width:24px;height:24px;background:#fff}.fx-wa span{display:none}
@media(min-width:900px){.fx-wa{bottom:20px;left:20px}.fx-wa span{display:inline}}

/* v3.7: beranda ramai */
.hs{padding:0!important;overflow:hidden;position:relative;background:none!important;border-bottom:0!important;border-radius:var(--radius)}
.hs-trk{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--radius)}.hs-trk::-webkit-scrollbar{display:none}
.hs-s{flex:0 0 100%;scroll-snap-align:start;padding:24px 24px 40px;min-height:200px;display:flex;flex-direction:column;justify-content:center;color:#fff;border-bottom:3px solid rgba(0,0,0,.25);position:relative;overflow:hidden}
.hs-s::after{content:"";position:absolute;right:-50px;top:-60px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.hs-s::before{content:"";position:absolute;right:70px;bottom:-90px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.hs-a{background:linear-gradient(120deg,#1565c0,var(--accent) 70%,#4fb3ff)}.hs-b{background:linear-gradient(120deg,#e8420f,#ff7a1a 70%,#ffb347)}.hs-c{background:linear-gradient(120deg,#6a1fc2,#8e44ff 70%,#c08bff)}.hs-d{background:linear-gradient(120deg,#0b7a4b,#1faa59 70%,#6fdc9a)}
.hs-s h1,.hs-s h2{margin:0 0 6px;font-size:28px;line-height:1.15;font-weight:900;letter-spacing:-.01em;color:#fff}.hs-s p{margin:0 0 14px;color:rgba(255,255,255,.92);font-size:14.5px;line-height:1.5;max-width:520px;font-weight:600}
.hs-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);border-radius:99px;padding:4px 12px;font-size:12px;font-weight:800;margin-bottom:10px}.hs-tag .ik{width:14px;height:14px;background:#fff}
.hs-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;z-index:2}.hs-dots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:rgba(255,255,255,.5);cursor:pointer;transition:all .25s}.hs-dots button.on{width:24px;background:#fff}
.hs-s .btn{background:#fff;color:#14233a;width:auto;border-bottom-color:rgba(0,0,0,.2)}
.sf-cats.big{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.sf-cats.big .sf-cat{padding:18px 12px;gap:6px}.sf-cats.big .sf-cat .ic{width:56px;height:56px;border-radius:16px;font-size:26px;color:#fff;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 70%,#000));box-shadow:0 6px 14px color-mix(in srgb,var(--c) 40%,transparent)}.sf-cats.big .sf-cat .ik{background:#fff}
.sf-cat em{font-style:normal;font-size:11.5px;color:var(--muted,#6b7a90);font-weight:600;line-height:1.3}
.hrow{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px;scrollbar-width:thin}.hrow .sf-card{flex:0 0 190px;scroll-snap-align:start}
@media(min-width:900px){.hrow .sf-card{flex-basis:208px}}
.sf-badge.hot2{top:auto;bottom:8px;left:8px;display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#f5a400,#ff7a00)}.sf-badge.hot2 .ik{width:12px;height:12px;background:#fff}
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;background:linear-gradient(120deg,#0f2a52,#14233a 60%,#1b3a6b);border-radius:var(--radius);padding:18px 14px;margin:0 0 14px;color:#fff;border-bottom:3px solid #0a1730}
.band>div{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}.band b{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;color:#fff}.band small{font-size:12px;font-weight:700;color:rgba(255,255,255,.75)}
.band .bi{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.12);display:grid;place-items:center}.band .bi .ik{width:18px;height:18px;background:#8cc8ff}
/* hitung mundur: strip flash sale */
.fx-hitung{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:linear-gradient(120deg,#e8420f,#ff7a1a 60%,#ffb347);color:#fff;border-radius:var(--radius);padding:12px 16px;margin:0 0 14px;border-bottom:3px solid #b32f08;position:relative;overflow:hidden}
.fx-hitung::after{content:"";position:absolute;right:-30px;top:-50px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.13);pointer-events:none}
.fx-bolt{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:none}.fx-bolt .ik{width:22px;height:22px;background:#fff}
.fx-ht{flex:1;min-width:140px}.fx-ht small{font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.9}.fx-ht h3{margin:2px 0 0;font-size:18px;font-weight:900;color:#fff}
.fx-cd{display:flex;gap:6px}.fx-cd span{display:flex;flex-direction:column;align-items:center}.fx-cd b{background:#14233a;color:#fff;border-radius:9px;padding:6px 8px;font-size:19px;min-width:40px;text-align:center;font-variant-numeric:tabular-nums}.fx-cd i{font-style:normal;font-size:10px;font-weight:700;margin-top:2px;opacity:.9}
.fx-go{background:#fff;color:#b32f08;font-weight:900;border-radius:10px;padding:10px 16px;text-decoration:none;font-size:14px;position:relative;z-index:1}
/* pop-up promo */
.fxp{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(10,20,40,.55);backdrop-filter:blur(3px)}.fxp.on{display:flex;animation:fxpf .25s ease}
.fxp-card{position:relative;width:100%;max-width:380px;background:var(--card,#fff);border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);animation:fxpp .38s cubic-bezier(.2,1.3,.4,1)}
.fxp-hd{background:linear-gradient(135deg,#e8420f,#ff7a1a 55%,#ffb347);padding:26px 20px 34px;text-align:center;color:#fff;position:relative;overflow:hidden}.fxp-hd::after{content:"";position:absolute;left:-30px;bottom:-60px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.15)}
.fxp-ic{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.25);display:grid;place-items:center;margin:0 auto 8px;position:relative;z-index:1}.fxp-ic .ik{width:34px;height:34px;background:#fff}
.fxp-tag{font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;position:relative;z-index:1}
.fxp-img img{display:block;width:100%;max-height:200px;object-fit:cover}
.fxp-bd{padding:20px 20px 16px;text-align:center;margin-top:-18px;background:var(--card,#fff);border-radius:20px 20px 0 0;position:relative}.fxp-img+.fxp-bd{margin-top:0;border-radius:0}
.fxp-bd h2{margin:0 0 6px;font-size:21px;font-weight:900;line-height:1.2}.fxp-bd p{margin:0 0 14px;color:var(--muted,#6b7a90);font-size:14px;line-height:1.5}.fxp-bd .btn{width:100%}
.fxp-kode{display:flex;align-items:center;gap:10px;width:100%;border:2px dashed var(--accent,#2196f3);background:var(--info-bg,#eaf4ff);border-radius:12px;padding:8px 12px;margin:0 0 12px;cursor:pointer;font:inherit;color:inherit;text-align:left}.fxp-kode small{display:block;font-size:10.5px;font-weight:700;color:var(--muted,#6b7a90)}.fxp-kode b{font-size:18px;letter-spacing:.08em;font-weight:900;color:var(--accent-text,#1565c0)}.fxp-kode>*:first-child{flex:1}.fxp-kode span{background:var(--accent,#2196f3);color:#fff;border-radius:8px;padding:6px 12px;font-weight:800;font-size:12px}
.fxp-no{background:none;border:0;color:var(--muted,#6b7a90);font-weight:700;font-size:13px;margin-top:10px;cursor:pointer;padding:6px}
.fxp-x{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.28);cursor:pointer;display:grid;place-items:center;padding:0}.fxp-x .ik{width:16px;height:16px;background:#fff}
@keyframes fxpf{from{opacity:0}to{opacity:1}}@keyframes fxpp{from{transform:translateY(24px) scale(.92);opacity:0}to{transform:none;opacity:1}}
@media(max-width:560px){.hs-s{padding:20px 18px 38px;min-height:190px}.hs-s h1,.hs-s h2{font-size:22px}.fx-hitung{padding:12px}.fx-go{width:100%;text-align:center}.fxp{align-items:flex-end;padding:0}.fxp-card{max-width:none;border-radius:22px 22px 0 0}}
@media(prefers-reduced-motion:reduce){.fxp-card,.fxp.on{animation:none}}

/* v3.8: poin, voucher, flash sale */
.poin-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.poin-top small{display:block;font-weight:700;color:var(--muted,#6b7a90);font-size:12px}.poin-top b{font-size:32px;font-weight:900;color:var(--accent-text,#1565c0);font-variant-numeric:tabular-nums}
.poin-hari{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}.poin-hari span{border:2px solid var(--border,#e3e8ef);border-radius:12px;padding:8px 2px;text-align:center;background:var(--card,#fff)}.poin-hari b{display:block;font-size:13px;font-weight:900}.poin-hari small{font-size:10px;color:var(--muted,#6b7a90);font-weight:700}
.poin-hari span.on{background:linear-gradient(135deg,#1faa59,#4cd08a);border-color:#188a47;color:#fff}.poin-hari span.on small{color:rgba(255,255,255,.85)}.poin-hari span.bonus{border-color:#f5a400}.poin-hari span.bonus:not(.on){background:#fff6dc}
.poin-tukar{display:flex;gap:8px;margin-top:6px}.poin-tukar input{flex:1;min-width:0}
.poin-log{margin-top:10px;border-top:1px dashed var(--border,#e3e8ef);padding-top:6px}.poin-log>div{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px}.poin-log>div span{flex:1;font-weight:700}.poin-log small{color:var(--muted,#6b7a90);font-size:11px}.poin-log b.pos{color:#188a47}.poin-log b.neg{color:#d81f26}
.vc-list{display:grid;gap:8px;margin-top:10px}.vc{display:flex;align-items:center;gap:10px;border:2px dashed var(--accent,#2196f3);background:var(--info-bg,#eaf4ff);border-radius:12px;padding:10px 12px}.vc>div{flex:1;min-width:0}.vc b{display:block;font-size:17px;letter-spacing:.06em;font-weight:900;color:var(--accent-text,#1565c0)}.vc small{color:var(--muted,#6b7a90);font-weight:600;font-size:12px}
.sf-badge.flash{top:8px;left:8px;background:linear-gradient(135deg,#e8420f,#ff7a1a);display:inline-flex;align-items:center;gap:4px}.sf-badge.flash .ik{width:12px;height:12px;background:#fff}
.fl-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:linear-gradient(120deg,#e8420f,#ff7a1a 60%,#ffb347);color:#fff;border-radius:12px;padding:10px 14px;margin:0 0 12px;border-bottom:3px solid #b32f08;font-weight:800}.fl-bar .ik{width:20px;height:20px;background:#fff}.fl-bar .cd{margin-left:auto;font-variant-numeric:tabular-nums;background:#14233a;border-radius:8px;padding:4px 10px;font-size:15px}
.vc-home{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px}.vc-home .vcc{flex:0 0 250px;border:2px dashed var(--accent,#2196f3);background:var(--card,#fff);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.vc-home .vcc b{font-size:20px;font-weight:900;letter-spacing:.06em;color:var(--accent-text,#1565c0)}.vc-home .vcc small{color:var(--muted,#6b7a90);font-weight:600}

/* v4.0: tombol salin (pembeli) */
.cp-ok{background:#e3f6ec!important;color:#188a47!important;border-color:#9ad9b6!important}.cp-ok .ik{background:#188a47!important}

/* v4.0: ulasan lebih lega (v3.4 terlalu rapat) */
.ul-card{padding:16px 18px;margin-bottom:12px;font-size:13.5px;border-radius:14px}
.ul-hd{gap:12px;align-items:flex-start}.ul-who b{font-size:14px;display:inline-block;margin-bottom:3px}.ul-meta{gap:8px;margin-top:5px;font-size:12px}.ul-meta .sf-stars{font-size:13px}
.ul-tags{margin-top:12px;gap:6px}.ul-tag{font-size:11.5px;padding:3px 10px}
.ul-txt{margin:12px 0 0;font-size:13.5px;line-height:1.65}.ul-prod{margin-top:12px;font-size:12px;padding:6px 10px}
.ul-ft{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border)}.ul-vote{padding:5px 12px;font-size:12px}
.ul-sum{padding:18px;gap:16px}.ul-chips{gap:8px;margin:10px 0}

/* v4.1: menu kustom bergambar */
.sf-cat .ic.img{background:none!important;padding:0;overflow:hidden}.sf-cat .ic.img img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.sf-cats.big .sf-cat .ic.img{box-shadow:0 6px 14px rgba(0,0,0,.15)}

/* menu bawah: tombol QRIS di tengah (timbul) */
.sf-mnav.has-mid a.mid{position:relative;color:var(--accent-text);background:transparent!important;padding-top:30px}.sf-mnav.has-mid a.mid .mid-btn{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#7c3aed));color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.28);border:4px solid var(--card)}.sf-mnav.has-mid a.mid .mid-btn i{font-size:24px;width:1em;height:1em;color:#fff}
.sf-mnav.has-mid a.mid.on .mid-btn{filter:brightness(1.1)}

/* v5.0: ulasan di halaman produk lebih lega (tidak kartu di dalam kartu), konten tidak tertutup tombol chat */
.ul-wrap{padding:20px 20px 16px}.ul-wrap .ul-tags{margin:0 0 6px}
.ul-wrap #ulProd .ul-card{border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none;background:none;padding:18px 2px 8px;margin:0}.ul-wrap #ulProd .ul-card:first-child{border-top:0;padding-top:10px}
.ul-wrap #ulProd .ul-ft{margin-top:14px;padding-top:14px}
@media(max-width:899px){.sf-main{padding-bottom:150px}}
.bayarpil label i{font-size:22px;width:1.1em;height:1.1em;color:var(--accent-text);flex:none}.bayarpil label.on i{color:var(--accent-text)}
.lbl.err{background:var(--err-bg);color:var(--err)}
/* navigasi bawah yang bisa diatur (v5.3) */
.sf-mnav.nav-kustom a{color:var(--nav-off,var(--faint))}.sf-mnav.nav-kustom a.on{color:var(--nav-on,var(--accent-text));background:color-mix(in srgb,var(--nav-on,var(--accent)) 12%,transparent)}
.sf-mnav.nav-kustom a.mid,.sf-mnav.nav-kustom a.mid.on{background:transparent!important}.nv-img{width:24px;height:24px;object-fit:contain;display:block}.sf-mnav.has-mid a.mid .mid-btn .nv-img{width:28px;height:28px}

/* ===== v5.5 gaya sederhana ala referensi (profile.html): kartu 15px, garis bawah 3px, bayangan tipis, gelap netral ===== */
.card,.k,.sf-wallet,.rcd{border-radius:15px}
.card,.k{border:0;border-bottom:3px solid var(--border);box-shadow:0 1px 2px var(--shadow)}
.pr-main{max-width:520px;margin:0 auto;padding:12px 14px 160px}
.pr-pill{display:flex;align-items:center;gap:12px;padding:14px;border-radius:15px;background:var(--card);border-bottom:3px solid var(--border);box-shadow:0 1px 2px var(--shadow);margin-bottom:10px}
.pr-pill .pf-av{position:relative;width:56px;height:56px;border-radius:50%;border:2px solid var(--accent);padding:2px;flex:none}.pr-pill .pf-av .av,.pr-pill .pf-av img{width:100%!important;height:100%!important;border-radius:50%}
.pr-pill .pf-av button{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:50%;border:2px solid var(--card);background:var(--accent);color:#fff;font-size:9px;display:grid;place-items:center;cursor:pointer;padding:0}
.pr-id{display:flex;flex-direction:column;min-width:0;gap:2px}.pr-id b{font-size:15px;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pr-id span{font-size:12px;color:var(--muted);font-weight:600}
.pr-lv{display:inline-flex;align-items:center;gap:5px;background:var(--accent);color:#fff;font-style:normal;font-size:10px;font-weight:800;padding:3px 10px;border-radius:99px;width:fit-content;margin-top:3px}
.pr-prog{margin:0 4px 10px}.pr-prog .bar{height:6px;border-radius:99px;background:var(--tert);overflow:hidden}.pr-prog .bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}.pr-prog small{display:block;margin-top:5px;font-size:11px;color:var(--muted)}
.pr-tabs{display:flex;gap:22px;border-bottom:3px solid var(--border);margin:6px 2px 12px;overflow-x:auto}.pr-tabs button{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:800;padding:8px 2px 11px;cursor:pointer;position:relative;white-space:nowrap}.pr-tabs button.on{color:var(--accent-text)}.pr-tabs button.on:after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;border-radius:9px;background:var(--accent)}
.pr-pane{display:none}.pr-pane.on{display:block}
.pr-lb{font-size:12px;font-weight:800;color:var(--accent-text);padding:12px 4px 6px}
.pr-row{display:flex;align-items:center;gap:0;padding:11px 14px;margin-bottom:8px;border-radius:15px;background:var(--card);border-bottom:3px solid var(--border);box-shadow:0 1px 2px var(--shadow);color:var(--text);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background .15s}
.pr-row:active{background:var(--tert)}
.pr-ic{width:36px;height:36px;border-radius:10px;background:var(--info-bg);display:grid;place-items:center;flex:none;color:var(--accent-text)}.pr-ic i{font-size:15px}
.pr-dv{width:1px;height:30px;background:var(--border);margin:0 12px;flex:none}
.pr-tx{flex:1;min-width:0}.pr-tx b{display:block;font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pr-tx small{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-ar{font-size:11px;color:var(--faint);margin-left:8px;flex:none}.pr-new{background:#ff5252;color:#fff;font-style:normal;font-size:9px;font-weight:900;padding:2px 7px;border-radius:99px;margin-left:6px;flex:none}
.pr-detail{background:var(--card);border-radius:15px;border-bottom:3px solid var(--border);box-shadow:0 1px 2px var(--shadow);overflow:hidden}.pr-detail>div{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px}.pr-detail>div:last-child{border:0}.pr-detail span{width:38%;color:var(--muted);font-weight:700;font-size:12px}.pr-detail b{flex:1;min-width:0;font-weight:600;word-break:break-word}.pr-detail b.bl{color:var(--accent-text);font-weight:800}
.sheet-bd{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s}.sheet-bd.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;max-height:88vh;max-height:88dvh;background:var(--card);border-radius:20px 20px 0 0;z-index:91;transform:translateY(110%);transition:transform .32s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;box-shadow:0 -10px 40px rgba(0,0,0,.3)}.sheet.on{transform:none}
.sh-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}.sh-h b{flex:1;font-size:15px}.sh-i{width:34px;height:34px;border-radius:10px;background:var(--info-bg);display:grid;place-items:center;color:var(--accent-text)}.sh-x{width:34px;height:34px;border-radius:50%;border:0;background:var(--tert);color:var(--text);cursor:pointer}
.sh-b{overflow-y:auto;padding:14px 16px calc(24px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}.sh-b .k,.sh-b .card{border:0;box-shadow:none;background:transparent;padding:0;margin:0}.sh-b .kb{padding:0}
:root[data-mode=dark] .sf-hdr{background:#2b2b2b}:root[data-mode=dark] .sf-mnav{background:#2b2b2b}
.pr-pill .pf-av{margin:0!important;left:auto!important;top:auto!important;transform:none!important}
:root[data-mode=dark] .sf-mobsearch{background:#2b2b2b}:root[data-mode=dark] .sf-search{background:var(--tert)}:root[data-mode=dark] .sf-search input{color:var(--text)}:root[data-mode=dark] .sf-search input::placeholder{color:var(--faint)}:root[data-mode=dark] .sf-hdr{border-bottom:1px solid #3e3e3e}

/* ===== v5.6 rapi dan tenang: ukuran lebih kecil, jarak aman dari tepi layar, header ringkas, navigasi melayang ===== */
body{font-size:13px}
.btn{padding:10px 16px;font-size:13px;border-radius:12px}.btn.lg{padding:12px 20px;font-size:14px}.btn.sm{padding:7px 12px;font-size:12px}
h2{font-size:15px}h3{font-size:13.5px}.card{padding:14px}.card,.k{margin-bottom:12px}
.sf-main{padding:14px 16px 132px}
@media(max-width:899px){.sf-main,.wrap.toko{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}}
.sf-bar{padding:10px 14px;gap:10px}
.sf-ttl{display:none}.sf-hdr.sub .sf-brand{display:none}
.sf-back{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.18);color:#fff;flex:none;display:grid;place-items:center}
@media(max-width:899px){.sf-hdr.sub .sf-ttl{display:block;flex:1;min-width:0;color:#fff;font-size:15px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sf-hdr.sub #sndBtn{display:none}.sf-hdr.sub .sf-acts{margin-left:auto}}
@media(min-width:900px){.sf-hdr.sub .sf-back{margin-right:4px}}
.sf-mnav{left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;border-radius:22px;border:1px solid var(--border)!important;box-shadow:0 10px 30px rgba(0,0,0,.14)!important;padding:6px!important;gap:2px;background:var(--card)}
.sf-mnav a{border-radius:16px!important;padding:7px 2px 6px!important;font-size:11px!important;gap:3px!important}
.sf-mnav a i{font-size:20px!important}.sf-mnav a.on::before{display:none!important}
.sf-mnav a.on{background:color-mix(in srgb,var(--accent) 14%,transparent)!important}
.sf-mnav.has-mid a.mid .mid-btn{top:-26px;width:52px;height:52px;border:4px solid var(--bg)}
.help{bottom:calc(92px + env(safe-area-inset-bottom))!important;right:14px!important}.fx-wa{bottom:calc(92px + env(safe-area-inset-bottom))!important;left:14px!important}
html.no-bnav .help,html.no-bnav .fx-wa{bottom:calc(20px + env(safe-area-inset-bottom))!important}
html.no-bnav .sf-main,html.no-bnav .wrap.toko{padding-bottom:90px}
@media(min-width:900px){.help,.fx-wa{bottom:24px!important}}
.pr-main{padding:14px 16px 140px}.pr-row{margin-bottom:10px}

/* v5.8 — warna ikut tema toko (tanpa biru bawaan) */
.sf-hero,.hs-a{border-bottom-color:color-mix(in srgb,var(--accent) 55%,#000);background:linear-gradient(120deg,var(--accent-dark,var(--accent)),var(--accent) 70%,color-mix(in srgb,var(--accent) 70%,#fff))}
.band{background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 42%,#0c1117),color-mix(in srgb,var(--accent) 26%,#0c1117) 60%,color-mix(in srgb,var(--accent) 50%,#0c1117));border-bottom-color:color-mix(in srgb,var(--accent) 30%,#000)}
.band .bi .ik{background:color-mix(in srgb,var(--accent) 45%,#fff)}
.tut-play,.tut-card iframe{background:linear-gradient(135deg,var(--accent-dark,var(--accent)),color-mix(in srgb,var(--accent) 60%,#000))}
.fx-pita,.fx-cd b,.kh .cd{background:color-mix(in srgb,var(--accent) 22%,#10151c)}