/* ================================================================
   AnabhiDev-BPC — Nature Private Chef — Website
   HTML5 · Vanilla CSS · Vanilla JavaScript
   Development · Anabhi Dev
   Version   : 1.16
   Generated : 2 September 2026, 13:18:40
   ----------------------------------------------------------------
   Komponen: skip link, header + drawer, hero, kartu, galeri +
   lightbox, nilai, kuliner, form, footer, tombol WhatsApp.
   Butuh tokens.css dan base.css di-load lebih dulu.
   ================================================================ */

/* ---- Utilitas kecil ------------------------------------------- */
.mt-lg     { margin-top: var(--sp-lg); }
.mt-xl     { margin-top: var(--sp-xl); }
.ta-center { text-align: center; }
.note {
  font-size: var(--fs-small);
  color: var(--c-warm-gray);
  font-style: italic;
}
.req { color: var(--c-gold); }
.opt { color: var(--c-warm-gray); font-weight: var(--fw-normal); }

/* Honeypot — disembunyikan dari mata dan dari screen reader, tapi
   tetap ada di DOM supaya bot mengisinya. Bukan display:none,
   karena sebagian bot melewati field yang display:none. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}


/* ================================================================
   SKIP LINK
   ================================================================ */
.skip-link {
  position: absolute;
  top: -100px; left: var(--sp-md);
  z-index: 999;
  padding: var(--sp-sm) var(--sp-lg);
  background: var(--c-gold);
  color: var(--c-dark-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: 0; }


/* ================================================================
   HEADER
   Transparan di atas hero, jadi solid setelah scroll (kelas
   .is-stuck dipasang JS).
   ================================================================ */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: transparent;
  transition: background-color var(--t-base) var(--ease-out),
              box-shadow      var(--t-base) var(--ease-out);
}
.hdr::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--c-line-dark);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.hdr.is-stuck {
  background: rgba(11, 11, 10, 0.92);
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.9);
}
.hdr.is-stuck::after { opacity: 1; }

/* backdrop-filter dipisah: kalau browser tidak mendukung, header
   tetap solid dan terbaca — bukan setengah transparan. */
@supports (backdrop-filter: blur(10px)) {
  .hdr.is-stuck {
    background: rgba(11, 11, 10, 0.72);
    backdrop-filter: blur(12px);
  }
}

.hdr__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  height: var(--header-h);
  transition: height var(--t-base) var(--ease-out);
}
.hdr.is-stuck .hdr__inner { height: var(--header-h-scroll); }

/* -- Brand -- */
.hdr__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  min-width: 0;          /* judul panjang tidak mendorong hamburger keluar */
  flex-shrink: 1;
}
.hdr__mark { width: 38px; height: 30px; object-fit: contain; flex-shrink: 0; }
.ftr__mark  { width: 46px; height: 55px; object-fit: contain; flex-shrink: 0; }
.hdr__name {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hdr__name-top {
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.hdr__name-main {
  font-family: var(--font-display);
  font-size: 1.16rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-white);
}
.hdr__name-sub {
  font-size: 0.52rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-warm-gray);
}

/* -- Navigasi desktop -- */
.hdr__nav { display: flex; align-items: center; gap: var(--sp-xl); }
.hdr__list { display: flex; align-items: center; gap: var(--sp-lg); }
/* Tipografi nav — SATU sumber untuk link maupun tombol dropdown.
   Sebelumnya .hdr__sub-toggle memakai font:inherit, yang mewarisi dari
   <li> (font body, tanpa uppercase) dan BUKAN dari .hdr__list a di
   sebelahnya — sibling tidak saling mewarisi. Akibatnya tombol "Menu"
   tampil beda sendiri dari item nav lain, di desktop maupun mobile. */
.hdr__list a,
.hdr__list .hdr__sub-toggle {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-white);
  transition: color var(--t-fast) var(--ease-out);
}
.hdr__list a {
  position: relative;
  display: block;
  padding: var(--sp-xs) 0;
}
.hdr__list a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.hdr__list a:hover,
.hdr__list a.is-active { color: var(--c-gold-light); }
.hdr__list a:hover::after,
.hdr__list a.is-active::after { transform: scaleX(1); }

/* -- Header actions & Language Toggle (EN / ID) -- */
.hdr__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.hdr__cta {
  width: 250px; /* Fixed width to prevent shift when EN/ID changes */
}
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--c-line-dark);
}
.lang-toggle__btn {
  background: none;
  border: none;
  padding: 3px 6px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-warm-gray);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.lang-toggle__btn:hover {
  color: var(--c-white);
}
.lang-toggle__btn.is-active {
  color: var(--c-gold-light);
  font-weight: var(--fw-bold);
  background: rgba(200, 169, 126, 0.15);
}
.lang-toggle__divider {
  font-size: 0.68rem;
  color: var(--c-warm-gray);
  opacity: 0.4;
}

/* -- Hamburger: minimal 44x44 -- */
.hdr__burger {
  display: none;
  width: 44px; height: 44px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hdr__burger-bar {
  width: 22px; height: 1.5px;
  background: var(--c-white);
  transition: transform var(--t-fast) var(--ease-out),
              opacity   var(--t-fast) var(--ease-out);
}
.hdr__burger[aria-expanded="true"] .hdr__burger-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hdr__burger[aria-expanded="true"] .hdr__burger-bar:nth-child(2) { opacity: 0; }
.hdr__burger[aria-expanded="true"] .hdr__burger-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* -- Drawer mobile: masuk dari kanan, sisi yang sama dengan
      hamburger, supaya tidak pernah menutupi logo di kiri. -- */
@media (max-width: 980px) {
  .hdr__burger { display: flex; }

  .hdr__nav {
    position: fixed;
    top: 0; right: 0;
    width: min(86vw, 340px);
    height: 100vh;
    height: 100dvh;      /* 100vh di iOS ikut menghitung address bar */
    z-index: var(--z-drawer);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--sp-md);
    padding: calc(var(--header-h) + var(--sp-lg)) var(--sp-xl) var(--sp-xl);
    background: var(--c-charcoal);
    border-left: 1px solid var(--c-line-dark);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform   var(--t-base) var(--ease-out),
                visibility  var(--t-base) var(--ease-out);
  }
  .hdr__nav.is-open { transform: translateX(0); visibility: visible; }

  .hdr__list { flex-direction: column; align-items: stretch; gap: 0; }
  /* Tombol dropdown ikut ukuran yang sama dengan link nav lain.
     Tanpa baris .hdr__sub-toggle di sini, "Menu" tetap 0.78rem
     sementara item lain naik ke 0.92rem — itulah kenapa di mobile
     tulisan "Menu" terlihat lebih kecil dan beda sendiri. */
  .hdr__list a,
  .hdr__list .hdr__sub-toggle {
    padding: var(--sp-md) 0;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--c-line-dark);
  }
  .hdr__list a::after { display: none; }
  .hdr__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-md);
    margin-top: var(--sp-lg);
  }
  .lang-toggle {
    align-self: center;
    padding: 6px 14px;
  }
  /* Tap target minimal 44x44 (SOP kategori 8/14). Sebelumnya
     tinggi tombol EN/ID cuma 31px — di bawah ambang dan sulit
     dipencet dengan ibu jari. */
  .lang-toggle__btn {
    font-size: 0.84rem;
    padding: 4px 10px;
    min-height: 44px;
    min-width: 44px;
  }
  .hdr__cta { margin-top: 0; text-align: center; width: auto; }
}

.scrim {
  position: fixed; inset: 0;
  z-index: var(--z-scrim);
  background: rgba(11, 11, 10, 0.72);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.scrim.is-on { opacity: 1; }


/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: calc(var(--header-h) + var(--sp-2xl)) var(--sp-3xl);
  overflow: hidden;
  isolation: isolate;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;   /* jaga sisi kanan yang berlampu tetap terlihat */
  z-index: -2;
  animation: heroZoom 14s ease-out forwards;
}
@keyframes heroZoom {
  0% { transform: scale(1.08); }
  100% { transform: scale(1.0); }
}
.hero__scrim {
  position: absolute; inset: 0;
  background: var(--scrim-hero);
  z-index: -1;
}
.hero__inner { width: 100%; }

.hero__title {
  /* 15ch lama memaksa judul membungkus. Dilepas supaya bisa satu baris;
     lebarnya sudah dibatasi .container (1280px). */
  max-width: none;
  font-size: var(--fs-hero);
  margin-bottom: var(--sp-lg);
  font-weight: var(--fw-light);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.hero__lead {
  max-width: 46ch;
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  color: var(--c-warm-gray);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.hero__micro {
  margin-top: var(--sp-xl);
  max-width: none;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
  max-width: none;
}

/* Layar pendek/landscape ponsel: jangan paksa tinggi penuh. */
@media (max-height: 620px) {
  .hero { min-height: auto; padding-block: calc(var(--header-h) + var(--sp-2xl)) var(--sp-2xl); }
}


/* ================================================================
   FIGURE
   ================================================================ */
.figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-light);
}
.figure--dark { box-shadow: var(--shadow-card); }
.figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.figure:hover img { transform: scale(1.035); }


/* ================================================================
   KARTU LAYANAN
   ================================================================ */
.cards { margin-top: var(--sp-xl); }

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid rgba(26, 24, 21, 0.08);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-light);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }

.card__media { overflow: hidden; }
.card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.05); }

.card__body {
  padding: var(--sp-lg);
  border-top: 1px solid var(--c-gold);   /* aksen tipis, bukan blok emas */
}
.card__title {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-dark-text);
}
.card__text {
  margin-top: var(--sp-sm);
  font-size: var(--fs-small);
  color: var(--c-dark-text-2);
  max-width: none;
}


/* ================================================================
   PILAR (chef story)
   ================================================================ */
.pillars { margin-top: var(--sp-xl); display: grid; gap: var(--sp-lg); }
.pillar { padding-left: var(--sp-lg); border-left: 1px solid var(--c-gold-muted); }
.pillar__title {
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.pillar__text {
  margin-top: var(--sp-2xs);
  font-size: var(--fs-small);
  color: var(--c-warm-gray);
  max-width: none;
}


/* ================================================================
   GALERI + LIGHTBOX
   ================================================================ */
/* Mosaik galeri.
   Penempatan EKSPLISIT lewat nth-child, bukan masonry otomatis:
   grid-auto-flow: dense dan kolom CSS gampang menyisakan lubang di
   ujung. Dengan 8 item di kisi 4x4, seluruh 16 sel terisi persis —
   blok galeri selalu jadi persegi panjang utuh, tanpa bolong.

     +-----------+-----+-----+
     |           |  2  |  3  |
     |     1     +-----+-----+
     |   (2x2)   |           |
     +-----+-----+     4     |
     |  5  |  6  |   (2x2)   |
     +-----+-----+-----+-----+
     |     7     |     8     |
     +-----------+-----------+  */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(104px, 12.4vw, 186px);
  gap: var(--sp-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery__item:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.gallery__item:nth-child(2) { grid-column: 3;          grid-row: 1; }
.gallery__item:nth-child(3) { grid-column: 4;          grid-row: 1; }
.gallery__item:nth-child(4) { grid-column: 3 / span 2; grid-row: 2 / span 2; }
.gallery__item:nth-child(5) { grid-column: 1;          grid-row: 3; }
.gallery__item:nth-child(6) { grid-column: 2;          grid-row: 3; }
.gallery__item:nth-child(7) { grid-column: 1 / span 2; grid-row: 4; }
.gallery__item:nth-child(8) { grid-column: 3 / span 2; grid-row: 4; }

/* Di layar sempit mosaik dilepas: 2 kolom, semua sel 1x1. Delapan item
   = empat baris penuh, jadi tetap tanpa lubang. */
@media (max-width: 860px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(132px, 30vw, 210px);
  }
  .gallery__item:nth-child(n) { grid-column: auto; grid-row: auto; }
}

.gallery__item { min-width: 0; }
.gallery__item > * { min-width: 0; }

.gallery__btn {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--c-charcoal);
height: 100%;
}
.gallery__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out),
              opacity   var(--t-base) var(--ease-out);
}
.gallery__btn:hover img { transform: scale(1.06); opacity: 0.86; }

.lightbox {
  position: fixed; inset: 0;
  z-index: var(--z-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg);
  background: rgba(11, 11, 10, 0.95);
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: min(100%, 1200px);
  max-height: 82vh;
  max-height: 82dvh;
  width: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.lightbox__cap {
  margin-top: var(--sp-md);
  font-size: var(--fs-small);
  color: var(--c-warm-gray);
  text-align: center;
}
.lightbox__close {
  position: absolute;
  top: var(--sp-lg); right: var(--sp-lg);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line-dark);
  border-radius: var(--r-sm);
  color: var(--c-white);
  font-size: 1.5rem;
  line-height: 1;
}
.lightbox__close:hover { border-color: var(--c-gold); color: var(--c-gold); }
.lightbox__fig { margin: 0; display: flex; flex-direction: column; align-items: center; }


/* ================================================================
   NILAI (why choose us)
   ================================================================ */
.values { margin-top: var(--sp-xl); }
.value { padding-top: var(--sp-lg); border-top: 1px solid var(--c-line-dark); }
.value__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--c-gold);
  margin-bottom: var(--sp-sm);
}
.value__title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-white);
}
.value__text {
  margin-top: var(--sp-xs);
  font-size: var(--fs-small);
  color: var(--c-warm-gray);
  max-width: none;
}


/* ================================================================
   KARTU KULINER
   ================================================================ */
.cuisines { margin-top: var(--sp-xl); }
.cuisine {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--c-warm-black);
}
.cuisine img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.cuisine:hover img { transform: scale(1.06); }
.cuisine::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--scrim-card);
  pointer-events: none;
}
.cuisine__label {
  position: absolute;
  left: var(--sp-md); right: var(--sp-md); bottom: var(--sp-md);
  z-index: 1;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-white);
}


/* ================================================================
   DAFTAR KONTAK
   ================================================================ */
.contact-list { margin-top: var(--sp-xl); display: grid; gap: var(--sp-md); }
.contact-list__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-md);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--c-line-dark);
}
.contact-list__label {
  min-width: 110px;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold);
}
.contact-list__value { color: var(--c-white); }
a.contact-list__value:hover { color: var(--c-gold-light); }


/* ================================================================
   FORM
   ================================================================ */
.form {
  padding: clamp(var(--sp-lg), 3vw, var(--sp-xl));
  background: var(--c-warm-black);
  border: 1px solid var(--c-line-dark);
  border-radius: var(--r-md);
}
.form__row { display: grid; gap: var(--sp-md); grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { margin-bottom: var(--sp-md); }
.field__label {
  display: block;
  margin-bottom: var(--sp-xs);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-warm-gray);
}
.field__input {
  width: 100%;
  min-height: var(--btn-h-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: rgba(11, 11, 10, 0.6);
  border: 1px solid var(--c-line-dark);
  border-radius: var(--r-sm);
  color: var(--c-white);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow   var(--t-fast) var(--ease-out);
}
.field__input:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(201, 163, 90, 0.18);
}
.field__input--area { min-height: 120px; resize: vertical; }
.field__input::placeholder { color: rgba(185, 179, 170, 0.6); }

/* Ikon date picker default berwarna gelap di atas field gelap. */
.field__input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.55);
  cursor: pointer;
}

.field__input.is-invalid { border-color: #E08A7A; }
.field__err {
  margin-top: var(--sp-2xs);
  font-size: 0.78rem;
  color: #E8A296;   /* 7.4:1 di atas obsidian */
  max-width: none;
}

.form__note {
  margin-top: var(--sp-md);
  font-size: 0.78rem;
  color: var(--c-warm-gray);
  text-align: center;
  max-width: none;
}
.form__status {
  margin-top: var(--sp-sm);
  font-size: var(--fs-small);
  text-align: center;
  max-width: none;
}
.form__status.is-err { color: #E8A296; }
.form__status.is-ok  { color: var(--c-gold-light); }


/* ================================================================
   FOOTER
   Surface sedikit berbeda dari section gelap di atasnya supaya
   batasnya tetap terbaca (SOP kategori 1, struktur multi-band).
   ================================================================ */
/* Footer — tekstur beton grunge (foto klien, keputusan user 30-08-2026).

   Foto: Unsplash `photo-1578662996442-48f60103fc96` (Peter Gargiulo,
   "Grunge Concrete"). Tekstur abstrak, tidak mengklaim lokasi — sah di
   bawah kategori B manifest foto meski metadata lokasinya Bloomfield, NJ.

   Kecerahan foto DIUKUR, bukan dikira (skala 0–255): rata-rata 17,6 ·
   p95 34 · p99 40 · maksimum 61. Tanpa scrim pun emas #C9A35A sudah
   4,59:1 di titik paling terang — lolos AA. Scrim 25% dipasang karena
   titik paling terang justru di tengah, persis tempat teks footer duduk;
   dengan scrim emas naik ke 5,53:1, margin yang nyaman tanpa mematikan
   teksturnya.

   Lebar w=1200 (80 KB), bukan 1600 (169 KB): teksturnya tidak punya
   detail tajam, jadi diregangkan `cover` ke layar 2560px pun tidak
   terlihat lunak. Naikkan ke w=1600 hanya kalau memang terlihat lembek.

   Motif ubin semen CSS yang sebelumnya ada di `.ftr::before` DIHAPUS —
   foto ini sudah menjadi teksturnya, menumpuk pola geometris di atas
   beton asli akan terbaca seperti kesalahan. Versi bermotif tersimpan di
   `arsip/components_v1.5.css` kalau suatu saat mau dipakai lagi.

   Tidak memakai background-attachment: fixed (dilarang SOP, rusak iOS). */
.ftr {
  position: relative;
  padding-block: var(--sp-3xl) var(--sp-xl);
  /* Warna dasar: kalau foto gagal termuat, footer tetap gelap dan
     teksnya tetap terbaca. */
  background-color: var(--c-charcoal);
  background-image:
    linear-gradient(rgba(11, 11, 10, 0.25), rgba(11, 11, 10, 0.25)),
    radial-gradient(88% 120% at 12% -15%, rgba(201, 163, 90, 0.085), transparent 58%),
    radial-gradient(70%  95% at 88% 115%, rgba(201, 163, 90, 0.050), transparent 62%),
    url("https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=1200&q=75");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* Garis batas atas. Border 1px rata sebelumnya nyaris tak terlihat karena
   band di atasnya sama-sama nyaris hitam — inilah yang membuat footer
   terasa menempel pada section di atasnya. Gradien yang menyala di tengah
   dan meredup ke tepi memberi batas yang terbaca tanpa terasa kaku. */
.ftr::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 163, 90, 0.10) 18%,
    rgba(201, 163, 90, 0.55) 50%,
    rgba(201, 163, 90, 0.10) 82%,
    transparent 100%);
}
.ftr__grid {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.ftr__grid > * { min-width: 0; }
@media (max-width: 860px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; } }

.ftr__col   { min-width: 0; }
.ftr__brand { display: flex; align-items: center; gap: var(--sp-sm); }
.ftr__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-white);
}
.ftr__tag {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.ftr__blurb {
  margin-top: var(--sp-md);
  font-size: var(--fs-small);
  color: var(--c-warm-gray);
}

.ftr__head {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-md);
}
.ftr__list { display: grid; gap: var(--sp-sm); }
.ftr__list a, .ftr__list span {
  font-size: var(--fs-small);
  color: var(--c-warm-gray);
  transition: color var(--t-fast) var(--ease-out);
}
.ftr__list a:hover { color: var(--c-gold-light); }

.ftr__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--c-line-dark);
}
.ftr__copy, .ftr__credit {
  font-size: 0.78rem;
  color: var(--c-warm-gray);
  max-width: none;
}


/* ================================================================
   TOMBOL WHATSAPP MENGAMBANG
   ================================================================ */
.wa-float {
  position: fixed;
  right: clamp(var(--sp-md), 3vw, var(--sp-xl));
  bottom: clamp(var(--sp-md), 3vw, var(--sp-xl));
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: var(--r-pill);
  background: #1FA855;          /* hijau WhatsApp, ikon putih = 3.4:1 untuk grafis */
  color: #FFFFFF;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8);
  transition: transform var(--t-fast) var(--ease-out);
}
.wa-float[hidden] { display: none; }
.wa-float:hover { transform: translateY(-3px) scale(1.04); }


/* ================================================================
   CETAK
   ================================================================ */
@media print {
  .hdr, .scrim, .wa-float, .lightbox, .hero__actions, .skip-link { display: none !important; }
  .hero { min-height: auto; }
  body { background: #FFFFFF; color: #000000; }
  .band-dark, .band-charcoal { background: #FFFFFF; color: #000000; }
  .section, .section--md { padding-block: var(--sp-lg); }
  /* Foto tekstur footer tidak ikut tercetak — boros tinta dan
     tidak menambah informasi apa pun di atas kertas. */
  .ftr { background: #FFFFFF; color: #000000; }
  .ftr::after { display: none !important; }
  /* Bleed: di kertas turunkan jadi satu kolom, foto dibatasi tingginya. */
  .bleed { grid-template-columns: 1fr; min-height: 0; }
  .bleed__body { max-width: none; margin: 0; padding-block: var(--sp-lg); }
  .bleed__media img { height: auto; max-height: 8cm; }
}

/* Utility classes from consulting.html */
.hero__title--narrow { max-width: 20ch; }
.card--minimal { background: transparent; box-shadow: none; border: none; border-top: 1px solid var(--c-gold); }
.card__body--flush { padding-inline: 0; }





/* ================================================================
   STRIP HIGHLIGHT (di bawah hero)
   Menggantikan gagasan hero-slider. Tiga kartu foto rapat tanpa jarak,
   menempel langsung di bawah hero seperti kelanjutan gambarnya.
   ================================================================ */
.strip { padding: 0; }
.strip__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Wajib: tanpa ini anak grid menolak mengecil dan memicu scroll
   horizontal di layar sempit (SOP kategori 1). */
.strip__list > * { min-width: 0; }

.strip__link {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}
.strip__link img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.strip__link:hover img,
.strip__link:focus-visible img { transform: scale(1.05); }

/* Gradient mencapai 0.92 di dasar, jadi kontras teks putih terjamin
   berapa pun terangnya foto — inilah yang membuat foto terang tetap
   aman di sini, padahal gagal dipakai sebagai hero. */
.strip__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-2xl) var(--sp-lg) var(--sp-lg);
  background: linear-gradient(
    180deg,
    rgba(11, 11, 10, 0)    0%,
    rgba(11, 11, 10, 0.55) 45%,
    rgba(11, 11, 10, 0.92) 100%
  );
}
.strip__title {
  display: block;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-white);
}
.strip__text {
  display: block;
  margin-top: var(--sp-xs);
  font-size: var(--fs-small);
  color: var(--c-warm-gray);
}

/* Garis emas tipis antar kartu — memisahkan tanpa jarak kosong. */
.strip__item + .strip__item .strip__link { border-left: 1px solid var(--c-line-dark); }

@media (max-width: 860px) {
  .strip__list { grid-template-columns: 1fr; }
  .strip__link img { aspect-ratio: 16 / 9; }
  .strip__item + .strip__item .strip__link {
    border-left: 0;
    border-top: 1px solid var(--c-line-dark);
  }
}


/* ================================================================
   PAKET MENU (menu.html)
   Baris editorial berselang-seling: foto kiri, lalu kanan, lalu kiri.
   Sengaja BUKAN grid kartu — daftar hidangan butuh lebar untuk dibaca,
   dan harga harus punya ruang sendiri supaya langsung tertangkap mata.
   ================================================================ */
.pkgs {
  display: grid;
  gap: var(--sp-3xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pkg {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(var(--sp-xl), 4vw, var(--sp-3xl));
  align-items: center;
}
.pkg > * { min-width: 0; }

/* Selang-seling sisi foto. Urutan DOM tetap foto-dulu supaya pembaca
   layar mendapat konteks visual sebelum daftar hidangan. */
/* Baris genap: foto pindah ke kanan lewat order. Rasio kolom IKUT
   dibalik — tanpa ini foto baris genap mendarat di kolom 1.15fr yang
   lebih lebar, sementara baris ganjil di 0.85fr, sehingga foto kiri
   selalu tampak lebih kecil dari foto kanan. Dengan pembalikan ini
   kolom foto selalu 0.85fr di kedua sisi: ukurannya persis sama,
   dan kolom teks tetap yang lebih lebar. */
.pkg:nth-child(even) { grid-template-columns: 1.15fr 0.85fr; }
.pkg:nth-child(even) .pkg__media { order: 1; }

.pkg__media { overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-light); }
.pkg__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.pkg:hover .pkg__media img { transform: scale(1.04); }

.pkg__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Harga dibedakan kuat: emas tua di band terang (4,01:1 di ivory —
   lolos AA untuk teks besar, lihat tokens.css). */
.pkg__price {
  margin-top: var(--sp-2xs);
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--c-gold-muted);
  letter-spacing: 0.02em;
}
.pkg__choose {
  margin-top: var(--sp-md);
  font-size: var(--fs-small);
  color: var(--c-dark-text-2);
  font-style: italic;
}
.pkg__list {
  margin: var(--sp-md) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2xs);
}
.pkg__list li {
  position: relative;
  padding-left: var(--sp-md);
  font-size: var(--fs-small);
  color: var(--c-dark-text);
  line-height: 1.6;
}
.pkg__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold-muted);
}
/* Baris berlabel kursus (Starter / Soup / Main / Dessert) */
.pkg__list--course li { padding-left: 0; }
.pkg__list--course li::before { display: none; }
.pkg__course {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold-muted);
  margin-bottom: 2px;
}
.pkg__list--course li + li { margin-top: var(--sp-sm); }

.pkg__note {
  margin-top: var(--sp-md);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--c-dark-text-2);
}

@media (max-width: 860px) {
  .pkg { grid-template-columns: 1fr; gap: var(--sp-lg); }
  /* Di ponsel foto selalu di atas teks — sama seperti .split dan .bleed. */
  /* Spesifisitas .pkg:nth-child(even) lebih tinggi dari .pkg, jadi
     aturan satu-kolom di atas TIDAK berlaku untuknya tanpa baris ini. */
  .pkg:nth-child(even) { grid-template-columns: 1fr; }
  .pkg:nth-child(even) .pkg__media { order: 0; }
  .pkgs { gap: var(--sp-2xl); }
}

/* Kredit developer jadi tautan ke anabhidev.com. Dibuat redup supaya
   tidak bersaing dengan brand klien, tapi tetap lolos kontras. */
.ftr__credit a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.ftr__credit a:hover,
.ftr__credit a:focus-visible { color: var(--c-gold); border-bottom-color: var(--c-gold-muted); }


/* ================================================================
   BREADCRUMB
   Dipasangkan dengan BreadcrumbList di JSON-LD. Schema tanpa
   breadcrumb yang terlihat adalah pelanggaran pedoman Google
   (structured data harus mencerminkan isi halaman yang tampak).
   ================================================================ */
.crumb { padding-block: var(--sp-lg); }
.crumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
}
.crumb__list li { display: flex; align-items: center; gap: var(--sp-xs); }
.crumb__list li + li::before {
  content: "/";
  color: var(--c-gold-muted);
  opacity: 0.8;
}
.crumb__list a { color: inherit; opacity: 0.75; }
.crumb__list a:hover,
.crumb__list a:focus-visible { opacity: 1; color: var(--c-gold); }
.crumb__list [aria-current="page"] { font-weight: var(--fw-bold); }


/* ================================================================
   BACK TO TOP
   Muncul setelah pengguna melewati satu layar penuh. Ditaruh di kiri
   supaya tidak bertabrakan dengan tombol WhatsApp mengambang di kanan.
   ================================================================ */
.to-top {
  position: fixed;
  left: var(--sp-lg);
  bottom: var(--sp-lg);
  z-index: var(--z-float, 60);
  display: grid;
  place-items: center;
  width: 44px;               /* target sentuh minimal 44x44 (SOP kat. 8) */
  height: 44px;
  border: 1px solid var(--c-line-dark);
  border-radius: 50%;
  background: rgba(11, 11, 10, 0.82);
  color: var(--c-white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              visibility var(--t-base) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--c-gold); color: var(--c-obsidian); border-color: var(--c-gold); }

@media (max-width: 560px) {
  /* Di ponsel tombol WhatsApp lebih penting; back-to-top dikecilkan
     dan dirapatkan supaya tidak memakan ruang baca. */
  /* Tetap 44x44 di mobile. Versi sebelumnya mengecil ke 40px —
     justru di layar sentuh, tempat ambang itu paling dibutuhkan. */
  .to-top { width: 44px; height: 44px; left: var(--sp-md); bottom: var(--sp-md); }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity 0.01ms, visibility 0.01ms; transform: none; }
}


/* ================================================================
   FAQ (details/summary bawaan browser)
   ================================================================ */
.faq { display: grid; gap: 0; }
.faq__item { border-top: 1px solid var(--c-line-light); }
.faq__item:last-child { border-bottom: 1px solid var(--c-line-light); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-lg) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: var(--fw-semi);
  color: var(--c-dark-text);
}
.faq__q::-webkit-details-marker { display: none; }
/* Penanda buka-tutup digambar sendiri: segitiga bawaan browser tidak
   bisa diwarnai konsisten lintas mesin. */
.faq__q::after {
  content: "";
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--c-gold-muted);
  border-bottom: 1.5px solid var(--c-gold-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-fast) var(--ease-out);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__a { padding-bottom: var(--sp-lg); }
.faq__a p { margin: 0; font-size: var(--fs-small); color: var(--c-dark-text-2); max-width: none; }
@media (prefers-reduced-motion: reduce) { .faq__q::after { transition: none; } }

.nf__links { display: grid; gap: var(--sp-md); justify-content: center; margin: var(--sp-xl) 0 0; padding: 0; list-style: none; }


/* ================================================================
   NAV DROPDOWN (item "Menu")
   Pemicunya <button>, bukan <a>: elemen ini membuka panel, bukan
   menuju halaman. Pakai <a href="#"> akan berbohong ke pembaca layar
   dan merusak navigasi keyboard.
   ================================================================ */
.has-sub { position: relative; }
.hdr__sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-xs) 0;
  background: none;
  border: 0;
  cursor: pointer;
  /* font/letter-spacing/text-transform TIDAK dipakai inherit lagi —
     nilainya diambil dari blok tipografi nav bersama di atas. */
}
.hdr__caret { flex-shrink: 0; transition: transform var(--t-fast) var(--ease-out); }
.has-sub.is-open .hdr__caret { transform: rotate(180deg); }

.hdr__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 208px;
  margin: var(--sp-sm) 0 0;
  padding: var(--sp-xs) 0;
  list-style: none;
  background: var(--c-charcoal);
  border: 1px solid var(--c-line-dark);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              visibility var(--t-fast) var(--ease-out);
  z-index: 1;
}
/* Dibuka lewat hover, fokus keyboard, ATAU klik (is-open).
   focus-within penting: tanpa itu panel menutup begitu pengguna
   keyboard menekan Tab ke dalamnya. */
.has-sub:hover .hdr__sub,
.has-sub:focus-within .hdr__sub,
.has-sub.is-open .hdr__sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.hdr__sub a {
  display: block;
  padding: var(--sp-sm) var(--sp-md);
  white-space: nowrap;
  /* Ukuran sengaja TIDAK di-override: mengikuti tipografi nav bersama
     supaya seluruh item menu tampil seragam. */
}
.hdr__sub a::after { display: none; }
.hdr__sub a:hover,
.hdr__sub a:focus-visible { color: var(--c-gold); background: rgba(201, 163, 90, 0.08); }
.hdr__sub a.is-active { color: var(--c-gold); }

/* Di drawer mobile panel jadi statis dan menumpuk, bukan mengambang —
   panel mengambang di dalam drawer sempit akan terpotong. */
@media (max-width: 980px) {
  .hdr__sub-toggle {
    width: 100%;
    justify-content: space-between;
    padding: var(--sp-md) 0;
    border-bottom: 1px solid var(--c-line-dark);
  }
  .hdr__sub {
    position: static;
    transform: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  .has-sub.is-open .hdr__sub { display: block; transform: none; }
  .has-sub:hover .hdr__sub:not(.is-open),
  .has-sub:focus-within .hdr__sub { transform: none; }
  .hdr__sub a {
    padding: var(--sp-md) 0 var(--sp-md) var(--sp-lg);
    border-bottom: 1px solid var(--c-line-dark);
    /* Ikut 0.92rem dari .hdr__list a — seragam dengan item nav lain. */
  }
}
@media (prefers-reduced-motion: reduce) {
  .hdr__sub, .hdr__caret { transition: none; }
}


/* CTA penutup daftar paket. Sebelumnya cuma .mt-xl (32px) sehingga
   tombol terasa menempel pada paket terakhir — apalagi karena baris
   paket berselang-seling kiri-kanan, tombol tampak menggantung di
   bawah kolom foto. Jarak diperbesar dan diberi garis pemisah supaya
   terbaca sebagai penutup daftar, bukan bagian paket terakhir. */
.pkgs-cta {
  margin-top: var(--sp-3xl);
  padding-top: var(--sp-2xl);
  border-top: 1px solid var(--c-line-light);
  text-align: center;
}

/* Jalan pintas WhatsApp di bawah form. Sengaja tautan teks, bukan
   tombol kedua: tombol kedua akan bersaing dengan CTA utama dan
   menurunkan jumlah orang yang mengisi form — padahal form
   menghasilkan permintaan yang jauh lebih lengkap. */
.form__direct { margin-top: var(--sp-md); text-align: center; }
.form__direct a {
  font-size: var(--fs-small);
  color: var(--c-warm-gray);
  border-bottom: 1px solid var(--c-gold-muted);
  padding-bottom: 2px;
}
.form__direct a:hover, .form__direct a:focus-visible { color: var(--c-gold); }

/* ================================================================
   TAP TARGET MOBILE — SOP v1.7 kategori 8 & 14
   ----------------------------------------------------------------
   Diukur di Chrome 390px: tautan footer 19px, tautan kontak 27px,
   logo header 30px, link-arrow 32px — semuanya di bawah ambang.
   Aturan di bawah hanya berlaku di layar sentuh (<=980px) supaya
   tata letak desktop tidak ikut merenggang.

   Dipakai min-height + inline-flex, bukan padding besar, supaya
   area sentuh bertambah TANPA menggeser posisi visual teksnya.
   ================================================================ */
@media (max-width: 980px) {

  .ftr__list { gap: 0; }
  .ftr__list a,
  .ftr__list span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .contact-list__value {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .hdr__brand { min-height: 44px; }

  .link-arrow { min-height: 44px; }

  /* Tautan di baris penutup footer (Privacy, Terms, dsb). */
  .ftr__base a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Sisa tap target yang masih di bawah ambang saat diukur di 390px:
   tautan "message the chef" di bawah form (22px) dan tautan
   breadcrumb (24px). Keduanya tautan teks, jadi dipakai min-height
   supaya area sentuhnya tumbuh tanpa mengubah tampilan barisnya. */
@media (max-width: 980px) {
  .form__direct a,
  .crumb__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}