/* ---------------------------------------------------------------
   PALET — hijau utama #1a633c
   Kontras terhadap putih 7,26:1 (sebelumnya 5,34:1), jadi teks hijau
   di atas putih maupun teks putih di atas hijau sama-sama lega.
   Turunan gelapnya dipakai untuk hover dan bidang pekat; dua warna
   terang di bawahnya untuk latar lembut.
   ---------------------------------------------------------------- */
/* balikpapan.top — design system (v2) */
:root{
  --bg:#FFFFFF; --paper:#F5F8F5; --paper-2:#EEF4EF;
  --abu-foto:#EDEEED; --abu-logo:#9AA09C; /* gambar bawaan (.nofoto), sama dengan ../bangun-gambar-bawaan.py */
  --ink:#15201B; --ink-2:#41504A; --muted:#6E7C76;
  --line:#E7EBE6; --line-strong:#D7DDD6;
  --green:#1a633c; --green-deep:#14502F; --green-800:#0F3E24; --green-900:#0A2B19;
  --green-soft:#E6F0EA; --green-tint:#F1F7F3; --green-ikon:#3a683b;
  --amber:#B8860B; --danger:#B3261E;
  /* Aksen komersial. Hijau dipakai untuk lapisan editorial (panduan, direktori,
     verifikasi); jingga dipakai HANYA untuk yang berbayar — pasang artikel,
     klaim listing, label Artikel Partner. Jadi pembaca bisa membedakan mana
     isi redaksi dan mana penawaran, tanpa perlu membaca.
     --orange     : isian & aksen  (kontras 3,7:1 — untuk elemen UI, bukan teks kecil)
     --orange-deep: teks & tombol  (kontras 4,9:1 ✓ WCAG AA) */
  --orange:#EA580C; --orange-deep:#C2410C; --orange-light:#FFB27A;
  /* Pasangan warna tombol. Kuning dipakai sebagai warna teks saat tombol
     berlatar pekat disentuh — hanya di sana, karena kuning di atas putih
     cuma 1,36:1 dan tidak terbaca. */
  --tbl-hijau:#32623e; --tbl-kuning:#f7de3f; --tbl-kuning-tua:#eecf0a;
  --orange-soft:#FFF2E8; --orange-line:#F6DCC7;
  --serif:'Google Sans Flex',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; /* satu font untuk seluruh situs */
  --sans:'Google Sans Flex','Public Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --round:0;   /* kebulatan huruf: 0 = normal, 100 = paling membulat (ala Gotham Rounded) */
  --maxw:1200px; --r:16px;
  --luwes:cubic-bezier(.22,1,.36,1);
  --shadow:0 1px 2px rgba(21,32,27,.04),0 10px 30px rgba(21,32,27,.05);
  --shadow-lift:0 4px 10px rgba(21,32,27,.06),0 22px 48px rgba(10,43,25,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;
  line-height:1.65;-webkit-font-smoothing:antialiased;
  font-variation-settings:'ROND' var(--round)}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:700;line-height:1.12;
  letter-spacing:-.01em;text-wrap:balance}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.wrap-narrow{max-width:920px;margin:0 auto;padding:0 26px}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

/* Tanpa garis pendek di depannya. Kickernya berdiri sendiri — huruf kapital
   kecil ber-letterspacing sudah cukup menandai perannya. */
.eyebrow{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);display:inline-block}
.eyebrow.jual{color:var(--orange-deep)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);
  font-weight:600;font-size:14.5px;line-height:1;padding:13px 20px;border-radius:999px;cursor:pointer;
  border:1.5px solid transparent;white-space:nowrap;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-deep);color:var(--tbl-kuning);transform:translateY(-2px)}
.btn-outline{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.btn-outline:hover{border-color:var(--green);color:var(--green)}
.btn-accent{background:var(--orange-deep);color:#fff}
.btn-accent:hover{background:#9A3412;color:var(--tbl-kuning);transform:translateY(-2px)}
.btn-sm{padding:10px 15px;font-size:13.5px}

/* Tombol dengan lingkaran ikon yang berpindah sisi.
   Diam  : teks di kiri, lingkaran menempel di kanan.
   Sentuh: bantalan kiri-kanan bertukar, lingkaran meluncur ke kiri sambil
           berputar 45°, sehingga panahnya berdiri tegak.
   Semua dengan satu transisi 500ms, tanpa JavaScript. */
.btn-ikon{position:relative;display:inline-flex;align-items:center;overflow:hidden;
  height:48px;padding:0 56px 0 24px;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:14.5px;line-height:1;
  border:1.5px solid transparent;white-space:nowrap;
  transition:padding .5s var(--luwes),background .3s ease,color .3s ease,border-color .3s ease}
.btn-ikon:hover{padding:0 24px 0 56px}
.btn-ikon > span:first-child{position:relative;z-index:1}
.btn-ikon .lingkar{position:absolute;right:4px;top:50%;width:40px;height:40px;margin-top:-20px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:right .5s var(--luwes),transform .5s var(--luwes)}
.btn-ikon:hover .lingkar{right:calc(100% - 44px);transform:rotate(360deg)}
  /* Ikon versi terisi (FILL 1), bukan garis luar. Warnanya hijau utama,
     di atas lingkaran putih, sama untuk kedua tombol. */
.btn-ikon .lingkar .mi{font-size:21px;font-variation-settings:'FILL' 1}
.btn-ikon:focus-visible{outline:3px solid rgba(255,255,255,.75);outline-offset:3px}

/* Dua tombol memakai warna yang sama persis, dan warnanya bertukar saat
   disentuh: permukaan hijau → kuning, teks & lingkaran putih → hijau.
   Ikon selalu seragam dengan permukaan tombolnya. Tanpa bingkai. */
.btn-ikon{background:var(--tbl-hijau);color:#fff;border-color:transparent}
.btn-ikon .lingkar{background:#fff;color:var(--tbl-hijau)}
.btn-ikon:hover{background:var(--tbl-kuning);color:var(--tbl-hijau);border-color:transparent}
.btn-ikon:hover .lingkar{background:var(--tbl-hijau);color:var(--tbl-kuning)}

@media(prefers-reduced-motion:reduce){
  .btn-ikon,.btn-ikon .lingkar{transition:none}
  .btn-ikon:hover{padding:0 56px 0 24px}
  .btn-ikon:hover .lingkar{right:4px;transform:none}
}

.btn:focus-visible{outline:3px solid rgba(26,99,60,.38);outline-offset:2px}

/* ---------- Header ---------- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.4) blur(12px)}
.nav .row{display:grid;grid-template-columns:1fr minmax(0,640px) 1fr;align-items:center;gap:20px;height:78px}
.brand{font-family:var(--sans);font-weight:800;font-size:21px;letter-spacing:-.03em;white-space:nowrap;
  flex:none;justify-self:start}
.brand .tld{color:var(--green)}

/* search bar di header */
.navsearch{width:100%;min-width:0;max-width:640px;justify-self:center;display:flex;align-items:center;gap:10px;
  background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:5px 6px 5px 16px;
  transition:background .18s,border-color .18s,box-shadow .18s}
.navsearch:focus-within{background:#fff;border-color:var(--green);box-shadow:0 0 0 4px rgba(26,99,60,.12)}
.navsearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--sans);font-size:15px;color:var(--ink);padding:6px 0}
.navsearch input::placeholder{color:var(--muted)}
.navsearch input::-webkit-search-cancel-button,
.navsearch input::-webkit-search-decoration{-webkit-appearance:none}
.navsearch .mi{flex:none}
.navsearch button{flex:none}

.nav-right{display:flex;align-items:center;gap:10px;flex:none;justify-self:end}

/* baris kategori — pita hijau di bawah baris pencarian.
   Putih penuh di atas --green = 5,34:1; putih 92% = 4,78:1. Keduanya lolos AA,
   jadi hierarki dibuat lewat opasitas dan ukuran, bukan warna yang lebih redup —
   apa pun yang lebih pucat dari 92% sudah jatuh di bawah ambang. */
.navcats{background:var(--green)}
.catrow{display:flex;align-items:center;justify-content:space-between;gap:20px;height:44px}
nav.links{display:flex;align-items:center;gap:24px;min-width:0}
nav.links a{font-size:14px;font-weight:500;color:rgba(255,255,255,.92);padding:11px 0;
  position:relative;white-space:nowrap;transition:color .18s}
nav.links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:#fff;
  transition:width .2s,background .2s}
nav.links a[aria-current]{color:#fff}
nav.links a:hover::after,nav.links a[aria-current]::after{width:100%}
/* Saat disentuh, teks dan garisnya jadi kuning merek — 5,35:1 di atas pita
   hijau, jadi tetap terbaca. */
nav.links a:hover{color:var(--tbl-kuning)}
nav.links a:hover::after{background:var(--tbl-kuning)}
/* Halaman yang sedang dibuka: garis jingga dan sedikit lebih tebal, supaya
   "sedang di sini" beda dari sekadar "kursor lewat". Jingga tua (#EA580C)
   di atas hijau cuma 1,5:1 — tidak kelihatan. --orange-light 3,03:1, lolos
   ambang elemen UI. */
nav.links a[aria-current]{font-weight:600}
nav.links a[aria-current]::after{height:3px;background:var(--orange-light)}
/* Menyentuh halaman yang sedang dibuka tetap memberi umpan balik kuning. */
nav.links a[aria-current]:hover{color:var(--tbl-kuning)}
nav.links a[aria-current]:hover::after{background:var(--tbl-kuning)}
nav.links a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}
nav.links-sec a{font-size:13.5px}

/* tombol menu (tablet & mobile) */
.navtoggle{display:none;width:42px;height:42px;flex:none;align-items:center;justify-content:center;
  background:#fff;border:1.5px solid var(--line-strong);border-radius:12px;cursor:pointer;padding:0}
.navtoggle:hover{border-color:var(--green)}
.navtoggle:focus-visible{outline:3px solid rgba(26,99,60,.38);outline-offset:2px}
.navtoggle .bars,.navtoggle .bars::before,.navtoggle .bars::after{
  display:block;width:17px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.navtoggle .bars{position:relative}
.navtoggle .bars::before,.navtoggle .bars::after{content:"";position:absolute;left:0}
.navtoggle .bars::before{top:-5.5px}
.navtoggle .bars::after{top:5.5px}
.navtoggle[aria-expanded="true"] .bars{background:transparent}
.navtoggle[aria-expanded="true"] .bars::before{transform:translateY(5.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .bars::after{transform:translateY(-5.5px) rotate(-45deg)}

/* panel menu */
.navmenu{border-top:1px solid var(--line);background:#fff;
  max-height:calc(100vh - 120px);overflow-y:auto}
.navmenu[hidden]{display:none}
.navmenu .mgroup{padding:16px 0 4px}
.navmenu .mt{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.navmenu .mlinks{display:grid;grid-template-columns:repeat(2,1fr);gap:0 22px}
.navmenu .mlinks a{display:block;padding:11px 2px;font-size:15px;font-weight:500;color:var(--ink-2);
  border-bottom:1px solid var(--line)}
.navmenu .mlinks a:hover,.navmenu .mlinks a[aria-current]{color:var(--green)}
.navmenu .mcta{padding:18px 0 22px}
.navmenu .mcta .btn{width:100%}

@media(max-width:1024px){
  .navtoggle{display:inline-flex}
  .nav-cta{display:none}
  nav.links-sec{display:none}
  .catrow{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .catrow::-webkit-scrollbar{display:none}
  .navcats .wrap{padding-right:14px}
}
@media(max-width:700px){
  /* Pita hijau disembunyikan di layar kecil, jadi tepi bawah header
     dikembalikan supaya tetap terpisah dari isi halaman. */
  header.nav{border-bottom:1px solid var(--line)}
  .nav .row{display:flex;flex-wrap:wrap;height:auto;padding:10px 26px 12px;gap:12px}
  .brand{margin-right:auto}
  .navsearch{order:3;flex-basis:100%;max-width:none}
  .navcats{display:none}
  .navmenu .mlinks{grid-template-columns:1fr}
}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:13px;color:var(--muted);padding:22px 0 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumb a:hover{color:var(--green)}
.crumb .sep{opacity:.5}
.crumb [aria-current]{color:var(--ink-2);font-weight:600}

/* ---------- Badges / chips ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green-deep);background:var(--green-soft);padding:6px 11px;border-radius:999px}
.tag.neutral{background:var(--paper-2);color:var(--ink-2)}
.tag.warn{background:#FDF3E3;color:#8A5B08}
.chip{font-size:13.5px;font-weight:500;color:var(--ink-2);background:#fff;border:1.5px solid var(--line-strong);
  padding:9px 15px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;transition:.15s;cursor:pointer}
.chip:hover{border-color:var(--green);color:var(--green)}
.chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.chip svg{width:14px;height:14px}
.verif{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--green-deep)}
.verif svg{width:16px;height:16px;fill:var(--green)}
.dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong);display:inline-block}

/* ---------- Article ---------- */
/* Pita kemajuan baca — garis tipis di puncak layar. Diletakkan di atas
   pita header, bukan di bawahnya, supaya posisinya tetap benar walau
   tinggi header berubah di layar sempit. */
.progres{position:fixed;left:0;right:0;top:0;height:3px;z-index:90;pointer-events:none}
.progres i{display:block;height:100%;width:0;background:var(--tbl-kuning);
  border-radius:0 3px 3px 0;transition:width .08s linear}
@media(prefers-reduced-motion:reduce){.progres i{transition:none}}

.art-head{padding:22px 0 0}
.art-tanda{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:20px}
.art-head h1{font-size:clamp(30px,4.4vw,50px);letter-spacing:-.022em;margin:16px 0 0;max-width:22ch}
.art-head .lede{font-size:19.5px;line-height:1.6;color:var(--ink-2);margin:18px 0 0;max-width:60ch}

/* Baris penulis dibuat dua tingkat: nama di atas, tanggal & lama baca di
   bawahnya. Sebelumnya semuanya satu baris dipisah titik — di layar sempit
   dia melipat jadi tiga baris berantakan. */
.byline{display:flex;align-items:center;gap:14px;margin-top:26px;padding:16px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.avatar{width:40px;height:40px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 28%,#2FB47C,var(--green) 55%,var(--green-800))}
.byline b{color:var(--ink);font-weight:700}
.byline .bl-teks{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;font-size:14px}
.byline .bl-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px}
.byline .bl-bagikan{flex:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-2);
  background:#fff;border:1.5px solid var(--line-strong);border-radius:999px;padding:9px 16px;
  transition:border-color .18s ease,color .18s ease}
.byline .bl-bagikan .mi{font-size:17px}
.byline .bl-bagikan:hover{border-color:var(--green);color:var(--green)}
@media(max-width:560px){.byline .bl-bagikan span:not(.mi){display:none}
  .byline .bl-bagikan{padding:9px 11px}}

/* Foto utama artikel. Rasio 16:9 supaya sebaris iramanya dengan kartu
   panduan di beranda; lebarnya mengikuti kolom teks, bukan mentok layar,
   supaya matanya tidak perlu melompat jauh saat masuk ke tulisan. */
.art-utama{margin:30px auto 0;padding:0 26px}
/* height:auto wajib: atribut height di HTML dipakai browser sebagai
   petunjuk ukuran, dan tanpa ini dia mengalahkan aspect-ratio — fotonya
   jadi setinggi angka di atribut, bukan 16:9. */
.art-utama img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:18px;background:var(--paper-2)}
.art-utama figcaption{margin-top:11px;font-size:12.5px;color:var(--muted);line-height:1.55}
@media(max-width:600px){.art-utama img{border-radius:14px}}

.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;padding:36px 0 20px;align-items:start}
/* minmax(0,1fr), bukan 1fr: tabel di dalam artikel punya min-width 600px,
   dan dengan 1fr lebar minimum isinya bisa mendorong kolomnya melebihi
   layar — halaman jadi bisa digulir ke samping di ponsel. */
@media(max-width:960px){.art-grid{grid-template-columns:minmax(0,1fr);gap:28px}}
/* Ukuran & jarak baca. 17,5px dengan tinggi baris 1,78 — lebih longgar
   daripada teks antarmuka, karena ini bacaan panjang, bukan label. Jarak
   antar-paragraf ikut naik supaya mata punya tempat beristirahat. */
.prose{min-width:0;max-width:68ch;font-size:17.5px;line-height:1.78;color:var(--ink-2)}
.prose>*+*{margin-top:24px}
/* 96px = tinggi pita header + sedikit napas, supaya judul yang dituju
   tidak tersembunyi di balik header saat tautan daftar isi ditekan. */
.prose h2{font-size:28px;line-height:1.2;color:var(--ink);margin-top:52px;scroll-margin-top:96px;
  padding-top:4px}
.prose h3{font-size:21px;color:var(--ink);margin-top:30px;font-family:var(--sans);font-weight:700;letter-spacing:-.01em}
.prose p{margin:0}
.prose strong{color:var(--ink);font-weight:700}
.prose a:not(.btn){color:var(--green-deep);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(26,99,60,.38)}
.prose a:not(.btn):hover{text-decoration-color:var(--green)}
.prose ul,.prose ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.prose li::marker{color:var(--green)}

/* answer box (AEO) */
.answer{background:var(--green-tint);border:1px solid var(--green-soft);border-left:4px solid var(--green);
  border-radius:12px;padding:22px 24px}
.answer h2{margin:0 0 12px;font-size:19px;font-family:var(--sans);font-weight:800;color:var(--green-900);
  letter-spacing:.01em}
.answer ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15.5px;color:var(--ink-2)}
.answer li::marker{color:var(--green)}

/* notice */
.notice{display:flex;gap:12px;background:#FDF6E9;border:1px solid #F0E0BE;border-radius:12px;padding:16px 18px;
  font-size:14.5px;color:#6B4E12}
.notice svg{width:19px;height:19px;flex:none;stroke:#B8860B;fill:none;stroke-width:2;margin-top:2px}
.notice b{color:#5A400C}

/* table */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table.data{border-collapse:collapse;width:100%;font-size:14.5px;min-width:600px;background:#fff}
table.data th,table.data td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{background:var(--paper);font-family:var(--sans);font-weight:700;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
table.data tr:last-child td{border-bottom:0}
table.data td b{color:var(--ink)}

/* place card embedded in article */
.placecard{display:flex;gap:16px;border:1px solid var(--line);border-radius:14px;padding:18px;
  background:#fff;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.placecard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line-strong)}
.placecard .ini{width:54px;height:54px;flex:none;border-radius:13px;color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-size:22px;font-weight:600;
  background:linear-gradient(140deg,#13A06E,var(--green-deep))}
.placecard .pc-body{flex:1;min-width:0}
/* Keduanya <span>, jadi harus dijadikan blok — kalau tidak, nama dan
   keterangannya menyambung jadi satu baris dan margin-top-nya diabaikan. */
.placecard .pc-name{display:block;font-family:var(--sans);font-weight:800;font-size:16.5px;
  color:var(--ink);line-height:1.3}
.placecard .pc-meta{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.placecard .pc-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* TOC */
aside.toc{position:sticky;top:96px;font-size:14px;max-height:calc(100vh - 120px);overflow-y:auto}
aside.toc .t{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
aside.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
  border-left:2px solid var(--line)}
aside.toc a{display:block;padding:7px 0 7px 16px;color:var(--ink-2);margin-left:-2px;
  border-left:2px solid transparent;transition:.15s}
aside.toc a:hover{color:var(--green);border-left-color:var(--green)}
/* Bagian yang sedang dibaca ditandai. Tanpa ini daftar isinya cuma daftar
   tautan; dengan ini dia jadi penunjuk posisi di dalam artikel panjang. */
aside.toc a[aria-current="true"]{color:var(--green-deep);font-weight:700;
  border-left-color:var(--green);background:var(--green-tint)}
@media(max-width:960px){
  aside.toc{position:static;max-height:none;overflow:visible;
    border:1px solid var(--line);border-radius:12px;padding:18px}
}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.faq summary{cursor:pointer;padding:17px 20px;font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--green);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .ans{padding:16px 20px 20px;font-size:15.5px;color:var(--ink-2)}

/* author box */
.authorbox{display:flex;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px}
.authorbox .avatar{width:56px;height:56px}
.authorbox .an{font-family:var(--sans);font-weight:800;font-size:16px}
.authorbox p{margin:6px 0 0;font-size:14.5px;color:var(--muted)}

/* sources */
.sources{font-size:14px;color:var(--muted)}
.sources ol{padding-left:20px;display:flex;flex-direction:column;gap:7px;margin:10px 0 0}
.sources a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}

/* ---------- Halaman artikel: rel isi lengket ----------
 Daftar isi di KIRI dan ikut menggulir, bukan rel tipis di kanan yang
 nyaris tak terlihat dan di ponsel terlempar ke bawah artikel. Fotonya
 jadi sampul selebar layar dengan judul di atasnya, jadi kepala halaman
 tidak memakan tinggi dua kali. Badan tulisannya memakai dua tingkat
 lebar: teks dikunci 66ch supaya nyaman dibaca, sedangkan tabel, gambar,
 dan kartu melebar penuh — itu yang memberi halaman iramanya.
 Tata letak sebelumnya: arsip/artikel-2026-09-07.html */
@media(min-width:981px){ .rl2-rel{top:132px} }

/* ---- sampul ---- */
.rl2-sampul{position:relative;min-height:clamp(340px,40vw,460px);display:flex;align-items:flex-end;
  background:var(--green-900) center 40%/cover no-repeat}
.rl2-sampul::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,26,17,.55) 0%,rgba(8,26,17,.3) 38%,rgba(8,26,17,.9) 100%)}
.rl2-sampul .wrap{position:relative;z-index:1;padding-top:30px;padding-bottom:38px;width:100%}
.rl2-crumb{font-size:13px;color:rgba(255,255,255,.72);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rl2-crumb a{color:rgba(255,255,255,.72)}
.rl2-crumb a:hover{color:#fff}
.rl2-crumb .sep{opacity:.5}
.rl2-crumb [aria-current]{color:#fff;font-weight:600}
.rl2-tanda{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:24px}
.rl2-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.rl2-sampul h1{color:#fff;font-size:clamp(29px,4.2vw,48px);letter-spacing:-.024em;margin-top:16px;
  max-width:20ch;line-height:1.1}
.rl2-sampul .lede{color:rgba(255,255,255,.85);font-size:17.5px;line-height:1.6;margin:14px 0 0;max-width:56ch}
.rl2-kredit{margin:14px 0 0;font-size:12px;color:rgba(255,255,255,.55)}

/* ---- dua kolom: rel kiri, tulisan kanan ---- */
.rl2-bungkus{display:grid;grid-template-columns:262px minmax(0,1fr);gap:56px;
  align-items:start;padding-top:34px}
@media(max-width:980px){.rl2-bungkus{grid-template-columns:minmax(0,1fr);gap:26px}}
.rl2-rel{position:sticky;max-height:calc(100vh - 160px);overflow-y:auto;
  scrollbar-width:thin;padding-right:8px;margin-right:-8px}
@media(max-width:980px){.rl2-rel{position:static;max-height:none;overflow:visible;padding-right:0;margin-right:0}}

.rl2-jdl{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}
/* Di ponsel judul lipatannya sudah berbunyi "Daftar isi"; label ini
   akan mengulanginya persis di bawahnya, jadi disembunyikan di sana. */
@media(max-width:980px){.rl2-jdl{display:none}}
.rl2-daftar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  border-left:2px solid var(--line);counter-reset:s}
.rl2-daftar a{display:block;padding:9px 0 9px 16px;margin-left:-2px;font-size:14px;color:var(--ink-2);
  border-left:2px solid transparent;line-height:1.4;transition:.15s}
.rl2-daftar a:hover{color:var(--green);border-left-color:var(--green)}
.rl2-daftar a[aria-current="true"]{color:var(--green-deep);font-weight:700;
  border-left-color:var(--green);background:var(--green-tint)}

.rl2-alat{display:flex;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.rl2-alat button,.rl2-alat a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-2);background:#fff;
  border:1.5px solid var(--line-strong);border-radius:999px;padding:9px 10px;transition:.18s}
.rl2-alat button:hover,.rl2-alat a:hover{border-color:var(--green);color:var(--green)}
.rl2-alat .mi{font-size:17px}

/* Di ponsel rel jadi lipatan di ATAS artikel — bukan sisa di bawahnya. */
.rl2-lipat{display:contents}
@media(max-width:980px){
  .rl2-lipat{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .rl2-lipat > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
    padding:14px 16px;font-family:var(--sans);font-weight:700;font-size:14.5px}
  .rl2-lipat > summary::-webkit-details-marker{display:none}
  .rl2-lipat > summary .mi{font-size:20px;color:var(--green-ikon)}
  .rl2-lipat > summary .buka{margin-left:auto;color:var(--muted);transition:transform .25s var(--luwes)}
  .rl2-lipat[open] > summary .buka{transform:rotate(180deg)}
  .rl2-lipat .dalam{padding:4px 16px 16px;border-top:1px solid var(--line)}
  .rl2-jdl{margin-top:14px}
}
@media(min-width:981px){ .rl2-lipat > summary{display:none} }

/* ---- badan tulisan ----
   Sebelum dirombak: 10 kotak berbingkai, 0 gambar, semuanya satu lebar.
   Itu tampilan mesin pengelola konten, bukan tampilan tulisan. Tiga hal
   yang diubah: (1) kotak dikurangi, sebagian besar diganti perlakuan
   tipografi; (2) lebar dibuat dua tingkat — teks sempit untuk dibaca,
   tabel & gambar melebar; (3) bagian diberi nomor supaya strukturnya
   terlihat tanpa harus dibaca. */
.rl2-isi{max-width:none;font-size:17.5px;line-height:1.78;counter-reset:bab}
.rl2-isi > section{padding:0;margin-bottom:66px}
.rl2-isi > section:last-child{margin-bottom:0}
/* Dua tingkat lebar. Teks dikunci 66ch supaya nyaman dibaca; blok yang
   memang butuh ruang (tabel, gambar, kartu nomor) melebar penuh. */
.rl2-isi > section > *{max-width:66ch}
.rl2-isi > section > .rl2-lebar{max-width:none}

.rl2-bab{counter-increment:bab;display:flex;align-items:baseline;gap:15px;
  padding-top:24px;border-top:1px solid var(--line);max-width:none}
.rl2-bab::before{content:"0" counter(bab);flex:none;font-family:var(--sans);font-size:13px;
  font-weight:800;color:var(--green);letter-spacing:.04em;padding-top:7px}
.rl2-isi h2{font-size:29px;letter-spacing:-.018em;line-height:1.18;color:var(--ink);
  margin:0;scroll-margin-top:110px;max-width:28ch}
.rl2-isi h3{font-family:var(--sans);font-size:19px;font-weight:800;letter-spacing:-.01em;
  color:var(--ink);margin:36px 0 0;padding-left:15px;border-left:3px solid var(--green-soft)}
.rl2-isi p{margin:18px 0 0;color:var(--ink-2)}
.rl2-isi p.buka{font-size:19px;line-height:1.68;color:var(--ink)}
.rl2-isi .sebut{color:var(--green-deep);font-weight:600;text-decoration:none;
  border-bottom:1.5px solid var(--green-soft);transition:border-color .18s ease}
.rl2-isi .sebut:hover{border-bottom-color:var(--green)}

/* Jawaban singkat. Abu netral #f5f5f5 yang sama dengan blok di beranda,
   sudut membulat, tanpa garis warna dan tanpa ikon — bidangnya sendiri
   sudah cukup memisahkan blok ini dari tulisan di sekitarnya. */
/* Ditulis sebagai .rl2-isi > section.rl2-jawab, bukan .rl2-jawab saja:
   aturan .rl2-isi > section{padding:0} punya kekhususan lebih tinggi dan
   sempat mengalahkan padding kotak ini — isinya jadi menempel ke tepi. */
.rl2-isi > section.rl2-jawab{border:0;border-radius:18px;background:#f5f5f5;
  padding:32px 36px 34px;max-width:none}
@media(max-width:600px){.rl2-isi > section.rl2-jawab{padding:24px 22px 26px;border-radius:14px}}
/* Lebar isi diatur bantalan kotaknya sendiri, bukan batas 66ch milik
   bagian — kalau tidak, sisa kanannya jauh lebih lebar daripada kiri. */
/* Kekhususan harus mengalahkan .rl2-isi > section > * (0,1,1) dan
   .rl2-isi h2 (0,1,1) — kalau tidak, isinya tetap terpotong di 66ch
   dan judulnya di 28ch, sehingga sisa kanannya tidak sama dengan kiri. */
.rl2-isi > section.rl2-jawab > *{max-width:none}
.rl2-jawab .lbl{display:block;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep)}
.rl2-isi > section.rl2-jawab h2{font-size:21px;margin:14px 0 0;max-width:none}
.rl2-jawab ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.rl2-jawab li{display:flex;gap:11px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.rl2-jawab li .mi{font-size:18px;color:var(--green);flex:none;margin-top:3px}
.rl2-jawab li b{color:var(--ink)}

/* Catatan penting: dari kotak terisi jadi catatan bergaris. Di badan
   yang sudah penuh kotak, satu kotak terisi lagi cuma menambah bising. */
.rl2-catat{display:flex;gap:14px;margin-top:26px;padding:18px 22px;border-radius:14px;
  background:#f5f5f5;border-left:3px solid var(--amber);
  font-size:15.5px;color:var(--ink-2);line-height:1.62}
.rl2-catat .mi{font-size:20px;color:var(--amber);flex:none;margin-top:2px}
.rl2-catat b{color:var(--ink)}

/* Tabel: blok yang paling menjawab judul, jadi dia yang paling tegas —
   garis tebal di kepala, baris lega, "IGD 24 jam" jadi lencana. */
.rl2-gulir{overflow-x:auto;margin-top:26px}
.rl2-tabel{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
.rl2-tabel th{padding:0 16px 12px;text-align:left;font-family:var(--sans);font-size:11.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid var(--ink);white-space:nowrap}
.rl2-tabel td{padding:16px;border-bottom:1px solid var(--line);vertical-align:middle}
.rl2-tabel tbody tr{transition:background .15s ease}
.rl2-tabel tbody tr:hover{background:var(--green-tint)}
.rl2-tabel .nm{font-family:var(--sans);font-weight:700;color:var(--ink);font-size:15.5px}
.rl2-tabel .sub{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:400}
.rl2-tabel .jam{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  color:var(--green-deep);background:var(--green-soft);padding:5px 11px;border-radius:999px;white-space:nowrap}
.rl2-tabel .telp{font-variant-numeric:tabular-nums;white-space:nowrap}
.rl2-tabel .telp.belum{color:var(--muted);font-size:13.5px}
@media(max-width:820px){
  .rl2-tabel{min-width:600px}
  /* Kolom nama dibuat menempel. Tanpa ini, begitu tabelnya digeser ke
     samping orang kehilangan jejak sedang melihat baris rumah sakit mana. */
  .rl2-tabel th:first-child,.rl2-tabel td:first-child{position:sticky;left:0;background:#fff;
    box-shadow:1px 0 0 var(--line)}
  .rl2-tabel tbody tr:hover td:first-child{background:var(--green-tint)}
}

/* Nomor darurat: dulu baris tabel, sekarang kartu berangka besar.
   Ini dua hal paling bisa langsung dipakai di seluruh halaman —
   tidak pantas disembunyikan sebagai sel tabel. */
.rl2-nomor{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
@media(max-width:600px){.rl2-nomor{grid-template-columns:1fr}}
.rl2-nomor .kt{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:18px;
  background:var(--paper);border:1px solid var(--line)}
.rl2-nomor .kt.utama{background:var(--green);border-color:var(--green)}
.rl2-nomor .ang{font-family:var(--sans);font-weight:800;font-size:36px;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--green-deep);flex:none}
.rl2-nomor .kt.utama .ang{color:var(--tbl-kuning)}
.rl2-nomor .tx b{display:block;font-family:var(--sans);font-size:14.5px;color:var(--ink);line-height:1.3}
.rl2-nomor .kt.utama .tx b{color:#fff}
.rl2-nomor .tx span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.rl2-nomor .kt.utama .tx span{color:rgba(255,255,255,.78)}

/* Gambar di dalam tulisan — sebelumnya tidak ada sama sekali, jadi
   bacaan tujuh menit ini tanpa satu pun tempat mata beristirahat. */
.rl2-gbr{margin:34px 0 0}
.rl2-gbr img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:18px;background:var(--paper-2)}
.rl2-gbr figcaption{margin-top:11px;font-size:12.5px;color:var(--muted);line-height:1.55;max-width:62ch}

/* Daftar bernomor: angkanya tipografis, bukan lencana bulat. Lencana
   akan berebut perhatian dengan nomor bagian (01, 02, ...) yang sudah
   jadi penanda struktur halaman ini. */
.rl2-isi ol.tips{margin:22px 0 0;padding-left:0;list-style:none;counter-reset:t;
  display:flex;flex-direction:column;gap:18px}
.rl2-isi ol.tips li{counter-increment:t;position:relative;padding-left:38px;
  font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.rl2-isi ol.tips li::before{content:counter(t);position:absolute;left:0;top:0;
  font-family:var(--sans);font-weight:800;font-size:17px;color:var(--green);
  font-variant-numeric:tabular-nums}
.rl2-isi ol.tips b{color:var(--ink)}

/* Kutipan sorot: pemecah dinding teks, sekaligus menaruh satu kalimat
   paling berguna di tempat yang tidak bisa dilewati mata. */
.rl2-sorot{margin:38px 0 0;padding-left:24px;border-left:4px solid var(--tbl-kuning);
  font-family:var(--sans);font-size:22px;font-weight:700;line-height:1.42;
  letter-spacing:-.015em;color:var(--ink)}
@media(max-width:600px){.rl2-sorot{font-size:19px;padding-left:18px}}
.rl2-sorot cite{display:block;margin-top:11px;font-size:13px;font-weight:600;
  font-style:normal;color:var(--muted);letter-spacing:0}

/* Kartu tempat jadi baris tenang: tanpa bayangan, tanpa tombol. Di
   tengah bacaan, kartu berbayang terbaca seperti iklan sisipan. */
.rl2-tempat{margin-top:26px;border-top:1px solid var(--line)}
.rl2-tempat a{display:flex;align-items:center;gap:16px;padding:17px 0;
  border-bottom:1px solid var(--line);color:inherit;transition:padding-left .2s var(--luwes)}
.rl2-tempat a:hover{padding-left:8px}
.rl2-tempat .ini{width:46px;height:46px;flex:none;border-radius:13px;background:var(--green-soft);
  color:var(--green-deep);display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:800;font-size:17px;transition:.2s}
.rl2-tempat a:hover .ini{background:var(--green);color:#fff}
.rl2-tempat .tx{min-width:0;flex:1}
.rl2-tempat .nm{display:block;font-family:var(--sans);font-weight:700;font-size:16px;
  color:var(--ink);line-height:1.3}
.rl2-tempat .mt{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.rl2-tempat .go{flex:none;color:var(--line-strong);transition:.2s}
.rl2-tempat a:hover .go{color:var(--green);transform:translateX(3px)}

/* Tanya jawab tanpa kotak — cuma garis rambut antar pertanyaan. */
.rl2-tanya{margin-top:26px;border-top:1px solid var(--line)}
.rl2-tanya details{border-bottom:1px solid var(--line)}
.rl2-tanya summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px;
  padding:21px 0;font-family:var(--sans);font-size:17px;font-weight:700;color:var(--ink);line-height:1.4}
.rl2-tanya summary::-webkit-details-marker{display:none}
.rl2-tanya summary:hover{color:var(--green-deep)}
.rl2-tanya summary .mi{margin-left:auto;flex:none;font-size:22px;color:var(--muted);
  transition:transform .25s var(--luwes)}
.rl2-tanya details[open] summary .mi{transform:rotate(180deg)}
.rl2-tanya .jwb{padding:0 40px 24px 0;font-size:16px;color:var(--ink-2);line-height:1.7}
.rl2-tanya .jwb p{margin:0}

/* Blok kepercayaan. Sumber & penulis sebelumnya jadi teks abu kecil di
   dasar halaman — padahal justru inilah yang kita jual. */
.rl2-percaya{margin-top:30px;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  max-width:none}
.rl2-percaya .atas{display:flex;gap:16px;align-items:flex-start;padding:24px;
  background:var(--green-tint);border-bottom:1px solid var(--line)}
.rl2-percaya .avatar{width:48px;height:48px}
.rl2-percaya .an{font-family:var(--sans);font-weight:800;font-size:16.5px;color:var(--ink)}
.rl2-percaya .atas p{margin:7px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.rl2-percaya .bawah{padding:22px 24px;font-size:14px;color:var(--muted);line-height:1.6}
.rl2-percaya .bawah b{color:var(--ink)}
.rl2-percaya ol{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.rl2-percaya a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}

/* ---------- Cards grid ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;
  flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:var(--line-strong)}
.card .media{position:relative;aspect-ratio:16/10}
.card .media .t{position:absolute;left:13px;top:13px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green-deep);background:#fff;padding:6px 11px;border-radius:999px;
  box-shadow:0 2px 8px rgba(21,32,27,.12)}
.card .body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{font-size:20px;line-height:1.2}
.card:hover h3{color:var(--green-deep)}
.card p{margin:0;font-size:14px;color:var(--muted)}
.card .foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.card .upd{color:var(--green);font-weight:600}

/* section */
section{padding:56px 0}
/* Latar berselang antar-segmen. Sengaja sangat tipis — cukup untuk
   memisahkan bagian saat digulir, tidak sampai terbaca sebagai kotak. */
section.tint{background:var(--green-tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.tint + section.tint{border-top:0}
section.tint-jual{background:var(--orange-soft);border-top:1px solid var(--orange-line);
  border-bottom:1px solid var(--orange-line)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:30px}
.sec-head h2{font-size:clamp(25px,3.2vw,34px)}
.sec-head .eyebrow{margin-bottom:12px}
.sec-head .link{font-size:14px;font-weight:600;color:var(--green);display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.sec-head .link svg{width:15px;height:15px;transition:.18s}
.sec-head .link:hover svg{transform:translateX(3px)}
/* Di layar sempit judul panjang dan tautan "lihat semua" saling menghimpit
   kalau tetap sebaris — jadi tautannya turun ke bawah judul. */
@media(max-width:560px){.sec-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:20px}}

/* ---------- Place detail ---------- */
.place-hero{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;padding:22px 0 10px;align-items:start}
@media(max-width:900px){.place-hero{grid-template-columns:1fr;gap:26px}}
.place-hero h1{font-size:clamp(28px,4vw,44px);margin-top:14px}
.actbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.facts{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.facts .r{display:flex;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14.5px}
.facts .r:last-child{border-bottom:0}
.facts .k{width:104px;flex:none;color:var(--muted);font-weight:600;font-size:13px}
.facts .v{color:var(--ink);min-width:0;word-break:break-word}
.facts .v a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
.open-now{display:inline-flex;align-items:center;gap:7px;color:var(--green-deep);font-weight:700}
.open-now::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px var(--green-soft)}
.mapbox{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);line-height:0}
.mapbox iframe{width:100%;height:280px;border:0;display:block}
.mapbox .cap{padding:10px 14px;font-size:12px;color:var(--muted);line-height:1.5;background:#fff;
  border-top:1px solid var(--line)}

/* kotak lokasi — menggantikan peta sematan, menaut ke Google Maps */
.mapcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.mapcard .top{display:flex;gap:12px;padding:18px;background:var(--green-tint);border-bottom:1px solid var(--line)}
.mapcard .top .mi{font-size:22px;color:var(--green-deep);flex:none;margin-top:1px}
.mapcard .adr{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.mapcard .adr b{display:block;font-family:var(--sans);font-weight:800;font-size:15px;
  color:var(--ink);line-height:1.3;margin-bottom:4px}
.mapcard .coord{font-size:12.5px;color:var(--muted);margin-top:7px}
.mapcard .acts{display:flex;flex-wrap:wrap;gap:10px;padding:16px 18px}
.mapcard .acts .btn{flex:1 1 190px}

/* Baris tanda di atas judul: jenis, kecamatan, status verifikasi. */
.place-tanda{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.place-hero .lede{font-size:18px;color:var(--ink-2);margin-top:16px;max-width:56ch}
/* Lencana terverifikasi tanpa teks. Segelnya hijau, centangnya kuning:
   pada Material Symbols yang terisi, centang itu LUBANG di dalam segel —
   jadi kuningnya diletakkan di belakang glif, bukan ditumpuk di atasnya.
   Bidang kuningnya lebih kecil daripada segel, jadi yang terlihat hanya
   bagian yang muncul lewat lubang centang. Tanggalnya pindah ke title/
   aria-label supaya tetap terbaca saat disentuh & oleh pembaca layar. */
.lencana-verif{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:none}
.lencana-verif::before{content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;
  margin:-6.5px 0 0 -6.5px;border-radius:3px;background:var(--tbl-kuning)}
.lencana-verif .mi{position:relative;font-size:26px;color:var(--green);--icon-fill:1}
.place-sisi{display:flex;flex-direction:column;gap:20px}

/* Kepala bagian versi kecil. Di kolom isi halaman tempat, judul sebesar
   .sec-head akan menenggelamkan h1 di atasnya — jadi ukurannya diturunkan
   tapi susunannya (eyebrow, judul, tautan di kanan) tetap sama dengan
   bagian lain di situs. */
.sec-head-kecil{margin:38px 0 16px}
.sec-head-kecil h2{font-size:22px}
.sec-head-kecil .eyebrow{margin-bottom:7px}
@media(max-width:560px){.sec-head-kecil{margin:30px 0 14px}}

/* Kartu artikel di kolom isi lebih sempit daripada di beranda. Tiga kolom
   dikunci di sini supaya barisnya penuh, bukan dua kartu lalu satu
   menggantung sendirian di bawahnya. */
.place-hero .panduan-grid{grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:640px){.place-hero .panduan-grid{grid-template-columns:repeat(2,1fr);gap:12px}}

/* Kotak promo di sisi kanan — bidang hijau utama polos dengan tombol
   kuning. Ajakan komersial punya satu wajah di seluruh situs, dan bedanya
   dengan isi redaksi terbaca sebelum tulisannya dibaca. */
.promo-kotak{background:var(--green);border-radius:18px;padding:24px 22px;color:#fff}
.promo-kotak .eyebrow.jual{color:var(--tbl-kuning);display:inline-flex;align-items:center;gap:7px}
.promo-kotak .eyebrow.jual .mi{font-size:15px}
.promo-kotak h3{font-family:var(--sans);font-size:18px;font-weight:800;letter-spacing:-.01em;
  margin-top:12px;line-height:1.25}
.promo-kotak p{margin:9px 0 18px;font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.55}
.promo-kotak .btn{display:flex;width:100%;justify-content:center}
.promo-kotak .btn-ghostl{background:transparent;border-color:rgba(255,255,255,.28);color:#fff;margin-top:9px}
.promo-kotak .btn-ghostl:hover{border-color:#fff;color:var(--tbl-kuning)}

/* ---------- Halaman tempat: rel fakta lengket ----------
 Kolom kiri ("rel") membawa identitas tempat, tombol aksi, dan fakta,
 dan IKUT MENGGULIR bersama pembaca — jadi tombol Telepon & rute tidak
 pernah hilang dari layar, termasuk saat orang sudah jauh ke bawah
 membaca catatan redaksi. Kolom kanan dibiarkan lebar penuh untuk foto
 dan tulisan, sehingga tidak ada sisa ruang menganga seperti pada tata
 letak kartu-samping sebelumnya (lihat arsip/tempat-2026-09-06.html).
 Di layar sempit rel dibubarkan jadi satu kolom, kotak promo turun ke
 paling bawah, dan tombolnya pindah ke baris tetap di dasar layar. */
body{padding-bottom:0}

.rl-bungkus{display:grid;grid-template-columns:336px minmax(0,1fr);gap:48px;
  align-items:start;padding-top:22px}
@media(max-width:980px){.rl-bungkus{grid-template-columns:1fr;gap:32px}}

/* ---- rel kiri ---- */
/* Rel bisa lebih tinggi daripada layar — di laptop 1366x768 isinya sudah
   melebihi ruang yang ada, dan bagian bawahnya tak akan pernah terjangkau
   kalau dibiarkan menempel begitu saja. Jadi tingginya dibatasi setinggi
   layar dan sisanya digulir di dalam rel. Di layar yang cukup tinggi
   pembatas ini tidak pernah terasa. */
.rl-rel{position:sticky;top:132px;max-height:calc(100vh - 152px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
  padding-right:8px;margin-right:-8px}
.rl-rel::-webkit-scrollbar{width:6px}
.rl-rel::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px}
@media(max-width:980px){
  .rl-rel{position:static;max-height:none;overflow:visible;padding-right:0;margin-right:0}
}
/* Tautan balik ke daftar. Banyak orang tiba di sini dari direktori atau
   kategori; remah roti saja terlalu kecil sebagai jalan pulang. Panahnya
   dibalik lewat CSS supaya tidak perlu menambah ikon baru ke daftar font. */
.rl-balik{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--muted);margin-bottom:16px;transition:color .18s ease,gap .2s var(--luwes)}
.rl-balik .mi{font-size:17px;transform:scaleX(-1)}
.rl-balik:hover{color:var(--green-deep);gap:11px}

.rl-tanda{display:flex;gap:9px;flex-wrap:wrap;align-items:center}


.rl-catatan{margin-top:20px;font-size:13.5px;padding:14px 16px}
.rl-catatan .mi{font-size:19px}

/* Ajakan melapor. Direktori hidup dari kualitas datanya, dan pembaca yang
   tahu tempatnya adalah sumber koreksi paling murah yang kita punya. */
.rl-lapor{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:13px;
  font-weight:600;color:var(--muted);transition:color .18s ease}
.rl-lapor .mi{font-size:17px}
.rl-lapor:hover{color:var(--green-deep)}

/* Ajakan klaim di rel — hanya dirender di tempat yang belum diklaim.
   Jingga karena klaim adalah layanan berbayar. Begitu tempatnya diklaim
   kotak ini hilang dan lencana centang yang muncul di sebelah chip jenis.
   Seluruh kotak satu tautan, bukan teks + tombol kecil. */
.rl-klaim{display:flex;align-items:center;gap:13px;margin-top:22px;padding:14px 16px;
  border:1px solid var(--orange-line);border-radius:14px;background:var(--orange-soft);color:var(--ink);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.rl-klaim .ik{width:38px;height:38px;flex:none;border-radius:50%;background:#fff;color:var(--orange-deep);
  display:flex;align-items:center;justify-content:center}
.rl-klaim .ik .mi{font-size:20px}
.rl-klaim .tx{min-width:0;flex:1}
.rl-klaim .tx b{display:block;font-size:14px;color:var(--orange-deep)}
.rl-klaim .tx span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:2px}
.rl-klaim .panah{flex:none;font-size:19px;color:var(--orange-deep);transition:transform .2s var(--luwes)}
.rl-klaim:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 6px 16px rgba(194,65,12,.10)}
.rl-klaim:hover .panah{transform:translateX(3px)}
.rl-klaim:focus-visible{outline:3px solid rgba(194,65,12,.35);outline-offset:2px}
.rl-rel h1{font-size:clamp(25px,2.4vw,31px);letter-spacing:-.02em;margin-top:15px;line-height:1.16}
/* Deskripsi singkat — satu kalimat di bawah nama. Dulu baris ini berisi
   nama jenis lengkap ("Rumah Sakit Umum Daerah"), tapi begitu jaraknya
   dilepas isinya jadi mengulang chip jenis tepat di atasnya. Barisnya
   dipakai ulang untuk kalimat yang benar-benar menambah sesuatu — dan ini
   juga kalimat yang paling mungkin dikutip mesin jawab, jadi isinya
   disamakan dengan description di schema. */
.rl-ringkas{font-size:14.5px;color:var(--ink-2);line-height:1.55;margin-top:10px;max-width:42ch}
.rl-status{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:9px 15px;
  border-radius:999px;background:var(--green-tint);font-size:13.5px;font-weight:700;color:var(--green-deep)}
.rl-status .tt{font-weight:500;color:var(--ink-2)}

/* Tombol aksi jadi bulatan ikon saja. Labelnya tetap ada di title +
   aria-label, jadi tooltipnya muncul saat disentuh kursor dan pembaca
   layar tetap menyebut namanya — yang hilang cuma tulisannya, bukan
   keterangannya. */
.rl-tombol{display:flex;gap:11px;margin-top:20px}
@media(max-width:620px){.rl-tombol{display:none}}   /* diganti baris tetap di dasar layar */
.rl-bulat{width:50px;height:50px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:#fff;border:1.5px solid var(--line-strong);color:var(--ink);cursor:pointer;
  transition:border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
.rl-bulat .mi{font-size:21px}
.rl-bulat:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(21,32,27,.10)}
.rl-bulat:focus-visible{outline:3px solid rgba(26,99,60,.38);outline-offset:2px}
/* Aksi yang datanya memang belum ada dibuat terlihat mati — tombol hidup
   yang tidak melakukan apa-apa lebih buruk daripada tombol yang jujur
   bilang datanya belum ada. */
.rl-bulat.mati{border-color:var(--line);color:#B3BDB7;cursor:default;background:var(--paper)}
/* Tombol biasa yang datanya belum ada — misalnya Telepon di baris dasar
   ponsel — mengikuti perlakuan yang sama. */
.btn:disabled{background:var(--paper);border-color:var(--line);color:#B3BDB7;cursor:default}
.btn:disabled:hover{background:var(--paper);border-color:var(--line);color:#B3BDB7;transform:none}
.rl-bulat.mati:hover{border-color:var(--line);color:#A9B4AE;transform:none;box-shadow:none}
.rl-fakta .minta{display:inline-block;margin-top:5px;font-size:12.5px;font-weight:600;
  color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}

/* Fakta tanpa kotak & tanpa kisi — cuma garis rambut antar baris,
   supaya rel-nya terasa ringan dan tidak menyaingi kolom kanan. */
.rl-fakta{margin-top:26px;border-top:1px solid var(--line)}
.rl-fakta .r{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.rl-fakta .k{width:88px;flex:none;color:var(--muted);font-size:12.5px;font-weight:600;padding-top:1px}
.rl-fakta .v{min-width:0;color:var(--ink);line-height:1.5;word-break:break-word}
.rl-fakta .v a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}

/* Jam layanan di rel. Tabel tujuh baris terlalu tinggi untuk kolom yang
   harus ikut menggulir, jadi yang tampil cuma HARI INI; enam hari sisanya
   dilipat di dalam <details>. Hari ini dihitung di bpk.js, bukan ditulis
   mati — kalau ditulis mati, halamannya menyebut hari yang salah enam dari
   tujuh hari. */
.rl-jam{margin-top:22px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rl-jam summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:14px 16px;font-size:14px}
.rl-jam summary::-webkit-details-marker{display:none}
.rl-jam summary:hover{background:var(--green-tint)}
.rl-jam summary .mi{font-size:19px;color:var(--green-ikon);flex:none}
.rl-jam summary .lbl{min-width:0;flex:1}
.rl-jam summary .lbl b{display:block;font-family:var(--sans);font-size:14px;color:var(--ink)}
.rl-jam summary .lbl span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.rl-jam summary .buka{flex:none;font-size:20px;color:var(--muted);transition:transform .25s var(--luwes)}
.rl-jam[open] summary .buka{transform:rotate(180deg)}
.rl-jam .isi{border-top:1px solid var(--line);padding:6px 16px 12px}
.rl-jam .b{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:13.5px}
.rl-jam .b .h{color:var(--ink-2)}
.rl-jam .b .j{color:var(--ink);font-variant-numeric:tabular-nums}
.rl-jam .b.kini{font-weight:700}
.rl-jam .b.kini .h{color:var(--green-deep)}
.rl-jam .nota{margin:8px 0 0;padding-top:10px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.5}

/* Kotak promo dikeluarkan dari rel: isinya komersial, tidak perlu ikut
   menggulir, dan tingginya yang ~200px itu justru yang membuat rel tidak
   muat di layar laptop. Bentuknya memakai .cta-band yang sama dengan
   beranda — lihat varian .hijau di bagian BERANDA. */

/* Pesan sekilas setelah tautan disalin. */
.rl-pesan{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);z-index:120;
  background:var(--green-900);color:#fff;font-family:var(--sans);font-size:13.5px;font-weight:600;
  padding:11px 20px;border-radius:999px;box-shadow:var(--shadow-lift);
  opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s var(--luwes),visibility .22s}
.rl-pesan[data-tampil]{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---- kolom kanan ---- */
.rl-isi > section{padding:0;margin-bottom:46px}
.rl-isi > section:last-child{margin-bottom:0}
.rl-isi h2{font-size:23px;letter-spacing:-.012em}
.rl-isi .eyebrow{display:block;margin-bottom:7px}
.rl-isi p.tx{color:var(--ink-2);font-size:16px;line-height:1.7;margin:0}

/* Galeri: satu bingkai lebar + deret jempol di bawahnya. Berbeda dari
   halaman sekarang yang menaruh jempol di samping — di kolom selebar
   ini, jempol di bawah membuat foto utamanya jauh lebih besar. */
.rl-galeri .utama{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:var(--paper-2)}
.rl-galeri .utama .g{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.rl-galeri .utama .g[data-aktif]{opacity:1}
.rl-galeri .cap{position:absolute;left:14px;top:14px;z-index:2;font-size:12px;font-weight:600;color:#fff;
  background:rgba(7,58,40,.6);padding:5px 11px;border-radius:8px;backdrop-filter:blur(4px)}
.rl-galeri .hitung{position:absolute;right:14px;bottom:14px;z-index:2;font-size:12.5px;font-weight:600;
  color:#fff;background:rgba(7,58,40,.6);padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px);
  font-variant-numeric:tabular-nums}
.rl-galeri .deret{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.rl-galeri .deret button{position:relative;aspect-ratio:4/3;padding:0;border:0;border-radius:10px;
  overflow:hidden;cursor:pointer;background:var(--paper-2);outline:2.5px solid transparent;outline-offset:2px;
  transition:outline-color .18s,opacity .18s}
.rl-galeri .deret button:hover{opacity:.86}
.rl-galeri .deret button[aria-current="true"]{outline-color:var(--green)}
.rl-galeri .deret .g{position:absolute;inset:0}
/* Tombol perbesar di sudut bingkai. Selalu terlihat, tidak cuma saat
   kursor lewat — di layar sentuh tidak ada "kursor lewat", dan tanpa
   penanda ini orang tidak tahu fotonya bisa dibuka besar. */
.rl-perbesar{position:absolute;right:14px;top:14px;z-index:3;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  border:0;border-radius:50%;background:rgba(7,58,40,.6);color:#fff;backdrop-filter:blur(4px);
  transition:background .2s ease,transform .2s ease}
.rl-perbesar .mi{font-size:19px}
.rl-perbesar:hover{background:rgba(7,58,40,.85);transform:scale(1.06)}
.rl-perbesar:focus-visible{outline:3px solid rgba(255,255,255,.75);outline-offset:2px}
/* Bingkai utamanya sendiri juga bisa diklik. */
.rl-galeri .utama{cursor:zoom-in}

/* ---------- Foto diperbesar ----------
   Lapisan gelap sepenuh layar. Rangkanya dibuat oleh bpk.js, bukan ditulis
   di tiap halaman — supaya setiap halaman tempat mendapatkannya tanpa
   menyalin markah yang sama berulang kali. Kalau JavaScript mati, foto
   tetap terlihat di bingkai biasa, cuma tidak bisa dibesarkan.

   Bingkainya TIDAK dikunci rasio. Dulu dikunci 4:3, jadi foto 16:9 muncul
   dengan pita hitam tebal di atas dan bawah — bingkai yang lebih besar
   daripada fotonya. Sekarang <figure> menyusut mengikuti ukuran <img>-nya,
   jadi tepi gelap yang terlihat memang tepi foto, bukan sisa bingkai. */
.kotak-foto{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(6,20,13,.94);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s}
.kotak-foto[data-buka]{opacity:1;visibility:visible}

.kotak-foto .bingkai{position:relative;margin:0;display:flex;line-height:0;
  border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);
  opacity:0;transform:scale(.94) translateY(10px);
  transition:opacity .34s var(--luwes),transform .42s var(--luwes)}
.kotak-foto[data-buka] .bingkai{opacity:1;transform:none}

/* Foto sendiri yang menentukan ukuran bingkai. */
.kotak-foto img{display:block;max-width:min(1180px,92vw);max-height:80vh;
  width:auto;height:auto;object-fit:contain;
  opacity:1;transition:opacity .26s ease}
.kotak-foto img[data-tukar]{opacity:0}   /* redup sesaat saat berganti foto */

.kotak-foto .ket{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;
  align-items:baseline;gap:12px;margin:0;padding:40px 20px 15px;color:#fff;
  font-family:var(--sans);font-size:13.5px;line-height:1.4;
  background:linear-gradient(180deg,transparent,rgba(6,20,13,.82))}
.kotak-foto .ket b{font-weight:600}
.kotak-foto .ket .n{margin-left:auto;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.7)}

/* Panah menempel di tepi layar, bukan di tepi foto — jadi posisinya tetap
   sama berapa pun rasio fotonya, dan tidak pernah menutupi gambarnya. */
.kotak-foto .nav{position:absolute;top:50%;z-index:3;width:48px;height:48px;margin-top:-24px;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;border:0;
  border-radius:50%;background:rgba(255,255,255,.13);color:#fff;backdrop-filter:blur(6px);
  transition:background .2s ease,transform .2s ease}
.kotak-foto .nav:hover{background:rgba(255,255,255,.26);transform:scale(1.06)}
.kotak-foto .nav.mundur{left:22px}
.kotak-foto .nav.mundur .mi{transform:scaleX(-1)}
.kotak-foto .nav.maju{right:22px}
.kotak-foto .tutup{position:absolute;right:22px;top:22px;z-index:4;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;border:0;
  border-radius:50%;background:rgba(255,255,255,.13);color:#fff;backdrop-filter:blur(6px);
  transition:background .2s ease}
.kotak-foto .tutup:hover{background:rgba(255,255,255,.26)}
.kotak-foto button:focus-visible{outline:3px solid rgba(255,255,255,.8);outline-offset:2px}

@media(max-width:620px){
  .kotak-foto{padding:12px}
  .kotak-foto img{max-width:100%;max-height:66vh}
  /* Panah turun ke bawah foto: di layar selebar ini panah di samping pasti
     menimpa gambarnya. Geser jari tetap jadi jalan pintasnya. */
  .kotak-foto .nav{top:auto;bottom:26px;margin-top:0;width:44px;height:44px}
  .kotak-foto .nav.mundur{left:calc(50% - 54px)}
  .kotak-foto .nav.maju{right:calc(50% - 54px)}
  .kotak-foto .tutup{right:12px;top:12px}
}
@media(prefers-reduced-motion:reduce){
  .kotak-foto .bingkai{transition:opacity .01ms;transform:none}
  .kotak-foto img{transition:none}
}

/* Diumumkan ke pembaca layar, tidak terlihat di layar. */
.galeri-lapor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
/* Listing yang belum punya foto memakai gambar bawaan (lihat "Gambar
   bawaan" di akhir berkas). Tidak ada yang bisa diperbesar, jadi
   kursornya bukan kaca pembesar. */
.rl-galeri .utama.nofoto{cursor:default}

/* ---- baris tombol tetap di dasar layar (ponsel) ---- */
.rl-dasar{display:none}
@media(max-width:620px){
  .rl-dasar{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:90;
    grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(12px);
    border-top:1px solid var(--line)}
  .rl-dasar .btn{width:100%;justify-content:center}
  footer.foot{padding-bottom:96px}
}

/* ---------- Category ---------- */
.cat-hero{padding:34px 26px 30px}
.cat-hero h1{font-size:clamp(32px,4.6vw,52px);margin-top:14px}
.cat-hero p{font-size:18px;color:var(--ink-2);max-width:62ch;margin:16px 0 0;line-height:1.5}
.cat-stats{display:flex;gap:26px;margin:22px 0 26px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.cat-stats b{color:var(--ink);font-weight:800;font-size:20px;display:block;font-family:var(--sans)}
.filterbar{display:flex;gap:9px;flex-wrap:wrap;padding:22px 0}
.feature{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.feature .m{min-height:300px;position:relative;overflow:hidden}
/* Blok unggulan kategori memakai foto sungguhan, bukan bidang gradasi —
   supaya sebaris iramanya dengan kartu panduan di beranda. */
.feature .m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature .c{padding:34px}
.feature h2{font-size:clamp(23px,2.8vw,32px);margin-top:14px}
.feature p{color:var(--muted);margin:14px 0 0;font-size:15px}
@media(max-width:820px){.feature{grid-template-columns:1fr}.feature .m{min-height:200px}}
.pager{display:flex;gap:8px;justify-content:center;padding-top:18px}
.pager a{min-width:40px;height:40px;border-radius:10px;border:1px solid var(--line-strong);display:inline-flex;
  align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--ink-2);padding:0 12px}
.pager a:hover{border-color:var(--green);color:var(--green)}
.pager a[aria-current]{background:var(--green);border-color:var(--green);color:#fff}

/* ---------- Navigasi sub-topik kategori ----------
   Menggantikan pil saring lama yang bisa ditekan, berubah warna, dan
   TIDAK menyaring apa pun — kontrol palsu lebih merusak kepercayaan
   daripada tidak ada kontrol sama sekali. Sekarang tiap pil benar-benar
   melompat ke kelompoknya, dan angka di sebelahnya menyebut isi kelompok
   itu ada berapa. Penanda kelompok yang sedang dibaca dipasang oleh
   pengait daftar-isi bersama di bpk.js. */
.kat-loncat{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(12px);margin-bottom:34px}
@media(min-width:901px){.kat-loncat{position:sticky;top:72px;z-index:60}}
.kat-loncat .dalam{max-width:var(--maxw);margin:0 auto;padding:11px 26px;display:flex;gap:8px;
  overflow-x:auto;scrollbar-width:none}
.kat-loncat .dalam::-webkit-scrollbar{display:none}
.kat-loncat a{flex:none;display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);
  font-size:13.5px;font-weight:600;color:var(--ink-2);background:var(--paper);
  padding:8px 15px;border-radius:999px;transition:background .2s ease,color .2s ease}
.kat-loncat a:hover{background:var(--green-soft);color:var(--green-deep)}
.kat-loncat a[aria-current="true"]{background:var(--green);color:#fff}
.kat-loncat .n{font-size:11.5px;font-weight:700;opacity:.65;font-variant-numeric:tabular-nums}

/* Kepala kelompok panduan — lebih kecil daripada .sec-head supaya tidak
   menyaingi judul kategori, tapi tetap punya garis pemisah sendiri. */
.kat-kel{margin-top:52px;scroll-margin-top:132px}
.kat-kel:first-of-type{margin-top:0}
.kat-kel > .kat-jdl{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.kat-kel > .kat-jdl h2{font-size:22px;letter-spacing:-.012em}
.kat-kel > .kat-jdl .jml{font-size:13px;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.kat-semua{display:flex;justify-content:center;margin-top:40px}

/* Blok penjelasan di dasar halaman kategori. Abu netral yang sama dengan
   blok lain di situs, tanpa bingkai — bidangnya sendiri sudah memisahkan. */
.kat-tentang{background:#f5f5f5;border-radius:20px;padding:34px 38px}
.kat-tentang h2{font-size:26px;letter-spacing:-.015em}
.kat-tentang .isi{max-width:70ch;color:var(--ink-2);margin-top:16px;
  display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.75}
.kat-tentang .isi strong{color:var(--ink)}
@media(max-width:600px){.kat-tentang{padding:24px 22px;border-radius:16px}}

/* ---------- Footer ---------- */
/* --muted (#6E7C76) tidak cukup di sini: di atas #EEF6F0 kontrasnya 3,97:1,
   masih gagal AA meski latarnya terang. Warna teks di dalam kaki halaman
   dinaikkan sendiri, tanpa mengubah token global. */
footer.foot{background:#EEF6F0;padding:56px 0 30px;margin-top:30px;color:var(--ink-2)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:32px;
  border-bottom:1px solid #CBDFD2}
.foot .brand{font-size:22px}
.foot p.about{color:#52625B;max-width:34ch;margin:14px 0 0;font-size:14.5px}   /* 5,86:1 */
.foot h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 15px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot ul a{color:#41504A;font-size:14.5px}                                     /* 7,72:1 */
.foot ul a:hover{color:var(--green-deep)}                                      /* 7,29:1 */
.foot-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:22px;font-size:13px;
  color:#52625B;flex-wrap:wrap;gap:10px}
.foot-bottom a{color:var(--green-deep);text-decoration:underline}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.foot-grid{grid-template-columns:1fr}}

.panel{position:absolute;inset:0}

/* ---------- Generic page hero ---------- */
.phero{padding:28px 26px 6px}
.phero h1{font-size:clamp(32px,4.8vw,54px);margin-top:16px;letter-spacing:-.024em}
.phero p.sub{font-size:19px;color:var(--ink-2);max-width:62ch;margin:18px 0 0}
.phero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---------- Benefits ---------- */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.benefits{grid-template-columns:1fr}}
.benefit{border:1px solid var(--line);border-radius:16px;padding:26px;background:#fff}
.benefit .ic{width:46px;height:46px;border-radius:13px;background:var(--green-soft);color:var(--green-deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.benefit .ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.benefit h3{font-family:var(--sans);font-size:17.5px;font-weight:800;letter-spacing:-.01em}
.benefit p{margin:9px 0 0;font-size:14.5px;color:var(--muted)}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
@media(max-width:880px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{padding-top:20px;border-top:3px solid var(--green-soft);position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:0;width:30px;height:30px;
  border-radius:50%;background:var(--green);color:#fff;font-family:var(--sans);font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center}
.step h3{font-family:var(--sans);font-size:16.5px;font-weight:800;margin-top:14px}
.step p{margin:8px 0 0;font-size:14px;color:var(--muted)}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
.price{border:1px solid var(--line);border-radius:20px;padding:30px 28px;background:#fff;
  display:flex;flex-direction:column;gap:18px;position:relative}
.price.featured{border:2px solid var(--green);box-shadow:var(--shadow-lift)}
.price .badge{position:absolute;top:-13px;left:28px;background:var(--green);color:#fff;font-size:11px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:999px}
.price .nm{font-family:var(--sans);font-weight:800;font-size:17px;letter-spacing:-.01em}
.price .desc{font-size:14px;color:var(--muted);margin-top:-10px}
.price .amt{font-family:var(--serif);font-size:38px;color:var(--ink);line-height:1}
.price .amt small{font-family:var(--sans);font-size:13.5px;color:var(--muted);font-weight:600;display:block;margin-top:8px}
.price ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:14.5px;color:var(--ink-2)}
.price li{display:flex;gap:10px;align-items:flex-start}
.price li svg{width:17px;height:17px;flex:none;stroke:var(--green);fill:none;stroke-width:2.6;margin-top:3px}
.price li.off{color:var(--muted)}
.price li.off svg{stroke:var(--line-strong)}

/* ---------- Form ---------- */
/* ---------- Halaman Mulai: pilih layanan ---------- */
.jasa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch}
@media(max-width:820px){.jasa-grid{grid-template-columns:1fr}}
.jasa{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:20px;
  padding:30px 28px;background:#fff;box-shadow:var(--shadow);
  transition:transform .2s,border-color .2s,box-shadow .2s}
.jasa:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:var(--shadow-lift)}
.jasa .ic{width:46px;height:46px;border-radius:14px;background:var(--green-soft);color:var(--green-deep);
  display:flex;align-items:center;justify-content:center}
.jasa .ic .mi{font-size:26px}
.jasa .tag{align-self:flex-start}
.jasa h2{font-size:24px;letter-spacing:-.02em}
.jasa .lead{font-size:15px;color:var(--ink-2);margin:0}
.jasa-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;
  font-size:14.5px;color:var(--ink-2)}
.jasa-list li{display:flex;gap:9px;align-items:flex-start}
.jasa-list .mi{font-size:19px;color:var(--green);margin-top:1px;flex:none}
.jasa-harga{font-family:var(--sans);font-weight:800;font-size:26px;letter-spacing:-.02em;
  margin-top:auto;padding-top:16px}
.jasa-harga small{display:block;font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:0}
.jasa-cocok{font-size:13.5px;color:var(--muted);line-height:1.5}
.jasa .btn{width:100%;margin-top:6px}

/* ---------- Halaman Daftar: borang + pendamping ---------- */
.daftar-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:44px;align-items:start}
@media(max-width:900px){.daftar-grid{grid-template-columns:1fr;gap:32px}}
.daftar-grid .form{max-width:none}
.langkah{border:1px solid var(--line);border-radius:16px;padding:24px;background:#fff}
.langkah + .langkah{margin-top:18px}
.langkah.alt{background:var(--paper);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.langkah h2{font-size:17px;letter-spacing:-.01em}
.langkah p{font-size:14.5px;color:var(--ink-2);margin:0}
.langkah ol{margin:16px 0 0;padding-left:0;list-style:none;counter-reset:l;
  display:flex;flex-direction:column;gap:16px}
.langkah ol li{counter-increment:l;position:relative;padding-left:38px;font-size:14.5px}
.langkah ol li::before{content:counter(l);position:absolute;left:0;top:0;width:26px;height:26px;
  border-radius:50%;background:var(--green-soft);color:var(--green-deep);
  font-family:var(--sans);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.langkah ol li b{display:block;color:var(--ink);font-family:var(--sans);font-weight:700;margin-bottom:3px}
.langkah ol li span{color:var(--muted);font-size:13.5px;line-height:1.55}

/* Baris alternatif di bawah kartu paket */
.paket-alt{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px;
  padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:var(--paper);
  font-size:14.5px;color:var(--ink-2)}
.paket-alt .muted{font-size:13.5px}

/* Penanda paket yang dipilih, muncul bersama borang */
.paket-terpilih{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;
  background:var(--green-soft);color:var(--green-deep);font-size:13.5px;font-weight:600;margin-bottom:18px}
.paket-terpilih[hidden]{display:none}
.paket-terpilih .mi{font-size:18px}
.paket-terpilih a{margin-left:4px;font-weight:500;color:var(--green-deep);text-decoration:underline}

/* Borang disembunyikan sampai pengunjung memilih paket (lihat bpk.js) */
#form[hidden]{display:none}

.form{display:flex;flex-direction:column;gap:17px;max-width:560px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13.5px;font-weight:700;color:var(--ink)}
.field label .req{color:var(--danger)}
.field input,.field textarea,.field select{font-family:var(--sans);font-size:15px;padding:13px 15px;
  border:1.5px solid var(--line-strong);border-radius:12px;background:#fff;color:var(--ink);outline:0;
  transition:border-color .15s,box-shadow .15s;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(15,122,84,.12)}
.field .hint{font-size:12.5px;color:var(--muted)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}

/* ---------- Directory index ---------- */
.bigsearch{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line-strong);
  border-radius:999px;padding:8px 8px 8px 20px;max-width:620px;box-shadow:var(--shadow);margin-top:24px}
.bigsearch svg{width:19px;height:19px;color:var(--muted);flex:none}
.bigsearch input{flex:1;border:0;outline:0;font-family:var(--sans);font-size:16px;color:var(--ink);background:transparent}
.dirlayout{display:grid;grid-template-columns:252px minmax(0,1fr);gap:36px;align-items:start;padding:8px 26px 20px}
@media(max-width:880px){.dirlayout{grid-template-columns:1fr}}
.fpanel{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff;position:sticky;top:138px}
@media(max-width:880px){.fpanel{position:static}}
.fgroup{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.fgroup:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.fgroup .ft{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.fopt{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2);padding:6px 0;cursor:pointer}
.fopt input{accent-color:var(--green);width:16px;height:16px;flex:none}
.fopt .n{margin-left:auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.dirbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;flex-wrap:wrap}
.dirbar .count{font-size:14.5px;color:var(--muted)}
.dirbar .count b{color:var(--ink);font-weight:800}
.dirlist{display:flex;flex-direction:column;gap:14px}
.attrib{margin-top:26px;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  font-size:13px;color:var(--muted)}
.attrib a{color:var(--green-deep);text-decoration:underline}

/* ---------- Team / about ---------- */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:760px){.team{grid-template-columns:1fr}}
.member{display:flex;gap:18px;border:1px solid var(--line);border-radius:16px;padding:24px;background:#fff}
.member .avatar{width:60px;height:60px;flex:none}
.member .nm{font-family:var(--sans);font-weight:800;font-size:16.5px}
.member .rl{font-size:13px;color:var(--green);font-weight:700;margin-top:2px}
.member p{margin:9px 0 0;font-size:14px;color:var(--muted)}
.principles{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.principle{display:flex;gap:18px;padding:22px 24px;border-bottom:1px solid var(--line)}
.principle:last-child{border-bottom:0}
.principle .num{font-family:var(--serif);font-size:22px;color:var(--green);flex:none;width:34px}
.principle h3{font-family:var(--sans);font-size:16.5px;font-weight:800}
.principle p{margin:7px 0 0;font-size:14.5px;color:var(--muted);max-width:66ch}

/* contact cards */
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.contacts{grid-template-columns:1fr}}
.contact{border:1px solid var(--line);border-radius:16px;padding:24px;background:#fff;transition:.18s}
.contact:hover{border-color:var(--green);transform:translateY(-3px)}
.contact .ic{width:44px;height:44px;border-radius:12px;background:var(--green-soft);color:var(--green-deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.contact .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.contact h3{font-family:var(--sans);font-size:16.5px;font-weight:800}
.contact p{margin:8px 0 0;font-size:14px;color:var(--muted)}
.contact .val{margin-top:12px;font-weight:700;color:var(--green-deep);font-size:14.5px;display:block}


/* ================= BERANDA ================= */
/* ---- komponen khusus beranda ---- */
  /* Tanpa foto (6 Okt): foto Houston isian demo dibuang, latarnya hijau
     tua dengan cahaya lembut dari atas. Kalau nanti ada panorama Teluk
     Balikpapan, pasang lewat style="background-image:url(...)" dan
     kembalikan lapis peredup netral rgba(0,0,0,.57→.74) — titik lampu
     kota di foto malam membuat teks putih tanpa peredup cuma 1,3:1. */
  .home-hero{position:relative;overflow:hidden;padding:88px 0 78px;
    background:var(--green-900) center/cover no-repeat}
  .home-hero::before{content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse 70% 85% at 50% 0%,rgba(58,104,59,.55),transparent 72%)}
  .home-hero .inner{position:relative;z-index:1;max-width:var(--maxw);text-align:center}
  .home-hero .eyebrow{color:#B7E3CC}
  .home-hero h1{color:#fff}
  /* 37px → 44px (naik 20%). Batas 20ch dilepas supaya muat satu baris;
     di layar sempit tetap boleh turun baris dengan sendirinya. */
  .home-hero h1{font-size:clamp(31px,3.85vw,44px);letter-spacing:-.02em;line-height:1.14;
    animation:rise .7s .12s both}
  .home-hero .eyebrow{margin-bottom:22px;animation:rise .7s .05s both}
  .home-hero .bigsearch{margin:30px auto 0;max-width:660px;animation:rise .7s .2s both}
  /* Dua pintu masuk mengikuti lebar penuh halaman, bukan lebar teks,
     supaya sejajar dengan kisi di bawahnya. */
  .bigsearch{animation:rise .7s .28s both}

  /* Dua pintu masuk di bawah pencarian. Isinya cuma ikon dan tombol —
     nama layanannya sudah dibawa label tombolnya. Tanpa kotak dan tanpa
     bingkai; latarnya foto hero yang sama. */
  .pintu{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 44px;margin-top:40px;
    animation:rise .7s .3s both}
  @media(max-width:560px){
    .pintu{flex-direction:column;align-items:center;gap:14px;margin-top:32px}
    .pintu .btn-ikon{width:100%;max-width:300px}
  }

  /* Latar abu netral #f5f5f5, bukan abu kehijauan seperti sebelumnya.
     Garis atas-bawah dilepas: perbedaan warnanya sendiri sudah cukup
     memisahkan bagian ini dari yang di atas dan di bawahnya. */
  .quick{background:#f5f5f5}
  .qgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
  /* Tanpa bingkai, diam maupun saat disentuh. Kartu putih di atas abu
     sudah terbaca sendiri; yang membedakan saat disentuh cuma naik
     sedikit dan bayangan. */
  .qcard{background:#fff;border:0;border-radius:14px;padding:20px 16px;
    display:flex;flex-direction:column;gap:14px;transition:transform .2s,box-shadow .2s}
  .qcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
  /* Sudut ikon dibulatkan lebih penuh. */
  .qcard .ic{width:42px;height:42px;border-radius:50%;background:var(--green-soft);color:var(--green-ikon);
    display:flex;align-items:center;justify-content:center}
  .qcard .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .qcard .t{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
  .qcard .s{font-size:12px;color:var(--muted)}
  @media(max-width:1000px){.qgrid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:560px){.qgrid{grid-template-columns:repeat(2,1fr)}}

  /* ---------- Panduan Balikpapan (dulu "Sorotan" + "Terbaru", sekarang
     dilebur satu blok) ----------
     Kartu diperlakukan setara — tak ada satu yang dibesarkan jadi
     "unggulan" — kisi menyesuaikan lebar layar sendiri (auto-fit),
     2 kolom tetap dipertahankan di mobile (bukan turun ke 1 kolom)
     supaya tetap terasa seperti kisi, bukan daftar panjang. */
  .kk{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;
    background:rgba(255,255,255,.2);padding:6px 12px;border-radius:999px;display:inline-block;backdrop-filter:blur(4px)}

  .panduan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
  /* Varian tiga kolom untuk halaman kategori: enam kartu jadi 3+3 penuh,
     bukan 4+2 yang menyisakan baris kedua menggantung setengah. */
  .panduan-grid.tiga{grid-template-columns:repeat(3,1fr)}
  @media(max-width:900px){.panduan-grid.tiga{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){.panduan-grid.tiga{grid-template-columns:repeat(2,1fr);gap:12px}}

  .panduan-card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
    border-radius:20px;overflow:hidden;background:#f5f5f5;box-shadow:0 1px 2px rgba(21,32,27,.05);
    opacity:0;transform:translateY(20px);transition:opacity .65s var(--luwes),transform .65s var(--luwes),box-shadow .35s ease;
    transition-delay:calc(var(--i,0) * 65ms)}
  .panduan-card.in{opacity:1;transform:translateY(0)}
  .panduan-card:hover{box-shadow:var(--shadow-lift)}

  .panduan-card .foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
  .panduan-card .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform .7s var(--luwes)}
  .panduan-card:hover .foto img{transform:scale(1.08)}
  .panduan-card .foto .kk{position:absolute;left:12px;top:12px;z-index:1;font-size:10.5px;padding:5px 11px;
    background:rgba(10,30,20,.4);transition:transform .35s var(--luwes)}
  .panduan-card:hover .foto .kk{transform:translateY(-2px)}

  .panduan-card .isi{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
  .panduan-card h3{margin:0;font-size:15.5px;line-height:1.32;letter-spacing:-.005em;color:var(--ink);
    transition:color .25s ease}
  .panduan-card:hover h3{color:var(--green-deep)}
  .panduan-card p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.55;flex:1}
  .panduan-card .meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);
    margin-top:auto;padding-top:6px}

  @media(max-width:640px){
    .panduan-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .panduan-card .isi{padding:11px 11px 13px;gap:5px}
    .panduan-card h3{font-size:13px;line-height:1.3}
    .panduan-card p{display:none}
    .panduan-card .meta{font-size:10px}
    .panduan-card .foto .kk{font-size:9.5px;padding:4px 9px;left:9px;top:9px}
  }

  .cats{background:var(--paper);border-top:1px solid var(--line)}
  .catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  @media(max-width:820px){.catgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.catgrid{grid-template-columns:1fr}}
  .cat{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);
    border-radius:14px;padding:22px;transition:transform .2s,border-color .2s}
  .cat:hover{transform:translateY(-3px);border-color:var(--green)}
  .cat .ic{width:50px;height:50px;flex:none;border-radius:14px;background:var(--green-soft);color:var(--green-deep);
    display:flex;align-items:center;justify-content:center}
  .cat .ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .cat h3{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:-.01em}
  .cat .n{font-size:13px;color:var(--muted);margin-top:2px}
  .cat .go{margin-left:auto;color:var(--line-strong);transition:.2s}
  .cat:hover .go{color:var(--green);transform:translateX(3px)}
  .cat .go svg{width:20px;height:20px}

  .cta-band{position:relative;border-radius:24px;overflow:hidden;background:var(--green-900);color:#fff;
    padding:56px 52px;display:grid;grid-template-columns:1.4fr .8fr;gap:36px;align-items:center;box-shadow:var(--shadow-lift)}
  .cta-band .glow{position:absolute;inset:0;background:
    radial-gradient(420px 260px at 82% 0%,rgba(26,99,60,.55),transparent 70%),
    radial-gradient(300px 300px at 12% 120%,rgba(26,99,60,.38),transparent 70%)}
  .cta-band>*{position:relative;z-index:2}
  .cta-band .eyebrow{color:#79D9A6}
  .cta-band .eyebrow.jual{color:var(--orange-light)}
  .cta-band h2{color:#fff;font-size:clamp(26px,3.2vw,38px);max-width:26ch;margin-top:16px}
  .cta-band p{color:rgba(255,255,255,.8);max-width:62ch;margin:16px 0 0;font-size:15.5px}
  .cta-acts{display:flex;flex-direction:column;gap:12px}
  .cta-acts .btn-light{background:#fff;color:var(--green-900)}
  .cta-acts .btn-light:hover{background:var(--green-soft);transform:translateY(-2px)}
  .cta-acts .btn-ghostl{background:transparent;border:1.5px solid rgba(255,255,255,.3);color:#fff}
  .cta-acts .btn-ghostl:hover{border-color:#fff}
  .cta-acts .note{font-size:12.5px;color:rgba(255,255,255,.6);text-align:center}
  @media(max-width:760px){.cta-band{grid-template-columns:1fr;padding:40px 28px}}

  /* Variasi "spot" — dipakai di beranda: satu sorot cahaya lembut
     yang mengikuti kursor menggantikan dua bulatan glow yang selalu
     menyala, plus satu tombol kuning + satu tautan teks (bukan dua
     tombol blok bertumpuk). Tata letak kiri-kanannya tidak berubah. */
  .cta-band.spot .glow{background:radial-gradient(600px 320px at 50% -10%,rgba(46,143,94,.35),transparent 70%)}
  .cta-band.spot .spot-fx{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
    transition:opacity .5s ease;
    background:radial-gradient(480px circle at var(--mx,50%) var(--my,20%),rgba(255,255,255,.10),transparent 65%)}
  .cta-band.spot:hover .spot-fx{opacity:1}
  .cta-band.spot .eyebrow.jual{color:var(--tbl-kuning);display:inline-flex;align-items:center;gap:7px}
  .cta-band.spot .eyebrow.jual .mi{font-size:15px}
  .cta-band.spot .cta-acts{align-items:stretch;gap:12px}
  .cta-band.spot .cta-acts .btn{justify-content:center}
  /* Varian hijau utama. Pita CTA di beranda berlatar hijau paling pekat;
     di halaman tempat warnanya dinaikkan ke hijau utama supaya sewarna
     dengan pita header, dan sorot cahayanya ikut dicerahkan agar tetap
     terlihat di atas dasar yang lebih terang. */
  /* Bantalan kirinya ditambah dari 52px: teks yang mulai tepat di 52px
     terasa terlalu merapat ke tepi kartu untuk kartu selebar ini. */
  .cta-band.hijau{background:var(--green);grid-template-columns:minmax(0,1fr) auto;
    padding-left:76px}
  /* Tombolnya tidak ditarik selebar kolom: kolom kanan di sini 366px
     sementara labelnya cuma sepertiga itu, dan kapsul sepanjang itu
     terlihat kosong di tengah. Lebarnya dikunci sedikit di atas panjang
     label terpanjang, dan diberi jarak dari tepi kanan kartu supaya tidak
     menempel ke sudut. Keduanya sama lebar. */
  .cta-band.hijau .cta-acts{width:226px;margin-right:26px}
  @media(max-width:760px){
    .cta-band.hijau{grid-template-columns:1fr;padding-left:28px}
    /* Di layar sempit keduanya selebar kartu. align-items:center dari
       varian .spot dibatalkan di sini, kalau tidak lebar keduanya jadi
       tidak sama karena masing-masing menyusut ke panjang labelnya. */
    .cta-band.spot.hijau .cta-acts{width:100%;margin-right:0;align-items:stretch}
  }
  .cta-band.spot.hijau .glow{background:radial-gradient(600px 320px at 50% -10%,rgba(125,214,168,.26),transparent 70%)}
  .cta-band.spot.hijau .spot-fx{background:radial-gradient(480px circle at var(--mx,50%) var(--my,20%),rgba(255,255,255,.13),transparent 65%)}

  .btn-kuning{background:var(--tbl-kuning);color:var(--green-900)}
  .btn-kuning:hover{background:var(--tbl-kuning-tua);color:var(--green-900);transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,.22)}
  .cta-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:14.5px;
    font-weight:600;color:rgba(255,255,255,.85);text-decoration:none;transition:color .25s ease}
  .cta-link .mi{font-size:16px;transition:transform .35s var(--luwes)}
  .cta-link:hover{color:#fff}
  .cta-link:hover .mi{transform:translate(2px,-2px)}
  @media(max-width:760px){.cta-band.spot .cta-acts{align-items:center}}

  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}


/* ================= IKON — Material Symbols Rounded ================= */
.mi{
  font-family:'Material Symbols Rounded';
  font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;
  text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
  font-size:24px;vertical-align:middle;flex:none;user-select:none;
  /* dua tuas: isi (0=garis, 1=padat) & ketebalan */
  font-variation-settings:'FILL' var(--icon-fill,0),'wght' var(--icon-wght,400),'GRAD' 0,'opsz' 24;
}
/* ukuran per konteks */
.btn .mi{font-size:18px}
.btn-sm .mi{font-size:16px}
.chip .mi{font-size:16px}
.verif .mi{font-size:18px;--icon-fill:1;color:var(--green)}
.notice .mi{font-size:21px;color:var(--amber);margin-top:1px}
.sec-head .link .mi{font-size:18px;transition:transform .18s}
.sec-head .link:hover .mi{transform:translateX(3px)}
.bigsearch .mi,.searchbar .mi,.navsearch .mi{font-size:21px;color:var(--muted)}
.qcard .ic .mi{font-size:24px}
.cat .ic .mi{font-size:27px}
.cat .go .mi{font-size:22px}
.benefit .ic .mi{font-size:24px}
.contact .ic .mi{font-size:24px}
.price li .mi{font-size:19px;color:var(--green);margin-top:1px}
.price li.off .mi{color:var(--line-strong)}
.crumb .mi{font-size:16px}
.iconbtn .mi{font-size:19px}
.actbar .btn .mi{font-size:19px}


/* ================= ARTIKEL PARTNER ================= */
.partner-tag{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep);background:var(--orange-soft);
  border:1px solid var(--orange-line);padding:8px 14px;border-radius:999px}
.partner-tag .mi{font-size:17px;color:var(--orange)}
.partner-bar{display:flex;gap:14px;align-items:flex-start;background:var(--orange-soft);border:1px solid var(--orange-line);
  border-radius:14px;padding:17px 20px;font-size:14.5px;color:#7C3A12;line-height:1.6}
.partner-bar .mi{font-size:22px;color:var(--orange);margin-top:1px}
.partner-bar b{color:#5A400C}

/* placeholder foto klien */
.ph{position:relative;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:7px;color:rgba(255,255,255,.9);font-size:13px;font-weight:600;text-align:center;
  background:linear-gradient(140deg,#13A06E,#0A5C3F 60%,#073A28)}
.ph .mi{font-size:32px;opacity:.8}
.ph.hero{aspect-ratio:16/9}
.ph.sq{aspect-ratio:1/1}
.ph .cap{position:absolute;left:12px;bottom:11px;font-size:11.5px;font-weight:600;color:#fff;
  background:rgba(7,58,40,.55);padding:5px 10px;border-radius:7px;backdrop-filter:blur(4px)}
.photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:620px){.photogrid{grid-template-columns:1fr 1fr}}

/* ---------- Tempat populer di beranda ----------
   "Terverifikasi" adalah fitur berbayar — tempat yang mengklaim &
   membayar listingnya dapat lencana kuning-centang di sudut foto.
   Yang belum bayar TIDAK diberi lencana atau label apa pun (bukan
   "belum lengkap", bukan "pending") — polos saja, supaya lencananya
   terasa istimewa dan bukan sindiran ke yang gratis.
   Ikon kategori di kiri-bawah foto tampil di SEMUA kartu, verifikasi
   atau tidak — itu bukan penanda status, cuma info jenis tempatnya.
   Kartu yang belum punya foto memakai gambar bawaan .nofoto (abu-abu
   muda + logo abu-abu tua, lihat akhir berkas), bukan tulisan "belum
   ada foto". Sejak 6 Okt demo tidak memakai foto acak lagi.
   Foto + keterangan SELALU dalam alur normal (foto di atas, teks di
   bawah, tidak ditumpuk di atas foto) — supaya nama sepanjang apa pun
   tetap utuh terbaca, tidak pernah terpotong atau meluber. Mobile
   (≤640px) cuma memampatkan jarak & ukuran huruf, bukan tata letaknya. */
.tempat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.tempat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tempat-grid{gap:12px}}

.tempatcard{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border-radius:20px;background:#fff;
  opacity:0;transform:translateY(18px);transition:opacity .6s var(--luwes),transform .6s var(--luwes);
  transition-delay:calc(var(--i,0) * 70ms)}
.tempatcard.in{opacity:1;transform:translateY(0)}

.tempatcard .foto{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  background:var(--paper-2);box-shadow:0 1px 2px rgba(21,32,27,.06);transition:box-shadow .5s var(--luwes)}
@media(max-width:640px){.tempatcard .foto{aspect-ratio:1/1;border-radius:14px}}
.tempatcard .foto .ph{position:absolute;inset:0;transition:transform .7s var(--luwes)}
.tempatcard:hover .foto{box-shadow:var(--shadow-lift)}
.tempatcard:hover .foto .ph{transform:scale(1.07)}

/* Ikon kategori — selalu ada, apapun status verifikasinya */
.tempatcard .kat-ic{position:absolute;left:12px;bottom:11px;z-index:1;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.tempatcard .kat-ic .mi{display:block;font-size:20px}
.tempatcard .foto.nofoto .kat-ic{color:var(--abu-logo);filter:none}
@media(max-width:640px){
  .tempatcard .kat-ic{left:10px;bottom:9px}
  .tempatcard .kat-ic .mi{font-size:17px}
}

.tempatcard .badge{position:absolute;top:-6px;right:12px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;z-index:2;background:var(--tbl-kuning);
  box-shadow:0 3px 10px rgba(10,43,25,.28)}
.tempatcard .badge .mi{font-size:18px;color:var(--green-deep);--icon-fill:1}
.tempatcard .badge::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--tbl-kuning);
  opacity:.6;animation:tpring 2.6s var(--luwes) .3s 1 both}
@keyframes tpring{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.tempatcard .badge::after{animation:none}}
@media(max-width:640px){
  .tempatcard .badge{width:27px;height:27px;top:8px;right:8px}
  .tempatcard .badge .mi{font-size:14px}
}

.tempatcard .isi{display:flex;flex-direction:column;gap:5px;padding:14px 4px 4px;flex:1}
.tempatcard .nm{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--ink);
  line-height:1.3;letter-spacing:-.01em;transition:color .3s ease}
.tempatcard:hover .nm{color:var(--green-deep)}
.tempatcard .mt{font-size:12.5px;color:var(--muted);line-height:1.5}

@media(max-width:640px){
  .tempat-grid{grid-template-columns:repeat(2,1fr)}
  .tempatcard .isi{padding:10px 2px 2px;gap:3px}
  .tempatcard .nm{font-size:12.5px;line-height:1.3}
  .tempatcard .mt{font-size:10.5px}
}

/* ---------- Blok jenis tempat ----------
   Kapsul pil di atas latar abu datar #f5f5f5 — tanpa border sama
   sekali, kedalamannya cuma dari bayangan tipis. Lebar tiap pil
   SERAGAM (ikut kolom grid, bukan mengikuti panjang teksnya) supaya
   barisnya rapi sejajar. Jenis yang datanya belum ada diredupkan +
   titik kuning berdenyut, bukan garis putus-putus. */
.jenis-blok{background:#f5f5f5;border-radius:20px;padding:26px 28px;margin-top:30px}
section.jelajahi{padding:36px 0}
.jenis-blok .jt{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-deep);margin-bottom:16px}

.katpil{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
@media(max-width:1000px){.katpil{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.katpil{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.katpil{grid-template-columns:repeat(2,1fr)}}

/* Variasi lebar untuk daftar dengan label lebih panjang (mis. "Kesehatan
   & Darurat") — kolom lebih sedikit tapi tetap kisi yang sama persis,
   jadi kalau kategorinya nanti nambah, tinggal nambah <a>, tak perlu
   ubah apa-apa lagi. */
.katpil.lebar{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.katpil.lebar{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.katpil.lebar{grid-template-columns:repeat(2,1fr)}}

.katpil a{position:relative;display:flex;align-items:center;gap:8px;min-width:0;
  background:#fff;border-radius:999px;padding:8px 12px 8px 8px;text-decoration:none;
  color:var(--ink-2);font-size:13px;font-weight:600;box-shadow:0 1px 2px rgba(21,32,27,.05);
  opacity:0;transform:translateY(8px) scale(.97);
  transition:opacity .5s var(--luwes),transform .5s var(--luwes),box-shadow .3s ease;
  transition-delay:calc(var(--i,0) * 30ms)}
.katpil a.in{opacity:1;transform:translateY(0) scale(1)}
.katpil a:hover{box-shadow:0 6px 18px rgba(21,32,27,.12);transform:translateY(-2px) scale(1.015)}

.katpil .ic{width:28px;height:28px;border-radius:50%;background:var(--green-soft);flex:none;
  display:flex;align-items:center;justify-content:center;transition:transform .4s var(--luwes)}
.katpil .mi{font-size:15px;color:var(--green-ikon)}
.katpil a:hover .ic{transform:rotate(-10deg) scale(1.08)}

.katpil .lb{flex:1;min-width:0;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.katpil .n{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--paper-2);color:var(--muted);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;
  transition:transform .3s var(--luwes)}
.katpil a:hover .n{background:var(--green-soft);color:var(--green-deep);transform:scale(1.08)}

/* Jenis yang datanya memang belum ada — diredupkan + titik berdenyut. */
.katpil a.belum{opacity:.55}
.katpil a.belum.in{opacity:.55}
.katpil a.belum:hover{opacity:1}
.katpil a.belum .ic{background:var(--paper-2)}
.katpil a.belum .ic .mi{color:#9AA8A1}
.katpil a.belum .n{background:transparent;width:auto;min-width:0;padding:0}
.katpil .dot{width:6px;height:6px;border-radius:50%;background:#C9A227;
  animation:kpdot 1.8s ease-in-out infinite}
@keyframes kpdot{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.katpil .dot{animation:none}}

/* ---------- Galeri foto listing (fasilitas berbayar) ----------
   Satu bingkai besar di kiri, empat thumbnail di kanan. Rasio dikunci 4:3
   dengan object-fit:cover supaya foto ponsel yang tegak maupun mendatar
   tidak merusak barisnya. Lebar kolom dipilih agar tepi bawah thumbnail
   sejajar dengan tepi bawah bingkai besar. */
.galeri{display:grid;grid-template-columns:79% 19%;gap:2%;align-items:stretch;margin-top:8px}
.galeri-utama{position:relative;min-width:0}
.galeri-utama .bingkai{margin:0;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  position:relative;background:var(--paper-2)}
.galeri-utama .ph{position:absolute;inset:0;border-radius:0;opacity:0;
  transition:opacity .5s ease}
.galeri-utama .ph[data-aktif]{opacity:1}
.galeri-utama img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.galeri-hitung{position:absolute;left:12px;bottom:12px;z-index:3;
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:#fff;
  background:rgba(7,58,40,.6);padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px);
  font-variant-numeric:tabular-nums}
.galeri-jeda{position:absolute;right:12px;bottom:12px;z-index:3;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  border:0;border-radius:50%;background:rgba(7,58,40,.6);color:#fff;backdrop-filter:blur(4px)}
.galeri-jeda:hover{background:rgba(7,58,40,.8)}
.galeri-jeda:focus-visible{outline:3px solid rgba(255,255,255,.7);outline-offset:2px}
.galeri-jeda .bar{display:block;width:10px;height:11px;border-left:3px solid currentColor;
  border-right:3px solid currentColor}
.galeri-jeda[aria-pressed="true"] .bar{width:0;height:0;border:0;
  border-left:11px solid currentColor;border-top:7px solid transparent;
  border-bottom:7px solid transparent;margin-left:3px}

.galeri-thumb{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.galeri-thumb button{position:relative;width:100%;aspect-ratio:4/3;padding:0;border:0;
  border-radius:10px;overflow:hidden;cursor:pointer;background:var(--paper-2);
  transition:outline-color .18s,opacity .18s;outline:2.5px solid transparent;outline-offset:2px}
.galeri-thumb button:hover{opacity:.86}
.galeri-thumb button[aria-current="true"]{outline-color:var(--green)}
.galeri-thumb button:focus-visible{outline-color:var(--green);outline-width:3px}
.galeri-thumb .ph{position:absolute;inset:0;border-radius:0;font-size:0}
.galeri-thumb .ph .mi{font-size:18px}
.galeri-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.galeri-utama .ph .cap{top:12px;bottom:auto}   /* sudut kiri-bawah sudah dipakai penghitung slide */

.galeri-kredit{margin-top:10px;font-size:12.5px;color:var(--muted)}

@media(max-width:620px){
  .galeri{grid-template-columns:1fr;gap:10px}
  .galeri-thumb{flex-direction:row;gap:10px}
  .galeri-thumb button{flex:1}
}
/* Kalau pengunjung meminta gerak seminimal mungkin, pergantian tidak
   dianimasikan — pemutaran otomatis juga dimatikan lewat bpk.js. */
@media(prefers-reduced-motion:reduce){
  .galeri-utama .ph{transition:none}
}

/* Tautan media sosial & situs di kartu fakta */
.tautan{display:flex;flex-wrap:wrap;gap:8px}
.tautan a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:var(--green-deep);background:var(--green-soft);padding:6px 12px;border-radius:999px;
  transition:background .18s}
.tautan a:hover{background:#D8E9DF}

/* ---------- Listing yang datanya belum lengkap ---------- */
.kosong{display:flex;gap:14px;align-items:flex-start;background:var(--orange-soft);
  border:1px solid var(--orange-line);border-radius:16px;padding:20px 22px;color:#7C3A12;line-height:1.6}
.kosong .mi{font-size:24px;color:var(--orange);flex:none;margin-top:2px}
.kosong h2{font-size:17px;color:#5A400C;margin-bottom:6px}
.kosong p{margin:0;font-size:14.5px}
.kosong .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.facts .r.hilang .v{color:var(--muted);font-style:italic}
.galeri-terkunci{border:1.5px dashed var(--line-strong);border-radius:16px;padding:34px 26px;
  text-align:center;background:var(--paper)}
.galeri-terkunci .mi{font-size:30px;color:var(--muted)}
.galeri-terkunci h2{font-size:17px;margin:10px 0 6px}
.galeri-terkunci p{margin:0 auto;max-width:44ch;font-size:14px;color:var(--muted)}
.galeri-terkunci .btn{margin-top:16px}

/* kartu info usaha (sidebar) */
.infocard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:var(--shadow);position:sticky;top:138px}
@media(max-width:960px){.infocard{position:static}}
.infocard .hd{padding:18px 20px;background:var(--paper);border-bottom:1px solid var(--line)}
.infocard .hd .nm{font-weight:800;font-size:16.5px;line-height:1.25}
.infocard .hd .ct{font-size:13px;color:var(--muted);margin-top:3px}
.infocard .r{display:flex;gap:13px;padding:13px 20px;border-bottom:1px solid var(--line);font-size:14.5px;align-items:flex-start}
.infocard .r .mi{font-size:20px;color:var(--muted);margin-top:1px}
.infocard .r .v{min-width:0;word-break:break-word}
.infocard .r .v b{display:block;font-size:12.5px;color:var(--muted);font-weight:600}
.infocard .acts{padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.infocard .acts .btn{width:100%}
.infocard .note{padding:0 20px 18px;font-size:12px;color:var(--muted);line-height:1.5}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ================= HEADER BARU (pita hijau, panel melebar) =================
   Dipindahkan dari header-demo.css. Token warnanya sudah dipetakan ke
   token situs, dan hurufnya ikut --sans supaya menyatu dengan halaman.
   Sementara ini hanya dipakai di beranda; halaman lain masih header lama. */
/* ---------- Pita header ---------- */
.kepala{position:sticky;top:0;z-index:80;background:var(--green)}
.kepala .baris{display:flex;align-items:center;gap:18px;height:72px}

.logo{flex:none;display:block}
.logo img{height:34px;width:auto;display:block}

/* Kolom pencarian */
.cari{position:relative;flex:1 1 auto;min-width:0;max-width:440px;display:flex;align-items:center;gap:10px;
  background:#fff;border-radius:999px;padding:0 20px;height:46px;
  border:2px solid transparent;transition:border-color .2s,box-shadow .2s}
.cari:focus-within{border-color:var(--tbl-kuning);box-shadow:0 0 0 4px rgba(247,222,63,.24)}
.cari .mi{font-size:21px;color:var(--muted);flex:none}
.cari input::placeholder{color:transparent}

/* Petunjuk pencarian yang berganti sendiri.
   Dulu dua tahap — teks lama keluar, jeda, teks baru masuk — dan jedanya
   itu yang membuatnya terasa patah. Sekarang keduanya berada di satu
   gulungan yang digeser sekali jalan, jadi yang lama naik keluar tepat
   saat yang baru naik masuk, tanpa celah. */
.cari-kolom{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.cari-kolom input{width:100%;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--sans);font-size:14.5px;color:var(--ink);position:relative;z-index:1}
.cari-petunjuk{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;
  transition:opacity .18s}
.cari-jendela{position:relative;width:100%;height:22px;overflow:hidden}
.cari-rol{position:absolute;left:0;right:0;top:0;will-change:transform}
.cari-rol > span{display:block;height:22px;line-height:22px;font-size:14.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Begitu kolom difokus atau sudah ada isinya, petunjuknya menyingkir. */
.cari:focus-within .cari-petunjuk,
.cari input:not(:placeholder-shown) ~ .cari-petunjuk{opacity:0}

/* Menu utama */
.menu{display:flex;align-items:center;gap:4px;margin-left:6px}
.menu > li{list-style:none;position:static}
.menu-tombol{display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 18px;
  background:transparent;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:600;color:#fff;
  transition:background .2s,color .2s}
.menu-tombol .mi{font-size:20px;transition:transform .25s var(--luwes)}
.menu-tombol:hover{background:rgba(255,255,255,.12);color:var(--tbl-kuning)}
.menu-tombol[aria-expanded="true"]{background:rgba(255,255,255,.14);color:var(--tbl-kuning)}
.menu-tombol[aria-expanded="true"] .mi{transform:rotate(180deg)}
.menu-tombol:focus-visible{outline:2px solid var(--tbl-kuning);outline-offset:2px}

.kanan{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.tombol-kuning{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 24px;
  border-radius:999px;background:var(--tbl-kuning);color:var(--green-900);
  font-family:var(--sans);font-weight:700;font-size:14.5px;white-space:nowrap;
  transition:transform .2s var(--luwes),background .2s ease}
.tombol-kuning:hover{background:#E9CE2A;transform:translateY(-2px)}
.tombol-kuning:focus-visible{outline:2px solid #fff;outline-offset:2px}

.hamburger{display:none;width:46px;height:46px;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);border:0;border-radius:999px;color:#fff;cursor:pointer}
.hamburger .mi{font-size:24px}

/* ---------- Panel menu melebar ---------- */
.kepala-panel{position:absolute;left:0;right:0;top:100%;background:#fff;
  border-top:1px solid rgba(0,0,0,.06);box-shadow:0 24px 48px rgba(21,32,27,.16);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--luwes),transform .22s var(--luwes),visibility .22s}
.kepala-panel[data-buka]{opacity:1;visibility:visible;transform:none}
.kepala-panel .wrap{padding-top:26px;padding-bottom:26px}
.kp-judul{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.kp-judul h2{margin:0;font-size:17px;letter-spacing:-.01em}
.kp-judul p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.kp-judul .semua{font-size:13.5px;font-weight:600;color:var(--green);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:gap .2s var(--luwes)}
.kp-judul .semua:hover{gap:11px}

.kp-kisi{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media(max-width:1100px){.kp-kisi{grid-template-columns:repeat(4,1fr)}}
@media(max-width:820px){.kp-kisi{grid-template-columns:repeat(3,1fr)}}
.kp-kisi a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;
  transition:background .18s,color .18s}
.kp-kisi a:hover{background:var(--green-tint);color:var(--green)}
.kp-kisi .ik{width:38px;height:38px;flex:none;border-radius:50%;background:var(--green-soft);
  color:var(--green-ikon);display:flex;align-items:center;justify-content:center;transition:background .18s}
.kp-kisi a:hover .ik{background:var(--green);color:#fff}
.kp-kisi .ik .mi{font-size:21px;font-variation-settings:'FILL' 1}
.kp-kisi .tx{min-width:0}
.kp-kisi .tx .nm{display:block;font-size:14px;font-weight:600;line-height:1.3}
.kp-kisi .jm{display:block;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.kp-kisi a.segera .ik{background:var(--line);color:var(--muted)}
.kp-kisi a.segera .nm{color:var(--muted)}

.tirai{position:fixed;inset:0;top:72px;background:rgba(10,43,25,.32);z-index:70;
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s}
.tirai[data-buka]{opacity:1;visibility:visible}

@media(max-width:900px){
  /* Baris atas: logo di kiri, tombol menu di kanan. Pencarian turun ke
     baris kedua selebar layar — di ponsel itu yang paling sering dipakai,
     jadi tidak boleh mengecil demi memuat yang lain. */
  .kepala .baris{flex-wrap:wrap;height:auto;padding:12px 24px 16px;gap:14px;position:relative}
  /* Logo di tengah baris atas; tombol menu tetap di kanan. Logo dibuat
     melayang supaya benar-benar di tengah layar, bukan di tengah sisa
     ruang setelah tombol. */
  .logo{order:1;position:absolute;left:50%;top:12px;transform:translateX(-50%)}
  .logo img{height:30px}
  .kanan{order:2;margin-left:auto;min-height:46px;align-items:center}
  .cari{order:3;flex-basis:100%;max-width:none}
  .menu{display:none}
  .tombol-kuning{display:none}   /* pindah ke dalam laci */
  .hamburger{display:inline-flex}
  /* Panel melebar milik desktop dimatikan; ponsel memakai laci di bawah. */
  .kepala-panel,.tirai{display:none}
}
@media(min-width:901px){ .laci{display:none} }

/* ---------- Laci menu ponsel ---------- */
.laci{position:absolute;left:0;right:0;top:100%;background:#fff;
  border-top:1px solid rgba(0,0,0,.06);box-shadow:0 24px 48px rgba(21,32,27,.16);
  max-height:calc(100vh - 120px);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--luwes),transform .22s var(--luwes),visibility .22s}
.laci[data-buka]{opacity:1;visibility:visible;transform:none}
.laci .wrap{padding-top:18px;padding-bottom:22px}
.laci-kel{padding:14px 0 4px;border-top:1px solid var(--line)}
.laci-kel:first-child{border-top:0;padding-top:4px}
.laci-jdl{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.laci-jdl h2{margin:0;font-size:15px;letter-spacing:-.01em}
.laci-jdl a{font-size:13px;font-weight:600;color:var(--green)}
.laci-kisi{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
@media(max-width:420px){.laci-kisi{grid-template-columns:1fr}}
.laci-kisi a{display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:10px;font-size:14px}
.laci-kisi a:hover{background:var(--green-tint)}
.laci-kisi .ik{width:30px;height:30px;flex:none;border-radius:50%;background:var(--green-soft);
  color:var(--green-ikon);display:flex;align-items:center;justify-content:center}
.laci-kisi .ik .mi{font-size:17px;font-variation-settings:'FILL' 1}
.laci-kisi a.segera{color:var(--muted)}
.laci-kisi a.segera .ik{background:var(--line);color:var(--muted)}
.laci-tombol{margin-top:18px}
.laci-tombol .tombol-kuning{display:flex;width:100%;justify-content:center}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important}
}


/* ---------- 404 ----------
   Metafora jalan. Patok kilometer (kepala kuning, badan putih) menyebut
   posisi sekarang — Km 404, yang tidak ada. Rambu hijau di bawahnya
   memberi tiga jalan keluar, bentuknya meniru rambu penunjuk arah
   sungguhan: dasar hijau dengan garis putih di dalam tepinya. Kuning di
   patok bukan tombol, jadi tidak melanggar aturan "kuning = klik":
   yang bisa diklik di halaman ini berubah kuning saat disentuh.
   Awalan nf- supaya tidak bertabrakan dengan kelas global. */
.nf-atas{padding:64px 0 36px}
.nf-baris{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px;align-items:center}
.nf-teks h1{font-size:clamp(32px,4.4vw,50px);letter-spacing:-.025em;line-height:1.08;
  margin-top:14px;max-width:15ch;animation:rise .7s .08s both}
.nf-teks .eyebrow{animation:rise .7s .02s both}
.nf-sub{font-size:17.5px;color:var(--ink-2);line-height:1.6;max-width:50ch;margin:18px 0 0;
  animation:rise .7s .14s both}
.nf-cari{margin-top:28px;max-width:560px}
.nf-cari .mi{color:var(--muted);font-size:21px;flex:none}
.nf-cari input{min-width:0;-webkit-appearance:none;appearance:none}
.nf-cari:focus-within{border-color:var(--green);box-shadow:0 0 0 4px rgba(26,99,60,.12)}
.nf-sering{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;
  animation:rise .7s .34s both}
.nf-sering .lbl{font-size:12.5px;font-weight:600;color:var(--muted);margin-right:4px}

/* Patok. Sedikit miring, seperti patok yang sudah lama tertancap di
   bahu jalan — cukup untuk memberi kesan "tersesat" tanpa jadi kartun. */
.nf-patok{display:flex;flex-direction:column;align-items:center}
.nf-patok .tiang{position:relative;width:150px;height:224px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  background:#fff;border:1.5px solid var(--line-strong);border-radius:75px 75px 12px 12px;
  box-shadow:var(--shadow-lift);transform:rotate(-4deg);transform-origin:50% 100%;
  animation:nf-tancap 1s var(--luwes) .2s both}
.nf-patok .kepala{width:100%;height:84px;flex:none;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:12px;background:var(--tbl-kuning);
  font-weight:800;font-size:22px;letter-spacing:.1em;color:var(--green-900)}
.nf-patok .km{margin-top:20px;font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--muted)}
.nf-patok .angka{margin-top:2px;font-weight:800;font-size:56px;line-height:1;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.nf-patok .bayang{width:200px;height:16px;margin-top:-7px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(21,32,27,.20),transparent)}
@keyframes nf-tancap{
  from{opacity:0;transform:translateY(-26px) rotate(3deg)}
  60%{opacity:1}
  to{opacity:1;transform:rotate(-4deg)}
}

/* Rambu penunjuk arah */
.nf-arah{padding:8px 0 72px}
.nf-rambu{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:8px;
  background:var(--green);border-radius:18px;box-shadow:var(--shadow-lift);animation:rise .7s .4s both}
.nf-rambu::before{content:"";position:absolute;inset:6px;border:2px solid rgba(255,255,255,.9);
  border-radius:13px;pointer-events:none}
.nf-rambu a{position:relative;display:flex;align-items:center;gap:16px;padding:26px 28px;
  border-radius:12px;color:#fff}
.nf-rambu a + a::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:1.5px;
  background:rgba(255,255,255,.3)}
.nf-rambu .mi{flex:none;font-size:34px;transition:transform .25s var(--luwes),color .18s ease}
.nf-rambu .mi.kiri{transform:scaleX(-1)}
.nf-rambu .mi.atas{transform:rotate(-90deg)}
.nf-rambu .tx{min-width:0}
.nf-rambu b{display:block;font-size:21px;font-weight:700;letter-spacing:-.01em;transition:color .18s ease}
.nf-rambu .tx span{display:block;font-size:13px;color:rgba(255,255,255,.78);margin-top:3px}
/* Panah bergeser ke arah yang ditunjuknya. Urutan transform penting:
   geser dulu, baru dibalik/diputar — jadi geserannya ikut arah panah. */
.nf-rambu a:hover b,.nf-rambu a:hover .mi{color:var(--tbl-kuning)}
.nf-rambu a:hover .mi{transform:translateX(4px)}
.nf-rambu a:hover .mi.kiri{transform:scaleX(-1) translateX(4px)}
.nf-rambu a:hover .mi.atas{transform:rotate(-90deg) translateX(4px)}
.nf-rambu a:focus-visible{outline:3px solid var(--tbl-kuning);outline-offset:-3px}

.nf-lapor{margin:22px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.nf-lapor a{color:var(--green-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}

@media(max-width:820px){
  .nf-atas{padding:36px 0 28px}
  .nf-baris{grid-template-columns:1fr;gap:26px}
  /* Patok naik ke atas judul dan diperkecil. */
  .nf-patok{order:-1}
  .nf-patok .tiang{width:104px;height:156px;border-radius:52px 52px 10px 10px}
  .nf-patok .kepala{height:58px;padding-bottom:8px;font-size:16px}
  .nf-patok .km{margin-top:13px;font-size:10.5px}
  .nf-patok .angka{font-size:38px}
  .nf-patok .bayang{width:140px;height:12px;margin-top:-5px}
  .nf-teks{text-align:center}
  .nf-teks h1{margin-left:auto;margin-right:auto}
  .nf-sub{margin-left:auto;margin-right:auto}
  /* Kotak cari header sudah terlihat persis di atasnya di layar sempit;
     dua kotak cari bertumpuk dalam satu layar cuma bikin bingung. Yang
     tersisa di sini jalan pintasnya saja. */
  .nf-cari{display:none}
  .nf-sering{margin-top:22px}
  .nf-sering{justify-content:center}
  .nf-rambu{grid-template-columns:1fr}
  .nf-rambu a{padding:18px 22px}
  .nf-rambu a + a::before{left:22px;right:22px;top:0;bottom:auto;width:auto;height:1.5px}
  .nf-rambu .mi{font-size:28px}
  .nf-rambu b{font-size:18px}
}
@media(max-width:480px){
  .nf-sering .lbl{width:100%;margin:0 0 2px}
}
@media(prefers-reduced-motion:reduce){
  .nf-patok .tiang,.nf-teks h1,.nf-teks .eyebrow,.nf-sub,.nf-sering,.nf-rambu{animation:none}
}

/* ---------- Hasil pencarian ----------
   Kotak cari tidak diulang di badan halaman: kolom cari di header sudah
   terisi kata kuncinya, jadi di situlah orang mengubah pencarian. Badan
   halaman cuma judul, saringan, dan hasil. Kartunya komponen yang sama
   dengan beranda (.tempatcard, .panduan-card, .katpil, .jenis-blok) —
   hasil pencarian harus terasa bagian dari situs yang sama.
   Awalan cr- supaya tidak bertabrakan dengan kelas global (.cari itu
   kolom cari di header). */
.cr-kepala{padding:16px 0 0}
.cr-kepala h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.025em;line-height:1.1;
  margin-top:12px;max-width:24ch;overflow-wrap:anywhere}
.cr-kepala h1 .q{color:var(--green)}
.cr-ringkas{margin:12px 0 0;font-size:15.5px;color:var(--ink-2);max-width:62ch;line-height:1.55}
.cr-ringkas b{color:var(--ink);font-variant-numeric:tabular-nums}

/* Saringan: kontrol bersegmen. Yang aktif putih di atas abu dengan teks
   hijau — cukup jelas tanpa bidang hijau pekat yang menyaingi judul. */
.cr-saring{display:inline-flex;gap:4px;padding:5px;margin-top:26px;background:#f5f5f5;border-radius:999px}
.cr-saring[hidden]{display:none}
.cr-saring button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 18px;
  border:0;border-radius:999px;background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink-2);
  transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.cr-saring button:hover{color:var(--green-deep)}
.cr-saring button[aria-pressed="true"]{background:#fff;color:var(--green-deep);
  box-shadow:0 1px 3px rgba(21,32,27,.10)}
.cr-saring button:focus-visible{outline:3px solid rgba(26,99,60,.38);outline-offset:1px}
.cr-saring .n{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:#e9ece9;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-variant-numeric:tabular-nums;transition:background .2s ease,color .2s ease}
.cr-saring button[aria-pressed="true"] .n{background:var(--green);color:#fff}

.cr-blok{padding:0;margin-top:40px}
.cr-blok[hidden]{display:none}
.cr-blok .sec-head-kecil{margin-top:0}
[data-keadaan="ada"] > .cr-blok:first-of-type{margin-top:28px}

/* Hasil teratas — panduan yang judulnya menjawab langsung kata kuncinya. */
.cr-unggul{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  border-radius:22px;overflow:hidden;background:#f5f5f5;color:inherit;
  box-shadow:0 1px 2px rgba(21,32,27,.05);transition:box-shadow .35s ease}
.cr-unggul:hover{box-shadow:var(--shadow-lift)}
.cr-unggul .foto{position:relative;min-height:320px;overflow:hidden;background:var(--paper-2)}
.cr-unggul .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--luwes)}
.cr-unggul:hover .foto img{transform:scale(1.05)}
.cr-unggul .foto .kk{position:absolute;left:16px;top:16px;z-index:1;font-size:10.5px;padding:5px 11px;
  background:rgba(10,30,20,.4)}
.cr-unggul .isi{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:36px 42px}
.cr-unggul h2{font-size:clamp(22px,2.4vw,29px);letter-spacing:-.015em;line-height:1.2;transition:color .25s ease}
.cr-unggul:hover h2{color:var(--green-deep)}
.cr-unggul p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:46ch}
.cr-unggul .meta{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.cr-unggul .baca{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font-size:14px;font-weight:700;color:var(--green)}
.cr-unggul .baca .mi{font-size:18px;transition:transform .25s var(--luwes)}
.cr-unggul:hover .baca .mi{transform:translateX(4px)}
.cr-unggul:focus-visible{outline:3px solid rgba(26,99,60,.38);outline-offset:3px}

.cr-jenis{margin-top:28px}
.cr-jenis + .cr-jenis{margin-top:14px}

/* Penutup — tampil di kedua keadaan. Abu yang sama dengan .jenis-blok. */
.cr-usul{margin:56px 0 72px;padding:30px 32px;border-radius:20px;background:#f5f5f5}
.cr-usul .atas{display:flex;align-items:center;justify-content:space-between;gap:20px 28px;flex-wrap:wrap}
.cr-usul h2{font-size:22px;letter-spacing:-.01em}
.cr-usul p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:56ch}
.cr-usul .populer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:22px;padding-top:20px;border-top:1px solid rgba(21,32,27,.08)}
.cr-usul .populer .lbl{font-size:12.5px;font-weight:600;color:var(--muted);margin-right:4px}
.cr-usul .chip{border-color:transparent;box-shadow:0 1px 2px rgba(21,32,27,.06)}
.cr-usul .chip:hover{border-color:var(--green)}

@media(max-width:760px){
  .cr-unggul{grid-template-columns:1fr}
  .cr-unggul .foto{min-height:0;aspect-ratio:16/10}
  .cr-unggul .isi{padding:20px 20px 24px;gap:10px}
  .cr-usul{padding:24px 22px;margin:44px 0 56px}
  .cr-usul .atas .btn{width:100%}
}
@media(max-width:480px){
  /* Tiga tombol saringan dibagi rata selebar layar. */
  .cr-saring{display:flex}
  .cr-saring button{flex:1;justify-content:center;padding:0 10px;font-size:13.5px}
  .cr-usul .populer .lbl{width:100%;margin:0 0 2px}
}

/* ---------- Direktori ----------
   Satu template, dua tampilan: ikhtisar (3 tempat per jenis) dan satu
   jenis penuh (?jenis=). Saringan ada di rel kiri yang menempel saat
   digulir — selalu terjangkau, dan masih muat kalau nanti saringan
   fasilitas ditambahkan. Semua saringan tautan biasa; server yang
   menyaring, jadi tidak ada kontrol pajangan. Kartunya .tempatcard yang
   sama dengan beranda. Awalan dr-. */
.dr-kepala{padding:16px 0 0}
.dr-kepala h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.025em;line-height:1.1;margin-top:12px}

.dr-tata{display:grid;grid-template-columns:248px minmax(0,1fr);gap:44px;align-items:start;margin-top:32px}

/* ---- rel saringan ---- */
/* Tingginya dibatasi setinggi layar dan sisanya digulir di dalam rel,
   sama seperti rel di halaman tempat — di laptop 768px isinya bisa lebih
   tinggi daripada ruang yang ada. */
.dr-sisi{position:sticky;top:96px;max-height:calc(100vh - 116px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
  padding:2px 8px 16px 0;margin-right:-8px}
.dr-sisi::-webkit-scrollbar{width:6px}
.dr-sisi::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px}
.dr-sisi-kel + .dr-sisi-kel{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.dr-sisi .jt{margin:0 0 10px;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep)}

.dr-pil{display:flex;flex-direction:column;gap:2px}
.dr-pil a{display:flex;align-items:center;gap:10px;min-height:38px;padding:5px 8px 5px 5px;
  border-radius:999px;color:var(--ink-2);font-size:14px;font-weight:600;
  transition:background .2s ease,color .2s ease,opacity .2s ease}
.dr-pil .ic{width:28px;height:28px;flex:none;border-radius:50%;background:var(--green-soft);
  display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.dr-pil .ic .mi{font-size:16px;color:var(--green-ikon);font-variation-settings:'FILL' 1;transition:color .2s ease}
.dr-pil .lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-pil .n{flex:none;min-width:24px;height:22px;padding:0 7px;border-radius:999px;
  background:var(--paper-2);color:var(--muted);font-size:11.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;
  transition:background .2s ease,color .2s ease}
.dr-pil .n:empty{display:none}
/* Pilihan yang hasilnya nol tetap bisa diklik (halamannya jujur bilang
   kosong), tapi diredupkan supaya tidak dikira berisi. */
.dr-pil a.nol{opacity:.5}
/* Disorot: hijau muda — sama dengan tampilan kecamatan terpilih yang
   lama. (Sempat dicoba kuning penuh; terlalu keras untuk daftar sepanjang
   ini, dibatalkan 30 Sep.) */
.dr-pil a:hover{background:var(--green-tint);color:var(--green-deep);opacity:1}
.dr-pil a:hover .n{background:var(--green-soft);color:var(--green-deep)}
/* Terpilih: bidang hijau penuh, teks dan ikon KUNING — kuning di atas
   hijau pekat terbaca 5,3:1, sama seperti menu header saat disorot.
   Ditulis setelah :hover supaya pilihan terpilih tetap hijau saat disorot. */
.dr-pil a[aria-current="page"]{background:var(--green);color:var(--tbl-kuning);opacity:1}
.dr-pil a[aria-current="page"] .ic{background:rgba(255,255,255,.14)}
.dr-pil a[aria-current="page"] .ic .mi{color:var(--tbl-kuning)}
.dr-pil a[aria-current="page"] .n{background:rgba(255,255,255,.16);color:var(--tbl-kuning)}
/* Kecamatan: tanpa ikon, dengan bulatan kecil seperti pilihan radio —
   memang cuma satu yang bisa dipilih. */
.dr-pil-kec a{padding-left:12px}
.dr-pil-kec a::before{content:"";width:14px;height:14px;flex:none;box-sizing:border-box;border-radius:50%;
  border:1.5px solid var(--line-strong);background:#fff;transition:border-color .18s ease,border-width .18s ease}
.dr-pil-kec a:hover::before{border-color:var(--green)}
.dr-pil-kec a[aria-current="page"]::before{border:4.5px solid var(--tbl-kuning);background:var(--green)}

/* <details> sebagai rel: kepala (summary) di layar lebar cuma judul
   kelompok — nilai & panahnya baru muncul di bawah 980px. */
.dr-dd > summary{display:block;list-style:none}
.dr-dd > summary::-webkit-details-marker{display:none}
.dr-dd-nilai,.dr-dd .panah{display:none}
.dr-dd-teks{display:block}
@media(min-width:981px){.dr-dd > summary{cursor:default}}

.dr-segera{margin:10px 0 0;padding:0 10px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.dr-segera .dot{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;
  background:#C9A227;vertical-align:1px}

/* ---- daftar ---- */
.dr-ringkas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0;
  min-height:32px;font-size:14.5px;color:var(--ink-2)}
.dr-ringkas b{color:var(--ink);font-variant-numeric:tabular-nums}
/* Chip saringan aktif — tanda silang menghapus saringan itu saja. */
.dr-aktif{display:inline-flex;align-items:center;gap:3px;height:32px;padding:0 8px 0 13px;
  border-radius:999px;background:var(--green-tint);border:1px solid var(--green-soft);
  color:var(--green-deep);font-size:13.5px;font-weight:600;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.dr-aktif .mi{font-size:17px;transition:transform .2s var(--luwes)}
.dr-aktif:hover{background:var(--green-soft);border-color:var(--green)}
.dr-aktif:hover .mi{transform:rotate(90deg)}
.dr-aktif:focus-visible{outline:3px solid rgba(26,99,60,.38);outline-offset:2px}
.dr-hapus{font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.dr-hapus:hover{color:var(--green-deep)}

/* Satu kelompok per jenis. Pergantian kelompok ditandai ikon, warna, dan
   jarak — tanpa garis bawah (lihat CATATAN-DESAIN, judul bagian). */
.dr-kel{padding:0;margin-top:40px;scroll-margin-top:96px}
.dr-kel[hidden],.tempatcard[hidden]{display:none}
.dr-kel-kepala{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.dr-kel-kepala .ik{width:40px;height:40px;flex:none;border-radius:50%;background:var(--green-soft);
  color:var(--green-ikon);display:flex;align-items:center;justify-content:center}
.dr-kel-kepala .ik .mi{font-size:21px;font-variation-settings:'FILL' 1}
.dr-kel-kepala h2{font-size:23px;letter-spacing:-.012em;color:var(--green)}
.dr-kel-kepala .link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:14px;font-weight:600;color:var(--green)}
.dr-kel-kepala .link .mi{font-size:17px;transition:transform .2s var(--luwes)}
.dr-kel-kepala .link:hover .mi{transform:translateX(3px)}
.dr-kel-kepala .link[hidden]{display:none}
/* Tampilan satu jenis: judulnya sudah dibawa h1, kepala kelompok tidak diulang. */
.dr-satu .dr-kel{margin-top:22px}
.dr-satu .dr-kel-kepala{display:none}
/* Di samping rel, kisi kartu tiga kolom. */
@media(min-width:981px){.dr-isi .tempat-grid{grid-template-columns:repeat(3,1fr)}}

.dr-kosong{margin-top:22px;padding:44px 24px;border-radius:20px;background:#f5f5f5;text-align:center}
.dr-kosong[hidden]{display:none}
.dr-kosong > .mi{font-size:32px;color:#8FA396}
.dr-kosong h2{font-size:21px;margin-top:10px}
.dr-kosong p{margin:8px auto 18px;font-size:14.5px;color:var(--ink-2);max-width:44ch}

.dr-sumber{margin:52px 0 0;padding-top:20px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.6;color:var(--muted);max-width:92ch}
.dr-sumber a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}

/* Di bawah 980px rel dibubarkan jadi dua tombol dropdown berdampingan.
   Tombol menyebut pilihan yang aktif; kalau yang aktif bukan "Semua",
   tombolnya ikut gaya terpilih (hijau, teks kuning). Daftarnya melayang
   di bawah tombol, selebar dua tombol, isinya sama persis dengan rel. */
@media(max-width:980px){
  /* minmax(0,1fr), bukan 1fr (lihat CATATAN-DESAIN, jebakan teknis). */
  .dr-tata{grid-template-columns:minmax(0,1fr);gap:0;margin-top:22px}
  .dr-sisi,.dr-isi{min-width:0}
  .dr-sisi{position:relative;top:auto;z-index:30;max-height:none;overflow:visible;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dr-sisi-kel + .dr-sisi-kel{margin:0;padding:0;border:0}
  .dr-dd > summary{display:flex;align-items:center;gap:8px;height:52px;padding:0 12px 0 18px;
    border-radius:999px;background:#fff;border:1.5px solid var(--line-strong);cursor:pointer;
    font-size:14px;font-weight:600;color:var(--ink);-webkit-tap-highlight-color:transparent;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
  .dr-dd > summary:focus-visible{outline:3px solid rgba(26,99,60,.38);outline-offset:2px}
  .dr-dd[open] > summary{border-color:var(--green);box-shadow:0 0 0 3px rgba(26,99,60,.12)}
  /* Dua baris: label kelompok kecil di atas, pilihan aktif di bawah. */
  .dr-dd-teks{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .dr-dd .jt{margin:0;font-size:9.5px;letter-spacing:.14em;line-height:1.2;color:var(--muted)}
  .dr-dd-nilai{display:block;min-width:0;font-size:14.5px;line-height:1.25;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dr-dd .panah{display:block;flex:none;font-size:20px;color:var(--muted);transition:transform .25s var(--luwes)}
  .dr-dd[open] .panah{transform:rotate(180deg)}
  /* Tombolnya tetap putih walau ada yang terpilih — nilainya sudah
     menyebut pilihannya, dan chip di bawahnya menandai saringan aktif.
     Tombol hijau penuh terlalu berat (30 Sep). */

  .dr-dd-isi{position:absolute;left:0;right:0;top:calc(100% + 8px);padding:8px;
    background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lift);
    max-height:min(62vh,460px);overflow-y:auto;overscroll-behavior:contain;
    animation:dr-turun .22s var(--luwes)}
  /* Di dalam dropdown, pilihan terpilih cukup hijau muda seperti sorotan —
     bukan hijau penuh bertulisan kuning seperti di rel desktop. */
  .dr-dd-isi a[aria-current="page"]{background:var(--green-tint);color:var(--green-deep)}
  .dr-dd-isi a[aria-current="page"] .ic{background:var(--green-soft)}
  .dr-dd-isi a[aria-current="page"] .ic .mi{color:var(--green-ikon)}
  .dr-dd-isi a[aria-current="page"] .n{background:var(--green-soft);color:var(--green-deep)}
  .dr-dd-isi .dr-pil-kec a[aria-current="page"]::before{border:4.5px solid var(--green);background:#fff}
  .dr-segera{padding:0 12px 6px}
  .dr-ringkas{margin-top:20px}
}
@keyframes dr-turun{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dr-dd-isi{animation:none}}
@media(max-width:640px){
  .dr-kel{margin-top:36px}
  .dr-kel-kepala{gap:10px;margin-bottom:14px}
  .dr-kel-kepala .ik{width:34px;height:34px}
  .dr-kel-kepala .ik .mi{font-size:18px}
  .dr-kel-kepala h2{font-size:19px;white-space:nowrap}
  .dr-kel-kepala .link{font-size:13px}
  /* "Semua 17 rumah sakit" terlalu panjang di samping judulnya; cukup angkanya. */
  .dr-kel-kepala .link .jm{display:none}
}

/* ---------- Tentang Kami ----------
   Dua tingkat lebar: teks pembuka dikunci pendek, kutipan dan kartu
   melebar penuh. Judul bagian hijau tanpa garis bawah. Jingga hanya di
   kartu "Untuk pemilik usaha" — satu-satunya jalur berbayar di sini.
   Awalan tk-. */
.tk-kepala{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;
  align-items:center;padding:16px 0 0}
.tk-kepala h1{font-size:clamp(34px,5vw,58px);letter-spacing:-.03em;line-height:1.05;
  margin-top:12px;max-width:16ch}
.tk-lede{margin:22px 0 0;font-size:18.5px;line-height:1.65;color:var(--ink-2);max-width:62ch}

/* Logo di kanan hero, tanpa bingkai. Berkasnya punya ruang transparan
   lebar di sekeliling huruf (isi logo cuma ±69% x 36% bidang gambar),
   jadi keterangan di bawahnya ditarik naik supaya tidak mengambang jauh.
   Cincin berpusat di pin (±47% dari atas gambar). */
.tk-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;animation:rise .8s .15s both}
.tk-logo-gambar{position:relative;width:100%;max-width:460px}
.tk-logo img{position:relative;z-index:1;display:block;width:100%;height:auto}
.tk-logo p{position:relative;z-index:1;margin:-12% 0 0;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep)}
.tk-logo .cincin{position:absolute;left:50%;top:47%;width:120px;height:120px;margin:-60px 0 0 -60px;
  border-radius:50%;border:1.5px solid rgba(26,99,60,.16);
  animation:tk-ping 6s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.tk-logo .cincin:nth-child(2){animation-delay:2s}
.tk-logo .cincin:nth-child(3){animation-delay:4s}
@keyframes tk-ping{
  0%{transform:scale(.6);opacity:0}
  15%{opacity:1}
  100%{transform:scale(3.2);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .tk-logo{animation:none}
  .tk-logo .cincin{animation:none;opacity:1}
  .tk-logo .cincin:nth-child(2){transform:scale(1.8);opacity:.6}
  .tk-logo .cincin:nth-child(3){transform:scale(2.6);opacity:.3}
}

/* Kutipan melebar penuh, hijau rata tanpa gradasi. Tanda kutipnya hijau
   pudar, bukan kuning — kuning dicadangkan untuk yang bisa diklik. */
.tk-kutip{position:relative;overflow:hidden;margin:56px 0 0;padding:64px 60px 56px;
  border-radius:24px;background:var(--green);color:#fff;text-align:center}
/* Kalimatnya di tengah bidang, bukan rata kiri — rata kiri menyisakan
   separuh kanan bidang hijau kosong. */
.tk-kutip::before{content:"\201C";position:absolute;left:50%;top:-30px;transform:translateX(-50%);
  font-size:220px;line-height:1;font-weight:800;color:rgba(255,255,255,.1);pointer-events:none}
.tk-kutip blockquote{position:relative;margin:0 auto;max-width:32ch;
  font-size:clamp(24px,3.3vw,40px);line-height:1.25;font-weight:700;letter-spacing:-.02em}
.tk-kutip figcaption{position:relative;margin-top:20px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#B7E3CC}

.tk-bagian{padding:0;margin-top:76px}
.tk-bagian .sec-head h2{color:var(--green)}
.tk-bagian .sec-head .link .mi{font-size:17px;transition:transform .2s var(--luwes)}
.tk-bagian .sec-head .link:hover .mi{transform:translateX(3px)}

.tk-tiga{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tk-kartu{display:flex;flex-direction:column;gap:12px;padding:28px 26px 26px;border-radius:20px;
  background:#f5f5f5;color:inherit;transition:box-shadow .3s ease,transform .3s var(--luwes)}
.tk-kartu:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.tk-kartu:focus-visible{outline:3px solid rgba(26,99,60,.38);outline-offset:3px}
.tk-kartu .ik{width:48px;height:48px;border-radius:50%;background:var(--green-soft);color:var(--green-ikon);
  display:flex;align-items:center;justify-content:center}
.tk-kartu .ik .mi{font-size:24px;font-variation-settings:'FILL' 1}
.tk-kartu h3{margin-top:6px;font-size:19.5px;letter-spacing:-.01em}
.tk-kartu p{flex:1;margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.tk-kartu .ke{display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:14px;font-weight:700;color:var(--green)}
.tk-kartu .ke .mi{font-size:18px;transition:transform .25s var(--luwes)}
.tk-kartu:hover .ke .mi{transform:translateX(4px)}
.tk-kartu.jual .ik{background:var(--orange-soft);color:var(--orange-deep)}
.tk-kartu.jual .ke{color:var(--orange-deep)}

.tk-cara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 52px}
.tk-cara > div{display:flex;gap:18px;padding:26px 0 28px;border-top:1px solid var(--line)}
.tk-cara .no{flex:none;width:38px;font-size:22px;font-weight:800;line-height:1.2;
  color:var(--green);font-variant-numeric:tabular-nums}
.tk-cara h3{font-size:18px;letter-spacing:-.008em}
.tk-cara p{margin:8px 0 0;font-size:15px;line-height:1.65;color:var(--ink-2);max-width:52ch}

.tk-batas{margin:56px 0 0;line-height:1.6}
.tk-batas > .mi{flex:none;font-size:20px;color:#B8860B;margin-top:1px}
.tk-akhir{padding:64px 0 72px}

@media(max-width:900px){
  .tk-kepala{grid-template-columns:minmax(0,1fr);gap:28px}
  /* Satu kolom: logo disembunyikan — logo yang sama sudah ada di header
     tepat di atasnya. */
  .tk-logo{display:none}
  .tk-tiga,.tk-cara{grid-template-columns:minmax(0,1fr)}
  .tk-cara > div:first-child ~ div{border-top:1px solid var(--line)}
}
@media(max-width:640px){
  .tk-lede{font-size:17px}
  .tk-kutip{margin-top:40px;padding:48px 24px 38px;border-radius:20px}
  .tk-kutip::before{top:-22px;font-size:150px}
  .tk-bagian{margin-top:56px}
  .tk-kutip blockquote{font-size:22px}
  /* Kartu jadi mendatar: ikon di kiri, teks di kanan — tiga kartu
     bertumpuk dengan ikon di atas terlalu tinggi di ponsel. */
  .tk-kartu{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:6px;
    padding:20px 20px 20px 18px}
  .tk-kartu .ik{grid-row:1 / span 3;width:44px;height:44px}
  .tk-kartu .ik .mi{font-size:22px}
  .tk-kartu h3,.tk-kartu p,.tk-kartu .ke{grid-column:2}
  .tk-kartu h3{margin-top:0;font-size:17.5px}
  .tk-akhir{padding:48px 0 56px}
}

/* ---------- Halaman ketentuan (Privasi, Disclaimer) ----------
   Satu template untuk halaman teks panjang. Daftar isi di rel kiri yang
   menempel — pola yang sama dengan rel direktori dan halaman tempat —
   dengan bagian yang sedang dibaca ditandai hijau muda. Teks dikunci 66ch,
   tabel boleh selebar kolom (dua tingkat lebar). Judul bagian hijau tanpa
   garis bawah. Di bawah 980px daftar isi jadi satu dropdown. Awalan kt-. */
.kt-kepala{padding:16px 0 0;max-width:820px}
.kt-kepala h1{font-size:clamp(32px,4.4vw,48px);letter-spacing:-.025em;line-height:1.08;margin-top:12px}
.kt-lede{margin:16px 0 0;font-size:17.5px;line-height:1.65;color:var(--ink-2);max-width:62ch}
.kt-tanggal{margin:14px 0 0;font-size:13px;color:var(--muted)}
.kt-tanggal b{color:var(--ink);font-weight:600}

.kt-tata{display:grid;grid-template-columns:236px minmax(0,1fr);gap:56px;align-items:start;
  margin-top:40px;padding-bottom:80px}

/* ---- rel daftar isi ---- */
.kt-sisi{position:sticky;top:96px;max-height:calc(100vh - 116px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;padding:2px 8px 12px 0;margin-right:-8px}
.kt-dd > summary{display:block;list-style:none}
.kt-dd > summary::-webkit-details-marker{display:none}
@media(min-width:981px){.kt-dd > summary{cursor:default}}
.kt-dd .jt{display:block;margin:0 0 10px;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep)}
.kt-dd-teks{display:block}
.kt-dd-nilai,.kt-dd .panah{display:none}
.kt-daftar ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.kt-daftar a{display:flex;align-items:center;gap:10px;min-height:36px;padding:5px 12px;border-radius:999px;
  font-size:14px;font-weight:600;line-height:1.3;color:var(--ink-2);
  transition:background .2s ease,color .2s ease}
.kt-daftar .no{flex:none;width:18px;font-size:12px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;transition:color .2s ease}
.kt-daftar .lb{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kt-daftar a:hover{background:var(--green-tint);color:var(--green-deep)}
/* Bagian yang sedang dibaca: hijau muda, angkanya hijau. Sengaja tenang —
   tanda ini berpindah terus selama digulir. */
.kt-daftar a.kini{background:var(--green-tint);color:var(--green-deep)}
.kt-daftar a.kini .no{color:var(--green)}

/* ---- teks ---- */
.kt-teks{min-width:0;font-size:16.5px;line-height:1.75;color:var(--ink-2)}
.kt-teks > :not(.kt-tabel){max-width:66ch}
.kt-teks p{margin:0 0 14px}
.kt-teks h2{display:flex;align-items:baseline;gap:12px;margin:48px 0 12px;
  font-size:23px;line-height:1.25;letter-spacing:-.012em;color:var(--green);scroll-margin-top:100px}
.kt-teks h2 .no{flex:none;min-width:22px;font-size:15px;font-weight:800;color:var(--green);opacity:.5;
  font-variant-numeric:tabular-nums}
.kt-teks h3{margin:24px 0 6px;font-size:17px;line-height:1.35;color:var(--ink)}
.kt-teks ul{margin:0 0 16px;padding-left:20px}
.kt-teks li{margin:5px 0}
.kt-teks li::marker{color:var(--green)}
.kt-teks strong,.kt-teks b{color:var(--ink)}
.kt-teks a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
.kt-teks a:hover{color:var(--green)}

/* Ringkasan di atas: hijau muda rata, tanpa garis tebal di sisi. */
.kt-ringkas{padding:22px 26px 10px;border-radius:18px;background:var(--green-tint);border:1px solid var(--green-soft)}
/* Bobot selektor disamakan dengan aturan judul bab (.kt-teks h2) plus satu,
   supaya jarak & ukuran judul bab versi ponsel tidak ikut terkena. */
.kt-teks .kt-ringkas h2{display:block;margin:0 0 8px;font-size:17px;color:var(--green-deep)}
.kt-darurat{line-height:1.6}
.kt-darurat > .mi{flex:none;font-size:20px;color:#B8860B;margin-top:1px}
.kt-ringkas + h2,.kt-darurat + h2{margin-top:40px}

.kt-tabel{margin:6px 0 18px;overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.kt-tabel table.data{min-width:560px}

@media(max-width:980px){
  /* minmax(0,1fr), bukan 1fr (lihat CATATAN-DESAIN, jebakan teknis). */
  .kt-tata{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:28px}
  .kt-sisi{position:relative;top:auto;z-index:30;max-height:none;overflow:visible;margin:0;padding:0;min-width:0}
  .kt-dd > summary{display:flex;align-items:center;gap:8px;height:52px;padding:0 14px 0 20px;
    border-radius:999px;background:#fff;border:1.5px solid var(--line-strong);cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:border-color .18s ease,box-shadow .18s ease}
  .kt-dd > summary:focus-visible{outline:3px solid rgba(26,99,60,.38);outline-offset:2px}
  .kt-dd[open] > summary{border-color:var(--green);box-shadow:0 0 0 3px rgba(26,99,60,.12)}
  .kt-dd-teks{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .kt-dd .jt{margin:0;font-size:9.5px;letter-spacing:.14em;line-height:1.2;color:var(--muted)}
  .kt-dd-nilai{display:block;min-width:0;font-size:14.5px;font-weight:600;line-height:1.25;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kt-dd .panah{display:block;flex:none;font-size:20px;color:var(--muted);transition:transform .25s var(--luwes)}
  .kt-dd[open] .panah{transform:rotate(180deg)}
  .kt-dd-isi{position:absolute;left:0;right:0;top:calc(100% + 8px);padding:8px;background:#fff;
    border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lift);
    max-height:min(62vh,460px);overflow-y:auto;overscroll-behavior:contain;animation:dr-turun .22s var(--luwes)}
  /* Header ponsel lebih tinggi (logo + kotak cari, ±133px), jadi judul
     yang dituju dari daftar isi harus berhenti lebih jauh dari atas. */
  .kt-teks h2{margin-top:40px;scroll-margin-top:156px}
}
@media(max-width:640px){
  .kt-lede{font-size:16.5px}
  .kt-teks{font-size:16px}
  .kt-teks h2{font-size:21px}
  .kt-ringkas{padding:18px 20px 8px}
}

/* ---------- Kontak ----------
   Satu kanal utama: WhatsApp. Formulirnya penyusun pesan WhatsApp — tidak
   ada server, tidak ada yang disimpan; tombol kirim membuka WhatsApp dengan
   pesan yang sudah tersusun. Keperluan dipilih lewat kartu radio (kontrol
   sungguhan, bukan hiasan). Jingga hanya di kartu "Kerja sama". Awalan kn-. */
.kn-kepala{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding:16px 0 0}
.kn-kepala h1{font-size:clamp(32px,4.6vw,52px);letter-spacing:-.028em;line-height:1.06;margin-top:12px;max-width:14ch}
.kn-lede{margin:18px 0 0;font-size:17.5px;line-height:1.65;color:var(--ink-2);max-width:52ch}

.kn-wa{position:relative;overflow:hidden;padding:32px 34px 34px;border-radius:24px;background:var(--green);color:#fff}
.kn-wa::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(380px 240px at 88% -10%,rgba(125,214,168,.24),transparent 70%)}
.kn-wa > *{position:relative}
.kn-wa .eyebrow{color:#B7E3CC}
.kn-nomor{display:block;width:max-content;max-width:100%;margin-top:8px;font-size:clamp(28px,3.3vw,40px);
  font-weight:800;letter-spacing:-.02em;line-height:1.15;color:#fff;font-variant-numeric:tabular-nums;
  transition:color .18s ease}
.kn-nomor:hover{color:var(--tbl-kuning)}
.kn-wa p{margin:10px 0 22px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.82);max-width:42ch}
.kn-wa .btn .mi,.kn-kirim .btn .mi{font-size:19px}

.kn-tata{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:56px;align-items:start;
  margin-top:64px;padding-bottom:80px}
.kn-form{padding:0;scroll-margin-top:96px}   /* padding: section global memberi 56px atas */
.kn-form h2{margin-top:10px;font-size:clamp(24px,2.8vw,32px);letter-spacing:-.015em;color:var(--green)}
.kn-form form{display:flex;flex-direction:column;gap:18px;margin-top:22px}

.kn-perlu{margin:0;padding:0;border:0;min-width:0}
.kn-perlu legend{padding:0;margin:0 0 10px;font-size:13.5px;font-weight:700;color:var(--ink)}
.kn-opsi-kisi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kn-opsi{position:relative;display:flex;align-items:flex-start;gap:12px;padding:16px 44px 16px 16px;
  border:1.5px solid var(--line-strong);border-radius:16px;background:#fff;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.kn-opsi input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.kn-opsi .ik{width:38px;height:38px;flex:none;border-radius:50%;background:var(--green-soft);color:var(--green-ikon);
  display:flex;align-items:center;justify-content:center}
.kn-opsi .ik .mi{font-size:20px;font-variation-settings:'FILL' 1}
.kn-opsi .tx{min-width:0}
.kn-opsi b{display:block;font-size:15px;line-height:1.3;color:var(--ink)}
.kn-opsi .tx > span{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--muted)}
.kn-opsi .tx a{color:var(--orange-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* Bulatan radio di sudut — sama dengan pilihan kecamatan di direktori. */
.kn-opsi::after{content:"";position:absolute;right:15px;top:16px;width:18px;height:18px;box-sizing:border-box;
  border-radius:50%;border:1.5px solid var(--line-strong);background:#fff;transition:border .18s ease}
.kn-opsi:hover{border-color:var(--green);background:var(--green-tint)}
.kn-opsi.dipilih,.kn-opsi:has(input:checked){border-color:var(--green);background:var(--green-tint);
  box-shadow:inset 0 0 0 1px var(--green)}
.kn-opsi.dipilih::after,.kn-opsi:has(input:checked)::after{border:5px solid var(--green)}
.kn-opsi:has(input:focus-visible){outline:3px solid rgba(26,99,60,.38);outline-offset:2px}
.kn-opsi.jual .ik{background:var(--orange-soft);color:var(--orange-deep)}

.kn-form .field label .opsi{font-weight:500;color:var(--muted)}
.kn-form .field textarea{min-height:140px}
.kn-kirim{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.kn-kirim .btn{min-width:150px}   /* label "Kirim" saja terlalu pendek untuk tombol utama formulir */
.kn-kirim p{flex:1;min-width:220px;margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* ---- kanal lain ---- */
.kn-sisi{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px}
.kn-sisi .eyebrow{margin-bottom:2px}
.kn-kanal{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;
  background:#fff;color:inherit;transition:border-color .18s ease,background .18s ease}
.kn-kanal:hover{border-color:var(--green);background:var(--green-tint)}
.kn-kanal .ik{width:42px;height:42px;flex:none;border-radius:50%;background:var(--green-soft);color:var(--green-ikon);
  display:flex;align-items:center;justify-content:center}
.kn-kanal .ik .mi{font-size:21px}
.kn-kanal .ik svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8}
.kn-kanal .tx{flex:1;min-width:0}
.kn-kanal b{display:block;font-size:15px;color:var(--ink)}
.kn-kanal .tx > span{display:block;font-size:14px;font-weight:600;color:var(--green-deep);overflow-wrap:anywhere}
.kn-kanal small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.kn-kanal .panah{flex:none;font-size:19px;color:var(--muted);transition:transform .2s var(--luwes),color .2s ease}
.kn-kanal:hover .panah{transform:translate(2px,-2px);color:var(--green)}
.kn-darurat{margin-top:8px;font-size:14px;line-height:1.55}
.kn-darurat > .mi{flex:none;font-size:20px;color:#B8860B;margin-top:1px}

@media(max-width:900px){
  .kn-kepala{grid-template-columns:minmax(0,1fr);gap:28px}
  .kn-tata{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:48px}
  .kn-sisi{position:static}
  .kn-form{scroll-margin-top:156px}
}
@media(max-width:560px){
  .kn-lede{font-size:16.5px}
  .kn-wa{padding:26px 24px 28px;border-radius:20px}
  .kn-opsi-kisi{grid-template-columns:minmax(0,1fr)}
  .kn-kirim .btn{width:100%}
}

/* ---------- Jalur berbayar: Layanan Kami, Pasang Artikel, Formulir ----------
   Tiga halaman satu keluarga. Jingga dipakai untuk semua yang berbayar —
   ikon layanan, harga hemat, kartu paket unggulan, tombol pilih paket.
   Tombol kuning hanya di atas bidang hijau. Harga & isi paket ditulis di
   ../bangun-layanan.py, bukan disunting langsung di HTML. Awalan ly-. */
.ly-kepala{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding:16px 0 0}
.ly-kepala.tunggal{grid-template-columns:minmax(0,1fr)}
.ly-kepala h1{font-size:clamp(32px,4.6vw,52px);letter-spacing:-.028em;line-height:1.06;margin-top:12px;max-width:18ch}
.ly-lede{margin:18px 0 0;font-size:17.5px;line-height:1.65;color:var(--ink-2);max-width:56ch}
.ly-aksi{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* Kartu "tanya dulu" di Layanan Kami: hijau rata seperti kartu WhatsApp di Kontak. */
.ly-tanya{position:relative;overflow:hidden;padding:30px 32px 32px;border-radius:24px;background:var(--green);color:#fff}
.ly-tanya::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(360px 220px at 88% -10%,rgba(125,214,168,.24),transparent 70%)}
.ly-tanya > *{position:relative}
.ly-tanya .eyebrow{color:#B7E3CC}
.ly-tanya h2{margin-top:8px;font-size:26px;letter-spacing:-.015em;color:#fff}
.ly-tanya p{margin:8px 0 20px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.82);max-width:40ch}
.ly-tanya .btn .mi,.ly-langsung .btn .mi{font-size:19px}

/* Kartu sekilas harga di Pasang Artikel. */
.ly-sekilas{padding:28px 30px;border-radius:24px;background:#f5f5f5}
.ly-sekilas .ly-cek{margin-top:16px}

.ly-harga{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:6px}
.ly-harga small{width:100%;font-size:12.5px;font-weight:600;color:var(--muted)}
.ly-harga b{font-size:34px;font-weight:800;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
.ly-harga span{font-size:13.5px;font-weight:600;color:var(--muted)}
.ly-harga.besar b{font-size:44px}

.ly-cek{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.ly-cek li{display:flex;gap:10px;align-items:flex-start}
.ly-cek .mi{flex:none;font-size:18px;color:var(--green);margin-top:1px}

/* ---- Layanan Kami: dua kartu layanan ---- */
.ly-jasa-kisi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:52px}
.ly-jasa{display:flex;flex-direction:column;gap:12px;padding:30px 30px 28px;border:1px solid var(--line);
  border-radius:24px;background:#fff;transition:box-shadow .3s ease,border-color .3s ease}
.ly-jasa:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.ly-jasa .ik{width:50px;height:50px;border-radius:50%;background:var(--orange-soft);color:var(--orange-deep);
  display:flex;align-items:center;justify-content:center}
.ly-jasa .ik .mi{font-size:25px;font-variation-settings:'FILL' 1}
.ly-untuk{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ly-jasa h2{font-size:28px;letter-spacing:-.02em}
.ly-jasa > p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.ly-jasa .ly-cek{margin-top:6px}
.ly-jasa .ly-harga{margin-top:12px;padding-top:18px;border-top:1px solid var(--line)}
.ly-cocok{margin:0;font-size:13.5px;color:var(--muted)}
.ly-jasa .btn{margin-top:auto;align-self:flex-start}
.ly-jasa .ly-cocok + .btn{margin-top:10px}
.ly-klaim-tempat{display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;border-radius:14px;
  background:var(--orange-soft);border:1px solid var(--orange-line);font-size:14px;color:var(--ink)}
.ly-klaim-tempat[hidden]{display:none}
.ly-klaim-tempat .mi{flex:none;font-size:20px;color:var(--orange-deep)}

/* ---- bagian umum ---- */
.ly-bagian{padding:0;margin-top:76px}
.ly-bagian .sec-head h2{color:var(--green)}
.ly-ket{font-size:14px;color:var(--muted)}
.ly-catatan{margin-top:24px;line-height:1.6}
.ly-catatan > .mi{flex:none;font-size:20px;color:#B8860B;margin-top:1px}

.ly-tiga{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ly-alasan{padding:26px 24px;border-radius:20px;background:#f5f5f5}
.ly-alasan .ik{width:46px;height:46px;border-radius:50%;background:var(--green-soft);color:var(--green-ikon);
  display:flex;align-items:center;justify-content:center}
.ly-alasan .ik .mi{font-size:23px;font-variation-settings:'FILL' 1}
.ly-alasan h3{margin-top:16px;font-size:18.5px;letter-spacing:-.01em}
.ly-alasan p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* ---- Pasang Artikel: kartu paket ---- */
.ly-paket-kisi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.ly-paket{position:relative;display:flex;flex-direction:column;gap:10px;padding:30px 28px 28px;
  border:1px solid var(--line);border-radius:24px;background:#fff}
.ly-paket.unggul{border:2px solid var(--orange-deep);box-shadow:var(--shadow-lift)}
.ly-lencana{position:absolute;top:-13px;left:26px;padding:5px 12px;border-radius:999px;background:var(--orange-deep);
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ly-paket h3{font-size:22px;letter-spacing:-.015em}
.ly-desc{margin:0;min-height:3em;font-size:14px;line-height:1.5;color:var(--muted)}
.ly-per{margin:0 0 6px;font-size:13.5px;color:var(--ink-2)}
.ly-per em{font-style:normal;font-weight:700;color:var(--orange-deep)}
.ly-paket .ly-cek{padding-top:16px;border-top:1px solid var(--line)}
.ly-paket .btn{margin-top:auto;width:100%;justify-content:center}
.ly-paket .ly-cek + .btn{margin-top:22px}

.ly-termasuk{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px 28px;align-items:start;
  margin-top:22px;padding:22px 26px;border-radius:20px;background:#f5f5f5}
.ly-termasuk b{font-size:15px;color:var(--ink)}
.ly-termasuk .ly-cek{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.ly-masih{margin:18px 0 0;font-size:14.5px;color:var(--ink-2)}
.ly-masih a{font-weight:600;color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}

.ly-langkah{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px}
.ly-langkah li{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:2px solid var(--line)}
.ly-langkah .no{font-size:22px;font-weight:800;color:var(--green);font-variant-numeric:tabular-nums}
.ly-langkah h3{font-size:18px}
.ly-langkah p{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.ly-faq{max-width:820px}
.ly-akhir{padding:72px 0}

/* ---- Formulir ---- */
.ly-terpilih{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;padding:8px 14px 8px 10px;
  border-radius:999px;background:var(--orange-soft);border:1px solid var(--orange-line);font-size:14px;font-weight:600;color:var(--ink)}
.ly-terpilih .mi{font-size:18px;color:var(--orange-deep)}
.ly-terpilih a{margin-left:4px;font-weight:600;color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}
.ly-kepala.tunggal h1{margin-top:18px}

.ly-daftar-tata{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:start;
  margin-top:44px;padding-bottom:80px}
.ly-form{display:flex;flex-direction:column;gap:18px}
.ly-form .field label .opsi{font-weight:500;color:var(--muted)}
.ly-form .field textarea{min-height:140px}
.ly-daftar-sisi{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.ly-alur{padding:26px 26px 22px;border-radius:20px;background:#f5f5f5}
.ly-alur h2,.ly-langsung h2{font-size:19px;letter-spacing:-.01em}
.ly-alur ol{list-style:none;margin:16px 0 0;padding:0;counter-reset:alur;display:flex;flex-direction:column;gap:16px}
.ly-alur li{counter-increment:alur;position:relative;padding-left:42px}
.ly-alur li::before{content:counter(alur);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  background:var(--green);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.ly-alur b{display:block;font-size:15px;color:var(--ink)}
.ly-alur li span{display:block;margin-top:3px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ly-langsung{padding:22px 24px;border:1px solid var(--line);border-radius:20px}
.ly-langsung p{margin:6px 0 14px;font-size:14px;color:var(--ink-2)}
.ly-langsung > span{display:block;margin-top:12px;font-size:13.5px;color:var(--muted)}
.ly-langsung a[href^="mailto"]{color:var(--green-deep);font-weight:600}

@media(max-width:1000px){
  .ly-paket-kisi{grid-template-columns:minmax(0,1fr);max-width:560px}
  .ly-desc{min-height:0}
  .ly-langkah{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px}
}
@media(max-width:900px){
  .ly-kepala{grid-template-columns:minmax(0,1fr);gap:28px}
  .ly-jasa-kisi,.ly-tiga{grid-template-columns:minmax(0,1fr)}
  .ly-daftar-tata{grid-template-columns:minmax(0,1fr);gap:36px;margin-top:32px}
  .ly-daftar-sisi{position:static}
  .ly-termasuk{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .ly-lede{font-size:16.5px}
  .ly-tanya,.ly-sekilas{padding:24px 22px 26px;border-radius:20px}
  .ly-jasa,.ly-paket{padding:26px 22px 24px;border-radius:20px}
  .ly-termasuk .ly-cek{grid-template-columns:minmax(0,1fr)}
  .ly-langkah{grid-template-columns:minmax(0,1fr)}
  .ly-jasa .btn{align-self:stretch;justify-content:center}
  .ly-form .kn-kirim .btn{width:100%}
  .ly-terpilih{border-radius:16px}   /* dua baris: pil penuh jadi janggal */
  .ly-bagian{margin-top:56px}
}
@media(max-width:640px){
  /* Tabel perbandingan di Layanan Kami: di layar sempit tidak digeser ke
     samping (kolom kedua jadi tak terlihat). Tiap baris jadi satu blok —
     judul barisnya di atas, dua nilainya berdampingan dengan label kolom
     kecil dari data-kolom. Bobot selektor sengaja tinggi untuk mengalahkan
     table.data dan .kt-tabel table.data. */
  .kt-tabel.ly-banding-wadah{overflow:visible}
  .kt-tabel table.data.ly-banding,table.data.ly-banding tbody{display:block;min-width:0;width:100%}
  table.data.ly-banding thead{display:none}
  table.data.ly-banding tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;
    padding:16px 18px;border-bottom:1px solid var(--line)}
  table.data.ly-banding tr:last-child{border-bottom:0}
  table.data.ly-banding td{display:block;padding:0;border:0;font-size:14.5px;line-height:1.5}
  table.data.ly-banding td:first-child{grid-column:1 / -1}
  table.data.ly-banding td:first-child b{font-size:15.5px;color:var(--green-deep)}
  table.data.ly-banding td[data-kolom]::before{content:attr(data-kolom);display:block;margin-bottom:3px;
    font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
}

/* ---------- Artikel partner ----------
   Template artikel yang sama (rl2-), plus tiga hal jingga karena berbayar:
   chip di sampul, pita pengungkapan, dan kartu info usaha. Awalan ap-. */
.rl2-chip.partner{background:var(--orange-deep);border-color:var(--orange-deep)}
.rl2-chip.partner .mi{font-size:15px}
.ap-ungkap{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:16px 20px;border-radius:16px;
  background:var(--orange-soft);border:1px solid var(--orange-line)}
.ap-ungkap > .mi{flex:none;font-size:21px;color:var(--orange-deep);margin-top:1px}
.ap-ungkap p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.ap-ungkap b{color:var(--ink)}
.ap-ungkap a{color:var(--orange-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.rl2-isi > section#info{margin-bottom:56px}
.ap-usaha{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}
.ap-usaha-kepala{display:flex;align-items:center;gap:14px;padding:20px 22px;background:#f5f5f5}
.ap-usaha-kepala .ik{width:44px;height:44px;flex:none;border-radius:50%;background:var(--green-soft);color:var(--green-ikon);
  display:flex;align-items:center;justify-content:center}
.ap-usaha-kepala .ik .mi{font-size:22px;font-variation-settings:'FILL' 1}
.ap-usaha-kepala b{display:block;font-size:17px;line-height:1.3;color:var(--ink)}
.ap-usaha-kepala span:not(.ik):not(.mi){display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.ap-usaha dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0}
.ap-usaha dl > div{padding:16px 22px;border-top:1px solid var(--line)}
.ap-usaha dl > div:nth-child(odd){border-right:1px solid var(--line)}
.ap-usaha dt{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.ap-usaha dt .mi{font-size:16px;color:var(--green-ikon)}
.ap-usaha dd{margin:5px 0 0;font-size:15px;line-height:1.5;color:var(--ink)}
.ap-usaha-aksi{display:flex;flex-wrap:wrap;gap:10px;padding:16px 22px 20px;border-top:1px solid var(--line)}
.ap-rute{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ap-lanjut{padding:0;margin-top:80px}
@media(max-width:640px){
  .ap-usaha dl{grid-template-columns:minmax(0,1fr)}
  .ap-usaha dl > div:nth-child(odd){border-right:0}
}

/* ---------- Panduan & Kategori ----------
   Memakai template direktori (dr-): rel kiri berisi satu kelompok
   (Kategori), jadi di ponsel cukup satu dropdown selebar penuh. Kategori
   menambah blok "Tempat terkait di direktori". Dibangun dari
   ../bangun-panduan.py. */
@media(max-width:980px){.dr-sisi.satu{grid-template-columns:minmax(0,1fr)}}
.dr-isi .panduan-grid.tiga{gap:18px}
.kg-terkait{margin-top:28px}
.kg-terkait .katpil{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}

/* Jeda muncul bertahap dilepas setelah kartu/pil selesai muncul (bpk.js
   menambahkan .tenang), supaya efek sorot langsung bereaksi. */
.tempatcard.tenang,.panduan-card.tenang,.katpil a.tenang{transition-delay:0s}

/* ---- Populer (Panduan & Kategori) ----
   Lima panduan yang paling sering dibuka, di bawah menu kategori. Di
   layar lebar ikut menempel di rel kiri; di bawah 980px rel jadi
   dropdown, jadi daftarnya pindah ke bawah kartu (.dr-pop-hp). Markupnya
   dibuat dua kali oleh bangun-panduan.py, hanya satu yang tampil. Nomor
   memakai lingkaran yang sama dengan ikon menu di atasnya. */
.dr-pop{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.dr-pop a{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 5px;border-radius:999px;
  color:var(--ink-2);transition:background .2s ease,color .2s ease}
.dr-pop .no{width:28px;height:28px;flex:none;border-radius:50%;background:var(--green-soft);
  color:var(--green-deep);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.dr-pop .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dr-pop .jd{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s ease}
.dr-pop .kt{font-size:12px;line-height:1.3;color:var(--muted)}
.dr-pop a:hover{background:var(--green-tint)}
.dr-pop a:hover .jd{color:var(--green-deep)}
.dr-pop a:focus-visible{outline:3px solid rgba(26,99,60,.38);outline-offset:1px}
.dr-pop-hp{display:none}
@media(max-width:980px){
  .dr-pop-sisi{display:none}
  .dr-isi .dr-pop-hp{display:block;margin-top:44px}
  /* Tampilan satu kategori menyembunyikan kepala kelompok; yang ini tetap. */
  .dr-satu .dr-pop-hp .dr-kel-kepala{display:flex}
  .dr-pop-hp .dr-pop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
  .dr-pop-hp .dr-pop a{padding:10px 18px 10px 6px}
  .dr-pop-hp .dr-pop .no{width:32px;height:32px;font-size:14px}
  .dr-pop-hp .dr-pop .jd{font-size:15px}
  .dr-pop-hp .dr-pop .kt{font-size:12.5px}
}
@media(max-width:640px){.dr-pop-hp .dr-pop{grid-template-columns:minmax(0,1fr)}}

/* ---------- Gambar bawaan ----------
   Untuk semua tempat & panduan yang belum punya foto (6 Okt): latar
   abu-abu muda, logo balikpapan.top abu-abu tua di tengah. Logonya
   gambar latar, jadi ukurannya mengikuti wadah (maks. 260px) dan tetap di
   tengah walau rasio wadahnya berubah (4:3, 1:1 di ponsel, 16:9).
   Asetnya dibuat ../bangun-gambar-bawaan.py. Selektornya ditulis
   lengkap supaya mengalahkan latar bawaan tiap wadah. */
.nofoto,.tempatcard .foto.nofoto,.panduan-card .foto.nofoto,.cr-unggul .foto.nofoto,.rl-galeri .utama.nofoto{
  background:var(--abu-foto) url('img/logo-abu.png') center/min(40%,260px) auto no-repeat}
/* Label kategori di kartu panduan: di atas foto ia kapsul gelap
   transparan; di atas abu-abu muda jadi kapsul putih supaya terbaca. */
.panduan-card .foto.nofoto .kk,.cr-unggul .foto.nofoto .kk{background:#fff;color:var(--ink-2)}

/* Ikhtisar direktori dari backend: server merender 4 tempat per jenis; di
   samping rel (3 kolom) yang keempat disembunyikan supaya barisnya genap,
   di ponsel (2 kolom) keempatnya tampil. */
@media(min-width:981px){.dr-ikhtisar .tempat-grid .tempatcard:nth-child(n+4){display:none}}