/* ==========================================================================
   BOB FIT FOOD — halaman publik (beranda dan menu)

   Berdiri sendiri dari kasir.css: ini halaman yang dibuka dari Instagram, di
   ponsel, lewat kuota. Jadi hanya membawa yang dipakainya sendiri.

   Menunya tidak berfoto, dan itu bukan kekurangan yang perlu ditutupi dengan
   gambar tempelan — menu restoran memang artefak tipografi. Maka halaman ini
   diperlakukan sebagai menu cetak: nama di kiri, harga mono di kanan,
   dihubungkan garis rambut. Angka kalori — satu-satunya hal yang tidak dimiliki
   menu resto lain — dibiarkan jadi satu-satunya bidang berwarna.
   ========================================================================== */

:root {
    /* Palet merek BOB FIT, sama dengan logo dan antarmuka kasir. */
    --merek: #763d30;
    --merek-cuci: #f0e2d8;
    --paper: #f7f2ef;
    --card: #ffffff;
    --ink: #3d2c25;
    --ink-2: #6b574e;
    --ink-3: #9c8a80;
    --rule: #e6d9cf;
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Archivo, 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.015em;
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--merek);
    outline-offset: 3px;
}

.num {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.wadah {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --------------------------------------------------------------------------
   Kepala halaman — kunci logo lalu pita data

   Pita datanya diambil dari isi menu yang sebenarnya, bukan slogan: berapa
   hidangan, rentang kalorinya, di cabang mana.
   -------------------------------------------------------------------------- */

.kepala {
    padding: 54px 0 0;
    text-align: center;
}

.kunci-bob {
    display: block;
    font-size: clamp(38px, 12vw, 60px);
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 0.92;
    color: var(--merek);
}

.kunci-food {
    display: block;
    margin-top: 9px;
    font-size: clamp(10px, 3vw, 12px);
    font-weight: 600;
    letter-spacing: 0.48em;
    /* Tracking lebar menyisakan ruang di ujung kanan; digeser agar kunci
       logonya benar-benar terpusat. */
    text-indent: 0.48em;
    text-transform: uppercase;
    color: var(--merek);
    opacity: 0.72;
}

.slogan {
    max-width: 30ch;
    margin: 20px auto 0;
    font-size: 15px;
    color: var(--ink-2);
}

/* Pita data bergaya kepala panel gizi: rule tebal di atas dan bawah. */
.pita {
    margin-top: 30px;
    padding: 14px 0;
    border-top: 5px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    text-align: left;
}

.pita div + div {
    padding-left: 14px;
    border-left: 1px solid var(--rule);
}

.pita dt {
    margin-bottom: 3px;
}

.pita dd {
    margin: 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: clamp(15px, 4vw, 19px);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.pita .satuan {
    font-family: Archivo, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Navigasi kategori
   -------------------------------------------------------------------------- */

.nav-kategori {
    position: sticky;
    top: 0;
    z-index: 10;
    margin-top: 0;
    padding: 10px 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.nav-gulir {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 20px;
    max-width: 880px;
    margin: 0 auto;
}

.nav-gulir::-webkit-scrollbar {
    display: none;
}

.nav-gulir a {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.nav-gulir a:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Daftar menu
   -------------------------------------------------------------------------- */

.seksi {
    padding-top: 40px;
    /* Judul seksi tidak boleh tersembunyi di balik navigasi yang menempel. */
    scroll-margin-top: 62px;
}

.seksi-kepala {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.seksi-kepala h2 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.seksi-kepala .garis {
    flex: 1;
    height: 2px;
    background: var(--ink);
}

.seksi-kepala .jml {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--ink-3);
}

.hidangan {
    display: grid;
    gap: 0;
}

.sajian {
    padding: 15px 0;
    border-bottom: 1px solid var(--rule);
}

.sajian-baris {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.sajian-nama {
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Garis rambut penghubung nama dan harga — perangkat khas menu cetak. */
.sajian-sambung {
    flex: 1;
    height: 1px;
    min-width: 14px;
    margin-bottom: 4px;
    background: var(--rule);
}

.sajian-harga {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.sajian-bawah {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
}

.kkal {
    flex: none;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--merek-cuci);
    color: var(--merek);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.sajian-ket {
    flex: 1;
    min-width: 180px;
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
}

.sajian-cabang {
    font-size: 11px;
    color: var(--ink-3);
}

/* Foto mengisi lebar kolomnya. Hanya sebagian hidangan punya foto di menu
   resmi, dan itu dibiarkan apa adanya — baris tanpa foto sekadar lebih
   pendek, seperti menu cetak yang memotret sebagian saja. */
.sajian-foto {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-top: 11px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--rule);
}

/* --------------------------------------------------------------------------
   Kaki
   -------------------------------------------------------------------------- */

.kaki {
    margin-top: 52px;
    padding: 34px 0 44px;
    border-top: 5px solid var(--ink);
    text-align: center;
}

.ig {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 22px;
    background: var(--merek);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
}

.ig svg {
    width: 17px;
    height: 17px;
}

.kaki-catatan {
    margin: 18px 0 0;
    font-size: 11.5px;
    color: var(--ink-3);
}

.kosong {
    padding: 70px 0;
    text-align: center;
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Layar lebar — menu jadi dua kolom, seperti menu cetak terbuka
   -------------------------------------------------------------------------- */

@media (min-width: 720px) {
    .kepala {
        padding-top: 76px;
    }

    .hidangan {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
    }

    .seksi {
        padding-top: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================================
   Beranda

   Kepalanya adalah panel informasi gizi untuk restonya sendiri: seluruh menu
   diperlakukan sebagai satu produk berlabel. Bentuk itu dipinjam persis karena
   memang dari sanalah restoran ini berbeda — ia mencantumkan angka yang resto
   lain tidak cantumkan.
   ========================================================================== */

.beranda-kepala {
    padding: 46px 0 0;
}

.beranda-kunci {
    text-align: center;
}

.tagline {
    max-width: 22ch;
    margin: 26px auto 0;
    font-size: clamp(21px, 6vw, 29px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.22;
    text-align: center;
    text-wrap: balance;
}

.tagline b {
    color: var(--merek);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Panel informasi
   -------------------------------------------------------------------------- */

.panel-gizi {
    max-width: 420px;
    margin: 30px auto 0;
    padding: 0 16px 14px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.panel-gizi-judul {
    padding: 11px 0 9px;
    border-bottom: 8px solid var(--ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.gizi-baris {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rule);
}

.gizi-baris:last-child {
    border-bottom: 0;
}

.gizi-baris.tebal {
    border-bottom-width: 4px;
    border-bottom-color: var(--ink);
}

.gizi-nama {
    font-size: 13px;
    font-weight: 600;
}

.gizi-nilai {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.gizi-nilai .satuan {
    font-family: Archivo, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-3);
}

.gizi-catatan {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Aksi
   -------------------------------------------------------------------------- */

.aksi-baris {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 26px;
}

.tbl-besar {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 6px;
    font-size: 14.5px;
    font-weight: 700;
    border: 1px solid transparent;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.tbl-besar svg {
    width: 17px;
    height: 17px;
    flex: none;
}

.tbl-isi {
    background: var(--merek);
    color: #fff;
}

.tbl-isi:hover {
    background: #5b2d23;
}

.tbl-kosong {
    background: var(--card);
    border-color: var(--rule);
    color: var(--ink);
}

.tbl-kosong:hover {
    border-color: var(--ink);
}

/* --------------------------------------------------------------------------
   Bagian isi
   -------------------------------------------------------------------------- */

.bagian {
    padding-top: 52px;
}

.bagian-kepala {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.bagian-kepala h2 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.bagian-kepala .garis {
    flex: 1;
    height: 2px;
    background: var(--ink);
}

.bagian-ket {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--ink-2);
    max-width: 56ch;
}

/* Hidangan teringan — deret bertangga, dibaca seperti skala. */
.tangga {
    display: grid;
    gap: 0;
}

.anak-tangga {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--rule);
}

.anak-tangga .angka {
    flex: none;
    width: 74px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--merek);
}

.anak-tangga .angka span {
    font-family: Archivo, sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-3);
}

.anak-tangga .isi {
    flex: 1;
    min-width: 0;
}

.anak-tangga .nama {
    font-size: 15px;
    font-weight: 600;
}

.anak-tangga .kat {
    font-size: 11.5px;
    color: var(--ink-3);
}

.anak-tangga .harga {
    flex: none;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
}

/* Cara pesan — langkah bernomor, karena urutannya memang berarti. */
.langkah {
    display: grid;
    gap: 0;
    counter-reset: langkah;
}

.langkah > li {
    display: flex;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid var(--rule);
    counter-increment: langkah;
}

.langkah > li::before {
    content: counter(langkah, decimal-leading-zero);
    flex: none;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--merek);
    padding-top: 2px;
}

.langkah h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}

.langkah p {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink-2);
}

/* Cabang */
.cabang-baris {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid var(--rule);
}

.cabang-nama {
    font-size: 15.5px;
    font-weight: 600;
}

.cabang-alamat {
    font-size: 12.5px;
    color: var(--ink-3);
}

.status {
    flex: none;
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.status-buka {
    background: var(--merek-cuci);
    color: var(--merek);
}

.status-segera {
    background: var(--paper);
    border: 1px solid var(--rule);
    color: var(--ink-3);
}

@media (min-width: 720px) {
    .beranda-kepala {
        padding-top: 72px;
    }

    .langkah {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
    }
}

/* Baris pengantar di atas tagline — menyebut ini apa sebelum menyebut
   kelebihannya. */
.pengantar {
    margin: 22px 0 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.pengantar + .tagline {
    margin-top: 10px;
}