/* v39 — perbaikan tampilan HP (lebar 421–480px) + ringankan website
   Dimuat PALING AKHIR, jadi menang atas style.css / premium-*.css / v33 / v38.
   Penyebab "ke geser / kebesaran": aturan HP lama berhenti di 420px, padahal banyak HP (Xiaomi, dll)
   lebarnya ±421–430px sehingga jatuh ke tampilan desktop-ish. Semua aturan HP diperlebar sampai 480px. */

/* ---------- 0. Anti geser samping ---------- */
html{overflow-x:clip}
body{max-width:100%;overflow-x:clip}
img,svg,video{max-width:100%}

/* ---------- 1. HEADER (semua tema, tema Halloween ikut) ---------- */
@media(max-width:480px){
  header .w{padding:8px 10px 8px 16px;gap:6px;flex-wrap:nowrap}
  header .hd-r{gap:5px!important;flex:none}
  .brand{gap:9px;min-width:0;flex:1 1 auto;margin-left:2px}
  .brand .lg,.brand .lg img{width:34px;height:34px}
  .brand b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(12px,3.8vw,15px)}
  [data-t=halloween] .brand b{font-size:clamp(12px,3.8vw,15px);letter-spacing:.04em}
  .hd-hat{width:26px;height:23px;left:-7px;top:-13px}
  .hd-sp,.hd-bt,.hd-bt2{display:none!important}
  .thb{font-size:0;gap:4px;padding:0 8px;height:38px}
  .thb svg{width:11px;height:11px}
  [data-t=halloween] .thb .sw{width:22px;height:21px}
  .ic{width:38px;height:38px}
  [data-t=halloween] #mb{width:40px;height:38px;margin:0;animation:none;filter:drop-shadow(0 0 5px rgba(255,122,26,.9))}
  [data-t=halloween] .mbl{width:15px;gap:3.5px}
  a.ic.ic-fr,[data-t=halloween] a.ic.ic-fr{width:42px}
  a.ic.ic-fr .fr-h{margin:-9px -4px;transform:scale(.82)}
}
@media(max-width:360px){
  .brand b{font-size:12px;letter-spacing:.02em}
  .brand .lg,.brand .lg img{width:30px;height:30px}
  .ic{width:34px;height:34px}
}

/* ---------- 2. HERO: labu tidak menimpa kotak statistik ---------- */
.hero .stats{position:relative;z-index:2}
@media(max-width:480px){
  [data-t=halloween] .hero::after{width:86px;height:54px;right:8px;bottom:-8px;z-index:0;pointer-events:none;animation:none}
  [data-t=halloween] .hero .stats div{background:rgba(18,8,31,.82)}
  .hero .stats{gap:8px}
  .hero .stats>div{padding:9px 10px;min-width:0}
}

/* ---------- 3. Tombol WhatsApp melayang: lebih kecil, tidak menutup konten ---------- */
@media(max-width:480px){
  .wa{right:8px;bottom:8px}
  .wa-ic,.wa-ic img{width:58px;height:58px}
  .wa-lbl{min-width:118px;margin-right:-24px;padding:6px 30px 6px 12px;border-radius:18px}
  .wa-lbl small{font-size:8.5px;letter-spacing:.14em}
  .wa-txt b{font-size:13px}
}

/* ---------- 4. Kartu produk & grid: tidak melebar ---------- */
.g{min-width:0}
.g>.p{min-width:0;content-visibility:auto;contain-intrinsic-size:auto 285px}
.p .nm{overflow-wrap:anywhere}

/* ---------- 5. RINGAN: blur kaca & efek berat dimatikan ---------- */
/* header memakai latar pekat (blur di header sticky = penyebab scroll patah di HP) */
header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--bg)}
.stats>div,.thp-bd,.pop-bd,.wp-bd{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.thp-bd,.pop-bd,.wp-bd{background:rgba(0,0,0,.72)}

/* dekor: hentikan animasi tanpa henti yang menggambar ulang tiap frame */
[data-t=halloween] .brand .lg::before{animation:none}
[data-t=halloween] a.ic.ic-fr .fr-i,.fr-i{animation:none}
.hd-lt{filter:none;animation:none;opacity:.9}
[data-t=halloween] .hws *{animation:none!important}          /* adegan footer: gambar diam */
[data-t=halloween] .hws i,[data-t=halloween] .hws span{filter:none!important;will-change:auto!important}

/* HP & layar sentuh: lapisan kabut/bara/cahaya (blur besar fullscreen) dibuang */
@media(max-width:820px),(pointer:coarse){
  .hwx .hx-fog,.hwx .hx-em,.hwx .hx-gl{display:none!important}
  .hwx *{filter:none!important;will-change:auto!important}
  .hws .hs-fog,.hws .hs-fly,.hws .hs-ghost.g2{display:none!important}
  *,*::before,*::after{text-shadow:none}
}

/* animasi berhenti saat tab disembunyikan / sedang scroll (dekor & kartu) */
html.kx-hidden *,html.kx-hidden *::before,html.kx-hidden *::after{animation-play-state:paused!important}
html.kx-scrolling .g>.p,html.kx-scrolling .mq>div,html.kx-scrolling .bn{animation-play-state:paused!important}

/* hormati pengaturan "kurangi animasi" dari HP */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}