/* V View Panorama Dining — buku menu.
   Satu sumber untuk dua hasil: halaman web (layar) dan PDF A4 (cetak). */
:root {
  --ink: #0f1d19;
  --paper: #f6f3ea;
  --cream: #efe9d9;
  --muted: #5f6661;
  --line: #cdc9ba;
  --desk: #dcd9cd;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Lato", "Helvetica Neue", Arial, sans-serif;

  --fs-label: 6.6pt;
  --fs-h2: 40pt;
  --fs-name: 15pt;
  --fs-desc: 8.4pt;
  --fs-foot: 6pt;
  --gap: 6.4mm;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); color: var(--ink); background: var(--desk); -webkit-font-smoothing: antialiased; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; }
em, i { font-style: italic; }

/* ---------- Lembar A4 ---------- */
.sheet {
  position: relative; width: 210mm; height: 297mm; margin: 0 auto; overflow: hidden;
  background: var(--paper); padding: 24mm 26mm 17mm;
  display: flex; flex-direction: column;
}
.label { font-size: var(--fs-label); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; line-height: 1.5; }
.mark { width: 15mm; height: 15mm; flex: none; }

/* ---------- Kepala bagian ---------- */
.sec { padding-bottom: 8mm; margin-bottom: 9mm; border-bottom: 1px solid var(--line); }
.sec h2 { margin-top: 3mm; font-family: var(--serif); font-weight: 300; font-size: var(--fs-h2); line-height: 1; letter-spacing: -.005em; }

/* ---------- Daftar hidangan ---------- */
.items li + li { margin-top: var(--gap); }
.items.tight { --gap: 6.8mm; }
.row { display: flex; align-items: baseline; justify-content: space-between; gap: 8mm; }
.row h3 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-name); line-height: 1.2; letter-spacing: .005em; }
.row h3 i { margin-left: 2.4mm; font-weight: 400; font-size: .72em; color: var(--muted); }
.price { font-family: var(--serif); font-weight: 400; font-size: var(--fs-name); line-height: 1.2; font-variant-numeric: lining-nums; }
.items p { max-width: 141mm; text-wrap: balance; margin-top: 1.1mm; font-size: var(--fs-desc); line-height: 1.6; color: var(--muted); }

/* ---------- Minuman ---------- */
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13mm 16mm; align-items: start; }
.group .label { padding-bottom: 3.4mm; margin-bottom: 4.6mm; border-bottom: 1px solid var(--line); }
.items.plain { --gap: 3.6mm; }
.items.plain .row h3, .items.plain .price { font-size: calc(var(--fs-name) * .93); }
.items.plain p { max-width: 56mm; }

/* ---------- Foto & kaki halaman ---------- */
.band { margin-top: auto; height: 74mm; flex: none; overflow: hidden; }
.band.short { height: 58mm; }
.band img { width: 100%; height: 100%; object-fit: cover; }
.groups { margin-bottom: 12mm; }
.foot {
  margin-top: auto; padding-top: 4mm; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 6mm;
  font-size: var(--fs-foot); font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
}
.band + .foot { margin-top: 9mm; }
.foot em { font-family: var(--serif); font-weight: 400; font-size: 9.5pt; letter-spacing: .01em; text-transform: none; color: var(--muted); }
.foot span:last-child { text-align: right; }

/* ---------- Sampul ---------- */
.cover { background: var(--ink); color: var(--cream); align-items: center; text-align: center; padding: 25mm 24mm 22mm; }
.cover-photo { width: 162mm; height: 116mm; object-fit: cover; margin-top: 17mm; flex: none; }
.cover .label { margin-top: 17mm; }
.cover h1 { margin-top: 7mm; font-family: var(--serif); font-weight: 300; font-size: 47pt; line-height: 1.04; letter-spacing: -.005em; }
.cover .cover-end { margin-top: auto; letter-spacing: .5em; margin-right: -.5em; }

/* ---------- Sampul belakang ---------- */
.back { align-items: center; justify-content: center; text-align: center; padding-bottom: 30mm; }
.back h2 { margin-top: 12mm; font-family: var(--serif); font-weight: 300; font-size: 30pt; line-height: 1.1; }
.back .at { margin-top: 2.5mm; font-family: var(--serif); font-style: italic; font-size: 13pt; color: var(--muted); }
.back .rule { width: 18mm; height: 1px; background: var(--ink); margin: 13mm 0 2mm; }
.back .label { margin-top: 10mm; }
.back .line { margin-top: 2.6mm; font-family: var(--serif); font-size: 15pt; font-variant-numeric: lining-nums; }
.back .note { margin-top: 20mm; max-width: 110mm; font-family: var(--serif); font-style: italic; font-size: 11pt; line-height: 1.6; color: var(--muted); }

/* ---------- Bilah atas (hanya di layar) ---------- */
.bar {
  position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 16px clamp(18px, 3vw, 36px); background: #fff; box-shadow: 0 1px 0 var(--line);
  font-size: .68rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
}
.bar a { padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color .3s; }
.bar a:hover { border-color: var(--ink); }

@media screen {
  main { padding: 34px 0 70px; }
  .sheet { height: auto; min-height: 297mm; }
  .sheet + .sheet { margin-top: 34px; }
}
@media screen and (min-width: 1100px) {
  .sheet { zoom: 1.16; }
}
@media screen and (max-width: 840px) {
  :root { --fs-label: .64rem; --fs-h2: 2.7rem; --fs-name: 1.32rem; --fs-desc: .9rem; --fs-foot: .56rem; --gap: 24px; }
  main { padding: 0; }
  .sheet { width: 100%; min-height: 0; padding: 60px 24px 30px; }
  .sheet + .sheet { margin-top: 0; border-top: 1px solid var(--line); }
  .items.tight { --gap: 22px; }
  .items p, .items.plain p { max-width: none; margin-top: 5px; }
  .row { gap: 20px; }
  .sec { padding-bottom: 26px; margin-bottom: 30px; }
  .sec h2 { margin-top: 12px; }
  .groups { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .group .label { padding-bottom: 12px; margin-bottom: 16px; }
  .items.plain { --gap: 13px; }
  .band { height: auto; aspect-ratio: 16 / 9; margin-top: 44px; }
  .foot { margin-top: 44px; padding-top: 16px; grid-template-columns: 1fr auto; }
  .band + .foot { margin-top: 28px; }
  .foot em { display: none; }
  .mark { width: 52px; height: 52px; }
  .cover { min-height: calc(100svh - 53px); padding: 44px 24px 40px; }
  .cover-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; margin-top: 40px; }
  .cover .label { margin-top: 40px; }
  .cover h1 { margin-top: 18px; font-size: clamp(2.5rem, 12vw, 3.4rem); }
  .cover .cover-end { padding-top: 40px; }
  .back { padding: 72px 24px 80px; }
  .back h2 { margin-top: 32px; font-size: 2.1rem; }
  .back .at { margin-top: 8px; font-size: 1.15rem; }
  .back .rule { width: 56px; margin: 40px 0 8px; }
  .back .label { margin-top: 30px; }
  .back .line { margin-top: 8px; font-size: 1.3rem; }
  .back .note { margin-top: 48px; font-size: 1.05rem; }
}

@page { size: A4; margin: 0; }
@media print {
  body { background: none; }
  .bar { display: none; }
  .sheet { break-after: page; break-inside: avoid; }
  .sheet:last-child { break-after: auto; }
}