/* ===== Reset & Tokens ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fffaf3;
  --bg-alt:#fdf0df;
  --ink:#2a1d14;
  --ink-soft:#6b5848;
  --brand:#c0392b;        /* merah martabak */
  --brand-dark:#9c2c20;
  --gold:#e0a526;
  --wa:#25d366;
  --wa-dark:#1da851;
  --card:#ffffff;
  --line:#efe2d2;
  --shadow:0 10px 30px rgba(80,45,20,.10);
  --radius:18px;
  --maxw:1120px;
}
html{scroll-behavior:smooth}
body{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;line-height:1.15;font-weight:700}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:700;font-size:.95rem;border:none;cursor:pointer;
  padding:.8em 1.4em;border-radius:999px;transition:.18s transform,.18s box-shadow,.18s background;
}
.btn:hover{transform:translateY(-2px)}
.btn--lg{padding:1em 1.8em;font-size:1.05rem}
.btn--sm{padding:.55em 1.1em;font-size:.88rem}
.btn--wa{background:var(--wa);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.35)}
.btn--wa:hover{background:var(--wa-dark)}
.btn--wa::before{content:"";width:1.1em;height:1.1em;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M.057 24l1.687-6.163a11.867 11.867 0 01-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 018.413 3.488 11.82 11.82 0 013.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 001.51 5.26l-.999 3.648 3.978-1.607zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M.057 24l1.687-6.163a11.867 11.867 0 01-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 018.413 3.488 11.82 11.82 0 013.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 001.51 5.26l-.999 3.648 3.978-1.607zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z'/%3E%3C/svg%3E") center/contain no-repeat}
.btn--brand{background:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(192,57,43,.30)}
.btn--brand:hover{background:var(--brand-dark)}
.btn--ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand)}

/* ===== Tombol pemesanan (food apps) ===== */
.order-apps{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.order-btn{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:1rem;color:#fff;padding:.85em 1.5em;border-radius:999px;transition:.18s transform,.18s filter}
.order-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.order-btn::before{content:"";width:1.1em;height:1.1em;background:#fff;border-radius:50%;opacity:.95}
.order-btn--gofood{background:#ee2737}
.order-btn--grabfood{background:#00b14f}
.order-btn--shopeefood{background:#ee4d2d}
.order-empty{color:#fff;opacity:.9;font-size:.95rem}
.order-empty code{background:rgba(255,255,255,.18);padding:.1em .4em;border-radius:5px}

/* ===== Navbar ===== */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,250,243,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav__brand{font-family:"Fraunces",serif;font-weight:700;font-size:1.35rem;color:var(--brand)}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links a{font-weight:600;font-size:.95rem;color:var(--ink-soft)}
.nav__links a:hover{color:var(--brand)}
.nav__toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ink)}

/* ===== Hero ===== */
.hero{background:radial-gradient(120% 120% at 80% 0%,var(--bg-alt) 0%,var(--bg) 60%);overflow:hidden}
.hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:64px 20px 72px}
.hero__eyebrow{display:inline-block;background:#fff;border:1px solid var(--line);color:var(--ink-soft);padding:.4em 1em;border-radius:999px;font-size:.85rem;font-weight:600;box-shadow:var(--shadow)}
.hero__title{font-size:clamp(2.2rem,5vw,3.6rem);margin:18px 0 14px}
.hero__sub{font-size:1.15rem;color:var(--ink-soft);max-width:34ch}
.hero__motto{margin-top:12px;font-family:"Fraunces",Georgia,serif;font-style:italic;
  font-size:1.05rem;color:var(--brand);max-width:34ch;line-height:1.5}
.hero__motto:empty{display:none}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 18px}
.hero__meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--ink-soft);font-size:.92rem;font-weight:600}
.hero__meta span{display:inline-flex;align-items:center;gap:.4em}
.hero__art{position:relative;display:grid;place-items:center;min-height:300px}
.hero__img{width:100%;max-width:440px;height:auto;filter:drop-shadow(0 18px 28px rgba(120,70,20,.20))}
.hero__plate{font-size:clamp(8rem,18vw,13rem);filter:drop-shadow(0 20px 30px rgba(120,70,20,.25))}
.float{position:absolute;animation:bob 4.6s ease-in-out infinite;z-index:2;
  filter:drop-shadow(0 5px 7px rgba(120,70,20,.28));will-change:transform}
/* variasi: ukuran (besar=dekat, kecil=jauh) + kedalaman (opacity/blur) + ritme beda */
.float--1{top:1%;   left:2%;    font-size:2.6rem;  animation-duration:4.2s; animation-delay:0s}
.float--2{bottom:11%;left:-2%;  font-size:2.1rem;  animation-duration:5s;   animation-delay:.8s}
.float--3{top:9%;   right:0;    font-size:1.7rem;  opacity:.9; animation-duration:4.6s; animation-delay:1.5s}
.float--4{top:54%;  left:-4%;   font-size:1.25rem; opacity:.7; filter:drop-shadow(0 4px 6px rgba(120,70,20,.22)) blur(.4px); animation:bobSmall 5.6s ease-in-out .4s infinite}
.float--5{bottom:0; right:5%;   font-size:2.25rem; animation-duration:4.8s; animation-delay:1.1s}
.float--6{top:0;    right:32%;  font-size:1.4rem;  opacity:.78; animation-duration:5.6s; animation-delay:2s}
.float--7{bottom:24%;right:-5%; font-size:1.85rem; opacity:.92; animation-duration:4.4s; animation-delay:.6s}
.float--8{top:46%;  left:0;     font-size:1.15rem; opacity:.6; filter:drop-shadow(0 4px 6px rgba(120,70,20,.2)) blur(.5px); animation:bobSmall 6s ease-in-out 1.4s infinite}
.float--9{top:2%;   left:44%;   font-size:1.5rem;  opacity:.8; animation-duration:3.8s; animation-delay:.3s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes bobSmall{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* uap panas — transparan, naik & memudar (tanpa background).
   tersebar dari samping kiri-tengah-kanan, ritme & tinggi diacak biar natural */
.hero__steam{position:absolute;top:6%;left:50%;transform:translateX(-50%);
  width:78%;max-width:420px;height:220px;z-index:3;pointer-events:none}
.hero__steam span{position:absolute;width:14px;height:96px;border-radius:50%;
  background:linear-gradient(to top,rgba(255,255,255,.9),rgba(255,255,255,0));
  filter:blur(4px);opacity:0;animation:steam 4.6s ease-in infinite}
/* tiap sumber: posisi (left), tinggi-awal (bottom), ukuran, durasi & delay beda2 */
.hero__steam span:nth-child(1){left:8%; bottom:6%;  width:13px;height:88px; animation-duration:4.2s;animation-delay:.0s}
.hero__steam span:nth-child(2){left:23%;bottom:14%; width:16px;height:108px;animation-duration:5.3s;animation-delay:1.7s}
.hero__steam span:nth-child(3){left:37%;bottom:2%;  width:14px;height:96px; animation-duration:4.7s;animation-delay:.9s}
.hero__steam span:nth-child(4){left:50%;bottom:18%; width:17px;height:116px;animation-duration:5.8s;animation-delay:2.6s}
.hero__steam span:nth-child(5){left:63%;bottom:5%;  width:13px;height:92px; animation-duration:4.0s;animation-delay:3.3s}
.hero__steam span:nth-child(6){left:77%;bottom:13%; width:15px;height:104px;animation-duration:5.1s;animation-delay:1.1s}
.hero__steam span:nth-child(7){left:90%;bottom:9%;  width:12px;height:84px; animation-duration:4.4s;animation-delay:2.0s}
@keyframes steam{0%{opacity:0;transform:translateY(18px) translateX(0) scaleX(1)}
  16%{opacity:.78}50%{opacity:.5}
  100%{opacity:0;transform:translateY(-130px) translateX(10px) scaleX(2.1)}}

/* ===== Sections ===== */
.section{padding:72px 0}
.section--alt{background:var(--bg-alt)}
.section__title{font-size:clamp(1.8rem,3.5vw,2.6rem);text-align:center}
.section__title--left{text-align:left}
.section__lead{text-align:center;color:var(--ink-soft);margin-top:8px;margin-bottom:40px}

/* ===== Features ===== */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;text-align:center;box-shadow:var(--shadow)}
.feature__emoji{font-size:2.2rem}
.feature h3{font-size:1.15rem;margin:12px 0 6px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700}
.feature p{color:var(--ink-soft);font-size:.92rem}

/* ===== Banner harga tier ===== */
.harga-banner{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:0 auto 38px;max-width:560px}
.harga-tier{flex:1;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;text-align:center;box-shadow:var(--shadow)}
.harga-tier--prem{border-color:var(--gold);background:linear-gradient(180deg,#fff,#fff7e6)}
.harga-tier__label{display:block;font-weight:700;color:var(--ink-soft);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
.harga-tier__price{display:block;font-family:"Fraunces",serif;font-weight:700;font-size:1.7rem;color:var(--brand);margin-top:4px}
.harga-tier--prem .harga-tier__price{color:var(--gold)}
.harga-tier__note{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:4px}

/* ===== Menu ===== */
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.menu-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.2s transform}
.menu-card:hover{transform:translateY(-4px)}
.menu-card__img{height:184px;display:grid;place-items:center;font-size:3.4rem;background:radial-gradient(120% 100% at 50% 30%,#fdeccf,#f6d3ad);position:relative}
.menu-card__badge{position:absolute;top:10px;left:10px;background:var(--brand);color:#fff;font-size:.72rem;font-weight:700;padding:.3em .8em;border-radius:999px}
.menu-card__body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.menu-card__name{font-weight:700;font-size:1.08rem}
.menu-card__desc{color:var(--ink-soft);font-size:.88rem;margin:6px 0 14px;flex:1}
.menu-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.menu-card__price{font-weight:800;color:var(--brand);font-size:1.05rem}
.menu-card__btn{background:var(--wa);color:#fff;border:none;border-radius:999px;padding:.5em 1em;font-weight:700;font-size:.82rem;cursor:pointer;transition:.18s background}
.menu-card__btn:hover{background:var(--wa-dark)}

/* ===== Topping ===== */
.topping{margin-top:48px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:36px 24px;box-shadow:var(--shadow)}
.topping__title{font-size:1.5rem}
.topping__lead{color:var(--ink-soft);margin:8px auto 22px;max-width:46ch}
.topping__chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:.5em;background:var(--bg-alt);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.95rem;padding:.6em 1.2em;border-radius:999px}
.chip__emoji{font-size:1.15rem}

/* ===== CTA band ===== */
.cta{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff}
.cta__inner{text-align:center;padding:64px 20px}
.cta h2{font-size:clamp(1.8rem,4vw,2.6rem);color:#fff}
.cta p{margin:10px 0 26px;opacity:.92}

/* ===== Lokasi ===== */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.info-list{list-style:none;margin:18px 0 26px;display:grid;gap:14px}
.info-list li{display:flex;gap:12px;align-items:flex-start;font-size:1rem}
.info-list b{display:block;font-weight:700}
.info-list span:first-child{font-size:1.3rem}
.info-card{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:40px;text-align:center}
.info-card__map{font-size:4rem}
.info-card p{color:var(--ink-soft);margin-top:10px}

/* ===== Footer ===== */
.footer{background:var(--ink);color:#f3e7d8;padding:28px 0}
.footer__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.footer__inner #footerBrand{font-family:"Fraunces",serif;font-weight:700}
.footer__small{opacity:.7;font-size:.88rem}

/* ===== Chatbot ===== */
.chat{position:fixed;right:20px;bottom:20px;z-index:60}
.chat__fab{width:60px;height:60px;border-radius:50%;border:none;background:var(--brand);color:#fff;font-size:1.6rem;cursor:pointer;box-shadow:0 10px 26px rgba(192,57,43,.45);transition:.18s transform}
.chat__fab:hover{transform:scale(1.06)}
.chat__panel{position:absolute;right:0;bottom:74px;width:340px;max-width:calc(100vw - 40px);height:460px;max-height:70vh;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(80,45,20,.25);display:flex;flex-direction:column;overflow:hidden}
.chat__panel[hidden]{display:none}
.chat__head{background:var(--brand);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:700}
.chat__close{background:none;border:none;color:#fff;font-size:1.1rem;cursor:pointer}
.chat__body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.msg{max-width:85%;padding:.65em .9em;border-radius:14px;font-size:.92rem;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.msg--bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.msg--user{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg--typing{color:var(--ink-soft);font-style:italic}
.chat__form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}
.chat__form input{flex:1;border:1px solid var(--line);border-radius:999px;padding:.6em 1em;font:inherit;font-size:.92rem;outline:none}
.chat__form input:focus{border-color:var(--brand)}
.chat__form button{background:var(--brand);color:#fff;border:none;width:42px;border-radius:50%;cursor:pointer;font-size:1rem}

/* ===== Responsive ===== */
@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__sub{margin-left:auto;margin-right:auto}
  .hero__cta,.hero__meta{justify-content:center}
  .hero__art{order:-1;min-height:200px}
  .features{grid-template-columns:repeat(2,1fr)}
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .info-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nav__links{position:absolute;top:68px;left:0;right:0;background:var(--bg);flex-direction:column;gap:0;padding:0;max-height:0;overflow:hidden;transition:.25s max-height;border-bottom:1px solid var(--line)}
  .nav__links.open{max-height:320px}
  .nav__links a{padding:14px 20px;width:100%;border-top:1px solid var(--line)}
  .nav__toggle{display:block}
  .features,.menu-grid{grid-template-columns:1fr}
}

/* ============================================================
   MOTION & POLISH LAYER  (2026-06-25 — bikin situs "hidup")
   ============================================================ */

/* Scroll progress bar di paling atas */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--brand),var(--gold));
  z-index:100;transition:width .08s linear;box-shadow:0 0 8px rgba(192,57,43,.4)}

/* Navbar mengecil + kasih bayangan saat di-scroll */
.nav{transition:background .25s,box-shadow .25s}
.nav__inner{transition:height .25s}
.nav--scrolled{background:rgba(255,250,243,.96);box-shadow:0 6px 24px rgba(80,45,20,.12)}
.nav--scrolled .nav__inner{height:56px}

/* Scroll-reveal: elemen muncul saat masuk layar (ditandai JS) */
[data-reveal]{opacity:0;transform:translateY(34px);will-change:opacity,transform;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
[data-reveal="left"]{transform:translateX(-46px)}
[data-reveal="right"]{transform:translateX(46px)}
[data-reveal="zoom"]{transform:scale(.92)}
[data-reveal].is-visible{opacity:1;transform:none}

/* Hero — animasi masuk bertahap saat halaman dibuka */
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes heroArt{from{opacity:0;transform:scale(.84) rotate(-5deg)}to{opacity:1;transform:none}}
.hero__eyebrow{animation:heroIn .7s .05s both cubic-bezier(.22,.61,.36,1)}
.hero__title  {animation:heroIn .7s .18s both cubic-bezier(.22,.61,.36,1)}
.hero__sub    {animation:heroIn .7s .30s both cubic-bezier(.22,.61,.36,1)}
.hero__cta    {animation:heroIn .7s .42s both cubic-bezier(.22,.61,.36,1)}
.hero__meta   {animation:heroIn .7s .54s both cubic-bezier(.22,.61,.36,1)}
.hero__art    {animation:heroArt 1s .25s both cubic-bezier(.22,.61,.36,1)}

/* Hero — glow lembut di belakang ilustrasi + elemen melayang */
.hero__art{perspective:800px}
.hero__glow{position:absolute;width:74%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,rgba(224,165,38,.40),rgba(192,57,43,.10) 55%,transparent 72%);
  filter:blur(6px);z-index:0;animation:glowPulse 5.5s ease-in-out infinite}
@keyframes glowPulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.1);opacity:1}}
.hero__img{position:relative;z-index:1}
.float{z-index:2}   /* tanpa lingkaran putih — emoji melayang transparan, menyatu */

/* Judul section — garis bawah aksen yang "tumbuh" saat muncul */
.section__title{position:relative}
.section__title::after{content:"";display:block;height:4px;width:0;margin:14px auto 0;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--gold));transition:width .7s .15s cubic-bezier(.22,.61,.36,1)}
.section__title--left::after{margin-left:0}
.section__title.is-visible::after{width:64px}

/* Kartu menu — hover lebih hidup: angkat, zoom gambar, glow */
.menu-card{position:relative;transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s}
.menu-card:hover{transform:translateY(-8px)}
.menu-card::after{content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;
  opacity:0;transition:opacity .25s;box-shadow:0 26px 52px rgba(192,57,43,.18)}
.menu-card:hover::after{opacity:1}
.menu-card__img{overflow:hidden}
.menu-card__img img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.menu-card:hover .menu-card__img img{transform:scale(1.09)}
.menu-card__badge{z-index:2}

/* Kartu keunggulan + harga — hover halus */
.feature,.harga-tier{transition:transform .22s,box-shadow .22s}
.feature:hover,.harga-tier:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(80,45,20,.14)}
.feature__emoji{display:inline-block;transition:transform .25s}
.feature:hover .feature__emoji{transform:scale(1.15) rotate(-6deg)}

/* Chip topping — pop saat hover */
.chip{transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;cursor:default}
.chip:hover{transform:translateY(-3px) scale(1.05);background:#fff;border-color:var(--brand);box-shadow:var(--shadow)}

/* Tombol — efek kilau menyapu saat hover */
.btn--brand,.order-btn{position:relative;overflow:hidden}
.btn--brand::after,.order-btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .6s}
.btn--brand:hover::after,.order-btn:hover::after{left:140%}
.order-btn::after{border-radius:0}

/* CTA band — cahaya berputar pelan di latar */
.cta{position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;top:-60%;left:-30%;width:160%;height:220%;pointer-events:none;
  background:radial-gradient(circle at 30% 35%,rgba(255,255,255,.14),transparent 42%);animation:ctaSpin 20s linear infinite}
.cta__inner{position:relative;z-index:1}
@keyframes ctaSpin{to{transform:rotate(360deg)}}

/* Chat FAB — denyut cincin biar kelihatan bisa diklik */
.chat__fab{position:relative}
.chat__fab::after{content:"";position:absolute;inset:0;border-radius:50%;
  animation:fabRing 2.6s ease-out infinite;pointer-events:none}
@keyframes fabRing{0%{box-shadow:0 0 0 0 rgba(192,57,43,.45)}70%{box-shadow:0 0 0 16px rgba(192,57,43,0)}100%{box-shadow:0 0 0 0 rgba(192,57,43,0)}}

/* Hormati pengguna yang minta minim animasi (aksesibilitas) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .section__title.is-visible::after{width:64px}
}

/* ============================================================
   PENYESUAIAN DEVICE  — HP · tablet · desktop, anti-tabrakan
   ============================================================ */
@media (max-width:1024px){
  .section{padding:60px 0}
  .features{grid-template-columns:repeat(2,1fr)}   /* tablet: 2 kolom */
  .menu-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .hero__inner{padding:48px 20px 56px}
  .hero__art{min-height:240px}
  .hero__steam{height:180px}
}
@media (max-width:600px){
  /* di HP sisakan beberapa float di sudut (transparan), sembunyikan yang kecil/jauh biar tak penuh.
     PISANG (float--5) disembunyikan, KACANG (float--3) ditampilkan sesuai permintaan. */
  .float--4,.float--5,.float--6,.float--8,.float--9{display:none}
  .float--1{top:2%;left:2%;font-size:1.9rem}
  .float--2{bottom:8%;left:0;font-size:1.6rem}
  .float--3{top:6%;right:2%;font-size:1.6rem}
  .float--7{bottom:34%;right:0;font-size:1.5rem}
  .hero__steam{width:88%;height:150px}
  .hero__glow{width:62%}
  .section{padding:50px 0}
  .menu-grid{gap:16px}
  .topping{padding:28px 18px}
  .cta__inner{padding:48px 16px}
  .info-card{padding:30px 22px}
  .scroll-progress{height:2px}
  .chat__panel{height:64vh}
  .order-apps{gap:10px}
}
@media (max-width:380px){
  .hero__title{font-size:1.95rem}
  .order-btn{font-size:.9rem;padding:.8em 1.15em}
  .nav__brand{font-size:1.2rem}
}

/* ============================================================
   TEMA DJAWA — motif batik "kawung" halus + aksen sogan/emas.
   Niatnya kelas atas, bukan norak: tekstur tipis di latar saja.
   ============================================================ */
:root{ --sogan:#8a4a22; }

/* Tekstur batik kawung tipis di hero & section krem */
.hero,.section--alt{position:relative}
.hero::after,.section--alt::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%238a4a22' stroke-width='1.2'%3E%3Cellipse cx='32' cy='16' rx='9' ry='14'/%3E%3Cellipse cx='32' cy='48' rx='9' ry='14'/%3E%3Cellipse cx='16' cy='32' rx='14' ry='9'/%3E%3Cellipse cx='48' cy='32' rx='14' ry='9'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='2.4' fill='%23e0a526'/%3E%3C/svg%3E");
  background-size:62px 62px;
}
.hero .container,.section--alt .container{position:relative;z-index:1}

/* Batik emas di band CTA (latar merah) — lebih terasa "Djawa" */
.cta{background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffe1a6' stroke-opacity='0.16' stroke-width='1.2'%3E%3Cellipse cx='32' cy='16' rx='9' ry='14'/%3E%3Cellipse cx='32' cy='48' rx='9' ry='14'/%3E%3Cellipse cx='16' cy='32' rx='14' ry='9'/%3E%3Cellipse cx='48' cy='32' rx='14' ry='9'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='2.2' fill='%23ffe1a6' fill-opacity='0.22'/%3E%3C/svg%3E"),
  linear-gradient(135deg,var(--brand),var(--brand-dark));
  background-size:62px 62px,auto;
}

/* Garis emas tipis di bawah navbar — aksen "prada" batik */
.nav{border-bottom:none;box-shadow:inset 0 -2px 0 rgba(224,165,38,.35),0 1px 0 var(--line)}
.nav--scrolled{box-shadow:inset 0 -2px 0 rgba(224,165,38,.5),0 6px 24px rgba(80,45,20,.12)}

/* Ornamen kawung kecil di atas judul section (pemanis khas Djawa) */
.section__title::before{content:"";display:block;width:26px;height:26px;margin:0 auto 12px;opacity:.8;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23c0392b' stroke-width='3'%3E%3Cellipse cx='32' cy='16' rx='9' ry='14'/%3E%3Cellipse cx='32' cy='48' rx='9' ry='14'/%3E%3Cellipse cx='16' cy='32' rx='14' ry='9'/%3E%3Cellipse cx='48' cy='32' rx='14' ry='9'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='4' fill='%23e0a526'/%3E%3C/svg%3E") center/contain no-repeat}
.section__title--left::before{margin-left:0}

/* Brand di navbar & footer pakai aksen emas tipis */
.nav__brand{background:linear-gradient(90deg,var(--brand),var(--sogan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ============================================================
   TANPA HARGA — info ukuran, kartu "segera hadir", topping soon
   ============================================================ */
.tier-info{max-width:600px;margin:0 auto 38px;text-align:center;color:var(--ink-soft);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 24px;box-shadow:var(--shadow);font-weight:600;line-height:1.5}
.menu-card--soon{opacity:.92}
.menu-card--soon .menu-card__img{background:repeating-linear-gradient(135deg,#f3e7d6,#f3e7d6 14px,#efe0cc 14px,#efe0cc 28px)}
.menu-card__soon{display:grid;place-items:center;height:100%;font-size:3rem;filter:grayscale(.3);opacity:.55}
.menu-card__badge--soon{background:var(--gold);color:#3a2a08}
.menu-card__hint{font-size:.86rem;color:var(--ink-soft);font-weight:700}
.topping__soon{margin-top:18px;color:var(--brand);font-weight:700;font-size:.92rem}

/* ============================================================
   ILUSTRASI — hero + band proses masak (ilustrasi orisinal)
   ============================================================ */
/* Hero: ilustrasi potongan martabak */
.hero__img{width:100%;max-width:480px;height:auto;border:none;border-radius:0;
  filter:drop-shadow(0 22px 30px rgba(120,70,20,.26))}

/* Band "Dimasak fresh di loyang" */
.proses{background:var(--bg);overflow:hidden}
.proses__inner{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;padding:72px 20px}
.proses__media{position:relative;text-align:center}
.proses__media img{width:100%;max-width:430px;height:auto;
  filter:drop-shadow(0 20px 30px rgba(80,45,20,.20))}
.proses__media::before{content:"";position:absolute;inset:-10px -10px auto auto;width:120px;height:120px;
  border-radius:50%;background:radial-gradient(circle,rgba(224,165,38,.45),transparent 70%);filter:blur(6px);z-index:-1}
.proses__eyebrow{display:inline-block;color:var(--brand);font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.proses__text h2{margin-bottom:12px}
.proses__text p{color:var(--ink-soft);margin-bottom:22px;max-width:46ch}
.proses__motto{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:1.12rem;
  color:var(--brand);border-left:3px solid var(--brand);padding-left:14px;max-width:46ch}
.proses__motto:empty{display:none}
@media (max-width:820px){
  .proses__inner{grid-template-columns:1fr;gap:28px;padding:52px 20px;text-align:center}
  .proses__text p{margin-left:auto;margin-right:auto}
  .proses__media img{max-height:320px}
  .section__title--left{text-align:center}
  .section__title--left::before,.section__title--left::after{margin-left:auto;margin-right:auto}
}

/* ============================================================
   PREMIUM FINISH — 2026-06-27 S2 (rombak tampilan: tier 2 kartu,
   kedalaman, aksen emas, hero lebih kaya). Tasteful, bukan norak.
   ============================================================ */

/* ---- Tier: KLASIK vs PREMIUM (2 kartu berdampingan) ---- */
.tier-intro{text-align:center;color:var(--ink-soft);margin:0 auto 22px;font-size:1.05rem}
.tier-intro b{color:var(--brand)}
.tier-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:660px;margin:0 auto 40px}
.tier-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 24px 26px;text-align:center;box-shadow:0 12px 30px rgba(80,45,20,.10);overflow:hidden;
  transition:transform .24s cubic-bezier(.22,.61,.36,1),box-shadow .24s}
.tier-card:hover{transform:translateY(-7px);box-shadow:0 24px 50px rgba(80,45,20,.18)}
.tier-card__ribbon{display:inline-block;margin-bottom:12px;font-size:.7rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:.38em 1.1em;border-radius:999px;
  background:var(--bg-alt);color:var(--ink-soft);border:1px solid var(--line)}
.tier-card__emoji{display:block;font-size:2.6rem;line-height:1;filter:drop-shadow(0 6px 10px rgba(80,45,20,.18))}
.tier-card__name{display:block;font-family:"Fraunces",serif;font-weight:700;font-size:1.55rem;margin-top:10px;color:var(--ink)}
.tier-card__desc{color:var(--ink-soft);font-size:.92rem;margin-top:10px;line-height:1.55}
.tier-card__note{display:inline-block;margin-top:14px;font-size:.76rem;font-weight:700;color:var(--sogan);
  background:#fff7e6;border:1px solid var(--gold);border-radius:999px;padding:.32em 1em}
/* aksen EMAS untuk Premium */
.tier-card--prem{border-color:var(--gold);background:linear-gradient(180deg,#fffdf8,#fff3d9)}
.tier-card--prem::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--gold),#f4cd6e,var(--gold))}
.tier-card--prem .tier-card__ribbon{background:linear-gradient(90deg,var(--gold),#cf9f1f);color:#fff;border-color:transparent;
  box-shadow:0 4px 12px rgba(224,165,38,.4)}
.tier-card--prem .tier-card__name{color:var(--brand-dark)}
.tier-card--prem .tier-card__emoji{filter:drop-shadow(0 6px 12px rgba(224,165,38,.5))}
@media (max-width:480px){.tier-cards{grid-template-columns:1fr;max-width:340px}}

/* ---- Hero lebih kaya: glow berlapis + motto dipertegas ---- */
.hero__inner{position:relative;z-index:1}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(48% 42% at 80% 32%,rgba(224,165,38,.18),transparent 62%),
    radial-gradient(42% 38% at 8% 88%,rgba(192,57,43,.10),transparent 60%)}
.hero__motto{position:relative;padding-left:14px}
.hero__motto::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand),var(--gold))}

/* ---- Kedalaman lebih pada kartu (keunggulan + menu) ---- */
.feature{box-shadow:0 10px 28px rgba(80,45,20,.08);border-top:3px solid transparent;transition:transform .22s,box-shadow .22s,border-color .22s}
.feature:hover{border-top-color:var(--gold)}
.menu-card{box-shadow:0 12px 30px rgba(80,45,20,.10)}
.menu-card__img::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 86% at 50% 8%,transparent 58%,rgba(80,45,20,.14))}
.menu-card__badge{box-shadow:0 4px 10px rgba(0,0,0,.18)}

/* ---- Topping & info card: hairline emas biar terasa "prada" ---- */
.topping{box-shadow:0 14px 34px rgba(80,45,20,.10)}
.topping::before{content:"";display:block;width:46px;height:3px;border-radius:2px;margin:0 auto 16px;
  background:linear-gradient(90deg,var(--brand),var(--gold))}
.info-card{box-shadow:0 12px 30px rgba(80,45,20,.10)}

/* ---- Sapuan kilau lembut yang menyapu kartu tier premium ---- */
.tier-card--prem{overflow:hidden}
.tier-card--prem::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);
  animation:tierSheen 6s ease-in-out 1.5s infinite}
@keyframes tierSheen{0%,72%{left:-130%}86%,100%{left:150%}}

@media (prefers-reduced-motion:reduce){.tier-card--prem::after{animation:none;display:none}}

/* ============================================================
   QA RESPONSIF FINAL — 2026-06-27 S2 (blok PALING AKHIR = paling
   menentukan). Grid 4-item dibuat 4→2→1 biar TAK PERNAH ada kartu
   sendirian (4%3=1 = Tipker nyangkut). Urut lebar→sempit.
   ============================================================ */
@media (max-width:1024px){
  .menu-grid{grid-template-columns:repeat(4,1fr);gap:18px}   /* tetap 4 sebaris, bukan 3 */
  .features{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .menu-grid{grid-template-columns:repeat(2,1fr)}            /* 2×2, rapi */
  .features{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .menu-grid{grid-template-columns:1fr;gap:18px}             /* 1 kolom, kartu besar */
  .features{grid-template-columns:1fr}
  .tier-cards{grid-template-columns:1fr;max-width:360px}     /* Klasik/Premium tumpuk */
}

/* Anti scroll-horizontal (mis. kartu Lokasi mepet di tablet ~768px).
   overflow-x:clip AMAN untuk .nav sticky (tak bikin scroll-container,
   beda dari overflow:hidden). min-width:0 cegah anak grid "jebol". */
html,body{overflow-x:clip}
.info-grid>*,.menu-grid>*,.tier-cards>*,.features>*{min-width:0}

/* ---- FAQ (accordion native <details>) ---- */
.faq{max-width:760px;margin:0 auto;display:grid;gap:14px}
.faq__item{background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 8px 22px rgba(80,45,20,.06);overflow:hidden;transition:box-shadow .2s,border-color .2s}
.faq__item[open]{border-color:var(--gold);box-shadow:0 14px 32px rgba(80,45,20,.12)}
.faq__item summary{cursor:pointer;list-style:none;padding:18px 50px 18px 20px;position:relative;
  font-weight:700;font-size:1.02rem;color:var(--ink);user-select:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:400;color:var(--brand);transition:transform .25s}
.faq__item[open] summary::after{content:"–";transform:translateY(-50%) rotate(180deg)}
.faq__item summary:hover{color:var(--brand)}
.faq__a{padding:0 20px 18px;color:var(--ink-soft);line-height:1.6;font-size:.95rem}
.faq__a b{color:var(--ink)}