/*
 * CSS halaman listing propertycuan.id — turunan langsung dari mockup yang
 * disetujui Chris 16 September 2026
 * (web/propertycuan/listing/mockup/detail.html).
 *
 * Bedanya dengan mockup: media query memakai lebar VIEWPORT, bukan container
 * query — mockup butuh container query supaya bingkai pratinjau HP ikut berubah;
 * halaman sungguhan tidak.
 *
 * Kontras terhadap #FFFFFF: --tinta 18,9:1 · --navy 12,4:1 · --navy-2 9,1:1 ·
 * --hijau 5,5:1 dengan teks putih. Tidak ada abu-abu (§9), teks isi 18px.
 */

.pcl {
	--tinta: #111318;
	--navy: #183851;
	--navy-2: #2F4C63;
	/* Navy yang lebih gelap untuk hover tombol (keputusan Chris 17 Sep 2026).
	   Sebelumnya hover memakai --tinta, yang praktis hitam — tombol brand yang
	   berubah jadi hitam saat disentuh terbaca seperti tombol yang lain. */
	--navy-gelap: #0E2437;
	--emas: #E8CD86;
	--emas-muda: #F6ECCF;
	--pasir: #FAF7F0;
	--garis: #E5E0D5;
	--hijau: #0B7A3B;
	--hijau-gelap: #08602E;
	--putih: #fff;
	--serif: Georgia, 'Times New Roman', serif;
	--sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	font-family: var(--sans);
	font-size: 18px;
	line-height: 1.65;
	color: var(--tinta);
	background: var(--putih);
}
.pcl *,
.pcl *::before,
.pcl *::after { box-sizing: border-box; }
.pcl img { max-width: 100%; display: block; }
.pcl :where(a) { color: var(--navy); text-underline-offset: 3px; }
.pcl :where(h1, h2, h3) { font-family: var(--serif); color: var(--tinta); line-height: 1.25; margin: 0; }
.pcl-wadah { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Catatan pratinjau sebelum launch. Elemen biasa di alur dokumen: position
   static ditulis eksplisit supaya tidak ada aturan tema yang bisa membuatnya
   melayang di atas header (kejadian 17 Sep 2026 di /agen/). */
.pcl-catatan-pratinjau {
	position: static;
	background: var(--navy); color: #fff; font-size: 16px;
	padding: 10px 24px; margin: 0; text-align: center;
}

/* Bingkai foto rasio tetap. Foto di bawah 960 px TIDAK diperbesar: scale-down di
   atas latar blur dari foto yang sama, jadi tinggi bingkai tetap. */
.pcl-bingkai { margin: 0; position: relative; overflow: hidden; background: var(--pasir); }
.pcl-bingkai img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.pcl-bingkai .pcl-latar {
	position: absolute; inset: -8%; width: 116%; height: 116%;
	object-fit: cover; filter: blur(26px) saturate(.7); z-index: 0;
}
.pcl-bingkai-kecil img { object-fit: scale-down; }

/* Bingkai kartu: persegi, dipotong dari tengah. Tanpa latar blur — foto tegak
   3:4 justru dipotong sedikit atas-bawah, bukan dibiarkan menyisakan pita. */
.pcl-bingkai-kartu { aspect-ratio: 1 / 1; }
.pcl-bingkai-kartu img { object-fit: cover; object-position: center; }

/* 1. Galeri */
.pcl-galeri {
	display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;
	gap: 8px; height: 520px; margin: 20px 0 0; border-radius: 14px; overflow: hidden;
}
.pcl-galeri .pcl-sampul { grid-row: 1 / span 2; }
.pcl-lihat-semua {
	position: absolute; z-index: 2; right: 12px; bottom: 12px;
	background: var(--putih); color: var(--tinta); border: 1px solid var(--garis);
	border-radius: 8px; padding: 8px 14px; font: 600 16px var(--sans); cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.pcl-lihat-semua-hp { display: none; }

/* Tata letak dua kolom */
.pcl-tata { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; margin-top: 28px; }
.pcl-kiri { min-width: 0; grid-column: 1; }
.pcl-kanan { position: sticky; top: 24px; display: grid; gap: 16px; grid-column: 2; grid-row: 1 / span 2; }

/* 2-3. Badge, H1, hook */
.pcl-badge { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.pcl-badge span {
	background: var(--emas-muda); color: var(--navy); border: 1px solid var(--emas);
	border-radius: 999px; padding: 3px 12px; font-size: 15px; font-weight: 600;
}
.pcl-badge .pcl-status { background: var(--navy); color: #fff; border-color: var(--navy); letter-spacing: .04em; }
.pcl h1 { font-size: 36px; font-weight: 700; }
.pcl-hook { font-size: 21px; line-height: 1.5; color: var(--navy); margin: 14px 0 0; }

/* 4-5. Kartu harga */
.pcl-kartu { border: 1px solid var(--garis); border-radius: 14px; background: var(--putih); padding: 22px; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); }
.pcl-harga-label { font-size: 16px; color: var(--navy-2); margin: 0; }
.pcl-harga-ringkas { font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--navy); line-height: 1.1; margin: 2px 0 0; white-space: nowrap; }
.pcl-harga-ringkas small { font-family: var(--sans); font-size: 18px; font-weight: 600; }
.pcl-harga-lengkap { font-size: 17px; color: var(--navy-2); margin: 6px 0 0; white-space: nowrap; }
.pcl-harga-m2 { display: inline-block; margin: 10px 0 0; background: var(--pasir); border: 1px solid var(--garis); border-radius: 8px; padding: 4px 10px; font-size: 16px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.pcl-terjual-teks { font-size: 19px; color: var(--navy); margin: 0; }
.pcl-spek-kunci { font-size: 17px; font-weight: 600; color: var(--navy); margin: 12px 0 0; }
.pcl-kode { font-size: 16px; color: var(--navy-2); margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--garis); }
.pcl-kode b { color: var(--tinta); font-family: ui-monospace, Menlo, monospace; font-size: 17px; white-space: nowrap; }
.pcl-aksi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.pcl-tombol {
	display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
	border-radius: 10px; font: 700 17px var(--sans); text-decoration: none;
	border: 2px solid transparent; padding: 0 14px; cursor: pointer;
}
.pcl a.pcl-tombol-wa { grid-column: 1 / -1; background: var(--hijau); color: #fff; }
.pcl a.pcl-tombol-wa:hover { background: var(--hijau-gelap); }
.pcl .pcl-tombol-tel,
.pcl .pcl-tombol-bagi { background: var(--putih); color: var(--navy); border-color: var(--navy); }
.pcl-tombol svg { width: 22px; height: 22px; flex: none; }

/* 6. Agen */
.pcl-agen { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
.pcl-agen img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: center top; }
.pcl-agen-kosong { width: 76px; height: 76px; border-radius: 50%; background: var(--navy); color: var(--emas); display: grid; place-items: center; font: 700 24px var(--serif); }
.pcl-agen-label { font-size: 15px; color: var(--navy-2); margin: 0; }
.pcl-agen-nama { font-family: var(--serif); font-size: 21px; font-weight: 700; margin: 0; color: var(--tinta); }
.pcl-agen-jabatan { font-size: 16px; color: var(--navy); margin: 0; line-height: 1.45; }
.pcl-agen a { font-size: 16px; font-weight: 600; }

/* 7-8. Spesifikasi, deskripsi */
.pcl-bagian { margin-top: 44px; }
.pcl-bagian h2 { font-size: 27px; margin-bottom: 16px; }
.pcl-spek { width: 100%; border-collapse: collapse; font-size: 18px; }
.pcl-spek th,
.pcl-spek td { padding: 12px 0; border-bottom: 1px solid var(--garis); text-align: left; vertical-align: top; }
.pcl-spek th { font-weight: 400; color: var(--navy); width: 45%; }
.pcl-spek td { font-weight: 600; white-space: nowrap; }
.pcl-deskripsi p { margin: 0 0 14px; }
.pcl-deskripsi .pcl-deskripsi-label,
.pcl-deskripsi p strong:only-child { font-weight: 700; color: var(--tinta); }
.pcl-deskripsi ol,
.pcl-deskripsi ul { margin: 0 0 18px; padding-left: 1.5em; }
.pcl-deskripsi li { margin: 0 0 6px; padding-left: 4px; }
.pcl-deskripsi li::marker { color: var(--navy); font-weight: 700; }

/* 9. Breadcrumb + tautan hub */
.pcl-remah { font-size: 16px; margin: 0; color: var(--navy); padding: 16px 0 2px; }
.pcl-remah ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.pcl-remah li + li::before { content: "›"; margin-right: 8px; color: var(--navy); }
.pcl-kawasan { background: var(--pasir); border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); margin-top: 56px; padding: 40px 0; }
.pcl-kawasan h2 { font-size: 27px; margin-bottom: 12px; }
.pcl-kawasan-isi { display: grid; gap: 20px; max-width: 620px; }
.pcl-tautan-hub { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pcl-tautan-hub a { display: flex; justify-content: space-between; gap: 12px; background: var(--putih); border: 1px solid var(--garis); border-radius: 10px; padding: 14px 16px; font-weight: 600; text-decoration: none; }
.pcl-tautan-hub a span { color: var(--navy-2); font-weight: 400; white-space: nowrap; }

/* 10. Kartu listing (serupa, hub, profil agent) */
.pcl-kartu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; grid-auto-rows: 1fr; list-style: none; padding: 0; margin: 0; }

/* ------------------------------------------------------------------
   TANGGA KOLOM KARTU LISTING (keputusan Chris 18 Sep 2026)

       < 640      1 kolom   kartu mendatar, diatur di @media 639px
       640-1023   2 kolom
       1024-1279  3 kolom   nilai dasar di atas
       1280-1599  4 kolom
       >= 1600    5 kolom

   Ditulis di SATU tempat, bukan disebar ke blok media masing-masing.
   Sebelum ini jumlah kolom diatur di tiga blok yang berjauhan dan salah
   satunya memakai max-width: 1024px — yang berarti tepat di 1024px kartunya
   2 kolom, padahal tier 1024 seharusnya 3.

   Wadahnya ikut melebar di dua tier teratas. Tanpa itu lima kolom dijejalkan
   ke dalam 1180px dan tiap kartu tinggal ~212px: foto 1:1 yang mungil dengan
   judul tiga baris. Yang dilebarkan hanya wadah, sementara .pcl-tata dan
   .pcl-testi dikunci ke lebar sekarang supaya tata letak halaman detail dan
   panjang baris testimoni tidak ikut berubah.
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
	.pcl-kartu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.pcl-wadah { max-width: 1400px; }
	.pcl-kartu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* Kartu menyempit dari ~364px ke ~323px: judul diturunkan sedikit dan
	   diberi satu baris lagi, supaya yang panjang tidak terpotong. */
	.pcl-k h3 { font-size: 18px; -webkit-line-clamp: 4; }
}
@media (min-width: 1600px) {
	.pcl-wadah { max-width: 1680px; }
	.pcl-kartu-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.pcl-k h3 { font-size: 17px; -webkit-line-clamp: 4; }
}
@media (min-width: 1280px) {
	/* Dikunci: halaman detail dan testimoni memakai lebar yang lama. Baris
	   teks sepanjang 1680px tidak terbaca (ATURAN WEBSITE §9). */
	.pcl-tata { max-width: 1180px; margin-left: auto; margin-right: auto; }
	.pcl-testi { max-width: 1180px; }
	.pcl-kawasan-isi, .pcl-penutup-isi { margin-left: auto; margin-right: auto; }
}
.pcl-k { border: 1px solid var(--garis); border-radius: 14px; overflow: hidden; background: var(--putih); text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.pcl-k .pcl-bingkai { aspect-ratio: 1 / 1; flex: none; }
.pcl-k-isi { padding: 14px 16px 18px; display: grid; gap: 6px; flex: 1; }
.pcl-k-tipe { font-size: 15px; color: var(--navy-2); margin: 0; }
.pcl-k h3 { font-size: 19px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcl-k-harga { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--navy); margin: auto 0 0; padding-top: 6px; white-space: nowrap; }
.pcl-k-status { font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: .04em; margin: auto 0 0; padding-top: 6px; }

/* 11. Bukti */
.pcl-bukti { margin-top: 56px; padding: 44px 0; border-top: 1px solid var(--garis); }
.pcl-bukti h2 { font-size: 27px; margin-bottom: 14px; }
.pcl-bukti-atas { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; margin: 0 0 24px; font-size: 18px; }
.pcl-bukti-atas b { color: var(--navy); }
.pcl-testi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pcl-testi figure { margin: 0; border: 1px solid var(--garis); border-radius: 14px; padding: 22px; background: var(--putih); }
.pcl-testi blockquote { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.55; color: var(--tinta); }
.pcl-testi figcaption { margin-top: 12px; font-size: 16px; color: var(--navy); }
.pcl-testi figcaption b { color: var(--tinta); }

/* 12. FAQ */
.pcl-faq details { border-bottom: 1px solid var(--garis); padding: 16px 0; }
.pcl-faq summary { font-weight: 700; font-size: 19px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.pcl-faq summary::-webkit-details-marker { display: none; }
.pcl-faq summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--navy); }
.pcl-faq details[open] summary::after { content: "–"; }
.pcl-faq details p { margin: 10px 0 0; }

/* 13. Penutup — satu-satunya bidang gelap (web/CLAUDE.md D4) */
.pcl-penutup { background: var(--navy); color: #fff; margin-top: 56px; padding: 44px 0; }
.pcl-penutup-isi { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pcl-penutup h2 { color: #fff; font-size: 26px; margin-bottom: 8px; }
.pcl-penutup p { margin: 0 0 16px; color: #fff; }
.pcl .pcl-penutup a { color: #fff; }
.pcl .pcl-penutup a.pcl-tombol { background: var(--emas); color: var(--tinta); display: inline-flex; border-color: var(--emas); }

/* Bar melekat HP */
.pcl-bar-hp { display: none; }

/* Lightbox */
.pcl-lightbox { border: 0; padding: 0; max-width: min(1100px, 96vw); width: 100%; border-radius: 14px; }
.pcl-lightbox::backdrop { background: rgba(17, 19, 24, .8); }
.pcl-lightbox-kepala { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--garis); font-size: 18px; }
.pcl-lightbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; max-height: 80vh; overflow: auto; }
.pcl-lightbox-grid .pcl-bingkai { aspect-ratio: 4 / 3; }
.pcl-lightbox figcaption { font-size: 15px; color: var(--navy); padding: 4px 2px 8px; }

/* Hub + profil agent */
.pcl-hub-kepala { padding: 8px 0 4px; }
.pcl-hub-kepala h1 { font-size: 32px; }
.pcl-hub-jumlah { font-size: 17px; color: var(--navy-2); margin: 8px 0 0; }
/* Keterangan saat yang tampil hasil terdekat, bukan hasil persis. Warna ink
   yang diturunkan, bukan abu-abu (ATURAN WEBSITE §9). */
.pcl-terdekat {
	font-size: 17px; font-weight: 600; color: var(--navy);
	background: var(--pasir); border: 1px solid var(--garis); border-radius: 10px;
	padding: 12px 16px; margin: 0 0 18px;
}
.pcl-kosong { font-size: 18px; margin: 24px 0; }
.pcl-halaman { margin: 32px 0; font-size: 17px; }
.pcl-halaman .page-numbers { padding: 8px 12px; border: 1px solid var(--garis); border-radius: 8px; margin-right: 6px; text-decoration: none; display: inline-block; }
.pcl-halaman .page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }
.pcl-profil { display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: center; margin: 24px 0 8px; }
/* Foto agent: wajah ada di sepertiga atas foto, jadi potongannya dari ATAS —
   object-position center memotong dahi pada foto setengah badan. */
.pcl-profil img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; object-position: center top; }
.pcl-profil h1 { font-size: 32px; }

@media (max-width: 1024px) {
	.pcl-tata { grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; }
	.pcl-galeri { height: 420px; }
}

@media (max-width: 760px) {
	.pcl { font-size: 17px; }
	.pcl-wadah { padding: 0 16px; }
	.pcl-galeri { display: flex; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 0; margin: 0 -16px; gap: 6px; }
	.pcl-galeri .pcl-bingkai { flex: 0 0 88%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
	.pcl-galeri .pcl-sampul { flex-basis: 100%; }
	.pcl-galeri .pcl-lihat-semua { display: none; }
	.pcl-lihat-semua-hp { display: block; position: static; margin: 10px 0 0; width: 100%; }
	.pcl-tata { display: block; margin-top: 18px; }
	.pcl-kanan { position: static; margin-top: 20px; }
	.pcl h1 { font-size: 27px; }
	.pcl-hook { font-size: 19px; }
	.pcl-harga-ringkas { font-size: 34px; }
	.pcl-bagian h2, .pcl-kawasan h2, .pcl-bukti h2 { font-size: 23px; }
	.pcl-testi, .pcl-penutup-isi, .pcl-profil { grid-template-columns: 1fr; gap: 20px; }
	.pcl-profil img { width: 120px; height: 120px; }
	.pcl-kartu-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; }
	.pcl-kartu-grid .pcl-k { flex: 0 0 78%; scroll-snap-align: start; }
	.pcl-hub .pcl-kartu-grid { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; }
	.pcl-hub .pcl-kartu-grid .pcl-k { flex: none; }
	.pcl-spek td { white-space: normal; }
	.pcl-bar-hp {
		display: grid; grid-template-columns: 1fr 56px; gap: 8px;
		position: sticky; bottom: 0; z-index: 5; background: var(--putih);
		border-top: 1px solid var(--garis);
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
	}
	.pcl-bar-hp .pcl-tombol-tel { padding: 0; }
	.pcl .pcl-bar-hp a.pcl-tombol-wa { grid-column: auto; }
	.pcl-lightbox-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   HP < 640px: kartu listing jadi MENDATAR ringkas (keputusan Chris
   17 Sep 2026, pasca-launch).

   Di lebar 390px kartu vertikal tingginya ~540 px — satu kartu memakan
   hampir seluruh layar, dan menggulir 12 listing jadi kerja keras.
   Bentuk mendatar memuat 4-5 kartu per layar.

   Fotonya TETAP 1:1 (112x112) dan tetap turunan pcl-480 yang bersih
   watermark; yang berubah cuma tata letaknya. Desktop dan tablet tidak
   disentuh sama sekali - lihat .pcl-k di atas.

   Blok ini juga MEMBATALKAN carousel gulir-samping dari @media 760px,
   supaya "Pilihan lain" di halaman detail memakai bentuk yang sama
   dengan hub. Satu bentuk kartu di HP, bukan dua.
   ------------------------------------------------------------------ */
@media (max-width: 639px) {
	.pcl-kartu-grid,
	.pcl-hub .pcl-kartu-grid {
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: 10px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
	.pcl-kartu-grid .pcl-k,
	.pcl-hub .pcl-kartu-grid .pcl-k {
		flex: none;
		flex-direction: row;
		min-height: 112px;
	}
	.pcl-k .pcl-bingkai {
		flex: 0 0 112px;
		width: 112px;
		aspect-ratio: 1 / 1;
		align-self: flex-start;
	}
	.pcl-k-isi {
		padding: 10px 12px;
		gap: 4px;
		min-width: 0;
		align-content: start;
	}
	.pcl-k-tipe { font-size: 13px; line-height: 1.5; }
	.pcl-k h3 { font-size: 16px; line-height: 1.25; }
	.pcl-k-harga { font-size: 18px; line-height: 1.2; margin: 0; padding-top: 2px; }
	.pcl-k-status { font-size: 14px; line-height: 1.2; margin: 0; padding-top: 2px; }
}

/* ------------------------------------------------------------------
   BLOK "CARI PROPERTI" + chip filter + hasil kosong + jelajah kawasan
   (keputusan Chris 17 Sep 2026, pasca-launch).

   Tidak ada abu-abu di sini (§9): label dan teks sekunder memakai
   --navy-2 (9,1:1 terhadap putih), teks isi --tinta (18,9:1). Tinggi
   kontrol 48px supaya tetap nyaman ditekan di layar ponsel.
   ------------------------------------------------------------------ */
.pcl-cari { margin: 18px 0 26px; }
.pcl-cari > h2 { font-size: 23px; margin: 0 0 12px; }
.pcl-cari-form {
	background: var(--pasir); border: 1px solid var(--garis); border-radius: 14px;
	padding: 16px; display: grid; gap: 12px;
}
.pcl-cari-label { display: block; font-size: 15px; font-weight: 600; color: var(--navy-2); margin: 0 0 4px; }
.pcl-cari-atas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.pcl-cari-kata { min-width: 0; }
.pcl-cari input[type="search"],
.pcl-cari select,
.pcl-cari-ringkas select {
	width: 100%; height: 48px; padding: 0 12px; margin: 0;
	font: 400 17px var(--sans); color: var(--tinta);
	background: var(--putih); border: 1px solid var(--navy-2); border-radius: 10px;
	-webkit-appearance: none; appearance: none;
}
.pcl-cari select,
.pcl-cari-ringkas select { padding-right: 36px; }
/* Panah dropdown digambar dengan border, BUKAN background-image.
   FlyingPress me-lazy-load setiap elemen yang punya background-image — ia
   menambahkan kelas flying-press-lazy-bg dan memaksa background-image:none
   sampai elemennya masuk viewport. Untuk ikon 12x8 px itu berarti select tanpa
   panah sama sekali kalau JavaScript-nya tidak jalan. */
.pcl-cari-pilih { position: relative; display: block; }
.pcl-cari-pilih::after {
	content: ""; position: absolute; right: 15px; bottom: 19px;
	width: 9px; height: 9px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
	transform: rotate(45deg); pointer-events: none;
}
.pcl-cari input[type="search"]::placeholder { color: var(--navy-2); opacity: 1; }
.pcl-cari input[type="search"]:focus,
.pcl-cari select:focus,
.pcl-cari-ringkas select:focus { outline: 3px solid var(--emas); outline-offset: 1px; }
.pcl-cari .pcl-tombol,
.pcl-cari-ringkas .pcl-tombol { min-height: 48px; background: var(--navy); color: #fff; border-color: var(--navy); }
.pcl-cari .pcl-tombol:hover,
.pcl-cari-ringkas .pcl-tombol:hover { background: var(--navy-gelap); border-color: var(--navy-gelap); }
/* Satu kolom sebagai dasar; jumlah kolomnya dinaikkan di media query di bawah. */
.pcl-cari-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.pcl-cari-grid label { min-width: 0; }
.pcl-cari-lipat > summary {
	display: flex; justify-content: space-between; align-items: center;
	min-height: 48px; padding: 0 14px; border: 2px solid var(--navy); border-radius: 10px;
	background: var(--putih); color: var(--navy); font: 700 17px var(--sans);
	cursor: pointer; list-style: none;
}
.pcl-cari-lipat > summary::-webkit-details-marker { display: none; }
.pcl-cari-lipat > summary::after { content: "▾"; font-size: 18px; }
.pcl-cari-lipat[open] > summary::after { content: "▴"; }
/* Tombol "Filter" hanya disembunyikan kalau listing.js sudah menandai form ini
   dan membuka <details>-nya. Tanpa JavaScript penanda itu tidak pernah ada,
   jadi tombolnya tetap tampil dan tetap berfungsi — bukan filter yang hilang. */
.pcl-cari-form[data-pcl-js] .pcl-cari-lipat > summary { display: none; }

/*
 * Tombol "Terapkan Filter" berukuran SAMA PERSIS dengan kotak select di
 * sebelahnya (keputusan Chris 17 Sep 2026): satu kolom grid penuh, tinggi 48px.
 *
 * `align-self: end` mendudukkannya sejajar dengan KOTAK select, bukan dengan
 * label di atasnya — tanpa itu ia ikut tinggi baris (±77px, karena kontrol di
 * sebelahnya membawa label di atas kotaknya).
 *
 * Tinggi 48px, bukan 52px bawaan .pcl-tombol, karena 48px itulah tinggi select
 * dan input di blok ini.
 */
.pcl-cari-terapkan {
	align-self: end; justify-self: stretch;
	width: 100%; height: 48px; min-height: 48px; padding: 0 16px;
}

/*
 * Jumlah kolom baris filter dipatok, bukan auto-fit.
 *
 * `repeat(auto-fit, minmax(178px, 1fr))` memuat lima kolom di lebar isi 1100px,
 * jadi tujuh kontrol jatuh 5 + 2 dan tombolnya mendarat di tempat yang
 * berubah-ubah mengikuti lebar jendela.
 *
 * EMPAT kolom di layar lebar, bukan tiga: enam select plus tombol = tujuh sel,
 * jadi empat kolom menaruh tombol tepat di sebelah "Urutkan" di baris kedua.
 * Tiga kolom akan mengisi dua baris dengan select saja dan membuang tombolnya
 * sendirian ke baris ketiga.
 *
 * min-height memesan tinggi baris filter supaya grid kartu di bawahnya tidak
 * melompat saat listing.js membuka <details> (server mengirimnya tertutup, demi
 * HP). 77px per baris = label (29) + kontrol (48); ditambah gap 12 antar baris
 * dan 12 jarak atas grid. Dua baris = 178, tiga baris = 267.
 */
@media (min-width: 640px) {
	.pcl-cari-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pcl-cari-lipat { min-height: 267px; }
}
@media (min-width: 1024px) {
	.pcl-cari-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pcl-cari-lipat { min-height: 178px; }
}

.pcl-chip-baris { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.pcl-chip-baris .pcl-cari-label { margin: 0; }
.pcl-chip {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--emas-muda); border: 1px solid var(--emas); color: var(--navy);
	border-radius: 999px; padding: 6px 14px; font-size: 16px; font-weight: 600; text-decoration: none;
}
.pcl-chip:hover { background: var(--emas); }
.pcl-chip-x { font-size: 19px; line-height: 1; }
.pcl-chip-reset { font-size: 16px; font-weight: 700; color: var(--navy); }
.pcl-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pcl-kosong { margin: 28px 0 8px; font-size: 18px; }
.pcl-kosong-judul { font-family: var(--serif); font-size: 21px; font-weight: 700; margin: 0 0 8px; }
.pcl-kosong p { margin: 0 0 6px; }
.pcl .pcl-kosong a.pcl-tombol-wa { grid-column: auto; max-width: 360px; margin-top: 18px; }
.pcl-kawasan-tautan {
	list-style: none; padding: 0; margin: 12px 0 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px;
}
/*
 * Kartu kawasan: nama panjang ("Citra Garden Serpong") boleh turun baris, tapi
 * jumlah listing tetap SATU baris, rata atas di kanan — dan semua kartu dalam
 * satu baris grid setinggi kartu tertinggi.
 *
 * <li> dibuat flex supaya <a> di dalamnya ikut tinggi sel grid; tanpa itu <a>
 * menciut seukuran isinya dan kartu bernama pendek jadi lebih rendah daripada
 * tetangganya. `align-items: flex-start` menahan jumlah listing di atas saat
 * namanya jadi dua baris.
 */
.pcl-kawasan-tautan li { display: flex; }
.pcl-kawasan-tautan a {
	display: flex; flex: 1; justify-content: space-between; align-items: flex-start;
	gap: 12px; background: var(--putih);
	border: 1px solid var(--garis); border-radius: 10px; padding: 12px 16px;
	font-weight: 600; text-decoration: none;
}
.pcl-kawasan-tautan a span { flex: none; color: var(--navy-2); font-weight: 400; white-space: nowrap; }
.pcl-jelajah {
	margin-top: 48px; padding: 36px 0; background: var(--pasir);
	border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis);
}
.pcl-jelajah h2 { font-size: 27px; margin: 0 0 14px; }
/*
 * Judul grup kawasan (keputusan Chris 17 Sep 2026).
 *
 * <h3> sungguhan, bukan <p> bergaya: daftar ini punya struktur nyata, dan
 * pembaca layar berhak mendengarnya. HURUF BESAR dikerjakan CSS, bukan ditulis
 * di HTML — teks di DOM tetap "Kawasan Utama" supaya bisa dibaca utuh dan
 * dibandingkan apa adanya oleh tes.
 *
 * Warna --navy (12,4:1 terhadap putih), BUKAN abu-abu (§9). Aksen emas dipasang
 * sebagai ::after — garis pendek di bawah judul — jadi tidak ada gambar yang
 * bisa dicegat lazy-load FlyingPress.
 *
 * Jarak atas 40px membuat tiap grup terbaca sebagai blok sendiri; tanpa itu
 * judul grup berikutnya terlihat menempel pada kartu terakhir grup sebelumnya.
 */
.pcl-jelajah-region {
	position: relative;
	font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--navy);
	text-transform: uppercase; letter-spacing: .09em;
	margin: 40px 0 16px; padding-bottom: 10px;
}
.pcl-jelajah-region::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 46px; height: 3px; background: var(--emas); border-radius: 2px;
}
.pcl-jelajah-region:first-of-type { margin-top: 8px; }
.pcl-jelajah .pcl-kawasan-tautan,
.pcl-kawasan-region .pcl-kawasan-tautan { margin-top: 0; }

/*
 * Kawasan Utama sedikit lebih menonjol: latar krem yang lebih tegas dan garis
 * emas. UKURAN KARTU TIDAK BERUBAH — hanya warnanya — supaya tinggi baris tetap
 * seragam dengan grup lain.
 *
 * Kontras pada latar krem: --navy 10,4:1 · --navy-2 7,3:1. Dua-duanya di atas
 * ambang §9.
 */
.pcl-jelajah-utama a { background: var(--emas-muda); border-color: var(--emas); }

@media (max-width: 639px) {
	.pcl-cari > h2 { font-size: 21px; }
	.pcl-cari-form { padding: 12px; }
	.pcl-cari-atas { grid-template-columns: 1fr; }
	.pcl-kawasan-tautan { grid-template-columns: 1fr; }
	.pcl .pcl-kosong a.pcl-tombol-wa { max-width: none; }
	.pcl-jelajah h2 { font-size: 23px; }
}


/* ------------------------------------------------------------------
   KOMPONEN SHORTCODE untuk halaman di LUAR /listing/
   (keputusan Chris 17 Sep 2026 — homepage V2).

   .pcl-sc melepas latar putih milik .pcl supaya latar section Elementor
   yang di belakangnya tetap terlihat; token warna dan ukuran teksnya
   tetap ikut .pcl.

   Tidak ada background-image di seluruh blok ini: FlyingPress me-lazy-
   load setiap elemen yang punya dan memaksanya none sampai masuk
   viewport. Foto kartu dipasang sebagai <img>.
   ------------------------------------------------------------------ */
.pcl-sc { background: transparent; }

/* [pcl_cari_ringkas] — satu baris di desktop, menumpuk di HP. */
.pcl-cari-ringkas form {
	display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
	gap: 10px; align-items: end;
	background: var(--putih); border: 1px solid var(--garis); border-radius: 14px; padding: 14px;
}
.pcl-cari-ringkas .pcl-cari-pilih { display: block; position: relative; min-width: 0; }
.pcl-cari-ringkas .pcl-tombol { align-self: end; height: 48px; padding: 0 28px; }
@media (max-width: 639px) {
	.pcl-cari-ringkas form { grid-template-columns: 1fr; }
	.pcl-cari-ringkas .pcl-tombol { width: 100%; }
}

/* [pcl_kawasan_utama] — empat kartu bergambar. */
.pcl-kk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pcl-kk {
	display: flex; flex-direction: column; overflow: hidden;
	border: 1px solid var(--garis); border-radius: 14px; background: var(--putih);
	text-decoration: none; color: inherit;
}
.pcl-kk-foto { aspect-ratio: 4 / 3; flex: none; }
.pcl-kk-foto img { width: 100%; height: 100%; object-fit: cover; }
.pcl-kk-isi { padding: 14px 16px 18px; }
.pcl-kk h3 { font-size: 21px; font-weight: 700; margin: 0; }
.pcl-kk p { margin: 4px 0 0; font-size: 16px; color: var(--navy-2); }
.pcl-kk:hover { border-color: var(--emas); }
@media (max-width: 1023px) { .pcl-kk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .pcl-kk-grid { grid-template-columns: 1fr; } }

/* [pcl_listing_pilihan] — kartu yang SAMA dengan /listing/, plus satu tombol. */
.pcl-pilihan .pcl-kartu-grid { margin: 0; padding: 0; }
.pcl-pilihan-semua { margin: 24px 0 0; text-align: center; }
.pcl .pcl-pilihan-semua a.pcl-tombol {
	display: inline-flex; background: var(--navy); color: #fff; border-color: var(--navy); padding: 0 28px;
}
.pcl .pcl-pilihan-semua a.pcl-tombol:hover { background: var(--navy-gelap); border-color: var(--navy-gelap); }

/* ------------------------------------------------------------------
   FOTO TESTIMONI HOMEPAGE — bingkai 4:5 tegak
   (keputusan Chris 18 September 2026)

   Ketiga fotonya TEGAK, tapi widget Elementor-nya memaksa tinggi tetap 280px
   dengan object-fit: cover — jadi yang tampil cuma pita tengahnya dan kepala
   orangnya terpotong. Tinggi tetap itu sudah dilepas dari _elementor_data;
   yang di sini memberi bingkainya bentuk 4:5 dan menjangkarkan potongan ke
   ATAS, supaya wajah tidak pernah jadi bagian yang dibuang.

   KENAPA DI BERKAS INI. listing.css memang sudah termuat di homepage —
   halaman ini memakai [pcl_kawasan_utama], dan halaman_pakai_shortcode()
   yang membawanya. Ada tes yang menjaga itu ("homepage 551: listing.css ikut
   termuat"); kalau suatu hari shortcode-nya dicabut dari homepage, tes itu
   jatuh lebih dulu daripada foto testimoninya berubah bentuk.

   Memasang CSS situs lewat WPCode adalah pengecualian yang Chris berikan
   KHUSUS forestinecitra.id (CLAUDE.md §12); propertycuan.id tidak ikut, jadi
   tidak ada snippet baru dibuat di sini.
   ------------------------------------------------------------------ */
.elementor-element-c582970 .elementor-widget-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	height: auto;
	object-fit: cover;
	object-position: center top;
	display: block;
}
/* Tinggi kartu seragam dalam satu baris: kolomnya sama tinggi, dan isinya
   diregangkan supaya kutipan yang lebih pendek tidak memendekkan kartunya. */
.elementor-element-c582970 > .elementor-container { align-items: stretch; }
.elementor-element-c582970 > .elementor-container > .elementor-column > .elementor-widget-wrap {
	align-content: flex-start;
}
@media (max-width: 767px) {
	/* Di HP kolomnya menumpuk; 4:5 penuh selebar layar terlalu tinggi untuk
	   satu layar, jadi bingkainya dilebarkan sedikit tanpa kembali mendatar. */
	.elementor-element-c582970 .elementor-widget-image img { aspect-ratio: 1 / 1; }
}