/*
Theme Name:  Kavling Bisnis
Theme URI:   https://kavlingbisnis.id
Description: Child theme Astra untuk kavlingbisnis.id - katalog kavling
             komersial di koridor BSD, Alam Sutera, dan Gading Serpong.
             Bahasa visual "Papan Harga", lihat DESIGN.md.
Author:      Christian Rasandy
Author URI:  https://kavlingbisnis.id/tentang/
Template:    astra
Version:     0.9.0
Text Domain: kavlingbisnis
*/

/* ==========================================================================
   WEBFONT - self-host

   Dilayani dari domain sendiri. Nol permintaan ke fonts.googleapis.com dan
   fonts.gstatic.com. Rinciannya - kenapa satu file untuk tiga berat DM Sans,
   kenapa hanya subset latin, dan cara memperbarui - ada di
   assets/fonts/README.md.

   Blok ini sengaja berada di paling atas file: @font-face harus sudah
   terdaftar sebelum aturan apa pun memakainya.

   Path relatif terhadap file CSS ini, bukan terhadap halaman, jadi tetap
   benar di mesin mana pun tanpa path absolut.
   ========================================================================== */

/* DM Sans - variable, sumbu wght 100..1000, dipakai pada 400/500/600.
   Rentang di font-weight memberi tahu browser bahwa satu file ini melayani
   ketiga berat, sehingga tidak ada berat yang disintesis (dipalsukan) dan
   tidak ada unduhan kedua. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/dm-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

/* Cormorant Garamond - statis 400. DESIGN.md tidak memakai berat lain:
   Display, Headline, dan Wordmark semuanya 400 (The Serif Ceiling Rule
   membatasi serif pada tiga peran itu saja). */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

/* ==========================================================================
   DESIGN TOKEN
   Sumber tunggal: DESIGN.md. Kalau ada nilai di sini yang tidak bisa
   ditelusuri ke DESIGN.md, salah satunya harus diperbaiki - jangan
   dibiarkan berbeda.

   Token di :root, komponen di bagian bawah file.
   ========================================================================== */

:root {

  /* --- Warna dasar. Tiga nilai ini mengikat, dari PRODUCT.md --- */
  --kb-navy:  #183851;
  --kb-gold:  #e8cd86;
  --kb-cream: #F7F4ED;

  /* Komponen RGB navy, supaya turunan opasitas bisa ditulis sekali di sini
     dan tidak diketik ulang sebagai hex baru di banyak tempat. */
  --kb-navy-rgb:  24, 56, 81;
  --kb-cream-rgb: 247, 244, 237;

  /* --- Turunan navy di atas cream ---
     DESIGN.md menyerahkan langkah persisnya ke implementasi, dengan syarat
     teks sekunder tetap lulus AA. Angka kontras di bawah dihitung terhadap
     cream #F7F4ED, bukan diperkirakan.

     Navy penuh di atas cream = 11.09:1  (AAA)                              */
  --kb-ink:    var(--kb-navy);

  /* 4.93:1 - LULUS AA untuk teks ukuran normal.
     Ini batas aman terendah untuk teks kecil: Body, Data, dan Label.       */
  --kb-ink-2:  rgba(var(--kb-navy-rgb), 0.72);

  /* 3.13:1 - GAGAL AA untuk teks normal. Hanya untuk teks besar (>=24px
     atau >=18.66px bold) dan elemen non-teks. Jangan dipakai untuk Label,
     Data, atau Body - ketiganya di bawah 18px.                             */
  --kb-ink-3:  rgba(var(--kb-navy-rgb), 0.55);

  /* Garis rambut. Non-teks, jadi tidak terikat ambang kontras teks. */
  --kb-rule:        rgba(var(--kb-navy-rgb), 0.14);
  --kb-rule-strong: rgba(var(--kb-navy-rgb), 0.30);

  /* --- Warna di dalam pelat navy ---
     The Gold-on-Navy Rule: emas HANYA hidup di sini.
     Emas di atas navy  = 7.84:1  (AAA teks normal)
     Emas di atas cream = 1.42:1  (gagal telak - inilah kenapa dilarang)
     Cream di atas navy = 11.09:1                                          */
  --kb-on-navy:   var(--kb-cream);
  --kb-on-navy-2: rgba(var(--kb-cream-rgb), 0.72);
  --kb-seal:      var(--kb-gold);

  /* Emas satu tingkat lebih dalam, HANYA untuk keadaan hover tombol
     WhatsApp. Bukan warna kedua di palet: DESIGN.md mengikat tiga warna,
     dan ini turunan gelap dari salah satunya, sebagaimana --kb-ink-2
     turunan dari navy. Navy di atasnya = 6,9:1, masih AAA untuk teks
     tombol. */
  --kb-gold-tekan: #dcbc6a;

  /* --- Permukaan --- */
  --kb-surface:       var(--kb-cream);
  --kb-surface-plate: var(--kb-navy);

  /* --- Tipografi ---
     Pasangan ini masih USULAN, belum final (PRODUCT.md). Yang mengikat
     adalah perannya: serif untuk suara, sans berangka rapi untuk data.
     Mengganti familinya TIDAK lagi cukup di dua baris ini. Sejak fontnya
     di-self-host, penggantian menyentuh empat tempat: dua baris di bawah,
     blok @font-face di paling atas file ini, file woff2 di assets/fonts/,
     dan daftar preload di kb_preload_fonts() pada functions.php.

     Fallback di bawah tetap ditulis lengkap dan tetap berguna: ia yang
     dipakai selama swap, dan kalau woff2-nya gagal dimuat.                */
  --kb-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --kb-font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ukuran per peran, persis dari DESIGN.md > Typography > Hierarchy

     DINAIKKAN 2026-08-14, faktor 1,133 pada SEMUA peran.

     Alasannya pembaca, bukan selera: pembeli kavling komersial sebagian
     besar berusia 40-an ke atas, dan di usia itu akomodasi mata sudah
     berkurang. Body 15px memaksa mereka mendekat ke layar atau memperbesar
     halaman - dua hal yang sama-sama berarti halaman ini gagal dibaca
     sebagaimana ia dirancang.

     Faktornya SERAGAM supaya setiap rasio hierarki DESIGN.md tetap utuh:
     yang naik adalah seluruh tangganya, bukan satu anak tangga. Body 15->17,
     Data 14->16, Title 17->19, Headline 28->32, dan seterusnya.

     Skala JARAK sengaja tidak ikut naik. DESIGN.md menuntut ritme rapat;
     menaikkan font lewat `html { font-size }` akan ikut menggelembungkan
     setiap --kb-space-* karena semuanya rem, dan kepadatan itu justru yang
     membuat papan harga ini terbaca sebagai papan. Yang perlu lebih besar
     adalah hurufnya, bukan ruang di antaranya.                            */
  --kb-size-display:  clamp(2.8125rem, 6.8vw, 5rem);

  /* Display Listing - peran terpisah untuk judul halaman detail.
     Display penuh di atas dipakai hero PENDEK (front-page, kawasan). Judul
     listing adalah kalimat faktual 40-50 karakter; di 72px ia memakan 38vh
     sendirian, sehingga gambar utama dan rel harga tidak kebagian layar
     pertama. Diamandemen di DESIGN.md, bukan cuma disimpang di sini. */
  --kb-size-display-listing: clamp(2rem, 3.85vw, 3.125rem);
  --kb-size-headline: 2.25rem;
  --kb-size-price:    clamp(1.625rem, 2.8vw, 2.25rem);
  --kb-size-wordmark: 1.5625rem;
  --kb-size-title:    1.3125rem;
  --kb-size-body:     1.1875rem;
  --kb-size-data:     1.125rem;

  /* UKURAN - peran baru 2026-08-14, khusus luas tanah di kartu.
     Peran TERBESAR di dalam kartu, di atas Price. Alasannya bukan visual
     melainkan urutan keputusan pembeli: luas adalah saringan pertama, dan
     kartu yang ukurannya tidak cocok tidak perlu dibaca harganya sama
     sekali. Lihat catatan lengkap di card-kavling.php dan DESIGN.md. */
  --kb-size-ukuran:   clamp(2rem, 3.4vw, 2.75rem);

  /* Label naik ke 13px, bukan 12,5px yang keluar dari faktor seragam.
     Satu-satunya peran yang sengaja dilebihkan ~4%, dan alasannya melekat
     pada peran ini sendiri: Label selalu HURUF BESAR SEMUA dengan
     letter-spacing, dan huruf besar terbaca lebih kecil daripada huruf
     kecil pada ukuran px yang sama. Ia juga peran terkecil di sistem ini,
     jadi ia yang paling dulu gagal di mata yang jadi alasan perubahan ini.
     Penyimpangan 4% pada satu peran terkecil tidak mengubah urutan hierarki
     mana pun. */
  --kb-size-label:    0.9375rem;

  --kb-lh-display:  1.05;
  --kb-lh-headline: 1.2;
  --kb-lh-price:    1;
  --kb-lh-title:    1.3;
  --kb-lh-body:     1.6;
  --kb-lh-data:     1.4;

  --kb-weight-regular: 400;
  --kb-weight-medium:  500;
  --kb-weight-semibold: 600;

  --kb-tracking-price:    -0.01em;
  --kb-tracking-wordmark:  0.02em;
  --kb-tracking-label:     0.08em;

  /* Maksimum panjang baris prosa. Porsi prosa kecil di sistem ini.

     NILAINYA 58ch, BUKAN 68ch, dan itu bukan penyimpangan dari DESIGN.md
     melainkan cara memenuhinya. Satuan `ch` adalah lebar glif "0", yang di
     DM Sans lebih sempit daripada rata-rata karakter: 68ch diukur menghasilkan
     ~81 karakter nyata per baris. Yang diikat DESIGN.md adalah "maks 68
     karakter", jadi 58ch-lah angka yang benar-benar menghasilkannya. */
  --kb-measure: 58ch;

  /* Batas lebar blok judul halaman detail. Bukan ch melainkan rem, karena
     yang dibatasi bukan satu peran tipografi melainkan sebuah blok berisi
     tiga ukuran teks sekaligus - remah roti (Data), judul (Display
     Listing), dan baris meta (Data). Satuan ch akan ikut ukuran font
     elemen tempat ia dipasang, dan di blok campuran itu artinya batasnya
     berubah-ubah tanpa alasan. */
  --kb-measure-judul: 44rem;

  /* --- Jarak ---
     DESIGN.md menuntut ritme rapat dan konsisten. Skala 4px, sengaja
     pendek: pilihan yang sedikit membuat kepadatan lebih mudah dijaga
     daripada skala panjang yang mengundang ruang kosong.                  */
  --kb-space-1:  0.25rem;   /*  4px */
  --kb-space-2:  0.5rem;    /*  8px */
  --kb-space-3:  0.75rem;   /* 12px */
  --kb-space-4:  1rem;      /* 16px */
  --kb-space-5:  1.5rem;    /* 24px */
  --kb-space-6:  2rem;      /* 32px */
  --kb-space-7:  3rem;      /* 48px */
  --kb-space-8:  4rem;      /* 64px */

  /* --- Bentuk ---
     DESIGN.md: radius sangat kecil, sekitar 2-4px, satu keluarga untuk
     kartu, pelat, tombol, dan input. Tidak ada pil bulat penuh.           */
  --kb-radius-sm: 2px;
  --kb-radius:    3px;

  --kb-hairline: 1px;

  /* --- Tata letak --- */
  --kb-container:     1280px;
  --kb-gutter:        var(--kb-space-4);
  --kb-hero-max:      50vh;   /* The Half-Screen Hero Rule */

  /* --- Gerak ---
     Gerak nyaris nol. Batas atas 200ms dari Do's and Don'ts; nilai kerja
     ditetapkan di bawahnya. Tidak ada pustaka animasi.                    */
  --kb-duration: 160ms;
  --kb-ease:     ease-out;

  /* --- Fokus ---
     Pengecualian resmi terhadap The No-Shadow Rule. The Visible Focus
     Rule: penanda fokus wajib terlihat di atas cream MAUPUN di dalam
     pelat navy, jadi disediakan dua nilai.                               */
  --kb-focus-width:  2px;
  --kb-focus-offset: 2px;
  --kb-focus-color:         var(--kb-navy);
  --kb-focus-color-on-navy: var(--kb-gold);
}

/* Hormati preferensi pengurangan gerak. Sistem ini nyaris tidak bergerak,
   jadi mematuhinya nyaris tanpa biaya. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --kb-duration: 0ms;
  }
}


/* ==========================================================================
   BASIS
   Bagian ini yang mengambil alih kendali dari Customizer Astra. Nilai warna
   dan tipografi global di Customizer hidup di database, tidak ikut git, dan
   karena itu menjadi sumber kebenaran kedua yang melawan DESIGN.md. Stylesheet
   ini dimuat dengan dependency pada astra-theme-css, sehingga tercetak setelah
   CSS dinamis Astra dan menang pada spesifisitas yang sama - tanpa !important.

   Kalau suatu saat ada nilai Astra yang tetap menang, naikkan spesifisitasnya
   di sini; jangan mengubahnya lewat Customizer, karena perubahan itu tidak
   akan terbawa ke mesin lain maupun ke riwayat git.
   ========================================================================== */

/* LINING FIGURES DI SELURUH SITUS.

   Cormorant Garamond yang kita self-host memakai OLDSTYLE FIGURES sebagai
   bawaan - diperiksa langsung ke berkas woff2: digit 3, 5, 7, dan 9 turun
   sampai -275 di bawah garis dasar sementara 6 naik ke 661, dan font-nya
   punya fitur `lnum` tapi tidak punya `onum`. Itu tanda pasti bahwa yang
   default adalah oldstyle.

   Akibatnya bukan cuma di kartu: judul listing seperti "Kavling Komersial
   Escala 7300 m2 Alam Sutera" adalah Cormorant BERANGKA, dan angkanya
   selama ini tampil naik-turun di H1 halaman detail tanpa ada yang
   menyadarinya.

   Diwariskan dari body, jadi ia berlaku di mana pun tanpa perlu diulang.
   Tempat yang butuh tabular menuliskan `tabular-nums lining-nums` berdua -
   menulis `tabular-nums` sendirian akan MENGGANTI nilai warisan ini dan
   mengembalikan oldstyle pada Cormorant. */
body.kb-body {
  font-variant-numeric: lining-nums;
  background-color: var(--kb-surface);
  color: var(--kb-ink);
  font-family: var(--kb-font-body);
  font-size: var(--kb-size-body);
  line-height: var(--kb-lh-body);
}

body.kb-body h1,
body.kb-body h2,
body.kb-body h3,
body.kb-body h4 {
  color: var(--kb-ink);
}

body.kb-body a {
  color: var(--kb-ink);
  text-decoration-thickness: var(--kb-hairline);
  text-underline-offset: 0.2em;
}

/* Tautan di area terang beraksen navy, tidak pernah emas.
   The Cream Ground Rule. */
body.kb-body a:hover {
  color: var(--kb-ink);
}

/* Lewati-ke-isi: terlihat hanya saat difokus keyboard.

   Warnanya ditulis dengan selector `body.kb-body` di bawah, BUKAN di blok ini.
   Sebabnya: `body.kb-body a` punya spesifisitas (0,2,1) dan mengalahkan
   `.kb-lewati` (0,1,0), sehingga `color` di sini kalah dan tautannya jadi navy
   di atas pelat navy - kontras 1.0:1, alias tidak terlihat sama sekali persis
   saat ia dibutuhkan. Cacat ini tidak pernah terlihat karena elemennya hanya
   muncul saat difokus keyboard. */
.kb-lewati {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--kb-space-2) var(--kb-space-4);
  background: var(--kb-navy);
  color: var(--kb-cream);
  font-size: var(--kb-size-label);
  letter-spacing: var(--kb-tracking-label);

  /* SENTENCE CASE, bukan uppercase (2026-08-14, temuan detector
     `all-caps-body`). Peran Label memang huruf besar, tapi Label untuk
     "nama kolom, penanda status, eyebrow" - potongan pendek. "Lewati ke
     daftar kavling" adalah kalimat instruksi empat kata, dan huruf besar
     menghapus bentuk naik-turun huruf yang justru dipakai mata untuk
     mengenali kata. Ironisnya elemen ini muncul HANYA untuk pengguna
     keyboard - orang yang paling butuh instruksinya terbaca sekali lirik. */
  text-transform: none;
}

body.kb-body .kb-lewati,
body.kb-body .kb-lewati:hover,
body.kb-body .kb-lewati:focus {
  color: var(--kb-cream);
}

.kb-lewati:focus {
  left: var(--kb-space-4);
  top: var(--kb-space-4);
  outline: var(--kb-focus-width) solid var(--kb-focus-color-on-navy);
  outline-offset: var(--kb-focus-offset);
}

/* Judul memakai peran tipografinya sendiri, dan `text-transform` bukan
   bagian dari peran mana pun kecuali Label.

   Reset ini WAJIB ada. Astra memancarkan `h1,h2 { text-transform: uppercase }`
   di inline CSS-nya - sisa starter template water sports yang tersimpan di
   `font-extras-h1` dan `font-extras-h2`. Kelas kita menimpa font-size tapi
   dulu tidak pernah menyetel text-transform, sehingga SEMUA judul terbit
   uppercase tanpa satu baris pun di DESIGN.md memintanya. Setelannya sudah
   dibersihkan di database juga; baris ini lapis kedua kalau ia kembali. */
body.kb-body h1,
body.kb-body h2,
body.kb-body h3,
body.kb-body h4 {
  text-transform: none;
}

/* Dipakai header dan footer; Astra menyediakan kelas ini juga, tapi kita
   tidak menggantungkan aksesibilitas pada stylesheet parent. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   KOMPONEN
   Setiap nilai di bawah memakai token di atas. Kalau ada hex, px, atau
   ukuran font yang ditulis langsung di sini, itu tanda token-nya kurang -
   tambahkan tokennya, jangan menulis nilai mentah.
   ========================================================================== */

/* --- Header -------------------------------------------------------------- */

.kb-header {
  background: var(--kb-surface);
  border-bottom: var(--kb-hairline) solid var(--kb-rule);
}

.kb-header__isi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kb-space-4);
  padding-block: var(--kb-space-4);
}

.kb-wordmark {
  font-family: var(--kb-font-display);
  font-size: var(--kb-size-wordmark);
  font-weight: var(--kb-weight-regular);
  letter-spacing: var(--kb-tracking-wordmark);
  line-height: 1;
  color: var(--kb-ink);
  text-decoration: none;
  white-space: nowrap;
}

/* Di latar cream, penekanan dilakukan dengan navy - diturunkan opasitasnya,
   bukan diganti emas. */
.kb-wordmark__tld {
  color: var(--kb-ink-2);
}

.kb-nav__daftar {
  display: flex;
  align-items: center;
  gap: var(--kb-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.kb-body .kb-nav__daftar a {
  font-family: var(--kb-font-body);
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
  color: var(--kb-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--kb-duration) var(--kb-ease);
}

body.kb-body .kb-nav__daftar a:hover,
body.kb-body .kb-nav__daftar .current-menu-item > a {
  color: var(--kb-ink);
}

/* Tombol menu: tersembunyi di desktop, muncul di bawah 48rem. */
.kb-nav-tombol {
  display: none;
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: var(--kb-hairline) solid var(--kb-rule);
  border-radius: var(--kb-radius-sm);
  cursor: pointer;
}

.kb-nav-tombol__garis,
.kb-nav-tombol__garis::before,
.kb-nav-tombol__garis::after {
  position: absolute;
  left: 50%;
  width: 1rem;
  height: var(--kb-hairline);
  background: var(--kb-ink);
  content: "";
  transform: translateX(-50%);
}

.kb-nav-tombol__garis {
  top: 50%;
  transform: translate(-50%, -50%);
}

.kb-nav-tombol__garis::before { top: -0.3125rem; }
.kb-nav-tombol__garis::after  { top:  0.3125rem; }

/* --- Kontainer & grid ---------------------------------------------------- */

.kb-container {
  max-width: var(--kb-container);
  margin-inline: auto;
  padding-inline: var(--kb-gutter);
}

/* GRID KARTU: KARTU SISA DI TENGAH, TIDAK MELEBAR (diubah 2026-08-15).

   Versi sebelumnya memakai teknik anti-yatim milik grid galeri - kartu
   terakhir MELEBAR mengisi sisa barisnya. Untuk foto itu benar; untuk kartu
   listing ternyata salah, dan menimbulkan dua cacat sekaligus:

   1. Pita gambar bertinggi tetap hanya mengisi sepertiga lebar kartu yang
      melebar, sehingga fotonya terlihat mengambang di tengah bidang kosong.
   2. Baris fakta ikut melebar, dan pasangan label-nilai terlempar ke dua
      ujung kartu selebar 1200px.

   Keduanya berakar pada asumsi yang sama: bahwa kartu boleh berubah lebar.
   Kartu listing tidak boleh - seluruh isinya (pita gambar, blok luas, baris
   fakta) dirancang untuk satu lebar, dan melebarkannya merusak ketiganya.

   Maka yang dipakai FLEXBOX, bukan grid: `flex-wrap` + `justify-content:
   center` menempatkan sisa baris terakhir di tengah tanpa mengubah lebar
   satu kartu pun. Baris yang penuh tetap terisi rapat dari tepi ke tepi -
   `center` tidak terlihat efeknya saat tidak ada sisa.

   `flex: 0 1 <basis>` : TIDAK boleh tumbuh (itu yang mencegah melebar),
   boleh menyusut sedikit supaya pembulatan sub-piksel tidak melemparkan
   kartu ketiga ke baris berikutnya.

   n=1  [    1    ]        n=4  [1 2 3] [  4  ]
   n=2  [  1   2  ]        n=5  [1 2 3] [ 4 5 ]
   n=3  [1  2  3]          n=7  [1 2 3] [4 5 6] [  7  ]

   Grid galeri (.kb-media__grid) SENGAJA tetap memakai teknik melebar -
   untuk foto, mengisi sisa baris memang jawaban yang benar. */
.kb-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kb-space-4);
  align-items: stretch;
}

.kb-grid > * {
  flex: 0 1 calc((100% - 2 * var(--kb-space-4)) / 3);
  min-width: 0;
}



/* --- Label & eyebrow ----------------------------------------------------- */

.kb-label,
.kb-eyebrow {
  font-family: var(--kb-font-body);
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
  /* ink-2, bukan ink-3: teks ini di bawah 18px, jadi 3.13:1 tidak cukup. */
  color: var(--kb-ink-2);
}

/* --- Kartu kavling -------------------------------------------------------

   Seluruh aturan kartu lama DIHAPUS 2026-08-15, digantikan desain v6 di
   bagian bawah berkas ini (cari "KARTU LISTING - DESAIN v6").

   Yang ikut hilang bersamanya, dan catatannya disimpan di sini karena
   pelajarannya masih berlaku untuk kartu baru:

   - Kartu lama sempat tampil PUTIH berminggu-minggu meski CSS-nya berbunyi
     cream, karena `.ast-separate-container .ast-article-post{background:#fff}`
     milik Astra berspesifisitas 0,2,0 mengalahkan `.kb-kartu` yang 0,1,0.
     Kartu baru diawali `body.kb-body` sejak baris pertamanya justru karena
     ini.
   - Tepi kartu memikul seluruh tugas memisahkan kartu dari halaman, karena
     keduanya sewarna. Karena itu garisnya tidak boleh samar - kartu baru
     memakai navy 50%, lebih tegas lagi daripada 30% yang dipakai kartu lama.

*/

.kb-lencana {
  display: inline-block;
  padding: var(--kb-space-1) var(--kb-space-2);

  font-family: var(--kb-font-body);
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
  white-space: nowrap;

  /* Radius keluarga yang sama. Bukan pil bulat penuh - lihat DESIGN.md Shapes. */
  border-radius: var(--kb-radius-sm);
}

/* Dijual: pelat navy, teks emas. Emas berada di atas navy - patuh. */
.kb-lencana--dijual {
  background: var(--kb-navy);
  color: var(--kb-gold);
}

/* Disewakan: bidang emas, teks navy.
   CATATAN: ini pengecualian yang diminta eksplisit dan MELANGGAR
   The Gold-on-Navy Rule, karena bidang emas bersentuhan dengan kartu cream.
   Kontras teksnya sendiri aman (navy di atas emas = 7.84:1). Kalau nanti
   diputuskan kembali patuh, ganti dua baris ini dengan latar navy dan
   teks emas, lalu bedakan dari Dijual lewat garis emas di dalam pelat. */
.kb-lencana--disewakan {
  background: var(--kb-gold);
  color: var(--kb-navy);
}

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





/* --- Filter kawasan ------------------------------------------------------

   Baris tautan, bukan tombol. Bentuknya sengaja tidak meniru tombol
   WhatsApp: di situs yang hanya punya SATU jalur konversi, apa pun yang
   berbentuk tombol dan bukan WhatsApp mencuri perhatian dari satu-satunya
   tindakan yang diminta. Filter ini navigasi, dan navigasi berbentuk tautan.

   Menggulir mendatar di layar sempit alih-alih membungkus jadi tiga baris:
   dengan kawasan yang akan bertambah, membungkus mendorong seluruh katalog
   turun dari layar pertama. */
.kb-filter {
  margin-bottom: var(--kb-space-5);
  border-bottom: var(--kb-hairline) solid var(--kb-rule);
}

.kb-filter__daftar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space-1) var(--kb-space-5);
  margin: 0;
  padding: 0 0 var(--kb-space-3);
  list-style: none;
}

.kb-filter__butir {
  margin: 0;
}

body.kb-body .kb-filter__tautan {
  display: inline-block;
  padding: var(--kb-space-2) 0;

  font-family: var(--kb-font-body);
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--kb-ink-2);

  border-bottom: 2px solid transparent;
  transition: color var(--kb-duration) var(--kb-ease),
              border-color var(--kb-duration) var(--kb-ease);
}

body.kb-body .kb-filter__tautan:hover {
  color: var(--kb-ink);
  border-bottom-color: var(--kb-rule-strong);
}

/* Yang aktif ditandai DUA cara sekaligus, dan itu disengaja: warna penuh
   plus garis bawah. Warna sendirian tidak cukup - siapa pun yang tidak
   membedakan navy 72% dari navy 100% kehilangan satu-satunya penandanya.
   Garisnya navy, bukan emas: emas di atas cream tidak menanggung kontras
   (The Gold-Never-Carries-Contrast Rule). */
body.kb-body .kb-filter__tautan--aktif {
  color: var(--kb-ink);
  border-bottom-color: var(--kb-navy);
}

/* Jumlah listing, dihitung dari taxonomy - tidak pernah diketik. Diturunkan
   opasitasnya supaya nama kawasannya yang memimpin. */
.kb-filter__jumlah {
  margin-left: var(--kb-space-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--kb-ink-3);
}

body.kb-body .kb-filter__tautan--aktif .kb-filter__jumlah {
  color: var(--kb-ink-2);
}

/* --- Blok "Belum Menemukan yang Cocok?" ---------------------------------

   Pelat navy, bukan kartu cream. Ia harus berbeda dari daftar di atasnya:
   di antara deretan kartu bergaris tipis, satu bidang navy pekat berhenti
   dibaca sebagai "kartu berikutnya" dan mulai dibaca sebagai penutup. Ini
   pemakaian pelat yang sama dengan blok harga - pembalikan nada sebagai
   cara menaikkan sesuatu di atas cream, bukan bayangan.

   Rata tengah termasuk paragrafnya, dan ini pengecualian sadar terhadap
   "prosa rata kiri": isinya dua baris pendek, bukan prosa yang dibaca
   berbaris-baris, dan blok ini bekerja sebagai satu tanda berhenti. */
.kb-cari {
  margin-top: var(--kb-space-7);
  padding: var(--kb-space-7) var(--kb-space-5);
  background-color: var(--kb-surface-plate);
  border-radius: var(--kb-radius);
  text-align: center;
}

/* Prefiks `body.kb-body` WAJIB di sini, dan bukan demi Astra melainkan demi
   ATURAN KITA SENDIRI: `body.kb-body h2 { color: var(--kb-ink) }` di bagian
   jembatan Astra punya spesifisitas 0,2,1 dan mengalahkan `.kb-cari__judul`
   yang 0,1,0. Tanpa prefiks, judul ini tercetak navy di atas pelat navy -
   kontras 1,0:1, hilang sama sekali. Terjadi persis begitu blok ini pertama
   dipasang, dan baru ketahuan dari tangkapan layar.

   Ini contoh paling murni kenapa The Astra-Always-Wins Rule ditulis sebagai
   kebiasaan menulis, bukan tambalan: yang mengalahkan selector baru bukan
   cuma tema induk, tapi juga aturan sendiri yang sudah berprefiks. */
body.kb-body .kb-cari__judul {
  margin: 0;
  font-family: var(--kb-font-display);
  font-size: var(--kb-size-headline);
  font-weight: var(--kb-weight-regular);
  line-height: var(--kb-lh-headline);
  color: var(--kb-on-navy);
}

.kb-cari__teks {
  max-width: var(--kb-measure);
  margin: var(--kb-space-3) auto var(--kb-space-5);
  font-size: var(--kb-size-body);
  line-height: var(--kb-lh-body);
  color: var(--kb-on-navy-2);
}

/* Cincin fokus emas: tombol berdiri di dalam pelat navy - The Visible Focus
   Rule menuntut penanda yang terlihat di kedua latar. */
.kb-cari .kb-wa:focus-visible {
  outline: var(--kb-focus-width) solid var(--kb-focus-color-on-navy);
  outline-offset: var(--kb-focus-offset);
}

.kb-cari__catatan {
  margin: var(--kb-space-4) 0 0;
  font-size: var(--kb-size-data);
  line-height: var(--kb-lh-data);
  color: var(--kb-on-navy-2);
}

/* Tombol di layar pertama halaman depan. */
.kb-hero__aksi {
  margin-top: var(--kb-space-5);
  text-align: center;
}

/* Tombol di kaki halaman artikel - hub maupun isi. */
.kb-artikel-tunggal__aksi {
  margin-top: var(--kb-space-6);
  padding-top: var(--kb-space-5);
  border-top: var(--kb-hairline) solid var(--kb-rule);
  text-align: center;
}

/* Foto Christian di halaman /tentang/. Rasio dikunci dan lebarnya dibatasi:
   berkas aslinya 1200x630 (rasio OG), dan tanpa batas ia akan selebar lajur
   isi - lebih besar daripada perannya di halaman ini. Radius mengikuti
   keluarga bentuk yang sama dengan kartu dan pelat. */
.kb-tentang__foto {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  margin: 0 auto var(--kb-space-4);
  border-radius: var(--kb-radius);
  border: var(--kb-hairline) solid var(--kb-rule-strong);
}

/* JUDUL HERO DAN JUDUL SEKSI RATA TENGAH (2026-08-15).

   Judul di tengah, PARAGRAF TETAP RATA KIRI - dan pemisahan itu disengaja.
   Judul pendek dan dibaca sekali lirik, jadi rata tengah memberinya bobot
   tanpa biaya. Prosa dibaca baris demi baris: rata tengah memindahkan titik
   awal tiap baris, dan mata kehilangan tempat kembali di setiap pergantian
   baris. Itu sebabnya aturan ini hanya menyentuh h1 dan h2, tidak pernah p.

   Blok judul halaman detail sudah rata tengah lewat .kb-listing__judul-blok
   sejak 2026-08-14, jadi ia tidak diulang di sini. */
.kb-hero__judul,
.kb-blok__judul,
.kb-kawasan__judul,
.kb-artikel-hub__judul,
.kb-tentang__judul {
  text-align: center;
}

/* PARAGRAF TIDAK IKUT. Hanya judul yang di tengah; teks pendamping di bawah
   hero tetap rata kiri. Prosa dibaca baris demi baris, dan rata tengah
   memindahkan titik awal tiap baris sehingga mata kehilangan tempat kembali
   di setiap pergantian baris. */









/* Tidak ada aturan sup di sini lagi: satuannya memakai karakter "²" langsung.
   Lihat catatan di card-kavling.php - <sup> bersarang di dalam span yang sudah
   diperkecil dan diredupkan menghasilkan glif 8px pada kontras 1.1:1. */





/* --- Lajur angka rata kanan ---------------------------------------------- */

/* Melebar penuh sejak badan kartu jadi satu lajur. Label menempel di tepi
   kiri, nilai di tepi kanan - baris fakta yang terbaca seperti baris tabel,
   dan kolom angka tetap rata kanan sebagaimana The Tabular Numeral Rule
   menuntut untuk angka bersatuan tetap. */




/* --- Homepage ------------------------------------------------------------ */

.kb-depan {
  padding-bottom: var(--kb-space-8);
}

/* HERO RINGKAS. Tingginya tidak dikunci max-height - itu hanya membuat isi
   panjang menimpa blok di bawahnya. Yang menahannya adalah skala tipografi,
   max-width judul, dan padding di bawah ini; ketiganya menghasilkan hero jauh
   di bawah 50vh sehingga kartu pertama mulai terlihat tanpa menggulir.

   Landing page lama memakai hero setinggi layar penuh. Itu yang ditolak, dan
   itu yang tidak diulang di sini. */
.kb-hero {
  padding-block: var(--kb-space-7) var(--kb-space-6);
  border-bottom: var(--kb-hairline) solid var(--kb-rule);
  margin-bottom: var(--kb-space-6);
}

.kb-hero__judul {
  margin: 0;
  font-family: var(--kb-font-display);
  font-size: var(--kb-size-display-listing);
  font-weight: var(--kb-weight-regular);
  line-height: var(--kb-lh-headline);
  color: var(--kb-ink);

  /* max-width membuat judul ini duduk di dalam kotak sempit. `text-align:
     center` hanya menengahkan teks DI DALAM kotak itu - kotaknya sendiri
     tetap menempel kiri, sehingga judulnya tampak ter-center di sepertiga
     kiri halaman, bukan di halaman. margin auto yang menengahkan kotaknya. */
  max-width: 22ch;
  margin-inline: auto;
}

/* Rata tengah mengikuti judulnya (2026-08-15).

   Ini pengecualian terhadap "prosa rata kiri", dan batasnya jelas: subteks
   hero cuma dua baris dan dibaca sebagai satu tarikan bersama judulnya -
   bukan prosa yang dibaca berbaris-baris. Judul di tengah dengan paragraf
   rata kiri tepat di bawahnya menghasilkan dua sumbu di satu blok, dan
   matanya kelihatan mencari mana yang benar.

   Paragraf panjang di tempat lain TETAP rata kiri. Yang dipindahkan ke
   tengah hanya teks pendek yang menempel pada judul. */
.kb-hero__teks {
  max-width: var(--kb-measure);
  margin: var(--kb-space-4) auto 0;
  text-align: center;
  font-size: var(--kb-size-body);
  line-height: var(--kb-lh-body);
  color: var(--kb-ink-2);
}

.kb-depan__terbaru,
.kb-depan__kawasan {
  margin-top: var(--kb-space-7);
}

/* --- Strip kredibilitas --------------------------------------------------- */

/* Pelat navy sebagai jangkar ritmis di antara hamparan cream, dan SENGAJA
   tanpa emas: jatah segel di situs ini dipegang harga dan tombol WhatsApp.
   Angka di sini penting, tapi bukan yang paling penting di halaman. */
/* Pelat kredensial. Padding diturunkan sejak isinya tinggal satu baris:
   pelat setinggi dua blok yang cuma memuat satu baris terbaca seperti kotak
   yang isinya jatuh. */
.kb-kredit {
  display: grid;
  gap: var(--kb-space-5);
  margin-top: var(--kb-space-8);
  padding: var(--kb-space-5) var(--kb-space-6);
  border-radius: var(--kb-radius);
  background: var(--kb-surface-plate);
  color: var(--kb-on-navy);
}

/* Aturan .kb-kredit__angka, __sel, __nilai, dan __label DIHAPUS 2026-08-15
   bersama markup-nya. Dihapus, bukan disimpan "siapa tahu dipakai lagi":
   CSS untuk elemen yang tidak ada lagi adalah biaya baca untuk setiap orang
   yang membuka berkas ini, dan satu-satunya cara mengetahui ia mati adalah
   mencarinya ke seluruh template. Kalau blok angkanya dikembalikan nanti,
   git punya versinya. */

/* GARIS ATAS DIBUANG 2026-08-15, bersama blok angka yang dulu dipisahkannya.

   Garis itu punya satu tugas: memisahkan dua angka besar di atas dari tiga
   klaim di bawahnya. Begitu angkanya hilang, ia jadi garis yang membelah
   pelat dari ketiadaan - persis jenis sisa yang membuat halaman terlihat
   seperti ada yang gagal dimuat. Padding atasnya ikut dibuang karena ia
   memberi ruang untuk garis itu, bukan untuk teksnya. */
.kb-kredit__klaim {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kb-space-2) var(--kb-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kb-kredit__butir {
  font-size: var(--kb-size-data);
  line-height: var(--kb-lh-data);
  color: var(--kb-on-navy);
}

/* --- Blok orang ----------------------------------------------------------- */

.kb-orang {
  margin-top: var(--kb-space-8);
}

/* SATU KOLOM RATA TENGAH (disusun ulang 2026-08-15).

   Susunan sebelumnya dua lajur: teks di kiri, tombol sendirian di kanan.
   Karena teksnya pendek, lajur kanan hampir seluruhnya kosong dan tombolnya
   melayang tanpa apa pun di sekitarnya - terbaca seperti tombol yang lupa
   dipindahkan, bukan ajakan yang mengikuti perkenalan.

   Urutannya juga urutan meyakinkan: wajah, nama, apa yang ia kerjakan, cara
   menghubunginya. */
.kb-orang__isi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

/* Foto bulat, dan ini SATU-SATUNYA lingkaran di sistem ini.

   DESIGN.md mengikat radius pada satu keluarga kecil 2-4px untuk kartu,
   pelat, tombol, dan input - dan aturan itu tetap berlaku untuk semuanya.
   Wajah bukan salah satunya: potret dipotong lingkaran adalah konvensi yang
   dibaca sebagai "ini orang", bukan sebagai bentuk yang dipilih. Bidang
   persegi bergaris tepi di tempat ini justru terbaca seperti kartu keenam.

   `object-fit: cover` dengan `object-position` sedikit ke atas: sumbernya
   gambar OG 1200x630 yang lebar, dan pemotongan tengah pada rasio selebar
   itu memenggal kepala. */
.kb-orang__foto {
  display: block;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
  margin-bottom: var(--kb-space-4);
  background-color: var(--kb-surface);
}

/* Naik satu tingkat peran: Title -> Headline. BUKAN ukuran karangan.

   Nama ini entitas publik situs (PRODUCT.md) dan sebelumnya tercetak pada
   peran yang sama dengan nama kavling di kartu - artinya orangnya setara
   dengan salah satu barang dagangannya. Headline adalah tingkat berikutnya
   yang sudah ada di sistem; tidak ada nilai px baru yang dikarang untuk ini. */
.kb-orang__nama {
  margin: 0;
  font-family: var(--kb-font-display);
  font-size: var(--kb-size-headline);
  font-weight: var(--kb-weight-regular);
  line-height: var(--kb-lh-headline);
  color: var(--kb-ink);
}

/* Rata tengah, dan ini pengecualian sadar terhadap "prosa rata kiri": bio
   ini dua sampai tiga kalimat pendek yang bekerja sebagai keterangan foto,
   bukan prosa yang dibaca berbaris-baris. */
.kb-orang__peran {
  max-width: var(--kb-measure);
  margin: var(--kb-space-3) auto 0;
  font-size: var(--kb-size-body);
  line-height: var(--kb-lh-body);
  color: var(--kb-ink-2);
}

.kb-orang__aksi {
  margin-top: var(--kb-space-5);
}

.kb-orang__tautan {
  margin: var(--kb-space-4) 0 0;
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
}

body.kb-body .kb-orang__tautan a {
  color: var(--kb-ink);
  text-decoration: none;
  border-bottom: var(--kb-hairline) solid var(--kb-rule-strong);
}

body.kb-body .kb-orang__tautan a:hover {
  border-bottom-color: var(--kb-ink);
}

/* Blok dua lajur untuk .kb-orang__isi DIHAPUS 2026-08-15 - susunannya
   sekarang satu kolom rata tengah di semua lebar. */

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

.kb-artikel {
  position: relative;
  padding: var(--kb-space-4);
  border: var(--kb-hairline) solid var(--kb-rule);
  border-radius: var(--kb-radius);
  transition: border-color var(--kb-duration) var(--kb-ease);
}

.kb-artikel:hover {
  border-color: var(--kb-rule-strong);
}

.kb-artikel:focus-within {
  outline: var(--kb-focus-width) solid var(--kb-focus-color);
  outline-offset: var(--kb-focus-offset);
}

.kb-artikel__judul {
  margin: 0;
  font-family: var(--kb-font-body); /* The Serif Ceiling Rule */
  font-size: var(--kb-size-title);
  font-weight: var(--kb-weight-semibold);
  line-height: var(--kb-lh-title);
}

body.kb-body .kb-artikel__tautan {
  color: var(--kb-ink);
  text-decoration: none;
}

.kb-artikel__tautan::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.kb-artikel__tautan:focus {
  outline: none;
}

.kb-artikel__tanggal {
  margin: var(--kb-space-2) 0 0;
  font-size: var(--kb-size-data);
  line-height: var(--kb-lh-data);
  font-variant-numeric: tabular-nums;
  color: var(--kb-ink-2);
}

/* --- Hub artikel dan isinya ---------------------------------------------- */

.kb-artikel-hub,
.kb-artikel-tunggal {
  padding-block: var(--kb-space-6) var(--kb-space-8);
}

.kb-artikel-hub__kepala {
  margin-bottom: var(--kb-space-6);
  padding-bottom: var(--kb-space-5);
  border-bottom: var(--kb-hairline) solid var(--kb-rule);
}

.kb-artikel-hub__judul,
.kb-artikel-tunggal__judul {
  margin: 0;
  font-family: var(--kb-font-display);
  font-size: var(--kb-size-display-listing);
  font-weight: var(--kb-weight-regular);
  line-height: var(--kb-lh-headline);
  color: var(--kb-ink);
}

.kb-artikel-hub__teks {
  max-width: var(--kb-measure);
  margin: var(--kb-space-3) 0 0;
  font-size: var(--kb-size-body);
  line-height: var(--kb-lh-body);
  color: var(--kb-ink-2);
}

.kb-artikel__ringkas {
  margin: var(--kb-space-2) 0 0;
  font-size: var(--kb-size-data);
  line-height: var(--kb-lh-body);
  color: var(--kb-ink-2);
}

/* Artikel adalah PROSA, bukan tabel - jadi ini satu-satunya template yang
   lebarnya dibatasi ukuran baca, bukan lebar kontainer. Angka butuh ruang;
   kalimat butuh baris yang bisa dilompati matanya tanpa tersesat. */
.kb-artikel-tunggal__isi {
  max-width: var(--kb-measure);
}

.kb-artikel-tunggal__kepala {
  margin-bottom: var(--kb-space-5);
  padding-bottom: var(--kb-space-4);
  border-bottom: var(--kb-hairline) solid var(--kb-rule);
}

.kb-artikel-tunggal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: var(--kb-space-3) 0 0;
  font-size: var(--kb-size-data);
  line-height: var(--kb-lh-data);
  font-variant-numeric: tabular-nums;
  color: var(--kb-ink-2);
}

.kb-artikel-tunggal__badan > * + * {
  margin-top: var(--kb-space-4);
}

body.kb-body .kb-artikel-tunggal__badan h2,
body.kb-body .kb-artikel-tunggal__badan h3 {
  margin-top: var(--kb-space-6);
  font-family: var(--kb-font-display);
  font-weight: var(--kb-weight-regular);
  line-height: var(--kb-lh-headline);
  color: var(--kb-ink);
}

body.kb-body .kb-artikel-tunggal__badan h2 {
  font-size: var(--kb-size-headline);
}

body.kb-body .kb-artikel-tunggal__badan h3 {
  font-size: var(--kb-size-title);
  font-family: var(--kb-font-body); /* The Serif Ceiling Rule di tingkat tiga. */
  font-weight: var(--kb-weight-semibold);
}

body.kb-body .kb-artikel-tunggal__badan ul,
body.kb-body .kb-artikel-tunggal__badan ol {
  padding-left: var(--kb-space-5);
}

body.kb-body .kb-artikel-tunggal__badan li + li {
  margin-top: var(--kb-space-2);
}

body.kb-body .kb-artikel-tunggal__badan a {
  color: var(--kb-ink);
  text-decoration-thickness: var(--kb-hairline);
}

.kb-artikel-tunggal__balik {
  margin-top: var(--kb-space-7);
  padding-top: var(--kb-space-5);
  border-top: var(--kb-hairline) solid var(--kb-rule);
}

/* --- Halaman /tentang/ ---------------------------------------------------- */

.kb-tentang {
  padding-block: var(--kb-space-6) var(--kb-space-8);
}

.kb-tentang__kepala {
  margin-bottom: var(--kb-space-6);
  padding-bottom: var(--kb-space-5);
  border-bottom: var(--kb-hairline) solid var(--kb-rule);
}

.kb-tentang__judul {
  margin: 0;
  font-family: var(--kb-font-display);
  font-size: var(--kb-size-display-listing);
  font-weight: var(--kb-weight-regular);
  line-height: var(--kb-lh-headline);
  color: var(--kb-ink);
}

.kb-tentang__peran {
  max-width: var(--kb-measure);
  margin: var(--kb-space-3) 0 0;
  font-size: var(--kb-size-body);
  line-height: var(--kb-lh-body);
  color: var(--kb-ink-2);
}

/* Tata letak sama dengan halaman detail: isi di kiri, rel tindakan di kanan
   yang menempel saat digulir. Satu pola untuk dua halaman - orang yang sudah
   membaca halaman kavling tidak perlu belajar susunan kedua. */
.kb-tentang__tata {
  display: grid;
  gap: var(--kb-space-6);
}

@media (min-width: 64rem) {
  .kb-tentang__tata {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: var(--kb-space-6) var(--kb-space-7);
    align-items: start;
  }

  .kb-tentang__rel {
    position: sticky;
    top: var(--kb-space-5);
    align-self: start;
  }
}

.kb-tentang__isi > .kb-blok:first-child {
  margin-top: 0;
}

.kb-tentang__isi .kb-prosa__isi > * + * {
  margin-top: var(--kb-space-4);
}

/* Kredensial: dua baris terpisah dengan label perannya masing-masing, BUKAN
   satu kalimat. Bentuknya ikut menegakkan aturan PRODUCT.md - lisensi dan
   keanggotaan tidak boleh terbaca sebagai satu klaim gabungan, dan tata letak
   yang memisahkannya membuat penggabungan itu canggung ditulis. */
.kb-kredensial {
  margin: 0;
  border-top: var(--kb-hairline) solid var(--kb-rule);
}

.kb-kredensial__baris {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--kb-space-4);
  padding: var(--kb-space-3) 0;
  border-bottom: var(--kb-hairline) solid var(--kb-rule);
}

.kb-kredensial__jenis {
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
  color: var(--kb-ink-2);
}

.kb-kredensial__nama {
  margin: 0;
  font-size: var(--kb-size-data);
  font-weight: var(--kb-weight-medium);
  line-height: var(--kb-lh-data);
  color: var(--kb-ink);
}

@media (max-width: 30rem) {
  .kb-kredensial__baris {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kb-space-1);
  }
}

/* Pelat navy di rel. Emas dipegang tombol WhatsApp - satu pelat, satu segel. */
.kb-tentang__kotak {
  padding: var(--kb-space-5);
  border-radius: var(--kb-radius);
  background: var(--kb-surface-plate);
  color: var(--kb-on-navy);
}

.kb-tentang__ajak {
  margin: 0 0 var(--kb-space-4);
  font-size: var(--kb-size-data);
  line-height: var(--kb-lh-body);
  color: var(--kb-on-navy-2);
}

/* Sejak tombol WhatsApp diseragamkan, warnanya TIDAK lagi ditimpa di sini -
   yang tersisa hanya bentuk tata letaknya: melebar penuh di dalam kotak,
   teks di tengah. Warnanya sudah benar dari .kb-wa. */
.kb-tentang__kotak .kb-wa--utama {
  display: block;
  text-align: center;
}

body.kb-body .kb-tentang__kotak .kb-wa--utama {
  color: var(--kb-navy);
}

.kb-tentang__kotak .kb-wa--utama:focus-visible {
  outline: var(--kb-focus-width) solid var(--kb-focus-color-on-navy);
  outline-offset: var(--kb-focus-offset);
}

.kb-tentang__profil-judul {
  margin: var(--kb-space-5) 0 var(--kb-space-2);
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
  color: var(--kb-on-navy-2);
}

.kb-tentang__profil {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--kb-size-data);
}

body.kb-body .kb-tentang__profil a {
  color: var(--kb-on-navy);
  text-decoration: none;
  border-bottom: var(--kb-hairline) solid rgba(var(--kb-cream-rgb), 0.35);
}

body.kb-body .kb-tentang__profil a:hover {
  border-bottom-color: var(--kb-on-navy);
}

body.kb-body .kb-tentang__profil a:focus-visible {
  outline: var(--kb-focus-width) solid var(--kb-focus-color-on-navy);
  outline-offset: var(--kb-focus-offset);
}

/* --- Kepala halaman kawasan ---------------------------------------------- */

.kb-kawasan {
  padding-block: var(--kb-space-6) var(--kb-space-8);
}

.kb-kawasan__kepala {
  /* Hero tidak pernah melebihi 50vh - lihat The Half-Screen Hero Rule.
     Kartu pertama wajib terlihat di layar pertama. */
  max-height: var(--kb-hero-max);
  margin-bottom: var(--kb-space-6);
  padding-bottom: var(--kb-space-4);
  border-bottom: var(--kb-hairline) solid var(--kb-rule);
}

.kb-kawasan__judul {
  margin: var(--kb-space-2) 0 0;
  font-family: var(--kb-font-display);
  font-size: var(--kb-size-display);
  font-weight: var(--kb-weight-regular);
  line-height: var(--kb-lh-display);
  color: var(--kb-ink);
}

.kb-kawasan__deskripsi {
  max-width: var(--kb-measure);
  margin-top: var(--kb-space-3);
  font-family: var(--kb-font-body);
  font-size: var(--kb-size-body);
  line-height: var(--kb-lh-body);
  color: var(--kb-ink-2);
}

.kb-kawasan__jumlah {
  margin: var(--kb-space-3) 0 0;
  font-family: var(--kb-font-body);
  font-size: var(--kb-size-data);
  font-variant-numeric: tabular-nums;
  color: var(--kb-ink-2);
}

/* --- Keadaan nol --------------------------------------------------------- */

.kb-kosong {
  padding: var(--kb-space-7) var(--kb-space-4);
  border: var(--kb-hairline) solid var(--kb-rule);
  border-radius: var(--kb-radius);
  text-align: center;
}

.kb-kosong__judul {
  margin: 0;
  font-family: var(--kb-font-display);
  font-size: var(--kb-size-headline);
  font-weight: var(--kb-weight-regular);
  line-height: var(--kb-lh-headline);
  color: var(--kb-ink);
}

.kb-kosong__teks {
  max-width: var(--kb-measure);
  margin: var(--kb-space-3) auto 0;
  font-family: var(--kb-font-body);
  font-size: var(--kb-size-body);
  line-height: var(--kb-lh-body);
  color: var(--kb-ink-2);
}

/* --- Footer -------------------------------------------------------------- */

/* Pelat navy: satu-satunya tempat emas boleh hidup di halaman ini. */
.kb-footer {
  margin-top: var(--kb-space-8);
  padding-block: var(--kb-space-7);
  background: var(--kb-surface-plate);
  color: var(--kb-on-navy);
}

.kb-footer__atas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--kb-space-6);
  padding-bottom: var(--kb-space-5);
  border-bottom: var(--kb-hairline) solid rgba(var(--kb-cream-rgb), 0.18);
}

.kb-footer__wordmark {
  margin: 0;
  font-family: var(--kb-font-display);
  font-size: var(--kb-size-wordmark);
  letter-spacing: var(--kb-tracking-wordmark);
  line-height: 1;
  /* Satu-satunya jejak emas di seluruh footer - The Rare Seal Rule. */
  color: var(--kb-seal);
}

.kb-footer__tld {
  color: var(--kb-on-navy-2);
}

.kb-footer__nama {
  margin: var(--kb-space-3) 0 0;
  font-size: var(--kb-size-title);
  font-weight: var(--kb-weight-semibold);
  line-height: var(--kb-lh-title);
  color: var(--kb-on-navy);
}

.kb-footer__peran {
  max-width: 34ch;
  margin: var(--kb-space-2) 0 0;
  font-size: var(--kb-size-data);
  line-height: var(--kb-lh-body);
  color: var(--kb-on-navy-2);
}

.kb-footer__judul {
  margin: 0 0 var(--kb-space-3);
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
  color: var(--kb-on-navy-2);
}

.kb-footer__daftar {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--kb-space-2);
}

body.kb-body .kb-footer__daftar a {
  font-size: var(--kb-size-data);
  color: var(--kb-on-navy);
  text-decoration: none;
  transition: color var(--kb-duration) var(--kb-ease);
}

body.kb-body .kb-footer__daftar a:hover {
  color: var(--kb-on-navy-2);
}

.kb-footer__bawah {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--kb-space-3);
  padding-top: var(--kb-space-5);
}

/* Huruf normal, bukan uppercase.

   Baris ini bukan label melainkan dua klaim faktual - satu lisensi dan satu
   keanggotaan - yang justru akan diperiksa orang dengan teliti. PRODUCT.md
   menetapkan aturan penulisan yang mengikat untuk keduanya (AREBI adalah
   KEANGGOTAAN, bukan lisensi), dan aturan setelitinya itu tidak berguna kalau
   kalimatnya sendiri dibuat lebih sulit dibaca. Uppercase menghapus bentuk
   naik-turun huruf yang dipakai mata untuk mengenali kata. */
.kb-footer__kredensial,
.kb-footer__hak {
  margin: 0;
  font-size: var(--kb-size-data);
  line-height: var(--kb-lh-data);
  color: var(--kb-on-navy-2);
}

.kb-footer__pemisah {
  padding-inline: var(--kb-space-2);
  color: rgba(var(--kb-cream-rgb), 0.45);
}

/* Fokus di dalam pelat navy memakai emas, karena navy di atas navy tidak
   terlihat. The Visible Focus Rule menuntut keduanya bekerja. */
body.kb-body .kb-footer a:focus-visible {
  outline: var(--kb-focus-width) solid var(--kb-focus-color-on-navy);
  outline-offset: var(--kb-focus-offset);
}

/* --- Halaman detail listing ---------------------------------------------- */

.kb-listing {
  padding-block: var(--kb-space-6) var(--kb-space-8);
}

/* --- Remah roti ---------------------------------------------------------- */

.kb-remah {
  margin-bottom: var(--kb-space-5);
}

/* Peran Data, huruf normal - BUKAN peran Label yang uppercase.

   Remah roti memuat judul listing utuh, dan judul itu 40-50 karakter. Kita
   mengenali kata dari bentuknya - naik-turun huruf seperti l, k, g - dan
   uppercase menghapus seluruh isyarat itu. Peran Label memang uppercase, tapi
   Label untuk "nama kolom, penanda status, eyebrow": potongan pendek, bukan
   kalimat. Jalur navigasi sepanjang ini bukan label. */
.kb-remah__daftar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;

  font-size: var(--kb-size-data);
  line-height: var(--kb-lh-data);
  /* ink-2, bukan ink-3: teks ini jauh di bawah 18px. */
  color: var(--kb-ink-2);
}

/* Pemisah "›" dibuat CSS, bukan karakter di markup, supaya pembaca layar
   tidak membacakannya sebagai isi butir daftar. */
.kb-remah__butir + .kb-remah__butir::before {
  content: "\203A";
  margin-right: var(--kb-space-2);
  color: var(--kb-ink-3); /* non-teks dekoratif - ambang kontras teks tidak berlaku */
}

.kb-remah__butir[aria-current="page"] {
  color: var(--kb-ink);
}

body.kb-body .kb-remah a {
  color: inherit;
  text-decoration: none;
  border-bottom: var(--kb-hairline) solid var(--kb-rule-strong);
}

body.kb-body .kb-remah a:hover {
  color: var(--kb-ink);
  border-bottom-color: var(--kb-ink);
}

/* --- Kepala listing ------------------------------------------------------ */

/* --- Tata letak dua kolom -------------------------------------------------

   Satu lajur di ponsel; dua lajur mulai 64rem, dengan rel kanan yang membentang
   dua baris dan menempel saat digulir.

   grid-template-areas dipakai dan BUKAN `order`. Urutan sumbernya (atas -> rel
   -> isi) sudah benar untuk ponsel, dan `order` akan memisahkan urutan visual
   dari urutan DOM - yang berarti pembaca layar dan navigasi Tab membacakan
   halaman dengan urutan berbeda dari yang dilihat orang lain.               */

.kb-listing__tata {
  display: grid;
  gap: var(--kb-space-6);
}

/* grid-area HANYA di dalam media query di bawah, JANGAN dinaikkan ke sini.
   Nama area yang dirujuk tanpa grid-template-areas yang mendefinisikannya
   tidak diabaikan browser - ketiga blok berebut sel yang sama dan saling
   menimpa. Ini pernah terjadi dan tampilan ponselnya hancur total. Di lebar
   ponsel, urutan sumber DOM sudah benar dan tidak butuh penempatan apa pun. */

@media (min-width: 64rem) {
  .kb-listing__tata {
    grid-template-columns: minmax(0, 1fr) 21rem;
    grid-template-areas:
      "atas rel"
      "isi  rel";
    gap: var(--kb-space-6) var(--kb-space-7);
    align-items: start;
  }

  .kb-listing__atas { grid-area: atas; }
  .kb-listing__rel  { grid-area: rel; }
  .kb-listing__isi  { grid-area: isi; }

  /* align-self: start wajib berpasangan dengan sticky di dalam grid: tanpa
     itu, item grid meregang setinggi barisnya dan tidak pernah punya ruang
     untuk bergeser. */
  .kb-listing__rel {
    position: sticky;
    top: var(--kb-space-5);
    align-self: start;
  }
}

/* BLOK JUDUL - LEBAR PENUH DI ATAS DUA KOLOM, RATA TENGAH.

   Dipindah ke luar grid 2026-08-14. Sebelumnya remah roti, H1, baris meta,
   dan lencana berdiri di dalam lajur kiri, sehingga judul terjepit di
   separuh lebar halaman sementara lajur kanan sudah dimulai sejajar
   dengannya. Judul adalah nama halaman ini; ia yang menjelaskan seluruh
   isinya, jadi ia berhak atas lebar penuh sebelum halaman terbelah.

   MAX-WIDTH-nya wajib, dan justru di situ letak gunanya. Rata tengah tanpa
   batas lebar menghasilkan baris judul selebar 1280px - dan pada judul
   listing yang memang kalimat 40-50 karakter, mata kehilangan awal baris
   berikutnya persis seperti pada prosa yang terlalu lebar. 44rem menahan
   judul terpanjang di dua baris, dengan patahan yang jatuh di tempat yang
   masuk akal.

   Batasnya dipasang di BLOK, bukan lagi di h1 (dulu `max-width: 24ch`).
   Kalau batasnya menempel di h1 saja, remah roti dan baris meta tetap
   melebar penuh dan blok ini berhenti terbaca sebagai satu kesatuan. */
.kb-listing__judul-blok {
  max-width: var(--kb-measure-judul);
  margin: 0 auto var(--kb-space-7);
  text-align: center;
}

/* Remah roti dan lencana adalah flex; rata tengahnya tidak ikut dari
   text-align, jadi disebut sendiri. */
.kb-listing__judul-blok .kb-remah__daftar,
.kb-listing__judul-blok .kb-listing__identitas,
.kb-listing__judul-blok .kb-listing__status {
  justify-content: center;
}

.kb-listing__kepala {
  margin-bottom: 0;
}

/* Peran Display Listing, bukan Display penuh - lihat catatan token.
   The Half-Screen Hero Rule ditegakkan lewat skala ini dan max-width di bawah,
   BUKAN lewat max-height: memotong tinggi kepala tanpa overflow hanya membuat
   judul panjang menimpa blok di bawahnya, dan dengan overflow ia terpotong di
   tengah kata. */
.kb-listing__judul {
  margin: 0;
  font-family: var(--kb-font-display);
  font-size: var(--kb-size-display-listing);
  font-weight: var(--kb-weight-regular);
  line-height: var(--kb-lh-headline);
  color: var(--kb-ink);

  /* Batas lebarnya sekarang milik .kb-listing__judul-blok. `max-width: 24ch`
     di sini akan melawan rata tengah blok: h1 jadi kotak sempit yang
     ter-center, sementara remah dan meta memakai lebar blok penuh - dua
     lebar berbeda dalam satu blok yang seharusnya terbaca sebagai satu. */
}

/* --- Gambar utama --------------------------------------------------------

   Foto drone dengan overlay petak = "diagram petak" yang DESIGN.md sebut
   sebagai pengganti sah fotografi, dan aset paling bernilai di halaman ini.

   16/9 diambil dari asetnya sendiri: kelima foto persis 2560x1440. Karena
   rasio kotak sama dengan rasio gambar, `cover` tidak memotong apa pun -
   overlay petaknya utuh. Kalau suatu saat ada gambar berasio lain, `cover`
   akan memotong; itu kompromi yang disengaja supaya tinggi barisnya tetap
   dapat diprediksi dan tata letak tidak melompat saat gambar dimuat.        */
.kb-utama-gambar {
  margin: 0;
  border: var(--kb-hairline) solid var(--kb-rule);
  border-radius: var(--kb-radius);
  overflow: hidden;
  /* Tinggi dibatasi separuh layar supaya rel harga terjamin ikut terlihat
     di layar pertama - The Half-Screen Hero Rule. */
  max-height: var(--kb-hero-max);
}

.kb-utama-gambar__img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: var(--kb-hero-max);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.kb-listing__identitas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: var(--kb-space-3) 0 0;

  font-size: var(--kb-size-data);
  line-height: var(--kb-lh-data);
  color: var(--kb-ink-2);
}

.kb-listing__kode {
  font-variant-numeric: tabular-nums;
  font-weight: var(--kb-weight-medium);
  white-space: nowrap;
}

/* Garis vertikal tipis sebagai pemisah, bukan koma. DESIGN.md > Shapes:
   garis adalah elemen bentuk yang utama. */
.kb-listing__pemisah {
  display: inline-block;
  width: var(--kb-hairline);
  height: 0.9em;
  margin-inline: var(--kb-space-3);
  background: var(--kb-rule-strong);
}

.kb-listing__status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space-2);
  margin-top: var(--kb-space-4);
}

/* Satuan pada angka harga: "Rp" di depan, "M"/"jt" di belakang, dan "/m²"
   yang menempel di belakang angka.

   MASIH DIPAKAI meski kartu lama sudah dihapus - kb_harga_markup() di
   inc/fields-helpers.php mencetak `.kb-harga__satuan`, dan bar melekat
   ponsel mencetak `.kb-harga__per`. Keduanya sempat ikut terhapus saat
   membersihkan CSS kartu lama, dan ketahuan dari memeriksa pemakaiannya di
   PHP - bukan dari membaca CSS-nya.

   Lantai 15px: `0.7em` relatif terhadap induk, dan di induk terkecil ia
   jatuh ke ukuran yang gagal terbaca. */
.kb-harga__satuan {
  font-size: max(0.7em, 15px);
  font-weight: var(--kb-weight-medium);
  opacity: 0.72;
}

.kb-harga__per {
  font-size: max(0.6em, 15px);
  font-weight: var(--kb-weight-medium);
  opacity: 0.72;
  margin-left: 0.15em;
}

/* --- Pelat harga --------------------------------------------------------- */

/* Pembalikan nada, bukan bayangan: inilah cara DESIGN.md menaikkan sesuatu
   di atas cream. Sekaligus satu-satunya rumah yang sah untuk emas di layar
   pertama halaman ini.

   GRID, bukan flex-wrap. Flex membuat lebar tiap blok bergantung pada isinya
   lalu menyusut atau membungkus sendiri, dan angka harga adalah token panjang
   yang tidak punya titik putus - "183.250.000.000" tidak bisa dipenggal di
   mana pun. Kombinasi itu membuat tata letaknya bergantung pada panjang
   angka, yang berbeda tiap listing. Grid memberi lajur berukuran tetap:
   hasilnya sama untuk kavling 850 juta dan kavling 183 miliar. */
.kb-plat-harga {
  display: grid;
  /* SATU lajur, di semua lebar.

     Dulu dua lajur di desktop, dan itu benar selama pelat ini melebar penuh.
     Sejak ia pindah ke rel selebar 21rem, dua lajur berarti "Rp 25.000.000"
     dan "Rp 183.250.000.000" berebut 288px - keduanya angka tanpa titik
     putus, jadi yang terjadi bukan membungkus melainkan saling menimpa.

     Menumpuk juga lebih benar secara hierarki: harga per m2 di atas, harga
     total di bawahnya, urutan baca yang sama dengan kartu dan bar ponsel. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kb-space-4);

  padding: var(--kb-space-5);
  border-radius: var(--kb-radius);
  background: var(--kb-surface-plate);
  color: var(--kb-on-navy);
}

/* minmax(0, ...) di atas mencabut min-width:auto yang jadi bawaan item grid.
   Tanpa itu, satu angka panjang bisa memaksa lajurnya lebih lebar daripada
   pelatnya sendiri dan mendorong isi keluar dari layar. */
.kb-plat-harga > * {
  min-width: 0;
}

.kb-plat-harga__label {
  margin: 0 0 var(--kb-space-2);
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
  /* "Harga / m²" tidak boleh patah jadi dua baris di rel yang sempit -
     superskripnya membuat baris keduanya terlihat seperti kesalahan render. */
  white-space: nowrap;
  color: var(--kb-on-navy-2);
}

body.kb-body .kb-plat-harga__label sup {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
}

/* HARGA PER M2: satu-satunya segel emas di pelat ini (DATA-MODEL.md §3.3
   aturan 4). Dia angka yang dinilai orang lebih dulu di pasar kavling
   komersial, karena hanya dia yang sebanding antar listing. */
/* Angka utama pelat sekarang LUAS TANAH, pada peran Ukuran - peran yang
   sama yang dipakai luas di kartu. Tangga kontrasnya identik di kedua
   tempat, jadi mata yang pindah dari kartu ke halaman detail tidak perlu
   belajar urutan baru. Emas: satu pelat, satu segel. */
.kb-plat-harga__nilai {
  margin: 0;
  font-family: var(--kb-font-body); /* The Serif Ceiling Rule */
  font-size: var(--kb-size-ukuran);
  font-weight: var(--kb-weight-semibold);
  line-height: var(--kb-lh-price);
  letter-spacing: var(--kb-tracking-price);
  font-variant-numeric: tabular-nums;
  text-align: left;
  color: var(--kb-seal);
  white-space: nowrap;
}

/* Satuan "m²" diturunkan seperti "Rp" pada harga, supaya angkanya memimpin. */
.kb-plat-harga__satuan {
  font-size: max(0.5em, 15px);
  font-weight: var(--kb-weight-medium);
  opacity: 0.72;
  margin-left: 0.2em;
}

/* Angka kedua: harga per m2. Cream penuh, peran Price - tepat satu tingkat
   di bawah luas, tepat satu tingkat di atas harga total. */
.kb-plat-harga__kedua {
  padding-top: var(--kb-space-4);
  border-top: var(--kb-hairline) solid rgba(var(--kb-cream-rgb), 0.18);
}

.kb-plat-harga__nilai-kedua {
  margin: 0;
  font-family: var(--kb-font-body);
  font-size: var(--kb-size-price);
  font-weight: var(--kb-weight-semibold);
  line-height: var(--kb-lh-price);
  letter-spacing: var(--kb-tracking-price);
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: nowrap;
  color: var(--kb-on-navy);
}

/* "Harga on request" menempati peran tipografi dan tinggi baris yang sama
   persis - tata letak tidak bergeser antara listing yang menampilkan harga
   dan yang tidak. Warnanya cream, bukan emas: yang disegel adalah angka,
   dan di sini tidak ada angka. */
.kb-plat-harga__diminta {
  color: var(--kb-on-navy);
}

/* Harga total sebagai pendamping. Cream penuh, BUKAN emas kedua -
   The Rare Seal Rule: satu pelat, satu segel.

   Cream penuh dan bukan cream turun opasitas, karena angka ini punya tugas
   nyata: menyaring anggaran. Orang berpagu 5 M harus bisa mencoret listing
   183 M dalam sekali lirik, dan itu mustahil kalau angkanya diredupkan
   sampai jadi keterangan kaki. Turun peringkat, bukan turun keterbacaan. */
/* Bertumpuk, jadi pemisahnya garis horizontal - bukan garis vertikal yang
   dulu memisahkan dua lajur. */
.kb-plat-harga__banding {
  padding-top: var(--kb-space-4);
  border-top: var(--kb-hairline) solid rgba(var(--kb-cream-rgb), 0.18);
}

/* Angka ketiga: harga total. Peran Data dan cream DITURUNKAN opasitasnya -
   satu tingkat di bawah harga per m2, sesuai The Size-First Rule. Ia tetap
   dicetak penuh tanpa disingkat: pembeli lahan membandingkan digit. */
.kb-plat-harga__nilai-banding {
  margin: 0;
  font-size: var(--kb-size-data);
  font-weight: var(--kb-weight-medium);
  line-height: var(--kb-lh-price);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--kb-on-navy-2);
}



/* Status PPN. Keterangan kaki di dalam pelat harga: peran Label, cream
   diturunkan opasitasnya - BUKAN emas. Emas di pelat ini sudah dipakai
   angka harga per m2, dan The Rare Seal Rule melarang segel kedua di
   bidang yang sama. */
.kb-plat-harga__ppn {
  margin: var(--kb-space-4) 0 0;
  padding-top: var(--kb-space-3);
  border-top: var(--kb-hairline) solid rgba(var(--kb-cream-rgb), 0.18);

  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
  color: var(--kb-on-navy-2);
}



/* Penanda: garis tepi saja, tanpa bidang warna. Bidang berwarna di sini akan
   berebut perhatian dengan lencana status DIJUAL yang berupa pelat navy -
   dan status lebih penting daripada cara bayar. */
.kb-tanda {
  display: inline-block;
  padding: 0 var(--kb-space-2);
  border: var(--kb-hairline) solid var(--kb-rule-strong);
  border-radius: var(--kb-radius-sm);

  font-family: var(--kb-font-body);
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  line-height: 1.7;
  color: var(--kb-ink-2);
  white-space: nowrap;
}



.kb-plat-harga__nego {
  margin: var(--kb-space-2) 0 0;
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
  color: var(--kb-on-navy-2);
}

/* --- Empat angka kunci --------------------------------------------------- */

/* DUA LAJUR di semua lebar, bukan auto-fit.

   Empat angka kunci kini tinggal di rel selebar 21rem, dan auto-fit di sana
   akan runtuh jadi satu lajur - empat baris yang boros tinggi, padahal rel
   harus muat di layar tanpa menggulir supaya sticky-nya berguna. Dua lajur
   tetap juga membuat aturan garis di bawah bisa pasti: batas lajur selalu
   jatuh di sel genap, tidak berubah-ubah mengikuti lebar. */
.kb-kunci {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: var(--kb-space-5) 0 0;
  border-top: var(--kb-hairline) solid var(--kb-rule);
  border-bottom: var(--kb-hairline) solid var(--kb-rule);
}

.kb-kunci__sel {
  padding: var(--kb-space-4) var(--kb-space-4) var(--kb-space-4) 0;
}

/* Garis vertikal memisahkan dua lajur; garis horizontal memisahkan dua baris.
   Sel ganjil tidak diberi garis kiri supaya tepi kiri tetap rata dengan sisa
   halaman. */
.kb-kunci__sel:nth-child(2n) {
  padding-left: var(--kb-space-4);
  border-left: var(--kb-hairline) solid var(--kb-rule);
}

.kb-kunci__sel:nth-child(n + 3) {
  border-top: var(--kb-hairline) solid var(--kb-rule);
}

.kb-kunci__label {
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
  color: var(--kb-ink-2);
}

.kb-kunci__nilai {
  margin: var(--kb-space-2) 0 0;
  font-size: var(--kb-size-title);
  font-weight: var(--kb-weight-semibold);
  line-height: var(--kb-lh-title);
  color: var(--kb-ink);
}

.kb-kunci__nilai--angka {
  font-variant-numeric: tabular-nums;
}

body.kb-body .kb-kunci__nilai sup {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
}

/* --- Blok isi ------------------------------------------------------------ */

.kb-blok {
  margin-top: var(--kb-space-7);
}

.kb-blok__judul {
  margin: 0 0 var(--kb-space-4);
  font-family: var(--kb-font-display);
  font-size: var(--kb-size-headline);
  font-weight: var(--kb-weight-regular);
  line-height: var(--kb-lh-headline);
  color: var(--kb-ink);
}

/* --- Highlight ----------------------------------------------------------- */

.kb-sorot__daftar {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--kb-hairline) solid var(--kb-rule);
}

/* Butir ditandai garis rambut, bukan bullet bulat - bahasa bentuknya persegi
   dan tegas. */
.kb-sorot__butir {
  padding: var(--kb-space-3) 0;
  border-bottom: var(--kb-hairline) solid var(--kb-rule);
  font-size: var(--kb-size-body);
  line-height: var(--kb-lh-body);
  color: var(--kb-ink);
  max-width: var(--kb-measure);
}

/* --- Prosa --------------------------------------------------------------- */

.kb-prosa__isi {
  max-width: var(--kb-measure);
  font-size: var(--kb-size-body);
  line-height: var(--kb-lh-body);
  color: var(--kb-ink-2);
}

.kb-prosa__isi > * + * {
  margin-top: var(--kb-space-4);
}

/* --- Tabel spesifikasi --------------------------------------------------- */

.kb-spek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--kb-space-4) var(--kb-space-7);
  align-items: start;
}

/* Judul seksi merentang penuh di atas kedua tabel. */
.kb-spek > .kb-blok__judul {
  grid-column: 1 / -1;
}

.kb-tabel {
  width: 100%;
  border-collapse: collapse;
  /* Angka di lajur kanan tidak boleh menyusut mengikuti sisa ruang; label di
     kiri yang mengalah dan membungkus. */
  table-layout: fixed;
}

/* WAJIB. Astra memasang kerangkeng pada SETIAP tabel lewat main.min.css:
   `table,td,th{border:1px solid var(--ast-border-color)}` plus
   `td,th{padding:.7em 1em;border-width:0 1px 1px 0}`.
   Itu menggambar kotak grid yang bukan bahasa bentuk sistem ini - DESIGN.md
   memakai garis rambut horizontal sebagai pemisah baris, bukan kotak.

   Ini juga penyebab nilai tabel terpotong di tepi kanan: padding kanan
   dinolkan oleh aturan kita sendiri di bawah, sementara border kanan milik
   Astra tetap berdiri, sehingga angka rata kanan menempel dan superskrip
   pada "7.330 m2" menembus garis itu. Border-nya yang salah, bukan
   paddingnya - jadi border-nya yang dicabut. */
.kb-tabel,
body.kb-body .kb-tabel th,
body.kb-body .kb-tabel td {
  border: 0;
}

.kb-tabel__judul {
  padding-bottom: var(--kb-space-2);
  border-bottom: var(--kb-hairline) solid var(--kb-rule-strong);

  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
  text-align: left;
  color: var(--kb-ink-2);
}

.kb-tabel__baris {
  border-bottom: var(--kb-hairline) solid var(--kb-rule);
}

.kb-tabel__kunci {
  /* Dengan table-layout: fixed, lebar baris pertama yang menetapkan lajur.
     Label boleh membungkus; angka tidak. */
  width: 58%;
  padding: var(--kb-space-3) var(--kb-space-4) var(--kb-space-3) 0;
  font-size: var(--kb-size-data);
  font-weight: var(--kb-weight-regular);
  line-height: var(--kb-lh-data);
  text-align: left;
  color: var(--kb-ink-2);
}

/* Rata kanan: lajur ini seluruhnya angka bersatuan tetap dan label pendek,
   dan perataannya yang membentuk kolom untuk dibandingkan sekali lirik. */
.kb-tabel__nilai {
  padding: var(--kb-space-3) 0;
  font-size: var(--kb-size-data);
  font-weight: var(--kb-weight-medium);
  line-height: var(--kb-lh-data);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--kb-ink);
}

body.kb-body .kb-tabel__nilai sup {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
}

/* --- Chip ---------------------------------------------------------------- */

.kb-chip__daftar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Di atas cream, aksen selalu navy - The Cream Ground Rule. Tidak ada emas
   di sini. Radius keluarga yang sama, bukan pil bulat penuh. */
.kb-chip {
  padding: var(--kb-space-2) var(--kb-space-3);
  border: var(--kb-hairline) solid var(--kb-rule-strong);
  border-radius: var(--kb-radius-sm);

  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
  color: var(--kb-ink);
}

/* --- Media --------------------------------------------------------------- */

/* Grid galeri yang tidak pernah menyisakan gambar yatim, untuk jumlah BERAPA
   PUN - 1, 2, 5, atau 20.

   `repeat(auto-fill, minmax(16rem, 1fr))` yang lama gagal justru karena ia
   pintar: jumlah lajurnya berubah mengikuti lebar, jadi tidak ada cara
   mengetahui sisa baris terakhir. Lima gambar di lajur 1190px jatuh jadi
   4 + 1, dan yang satu itu berdiri sendirian setinggi gambar penuh.

   Diganti jumlah lajur TETAP, lalu dua aturan yang melebarkan gambar terakhir
   mengisi sisa barisnya:

     sisa 1 gambar  -> melebar 3 lajur
     sisa 2 gambar  -> yang terakhir melebar 2 lajur

   n=1  [1 1 1]
   n=2  [1 2 2]
   n=3  [1 2 3]
   n=4  [1 2 3] [4 4 4]
   n=5  [1 2 3] [4 5 5]
   n=20 ... [19 20 20]

   Tidak ada JavaScript, tidak ada penghitungan di PHP: aritmetikanya ada di
   selector `nth-child` itu sendiri, jadi ia tetap benar kalau Chris menambah
   atau menghapus foto tanpa menyentuh kode.                                 */
.kb-media__grid {
  display: grid;
  gap: var(--kb-space-3);
  grid-template-columns: repeat(3, 1fr);
}

.kb-media__grid > :last-child:nth-child(3n - 2) {
  grid-column: span 3;
}

.kb-media__grid > :last-child:nth-child(3n - 1) {
  grid-column: span 2;
}

.kb-media__gambar {
  margin: 0;
}

/* Rasio dikunci supaya tinggi tiap baris grid seragam. Tanpa ini, satu foto
   potret di antara foto lanskap akan menarik tinggi seluruh barisnya dan
   merusak ritme yang baru saja dijaga aturan nth-child di atas. */
.kb-media__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--kb-hairline) solid var(--kb-rule);
  border-radius: var(--kb-radius-sm);
}

/* --- Tombol WhatsApp ----------------------------------------------------- */

.kb-listing__aksi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kb-space-4);
  margin-top: var(--kb-space-5);
}

/* Di dalam rel yang sempit, tombol mengisi lebar penuh dan kalimat pendukung
   turun ke bawahnya. Ini satu-satunya tindakan yang diminta seluruh situs;
   di lajur selebar 21rem ia tidak perlu berbagi baris dengan apa pun. */
.kb-listing__rel .kb-listing__aksi .kb-wa {
  flex-basis: 100%;
  text-align: center;
}

/* Blok pertama di lajur isi tidak perlu jarak atas: jarak grid sudah
   mengurusnya, dan menumpuk keduanya melubangi halaman. */
.kb-listing__isi > .kb-blok:first-child {
  margin-top: 0;
}

.kb-listing__aksi--tutup {
  margin-top: var(--kb-space-7);
  padding-top: var(--kb-space-5);
  border-top: var(--kb-hairline) solid var(--kb-rule);
}

.kb-listing__aksi-teks {
  margin: 0;
  font-size: var(--kb-size-data);
  line-height: var(--kb-lh-data);
  color: var(--kb-ink-2);
}

/* SATU BENTUK UNTUK SEMUA TOMBOL WHATSAPP (diseragamkan 2026-08-14).

   Sebelumnya ada dua bentuk yang bertentangan: `--utama` pelat navy dengan
   teks emas, `--segel` bidang emas dengan teks navy, plus satu penimpaan
   lagi di kotak /tentang/. Tiga tampilan untuk satu tindakan yang sama.
   Ajakan bertindak yang berganti rupa antar halaman berhenti terbaca sebagai
   tombol yang sama, dan di situs yang hanya punya SATU jalur konversi itu
   kerugian yang tidak sepadan dengan alasan apa pun.

   Bentuk yang menang: LATAR EMAS, TEKS NAVY, GARIS TEPI NAVY.

   GARIS TEPINYA WAJIB, bukan hiasan. Emas di atas cream hanya 1,42:1 -
   angka yang sama yang membuat The Gold-on-Navy Rule melarang teks emas di
   atas cream. Untuk bidang tombol, ambangnya bukan 4,5:1 melainkan 3:1
   (WCAG 1.4.11, kontras komponen antarmuka), dan 1,42:1 gagal telak juga di
   sana: tanpa garis tepi, tepi tombol lenyap ke dalam latar dan yang tersisa
   hanya teks navy melayang. Garis navy di atas cream = 11,09:1, jadi garis
   itulah yang memenuhi syaratnya - bukan bidang emasnya.

   Teks navy di atas emas = 7,84:1 (AAA).

   Ini AMANDEMEN terhadap DESIGN.md > Do's yang dulu berbunyi "pelat navy
   dengan teks emas". DESIGN.md sudah diperbarui, bukan disimpang di sini. */
.kb-wa {
  display: inline-block;
  padding: var(--kb-space-3) var(--kb-space-5);
  background: var(--kb-gold);
  color: var(--kb-navy);
  border: var(--kb-hairline) solid var(--kb-navy);
  border-radius: var(--kb-radius);

  font-family: var(--kb-font-body);
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-semibold);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  transition: background-color var(--kb-duration) var(--kb-ease),
              border-color var(--kb-duration) var(--kb-ease);
}

/* Modifier dipertahankan supaya template tidak perlu diubah, tapi keduanya
   kini mewarisi bentuk yang sama dari .kb-wa. Yang tersisa di sini hanya
   cincin fokus, yang memang harus berbeda menurut latar tempat tombol
   berdiri - The Visible Focus Rule. */
.kb-wa--utama {
  background: var(--kb-gold);
  color: var(--kb-navy);
  border-color: var(--kb-navy);
}

body.kb-body .kb-wa--utama {
  color: var(--kb-navy);
}

.kb-wa:hover {
  /* Bukan pengangkatan: nada emas turun sedikit, garisnya tetap. */
  background: var(--kb-gold-tekan);
}

/* Di atas cream, cincin fokus navy. */
.kb-wa--utama:focus-visible {
  outline: var(--kb-focus-width) solid var(--kb-focus-color);
  outline-offset: var(--kb-focus-offset);
}

/* --- Bar melekat di ponsel ----------------------------------------------- */

/* Disembunyikan di desktop. Ditampilkan hanya di bawah 48rem, di bagian
   media query paling bawah file ini. */
.kb-wa-bar {
  display: none;
}

.kb-wa-bar__isi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kb-space-4);

  max-width: var(--kb-container);
  margin-inline: auto;
  padding: var(--kb-space-3) var(--kb-gutter);
}

/* Dua baris bertumpuk: harga per m2 di atas sebagai angka utama, harga total
   ringkas di bawahnya. Ditumpuk, bukan disejajarkan lalu disembunyikan di
   layar sempit - menumpuk selalu muat, jadi tidak ada ambang lebar yang
   ditebak dan bisa meleset di ponsel yang belum pernah diuji.
   Hierarki yang sama dengan kartu dan pelat - DATA-MODEL.md §3.3 aturan 4. */
.kb-wa-bar__harga {
  display: flex;
  flex-direction: column;
  gap: var(--kb-space-1);
  min-width: 0;
  margin: 0;
  font-variant-numeric: tabular-nums;
  /* Cream, bukan emas. Segel di bar ini dipegang tombolnya. */
  color: var(--kb-on-navy);
}

/* Baris pertama bar melekat = LUAS, angka pemimpin. Peran Title, bukan
   Ukuran: bar ini setinggi dua baris di kaki layar, dan angka 44px akan
   mendorong tombolnya keluar. Yang harus sama dengan kartu dan pelat adalah
   URUTAN dan tangga kontrasnya, bukan ukuran mutlaknya. */
.kb-wa-bar__utama {
  font-size: var(--kb-size-title);
  font-weight: var(--kb-weight-semibold);
  line-height: var(--kb-lh-price);
  white-space: nowrap;
  color: var(--kb-seal);
}

/* Baris kedua: harga per m2. Cream penuh - satu tingkat di bawah luas,
   satu tingkat di atas total. */
.kb-wa-bar__kedua {
  font-size: var(--kb-size-data);
  font-weight: var(--kb-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--kb-on-navy);
}

.kb-wa-bar__total {
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  line-height: 1;
  white-space: nowrap;
  color: var(--kb-on-navy-2);
}

.kb-wa-bar__diminta {
  font-size: var(--kb-size-data);
  font-weight: var(--kb-weight-medium);
  color: var(--kb-on-navy-2);
}

/* Sama persis dengan .kb-wa--utama sekarang - itulah maksud penyeragaman.
   Bedanya cuma latar tempatnya berdiri: tombol ini duduk di atas pelat navy
   bar melekat, jadi garis tepi navy-nya lebur ke pelat dan yang terlihat
   bidang emasnya. Tidak apa-apa: di atas navy, bidang emas sudah 7,84:1
   sendirian, dan garis tepi itu memang cuma dibutuhkan di atas cream. */
.kb-wa--segel {
  background: var(--kb-gold);
  color: var(--kb-navy);
  border-color: var(--kb-navy);
}

body.kb-body .kb-wa--segel {
  color: var(--kb-navy);
}

.kb-wa--segel:focus-visible {
  outline: var(--kb-focus-width) solid var(--kb-focus-color-on-navy);
  outline-offset: var(--kb-focus-offset);
}

/* --- Kavling lain -------------------------------------------------------- */

.kb-lain {
  padding-top: var(--kb-space-6);
  border-top: var(--kb-hairline) solid var(--kb-rule);
}

.kb-lain__semua {
  margin: var(--kb-space-5) 0 0;
  font-size: var(--kb-size-label);
  font-weight: var(--kb-weight-medium);
  letter-spacing: var(--kb-tracking-label);
  text-transform: uppercase;
}

body.kb-body .kb-lain__semua a {
  color: var(--kb-ink);
  text-decoration: none;
  border-bottom: var(--kb-hairline) solid var(--kb-rule-strong);
}

body.kb-body .kb-lain__semua a:hover {
  border-bottom-color: var(--kb-ink);
}

/* --- Tablet ke bawah: menu jadi lipatan ---------------------------------- */

@media (max-width: 48rem) {
  .kb-nav-tombol {
    display: block;
  }

  .kb-header__isi {
    flex-wrap: wrap;
  }

  .kb-nav {
    flex-basis: 100%;
    /* Ditutup lewat grid-template-rows, bukan display:none, supaya
       transisinya bisa berjalan dan isinya tetap ada di DOM. */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--kb-duration) var(--kb-ease);
  }

  .kb-nav > * {
    overflow: hidden;
  }

  .kb-nav--terbuka {
    grid-template-rows: 1fr;
  }

  .kb-nav__daftar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kb-space-3);
    padding-top: var(--kb-space-4);
  }

  /* --- Bar WhatsApp melekat -------------------------------------------- */

  /* Muncul hanya di sini, bukan lewat pengecekan user agent: lebar layar
     yang menentukan, dan itu urusan CSS. */
  .kb-wa-bar {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;

    background: var(--kb-surface-plate);
    color: var(--kb-on-navy);
    border-top: var(--kb-hairline) solid rgba(var(--kb-cream-rgb), 0.18);

    /* Layar berponi: isi bar tetap di atas area aman, tidak tersembunyi di
       balik indikator home. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Ruang di dasar halaman supaya bar tidak menutupi baris terakhir footer.
     Ditambahkan ke padding FOOTER, bukan ke body: padding di body akan
     memunculkan pita cream di bawah pelat navy footer, dan bar yang
     melayang di atas pita itu akan terlihat seperti salah tempel.
     Dibatasi ke single-kavling karena hanya di sana bar-nya ada. */
  body.single-kavling .kb-footer {
    padding-bottom: var(--kb-space-8);
  }

  /* --- Halaman detail: susun ulang ------------------------------------- */

  .kb-listing__judul {
    max-width: none;
  }

  /* Galeri jadi dua lajur, dengan aritmetika sisa yang setara: sisa satu
     gambar melebar dua lajur, jadi baris terakhir tetap tidak pernah ragged. */
  .kb-media__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kb-media__grid > :last-child:nth-child(3n - 2),
  .kb-media__grid > :last-child:nth-child(3n - 1) {
    grid-column: auto;
  }

  .kb-media__grid > :last-child:nth-child(2n - 1) {
    grid-column: span 2;
  }

  .kb-listing__aksi .kb-wa {
    /* Target sentuh selebar kolom: di ponsel ini satu-satunya jalur
       konversi yang terlihat sebelum bar muncul. */
    flex-basis: 100%;
    text-align: center;
  }
}

/* --- Ponsel -------------------------------------------------------------- */

/* Dua kartu per baris, lalu satu. Yang berubah cuma basis lebarnya - aturan
   pemusatan sisa baris berlaku sendirinya di setiap breakpoint, karena ia
   milik flex container, bukan aturan nth-child yang harus ditulis ulang. */
@media (max-width: 64rem) {
  .kb-grid > * {
    flex-basis: calc((100% - var(--kb-space-4)) / 2);
  }
}

@media (max-width: 40rem) {
  .kb-grid > * {
    flex-basis: 100%;
  }
}

/* Blok penyesuaian kartu di layar sempit DIHAPUS 2026-08-14.

   Isinya tiga aturan yang semuanya sisa dari era kartu dua lajur:
   menumpuk badan kartu jadi satu lajur, dan mengembalikan `.kb-fakta` ke
   rata kiri. Keduanya milik kartu lama yang sudah dihapus.

   Yang terakhir itu bukan sekadar mubazir, ia MERUSAK: sejak baris fakta
   jadi pasangan label-kiri/nilai-kanan selebar kartu, `justify-content:
   start` membuat "LEBAR MUKA 55 m" menggumpal di kiri hanya di bawah 480px,
   sementara di atas 480px ia melebar penuh. Satu komponen dengan dua
   perilaku berbeda tanpa alasan - dan yang ponsel justru yang salah. */

/* ==========================================================================
   KARTU LISTING - DESAIN v6 (Claude Design)

   Sumbernya di repo: web/kavlingbisnis/design/kb-cards.css. Blok ini
   TERJEMAHANNYA - warna dan bentuk diambil dari token kita, bukan diketik
   ulang sebagai hex, supaya kartu ini ikut berubah kalau paletnya berubah.

   Semua selector diawali `body.kb-body` - The Astra-Always-Wins Rule. Astra
   memancarkan CSS 0,2,0 dan selector satu kelas akan selalu kalah; kartu
   lama kalah persis begitu dan tampil putih berminggu-minggu.
   ========================================================================== */

:root {
  /* Nada turunan yang khas kartu ini dan tidak ada di palet dasar. Ketiganya
     turunan cream, bukan warna keempat: DESIGN.md mengikat tiga warna. */
  --kb-cream-tua:    #ede6d6;   /* pita PER M2 */
  --kb-cream-lembar: #ece7dc;   /* letterbox lembar pemasaran */
  --kb-navy-tekan:   #0e2438;   /* hover CTA navy */

  /* Tepi kartu: navy 50%, lebih tegas daripada --kb-rule-strong (30%).
     Kartu sewarna halaman, jadi garis inilah satu-satunya yang memisahkan
     keduanya - ia harus memikul tugas itu sendirian. */
  --kb-tepi-kartu: rgba(var(--kb-navy-rgb), 0.5);

  --kb-kartu-lebar: 332px;

  /* Lebar isi halaman detail dan pelat harganya. Dari berkas desain. */
  --kbd-lebar: 1180px;
  --kbd-plat:   340px;

  /* Mono hanya untuk penanda pendek: kode listing, label kecil. Stack sistem,
     jadi ia TIDAK menambah satu pun unduhan font. */
  --kb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

   `repeat(auto-fill, 332px)` - lebar kartu DIPATOK, tidak melar.

   Seluruh isi kartu ditala untuk lebar itu: angka luas 34px, judul berlantai
   dua baris, highlight berlantai tiga poin. `minmax(332px, 1fr)` akan
   melebarkan kartu jadi ~400px di layar lebar dan menghancurkan ketiganya.

   `justify-content: center` - KEPUTUSAN SADAR, bukan bawaan.

   Tanpa itu, grid mengisi dari kiri dan menyisakan lubang di kanan: di
   kontainer 1248px, tiga kartu memakai 1044px dan menyisakan 204px kosong
   yang terbaca seperti kolom keempat yang gagal dimuat. Center juga yang
   membuat baris terakhir yang tidak penuh berdiri di tengah - The
   No-Orphan-Card Rule, aturan yang sudah berlaku di situs ini sebelum kartu
   ini datang.

   `grid-template-rows: subgrid` pada kartu mengunci tinggi tiap pita antar
   kartu sebaris, sehingga pita LUAS semua kartu berdiri di garis yang sama
   meski judulnya beda jumlah baris. Ada fallback untuk browser tanpa
   subgrid di bawah. */
body.kb-body .kb-kartu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--kb-kartu-lebar));
  grid-template-rows: auto auto auto auto auto auto auto auto;
  justify-content: center;
  gap: var(--kb-space-5);
  align-items: start;
}

body.kb-body .kb-kartu-grid--satu {
  grid-template-columns: var(--kb-kartu-lebar);
}

body.kb-body .kb-card {
  grid-row: span 8;
  display: grid;
  grid-template-rows: subgrid;

  /* `padding: 0` WAJIB, bukan kerapian. Kartu ini <article> ber-post_class,
     jadi Astra menempelkan `.ast-article-post` padanya dan mencetak padding
     besar dari setelan Customizer. Tanpa baris ini seluruh isi kartu
     terdorong ke tengah dan pita LUAS berhenti menyentuh tepi kartu -
     terlihat persis seperti kartu yang gagal dimuat. Ketahuan dari tangkapan
     layar, bukan dari membaca CSS. */
  padding: 0;
  margin: 0;

  /* Kartu sewarna halaman; yang memisahkan garis tepi, bukan bayangan. */
  background-color: var(--kb-surface);
  border: 1.5px solid var(--kb-tepi-kartu);
  border-radius: 6px;
  overflow: hidden;
  font-family: var(--kb-font-body);
  color: var(--kb-ink);
}

@supports not (grid-template-rows: subgrid) {
  body.kb-body .kb-kartu-grid {
    grid-template-rows: none;
    align-items: stretch;
  }

  body.kb-body .kb-card {
    grid-row: auto;
    grid-template-rows: none;
  }
}

/* --- Media: kotak selalu 16:9, isinya yang menyesuaikan ------------------- */

body.kb-body .kb-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e7e2d6 repeating-linear-gradient(135deg, rgba(var(--kb-navy-rgb), 0.07) 0 8px, transparent 8px 16px);
  border-bottom: 1px solid var(--kb-rule-strong);
}

body.kb-body .kb-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lembar pemasaran developer: JANGAN dipotong. Ia memuat harga, teks, dan
   peta petak yang justru paling menjelaskan. */
body.kb-body .kb-card__media--lembar {
  background: var(--kb-cream-lembar);
}

body.kb-body .kb-card__media--lembar .kb-card__img {
  object-fit: contain;
}

/* Tanpa gambar: bidang navy yang disengaja, bukan lubang. */
body.kb-body .kb-card__media--kosong {
  background: var(--kb-surface-plate);
}

body.kb-body .kb-card__kosong-teks {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
}

body.kb-body .kb-card__kosong-rule {
  display: block;
  width: 34px;
  height: 2px;
  background: var(--kb-seal);
  margin-bottom: 10px;
}

body.kb-body .kb-card__kosong-label {
  display: block;
  font-weight: var(--kb-weight-semibold);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--kb-seal);
}

body.kb-body .kb-card__kosong-sub {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--kb-on-navy-2);
}

/* --- Badge ---------------------------------------------------------------- */

body.kb-body .kb-badge {
  display: block;
  padding: 6px 11px;
  border-radius: var(--kb-radius);
  font-family: var(--kb-font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
}

body.kb-body .kb-card__media > .kb-badge {
  position: absolute;
  left: 12px;
  top: 12px;
}

body.kb-body .kb-badge--dijual {
  background: var(--kb-surface-plate);
  color: var(--kb-on-navy);
}

/* Bidang emas dengan garis tepi navy - The Gold-Never-Carries-Contrast Rule:
   emas jadi bidang, navy yang menanggung kontras. */
body.kb-body .kb-badge--disewakan {
  background: var(--kb-gold);
  color: var(--kb-navy);
  border: 1px solid var(--kb-navy);
}

/* --- Rel dan judul -------------------------------------------------------- */

body.kb-body .kb-card__rail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px 0;
  font-family: var(--kb-font-body);
  font-weight: var(--kb-weight-semibold);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1em;
}

/* Kode listing tidak pernah dipenggal - ia penanda yang dibaca sebagai satu
   satuan dan ikut ke prefill WhatsApp. */
body.kb-body .kb-card__kode {
  white-space: nowrap;
  color: var(--kb-ink-3);
  font-variant-numeric: tabular-nums lining-nums;
}

body.kb-body .kb-card__judul {
  margin: 0;
  padding: 6px 15px 12px;
  font-family: var(--kb-font-display);
  font-weight: var(--kb-weight-semibold);
  font-size: 23px;
  line-height: 1.2;
  min-height: 2.4em;              /* lantai dua baris, supaya pita sejajar */
  text-wrap: pretty;
}

body.kb-body .kb-card__judul a {
  color: inherit;
  text-decoration: none;
}

body.kb-body .kb-card__judul a:hover {
  color: var(--kb-navy-tekan);
  text-decoration: underline;
}

/* Cincin fokus yang jelas. Desain aslinya hanya mengganti warna latar pada
   :focus - itu tidak cukup: pengguna keyboard butuh penanda yang terlihat
   TANPA membandingkan dua nada navy yang berdekatan. */
body.kb-body .kb-card__judul a:focus-visible {
  outline: var(--kb-focus-width) solid var(--kb-focus-color);
  outline-offset: var(--kb-focus-offset);
  border-radius: var(--kb-radius-sm);
}

/* --- Tangga kontras: LUAS (navy) -> PER M2 (cream tua) -> TOTAL (polos) --- */

body.kb-body .kb-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 15px;
  border-top: 1px solid var(--kb-rule);
}

body.kb-body .kb-row__label {
  font-family: var(--kb-font-body);
  font-weight: var(--kb-weight-medium);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.13em;
  color: var(--kb-ink-2);
  white-space: nowrap;
}

body.kb-body .kb-row--luas {
  padding: 12px 15px;
  border-top: 1px solid var(--kb-rule-strong);
  background: var(--kb-surface-plate);
}

body.kb-body .kb-row--luas .kb-row__label {
  color: var(--kb-on-navy-2);
}

/* ANGKA LUAS: Cormorant, dan WAJIB lining-nums.

   Cut yang kita self-host memakai OLDSTYLE FIGURES sebagai bawaan - diperiksa
   langsung ke berkas woff2: digit 3, 5, 7, dan 9 turun sampai -275 di bawah
   garis dasar sementara 6 naik ke 661. Tanpa paksaan ini, "5.568" tampil
   naik-turun seperti teks berjalan, justru pada angka yang harus memimpin
   kartu. Font ini punya fitur `lnum` dan tidak punya `onum`, yang
   mengonfirmasi bawaannya memang oldstyle.

   TIDAK tabular, mengikuti desain: tiap angka luas berdiri sendiri di pita
   navy-nya, bukan berbaris jadi kolom banding. */
body.kb-body .kb-row__nilai--luas {
  font-family: var(--kb-font-display);
  font-weight: var(--kb-weight-semibold);
  font-size: 34px;
  line-height: 0.9;
  color: var(--kb-on-navy);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  white-space: nowrap;
}

body.kb-body .kb-row--perm2 {
  padding: 11px 15px;
  border-top: 1px solid var(--kb-rule-strong);
  background: var(--kb-cream-tua);
}

body.kb-body .kb-row__nilai--perm2 {
  font-family: var(--kb-font-body);
  font-weight: var(--kb-weight-semibold);
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
}

body.kb-body .kb-row--total {
  padding-bottom: 12px;
}

/* Navy penuh, bukan diturunkan - harus terbaca saat kecerahan ponsel rendah. */
body.kb-body .kb-row__nilai--total {
  font-family: var(--kb-font-body);
  font-weight: var(--kb-weight-medium);
  font-size: 15px;
  line-height: 1.2;
  color: var(--kb-ink);
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- Highlight: maksimal 3, tepat di atas CTA ----------------------------- */

body.kb-body .kb-card__highlight {
  list-style: none;
  margin: 0;
  padding: 12px 15px 14px;
  border-top: 1px solid var(--kb-rule-strong);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 78px;               /* lantai tiga poin, supaya CTA sejajar */
  box-sizing: content-box;
}

body.kb-body .kb-card__highlight li,
body.kb-body .kb-card__highlight--kosong {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

body.kb-body .kb-card__highlight span:last-child {
  font-family: var(--kb-font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--kb-ink-2);
  text-wrap: pretty;
}

body.kb-body .kb-card__highlight--kosong span:last-child {
  color: var(--kb-ink-3);
}

body.kb-body .kb-dot {
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 7px;
  background: var(--kb-navy);
}

body.kb-body .kb-card__highlight--kosong .kb-dot {
  background: var(--kb-rule-strong);
}

/* --- CTA ------------------------------------------------------------------ */

body.kb-body .kb-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  border-top: 1px solid var(--kb-rule-strong);
  background: var(--kb-surface-plate);
  color: var(--kb-on-navy);
  font-family: var(--kb-font-body);
  font-weight: var(--kb-weight-medium);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-decoration: none;
}

body.kb-body .kb-card__cta:hover {
  background: var(--kb-navy-tekan);
  color: var(--kb-on-navy);
}

/* Cincin fokus EMAS: tombol ini berdiri di dalam bidang navy, dan cincin
   navy di atas navy tidak terlihat sama sekali. The Visible Focus Rule
   menuntut penanda yang terlihat di kedua latar. `outline-offset` negatif
   supaya cincinnya masuk ke dalam bidang, bukan terpotong tepi kartu. */
body.kb-body .kb-card__cta:focus-visible {
  outline: var(--kb-focus-width) solid var(--kb-focus-color-on-navy);
  outline-offset: -4px;
}

/* --- Blok kawasan ---------------------------------------------------------

   Namanya `kb-blok-kawasan`, BUKAN `kb-kawasan` seperti di berkas desain:
   `.kb-kawasan` sudah dipakai sebagai kelas <main> di halaman taxonomy dan
   arsip. Memakai nama yang sama akan memasang garis tepi dan radius
   mengelilingi SELURUH halaman. */
body.kb-body .kb-blok-kawasan {
  background-color: var(--kb-surface);
  border: 1.5px solid var(--kb-tepi-kartu);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: var(--kb-space-5);
  font-family: var(--kb-font-body);
}

body.kb-body .kb-blok-kawasan__kepala {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--kb-surface-plate);
}

body.kb-body .kb-blok-kawasan__nama {
  margin: 0;
  font-family: var(--kb-font-display);
  font-weight: var(--kb-weight-semibold);
  font-size: 26px;
  line-height: 1.1;
  color: var(--kb-on-navy);
  text-align: left;
}

body.kb-body .kb-blok-kawasan__jumlah {
  font-weight: var(--kb-weight-semibold);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--kb-seal);
  font-variant-numeric: tabular-nums lining-nums;
}

body.kb-body .kb-blok-kawasan__isi {
  padding: 18px 20px 22px;
}

body.kb-body .kb-baris {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}

body.kb-body .kb-baris--disewakan {
  margin-top: 26px;
}

body.kb-body .kb-baris__rule {
  flex: 1;
  height: 1px;
  background: var(--kb-rule-strong);
}

body.kb-body .kb-baris__jumlah {
  font-size: 14px;
  line-height: 1;
  color: var(--kb-ink-2);
}

body.kb-body .kb-blok-kawasan__semua {
  display: block;
  padding: 14px 20px;
  border-top: 1px solid var(--kb-rule-strong);
  font-weight: var(--kb-weight-medium);
  font-size: 14px;
  line-height: 1;
  color: var(--kb-ink);
  text-decoration: none;
}

body.kb-body .kb-blok-kawasan__semua:hover {
  color: var(--kb-navy-tekan);
  text-decoration: underline;
}

body.kb-body .kb-blok-kawasan__semua:focus-visible {
  outline: var(--kb-focus-width) solid var(--kb-focus-color);
  outline-offset: calc(var(--kb-focus-offset) * -1);
}

/* --- Ponsel: satu kolom --------------------------------------------------- */

@media (max-width: 45rem) {
  :root {
    --kb-kartu-lebar: 100%;
  }

  body.kb-body .kb-kartu-grid,
  body.kb-body .kb-kartu-grid--satu {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 14px;
  }

  body.kb-body .kb-card {
    grid-row: auto;
    grid-template-rows: none;
  }

  /* Lantai tinggi dilepas: dengan satu kartu per baris tidak ada yang perlu
     disejajarkan, dan lantai yang bertahan cuma menambah ruang kosong. */
  body.kb-body .kb-card__judul {
    min-height: 0;
    font-size: 22px;
  }

  body.kb-body .kb-card__highlight {
    min-height: 0;
  }

  body.kb-body .kb-row__nilai--luas {
    font-size: 31px;
  }

  body.kb-body .kb-blok-kawasan__isi {
    padding: 16px 14px 20px;
  }

  body.kb-body .kb-blok-kawasan__nama {
    font-size: 23px;
  }
}

/* ==========================================================================
   HALAMAN DETAIL - DESAIN dari Claude Design

   Sumbernya di repo: web/kavlingbisnis/design/kb-detail.css. Blok ini
   TERJEMAHANNYA: blok `:root` desain dibuang dan variabelnya dipetakan ke
   token kita (--kb-garis jadi --kb-rule-strong, --kb-serif jadi
   --kb-font-display, dan seterusnya), lalu setiap selector diawali
   `body.kb-body` - The Astra-Always-Wins Rule.

   TIDAK dipasang sebagai berkas terpisah ber-enqueue seperti di catatan
   desain. Alasannya sama dengan kartu: CSS kartu sudah tinggal di style.css
   sejak commit 89facc3, dan memecahnya jadi tiga berkas berarti tiga
   permintaan HTTP plus satu rantai dependency yang harus dijaga. Urutan
   "kb-detail sesudah kb-cards" tetap terpenuhi - keduanya di satu berkas,
   dan blok ini ada di bawahnya.
   ========================================================================== */

/* ==========================================================================
   Halaman detail kavling — kavlingbisnis.id
   Pasangan dari kb-single.php. Memperluas kosakata kartu listing:
   tangga kontras (LUAS navy → PER M² cream tua → TOTAL polos), latar sewarna
   halaman, dipisahkan garis tepi navy, tanpa shadow, tanpa animasi, radius 6px.
   Emas hanya sebagai bidang di atas navy — tidak pernah teks/garis di latar terang.
   Kelas .kb-row / .kb-badge / .kb-dot / .kb-grid dipakai ulang dari kb-cards.css.
   Enqueue: wp_enqueue_style('kb-detail', ... , ['kb-cards'], '1.0');
   ========================================================================== */
body.kb-body .kbd {
	max-width: var(--kbd-lebar);
	margin: 0 auto;
	padding: 22px 20px 0;
	font-family: var(--kb-font-body);
	color: var(--kb-navy);
	box-sizing: border-box;
}
body.kb-body .kbd * { box-sizing: border-box; }

/* --- Remah & kepala ------------------------------------------------------- */
body.kb-body .kbd-remah { display: flex; flex-wrap: wrap; gap: 8px; font: 500 10px/1.6 var(--kb-font-mono); letter-spacing: .09em; color: rgba(24, 56, 81, .55); text-transform: uppercase; }
body.kb-body .kbd-remah a { color: inherit; text-decoration: none; }
body.kb-body .kbd-remah a:hover { color: var(--kb-navy); text-decoration: underline; }
body.kb-body .kbd-remah__kini { color: rgba(24, 56, 81, .85); }
body.kb-body .kbd-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin: 16px 0 0; }
body.kb-body .kbd-judul { margin: 0; max-width: 16ch; font: 600 46px/1.08 var(--kb-font-display); color: var(--kb-navy); text-wrap: pretty; }
body.kb-body .kbd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 14px 0 0; font: 500 11px/1 var(--kb-font-mono); letter-spacing: .09em; color: var(--kb-ink-2); }
body.kb-body .kbd-meta__kode { color: var(--kb-navy); }
body.kb-body .kbd-meta__pisah { width: 1px; height: 11px; background: rgba(24, 56, 81, .3); }
body.kb-body .kbd-badge { flex: none; margin-top: 8px; padding: 8px 14px; font-size: 10.5px; }

/* --- Dua kolom ------------------------------------------------------------ */
body.kb-body .kbd-kolom { display: grid; grid-template-columns: minmax(0, 1fr) var(--kbd-plat); gap: 40px; align-items: start; margin: 26px 0 0; }

/* --- Galeri: radio + label, tanpa JavaScript ------------------------------ */
body.kb-body .kbd-galeri__radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.kb-body .kbd-slide { margin: 0; display: none; }
body.kb-body .kbd-slide--1 { display: block; }            /* dasar sebelum radio dievaluasi */
body.kb-body .kbd-slide__kotak { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1.5px solid var(--kb-tepi-kartu); border-radius: 6px; background: var(--kb-cream-lembar); }
body.kb-body .kbd-slide__img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.kb-body .kbd-slide--lembar .kbd-slide__img { object-fit: contain; }   /* lembar pemasaran tidak boleh terpotong */
body.kb-body .kbd-slide__ket { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 2px 12px; font: 400 12.5px/1.4 var(--kb-font-body); color: var(--kb-ink-2); }
body.kb-body .kbd-slide__no { font: 600 10.5px/1 var(--kb-font-mono); letter-spacing: .08em; color: rgba(24, 56, 81, .55); }
body.kb-body .kbd-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
body.kb-body .kbd-strip__item { display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(24, 56, 81, .25); border-radius: 4px; background: var(--kb-cream-lembar); cursor: pointer; }
body.kb-body .kbd-strip__img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.kb-body .kbd-strip__item--lembar .kbd-strip__img { object-fit: contain; }

/* Sakelar slide. Daftar dienumerasi sampai 12 (KB_MAKS_GALERI). */
body.kb-body #kbd-g-1:checked  ~ .kbd-panggung .kbd-slide--1,
body.kb-body #kbd-g-2:checked  ~ .kbd-panggung .kbd-slide--2,
body.kb-body #kbd-g-3:checked  ~ .kbd-panggung .kbd-slide--3,
body.kb-body #kbd-g-4:checked  ~ .kbd-panggung .kbd-slide--4,
body.kb-body #kbd-g-5:checked  ~ .kbd-panggung .kbd-slide--5,
body.kb-body #kbd-g-6:checked  ~ .kbd-panggung .kbd-slide--6,
body.kb-body #kbd-g-7:checked  ~ .kbd-panggung .kbd-slide--7,
body.kb-body #kbd-g-8:checked  ~ .kbd-panggung .kbd-slide--8,
body.kb-body #kbd-g-9:checked  ~ .kbd-panggung .kbd-slide--9,
body.kb-body #kbd-g-10:checked ~ .kbd-panggung .kbd-slide--10,
body.kb-body #kbd-g-11:checked ~ .kbd-panggung .kbd-slide--11,
body.kb-body #kbd-g-12:checked ~ .kbd-panggung .kbd-slide--12 { display: block; }
body.kb-body #kbd-g-1:checked  ~ .kbd-panggung .kbd-slide:not(.kbd-slide--1),
body.kb-body #kbd-g-2:checked  ~ .kbd-panggung .kbd-slide:not(.kbd-slide--2),
body.kb-body #kbd-g-3:checked  ~ .kbd-panggung .kbd-slide:not(.kbd-slide--3),
body.kb-body #kbd-g-4:checked  ~ .kbd-panggung .kbd-slide:not(.kbd-slide--4),
body.kb-body #kbd-g-5:checked  ~ .kbd-panggung .kbd-slide:not(.kbd-slide--5),
body.kb-body #kbd-g-6:checked  ~ .kbd-panggung .kbd-slide:not(.kbd-slide--6),
body.kb-body #kbd-g-7:checked  ~ .kbd-panggung .kbd-slide:not(.kbd-slide--7),
body.kb-body #kbd-g-8:checked  ~ .kbd-panggung .kbd-slide:not(.kbd-slide--8),
body.kb-body #kbd-g-9:checked  ~ .kbd-panggung .kbd-slide:not(.kbd-slide--9),
body.kb-body #kbd-g-10:checked ~ .kbd-panggung .kbd-slide:not(.kbd-slide--10),
body.kb-body #kbd-g-11:checked ~ .kbd-panggung .kbd-slide:not(.kbd-slide--11),
body.kb-body #kbd-g-12:checked ~ .kbd-panggung .kbd-slide:not(.kbd-slide--12) { display: none; }
body.kb-body #kbd-g-1:checked  ~ .kbd-strip .kbd-strip__item--1,
body.kb-body #kbd-g-2:checked  ~ .kbd-strip .kbd-strip__item--2,
body.kb-body #kbd-g-3:checked  ~ .kbd-strip .kbd-strip__item--3,
body.kb-body #kbd-g-4:checked  ~ .kbd-strip .kbd-strip__item--4,
body.kb-body #kbd-g-5:checked  ~ .kbd-strip .kbd-strip__item--5,
body.kb-body #kbd-g-6:checked  ~ .kbd-strip .kbd-strip__item--6,
body.kb-body #kbd-g-7:checked  ~ .kbd-strip .kbd-strip__item--7,
body.kb-body #kbd-g-8:checked  ~ .kbd-strip .kbd-strip__item--8,
body.kb-body #kbd-g-9:checked  ~ .kbd-strip .kbd-strip__item--9,
body.kb-body #kbd-g-10:checked ~ .kbd-strip .kbd-strip__item--10,
body.kb-body #kbd-g-11:checked ~ .kbd-strip .kbd-strip__item--11,
body.kb-body #kbd-g-12:checked ~ .kbd-strip .kbd-strip__item--12 { border: 2px solid var(--kb-navy); }
body.kb-body .kbd-galeri__radio:focus-visible + .kbd-panggung,
body.kb-body .kbd-strip__item:focus-within { outline: 2px solid var(--kb-navy); outline-offset: 2px; }

/* Tanpa gambar: bidang navy yang disengaja, bukan placeholder abu. */
body.kb-body .kbd-kosong { position: relative; aspect-ratio: 16 / 9; border: 1.5px solid var(--kb-tepi-kartu); border-radius: 6px; background: var(--kb-navy); overflow: hidden; }
body.kb-body .kbd-kosong__teks { position: absolute; left: 22px; right: 22px; bottom: 20px; }
body.kb-body .kbd-kosong__rule { display: block; width: 40px; height: 2px; background: var(--kb-gold); margin-bottom: 12px; }
body.kb-body .kbd-kosong__label { display: block; font: 600 11px/1.5 var(--kb-font-mono); letter-spacing: .1em; color: var(--kb-gold); }
body.kb-body .kbd-kosong__sub { display: block; margin-top: 6px; font: 400 14px/1.45 var(--kb-font-body); color: rgba(247, 244, 237, .78); }

/* --- Judul bagian --------------------------------------------------------- */
body.kb-body .kbd-h2 { margin: 44px 0 0; font: 600 27px/1.15 var(--kb-font-display); color: var(--kb-navy); }
body.kb-body .kbd-h2--rapat { margin-top: 0; }
body.kb-body .kbd-rule { height: 1px; background: var(--kb-rule-strong); margin: 12px 0 18px; }

/* --- Keunggulan ----------------------------------------------------------- */
body.kb-body .kbd-unggul { list-style: none; margin: 0; padding: 20px 24px; background: var(--kb-cream-tua); border-radius: 6px; display: flex; flex-direction: column; gap: 12px; }
body.kb-body .kbd-unggul li { display: flex; gap: 12px; align-items: flex-start; }
body.kb-body .kbd-unggul li > span:last-child { font: 400 16px/1.5 var(--kb-font-body); color: var(--kb-navy); text-wrap: pretty; }
body.kb-body .kbd-unggul .kb-dot { width: 6px; height: 6px; margin-top: 8px; }

/* --- Spesifikasi ---------------------------------------------------------- */
body.kb-body .kbd-spek { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
body.kb-body .kbd-spek__atas { height: 2px; background: var(--kb-navy); }
body.kb-body .kbd-spek__kepala { padding: 9px 0 2px; font: 600 10px/1 var(--kb-font-mono); letter-spacing: .11em; color: var(--kb-ink-2); }
body.kb-body .kbd-spek__baris { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--kb-rule); }
body.kb-body .kbd-spek__label { font: 400 13px/1.4 var(--kb-font-body); color: var(--kb-ink-2); }
body.kb-body .kbd-spek__nilai { font: 500 13.5px/1.4 var(--kb-font-body); color: var(--kb-navy); font-variant-numeric: tabular-nums; text-align: right; }

/* --- Bisa dibangun apa di sini -------------------------------------------
   Tangga kontras dipakai ulang: angka paling menentukan yang TERSEDIA di pita
   navy (biasanya maksimal luas bangunan; tanpa KLB, lantai dasar yang naik),
   lalu cream tua, lalu polos. Tiap angka membawa rumusnya sendiri. */
body.kb-body .kbd-bangun { border: 1.5px solid var(--kb-tepi-kartu); border-radius: 6px; overflow: hidden; }
body.kb-body .kbd-bangun__baris { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 12px 18px; border-top: 1px solid var(--kb-rule); }
body.kb-body .kbd-bangun__baris:first-child { border-top: 0; }
body.kb-body .kbd-bangun__baris:last-child { padding-bottom: 14px; }
body.kb-body .kbd-bangun__kiri { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.kb-body .kbd-bangun__label { font: 500 10px/1.4 var(--kb-font-body); letter-spacing: .13em; color: var(--kb-ink-2); }
body.kb-body .kbd-bangun__rumus { font: 400 10.5px/1.4 var(--kb-font-mono); color: rgba(24, 56, 81, .55); }
body.kb-body .kbd-bangun__nilai { flex: none; font: 500 15px/1.2 var(--kb-font-body); color: var(--kb-navy); font-variant-numeric: tabular-nums; }
body.kb-body .kbd-bangun__baris--navy { padding: 15px 18px; background: var(--kb-navy); border-top-color: var(--kb-rule-strong); }
body.kb-body .kbd-bangun__baris--navy .kbd-bangun__kiri { gap: 8px; }
body.kb-body .kbd-bangun__baris--navy .kbd-bangun__label { color: rgba(247, 244, 237, .72); }
body.kb-body .kbd-bangun__baris--navy .kbd-bangun__nilai { font: 600 42px/.85 var(--kb-font-display); color: var(--kb-cream); }
body.kb-body .kbd-bangun__rumus--terang { max-width: 46ch; font: 400 11.5px/1.5 var(--kb-font-body); color: rgba(247, 244, 237, .66); text-wrap: pretty; }
/* Emas menandai satu hal saja: yang mengikat bukan KLB, tapi batas lantai. */
body.kb-body .kbd-bangun__cip { display: inline-block; margin-left: 7px; padding: 3px 7px; border-radius: 3px; background: var(--kb-gold); color: var(--kb-navy); font: 700 8.5px/1 var(--kb-font-body); letter-spacing: .09em; }
body.kb-body .kbd-bangun__baris--cream { padding: 13px 18px; background: var(--kb-cream-tua); border-top-color: var(--kb-rule-strong); }
body.kb-body .kbd-bangun__baris--cream .kbd-bangun__nilai { font: 600 22px/1 var(--kb-font-body); }
body.kb-body .kbd-bangun__nota { margin: 10px 0 0; font: 400 11.5px/1.5 var(--kb-font-body); color: var(--kb-ink-2); text-wrap: pretty; }

/* --- Deskripsi: maksimal 3 kalimat, satu kalimat satu baris --------------- */
body.kb-body .kbd-desk { display: flex; flex-direction: column; gap: 10px; max-width: 70ch; }
body.kb-body .kbd-desk__kalimat { margin: 0; font: 400 15px/1.6 var(--kb-font-body); color: rgba(24, 56, 81, .88); text-wrap: pretty; }

/* --- Cocok untuk ---------------------------------------------------------- */
body.kb-body .kbd-cocok { display: flex; flex-wrap: wrap; gap: 8px; }
body.kb-body .kbd-cocok__item { padding: 9px 15px; border: 1px solid var(--kb-tepi-kartu); border-radius: 3px; font: 500 13px/1 var(--kb-font-body); color: var(--kb-navy); }

/* --- Cara bayar ----------------------------------------------------------- */
body.kb-body .kbd-bayar { display: grid; gap: 16px; }
body.kb-body .kbd-bayar--1 { grid-template-columns: minmax(0, 340px); }
body.kb-body .kbd-bayar--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.kb-body .kbd-bayar--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.kb-body .kbd-bayar__kartu { border: 1.5px solid var(--kb-tepi-kartu); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
body.kb-body .kbd-bayar__kepala { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--kb-navy); }
body.kb-body .kbd-bayar__nama { font: 600 20px/1.1 var(--kb-font-display); color: var(--kb-cream); }
body.kb-body .kbd-bayar__cip { flex: none; font: 600 10px/1 var(--kb-font-mono); letter-spacing: .08em; color: rgba(247, 244, 237, .7); }
/* Satu-satunya emas di kolom konten, dan ia duduk di atas navy. */
body.kb-body .kbd-bayar__cip--emas { padding: 4px 8px; border-radius: 3px; background: var(--kb-gold); color: var(--kb-navy); font: 700 9px/1 var(--kb-font-body); letter-spacing: .1em; }
body.kb-body .kbd-bayar__isi { padding: 14px 16px 16px; }
body.kb-body .kbd-bayar__p1 { margin: 0; font: 400 13.5px/1.5 var(--kb-font-body); color: var(--kb-navy); text-wrap: pretty; }
body.kb-body .kbd-bayar__p2 { margin: 8px 0 0; font: 400 12.5px/1.5 var(--kb-font-body); color: var(--kb-ink-2); text-wrap: pretty; }
body.kb-body .kbd-bayar__nota { margin: 14px 0 0; font: 400 12.5px/1.55 var(--kb-font-body); color: var(--kb-ink-2); text-wrap: pretty; }

/* --- Tombol --------------------------------------------------------------- */
body.kb-body .kbd-tombol { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-radius: 6px; font: 500 14px/1 var(--kb-font-body); letter-spacing: .03em; text-decoration: none; }
body.kb-body .kbd-tombol--navy { background: var(--kb-navy); color: var(--kb-cream); }
body.kb-body .kbd-tombol--navy:hover,
body.kb-body .kbd-tombol--navy:focus { background: var(--kb-navy-tekan); color: var(--kb-cream); }
body.kb-body .kbd-tombol--garis { margin-top: 12px; border: 1px solid var(--kb-tepi-kartu); color: var(--kb-navy); }
body.kb-body .kbd-tombol--garis:hover,
body.kb-body .kbd-tombol--garis:focus { background: var(--kb-cream-tua); color: var(--kb-navy); }
body.kb-body .kbd-tombol--emas { justify-content: center; border-radius: 3px; background: var(--kb-gold); color: var(--kb-navy); font: 700 13px/1 var(--kb-font-body); letter-spacing: .04em; }
body.kb-body .kbd-tombol--emas:hover,
body.kb-body .kbd-tombol--emas:focus { background: var(--kb-gold-tekan); color: var(--kb-navy); }
body.kb-body .kbd-tombol--akhir { margin: 32px 0 0; }

/* --- Pelat harga (lengket) ------------------------------------------------ */
body.kb-body .kbd-plat { position: sticky; top: 24px; background: var(--kb-cream); border: 1.5px solid var(--kb-tepi-kartu); border-radius: 6px; overflow: hidden; }
body.kb-body .kbd-plat__rail { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 13px 18px; font: 600 10px/1 var(--kb-font-mono); letter-spacing: .1em; color: var(--kb-navy); }
body.kb-body .kbd-plat__kode { color: rgba(24, 56, 81, .55); }
body.kb-body .kbd-plat__luas { padding: 16px 18px; }
body.kb-body .kbd-plat__luas .kb-row__nilai--luas { font-size: 44px; line-height: .85; }
body.kb-body .kbd-plat__perm2 { padding: 14px 18px; }
body.kb-body .kbd-plat__perm2 .kb-row__nilai--perm2 { font-size: 24px; }
body.kb-body .kbd-plat__total { padding: 12px 18px 14px; }
body.kb-body .kbd-plat__total .kb-row__nilai--total { font-size: 16px; }
body.kb-body .kbd-cip { display: inline-block; margin-left: 7px; padding: 3px 7px; border: 1px solid var(--kb-tepi-kartu); border-radius: 3px; font: 600 9px/1 var(--kb-font-body); letter-spacing: .09em; color: rgba(24, 56, 81, .72); }
body.kb-body .kbd-plat__ringkas { padding: 2px 18px 6px; border-top: 1px solid var(--kb-rule-strong); }
body.kb-body .kbd-plat__baris { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--kb-rule); font: 400 12.5px/1.4 var(--kb-font-body); color: var(--kb-ink-2); }
body.kb-body .kbd-plat__baris:last-child { border-bottom: 0; }
body.kb-body .kbd-plat__baris span:last-child { font-weight: 500; color: var(--kb-navy); }
body.kb-body .kbd-plat__bayar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--kb-rule-strong); font: 500 12.5px/1.4 var(--kb-font-body); color: var(--kb-navy); text-decoration: none; }
body.kb-body .kbd-plat__bayar:hover,
body.kb-body .kbd-plat__bayar:focus { color: var(--kb-navy-tekan); text-decoration: underline; }
body.kb-body .kbd-plat__cta { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-top: 1px solid var(--kb-rule-strong); background: var(--kb-navy); color: var(--kb-cream); font: 500 13.5px/1 var(--kb-font-body); letter-spacing: .03em; text-decoration: none; }
body.kb-body .kbd-plat__cta:hover,
body.kb-body .kbd-plat__cta:focus { background: var(--kb-navy-tekan); color: var(--kb-cream); }
body.kb-body .kbd-plat__nota { margin: 0; padding: 11px 18px 13px; font: 400 11.5px/1.5 var(--kb-font-body); color: var(--kb-ink-2); text-wrap: pretty; }
body.kb-body .kbd-tangga--ponsel { display: none; }

/* --- Kavling lain --------------------------------------------------------- */
body.kb-body .kbd-lain { margin: 48px 0 0; }

/* --- Belum menemukan yang cocok ------------------------------------------- */
body.kb-body .kbd-cari { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; margin: 44px 0 0; padding: 34px 36px 36px; background: var(--kb-navy); border-radius: 6px; }
body.kb-body .kbd-cari__teks { max-width: 600px; }
body.kb-body .kbd-cari__judul { margin: 0; font: 600 32px/1.1 var(--kb-font-display); color: var(--kb-cream); }
body.kb-body .kbd-cari__p { margin: 12px 0 0; font: 400 14.5px/1.6 var(--kb-font-body); color: rgba(247, 244, 237, .78); text-wrap: pretty; }
body.kb-body .kbd-cari__kredensial { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 0; font: 500 10px/1 var(--kb-font-mono); letter-spacing: .09em; color: rgba(247, 244, 237, .55); }
body.kb-body .kbd-cari__aksi { flex: none; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
body.kb-body .kbd-cari__mikro { font: 400 11.5px/1 var(--kb-font-body); color: rgba(247, 244, 237, .6); }

/* --- Broker --------------------------------------------------------------- */
body.kb-body .kbd-broker { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; margin: 40px 0 0; padding: 0 0 44px; }
body.kb-body .kbd-broker__foto { aspect-ratio: 4 / 5; overflow: hidden; border: 1.5px solid var(--kb-tepi-kartu); border-radius: 6px; background: var(--kb-cream-lembar); }
body.kb-body .kbd-broker__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
body.kb-body .kbd-broker__kicker { font: 600 10px/1 var(--kb-font-mono); letter-spacing: .11em; color: var(--kb-ink-2); }
body.kb-body .kbd-broker__nama { margin: 10px 0 0; font: 600 30px/1.1 var(--kb-font-display); color: var(--kb-navy); }
body.kb-body .kbd-broker__p { margin: 10px 0 0; max-width: 62ch; font: 400 14.5px/1.6 var(--kb-font-body); color: rgba(24, 56, 81, .88); text-wrap: pretty; }
body.kb-body .kbd-broker__cta { display: inline-flex; margin: 18px 0 0; }

/* --- Bar melekat ponsel --------------------------------------------------- */
body.kb-body .kbd-bar { display: none; }

/* --- Ponsel & tablet ------------------------------------------------------ */

@media (max-width: 900px) {
body.kb-body .kbd { padding: 16px 16px 0; }
body.kb-body .kbd-kolom { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 18px; }
body.kb-body .kbd-plat { display: none; }               /* pelat pecah jadi tangga penuh lebar */
body.kb-body .kbd-tangga--ponsel { display: block; margin: 0 -16px; }
body.kb-body .kbd-tangga--ponsel .kb-row { padding-left: 16px; padding-right: 16px; }
body.kb-body .kbd-tangga--ponsel .kb-row--luas { border-top: 1px solid var(--kb-rule-strong); }
body.kb-body .kbd-tangga--ponsel .kb-row__nilai--luas { font-size: 36px; }
body.kb-body .kbd-tangga--ponsel .kb-row__nilai--perm2 { font-size: 20px; }
body.kb-body .kbd-kepala { gap: 14px; }
body.kb-body .kbd-judul { max-width: none; font-size: 30px; }
body.kb-body .kbd-badge { margin-top: 4px; padding: 6px 10px; font-size: 9.5px; }
body.kb-body .kbd-meta { gap: 10px; font-size: 10px; }

	/* Gambar penuh lebar layar, tinggi mengikuti proporsi asli — tidak dipotong. */
body.kb-body .kbd-galeri { margin: 0 -16px; }
body.kb-body .kbd-slide__kotak { aspect-ratio: auto; border-left: 0; border-right: 0; border-radius: 0; }
body.kb-body .kbd-slide__img { height: auto; }
body.kb-body .kbd-slide__ket { padding: 8px 16px 12px; }
body.kb-body .kbd-strip { grid-template-columns: repeat(auto-fill, 92px); gap: 8px; padding: 0 16px 4px; overflow-x: auto; grid-auto-flow: column; grid-auto-columns: 92px; }
body.kb-body .kbd-kosong { margin: 0 -16px; border-left: 0; border-right: 0; border-radius: 0; }
body.kb-body .kbd-h2 { margin-top: 26px; font-size: 22px; }
body.kb-body .kbd-rule { margin: 10px 0 14px; }
body.kb-body .kbd-unggul { padding: 16px; gap: 10px; }
body.kb-body .kbd-unggul li > span:last-child { font-size: 14.5px; }
body.kb-body .kbd-spek { grid-template-columns: 1fr; gap: 22px; }
body.kb-body .kbd-bangun__baris { padding: 10px 15px; gap: 14px; }
body.kb-body .kbd-bangun__baris--navy { display: block; padding: 13px 15px; }
body.kb-body .kbd-bangun__baris--navy .kbd-bangun__label { font-size: 9.5px; }
body.kb-body .kbd-bangun__baris--navy .kbd-bangun__nilai { display: block; margin: 6px 0 7px; font-size: 34px; line-height: .9; }
body.kb-body .kbd-bangun__baris--navy .kbd-bangun__rumus--terang { font-size: 11px; }
body.kb-body .kbd-bangun__baris--cream { padding: 11px 15px; }
body.kb-body .kbd-bangun__baris--cream .kbd-bangun__nilai { font-size: 19px; }
body.kb-body .kbd-bangun__label { font-size: 9.5px; }
body.kb-body .kbd-bangun__rumus { font-size: 10px; }
body.kb-body .kbd-bangun__nilai { font-size: 14px; }
body.kb-body .kbd-desk__kalimat { font-size: 13.5px; }
body.kb-body .kbd-bayar--2,
body.kb-body .kbd-bayar--3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
body.kb-body .kbd-bayar__nama { font-size: 18px; }

	/* Bar permanen sejak layar pertama: tanpa animasi, tanpa muncul-hilang. */
body.kb-body .kbd-tombol--akhir { display: none; }      /* satu aksi, satu tempat */
body.kb-body .kbd-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--kb-navy); border-top: 1px solid rgba(247, 244, 237, .18); }
body.kb-body .kbd-bar__angka { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.kb-body .kbd-bar__luas { font: 600 25px/.9 var(--kb-font-display); color: var(--kb-cream); }
body.kb-body .kbd-bar__harga { font: 500 11px/1.3 var(--kb-font-body); color: rgba(247, 244, 237, .8); font-variant-numeric: tabular-nums; }
body.kb-body .kbd-bar__cta { flex: none; padding: 13px 18px; border-radius: 3px; background: var(--kb-gold); color: var(--kb-navy); font: 700 12.5px/1 var(--kb-font-body); letter-spacing: .05em; text-decoration: none; }
body.kb-body .kbd-bar__cta:hover,
body.kb-body .kbd-bar__cta:focus { background: var(--kb-gold-tekan); color: var(--kb-navy); }
body.kb-body .kbd-broker { grid-template-columns: 118px minmax(0, 1fr); gap: 14px; padding-bottom: 96px; }  /* ruang untuk bar */
body.kb-body .kbd-broker__nama { font-size: 24px; }
body.kb-body .kbd-broker__p { font-size: 12.5px; }
body.kb-body .kbd-broker__cta { width: 100%; justify-content: center; }
body.kb-body .kbd-cari { flex-direction: column; gap: 16px; margin: 28px -16px 0; padding: 26px 16px 28px; border-radius: 0; }
body.kb-body .kbd-cari__judul { font-size: 26px; }
body.kb-body .kbd-cari__aksi { align-items: stretch; width: 100%; }
body.kb-body .kbd-cari__mikro { text-align: center; }
body.kb-body .kbd-lain { margin-top: 32px; }
}

@media print {
body.kb-body .kbd-bar,
body.kb-body .kbd-strip,
body.kb-body .kbd-cari__aksi { display: none; }
body.kb-body .kbd-plat { position: static; }
}