/* theme.css — satu-satunya berkas berwarna literal (TRD §2.4, §5.1).
   Isi: :root hasil ekspor, :root alias/token tangan, @font-face. */

:root {
  --color-primary: #1a1714;
  --color-secondary: #5a544c;
  --color-tertiary: #9e3b0f;
  --color-tertiary-pressed: #7e2e0b;
  --color-neutral: #f4f1ea;
  --color-on-primary: #f4f1ea;
  --color-on-tertiary: #ffffff;
  --color-surface-input: #ffffff;
  --color-neutral-0: #fbf9f4;
  --color-neutral-2: #e8e3d9;
  --color-neutral-3: #d9d3c7;
  --color-neutral-4: #c4bdb0;
  --color-neutral-5: #a8a093;
  --color-neutral-6: #857d71;
  --color-neutral-8: #302b26;
  --font-display-hero: "Fraunces";
  --font-body-md: "Archivo";
  /* Amendemen F2 (01-foundation/02-token-css → 04-interior/I1): empat token
     fluid memakai clamp dari TRD §5.5, bukan rumus baru. Skala responsif
     dimiliki layer 04-interior; lima token lain tetap satu nilai. */
  --text-display-hero: clamp(48px, 16px + 5vw, 88px);
  --text-display-2: clamp(30px, 15.6px + 2.25vw, 48px);
  --text-display-3: clamp(24px, 19.2px + 0.75vw, 30px);
  --text-price: 24px;
  --text-lead: clamp(18px, 16.4px + 0.25vw, 20px);
  --text-body-md: 18px;
  --text-body-sm: 16px;
  --text-label: 14px;
  --text-label-caps: 12px;
  --font-weight-display-2: 600;
  --font-weight-body-md: 400;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --spacing-s1: 4px;
  --spacing-s2: 8px;
  --spacing-s3: 12px;
  --spacing-s4: 16px;
  --spacing-s5: 24px;
  --spacing-s6: 32px;
  --spacing-s7: 48px;
  --spacing-s8: 64px;
  --spacing-s9: 96px;
  --spacing-s10: 128px;
}

:root {
  /* Alias semantik tipografi — nama DESIGN, nilai dari ekspor di atas.
     Line-height tidak dijadikan token: DESIGN.md tidak mendaftarkannya di
     Primitives, jadi nilainya ditulis di komponen site.css. */
  --font-display: var(--font-display-hero);
  --font-text: var(--font-body-md);
  --weight-display: var(--font-weight-display-2);
  --weight-text: var(--font-weight-body-md);

  /* Alias spacing: ekspor menulis --spacing-s*, komponen memakai --space-*. */
  --space-1: var(--spacing-s1);
  --space-2: var(--spacing-s2);
  --space-3: var(--spacing-s3);
  --space-4: var(--spacing-s4);
  --space-5: var(--spacing-s5);
  --space-6: var(--spacing-s6);
  --space-7: var(--spacing-s7);
  --space-8: var(--spacing-s8);
  --space-9: var(--spacing-s9);
  --space-10: var(--spacing-s10);

  /* Cincin fokus (DESIGN §Primitives). Warnanya per permukaan, ditulis di site.css. */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Elevasi — dua lapis, X=0, Y>0 (DESIGN §Elevation & Depth). */
  --shadow-1: 0 1px 2px rgba(26, 23, 20, .06), 0 1px 1px rgba(26, 23, 20, .04);
  --shadow-3: 0 4px 12px rgba(26, 23, 20, .10), 0 2px 4px rgba(26, 23, 20, .06);
  --shadow-5: 0 16px 40px rgba(26, 23, 20, .14), 0 6px 12px rgba(26, 23, 20, .08);

  /* Ukuran layout (DESIGN §Layout). */
  --nav-height: 64px;
  --container: 1200px;
  --page-max: 1440px;

  /* Durasi & easing (DESIGN §Motion). */
  --dur-press: 150ms;
  --dur-change: 200ms;
  --dur-menu-in: 240ms;
  --dur-menu-out: 160ms;
  --dur-enter: 360ms;
  --ease-out: cubic-bezier(.2, 0, 0, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);

  /* Z-index (C6). */
  --z-base: 0;
  --z-nav: 10;
  --z-menu: 20;
  --z-modal: 30;
  --z-toast: 40;
}

@font-face {
  font-family: "Archivo";
  src:url("/assets/fonts/archivo-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "Fraunces";
  src:url("/assets/fonts/fraunces-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- site.css --- */
/* site.css — aturan tampilan; nilai hanya dari token theme.css (TRD §5.6). */

@layer reset, base, layout, component, utility;

/* --- reset ---------------------------------------------------------------- */

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

  html {
    -webkit-text-size-adjust: 100%;
  }

  body,
  h1,
  h2,
  h3,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul[class],
  ol[class] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  img,
  picture {
    max-width: 100%;
    display: block;
  }

  button,
  input {
    font: inherit;
    color: inherit;
  }

  [hidden] {
    display: none !important;
  }
}

/* --- base ----------------------------------------------------------------- */

@layer base {
  html {
    /* sticky-cta 56px + 16px — WCAG 2.4.11, DESIGN §Layout. */
    scroll-padding-bottom: 72px;
  }

  /* I2 — gutter di atas 1440px memakai kertas, bukan putih; nav 64px jadi offset anchor. */
  html { background: var(--color-neutral); scroll-padding-top: 64px; }

  body {
    background: var(--color-neutral);
    color: var(--color-primary);
    font-family: var(--font-text);
    font-weight: var(--weight-text);
    font-size: var(--text-body-md);
    line-height: 1.55;
    padding: var(--space-6) var(--space-6);
    /* I2 — halaman maksimum 1440 (DESIGN 283); token, bukan angka. */
    max-width: var(--page-max);
    margin-inline: auto;
  }

  /* Satu aturan fokus untuk seluruh situs; cincin memakai aksen, bukan warna baru. */
  :where(a, button, input, [tabindex]):focus-visible {
    outline: var(--focus-width) solid var(--color-tertiary);
    outline-offset: var(--focus-offset);
  }

  @media (max-width: 639.98px) {
    body {
      padding: var(--space-5) var(--space-5);
    }
  }
}

/* --- layout --------------------------------------------------------------- */

@layer layout {
main { width: 100%; max-width: var(--container); margin-inline: auto; }

  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
  }

  @media (max-width: 639.98px) {
    main > section { padding-block: var(--space-8); }
  }

  /* C1 — hero split 6+6. Hanya tata letak: tipografi, jarak section, dan gaya
     tombol menyusul di layer 04 (I1, I2). */
  .hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: center;
  }

  .hero-copy {
    grid-column: span 6;
    min-width: 0;
  }

  .hero-media {
    grid-column: span 6;
  }

  .hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 30%;
    border-radius: var(--radius-md);
    background: var(--color-neutral-2);
  }

  @media (max-width: 639.98px) {
    /* 11 gap × s6 tidak muat di bawah 376px: kolom ditumpuk, bukan 12 track. */
    .hero {
      grid-template-columns: minmax(0, 1fr);
    }

    .hero-copy,
    .hero-media {
      grid-column: 1 / -1;
    }
  }

  /* I2 — ritme section lewat selektor elemen: markup tidak memakai kelas section. */
  main > section { padding-block: var(--space-9); }
  main > section:not(.hero) > * + * { margin-top: var(--space-6); }
  main > section:not(.hero) > * + h2 { margin-top: var(--space-7); }
  main > section:not(.hero) > h2 + * { margin-top: var(--space-4); }
  main > section:not(.hero) > h3 + * { margin-top: var(--space-2); }

  /* Jarak dalam hero: anak .hero-copy (C1), bukan anak langsung .hero. */
  main > section.hero { padding-block-start: var(--space-7); }
  .hero-copy > .t-hero + p { margin-top: var(--space-5); }
  .hero-copy > .hero-line + .hero-actions { margin-top: var(--space-6); }
  .hero-copy > .hero-actions + .hero-proof { margin-top: var(--space-5); }

  /* L7 — dua aksi hero: inline tanpa gap menempel jadi satu kalimat. */
  .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

  /* L7 — h1 halaman isi ke paragraf s4 (DESIGN S4). */
  main > section.page-hero > h1 + * { margin-top: var(--space-4); }

/* S4 — margin atas judul lebih besar dari margin bawah (DESIGN §Layout). */
h2 { margin-bottom: var(--space-4); }
h3 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
}

/* --- komponen ------------------------------------------------------------- */

@layer component {
  /* C2 + I2 — papan harga 8/12 kontainer + 7 gap = 792px, di tengah (UIUX §2.2). */
  .price-board { max-width: calc((var(--container) - 11 * var(--space-5)) / 12 * 8 + 7 * var(--space-5)); margin-inline: auto; }

  .price-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    border-bottom: 1px solid var(--color-neutral-3);
    padding-block: var(--space-4);
  }

  .price-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* L7 — garis hanya di antara baris, bukan di bawah baris terakhir. */
  .price-row:last-child { border-bottom: 0; }

  /* L7 — catatan harga: label secondary di dua halaman. */
  .price-note { font-size: var(--text-label); line-height: 1.4; color: var(--color-secondary); }

  .band-strong {
    background: var(--color-neutral-5);
    color: var(--color-primary);
  }

  /* I2 — DESIGN front matter: band-strong 24px; 32px milik .band. */
  .band-strong { padding: var(--space-5); }

  /* L7 — tanggal dan tautan konfirmasi dua baris. */
  .band-strong p + a { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-3); }

  /* Target sentuh 44px untuk tautan teks yang berfungsi sebagai tombol. */
  #ulasan > p > a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Target sentuh 24px (KANON) untuk tautan telepon di dalam paragraf. */
  main a[href^="tel:"] { display: inline-block; min-height: 24px; line-height: 24px; padding-block: 2px; }

  /* C3 + I2 — dua kutipan ulasan, jarak s7 (48px, UIUX §2.3). */
.reviews { display: grid; gap: var(--space-7); max-width: 66ch; }

  blockquote {
    margin: 0;
  }

  .review-meta {
    color: var(--color-secondary);
  }

  /* L7 — nama pemberi kutipan bukan lanjutan kutipan. */
  .review figcaption { margin-top: var(--space-2); }

  /* C4 — panel Academy. Permukaan + tata letak; tipografi dan tombol di layer 04. */
  .ink-panel {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--radius-lg);
  }

  /* I2 — DESIGN 286/342: panel gelap 48px, menimpa 32px dari C4. */
  .ink-panel { padding: var(--space-7); }

  /* L7 — judul, fakta, tombol di panel butuh napas. */
  .ink-panel > * + * { margin-top: var(--space-5); }

  /* L7 — enam fakta satu blok: baris s3 (UIUX §2.4). */
  .facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-3) var(--space-5);
  }

  .ink-panel dt {
    color: var(--color-neutral-4);
  }

  /* C5 — pratinjau pesan reservasi. Hanya tata letak; warna state milik I3. */
  .signature-preview {
    background: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-3);
    border-radius: var(--radius-md);
    padding: var(--space-5);
  }

  .preview-value { color: var(--color-primary); display: inline-block; }

  .preview-line {
    font-variant-numeric: tabular-nums;
  }

  /* L7 — empat baris pratinjau adalah daftar. */
  .signature-preview .preview-line + .preview-line { margin-top: var(--space-1); }

  /* C7 — lokasi: dua kolom setara, tanpa peta. Hanya tata letak. */
  .location {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .location-col {
    grid-column: span 6;
    min-width: 0;
  }

  /* L7 — isi kolom lokasi: alamat, patokan, jam terpisah. */
  .location-col > * + * { margin-top: var(--space-3); }
  .location-col > * + h2 { margin-top: var(--space-6); }

  @media (max-width: 639.98px) {
    /* 11 gap × s6 tidak muat: kolom ditumpuk, bukan 12 track. */
    .location {
      grid-template-columns: minmax(0, 1fr);
    }

    .location-col {
      grid-column: 1 / -1;
    }
  }

  /* C8 — wadah halaman isi. Hanya tata letak: warna dan tipe milik layer 04. */
  .cols-2 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .cols-2 > div {
    grid-column: span 6;
    min-width: 0;
  }

  .prose {
    max-width: 66ch;
  }

  .academy-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 480px));
    gap: var(--space-5);
  }

  .academy-cards img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
  }

  @media (max-width: 639.98px) {
    .cols-2 {
      grid-template-columns: minmax(0, 1fr);
    }

    .cols-2 > div {
      grid-column: 1 / -1;
    }

    .academy-cards {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* C9 + I1 — sembilan kelas peran tipografi. Ukuran, bobot, dan keluarga
     seluruhnya dari token theme.css; tidak ada nilai baru di sini.
     Kelas dipasang di markup sebagai class tambahan, bukan elemen baru. */
  h1, h2, .t-hero, .t-2, .t-3 { font-family: var(--font-display); font-weight: var(--weight-display); }
  .wordmark { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-body-md); }

  .t-hero { font-size: var(--text-display-hero); line-height: .98; letter-spacing: -.03em; }
  .t-2 { font-size: var(--text-display-2); line-height: 1.05; letter-spacing: -.025em; }
  .t-3 { font-size: var(--text-display-3); line-height: 1.15; letter-spacing: -.02em; }
  .t-price { font-size: var(--text-price); line-height: 1.2; font-variant-numeric: tabular-nums; }
  .t-label { font-size: var(--text-label); line-height: 1.4; }
  .t-body-sm { font-size: var(--text-body-sm); }
  .t-caps { font-size: var(--text-label-caps); line-height: 1.4; letter-spacing: .04em; }

  /* lead 20px hanya di dua rute; aturan lepas akan membocorkannya ke enam halaman. */
  body[data-route="tentang"] .t-lead,
  body[data-route="kursus-barber"] .t-lead { font-size: var(--text-lead); line-height: 1.5; }

  /* L7 — UIUX §2.1: alamat secondary, bukti label 14px. */
  .hero-line { color: var(--color-secondary); }
  .hero-proof { font-size: var(--text-label); line-height: 1.4; color: var(--color-secondary); }

  /* T7: paragraf tidak pernah selebar kontainer. */
  p, li, blockquote { max-width: 66ch; }

  /* A5: input desktop 18px, mobile 16px — task ini pemilik font-size input. */
  input { font-size: var(--text-body-md); }

  @media (max-width: 639.98px) {
    .t-hero { line-height: 1.02; letter-spacing: -.02em; }
    .t-2 { line-height: 1.1; letter-spacing: -.02em; }
    .price-row .price-name { font-size: var(--text-body-md); }
    .price-row .t-3 { font-size: var(--text-body-md); line-height: 1.55; }
    input { font-size: var(--text-body-sm); }
  }

  /* I2 — footer 48px (DESIGN 286); tombol kirim 16px dari isian terakhir. */
  .site-footer { padding: var(--space-7); }
  .reserve-form > button { margin-top: var(--space-4); }

  /* ------------------------------------------------------------------------
     I3 — state komponen. Tanpa bayangan, tanpa transisi warna: perubahan
     state terjadi seketika (DESIGN Motion); satu-satunya gerak adalah
     keyframes pratinjau di bawah.
     ------------------------------------------------------------------------ */

  /* display:inline-flex wajib: CTA dipasang pada <a> (C1) dan height diabaikan
     pada elemen inline — tanpa ini tombol tampil sebagai teks 18px bergaris. */
  .button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: var(--text-label);
    line-height: 1.4;
    background: var(--color-tertiary);
    color: var(--color-on-tertiary);
    height: 48px;
    padding: 0 var(--space-5);
    border-radius: var(--radius-sm);
    border: 0;
  }

  .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: var(--text-label);
    line-height: 1.4;
    background: var(--color-neutral);
    color: var(--color-primary);
    border: 1px solid var(--color-neutral-6);
    height: 48px;
    padding: 0 var(--space-5);
    border-radius: var(--radius-sm);
  }

  /* Isian: tanpa state error — tidak ada validasi selain "terisi". */
  input {
    background: var(--color-surface-input);
    color: var(--color-primary);
    border: 1px solid var(--color-neutral-6);
    height: 48px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
  }

  input::placeholder { color: var(--color-secondary); }

  .reserve-form label { color: var(--color-secondary); font-size: var(--text-label); }

  /* Tautan teks: di dalam paragraf selalu bergaris bawah, bukan warna saja. */
  main p a { color: var(--color-tertiary); text-decoration: underline; }

  /* Papan harga: tautan baris mulai dari secondary, barisnya tidak menyala. */
  .price-row a { color: var(--color-secondary); }

  /* Band neutral-5: tautan memakai primary + garis bawah; tertiary 2,63:1 di sini. */
  .band-strong a { color: var(--color-primary); text-decoration: underline; }

  /* Pratinjau: label secondary, nilai primary, titik kosong neutral-6.
     Titik dan nilai satu elemen, jadi pembedanya atribut — bukan warna teks. */
  .signature-preview .t-caps { color: var(--color-secondary); }
  .preview-value[data-empty="true"] { color: var(--color-neutral-6); }
  .preview-value.is-changing { animation: preview-change var(--dur-change) var(--ease-out); }

  @keyframes preview-change { from { opacity: .6; transform: translateY(2px); } to { opacity: 1; transform: none; } }

  /* Hover hanya di perangkat berpenunjuk halus; sentuh tidak punya hover menempel. */
  @media (hover: hover) and (pointer: fine) {
    .button-primary:not(:disabled):hover { background: var(--color-tertiary-pressed); }
    .button-secondary:not(:disabled):hover { background: var(--color-neutral-2); }
    .price-row a:hover { color: var(--color-tertiary); }
    main p a:hover { color: var(--color-tertiary-pressed); }
    .site-footer a:hover { color: var(--color-neutral-4); }
    .menu-toggle:hover { background: var(--color-neutral-2); }
    .site-header nav a:hover { color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-neutral-6); }
  }

  .button-primary:active { transform: translateY(1px); background: var(--color-tertiary-pressed); }
  .button-secondary:active { background: var(--color-neutral-3); }
  .button-primary:disabled { background: var(--color-neutral-3); color: var(--color-secondary); cursor: not-allowed; }
  .button-secondary:disabled { background: var(--color-neutral); color: var(--color-secondary); border-color: var(--color-neutral-3); cursor: not-allowed; }

  /* Footer satu-satunya permukaan neutral-8; tautannya on-primary, bukan tertiary. */
  .site-footer { background: var(--color-neutral-8); color: var(--color-on-primary); font-size: var(--text-label); }
  /* L7 — footer tiga kelompok: grid, bukan tumpukan. */
  .footer-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
  .footer-contact { grid-column: span 2; }
  .footer-contact p + p { margin-top: var(--space-2); }
  .footer-inner nav { display: grid; justify-items: start; align-content: start; gap: var(--space-1); }
  .footer-meta { grid-column: 1 / -1; }

  @media (max-width: 639.98px) {
    .footer-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .footer-contact { grid-column: 1 / -1; }
  }
  .site-footer a { color: var(--color-on-primary); text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; }
  .footer-meta { color: var(--color-neutral-4); font-size: var(--text-label); }

  /* Focus per permukaan: hanya warna cincin yang di-override, outline milik S5. */
  .ink-panel :where(a, button, input, [tabindex]):focus-visible { outline-color: var(--color-on-primary); }
  .band-strong :where(a, button, input, [tabindex]):focus-visible { outline-color: var(--color-primary); }
  footer :where(a, button, input, [tabindex]):focus-visible { outline-color: var(--color-on-primary); }

  ::selection { background: var(--color-neutral-3); color: var(--color-primary); }

  /* ------------------------------------------------------------------------
     I4 — nav dua keadaan, menu mobile, sticky CTA.
     ------------------------------------------------------------------------ */

.site-header { position: sticky; top: 0; z-index: var(--z-nav); height: var(--nav-height); background: var(--color-neutral); border-bottom: 1px solid transparent; }
  /* I4 — warna dasar tautan header; tanpa ini tautan memakai biru + underline UA. */
  .site-header nav a,
  .site-header .wordmark { color: var(--color-primary); text-decoration: none; }

  /* L7 — nav flex + dorong kanan; tanpa ini empat tautan menempel jadi satu kata. */
  .site-header nav { display: flex; align-items: center; gap: var(--space-4); margin-inline-start: auto; }
  .site-header nav a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Halaman aktif: garis rambut, bukan warna kedua — nav tetap tenang. */
  .site-header nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-neutral-6); text-underline-offset: 6px; }
  .site-header[data-scrolled="true"] { border-bottom-color: var(--color-neutral-6); }

.header-inner { display: flex; align-items: center; gap: var(--space-5); height: var(--nav-height); max-width: var(--container); margin-inline: auto; padding-inline: 0; }

  .menu-toggle { display: none; min-width: 44px; min-height: 44px; font-size: var(--text-label); color: var(--color-primary); background: transparent; border: 1px solid var(--color-neutral-6); border-radius: var(--radius-sm); }

  /* Satu-satunya elevasi di situs (DESIGN: level 3). */
  .menu-sheet {
    position: absolute;
    top: var(--nav-height);
    inset-inline: var(--space-5);
    background: var(--color-neutral);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    z-index: var(--z-menu);
    box-shadow: var(--shadow-3);
  }

  .menu-sheet a { display: flex; align-items: center; min-height: 48px; font-size: var(--text-body-md); color: var(--color-primary); border-bottom: 1px solid var(--color-neutral-3); }
  /* L7 — item terakhir tidak butuh garis pemisah. */
  .menu-sheet a:last-child { border-bottom: 0; }
  .menu-sheet:not([hidden]) { animation: menu-in var(--dur-menu-in) var(--ease-out); }
  .menu-sheet.is-closing { animation: menu-out var(--dur-menu-out) var(--ease-in) forwards; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
  @keyframes menu-out { to { opacity: 0; transform: translateY(-4px); } }
  .menu-sheet[hidden] { display: none; }

.sticky-cta { display: none; }

  @media (max-width: 639.98px) {
    .site-header nav[aria-label="Navigasi utama"] { display: none; }
    .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }

    .sticky-cta {
      display: block;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      min-height: calc(56px + env(safe-area-inset-bottom));
      background: var(--color-neutral);
      border-top: 1px solid var(--color-neutral-6);
      padding: 0 var(--space-5) env(safe-area-inset-bottom);
      z-index: var(--z-nav);
    }

    .sticky-cta .button-primary { width: 100%; }
  }

  /* Satu aksen per layar: tombol hero turun kelas saat hero keluar viewport. */
  .hero-actions .button-primary[data-accent="off"] { background: var(--color-neutral); color: var(--color-primary); border: 1px solid var(--color-neutral-6); }

  /* ------------------------------------------------------------------------
     I5 — form reservasi 6/12 + pratinjau 6/12 di >=640px (UIUX §2.5),
     satu kolom di bawahnya. Markup tidak berubah.
     ------------------------------------------------------------------------ */
  .reserve-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
  .reserve-form > p { grid-column: 1 / span 6; }
  .reserve-form label { display: block; margin-bottom: var(--space-2); }
  .reserve-form input { width: 100%; }
  .reserve-form > .signature-preview { grid-column: 7 / span 6; grid-row: 1 / span 4; }
  .reserve-form > button, .reserve-form > noscript { grid-column: 1 / -1; }

  @media (max-width: 639.98px) {
    .reserve-form { grid-template-columns: minmax(0, 1fr); }

    .reserve-form > p,
    .reserve-form > .signature-preview,
    .reserve-form > button,
    .reserve-form > noscript { grid-column: 1 / -1; grid-row: auto; }
  }

  /* 420px tetap menampilkan tombol; yang hilang hanya di bawahnya. */
  @media (max-width: 419.98px) {
    .nav-cta { display: none; }
  }
}

/* --- utilitas ------------------------------------------------------------- */

@layer utility {
  .skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    background: var(--color-neutral);
    color: var(--color-primary);
    text-decoration: none;
    transform: translateY(-120%);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }
}

/* --- reduced motion (aturan terakhir, TRD §5.6) ----------------------------
   Ditulis di luar @layer supaya menang atas aturan komponen tanpa memakai
   penanda prioritas.
   Lapis 1: token durasi jadi nol, dipakai semua transisi komponen.
   Lapis 2: jaring pengaman untuk transisi/animasi yang menulis durasi sendiri. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: .01ms;
    --dur-change: .01ms;
    --dur-menu-in: .01ms;
    --dur-menu-out: .01ms;
    --dur-enter: .01ms;
  }

  *, *::before, *::after {
    transition-duration: .01ms;
    animation-duration: .01ms;
  }
}