/* Voxxaa STORE v83: tampilan bersih.
   - Tanpa campuran hitam (gradasi gelap, bayangan hitam, lapisan pudar hitam, sekat hitam).
   - Satu warna aksen dari tema toko, permukaan datar sewarna aksen.
   - Glow dibuat tipis dan seragam, tanpa glow ganda bertumpuk.
   Dimuat paling akhir, hanya untuk halaman toko. */

html:root:root:root{
  /* permukaan datar: nuansa dari warna aksen, bukan hitam */
  --cl-bg:#0d1218;--cl-s1:#131a22;--cl-s2:#19222c;--cl-line:rgba(var(--acc-rgb),.28);--cl-line-soft:rgba(255,255,255,.08);
  --black:var(--cl-bg);--aur-top:var(--cl-bg);--panel:var(--cl-s1);--panel2:var(--cl-s2);--line:var(--cl-line);
  --glass:var(--cl-s1);--glass-2:var(--cl-s2);--glass-b:var(--cl-line);
  --glow:rgba(var(--acc-rgb),.16);
  --soft:0 0 0 4px rgba(var(--acc-rgb),.12);
}
@supports (color:color-mix(in srgb,red,blue)){
  html:root:root:root{
    --cl-bg:color-mix(in srgb,var(--acc) 8%,#0c1117);
    --cl-s1:color-mix(in srgb,var(--acc) 11%,#111821);
    --cl-s2:color-mix(in srgb,var(--acc) 16%,#151e28);
  }
}

/* ===== latar: satu warna rata, tanpa blob bergerak dan partikel acak ===== */
html body{background:var(--cl-bg)}
.aurora{background:radial-gradient(70% 38% at 50% 0%,rgba(var(--acc-rgb),.14),transparent 70%),var(--cl-bg)}
.aurora i{display:none}
#fx{display:none}

/* ===== kaca diganti permukaan solid ===== */
.glass,.glass-strong,.card,.chip,.tab,.tm,details,.chips-pay span,.ad,.notice,.search,input,select,textarea,.top,.nav,.hours,.hbn-info,.statbar,.wa{
  -webkit-backdrop-filter:none;backdrop-filter:none}
.glass,.glass-strong{background:var(--cl-s1);border:1px solid var(--cl-line);box-shadow:none}
.glass::before{display:none}
.top{background:var(--cl-bg);border-bottom:1px solid var(--cl-line)}
.top::after{display:none}
.mark,.hero-logo{filter:none}
.brand i{box-shadow:none}

/* ===== header ===== */
.nav{background:var(--cl-s1);border:1px solid var(--cl-line);box-shadow:none}
.nav-ind{background:var(--acc);box-shadow:none}
.nav-ind::after{display:none}
a.live{background:var(--cl-s1);border:1px solid var(--cl-line)}
.live.on b{animation:none;box-shadow:0 0 0 3px rgba(53,208,127,.2)}
.ico-btn{background:var(--cl-s1);border:1px solid var(--cl-line)}
.ico-btn:hover{background:var(--cl-s2)}
.vxm-btn{background:var(--acc);border:1px solid var(--acc-hot);box-shadow:none}
.vxm-btn:hover{box-shadow:var(--soft)}
.vxm-dot{border-color:var(--cl-bg);box-shadow:none}
.vxm-back{background:rgba(var(--acc-rgb),.18);-webkit-backdrop-filter:none;backdrop-filter:none}
@supports (color:color-mix(in srgb,red,blue)){.vxm-back{background:color-mix(in srgb,var(--cl-bg) 82%,transparent)}}
.vxm{background:var(--cl-bg);border-left:1px solid var(--cl-line);box-shadow:none}
.vxm::before{display:none}
.vxm-logo{background:var(--cl-s2);border:1px solid var(--cl-line);box-shadow:none}
.vxm-tile.on{background:var(--acc);border-color:transparent;box-shadow:none}
.vxm-seg button[aria-pressed=true]{background:var(--acc);box-shadow:none}

/* ===== banner beranda: foto di atas, teks di bawah (tanpa lapisan hitam) ===== */
.hbn{gap:12px}
.hbn-hero{aspect-ratio:auto;max-height:none;display:grid;border-radius:20px;background:var(--cl-s1);border:1px solid var(--cl-line);box-shadow:none}
.hbn-hero::after{display:none}
.hbn-media{position:relative;inset:auto;aspect-ratio:16/9;max-height:300px;width:100%;overflow:hidden;background:rgba(var(--acc-rgb),.18)}
.hbn-media.empty{background:rgba(var(--acc-rgb),.18)}
.hbn-cap{position:relative;padding:12px 16px 14px;background:var(--cl-s1);border-top:1px solid var(--cl-line)}
.hbn-title{color:var(--acc-hot);text-shadow:none}
.hbn-title svg{filter:none}
.hbn-sub{color:var(--mute);text-shadow:none;letter-spacing:.08em}

/* ===== kartu info perangkat ===== */
.hbn-info{background:var(--cl-s1);border:1px solid var(--cl-line);box-shadow:none}
.hbn-info::before{display:none}
.hbn-av{background:var(--acc);border:0;box-shadow:var(--soft)}
.hbn-av svg{filter:none}
.hbn-it{border-left-color:var(--cl-line-soft)}
.hbn-it:nth-child(n+3){border-top-color:var(--cl-line-soft)}
.hbn-it small svg{filter:none}
.hbn-dot{box-shadow:none}
.hbn-dot::after{animation:none;opacity:0}

/* baterai: batang datar satu warna, tanpa sekat hitam, tanpa kilau */
.hbn-bat{background:var(--cl-s2);border:1px solid var(--cl-line-soft);box-shadow:none}
.hbn-bat .bi{background:rgba(var(--bcr),.14);box-shadow:none}
.hbn-bat .bt{background:rgba(255,255,255,.1);box-shadow:none}
.hbn-bat .bt::after{display:none}
.hbn-bat .bt i{background:rgb(var(--bcr));box-shadow:none}
.hbn-bat .bt i::after,.hbn-bat[data-lv="ch"] .bt i::before{display:none}
.hbn-bat b{text-shadow:none}

/* ===== info jam layanan, pengumuman, status ===== */
.hours{background:var(--cl-s1);border:1px solid var(--cl-line);box-shadow:none}
.hours::before{box-shadow:none;background:rgb(var(--hc));opacity:1}
.hours i{box-shadow:none}
.hours.on i{animation:none}
.notice{background:var(--cl-s1);border-color:var(--cl-line);border-left-color:var(--acc)}
.statbar{box-shadow:none}

/* ===== produk, tab, tombol ===== */
.card{background:var(--cl-s1);border:1px solid var(--cl-line);box-shadow:none}
.card::after{display:none}
.card:hover{transform:translateY(-2px);box-shadow:var(--soft);border-color:var(--acc)}
.card:hover .go{box-shadow:none}
.tab{background:var(--cl-s1);border:1px solid var(--cl-line)}
.tab.on{background:var(--acc);border-color:var(--acc);box-shadow:none}
.chip{background:var(--cl-s1);border:1px solid var(--cl-line)}
.btn{background:var(--acc);box-shadow:none}
.btn:hover{background:var(--acc-hot);box-shadow:var(--soft)}
.vb-btn{background:var(--cl-s1);border-color:var(--cl-line)}
.ad{background:var(--acc-deep);border:1px solid var(--cl-line)}
.ad-t{background:var(--cl-s1);padding:10px 14px 12px;border-top:1px solid var(--cl-line)}
.hero h1::after{box-shadow:none}
.hero-greet i{box-shadow:none}
.search,input,select,textarea{background:var(--cl-s1);border-color:var(--cl-line)}
.vxs{background:var(--cl-s1);border-color:var(--cl-line)}
.vxs:hover{background:var(--cl-s2)}
.vxs:focus-visible,.vxs[aria-expanded=true]{box-shadow:var(--soft);background:var(--cl-s1)}
.sheet,footer{border-color:var(--cl-line)}

/* ===== tombol melayang ===== */
.chat-fab{background:var(--acc);box-shadow:none;border:1px solid var(--acc-hot)}
.chat-fab .dot{border-color:var(--cl-bg);animation:none}
.wa{background:var(--cl-s1);border:1px solid var(--acc);box-shadow:none}
.chat{background:var(--cl-bg);border:1px solid var(--cl-line);box-shadow:none}

/* mode ringan: ikut permukaan bersih */
html.lite .glass,html.lite .glass-strong,html.lite .card,html.lite .tm,html.lite details{background:var(--cl-s1)}
html.lite .top{background:var(--cl-bg)}

@media(min-width:700px){
  .hbn-media{aspect-ratio:21/8;max-height:340px}
  .hbn-cap{padding:14px 24px 16px}
}

/* ===== v84: logo + nama toko: tidak kepotong, glow rapi, animasi ===== */
.top .brand{flex:1 1 auto;min-width:0;overflow:visible;text-overflow:clip;gap:8px;font-size:clamp(18px,5.4vw,25px);letter-spacing:.03em;line-height:1;padding:4px 0}
.top .brand .mark,.top .brand .mark-img,.top .brand .vb-ico{flex:none}
.top .brand .mark{width:30px;height:30px}
.top .brand .vb-ico{width:19px;height:19px}
.top .brand #brand{flex:0 1 auto;min-width:0;display:block;padding:2px 1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:transparent;background:linear-gradient(105deg,#fff 0%,#fff 40%,var(--acc-hot) 50%,#fff 60%,#fff 100%) 100% 0/250% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:vxShine 4.5s ease-in-out 1.2s infinite}
@keyframes vxShine{0%{background-position:100% 0}45%,100%{background-position:0 0}}
@media(max-width:420px){
  .top .brand .mark{width:26px;height:26px}
  .top .brand .vb-ico{width:17px;height:17px}
  .top .tools a.live span{display:none}
  .top .tools a.live{padding:0;width:34px;height:34px;justify-content:center}
}
@media(max-width:340px){.top .brand{font-size:17px;letter-spacing:.01em}}

/* glow rapi: lingkaran lembut di belakang ikon, bukan bayangan kotak */
.top .brand .mark,.top .brand .mark-img{position:relative;filter:drop-shadow(0 0 5px rgba(var(--hot-rgb),.55));animation:vxMark 3.2s ease-in-out infinite}
@keyframes vxMark{0%,100%{filter:drop-shadow(0 0 3px rgba(var(--hot-rgb),.35));transform:translateY(0) scale(1)}50%{filter:drop-shadow(0 0 8px rgba(var(--hot-rgb),.75));transform:translateY(-1.5px) scale(1.06)}}
.top .brand .vb-ico{filter:drop-shadow(0 0 4px rgba(var(--hot-rgb),.5));transform-origin:50% 50%;animation:vxBadge 5s ease-in-out 1.5s infinite}
@keyframes vxBadge{0%,70%,100%{transform:scale(1) rotate(0)}78%{transform:scale(1.28) rotate(-12deg)}86%{transform:scale(.94) rotate(6deg)}93%{transform:scale(1.06) rotate(0)}}
.top .brand{animation:vxBrandIn .8s cubic-bezier(.22,1.2,.36,1) both}
@keyframes vxBrandIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.top .brand:active #brand{animation-duration:.9s}

@media(prefers-reduced-motion:reduce){
  .top .brand,.top .brand .mark,.top .brand .mark-img,.top .brand .vb-ico{animation:none}
  .top .brand #brand{animation:none;background:none;color:var(--text);-webkit-text-fill-color:currentColor}
}
html.lite .top .brand,html.lite .top .brand .mark,html.lite .top .brand .mark-img,html.lite .top .brand .vb-ico{animation:none}
html.lite .top .brand #brand{animation:none;background:none;color:var(--text);-webkit-text-fill-color:currentColor}

/* ===== v86: halaman status lebih premium (warna tidak diubah, hanya tata letak, garis, dan detail) ===== */
.stat{max-width:640px}
.stat-hero{position:relative;gap:12px;padding:34px 22px 26px;border-radius:26px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 46%),var(--cl-s1);
  border:1px solid var(--cl-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 60px -34px var(--lvg)}
.stat-hero::before{content:"";position:absolute;left:50%;top:-90px;width:420px;height:260px;transform:translateX(-50%);
  background:radial-gradient(closest-side,var(--lvg),transparent);opacity:.35;pointer-events:none}
.stat-hero::after{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--lv),transparent);opacity:.7;pointer-events:none}
.stat-hero>*{position:relative;z-index:1}

/* orb: cincin tipis berputar + gelombang halus */
.stat-orb{width:152px;height:152px;margin-bottom:2px}
.stat-orb::before,.stat-orb::after{inset:14px;border-width:1px;opacity:.7}
.stat-orb .ring{position:absolute;inset:4px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 55%,var(--lv) 90%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  animation:statSpin 6s linear infinite}
@keyframes statSpin{to{transform:rotate(360deg)}}
.stat-orb .core{width:108px;height:108px;border-width:1px;
  background:radial-gradient(circle at 32% 20%,rgba(255,255,255,.14),rgba(255,255,255,0) 58%),var(--cl-s2);
  box-shadow:0 0 0 7px rgba(var(--acc-rgb),.06),0 0 0 8px var(--cl-line-soft),0 18px 40px -18px var(--lvg),inset 0 1px 0 rgba(255,255,255,.16)}
.stat-orb .core svg{width:56px;height:56px}

/* lencana status */
.stat-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 11px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lv);
  background:var(--cl-s2);border:1px solid var(--lv);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.stat-pill i{width:7px;height:7px;border-radius:50%;background:var(--lv);box-shadow:0 0 0 3px var(--lvg);animation:statDot 2s ease-in-out infinite}
.stat-pill em{font-style:normal}
@keyframes statDot{50%{box-shadow:0 0 0 6px transparent}}

/* judul dan teks */
.stat-title{margin-top:2px;letter-spacing:.005em;text-wrap:balance;
  background:linear-gradient(180deg,var(--text) 55%,color-mix(in srgb,var(--text) 72%,var(--lv)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--text)}
.stat-msg{font-size:15px;line-height:1.55;text-wrap:balance}

/* bar: jalur tipis dengan kilau lewat */
.stat-bar{position:relative;height:6px;width:min(340px,80%);margin-top:6px;background:var(--cl-bg);border:1px solid var(--cl-line-soft);padding:0}
.stat-bar i{border-radius:99px;box-shadow:none}
.stat-bar::after{content:"";position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-120%);animation:statSheen 3.4s ease-in-out infinite}
@keyframes statSheen{60%,100%{transform:translateX(320%)}}
.stat[data-level=maintenance] .stat-bar::after{display:none}
.stat-eta{background:var(--cl-s2);border-color:var(--cl-line)}
.stat-upd{letter-spacing:.02em;opacity:.85}

/* kartu daftar layanan */
.stat-card{margin-top:16px;padding:6px 20px 10px;border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.stat-card h2{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;font-size:24px;letter-spacing:.02em;padding:14px 0 12px;border-bottom:1px solid var(--cl-line-soft)}
.stat-sum{margin:0;font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--mute);
  padding:3px 10px;border-radius:999px;background:var(--cl-s2);border:1px solid var(--cl-line-soft);white-space:nowrap;flex:0 0 auto}
.svl .sv{gap:13px;padding:13px 0;border-top:0;border-bottom:1px solid var(--cl-line-soft);transition:padding .25s ease}
.svl .sv:last-child{border-bottom:0}
.svl .sv i{width:10px;height:10px;box-shadow:0 0 0 4px rgba(53,208,127,.14)}
.svl .sv.sv-degraded i{box-shadow:0 0 0 4px rgba(255,176,32,.16)}
.svl .sv.sv-down i{box-shadow:0 0 0 4px var(--glow)}
.svl .sv span{font-weight:700;letter-spacing:.005em}
.svl .sv b{padding:4px 11px;border-radius:999px;font-size:12px;letter-spacing:.02em;color:var(--ok);
  background:rgba(53,208,127,.1);border:1px solid rgba(53,208,127,.32)}
.svl .sv.sv-degraded b{color:var(--warn);background:rgba(255,176,32,.1);border-color:rgba(255,176,32,.34)}
.svl .sv.sv-down b{color:var(--acc-hot);background:rgba(var(--hot-rgb),.1);border-color:rgba(var(--hot-rgb),.36)}
.svl .sv.sv-off b{color:var(--mute);background:transparent;border-color:var(--cl-line-soft)}
.svl .sv-load{border:0}
.stat-actions{margin-top:18px}

@media(max-width:420px){
  .stat-hero{padding:28px 16px 22px;border-radius:22px}
  .stat-card{padding:4px 16px 8px}
  .stat-card h2{font-size:20px}
  .stat-sum{font-size:11.5px;padding:3px 9px}
}
@media(prefers-reduced-motion:reduce){
  .stat-orb .ring,.stat-pill i,.stat-bar::after{animation:none}
  .stat-bar::after{display:none}
}
html.lite .stat-orb .ring,html.lite .stat-pill i{animation:none}
html.lite .stat-bar::after{display:none}

/* ===== v86: dua tombol melayang (asisten dan bantuan) lebih rapi dan premium, warna tetap ===== */
.chat-fab,.wa{--sb:env(safe-area-inset-bottom,0px)}
.chat-fab{width:56px;height:56px;bottom:calc(84px + var(--sb));z-index:30;
  background:linear-gradient(145deg,var(--acc-hot),var(--acc) 58%,var(--acc-deep));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 0 0 5px rgba(var(--acc-rgb),.14),0 12px 24px -10px rgba(var(--acc-rgb),.8),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2),box-shadow .25s ease}
.chat-fab::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--acc-hot);opacity:0;pointer-events:none;animation:fabHalo 3.2s ease-out infinite}
.chat-fab::after{content:"";position:absolute;left:12%;right:12%;top:5%;height:42%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none}
.chat-fab svg{position:relative;z-index:1;width:26px;height:26px;fill:var(--on-acc,#fff);filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.chat-fab svg path:last-child{transform-box:fill-box;transform-origin:center;animation:fabTwinkle 2.6s ease-in-out infinite}
.chat-fab .dot{z-index:2;top:3px;right:3px;width:14px;height:14px;border:2.5px solid var(--cl-bg);box-shadow:0 0 0 0 rgba(53,208,127,.6);animation:pulse 2s infinite}
.chat-fab .dot.off{display:none}
.chat-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 0 0 6px rgba(var(--acc-rgb),.2),0 16px 28px -10px rgba(var(--acc-rgb),.9),inset 0 1px 0 rgba(255,255,255,.45)}
.chat-fab:active{transform:scale(.93)}
.chat-fab:focus-visible,.wa:focus-visible{outline:2px solid var(--text);outline-offset:3px}
@keyframes fabHalo{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.55);opacity:0}}
@keyframes fabTwinkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.55}}

.wa{bottom:calc(16px + var(--sb));z-index:30;min-height:56px;padding:0 20px 0 16px;gap:10px;font-size:14px;letter-spacing:.01em;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)),var(--cl-s2);
  border:1px solid var(--acc);
  box-shadow:0 0 0 5px rgba(53,208,127,.1),0 12px 24px -12px rgba(var(--acc-rgb),.7),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2),border-color .2s,box-shadow .25s ease}
.wa svg{width:24px;height:24px;fill:var(--ok);filter:drop-shadow(0 0 6px rgba(53,208,127,.45))}
.wa:hover{transform:translateY(-3px);border-color:var(--acc-hot);box-shadow:0 0 0 6px rgba(53,208,127,.16),0 16px 28px -12px rgba(var(--acc-rgb),.85),inset 0 1px 0 rgba(255,255,255,.16)}
.wa:active{transform:scale(.94)}

@media(max-width:480px){
  .wa{width:56px;height:56px;min-height:0;padding:0;gap:0;justify-content:center;font-size:0}
  .wa svg{width:25px;height:25px}
  .chat{bottom:calc(152px + env(safe-area-inset-bottom,0px))}
}
@media(min-width:1024px){
  .chat-fab{bottom:calc(92px + var(--sb))}
  .wa{bottom:calc(24px + var(--sb))}
  .chat{bottom:calc(160px + var(--sb))}
}
@media(prefers-reduced-motion:reduce){.chat-fab::before,.chat-fab svg path:last-child{animation:none}.chat-fab::before{display:none}}
html.lite .chat-fab::before{display:none}
html.lite .chat-fab svg path:last-child{animation:none}