/* ==========================================================================
   Doekoen — Pasar Malam Gaib
   Palet: gelap pekat · neon hijau #39ff88 · emas #f6c945 · merah kemenyan #e0431f
   ========================================================================== */

:root{
  --malam-0:#05030a;
  --malam-1:#0b0714;
  --malam-2:#140c22;
  --malam-3:#1c1230;
  --neon:#39ff88;
  --neon-dim:#1f8a4a;
  --emas:#f6c945;
  --emas-muda:#ffe9a8;
  --kemenyan:#e0431f;
  --darah:#7b1f2b;
  --tinta:#eafff3;
  --kabut:#d9c6e6;
  --redup:#b9aecb;
  --garis:rgba(57,255,136,.28);
  --radius:18px;
  --shadow-neon:0 0 26px rgba(57,255,136,.35), 0 0 60px rgba(57,255,136,.14);
  --shadow-gold:0 0 24px rgba(246,201,69,.30);
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--tinta);
  background:var(--malam-0);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:var(--neon);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,.brand__text{font-family:var(--serif);line-height:1.12;letter-spacing:.01em}

/* ---------- fokus keyboard ---------- */
:focus-visible{
  outline:3px solid var(--emas);
  outline-offset:3px;
  border-radius:6px;
  box-shadow:0 0 0 6px rgba(246,201,69,.18);
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--emas);color:#1a1205;padding:.7rem 1.1rem;border-radius:0 0 12px 0;font-weight:700;
}
.skip-link:focus{left:0}

/* ==========================================================================
   LANGIT, BULAN, KABUT
   ========================================================================== */
.sky{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%, var(--malam-3) 0%, var(--malam-1) 42%, var(--malam-0) 100%);
  contain:strict;
}

.sky__moon{
  position:absolute;top:3vh;right:4vw;width:min(230px,28vw);
  opacity:.92;filter:drop-shadow(0 0 45px rgba(246,201,69,.35));
  will-change:transform;
}

.stars{
  position:absolute;inset:0;
  background-image:
    radial-gradient(2px 2px at 12% 14%, rgba(234,255,243,.9), transparent 60%),
    radial-gradient(2px 2px at 28% 32%, rgba(234,255,243,.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 44% 9%, rgba(57,255,136,.8), transparent 60%),
    radial-gradient(2px 2px at 63% 26%, rgba(234,255,243,.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 79% 12%, rgba(246,201,69,.8), transparent 60%),
    radial-gradient(2px 2px at 91% 38%, rgba(234,255,243,.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 8% 48%, rgba(234,255,243,.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 52% 52%, rgba(57,255,136,.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 88% 66%, rgba(234,255,243,.55), transparent 60%);
  animation:berkedip 6s ease-in-out infinite alternate;
}
@keyframes berkedip{from{opacity:.55}to{opacity:1}}

.fog{
  position:absolute;left:-30%;right:-30%;height:52vh;pointer-events:none;
  background:radial-gradient(64% 64% at 50% 50%, rgba(57,255,136,.15), rgba(57,255,136,.09) 22%, rgba(217,198,230,.06) 44%, rgba(217,198,230,.025) 60%, transparent 76%);
  will-change:transform;
}
.fog--far{top:26vh;animation:gumulung 42s linear infinite;opacity:.55}
.fog--mid{top:48vh;animation:gumulung 30s linear infinite reverse;opacity:.5}
.fog--near{top:68vh;animation:gumulung 22s linear infinite;opacity:.42}
@keyframes gumulung{
  from{transform:translateX(-8%)}
  50%{transform:translateX(8%)}
  to{transform:translateX(-8%)}
}

/* ==========================================================================
   KUNANG-KUNANG
   ========================================================================== */
.fireflies{position:fixed;inset:0;z-index:1;pointer-events:none}

.firefly{
  position:absolute;left:var(--x);top:var(--y);width:40px;
  opacity:.75;filter:drop-shadow(0 0 8px rgba(57,255,136,.8));
  animation:melayang var(--d,10s) ease-in-out infinite;animation-delay:var(--dl,0s);
  will-change:transform;
}
@keyframes melayang{
  0%{transform:translate3d(0,0,0) scale(.85);opacity:.35}
  25%{transform:translate3d(16px,-26px,0) scale(1.05);opacity:.9}
  50%{transform:translate3d(-14px,-46px,0) scale(.95);opacity:.6}
  75%{transform:translate3d(20px,-18px,0) scale(1.1);opacity:1}
  100%{transform:translate3d(0,0,0) scale(.85);opacity:.35}
}

/* ==========================================================================
   TOPBAR
   ========================================================================== */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:1rem;
  padding:.6rem 1.2rem;
  background:linear-gradient(180deg, rgba(5,3,10,.94), rgba(5,3,10,.62) 70%, transparent);

  border-bottom:1px solid rgba(57,255,136,.16);
}
@media (min-width:900px){.topbar{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}
@media (max-width:899px){.topbar{background:linear-gradient(180deg, rgba(5,3,10,.97), rgba(5,3,10,.92))}}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--tinta);text-decoration:none}
.brand:hover{text-decoration:none}
.brand img{width:26px;height:auto;filter:drop-shadow(0 0 10px rgba(57,255,136,.6)) drop-shadow(0 0 6px rgba(246,201,69,.5));animation:kilau 4s ease-in-out infinite}
.brand__text{font-size:1.25rem;font-weight:700;color:var(--emas-muda);display:flex;flex-direction:column;line-height:1}
.brand__text small{font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--neon);opacity:.9;margin-top:.25rem}

.topbar__nav{display:flex;gap:.15rem;margin-left:auto;flex-wrap:wrap;align-items:center}
.topbar__nav a{
  color:var(--redup);font-size:.86rem;padding:.4rem .6rem;border-radius:999px;text-decoration:none;
  transition:color .2s, background .2s;
}
.topbar__nav a:hover{color:var(--tinta);background:rgba(57,255,136,.12);text-decoration:none}
.topbar__cta{
  border:1px solid var(--garis);color:var(--neon) !important;
  background:rgba(57,255,136,.07);
}
.topbar__cta:hover{box-shadow:var(--shadow-neon)}

.audio-toggle{
  display:flex;align-items:center;gap:.45rem;
  font:inherit;font-size:.82rem;cursor:pointer;
  color:var(--emas-muda);background:rgba(246,201,69,.08);
  border:1px solid rgba(246,201,69,.45);border-radius:999px;
  padding:.42rem .85rem;transition:box-shadow .2s, background .2s;
}
.audio-toggle:hover{box-shadow:var(--shadow-gold);background:rgba(246,201,69,.14)}
.audio-toggle[aria-pressed="true"]{background:rgba(57,255,136,.16);border-color:var(--neon);color:var(--tinta)}
.audio-toggle__icon{font-size:1rem;line-height:1;text-shadow:0 0 8px rgba(255,233,168,.9);animation:kilau 3s ease-in-out infinite}
.audio-toggle[aria-pressed="true"] .audio-toggle__icon{color:var(--neon)}

@keyframes kilau{
  0%,100%{opacity:.7}
  50%{opacity:1}
}

/* ==========================================================================
   UMUM
   ========================================================================== */
main{position:relative;z-index:2}
.section{position:relative;max-width:1120px;margin:0 auto;padding:4.5rem 1.2rem}

.eyebrow{
  text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;
  color:var(--neon);margin:0 0 .8rem;
}
.section__title{
  font-size:clamp(1.7rem,4.5vw,2.6rem);margin:0 0 .6rem;color:var(--emas-muda);
  text-shadow:0 0 22px rgba(246,201,69,.25);
}
.section__lead{color:var(--redup);max-width:60ch;margin:0 0 2rem}

.glow{color:var(--neon);text-shadow:0 0 12px rgba(57,255,136,.9),0 0 42px rgba(57,255,136,.5)}

/* tombol */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;
  padding:.8rem 1.5rem;border-radius:999px;border:1px solid transparent;
  transition:transform .18s, box-shadow .25s, background .25s;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--primary{
  background:linear-gradient(135deg,var(--neon),#14c46a);
  color:#04140b;box-shadow:var(--shadow-neon);
}
.btn--primary:hover{box-shadow:0 0 34px rgba(57,255,136,.6),0 0 80px rgba(57,255,136,.3)}
.btn--ghost{
  background:rgba(255,255,255,.04);color:var(--emas-muda);
  border-color:rgba(246,201,69,.5);
}
.btn--ghost:hover{box-shadow:var(--shadow-gold)}
.btn--big{font-size:1.12rem;padding:1rem 2rem}
.btn--card{
  width:100%;margin-top:auto;
  background:linear-gradient(135deg,var(--neon),#14c46a);color:#04140b;
  box-shadow:0 0 18px rgba(57,255,136,.3);
}
.btn--card:hover{box-shadow:var(--shadow-neon)}

/* ikon Telegram di tombol & tautan bot */
.ikon-tg{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.tautan-bot{
  display:inline-flex;align-items:center;gap:.3em;vertical-align:middle;white-space:nowrap;max-width:100%;
  padding:.15em .6em .15em .45em;margin:.1em 0;border-radius:999px;
  font-weight:700;color:var(--neon);
  background:rgba(57,255,136,.1);border:1px solid var(--garis);
  text-decoration:underline;text-decoration-color:rgba(57,255,136,.45);text-underline-offset:3px;
}
.tautan-bot:hover{background:rgba(57,255,136,.2);text-decoration-color:var(--neon)}

/* CTA menempel bawah (HP) */
.cta-lekat{display:none}
@media (max-width:900px){
  .cta-lekat{
    position:fixed;left:.7rem;right:.7rem;bottom:calc(.7rem + env(safe-area-inset-bottom,0px));z-index:80;
    display:flex;align-items:center;justify-content:center;gap:.55rem;
    padding:.85rem 1rem;border-radius:999px;min-height:52px;
    font-weight:700;font-size:1rem;color:#04140b;text-decoration:none;
    background:linear-gradient(135deg,var(--neon),#14c46a);
    box-shadow:0 0 24px rgba(57,255,136,.45),0 8px 24px rgba(0,0,0,.6);
    transform:translateY(160%);transition:transform .35s ease;
  }
  .cta-lekat small{font-size:.78rem;font-weight:600;padding:.12rem .5rem;border-radius:999px;background:rgba(4,20,11,.16)}
  .cta-lekat.tampil{transform:none}
  .cta-lekat:hover{text-decoration:none}
  .footer{padding-bottom:6rem}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(4rem,12vh,8rem) 1.2rem clamp(16rem,36vw,30rem);
}
.hero__panorama{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:max(1600px,100vw);max-width:none;height:auto;
  pointer-events:none;z-index:0;
}
/* selubung gelap di belakang teks supaya tetap terbaca di atas panorama */
.hero::before{
  content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(900px,110vw);height:70%;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(5,3,10,.78), rgba(5,3,10,.45) 60%, transparent);
}
.hero__inner{position:relative;z-index:3;max-width:820px;margin:0 auto;text-align:center}
.hero__title{font-size:clamp(2.6rem,10vw,5.4rem);margin:0 0 1rem}
.hero__lead{color:var(--redup);font-size:clamp(1rem,2.4vw,1.15rem);max-width:60ch;margin:0 auto 2rem}
.hero__actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.2rem}
.hero__hint{color:var(--redup);opacity:.7;font-size:.85rem;font-style:italic}
.hero__tags{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:0 0 1rem}
.hero__tags span{
  font-size:.78rem;letter-spacing:.08em;color:var(--emas-muda);
  padding:.3rem .8rem;border-radius:999px;border:1px solid rgba(246,201,69,.35);background:rgba(5,3,10,.55);
}

/* untaian lampu pasar — pembatas antar-bagian */
.festoon{
  position:relative;z-index:3;height:72px;margin:0 auto -36px;max-width:1280px;pointer-events:none;
  background:url("assets/festoon.svg?v=58c7159b") repeat-x center top / 480px 72px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  animation:kerlip 5s ease-in-out infinite alternate;
}
@keyframes kerlip{from{opacity:.75}to{opacity:1}}

/* ==========================================================================
   APA ITU DOEKOEN
   ========================================================================== */
.kabar{padding-top:2rem;padding-bottom:1rem}
.kabar__card{
  position:relative;padding:2rem clamp(1.2rem,4vw,2.6rem);border-radius:24px;
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(246,201,69,.10), transparent 60%),
    linear-gradient(160deg,rgba(28,18,48,.92),rgba(11,7,20,.94));
  border:1px solid rgba(246,201,69,.35);box-shadow:var(--shadow-gold);
}
.kabar__title{font-size:clamp(1.5rem,3.6vw,2.1rem);margin:0 0 .8rem;color:var(--emas-muda)}
.kabar__def{color:var(--kabut);font-size:clamp(1rem,2.2vw,1.12rem);max-width:70ch;margin:0 0 1.4rem}
.kabar__def strong{color:var(--tinta)}
.kabar__facts{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin:0}
.kabar__facts div{padding:.7rem .9rem;border-radius:14px;background:rgba(5,3,10,.5);border:1px solid rgba(57,255,136,.18)}
.kabar__facts dt{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--neon);margin-bottom:.2rem}
.kabar__facts dd{margin:0;font-family:var(--serif);color:var(--emas-muda);font-size:1.02rem}

.hero__floor{
  position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;
  gap:1rem;margin-top:2.5rem;padding:0 2vw;
}
.hero__floor img:first-child{width:min(300px,44vw);opacity:.85;filter:drop-shadow(0 0 22px rgba(246,201,69,.2))}
.hero__floor img:last-child{width:min(190px,34vw);opacity:.9;filter:drop-shadow(0 0 22px rgba(57,255,136,.3))}

/* ==========================================================================
   PETA PASAR
   ========================================================================== */
.peta__list{
  list-style:none;margin:0;padding:0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.peta__list li{
  display:flex;align-items:center;gap:.8rem;
  padding:.9rem 1.1rem;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(28,18,48,.85),rgba(11,7,20,.85));
  border:1px solid rgba(217,198,230,.16);
  font-family:var(--serif);font-size:1.05rem;
}
.peta__list span{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;color:var(--neon);
  border:1px solid var(--garis);border-radius:8px;padding:.15rem .45rem;
}
.peta__last{border-color:rgba(246,201,69,.55);box-shadow:var(--shadow-gold)}

/* ==========================================================================
   WARUNG
   ========================================================================== */
.warung{
  display:grid;gap:2.4rem;align-items:center;
  grid-template-columns:1.15fr 1fr;
  padding-top:5rem;padding-bottom:5rem;
  border-top:1px dashed rgba(217,198,230,.14);
}
.warung__copy{position:relative;z-index:2}
.warung__no{
  text-transform:uppercase;letter-spacing:.28em;font-size:.7rem;color:var(--kemenyan);
  margin:0 0 .5rem;
}
.warung h2{font-size:clamp(1.8rem,5vw,2.8rem);margin:0 0 1rem;color:var(--emas-muda)}
.warung p{color:var(--redup);max-width:52ch}
.warung__note{
  margin-top:1.1rem;padding:.75rem 1rem;border-left:3px solid var(--neon);
  background:rgba(57,255,136,.07);border-radius:0 12px 12px 0;
  font-family:var(--serif);font-style:italic;color:var(--tinta) !important;font-size:.98rem;
}
.warung__art{margin:0;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.warung__art img{
  width:min(560px,100%);height:auto;
}
.warung__art figcaption{color:var(--redup);font-family:var(--serif);font-style:italic;font-size:.88rem;text-align:center;opacity:.85}

.warung--sate,.warung--wayang{grid-template-columns:1fr 1.15fr}
/* cahaya latar tiap warung, mengikuti warna sumber terangnya */
.warung::before{
  content:"";position:absolute;z-index:0;pointer-events:none;width:60%;height:90%;top:5%;
  background:radial-gradient(closest-side,var(--warna-warung,rgba(57,255,136,.12)),transparent);
}
.warung--tuyul::before,.warung--weton::before{left:0}
.warung--sate::before,.warung--wayang::before{right:0}
.warung--tuyul{--warna-warung:rgba(246,201,69,.13)}
.warung--sate{--warna-warung:rgba(224,67,31,.16)}
.warung--weton{--warna-warung:rgba(57,255,136,.12)}
.warung--wayang{--warna-warung:rgba(255,233,168,.12)}

/* dekorasi absolut yang bertumpuk */
.warung__deco{position:absolute;inset:0;pointer-events:none;z-index:1}
.deco-lantern{position:absolute;top:2rem;right:6%;width:78px;animation:goyang 5s ease-in-out infinite}
.deco-lantern--b{top:auto;bottom:3rem;right:auto;left:2%;width:58px;animation-duration:7s;animation-delay:.8s;opacity:.8}
.deco-incense{position:absolute;bottom:2rem;right:5%;width:110px;opacity:.9}
.deco-incense--c{right:auto;left:4%;bottom:4rem;width:90px;opacity:.75}
.deco-owl{position:absolute;top:2.5rem;left:4%;width:90px;opacity:.85;animation:goyang 6s ease-in-out infinite}
.deco-owl--b{left:auto;right:3%;top:auto;bottom:3rem;width:72px;animation-duration:8s}
.deco-cat{position:absolute;bottom:1.5rem;left:3%;width:132px;opacity:.85;animation:goyang 9s ease-in-out infinite;animation-delay:1.2s}
.deco-lantern--c{top:1.2rem;left:auto;right:4%;width:58px;opacity:.7;animation-duration:6.5s}

@keyframes goyang{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  50%{transform:rotate(3deg) translateY(-8px)}
}

/* ==========================================================================
   TENDA MBAH (CTA)
   ========================================================================== */
.tenda{
  position:relative;text-align:center;overflow:hidden;
  max-width:960px;margin:3rem auto;padding:4rem 1.4rem;
  border-radius:26px;
  background:
    radial-gradient(90% 80% at 50% 100%, rgba(57,255,136,.14), transparent 70%),
    linear-gradient(180deg, rgba(20,12,34,.92), rgba(5,3,10,.96));
  border:1px solid rgba(57,255,136,.3);
  box-shadow:0 0 60px rgba(57,255,136,.14), inset 0 0 80px rgba(57,255,136,.05);
}
.tenda__smoke{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tenda__smoke span{
  position:absolute;bottom:-10%;left:50%;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,198,230,.16),transparent 70%);
  animation:asap 14s linear infinite;filter:blur(12px);will-change:transform,opacity;
}
.tenda__smoke span:nth-child(1){margin-left:-180px;animation-delay:0s}
.tenda__smoke span:nth-child(2){margin-left:-40px;animation-delay:5s;width:220px;height:220px}
.tenda__smoke span:nth-child(3){margin-left:120px;animation-delay:9s;animation-duration:17s}
@keyframes asap{
  0%{transform:translateY(0) scale(.7);opacity:0}
  20%{opacity:.9}
  100%{transform:translateY(-560px) scale(1.7);opacity:0}
}
.tenda__art{position:relative;z-index:2;margin:0 auto 1rem;display:flex;justify-content:center}
.tenda__art img{width:min(640px,100%);height:auto}
.tenda__copy{position:relative;z-index:2}
.tenda h2{font-size:clamp(2rem,6vw,3.2rem);margin:0 0 1rem;color:var(--emas-muda);text-shadow:0 0 26px rgba(246,201,69,.35)}
.tenda p{color:var(--redup);max-width:56ch;margin:0 auto 1.6rem}
.tenda__actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.tenda__mahar{font-size:.84rem;opacity:.75;font-style:italic;margin-top:1.1rem}

/* ==========================================================================
   PRODUK
   ========================================================================== */
.produk__grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  padding:1.6rem 1.4rem;border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(28,18,48,.9),rgba(11,7,20,.92));
  border:1px solid rgba(217,198,230,.18);
  transition:transform .22s, box-shadow .3s, border-color .3s;
}
.card:hover{transform:translateY(-4px);border-color:var(--garis);box-shadow:var(--shadow-neon)}
.card--feature{border-color:rgba(246,201,69,.5);box-shadow:var(--shadow-gold)}
.card--feature:hover{box-shadow:0 0 34px rgba(246,201,69,.5)}
.card__icon{width:84px;height:auto;filter:drop-shadow(0 0 16px rgba(57,255,136,.3))}
.card h3{font-size:1.28rem;margin:0;color:var(--emas-muda)}
.card p{color:var(--redup);margin:0;font-size:.95rem}
.card__price{
  font-family:var(--serif);font-size:1.5rem;color:var(--neon) !important;
  font-weight:700;margin:.3rem 0 .8rem !important;text-shadow:0 0 16px rgba(57,255,136,.5);
}
.produk__catatan{text-align:center;color:var(--redup);margin-top:2rem}
.produk__catatan a,.cara__list a{display:inline-block;padding:.35rem 0}
.produk__catatan strong{color:var(--neon)}

.produk__paket{
  text-align:center;color:var(--kabut);margin:2rem auto 0;max-width:52ch;
  border:1px solid var(--garis);border-radius:var(--radius);
  padding:.9rem 1.1rem;background:rgba(57,255,136,.05);
}
.produk__paket strong{color:var(--emas)}

/* ==========================================================================
   SUARA TAMU
   ========================================================================== */
.suara__grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.suara blockquote{
  margin:0;padding:1.4rem;border-radius:var(--radius);
  background:rgba(20,12,34,.75);
  border:1px solid rgba(217,198,230,.16);
  font-family:var(--serif);
}
.suara blockquote p{color:var(--tinta);margin:0 0 .6rem;font-size:1.02rem}
.suara cite{color:var(--redup);font-style:normal;font-size:.82rem;letter-spacing:.06em}

/* ==========================================================================
   CARA & TANYA JAWAB
   ========================================================================== */
.cara__list{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:none}
.cara__list li{
  position:relative;padding:1.4rem 1.2rem 1.2rem;border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(28,18,48,.88),rgba(11,7,20,.9));
  border:1px solid rgba(217,198,230,.16);
}
.cara__no{
  display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;
  font-family:var(--serif);font-weight:700;color:#1a1205;
  background:radial-gradient(circle at 35% 30%,var(--emas-muda),var(--emas) 60%,#b07d18);
  box-shadow:var(--shadow-gold);margin-bottom:.7rem;
}
.cara__list h3{margin:0 0 .35rem;color:var(--emas-muda);font-size:1.12rem}
.cara__list p{margin:0;color:var(--redup);font-size:.93rem}

.tanya__list{display:grid;gap:.7rem;max-width:860px}
.tanya details{
  border-radius:14px;background:rgba(20,12,34,.78);border:1px solid rgba(217,198,230,.16);
  transition:border-color .3s;
}
.tanya details[open]{border-color:var(--garis)}
.tanya summary{
  cursor:pointer;list-style:none;padding:1rem 3rem 1rem 1.2rem;position:relative;
  font-family:var(--serif);font-size:1.05rem;color:var(--tinta);
}
.tanya summary::-webkit-details-marker{display:none}
.tanya summary::after{
  content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);
  color:var(--neon);font-family:var(--sans);font-size:1.3rem;transition:transform .3s;
}
.tanya details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.tanya details p{margin:0;padding:0 1.2rem 1.1rem;color:var(--redup);font-size:.95rem;max-width:72ch}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  position:relative;z-index:2;margin-top:4rem;padding:3rem 1.4rem 2.5rem;
  background:linear-gradient(180deg,rgba(5,3,10,.6),rgba(5,3,10,.98));
  border-top:1px solid rgba(57,255,136,.2);
}
.footer__crest{display:flex;justify-content:center;margin-bottom:1.5rem}
.footer__crest img{width:min(360px,80vw);opacity:.35;filter:drop-shadow(0 0 24px rgba(224,67,31,.35))}
.footer__grid{
  max-width:1120px;margin:0 auto;display:grid;gap:2rem;
  grid-template-columns:1.4fr 1fr 1fr;align-items:start;
}
.footer__mark{width:44px;height:44px;margin-bottom:.5rem}
.footer__name{font-family:var(--serif);font-size:1.6rem;color:var(--emas-muda);margin:0}
.footer__tag{color:var(--redup);max-width:34ch;font-size:.92rem}
.footer__h{font-size:.78rem;text-transform:uppercase;letter-spacing:.2em;color:var(--neon);margin:0 0 .8rem;font-family:var(--sans)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.footer ul a{color:var(--redup);font-size:.92rem;display:inline-block;padding:.45rem 0;min-height:40px}
.footer ul a:hover{color:var(--tinta)}

.footer__legal{
  max-width:1120px;margin:2.5rem auto 0;padding:1.4rem 1.4rem;
  border:1px solid rgba(224,67,31,.4);border-radius:var(--radius);
  background:rgba(224,67,31,.06);
}
.footer__legal p{color:var(--redup);font-size:.85rem;margin:0 0 .8rem}
.footer__legal strong{color:var(--emas-muda)}
.footer__legal .footer__h{color:var(--kemenyan)}
.footer__fine{font-size:.78rem;opacity:.75;margin-bottom:0 !important}

/* mode hemat (dipasang script.js?v=825ab902 untuk HP ber-RAM/CPU kecil atau Save-Data):
   tampilan tetap, hanya gerak & efek yang berat dimatikan */
.hemat .fog,.hemat .stars,.hemat .festoon{animation:none}
.hemat .firefly{filter:none}
.hemat .firefly:nth-child(even){display:none}
.hemat .tenda__smoke span{filter:none}
.hemat .reveal{transform:none;transition:opacity .4s ease}
.hemat .card,.hemat .btn{transition:none}
.hemat .card:hover,.hemat .btn:hover{transform:none}

/* elemen parallax diberi lapisan sendiri supaya geser tanpa gambar ulang */
[data-parallax]{will-change:translate}
.hemat [data-parallax]{will-change:auto}

/* animasi berhenti saat bagiannya di luar layar (kelas dipasang script.js?v=825ab902) */
.diam,.diam *{animation-play-state:paused !important}

/* bagian bawah lipatan baru dirender saat mendekati layar */
.produk,.suara,.cara,.tanya,.footer{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIF
   ========================================================================== */
@media (max-width:900px){
  .warung,.warung--sate,.warung--wayang{grid-template-columns:1fr;gap:1.8rem}
  .warung::before{width:100%;left:0;right:0}
  .warung--sate .warung__copy{order:2}
  .warung--sate .warung__art{order:1}
  .warung--weton .warung__copy{order:2}
  .warung--weton .warung__art{order:1}
  .warung--wayang .warung__copy{order:2}
  .warung--wayang .warung__art{order:1}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__grid>div:first-child{grid-column:1/-1}
  .deco-lantern,.deco-incense,.deco-owl,.deco-cat{opacity:.5}
}

@media (max-width:640px){
  .topbar{flex-wrap:wrap;gap:.5rem;padding:.55rem .8rem;background:rgba(5,3,10,.97)}
  .topbar__nav{order:3;width:100%;margin-left:0;justify-content:space-between;gap:.1rem}
  .topbar__nav a{font-size:.78rem;padding:.55rem .4rem;min-height:40px;display:inline-flex;align-items:center}
  .brand__text{font-size:1.05rem}
  .audio-toggle{margin-left:auto;font-size:.74rem;padding:.36rem .65rem}
  .section{padding:3rem .9rem}
  .warung{padding-top:3.5rem;padding-bottom:3.5rem}
  .hero{min-height:auto;padding-top:3.5rem;padding-bottom:17rem}
  .hero__panorama{width:1000px}
  .sky__moon{width:22vw;top:112px;right:-4vw}
  .footer__grid{grid-template-columns:1fr}
  .footer__legal{padding:1.1rem}
  .tenda{padding:3rem 1rem;margin:2rem .6rem}
  .btn{width:100%}
  .btn--ghost,.btn--primary{padding:.8rem 1rem}
  .hero__actions,.tenda__actions{flex-direction:column;align-items:stretch}
  .firefly{width:28px}
}

@media (max-width:380px){
  .brand__text small{letter-spacing:.14em}
  .hero__title{font-size:2.3rem}
  .warung__art img{width:88vw}
  .deco-lantern,.deco-incense,.deco-owl,.deco-cat{display:none}
}

/* ==========================================================================
   KURANGI GERAK
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .fog,.firefly,.stars,.sky__moon,.tenda__smoke span,.festoon{animation:none !important}
  .cta-lekat{transition:none}
  .firefly{opacity:.6}
}