/* ---------- 0) FONT LOKAL ---------------------------------- */
/* Font diunduh dari Google Fonts lalu disimpan di repo (subset latin):
   lebih cepat, tanpa pihak ketiga, dan ikut tersimpan service worker
   supaya tetap tampil saat offline. font-display: swap membuat teks
   tampil lebih dulu dengan font cadangan selama berkas font diunduh. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fraunces-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/pjs-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/pjs-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/pjs-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   LetMeCook — tampilan
   Susunan: 1 token · 2 dasar · 3 kepala · 4 tombol · 5 kartu
            6 panel · 7 beranda · 8 resep · 9 mode masak
            10 rencana makan · 11 isian · 12 dropdown · 13 saran
            14 gulir · 15 gerak · 16 aksesibilitas · 17 responsif
   Warna dan jarak selalu dari token di bagian 1.
   ============================================================ */

/* ---------- 1) TOKEN -------------------------------------- */
:root {
  /* Warna, ditulis dalam oklch(L C h): L terang, C pekat. */
  --bg:         oklch(0.986 0.004 155);
  --kartu:      #fff;
  --tinta:      oklch(0.22 0.015 155);
  --redup:      oklch(0.47 0.018 155);
  --garis:      oklch(0.90 0.008 155);
  --merek:      oklch(0.42 0.098 155);
  --merek-tua:  oklch(0.33 0.082 155);
  --merek-muda: oklch(0.96 0.028 155);
  --aksen:      oklch(0.72 0.145 75);
  --aksen-muda: oklch(0.97 0.045 85);
  /* Versi lebih gelap khusus untuk teks. --aksen terlalu terang di atas
     putih (2.54:1). Yang ini 4.95:1, lolos WCAG AA. */
  --aksen-teks: oklch(0.55 0.145 75);
  --masak-bg:   oklch(0.22 0.015 155);
  --merek-teks: oklch(0.42 0.098 155);
  --bahaya:     oklch(0.48 0.185 27);

  /* Jarak. Naik satu tingkat, makin longgar. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;

  --r: 12px;
  --r-kecil: 8px;
  --pil: 999px;
  --bayang: 0 1px 3px rgb(21 29 24 / 0.07);
  --bayang-naik: 0 6px 16px rgb(21 29 24 / 0.10);

  --z-lekat: 20;
  --z-lapis: 50;
  --z-atas: 70;

  --gerak: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.18s;

  --judul: "Fraunces", Georgia, serif;
  --isi: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --lebar: 1120px;
  /* Tinggi kepala, dipakai mode masak supaya pas di layar. */
  --kepala: 56px;
}

/* ---------- 2) DASAR -------------------------------------- */
* { box-sizing: border-box; }

html {
  /* Scroll halus hanya untuk yang tidak meminta kurangi gerak (a11y). */
  scroll-behavior: smooth;
  /* Kepala bersifat lekat, jadi beri jarak supaya sasaran gulir
     tidak tertutup olehnya. */
  scroll-padding-top: calc(var(--kepala) + 8px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Reveal .muncul dimatikan: semua langsung terlihat. */
  .muncul { opacity: 1 !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--isi);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}

/* Saat mode masak terbuka, halaman di belakang tidak ikut bergulir. */
body.masak-jalan { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* Atribut hidden harus menang atas display mana pun di bawah ini. */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--judul);
  margin: 0;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
h2 { font-size: clamp(1.1rem, 2.2vw, 1.35rem); }
h3 { font-size: 1rem; }

p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }

.lega { text-wrap: pretty; }

/* Ikon dari icons.svg. Dipakai seragam: <svg class="ikon">. */
.ikon {
  width: 1.15em;
  height: 1.15em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.18em;
  flex: none;
}
.ikon.padat { fill: currentColor; stroke: none; }

/* Wadah halaman. */
.wrap {
  max-width: var(--lebar);
  margin: 0 auto;
  padding: var(--s5) var(--s4);
}

/* Jarak antar-blok di dalam halaman. */
.wrap > * + * { margin-top: var(--s6); }

/* Label kecil di atas judul. Dipakai hemat. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--merek);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- 3) KEPALA ------------------------------------- */
.kepala {
  background: var(--merek);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: var(--z-lekat);
}

.kepala-in {
  max-width: var(--lebar);
  margin: 0 auto;
  padding: var(--s2) var(--s4);
  display: flex;
  gap: var(--s3);
  align-items: center;
  min-height: var(--kepala);
}

.merek {
  font-family: var(--judul);
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.merek .ikon { width: 1.3em; height: 1.3em; }

/* Kotak pencarian + kotak saran di bawahnya. */
.cari {
  flex: 1;
  position: relative;
  min-width: 0;
  display: flex;
  background: var(--kartu);
  border-radius: var(--r-kecil);
}
.cari input {
  flex: 1;
  border: none;
  padding: var(--s3);
  font: inherit;
  font-size: 0.95rem;
  min-width: 0;
  color: var(--tinta);
  background: none;
  border-radius: var(--r-kecil) 0 0 var(--r-kecil);
}
.cari input:focus { outline: 2px solid var(--merek); outline-offset: -2px; }
.cari button {
  border: none;
  background: var(--merek-tua);
  color: #fff;
  padding: 0 var(--s4);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  border-radius: 0 var(--r-kecil) var(--r-kecil) 0;
}
.cari button:hover { background: oklch(0.27 0.07 155); }

.nav { display: flex; gap: var(--s1); }
.nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-kecil);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  /* 44px: ukuran sasaran sentuh minimum yang nyaman untuk jari. */
  min-height: 44px;
  transition: background var(--dur) var(--gerak);
}
.nav a:hover { background: rgb(255 255 255 / 0.16); }

.badge-hitung {
  background: #fff;
  color: var(--merek-tua);
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: var(--pil);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s1);
}

/* Baris chip kategori, bisa digeser ke samping di HP. */
.chip {
  background: var(--merek-tua);
  color: #fff;
}
.chip-in {
  max-width: var(--lebar);
  margin: 0 auto;
  padding: var(--s2) var(--s4);
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
}
.chip a {
  color: #fff;
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 600;
  padding: var(--s2) var(--s4);
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--pil);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  /* Tinggi minimum 40px supaya nyaman ditekan jari, bukan cuma pas
     untuk kursor tetikus. */
  min-height: 40px;
  transition: background var(--dur) var(--gerak), color var(--dur) var(--gerak), transform var(--dur) var(--gerak);
}
.chip a:hover { background: rgb(255 255 255 / 0.16); }
.chip a:active { transform: scale(0.97); }
.chip a.aktif { background: #fff; color: var(--merek-tua); border-color: #fff; }

/* ---------- 4) TOMBOL ------------------------------------- */
.tb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  border: 1px solid var(--merek);
  background: var(--kartu);
  color: var(--merek);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-kecil);
  cursor: pointer;
  text-decoration: none;
  min-height: 42px;
  transition: background var(--dur) var(--gerak), transform var(--dur) var(--gerak);
}
.tb:hover { background: var(--merek-muda); }
.tb:active { transform: translateY(1px); }

.tb-isi { background: var(--merek); color: #fff; }
.tb-isi:hover { background: var(--merek-tua); }

.tb-halus { border-color: var(--garis); color: var(--redup); }
.tb-halus:hover { background: var(--bg); color: var(--tinta); }

/* ---------- 5) KARTU -------------------------------------- */
/* Ringkas dan seragam tingginya: foto 3:2, dua baris teks. */
.grup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: var(--s4);
}

.kartu {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  transition: border-color var(--dur) var(--gerak), box-shadow var(--dur) var(--gerak), transform var(--dur) var(--gerak);
  /* Kartu di luar layar tidak digambar dulu. Katalog berisi 67 kartu,
     jadi ini menghemat kerja render tanpa perlu virtualisasi JS.
     Angka 215px harus SAMA dengan tinggi kartu sungguhan. Kalau tidak
     sama, tata letak bergeser saat kartu mulai digambar (CLS naik). */
  content-visibility: auto;
  contain-intrinsic-size: auto 215px;
}
.kartu:hover {
  border-color: oklch(0.80 0.03 155);
  box-shadow: var(--bayang-naik);
  transform: translateY(-2px);
}

.kartu-tautan { display: block; text-decoration: none; }

.kartu-foto { display: block; position: relative; overflow: hidden; }
/* height:auto wajib, kalau tidak atribut height di HTML dipakai sebagai
   tinggi pasti dan aspect-ratio diabaikan sehingga kartu jadi sangat tinggi. */
.kartu-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Foto membesar sedikit saat disorot. Memberi umpan balik bahwa
     kartunya bisa diklik, tanpa menggeser tata letak. */
  transition: transform 0.4s var(--gerak);
}
.kartu:hover .kartu-foto img { transform: scale(1.04); }

/* Latar pengganti kalau foto gagal dimuat dua kali. Tanpa ini,
   imgFallback tahap 2 hanya menyembunyikan gambar dan menyisakan ruang kosong. */
.img-solid { background: var(--merek-muda); }

.kartu-level {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  /* 0.88, bukan 0.78: label putih harus tetap terbaca walau fotonya
     terang. 0.78 terlalu tipis di atas foto berwarna muda. */
  background: rgb(21 29 24 / 0.88);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px var(--s2);
  border-radius: var(--pil);
}

.kartu-teks {
  display: block;
  padding: var(--s3);
}
.kartu-nama {
  font-family: var(--judul);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 2px;
  /* Nama panjang dipotong dua baris supaya tinggi kartu rata. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kartu-meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.78rem;
  color: var(--redup);
}
.kartu-bintang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  color: var(--aksen-teks);
  font-weight: 700;
}
.kartu-bintang .ikon { fill: currentColor; stroke: none; }

/* Tombol simpan mengambang di pojok foto.
   Lingkaran visualnya 36px, tapi area yang bisa ditekan 44px — ukuran
   nyaman untuk jari. Padding negatif tidak dipakai karena bikin tata
   letak kacau; sebagai gantinya ::before yang menutupi area lebih luas. */
.kartu-simpan {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  width: 36px;
  height: 36px;
  border-radius: var(--pil);
  border: none;
  background: rgb(255 255 255 / 0.92);
  color: var(--redup);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur) var(--gerak), background var(--dur) var(--gerak), transform var(--dur) var(--gerak);
}
.kartu-simpan::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--pil);
}
.kartu-simpan:hover { color: var(--bahaya); background: var(--kartu); transform: scale(1.08); }
.kartu-simpan:active { transform: scale(0.96); }
.kartu-simpan[aria-pressed="true"] { color: var(--bahaya); }
.kartu-simpan[aria-pressed="true"] .ikon { fill: currentColor; }

/* ---------- 6) PANEL -------------------------------------- */
.panel {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  overflow: hidden;
}
.panel-kepala {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--garis);
  flex-wrap: wrap;
}
.panel-kepala h1,
.panel-kepala h2 {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.panel-kepala .ikon { color: var(--merek); }
.panel-kepala a {
  margin-left: auto;
  color: var(--merek);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
}
.panel-kepala a:hover { text-decoration: underline; }

.isi { padding: var(--s4); }
.isi-grup { padding: var(--s4); }

/* Wadah yang isinya baru dibuat JavaScript (kartu, langkah resep).
   Tinggi minimum dipesan lebih dulu supaya saat isinya muncul, bagian
   di bawahnya tidak meloncat turun. Ini menekan CLS halaman katalog,
   halaman resep, dan rencana makan. */
.isi-grup:has(> .grup),
.isi-grup:has(> .kosong) { min-height: 60vh; }
#area:empty { min-height: 85vh; }

/* Baris info di bawah kepala panel. */
.baris-info {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--garis);
  font-size: 0.85rem;
  color: var(--redup);
  flex-wrap: wrap;
}
.baris-info-aksi { display: flex; gap: var(--s2); flex-wrap: wrap; }
.baris-info button {
  margin-left: auto;
  border: 1px solid var(--garis);
  background: var(--kartu);
  color: var(--merek);
  border-radius: var(--pil);
  padding: var(--s1) var(--s3);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
}
.baris-info button:hover { background: var(--merek-muda); }

/* Jarak antar bagian di halaman resep. Dulu ditulis sebagai atribut
   style di HTML; dipindah ke class supaya halaman tetap rapi saat
   Content-Security-Policy ketat dipasang. */
.jarak-atas { margin-top: var(--s4); }

/* Teks "3 dari 8 langkah" di kepala panel Langkah. */
.kepala-prog {
  margin-left: auto;
  border: 0;
  padding: 0;
}

/* Kalimat penutup. Tanpa garis tepi samping. */
.pesan {
  font-family: var(--judul);
  font-style: italic;
  font-size: 1rem;
  color: var(--merek-tua);
  background: var(--merek-muda);
  border-radius: var(--r-kecil);
  padding: var(--s3) var(--s4);
  margin-top: var(--s3);
}

/* Keadaan kosong. */
.kosong {
  padding: var(--s8) var(--s4);
  text-align: center;
  color: var(--redup);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
}
.kosong .ikon { width: 38px; height: 38px; color: var(--garis); }
.kosong strong,
.kosong h1 {
  color: var(--tinta);
  font-size: 1rem;
  font-family: var(--isi);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.3;
}
.kosong p { margin: 0; max-width: 42ch; font-size: 0.92rem; }
.kosong .tb { margin-top: var(--s2); }

/* ---------- 7) BERANDA ------------------------------------ */
.hero {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  overflow: hidden;
  display: grid;
}
.hero img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  max-height: 300px;
  object-fit: cover;
}
.hero .teks {
  padding: var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s3);
}
.hero .lead {
  color: var(--redup);
  font-size: 0.98rem;
  margin: 0;
  max-width: 48ch;
}
.hero .aksi { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* Sorotan resep hari ini. */
.sorot { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center; }
.sorot img {
  width: 220px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-kecil);
  flex: none;
}
.sorot .teks { flex: 1; min-width: 200px; }
.sorot h3 { font-size: 1.2rem; margin-bottom: var(--s2); }
.sorot .meta {
  color: var(--redup);
  font-size: 0.86rem;
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin: var(--s2) 0 var(--s3);
}
.sorot .meta span { display: inline-flex; align-items: center; gap: var(--s1); }

/* Kartu kategori. */
.kat {
  text-decoration: none;
  padding: var(--s4);
  display: flex;
  gap: var(--s3);
  align-items: center;
  transition: border-color var(--dur) var(--gerak), background var(--dur) var(--gerak);
}
.kat:hover { border-color: var(--merek); background: var(--merek-muda); }
.kat .ikon { width: 1.6em; height: 1.6em; color: var(--merek); }
.kat strong { font-size: 0.95rem; }
.kat small { color: var(--redup); font-size: 0.82rem; display: block; }

/* ---------- 8) HALAMAN RESEP ------------------------------ */
.remah {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  text-decoration: none;
  color: var(--merek);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: var(--s3);
}
.remah:hover { text-decoration: underline; }

.kepala-resep { display: grid; }
.kepala-resep img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.kepala-resep .teks {
  padding: var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.kepala-resep .sub {
  color: var(--redup);
  font-size: 0.88rem;
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
}
.kepala-resep .sub span { display: inline-flex; align-items: center; gap: var(--s1); }
.kepala-resep .bintang { color: var(--aksen-teks); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px var(--s2);
  border-radius: var(--pil);
  background: var(--aksen-muda);
  color: oklch(0.40 0.09 75);
}
.tag.hijau { background: var(--merek-muda); color: var(--merek-tua); }
.tag.merah { background: oklch(0.96 0.03 27); color: oklch(0.42 0.17 27); }
.tag-baris { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* Info cepat dalam kotak. */
.info-cepat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: var(--s2);
  margin: 0;
}
.info-cepat > div {
  background: var(--bg);
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  padding: var(--s2) var(--s3);
}
.info-cepat dt {
  color: var(--redup);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.info-cepat dd { margin: var(--s1) 0 0; font-weight: 700; font-size: 0.92rem; }

.aksi-resep { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* Dua kolom: bahan kiri, langkah kanan. */
.dua-kolom { display: grid; gap: var(--s4); }

/* Bahan */
.bahan { padding: 0 var(--s4) var(--s4); margin: 0; }
.bahan li {
  list-style: none;
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--garis);
  font-size: 0.92rem;
}
.bahan li:last-child { border-bottom: none; }
.bahan input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--merek);
  flex: none;
  cursor: pointer;
}
.bahan li.selesai span { text-decoration: line-through; color: var(--redup); }
.pengganti { display: block; font-size: 0.78rem; font-style: italic; color: var(--redup); margin-top: 2px; line-height: 1.4; }

/* Mode kulkas di katalog. */
.mode-kulkas { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.kulkas-label { display: inline-flex; align-items: center; gap: var(--s2); font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.mode-kulkas input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--merek); cursor: pointer; }

/* Catatan pribadi di halaman resep. */
.catatan-panel .isi { display: grid; gap: var(--s2); }
.catatan-label { font-size: 0.85rem; color: var(--redup); }
.catatan {
  font: inherit;
  font-size: 0.95rem;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  background: var(--kartu);
  color: var(--tinta);
  width: 100%;
  resize: vertical;
}
.catatan:focus { outline: 2px solid var(--merek); outline-offset: 1px; }
.data-panel .isi { display: grid; gap: var(--s2); }
.catatan-simpan { margin: 0; font-size: 0.8rem; color: var(--redup); min-height: 1.2em; }

/* Banner offline & tombol pasang (PWA). */
.banner-simpan {
  position: sticky;
  top: var(--kepala);
  z-index: var(--z-atas);
  background: var(--bahaya);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: var(--s2) var(--s4);
  text-align: center;
  border-bottom: 1px solid var(--garis);
}
.banner-offline {
  position: sticky;
  top: var(--kepala);
  z-index: var(--z-atas);
  background: var(--aksen-muda);
  color: var(--tinta);
  font-size: 0.85rem;
  font-weight: 600;
  padding: var(--s2) var(--s4);
  text-align: center;
  border-bottom: 1px solid var(--garis);
}
.banner-pasang {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  z-index: var(--z-atas);
  box-shadow: var(--bayang-naik);
}

.baris-porsi {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--garis);
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  overflow: hidden;
}
.stepper button {
  border: none;
  background: var(--bg);
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--merek-tua);
  transition: background var(--dur) var(--gerak);
}
.stepper button:hover { background: var(--merek-muda); }
.stepper span { min-width: 74px; text-align: center; font-weight: 700; font-size: 0.9rem; }

/* Langkah */
.langkah { counter-reset: langkah; padding: 0 var(--s4) var(--s4); margin: 0; }
.langkah li {
  list-style: none;
  display: flex;
  gap: var(--s3);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--garis);
}
.langkah li:last-child { border-bottom: none; }
.langkah .nomor {
  counter-increment: langkah;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--pil);
  background: var(--merek);
  color: #fff;
  font-family: var(--judul);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.langkah .nomor::before { content: counter(langkah); }
.langkah li.selesai .nomor { background: var(--merek-tua); }
.langkah li.selesai .teks-langkah { color: var(--redup); }
.langkah .isi { flex: 1; min-width: 0; }
.langkah .isi > * + * { margin-top: var(--s2); }

/* Baris atas tiap langkah: badge teknik di kiri, penunjuk menit video
   di kanan. Penunjuk ini menyambungkan langkah tertulis dengan bagian
   videonya, jadi orang tahu harus menonton menit berapa. */
.langkah-kepala {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.langkah-menit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--merek);
  background: var(--merek-muda);
  padding: 3px var(--s2);
  border-radius: var(--pil);
  white-space: nowrap;
}
.langkah-menit .ikon { width: 0.9em; height: 0.9em; }

.teks-langkah { margin: 0; font-size: 0.96rem; }

.baris-aksi { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* Tombol kecil di dalam langkah. */
.tb-mini {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  border: 1px solid var(--garis);
  background: var(--kartu);
  color: var(--redup);
  border-radius: var(--r-kecil);
  padding: var(--s1) var(--s3);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  /* 44px: ukuran nyaman ditekan jari, terutama saat memasak. */
  min-height: 44px;
  transition: border-color var(--dur) var(--gerak), color var(--dur) var(--gerak), background var(--dur) var(--gerak);
}
.tb-mini:hover { border-color: var(--merek); color: var(--merek); }
.tb-mini.jalan {
  background: var(--merek);
  border-color: var(--merek);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Badge teknik + meter api. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px var(--s2);
  border-radius: var(--pil);
  text-transform: capitalize;
  background: oklch(0.95 0.005 155);
  color: oklch(0.42 0.02 155);
}
/* Warna badge per teknik masak. Dipilih lewat data-teknik supaya
   JS tidak perlu menulis atribut style (ramah CSP). */
.badge[data-teknik="tumis"],
.badge[data-teknik="masak"],
.badge[data-teknik="goreng"],
.badge[data-teknik="sangrai"] { background: oklch(0.97 0.045 85); color: oklch(0.40 0.09 75); }
.badge[data-teknik="rebus"],
.badge[data-teknik="ungkep"] { background: oklch(0.97 0.015 250); color: oklch(0.42 0.13 250); }
.badge[data-teknik="kukus"],
.badge[data-teknik="tunggu"] { background: oklch(0.97 0.02 290); color: oklch(0.44 0.13 290); }
.badge[data-teknik="bakar"],
.badge[data-teknik="panggang"] { background: oklch(0.96 0.03 27); color: oklch(0.45 0.16 27); }
.badge[data-teknik="haluskan"],
.badge[data-teknik="sajikan"],
.badge[data-teknik="simpan"] { background: oklch(0.96 0.028 155); color: oklch(0.33 0.082 155); }
.badge[data-teknik="campur"] { background: oklch(0.95 0.005 155); color: oklch(0.42 0.02 155); }
.badge-matang {
  background: var(--merek-muda);
  color: var(--merek-tua);
  text-transform: none;
  font-weight: 600;
  padding: var(--s1) var(--s3);
}
.api { display: inline-flex; gap: 3px; align-items: center; }
.api i { width: 15px; height: 7px; border-radius: var(--pil); background: var(--garis); }
/* Segmen menyala pakai versi gelap --aksen supaya terlihat di atas
   latar terang (kontras 3:1 untuk elemen non-teks). */
.api i.on { background: var(--aksen-teks); }

/* Kotak tanda matang. */
.tanda {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  background: var(--merek-muda);
  border: 1px solid oklch(0.88 0.05 155);
  border-radius: var(--r-kecil);
  padding: var(--s2) var(--s3);
  font-size: 0.88rem;
}
.tanda .ikon { color: var(--merek); margin-top: 2px; }

/* Kotak tips. */
.kotak {
  border-radius: var(--r-kecil);
  padding: var(--s3) var(--s4);
  margin: 0 var(--s4) var(--s3);
  font-size: 0.9rem;
}
.kotak h3 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.9rem;
  margin-bottom: var(--s1);
}
.kotak.kuning { background: var(--aksen-muda); border: 1px solid oklch(0.90 0.06 85); }
.kotak.hijau { background: var(--merek-muda); border: 1px solid oklch(0.88 0.05 155); }
.kotak.biru { background: oklch(0.97 0.015 250); border: 1px solid oklch(0.90 0.03 250); }

.gizi { display: flex; gap: var(--s5); flex-wrap: wrap; margin: var(--s3) 0; }
.gizi strong { display: block; font-size: 1rem; }
.gizi span { color: var(--redup); font-size: 0.8rem; }

/* ---------- 9) MODE MASAK --------------------------------- */
/* Dipakai untuk langkah memasak dan untuk pemilih resep. */
.masak {
  position: fixed;
  inset: 0;
  z-index: var(--z-lapis);
  background: var(--masak-bg);
  color: #fff;
  display: none;
  flex-direction: column;
  padding: var(--s4);
  gap: var(--s3);
}
.masak.buka { display: flex; }

/* Bagian tengah yang bisa digulir. Tombol navigasi di bawahnya
   tidak ikut tergeser, jadi selalu bisa diklik. */
.masak-tengah {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  /* Jarak aman dari batang gulir supaya teks tidak menempel. */
  padding-right: var(--s1);
}

.masak-atas { margin-bottom: 0; flex: none; }
.masak-lacak {
  height: 4px;
  background: rgb(255 255 255 / 0.18);
  border-radius: var(--pil);
  overflow: hidden;
}
.masak-lacak i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--aksen);
  transition: width var(--dur) var(--gerak);
}
.masak-baris {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
}
.masak-hitung {
  font-family: var(--judul);
  font-size: 0.9rem;
  color: rgb(255 255 255 / 0.7);
  margin-right: auto;
}

.masak-tombol {
  background: none;
  border: 1px solid rgb(255 255 255 / 0.4);
  color: #fff;
  border-radius: var(--r-kecil);
  padding: var(--s2) var(--s3);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  transition: background var(--dur) var(--gerak);
}
.masak-tombol:hover { background: rgb(255 255 255 / 0.14); }
.masak-tombol.aktif { background: var(--aksen); border-color: var(--aksen); color: oklch(0.17 0.012 155); }

.masak-isi {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  max-width: 640px;
  /* margin auto menengahkan blok ini di dalam area gulir, baik
     mendatar maupun tegak. Tanpa ini isinya menempel ke atas. */
  margin: auto;
  width: 100%;
  padding: var(--s4) 0;
}

/* Teks langkah. flex:none penting supaya tingginya mengikuti isi,
   bukan melar memenuhi wadah dan menutupi tombol di bawahnya. */
.masak-teks {
  flex: none;
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  line-height: 1.4;
  margin: 0;
}
.masak-tanda { display: flex; gap: var(--s2); flex-wrap: wrap; flex: none; }
.masak-timer {
  align-self: flex-start;
  flex: none;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.5);
  color: #fff;
  border-radius: var(--r-kecil);
  padding: var(--s3) var(--s4);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.masak-timer.jalan { background: var(--aksen); border-color: var(--aksen); color: oklch(0.17 0.012 155); font-variant-numeric: tabular-nums; }

.masak-nav {
  display: flex;
  gap: var(--s3);
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  flex: none;
}
.masak-nav button {
  flex: 1;
  padding: var(--s3);
  border-radius: var(--r-kecil);
  font: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  transition: background var(--dur) var(--gerak);
}
.masak-nav button:disabled { opacity: 0.4; cursor: default; }
.masak-mundur { background: transparent; border: 1px solid rgb(255 255 255 / 0.5); color: #fff; }
.masak-mundur:hover:not(:disabled) { background: rgb(255 255 255 / 0.12); }
.masak-maju { background: var(--aksen); border: none; color: oklch(0.17 0.012 155); }
.masak-maju:hover { background: oklch(0.78 0.15 75); }

/* ---- Tata letak dua kolom saat video terbuka ----
   Video di kiri, teks langkah di kanan, supaya keduanya bisa dilihat
   bersamaan tanpa menggulir naik-turun. Di layar sempit, kolomnya
   ditumpuk lagi lewat media query di bagian responsif. */
.masak.ada-video .masak-tengah {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--s4);
  align-content: start;
  overflow: hidden;
}
.masak.ada-video .masak-video {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  overflow-y: auto;
  max-height: 100%;
}
.masak.ada-video .masak-isi {
  grid-column: 2;
  grid-row: 1 / -1;
  margin: 0;
  max-width: none;
  overflow-y: auto;
  max-height: 100%;
  padding: var(--s2) 0;
  /* Teks dikecilkan sedikit karena ruangnya separuh. */
  font-size: 0.95em;
}
.masak.ada-video .masak-teks { font-size: clamp(1.05rem, 1.8vw, 1.35rem); }

/* ---- Rincian langkah (hanya saat video tertutup) ---- */
.masak-rinci {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  margin-top: var(--s2);
}
.masak-rinci h4 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
  margin-bottom: var(--s2);
}
.masak-rinci h4 .ikon { width: 1.1em; height: 1.1em; }

/* Daftar bahan di langkah ini. */
.masak-bahan ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.masak-bahan li {
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--pil);
  padding: var(--s1) var(--s3);
  font-size: 0.88rem;
}

/* Daftar posisi langkah: yang lewat diredupkan, yang aktif disorot. */
.masak-urut ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.masak-urut li {
  display: flex;
  gap: var(--s2);
  padding: var(--s1) var(--s2);
  border-radius: var(--r-kecil);
  font-size: 0.86rem;
  color: rgb(255 255 255 / 0.5);
  border-left: 2px solid transparent;
}
.masak-urut li.lewat { color: rgb(255 255 255 / 0.32); }
.masak-urut li.kini {
  color: #fff;
  background: rgb(255 255 255 / 0.1);
  border-left-color: var(--aksen);
  font-weight: 600;
}
.masak-urut li::before {
  counter-increment: urut;
  content: counter(urut);
  flex: none;
  width: 1.4em;
  text-align: right;
  color: rgb(255 255 255 / 0.4);
}
.masak-urut ol { counter-reset: urut; }

/* Petunjuk papan tuntas di mode masak. Disembunyikan di layar kecil
   karena tidak ada papan ketik. */
.masak-papan {
  text-align: center;
  font-size: 0.78rem;
  color: rgb(255 255 255 / 0.55);
  margin-top: var(--s3);
  flex: none;
}
@media (max-width: 700px) {
  .masak-papan { display: none; }
}

/* Di layar sempit, dua kolom ditumpuk lagi: video di atas, teks di
   bawah. Dua kolom di layar HP akan membuat keduanya terlalu sempit. */
@media (max-width: 860px) {
  .masak.ada-video .masak-tengah {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: var(--s3);
  }
  .masak.ada-video .masak-video,
  .masak.ada-video .masak-isi {
    max-height: none;
    overflow-y: visible;
  }
  .masak.ada-video .masak-teks { font-size: clamp(1.15rem, 3.2vw, 1.5rem); }
}

/* Panel video di dalam mode masak. */
.masak-video {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  flex: none;
}
.masak-pemutar {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-kecil);
  overflow: hidden;
}
.masak-pemutar iframe { width: 100%; height: 100%; border: 0; display: block; }
.masak-bab { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.masak-bab button {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: var(--s1) var(--s3);
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--pil);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  cursor: pointer;
  min-height: 44px;
}
.masak-bab button:hover { background: rgb(255 255 255 / 0.18); }
.masak-bab .menit { color: var(--aksen); font-variant-numeric: tabular-nums; margin-right: var(--s1); }

.masak-catatan {
  color: rgb(255 255 255 / 0.75);
  font-size: 0.9rem;
  margin-bottom: var(--s3);
}
.masak-keluar {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: var(--bahaya);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-kecil);
}

/* Pemilih resep memakai kerangka mode masak, tapi isinya daftar. */
.pilih-isi { justify-content: flex-start; }
.pilih-cari {
  font: inherit;
  font-size: 1rem;
  padding: var(--s3);
  border-radius: var(--r-kecil);
  border: 1px solid rgb(255 255 255 / 0.3);
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  margin: var(--s2) 0 var(--s4);
}
.pilih-cari::placeholder { color: rgb(255 255 255 / 0.5); }
.pilih-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 60vh;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--r-kecil);
}
.pilih-daftar li + li { border-top: 1px solid rgb(255 255 255 / 0.12); }
.pilih-daftar button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #fff;
  font: inherit;
  padding: var(--s2) var(--s3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 60px;
  transition: background var(--dur) var(--gerak);
}
.pilih-daftar button:hover { background: rgb(255 255 255 / 0.14); }

/* Foto kecil supaya masakan dikenali dari tampilannya, bukan cuma
   namanya. Bentuknya persegi membulat agar seragam walau rasio
   foto aslinya beda-beda. */
.pilih-foto {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--r-kecil);
  flex: none;
  background: rgb(255 255 255 / 0.1);
}
.pilih-teks { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pilih-nama { font-weight: 700; font-size: 0.92rem; }
.pilih-ket { color: rgb(255 255 255 / 0.66); font-size: 0.78rem; }

/* Label kategori waktu makan di ujung kanan. */
.pilih-tag {
  flex: none;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: capitalize;
  padding: 2px var(--s2);
  border-radius: var(--pil);
  background: rgb(255 255 255 / 0.18);
  color: rgb(255 255 255 / 0.95);
}

/* ---------- 10) RENCANA MAKAN ----------------------------- */
.meal-grup { display: grid; gap: var(--s3); padding: var(--s4); }
/* Tinggi minimum dipesan supaya saat JavaScript mengisi 7 kartu hari,
   isi di bawahnya tidak meloncat turun. 7 kartu x ±90px + celah. */
.meal-grup:empty { min-height: 640px; }
.hari { border: 1px solid var(--garis); border-radius: var(--r-kecil); overflow: hidden; }
.hari h3 {
  background: var(--bg);
  padding: var(--s2) var(--s3);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.hari h3 .ikon { color: var(--merek); }
.slot {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--garis);
  font-size: 0.86rem;
  min-height: 56px;
}
.slot .waktu {
  font-weight: 700;
  width: 44px;
  flex: none;
  color: var(--redup);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.slot .isi-slot {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.slot .isi-slot a {
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slot .isi-slot a:hover { text-decoration: underline; }
.slot .kosong-teks { color: var(--redup); font-style: italic; }

/* Foto mini di slot terisi: masakan dikenali dari tampilannya. */
.slot-foto {
  width: 32px;
  height: 32px;
  border-radius: var(--r-kecil);
  object-fit: cover;
  flex: none;
  background: var(--bg);
}
.slot.terisi .waktu { color: var(--merek-teks); }

/* Tombol slot: Isi/Ganti. Tetap 44px supaya nyaman ditekan jari. */
.slot button {
  border: 1px solid var(--garis);
  background: var(--kartu);
  border-radius: var(--r-kecil);
  padding: var(--s1) var(--s2);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  min-width: 48px;
  color: var(--redup);
  transition: border-color var(--dur) var(--gerak), color var(--dur) var(--gerak), background var(--dur) var(--gerak);
}
.slot button:hover { border-color: var(--merek); color: var(--merek); }
.slot.terisi button:hover { background: var(--merek-muda); }
.slot .slot-hapus { min-width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.slot .slot-hapus:hover { border-color: var(--bahaya); color: var(--bahaya); background: var(--kartu); }
.slot .slot-hapus .ikon { width: 1em; height: 1em; }

.belanja { padding: 0 var(--s4) var(--s4); margin: 0; }
.belanja li {
  list-style: none;
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--garis);
  font-size: 0.9rem;
}
.belanja li:last-child { border-bottom: none; }
.belanja input { width: 24px; height: 24px; accent-color: var(--merek); flex: none; cursor: pointer; }
.belanja .dari { color: var(--redup); font-size: 0.78rem; display: block; }
.belanja li.centang span { text-decoration: line-through; color: var(--redup); }

/* ---------- 11) ISIAN ------------------------------------- */
.isian {
  padding: var(--s4);
  display: grid;
  gap: var(--s3);
}
.isian label {
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--redup);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: var(--s1);
}
.isian input {
  font: inherit;
  font-size: 0.92rem;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  width: 100%;
  background: var(--kartu);
  color: var(--tinta);
  min-height: 42px;
}
.isian input:focus { outline: 2px solid var(--merek); outline-offset: -1px; }

.dua { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

/* Baris saringan di katalog. */
.saring {
  padding: var(--s4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
  border-bottom: 1px solid var(--garis);
}

.tabel {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s3) 0;
  font-size: 0.88rem;
}
.tabel caption { text-align: left; color: var(--redup); font-size: 0.8rem; padding-bottom: var(--s2); }
.tabel th, .tabel td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--garis); }
.tabel th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--redup); }
.tabel td:first-child { font-weight: 700; }

/* ---------- 12) DROPDOWN KUSTOM --------------------------- */
/* <select> disembunyikan, diganti tombol + daftar sendiri.
   Nilainya tetap dibaca dari <select>, jadi logika filter tidak berubah. */
.select-asli {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dd { position: relative; }
.dd-tombol {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  padding: var(--s2) var(--s3);
  min-height: 42px;
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  background: var(--kartu);
  color: var(--tinta);
  cursor: pointer;
  transition: border-color var(--dur) var(--gerak), background var(--dur) var(--gerak);
}
.dd-tombol:hover { border-color: var(--merek); }
.dd.buka .dd-tombol { border-color: var(--merek); background: var(--merek-muda); }

.dd-panah { color: var(--redup); transition: transform var(--dur) var(--gerak); }
.dd.buka .dd-panah { transform: rotate(180deg); }

.dd-daftar {
  position: absolute;
  z-index: var(--z-lekat);
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--s1);
  list-style: none;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  box-shadow: var(--bayang-naik);
  max-height: 260px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--gerak), transform var(--dur) var(--gerak), visibility var(--dur);
}
.dd.buka .dd-daftar { opacity: 1; visibility: visible; transform: translateY(0); }

.dd-daftar li {
  padding: var(--s2) var(--s3);
  border-radius: 6px;
  font-size: 0.88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s2);
  transition: background var(--dur) var(--gerak);
}
.dd-daftar li:hover { background: var(--merek-muda); }
.dd-daftar li.aktif { background: var(--merek); color: #fff; font-weight: 700; }
.dd-daftar li.aktif::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--pil);
  background: currentColor;
  flex: none;
}

/* ---------- 13) SARAN PENCARIAN --------------------------- */
.saran {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--z-atas);
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  box-shadow: var(--bayang-naik);
  overflow: hidden;
}
.saran-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  text-decoration: none;
  color: var(--tinta);
  transition: background var(--dur) var(--gerak);
}
.saran-item + .saran-item { border-top: 1px solid var(--garis); }
.saran-item:hover, .saran-item.disorot { background: var(--merek-muda); }
.saran-item img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
}
.saran-item strong { display: block; font-size: 0.9rem; }
.saran-item small { color: var(--redup); font-size: 0.78rem; }

/* ---------- 14) GULIR KUSTOM ------------------------------ */
/* Batang gulir bawaan diganti batang yang warnanya ikut tema.
   Dibuat cukup tebal supaya terlihat, bukan sekadar garis samar. */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--merek) var(--merek-muda);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--merek-muda); }
::-webkit-scrollbar-thumb {
  background: var(--merek);
  border-radius: var(--pil);
  border: 2px solid var(--merek-muda);
}
::-webkit-scrollbar-thumb:hover { background: var(--merek-tua); }

/* Baris chip: geser tanpa batang gulir yang mengganggu. */
.chip-in { scrollbar-width: none; }
.chip-in::-webkit-scrollbar { display: none; }

/* Tombol kembali ke atas. Muncul setelah halaman digulir jauh. */
.ke-atas {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  z-index: var(--z-lekat);
  width: 46px;
  height: 46px;
  border-radius: var(--pil);
  border: 1px solid var(--garis);
  background: var(--kartu);
  color: var(--merek);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--bayang-naik);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--gerak), transform var(--dur) var(--gerak), visibility var(--dur);
}
.ke-atas.tampil {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.ke-atas:hover { background: var(--merek-muda); }
.ke-atas .ikon { width: 1.4em; height: 1.4em; }

/* ---------- 15) GERAK ------------------------------------- */
/* Muncul saat masuk layar. Tanpa JavaScript, isinya tetap terlihat.
   Hanya opacity yang dianimasikan, bukan transform: menggeser elemen
   ikut tercatat sebagai pergeseran tata letak (CLS) oleh browser. */
.muncul {
  opacity: 0;
  transition: opacity 0.3s var(--gerak);
}
.muncul.tampil { opacity: 1; }

@media (scripting: none) {
  .muncul { opacity: 1; }
}

/* ---------- 16) AKSESIBILITAS --------------------- */
.skip { position: absolute; left: -999px; }
.skip:focus {
  left: var(--s2);
  top: var(--s2);
  background: var(--kartu);
  color: var(--tinta);
  padding: var(--s3) var(--s4);
  z-index: var(--z-atas);
  border-radius: var(--r-kecil);
  font-weight: 700;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--merek);
  outline-offset: 2px;
}

/* Di atas latar gelap, cincin hijau tidak terlihat. Ganti jadi putih. */
.kepala :focus-visible,
.chip :focus-visible,
.masak :focus-visible {
  outline-color: #fff;
}
.masak-maju:focus-visible,
.masak-timer.jalan:focus-visible {
  outline-color: var(--tinta);
}

/* ---------- 17) KAKI HALAMAN ------------------------------ */
footer {
  background: var(--masak-bg);
  color: oklch(0.88 0.01 155);
  margin-top: var(--s8);
}
footer .wrap {
  padding-top: var(--s6);
  padding-bottom: var(--s5);
}

/* Baris atas: merek di kiri, dua kolom tautan di kanan. */
.kaki-atas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
  justify-content: space-between;
}
.kaki-merek { max-width: 320px; }
.kaki-merek .merek { color: #fff; font-size: 1.05rem; }
.kaki-merek p {
  margin-top: var(--s3);
  font-size: 0.85rem;
  line-height: 1.6;
  color: oklch(0.75 0.012 155);
}

/* Kolom tautan. */
.kaki-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6) var(--s8);
}
.kaki-nav h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(0.65 0.012 155);
  margin-bottom: var(--s3);
}
.kaki-nav a {
  display: block;
  color: oklch(0.88 0.01 155);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 3px 0;
}
.kaki-nav a:hover { color: #fff; text-decoration: underline; }

/* Baris bawah: hak cipta dan catatan penyimpanan. */
.kaki-bawah {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid oklch(0.35 0.015 155);
  font-size: 0.78rem;
  color: oklch(0.65 0.012 155);
}
.kaki-bawah a { color: oklch(0.88 0.01 155); text-decoration: none; }
.kaki-bawah a:hover { text-decoration: underline; }

/* Tautan tunggal lama yang masih dipakai halaman dalam. */
footer a { text-decoration: none; display: inline-flex; align-items: center; gap: var(--s1); }
footer a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}



/* ---------- 18) RESPONSIF --------------------------------- */
/* Tablet dan ke atas: dua kolom, foto lebih tinggi. */
@media (min-width: 760px) {
  :root { --kepala: 60px; }
  .hero { grid-template-columns: 1fr 1fr; }
  .hero img { min-height: 260px; max-height: none; }
  .hero .teks { padding: var(--s6) var(--s8); }
  .kepala-resep { grid-template-columns: 1fr 1fr; }
  .kepala-resep img { height: 100%; min-height: 300px; }
  .kepala-resep .teks { padding: var(--s6) var(--s8); }
  .meal-grup { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (min-width: 900px) {
  .dua-kolom { grid-template-columns: 300px 1fr; align-items: start; }
}

/* HP: rapatkan dan kecilkan. */
@media (max-width: 640px) {
  .wrap { padding: var(--s4) var(--s3); }
  .wrap > * + * { margin-top: var(--s5); }

  /* Kepala jadi DUA BARIS di HP: baris 1 merek + ikon navigasi,
     baris 2 kotak pencarian selebar layar. Satu baris tidak cukup —
     tiga elemen berdesakan sampai saling menimpa. */
  .kepala-in { padding: var(--s2) var(--s3); gap: var(--s2); flex-wrap: wrap; }
  .cari { order: 3; flex-basis: 100%; }

  /* Teks navigasi disembunyikan, ikon dan angka tetap terlihat.
     PENTING: ukuran ikon ditulis dalam px, bukan em. Sebelumnya memakai
     1.35em — tapi font-size induk di-set 0 supaya teksnya hilang, dan
     em ikut jadi 0, jadi ikonnya ikut hilang juga. */
  .nav { margin-left: auto; }
  .nav a { padding: var(--s2); font-size: 0; gap: 0; }
  .nav .ikon { width: 24px; height: 24px; }
  .nav .badge-hitung { font-size: 0.72rem; margin-left: var(--s1); }

  /* Tombol cari jadi ikon saja supaya kotak ketik tetap lega. */
  .cari button { padding: 0 var(--s3); font-size: 0; }
  .cari button .ikon { width: 22px; height: 22px; }

  .sorot img { width: 100%; }
  /* Foto hero dipendekkan di HP supaya teksnya cepat terlihat. */
  .hero img { max-height: 170px; }
  .hero .teks { padding: var(--s4) var(--s3); gap: var(--s2); }
  .hero h1 { font-size: 1.45rem; }
  .grup { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
  .kartu-teks { padding: var(--s2) var(--s3) var(--s3); }
  .kartu-nama { font-size: 0.92rem; }
  .kartu-meta { font-size: 0.75rem; gap: var(--s1); }
  /* Tombol simpan tetap 44px walau kartunya kecil — jempol tidak
     mengecil di layar kecil. */
  .kartu-simpan { width: 44px; height: 44px; }
  .kartu-simpan::before { inset: 0; }

  .isi, .isi-grup, .saring { padding: var(--s3); }
  .panel-kepala { padding: var(--s3); }
  .langkah, .bahan, .belanja { padding-left: var(--s3); padding-right: var(--s3); }
  .kotak { margin-left: var(--s3); margin-right: var(--s3); }
  .masak { padding: var(--s3); }
  .masak-nav button { font-size: 0.9rem; min-height: 52px; }

  /* Kaki halaman ditumpuk supaya tetap enak dibaca di layar sempit. */
  .kaki-atas { flex-direction: column; gap: var(--s5); }
  .kaki-nav { gap: var(--s5); }
  .kaki-bawah { flex-direction: column; align-items: flex-start; }
}

/* Layar sangat sempit: merek jadi ikon saja supaya baris atas lega. */
@media (max-width: 400px) {
  .grup { grid-template-columns: 1fr 1fr; }
  .merek { font-size: 0; gap: 0; }
  .merek .ikon { width: 28px; height: 28px; }
}
/* ---------- 19) MODE GELAP & TRANSISI HALAMAN -------------- */
/* Mode gelap mengikuti pengaturan sistem (prefers-color-scheme). Karena
   seluruh warna halaman diambil dari token bagian 1, versi gelapnya
   cukup mengganti token di :root. Rule tambahan di bawah hanya
   meluruskan sedikit warna yang ditulis langsung (tag dan kotak tips)
   supaya kontrasnya tetap lolos WCAG di latar gelap. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:         oklch(0.17 0.012 155);
    --kartu:      oklch(0.215 0.014 155);
    --tinta:      oklch(0.93 0.008 155);
    --redup:      oklch(0.68 0.015 155);
    --garis:      oklch(0.31 0.02 155);
    /* --merek tidak diterangkan terlalu jauh supaya teks putih di
       tombol (.tb-isi) dan kepala tetap terbaca. */
    --merek:      oklch(0.52 0.095 155);
    --merek-tua:  oklch(0.26 0.05 155);
    --merek-muda: oklch(0.27 0.035 155);
    --aksen:      oklch(0.75 0.13 75);
    --aksen-muda: oklch(0.29 0.05 85);
    --aksen-teks: oklch(0.82 0.115 75);
    --bahaya:     oklch(0.55 0.17 27);
    --masak-bg:   oklch(0.13 0.012 155);
    --merek-teks: oklch(0.62 0.09 155);
    --bayang:     0 1px 3px rgb(0 0 0 / 0.35);
    --bayang-naik: 0 6px 16px rgb(0 0 0 / 0.45);
  }

  /* Tag: teks default dan varian warnanya ditulis langsung untuk
     latar terang, jadi versi gelapnya ditulis di sini. */
  .tag { color: var(--aksen-teks); }
  .tag.hijau { color: oklch(0.80 0.09 155); }
  .tag.merah { background: oklch(0.30 0.06 27); color: oklch(0.78 0.13 27); }
  .stepper button { color: var(--merek); }
  .tb { color: oklch(0.72 0.09 155); }
  /* Kotak tips: hanya garis dan latar .biru yang ditulis langsung. */
  .kotak.kuning { border-color: oklch(0.40 0.08 85); }
  .kotak.hijau  { border-color: oklch(0.38 0.06 155); }
  .kotak.biru   { background: oklch(0.24 0.02 250); border-color: oklch(0.36 0.04 250); }
}
  /* Override permukaan yang ditulis langsung untuk latar terang. */
  .masak-maju, .masak-tombol.aktif, .masak-timer.jalan { color: oklch(0.17 0.012 155); }
  .badge-matang { color: oklch(0.80 0.09 155); }
  .badge[data-teknik] { background: oklch(0.26 0.04 155); color: oklch(0.86 0.08 155); }
  .slot.terisi .waktu { color: oklch(0.62 0.09 155); }
  .slot .slot-hapus:hover, .kartu-simpan:hover { background: var(--kartu); }
  .cari button:hover { background: oklch(0.30 0.07 155); }
  .tanda { border-color: oklch(0.32 0.03 155); }


/* Transisi antarhalaman: saat pindah .html, konten lama melembut ke
   yang baru (cross-document view transition). Browser tanpa dukungan,
   atau pengguna yang mematikan animasi, langsung membuka tanpa transisi. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

.grup:empty { min-height: 480px; }

/* ---------- 21) CETAK ---------- */
@media print {
  /* Cetak resep: sembunyikan navigasi, video, tombol, dan mode masak.
     Tampilkan bahan + langkah dalam hitam-putih hemat tinta. */
  .kepala, footer, .cari, .nav, .chip, .masak, .banner-offline, .banner-pasang,
  .banner-simpan, .masak-video, .aksi-resep, .saring, .saran, .skip,
  .ke-atas, .baris-aksi, .mode-kulkas, .data-panel { display: none !important; }
  .bahan input { /* kotak centang tetap tercetak, bukan kotak bolong */ accent-color: #000; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .panel, .kartu { background: #fff; border: 1px solid #999; box-shadow: none; }
  .wrap { max-width: 100%; padding: 0; }
  a { color: #000; text-decoration: none; }
  .muncul { opacity: 1 !important; }
  .kepala-resep { display: block; }
  .kepala-resep img { max-width: 40%; }
}