/* =====================================================================
   meru-raya.css — Gaya tambahan KHAS untuk /ejen-hartanah/bandar-meru-raya/
   Dimuatkan selepas site.css. Hanya aktif bila <body class="tema-meru-raya">.
   Warna jenama kekal (gelap + oren #f0812f); yang ditambah ialah
   nada biru-teal untuk hero supaya halaman ni terus dikenali berbeza.
   ===================================================================== */
.tema-meru-raya{
  --mr-teal:#0b4a52;
  --mr-teal-tua:#06292e;
  --mr-teal-muda:#e3f1f2;
  --mr-garis:#d6e4e5;
}

/* ===== Hero: gradient teal + corak grid halus + cahaya oren ===== */
.tema-meru-raya .hero{
  position:relative;
  background:
    radial-gradient(60% 80% at 85% 20%, rgba(240,129,47,.28) 0%, rgba(240,129,47,0) 60%),
    linear-gradient(160deg,var(--mr-teal) 0%,var(--mr-teal-tua) 100%);
}
.tema-meru-raya .hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,0) 85%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,0) 85%);
}
.tema-meru-raya .hero-grid{position:relative}
.tema-meru-raya .hero h1{font-size:clamp(1.6rem,3.6vw,2.4rem);letter-spacing:-.01em}
.tema-meru-raya .hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  color:#fde3cc;font-size:.78rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;margin:0 0 16px;max-width:none
}
.tema-meru-raya .hero-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--emas);box-shadow:0 0 0 4px rgba(240,129,47,.25)}
.tema-meru-raya .hero .stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.tema-meru-raya .hero .stat:nth-child(2){background:rgba(240,129,47,.14);border-color:rgba(240,129,47,.45)}
.tema-meru-raya .potret-lencana{border-left:3px solid var(--emas)}

/* ===== Chip kawasan: titik oren di hadapan ===== */
.tema-meru-raya .kawasan-chip span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--mr-garis)}
.tema-meru-raya .kawasan-chip span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--emas)}

/* ===== Seksyen khas: latar berselang supaya 'rentak' halaman berubah ===== */
.mr-seksyen{max-width:none;padding-left:0;padding-right:0}
.mr-seksyen > *{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
#mercu-tanda{background:linear-gradient(180deg,#f2f2f2 0%,var(--mr-teal-muda) 100%)}
#jenis-rumah{background:var(--putih);border-top:1px solid var(--mr-garis);border-bottom:1px solid var(--mr-garis)}

/* ===== Mercu tanda ===== */
.mr-mercu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.mr-mercu{
  position:relative;background:var(--putih);border-radius:var(--radius);box-shadow:var(--bayang);
  padding:24px 22px 20px;border-top:4px solid transparent;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;overflow:hidden
}
.mr-mercu:hover{transform:translateY(-4px);border-top-color:var(--emas);box-shadow:0 12px 28px rgba(11,74,82,.16)}
.mr-mercu .mr-no{position:absolute;right:16px;top:10px;font-size:2.6rem;font-weight:800;color:var(--mr-teal);opacity:.07;line-height:1;letter-spacing:-.04em}
.mr-mercu .mr-ikon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--mr-teal-muda);font-size:1.4rem;margin-bottom:12px}
.mr-mercu h3{font-size:1.02rem;color:var(--hijau);margin-bottom:6px;line-height:1.3}
.mr-mercu p{font-size:.95rem;color:var(--teks);line-height:1.6;margin-bottom:10px}
.mr-mercu small{display:block;font-size:.84rem;color:#7c4708;background:var(--emas-muda);padding:8px 12px;border-radius:8px;line-height:1.5}

.mr-akses{
  margin-top:22px;background:var(--mr-teal-tua);color:#dfeef0;border-radius:var(--radius);
  padding:14px 20px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:center;font-size:.9rem
}
.mr-akses .mr-akses-tajuk{font-weight:700;color:#fde3cc;text-transform:uppercase;letter-spacing:.5px;font-size:.76rem}
.mr-akses b{color:var(--emas);margin-right:4px}
/* padding dalaman mr-akses sudah set, elakkan padding luar dari peraturan .mr-seksyen > * bertindih */
.mr-seksyen > .mr-akses{max-width:1140px}

/* ===== Persona ===== */
.mr-persona-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.mr-persona{background:var(--putih);border-radius:var(--radius);box-shadow:var(--bayang);overflow:hidden;display:flex;flex-direction:column}
.mr-persona-kepala{background:linear-gradient(135deg,var(--mr-teal),var(--mr-teal-tua));color:#fff;padding:20px 22px;display:flex;align-items:center;gap:12px}
.mr-persona-kepala .mr-ikon{font-size:1.6rem;flex-shrink:0}
.mr-persona-kepala h3{font-size:1rem;line-height:1.3}
.mr-persona > p{padding:16px 22px 0;font-size:.95rem;color:var(--teks);line-height:1.6}
.mr-persona .mr-cadang{margin-top:auto;padding:14px 22px 20px;font-size:.9rem;color:var(--teks);border-top:1px dashed var(--mr-garis);margin-top:14px}
.mr-persona .mr-cadang b{color:#9a4b0d}

/* ===== Jenis hartanah (baris jadual responsif) ===== */
.mr-jenis{display:flex;flex-direction:column;gap:10px;max-width:1020px}
.mr-jenis-baris{
  display:grid;grid-template-columns:1.1fr 1.2fr 1.8fr;gap:16px;align-items:center;
  background:var(--bg);border:1px solid var(--mr-garis);border-radius:12px;padding:16px 18px;transition:border-color .2s ease,background .2s ease
}
.mr-jenis-baris:hover{border-color:var(--emas);background:#fff7f0}
.mr-jenis-nama{display:flex;align-items:center;gap:10px;color:var(--hijau);font-size:1rem}
.mr-jenis-nama span{font-size:1.4rem}
.mr-jenis-siapa{font-size:.9rem;color:var(--teks-muda)}
.mr-jenis-siapa::before{content:"Siapa cari: ";font-weight:700;color:var(--mr-teal)}
.mr-jenis-semak{font-size:.9rem;color:var(--teks);line-height:1.5}
.mr-jenis-semak::before{content:"Fizah semak: ";font-weight:700;color:#9a4b0d}
@media(max-width:820px){
  .mr-jenis-baris{grid-template-columns:1fr;gap:6px}
}

.mr-nota{
  margin-top:26px;max-width:1020px;background:var(--mr-teal-muda);border-left:4px solid var(--emas);border-radius:12px;
  padding:20px 22px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between
}
.mr-nota p{flex:1 1 420px;font-size:.95rem;color:var(--teks);line-height:1.6;margin:0}
.mr-nota p b{color:var(--mr-teal)}

/* ===== CTA akhir: ikut nada teal supaya konsisten dengan hero ===== */
.tema-meru-raya .cta-akhir{background:linear-gradient(160deg,var(--mr-teal),var(--mr-teal-tua))}

@media(max-width:640px){
  .mr-mercu{padding:20px 18px 16px}
  .mr-akses{justify-content:flex-start;font-size:.86rem}
  .mr-nota{padding:16px}
}
@media(prefers-reduced-motion:reduce){
  .mr-mercu,.mr-jenis-baris{transition:none}
  .mr-mercu:hover{transform:none}
}

/* ===== Kisah klien di Meru ===== */
#kisah-meru{padding-top:0}
.mr-kisah{
  display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center;
  background:var(--putih);border-radius:var(--radius);box-shadow:var(--bayang);
  padding:28px 30px;border-left:5px solid var(--emas);max-width:1020px
}
.mr-kisah-foto{width:150px;height:150px;border-radius:50%;object-fit:cover;border:4px solid var(--mr-teal-muda)}
.mr-kisah-label{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--mr-teal);background:var(--mr-teal-muda);padding:5px 12px;border-radius:999px;margin-bottom:12px}
.mr-kisah blockquote p{font-size:1.05rem;line-height:1.65;color:var(--teks);font-style:italic;margin-bottom:10px}
.mr-kisah .mr-kisah-sumber{font-style:normal;font-size:.9rem;color:var(--teks-muda)}
.mr-kisah .mr-kisah-sumber b{color:var(--hijau)}
.mr-kisah-nota{margin-top:14px;font-size:.9rem;color:var(--teks-muda);line-height:1.55;border-top:1px dashed var(--mr-garis);padding-top:12px}
@media(max-width:640px){
  .mr-kisah{grid-template-columns:1fr;text-align:center;padding:24px 20px}
  .mr-kisah-foto{margin:0 auto;width:120px;height:120px}
}

/* ===== Rumah untuk dijual di Meru ===== */
#rumah-dijual-meru{background:linear-gradient(180deg,var(--mr-teal-muda) 0%,#f2f2f2 100%)}
.mr-senarai-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.mr-senarai-kad{display:flex;flex-direction:column;gap:8px;background:var(--putih);border-radius:var(--radius);box-shadow:var(--bayang);padding:24px 22px;text-decoration:none;color:var(--teks);border-top:4px solid transparent;transition:transform .2s ease,border-color .2s ease}
.mr-senarai-kad:hover{transform:translateY(-4px);border-top-color:var(--emas)}
.mr-senarai-kad .mr-ikon{font-size:1.6rem}
.mr-senarai-kad b{color:var(--hijau);font-size:1.02rem;line-height:1.3}
.mr-senarai-kad p{font-size:.92rem;color:var(--teks-muda);line-height:1.55;flex:1}
.mr-senarai-pautan{font-weight:700;color:#9a4b0d;font-size:.9rem}
.mr-senarai-wa{background:#eafaf0;border-top-color:#25d366}
.mr-senarai-wa .mr-senarai-pautan{color:#1a7a3d}