/* Roti Senja — gaya majalah kuliner sore (konsep LimStudio). Dimuat setelah aset/kit/kit.css. */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/fraunces-normal-300_700.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('fonts/fraunces-italic-300_700.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/instrument-sans-normal-400_700.woff2') format('woff2'); }

:root {
  /* palet */
  --kertas: #F4ECDF;
  --kulit: #6B3B1F;
  --tinta: #2A1E16;
  --aprikot: #E8A34A;
  --susu: #FFFAF3;
  /* turunan */
  --tinta-pudar: rgba(42, 30, 22, .66);
  --garis: rgba(42, 30, 22, .2);
  --garis-terang: rgba(244, 236, 223, .22);
  --kertas-pudar: rgba(244, 236, 223, .72);

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* skala jarak */
  --j1: .25rem; --j2: .5rem; --j3: 1rem; --j4: 1.5rem; --j5: 2.5rem; --j6: 4rem; --j7: 6.5rem; --j8: 10.5rem;
  --tepi: clamp(1rem, 4.2vw, 4rem);
  --celah: clamp(.75rem, 1.7vw, 1.75rem);
  --kepala-tinggi: 64px;

  --lentur: cubic-bezier(.2, .7, .1, 1);
  --halus: cubic-bezier(.65, 0, .35, 1);
}

html { scroll-padding-top: calc(var(--kepala-tinggi) + 8px); }
body {
  background: var(--kertas) url('../img/kertas.webp') repeat;
  background-size: 180px;
  color: var(--tinta);
  font: 400 clamp(1rem, .96rem + .18vw, 1.125rem)/1.62 var(--sans);
}
::selection { background: var(--aprikot); color: var(--tinta); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; font-optical-sizing: auto; font-variation-settings: 'SOFT' 40; }
h2 { font-size: clamp(2.3rem, 1.25rem + 4.4vw, 5.8rem); line-height: 1.02; letter-spacing: -.025em; font-weight: 360; text-wrap: balance; }
h3 { font-size: clamp(1.45rem, 1.2rem + .9vw, 2.1rem); line-height: 1.1; letter-spacing: -.01em; }
h1 em, h2 em, h3 em, .kaki__ajak em { font-style: italic; color: var(--kulit); font-variation-settings: 'SOFT' 100, 'WONK' 1; font-weight: 340; }
p { margin: 0; }
a { text-decoration: none; }
strong { font-weight: 600; }

.label { font: 600 .74rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--kulit); margin-bottom: var(--j4); display: flex; align-items: center; gap: .7rem; }
.label::before { content: ''; width: 1.6rem; height: 1px; background: currentColor; }

/* kepala halaman ala majalah */
.kepala-hal { display: flex; justify-content: space-between; gap: var(--j3); border-top: 1px solid var(--garis); padding-top: .65rem; font: 500 .7rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-pudar); }
.kepala-hal span:first-child { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: .85rem; }

/* tombol & tautan */
.tombol { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 3rem; padding: .85rem 1.4rem; border-radius: 999px; background: var(--tinta); color: var(--susu); font: 600 .95rem/1.1 var(--sans); letter-spacing: .01em; border: 0; cursor: pointer; transition: background-color .35s, color .35s, transform .35s var(--lentur); }
.tombol:hover { background: var(--kulit); }
.tombol:active { transform: scale(.97); }
.tombol .panah { transition: transform .4s var(--lentur); }
.tombol:hover .panah { transform: translateX(4px); }
.tombol--kecil { min-height: 2.4rem; padding: .5rem 1rem; font-size: .85rem; }
.tombol--penuh { width: 100%; }
.tombol--besar { min-height: 3.6rem; font-size: 1.02rem; }
.tautan-garis { font-weight: 600; font-size: .95rem; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .45s var(--lentur); }
.tautan-garis:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- kepala situs ---------- */
.kepala { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--kepala-tinggi); display: flex; align-items: center; justify-content: space-between; gap: var(--j3); padding: 0 var(--tepi); transition: background-color .4s, border-color .4s; border-bottom: 1px solid transparent; }
.kepala.tergulir { background: rgba(244, 236, 223, .96); border-bottom-color: var(--garis); }
.merek { display: inline-flex; align-items: center; gap: .55rem; color: var(--kulit); }
.merek__tanda { width: 30px; height: 30px; flex: none; }
.merek__nama { font: 450 1.3rem/1 var(--serif); color: var(--tinta); letter-spacing: -.01em; white-space: nowrap; }
.merek__nama em { font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--kulit); }
.kepala__nav { display: none; gap: clamp(1rem, 2vw, 2.2rem); font-size: .9rem; font-weight: 500; }
.kepala__nav a { position: relative; padding: .3rem 0; }
.kepala__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--lentur); }
.kepala__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.kepala__kanan { display: flex; align-items: center; gap: .35rem; }
.bahasa-pilih button { font-size: .74rem; }
.konsep { position: relative; }
.konsep__tombol { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 1px solid var(--garis); border-radius: 999px; padding: .4rem .7rem; font: 600 .74rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.konsep__tombol:hover, .konsep__tombol[aria-expanded="true"] { border-color: var(--tinta); }
.konsep__titik { width: 6px; height: 6px; border-radius: 50%; background: var(--aprikot); }
.konsep__kartu { position: absolute; right: 0; top: calc(100% + .7rem); width: min(340px, calc(100vw - 2rem)); background: var(--susu); border: 1px solid var(--garis); border-radius: 14px; padding: 1.2rem; display: grid; gap: .85rem; font-size: .92rem; line-height: 1.5; box-shadow: 0 18px 40px -24px rgba(42, 30, 22, .45); }
.konsep__judul { font: 500 1.25rem/1.15 var(--serif); font-style: italic; color: var(--kulit); }
.konsep__kartu .tautan-garis { justify-self: start; font-size: .85rem; }
@media (max-width: 559px) {
  .kepala .tombol--kecil { display: none; }
  .konsep__kartu { position: fixed; left: 1rem; right: 1rem; top: calc(var(--kepala-tinggi) + .3rem); width: auto; }
}
@media (min-width: 1000px) { .kepala__nav { display: flex; } }

/* ---------- foto terungkap (interaksi khas 1) ---------- */
.ungkap { position: relative; overflow: hidden; aspect-ratio: var(--rasio, 4/5); background: #d9c6ad; }
.ungkap picture { position: absolute; inset: -7% 0; }
.ungkap img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.08) saturate(1.04); }
@media (prefers-reduced-motion: no-preference) {
  .js .ungkap { clip-path: inset(100% 0 0 0); transition: clip-path 1.35s var(--halus); }
  .js .ungkap img { transform: scale(1.22); transform-origin: 50% 100%; transition: transform 1.9s var(--lentur); }
  .js .ungkap.terbuka { clip-path: inset(0 0 0 0); }
  .js .ungkap.terbuka img { transform: none; }
}
html.tenang .ungkap { clip-path: none !important; }
html.tenang .ungkap img { transform: none !important; }
figcaption { font: italic 400 .84rem/1.4 var(--serif); color: var(--tinta-pudar); margin-top: .65rem; }

/* ---------- garis bawah gambar tangan (interaksi khas 3) ---------- */
.coret { position: relative; display: inline-block; white-space: nowrap; }
.coret svg { position: absolute; left: -3%; width: 106%; bottom: -.16em; height: .42em; overflow: visible; pointer-events: none; }
.coret path { fill: none; stroke: var(--aprikot); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.25s var(--halus) .25s; }
p .coret path { stroke-width: 2.4; }
.coret.tergambar path, html.tenang .coret path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .coret path { stroke-dashoffset: 0; } }

/* ---------- 1. pembuka ---------- */
.pembuka { padding: calc(var(--kepala-tinggi) + var(--j3)) var(--tepi) var(--j6); display: grid; grid-template-columns: 1fr; gap: var(--j4); }
.pembuka__judul { font-size: clamp(3.3rem, 1.3rem + 7.6vw, 9.4rem); line-height: .94; letter-spacing: -.035em; font-weight: 330; margin-top: var(--j4); }
.baris { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.12em; }
.baris > * { display: inline-block; }
.baris em { padding-right: .06em; }
@media (prefers-reduced-motion: no-preference) {
  .js .baris > * { animation: naik 1.2s var(--lentur) both; animation-delay: calc(.12s + var(--i, 0) * .13s); }
  .js .pembuka__kiri, .js .daftar-isi { animation: pudar 1.2s var(--lentur) .55s both; }
}
@keyframes naik { from { transform: translateY(108%); } }
@keyframes pudar { from { opacity: 0; transform: translateY(16px); } }
.pembuka__lead { max-width: 34ch; font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height: 1.55; }
.pembuka__aksi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--j3) var(--j4); margin-top: var(--j4); }
.pembuka__foto { margin: 0; position: relative; }
.oven-chip { position: absolute; left: .75rem; bottom: 2.6rem; max-width: calc(100% - 1.5rem); display: inline-flex; align-items: center; gap: .55rem; background: var(--susu); color: var(--tinta); border-radius: 999px; padding: .5rem .9rem .5rem .75rem; font-size: .8rem; font-weight: 500; line-height: 1.25; }
.oven-chip__titik { width: 8px; height: 8px; border-radius: 50%; background: var(--aprikot); flex: none; box-shadow: 0 0 0 0 rgba(232, 163, 74, .6); animation: denyut 2.4s ease-out infinite; }
@keyframes denyut { 70% { box-shadow: 0 0 0 9px rgba(232, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 163, 74, 0); } }
.daftar-isi { display: none; }

@media (max-width: 999px) {
  .pembuka__judul { order: 1; }
  .pembuka__foto { order: 2; }
  .pembuka__kiri { order: 3; }
  .kepala-hal { order: 0; }
}
@media (min-width: 1000px) {
  .pembuka { grid-template-columns: repeat(12, 1fr); column-gap: var(--celah); row-gap: 0; padding-bottom: var(--j7); }
  .pembuka > .kepala-hal { grid-column: 1 / -1; }
  .pembuka__judul { grid-column: 1 / -1; margin-top: var(--j5); }
  .baris--kanan { text-align: right; padding-right: .02em; }
  .pembuka__kiri { grid-column: 1 / span 4; align-self: start; margin-top: var(--j6); }
  .oven-chip { top: 1rem; bottom: auto; left: 1rem; }
  .pembuka__foto { grid-column: 5 / span 5; margin-top: var(--j5); }
  .daftar-isi { grid-column: 10 / -1; align-self: start; display: grid; gap: 0; margin-top: var(--j6); }
  .daftar-isi__judul { font: italic 400 1rem/1.3 var(--serif); color: var(--tinta-pudar); margin-bottom: .6rem; }
  .daftar-isi a { display: grid; grid-template-columns: 2.6rem 1fr; padding: .75rem 0; border-top: 1px solid var(--garis); font-weight: 500; font-size: .95rem; transition: padding .4s var(--lentur), color .3s; }
  .daftar-isi a:last-child { border-bottom: 1px solid var(--garis); }
  .daftar-isi a span:first-child { font: italic 400 .95rem/1.4 var(--serif); color: var(--kulit); }
  .daftar-isi a:hover { padding-left: .5rem; color: var(--kulit); }
}

/* ---------- bagian umum ---------- */
.bagian { padding: var(--j6) var(--tepi); }
.bagian__judul { margin: var(--j6) 0 var(--j6); }
.bagian__judul h2 { max-width: 12ch; }
.bagian__judul--lebar { max-width: none; display: grid; gap: var(--j4); }
@media (min-width: 1000px) {
  .bagian { padding-top: var(--j8); padding-bottom: var(--j8); }
  .bagian__judul--lebar { grid-template-columns: 7fr 4fr; align-items: end; column-gap: var(--celah); }
  .bagian__judul h2 { max-width: 13ch; }
}

/* ---------- 2. cerita dapur ---------- */
.bab { display: grid; gap: var(--j4); margin-top: var(--j7); }
.bab:first-of-type { margin-top: 0; }
.bab__angka { font: italic 300 clamp(5.5rem, 3rem + 11vw, 15rem)/.8 var(--serif); color: var(--kulit); letter-spacing: -.05em; font-variation-settings: 'SOFT' 100; opacity: .92; }
.bab__teks { max-width: 30ch; }
.bab__teks h3 { margin-bottom: var(--j3); }
.bab__teks p { color: var(--tinta-pudar); }
.bab__teks p .coret { color: var(--tinta); }
.bab__foto { margin: 0; }
@media (max-width: 999px) {
  .bab--2 .bab__foto { width: 82%; margin-left: auto; }
  .bab--3 .bab__foto { margin-left: calc(var(--tepi) * -1); margin-right: calc(var(--tepi) * -1); }
  .bab--3 .bab__foto figcaption { padding: 0 var(--tepi); }
  .bab__angka { margin-bottom: -.3em; }
}
@media (min-width: 1000px) {
  .bab { grid-template-columns: repeat(12, 1fr); column-gap: var(--celah); row-gap: 0; align-items: start; }
  .bab--1 .bab__angka { grid-column: 1 / span 4; grid-row: 1; }
  .bab--1 .bab__teks { grid-column: 2 / span 4; grid-row: 2; margin-top: var(--j5); }
  .bab--1 .bab__foto { grid-column: 7 / -1; grid-row: 1 / span 3; }

  .bab--2 { margin-top: calc(var(--j7) * -1); }
  .bab--2 .bab__foto { grid-column: 2 / span 4; grid-row: 1 / span 3; margin-top: var(--j8); }
  .bab--2 .bab__angka { grid-column: 8 / span 4; grid-row: 1; margin-top: var(--j8); margin-top: calc(var(--j8) + var(--j7)); }
  .bab--2 .bab__teks { grid-column: 8 / span 4; grid-row: 2; margin-top: var(--j5); }

  .bab--3 { margin-top: var(--j7); }
  .bab--3 .bab__foto { grid-column: 4 / -1; grid-row: 1; }
  .bab--3 .bab__angka { grid-column: 1 / span 3; grid-row: 1; align-self: end; margin-bottom: -.06em; }
  .bab--3 .bab__teks { grid-column: 1 / span 3; grid-row: 2; margin-top: var(--j5); max-width: 26ch; }
}

/* ---------- 3. menu ---------- */
.menu__catatan { max-width: 36ch; color: var(--tinta-pudar); font-size: .95rem; border-left: 2px solid var(--aprikot); padding-left: var(--j3); }
.menu__catatan strong { color: var(--tinta); }
.menu__kolom { display: grid; gap: var(--j6); }
.menu__grup h3 { display: flex; align-items: baseline; gap: .7rem; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.8rem); font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--kulit); padding-bottom: var(--j3); border-bottom: 1px solid var(--tinta); margin-bottom: var(--j2); }
.menu__no { font: 500 .78rem/1 var(--sans); font-style: normal; letter-spacing: .14em; color: var(--tinta-pudar); }
.menu__grup ul { list-style: none; margin: 0; padding: 0; }
.menu__item { padding: var(--j3) 0; border-bottom: 1px solid var(--garis); transition: background-color .3s; }
.menu__baris { display: flex; align-items: baseline; gap: .5rem; }
.menu__nama { font: 450 1.2rem/1.25 var(--serif); letter-spacing: -.005em; }
.menu__titik { flex: 1; min-width: 1.2rem; border-bottom: 1.5px dotted rgba(42, 30, 22, .42); transform: translateY(-.28em); }
.menu__harga { font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu__ket { color: var(--tinta-pudar); font-size: .9rem; margin-top: .3rem; max-width: 38ch; }
@media (hover: hover) {
  .menu__item[data-foto] { cursor: default; }
  .menu__item:hover .menu__nama { color: var(--kulit); font-style: italic; }
}
@media (min-width: 1000px) {
  .menu__kolom { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .menu__grup { padding: 0 var(--celah); border-left: 1px solid var(--garis); }
  .menu__grup:first-child { padding-left: 0; border-left: 0; }
  .menu__grup:last-child { padding-right: 0; }
  .menu__grup:nth-child(2) { margin-top: var(--j6); }
}
/* pratinjau foto ikut kursor (hanya laptop dengan tetikus) */
.intip { position: fixed; left: 0; top: 0; z-index: 40; width: 220px; aspect-ratio: 4/5; margin: 0; pointer-events: none; overflow: hidden; opacity: 0; transform: translate3d(-999px, -999px, 0); border-radius: 4px; }
.intip img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform .7s var(--lentur); }
.intip.tampil img { transform: none; }

/* ---------- 4. jam keluar oven (interaksi khas 2) ---------- */
.oven { background: var(--kulit); color: var(--kertas); padding: var(--j6) var(--tepi); position: relative; }
@media (max-width: 559px) {
  .jam { flex-wrap: wrap; }
  .jam .busur { width: 100%; max-width: 360px; margin-top: var(--j3); }
}
.oven .kepala-hal { border-top-color: var(--garis-terang); color: var(--kertas-pudar); margin-bottom: var(--j6); }
.oven .label { color: var(--aprikot); }
.oven h2 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4.4rem); max-width: 14ch; }
.oven h2 em { color: var(--aprikot); }
.jam { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--j4); margin-top: var(--j5); padding-top: var(--j4); border-top: 1px solid var(--garis-terang); }
.jam__kecil { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--kertas-pudar); font-weight: 600; }
.jam__angka { font: 300 clamp(3.6rem, 2.4rem + 5vw, 7rem)/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.03em; margin-top: .3rem; }
.busur { width: min(48%, 300px); height: auto; overflow: visible; flex: none; }
.busur .b-dasar { fill: none; stroke: var(--garis-terang); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.busur .b-jalan { fill: none; stroke: var(--aprikot); stroke-width: 2.5; stroke-linecap: round; }
.busur .b-cakrawala { stroke: var(--kertas-pudar); stroke-width: 1.5; }
.busur .b-titik { fill: var(--kulit); stroke: var(--kertas); stroke-width: 2; transition: r .4s var(--lentur), fill .3s; }
.busur .b-titik.lewat { fill: var(--kertas); }
.busur .b-titik.dekat { fill: var(--aprikot); stroke: var(--aprikot); }
.busur .b-titik.sorot { stroke-width: 4; }
.busur .b-matahari { fill: var(--aprikot); }
.busur .b-cahaya { fill: rgba(232, 163, 74, .22); }
.busur text { fill: var(--kertas-pudar); font: 600 21px var(--sans); }
.jam__status { margin-top: var(--j4); font-size: 1.05rem; line-height: 1.5; min-height: 3em; }
.jam__status b { font-weight: 600; color: var(--aprikot); }
.oven__catatan { margin-top: var(--j3); font-size: .82rem; color: var(--kertas-pudar); }

.oven__daftar { list-style: none; margin: var(--j6) 0 0; padding: 0; }
.slot { display: grid; grid-template-columns: 1fr 30%; gap: var(--j3) var(--j4); padding: var(--j4) 0; border-top: 1px solid var(--garis-terang); transition: opacity .5s; }
.slot:last-child { border-bottom: 1px solid var(--garis-terang); }
.slot__jam { font: 300 clamp(3.2rem, 2rem + 5vw, 7.5rem)/.9 var(--serif); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.04em; grid-column: 1; grid-row: 1; transition: color .4s; }
.slot__teks { grid-column: 1 / -1; grid-row: 2; max-width: 34ch; }
.slot__teks h3 { font-style: italic; font-variation-settings: 'SOFT' 100; margin-bottom: .4rem; }
.slot__teks p:last-child { color: var(--kertas-pudar); }
.slot__foto { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: start; }
@media (max-width: 999px) { .slot__teks { grid-column: 1; } .slot__foto .ungkap { aspect-ratio: 3/4; } }
.slot__foto .ungkap { background: #4f2a15; }
.slot__lencana { display: inline-flex; align-items: center; gap: .4rem; font: 600 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .7rem; padding: .45rem .7rem; border-radius: 999px; }
.slot__lencana:empty { display: none; }
.slot.lewat .slot__lencana { border: 1px solid var(--garis-terang); color: var(--kertas-pudar); }
.slot.lewat .slot__jam { color: var(--kertas-pudar); }
.slot.dekat .slot__lencana { background: var(--aprikot); color: var(--tinta); }
.slot.dekat .slot__jam { color: var(--aprikot); }
@media (min-width: 1000px) {
  .oven { padding-top: var(--j8); padding-bottom: var(--j8); }
  .oven__isi { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(2rem, 6vw, 8rem); align-items: start; }
  .oven__tempel { position: sticky; top: calc(var(--kepala-tinggi) + var(--j5)); }
  .oven .kepala-hal { margin-bottom: var(--j5); }
  .oven__daftar { margin-top: 0; }
  .slot { grid-template-columns: 1fr 1.25fr 0.8fr; align-items: center; min-height: 58vh; padding: var(--j5) 0; }
  .slot__jam { grid-column: 1; grid-row: 1; }
  .slot__teks { grid-column: 2; grid-row: 1; }
  .slot__foto { grid-column: 3; grid-row: 1; align-self: center; }
  .oven__daftar.bergerak .slot .slot__teks, .oven__daftar.bergerak .slot .slot__jam { opacity: .42; transition: opacity .6s, color .4s; }
  .oven__daftar.bergerak .slot.aktif .slot__teks, .oven__daftar.bergerak .slot.aktif .slot__jam { opacity: 1; }
}

/* ---------- 5. galeri ---------- */
.galeri__kutip { font: italic 400 clamp(1.1rem, 1rem + .4vw, 1.35rem)/1.45 var(--serif); color: var(--tinta-pudar); max-width: 34ch; }
.galeri__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--j5) var(--celah); align-items: start; }
.g { margin: 0; }
.g--1 { grid-column: 1 / span 4; }
.g--2 { grid-column: 2 / -1; }
.g--3 { grid-column: 1 / span 3; margin-top: var(--j5); }
.g--4 { grid-column: 4 / -1; }
.g--5 { grid-column: 1 / -1; }
.g--6 { grid-column: 2 / -1; }
@media (min-width: 1000px) {
  .galeri__grid { grid-template-columns: repeat(12, 1fr); row-gap: 0; }
  .g--1 { grid-column: 1 / span 4; grid-row: 1; }
  .g--2 { grid-column: 6 / -1; grid-row: 1; margin-top: var(--j8); }
  .g--3 { grid-column: 2 / span 5; grid-row: 2; margin-top: var(--j6); }
  .g--4 { grid-column: 9 / span 3; grid-row: 2; margin-top: var(--j8); }
  .g--5 { grid-column: 1 / span 6; grid-row: 3; margin-top: var(--j6); }
  .g--6 { grid-column: 8 / -1; grid-row: 3; margin-top: var(--j8); }
}

/* ---------- 6. pesan ---------- */
.pesan { background: var(--susu); border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); }
.pesan__intro { max-width: 40ch; color: var(--tinta-pudar); }
.pesan__isi { display: grid; gap: var(--j5); align-items: start; }
.formulir { display: grid; gap: var(--j5); }
.formulir__bagian { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--j4); }
.formulir__bagian legend { display: flex; align-items: center; gap: .7rem; font: 450 clamp(1.35rem, 1.1rem + .8vw, 1.8rem)/1.15 var(--serif); padding: 0; margin-bottom: var(--j4); }
.formulir__no { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--tinta); font: 600 .8rem/1 var(--sans); flex: none; }
.pilihan { display: grid; gap: 0 var(--celah); }
.pilihan__grup { font: 600 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--kulit); padding: var(--j4) 0 var(--j2); }
.pilihan__grup:first-child { padding-top: 0; }
.pilih { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--garis); }
.pilih__nama { font: 450 1.06rem/1.25 var(--serif); }
.pilih__harga { display: block; font: 500 .82rem/1.3 var(--sans); color: var(--tinta-pudar); margin-top: .15rem; font-variant-numeric: tabular-nums; }
.pilih.ada .pilih__nama { color: var(--kulit); font-style: italic; }
.langkah { display: inline-flex; align-items: center; gap: .2rem; }
.langkah button { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--garis); background: transparent; cursor: pointer; display: grid; place-items: center; transition: background-color .25s, border-color .25s, color .25s; }
.langkah button svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.langkah button:hover { border-color: var(--tinta); }
.langkah button[data-tambah]:hover { background: var(--tinta); color: var(--susu); }
.langkah button:disabled { opacity: .35; cursor: default; }
.langkah output { min-width: 1.8rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.segmen { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--tinta); border-radius: 999px; padding: 3px; max-width: 420px; }
.segmen label { position: relative; cursor: pointer; }
.segmen input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmen span { display: block; text-align: center; padding: .65rem 1rem; border-radius: 999px; font-weight: 600; font-size: .9rem; transition: background-color .3s, color .3s; }
.segmen input:checked + span { background: var(--tinta); color: var(--susu); }
.segmen input:focus-visible + span { outline: 2px solid var(--aprikot); outline-offset: 2px; }
.isian-baris { display: grid; gap: var(--j4); }
.isian { display: grid; gap: .4rem; font-size: .84rem; font-weight: 600; letter-spacing: .02em; }
.isian[hidden] { display: none; }
.isian input, .isian select, .isian textarea { font: 400 1rem/1.4 var(--sans); color: var(--tinta); background: transparent; border: 0; border-bottom: 1px solid rgba(42, 30, 22, .45); border-radius: 0; padding: .6rem 0; width: 100%; min-height: 2.8rem; transition: border-color .3s; }
.isian select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232A1E16' stroke-width='1.4'/%3E%3C/svg%3E") right .2rem center / 12px no-repeat; padding-right: 1.6rem; }
.isian textarea { resize: vertical; }
.isian input:focus, .isian select:focus, .isian textarea:focus { outline: none; border-bottom-color: var(--kulit); border-bottom-width: 2px; }
.isian input::placeholder, .isian textarea::placeholder { color: rgba(42, 30, 22, .42); }
.isian.salah input { border-bottom-color: #a2361c; }

.ringkas { background: var(--kertas); border: 1px solid var(--garis); border-radius: 18px; padding: clamp(1.2rem, 2vw, 1.8rem); display: grid; gap: var(--j3); }
.ringkas__judul { font: italic 450 1.5rem/1.1 var(--serif); color: var(--kulit); padding-bottom: var(--j3); border-bottom: 1px solid var(--tinta); }
.ringkas__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .95rem; }
.ringkas__daftar li { display: flex; justify-content: space-between; gap: 1rem; }
.ringkas__daftar li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ringkas__kosong { color: var(--tinta-pudar); font-size: .92rem; }
.ringkas__kosong[hidden] { display: none; }
.ringkas__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: var(--j3); border-top: 1px dashed rgba(42, 30, 22, .4); font-size: .92rem; font-weight: 600; }
.ringkas__total strong { font: 400 clamp(1.8rem, 1.5rem + 1vw, 2.4rem)/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.ringkas__catatan { font-size: .82rem; color: var(--tinta-pudar); }
.ringkas__galat { font-size: .88rem; font-weight: 600; color: #8e2f17; }
.ringkas__galat:empty { display: none; }
.ringkas__galat.info { color: var(--kulit); }
@media (min-width: 640px) {
  .isian-baris { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .pesan__isi { grid-template-columns: 7fr 4fr; column-gap: clamp(2rem, 5vw, 6rem); }
  .pilihan { grid-template-columns: 1fr 1fr; }
  .pilihan__grup { grid-column: 1 / -1; }
  .ringkas { position: sticky; top: calc(var(--kepala-tinggi) + var(--j4)); }
}

/* ---------- 7. lokasi ---------- */
.lokasi__isi { display: grid; gap: var(--j6); margin-top: var(--j6); }
.lokasi__teks h2 { max-width: 13ch; }
.lokasi__alamat { font-style: normal; margin-top: var(--j5); display: grid; gap: .3rem; }
.lokasi__alamat span { font: 400 clamp(1.35rem, 1.1rem + .8vw, 1.8rem)/1.25 var(--serif); }
.lokasi__alamat small { font-size: .84rem; color: var(--tinta-pudar); }
.jam-buka { margin: var(--j5) 0 0; max-width: 460px; }
.jam-buka div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--garis); transition: color .3s; }
.jam-buka div:last-child { border-bottom: 1px solid var(--garis); }
.jam-buka dt { font-weight: 500; }
.jam-buka dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.jam-buka div.hari-ini { color: var(--kulit); }
.jam-buka div.hari-ini dt { font-weight: 700; }
.jam-buka div.hari-ini dt::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: .55rem; border-radius: 50%; background: var(--aprikot); vertical-align: middle; }
.buka-status { margin: var(--j4) 0 var(--j5); font: italic 400 1.1rem/1.4 var(--serif); color: var(--kulit); min-height: 1.4em; }
.denah { margin: 0; background: var(--susu); border: 1px solid var(--garis); border-radius: 18px; padding: var(--j3); }
.denah svg { width: 100%; height: auto; display: block; }
.denah__jalan path { fill: none; stroke: var(--tinta); stroke-width: 9; stroke-linecap: round; opacity: .14; }
.denah__gang path { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; opacity: .45; }
.denah__lingkar { fill: rgba(232, 163, 74, .25); }
.denah__label { fill: var(--tinta-pudar); font: italic 400 15px var(--serif); }
.denah__utara { fill: var(--kulit); }
.denah__titik { fill: var(--kulit); stroke: var(--susu); stroke-width: 3; }
.denah figcaption { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem .3rem 0; margin: 0; }
.denah__nama { font-style: italic; color: var(--kulit); font-size: 1rem; }
@media (min-width: 1000px) {
  .lokasi__isi { grid-template-columns: 6fr 5fr; column-gap: clamp(2rem, 6vw, 8rem); align-items: center; }
}

/* ---------- 8. kaki ---------- */
.kaki { background: var(--tinta); color: var(--kertas); padding: var(--j7) var(--tepi) var(--j5); overflow: hidden; }
.kaki__atas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--j4); }
.kaki__ajak { font: 340 clamp(2rem, 1.3rem + 3vw, 4rem)/1.05 var(--serif); letter-spacing: -.02em; max-width: 14ch; }
.kaki__ajak em { color: var(--aprikot); }
.kaki__naik { font-weight: 600; font-size: .9rem; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.kaki__kata { font: italic 300 clamp(6.5rem, 27vw, 26rem)/.82 var(--serif); font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--aprikot); letter-spacing: -.05em; margin: var(--j6) 0 var(--j5); white-space: nowrap; }
.kaki__bawah { display: grid; gap: .6rem; padding-top: var(--j4); border-top: 1px solid var(--garis-terang); font-size: .88rem; color: var(--kertas-pudar); }
.kaki__bawah strong { color: var(--kertas); font-family: var(--serif); font-style: italic; font-weight: 450; }
.kaki__tautan { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.kaki__tautan a { color: var(--kertas); border-bottom: 1px solid var(--garis-terang); padding-bottom: 1px; }
.kaki__tautan a:hover { border-bottom-color: var(--aprikot); }
@media (min-width: 1000px) {
  .kaki__bawah { grid-template-columns: auto 1fr auto; column-gap: var(--j6); align-items: start; }
}

/* ---------- 404 ---------- */
.hilang { min-height: 100svh; display: grid; align-content: center; gap: var(--j4); padding: calc(var(--kepala-tinggi) + var(--j5)) var(--tepi) var(--j6); }
.hilang__angka { font: italic 300 clamp(7rem, 30vw, 22rem)/.8 var(--serif); color: var(--kulit); letter-spacing: -.06em; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.hilang h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.025em; font-weight: 360; max-width: 16ch; }
.hilang h1 em { font-style: italic; color: var(--kulit); font-variation-settings: 'SOFT' 100; }
.hilang p { max-width: 40ch; color: var(--tinta-pudar); }
.hilang__aksi { display: flex; flex-wrap: wrap; gap: var(--j3) var(--j4); align-items: center; margin-top: var(--j3); }