/* ==========================================================================
   Barbertech - situs resmi
   --------------------------------------------------------------------------
   Arah desain: ruang gelap sinematik. Barbertech adalah brand yang membaca
   wajah sebelum menggunting, jadi bahasa visualnya diambil dari logonya
   sendiri: jalur sirkuit bertitik simpul yang mengalir menuju profil kepala.
   Hijau limau B&T dipakai sangat hemat, hanya untuk hal yang hidup: simpul
   aktif, garis pindai, dan pilihan pengguna. Satu bab berpindah ke warna
   kopi agar terasa seperti melangkah ke kafenya.
   ========================================================================== */

/* --- Token ---------------------------------------------------------------- */
:root {
  /* Tangga abu.

     Satu keluarga, dari putih sampai tinta, sedikit hangat supaya sewarna
     dengan bab kopi yang gelap. Dibuat sebagai tangga utuh, bukan beberapa
     warna lepas, supaya setiap tingkat punya jarak yang tertib dan
     komponen bisa naik turun satu tingkat tanpa menebak nilainya.

     Sebelum ini paletnya cuma punya ujung: putih dan tinta, dengan tiga
     nada yang semuanya nyaris putih. Akibatnya beranda jadi sebelas bab
     putih beruntun. Tingkat tengah di bawah inilah yang kurang.

     Tangganya berhenti di tingkat 4. Situs ini putih dominan, dan ujung
     gelapnya bukan abu tua melainkan cokelat hampir hitam pada bab kopi.
     Menyediakan abu tua yang tidak dipakai hanya mengundang warna yang
     tidak termasuk bahasa visual ini. */
  /* Tangganya diturunkan satu tingkat penuh pada 2026-09-19. Nilai lama
     berangkat dari 3 persen di bawah putih, dan pada pandangan seluruh
     halaman pita nadanya nyaris tidak terbaca sebagai nada, cuma sebagai
     putih yang agak kotor. Yang sekarang berangkat dari 5 persen dan
     tingkat keduanya 9 persen, jadi pitanya benar-benar terlihat sebagai
     pita. Nada hangatnya dipertahankan: merah tetap di atas hijau, hijau
     di atas biru, persis seperti tangga lama. */
  --g-0: #ffffff;
  --g-1: #f4f3f0;
  --g-2: #e9e7e2;
  --g-3: #dcd9d3;
  --g-4: #c8c4bc;

  /* Ruang: putih tetap dominan, abu jadi jeda.

     Panel sengaja diturunkan ke tingkat 2, bukan 1. Pada tingkat 1 bedanya
     dengan putih cuma tiga persen, jadi kartu dan isian formulir praktis
     tidak terlihat sebagai benda: sistemnya ada, tapi tidak terbaca. */
  --paper: var(--g-0);
  --surface: var(--g-2);
  --surface-2: var(--g-3);
  --surface-3: var(--g-4);

  /* Dua tingkat dasar untuk bab bernada.

     Diukur, bukan dikira: pada pandangan seluruh halaman yang dikecilkan,
     selisih tiga persen dari putih tidak terbaca sama sekali. Pita nada
     baru terlihat sebagai irama mulai sekitar enam persen, dan tingkat
     kedua yang lebih dalam memberi jenjang sungguhan antara putih dan bab
     kopi yang gelap. */
  --ground: var(--g-2);
  --ground-deep: var(--g-3);

  /* Garis */
  --line: rgba(16, 17, 18, 0.16);
  --line-strong: rgba(16, 17, 18, 0.32);

  /* Tinta */
  --text: #101112;
  --text-dim: #55585a;
  /* Digelapkan sekali lagi saat tangga abunya diturunkan. Nilai lama
     #636568 dipilih untuk dasar terdalam yang lama (#e6e4e0) dan pas di
     ambang; pada dasar terdalam yang baru (#dcd9d3) ia jatuh ke 4,27:1.
     Nilai ini lolos di dua-duanya: 7,00:1 di kertas putih, 4,97:1 di pita
     terdalam. */
  --text-faint: #58595c;

  /* Tidak ada warna aksen. Penekanan dibuat lewat hitam pekat di atas
     putih, dan otomatis dibalik jadi putih tulang di area gelap. */
  --accent: #101112;
  --accent-bright: #f1eae2;
  --accent-glow: rgba(16, 17, 18, 0.1);
  --accent-rgb: 16, 17, 18;

  /* Satu-satunya bab gelap: B&T Coffee, plus footer */
  --coffee: #16100f;
  --coffee-2: #201817;
  --coffee-line: rgba(240, 232, 222, 0.14);
  --coffee-text: #f1eae2;
  --coffee-dim: #b0a49a;

  --ember: #b8341c;

  /* Huruf */
  --display: "Oxanium", "Trebuchet MS", sans-serif;
  --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Ruang gerak */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 1240px;
  --rail: 5rem;
  --chapter-y: clamp(5rem, 9vw, 9rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Butir film tipis: menghilangkan kesan gradasi digital yang datar. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.032;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--text);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8125rem;
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Tipografi ------------------------------------------------------------ */
.eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.mono { font-family: var(--mono);
  font-weight: 500; font-variant-numeric: tabular-nums; }

.h-hero {
  font-size: clamp(2.35rem, 5.9vw, 5.2rem);
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 0.88;
}
.h-xl { font-size: clamp(2.35rem, 6vw, 4.75rem); text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.94; }
.h-lg { font-size: clamp(1.85rem, 3.9vw, 3.1rem); text-transform: uppercase; letter-spacing: -0.028em; }
.h-md { font-size: clamp(1.2rem, 2vw, 1.5rem); text-transform: uppercase; }
.h-sm { font-size: 1.0625rem; letter-spacing: -0.005em; }
.h-lower { text-transform: lowercase; letter-spacing: -0.04em; }

.lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  color: var(--text-dim);
  max-width: 48ch;
  line-height: 1.6;
}

/* --- Tombol --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 2.875rem;
  padding: 0.8rem 1.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--paper);
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
    border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); box-shadow: 0 12px 34px -18px rgba(16, 17, 18, 0.6); }
.btn:active { background: #7a4f1d; border-color: #7a4f1d; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--text); box-shadow: none; color: var(--text); }

.btn--sm { min-height: 2.375rem; padding: 0.5rem 1rem; font-size: 0.75rem; }

.btn__arrow { transition: transform 0.22s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* --- Header --------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Pekat, bukan kaca buram.

     Sebelumnya putih 82 persen dengan blur. Situs ini punya judul hitam
     raksasa, dan judul sebesar itu yang lewat di baliknya tetap tembus
     sebagai bayangan abu. Hasilnya terbaca sebagai tabrakan, bukan sebagai
     kaca. Blur juga tidak ada di semua peramban, dan di yang tidak
     mendukungnya yang tersisa cuma putih tembus tanpa peredam apa pun. */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.masthead__bar {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 5rem;
}

.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img {
  height: 3rem;
  width: auto;
  transition: opacity 0.2s var(--ease);
}
.brand:hover img { opacity: 0.75; }

.nav { display: flex; gap: 2.25rem; margin-left: auto; align-items: center; }

.nav a {
  position: relative;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim);
  padding-block: 0.4rem;
  transition: color 0.2s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right 0.28s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { right: 0; }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after { right: 0; }

.masthead .btn { flex: none; }
.nav__cta { display: none; }

.burger {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  color: var(--text);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100dvh - 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: clamp(0.5rem, 1.3vw, 1.1rem) 0;
}

/* Foto ruangan sebagai latar paling belakang. */
.hero__bg {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: -2;
  overflow: hidden;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
  filter: grayscale(1) contrast(0.9) brightness(1.35);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.72) 38%, rgba(255, 255, 255, 0.88) 74%, #fff 100%),
    linear-gradient(90deg, #fff 6%, rgba(255, 255, 255, 0.66) 48%, rgba(255, 255, 255, 0.9) 100%);
}

/* Kanvas jalur sirkuit yang mengalir ke arah lambang. */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Cahaya lembut di belakang lambang agar ruang terasa punya kedalaman. */
.hero::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 42%;
  right: 14%;
  width: min(46rem, 80vw);
  aspect-ratio: 1;
  transform: translate(30%, -50%);
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 62%);
  z-index: 0;
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  flex: 1;
  padding-block: 1rem;
}

.hero h1 { margin-bottom: 1.15rem; }
.hero h1 span { display: block; }

/* Baris ketiga jadi papan hitam berhuruf putih.

   Sebelumnya baris ini huruf berkontur setipis 1,5px pada alpha 0,32.
   Di atas putih kontrasnya cuma 2,2:1: tidak lolos ambang mana pun dan
   dari jauh terbaca seperti salah cetak, bukan sebagai pilihan. Papan
   hitam membalik keadaan itu jadi 20:1 sekaligus memberi judulnya alas.

   Kotaknya tetap block, bukan inline-block, supaya aturan penyingkap
   baris di bawah tidak perlu dilawan. width: fit-content yang membuatnya
   menyusut selebar hurufnya. */
.hero h1 .hero__slab > i {
  width: fit-content;
  padding: 0.11em 0.3em 0.17em;
  background: var(--text);
  color: var(--paper);
}

/* Paragraf pembuka dikunci pada lebar baca. Tanpa ini barisnya ikut lebar
   kolom, sekitar 90 karakter, jauh di atas 65-75 yang nyaman dibaca. */
.hero__lead { max-width: 47ch; }

/* --- Tiga poin nilai ------------------------------------------------------ */
/* Penanda kotak hitam, bukan bulatan abu. Kotaknya memakai bahasa yang sama
   dengan papan judul dan pita pelat lambang, jadi hitam di hero muncul tiga
   kali sebagai satu sistem, bukan tiga kejadian lepas. */
.hero__poin {
  display: grid;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 44ch;
}
.hero__poin li {
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: baseline;
  font-size: 0.9375rem;
  color: var(--text);
}
.hero__poin li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--text);
  transform: translateY(-0.08em);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; }

/* --- Angka: satu panel abu, bukan tiga angka melayang --------------------- */
/* Sebelumnya tiga angka ini cuma duduk di atas satu garis rambut, jadi
   massanya nyaris nol dan matanya melewatinya. Dijadikan satu panel abu
   bersekat, ketiganya terbaca sebagai satu benda dan sekaligus menaruh
   massa abu di kaki kolom kiri. */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
}
.hero__fact {
  padding: 0.95rem clamp(0.85rem, 1.6vw, 1.3rem);
  border-left: 1px solid var(--line);
}
.hero__fact:first-child { border-left: 0; }
.hero__fact b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero__fact span {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Lambang besar: jawaban atas logo yang sebelumnya terlalu kecil. */
.hero__mark {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pias abu yang membelah hero.

   Sampai di sini seluruh hero satu bidang putih, jadi tidak ada susunan:
   cuma tumpukan teks di kiri dan gambar melayang di kanan. Pias ini
   memberi hero dua sisi yang jelas, putih di kiri tempat teks dibaca dan
   abu di kanan tempat lambang berdiri, dan sekaligus menaruh abu sebagai
   massa, bukan sebagai garis.

   Dibiarkan lari jauh ke kanan lalu dipotong oleh hero, jadi ia betul-betul
   menyentuh tepi layar di lebar berapa pun tanpa perlu dihitung. */
.hero__mark::before {
  content: "";
  position: absolute;
  inset: -4rem -100vw -4rem clamp(-2.5rem, -2.5vw, -1.25rem);
  background: var(--ground-deep);
  border-left: 1px solid var(--line);
  z-index: 0;
}
/* Pelat tempat lambang berdiri.

   Sebelum ini lambangnya melayang di ruang putih tanpa pijakan apa pun,
   jadi separuh kanan hero terbaca kosong. Pelat abu memberinya alas,
   pita hitam di tepi atas mengulang papan judul di kolom kiri, dan
   kakinya menerangkan apa yang sebenarnya digambarkan lambang itu. */
.hero__plat {
  position: relative;
  z-index: 1;
  margin: 0;
  width: min(32rem, 100%);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--paper);
  border: 1px solid var(--line);
}
.hero__plat::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 4px;
  background: var(--text);
}
.hero__plat-kaki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding-top: 0.95rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hero__plat-kaki span + span::before {
  content: "\2192";
  margin-right: 0.9rem;
  color: var(--line-strong);
}

.hero__mark-media {
  position: relative;
  width: 100%;
}

/* --- Lambang beranimasi -------------------------------------------------
   Digambar sebagai SVG di dalam halaman, bukan video. Animasi CSS selalu
   berjalan: tidak terhalang aturan autoplay, tidak butuh mix-blend-mode,
   tidak bergantung pada JavaScript, dan tetap tajam di layar mana pun.
   ------------------------------------------------------------------------ */
.markfx { display: block; width: 100%; height: auto; overflow: visible; }

.mfx-base { fill: var(--text); }

/* Arus digambar sebagai kilau terang yang berjalan di atas garis hitam,
   seperti cahaya menyusuri kawat. Cara ini tetap terbaca tanpa memakai
   warna aksen sama sekali. */
.mfx-accent { fill: var(--paper); }

/* Bayangan lembut yang bernapas pelan, memberi kedalaman. */
.mfx-halo {
  fill: var(--text);
  opacity: 0.1;
  animation: mfx-breathe 6s ease-in-out infinite;
}
@keyframes mfx-breathe {
  0%, 100% { opacity: 0.07; }
  50% { opacity: 0.13; }
}

/* Jendela arus tiap jalur. Jeda negatif membuat tiap jalur mulai pada fase
   berbeda, jadi begitu halaman dibuka arusnya sudah tersebar, bukan
   berangkat serentak. */
.mfx-lane {
  opacity: 0;
  animation: mfx-run 6s linear infinite;
  animation-delay: calc(var(--i) * -0.6s);
}
@keyframes mfx-run {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  86% { opacity: 1; }
  100% { transform: translateX(var(--travel)); opacity: 0; }
}

/* Simpul berkedip saat arus baru berangkat dari jalurnya. */
.mfx-node {
  fill: var(--paper);
  opacity: 0;
  filter: url(#mfx-spark);
  animation: mfx-spark 6s linear infinite;
  animation-delay: calc(var(--i) * -0.6s);
}
@keyframes mfx-spark {
  0% { opacity: 0.8; }
  14% { opacity: 0; }
  100% { opacity: 0; }
}

/* Wajah menyala sekali tiap putaran, saat gelombang tiba di sana. */
.mfx-faceglow {
  opacity: 0;
  animation: mfx-face 6s ease-in-out infinite;
}
@keyframes mfx-face {
  0%, 58% { opacity: 0; }
  76% { opacity: 0.34; }
  94%, 100% { opacity: 0; }
}

/* Di layar sempit panel angka jadi satu baris per angka akan terlalu tinggi,
   jadi sekatnya berpindah arah, bukan kolomnya dipaksa tetap tiga. */
@media (max-width: 62rem) {
  .hero__mark::before {
    inset: -2rem -100vw -2.5rem -100vw;
    border-left: 0;
  }
}

@media (max-width: 40rem) {
  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__fact:nth-child(3) {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* --- Rel ketersediaan: pita tipis di kaki hero ---------------------------- */
.strip {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.strip__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.2vw, 2rem);
  padding-block: 0.8rem;
  flex-wrap: wrap;
}
.strip__label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex: none;
}
.strip__branches { display: flex; gap: 0.4rem; flex: none; }
.strip__branch {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  padding: 0.35rem 0.7rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.strip__branch:hover { border-color: var(--line-strong); color: var(--text); }
.strip__branch[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--paper); }

.strip__slots {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex: 0 1 auto;
  flex-wrap: wrap;
}
/* Satu jam kosong yang bisa langsung ditekan.

   Dulu ini batang polos tanpa tulisan, dan jamnya cuma ada di atribut
   `title`. Begitu sisa jamnya tinggal empat, batangnya melar jadi balok abu
   lebar yang tidak mengatakan apa pun. Sekarang jamnya yang jadi isinya. */
.slot {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s var(--ease), color 0.16s var(--ease),
              border-color 0.16s var(--ease);
}
.slot--open:hover,
.slot--open:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.slot__sisa {
  align-self: center;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--text-faint);
}

.strip__slots--fresh .slot {
  opacity: 0;
  transform: translateY(6px);
  animation: slot-rise 0.42s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes slot-rise {
  to { opacity: 1; transform: none; }
}
/* Keterangan sisa kursi beserta tombolnya.

   Aturan dasarnya sempat hilang, dan tanpa `display: flex` nilai `gap`
   yang sudah ditulis di media query tidak berlaku apa-apa. Akibatnya
   kalimat "…hari ini" dan tombol "Ambil kursi" menempel tanpa jarak sama
   sekali, persis bersentuhan di piksel yang sama. */
.strip__note {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  flex: 0 1 auto;
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--text-dim);
}
.strip__note b { color: var(--accent); font-weight: 500; }

/* --- Bab (chapter) -------------------------------------------------------- */
.chapter { position: relative; padding-block: var(--chapter-y); }
.chapter--hairline { border-top: 1px solid var(--line); }

/* Bab bernada: duduk di atas dasar abu muda, dipakai berselang seling
   dengan bab putih supaya halaman punya irama.

   Panel di dalamnya dinaikkan satu tingkat pada tangga abu. Tanpa itu
   kartu yang memakai `--surface` akan hilang, karena nilainya hampir sama
   dengan dasarnya sendiri.

   `--paper` sengaja TIDAK ikut diubah. Tombol gelap memakainya sebagai
   warna teks, dan mengubahnya di sini akan menumpulkan teks tombol tanpa
   ada yang meminta. */
.chapter--tone,
.chapter--tone-deep {
  /* Di atas dasar abu, panel dibalik jadi putih. Menurunkannya lagi akan
     membuat dua abu yang berdekatan saling meredam; putih justru maju dan
     kartunya terbaca sebagai benda. */
  --surface: var(--g-0);
  --surface-2: var(--g-1);
  --surface-3: var(--g-3);
  --line: rgba(16, 17, 18, 0.15);
}
.chapter--tone { background: var(--ground); }
.chapter--tone-deep { background: var(--ground-deep); }

/* Dua bab bernada yang bersebelahan akan terbaca sebagai satu blok panjang,
   jadi diberi garis pemisah. */
.chapter--tone + .chapter--tone,
.chapter--tone-deep + .chapter--tone-deep { border-top: 1px solid var(--line); }

.chapter__grid {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
}

/* Jalur sirkuit vertikal dengan simpul di setiap bab. */
.node { position: relative; }
.node::before {
  content: "";
  position: absolute;
  left: 3px;
  top: calc(var(--chapter-y) * -1);
  bottom: calc(var(--chapter-y) * -1);
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.node::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
}

/* --- Bab AI: inti cerita brand -------------------------------------------- */
/* Pengantar bab diberi jenjang, bukan dua kolom yang sama berat.

   Dua paragraf sebelumnya sama-sama .lead dengan lebar sama, jadi tidak ada
   yang memimpin. Yang kiri sekarang menjawab judulnya, yang kanan jadi
   keterangan pendukung dengan ukuran badan biasa. */
.scan__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: 1.75rem;
}
.scan__profil {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-dim);
  padding-top: 0.3rem;
}

.scan {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  /* Dipusatkan, kolom kanannya mulai 64px di bawah panggung dan berakhir
     63px sebelum panggung selesai, jadi tidak ada satu garis pun yang
     bertemu. Rata atas, keduanya berangkat dari baris yang sama. */
  align-items: start;
  margin-top: 3.5rem;
}
/* Panggung dan panel bacaannya dibungkus jadi satu. Di layar lebar panelnya
   melayang di atas panggung seperti HUD; di layar sempit ia turun jadi panel
   biasa di bawahnya, karena di sana ia menutupi separuh wajahnya. */
.scan__kiri { position: relative; }

.scan__kanan {
  display: flex;
  flex-direction: column;
  /* Direntangkan setinggi panggung supaya keterangan di bawah berhenti di
     baris yang sama dengan tepi bawah panggung. */
  align-self: stretch;
}
.scan__catatan {
  /* Dulu duduk sesudah foto lebar, satu elemen penuh jauh dari peragaan
     yang diterangkannya. Sekarang menutup kolom langkah, sekaligus
     menyamakan tinggi kedua kolom. */
  margin-top: auto;
  padding-top: 1.5rem;
}

/* Panggung kiri: wajah contoh dengan lapisan pembacaan. */
.scan__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  --hud: #ffffff;
  background: var(--surface-2);
  overflow: hidden;
}
.scan__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.scan__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--hud);
  opacity: 0.85;
}
.scan__corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.scan__corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.scan__corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.scan__corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.scan__badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: rgba(0, 0, 0, 0.55);
  color: var(--hud);
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

/* Wajah contoh: lambang Barbertech sendiri, karena logonya memang profil
   kepala yang tersusun dari jalur sirkuit. */
.scan__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  transition: opacity 0.6s var(--ease), filter 0.6s var(--ease);
}
.scan__stage[data-state="read"] .scan__face,
.scan__stage[data-state="match"] .scan__face { opacity: 1; }

/* Garis pindai yang berjalan saat langkah "baca" aktif. */
.scan__line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hud) 18%, var(--hud) 82%, transparent);
  box-shadow: 0 0 22px 3px rgba(255, 255, 255, 0.45);
  opacity: 0;
  top: 8%;
}
.scan__stage[data-state="read"] .scan__line {
  animation: scan-run 2.2s var(--ease) infinite;
}
@keyframes scan-run {
  0% { top: 10%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 88%; opacity: 0; }
}

/* Titik penanda pada wajah, muncul berurutan setelah dipindai. */
.scan__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  border: 1px solid var(--hud);
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease-out);
}
.scan__dot::after {
  content: attr(data-label);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hud);
  white-space: nowrap;
  opacity: 0.95;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}
/* Label bisa dipindah ke sisi kiri titiknya. Label "Dahi" berada tepat di
   bawah panel bacaan dan tertimpa 11 piksel, jadi di layar terbaca "DAH". */
.scan__dot[data-sisi="kiri"]::after {
  left: auto;
  right: 14px;
}

.scan__stage[data-state="read"] .scan__dot,
.scan__stage[data-state="match"] .scan__dot {
  opacity: 1;
  transform: scale(1);
  transition-delay: calc(var(--i) * 130ms);
}

/* Langkah di kanan, bisa diklik. */
.steps { list-style: none; margin: 0; padding: 0; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 1.25rem;
  /* Ada ruang di kiri. Langkah yang sedang aktif diberi latar bertinta,
     dan tanpa ruang ini nomornya menempel persis di tepi tinta itu,
     berdempetan pula dengan garis kemajuan yang juga di tepi kiri. */
  padding: 1.5rem 1.25rem 1.5rem 1rem;
  border-top: 1px solid var(--line);
  cursor: pointer;
  background: none;
  border-left: 0; border-right: 0; border-bottom: 0;
  width: 100%;
  text-align: left;
  color: inherit;
  transition: background 0.25s var(--ease);
}
.step:last-child { border-bottom: 1px solid var(--line); }
/* Sorotan lama memakai rgba(238, 241, 236, 0.035): putih tiga persen di
   atas putih, jadi praktis tidak ada. Tiga tombol ini bisa diklik dan tidak
   ada satu pun tanda yang mengatakannya. */
.step:hover { background: var(--g-1); }
.step:hover .step__no { color: var(--text); }

.step__no {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  padding-top: 0.3rem;
  transition: color 0.25s var(--ease);
}
.step__title {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: color 0.25s var(--ease);
}
.step__body {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--text-dim);
  max-width: 44ch;
}
.step[aria-selected="true"] .step__no { color: var(--accent); }
.step[aria-selected="true"] .step__title { color: var(--accent); }
.step[aria-selected="true"] { background: var(--surface); }

/* Garis kemajuan di tepi kiri langkah aktif. */
.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease-out);
}
.step[aria-selected="true"]::before { transform: scaleY(1); }

/* Bacaan HUD yang muncul di panggung. */
.readout {
  position: absolute;
  right: 14px;
  top: 14px;
  width: min(13rem, 58%);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  padding: 0.85rem 0.9rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.readout.is-on { opacity: 1; transform: none; }
.readout dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 0.75rem; margin: 0; }
.readout dt { color: var(--text-faint); }
.readout dd { margin: 0; color: var(--accent); text-align: right; }

@media (max-width: 62rem) {
  .scan__intro { grid-template-columns: minmax(0, 1fr); }
}

/* --- Kartu keunggulan ----------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 3rem;
}
.card {
  position: relative;
  background: var(--surface);
  padding: 2rem 1.75rem;
  transition: background 0.3s var(--ease);
}
.card:hover { background: var(--surface-2); }
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.card:hover::after { transform: scaleX(1); }
/* --- Lambang kartu --------------------------------------------------------
   Lima petak ini seluruhnya teks, jadi kelimanya terbaca sebagai satu blok
   abu yang sama dan tidak ada satu pun yang jadi pegangan mata.

   Lambangnya digambar sendiri, bukan diambil dari pustaka ikon: goresan
   1,5px bersudut siku dengan simpul di ujungnya, bahasa yang sama dengan
   jalur sirkuit pada lambang Barbertech dan dengan bagan ekosistem di bab
   sebelumnya. Pustaka ikon mana pun akan membawa gaya asing ke sini.
   ------------------------------------------------------------------------ */
.card__ikon {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.25rem;
  color: var(--text);
  transition: transform 0.35s var(--ease-out);
}
.card__ikon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.card:hover .card__ikon { transform: translateY(-2px); }

.card__mark {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
/* Di petak berlambang, penanda kecilnya mundur jadi abu: yang jadi jangkar
   hitam sekarang lambangnya. Petak di halaman lain tidak berlambang, jadi
   penandanya tetap hitam supaya tidak kehilangan satu-satunya aksennya. */
.cards--five .card__mark { color: var(--text-faint); }
.card h3 { margin-bottom: 0.65rem; }
.card p { font-size: 0.9375rem; color: var(--text-dim); }

/* --- Daftar harga --------------------------------------------------------- */
.pricelist { margin-top: 3rem; }
.pricelist__group + .pricelist__group { margin-top: 3.5rem; }

.pricelist__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.7rem;
}
.pricelist__caption span {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Kepala bab dibelah dua. Judul dan kalimatnya sama-sama menempel ke kiri,
   jadi hampir separuh kanan babnya kosong sepanjang 340 piksel. */
.harga__kepala {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}
.harga__kepala .lead { margin: 0; max-width: 46ch; }
@media (max-width: 62rem) {
  .harga__kepala { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem 7rem;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.25s var(--ease);
}

.pricelist:has(.gauge__bar) .row {
  grid-template-columns: minmax(0, 1fr) 13.5rem 7rem;
}

/* Pengganjal kolom yang kosong tidak perlu ikut jadi baris kedua di layar
   sempit; tanpa ini tiap baris menu kopi dapat satu baris hampa. */
.row .gauge:empty { display: none; }

/* Baris kepala: nama kolom plus sumbu waktunya. Ditaruh di dalam petak yang
   sama dengan barisnya, jadi sumbunya pasti lurus dengan jalur batang di
   bawahnya tanpa perlu dihitung. */
.row--kepala {
  align-items: end;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.row--kepala__kanan { text-align: right; }

.sumbu {
  position: relative;
  flex: 1;
  height: 1.5rem;
  align-self: end;
}
.sumbu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.95rem;
  height: 1px;
  background: var(--line-strong);
}
.sumbu i {
  position: absolute;
  left: var(--x);
  bottom: 0.95rem;
  width: 1px;
  height: 5px;
  background: var(--line-strong);
}
.sumbu i:last-of-type { transform: translateX(-1px); }
.sumbu b {
  position: absolute;
  left: var(--x);
  bottom: 0;
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  transform: translateX(-50%);
}
.sumbu b:first-of-type { transform: none; }
.sumbu b:last-of-type { transform: translateX(-100%); }
.row:hover { border-bottom-color: var(--line-strong); }
.row__name { font-weight: 600; }
.row__desc {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--text-faint);
  margin-top: 0.15rem;
}
.row__price {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.gauge { display: flex; align-items: center; gap: 0.7rem; }
.gauge__bar { flex: 1; height: 6px; background: var(--surface-3); position: relative; min-width: 2.5rem; }
/* Isinya dulu diberi warna `var(--accent-deep)`, dan sifat itu TIDAK PERNAH
   ada di berkas ini: dipakai sekali di sini, tidak pernah ditetapkan. Nilai
   yang tidak sah membuat `background` jatuh ke tanpa-nilai, jadi kelima
   batangnya bening. Kalimat pembuka bab berbunyi "batang di tiap baris
   menunjukkan lama pengerjaan", sementara yang terlihat cuma jalur abu yang
   sama panjang di semua baris. */
.gauge__bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); display: block; }
/* Lebarnya dikunci supaya angka menitnya berangkat dari titik yang sama dan
   semua jalur batang berakhir di tepi yang sama pula. */
.gauge__val {
  width: 3.5rem;
  flex: none;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--text-faint);
  white-space: nowrap;
}

/* Batangnya menggambar dirinya sendiri saat babnya dicapai. Ini bagan, jadi
   geraknya menerangkan isinya: yang lama tumbuh lebih panjang. */
html.js .gauge__bar i {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.85s var(--ease-out);
}
html.js .pricelist.is-in .gauge__bar i { transform: none; }
html.js .pricelist.is-in .row:nth-child(2) .gauge__bar i { transition-delay: 60ms; }
html.js .pricelist.is-in .row:nth-child(3) .gauge__bar i { transition-delay: 130ms; }
html.js .pricelist.is-in .row:nth-child(4) .gauge__bar i { transition-delay: 200ms; }
html.js .pricelist.is-in .row:nth-child(5) .gauge__bar i { transition-delay: 270ms; }
html.js .pricelist.is-in .row:nth-child(6) .gauge__bar i { transition-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .gauge__bar i { transform: none; transition: none; }
}

.tag {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.12rem 0.45rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--paper);
  vertical-align: 0.15em;
}

.footnote { margin-top: 1.75rem; font-size: 0.875rem; color: var(--text-faint); }
.footnote a { color: var(--text-dim); text-underline-offset: 4px; }
.footnote a:hover { color: var(--accent); }

/* --- Halaman kopi penuh: seluruh ruang berpindah ke warna kafe ------------ */
body.page--coffee {
  background: var(--coffee);
  color: var(--coffee-text);
  --paper: var(--coffee);
  --surface: var(--coffee-2);
  --surface-2: #29201e;
  --surface-3: #332826;
  --line: var(--coffee-line);
  --line-strong: rgba(240, 232, 222, 0.28);
  --text: var(--coffee-text);
  --text-dim: var(--coffee-dim);
  --text-faint: #8d7f77;
  --accent: var(--accent-bright);
  --accent-rgb: 241, 234, 226;
}
body.page--coffee .foot { border-top: 1px solid var(--line-strong); }
/* Logo tinta dibalik agar terbaca di halaman berlatar gelap. */
body.page--coffee .brand img { filter: invert(1) brightness(0.96); }

/* --- Bab kopi: satu-satunya pergeseran ke warna hangat -------------------- */
.coffee {
  position: relative;
  overflow: hidden;
  background: var(--coffee);
  color: var(--coffee-text);
  --paper: var(--coffee);
  --surface: var(--coffee-2);
  --surface-2: #29201e;
  --surface-3: #332826;
  --line: var(--coffee-line);
  --line-strong: rgba(240, 232, 222, 0.28);
  --text: var(--coffee-text);
  --text-dim: var(--coffee-dim);
  /* Dicerahkan dari #8d7f77. Kolam cahaya menaikkan dasar tergelap dari
     rgb(22,16,15) ke rgb(42,36,34) di titik paling terangnya, dan di situ
     nilai lama turun ke 3,96:1, di bawah ambang 4,5:1. Nilai ini lolos di
     kedua dasar: 5,86:1 di luar cahaya, 4,76:1 tepat di tengahnya. */
  --text-faint: #9b8d84;
  --accent: var(--accent-bright);
  --accent-rgb: 241, 234, 226;
}
/* Cahaya hangat di ruang gelap.

   Bab ini satu-satunya yang berlatar gelap di seluruh situs, tapi digambar
   sebagai bidang hitam rata tanpa kedalaman sama sekali. Dua kolam cahaya
   ini memberinya arah, seperti lampu gantung di atas meja, dan bernapas
   pelan dengan dua putaran berbeda supaya cahayanya bergeser, tidak
   berkedip. Warnanya diambil dari tinta kopi yang sudah ada, bukan warna
   baru: putih tulang pada alpha rendah. */
.coffee::before,
.coffee::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.coffee::before {
  top: -14%;
  right: -8%;
  width: min(52rem, 80vw);
  background: radial-gradient(circle, rgba(241, 234, 226, 0.09) 0%, transparent 62%);
  animation: kopi-cahaya 11s ease-in-out infinite;
}
.coffee::after {
  bottom: -20%;
  left: -12%;
  width: min(40rem, 68vw);
  background: radial-gradient(circle, rgba(241, 234, 226, 0.06) 0%, transparent 66%);
  animation: kopi-cahaya 15s ease-in-out infinite reverse;
}
@keyframes kopi-cahaya {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.09); }
}
.coffee > .wrap { position: relative; z-index: 1; }

/* Kolom kanan kepala bab. Sebelumnya cuma lencana selebar 7rem yang duduk
   di pojok, lalu sekitar 400 piksel kekosongan di samping paragrafnya. */
.coffee__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.coffee__sisi { display: grid; gap: 1.5rem; justify-items: end; }
.coffee__mark { width: 7rem; flex: none; }
.coffee__potret { width: 100%; aspect-ratio: 4 / 3; }
.coffee__quote {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin: 1.5rem 0 0;
}

.menugrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 2.5rem 3rem;
  margin-top: 3.5rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--line);
}
.menugrid h3 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.15rem;
}
.menugrid ul { list-style: none; margin: 0; padding: 0; }
.menugrid li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.menugrid li span:last-child { font-family: var(--mono);
  font-weight: 500; font-size: 0.8125rem; color: var(--text-faint); white-space: nowrap; }

/* Menunya datang baris demi baris, kolom demi kolom, seperti daftar yang
   sedang dibacakan. Selama ini bab kopi tidak punya satu pun gerak. */
html.js .menugrid li {
  opacity: 0;
  transform: translateY(0.55rem);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
html.js .menugrid.is-in li {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--kolom, 0ms) + var(--urut, 0ms));
}
.menugrid > div:nth-child(2) { --kolom: 100ms; }
.menugrid > div:nth-child(3) { --kolom: 200ms; }
.menugrid li:nth-child(1) { --urut: 0ms; }
.menugrid li:nth-child(2) { --urut: 70ms; }
.menugrid li:nth-child(3) { --urut: 140ms; }
.menugrid li:nth-child(4) { --urut: 210ms; }
.menugrid li:nth-child(5) { --urut: 280ms; }
.menugrid li:nth-child(6) { --urut: 350ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .menugrid li { opacity: 1; transform: none; transition: none; }
  .coffee::before,
  .coffee::after { animation: none; }
}

@media (max-width: 62rem) {
  .coffee__head { grid-template-columns: minmax(0, 1fr); }
  .coffee__sisi {
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 1.5rem;
  }
  .coffee__potret { aspect-ratio: 16 / 10; }
}

@media (max-width: 40rem) {
  .coffee__sisi { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .coffee__potret { aspect-ratio: 4 / 3; }
}

/* --- Cabang --------------------------------------------------------------- */
.branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1.5rem; margin-top: 3rem; }

.branch {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.branch:hover { border-color: var(--line-strong); background: var(--surface-2); }
.branch__meta { font-family: var(--mono);
  font-weight: 500; font-size: 0.8125rem; color: var(--text-dim); }
/* `1fr` sama dengan `minmax(auto, 1fr)`, dan `auto` tidak pernah menyempit di
   bawah lebar kata terpanjang di dalamnya. Nama Instagram seperti
   @barbertech.pondokbambu tidak punya spasi, jadi kolomnya menolak mengecil
   dan mendorong seluruh kartu keluar layar. `minmax(0, 1fr)` mencabut lantai
   itu, dan `overflow-wrap` mengizinkan nama panjang dipatahkan. */
.branch__meta dl { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: 0.5rem 1rem; margin: 0; }
.branch__meta dd { overflow-wrap: anywhere; }
.branch__meta dt { color: var(--text-faint); }
.branch__meta dd { margin: 0; color: var(--text); }
.branch__meta a { text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.branch__meta a:hover { color: var(--accent); }
.branch__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: auto; padding-top: 0.5rem; }


/* --- Teks panjang --------------------------------------------------------- */
.prose { max-width: 62ch; color: var(--text-dim); }
.prose p + p { margin-top: 1.15rem; }
.prose h3 { color: var(--text); margin: 2.5rem 0 0.85rem; }
.prose ul { margin: 1.15rem 0 0; padding-left: 1.15rem; }
.prose li { margin-bottom: 0.6rem; }
.prose li::marker { color: var(--accent); }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: clamp(2rem, 4vw, 3.5rem); margin-top: 3rem; }

/* --- Garis waktu ----------------------------------------------------------
   Sebelumnya tiga baris teks yang dipisah garis rambut: tidak ada satu pun
   tanda bahwa ini urutan waktu. Sekarang ada batang tegak dengan simpul di
   tiap kejadian, dan tanggalnya dipecah jadi angka tahun yang besar dengan
   bulannya di bawah, jadi ada irama angka di sepanjang batangnya.

   Simpulnya kotak, bukan bulat, mengikuti simpul jalur sirkuit pada lambang.
   ------------------------------------------------------------------------ */
.timeline { list-style: none; margin: 3rem 0 0; padding: 0; }
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 2.75rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}

/* Batang tegak di tengah selanya. Tiap baris menggambar ruasnya sendiri,
   lalu ruas pertama dan terakhir dipangkas supaya batangnya mulai dan
   berhenti tepat di simpul, bukan menggantung di udara. */
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(6.5rem + 1.375rem);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}
.timeline li:first-child::before { top: 2.375rem; }
.timeline li:last-child::before { bottom: auto; height: 2.375rem; }

.timeline li::after {
  content: "";
  position: absolute;
  left: calc(6.5rem + 1.375rem);
  top: 2.375rem;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -3px;
  background: var(--text);
}

.timeline time {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.timeline time b {
  display: block;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.timeline time span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.timeline p { font-size: 0.9375rem; color: var(--text-dim); }
.timeline b { color: var(--text); font-weight: 600; }

/* --- Dua nama -------------------------------------------------------------
   Judul babnya berbunyi "Empat tahun, dua nama", tapi tidak ada satu pun
   yang memperlihatkan nama itu, dan kolom judulnya kosong sepanjang sisa
   bab. Di sini nama lamanya berdiri di atas, lambang barunya di bawah,
   disambung batang yang sama dengan garis waktunya.
   ------------------------------------------------------------------------ */
.duanama {
  position: relative;
  margin-top: 2.75rem;
  padding-left: 1.6rem;
}
.duanama::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.45rem;
  bottom: 0.9rem;
  width: 1px;
  background: var(--line-strong);
}
.duanama__sisi { position: relative; }
.duanama__sisi + .duanama__sisi { margin-top: 1.9rem; }
.duanama__sisi::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  top: 0.3rem;
  width: 7px;
  height: 7px;
  background: var(--text);
}
/* Simpul nama lama dibiarkan kosong: yang berlalu digambar sebagai garis,
   yang berlaku sekarang digambar sebagai tinta penuh. */
.duanama__sisi--lama::before {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.duanama__tahun {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}
.duanama__nama {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--text-dim);
}
.duanama__logo { display: block; margin-top: 0.6rem; height: 1.9rem; width: auto; }

/* --- Bagan ekosistem ------------------------------------------------------
   Kalimat di atasnya berbunyi "satu sistem terintegrasi yang menghubungkan
   ... dalam satu ekosistem", sementara yang tergambar empat keping yang
   tidak tersambung apa pun. Empat cabang sekarang benar-benar bertemu di
   satu batang, memakai sudut siku seperti jalur pada lambang.
   ------------------------------------------------------------------------ */
.ekosistem {
  position: relative;
  margin-top: 2rem;
  /* Kolom visi cuma selebar 298px. Dengan batang di 8,75rem, keping cabangnya
     tinggal 122px dan dua di antaranya pecah jadi dua baris, jadi tingginya
     berselang-seling seperti tidak disengaja. Ruangnya dirapatkan. */
  padding-right: 7.25rem;
}
.ekosistem::before {
  content: "";
  position: absolute;
  right: 7.25rem;
  top: 1.15rem;
  bottom: 1.15rem;
  width: 1px;
  background: var(--line-strong);
}
.ekosistem__cabang {
  list-style: none;
  margin: 0;
  padding: 0 2rem 0 0;
  display: grid;
  gap: 0.55rem;
}
.ekosistem__cabang li {
  position: relative;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-align: right;
}
/* Jalur mendatar dari tiap keping ke batang, plus simpul di pertemuannya. */
.ekosistem__cabang li::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 2rem;
  height: 1px;
  background: var(--line-strong);
}
.ekosistem__cabang li::after {
  content: "";
  position: absolute;
  left: calc(100% + 2rem);
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--text);
}
.ekosistem__inti {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rem;
  margin: 0;
  padding: 0.8rem 0.5rem;
  background: var(--text);
  color: var(--paper);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
}
.ekosistem__inti::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 1.25rem;
  height: 1px;
  background: var(--line-strong);
}

@media (max-width: 46rem) {
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; padding-left: 1.75rem; }
  .timeline li::before { left: 3px; }
  .timeline li::after { left: 3px; top: 2.25rem; }
  .timeline time b { font-size: 1.5rem; }

  /* Batang mendatar butuh sekitar 11rem di kanan; di bawah lebar ini yang
     tersisa untuk nama cabangnya tinggal beberapa karakter. */
  .ekosistem { padding-right: 0; }
  .ekosistem::before { display: none; }
  .ekosistem__cabang { padding-right: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ekosistem__cabang li { text-align: left; }
  .ekosistem__cabang li::before,
  .ekosistem__cabang li::after { display: none; }
  .ekosistem__inti {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 0.55rem;
  }
  .ekosistem__inti::before { display: none; }
}

@media (max-width: 46rem) {
  .row { grid-template-columns: minmax(0, 1fr) 7rem; gap: 0.5rem 1rem; }
  .row .gauge { grid-column: 1 / -1; grid-row: 2; max-width: 16rem; }
  .row__price { grid-column: 2; grid-row: 1; }
  /* Sumbunya butuh lebar penuh jalur batang; di bawah lebar ini angkanya
     saling menempel, jadi kepalanya diringkas jadi nama kolom saja. */
  .row--kepala .gauge { display: none; }
}

/* --- Formulir ------------------------------------------------------------- */
.booking__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: 3rem;
}
.form { max-width: 44rem; }

.field { margin-bottom: 1.75rem; }
.field > label,
.field__legend {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.7rem;
}
.field__hint { font-size: 0.8125rem; color: var(--text-faint); margin-top: 0.6rem; }

.input, .select, .textarea {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.8rem 0.95rem;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }
.textarea { resize: vertical; min-height: 6rem; }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 55%, calc(100% - 0.85rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.select option { background: var(--surface); color: var(--text); }

fieldset { border: 0; margin: 0; padding: 0; }

.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.choice input:hover + span { border-color: var(--line-strong); color: var(--text); }
.choice input:checked + span { background: var(--text); border-color: var(--text); color: var(--paper); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr)); gap: 0.5rem; }
.times .choice input:disabled + span {
  color: var(--text-faint);
  opacity: 0.4;
  cursor: not-allowed;
  background: repeating-linear-gradient(135deg, transparent, transparent 4px, var(--line) 4px, var(--line) 5px);
}

.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-left-width: 3px;
  background: var(--surface);
  font-size: 0.9375rem;
  margin-bottom: 1.75rem;
}
.notice--error { border-left-color: var(--ember); color: var(--ember); }
.notice--wait { border-left-color: var(--text-faint); color: var(--text-dim); }

.summary {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  padding: 1.5rem;
  position: sticky;
  top: 6.5rem;
}
.summary__title {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.summary dl { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.6rem 0.85rem; margin: 1.15rem 0 0; font-size: 0.875rem; }
.summary dt { font-family: var(--mono);
  font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); padding-top: 0.15rem; }
.summary dd { margin: 0; font-weight: 500; }
.summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px dashed var(--line-strong);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.summary__total b { font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.02em; color: var(--accent); text-transform: none; }
.summary__note { margin-top: 1.15rem; font-size: 0.75rem; color: var(--text-faint); }

.receipt {
  border: 1px solid var(--text);
  background: linear-gradient(180deg, var(--paper), var(--surface));
  padding: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 34rem;
  box-shadow: 0 26px 70px -38px rgba(16, 17, 18, 0.35);
}
.receipt__ref {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  letter-spacing: 0.05em;
  color: var(--accent);
  padding-bottom: 1.15rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px dashed var(--line-strong);
}
.receipt dl { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.7rem 1rem; margin: 0 0 1.75rem; font-size: 0.9375rem; }
.receipt dt { font-family: var(--mono);
  font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); padding-top: 0.2rem; }
.receipt dd { margin: 0; font-weight: 500; }

/* --- Ajakan penutup ------------------------------------------------------- */
.closing {
  position: relative;
  border-top: 1px solid var(--line);
  padding-block: clamp(4rem, 7vw, 6.5rem);
  overflow: hidden;
}
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 120% at 50% 100%, var(--accent-glow), transparent 70%);
  pointer-events: none;
}
.closing__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: center; }

/* --- Footer --------------------------------------------------------------- */
.foot {
  background: var(--coffee);
  color: var(--coffee-dim);
  --accent: var(--accent-bright);
  --line: var(--coffee-line);
  padding-block: clamp(3.5rem, 5vw, 5rem) 2rem;
  font-size: 0.9375rem;
}
/* Empat blok, dan kolomnya ditulis tegas.

   Sebelumnya `repeat(auto-fit, ...)` dengan LIMA blok: di layar lebar cuma
   empat yang muat sebaris, jadi blok kelima terlempar sendirian ke baris
   kedua dengan ruang kosong lebar di sebelahnya, dan dua cabang yang
   seharusnya sejajar malah terpisah baris. Kolom yang ditulis tegas
   menghilangkan kemungkinan itu sama sekali. */
.foot__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.foot__brand { max-width: 22rem; }
.foot img { height: 2.5rem; width: auto; margin-bottom: 1.25rem; }
.foot__brand p { margin: 0; line-height: 1.6; }

/* Kontak merek dipisahkan garis tipis supaya terbaca sebagai lapisan lain,
   bukan lanjutan kalimat di atasnya. */
.foot__kontak {
  margin-top: 1.5rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* Jam buka bukan tautan, jadi dibedakan supaya tidak terlihat bisa ditekan
   padahal tidak.

   Nilainya ditulis langsung, TIDAK memakai `--text-faint`. Token itu
   disetel untuk latar terang (#636568), dan di atas latar footer yang
   gelap ia cuma 3,22:1, di bawah ambang AA. Nilai di bawah ini 4,87:1. */
.foot__jam { color: #8d7f77; }

@media (max-width: 62rem) {
  /* Dua kolom, dan blok merek TIDAK membentang.

     Kalau ia membentang, sisa tiga blok masuk grid dua kolom dan Pondok
     Bambu kembali sendirian di baris ketiga, persis masalah yang tadi
     diperbaiki. Dengan merek ikut jadi satu kolom, isinya genap empat:
     merek dan jelajahi di baris pertama, dua cabang bersebelahan di baris
     kedua. */
  .foot__grid { grid-template-columns: 1fr 1fr; row-gap: clamp(2.25rem, 5vw, 3rem); }
  .foot__brand { max-width: none; }
}
@media (max-width: 34rem) {
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__brand { grid-column: auto; }
}
.foot h2 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.15rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.6rem; }
.foot a { text-decoration: none; color: var(--coffee-dim); transition: color 0.2s var(--ease); }
.foot a:hover { color: var(--coffee-text); }
.foot__base {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  /* Nilai lama #7d6b65 hanya 3,73:1 di atas latar footer, di bawah ambang
     AA untuk teks sekecil ini. Ini yang paling dekat dengan nada lamanya
     yang tetap lolos 4,5:1. */
  color: #95837c;
}

/* --- Responsif ------------------------------------------------------------ */
@media (max-width: 68rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero__mark { order: -1; }
  /* Saat kolomnya menumpuk, pelat tidak boleh ikut selebar kolom: pada 1024px
     ia jadi 942px dan isinya cuma lambang selebar 320px, jadi terbaca sebagai
     kotak yang kosong. Lebarnya dikunci dan tetap rata kiri seperti teksnya,
     lalu lambangnya ditengahkan di dalam pelat. */
  .hero__mark { justify-content: flex-start; }
  .hero__plat { width: min(30rem, 100%); padding: clamp(1.2rem, 4vw, 1.8rem); }
  .hero__mark-media { width: min(16rem, 74%); margin-inline: auto; }
  .hero::before { right: 50%; top: 30%; transform: translate(50%, -50%); }
  .scan { grid-template-columns: minmax(0, 1fr); }
  .coffee__head { grid-template-columns: minmax(0, 1fr); }
  .coffee__mark { order: -1; }
  .booking__grid { grid-template-columns: minmax(0, 1fr); }
  .closing__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Header punya ambangnya sendiri, lebih lebar dari sisanya.

   Menu mendatar berisi enam tautan plus tombol booking membutuhkan sekitar
   810 piksel. Kalau pergantiannya disamakan dengan bagian lain di 768
   piksel, ada jalur sempit antara 769 dan 810 tempat menu desktop sudah
   muncul padahal belum muat, dan halamannya bisa digeser mendatar. Diuji:
   di 769 piksel header meluber 36 piksel sebelum perbaikan ini. */
@media (max-width: 52rem) {
  .nav { display: none; }
  .nav.is-open {
    display: flex;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.5rem;
  }
  .nav.is-open a { padding: 0.95rem 0; border-bottom: 1px solid var(--line); }
  .nav.is-open .nav__cta { display: block; color: var(--accent); }
  .burger { display: block; }
  .masthead .btn { display: none; }
  .masthead__bar { min-height: 4.25rem; }
  .brand img { height: 2.5rem; }
}

/* Pita ketersediaan kursi ikut ambang header, bukan ambang isi halaman.

   Deretan batang jamnya membutuhkan sekitar 810 piksel, persis seperti menu
   mendatar. Batang setipis itu juga tidak bisa ditekan dengan jari, jadi di
   bawah ambang ini yang ditampilkan cukup jumlah kursinya dan satu tombol
   yang jelas. */
@media (max-width: 52rem) {
  .strip__inner { padding-block: 0.85rem; justify-content: space-between; row-gap: 0.75rem; }
  .strip__slots { display: none !important; }
  .strip__label { width: auto; }
  .strip__note { width: 100%; justify-content: space-between; }
  .strip__note .btn { min-height: 2.75rem; }
}

@media (max-width: 48rem) {
  :root { --rail: 0; }
  .chapter__grid { grid-template-columns: minmax(0, 1fr); }
  .node { display: none; }
  .row { grid-template-columns: minmax(0, 1fr) 6.5rem; }
  .row .gauge { grid-column: 1 / -1; grid-row: 2; max-width: 12rem; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .summary { position: static; }
  /* Panggung persegi memotong kepala dan dagunya: fotonya potret 1000x1250,
     dan object-fit cover membuang sekitar seperlima atas dan bawah. Tetap
     potret, jadi wajahnya utuh dan titik-titiknya jatuh di tempatnya. */
  .readout {
    position: static;
    width: 100%;
    min-height: 6.5rem;
    margin-top: 1px;
    background: var(--surface);
    backdrop-filter: none;
  }
  /* Ada ruang untuk labelnya sekarang panelnya tidak lagi di atas wajah. */
  .scan__dot::after { font-size: 0.5625rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .strip__slots--fresh .slot { transform: none; opacity: 1; }
  /* Gerak dimatikan, lambang tetap utuh dan terbaca. */
  .markfx * { animation: none !important; }
  .mfx-lane, .mfx-faceglow { opacity: 0 !important; }
  .mfx-node { opacity: 0 !important; }
}

/* ==========================================================================
   Lapisan gambar dan gerak
   ========================================================================== */

/* --- Bingkai foto --------------------------------------------------------- */
.media {
  position: relative;
  /* <figure> bawaan peramban punya margin kiri-kanan 40px. Bingkai di dalam
     .duo sudah dinolkan, tapi yang berdiri sendiri belum, jadi fotonya
     menggeser 40px dari kolomnya. */
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.1s var(--ease-out), filter 0.6s var(--ease);
}
.media:hover img { transform: scale(1.09); }

/* Sapuan tirai saat bingkai masuk layar. */
.media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--paper);
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 0.95s var(--ease-out);
}
.media.is-in::before { transform: scaleX(0); }

/* Kabut di kaki gambar supaya keterangan tetap terbaca. */
.media--caption::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(180deg, transparent, rgba(16, 17, 18, 0.82));
  pointer-events: none;
}
.media__caption {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.1rem;
  z-index: 3;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.media__caption b { color: var(--accent-bright); font-weight: 500; }

.media--tall { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 16 / 9; }
.media--square { aspect-ratio: 1 / 1; }

/* Susunan dua gambar bertumpuk untuk bab bercerita. */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.duo > figure { margin: 0; }
.duo > :nth-child(2) { margin-top: clamp(2rem, 6vw, 5rem); }

/* --- Pita berjalan -------------------------------------------------------- */
.ticker {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 1.15rem;
  background: var(--surface);
}
.ticker__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: ticker-run 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span {
  display: flex;
  align-items: center;
  gap: 3rem;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.ticker span::after {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  flex: none;
}
@keyframes ticker-run { to { transform: translateX(-50%); } }

/* --- Muncul saat digulir -------------------------------------------------- */
/* Hanya aktif setelah skrip menandai dokumen, jadi tanpa JavaScript seluruh
   konten tetap terlihat. */
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
html.js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
html.js .reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
html.js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: 90ms; }
html.js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: 180ms; }
html.js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: 270ms; }
html.js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: 360ms; }
html.js .reveal-stagger.is-in > *:nth-child(6) { transition-delay: 450ms; }

/* Judul yang tersingkap baris demi baris. */
html.js .reveal-lines span { display: block; overflow: hidden; }
html.js .reveal-lines span > i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
  transition: transform 0.95s var(--ease-out);
}
html.js .reveal-lines.is-in span > i { transform: none; }
html.js .reveal-lines.is-in span:nth-child(2) > i { transition-delay: 90ms; }
html.js .reveal-lines.is-in span:nth-child(3) > i { transition-delay: 180ms; }

/* --- Angka yang berhitung naik -------------------------------------------- */
.hero__fact b { font-variant-numeric: tabular-nums; }

/* --- Kedalaman saat menggulir --------------------------------------------- */
.parallax { will-change: transform; }

/* --- Kursor ke arah bab kopi ---------------------------------------------- */

@media (max-width: 62rem) {
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo > :nth-child(2) { margin-top: 0; }
  .duo > figure { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal-stagger > * { opacity: 1; transform: none; }
  html.js .reveal-lines span > i { transform: none; }
  .media::before { display: none; }
  .media img { transform: none; }
  .media:hover img { transform: none; }
  .ticker__track { animation: none; }
}

/* ==========================================================================
   Bab tambahan yang mengikuti susunan company profile
   ========================================================================== */

/* --- Bab identitas: dua bisnis dalam satu tempat -------------------------- */
.identity {
  /* Dasarnya disamakan dengan bab bernada lain supaya iramanya satu. */
  border-block: 1px solid var(--line);
  background: var(--ground);
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}
/* Bab ini dulu seluruhnya dipusatkan: label, kedua panel, sampai kalimat
   penutupnya. Seluruh situs lain rata kiri, jadi bab ini terbaca seperti
   potongan dari desain lain. Sekarang ia ikut irama yang sama, dan yang
   dulu jadi kalimat penutup di kaki bab dinaikkan jadi pengantar. */
.identity__kepala { max-width: 60ch; }
.identity__lead {
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  color: var(--text-dim);
  max-width: 54ch;
}

/* --- Visi ----------------------------------------------------------------- */
.visi {
  border-left: 2px solid var(--text);
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
}
.visi__lead {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.stack {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.stack li {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  color: var(--text-dim);
  background: var(--surface);
}

/* --- Kontak --------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.contact h3 { margin-bottom: 1rem; }
.contact__list { list-style: none; margin: 0; padding: 0; }
.contact__list li { margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.9375rem; }
.contact__list a { text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.contact__list a:hover { color: var(--accent); }

.branch__blurb { font-size: 0.9375rem; color: var(--text-dim); }

@media (max-width: 62rem) {
  .visi { border-left: 0; border-top: 2px solid var(--text); padding-left: 0; padding-top: 1.75rem; }
}

/* Lima keunggulan: tiga di atas, dua di bawah. Auto-fit akan menyisakan
   satu kartu sendirian, jadi kolomnya ditentukan tegas. */
/* Jumlah kolom petak kartu ditentukan oleh JUMLAH KARTUNYA, bukan oleh
   lebar yang kebetulan tersedia.

   `repeat(auto-fit, ...)` memilih sebanyak mungkin kolom yang muat, dan
   begitu jumlah kartu tidak habis dibaginya, sisanya jadi sel kosong. Di
   petak ini sel kosong TERLIHAT: wadahnya berlatar garis, dan latar itulah
   yang membentuk garis rambut antar kartu, jadi sel yang tidak terisi
   tampil sebagai kotak abu menganga.

   Terukur sebelum diperbaiki: enam kartu kemitraan masuk empat kolom di
   1180 piksel ke atas dan hanya mengisi 73 persen petaknya; tiga kartu
   cabang masuk dua kolom di 700 piksel dan mengisi 75 persen. */

/* Tiga kartu: tiga kolom, atau dua dengan yang terakhir membentang. */
.cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 62rem) {
  .cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--three .card:last-child { grid-column: span 2; }
}
@media (max-width: 40rem) {
  .cards--three { grid-template-columns: minmax(0, 1fr); }
  .cards--three .card:last-child { grid-column: auto; }
}

@media (min-width: 62rem) {
  .cards--five .card:last-child {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
    align-content: start;
  }
  .cards--five .card:last-child > .card__ikon { grid-area: 1 / 1; }
  .cards--five .card:last-child > .card__mark { grid-area: 2 / 1; }
  .cards--five .card:last-child > h3 { grid-area: 3 / 1; margin-bottom: 0; }
  .cards--five .card:last-child > p {
    grid-area: 1 / 2 / 4 / 3;
    align-self: end;
    margin: 0;
  }
}

/* Enam kartu: tiga atau dua kolom, keduanya habis membagi. Empat kolom
   tidak pernah boleh, karena menyisakan dua sel. */
.cards--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 62rem) { .cards--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .cards--six { grid-template-columns: minmax(0, 1fr); } }

/* Lima kartu tidak pernah habis dibagi tiga maupun dua, jadi selalu ada
   satu sel yang tersisa kosong. Dan sel kosong di sini TERLIHAT: wadahnya
   berlatar garis, dan latar itulah yang membentuk garis rambut pemisah
   antar kartu, sehingga sel yang tidak terisi tampil sebagai kotak abu.

   Kartu terakhir dibuat membentang mengisi sisa kolom. Tiga kolom jadi
   3 + (1 + 2), dua kolom jadi 2 + 2 + (2). Tidak ada sel yang menganga. */
.cards--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--five .card:last-child { grid-column: span 2; }

@media (max-width: 62rem) {
  .cards--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .cards--five { grid-template-columns: minmax(0, 1fr); }
  /* Satu kolom: membentang tidak ada artinya dan justru memicu kolom hantu. */
  .cards--five .card:last-child { grid-column: auto; }
}

/* ==========================================================================
   Cetak: daftar harga dan alamat sering dicetak atau disimpan sebagai PDF,
   jadi buang yang tidak berguna di atas kertas dan kembalikan ke hitam putih.
   ========================================================================== */
@media print {
  :root {
    --paper: #fff;
    --surface: #fff;
    --surface-2: #fff;
    --surface-3: #fff;
    --text: #000;
    --text-dim: #333;
    --text-faint: #555;
    --line: #bbb;
    --line-strong: #666;
    --accent: #000;
    --chapter-y: 1.25rem;
  }

  body { background: #fff; color: #000; }
  body::after { display: none; }

  .masthead, .strip, .hero__canvas, .hero__bg, .closing, .burger,
  .scan, .media, .ticker, .node, .booking__grid .summary,
  .hero__mark, .foot__base { display: none !important; }

  .hero { min-height: 0; padding-block: 0 1rem; }
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .chapter, .coffee, .foot { padding-block: 1rem; break-inside: avoid; }
  .chapter__grid { grid-template-columns: 1fr; }
  .coffee, .foot { background: #fff; color: #000; }
  .coffee .coffee__quote, .foot h2 { color: #000; }
  .foot a { color: #000; }

  .h-hero { font-size: 2rem; }
  .h-xl { font-size: 1.6rem; }
  .h-lg { font-size: 1.3rem; }

  .row { break-inside: avoid; }
  .gauge__bar { display: none; }

  /* Alamat tautan ikut tercetak supaya halaman tetap berguna di kertas. */
  .branch__meta a::after,
  .contact__list a::after { content: " (" attr(href) ")"; font-size: 0.7em; color: #555; }
  .branch__meta a[href^="https://wa.me/"]::after,
  .contact__list a[href^="https://wa.me/"]::after { content: ""; }

  a { text-decoration: none; }
  @page { margin: 14mm; }
}

/* ==========================================================================
   Ajakan menetap di layar kecil
   --------------------------------------------------------------------------
   Halamannya panjang, dan tombol booking di hero cepat hilang saat digulir.
   Batang ini muncul setelah hero lewat, jadi tidak bersaing dengan hero.
   ========================================================================== */
.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 45;
  display: none;
  gap: 0.6rem;
  padding: 0.7rem var(--gutter);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  /* Pekat. Batang ajakan menempel di atas isi yang lewat di baliknya, dan
     sedikit saja tembus sudah membuat teks di belakangnya terbaca. */
  background: var(--paper);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.32s var(--ease-out);
}
.dock.is-up { transform: none; }
.dock .btn { flex: 1 1 auto; min-height: 3rem; }
.dock .btn--ghost { flex: 0 0 auto; padding-inline: 1rem; }

/* Ikon WhatsApp digambar sendiri supaya tidak menarik berkas dari luar. */
.dock__wa { width: 20px; height: 20px; flex: none; fill: currentColor; }

@media (max-width: 52rem) {
  .dock { display: flex; }
  /* Ruang di kaki halaman supaya footer tidak tertutup batang. */
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
  /* Halaman booking tidak perlu, tombol kirimnya sudah jadi tujuan utama. */
  body.page--booking .dock { display: none; }
  body.page--booking { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dock { transition: none; }
}

/* ==========================================================================
   Perbaikan layar kecil
   ========================================================================== */
@media (max-width: 48rem) {
  /* Sasaran sentuh minimal 44px. */
  .btn--sm { min-height: 2.75rem; padding-inline: 1.1rem; }
  .burger { min-height: 2.75rem; }
  .strip__branch { min-height: 2.75rem; padding-inline: 1rem; }
  .nav.is-open a { padding-block: 1rem; }
  .brand { min-height: 2.75rem; align-items: center; }
  /* Tautan daftar di footer dan kontak diberi tinggi sentuh yang layak. */
  .foot li a,
  .contact__list a { display: inline-block; padding-block: 0.6rem; }
  .foot li, .contact__list li { margin-bottom: 0.2rem; }

  /* Angka harga diberi ruang sendiri agar nama layanan tidak terpotong. */
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 1rem; }
  .row__price { font-size: 0.9375rem; }

  /* Panggung pindai lebih ringkas. */
  .scan { gap: 1.75rem; }
  .step { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.85rem; padding-inline: 0.7rem 0.85rem; }
}

@media (max-width: 26rem) {
  .hero__facts { gap: 1.1rem 1.75rem; }
  .hero__fact b { font-size: 1.5rem; }
  .hero__actions .btn { width: 100%; }
  .branch__meta dl { grid-template-columns: 5rem minmax(0, 1fr); gap: 0.4rem 0.75rem; }
  .branch__actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Halaman kemitraan
   ========================================================================== */

/* --- Tahapan bernomor ----------------------------------------------------- */
.flow { list-style: none; margin: 3rem 0 0; padding: 0; counter-reset: none; }
.flow__step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.flow__step:last-child { border-bottom: 1px solid var(--line); }
.flow__no {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 0.2rem;
}
.flow__step h3 { margin-bottom: 0.5rem; }
.flow__step p { font-size: 0.9375rem; color: var(--text-dim); max-width: 58ch; }

/* --- Pertanyaan yang sering masuk ---------------------------------------- */
.faqs { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.5rem;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
/* Tanda tambah yang berubah jadi tanda kurang saat terbuka. */
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--text), var(--text)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--text), var(--text)) center / 1.5px 14px no-repeat;
  transition: transform 0.28s var(--ease), background-size 0.28s var(--ease);
}
.faq[open] summary::after {
  background:
    linear-gradient(var(--accent), var(--accent)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1.5px 0 no-repeat;
  transform: rotate(180deg);
}
.faq p { padding: 0 0 1.35rem; color: var(--text-dim); max-width: 62ch; font-size: 0.9375rem; }

/* --- Ajakan kemitraan di beranda ------------------------------------------ */
.invite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: center;
  margin-top: 2.5rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.invite__marks {
  display: flex;
  gap: 0.4rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.invite__marks span {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.35rem 0.7rem;
}

@media (max-width: 62rem) {
  .invite { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 48rem) {
  .flow__step { grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; }
  .faq summary { font-size: 1rem; }
}

/* ==========================================================================
   Tumpukan nilai di hero
   --------------------------------------------------------------------------
   Tiga baris pendek berisi apa yang pengunjung dapat, ditaruh sebelum tombol
   supaya keputusan diambil dengan alasan, bukan sekadar tergerak.
   ========================================================================== */
.stack--value {
  display: grid;
  gap: 0.45rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 42ch;
}
.stack--value li {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--body);
  font-size: 0.9375rem;
  letter-spacing: 0;
  color: var(--text-dim);
}
/* Simpul kecil, bahasa yang sama dengan jalur sirkuit di logo. */
.stack--value li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.55rem;
  margin-left: 0.25rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}
.stack--value li::after { content: none; }

.hero__risk {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-faint);
}

@media (max-width: 26rem) {
  .stack--value { margin-top: 1.35rem; }
}

/* --- Lambang tiga dimensi ------------------------------------------------
   Menimpa versi SVG hanya bila perangkatnya sanggup. Kelas "is-3d" dipasang
   oleh mark3d.js setelah semuanya siap, jadi kalau gagal di tengah jalan
   SVG-nya tetap di tempat dan tidak ada yang berkedip.
   ------------------------------------------------------------------------ */
.mark3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
  pointer-events: none;
}
.hero__mark-media.is-3d .mark3d { opacity: 1; }
.hero__mark-media.is-3d .markfx { opacity: 0; transition: opacity 0.5s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .mark3d { display: none; }
  .hero__mark-media.is-3d .markfx { opacity: 1; }
}

/* ==========================================================================
   Carousel reel Instagram
   --------------------------------------------------------------------------
   Digeser dengan scroll-snap bawaan peramban, bukan pustaka carousel: di
   ponsel sentuhannya jadi terasa alami, dan tidak ada berkas tambahan yang
   perlu diunduh.
   ========================================================================== */
/* Isi rel reel disusun oleh skrip. Tanpa skrip, yang tersisa hanya judul
   dan kotak kosong, jadi bagiannya disembunyikan saja. Bagian lain halaman
   ini tetap utuh tanpa skrip. */
html:not(.js) #reels { display: none; }

.reels__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.reels__nav { display: flex; gap: 0.5rem; flex: none; }
.reels__btn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.reels__btn:hover:not(:disabled) { background: var(--text); border-color: var(--text); color: var(--paper); }
.reels__btn:disabled { opacity: 0.3; cursor: default; }
.reels__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.reels__track {
  --reel-w: clamp(15rem, 23vw, 18rem);
  display: flex;
  gap: 1rem;
  margin: 2.5rem 0 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  /* Kartu yang sedang diputar berhenti di tengah rel, jadi kiri dan
     kanannya harus diberi ruang selebar setengah sisa rel. Tanpa ini,
     kartu pertama dan terakhir tidak akan pernah bisa sampai ke tengah. */
  padding: 0 max(0px, calc(50% - var(--reel-w) / 2)) 1rem;
}
.reels__track::-webkit-scrollbar { height: 4px; }
.reels__track::-webkit-scrollbar-track { background: var(--line); }
.reels__track::-webkit-scrollbar-thumb { background: var(--line-strong); }

.reel {
  position: relative;
  flex: 0 0 var(--reel-w);
  /* Embed Instagram membawa kepala profil dan baris suka di bawah videonya,
     jadi kartunya dibuat lebih jangkung dari rasio reel 9:16 biasa supaya
     tidak terpotong di tengah. */
  aspect-ratio: 9 / 17.4;
  scroll-snap-align: center;
  transform: scale(0.93);
  transition: transform 0.5s var(--ease);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.reel__frame, .reel iframe, .reel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.reel__video { object-fit: cover; background: var(--text); }

/* --------------------------------------------------------------------------
   Fokus tengah

   Hanya kartu yang berhenti di tengah rel yang tajam dan berputar. Kiri dan
   kanannya diburamkan supaya mata tahu ke mana harus melihat, dan supaya
   dua video lain tidak ikut berebut perhatian.

   Yang diburamkan gambarnya saja, bukan seluruh kartu, karena tombol suara
   dan tautan Instagram di atasnya harus tetap terbaca. Kartu yang sedang
   buram juga sedang dijeda, jadi buramnya menempel pada gambar diam dan
   tidak membebani penggambaran tiap bingkai.
   -------------------------------------------------------------------------- */
.reel__video,
.reel__frame {
  filter: blur(7px) saturate(0.75);
  transform: scale(1.06); /* menutup tepi yang menipis karena diburamkan */
  transition: filter 0.5s var(--ease), transform 0.5s var(--ease);
}
.reel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--paper);
  opacity: 0.42;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.reel.is-focus { transform: none; }
.reel.is-focus .reel__video,
.reel.is-focus .reel__frame { filter: none; transform: none; }
.reel.is-focus::before { opacity: 0; }

/* Kendali hanya berlaku untuk kartu yang sedang di tengah. Membiarkannya
   bisa ditekan pada kartu buram cuma memancing salah tekan. */
.reel:not(.is-focus) .reel__sound,
.reel:not(.is-focus) .reel__link {
  opacity: 0;
  pointer-events: none;
}

/* Kartu berkas sendiri tidak membawa kepala profil Instagram, jadi tingginya
   bisa kembali ke rasio reel apa adanya. Itu hanya berlaku kalau seluruh
   kartunya berkas sendiri: selama masih bercampur dengan embed, semuanya
   dijaga setinggi embed supaya barisnya tidak bergerigi. */
.reels__track--video .reel { aspect-ratio: 9 / 16; }

/* Tombol suara. Videonya berjalan tanpa suara sejak awal, karena itu satu
   satunya cara peramban mengizinkannya jalan sendiri. Tombol ini yang
   membuka suaranya, dan hanya satu kartu boleh bersuara.

   Letaknya di pojok atas, bukan bawah: di layar kecil batang ajakan yang
   menempel di dasar layar menutupi tepi bawah kartu. */
.reel__sound {
  position: absolute;
  right: 0.6rem;
  top: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(16, 17, 18, 0.82);
  border: 0;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.reel__sound:hover { background: rgba(16, 17, 18, 0.95); }
.reel__sound[data-muted="false"] { background: var(--paper); color: var(--text); }

/* Ikon pengeras suara digambar dari dua kotak: corongnya, lalu garis miring
   yang hanya muncul saat suaranya sedang mati. */
.reel__soundicon {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
  background: currentColor;
  clip-path: polygon(0 32%, 32% 32%, 68% 0, 68% 100%, 32% 68%, 0 68%);
}
.reel__sound[data-muted="true"] .reel__soundicon::after {
  content: "";
  position: absolute;
  left: 68%;
  top: 50%;
  width: 8px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: left center;
}

/* Sebelum embed-nya datang, kartunya menunjukkan denyut halus supaya jelas
   ada sesuatu yang sedang dimuat, bukan kotak kosong yang rusak. */
.reel--embed:not([data-filled])::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 250% 100%;
  animation: reel-wait 1.4s ease-in-out infinite;
}
@keyframes reel-wait {
  from { background-position: 130% 0; }
  to { background-position: -30% 0; }
}

/* Tautan keluar hanya muncul saat kartunya disentuh atau difokuskan. */
.reel__link {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  z-index: 2;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: rgba(16, 17, 18, 0.82);
  padding: 0.45rem 0.7rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.reel.is-focus:hover .reel__link,
.reel.is-focus .reel__link:focus-visible { opacity: 1; transform: none; }

@media (max-width: 48rem) {
  .reels__track {
    --reel-w: 74vw;
    gap: 0.75rem;
    /* Keluar dari kolom supaya kartu bisa benar-benar duduk di tengah layar,
       dengan tetangganya mengintip sedikit di kiri dan kanan. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: calc(50vw - var(--reel-w) / 2);
  }
  /* Tanpa tetikus tidak ada hover, jadi tautan pada kartu tengah langsung
     ditampilkan. */
  .reel.is-focus .reel__link { opacity: 1; transform: none; }
  .reels__head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .reels__track { scroll-behavior: auto; }
  .reel--embed:not([data-filled])::after { animation: none; }
  /* Buram dan redupnya tetap dipakai, karena itu penanda mana yang sedang
     aktif, bukan hiasan bergerak. Yang dimatikan perpindahannya. */
  .reel,
  .reel__video,
  .reel__frame,
  .reel::before,
  .reel__sound,
  .reel__link { transition: none; }
}

/* ==========================================================================
   Perapian layar kecil
   --------------------------------------------------------------------------
   Bagian ini sengaja ditaruh paling akhir supaya menimpa aturan di atasnya
   tanpa perlu menaikkan kekhususan pemilih.

   Dua hal yang diperbaiki: ukuran yang enak dibaca sambil dipegang, dan
   sasaran yang cukup besar untuk ujung jari. Keduanya dipisah, karena
   layar sempit belum tentu layar sentuh: jendela peramban yang dikecilkan
   di komputer tetap dipakai dengan tetikus.
   ========================================================================== */

@media (max-width: 48rem) {
  /* Label mikro dipakai sebagai penanda, bukan hiasan, jadi harus terbaca.
     10 piksel terlalu kecil untuk dibaca sambil memegang ponsel. */
  .tag,
  .card__mark,
  .scan__badge { font-size: 0.6875rem; }

  .media__caption { font-size: 0.6875rem; letter-spacing: 0.12em; }

  /* Nama isian formulir tidak boleh lebih kecil dari keterangannya. */
  .field > label,
  .field__legend { font-size: 0.75rem; letter-spacing: 0.14em; }
}

/* Sasaran sentuh. Dipisah dengan `pointer: coarse` karena hanya jari yang
   membutuhkannya; memperbesar sasaran untuk tetikus cuma merenggangkan
   tata letak tanpa alasan. */
@media (pointer: coarse) {
  /* Nomor telepon dan Instagram pada kartu cabang adalah tautan sungguhan,
     tapi tingginya hanya setinggi barisnya. Barisnya direnggangkan dan
     tautannya diberi ruang tekan di atas dan di bawah, dengan margin
     negatif supaya tampilannya tidak berubah. Jaraknya tetap lebih besar
     dari perbesarannya, jadi sasaran dua baris tidak saling bertindih. */
  .branch__meta dl { gap: 0.9rem 1rem; }
  .branch__meta a {
    display: inline-block;
    padding-block: 0.45rem;
    margin-block: -0.45rem;
  }

  /* Tombol suara pada kartu reel: 29 piksel terlalu tipis untuk ditekan.
     Tingginya dipatok, bukan dihitung dari padding, supaya angkanya pasti
     tidak bergeser kalau ukuran hurufnya berubah. */
  .reel__sound { min-height: 2.75rem; padding-inline: 0.8rem; }
}

/* ==========================================================================
   Motif: heksagon dan tiang barber
   --------------------------------------------------------------------------
   Dua motif, dua asal usul, dan keduanya punya alasan.

   Heksagon datang dari papan sirkuit pada lambang Barbertech, bentuk yang
   sama dengan lubang tembus pada PCB. Dipakai sebagai tekstur sangat tipis,
   bukan hiasan yang menuntut perhatian: tugasnya memberi bahan pada bidang
   abu yang tadinya rata.

   Tiang barber adalah kosakata barbershop yang paling dikenal orang. Di
   sini ia tetap monokrom, jadi tidak melanggar palet, dan ia bergerak
   seperti tiang sungguhan. Sengaja dipakai di SATU tempat saja, pada ajakan
   penutup. Motif sekuat ini kalau ditaburkan di banyak tempat berubah jadi
   kebisingan.
   ========================================================================== */

/* --- Ikon perkakas -------------------------------------------------------- */
/* Ikon polos, tanpa bingkai. Sempat dibungkus heksagon dan itu keliru: dua
   motif bertumpuk pada satu benda kecil, dan yang terbaca malah kotaknya.
   Ikon ini ada untuk menolong mata memindai kategori, bukan jadi lencana. */
.ikon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.16em;
  margin-right: 0.6rem;
  color: var(--text-faint);
}
.pricelist__caption h2 { display: flex; align-items: center; }

/* Catatan tentang motif heksagon, supaya tidak dicoba lagi tanpa sadar.

   Sudah dicoba dua kali dan dua-duanya dicabut. Pertama sebagai tekstur
   latar: pita abu jadi ramai dan motifnya menuntut perhatian yang bukan
   haknya. Kedua sebagai benda, yaitu bingkai ikon, lencana nomor, simpul
   rel, dan prisma tiga dimensi; itu pun berlebihan, empat hiasan sekaligus
   dalam satu putaran, dan penempatannya tidak menolong apa pun.

   Situs ini sudah punya lambangnya sendiri di hero, dan itu sudah cukup
   membawa bahasa sirkuitnya. Motif tambahan tidak menambah arti, cuma
   menambah benda yang harus dilihat mata.


/* --- Sorot: sapuan bilah di balik kata kunci ------------------------------
   Ditarik dari kiri ke kanan saat babnya masuk layar, seperti satu sapuan
   bilah. Dibuat dari latar belakang, bukan lapisan berposisi, supaya tidak
   perlu menumpuk konteks dan tetap benar ketika barisnya terbungkus.

   Warnanya tinta dengan kepekatan rendah, jadi tetap monokrom: yang naik
   bukan warnanya, melainkan bobot bacanya.
   -------------------------------------------------------------------------- */
.sorot {
  /* Kalimat yang disorot memakai tinta penuh, bukan tinta redup seperti
     kalimat di sekitarnya. Dua alasan, dan keduanya sama pentingnya.

     Desain: penekanan seharusnya memang yang paling kuat dibaca, bukan
     teks pudar yang kebetulan diberi latar.

     Keterbacaan: sorot adalah lapisan tinta transparan, jadi ia
     menggelapkan dasarnya. Tinta redup di atas sorot di atas pita abu
     terdalam cuma 4,33:1, di bawah ambang AA. Dengan tinta penuh angkanya
     10,64:1. */
  color: var(--text);
  background-image: linear-gradient(rgba(16, 17, 18, 0.16), rgba(16, 17, 18, 0.16));
  background-repeat: no-repeat;
  background-position: 0 86%;
  background-size: 0 0.42em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-inline: 0.08em;
  transition: background-size 0.75s var(--ease-out) 0.15s;
}
.is-in .sorot,
.sorot.is-in { background-size: 100% 0.42em; }

/* Di area gelap tinta hitam tidak terlihat, jadi sapuannya dibalik. */
.coffee .sorot,
body.page--coffee .sorot {
  background-image: linear-gradient(rgba(241, 234, 226, 0.2), rgba(241, 234, 226, 0.2));
}

/* Tanpa skrip kelas is-in tidak pernah dipasang, jadi sorotnya langsung
   ditampilkan penuh. Penekanannya tetap ada, cuma tidak bergerak. */
html:not(.js) .sorot { background-size: 100% 0.42em; }

@media (prefers-reduced-motion: reduce) {
  .sorot { transition: none; }
}



/* ==========================================================================
   Arketipe tata letak bab
   --------------------------------------------------------------------------
   Sebelum ini beranda punya SATU ide tata letak yang diulang sepuluh kali
   berturut-turut: rel kiri, label kecil, judul raksasa, isi di bawah.
   Terukur, sepuluh bab beruntun sepanjang sebelas ribu piksel.

   Akibatnya tidak ada bab yang menonjol. Kalau semuanya berteriak dengan
   nada yang sama, tidak ada satu pun yang terdengar, dan mata pembaca
   kehilangan patokan. Itu sebabnya menambah hiasan tidak pernah menolong:
   yang kurang bukan benda, tapi keragaman bentuk.

   Tiga arketipe di bawah dipakai berselang seling dengan bentuk bakunya.
   Urutan babnya sendiri tidak diubah, masih mengikuti company profile.
   ========================================================================== */

/* --- Bab lebar: rel kiri dilepas, isinya mengambil seluruh lebar ---------- */
/* Dipakai untuk bab yang isinya memang ingin melebar: petak kartu, kartu
   cabang, rel reel. Melepas rel juga memutus irama kolom, jadi bab ini
   terasa sebagai jeda. */
.chapter--wide .chapter__grid { grid-template-columns: minmax(0, 1fr); }
.chapter--wide .node { display: none; }

/* --- Bab bersanding: judul duduk di samping isinya ------------------------ */
/* Judul berhenti menjadi spanduk selebar halaman dan berubah jadi penanda di
   tepi. Bentuk ini menurunkan suara bab tanpa mengecilkan isinya.

   Label dan judul WAJIB dibungkus `.chapter__head`. Tanpa pembungkus,
   keduanya akan sebaris dengan isi pertama dan isi kedua di kolom kanan;
   karena isi pertama biasanya panjang, judulnya terlempar jauh ke bawah. */
@media (min-width: 62rem) {
  .chapter--aside .chapter__grid > div:last-child {
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .chapter--aside .chapter__head {
    grid-column: 1;
    grid-row: 1 / -1;
    /* Judul menemani isinya selama masih panjang, lalu berhenti sendiri. */
    position: sticky;
    top: 7rem;
  }
  .chapter--aside .chapter__grid > div:last-child > *:not(.chapter__head) {
    grid-column: 2;
  }
  /* Isi pertama sejajar dengan judul, tidak turun sendiri. */
  .chapter--aside .chapter__grid > div:last-child > *:not(.chapter__head):first-of-type {
    margin-top: 0;
  }
}

/* --- Bab ringkas: judul lebih kecil, ruangnya lebih rapat ----------------- */
/* Tidak semua bab berhak atas judul raksasa. Bab penghubung yang isinya
   pendek justru lebih baik terdengar pelan. */
.chapter--ringkas { padding-block: calc(var(--chapter-y) * 0.62); }
.chapter--ringkas h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  letter-spacing: -0.02em;
}

/* --- Bab identitas: dua bisnis, satu tempat -------------------------------
   Bentuk lama cuma memajang dua lambang dengan tanda tambah di tengah.
   Itu melayani brand book, bukan pengunjung: orang yang baru melihat lambang
   di kepala halaman tidak perlu melihatnya lagi. Ruang yang sama sekarang
   dipakai menjelaskan pembeda Barbertech yang sebenarnya.

   Kedua sisi masuk dari arah berlawanan lalu bertemu di tengah, jadi
   geraknya mengatakan hal yang sama dengan isinya: berdampingan.
   -------------------------------------------------------------------------- */
/* --- Dua bisnis: satu panel yang dibelah ---------------------------------
   Sebelum ini keduanya dua kartu terpisah dengan celah dan tanda "+" di
   tengah. Tiga hal yang salah di situ: celahnya justru membantah kata
   "berdampingan" yang jadi isi babnya; isinya dipusatkan tegak sehingga
   sepertiga bawah kedua kartu menganga kosong; dan tidak ada satu pun
   jalan keluar, padahal halaman layanan dan halaman menu sudah ada.

   Sekarang satu panel dengan satu tutup hitam di atas (satu tempat) yang
   dibelah satu garis rambut (dua bisnis). Garisnya bukan pembatas yang
   digambar, melainkan latar petaknya yang menyembul lewat celah 1 piksel,
   cara yang sama dengan petak kartu di bab lain.
   ------------------------------------------------------------------------ */
.duo2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: 4px solid var(--text);
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

.duo2__sisi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper);
  transition: background 0.3s var(--ease);
}
.duo2__sisi:hover { background: var(--g-1); }

/* Kedua lambang disamakan secara optis, bukan secara angka. Wordmark
   Barbertech memanjang dan penuh sampai tepi kotaknya; lencana B&T bundar
   dan punya ruang kosong di dalam lingkarannya, jadi pada tinggi yang sama
   ia terbaca jauh lebih kecil. Tingginya dibedakan supaya bobotnya sama. */
.duo2__lambang {
  display: flex;
  align-items: flex-end;
  height: 3.2rem;
  margin-bottom: 0.3rem;
}
.duo2__lambang img { width: auto; }
.duo2__sisi--kiri .duo2__lambang img { height: 2.45rem; }
.duo2__sisi--kanan .duo2__lambang img { height: 3.2rem; }

.duo2__sisi h3 { margin: 0; }
.duo2__sisi p { margin: 0; color: var(--text-dim); max-width: 40ch; }

/* Kaki didorong ke dasar panel. Kalimat kedua sisi tidak sama panjang, dan
   tanpa ini harganya berhenti di tinggi yang berbeda lalu sisa ruangnya
   menganga. Dengan margin-top otomatis, harga dan tautannya sejajar. */
.duo2__kaki {
  margin-top: auto;
  padding-top: 1.4rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  border-top: 1px solid var(--line);
}

.duo2__dari {
  margin: 0 !important;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint) !important;
}
.duo2__dari b {
  color: var(--text);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  margin-left: 0.4rem;
}

/* Sasaran sentuhnya diperlebar lewat lapisan tak terlihat, bukan lewat
   padding. Terukur: barisnya cuma 22px tinggi, separuh dari 44px yang
   dianjurkan untuk jari. Padding akan menurunkan garis bawahnya menjauh
   dari huruf; lapisan ini menambah daerah tekan tanpa menggeser apa pun. */
.duo2__tautan { position: relative; }
.duo2__tautan::after {
  content: "";
  position: absolute;
  inset: -0.7rem -0.5rem;
}
.duo2__tautan {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.2rem;
  transition: border-color 0.2s var(--ease);
}
.duo2__tautan span { display: inline-block; transition: transform 0.25s var(--ease-out); }
.duo2__tautan:hover { border-bottom-color: var(--text); }
.duo2__tautan:hover span { transform: translateX(0.25rem); }

/* Gerak masuk: panelnya naik sekali, lalu isinya menyusul bertingkat.

   Yang lama menggeser kedua sisi dari kiri dan kanan. Di susunan ini itu
   tidak bisa dipakai lagi: begitu keduanya bergeser, celah di antaranya
   melebar dan latar petaknya yang berwarna garis ikut tersingkap sebagai
   pita abu yang berkedip. */
html.js .duo2 {
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
html.js .duo2.is-in { opacity: 1; transform: none; }

html.js .duo2__sisi > * {
  opacity: 0;
  transform: translateY(0.7rem);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
html.js .duo2.is-in .duo2__sisi > * {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--mulai, 0ms) + var(--urut, 0ms));
}
.duo2__sisi--kanan { --mulai: 110ms; }
.duo2__sisi > :nth-child(1) { --urut: 120ms; }
.duo2__sisi > :nth-child(2) { --urut: 190ms; }
.duo2__sisi > :nth-child(3) { --urut: 260ms; }
.duo2__sisi > :nth-child(4) { --urut: 330ms; }

@media (max-width: 48rem) {
  .duo2 { grid-template-columns: minmax(0, 1fr); }
  .duo2__sisi--kanan { --mulai: 60ms; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .duo2,
  html.js .duo2__sisi > * { opacity: 1; transform: none; transition: none; }
  .duo2__tautan:hover span { transform: none; }
}

/* ==========================================================================
   Perapian tipografi
   --------------------------------------------------------------------------
   Diukur dulu, bukan dikira. Satu halaman beranda memakai 29 gaya huruf yang
   berbeda, dan yang paling dominan IBM Plex Mono bobot 400 ukuran 10 piksel,
   terpakai di 96 elemen. Mono setipis itu dengan jarak huruf lebar memang
   terbaca pucat dan lemah.

   Ada juga tiga keluarga huruf dipakai bersamaan. Oxanium sampai turun ke
   14 dan 17 piksel, berdampingan dengan IBM Plex Sans pada ukuran yang
   hampir sama. Pada ukuran sebesar itu Oxanium berhenti terbaca sebagai
   suara merek dan cuma terbaca sebagai sans yang bentuknya meleset sedikit.
   Itu sumber rasa tidak selaras.

   Dua aturannya sekarang:
   1. Oxanium hanya untuk ukuran display. Di bawah 1,2rem pakai Plex Sans.
   2. Label mono minimal bobot 500 dan minimal 11 piksel.
   ========================================================================== */

/* --- Oxanium hanya untuk ukuran besar ------------------------------------- */
.h-sm,
.faq summary,
.btn {
  font-family: var(--body);
}
.h-sm { font-weight: 600; letter-spacing: -0.005em; }
.faq summary { font-weight: 600; }
.btn { font-weight: 600; letter-spacing: 0.06em; }

/* --- Label mono ------------------------------------------------------------
   Bobot 500 dipasang langsung di tiap aturan yang menyetel `var(--mono)`,
   bukan lewat daftar pemilih terpisah. Daftar tangan sempat dipakai dan
   meleset: 115 elemen tetap bobot 400 karena mewarisi keluarga hurufnya
   dari pemilih yang tidak ada di daftar itu.
   -------------------------------------------------------------------------- */

/* --- Teks isi diberi sedikit badan ---------------------------------------- */
/* Bukan dinaikkan bobotnya, tapi tintanya dipekatkan. Menaikkan bobot teks
   panjang membuatnya berat dibaca; memekatkan tintanya membuatnya hadir
   tanpa berubah bentuk. */
:root { --text-dim: #4b4e50; }

/* ==========================================================================
   Gerak: lebih tegas dan lebih beragam
   --------------------------------------------------------------------------
   Gerak sebenarnya sudah ada, tapi terasa mati karena dua hal. Pertama,
   semuanya memakai satu gerakan yang sama: naik 22 piksel selama 0,85 detik.
   Kedua, 0,85 detik terlalu lama untuk sebuah masuk; yang panjang begitu
   terbaca sebagai halaman yang lambat, bukan halaman yang hidup.

   Yang diubah: waktunya dipercepat, arahnya dibuat bervariasi mengikuti
   jenis isinya, dan bagian yang memang punya kedalaman diberi gerak yang
   terus mengikuti gulir, bukan sekali jalan lalu diam.
   ========================================================================== */

html.js .reveal {
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

/* Judul bab masuk dari kiri, bukan dari bawah seperti yang lain. Arah yang
   berbeda membuat judul terbaca sebagai pembuka, bukan sebagai baris
   berikutnya. */
html.js .chapter h2.reveal,
html.js .chapter__head .reveal {
  transform: translateX(-20px);
}
/* Dan dikembalikan ke tempatnya setelah masuk.

   Aturan di atas cuma menyetel posisi BERANGKAT, tapi ia ditulis jauh
   setelah `html.js .reveal.is-in { transform: none }` dengan kekhususan yang
   sama persis, jadi yang di bawah ini menang dan judulnya tidak pernah
   kembali. Terukur di beranda: empat elemen berhenti permanen 20 piksel di
   kiri kolomnya, jadi judul bab tidak pernah lurus dengan isinya. */
html.js .chapter h2.reveal.is-in,
html.js .chapter__head .reveal.is-in {
  transform: none;
}

/* Isi bertingkat masuk lebih rapat jaraknya, jadi satu bab terasa sebagai
   satu gerakan, bukan deretan benda yang muncul satu per satu. */
html.js .reveal-stagger > * {
  transition-duration: 0.5s;
}
html.js .reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
html.js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: 55ms; }
html.js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: 110ms; }
html.js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: 165ms; }
html.js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: 220ms; }
html.js .reveal-stagger.is-in > *:nth-child(6) { transition-delay: 275ms; }

/* Kartu terangkat sedikit saat disentuh. Ini gerak yang menjawab, bukan
   gerak yang berjalan sendiri, jadi ia menambah hidup tanpa menambah
   kebisingan. */
.card,
.branch {
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.3s var(--ease-out);
}
.card:hover,
.branch:hover { transform: translateY(-3px); }

/* Baris harga menggeser namanya sedikit saat disentuh, jadi barisnya terasa
   bisa ditunjuk. */
.row { transition: border-bottom-color 0.25s var(--ease); }
.row__name { display: inline-block; transition: transform 0.25s var(--ease-out); }
.row:hover .row__name { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .branch:hover,
  .row:hover .row__name { transform: none; }
}

/* ==========================================================================
   Bab cabang: peta jadi kepalanya
   --------------------------------------------------------------------------
   Bentuk lama dua kartu putih berisi judul, satu kalimat, daftar istilah,
   dan dua tombol. Isinya benar semua, tapi terbacanya seperti daftar
   kontak, bukan seperti jawaban atas "di mana kalian". Tidak ada gambaran
   tempat sama sekali.

   Sekarang peta sungguhan yang memimpin tiap kartu, dan faktanya dipadatkan
   jadi satu baris supaya yang menonjol tempatnya, bukan labelnya.
   ========================================================================== */
.cabang-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 3rem;
}
.cabang {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease-out);
}
.cabang:hover { border-color: var(--line-strong); transform: translateY(-3px); }

/* --- Panel peta ----------------------------------------------------------- */
.cabang__peta {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  overflow: hidden;
  /* Sebelum petanya datang, petaknya diberi kisi tipis supaya terbaca
     sebagai peta yang sedang dimuat, bukan sebagai kotak rusak. */
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
}
.cabang__peta iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Peta berwarna akan jadi satu-satunya warna di seluruh situs. Dibuat
     abu supaya ikut palet, dan naik jadi berwarna saat disentuh sebagai
     tanda ia benar-benar bisa dipakai. */
  filter: grayscale(1) contrast(1.04);
  opacity: 0;
}
.cabang__peta.is-siap iframe { opacity: 1; }
.cabang:hover .cabang__peta.is-siap iframe { filter: grayscale(0.35) contrast(1); }

/* Penanda yang menjatuhkan diri selama peta dimuat. Ia hilang begitu
   petanya siap, jadi ia benar-benar jadi tanda tunggu, bukan hiasan. */
.cabang__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -22px 0 0 -7px;
  border: 2px solid var(--accent);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  animation: pin-jatuh 1.6s var(--ease-out) infinite;
}
.cabang__pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 16px;
  height: 5px;
  margin: 6px 0 0 -8px;
  border-radius: 50%;
  background: var(--line-strong);
  transform: rotate(45deg);
}
@keyframes pin-jatuh {
  0%   { transform: rotate(-45deg) translate(-6px, -6px); opacity: 0; }
  35%  { transform: rotate(-45deg) translate(0, 0); opacity: 1; }
  70%  { transform: rotate(-45deg) translate(0, 0); opacity: 1; }
  100% { transform: rotate(-45deg) translate(0, 0); opacity: 0.25; }
}
.cabang__memuat {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.9rem;
  text-align: center;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cabang__peta.is-siap .cabang__pin,
.cabang__peta.is-siap .cabang__memuat { display: none; }

/* --- Penanda lokasi yang menetap ------------------------------------------ */
/* Gerak yang tidak berhenti begitu petanya selesai dimuat.

   Penanda yang menjatuhkan diri di atas hanya tampil selama peta diambil,
   jadi sepersekian detik dan praktis tidak pernah terlihat. Yang di bawah
   ini menggantikannya: satu titik padat yang tinggal di tengah peta, tepat
   di tempat Google menaruh penanda cabangnya, dengan dua lingkaran yang
   melebar bergantian keluar darinya seperti denyut radar.

   Titiknya diberi cincin putih supaya tetap terbaca di atas jalan yang
   gelap maupun blok yang terang, dan seluruh lapisan ini tidak menerima
   sentuhan, jadi petanya tetap bisa digeser dan diperbesar. */
.peta__titik {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--paper), 0 3px 9px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: scale(0.15);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.35s var(--ease-out), transform 0.75s var(--ease-out);
}
.is-siap > .peta__titik {
  opacity: 1;
  transform: none;
}

/* Lingkarannya melebar dengan menumbuhkan ukurannya, bukan dengan diskalakan,
   supaya garis tepinya tetap setipis semula sampai lingkarannya habis. */
.peta__titik::before,
.peta__titik::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.is-siap > .peta__titik::before,
.is-siap > .peta__titik::after {
  animation: peta-denyut 2.8s var(--ease-out) infinite;
}
.is-siap > .peta__titik::after { animation-delay: calc(var(--denyut-mulai, 0s) + 1.4s); }

/* Panel kedua berdenyut setengah ketukan di belakang yang pertama, jadi dua
   petanya tidak bergerak seperti satu benda yang sama. Selangnya ditulis di
   panelnya lewat --denyut-mulai. */
.is-siap > .peta__titik::before { animation-delay: var(--denyut-mulai, 0s); }

@keyframes peta-denyut {
  0%   { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; opacity: 0; }
  14%  { opacity: 0.6; }
  100% { width: 78px; height: 78px; margin: -39px 0 0 -39px; opacity: 0; }
}

/* Petanya sendiri masuk dengan sedikit menyusut, jadi ada gerak yang
   terlihat tepat saat bab ini dicapai, bukan cuma saat memuat. */
.cabang__peta iframe { transform: scale(1.06); }
.cabang__peta.is-siap iframe { transform: none; }
.cabang__peta iframe {
  transition: opacity 0.6s var(--ease-out), filter 0.4s var(--ease),
              transform 1.1s var(--ease-out);
}

/* --- Isi kartu ------------------------------------------------------------ */
.cabang__isi {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.35rem, 2.5vw, 1.9rem);
  background: var(--paper);
  flex: 1;
}
.cabang__isi h3 { margin: 0; }
.cabang__blurb { margin: 0; color: var(--text-dim); }

/* Fakta dipadatkan jadi satu baris bertitik pemisah, menggantikan daftar
   istilah yang membuat kartunya terbaca seperti formulir. */
.cabang__fakta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  margin: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
/* Tanpa titik pemisah. Sempat dipakai, dan begitu barisnya membungkus,
   titik itu mengawali baris baru dan terbaca seperti salah ketik. Jarak
   antar fakta sudah cukup jadi pemisah. */
.cabang__fakta span { white-space: nowrap; }

.cabang__aksi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.4rem;
}
/* Kartu cabang di halaman booking: tombolnya yang memutuskan, jadi ia
   mengambil satu baris penuh. Nama cabang ikut di tombol supaya jelas ke
   mana pesannya pergi, dan "Booking di Pondok Bambu" lebih panjang dari
   "Booking di Buaran"; tanpa baris penuh, satu kartu tombolnya sebaris
   dengan nomor telepon dan satu lagi tidak, jadi dua kartunya terlihat
   disusun dengan aturan berbeda. */
.cabang-grid--pilih .cabang__aksi .btn:not(.btn--sm) {
  flex: 1 1 100%;
  justify-content: center;
}

/* Sasaran sentuhnya diperlebar lewat lapisan tak terlihat. Terukur cuma
   20px tinggi, di bawah 44px yang dianjurkan untuk jari, dan di halaman
   booking dua tautan ini berdampingan. */
.cabang__peta-tautan { position: relative; }
.cabang__peta-tautan::after {
  content: "";
  position: absolute;
  inset: -0.75rem -0.4rem;
}

.cabang__peta-tautan {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-underline-offset: 3px;
}
.cabang__peta-tautan:hover { color: var(--text); }

@media (max-width: 52rem) {
  .cabang-grid { grid-template-columns: minmax(0, 1fr); }
  .cabang__peta { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .cabang__pin { animation: none; opacity: 1; }
  .cabang:hover { transform: none; }
  .cabang__peta iframe { transition: none; transform: none; }
  .peta__titik { transition: none; transform: none; }
  .peta__titik::before,
  .peta__titik::after { animation: none; display: none; }
}