/* ==========================================================================
   BARBERTECH × B&T COFFEE
   --------------------------------------------------------------------------
   Nilai di berkas ini diambil dari pengukuran langsung fortiscircle.id,
   PALET: hitam, abu, putih saja. Aksen hijau dibuang atas permintaan
   pemilik; peran aksen sekarang dipegang putih murni (#fff) yang
   dibedakan dari teks badan (#fafafa) lewat bobot dan ukuran, bukan
   warna. Foto tetap berwarna penuh, yang dimonokromkan hanya tampilan
   antarmukanya.
   bukan dikira kira: dasar #1f1f1f, pil navigasi
   radius 20px dengan blur 10px, kartu radius 28px padding 36px bertepi
   tombol pil dengan pendar, jarak bagian 96px, headline
   Anton rata tengah.

   Isinya diadaptasi untuk barbershop dan coffee shop dalam satu lokasi.
   ========================================================================== */

:root {
  /* --- tangga abu -------------------------------------------------------
     Palet lama cuma punya dua nada abu, jadi semua yang bukan hitam dan
     bukan putih terpaksa memakai nada yang sama dan halamannya terasa
     rata. Sekarang tangganya sepuluh anak, dari hampir hitam ke hampir
     putih, supaya tiap lapis punya nadanya sendiri. */
  --abu-05: #242424;
  --abu-10: #2c2c2c;
  --abu-15: #343434;
  --abu-20: #3c3c3c;
  --abu-30: #383838;
  --abu-40: #4d4d4d;
  --abu-60: #8f8f8f;
  --abu-80: #cfcfcf;

  --hitam: #1f1f1f;
  --hitam-2: #272727;
  --hitam-3: var(--abu-20);
  --kartu: #2b2b2b;
  --putih: #fafafa;
  --abu: #a8a8a8;          /* 6,9:1 di dasar, 5,2:1 di ujung terang gradasi */
  --abu-2: #c4c4c4;        /* 12,3:1 */

  /* --- gradasi, supaya peralihan hitam ke putih tidak mendadak --------- */
  --gradasi-gelap: linear-gradient(180deg, var(--hitam) 0%, var(--abu-10) 42%, var(--abu-05) 72%, var(--hitam) 100%);
  --gradasi-naik:  linear-gradient(180deg, var(--hitam) 0%, var(--abu-15) 100%);
  --gradasi-turun: linear-gradient(180deg, var(--abu-15) 0%, var(--hitam) 100%);
  --gradasi-kartu: linear-gradient(160deg, var(--abu-15) 0%, var(--kartu) 58%, var(--hitam-2) 100%);
  --gradasi-terang: linear-gradient(180deg, #fbfbfb 0%, #ededed 55%, #e3e3e3 100%);
  --cahaya-atas: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,0.055), transparent 62%);

  --aksen: #ffffff;        /* 11,1:1 di dasar */
  --aksen-terang: #ffffff;
  --aksen-redup: #c4c4c4;
  --garis-aksen: rgba(255, 255, 255, 0.30);
  --aksen-kabut: rgba(255, 255, 255, 0.07);
  --pendar: 0 0 24px rgba(255, 255, 255, 0.4);

  --garis: rgba(250, 250, 250, 0.14);
  --garis-kuat: rgba(250, 250, 250, 0.26);

  --r-kartu: 28px;
  --r-pil: 999px;
  --r-nav: 20px;
  --r-kecil: 14px;

  --kolom: 1140px;
  --tepi: clamp(1.25rem, 4vw, 2.5rem);
  --jarak: clamp(4rem, 9vw, 6rem);

  --judul: "Anton", "Arial Narrow", sans-serif;
  --badan: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --laju: cubic-bezier(0.22, 0.61, 0.36, 1);
  --laju-keluar: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
body {
  margin: 0;
  background: var(--hitam);
  color: var(--putih);
  font-family: var(--badan);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* height:auto WAJIB di sini. Atribut width dan height di HTML masuk
   sebagai petunjuk gaya, dan petunjuk itu MENGALAHKAN aspect-ratio selama
   height belum dinyatakan auto. Tanpa baris ini foto tentang berdiri
   setinggi 2000 piksel apa adanya. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.wadah { width: 100%; max-width: var(--kolom); margin-inline: auto; padding-inline: var(--tepi); }
.sembunyi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lompat {
  position: fixed; left: -9999px; top: 0; z-index: 999;
  background: var(--aksen); color: #0a0a0a; padding: 0.8rem 1.3rem;
  font-weight: 700; border-radius: 0 0 var(--r-kecil) 0;
}
.lompat:focus { left: 0; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--aksen); outline-offset: 3px; border-radius: 6px;
}
::selection { background: var(--aksen); color: #0a0a0a; }

/* ---------------------------------------------------------------- huruf --- */
/* Anton HANYA untuk judul hero. Diukur di referensi: h1 Anton 78px huruf
   besar, tapi SETIAP h2 dan h3 di sana memakai Onest tebal huruf biasa
   (36px dan 45px untuk h2, 26px untuk h3). Memakai Anton di semua judul
   adalah kesalahan saya, dan itu yang membuat hurufnya tidak match. */
.j-xl {
  font-family: var(--judul);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.004em;
  font-size: clamp(2rem, 5.6vw, 4.875rem);   /* 78px di 1440, 32px di 375 */
}
.j-l, .j-m, .j-s {
  font-family: var(--badan);
  text-transform: none;
  letter-spacing: -0.015em;
}
.j-l { font-weight: 700; font-size: clamp(1.625rem, 2.5vw, 2.25rem); line-height: 1.25; }  /* 36px di 1440 */
.j-m { font-weight: 800; font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.12; }  /* 26px di 1440 */
.j-s { font-weight: 800; font-size: clamp(1.125rem, 1.45vw, 1.3rem); line-height: 1.2; }

/* Satu ukuran lebih besar untuk momen penting, mengikuti 45px di referensi. */
.j-l--besar { font-size: clamp(1.875rem, 3.1vw, 2.8125rem); line-height: 1.28; }

.label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--aksen);
}
.label::before { content: ""; width: 1.5rem; height: 1px; background: var(--aksen); opacity: 0.6; }
.label--tengah { justify-content: center; }
.teks { color: var(--abu-2); font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.75; }
.teks--kecil { font-size: 0.875rem; color: var(--abu); line-height: 1.7; }
.aksen { color: var(--aksen); }

/* Kepala bagian: rata tengah, persis seperti referensi. */
.kepala-bagian { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }
.kepala-bagian h2 { margin: 1rem 0 0; }
.kepala-bagian .teks { margin-top: 1.1rem; }

/* --------------------------------------------------------------- tombol --- */
.tbl {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 46px; padding: 0.75rem 1.75rem;
  border-radius: var(--r-pil); border: 1px solid transparent;
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, var(--aksen) 0%, var(--aksen-redup) 100%);
  color: #0a0a0a;
  box-shadow: var(--pendar);
  transition: transform 0.22s var(--laju), box-shadow 0.3s var(--laju), background 0.25s var(--laju);
}
.tbl:hover { transform: scale(1.02); box-shadow: 0 0 34px rgba(255, 255, 255, 0.55); }
.tbl:active { transform: scale(0.99); }
.tbl svg { width: 18px; height: 18px; flex: none; }
.tbl--garis {
  background: transparent; color: var(--putih);
  border-color: var(--garis-kuat); box-shadow: none;
}
.tbl--garis:hover { border-color: var(--aksen); color: var(--aksen); box-shadow: none; background: var(--aksen-kabut); }
.tbl--kecil { min-height: 46px; padding: 0.55rem 1.15rem; font-size: 0.875rem; }
.tbl--lebar { width: 100%; }

/* ----------------------------------------------------------------- ikon --- */
.ikon { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none;
        stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ikon--besar { width: 32px; height: 32px; }

/* ---------------------------------------------------------------- kartu --- */
.kartu {
  background: var(--kartu);
  border: 1px solid var(--garis-aksen);
  border-radius: var(--r-kartu);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: border-color 0.3s var(--laju), transform 0.35s var(--laju-keluar), box-shadow 0.35s var(--laju);
}
.kartu:hover { border-color: var(--aksen); transform: translateY(-4px); box-shadow: 0 0 40px rgba(255, 255, 255, 0.14); }

/* --------------------------------------------------------------- bagian --- */
.bagian { padding-block: var(--jarak); position: relative; }
.bagian--padat { padding-block: clamp(3rem, 6vw, 4.5rem); }
.bagian + .bagian { border-top: 1px solid rgba(250,250,250,0.06); }

/* ==========================================================================
   A. NAVBAR — pil mengambang
   Ukuran diambil dari referensi: radius 20px, blur 10px, jarak atas 32px.
   ========================================================================== */
.nav { position: fixed; inset: 1.25rem 0 auto 0; z-index: 80; padding-inline: var(--tepi); pointer-events: none; }
.nav__pil {
  pointer-events: auto;
  display: flex; align-items: center; gap: 1.25rem;
  max-width: var(--kolom); margin-inline: auto;
  padding: 0.6rem 0.7rem 0.6rem 1.35rem;
  border-radius: var(--r-nav);
  background: rgba(12, 14, 13, 0.72);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(250, 250, 250, 0.08);
  transition: background 0.3s var(--laju), border-color 0.3s var(--laju);
}
.nav.turun .nav__pil { background: rgba(8, 9, 9, 0.9); border-color: var(--garis-aksen); }
.nav__logo { display: flex; align-items: center; flex: none; text-decoration: none; min-height: 48px; padding-right: 0.75rem; }
.nav__logo img { height: 3rem; width: auto; filter: brightness(0) invert(1); }
.nav__tautan { display: flex; align-items: center; gap: 1.35rem; margin-left: auto; }
.nav__tautan a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 46px;
  font-size: 0.9375rem; font-weight: 500; color: var(--abu-2); text-decoration: none;
  position: relative; transition: color 0.2s var(--laju);
}
.nav__tautan a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0.65rem; height: 1px;
  background: var(--aksen); transition: right 0.3s var(--laju);
}
.nav__tautan a:hover { color: var(--putih); }
.nav__tautan a:hover::after { right: 0; }
.nav .tbl { flex: none; }
.nav__burger { display: none; }

@media (max-width: 62rem) {
  .nav__tautan, .nav > .nav__pil > .tbl { display: none; }
  .nav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px;
    background: transparent; border: 1px solid var(--garis); border-radius: var(--r-pil);
    cursor: pointer;
  }
  .nav__burger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }
  .nav__burger .tutup { display: none; }
  .nav__burger[aria-expanded="true"] .buka { display: none; }
  .nav__burger[aria-expanded="true"] .tutup { display: block; }

  /* Laci: turun dari pil, bukan menutupi layar penuh, supaya tetap terasa
     ringan dan mudah ditutup dengan satu tangan. */
  .laci {
    pointer-events: auto;
    max-width: var(--kolom); margin: 0.5rem auto 0;
    border-radius: var(--r-nav);
    background: rgba(8, 9, 9, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--garis-aksen);
    padding: 0.5rem;
    display: grid; gap: 0.15rem;
    opacity: 0; transform: translateY(-8px) scale(0.985); transform-origin: top center;
    visibility: hidden;
    transition: opacity 0.26s var(--laju), transform 0.26s var(--laju-keluar), visibility 0.26s;
  }
  .laci.buka { opacity: 1; transform: none; visibility: visible; }
  .laci a {
    display: flex; align-items: center; gap: 0.75rem; min-height: 48px;
    padding: 0.6rem 0.9rem; border-radius: var(--r-kecil);
    text-decoration: none; font-size: 1.0625rem; font-weight: 500;
  }
  .laci a:hover, .laci a:focus-visible { background: var(--aksen-kabut); color: var(--aksen); }
  .laci .tbl { margin-top: 0.5rem; }
}
@media (min-width: 62.01rem) { .laci { display: none; } }

/* ==========================================================================
   B. HERO
   Komposisi referensi: foto penuh dengan tabir, label kecil, headline Anton
   rata tengah, satu kalimat, dua tombol, lalu keping keping melayang.
   ========================================================================== */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; padding-block: 8rem 3rem; }
.hero__foto { position: absolute; inset: 0; z-index: 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.14) saturate(1.05); }
.hero__foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(66% 58% at 50% 42%, rgba(31, 31, 31, 0.3), rgba(31, 31, 31, 0.8) 100%),
    linear-gradient(180deg, rgba(31, 31, 31, 0.82) 0%, rgba(31, 31, 31, 0.2) 32%, rgba(31, 31, 31, 0.7) 76%, var(--hitam) 100%);
}
/* Kabut putih tipis, seperti pendar di referensi. */
.hero__kabut {
  position: absolute; z-index: 1; left: 50%; top: 46%;
  width: min(60rem, 130%); aspect-ratio: 1.6;
  transform: translate(-50%, -50%);
  background: radial-gradient(42% 42% at 50% 50%, rgba(255, 255, 255, 0.16), transparent 70%);
  pointer-events: none;
  animation: nafas 10s ease-in-out infinite;
}
@keyframes nafas { 0%,100%{opacity:.75; transform:translate(-50%,-50%) scale(1)} 50%{opacity:1; transform:translate(-50%,-52%) scale(1.07)} }

.hero__isi { position: relative; z-index: 3; text-align: center; }
.hero__isi h1 {
  margin: 1.1rem auto 0;
  /* 17ch dibuat untuk judul lama yang barisnya pendek. Judul sekarang
     baris terpanjangnya 22 karakter dan butuh ~18,3ch, jadi dilonggarkan. */
  max-width: 19.5ch;
}
.hero__isi h1 em { font-style: normal; color: var(--aksen); }
.hero__teks { margin: 1.35rem auto 0; max-width: 46ch; }
.hero__aksi { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; }
.hero__catatan { margin-top: 1rem; font-size: 0.8125rem; color: var(--abu); }

/* Keping melayang: dua di kiri, dua di kanan, hanya pada layar lebar.
   Ditambatkan ke TEPI supaya tidak pernah menutupi judul atau tombol. */
.kepingan { position: absolute; inset: 7.5rem 0 7rem; z-index: 2; pointer-events: none; }
.keping {
  position: absolute; top: var(--y); display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1rem; border-radius: var(--r-pil);
  background: rgba(10, 12, 11, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--garis-aksen);
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
  transform: translateY(-50%);
  animation: apung var(--t, 7s) ease-in-out var(--d, 0s) infinite;
}
.keping--ki { left: var(--x); }
.keping--ka { right: var(--x); }
.keping b { color: var(--aksen); font-weight: 700; }
.keping .ikon { width: 16px; height: 16px; color: var(--aksen); }
@keyframes apung { 0%,100%{transform:translateY(-50%)} 50%{transform:translateY(calc(-50% - 12px))} }
@media (max-width: 68rem) { .keping[data-opsi="2"] { display: none; } }
@media (max-width: 56rem) {
  .kepingan { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.75rem; }
  .keping { position: static; transform: none; animation: none; font-size: 0.75rem; padding: 0.45rem 0.8rem; }
}

/* Grafik dekoratif gunting dan biji kopi di sekitar hero. Ditaruh jauh di
   tepi atas dan bawah, tidak pernah di jalur judul maupun tombol. */
.hiasan { position: absolute; z-index: 1; color: var(--aksen); opacity: 0.16; pointer-events: none; }
.hiasan svg { width: 100%; height: auto; stroke: currentColor; fill: none; stroke-width: 1.2; }
.hiasan--1 { left: 4%; top: 18%; width: clamp(3.5rem, 7vw, 6.5rem); transform: rotate(-18deg); animation: ayun 13s ease-in-out infinite; }
.hiasan--2 { right: 5%; top: 24%; width: clamp(3rem, 6vw, 5.5rem); transform: rotate(14deg); animation: ayun 16s ease-in-out infinite reverse; }
.hiasan--3 { right: 11%; bottom: 13%; width: clamp(2.75rem, 5vw, 4.5rem); transform: rotate(-8deg); animation: ayun 11s ease-in-out infinite; }
.hiasan--4 { left: 9%; bottom: 16%; width: clamp(2.5rem, 4.5vw, 4rem); transform: rotate(22deg); animation: ayun 15s ease-in-out infinite reverse; }
@keyframes ayun { 0%,100%{translate:0 0} 50%{translate:0 -14px} }
@media (max-width: 56rem) { .hiasan--2, .hiasan--4 { display: none; } .hiasan { opacity: 0.1; } }

/* ==========================================================================
   C. TENTANG KAMI — foto bertumpuk + cerita
   ========================================================================== */
.tentang__petak { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.tentang__foto { position: relative; }
.tentang__foto img { border-radius: var(--r-kartu); width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.tentang__sisip {
  position: absolute; right: -1.25rem; bottom: -1.75rem; width: 52%;
  border-radius: var(--r-kecil); overflow: hidden;
  border: 3px solid var(--hitam); box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.tentang__sisip img { aspect-ratio: 4/3; object-fit: cover; border-radius: 0; }
.tentang__isi h2 { margin: 1rem 0 1.25rem; }
.tentang__poin { display: grid; gap: 1rem; margin-top: 1.75rem; }
.tentang__poin li { display: flex; gap: 0.9rem; align-items: flex-start; }
.tentang__poin .ikon { color: var(--aksen); margin-top: 0.15rem; }
.tentang__poin b { display: block; font-weight: 700; }
.tentang__poin span { color: var(--abu); font-size: 0.9375rem; }
.tentang__angka { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--garis); }
.tentang__angka b { display: block; font-family: var(--judul); font-size: clamp(1.75rem,3.4vw,2.5rem); color: var(--aksen); line-height: 1; }
.tentang__angka span { font-size: 0.8125rem; color: var(--abu); }
@media (max-width: 62rem) {
  .tentang__petak { grid-template-columns: minmax(0,1fr); }
  .tentang__sisip { right: 1rem; bottom: -1.25rem; width: 44%; }
}

/* ==========================================================================
   D. BARBERSHOP — layanan berkartu + pita hasil potongan
   ========================================================================== */
.layanan { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.layanan .kartu { display: flex; flex-direction: column; }
.layanan__atas { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.layanan .ikon--besar { color: var(--aksen); }
.layanan__durasi { font-size: 0.75rem; font-weight: 600; color: var(--abu); border: 1px solid var(--garis); border-radius: var(--r-pil); padding: 0.25rem 0.7rem; white-space: nowrap; }
.layanan h3 { margin: 1.25rem 0 0.6rem; }
.layanan p { color: var(--abu); font-size: 0.9375rem; flex: 1; }
.layanan__harga { font-family: var(--judul); font-size: clamp(1.5rem,2.6vw,2rem); color: var(--aksen); margin: 1.25rem 0 1.1rem; }
.layanan--utama { border-color: var(--aksen); box-shadow: 0 0 46px rgba(255, 255, 255, 0.14); }
.layanan__cap {
  position: absolute; top: -0.7rem; left: clamp(1.5rem,3vw,2.25rem);
  background: var(--aksen); color: #0a0a0a; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 0.22rem 0.65rem; border-radius: var(--r-pil);
}
.layanan .kartu { position: relative; }
.layanan__sisa { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(0.75rem,1.6vw,1rem); margin-top: clamp(0.75rem,1.6vw,1rem); }
.layanan__sisa div { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; border: 1px solid var(--garis); border-radius: var(--r-kecil); padding: 1rem 1.25rem; }
.layanan__sisa b { font-weight: 700; }
.layanan__sisa i { font-style: normal; font-size: 0.75rem; color: var(--abu); }
.layanan__sisa span { margin-left: auto; font-weight: 700; color: var(--aksen); }
@media (max-width: 62rem) { .layanan { grid-template-columns: minmax(0,1fr); } .layanan__sisa { grid-template-columns: minmax(0,1fr); } }

.hasil-pita { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0.75rem; margin-top: clamp(2rem,4vw,3rem); }
.hasil-pita figure { margin: 0; border-radius: var(--r-kecil); overflow: hidden; position: relative; }
.hasil-pita img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 0.7s var(--laju-keluar); }
.hasil-pita figure:hover img { transform: scale(1.05); }
.hasil-pita figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 0.9rem 0.7rem;
  background: linear-gradient(180deg, transparent, rgba(24, 24, 24, 0.88));
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--putih);
}
@media (max-width: 44rem) { .hasil-pita { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ==========================================================================
   E. COFFEE SHOP
   --------------------------------------------------------------------------
   Bentuk lama: kolase lima foto menempel di kiri, daftar harga polos di
   kanan. Daftarnya terbaca seperti lembar kerja, dan fotonya tidak ada
   hubungannya dengan daftar yang sedang dibuka.
   Bentuk baru tiga lapis: baris geser menu terlaris, lalu papan menu yang
   fotonya ikut berganti tiap tab ditekan, lalu daftar harga dua kolom
   dengan titik titik penyambung seperti papan menu kafe sungguhan.
   ========================================================================== */
.kopi { background: linear-gradient(180deg, var(--hitam) 0%, var(--hitam-2) 50%, var(--hitam) 100%); }

/* --- lapis 1: baris geser menu terlaris --------------------------------- */
.unggul { margin: clamp(2rem,4vw,3rem) 0 clamp(2.5rem,5vw,4rem); }
.unggul__kepala { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline;
  justify-content: space-between; margin-bottom: clamp(1rem,2vw,1.5rem); }
.unggul__kepala .teks--kecil { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.unggul__kepala .ikon { width: 15px; height: 15px; color: var(--aksen); }
.unggul__rel {
  display: flex; gap: clamp(0.75rem, 1.6vw, 1.1rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2.5rem calc((100vw - min(var(--kolom), 100vw - var(--tepi) * 2)) / 2) 1.5rem;
  scroll-padding-inline: calc((100vw - min(var(--kolom), 100vw - var(--tepi) * 2)) / 2);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.unggul__rel::-webkit-scrollbar { display: none; }
.unggul__rel:focus-visible { outline: 2px solid var(--aksen); outline-offset: -4px; border-radius: var(--r-kecil); }
.unggul__kartu {
  flex: 0 0 clamp(14rem, 21vw, 17rem); scroll-snap-align: start;
  border: 1px solid var(--garis); border-radius: var(--r-kartu); overflow: hidden;
  background: var(--kartu); display: flex; flex-direction: column;
  transition: border-color 0.3s var(--laju), transform 0.4s var(--laju-keluar);
}
.unggul__kartu { overflow: visible; }
.unggul__kartu:hover { border-color: var(--garis-aksen); transform: translateY(-4px); }
/* Panggung, bukan kotak foto. Karena latar hidangannya sudah dipotong,
   ia bisa mengambang bebas di atas pendar, dan bayangannya mengikuti
   bentuk aslinya lewat drop-shadow, bukan kotak persegi. */
.unggul__pentas {
  position: relative; height: clamp(10.5rem, 16vw, 12.75rem); margin-top: -1.75rem;
  display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  place-items: center; padding: 0.5rem 0.75rem 0;
}
.unggul__pentas::before {
  content: ""; position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: 118%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06) 52%, transparent 72%);
}
.unggul__pentas img {
  position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto;
  min-width: 0; min-height: 0; object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,0.68));
  transition: transform 0.55s var(--laju-keluar);
}
.unggul__kartu:hover .unggul__pentas img { transform: scale(1.07) rotate(-2deg); }
.unggul__isi { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.unggul__gol { font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aksen); font-weight: 700; }
.unggul__isi h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.unggul__isi p { font-size: 0.8125rem; color: var(--abu); flex: 1; }
.unggul__isi b { font-family: var(--judul); font-size: 1.375rem; color: var(--putih); letter-spacing: 0.01em; margin-top: 0.5rem; }

/* --- lapis 2: papan menu, foto berganti mengikuti tab -------------------- */
.papan { display: grid; grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.25rem); align-items: start; }
.papan__pentas {
  position: sticky; top: 7rem; display: grid;
  grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  place-items: center; aspect-ratio: 4/4.2; padding: clamp(1rem, 2.5vw, 2rem);
}
.papan__pentas::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.04) 50%, transparent 70%);
}
.papan__pentas img {
  grid-area: 1/1; position: relative;
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  min-width: 0; min-height: 0; justify-self: center; align-self: center;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,0.6));
  opacity: 0; transform: scale(0.94) translateY(10px);
  transition: opacity 0.45s var(--laju), transform 0.7s var(--laju-keluar);
}
.papan__pentas img.tampil { opacity: 1; transform: none; }

/* --- lapis 3: daftar harga dua kolom, bertitik penyambung ---------------- */
.papan__isi .menu__isi { columns: 17rem; column-gap: clamp(1.5rem, 3vw, 2.75rem); }
.menu__isi li { break-inside: avoid; display: flex; align-items: baseline; gap: 0.4rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--garis); }
.menu__isi li span { order: 1; color: var(--abu-2); font-size: 0.9375rem; }
.menu__isi li::after { content: ""; order: 2; flex: 1 1 0.75rem; min-width: 0.6rem;
  border-bottom: 1px dotted rgba(250,250,250,0.22); transform: translateY(-0.3em); }
.menu__isi li b { order: 3; font-weight: 700; color: var(--aksen); white-space: nowrap; }
.menu__isi li small { display: block; color: var(--abu); font-size: 0.8125rem; }

.menu__tab { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.menu__tab button {
  background: transparent; border: 1px solid var(--garis); border-radius: var(--r-pil);
  padding: 0.6rem 1.1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer;
  color: var(--abu-2); min-height: 46px;
  transition: border-color 0.22s var(--laju), color 0.22s var(--laju), background 0.22s var(--laju);
}
.menu__tab button:hover { border-color: var(--garis-aksen); color: var(--putih); }
.menu__tab button[aria-selected="true"] { background: var(--aksen); border-color: var(--aksen); color: #0a0a0a; }
.menu__kaki { margin-top: 1.5rem; }

@media (max-width: 62rem) {
  .papan { grid-template-columns: minmax(0,1fr); }
  .papan__pentas { position: static; aspect-ratio: 16/9; max-height: 17rem; }
  .papan__isi .menu__isi { columns: auto; }
}
@media (max-width: 44rem) {
  .unggul__kartu { flex-basis: 70vw; }
}

/* ==========================================================================
   F. PENGALAMAN DI TEMPAT KAMI — fasilitas berikon
   ========================================================================== */
.fasilitas { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(0.75rem, 1.8vw, 1.25rem); }
.fasilitas .kartu { text-align: center; padding: clamp(1.5rem,2.6vw,2rem) 1.25rem; }
.fasilitas .ikon--besar { color: var(--aksen); margin: 0 auto 1rem; }
.fasilitas h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; }
.fasilitas p { font-size: 0.875rem; color: var(--abu); }
@media (max-width: 62rem) { .fasilitas { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 30rem) { .fasilitas { grid-template-columns: minmax(0,1fr); } }

/* ==========================================================================
   G. GALERI + LIGHTBOX
   ========================================================================== */

.kotak-foto {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: rgba(24, 24, 24, 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden; transition: opacity 0.28s var(--laju), visibility 0.28s;
}
.kotak-foto.buka { opacity: 1; visibility: visible; }
.kotak-foto figure { margin: 0; max-width: min(66rem, 100%); max-height: 100%; display: grid; gap: 0.9rem; }
.kotak-foto img { max-height: calc(100svh - 10rem); width: auto; margin-inline: auto; border-radius: var(--r-kecil); object-fit: contain; }
.kotak-foto figcaption { text-align: center; font-size: 0.875rem; color: var(--abu-2); }
.kotak-foto__tbl {
  position: absolute; width: 48px; height: 48px; display: grid; place-items: center;
  background: rgba(14,16,15,0.82); border: 1px solid var(--garis); border-radius: var(--r-pil); cursor: pointer;
  transition: border-color 0.2s var(--laju), background 0.2s var(--laju);
}
.kotak-foto__tbl:hover { border-color: var(--aksen); background: var(--aksen-kabut); }
.kotak-foto__tbl svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kotak-foto__tutup { top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); }
.kotak-foto__mundur { left: clamp(0.5rem,2vw,2rem); top: 50%; transform: translateY(-50%); }
.kotak-foto__maju  { right: clamp(0.5rem,2vw,2rem); top: 50%; transform: translateY(-50%); }
.kotak-foto__hitung { position: absolute; bottom: clamp(1rem,3vw,2rem); left: 50%; transform: translateX(-50%); font-size: 0.8125rem; color: var(--abu); }

/* ==========================================================================
   J. LOKASI & JAM
   ========================================================================== */
.lokasi__petak { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); }
.cabang { overflow: hidden; padding: 0; }
.cabang__foto { margin: 0; aspect-ratio: 16/9; overflow: hidden; }
.cabang__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--laju-keluar); }
.cabang:hover .cabang__foto img { transform: scale(1.04); }
.cabang__isi { padding: clamp(1.5rem, 3vw, 2.25rem); }
.cabang h3 { margin-bottom: 0.75rem; }
.cabang__data { margin: 1.25rem 0 1.5rem; }
.cabang__data > div { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.6rem 0; border-top: 1px solid var(--garis); }
.cabang__data .ikon { width: 18px; height: 18px; color: var(--aksen); margin-top: 0.2rem; }
.cabang__data dt { flex: none; width: 0; overflow: hidden; }
.cabang__data dd { margin: 0; font-size: 0.9375rem; }
.cabang__data dd small { display: block; color: var(--abu); font-size: 0.8125rem; }
.cabang__aksi { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 54rem) { .lokasi__petak { grid-template-columns: minmax(0,1fr); } }

/* ==========================================================================
   K. FAQ — accordion
   ========================================================================== */
.faq { max-width: 48rem; margin-inline: auto; }
.faq__satu { border-bottom: 1px solid var(--garis); }
.faq__tanya {
  width: 100%; display: flex; align-items: center; gap: 1.25rem; justify-content: space-between;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: 1.35rem 0; min-height: 56px;
  font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; color: var(--putih);
  transition: color 0.2s var(--laju);
}
.faq__tanya:hover { color: var(--aksen); }
.faq__tanda { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--garis); border-radius: var(--r-pil); transition: border-color 0.25s var(--laju), transform 0.3s var(--laju); }
.faq__tanda::before, .faq__tanda::after { content: ""; position: absolute; width: 12px; height: 1.5px; background: currentColor; transition: transform 0.3s var(--laju); }
.faq__tanda::after { transform: rotate(90deg); }
.faq__tanya[aria-expanded="true"] .faq__tanda { border-color: var(--aksen); color: var(--aksen); }
.faq__tanya[aria-expanded="true"] .faq__tanda::after { transform: rotate(0deg); }
.faq__jawab { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--laju); }
.faq__jawab > div { overflow: hidden; }
.faq__satu.buka .faq__jawab { grid-template-rows: 1fr; }
.faq__jawab p { padding-bottom: 1.4rem; color: var(--abu-2); max-width: 60ch; }

/* ==========================================================================
   L. PENUTUP + KAKI
   ========================================================================== */
.penutup { position: relative; overflow: hidden; text-align: center; padding-block: clamp(4.5rem, 10vw, 7.5rem); }
.penutup::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(58rem, 120%); aspect-ratio: 1.7;
  transform: translate(-50%,-50%);
  background: radial-gradient(44% 44% at 50% 50%, rgba(255, 255, 255, 0.18), transparent 70%);
  pointer-events: none;
}
.penutup > * { position: relative; }
.penutup h2 { margin: 1rem auto 0; max-width: 16ch; }
.penutup .teks { margin: 1.25rem auto 0; max-width: 48ch; }
.penutup__aksi { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; }

.kaki { border-top: 1px solid var(--garis); padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; }
.kaki__petak { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.kaki__logo img { height: 3.25rem; width: auto; filter: brightness(0) invert(1); margin-bottom: 1.1rem; }
.kaki p { color: var(--abu); font-size: 0.9375rem; max-width: 30ch; }
.kaki h3 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aksen); margin-bottom: 1rem; }
.kaki li { margin-bottom: 0.6rem; font-size: 0.9375rem; }
.kaki a { color: var(--abu-2); text-decoration: none; transition: color 0.2s var(--laju); }
.kaki a:hover { color: var(--aksen); }
.kaki__sosial { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.kaki__sosial a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--garis); border-radius: var(--r-pil); transition: border-color 0.2s var(--laju), color 0.2s var(--laju); }
.kaki__sosial a:hover { border-color: var(--aksen); color: var(--aksen); }
.kaki__garis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(2.5rem,5vw,3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--garis); font-size: 0.8125rem; color: var(--abu); }
@media (max-width: 62rem) { .kaki__petak { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 34rem) { .kaki__petak { grid-template-columns: minmax(0,1fr); } }

/* Tombol booking melayang di ponsel: mudah dijangkau, tidak menutupi isi
   karena halaman diberi ruang bawah sebanyak tinggi tombolnya. */
.dok { display: none; }
@media (max-width: 62rem) {
  body { padding-bottom: 5.25rem; }
  .dok {
    display: flex; gap: 0.6rem; position: fixed; inset: auto 0 0 0; z-index: 70;
    padding: 0.7rem var(--tepi) calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(8,9,9,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--garis);
    transform: translateY(110%); transition: transform 0.3s var(--laju);
  }
  .dok.naik { transform: none; }
  .dok .tbl { flex: 1; }
  .dok .tbl--garis { flex: 0 0 auto; width: 52px; padding: 0; }
}

/* ------------------------------------------------------------- gerak --- */
.muncul { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--laju-keluar), transform 0.7s var(--laju-keluar); }
.muncul.tampak { opacity: 1; transform: none; }
.muncul[data-tunda="1"] { transition-delay: 0.08s; }
.muncul[data-tunda="2"] { transition-delay: 0.16s; }
.muncul[data-tunda="3"] { transition-delay: 0.24s; }
html:not(.js) .muncul { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .muncul { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__kabut, .keping, .hiasan { animation: none !important; }
  /* bilah berjalan dihentikan juga, kalau tidak ia jadi satu satunya
     benda yang masih bergerak di halaman yang sudah ditenangkan */
  .bilah__rel { animation: none !important; }
  .bilah { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .panduan__layar img, .zig__foto img { transition: none !important; }
  .kotak-foto, .laci, .faq__jawab { transition: none; }
}

/* ==========================================================================
   PITA PENDEK — jeda napas
   --------------------------------------------------------------------------
   Diukur di referensi: lima belas bagian, rata rata 851px, DENGAN pencilan
   yang disengaja. Dua bagian sangat pendek (357px dan 484px) dan satu
   sangat panjang (1791px). Pencilan itulah yang membuat halamannya punya
   irama.

   Versi saya sebelumnya sembilan bagian yang semuanya 866 sampai 1318px:
   tidak ada yang pendek, tidak ada yang panjang, jadi terbaca rata dari
   atas sampai bawah. Tiga pita di bawah ini yang mengisi peran pencilan
   pendek, masing masing sekitar 360 sampai 440px.
   ========================================================================== */
.pita { padding-block: clamp(3.5rem, 7.5vw, 7rem); border-block: 1px solid var(--garis); position: relative; }

/* Pita angka: tiga angka besar berjajar, tanpa judul bagian. */
.pita-angka__isi { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem,3vw,2.5rem); }
.pita-angka div { text-align: center; position: relative; }
.pita-angka div + div::before { content: ""; position: absolute; left: calc(-1 * clamp(0.5rem,1.5vw,1.25rem)); top: 15%; bottom: 15%; width: 1px; background: var(--garis); }
.pita-angka b { display: block; font-family: var(--judul); font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1; color: var(--aksen); }
.pita-angka span { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--abu); letter-spacing: 0.04em; }
@media (max-width: 40rem) {
  .pita-angka__isi { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
  .pita-angka div + div::before { left: 20%; right: 20%; top: calc(-1 * 0.75rem); bottom: auto; width: auto; height: 1px; }
}

/* Pita kalimat: satu kalimat besar, tidak ada yang lain. */
.pita-kalimat { text-align: center; padding-block: clamp(4rem, 9vw, 8rem); }
.pita-kalimat p { max-width: 24ch; margin-inline: auto; }
.pita-kalimat em { font-style: normal; color: var(--aksen); }

/* Pita suasana: deret foto kecil selebar layar, tanpa judul, berjalan
   pelan. Perannya jeda, bukan keterangan. */
.pita-suasana { padding-block: 0; border-block: 1px solid var(--garis); overflow: hidden; }
.pita-suasana__rel { display: flex; width: max-content; animation: suasana 52s linear infinite; }
.pita-suasana:hover .pita-suasana__rel { animation-play-state: paused; }
.pita-suasana figure { margin: 0; flex: none; width: clamp(10rem, 16vw, 14rem); aspect-ratio: 3/4; }
.pita-suasana img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; transition: opacity 0.4s var(--laju); }
.pita-suasana figure:hover img { opacity: 1; }
@keyframes suasana { to { transform: translateX(-50%); } }

/* ==========================================================================
   HASIL POTONGAN — dipisah jadi bagian sendiri, selebar layar
   Dulu menempel di ekor bagian barbershop dan membuatnya 1200px.
   ========================================================================== */
.hasil-bab { padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.hasil-bab .kepala-bagian { margin-bottom: clamp(2rem, 4vw, 3rem); }
.hasil-penuh { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.hasil-penuh figure { margin: 0; position: relative; overflow: hidden; }
.hasil-penuh img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 0.8s var(--laju-keluar); }
.hasil-penuh figure:hover img { transform: scale(1.05); }
.hasil-penuh figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.1rem 0.9rem;
  background: linear-gradient(180deg, transparent, rgba(24, 24, 24, 0.9));
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 0.75rem;
}
.hasil-penuh figcaption i { font-style: normal; color: var(--aksen); }
@media (max-width: 44rem) { .hasil-penuh { grid-template-columns: repeat(2, 1fr); } }

/* Galeri dibuat benar benar panjang: inilah pencilan panjang yang di
   referensi dipegang bagian 1791px. */

/* ==========================================================================
   LEBAR DAN RATA YANG BERGANTI GANTI
   --------------------------------------------------------------------------
   Diukur: tiga belas bagian semuanya memakai 79 persen lebar layar dan
   padding 96/96 yang sama persis. Isinya berbeda, bingkainya identik
   tiga belas kali, dan itulah monotonnya.

   Di referensi, sebagian judul rata tengah dan sebagian rata kiri
   (terukur: "Why Fortis Circle?" dan "David Noah" keduanya rata kiri),
   dan sebagian bagian berdiri selebar layar.
   ========================================================================== */

/* Judul rata kiri dengan kalimat pendamping di kanannya. Bentuk ini dipakai
   bergantian dengan kepala rata tengah supaya tidak ada dua bagian
   berurutan yang kepalanya sebentuk. */
.kepala-kiri {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  text-align: left; max-width: none;
}
.kepala-kiri h2 { margin: 0.9rem 0 0; }
.kepala-kiri .teks { margin: 0; padding-bottom: 0.3rem; }
@media (max-width: 54rem) { .kepala-kiri { grid-template-columns: minmax(0,1fr); gap: 1rem; align-items: start; } }

/* Bagian selebar layar: wadahnya dilepas, isinya mentok tepi. */
.penuh > .wadah { max-width: none; padding-inline: clamp(0.75rem, 1.6vw, 1.25rem); }
.penuh .kepala-bagian, .penuh .kepala-kiri { max-width: var(--kolom); margin-inline: auto; padding-inline: var(--tepi); }
.penuh .kepala-kiri { max-width: var(--kolom); }

/* Bagian sempit: dipakai untuk FAQ, supaya satu bagian benar benar terasa
   lebih rapat dari tetangganya. */
.sempit > .wadah { max-width: 50rem; }

/* Padding tegak yang tidak seragam. Tiga nilai dipakai bergantian, bukan
   satu nilai untuk semuanya. */
.bagian--rapat { padding-block: clamp(3rem, 6vw, 4.25rem); }
.bagian--lega { padding-block: clamp(5rem, 11vw, 8rem); }

/* Galeri selebar layar: inilah pencilan panjang sekaligus momen paling
   imersif di halaman. */

/* Dua kartu cabang selebar layar. */
.lokasi--penuh { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.75rem; }
@media (max-width: 54rem) { .lokasi--penuh { grid-template-columns: minmax(0,1fr); } }

/* Penutup diberi bobot lebih: isinya cuma 59 persen tingginya. */
.penutup { padding-block: clamp(5rem, 11vw, 8.5rem); }
.penutup h2 { max-width: 18ch; }

/* ==========================================================================
   KALIMAT PENYAMBUNG
   --------------------------------------------------------------------------
   Dari dua belas sambungan antarbagian, hanya satu yang benar benar
   menyambung: kalimat "selesai potong, kopinya sudah menunggu". Sebelas
   sisanya dibuka dingin dengan label topik baru, dan itu yang membuat
   bagian bagiannya terasa tidak nyambung.

   Kalimat ini memungut benang dari bagian sebelumnya. Dibuat lirih dengan
   sengaja: tugasnya menuntun, bukan mengumumkan.
   ========================================================================== */
.sambung {
  font-size: 0.9375rem;
  color: var(--abu);
  margin: 0.75rem 0 0;
  max-width: 46ch;
}
.kepala-bagian .sambung, .sambung--tengah { margin-inline: auto; text-align: center; }
.kepala-kiri .sambung { margin-top: 0.6rem; }
.sambung--tengah { display: block; margin-bottom: 1.5rem; }

/* Jahitan: garis tipis dengan satu titik terang yang MELINTASI batas antar
   bagian, supaya dua bagian terbaca bersambung, bukan bertumpuk. */
.bagian + .bagian::before,
.bagian + .pita::before,
.pita + .bagian::before {
  content: "";
  position: absolute;
  left: 50%; top: -1px;
  width: 1px; height: clamp(2rem, 4vw, 3.25rem);
  background: linear-gradient(180deg, var(--aksen), transparent);
  transform: translateX(-50%);
  opacity: 0.5;
  pointer-events: none;
}
.penuh + .bagian::before, .bagian--lega::before { opacity: 0.4; }

/* ==========================================================================
   HERO YANG BERGANTI DUNIA
   --------------------------------------------------------------------------
   Hero sebelumnya satu foto diam. Yang bergerak cuma kabut dan keping,
   dan itu tidak cukup.

   Geraknya sekarang bukan hiasan: latarnya BERGANTIAN antara ruang potong
   dan ruang kopi, dengan penanda dunia yang ikut berganti. Itu persis
   kalimat yang dijanjikan judulnya, "one place", diperlihatkan alih alih
   dituliskan. Tiap bingkai juga perlahan membesar, jadi ruangannya terasa
   hidup, bukan foto tempelan.
   ========================================================================== */
.hero__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.5s var(--laju);
}
.hero__foto img.tampil {
  opacity: 1;
  animation: dekat 9s linear forwards;   /* perbesaran pelan tiap bingkai */
}
@keyframes dekat { from { transform: scale(1.02); } to { transform: scale(1.12); } }

/* Penanda dunia: berganti bersama fotonya. */
.hero__dunia {
  position: absolute; z-index: 4;
  left: 50%; bottom: clamp(1.5rem, 4vh, 2.75rem);
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-pil);
  background: rgba(10,12,11,0.68);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--garis-aksen);
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
}
.hero__dunia i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--aksen);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); flex: none;
}
.hero__dunia span { transition: opacity 0.35s var(--laju); }
.hero__dunia.ganti span { opacity: 0; }
.hero__titik { display: flex; gap: 0.3rem; margin-left: 0.35rem; }
.hero__titik b { width: 14px; height: 2px; border-radius: 2px; background: rgba(250,250,250,0.3); transition: background 0.4s var(--laju), width 0.4s var(--laju-keluar); }
.hero__titik b.aktif { background: var(--aksen); width: 22px; }

/* --- Masuknya isi hero, bertahap --------------------------------------
   Pola yang dipakai PENTING. Percobaan pertama memakai
   `opacity:0` sebagai aturan tersendiri lalu dimunculkan oleh animasi
   dengan fill-mode both. Itu tidak aman: kalau animasinya tidak pernah
   maju (misalnya halaman dimuat sementara tab tersembunyi, dan peramban
   mencekik animasi), elemennya terkunci di keadaan awal dan isi heronya
   hilang selamanya. Terbukti kejadian saat pengujian.

   Yang dipakai sekarang kebalikannya: keadaan TERLIHAT adalah bawaan,
   tanpa aturan apa pun. Keadaan tersembunyi hanya berlaku selama kelas
   .masuk BELUM ada, dan dilepas dengan transisi. Kalau skrip gagal,
   kalau transisinya dicekik, atau kalau gerak dikurangi, hasil akhirnya
   tetap sama: terlihat. */
html.js .hero:not(.masuk) .hero__isi > * { opacity: 0; transform: translateY(18px); }
html.js .hero__isi > * { transition: opacity 0.8s var(--laju-keluar), transform 0.8s var(--laju-keluar); }
html.js .hero__isi > *:nth-child(1) { transition-delay: 0.05s; }
html.js .hero__isi > *:nth-child(2) { transition-delay: 0.16s; }
html.js .hero__isi > *:nth-child(3) { transition-delay: 0.27s; }
html.js .hero__isi > *:nth-child(4) { transition-delay: 0.38s; }
html.js .hero__isi > *:nth-child(5) { transition-delay: 0.49s; }
html.js .hero__isi > *:nth-child(6) { transition-delay: 0.6s; }

/* Judul masuk baris demi baris, dari bawah garis yang menutupinya. */
.hero h1 .baris { display: block; overflow: hidden; }
.hero h1 .baris > i { display: block; font-style: normal; }
html.js .hero__isi h1 .baris > i { transition: transform 1s var(--laju-keluar); }
html.js .hero:not(.masuk) h1 .baris > i { transform: translateY(104%); }
html.js .hero__isi h1 .baris:nth-child(1) > i { transition-delay: 0.2s; }
html.js .hero__isi h1 .baris:nth-child(2) > i { transition-delay: 0.32s; }
html.js .hero__isi h1 .baris:nth-child(3) > i { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .hero__foto img.tampil { animation: none; transform: none; }
  .hero__foto img { transition: none; }
  html.js .hero:not(.masuk) .hero__isi > *,
  html.js .hero:not(.masuk) h1 .baris > i { opacity: 1; transform: none; }
  html.js .hero__isi > *, html.js .hero__isi h1 .baris > i { transition: none; }
  .hero__dunia span { transition: none; }
}

/* Di layar sempit keping berhenti melayang dan masuk ke alir, jadi
   penanda dunia yang mengambang di dasar hero menimpanya. Penandanya
   ikut masuk alir, berdiri sesudah keping. */
@media (max-width: 56rem) {
  .hero__dunia { position: static; transform: none; justify-self: center; margin-top: 1.25rem; }
}

/* ==========================================================================
   BAGIAN BERDASAR FOTO
   --------------------------------------------------------------------------
   Sebelumnya tiap bagian kecuali hero duduk di atas hitam rata dengan isi
   di dalam kotak. Fotonya ada, tapi selalu sebagai BENDA DI DALAM bagian,
   tidak pernah sebagai bagiannya sendiri. Itu yang membuatnya terasa
   kurang imersif.

   Sekarang bagian bagian utama berdiri di atas fotonya sendiri. Tabirnya
   dibuat setipis mungkin selama teksnya masih lolos ambang kontras, jadi
   ruangannya benar benar terlihat, bukan jadi tekstur gelap.
   ========================================================================== */
.bagian--foto { position: relative; isolation: isolate; }
.bagian__latar { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.bagian__latar img { width: 100%; height: 100%; object-fit: cover; }
.bagian__latar::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--hitam) 0%, rgba(31, 31, 31, 0.62) 18%, rgba(31, 31, 31, 0.58) 82%, var(--hitam) 100%);
}
/* Varian hangat untuk bab kopi: tabirnya kecokelatan, bukan netral, jadi
   perpindahan ke dunia kopi tetap terasa sebagai pindah ruang. */
.bagian__latar--hangat::after {
  background: linear-gradient(180deg, var(--hitam) 0%, rgba(14,9,5,0.76) 16%, rgba(14,9,5,0.72) 84%, var(--hitam) 100%);
}
/* Di atas foto, kartu harus punya dasar sendiri supaya teksnya tetap
   terbaca tanpa menebalkan tabirnya. */
.bagian--foto .kartu,
.bagian--foto .paket,
.bagian--foto .menu__kolom {
  background: rgba(6, 7, 7, 0.72);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.bagian--foto .layanan--utama { background: rgba(8, 14, 11, 0.76); }

/* Kartu kaca untuk bab tentang: teks duduk DI ATAS fotonya, bukan di
   sebelahnya. */
.tentang--kaca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem,5vw,4rem); align-items: center; }
.tentang__kaca {
  border-radius: var(--r-kartu);
  border: 1px solid var(--garis-aksen);
  background: rgba(6, 7, 7, 0.76);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
}
.tentang__kaca h2 { margin: 0.9rem 0 1.1rem; }
@media (max-width: 62rem) { .tentang--kaca { grid-template-columns: minmax(0,1fr); } }

/* Pita angka ikut berdasar foto, tapi tipis saja. */
.pita--foto .bagian__latar::after {
  background: linear-gradient(180deg, var(--hitam) 0%, rgba(31, 31, 31, 0.68) 24%, rgba(31, 31, 31, 0.68) 76%, var(--hitam) 100%);
}
@media (prefers-reduced-motion: reduce) { .bagian__latar img { transform: none; } }

/* Potret di bab tentang: berdiri sendiri di atas dasar fotonya, dengan
   tepi dan pendar supaya terbaca sebagai benda, bukan menyatu dengan
   latarnya. */
.tentang__potret {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--r-kartu);
  border: 1px solid var(--garis-aksen);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9), 0 0 70px -40px rgba(255, 255, 255, 0.4);
}

/* Teks sekunder di dalam bagian berfoto dinaikkan satu tingkat. Abu
   #8F8F8F cukup di atas hitam rata (6,3:1), tapi di atas tabir foto yang
   paling terang ia jatuh ke 4,32:1, di bawah ambang. Diukur, bukan
   dikira. */
.bagian--foto, .pita--foto { --abu: #b9b9b9; }   /* 7,1:1 di tabir paling terang */

/* ==========================================================================
   BENTUK BENTUK BARU
   --------------------------------------------------------------------------
   Aturan di balik berkas ini: tidak boleh ada dua bagian yang bentuknya
   sama. Sebelumnya hampir semua bagian berbentuk "judul lalu petak kartu",
   dan mengganti warna atau menambah foto latar tidak pernah memperbaiki
   itu. Yang di bawah ini bentuk bentuk yang belum dipakai di mana pun.
   ========================================================================== */

/* --- BILAH BERJALAN -------------------------------------------------------
   Menggantikan tiga angka diam. Isinya keterangan yang memang dicari, dan
   ia bergerak, jadi pita pendek ini punya kehidupan tanpa jadi bagian
   penuh. */
.bilah { position: relative; overflow: hidden; padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-block: 1px solid var(--garis); background: var(--hitam-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.bilah__rel { display: flex; width: max-content; animation: bilahJalan 44s linear infinite; }
.bilah:hover .bilah__rel { animation-play-state: paused; }
.bilah__set { display: flex; align-items: center; gap: clamp(1.75rem,4vw,3rem); padding-right: clamp(1.75rem,4vw,3rem); flex: none; }
.bilah__set span { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9375rem; font-weight: 600; white-space: nowrap; color: var(--putih); }
.bilah__set span .ikon { width: 17px; height: 17px; color: var(--aksen); }
.bilah__set b { color: var(--aksen); font-weight: 800; }
.bilah__set i { width: 5px; height: 5px; border-radius: 50%; background: var(--garis-aksen); flex: none; }
@keyframes bilahJalan { to { transform: translateX(-50%); } }

/* --- PANDUAN: teks diam di kiri, layar bertumpuk jalan di kanan ----------
   Bentuk ini belum dipakai di halaman mana pun. Teksnya terpaku sementara
   tiga foto layar lewat, jadi pengunjung dibawa melewati alatnya, bukan
   diberi tiga kartu untuk dibandingkan. */
.panduan__petak { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.panduan__diam { position: sticky; top: 7.5rem; }
.panduan__diam h2 { margin: 0.9rem 0 1.1rem; }
.panduan__langkah { display: grid; gap: 0.75rem; margin-top: 1.75rem; }
.panduan__langkah li { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.85rem 1rem;
  border: 1px solid var(--garis); border-radius: var(--r-kecil); transition: border-color 0.3s var(--laju), background 0.3s var(--laju); }
.panduan__langkah li.aktif { border-color: var(--aksen); background: var(--aksen-kabut); }
.panduan__no { flex: none; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--hitam-3); color: var(--abu); font-size: 0.75rem; font-weight: 700; transition: background 0.3s var(--laju), color 0.3s var(--laju); }
.panduan__langkah li.aktif .panduan__no { background: var(--aksen); color: #0a0a0a; }
.panduan__langkah b { display: block; font-weight: 700; margin-bottom: 0.15rem; }
.panduan__langkah span { font-size: 0.875rem; color: var(--abu); }
.panduan__jalur { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.panduan__layar { position: relative; border-radius: var(--r-kartu); overflow: hidden; border: 1px solid var(--garis-aksen); background: var(--hitam-2); }
.panduan__layar img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.panduan__layar figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(24, 24, 24, 0.9)); font-size: 0.8125rem; font-weight: 600; }
.panduan__layar figcaption em { font-style: normal; color: var(--aksen); display: block; font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.3rem; }
@media (max-width: 62rem) {
  .panduan__petak { grid-template-columns: minmax(0,1fr); }
  .panduan__diam { position: static; }
  .panduan__jalur { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.75rem; }
  .panduan__layar img { aspect-ratio: 3/4; }
}
@media (max-width: 44rem) { .panduan__jalur { grid-template-columns: minmax(0,1fr); } }

/* --- ZIGZAG: layanan jadi baris berselang, bukan tiga kartu seragam ------
   Tiga kartu sejajar adalah bentuk paling umum di internet, dan itu yang
   dipakai sebelumnya. Diganti baris berselang: foto dan teks bertukar
   sisi tiap baris, jadi mata bergerak turun secara berzigzag. */
.zig { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.zig__baris { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.75rem, 5vw, 4rem); align-items: center; }
.zig__baris:nth-child(even) .zig__foto { order: 2; }
.zig__foto { margin: 0; border-radius: var(--r-kartu); overflow: hidden; border: 1px solid var(--garis); position: relative; }
.zig__foto img { width: 100%; aspect-ratio: 5/4; object-fit: cover; transition: transform 0.9s var(--laju-keluar); }
.zig__baris:hover .zig__foto img { transform: scale(1.04); }
.zig__cap { position: absolute; left: 1rem; top: 1rem; padding: 0.35rem 0.8rem; border-radius: var(--r-pil);
  background: var(--aksen); color: #0a0a0a; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.zig__isi h3 { margin-bottom: 0.7rem; }
.zig__isi p { color: var(--abu); max-width: 42ch; }
.zig__data { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.9rem 1.5rem; margin: 1.5rem 0; }
.zig__harga { font-family: var(--judul); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--aksen); }
.zig__lama { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; color: var(--abu);
  border: 1px solid var(--garis); border-radius: var(--r-pil); padding: 0.3rem 0.8rem; }
.zig__lama .ikon { width: 15px; height: 15px; color: var(--aksen); }
.zig__isi ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.zig__isi ul li { font-size: 0.8125rem; color: var(--abu-2); border: 1px solid var(--garis); border-radius: var(--r-pil); padding: 0.28rem 0.75rem; }
@media (max-width: 62rem) {
  .zig__baris, .zig__baris:nth-child(even) .zig__foto { grid-template-columns: minmax(0,1fr); order: 0; }
  .zig__foto img { aspect-ratio: 16/10; }
}

/* --- Sisa layanan: satu baris mendatar rapat ----------------------------- */
.sisa-layanan { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(2rem,4vw,3rem);
  padding-top: clamp(1.5rem,3vw,2rem); border-top: 1px solid var(--garis); }
.sisa-layanan div { display: inline-flex; align-items: baseline; gap: 0.75rem; border: 1px solid var(--garis);
  border-radius: var(--r-pil); padding: 0.7rem 1.25rem; }
.sisa-layanan b { font-weight: 700; }
.sisa-layanan i { font-style: normal; font-size: 0.75rem; color: var(--abu); }
.sisa-layanan span { font-weight: 700; color: var(--aksen); }

/* --- Sasaran sentuh di kaki halaman -------------------------------------
   Tautan di kaki halaman tingginya cuma 19px, jauh di bawah 44px yang
   dipakai sebagai batas. Yang ditambah ruang sentuhnya, bukan ukuran
   hurufnya, supaya tampilannya tidak berubah. */
.kaki ul li { margin: 0; }
.kaki ul li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-block: 0.35rem; }
.kaki__sosial a { width: 46px; height: 46px; }

/* --- Galeri: tutup lubang di susunan batu bata --------------------------
   Keping yang memakan dua kolom atau dua baris menyisakan sel kosong di
   barisan sebelumnya. Dense menyuruh peramban mundur mengisi lubang itu. */

/* --- Galeri: tinggi seragam, keragaman dari keping lebar ----------------
   Rentang dua baris (.t2) dibuang. Dengan rentang baris, baris terakhir
   selalu menyisakan lubang di salah satu lebar layar. Sekarang jumlah
   selnya 24: habis dibagi 6, 4, dan 2, jadi tepinya rata di mana pun. */

/* --- Perisai di balik teks hero -----------------------------------------
   Diukur dulu, bukan dikira: di titik paling terang foto hero, piksel di
   belakang paragraf mencapai 255. Dengan selubung yang ada (0,3 di tengah)
   teks putih cuma dapat beda terang 1,95 banding 1, jauh di bawah 4,5.
   Yang ditambah perisai lokal mengikuti blok teksnya saja, supaya fotonya
   tetap terlihat jelas di sekelilingnya. */
.hero__isi { position: relative; }
.hero__isi::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(62rem, 148%); height: min(44rem, 132%);
  background: radial-gradient(closest-side, rgba(24, 24, 24, 0.58), rgba(24, 24, 24, 0.42) 55%, transparent 100%);
  pointer-events: none;
}

/* ==========================================================================
   J. GALERI — pita bernama, bukan petak batu bata
   --------------------------------------------------------------------------
   Bentuk lama benar isinya (semua foto tempat) tapi tidak memberi tahu
   apa pun: dua puluh keping seukuran, pengunjung melihat ruangan kosong
   tanpa tahu ruangan apa. Sekarang empat pita bernama yang mengikuti
   urutan orang melewatinya, dari depan toko masuk ke dalam lalu naik.
   Nomornya berarti, bukan hiasan: itu urutan rutenya.
   ========================================================================== */
.jalur { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.jalur__bab {
  display: grid; grid-template-columns: minmax(0, 0.2fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start;
}
.jalur__tanda { position: sticky; top: 8rem; padding-top: 0.25rem; }
.jalur__no {
  display: block; font-family: var(--judul); font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1; color: var(--aksen); letter-spacing: 0.02em;
}
.jalur__tanda h3 { font-size: 1.0625rem; font-weight: 700; margin: 0.5rem 0 0.35rem; }
.jalur__tanda p { font-size: 0.8125rem; color: var(--abu); max-width: 22ch; }
.jalur__deret { display: grid; gap: clamp(0.5rem, 1vw, 0.75rem); }
.jalur__deret button {
  margin: 0; padding: 0; border: 0; background: var(--hitam-2); cursor: zoom-in;
  border-radius: var(--r-kecil); overflow: hidden; position: relative; display: block; width: 100%;
}
.jalur__deret img {
  width: 100%; height: clamp(11rem, 18vw, 16rem); object-fit: cover; display: block;
  transition: transform 0.75s var(--laju-keluar);
}
.jalur__deret button:hover img, .jalur__deret button:focus-visible img { transform: scale(1.06); }
.jalur__deret button::after {
  content: ""; position: absolute; inset: 0; border: 1px solid transparent;
  border-radius: var(--r-kecil); transition: border-color 0.3s var(--laju);
}
.jalur__deret button:hover::after, .jalur__deret button:focus-visible::after { border-color: var(--aksen); }

@media (max-width: 62rem) {
  .jalur__bab { grid-template-columns: minmax(0, 1fr); }
  .jalur__tanda { position: static; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
  .jalur__tanda p { flex-basis: 100%; max-width: none; }
  /* lebar yang berbeda-beda tidak muat di layar sempit, samakan jadi dua kolom */
  .jalur__deret { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .jalur__deret img { height: clamp(8.5rem, 32vw, 12rem); }
}
@media (max-width: 30rem) {
  .jalur__deret img { height: 9rem; }
}

/* ==========================================================================
   PILIH CABANG
   --------------------------------------------------------------------------
   Ada dua cabang, jadi tombol booking tidak boleh diam-diam memilihkan
   salah satunya. Tombolnya tetap <a> ke WhatsApp Buaran supaya tanpa JS
   pun masih berfungsi; dengan JS ia membuka pemilih ini lebih dulu.
   ========================================================================== */
body.kunci { overflow: hidden; }

.pilih { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2rem); }
.pilih[hidden] { display: none; }
.pilih__tirai { position: absolute; inset: 0; background: rgba(2,2,2,0.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.3s var(--laju); }
.pilih__kotak {
  position: relative; width: min(46rem, 100%); max-height: calc(100dvh - 2rem);
  overflow-y: auto; padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--hitam-2); border: 1px solid var(--garis-aksen);
  border-radius: var(--r-kartu); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9);
  opacity: 0; transform: translateY(14px) scale(0.985);
  transition: opacity 0.32s var(--laju), transform 0.4s var(--laju-keluar);
}
.pilih.buka .pilih__tirai { opacity: 1; }
.pilih.buka .pilih__kotak { opacity: 1; transform: none; }
.pilih__kotak h2 { margin: 0.75rem 0 0.6rem; }
.pilih__tutup {
  position: absolute; right: 0.9rem; top: 0.9rem; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--garis); background: transparent; color: var(--abu-2); cursor: pointer;
  transition: border-color 0.2s var(--laju), color 0.2s var(--laju);
}
.pilih__tutup:hover { border-color: var(--aksen); color: var(--putih); }
.pilih__deret { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(0.75rem, 1.6vw, 1rem); margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.pilih__kartu {
  /* kartunya sebuah tautan, jadi garis bawah bawaan peramban harus
     dimatikan: tanpa ini semua barisnya ikut bergaris bawah */
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; border: 1px solid var(--garis);
  border-radius: var(--r-kecil); overflow: hidden; background: var(--kartu);
  transition: border-color 0.25s var(--laju), transform 0.35s var(--laju-keluar);
}
.pilih__kartu:hover, .pilih__kartu:focus-visible { border-color: var(--aksen); transform: translateY(-3px); }
.pilih__foto { display: block; overflow: hidden; }
.pilih__foto img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
  transition: transform 0.7s var(--laju-keluar); }
.pilih__kartu:hover .pilih__foto img { transform: scale(1.05); }
.pilih__isi { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }
.pilih__isi b { font-size: 1.125rem; font-weight: 700; }
.pilih__ket { font-size: 0.8125rem; color: var(--abu); }
.pilih__data { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; color: var(--abu-2); }
.pilih__data .ikon { width: 15px; height: 15px; color: var(--aksen); flex: none; }
.pilih__aksi { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem;
  font-size: 0.875rem; font-weight: 700; color: var(--putih); }
.pilih__aksi .ikon { width: 16px; height: 16px; transition: transform 0.3s var(--laju-keluar); }
.pilih__kartu:hover .pilih__aksi .ikon { transform: translateX(4px); }
.pilih__kaki { margin-top: 1.25rem; }
@media (max-width: 40rem) { .pilih__deret { grid-template-columns: minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce) {
  .pilih__tirai, .pilih__kotak { transition: none; }
  .pilih__kartu:hover { transform: none; }
}

/* ==========================================================================
   AI HAIR GUIDE — bagian penanda situs ini
   --------------------------------------------------------------------------
   Sebelumnya AI cuma disebut sambil lalu di daftar fasilitas. Padahal
   itulah satu-satunya hal yang tidak dimiliki barbershop sebelah, jadi
   sekarang ia dapat bagiannya sendiri dengan foto layar yang sungguhan:
   petak empat sudut kepala, layar usulan berikut nilainya, dan layarnya
   yang terpasang di samping kursi.
   ========================================================================== */
.ai { background: linear-gradient(180deg, var(--hitam) 0%, var(--hitam-2) 48%, var(--hitam) 100%); }
.ai__utama { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.1rem); margin-block: clamp(2rem, 4vw, 3rem); }
.ai__sisi { display: grid; gap: clamp(0.75rem, 1.6vw, 1.1rem); }
.ai__layar { margin: 0; position: relative; border-radius: var(--r-kartu); overflow: hidden;
  border: 1px solid var(--garis); background: var(--hitam-2); }
.ai__layar img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s var(--laju-keluar); }
.ai__layar--besar img { aspect-ratio: 8/5; }
.ai__sisi .ai__layar img { aspect-ratio: 16/9; }
.ai__layar:hover img { transform: scale(1.03); }
.ai__layar figcaption { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3rem 1.25rem 1.1rem; font-size: 0.875rem; color: var(--putih);
  background: linear-gradient(180deg, transparent, rgba(24, 24, 24, 0.92)); }
.ai__layar figcaption em { display: block; font-style: normal; font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--aksen); margin-bottom: 0.3rem; font-weight: 700; }
.ai__poin { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.ai__poin li { display: flex; gap: 0.9rem; align-items: flex-start; }
.ai__poin .ikon--besar { color: var(--aksen); flex: none; }
.ai__poin b { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.ai__poin span { font-size: 0.875rem; color: var(--abu); }
@media (max-width: 62rem) {
  .ai__utama { grid-template-columns: minmax(0,1fr); }
  .ai__sisi { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ai__poin { grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
}
@media (max-width: 40rem) { .ai__sisi { grid-template-columns: minmax(0,1fr); } }

/* lencana AI di hero */
.lencana {
  /* .label juga inline-flex, jadi di layar lebar keduanya muat sebaris dan
     tampak berdempet. Dibuat blok selebar isinya supaya selalu turun sendiri. */
  display: flex; width: fit-content; align-items: center; gap: 0.5rem; margin: 0 auto 1rem;
  padding: 0.4rem 0.9rem; border: 1px solid var(--garis-aksen); border-radius: var(--r-pil);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--putih); background: var(--aksen-kabut); }
.lencana .ikon { width: 15px; height: 15px; color: var(--aksen); }

/* penanda cabang di galeri, menggantikan nomor rute */
.jalur__cap { display: inline-block; font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--abu); font-weight: 700; }
.jalur__tanda h3 { font-family: var(--judul); font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; margin: 0.4rem 0 0.5rem; }


/* ==========================================================================
   PANEL TERANG
   --------------------------------------------------------------------------
   Halaman ini rata-rata terangnya 26 dari 255. Menu Bebek Ningrat yang
   dijadikan patokan pemilik: 187. Foto gelap di atas latar gelap saling
   melebur, dan itulah sebab halamannya terasa datar, bukan layoutnya.

   Kelas ini membalik skala tinta untuk satu bagian saja. Tokennya yang
   dibalik, bukan tiap aturan ditulis ulang, jadi kalau nanti seluruh
   situs mau dibalik tinggal memindahkan kelas ini ke <body>.
   ========================================================================== */
.terang {
  --hitam: #f4f4f4;
  --hitam-2: #ececec;
  --hitam-3: #e2e2e2;
  --kartu: #ffffff;
  --putih: #0b0b0b;
  --abu: #5e5e5e;
  --abu-2: #333333;
  --aksen: #0b0b0b;
  --aksen-redup: #4a4a4a;
  --garis: rgba(11, 11, 11, 0.14);
  --garis-aksen: rgba(11, 11, 11, 0.32);
  --aksen-kabut: rgba(11, 11, 11, 0.05);
  --pendar: 0 0 0 rgba(0,0,0,0);
  background: var(--hitam);
  color: var(--putih);
}
/* tombol utama ikut terbalik: isian hitam, tulisan putih */
.terang .tbl { background: #0b0b0b; color: #fafafa; box-shadow: none; }
.terang .tbl:hover { background: #262626; }
.terang .tbl--garis { background: transparent; color: #0b0b0b; border-color: var(--garis-aksen); }
.terang .tbl--garis:hover { background: rgba(11,11,11,0.06); border-color: #0b0b0b; }
.terang .menu__tab button[aria-selected="true"] { background: #0b0b0b; border-color: #0b0b0b; color: #fafafa; }
.terang .terang .menu__tab button { color: var(--abu-40); border-color: rgba(11,11,11,0.16); }
.terang .menu__isi li::after { border-bottom-color: rgba(11,11,11,0.26); }

/* --- papan menu cetak ---------------------------------------------------
   Satu gagasan, bukan empat blok. Hidangan utamanya besar dan mengambang
   (latarnya memang sudah dipotong), harganya menempel di sebelahnya, lalu
   daftar lengkapnya di bawah seperti menu yang dicetak. */
.papan-cetak { padding-block: clamp(3rem, 6vw, 5rem); }
.papan-cetak__kepala { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem 2rem; padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
  border-bottom: 2px solid #0b0b0b; margin-bottom: clamp(2rem, 4vw, 3rem); }
.papan-cetak__kepala h2 { font-family: var(--judul); text-transform: uppercase;
  font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 0.92; letter-spacing: 0.005em; }
.papan-cetak__kepala p { max-width: 34ch; font-size: 0.9375rem; color: var(--abu); }

.sorot { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sorot__satu { text-align: center; }
.sorot__pentas { position: relative; height: clamp(10rem, 19vw, 15rem);
  display: grid; grid-template-rows: minmax(0,1fr); grid-template-columns: minmax(0,1fr);
  place-items: center; margin-bottom: 0.9rem; }
.sorot__pentas::before { content: ""; position: absolute; left: 50%; bottom: 8%;
  transform: translateX(-50%); width: 72%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11,11,11,0.22), transparent 72%); }
.sorot__pentas img { position: relative; max-width: 100%; max-height: 100%;
  width: auto; height: auto; min-width: 0; min-height: 0; object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(11,11,11,0.28));
  transition: transform 0.5s var(--laju-keluar); }
.sorot__satu:hover img { transform: translateY(-6px) scale(1.04); }
.sorot__gol { display: block; font-size: 0.625rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--abu); font-weight: 700; }
.sorot__satu h3 { font-size: 1.125rem; font-weight: 700; margin: 0.3rem 0 0.2rem; }
.sorot__satu p { font-size: 0.8125rem; color: var(--abu); margin-bottom: 0.5rem; }
.sorot__harga { font-family: var(--judul); font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  letter-spacing: 0.01em; }

/* daftarnya dua kolom kalau ruangnya cukup; aturan lamanya terikat ke
   .papan__isi yang sudah tidak ada lagi */
.papan-cetak__daftar .menu__isi { columns: 17rem; column-gap: clamp(1.5rem, 3vw, 2.75rem); }
.papan-cetak__daftar .menu__kaki { margin-top: 1.25rem; }
.papan-cetak__bawah { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.papan-cetak__sisi { position: sticky; top: 7.5rem; display: grid;
  grid-template-rows: minmax(0,1fr); grid-template-columns: minmax(0,1fr);
  place-items: center; aspect-ratio: 1/1.05; }
.papan-cetak__sisi img { grid-area: 1/1; max-width: 100%; max-height: 100%;
  width: auto; height: auto; min-width: 0; min-height: 0; object-fit: contain;
  filter: drop-shadow(0 20px 24px rgba(11,11,11,0.26));
  opacity: 0; transform: scale(0.95); transition: opacity 0.4s var(--laju), transform 0.6s var(--laju-keluar); }
.papan-cetak__sisi img.tampil { opacity: 1; transform: none; }

@media (max-width: 62rem) {
  .papan-cetak__bawah { grid-template-columns: minmax(0,1fr); }
  .papan-cetak__sisi { position: static; aspect-ratio: 16/9; max-height: 15rem; order: -1; }
  .sorot { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.75rem; }
  .sorot__pentas { height: clamp(7rem, 22vw, 10rem); }
  .sorot__satu p { display: none; }
}
@media (max-width: 40rem) { .sorot { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ==========================================================================
   KAKI HALAMAN, dirancang ulang
   --------------------------------------------------------------------------
   Yang lama cuma logo, tiga kolom tautan, dan satu baris hak cipta: tidak
   salah, tapi tidak mengatakan apa pun. Sekarang ia dibuka dengan satu
   pernyataan besar, memuat kolom "Sebelum datang" yang benar-benar berguna
   (walk-in, Hair Guide gratis, kapan jadwal pasti), dan ditutup dengan
   wordmark raksasa yang terpotong tepi bawah sebagai tanda akhir halaman.
   ========================================================================== */
.kaki { position: relative; overflow: hidden; }
.kaki__atas { padding-bottom: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--garis); }
.kaki .kaki__pernyataan {
  font-family: var(--judul); text-transform: uppercase;
  font-size: clamp(1.75rem, 5vw, 3.5rem); line-height: 0.98; letter-spacing: 0.005em;
  margin: 0.9rem 0 1.4rem; max-width: 18ch; color: var(--putih);
}
.kaki__fakta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; }
.kaki__fakta li { display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: var(--abu-2); }
.kaki__fakta .ikon { width: 16px; height: 16px; color: var(--aksen); flex: none; }

.kaki__petak { display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) repeat(2, minmax(0, 1.05fr));
  gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
.kaki__kolom h3 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--putih); margin-bottom: 0.3rem; }
.kaki__sejak { font-size: 0.75rem; color: var(--abu); margin-bottom: 0.6rem; }
.kaki__kolom ul { display: grid; gap: 0.1rem; }
.kaki__kolom li { font-size: 0.8125rem; color: var(--abu); line-height: 1.55; padding-block: 0.2rem;
  overflow-wrap: break-word; }
.kaki__kolom--cabang { border-left: 1px solid var(--garis); padding-left: clamp(1rem, 2vw, 1.5rem); }

/* wordmark raksasa, dipotong tepi bawah: penanda bahwa halamannya habis */
.kaki .kaki__cap {
  font-family: var(--judul); text-transform: uppercase; text-align: center;
  font-size: clamp(4rem, 19vw, 17rem); line-height: 0.78; letter-spacing: -0.01em;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 -0.16em; user-select: none;
  color: transparent; -webkit-text-stroke: 1px rgba(250,250,250,0.13);
}
@supports not (-webkit-text-stroke: 1px white) { .kaki .kaki__cap { color: rgba(250,250,250,0.07); } }

@media (max-width: 68rem) {
  .kaki__petak { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kaki__logo { grid-column: 1 / -1; }
  .kaki__kolom--cabang { border-left: 0; padding-left: 0; }
}
@media (max-width: 36rem) {
  .kaki__petak { grid-template-columns: minmax(0,1fr); }
  .kaki__fakta { gap: 0.5rem 1.25rem; }
}

/* pita "Sebelum datang": dulu jadi kolom kelima dan membuat semua kolom
   terlalu sempit sampai nomor dan nama Instagram saling tindih */
.kaki__siap { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--garis); }
.kaki__siap h3 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--putih); margin-bottom: 0.9rem; }
.kaki__siap ul { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0.75rem clamp(1.25rem, 2.5vw, 2rem); }
.kaki__siap li { display: flex; gap: 0.55rem; align-items: flex-start;
  font-size: 0.875rem; color: var(--abu); line-height: 1.5; }
.kaki__siap .ikon { width: 15px; height: 15px; color: var(--aksen); flex: none; margin-top: 0.2em; }
@media (max-width: 58rem) { .kaki__siap ul { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 34rem) { .kaki__siap ul { grid-template-columns: minmax(0,1fr); } }

/* ==========================================================================
   GRADASI ANTAR BAGIAN
   --------------------------------------------------------------------------
   Permintaan pemilik: perbanyak abu dan beri peralihan ke hitam maupun ke
   putih. Sebelumnya tiap bagian berlatar rata #1f1f1f, jadi batas antar
   bagian cuma terasa dari garis tipis. Sekarang bagian-bagian ganjil
   diberi gradasi naik-turun yang sangat halus, cukup untuk memberi irama
   tanpa terlihat belang.
   ========================================================================== */
/* Gradasi HANYA untuk bagian yang tidak punya foto latar.
   Versi pertama memasangnya juga di #tentang, #barbershop, dan
   #pengalaman, padahal ketiganya .bagian--foto: dua lapis latar
   bertumpuk, dan bagian Barbershop jadi ramai karena fotonya ikut
   terangkat oleh gradasi di bawahnya. */
#panduan      { background: var(--gradasi-gelap); }
.pita-kalimat { background: var(--gradasi-naik); }
#lokasi       { background: var(--gradasi-turun); }
#faq          { background: var(--gradasi-naik); }
#hasil        { background: var(--gradasi-naik); }
.kaki      { background: linear-gradient(180deg, var(--abu-10) 0%, var(--hitam) 60%); }

/* kartu dapat gradasi halus juga, bukan warna rata */
.kartu, .cabang, .unggul__kartu, .pilih__kartu { background-image: var(--gradasi-kartu); }

/* sapuan cahaya tipis di puncak bagian berlatar foto, menyambungkan
   bagian gelap ke bagian terang di bawahnya */
/* CATATAN KESALAHAN, jangan diulang.
   Versi pertama aturan ini memakai `.bagian--foto > * { z-index: 1 }`
   untuk mengangkat isi di atas sapuan cahaya. Masalahnya .bagian__latar
   juga anak langsung .bagian--foto, dan ia WAJIB berada di z-index -1.
   Aturan itu ikut mengangkatnya ke depan, jadi foto latar raksasa
   menutupi seluruh bagian dan beberapa bagian lain jadi kotak hitam.
   Caranya sekarang: latarnya diturunkan ke -2, sapuan cahaya di -1, dan
   isinya dibiarkan pada aliran normal. Tidak ada anak yang disentuh. */
.bagian--foto .bagian__latar { z-index: -2; }
.bagian--foto::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: var(--cahaya-atas);
}

/* ==========================================================================
   DAFTAR MENU B&T, dirombak
   --------------------------------------------------------------------------
   Bentuk sebelumnya memisahkan "sorotan" dan "daftar harga" jadi dua blok
   yang tidak saling bicara: sorotannya tetap sama apa pun tab yang
   dibuka. Sekarang tiap kategori membawa sorotannya sendiri, jadi menekan
   tab benar-benar mengganti isi halaman, bukan cuma daftar angkanya.

   Panelnya abu bergradasi, bukan putih rata, sesuai permintaan pemilik
   untuk memperbanyak abu dan memberi peralihan ke hitam dan ke putih.
   ========================================================================== */
.daftar-menu { padding-block: clamp(3rem, 6vw, 5rem); background: var(--gradasi-terang); }
.daftar-menu__kepala { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem 2.5rem;
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem); margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 2px solid #0b0b0b; }
.daftar-menu__kepala h2 { font-family: var(--judul); text-transform: uppercase;
  font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 0.92; }
.daftar-menu__kepala p { max-width: 42ch; font-size: 0.9375rem; color: var(--abu); }
.daftar-menu .menu__tab { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

/* --- sorotan kategori --- */
.sajian__sorot { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid rgba(11,11,11,0.14); }
.sajian__foto { position: relative; margin: 0; display: grid;
  grid-template-rows: minmax(0,1fr); grid-template-columns: minmax(0,1fr);
  place-items: center; aspect-ratio: 1/0.82; }
/* cakram abu di belakang hidangan: memberi kedalaman dan mengikat benda
   ke panelnya, bukan sekadar mengambang di atas kertas kosong */
/* Percobaan pertama memakai cakram yang lebih GELAP dari panelnya, dan
   ia beradu dengan bayangan yang sudah dipanggang di dalam fotonya:
   dua kelabu bertumpuk, hasilnya kotor. Dibalik jadi kolam cahaya, jadi
   bendanya duduk di dalam terang dan bayangannya yang membumikan. */
.sajian__foto::before { content: ""; position: absolute; left: 50%; top: 52%;
  transform: translate(-50%, -50%); width: 94%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, #ffffff 0%, rgba(255,255,255,0.62) 52%, rgba(255,255,255,0) 76%); }
/* cincin tipis sebagai penanda grafis, bukan sekadar kolam kosong */
.sajian__foto::after { content: ""; position: absolute; left: 50%; top: 52%;
  transform: translate(-50%, -50%); width: 78%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(11,11,11,0.09); pointer-events: none; }
.sajian__foto img { position: relative; max-width: 100%; max-height: 100%;
  width: auto; height: auto; min-width: 0; min-height: 0; object-fit: contain; }
.sajian__gol { display: block; font-size: 0.6875rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--abu); font-weight: 700; }
.sajian__isi h3 { font-family: var(--judul); text-transform: uppercase;
  font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1; margin: 0.5rem 0 0.6rem; }
.sajian__isi p { font-size: 0.9375rem; color: var(--abu); max-width: 38ch; }
.sajian__harga { display: inline-block; margin-top: 1rem; padding: 0.5rem 1.1rem;
  border-radius: var(--r-pil); background: #0b0b0b; color: #fafafa;
  font-family: var(--judul); font-size: clamp(1.125rem, 2vw, 1.5rem); letter-spacing: 0.02em; }

/* --- daftar harga, tiga kolom selebar panel --- */
.sajian__daftar { columns: 17rem; column-gap: clamp(1.5rem, 3vw, 3rem); }

@media (max-width: 62rem) {
  .sajian__sorot { grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
  .sajian__foto { aspect-ratio: 16/9; max-height: 15rem; }
  .sajian__foto::before { width: 52%; }
}

/* ==========================================================================
   FAQ, dirombak
   --------------------------------------------------------------------------
   Bentuk lama: satu kolom sempit berisi deretan teks dengan garis tipis.
   Judulnya rata tengah tapi isinya rata kiri, dan kiri kanannya kosong
   lebar. Sekarang dua kolom: judul dan jalan keluar ("tanya langsung")
   menempel di kiri, daftarnya jadi kartu berabu di kanan. Nomor urut
   membantu mata melompat, dan kartu yang terbuka jadi lebih terang
   sehingga jelas mana yang sedang dibaca.
   ========================================================================== */
.faq-petak { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.faq-petak__sisi { position: sticky; top: 8rem; }
.faq-petak__sisi h2 { margin: 0.9rem 0 0; }
.faq-tanya-lagi { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: 1.25rem 1.35rem;
  border: 1px solid var(--garis); border-radius: var(--r-kecil);
  background: var(--gradasi-kartu); }
.faq-tanya-lagi p { font-size: 0.875rem; color: var(--abu); margin-bottom: 0.85rem; }

.faq { display: grid; gap: 0.6rem; }
.faq__satu { border: 1px solid var(--garis); border-radius: var(--r-kecil);
  background: var(--abu-10); overflow: hidden;
  transition: background 0.3s var(--laju), border-color 0.3s var(--laju); }
.faq__satu:hover { border-color: var(--garis-aksen); }
.faq__satu.buka { background: var(--abu-20); border-color: var(--garis-aksen); }
.faq__tanya { display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  gap: 0.9rem; align-items: center; width: 100%; text-align: left;
  padding: 1.05rem 1.25rem; background: transparent; border: 0; cursor: pointer;
  color: var(--putih); font: inherit; font-weight: 600; min-height: 56px; }
.faq__no { font-family: var(--judul); font-size: 0.9375rem; color: var(--abu-50, #6b6b6b);
  letter-spacing: 0.04em; }
.faq__satu.buka .faq__no { color: var(--putih); }
.faq__teks { font-size: 0.9375rem; line-height: 1.45; }
/* Padding TIDAK boleh ditaruh di pembungkus jawaban. Pembungkusnya yang
   dipakai akordeon untuk menutup (grid-template-rows 0fr), dan
   overflow:hidden memotong di tepi PADDING, bukan tepi isi. Akibatnya
   setinggi padding itu teks jawabannya tetap mengintip walau tertutup.
   Jadi padding diletakkan di paragrafnya. */
.faq__jawab p { font-size: 0.9375rem; color: var(--abu-2);
  padding: 0 1.25rem 1.15rem calc(1.25rem + 0.9rem + 1.6em); max-width: 62ch; }

@media (max-width: 62rem) {
  .faq-petak { grid-template-columns: minmax(0,1fr); }
  .faq-petak__sisi { position: static; }
  .faq__jawab p { padding-left: 1.25rem; }
}

/* Foto penutup itu muka toko siang hari, paling terang di antara semua
   foto latar. Dengan selubung umum 0,62 teksnya cuma dapat beda terang
   4,3 banding 1, di bawah batas 4,5. Bagian ini saja yang diberi
   selubung lebih tebal, bukan semuanya, supaya yang lain tetap abu. */
.penutup .bagian__latar::after {
  background: linear-gradient(180deg, var(--hitam) 0%, rgba(31, 31, 31, 0.80) 18%, rgba(31, 31, 31, 0.78) 82%, var(--hitam) 100%);
}

/* --- sorotan kategori memakai ikon, bukan foto -------------------------
   Pemilik memutuskan foto hidangan dilepas dari bagian kopi. Ikonnya
   dibuat besar dan ditaruh di dalam kolam cahaya yang sama seperti
   sebelumnya, jadi tata letaknya tidak berubah, cuma isinya. */
.sajian__foto { aspect-ratio: 1/0.78; }
/* cincin tipisnya dirapatkan karena ikon lebih kecil daripada foto */
.sajian__foto::before { width: 62%; }
.sajian__foto::after { width: 52%; }

/* ==========================================================================
   BARBERSHOP: latar abu bergradasi, bukan foto
   --------------------------------------------------------------------------
   Sebelumnya bagian ini memakai foto ruang potong sebagai latar, dan
   bagian tepat di atasnya (Hasil) juga penuh foto. Dua bagian berfoto
   beruntun membuat batasnya hilang, jadi yang ini tampak menyatu dengan
   yang di depannya. Diganti gradasi abu supaya jelas berganti bagian.
   ========================================================================== */
.bagian--abu {
  position: relative; isolation: isolate;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255,255,255,0.045), transparent 64%),
    linear-gradient(180deg, var(--abu-15) 0%, var(--abu-10) 46%, var(--abu-05) 78%, var(--hitam) 100%);
}
.bagian--abu .kartu { background-image: linear-gradient(160deg, var(--abu-20) 0%, var(--abu-15) 60%, var(--abu-10) 100%); }


/* ============================================================
   Kartu sorot B&T: foto jadi pemeran utama.
   Sebelumnya di sini ada lingkaran pucat besar berisi ikon garis
   tipis. Di layar lebar itu terbaca seperti placeholder yang belum
   selesai, bukan desain. Diganti foto asli yang sudah digrading
   seragam, dengan gradasi kaki yang dipanggang ke fotonya sehingga
   lencana harga selalu terbaca di foto mana pun.
   ============================================================ */
.sajian__sorot {
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.75rem);
  align-items: center;
}
.sajian__foto {
  position: relative; margin: 0; display: block;
  aspect-ratio: 4 / 5; max-height: 28rem; width: 100%; overflow: visible;
  isolation: isolate;
}
.sajian__foto::before, .sajian__foto::after { content: none; }
.sajian__foto img {
  position: static; width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; display: block; border-radius: 22px;
  box-shadow: 0 2px 4px rgba(11,11,11,0.16), 0 28px 56px -24px rgba(11,11,11,0.62);
}
/* cincin tipis di dalam tepi foto, memberi kesan dicetak rapi */
.sajian__foto { }
.sajian__foto > img + .sajian__harga { }
.sajian__foto::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.16); pointer-events: none; z-index: 1;
}
.sajian__foto .sajian__harga {
  position: absolute; left: 1.15rem; bottom: 1.15rem; z-index: 2;
  margin: 0; padding: 0.5rem 1.05rem; border-radius: var(--r-pil);
  background: rgba(250,250,250,0.96); color: #0b0b0b;
  font-family: var(--judul); font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  letter-spacing: 0.02em; backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px -8px rgba(11,11,11,0.7);
}
.sajian__isi h3 { margin-top: 0.45rem; }
.sajian__isi p { margin-top: 0.7rem; }

@media (max-width: 61.99rem) {
  .sajian__sorot { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .sajian__foto {
    /* 1:1 di ponsel. Sumbernya 4:5 tegak, jadi 5:4 mendatar memotong 36%
       tinggi subjek; persegi hanya memotong 20%. */
    aspect-ratio: 1 / 1; max-width: 30rem; max-height: none;
    margin-inline: auto; width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) { .sajian__foto img { transition: none; } }

/* ============================================================
   Pilar: tiga klaim singkat soal layar AI, tepat setelah hero.
   Sengaja TIDAK memakai kartu bersudut seperti bagian fasilitas,
   dan tidak memakai penomoran 01/02/03 karena ketiganya sejajar,
   bukan urutan. Pembedanya garis rambut vertikal, gaya lembar
   spesifikasi, yang cocok dengan nada "tech".
   ============================================================ */
.pilar { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--gradasi-naik); }
.pilar__deret {
  display: grid; gap: 0; list-style: none; margin: 0; padding: 0;
  grid-template-columns: 1fr;
}
.pilar__deret > li {
  padding: 1.5rem 0;
  border-top: 1px solid var(--garis);
}
.pilar__deret > li:last-child { border-bottom: 1px solid var(--garis); }
.pilar__deret b {
  display: block; font-family: var(--judul); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.05;
  color: var(--putih); margin-bottom: 0.5rem;
}
.pilar__deret p {
  margin: 0; font-size: 0.9375rem; line-height: 1.65;
  color: var(--abu-2); max-width: 42ch;
}
@media (min-width: 48rem) {
  .pilar__deret { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
  .pilar__deret > li {
    padding: 0 0 0 clamp(1.25rem, 2.5vw, 2rem);
    border-top: 0; border-bottom: 0 !important;
    border-left: 1px solid var(--garis);
  }
}