/* ============================================================================
   SKY REALTORS GROUP — sistem reka bentuk
   VertByte · Pakej 2 + modul Website Agent

   Satu fail untuk laman utama DAN website agent. Website agent berkongsi
   setiap komponen di sini; hanya kandungan yang berbeza.
   ========================================================================== */

:root{
  /* Warna — biru gelap · putih · hitam.
     Palet diambil daripada laman lama klien (putih + hitam) dengan biru
     gelap menggantikan biru stok Divi sebagai warna jenama. */
  --bg:#F7F9FC;
  --surface:#FFFFFF;
  --ink:#0B0F14;
  --ink-2:#26313D;
  --muted:#5C6874;
  --muted-2:#8A939E;
  --line:#E1E7EE;
  --line-2:#EFF3F7;
  --brand:#12365F;
  --brand-dark:#0A2340;
  --brand-tint:#EAF1F8;
  --brand-line:#C4D7E9;
  --brand-soft:#8FBCE6;
  --amber:#1E5C9E;
  --amber-tint:#E8F0F9;
  --dark:#0B0F14;
  --dark-2:#12365F;
  --on-dark:#C6D2DE;
  --on-dark-2:#94A1AF;
  --danger:#B4322B;
  /* Warna status listing. Setiap satu membawa makna, jadi ia hidup sebagai
     token — bukan nilai hex yang bertaburan dalam peraturan lencana.
     Teks kuning WAJIB gelap: putih atas kuning gagal WCAG AA teruk. */
  --st-kuning:#E8A700;  --st-kuning-ink:#31210A;
  --st-merah:#B4322B;
  --st-hijau:#146C43;

  /* Bentuk */
  --r-sm:8px; --r:11px; --r-lg:16px; --r-xl:20px;
  --shadow:0 1px 2px rgba(11,15,20,.05);
  --shadow-lg:0 18px 40px -22px rgba(11,15,20,.30);

  /* Jarak */
  --gutter:clamp(20px, 4vw, 40px);
  --section:clamp(56px, 7vw, 88px);
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
/* Atribut `hidden` kalah kepada mana-mana peraturan pengarang yang menetapkan
   `display` — jadi butang bersaiz .btn atau .kongsi__btn tetap kelihatan
   walaupun ditanda hidden. Ini sudah tiga kali ditampal satu per satu
   (.lbox, .pasang, .pasang-sheet); ini peraturan am supaya ia tidak
   berulang pada komponen seterusnya. */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Bricolage Grotesque','Public Sans',system-ui,sans-serif;
  font-weight:700;letter-spacing:-.025em;margin:0;line-height:1.15;text-wrap:balance;
}
h1{font-size:clamp(34px,5.2vw,60px);font-weight:800;line-height:1.04}
h2{font-size:clamp(27px,3.6vw,40px)}
h3{font-size:clamp(18px,1.7vw,22px)}
p{margin:0;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark)}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.ic{flex:0 0 auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Susun atur ───────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sect{padding:var(--section) 0}
.sect--tint{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sect--dark{background:var(--dark);color:#fff}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.grid{display:grid}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.sect--dark .eyebrow{color:var(--brand-soft)}
.lead{color:var(--muted);font-size:clamp(16px,1.5vw,17px)}
.sect--dark .lead{color:var(--on-dark)}
.muted{color:var(--muted)}
.small{font-size:13px}

/* ── Butang ───────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 24px;border-radius:var(--r);
  font-weight:600;font-size:16px;line-height:1.2;
  background:var(--brand);color:#fff;transition:background .15s ease,transform .15s ease;
  text-align:center;
}
.btn:hover{background:var(--brand-dark);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--amber{background:var(--amber)}
.btn--amber:hover{background:#174A80;color:#fff}
.btn--ink{background:var(--ink)}
.btn--ink:hover{background:#000;color:#fff}
.btn--ghost{background:transparent;border:1px solid var(--line);color:var(--ink-2)}
.btn--ghost:hover{background:var(--surface);border-color:var(--brand);color:var(--brand)}
.btn--on-dark{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff}
.btn--on-dark:hover{background:rgba(255,255,255,.16);color:#fff}
.btn--sm{min-height:40px;padding:9px 16px;font-size:14px;border-radius:var(--r-sm)}
.btn--block{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px}

/* ── Pil / lencana ────────────────────────────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  min-height:40px;white-space:nowrap;
}
.pill:hover{border-color:var(--brand);color:var(--brand)}
.pill.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.badge{display:inline-flex;align-items:center;padding:5px 11px;border-radius:var(--r-sm);font-size:12px;font-weight:700;letter-spacing:.02em}
.badge--white{background:#fff;color:var(--ink)}
.badge--amber{background:var(--amber);color:#fff}
.badge--brand{background:var(--brand-tint);color:var(--brand)}
.badge--sold{background:var(--ink);color:#fff}
/* Lencana status awam. Setiap satu sepadan dengan kunci sky_status(), jadi
   satu status baharu dalam PHP hanya perlu satu baris di sini.
   'on_sell' tiada lencana — untuk dijual ialah keadaan biasa, dan melabelkan
   yang biasa menjadikan lencana lain hilang makna. Birunya datang daripada
   lencana rebat (.badge--amber) yang muncul pada unit yang masih dijual. */
.badge--book{background:var(--st-kuning);color:var(--st-kuning-ink)}
/* Ditangguh dan Dibatalkan berkongsi merah dengan sengaja: bagi pembeli
   kedua-duanya bermaksud perkara yang sama — unit ini tidak boleh dibeli
   sekarang. Membezakan warnanya menyuruh pembeli membaca perbezaan yang
   tidak mengubah apa-apa keputusannya. */
.badge--hold,.badge--cancelled{background:var(--st-merah);color:#fff}
/* Penanda menjawab soalan berbeza daripada status — bukan "apa keadaannya"
   tetapi "apa yang baru berubah" — jadi setiap satu ada warnanya sendiri.
   .badge--flag kekal sebagai asas bentuk; warnanya datang dari kelas kunci. */
.badge--flag{background:var(--ink-2);color:#fff}
.badge--price_revised{background:var(--st-hijau);color:#fff}
/* "Dibuka semula" bermakna unit ini kembali dijual, jadi ia keluarga biru —
   biru jenama yang lebih gelap supaya ia tidak bertukar ganti dengan lencana
   rebat. Ia TIDAK boleh merah: merah kini bermaksud tidak boleh dibeli. */
.badge--reopen{background:var(--brand);color:#fff}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;
  background:rgba(143,188,230,.16);border:1px solid rgba(255,255,255,.26);color:#FFFFFF}

/* ── Topbar + header ──────────────────────────────────────────────────────── */
.topbar{background:var(--dark);color:var(--on-dark-2);font-size:13px}
.topbar .wrap{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar a{color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.topbar__note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Header biru gelap. Logo klien ialah wordmark PUTIH dengan latar lutsinar —
   pada header putih ia terpaksa duduk atas plat gelap, dan plat itu kelihatan
   seperti pelekat yang ditampal pada bar putih. Bar gelap membuang masalah itu
   pada puncanya: wordmark duduk terus pada latar, tiada bentuk di sekelilingnya. */
.site-head{background:var(--brand);border-bottom:1px solid rgba(255,255,255,.10);position:sticky;top:0;z-index:50}
.site-head .wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,40px)}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* Sandaran bila fail logo belum diimport. Dahulu ia kotak biru pada bar
   putih; pada bar biru ia akan hilang sepenuhnya, jadi ia jadi kotak putih
   lutsinar. */
.brand__mark{width:40px;height:40px;border-radius:var(--r);background:rgba(255,255,255,.14);
  color:#fff;display:grid;place-items:center;flex:0 0 auto}
.brand__mark img{width:100%;height:100%;object-fit:contain;border-radius:var(--r)}
/* Tiada lagi plat — header sudah gelap, jadi wordmark putih duduk terus di
   atasnya. Tingginya dinaikkan 24px → 30px kerana padding plat yang dibuang
   dahulunya menyumbang kepada berat visual lockup ini. */
.brand__plate{display:grid;place-items:center;flex:0 0 auto}
.brand__plate img{height:30px;width:auto;display:block}
/* Lockup logo lebih lebar daripada ikon yang digantikannya; tanpa nowrap,
   butang WhatsApp di hujung header pecah kepada dua baris. */
.site-head .btn{white-space:nowrap;flex:0 0 auto}
/* Pautan portal + butang WhatsApp sebagai satu kumpulan di hujung header. */
.hdr-cta{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);flex:0 0 auto}
.hdr-portal{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:14px;font-weight:600;color:#C9D8EA}
.hdr-portal:hover{color:#fff}
/* Nav sengaja TIDAK dibenarkan mengecut. Bekas nav yang mengecut tidak
   menyembunyikan pautan — ia membiarkan teks nowrap melimpah ke bawah butang
   WhatsApp, jadi "Hubungi" hilang secara senyap tanpa sebarang limpahan
   halaman yang boleh dikesan oleh ujian. Lebih baik ia tidak muat dan nampak. */
.site-head .nav{flex:0 0 auto}
.brand .stack{min-width:0}
.brand__name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.brand__sub{font-size:11px;color:var(--muted);letter-spacing:.12em;font-weight:600;line-height:1.1}
.nav{display:flex;align-items:center;gap:clamp(11px,1.5vw,24px);font-size:15px;font-weight:500;flex-wrap:nowrap}
.nav a{color:#C9D8EA;white-space:nowrap}
.nav a:hover,.nav a.is-on{color:#fff;font-weight:600}
.nav-toggle{display:none;width:44px;height:44px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.24);align-items:center;justify-content:center;color:#fff}
.nav-toggle:hover{border-color:rgba(255,255,255,.45)}
/* Log masuk agent dalam nav — hanya dalam menu lipat mudah alih. */
.nav .nav__portal{display:none}
.brand__name{color:#fff}
.brand__sub{color:var(--brand-soft)}
/* Butang CTA ditelan oleh header sewarna dengannya. Pada bar gelap ia jadi
   putih pejal — kontras paling tinggi pada bar itu, sesuai untuk satu-satunya
   butang di sana. */
.site-head .btn{background:#fff;color:var(--brand)}
.site-head .btn:hover{background:var(--brand-tint);color:var(--brand-dark)}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--dark);overflow:hidden;color:#fff}
.hero__art{position:absolute;inset:0;width:100%;height:100%}
/* Hero berfoto: gambar sebenar pasukan klien, ditutup lapisan gelap supaya
   teks putih kekal memenuhi kontras WCAG AA di atas mana-mana bahagian foto. */
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__veil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,22,19,.95) 0%,rgba(10,22,19,.88) 42%,rgba(12,26,23,.70) 100%)}
@media (max-width:860px){
  .hero__veil{background:linear-gradient(180deg,rgba(10,22,19,.92) 0%,rgba(10,22,19,.90) 100%)}
}
.hero .wrap{position:relative;padding-top:clamp(48px,7vw,84px);padding-bottom:clamp(56px,8vw,96px)}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:start}
.hero h1{color:#fff;max-width:15ch}
.hero__sub{color:var(--on-dark);font-size:clamp(16px,1.8vw,19px);max-width:52ch}
.hero__ticks{display:flex;flex-wrap:wrap;gap:14px 26px;padding-top:6px}
.hero__ticks span{display:inline-flex;align-items:center;gap:8px;color:#FFFFFF;font-size:14px;font-weight:500}

/* ── Kad ──────────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.card--pad{padding:clamp(20px,2.4vw,28px)}
.panel{background:var(--surface);border-radius:var(--r-xl);padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow-lg)}
.panel--dark{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);box-shadow:none}

/* ── Borang ───────────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px}
.field > span,.label{font-size:13px;font-weight:600;color:var(--ink-2)}
.input,select.input,textarea.input{
  width:100%;min-height:48px;border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;background:var(--bg);color:var(--ink);font:inherit;font-size:15px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
textarea.input{min-height:120px;resize:vertical;line-height:1.6}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6B66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.hint{font-size:12px;color:var(--muted-2)}
.result{background:var(--brand-tint);border:1px solid var(--brand-line);border-radius:var(--r-lg);padding:16px 18px;display:flex;flex-direction:column;gap:3px}
.result__k{font-size:12px;font-weight:700;color:var(--brand);letter-spacing:.06em;text-transform:uppercase}
.result__v{font-family:'Bricolage Grotesque',sans-serif;font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--brand);line-height:1.1}

.alert{border-radius:var(--r);padding:14px 16px;font-size:15px;border:1px solid}
.alert--ok{background:var(--brand-tint);border-color:var(--brand-line);color:var(--brand-dark)}
.alert--err{background:#FBEDEA;border-color:#EFD0C8;color:var(--danger)}

/* ── Jalur statistik ──────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stats > div{padding:clamp(24px,3vw,34px) 20px;border-right:1px solid var(--line)}
.stats > div:last-child{border-right:0}
.stats b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(28px,3.4vw,36px);font-weight:800;letter-spacing:-.035em;color:var(--brand)}
.stats span{font-size:14px;color:var(--muted);font-weight:500}

/* ── Jalur tajuk halaman ──────────────────────────────────────────────────── */
/* Gambar latar ditutup lapisan gelap supaya teks putih kekal memenuhi kontras
   WCAG AA di atas mana-mana bahagian gambar — termasuk gambar yang klien
   gantikan sendiri kemudian. */
.pagehead{position:relative;overflow:hidden;background:var(--dark);color:#fff;
  padding:clamp(38px,5.5vw,64px) 0}
.pagehead .wrap{position:relative}
.pagehead h1{font-size:clamp(28px,3.8vw,44px);color:#fff}
.pagehead .lead{color:var(--on-dark)}
.pagehead__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pagehead__veil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,22,19,.95) 0%,rgba(10,22,19,.87) 46%,rgba(12,26,23,.70) 100%)}
@media (max-width:860px){
  .pagehead__veil{background:linear-gradient(180deg,rgba(10,22,19,.93) 0%,rgba(10,22,19,.90) 100%)}
}

/* ── Carousel ─────────────────────────────────────────────────────────────── */
/* Nisbah bingkai dikunci supaya gambar klien yang bukan nisbah standard tidak
   melompat. Peralihan guna `animation`, bukan `transition`: slaid pertama
   dirender pelayan dengan kelas aktif, jadi transition sudah berada di nilai
   akhir dan langsung tidak beranimasi. */
.carousel{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--dark);aspect-ratio:16/7}
.carousel__slide{position:absolute;inset:0;opacity:0;pointer-events:none}
.carousel__slide.is-on{opacity:1;pointer-events:auto;animation:skyFade .5s ease both}
@keyframes skyFade{from{opacity:0}to{opacity:1}}
.carousel__slide img{width:100%;height:100%;object-fit:cover;display:block}
.carousel__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,3vw,34px);
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:#fff;
  background:linear-gradient(to top,rgba(10,22,19,.88),rgba(10,22,19,0))}
.carousel__cap b{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(18px,2.4vw,26px);font-weight:800;letter-spacing:-.02em}
.carousel__cap span{font-size:15px;color:var(--on-dark)}
.carousel__dots{position:absolute;right:16px;top:16px;display:flex;gap:7px}
.carousel__dots button{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.4);padding:0}
.carousel__dots button.is-on{background:#fff;width:24px}
@media (max-width:620px){ .carousel{aspect-ratio:4/3} }

/* ── Galeri ───────────────────────────────────────────────────────────────── */
.galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(12px,1.6vw,18px)}
.galeri figure{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--line-2);position:relative;aspect-ratio:4/3}
.galeri img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.galeri figure:hover img{transform:scale(1.04)}
.galeri figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px;color:#fff;font-size:14px;
  background:linear-gradient(to top,rgba(10,22,19,.85),rgba(10,22,19,0))}

/* ── Kad hartanah ─────────────────────────────────────────────────────────── */
.props{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,26px)}
.prop{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);transition:box-shadow .18s ease,transform .18s ease}
.prop:hover{box-shadow:0 14px 30px -18px rgba(18,33,29,.4);transform:translateY(-2px)}
.prop__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--line-2)}
.prop__media img,.prop__media .ph{width:100%;height:100%;object-fit:cover;display:block}
.prop__tags{position:absolute;top:12px;left:12px;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100% - 24px)}
.prop__body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.prop__price{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--brand);line-height:1.15}
.prop__title{font-size:17px;font-weight:700;line-height:1.35;color:var(--ink)}
.prop a.prop__title:hover{color:var(--brand)}
.prop__where{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px}
.prop__specs{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2)}
.prop__specs span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);font-weight:500}
.prop__specs .ic{color:var(--brand)}
.prop__agent{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--line-2);background:#FDFDFB}
.prop__agent img,.prop__agent .avatar{width:32px;height:32px;border-radius:999px;object-fit:cover;flex:0 0 auto}
.prop__agent span{font-size:13px;color:var(--muted)}
.prop__agent b{font-size:13px;color:var(--ink-2);font-weight:600}

.avatar{display:grid;place-items:center;border-radius:999px;background:var(--brand-tint);color:var(--brand);
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em;flex:0 0 auto}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty{padding:clamp(40px,6vw,64px) 24px;text-align:center;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface)}
.empty h3{margin-bottom:8px}

/* ── Senarai bernombor / semak ────────────────────────────────────────────── */
.steps > div{display:flex;align-items:center;gap:16px;padding:11px 0;border-top:1px solid rgba(255,255,255,.08)}
.steps b{width:28px;height:28px;border-radius:999px;background:rgba(143,188,230,.16);color:var(--brand-soft);font-size:13px;font-weight:700;display:grid;place-items:center;flex:0 0 auto}
.steps span{color:#DCE7F2;font-size:15px}
.ticks{display:flex;flex-direction:column;gap:12px}
.ticks span{display:flex;align-items:flex-start;gap:11px;font-size:15px}
.ticks .ic{margin-top:3px;color:var(--brand)}
.sect--dark .ticks span{color:#DCE7F2}
.sect--dark .ticks .ic{color:var(--brand-soft)}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;font-size:17px;font-weight:600;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{flex:0 0 auto;width:30px;height:30px;padding:7px;border-radius:999px;background:var(--brand-tint);color:var(--brand);transition:transform .2s ease}
.faq[open] summary .ic{transform:rotate(180deg)}
.faq p{color:var(--muted);font-size:16px;line-height:1.7;padding:0 60px 22px 0}

/* ── Halaman detail ───────────────────────────────────────────────────────── */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted);padding:20px 0}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--brand)}
.gallery{display:grid;gap:12px;grid-template-columns:2fr 1fr}
.gallery__main{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--line-2)}
.gallery__main img,.gallery__main .ph{width:100%;height:100%;object-fit:cover}
.gallery__side{display:grid;gap:12px;grid-template-rows:repeat(2,1fr)}
.gallery__side a,.gallery__side div{border-radius:var(--r-lg);overflow:hidden;background:var(--line-2)}
.gallery__side img{width:100%;height:100%;object-fit:cover}
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.spec-grid > div{background:var(--surface);padding:18px}
.spec-grid b{display:block;font-size:18px;font-weight:700;color:var(--ink)}
.spec-grid span{font-size:13px;color:var(--muted)}
.prose{color:var(--ink-2);font-size:16px;line-height:1.75}
.prose p + p{margin-top:14px}

/* ── Kad agent ────────────────────────────────────────────────────────────── */
.agents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,26px)}
.agent-card{display:flex;flex-direction:column;gap:14px;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.agent-card img,.agent-card .avatar{width:72px;height:72px;border-radius:999px;object-fit:cover;object-position:center top}
.prop__agent img{object-position:center top}
.agent-hero__photo{object-position:center top}

/* ── Hero website agent ───────────────────────────────────────────────────── */
.agent-hero{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.agent-hero .wrap{position:relative;padding-top:clamp(40px,6vw,64px);padding-bottom:clamp(40px,6vw,64px)}
.agent-hero__grid{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,36px);align-items:center}
.agent-hero__photo{width:clamp(96px,12vw,148px);height:clamp(96px,12vw,148px);border-radius:var(--r-xl);object-fit:cover;border:3px solid rgba(255,255,255,.14)}
.agent-hero .avatar{width:clamp(96px,12vw,148px);height:clamp(96px,12vw,148px);border-radius:var(--r-xl);font-size:clamp(34px,4.5vw,52px);background:rgba(143,188,230,.18);color:var(--brand-soft)}
/* Hero agent berkongsi kelas .hero supaya latar dan chipnya berkelakuan
   sama seperti HQ. Satu peraturan HQ perlu dibatalkan: .hero h1 dihadkan
   15ch untuk tajuk pemasaran, tetapi di sini h1 ialah NAMA perunding dan
   nama panjang tidak sepatutnya dipaksa membaluk. */
.agent-hero h1{font-size:clamp(28px,3.8vw,44px);max-width:none}
.agent-hero__meta{display:flex;flex-wrap:wrap;gap:10px 20px;color:var(--on-dark);font-size:15px}
.agent-hero__meta span{display:inline-flex;align-items:center;gap:7px}

/* ── Penapis ──────────────────────────────────────────────────────────────── */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end}
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pager{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;padding-top:8px}
.pager a,.pager span{min-width:42px;min-height:42px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:15px;font-weight:600;color:var(--ink-2)}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager .is-on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── Butang WhatsApp terapung ─────────────────────────────────────────────── */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:999px;
  background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.45)}
.wa-float:hover{color:#fff;transform:translateY(-2px)}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-foot{background:var(--dark);color:var(--on-dark-2);padding:clamp(40px,6vw,64px) 0 28px}
.site-foot .wrap{display:flex;flex-direction:column;gap:clamp(28px,4vw,44px)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(24px,3.5vw,48px)}
.foot-grid h4{color:#fff;font-size:14px;font-weight:700}
.foot-grid a{color:var(--on-dark-2);font-size:14px;display:block;padding:3px 0}
.foot-grid a:hover{color:#fff}
.foot-bot{border-top:1px solid rgba(255,255,255,.08);padding-top:22px;display:flex;flex-wrap:wrap;gap:12px 22px;
  align-items:center;justify-content:space-between;color:var(--on-dark);font-size:13px}
.foot-bot a{color:#FFFFFF}

/* ── Responsif ────────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr}
  .props,.agents{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
  .agent-hero__grid{grid-template-columns:auto minmax(0,1fr);gap:24px}
  .agent-hero__cta{grid-column:1 / -1}
}

@media (max-width:1180px){
  /* Ruang header habis dahulu di sini. Butang WhatsApp disembunyikan (butang
     terapung di bawah skrin menggantikannya); pautan portal ikut sama supaya
     ia tidak tergantung sendirian di sebelah nav. */
  .site-head .btn,.hdr-portal{display:none}
}

@media (max-width:1000px){
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--brand);border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:var(--shadow-lg);padding:8px var(--gutter) 16px;
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:16px}
  .nav a:last-child{border-bottom:0}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .site-head .wrap{position:relative}
  .site-head .btn{display:none}
  /* Kumpulan CTA kosong (butang & pautan portal tersembunyi) masih satu item
     flex. Dengan space-between, ia menolak butang menu ke TENGAH header.
     Buang terus, dan butang menu ditolak ke kanan dengan margin auto. */
  .hdr-cta{display:none}
  .nav .nav__portal{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600}
}

@media (max-width:860px){
  .topbar__note{display:none}
  .topbar .wrap{justify-content:flex-end}
  .g-2,.g-3,.grid.g-2,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats > div:nth-child(2n){border-right:0}
  .stats > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .gallery{grid-template-columns:1fr}
  .gallery__side{grid-template-rows:none;grid-template-columns:repeat(2,1fr)}
  .faq p{padding-right:0}
}

@media (max-width:620px){
  .props,.agents,.g-2,.g-3,.g-4,
  .grid.g-2,.grid.g-3,.grid.g-4{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr}
  .agent-hero__grid{grid-template-columns:1fr;text-align:left}
  .btn--block-sm{width:100%}
  .crumb{padding:14px 0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ── Cetak ────────────────────────────────────────────────────────────────── */
@media print{
  .topbar,.site-head,.site-foot,.wa-float,.btn{display:none !important}
  body{background:#fff}
}

/* ============================================================================
   Komponen maklum balas klien #1
   ========================================================================== */

/* ── Bar kembali ke halaman utama ─────────────────────────────────────────── */
.backbar{border-bottom:1px solid var(--line-2);background:var(--surface)}
.backbar .wrap{padding-top:10px;padding-bottom:10px}
.backbar__link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
.backbar__link:hover{color:var(--brand)}
.backbar__link .ic{transition:transform .15s ease}
.backbar__link:hover .ic{transform:translateX(-3px)}

/* ── Logo berganda di footer ──────────────────────────────────────────────── */
.foot-logos{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot-logos img{height:38px;width:auto;max-width:170px;object-fit:contain}
.foot-logos__bar{width:1px;height:30px;background:rgba(255,255,255,.20);flex:0 0 auto}
/* Logo HIT berlatar terang, jadi ia diberi plat putih supaya kekal terbaca
   pada footer gelap — tanpa ini ia hilang sepenuhnya. */
.foot-logos__hit{background:#fff;border-radius:8px;padding:5px 9px;height:40px}

/* ── Tag sumber listing ───────────────────────────────────────────────────── */
.taglist{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:12.5px;font-weight:600;line-height:1.3}
.tag--hq{background:var(--brand-tint);color:var(--brand)}
.tag--lister{background:var(--amber-tint);color:var(--amber)}
.tag--plain{background:var(--line-2);color:var(--muted)}

/* ── Galeri hartanah: mosaik ──────────────────────────────────────────────
   Satu gambar besar + empat kecil, nisbah setiap jubin lebih kurang 4:3 —
   susunan yang sama seperti portal hartanah tempatan, jadi pelawat tidak
   perlu belajar apa-apa yang baharu.

   Nisbah bekas dikira daripada unit jubin, bukan direka: empat unit lebar
   × dua unit tinggi, setiap unit 4:3, memberi 2.72:1. Menetapkan nisbah pada
   bekas membuatkan setiap jubin keluar 4:3 dengan sendirinya. */
.lgal{position:relative;display:grid;gap:8px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--line-2)}
.lgal--kosong{aspect-ratio:16/9}

.lgal--n1{grid-template-columns:1fr;aspect-ratio:16/10;max-height:480px}
.lgal--n2{grid-template-columns:1fr 1fr;aspect-ratio:8/3;max-height:480px}
.lgal--n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:2/1;max-height:480px}
.lgal--n4,
.lgal--n5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:2.72/1}

.lgal--n3 .lgal__tile:first-child,
.lgal--n4 .lgal__tile:first-child,
.lgal--n5 .lgal__tile:first-child{grid-row:1 / span 2}
/* Empat gambar: jubin terakhir merentang dua lajur supaya tiada lubang. */
.lgal--n4 .lgal__tile:last-of-type{grid-column:2 / span 2}

.lgal__tile{position:relative;border:0;padding:0;margin:0;overflow:hidden;cursor:zoom-in;
  background:var(--line-2);display:block}
.lgal__tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.lgal__tile:hover img{transform:scale(1.035)}
.lgal__tile:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}

/* Butang "lihat semua" duduk atas jubin terakhir, seperti rujukan. */
.lgal__lagi{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.95);color:var(--ink);font-size:13.5px;font-weight:600;
  padding:9px 14px;border-radius:var(--r-sm);box-shadow:0 6px 18px -8px rgba(11,15,20,.55)}
.lgal__tile:hover .lgal__lagi{background:#fff;color:var(--brand)}

/* Ikon muat turun — menggantikan dua butang teks yang dahulunya di sini. */
.lgal__muat{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;
  display:grid;place-items:center;border-radius:999px;
  background:rgba(11,15,20,.55);color:#fff;backdrop-filter:blur(4px);
  transition:background .15s ease,transform .15s ease}
.lgal__muat:hover{background:var(--brand);color:#fff;transform:translateY(-1px)}

/* Kiraan gambar: telefon sahaja (lihat media query di bawah). */
.lgal__bil{display:none;position:absolute;right:12px;bottom:12px;z-index:2;
  align-items:center;gap:7px;background:rgba(11,15,20,.62);color:#fff;
  font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px}

/* ── Skrin penuh ──────────────────────────────────────────────────────────── */
.lbox{position:fixed;inset:0;z-index:80;background:#0A0D11;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lbox[hidden]{display:none}

.lbox__bar{display:flex;align-items:center;gap:12px;padding:14px clamp(14px,3vw,26px);color:#fff}
.lbox__kira{font-size:15px;color:#C6D2DE;font-variant-numeric:tabular-nums;margin-right:auto}
.lbox__kira b{color:#fff}
.lbox__ikon{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border:0;
  border-radius:999px;background:rgba(255,255,255,.10);color:#fff;cursor:pointer;
  transition:background .15s ease}
.lbox__ikon:hover{background:rgba(255,255,255,.22);color:#fff}

.lbox__pentas{position:relative;display:grid;place-items:center;min-height:0;min-width:0;
  padding:0 clamp(56px,7vw,96px);overflow:hidden}
/* `max-height:100%` pada item grid tidak boleh dipercayai — peratusan itu
   memerlukan tinggi bekas yang pasti, dan trek grid tidak sentiasa memberinya.
   Mengisi pentas dan menyerahkan nisbah kepada object-fit:contain sentiasa
   betul, tanpa bergantung kepada bagaimana trek dikira. */
.lbox__pentas img{width:100%;height:100%;object-fit:contain;display:block;min-width:0;min-height:0}
.lbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border:0;border-radius:999px;background:rgba(255,255,255,.10);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:background .15s ease}
.lbox__nav:hover{background:rgba(255,255,255,.24)}
.lbox__nav:first-of-type{left:clamp(8px,2vw,26px)}
.lbox__nav:last-of-type{right:clamp(8px,2vw,26px)}

.lbox__strip{display:flex;gap:8px;overflow-x:auto;padding:16px clamp(14px,3vw,26px);
  scrollbar-width:thin}
.lbox__thumb{flex:0 0 auto;width:112px;aspect-ratio:4/3;border-radius:6px;overflow:hidden;
  border:2px solid transparent;background:#1A222C;padding:0;cursor:pointer;opacity:.62;
  transition:opacity .15s ease,border-color .15s ease}
.lbox__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lbox__thumb:hover{opacity:1}
.lbox__thumb.is-on{opacity:1;border-color:var(--brand-soft)}

/* ── Kongsi ───────────────────────────────────────────────────────────────── */
.kongsi{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-top:4px}
.kongsi__label{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--muted);margin-right:2px}
.kongsi__btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;
  padding:9px 14px;border-radius:999px;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
.kongsi__btn:hover{border-color:var(--brand);color:var(--brand)}
.kongsi__btn--wa:hover{border-color:#25D366;color:#128C4A}
.kongsi__btn--fb:hover{border-color:#1877F2;color:#1877F2}
.kongsi__btn.is-ok{border-color:var(--brand);background:var(--brand-tint);color:var(--brand)}

/* ── Proses beli rumah ────────────────────────────────────────────────────── */
/* Lima lajur tetap, bukan auto-fit. auto-fit membalut lima langkah kepada
   4 + 1, dan satu kad yatim di baris kedua memecahkan bacaan urutan. */
.proses{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.proses__item{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px 18px;display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--shadow)}
/* Nombor langkah yang membawa urutan, bukan garis penyambung: grid ini
   membalut kepada baris kedua pada skrin sederhana, dan garis penyambung
   yang membalut menunjuk ke tempat yang salah. */
.proses__no{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:800;
  letter-spacing:.1em;color:#fff;background:var(--brand);width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;flex:0 0 auto}
.proses__item h3{font-size:16.5px;line-height:1.3}
.proses__item p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}

/* ── Blog ─────────────────────────────────────────────────────────────────── */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(20px,2.6vw,30px)}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease}
.post:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.post__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--line-2)}
.post__media img,.post__media .ph{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
.post:hover .post__media img{transform:scale(1.04)}
.post__body{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.post__meta{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--brand);
  text-transform:uppercase}
.post__title{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:700;
  letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.post a.post__title:hover{color:var(--brand)}
.post__teks{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.post .link-arrow{margin-top:auto;padding-top:6px;font-size:14px}

/* ── Artikel ──────────────────────────────────────────────────────────────── */
.artikel{max-width:74ch;margin:0 auto;display:flex;flex-direction:column;gap:clamp(22px,3vw,32px)}
.artikel__hero{width:100%;border-radius:var(--r-lg);aspect-ratio:16/9;object-fit:cover;display:block}
.prose--artikel{font-size:17px;line-height:1.8}
.prose--artikel h2{font-size:clamp(21px,2.4vw,27px);margin:34px 0 -6px}
.prose--artikel ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.prose--artikel li{line-height:1.7}
.prose--artikel strong{color:var(--ink);font-weight:700}

/* ── Susun atur halaman butiran ───────────────────────────────────────────── */
.detail-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(28px,4vw,48px);align-items:start}
.detail-side{position:sticky;top:96px}

/* ── Pasang ke skrin utama ────────────────────────────────────────────────── */
.pasang{position:fixed;left:20px;bottom:20px;z-index:60;background:var(--surface);
  box-shadow:var(--shadow-lg);border-color:var(--brand-line)}
.pasang[hidden]{display:none}
.pasang-sheet{position:fixed;inset:0;z-index:90;background:rgba(6,9,13,.6);
  display:grid;place-items:end center;padding:20px}
.pasang-sheet[hidden]{display:none}
.pasang-sheet__box{background:var(--surface);border-radius:var(--r-xl);padding:26px 24px;
  width:min(460px,100%);display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-lg)}
.pasang-sheet__box h3{font-size:20px}
.pasang-sheet__box ol{margin:0;padding-left:20px;color:var(--ink-2);font-size:15px;line-height:1.8}

@media (max-width: 1100px){
  .proses{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width: 700px){
  .proses{grid-template-columns:1fr}
  .proses__item{flex-direction:row;align-items:flex-start;gap:16px}
}

@media (max-width: 900px){
  .detail-grid{grid-template-columns:1fr}
  .detail-side{position:static}
  /* Telefon: mosaik runtuh kepada satu gambar. Empat jubin kecil pada skrin
     selebar 390px hanyalah setem pos — ketuk untuk skrin penuh lebih berguna. */
  .lgal{grid-template-columns:1fr !important;grid-template-rows:auto !important;aspect-ratio:4/3 !important}
  .lgal .lgal__tile:not(:first-child){display:none}
  .lgal .lgal__tile:first-child{grid-row:auto !important;grid-column:auto !important}
  .lgal__lagi{display:none}
  .lgal__bil{display:inline-flex}
  .lbox__thumb{width:76px}
  .lbox__pentas{padding:0 8px}
  .lbox__nav{width:40px;height:40px}
  .pasang{left:16px;bottom:16px;font-size:14px;min-height:44px}
}

/* ── Jalur ringkasan senarai ──────────────────────────────────────────────────
   Ditulis semula mengikut tema laman (biru gelap · putih · hitam). Versi
   pertama berlatar hitam kerana ia disalin daripada rujukan portal luar; ia
   kelihatan seperti tampalan daripada laman lain. Sekarang ia guna permukaan
   putih, garis dan jejari yang sama seperti setiap kad lain di laman ini.

   Setiap kotak ialah pautan ke senarai yang ditapis, dan kotak yang sepadan
   dengan penapis semasa ditanda dengan .is-on. */
.lstat{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lstat .wrap{padding-block:clamp(18px,2.4vw,26px);display:grid;gap:14px}
.lstat__tajuk{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.lstat__row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}

.lstat__kad{display:grid;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg);position:relative;overflow:hidden;
  transition:border-color .16s,background .16s,transform .16s}
.lstat__kad::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;
  transition:background .16s}
.lstat__kad:hover,.lstat__kad:focus-visible{border-color:var(--brand-line);background:var(--surface);
  transform:translateY(-1px)}
.lstat__kad:hover::before,.lstat__kad:focus-visible::before{background:var(--brand-soft)}

.lstat__kad b{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:clamp(24px,3vw,32px);
  font-weight:800;line-height:1;color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.lstat__kad span{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.01em}

.lstat__kad.is-on{background:var(--brand);border-color:var(--brand)}
.lstat__kad.is-on::before{background:var(--brand-soft)}
.lstat__kad.is-on b{color:#fff}
.lstat__kad.is-on span{color:rgba(255,255,255,.82)}

/* Varian dalam .wrap sedia ada — dipakai pada Senarai Hartanah dan website
   agent, di mana jalur ini duduk di dalam lajur kandungan. */
.lstat--dalam{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(16px,2vw,22px);display:grid;gap:14px}

@media (max-width:900px){ .lstat__row{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){
  .lstat__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lstat__kad{padding:13px 14px}
}

/* ── Butang dalam langkah proses ─────────────────────────────────────────── */
.proses__btn{margin-top:10px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:8px 14px;border-radius:999px;border:1px solid var(--brand-line);background:var(--surface);
  color:var(--brand);font-size:13px;font-weight:700;transition:background .16s,border-color .16s}
.proses__btn:hover,.proses__btn:focus-visible{background:var(--brand-tint);border-color:var(--brand-soft)}

/* ── Anggaran pembiayaan (halaman hartanah) ──────────────────────────────── */
.fin{display:grid;gap:16px}
.fin__pilih{display:flex;flex-wrap:wrap;gap:8px}
.fin__opt{position:relative}
.fin__opt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.fin__opt span{display:block;padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);font-weight:700;font-size:13.5px;color:var(--ink-2);
  transition:background .16s,border-color .16s,color .16s}
.fin__opt input:checked + span{background:var(--brand);border-color:var(--brand);color:#fff}
.fin__opt input:focus-visible + span{outline:2px solid var(--brand-soft);outline-offset:2px}
.fin__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.fin__sel{background:var(--surface);padding:14px 16px;display:grid;gap:4px}
.fin__sel span{font-size:12px;color:var(--muted);font-weight:600}
.fin__sel b{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:21px;font-weight:800;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.fin__sel--utama{background:var(--brand-tint)}
.fin__sel--utama b{color:var(--brand-dark)}
.fin__nota{font-size:12.5px;color:var(--muted);line-height:1.6}

/* ── Pil status lead ──────────────────────────────────────────────────────── */
.spill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;border:1px solid}
.spill::before{content:'';width:7px;height:7px;border-radius:999px;background:currentColor;flex:0 0 auto}
.spill--putih {background:#FFFFFF;              border-color:#C9D4E0; color:#26313D}
.spill--kuning{background:#FCF3D6;              border-color:#E8CE7E; color:#7A5A08}
.spill--merah {background:#FBE9E7;              border-color:#E9AFA8; color:#9B2C22}
.spill--hijau {background:#E4F3EA;              border-color:#A8D8BC; color:#15633E}
.spill--baru  {background:var(--brand-tint);    border-color:var(--brand-line); color:var(--brand)}

/* ── Hero satu lajur (selepas kalkulator dipindah ke bawah) ───────────────── */
.hero__grid--solo{grid-template-columns:minmax(0,1fr);max-width:70ch}
.hero__grid--solo h1{max-width:18ch}

/* ── Senarai tanda semak ──────────────────────────────────────────────────── */
.ticklist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticklist li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink-2)}
.ticklist li svg{flex:0 0 auto;margin-top:2px;color:var(--brand)}

/* ── Proses beli rumah dalam header ───────────────────────────────────────────
   Panel putih dalam hero gelap, di lajur kanan. Ia mengambil tempat yang
   dahulu dipegang kalkulator kelayakan: ruang pertama yang mata pelawat jatuh
   selepas tajuk. Senarai sengaja padat — penerangan dipotong pada dua baris —
   kerana tugasnya menunjukkan BENTUK proses, bukan menerangkannya habis.
   Penerangan penuh ada di halaman Beli Rumah, satu klik dari butang di bawah. */
.hproses{background:var(--surface);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,26px);
  box-shadow:var(--shadow-lg);display:grid;gap:16px;align-content:start}
.hproses__eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brand)}

.hproses__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.hproses__list li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start}
.hproses__list li + li{border-top:1px solid var(--line-2);padding-top:14px}

.hproses__no{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:12px;font-weight:800;
  color:var(--brand);background:var(--brand-tint);border-radius:8px;min-height:26px;
  display:grid;place-items:center;letter-spacing:.02em}
.hproses__isi{display:grid;gap:3px;min-width:0}
.hproses__isi b{font-size:14.5px;line-height:1.35;color:var(--ink)}
.hproses__isi p{margin:0;font-size:13px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.hproses__pautan{margin-top:4px;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;
  font-weight:700;color:var(--brand)}
.hproses__pautan:hover,.hproses__pautan:focus-visible{text-decoration:underline}
.hproses__pautan svg{flex:0 0 auto}

@media (max-width:900px){
  .hproses{padding:20px}
  .hproses__isi p{-webkit-line-clamp:3}
}

/* Chip dalam hero ialah anak grid, jadi ia meregang penuh lebar lajur tanpa
   ini. Ia sepatutnya memeluk teksnya sendiri. */
.hero .chip{align-self:flex-start}

/* ── Jalur hubungi agent (penutup laman utama) ────────────────────────────
   Satu-satunya jalur navy pekat di laman utama, sengaja. Selepas tujuh
   seksyen berlatar cerah, perubahan warna ini berfungsi sebagai noktah:
   pelawat tahu halaman sudah habis dan yang tinggal cuma satu keputusan.
   Butang WhatsApp kekal warna jenama; nombor telefon jadi pilihan kedua
   yang nyata tetapi tidak bersaing dengan butang utama.                    */
.hubung{background:var(--brand);color:#fff;border-top:1px solid var(--brand-dark)}

/* Varian bergambar. Dua lapisan, bukan satu: ::before membawa gambar,
   ::after membawa tindanan navy. Memisahkannya bermakna kepekatan tindanan
   boleh dilaraskan tanpa menyentuh gambar, dan gambar boleh ditukar dari
   admin tanpa menyentuh CSS.

   Tindanan ini bukan hiasan — ia yang menjamin teks putih kekal terbaca
   walau apa gambar yang klien pilih kemudian. Sebab itu ia pekat di atas dan
   di bawah (tempat teks duduk) dan sedikit lebih nipis di tengah, supaya
   gambar masih nampak tanpa mengorbankan kontras. */
.hubung--gambar{position:relative;isolation:isolate;background:var(--brand-dark)}
.hubung--gambar::before,
.hubung--gambar::after{content:'';position:absolute;inset:0;pointer-events:none}
.hubung--gambar::before{
  z-index:-2;
  background-image:var(--hubung-bg);
  background-size:cover;background-position:center 62%;background-repeat:no-repeat;
}
.hubung--gambar::after{
  z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(10,35,64,.90) 0%,
      rgba(10,35,64,.70) 40%,
      rgba(10,35,64,.78) 74%,
      rgba(10,35,64,.93) 100%);
}
.hubung--gambar .hubung__teks{color:#DCE6F0}
.hubung--gambar .hubung__nota{color:#A9B7C6}
/* Skrin kecil: gambar dipotong terlalu rapat untuk dibaca sebagai pemandangan,
   dan teks jadi lebih panjang. Tindanan dipekatkan supaya kontras menang. */
@media (max-width:700px){
  /* Pada skrin sempit, `cover` memotong gambar 2000px ini kepada jalur tengah
     yang tidak bermakna. Alihkan bingkai ke kiri, di mana ada rumah bercahaya
     — sekurang-kurangnya ia terbaca sebagai rumah, bukan tekstur rawak. */
  .hubung--gambar::before{background-position:26% center}
  .hubung--gambar::after{background:linear-gradient(180deg,rgba(10,35,64,.90),rgba(10,35,64,.82) 50%,rgba(10,35,64,.93))}
}
.hubung__box{
  max-width:60ch;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.hubung__eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-soft);
}
.hubung__tajuk{color:#fff;margin:0;text-wrap:balance}
.hubung__teks{margin:0;color:var(--on-dark);font-size:clamp(15px,1.6vw,17px);line-height:1.65}
.hubung__aksi{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2vw,26px);flex-wrap:wrap;margin-top:8px;
}
.hubung__btn{min-height:52px;padding:14px 26px;font-size:16px}
.hubung .btn--amber{background:#fff;color:var(--brand);border-color:#fff}
.hubung .btn--amber:hover{background:var(--brand-tint);border-color:var(--brand-tint);color:var(--brand-dark)}
.hubung__nota{margin:4px 0 0;color:var(--on-dark-2);font-size:13px}

@media (max-width:520px){
  .hubung__aksi{flex-direction:column;gap:16px;width:100%}
  .hubung__aksi .btn{width:100%;justify-content:center}
}


/* ══ Tablet & telefon ═══════════════════════════════════════════════════════
   Tiga punca sebenar limpahan melintang, dibetulkan di satu tempat.

   1. Grid dengan `grid-template-columns` INLINE dalam templat. Gaya inline
      mengalahkan setiap media query dalam fail ini, jadi grid dua lajur kekal
      dua lajur pada skrin 375px dan lajur kedua terkeluar. Pemilih di bawah
      hanya menyasarkan grid yang MEMANG membawa gaya inline itu — grid lain
      tidak disentuh, jadi susun atur yang sudah betul kekal betul.

   2. Anak grid dan flex lalainya `min-width:auto`, bukan 0. Maknanya kandungan
      lebar (jadual, teks panjang, imej) MENOLAK bekasnya melebar dan bukannya
      mengecil. Inilah sebab satu kad boleh jadi 682px dalam skrin 375px.

   3. `.row` tidak pernah dibenarkan membaluk. Satu baris penapis dengan enam
      butang menjadi 1172px dan menarik seluruh halaman bersamanya.          */

@media (max-width:760px){
  .grid[style*="grid-template-columns"]{grid-template-columns:1fr !important}
}

.grid > *, .stack > *{min-width:0}
.row{flex-wrap:wrap}
.row > *{min-width:0}
.tablewrap{min-width:0;max-width:100%}

/* Baris yang memang perlu kekal satu baris boleh memilih keluar. */
.row--nowrap{flex-wrap:nowrap}

@media (max-width:620px){
  /* Sasaran sentuh: apa-apa yang boleh ditekan sepatutnya sekurang-kurangnya
     44px tinggi. Pautan teks dalam perenggan dikecualikan — menebalkan pautan
     dalam ayat merosakkan jarak baris tanpa memudahkan sesiapa. */
  .btn,.pill,.chip{min-height:44px}
  .btn--sm{min-height:40px}
  .hproses__pautan{min-height:40px;align-items:center}
  .backbar__link{min-height:40px;display:inline-flex;align-items:center}

  /* Tiada teks di bawah 12px pada telefon. 10px boleh dibaca pada monitor
     desktop yang 60cm dari mata; pada telefon dalam cahaya matahari ia tidak. */
  .small,.hint,figcaption,.muted.small{font-size:12.5px}
}

/* Skrol melintang hantu.
   Jadual lebar dalam `.tablewrap` dipotong dengan betul untuk lukisan — kad
   kekal 720px dan jadual menyorot di dalamnya. Tetapi penyorot AKAR masih
   mengira limpahan jadual itu, jadi halaman boleh ditarik 191px ke sisi
   kepada kawasan yang tiada apa-apa dilukis. Pengguna tablet merasainya
   sebagai halaman yang longgar dan bocor.

   `contain:paint` memberitahu pelayar bahawa tiada keturunan elemen ini akan
   melukis di luar sempadannya, jadi limpahan itu tidak lagi dikira oleh akar.
   Diuji: 191px → 0px, dan jadual masih menyorot di dalam kadnya.

   Yang TIDAK berkesan, supaya tidak dicuba semula:
     · html{overflow-x:clip}   — limpahan akar propagate, Chrome abaikan
     · body{overflow-x:clip}   — sama
     · .card{overflow:hidden}  — sama, dan ia memotong bayang fokus
   `overflow-x:hidden` pada html/body memang menutupnya, tetapi ia mematikan
   `position:sticky` pada bar sisi dan kepala jadual. Sebab itu bukan itu. */
.tablewrap{contain:paint}

/* Petunjuk jadual boleh disorot.
   Jadual lebar menyorot di dalam kadnya — tetapi pada skrin sentuh tiada
   apa-apa memberitahu pengguna bahawa ada lagi lajur di sebelah kanan. Kesan
   pudar ini muncul HANYA apabila memang ada sesuatu untuk disorot, dan hilang
   sebaik pengguna sampai ke hujung. `background-attachment:local` pada lapisan
   pudar itulah yang menjadikannya sedar-skrol tanpa satu baris JavaScript. */
@media (max-width:1024px){
  .tablewrap{
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center,
      linear-gradient(to left,  var(--surface) 30%, rgba(255,255,255,0)) right center,
      radial-gradient(farthest-side at 0 50%,    rgba(11,15,20,.14), rgba(0,0,0,0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(11,15,20,.14), rgba(0,0,0,0)) right center;
    background-repeat:no-repeat;
    background-size:36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment:local, local, scroll, scroll;
  }
}

/* Titik carousel: kawasan sentuh, bukan saiz titik.
   Titik 10px kelihatan betul tetapi mustahil ditekan dengan ibu jari. Titik
   itu dilukis dengan ::before supaya rupanya tidak berubah langsung, sementara
   butang sebenar membesar kepada 32px — melebihi had 24px yang disyorkan WCAG
   untuk sasaran sentuh, tanpa mengubah reka bentuk sesiapa pun nampak. */
@media (max-width:1024px){
  .carousel__dots{gap:0}
  .carousel__dots button{
    width:32px;height:32px;background:transparent;display:grid;place-items:center;border-radius:999px;
  }
  .carousel__dots button::before{
    content:'';width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.4);
    transition:width .18s ease,background .18s ease;
  }
  .carousel__dots button.is-on{background:transparent;width:32px}
  .carousel__dots button.is-on::before{background:#fff;width:24px}
}

/* ── Seksyen gelap bergambar ───────────────────────────────────────────────
   Corak yang sama seperti jalur Hubungi agent: dua lapisan, bukan satu.
   ::before membawa gambar, ::after membawa tindanan gelap. Memisahkannya
   bermakna kepekatan tindanan boleh dilaras tanpa menyentuh gambar, dan
   gambar boleh ditukar dari admin tanpa menyentuh CSS.

   Tindanan ini bukan hiasan — ia yang menjamin teks putih dan panel gelap di
   sebelah kanan kekal terbaca walau apa gambar yang klien pilih kemudian.
   Ia dibina condong: lebih pekat di kiri, tempat tajuk dan senarai tanda
   duduk, dan lebih nipis di kanan supaya rumah dalam gambar itu masih
   kelihatan di belakang panel langkah. */
.sect--gambar{position:relative;isolation:isolate;background:var(--dark)}
.sect--gambar > .wrap{position:relative;z-index:1}
.sect--gambar::before,
.sect--gambar::after{content:'';position:absolute;inset:0;pointer-events:none}
.sect--gambar::before{
  z-index:-2;
  background-image:var(--sect-bg);
  background-size:cover;background-position:center 58%;background-repeat:no-repeat;
}
.sect--gambar::after{
  z-index:-1;
  background:
    linear-gradient(100deg,
      rgba(8,12,17,.90) 0%,
      rgba(8,12,17,.78) 34%,
      rgba(8,12,17,.46) 62%,
      rgba(8,12,17,.58) 100%),
    linear-gradient(180deg, rgba(8,12,17,.42) 0%, rgba(8,12,17,0) 26%, rgba(8,12,17,0) 74%, rgba(8,12,17,.48) 100%);
}

/* Panel langkah duduk di atas gambar, jadi ia perlu jasad sendiri — kalau
   tidak, ia hilang menjadi sebahagian daripada latar. */
.sect--gambar .panel--dark{
  background:rgba(10,16,23,.72);
  backdrop-filter:blur(6px);
  border-color:rgba(255,255,255,.14);
}

@media (max-width:860px){
  /* Satu lajur: teks dan panel kini bertindih di atas bahagian gambar yang
     sama, jadi tindanan condong tidak lagi masuk akal. Ratakan dan pekatkan. */
  .sect--gambar::before{background-position:58% 34%}
  .sect--gambar::after{
    background:linear-gradient(180deg, rgba(8,12,17,.90), rgba(8,12,17,.82) 50%, rgba(8,12,17,.91));
  }
}

/* ── Kemudahan & ciri (halaman butiran hartanah) ────────────────────────────
   Klien menampal medan ini terus daripada WhatsApp. Ia dipapar PERSIS seperti
   ditampal — `pre-line` mengekalkan setiap pemisah baris dan baris kosong,
   dan tiada satu aksara pun dibuang atau disusun semula.

   SATU lajur sahaja. Dua lajur pernah dicuba dan salah: susunan yang klien
   taip jadi berselerak sebaik sahaja teks dibahagi melintang.

   Yang diuruskan hanyalah tinggi. Tampalan panjang menolak borang minat jauh
   ke bawah skrin, jadi ia dilipat pada tinggi tetap dengan butang buka/tutup.
   Suisnya checkbox, bukan JS: butang kekal berfungsi walaupun skrip gagal,
   dan tiada kelipan "buka dahulu, kemudian terlipat" semasa halaman dimuat.
   ────────────────────────────────────────────────────────────────────────── */
.kem{position:relative}
.kem__teks{
  white-space:pre-line;         /* kekalkan baris klien; runtuhkan jarak berlebihan */
  overflow-wrap:anywhere;       /* baris "USM | MRSM | ILP | ..." tidak melimpah */
  font-size:15px;line-height:1.7;color:var(--ink-2)
}

/* Keadaan terlipat. 322px ≈ 13 baris — lebih kurang tinggi seksyen ini
   sebelum butang ini wujud, supaya paparan awal tidak berubah. */
.kem--panjang .kem__teks{max-height:560px;overflow:hidden}
.kem__suis:checked ~ .kem__teks{max-height:none}

/* Lapisan pudar supaya potongan tidak kelihatan seperti teks terputus.
   Warnanya mesti sama dengan --bg; latar di belakang seksyen ini lutsinar
   sehingga ke body. */
.kem__kabur{
  position:absolute;left:0;right:0;bottom:46px;height:72px;pointer-events:none;
  background:linear-gradient(to bottom, rgba(247,249,252,0), var(--bg))
}
.kem__suis:checked ~ .kem__kabur{display:none}

.kem__btn{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  min-height:40px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);cursor:pointer;
  font-size:14px;font-weight:600;color:var(--ink-2);
  transition:border-color .15s ease,color .15s ease
}
.kem__btn:hover{border-color:var(--muted-2)}
.kem__btn:focus-visible{outline:2px solid var(--ink-2);outline-offset:2px}
.kem__btn-tutup{display:none}
.kem__suis:checked ~ .kem__btn .kem__btn-buka{display:none}
.kem__suis:checked ~ .kem__btn .kem__btn-tutup{display:inline}

@media (max-width:700px){
  .kem--panjang .kem__teks{max-height:440px}
  .kem__teks{font-size:14.5px}
}

/* ── Disclaimer bawah laman (maklum balas klien #17) ───────────────────────
   Kecil dan tenang: ia mesti ada dan boleh dibaca, tetapi tidak boleh bersaing
   dengan pautan footer untuk perhatian. */
/* .site-foot .wrap ialah flex dengan gap sehingga 44px — tanpa margin negatif
   ini, disclaimer terapung jauh daripada baris hak cipta dan nampak terpisah. */
.foot-disclaimer{margin-top:calc(clamp(28px,4vw,44px) * -1 + 20px);padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
  color:var(--on-dark-2);font-size:12px;line-height:1.65;max-width:92ch;opacity:.85}

/* ── PDPA: kotak persetujuan dalam borang awam ───────────────────────── */
.pdpa{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.55;color:var(--muted);cursor:pointer}
.pdpa input{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;accent-color:var(--brand);cursor:pointer}
.pdpa a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.sect--dark .pdpa{color:var(--on-dark)}
.sect--dark .pdpa a{color:var(--brand-soft)}
.sect--dark .panel .pdpa,.sect--dark .card .pdpa{color:var(--muted)}
.sect--dark .panel .pdpa a,.sect--dark .card .pdpa a{color:var(--brand)}

/* ── Halaman Notis Privasi ──────────────────────────────────────────── */
.privasi{max-width:780px;margin:0 auto}
.privasi__bahasa{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.privasi__bahasa a{padding:7px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--surface)}
.privasi__bahasa a:hover{border-color:var(--brand);color:var(--brand)}
.privasi__teks{color:var(--ink-2);line-height:1.75;font-size:15.5px;scroll-margin-top:96px}
.privasi__teks + .privasi__teks{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.privasi__teks h2,.privasi__judul{font-size:clamp(19px,2vw,22px);color:var(--ink);margin:32px 0 10px;line-height:1.3}
.privasi__teks > :first-child{margin-top:0}
.privasi__teks p{margin:0 0 14px}
.privasi__teks ul{margin:0 0 16px;padding-left:22px}
.privasi__teks li{margin:0 0 6px}