/* e-Night Store — stylesheet utama. Semua warna/ukuran dari CSS variables tema (diatur di Admin > Customizer). */
:root{
--c-bg:#0A0E1A;--c-bg2:#0E1422;--c-card:#121A2A;--c-section:#0E1422;--c-header:#0F1626;--c-footer:#0B1120;--c-modal:#121A2A;--c-input:#0E1422;--c-dropdown:#121A2A;
--c-primary:#8B5CF6;--c-secondary:#6366F1;--c-accent:#22D3EE;--c-text:#F1F5F9;--c-text2:#CBD5E1;--c-muted:#94A3B8;--c-link:#A78BFA;--c-border:#1E293B;--c-card-text:#F1F5F9;--c-card-muted:#94A3B8;--c-input-text:#F1F5F9;--c-btn:#8B5CF6;--c-btn-text:#FFFFFF;--c-btn-hover:#7C3AED;
--c-success:#10B981;--c-warning:#F59E0B;--c-error:#EF4444;--c-info:#3B82F6;
--g-primary-a:#8B5CF6;--g-primary-b:#6366F1;--g-primary-angle:135deg;--g-primary-pos:100%;--g-btn-a:#8B5CF6;--g-btn-b:#6D28D9;--g-btn-angle:135deg;--g-btn-pos:100%;
--g-hero-a:#1E1B4B;--g-hero-b:#0A0E1A;--g-hero-angle:160deg;--g-hero-pos:100%;--g-card-a:#151E33;--g-card-b:#0F1626;--g-card-angle:180deg;--g-card-pos:100%;--g-opacity:100%;
--font-body:'Inter',system-ui,sans-serif;--font-head:'Inter',system-ui,sans-serif;--fs-body:15px;--fs-head:22px;--fw-body:400;--fw-head:700;
--r-global:14px;--r-card:16px;--r-btn:12px;--r-input:12px;--sh-card:0 2px 10px rgba(0,0,0,.25);--sh-btn:none;--border-w:1px;--section-gap:40px;--section-gap-m:28px;--container:1200px;--content-gap:16px;--container-pad:24px;--container-pad-m:16px;--icon-stroke:2;--density-k:1;
--h-text:#F1F5F9;--h-height:68px;--h-height-m:60px;--h-position:sticky;--h-border-w:1px;--h-shadow:none;--h-logo-size:36px;--s-bg:#0E1422;--s-radius:12px;
--m-bg:#0F1626;--m-text:#E2E8F0;--m-item-bg:#0F1626;--m-active-bg:#26324D;--m-active-text:#FFFFFF;--m-hover:#1A2440;--m-border:#26324D;--m-icon:#A78BFA;--m-radius:18px;--m-shadow:0 12px 34px rgba(0,0,0,.5);--m-width:320px;--m-gap:6px;--m-font:16px;--m-close-bg:#1E293B;--m-close-text:#F1F5F9;
--pc-bg:#121A2A;--pc-border:#1E293B;--pc-border-w:1px;--pc-shadow:0 2px 10px rgba(0,0,0,.25);--pc-radius:16px;--pc-ratio:1 / 1;--pc-img-bg:#0E1422;--pc-title:#F1F5F9;--pc-price:#22D3EE;--pc-old-price:#64748B;--pc-badge-bg:#EF4444;--pc-badge-text:#fff;--pc-btn-bg:#8B5CF6;--pc-btn-text:#fff;--pc-btn-radius:10px;--pc-gap:14px;--pc-gap-m:10px;--pc-gap-t:12px;--cols-d:5;--cols-t:3;--cols-m:2;
--cc-bg:#121A2A;--cc-ratio:3 / 4;--cc-title:#F1F5F9;--cc-desc:#94A3B8;--cc-badge-bg:#8B5CF6;--cc-badge-text:#fff;--cc-radius:16px;--cc-shadow:0 2px 10px rgba(0,0,0,.25);
--bp-border:#8B5CF6;--bs-bg:#1E293B;--bs-text:#F1F5F9;--bs-border:#334155;--bo-color:#A78BFA;--bd-bg:#EF4444;--bd-text:#fff;--btn-border-w:1px;--btn-transition:160ms;
--f-text:#94A3B8;--f-heading:#F1F5F9;--f-link:#CBD5E1;--f-link-hover:#A78BFA;--f-border:#1E293B;--f-logo-size:40px;--f-gap:40px;--f-cols:3;--f-copy-color:#64748B;--f-copy-size:13px;
--fl-bg:#22C55E;--fl-color:#fff;--fl-size:52px;--fl-radius:999px;--fl-bottom:20px;--fl-shadow:0 6px 20px rgba(0,0,0,.35);
--mo-border:#26324D;--mo-border-w:1px;--mo-radius:20px;--mo-shadow:0 12px 34px rgba(0,0,0,.5);--mo-overlay:#000;--mo-overlay-op:70%;--mo-width:440px;
--hero-radius:20px;--hero-gap:14px;--hero-speed:3500;--promo-h-m:150px;--promo-h-d:230px;--pc-chip-bg:#16A34A;--pc-chip-text:#fff;--pc-save-bg:#E11D48;--pc-save-text:#fff;--pc-stock-bg:#FEF3C7;--pc-stock-text:#92400E;--pc-instant:#22C55E;--bg-hero-img:none;--bg-hero-img-m:none;--bg-hero-h:560px;--bg-hero-h-m:440px;--bg-hero-pos:center top;--bg-hero-overlay:35%;--bg-hero-fade-from:40%;--bg-hero-blur:0px;--ld-bg:#0A0E1A;--ld-color:#8B5CF6;--ld-min:350ms;--ld-shim-a:#121A2A;--ld-shim-b:#1E293B;--hero-ratio-d:3 / 1;--hero-ratio-t:16 / 6;--hero-ratio-m:16 / 9;--fs-head-m:18px;--fs-body-m:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:1.55;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
main{flex:1;width:100%}
img{max-width:100%;display:block}
a{color:var(--c-link);text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:var(--fw-head);margin:0;line-height:1.25;color:var(--c-text)}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;flex:none}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--container-pad-m)}
.section{padding-top:calc(var(--section-gap-m)*var(--density-k))}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:calc(var(--content-gap)*var(--density-k))}
.sec-head h2{font-size:var(--fs-head-m)}
.sec-head p{margin:2px 0 0;color:var(--c-muted);font-size:.9em}
.sec-head a.more{font-size:.9em;white-space:nowrap}
@media(min-width:640px){.container{padding:0 var(--container-pad)}.section{padding-top:calc(var(--section-gap)*var(--density-k))}.sec-head h2{font-size:var(--fs-head)}}
@media(max-width:639px){body{font-size:var(--fs-body-m)}}

/* ---- tombol ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r-btn);border:var(--btn-border-w) solid var(--bp-border);background:var(--c-btn);color:var(--c-btn-text);font:inherit;font-weight:600;cursor:pointer;box-shadow:var(--sh-btn);transition:transform var(--btn-transition),background var(--btn-transition),filter var(--btn-transition),box-shadow var(--btn-transition);text-decoration:none}
html[data-btn-use-gradient="on"] .btn:not(.sec):not(.out):not(.dng):not(.ghost){background:linear-gradient(var(--g-btn-angle),color-mix(in srgb,var(--g-btn-a) var(--g-opacity),transparent),color-mix(in srgb,var(--g-btn-b) var(--g-opacity),transparent) var(--g-btn-pos))}
.btn:hover{background:var(--c-btn-hover)}
html[data-btn-hover="lift"] .btn:hover:not(:disabled){transform:translateY(-2px)}
html[data-btn-hover="brighten"] .btn:hover:not(:disabled){filter:brightness(1.15)}
html[data-btn-hover="glow"] .btn:hover:not(:disabled){box-shadow:0 0 18px color-mix(in srgb,var(--c-primary) 70%,transparent)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.sec{background:var(--bs-bg);color:var(--bs-text);border-color:var(--bs-border)}
.btn.out{background:transparent;color:var(--bo-color);border-color:var(--bo-color)}
.btn.dng{background:var(--bd-bg);color:var(--bd-text);border-color:var(--bd-bg)}
.btn.ghost{background:transparent;color:inherit;border-color:transparent}
.btn.block{width:100%}
.btn.sm{min-height:36px;padding:0 14px;font-size:.9em}

/* ---- header ---- */
.ann{background:var(--g-primary-a);background:linear-gradient(var(--g-primary-angle),var(--g-primary-a),var(--g-primary-b));color:#fff;text-align:center;font-size:.88em;padding:8px 16px}
.ann a{color:#fff;text-decoration:underline}
.hd{position:var(--h-position);top:0;z-index:50;background:var(--c-header);color:var(--h-text);border-bottom:var(--h-border-w) solid rgba(255,255,255,.12);box-shadow:var(--h-shadow)}
.hd-in{display:flex;align-items:center;gap:12px;height:var(--h-height-m);max-width:var(--container);margin:0 auto;padding:0 var(--container-pad-m)}
.hd-logo{display:flex;align-items:center;gap:10px;color:var(--h-text);font-family:var(--font-head);font-weight:800;font-size:1.2em;min-width:0}
.hd-logo img{height:var(--h-logo-size);width:auto;max-width:180px;object-fit:contain}
.hd-logo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-sp{flex:1}
.hd-nav{display:none;gap:4px}
.hd-nav a{color:var(--h-text);padding:8px 14px;font-weight:500;border-radius:999px;opacity:.85;position:relative}
.hd-nav a:hover,.hd-nav a.on{opacity:1}
html[data-nav-style="pill"] .hd-nav a.on,html[data-nav-style="pill"] .hd-nav a:hover{background:var(--m-hover)}
html[data-nav-style="underline"] .hd-nav a{border-radius:0}
html[data-nav-style="underline"] .hd-nav a.on::after,html[data-nav-style="underline"] .hd-nav a:hover::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--c-primary)}
.hd-search{display:none;position:relative;flex:0 1 300px}
.hd-search input{width:100%;height:40px;border-radius:var(--s-radius);border:var(--border-w) solid rgba(255,255,255,.18);background:var(--s-bg);color:var(--h-text);padding:0 14px 0 38px;font:inherit}
.hd-search .i{position:absolute;left:12px;top:10px;color:var(--c-muted);width:18px;height:18px}
.hd-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--r-btn);border:var(--border-w) solid var(--c-border);background:transparent;color:var(--h-text);cursor:pointer}
html[data-hbtn-style="solid"] .hd-btn{background:var(--c-btn);color:var(--c-btn-text);border-color:var(--c-btn)}
html[data-hbtn-style="ghost"] .hd-btn{border-color:transparent}
html[data-s-show="hide"] .hd-search{display:none!important}
html[data-h-float="pill"] .hd{background:transparent;border:0}
html[data-h-float="pill"] .hd-in{margin-top:10px;background:var(--c-header);border:var(--h-border-w) solid var(--c-border);border-radius:var(--r-card);box-shadow:var(--h-shadow);max-width:calc(var(--container) - 0px);width:calc(100% - 24px)}
html[data-h-logo-pos="center"] .hd-logo{margin:0 auto}
html[data-h-logo-pos="center"] .hd-sp{display:none}
@media(min-width:900px){.hd-in{height:var(--h-height)}.hd-nav{display:flex}.hd-search{display:block}.hd-burger{display:none}}
@media(max-width:899px){.hd-search-btn{display:inline-flex}}
@media(min-width:900px){.hd-search-btn{display:none}}
.hd-msearch{display:none;padding:0 var(--container-pad-m) 10px;max-width:var(--container);margin:0 auto}
.hd-msearch.open{display:block}
.hd-msearch input{width:100%;height:42px;border-radius:var(--s-radius);border:var(--border-w) solid rgba(255,255,255,.18);background:var(--s-bg);color:var(--h-text);padding:0 14px;font:inherit}

/* ---- menu hamburger ---- */
.mn-bg{position:fixed;inset:0;z-index:90;background:var(--mo-overlay);opacity:0;visibility:hidden;transition:opacity .2s}
.mn-bg{background:color-mix(in srgb,var(--mo-overlay) var(--mo-overlay-op),transparent)}
.mn-bg.open{opacity:1;visibility:visible}
.mn{position:fixed;z-index:91;background:var(--m-bg);color:var(--m-text);border:1px solid var(--m-border);box-shadow:var(--m-shadow);display:flex;flex-direction:column;max-height:calc(100vh - 24px);overflow:auto;visibility:hidden;opacity:0;transition:transform .25s,opacity .25s,visibility .25s}
.mn.open{visibility:visible;opacity:1}
html[data-m-pos="dropdown"] .mn{top:12px;left:12px;right:12px;border-radius:var(--m-radius);transform:translateY(-12px)}
html[data-m-pos="left"] .mn{top:0;bottom:0;left:0;width:min(var(--m-width),88vw);max-height:none;border-radius:0 var(--m-radius) var(--m-radius) 0;transform:translateX(-100%)}
html[data-m-pos="right"] .mn{top:0;bottom:0;right:0;width:min(var(--m-width),88vw);max-height:none;border-radius:var(--m-radius) 0 0 var(--m-radius);transform:translateX(100%)}
.mn.open{transform:none!important}
html[data-m-anim="fade"] .mn{transform:none}
html[data-m-anim="none"] .mn,html[data-m-anim="none"] .mn-bg{transition:none;transform:none}
@media(min-width:640px){html[data-m-pos="dropdown"] .mn{left:auto;width:var(--m-width);right:16px}}
.mn-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;gap:10px}
.mn-x{width:40px;height:40px;border-radius:12px;border:0;background:var(--m-close-bg);color:var(--m-close-text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mn-list{padding:0 12px 12px;display:flex;flex-direction:column;gap:var(--m-gap)}
.mn-list a,.mn-list summary{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;color:var(--m-text);font-size:var(--m-font);background:var(--m-item-bg);cursor:pointer;list-style:none}
.mn-list summary::-webkit-details-marker{display:none}
.mn-list a:hover,.mn-list summary:hover{background:var(--m-hover)}
.mn-list a.on{background:var(--m-active-bg);color:var(--m-active-text)}
.mn-list .i{color:var(--m-icon)}
.mn-sub{padding:4px 0 4px 26px;display:flex;flex-direction:column;gap:var(--m-gap)}
.mn-info{padding:0 16px 8px;color:var(--c-muted);font-size:.88em}
.mn-act{padding:4px 12px 16px;display:flex;flex-direction:column;gap:8px}
.mn-act .btn{width:100%}
.mn-disc{background:#5865F2!important;border-color:#5865F2!important;color:#fff!important}
.mn-wa{background:#22C55E!important;border-color:#22C55E!important;color:#fff!important}
@media(min-width:900px){html[data-m-pos="dropdown"] .mn-list a.dm,.mn-list a.dm{}}

.strip{display:flex;gap:var(--hero-gap);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 0 8px;cursor:grab}
.strip::-webkit-scrollbar{display:none}.strip.drag{cursor:grabbing;scroll-snap-type:none}
.strip a,.strip>div{flex:none;height:var(--promo-h-m);scroll-snap-align:start;border-radius:var(--hero-radius);overflow:hidden;background:var(--c-card);box-shadow:var(--sh-card);display:block;min-width:120px}
.strip img{height:100%;width:auto;max-width:none;display:block;-webkit-user-drag:none;user-select:none}
@media(min-width:1024px){.strip a,.strip>div{height:var(--promo-h-d)}}
.banners{display:none}
/* ---- kategori ---- */
.cats{display:grid;gap:var(--pc-gap-m);grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.cats{grid-template-columns:repeat(4,1fr);gap:var(--pc-gap-t)}}
@media(min-width:1024px){.cats{grid-template-columns:repeat(6,1fr);gap:var(--pc-gap)}}
.cat{position:relative;display:flex;flex-direction:column;background:var(--cc-bg);border:var(--border-w) solid var(--c-border);border-radius:var(--cc-radius);box-shadow:var(--cc-shadow);overflow:hidden;color:var(--cc-title);transition:transform .15s}
.cat:hover{transform:translateY(-2px)}
.cat-img{aspect-ratio:var(--cc-ratio);background:var(--c-bg2);display:flex;align-items:center;justify-content:center;color:var(--c-muted)}
.cat-img img{width:100%;height:100%;object-fit:cover}
.cat-img .i{width:34px;height:34px}
.cat-b{padding:10px 12px 12px}
.cat-b b{display:block;font-size:.95em;color:var(--cc-title)}
.cat-b small{display:block;color:var(--cc-desc);font-size:.8em;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-badge{position:absolute;top:8px;left:8px;background:var(--cc-badge-bg);color:var(--cc-badge-text);font-size:.7em;font-weight:700;padding:3px 9px;border-radius:999px}
html[data-cc-badge-style="square"] .cat-badge{border-radius:4px}
html[data-cc-layout="scroll"] .cats{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
html[data-cc-layout="scroll"] .cat{min-width:150px;scroll-snap-align:start}
html[data-cc-layout="list"] .cats{grid-template-columns:1fr}
html[data-cc-layout="list"] .cat{flex-direction:row;align-items:center}
html[data-cc-layout="list"] .cat-img{width:84px;flex:none}

/* ---- kartu produk ---- */
.grid{display:grid;gap:var(--pc-gap-m);grid-template-columns:repeat(var(--cols-m),minmax(0,1fr))}
@media(min-width:640px){.grid{gap:var(--pc-gap-t);grid-template-columns:repeat(var(--cols-t),minmax(0,1fr))}}
@media(min-width:1024px){.grid{gap:var(--pc-gap);grid-template-columns:repeat(var(--cols-d),minmax(0,1fr))}}
.pc{position:relative;display:flex;flex-direction:column;background:var(--pc-bg);border:var(--pc-border-w) solid var(--pc-border);border-radius:var(--pc-radius);box-shadow:var(--pc-shadow);overflow:hidden;color:var(--pc-title);transition:transform .18s,box-shadow .18s}
html[data-card-use-gradient="on"] .pc{background:linear-gradient(var(--g-card-angle),var(--g-card-a),var(--g-card-b) var(--g-card-pos))}
html[data-pc-hover="lift"] .pc:hover{transform:translateY(-4px)}
html[data-pc-hover="glow"] .pc:hover{box-shadow:0 0 22px color-mix(in srgb,var(--c-primary) 55%,transparent)}
.pc-img{position:relative;aspect-ratio:var(--pc-ratio);background:var(--pc-img-bg);overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
html[data-pc-hover="zoom"] .pc:hover .pc-img img{transform:scale(1.06)}
.ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--c-muted);font-weight:800;font-size:2em;background:linear-gradient(135deg,var(--c-bg2),var(--c-card))}
.pc-badge{position:absolute;z-index:2;background:var(--pc-badge-bg);color:var(--pc-badge-text);font-size:.72em;font-weight:700;padding:4px 10px;border-radius:999px;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-pc-badge-pos="tl"] .pc-badge{top:8px;left:8px}
html[data-pc-badge-pos="tr"] .pc-badge{top:8px;right:8px}
html[data-pc-badge-pos="bl"] .pc-badge{bottom:8px;left:8px}
html[data-pc-badge-pos="br"] .pc-badge{bottom:8px;right:8px}
html[data-pc-badge-style="square"] .pc-badge{border-radius:4px}
html[data-pc-badge-style="ribbon"] .pc-badge{border-radius:0 999px 999px 0;left:0!important;right:auto!important;padding-left:12px}
.pc-b{display:flex;flex-direction:column;gap:5px;padding:11px 12px 12px;flex:1}
.pc-name{font-weight:600;color:var(--pc-title);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.pc-lbl{font-size:.72em;color:var(--c-accent);font-weight:600}
.pc-desc{font-size:.82em;color:var(--c-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-price{margin-top:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.pc-price b{color:var(--pc-price);font-size:1.05em}
.pc-price s{color:var(--pc-old-price);font-size:.82em}
.pc-price small{color:var(--c-muted);font-size:.72em;width:100%}
.pc-meta{font-size:.76em;color:var(--c-muted)}
.pc-btn{margin-top:6px;display:flex;align-items:center;justify-content:center;min-height:36px;border-radius:var(--pc-btn-radius);background:var(--pc-btn-bg);color:var(--pc-btn-text);font-weight:600;font-size:.9em}
html[data-pc-btn-show="hide"] .pc-btn{display:none}
.pc.off{opacity:.65}.pc.off .pc-btn{background:var(--c-border);color:var(--c-muted)}
.empty{text-align:center;color:var(--c-muted);padding:42px 16px;border:1px dashed var(--c-border);border-radius:var(--r-card);grid-column:1/-1}
.empty .i{width:36px;height:36px;margin:0 auto 8px;opacity:.6}

/* ---- flash sale ---- */
.fs{background:linear-gradient(var(--g-hero-angle),var(--g-hero-a),var(--g-hero-b) var(--g-hero-pos));border:var(--border-w) solid var(--c-border);border-radius:var(--r-card);padding:16px}
.fs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fs-head h2{display:flex;align-items:center;gap:8px;color:var(--c-warning)}
.fs-head p{margin:0;color:var(--c-text2);font-size:.85em}
.fs-cd{display:flex;gap:4px;align-items:center;font-weight:700}
.fs-cd b{background:var(--c-card);border:1px solid var(--c-border);border-radius:8px;padding:4px 8px;min-width:34px;text-align:center}
.hscroll{display:flex;gap:var(--pc-gap-m);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px}
.hscroll .pc{min-width:158px;max-width:158px;scroll-snap-align:start}
@media(min-width:640px){.hscroll .pc{min-width:190px;max-width:190px}}

/* ---- halaman dalam ---- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.85em;color:var(--c-muted);padding-top:18px}
.crumb a{color:var(--c-muted)}.crumb a:hover{color:var(--c-link)}
.page-t{padding:14px 0 6px}
.page-t h1{font-size:1.5em}.page-t p{color:var(--c-muted);margin:6px 0 0}
.tools{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.tools input,.tools select,.in{height:44px;border-radius:var(--r-input);border:var(--border-w) solid var(--c-border);background:var(--c-input);color:var(--c-input-text);padding:0 14px;font:inherit;min-width:0}
.tools input{flex:1 1 220px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin:6px 0 4px}
.chip{white-space:nowrap;padding:8px 16px;border-radius:999px;border:var(--border-w) solid var(--c-border);background:var(--c-card);color:var(--c-text2);font-size:.9em}
.chip.on{background:var(--c-primary);border-color:var(--c-primary);color:#fff}

/* ---- detail produk & checkout ---- */
.pd{display:grid;gap:18px;padding-top:14px}
@media(min-width:900px){.pd{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;gap:28px}.pd-side{position:sticky;top:calc(var(--h-height) + 16px)}}
.box{background:var(--c-card);border:var(--border-w) solid var(--c-border);border-radius:var(--r-card);padding:18px;box-shadow:var(--sh-card)}
.box+.box{margin-top:16px}
.box h2{font-size:1.05em;margin-bottom:4px}
.box .sub{color:var(--c-muted);font-size:.88em;margin:0 0 14px}
.pd-img{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--pc-img-bg);aspect-ratio:1/1}
.pd-img img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.pd-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:2px solid transparent;cursor:pointer;opacity:.7}
.pd-thumbs img.on{border-color:var(--c-primary);opacity:1}
.pd-tag{position:absolute;top:10px;left:10px;background:var(--c-primary);color:#fff;font-size:.75em;font-weight:700;padding:5px 11px;border-radius:999px}
.pd-off{position:absolute;bottom:10px;right:10px;background:var(--pc-badge-bg);color:var(--pc-badge-text);font-weight:700;padding:5px 11px;border-radius:10px}
.pd-name{font-size:1.4em}
.pd-price{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:10px 0}
.pd-price s{color:var(--pc-old-price)}
.pd-price b{font-size:1.7em;color:var(--c-text)}
.pd-pct{background:color-mix(in srgb,var(--c-error) 18%,transparent);color:var(--c-error);font-size:.82em;font-weight:700;padding:3px 9px;border-radius:8px}
.desc{background:color-mix(in srgb,var(--c-info) 10%,transparent);border:1px solid color-mix(in srgb,var(--c-info) 28%,transparent);border-radius:var(--r-card);padding:14px;white-space:pre-line;color:var(--c-text2)}
.desc b{display:block;color:var(--c-text);margin-bottom:4px}
.feat{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.feat li{display:flex;gap:10px;color:var(--c-text2)}
.feat .i{color:var(--c-success);width:18px;height:18px;margin-top:3px}
.attrs{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.attrs li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--c-border);padding:6px 0}
.attrs span{color:var(--c-muted)}
.fld{display:block;margin-bottom:14px}
.fld>span{display:block;font-size:.88em;font-weight:600;margin-bottom:6px;color:var(--c-text2)}
.fld>small{display:block;color:var(--c-muted);margin-top:4px;font-size:.8em}
.fld .in,.fld textarea,.fld select{width:100%}
.fld textarea{min-height:90px;padding:10px 14px;height:auto}
.fld .in.bad,.fld textarea.bad{border-color:var(--c-error)}
.err{color:var(--c-error);font-size:.82em;margin-top:4px}
.row{display:flex;gap:8px}
.row .in{flex:1}
.vars{display:grid;gap:10px}
.var,.addon{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border:var(--border-w) solid var(--c-border);background:var(--c-input);border-radius:var(--r-input);cursor:pointer;text-align:left;color:var(--c-text);font:inherit;width:100%}
.var.on{border-color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 12%,var(--c-input))}
.var.dis{opacity:.5;cursor:not-allowed}
.var b{display:block}.var small{color:var(--c-muted)}
.var .pr{text-align:right;white-space:nowrap}.var .pr s{display:block;color:var(--pc-old-price);font-size:.8em}
.addon input{width:20px;height:20px;accent-color:var(--c-primary);flex:none}
.addon .t{flex:1}.addon .t small{display:block;color:var(--c-muted)}
.sum{display:grid;gap:8px;font-size:.95em}
.sum div{display:flex;justify-content:space-between;gap:12px}
.sum .tot{border-top:1px solid var(--c-border);padding-top:10px;font-size:1.1em;font-weight:700}
.sum .disc{color:var(--c-success)}
.note{font-size:.85em;color:var(--c-muted);margin:10px 0 0}
.alert{padding:12px 14px;border-radius:12px;font-size:.92em;margin-bottom:14px;border:1px solid}
.alert.err{background:color-mix(in srgb,var(--c-error) 12%,transparent);border-color:color-mix(in srgb,var(--c-error) 35%,transparent);color:var(--c-error)}
.alert.warn{background:color-mix(in srgb,var(--c-warning) 12%,transparent);border-color:color-mix(in srgb,var(--c-warning) 35%,transparent);color:var(--c-warning)}
.alert.ok{background:color-mix(in srgb,var(--c-success) 12%,transparent);border-color:color-mix(in srgb,var(--c-success) 35%,transparent);color:var(--c-success)}
.alert.info{background:color-mix(in srgb,var(--c-info) 12%,transparent);border-color:color-mix(in srgb,var(--c-info) 35%,transparent);color:var(--c-info)}
.rev{border-top:1px solid var(--c-border);padding:12px 0}
.rev:first-child{border-top:0}.rev small{color:var(--c-muted)}.stars{color:var(--c-warning);letter-spacing:2px}
.faq details{border:var(--border-w) solid var(--c-border);background:var(--c-card);border-radius:var(--r-input);margin-bottom:10px;padding:0 16px}
.faq summary{padding:14px 0;cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:0 0 14px;color:var(--c-text2);white-space:pre-line}

/* ---- status pembayaran ---- */
.stat{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.stat .lbl{color:var(--c-muted);font-size:.85em}
.stat h2{font-size:1.5em;margin-top:2px}
.st-waiting,.st-info{color:var(--c-info)}.st-processing{color:var(--c-warning)}.st-paid,.st-success{color:var(--c-success)}.st-expired,.st-failed,.st-cancelled,.st-refunded{color:var(--c-error)}
.kv{display:grid;gap:10px;margin-top:14px}
.kv div{border:var(--border-w) solid var(--c-border);border-radius:var(--r-input);padding:12px 14px;background:var(--c-input)}
.kv small{display:block;color:var(--c-muted);font-size:.8em}
.kv b{font-size:1.05em}
.qr{text-align:center}
.qr img{max-width:280px;width:100%;margin:12px auto;background:#fff;padding:10px;border-radius:14px}
.items{list-style:none;margin:0;padding:0}
.items li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--c-border)}

/* ---- footer ---- */
.ft{background:var(--c-footer);color:var(--f-text);border-top:var(--border-w) solid var(--f-border);margin-top:calc(var(--section-gap)*var(--density-k));padding:var(--f-gap) 0 0}
.ft a{color:var(--f-link)}.ft a:hover{color:var(--f-link-hover)}
.ft h4{color:var(--f-heading);font-size:1em;margin-bottom:12px}
.ft-grid{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:640px){.ft-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ft-grid{grid-template-columns:1.4fr repeat(var(--f-cols),1fr)}}
.ft-brand{display:flex;align-items:center;gap:10px;color:var(--f-heading);font-family:var(--font-head);font-weight:800;font-size:1.25em;margin-bottom:12px}
.ft-brand img{height:var(--f-logo-size);width:auto;max-width:200px;object-fit:contain}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ft p{margin:0 0 10px;line-height:1.6}
.soc{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.soc a{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:var(--border-w) solid var(--f-border);color:var(--f-link)}
html[data-f-social="round"] .soc a{border-radius:50%}
html[data-f-social="square"] .soc a{border-radius:10px}
html[data-f-social="plain"] .soc a{border:0;width:auto;padding:4px}
.ft-bot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:var(--border-w) solid var(--f-border);margin-top:32px;padding:18px 0 90px;color:var(--f-copy-color);font-size:var(--f-copy-size)}
.ft-bot nav{display:flex;gap:14px;flex-wrap:wrap}
.ft-bot a{color:var(--f-copy-color)}
html[data-f-align="center"] .ft{text-align:center}html[data-f-align="center"] .ft-brand,html[data-f-align="center"] .soc,html[data-f-align="center"] .ft-bot{justify-content:center}
html[data-f-layout="centered"] .ft-grid{grid-template-columns:1fr;text-align:center}html[data-f-layout="centered"] .ft-brand,html[data-f-layout="centered"] .soc{justify-content:center}
html[data-f-layout="stacked"] .ft-grid{grid-template-columns:1fr}

/* ---- tombol mengambang ---- */
.fl{position:fixed;bottom:calc(var(--fl-bottom) + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:8px;height:var(--fl-size);min-width:var(--fl-size);padding:0 18px;background:var(--fl-bg);color:var(--fl-color);border-radius:var(--fl-radius);box-shadow:var(--fl-shadow);font-weight:700;justify-content:center}
html[data-fl-pos="right"] .fl{right:16px}html[data-fl-pos="left"] .fl{left:16px}
html[data-fl-style="icon"] .fl{padding:0;width:var(--fl-size)}html[data-fl-style="icon"] .fl span{display:none}
html[data-fl-show="hide"] .fl{display:none}
html[data-fl-anim="pulse"] .fl{animation:flp 2s infinite}html[data-fl-anim="bounce"] .fl{animation:flb 1.8s infinite}
@keyframes flp{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--fl-bg) 60%,transparent)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes flb{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.fl .i{width:24px;height:24px}

/* ---- modal / popup ---- */
.mo-bg{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:16px;background:color-mix(in srgb,var(--mo-overlay) var(--mo-overlay-op),transparent)}
.mo-bg.open{display:flex}
.mo{position:relative;width:100%;max-width:var(--mo-width);max-height:90vh;overflow:auto;background:var(--c-modal);border:var(--mo-border-w) solid var(--mo-border);border-radius:var(--mo-radius);box-shadow:var(--mo-shadow);animation:mozoom .22s}
html[data-mo-anim="fade"] .mo{animation:mofade .22s}html[data-mo-anim="slide"] .mo{animation:moslide .25s}
@keyframes mozoom{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}@keyframes mofade{from{opacity:0}to{opacity:1}}@keyframes moslide{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.mo img{width:100%;border-radius:var(--mo-radius)}
.mo-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:90px;z-index:120;display:grid;gap:8px;width:min(92vw,380px)}
.toast{background:var(--c-card);border:1px solid var(--c-border);border-left:4px solid var(--c-info);padding:12px 14px;border-radius:12px;box-shadow:var(--sh-card)}
.toast.err{border-left-color:var(--c-error)}.toast.ok{border-left-color:var(--c-success)}
.skel{background:linear-gradient(90deg,var(--c-card),var(--c-bg2),var(--c-card));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r-card);min-height:200px}
@keyframes sk{to{background-position:-200% 0}}
[hidden]{display:none!important}


/* ===== Pola UX ala marketplace (netral terhadap warna tema) ===== */
html[data-h-float="pill"] .hd{padding:10px 0 0;margin-bottom:-2px;background:transparent;border:0}
html[data-h-float="pill"] .hd-in{padding:0 18px;height:var(--h-height-m);background:var(--c-header);border:var(--h-border-w) solid var(--c-border);border-radius:var(--r-card);box-shadow:var(--h-shadow)}
@media(min-width:900px){html[data-h-float="pill"] .hd-in{height:var(--h-height)}}
.box,.mo,.faq details,.pc,.cat,.var,.addon,.kv div,.rev,.toast{--c-text:var(--c-card-text);--c-text2:var(--c-card-text);--c-muted:var(--c-card-muted)}
.box,.var,.addon,.kv div{color:var(--c-card-text)}
.box h1,.box h2,.box h3,.pc-name,.cat-b b{color:var(--c-card-text)}
.in,.fld .in,.fld textarea,.fld select,.tools input,.tools select{background:var(--c-input);color:var(--c-input-text)}
.hd-search input,.hd-msearch input{color:var(--h-text)}
.pc-lbl{color:var(--c-link)}
.pd-side .box{padding:0;overflow:hidden}
.pd-side .box>h2{background:var(--c-primary);color:#fff;margin:0;padding:14px 18px;font-size:1rem}
.pd-side .box>.sub{background:var(--c-primary);color:rgba(255,255,255,.85);margin:0;padding:0 18px 14px;font-size:.85rem}
.pd-side .box>*:not(h2):not(.sub){margin-left:18px;margin-right:18px}
.pd-side .box>h2+*,.pd-side .box>.sub+*{margin-top:16px}
.pd-side .box>*:last-child{margin-bottom:18px}
.pd-side .box .vars{margin-top:16px}
.intro{text-align:center;padding:30px 0 6px}
.intro h1{font-size:1.9rem;text-transform:uppercase;letter-spacing:.01em;line-height:1.15;font-weight:800}
.intro p{color:var(--c-text2);margin:10px auto 0;max-width:520px;font-size:1.02em}
.intro .btn{margin-top:18px;min-height:48px;padding:0 28px;text-transform:uppercase;letter-spacing:.03em}
.stats{display:flex;justify-content:center;margin:24px auto 0;max-width:520px}
.stats>div{flex:1;padding:4px 10px;border-left:1px solid var(--c-border)}.stats>div:first-child{border-left:0}
.stats b{display:block;font-size:1.45rem;font-weight:800;line-height:1.2;color:var(--c-text)}.stats span{color:var(--c-muted);font-size:.82rem}
@media(min-width:640px){.intro{padding:52px 0 10px}.intro h1{font-size:3rem}}
.tabs-cat{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:8px;scrollbar-width:none}.tabs-cat::-webkit-scrollbar{display:none}
.tab-c{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:84px;padding:10px 12px;border-radius:14px;background:var(--c-card);color:var(--c-text);border:var(--border-w) solid var(--c-border);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.tab-c .ti{width:44px;height:44px;border-radius:12px;background:var(--c-bg2);display:flex;align-items:center;justify-content:center;overflow:hidden}.tab-c .ti img{width:100%;height:100%;object-fit:cover}
.tab-c.on{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}.tab-c.on .ti{background:rgba(255,255,255,.2)}
.more-wrap{text-align:center;margin-top:18px}
.fl{border:2px solid rgba(255,255,255,.9)}
.pc-btn{font-weight:700}.pc-name{font-size:.92em}

@media(max-width:639px){.hero,.strip{margin-left:calc(var(--container-pad-m)*-1);margin-right:calc(var(--container-pad-m)*-1)}.strip{padding-left:var(--container-pad-m);padding-right:var(--container-pad-m)}}
.strip{scroll-padding-left:var(--container-pad-m)}

/* ===== Slider banner tengah-besar + tab (gaya pointgamers) ===== */
.cs-tabs{display:flex;max-width:520px;margin:0 auto 18px;padding:5px;border-radius:999px;background:var(--c-card);border:var(--border-w) solid var(--c-border)}
.cs-tab{flex:1;height:46px;border-radius:999px;border:0;background:transparent;color:var(--c-card-muted);font:inherit;font-weight:700;font-size:1rem;cursor:pointer;transition:background .2s,color .2s}
.cs-tab.on{background:linear-gradient(var(--g-primary-angle),color-mix(in srgb,var(--g-primary-a) var(--g-opacity),transparent),var(--g-primary-b));color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.cs-wrap{--cs-w:86%;--cs-l:7%;--cs-r:var(--hero-ratio-m);--cs-k:.93}
@media(min-width:640px){.cs-wrap{--cs-w:66%;--cs-l:17%;--cs-r:var(--hero-ratio-t)}}
@media(min-width:1024px){.cs-wrap{--cs-w:54%;--cs-l:23%;--cs-r:var(--hero-ratio-d)}}
html[data-hero-style="full"] .cs-wrap{--cs-w:100%;--cs-l:0%;--cs-k:1}
.cs{position:relative;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;padding:8px 0}
.cs.drag{cursor:grabbing}
.cs-sp{width:var(--cs-w);margin:0 auto;aspect-ratio:var(--cs-r)}
.cs-slide{position:absolute;top:8px;left:var(--cs-l);width:var(--cs-w);aspect-ratio:var(--cs-r);border-radius:var(--hero-radius);overflow:hidden;background:var(--c-card);box-shadow:0 8px 24px rgba(0,0,0,.35);display:block;transform:translateX(calc(var(--d,0)*(100%*var(--cs-k,.93) + var(--hero-gap))))scale(var(--sc,1));transition:transform .5s cubic-bezier(.22,.8,.3,1),opacity .35s}
.cs.drag .cs-slide{transition:none}
.cs-slide picture,.cs-slide img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;pointer-events:none}
.cs-cap{position:absolute;left:0;right:0;bottom:0;padding:28px 18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff}
.cs-cap h3{color:#fff;font-size:1.1em}.cs-cap p{margin:4px 0 0;font-size:.9em;opacity:.92}.cs-cap .btn{margin-top:10px}
.cs-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
.cs-dots button{width:30px;height:5px;border-radius:99px;border:0;padding:0;cursor:pointer;background:color-mix(in srgb,var(--c-text) 28%,transparent);transition:background .2s,width .2s}
.cs-dots button.on{background:var(--c-primary);width:38px}
@media(max-width:639px){.cs-wrap .cs{margin-left:calc(var(--container-pad-m)*-1);margin-right:calc(var(--container-pad-m)*-1)}}

/* ===== Kartu support ("Chat admin") ===== */
.sup{position:relative;overflow:hidden;border-radius:22px;padding:20px;background:linear-gradient(var(--g-hero-angle),var(--g-hero-a),var(--g-hero-b) var(--g-hero-pos));border:var(--border-w) solid var(--c-border);box-shadow:var(--sh-card)}
.sup-t{position:relative;z-index:1;max-width:62%}
.sup-l{display:flex;align-items:center;gap:8px;color:var(--c-link);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.sup-s{margin:12px 0 0;color:var(--c-text2);font-size:1.1rem}
.sup h2{font-size:2rem;line-height:1.05;margin-top:4px;color:var(--c-text);font-weight:800}
.sup h2 em{font-style:normal;color:var(--c-accent)}
.sup-n{display:flex;align-items:center;gap:8px;margin:12px 0 0;color:var(--c-muted);font-size:.88rem}
.sup-n .i{width:16px;height:16px}
.sup-img{position:absolute;right:6px;top:10px;width:42%;max-width:230px;object-fit:contain;z-index:0}
.sup-btn{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;min-height:58px;padding:0 10px 0 22px;border-radius:16px;background:linear-gradient(135deg,var(--c-accent),color-mix(in srgb,var(--c-accent) 70%,#fff));color:#0B1220;font-size:1.1rem}
.sup-btn b{font-weight:800;color:#0B1220}
.sup-ar{width:40px;height:40px;border-radius:12px;background:#0B1220;color:#fff;display:flex;align-items:center;justify-content:center}
@media(min-width:640px){.sup{padding:28px 32px}.sup-t{max-width:55%}.sup h2{font-size:2.6rem}.sup-btn{max-width:420px}}

/* ===== Band judul section + kategori poster ===== */
.band{display:flex;align-items:center;gap:12px;padding:12px 16px;margin-bottom:14px;background:var(--c-card);border:var(--border-w) solid var(--c-border);border-radius:var(--r-card);box-shadow:var(--sh-card);color:var(--c-card-text)}
.band .i{width:26px;height:26px;color:var(--c-primary)}
.band h2{font-size:1.05rem;text-transform:uppercase;font-style:italic;letter-spacing:.03em;color:var(--c-card-text)}
.band .badge{margin-left:auto;font-size:.78rem;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--c-bg2);color:var(--c-card-muted);white-space:nowrap}
.cats{grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:640px){.cats{grid-template-columns:repeat(4,1fr);gap:12px}}
@media(min-width:1024px){.cats{grid-template-columns:repeat(6,1fr);gap:14px}}
.cat{position:relative;display:block;border-radius:var(--cc-radius);overflow:hidden;background:var(--cc-bg);box-shadow:var(--cc-shadow);border:var(--border-w) solid var(--c-border)}
.cat-img{display:block;aspect-ratio:var(--cc-ratio);width:100%}
.cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.cat:hover .cat-img img{transform:scale(1.06)}
.cat-img .ph{font-size:2.4em}
.cat-b{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 10px;background:linear-gradient(transparent,rgba(0,0,0,.82));text-align:center}
.cat-b b{color:#fff;font-size:.82rem;line-height:1.25;display:block}
.cat-b small{color:rgba(255,255,255,.8);font-size:.7rem;display:block;margin-top:2px}
.cat-badge{top:8px;left:8px;z-index:2}
html[data-cc-layout="scroll"] .cat{min-width:120px}
html[data-cc-layout="list"] .cats{grid-template-columns:1fr}

/* ===== Kartu produk (lebih rapi) ===== */
.pc{padding:8px;gap:0}
.pc-img{border-radius:calc(var(--pc-radius) - 6px)}
.pc-b{padding:10px 4px 4px}
.pc-btn{border-radius:calc(var(--pc-btn-radius) + 2px);min-height:40px;background:linear-gradient(135deg,var(--pc-btn-bg),color-mix(in srgb,var(--pc-btn-bg) 72%,#000))}
.pc-price b{font-size:1.1em}
.pc-badge{box-shadow:0 2px 8px rgba(0,0,0,.35)}

/* ===== Header: logo tengah di mobile + ikon ===== */
.hd-order{display:inline-flex}
html[data-h-float="bar"] .hd{background:var(--c-header)}
@media(max-width:899px){
  .hd-in{position:relative}
  html[data-h-logo-pos="center"] .hd-logo{position:absolute;left:50%;transform:translateX(-50%);margin:0}
  html[data-h-logo-pos="center"] .hd-sp{display:block}
}
.hd-btn{border:0;background:transparent}

/* ===== Background atas (gambar + gradient menyatu ke warna halaman) ===== */
body{position:relative}
.hero-bg{position:absolute;top:0;left:0;right:0;height:var(--bg-hero-h-m);z-index:0;pointer-events:none;overflow:hidden;display:none}
.hero-bg::before{content:"";position:absolute;inset:0;background-image:var(--bg-hero-img-m,var(--bg-hero-img));background-size:cover;background-position:var(--bg-hero-pos);filter:blur(var(--bg-hero-blur));transform:scale(1.04)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,color-mix(in srgb,#000 var(--bg-hero-overlay),transparent) 0%,color-mix(in srgb,#000 calc(var(--bg-hero-overlay) * .6),transparent) var(--bg-hero-fade-from),var(--c-bg) 100%)}
html[data-bg-on="1"] .hero-bg{display:block}
@media(min-width:640px){.hero-bg{height:var(--bg-hero-h)}.hero-bg::before{background-image:var(--bg-hero-img)}}
.hd,main,.ft,#header-root{position:relative;z-index:2}
html[data-h-glass="glass"] .hd-in,html[data-h-glass="glass"][data-h-float="bar"] .hd{background:color-mix(in srgb,var(--c-header) 55%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
html[data-h-glass="glass"] .hd{border-color:rgba(255,255,255,.12)}

/* ===== Layar loading halaman & efek loading gambar ===== */
.pre{position:fixed;inset:0;z-index:300;background:var(--ld-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .45s,visibility .45s}
.pre.hide{opacity:0;visibility:hidden}
html[data-ld-page="off"] .pre{display:none}
.pre-t{color:var(--ld-color);font-weight:600;letter-spacing:.04em;font-size:.95rem}
.pre-i{display:block}
html[data-ld-page="spinner"] .pre-i,html:not([data-ld-page]) .pre-i{width:48px;height:48px;border-radius:50%;border:4px solid color-mix(in srgb,var(--ld-color) 22%,transparent);border-top-color:var(--ld-color);animation:spin .8s linear infinite}
html[data-ld-page="bar"] .pre-i{width:min(220px,60vw);height:5px;border-radius:99px;background:color-mix(in srgb,var(--ld-color) 22%,transparent);position:relative;overflow:hidden}
html[data-ld-page="bar"] .pre-i::after{content:"";position:absolute;inset:0;width:40%;border-radius:99px;background:var(--ld-color);animation:bar 1.1s ease-in-out infinite}
html[data-ld-page="dots"] .pre-i{width:12px;height:12px;border-radius:50%;background:var(--ld-color);box-shadow:-22px 0 var(--ld-color),22px 0 var(--ld-color);animation:dots 1s ease-in-out infinite}
html[data-ld-page="pulse"] .pre-i{width:56px;height:56px;border-radius:16px;background:var(--ld-color);animation:pls 1.2s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes bar{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}
@keyframes dots{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}@keyframes pls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.5}}
.pc-img,.cat-img,.cs-slide,.pd-img,.strip a,.strip>div{background:linear-gradient(100deg,var(--ld-shim-a) 30%,var(--ld-shim-b) 50%,var(--ld-shim-a) 70%);background-size:300% 100%}
html[data-ld-img="shimmer"] .pc-img,html[data-ld-img="shimmer"] .cat-img,html[data-ld-img="shimmer"] .cs-slide,html[data-ld-img="shimmer"] .pd-img,html[data-ld-img="shimmer"] .strip a,html[data-ld-img="shimmer"] .strip>div{animation:shim 1.4s linear infinite}
html[data-ld-img="pulse"] .pc-img,html[data-ld-img="pulse"] .cat-img,html[data-ld-img="pulse"] .cs-slide,html[data-ld-img="pulse"] .pd-img{animation:pls2 1.2s ease-in-out infinite}
html[data-ld-img="none"] .pc-img,html[data-ld-img="none"] .cat-img,html[data-ld-img="none"] .cs-slide,html[data-ld-img="none"] .pd-img{background:var(--c-card);animation:none}
@keyframes shim{to{background-position:-300% 0}}@keyframes pls2{50%{opacity:.7}}
.pc-img img,.cat-img img,.cs-slide img,.pd-img img,.strip img{opacity:0;transition:opacity .35s}
.pc-img img.ld,.cat-img img.ld,.cs-slide img.ld,.pd-img img.ld,.strip img.ld{opacity:1}
html[data-ld-img="none"] .pc-img img,html[data-ld-img="none"] .cat-img img,html[data-ld-img="none"] .cs-slide img,html[data-ld-img="none"] .pd-img img,html[data-ld-img="none"] .strip img{opacity:1}
.ph{position:relative;z-index:1}

/* ===== Kartu produk lengkap ===== */
.pc{padding:0;border-radius:var(--pc-radius);overflow:hidden}
.pc-img{border-radius:0}
.pc-b{padding:12px 12px 12px;gap:7px}
.pc-tag{position:absolute;z-index:2;top:8px;left:8px;max-width:62%;padding:5px 9px;border-radius:7px;background:#DC2626;color:#fff;font-size:.66rem;font-weight:800;line-height:1.15;text-transform:uppercase;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.pc-badge{top:8px;right:8px;left:auto!important;bottom:auto!important;border-radius:999px;padding:5px 11px;font-size:.78rem;font-weight:800}
.pc-badge.st{background:#475569}
.pc-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:4px 10px 4px 8px;border-radius:999px;background:var(--pc-chip-bg);color:var(--pc-chip-text);font-size:.72rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-chip .i{width:13px;height:13px}
.pc-name{font-size:.95em;font-weight:700;line-height:1.3;min-height:0;-webkit-line-clamp:3}
.pc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:.76rem;color:var(--c-card-muted)}
.pc-meta i{width:1px;height:14px;background:var(--c-border)}
.pc-inst{display:inline-flex;align-items:center;gap:5px;color:var(--pc-instant);line-height:1}
.pc-inst .i{width:22px;height:22px;padding:4px;border-radius:7px;background:var(--pc-instant);color:#fff}
.pc-inst b{font-size:.62rem;font-weight:800;line-height:1.05;letter-spacing:.02em}
.pc-rt{display:inline-flex;align-items:center;gap:3px;color:var(--c-card-text)}.pc-rt .i{width:14px;height:14px;color:#F59E0B;fill:#F59E0B;stroke:#F59E0B}
.pc-price{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.pc-price small{color:var(--c-card-muted);font-size:.72rem}
.pc-old{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pc-old s{color:var(--pc-old-price);font-size:.82rem}
.pc-old em{font-style:normal;background:var(--pc-save-bg);color:var(--pc-save-text);font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:999px}
.pc-now{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pc-now b{font-size:1.2em;color:var(--pc-title);font-weight:800}
.pc-stock{background:var(--pc-stock-bg);color:var(--pc-stock-text);font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap}
.pc-btn{margin:2px 0 0;gap:8px;min-height:44px;border-radius:12px;font-size:.92rem}
.pc-btn .i{width:18px;height:18px}
html[data-pc-style="simple"] .pc-chip,html[data-pc-style="simple"] .pc-meta,html[data-pc-style="simple"] .pc-desc{display:none}
.pc-lbl{font-size:.72rem}
.pc-desc{display:none}
html[data-pc-style="rich"] .pc-desc{display:none}

/* ===== Flash sale berhias ===== */
.fs{position:relative;overflow:hidden;border-radius:22px;padding:18px 16px 14px;background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary) 55%,#000),var(--g-hero-a) 45%,var(--g-hero-b));border:var(--border-w) solid color-mix(in srgb,var(--c-primary) 45%,transparent);box-shadow:0 12px 36px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.fs::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 14px,transparent 14px 34px);pointer-events:none}
.fs-shape{position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px)}
.fs-shape.s1{width:220px;height:220px;right:-70px;top:-90px;background:radial-gradient(circle,color-mix(in srgb,var(--c-accent) 55%,transparent),transparent 70%)}
.fs-shape.s2{width:160px;height:160px;left:-60px;bottom:-60px;background:radial-gradient(circle,color-mix(in srgb,var(--c-primary) 60%,transparent),transparent 70%)}
.fs-shape.s3{width:14px;height:14px;right:34%;top:22px;background:var(--c-accent);opacity:.55;box-shadow:60px 40px 0 -3px var(--c-accent),-120px 60px 0 -2px #fff}
.fs-bolt{position:absolute;right:10px;bottom:6px;opacity:.07;pointer-events:none}
.fs-bolt .i{width:170px;height:170px;stroke-width:1.2}
.fs-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.fs-title{display:flex;align-items:center;gap:12px}
.fs-ico{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#FBBF24,#F97316);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(249,115,22,.5);animation:flp2 2s ease-in-out infinite}
.fs-ico .i{width:26px;height:26px;fill:#fff;stroke:#fff}
@keyframes flp2{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.06)}}
.fs-tag{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.16);color:#FDE68A}
.fs-head h2{display:block;color:#fff;font-size:1.35rem;font-weight:800;font-style:italic;text-transform:uppercase;margin-top:3px}
.fs-head p{margin:0;color:rgba(255,255,255,.8);font-size:.84rem}
.fs-time{text-align:right}.fs-time small{display:block;color:rgba(255,255,255,.75);font-size:.72rem;margin-bottom:4px}
.fs-cd{display:inline-flex;gap:4px;align-items:center;font-weight:800;color:#fff}
.fs-cd b{background:#0B1220;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:6px 9px;min-width:38px;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.fs .hscroll{position:relative;z-index:1}
.fs .pc{--c-text:var(--c-card-text)}

/* ===== Section konten ===== */
.feats{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.feats{grid-template-columns:repeat(4,1fr);gap:16px}}
.feat-c{position:relative;overflow:hidden;padding:18px 16px;border-radius:var(--r-card);background:var(--c-card);border:var(--border-w) solid var(--c-border);box-shadow:var(--sh-card);color:var(--c-card-text)}
.feat-c::after{content:"";position:absolute;right:-30px;top:-30px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c-primary) 28%,transparent),transparent 70%)}
.feat-c .fi{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--g-primary-a),var(--g-primary-b));color:#fff;margin-bottom:12px;box-shadow:0 6px 16px color-mix(in srgb,var(--c-primary) 45%,transparent)}
.feat-c b{display:block;font-size:.98rem;color:var(--c-card-text)}.feat-c p{margin:6px 0 0;color:var(--c-card-muted);font-size:.84rem;line-height:1.5}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.steps{grid-template-columns:repeat(4,1fr);gap:18px}}
.steps li{position:relative;padding:18px 16px 16px 66px;border-radius:var(--r-card);background:var(--c-card);border:var(--border-w) solid var(--c-border);box-shadow:var(--sh-card);color:var(--c-card-text)}
.steps .sn{position:absolute;left:14px;top:14px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--g-primary-a),var(--g-primary-b));box-shadow:0 0 0 5px color-mix(in srgb,var(--c-primary) 20%,transparent)}
.steps b{display:block;color:var(--c-card-text)}.steps p{margin:4px 0 0;font-size:.84rem;color:var(--c-card-muted)}
.revs .rev-c{flex:0 0 280px;scroll-snap-align:start;padding:16px;border-radius:var(--r-card);background:var(--c-card);border:var(--border-w) solid var(--c-border);box-shadow:var(--sh-card);color:var(--c-card-text)}
.revs .rev-c p{margin:10px 0 14px;color:var(--c-card-text);font-size:.92rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.revs .stars{color:#F59E0B;letter-spacing:2px}.revs .stars span{color:var(--c-border)}
.rv-by{display:flex;align-items:center;gap:10px}.rv-by small{display:block;color:var(--c-card-muted);font-size:.74rem}.rv-by b{font-size:.9rem}
.av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--g-primary-a),var(--g-primary-b))}

/* ===== Navigasi bawah (mobile) ===== */
.bn{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;justify-content:space-around;padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--c-header) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:var(--border-w) solid var(--c-border)}
.bn a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;color:var(--c-muted);font-size:.68rem;font-weight:600;border-radius:12px}
.bn a .i{width:22px;height:22px}
.bn a.on{color:var(--c-primary)}
.bn a.on .i{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c-primary) 60%,transparent))}
@media(max-width:899px){html:not([data-bn-show="hide"]) .bn{display:flex}html:not([data-bn-show="hide"]) body{padding-bottom:70px}html:not([data-bn-show="hide"]) .fl{bottom:calc(var(--fl-bottom) + 64px + env(safe-area-inset-bottom,0px))}html:not([data-bn-show="hide"]) .toasts{bottom:150px}}
.mn-search{position:relative;margin:0 12px 10px}.mn-search .i{position:absolute;left:12px;top:12px;width:18px;height:18px;color:var(--m-icon)}
.mn-search input{width:100%;height:44px;border-radius:12px;border:1px solid var(--m-border);background:var(--m-item-bg);color:var(--m-text);padding:0 14px 0 40px;font:inherit}
@media(min-width:900px){.mn-search{display:none}}
.hd-order .i{width:22px;height:22px}
.hd-logo{max-width:calc(100% - 150px)}
@media(max-width:899px){html[data-h-logo-pos="center"] .hd-logo{max-width:calc(100% - 170px)}.hd-sp{display:block}}

/* ===== Footer: metode pembayaran ===== */
.pay-chips{display:flex;flex-wrap:wrap;gap:8px}
.pay-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;border:var(--border-w) solid var(--f-border);color:var(--f-heading);font-size:.8rem;font-weight:700}
.pay-chip .i{width:15px;height:15px}

/* ===== Halaman order / status pembayaran ===== */
.ps-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 20px;border-radius:22px;color:#fff;background:linear-gradient(135deg,var(--g-primary-a),var(--g-primary-b));box-shadow:0 14px 34px rgba(0,0,0,.35)}
.ps-hero::before{content:"";position:absolute;right:-50px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12)}
.ps-hero::after{content:"";position:absolute;left:36%;bottom:-70px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.08)}
.ps-hero.st-bg-success,.ps-hero.st-bg-paid{background:linear-gradient(135deg,#059669,#10B981)}
.ps-hero.st-bg-processing{background:linear-gradient(135deg,#D97706,#F59E0B)}
.ps-hero.st-bg-expired,.ps-hero.st-bg-failed,.ps-hero.st-bg-cancelled,.ps-hero.st-bg-refunded{background:linear-gradient(135deg,#BE123C,#E11D48)}
.ps-ic{position:relative;z-index:1;width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3)}
.ps-ic .i{width:34px;height:34px;stroke-width:2.2}
.ps-tx{position:relative;z-index:1;flex:1;min-width:160px}.ps-tx small{opacity:.85;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.ps-tx h1{color:#fff;font-size:1.5rem;margin:2px 0}.ps-tx p{margin:0;opacity:.9;font-size:.9rem}
.ps-time{position:relative;z-index:1;text-align:right}.ps-time small{display:block;opacity:.85;font-size:.74rem;margin-bottom:4px}
.ps-steps{margin-top:16px}
.stepper{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;justify-content:space-between;position:relative}
.stepper::before{content:"";position:absolute;left:12%;right:12%;top:20px;height:3px;background:var(--c-border);border-radius:99px}
.stepper li{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.stepper .sd{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c-bg2);border:2px solid var(--c-border);color:var(--c-card-muted)}
.stepper .sd .i{width:20px;height:20px}
.stepper small{font-size:.72rem;color:var(--c-card-muted);font-weight:600}
.stepper li.done .sd{background:var(--c-success);border-color:var(--c-success);color:#fff}
.stepper li.cur .sd{background:var(--c-primary);border-color:var(--c-primary);color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--c-primary) 25%,transparent);animation:pls 1.6s ease-in-out infinite}
.stepper li.bad .sd{background:var(--c-error);border-color:var(--c-error);color:#fff}
.stepper li.done small,.stepper li.cur small{color:var(--c-card-text)}
.box h2{display:flex;align-items:center;gap:10px}.box h2 .i{width:20px;height:20px;color:var(--c-primary)}
.pd-side .box>h2 .i{color:#fff}
.ir-grid{display:grid;gap:10px;grid-template-columns:1fr;margin-top:14px}
@media(min-width:560px){.ir-grid{grid-template-columns:1fr 1fr}}
.ir{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--c-bg2);border:1px solid var(--c-border)}
.ir .ii{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c-primary) 18%,transparent);color:var(--c-primary);flex:none}
.ir small{display:block;color:var(--c-card-muted);font-size:.74rem}.ir b{font-size:.94rem;color:var(--c-card-text);word-break:break-all}
.copy{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.copy .i{width:14px;height:14px;color:var(--c-primary)}
.ps-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:16px 18px;border-radius:16px;color:#fff;background:linear-gradient(135deg,var(--g-primary-a),var(--g-primary-b));box-shadow:0 8px 22px color-mix(in srgb,var(--c-primary) 40%,transparent)}
.ps-total span{opacity:.9}.ps-total b{font-size:1.5rem;color:#fff}
.qr-frame{position:relative;display:inline-block;margin:14px auto;padding:16px;background:#fff;border-radius:20px;box-shadow:0 10px 28px rgba(0,0,0,.3)}
.qr-frame img{max-width:260px;width:100%;margin:0;padding:0;border-radius:6px}
.qr-frame i{position:absolute;width:26px;height:26px;border:4px solid var(--c-primary)}
.qr-frame i:nth-child(1){left:6px;top:6px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}.qr-frame i:nth-child(2){right:6px;top:6px;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.qr-frame i:nth-child(3){left:6px;bottom:6px;border-right:0;border-top:0;border-radius:0 0 0 10px}.qr-frame i:nth-child(4){right:6px;bottom:6px;border-left:0;border-top:0;border-radius:0 0 10px 0}
.qr-amt{display:inline-block;padding:8px 16px;border-radius:999px;background:color-mix(in srgb,var(--c-primary) 16%,transparent);color:var(--c-card-text);font-size:.92rem}
.qr-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;text-align:left}
.qr-steps li{display:flex;align-items:center;gap:12px;color:var(--c-card-text);font-size:.9rem}
.qr-steps span{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--c-primary);color:#fff;font-weight:800;font-size:.8rem}
.items li{align-items:center}
.it-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--c-bg2);color:var(--c-primary);flex:none}
.it-n{flex:1;min-width:0}.it-n em{font-style:normal;color:var(--c-card-muted)}
.ps-help{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ps-help .hi{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--g-primary-a),var(--g-primary-b));color:#fff}
.ps-help>div{flex:1;min-width:180px}
.ps-help h2 .i{display:none}
/* cek pesanan & form */
.ck-hero{text-align:center;padding:24px 0 8px}
.ck-ic{width:84px;height:84px;margin:0 auto 14px;border-radius:26px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--g-primary-a),var(--g-primary-b));box-shadow:0 14px 34px color-mix(in srgb,var(--c-primary) 45%,transparent),0 0 0 10px color-mix(in srgb,var(--c-primary) 14%,transparent)}
.ck-ic .i{width:42px;height:42px}
.ck-tips{display:grid;gap:10px;margin-top:14px;grid-template-columns:1fr}
@media(min-width:560px){.ck-tips{grid-template-columns:repeat(3,1fr)}}
.ck-tips div{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:var(--c-card);border:1px solid var(--c-border);color:var(--c-card-text);font-size:.84rem}
.ck-tips .i{width:20px;height:20px;color:var(--c-primary);flex:none}
@media(min-width:1024px){.container{padding:0 var(--container-pad)}.intro{padding-top:70px}}

/* ===== Perapihan v6.2: kartu ringkas, flash tenang, header kiri, animasi opsional ===== */
.pc{padding:10px}
.pc-img{border-radius:calc(var(--pc-radius) - 4px)}
.pc-b{padding:10px 2px 0;gap:6px}
.pc-name{font-size:.93em;line-height:1.28}
.pc-tag{top:6px;left:6px;font-size:.62rem;padding:4px 8px}
.pc-badge{top:6px;right:6px;font-size:.74rem;padding:4px 10px}
.pc-meta{gap:4px 7px;font-size:.74rem}
.pc-inst b{font-size:.58rem}.pc-inst .i{width:20px;height:20px;padding:3px}
.pc-old{flex-wrap:nowrap;gap:0;min-height:22px}
.pc-old s{font-size:.78rem;white-space:nowrap}
.pc-old em{margin-left:6px;font-size:.68rem;padding:3px 9px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.pc-old small{font-size:.72rem;color:var(--c-card-muted)}
.pc-now b{font-size:1.1em}
.pc-btn{margin-top:4px;min-height:40px;font-size:.88rem}
.pc-lbl,.pc-desc{display:none!important}
.grid{gap:var(--pc-gap-m)}
/* flash sale: tenang */
.fs{padding:16px 14px 12px;background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary) 22%,var(--c-card)),var(--c-card));border:var(--border-w) solid color-mix(in srgb,var(--c-primary) 35%,var(--c-border));box-shadow:var(--sh-card)}
.fs::before,.fs-shape.s2,.fs-shape.s3,.fs-bolt{display:none}
.fs-shape.s1{width:180px;height:180px;right:-60px;top:-80px;background:radial-gradient(circle,color-mix(in srgb,var(--c-primary) 22%,transparent),transparent 70%)}
.fs-ico{animation:none;box-shadow:none;width:42px;height:42px;border-radius:12px}
.fs-ico .i{width:22px;height:22px}
.fs-tag{background:color-mix(in srgb,var(--c-primary) 18%,transparent);color:var(--c-link)}
.fs-head h2{color:var(--c-card-text);font-size:1.2rem}
.fs-head p,.fs-time small{color:var(--c-card-muted)}
.fs-cd b{background:var(--c-bg2);color:var(--c-card-text);border:1px solid var(--c-border);box-shadow:none;padding:5px 8px;min-width:34px}
.fs-cd{color:var(--c-card-text)}
/* header: [logo] [teks] di kiri */
.hd-logo{display:flex;align-items:center;gap:10px;min-width:0;font-size:var(--h-brand-fs,18px);font-weight:var(--h-brand-fw,800);max-width:calc(100% - 120px)}
.hd-logo .br-i{height:var(--h-logo-size);width:auto;max-width:150px;object-fit:contain;flex:none}
.hd-logo .br-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-h-brand="logo"] .hd-logo:not(.nologo) .br-t{display:none}
html[data-h-brand="text"] .hd-logo .br-i{display:none}
.ft-brand,.mn-top .hd-logo{display:flex;align-items:center;gap:10px}
.ft-brand img{height:var(--f-logo-size)}
@media(max-width:899px){
  html[data-h-logo-pos="left"] .hd-logo{position:static;transform:none}
  html[data-h-logo-pos="left"] .hd-sp{display:block;flex:1}
  .hd-in{gap:6px}
}
.hd-btn{width:40px;height:40px}
/* animasi opsional */
html[data-an-dur="fast"]{--an:.18s}html[data-an-dur="normal"],html:not([data-an-dur]){--an:.4s}html[data-an-dur="slow"]{--an:.8s}
.rv{opacity:0;transition:opacity var(--an,.4s) ease,transform var(--an,.4s) ease}
html[data-an-reveal="up"] .rv{transform:translateY(22px)}
.rv.in{opacity:1;transform:none}
html[data-an-flash="wiggle"] .fs-ico{animation:flp2 2s ease-in-out infinite}
html[data-an-status="pulse"] .stepper li.cur .sd{animation:pls 1.6s ease-in-out infinite}
html[data-an-status="pulse"] .ps-ic{animation:pls 2s ease-in-out infinite}
.stepper li.cur .sd{animation:none}
html[data-an-status="pulse"] .stepper li.cur .sd{animation:pls 1.6s ease-in-out infinite}
html[data-m-anim="none"] .mn,html:not([data-m-anim]) .mn{transition:none}
html[data-mo-anim="none"] .mo{animation:none}
.mo{animation:none}
html[data-mo-anim="zoom"] .mo{animation:mozoom .22s}html[data-mo-anim="fade"] .mo{animation:mofade .22s}html[data-mo-anim="slide"] .mo{animation:moslide .25s}
.btn{transition:none}
html[data-btn-hover]:not([data-btn-hover="none"]) .btn{transition:transform var(--btn-transition),background var(--btn-transition),filter var(--btn-transition),box-shadow var(--btn-transition)}
.pc,.cat{transition:none}
html[data-pc-hover]:not([data-pc-hover="none"]) .pc,html[data-pc-hover]:not([data-pc-hover="none"]) .cat{transition:transform .18s,box-shadow .18s}
.cat:hover{transform:none}
html[data-pc-hover="lift"] .cat:hover{transform:translateY(-3px)}
.cat-img img,.pc-img img{transition:none}
html[data-ld-img="shimmer"] .pc-img img,html[data-ld-img="shimmer"] .cat-img img,html[data-ld-img="pulse"] .pc-img img,html[data-ld-img="pulse"] .cat-img img{transition:opacity .35s}
html[data-pc-hover="zoom"] .pc-img img,html[data-pc-hover="zoom"] .cat-img img{transition:transform .3s}
.cat:hover .cat-img img{transform:none}
html[data-pc-hover="zoom"] .cat:hover .cat-img img{transform:scale(1.06)}
.cs-dots button{transition:none}
/* slider melebar sampai tepi layar di semua perangkat (banner samping tidak terpotong di tepi kontainer) */
html{overflow-x:clip}
.cs-wrap .cs{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:0}
@media(max-width:639px){.cs-wrap .cs{margin-left:calc(50% - 50vw);margin-right:0}}