/* ==========================================================================
   KINI LUXURY — Website utama
   Sistem desain: monokrom, satu keluarga huruf sans.

   Dulu judul memakai serif klasik (Cormorant Garamond). Serif itu cantik
   pada poster, tapi goresannya sangat tipis: pada layar biasa — apalagi
   layar yang kecerahannya diturunkan atau di bawah matahari Bali — judul
   dan teks isinya sama-sama terbaca "kurus" dan melelahkan. Sekarang
   seluruh situs memakai sans: Instrument Sans untuk judul, Inter untuk
   badan teks. Keduanya dirancang khusus untuk layar, dan tidak ada satu
   pun goresan tipis yang tersisa.

   Emas HANYA dipakai sebagai tanda baca — garis di bawah judul, label
   eyebrow, dan bintang ulasan. Tidak lebih.

   Aturan yang dipegang di seluruh berkas ini:
   1. Warna hanya diambil dari peubah di :root. Tidak ada warna mentah di
      dalam komponen — mengganti nuansa merek cukup di satu tempat.
   2. Bayangan dipakai sehemat mungkin. Kemewahan dibangun dari ruang kosong
      dan garis tipis, bukan dari kartu melayang.
   3. Setiap ukuran huruf besar memakai clamp(), sehingga tidak ada satu pun
      judul yang perlu media query sendiri.
   ========================================================================== */

:root {
  /* Warna — monokrom. Nama peubah dipertahankan supaya seluruh berkas
     (dan tema lama) tetap sah; yang berubah hanya nilainya. */
  --tinta:        #0b0b0b;   /* hitam utama    */
  --tinta-2:      #1f1f1f;   /* teks badan     */
  --tinta-3:      #565656;   /* teks sekunder  */
  --tinta-4:      #8c8c8c;   /* teks tersier   */

  --krem:         #ffffff;   /* latar halaman  */
  --krem-2:       #f4f4f2;   /* latar seksi    */
  --krem-3:       #e7e7e4;   /* latar gambar   */
  --putih:        #ffffff;

  /* Emas dipakai sehemat mungkin: garis judul, eyebrow, bintang. */
  --emas:         #a3873f;
  --emas-terang:  #c4a768;
  --emas-pudar:   #f5f1e7;

  --garis:        rgba(11, 11, 11, .16);
  --garis-halus:  rgba(11, 11, 11, .08);
  --garis-terang: rgba(255, 255, 255, .22);

  /* Huruf.
     Nama peubahnya dipertahankan (--serif dipakai belasan kali di berkas
     ini dan di beberapa view), yang berganti isinya. Mengganti namanya
     sekaligus berarti satu tempat terlewat lalu memakai huruf sistem
     tanpa ada yang menyadarinya. */
  --serif: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;  /* judul */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;            /* badan */

  /* Ruang */
  --lebar:      1240px;
  /* Kolom baca dilebarkan dari 720px. Dengan huruf badan 17px, 720px hanya
     memuat ±62 huruf per baris — terlalu sempit, dan pada layar lebar
     kolomnya terlihat seperti pita tipis di tengah halaman kosong. 780px
     memberi ±70 huruf, yang masih di dalam rentang nyaman dibaca. */
  --lebar-baca: 820px;
  --sisi:       clamp(20px, 5vw, 56px);
  --seksi:      clamp(64px, 9vw, 128px);

  --lengkung:   2px;   /* sudut nyaris tegas — kesan klasik */
  --lengkung-l: 4px;

  --alih: 320ms cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- dasar -- */

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

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

body {
  margin: 0;
  background: var(--krem);
  color: var(--tinta-2);
  font-family: var(--sans);
  font-size: 17px;
  /* 400, bukan 300. Berat 300 pada layar biasa terbaca abu-abu dan
     berkedip-kedip di huruf kecil; ia hanya bekerja pada layar rapat
     dengan latar terang. Yang membuat halaman terasa lapang di sini
     adalah ruang kosong, bukan huruf yang ditipiskan. */
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  /* Sans butuh berat lebih dan jarak huruf lebih rapat daripada serif
     untuk memberi bobot yang sama; ukurannya juga diturunkan sedikit,
     karena huruf sans pada ukuran serif terbaca jauh lebih besar. */
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--tinta);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.22rem, 1.9vw, 1.5rem); letter-spacing: -.015em; }
h4 { font-size: clamp(1.05rem, 1.5vw, 1.2rem); letter-spacing: -.01em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--tinta); color: #fff; }

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

/* Kelas bantu ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--lebar);
  margin-inline: auto;
  padding-inline: var(--sisi);
}
/* margin-inline: auto WAJIB ada di sini, bukan hanya di .wrap.
   Kedua kelas ini dipakai dua cara: menempel pada .wrap (yang memang sudah
   punya margin auto), DAN sendirian pada div di dalam .wrap — dipakai
   hampir semua kepala blok. Pada pemakaian kedua, tanpa baris ini kotaknya
   menempel ke kiri, dan judul yang "rata tengah" itu tengah-nya kotak
   selebar 880px, bukan tengah halaman. Selisihnya sekitar 120px: cukup
   untuk terlihat miring dibanding kartu di bawahnya, tapi tidak cukup
   untuk terlihat seperti kerusakan. */
.wrap-sempit { max-width: 880px; margin-inline: auto; }
.wrap-baca   { max-width: var(--lebar-baca); margin-inline: auto; }

.seksi { padding-block: var(--seksi); }
.seksi-rapat { padding-block: clamp(44px, 6vw, 80px); }

/* Bagian tengah Beranda harus terasa sebagai satu rangkaian, bukan tiga
   halaman yang ditumpuk. Padding umum sengaja lapang untuk halaman isi;
   pada Why Choose, Packages, dan Reviews jaraknya dipadatkan agar perjalanan
   dari pembeda layanan ke bukti sosial tidak memerlukan gulir berlebih. */
.seksi-beranda-padat { padding-block: clamp(48px, 6vw, 88px); }
.seksi-beranda-padat .rel-kepala { margin-bottom: clamp(24px, 2.5vw, 36px); }
.seksi-beranda-padat .rel-kaki { margin-top: clamp(22px, 2.2vw, 32px); }

.gelap { background: var(--tinta); color: rgba(255,255,255,.74); }
.gelap h1, .gelap h2, .gelap h3, .gelap h4 { color: #fff; }
.gelap .eyebrow { color: var(--emas-terang); }
.gelap .aturan::after { background: var(--garis-terang); }

.krem-2 { background: var(--krem-2); }

.tengah { text-align: center; }
.tengah .aturan { margin-inline: auto; }

/* Label kecil di atas judul — penanda khas identitas ini. */
.eyebrow {
  font-family: var(--sans);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--emas);
  margin: 0 0 1.1rem;
  display: block;
}

/* Garis rambut di bawah judul. */
.aturan { position: relative; padding-bottom: 1.6rem; }
.aturan::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 1px;
  background: var(--emas);
}
.tengah .aturan::after { left: 50%; transform: translateX(-50%); }

.timah { color: var(--tinta-3); }

.lead {
  font-size: clamp(1.06rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: var(--tinta-3);
  font-weight: 400;
}

/* --------------------------------------------------------------- tombol -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1.02em 2.2em;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--lengkung);
  cursor: pointer;
  transition: background var(--alih), color var(--alih), border-color var(--alih), transform var(--alih);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-utama          { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.btn-utama:hover    { background: #fff; color: var(--tinta); border-color: var(--tinta); }

/* Nama kelas dipertahankan (dipakai di banyak view), tapi rupanya kini
   hitam pekat. Emas hanya muncul sebagai garis tipis saat disentuh. */
.btn-emas           { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.btn-emas:hover     { background: #fff; color: var(--tinta); border-color: var(--emas); }

.btn-garis          { background: transparent; color: var(--tinta); border-color: var(--garis); }
.btn-garis:hover    { border-color: var(--tinta); background: var(--tinta); color: #fff; }

.btn-terang         { background: transparent; color: #fff; border-color: var(--garis-terang); }
.btn-terang:hover   { background: #fff; color: var(--tinta); border-color: #fff; }

.btn-blok { width: 100%; }
.btn-kecil { padding: .8em 1.5em; font-size: .68rem; }

/* Tautan bergaris bawah yang tumbuh saat disentuh. */
.tautan {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--tinta);
  transition: gap var(--alih), color var(--alih), border-color var(--alih);
}
.tautan:hover { gap: 1em; color: var(--tinta-3); border-bottom-color: var(--tinta); }
.gelap .tautan { color: #fff; }

/* --------------------------------------------------------------- header -- */

.situs-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  transition: background var(--alih), box-shadow var(--alih), border-color var(--alih);
  border-bottom: 1px solid transparent;
}
.situs-header .baris {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  height: 84px;
  transition: height var(--alih);
}

/* Di atas hero: menumpang gambar, tanpa latar. */
.situs-header[data-mode="atas"] { background: transparent; }
.situs-header[data-mode="atas"] .nav-tautan,
.situs-header[data-mode="atas"] .ikon-btn,
.situs-header[data-mode="atas"] .lang-pilih { color: #fff; }
.situs-header[data-mode="atas"] .logo-gelap { display: none; }
.situs-header[data-mode="atas"] .logo-terang { display: block; }

/* Setelah digulir: latar krem pekat, bayangan tipis. */
.situs-header[data-mode="turun"] {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--garis-halus);
}
.situs-header[data-mode="turun"] .baris { height: 68px; }
.situs-header[data-mode="turun"] .logo-terang { display: none; }
.situs-header[data-mode="turun"] .logo-gelap { display: block; }

.situs-logo { display: flex; align-items: center; flex: 0 0 auto; }
.situs-logo img { height: 47px; width: auto; transition: height var(--alih); }
.situs-header[data-mode="turun"] .situs-logo img { height: 40px; }
.logo-terang { display: none; }

.situs-logo .wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: inherit;
}

.situs-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  margin-inline-start: auto;
}

.nav-item { position: relative; }

.nav-tautan {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  padding: .5em 0;
  position: relative;
  transition: color var(--alih);
}
.nav-tautan::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--tinta);
  transition: width var(--alih);
}
.nav-item:hover > .nav-tautan::after,
.nav-tautan[aria-current="page"]::after { width: 100%; }
.nav-tautan .fa-chevron-down { font-size: .5rem; opacity: .55; transition: transform var(--alih); }
.nav-item:hover .fa-chevron-down { transform: rotate(180deg); }

/* Submenu */
.nav-sub {
  position: absolute;
  top: calc(100% + 14px);
  inset-inline-start: -18px;
  min-width: 260px;
  background: var(--putih);
  border: 1px solid var(--garis-halus);
  box-shadow: 0 22px 50px -28px rgba(20, 19, 15, .4);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--alih), transform var(--alih), visibility var(--alih);
}
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-sub a {
  display: block;
  padding: .72em 1.5em;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--tinta-2);
  transition: background var(--alih), color var(--alih), padding-inline-start var(--alih);
}
.nav-sub a:hover { background: var(--krem-2); color: var(--tinta); padding-inline-start: 1.85em; }

.header-aksi { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

/* Pemilih bahasa */
.lang-pilih { position: relative; }
.lang-tombol {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  background: none;
  border: 0;
  padding: .5em .2em;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
}
.lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  min-width: 152px;
  background: var(--putih);
  border: 1px solid var(--garis-halus);
  box-shadow: 0 22px 50px -28px rgba(20, 19, 15, .4);
  padding: 6px 0;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--alih), transform var(--alih), visibility var(--alih);
}
.lang-pilih:hover .lang-menu,
.lang-pilih:focus-within .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu a {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: .6em 1.15em;
  font-size: .8rem;
  color: var(--tinta-2);
}
.lang-menu a:hover { background: var(--krem-2); }
.lang-menu a[aria-current="true"] { color: var(--tinta); font-weight: 500; }

.ikon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  background: none;
  border: 0;
  color: var(--tinta);
  font-size: 1.05rem;
  cursor: pointer;
}

.btn-menu { display: none; }

/* --------------------------------------------------------- menu ponsel -- */

/* Laci disusun sebagai kolom: kepala tetap di atas, daftar menu mengambil
   sisa ruang dan bisa digulir sendiri, tombol pesan menempel di bawah.
   Tanpa itu, di ponsel pendek tombol "Book Now" berada di luar layar dan
   hanya ketemu kalau seseorang menebak bahwa lacinya masih bisa digulir. */
.laci {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--krem);
  padding: 18px var(--sisi) max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 420ms cubic-bezier(.22,.61,.36,1);
}
.laci[data-buka="1"] { transform: translateX(0); }

.laci-atas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--garis-halus);
  flex: 0 0 auto;
}
.laci-atas img { height: 38px; width: auto; }
.laci-atas .ikon-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--garis);
  border-radius: var(--lengkung);
}

.laci-nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: 6px;
}
.laci-nav > li { border-bottom: 1px solid var(--garis-halus); }
.laci-nav > li:last-child { border-bottom: 0; }
.laci-nav a {
  display: block;
  padding: .82em 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.18rem;
  letter-spacing: -.015em;
  color: var(--tinta);
}
/* Submenu dilipat.
   Enam layanan yang selalu terbuka mendorong Fleet, Packages, Journal,
   About, dan Contact keluar dari layar pertama — menu yang isinya lima
   butir terasa seperti menu yang isinya satu. Dilipat dengan
   grid-template-rows 0fr→1fr supaya tingginya bisa dianimasikan tanpa
   harus diukur JavaScript lebih dulu. */
.laci-nav > li > .baris-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}
.laci-nav > li > .baris-menu > a { flex: 1 1 auto; }

.laci-lipat {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--tinta-3);
  font-size: .78rem;
  cursor: pointer;
  transition: transform var(--alih), color var(--alih);
}
.laci-lipat[aria-expanded="true"] { transform: rotate(180deg); color: var(--tinta); }

.laci-nav .sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(.22,.61,.36,1);
}
.laci-nav .sub > ul {
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}
.laci-nav li[data-buka="1"] > .sub { grid-template-rows: 1fr; }

.laci-nav .sub a {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .93rem;
  padding: .48em 0 .48em .9em;
  color: var(--tinta-3);
  border-inline-start: 1px solid var(--garis-halus);
}
.laci-nav .sub > ul > li:last-child a { padding-bottom: .9em; }

.laci-kaki {
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--garis-halus);
}
.laci-bahasa {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.laci-bahasa a {
  flex: 1 1 0;
  text-align: center;
  padding: .62em 0;
  border: 1px solid var(--garis);
  border-radius: var(--lengkung);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.laci-bahasa a[aria-current="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: min(100svh, 860px);
  display: grid;
  align-items: end;
  /* Latar hitam bukan hiasan melainkan jaring pengaman: teks hero selalu
     putih, jadi hero yang gambarnya belum diisi akan menampilkan judul
     putih di atas halaman putih — tulisan lenyap tanpa satu pun galat. */
  background: var(--tinta);
  color: #fff;
  overflow: hidden;
}
.hero-sedang { min-height: min(74svh, 660px); }
.hero-kecil  { min-height: 52svh; align-items: center; }

.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Sedikit gerak lambat: hidup, tapi tidak menarik perhatian dari teks. */
  animation: heroTarik 22s ease-out forwards;
}

/* Video hero. object-fit:cover menutup seluruh bidang berapa pun bentuk
   layarnya; berkas mana yang diunduh ditentukan <source media> di
   blok/hero.php, jadi ponsel tidak pernah mengambil berkas desktop. */
.hero-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Video tidak ikut animasi tarik — dua gerakan sekaligus membuat hero
   terasa goyah. */
.hero-video img { animation: none; }
@keyframes heroTarik { from { transform: scale(1.08); } to { transform: scale(1); } }

.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.36) 46%, rgba(0,0,0,.46) 100%);
}

.hero-isi {
  position: relative;
  padding-block: clamp(80px, 12vw, 132px);
  max-width: 780px;
}
.hero-kecil .hero-isi { padding-block: clamp(96px, 12vw, 130px); }

.hero h1 { color: #fff; margin-bottom: .38em; }
.hero .eyebrow { color: var(--emas-terang); }   /* satu-satunya emas di hero */
.hero p {
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  color: rgba(255,255,255,.86);
  max-width: 56ch;
  font-weight: 400;
}
.hero-aksi { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.2rem; }

/* Di atas gambar hero, tombol utama dibalik jadi putih.
   Palet situs ini hitam, dan hero selalu gelap — tombol hitam di atas
   gambar gelap masih terbaca, tapi tidak menarik mata ke mana pun.
   Yang paling terang di layar harus tindakan yang paling diinginkan. */
.hero .btn-emas,
.pita-cta .btn-emas {
  background: #fff;
  color: var(--tinta);
  border-color: #fff;
}
.hero .btn-emas:hover,
.pita-cta .btn-emas:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* Penanda gulir */
.hero-gulir {
  position: absolute;
  inset-inline-start: var(--sisi);
  bottom: 26px;
  display: flex; align-items: center; gap: .8em;
  font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.hero-gulir i { animation: turun 2.4s ease-in-out infinite; }
@keyframes turun { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* --------------------------------------------------------------- kisi -- */

.kisi { display: grid; gap: clamp(24px, 3vw, 40px); }
.kisi-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.kisi-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.kisi-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Dua kolom teks + gambar */
.belah {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(34px, 5vw, 84px);
  align-items: center;
}
/* Dua kolom yang panjangnya jauh berbeda tidak boleh ditengahkan.
   Pada halaman kontak, kolom kiri (alamat, WhatsApp, email) jauh lebih
   pendek daripada kartu formulir di kanannya; dengan align-items:center
   milik .belah, kolom pendek itu melayang di tengah dan meninggalkan
   ruang kosong sebesar setengah layar di atasnya — terbaca sebagai
   halaman yang gagal dimuat, bukan sebagai tata letak. */
.belah-atas { align-items: start; }

.belah-media { position: relative; }
.belah-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.belah-media.lebar img { aspect-ratio: 3/2; }

/* Bingkai emas tipis di belakang gambar — sentuhan klasik. */
.belah-media.berbingkai::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--garis);
  z-index: -1;
}

/* --------------------------------------------------------------- kartu -- */

.kartu {
  position: relative;
  background: var(--putih);
  border: 1px solid var(--garis-halus);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--alih), transform var(--alih), box-shadow var(--alih);
}
.kartu:hover {
  border-color: var(--garis);
  transform: translateY(-3px);
  box-shadow: 0 26px 48px -34px rgba(0,0,0,.4);
}

.kartu-media { position: relative; overflow: hidden; background: var(--krem-3); }
.kartu-media img {
  width: 100%; height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
.kartu:hover .kartu-media img { transform: scale(1.045); }

.kartu-isi { padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; flex: 1; }
.kartu-isi h3 { margin-bottom: .45rem; }
.kartu-isi p { color: var(--tinta-3); font-size: .95rem; line-height: 1.62; }
.kartu-isi .tautan { margin-top: auto; padding-top: 1.3rem; align-self: flex-start; }

.kartu-label {
  position: absolute;
  top: 14px; inset-inline-start: 14px;
  background: rgba(0,0,0,.86);
  color: #fff;
  padding: .42em .9em;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Kartu layanan dengan gambar penuh dan teks di atasnya. */
.kartu-sorot {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.kartu-sorot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(.22,.61,.36,1);
}
.kartu-sorot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.92) 4%, rgba(0,0,0,.14) 62%);
  transition: background var(--alih);
}
.kartu-sorot:hover img { transform: scale(1.05); }
.kartu-sorot:hover::after { background: linear-gradient(to top, rgba(0,0,0,.95) 10%, rgba(0,0,0,.3) 70%); }
.kartu-sorot .isi { position: relative; z-index: 1; padding: clamp(22px, 2.6vw, 34px); width: 100%; }
.kartu-sorot h3 { color: #fff; margin-bottom: .35rem; }
.kartu-sorot p { color: rgba(255,255,255,.76); font-size: .9rem; margin-bottom: 1rem; }
.kartu-sorot .tautan { color: #fff; }

/* Kartu armada */
.kartu-armada .kartu-media img { aspect-ratio: 16/10; object-fit: cover; }
.spek {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--tinta-3);
}
.spek li { display: inline-flex; align-items: center; gap: .5em; }
.spek i { color: var(--tinta-4); font-size: .8em; }

/* Kartu artikel */
.kartu-artikel .meta {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-4);
  margin-bottom: .7rem;
}

/* ---------------------------------------------------------------- angka -- */

.angka-baris {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.angka { text-align: center; }
.angka .nilai {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.03em;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--tinta);
  margin-bottom: .4rem;
}
.angka .label {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-4);
}
.gelap .angka .label { color: rgba(255,255,255,.6); }

/* Angka besarnya HARUS ikut membalik di blok gelap.
   Sejak palet berganti monokrom, .nilai memakai --tinta (hitam) — dan blok
   "angka" hampir selalu dipasang di seksi gelap. Hasilnya angka hitam di
   atas latar hitam: labelnya terlihat, angkanya lenyap, dan blok itu
   tampak seperti deretan keterangan tanpa isi. */
.gelap .angka .nilai { color: #fff; }

/* Aturan yang sama berlaku untuk apa pun yang dipasang di seksi gelap. */
.gelap .lead,
.gelap .timah { color: rgba(255,255,255,.72); }
.gelap .kartu { background: rgba(255,255,255,.04); border-color: var(--garis-terang); }
.gelap .kartu-isi p { color: rgba(255,255,255,.66); }
.gelap .ulasan { background: rgba(255,255,255,.04); border-color: var(--garis-terang); }
.gelap .ulasan blockquote { color: #fff; }
.gelap .ulasan .nama { color: #fff; }
.gelap .ulasan .asal { color: rgba(255,255,255,.5); }

/* ------------------------------------------------------------ testimoni -- */

.ulasan {
  /* margin:0 WAJIB, dan bukan kerapian belaka.
     Kartu ulasan adalah elemen <figure>, dan peramban memberi <figure>
     margin kiri-kanan 40px dari stylesheet bawaannya sendiri. Di dalam rel
     geser, 80px itu dipotong dari lebar kolom: kartunya menyusut dan
     berhenti sebelum tepi kolomnya, sehingga jaraknya tampak timpang dan
     kartu berikutnya mengintip di tempat yang salah. Di layar 390px,
     kartu yang seharusnya 322px hanya menjadi 242px. */
  margin: 0;
  background: var(--putih);
  border: 1px solid var(--garis-halus);
  padding: clamp(24px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.ulasan .bintang { color: var(--emas); font-size: .82rem; letter-spacing: .22em; }
.ulasan blockquote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--tinta-2);
}
.ulasan .siapa { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.ulasan .siapa img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.ulasan .nama { font-size: .86rem; font-weight: 500; color: var(--tinta); }
.ulasan .asal { font-size: .74rem; color: var(--tinta-4); letter-spacing: .06em; }
.ulasan blockquote.ulasan-tanpa-teks {
  color: var(--tinta-4);
  font-style: italic;
}

/* Ulasan membutuhkan kolom lebih lapang daripada kartu jurnal. Dua kartu
   per layar menjaga panjang baris nyaman dibaca dan mencegah ulasan panjang
   berubah menjadi kolom sempit yang terlalu tinggi. */
.rel-jalur.rel-jalur-ulasan {
  grid-auto-columns: calc((100% - clamp(24px, 3vw, 40px)) / 2);
}
.rel-jalur-ulasan .ulasan,
.kisi-ulasan .ulasan {
  min-height: clamp(360px, 34vw, 470px);
}
.kisi-ulasan {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  max-width: 920px;
  margin-inline: auto;
}
.blok-ulasan .ulasan blockquote { max-width: 46ch; }

/* ------------------------------------------------------------------ faq -- */

.faq-pembuka { margin: 0 0 clamp(34px,4vw,56px); max-width: 76ch; }
.faq-tata {
  display: grid;
  grid-template-columns: minmax(210px, .32fr) minmax(0, 1fr);
  gap: clamp(44px, 7vw, 104px);
  align-items: start;
}
.faq-indeks { position: sticky; top: 108px; }
.faq-indeks nav { display: grid; margin-top: 1rem; border-top: 1px solid var(--garis-halus); }
.faq-indeks a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: .85rem 0; border-bottom: 1px solid var(--garis-halus);
  color: var(--tinta-3); font-size: .84rem; line-height: 1.35;
  transition: color var(--alih), padding-inline-start var(--alih);
}
.faq-indeks a:hover { color: var(--tinta); padding-inline-start: 5px; }
.faq-indeks small {
  display: grid; place-items: center; min-width: 25px; height: 25px;
  border: 1px solid var(--garis); border-radius: 50%;
  color: var(--tinta-4); font-size: .65rem;
}
.faq-kelompok { scroll-margin-top: 100px; }
.faq-kelompok + .faq-kelompok { margin-top: clamp(46px, 6vw, 76px); }
.faq-kelompok-kepala {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.faq-kelompok-kepala h2 { margin: 0; font-size: clamp(1.55rem, 2.5vw, 2.2rem); }
.faq-kelompok-kepala > span {
  flex: 0 0 auto; color: var(--tinta-4); font-size: .65rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.faq { border-top: 1px solid var(--garis-halus); }
.faq-item { border-bottom: 1px solid var(--garis-halus); }
.faq-tanya {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6em;
  padding: 1.5em 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.01em;
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  color: var(--tinta);
  transition: color var(--alih);
}
.faq-tanya:hover { color: var(--tinta-3); }
.faq-tanya i { font-size: .8rem; color: var(--tinta-4); margin-top: .35em; transition: transform var(--alih); flex: 0 0 auto; }
.faq-item[data-buka="1"] .faq-tanya i { transform: rotate(45deg); }

.faq-jawab {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms cubic-bezier(.22,.61,.36,1);
}
.faq-item[data-buka="1"] .faq-jawab { grid-template-rows: 1fr; }
.faq-jawab > div { overflow: hidden; }
.faq-jawab p { padding-bottom: 1.7em; color: var(--tinta-3); max-width: 74ch; }
.faq-cta { margin-top: clamp(58px, 8vw, 104px); text-align: center; }

@media (max-width: 760px) {
  .faq-tata { grid-template-columns: 1fr; gap: 42px; }
  .faq-indeks { position: static; }
  .faq-indeks nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .faq-tanya { gap: 1em; padding-block: 1.25em; }
}
@media (max-width: 420px) {
  .faq-indeks nav { grid-template-columns: 1fr; }
  .faq-kelompok-kepala { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* ------------------------------------------------------------------ cta -- */

.pita-cta {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.pita-cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pita-cta::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.74); }
.pita-cta .isi { position: relative; z-index: 1; padding-block: clamp(64px, 8vw, 116px); }
.pita-cta h2 { color: #fff; }
.pita-cta p { color: rgba(255,255,255,.78); max-width: 58ch; margin-inline: auto; }
.pita-cta .aksi { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 2rem; }

/* -------------------------------------------------------------- artikel -- */

/* Badan artikel.
   Ukurannya lebih besar daripada teks di tempat lain, dan itu disengaja:
   ini satu-satunya bagian situs yang dibaca berturut-turut selama
   beberapa menit, bukan dipindai sekilas. Satuannya rem supaya ikut
   pengaturan ukuran huruf peramban pengunjung. */
/* Rata kiri-kanan, dengan pemenggalan kata dinyalakan.
   Justify tanpa pemenggalan adalah kesalahan klasik: peramban melebarkan
   spasi untuk memaksa baris penuh, dan pada kolom sempit — ponsel — yang
   muncul adalah "sungai" celah putih yang menembus paragraf ke bawah.
   hyphens:auto memberi peramban izin memenggal kata, sehingga celahnya
   tetap wajar. */
.tulisan {
  font-family: var(--sans);
  font-size: 1.09rem;
  line-height: 1.78;
  color: var(--tinta-2);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Keluarga huruf adalah milik template, bukan milik terjemahan. `font-size`
   inline lama dinetralkan; ukuran yang memang dipilih lewat editor disimpan
   sanitizer sebagai --ukuran-teks. Dengan begitu ukuran editor tetap bekerja
   tanpa membiarkan format hasil tempel membedakan EN dan ID. */
.tulisan :where(p, div, span, ul, ol, li, a, strong, b, em, i, u, s, td) {
  font-family: inherit !important;
  font-size: var(--ukuran-teks, inherit) !important;
  line-height: inherit !important;
}
.tulisan :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--serif) !important;
  line-height: 1.14 !important;
}
/* Judul, daftar, dan kutipan TIDAK ikut dirata-kanankan — judul yang
   direntangkan terbaca seperti salah cetak. */
.tulisan h2, .tulisan h3, .tulisan h4,
.tulisan blockquote, .tulisan table, .tulisan figcaption {
  text-align: start;
  hyphens: manual;
}
.artikel-intro { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.tulisan > *:first-child { margin-top: 0; }
.tulisan p { margin: 0 0 1.35em; }
.tulisan h1 { font-size: var(--ukuran-teks, clamp(1.55rem, 2.5vw, 2rem)) !important; }
.tulisan h2 { font-size: var(--ukuran-teks, clamp(1.4rem, 2.2vw, 1.75rem)) !important; margin-top: 2.1em; margin-bottom: .55em; }
.tulisan h3 { font-size: var(--ukuran-teks, clamp(1.15rem, 1.7vw, 1.32rem)) !important; margin-top: 1.8em; margin-bottom: .5em; }
.tulisan h4 { font-size: var(--ukuran-teks, clamp(1.05rem, 1.45vw, 1.18rem)) !important; }
.tulisan h5, .tulisan h6 { font-size: var(--ukuran-teks, 1rem) !important; }
.tulisan ul, .tulisan ol { padding-inline-start: 1.25em; margin: 0 0 1.35em; }
.tulisan li { margin-bottom: .5em; padding-inline-start: .15em; }
.tulisan li::marker { color: var(--tinta-4); }
.tulisan img { margin: 2.2em 0; width: 100%; border-radius: var(--lengkung-l); }
.tulisan blockquote {
  margin: 2.2em 0;
  padding-inline-start: 1.5em;
  border-inline-start: 3px solid var(--tinta);
  font-size: 1.16rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--tinta);
}
.tulisan a { color: var(--tinta); border-bottom: 1px solid rgba(11,11,11,.3); }
.tulisan a:hover { border-bottom-color: var(--tinta); }
.tulisan hr { border: 0; border-top: 1px solid var(--garis-halus); margin: 2.6em 0; }
.tulisan table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: .93rem; }
.tulisan th, .tulisan td { padding: .8em 1em; border-bottom: 1px solid var(--garis-halus); text-align: start; }
.tulisan th { font-family: var(--sans); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-4); }

/* --------------------------------------------------- tindakan detail -- */

/* Package tidak lagi membelah tulisan dan tombol ke dua kolom. Ringkasan
   diletakkan setelah isi dan memakai seluruh lebar wrap, lalu tindakan
   booking berada tepat di bawahnya—urutan membaca yang sama dengan Service
   dan Journal. */
.detail-ringkas {
  margin-top: clamp(36px, 5vw, 64px);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--garis-halus);
  background: var(--putih);
}
.detail-ringkas-kisi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(20px, 3vw, 38px);
}
.detail-ringkas-kisi li { display: flex; align-items: flex-start; gap: .9em; min-width: 0; }
.detail-ringkas-kisi i { color: var(--emas); margin-top: .35em; flex: 0 0 auto; }
.detail-ringkas-label {
  display: block;
  margin-bottom: .2rem;
  color: var(--tinta-4);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.detail-aksi-booking {
  margin-top: clamp(30px, 4vw, 46px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 620px) {
  .detail-ringkas-kisi { grid-template-columns: 1fr; }
  .detail-aksi-booking .btn { width: 100%; }
}

/* ------------------------------------------------------------ parallax -- */

.parallax {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  color: #fff;
  isolation: isolate;
}
.parallax-rendah { min-height: clamp(240px, 34vh, 340px); }
.parallax-sedang { min-height: clamp(340px, 52vh, 520px); }
.parallax-tinggi { min-height: clamp(440px, 72vh, 680px); }

/* Gambarnya sengaja dibuat lebih tinggi daripada bingkainya, lalu digeser
   naik-turun oleh JS. Kelebihan tinggi itulah ruang geraknya; tanpa itu,
   menggeser gambar akan memperlihatkan tepi kosong di atas atau bawah. */
.parallax-media {
  position: absolute;
  inset: -18% 0;
  z-index: -1;
  will-change: transform;
}
.parallax-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.parallax::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.7));
}
/* Pita tanpa tulisan hanya perlu diredupkan sedikit — ia jeda, bukan
   tempat membaca. */
.parallax-polos::after { background: rgba(0,0,0,.28); }

.parallax-isi { position: relative; padding-block: clamp(48px, 7vw, 96px); max-width: 760px; }
.parallax-isi h2 { color: #fff; margin-bottom: .45em; }
.parallax-isi p  { color: rgba(255,255,255,.84); max-width: 58ch; }
.parallax-isi .eyebrow { color: var(--emas-terang); }
.parallax-aksi { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }

@media (max-width: 620px) {
  .parallax-isi { padding-block: clamp(40px, 10vw, 64px); }
  .parallax-aksi .btn { width: 100%; }
}

/* Gerakan dimatikan bila pengunjung memintanya; lihat juga situs.js, yang
   tidak memasang pengamat sama sekali dalam keadaan itu. */
@media (prefers-reduced-motion: reduce) {
  .parallax-media { inset: 0; transform: none !important; }
}

/* -------------------------------------------------------- halaman armada -- */

.armada-tata {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.armada-isi { min-width: 0; }

/* Kartu spesifikasi menempel saat digulir. Isi halaman armada panjang,
   dan tombol pesan yang ikut tergulir ke atas berarti pengunjung harus
   kembali ke puncak halaman begitu ia memutuskan — jarak yang paling
   sering berakhir dengan tidak jadi memesan. */
.armada-sisi { position: sticky; top: 100px; }

.kotak-aksi {
  background: var(--krem-2);
  border: 1px solid var(--garis-halus);
  border-radius: var(--lengkung-l);
  padding: clamp(20px, 2.4vw, 28px);
}
.spek-kotak {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.spek-kotak li {
  display: flex;
  align-items: center;
  gap: .75em;
  font-size: .92rem;
  color: var(--tinta-2);
}
.spek-kotak i { width: 1.1em; color: var(--tinta-4); font-size: .9em; flex: 0 0 auto; }

@media (max-width: 900px) {
  .armada-tata { grid-template-columns: 1fr; }
  /* Di ponsel kartu naik ke atas tulisan: harga dan tombol pesan adalah
     yang dicari lebih dulu, dan menggulir seribu kata untuk menemukannya
     bukan pilihan yang wajar. */
  .armada-sisi { position: static; order: -1; }
}

/* ------------------------------------------------------ halaman artikel -- */

/* Sampul selebar kolom bacanya, bukan selebar halaman.
   Gambar 1000px di atas teks 780px membuat tulisannya terlihat menjorok
   masuk tanpa alasan — mata membaca tepi gambar sebagai tepi halaman, lalu
   tepi teks sebagai kesalahan. Satu tepi kiri dan satu tepi kanan untuk
   seluruh artikel. */
.artikel-sampul {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--lengkung-l);
}

/* Kalimat pembuka. Sedikit lebih besar daripada badan tulisan dan
   dipisahkan garis, supaya pembaca tahu di mana tulisannya benar-benar
   dimulai — bukan sekadar paragraf pertama yang kebetulan lebih besar. */
.artikel-intro {
  font-size: clamp(1.12rem, 1.5vw, 1.24rem);
  line-height: 1.6;
  color: var(--tinta-3);
  margin: 0 0 2rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--garis-halus);
}

.artikel-bagikan {
  margin-top: 3rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--garis-halus);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
}
.artikel-bagikan > span {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-4);
}

/* ------------------------------------------------------------ remah roti -- */

.remah {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55em;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-4);
  margin-bottom: 1.4rem;
}
.remah a { color: inherit; transition: color var(--alih); }
.remah a:hover { color: var(--tinta); }
.remah .pisah { opacity: .5; }
.hero .remah { color: rgba(255,255,255,.66); }

/* ------------------------------------------------------- karusel foto --- */
/*
   Satu foto besar yang digeser, dengan strip thumbnail di bawahnya.

   KENAPA BUKAN KISI SEPERTI SEBELUMNYA

   Galeri lama menggambar semua foto sekaligus dalam kisi kecil-kecil.
   Bentuk itu jujur, tapi ia memperlakukan delapan foto interior mobil
   seperti delapan berkas — bukan seperti satu mobil yang ingin dilihat
   orang dari beberapa sisi. Yang terjadi di ponsel lebih buruk: kisinya
   menjadi kolom panjang yang harus digulir melewati seluruh foto untuk
   sampai ke bagian berikutnya halaman.

   MENGGESER TANPA PUSTAKA APA PUN

   Jalurnya cuma elemen dengan overflow-x dan scroll-snap. Di ponsel itu
   sudah menjadi geser-jari yang benar — dengan inersia dan karet dari
   sistem operasinya sendiri, yang tidak akan pernah ditiru persis oleh
   JavaScript mana pun. JavaScript-nya hanya menambahkan yang tidak
   dipunyai jari: tombol panah, seret dengan tetikus, dan thumbnail.

   scroll-snap-stop: always mencegah satu seretan panjang melompati
   empat foto sekaligus — pada galeri, tiap foto memang ingin dilihat.
*/

.karusel { --kar-radius: 0px; }

.karusel-panggung {
  position: relative;
  background: var(--krem-3);
  overflow: hidden;
  border-radius: var(--kar-radius);
}

.karusel-jalur {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.karusel-jalur::-webkit-scrollbar { display: none; }
.karusel-jalur:active { cursor: grabbing; }

.karusel-slide {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.karusel-slide img {
  display: block;
  width: 100%;
  /* Tinggi dipatok, bukan rasio.
     Dengan rasio 16:10 dan lebar penuh 1240px, satu foto menjadi setinggi
     775px — lebih tinggi daripada layar laptop, sehingga tombol dan bagian
     halaman berikutnya terdorong keluar pandangan justru pada halaman yang
     tujuannya menjual. clamp() menahan tingginya di kisaran yang muat
     satu layar, dan object-fit yang mengurus foto potret maupun lanskap. */
  height: clamp(240px, 46vw, 560px);
  object-fit: cover;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}

/* Panah selalu terlihat. Geser dengan jari tetap bekerja, tetapi tombol ini
   membuat fungsi galeri langsung terbaca juga oleh pengguna ponsel. */
.karusel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--tinta);
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--alih), opacity var(--alih);
  box-shadow: 0 2px 14px rgba(0,0,0,.14);
}
.karusel-nav:hover { background: #fff; }
.karusel-nav:disabled { opacity: .32; cursor: default; }
.karusel-nav[data-arah="-1"] { inset-inline-start: 14px; }
.karusel-nav[data-arah="1"]  { inset-inline-end: 14px; }

.karusel-hitung {
  position: absolute; inset-block-end: 12px; inset-inline-end: 12px;
  background: rgba(11,11,11,.72); color: #fff;
  font-size: .68rem; letter-spacing: .12em;
  padding: 5px 10px; border-radius: 999px;
}

/* Strip thumbnail. Digulir sendiri kalau fotonya banyak, dan yang aktif
   selalu ditarik ke dalam pandangan — thumbnail aktif yang berada di luar
   layar membuat orang mengira strip itu tidak ikut berpindah. */
.karusel-thumb {
  display: flex; gap: 8px; margin-top: 10px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.karusel-thumb::-webkit-scrollbar { display: none; }
.karusel-thumb button {
  flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer;
  line-height: 0; opacity: .5;
  transition: opacity var(--alih), box-shadow var(--alih);
  box-shadow: inset 0 0 0 1px var(--garis-halus);
}
.karusel-thumb button img {
  width: 92px; height: 62px; object-fit: cover; display: block;
}
.karusel-thumb button:hover { opacity: .85; }
.karusel-thumb button[aria-current="true"] {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--tinta);
}

@media (max-width: 640px) {
  .karusel-thumb button img { width: 68px; height: 48px; }
}

/* --------------------------------------------------------- video YouTube --- */
/*
   Yang digambar lebih dulu cuma sampulnya. Satu <iframe> YouTube menarik
   lebih dari setengah megabita dan puluhan permintaan jaringan — pada
   halaman layanan yang isinya tulisan dan tiga foto, videonya sendirian
   lebih berat daripada seluruh halamannya, dan sebagian besar pengunjung
   tidak pernah menekan putar. Iframe-nya dibuat saat tombolnya ditekan.
*/

.video-yt { position: relative; background: #000; overflow: hidden; }
.video-yt::before { content: ''; display: block; padding-top: 56.25%; }
.video-yt > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-yt iframe { border: 0; }

.video-putar {
  border: 0; padding: 0; cursor: pointer; background: #000;
  display: grid; place-items: center;
}
.video-putar img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .78; transition: opacity var(--alih), transform var(--alih);
}
.video-putar:hover img { opacity: .62; transform: scale(1.02); }
.video-putar .video-ikon {
  position: relative; z-index: 1;
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--tinta);
  display: grid; place-items: center; font-size: 1.3rem;
  padding-inline-start: 4px;                 /* segitiga optis, bukan geometris */
  transition: transform var(--alih);
}
.video-putar:hover .video-ikon { transform: scale(1.06); }
.video-ket { margin-top: .8rem; font-size: .8rem; color: var(--tinta-4); }
.video-dalam-konten { margin-top: clamp(32px, 4vw, 52px); }

@media (max-width: 620px) {
  .video-dalam-konten { margin-top: 28px; }
}

/* ------------------------------------------------------------- galeri --- */

.galeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.galeri img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: zoom-in; transition: opacity var(--alih); }
.galeri img:hover { opacity: .86; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.95);
  display: none;
  place-items: center;
  padding: 5vw;
}
.lightbox[data-buka="1"] { display: grid; }
.lightbox img { max-width: 100%; max-height: 88vh; object-fit: contain; }
.lightbox button {
  position: absolute; top: 22px; inset-inline-end: 22px;
  background: none; border: 0; color: #fff; font-size: 1.6rem; cursor: pointer;
}

/* -------------------------------------------------------------- formulir -- */

.form-baris { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bidang { display: flex; flex-direction: column; gap: .5em; margin-bottom: 18px; }
.bidang label {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-4);
}
.bidang input, .bidang textarea, .bidang select {
  width: 100%;
  padding: .95em 1.1em;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 300;
  color: var(--tinta);
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: var(--lengkung);
  transition: border-color var(--alih), box-shadow var(--alih);
}
.bidang textarea { min-height: 140px; resize: vertical; }
.bidang input:focus, .bidang textarea:focus, .bidang select:focus {
  outline: 0;
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px rgba(11,11,11,.09);
}

.pesan-baik, .pesan-galat {
  padding: 1em 1.2em;
  border-inline-start: 2px solid;
  font-size: .92rem;
  margin-bottom: 20px;
}
.pesan-baik  { border-color: var(--tinta); background: var(--krem-2); color: var(--tinta); }
.pesan-galat { border-color: #b3261e; background: #fdeceb; color: #8c1d18; }

/* -------------------------------------------------------------- paginasi -- */

.paginasi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 56px; }
.paginasi a, .paginasi span {
  min-width: 42px;
  padding: .7em .9em;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .1em;
  border: 1px solid var(--garis);
  color: var(--tinta-2);
  transition: all var(--alih);
}
.paginasi a:hover { border-color: var(--tinta); }
.paginasi .kini { background: var(--tinta); color: #fff; border-color: var(--tinta); }

/* --------------------------------------------------------------- footer -- */
/* Ringkas dengan sengaja. Kaki halaman bukan tempat menaruh seluruh peta
   situs: yang benar-benar dicari pengunjung di sini hanya cara menghubungi
   dan beberapa tautan penting. Sisanya sudah ada di menu atas. */

.situs-footer {
  background: var(--tinta);
  color: rgba(255,255,255,.6);
  padding-block: clamp(38px, 4.5vw, 56px) 0;
}
.situs-footer h4 {
  color: #fff;
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.footer-kisi {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: clamp(24px, 3vw, 52px);
  padding-bottom: clamp(26px, 3vw, 38px);
}
.footer-merek img { height: 44px; width: auto; margin-bottom: 1rem; }
.footer-merek p { font-size: .86rem; max-width: 38ch; line-height: 1.65; margin-bottom: 0; }
.situs-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.situs-footer a { font-size: .86rem; color: rgba(255,255,255,.6); transition: color var(--alih); }
.situs-footer a:hover { color: #fff; }

.footer-kontak li { display: flex; gap: .7em; font-size: .86rem; line-height: 1.55; }
.footer-kontak i { color: rgba(255,255,255,.5); margin-top: .3em; font-size: .8rem; flex: 0 0 auto; }

.sosial { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.1rem; }
.sosial a {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.72);
  font-size: .92rem;
  transition: background var(--alih), border-color var(--alih), color var(--alih);
}
.sosial a:hover { background: #fff; border-color: #fff; color: var(--tinta); }

.footer-bawah {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  font-size: .74rem;
  color: rgba(255,255,255,.4);
}
.footer-bawah nav { display: flex; flex-wrap: wrap; gap: 18px; }

/* ------------------------------------------------------- tombol melayang -- */

.wa-apung {
  position: fixed;
  inset-inline-end: 20px;
  bottom: 20px;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 12px 30px -10px rgba(37,211,102,.6);
  transition: transform var(--alih);
}
.wa-apung:hover { transform: scale(1.07); }

/* --------------------------------------------------------- gerak masuk -- */

.muncul {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms cubic-bezier(.22,.61,.36,1), transform 800ms cubic-bezier(.22,.61,.36,1);
}
.muncul.tampil { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .muncul { opacity: 1; transform: none; }
  .hero-media img { animation: none; }
}

/* --------------------------------------------------------------- layar -- */

/* Kata dan alamat panjang tidak boleh melebarkan halaman.
   Satu URL tanpa spasi di dalam artikel cukup untuk membuat SELURUH
   halaman bisa digeser ke samping di ponsel — dan yang terlihat pemakai
   bukan "ada kata kepanjangan", melainkan tata letak yang rusak. */
.tulisan, .kartu-isi, .ulasan blockquote, .faq-jawab {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Tabel di dalam tulisan digulir di dalam kotaknya sendiri. */
.tulisan table { display: block; overflow-x: auto; white-space: nowrap; }
@media (min-width: 700px) {
  .tulisan table { display: table; white-space: normal; }
}

/* Sematan (peta, video) ikut lebar induknya. */
.tulisan iframe { width: 100%; max-width: 100%; border: 0; aspect-ratio: 16/9; }

@media (max-width: 1180px) {
  /* Menu penuh masih muat sampai sini; di bawahnya jarak antar butir
     menyempit lebih dulu sebelum menyerah ke tombol menu. */
  .situs-nav { gap: 14px; }
  .nav-tautan { font-size: .7rem; letter-spacing: .1em; }
}

@media (max-width: 1024px) {
  .footer-kisi { grid-template-columns: 1.4fr 1fr; }
  .kartu-sorot { min-height: 380px; }
}

@media (max-width: 900px) {
  .situs-nav { display: none; }
  .btn-menu { display: inline-grid; }
  .header-aksi .btn { display: none; }
  .belah-media.berbingkai::before { display: none; }
  .situs-header .baris { height: 68px; }
  .situs-header[data-mode="turun"] .baris { height: 60px; }
  .situs-logo img { height: 38px; }
  .situs-header[data-mode="turun"] .situs-logo img { height: 34px; }
  .belah-media img { aspect-ratio: 3/2; }

  /* Menu utama yang hilang membawa serta margin auto miliknya, dan tanpa
     itu tombol bahasa serta tombol menu menempel di belakang logo dengan
     setengah layar kosong di kanannya. Yang mendorongnya ke kanan harus
     dipindahkan ke kelompok tombol. */
  .header-aksi { margin-inline-start: auto; gap: 6px; }

  /* Tombol menu diberi bingkai supaya terbaca sebagai tombol, dan
     diperbesar ke 44px — ukuran sentuh terkecil yang masih nyaman. */
  .btn-menu {
    width: 44px; height: 44px;
    border: 1px solid var(--garis);
    border-radius: var(--lengkung);
  }
  .situs-header[data-mode="atas"] .btn-menu { border-color: rgba(255,255,255,.4); }
  .lang-tombol { padding: .5em .55em; font-size: .68rem; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .footer-kisi { grid-template-columns: 1fr; gap: 26px; }
  .footer-bawah { flex-direction: column; align-items: flex-start; }

  /* ---------------- KAKI HALAMAN DI LAYAR KECIL ----------------
     Yang tersisa hanya kontak dan ikon sosial.
     Di layar selebar telapak tangan, kaki halaman versi desktop menjadi
     empat blok yang harus digulir melewati semuanya untuk sampai ke satu
     hal yang benar-benar dicari orang di sana: cara menghubungi. Logo
     sudah ada di bilah atas pada layar yang sama, kalimat perusahaan
     sudah dikatakan di seluruh halaman di atasnya, dan tautan layanan
     sudah ada di menu — ketiganya cuma memanjangkan jarak ke nomor
     WhatsApp.
     Ikon sosialnya TETAP, walau letaknya di dalam blok merek: itu yang
     membuat blok ini disembunyikan per bagian, bukan seluruhnya. */
  .footer-merek img,
  .footer-merek p,
  .footer-tautan { display: none; }
  .footer-merek .sosial { margin-top: 0; }
  /* Kontak naik ke atas ikon sosial: yang dicari lebih dulu diletakkan
     lebih dulu, dan tanpa ini urutannya mengikuti sisa markup desktop. */
  .footer-hubungi { order: -1; }
  .footer-kisi { gap: 20px; }
  .hero-aksi { gap: 10px; }
  .hero-aksi .btn { width: 100%; }
  .hero-gulir { display: none; }
  .kartu-sorot { min-height: 340px; }
  .hero { min-height: min(88svh, 640px); }

  /* Tombol menyentuh tepi layar terasa sempit; ruang di dalamnya
     dikurangi sedikit supaya labelnya tetap satu baris. */
  .btn { padding: .95em 1.6em; letter-spacing: .14em; }
  .btn-kecil { padding: .75em 1.15em; }

  .artikel-sampul { border-radius: 0; margin-inline: calc(var(--sisi) * -1); width: calc(100% + var(--sisi) * 2); max-width: none; }
  .tulisan img { margin-inline: calc(var(--sisi) * -1); width: calc(100% + var(--sisi) * 2); max-width: none; border-radius: 0; }

  .galeri { grid-template-columns: repeat(2, 1fr); }
  .angka-baris { grid-template-columns: repeat(2, 1fr); }
  .paginasi { margin-top: 40px; }
  .wa-apung { width: 48px; height: 48px; font-size: 1.32rem; inset-inline-end: 14px; bottom: 14px; }
}

/* --------------------------------------------------------------- cetak -- */

@media print {
  .situs-header, .situs-footer, .wa-apung, .hero-gulir, .laci { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------------ rel geser -- */
/* Dipakai blok jurnal di beranda: sepuluh tulisan dimuat, tiga terlihat,
   sisanya dicapai dengan menggeser. Alasannya bukan gaya — daftar sepuluh
   kartu bertumpuk mendorong bagian bawah halaman terlalu jauh, dan bagian
   itulah yang berisi ajakan menghubungi. */

.rel { position: relative; }

.rel-jalur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * clamp(24px, 3vw, 40px)) / 3);
  gap: clamp(24px, 3vw, 40px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rel-jalur::-webkit-scrollbar { display: none; }
/* align-self:stretch memaksa tiap kartu setinggi baris relnya.
   Tanpa itu kartu "sorot" (gambar penuh dengan teks di atasnya) memakai
   tinggi minimumnya sendiri-sendiri, dan deretannya bergerigi. */
.rel-jalur > * { scroll-snap-align: start; align-self: stretch; }
.rel-jalur > .kartu-sorot { min-height: 380px; }

/* Isyarat bahwa relnya bisa diseret. Hanya untuk penunjuk halus (tetikus):
   di layar sentuh kursor tidak pernah terlihat, dan `grab` di sana justru
   mematikan gulir sentuh di sebagian peramban lama. */
@media (hover: hover) and (pointer: fine) {
  .rel-jalur { cursor: grab; }
  .rel-jalur:active { cursor: grabbing; }
}

/* Tepi memudar di ujung kanan — penanda diam bahwa masih ada isi di luar
   layar. Tanpa penanda apa pun, rel yang penuh terlihat sama dengan kisi
   yang memang cuma berisi tiga kartu. */
.rel::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: -1px;
  width: clamp(28px, 5vw, 64px);
  background: linear-gradient(to left, var(--krem-2), transparent);
  pointer-events: none;
  opacity: .9;
}
.seksi:not(.krem-2) .rel::after { background: linear-gradient(to left, var(--krem), transparent); }
.gelap .rel::after { background: linear-gradient(to left, var(--tinta), transparent); }

.rel-kepala {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
  flex-wrap: wrap;
}
.rel-kepala > div:first-child { flex: 1 1 320px; min-width: 0; }

/* Versi rata tengah: judul memakai lebar penuh supaya titik tengahnya sama
   dengan titik tengah kartu di bawahnya, dan tombol geser diangkat keluar
   dari aliran. Kalau tombol dibiarkan sebagai saudara dalam satu baris
   flex, lebar yang dipakainya menggeser judul ke kiri — persis kemiringan
   yang ingin dihilangkan. */
.rel-kepala.tengah { position: relative; justify-content: center; }
.rel-kepala.tengah > div:first-child { flex: 1 1 100%; text-align: center; }
.rel-kepala.tengah .rel-alat {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
}
@media (max-width: 900px) {
  .rel-kepala.tengah .rel-alat { position: static; }
}

.rel-alat { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.rel-tombol {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--garis);
  color: var(--tinta);
  font-size: .82rem;
  cursor: pointer;
  transition: background var(--alih), color var(--alih), border-color var(--alih), opacity var(--alih);
}
.rel-tombol:hover:not(:disabled) { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.rel-tombol:disabled { opacity: .28; cursor: default; }
.gelap .rel-tombol { border-color: var(--garis-terang); color: #fff; }
.gelap .rel-tombol:hover:not(:disabled) { background: #fff; color: var(--tinta); border-color: #fff; }

.rel-kaki { margin-top: clamp(26px, 3vw, 44px); display: flex; justify-content: center; }

/* Kartu di dalam rel tidak ikut animasi ".muncul".
   Animasi itu dipicu IntersectionObserver terhadap layar, sedangkan kartu
   keempat dan seterusnya berada di luar layar SECARA MENDATAR sejak awal —
   ia tidak pernah "masuk" sampai relnya digeser, dan sampai saat itu
   kartunya tembus pandang. Yang terlihat pengguna: rel yang isinya kosong. */
.rel-jalur .muncul { opacity: 1; transform: none; transition: none; }

@media (max-width: 900px) {
  .rel-jalur { grid-auto-columns: calc((100% - clamp(24px, 3vw, 40px)) / 2); }
  .rel-jalur.rel-jalur-ulasan { grid-auto-columns: 72%; }
}
@media (max-width: 900px) {
  /* Di layar kecil kartu ulasan MENGIKUTI ISINYA, tidak dipatok tingginya.
     Tinggi tetap ada gunanya di desktop: dua kartu berdampingan yang
     tingginya berbeda terlihat miring. Tapi di ponsel yang terlihat
     praktis satu kartu saja, dan ulasan pendek — "Always reply on time,
     best service." — menjadi kotak setinggi 430px dengan dua pertiga
     bagiannya kosong, karena nama penulisnya didorong ke dasar kartu. */
  .rel-jalur-ulasan > .ulasan,
  .kisi-ulasan .ulasan { min-height: 0; }

  /* Kutipan panjang dipangkas — tujuh baris, dengan elipsis.
     Tinggi baris rel ditentukan kartu TERTINGGI. Satu ulasan dua belas
     baris membuat seluruh relnya setinggi itu, dan di bawah ulasan pendek
     yang sedang terlihat menganga ruang kosong setengah layar. Memangkas
     yang terpanjang menyelesaikan keduanya sekaligus, dan yang ingin
     membaca lengkap sudah punya tautan "Read all reviews on Google"
     tepat di bawahnya. */
  .rel-jalur-ulasan > .ulasan blockquote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    overflow: hidden;
  }
}

@media (max-width: 620px) {
  /* Lima baris di layar ponsel.
     Tinggi baris rel ditentukan kartu TERTINGGI, jadi yang menentukan
     rapi-tidaknya bukan rata-rata panjang ulasan melainkan yang paling
     panjang. Dengan lima baris, kartu terpanjang dan terpendek hampir
     sama tinggi — dan ruang kosongnya nyaris hilang tanpa satu ulasan pun
     terasa terpotong di tengah kalimat. */
  .rel-jalur-ulasan > .ulasan blockquote { -webkit-line-clamp: 5; line-clamp: 5; }
}

@media (max-width: 620px) {
  .rel-jalur { grid-auto-columns: 82%; }
  .rel-jalur.rel-jalur-ulasan { grid-auto-columns: 92%; gap: 16px; }
  .rel-jalur-ulasan .ulasan,
  .kisi-ulasan .ulasan { padding: 26px 22px; }
  .blok-ulasan .ulasan blockquote { font-size: 1rem; line-height: 1.65; }
  .rel-alat { width: 100%; justify-content: center; }
  .rel-tombol { width: 42px; height: 42px; }
  .karusel-nav { width: 40px; height: 40px; }
}

/* ==========================================================================
   BARIS TINDAKAN: SUKA & BAGIKAN
   ========================================================================== */
.aksi-halaman {
  margin-top: clamp(2.2rem, 4vw, 3rem);
  padding-top: clamp(1.4rem, 2.5vw, 1.8rem);
  border-top: 1px solid var(--garis-halus);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* ---- Suka ---- */
.suka {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .62em 1.1em;
  border: 1px solid var(--garis);
  background: transparent;
  color: var(--tinta-3);
  font: inherit;
  font-size: .84rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--alih), border-color var(--alih), background var(--alih);
}
.suka:hover { color: var(--tinta); border-color: var(--tinta-4); }
/* Merah hanya saat DISUKAI. Hati yang selalu merah tidak lagi mengabarkan
   apa pun — yang membedakan sudah-dan-belum adalah satu-satunya pekerjaan
   warna di tombol ini. */
.suka.on { color: #c0392b; border-color: rgba(192,57,43,.35); background: rgba(192,57,43,.06); }
.suka .suka-n { font-variant-numeric: tabular-nums; font-weight: 600; }
.suka.berdenyut i { animation: suka-denyut .42s ease; }
@keyframes suka-denyut {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .suka.berdenyut i { animation: none; }
}

/* ---- Bagikan ---- */
.bagikan {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.bagikan-label {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-inline-end: 2px;
  color: var(--tinta-4);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}
.bagikan-kanal {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.bagikan-ikon {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--garis);
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-2);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--alih), color var(--alih), border-color var(--alih), transform var(--alih);
}
.bagikan-ikon:hover {
  color: #fff;
  border-color: var(--tinta);
  background: var(--tinta);
  transform: translateY(-2px);
}
.bagikan-ikon:active { transform: translateY(0); }
.bagikan-status {
  width: 100%;
  min-height: 1em;
  color: var(--tinta-4);
  font-size: .72rem;
  line-height: 1.4;
}
.bagikan-status:empty { display: none; }

/* Lima tombol tetap muat di ponsel tanpa mengubah lebar isi halaman. */
@media (max-width: 620px) {
  .bagikan { width: 100%; }
  .bagikan-label { width: 100%; margin-bottom: 2px; }
  .bagikan-kanal { gap: 7px; }
  .bagikan-ikon { width: 40px; height: 40px; }
}

/* Isi halaman publik mengikuti tepi kiri-kanan header hanya pada desktop.
   Di tablet/ponsel batas 820px yang lama tetap berlaku, jadi tampilan kecil
   yang sudah baik tidak ikut berubah. */
@media (min-width: 901px) {
  .lebar-desktop { max-width: var(--lebar); }
}

/* Hati kecil di kartu daftar — hanya angka, tidak bisa ditekan.
   Tombol di dalam kartu yang seluruhnya sudah menjadi tautan akan menelan
   ketukan yang dimaksudkan untuk membuka halamannya. */
.kartu-suka {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .78rem;
  color: var(--tinta-4);
  font-variant-numeric: tabular-nums;
}

/* ============================================================== kenapa ====
   "Kenapa memilih kami" — kartu janji layanan.

   Tanpa bayangan dan tanpa kartu terangkat: mengikuti aturan berkas ini,
   kemewahan dibangun dari ruang kosong dan garis tipis. Yang bergerak saat
   disentuh kursor hanya dua hal halus — garisnya menguat, dan kotak ikonnya
   terisi emas. Itu cukup untuk terasa hidup tanpa terlihat seperti tombol.

   Jumlah kolom datang dari --kol yang dihitung di PHP menurut jumlah butir,
   bukan dipatok di sini. Kisi empat kolom yang diisi enam butir meninggalkan
   dua kartu sendirian di baris kedua, dan itu satu-satunya hal yang membuat
   bagian rapi terlihat rusak.
   ========================================================================= */

.kenapa-kisi {
  display: grid;
  grid-template-columns: repeat(var(--kol, 4), minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}

.kenapa {
  display: flex;
  flex-direction: column;
  /* Rata tengah di semua ukuran layar. Judul bagian di atasnya juga rata
     tengah; kartu yang isinya rata kiri membuat garis bayangan di tengah
     halaman patah tepat di bawah judulnya. */
  align-items: center;
  text-align: center;
  padding: clamp(22px, 2.2vw, 34px);
  background: var(--putih);
  border: 1px solid var(--garis-halus);
  transition: border-color .4s ease;
}

.kenapa p { max-width: 42ch; margin-inline: auto; }

/* Kartu muncul berurutan, bukan serentak. Jedanya kecil — 70ms per kartu —
   cukup untuk mata mengikuti barisnya dari kiri ke kanan, dan masih di
   bawah ambang "menunggu". */
.blok-kenapa .muncul { transition-delay: var(--tunda, 0ms); }

.kenapa-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  margin-bottom: clamp(16px, 1.6vw, 22px);
  border: 1px solid var(--emas);
  color: var(--emas);
  font-size: 1.02rem;
  transition: background-color .4s ease, color .4s ease;
}

.kenapa h3 {
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.35;
  margin-bottom: .55rem;
}

.kenapa p {
  margin: 0;
  color: var(--tinta-3);
  font-size: .92rem;
  line-height: 1.62;
}

@media (hover: hover) and (pointer: fine) {
  .kenapa:hover { border-color: var(--garis); }
  .kenapa:hover .kenapa-ikon { background: var(--emas); color: var(--putih); }
}

/* Rel geser hanya di layar sempit. Di layar lebar bentuknya tetap kisi —
   rel di desktop menyembunyikan isi tanpa alasan, karena ruangnya ada. */
@media (min-width: 901px) {
  .kenapa-kisi.kenapa-hp-rail {
    grid-auto-flow: row;
    overflow: visible;
  }
  .blok-kenapa .rel::after { display: none; }
}

@media (max-width: 900px) {
  .kenapa-kisi.kenapa-hp-tumpuk { grid-template-columns: 1fr; }
  /* Rel memakai grid-auto-columns dari .rel-jalur; kolom eksplisit harus
     dilepas dulu, kalau tidak butirnya tetap masuk ke kolom yang dipatok. */
  .kenapa-kisi.kenapa-hp-rail { grid-template-columns: none; }
}

@media (max-width: 620px) {
  .kenapa-kisi { gap: 12px; }
  .kenapa { padding: 18px 16px; }
  .kenapa-ikon { width: 38px; height: 38px; margin-bottom: 12px; font-size: .9rem; }
  .kenapa h3 { font-size: .95rem; }
  .kenapa p { font-size: .84rem; line-height: 1.55; }
}