/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   DESAIN BARU SITUS PUBLIK WINMAX (pemilik 20 Okt 2026: "aku mau ubah total design winmaxagent.com" / "kita buat versi terbaik dan
   sangat elegan dan mudah dipakai" / mockup disetujui: "oke lanjut kerjakan di kode situsnya"). Mockup kanvas "Mockup WinMax Agent
   Baru" (beranda, cari, detail, panel Search, tiga layar HP).
   ⛔ FITUR PENCARIAN TETAP CARA LAMA (pemilik: "ingat semua fitur2 searchnya harus benar2 masih pakai cara lama yaa, itu kelebihan
   kita"): nama parameter, isian panel Search, urutannya, dan logikanya tidak berubah — berkas ini cuma memberi RUPA.
   Semua kelas berawalan wm- supaya tidak bertabrakan dengan CSS lama (vendor.css / style3.css) di halaman yang masih memuatnya.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --wm-navy: #18225C;
  --wm-navy-gelap: #10163C;
  --wm-biru: #2B3A97;
  --wm-oranye: #C24E12;      /* oranye yang lolos kontras 4,5:1 dengan teks putih */
  --wm-oranye-muda: #F7A26B; /* aksen di latar gelap */
  --wm-tinta: #1E2333;
  --wm-redup: #5B6178;
  --wm-garis: #E6E8EF;
  --wm-garis-isian: #DDE0EA;
  --wm-lembut: #F4F5F8;
  --wm-biru-lembut: #EEF0FA;
  --wm-latar: #F6F7FA;
  --wm-huruf: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
body.wm { margin: 0; background: #FFFFFF; color: var(--wm-tinta); font-family: var(--wm-huruf); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
/* ~~body.wm.wm-latar-abu { background: var(--wm-latar) }~~ -> PUTIH (pemilik 23 Okt 2026 malam, potret halaman Listing: "backgroundnya kok ga
   putih"): sejak area info kartu berlatar abu-abu (#F2F3F6), latar halaman abu-abu membuat kartu menyatu dengannya. */
body.wm.wm-latar-abu { background: #FFFFFF; }
.wm *, .wm *::before, .wm *::after { box-sizing: border-box; }
.wm img { max-width: 100%; }
.wm a { color: var(--wm-biru); }
.wm h1, .wm h2, .wm h3 { font-family: var(--wm-huruf); }
.wm-wadah { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.wm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── BILAH ATAS ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.wm-bilah { position: relative; z-index: 50; background: #FFFFFF; border-bottom: 1px solid var(--wm-garis); }
.wm-bilah.wm-bilah--tembus { position: absolute; left: 0; right: 0; top: 0; background: transparent; border-bottom: 0; }
.wm-bilah-isi { display: flex; align-items: center; gap: 36px; min-height: 72px; }
.wm-logo { display: flex; align-items: center; flex: none; }
.wm-logo img { height: 34px; width: auto; display: block; }
.wm-menu { display: flex; gap: 28px; flex: 1; }
.wm-menu a { color: #3A4060; text-decoration: none; font-size: 15px; font-weight: 600; padding: 6px 0; border-bottom: 2px solid transparent; }
.wm-menu a:hover { color: var(--wm-navy); }
.wm-menu a.wm-aktif { color: var(--wm-navy); font-weight: 700; border-bottom-color: #F07A2E; }
.wm-bilah--tembus .wm-menu a { color: #FFFFFF; }
.wm-bilah--tembus .wm-menu a:hover { color: #FFFFFF; opacity: .85; }
.wm-bilah-kanan { display: flex; align-items: center; gap: 10px; margin-left: auto !important; }
.wm-tombol-ikon { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--wm-garis-isian); background: #FFFFFF; color: var(--wm-navy); display: inline-grid; place-items: center; cursor: pointer; text-decoration: none; padding: 0; }
.wm-tombol-ikon svg { width: 20px; height: 20px; }
.wm-bilah--tembus .wm-tombol-ikon { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #FFFFFF; }
.wm-burger { display: none; }
@media (max-width: 900px) {
  .wm-wadah { padding: 0 16px; }
  .wm-bilah-isi { gap: 12px; min-height: 64px; }
  .wm-logo img { height: 28px; }
  .wm-burger { display: inline-grid; }
  .wm-menu { display: none; position: absolute; left: 12px; right: 12px; top: 64px; flex-direction: column; gap: 0; padding: 8px; background: #FFFFFF; border-radius: 16px; box-shadow: 0 18px 40px rgba(16,22,60,.18); }
  .wm-menu.wm-buka { display: flex; }
  .wm-menu a, .wm-bilah--tembus .wm-menu a { color: var(--wm-navy); padding: 14px 12px; border-bottom: 1px solid var(--wm-lembut); border-radius: 0; }
  .wm-menu a:last-child { border-bottom: 0; }
  .wm-menu a.wm-aktif { border-bottom-color: var(--wm-lembut); color: #C24E12; }
}

/* ── HERO BERANDA ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.wm-hero { position: relative; height: 640px; overflow: hidden; background: var(--wm-navy); }
.wm-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
/* Lapisan gelap: pekat di sisi teks (kiri & atas) supaya tulisan terbaca di foto yang terang (pemilik 20 Okt 2026: "tulisannya hampir
   ketutupan background, ga kebaca"); kanan tetap memperlihatkan foto. */
.wm-hero-lapis { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,22,60,.88) 0%, rgba(16,22,60,.78) 40%, rgba(16,22,60,.5) 75%, rgba(16,22,60,.4) 100%), linear-gradient(180deg, rgba(16,22,60,.35) 0%, rgba(16,22,60,0) 30%); }
.wm-hero-kecil, .wm-hero h1, .wm-hero-sub { text-shadow: 0 2px 18px rgba(10,14,40,.45); }
.wm-hero-sub b { color: #FFFFFF; font-weight: 700; }
/* Keunggulan di bawah kotak cari beranda: tiga kolom di layar lebar, bertumpuk di HP. */
.wm-unggul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wm-unggul li { display: flex; gap: 14px; align-items: flex-start; background: #FFFFFF; border: 1px solid var(--wm-garis); border-radius: 16px; padding: 18px; }
.wm-unggul-ikon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--wm-biru-lembut); color: var(--wm-biru); }
.wm-unggul-ikon svg { width: 22px; height: 22px; }
.wm-unggul b { display: block; font-size: 16px; color: var(--wm-navy); margin-bottom: 4px; }
.wm-unggul span:not(.wm-unggul-ikon) { display: block; font-size: 14px; line-height: 1.55; color: var(--wm-redup); }
@media (max-width: 900px) { .wm-unggul { grid-template-columns: 1fr; gap: 10px; } .wm-unggul li { padding: 14px; } }
.wm-hero-isi { position: relative; padding-top: 140px; }
.wm-hero-kecil { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wm-oranye-muda); }
.wm-hero h1 { margin: 0; max-width: 720px; font-size: 54px; line-height: 1.08; font-weight: 800; color: #FFFFFF; letter-spacing: -.02em; }
.wm-hero-sub { margin: 18px 0 0; max-width: 560px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.94); }
@media (max-width: 900px) {
  .wm-hero { height: 520px; }
  .wm-hero-isi { padding-top: 104px; }
  .wm-hero h1 { font-size: 32px; line-height: 1.14; }
  .wm-hero-sub { font-size: 15px; }
  .wm-hero-lapis { background: linear-gradient(180deg, rgba(16,22,60,.82) 0%, rgba(16,22,60,.74) 60%, rgba(16,22,60,.6) 100%); }
}

/* ── PILIHAN & TOMBOL bersama (dipakai semua halaman situs; dipulihkan sesudah revamp kotak cari cepat) ── */
.wm-pil { height: 52px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--wm-garis-isian); background: #FFFFFF; color: #3A4060; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.wm-pil[aria-pressed="true"] { border-color: var(--wm-navy); background: var(--wm-navy); color: #FFFFFF; font-weight: 700; }
.wm-pil--kecil { height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14px; }
.wm-tombol { height: 52px; padding: 0 22px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid var(--wm-garis-isian); background: #FFFFFF; color: var(--wm-navy); }
.wm-tombol svg { width: 18px; height: 18px; flex: none; }
.wm-tombol--utama { border: 0; background: var(--wm-oranye); color: #FFFFFF; padding: 0 28px; font-size: 16px; }
.wm-tombol--utama:hover { background: #A9420E; color: #FFFFFF; }
.wm-tombol--navy { border: 0; background: var(--wm-navy); color: #FFFFFF; }
/* `.wm a` (warna tautan biru) lebih spesifik dari kelas tombol: tombol yang berupa <a> wajib menegaskan warnanya sendiri. */
.wm a.wm-tombol { color: var(--wm-navy); }
.wm a.wm-tombol--navy, .wm a.wm-tombol--utama { color: #FFFFFF; }
/* ── KOTAK CARI CEPAT (beranda) — REVAMP 20 Okt 2026 (pemilik: "ini revamp lagi, sangaat2 tidak enak UXnya"). Nilai yang dikirim tetap
   panel Search lama (judul / transaksi / tipe_property / openFilter). Layar lebar: tab di atas, kolom + Search sebaris, jenis di bawah.
   HP: tab selebar kartu, kolom, jenis (geser), Search selebar kartu. Kolom = chip kata kunci + isian; ikon Filter di ujungnya. ─────── */
.wm-cari { position: relative; margin-top: -150px; z-index: 5; }
.wm-cari form { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tab ai" "kolom kirim" "jenis jenis"; gap: 14px 12px; background: #FFFFFF; border-radius: 20px; box-shadow: 0 24px 60px rgba(16,22,60,.18); padding: 18px 22px 20px; }
.wm-cari-tab { grid-area: tab; justify-self: start; display: inline-flex; gap: 2px; padding: 4px; background: var(--wm-lembut); border-radius: 999px; }
.wm-cari-tab button { border: 0; background: transparent; height: 36px; padding: 0 20px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--wm-redup); cursor: pointer; transition: background .15s, color .15s; }
.wm-cari-tab button[aria-checked="true"] { background: #FFFFFF; color: var(--wm-navy); font-weight: 700; box-shadow: 0 2px 8px rgba(16,22,60,.12); }
.wm-cari-kolom { grid-area: kolom; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 6px 6px 16px; border: 1.5px solid var(--wm-garis-isian); border-radius: 14px; background: #FFFFFF; cursor: text; transition: border-color .15s, box-shadow .15s; }
.wm-cari-kolom:focus-within { border-color: var(--wm-biru); box-shadow: 0 0 0 3px rgba(43,58,151,.12); }
.wm-cari-kolom > svg { width: 20px; height: 20px; flex: none; color: var(--wm-redup); }
.wm-cari-isi { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wm-cari-chip-daftar { display: contents; }
.wm-cari-isi input { flex: 1 1 80px; min-width: 0; height: 40px; border: 0; outline: 0; font: inherit; font-size: 16px; font-weight: 500; color: var(--wm-tinta); background: transparent; }
.wm-cari-isi input::placeholder { color: #9AA0B5; font-weight: 400; }
.wm-cari-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 30px; padding: 0 4px 0 12px; border-radius: 999px; background: var(--wm-biru-lembut); color: var(--wm-navy); font-size: 14px; font-weight: 600; }
.wm-cari-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-cari-chip button { flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.wm-cari-chip button:hover { background: rgba(16,22,60,.08); }
.wm-cari-filter { flex: none; align-self: stretch; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-left: 1px solid var(--wm-garis); background: transparent; color: var(--wm-navy); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.wm-cari-filter svg { width: 18px; height: 18px; }
.wm-cari-filter:hover { color: var(--wm-biru); }
.wm-cari-kirim { grid-area: kirim; height: 56px; border-radius: 14px; }
.wm-cari-jenis { grid-area: jenis; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wm-cari-jenis-label { font-size: 13px; font-weight: 600; color: var(--wm-redup); margin-right: 2px; }
/* CARI LEWAT AI (pemilik 22 Okt 2026, "kalau versi hp, ada juga info kalau bisa lewat AI carinya") -> membuka WinMax Assistant. */
.wm-cari-ai { grid-area: ai; justify-self: end; align-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 6px; border: 1px solid #F2C6A8; border-radius: 999px; background: #FFF6F0; color: #9A3D0E; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.wm-cari-ai:hover { background: #FFEDE1; }
.wm-cari-ai img { width: 30px; height: 30px; flex: none; }
@media (max-width: 900px) {
  .wm-cari { margin-top: -132px; }
  .wm-cari form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tab" "kolom" "jenis" "kirim" "ai"; gap: 12px; padding: 14px; border-radius: 18px; }
  .wm-cari-tab { justify-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); }
  .wm-cari-tab button { padding: 0 6px; }
  .wm-cari-kolom { min-height: 52px; padding-left: 14px; }
  .wm-cari-chip { height: 28px; font-size: 13px; padding-left: 10px; }
  .wm-cari-filter { padding: 0 12px; }
  .wm-cari-filter-teks { display: none; }
  .wm-cari-jenis { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
  .wm-cari-jenis::-webkit-scrollbar { display: none; }
  .wm-cari-jenis-label { display: none; }
  .wm-cari-jenis .wm-pil { flex: none; height: 34px; padding: 0 13px; font-size: 13px; }
  .wm-cari-kirim { width: 100%; height: 50px; }
  .wm-cari-ai { justify-self: center; }
}

/* ── BAGIAN & JUDUL ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.wm-bagian { padding-top: 76px; }
.wm-bagian-kepala { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.wm-bagian-kecil { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wm-oranye); }
.wm-bagian h2 { margin: 0; font-size: 34px; font-weight: 800; color: var(--wm-navy); letter-spacing: -.01em; line-height: 1.15; }
.wm-lihat { font-size: 15px; font-weight: 700; color: var(--wm-biru); text-decoration: none; white-space: nowrap; }
.wm-lihat:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .wm-bagian { padding-top: 44px; }
  .wm-bagian h2 { font-size: 24px; }
  .wm-bagian-kecil { font-size: 12px; }
}

/* ── KARTU LISTING ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.wm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.wm-kartu { background: #FFFFFF; border: 1px solid var(--wm-garis); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.wm-kartu:hover { box-shadow: 0 16px 36px rgba(16,22,60,.10); transform: translateY(-2px); }
.wm-kartu-foto { position: relative; display: block; aspect-ratio: 4 / 3; background: #EEF0F5; overflow: hidden; }
.wm-kartu-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wm-lencana-baris { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.wm-lencana { padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--wm-navy); font-size: 12px; font-weight: 700; line-height: 1.3; }
.wm-lencana--hot { background: var(--wm-oranye); color: #FFFFFF; }
/* Cocok Untuk Investor (24 Okt 2026): lencana navy di kartu. ~~Alasan pilihan di kartu (.wm-kartu-catatan)~~ dicabut 25 Okt 2026:
   alasan hanya di panel admin. */
.wm-lencana--investor { background: var(--wm-navy); color: #FFFFFF; }
.wm-jumlah-foto { position: absolute; right: 12px; bottom: 12px; padding: 4px 9px; border-radius: 8px; background: rgba(16,22,60,.72); color: #FFFFFF; font-size: 12px; font-weight: 600; }
.wm-kartu-isi { padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wm-kartu-harga { font-size: 22px; font-weight: 800; color: var(--wm-navy); letter-spacing: -.01em; line-height: 1.25; }
.wm-kartu-judul { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--wm-tinta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wm-kartu-judul a { color: inherit; text-decoration: none; }
.wm-kartu-lokasi { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--wm-redup); }
.wm-kartu-lokasi svg { width: 14px; height: 14px; flex: none; }
.wm-spek { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wm-spek span { padding: 5px 9px; border-radius: 8px; background: var(--wm-lembut); font-size: 12px; color: #3A4060; }
.wm-spek b { color: var(--wm-navy); }
.wm-kartu-agen { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid #EEF0F5; }
.wm-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--wm-biru-lembut); flex: none; }
.wm-avatar-tumpuk { display: flex; flex: none; }
.wm-avatar-tumpuk .wm-avatar { border: 2px solid #FFFFFF; margin-left: -10px; }
.wm-avatar-tumpuk .wm-avatar:first-child { margin-left: 0; }
.wm-agen-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wm-agen-teks .user_agent_name, .wm-agen-teks .wm-agen-nama { font-size: 14px; font-weight: 700; color: var(--wm-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-agen-teks .user_agent_address, .wm-agen-teks .wm-agen-kantor { font-size: 12px; color: var(--wm-redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-wa { height: 42px; padding: 0 14px; border-radius: 11px; background: var(--wm-navy); color: #FFFFFF !important; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 700; flex: none; }
.wm-wa:hover { background: #222E78; }
.wm-wa svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .wm-grid { gap: 16px; }
  .wm-geser { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
  .wm-geser > .wm-kartu { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ── WILAYAH ────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.wm-wilayah { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.wm-wilayah a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-radius: 16px; background: var(--wm-lembut); text-decoration: none; color: var(--wm-navy); transition: background .15s; }
.wm-wilayah a:hover { background: var(--wm-biru-lembut); }
.wm-wilayah b { display: block; font-size: 17px; }
.wm-wilayah small { display: block; margin-top: 3px; font-size: 13px; color: var(--wm-redup); }
.wm-wilayah .wm-panah { font-size: 20px; color: var(--wm-biru); }
@media (max-width: 900px) {
  .wm-wilayah { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wm-wilayah a { padding: 14px; }
  .wm-wilayah b { font-size: 14px; }
  .wm-wilayah small, .wm-wilayah .wm-panah { display: none; }
}

/* ── PROYEK ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.wm-proyek { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.wm-proyek-kartu { display: flex; flex-direction: column; text-decoration: none; color: var(--wm-tinta); }
.wm-proyek-foto { display: block; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #EEF0F5; }
.wm-proyek-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.wm-proyek-kartu:hover img { transform: scale(1.03); }
.wm-proyek-kartu b { margin-top: 4px; font-size: 18px; color: var(--wm-navy); }
.wm-proyek-kartu .wm-proyek-dev { margin-top: 14px; }
.wm-proyek-kartu .wm-proyek-foto + b { margin-top: 14px; }
.wm-proyek-kartu-sub { margin-top: 4px; font-size: 14px; color: var(--wm-redup); }

/* ── AJAKAN ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* ── KAKI ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Layar lebar RINGKAS (pemilik 21 Okt 2026: "footernya terlalu buang tempat, padahal tidak begitu berguna"): SATU bilah — logo, alamat
   dua baris, tautan sebaris (judul kolom disembunyikan), ikon sosial di ujung kanan; hak cipta jadi baris tipis. ~~Tiga kolom tinggi
   (logo/alamat/sosial bertumpuk, "Properti" & "Winmax" masing-masing empat baris), jarak atas 88px.~~ Merek `display: contents` supaya
   logo, alamat & sosial jadi anggota bilah yang sama dan bisa diurutkan. HP punya susunannya sendiri (blok KAKI di HP di bawah). */
.wm-kaki { margin-top: 56px; background: var(--wm-navy-gelap); color: rgba(255,255,255,.78); font-size: 13.5px; }
.wm-kaki-isi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 20px; padding-bottom: 16px; }
.wm-kaki-merek { display: contents; }
.wm-kaki-merek img { order: 0; height: 30px; width: auto; }
.wm-kaki-merek p { order: 1; margin: 0 auto 0 0; line-height: 1.5; }
.wm-kaki-tautan { order: 2; display: flex; flex-wrap: wrap; gap: 6px 28px; }
.wm-kaki-kolom { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* Layar sedang: bilah tautan turun ke baris kedua UTUH (bukan terbelah dua kelompok), sosial tetap di kanan logo & alamat. */
@media (min-width: 600.01px) and (max-width: 1280px) {
  .wm-kaki .wm-sosial { order: 1; }
  .wm-kaki .wm-kaki-tautan { flex-basis: 100%; }
}
.wm-kaki-kolom b { display: none; color: #FFFFFF; }
.wm-kaki a { color: rgba(255,255,255,.78); text-decoration: none; }
.wm-kaki a:hover { color: #FFFFFF; }
.wm-sosial { order: 3; display: flex; gap: 8px; }
.wm-sosial a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; }
.wm-sosial svg { width: 16px; height: 16px; }
.wm-kaki-bawah { border-top: 1px solid rgba(255,255,255,.12); padding-top: 10px; padding-bottom: 14px; font-size: 12px; }

/* ── POPUP PILIH AGEN (isi dari get_agent.php, markup server tidak berubah) ─────────────────────────────────────────── */
.agent-popup { position: fixed; inset: 0; z-index: 1000; background: rgba(16,22,60,.5); align-items: center; justify-content: center; padding: 16px; }
.agent-popup-content { width: 100%; max-width: 440px; max-height: 86vh; overflow-y: auto; background: #FFFFFF; border-radius: 20px; box-shadow: 0 24px 60px rgba(16,22,60,.25); font-family: var(--wm-huruf); }
.agent-popup-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--wm-garis); }
.agent-popup-header h4 { margin: 0; font-size: 18px; font-weight: 800; color: var(--wm-navy); }
.close-agent-popup { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--wm-garis); display: grid; place-items: center; font-size: 22px; cursor: pointer; color: var(--wm-navy); }
.agent-popup-body { padding: 8px 20px 16px; }
.agent-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #EEF0F5; }
.agent-item:last-child { border-bottom: 0; }
.agent-info-pop { display: flex; align-items: center; gap: 12px; min-width: 0; }
.agent-info-pop img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.agent-name { font-weight: 700; color: var(--wm-tinta); }
.agent-office { font-size: 13px; color: var(--wm-redup); }
.wa-btn { height: 42px; padding: 0 14px; border-radius: 11px; background: var(--wm-navy); color: #FFFFFF !important; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 700; flex: none; }

/* ── HALAMAN CARI ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.wm-bilah-cari { background: #FFFFFF; border-bottom: 1px solid var(--wm-garis); position: sticky; top: 0; z-index: 40; box-shadow: 0 6px 18px rgba(16,22,60,.04); }
.wm-bilah-cari-isi { display: flex; gap: 10px; align-items: center; padding-top: 14px; padding-bottom: 14px; }
.wm-bilah-cari-kotak { flex: 1; min-width: 0; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid var(--wm-garis-isian); border-radius: 12px; background: #FFFFFF; font: inherit; font-size: 15px; color: var(--wm-redup); cursor: pointer; text-align: left; }
.wm-bilah-cari-kotak svg { width: 18px; height: 18px; flex: none; color: var(--wm-biru); }
.wm-bilah-cari-kotak span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-bilah-cari .wm-tombol { height: 48px; }
.wm-cacah { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--wm-navy); color: #FFFFFF; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.wm-cari-hal { padding-top: 26px; padding-bottom: 8px; }
.wm-tombol--kecil { height: 40px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
/* Menu Bagikan halaman cari (menggantikan Copy URL, 20 Okt 2026). Layar lebar: menu turun di bawah tombol. HP: lembar dari bawah layar. */
.wm-bagikan { position: relative; }
/* Tombol ringkas (pemilik 20 Okt 2026: "bagikan itu jgn sampai buang space sebanyak itu"): pil bergaris di layar lebar, ikon bulat di HP. */
.wm-bagikan { flex: none; }
.wm-bagikan-tombol { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border: 1px solid var(--wm-garis-isian); border-radius: 999px; background: #FFFFFF; color: var(--wm-navy); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.wm-bagikan-tombol:hover, .wm-bagikan-tombol[aria-expanded="true"] { background: var(--wm-biru-lembut); border-color: var(--wm-biru-lembut); }
.wm-bagikan-tombol svg { width: 16px; height: 16px; color: var(--wm-biru); }
.wm-bagikan-latar { display: none; }
.wm-bagikan-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 250px; background: #FFFFFF; border: 1px solid var(--wm-garis); border-radius: 16px; padding: 8px; box-shadow: 0 18px 40px rgba(16,22,60,.16); }
.wm-bagikan-menu[hidden], .wm-bagikan-latar[hidden], .wm-bagikan-item[hidden] { display: none; }
.wm-bagikan-judul { margin: 6px 10px 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wm-redup); }
.wm .wm-bagikan-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--wm-tinta); text-decoration: none; cursor: pointer; text-align: left; }
.wm .wm-bagikan-item:hover, .wm .wm-bagikan-item:focus-visible { background: var(--wm-lembut); outline: none; }
.wm-bagikan-ikon { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--wm-biru-lembut); color: var(--wm-biru); }
.wm-bagikan-ikon svg { width: 18px; height: 18px; }
.wm-bagikan-ikon--wa { background: #E7F7EE; color: #1E7D4F; }
.wm-bagikan-ikon--tg { background: #E6F2FB; color: #1F6FA8; }
@media (max-width: 600px) {
  .wm-bagikan-tombol { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .wm-bagikan-teks { display: none; }
  .wm-bagikan-latar { display: block; position: fixed; inset: 0; z-index: 10000000; background: rgba(16,22,60,.45); }
  .wm-bagikan-menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; z-index: 10000001; border-radius: 20px 20px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); }
  .wm-bagikan-judul { text-align: center; margin-bottom: 12px; }
  .wm .wm-bagikan-item { padding: 12px 10px; font-size: 16px; }
}
.wm-tombol-teks { border: 0; background: transparent; font: inherit; font-size: 14px; cursor: pointer; padding: 6px 0; }
.wm-halaman { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 36px 0 0; }
.wm-halaman a { min-width: 44px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--wm-garis-isian); background: #FFFFFF; color: var(--wm-navy); display: inline-grid; place-items: center; text-decoration: none; font-weight: 700; font-size: 14px; }
.wm-halaman a.active { background: var(--wm-navy); border-color: var(--wm-navy); color: #FFFFFF; }
.wm-kosong { text-align: center; padding: 48px 16px; color: var(--wm-redup); }
.wm-kosong p { margin: 0 0 16px; }
.wm-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--wm-navy); color: #FFFFFF; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; z-index: 10000001; box-shadow: 0 12px 30px rgba(16,22,60,.3); }
@media (max-width: 900px) {
  .wm-bilah-cari-isi { padding-top: 10px; padding-bottom: 10px; }
  .wm-cari-hal { padding-top: 14px; }
}

/* ── PANEL SEARCH LAMA (#filterPopup) — RUPA BARU untuk markup & skrip yang SAMA (kelas lama tidak diganti) ──────────────
   HP: lembar dari bawah (seperti dulu). Desktop: laci di kanan. Buka/tutup tetap kelas .show dari skrip lama. */
body.no-scroll { overflow: hidden; }
.wm-panel-latar { display: none; position: fixed; inset: 0; background: rgba(16,22,60,.45); z-index: 9999998; }
body.no-scroll .wm-panel-latar { display: block; }
.filter-popup { position: fixed; left: 0; right: 0; bottom: 0; height: 92%; transform: translateY(105%); visibility: hidden; transition: transform .35s ease, visibility .35s; background: #FFFFFF; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(16,22,60,.25); z-index: 9999999; font-family: var(--wm-huruf); color: var(--wm-tinta); }
.filter-popup.show { transform: translateY(0); visibility: visible; }
@media (min-width: 901px) {
  .filter-popup { left: auto; top: 0; height: 100%; width: 500px; border-radius: 22px 0 0 22px; transform: translateX(105%); box-shadow: -18px 0 50px rgba(16,22,60,.22); }
  .filter-popup.show { transform: translateX(0); }
}
.filter-popup-content { display: flex; flex-direction: column; height: 100%; }
.filter-header { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 20px; border-bottom: 1px solid #EEF0F5; }
.reset-btn { justify-self: start; height: 40px; padding: 0 6px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--wm-oranye); cursor: pointer; }
.filter-title { justify-self: center; margin: 0; font-size: 18px; font-weight: 800; color: var(--wm-navy); }
.close-popup { justify-self: end; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--wm-garis); display: grid; place-items: center; font-size: 22px; line-height: 1; color: var(--wm-navy); cursor: pointer; }
.filter-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 20px 110px; }
.filter-section, .filter-group { padding: 18px 0; border-bottom: 1px solid #F1F2F7; margin: 0; }
.filter-section > label, .filter-group > label, .filter-section > div > label { display: block; margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--wm-navy); }
.letak-catatan { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--wm-redup); }
.filter-options, .filter-btn-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-btn { height: 40px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--wm-garis-isian); background: #FFFFFF; color: #3A4060; font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s, color .15s; }
.filter-btn:hover { border-color: var(--wm-navy); }
.filter-btn.active { background: var(--wm-navy); border-color: var(--wm-navy); color: #FFFFFF; font-weight: 700; }
.keyword-box { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.keyword-item { display: flex; gap: 8px; align-items: center; }
/* Baris kata kunci berjarak (pemilik 21 Okt 2026: "rapikan juga jarak dua baris kata kunci itu"): baris dirakit skrip panel ke dalam
   #judulContainer, bukan langsung ke .keyword-box, jadi gap .keyword-box tidak pernah sampai ke sana dan barisnya menempel. */
#judulContainer { display: flex; flex-direction: column; gap: 10px; }
.keyword-item input, .judul-field { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--wm-garis-isian); border-radius: 12px; font: inherit; font-size: 15px; color: var(--wm-tinta); background: #FFFFFF; outline: none; }
.keyword-item input:focus, .range-field:focus, .custom-input:focus { border-color: var(--wm-biru); box-shadow: 0 0 0 3px rgba(43,58,151,.12); }
.btn-plus-circle, .btn-remove-keyword { width: 46px; height: 46px; flex: none; border-radius: 12px; font: inherit; font-size: 22px; font-weight: 700; cursor: pointer; }
.btn-plus-circle { border: 1px dashed #B9C0DC; background: #F7F8FC; color: var(--wm-biru); }
.btn-remove-keyword { border: 1px solid var(--wm-garis-isian); background: #FFFFFF; color: var(--wm-redup); }
/* IKON × DAN + PRESISI DI TENGAH (pemilik 21 Okt 2026: "harus presisi di tengah x dan + nya, pas ditengah kotak atau bunderan itu"):
   huruf "×"/"+" dari font tidak pernah tepat di tengah (metrik glyph & baris), jadi hurufnya disembunyikan (font-size 0, tetap ada untuk
   pembaca layar) dan diganti DUA GARIS ::before/::after yang ditaruh di titik tengah kotak (left/top 50% + translate). Tombol yang sudah
   absolute (penampil foto, jendela project) tetap absolute, yang lain jadi relative. */
.close-popup, .close-agent-popup, .btn-plus-circle, .btn-remove-keyword { position: relative; }
.close-popup, .close-agent-popup, .btn-plus-circle, .btn-remove-keyword, .wm-penampil-tutup, .wm-jendela-tutup { font-size: 0; padding: 0; }
.close-popup::before, .close-popup::after, .close-agent-popup::before, .close-agent-popup::after,
.btn-plus-circle::before, .btn-plus-circle::after, .btn-remove-keyword::before, .btn-remove-keyword::after,
.wm-penampil-tutup::before, .wm-penampil-tutup::after, .wm-jendela-tutup::before, .wm-jendela-tutup::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 2px; background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.close-popup::after, .close-agent-popup::after, .btn-remove-keyword::after, .wm-penampil-tutup::after, .wm-jendela-tutup::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* UKURAN (pemilik 21 Okt 2026: "jangan sebesar itu kotaknya"): tombol hapus/tambah kata kunci 46 -> 36px (masih di atas batas sentuh
   jari ~32px, tapi tidak lagi setinggi kolom isian), tutup panel 40 -> 36px; garis ikon 12-14px supaya seimbang dengan kotaknya. */
.btn-plus-circle, .btn-remove-keyword { width: 36px; height: 36px; border-radius: 10px; }
.close-popup { width: 36px; height: 36px; }
.btn-plus-circle::before, .btn-plus-circle::after, .btn-remove-keyword::before, .btn-remove-keyword::after { width: 12px; }
.close-popup::before, .close-popup::after { width: 14px; }
.btn-plus-circle::before { transform: translate(-50%, -50%); }
.btn-plus-circle::after { transform: translate(-50%, -50%) rotate(90deg); }
.wm-penampil-tutup::before, .wm-penampil-tutup::after { width: 20px; }
.custom-input { width: 76px; height: 40px; padding: 0 10px; border: 1px solid var(--wm-garis-isian); border-radius: 999px; font: inherit; font-size: 14px; text-align: center; color: var(--wm-tinta); outline: none; }
.custom-input.active { background: var(--wm-navy); border-color: var(--wm-navy); color: #FFFFFF; font-weight: 700; }
.range-inputs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.range-field { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--wm-garis-isian); border-radius: 12px; font: inherit; font-size: 15px; color: var(--wm-tinta); background: #FFFFFF; outline: none; }
.range-field.input-error, .input-error { border-color: #C0392B !important; }
.error-text { display: none; grid-column: 1 / -1; font-size: 13px; color: #B03A2E; }
.filter-footer { display: none; }
.filter-popup.show .filter-footer { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px 18px; background: #FFFFFF; border-top: 1px solid #EEF0F5; box-shadow: 0 -10px 24px rgba(16,22,60,.06); }
/* Pilihan aktif di atas tombol Search (21 Okt 2026, lihat _panel-cari-lama): satu baris pil yang bisa digeser, × presisi (dua garis). */
.wm-saring-aktif { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -2px -20px 10px; padding: 0 20px 2px; }
.wm-saring-aktif::-webkit-scrollbar { display: none; }
.wm-saring-aktif[hidden] { display: none; }
.wm-saring-pil { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 2px 0 12px; border-radius: 999px; background: var(--wm-biru-lembut); color: var(--wm-navy); font-size: 13px; font-weight: 700; white-space: nowrap; }
.wm-saring-pil button { position: relative; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.wm-saring-pil button::before, .wm-saring-pil button::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.wm-saring-pil button::after { transform: translate(-50%, -50%) rotate(-45deg); }
.wm-saring-pil button:hover { background: rgba(16,22,60,.08); }
/* TOMBOL SEARCH TERKUNCI DI iPHONE (pemilik 21 Okt 2026: "lalu kalau di iphone, tombol searchnya ga ke lock"): kaki panel ~~absolute
   bottom 0 di atas isi yang diberi padding 110px~~ -> bagian ALIRAN flex (isi menggulir sendiri di atasnya, kaki tidak pernah ikut
   tergulir), dan tinggi panel memakai dvh (tinggi layar yang benar-benar terlihat di Safari, bukan termasuk bilah alamat). */
.filter-popup { height: 92dvh; }
.filter-popup-content { min-height: 0; }
.filter-body { min-height: 0; padding-bottom: 0; overscroll-behavior: contain; }
/* ⛔ DIRALAT 21 Okt 2026 siang: ~~kaki = bagian aliran flex (position: static)~~ — kaki panel ternyata ANAK .filter-body (wadah yang
   menggulir), jadi "static" menaruhnya di UJUNG isi (terukur y 2227 pada layar 700) dan tombol Search baru muncul sesudah digulir habis.
   STICKY bottom 0 di dalam wadah gulir itu = selalu menempel di bawah panel; margin negatif menutup padding 20px kiri-kanan isi. */
.filter-popup.show .filter-footer { position: sticky; bottom: 0; z-index: 2; margin: 0 -20px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
@media (min-width: 901px) { .filter-popup { height: 100dvh; } }
.btn-filter-search { display: block; width: 100%; height: 54px; border: 0; border-radius: 14px; background: var(--wm-oranye); color: #FFFFFF; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.btn-filter-search:hover { background: #A9420E; }
.btn-filter-search.btn-disabled, .btn-filter-search:disabled { background: #C9CDD9; cursor: not-allowed; }

/* ── HALAMAN DETAIL ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.wm-detail { padding-top: 22px; }
.wm-remah { font-size: 13px; color: var(--wm-redup); margin-bottom: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-remah a { color: var(--wm-biru); text-decoration: none; }
.wm-galeri { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 240px 240px; gap: 10px; border-radius: 22px; overflow: hidden; }
.wm-galeri-foto { position: relative; padding: 0; border: 0; background: #EEF0F5; cursor: zoom-in; overflow: hidden; }
.wm-galeri-foto:first-child { grid-row: 1 / 3; }
.wm-galeri-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.wm-galeri-foto:hover img { transform: scale(1.03); }
.wm-galeri-lagi { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(16,22,60,.55); color: #FFFFFF; font-weight: 700; font-size: 16px; }
.wm-galeri--satu { grid-template-columns: 1fr; grid-template-rows: 480px; }
.wm-galeri--satu .wm-galeri-foto:first-child { grid-row: auto; }
/* Jumlah foto 2-4: tanpa kotak kosong. */
.wm-galeri--n2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 480px; }
.wm-galeri--n2 .wm-galeri-foto:first-child { grid-row: auto; }
.wm-galeri--n3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.wm-galeri--n4 .wm-galeri-foto:nth-child(4) { grid-column: 2 / 4; }
.wm-galeri-hitung { display: none; }
.wm-galeri-hp { display: none; }
.wm-detail-isi { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 34px; align-items: flex-start; }
.wm-detail-kiri { flex: 999 1 560px; min-width: 0; }
.wm-detail-kanan { flex: 1 1 340px; min-width: 0; max-width: 400px; position: sticky; top: 24px; }
.wm-lencana-baris--statis { position: static; margin-bottom: 14px; }
.wm-lencana--lembut { background: var(--wm-biru-lembut); }
.wm-detail-judul { margin: 0; font-size: 34px; line-height: 1.22; font-weight: 800; color: var(--wm-navy); letter-spacing: -.015em; }
.wm-detail-lokasi { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 16px; color: var(--wm-redup); }
.wm-detail-lokasi svg { width: 18px; height: 18px; flex: none; }
.wm-detail-harga { margin-top: 20px; font-size: 32px; font-weight: 800; color: var(--wm-navy); letter-spacing: -.02em; line-height: 1.3; }
.wm-detail-harga-penuh { margin-top: 4px; font-size: 14px; color: var(--wm-redup); line-height: 1.5; }
.wm-angka-utama { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 24px; }
.wm-angka-utama > div { padding: 16px; border-radius: 14px; background: var(--wm-lembut); display: flex; flex-direction: column; gap: 4px; }
.wm-angka-utama span { font-size: 13px; color: var(--wm-redup); }
.wm-angka-utama b { font-size: 20px; color: var(--wm-navy); }
.wm-detail-sub { margin: 38px 0 12px; font-size: 21px; font-weight: 800; color: var(--wm-navy); }
.wm-rinci { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.wm-rinci > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid #EEF0F5; font-size: 15px; }
.wm-rinci dt { color: var(--wm-redup); }
.wm-rinci dd { margin: 0; font-weight: 700; color: var(--wm-tinta); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.wm-id-iklan { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.wm-id-iklan .wm-tombol-teks { font-weight: 700; color: var(--wm-tinta); padding: 0; text-align: right; }
.wm-salin { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--wm-garis); background: #FFFFFF; color: var(--wm-biru); display: grid; place-items: center; cursor: pointer; flex: none; }
.wm-salin svg { width: 15px; height: 15px; }
.wm-deskripsi { font-size: 16px; line-height: 1.75; color: #3A4060; overflow-wrap: anywhere; }
.wm-deskripsi--lipat { max-height: 210px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.wm-kpr { margin-top: 38px; padding: 24px 26px; border-radius: 20px; border: 1px solid var(--wm-garis); }
.wm-kpr-kepala { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: flex-end; }
.wm-kpr-kepala p { margin: 6px 0 0; font-size: 14px; color: var(--wm-redup); }
.wm-kpr-hasil { text-align: right; }
.wm-kpr-hasil span { display: block; font-size: 13px; color: var(--wm-redup); }
.wm-kpr-hasil b { font-size: 26px; color: var(--wm-navy); }
.wm-kpr-atur { display: none; }
.wm-label-pendek { display: none; }
.wm-kpr-isian { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.wm-kpr-isian label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--wm-redup); }
.wm-kpr-isian select { height: 46px; padding: 0 12px; border: 1px solid var(--wm-garis-isian); border-radius: 10px; background: #FFFFFF; font: inherit; font-size: 15px; color: var(--wm-tinta); }
.wm-agen-kotak { padding: 22px; border-radius: 20px; border: 1px solid var(--wm-garis); box-shadow: 0 18px 40px rgba(16,22,60,.08); background: #FFFFFF; }
.wm-agen-satu--lagi { margin-top: 18px; padding-top: 18px; border-top: 1px solid #EEF0F5; }
.wm-agen-baris { display: flex; align-items: center; gap: 14px; }
.wm-avatar--besar { width: 64px; height: 64px; }
.wm-agen-nama-besar { display: block; font-size: 17px; color: var(--wm-navy); }
.wm-agen-baris .wm-agen-teks .wm-agen-kantor { font-size: 14px; color: var(--wm-redup); white-space: normal; }
.wm-agen-listing { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--wm-biru); text-decoration: none; }
.wm-agen-aksi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
/* Layar sangat sempit (<= 360px, sapu responsif 20 Okt 2026: kotak agen luber 7px di 320px): tombol bertumpuk, jarak kotak dirapatkan. */
@media (max-width: 360px) { .wm-agen-aksi { grid-template-columns: minmax(0, 1fr); } .wm-agen-kotak { padding: 16px; } .wm-bilah-kontak { gap: 8px; padding-left: 12px; padding-right: 12px; } }
.wm-agen-aksi .wm-tombol { height: 48px; font-size: 15px; padding: 0 12px; }
.wm-tombol--penuh { width: 100%; }
.wm-bagikan-baris { margin-top: 16px; padding-top: 16px; border-top: 1px solid #EEF0F5; display: flex; justify-content: center; }
.wm-redup { color: var(--wm-redup); }
.wm-bilah-kontak { display: none; }
.wm-penampil { position: fixed; inset: 0; z-index: 10000000; background: rgba(8,10,24,.94); display: grid; place-items: center; }
.wm-penampil[hidden] { display: none; }
.wm-penampil img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 8px; }
.wm-penampil-tutup { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #FFFFFF; font-size: 28px; cursor: pointer; }
.wm-penampil-geser { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #FFFFFF; font-size: 34px; line-height: 1; cursor: pointer; }
.wm-penampil-geser--kiri { left: 16px; }
.wm-penampil-geser--kanan { right: 16px; }
.wm-penampil-hitung { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #FFFFFF; font-size: 14px; font-weight: 600; }
@media (max-width: 900px) {
  .wm-detail { padding-top: 0; padding-left: 0; padding-right: 0; }
  .wm-remah { display: none; }
  .wm-galeri { display: none; }
  .wm-galeri-hp { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: 300px; background: #EEF0F5; }
  .wm-galeri-hp::-webkit-scrollbar { display: none; }
  .wm-galeri-hp-foto { flex: 0 0 100%; scroll-snap-align: start; padding: 0; border: 0; background: none; }
  .wm-galeri-hp-foto img { width: 100%; height: 300px; object-fit: cover; display: block; }
  .wm-galeri .wm-galeri-hitung { display: none; }
  .wm-detail-isi { margin-top: 0; padding: 18px 16px 0; gap: 26px; }
  .wm-detail-kanan { position: static; max-width: none; }
  .wm-detail-judul { font-size: 22px; }
  .wm-detail-lokasi { font-size: 14px; }
  .wm-detail-harga { font-size: 26px; margin-top: 12px; }
  .wm-angka-utama { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wm-rinci { grid-template-columns: 1fr; }
  .wm-detail-sub { margin-top: 28px; font-size: 18px; }
  .wm-kpr { padding: 18px; }
  .wm-kpr-isian { grid-template-columns: 1fr; }
  .wm-kpr-hasil { text-align: left; }
  .wm-detail .wm-bagian { padding-left: 16px; padding-right: 16px; }
  .wm-bilah-kontak { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: #FFFFFF; border-top: 1px solid var(--wm-garis); box-shadow: 0 -10px 24px rgba(16,22,60,.08); }
  .wm-bilah-kontak .wm-tombol { height: 52px; }
  .wm-tombol-ikon-saja { width: 52px; padding: 0; flex: none; }
  .wm-detail-hal .wm-kaki { padding-bottom: 80px; }
  .wm-penampil-geser { display: none; }
  /* DETAIL HP RINGKAS (pemilik 22 Okt 2026 atas potret detail di HP: "kamu harus benerin ini, sangat2 buang space, UI UX harus bereskan
     sampai ini jadi UI yang efisien"): ~~Detail properti satu kolom, baris 13 px atas-bawah~~ -> DUA kolom, label kecil di atas nilai;
     kotak spek mengikuti jumlahnya (satu kotak tidak lagi cuma separuh lebar); jarak antar bagian dipangkas. */
  .wm-detail-isi { gap: 14px; padding-top: 14px; }
  .wm-detail-sub { margin: 18px 0 8px; font-size: 17px; }
  .wm-angka-utama { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; margin-top: 12px; }
  .wm-angka-utama > div { padding: 8px 10px; border-radius: 10px; gap: 1px; }
  .wm-angka-utama span { font-size: 12px; }
  .wm-angka-utama b { font-size: 16px; }
  .wm-rinci { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .wm-rinci > div { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px; padding: 7px 0; font-size: 14px; }
  .wm-rinci dt { font-size: 12px; }
  .wm-rinci dd { text-align: left; }
  /* HP TANPA GULIR BERLEBIH (pemilik 22 Okt 2026: "kamu harus atur supaya ga scroll terlalu banyak kebawah kalau hanya untuk lihat info
     yang gitu2 ajaa, harus yang bener efisien"). Terukur sebelum: info listing (foto s/d KPR) 65..2020 px. Kini:
     foto 300 -> 260; baris detail yang DOBEL disembunyikan (Transaksi = lencana, Lokasi = baris di bawah judul); deskripsi dilipat
     ~6 baris; kartu agen tanpa tombol WhatsApp/Telepon (bilah bawah sudah memuatnya); Simulasi KPR = satu baris hasil + "Atur". */
  .wm-galeri-hp, .wm-galeri-hp-foto img { height: 260px; }
  .wm-angka-utama { grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); }
  .wm-angka-utama b { font-size: 15px; white-space: nowrap; }
  .wm-label-panjang { display: none; }
  .wm-label-pendek { display: inline; font-weight: 600; letter-spacing: .04em; }
  .wm-detail-sub { margin: 14px 0 6px; }
  .wm-agen-kotak .wm-avatar--besar { width: 48px; height: 48px; }
  .wm-detail-judul { font-size: 20px; }
  .wm-detail-harga { font-size: 24px; margin-top: 8px; }
  .wm-rinci > [data-rinci="Transaksi"], .wm-rinci > [data-rinci="Lokasi"] { display: none; }
  .wm-deskripsi--lipat { max-height: 140px; }
  .wm-agen-kotak { padding: 12px 14px; border-radius: 14px; box-shadow: none; }
  .wm-agen-aksi { display: none; }
  .wm-bagikan-baris { margin-top: 10px; padding-top: 10px; }
  .wm-kpr { padding: 12px 14px; border-radius: 14px; margin-top: 0; }
  .wm-kpr-kepala { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px; }
  .wm-kpr-kepala > div:first-child { display: none; }
  .wm-kpr-kepala .wm-detail-sub { font-size: 15px; }
  .wm-kpr-kepala p { display: none; }
  .wm-kpr-hasil { flex: 1; min-width: 0; text-align: left; }
  .wm-kpr-hasil span { font-size: 11.5px; }
  .wm-kpr-hasil b { font-size: 17px; white-space: nowrap; }
  .wm-kpr-atur { display: inline-flex; align-items: center; flex: none; min-height: 40px; padding: 0 14px; border: 1px solid var(--wm-garis-isian); border-radius: 10px; background: #FFFFFF; color: var(--wm-navy); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
  .wm-kpr:not(.wm-kpr--buka) .wm-kpr-isian { display: none; }
  .wm-kpr-isian { margin-top: 12px; gap: 8px; }
  .wm-kpr-isian label { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .wm-kpr-isian select { height: 40px; min-width: 130px; font-size: 14px; }
}
.wm-galeri-hp-wadah { position: relative; }

/* ── HALAMAN TEKS (Tentang, Syarat & Ketentuan, listing sold) ─────────────────────────────────────────────────────── */
.wm-teks-hal { padding-top: 40px; }
.wm-teks { max-width: 820px; margin: 0 auto; background: #FFFFFF; border: 1px solid var(--wm-garis); border-radius: 22px; padding: 44px 48px; }
.wm-teks h1 { margin: 0 0 18px; font-size: 32px; line-height: 1.2; font-weight: 800; color: var(--wm-navy); letter-spacing: -.01em; }
.wm-teks p { margin: 0 0 16px; font-size: 16px; line-height: 1.8; color: #3A4060; }
.wm-teks p.wm-bagian-kecil { margin: 0 0 6px; font-size: 13px; line-height: 1.4; color: var(--wm-oranye); }
.wm-teks-daftar { margin: 8px 0 0; padding-left: 22px; }
.wm-teks-daftar > li { margin-bottom: 18px; padding-left: 6px; }
.wm-teks-daftar > li::marker { font-weight: 800; color: var(--wm-oranye); }
.wm-teks-daftar h2 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--wm-navy); }
.wm-teks-daftar p { margin: 0 0 8px; }
.wm-teks-daftar ul { margin: 0; padding-left: 20px; color: #3A4060; line-height: 1.8; }
.wm-teks-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.wm-teks--tengah { text-align: center; max-width: 560px; }
.wm-teks--tengah .wm-lencana { display: inline-block; margin-bottom: 16px; }
.wm-teks--tengah .wm-teks-aksi { justify-content: center; }
/* KPR Partner (bankpartner.php): brosur program KPR bank (gambar tegak), dua kolom, utuh, ketuk = ukuran penuh. */
.wm-teks--tengah:has(.wm-bank) { max-width: 820px; }
.wm-bank { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 22px; align-items: start; }
.wm-bank-logo { display: block; border: 1px solid var(--wm-garis); border-radius: 14px; overflow: hidden; background: #FFFFFF; transition: box-shadow .2s; }
.wm-bank-logo:hover { box-shadow: 0 12px 28px rgba(16,22,60,.12); }
.wm-bank-logo img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .wm-teks-hal { padding-top: 16px; } .wm-teks { padding: 26px 20px; border-radius: 18px; } .wm-teks h1 { font-size: 24px; } .wm-teks-aksi .wm-tombol { flex: 1 1 100%; } }

/* ── DAFTAR (Hot Listing / Listing Property / pilihan agen) & PROJECTS ─────────────────────────────────────────────── */
.wm-kepala-daftar { margin-bottom: 24px; }
.wm-kepala-daftar h1 { margin: 0; font-size: 34px; font-weight: 800; color: var(--wm-navy); letter-spacing: -.01em; }
.wm-kepala-sub { margin: 6px 0 0; font-size: 15px; color: var(--wm-redup); }
.wm-proyek--halaman { gap: 24px; }
.wm-proyek-blok { background: #FFFFFF; border: 1px solid var(--wm-garis); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
button.wm-proyek-foto { position: relative; width: 100%; border: 0; padding: 0; border-radius: 0; cursor: zoom-in; }
.wm-proyek-isi { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.wm-proyek-nama { margin: 0; font-size: 18px; font-weight: 800; color: var(--wm-navy); line-height: 1.3; }
.wm-proyek-ringkas { font-size: 14px; line-height: 1.6; color: #3A4060; }
.wm-proyek-blok .wm-proyek-ringkas { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wm-proyek-aksi { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }
.wm-proyek-aksi .wm-tombol { flex: 1; }
.wm-proyek-desk { font-size: 15px; line-height: 1.7; color: #3A4060; overflow-wrap: anywhere; }
/* Projects dari Kelola Developer (20 Okt 2026): developer, lokasi, harga, saringan jenis, data di jendela detail. */
.wm-proyek-blok[hidden] { display: none; }
.wm-proyek-blok .wm-proyek-foto { position: relative; }
.wm-proyek-dev { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wm-oranye); }
.wm-proyek-isi .wm-kartu-lokasi { margin: 0; }
.wm-proyek-harga { margin: 2px 0 0; font-size: 16px; font-weight: 800; color: var(--wm-navy); }
.wm-saring-proyek { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: -8px 0 20px; scrollbar-width: none; }
.wm-saring-proyek::-webkit-scrollbar { display: none; }
.wm-saring-proyek .wm-pil { flex: none; }
.wm-saring-proyek .wm-pil span { margin-left: 4px; opacity: .6; font-weight: 600; }
.wm-proyek-data { margin: 0; display: grid; gap: 8px; padding: 14px 16px; background: var(--wm-lembut); border-radius: 14px; }
.wm-proyek-data > div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; font-size: 14px; }
.wm-proyek-data dt { color: var(--wm-redup); }
.wm-proyek-data dd { margin: 0; color: var(--wm-tinta); font-weight: 600; }
.wm-proyek-data:empty { display: none; }
.wm-jendela-agen .wm-bagian-kecil { margin: 6px 0 0; }
.wm-jendela { position: fixed; inset: 0; z-index: 10000000; background: rgba(8,10,24,.7); display: grid; place-items: center; padding: 16px; }
.wm-jendela[hidden] { display: none; }
.wm-jendela-isi { position: relative; width: 100%; max-width: 980px; max-height: 92vh; overflow-y: auto; background: #FFFFFF; border-radius: 22px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); font-family: var(--wm-huruf); }
.wm-jendela-galeri { position: sticky; top: 0; align-self: start; height: min(600px, 92vh); background: #10163C; }
.wm-jendela-galeri img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.wm-jendela-galeri .wm-jumlah-foto { right: 14px; bottom: 14px; }
.wm-jendela-teks { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.wm-jendela-teks h2 { margin: 0 40px 0 0; font-size: 22px; font-weight: 800; color: var(--wm-navy); }
.wm-jendela-teks .wm-tombol { margin-top: 8px; height: 50px; }
.wm-jendela-tutup { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wm-garis); background: #FFFFFF; color: var(--wm-navy); font-size: 24px; cursor: pointer; }
@media (max-width: 900px) {
  .wm-kepala-daftar h1 { font-size: 24px; }
  .wm-jendela { padding: 0; place-items: end stretch; }
  .wm-jendela-isi { grid-template-columns: 1fr; max-height: 94vh; border-radius: 22px 22px 0 0; }
  .wm-jendela-galeri { position: relative; height: 260px; }
  .wm-jendela-teks { padding: 20px 16px 28px; }
  .wm-jendela .wm-penampil-geser { display: grid; place-items: center; width: 40px; height: 40px; font-size: 26px; }
}

/* ── FOTO UTUH (pemilik 20 Okt 2026: "semua foto harus kelihatan full, jangan kepotong sesuai dengan foto originalnya") ─────────
   Kartu listing, kartu project, galeri detail: foto object-fit CONTAIN (utuh, rasio asli), ruang sisa PUTIH (pemilik: "jangan blur, warna
   putih aja"; ~~salinan foto yang sama diburamkan sebagai latar~~). Hero beranda TIDAK termasuk: ia latar, bukan foto listing. */
.wm-kartu-foto, .wm-proyek-foto, .wm-galeri-foto, .wm-galeri-hp-foto { position: relative; overflow: hidden; isolation: isolate; background: #FFFFFF; }
.wm-galeri-hp { background: #FFFFFF; }
.wm-kartu-foto img.wm-foto-utama, .wm-proyek-foto img.wm-foto-utama, .wm-galeri-foto img.wm-foto-utama, .wm-galeri-hp-foto img.wm-foto-utama {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.wm-kartu-foto .wm-lencana-baris, .wm-kartu-foto .wm-jumlah-foto, .wm-proyek-foto .wm-lencana-baris, .wm-proyek-foto .wm-jumlah-foto, .wm-galeri-lagi { z-index: 2; }
.wm-galeri-hp-foto { height: 100%; }

/* ── BERANDA HANGAT (pemilik 20 Okt 2026: "halaman utama mau cenderung ke warna orange aja" / "kode warna sudah ada, tapi kamu harus buat
   jadi elegan dan tidak norak"). Oranye merek dari logo (#F0601F terukur dari winmax-logo.png) dipakai HEMAT sebagai aksen; tombol
   bertulisan putih memakai --wm-oranye (#C24E12, lolos kontras 4,5:1); navy tetap untuk teks. HANYA body.wm-beranda. */
:root { --wm-oranye-merek: #F0601F; --wm-krem: #FFF8F2; --wm-krem-garis: #F5E4D6; --wm-oranye-lembut: #FDEDE2; --wm-coklat: 28, 16, 10; }
/* 22 Okt 2026, pemilik (foto hero baru — pasangan di sofa): "fotonya kamu terangin aja, jadi yg digelapkan adalah bagian yg ada
   teksnya". Gelap HANYA di sisi teks (kiri) dan habis sebelum tengah; sisa foto terang apa adanya. Bunyi lama: ~~.9 0% · .76 42% ·
   .4 78% · .28 100%~~ (seluruh foto ikut gelap) + cahaya oranye ~~.32~~. Lalu "coba geser kekiri lagi gradient hitamnya": batas
   dalam PIKSEL, bukan persen — tulisan berakhir ±720-740px dari kiri di layar 1280 MAUPUN 1880, jadi persen melebarkan gelap di
   layar besar. ~~.74 34% · .4 52% · 0 66%~~. */
.wm-beranda .wm-hero-lapis {
  background: linear-gradient(90deg, rgba(var(--wm-coklat), .86) 0px, rgba(var(--wm-coklat), .74) 480px, rgba(var(--wm-coklat), .4) 720px, rgba(var(--wm-coklat), 0) 900px),
    radial-gradient(ellipse at 0% 100%, rgba(240, 96, 31, .22) 0%, rgba(240, 96, 31, 0) 45%); }
.wm-beranda .wm-hero-kecil { color: #FFB27D; }
.wm-beranda .wm-hero-sub b { color: #FFD3B3; }
.wm-beranda .wm-cari form { box-shadow: 0 24px 60px rgba(var(--wm-coklat), .18); border-top: 3px solid var(--wm-oranye-merek); }
.wm-beranda .wm-pil[aria-pressed="true"] { border-color: var(--wm-oranye); background: var(--wm-oranye); color: #FFFFFF; }
.wm-beranda .wm-unggul li { background: var(--wm-krem); border-color: var(--wm-krem-garis); }
.wm-beranda .wm-unggul-ikon { background: #FFFFFF; color: var(--wm-oranye); box-shadow: 0 4px 12px rgba(194, 78, 18, .12); }
.wm-beranda .wm-lihat { color: var(--wm-oranye); }
.wm-beranda .wm-lihat:hover { color: #A9420E; }
.wm-beranda .wm-wa { background: var(--wm-oranye); }
.wm-beranda .wm-wa:hover { background: #A9420E; }
.wm-beranda .wm-wilayah a { background: var(--wm-krem); border: 1px solid var(--wm-krem-garis); }
.wm-beranda .wm-wilayah a:hover { background: var(--wm-oranye-lembut); }
.wm-beranda .wm-wilayah .wm-panah { color: var(--wm-oranye); }
@media (max-width: 900px) {
  /* HP: teks di ATAS foto -> gelap di atas, memudar ke bawah (22 Okt 2026, sama alasannya). Terukur 375px: teks sampai 62% tinggi
     hero, kotak cari mulai 69% — gelap wajib menutup sampai di situ. Bunyi lama: ~~.86 0% · .74 60% · .62 100%~~. */
  .wm-beranda .wm-hero-lapis {
    background: linear-gradient(180deg, rgba(var(--wm-coklat), .84) 0%, rgba(var(--wm-coklat), .7) 45%, rgba(var(--wm-coklat), .55) 64%, rgba(var(--wm-coklat), .12) 80%, rgba(var(--wm-coklat), 0) 90%); }
}

/* ── HP RINGKAS (pemilik 20 Okt 2026: "kalau di hp menurutku kurang enak, kamu harus carikan UX terbaik untuk pengguna HP karna
   kelihatan terlalu besar2 setiap kartunya"). Beranda: Hot Listing, Listing terbaru, Projects = baris geser (78% lebar, kartu
   berikutnya mengintip). Semua halaman: kartu lebih rapat (jarak, huruf, chip, tombol WhatsApp lebih kecil), foto daftar 3:2. */
@media (max-width: 900px) {
  .wm-geser > .wm-proyek-kartu { flex: 0 0 78%; scroll-snap-align: start; }
  .wm-proyek.wm-geser { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
  .wm-geser::-webkit-scrollbar { display: none; }
  /* Tanpa scroll-padding, snap "start" menempelkan kartu pertama ke TEPI layar (jarak kiri 16px hilang begitu baris bisa digeser). */
  .wm-geser { scroll-padding-inline: 16px; }
}
@media (max-width: 600px) {
  .wm-bagian { padding-top: 34px; }
  .wm-bagian h2 { font-size: 21px; }
  .wm-bagian-kepala { margin-bottom: 14px; align-items: center; flex-wrap: nowrap; }
  .wm-lihat { font-size: 14px; }
  .wm-geser > .wm-kartu { flex: 0 0 78%; }
  .wm-grid:not(.wm-geser) .wm-kartu-foto { aspect-ratio: 3 / 2; }
  .wm-kartu { border-radius: 16px; }
  .wm-kartu:hover { transform: none; }
  .wm-kartu-isi { padding: 12px 14px 10px; gap: 4px; }
  .wm-kartu-harga { font-size: 18px; }
  .wm-kartu-judul { font-size: 14px; line-height: 1.4; }
  .wm-kartu-lokasi { font-size: 12px; }
  .wm-spek { margin-top: 4px; gap: 4px; }
  .wm-spek span { padding: 3px 7px; font-size: 11px; border-radius: 6px; }
  .wm-kartu-agen { padding: 10px 14px; gap: 8px; }
  .wm-kartu-agen .wm-avatar { width: 30px; height: 30px; }
  .wm-agen-teks .user_agent_name, .wm-agen-teks .wm-agen-nama { font-size: 13px; }
  .wm-agen-teks .user_agent_address, .wm-agen-teks .wm-agen-kantor { font-size: 11px; }
  .wm-wa { height: 36px; padding: 0 12px; gap: 6px; font-size: 13px; border-radius: 10px; }
  .wm-wa svg { width: 16px; height: 16px; }
  .wm-proyek-isi { padding: 14px; gap: 6px; }
  .wm-proyek-nama { font-size: 16px; }
  .wm-proyek-harga { font-size: 15px; }
  .wm-proyek-aksi .wm-tombol { height: 40px; font-size: 14px; }
  .wm-proyek-kartu b { font-size: 16px; }
  .wm-proyek-kartu .wm-proyek-dev { margin-top: 10px; }
  .wm-proyek-foto { border-radius: 14px; }
  /* Brosur developer banyak yang tegak: bingkai 4:3 di HP supaya fotonya (utuh) tidak jadi kecil di tengah. */
  .wm-proyek--halaman .wm-proyek-foto { aspect-ratio: 4 / 3; border-radius: 0; }
  .wm-unggul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .wm-unggul li { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 6px; border-radius: 14px; }
  .wm-unggul span:not(.wm-unggul-ikon) { display: none; }
  .wm-unggul b { font-size: 12px; line-height: 1.3; margin: 0; }
  .wm-unggul-ikon { width: 36px; height: 36px; border-radius: 10px; }
  .wm-unggul-ikon svg { width: 18px; height: 18px; }
  /* Cari per wilayah: 18 wilayah = 9 baris kotak tinggi (±1.100px) -> chip yang membungkus (±250px). */
  .wm-wilayah { display: flex; flex-wrap: wrap; gap: 8px; }
  .wm-wilayah a { padding: 9px 14px; border-radius: 999px; }
  .wm-wilayah b { font-size: 13px; font-weight: 700; }
}

/* ── DUA AJAKAN beranda (20 Okt 2026, menggantikan blok .wm-ajakan bergradasi oranye — pemilik: "jelek banget, bereskan ini"). ──────── */
.wm-aksi-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wm .wm-aksi-kartu { display: flex; align-items: center; gap: 16px; padding: 22px; border: 1px solid var(--wm-garis); border-radius: 18px; background: #FFFFFF; color: var(--wm-tinta); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.wm .wm-aksi-kartu:hover { border-color: #F2C9AE; box-shadow: 0 14px 32px rgba(16,22,60,.08); transform: translateY(-1px); }
.wm .wm-aksi-kartu--utama { background: var(--wm-krem, #FFF8F2); border-color: var(--wm-krem-garis, #F5E4D6); }
.wm-aksi-ikon { width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--wm-oranye-lembut, #FDEDE2); color: var(--wm-oranye); }
.wm-aksi-kartu--utama .wm-aksi-ikon { background: var(--wm-oranye); color: #FFFFFF; }
.wm-aksi-ikon svg { width: 24px; height: 24px; }
.wm-aksi-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wm-aksi-teks b { font-size: 17px; font-weight: 800; color: var(--wm-navy); }
.wm-aksi-teks > span { font-size: 14px; line-height: 1.5; color: var(--wm-redup); }
.wm-aksi-panah { width: 22px; height: 22px; flex: none; color: var(--wm-oranye); }
@media (max-width: 900px) { .wm-aksi-dua { grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 600px) {
  .wm .wm-aksi-kartu { gap: 12px; padding: 14px; border-radius: 14px; }
  .wm-aksi-ikon { width: 42px; height: 42px; border-radius: 12px; }
  .wm-aksi-ikon svg { width: 20px; height: 20px; }
  .wm-aksi-teks b { font-size: 15px; }
  .wm-aksi-teks > span { font-size: 12.5px; line-height: 1.45; }
  .wm-aksi-panah { width: 18px; height: 18px; }
}

/* ── KAKI di HP (pemilik 20 Okt 2026: "masa versi hp kayak gini, buang tempat"): logo + sosial sebaris, alamat di bawahnya, dua kolom
   tautan berdampingan, jarak dirapatkan. Layar lebar tidak berubah. ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .wm-kaki { margin-top: 44px; font-size: 13px; }
  .wm-kaki-isi { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 22px 16px; padding-top: 26px; padding-bottom: 18px; }
  .wm-kaki-tautan { display: contents; }
  .wm-kaki-merek { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo sosial" "alamat alamat"; align-items: center; gap: 12px; }
  .wm-kaki-merek img { grid-area: logo; height: 28px; }
  .wm-kaki-merek p { grid-area: alamat; margin: 0; line-height: 1.55; max-width: none; }
  .wm-sosial { grid-area: sosial; gap: 8px; }
  .wm-kaki-kolom { flex-direction: column; flex-wrap: nowrap; gap: 7px; }
  .wm-kaki-kolom b { display: block; font-size: 13px; margin-bottom: 2px; }
  .wm-kaki-bawah { padding-top: 12px; padding-bottom: 16px; font-size: 11.5px; }
}

/* ── RINGKASAN HASIL CARI — RINGKAS (pemilik 20 Okt 2026: "bagian ini buang2 space sebesar itu"). Satu bilah: jumlah | Urutkan (tarik-
   turun) · Ubah · Bagikan; kriteria = pil kecil di bawahnya (HP: satu baris geser). ─────────────────────────────────────────────── */
.wm-ringkasan { background: #FFFFFF; border: 1px solid var(--wm-garis); border-radius: 16px; padding: 12px 14px 12px 18px; margin-bottom: 20px; }
.wm-ringkasan-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.wm-ringkasan h1 { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 600; color: var(--wm-redup); letter-spacing: 0; }
.wm-ringkasan h1 b { font-size: 20px; font-weight: 800; color: var(--wm-navy); letter-spacing: -.01em; }
.wm-ringkasan--kosong h1 { color: var(--wm-oranye); font-size: 16px; font-weight: 700; }
.wm-ringkasan-alat { display: flex; align-items: center; gap: 8px; flex: none; }
.wm-urut-pilih { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--wm-garis-isian); border-radius: 999px; background: #FFFFFF; color: var(--wm-navy); cursor: pointer; }
.wm-urut-pilih:hover, .wm-urut-pilih:focus-within { background: var(--wm-biru-lembut); border-color: var(--wm-biru-lembut); }
.wm-urut-pilih > svg:first-child { width: 16px; height: 16px; flex: none; color: var(--wm-biru); }
.wm-urut-pilih select { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: inherit; cursor: pointer; padding: 0; }
.wm-urut-panah { position: absolute; right: 11px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); pointer-events: none; color: var(--wm-redup); }
.wm-ringkasan-ubah { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border: 1px solid var(--wm-garis-isian); border-radius: 999px; background: #FFFFFF; color: var(--wm-navy); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.wm-ringkasan-ubah:hover { background: var(--wm-biru-lembut); border-color: var(--wm-biru-lembut); }
.wm-ringkasan-ubah svg { width: 16px; height: 16px; color: var(--wm-biru); }
.wm-ringkasan-daftar { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.wm-ringkasan-daftar li { padding: 5px 11px; border-radius: 999px; background: var(--wm-lembut); font-size: 13px; color: #3A4060; white-space: nowrap; }
.wm-ringkasan-daftar b { color: var(--wm-navy); }
@media (max-width: 600px) {
  .wm-ringkasan { padding: 10px 10px 10px 14px; border-radius: 14px; margin-bottom: 14px; }
  .wm-ringkasan h1 { font-size: 15px; }
  .wm-ringkasan h1 b { font-size: 17px; }
  .wm-ringkasan-alat { gap: 6px; }
  .wm-urut-pilih { height: 34px; padding: 0 26px 0 10px; gap: 5px; }
  .wm-urut-pilih select { font-size: 13px; }
  .wm-urut-panah { right: 9px; }
  .wm-ringkasan-ubah { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .wm-ringkasan-ubah span { display: none; }
  .wm-ringkasan-daftar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -10px; padding-right: 10px; }
  .wm-ringkasan-daftar::-webkit-scrollbar { display: none; }
  .wm-ringkasan-daftar li { font-size: 12px; padding: 4px 10px; }
  .wm-bagikan-tombol { width: 34px; height: 34px; }
}

/* ── HERO SPANDUK (pemilik 20 Okt 2026, contoh Brighton: "dia tidak ful begitu lalu ada bunder di sudutnya"): hero beranda tidak lagi
   selebar layar di bawah bilah transparan — jadi spanduk bersudut bulat dengan jarak di tepi, di bawah bilah putih biasa. ── */
.wm-beranda .wm-hero { width: calc(100% - 32px); max-width: 1440px; margin: 14px auto 0; height: 600px; border-radius: 24px; }
.wm-beranda .wm-hero-isi { padding-top: 96px; }
.wm-beranda .wm-cari { margin-top: -128px; }
@media (max-width: 900px) {
  .wm-beranda .wm-hero { width: calc(100% - 20px); margin-top: 10px; height: 450px; border-radius: 18px; }
  .wm-beranda .wm-hero-isi { padding-top: 40px; }
  .wm-beranda .wm-cari { margin-top: -118px; }
}

/* ── HALAMAN LEBAR (pemilik 20 Okt 2026, contoh Brighton: "lalu halamannya bisa full begitu"): wadah 1280px -> 1760px; kartu min 340px
   = 4 kolom di layar besar (1920), 3 di 1366. Hero spanduk ikut selebar wadah. ─────────────────────────────────────────────────── */
/* Diralat di hari yang sama atas potret Brighton ("ini"): ~~wadah 1760px, kartu min 340px~~ -> selebar layar dengan tepi 28px, kartu min
   380px (1920 = 4 kolom, 1366 = 3), hero ikut selebar wadah. HP tidak berubah (tepi 16px). */
.wm-wadah { max-width: none; padding-left: 28px; padding-right: 28px; }
.wm-grid, .wm-proyek { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.wm-beranda .wm-hero { width: calc(100% - 56px); max-width: none; }
@media (min-width: 901px) {
  /* Kotak cari cepat = kartu ringkas di TENGAH yang menumpang tepi bawah spanduk (contoh Brighton), bukan selebar halaman. */
  .wm-beranda .wm-cari form { max-width: 980px; margin: 0 auto; }
}
@media (max-width: 900px) {
  .wm-wadah { padding-left: 16px; padding-right: 16px; }
  .wm-beranda .wm-hero { width: calc(100% - 20px); }
  .wm-grid, .wm-proyek { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (max-width: 600px) {
  .wm-grid, .wm-proyek { grid-template-columns: minmax(0, 1fr); }
}

/* ── GESER FOTO KARTU (pemilik 20 Okt 2026: "kalau ada foto lebih dari 1 bisa digeser dong"). Baris geser scroll-snap di dalam bingkai
   foto kartu; panah muncul saat kartu disorot (layar lebar), di HP cukup diusap; titik = foto ke berapa. ───────────────────────── */
.wm-kartu-foto { position: relative; display: block; }
.wm-foto-geser { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.wm-foto-geser::-webkit-scrollbar { display: none; }
.wm-geser-slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.wm-geser-slide img.wm-foto-utama { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.wm-kartu-foto .wm-lencana-baris { pointer-events: none; z-index: 3; }
.wm-geser-panah { position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; margin-top: -17px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--wm-navy); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px rgba(16,22,60,.18); opacity: 0; transition: opacity .15s, transform .15s; }
.wm-geser-panah svg { width: 18px; height: 18px; }
.wm-geser-panah--kiri { left: 10px; }
.wm-geser-panah--kanan { right: 10px; }
.wm-kartu:hover .wm-geser-panah, .wm-geser-panah:focus-visible { opacity: 1; }
.wm-geser-panah:hover { transform: scale(1.06); }
.wm-geser-titik { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 3; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.wm-geser-titik i { width: 6px; height: 6px; border-radius: 999px; background: rgba(16,22,60,.22); transition: width .2s, background .2s; }
.wm-geser-titik i.aktif { width: 18px; background: var(--wm-navy); }
@media (hover: none) { .wm-geser-panah { display: none; } }
/* Bingkai foto putih (20 Okt 2026): lencana putih diberi bayangan tipis & garis pemisah tipis antara foto dan isi kartu supaya tetap terbaca. */
.wm-kartu-foto .wm-lencana, .wm-proyek-foto .wm-lencana { box-shadow: 0 1px 4px rgba(16,22,60,.18); }
.wm-kartu-foto { border-bottom: 1px solid #EEF0F5; }

/* ── MENGIKUTI UKURAN LAYAR (pemilik 20 Okt 2026: "aku mau website kita bisa mengikuti ukuran layar saat dibuka, jadi bener2 full fit to
   window"): lebar sudah cair (wadah selebar layar); tinggi spanduk beranda & ukuran judulnya kini ikut ukuran jendela (clamp). ─────── */
.wm-beranda .wm-hero { height: clamp(520px, 66vh, 820px); }
.wm-beranda .wm-hero-isi { padding-top: clamp(56px, 9vh, 120px); }
.wm-hero h1 { font-size: clamp(34px, 2.6vw + 14px, 72px); max-width: min(760px, 52vw); }
.wm-hero-sub { font-size: clamp(15px, .45vw + 11px, 20px); max-width: min(600px, 46vw); }
.wm-bagian h2 { font-size: clamp(21px, 1.2vw + 12px, 40px); }
@media (max-width: 900px) {
  .wm-beranda .wm-hero { height: clamp(420px, 58vh, 520px); }
  .wm-beranda .wm-hero-isi { padding-top: 40px; }
  .wm-hero h1, .wm-hero-sub { max-width: none; }
}

/* BERANDA: BARIS SELALU PENUH (pemilik 20 Okt 2026, potret layar lebar: Hot Listing 6 kartu & Projects 3 kartu menyisakan ruang kosong di
   kanan). Jumlah kartu beranda tetap (6 / 6 / 3), jadi kolomnya pembagi 6: 3 kolom (dua baris penuh), 6 kolom di layar >= 2400px (satu
   baris penuh); Projects selalu 3. ~~auto-fill minmax(380px)~~ = 4 kolom di 1920 (4 + 2, baris kedua setengah kosong); ~~auto-fit~~
   ditolak: kartu yang lebih sedikit dari kolom melebar selebar layar. Halaman cari & daftar tidak tersentuh. */
/* Diralat di hari yang sama sesudah potret 1920 (kartu 605px terlalu besar): beranda merender 8 listing & 4 project, lebar layar memilih
   berapa yang tampil supaya baris SELALU penuh: 901-1499 = 3 kolom (6 listing, 3 project); 1500-2399 = 4 kolom (8 listing, 4 project;
   kartu +-450px di 1920 seperti Brighton); >= 2400 = 6 kolom (6 listing, 4 project). HP: semua bisa digeser. */
/* ~~901-1499 = 3, 1500-2399 = 4, >= 2400 = 6 (8 listing & 4 project)~~ — DIRALAT 21 Okt 2026 atas potret laptop 15,6" pemilik
   ("ini menurutku jadi kebesaran sih harusnya bisa 5 kolom"; layar itu ~1536px CSS, dulu 4 kolom). Beranda kini merender 12 listing
   & 6 project, jumlah kolom memilih berapa yang tampil (dua baris penuh): 901-1199 = 3 (6 / 3), 1200-1399 = 4 (8 / 4), 1400-2399 = 5
   (10 / 5), >= 2400 = 6 (12 / 6). Kartu di 1536 ~280px. */
/* iPhone MEMBESARKAN HALAMAN saat kolom isian < 16px disentuh (pemilik 21 Okt 2026, potret iPhone panel Filter: "kalau di iphone kok
   keyboardnya ga disesuaikan" — halaman tergeser, kolom Max terpotong di tepi kanan, keyboard huruf untuk angka). Semua kolom isian
   situs 16px di layar sentuh; kolom angka panel kini inputmode="numeric" (papan angka). */
@media (max-width: 900px) {
  .keyword-item input, .judul-field, .range-field, .custom-input, .wm-cari-isi input, .wm-beranda .wm-cari-isi input, .wm-urut-pilih select { font-size: 16px; }
}
/* Halaman cari & daftar ikut lebih rapat (21 Okt 2026, kartu yang sama "kebesaran"): ~~minmax(380px)~~ -> 270px = 5 kolom di 1536,
   6 di 1920. HP tidak berubah. */
@media (min-width: 901px) {
  /* BARIS SELALU PENUH di cari & daftar (pemilik 21 Okt 2026: "kok bablas satu"): ~~auto-fill minmax(270px)~~ bisa 5 kolom, dan
     24 per halaman (server.mjs PER_HAL) nol habis dibagi 5. Kolom dibatasi 3 / 4 / 6: 901-1199 = 3, 1200-1699 = 4, >= 1700 = 6.
     Beranda punya aturannya sendiri (.wm-beranda .wm-grid, lebih spesifik). */
  .wm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* MENU URUTKAN (21 Okt 2026, "kok jelek" atas daftar tarik-turun bawaan peramban): tombol pil yang sama + menu bergaya menu Bagikan;
   pilihan aktif bertanda centang. HP: lembar dari bawah seperti Bagikan. */
.wm-urut { position: relative; flex: none; }
.wm .wm-urut-pilih { padding-right: 30px; font: inherit; font-size: 14px; font-weight: 600; color: var(--wm-navy); cursor: pointer; }
.wm-urut-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 50; width: 220px; background: #FFFFFF; border: 1px solid var(--wm-garis); border-radius: 16px; padding: 8px; box-shadow: 0 18px 40px rgba(16,22,60,.16); }
.wm-urut-menu[hidden] { display: none; }
.wm .wm-urut-item { position: relative; display: block; width: 100%; padding: 10px 34px 10px 12px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--wm-tinta); text-align: left; cursor: pointer; }
.wm .wm-urut-item:hover, .wm .wm-urut-item:focus-visible { background: var(--wm-lembut); outline: none; }
.wm .wm-urut-item[aria-checked="true"] { color: var(--wm-biru); background: var(--wm-biru-lembut); }
.wm .wm-urut-item[aria-checked="true"]::after { content: ''; position: absolute; right: 14px; top: 50%; width: 10px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(-45deg); }
@media (max-width: 600px) {
  .wm-urut-menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; z-index: 10000001; border-radius: 20px 20px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -18px 40px rgba(16,22,60,.2); }
  .wm .wm-urut-item { padding: 13px 34px 13px 12px; font-size: 16px; }
  .wm .wm-urut-pilih { font-size: 13px; }
}
/* KARTU SEJAJAR (pemilik 21 Okt 2026, potret 6 kolom: "kok ga rapi ya"): harga, judul, lokasi & spek dulu 1 atau 2 baris tergantung
   isinya, jadi lokasi & chip tiap kartu di ketinggian berbeda. Kini tiap bagian bertinggi tetap: harga SATU baris (harga dua sisi
   berhuruf lebih kecil, sisanya "…" + title), judul DUA baris (dicadangkan walau pendek), lokasi SATU baris "…", spek paling banyak DUA
   baris (dicadangkan). Kaki agen sudah menempel di bawah (flex). */
.wm-kartu-harga { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 28px; line-height: 28px; flex: none; }
.wm-kartu-harga--dua { font-size: 18px; }
.wm-kartu-judul { min-height: calc(1.45em * 2); }
.wm-kartu-lokasi { min-height: 1.4em; min-width: 0; }
.wm-kartu-lokasi > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* TEMPLATE SPEK TETAP (pemilik 21 Okt 2026: "harus di atur templatenya, ga boleh beda2 isinya"): ~~chip mengalir 1-2 baris, jumlah
   berbeda~~ -> SELALU kisi 2 x 2 LT · LB / KT · KM (_wm-kartu.ejs), label kecil di kiri, nilai tebal; kosong = "-" redup. */
/* + SEJAJAR SATU BARIS (pemilik 21 Okt 2026: "sejajar ajaa LT LB itu semua 4"): ~~kisi 2 x 2~~ -> empat kotak berdampingan; label
   kecil DI ATAS nilai supaya muat di kartu 6 kolom (±250px). */
.wm .wm-spek { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.wm .wm-spek span { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 5px 4px; border-radius: 8px; background: var(--wm-lembut); font-size: 12px; line-height: 1.25; color: #3A4060; text-align: center; white-space: nowrap; }
.wm .wm-spek i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--wm-redup); }
.wm .wm-spek b { max-width: 100%; color: var(--wm-navy); overflow: hidden; text-overflow: ellipsis; }
.wm .wm-spek span.kosong b { color: #A6ACC2; font-weight: 600; }
/* Kartu sempit (6 kolom, ±290px): "7.347 m²" / "340.000 m²" terpotong "…" di 12px -> 11px, jarak & bantalan dirapatkan. */
@container (max-width: 320px) {
  .wm .wm-spek { gap: 4px; }
  .wm .wm-spek span { padding: 4px 1px; font-size: 11px; }
  .wm .wm-spek b { letter-spacing: -.02em; }
  .wm .wm-spek sup { font-size: .7em; }
}
@media (max-width: 600px) {
  .wm-kartu-harga { height: 24px; line-height: 24px; }
  .wm-kartu-harga--dua { font-size: 15px; }
  .wm-kartu-judul { min-height: calc(1.4em * 2); }
  .wm .wm-spek { gap: 4px; margin-top: 4px; }
  .wm .wm-spek span { padding: 4px 3px; font-size: 11px; border-radius: 6px; }
}
/* DETAIL HEMAT RUANG (pemilik 21 Okt 2026: "halaman detail listing begini sangat boros space"): galeri di kolom kiri sejajar kartu agen
   (detail.ejs), tinggi 2 x 200 (satu foto / dua foto 410), jarak atas dirapatkan; tiap foto ber-latar dirinya yang dikaburkan supaya
   foto tegak nol menyisakan dua sisi putih. REKOMENDASI AI: enam kartu, kolom memilih 3/4/6 yang tampil (baris penuh). */
.wm-detail-isi { margin-top: 18px; }
.wm-detail-kiri > .wm-galeri { margin-bottom: 22px; grid-template-rows: 200px 200px; }
.wm-detail-kiri > .wm-galeri--satu, .wm-detail-kiri > .wm-galeri--n2 { grid-template-rows: 410px; }
/* KPR di kolom kanan (sempit): kepala bertumpuk, isian satu kolom ringkas. */
.wm-detail-kanan .wm-kpr { margin-top: 16px; padding: 18px 20px; }
.wm-detail-kanan .wm-kpr-kepala { flex-direction: column; align-items: flex-start; gap: 10px; }
.wm-detail-kanan .wm-kpr-hasil { text-align: left; }
.wm-detail-kanan .wm-kpr-hasil b { font-size: 22px; }
.wm-detail-kanan .wm-kpr-isian { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
.wm-detail-kanan .wm-kpr-isian label { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.wm-detail-kanan .wm-kpr-isian select { height: 40px; min-width: 130px; font-size: 14px; }
.wm-galeri-foto::before { content: ''; position: absolute; inset: -24px; background: var(--foto) center / cover no-repeat; filter: blur(22px) brightness(.9); transform: scale(1.05); }
.wm-galeri-foto img { position: relative; z-index: 1; }
.wm-galeri-lagi { z-index: 2; }
@media (min-width: 901px) {
  /* Kartu sempit (5-6 kolom): tombol WhatsApp jadi ikon saja supaya nama agen tidak terpotong jadi "Min Tj…". Tulisannya tetap ada
     (font-size 0) untuk pembaca layar. HP tetap bertulisan. */
  .wm-kartu { container-type: inline-size; }
  @container (max-width: 330px) {
    .wm-wa { width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; font-size: 0; border-radius: 12px; }
    .wm-wa svg { width: 20px; height: 20px; }
    .wm-kartu-agen { padding: 12px 14px; }
  }
}

/* ── BERANDA HP PADAT (pemilik 21 Okt 2026, potret HP: "sangat buang space, kamu harus bereskan lalu buatkan lebih baik UXnya"). Dulu
   layar pertama habis untuk spanduk 450px (separuhnya foto kosong di bawah teks), kotak cari, lalu tiga kartu keunggulan yang mengulang
   tulisan kecil di atas judul — listing pertama baru muncul sesudah satu layar penuh. Kini: spanduk setinggi isinya (judul 2 baris),
   tulisan kecil di atas judul disembunyikan (keunggulan sudah ada di bawah kotak cari), kotak cari lebih rapat (tab 34, kolom 48, tombol
   46), keunggulan jadi SATU baris pita kecil berikon, bukan tiga kartu. Layar > 600px tidak berubah. */
@media (max-width: 600px) {
  .wm-beranda .wm-hero { height: auto; }
  .wm-beranda .wm-hero-isi { padding-top: 22px; padding-bottom: 96px; }
  .wm-beranda .wm-hero-kecil { display: none; }
  .wm-beranda .wm-hero h1 { font-size: 25px; line-height: 1.18; letter-spacing: -.01em; }
  .wm-beranda .wm-hero-sub { margin-top: 8px; font-size: 13.5px; line-height: 1.5; }
  .wm-beranda .wm-cari { margin-top: -78px; }
  .wm-beranda .wm-cari form { gap: 10px; padding: 12px; }
  .wm-cari-tab button { height: 32px; font-size: 13.5px; }
  .wm-cari-kolom { min-height: 46px; padding-left: 12px; }
  .wm-cari-isi input { height: 36px; font-size: 16px; }
  .wm-cari-jenis .wm-pil { height: 32px; }
  .wm-cari-kirim { height: 46px; font-size: 15px; }
  .wm-beranda .wm-unggul { display: flex; justify-content: space-between; gap: 6px; margin-top: 12px; }
  .wm-beranda .wm-unggul li { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 6px; padding: 0; background: none; border: 0; border-radius: 0; text-align: left; }
  .wm-beranda .wm-unggul-ikon { width: 24px; height: 24px; border-radius: 7px; box-shadow: none; background: var(--wm-oranye-lembut); }
  .wm-beranda .wm-unggul-ikon svg { width: 14px; height: 14px; }
  .wm-beranda .wm-unggul b { font-size: 11.5px; font-weight: 700; line-height: 1.25; }
  .wm-beranda .wm-bagian:first-of-type { padding-top: 26px; }
}

/* ── KAKI & AJAKAN HP RINGKAS (pemilik 21 Okt 2026, potret HP: "kok di versi hp masih besar begini"). Dua kartu ajakan jadi DUA KOLOM
   pendek (ikon + judul; kalimat penjelas disembunyikan di HP), kaki: ~~dua kolom berjudul "Properti"/"Winmax" (4 + 3 baris)~~ -> tautan
   sebaris yang membungkus tanpa judul, alamat satu baris kecil, jarak dirapatkan. Layar > 600px tidak berubah. */
@media (max-width: 600px) {
  .wm-aksi-dua { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wm .wm-aksi-kartu { gap: 10px; padding: 12px; border-radius: 14px; }
  .wm-aksi-ikon { width: 36px; height: 36px; border-radius: 10px; }
  .wm-aksi-ikon svg { width: 18px; height: 18px; }
  .wm-aksi-teks b { font-size: 13.5px; line-height: 1.3; }
  .wm-aksi-teks > span { display: none; }
  .wm-aksi-panah { display: none; }
  .wm-kaki { margin-top: 28px; font-size: 12.5px; }
  .wm-kaki-isi { gap: 12px; padding-top: 18px; padding-bottom: 12px; }
  .wm-kaki-merek { gap: 8px; }
  .wm-kaki-merek img { height: 24px; }
  .wm-kaki-merek p br { display: none; }
  .wm-kaki-merek p a::before { content: ' · '; color: rgba(255,255,255,.5); }
  .wm-sosial a { width: 30px; height: 30px; }
  .wm-sosial svg { width: 14px; height: 14px; }
  .wm-kaki-tautan { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; }
  .wm-kaki-kolom { display: contents; }
  .wm-kaki-kolom b { display: none; }
  .wm-kaki-bawah { padding-top: 10px; padding-bottom: 12px; font-size: 11px; }
  .wm-kaki-merek p a { white-space: nowrap; }
  /* Projects beranda HP: ~~kartu 78% selebar layar, bingkai 16:9 dengan brosur tegak kecil di tengah~~ -> dua kartu terlihat (44%),
     bingkai 3:4 (brosur developer kebanyakan tegak), teks lebih kecil. */
  .wm-beranda .wm-geser > .wm-proyek-kartu { flex: 0 0 44%; }
  .wm-beranda .wm-proyek-foto { aspect-ratio: 3 / 4; border-radius: 12px; }
  .wm-beranda .wm-proyek-kartu .wm-proyek-dev { margin-top: 8px; font-size: 10px; }
  .wm-beranda .wm-proyek-kartu b { font-size: 14px; line-height: 1.3; }
  .wm-beranda .wm-proyek-kartu-sub { font-size: 12px; line-height: 1.4; }
}

/* ── DETAIL SUSUNAN PADAT (pemilik 21 Okt 2026 malam atas /properti/20974: "harusnya jauh lebih bisa dipadatkan dan lebih efisien UXnya").
   ~~flex kolom kiri (galeri, judul, harga, spek, detail, deskripsi) + kolom kanan sticky (agen, KPR)~~: di 1920 judul & harga baru
   terlihat di bawah galeri, kolom kanan kosong di bawah kartu agen. Kini petak bernama (detail.ejs, enam blok wm-d-*):
     layar >= 901:  foto      | ringkasan (judul, lokasi, harga, spek)
                    foto      | agen (WhatsApp/Telepon terlihat di layar pertama)
                    deskripsi | detail properti
                    deskripsi | KPR
     HP: satu kolom foto (galeri HP), ringkasan, detail, deskripsi, agen, KPR; bilah kontak tetap di bawah layar. */
.wm-detail-isi { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "galeri" "ringkas" "rinci" "desk" "agen" "kpr"; gap: 0; align-items: start; }
.wm-d-galeri { grid-area: galeri; min-width: 0; }
.wm-d-ringkas { grid-area: ringkas; min-width: 0; }
.wm-d-rinci { grid-area: rinci; min-width: 0; }
.wm-d-desk { grid-area: desk; min-width: 0; }
.wm-d-agen { grid-area: agen; min-width: 0; }
.wm-d-kpr { grid-area: kpr; min-width: 0; }
.wm-d-kpr .wm-kpr { margin-top: 0; }
@media (max-width: 900px) {
  .wm-d-galeri { display: none; }
  .wm-d-agen, .wm-d-kpr { margin-top: 26px; }
}
@media (min-width: 901px) {
  .wm-detail-isi { margin-top: 14px; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 28px;
    grid-template-areas: "galeri ringkas" "galeri agen" "desk rinci" "desk kpr"; grid-template-rows: auto 1fr auto auto; }
  /* Foto SETINGGI kolom kanan (ringkasan + agen): ~~baris 200 + 200 tetap~~ menyisakan celah kosong di bawah foto saat judul dua baris
     + kartu agen lebih tinggi (potret 1366: ~180px kosong). Tinggi minimum per lebar layar, batas 720 (banyak agen). */
  .wm-d-galeri { align-self: stretch; display: flex; flex-direction: column; }
  .wm-d-galeri > .wm-galeri { flex: 1 1 auto; margin-bottom: 0; min-height: 410px; max-height: 720px; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .wm-d-galeri > .wm-galeri--satu, .wm-d-galeri > .wm-galeri--n2 { grid-template-rows: minmax(0, 1fr); }
  .wm-d-ringkas .wm-lencana-baris--statis { margin-top: 0; }
  .wm-d-ringkas .wm-detail-judul { margin-top: 8px; font-size: 24px; line-height: 1.25; }
  .wm-d-ringkas .wm-detail-lokasi { margin-top: 6px; font-size: 14px; }
  .wm-d-ringkas .wm-detail-harga { margin-top: 12px; font-size: 26px; }
  .wm-d-ringkas .wm-detail-harga-penuh { font-size: 13px; }
  .wm-d-ringkas .wm-angka-utama { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .wm-d-ringkas .wm-angka-utama > div { padding: 9px 12px; border-radius: 10px; gap: 2px; }
  .wm-d-ringkas .wm-angka-utama span { font-size: 12px; }
  .wm-d-ringkas .wm-angka-utama b { font-size: 16px; }
  .wm-d-agen { margin-top: 22px; }
  .wm-d-agen .wm-agen-kotak { padding: 16px 18px; border-radius: 16px; box-shadow: 0 10px 26px rgba(16,22,60,.07); }
  .wm-d-agen .wm-agen-satu--lagi { margin-top: 12px; padding-top: 12px; }
  .wm-d-agen .wm-agen-aksi { margin-top: 12px; }
  .wm-d-agen .wm-agen-aksi .wm-tombol { height: 44px; }
  .wm-d-agen .wm-bagikan-baris { margin-top: 12px; padding-top: 12px; }
  .wm-d-rinci .wm-detail-sub, .wm-d-desk .wm-detail-sub { margin: 26px 0 6px; font-size: 18px; }
  .wm-d-rinci .wm-rinci { grid-template-columns: minmax(0, 1fr); }
  .wm-d-rinci .wm-rinci > div { padding: 8px 0; font-size: 14px; }
  .wm-d-desk .wm-deskripsi { font-size: 15px; line-height: 1.7; }
  .wm-d-desk .wm-deskripsi--lipat { max-height: 340px; }
  .wm-d-kpr { margin-top: 22px; }
  .wm-d-kpr .wm-kpr { padding: 16px 18px; border-radius: 16px; }
  .wm-d-kpr .wm-kpr-kepala { flex-direction: column; align-items: flex-start; gap: 8px; }
  .wm-d-kpr .wm-kpr-hasil { text-align: left; }
  .wm-d-kpr .wm-kpr-hasil b { font-size: 22px; }
  .wm-d-kpr .wm-kpr-isian { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
  .wm-d-kpr .wm-kpr-isian label { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .wm-d-kpr .wm-kpr-isian select { height: 38px; min-width: 130px; font-size: 14px; }
}
@media (min-width: 1400px) { .wm-detail-isi { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 32px; } }
/* >= 1200 (pemilik 22 Okt 2026 atas potret ±1900px pabrik Sidayu: "ini kosongnya terlalu banyak"): ~~deskripsi | detail properti + KPR
   bertumpuk di kolom kanan~~ — deskripsi pendek menyisakan kolom kiri kosong setinggi detail + KPR. Baris di bawah foto kini TIGA blok
   sebaris: deskripsi | detail properti | KPR (foto tetap selebar dua kolom kiri). Berlaku sampai 2399; >= 2400 tetap tiga kolom sendiri. */
@media (min-width: 1200px) and (max-width: 2399.98px) {
  .wm-detail-isi, .wm-detail-isi--desk-pendek { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 380px; column-gap: 32px;
    grid-template-areas: "galeri galeri ringkas" "galeri galeri agen" "desk rinci kpr"; grid-template-rows: auto 1fr auto; }
  .wm-detail-isi .wm-d-kpr { margin-top: 26px; }
  .wm-detail-isi--desk-pendek .wm-d-kpr .wm-kpr-kepala { flex-direction: column; align-items: flex-start; }
  .wm-detail-isi--desk-pendek .wm-d-kpr .wm-kpr-hasil { text-align: left; }
  .wm-detail-isi--desk-pendek .wm-d-kpr .wm-kpr-isian { grid-template-columns: 1fr; gap: 8px; }
  .wm-detail-isi--desk-pendek .wm-d-kpr .wm-kpr-isian label { flex-direction: row; align-items: center; gap: 10px; }
}
@media (min-width: 1400px) and (max-width: 2399.98px) { .wm-detail-isi, .wm-detail-isi--desk-pendek { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 400px; } }
/* Deskripsi pendek (detail.ejs): KPR di kolom kiri di bawah deskripsi, tata letak lebar (kepala sebaris, tiga isian sejajar).
   ~~901-2399~~ -> HANYA 901-1199 sejak susunan tiga blok di atas (22 Okt 2026). */
/* ~~@media (min-width: 901px) and (max-width: 1199.98px) { .wm-detail-isi--desk-pendek { grid-template-areas: "galeri ringkas" "galeri agen"
   "desk rinci" "kpr rinci"; … KPR melebar di bawah deskripsi … } }~~ — DICABUT 24 Okt 2026: sejak dua kolom mengalir sendiri (blok di ujung
   berkas) KPR tetap di kolom kanan di bawah agen dan nol ada lubang di bawah deskripsi pendek untuk diisi. */
@media (min-width: 1700px) { .wm-d-galeri > .wm-galeri { min-height: 470px; } }
/* Layar >= 2400 (34"): ~~dua kolom, foto selebar ~2.900px~~ (satu foto persegi = dua sisi kabur ~1.200px) -> TIGA kolom: foto |
   deskripsi | ringkasan, agen, detail, KPR. Seluruh isi listing muat di layar pertama 3440 x 1440. */
@media (min-width: 2400px) {
  .wm-detail-isi { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 460px; column-gap: 40px;
    grid-template-areas: "galeri desk ringkas" "galeri desk agen" "galeri desk rinci" "galeri desk kpr"; grid-template-rows: auto auto auto 1fr; }
  .wm-d-galeri > .wm-galeri { min-height: 600px; max-height: 760px; }
  .wm-d-desk .wm-detail-sub { margin-top: 0; }
  .wm-d-desk .wm-deskripsi--lipat { max-height: 620px; }
}

/* ── LAYAR SANGAT LEBAR (pemilik 21 Okt 2026 malam, potret layar 34": "ini terlalu besar sih, kalau lebih kecil kan bisa muat lebih
   banyak"). ~~>= 1700 = 6 kolom sampai seberapa pun lebarnya~~ (kartu ~540px di 3440). Kini 2400-3199 = 8 kolom, >= 3200 = 12 kolom
   (kartu ~270px, selebar kartu laptop 15,6" yang disetujui). 24 per halaman habis dibagi 8 dan 12: baris tetap penuh. Beranda merender
   24 listing & 12 project (server.mjs) dan menampilkan dua baris penuh: 8 kolom = 16, 12 kolom = 24; project satu baris. */
/* Beranda < 2400 tetap merender lebih banyak dari yang tampil: kartu ke-13 dst. disembunyikan di semua lebar desktop yang lebih sempit
   (aturan lama hanya menyembunyikan mulai ke-7 di 901-1199 dan memunculkan sampai ke-12). */
/* Kepala Deskripsi + tombol salin (22 Okt 2026): jarak atas/bawah pindah dari judul ke barisnya. */
.wm-desk-kepala { display: flex; align-items: center; gap: 10px; margin: 28px 0 10px; }
.wm .wm-desk-kepala .wm-detail-sub { margin: 0; }
@media (min-width: 901px) { .wm-desk-kepala { margin: 26px 0 8px; } }
@media (min-width: 2400px) { .wm-desk-kepala { margin-top: 0; } }
/* REKOMENDASI AI: ~~DUA BARIS penuh sesuai kolom (21 Okt 2026 malam)~~ -> TAK TERBATAS (22 Okt 2026): semua kartu tampil, tahap
   berikutnya dimuat saat digulir (detail.ejs). Aturan nth-child pembatasnya dicabut. */
.wm-rek-lanjut { display: flex; justify-content: center; padding: 22px 0 4px; }
.wm-rek-muat { font-size: 14px; color: var(--wm-redup); }

/* ── BARIS TERAKHIR YANG TIDAK PENUH DISEMBUNYIKAN (beranda; ~~& Rekomendasi AI~~ — dicabut 22 Okt 2026, rekomendasi kini tak terbatas
   & dimuat bertahap; 21 Okt 2026 malam, potret 3440: Hot Listing 13 kartu di
   12 kolom = baris kedua berisi SATU kartu, "bablas"). Kartu pembuka baris ke-2 dst. (N.k+1) yang termasuk N-1 kartu terakhir = baris itu
   tidak penuh -> kartu itu & sesudahnya disembunyikan. Baris pertama SELALU tampil walau tidak penuh. Halaman cari tidak tersentuh (baris
   terakhir hasil pencarian memang boleh sisa). */

/* ── DAFTAR LISTING HP RINGKAS (pemilik 21 Okt 2026 malam: "untuk halaman situs, apalagi di HP kamu harus bener2 meletakan semuanya
   efisien dan tidak makan space, bener2 maksimalkan spacenya tapi UXnya tetap bagus"). ~~Kartu tegak selebar layar ±520px (foto 3:2 di
   atas, isi, baris agen): 24 listing = ±12.500px gulir, 1,5 listing per layar~~ -> BARIS: foto 128px di kiri (tetap bisa digeser,
   utuh/contain), harga, judul 2 baris, lokasi, spek LT/LB/KT/KM, agen + tombol WhatsApp ikon di kanan. ±170px per listing = 4-5 per
   layar. Berlaku untuk daftar (cari, hot listing, listing terbaru, listing agen); baris geser beranda & Rekomendasi AI tetap kartu tegak. */
@media (max-width: 600px) {
  .wm-grid:not(.wm-geser) { gap: 10px; }
  .wm-grid:not(.wm-geser) > .wm-kartu { display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; border-radius: 14px; }
  .wm-grid:not(.wm-geser) > .wm-kartu > .wm-kartu-foto { grid-row: 1 / 3; grid-column: 1; aspect-ratio: auto; min-height: 150px; border-bottom: 0; border-right: 1px solid #EEF0F5; }
  .wm-grid:not(.wm-geser) > .wm-kartu > .wm-kartu-isi { grid-column: 2; padding: 8px 10px 2px; gap: 2px; }
  .wm-grid:not(.wm-geser) > .wm-kartu > .wm-kartu-agen { grid-column: 2; padding: 4px 10px 8px; gap: 6px; border-top: 0; }
  .wm-grid:not(.wm-geser) .wm-kartu-harga { font-size: 16px; height: 22px; line-height: 22px; }
  .wm-grid:not(.wm-geser) .wm-kartu-harga--dua { font-size: 13px; }
  .wm-grid:not(.wm-geser) .wm-kartu-judul { font-size: 13px; line-height: 1.35; min-height: calc(1.35em * 2); }
  .wm-grid:not(.wm-geser) .wm-kartu-lokasi { font-size: 11.5px; min-height: 1.3em; }
  .wm-grid:not(.wm-geser) .wm-kartu-lokasi svg { width: 12px; height: 12px; }
  .wm .wm-grid:not(.wm-geser) .wm-spek { gap: 3px; margin-top: 3px; }
  .wm .wm-grid:not(.wm-geser) .wm-spek span { padding: 2px 1px; font-size: 10.5px; border-radius: 5px; }
  .wm .wm-grid:not(.wm-geser) .wm-spek i { font-size: 8.5px; }
  .wm-grid:not(.wm-geser) .wm-kartu-agen .wm-avatar { width: 22px; height: 22px; }
  .wm-grid:not(.wm-geser) .wm-avatar-tumpuk .wm-avatar { margin-left: -7px; border-width: 1.5px; }
  .wm-grid:not(.wm-geser) .wm-agen-teks .user_agent_name, .wm-grid:not(.wm-geser) .wm-agen-teks .wm-agen-nama { font-size: 12px; }
  .wm-grid:not(.wm-geser) .wm-agen-teks .user_agent_address, .wm-grid:not(.wm-geser) .wm-agen-teks .wm-agen-kantor { font-size: 10.5px; }
  .wm-grid:not(.wm-geser) .wm-wa { width: 34px; height: 34px; padding: 0; gap: 0; justify-content: center; font-size: 0; border-radius: 10px; flex: none; }
  .wm-grid:not(.wm-geser) .wm-wa svg { width: 18px; height: 18px; }
  .wm-grid:not(.wm-geser) .wm-lencana-baris { top: 6px; left: 6px; gap: 3px; }
  .wm-grid:not(.wm-geser) .wm-lencana { padding: 2px 7px; font-size: 10px; }
  .wm-grid:not(.wm-geser) .wm-geser-titik { bottom: 5px; gap: 3px; }
  .wm-grid:not(.wm-geser) .wm-geser-titik i { width: 4px; height: 4px; }
  .wm-grid:not(.wm-geser) .wm-geser-titik i.aktif { width: 10px; }
  /* BARIS GESER (beranda Hot/Terbaru, Rekomendasi AI): ~~78% = 1,2 kartu per layar, ±430px tinggi~~ -> DUA kartu ringkas per layar
     (kartu ketiga mengintip = tanda bisa digeser), foto 4:3, WhatsApp ikon saja. */
  .wm-geser > .wm-kartu { flex: 0 0 46%; min-width: 0; border-radius: 14px; }
  .wm-geser > .wm-kartu .wm-kartu-foto { aspect-ratio: 4 / 3; }
  .wm-geser > .wm-kartu .wm-kartu-isi { padding: 8px 9px 4px; gap: 2px; }
  .wm-geser > .wm-kartu .wm-kartu-harga { font-size: 14.5px; height: 20px; line-height: 20px; }
  .wm-geser > .wm-kartu .wm-kartu-harga--dua { font-size: 11.5px; }
  .wm-geser > .wm-kartu .wm-kartu-judul { font-size: 12px; line-height: 1.35; min-height: calc(1.35em * 2); }
  .wm-geser > .wm-kartu .wm-kartu-lokasi { font-size: 10.5px; }
  .wm-geser > .wm-kartu .wm-kartu-lokasi svg { width: 11px; height: 11px; }
  .wm .wm-geser > .wm-kartu .wm-spek { gap: 2px; margin-top: 3px; }
  .wm .wm-geser > .wm-kartu .wm-spek span { padding: 2px 0; font-size: 9.5px; border-radius: 5px; }
  .wm .wm-geser > .wm-kartu .wm-spek i { font-size: 8px; }
  .wm-geser > .wm-kartu .wm-kartu-agen { padding: 6px 9px 8px; gap: 5px; }
  .wm-geser > .wm-kartu .wm-kartu-agen .wm-avatar { width: 20px; height: 20px; }
  .wm-geser > .wm-kartu .wm-avatar-tumpuk .wm-avatar { margin-left: -7px; border-width: 1.5px; }
  .wm-geser > .wm-kartu .wm-agen-teks .user_agent_name, .wm-geser > .wm-kartu .wm-agen-teks .wm-agen-nama { font-size: 11px; }
  .wm-geser > .wm-kartu .wm-agen-teks .user_agent_address, .wm-geser > .wm-kartu .wm-agen-teks .wm-agen-kantor { display: none; }
  .wm-geser > .wm-kartu .wm-wa { width: 30px; height: 30px; padding: 0; gap: 0; justify-content: center; font-size: 0; border-radius: 9px; flex: none; }
  .wm-geser > .wm-kartu .wm-wa svg { width: 16px; height: 16px; }
  .wm-geser > .wm-kartu .wm-lencana-baris { top: 6px; left: 6px; gap: 3px; }
  .wm-geser > .wm-kartu .wm-lencana { padding: 2px 7px; font-size: 10px; }
  /* CARI PER WILAYAH: ~~pil membungkus 8 baris (±300px)~~ -> DUA baris yang bisa digeser ke samping (±80px). */
  .wm-wilayah { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-template-columns: none; grid-auto-columns: max-content; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .wm-wilayah::-webkit-scrollbar { display: none; }
  .wm-wilayah a { padding: 7px 12px; }
  .wm-wilayah b { font-size: 12.5px; white-space: nowrap; }
  .wm-bagian { padding-top: 30px; }
  .wm-bagian-kepala { margin-bottom: 14px; }
  /* HALAMAN PROJECTS: ~~satu kartu selebar layar (65 project ±40.000px)~~ -> DUA kolom, bingkai 3:4 (brosur developer tegak), WhatsApp
     ikon saja; ketuk foto / "Detail" tetap membuka jendela detail. */
  .wm-proyek.wm-proyek--halaman { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wm-proyek--halaman .wm-proyek-blok { border-radius: 14px; }
  .wm-proyek--halaman .wm-proyek-foto { aspect-ratio: 3 / 4; }
  .wm-proyek--halaman .wm-proyek-isi { padding: 8px 9px 9px; gap: 3px; }
  .wm-proyek--halaman .wm-proyek-dev { font-size: 9.5px; letter-spacing: .04em; }
  .wm-proyek--halaman .wm-proyek-nama { font-size: 13.5px; }
  .wm-proyek--halaman .wm-kartu-lokasi { font-size: 10.5px; }
  .wm-proyek--halaman .wm-proyek-harga { font-size: 12.5px; }
  .wm-proyek--halaman .wm-proyek-aksi { gap: 6px; padding-top: 4px; }
  .wm-proyek--halaman .wm-proyek-aksi .wm-tombol { height: 32px; padding: 0 8px; font-size: 12px; border-radius: 9px; }
  .wm-proyek--halaman .wm-proyek-aksi .wm-tombol--navy { flex: 0 0 32px; padding: 0; gap: 0; font-size: 0; }
  .wm-proyek--halaman .wm-proyek-aksi .wm-tombol--navy svg { width: 16px; height: 16px; }
  .wm-proyek--halaman .wm-lencana-baris { top: 6px; left: 6px; }
  .wm-proyek--halaman .wm-lencana { padding: 2px 7px; font-size: 10px; }
  .wm-proyek--halaman .wm-jumlah-foto { font-size: 10px; padding: 2px 6px; }
}

/* ── JOIN US (21 Okt 2026 malam, views/join-us.ejs; isi dari winmaxproperty.id). Isi dibatasi 1680px supaya baris teks tetap terbaca
   di layar 34"; kotak video & mentor bertambah kolom mengikuti lebar. HP: video & mentor jadi baris geser, tombol Daftar menempel di
   bawah layar. */
.wm-gabung-hal main .wm-wadah { max-width: 1680px; }
@media (min-width: 2400px) { .wm-gabung-hal main .wm-wadah { max-width: 2400px; } .wm-gabung-hero h1 { font-size: 48px; } .wm-gabung-teks { max-width: 1100px; } }
.wm-gabung-hero { background: linear-gradient(135deg, var(--wm-navy-gelap), var(--wm-navy) 60%, var(--wm-biru)); color: #FFFFFF; }
.wm-gabung-hero-isi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.wm-gabung-kecil { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wm-oranye-muda); }
.wm-gabung-hero h1 { margin: 0; font-size: 40px; line-height: 1.18; font-weight: 800; letter-spacing: -.015em; }
.wm-gabung-sub { margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.82); }
.wm-gabung-aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.wm a.wm-gabung-tombol-wa { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: #FFFFFF; }
.wm-gabung-tombol-wa svg { width: 20px; height: 20px; }
.wm-gabung-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #10163C; cursor: pointer; color: #FFFFFF; text-align: left; font: inherit; }
.wm-gabung-video img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.wm-gabung-video:hover img { transform: scale(1.03); }
.wm-gabung-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(16,22,60,.85)); }
.wm-gabung-putar { position: absolute; left: 50%; top: 50%; z-index: 1; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: var(--wm-oranye); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.wm-gabung-putar svg { width: 28px; height: 28px; margin-left: 3px; }
.wm-gabung-video b { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; font-size: 15px; line-height: 1.35; }
.wm-gabung-iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; background: #000; }
.wm-gabung-unggul { list-style: none; margin: -28px 0 0; padding: 0; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.wm-gabung-unggul li { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--wm-garis); box-shadow: 0 14px 30px rgba(16,22,60,.08); }
.wm-gabung-unggul b { font-size: 16px; color: var(--wm-navy); }
.wm-gabung-unggul span { font-size: 14px; line-height: 1.5; color: var(--wm-redup); }
.wm-gabung-hal .wm-bagian { padding-top: 64px; }
.wm-gabung-hal .wm-bagian-kepala { margin-bottom: 10px; }
.wm-gabung-hal .wm-bagian-kepala h2, .wm-gabung-h2 { margin: 0; font-size: 30px; line-height: 1.25; font-weight: 800; color: var(--wm-navy); letter-spacing: -.01em; }
.wm-gabung-h3 { margin: 24px 0 0; font-size: 19px; color: var(--wm-navy); }
.wm-gabung-teks { max-width: 860px; margin: 10px 0 0; font-size: 16px; line-height: 1.7; color: #3A4060; }
.wm-gabung-tautan { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--wm-oranye); text-decoration: none; }
.wm-gabung-video-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.wm-gabung-dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.wm-gabung-dua--balik { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.wm-gabung-foto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 150px); gap: 10px; }
.wm-gabung-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
.wm-gabung-foto img:first-child { grid-column: 1 / 3; grid-row: 1 / 2; }
.wm-gabung-foto img:first-child { grid-row: 1 / 2; }
.wm-gabung-tiga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.wm-gabung-kartu h3 { margin: 16px 0 0; font-size: 18px; color: var(--wm-navy); }
.wm-gabung-kartu p { margin: 6px 0 0; font-size: 15px; line-height: 1.65; color: #3A4060; }
.wm-gabung-mentor { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.wm-gabung-mentor img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 14px; display: block; background: #10163C; }
.wm-gabung-mitra { width: 100%; max-width: 560px; aspect-ratio: 1; object-fit: cover; border-radius: 20px; display: block; }
.wm-gabung-dua .wm-tombol { margin-top: 22px; }
.wm-gabung-lokasi { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 22px; margin-top: 18px; }
.wm-gabung-lokasi a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; font-weight: 700; color: var(--wm-navy); }
.wm-gabung-lokasi img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 16px; display: block; }
.wm-gabung-ajak { margin: 64px 0 0; padding: 40px 32px; border-radius: 24px; background: var(--wm-biru-lembut); text-align: center; }
.wm-gabung-ajak h2 { margin: 0; font-size: 28px; color: var(--wm-navy); }
.wm-gabung-ajak p { margin: 8px 0 0; font-size: 16px; color: var(--wm-redup); }
.wm-gabung-ajak .wm-gabung-aksi { justify-content: center; }
.wm-gabung-bilah { display: none; }
@media (min-width: 1200px) {
  .wm-gabung-akhir { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .wm-gabung-akhir .wm-gabung-dua--balik { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; align-items: start; }
  .wm-gabung-akhir .wm-gabung-lokasi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-gabung-akhir .wm-gabung-teks { font-size: 15px; }
}
@media (max-width: 1199.98px) {
  .wm-gabung-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-gabung-mentor { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
  .wm-gabung-unggul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .wm-gabung-hero-isi { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 28px; padding-bottom: 52px; }
  .wm-gabung-hero h1 { font-size: 26px; }
  .wm-gabung-sub { font-size: 15px; }
  .wm-gabung-aksi .wm-tombol { flex: 1 1 200px; }
  .wm-gabung-hal .wm-bagian { padding-top: 40px; }
  .wm-gabung-hal .wm-bagian-kepala h2, .wm-gabung-h2 { font-size: 22px; }
  .wm-gabung-teks { font-size: 15px; }
  .wm-gabung-dua, .wm-gabung-dua--balik { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .wm-gabung-foto { grid-template-rows: 180px 110px 110px; }
  /* Video & mentor: baris geser (dua kartu terlihat sebagian = tanda bisa digeser). */
  /* Video, kartu reward & mentor: baris geser (kartu berikutnya terlihat sebagian = tanda bisa digeser). min-width 0 WAJIB: tanpa itu
     gambar flex selebar ukuran aslinya (700px) dan mentor tampil satu per layar. */
  .wm-gabung-video-grid, .wm-gabung-mentor, .wm-gabung-tiga { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-left: -16px; margin-right: -16px; padding: 0 16px 6px; scrollbar-width: none; max-width: none; scroll-padding-inline: 16px; }
  .wm-gabung-video-grid::-webkit-scrollbar, .wm-gabung-mentor::-webkit-scrollbar, .wm-gabung-tiga::-webkit-scrollbar { display: none; }
  .wm-gabung-video-grid > *, .wm-gabung-tiga > * { flex: 0 0 80%; min-width: 0; scroll-snap-align: start; }
  .wm-gabung-mentor > * { flex: 0 0 40%; min-width: 0; scroll-snap-align: start; }
  .wm-gabung-kartu h3 { margin-top: 10px; font-size: 16px; }
  .wm-gabung-kartu p { font-size: 13.5px; line-height: 1.55; }
  .wm-gabung-mitra { max-width: 300px; }
  .wm-gabung-lokasi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wm-gabung-lokasi a { font-size: 13.5px; }
  .wm-gabung-ajak { margin-top: 40px; padding: 28px 18px; }
  .wm-gabung-ajak h2 { font-size: 21px; }
  .wm-gabung-bilah { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: #FFFFFF; border-top: 1px solid var(--wm-garis); box-shadow: 0 -10px 24px rgba(16,22,60,.08); }
  .wm-gabung-bilah .wm-tombol { height: 50px; }
  /* Satu tombol saja (audit UX 23 Okt 2026 nomor 13): bilah turun selama tombol Daftar hero masih terlihat. */
  .wm-gabung-bilah { transition: transform .2s ease; }
  .wm-gabung-bilah.wm-gabung-bilah--sembunyi { transform: translateY(110%); }
  .wm-gabung-hal .wm-kaki { padding-bottom: 80px; }
}
@media (max-width: 600px) {
  .wm-gabung-unggul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: -32px; }
  .wm-gabung-unggul li { padding: 12px; border-radius: 12px; }
  .wm-gabung-unggul b { font-size: 14px; }
  .wm-gabung-unggul span { font-size: 12.5px; }
  .wm-gabung-putar { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  /* Dua tombol sebaris (dulu bertumpuk dua baris penuh). */
  .wm-gabung-aksi { gap: 8px; margin-top: 18px; }
  .wm-gabung-aksi .wm-tombol { flex: 1 1 0; min-width: 0; height: 46px; padding: 0 10px; font-size: 14px; gap: 6px; }
}

/* ── HERO: ORANG DI FOTO TIDAK BOLEH TERTUTUP TULISAN (pemilik 22 Okt 2026 malam, potret beranda: "aku mau responsive bekerja di gambar
   ini, jangan sampai gambar orang itu ketutupan tulisan apalagi kalau versi HP, kamu harus pastikan ini berjalan dengan baik").
   Foto hero-beranda.webp 1983x793 (2,5 : 1); pasangan di sofa di ±47-73% lebar foto (tengahnya ±60%), ±22-85% tingginya.
   - LAYAR LEBAR (> 900px): foto tetap penuh di belakang, tapi POSISI MENDATARNYA DIHITUNG supaya tengah pasangan jatuh di tengah ruang
     KOSONG kanan tulisan (bukan object-position tetap: dulu "center" — di 1000-1300px foto dipotong kiri-kanan sama banyak dan pasangan
     bergeser ke bawah tulisan). Tulisan dibatasi 44vw / 680px (46vw masih menyentuh rambut di 1440px, terukur); gelap kiri berhenti tepat sesudah tulisan.
       --hl lebar spanduk, --ht tingginya, --hd lebar foto setelah "cover" = max(lebar, tinggi x 2,5), --teks ujung kanan tulisan,
       --sasaran tengah ruang kosong; geser dijepit antara (lebar - lebar foto) dan 0 supaya foto tidak pernah menyisakan celah.
   - ~~HP & TABLET (<= 900px): tulisan TIDAK lagi di atas foto.~~ (diralat — lihat blok HP & TABLET di bawah) Spanduk = blok tulisan berlatar coklat tua, lalu FOTO UTUH di bawahnya
     (tinggi 56% lebar, pasangan di tengah); kotak cari cuma menumpang sedikit di lantai foto (di bawah kaki pasangan, ±85% tinggi).
   Bunyi lama yang dikalahkan: ~~object-position: center 45%~~ di semua lebar; HP ~~tulisan di atas foto bergradasi gelap~~. */
@media (min-width: 901px) {
  .wm-beranda .wm-hero {
    --hl: calc(100vw - 56px); --ht: clamp(520px, 66vh, 820px);
    --hd: max(var(--hl), calc(var(--ht) * 2.5006));
    --teks: calc(28px + min(680px, 44vw));
    --sasaran: calc(var(--teks) + (var(--hl) - var(--teks)) / 2);
  }
  .wm-beranda .wm-hero > img { object-position: clamp(calc(var(--hl) - var(--hd)), calc(var(--sasaran) - var(--hd) * 0.6), 0px) 42%; }
  .wm-beranda .wm-hero h1 { max-width: min(680px, 44vw); }
  .wm-beranda .wm-hero-sub { max-width: min(600px, 42vw); }
  .wm-beranda .wm-hero-lapis {
    background: linear-gradient(90deg, rgba(var(--wm-coklat), .86) 0px, rgba(var(--wm-coklat), .74) calc(var(--teks) * .66), rgba(var(--wm-coklat), .38) var(--teks), rgba(var(--wm-coklat), 0) calc(var(--teks) + 110px)),
      radial-gradient(ellipse at 0% 100%, rgba(240, 96, 31, .22) 0%, rgba(240, 96, 31, 0) 45%); }
}
/* HP & TABLET (<= 900px) — DIRALAT di malam yang sama (pemilik: "aku ga mau tulisannya dipindah keatas, stylenya tetap sama, kecilkan
   tulisannya sesuaikan semuanya"): ~~tulisan di blok coklat tersendiri DI ATAS foto~~ -> tulisan TETAP menumpang di foto (gaya semula),
   lebih kecil. Foto dipasang dari BAWAH spanduk setinggi --gb; spanduk = tinggi tulisan + 78% --gb (penjarak ::after), jadi kepala
   pasangan (±22% tinggi foto) jatuh TEPAT di bawah baris tulisan terakhir berapa pun barisnya, dan kaki (±85%) di atas kotak cari yang
   cuma menumpang 24px. Lebar foto tampil ±36% (HP) — pasangan di ±47-73% selalu utuh dengan object-position 60%. Gelap hanya di
   belakang tulisan, memudar sebelum kepala. */
@media (max-width: 900px) {
  .wm-beranda .wm-hero { --gb: clamp(380px, 60vw, 520px); display: block; height: auto; background: rgb(var(--wm-coklat)); }
  .wm-beranda .wm-hero > img { position: absolute; inset: auto 0 0 0; width: 100%; height: var(--gb); object-fit: cover; object-position: 60% 50%;;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 80px); mask-image: linear-gradient(180deg, transparent 0, #000 80px); }
  /* Tepi atas foto memudar ke latar coklat (dulu garis batas tegas di bawah judul baris pertama, potret 375px). */
  .wm-beranda .wm-hero-lapis { display: none; }
  .wm-beranda .wm-hero-isi { position: relative; padding-top: 22px; padding-bottom: 30px;
    background: linear-gradient(180deg, rgba(var(--wm-coklat), .8) 0%, rgba(var(--wm-coklat), .6) 62%, rgba(var(--wm-coklat), 0) 100%); }
  .wm-beranda .wm-hero::after { content: ""; display: block; height: calc(var(--gb) * .78 - 4px); }
  .wm-beranda .wm-hero-kecil { font-size: 12px; margin-bottom: 8px; }
  .wm-beranda .wm-hero h1 { font-size: 26px; line-height: 1.16; }
  .wm-beranda .wm-hero-sub { margin-top: 8px; font-size: 14px; line-height: 1.5; }
  .wm-beranda .wm-cari { margin-top: -24px; }
}
@media (max-width: 600px) {
  .wm-beranda .wm-hero { --gb: clamp(320px, 106vw, 460px); }
  .wm-beranda .wm-hero-isi { padding-top: 16px; padding-bottom: 26px; }
  .wm-beranda .wm-hero h1 { font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
  .wm-beranda .wm-hero-sub { margin-top: 6px; font-size: 12.5px; line-height: 1.45; }
}
/* JARAK KIRI & KANAN SAMA (pemilik 22 Okt 2026 malam, potret beranda: "sisa space kiri dan kanan beda"): terukur 28px | 28px dari tepi
   isi — yang membuat kanan tampak lebih lebar SCROLLBAR peramban (±15px) yang cuma ada di kanan. Ruang scrollbar kini dicadangkan di
   KEDUA sisi, jadi spanduk & kartu berjarak sama dari tepi jendela. HP (scrollbar mengambang) tidak terpengaruh. */
/* ~~html { scrollbar-gutter: stable both-edges; }~~ — DICABUT di malam yang sama (pemilik: "kok header dan footernya ga full ke kiri dan kanan ?
   ada sisa sedikit ? full kan dong"): ruang scrollbar yang dicadangkan di KEDUA sisi memotong latar header & footer ±15px di tepi. Header &
   footer penuh lebih penting; selisih kanan = lebar scrollbar peramban itu sendiri (sama seperti situs lain). */

/* ── UKURAN KARTU RATA DI SEMUA LEBAR JENDELA (pemilik 22 Okt 2026 malam: "kok ukurannya jomplang banget listingnya" lalu "tapi kok
   aku merasa terlalu kecil yaa ini ? bisa lebih besar kah ?"). Dulu kolom MELOMPAT (beranda 5 kolom untuk seluruh 1400-2399px, lalu 8 & 12;
   cari 4 -> 6 -> 8 -> 12). ~~kolom naik satu per ±300px (kartu ±255-355px)~~ -> naik satu per ±400px: kartu ±280-380px (901px tetap
   3 kolom ±255px), terukur. CARI & DAFTAR kini memakai skema yang SAMA dengan beranda: halaman dimuat sambil digulir (_muat-lanjut),
   jadi ~~kolom wajib membagi 24 (3/4/6/8/12)~~ tidak diperlukan lagi — baris yang tidak penuh cuma di ujung daftar.
   - BERANDA: Listing merender 24 (dua baris penuh sampai 10 kolom), Projects punya deret gesernya sendiri; baris yang tidak penuh
     disembunyikan (aturan "baris selalu penuh").
   ⚠️ TIAP BLOK BERENTANG (min DAN max): penyembunyi blok yang lebih sempit nol boleh ikut berlaku di lebar yang lebih besar (versi
     pertama hanya ber-min-width: beranda 1920 menampilkan 10 kartu untuk 6 kolom, terukur). Penampil ":nth-child(n)", BUKAN "> *"
     (0,2,0 kalah dari penyembunyi 0,3,0, terukur). */
@media (min-width: 901px) and (max-width: 1279.98px) {
  .wm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wm-beranda .wm-grid, .wm-beranda .wm-proyek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wm-beranda .wm-grid > :nth-child(n), .wm-beranda .wm-proyek > :nth-child(n) { display: flex; }
  .wm-beranda .wm-grid > :nth-child(n+7), .wm-beranda .wm-proyek > :nth-child(n+4) { display: none; }
  .wm-beranda .wm-grid > :nth-child(3n+4):nth-last-child(-n+2), .wm-beranda .wm-grid > :nth-child(3n+4):nth-last-child(-n+2) ~ * { display: none; }
}
@media (min-width: 1280px) and (max-width: 1679.98px) {
  .wm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wm-beranda .wm-grid, .wm-beranda .wm-proyek { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wm-beranda .wm-grid > :nth-child(n), .wm-beranda .wm-proyek > :nth-child(n) { display: flex; }
  .wm-beranda .wm-grid > :nth-child(n+9), .wm-beranda .wm-proyek > :nth-child(n+5) { display: none; }
  .wm-beranda .wm-grid > :nth-child(4n+5):nth-last-child(-n+3), .wm-beranda .wm-grid > :nth-child(4n+5):nth-last-child(-n+3) ~ * { display: none; }
}
@media (min-width: 1680px) and (max-width: 2079.98px) {
  .wm-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wm-beranda .wm-grid, .wm-beranda .wm-proyek { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wm-beranda .wm-grid > :nth-child(n), .wm-beranda .wm-proyek > :nth-child(n) { display: flex; }
  .wm-beranda .wm-grid > :nth-child(n+11), .wm-beranda .wm-proyek > :nth-child(n+6) { display: none; }
  .wm-beranda .wm-grid > :nth-child(5n+6):nth-last-child(-n+4), .wm-beranda .wm-grid > :nth-child(5n+6):nth-last-child(-n+4) ~ * { display: none; }
}
@media (min-width: 2080px) and (max-width: 2479.98px) {
  .wm-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wm-beranda .wm-grid, .wm-beranda .wm-proyek { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wm-beranda .wm-grid > :nth-child(n), .wm-beranda .wm-proyek > :nth-child(n) { display: flex; }
  .wm-beranda .wm-grid > :nth-child(n+13), .wm-beranda .wm-proyek > :nth-child(n+7) { display: none; }
  .wm-beranda .wm-grid > :nth-child(6n+7):nth-last-child(-n+5), .wm-beranda .wm-grid > :nth-child(6n+7):nth-last-child(-n+5) ~ * { display: none; }
}
@media (min-width: 2480px) and (max-width: 2879.98px) {
  .wm-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .wm-beranda .wm-grid, .wm-beranda .wm-proyek { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .wm-beranda .wm-grid > :nth-child(n), .wm-beranda .wm-proyek > :nth-child(n) { display: flex; }
  .wm-beranda .wm-grid > :nth-child(n+15), .wm-beranda .wm-proyek > :nth-child(n+8) { display: none; }
  .wm-beranda .wm-grid > :nth-child(7n+8):nth-last-child(-n+6), .wm-beranda .wm-grid > :nth-child(7n+8):nth-last-child(-n+6) ~ * { display: none; }
}
@media (min-width: 2880px) and (max-width: 3279.98px) {
  .wm-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px; }
  .wm-beranda .wm-grid, .wm-beranda .wm-proyek { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px; }
  .wm-beranda .wm-grid > :nth-child(n), .wm-beranda .wm-proyek > :nth-child(n) { display: flex; }
  .wm-beranda .wm-grid > :nth-child(n+17), .wm-beranda .wm-proyek > :nth-child(n+9) { display: none; }
  .wm-beranda .wm-grid > :nth-child(8n+9):nth-last-child(-n+7), .wm-beranda .wm-grid > :nth-child(8n+9):nth-last-child(-n+7) ~ * { display: none; }
}
@media (min-width: 3280px) and (max-width: 3679.98px) {
  .wm-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 20px; }
  .wm-beranda .wm-grid, .wm-beranda .wm-proyek { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 20px; }
  .wm-beranda .wm-grid > :nth-child(n), .wm-beranda .wm-proyek > :nth-child(n) { display: flex; }
  .wm-beranda .wm-grid > :nth-child(n+19), .wm-beranda .wm-proyek > :nth-child(n+10) { display: none; }
  .wm-beranda .wm-grid > :nth-child(9n+10):nth-last-child(-n+8), .wm-beranda .wm-grid > :nth-child(9n+10):nth-last-child(-n+8) ~ * { display: none; }
}
@media (min-width: 3680px) {
  .wm-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 20px; }
  .wm-beranda .wm-grid, .wm-beranda .wm-proyek { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 20px; }
  .wm-beranda .wm-grid > :nth-child(n), .wm-beranda .wm-proyek > :nth-child(n) { display: flex; }
  .wm-beranda .wm-grid > :nth-child(n+21), .wm-beranda .wm-proyek > :nth-child(n+11) { display: none; }
  .wm-beranda .wm-grid > :nth-child(10n+11):nth-last-child(-n+9), .wm-beranda .wm-grid > :nth-child(10n+11):nth-last-child(-n+9) ~ * { display: none; }
}

/* ── MUAT KE BAWAH di cari & daftar (pemilik 22 Okt 2026, "ya kerjakan"; views/_muat-lanjut.ejs): info jumlah, putaran saat memuat,
   tombol "Tampilkan lebih banyak" (layar lebar sesudah 3 kali otomatis) & "Tampilkan sebelumnya" (daftar dibuka di tengah). */
.wm-halaman[hidden], .wm-muat[hidden], .wm-muat-tombol[hidden], .wm-muat-putar[hidden] { display: none; }
.wm-muat { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 0 6px; }
.wm-muat-info { margin: 0; font-size: 13.5px; color: var(--wm-redup); }
.wm-muat-putar { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #E6E8EF; border-top-color: var(--wm-oranye); animation: wm-muat-putar .8s linear infinite; }
@keyframes wm-muat-putar { to { transform: rotate(360deg); } }
.wm-muat-tombol { height: 44px; padding: 0 26px; border-radius: 999px; border: 1px solid #D9DCE5; background: #FFFFFF; color: var(--wm-navy); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.wm-muat-tombol:hover { border-color: var(--wm-navy); }
.wm-muat-sebelum { display: block; margin: 0 auto 18px; }
@media (prefers-reduced-motion: reduce) { .wm-muat-putar { animation-duration: 2.4s; } }

/* ── PROYEK BARU — ELEGAN (pemilik 22 Okt 2026 malam: "norak banget, aku mau bener2 elegan" atas gaya Brighton). ~~Pita abu, kartu
   blok oranye, pil "Dari developer", tombol hitam & oranye, latar foto diburamkan~~ (gaya Brighton, dicabut). Kini: putih & lapang,
   brosur UTUH di bidang krem lembut tanpa bingkai keras, teks tanpa kotak (developer kecil berspasi, nama, lokasi, harga di bawah garis
   tipis), panah bulat bergaris tipis di kanan judul. Kartu tetap-lebar yang digeser; HP diusap (panah disembunyikan). */
.wm-pe-kepala { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.wm-pe-kepala h2 { margin: 0; }
.wm-pe-alat { display: flex; align-items: center; gap: 10px; }
.wm-pe .wm-pe-semua { margin-right: 10px; font-size: 14.5px; font-weight: 600; color: var(--wm-navy); text-decoration: none; border-bottom: 1px solid rgba(16, 22, 60, .25); padding-bottom: 2px; transition: border-color .2s, color .2s; }
.wm-pe .wm-pe-semua:hover { color: var(--wm-oranye); border-color: var(--wm-oranye); }
.wm-pe-panah { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #D9DCE5; background: #FFFFFF; color: var(--wm-navy); display: grid; place-items: center; cursor: pointer; transition: border-color .2s, color .2s, opacity .2s; }
.wm-pe-panah svg { width: 20px; height: 20px; }
.wm-pe-panah:hover:not(:disabled) { border-color: var(--wm-navy); }
.wm-pe-panah:disabled { opacity: .35; cursor: default; }
.wm-pe-geser { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; }
.wm-pe-geser::-webkit-scrollbar { display: none; }
.wm-pe-kartu { flex: 0 0 clamp(250px, 21vw, 340px); scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; color: var(--wm-tinta); }
.wm-pe-foto { display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #F4F1EC; }
.wm-pe-foto img { width: 100%; height: 100%; object-fit: contain; padding: 18px; display: block; transition: transform .5s ease; }
.wm-pe-kartu:hover .wm-pe-foto img { transform: scale(1.035); }
.wm-pe-dev { min-height: 1.4em; margin-top: 16px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9A8F86; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-pe-kartu .wm-pe-nama { margin-top: 6px; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--wm-navy); }
.wm-pe-dev + .wm-pe-nama { margin-top: 4px; }
.wm-pe-lokasi { margin-top: 4px; margin-bottom: 12px; font-size: 14px; color: #7A7F93; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Harga di DASAR kartu (margin-top: auto) — sejajar di semua kartu walau nama/lokasi beda panjang. */
.wm-pe-harga { margin-top: auto; padding-top: 12px; border-top: 1px solid #ECEAE6; font-size: 15px; font-weight: 600; color: var(--wm-navy); }
.wm-pe-kartu:hover .wm-pe-nama { color: var(--wm-oranye); }
@media (max-width: 900px) {
  .wm-pe-kepala { margin-bottom: 16px; }
  .wm-pe-panah { display: none; }
  .wm-pe .wm-pe-semua { margin-right: 0; font-size: 13.5px; }
  .wm-pe-geser { gap: 14px; margin: 0 -16px; padding: 0 16px 4px; scroll-padding-left: 16px; }
  .wm-pe-kartu { flex-basis: 58%; }
  .wm-pe-foto { border-radius: 12px; }
  .wm-pe-foto img { padding: 12px; }
  .wm-pe-dev { margin-top: 12px; font-size: 10px; }
  .wm-pe-kartu .wm-pe-nama { font-size: 15.5px; }
  .wm-pe-lokasi { font-size: 12.5px; }
  .wm-pe-lokasi { margin-bottom: 8px; }
  .wm-pe-harga { padding-top: 8px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .wm-pe-foto img { transition: none; } .wm-pe-kartu:hover .wm-pe-foto img { transform: none; } }

/* ── CARI PROYEK di /projects (pemilik 22 Okt 2026: "harus ada search dong disini"): kotak cari bulat selebar maksimal 560px di atas
   saringan jenis; pesan bila tidak ada yang cocok. */
.wm-cari-proyek { display: flex; align-items: center; gap: 10px; max-width: 560px; height: 48px; margin: -6px 0 16px; padding: 0 16px; border: 1px solid #D9DCE5; border-radius: 999px; background: #FFFFFF; cursor: text; transition: border-color .2s, box-shadow .2s; }
.wm-cari-proyek[hidden] { display: none; }
.wm-cari-proyek:focus-within { border-color: var(--wm-navy); box-shadow: 0 0 0 3px rgba(16, 22, 60, .08); }
.wm-cari-proyek svg { flex: none; width: 19px; height: 19px; color: #7A7F93; }
.wm .wm-cari-proyek input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--wm-tinta); }
.wm-proyek-kosong { margin: 8px 0 24px; padding: 22px; border: 1px dashed #D9DCE5; border-radius: 16px; text-align: center; font-size: 14.5px; color: var(--wm-redup); }
.wm-proyek-kosong[hidden] { display: none; }
@media (max-width: 900px) { .wm-cari-proyek { max-width: none; height: 44px; margin-top: -4px; } .wm .wm-cari-proyek input { font-size: 16px; } }

/* ── HP NYAMAN (pemilik 22 Okt 2026 malam: "halaman situs kalau dibuka via HP, kamu harus cek semua halaman jangan sampai terlalu kecil
   juga, harus benar2 efisien dan efektif UI UXnya", lalu "buat UInya jgn terlalu rame dan berantakan yaa, harus nyaman dipakai").
   Audit 11 halaman di 375px (alat audit-hp: teks < 12px, sasaran sentuh < 40px, geser samping): nol geser samping; yang kecil & ramai —
   spek kartu EMPAT KOTAK berhuruf 8-10,5px (nilai terpotong "7.347 …", "Tengg…", kotak kosong "–" ikut makan tempat), alamat kantor
   agen 10,5px, tombol WhatsApp 30-34px, kartu Projects (developer 9,5px, lokasi 10,5px, tombol 32px), tautan footer setinggi 19px.
   Kini (<= 600px):
   - spek = SATU BARIS TEKS tenang (label abu kecil + nilai 13px, tanpa kotak), nilai kosong disembunyikan, tidak pernah terpotong;
   - baris agen cukup NAMA (kantor disembunyikan — ada di halaman detail), tombol WhatsApp 40px;
   - kartu Projects: teks 11-15px, tombol 40px; lencana 12px;
   - footer: tautan & ikon sosial setinggi 40px, hak cipta 12px; tombol Login 40px; "Lihat semua" berbantalan sentuh.
   Selektor diawali "html .wm …": aturan HP lama yang bertumpuk (.wm .wm-grid:not(.wm-geser) .wm-spek span, 0,4,1) harus kalah. */
@media (max-width: 600px) {
  html .wm .wm-grid .wm-kartu .wm-spek { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 6px; }
  html .wm .wm-grid .wm-kartu .wm-spek > span { display: inline-flex; flex-direction: row; align-items: baseline; gap: 4px; min-width: 0; padding: 0; border-radius: 0; background: none; font-size: 13px; line-height: 1.35; }
  html .wm .wm-grid .wm-kartu .wm-spek > span.kosong { display: none; }
  html .wm .wm-grid .wm-kartu .wm-spek i { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #8A8FA3; }
  html .wm .wm-grid .wm-kartu .wm-spek b { max-width: none; overflow: visible; font-size: 13px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
  html .wm .wm-grid .wm-kartu .wm-spek sup { font-size: 8.5px; }
  html .wm .wm-kartu .wm-agen-teks .user_agent_address { display: none; }
  html .wm .wm-kartu .wm-agen-teks .user_agent_name, html .wm .wm-kartu .wm-agen-teks .wm-agen-nama { font-size: 13.5px; }
  html .wm .wm-kartu .wm-agen-teks .wm-agen-kantor { font-size: 12px; }
  html .wm .wm-kartu .wm-wa { width: 40px; height: 40px; min-width: 40px; }
  /* Lencana foto (Dijual/Disewa/Hot): aturan HP lama ".wm-grid:not(.wm-geser) .wm-lencana" (0,3,0) 10px -> selektor 0,3,1. */
  html .wm .wm-kartu .wm-lencana, html .wm .wm-proyek-blok .wm-lencana { padding: 3px 9px; font-size: 12px; }
  html .wm .wm-geser > .wm-kartu .wm-kartu-harga--dua { font-size: 13px; }
  html .wm .wm-pe-dev { font-size: 11px; }
  html .wm .wm-kartu .wm-kartu-lokasi, html .wm .wm-kartu .wm-kartu-lokasi span { font-size: 12px; }
  /* Sasaran sentuh >= 40px: tab cari, chip wilayah, urutkan / ubah saringan / bagikan, salin deskripsi. */
  html .wm .wm-cari-tab button { height: 40px; }
  html .wm .wm-wilayah a { min-height: 40px; }
  html .wm .wm-urut-pilih, html .wm .wm-ringkasan-ubah, html .wm .wm-bagikan-tombol { height: 40px; min-width: 40px; }
  html .wm .wm-salin { width: 40px; height: 40px; }
  html .wm .wm-proyek-dev { font-size: 11px; }
  html .wm .wm-proyek-blok .wm-kartu-lokasi { font-size: 12px; }
  html .wm .wm-proyek-nama { font-size: 15px; }
  html .wm .wm-proyek-harga { font-size: 14px; }
  html .wm .wm-jumlah-foto { font-size: 11.5px; }
  html .wm .wm-proyek-aksi .wm-tombol { height: 40px; min-width: 40px; }
  html .wm .wm-kaki-kolom a, html .wm .wm-kaki-tautan a { display: inline-flex; align-items: center; min-height: 40px; }
  html .wm .wm-sosial a { width: 40px; height: 40px; }
  html .wm .wm-kaki-bawah { font-size: 12px; }
  html .wm .wm-bilah-kanan .tombol-login { min-height: 40px; }
  html .wm .wm-lihat { display: inline-flex; align-items: center; min-height: 40px; }
}
/* KARTU AGEN di hero halaman /<kode> (audit UX 23 Okt 2026 nomor 4): siapa pemilik link + tombol chat. */
.wm-hero-agen { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 12px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.95); box-shadow: 0 10px 28px rgba(10,14,40,.28); max-width: 100%; }
.wm-hero-agen-foto { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #EAF1FF; }
.wm-hero-agen-inisial { display: grid; place-items: center; font-weight: 800; font-size: 20px; color: var(--wm-navy); }
.wm-hero-agen-teks { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wm-hero-agen-teks small { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wm-oranye, #C24E12); }
.wm-hero-agen-teks b { font-size: 16px; color: var(--wm-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-hero-agen-teks span { font-size: 12.5px; color: #5B6178; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-hero-agen-wa { flex: none; margin-left: 6px; padding: 9px 14px; border-radius: 999px; background: #1f9d55; color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.wm-hero-agen-wa:hover { background: #188547; color: #fff; }
/* Warna tautan situs (a { color }) sempat menimpa teks tombol jadi biru gelap di atas hijau — selektor dipertegas. */
.wm-hero .wm-hero-agen a.wm-hero-agen-wa, .wm-hero .wm-hero-agen a.wm-hero-agen-wa:visited { color: #FFFFFF; }
@media (max-width: 720px) { .wm-hero-agen { margin-top: 12px; gap: 10px; padding: 8px 10px 8px 8px; } .wm-hero-agen-foto { width: 40px; height: 40px; } .wm-hero-agen-teks b { font-size: 14.5px; } .wm-hero-agen-wa { padding: 8px 12px; font-size: 13px; } }
/* HERO HP LEBIH RINGKAS (audit UX 23 Okt 2026 nomor 5: foto memakan +-60% layar pertama, kotak cari baru terlihat di bawah): judul & kalimat
   tetap, fotonya dipendekkan supaya kotak cari & pilihan jenis terlihat tanpa menggulir; halaman /<kode> memberi ruang kartu agen.
   + TANDA GESER pilihan jenis (nomor 12: "Apa…" terpotong tanpa isyarat): tepi kanan memudar. */
@media (max-width: 720px) {
  .wm-beranda .wm-hero { height: 330px; }
  .wm-beranda .wm-hero:has(.wm-hero-agen) { height: 410px; }
  .wm-beranda .wm-cari { margin-top: -96px; }
  .wm-cari-jenis { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 40px; }
}
/* ANGKA halaman Tentang (audit UX 23 Okt 2026 nomor 14). */
.wm-tentang-angka { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0 22px; }
.wm-tentang-angka > div { padding: 16px 18px; border-radius: 16px; background: #FFF4EC; border: 1px solid #F6D9C4; }
.wm-tentang-angka b { display: block; font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--wm-navy); font-variant-numeric: tabular-nums; }
.wm-tentang-angka span { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 600; color: #6A5A50; }

/* ── TABLET (601-900px, pemilik 23 Okt 2026: "kalau di tablet 10inch, kok tampilannya ga menyesuaikan ?"). Tablet 10" TEGAK = 768-834px
   CSS, dulu jatuh ke aturan HP (<= 900px) apa adanya: kartu baris beranda 82% = SATU kartu 626px selebar layar, keunggulan bertumpuk satu
   kolom, kotak cari bertumpuk seperti HP. Kini: baris geser menampilkan DUA kartu + kartu ketiga mengintip (Proyek Baru tiga), keunggulan
   tiga kolom ringkas, kotak cari bersusunan layar lebar. Sengaja di UJUNG berkas: menang atas aturan <= 900px yang sama spesifisitasnya.
   HP (<= 600px) & layar lebar (>= 901px) tidak berubah. Tablet MENDATAR (1024-1280px) sudah memakai aturan layar lebar. */
@media (min-width: 600.01px) and (max-width: 900px) {
  .wm-geser > .wm-kartu { flex: 0 0 calc((100% - 24px) / 2.25); }
  .wm-geser > .wm-proyek-kartu, .wm-beranda .wm-geser > .wm-proyek-kartu { flex: 0 0 calc((100% - 24px) / 3.2); }
  .wm-unggul, .wm-beranda .wm-unggul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .wm-unggul li { flex-direction: column; gap: 8px; padding: 14px; }
  .wm-unggul b { font-size: 15px; }
  .wm-unggul span:not(.wm-unggul-ikon) { font-size: 13px; line-height: 1.5; }
  .wm-hero h1, .wm-beranda .wm-hero h1 { font-size: 40px; }
  .wm-hero-sub { font-size: 16px; }
  .wm-cari form { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tab ai" "kolom kirim" "jenis jenis"; gap: 12px; padding: 16px 18px 18px; }
  .wm-cari-tab { justify-self: start; display: inline-flex; }
  .wm-cari-tab button { padding: 0 18px; }
  .wm-cari-kirim { width: auto; height: 52px; padding: 0 26px; }
  .wm-cari-ai { justify-self: end; }
  .wm-cari-jenis { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .wm-wilayah { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Kartu sempit: tombol WhatsApp jadi ikon (aturan kembar layar lebar, blok ">= 901px" di atas). */
  .wm-kartu { container-type: inline-size; }
  @container (max-width: 330px) {
    .wm-wa { width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; font-size: 0; border-radius: 12px; }
    .wm-wa svg { width: 20px; height: 20px; }
  }
}
/* Tablet 10" tegak (768-834px): halaman cari & daftar TIGA kolom seperti laptop kecil (24 per halaman habis dibagi 3); 601-759 tetap dua. */
@media (min-width: 760px) and (max-width: 900px) {
  .wm-grid:not(.wm-geser) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── BERANDA HP RAPI (pemilik 23 Okt 2026 malam, potret HP 412px: "jelek banget UXnya di hp, bereskan semua ya"). Terukur sebelum
   (412 x 860): kartu listing pertama baru mulai di y=729 (layar pertama habis untuk spanduk 330px + kotak cari 283px), tombol Cari & "Atau
   cari lewat chat AI" bertumpuk dua baris, keunggulan patah dua baris tidak sejajar, "Lihat semua" melayang di tengah dua baris judul,
   pilihan jenis terpotong tanpa tanda geser, maskot "Tanya AI" 56px menutupi kartu, dan di 360px halaman bergeser ke samping 16px (bilah
   atas 376px). Kini (<= 600px):
   - spanduk 220px: foto memenuhi spanduk, judul + SATU baris (kalimat kedua disembunyikan, isinya ada di baris keunggulan);
   - kotak cari menumpang 40px saja; tombol Cari & "Chat AI" SEBARIS;
   - pilihan jenis memanjang sampai tepi kartu + memudar + snap (jelas bisa digeser);
   - keunggulan = satu baris teks kecil bertitik di tengah;
   - kepala bagian: "Lihat semua" sejajar garis bawah judul;
   - bilah atas muat di 360px; maskot lebih kecil (winny.css).
   Selektor "html .wm-beranda …" supaya menang atas blok HP bertumpuk di atas (0,2,0 – 0,3,1). Layar > 600px tidak berubah, kecuali
   label pendek tombol AI yang memang disembunyikan di semua lebar. */
.wm-cari-ai-pendek { display: none; }
@media (max-width: 600px) {
  html .wm-beranda .wm-hero, html .wm-beranda .wm-hero:has(.wm-hero-agen) { height: auto; min-height: 220px; display: block; }
  html .wm-beranda .wm-hero::after { display: none; }
  html .wm-beranda .wm-hero > img { inset: 0; height: 100%; object-position: 62% 38%; -webkit-mask-image: none; mask-image: none; }
  html .wm-beranda .wm-hero-isi { padding-top: 18px; padding-bottom: 64px; min-height: 220px; box-sizing: border-box;
    background: linear-gradient(180deg, rgba(var(--wm-coklat), .86) 0%, rgba(var(--wm-coklat), .62) 42%, rgba(var(--wm-coklat), .12) 78%, rgba(var(--wm-coklat), 0) 100%); }
  html .wm-beranda .wm-hero h1 { font-size: 22px; line-height: 1.2; }
  html .wm-beranda .wm-hero-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.45; }
  html .wm-beranda .wm-hero-sub-lanjut { display: none; }
  html .wm-beranda .wm-cari { margin-top: -40px; }
  html .wm-beranda .wm-cari form { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tab tab" "kolom kolom" "jenis jenis" "kirim ai"; gap: 10px 8px; padding: 12px; }
  html .wm-beranda .wm-cari-tab button { height: 38px; }
  html .wm-beranda .wm-cari-kirim { width: 100%; height: 46px; }
  html .wm-beranda .wm-cari-ai { justify-self: stretch; align-self: stretch; min-height: 46px; padding: 0 14px 0 6px; gap: 6px; border-radius: 14px; font-size: 14px; }
  html .wm-beranda .wm-cari-ai img { width: 32px; height: 32px; }
  html .wm-beranda .wm-cari-ai-panjang { display: none; }
  html .wm-beranda .wm-cari-ai-pendek { display: inline; white-space: nowrap; }
  html .wm-beranda .wm-cari-jenis { margin: 0 -12px; padding: 0 40px 0 12px; scroll-snap-type: x proximity; scroll-padding-inline: 12px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent); }
  html .wm-beranda .wm-cari-jenis .wm-pil { scroll-snap-align: start; height: 36px; }
  html .wm-beranda .wm-unggul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 0; margin-top: 12px; }
  html .wm-beranda .wm-unggul li { display: inline-flex; align-items: center; gap: 0; padding: 0; background: none; border: 0; }
  html .wm-beranda .wm-unggul li + li::before { content: ""; width: 3px; height: 3px; margin: 0 8px; border-radius: 50%; background: #C9A88F; }
  html .wm-beranda .wm-unggul-ikon { display: none; }
  html .wm-beranda .wm-unggul b { font-size: 12px; font-weight: 600; line-height: 1.4; color: #6A5A50; white-space: nowrap; }
  html .wm-beranda .wm-bagian-kepala { align-items: flex-end; }
  html .wm-beranda .wm-bagian-kepala h2 { margin-bottom: 0; }
  html .wm-beranda .wm-lihat { align-items: flex-end; padding-bottom: 3px; }
  /* Cari per wilayah (dua baris geser): tanda geser yang sama dengan pilihan jenis. */
  html .wm-beranda .wm-wilayah { padding-right: 40px; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent); }
}
/* Bilah atas di HP sempit: logo + "Masuk Agen" + cari + menu dulu 376px di layar 360 (halaman bergeser ke samping). */
@media (max-width: 400px) {
  html .wm .wm-bilah-isi { gap: 8px; }
  html .wm .wm-bilah-kanan { gap: 6px; }
  html .wm .wm-bilah-kanan > .d-flex { margin-left: 0 !important; gap: 6px !important; }
  html .wm .wm-bilah-kanan .tombol-login { margin-right: 0; padding: 8px 10px; font-size: 13px; }
  html .wm .wm-bilah-kanan .wm-tombol-ikon { width: 40px; height: 40px; }
  html .wm .wm-logo img { height: 26px; }
}
/* Keunggulan tetap SATU baris di 360px (12px patah ke baris kedua dengan titik di depan, terukur). */
@media (max-width: 380px) {
  html .wm-beranda .wm-unggul b { font-size: 11px; }
  html .wm-beranda .wm-unggul li + li::before { margin: 0 6px; }
}

/* ── KARTU BARIS GESER HP 1,5 PER LAYAR (pemilik 23 Okt 2026 malam: "kartu listing apa ga kekecilan ?", dipilih "1,5 kartu"). Baris geser
   beranda (Hot Listing, Listing terbaru) & Rekomendasi AI: ~~46% = dua kartu per layar, judul 12px, harga 14,5px, foto ±175px~~ -> 64%,
   kartu kedua mengintip separuh (tanda bisa digeser). DIKALAHKAN: satu kartu besar 82%; dua kartu dengan teks dinaikkan. Daftar baris
   (cari, listing agen) TIDAK tersentuh. */
@media (max-width: 600px) {
  html .wm .wm-geser > .wm-kartu { flex: 0 0 64%; }
  html .wm .wm-geser > .wm-kartu .wm-kartu-isi { padding: 10px 12px 4px; gap: 3px; }
  html .wm .wm-geser > .wm-kartu .wm-kartu-harga { font-size: 17px; height: 24px; line-height: 24px; }
  html .wm .wm-geser > .wm-kartu .wm-kartu-harga--dua { font-size: 14px; }
  html .wm .wm-geser > .wm-kartu .wm-kartu-judul { font-size: 14px; line-height: 1.35; }
  html .wm .wm-geser > .wm-kartu .wm-kartu-lokasi, html .wm .wm-geser > .wm-kartu .wm-kartu-lokasi span { font-size: 12.5px; }
  html .wm .wm-geser > .wm-kartu .wm-kartu-lokasi svg { width: 13px; height: 13px; }
  html .wm .wm-geser > .wm-kartu .wm-kartu-agen { padding: 8px 12px 10px; gap: 8px; }
  html .wm .wm-geser > .wm-kartu .wm-kartu-agen .wm-avatar { width: 26px; height: 26px; }
}

/* ── SISA TEPI SIMETRIS TERHADAP JENDELA (pemilik 23 Okt 2026 malam, potret layar lebar: "kenapa sisa putih2 di kiri dan kanan berbeda ?",
   lalu "ya pasang"). Terukur: sisa kiri = kanan = 28px dari tepi AREA HALAMAN; yang berbeda bilah gulir Windows 15px yang cuma ada di
   kanan. ~~html { scrollbar-gutter: stable both-edges }~~ sudah pernah DICABUT 22 Okt (memotong latar header & footer, lihat di atas) —
   kini ISINYA yang digeser setengah lebar bilah gulir ke kanan: kiri 28 + sb/2, kanan 28 - sb/2 (+ bilah gulir sb) = sama dari tepi
   JENDELA; latar header & footer tetap penuh. sb = 100vw - 100% (100% = lebar area halaman; nol untuk bilah gulir mengambang). HANYA
   > 900px (tepi 28px); tablet & HP tetap 16px. */
@media (min-width: 900.01px) {
  .wm-wadah { padding-left: calc(28px + (100vw - 100%) / 2); padding-right: calc(28px - (100vw - 100%) / 2); }
  .wm-beranda .wm-hero { margin-left: calc(28px + (100vw - 100%) / 2); margin-right: 0; }
}

/* ── JOIN US JADI CERITA (pemilik 23 Okt 2026 malam: "kita bereskan halaman ini, buat orang benar2 baca dengan menarik yaa"). Urutan
   pertanyaan calon agen: cocok untuk siapa -> dapat apa -> caranya -> bukti -> belajar -> hadiah -> mentor -> kantor -> ajakan. Daftar isi
   lompat di bawah spanduk; bagian "Bukti nyata" berlatar krem supaya ritme halaman tidak datar. ~~Kartu keunggulan menumpang spanduk~~
   (isinya kini di "Yang kamu dapat"). */
.wm-gb-centang { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.88); }
.wm-gb-centang li { display: inline-flex; align-items: center; gap: 7px; }
.wm-gb-centang li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--wm-oranye-muda) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310163C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.wm-gb-isi { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--wm-garis); backdrop-filter: blur(6px); }
.wm-gb-isi .wm-wadah { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; }
.wm-gb-isi .wm-wadah::-webkit-scrollbar { display: none; }
.wm-gb-isi a { flex: none; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--wm-navy); text-decoration: none; background: var(--wm-biru-lembut); }
.wm-gb-isi a:hover { background: #FDEDE2; color: var(--wm-oranye); }
.wm-gabung-hal .wm-bagian { scroll-margin-top: 84px; }
.wm-gb-siapa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.wm-gb-siapa-daftar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wm-gb-siapa-daftar li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; background: #FFF8F2; border: 1px solid #F5E4D6; font-size: 16px; font-weight: 700; color: var(--wm-navy); }
.wm-gb-siapa-daftar svg { width: 22px; height: 22px; flex: none; padding: 4px; border-radius: 50%; background: var(--wm-oranye); color: #FFFFFF; stroke-width: 3; }
.wm-gb-dapat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.wm-gb-dapat article { padding: 24px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--wm-garis); box-shadow: 0 10px 26px rgba(16,22,60,.06); }
.wm-gb-ikon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #FDEDE2; color: var(--wm-oranye); }
.wm-gb-ikon svg { width: 24px; height: 24px; }
.wm-gb-dapat h3 { margin: 16px 0 0; font-size: 18px; color: var(--wm-navy); }
.wm-gb-dapat p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: #3A4060; }
.wm-gb-cara { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; padding: 40px; border-radius: 24px;
  background: linear-gradient(135deg, var(--wm-navy-gelap), var(--wm-navy)); color: #FFFFFF; }
.wm-gb-cara .wm-bagian-kecil { color: var(--wm-oranye-muda); }
.wm-gb-cara .wm-gabung-h2 { color: #FFFFFF; }
.wm-gb-cara .wm-tombol { margin-top: 22px; }
.wm-gb-langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wm-gb-langkah li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.wm-gb-langkah span { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--wm-oranye); font-size: 18px; font-weight: 800; }
.wm-gb-langkah b { display: block; font-size: 17px; }
.wm-gb-langkah p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.8); }
.wm-gb-pita { margin-top: 64px; padding: 56px 0; background: #FFF8F2; border-top: 1px solid #F5E4D6; border-bottom: 1px solid #F5E4D6; scroll-margin-top: 84px; }
.wm-gb-kutip { margin: 22px 0 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--wm-oranye); font-size: 18px; line-height: 1.55; font-weight: 600; font-style: italic; color: var(--wm-navy); }
.wm-gb-sub { margin: 48px 0 0; font-size: 22px; color: var(--wm-navy); }
.wm-gb-ajak { background: linear-gradient(135deg, var(--wm-navy-gelap), var(--wm-navy) 60%, var(--wm-biru)); color: #FFFFFF; padding: 56px 32px; }
.wm-gb-ajak h2 { color: #FFFFFF; font-size: 32px; }
.wm-gb-ajak p { color: rgba(255,255,255,.82); }
.wm-gb-ajak .wm-gabung-kecil { color: var(--wm-oranye-muda); }
/* WINMAX AI DI JOIN US (pemilik 23 Okt 2026 malam: "ambil banyak informasi dari fitur2 AI yang kita bikin"): pita gelap selebar layar,
   kiri judul + ilustrasi HP (chat bot -> listing tersimpan -> kartu WinMatch, contoh fiktif), kanan 8 fitur. */
.wm-gb-ai { margin-top: 64px; padding: 64px 0; background: radial-gradient(circle at 15% 0%, rgba(240,96,31,.22), transparent 45%), linear-gradient(135deg, var(--wm-navy-gelap), var(--wm-navy) 65%, var(--wm-biru)); color: #FFFFFF; scroll-margin-top: 84px; }
.wm-gb-ai + .wm-gb-pita { margin-top: 0; border-top: 0; }
.wm-gb-ai-isi { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.wm-gb-ai .wm-bagian-kecil { color: var(--wm-oranye-muda); }
.wm-gb-ai .wm-gabung-h2 { color: #FFFFFF; font-size: 34px; }
.wm-gb-ai .wm-gabung-teks { color: rgba(255,255,255,.82); }
.wm-gb-hp { max-width: 360px; margin-top: 28px; padding: 16px; border-radius: 28px; background: #F4F1EC; border: 8px solid #0B0F2B; box-shadow: 0 24px 60px rgba(0,0,0,.35); color: #1E2333; }
.wm-gb-hp-kepala { display: flex; align-items: center; gap: 10px; margin: -4px -4px 12px; padding-bottom: 10px; border-bottom: 1px solid #E2DCD3; font-size: 14px; }
.wm-gb-hp-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--wm-oranye); color: #FFFFFF; font-weight: 800; }
.wm-gb-gel { max-width: 85%; margin: 0 0 10px; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: #FFFFFF; font-size: 13.5px; line-height: 1.5; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.wm-gb-gel--saya { margin-left: auto; border-radius: 14px 4px 14px 14px; background: #DCF8C6; }
.wm-gb-cocok { display: grid; gap: 2px; margin-top: 4px; padding: 12px 14px; border-radius: 14px; background: #FFFFFF; border: 1px solid #F5E4D6; font-size: 13px; }
.wm-gb-cocok span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wm-oranye); }
.wm-gb-cocok b { font-size: 15px; color: var(--wm-navy); }
.wm-gb-cocok small { font-size: 12.5px; line-height: 1.45; color: var(--wm-redup); }
.wm-gb-cocok em { justify-self: start; margin-top: 8px; padding: 6px 16px; border-radius: 999px; background: #25D366; color: #FFFFFF; font-style: normal; font-weight: 700; }
.wm-gb-ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wm-gb-ai-grid article { display: flex; gap: 14px; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.wm-gb-ai-grid .wm-gb-ikon { flex: none; background: rgba(247,162,107,.16); color: var(--wm-oranye-muda); }
.wm-gb-ai-grid h3 { margin: 2px 0 0; font-size: 16.5px; color: #FFFFFF; }
.wm-gb-ai-grid p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.78); }
@media (max-width: 1100px) { .wm-gb-ai-isi { grid-template-columns: minmax(0, 1fr); gap: 32px; } .wm-gb-hp { max-width: 420px; } }
@media (max-width: 900px) { .wm-gb-ai { margin-top: 40px; padding: 40px 0; } .wm-gb-ai .wm-gabung-h2 { font-size: 24px; } }
@media (max-width: 600px) {
  .wm-gb-ai-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wm-gb-ai-grid article { padding: 14px; gap: 12px; }
  .wm-gb-ai-grid .wm-gb-ikon { width: 40px; height: 40px; }
  .wm-gb-ai-grid h3 { font-size: 15.5px; }
  .wm-gb-ai-grid p { font-size: 13.5px; }
  .wm-gb-hp { margin-top: 22px; border-width: 6px; }
}
@media (max-width: 1100px) { .wm-gb-dapat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .wm-gb-siapa, .wm-gb-cara { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .wm-gb-cara { padding: 26px 18px; border-radius: 20px; }
  .wm-gb-pita { margin-top: 40px; padding: 36px 0; }
  .wm-gb-sub { margin-top: 32px; font-size: 19px; }
}
@media (max-width: 600px) {
  .wm-gb-centang { gap: 6px 14px; font-size: 13px; }
  /* HP: ~~daftar isi TIDAK menempel (bilah Daftar di bawah + daftar isi di atas = ruang baca habis)~~ — DIRALAT 24 Okt 2026 (pemilik,
     potret HP: "kok di hp bagian atas itu hilang, kalau di pc kan ke lock"): daftar isi MENEMPEL di atas seperti di PC, dibuat RAMPING
     (padding 6 px, tab 30 px) supaya ruang baca tetap lega. Tombol spanduk ditumpuk selebar layar ("Tanya lewat WhatsApp" sempat patah). */
  .wm-gb-isi { position: sticky; top: 0; }
  .wm-gb-isi .wm-wadah { padding-top: 6px; padding-bottom: 6px; }
  .wm-gabung-hero .wm-gabung-aksi .wm-tombol { flex: 1 1 100%; }
  .wm-gb-isi a { padding: 6px 12px; font-size: 13px; }
  .wm-gb-siapa-daftar { gap: 8px; }
  .wm-gb-siapa-daftar li { padding: 12px 12px; font-size: 14px; gap: 8px; }
  .wm-gb-dapat { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wm-gb-dapat article { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  .wm-gb-dapat .wm-gb-ikon { grid-row: 1 / 3; width: 44px; height: 44px; }
  .wm-gb-dapat h3 { margin: 0; font-size: 16px; }
  .wm-gb-dapat p { font-size: 14px; }
  .wm-gb-langkah li { padding: 14px; gap: 12px; }
  .wm-gb-langkah span { width: 34px; height: 34px; font-size: 16px; }
  .wm-gb-langkah b { font-size: 15.5px; }
  .wm-gb-langkah p { font-size: 13.5px; }
  .wm-gb-kutip { font-size: 16px; }
  .wm-gb-ajak { padding: 36px 18px; }
  .wm-gb-ajak h2 { font-size: 23px; }
}

/* ── JOIN US INTERAKTIF (pemilik 23 Okt 2026 malam: "aku mau halamannya interaktif, ga boleh bosenin"): pilihan "Kamu yang mana?", demo
   WinMax AI per fitur (layar HP berganti + animasi), muncul saat digulir, daftar isi menyala. Gerak mati untuk prefers-reduced-motion. */
.wm-gb-isi a.wm-gb-isi-aktif { background: var(--wm-oranye); color: #FFFFFF; }
.wm-gb-siapa-tanya { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wm-oranye); }
.wm-gb-siapa-daftar li { padding: 0; background: none; border: 0; }
.wm-gb-siapa-daftar button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; border-radius: 14px; background: #FFF8F2; border: 1.5px solid #F5E4D6;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--wm-navy); text-align: left; cursor: pointer; transition: transform .15s, border-color .15s, background .15s, box-shadow .15s; }
.wm-gb-siapa-daftar button:hover { transform: translateY(-2px); border-color: var(--wm-oranye-muda); box-shadow: 0 8px 18px rgba(194,78,18,.12); }
.wm-gb-siapa-daftar button svg { width: 22px; height: 22px; flex: none; padding: 4px; border-radius: 50%; background: #F5E4D6; color: #FFFFFF; stroke-width: 3; transition: background .15s; }
.wm-gb-siapa-daftar button[aria-pressed="true"] { background: var(--wm-navy); border-color: var(--wm-navy); color: #FFFFFF; }
.wm-gb-siapa-daftar button[aria-pressed="true"] svg { background: var(--wm-oranye); }
.wm-gb-siapa-hasil { margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: var(--wm-biru-lembut); }
.wm-gb-siapa-hasil[hidden] { display: none; }
.wm-gb-siapa-hasil p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--wm-navy); }
.wm-gb-baru { animation: wm-gb-naik .35s ease both; }
/* Demo WinMax AI: kepala (kiri atas), HP (kiri bawah), fitur (kanan); layar <= 1100px bertumpuk: kepala, fitur geser, HP. */
.wm-gb-ai-isi { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-areas: "kepala fitur" "demo fitur"; row-gap: 8px; }
.wm-gb-ai-kepala { grid-area: kepala; }
.wm-gb-ai-demo { grid-area: demo; }
.wm-gb-ai-grid { grid-area: fitur; align-self: start; }
.wm-gb-ai-coba { margin: 14px 0 0; font-size: 14px; font-weight: 700; color: var(--wm-oranye-muda); }
.wm-gb-hp { min-height: 380px; margin-top: 16px; }
.wm-gb-layar[hidden] { display: none; }
.wm-gb-ai-ket { display: none; }
.wm-gb-fitur { display: flex; gap: 14px; width: 100%; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12);
  font: inherit; color: #FFFFFF; text-align: left; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.wm-gb-fitur:hover { background: rgba(255,255,255,.11); transform: translateY(-2px); }
.wm-gb-fitur[aria-selected="true"] { background: rgba(240,96,31,.16); border-color: var(--wm-oranye-muda); }
.wm-gb-fitur .wm-gb-ikon { flex: none; background: rgba(247,162,107,.16); color: var(--wm-oranye-muda); }
.wm-gb-fitur[aria-selected="true"] .wm-gb-ikon { background: var(--wm-oranye); color: #FFFFFF; }
.wm-gb-fitur-teks b { display: block; margin-top: 2px; font-size: 16px; }
.wm-gb-fitur-teks small { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.76); }
/* Isi layar contoh */
.wm-gb-main .wm-gb-anim { animation: wm-gb-naik .45s ease both; animation-delay: calc(var(--i) * 700ms + 150ms); }
.wm-gb-main .wm-gb-ketik { animation: wm-gb-ketik 1.4s ease .85s both; }
.wm-gb-ketik { display: inline-flex; gap: 4px; padding: 12px 14px; }
.wm-gb-ketik i { width: 7px; height: 7px; border-radius: 50%; background: #A3A9BF; animation: wm-gb-titik 1s infinite; }
.wm-gb-ketik i:nth-child(2) { animation-delay: .15s; }
.wm-gb-ketik i:nth-child(3) { animation-delay: .3s; }
.wm-gb-notif { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--wm-navy); color: #FFFFFF; font-size: 13px; }
.wm-gb-notif b { color: var(--wm-oranye-muda); margin-right: 6px; }
.wm-gb-cocok { margin: 0 0 10px; }
.wm-gb-mini { display: grid; gap: 2px; margin: 0 0 10px; padding: 10px; border-radius: 14px; background: #FFFFFF; font-size: 13px; }
.wm-gb-mini b { font-size: 15px; color: var(--wm-navy); }
.wm-gb-mini small { color: var(--wm-redup); }
.wm-gb-mini em { justify-self: start; margin-top: 6px; padding: 5px 12px; border-radius: 999px; background: #25D366; color: #FFFFFF; font-style: normal; font-weight: 700; font-size: 12.5px; }
.wm-gb-foto { display: block; height: 92px; margin-bottom: 6px; border-radius: 10px; background: linear-gradient(135deg, #F7A26B, #C24E12 55%, #18225C); }
.wm-gb-foto--2 { background: linear-gradient(135deg, #8EA3D9, #2B3A8C 60%, #10163C); }
.wm-gb-tombol3 { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.wm-gb-tombol3 span { padding: 7px 12px; border-radius: 999px; background: #FFFFFF; border: 1px solid #E2DCD3; font-size: 12.5px; font-weight: 700; color: var(--wm-navy); }
.wm-gb-tombol3 .hijau { background: #25D366; border-color: #25D366; color: #FFFFFF; }
.wm-gb-flyer { display: grid; gap: 2px; margin: 0 0 10px; padding: 18px; border-radius: 14px; color: #FFFFFF; background: radial-gradient(circle at 85% 10%, rgba(240,96,31,.55), transparent 50%), linear-gradient(160deg, #18225C, #10163C); }
.wm-gb-flyer span { justify-self: start; padding: 3px 10px; border-radius: 6px; background: var(--wm-oranye); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.wm-gb-flyer b { margin-top: 8px; font-size: 20px; }
.wm-gb-flyer small { color: rgba(255,255,255,.75); }
.wm-gb-flyer strong { margin-top: 8px; font-size: 19px; color: var(--wm-oranye-muda); }
.wm-gb-flyer em { margin-top: 10px; font-style: normal; font-size: 12px; color: rgba(255,255,255,.7); }
.wm-gb-status { list-style: none; margin: 0; padding: 12px 14px; border-radius: 14px; background: #FFFFFF; display: grid; gap: 12px; }
.wm-gb-status li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--wm-navy); }
.wm-gb-status li::before { content: ''; width: 20px; height: 20px; border-radius: 50%; flex: none; background: #E2DCD3; }
.wm-gb-main .wm-gb-status li::before { animation: wm-gb-centang .3s ease both; }
.wm-gb-main .wm-gb-status li:nth-child(1)::before { animation-delay: 1.1s; }
.wm-gb-main .wm-gb-status li:nth-child(2)::before { animation-delay: 1.8s; }
.wm-gb-main .wm-gb-status li:nth-child(3)::before { animation-delay: 2.5s; }
.wm-gb-dok { list-style: none; margin: 0 0 10px; padding: 6px 0; border-radius: 14px; background: #FFFFFF; }
.wm-gb-dok li { padding: 10px 14px; font-size: 13.5px; font-weight: 700; color: var(--wm-navy); border-bottom: 1px solid #F1ECE5; }
.wm-gb-dok li:last-child { border-bottom: 0; }
.wm-gb-dok li::before { content: 'PDF'; display: inline-block; margin-right: 10px; padding: 2px 6px; border-radius: 5px; background: #FDEDE2; color: var(--wm-oranye); font-size: 10.5px; font-weight: 800; }
/* Muncul saat digulir (kelas dipasang skrip; tanpa skrip semua tampil). */
.wm-gb-js .wm-gb-muncul { opacity: 0; transform: translateY(26px); transition: opacity .55s ease, transform .55s ease; transition-delay: var(--d, 0ms); }
.wm-gb-js .wm-gb-muncul.wm-gb-tampak { opacity: 1; transform: none; }
.wm-gb-dapat article, .wm-gabung-kartu, .wm-gabung-mentor img { transition: transform .2s ease, box-shadow .2s ease; }
.wm-gb-dapat article:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(16,22,60,.1); }
.wm-gabung-mentor img:hover { transform: translateY(-4px) scale(1.02); }
@keyframes wm-gb-naik { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wm-gb-ketik { 0% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; } 10%, 85% { opacity: 1; max-height: 40px; } 100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; } }
@keyframes wm-gb-titik { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes wm-gb-centang { to { background: #25D366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; } }
@media (max-width: 1100px) {
  .wm-gb-ai-isi { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kepala" "fitur" "demo"; }
  .wm-gb-ai-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 4px 16px 8px; scrollbar-width: none; }
  .wm-gb-ai-grid::-webkit-scrollbar { display: none; }
  .wm-gb-fitur { flex: 0 0 auto; width: auto; max-width: 78%; align-items: center; padding: 10px 14px; scroll-snap-align: start; }
  .wm-gb-fitur .wm-gb-ikon { width: 36px; height: 36px; border-radius: 10px; }
  .wm-gb-fitur .wm-gb-ikon svg { width: 18px; height: 18px; }
  .wm-gb-fitur-teks b { margin: 0; font-size: 14px; white-space: nowrap; }
  .wm-gb-fitur-teks small { display: none; }
  .wm-gb-hp { margin: 8px auto 0; }
  .wm-gb-ai-ket { display: block; max-width: 420px; margin: 14px auto 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.82); }
  .wm-gb-ai-ket b { display: block; margin-bottom: 2px; color: #FFFFFF; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-gb-main .wm-gb-anim, .wm-gb-main .wm-gb-ketik, .wm-gb-baru, .wm-gb-ketik i { animation: none !important; }
  .wm-gb-ketik { display: none; }
  .wm-gb-status li::before { background: #25D366; }
  .wm-gb-siapa-daftar button, .wm-gb-fitur, .wm-gb-dapat article, .wm-gabung-mentor img { transition: none; }
}

/* ── JOIN US ORANYE (pemilik 23 Okt 2026 malam: "pakai warna orange aja, birunya bosenin"). ⚠️ DITIMPA blok "JOIN US ORANYE ELEGAN" di bawah ("orangenya norak"). HANYA halaman Join Us (.wm-gabung-hal):
   ~~latar navy/biru~~ (spanduk, pita WinMax AI, Cara bergabung, ajakan, isi layar HP, kotak & pil lembut) -> keluarga oranye dari logo
   (--wm-oranye #C24E12 lolos kontras 4,5:1 dengan teks putih; gelap = coklat-oranye #5A240B/#2A1209). Tombol Daftar di atas latar
   oranye jadi PUTIH berhuruf oranye (oranye di atas oranye tenggelam). Teks judul tetap gelap, seperti beranda hangat. */
.wm-gabung-hal { --gb-gelap: #2A1209; --gb-coklat: #5A240B; --gb-tua: #8A3209; --gb-lembut: #FDEDE2; --gb-garis: #F5E4D6; }
.wm-gabung-hal .wm-gabung-hero { background: radial-gradient(circle at 88% 12%, rgba(255,214,186,.28), transparent 42%), linear-gradient(135deg, var(--gb-tua), var(--wm-oranye) 55%, #D9601C); }
.wm-gabung-hal .wm-gabung-hero .wm-gabung-kecil, .wm-gabung-hal .wm-gb-ai .wm-bagian-kecil, .wm-gabung-hal .wm-gb-cara .wm-bagian-kecil, .wm-gabung-hal .wm-gb-ajak .wm-gabung-kecil { color: #FFE2CC; }
.wm-gabung-hal .wm-gabung-sub { color: rgba(255,255,255,.9); }
.wm-gabung-hal .wm-gb-centang { color: #FFFFFF; }
.wm-gabung-hal .wm-gb-centang li::before { background-color: #FFFFFF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C24E12' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.wm-gabung-hal .wm-gabung-hero a.wm-tombol--utama, .wm-gabung-hal .wm-gb-cara a.wm-tombol--utama, .wm-gabung-hal .wm-gb-ajak a.wm-tombol--utama { background: #FFFFFF; color: var(--wm-oranye); box-shadow: 0 10px 24px rgba(42,18,9,.25); }
.wm-gabung-hal a.wm-gabung-tombol-wa { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55); }
.wm-gabung-hal .wm-gabung-video { background: var(--gb-gelap); }
.wm-gabung-hal .wm-gabung-video::after { background: linear-gradient(transparent 45%, rgba(42,18,9,.88)); }
/* daftar isi & pilihan */
.wm-gabung-hal .wm-gb-isi a { background: var(--gb-lembut); color: var(--gb-tua); }
.wm-gabung-hal .wm-gb-isi a:hover { background: #FAD9C2; }
.wm-gabung-hal .wm-gb-isi a.wm-gb-isi-aktif { background: var(--wm-oranye); color: #FFFFFF; }
.wm-gabung-hal .wm-gb-siapa-daftar button[aria-pressed="true"] { background: var(--wm-oranye); border-color: var(--wm-oranye); }
.wm-gabung-hal .wm-gb-siapa-daftar button[aria-pressed="true"] svg { background: #FFFFFF; color: var(--wm-oranye); }
.wm-gabung-hal .wm-gb-siapa-hasil { background: var(--gb-lembut); border: 1px solid var(--gb-garis); }
/* pita WinMax AI: coklat-oranye gelap ber-cahaya oranye */
.wm-gabung-hal .wm-gb-ai { background: radial-gradient(circle at 12% 0%, rgba(240,96,31,.45), transparent 48%), radial-gradient(circle at 95% 100%, rgba(240,96,31,.3), transparent 45%), linear-gradient(135deg, var(--gb-gelap), var(--gb-coklat) 60%, var(--gb-tua)); }
.wm-gabung-hal .wm-gb-ai-coba { color: #FFC9A3; }
.wm-gabung-hal .wm-gb-hp { border-color: #1A0B05; }
.wm-gabung-hal .wm-gb-notif { background: var(--gb-tua); }
.wm-gabung-hal .wm-gb-notif b { color: #FFE2CC; }
.wm-gabung-hal .wm-gb-flyer { background: radial-gradient(circle at 85% 10%, rgba(255,214,186,.45), transparent 50%), linear-gradient(160deg, var(--wm-oranye), var(--gb-coklat)); }
.wm-gabung-hal .wm-gb-flyer span { background: #FFFFFF; color: var(--wm-oranye); }
.wm-gabung-hal .wm-gb-flyer strong { color: #FFE2CC; }
.wm-gabung-hal .wm-gb-foto { background: linear-gradient(135deg, #FFC9A3, #E0671F 55%, var(--gb-coklat)); }
.wm-gabung-hal .wm-gb-foto--2 { background: linear-gradient(135deg, #F7A26B, var(--gb-tua) 60%, var(--gb-gelap)); }
/* Cara bergabung & ajakan: kartu oranye */
.wm-gabung-hal .wm-gb-cara, .wm-gabung-hal .wm-gb-ajak { background: radial-gradient(circle at 90% 0%, rgba(255,214,186,.3), transparent 45%), linear-gradient(135deg, var(--wm-oranye), var(--gb-tua)); }
.wm-gabung-hal .wm-gb-langkah li { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.wm-gabung-hal .wm-gb-langkah span { background: #FFFFFF; color: var(--wm-oranye); }
.wm-gabung-hal .wm-gb-langkah p, .wm-gabung-hal .wm-gb-ajak p { color: rgba(255,255,255,.9); }
/* tombol & aksen lain yang masih navy */
.wm-gabung-hal a.wm-tombol--navy { background: var(--wm-oranye); }
.wm-gabung-hal .wm-gabung-mentor img { background: var(--gb-gelap); }

/* ── JOIN US: AJAKAN = WHATSAPP & PREVIEW VIDEO MENTORING (pemilik 23 Okt 2026 malam: "tombol daftar skrg ke form hapus aja", "video
   mentoring jg kamu bisa kasih preview"). Tombol WhatsApp berikon; kurikulum: tab tingkat + daftar judul bergembok (10 pertama, sisanya
   lewat "Lihat N materi lainnya"). */
.wm-gb-tombol-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wm-gb-tombol-wa svg { width: 20px; height: 20px; flex: none; }
.wm-gb-kur-tab { display: flex; gap: 10px; margin-top: 22px; overflow-x: auto; scrollbar-width: none; }
.wm-gb-kur-tab::-webkit-scrollbar { display: none; }
.wm-gb-kur-tab button { flex: 0 0 auto; display: grid; gap: 2px; min-width: 170px; padding: 14px 18px; border-radius: 16px; border: 1.5px solid #F5E4D6; background: #FFF8F2;
  font: inherit; text-align: left; color: var(--wm-navy); cursor: pointer; transition: transform .15s, background .15s, border-color .15s; }
.wm-gb-kur-tab button:hover { transform: translateY(-2px); border-color: var(--wm-oranye-muda); }
.wm-gb-kur-tab b { font-size: 17px; }
.wm-gb-kur-tab small { font-size: 13px; color: var(--wm-redup); }
.wm-gb-kur-tab button[aria-selected="true"] { background: var(--wm-oranye); border-color: var(--wm-oranye); color: #FFFFFF; }
.wm-gb-kur-tab button[aria-selected="true"] small { color: rgba(255,255,255,.85); }
.wm-gb-kur-isi { margin-top: 16px; }
.wm-gb-kur-isi[hidden] { display: none; }
.wm-gb-kur-daftar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wm-gb-kur-daftar li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #FFFFFF; border: 1px solid var(--wm-garis);
  font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--wm-navy); }
.wm-gb-kur-daftar span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #FDEDE2; color: var(--wm-oranye); font-size: 13px; font-weight: 800; }
.wm-gb-kur-daftar svg { flex: none; width: 16px; height: 16px; margin-left: auto; color: #C9CDD9; }
.wm-gb-kur-isi:not(.wm-gb-kur-buka) .wm-gb-kur-lebih { display: none; }
.wm-gb-kur-semua { margin-top: 12px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--wm-oranye); background: #FFFFFF; color: var(--wm-oranye);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.wm-gb-kur-semua:hover { background: #FDEDE2; }
.wm-gb-kur-sisa { margin: 12px 0 0; font-size: 14.5px; font-weight: 700; color: var(--wm-oranye); }
.wm-gb-kur-catatan { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 14px; color: var(--wm-redup); }
.wm-gb-kur-catatan svg { width: 16px; height: 16px; flex: none; color: var(--wm-oranye); }
@media (max-width: 600px) {
  .wm-gb-kur-tab { margin: 18px -16px 0; padding: 0 16px 4px; }
  .wm-gb-kur-tab button { min-width: 140px; padding: 12px 14px; }
  .wm-gb-kur-tab b { font-size: 15.5px; }
  .wm-gb-kur-daftar { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wm-gb-kur-daftar li { padding: 10px 12px; font-size: 14px; }
  .wm-gb-kur-daftar span { width: 30px; height: 30px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .wm-gb-kur-tab button { transition: none; } }

/* ── KARTU BERLATAR ABU-ABU (pemilik 23 Okt 2026 malam, potret kartu situs lama: "ada abu2 dalam kartu kayaknya bikin lebih bagus ya ?" lalu
   "maksudnya abu2 itu"): area info kartu listing (harga, judul, spek, agen) berlatar abu-abu muda, foto tetap di atas putih (foto UTUH,
   keputusan 20 Okt) sehingga foto & info terpisah jelas. Kotak spek jadi PUTIH di atas abu-abu. Berlaku di semua kartu listing situs. */
.wm .wm-kartu { background: #F2F3F6; }
.wm .wm-kartu-foto { background: #FFFFFF; }
.wm .wm-spek span { background: #FFFFFF; }
.wm .wm-kartu-agen { border-top-color: #E1E4EC; }
/* TOMBOL WHATSAPP KARTU SERAGAM ORANYE (pemilik 23 Okt 2026 malam: "tombol klik whatsapp di beranda dan listing kok berbeda warnanya"):
   ~~navy di halaman Listing/cari/agen, oranye hanya di beranda (.wm-beranda .wm-wa)~~ -> oranye di semua halaman. */
.wm .wm-wa { background: var(--wm-oranye); }
.wm .wm-wa:hover { background: #A9420E; }

/* ── JOIN US ORANYE ELEGAN (pemilik 23 Okt 2026 malam: "join us, warna orangenya norak, aku mau warna orange yang elegan"). MENGGANTIKAN
   blok "JOIN US ORANYE" di atas (~~latar oranye penuh di spanduk, Cara bergabung, ajakan; tombol putih~~). Prinsip beranda hangat yang sudah
   disetujui: oranye HEMAT sebagai aksen. Latar gelap = espresso (#1C120D -> #3A2216) bercahaya oranye tipis; tombol utama oranye; kotak
   terang krem (#FBF6F1); judul coklat tua (#24160F), bukan navy. HANYA .wm-gabung-hal. */
.wm-gabung-hal { --gb-espresso: #1C120D; --gb-espresso2: #2A1A12; --gb-espresso3: #3A2216; --gb-krem: #FBF6F1; --gb-krem-garis: #EFE4DA; --gb-persik: #E8A27A;
  --gb-judul: #24160F; --gb-teks: #4A3B33; }
.wm-gabung-hal .wm-bagian-kepala h2, .wm-gabung-hal .wm-gabung-h2, .wm-gabung-hal .wm-gb-dapat h3, .wm-gabung-hal .wm-gabung-kartu h3, .wm-gabung-hal .wm-gb-sub,
.wm-gabung-hal .wm-gb-siapa-daftar button, .wm-gabung-hal .wm-gb-kur-daftar li, .wm-gabung-hal .wm-gb-kur-tab button, .wm-gabung-hal .wm-gb-kutip, .wm-gabung-hal .wm-gabung-lokasi a { color: var(--gb-judul); }
.wm-gabung-hal .wm-gabung-teks, .wm-gabung-hal .wm-gb-dapat p, .wm-gabung-hal .wm-gabung-kartu p { color: var(--gb-teks); }
/* Judul di LATAR GELAP tetap putih (potret: judul pita WinMax AI tak terlihat, aturan judul coklat di atas ikut mengenainya). */
.wm-gabung-hal .wm-gb-ai .wm-gabung-h2, .wm-gabung-hal .wm-gabung-hero h1, .wm-gabung-hal .wm-gb-ajak h2 { color: #FFFFFF; }
/* latar gelap: spanduk, pita WinMax AI, ajakan */
.wm-gabung-hal .wm-gabung-hero, .wm-gabung-hal .wm-gb-ai, .wm-gabung-hal .wm-gb-ajak {
  background: radial-gradient(circle at 88% 8%, rgba(194,78,18,.32), transparent 42%), radial-gradient(circle at 0% 100%, rgba(194,78,18,.14), transparent 40%),
    linear-gradient(160deg, var(--gb-espresso), var(--gb-espresso2) 55%, var(--gb-espresso3)); }
.wm-gabung-hal .wm-gabung-hero .wm-gabung-kecil, .wm-gabung-hal .wm-gb-ai .wm-bagian-kecil, .wm-gabung-hal .wm-gb-ajak .wm-gabung-kecil, .wm-gabung-hal .wm-gb-ai-coba { color: var(--gb-persik); }
.wm-gabung-hal .wm-gabung-sub, .wm-gabung-hal .wm-gb-ai .wm-gabung-teks, .wm-gabung-hal .wm-gb-ajak p { color: rgba(255,244,236,.82); }
.wm-gabung-hal .wm-gb-centang { color: rgba(255,244,236,.9); }
.wm-gabung-hal .wm-gb-centang li::before { background-color: var(--wm-oranye); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.wm-gabung-hal .wm-gabung-hero a.wm-tombol--utama, .wm-gabung-hal .wm-gb-cara a.wm-tombol--utama, .wm-gabung-hal .wm-gb-ajak a.wm-tombol--utama { background: var(--wm-oranye); color: #FFFFFF; box-shadow: 0 10px 26px rgba(194,78,18,.35); }
.wm-gabung-hal .wm-gabung-hero a.wm-tombol--utama:hover, .wm-gabung-hal .wm-gb-cara a.wm-tombol--utama:hover, .wm-gabung-hal .wm-gb-ajak a.wm-tombol--utama:hover { background: #A9420E; }
.wm-gabung-hal .wm-gabung-video { background: var(--gb-espresso); }
.wm-gabung-hal .wm-gabung-video::after { background: linear-gradient(transparent 45%, rgba(28,18,13,.9)); }
/* daftar isi, pilihan, kurikulum: krem + aktif espresso */
.wm-gabung-hal .wm-gb-isi a { background: var(--gb-krem); color: var(--gb-teks); border: 1px solid var(--gb-krem-garis); }
.wm-gabung-hal .wm-gb-isi a:hover { background: #F5EBE2; color: var(--gb-judul); }
.wm-gabung-hal .wm-gb-isi a.wm-gb-isi-aktif { background: var(--gb-judul); border-color: var(--gb-judul); color: #FFFFFF; }
.wm-gabung-hal .wm-gb-siapa-daftar button { background: var(--gb-krem); border-color: var(--gb-krem-garis); }
.wm-gabung-hal .wm-gb-siapa-daftar button:hover { border-color: var(--gb-persik); box-shadow: 0 8px 18px rgba(36,22,15,.08); }
.wm-gabung-hal .wm-gb-siapa-daftar button svg { background: var(--gb-krem-garis); }
.wm-gabung-hal .wm-gb-siapa-daftar button[aria-pressed="true"] { background: var(--gb-judul); border-color: var(--gb-judul); color: #FFFFFF; }
.wm-gabung-hal .wm-gb-siapa-daftar button[aria-pressed="true"] svg { background: var(--wm-oranye); color: #FFFFFF; }
.wm-gabung-hal .wm-gb-siapa-hasil { background: var(--gb-krem); border: 1px solid var(--gb-krem-garis); }
.wm-gabung-hal .wm-gb-siapa-hasil p { color: var(--gb-judul); }
.wm-gabung-hal .wm-gb-kur-tab button { background: var(--gb-krem); border-color: var(--gb-krem-garis); }
.wm-gabung-hal .wm-gb-kur-tab button:hover { border-color: var(--gb-persik); }
.wm-gabung-hal .wm-gb-kur-tab button[aria-selected="true"] { background: var(--gb-judul); border-color: var(--gb-judul); color: #FFFFFF; }
.wm-gabung-hal .wm-gb-kur-daftar span, .wm-gabung-hal .wm-gb-ikon { background: #F7E9DE; }
/* pita WinMax AI: fitur & layar HP */
.wm-gabung-hal .wm-gb-fitur { background: rgba(255,244,236,.04); border-color: rgba(255,244,236,.1); }
.wm-gabung-hal .wm-gb-fitur:hover { background: rgba(255,244,236,.08); }
.wm-gabung-hal .wm-gb-fitur[aria-selected="true"] { background: rgba(194,78,18,.14); border-color: rgba(232,162,122,.7); }
.wm-gabung-hal .wm-gb-fitur .wm-gb-ikon { background: rgba(232,162,122,.12); color: var(--gb-persik); }
.wm-gabung-hal .wm-gb-fitur[aria-selected="true"] .wm-gb-ikon { background: var(--wm-oranye); color: #FFFFFF; }
.wm-gabung-hal .wm-gb-fitur-teks small { color: rgba(255,244,236,.7); }
.wm-gabung-hal .wm-gb-hp { border-color: #120B08; }
.wm-gabung-hal .wm-gb-notif { background: var(--gb-espresso2); }
.wm-gabung-hal .wm-gb-notif b { color: var(--gb-persik); }
.wm-gabung-hal .wm-gb-flyer { background: radial-gradient(circle at 85% 10%, rgba(194,78,18,.45), transparent 50%), linear-gradient(160deg, var(--gb-espresso3), var(--gb-espresso)); }
.wm-gabung-hal .wm-gb-flyer span { background: var(--wm-oranye); color: #FFFFFF; }
.wm-gabung-hal .wm-gb-flyer strong { color: var(--gb-persik); }
.wm-gabung-hal .wm-gb-foto { background: linear-gradient(135deg, #E8C3A8, #B76A3E 55%, var(--gb-espresso3)); }
.wm-gabung-hal .wm-gb-foto--2 { background: linear-gradient(135deg, #D9C2B0, #6E4A35 60%, var(--gb-espresso)); }
.wm-gabung-hal .wm-gb-cocok b, .wm-gabung-hal .wm-gb-mini b, .wm-gabung-hal .wm-gb-status li, .wm-gabung-hal .wm-gb-dok li { color: var(--gb-judul); }
/* Cara bergabung: kartu krem, angka oranye */
.wm-gabung-hal .wm-gb-cara { background: var(--gb-krem); border: 1px solid var(--gb-krem-garis); color: var(--gb-judul); }
.wm-gabung-hal .wm-gb-cara .wm-bagian-kecil { color: var(--wm-oranye); }
.wm-gabung-hal .wm-gb-cara .wm-gabung-h2 { color: var(--gb-judul); }
.wm-gabung-hal .wm-gb-langkah li { background: #FFFFFF; border-color: var(--gb-krem-garis); box-shadow: 0 6px 16px rgba(36,22,15,.05); }
.wm-gabung-hal .wm-gb-langkah span { background: var(--wm-oranye); color: #FFFFFF; }
.wm-gabung-hal .wm-gb-langkah b { color: var(--gb-judul); }
.wm-gabung-hal .wm-gb-langkah p { color: var(--gb-teks); }
/* pita Bukti nyata & tombol kemitraan */
.wm-gabung-hal .wm-gb-pita { background: var(--gb-krem); border-color: var(--gb-krem-garis); }
.wm-gabung-hal a.wm-tombol--navy { background: var(--gb-judul); }
.wm-gabung-hal .wm-gb-kutip { border-left-color: var(--wm-oranye); }
/* FOTO MEETING UTUH (pemilik 23 Okt 2026 malam: "foto2 ini kok kepotong"): kelima foto 1600x800 (2:1), ~~baris 150px object-fit cover~~ ->
   kotak ikut rasio 2:1, nol terpotong. */
.wm-gabung-hal .wm-gabung-foto { grid-template-rows: none; }
.wm-gabung-hal .wm-gabung-foto img { height: auto; aspect-ratio: 2 / 1; }
/* LISTING NYATA di layar HP demo (pemilik: "kayak gini2 bikin yang real dong"): foto listing asli & flyer berfoto. */
.wm-gabung-hal img.wm-gb-foto { width: 100%; height: 120px; object-fit: cover; background: #E9E1D8; }
.wm-gabung-hal .wm-gb-mini em { background: #25D366; }
.wm-gabung-hal .wm-gb-flyer--foto { position: relative; overflow: hidden; padding-top: 150px; background: var(--gb-espresso); }
.wm-gabung-hal .wm-gb-flyer--foto img { position: absolute; left: 0; top: 0; width: 100%; height: 170px; object-fit: cover; }
.wm-gabung-hal .wm-gb-flyer--foto img + span { position: absolute; top: 12px; left: 12px; }
.wm-gabung-hal .wm-gb-flyer--foto::before { content: ''; position: absolute; left: 0; right: 0; top: 90px; height: 80px; background: linear-gradient(transparent, var(--gb-espresso)); z-index: 1; }
.wm-gabung-hal .wm-gb-flyer--foto > :not(img) { position: relative; z-index: 2; }
.wm-gabung-hal .wm-gb-tonton { margin-top: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .wm-gabung-hal .wm-gb-tonton { grid-template-columns: none; } }
/* Mentor tinggal 7 (Gyver Tan & Santoso dihapus, pemilik 23 Okt 2026 malam): ~~9 kolom~~ -> 7 kolom di layar lebar. */
@media (min-width: 1201px) { .wm-gabung-hal .wm-gabung-mentor { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.wm-gabung-hal .wm-gb-kur-gratis { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #E7F7EC; color: #1E7B3C; font-style: normal; font-size: 12px; font-weight: 800; }
/* ── DETAIL: DUA KOLOM YANG MENGALIR SENDIRI (pemilik 24 Okt 2026: "harusnya kamu bikin bener2 responsive dongg, jadi ga buang2 space
   begini"). ~~Enam blok sejajar per BARIS grid~~ (aturan 901 / 1200-2399 di atas): kartu agen yang panjang (4 agen = 678px) merentang baris
   foto, foto berhenti di max-height 720px, dan bagian bawah baris itu KOSONG ±325px sebelum Deskripsi (potret 1920, /properti/13010).
   Kini 901-2399: .wm-d-kiri = foto, lalu deskripsi | detail properti; .wm-d-kanan = ringkasan, agen, KPR. Tiap kolom mengalir sendiri,
   jadi panjang daftar agen nol lagi mendorong deskripsi ke bawah. Tinggi foto TETAP per lebar layar (32vw, 410-720), bukan direntang.
   HP (<= 900): pembungkus display:contents — blok tetap diatur grid-template-areas .wm-detail-isi seperti sebelumnya.
   + >= 2400 IKUT (pemilik 24 Okt 2026 atas potret layar 34" /properti/20022: "ini kok isinya ga responsive"): ~~>= 2400 tiga kolom lama
   foto | deskripsi | ringkasan+agen+detail+KPR~~ (kolom kanan memanjang, di bawah foto & deskripsi kosong) -> dua kolom mengalir yang sama,
   kolom kanan 460 px, foto setinggi maks 760 px. */
.wm-d-kiri, .wm-d-kanan { display: contents; }
@media (min-width: 901px) {
  .wm-detail-isi, .wm-detail-isi--desk-pendek { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 28px; grid-template-areas: "kiri kanan"; grid-template-rows: auto; }
  .wm-d-kiri { grid-area: kiri; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "galeri" "desk" "rinci"; align-content: start; min-width: 0; }
  .wm-d-kanan { grid-area: kanan; display: flex; flex-direction: column; min-width: 0; }
  .wm-d-galeri { align-self: start; }
  .wm-d-galeri > .wm-galeri { flex: none; height: clamp(410px, 32vw, 720px); min-height: 0; max-height: none; }
  .wm-detail-isi .wm-d-kpr { margin-top: 22px; }
}
@media (min-width: 1200px) {
  .wm-detail-isi, .wm-detail-isi--desk-pendek { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 32px; }
  .wm-d-kiri { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 32px; grid-template-areas: "galeri galeri" "desk rinci"; }
}
@media (min-width: 1400px) { .wm-detail-isi, .wm-detail-isi--desk-pendek { grid-template-columns: minmax(0, 1fr) 400px; } }
@media (min-width: 2400px) {
  .wm-detail-isi, .wm-detail-isi--desk-pendek { grid-template-columns: minmax(0, 1fr) 460px; column-gap: 40px; }
  .wm-d-kiri { column-gap: 40px; }
  .wm-d-galeri > .wm-galeri { height: clamp(600px, 24vw, 760px); }
  .wm-desk-kepala { margin-top: 26px; }
}
/* KPR di KOLOM KIRI bila agen >= 3 (detail.ejs kprKiri, kelas wm-detail-isi--kpr-kiri): melebar di bawah deskripsi | detail properti,
   kepala sebaris & tiga isian sejajar (bentuk lebar yang dulu dipakai deskripsi pendek). */
@media (min-width: 901px) {
  .wm-detail-isi--kpr-kiri .wm-d-kiri { grid-template-areas: "galeri" "desk" "rinci" "kpr"; }
  .wm-detail-isi--kpr-kiri .wm-d-kpr .wm-kpr-kepala { flex-direction: row; align-items: flex-end; }
  .wm-detail-isi--kpr-kiri .wm-d-kpr .wm-kpr-hasil { text-align: right; }
  .wm-detail-isi--kpr-kiri .wm-d-kpr .wm-kpr-isian { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .wm-detail-isi--kpr-kiri .wm-d-kpr .wm-kpr-isian label { flex-direction: column; align-items: stretch; gap: 6px; }
}
@media (min-width: 1200px) { .wm-detail-isi--kpr-kiri .wm-d-kiri { grid-template-areas: "galeri galeri" "desk rinci" "kpr kpr"; } }
/* ── DETAIL HP: HURUF TURUN SATU TINGKAT (pemilik 24 Okt 2026 atas potret /properti/19819 di HP: "kegedean ga sih"). Terukur di 412 px:
   ~~deskripsi 16/28 px~~ (lebih besar dari lokasi & isi Detail properti 14 px, satu layar cuma ±4 baris), ~~judul 20~~, ~~harga 24~~,
   ~~judul seksi 17~~, ~~angka LT/LB/KT/KM 15~~. Kini deskripsi 14,5/1.6, judul 18, harga 22, judul seksi 16, angka 14 — hierarki sama,
   semuanya turun satu tingkat. Layar >= 901 tidak tersentuh. */
@media (max-width: 900px) {
  .wm-deskripsi { font-size: 14.5px; line-height: 1.6; }
  .wm-detail-judul { font-size: 18px; line-height: 1.3; }
  .wm-detail-harga { font-size: 22px; }
  .wm-detail-harga-penuh { font-size: 13px; }
  .wm-detail-lokasi { font-size: 13px; }
  .wm-detail-sub { font-size: 16px; }
  .wm-angka-utama b { font-size: 14px; }
  .wm-rinci > div { font-size: 13.5px; }
}