/* ============================================================
   [Nama Portal] — stylesheet
   Ubah warna merek di blok :root bila diperlukan.
   ============================================================ */

/* Huruf disajikan sendiri dari assets/fonts/, bukan dari Google Fonts —
   memuat dari CDN Google berarti alamat IP setiap pengunjung terkirim ke
   pihak ketiga di setiap pemuatan halaman, tanpa pemberitahuan atau
   persetujuan. Kedua berkas ini adalah font variabel (satu berkas
   mencakup seluruh jangkauan ketebalan), jadi cukup satu unduhan per
   keluarga huruf. */
@font-face{
  font-family:"DM Sans"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("fonts/dm-sans-variable.woff2") format("woff2");
}
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("fonts/geist-variable.woff2") format("woff2");
}

/* ============================================================
   TOKEN — SATU GRUP, DUA MEREK (Makam123 · Kedukaan.com)
   ------------------------------------------------------------
   Yang DISAMAKAN dengan kedukaan.com, karena itulah yang membuat
   kedua situs terbaca sebagai satu perusahaan:
     · netral kertas hangat (--bg, --surface, --line)
     · radius (14 / 22 / 28) dan bentuk "lembar kertas di atas
       bidang gelap" (lihat .shell di bawah)
     · pasangan huruf DM Sans + Geist
     · aksen hangat clay (--gold)

   Yang SENGAJA BERBEDA, karena ini perusahaan yang berbeda:
     · hijaunya. Kedukaan.com memakai hijau kebiruan #2A5A4C.
       Makam123 memakai hijau hutan dari logonya sendiri —
       #08402F (huruf "Makam" dan sisi gelap lambang) dan
       #689848 (angka "123" dan daun). Nilai di bawah diambil
       langsung dari assets/logo-asli.png, bukan dikira-kira.
     · kerapatan: body 16px, kolom 1280px, kartu katalog —
       ini situs pindai-banyak-listing, bukan situs baca-runtut.
   ============================================================ */
:root{
  /* Netral (bersama kedukaan.com) */
  --bg:#FAF8F4; --surface:#FFFFFF; --surface-2:#F2EFE9;
  --ink:#14181C; --muted:#5F656B;
  --line:#E4DFD6; --line-2:#EFEAE2;

  /* Hijau Makam123, diambil dari logo.
     --green lolos AA di semua pasangan yang dipakai: 7,47:1 di atas
     kartu putih, 6,7:1 di atas --bg. */
  --green:#1A6048; --green-2:#0B4433; --green-soft:#E7EFE7;
  /* Hijau daun dari angka "123". Dipakai untuk aksen di atas bidang
     gelap (3,98:1 di atas --field) dan penekanan berukuran besar. */
  --leaf:#689848;
  /* Versi yang cukup gelap untuk teks kecil di atas kertas (4,0:1 —
     dipakai hanya pada teks tebal ≥17px, yaitu angka pada logo). */
  --leaf-ink:#5E8C40;

  /* Bidang gelap tempat lembar situs diletakkan — sama perannya dengan
     --field di kedukaan.com, hanya hijaunya milik Makam123. */
  --field:#0B3527;
  /* Alias lama; sebagian aturan masih menyebut --dark. */
  --dark:#0B3527;

  /* Clay, sama dengan aksen hangat kedukaan.com. Lolos AA di semua
     pasangan yang dipakai: 5,05:1 di atas --gold-soft dan --surface-2,
     5,79:1 di atas kartu putih. */
  --gold:#8A5B34; --gold-soft:#F7EEE5;

  --radius:14px; --radius-lg:22px; --radius-sheet:28px;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 1px 2px rgba(20,24,28,.04),0 8px 24px rgba(20,24,28,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--field);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}

/* ---------- lembar kertas ----------
   Bentuk merek bersama dengan kedukaan.com: seluruh situs duduk di atas
   satu lembar kertas bersudut tumpul, dan bidang hijau gelap di kiri-kanan
   hanyalah bingkai tipis. Ini penanda "satu grup" yang paling cepat
   dikenali orang saat berpindah antar-situs, jauh sebelum ia sempat
   membaca nama perusahaannya.

   Konsekuensi yang disengaja: kepala halaman tidak lagi menempel saat
   digulir. Kepala yang menempel harus menempel ke tepi layar, sementara
   lembar ini berjarak dari tepi — keduanya tidak bisa benar sekaligus.
   Yang benar-benar perlu ikut tergulir (penyaring katalog, panel harga
   di halaman detail, bilah aksi di ponsel) tetap menempel seperti semula. */
.shell{
  background:var(--bg);
  max-width:1760px;
  margin:10px auto 0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  /* Halaman pendek (404, kavling tidak ditemukan, hasil pencarian kosong)
     dulu menyisakan bidang hijau gelap di bawah kaki halaman, dan itu
     terbaca sebagai halaman yang rusak, bukan sebagai bingkai. Lembar
     ini karena itu selalu setinggi layar, dan isinya yang memuai. */
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 10px);
}
.shell > main{flex:1}
@media (min-width:900px){
  .shell{margin:14px auto 0;border-radius:var(--radius-sheet);min-height:calc(100vh - 14px)}
}
@media (max-width:520px){
  .shell{margin:0;border-radius:0;min-height:100vh}
}
img,svg{max-width:100%}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.22;margin:0;letter-spacing:-.01em}
.wrap{max-width:1280px;margin:0 auto;padding:0 22px}
/* Kolom baca sempit (tentang, privasi, syarat, langganan).
   Dulu .narrow memendekkan kotaknya sendiri menjadi 780px, dan karena
   .wrap memusatkan diri (margin:0 auto), seluruh kolom teks bergeser ke
   tengah — tepi kirinya berhenti sekitar 110px lebih ke kanan daripada
   tepi kiri panel hero tepat di atasnya. Dua tepi kiri yang tidak
   segaris itulah yang membuat halaman terasa tidak tersusun.

   Sekarang kotaknya tetap selebar kolom halaman (jadi tepi kirinya sama
   dengan hero, kartu, dan kaki halaman), dan yang dibatasi 780px adalah
   isinya — panjang baris tetap nyaman dibaca. */
.narrow > *{max-width:780px}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;background:var(--green);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ----------
   Tidak lagi menempel saat digulir — alasannya di catatan .shell. */
header{position:relative;z-index:50;background:var(--bg);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:70px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;text-decoration:none;color:inherit}
.brand:hover{text-decoration:none}
.mark{width:34px;height:34px;border-radius:9px;background:var(--green);
  display:grid;place-items:center;flex-shrink:0}
.brand-t{display:block;font-family:var(--display);font-size:17.5px;font-weight:600;
  line-height:1.15;color:var(--green-2)}
/* Angka di akhir nama situs (mis. "123" pada Makam123) memakai hijau
   dari logo, digelapkan ke #4C7135: warna logo asli (#689848) hanya
   mencapai 2,96:1 di atas latar kertas dan gagal WCAG AA untuk teks
   sekecil ini. Nuansanya tetap sama, kontrasnya lolos. */
.brand-num{color:#4C7135}
.brand-s{display:block;font-size:11.5px;color:var(--muted);letter-spacing:normal;text-transform:none}
/* Tautan menu berbentuk pil, sama dengan kedukaan.com: halaman yang sedang
   dibuka ditandai bidang hijau muda, bukan garis bawah. Bentuk pil ini
   dipakai ulang di seluruh situs (chip, badge, tombol WhatsApp), jadi
   kepala halaman memakai bahasa yang sama dengan isinya. */
.menu{display:flex;gap:4px;margin-left:auto;font-size:14.5px}
.menu a{color:var(--muted);padding:8px 14px;border-radius:99px;transition:.15s;white-space:nowrap}
.menu a:hover{color:var(--ink);text-decoration:none}
.menu a[aria-current=page]{color:var(--green-2);background:var(--green-soft);font-weight:600}
.wa{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;
  border:0;font:inherit;font-size:14px;font-weight:600;padding:10px 17px;border-radius:99px;
  cursor:pointer;transition:.15s;white-space:nowrap}
.wa:hover{background:var(--green-2);color:#fff;text-decoration:none}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:9px;padding:8px 11px;cursor:pointer;font-size:17px;line-height:1}

/* ---------- buttons ---------- */
.btn{border:0;font:inherit;font-size:15px;font-weight:600;padding:13px 24px;border-radius:10px;
  cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:8px}
.btn:hover{text-decoration:none}
.btn-p{background:var(--green);color:#fff}
.btn-p:hover{background:var(--green-2);color:#fff}
.btn-o{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-o:hover{border-color:var(--green);color:var(--green)}
.btn-full{width:100%;justify-content:center}

/* ---------- hero ----------
   Panel hijau gelap bersudut tumpul di dalam lembar kertas, bukan foto
   selebar layar. Alasannya dua:

   1) Foto stok. Foto sebelumnya adalah pasangan lanjut usia berjalan di
      tepi danau pegunungan -- pemandangan yang tidak ada hubungannya
      dengan memorial park di Indonesia, dan justru menjadi penanda paling
      cepat bahwa sebuah situs disusun dari bahan siap pakai. Lebih baik
      tidak ada foto daripada foto yang jelas bukan milik kita. Slot
      fotonya tetap ada: begitu ada foto memorial park sungguhan di
      assets/hero.jpg, foto itu langsung dipakai lengkap dengan tirainya.
   2) Bentuk. Panel bersudut tumpul ini bentuk yang sama dengan hero di
      kedukaan.com, jadi kedua situs dibuka dengan bahasa visual yang sama.

   Gradasinya memakai hijau hutan dari logo Makam123 (--field ke #16523C),
   bukan hijau kebiruan kedukaan.com. */
.hero-full{position:relative;min-height:396px;overflow:hidden;
  /* Selebar kolom isi, bukan selebar layar: panel ini duduk DI ATAS lembar
     kertas, jadi kertasnya harus tetap terlihat di keempat sisinya.
     --isi diatur oleh rel iklan samping; 1280px bila tidak ada iklan. */
  width:calc(100% - 44px);max-width:var(--isi,1280px);margin:26px auto 0;padding:0;
  border-radius:var(--radius-lg);
  background:linear-gradient(150deg,#14513B 0%,var(--field) 62%,#082B1F 100%)}
.hero-full-media{position:absolute;inset:0}
.hero-full-media img,.hero-full-media svg{width:100%;height:100%;object-fit:cover;display:block}
.hero-full-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,43,31,.92) 0%,rgba(8,43,31,.6) 46%,rgba(8,43,31,.2) 76%,rgba(8,43,31,.05) 100%)}
/* Sapuan cahaya samar di sudut atas kanan supaya bidang hijau polos tidak
   terbaca sebagai blok warna datar. Hanya tampil bila tidak ada foto. */
.hero-full::before{content:"";position:absolute;top:-40%;right:-14%;width:62%;height:120%;
  border-radius:50%;background:radial-gradient(circle,rgba(104,152,72,.28),transparent 68%);
  pointer-events:none}
/* padding-bottom harus lebih besar dari tumpangan kartu pencarian
   (.hero-search, margin-top:-58px). Bila tidak, kartu itu menutupi
   separuh tombol "Lihat kavling tersedia" di bawah judul. */
.hero-full-content{position:relative;min-height:396px;display:flex;flex-direction:column;
  justify-content:flex-end;padding-top:58px;padding-bottom:92px;color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--green);background:var(--green-soft);
  padding:7px 14px;border-radius:99px;margin-bottom:22px;width:fit-content}
.eyebrow-onphoto{color:#fff;background:rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.hero-full h1{font-size:clamp(30px,4.2vw,48px);margin-bottom:16px;max-width:16em}
.hero-full h1 em{font-style:normal;color:#B9D79E}
.lede{font-size:17.5px;color:var(--muted);max-width:33em;margin-bottom:30px}
.lede-onphoto{color:rgba(255,255,255,.88);max-width:36em}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn-onphoto{border-color:rgba(255,255,255,.55);color:#fff}
.btn-onphoto:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}

/* kartu pencarian cepat, sengaja menindih tepi bawah foto hero */
.hero-search{background:var(--surface);border-radius:var(--radius);box-shadow:0 16px 40px rgba(20,24,28,.16);
  border:1px solid var(--line);padding:22px;margin-top:-58px;position:relative;z-index:2;
  display:flex;gap:16px;flex-wrap:wrap;align-items:end}
.hs-field{flex:1 1 160px;min-width:0}
.hs-field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.hero-search .btn{flex:0 0 auto;height:46px}

.hero-stats{display:flex;gap:34px;margin:34px 0;padding-top:26px;border-top:1px solid var(--line)}
.hs b{display:block;font-family:var(--display);font-size:26px;color:var(--green)}
.hs span{font-size:13px;color:var(--muted)}

/* ---------- ubin tipe kavling ---------- */
.type-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.type-tile{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);transition:.18s;color:inherit}
.type-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#D3CBBC;text-decoration:none}
.type-tile .thumb{height:110px}
.type-tile span{display:block;padding:13px 14px;font-family:var(--display);font-weight:600;font-size:15px}

/* ---------- irama tegak halaman ----------
   Sebelumnya jarak atas-bawah badan halaman ditulis satu per satu di tiap
   berkas: 28px di detail, 32px di kavling/jual/kontak/cara-kerja, 38px di
   tentang/privasi/syarat, 48px di langganan, 56px di 404, sementara
   beranda memakai <section> yang 62px. Selisih sekecil itu tidak terlihat
   sebagai keputusan, hanya terasa sebagai halaman yang "kurang rapi" saat
   berpindah-pindah. Satu kelas dipakai bersama supaya iramanya sama.

   .isi = badan halaman di bawah hero. Dipakai di semua halaman selain
   beranda (beranda memakai <section> karena isinya memang berpita-pita). */
/* Hanya atas-bawah. Menulis `padding:40px 0 64px` di sini akan ikut
   menyetel kiri-kanan menjadi 0 dan menghapus selokan 22px milik .wrap --
   teks lalu menempel ke tepi layar di ponsel, sementara panel hero tetap
   masuk 22px. Sifat yang sama berlaku untuk .err di bawah. */
.isi{padding-top:40px;padding-bottom:64px}

/* ---------- sections ---------- */
section{padding:62px 0}
.sec-head{margin-bottom:34px;max-width:44em}
.sec-head h2{font-size:clamp(26px,3vw,35px);margin-bottom:11px}
.sec-head p{color:var(--muted);font-size:16.5px;margin:0}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px}

/* ---------- two paths ---------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.path{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;transition:.18s;display:flex;flex-direction:column}
.path:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--shadow)}
.tag{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:6px;display:inline-block;margin-bottom:16px}
.tag-baru{background:var(--green-soft);color:var(--green)}
.tag-sec{background:var(--gold-soft);color:var(--gold)}
.path h3{font-size:23px;margin-bottom:9px}
.path>p{color:var(--muted);font-size:15px;margin:0 0 18px}
.path ul{list-style:none;padding:0;margin:0 0 22px;font-size:14.5px}
.path li{padding:7px 0 7px 25px;position:relative;border-bottom:1px solid var(--line-2)}
.path li:last-child{border:0}
.path li::before{content:"";position:absolute;left:2px;top:15px;width:11px;height:11px;
  border-radius:50%;border:2px solid var(--green);opacity:.45}
.path .btn{margin-top:auto;align-self:flex-start}

/* ---------- trust ---------- */
/* Pita jaminan. Sebelumnya tiap butir diawali emoji di dalam kotak
   membulat -- pola "empat fitur berikon" yang paling sering dipakai
   templat siap pakai, dan emoji ikut berubah rupa di tiap sistem operasi
   sehingga tidak pernah benar-benar sejalan dengan merek. Ikonnya dibuang;
   yang tersisa empat pernyataan yang dipisahkan garis tipis, dibaca
   sebagai kolom teks, bukan sebagai kartu fitur. */
.trust{background:var(--green);color:#DCE7DE;padding:52px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tr{padding:2px 26px 0;border-left:1px solid rgba(255,255,255,.16)}
.tr:first-child{padding-left:0;border-left:0}
.tr:last-child{padding-right:0}
.tr h3{font-size:16.5px;color:#fff;margin-bottom:7px}
/* Warna ditulis tegas, bukan lewat opacity: teks tipis di atas hijau pekat
   cepat jatuh di bawah ambang keterbacaan tanpa terlihat begitu. */
.tr p{font-size:13.8px;margin:0;color:#C3D5C7;line-height:1.55}

/* ---------- catalog ---------- */
.cat-layout{display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:start}
.filters{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;position:sticky;top:22px}
.fgroup{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line-2)}
.fgroup:last-child{border:0;margin:0;padding:0}
.fgroup h2{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 11px;font-family:var(--sans)}
.fopt{display:flex;align-items:center;gap:9px;font-size:14px;padding:4px 0;cursor:pointer}
.fopt input{accent-color:var(--green);width:15px;height:15px;cursor:pointer}
select,input[type=text],input[type=tel],input[type=email],input[type=number],textarea{width:100%;font:inherit;
  font-size:14.5px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--ink)}
textarea{resize:vertical}
.range-val{font-size:13px;color:var(--green);font-weight:600;margin-top:7px}
input[type=range]{width:100%;accent-color:var(--green)}
/* Anak panah naik-turun bawaan peramban tidak dipakai — bentuknya beda
   sendiri dari gaya isian lain di situs ini (lihat harga maksimum di
   pencarian cepat beranda dan penyaring katalog). */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
.cat-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;
  flex-wrap:wrap;gap:12px}
.count{font-size:14.5px;color:var(--muted)}
.count b{color:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.18s;display:flex;flex-direction:column;color:inherit}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#D3CBBC;
  text-decoration:none;color:inherit}
.thumb{height:196px;position:relative;overflow:hidden;background:var(--green-soft)}
.thumb svg,.thumb img{width:100%;height:100%;display:block}
.thumb img{object-fit:cover}
.badge{position:absolute;top:11px;left:11px;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:5px 10px;border-radius:6px}
/* "Dipesan" adalah satu-satunya status yang perlu menarik mata di kartu —
   satu warna kuat (emas, senada dengan aksen "hemat"). "Tersedia" sengaja
   diberi gaya tenang: itu status hampir semua kartu, jadi warna mencolok
   di situ hanya bersaing dengan badge diskon tanpa menambah informasi. */
.b-dipesan{background:var(--gold);color:#fff}
.b-quiet{background:rgba(255,255,255,.88);color:var(--ink);font-weight:600;
  box-shadow:0 1px 3px rgba(20,24,28,.12)}
.disc{position:absolute;top:11px;right:11px;background:#fff;color:var(--gold);
  font-size:12px;font-weight:700;padding:5px 9px;border-radius:6px}
.card-b{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.card-park{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin-bottom:5px;display:flex;gap:10px;align-items:baseline;justify-content:space-between}
/* Kode kavling: pembeda antar kartu, bukan judul. Tetap tipis dan tidak
   pernah menyusut; nama park yang mengalah dan boleh turun baris. */
.card-kode{flex:0 0 auto;opacity:.7;letter-spacing:.04em}
/* Dua baris selalu disediakan. Nama park yang panjang ("Graha Sentosa
   Memorial Park") tidak lagi muat sebaris bersama kode, sedangkan yang
   pendek ("Lestari Memorial Park") masih muat — tanpa tinggi tetap,
   judul "Blok ..." pada kartu bersebelahan berhenti sejajar. */
.card-park{min-height:2.7em;line-height:1.3}
.card-b h3{font-size:17.5px;margin-bottom:9px}
/* Harga tampil segera setelah judul — itu angka pertama yang dicari
   pembeli properti, jadi tidak ditaruh menunggu di bawah kartu. Chips
   didorong ke dasar kartu (margin-top:auto) supaya tinggi kartu tetap
   rata sebaris walau jumlah chip berbeda-beda. */
.price{margin-bottom:14px}
.price .now{font-family:var(--display);font-size:23px;font-weight:600;color:var(--green)}
.price .was{font-size:13px;color:var(--muted);text-decoration:line-through;margin-left:7px}
.price .inst{font-size:12.5px;color:var(--muted);margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line-2)}
.chip{font-size:11.5px;background:var(--bg);border:1px solid var(--line);color:var(--muted);
  padding:3px 9px;border-radius:99px}
.empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted)}

/* ---------- detail ---------- */
.crumb{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.det{display:grid;grid-template-columns:1.35fr .65fr;gap:36px;align-items:start}
.det-hero{border-radius:var(--radius);overflow:hidden;height:330px;margin-bottom:26px;
  border:1px solid var(--line)}
.det-hero svg,.det-hero img{width:100%;height:100%;display:block}
.det-hero img{object-fit:cover}

/* deretan foto kecil di bawah foto utama */
.det-galeri{display:flex;gap:9px;flex-wrap:wrap;margin:-16px 0 26px}
.det-galeri button{width:74px;height:56px;padding:0;border:2px solid transparent;border-radius:9px;
  overflow:hidden;background:none;cursor:pointer;line-height:0}
.det-galeri button.pilih{border-color:var(--green)}
.det-galeri img{width:100%;height:100%;object-fit:cover;display:block}
.spec{width:100%;border-collapse:collapse;font-size:14.8px;margin-bottom:28px}
.spec td{padding:11px 0;border-bottom:1px solid var(--line-2);text-align:left}
.spec td:first-child{color:var(--muted);width:42%}
.spec td:last-child{font-weight:600}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;position:sticky;top:22px}
.panel .big{font-family:var(--display);font-size:31px;font-weight:600;color:var(--green);
  line-height:1.15;margin-bottom:3px}
.panel .sub{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.calc{font-size:14px;border-top:1px solid var(--line-2);padding-top:14px;margin-bottom:18px}
.calc .row{display:flex;justify-content:space-between;gap:12px;padding:6px 0}
.calc .row span:first-child{color:var(--muted)}
.calc .total{border-top:1px solid var(--line);margin-top:8px;padding-top:11px;font-weight:700}
.calc .total span:first-child{color:var(--ink)}
.save{background:var(--gold-soft);color:var(--gold);font-size:13.5px;font-weight:600;
  padding:11px 14px;border-radius:9px;margin-bottom:16px;text-align:center}
.panel .btn{margin-bottom:9px}
.assure{list-style:none;padding:0;margin:18px 0 0;font-size:13.2px;color:var(--muted)}
.assure li{padding:6px 0 6px 22px;position:relative}
.assure li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:700}

/* ---------- steps ---------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:0 0 26px 54px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;
  border-radius:50%;background:var(--green-soft);color:var(--green);font-weight:700;
  font-size:15px;display:grid;place-items:center}
.steps li::after{content:"";position:absolute;left:16.5px;top:36px;bottom:4px;width:1px;
  background:var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h3{font-size:17px;margin-bottom:4px}
.steps p{margin:0;font-size:14.5px;color:var(--muted)}

/* ---------- forms ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.two-col>*,.cat-layout>*,.paths>*,.grid>*{min-width:0}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow)}
/* Kolom formulir tetap terlihat sementara kolom pendamping (langkah/keterangan)
   yang lebih panjang digulir — pola yang sama dengan .panel di halaman detail
   dan .filters di katalog, supaya formulir tidak tertinggal jauh di bawah. */
@media (min-width:901px){ .two-col .form{position:sticky;top:22px} }
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.tiga{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:13px}
.note{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.5}
.ok-msg{background:var(--green-soft);color:var(--green);border-radius:10px;padding:14px;
  font-size:14.5px;font-weight:600;margin-top:14px}

/* ---------- formulir bertahap (jual.php) ---------- */
.lprog{margin-bottom:22px}
.lprog-bar{height:5px;background:var(--line-2);border-radius:99px;overflow:hidden}
.lprog-bar span{display:block;height:100%;width:33%;background:var(--green);
  border-radius:99px;transition:width .25s ease}
.lprog-label{font-size:13px;color:var(--muted);margin:9px 0 0}
.lprog-label b{color:var(--ink)}
/* Baseline: semua langkah tampil — formulir tetap utuh dan bisa dikirim
   tanpa JavaScript. Kelas .js-wizard baru dipasang oleh langkah.js sendiri
   setelah skripnya benar-benar berjalan, jadi penyembunyian per-langkah
   hanya aktif ketika mesin baginya (validasi, tombol Lanjut) juga aktif. */
.langkah{display:block}
.js-wizard .langkah{display:none}
.js-wizard .langkah.aktif{display:block;animation:langkahMasuk .22s ease both}
@keyframes langkahMasuk{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Tombol Lanjut/Kembali hanya berguna saat .js-wizard aktif — tanpa itu
   formulir sudah tampil penuh, jadi baris navigasinya disembunyikan. */
.langkah-nav{display:none}
.js-wizard .langkah-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2)}
.langkah-nav .btn{flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.langkah.aktif{animation:none}}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:420px}
.tbl th{background:var(--green-soft);color:var(--green);text-align:left;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:12px 16px;font-weight:700}
.tbl td{padding:12px 16px;border-top:1px solid var(--line-2)}
.tbl tr td:first-child{font-weight:600}

/* ---------- band ---------- */
.band{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:40px;display:flex;align-items:center;gap:36px;justify-content:space-between;flex-wrap:wrap}
.band h2{font-size:27px;margin-bottom:8px}
.band p{color:var(--muted);margin:0;max-width:38em}

/* ---------- faq ---------- */
.faq{max-width:820px}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%;background:none;border:0;font:inherit;font-size:16.5px;font-weight:600;
  text-align:left;padding:19px 34px 19px 0;cursor:pointer;position:relative;color:var(--ink)}
.q button::after{content:"+";position:absolute;right:4px;top:17px;font-size:21px;
  color:var(--green);font-weight:400;transition:.2s}
.q.open button::after{transform:rotate(45deg)}
.q .a{display:none;padding:0 30px 20px 0;color:var(--muted);font-size:15px}
.q.open .a{display:block}

/* ---------- prose (tentang / privasi / syarat) ---------- */
.prose h2{font-size:25px;margin:38px 0 12px}
.prose h3{font-size:19px;margin:26px 0 8px}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:7px}
.prose>p:first-child{font-size:17.5px;color:var(--muted)}
/* Sengaja bukan kotak berwarna + garis tepi — pola yang sama pernah
   diganti di .hero-sorot karena terasa seperti kotak "peringatan" generik.
   Cukup garis tipis di atas dan lompatan tipografi pada judulnya. */
.callout{border-top:1px solid var(--line);padding-top:16px;margin:26px 0}
.callout p:first-child{font-family:var(--display);font-weight:600;font-size:16px;
  color:var(--ink);margin:0 0 6px}
.callout p:last-child{margin:0;color:var(--muted);font-size:14.5px}

/* ---------- contact ---------- */
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line-2)}
/* Daftar kontak tidak lagi memakai emoji dalam kotak berwarna, dengan
   alasan yang sama seperti pita jaminan di beranda: rupa emoji berbeda
   di tiap sistem operasi dan tidak pernah menyatu dengan merek. Label
   "WhatsApp", "Email", "Kantor", "Jam layanan" sudah cukup menerangkan
   diri sendiri tanpa gambar. */
.contact-list b{display:block;font-size:14.5px}
.contact-list span{font-size:14px;color:var(--muted)}

/* ---------- footer ----------
   Terang, bukan gelap. Kaki gelap memotong lembar kertas tepat sebelum
   ujungnya, dan membuat pasangan situs ini terbaca seperti dua perusahaan
   yang berbeda -- kedukaan.com memakai kaki terang di atas netral yang
   sama. Bidang gelapnya sudah ada, yaitu bingkai luar (.shell). */
/* margin-top:0 — jarak sebelum kaki halaman sudah disediakan oleh padding
   bawah badan halaman (.isi, atau section pada beranda). Dulu keduanya
   ditumpuk: 60px + 56px = 116px ruang kosong sebelum kaki, di setiap
   halaman. Garis tepi atas dan padding kaki sendiri sudah cukup memisah. */
footer{background:var(--surface-2);color:var(--muted);border-top:1px solid var(--line);
  padding:46px 0 30px;margin-top:0;font-size:14px}
/* Tiga kolom, bukan empat: kolom "Memorial Park" ditiadakan (lihat
   inc/kaki-publik.php). Kolom merek diberi porsi lebih besar supaya
   ruang yang ditinggalkan terpakai, bukan menyisakan lubang di kanan. */
.f-grid{display:grid;grid-template-columns:1.9fr 1fr 1.2fr;gap:40px;margin-bottom:30px}
footer h2{color:var(--muted);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
  margin:0 0 13px;font-family:var(--display);font-weight:700}
/* Nama situs di kolom pertama adalah tanda tangan, bukan judul kolom --
   ukurannya mengikuti logo di kepala halaman, bukan h2 kolom sebelahnya. */
.f-merek h2{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em;
  text-transform:none;color:var(--green-2);margin-bottom:9px}
.f-merek p{color:var(--muted);max-width:30em}
footer ul{list-style:none;padding:0;margin:0}
footer li{padding:5px 0;color:var(--muted)}
footer a{color:var(--muted)}
footer a:hover{color:var(--green)}
.f-bot{border-top:1px solid var(--line);padding-top:20px;font-size:12.5px;color:var(--muted);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.f-bot a{color:var(--ink)}

/* ---------- 404 / kavling tidak ditemukan ---------- */
.err{text-align:center;padding-top:110px;padding-bottom:110px}

@media (max-width:900px){
  .det,.two-col,.paths{grid-template-columns:1fr}
  .cat-layout{grid-template-columns:1fr}
  .filters{position:static}
  .trust-grid{grid-template-columns:1fr 1fr;row-gap:30px}
  /* Dua kolom: garis pemisah hanya milik kolom kanan. Tanpa aturan ini
     butir ke-3 memulai baris baru namun tetap membawa garis di kirinya. */
  .tr:nth-child(odd){border-left:0;padding-left:0}
  .tr:nth-child(odd){padding-left:0;border-left:0}
  .f-grid{grid-template-columns:1fr 1fr}
  .panel{position:static}
  /* Tinggi hero tidak lagi diukur dengan vh. Sejak hero menjadi panel di
     dalam lembar kertas, tingginya ditentukan oleh isinya; vh membuat
     panel memuai mengikuti tinggi jendela dan meninggalkan bidang hijau
     kosong yang sangat panjang di layar tinggi. */
  .hero-full{min-height:340px}
}
@media (max-width:640px){
  .menu{display:none;position:absolute;top:70px;left:0;right:0;background:var(--surface);
    flex-direction:column;gap:0;padding:8px 22px 16px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow)}
  .menu.show{display:flex}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line-2)}
  .burger{display:block}
  .nav .wa{display:none}
  .trust-grid,.f-grid,.two{grid-template-columns:1fr}
  .trust-grid{row-gap:26px}
  .tr{padding:0;border-left:0}
  /* di ponsel blok/zone mengambil satu baris penuh, baris & nomor berbagi baris di bawahnya */
  .tiga{grid-template-columns:1fr 1fr}
  .tiga > :first-child{grid-column:1 / -1}
  section{padding:44px 0}
  .isi{padding-top:28px;padding-bottom:48px}
  .band{padding:28px}
  .err{padding-top:70px;padding-bottom:70px}
  .hero-full{min-height:300px}
  .hero-full-content{padding-top:36px;padding-bottom:78px}
  .hero-full h1{font-size:26px}
  .hero-search{flex-direction:column;align-items:stretch;margin-top:-40px}
  /* flex-basis 160px dari tata letak mendatar berubah arti begitu arahnya
     menjadi kolom: yang dijatah 160px bukan lagi lebar, melainkan TINGGI
     tiap isian, sehingga ketiganya saling berjauhan setinggi layar. */
  .hero-search .hs-field{flex:0 0 auto}
  .hero-search .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}

/* ============================================================
   PENINGKATAN TAMPILAN & PENGALAMAN PONSEL
   Blok ini sengaja diletakkan paling bawah agar menimpa
   aturan di atasnya bila ada yang sama.
   ============================================================ */

/* ---------- dasar sentuhan ---------- */
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
.btn { min-height: 46px; position: relative; overflow: hidden; }
.btn:active { transform: scale(.98); }
.wa:active { transform: scale(.98); }
.card:active { transform: scale(.995); }
.fopt { min-height: 40px; padding: 8px 0; }
.fopt input { width: 18px; height: 18px; }

/* kilau halus saat tombol utama ditekan */
.btn-p::after{
  content:""; position:absolute; inset:0; background:#fff; opacity:0;
  transition:opacity .35s;
}
.btn-p:active::after{ opacity:.12; transition:none }

/* ---------- kartu: kedalaman & gerak ---------- */
.card{ box-shadow:0 1px 2px rgba(20,24,28,.04) }
.card:hover{ box-shadow:0 10px 30px rgba(20,24,28,.10) }
.card .thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(20,24,28,.10));
  pointer-events:none;
}
.badge{ box-shadow:0 2px 8px rgba(20,24,28,.18) }
.disc{ box-shadow:0 2px 8px rgba(20,24,28,.14) }

/* Tidak ada animasi "muncul perlahan berjenjang" pada kartu katalog.
   Sebelumnya ada, dan dihapus dengan sengaja: isi katalog adalah alasan
   orang datang, jadi menahannya di opacity 0 selama sepersekian detik
   hanya menunda hal yang dicari -- dan bila render tersendat, kartu bisa
   tertangkap dalam keadaan pudar. Portal properti sungguhan (Domain,
   Rightmove, Rumah123) menampilkan daftar begitu saja. Gerak di situs
   ini disimpan untuk keadaan interaksi (tekan, sorot, buka), bukan
   untuk kemunculan. */

/* ---------- tombol pemicu filter ---------- */
.filter-trigger{
  display:none; align-items:center; gap:9px; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; font:inherit; font-size:14.5px;
  font-weight:600; padding:11px 16px; cursor:pointer; min-height:46px; color:var(--ink);
}
.filter-trigger:hover{ border-color:var(--green); color:var(--green) }
.filter-trigger .jml{
  background:var(--green); color:#fff; font-size:11.5px; font-weight:700;
  min-width:20px; height:20px; border-radius:99px; display:grid; place-items:center; padding:0 6px;
}

/* bagian kepala & kaki panel filter — hanya tampil saat jadi lembar geser */
.sheet-head, .sheet-foot{ display:none }

/* ---------- tombol WhatsApp bulat mengambang ----------
   Hanya di layar lebar — di bawah 901px, .mbar (bilah aksi bawah) sudah
   menawarkan WhatsApp, jadi tombol ini disembunyikan supaya tidak dobel
   dengan bilah tersebut. */
.wa-apung{position:fixed;right:24px;bottom:24px;z-index:75;width:58px;height:58px;
  border-radius:50%;background:var(--green);color:#fff;display:flex;
  align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(20,24,28,.28);
  transition:.15s}
.wa-apung:hover{background:var(--green-2);transform:translateY(-2px);color:#fff}
@media (max-width:900px){ .wa-apung{display:none} }
@media (prefers-reduced-motion:reduce){ .wa-apung{transition:none} }

/* ---------- bilah aksi bawah (ponsel) ---------- */
.mbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(242,239,233,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); box-shadow:0 -4px 20px rgba(20,24,28,.07);
}
.mbar .btn{ flex:1; justify-content:center }
.mbar-harga{ display:flex; flex-direction:column; justify-content:center; padding-right:4px }
.mbar-harga b{ font-family:var(--display); font-size:19px; color:var(--green); line-height:1.1 }
.mbar-harga span{ font-size:11px; color:var(--muted) }

/* ---------- latar gelap untuk lembar geser ---------- */
.backdrop{
  position:fixed; inset:0; background:rgba(20,24,28,.42); z-index:80;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
  backdrop-filter:blur(2px);
}
.backdrop.on{ opacity:1; visibility:visible }

/* ---------- menu ponsel yang lebih rapi ---------- */
@media (max-width:640px){
  .menu{ padding:10px 22px 18px; box-shadow:0 12px 28px rgba(20,24,28,.12) }
  .menu a{ padding:14px 0; font-size:16px; display:flex; align-items:center; justify-content:space-between }
  .menu a::after{ content:"›"; color:var(--muted); font-size:20px }
  .menu a[aria-current=page]{ border-bottom-color:var(--line-2) }
  .burger{ min-width:44px; min-height:44px }
}

/* ---------- perbaikan ponsel ---------- */
@media (max-width:900px){

  /* panel filter menjadi lembar geser dari bawah */
  .filter-trigger{ display:inline-flex }
  .cat-layout{ display:block }

  .filters{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:90;
    max-height:88vh; display:flex; flex-direction:column;
    border:0; border-radius:20px 20px 0 0; padding:0;
    box-shadow:0 -8px 40px rgba(20,24,28,.22);
    transform:translateY(102%); transition:transform .3s cubic-bezier(.32,.72,0,1);
    visibility:hidden;
  }
  .filters.on{ transform:translateY(0); visibility:visible }

  .sheet-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 22px 12px; border-bottom:1px solid var(--line-2); flex-shrink:0;
    position:relative;
  }
  .sheet-head::before{
    content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:99px; background:var(--line);
  }
  .sheet-head h2{ font-size:18px; margin:0 }
  .sheet-tutup{
    background:none; border:0; font:inherit; font-size:26px; line-height:1;
    color:var(--muted); cursor:pointer; padding:4px 8px; min-width:44px; min-height:44px;
  }
  .sheet-isi{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:18px 22px; flex:1 }
  .sheet-foot{
    display:flex; gap:10px; padding:14px 22px calc(14px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--line-2); flex-shrink:0; background:var(--surface);
  }
  .sheet-foot .btn{ flex:1; justify-content:center }
  .sheet-foot .btn-o{ flex:0 0 auto; padding-left:20px; padding-right:20px }

  .fgroup{ margin-bottom:22px; padding-bottom:22px }

  /* halaman detail: panel harga naik ke atas, di bawah gambar */
  .det{ display:block }
  .det-hero{ height:250px; margin-bottom:20px }
  .panel{ margin-bottom:30px }
}

@media (max-width:640px){
  .mbar{ display:flex }
  body{ padding-bottom:80px }
  .backdrop, .filters{ padding-bottom:0 }

  /* di ponsel, panel harga cukup ringkas — CTA sudah ada di bilah bawah */
  .panel .btn{ display:none }
  .panel{ padding:20px }

  .lede{ font-size:16.5px }
  .hero-stats{ gap:0; justify-content:space-between }
  .hs b{ font-size:23px }
  .hs span{ font-size:11.5px }

  .band{ text-align:left }
  .band .btn{ width:100% ; justify-content:center }

  .grid{ grid-template-columns:1fr; gap:16px }
  .thumb{ height:216px }

  .det-hero{ height:210px; border-radius:12px }
  .spec td{ font-size:14px }

  .tbl{ min-width:340px }
  .tbl th, .tbl td{ padding:11px 13px }

  .q button{ font-size:16px; padding:17px 32px 17px 0 }

  section{ padding:38px 0 }
  .sec-head{ margin-bottom:26px }
}

/* iOS: cegah halaman ikut membesar saat kotak isian disentuh */
@media (max-width:900px){
  select, input[type=text], input[type=tel], input[type=email], textarea{
    font-size:16px; padding:12px 13px;
  }
  .field label{ font-size:13.5px }
}

/* kunci gulir halaman saat lembar filter terbuka */
body.terkunci{ overflow:hidden }

@media (prefers-reduced-motion:reduce){
  .filters{ transition:none }
}

/* ---------- penanda medan wajib & pesan galat ---------- */
.wajib{color:#9B2C21}
.medan-galat{border-color:#C9736A !important;background:#FEF6F5}
.pesan-galat{font-size:12.5px;color:#9B2C21;margin-top:5px;display:none}
.pesan-galat.tampil{display:block}
.petunjuk{font-size:12.5px;color:var(--muted);margin-top:5px}
.kelompok{border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:18px;background:var(--surface)}
.kelompok > h3{font-size:16px;margin:0 0 4px}
.kelompok > .petunjuk{margin:0 0 16px}

/* ---------- hero ringkas untuk halaman kedua ----------
   Bentuk yang sama dengan .hero-full (media + tirai gelap + teks putih
   menindih), hanya lebih pendek — dipakai di Cari Kavling, Jual Kavling,
   Tentang, Cara Kerja, Kontak, dan 404, supaya seluruh situs memakai
   satu bahasa hero yang konsisten. Medianya boleh foto (assets/hero.jpg)
   atau ilustrasi taman generatif yang sama dengan kartu kavling tanpa
   foto — keduanya memakai tirai dan tipografi yang identik. */
/* padding:0 wajib disebut: kedua hero ini elemen <section>, dan
   `section{padding:62px 0}` menambah 124px di luar tinggi yang diminta —
   panel jadi jauh lebih tinggi dari angka di bawah, dengan ruang kosong
   di bawah tulisannya. Jarak dalam panel diatur oleh .*-content. */
/* Tinggi dinaikkan (23 Sep 2026) supaya foto kepala halaman (1600×600) terlihat,
   bukan sekadar pita tipis. */
.hero-compact{position:relative;height:clamp(240px,28vw,360px);padding:0;overflow:hidden;
  width:calc(100% - 44px);max-width:var(--isi,1280px);margin:26px auto 0;
  border-radius:var(--radius-lg);
  background:linear-gradient(150deg,#14513B 0%,var(--field) 64%,#082B1F 100%)}
.hero-compact::before{content:"";position:absolute;top:-70%;right:-12%;width:56%;height:200%;
  border-radius:50%;background:radial-gradient(circle,rgba(104,152,72,.26),transparent 68%);
  pointer-events:none}
.hero-compact-media{position:absolute;inset:0}
.hero-compact-media img,.hero-compact-media svg{width:100%;height:100%;object-fit:cover;display:block}
.hero-compact-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,43,31,.88) 0%,rgba(8,43,31,.5) 55%,rgba(8,43,31,.12) 100%)}
.hero-compact-content{position:relative;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding-bottom:26px;color:#fff}
.hero-compact-content h1{font-size:clamp(26px,3.4vw,36px);margin-bottom:8px;max-width:20em}
.hero-compact-content p{color:rgba(255,255,255,.86);font-size:15.5px;max-width:40em;margin:0}
@media (max-width:640px){
  .hero-compact{height:220px;margin-top:18px}
  .hero-compact-content{padding-bottom:18px}
  .hero-compact-content p{font-size:14.5px}
}

/* ============================================================
   PERBAIKAN: menu ringkas & bilah bawah mulai dari 900px
   Pada lebar 641–900px, menu mendatar terlalu sempit sehingga
   tombol WhatsApp terdorong keluar layar dan halaman bergeser
   ke samping. Ambang dinaikkan agar rentang tablet ikut tertangani.
   ============================================================ */
@media (max-width:900px){
  .menu{display:none;position:absolute;top:70px;left:0;right:0;background:var(--surface);
    flex-direction:column;gap:0;padding:10px 22px 18px;border-bottom:1px solid var(--line);
    box-shadow:0 12px 28px rgba(20,24,28,.12);z-index:60}
  .menu.show{display:flex}
  .menu a{padding:14px 0;font-size:16px;display:flex;align-items:center;
    justify-content:space-between;border-bottom:1px solid var(--line-2)}
  .menu a::after{content:"\203A";color:var(--muted);font-size:20px}
  .menu a[aria-current=page]{border-bottom-color:var(--line-2)}
  .burger{display:block;min-width:44px;min-height:44px}
  .nav .wa{display:none}
  .mbar{display:flex}
  body{padding-bottom:80px}
  .panel .btn{display:none}
}

/* ---------- bagikan kavling ---------- */
.bagikan{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.bagikan>span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:9px}
.bagikan>div{display:flex;gap:8px;flex-wrap:wrap}
.bagi-tbl{flex:1;min-width:130px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--ink);
  font:inherit;font-size:13.5px;font-weight:600;padding:10px 12px;cursor:pointer;min-height:42px}
.bagi-tbl:hover{border-color:var(--green);color:var(--green);text-decoration:none}
.bagi-tbl:active{transform:scale(.98)}
.bagi-tbl.tersalin{background:var(--green-soft);border-color:var(--green);color:var(--green)}
/* Tombol berbagi bawaan perangkat ditulis dengan atribut hidden dan baru
   dimunculkan skrip bila navigator.share ada. Aturan display:inline-flex di
   atas adalah aturan PENULIS, dan aturan penulis selalu mengalahkan
   [hidden]{display:none} bawaan peramban — tanpa baris ini tombolnya tetap
   terlihat di komputer padahal ditekan pun tidak melakukan apa-apa. */
.bagi-tbl[hidden]{display:none}

/* ============================================================
   PERBAIKAN: nama situs yang panjang tidak boleh mendorong
   kepala halaman keluar layar. Sebelumnya .brand tidak dapat
   menyusut, sehingga nama panjang membuat halaman bergeser
   ke samping di layar sempit.
   ============================================================ */
.nav{gap:14px}
.brand{flex:0 1 auto;min-width:0}
.brand>span:last-child{min-width:0;overflow:hidden}
.brand-t,.brand-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.menu{margin-left:auto}
@media (min-width:901px){ .nav{gap:24px} }
@media (max-width:430px){
  .brand-s{display:none}
  .brand-t{font-size:16px}
  .mark{width:31px;height:31px}
}

/* ============================================================
   IKLAN
   Dibuat tenang: tidak berkedip, tidak menutupi isi, selalu
   ditandai "Iklan", dan berhenti bergerak saat disentuh.
   ============================================================ */
.iklan-kartu{position:relative;display:block;border-radius:12px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:.18s}
a.iklan-kartu:hover{border-color:var(--green);box-shadow:0 8px 22px rgba(20,24,28,.10);
  text-decoration:none;transform:translateY(-2px)}
.iklan-kartu img{width:100%;height:100%;object-fit:cover;display:block}

/* Baris keterangan di bawah gambar. Penanda "Iklan" duduk di sini, bukan
   menumpuk di atas gambar, supaya isi gambar pemasang tidak tertutup. */
.iklan-kaki{display:flex;align-items:center;gap:10px;padding:6px 10px;
  border-top:1px solid var(--line);background:var(--surface);min-height:26px}
.iklan-ket{flex:1;min-width:0;font-size:12.5px;color:var(--muted);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iklan-label{margin-left:auto;flex:0 0 auto;color:var(--muted);opacity:.75;
  font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- barisan berjalan ---------- */
.iklan-jalan{margin:44px 0;overflow:hidden;position:relative}
.iklan-jalan h2{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-family:var(--sans);margin:0 0 14px}
.iklan-rel{display:flex;gap:16px;width:max-content;animation:iklanJalan 42s linear infinite}
.iklan-jalan:hover .iklan-rel,.iklan-jalan:focus-within .iklan-rel{animation-play-state:paused}
.iklan-rel .iklan-kartu{width:260px;flex:0 0 260px}
.iklan-rel .iklan-kartu img{aspect-ratio:8/5}
@keyframes iklanJalan{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.iklan-jalan::before,.iklan-jalan::after{content:"";position:absolute;top:0;bottom:0;width:40px;z-index:2;
  pointer-events:none}
.iklan-jalan::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.iklan-jalan::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}

/* ---------- banner melebar ---------- */
.iklan-lebar{margin:40px 0}
.iklan-lebar .iklan-kartu img{aspect-ratio:4/1}

/* ---------- banner tegak di samping ----------
   Hanya muncul bila layar benar-benar cukup lebar, supaya tidak pernah
   menghimpit isi halaman. Di bawah 1400px otomatis disembunyikan. */
/* ============================================================
   BANNER TEGAK DI KIRI & KANAN
   ------------------------------------------------------------
   Yang menyesuaikan adalah lebar isi halaman, bukan iklannya yang
   menunggu layar cukup lebar. Isi menyempit hanya sebanyak yang
   diperlukan, dan tidak pernah melebihi 1280px.

     --isi = min(1280px, lebar layar - 2 x (12 tepi + 140 banner + 18 jarak))

   Dengan begitu banner sudah menempel sejak layar 1200px, termasuk pada
   layar 1920px berpenskalaan Windows 125% (sekitar 1520px) maupun 150%
   (sekitar 1280px).

   Kelas .ada-iklan-samping hanya dipasang bila memang ada iklannya, jadi
   halaman tanpa iklan tetap memakai lebar penuh.
   ============================================================ */
.iklan-samping{display:none}

@media (min-width:1200px) and (min-height:621px){
  body.ada-iklan-samping{--isi:min(1280px, calc(100vw - 340px))}
  body.ada-iklan-samping .wrap{max-width:var(--isi)}

  .ada-iklan-samping .iklan-samping{
    display:block;position:fixed;top:96px;width:140px;z-index:15;
    max-height:calc(100vh - 120px);
    max-height:calc(100dvh - 120px);
    overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .ada-iklan-samping .iklan-samping::-webkit-scrollbar{width:5px}
  .ada-iklan-samping .iklan-samping::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
  .ada-iklan-samping .iklan-samping.kiri {left:calc(50% - var(--isi)/2 - 158px)}
  .ada-iklan-samping .iklan-samping.kanan{right:calc(50% - var(--isi)/2 - 158px)}
  .iklan-samping .iklan-kartu{margin-bottom:14px}
  .iklan-samping .iklan-kartu img{aspect-ratio:1/3}
}

/* Layar lega: banner diperbesar, isi halaman kembali penuh 1280px. */
@media (min-width:1640px) and (min-height:621px){
  body.ada-iklan-samping{--isi:1280px}
  .ada-iklan-samping .iklan-samping{width:170px}
  .ada-iklan-samping .iklan-samping.kiri {left:calc(50% - 590px - 190px)}
  .ada-iklan-samping .iklan-samping.kanan{right:calc(50% - 590px - 190px)}
}

/* ---------- cadangan: banner tegak sejajar di dalam halaman ----------
   Dipakai pada layar terlalu sempit atau terlalu pendek untuk rel samping,
   supaya iklan tidak pernah benar-benar hilang. */
.iklan-tegak{display:grid;gap:16px;margin:40px 0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.iklan-tegak .iklan-kartu img{aspect-ratio:1/2}
@media (max-width:520px){
  .iklan-tegak{grid-template-columns:1fr 1fr;gap:12px}
  .iklan-tegak .iklan-kartu img{aspect-ratio:2/3}
}
/* Disembunyikan HANYA bila rel samping benar-benar tampil — syaratnya harus
   sama persis dengan aturan di atas: lebar DAN tinggi. */
@media (min-width:1200px) and (min-height:621px){ .iklan-tegak{display:none} }
@media (prefers-reduced-motion:reduce){
  .iklan-rel{animation:none;flex-wrap:wrap;width:auto}
}

/* ---------- penanda bisa nego ---------- */
.chip-nego{background:var(--gold-soft);border-color:#E7D6B8;color:var(--gold);font-weight:600}

/* ---------- simpan pencarian ---------- */
.langgan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;margin:44px 0 0;display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.langgan h2{font-size:23px;margin-bottom:8px}
.langgan p{color:var(--muted);font-size:15px;margin:0}
.langgan form{display:flex;gap:10px;flex-wrap:wrap}
.langgan input[type=email]{flex:1;min-width:180px}
.langgan .btn{flex:0 0 auto}
@media (max-width:900px){ .langgan{grid-template-columns:1fr;padding:24px} }

/* ---------- iklan mendatar: jangan terlalu tipis di ponsel ---------- */
.iklan-lebar .iklan-kartu img{aspect-ratio:4/1}
@media (max-width:900px){ .iklan-lebar .iklan-kartu img{aspect-ratio:3/1} }
@media (max-width:640px){ .iklan-lebar .iklan-kartu img{aspect-ratio:2/1} }
.iklan-lebar{margin:32px 0}

/* ---------- logo utama ----------
   Berkas PNG bertepi transparan, jadi tidak perlu kotak berwarna
   di belakangnya seperti lambang SVG sebelumnya. */
img.mark{width:42px;height:42px;border-radius:0;background:none;object-fit:contain;display:block}
@media (max-width:430px){ img.mark{width:36px;height:36px} }

/* ---------- sorotan pada hero ----------
   Menjawab keadaan yang paling sering dialami pembeli: blok yang dituju
   sudah habis di pengelola, padahal kerabat sudah dimakamkan di sana.
   Sengaja bukan kotak berwarna + garis tepi — cukup satu garis tipis di
   atas dan lompatan ukuran huruf, supaya penekanannya lewat tipografi,
   bukan lewat kotak "peringatan" yang generik. */
.hero-sorot{border-top:1px solid var(--line);padding-top:18px;margin:0 0 28px;
  max-width:34em;font-size:15.5px;line-height:1.6;color:var(--muted)}
.hero-sorot strong{display:block;font-family:var(--display);font-weight:600;
  font-size:19px;color:var(--ink);margin-bottom:6px;letter-spacing:-.005em}
@media (max-width:640px){
  .hero-sorot{padding-top:16px;font-size:15px;margin-bottom:24px}
}

/* ============================================================
   Delapan tab menu (Relokasi, Peti, Bangun Makam ikut masuk).
   Di rentang 901–1040px semuanya harus muat satu baris bersama logo
   dan tombol WhatsApp. Tanpa aturan ini, .brand (yang boleh menyusut,
   lihat perbaikan di atas) mengalah sampai lebar nol dan logo hilang.
   Menu dirapatkan sedikit, logo diberi lebar minimum sebesar tandanya.
   ============================================================ */
@media (min-width:901px) and (max-width:1040px){
  .nav{gap:16px}
  .brand{min-width:34px}
  .menu{gap:0;font-size:13.5px}
  .menu a{padding:8px 9px}
  .nav .wa{padding:9px 13px;font-size:13.5px}
}

/* Tiga kartu layanan lain di beranda (relokasi, peti, bangun makam).
   Di layar sempit ikut aturan .paths yang sudah ada: satu kolom. */
.paths-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .paths-3{grid-template-columns:1fr} }

/* ============ Relokasi (relokasi.php) ============ */

/* ---------- relokasi.php (formulir relokasi makam / kotak abu) ----------
   Hanya yang tidak tersedia dari kelas umum: daftar jenis, isian berkas,
   daftar berkas terpilih, dan keterangan "masih perlu diisi" di bawah tombol. */
.rk-jenis{list-style:none;padding:0;margin:0 0 10px}
.rk-jenis li{position:relative;padding:0 0 8px 22px;font-size:14.5px;color:var(--muted)}
.rk-jenis li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;
  background:var(--leaf)}
.rk-jenis-ket{font-size:14.5px;color:var(--muted);margin:0}

/* Isian berkas disamakan dengan isian teks di sekitarnya; garis putus-putus
   menandai bahwa yang diminta adalah lampiran, bukan ketikan. */
.rk-berkas input[type=file]{width:100%;font:inherit;font-size:14px;padding:10px 12px;
  border:1px dashed var(--line);border-radius:9px;background:var(--bg);color:var(--ink)}
.rk-berkas input[type=file]::file-selector-button{font:inherit;font-size:13px;font-weight:600;
  padding:7px 12px;margin-right:10px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--green);cursor:pointer}
.rk-terpilih{list-style:none;margin:8px 0 0;padding:0;font-size:12.5px;color:var(--muted)}
.rk-terpilih li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-top:1px solid var(--line-2)}
.rk-terpilih li span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-terpilih li span:last-child{flex:none}

/* Daftar isian yang masih kurang, di bawah tombol kirim. Warna mengikuti .pesan-galat. */
.rk-kurang{font-size:12.5px;color:#9B2C21;margin:10px 0 0;line-height:1.5}
#rk-kirim:disabled{opacity:.5;cursor:not-allowed}
#rk-kirim:disabled:active{transform:none}

/* ============ Peti (peti.php) ============ */

/* ---------- peti (peti.php) ----------
   Halaman peti memakai .grid/.card/.thumb/.price/.chips untuk daftar dan
   .det/.det-hero/.det-galeri/.spec/.panel/.steps untuk rinciannya — semua
   sudah ada. Yang baru hanya dua hal yang tidak punya padanan di kavling. */

/* Pengganti foto peti yang belum ada. Bukan ilustrasi(): fungsi itu
   menggambar denah petak kavling, keliru maknanya untuk sebuah peti.
   Nada kertasnya disamakan dengan panel denah supaya tetap terasa satu
   keluarga. Mengisi penuh .thumb (196px) maupun .det-hero (330px). */
.pt-kosong{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:#EFEAE1;color:var(--muted);font-size:12.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase}

/* "Tanya harga" menempati tempat angka harga (supaya tinggi kartu dan panel
   tetap sama), tetapi diredam agar tidak terbaca sebagai harga hijau
   seperti kartu di sebelahnya. Selektor ditulis lengkap karena .price .now
   dan .panel .big sudah punya warna dan berat hurufnya sendiri. */
.price .now.pt-tanya,.panel .big.pt-tanya{color:var(--muted);font-weight:500}
.price .now.pt-tanya{font-size:19px}
.panel .big.pt-tanya{font-size:26px}

/* ============================================================
   Revisi tata letak 21 Sep 2026 (daftar revisi pemilik)
   ============================================================ */

/* Tombol besar untuk ajakan utama (kontak, sorotan, peti kosong) */
.btn-lg{font-size:16.5px;padding:16px 30px;border-radius:12px}

/* Pita "blok sudah habis": lebar penuh, latar kertas bertekstur garis halus
   dan dua sorot hijau lembut, supaya terasa sebagai bagian tersendiri —
   bukan paragraf yang tercecer di bawah statistik. */
.sorot{
  position:relative;overflow:hidden;
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(26,96,72,.16) 0%, rgba(26,96,72,0) 60%),
    radial-gradient(50% 120% at 100% 50%, rgba(104,152,72,.18) 0%, rgba(104,152,72,0) 60%),
    var(--surface);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-top:34px;padding:46px 0;
}
.sorot::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(135deg, rgba(26,96,72,.07) 0 1px, transparent 1px 14px);
}
.sorot-in{position:relative;display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:center}
.sorot-txt h2{font-size:30px;margin:6px 0 12px;max-width:16em}
.sorot-txt p:last-child{color:var(--muted);font-size:16px;line-height:1.65;margin:0;max-width:34em}
.sorot-act{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
@media (min-width:900px){ .sorot-act{align-items:flex-end} }
@media (max-width:900px){
  .sorot{padding:34px 0}
  .sorot-in{grid-template-columns:1fr;gap:22px}
  .sorot-txt h2{font-size:25px}
  .sorot-act{flex-direction:row;flex-wrap:wrap}
}

/* Foto di puncak kartu "Layanan lain" (diunggah admin; tanpa foto kartu tetap
   seperti semula). Menembus padding kartu supaya rata dengan tepinya. */
.path-foto{margin:-30px -30px 22px;height:180px;overflow:hidden;
  border-bottom:1px solid var(--line);background:var(--green-soft)}
.path-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.path:hover .path-foto img{transform:scale(1.03)}

/* Foto di badan teks halaman Relokasi dan Jual kavling */
.isi-foto{margin:26px 0 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow)}
.isi-foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}

/* Halaman Kontak: WhatsApp sebagai blok utama */
.wa-utama{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 30px;margin-bottom:26px;
  background-image:radial-gradient(70% 140% at 100% 0%, rgba(104,152,72,.16) 0%, rgba(104,152,72,0) 60%)}
.wa-utama .kicker{margin-bottom:8px}
.wa-nomor{display:block;font-family:var(--display);font-weight:600;font-size:34px;letter-spacing:-.01em;
  color:var(--green);line-height:1.15;text-decoration:none}
.wa-nomor:hover{text-decoration:underline}
.wa-ket{color:var(--muted);font-size:14.5px;margin:6px 0 18px}
.wa-aksi{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:640px){
  .wa-utama{padding:22px}
  .wa-nomor{font-size:28px}
  .wa-aksi .btn{width:100%;justify-content:center}
}

/* Halaman Peti saat daftarnya masih kosong: satu kartu rapi di tengah */
.empty-kartu{max-width:560px;margin:8px auto 0;text-align:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:44px 30px}
.empty-kartu h2{font-size:23px;margin-bottom:10px}
.empty-kartu p{color:var(--muted);font-size:15.5px;line-height:1.65;margin:0 auto 22px;max-width:30em}