/* jogjaproperti.id — gaya dari mockup V5 Padat v1.3.0 (11 Sep 2026: sidebar kiri statis)
   v1.4.0 (11 Sep 2026): kotak cari di halaman daftar, tab kategori berbasis radio, alat urut/sertifikat, navigasi halaman.
   v1.5.0 (12 Sep 2026): halaman artikel/panduan — prosa, tabel harga, kartu listing di dalam tulisan, tanya-jawab.
   v1.6.0 (12 Sep 2026): kotak ajakan akhir artikel tidak lagi hijau tua — tombolnya dulu nyaris tak terbaca.
   v1.7.0 (13 Sep 2026): logo WhatsApp resmi di semua tombol WhatsApp.
   v1.8.0 (13 Sep 2026): form sebelum WhatsApp (varian C) + halaman /hubungi + halaman sesudah kirim.
   v1.8.1 (13 Sep 2026): buang kolom peta kosong 350-390px di layar lebar (cari & detail); form tanpa bingkai ganda.
   v1.9.0 (13 Sep 2026): form sebelum WhatsApp jadi POP-UP (HP lembar bawah, layar lebar kotak tengah).
   v1.10.0 (13 Sep 2026): tombol WhatsApp tidak hijau lagi; galeri detail pop-up geser & zoom.
   v1.11.0 (13 Sep 2026): band jasa bangun tidak hijau lagi (krem + tombol tinta gelap).
   v1.12.0 (13 Sep 2026): watermark lapisan CSS varian B (tengah, besar, transparan) di foto detail & pop-up galeri + penahan simpan foto; foto asli tidak diubah.
   v1.13.0 (14 Sep 2026): kotak "Jelajah per area" di layar lebar sejajar satu baris (maks 6) selebar layar, tinggi dipendekkan.
   v1.33.0 (18 Sep 2026): kaki halaman 3 kolom, teks SEO di kolom merek menggantikan tagline.
   v1.32.0 (18 Sep 2026): tayangan Kost Eksklusif menggantikan panel "Informasi Penting"; kaki halaman: teks SEO menggantikan Hubungi kami.
   v1.31.0 (18 Sep 2026): kalimat beranda saran ChatGPT (K-36) — kartu jenis properti, proses 4 langkah, teks SEO selebar layar.
   v1.30.0 (17 Sep 2026): kaki halaman berlatar ilustrasi malam Jogja dari ngadmin.
   v1.29.1 (17 Sep 2026): rumah konstruksi penuh (tepi kanan & bawah), latar krem polos, ikon oranye tegas.
   v1.29.0 (17 Sep 2026): ilustrasi rumah di seksi konstruksi.
   v1.28.2 (17 Sep 2026): html,body overflow-x:clip — sebab sticky sidebar gagal.
   v1.28.1 (17 Sep 2026): RALAT — sidebar tetap menempel (sticky) selama hero/cari/listing; bagian selebar layar menutupinya; tombol WhatsApp mengambang muncul saat itu.
   v1.28.0 (17 Sep 2026): (salah tafsir, diralat 1.28.1) sidebar ikut tergulir sejak awal.
   v1.27.0 (17 Sep 2026): mockup layout ngadmin — kotak area berfoto + tombol semua area, seksi proses oranye berikon, seksi konstruksi tanpa kotak, kaki 4 kolom. Kelas BARU (tidak menimpa aturan lama).
   v1.26.0 (17 Sep 2026): logo resmi — logo panjang di sidebar, ikon JP+Tugu di bar atas HP; latar hero diganti "Bg web" dari ngadmin (tanpa matahari).
   v1.25.0 (16 Sep 2026): logo WhatsApp di tombol hijau tampil lagi (filter pemutih dicabut, diganti bingkai putih tipis); kaki halaman tidak lagi tertutup sidebar.
   v1.24.0 (16 Sep 2026): hero layar lebar DIRAPIKAN SEKALI — celah teks-ilustrasi 134→28px, ruang kosong di atas kotak cari 85→20px (translateY dicabut), kalimat pembuka selebar kolom, tiga keterangan satu baris. Diukur di 1024/1280/1536/1920.
   v1.23.0 (16 Sep 2026): layar sangat lebar — hero & isi dibatasi 1180px supaya tidak berjauhan.
   v1.22.0 (16 Sep 2026): hero & kotak cari dipadatkan lagi (ngadmin: "ini ga bisa dicompact?").
   v1.21.0 (16 Sep 2026): hero dirapatkan — ilustrasi rumah sampai tepi bawah, kotak cari menumpang di ujung hero (ngadmin: "masih banyak kosongnya").
   v1.20.0 (16 Sep 2026): hero (kutipan, angka berikon, kartu) & kotak cari mengikuti gambar usulan.
   v1.19.0 (16 Sep 2026): latar langit + ilustrasi rumah & Tugu di hero (berkas ngadmin).
   v1.18.0 (16 Sep 2026): palet disamakan dengan gambar usulan redesain — biru muda cerah (ngadmin: "iya samain").
   v1.17.0 (16 Sep 2026): ilustrasi Jogja (sidebar, hero, kaki bagian area) + kaki halaman baru.
   v1.16.0 (16 Sep 2026): tombol WhatsApp hijau khas WhatsApp (logo dibalik jadi putih); seksi "Dari tanya sampai akad" oranye.
   v1.15.0 (15 Sep 2026): palet C · Nila & Emas (pilihan ngadmin) — hijau diganti nila tua + emas pucat sebagai hiasan.
   v1.14.0 (14 Sep 2026): beranda 8 listing terbaru di layar ≥1280px (4 kolom × 2 baris); di bawah itu 6.
   Sumber tunggal tampilan. Ubah di sini, bukan di template. */

:root{
  --aksen:#0F766E; --aksen-2:#12908A; --aksen-lembut:#E3F3F1;
  --gelap:#0B1F1D; --gelap-2:#132E2A;
  --papan:#F2F5F4; --krem:#F7F6F2; --putih:#fff; --garis:#E2E8E6;
  --t1:#0D1B19; --t2:#33433F; --t3:#5A6B67; --t4:#879591; --t5:#AEB9B6;
  --r:14px; --r-l:20px; --r-xl:26px;
  --sp:clamp(48px,6vw,88px);
  --font-j:'Poppins',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-t:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --bottom:70px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;overflow-x:hidden}
body{font-family:var(--font-t);color:var(--t2);background:var(--papan);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-j);color:var(--t1);margin:0;line-height:1.22;letter-spacing:-.022em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:var(--font-t)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── kerangka aplikasi ── */
.app{display:grid;grid-template-columns:1fr;min-height:100vh}
@media(min-width:1024px){.app{grid-template-columns:238px minmax(0,1fr)}}
/* kolom peta (390px) dihapus 13 Sep 2026: panel petanya belum pernah dibangun → kolom kosong di cari & detail */

/* sidebar desktop */
.sidebar{display:none;background:var(--putih);border-right:1px solid var(--garis);padding:20px 14px;position:sticky;top:0;height:100vh;flex-direction:column;gap:4px}
@media(min-width:1024px){.sidebar{display:flex;position:fixed;left:0;top:0;width:238px;z-index:20}
 /* sidebar statis (fixed) keluar dari aliran grid → konten & panel peta dipatok ke kolomnya */
 .konten{grid-column:2}.peta-panel{grid-column:3}
 body.padat .sidebar{width:214px}}
.merek{display:flex;align-items:center;gap:10px;font-family:var(--font-j);font-weight:700;font-size:16.5px;color:var(--t1);padding:6px 10px 20px;letter-spacing:-.03em}
.merek b{width:32px;height:32px;border-radius:10px;background:var(--aksen);color:#fff;display:grid;place-items:center;font-size:13.5px;flex:none}
.s-item{display:flex;align-items:center;gap:12px;height:46px;padding:0 12px;border-radius:11px;font-size:15px;font-weight:500;color:var(--t2);cursor:pointer;background:none;border:0;width:100%;text-align:left}
.s-item:hover{background:var(--papan);color:var(--t1)}
.s-item.aktif{background:var(--aksen-lembut);color:var(--aksen);font-weight:600}
.s-item .ik{width:22px;text-align:center;font-size:17px;flex:none}
.s-item .jml{margin-left:auto;color:var(--t5);font-size:13px}
.s-judul{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t5);padding:20px 12px 8px}
.s-wa{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:9px;height:48px;border-radius:12px;background:var(--gelap);color:#fff;font-weight:600;font-size:15px}
.s-wa:hover{background:var(--gelap-2)}
.s-jam{text-align:center;font-size:12px;color:var(--t4);padding-top:10px}

/* konten */
.konten{min-width:0;padding-bottom:calc(var(--bottom) + 8px);background:var(--putih)}
@media(min-width:1024px){.konten{padding-bottom:0}}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--garis);padding:11px 16px}
@media(min-width:1024px){.topbar{padding:14px 26px}}
.topbar-baris{display:flex;align-items:center;gap:11px}
.merek-hp{display:flex;align-items:center;gap:9px;font-family:var(--font-j);font-weight:700;font-size:16px;color:var(--t1);flex:none}
.merek-hp b{width:30px;height:30px;border-radius:9px;background:var(--aksen);color:#fff;display:grid;place-items:center;font-size:13px}
@media(min-width:1024px){.merek-hp{display:none}}
.cari-pill{flex:1;display:flex;align-items:center;gap:10px;height:44px;padding:0 15px;border-radius:999px;border:1px solid var(--garis);background:var(--putih);color:var(--t4);font-size:14.5px;min-width:0;cursor:pointer;text-align:left}
.cari-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ikon-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--garis);background:var(--putih);display:grid;place-items:center;font-size:17px;flex:none;cursor:pointer}
.topbar-wa{display:none}
@media(min-width:1024px){.topbar-wa{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 18px;border-radius:12px;background:var(--gelap);color:#fff;font-weight:600;font-size:14.5px;flex:none}
 .topbar-wa:hover{background:var(--gelap-2)}}

/* chips lengket (layar Cari) */
.chips{display:flex;gap:8px;overflow-x:auto;padding:11px 16px;scrollbar-width:none;background:var(--putih);border-bottom:1px solid var(--garis);position:sticky;top:66px;z-index:29}
.chips::-webkit-scrollbar{display:none}
@media(min-width:1024px){.chips{padding:12px 26px;top:73px}}
.chip{flex:none;height:44px;padding:0 15px;border-radius:999px;border:1px solid var(--garis);background:var(--putih);font-size:14px;font-weight:500;color:var(--t2);display:flex;align-items:center;gap:7px;cursor:pointer;transition:.18s}
.chip:hover{border-color:var(--aksen);color:var(--aksen)}
.chip.aktif{background:var(--aksen);border-color:var(--aksen);color:#fff}
.chip.hapus{background:var(--aksen-lembut);border-color:transparent;color:var(--aksen);font-weight:600}

/* ── layar ── */
.layar{display:none}
body.layar-beranda #layarBeranda,body.layar-cari #layarCari,body.layar-peta #layarPeta{display:block}
body:not(.layar-cari) .chips{display:none}

/* ── HERO portal (dari V1) ── */
.hero{background:linear-gradient(168deg,#EDF4F2 0%,#FBFAF8 64%);padding:clamp(26px,4vw,52px) 16px 0}
@media(min-width:1024px){.hero{padding:clamp(30px,3.6vw,56px) 26px 0}}
.hero-grid{display:grid;gap:26px;align-items:center;max-width:1240px;margin-inline:auto}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:44px}}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--aksen-lembut);color:var(--aksen);border:1px solid rgba(15,118,110,.22);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--aksen)}
.hero h1{font-size:clamp(31px,5vw,54px);font-weight:700;margin-bottom:16px}
.hero h1 em{font-style:normal;color:var(--aksen)}
.hero .lead{font-size:clamp(15.5px,1.6vw,18px);color:var(--t3);max-width:52ch;margin:0 0 24px}
.hero-tombol{display:flex;gap:11px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 20px;border-radius:12px;font:600 15px var(--font-t);border:1px solid transparent;cursor:pointer;transition:.22s;white-space:nowrap}
.btn-utama{background:var(--aksen);color:#fff}
.btn-utama:hover{background:var(--aksen-2);transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,118,110,.26)}
.btn-garis{background:var(--putih);border-color:var(--garis);color:var(--t1)}
.btn-garis:hover{border-color:var(--aksen);color:var(--aksen)}
.hero-stat{display:flex;gap:26px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--garis);margin-top:24px}
.hero-stat div b{display:block;font-family:var(--font-j);font-size:25px;color:var(--t1);line-height:1.1}
.hero-stat div span{font-size:13px;color:var(--t4)}
.hero-foto{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3.2;background:#DDE5E1}
.hero-foto img{width:100%;height:100%;object-fit:cover}
.kartu-apung{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 14px 32px rgba(11,31,29,.16)}
.kartu-apung .ik{width:38px;height:38px;border-radius:11px;background:var(--aksen-lembut);color:var(--aksen);display:grid;place-items:center;flex:none;font-size:17px}
.kartu-apung b{display:block;font-family:var(--font-j);font-size:14px;color:var(--t1)}
.kartu-apung span{font-size:12.5px;color:var(--t4)}
@media(min-width:1000px){.kartu-apung{right:auto;min-width:262px}}

/* kotak cari */
.kotak-cari{max-width:1240px;margin:24px auto 0;background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-xl);padding:14px;box-shadow:0 20px 44px rgba(11,31,29,.10)}
@media(min-width:1000px){.kotak-cari{margin-top:44px;transform:translateY(44%)}}
.cari-tab{display:flex;gap:6px;overflow-x:auto;padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--garis);scrollbar-width:none}
.cari-tab::-webkit-scrollbar{display:none}
.cari-tab button{flex:none;height:44px;padding:0 16px;border-radius:10px;border:1px solid transparent;background:transparent;font:600 14px var(--font-t);color:var(--t3);cursor:pointer}
.cari-tab button:hover{background:var(--papan);color:var(--t1)}
.cari-tab button.aktif{background:var(--aksen);color:#fff}
.cari-baris{display:grid;gap:10px}
@media(min-width:860px){.cari-baris{grid-template-columns:1.6fr 1fr 1fr auto}}
.medan{position:relative}
.medan label{position:absolute;top:9px;left:14px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t4)}
.medan input,.medan select{width:100%;height:62px;padding:22px 14px 6px;border:1px solid var(--garis);border-radius:12px;font:500 15px var(--font-t);color:var(--t1);background:var(--putih);appearance:none}
.medan input:focus,.medan select:focus{outline:2px solid var(--aksen);outline-offset:-2px;border-color:transparent}
.kotak-cari .btn{height:62px;width:100%}
@media(min-width:860px){.kotak-cari .btn{width:auto;padding:0 30px}}

/* seksi */
.seksi{padding:var(--sp) 16px}
@media(min-width:1024px){.seksi{padding:var(--sp) 26px}}
.seksi-dalam{max-width:1240px;margin-inline:auto}
.seksi.papan{background:var(--papan)}
.seksi.gelap{background:var(--gelap);color:#9CB0AB}
.seksi.gelap h2,.seksi.gelap h3{color:#fff}
.seksi.setelah-cari{padding-top:calc(var(--sp) * .7)}
@media(min-width:1000px){.seksi.setelah-cari{padding-top:calc(var(--sp) + 52px)}}
.kepala{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.kepala h2{font-size:clamp(23px,3vw,34px);font-weight:700}
.kepala p{margin:8px 0 0;color:var(--t3);max-width:56ch;font-size:15px}
.tautan{color:var(--aksen);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:7px;min-height:44px;background:none;border:0;cursor:pointer;padding:0}
.tautan:hover{gap:11px}

/* strip bukti */
.bukti{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:920px){.bukti{grid-template-columns:repeat(4,1fr)}}
.bukti div{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);padding:18px 16px}
.seksi.papan .bukti div{background:var(--putih)}
.bukti .ik{width:40px;height:40px;border-radius:12px;background:var(--aksen-lembut);color:var(--aksen);display:grid;place-items:center;font-size:18px;margin-bottom:12px}
.bukti b{display:block;font-family:var(--font-j);font-size:15px;color:var(--t1);margin-bottom:4px}
.bukti span{font-size:13.5px;color:var(--t3);line-height:1.5}

/* kartu listing (gaya feed V3, tanpa tombol simpan) */
.grid-listing{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){.grid-listing{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid-listing{grid-template-columns:repeat(3,1fr);gap:18px}}
body.layar-cari .grid-listing{grid-template-columns:1fr}
@media(min-width:620px){body.layar-cari .grid-listing{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1500px){body.layar-cari .grid-listing{grid-template-columns:repeat(3,1fr)}}
.kartu{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column;transition:.22s}
.kartu:hover{box-shadow:0 14px 32px rgba(11,31,29,.11);transform:translateY(-2px)}
.kartu-foto{position:relative;aspect-ratio:16/11;background:#DCE5E3;overflow:hidden}
.kartu-foto img{width:100%;height:100%;object-fit:cover;transition:.5s}
.kartu:hover .kartu-foto img{transform:scale(1.04)}
.lencana{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap}
.lencana span{background:rgba(11,31,29,.8);backdrop-filter:blur(6px);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:7px}
.lencana .teal{background:var(--aksen)}
.hitung-foto{position:absolute;right:10px;bottom:10px;background:rgba(11,31,29,.72);color:#fff;font-size:12px;padding:4px 9px;border-radius:7px}
.kartu-isi{padding:14px 15px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.harga{font-family:var(--font-j);font-size:19px;font-weight:700;color:var(--t1)}
.harga small{font-size:12.5px;font-weight:500;color:var(--t4)}
.judul{font-size:14.8px;font-weight:600;color:var(--t1);line-height:1.42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lokasi{font-size:13.5px;color:var(--t4);display:flex;align-items:center;gap:6px}
.spek{display:flex;gap:13px;flex-wrap:wrap;font-size:13px;color:var(--t3);padding-top:10px;border-top:1px solid var(--garis);margin-top:auto}
.spek b{color:var(--t1);font-weight:600}
.aksi{display:flex;gap:8px;margin-top:11px}
.aksi a{flex:1;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600}
.aksi .wa{background:var(--gelap);color:#fff}
.aksi .wa:hover{background:var(--gelap-2)}
.aksi .detail{border:1px solid var(--garis);color:var(--t1)}
.aksi .detail:hover{border-color:var(--aksen);color:var(--aksen)}

/* jelajah area */
.area{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:920px){.area{grid-template-columns:repeat(4,1fr)}}
.area button{position:relative;border:0;padding:0;border-radius:var(--r);overflow:hidden;aspect-ratio:3/2.4;display:block;background:#26403B;cursor:pointer;width:100%}
.area img{width:100%;height:100%;object-fit:cover;opacity:.66;transition:.5s}
.area button:hover img{opacity:.5;transform:scale(1.05)}
.area .teks{position:absolute;left:13px;right:13px;bottom:12px;color:#fff;text-align:left}
.area .teks b{display:block;font-family:var(--font-j);font-size:15.5px}
.area .teks span{font-size:12.5px;opacity:.85}

/* langkah angka raksasa */
.langkah{display:grid;gap:24px}
@media(min-width:880px){.langkah{grid-template-columns:repeat(3,1fr);gap:32px}}
.langkah .no{font-family:var(--font-j);font-size:70px;font-weight:700;line-height:.8;color:rgba(255,255,255,.1);margin-bottom:-20px}
.langkah h3{font-size:18.5px;margin-bottom:8px;position:relative}
.langkah p{margin:0;font-size:14.6px;color:#8FA6A1;line-height:1.6}

/* band CTA */
.band{background:var(--aksen);color:#fff;border-radius:var(--r-xl);padding:clamp(24px,3.6vw,42px);display:grid;gap:20px;align-items:center}
@media(min-width:780px){.band{grid-template-columns:1fr auto}}
.band h2{color:#fff;font-size:clamp(21px,2.6vw,30px)}
.band p{margin:8px 0 0;color:rgba(255,255,255,.87);max-width:56ch;font-size:15px}
.band .btn{background:#fff;color:var(--aksen)}
.band .btn:hover{background:#E6F4F1}

/* footer */
footer{background:var(--gelap);color:#8FA09B;padding:var(--sp) 16px 0;font-size:14.5px}
@media(min-width:1024px){footer{padding:var(--sp) 26px 0}}
.f-grid{display:grid;gap:30px;max-width:1240px;margin-inline:auto}
@media(min-width:880px){.f-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
footer h4{color:#fff;font-size:15px;margin-bottom:14px;font-family:var(--font-j)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a:hover{color:#fff}
@media(max-width:719px){footer ul a{display:inline-flex;align-items:center;min-height:44px}}
.f-logo{color:#fff;font-family:var(--font-j);font-weight:700;font-size:18.5px;display:flex;align-items:center;gap:9px;margin-bottom:13px}
.f-logo b{width:30px;height:30px;border-radius:9px;background:var(--aksen);display:grid;place-items:center;font-size:13.5px}
.peta-kecil{border-radius:var(--r);background:var(--gelap-2);height:126px;display:grid;place-items:center;color:#5E706C;font-size:13px;text-align:center;padding:12px}
.f-bawah{border-top:1px solid var(--gelap-2);margin-top:38px;padding:18px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#6C7D79;max-width:1240px;margin-inline:auto}

/* hasil pencarian */
.hasil-kepala{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 16px 4px}
@media(min-width:1024px){.hasil-kepala{padding:20px 26px 6px}}
.hasil-kepala h1{font-size:19px}
@media(min-width:1024px){.hasil-kepala h1{font-size:22px}}
.hasil-kepala p{margin:3px 0 0;font-size:13.5px;color:var(--t4)}
.urut{height:44px;border-radius:11px;border:1px solid var(--garis);background:var(--putih);padding:0 12px;font-size:14px;color:var(--t2);appearance:none}
.pad-feed{padding:12px 16px 26px}
@media(min-width:1024px){.pad-feed{padding:14px 26px 26px}}
.kosong{grid-column:1/-1;background:var(--papan);border:1px dashed var(--garis);border-radius:var(--r-l);padding:32px 20px;text-align:center;color:var(--t3)}
.kosong b{display:block;font-family:var(--font-j);color:var(--t1);font-size:17px;margin-bottom:6px}
.kosong a{color:var(--aksen);font-weight:600}

/* panel peta kanan */
.peta-panel{display:none;background:var(--putih);border-left:1px solid var(--garis);position:sticky;top:0;height:100vh;padding:18px}
@media(min-width:1360px){body.layar-cari .peta-panel{display:block}}
.peta-kepala{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.peta-kepala h4{font-size:15.5px}
.peta-kotak{height:calc(100% - 104px);border-radius:var(--r-l);background:linear-gradient(140deg,#DCE9E6,#EEF4F2);border:1px solid var(--garis);position:relative;overflow:hidden}
.pin{position:absolute;background:var(--aksen);color:#fff;font:600 12.5px var(--font-t);padding:6px 11px;border-radius:999px;box-shadow:0 6px 16px rgba(15,118,110,.34);white-space:nowrap;border:0;cursor:pointer}
.pin::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--aksen)}
.pin.dipilih{background:var(--gelap)}
.pin.dipilih::after{border-top-color:var(--gelap)}
.peta-kaki{margin-top:12px;font-size:13px;color:var(--t4)}

/* layar peta (mobile & tablet) */
.peta-penuh{height:calc(100vh - var(--bottom) - 66px);position:relative;background:linear-gradient(140deg,#DCE9E6,#EEF4F2)}
@media(min-width:1024px){.peta-penuh{height:calc(100vh - 74px)}}
.peta-rel{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:12px;overflow-x:auto;padding:0 12px;scrollbar-width:none}
.peta-rel::-webkit-scrollbar{display:none}
.peta-rel .kartu{flex:none;width:min(280px,80vw)}
.peta-catatan{position:absolute;left:12px;right:12px;top:12px;background:rgba(255,255,255,.94);border:1px solid var(--garis);border-radius:12px;padding:10px 13px;font-size:13px;color:var(--t3)}

/* bottom tab — 4 tab, slot ke-5 sengaja dikosongkan */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;height:var(--bottom);background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-top:1px solid var(--garis);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:1024px){.tabbar{display:none}}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--t4);min-height:48px;background:none;border:0;cursor:pointer}
.tab .ik{font-size:20px;line-height:1}
.tab.aktif{color:var(--aksen)}

/* sheet filter */
.sheet-latar{position:fixed;inset:0;background:rgba(11,31,29,.44);z-index:60;opacity:0;pointer-events:none;transition:.25s}
.sheet-latar.buka{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--putih);border-radius:22px 22px 0 0;padding:8px 18px calc(20px + env(safe-area-inset-bottom));transform:translateY(102%);transition:.28s cubic-bezier(.22,1,.36,1);max-height:86vh;overflow-y:auto}
.sheet.buka{transform:translateY(0)}
@media(min-width:1024px){.sheet{left:auto;right:26px;bottom:26px;width:390px;border-radius:20px}}
.gagang{width:42px;height:4px;border-radius:99px;background:var(--garis);margin:6px auto 14px}
.sheet h3{font-size:18px;margin-bottom:4px}
.sheet .grup{padding:16px 0;border-bottom:1px solid var(--garis)}
.sheet .grup:last-of-type{border-bottom:0}
.sheet .grup h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--t4);margin-bottom:11px}
.pilihan{display:flex;gap:8px;flex-wrap:wrap}
.pilihan button{height:44px;padding:0 15px;border-radius:11px;border:1px solid var(--garis);background:var(--putih);font-size:14px;color:var(--t2);cursor:pointer}
.pilihan button.aktif{background:var(--aksen);border-color:var(--aksen);color:#fff}
.pilihan button:disabled{opacity:.42;cursor:not-allowed;text-decoration:line-through}
.sheet-kaki{display:flex;gap:10px;padding-top:16px;position:sticky;bottom:0;background:var(--putih)}
.sheet-kaki button{flex:1;height:50px;border-radius:13px;font-size:15px;font-weight:600;cursor:pointer;border:1px solid var(--garis);background:var(--putih);color:var(--t1)}
.sheet-kaki .terap{background:var(--aksen);border-color:var(--aksen);color:#fff}

.tanda-mockup{position:fixed;left:12px;bottom:calc(var(--bottom) + 12px);z-index:49;background:rgba(11,31,29,.9);color:#C3CFCC;font-size:11.5px;padding:7px 12px;border-radius:8px}
@media(min-width:1024px){.tanda-mockup{bottom:12px}}
.tanda-mockup b{color:#fff}

/* ══════════════════════════════════════════════════════════════════
   PEMADATAN — v5. Semua diturunkan satu tingkat dari V4.
   Kontrol interaktif hanya dipadatkan di >=1024px (tetikus);
   di HP target sentuh tetap >= 44px.
   ══════════════════════════════════════════════════════════════════ */
body.padat{--sp:clamp(30px,3.4vw,54px);--r:11px;--r-l:14px;--r-xl:16px;font-size:15px}
body.sedang{--sp:clamp(38px,4.6vw,68px);--r:12px;--r-l:16px;--r-xl:20px;font-size:15.5px}

/* hero: dua kolom dimulai lebih awal supaya jendela ~850px tidak jadi tata letak HP */
body.padat .hero,body.sedang .hero{padding-top:clamp(20px,2.6vw,36px)}
@media(min-width:840px){
  body.padat .hero-grid,body.sedang .hero-grid{grid-template-columns:1.1fr .9fr;gap:32px}
}
body.padat .hero h1{font-size:clamp(24px,3.4vw,38px);margin-bottom:12px}
body.sedang .hero h1{font-size:clamp(27px,4vw,44px);margin-bottom:14px}
body.padat .hero .lead{font-size:clamp(14.2px,1.35vw,15.5px);margin-bottom:18px;max-width:56ch}
body.sedang .hero .lead{font-size:clamp(14.8px,1.45vw,16.5px);margin-bottom:20px}
body.padat .hero-foto{aspect-ratio:16/10}
body.sedang .hero-foto{aspect-ratio:16/11}
body.padat .eyebrow{padding:5px 12px;font-size:11.5px;margin-bottom:13px}
body.padat .hero-stat{margin-top:18px;gap:20px}
body.padat .hero-stat div b{font-size:20px}
body.padat .hero-stat div span{font-size:12px}
body.padat .kartu-apung{padding:10px 12px;gap:10px}
body.padat .kartu-apung .ik{width:32px;height:32px;font-size:15px}
body.padat .kartu-apung b{font-size:13px}
body.padat .kartu-apung span{font-size:11.5px}

/* kotak cari */
body.padat .kotak-cari{padding:11px;margin-top:18px}
body.padat .medan input,body.padat .medan select{height:54px;padding:20px 12px 5px;font-size:14.5px}
body.padat .kotak-cari .btn{height:54px}
@media(min-width:1024px){
  body.padat .cari-tab button{height:38px;font-size:13.5px;padding:0 13px}
  body.padat .btn{height:42px;font-size:14.2px;padding:0 17px}
  body.padat .cari-pill{height:40px;font-size:14px}
  body.padat .ikon-btn{width:40px;height:40px;font-size:15.5px}
  body.padat .topbar{padding:10px 22px}
  body.padat .topbar-wa{height:40px;font-size:13.8px;padding:0 15px}
  body.padat .chips{padding:9px 22px;top:61px}
  body.padat .chip{height:36px;font-size:13.3px;padding:0 13px}
  body.padat .sidebar{padding:16px 11px}
  body.padat .s-item{height:40px;font-size:14.2px}
  body.padat .s-wa{height:42px;font-size:14.2px}
  body.padat .merek{font-size:15.5px;padding:4px 8px 16px}
  body.padat .urut{height:40px;font-size:13.5px}
  body.padat .aksi a{height:40px;font-size:13.5px}
}
@media(min-width:1024px){body.padat .app{grid-template-columns:214px minmax(0,1fr)}}


@media(min-width:780px){
  body.padat .cari-baris{grid-template-columns:1.6fr 1fr 1fr auto}
  body.padat .kotak-cari .btn{width:auto;padding:0 26px}
  body.padat .bukti{grid-template-columns:repeat(4,1fr)}
}

/* judul seksi */
body.padat .kepala{margin-bottom:18px}
body.padat .kepala h2{font-size:clamp(19px,2.1vw,26px)}
body.padat .kepala p{font-size:14px;margin-top:6px}
body.padat .tautan{font-size:14px}
body.sedang .kepala h2{font-size:clamp(21px,2.5vw,30px)}

/* strip bukti */
body.padat .bukti{gap:10px}
body.padat .bukti div{padding:14px 13px}
body.padat .bukti .ik{width:34px;height:34px;font-size:15px;margin-bottom:9px;border-radius:10px}
body.padat .bukti b{font-size:14px}
body.padat .bukti span{font-size:12.6px;line-height:1.45}

/* kartu listing — inti keluhan "gede-gede" */
body.padat .grid-listing{gap:12px}
@media(min-width:820px){body.padat .grid-listing{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){body.padat .grid-listing{grid-template-columns:repeat(4,1fr)}}
@media(min-width:620px){body.padat.layar-cari .grid-listing{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){body.padat.layar-cari .grid-listing{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1560px){body.padat.layar-cari .grid-listing{grid-template-columns:repeat(4,1fr)}}
body.padat .kartu-foto{aspect-ratio:16/10}
body.padat .kartu-isi{padding:11px 12px 13px;gap:5px}
body.padat .harga{font-size:16.5px}
body.padat .harga small{font-size:11.5px}
body.padat .judul{font-size:13.6px;line-height:1.38}
body.padat .lokasi{font-size:12.6px}
body.padat .spek{font-size:12.2px;gap:10px;padding-top:8px}
body.padat .aksi{margin-top:9px;gap:7px}
body.padat .lencana span{font-size:10.2px;padding:4px 8px}
body.padat .hitung-foto{font-size:11px;padding:3px 7px}
body.sedang .kartu-foto{aspect-ratio:16/11}
@media(min-width:960px){body.sedang .grid-listing{grid-template-columns:repeat(3,1fr)}}

/* area & langkah */
body.padat .area{gap:10px}
body.padat .area button{aspect-ratio:3/2}
body.padat .area .teks b{font-size:14.2px}
body.padat .area .teks span{font-size:11.8px}
body.padat .langkah{gap:20px}
body.padat .langkah .no{font-size:50px;margin-bottom:-14px}
body.padat .langkah h3{font-size:16.5px;margin-bottom:6px}
body.padat .langkah p{font-size:13.6px}

/* band & footer */
body.padat .band{padding:clamp(18px,2.6vw,30px)}
body.padat .band h2{font-size:clamp(18px,2.1vw,25px)}
body.padat .band p{font-size:14px}
body.padat footer{font-size:13.6px}
body.padat footer h4{font-size:14px;margin-bottom:11px}
body.padat .f-grid{gap:24px}
body.padat .peta-kecil{height:104px}
body.padat .f-bawah{margin-top:26px;padding:14px 0}

/* hasil pencarian */
body.padat .hasil-kepala{padding:13px 22px 4px}
body.padat .hasil-kepala h1{font-size:18px}
body.padat .hasil-kepala p{font-size:12.8px}
body.padat .pad-feed{padding:11px 22px 22px}
@media(max-width:1023px){
  body.padat .hasil-kepala{padding:13px 14px 4px}
  body.padat .pad-feed{padding:11px 14px 20px}
  body.padat .seksi{padding-left:14px;padding-right:14px}
  body.padat .hero{padding-left:14px;padding-right:14px}
}


/* == Panel "Kenapa memilih" - panel mint + media + fitur 2x2 == */
.panel-kenapa{background:var(--aksen-lembut);border-radius:var(--r-xl);padding:clamp(18px,2.6vw,32px);display:grid;gap:22px}
@media(min-width:780px){.panel-kenapa{grid-template-columns:.85fr 1.15fr;gap:26px;align-items:center}
 .panel-kenapa .fitur-grid{grid-column:1/-1}}
@media(min-width:1280px){.panel-kenapa{grid-template-columns:.78fr 1fr 1.05fr;gap:34px}
 .panel-kenapa .fitur-grid{grid-column:auto}}
.kenapa-media{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/11;background:#CFE2DC}
.kenapa-media img{width:100%;height:100%;object-fit:cover}
.putar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.94);border:0;color:var(--aksen);font-size:19px;display:grid;place-items:center;cursor:pointer}
.putar::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:denyut 2.6s ease-out infinite}
@keyframes denyut{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.putar::after{animation:none}}
.kenapa-teks .pil-kecil{display:inline-block;background:var(--putih);border:1px solid rgba(15,118,110,.28);color:var(--aksen);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:600;margin-bottom:12px}
.kenapa-teks h2{font-size:clamp(20px,2.3vw,29px);margin-bottom:10px}
.kenapa-teks p{margin:0 0 16px;color:var(--t3);font-size:14.5px;max-width:46ch}
.fitur-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:560px){.fitur-grid{grid-template-columns:repeat(2,1fr)}}
.fitur{display:flex;gap:12px;align-items:start}
.fitur .ik{width:44px;height:44px;border-radius:50%;background:var(--putih);color:var(--aksen);display:grid;place-items:center;font-size:18px;flex:none;box-shadow:0 4px 12px rgba(11,31,29,.07)}
.fitur b{display:block;font-family:var(--font-j);font-size:14.5px;color:var(--t1);margin-bottom:2px}
.fitur span{font-size:12.8px;color:var(--t3);line-height:1.45}

/* == Artikel == */
.artikel-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){.artikel-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.artikel-grid{grid-template-columns:repeat(4,1fr)}}
.artikel{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column;transition:.22s}
.artikel:hover{box-shadow:0 12px 28px rgba(11,31,29,.10);transform:translateY(-2px)}
.artikel-foto{aspect-ratio:16/9;overflow:hidden;background:#DCE5E3}
.artikel-foto img{width:100%;height:100%;object-fit:cover;transition:.5s}
.artikel:hover .artikel-foto img{transform:scale(1.05)}
.artikel-isi{padding:12px 13px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.artikel-atas{display:flex;align-items:center;justify-content:space-between;gap:8px}
.artikel-kat{background:var(--aksen-lembut);color:var(--aksen);border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:600}
.artikel-tgl{font-size:11.8px;color:var(--t4)}
.artikel h3{font-size:14.2px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.artikel .baca{color:var(--aksen);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;margin-top:auto;min-height:24px}
.artikel:hover .baca{gap:10px}
@media(max-width:719px){.artikel .baca{min-height:44px}}

/* == Band CTA gaya referensi == */
.band{position:relative;overflow:hidden}
.band-isi{display:flex;align-items:center;gap:16px}
.band-ikon{width:56px;height:56px;border-radius:50%;background:var(--putih);color:var(--aksen);display:grid;place-items:center;font-size:24px;flex:none}
@media(max-width:559px){.band-ikon{width:46px;height:46px;font-size:20px}}
.band-poin{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.band-poin span{font-size:12.8px;color:rgba(255,255,255,.9);white-space:nowrap}
@media(max-width:559px){.band-poin{gap:8px}.band-poin span{font-size:12px}}
.band-daun{position:absolute;right:-10px;bottom:-26px;width:190px;opacity:.13;pointer-events:none}
@media(max-width:900px){.band-daun{width:130px;right:-24px;bottom:-30px}}

/* pembanding kepadatan */
.skala{position:fixed;right:12px;bottom:calc(var(--bottom) + 12px);z-index:59;display:flex;gap:4px;background:rgba(11,31,29,.92);border-radius:999px;padding:4px}
@media(min-width:1024px){.skala{bottom:12px}}
.skala button{border:0;background:transparent;color:#C3CFCC;font:600 12px var(--font-t);padding:7px 12px;border-radius:999px;cursor:pointer;min-height:32px}
.skala button.aktif{background:var(--aksen);color:#fff}

noscript{display:block;background:#FFF3CD;border:1px solid #E5D9A8;color:#6B5A16;padding:14px;border-radius:12px;margin:16px}

/* ══════════════════════════════════════════════════════════════════
   Tambahan untuk halaman yang belum ada di mockup V5:
   remah navigasi, galeri detail, tabel spesifikasi, kolom aksi.
   Versi 1.1.0 · 10 Sep 2026
   ══════════════════════════════════════════════════════════════════ */
.remah{font-size:13px;color:var(--t4);margin-bottom:12px}
.remah a{color:var(--aksen)}
.remah a:hover{text-decoration:underline}
.detail-judul{font-size:clamp(20px,2.6vw,30px);margin-bottom:8px}
.detail-lokasi{font-size:14px;color:var(--t3);margin-bottom:16px}

.galeri{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin-bottom:22px}
@media(min-width:820px){.galeri{grid-template-columns:repeat(4,1fr)}}
.galeri-item{border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3;background:#DCE5E3;display:block}
.galeri-item img{width:100%;height:100%;object-fit:cover;transition:.4s}
.galeri-item:hover img{transform:scale(1.04)}
@media(min-width:820px){.galeri-item.utama{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}}

.detail-grid{display:grid;gap:24px}
@media(min-width:900px){.detail-grid{grid-template-columns:1.6fr .9fr;align-items:start}}
.detail-harga{font-family:var(--font-j);font-size:clamp(22px,2.6vw,30px);font-weight:700;color:var(--aksen);margin-bottom:14px}
.detail-harga small{font-size:14px;font-weight:500;color:var(--t4)}
.tinjau{background:#FFF3CD;border:1px solid #E5D9A8;color:#6B5A16;padding:11px 13px;border-radius:12px;font-size:13.5px;margin:0 0 14px}

.spek-tabel{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:18px;background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);overflow:hidden}
.spek-tabel th,.spek-tabel td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--garis)}
.spek-tabel th{width:40%;color:var(--t4);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.spek-tabel td{color:var(--t1);font-weight:500}
.spek-tabel tr:last-child th,.spek-tabel tr:last-child td{border-bottom:0}

.deskripsi{font-size:14.8px;line-height:1.7;color:var(--t2);white-space:normal}
.detail-aksi{background:var(--papan);border:1px solid var(--garis);border-radius:var(--r-xl);padding:16px;display:grid;gap:10px;position:sticky;top:78px}
.detail-aksi .btn{width:100%}
.detail-catatan{font-size:12.8px;color:var(--t4);margin:4px 0 0;line-height:1.5}

/* kartu: judul kini tautan */
a.judul{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
a.judul:hover{color:var(--aksen)}
.area a{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;display:flex;align-items:end;background:linear-gradient(160deg,#1D3A34,#2C5148);padding:13px}
.area a:hover{background:linear-gradient(160deg,#245047,#316056)}
.area .teks{color:#fff}

/* ── v1.4.0 — kotak cari & halaman berikutnya (bentuk dari mockup V5 yang disetujui) ── */
.cari-tab input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cari-tab label{flex:none;display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:10px;font:600 14px var(--font-t);color:var(--t3);cursor:pointer;user-select:none}
.cari-tab label:hover{background:var(--papan);color:var(--t1)}
.cari-tab input:checked+label{background:var(--aksen);color:#fff}
.cari-tab input:focus-visible+label{outline:2px solid var(--aksen);outline-offset:2px}
body.padat .cari-tab label{height:38px;font-size:13.5px;padding:0 13px}
.pad-saring{padding:12px 16px 0}
@media(min-width:1024px){.pad-saring{padding:16px 22px 0}}
.kotak-cari.saring{margin:0;max-width:none;box-shadow:none;transform:none}
.hasil-kepala h1 small{font-size:.7em;font-weight:500;color:var(--t4)}
.hasil-alat{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:560px){.hasil-kepala{flex-wrap:wrap}.hasil-alat{width:100%;justify-content:flex-start}}
.halaman{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin-top:22px}
.halaman a,.halaman span{min-width:44px;height:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;font-weight:600;font-size:14px}
.halaman a{border:1px solid var(--garis);background:var(--putih);color:var(--t2)}
.halaman a:hover{border-color:var(--aksen);color:var(--aksen)}
.halaman .kini{background:var(--aksen);color:#fff}
.halaman .elipsis{color:var(--t4);min-width:20px;padding:0}

/* ── v1.5.0 — halaman artikel/panduan ── */
.prosa{max-width:780px;margin:0 auto;padding:18px 16px 40px}
@media(min-width:1024px){.prosa{padding:26px 26px 56px}}
.prosa header .artikel-kat{display:inline-block;margin-bottom:10px}
.prosa h1{font-size:clamp(23px,3.4vw,36px);line-height:1.2;margin:0 0 10px}
.prosa .lead{font-size:16px;color:var(--t2);margin:0 0 10px;line-height:1.6}
.prosa-meta{font-size:12.8px;color:var(--t4);margin:0 0 18px}
.prosa-foto{width:100%;border-radius:var(--r-l);margin:0 0 22px;aspect-ratio:16/9;object-fit:cover}
.prosa h2{font-size:clamp(19px,2.4vw,25px);margin:30px 0 10px;scroll-margin-top:80px}
.prosa h3{font-size:17px;margin:22px 0 8px}
.prosa p{margin:0 0 14px;font-size:15.5px;line-height:1.72;color:var(--t2)}
.prosa ul{margin:0 0 16px;padding-left:20px}
.prosa li{font-size:15.5px;line-height:1.65;color:var(--t2);margin-bottom:6px}
.prosa a{color:var(--aksen);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prosa blockquote{margin:0 0 16px;padding:12px 16px;border-left:3px solid var(--aksen);background:var(--aksen-lembut);border-radius:0 12px 12px 0;font-size:15px;color:var(--t1)}
.prosa-toc{background:var(--papan);border:1px solid var(--garis);border-radius:var(--r);padding:14px 18px;margin:0 0 24px}
.prosa-toc b{display:block;font-family:var(--font-j);font-size:13px;margin-bottom:8px;color:var(--t3)}
.prosa-toc ol{margin:0;padding-left:20px}
.prosa-toc li{font-size:14px;margin-bottom:5px}
.prosa-toc a{color:var(--t2);font-weight:500;text-decoration:none}
.prosa-toc a:hover{color:var(--aksen)}
.tabel-artikel{margin:0 0 22px;overflow-x:auto;border:1px solid var(--garis);border-radius:var(--r);background:var(--putih)}
.tabel-artikel table{width:100%;border-collapse:collapse;font-size:14.2px;min-width:460px}
.tabel-artikel caption{caption-side:top;text-align:left;padding:12px 14px 8px;font-family:var(--font-j);font-size:13.5px;font-weight:600;color:var(--t1)}
.tabel-artikel th,.tabel-artikel td{padding:9px 14px;border-top:1px solid var(--garis);text-align:left}
.tabel-artikel th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--t4);font-weight:700;background:var(--papan)}
.tabel-artikel td.angka,.tabel-artikel th.angka{text-align:right;font-variant-numeric:tabular-nums}
.tabel-artikel td small{color:var(--t4);font-weight:400}
.tabel-artikel figcaption{padding:10px 14px 12px;font-size:12.3px;color:var(--t4);line-height:1.5;border-top:1px solid var(--garis)}
.listing-artikel{margin:4px 0 26px}
.listing-artikel .grid-listing{grid-template-columns:1fr;gap:12px}
@media(min-width:620px){.listing-artikel .grid-listing{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.listing-artikel .grid-listing{grid-template-columns:repeat(3,minmax(0,1fr))}}
.listing-artikel .tautan{display:inline-flex;min-height:44px;align-items:center;margin-top:6px}
.faq{margin-top:34px}
.faq details{border:1px solid var(--garis);border-radius:var(--r);background:var(--putih);margin-bottom:8px}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:600;font-size:15px;color:var(--t1);min-height:44px;display:flex;align-items:center;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";margin-left:auto;color:var(--aksen);font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 16px 14px;margin:0;color:var(--t2);font-size:15px;line-height:1.65}
/* Ajakan di akhir artikel — dulu kotak hijau tua dengan tombol hijau:
   bedanya cuma 3,12x, tombolnya nyaris hilang. Sekarang kotak krem,
   tombol tinta gelap (15,8x). */
.prosa-cta{margin-top:34px;background:var(--krem);border:1px solid var(--garis);border-radius:var(--r-l);padding:22px}
.prosa-cta b{font-family:var(--font-j);font-size:18px;display:block;margin-bottom:6px;color:var(--t1)}
.prosa-cta p{color:var(--t3);font-size:14.5px;margin:0 0 16px;max-width:52ch}
.prosa-cta .tombol{display:flex;gap:10px;flex-wrap:wrap}
.prosa-cta .btn-utama{background:var(--gelap);color:#fff}
.prosa-cta .btn-utama:hover{background:var(--gelap-2);box-shadow:0 10px 22px rgba(11,31,29,.22)}
.prosa-cta .btn-garis{background:var(--putih);border-color:var(--garis);color:var(--t1)}
.prosa-cta .btn-garis:hover{border-color:var(--gelap);color:var(--gelap)}

/* ── v1.7.0 — logo WhatsApp resmi (berkas dari ngadmin) menggantikan emoji 💬 ── */
.ikon-wa{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-4px;border-radius:5px}
.tab .ik .ikon-wa{width:22px;height:22px;vertical-align:0}
.fitur .ik .ikon-wa{width:24px;height:24px;vertical-align:0}
body.padat .aksi .ikon-wa{width:18px;height:18px}

/* ── v1.8.0 — form sebelum WhatsApp (varian C, dipilih ngadmin 13 Sep 2026) ── */
.kartu-form{background:var(--krem);border:1px solid var(--garis);border-radius:18px;padding:16px;display:grid;gap:12px;scroll-margin-top:90px}
.kartu-form h3{font-family:var(--font-j);font-size:16px;color:var(--t1);margin:0}
.kartu-form .jebakan{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.galat-form{background:#FEF3F2;color:#B42318;border-radius:10px;padding:10px 12px;font-size:13.5px}
.pilihan-tanya{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pilihan-tanya legend{font-size:12.5px;font-weight:600;color:var(--t2);margin-bottom:8px;padding:0}
.pilihan-tanya legend span{font-weight:400;color:var(--t4)}
.pilihan-tanya input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pilihan-tanya label{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--garis);border-radius:12px;background:var(--putih);font-size:13.5px;font-weight:600;color:var(--t1);cursor:pointer;user-select:none}
.pilihan-tanya input:checked+label{border-color:var(--gelap);box-shadow:inset 0 0 0 1px var(--gelap)}
.pilihan-tanya input:focus-visible+label{outline:2px solid var(--gelap);outline-offset:2px}
.medan-tanya label{display:block;font-size:12.5px;font-weight:600;color:var(--t2);margin-bottom:6px}
.medan-tanya input{width:100%;height:50px;border:1px solid var(--garis);border-radius:12px;padding:0 14px;font:500 15px var(--font-t);color:var(--t1);background:var(--putih)}
.medan-tanya input:focus{outline:none;border-color:var(--gelap);box-shadow:0 0 0 3px rgba(11,31,29,.08)}
.nomor-wrap{display:flex;align-items:stretch;border:1px solid var(--garis);border-radius:12px;background:var(--putih);overflow:hidden}
.nomor-wrap span{display:flex;align-items:center;padding:0 10px 0 14px;color:var(--t3);font-size:15px;border-right:1px solid var(--garis)}
.nomor-wrap input{border:0;border-radius:0;height:48px}
.nomor-wrap:focus-within{border-color:var(--gelap);box-shadow:0 0 0 3px rgba(11,31,29,.08)}
.medan-tanya.salah input,.medan-tanya.salah .nomor-wrap{border-color:#B42318;background:#FEF3F2}
.medan-tanya.salah .nomor-wrap input{background:transparent}
.pesan-galat{font-size:12.5px;color:#B42318;margin-top:6px}
.tombol-wa{width:100%;height:52px;border-radius:14px;background:var(--gelap);color:#fff;font-size:15.5px;border:0}
.tombol-wa:hover{background:var(--gelap-2)}
.tombol-wa .ikon-wa{width:22px;height:22px}
.kartu-form .privasi{font-size:11.8px;color:var(--t4);text-align:center;margin:0}
.detail-aksi .kartu-form{margin-bottom:10px}
/* halaman /hubungi */
.hubungi-wrap{max-width:520px;margin:0 auto;padding:22px 16px 40px}
.hubungi-kepala h1{font-size:clamp(21px,3vw,27px);margin:0 0 6px}
.hubungi-kepala p{margin:0 0 16px;color:var(--t3);font-size:15px}
.hubungi-jam{font-size:13px;color:var(--t4);text-align:center;margin-top:14px}
/* sesudah kirim */
.selesai-wa{max-width:460px;margin:0 auto;padding:40px 18px;text-align:center}
.selesai-wa .centang{width:66px;height:66px;margin:0 auto 16px;border-radius:50%;background:var(--putih);display:grid;place-items:center;font-size:30px;color:var(--gelap);box-shadow:0 8px 22px rgba(11,31,29,.1)}
.selesai-wa h1{font-size:22px;margin:0 0 6px}
.selesai-wa p{color:var(--t3);font-size:15px;margin:0 0 16px}
.selesai-wa .gelembung{background:var(--putih);border:1px solid var(--garis);border-radius:16px 16px 4px 16px;padding:12px 14px;text-align:left;font-size:14px;color:var(--t1);line-height:1.55;margin-bottom:16px}
.selesai-wa .gelembung small{display:block;color:var(--t4);font-size:11.5px;margin-bottom:6px}
.selesai-wa .lebar{display:flex}
.selesai-wa .catatan-kecil{font-size:13px;margin-top:14px}
.tautan-balik{display:inline-flex;min-height:44px;align-items:center;color:var(--t2);font-weight:600}

/* form di panel aksi detail: tanpa bingkai ganda (kotak di dalam kotak) */
.detail-aksi .kartu-form{background:none;border:0;padding:0;margin-bottom:4px}

/* ── v1.9.0 — form sebelum WhatsApp sebagai POP-UP (koreksi ngadmin 13 Sep 2026) ──
   HP: lembar dari bawah · layar ≥768px: kotak di tengah. Pakai <dialog> bawaan peramban
   (fokus terkunci di dalam, Esc menutup). */
.dialog-tanya{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:92vh;border:0;padding:0;border-radius:22px 22px 0 0;background:var(--putih);box-shadow:0 -10px 40px rgba(0,0,0,.18);overflow:auto;color:var(--t2)}
.dialog-tanya::backdrop{background:rgba(11,31,29,.5)}
.dialog-tanya .dialog-isi{background:var(--putih);border:0;border-radius:0;padding:8px 18px calc(18px + env(safe-area-inset-bottom))}
@media(min-width:768px){.dialog-tanya{inset:0;margin:auto;width:440px;max-height:88vh;border-radius:20px;box-shadow:0 30px 70px rgba(0,0,0,.25)}.dialog-tanya .pegangan{visibility:hidden}.dialog-tanya .dialog-isi{padding:14px 22px 22px}}
.dt-kepala{display:flex;align-items:center;justify-content:center;position:relative;min-height:30px}
.dt-kepala .pegangan{width:40px;height:5px;border-radius:9px;background:#D5DCDA}
.dialog-tutup{position:absolute;right:-8px;top:-6px;width:44px;height:44px;border:0;background:transparent;font-size:18px;color:var(--t3);cursor:pointer;border-radius:12px}
.dialog-tutup:hover{background:var(--papan);color:var(--t1)}
.dt-mini{display:flex;gap:10px;align-items:center;padding:10px;background:var(--krem);border:1px solid var(--garis);border-radius:14px}
.dt-mini img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:none}
.dt-mini b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;color:var(--t1);line-height:1.35}
.dt-mini span{font-size:12.5px;color:var(--t3)}
.dt-pilihan{display:flex;flex-wrap:wrap;gap:8px}
.hubungi-listing{font-size:14px!important}
.hubungi-listing a{color:var(--t1);font-weight:600}

/* ── v1.10.0 — tombol WhatsApp TIDAK hijau (bertabrakan dengan logo WhatsApp yang hijau) ──
   permintaan ngadmin 13 Sep 2026; dijaga tests/gaya.test.js */
.detail-aksi a[data-tanya]{background:var(--gelap);color:#fff}
.detail-aksi a[data-tanya]:hover{background:var(--gelap-2);box-shadow:0 10px 22px rgba(11,31,29,.22)}

/* galeri detail: 5 foto, "+N foto", pop-up geser & zoom */
.galeri-item{position:relative;cursor:zoom-in}
@media(max-width:819px){.galeri-item.utama{grid-column:span 2}}
.galeri-lagi{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,31,29,.55);color:#fff;font-weight:700;font-size:17px;letter-spacing:.01em}
.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(8,14,13,.96);color:#fff;overflow:hidden}
.lightbox::backdrop{background:rgba(8,14,13,.96)}
.lb-atas{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 12px 10px 18px;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent)}
.lb-hitung{font-size:14px;font-weight:600;letter-spacing:.03em}
.lb-panggung{position:absolute;inset:0;display:grid;place-items:center;padding:56px 0;touch-action:pan-y}
.lb-foto{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;cursor:zoom-in;transition:transform .25s ease;touch-action:none}
.lightbox.diperbesar .lb-foto{transform:scale(2.2);cursor:zoom-out}
.lb-tombol{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;display:grid;place-items:center;cursor:pointer}
.lb-tombol:hover{background:rgba(255,255,255,.26)}
.lb-tutup{font-size:18px}
.lb-kiri,.lb-kanan{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.lb-kiri{left:12px}.lb-kanan{right:12px}
.lightbox.diperbesar .lb-kiri,.lightbox.diperbesar .lb-kanan{display:none}
@media(max-width:600px){.lb-kiri,.lb-kanan{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));transform:none}.lb-kiri{left:calc(50% - 60px)}.lb-kanan{right:calc(50% - 60px)}}

/* ── v1.11.0 — band jasa bangun TIDAK hijau (bertabrakan dengan tombol WhatsApp berlogo hijau) ──
   ngadmin 13 Sep 2026: "maksudku ini" (band), bukan tombol. Pola sama dengan kotak ajakan artikel:
   latar krem, teks tinta, tombol tinta gelap. Dijaga tests/gaya.test.js */
.band{background:var(--krem);color:var(--t2);border:1px solid var(--garis)}
.band h2{color:var(--t1)}
.band p{color:var(--t3)}
.band .btn{background:var(--gelap);color:#fff}
.band .btn:hover{background:var(--gelap-2);color:#fff}
.band-ikon{background:var(--putih);border:1px solid var(--garis);color:var(--t1)}
.band-poin span{color:var(--t2)}
/* ── v1.12.0 — watermark lapisan tampilan, VARIAN B (ngadmin 13 Sep 2026: stiker CSS, lalu pilih
   "B · tengah, besar, transparan" dari mockup/watermark v1.0.1) + penahan simpan foto sementara.
   Watermark di server menyusul 1 Okt. Hanya foto halaman detail & pop-up galeri, bukan foto kartu.
   Lapisan ::after menutup seluruh foto: klik kanan / tahan lama kena lapisan, bukan <img>.
   Dijaga tests/gaya.test.js */
.galeri-item img,.lb-bingkai .lb-foto{pointer-events:none;-webkit-user-drag:none}
.galeri-item,.lb-bingkai{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.galeri-item::after,.lb-bingkai::after{content:"jogjaproperti.id";position:absolute;inset:0;display:grid;place-items:center;white-space:nowrap;font:800 28px/1 var(--font-j,system-ui),system-ui,sans-serif;letter-spacing:.01em;color:rgba(255,255,255,.34);text-shadow:0 1px 3px rgba(0,0,0,.25);pointer-events:auto;z-index:1}
.galeri-item:not(.utama)::after{font-size:15px}
.galeri-lagi{z-index:2}
.lb-bingkai{position:relative;display:inline-block;line-height:0;max-width:100vw;touch-action:none}
.lb-bingkai .lb-foto{max-width:100vw;max-height:calc(100vh - 112px);max-height:calc(100dvh - 112px)}
.lb-bingkai::after{font-size:32px;cursor:zoom-in}
.lightbox.diperbesar .lb-bingkai::after{opacity:.55;cursor:zoom-out}

/* ── v1.13.0 — Jelajah per area (ngadmin 14 Sep 2026: "full layar sejajar 6, pendekin tingginya") ──
   Layar lebar: semua area sejajar satu baris membagi rata lebar layar (maks 6 kolom; area ke-7 turun baris).
   Tinggi kotak dipendekkan dari rasio 3:2 menjadi tinggi tetap. HP tetap 2 kolom, ikut dipendekkan. */
.area a{aspect-ratio:auto;min-height:84px;padding:12px 13px}
@media(min-width:920px){
  .area{grid-template-columns:repeat(6,minmax(0,1fr))}
  .area:has(> a:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
  .area:has(> a:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .area a{min-height:92px}
}

/* ── v1.14.0 — beranda: 8 listing di layar lebar (ngadmin 14 Sep 2026: "listing 8 ya di home desktop jgn 6") ──
   ≥1280px grid 4 kolom → 8 kartu = 2 baris penuh. Di bawah itu (3/2/1 kolom) kartu ke-7 & ke-8 disembunyikan
   supaya tidak ada baris bolong dan HP tidak makin panjang. */
@media(max-width:1279px){.grid-beranda > :nth-child(n+7){display:none}}

/* ── v1.15.0 — PALET C · NILA & EMAS (ngadmin 15 Sep 2026: "Palet warna C · Nila & Emas") ──
   Sumber: mockup/palet v1.0 (_alat/buat.mjs cssPalet c). Diletakkan paling akhir supaya menimpa warna lama.
   Bagian 1 = token :root, bagian 2 = selektor yang memakai hijau/teal LANGSUNG (bukan token).
   Tidak diubah: tombol WhatsApp tinta gelap + logo resmi hijau, band jasa bangun krem + tombol tinta gelap. */
:root{
  --aksen:#1E3A6B; --aksen-2:#2A4C85; --aksen-lembut:#E7EDF6;
  --gelap:#131B2B; --gelap-2:#22304A;
  --papan:#F5F5F2; --krem:#F4EEDC; --garis:#E4E3DE;
  --t1:#141A26; --t2:#333A48; --t3:#555C6A; --t4:#5F6673; --t5:#666D7A;
}
/* 2. warna langsung */
.merek b,.merek-hp b,.f-logo b{background:#1E3A6B}
.eyebrow{border-color:rgba(30,58,107,.20)}
.eyebrow::before{background:#C8A04A}
.hero{background:linear-gradient(168deg,#EEF1F6 0%,#FBFAF6 64%)}
.hero h1 em{color:var(--aksen);text-decoration:underline;text-decoration-color:#C8A04A;text-decoration-thickness:.11em;text-underline-offset:.16em}
.btn-utama:hover{box-shadow:0 10px 22px rgba(19,27,43,.24)}
.hero-foto,.kartu-foto,.artikel-foto,.galeri-item,.kenapa-media{background:#DFE3EA}
.kartu-apung{box-shadow:0 14px 32px rgba(19,27,43,.16)}
.kartu-apung .ik{background:#F4EEDC;color:#1E3A6B}
.kotak-cari{box-shadow:0 20px 44px rgba(19,27,43,.10)}
.kartu:hover{box-shadow:0 14px 32px rgba(19,27,43,.11)}
.artikel:hover{box-shadow:0 12px 28px rgba(19,27,43,.10)}
.fitur .ik{box-shadow:0 4px 12px rgba(19,27,43,.07)}
.lencana span{background:rgba(19,27,43,.8)}
.lencana .teal{background:#1E3A6B}
.hitung-foto{background:rgba(19,27,43,.72)}
.detail-harga{color:#1E3A6B}
.kenapa-teks .pil-kecil{border-color:rgba(30,58,107,.20)}
.seksi.gelap{color:#B4BCCB}
.seksi.gelap .kepala p{color:#B4BCCB!important}
.langkah p{color:#B4BCCB}
.area button{background:#1B2A45}
.area a{background:linear-gradient(160deg,#1B2A45,#2E4570)}
.area a:hover{background:linear-gradient(160deg,#22355A,#385388)}
footer,.f-bawah,.peta-kecil{color:#B4BCCB}
.peta-kotak,.peta-penuh{background:linear-gradient(140deg,#DFE3EA,#F5F5F2)}
.pin{box-shadow:0 6px 16px rgba(19,27,43,.30)}
.sheet-latar,.dialog-tanya::backdrop{background:rgba(19,27,43,.46)}
.galeri-lagi{background:rgba(19,27,43,.55)}
.lightbox,.lightbox::backdrop{background:rgba(19,27,43,.96)}
.tanda-mockup{background:rgba(19,27,43,.9);color:#B4BCCB}
.skala{background:rgba(19,27,43,.92)}
.skala button{color:#B4BCCB}
.dt-kepala .pegangan{background:#E4E3DE}
.medan-tanya input:focus,.nomor-wrap:focus-within{box-shadow:0 0 0 3px rgba(19,27,43,.08)}

/* ── v1.16.0 — tombol WhatsApp hijau khas WhatsApp + seksi langkah oranye (ngadmin 16 Sep 2026) ──
   Mengganti keputusan 13 Sep (tombol tinta gelap). Logo resmi dibalik jadi putih supaya tidak
   hijau-di-atas-hijau. Teksnya tinta gelap (#0A1F14), bukan putih: putih di atas #25D366 cuma
   1,98:1 (di bawah ambang keterbacaan 4,5:1), sedangkan tinta gelap 10,6:1. */
.s-wa,.topbar-wa,.aksi .wa,.tombol-wa,.detail-aksi a[data-tanya],.band .btn{background:#25D366;color:#0A1F14}
.s-wa:hover,.topbar-wa:hover,.aksi .wa:hover,.tombol-wa:hover,.detail-aksi a[data-tanya]:hover,.band .btn:hover{background:#1EBE5B;color:#0A1F14}
.s-wa img,.topbar-wa img,.aksi .wa img,.tombol-wa img,.detail-aksi a[data-tanya] img,.band .btn img{filter:brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0,0,0,.25))}

/* seksi "Dari tanya sampai akad" — oranye */
.seksi.gelap{background:#C2410C;color:rgba(255,255,255,.92)}
.seksi.gelap h2,.seksi.gelap h3{color:#fff}
.seksi.gelap .kepala p{color:rgba(255,255,255,.88)!important}
.langkah p{color:rgba(255,255,255,.9)}
.langkah .no{color:rgba(255,255,255,.22)}

/* ── v1.17.0 — ilustrasi Jogja & kaki halaman (usulan redesain ngadmin 16 Sep 2026) ──
   Ilustrasi = hiasan: aria-hidden, tidak menutupi teks, dan hilang di layar sempit kalau mengganggu. */
.s-wa{gap:10px;height:auto;padding:11px 12px;line-height:1.2}
.s-wa span{display:flex;flex-direction:column;align-items:flex-start}
.s-wa small{font-size:11.5px;font-weight:500;opacity:.8}
.s-ilus{position:relative;margin-top:14px;padding-top:10px;color:var(--t3)}
.s-ilus b{display:block;font-family:var(--font-j);font-size:13.5px;line-height:1.35;color:var(--t2)}
.s-ilus img{width:100%;height:auto;margin-top:6px;opacity:.9}

.hero{position:relative;overflow:hidden}
.hero-awan{position:absolute;right:-40px;top:-10px;width:min(58%,720px);height:auto;opacity:.55;pointer-events:none;z-index:0}
.hero-grid{position:relative;z-index:1}
@media(max-width:820px){.hero-awan{right:-60px;top:-6px;width:78%;opacity:.4}}

.ilus-gunung{margin:22px -18px -18px;pointer-events:none}
.ilus-gunung img{width:100%;height:auto;opacity:.75;display:block}

/* kaki halaman */
.kaki{grid-column:1/-1;background:var(--gelap);color:rgba(255,255,255,.72);margin-top:28px}
.kaki-dalam{max-width:1180px;margin:0 auto;padding:26px 18px 30px;display:grid;gap:14px}
@media(min-width:900px){.kaki-dalam{grid-template-columns:1fr auto;align-items:center;padding:30px 24px}}
.kaki-merek b{display:block;font-family:var(--font-j);font-size:17px;color:#fff}
.kaki-merek span{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.kaki-tautan{display:flex;flex-wrap:wrap;gap:14px 20px;font-size:14px}
.kaki-tautan a{color:rgba(255,255,255,.82)}
.kaki-tautan a:hover{color:#fff;text-decoration:underline}
.kaki-hak{font-size:12.5px;opacity:.7}
@media(min-width:900px){.kaki-hak{grid-column:1/-1}}
@media(max-width:819px){.kaki{margin-bottom:64px}}

/* ── v1.18.0 — palet biru muda mengikuti gambar usulan redesain (ngadmin 16 Sep 2026: "iya samain") ──
   Menimpa palet C. Yang TIDAK berubah: tombol WhatsApp hijau, seksi langkah oranye, band jasa krem. */
:root{
  --aksen:#1D63C7; --aksen-2:#1750A8; --aksen-lembut:#E4EEFC;
  --gelap:#123C77; --gelap-2:#0E2F5E;
  --papan:#EDF4FD; --krem:#F6EFDF; --garis:#DCE6F4;
  --t1:#10243F; --t2:#2E415C; --t3:#516481; --t4:#5B6E8B; --t5:#647794;
}
body{background:#F6FAFF}
.hero{background:linear-gradient(168deg,#E3EEFC 0%,#F7FBFF 66%)}
.hero-awan{opacity:.85}
.hero h1 em{color:var(--aksen);text-decoration-color:#F0A202}
.eyebrow{border-color:rgba(29,99,199,.22)}
.eyebrow::before{background:var(--aksen)}
.merek b,.merek-hp b,.f-logo b{background:var(--aksen)}
.kartu-apung .ik{background:#E4EEFC;color:var(--aksen)}
.lencana .teal{background:var(--gelap)}
.detail-harga{color:var(--aksen)}
.area a{background:linear-gradient(160deg,#1B4C8F,#2E6FB8)}
.area a:hover{background:linear-gradient(160deg,#23579E,#3A7EC9)}
.seksi.papan{background:var(--papan)}
.hero-foto,.kartu-foto,.artikel-foto,.galeri-item,.kenapa-media{background:#DDE8F6}
.kaki{background:var(--gelap)}
.s-ilus img{opacity:1}

/* ── v1.19.0 — hero: latar langit + ilustrasi rumah & Tugu (berkas ngadmin 16 Sep 2026) ── */
.hero{background:#E9F3FE url('/ilustrasi/latar-hero.webp') center top/cover no-repeat}
@media(max-width:820px){.hero{background-image:url('/ilustrasi/latar-hero-hp.webp')}}
.hero-awan{display:none}
.hero-foto{background:none;border-radius:0;overflow:visible;box-shadow:none;aspect-ratio:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end}
.hero-foto img.hero-ilus{width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(18,60,119,.18))}
.hero .kartu-apung{background:rgba(255,255,255,.94);backdrop-filter:blur(2px)}

/* ── v1.20.0 — hero & kotak cari mengikuti gambar usulan (ngadmin 16 Sep 2026) ── */
.hero-foto img.hero-kutipan{display:block;width:min(56%,300px);height:auto;margin:0 6% -10px auto;position:relative;z-index:2}
@media(max-width:820px){.hero-kutipan{width:70%;margin-bottom:-10px}}
.hero-stat{gap:18px 26px;flex-wrap:wrap}
.hero-stat > div{display:flex;align-items:center;gap:10px}
.hero-stat .ik{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--aksen);box-shadow:0 4px 12px rgba(18,60,119,.10)}
.hero-stat .ik svg{width:19px;height:19px}
.hero-stat b{font-size:20px;line-height:1.1;display:block}
.hero-stat span{font-size:12.5px}
.hero .kartu-apung{left:auto;right:8%;bottom:14%;max-width:330px}

/* kotak cari: kartu putih, tab berikon, tiga medan berlabel kecil, tombol biru */
.kotak-cari{background:#fff;border-radius:22px;box-shadow:0 18px 40px rgba(18,60,119,.10);border:1px solid var(--garis);padding:14px}
.cari-tab{gap:6px;flex-wrap:wrap}
.cari-tab label{border-radius:12px;padding:9px 14px;font-weight:600;font-size:14px;color:var(--t3);background:transparent;border:1px solid transparent}
.cari-tab input:checked + label{background:var(--aksen);color:#fff}
.cari-tab label:hover{background:var(--aksen-lembut);color:var(--aksen)}
.cari-baris{gap:10px;margin-top:10px}
.kotak-cari .medan{background:#F7FAFF;border:1px solid var(--garis);border-radius:14px;padding:8px 14px}
.kotak-cari .medan label{font-size:11.5px;letter-spacing:.02em;color:var(--t4);font-weight:600}
.kotak-cari .medan input,.kotak-cari .medan select{font-size:14.6px;font-weight:600;color:var(--t1);background:transparent;border:0;width:100%}
.kotak-cari .medan input::placeholder{font-weight:500;color:var(--t4)}
.kotak-cari .btn-utama{border-radius:14px;min-height:56px;padding:0 26px;font-size:15.5px}

/* ── v1.21.0 — hero dirapatkan (ngadmin 16 Sep 2026: "masih banyak kosongnya") ──
   Ilustrasi rumah dibesarkan sampai menyentuh kaki hero, kolom kanan lebih lebar,
   dan kotak cari ditarik naik supaya menumpang di ujung hero seperti gambar usulan. */
@media(min-width:1024px){
  body.padat .hero-grid,body.sedang .hero-grid{grid-template-columns:1fr 1.06fr;gap:24px;align-items:end}
  .hero-grid > div:first-child{padding-bottom:26px}
  body.padat .hero{padding-top:18px}
  .hero-foto{margin-bottom:-6px}
  .hero-foto img.hero-ilus{width:106%;max-width:none;margin-right:-6%}
  .hero-foto img.hero-kutipan{width:min(52%,280px);margin-bottom:-26px}
  .hero .kartu-apung{right:6%;bottom:9%}
  .hero + .pad-saring,.hero ~ .pad-saring{margin-top:-46px;position:relative;z-index:3}
}
body.padat .hero h1{margin-bottom:10px}
body.padat .hero-stat{margin-top:14px;padding-top:12px}
.pad-saring{padding-top:0}

/* ── v1.22.0 — padat lagi (ngadmin 16 Sep 2026: "ini ga bisa dicompact?") ──
   Hero, angka, dan kotak cari dipangkas tingginya tanpa mengecilkan tap target (tombol tetap ≥44px). */
@media(min-width:1024px){
  body.padat .hero{padding-top:10px}
  body.padat .hero h1{font-size:clamp(23px,2.9vw,34px);line-height:1.18;margin-bottom:8px}
  body.padat .hero .lead{font-size:14.2px;line-height:1.5;margin-bottom:14px;max-width:52ch}
  body.padat .hero-tombol .btn{height:44px;padding:0 18px;font-size:14.5px}
  body.padat .hero-stat{margin-top:12px;padding-top:10px;gap:14px 22px}
  .hero-stat .ik{width:32px;height:32px;border-radius:9px}
  .hero-stat .ik svg{width:16px;height:16px}
  body.padat .hero-stat b{font-size:17px}
  body.padat .hero-stat span{font-size:11.5px}
  .hero-grid > div:first-child{padding-bottom:14px}
  .kotak-cari{padding:10px;border-radius:18px}
  .cari-tab label{padding:7px 12px;font-size:13.4px}
  .cari-baris{margin-top:8px;gap:8px}
  .kotak-cari .medan{padding:6px 12px;border-radius:12px}
  .kotak-cari .medan label{font-size:11px}
  .kotak-cari .medan input,.kotak-cari .medan select{font-size:14px}
  .kotak-cari .btn-utama{min-height:48px;border-radius:12px;padding:0 22px;font-size:15px}
  .hero-foto img.hero-kutipan{width:min(46%,240px);margin-bottom:-18px}
}
@media(min-width:1024px){
  /* tinggi hero ditentukan ilustrasi — batasi tingginya, bukan lebarnya */
  .hero-foto img.hero-ilus{width:auto;max-width:112%;max-height:min(44vh,400px);margin-left:auto;margin-right:-6%}
  body.padat .hero-grid,body.sedang .hero-grid{align-items:end}
}

/* ── v1.23.0 — layar lebar (≥1500px): hero tidak melebar berlebihan (ngadmin: "masih jauh2an") ── */
@media(min-width:1500px){
  .hero-grid{max-width:1180px;gap:18px}
  .kotak-cari{max-width:1180px;margin-inline:auto}
  .hero-foto img.hero-ilus{max-height:min(40vh,380px)}
  .seksi-dalam{max-width:1180px}
}

/* ── v1.24.0 — hero layar lebar dirapikan sekali (ngadmin 16 Sep 2026: "urusan jarak yg kosong antara hero dan gambar ini mulai menyebalkan") ──
   Sebab lama: ilustrasi dibatasi max-height lalu didorong margin-left:auto → mengecil & menempel kanan (celah 134px, meluber 35px);
   kotak cari digeser transform:translateY(44%) → langit kosong 85px di atasnya; kalimat pembuka dibatasi 52ch (398px).
   body[class] dipakai supaya menang dari aturan body.padat/body.sedang di blok-blok sebelumnya. Dikunci tests/gaya.test.js. */
@media(min-width:1000px){
  body[class] .hero{padding-bottom:26px}
  body[class] .hero .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:28px;align-items:center;max-width:1180px}
  body[class] .hero .hero-grid > div:first-child{padding-bottom:0}
  body[class] .hero .lead{max-width:none}
  body[class] .hero .hero-stat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px;padding-top:14px}
  body[class] .hero .hero-stat > div{gap:9px;align-items:flex-start}
  body[class] .hero .hero-stat .ik{width:34px;height:34px;border-radius:10px}
  body[class] .hero .hero-stat .ik svg{width:17px;height:17px}
  body[class] .hero .hero-stat b{font-size:14.5px;line-height:1.25;margin-bottom:2px}
  body[class] .hero .hero-stat span{font-size:12px;line-height:1.35;display:block}
  body[class] .hero .hero-foto{justify-content:center;margin:0}
  body[class] .hero .hero-foto img.hero-ilus{width:100%;max-width:100%;max-height:none;margin:0}
  body[class] .hero .hero-foto img.hero-kutipan{width:min(54%,270px);margin:0 4% -20px auto}
  body[class] .hero .kartu-apung{right:2%;bottom:6%}
  body[class] .kotak-cari{margin-top:20px;transform:none}
}

/* ── v1.25.0 — dua bug tampilan (ngadmin 16 Sep 2026: "ini nabrak, dan logo wa hilang") ──
   1. Logo WA: filter brightness(0) invert(1) di v1.16 memutihkan SELURUH gambar (kotak hijau + gagang
      telepon) → kotak putih polos. Logo resmi dipakai apa adanya, dipisahkan dari latar hijau tombol
      dengan bingkai putih tipis.
   2. Kaki halaman: grid-column 1/-1 membentang dari x=0, padahal sidebar fixed 214px menutupinya.
      -2/-1 = kolom konten di layar lebar, dan tetap kolom tunggal di HP. Diukur di 1536 & 375 px. */
.s-wa img,.topbar-wa img,.aksi .wa img,.tombol-wa img,.detail-aksi a[data-tanya] img,.band .btn img{filter:none;border-radius:6px;box-shadow:0 0 0 1.5px #fff}
.kaki{grid-column:-2/-1}

/* ── v1.26.0 — logo resmi dari ngadmin (17 Sep 2026: "ini logonya") ── */
.merek{padding:4px 8px 18px}
.merek img{display:block;width:100%;max-width:196px;height:auto}
.merek-hp img{display:block;width:36px;height:36px}

/* ── v1.27.0 — layout beranda dari mockup ngadmin (17 Sep 2026: "Usulan perubahan dan tambahan layout") ──
   Sengaja memakai kelas baru (.seksi-area, .area-foto, .proses, .konstruksi, .kaki-kolom) supaya tidak bertarung
   dengan lapisan aturan lama (.area, .seksi.gelap, .band) — pelajaran celah hero 16 Sep. */

/* kotak area berfoto */
.seksi-area .seksi-dalam{position:relative}
.area-hias{position:absolute;top:-6px;right:0;width:min(62%,760px);opacity:.55;pointer-events:none;z-index:0}
.area-hias img{display:block;width:100%;height:auto}
.seksi-area .kepala{position:relative;z-index:1}
.area-foto{position:relative;z-index:1;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.area-foto{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:1180px){.area-foto{grid-template-columns:repeat(6,minmax(0,1fr))}}
.area-kartu{display:flex;flex-direction:column;background:#fff;border:1px solid var(--garis);border-radius:14px;overflow:hidden;box-shadow:0 8px 22px rgba(18,60,119,.08);transition:transform .2s,box-shadow .2s;color:var(--t1)}
.area-kartu:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(18,60,119,.14)}
.area-gambar{display:block;aspect-ratio:16/10;background:#DDE8F6 url('/ilustrasi/gunung-bawah.webp') center bottom/220% auto no-repeat;overflow:hidden}
.area-gambar img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.area-kartu:hover .area-gambar img{transform:scale(1.05)}
.area-bawah{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 12px}
.area-bawah b{display:block;font-family:var(--font-j);font-size:13.5px;line-height:1.25}
.area-bawah small{display:block;font-size:12px;color:var(--t4);margin-top:2px}
.area-panah{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--aksen-lembut);color:var(--aksen);font-size:14px}
.area-semua{position:relative;z-index:1;text-align:center;margin-top:18px}
.area-semua .btn{border-radius:999px;padding:0 22px}

/* seksi proses oranye */
.proses{background:linear-gradient(120deg,#B93A0B 0%,#D2500F 100%);color:rgba(255,255,255,.92)}
.proses h2,.proses h3{color:#fff}
.proses-kepala{display:grid;gap:14px;margin-bottom:22px}
@media(min-width:900px){.proses-kepala{grid-template-columns:1fr auto;align-items:start}}
.pil-proses{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.proses-kepala h2{font-size:clamp(22px,2.6vw,30px);max-width:34ch;line-height:1.2;margin:0}
.proses-kepala p{margin:8px 0 0;color:rgba(255,255,255,.85);font-size:14.5px}
.btn.proses-tombol{background:#fff;color:#B93A0B;border-radius:999px;justify-self:start;white-space:nowrap}
.btn.proses-tombol:hover{background:#FFF1E8}
.proses-langkah{list-style:none;margin:0;padding:0;display:grid;gap:18px}
@media(min-width:900px){.proses-langkah{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}}
.proses-langkah li{display:flex;gap:14px;align-items:flex-start;position:relative}
@media(min-width:900px){.proses-langkah li:not(:last-child)::after{content:"→";position:absolute;right:-26px;top:22px;font-size:20px;color:rgba(255,255,255,.75)}}
.proses-ik{flex:none;width:58px;height:58px;border-radius:50%;background:#fff;color:#C2410C;display:grid;place-items:center;box-shadow:0 8px 18px rgba(0,0,0,.14)}
.proses-ik svg{width:26px;height:26px}
.proses-ik .ikon-wa{width:30px;height:30px;vertical-align:0}
.proses-no{display:block;font-family:var(--font-j);font-size:26px;font-weight:700;line-height:1;color:rgba(255,255,255,.55);margin-bottom:4px}
.proses-langkah h3{font-size:16.5px;margin:0 0 4px}
.proses-langkah p{margin:0;font-size:13.8px;line-height:1.55;color:rgba(255,255,255,.86)}

/* seksi konstruksi tanpa kotak */
.konstruksi{background:#FBF6EE}
.pil-konstruksi{display:inline-block;background:var(--aksen-lembut);color:var(--aksen);border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.konstruksi-isi{max-width:640px}
.konstruksi h2{font-size:clamp(24px,3vw,36px);line-height:1.15;margin:0 0 10px}
.konstruksi h2 em{display:block;font-style:normal;color:var(--aksen)}
.konstruksi-isi > p{color:var(--t3);font-size:15px;margin:0 0 16px;max-width:52ch}
.konstruksi-poin{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:12px 22px}
.konstruksi-poin li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;color:var(--t1)}
.konstruksi-poin .ik{width:46px;height:46px;border-radius:50%;background:#fff;color:#EA580C;display:grid;place-items:center;flex:none;box-shadow:0 6px 16px rgba(194,65,12,.16)}
.konstruksi-poin .ik svg{width:22px;height:22px;stroke-width:2.3}
.btn.konstruksi-tombol{background:#25D366;color:#0A1F14;border-radius:999px;min-height:52px;padding:0 24px;font-size:15px}
.btn.konstruksi-tombol:hover{background:#1EBE5B}
.btn.konstruksi-tombol img{filter:none;border-radius:6px;box-shadow:0 0 0 1.5px #fff}

/* kaki 4 kolom */
.kaki-dalam.kaki-kolom{position:relative;overflow:hidden;display:grid;gap:22px;grid-template-columns:1fr 1fr;padding:30px 18px 26px;align-items:start}
@media(min-width:900px){.kaki-dalam.kaki-kolom{grid-template-columns:1.4fr 1fr 1fr 1.1fr;padding:38px 24px 30px}}
.kaki-kolom .kaki-merek{grid-column:1/-1}
@media(min-width:900px){.kaki-kolom .kaki-merek{grid-column:auto}}
.kaki-kolom .kaki-merek p{margin:12px 0 0;font-size:13.5px;color:rgba(255,255,255,.75)}
.kaki-grup{display:flex;flex-direction:column;gap:9px;font-size:14px;position:relative;z-index:1}
.kaki-grup h3{font-size:14.5px;color:#fff;margin:0 0 4px;font-family:var(--font-j)}
.kaki-grup a{color:rgba(255,255,255,.8);display:inline-flex;align-items:center;gap:8px}
.kaki-grup a:hover{color:#fff;text-decoration:underline}
.kaki-grup .ikon-wa{width:18px;height:18px}
.kaki-lokasi{color:rgba(255,255,255,.7)}
.kaki-hias{position:absolute;right:-10px;bottom:-14px;width:min(34%,300px);height:auto;opacity:.06;filter:brightness(0) invert(1);pointer-events:none}
@media(max-width:899px){.kaki-hias{width:46%;opacity:.07}}
.kaki > .kaki-hak{max-width:1180px;margin:0 auto;padding:14px 24px 18px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;opacity:.7}

/* ── v1.28.1 — bagian bawah beranda SELEBAR LAYAR + tombol WhatsApp mengambang (ngadmin 17 Sep 2026:
   "kok beda ya ini kan full width · harusnya kalo udh sampe full width, button wa jadi floating aja ga usah di sidebar").
   RALAT v1.28.0 (ngadmin: "duh kamu salah soal sidebar"): sidebar JANGAN ikut tergulir sejak awal — dulu habis di 676px
   sehingga kolom kiri kosong di samping listing. Yang benar: sidebar TETAP menempel selama hero, cari, dan listing;
   bagian selebar layar (area, proses, konstruksi, kaki) punya latar sendiri dan MENUTUPI sidebar saat digulir sampai sana,
   dan baru di titik itu tombol WhatsApp pindah jadi mengambang (public/tanya.js). */
@media(min-width:1024px){
  :root{--lebar-sidebar:238px}
  body.padat{--lebar-sidebar:214px}
  /* sidebar menempel setinggi layar di kolom kiri baris 1 (sticky, bukan fixed: kaki di baris 2 tidak tertimpa) */
  body[class] .sidebar{position:sticky;top:0;left:auto;height:100vh;align-self:start;grid-column:1;grid-row:1;z-index:20}
  body[class] .konten{grid-column:2;grid-row:1}
  body[class] .kaki{grid-column:1/-1;grid-row:2;margin-top:0;position:relative;z-index:30}
  /* bagian bawah beranda keluar ke tepi kiri layar dan menutupi sidebar */
  body[class] .seksi-area,body[class] .proses,body[class] .konstruksi{position:relative;z-index:30;margin-left:calc(-1 * var(--lebar-sidebar));width:calc(100% + var(--lebar-sidebar))}
  body[class] .seksi-area{background:var(--putih)}
  body[class] .seksi-area .seksi-dalam,body[class] .proses .seksi-dalam,body[class] .konstruksi .seksi-dalam{max-width:1180px;margin-inline:auto}
}

/* tombol WhatsApp mengambang — hanya layar lebar (HP sudah punya tombol di bar atas & tab bawah) */
.wa-apung{display:none}
@media(min-width:1024px){
  .wa-apung{display:inline-flex;align-items:center;gap:10px;position:fixed;right:24px;bottom:24px;z-index:40;background:#25D366;color:#0A1F14;font-weight:700;font-size:15px;padding:12px 20px 12px 14px;border-radius:999px;box-shadow:0 12px 28px rgba(10,31,20,.25);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s,transform .25s}
  .wa-apung:hover{background:#1EBE5B;color:#0A1F14}
  .wa-apung .ikon-wa{width:26px;height:26px;vertical-align:0;border-radius:6px;box-shadow:0 0 0 1.5px #fff}
  body.wa-apung-tampil .wa-apung{opacity:1;transform:none;pointer-events:auto}
}

/* v1.28.2 — sebab sidebar gagal menempel (diukur di Edge yang merender, 17 Sep 2026): html & body sama-sama
   overflow-x:hidden → body jadi wadah gulir sendiri, position:sticky di dalamnya tidak pernah menempel.
   overflow-x:clip tetap mencegah geser ke samping TANPA membuat wadah gulir. */
html,body{overflow-x:clip}

/* v1.29.1 — ilustrasi seksi konstruksi dari ngadmin, PENUH seperti mockup (ngadmin 17 Sep 2026: "gambar rumah yg bawah
   harunya full" · "kamu jg blm pake warnanya"). Dulu: terkurung kolom kanan wadah 1180px — 590px lebar, 171px dari tepi kanan,
   84px dari bawah seksi. Sekarang di layar lebar: menempel tepi kanan layar & dasar seksi (bersentuhan dengan kaki halaman). */
.konstruksi-gambar img{display:block;width:100%;height:auto}
@media(min-width:900px){
  .konstruksi{position:relative;overflow:hidden;min-height:clamp(440px,31vw,560px);padding-bottom:0}
  .konstruksi-grid{display:block;position:static}
  .konstruksi-isi{position:relative;z-index:1;max-width:520px;padding-bottom:52px}
  .konstruksi-gambar{position:absolute;right:0;bottom:0;width:min(58%,1020px);pointer-events:none}
}
@media(max-width:899px){.konstruksi{padding-bottom:0}.konstruksi-gambar{margin:18px -16px 0}}

/* v1.30.0 — kaki halaman berlatar ilustrasi malam Jogja (gunung, candi, Tugu) dari ngadmin 17 Sep 2026: "ganti footernya,
   pake gambar ini". Gambar menempel di dasar, langitnya polos jadi aman terpotong di atas; pita hitam di dasar gambar asli
   dibuang dan dipudarkan ke warna dasar #0A2A5E supaya menyambung ke baris hak cipta. Lapisan gelap tipis di kiri menjaga
   tulisan tetap terbaca. */
body[class] .kaki{background:linear-gradient(90deg,rgba(6,24,56,.55) 0%,rgba(6,24,56,.25) 55%,rgba(6,24,56,0) 80%),url('/ilustrasi/kaki-jogja.webp') center bottom/cover no-repeat,#0A2A5E;color:rgba(255,255,255,.8)}
@media(max-width:899px){body[class] .kaki{background:linear-gradient(180deg,rgba(6,24,56,.45),rgba(6,24,56,.2)),url('/ilustrasi/kaki-jogja-hp.webp') 72% bottom/cover no-repeat,#0A2A5E}}
.kaki .kaki-dalam.kaki-kolom{overflow:visible;padding-bottom:clamp(40px,6vw,90px)}
@media(min-width:900px){.kaki-kolom .kaki-grup{padding-left:28px;border-left:1px solid rgba(255,255,255,.14);gap:5px;font-size:13.5px}.kaki-kolom .kaki-grup h3{margin-bottom:6px}.kaki .kaki-dalam.kaki-kolom{padding-top:30px}}
.kaki .kaki-merek span{display:block;margin-top:4px;font-size:11.5px;letter-spacing:.08em;opacity:.85}
.kaki > .kaki-hak{border-top-color:rgba(255,255,255,.16)}

/* v1.31.0 — kalimat beranda saran ChatGPT yang dikirim ngadmin (K-36, "36 Oke gas" 18 Sep 2026) */
/* kartu jenis properti */
.jenis-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.jenis-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.jenis-kartu{display:flex;flex-direction:column;gap:6px;padding:18px 16px;border:1px solid var(--garis);border-radius:14px;background:var(--putih);color:var(--t2);transition:transform .15s,box-shadow .15s}
.jenis-kartu:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(18,60,119,.10)}
.jenis-kartu b{font-family:var(--font-j);font-size:16px;color:var(--gelap)}
.jenis-kartu span:not(.jenis-ik){font-size:13.5px;line-height:1.5;color:var(--t3)}
.jenis-ik{font-size:26px;line-height:1}
/* proses 4 langkah */
@media(min-width:900px){.proses-langkah.empat{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}}
@media(min-width:900px){.proses-langkah.empat li:not(:last-child)::after{right:-23px}}
/* teks SEO paling bawah */
.seksi-seo{background:var(--putih)}
.seksi-seo .seksi-dalam{max-width:900px}
.seksi-seo h2{font-size:clamp(19px,2vw,23px);margin:0 0 10px;color:var(--gelap)}
.seksi-seo p{margin:0 0 10px;font-size:14.5px;line-height:1.7;color:var(--t3)}
@media(min-width:1024px){
  body[class] .seksi-seo{position:relative;z-index:30;margin-left:calc(-1 * var(--lebar-sidebar));width:calc(100% + var(--lebar-sidebar))}
  body[class] .seksi-seo .seksi-dalam{max-width:900px;margin-inline:auto}
}

/* v1.32.0 — ngadmin 18 Sep 2026: tayangan Kost Eksklusif + teks SEO di kaki halaman (kolom Properti & Informasi dipersempit) */
.panel-kost a.kenapa-media{display:block}
.kaki-kolom .kaki-seo{grid-column:1/-1}
.kaki-kolom .kaki-seo h3{font-size:14.5px}
.kaki-kolom .kaki-seo p{margin:0 0 8px;font-size:13px;line-height:1.65;color:rgba(255,255,255,.72)}
@media(min-width:900px){
  .kaki-dalam.kaki-kolom{grid-template-columns:1.25fr .65fr .65fr 2.3fr}
  .kaki-kolom .kaki-seo{grid-column:auto}
}

/* v1.33.0 — kaki halaman 3 kolom (ngadmin 18 Sep 2026: "Ganti ini aja, 3 kolom aja"): kolom merek memuat teks SEO */
.kaki-kolom .kaki-merek.kaki-seo h3{margin:16px 0 6px;font-size:14.5px;color:#fff;font-family:var(--font-j)}
.kaki-kolom .kaki-merek.kaki-seo p{margin:0;font-size:13px;line-height:1.65;color:rgba(255,255,255,.75);max-width:560px}
@media(min-width:900px){
  .kaki-dalam.kaki-kolom{grid-template-columns:2.2fr .8fr .8fr}
  .kaki-kolom .kaki-merek.kaki-seo{grid-column:auto;padding-right:24px}
}