/* ══════════════════════════════════════════════════════════════
   MUSIM HALLOWEEN (26 Okt – 1 Nov 2026) — lapisan tema musiman beranda
   Nyala hanya kalau <html> punya kelas .musim-halloween, yang dipasang
   skrip kecil di <head> index.html berdasarkan TANGGAL. Lewat 1 Nov
   23.59 WIB kelasnya tidak dipasang lagi dan beranda kembali pink
   dengan sendirinya — tidak perlu deploy ulang. Uji kapan saja:
   ?musim=halloween (paksa nyala) / ?musim=off (paksa mati).

   Spesifisitas: index.html menulis tokennya di :root (0,1,0) dan tema
   gelap di :root[data-theme] / :root:not([data-theme="light"]) (0,2,0).
   Semua penimpa di sini diawali html.musim-halloween (0,1,1) dan versi
   gelapnya ditambah atribut (0,2,1), jadi selalu menang tanpa !important.

   Kontras dihitung (bukan dikira), pola sama dengan lulu-tokens.css:
     terang  #B33A08 di latar #F3E7DC 4,90:1 · teks putih di atasnya 5,96:1
             garis kartu #8A6A55 4,91:1 ke kartu, 4,04:1 ke latar
     gelap   #FF8A3D di kartu #1E1630 7,38:1 · teks #2A1206 di atasnya 7,54:1
     hero    keping #231A38 bergaris #8C7BA6 4,31:1 · teks #FFF4E0 15,1:1
   ══════════════════════════════════════════════════════════════ */

/* ── TERANG: krem labu + oranye ── */
html.musim-halloween{
  --lulu-pink-deep:#B33A08; --lulu-pink-darker:#8A2C05; --lulu-pink-accent:#FB923C;
  --lulu-pink-light:#FDBA74; --lulu-pink-pale:#FFEDD5; --lulu-cream-1:#FFF4E8; --lulu-cream-2:#FFF9F3;
  --lulu-line:rgba(179,58,8,.14);
  --pink-deep:#B33A08; --pink-accent:#FB923C; --pink-light:#FDBA74; --pink-hot:#EA580C; --pink-hotter:#C2410C;
  --app-bg:#F3E7DC; --surface-2:#E9D9CA;
  --garis-tegas:#A0663E; --garis-kartu:#8A6A55;
  --ios-shadow:0 1px 2px rgba(60,25,5,.06),0 2px 8px rgba(60,25,5,.06),0 16px 40px rgba(60,25,5,.10);
  --hero-malam:radial-gradient(90% 70% at 50% 108%,rgba(255,138,61,.30) 0%,transparent 60%),
               linear-gradient(180deg,#0E0820 0%,#1D1238 45%,#2E1A4C 100%);
}
/* ── GELAP: malam ungu pekat ── */
@media (prefers-color-scheme:dark){
  html.musim-halloween:not([data-theme="light"]){
    --lulu-pink-deep:#FF8A3D; --lulu-pink-darker:#F06A1A; --lulu-on-pink:#2A1206; --lulu-line:rgba(255,255,255,.14);
    --pink-deep:#FF8A3D; --pink-accent:#FFA766; --pink-hot:#FF8A3D; --pink-hotter:#FFA766;
    --app-bg:#0B0714; --surface:#1E1630; --surface-2:#2A2040; --sheet-bg:#171025;
    --label:#F2ECFA; --label-2:#BFB3D6; --separator:rgba(255,255,255,.16);
    --garis-tegas:#8C7BA6; --garis-kartu:#8C7BA6;
    --nav-bg:rgba(18,10,32,.74); --tabbar-bg:rgba(18,10,32,.74);
    --ios-shadow:0 1px 2px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.6); --shadow:var(--ios-shadow);
  }
}
html.musim-halloween[data-theme="dark"]{
  --lulu-pink-deep:#FF8A3D; --lulu-pink-darker:#F06A1A; --lulu-on-pink:#2A1206; --lulu-line:rgba(255,255,255,.14);
  --pink-deep:#FF8A3D; --pink-accent:#FFA766; --pink-hot:#FF8A3D; --pink-hotter:#FFA766;
  --app-bg:#0B0714; --surface:#1E1630; --surface-2:#2A2040; --sheet-bg:#171025;
  --label:#F2ECFA; --label-2:#BFB3D6; --separator:rgba(255,255,255,.16);
  --garis-tegas:#8C7BA6; --garis-kartu:#8C7BA6;
  --nav-bg:rgba(18,10,32,.74); --tabbar-bg:rgba(18,10,32,.74);
  --ios-shadow:0 1px 2px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.6); --shadow:var(--ios-shadow);
}
html.musim-halloween.hp-ringan{ --nav-bg:#FFFFFF; --tabbar-bg:#FFFFFF; }
html.musim-halloween.hp-ringan[data-theme="dark"]{ --nav-bg:#140B24; --tabbar-bg:#140B24; }
@media (prefers-color-scheme:dark){
  html.musim-halloween.hp-ringan:not([data-theme="light"]){ --nav-bg:#140B24; --tabbar-bg:#140B24; }
}

/* ══════ HERO: selalu malam Halloween (terang & gelap) ══════
   Token di dalam hero dibalik ke versi malam supaya judul, keping
   jaminan, dan tombol yang memakai var(--label)/var(--surface) ikut. */
html.musim-halloween #hero{
  /* --text/--text-muted ikut ditimpa: di :root keduanya var(--label) yang
     sudah DIHITUNG di sana, jadi menimpa --label saja tidak turun ke judul. */
  --label:#FFF4E0; --label-2:#D2C6E6; --text:#FFF4E0; --text-muted:#D2C6E6;
  --surface:#231A38; --garis-tegas:#8C7BA6;
  --pink-deep:#FF9A52; --pink-accent:#FFB27A;
  background:var(--hero-malam) !important;
  padding-bottom:clamp(120px,19vw,260px);
}
html.musim-halloween #hero::before{
  opacity:1;
  background:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 27% 9%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 41% 24%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 63% 12%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 76% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 88% 8%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 7% 42%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 94% 46%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 52% 6%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 33% 38%,#fff 50%,transparent 51%);
  animation:hwKelip 4s ease-in-out infinite alternate;
}
@keyframes hwKelip{from{opacity:.55}to{opacity:1}}
html.musim-halloween #hero .hero-logo{ filter:brightness(0) invert(1) drop-shadow(0 6px 22px rgba(255,138,61,.45)) !important; }
html.musim-halloween #hero .hero-badge{
  background:rgba(255,154,82,.14); color:#FFB27A; border-color:rgba(255,154,82,.35);
}
html.musim-halloween #hero .btn-primary{ color:#2A1206 !important; box-shadow:0 8px 26px rgba(255,138,61,.38); }
html.musim-halloween #hero .btn-outline{ color:#FFB27A; border-color:#FFB27A; }
html.musim-halloween #hero .trust-row .ti{ box-shadow:none; }
html.musim-halloween #hero .hero-inner{ z-index:2; }

/* hiasan yang disisipkan musim-halloween.js */
.hw-hias{ position:absolute; pointer-events:none; z-index:1; }
.hw-bulan{
  top:clamp(70px,11vw,110px); right:clamp(14px,8vw,120px); width:clamp(54px,9vw,96px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#FFFBE6 0%,#FFE9A8 60%,#F2CE79 100%);
  box-shadow:0 0 40px 10px rgba(255,236,170,.30),0 0 120px 34px rgba(255,236,170,.10);
}
.hw-bulan::before,.hw-bulan::after{content:"";position:absolute;border-radius:50%;background:rgba(214,170,90,.35)}
.hw-bulan::before{width:20%;height:20%;top:28%;left:54%}
.hw-bulan::after{width:12%;height:12%;top:58%;left:30%}
.hw-strip{
  left:50%; bottom:0; width:max(1000px,100%); transform:translateX(-50%); height:auto; display:block;
}
.hw-kelelawar{ width:clamp(40px,6vw,64px); height:auto; filter:drop-shadow(0 0 6px rgba(190,160,255,.5)); }
.hw-kelelawar.k1{ top:22%; left:-80px; animation:hwTerbang1 16s linear infinite; }
.hw-kelelawar.k2{ top:40%; left:-80px; width:clamp(32px,4.6vw,50px); animation:hwTerbang2 21s linear 6s infinite; }
@keyframes hwTerbang1{0%{transform:translate(0,0)}25%{transform:translate(28vw,-24px)}50%{transform:translate(55vw,14px)}75%{transform:translate(85vw,-16px)}100%{transform:translate(calc(100vw + 160px),0)}}
@keyframes hwTerbang2{0%{transform:translate(0,0) scaleX(-1)}50%{transform:translate(50vw,-34px) scaleX(-1)}100%{transform:translate(calc(100vw + 160px),12px) scaleX(-1)}}
.hw-hantu{ width:clamp(54px,7vw,84px); height:auto; left:clamp(10px,7vw,110px); top:clamp(120px,18vw,170px); animation:hwMelayang 3.4s ease-in-out infinite; opacity:.95; }
@keyframes hwMelayang{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(4deg)}}
/* topi penyihir bertengger di logo */
.hw-logo-wrap{ position:relative; display:inline-block; }
.hw-topi{ position:absolute; width:38%; max-width:92px; height:auto; top:-34%; left:-13%; transform:rotate(-16deg); pointer-events:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,.35)); }

/* pita promo produk Halloween di hero */
.hw-promo{
  display:inline-flex; align-items:center; gap:10px; margin:2px auto 18px; padding:8px 16px 8px 8px; border-radius:999px; text-decoration:none;
  background:rgba(35,26,56,.86); border:1.5px solid #8C7BA6; color:#FFF4E0; font:600 .84rem/1.3 'Inter',sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.25); max-width:100%;
}
.hw-promo img{ width:34px; height:34px; flex:none; }
.hw-promo b{ color:#FFB27A; }
.hw-promo .panah{ color:#FFB27A; font-weight:800; }
.hw-promo:hover{ border-color:#FFB27A; }

/* kartu sorotan Halloween di katalog */
.hw-sorot{
  display:flex; align-items:center; gap:16px; margin:0 auto 22px; max-width:760px; padding:16px 18px; border-radius:22px; text-decoration:none;
  background:linear-gradient(120deg,#1D1238 0%,#2E1A4C 60%,#4A2410 100%); color:#FFF4E0; position:relative; overflow:hidden;
  border:1.5px solid #8C7BA6; box-shadow:0 14px 34px rgba(30,10,50,.28);
}
.hw-sorot img{ width:74px; height:auto; flex:none; filter:drop-shadow(0 6px 14px rgba(255,138,61,.5)); }
.hw-sorot .t{ text-align:left; flex:1; min-width:0; }
.hw-sorot small{ display:block; font:700 .7rem/1 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#FFB27A; }
.hw-sorot strong{ display:block; font:800 1.08rem/1.25 'Inter',sans-serif; margin:5px 0 3px; color:#FFF4E0; }
.hw-sorot span{ display:block; font:400 .84rem/1.4 'Inter',sans-serif; color:#D2C6E6; }
.hw-sorot .cta{
  flex:none; background:#FF9A52; color:#2A1206; font:700 .85rem 'Inter',sans-serif; padding:10px 16px; border-radius:14px;
}
@media (max-width:520px){
  .hw-sorot{ flex-wrap:wrap; gap:12px; }
  .hw-sorot img{ width:58px; }
  .hw-sorot .cta{ width:100%; text-align:center; }
}

html.hp-ringan .hw-kelelawar, html.hp-ringan #hero::before{ animation:none !important; }
html.hp-ringan .hw-kelelawar.k2{ display:none; }
@media (prefers-reduced-motion:reduce){
  .hw-kelelawar{ display:none; }
  .hw-hantu, html.musim-halloween #hero::before{ animation:none; }
}