/* Nasiayampapa — design system v2 (Okt 2026)
   Bahasa reka bentuk diilhamkan oleh paynet.my: tajuk Montserrat tebal dengan teks gradien,
   teks badan Inter, nav pil kaca terapung, latar kelabu cair, kad bucu 24px, butang pil,
   kad statistik dengan nombor besar, tab bergaris bawah.
   v3 (1 Okt 2026): warna ditukar kepada warna SEBENAR jenama, diambil dari logo dan papan tanda kedai:
   kuning keemasan + hitam papan tanda, merah balung ayam sebagai aksen. Latar krim hangat, bukan kelabu,
   supaya gambar makanan nampak lebih menyelerakan.
   Versi lama (krim, Georgia) diarkib di 04-PITCH-LAMA/laman-web-v1-krim-sebelum-redesign-2026-10-01/. */

:root{
  --bg:#ffffff;
  --surface:#fff8e6;
  --surface-2:#fcefc7;
  --paper:#ffffff;
  --ink:#202020;
  --ink-2:#4a4237;
  --ink-3:#8c7f6a;
  --line:#efe3c4;
  --chilli:#b5221a;
  --chilli-dk:#9c2a1e;
  --ember:#e0602e;
  --amber:#e8a13a;
  --pandan:#1f8a4c;
  --wa:#1faa53;
  --grad:linear-gradient(90deg,#f5b32a,#f5b32a);
  --kuning:#f5b32a;
  --kuning-lt:#fff4d6;
  --hitam:#161616;
  --merah:#c8241b;
  --grad-soft:#fff4d6;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.06);
  --shadow-lg:0 2px 6px rgba(16,24,40,.05),0 24px 60px rgba(16,24,40,.10);
  --radius:20px;
  --radius-lg:28px;
  --wrap:1200px;
  --head:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--chilli);text-underline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- Header: pil kaca terapung ---------- */
.topbar{display:none}
header.site{position:sticky;top:0;z-index:50;padding:14px 0 0;background:transparent}
header.site .wrap{
  display:flex;align-items:center;gap:16px;
  max-width:calc(var(--wrap) + 8px);
  background:rgba(255,255,255,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(230,232,235,.9);border-radius:999px;
  padding:10px 12px 10px 22px;box-shadow:0 8px 30px rgba(16,24,40,.08);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand .mark{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;background:var(--grad);
  color:#fff;display:grid;place-items:center;font-family:var(--head);font-size:19px;font-weight:800
}
.brand b{font-family:var(--head);font-size:18px;font-weight:800;display:block;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.brand>span{display:block}
.brand>span>span{display:block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.brand>.mark{display:grid}
nav.main{margin-left:auto;display:flex;gap:2px;align-items:center}
nav.main a{text-decoration:none;color:var(--ink);font-weight:500;font-size:14.5px;padding:9px 14px;border-radius:999px;transition:background .15s}
nav.main a:hover{background:var(--surface)}
nav.main a[aria-current="page"]{background:var(--ink);color:#fff}
.nav-cta{display:inline-flex;align-items:center;gap:6px;background:var(--wa);color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:10px 18px;border-radius:999px;white-space:nowrap}
.nav-cta:hover{filter:brightness(1.05)}
.navtoggle{margin-left:auto;display:none;background:var(--surface);border:0;border-radius:999px;padding:10px 14px;font-size:16px;cursor:pointer;color:var(--ink)}

/* ---------- Butang pil ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;
  padding:14px 24px;border-radius:999px;font-size:15px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s
}
.btn:hover{transform:translateY(-1px)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 8px 20px rgba(31,170,83,.25)}
.btn-primary{background:var(--chilli);color:#fff;box-shadow:0 8px 20px rgba(192,57,43,.22)}
.btn-ghost{background:transparent;color:var(--chilli);border-color:var(--chilli)}
.btn-ghost:hover{background:#fff4f1}
.btn-dark{background:var(--ink);color:#fff}
.btn-sm{padding:10px 18px;font-size:14px}

/* ---------- Hero ---------- */
.hero{background:var(--bg);padding:0}
.hero .wrap{padding-top:64px;padding-bottom:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:var(--grad-soft);color:var(--chilli);
  font-weight:600;font-size:13px;letter-spacing:.02em;padding:7px 14px;border-radius:999px;margin-bottom:20px;border:1px solid #f7dccf
}
h1{font-family:var(--head);font-weight:800;font-size:clamp(36px,5.2vw,62px);line-height:1.08;margin:0 0 20px;letter-spacing:-.025em}
h1 em,h2 em,.grad{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:18px;color:var(--ink-2);margin:0 0 30px;max-width:54ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.trust{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.trust span{background:var(--surface);border-radius:999px;padding:7px 14px}
.trust b{color:var(--ink)}

.hero-card{background:var(--surface);border-radius:var(--radius-lg);padding:26px;border:1px solid var(--line)}
.hero-card h3{margin:0 0 4px;font-size:18px}
.hero-card .muted{color:var(--ink-3);font-size:14px;margin:0 0 14px}
.hero-media{position:relative}
.hero-media .shot-hero{border-radius:var(--radius-lg);aspect-ratio:4/5;box-shadow:var(--shadow-lg)}
.hero-float{
  position:absolute;left:-28px;bottom:28px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-radius:20px;padding:16px 18px;box-shadow:var(--shadow-lg);min-width:250px;border:1px solid var(--line)
}
.hero-float b{display:block;font-family:var(--head);font-size:15px}
.hero-float small{display:block;color:var(--ink-3);font-size:12.5px;line-height:1.5}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--pandan)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pandan);box-shadow:0 0 0 4px rgba(31,138,76,.15)}
.outlet-mini{border-top:1px solid var(--line);padding:12px 0;display:flex;gap:12px;align-items:flex-start}
.outlet-mini:last-child{padding-bottom:0}
.pin{width:30px;height:30px;border-radius:10px;background:#fff1ec;color:var(--chilli);display:grid;place-items:center;flex:0 0 auto;font-size:14px}
.outlet-mini b{display:block;font-size:14.5px}
.outlet-mini small{color:var(--ink-3);font-size:12.5px;line-height:1.5;display:block}

/* ---------- Statistik (gaya kad nombor besar) ---------- */
.stats{background:var(--surface);padding:72px 0}
.stats h2{max-width:20ch}
.stats .sub{color:var(--ink-2);max-width:70ch;margin:0 0 36px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat-card{background:var(--paper);border-radius:var(--radius);padding:30px 22px;text-align:center;border:1px solid var(--line)}
.stat-card b{display:block;font-family:var(--head);font-weight:700;font-size:clamp(34px,4vw,48px);line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-card span{display:block;margin-top:8px;font-size:14px;color:var(--ink-2)}

/* ---------- Tab (gaya Business / Personal) ---------- */
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin:0 0 32px;overflow-x:auto}
.tabs button{
  background:none;border:0;padding:12px 2px;font:600 16px var(--sans);color:var(--ink-3);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap
}
.tabs button[aria-selected="true"]{color:var(--ink);border-image:var(--grad) 1;border-bottom-style:solid}
.tabpanel[hidden]{display:none}
.tabpanel .split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.tabpanel .split .shot{border-radius:var(--radius-lg);aspect-ratio:4/3}
.tabpanel h3{font-family:var(--head);font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.015em;margin:0 0 12px}
.tabpanel p{color:var(--ink-2)}
.ticks{list-style:none;padding:0;margin:0 0 24px}
.ticks li{padding:7px 0 7px 30px;position:relative;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:12px;width:18px;height:18px;border-radius:50%;background:var(--grad)}
.ticks li::after{content:"";position:absolute;left:6px;top:16px;width:6px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- Seksyen ---------- */
section{padding:80px 0}
section.tight{padding:48px 0}
.sec-head{max-width:66ch;margin-bottom:40px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
h2{font-family:var(--head);font-weight:800;font-size:clamp(28px,3.6vw,44px);line-height:1.12;margin:0 0 14px;letter-spacing:-.02em}
h3{font-family:var(--head);font-size:18px;font-weight:700;margin:0 0 8px;letter-spacing:-.005em}
.sec-head p{color:var(--ink-2);font-size:17px;margin:0}
.band{background:var(--surface)}
.band-ink{background:#151515;color:#d9d9d9;border-radius:var(--radius-lg);margin:0 24px;max-width:calc(var(--wrap) + 48px);margin-left:auto;margin-right:auto}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink p{color:#b8b8b8}

.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;transition:box-shadow .2s, transform .2s}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.band .card{border-color:transparent}
.card .ico{width:48px;height:48px;border-radius:14px;background:var(--grad-soft);display:grid;place-items:center;font-size:22px;margin-bottom:18px;line-height:1}
.card p{color:var(--ink-2);margin:0 0 16px;font-size:15px}
.card .btn{margin-top:auto;align-self:flex-start}

/* ---------- Menu ---------- */
.menu-cat{margin-bottom:44px;background:var(--surface);border-radius:var(--radius);padding:28px 30px}
.menu-cat h3{font-size:22px;font-weight:800;margin-bottom:4px}
.menu-cat .catnote{color:var(--ink-3);font-size:14px;margin:0 0 14px}
.menu-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.menu-list li{display:flex;align-items:baseline;gap:9px;padding:11px 0;border-bottom:1px solid var(--line)}
.menu-list .nm{font-weight:500}
.menu-list .dot{flex:1}
.menu-list .pr{font-family:var(--head);font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.menu-list .tag{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--grad);color:#fff;padding:3px 8px;border-radius:999px;margin-left:2px}
.menu-list .tag.veg{background:#e6f5ec;color:var(--pandan)}

.pricenote{background:var(--grad-soft);border:1px solid #f7dccf;border-radius:16px;padding:16px 20px;font-size:14.5px;color:var(--ink-2)}

/* ---------- Cawangan ---------- */
.fact{display:grid;grid-template-columns:150px 1fr;gap:10px 18px;font-size:15.5px}
.fact dt{font-weight:600;color:var(--ink-3)}
.fact dd{margin:0}
.hours{list-style:none;margin:0;padding:0;font-size:15px}
.hours li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}
.hours b{font-variant-numeric:tabular-nums}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0 0}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center}
.stat b{display:block;font-family:var(--head);font-size:30px;font-weight:700;line-height:1.1}
.stat span{font-size:13px;color:var(--ink-2)}

/* ---------- Soalan lazim ---------- */
.faq{display:grid;gap:10px}
.faq details{background:var(--surface);border-radius:16px;padding:2px 22px}
.faq summary{cursor:pointer;font-weight:600;padding:18px 0;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 28px;height:28px;border-radius:50%;background:#fff;color:var(--chilli);font-weight:600;font-size:18px;display:grid;place-items:center}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;color:var(--ink-2);font-size:15.5px;max-width:78ch}

/* ---------- Prosa ---------- */
.prose{max-width:72ch;font-size:17px}
.prose p{color:var(--ink-2);margin:0 0 18px}
.prose h2{margin-top:44px;font-size:clamp(24px,2.8vw,32px)}
.prose h3{margin-top:30px;font-size:20px}
.prose ul,.prose ol{color:var(--ink-2);padding-left:22px;margin:0 0 18px}
.prose li{margin-bottom:8px}
.prose blockquote{margin:26px 0;padding:18px 22px;background:var(--surface);border-left:4px solid var(--ember);border-radius:0 16px 16px 0;color:var(--ink-2);font-style:italic}

/* ---------- Lain-lain ---------- */
.crumbs{font-size:13px;color:var(--ink-3);padding:26px 0 0}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--chilli)}
.pill{display:inline-block;background:var(--surface);border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:500;margin:0 6px 8px 0;color:var(--ink-2)}
.rev{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.rev .stars{color:var(--amber);font-size:15px;letter-spacing:2px}
.rev p{font-size:15.5px;color:var(--ink-2);margin:10px 0 12px}
.rev cite{font-style:normal;font-weight:600;font-size:14px}
.rev cite small{display:block;font-weight:400;color:var(--ink-3)}

.cta-band{background:var(--grad);color:#fff;border-radius:var(--radius-lg);padding:56px 40px;text-align:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.10)}
.cta-band h2{color:#fff;margin-bottom:10px}
.cta-band h2 em{color:#fff;background:none}
.cta-band p{color:#fff3ea;font-size:17.5px;max-width:60ch;margin:0 auto 26px}
.cta-band .btn-ghost{background:#fff;color:var(--chilli);border-color:#fff}
.cta-band .btn-dark{background:rgba(0,0,0,.25);border-color:transparent}
.cta-band .btn-wa{box-shadow:none}

footer.site{background:var(--surface);color:var(--ink-2);padding:64px 0 32px;font-size:14.5px;margin-top:48px}
footer.site h4{font-family:var(--head);color:var(--ink);font-size:14px;font-weight:700;margin:0 0 16px}
footer.site a{color:var(--ink-2);text-decoration:none}
footer.site a:hover{color:var(--chilli)}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:10px}
footer.site .brand b{color:var(--ink)}
.footgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.legal{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;font-size:13px;color:var(--ink-3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.dummy{background:#202020;color:#ffd79a;text-align:center;font-size:12.5px;padding:8px 20px;font-weight:500}

/* ---------- Gambar ---------- */
.shot{display:block;width:100%;height:auto;border-radius:var(--radius);background:var(--surface-2);object-fit:cover}
.shot-hero{aspect-ratio:4/3}
.shot-wide{aspect-ratio:16/9}
figure.fig{margin:0 0 24px}
figure.fig figcaption{font-size:13px;color:var(--ink-3);margin-top:10px;line-height:1.5}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:0 0 28px}
.gal .shot{aspect-ratio:1/1}
.menu-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:0 0 32px}
.menu-shots figure{margin:0}
.menu-shots .shot{aspect-ratio:4/3}
.menu-shots figcaption{font-size:13px;color:var(--ink-2);margin-top:8px;font-weight:500}

/* ---------- Animasi masuk (dimatikan jika pengguna minta kurang gerakan) ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.btn,.card{transition:none}}

/* ---------- Responsif ---------- */
@media (max-width:1020px){
  nav.main a{padding:9px 10px;font-size:14px}
  .nav-cta{display:none}
}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:36px;padding-top:40px;padding-bottom:40px}
  .hero-media .shot-hero{aspect-ratio:4/3}
  .hero-float{left:16px;bottom:16px}
  .g3,.g4,.stat-grid{grid-template-columns:repeat(2,1fr)}
  .footgrid{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .menu-list{grid-template-columns:1fr}
  .tabpanel .split{grid-template-columns:1fr;gap:24px}
  nav.main{
    display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;
    border-radius:24px;flex-direction:column;align-items:stretch;padding:10px;gap:2px;box-shadow:var(--shadow-lg);border:1px solid var(--line)
  }
  nav.main a{padding:12px 16px;font-size:15px}
  nav.main.open{display:flex}
  .navtoggle{display:block}
  header.site{padding:10px 12px 0}
  header.site .wrap{position:relative;padding:8px 8px 8px 16px}
  .band-ink{margin:0 16px}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  section{padding:56px 0}
  .stats{padding:56px 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .stat-card{padding:22px 12px}
  .footgrid{grid-template-columns:1fr}
  .fact{grid-template-columns:1fr;gap:2px 0}
  .fact dd{margin-bottom:12px}
  .cta-band{padding:40px 22px}
  .cta-row .btn{width:100%;justify-content:center}
  .menu-cat{padding:22px 18px}
  .hero-float{position:static;margin-top:12px;min-width:0}
  .tabs{gap:18px}
  .tabs button{font-size:15px}
  .menu-shots{grid-template-columns:repeat(2,1fr);gap:10px}
}


/* ═════════════ Tema v3: kuning + hitam (warna jenama sebenar) ═════════════ */
.brand .mark{background:var(--kuning);color:var(--hitam);border-radius:50%}
h1 em,h2 em,.grad{color:inherit;-webkit-background-clip:border-box;background-clip:border-box;
  background:linear-gradient(transparent 60%,var(--kuning) 60%,var(--kuning) 92%,transparent 92%);padding:0 .06em}
.btn-primary{background:var(--hitam);color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.btn-ghost{color:var(--hitam);border-color:var(--hitam)}
.btn-ghost:hover{background:rgba(0,0,0,.05)}
.eyebrow{background:var(--kuning-lt);color:var(--hitam);border-color:#f3d98a}
.pin{background:var(--kuning-lt);color:var(--hitam)}
.card .ico{background:var(--kuning-lt)}
.ticks li::before{background:var(--kuning)}
.ticks li::after{border-color:var(--hitam)}
.tabs button[aria-selected="true"]{border-image:none;border-bottom-color:var(--kuning)}
.menu-list .tag{background:var(--merah)}
.pricenote{background:var(--kuning-lt);border-color:#f3d98a}
.crumbs a:hover{color:var(--merah)}

/* Hero kuning penuh, macam dinding kedai IM7 */
.hero{background:var(--kuning)}
.hero h1 em{background:none;color:var(--merah);padding:0}
.hero .lede{color:#3b2f12}
.hero .eyebrow{background:var(--hitam);color:var(--kuning);border-color:var(--hitam)}
.hero .trust span{background:rgba(255,255,255,.55)}
.hero .btn-ghost{border-color:var(--hitam)}
.hero-media .shot-hero{box-shadow:0 30px 60px rgba(60,40,0,.30)}
.hero{margin-top:-84px;padding-top:84px}
@media (max-width:900px){.hero{margin-top:-72px;padding-top:72px}}

/* Statistik: hitam papan tanda, nombor kuning */
.stats{background:var(--hitam)}
.stats h2{color:#fff}
.stats h2 em{background:none;color:var(--kuning);padding:0}
.stats .sub{color:#cfc8bb}
.stat-card{background:#222;border-color:#2e2e2e}
.stat-card b{color:var(--kuning)}
.stat-card span{color:#d6d0c4}

/* Kad hidangan bergambar */
.dish{background:var(--paper);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .2s, box-shadow .2s}
.dish:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.dish .shot{border-radius:0;aspect-ratio:4/3}
.dish .body{padding:18px 20px 22px;position:relative}
.dish h3{margin:0 0 6px;font-size:17px}
.dish p{margin:0;color:var(--ink-2);font-size:14.5px}
.dish .price{position:absolute;right:16px;top:-20px;background:var(--kuning);color:var(--hitam);font-family:var(--head);font-weight:800;font-size:15px;padding:8px 14px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.15)}
.dish .badge{display:inline-block;background:var(--merah);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-bottom:8px}

/* CTA kuning */
.cta-band{background:var(--kuning);color:var(--hitam)}
.cta-band::after{background:rgba(255,255,255,.28)}
.cta-band h2{color:var(--hitam)}
.cta-band p{color:#3b2f12}
.cta-band .btn-ghost{background:var(--hitam);color:#fff;border-color:var(--hitam)}
.cta-band .btn-dark{background:var(--hitam);color:#fff}

/* Footer hitam */
footer.site{background:var(--hitam);color:#bdb6a9}
footer.site h4{color:#fff}
footer.site a{color:#e7e2d8}
footer.site a:hover{color:var(--kuning)}
footer.site .brand b{color:#fff}
footer.site .brand>span>span{color:#9a9384}
.legal{border-top-color:#2c2c2c;color:#8f887b}

/* Bar tindakan bawah untuk telefon: Panggil + WhatsApp sentiasa dalam jangkauan ibu jari */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;font-weight:600;font-size:15px;padding:13px 10px;border-radius:999px}
  .mbar .call{background:var(--hitam);color:#fff}
  .mbar .wa{background:var(--wa);color:#fff}
  body{padding-bottom:76px}
  .nav-cta{display:none}
}

/* Telefon: makanan dahulu. Gambar hero naik ke atas tajuk, dan kad hidangan 2 lajur. */
@media (max-width:560px){
  .hero .wrap{gap:22px;padding-top:24px}
  .hero-media{order:-1}
  .hero-media .shot-hero{aspect-ratio:16/11}
  .hero-float{display:none}
  .dishes{grid-template-columns:1fr 1fr;gap:10px}
  .dish .body{padding:14px 12px 16px}
  .dish h3{font-size:14.5px}
  .dish p{font-size:12.5px;line-height:1.5}
  .dish .price{font-size:13px;padding:6px 10px;right:10px;top:-16px}
  .dish .badge{font-size:9.5px;padding:2px 7px}
}