/* ==========================================================================
   W3S Catering — Design System v2 "Warm Table"
   --------------------------------------------------------------------------
   Referensi  : Limón (styles.refero.design) — "evening brasserie, warm
                overhead light, food photographed as editorial still-life".
                Dipilih karena itu persis foto katalog 3S: lilin, kayu gelap,
                piring putih, latar marun.
   Pendukung  : Amrit Palace — nada krem hangat untuk section jeda.
   --------------------------------------------------------------------------
   Tiga perbaikan utama dari v1 (yang terasa "generik"):
     1. Kanvas warm near-black, bukan #000 netral. Abu dingin menekan selera.
     2. Foto full-bleed / tile besar. Tidak ada thumbnail kecil.
     3. Tracking display POSITIF lebar, bukan negatif ketat.
   Dokumentasi + daftar penyimpangan: docs/DESIGN.md
   ========================================================================== */

@font-face {
  font-family: 'Petrona';
  src: url('../fonts/petrona-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-var.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
}

/* ==========================================================================
   Token
   ========================================================================== */
:root {
  /* Permukaan gelap — semuanya HANGAT (ada merah/coklat di dalamnya) */
  --ink:      #1A0E0A;   /* kanvas utama */
  --ink-2:    #241310;   /* band selang-seling */
  --ink-3:    #2F1A15;   /* kartu */
  --ink-4:    #3B231C;   /* kartu terangkat */

  /* Permukaan terang — section jeda, agar halaman tidak gelap terus */
  --cream:    #F7F0E4;
  --cream-2:  #EBE0CE;

  /* Teks */
  --paper:    #FDF8F0;   /* putih hangat, bukan #fff dingin */
  --muted:    rgba(253,248,240,.66);
  --muted-2:  rgba(253,248,240,.42);
  --on-cream:     #241310;
  --on-cream-mut: rgba(36,19,16,.66);

  /* Garis */
  --hair:     rgba(253,248,240,.16);
  --hair-2:   rgba(253,248,240,.32);
  --hair-cream: rgba(36,19,16,.18);

  /* Aksen — hijau merek klien dipakai sebagai "zest" tunggal ala Limón */
  --zest:     #8DC63F;
  --zest-dp:  #16300B;   /* hijau tua untuk permukaan */
  --ember:    #E32219;   /* merah: HANYA promo & penanda masalah */
  --gold:     #C8A46A;   /* penanda 3S premium */
  --wa:       #25D366;

  /* Radius nyaris nol — signature Limón, sengaja tidak dilembutkan.
     Hanya SATU nilai di seluruh sistem; tidak ada varian pil. */
  --r:        2px;

  --maxw:     1320px;
  --gutter:   clamp(20px, 5vw, 72px);
  --section:  clamp(76px, 9vw, 128px);

  --serif:    'Petrona', 'Iowan Old Style', Georgia, serif;
  --sans:     'Karla', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--zest); color: var(--zest-dp); }
:focus-visible { outline: 2px solid var(--zest); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 1600px; }

/* ==========================================================================
   Tipografi — tracking POSITIF pada display (kebalikan v1)
   ========================================================================== */
h1, h2, .display {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: .012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.4vw, 5.2rem); letter-spacing: .006em; }
h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
.d-md { font-family: var(--serif); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: .012em; line-height: 1.15; }

h3, h4 { font-family: var(--sans); font-weight: 700; letter-spacing: -.005em; line-height: 1.3; margin: 0; }
h3 { font-size: 1.08rem; }
h4 { font-size: .95rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Label mikro — huruf besar, tracking sangat lebar (ala papan menu) */
.label {
  display: block;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--zest);
  margin: 0 0 20px;
}
.label--mut { color: var(--muted-2); }
.on-cream .label--mut { color: var(--on-cream-mut); }

.lead { font-size: clamp(1.05rem, 1.45vw, 1.24rem); line-height: 1.6; color: var(--muted); max-width: 48ch; }
.fine { font-size: .82rem; color: var(--muted-2); }

/* Section bernada krem — jeda dari gelap */
.on-cream { background: var(--cream); color: var(--on-cream); }
.on-cream .lead, .on-cream .fine { color: var(--on-cream-mut); }

/* ==========================================================================
   Section
   ========================================================================== */
section { padding: var(--section) 0; position: relative; }
.band { background: var(--ink-2); }
.rule { border-top: 1px solid var(--hair); }
.on-cream.rule { border-top-color: var(--hair-cream); }

.opener { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(24px,4vw,72px); align-items: end; margin-bottom: clamp(36px,4.5vw,64px); }
@media (max-width: 880px) { .opener { grid-template-columns: 1fr; gap: 18px; align-items: start; } }

/* ==========================================================================
   Tombol — radius nyaris nol
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent; border-radius: var(--r);
  font-family: var(--sans); font-size: .88rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease);
}
/* Di layar sentuh tidak ada :hover sama sekali, jadi tanpa ini tombol terasa
   mati saat ditekan — tidak ada tanda bahwa sentuhan terbaca. Sengaja cepat
   (120ms) supaya terasa sebagai respons, bukan animasi. */
.btn:active { transform: scale(.975); }
/* iOS memutar ulang :hover setelah tap dan membuat warnanya "nyangkut";
   batasi seluruh hover ke perangkat yang benar-benar punya penunjuk presisi */
@media (hover: none) {
  .btn--zest:hover  { background: var(--zest); }
  .btn--wa:hover    { background: var(--wa); }
  .btn--ghost:hover { border-color: var(--hair-2); background: transparent; }
}
.btn--zest { background: var(--zest); color: var(--zest-dp); }
.btn--zest:hover { background: #A2DC50; }
.btn--wa { background: var(--wa); color: #042E14; }
.btn--wa:hover { background: #35E877; }
.btn--ghost { border-color: var(--hair-2); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); background: rgba(253,248,240,.06); }
.on-cream .btn--ghost { border-color: var(--hair-cream); color: var(--on-cream); }
.on-cream .btn--ghost:hover { background: rgba(36,19,16,.06); }
.btn--block { width: 100%; }
.btn--sm { padding: 11px 20px; font-size: .76rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link { border-bottom: 1px solid var(--hair-2); padding-bottom: 2px; transition: border-color .2s, color .2s; }
.link:hover { border-color: var(--zest); color: var(--zest); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(26,14,10,.78);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck { background: rgba(26,14,10,.95); border-bottom-color: var(--hair); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.brand { display: flex; align-items: baseline; gap: 9px; }
.brand__name { font-family: var(--serif); font-weight: 800; font-size: 1.45rem; letter-spacing: .02em; }
.brand__sub { font-size: .6rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--muted-2); }
@media (max-width: 560px) { .brand__sub { display: none; } }
.nav { display: flex; gap: 28px; }
.nav a { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: color .18s; }
.nav a:hover { color: var(--zest); }
@media (max-width: 1040px) { .nav { display: none; } }
@media (max-width: 640px) { .header-cta { display: none; } }

/* ==========================================================================
   Hero — split editorial: teks kiri, satu foto utuh di kanan.

   Kenapa bukan foto full-bleed lagi: satu-satunya foto makanan bergaya yang
   kami punya berformat potret 1086x1448. Dipasang full-bleed di balik teks,
   `object-fit: cover` memotongnya habis dan hasilnya "kepotong". Kolom kanan
   dikunci pada aspect-ratio 3/4 — persis rasio asli foto — sehingga tidak ada
   satu piksel pun yang dibuang, di lebar layar mana pun.
   ========================================================================== */
.hero { padding: clamp(40px,6vw,72px) 0 clamp(48px,6vw,88px); overflow: hidden; }
/* lebar foto ikut lebar layar (clamp), bukan angka mati — dengan 480px tetap,
   pada 1000px kolom teks tersisa 355px dan judulnya terjepit */
.hero__grid { display: grid; grid-template-columns: minmax(0,1fr) clamp(280px, 32vw, 460px); gap: clamp(32px,5vw,72px); align-items: center; }
.hero__copy { min-width: 0; }
/* Hero memakai ukuran display sendiri, lebih kecil dari h1 global.

   Headline Rev 2 jauh lebih panjang dari sebelumnya. Pada ukuran h1 global
   (83px di 1440) ia membungkus jadi 7 baris di kolom 644px: hero membengkak
   jadi 1141px dan judulnya menelan seluruh layar pertama. Pada 48px, ketiga
   .reveal-line masing-masing pas satu baris dan hero turun ke 772px.

   Membungkus tidak merusak animasinya — span tetap ter-reveal utuh karena
   induknya overflow:hidden — tapi stagger per-baris hilang dan tingginya
   melonjak. Kalau teks headline diganti, ukur lagi tinggi tiap .reveal-line
   terhadap line-height-nya. Di bawah 480px baris pertama memang membungkus
   jadi dua; itu diterima, mengecilkan font lagi membuatnya terlalu lemah. */
.hero h1 { margin-bottom: 22px; font-size: clamp(2rem, 3.35vw, 3rem); line-height: 1.1; }
.hero h1 em { font-style: italic; color: var(--zest); }
.hero .lead { max-width: 46ch; }
.hero .btn-row { margin-top: 30px; }
.hero .lead b { color: var(--paper); font-weight: 700; }

/* tiga janji operasional — dipisah titik tengah, bukan bullet, supaya terbaca
   sebagai satu tarikan napas dan tidak menambah tinggi hero */
.hero__promise { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 18px 0 0; padding: 0; }
.hero__promise li { position: relative; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero__promise li + li::before { content: "·"; position: absolute; left: -11px; color: var(--muted-2); }

.hero__shot { position: relative; margin: 0; aspect-ratio: 3/4; overflow: hidden; background: var(--ink-3); }
.hero__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__shot figcaption {
  position: absolute; inset: auto 0 0 0; padding: 34px 20px 16px;
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--paper);
  background: linear-gradient(180deg, transparent, rgba(26,14,10,.9));
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 34px; }
  /* Di layar sempit foto pindah ke atas: itu yang paling menggugah lebih dulu.
     1/1 dipilih, bukan 4/3 — potongan persegi masih memuat tampah secara utuh,
     sementara 4/3 sudah mulai memakan tepi daun pisang. */
  .hero__shot { order: -1; aspect-ratio: 1/1; }
}

/* deret fakta di dasar hero */
.hero__facts { display: grid; grid-template-columns: repeat(4,auto); gap: clamp(20px,4vw,64px); margin-top: clamp(34px,4vw,54px); }
@media (max-width: 720px) { .hero__facts { grid-template-columns: repeat(2,1fr); gap: 20px; } }
.fact__n { font-family: var(--serif); font-weight: 800; font-size: clamp(1.6rem,3vw,2.4rem); line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.fact__l { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); margin-top: 7px; }

/* ==========================================================================
   Logo klien

   Rev 2: logo adalah social proof, BUKAN elemen utama halaman. Marquee 30 logo
   dua baris yang berjalan otomatis menarik mata lebih kuat daripada headline
   di atasnya — persis kebalikan dari fungsinya. Diganti satu baris diam berisi
   9 nama terkuat; 30 logo lengkap turun ke #klien.

   Logo klien SELALU pakai chip putih. Semua file logo buram (0% transparansi),
   jadi trik silhouette (brightness(0) invert(1)) hanya menghasilkan kotak abu.
   ========================================================================== */
.logos { padding: clamp(38px,5vw,56px) 0; }
.logos__title { text-align: center; font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 26px; }
.logos__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; }
.logos__row img,
.logo-grid img {
  height: 44px; width: auto; object-fit: contain; flex: none;
  background: var(--paper); border-radius: var(--r); padding: 8px 14px;
  filter: grayscale(1); opacity: .58; transition: opacity .25s, filter .25s;
}
.logos__row img:hover,
.logo-grid img:hover { opacity: 1; filter: none; }
.logos__more { text-align: center; margin: 22px auto 0; max-width: 56ch; font-size: .84rem; color: var(--muted); }
.logos__more b { color: var(--paper); }

/* daftar lengkap di bagian bawah (#klien) */
.logo-grid {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  margin-top: clamp(30px,3.6vw,46px);
  padding-top: clamp(26px,3vw,38px);
  border-top: 1px solid var(--hair);
}
@media (max-width: 560px) { .logo-grid img, .logos__row img { height: 34px; padding: 6px 10px; } }

/* ==========================================================================
   Tile makanan — BESAR. Aturan Limón: jangan thumbnail kecil.
   ========================================================================== */
/* Jumlah kolom ditentukan oleh RESOLUSI SUMBER, bukan selera.

   Aturan empiris: sebuah tile terlihat tajam kalau skala render <= ~0.62 dari
   lebar aslinya.

   Sempat dipakai 4 kolom (318 px) karena crop katalog hanya ±552 px dan sudah
   lunak pada 1:1. Klien kemudian mengirim file foto studio aslinya — sumber
   terkecil sekarang 819 px, terbesar 2896 px. Dengan itu 3 kolom (426 px)
   kembali aman: skala terburuk 0.52, jauh di bawah ambang. Tile jadi 34%
   lebih besar tanpa satu pun jadi pecah.

   Kalau suatu saat ada hidangan bersumber < 700 px yang masuk ke grid ini,
   turunkan lagi ke 4 kolom — jangan biarkan satu foto lemah merusak barisnya. */
.plates { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
@media (max-width: 900px) { .plates { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .plates { grid-template-columns: 1fr; } }

/* margin:0 wajib — <figure> punya margin bawaan 1em 40px yang menyusutkan
   setiap tile 80px dan merusak grid */
.plate { position: relative; margin: 0; overflow: hidden; background: var(--ink-3); }
.plate img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform 1.1s var(--ease); }
.plate:hover img { transform: scale(1.06); }
.plate__cap {
  position: absolute; inset: auto 0 0 0; padding: 26px 24px 20px;
  background: linear-gradient(180deg, transparent, rgba(26,14,10,.92));
}
.plate__n { font-family: var(--serif); font-weight: 700; font-size: 1.14rem; letter-spacing: .012em; }
.plate__d { font-size: .78rem; color: var(--muted); margin-top: 3px; }

/* Tile unggulan: LEBAR, bukan besar.

   Versi sebelumnya memakai kotak 2x2 (853x853). Foto platter tumpeng
   berkomposisi 2:1, jadi kotak itu memotong kedua tepinya sekaligus memaksa
   sumber 880px dibesarkan — hasilnya pecah. Bingkai 2:1 memuat platter utuh
   dan sumbernya 1792px, hanya perlu diperkecil. Aturannya: samakan rasio
   bingkai dengan rasio aslinya, jangan lawan fotonya.

   Tumpeng juga satu-satunya sumber beresolusi tinggi di section ini, jadi ia
   satu-satunya yang boleh tampil besar. */
.plate--wide { grid-column: span 2; }
/* 2/1 membuat tinggi tile lebar persis sama dengan tinggi tile persegi di
   samping kanannya — barisnya rata tanpa perlu grid-row */
.plate--wide img { aspect-ratio: 2/1; }
.plate--wide .plate__n { font-size: clamp(1.15rem,1.9vw,1.5rem); }
/* di grid satu kolom, span 2 akan membuat kolom implisit dan merusak baris */
@media (max-width: 560px) { .plate--wide { grid-column: span 1; } }

/* ==========================================================================
   Dua brand
   ========================================================================== */
.brands { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; }
@media (max-width: 860px) { .brands { grid-template-columns: 1fr; } }
.brand-card { padding: clamp(28px,3.4vw,46px); background: var(--ink-3); border-top: 3px solid var(--hair); }
.brand-card--premium { background: var(--ink-4); border-top-color: var(--gold); }
/* Chip logo brand — SATU-SATUNYA lingkaran di seluruh situs.

   PENYIMPANGAN DISENGAJA dari aturan "radius hanya 2px". Alasannya dua, dan
   keduanya sudah diuji:

   1. Logonya wajib duduk di permukaan terang. File aslinya sudah dibuat
      transparan (latar putih dibuang), tapi mark Wuenak Poll berisi mangkuk
      panggangan HITAM — di atas --ink-3 ia lenyap dan logonya terbaca sebagai
      ayam melayang tanpa panggangan. Diuji langsung: hilang.
   2. Chip persegi membuatnya tampak seperti kotak putih tertempel. Lingkaran
      mengikuti bentuk logo 3S yang memang bundar, jadi terbaca sebagai lencana
      merek — bukan UI yang dilembutkan.

   Ini penanda merek, bukan komponen UI: jangan jadikan alasan memakai radius
   bulat di tempat lain. Aset-nya sendiri sudah dipadding agar sudut artwork
   tidak tertebas tepi lingkaran (lihat tools cutout). */
.brand-card__logo {
  display: block; width: 104px; height: 104px; object-fit: contain;
  background: var(--paper); border-radius: 50%;
  margin-bottom: 22px;
}
.brand-card__tag { display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r); margin-bottom: 22px; background: rgba(253,248,240,.10); color: var(--muted); }
.brand-card--premium .brand-card__tag { background: var(--gold); color: #2A1B08; }
.brand-card__name { font-family: var(--serif); font-weight: 800; font-size: clamp(1.5rem,2.6vw,2.1rem); letter-spacing: .012em; line-height: 1.1; margin-bottom: 8px; }
.brand-card__pos { font-size: .82rem; letter-spacing: .04em; color: var(--zest); margin-bottom: 18px; }
.brand-card--premium .brand-card__pos { color: var(--gold); }
.brand-card__desc { font-size: .94rem; color: var(--muted); margin-bottom: 20px; }
.brand-card__list { list-style: none; margin: 0 0 24px; padding: 0; }
.brand-card__list li { font-size: .87rem; color: var(--muted); padding: 8px 0 8px 16px; border-top: 1px solid var(--hair); position: relative; }
.brand-card__list li::before { content: "·"; position: absolute; left: 2px; color: var(--muted-2); }
.brand-card__price { font-size: .84rem; color: var(--muted-2); }
.brand-card__price b { color: var(--paper); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Paket

   Kartu paket sengaja TIDAK membawa nama brand dapur maupun daftar jenis
   layanan. Keduanya pernah ada dan dihapus atas permintaan klien: customer
   cukup memutuskan lewat budget, jenis acara, dan jumlah pax — W3S yang
   menentukan pesanannya masuk Wuenak Poll atau 3S. Menambahkan sumbu kategori
   lain di sini hanya memindahkan keputusan itu ke pundak customer.
   ========================================================================== */
.pkgs { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
@media (max-width: 1040px) { .pkgs { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .pkgs { grid-template-columns: 1fr; } }
.pkg { display: flex; flex-direction: column; padding: clamp(24px,2.4vw,32px); background: var(--ink-3); border-top: 3px solid var(--hair); transition: background .25s var(--ease); }
.pkg:hover { background: var(--ink-4); }
/* Garis emas menandai dua tier atas sebagai kelas premium. Ini penanda TINGKAT,
   bukan penanda brand — nama 3S sendiri tidak muncul di kartu. */
.pkg--3s { border-top-color: var(--gold); }
.pkg__name { font-family: var(--serif); font-weight: 700; font-size: 1.24rem; letter-spacing: .012em; line-height: 1.2; margin-bottom: 14px; }
.pkg__from { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); }
.pkg__price { font-family: var(--serif); font-weight: 800; font-size: clamp(1.8rem,3vw,2.5rem); line-height: 1.1; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.pkg__price span { font-family: var(--sans); font-size: .74rem; font-weight: 500; color: var(--muted-2); letter-spacing: .06em; }
.pkg__desc { font-size: .86rem; color: var(--muted); margin: 16px 0 26px; flex: 1; }

/* ==========================================================================
   Bukti — foto operasional (kapasitas & proses)
   ========================================================================== */
.proof { display: grid; grid-template-columns: repeat(12,1fr); gap: 2px; }
.proof figure { position: relative; margin: 0; overflow: hidden; background: var(--ink-3); }
.proof img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.proof figure:hover img { transform: scale(1.05); }
.proof figcaption { position: absolute; inset: auto 0 0 0; padding: 22px 20px 16px; background: linear-gradient(180deg,transparent,rgba(26,14,10,.9)); font-size: .8rem; color: var(--muted); }
.proof figcaption b { display: block; color: var(--paper); font-family: var(--serif); font-size: 1.05rem; font-weight: 700; letter-spacing: .012em; margin-bottom: 2px; }
.proof__a { grid-column: span 7; aspect-ratio: 16/10; }
.proof__b { grid-column: span 5; aspect-ratio: 4/3.35; }
.proof__c { grid-column: span 4; aspect-ratio: 4/3; }
.proof__d { grid-column: span 4; aspect-ratio: 4/3; }
.proof__e { grid-column: span 4; aspect-ratio: 4/3; }
@media (max-width: 860px) {
  .proof { grid-template-columns: repeat(2,1fr); }
  .proof__a, .proof__b { grid-column: span 2; aspect-ratio: 16/10; }
  .proof__c, .proof__d, .proof__e { grid-column: span 1; }
}

/* ==========================================================================
   Masalah
   ========================================================================== */
.grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(18px,2vw,30px); }
@media (max-width: 1000px) { .grid4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .grid4 { grid-template-columns: 1fr; } }
.pain { border-top: 2px solid var(--ember); padding-top: 16px; }
.pain__n { display: block; font-size: .66rem; letter-spacing: .22em; color: var(--ember); margin-bottom: 10px; }
.pain h3 { margin-bottom: 7px; }
.pain p { font-size: .9rem; color: var(--muted); }
.on-cream .pain p { color: var(--on-cream-mut); }

/* ==========================================================================
   Sertifikat & langkah
   ========================================================================== */
.certs { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
@media (max-width: 800px) { .certs { grid-template-columns: 1fr; } }
.cert { padding: 26px clamp(20px,2.4vw,30px); background: var(--ink-3); border-top: 3px solid var(--zest); }
.cert__name { font-weight: 700; font-size: .95rem; margin-bottom: 9px; }
.cert__no { font-family: ui-monospace,'Cascadia Mono',Consolas,monospace; font-size: .76rem; color: var(--muted-2); word-break: break-all; }

/* CTA sales mechanism utama — dipasang persis setelah lima field-nya, di
   section krem, jadi ia jadi tombol paling kontras di seluruh halaman */
.usp-cta { margin-top: clamp(30px,3.6vw,44px); text-align: center; }
.usp-cta .fine { margin-top: 12px; color: var(--on-cream-mut); }
.btn--lg { font-size: .84rem; padding: 19px 38px; }

.steps { display: grid; grid-template-columns: repeat(5,1fr); gap: clamp(14px,1.6vw,24px); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 1px solid var(--hair-cream); padding-top: 14px; }
.step__n { font-family: var(--serif); font-weight: 800; font-size: 1.5rem; color: var(--on-cream-mut); margin-bottom: 8px; }
.step p { font-size: .82rem; color: var(--on-cream-mut); margin: 3px 0 0; }

/* ==========================================================================
   Klien
   ========================================================================== */
.clients { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(26px,3.4vw,52px); }
@media (max-width: 800px) { .clients { grid-template-columns: 1fr; } }
.client-cat h3 { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-2); padding-bottom: 11px; border-bottom: 1px solid var(--hair); margin-bottom: 14px; }
.client-cat ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 22px; }
@media (max-width: 480px) { .client-cat ul { columns: 1; } }
.client-cat li { font-size: .9rem; color: var(--muted); padding: 5px 0; break-inside: avoid; }

/* ==========================================================================
   Penawaran
   ========================================================================== */
.offer { background: var(--ember); color: var(--paper); padding: clamp(28px,4vw,48px); display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.offer__tag { font-size: .64rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; opacity: .82; }
.offer h3 { font-family: var(--serif); font-weight: 800; font-size: clamp(1.4rem,2.8vw,2.1rem); letter-spacing: .012em; margin: 8px 0 5px; }
.offer .btn--ghost { border-color: rgba(253,248,240,.6); }
.offer .btn--ghost:hover { background: var(--paper); color: var(--ember); border-color: var(--paper); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 900px; border-top: 1px solid var(--hair-cream); }
.faq details { border-bottom: 1px solid var(--hair-cream); }
.faq summary { cursor: pointer; padding: 22px 0; list-style: none; display: flex; justify-content: space-between; gap: 22px; align-items: center; font-family: var(--serif); font-weight: 700; font-size: clamp(1.02rem,1.7vw,1.35rem); letter-spacing: .012em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #6E9E2E; }
.faq .sign { flex: none; width: 13px; height: 13px; position: relative; }
.faq .sign::before, .faq .sign::after { content: ""; position: absolute; background: currentColor; transition: transform .3s var(--ease); }
.faq .sign::before { inset: 6px 0 auto; height: 1px; }
.faq .sign::after { inset: 0 6px auto; width: 1px; height: 13px; }
.faq details[open] .sign::after { transform: scaleY(0); }
.faq details p { padding: 0 0 22px; margin: 0; color: var(--on-cream-mut); max-width: 66ch; font-size: .95rem; }
/* <details> tidak bisa ditransisi tingginya secara lintas-browser. Jadi yang
   dianimasikan isinya, bukan wadahnya — jawabannya masuk dengan lembut alih-alih
   muncul mendadak. Efeknya terbaca "smooth" tanpa hack max-height. */
.faq details[open] p { animation: faqMasuk .38s var(--ease) both; }
@keyframes faqMasuk {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
/* target sentuh: seluruh baris summary, bukan hanya teksnya */
.faq summary { -webkit-tap-highlight-color: transparent; }

/* ==========================================================================
   Testimoni

   Kutipan pakai serif (Petrona), bukan sans. Di sistem ini serif dipakai untuk
   suara manusia — judul dan nama hidangan — sementara sans untuk label mesin.
   Kutipan pelanggan jelas masuk kelompok pertama.

   Ejaan aslinya dipertahankan ("uenak pool", "mantul"): itu logat Suroboyoan,
   dan begitu diformalkan jadi "sangat enak", kutipannya langsung terbaca
   seperti karangan tim marketing. Kredibilitasnya justru ada di ejaannya.
   ========================================================================== */
.quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
@media (max-width: 900px) { .quotes { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  margin: 0; padding: clamp(24px,2.4vw,32px);
  background: var(--cream-2); display: flex; flex-direction: column;
  border-top: 2px solid transparent; transition: border-color .25s var(--ease);
}
.quote:hover { border-top-color: var(--zest); }
.quote blockquote {
  margin: 0 0 22px; flex: 1;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1rem,1.35vw,1.12rem); line-height: 1.52;
  letter-spacing: .012em; color: var(--on-cream);
}
.quote figcaption { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-cream-mut); }
.quote figcaption b { display: block; font-size: .76rem; letter-spacing: .12em; color: var(--on-cream); margin-bottom: 5px; }

/* ==========================================================================
   Formulir
   ========================================================================== */
.form-wrap { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(34px,5vw,80px); align-items: start; }
@media (max-width: 940px) { .form-wrap { grid-template-columns: 1fr; gap: 36px; } }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 7px; }
.field .req { color: var(--ember); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  background: rgba(253,248,240,.05);
  border: 1px solid var(--hair); border-radius: var(--r);
  color: var(--paper); font-family: var(--sans); font-size: .97rem;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
/* 16px BUKAN pilihan gaya: di bawah itu, Safari iOS otomatis men-zoom halaman
   setiap kali sebuah field disentuh, lalu tidak mengembalikannya. Formulir jadi
   terasa "meloncat" di tiap isian. .97rem = 15.5px, tepat di bawah ambang. */
@media (max-width: 760px) {
  .field input, .field select, .field textarea { font-size: 16px; padding: 14px 14px; }
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--zest); background: rgba(253,248,240,.08);
  box-shadow: 0 0 0 3px rgba(141,198,63,.16);
}
.field select option { background: var(--ink-3); color: var(--paper); }
.field textarea { resize: vertical; min-height: 78px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .5; cursor: pointer; }

.contact-list { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.contact-list li { padding: 15px 0; border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: 118px 1fr; gap: 14px; align-items: baseline; }
@media (max-width: 480px) { .contact-list li { grid-template-columns: 1fr; gap: 3px; } }
.contact-list .lbl { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); }
.contact-list .val { font-size: .95rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink-2); padding: clamp(52px,6vw,80px) 0 30px; border-top: 1px solid var(--hair); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(26px,4vw,52px); margin-bottom: 44px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }
.site-footer p { color: var(--muted); font-size: .9rem; max-width: 40ch; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; font-size: .9rem; color: var(--muted); }
.site-footer li a:hover { color: var(--zest); }
/* Tautan footer dan daftar kontak adalah target sentuh sungguhan — nomor
   WhatsApp, email, Instagram. Sebagai teks sebaris tingginya cuma 18-20px,
   jauh di bawah ambang nyaman ibu jari. Di layar sentuh diberi tinggi minimum;
   di desktop dibiarkan rapat supaya daftarnya tidak jadi renggang. */
@media (max-width: 760px) {
  .site-footer li a,
  .contact-list .val a,
  .footer-bottom a,
  /* tautan yang berdiri SENDIRI di dalam paragrafnya bukan tautan dalam
     kalimat — itu kontrol navigasi ("Lihat 190 menu lengkap"), dan di #sajian
     ia satu-satunya jalan menuju katalog */
  p.fine > a.link:only-child { display: inline-flex; align-items: center; min-height: 40px; }
  .site-footer li { margin-bottom: 2px; }
}
.footer-brands { list-style: none; margin: 0; padding: 0; }
.footer-brands li { padding: 10px 0; border-top: 1px solid var(--hair); }
.footer-brands b { display: block; color: var(--paper); font-size: .9rem; }
.footer-brands span { font-size: .78rem; color: var(--muted-2); }
.footer-bottom { border-top: 1px solid var(--hair); padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .76rem; color: var(--muted-2); }

/* ==========================================================================
   Sticky CTA (mobile)
   ========================================================================== */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: rgba(26,14,10,.96); backdrop-filter: blur(14px); border-top: 1px solid var(--hair); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: none; gap: 9px; }
/* min-height 46px: di bawah ~44px tombol mulai sering meleset saat ditekan
   dengan ibu jari, dan bar ini adalah CTA terakhir sebelum orang menyerah */
.sticky-cta .btn { flex: 1; padding: 13px 10px; font-size: .72rem; min-height: 46px; }
/* Padding bawah HARUS memakai env() yang sama dengan bar-nya. Dengan angka mati
   (80px) bar setinggi 85px menutupi 5px baris terakhir footer — dan di iPhone
   ber-home-indicator selisihnya bertambah lagi. */
@media (max-width: 760px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Gerak
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d,0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Di layar kecil semuanya jadi satu kolom, jadi jumlah elemen yang di-reveal
   per layar jauh lebih banyak. Durasi dan jarak desktop membuat scroll terasa
   berat — di sini dipendekkan supaya gerakannya menyusul jempol, bukan
   tertinggal di belakangnya. */
@media (max-width: 760px) {
  .js [data-reveal] { transform: translateY(12px); transition-duration: .55s; }
  .js .reveal-line > span { transition-duration: .7s; }

  /* Label mikro sistem ini bertracking lebar dan huruf besar semua — di bawah
     ~10.5px kombinasi itu mulai sulit dibaca di layar genggam. Naikkan sedikit
     hanya di sini; ukuran desktopnya sengaja tetap kecil. */
  .brand__sub, .brand-card__tag, .pkg__from,
  .offer__tag, .contact-list .lbl, .field label { font-size: .68rem; }
}
.reveal-line { display: block; overflow: hidden; }
.js .reveal-line > span { display: block; transform: translateY(105%); transition: transform 1.05s var(--ease); transition-delay: var(--d,0ms); }
.js .reveal-line.is-in > span { transform: none; }

/* parallax hero (motion.js) */
.hero__shot img { will-change: transform; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.center { text-align: center; }

/* ==========================================================================
   Halaman katalog menu
   ========================================================================== */
.page-hero { padding: clamp(48px,6vw,88px) 0 clamp(26px,3vw,40px); }
.menu-toolbar { position: sticky; top: 76px; z-index: 50; background: rgba(26,14,10,.95); backdrop-filter: blur(14px); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 13px 0; }
.menu-toolbar .wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.menu-search { flex: 1; min-width: 190px; }
.menu-search input { width: 100%; padding: 10px 13px; background: rgba(253,248,240,.05); border: 1px solid var(--hair); border-radius: var(--r); color: var(--paper); font-family: var(--sans); font-size: .93rem; }
.menu-search input:focus { outline: none; border-color: var(--zest); }
.menu-search input::placeholder { color: var(--muted-2); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter { padding: 8px 14px; border-radius: var(--r); cursor: pointer; font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: transparent; border: 1px solid var(--hair); color: var(--muted); -webkit-tap-highlight-color: transparent; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease); }
.filter:hover { border-color: var(--paper); color: var(--paper); }
.filter:active { transform: scale(.96); }
.filter[aria-pressed="true"] { background: var(--zest); border-color: var(--zest); color: var(--zest-dp); }

/* Di halaman katalog, filter dan kolom cari ADALAH interaksi utamanya —
   sembilan tombol 31px berjajar rapat praktis mustahil ditekan tepat dengan
   ibu jari. Kolom cari juga naik ke 16px demi alasan yang sama dengan formulir:
   di bawah itu Safari iOS men-zoom halaman setiap kali kolomnya disentuh. */
@media (max-width: 760px) {
  .filters { gap: 8px; }
  .filter { min-height: 42px; padding: 10px 16px; font-size: .72rem; }
  .menu-search input { font-size: 16px; padding: 13px 14px; }
}

.menu-group { margin-bottom: clamp(40px,5vw,68px); }
.menu-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--hair); margin-bottom: 9px; }
.menu-group__head h2 { font-size: clamp(1.35rem,2.6vw,2rem); }
.menu-group__price { font-size: .82rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.menu-group__price b { color: var(--zest); }
.menu-group__desc { color: var(--muted-2); font-size: .86rem; margin-bottom: 20px; max-width: 60ch; }

.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li.is-hidden { display: none; }
.menu-group.is-hidden { display: none; }
.menu-list--photo { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
@media (max-width: 1040px) { .menu-list--photo { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 720px) { .menu-list--photo { grid-template-columns: repeat(2,1fr); } }
.menu-list--photo li { position: relative; background: var(--ink-3); overflow: hidden; }
.menu-list--photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .9s var(--ease); }
.menu-list--photo li:hover img { transform: scale(1.05); }
.mi__n { position: absolute; inset: auto 0 0 0; padding: 34px 14px 8px; background: linear-gradient(180deg,transparent,rgba(26,14,10,.92)); font-size: .82rem; line-height: 1.3; }
.mi__p { position: absolute; top: 8px; right: 8px; background: var(--ink); color: var(--paper); font-size: .7rem; font-weight: 700; padding: 4px 8px; border-radius: var(--r); font-variant-numeric: tabular-nums; }

.menu-sub { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); margin: clamp(26px,3vw,38px) 0 12px; }
.menu-list--text { display: grid; grid-template-columns: repeat(4,1fr); gap: 0 26px; }
@media (max-width: 1000px) { .menu-list--text { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 720px) { .menu-list--text { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 440px) { .menu-list--text { grid-template-columns: 1fr; } }
.menu-list--text li { font-size: .9rem; color: var(--muted); padding: 9px 0; border-bottom: 1px solid var(--hair); }
.menu-list--text li:hover { color: var(--paper); }

.no-result { display: none; text-align: center; color: var(--muted-2); padding: 52px 0; }
.no-result.is-shown { display: block; }

/* ==========================================================================
   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; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .reveal-line > span { transform: none; }
}