/* ═══════════════════════════════════════════════════════════
   Ocean's Resto Balikpapan — DEMO B
   Beranda diperlakukan sebagai sampul buku: ringkas, memikat,
   dan setiap bagian menunjuk keluar ke halaman yang sebenarnya.
   Tidak ada data lengkap di sini.
   Tipografi tunggal Noto Sans, jarak lebih rapat, gerak lebih hidup.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Token ───────────────────────────────────────────── */
:root{
  --white:#FFFFFF;
  --paper:#F5F8FA;
  --paper-2:#E9EFF5;

  --navy:#0A2540;
  --navy-2:#143A5C;
  --navy-3:#1D5075;
  --ink-soft:#54677C;

  --merah:#C8202E;
  --merah-2:#A81826;
  --hijau:#0E7A52;
  --hijau-2:#0B6243;
  /* Versi terang dari dua warna merek, untuk dipakai di atas navy */
  --merah-terang:#FF6B75;
  --hijau-terang:#4FCB98;
  --emas:#C9A227;
  --emas-terang:#E8CB6B;

  --line:#E3EAF1;
  --line-2:#C6D3E0;

  --wrap:1180px;
  --r:4px;
  --r-lg:10px;

  /* Jarak sengaja lebih rapat daripada demo A */
  --s-1:.4rem;
  --s-2:.85rem;
  --s-3:1.25rem;
  --s-4:2rem;
  --s-5:3.4rem;
  --s-6:5rem;

  --sans:"Noto Sans",system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(.22,.7,.3,1);
  --ease-keluar:cubic-bezier(.4,0,.7,.3);
  --ease-lenting:cubic-bezier(.34,1.32,.42,1);
  --bayang:0 1px 2px rgba(10,37,64,.05),0 6px 18px -10px rgba(10,37,64,.16);
  --bayang-kuat:0 2px 4px rgba(10,37,64,.07),0 18px 38px -18px rgba(10,37,64,.28);
}

/* ── 2. Reset ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--white);color:var(--navy);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--navy-3);outline-offset:2px;border-radius:2px}

/* ── 3. Tipografi ───────────────────────────────────────── */
/* Satu keluarga huruf saja. Susunan dibangun lewat berat dan jarak,
   bukan lewat pergantian jenis huruf. */
h1,h2,h3,h4{
  font-family:var(--sans);font-weight:700;
  line-height:1.15;margin:0 0 var(--s-2);
  letter-spacing:-.022em;text-wrap:balance;
}
h1{font-size:clamp(2rem,4.2vw,3.15rem);line-height:1.06;letter-spacing:-.034em}
h2{font-size:clamp(1.85rem,3.6vw,3.05rem);line-height:1.08;letter-spacing:-.034em}
h3{font-size:1.02rem;letter-spacing:-.012em;line-height:1.32}

p{margin:0 0 var(--s-2);max-width:60ch}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.62;color:var(--ink-soft);max-width:52ch}
.kecil{font-size:.86rem;color:var(--ink-soft)}

.eyebrow{
  display:inline-block;
  font-size:.67rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--merah);margin:0 0 var(--s-2);max-width:none;
}
.section--navy .eyebrow{color:#FFB4B9}
.num{font-variant-numeric:tabular-nums}

/* ── 4. Layout ──────────────────────────────────────────── */
.wrap{width:min(100% - 2.25rem,var(--wrap));margin-inline:auto}
/* Jarak antar bagian. Dulu dipatok var(--s-5) yang tetap 3,4rem
   dan terasa sesak di layar lebar, sekarang ikut lebar layar. */
.section{padding-block:clamp(3.75rem,7vw,6.5rem)}
.section--tight{padding-block:clamp(2.5rem,4.5vw,4rem)}
.section--paper{background:var(--paper)}
/* Dua bagian bertinta yang berdampingan terbaca sebagai satu blok,
   dan bantalan bawah yang satu bertemu bantalan atas yang lain jadi
   lubang setinggi dua kali. Yang kedua cukup ikut jarak tetangganya. */
.section--paper + .section--paper{padding-top:0}
.section--navy{background:var(--navy);color:rgba(255,255,255,.74)}
.section--navy h2,.section--navy h3{color:#fff}
.section--navy .lede{color:rgba(255,255,255,.68)}

/* Kepala bagian ringkas: label, judul, dan satu tautan keluar di kanan. */
.kepala{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s-2) var(--s-3);margin-bottom:clamp(1.5rem,3vw,2.25rem);
  padding-bottom:var(--s-2);border-bottom:1px solid var(--line);
}
.section--navy .kepala{border-bottom-color:rgba(255,255,255,.16)}
.kepala>div{max-width:52ch}
.kepala h2{margin-bottom:0}

.grid{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media(min-width:600px){.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:880px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .grid--6{grid-template-columns:repeat(6,1fr)}
}
.duo{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:880px){.duo{grid-template-columns:1fr 1fr;gap:var(--s-5);align-items:center}}

/* ── 4b. Menetralkan pembungkus GeneratePress ────────────
   Tema induk membungkus isi halaman dengan #page yang lebarnya
   dipatok 1200px dan #content yang memakai flex untuk menampung
   sidebar. Situs ini membuat header, footer, dan pengatur lebarnya
   sendiri lewat .wrap, dan bagian-bagiannya memang harus penuh
   selebar layar. Tanpa dinetralkan, tiap <section> jadi butir flex
   dan berjajar ke samping, bukan bertumpuk ke bawah. */
#page.site{max-width:none;width:auto;margin:0;padding:0}
#content.site-content{display:block;max-width:none;width:auto;margin:0;padding:0}

/* ── 4c. Menetralkan tombol bawaan GeneratePress ─────────
   Tema induk memberi setiap <button> latar gelap #3F4047 dan teks
   putih saat disorot. Situs ini memakai <button> bukan sebagai
   tombol kotak, melainkan sebagai pemicu dropdown, tombol menu
   ponsel, baris akordeon menu, dan ubin galeri. Tanpa dinetralkan,
   semuanya menghitam saat disorot. Komponen yang memang punya gaya
   sorot sendiri, seperti .btn dan .tbl, kekhususannya lebih tinggi
   jadi tidak ikut terpengaruh aturan di bawah. */
button:hover,button:focus,
input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover{
  background-color:transparent;
}
.galeri button:hover,.galeri button:focus{background-color:var(--paper-2)}
.nav-toggle:hover,.nav-toggle:focus{color:var(--navy)}

/* GeneratePress juga menyetel a:hover jadi warna gelap var(--contrast).
   Kekhususannya 0-1-1, lebih tinggi daripada .btn dan .tautan yang
   cuma 0-1-0, jadi teks tombol merah ikut menggelap saat disorot dan
   nyaris tidak terbaca di atas latar merah tua. Tiap varian di sini
   dikunci ulang dengan warnanya sendiri. */
.btn:hover,.btn:focus{color:#fff}
.btn--garis:hover,.btn--garis:focus{color:var(--navy)}
.section--navy .btn--garis:hover,.section--navy .btn--garis:focus,
.hero .btn--garis:hover,.hero .btn--garis:focus,
.tt-ajak .btn--garis:hover,.tt-ajak .btn--garis:focus{color:#fff}
.hero--terang .btn--garis:hover,.hero--terang .btn--garis:focus{color:var(--navy)}
.tautan:hover,.tautan:focus{color:var(--merah)}
.section--navy .tautan:hover,.section--navy .tautan:focus{color:#FFB4B9}

/* ── 5. Komponen ────────────────────────────────────────── */
/* Tulisannya bergeser ke kiri memberi tempat, lalu ikonnya menyusul
   masuk dari tepi kanan. Selama tidak disorot ikonnya tidak terlihat,
   tetapi ruangnya sudah disediakan, jadi tombolnya tidak melar dan
   tidak ada yang bergeser di sekitarnya. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:.6rem 2.2rem .6rem 1.3rem;border-radius:var(--r);
  background:var(--merah);color:#fff;text-decoration:none;
  border:2px solid var(--merah);font-size:.93rem;font-weight:700;
  position:relative;overflow:hidden;
  transition:background-color .32s var(--ease),border-color .32s var(--ease),transform .18s var(--ease);
}
.btn:hover{background:var(--merah-2);border-color:var(--merah-2)}
.btn:active{transform:translateY(1px)}

.btn__tx{transition:transform .4s var(--ease)}
.btn__ikon{
  position:absolute;right:.85rem;width:18px;height:18px;flex:none;
  opacity:0;transform:translateX(-8px);
  transition:opacity .32s var(--ease),transform .4s var(--ease);
}
.btn:hover .btn__tx{transform:translateX(-9px)}
.btn:hover .btn__ikon{opacity:1;transform:translateX(0)}

.btn--garis{background:transparent;color:var(--navy);border-color:var(--line-2)}
.btn--garis:hover{background:var(--paper);border-color:var(--navy)}
.section--navy .btn--garis{color:#fff;border-color:rgba(255,255,255,.36)}
.section--navy .btn--garis:hover{background:rgba(255,255,255,.12);border-color:#fff}
.tombol-baris{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}

/* Tautan keluar. Garis bawah tumbuh dari kiri. */
.tautan{
  display:inline-flex;align-items:center;gap:.35rem;
  text-decoration:none;color:var(--merah);font-weight:700;font-size:.86rem;
  letter-spacing:.02em;position:relative;padding-bottom:3px;white-space:nowrap;
}
.tautan::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease);
}
.tautan:hover::after{transform:scaleX(1);transform-origin:left}
.tautan span{transition:transform .28s var(--ease);display:inline-block}
.tautan:hover span{transform:translateX(3px)}
.section--navy .tautan{color:#FFB4B9}

/* Gambar. Muncul lewat singkapan, lalu membesar halus saat disentuh. */
.gbr{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-2);
}
.gbr img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gbr--kotak{aspect-ratio:1/1}
.gbr--lanskap{aspect-ratio:4/3}
.gbr--lebar{aspect-ratio:16/9}
.gbr--panorama{aspect-ratio:21/9}
a:hover .gbr img,.kartu:hover .gbr img{transform:scale(1.045)}

/* Blok jawaban langsung. Yang diambil mesin AI. */
.jawaban{padding-block:var(--s-5) var(--s-4)}

/* Fakta ringkas. Di sampul hanya tiga butir, bukan tabel lengkap. */
.fakta{border-block:1px solid var(--line);background:var(--paper)}
.fakta dl{
  display:grid;gap:var(--s-2) var(--s-3);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin:0;padding-block:var(--s-3);
}
.fakta dt{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:.15rem}
.fakta dd{margin:0;font-weight:600;font-size:.94rem;font-variant-numeric:tabular-nums}

/* Kartu ringkas */
.kartu{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.kartu .gbr{border-radius:0}
.kartu__isi{padding:var(--s-3);flex:1}
.kartu h3{margin-bottom:.25rem}
.kartu p{font-size:.87rem;color:var(--ink-soft);margin:0;max-width:34ch}
.kartu__label{font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--hijau-2);margin-bottom:.4rem}
a.kartu:hover{transform:translateY(-4px);box-shadow:var(--bayang-kuat);border-color:var(--line-2)}

/* Kartu hidangan ringkas: gambar dan nama saja, tanpa keterangan. */
.hidangan{text-decoration:none;display:block}
.hidangan .gbr{margin-bottom:.55rem}
.hidangan b{display:block;font-size:.88rem;font-weight:600;line-height:1.3}
.hidangan:hover b{color:var(--merah)}

/* Kartu tegak bergambar penuh, teks bertumpuk di atas gambar,
   dengan kemiringan 3D mengikuti kursor. Diadaptasi dari pola
   kartu 21st.dev, ditulis ulang tanpa React dan tanpa Tailwind.
   Kemiringan hanya untuk tetikus: di layar sentuh dan saat gerak
   dikurangi, kartunya diam. */
.tilt-grid{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media(min-width:560px){.tilt-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.tilt-grid{grid-template-columns:repeat(4,1fr);gap:var(--s-2)}}

.tilt{display:block;text-decoration:none}
/* Kemiringan 3D dilepas. Yang tersisa cuma angkat halus dan
   bayangan yang menebal, jadi kartunya tetap terasa hidup
   tanpa berputar mengikuti kursor. */
.tilt__badan{
  position:relative;
  aspect-ratio:71/100;              /* 320 x 450 seperti komponen aslinya */
  border-radius:14px;
  overflow:hidden;
  background:var(--navy);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  box-shadow:0 6px 18px -10px rgba(10,37,64,.4);
}
.tilt:hover .tilt__badan,.tilt:focus-visible .tilt__badan{
  transform:translateY(-7px);
  box-shadow:0 26px 50px -22px rgba(10,37,64,.55);
}
.tilt__gbr{position:absolute;inset:0}
.tilt__gbr img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform .6s var(--ease)}
.tilt:hover .tilt__gbr img{transform:scale(1.10)}

/* Tirai gelap supaya teks putih tetap terbaca di atas foto apa pun.
   Kaki kartu sengaja dibuat hampir pekat: di situ ada tombol dan
   angka kecil, dan bentuk terang dari fotonya sempat menembus
   sampai tombolnya terlihat seperti rusak. */
.tilt__tirai{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(6,20,35,.12) 0%,
    rgba(6,20,35,0) 28%,
    rgba(6,20,35,.55) 52%,
    rgba(6,20,35,.88) 68%,
    rgb(6,20,35) 79%,
    rgb(6,20,35) 100%);
}

.tilt__isi{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--s-3);
  color:#fff;
}
.tilt__label{
  display:inline-block;
  font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin:0 0 .4rem;
}
.tilt__isi h3{color:#fff;font-size:1.06rem;margin:0 0 .3rem;letter-spacing:-.022em}
.tilt__isi p{font-size:.84rem;line-height:1.45;color:rgba(255,255,255,.76);margin:0;max-width:26ch}

/* Baris angka kecil di kaki kartu */
.tilt__isi p.tilt__data{
  margin-top:1.05rem;padding-top:.85rem;
  border-top:1px solid rgba(255,255,255,.2);
  font-size:.7rem;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;
}
.tilt__isi p.tilt__data b{color:#fff;font-weight:700}

/* Tombol semu. Seluruh kartu sudah berupa <a>, jadi ini tidak boleh
   jadi tautan sungguhan: konten interaktif di dalam <a> itu markup
   tidak sah. Bentuknya saja yang tombol, fungsinya milik kartu. */
.tilt__aksi{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  margin-top:.8rem;padding:.48rem 1.85rem .48rem .85rem;
  border:1.5px solid rgba(255,255,255,.45);border-radius:var(--r);
  /* Latarnya pekat, bukan tembus pandang, supaya apa pun yang ada
     di fotonya tidak ikut terbaca di dalam tombol. */
  background:rgba(6,20,35,.62);
  font-size:.74rem;font-weight:700;letter-spacing:.05em;color:#fff;overflow:hidden;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
/* Panahnya diam di luar bingkai, menyusul masuk saat kartunya
   disorot. Sama seperti tombol lain di halaman ini. */
.tilt__aksi i{
  position:absolute;right:.6rem;font-style:normal;line-height:1;
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--ease),transform .35s var(--ease);
}
.tilt:hover .tilt__aksi,.tilt:focus-visible .tilt__aksi{
  background:var(--merah);border-color:var(--merah);
}
.tilt:hover .tilt__aksi i,.tilt:focus-visible .tilt__aksi i{
  opacity:1;transform:translateX(0);
}

.tilt:focus-visible{outline:none}
.tilt:focus-visible .tilt__badan{outline:3px solid #fff;outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .tilt__badan,.tilt:hover .tilt__badan{transform:none;transition:none}
  .tilt__gbr img,.tilt:hover .tilt__gbr img{transform:scale(1.04);transition:none}
}

/* Penjelajah menu, rancangan Tumpukan Kartu.
   Tiga gambar ditumpuk seperti kartu di meja. Yang dipilih maju
   dan tegak, dua lainnya mundur. Penjelasannya tersingkap
   seperti tirai dari kiri, bukan memudar. */
.dek-menu{display:grid;gap:var(--s-4);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){
  /* Gambar dikunci 340px, sisanya milik teks. Sebelumnya gambar
     ikut melar mengisi kolom dan jadi terlalu besar, sementara
     jaraknya ke teks justru sempit.
     Lebarnya harus pasti, bukan minmax(0,340px): seluruh kartu di
     dalamnya position:absolute, jadi tidak ada isi yang menahan
     lebar kolom dan kolomnya kolaps jadi nol. */
  .dek-menu{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem)}
}

/* Lebarnya 75% dari kolomnya, lalu ditengahkan mendatar dan tegak.
   Grid-nya rata atas, jadi perataan tegaknya disetel di sini saja
   supaya kolom teks tetap mulai dari atas. */
.dek{
  position:relative;width:75%;aspect-ratio:1/1;
  margin-inline:auto;align-self:center;perspective:1400px;
}
.dek__kartu{
  position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-2);box-shadow:var(--bayang);transform-origin:50% 92%;
  transition:transform .75s var(--ease-lenting),opacity .6s var(--ease),
             box-shadow .6s var(--ease),filter .6s var(--ease);
}
.dek__kartu img{width:100%;height:100%;object-fit:cover}
.dek__kartu[data-urut="0"]{transform:rotate(-7deg) translate3d(-30px,16px,-90px) scale(.9);opacity:.45;filter:saturate(.65)}
.dek__kartu[data-urut="1"]{transform:rotate(4.5deg) translate3d(24px,9px,-50px) scale(.945);opacity:.62;filter:saturate(.8)}
.dek__kartu[data-urut="2"]{transform:none;opacity:1;filter:none;box-shadow:var(--bayang-kuat)}

.dek-daftar{list-style:none;margin:0;padding:0}
.dek-daftar li+li{margin-top:.3rem}
.dek-baris{
  display:flex;align-items:center;gap:1.1rem;width:100%;text-align:left;
  background:none;border:0;padding:.95rem 0;color:var(--ink-soft);
  border-bottom:1px solid var(--line);transition:color .35s var(--ease);
  font-family:var(--sans);cursor:pointer;
}
.dek-baris .no{
  font-size:.64rem;font-weight:700;letter-spacing:.16em;flex:none;
  color:var(--line-2);font-variant-numeric:tabular-nums;transition:color .35s var(--ease);
}
.dek-baris .nm{font-size:clamp(1.08rem,1.9vw,1.35rem);font-weight:700;letter-spacing:-.026em;flex:1}
.dek-baris:hover,.dek-baris.on{color:var(--navy)}
.dek-baris.on .no{color:var(--merah)}

.dek-isi{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.dek-baris.on+.dek-isi{grid-template-rows:1fr}
.dek-isi>div{overflow:hidden}
.dek-isi p{
  font-size:1rem;line-height:1.7;color:var(--ink-soft);
  max-width:none;padding:.95rem 0 1.2rem;
  opacity:0;transition:opacity .55s var(--ease-pudar) .1s;
}
.dek-baris.on+.dek-isi p{opacity:1}
.dek-isi .catatan{padding-top:0;font-size:.82rem;color:var(--navy);font-weight:700}

/* Kepala tanpa garis bawah dan tanpa tautan di kanan */
.kepala--polos{
  border-bottom:0;padding-bottom:0;display:block;
  margin-bottom:clamp(1.5rem,2.5vw,2rem);
}

@media(prefers-reduced-motion:reduce){
  .dek__kartu,.dek-isi,.dek-isi p{transition:none}
}

/* Pasangan dua gambar. Satu besar tegak, satu lebih kecil
   bertumpang di sudut bawahnya dengan bingkai putih tipis.
   Keduanya muncul berurutan, memudar saja. */
.duo-gbr{position:relative;padding:0 0 16% 0}
@media(min-width:880px){
  /* Lebarnya 75% dari kolomnya lalu ditengahkan. Sepasang gambar
     berukuran penuh membuat bagian ini jauh lebih tinggi daripada
     blok teks di sebelahnya. */
  .duo-gbr{width:75%;margin-inline:auto;padding:0 12% 18% 0}
}
.duo-gbr__besar{
  border-radius:14px;overflow:hidden;background:var(--paper-2);
  aspect-ratio:4/5;box-shadow:var(--bayang-kuat);
}
.duo-gbr__besar img{width:100%;height:100%;object-fit:cover}
.duo-gbr__kecil{
  position:absolute;right:0;bottom:0;width:56%;aspect-ratio:1/1;
  border-radius:14px;overflow:hidden;background:var(--paper-2);
  border:7px solid var(--white);
  box-shadow:0 20px 44px -18px rgba(10,37,64,.42);
}
.section--paper .duo-gbr__kecil{border-color:var(--paper)}
.duo-gbr__kecil img{width:100%;height:100%;object-fit:cover}
@media(min-width:880px){.duo-gbr__kecil{width:50%}}

/* Varian satu foto. Bantalan di bawah dan di kanan tadinya
   disediakan untuk ubin kecil yang menumpang di pojok. Kalau
   ubinnya tidak ada, ruang itu ikut dicabut supaya fotonya tidak
   menggantung dengan lubang di sekitarnya, lalu bingkainya
   dibuat mendatar karena isinya pemandangan jalan. */
.duo-gbr--satu{padding:0}
@media(min-width:880px){.duo-gbr--satu{width:100%;padding:0}}
.duo-gbr--satu .duo-gbr__besar{aspect-ratio:3/2}

/* Perilaku yang sama dengan kartu Tempat & Acara: naik 7px,
   bayangan menebal, dan gambarnya membesar dari 1,04 ke 1,10.
   Tiap gambar bereaksi sendiri, tidak bergerak berbarengan. */
/* Bobot selektornya sengaja dinaikkan. Aturan kemunculan
   [data-anim="singkap"] menyetel transition:opacity dan letaknya
   lebih belakang di berkas, jadi kalau bobotnya sama dia menang
   dan angkat maupun bayangannya tidak pernah beranimasi. */
.duo-gbr__besar,.duo-gbr__kecil{
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.duo-gbr__besar img,.duo-gbr__kecil img{
  transform:scale(1.04);transition:transform .6s var(--ease);
}
.duo-gbr__besar:hover,.duo-gbr__kecil:hover{transform:translateY(-7px)}
.duo-gbr__besar:hover{box-shadow:0 30px 58px -22px rgba(10,37,64,.5)}
.duo-gbr__kecil:hover{box-shadow:0 26px 50px -18px rgba(10,37,64,.5)}
.duo-gbr__besar:hover img,.duo-gbr__kecil:hover img{transform:scale(1.10)}

@media(prefers-reduced-motion:reduce){
  .duo-gbr__besar,.duo-gbr__kecil,
  .duo-gbr__besar img,.duo-gbr__kecil img{transition:none;transform:none}
  .duo-gbr__besar:hover,.duo-gbr__kecil:hover{transform:none}
}

/* ── Empat alasan ───────────────────────────────────────────
   Tiap alasan dibuka satu ikon, lalu dipisah garis setipis satu
   piksel. Garisnya digambar oleh dua pseudo-element: ::before
   mendatar di atas, ::after tegak di kiri. Mana yang dipakai
   ditentukan per lebar layar, karena letak sambungan barisnya
   ikut berubah saat kolomnya bertambah. */
.alasan{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:620px){.alasan{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.alasan{grid-template-columns:repeat(4,1fr)}}

.alasan li{position:relative}
.alasan li::before,.alasan li::after{content:"";position:absolute;background:rgba(255,255,255,.15)}
/* Satu kolom: garis mendatar di atas tiap alasan, kecuali yang pertama */
.alasan li::before{left:0;right:0;top:calc(var(--s-4) / -2);height:1px}
.alasan li::after{content:none}
.alasan li:first-child::before{content:none}

@media(min-width:620px){
  /* Dua kolom: garis tegak di kolom kanan, mendatar di baris kedua */
  .alasan li::before{content:none}
  .alasan li:nth-child(n+3)::before{content:"";top:calc(var(--s-4) / -2)}
  .alasan li:nth-child(even)::after{content:"";left:calc(var(--s-4) / -2);top:0;bottom:0;width:1px}
}
@media(min-width:1000px){
  /* Empat kolom: cukup garis tegak di antara kolomnya */
  .alasan li:nth-child(n+3)::before{content:none}
  .alasan li:not(:first-child)::after{content:"";left:calc(var(--s-4) / -2);top:0;bottom:0;width:1px}
}

.alasan__ikon{
  display:block;width:38px;height:38px;margin-bottom:var(--s-2);
  color:var(--merah-terang);transition:transform .5s var(--ease),color .35s var(--ease);
}
.alasan li:nth-child(even) .alasan__ikon{color:var(--hijau-terang)}
.alasan__ikon svg{width:100%;height:100%;display:block;overflow:visible}
.alasan li:hover .alasan__ikon{transform:translateY(-3px)}

.alasan h3{color:#fff;font-size:1.02rem;line-height:1.3;margin-bottom:.4rem}
.alasan p{font-size:.87rem;line-height:1.55;color:rgba(255,255,255,.66);margin:0;max-width:32ch}

/* Pita berjalan berisi nama hidangan. Dekoratif, disembunyikan
   dari pembaca layar dan berhenti bila gerak dikurangi. */
.pita{
  background:var(--navy);color:rgba(255,255,255,.5);
  border-block:1px solid rgba(255,255,255,.1);
  overflow:hidden;padding-block:.7rem;
}
.pita__jalur{display:flex;width:max-content;animation:geser 42s linear infinite}
.pita:hover .pita__jalur{animation-play-state:paused}
.pita span{
  padding-inline:1.15rem;font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  display:inline-flex;align-items:center;gap:1.15rem;
}
.pita span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--merah);flex:none}
@keyframes geser{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Angka yang menghitung naik saat masuk layar */
.hitung{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.hitung b{display:block;font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--navy)}
.hitung span{font-size:.8rem;color:var(--ink-soft);display:block;margin-top:.25rem}

/* Artikel */
.artikel{text-decoration:none;display:flex;flex-direction:column;gap:.65rem}
.artikel .gbr{aspect-ratio:16/10}
.artikel__meta{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hijau-2)}
.artikel h3{margin:0;transition:color .2s var(--ease)}
.artikel:hover h3{color:var(--merah)}
.artikel p{font-size:.86rem;color:var(--ink-soft);margin:0;max-width:38ch}

/* Lokasi. Gambar restoran di kiri, keterangan di kanan.
   Ukurannya sengaja sedang: ini penunjuk arah, bukan etalase. */
.lokasi{display:grid;gap:var(--s-3);grid-template-columns:1fr;align-items:center}
@media(min-width:860px){.lokasi{grid-template-columns:1fr 1fr;gap:clamp(2.25rem,4vw,3.5rem)}}

.lokasi__gbr{
  border-radius:14px;overflow:hidden;background:var(--paper-2);
  aspect-ratio:4/3;width:100%;max-width:461px;margin-inline:auto;
  box-shadow:var(--bayang);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.lokasi__gbr img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform .6s var(--ease)}
.lokasi__gbr:hover{transform:translateY(-7px);box-shadow:var(--bayang-kuat)}
.lokasi__gbr:hover img{transform:scale(1.10)}

.lokasi__alamat{font-size:clamp(1.12rem,1.8vw,1.35rem);font-weight:700;line-height:1.4;letter-spacing:-.02em;max-width:33ch;margin:0}
.lokasi__patokan{font-size:.9rem;color:var(--ink-soft);margin:.45rem 0 0}

.lokasi dl{
  display:grid;gap:var(--s-2) var(--s-3);margin:var(--s-3) 0 0;
  padding-top:var(--s-3);border-top:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.lokasi dt{font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:.15rem}
.lokasi dd{margin:0;font-size:.94rem;font-weight:600;font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .lokasi__gbr,.lokasi__gbr img,.lokasi__gbr:hover,.lokasi__gbr:hover img{transition:none;transform:none}
}

/* ── Tanya jawab ────────────────────────────────────────────
   Judul menetap di kiri sewaktu daftarnya digulir. Satu jawaban
   terbuka pada satu waktu; tingginya tumbuh dari 0fr ke 1fr,
   jadi tidak ada tinggi yang perlu ditebak lebih dulu.
   Tetap <details>, jadi masih bisa dibuka tanpa JavaScript. */
.faq{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:900px){
  .faq{grid-template-columns:.78fr 1.22fr;gap:clamp(2rem,4vw,3.5rem)}
  .faq__kiri{position:sticky;top:5.5rem;align-self:start}
}
.faq__ket{margin-top:var(--s-2);color:var(--ink-soft);font-size:.93rem;max-width:34ch}
.faq__kiri .tombol-baris{margin-top:var(--s-3)}

.faq__daftar{border-top:1px solid var(--line)}
.faq__item{position:relative;border-bottom:1px solid var(--line)}
/* Rel merah yang tumbuh dari atas ke bawah selama jawaban terbuka */
.faq__item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;z-index:1;
  background:var(--merah);transform:scaleY(0);transform-origin:top;
  transition:transform .55s var(--ease);
}
.faq__item[open]:not(.menutup)::before{transform:scaleY(1)}

.faq__item summary{
  position:relative;display:flex;align-items:center;gap:1rem;isolation:isolate;
  list-style:none;cursor:pointer;min-height:64px;padding:1.05rem 3.25rem 1.05rem 1.15rem;
  transition:padding-left .45s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
/* Sapuan latar tipis yang masuk dari kiri saat disorot */
.faq__item summary::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--white);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease);
}
.faq__item summary:hover::before{transform:scaleX(1)}
.faq__item[open] summary{padding-left:1.6rem}

.faq__no{
  font-size:.66rem;font-weight:700;letter-spacing:.16em;color:var(--line-2);
  font-variant-numeric:tabular-nums;flex:none;transition:color .4s var(--ease);
}
.faq__item[open]:not(.menutup) .faq__no{color:var(--merah)}

.faq__tanya{
  /* Elemennya h3, bukan span, supaya pertanyaan terbaca sebagai heading
     oleh mesin dan alat audit. Reset global memberi heading margin bawah,
     dan itu merusak perataan di summary yang memakai flex, jadi dinolkan
     di sini. Sisa gayanya sudah diatur sendiri sehingga tampilannya sama
     seperti waktu masih span. */
  margin:0;
  font-weight:700;font-size:clamp(1rem,1.7vw,1.14rem);letter-spacing:-.028em;
  line-height:1.3;transition:color .3s var(--ease);
}
.faq__item summary:hover .faq__tanya{color:var(--merah)}

/* Tanda tambah yang berputar jadi tanda kurang */
.faq__tanda{
  position:absolute;right:1rem;top:50%;width:30px;height:30px;flex:none;margin-top:-15px;
  border:2px solid var(--line-2);border-radius:50%;
  transition:border-color .4s var(--ease),background-color .4s var(--ease),transform .55s var(--ease);
}
.faq__tanda::before,.faq__tanda::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--navy);
  transition:background-color .4s var(--ease),opacity .3s var(--ease),transform .5s var(--ease);
}
.faq__tanda::before{width:11px;height:2px;margin:-1px 0 0 -5.5px}
.faq__tanda::after{width:2px;height:11px;margin:-5.5px 0 0 -1px}
.faq__item summary:hover .faq__tanda{border-color:var(--merah)}
.faq__item[open]:not(.menutup) .faq__tanda{background:var(--merah);border-color:var(--merah);transform:rotate(180deg)}
.faq__item[open]:not(.menutup) .faq__tanda::before{background:#fff}
.faq__item[open]:not(.menutup) .faq__tanda::after{opacity:0;transform:rotate(90deg) scaleX(.2)}

.faq__isi{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq__item[open] .faq__isi{grid-template-rows:1fr}
.faq__item.menutup .faq__isi{grid-template-rows:0fr}
.faq__dalam{overflow:hidden}
.faq__dalam p{
  padding:0 2.5rem 1.35rem 4.1rem;color:var(--ink-soft);font-size:.93rem;max-width:62ch;
  opacity:0;transform:translateY(9px);
  transition:opacity .45s .1s var(--ease),transform .5s .1s var(--ease);
}
.faq__item[open]:not(.menutup) .faq__dalam p{opacity:1;transform:none}

@media(max-width:560px){
  .faq__item summary{padding-left:.9rem;gap:.75rem}
  .faq__item[open] summary{padding-left:1.15rem}
  .faq__dalam p{padding-left:.9rem;padding-right:1rem}
}

.catatan-demo{
  display:block;background:#FFF6F6;border:1px solid #F3C9CC;border-left:4px solid var(--merah);
  border-radius:var(--r);padding:.6rem .9rem;font-size:.8rem;color:var(--navy);max-width:none;
}

/* ── 6. Header dua tingkat ──────────────────────────────────
   Baris atas berisi jam buka dan kontak, baris bawah berisi
   navigasi. Saat halaman turun, baris atas terlipat naik dan
   yang menempel tinggal bilah navigasinya, berlatar kaca.
   Yang dilipat memakai grid 1fr ke 0fr, jadi tingginya tidak
   perlu ditebak; paddingnya ikut dikempiskan karena padding
   tetap terhitung walau isinya sudah terpotong. */
.site-header{position:sticky;top:0;z-index:60}

.site-header__utama{
  background:var(--white);border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.is-scrolled .site-header__utama{
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);box-shadow:var(--bayang);
}
.site-header__utama .wrap{display:flex;align-items:center;gap:var(--s-3);min-height:74px;
  transition:min-height .42s var(--ease)}
.site-header.is-scrolled .site-header__utama .wrap{min-height:62px}

.brand{display:block;flex:none;margin-right:auto;text-decoration:none;
  transition:transform .3s var(--ease)}
.brand img{height:42px;width:auto;transition:height .42s var(--ease)}
.site-header.is-scrolled .brand img{height:34px}
.brand:hover{transform:translateY(-1px)}

.nav-toggle{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  background:none;border:2px solid var(--line-2);border-radius:var(--r);
  padding:.35rem .75rem;font-size:.76rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);
}
.nav-toggle__bars{display:grid;gap:3px}
.nav-toggle__bars i{display:block;width:14px;height:2px;background:var(--navy)}

.nav{display:none}
.nav.is-open{display:block;position:absolute;inset:100% 0 auto;background:var(--white);border-bottom:1px solid var(--line);padding:var(--s-2) 1.15rem var(--s-3);box-shadow:var(--bayang-kuat)}
.nav ul{list-style:none;margin:0;padding:0}
/* Tombol dikecualikan, kalau ikut disetel ulang di sini
   latar dan garis tepinya hilang dan wujudnya tinggal teks. */
.nav a:not(.btn),.nav .subnav-toggle{display:flex;align-items:center;min-height:44px;width:100%;text-align:left;padding:.25rem 0;text-decoration:none;background:none;border:0;color:inherit;font-size:.94rem;font-weight:500}
.hanya-ponsel .btn{width:100%;margin-top:var(--s-2)}
.nav__sorot{display:none}
/* Tombol reservasi di bilah disembunyikan pada layar sempit,
   salinannya yang di dalam menu yang dipakai. */
.btn--kepala{display:none}
.subnav{display:none;padding-left:var(--s-2);border-left:2px solid var(--line)}
.subnav.is-open{display:block}
.subnav strong{display:block;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--hijau-2);margin-top:var(--s-1);font-weight:700}
.subnav-toggle::after{content:"";width:5px;height:5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:.4rem;transition:transform .2s var(--ease)}
.nav .btn{margin-top:var(--s-2)}

@media(min-width:1020px){
  .nav-toggle{display:none}
  .hanya-ponsel{display:none}
  .btn--kepala{display:inline-flex}
  .nav{display:block;margin-inline:auto}
  .nav>ul{position:relative;display:flex;align-items:center;gap:.15rem}
  /* :not(.btn) ikut menambah bobot, jadi di sini harus ditulis
     sama persis supaya aturan meja lebar yang menang. */
  .nav a:not(.btn),.nav .subnav-toggle{width:auto;white-space:nowrap;min-height:44px;
    padding:.55rem .8rem;border-radius:var(--r);font-size:.9rem;font-weight:600;
    position:relative;z-index:1;transition:color .18s var(--ease)}
  .nav>ul>li>a:hover,.nav .subnav-toggle:hover{color:var(--merah)}
  .nav>ul>li>a[aria-current="page"]{color:var(--merah);font-weight:700}

  /* Satu penanda yang meluncur, bukan garis bawah yang muncul
     dan hilang bergantian di tiap menu. Letak dan lebarnya
     dikirim dari JavaScript lewat dua peubah. */
  .nav__sorot{
    display:block;position:absolute;left:0;top:50%;height:34px;margin-top:-17px;
    width:var(--w,0);transform:translateX(var(--x,0));border-radius:var(--r);
    background:rgba(200,32,46,.09);opacity:0;pointer-events:none;z-index:0;
    transition:transform .32s var(--ease-lenting),width .32s var(--ease-lenting),opacity .18s var(--ease);
  }
  .nav>ul:hover .nav__sorot,.nav>ul:focus-within .nav__sorot{opacity:1}

  .nav>ul>li{position:relative}
  .nav .btn{margin-top:0}

  /* Panel tiga kolom. Isinya tetap pasangan strong dan ul yang
     sama dengan versi ponsel, cuma alirannya diputar jadi kolom. */
  /* .is-open dipakai versi ponsel dan menang spesifisitas,
     jadi di sini keduanya disebut supaya tetap jadi grid. */
  .subnav,.subnav.is-open{
    display:grid;grid-auto-flow:column;grid-template-rows:auto 1fr;gap:.35rem 2.25rem;
    position:absolute;top:calc(100% + 10px);left:50%;
    transform:translateX(-50%) translateY(8px);
    width:max-content;max-width:min(92vw,660px);
    background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
    padding:1.4rem 1.6rem;box-shadow:var(--bayang-kuat);border-left:1px solid var(--line);
    opacity:0;visibility:hidden;
    transition:opacity .32s var(--ease),transform .32s var(--ease),visibility 0s linear .32s;
  }
  .nav>ul>li:hover .subnav,.nav>ul>li:focus-within .subnav,.subnav.is-open{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s;
  }
  .nav>ul>li:hover .subnav-toggle::after,.subnav.is-open+.subnav-toggle::after{transform:rotate(225deg) translateY(2px)}
  .subnav strong{margin-top:0;margin-bottom:.35rem;color:var(--merah)}
  /* align-content:start wajib. Baris auto ikut meregang kalau
     kolomnya lebih tinggi, dan daftarnya jadi renggang sendiri. */
  .subnav ul{display:grid;gap:.1rem;align-content:start}
  .subnav a{padding:.45rem .6rem;margin-left:-.6rem;border-radius:var(--r);font-weight:600;
    transition:background-color .18s var(--ease),transform .18s var(--ease),color .18s var(--ease)}
  .subnav a:hover{background:var(--paper);color:var(--merah);transform:translateX(3px)}
}

/* ── 7. Footer empat kolom ──────────────────────────────────
   Blok merek di kiri, tiga kolom keterangan di kanan, lalu
   bilah hukum di kaki. Tepi atasnya lurus, tanpa ombak. */
.site-footer{background:var(--navy);color:rgba(255,255,255,.68);font-size:.9rem}
.site-footer a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
.site-footer a:hover{color:#fff}

.site-footer .cols{display:grid;gap:var(--s-4);grid-template-columns:1fr;padding-block:var(--s-5) var(--s-4)}
@media(min-width:760px){.site-footer .cols{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--s-4)}}

.foot-merek img{height:44px;width:auto}
.foot-merek p{margin-top:var(--s-2);font-size:.87rem;max-width:36ch;color:rgba(255,255,255,.62)}
.foot-alamat{padding-top:var(--s-2);border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.72)}

/* Ikon sosial. Lingkaran 44 piksel supaya nyaman disentuh. */
.foot-sosial{display:flex;gap:.5rem;margin-top:var(--s-3)}
.foot-sosial a{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.75);
  transition:background-color .18s var(--ease),border-color .18s var(--ease),
    color .18s var(--ease),transform .32s var(--ease-lenting);
}
.foot-sosial a:hover{background:var(--merah);border-color:var(--merah);color:#fff;transform:translateY(-3px)}
.foot-sosial svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.site-footer h3{
  position:relative;color:#fff;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;margin-bottom:var(--s-2);padding-bottom:.6rem;
}
.site-footer h3::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:22px;
  background:var(--merah);transition:width .32s var(--ease)}
.site-footer .cols>div:nth-child(even) h3::after{background:var(--hijau)}
.site-footer .cols>div:hover h3::after{width:46px}

.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li a{display:inline-flex;align-items:center;min-height:36px;font-size:.88rem;
  transition:color .18s var(--ease),transform .18s var(--ease)}
.site-footer li a:hover{transform:translateX(4px)}

/* Jam buka dibuat berpasangan supaya angkanya sejajar */
.foot-jam li{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:36px;font-size:.85rem;border-bottom:1px dashed rgba(255,255,255,.12)}
.foot-jam li:last-child{border-bottom:0}
.foot-jam b{color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Bilah kaki satu baris. Di layar sempit boleh turun, tetapi di
   layar biasa hak cipta dan tautan hukum duduk sebaris. */
.foot-kaki{border-top:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18)}
.foot-kaki .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:.4rem 1.75rem;padding-block:1rem;font-size:.78rem;color:rgba(255,255,255,.5)}
/* Paragraf di situs ini dibatasi 60ch. Di bilah sekecil ini
   batas itu memotong barisnya jadi tiga, jadi dilepas. */
.foot-kaki p{max-width:none;margin:0}
.foot-hukum{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}

/* ── 8. Gerak ───────────────────────────────────────────── */
/* Satu aturan untuk seluruh halaman: elemen memudar masuk di tempat.
   Tidak ada geseran dari bawah ke atas, dan durasinya sengaja panjang
   supaya terasa tenang, bukan menyentak. */
:root{--ease-pudar:cubic-bezier(.25,.46,.3,1)}

[data-anim]{opacity:0}
.is-in [data-anim],[data-anim].is-in{
  opacity:1;
  transition:opacity 1.15s var(--ease-pudar);
  transition-delay:calc(var(--i,0) * 120ms);
}
/* Gambar dulu disingkap lewat clip-path. Sekarang ikut memudar
   supaya iramanya sama dengan teks di sebelahnya. */
[data-anim="singkap"]{opacity:0;clip-path:none}
.is-in [data-anim="singkap"],[data-anim="singkap"].is-in{
  opacity:1;
  transition:opacity 1.5s var(--ease-pudar);
  transition-delay:calc(var(--i,0) * 120ms);
}

/* Kemunculan hero saat halaman dimuat. Berurutan, pelan, murni pudar.
   Tidak bergantung pada IntersectionObserver karena ini di atas
   lipatan dan gambarnya elemen LCP. */
@keyframes pudar-masuk{from{opacity:0}to{opacity:1}}

.hero__masuk>*{opacity:0;animation:pudar-masuk 1.5s var(--ease-pudar) forwards}
.hero__masuk>*:nth-child(1){animation-delay:.20s}
.hero__masuk>*:nth-child(2){animation-delay:.45s}
.hero__masuk>*:nth-child(3){animation-delay:.75s}
.hero__masuk>*:nth-child(4){animation-delay:1.05s}

/* Piring memudar paling lama, dan denyutnya baru menyusul setelah
   piringnya benar-benar utuh. */
.hero__foto{opacity:0;animation:pudar-masuk 1.9s var(--ease-pudar) .5s forwards}
.hero__pulsa{opacity:0;animation:pudar-masuk 1.4s var(--ease-pudar) 2s forwards}

.sr-only{position:absolute;left:1rem;top:.7rem;z-index:100;transform:translateY(-180%);transition:transform .2s var(--ease)}
.sr-only:focus-visible{transform:none}

@media(prefers-reduced-motion:reduce){
  [data-anim],[data-anim="singkap"]{opacity:1!important}
  .hero__masuk>*,.hero__foto,.hero__pulsa{opacity:1!important;animation:none}
  .pita__jalur{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── 9. Halaman ─────────────────────────────────────────── */

/* Hero Piring Tunggal. Satu hidangan diadu ruang kosong, dikelilingi
   denyut yang memancar keluar, di atas gradasi jala WebGL yang
   mengalir. Tiga lapis latar dengan urutan yang tegas:
   SVG cadangan (-3), kanvas gradasi (-2), vignette (-1). */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:#071B2E;color:rgba(255,255,255,.74);
  padding-block:clamp(3.25rem,7vw,6rem) clamp(3.5rem,7.5vw,6.5rem);
}
.hero h1{color:#fff}
.hero h1 i{font-style:normal}
.hero .lede{color:rgba(255,255,255,.74)}
.hero .eyebrow{color:var(--emas-terang)}

.hero__cadangan{position:absolute;inset:0;z-index:-3}
.hero__cadangan svg{width:100%;height:100%;display:block}

.gradient-wave{position:absolute;inset:0;z-index:-2;overflow:hidden}
.gradient-wave__kanvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.1s var(--ease);
}
.gradient-wave--siap .gradient-wave__kanvas{opacity:1}

/* Vignette. Tanpa ini, teks putih di kiri kadang jatuh di atas
   bagian gradasi yang sedang terang dan kontrasnya hilang. */
.hero__redup{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,14,24,.74) 0%,rgba(4,14,24,.36) 44%,rgba(4,14,24,0) 70%),
    linear-gradient(180deg,rgba(4,14,24,.32) 0%,rgba(4,14,24,0) 32%,rgba(4,14,24,.44) 100%);
}

.hero__grid{display:grid;gap:clamp(2rem,4.5vw,3.75rem);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.hero__grid{grid-template-columns:1.05fr .95fr}}
.hero .eyebrow{margin-bottom:clamp(.85rem,1.6vw,1.1rem)}
.hero h1{margin-bottom:clamp(1rem,2vw,1.45rem);max-width:19ch}
.hero .lede{margin-bottom:0;max-width:46ch}
.hero .tombol-baris{margin-top:clamp(1.5rem,2.8vw,2.2rem)}

/* Merah di atas biru tua hanya 2,7:1 sebagai bidang, di bawah ambang
   3:1 untuk batas komponen. Cincin tipis memulihkannya tanpa
   mengubah warna, jadi teks putihnya tetap 5,7:1. */
.hero .btn{box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.hero .btn--garis{color:#fff;border-color:rgba(255,255,255,.42);box-shadow:none}
.hero .btn--garis:hover{background:rgba(255,255,255,.14);border-color:#fff}

.hero__piring{position:relative;display:grid;place-items:center;padding-block:.5rem}

/* Denyut. Empat cincin memancar keluar dari tepi piring, berurutan. */
.hero__pulsa{
  position:absolute;top:50%;left:50%;
  width:min(82%,360px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
}
.hero__pulsa i{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--emas);opacity:0;
  animation:denyut-keluar 5.6s cubic-bezier(.18,.62,.3,1) infinite;
}
.hero__pulsa i:nth-child(2){animation-delay:1.4s}
.hero__pulsa i:nth-child(3){animation-delay:2.8s}
.hero__pulsa i:nth-child(4){animation-delay:4.2s}
@keyframes denyut-keluar{
  0%{transform:scale(1);opacity:0;border-width:2px}
  8%{opacity:.72}
  100%{transform:scale(1.62);opacity:0;border-width:1px}
}

.hero__foto{
  position:relative;z-index:1;
  width:min(82%,360px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85);
  outline:1px solid rgba(201,162,39,.4);outline-offset:6px;
}
.hero__foto img{width:100%;height:100%;object-fit:cover}

/* Pita gelombang cadangan, dipakai kalau WebGL tidak tersedia. */
.pita-ombak{animation:hanyut linear infinite}
.pita-ombak--1{animation-duration:32s}
.pita-ombak--2{animation-duration:46s;animation-direction:reverse}
.pita-ombak--3{animation-duration:64s}
.pita-ombak--4{animation-duration:88s;animation-direction:reverse}
@keyframes hanyut{from{transform:translateX(0)}to{transform:translateX(-720px)}}

@media(prefers-reduced-motion:reduce){
  .hero__pulsa i,.pita-ombak{animation:none}
}

/* ── 12. Halaman Tentang ────────────────────────────────────
   Bagian-bagian yang cuma dipakai di halaman ini. Sisanya
   memakai komponen yang sama dengan beranda. */

/* Remah roti. Kecil, tetapi menolong orang yang datang dari
   pencarian dan langsung mendarat di halaman dalam. */
.jejak{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:.78rem;color:var(--ink-soft);margin-bottom:var(--s-3)}
.jejak a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
.jejak a:hover{color:var(--merah)}
.jejak [aria-current]{color:var(--navy);font-weight:600}
.jejak span[aria-hidden]{color:var(--line-2)}

/* ── Hero halaman dalam ─────────────────────────────────────
   Memakai seluruh lapisan latar hero beranda, cuma lebih pendek
   dan sisi kanannya bingkai persegi, bukan piring bulat. */
.hero--dalam{padding-block:clamp(2.75rem,5.5vw,4.5rem) clamp(3rem,6vw,5rem)}
.hero--dalam h1{font-size:clamp(1.75rem,4vw,2.85rem);max-width:17ch}

/* Lebarnya dipatok selebar gambar supaya cap tahunnya menggantung
   tepat di tepi kiri bingkai, bukan melayang jauh di kolomnya. */
/* Varian terang. Mesin gradasinya sama, warnanya saja yang
   diganti biru muda, dan semua yang tadinya putih dibalik
   jadi navy supaya kontrasnya tetap lewat ambang. */
.hero--terang{background:var(--paper);color:var(--ink-soft)}
.hero--terang h1{color:var(--navy)}
.hero--terang .lede{color:var(--ink-soft)}
.hero--terang .eyebrow{color:var(--merah)}
.hero--terang .hero__redup{
  background:
    linear-gradient(90deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.5) 46%,rgba(255,255,255,0) 72%),
    linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 30%,rgba(245,248,250,.72) 100%);
}
.hero--terang .btn{box-shadow:none}
.hero--terang .btn--garis{color:var(--navy);border-color:var(--line-2)}
.hero--terang .btn--garis:hover{background:var(--white);border-color:var(--navy)}
.hero--terang .hero__gbr{
  outline-color:rgba(10,37,64,.14);
  box-shadow:0 26px 60px -30px rgba(10,37,64,.55);
}
/* Di hero terang cahayanya jadi bayangan biru tua, bukan emas.
   Yang diganti latar anaknya, sama seperti varian gelap. */
.hero--terang .hero__kilau::before{
  background:radial-gradient(circle closest-side,rgba(10,37,64,.1),transparent 70%);
}
.hero--terang .hero__cap{
  background:rgba(255,255,255,.82);border-color:rgba(10,37,64,.1);
  box-shadow:0 10px 26px -14px rgba(10,37,64,.45);
}
.hero--terang .hero__cap b{color:var(--navy)}
.hero--terang .hero__cap span{color:var(--merah)}

.hero__bingkai{
  position:relative;display:grid;isolation:isolate;
  width:min(100%,460px);justify-self:center;
  opacity:0;animation:pudar-masuk 1.9s var(--ease-pudar) .5s forwards;
}
/* Cahaya lembut yang mengikuti kursor. Titiknya dikirim dari
   JavaScript lewat --mx dan --my.

   Kotaknya dipasang sama persis dengan bingkai, bukan dilebihkan,
   supaya persen yang dikirim benar-benar jatuh di titik kursor.
   Cahayanya sendiri digambar di anak yang boleh meluber keluar.
   Dulu ia digambar sebagai latar kotak ini, dan karena lingkaran
   cahayanya berjari-jari 280px sedangkan kotaknya cuma menyisakan
   sekitar 60px di atas dan bawah, tepinya terpotong lurus dan
   terlihat seperti menabrak dinding. */
.hero__kilau{
  position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease);
}
.hero__kilau::before{
  content:"";position:absolute;width:560px;height:560px;
  left:var(--mx,50%);top:var(--my,50%);margin:-280px 0 0 -280px;
  background:radial-gradient(circle closest-side,rgba(232,203,107,.2),transparent 70%);
}
.hero__bingkai:hover .hero__kilau{opacity:1}

.hero__gbr{
  position:relative;width:100%;aspect-ratio:4/3;
  border-radius:14px;overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85);
  outline:1px solid rgba(201,162,39,.4);outline-offset:8px;
  animation:apung 7s ease-in-out infinite;
}
.hero__gbr img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.hero__bingkai:hover .hero__gbr img{transform:scale(1.05)}
/* Naik turun sangat pelan. Jaraknya kecil supaya terbaca sebagai
   napas, bukan sebagai gerakan yang minta diperhatikan. */
@keyframes apung{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Cap tahun. Iramanya digeser supaya tidak naik turun berbarengan
   dengan gambarnya, jadi terasa ada kedalaman. */
.hero__cap{
  position:absolute;left:max(-1rem,-4%);bottom:1.25rem;z-index:2;
  display:grid;gap:.15rem;padding:.75rem 1.05rem;border-radius:10px;
  background:rgba(6,20,35,.62);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);
  animation:apung 7s ease-in-out -1.6s infinite;
}
.hero__cap b{font-size:1.4rem;line-height:1;color:#fff;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.hero__cap span{font-size:.62rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--emas-terang)}

@media(prefers-reduced-motion:reduce){
  .hero__bingkai{opacity:1;animation:none}
  .hero__gbr,.hero__cap{animation:none}
}

/* ── Perjalanan ─────────────────────────────────────────── */
.tt-jalan{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:900px){
  .tt-jalan{grid-template-columns:.82fr 1.18fr;gap:clamp(2.5rem,5vw,4.5rem)}
  /* Judulnya menetap sementara rel tahunnya lewat */
  .tt-jalan__kiri{position:sticky;top:6.5rem;align-self:start}
}
.tt-jalan__kiri h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.tt-jalan__ket{margin-top:var(--s-2);color:var(--ink-soft);font-size:.93rem;max-width:34ch}

.tt-rel{list-style:none;margin:0;padding:0;position:relative}
/* Rel ditarik dari atas ke bawah saat bagiannya masuk layar */
.tt-rel::before{
  content:"";position:absolute;left:7px;top:12px;bottom:12px;width:2px;background:var(--line);
  transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease);
}
.tt-rel.is-in::before{transform:scaleY(1)}

.tt-rel li{position:relative;padding-left:2.6rem;padding-bottom:var(--s-4)}
.tt-rel li:last-child{padding-bottom:0}
.tt-rel li::before{
  content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;
  background:var(--white);border:3px solid var(--line-2);
  transform:scale(.55);
  transition:border-color .45s var(--ease),transform .55s var(--ease-lenting);
}
.tt-rel.is-in li::before{
  border-color:var(--merah);transform:scale(1);
  transition-delay:calc(var(--i,0) * 120ms + 200ms);
}
.tt-rel__tahun{display:block;font-size:1.05rem;font-weight:700;letter-spacing:.04em;
  color:var(--merah);font-variant-numeric:tabular-nums;line-height:1;margin-bottom:.45rem}
.tt-rel h3{font-size:1.08rem;line-height:1.3;margin-bottom:.4rem}
.tt-rel p{font-size:.9rem;color:var(--ink-soft);max-width:56ch;margin:0}

/* ── Angka ──────────────────────────────────────────────── */
.tt-angka{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3) var(--s-4);
  grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.tt-angka{grid-template-columns:repeat(4,1fr)}}
.tt-angka li{position:relative;padding-left:var(--s-3)}
.tt-angka li::before{content:"";position:absolute;left:0;top:.3rem;bottom:.3rem;width:2px;
  background:var(--merah);border-radius:2px}
.tt-angka li:nth-child(even)::before{background:var(--hijau)}
.tt-angka b{display:block;font-size:clamp(2.1rem,4.8vw,3.1rem);font-weight:700;color:#fff;
  line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.tt-angka span{display:block;margin-top:.55rem;font-size:.84rem;line-height:1.45;
  color:rgba(255,255,255,.62);max-width:22ch}

/* ── Cara kerja ─────────────────────────────────────────── */
.tt-prinsip{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media(min-width:760px){.tt-prinsip{grid-template-columns:repeat(3,1fr);gap:var(--s-4)}}
.tt-prinsip article{padding-top:var(--s-3);border-top:2px solid var(--line)}
.tt-prinsip article:hover{border-top-color:var(--merah)}
.tt-prinsip article{transition:border-color .35s var(--ease)}
.tt-prinsip article:nth-child(even):hover{border-top-color:var(--hijau)}
.tt-prinsip__ikon{display:block;width:44px;height:44px;color:var(--merah);
  margin-bottom:var(--s-2);transition:transform .5s var(--ease)}
.tt-prinsip article:nth-child(even) .tt-prinsip__ikon{color:var(--hijau)}
.tt-prinsip article:hover .tt-prinsip__ikon{transform:translateY(-3px)}
.tt-prinsip__ikon svg{width:100%;height:100%;display:block;overflow:visible}
.tt-prinsip h3{font-size:1.05rem;line-height:1.3;margin-bottom:.4rem}
.tt-prinsip p{font-size:.88rem;color:var(--ink-soft);max-width:36ch;margin:0}

/* ── 13. Halaman Menu ───────────────────────────────────────
   Tidak ada harga di sini, jadi yang menuntun mata adalah
   pengelompokan dan jarak, bukan kolom angka. */

/* Bilah pemilih dapur. Menempel di bawah bilah navigasi yang
   sudah menyusut, dan menyorot bagian yang sedang dibaca. */
.mn-tab{position:sticky;top:61px;z-index:50;
  /* Biru muda supaya bilahnya terbaca sebagai bidang tersendiri,
     bukan menyatu dengan bilah navigasi putih di atasnya. */
  background:rgba(222,234,246,.92);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid #C9DBEC}
.mn-tab ul{
  display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;
  list-style:none;margin:0;padding:0;
  /* safe center supaya waktu isinya melebihi lebar layar, ujung
     kirinya tidak ikut terpotong dan tetap bisa digeser. */
  justify-content:center;justify-content:safe center;
}
.mn-tab ul::-webkit-scrollbar{display:none}
.mn-tab a{
  position:relative;display:inline-flex;align-items:center;
  justify-content:center;gap:.55rem;min-height:62px;padding:.7rem 1.25rem;
  white-space:nowrap;font-size:.95rem;font-weight:600;
  color:#41556B;text-decoration:none;transition:color .18s var(--ease)}
.mn-tab__ik{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--ease)}
.mn-tab a:hover .mn-tab__ik{transform:translateY(-2px)}
.mn-tab a::after{content:"";position:absolute;left:1.25rem;right:1.25rem;bottom:0;height:2.5px;
  background:var(--merah);transform:scaleX(0);transform-origin:center;
  transition:transform .32s var(--ease)}
.mn-tab a:hover{color:var(--navy)}
.mn-tab a.on{color:var(--merah)}
.mn-tab a.on::after{transform:scaleX(1)}
@media(max-width:520px){
  .mn-tab a{min-height:56px;padding:.6rem .8rem;font-size:.86rem;gap:.45rem}
  .mn-tab__ik{width:19px;height:19px}
}

/* Judul bagian tidak boleh tersembunyi di balik dua bilah
   yang menempel saat tautan lompat diklik. */
.mn-blok{scroll-margin-top:8.75rem}
.mn-kepala{max-width:62ch;margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.mn-kepala h2{font-size:clamp(1.5rem,3vw,2.15rem);margin-bottom:.6rem}
.mn-kepala p{color:var(--ink-soft);font-size:.94rem;margin:0}
/* Keterangan tambahan di bawah judul bagian bergaris */
.mn-kepala-ket{margin-top:.6rem;color:var(--ink-soft);font-size:.92rem;max-width:56ch}

.mn-grid{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media(min-width:620px){.mn-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.mn-grid{grid-template-columns:repeat(3,1fr);gap:var(--s-3) var(--s-4)}}

.mn-grup{padding-top:var(--s-2);border-top:2px solid var(--line);
  transition:border-color .35s var(--ease)}
.mn-grup:hover{border-top-color:var(--merah)}
.mn-grup:nth-child(even):hover{border-top-color:var(--hijau)}
.mn-grup h3{font-size:1.02rem;letter-spacing:-.02em;margin-bottom:.3rem}
.mn-grup__ket{font-size:.78rem;color:var(--ink-soft);margin:0 0 .5rem;max-width:30ch}

.mn-daftar{list-style:none;margin:.4rem 0 0;padding:0}
.mn-daftar li{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  padding:.42rem 0;font-size:.92rem;color:var(--navy);
  border-bottom:1px dashed var(--line)}
.mn-daftar li:last-child{border-bottom:0}

/* Penanda favorit. Diberi latar dan huruf, bukan warna saja,
   supaya tetap terbaca tanpa membedakan warna. */
.mn-tanda{display:inline-flex;align-items:center;font-size:.62rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--merah);
  background:rgba(200,32,46,.08);border-radius:99px;padding:.2rem .55rem;white-space:nowrap}

.mn-catatan{display:flex;align-items:flex-start;gap:.85rem;max-width:none;
  padding:clamp(1rem,2.2vw,1.35rem);border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);
  font-size:.9rem;color:var(--ink-soft);margin-bottom:var(--s-4)}
.mn-catatan__ik{width:22px;height:22px;flex:none;margin-top:.1rem;color:var(--merah);
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mn-catatan a{color:var(--navy);font-weight:700}

/* ── 14. Halaman Lokasi ─────────────────────────────────── */
.lk-peta{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:900px){.lk-peta{grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}}

.lk-peta__bingkai{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--bayang);background:var(--paper-2);
  aspect-ratio:4/3}
@media(min-width:900px){.lk-peta__bingkai{aspect-ratio:1/1;position:sticky;top:7rem}}
.lk-peta__bingkai iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

.lk-info{display:grid;gap:var(--s-3)}
.lk-info__baris{display:grid;grid-template-columns:auto 1fr;gap:1rem;
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.lk-info__baris:last-child{border-bottom:0;padding-bottom:0}
.lk-info__ik{width:26px;height:26px;flex:none;margin-top:.15rem;color:var(--merah);
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lk-info__baris:nth-child(even) .lk-info__ik{color:var(--hijau)}
.lk-info h2{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.5rem}
.lk-info p{font-size:.95rem;margin-bottom:.35rem;max-width:40ch}
.lk-info a{color:var(--navy);font-weight:600}
.lk-info__ket{font-size:.85rem;color:var(--ink-soft);margin-top:.5rem}
.lk-info .tautan{margin-top:.6rem;color:var(--merah)}

.lk-jam{list-style:none;margin:0;padding:0;max-width:26rem}
.lk-jam li{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:38px;font-size:.92rem;border-bottom:1px dashed var(--line)}
.lk-jam li:last-child{border-bottom:0}
.lk-jam b{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Varian kontak. Alamat surelnya panjang dan tidak berangka,
   jadi boleh patah baris dan tidak perlu angka tabular. */
.lk-jam--kontak b{white-space:normal;word-break:break-word;font-variant-numeric:normal;
  text-align:right}

/* Fasilitas. Kartu kecil, ikon di atas, tidak ada yang diklik
   jadi tidak dibuat menyerupai tombol. */
.lk-fasilitas{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);
  grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.lk-fasilitas{grid-template-columns:repeat(3,1fr)}}
/* auto-fit, bukan jumlah kolom yang dipatok. Kolom yang tidak
   terisi dikempiskan dan sisanya melebar, jadi empat butir
   maupun enam butir sama-sama penuh sampai tepi kanan. */
@media(min-width:1080px){
  .lk-fasilitas{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s-2) var(--s-3)}
}
.lk-fasilitas li{display:grid;gap:.3rem;padding-top:var(--s-2);
  border-top:2px solid var(--line);transition:border-color .35s var(--ease)}
.lk-fasilitas li:hover{border-top-color:var(--merah)}
.lk-fasilitas li:nth-child(even):hover{border-top-color:var(--hijau)}
.lk-fasilitas svg{width:26px;height:26px;color:var(--merah);margin-bottom:.35rem;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--ease)}
.lk-fasilitas li:nth-child(even) svg{color:var(--hijau)}
.lk-fasilitas li:hover svg{transform:translateY(-3px)}
.lk-fasilitas b{font-size:.94rem}
.lk-fasilitas span{font-size:.82rem;color:var(--ink-soft);line-height:1.45}

.lk-langkah{counter-reset:lk;list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-3)}
.lk-langkah li{counter-increment:lk;position:relative;padding-left:2.75rem;
  font-size:.94rem;color:var(--ink-soft);max-width:52ch}
.lk-langkah li::before{
  content:counter(lk);position:absolute;left:0;top:-.1rem;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-size:.82rem;font-weight:700;
  font-variant-numeric:tabular-nums}
.lk-langkah b{color:var(--navy)}

/* ── 15. Halaman dokumen ────────────────────────────────────
   Privasi, syarat, dan halaman panjang lain yang dibaca, bukan
   dinikmati. Tanpa gambar, dengan daftar isi yang menetap. */
.dok-kepala{background:var(--paper);border-bottom:1px solid var(--line);
  padding-block:clamp(2.25rem,4.5vw,3.5rem)}
.dok-kepala h1{font-size:clamp(1.75rem,4vw,2.6rem);max-width:22ch;margin:.3rem 0 0}
.dok-kepala .lede{margin-top:var(--s-3);max-width:60ch}
.dok-tanggal{margin-top:var(--s-3);font-size:.8rem;color:var(--ink-soft);
  font-variant-numeric:tabular-nums}

.dok{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:900px){
  .dok{grid-template-columns:.72fr 1.28fr;gap:clamp(2.5rem,5vw,4.5rem)}
  .dok__daftar{position:sticky;top:7rem;align-self:start;max-height:calc(100vh - 9rem);overflow-y:auto}
}
.dok__daftar-judul{font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s-2);
  padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.dok__daftar ol{list-style:none;margin:0;padding:0;counter-reset:dk}
.dok__daftar li{counter-increment:dk}
.dok__daftar a{display:flex;gap:.6rem;align-items:baseline;padding:.4rem 0;
  font-size:.88rem;color:var(--ink-soft);text-decoration:none;
  transition:color .18s var(--ease),transform .18s var(--ease)}
.dok__daftar a::before{content:counter(dk,decimal-leading-zero);
  font-size:.68rem;font-weight:700;color:var(--line-2);font-variant-numeric:tabular-nums;
  transition:color .18s var(--ease)}
.dok__daftar a:hover{color:var(--merah);transform:translateX(3px)}
.dok__daftar a:hover::before{color:var(--merah)}

/* Judul bagian tidak boleh tersembunyi di balik bilah menempel
   saat tautan daftar isi diklik. */
.dok__isi h2{scroll-margin-top:7rem;font-size:clamp(1.15rem,2.2vw,1.45rem);
  margin-top:var(--s-4);margin-bottom:var(--s-2);padding-top:var(--s-3);
  border-top:1px solid var(--line)}
.dok__isi>h2:first-of-type{margin-top:var(--s-4)}
.dok__isi p{font-size:.96rem;line-height:1.7;max-width:66ch;margin-bottom:var(--s-2)}
.dok__isi ul{margin:0 0 var(--s-2);padding-left:1.15rem;max-width:66ch}
.dok__isi li{font-size:.96rem;line-height:1.7;margin-bottom:.45rem}
.dok__isi li::marker{color:var(--merah)}
.dok__isi b{color:var(--navy)}
.dok__isi .mn-catatan{margin-bottom:var(--s-3);scroll-margin-top:7rem}
.dok__kontak{list-style:none;padding:0;margin-top:var(--s-2);max-width:34rem}
.dok__kontak li::marker{content:none}

/* ── 16. Galeri mini ────────────────────────────────────────
   Dipakai ulang di halaman Lokasi, View Laut, Untuk Keluarga,
   dan Private Dining. Fotonya membuktikan isi halamannya
   masing-masing, jadi tidak dikumpulkan di halaman galeri
   tersendiri yang tidak menuntun orang ke mana-mana. */
.galeri{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2);
  grid-template-columns:repeat(2,1fr)}
/* Batas bawahnya 160px, bukan 220px. Dengan 220px empat foto
   tidak cukup muat satu baris di layar sedang, dan yang keempat
   turun sendirian. Kolom kosong tetap dikempiskan auto-fit. */
@media(min-width:700px){
  .galeri{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s-3)}
}
.galeri button{
  position:relative;display:block;width:100%;padding:0;border:0;background:var(--paper-2);
  border-radius:var(--r-lg);overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;
  box-shadow:var(--bayang);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.galeri button:hover{transform:translateY(-4px);box-shadow:var(--bayang-kuat)}
.galeri img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.galeri button:hover img{transform:scale(1.06)}
/* Tanda perbesar. Muncul saat disorot supaya orang tahu fotonya
   bisa diklik, tanpa mengotori tampilan saat diam. */
.galeri__zoom{
  position:absolute;right:.6rem;bottom:.6rem;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(6,20,35,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.galeri button:hover .galeri__zoom,.galeri button:focus-visible .galeri__zoom{opacity:1;transform:none}
.galeri__zoom svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* Kaca pembesar. Memakai <dialog> supaya jebakan fokus dan
   tombol Esc ditangani peramban, bukan ditulis ulang. */
/* Lebarnya mengikuti gambar, bukan kotak tetap. Kalau dipatok
   1100px, foto persegi menyisakan pita latar di kiri dan kanan
   dan tombol panahnya ikut menjauh dari fotonya. */
.kaca{
  width:fit-content;max-width:min(100% - 2rem,1100px);max-height:92vh;
  padding:0;border:0;border-radius:var(--r-lg);background:transparent;overflow:visible;
}
.kaca::backdrop{background:rgba(4,14,24,.86);backdrop-filter:blur(5px)}
/* Ukurannya dari gambar sendiri, dibatasi lebar induk dan tinggi
   layar. Latarnya dilepas supaya tidak ada sisa warna yang
   terlihat kalau rasionya tidak pas. */
.kaca__gbr{display:block;width:auto;height:auto;max-width:100%;max-height:78vh;
  object-fit:contain;border-radius:var(--r-lg);background:transparent}
.kaca__ket{margin-top:.85rem;font-size:.88rem;color:rgba(255,255,255,.78);text-align:center}
.kaca__hitung{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.5);margin-left:.5rem}
.kaca__tbl{
  position:absolute;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;
  cursor:pointer;transition:background-color .2s var(--ease),transform .2s var(--ease);
}
.kaca__tbl:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}
.kaca__tbl svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.kaca__tutup{top:-58px;right:0}
.kaca__mundur{left:-58px;top:50%;margin-top:-23px}
.kaca__maju{right:-58px;top:50%;margin-top:-23px}
@media(max-width:900px){
  .kaca__tutup{top:-52px}
  .kaca__mundur{left:.5rem;top:auto;bottom:-56px;margin-top:0}
  .kaca__maju{right:.5rem;top:auto;bottom:-56px;margin-top:0}
  .kaca__ket{padding-bottom:3.5rem}
}

/* ── Ajakan penutup ─────────────────────────────────────── */
.tt-ajak{display:grid;gap:var(--s-3);align-items:center;grid-template-columns:1fr;
  padding:clamp(1.75rem,4vw,2.75rem);border-radius:var(--r-lg);
  background:var(--navy);color:rgba(255,255,255,.68)}
@media(min-width:860px){.tt-ajak{grid-template-columns:1.5fr auto;gap:var(--s-4)}}
.tt-ajak .eyebrow{color:#FFB4B9}
.tt-ajak h2{color:#fff;font-size:clamp(1.3rem,2.4vw,1.85rem);margin-bottom:.5rem}
.tt-ajak p{font-size:.92rem;max-width:54ch;margin:0}
.tt-ajak .tombol-baris{margin-top:0}
.tt-ajak .btn--garis{color:#fff;border-color:rgba(255,255,255,.36)}
.tt-ajak .btn--garis:hover{background:rgba(255,255,255,.12);border-color:#fff}

@media(prefers-reduced-motion:reduce){
  .tt-rel::before{transform:scaleY(1)}
  .tt-rel li::before{transform:scale(1)}
}

/* ── 17. Halaman Tanya Jawab ────────────────────────────────
   Memakai ulang kerangka halaman dokumen: daftar kelompok
   menetap di kiri, isinya digulir di kanan. Yang berbeda cuma
   isi kolom kanannya, yang berisi akordeon tanya jawab yang
   sama dengan blok di beranda. Satu data-akordeon dipasang di
   seluruh kolom, bukan per kelompok, supaya yang terbuka tetap
   satu jawaban saja sepanjang halaman. */
.tj-cepat{list-style:none;margin:var(--s-3) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.45rem .5rem}
.tj-cepat li{display:flex;align-items:center;gap:.45rem;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:.38rem .8rem;font-size:.79rem;font-weight:600;color:var(--navy)}
.tj-cepat svg{width:14px;height:14px;flex:none;color:var(--merah);
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* Jarak antarkelompok cukup lebar supaya batas bawah pertanyaan
   terakhir tidak terbaca sebagai batas atas judul berikutnya. */
.tj__grup{scroll-margin-top:7rem}
.tj__grup+.tj__grup{margin-top:var(--s-5)}
.tj__kepala{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:var(--s-2)}
.tj__kepala h2{margin:0;font-size:clamp(1.08rem,2vw,1.35rem)}
.tj__jml{flex:none;font-size:.64rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* Tombol chat di bawah daftar kelompok ikut menempel bersama
   daftarnya, jadi perlu jarak sendiri dari batas gulirnya. */
.dok__daftar .tombol-baris{margin-top:var(--s-3);padding-bottom:.25rem}

/* Tombol itu juga sebuah <a>, jadi kena aturan tautan daftar isi:
   nomor urut ikut menempel di depannya, warnanya jadi abu, dan
   pada sorotan ia bergeser seperti tautan. Ketiganya dicabut di
   sini supaya tombolnya tetap terbaca sebagai tombol. */
.dok__daftar .btn{display:inline-flex;align-items:center;justify-content:center;
  gap:0;padding:.6rem 2.2rem .6rem 1.3rem;font-size:.93rem;color:#fff}
.dok__daftar .btn::before{content:none}
.dok__daftar .btn:hover{color:#fff;transform:none}

/* ── 18. Halaman panduan ────────────────────────────────────
   Tulisan panjang yang dibaca dari atas ke bawah, bukan halaman
   jualan. Kerangkanya meminjam halaman dokumen: daftar isi
   menetap di kiri, badan tulisan di kanan. Yang ditambahkan di
   sini cuma perangkat khas artikel, yaitu remah roti, baris
   keterangan, gambar utama, dan gambar sisipan bertakarir. */
.art-kepala{background:var(--paper);border-bottom:1px solid var(--line);
  padding-block:clamp(2rem,4.5vw,3.5rem)}
/* Judulnya di kiri, fotonya di kanan dan sejajar tengah dengan
   blok teks. Di layar sempit keduanya menumpuk, foto di bawah. */
.art-kepala .wrap{display:grid;gap:var(--s-3);align-items:center}
@media(min-width:960px){
  .art-kepala .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:clamp(2rem,4vw,3.5rem)}
}
.art-kepala h1{font-size:clamp(1.85rem,4.2vw,2.9rem);max-width:20ch;margin:.3rem 0 0}
.art-kepala .lede{margin-top:var(--s-3);max-width:64ch}

.art-remah{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  margin-bottom:var(--s-3);font-size:.78rem;color:var(--ink-soft)}
.art-remah a{color:var(--ink-soft);text-decoration:none;transition:color .2s var(--ease)}
.art-remah a:hover{color:var(--merah)}
.art-remah span[aria-hidden]{color:var(--line-2)}
.art-remah [aria-current]{color:var(--navy);font-weight:600}

.art-meta{list-style:none;margin:var(--s-3) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem 1.35rem;font-size:.8rem;color:var(--ink-soft)}
.art-meta li{display:flex;align-items:center;gap:.4rem}
.art-meta svg{width:15px;height:15px;flex:none;color:var(--merah);
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* Gambar utama duduk di samping judul, bukan sebagai pita lebar
   di bawahnya, jadi rasionya mendekati bingkai foto biasa. */
.art-gbr{border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/3;background:var(--paper-2);box-shadow:var(--bayang)}
.art-gbr img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){.art-gbr{aspect-ratio:16/9}}

.art-sisip{margin:var(--s-4) 0;padding:0}
.art-sisip img{width:100%;height:auto;display:block;border-radius:var(--r-lg)}
.art-sisip figcaption{margin-top:.7rem;font-size:.82rem;line-height:1.5;
  color:var(--ink-soft);max-width:56ch}

/* Tiga jenis tempat. Disusun menurun, bukan tiga kolom, karena
   kolom kanannya terlalu sempit untuk tiga kartu bersebelahan. */
.art-jenis{list-style:none;margin:var(--s-3) 0 var(--s-4);padding:0}
.art-jenis li{padding:var(--s-3) 0;border-top:1px solid var(--line)}
.art-jenis li:last-child{border-bottom:1px solid var(--line)}
.art-jenis li::marker{content:none}
.art-jenis h3{margin:0 0 .35rem;font-size:1.02rem}
.art-jenis p{margin:0;font-size:.93rem;color:var(--ink-soft);max-width:60ch}
.art-jenis .art-jenis__label{font-size:.62rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--hijau-2);margin-bottom:.35rem}

/* Subjudul di dalam badan tulisan. Halaman dokumen tidak
   memerlukannya, jadi baru diatur di sini. */
.dok__isi h3{margin-top:var(--s-3);margin-bottom:.4rem;scroll-margin-top:7rem;
  font-size:clamp(1rem,1.7vw,1.1rem)}

/* Judul bagian yang ditaruh di elemen section, bukan di h2-nya,
   tetap perlu ruang supaya tidak tertutup bilah menempel. */
.section[id]{scroll-margin-top:7rem}

/* ── 19. Halaman daftar panduan ─────────────────────────────
   Indeks bergaya editorial: kepala terbelah di atas, lalu deret
   baris bergaris rambut. Bentuk baris dipilih karena inilah satu-
   satunya susunan yang tetap terlihat sengaja saat isinya baru
   satu, dan tetap terbaca saat isinya sepuluh. Kisi kartu tidak
   punya sifat itu: satu kartu di kisi tiga kolom selalu terlihat
   seperti rak yang belum terisi. */

/* Kepala berisi judul saja, di atas latar yang sama dengan hero
   halaman Lokasi. Kelas .hero dan .hero--terang dipakai apa adanya
   supaya kalau latar hero diubah nanti, halaman ini ikut berubah
   sendiri tanpa perlu disalin ulang. Yang dikerjakan di sini cuma
   memangkas tingginya, karena isinya judul saja, dan mencabut
   batas bawah h1 bawaan hero.
   .hero--dalam sengaja tidak dipakai: ia mengecilkan h1, padahal
   yang diminta ukuran judul hero beranda. */
.pd-kepala{padding-block:clamp(3rem,6vw,5rem)}
.pd-kepala h1{margin:0;max-width:none}

.pd-lencana{display:inline-flex;align-items:center;gap:.45rem;
  padding:.3rem .75rem;border-radius:999px;
  border:1px solid var(--line-2);background:var(--white);
  font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy)}
.pd-lencana::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--merah);flex:none}

/* ── Deret baris ────────────────────────────────────────── */
/* Sisipan samping dipakai dua kali: sebagai bantalan latar sorotan,
   dan sebagai jarak masuk garis pemisah. Nilainya harus tetap di
   bawah 1.125rem, yaitu setengah selokan .wrap, supaya tarikan
   margin negatifnya tidak pernah meluber keluar layar. */
.pd-daftar{--pd-sisip:clamp(.7rem,1.2vw,1.05rem);
  list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}

.pd-baris{position:relative;display:grid;gap:var(--s-3);
  grid-template-columns:1fr;grid-template-areas:"gbr" "tx";
  padding-block:clamp(1.75rem,4vw,3rem);
  padding-inline:var(--pd-sisip);margin-inline:calc(-1 * var(--pd-sisip));
  transition:background-color .45s var(--ease)}
@media(min-width:860px){
  .pd-baris{grid-template-areas:"tx gbr panah";
    grid-template-columns:minmax(0,1fr) clamp(260px,42%,480px) auto;
    gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
  .pd-baris__gbr,.pd-baris__panah{align-self:center}
}

/* Latar sorotan. Baris ikut menyala saat isinya menerima fokus
   papan ketik, bukan cuma saat disorot tetikus. */
.pd-baris:hover,.pd-baris:focus-within{background:var(--paper)}

/* Aturan kemunculan di bagian 8 memakai properti transition
   bentuk ringkas, jadi ia menimpa transisi latar di atas dan
   perpindahan warnanya jadi mendadak. Di sini keduanya ditulis
   ulang berdampingan: opacity tetap memakai jeda berurutannya,
   latar tidak ikut ditunda. */
.is-in .pd-baris[data-anim]{
  transition:opacity 1.15s var(--ease-pudar),background-color .45s var(--ease);
  transition-delay:calc(var(--i,0) * 120ms),0s;
}

/* Garis pemisah ditaruh di pseudo-elemen, bukan di border bawah,
   supaya tetap lurus dan sejajar .wrap walau kotak barisnya
   melebar dan bersudut lengkung saat disorot. */
.pd-baris::after{content:"";position:absolute;bottom:0;height:1px;
  left:var(--pd-sisip);right:var(--pd-sisip);background:var(--line)}

/* Teks bergeser masuk saat baris disorot. Memakai transform, bukan
   padding, supaya barisnya tidak ditata ulang dan kalimatnya tidak
   ikut berpindah baris di tengah gerakan. */
.pd-baris__tx{grid-area:tx;min-width:0;transition:transform .5s var(--ease)}
@media(min-width:860px){
  .pd-baris:hover .pd-baris__tx,
  .pd-baris:focus-within .pd-baris__tx{transform:translateX(1.15rem)}
}
.pd-baris__tx h2{margin:var(--s-2) 0 .55rem;max-width:26ch;
  font-size:clamp(1.35rem,2.9vw,2.05rem);letter-spacing:-.035em;line-height:1.14}
.pd-baris__tx h2 a{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
/* Seluruh baris ikut bisa diklik lewat lapisan tak terlihat ini,
   sementara yang dibacakan pembaca layar tetap judulnya saja,
   bukan seluruh isi baris. */
.pd-baris__tx h2 a::after{content:"";position:absolute;inset:0}
.pd-baris__tx>p{margin:0;max-width:58ch;
  font-size:.93rem;line-height:1.62;color:var(--ink-soft)}

.pd-baris__meta{list-style:none;margin:var(--s-2) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.3rem .75rem;
  font-size:.76rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.pd-baris__meta li{display:flex;align-items:center;gap:.45rem}
.pd-baris__meta li+li::before{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--line-2);flex:none}

/* Tautan kedua ke tulisan yang sama, disembunyikan dari pembaca
   layar dan dari urutan tab supaya gambarnya ikut bisa diklik
   tanpa menambah tautan kembar. */
/* 16/10 dipakai supaya tinggi gambar mendekati tinggi blok teks di
   sebelahnya. Dengan 4/3 gambarnya jadi lebih jangkung daripada
   teksnya dan barisnya ikut memanjang tanpa isi. */
.pd-baris__gbr{grid-area:gbr;display:block;overflow:hidden;border-radius:var(--r-lg);
  aspect-ratio:16/10;background:var(--paper-2)}
.pd-baris__gbr img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .75s var(--ease)}

.pd-baris__panah{grid-area:panah;display:none;width:44px;height:44px;
  border:1px solid var(--line);border-radius:50%;place-items:center;color:var(--navy);
  transition:background-color .4s var(--ease),border-color .4s var(--ease),
    color .4s var(--ease),transform .5s var(--ease)}
@media(min-width:860px){.pd-baris__panah{display:grid}}
.pd-baris__panah svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Sorotan. Yang bergerak cuma transform dan warna, tidak ada
   properti yang memicu tata ulang halaman. */
.pd-baris:hover .pd-baris__tx h2 a{color:var(--merah)}
.pd-baris:hover .pd-baris__gbr img{transform:scale(1.06)}
.pd-baris:hover .pd-baris__panah,
.pd-baris:focus-within .pd-baris__panah{
  background:var(--merah);border-color:var(--merah);color:#fff}
.pd-baris:hover .pd-baris__panah{transform:translateX(4px)}

@media(prefers-reduced-motion:reduce){
  .pd-baris,.pd-baris__tx,.pd-baris__gbr img,.pd-baris__panah{transition:none}
  .pd-baris:hover .pd-baris__gbr img{transform:none}
  .pd-baris:hover .pd-baris__panah{transform:none}
  .pd-baris:hover .pd-baris__tx,.pd-baris:focus-within .pd-baris__tx{transform:none}
}

/* ── 20. Halaman artikel tunggal ────────────────────────────
   Berbeda dari halaman panduan pilar. Yang itu dokumen rujukan:
   judul di bidang datar, daftar isi menetap, tanpa jalan keluar
   selain reservasi. Yang ini tulisan berkala, jadi bentuknya
   mengikuti kebiasaan orang membaca artikel: gambar dan judul
   menyatu di kepala, sisi kanan berisi kategori dan tulisan
   terbaru, dan di bawahnya ada bacaan lain supaya pembacanya
   tidak berhenti di satu halaman. */

/* Kepala. Gambar mengisi seluruh bidang, judulnya duduk di
   atasnya, dan gelapnya diatur dua lapis gradasi supaya teks
   putih tetap terbaca berapa pun terangnya foto. */
.ar-hero{position:relative;isolation:isolate;overflow:hidden;
  display:grid;align-items:end;color:#fff;background:var(--navy);
  min-height:clamp(320px,50vh,500px);
  padding-block:clamp(2.5rem,6vw,4.5rem)}
.ar-hero__gbr{position:absolute;inset:0;z-index:-2}
.ar-hero__gbr img{width:100%;height:100%;object-fit:cover;display:block}
.ar-hero__redup{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,14,24,.58) 0%,rgba(4,14,24,.12) 32%,rgba(4,14,24,.88) 100%),
    linear-gradient(90deg,rgba(4,14,24,.52) 0%,rgba(4,14,24,0) 64%)}

.ar-hero h1{color:#fff;margin:var(--s-2) 0 0;max-width:20ch;
  font-size:clamp(1.9rem,4.4vw,3.1rem);letter-spacing:-.038em;line-height:1.08}
.ar-hero .pd-lencana{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);color:#fff}
.ar-hero .art-remah{margin-bottom:var(--s-3);color:rgba(255,255,255,.66)}
.ar-hero .art-remah a{color:rgba(255,255,255,.66)}
.ar-hero .art-remah a:hover{color:#fff}
.ar-hero .art-remah span[aria-hidden]{color:rgba(255,255,255,.38)}
.ar-hero .art-remah [aria-current]{color:#fff}
.ar-hero .art-meta{color:rgba(255,255,255,.74)}
.ar-hero .art-meta svg{color:#fff}

/* Badan tulisan dan sisi kanan */
.ar-tata{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:960px){
  .ar-tata{grid-template-columns:minmax(0,1fr) clamp(260px,26%,320px);
    gap:clamp(2.5rem,5vw,4.5rem)}
  .ar-samping{position:sticky;top:7rem;align-self:start}
}

.ar-kotak+.ar-kotak{margin-top:var(--s-4)}
.ar-kotak__judul{margin-bottom:var(--s-2);padding-bottom:.6rem;
  border-bottom:1px solid var(--line);
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft)}

/* Daftar isi artikel. Bahasa rupanya sengaja disamakan dengan
   daftar isi halaman dokumen: nomor dua digit di depan, judul
   bergeser masuk saat disorot. Ditulis terpisah karena yang di
   halaman dokumen membawa aturan menempel dan tinggi maksimum
   sendiri, sedangkan di sini yang menempel kolomnya. */
.ar-isi{list-style:none;margin:0;padding:0;counter-reset:ai}
.ar-isi li{counter-increment:ai}
.ar-isi a{display:flex;gap:.6rem;align-items:baseline;padding:.4rem 0;
  font-size:.86rem;line-height:1.4;color:var(--ink-soft);text-decoration:none;
  transition:color .18s var(--ease),transform .18s var(--ease)}
.ar-isi a::before{content:counter(ai,decimal-leading-zero);
  font-size:.66rem;font-weight:700;color:var(--line-2);
  font-variant-numeric:tabular-nums;transition:color .18s var(--ease)}
.ar-isi a:hover{color:var(--merah);transform:translateX(3px)}
.ar-isi a:hover::before{color:var(--merah)}

.ar-kat{list-style:none;margin:0;padding:0}
.ar-kat a{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  padding:.5rem 0;border-bottom:1px solid var(--line);
  font-size:.9rem;text-decoration:none;color:var(--navy);
  transition:color .22s var(--ease)}
.ar-kat a:hover{color:var(--merah)}
.ar-kat b{font-size:.72rem;font-weight:700;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;transition:color .22s var(--ease)}
.ar-kat a:hover b{color:var(--merah)}

.ar-baru{list-style:none;margin:0;padding:0}
.ar-baru li+li{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--line)}
.ar-baru a{display:grid;grid-template-columns:70px minmax(0,1fr);gap:.75rem;
  align-items:start;text-decoration:none;color:inherit}
.ar-baru__gbr{overflow:hidden;border-radius:6px;aspect-ratio:1/1;background:var(--paper-2)}
.ar-baru__gbr img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.ar-baru a:hover .ar-baru__gbr img{transform:scale(1.07)}
.ar-baru b{display:block;font-size:.85rem;line-height:1.3;transition:color .22s var(--ease)}
.ar-baru a:hover b{color:var(--merah)}
.ar-baru span{display:block;margin-top:.3rem;font-size:.72rem;color:var(--ink-soft);
  font-variant-numeric:tabular-nums}

/* Bacaan lain di kaki halaman */
.ar-lain{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media(min-width:700px){.ar-lain{grid-template-columns:repeat(3,1fr);gap:var(--s-4)}}
.ar-lain article{position:relative}
.ar-lain__gbr{overflow:hidden;border-radius:var(--r-lg);aspect-ratio:16/10;
  background:var(--paper-2)}
.ar-lain__gbr img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.ar-lain article:hover .ar-lain__gbr img{transform:scale(1.06)}
.ar-lain h3{margin:var(--s-2) 0 .35rem;max-width:24ch;font-size:1.02rem;line-height:1.28}
.ar-lain h3 a{text-decoration:none;color:inherit;transition:color .25s var(--ease)}
.ar-lain h3 a::after{content:"";position:absolute;inset:0}
.ar-lain article:hover h3 a{color:var(--merah)}
.ar-lain p{margin:0;font-size:.82rem;color:var(--ink-soft);max-width:32ch}
.ar-lain .pd-lencana{margin-top:var(--s-2)}

@media(prefers-reduced-motion:reduce){
  .ar-baru__gbr img,.ar-lain__gbr img{transition:none}
  .ar-baru a:hover .ar-baru__gbr img,.ar-lain article:hover .ar-lain__gbr img{transform:none}
}