/* Halaman publik Barbershop Sandi Sintaro.
   ------------------------------------------------------------------
   Arah rasa: classic premium barbershop dengan karakter hangat.
   Dasarnya tetap hitam-putih mengikuti logo, tapi hitamnya hitam hangat
   dan putihnya putih gading, lalu KUNINGAN dipakai sebagai satu-satunya
   aksen. Kuningan bukan warna utama: hanya ajakan bertindak, ikon, garis
   tipis, label kecil, dan keadaan hover yang boleh memakainya. Begitu
   kuningan mulai muncul sebagai latar besar, situsnya berubah jadi
   "gold" — dan itu bukan merek ini. */

:root {
  /* ---- warna dasar ---- */
  --hitam: #0F0F10;          /* hitam hangat paling dalam: navbar, hero, ajakan, kaki */
  --hitam-pita: #121212;     /* pita gelap di tengah halaman, setingkat lebih terang */
  --arang: #171717;          /* kartu di atas bidang gelap */
  --arang-muda: #2A2A2A;     /* permukaan/garis di atas gelap */
  --gading: #F4F1EA;         /* putih tulang: pita terang, teks di atas gelap */
  --krem: #EAE5DC;           /* krem hangat: papan info, permukaan selang-seling */
  --pasir: #D8C7A8;          /* kuningan pucat, untuk teks kecil di atas gelap */
  --redup: #77736C;          /* teks sekunder di atas terang */
  --tinta: #171614;          /* teks utama di atas terang */

  /* ---- aksen kuningan ----
     Dua nilai, bukan satu. #B08D57 di atas hitam memberi kontras ~6:1
     (aman untuk teks kecil), tapi di atas gading hanya ~2,6:1 — tidak
     terbaca. Karena itu teks kuningan di atas latar terang memakai versi
     tua (~5:1). Yang pucat (--pasir) sebaliknya: hanya untuk di atas
     gelap. Salah pilih = teks yang kelihatan "mahal" tapi tidak terbaca. */
  --kuningan: #B08D57;
  --kuningan-terang: #C9A46B;   /* hover di atas gelap */
  --kuningan-tua: #7A5D33;      /* teks kuningan di atas latar terang */

  /* ---- garis ---- */
  --garis-gelap: rgba(244, 241, 234, .10);
  --garis-terang: rgba(23, 22, 20, .12);
  --garis-kuningan: rgba(176, 141, 87, .30);

  --serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Dua ukuran yang mengikat irama vertikal seluruh halaman.
     --lebur-tinggi: panjang peleburan warna di kaki tiap bagian.
     --pita-atas: ruang datar di atas isi bagian. Ruang bawahnya dihitung
     dari keduanya, jadi ruang DATAR di bawah isi selalu sama dengan yang di
     atas, dan isi bagian jatuh di titik tengah optis — bukan sekadar tengah
     matematis. Sebelum ini isi bagian duduk langsung di atas gradien:
     141 px ruang datar di atas, 23 px di bawah. */
  --lebur-tinggi: clamp(120px, 16vw, 230px);
  --pita-atas: 90px;

  /* Papan info duduk DI DALAM hero, di atas fotonya, tepat di bawah tombol
     CTA — bukan lagi menumpang di perbatasan hero dan bagian putih.
       --papan-jarak : tombol CTA ke papan
       --papan-bawah : papan ke pangkal peleburan; ini yang membuat papan
                       terbaca "duduk di dekat kaki foto", bukan menempel
       --hero-lebur  : panjang peleburan. Sekarang seluruhnya DI BAWAH papan,
                       jadi boleh lebih panjang dan lebih halus — dulu ia
                       dipaksa pendek karena harus selesai di garis atas
                       papan, sekarang tidak ada yang perlu dihindari. */
  --papan-jarak: clamp(34px, 4.4vw, 62px);
  --papan-bawah: clamp(26px, 3vw, 44px);
  --hero-lebur: clamp(80px, 7.5vw, 120px);

  --sudut: 6px;              /* radius tunggal; barbershop klasik tidak bulat */
  --sudut-kecil: 4px;
  --atas: 92px;              /* tinggi navbar, dipakai juga oleh scroll-padding */

  /* Butiran halus. Satu-satunya "tekstur" di situs ini: membuat bidang
     hitam besar tidak terlihat seperti cat digital rata. Dipakai sangat
     tipis (3-5%), kalau terlihat sebagai bintik berarti kelebihan. */
  /* Butiran kelabu berfrekuensi tinggi, khusus untuk memecah banding di
     lapisan lebur. numOctaves 1: tanpa oktaf rendah, jadi butirnya halus rata
     dan tidak menggumpal jadi bercak. Sengaja dijenuhkan ke nol supaya tidak
     menitipkan warna ke gradien. */
  --butir-abu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23d)'/%3E%3C/svg%3E");
  --butir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--atas) + 24px); }
/* Latar kanvas dibuat gelap, terpisah dari latar body. Halaman ini dimulai
   dan diakhiri dengan bidang gelap; tanpa ini, tarikan berlebih saat menggulir
   (rubber band di macOS/iOS) dan halaman yang lebih pendek dari layar akan
   memperlihatkan gading di atas hero dan di bawah kaki — kilatan terang yang
   persis jadi tepi keras yang sedang dihilangkan. */
html { background: var(--hitam); }
body {
  margin: 0; background: var(--gading); color: var(--tinta);
  font-family: var(--sans); font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1.06; }
::selection { background: var(--kuningan); color: var(--hitam); }
:focus-visible { outline: 2px solid var(--kuningan); outline-offset: 3px; }

.bungkus { max-width: 1220px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; }

/* ---------- pita (satu bagian halaman) ---------- */
/* Ruang bawah = ruang atas + panjang peleburan. Dua akibatnya sekaligus:
   isi halaman berhenti sebelum gradiennya mulai (tombol "Lihat Semua Layanan"
   dua kali kedapatan duduk di tengah gradien, dan garis tepinya yang tipis
   langsung hilang), dan ruang datar di atas dan di bawah isi jadi sama besar. */
.pita {
  position: relative; overflow: hidden;
  padding-top: var(--pita-atas);
  padding-bottom: calc(var(--pita-atas) + var(--lebur-tinggi));
}
.pita--gelap { background: var(--hitam-pita); color: var(--gading); }
.pita--terang { background: var(--gading); color: var(--tinta); }
/* Butiran di semua bidang besar, gelap maupun terang, supaya teksturnya satu
   keluarga: bidang gelap memakai overlay (menambah kedalaman), bidang terang
   memakai multiply (kesan kertas). Keduanya di bawah 5% — begitu butirannya
   terbaca sebagai bintik, takarannya sudah kelewat.
   Garis kuningan rambut yang dulu menandai batas pita sengaja dihapus: batas
   antar bagian sekarang dilebur, dan garis 1px di sana justru mengembalikan
   tepi keras yang ingin dihilangkan. */
.pita--gelap::before, .hero::before, .ajakan::before, .kaki::before {
  content: ""; position: absolute; inset: 0; background-image: var(--butir);
  opacity: .045; pointer-events: none; mix-blend-mode: overlay;
}
.pita--terang::before {
  content: ""; position: absolute; inset: 0; background-image: var(--butir);
  opacity: .03; pointer-events: none; mix-blend-mode: multiply;
}

/* ---------- lebur: perpindahan warna antar bagian ---------- */
/* Bidang hitam yang berhenti mendadak lalu disambung gading terbaca sebagai
   garis. Lapisan ini duduk di kaki sebuah bagian dan memudarkan warnanya ke
   warna bagian berikutnya.

   Versi pertama memakai delapan perhentian warna lewat abu dan cokelat, dan
   justru itu yang membuat garis-garis terlihat: mata sangat peka pada
   perubahan KEMIRINGAN gradien, bukan pada warnanya. Tiap perhentian adalah
   satu patahan kemiringan, dan tiap patahan tampak sebagai garis samar (Mach
   band). Jadi sekarang hanya dua warna, tanpa satu pun warna antara.

   Yang mewarnai cuma satu: --ke. Ujung atasnya bening, jadi apa pun yang ada
   di belakangnya (warna pita, butiran, sorot hero) tembus apa adanya dan
   tidak mungkin ada garis di awal lapisan. Ujung bawahnya buram penuh, persis
   warna bagian berikutnya, jadi sambungannya juga tidak mungkin terlihat.

   Dua lapisan gradien, bukan satu, dan keduanya memakai warna yang sama
   persis — ini bukan gradien bertingkat. Satu ramp saja punya kemiringan yang
   masih tersisa saat menyentuh bagian berikutnya, dan sisa kemiringan itu
   yang menjadi garis terakhir. Dua ramp dengan titik tengah berbeda (62% dan
   80%) bergabung jadi kurva-S: kemiringannya nol di kedua ujung, jadi tidak
   ada satu titik pun yang bisa ditunjuk sebagai "di sini warnanya berubah".

   Catatan soal ruang warna: 'in oklab' tidak dipakai karena di sini tidak ada
   warna yang diinterpolasi — warnanya tetap, yang berjalan hanya alfanya.
   Ruang warna baru berpengaruh kalau gradiennya buram dari warna A ke warna B. */
.lebur {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  height: var(--lebur-tinggi); pointer-events: none;
  background-image:
    linear-gradient(to bottom, transparent 0%, 62%, var(--ke) 100%),
    linear-gradient(to bottom, transparent 0%, 80%, var(--ke) 100%);
}
/* Dither. Butiran kelabu dengan mix-blend-mode overlay: pada warna paling
   gelap dan paling terang, overlay hampir tidak mengubah apa-apa, dan
   pengaruhnya paling besar di nada tengah — persis di tempat banding muncul.
   Nilai tengah kelabu dikembalikan apa adanya oleh overlay, jadi rata-rata
   warnanya tidak bergeser dan baris sambungan tetap murni. */
.lebur::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--butir-abu); background-size: 160px 160px;
  opacity: .022; mix-blend-mode: overlay;
}
/* Peleburan hero: seluruhnya DI BAWAH papan info. z-index 0 dari .lebur
   membuatnya selalu di bawah papan (z 20), jadi putihnya memudarkan foto di
   kaki hero tanpa pernah menutupi papannya. */
.lebur--hero { height: var(--hero-lebur); }
.lebur--gelap-terang { --ke: var(--gading); }
.lebur--terang-gelap { --ke: var(--hitam-pita); }
/* bagian berikutnya hitam terdalam (pita ajakan), bukan pita gelap biasa */
.lebur--terang-gelap.lebur--pekat { --ke: var(--hitam); }

/* ---------- kepala bagian ---------- */
.label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
}
.label::before { content: ""; width: 26px; height: 1px; background: var(--kuningan); }
.pita--terang .label { color: var(--kuningan-tua); }
.pita--gelap .label { color: var(--pasir); }

.kepala { text-align: center; margin-bottom: 68px; }
.kepala .label::after { content: ""; width: 26px; height: 1px; background: var(--kuningan); }
.kepala h2 { margin-top: 20px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.005em; }
.kepala__sub { margin: 14px 0 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
.rule { width: 46px; height: 1px; margin: 24px auto 0; background: var(--kuningan); opacity: .8; }
/* judul sub-bagian di dalam pita yang sama (mis. "Layanan Lainnya" di bawah
   kartu paket): jaraknya lebih rapat supaya tidak terbaca sebagai bagian baru */
.kepala--rapat { margin-bottom: 34px; }
.kepala--rapat h2 { margin-top: 14px; font-size: clamp(24px, 2.8vw, 32px); }

/* ---------- tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; padding: 16px 28px; min-height: 52px; border-radius: var(--sudut-kecil);
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn .panah { transition: transform .2s ease; }
.btn:hover .panah { transform: translateX(4px); }

/* ajakan utama: satu-satunya bidang kuningan penuh di halaman */
.btn--kuningan { background: var(--kuningan); color: var(--hitam); }
.btn--kuningan:hover { background: var(--kuningan-terang); transform: translateY(-2px); }
.btn--garis { border-color: currentColor; color: inherit; }
.pita--gelap .btn--garis, .hero .btn--garis, .ajakan .btn--garis { border-color: var(--garis-gelap); color: var(--gading); }
.pita--gelap .btn--garis:hover, .hero .btn--garis:hover, .ajakan .btn--garis:hover { border-color: var(--kuningan); color: var(--kuningan-terang); }
.pita--terang .btn--garis { border-color: var(--garis-terang); }
.pita--terang .btn--garis:hover { border-color: var(--kuningan-tua); color: var(--kuningan-tua); }
.btn--kecil { min-height: 40px; padding: 11px 18px; font-size: 10.5px; letter-spacing: .16em; }

.panah { width: 15px; height: 15px; flex-shrink: 0; }
.ikon { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tengah { text-align: center; margin-top: 64px; }

/* ---------- muncul saat digulir ---------- */
/* Kelas .js dipasang oleh skrip di <head>. Tanpa JavaScript, aturan ini
   tidak pernah aktif dan seluruh halaman tetap terbaca — bagian yang
   disembunyikan lalu tidak pernah dimunculkan adalah cara paling mudah
   membuat halaman kosong tanpa sadar. */
.js [data-muncul] { opacity: 0; transform: translateY(20px); }
.js [data-muncul].tampil { opacity: 1; transform: none; }
.js [data-muncul] { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .65, .25, 1); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-muncul] { opacity: 1; transform: none; transition: none; }
}

/* ================= NAVBAR ================= */
.atas {
  position: sticky; top: 0; z-index: 60; color: var(--gading);
  background: rgba(15, 15, 16, .92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--garis-gelap);
  transition: height .25s ease, background .25s ease;
}
.atas__isi {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 24px; height: var(--atas); transition: height .25s ease;
}
.atas--kecil .atas__isi { height: 74px; }
.atas--kecil { border-bottom-color: var(--garis-kuningan); }
.atas__logo img { width: 96px; transition: width .25s ease; }
.atas--kecil .atas__logo img { width: 78px; }

.menu { display: flex; gap: 34px; align-items: center; }
.menu--kiri { justify-content: flex-end; }
.menu--kanan { justify-content: flex-start; }
.menu a {
  position: relative; font-size: 11.5px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(244, 241, 234, .72); padding: 8px 0;
  white-space: nowrap; transition: color .2s ease;
}
/* garis bawah tumbuh dari kiri; dipakai untuk hover maupun bagian aktif */
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--kuningan); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2, .65, .25, 1);
}
.menu a:hover { color: var(--gading); }
.menu a:hover::after, .menu a.aktif::after { transform: scaleX(1); }
.menu a.aktif { color: var(--gading); }
/* Tombol ajakan navbar adalah gambar. Latar gambarnya nyaris hitam seperti
   navbar tapi tidak persis sama, dan navbar sendiri tembus pandang di atas
   foto hero — jadi sudutnya dibulatkan mengikuti sudut tombol di dalam gambar,
   supaya tidak ada sisa persegi gelap yang terlihat di keempat pojoknya. */
.atas__ajakan { margin-left: 22px; display: block; line-height: 0; }
.atas__ajakan img {
  width: 118px; height: auto; border-radius: 5px;
  transition: transform .2s ease, filter .2s ease;
}
.atas__ajakan:hover img { transform: translateY(-2px); filter: brightness(1.08); }
.atas--kecil .atas__ajakan img { width: 106px; }

/* tombol menu di layar sempit */
.burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--garis-gelap);
  border-radius: var(--sudut-kecil); background: transparent; color: var(--gading);
  align-items: center; justify-content: center; cursor: pointer;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block; width: 18px; height: 1px; background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.burger span::before { transform: translateY(-6px); }
.burger span::after { transform: translateY(5px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: rotate(-45deg) translateY(-1px); }

.laci {
  display: none; background: var(--hitam); border-bottom: 1px solid var(--garis-kuningan);
}
.laci a {
  display: block; padding: 16px 40px; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(244, 241, 234, .8);
  border-top: 1px solid var(--garis-gelap);
}
.laci .btn { margin: 20px 40px 26px; display: flex; }
.laci a.aktif { color: var(--kuningan-terang); }

/* ================= HERO ================= */
/* Lima lapis, dari belakang ke depan: warna dasar (background di sini), foto,
   peleburan tepi, tirai keterbacaan, lalu isi. Yang terakhir, lapisan lebur,
   menutup kaki hero.

   Tingginya satu layar penuh dikurangi navbar — navbar sticky ikut mengambil
   ruang di aliran, jadi tanpa pengurangan itu layar pertama selalu lebih
   tinggi dari layar dan hero-nya tidak pernah benar-benar utuh. min-height,
   bukan height: saat diperbesar 150% atau di layar pendek, isinya boleh
   mendorong hero jadi lebih tinggi daripada terpotong.

   svh, bukan vh: di ponsel, vh dihitung dari layar tanpa bilah alamat, jadi
   hero-nya selalu kelewat tinggi sedikit. vh ditulis lebih dulu sebagai
   cadangan untuk peramban lama. */
.hero {
  position: relative; background: var(--hitam); color: var(--gading);
  overflow: hidden;
  /* Kolom, bukan baris: hero kini memuat DUA hal bertumpuk — blok teks yang
     mengambil sisa ruang lalu memusatkan isinya, dan papan info yang duduk di
     bawahnya. `align-items: center` yang dulu memusatkan satu-satunya anak
     tidak lagi cukup begitu ada anak kedua yang justru harus di kaki. */
  display: flex; flex-direction: column;
  /* Tinggi minimal satu layar penuh. Ini yang menjaga foto latar selalu
     memenuhi layar: fotonya `position:absolute; inset:0` dengan object-fit
     cover, jadi ia mengikuti kotak hero — dan kotak hero mengikuti layar,
     berapa pun tingkat zoom-nya, karena svh selalu 1% tinggi viewport.
     `min-height` bukan `height`: di layar pendek hero tumbuh mengikuti isinya
     alih-alih memotong papan. */
  min-height: calc(100vh - var(--atas));
  min-height: calc(100svh - var(--atas));
  /* Ruang bawah = peleburan + jarak papan ke pangkalnya. Peleburan ditumpuk
     absolut di kaki hero, jadi ruang ini yang menahan papan agar tidak masuk
     ke dalam gradien. */
  padding: 40px 0 calc(var(--hero-lebur) + var(--papan-bawah));
}
.hero > .bungkus { width: 100%; }
/* Mengambil sisa ruang lalu memusatkan teks di dalamnya. Akibatnya judul tetap
   duduk di tengah bidang di ATAS papan, bukan di tengah hero seluruhnya —
   yang akan membuatnya terlihat terdorong ke atas oleh papan. */
.hero__utama { flex: 1 1 auto; display: flex; align-items: center; }
/* Foto latar hero. Berbeda dari foto di bagian tentang, foto ini tidak
   dijadikan abu-abu: warnanya sudah hitam hangat dengan pantulan kuningan,
   yaitu palet situs ini sendiri. Cukup diredupkan sedikit supaya tidak
   melawan judul. */
.hero__latar { position: absolute; inset: 0; }
/* Foto mengisi hero, bukan sebaliknya: tinggi hero ditentukan layar, dan
   fotonya dipotong mengikuti — object-fit cover. Titik potongnya digeser ke
   kanan (62%) karena isi foto yang penting (clipper, pengering, cukur) ada di
   tengah-kanan, sedangkan kiri hanya kain dan kotak alat yang gelap. Kebetulan
   itu juga sisi tempat judul berdiri: yang terpotong duluan justru bagian
   yang memang ingin dikosongkan. */
.hero__latar img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
  filter: brightness(.82) saturate(.92);
  animation: hero-tenang 2.4s cubic-bezier(.2, .65, .25, 1) both;
}
/* Turun perlahan dari 1,045 ke 1: mulai sedikit lebih besar, lalu berhenti
   tepat memenuhi. Kalau arahnya dibalik (membesar), ujung animasinya
   memperbesar terus dan tepinya bisa lepas. */
@keyframes hero-tenang {
  from { transform: scale(1.045); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__latar img { animation: none; }
}

/* Peleburan tepi. Tanpa ini, foto berhenti di garis lurus di tepi kiri,
   kanan, dan atas hero, dan terbaca sebagai gambar yang ditempel. Di sini
   fotonya diredupkan ke warna dasar situs di keempat tepinya, ditambah
   vignette lebar, jadi tidak ada satu tepi pun yang bisa ditunjuk. Warnanya
   diambil dari warna dasar hero, bukan hitam murni, supaya peleburannya
   benar-benar menyatu. */
.hero__tepi {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--hitam) 0%, rgba(15, 15, 16, 0) 22%),
    linear-gradient(270deg, var(--hitam) 0%, rgba(15, 15, 16, 0) 16%),
    linear-gradient(180deg, var(--hitam) 0%, rgba(15, 15, 16, 0) 18%),
    radial-gradient(125% 105% at 55% 45%,
                    rgba(15, 15, 16, 0) 38%, rgba(15, 15, 16, .62) 100%);
}
/* Tirai. Berat di kiri, tempat judul berdiri, lalu menipis ke kanan supaya
   peralatan di foto tetap terbaca. Judul yang duduk langsung di atas foto akan
   terbaca di satu foto dan hilang di foto lain — keterbacaannya tidak boleh
   bergantung pada gambar yang sewaktu-waktu diganti owner lewat /admin/. */
.hero__cahaya {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15, 15, 16, .90) 0%, rgba(15, 15, 16, .80) 34%,
                           rgba(15, 15, 16, .46) 62%, rgba(15, 15, 16, .22) 100%),
    linear-gradient(180deg, rgba(15, 15, 16, .45) 0%, rgba(15, 15, 16, 0) 24%),
    radial-gradient(58% 70% at 18% 42%, rgba(176, 141, 87, .08) 0%, transparent 62%);
}
/* satu kolom: kolom kanan dulu berisi panel monogram, sekarang tempatnya
   diisi fotonya sendiri sebagai latar */
.hero__isi { position: relative; z-index: 1; max-width: 640px; }
.hero__eyebrow { color: var(--pasir); }
.hero h1 {
  margin-top: 26px; font-size: clamp(42px, 5.4vw, 76px); letter-spacing: -.015em;
}
.hero__garis { width: 64px; height: 2px; background: var(--kuningan); margin: 30px 0 0; }
.hero__slogan {
  margin: 26px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 19px; color: var(--pasir); line-height: 1.5;
}
.hero p.hero__teks {
  margin: 16px 0 0; max-width: 430px; color: rgba(244, 241, 234, .62); font-size: 16px;
}
.hero__tombol { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* ---------- bingkai gambar ---------- */
/* Dipakai hero dan bagian tentang. Foto dinetralkan (abu-abu + sedikit
   hangat) supaya foto ponsel yang warnanya ke mana-mana tetap menyatu
   dengan halaman, dan tidak pernah lebih ramai dari teksnya. */
.bingkai {
  position: relative; border-radius: var(--sudut); overflow: hidden;
  background: var(--arang); border: 1px solid var(--garis-gelap);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
/* hanya foto yang jadi anak langsung bingkai; monogram di dalam .slot
   tidak boleh ikut dipotong object-fit */
.bingkai > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.92) sepia(.12); }
.bingkai::after {
  content: ""; position: absolute; inset: 12px; border: 1px solid var(--garis-kuningan);
  border-radius: var(--sudut-kecil); pointer-events: none;
}
.bingkai--tentang { aspect-ratio: 4 / 3.5; }
.bingkai__tirai {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 14, 14, .10) 0%, rgba(14, 14, 14, .55) 100%);
}
/* keadaan tanpa foto: bukan kotak "gambar hilang", tapi panel monogram yang
   memang boleh tayang apa adanya sampai foto asli diunggah lewat /admin/ */
/* Kolom flex, bukan grid dengan keterangan melayang: di panel yang pendek
   (hero versi mendatar di layar sempit) logo harus ikut mengecil, dan hanya
   item flex yang benar-benar mau menyusut. `min-height: 0` melepas batas
   bawaannya, `object-fit: contain` menjaga bentuk logo saat kotaknya diperas.
   Versi sebelumnya memakai max-height persen di grid — tidak pernah mengikat,
   dan ujung logo menabrak keterangan di bawahnya. */
.slot {
  position: absolute; inset: 0; padding: 11%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  background:
    radial-gradient(70% 70% at 50% 40%, rgba(176, 141, 87, .10), transparent 70%),
    repeating-linear-gradient(115deg, rgba(244, 241, 234, .022) 0 2px, transparent 2px 12px),
    var(--arang);
}
.slot img {
  width: 78%; max-width: 280px; min-height: 0; object-fit: contain; opacity: .92;
}
.slot__catatan {
  flex-shrink: 0; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(244, 241, 234, .28); text-align: center;
}

/* ================= PAPAN INFO ================= */
/* Menumpang di batas bawah hero: jam buka dan cara memesan terbaca tanpa
   menggulir. Timbulnya dari garis dan satu bayangan lembut saja — papan
   berbayang tebal terbaca murah. */
/* z-index 20: di atas peleburan (0) dan di atas isi .bungkus biasa (1).
   Tidak ada lagi margin negatif — papan tidak menumpang di perbatasan, ia
   anak biasa di dalam hero. */
.papan-bungkus { position: relative; z-index: 20; margin-top: var(--papan-jarak); }
.papan {
  background: var(--krem); border: 1px solid rgba(23, 22, 20, .10);
  border-radius: var(--sudut); overflow: hidden;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  box-shadow: 0 18px 44px rgba(14, 14, 14, .22);
}
.papan__item {
  display: flex; align-items: center; gap: 18px; padding: 26px 28px; color: var(--tinta);
  transition: background .2s ease;
}
.papan__item + .papan__item { border-left: 1px solid rgba(23, 22, 20, .09); }
a.papan__item:hover { background: #F2EEE6; }
.papan__ikon {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--sudut-kecil);
  display: flex; align-items: center; justify-content: center; padding: 11px;
  border: 1px solid var(--garis-kuningan); color: var(--kuningan-tua);
  transition: background .2s ease, color .2s ease;
}
a.papan__item:hover .papan__ikon { background: var(--kuningan); color: var(--gading); border-color: var(--kuningan); }
.papan__utama {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinta);
}
.papan__sub { display: block; margin-top: 6px; font-size: 14.5px; color: var(--redup); }

/* ================= TENTANG ================= */
.tentang { display: grid; grid-template-columns: 1fr 1.06fr; gap: 84px; align-items: center; }
.tentang__kecil { margin-top: 22px; font-family: var(--serif); font-size: 15px; letter-spacing: .3em; color: var(--kuningan-tua); }
.tentang__teks h2 { margin-top: 12px; font-size: clamp(30px, 3.7vw, 44px); }
.tentang__teks .rule { margin: 26px 0 0; }
.tentang__teks p { color: var(--redup); margin: 26px 0 0; max-width: 46ch; }
.tentang__gambar { position: relative; }

.statistik {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 40px 0 0; padding-top: 34px; border-top: 1px solid var(--garis-terang);
  gap: 18px;
}
.statistik > div { border-left: 1px solid var(--garis-kuningan); padding-left: 16px; }
.statistik > div:first-child { border-left: 0; padding-left: 0; }
.statistik b {
  display: block; font-family: var(--serif); font-size: 34px; font-weight: 700;
  color: var(--kuningan-tua); line-height: 1; font-variant-numeric: tabular-nums;
}
.statistik span {
  display: block; margin-top: 10px; font-size: 10.5px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--redup); line-height: 1.5;
}
.tentang .btn { margin-top: 40px; }

/* ================= LAYANAN ================= */
.layanan-kisi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.layanan {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--arang); border: 1px solid var(--arang-muda); border-radius: var(--sudut);
  padding: 34px 28px 30px; transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
/* garis kuningan tumbuh di tepi atas kartu saat disentuh */
.layanan::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--kuningan); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2, .65, .25, 1);
}
.layanan:hover { transform: translateY(-4px); border-color: var(--garis-kuningan); background: #191918; }
.layanan:hover::before { transform: scaleX(1); }
/* ikon dipakai sebagai cap besar yang nyaris tak terlihat, bukan hiasan
   kecil di atas judul: kartunya jadi punya isi tanpa menambah pernak-pernik */
/* garis dipertipis: pada ukuran 132px, tebal ikon biasa terbaca sebagai
   coretan, bukan cap */
.layanan__cap .ikon { stroke-width: .9; }
.layanan__cap {
  display: block; position: absolute; right: -18px; bottom: -18px; width: 132px; height: 132px;
  color: var(--gading); opacity: .05; pointer-events: none;
}
.layanan__nomor {
  display: block; font-family: var(--serif); font-size: 21px; font-weight: 600;
  letter-spacing: .1em; color: var(--kuningan); line-height: 1;
}
.layanan h3 {
  margin-top: 18px; font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gading);
}
.layanan p { margin: 14px 0 26px; font-size: 13.5px; line-height: 1.7; color: rgba(244, 241, 234, .58); }
.layanan__tautan {
  margin-top: auto; display: inline-flex; align-items: center; gap: 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pasir); transition: color .2s ease;
}
.layanan:hover .layanan__tautan { color: var(--kuningan-terang); }
.layanan__tautan .panah { transition: transform .25s ease; }
.layanan:hover .layanan__tautan .panah { transform: translateX(5px); }

/* ================= HARGA ================= */
.kartu-harga { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.kartu {
  position: relative; display: flex; flex-direction: column; padding: 38px 26px 30px;
  background: #FBFAF7; border: 1px solid var(--garis-terang); border-radius: var(--sudut);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kartu:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14, 14, 14, .10); border-color: var(--garis-kuningan); }
.kartu h3 {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--redup);
}
.kartu__harga {
  margin-top: 14px; font-family: var(--serif); font-size: 42px; font-weight: 700;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.kartu__garis { width: 100%; height: 1px; background: var(--garis-terang); margin: 24px 0 22px; }
.kartu__isi { margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.6; color: var(--redup); }
.kartu__isi li { position: relative; padding-left: 20px; margin-bottom: 9px; }
.kartu__isi li::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 1px;
  background: var(--kuningan);
}
.kartu__alt {
  margin-top: auto; padding-top: 22px; font-size: 11.5px; letter-spacing: .06em;
  color: var(--redup);
}
.kartu__alt b { color: var(--tinta); font-weight: 600; }
/* kartu tersorot: kebalikan warna, bukan kuningan penuh */
.kartu--sorot { background: var(--arang); border-color: var(--arang); color: var(--gading); }
.kartu--sorot h3 { color: var(--pasir); }
.kartu--sorot .kartu__garis { background: var(--garis-gelap); }
.kartu--sorot .kartu__isi { color: rgba(244, 241, 234, .66); }
.kartu--sorot .kartu__alt { color: rgba(244, 241, 234, .55); }
.kartu--sorot .kartu__alt b { color: var(--gading); }
.kartu--sorot:hover { box-shadow: 0 18px 40px rgba(14, 14, 14, .28); }
.lencana {
  position: absolute; top: -11px; left: 26px; background: var(--kuningan); color: var(--hitam);
  font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 2px;
}

/* ---------- daftar layanan lain ---------- */
.daftar-layanan { margin-top: 96px; padding-top: 66px; border-top: 1px solid var(--garis-terang); }
.baris-harga {
  display: flex; align-items: baseline; gap: 20px; padding: 20px 18px;
  border-bottom: 1px solid var(--garis-terang); border-radius: var(--sudut-kecil);
  transition: background .2s ease;
}
.baris-harga:hover { background: rgba(234, 229, 220, .55); }
.baris-harga__nama { font-family: var(--serif); font-size: 21px; font-weight: 700; transition: color .2s ease; }
.baris-harga:hover .baris-harga__nama { color: var(--kuningan-tua); }
.baris-harga__ket {
  display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 400;
  color: var(--redup); margin-top: 3px; letter-spacing: .01em;
}
.titik { flex: 1; border-bottom: 1px dotted rgba(23, 22, 20, .22); min-width: 24px; transform: translateY(-6px); }
.baris-harga__angka { display: flex; align-items: baseline; gap: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.baris-harga__angka .kecil {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--redup);
}
.baris-harga__angka b { font-family: var(--serif); font-size: 21px; }
.baris-harga .panah { color: var(--kuningan); opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease; align-self: center; }
.baris-harga:hover .panah { opacity: 1; transform: translateX(0); }
.catatan { margin-top: 30px; text-align: center; font-size: 13px; color: var(--redup); max-width: 70ch; margin-inline: auto; }

/* ================= ULASAN ================= */
/* Jalur berjalan. Daftar kartu dicetak dua kali lalu digeser tepat setengah
   lebar jalur — begitu putaran pertama habis, posisinya identik dengan awal,
   jadi perulangannya tidak terlihat. */
.jalur-ulasan {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.jalur { display: flex; gap: 24px; width: max-content; animation: geser 78s linear infinite; }
.jalur-ulasan:hover .jalur { animation-play-state: paused; }
@keyframes geser {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 12px)); }   /* setengah lebar + setengah gap */
}
@media (prefers-reduced-motion: reduce) {
  .jalur { animation: none; }
  .jalur-ulasan { overflow-x: auto; }
}

.ulasan {
  position: relative; flex: 0 0 390px; margin: 0; padding: 32px 30px 28px;
  background: var(--arang); border: 1px solid var(--arang-muda); border-radius: var(--sudut);
  display: flex; flex-direction: column;
}
/* tanda kutip besar sebagai cap; menandai ini kalimat orang, bukan salinan iklan */
.ulasan::before {
  content: "\201C"; position: absolute; right: 22px; top: 6px;
  font-family: var(--serif); font-size: 84px; line-height: 1; color: var(--kuningan); opacity: .16;
}
.ulasan__bintang { display: flex; gap: 4px; margin-bottom: 18px; color: var(--kuningan); }
.ulasan__bintang svg { width: 15px; height: 15px; }
.ulasan__bintang svg.kosong { color: var(--arang-muda); }
/* sengaja sans, bukan serif: ini teks pelanggan yang harus gampang dibaca */
.ulasan blockquote {
  margin: 0 0 24px; font-family: var(--sans); font-size: 14.5px; line-height: 1.75;
  color: rgba(244, 241, 234, .88);
}
.ulasan figcaption {
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--garis-gelap);
  display: flex; align-items: center; gap: 14px;
}
.ulasan__inisial {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--garis-kuningan); color: var(--pasir);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
}
.ulasan__nama { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ulasan__sumber { display: block; margin-top: 3px; font-size: 11px; color: rgba(244, 241, 234, .5); letter-spacing: .1em; }

/* ================= LOKASI ================= */
.kisi-cabang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 34px; }
.kartu-cabang {
  display: flex; flex-direction: column; padding: 34px 32px;
  background: #FBFAF7; border: 1px solid var(--garis-terang); border-radius: var(--sudut);
  transition: border-color .25s ease, transform .25s ease;
}
.kartu-cabang:hover { border-color: var(--garis-kuningan); transform: translateY(-3px); }
.kartu-cabang h3 {
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; display: flex; align-items: center; gap: 12px;
}
.kartu-cabang h3 svg { width: 17px; height: 17px; color: var(--kuningan); }
.kartu-cabang dl { margin: 26px 0 30px; display: grid; grid-template-columns: 88px 1fr; gap: 12px 18px; font-size: 14px; }
.kartu-cabang dt { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--redup); padding-top: 4px; }
.kartu-cabang dd { margin: 0; color: var(--tinta); }
.kartu-cabang .btn { margin-top: auto; align-self: flex-start; }

.peta { border: 1px solid var(--garis-terang); border-radius: var(--sudut); overflow: hidden; line-height: 0; background: #E9E7E3; }
.peta iframe { width: 100%; height: 420px; border: 0; display: block; filter: grayscale(1) contrast(1.04); }

/* ================= AJAKAN SEBELUM KAKI ================= */
.ajakan {
  position: relative; background: var(--hitam); color: var(--gading);
  padding: 108px 0; overflow: hidden; text-align: center;
}
/* Sorot kuningan di belakang ajakan.

   Sebelumnya pusatnya di tepi atas bagian (`at 50% 0%`) dengan tinggi 100%,
   jadi sorotnya paling kuat persis di baris tempat peleburan dari bagian
   terang berakhir. Peleburan itu sengaja netral — dua warna bertemu di satu
   garis, dan kuningannya terbaca bertabrakan, bukan menyatu.

   Sekarang pusatnya ditarik ke tengah bagian dan jangkauannya dipendekkan
   supaya alfanya sudah nol sebelum menyentuh tepi mana pun: pusat di 46%
   dengan jari-jari tegak 62% berarti tepi atas berjarak 0,74 dari pusat,
   sedangkan warnanya habis di 0,72. Sorotnya jadi cahaya di belakang tulisan,
   bukan pita warna di sambungan. Takarannya juga diturunkan, 14% → 7%. */
.ajakan__cahaya {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 62% at 50% 46%,
                              rgba(176, 141, 87, .07), rgba(176, 141, 87, 0) 72%);
}
.ajakan h2 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -.01em; }
.ajakan p { margin: 22px auto 0; max-width: 44ch; color: rgba(244, 241, 234, .6); }
.ajakan .btn { margin-top: 40px; }
.ajakan__garis { width: 46px; height: 1px; background: var(--kuningan); margin: 0 auto 30px; }

/* ================= KAKI ================= */
/* sewarna dengan pita ajakan di atasnya: dua bidang gelap berturut-turut
   tidak butuh peleburan, cukup tidak ada batas sama sekali */
.kaki { position: relative; background: var(--hitam); color: var(--gading); padding: 88px 0 0; }
.kaki__kisi { display: grid; grid-template-columns: 1fr 1.15fr .85fr .95fr; gap: 52px; }
.kaki h4 {
  margin: 0 0 24px; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--pasir);
  display: flex; align-items: center; gap: 12px;
}
.kaki h4::after { content: ""; flex: 1; height: 1px; background: var(--garis-gelap); }
.kaki p, .kaki li { color: rgba(244, 241, 234, .6); font-size: 14px; }
.kaki ul { margin: 0; padding: 0; list-style: none; }
.kaki a:hover { color: var(--kuningan-terang); }
.kaki__kontak li { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 15px; }
.kaki__kontak svg { width: 16px; height: 16px; margin-top: 4px; flex-shrink: 0; color: var(--kuningan); }
.kaki__cabang li { margin-bottom: 24px; }
.kaki__cabang strong {
  display: flex; gap: 10px; align-items: center; color: var(--gading); font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px;
}
.kaki__cabang strong svg { width: 15px; height: 15px; color: var(--kuningan); }
.kaki__jam dt { color: var(--gading); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; margin-top: 16px; }
.kaki__jam dt:first-child { margin-top: 0; }
.kaki__jam dd { margin: 4px 0 0; color: rgba(244, 241, 234, .6); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.kaki__merek { text-align: center; }
.kaki__merek img { width: 132px; margin: 0 auto 18px; }
.kaki__merek span { display: block; font-size: 10px; letter-spacing: .26em; color: rgba(244, 241, 234, .45); line-height: 2; }
.kaki__bawah {
  margin-top: 72px; border-top: 1px solid var(--garis-gelap); padding: 26px 0;
  display: flex; gap: 20px; flex-wrap: wrap; font-size: 12px; color: rgba(244, 241, 234, .42);
}
.kaki__bawah .kanan { margin-left: auto; display: flex; gap: 22px; }
.isian { color: inherit; border-bottom: 1px dashed currentColor; opacity: .7; font-size: 13px; }

/* ================= BUBBLE WHATSAPP ================= */
.wa {
  position: fixed; right: 26px; bottom: 26px; z-index: 50;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--kuningan); color: var(--hitam);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(14, 14, 14, .45);
  transition: transform .2s ease, background .2s ease;
}
.wa:hover { transform: translateY(-3px); background: var(--kuningan-terang); }
.wa svg { width: 30px; height: 30px; }
.wa__label {
  position: absolute; right: 72px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; background: var(--hitam); color: var(--gading);
  font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding: 10px 15px; border-radius: var(--sudut-kecil); border: 1px solid var(--garis-kuningan);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.wa:hover .wa__label { opacity: 1; }

/* ================= LAYAR SEDANG ================= */
@media (max-width: 1080px) {
  :root { --pita-atas: 70px; }
  .bungkus { padding: 0 28px; }
  .hero { padding: 32px 0 calc(var(--hero-lebur) + 32px); }
  .menu, .atas__ajakan { display: none; }
  .burger { display: flex; justify-self: end; }
  .atas__isi { grid-template-columns: auto 1fr; }
  .atas__logo { justify-self: start; }
  .laci.buka { display: block; }
  .laci a, .laci .btn { padding-inline: 28px; }
  .laci .btn { margin-inline: 28px; }
  .tentang { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .layanan-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kartu-harga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kaki__kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
  .peta iframe { height: 340px; }
}

/* ================= LAYAR SEMPIT ================= */
@media (max-width: 700px) {
  .bungkus { padding: 0 20px; }
  :root { --pita-atas: 56px; }
  .kepala { margin-bottom: 44px; }
  .hero { padding: 24px 0 calc(var(--hero-lebur) + 24px); }
  /* Layar sempit memotong foto jauh lebih dalam: yang tersisa hanya sepertiga
     lebarnya. Titik potong digeser sedikit ke bawah supaya deretan gunting dan
     pisau cukur ikut masuk, bukan cuma dinding gelap di atasnya. */
  .hero__latar img { object-position: 58% 58%; }
  .hero__tepi {
    background:
      linear-gradient(180deg, var(--hitam) 0%, rgba(15, 15, 16, 0) 16%),
      radial-gradient(120% 100% at 50% 45%,
                      rgba(15, 15, 16, 0) 42%, rgba(15, 15, 16, .55) 100%);
  }
  .hero__cahaya {
    background:
      linear-gradient(180deg, rgba(15, 15, 16, .88) 0%, rgba(15, 15, 16, .78) 52%,
                              rgba(15, 15, 16, .52) 100%),
      radial-gradient(80% 50% at 50% 30%, rgba(176, 141, 87, .08) 0%, transparent 70%);
  }
  .hero h1 { font-size: clamp(36px, 11vw, 48px); }
  .hero__slogan { font-size: 17px; }
  .hero__tombol .btn { flex: 1 1 100%; }
  /* Di layar sempit papan jadi tiga baris bertumpuk, jadi jaraknya dirapatkan
     supaya hero tidak tumbuh jauh melewati satu layar. */
  :root { --papan-jarak: 26px; --papan-bawah: 18px; }
  .papan { grid-template-columns: minmax(0, 1fr); }
  .papan__item { padding: 20px 22px; }
  .papan__item + .papan__item { border-left: 0; border-top: 1px solid rgba(23, 22, 20, .09); }
  .statistik { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .statistik > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .statistik b { font-size: 28px; }
  .layanan-kisi, .kartu-harga, .kisi-cabang, .kaki__kisi { grid-template-columns: minmax(0, 1fr); }
  .kartu__harga { font-size: 38px; }
  .baris-harga { flex-wrap: wrap; padding: 18px 12px; }
  .titik { display: none; }
  .baris-harga__angka { margin-left: auto; }
  .baris-harga .panah { display: none; }
  .ulasan { flex-basis: 300px; padding: 26px 24px; }
  .jalur { gap: 18px; }
  @keyframes geser { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
  .peta iframe { height: 300px; }
  .kaki__bawah .kanan { margin-left: 0; width: 100%; }
  .wa { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .wa svg { width: 27px; height: 27px; }
  .wa__label { display: none; }
}