/* ============================================================
   PT METAPARK PROPERTINDO — style.css  (v3.0)
   Design system: Deep Emerald / Champagne Gold / Sand Beige
   Font: Montserrat — SELF-HOSTED (assets/fonts/), bukan Google Fonts.
   Struktur:
   00 Font faces      01 Tokens & base       02 Utilitas & tombol
   03 Header & nav    04 Hero                05 Section umum
   06 Tentang (PT)    07 Proyek              08 Keunggulan
   09 Tipe unit       10 Site plan           11 Lokasi
   12 Galeri          13 Transparansi        14 Form
   15 FAQ             16 Final CTA           17 Footer
   18 WA float        19 Lightbox            20 Reveal & a11y
   21 Responsif       22 Cetak
   ============================================================ */

/* ---------- 00 Font faces (self-hosted, lisensi OFL — lihat assets/fonts/OFL.txt) ----------
   Satu file variable font menggantikan 5 file statis dari Google Fonts.
   unicode-range = subset "latin" (cukup untuk Bahasa Indonesia). */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/montserrat-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/montserrat-latin-400-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- 01 Tokens & base ---------- */
:root{
  --emerald:#0E4D3B;
  --emerald-deep:#093528;
  --emerald-ink:#062A1F;
  --charcoal:#1A1A1A;
  --gold:#D4AF37;          /* emas brand — untuk teks di latar GELAP & elemen dekoratif */
  --gold-soft:#B89A4E;     /* emas lembut — hanya garis/aksen dekoratif */
  --gold-text:#8A6500;     /* emas untuk TEKS di latar terang — kontras 5.3:1 (WCAG AA) */
  --gold-line:rgba(212,175,55,.55);
  --sand:#F3EFE6;
  --sand-deep:#EAE3D3;
  --paper:#FFFFFF;
  --ink:#242A26;
  --ink-soft:#57605A;
  --line:#E3DCC9;          /* garis dekoratif (kartu, pemisah) */
  --field-line:#95896E;    /* batas input — kontras 3.45:1 (WCAG 1.4.11) */
  --radius:14px;
  --shadow-sm:0 6px 18px rgba(9,53,40,.08);
  --shadow-md:0 14px 38px rgba(9,53,40,.14);
  --container:1180px;
  --header-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  margin:0;
  font-family:'Montserrat',-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:16px;line-height:1.7;color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
/* <picture> default-nya inline; jadikan block agar tidak mengubah konteks layout
   pembungkusnya (mis. pemusatan site plan & jarak baseline di kartu galeri). */
picture{display:block}
a{color:var(--emerald)}
h1,h2,h3,h4{line-height:1.22;color:var(--charcoal);margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(1.9rem,4.2vw,3.15rem);letter-spacing:-.01em}
h2{font-size:clamp(1.55rem,3vw,2.3rem)}
h3{font-size:1.18rem}
p{margin:0 0 1em}
ul{padding-left:1.2em}
figure{margin:0}
[hidden]{display:none !important}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--charcoal);color:#fff;
  padding:10px 18px;border-radius:0 0 10px 0;z-index:2000;font-weight:600;
}
.skip-link:focus{left:0}

/* ---------- 02 Utilitas & tombol ---------- */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:.72rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-text);margin:0 0 14px;
}
.eyebrow::before{content:"";height:1px;width:44px;background:var(--gold-line);flex:none}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{content:"";height:1px;width:44px;background:var(--gold-line);flex:none}
.eyebrow--light{color:var(--gold)}

.section-head{max-width:720px;margin-bottom:44px}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{color:var(--ink-soft)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;border:1px solid transparent;
  font-family:inherit;font-size:.92rem;font-weight:600;letter-spacing:.04em;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-gold{background:var(--gold);color:var(--charcoal);box-shadow:0 10px 24px rgba(212,175,55,.28)}
.btn-gold:hover{background:#C9A32E}
.btn-emerald{background:var(--emerald);color:#fff;box-shadow:0 10px 24px rgba(14,77,59,.24)}
.btn-emerald:hover{background:var(--emerald-deep)}
.btn-ghost-light{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.04)}
.btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn-ghost{border-color:var(--emerald);color:var(--emerald);background:transparent}
.btn-ghost:hover{background:rgba(14,77,59,.06)}
.btn-block{width:100%}
.btn[disabled],.btn[aria-busy="true"]{opacity:.65;cursor:wait;transform:none}

/* ---------- 03 Header & nav ---------- */
.site-header{
  position:fixed;inset:0 0 auto;z-index:1100;height:var(--header-h);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .25s,border-color .2s,box-shadow .2s,backdrop-filter .25s;
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(9,53,40,.07);
}
.site-header:not(.is-scrolled) .primary-nav a{color:rgba(255,255,255,.94)}
.site-header:not(.is-scrolled) .primary-nav a:hover{color:#fff}
.site-header:not(.is-scrolled) .nav-toggle{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.site-header:not(.is-scrolled) .nav-toggle span{background:#fff}
.site-header:not(.is-scrolled) .brand img{filter:brightness(0) invert(1)}
.header-inner{height:100%;display:flex;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;flex:none}
.brand img{height:44px;width:auto}
.primary-nav{margin-left:auto}
.primary-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
.primary-nav a{
  text-decoration:none;color:var(--ink);font-size:.85rem;font-weight:500;letter-spacing:.02em;
  padding:8px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.primary-nav a:hover{color:var(--emerald);border-bottom-color:var(--gold)}
/* penanda seksi aktif (scrollspy) */
.primary-nav a[aria-current="true"]{border-bottom-color:var(--gold);font-weight:600}
.site-header.is-scrolled .primary-nav a[aria-current="true"]{color:var(--emerald)}
.site-header:not(.is-scrolled) .primary-nav a[aria-current="true"]{color:#fff}
.header-cta{flex:none;padding:12px 22px;font-size:.83rem}
.nav-toggle{
  display:none;flex:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line);
  border-radius:12px;background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--charcoal);transition:transform .2s,opacity .2s}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 04 Hero (foto latar sebagai <img> agar responsif & jadi elemen LCP) ---------- */
.hero{
  position:relative;isolation:isolate;color:#fff;overflow:hidden;
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--header-h) + 48px) 0 92px;
  background:var(--emerald-ink); /* warna dasar sebelum foto termuat */
}
.hero-bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
}
.hero::after{ /* overlay emerald agar teks terbaca */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,42,31,.86) 0%,rgba(6,42,31,.72) 42%,rgba(6,42,31,.90) 100%);
}
.hero-inner{max-width:720px;position:relative}
.badge-status{
  display:inline-flex;align-items:center;gap:10px;padding:11px 22px;border-radius:999px;
  border:1px solid var(--gold-line);color:var(--gold);font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:28px;line-height:1.5;
}
.badge-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.hero h1{
  color:#fff;margin-bottom:24px;font-weight:700;
  font-size:clamp(2.3rem,7vw,3.8rem);line-height:1.08;letter-spacing:-.02em;
}
.hero .lead{
  color:rgba(255,255,255,.92);font-size:clamp(1rem,2.4vw,1.18rem);
  line-height:1.75;max-width:620px;margin-bottom:26px;font-weight:400;
}
.hero .lead em{font-style:italic}
.hero-tagline{
  font-size:.8rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;line-height:1.9;
}
.hero-dev{font-size:.92rem;color:rgba(255,255,255,.78);margin-bottom:32px}
.hero-dev strong{color:#fff;font-weight:600}
.hero-cta{display:flex;flex-direction:column;gap:14px;max-width:520px;margin-bottom:26px}
.hero-cta .btn{padding:17px 30px;font-size:.92rem;letter-spacing:.06em}
.hero-bonus{
  max-width:520px;margin:0;padding:16px 22px;border:1px solid var(--gold-line);border-radius:12px;
  background:rgba(212,175,55,.07);font-size:.86rem;line-height:1.6;color:rgba(255,255,255,.9);
}
.hero-bonus strong{color:var(--gold);font-weight:600}
.scroll-cue{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:1;
  color:rgba(255,255,255,.75);text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
}
.scroll-cue svg{animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- 05 Section umum ---------- */
.section{padding:96px 0}
.section--sand{background:var(--sand)}
.section--emerald{background:linear-gradient(160deg,var(--emerald-ink),var(--emerald));color:#fff}
.section--emerald h2{color:#fff}
.section--emerald p{color:rgba(255,255,255,.86)}
.section--tight{padding:80px 0}

/* ---------- 06 Tentang (PT) ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.about-copy .tagline{
  font-size:1.05rem;font-weight:600;color:var(--emerald);letter-spacing:.02em;margin-bottom:16px;
}
.values{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.values li{
  display:flex;gap:18px;background:var(--sand);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;
}
.values .ic{flex:none;width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--gold-text)}
.values h3{font-size:1rem;margin-bottom:4px}
.values p{margin:0;font-size:.9rem;color:var(--ink-soft)}

/* ---------- 07 Proyek ---------- */
.project-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.project-media{position:relative}
.project-media img{border-radius:var(--radius);box-shadow:var(--shadow-md)}
.brand-plaque{
  position:absolute;right:-14px;bottom:-24px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:14px 18px;box-shadow:var(--shadow-sm);
}
.brand-plaque img{height:74px;width:auto}
.project-facts{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 22px}
.project-facts li{display:flex;gap:10px;align-items:baseline;font-size:.92rem}
.project-facts strong{color:var(--emerald);font-weight:700;white-space:nowrap}
.pillars{
  margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
}
.pillars div{padding:26px 22px;border-right:1px solid var(--line);text-align:center}
.pillars div:last-child{border-right:0}
.pillars .ic{color:var(--gold-text);margin-bottom:10px;display:inline-flex}
.pillars h3{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin:0;color:var(--emerald)}

/* ---------- 08 Keunggulan ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.feature .ic{
  width:52px;height:52px;border-radius:14px;background:var(--sand);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--gold-text);margin-bottom:18px;
}
.feature h3{font-size:1.02rem}
.feature p{margin:0;font-size:.92rem;color:var(--ink-soft)}

/* ---------- 09 Tipe unit (banner landscape full-width) ---------- */
.unit-grid{display:grid;grid-template-columns:1fr;gap:26px}
.unit-card{
  position:relative;border-radius:var(--radius);overflow:hidden;isolation:isolate;
  min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:var(--shadow-md);color:#fff;background:var(--emerald-ink);
}
.unit-bg{ /* foto sebagai <img loading="lazy"> agar tidak diunduh sebelum terlihat */
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.unit-card:hover .unit-bg{transform:scale(1.04)}
.unit-card--low .unit-bg{object-position:center 80%}
.unit-card::after{ /* overlay: gelap di kiri (tempat teks) memudar ke kanan */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(6,42,31,.94) 0%,rgba(6,42,31,.82) 34%,rgba(6,42,31,.45) 62%,rgba(6,42,31,.18) 100%);
}
.unit-card .unit-count{
  position:absolute;top:22px;right:22px;z-index:2;
  background:rgba(212,175,55,.95);color:var(--charcoal);
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 15px;border-radius:999px;
}
.unit-body{
  padding:40px 44px;position:relative;z-index:1;max-width:600px;
  display:flex;flex-direction:column;
}
.unit-body h3{font-size:2.1rem;color:#fff;margin-bottom:24px;letter-spacing:-.01em}
.unit-specs{display:flex;gap:0;border-block:1px solid rgba(255,255,255,.22);margin-bottom:22px;max-width:400px}
.unit-specs div{flex:1;padding:16px 22px 14px 0}
.unit-specs div:last-child{padding-left:24px;border-left:1px solid rgba(255,255,255,.22)}
.unit-specs strong{display:block;font-size:2.6rem;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
.unit-specs strong sup{font-size:.4em;font-weight:600;color:var(--gold);vertical-align:super}
.unit-specs span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:7px;display:block}
.unit-list{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 20px;max-width:520px}
.unit-list li{position:relative;padding-left:24px;font-size:.88rem;color:rgba(255,255,255,.92)}
.unit-list li::before{
  content:"";position:absolute;left:0;top:.5em;width:13px;height:7px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);
}
.unit-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}
.unit-actions .btn{padding:13px 26px;font-size:.84rem}
.unit-note{margin-top:26px;font-size:.82rem;color:var(--ink-soft);font-style:italic;text-align:center}
.brochure-row{margin-top:22px;text-align:center}

/* ---------- 10 Site plan ---------- */
.siteplan-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.siteplan-figure{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}
.siteplan-figure img{max-height:560px;width:auto;margin:0 auto;object-fit:contain}
.siteplan-zoom{position:absolute;right:22px;bottom:22px}
.siteplan-points{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.siteplan-points li{display:flex;gap:12px;font-size:.94rem}
.siteplan-points .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold-soft);margin-top:.55em}
.disclaimer{font-size:.82rem;color:var(--ink-soft);font-style:italic}

/* ---------- 11 Lokasi ---------- */
.location-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.address-card{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold-soft);
  border-radius:12px;padding:22px 24px;margin-bottom:26px;
}
.address-card strong{display:block;color:var(--emerald);margin-bottom:4px;font-size:1.02rem}
.access-list{list-style:none;margin:0;padding:0}
.access-list li{
  display:flex;justify-content:space-between;gap:18px;padding:14px 4px;
  border-bottom:1px solid var(--line);font-size:.93rem;
}
.access-list li span:last-child{color:var(--gold-text);font-weight:600;white-space:nowrap}
.access-note{margin:14px 0 0;font-size:.78rem;color:var(--ink-soft);font-style:italic}
.map-embed iframe{width:100%;height:420px;border:0;border-radius:var(--radius);box-shadow:var(--shadow-sm);display:block}
.map-link{display:inline-block;margin-top:12px;font-size:.85rem;font-weight:600;text-decoration:none;color:var(--emerald)}
.map-link:hover{color:var(--gold-text)}

/* ---------- 12 Galeri ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.gal-item{
  position:relative;border:0;padding:0;background:var(--charcoal);border-radius:12px;overflow:hidden;
  cursor:pointer;display:block;width:100%;
}
.gal-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .35s ease,opacity .35s ease}
.gal-item:hover img{transform:scale(1.05);opacity:.82}
.gal-cap{
  position:absolute;inset:auto 0 0;padding:26px 14px 12px;
  background:linear-gradient(transparent,rgba(6,42,31,.9));
  color:#fff;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;text-align:left;
  font-family:inherit;font-weight:500;
}
.gallery-disclaimer{margin-top:24px;text-align:center}

/* ---------- 13 Transparansi ---------- */
.steps{list-style:none;counter-reset:step;margin:52px 0 44px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.steps li{position:relative;padding-top:8px}
.steps li::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--gold-line);
  color:var(--gold);font-weight:700;font-size:1rem;margin-bottom:16px;background:rgba(255,255,255,.04);
}
.steps li::after{
  content:"";position:absolute;top:33px;left:64px;right:-14px;height:1px;background:rgba(212,175,55,.28);
}
.steps li:last-child::after{display:none}
.steps h3{color:#fff;font-size:.98rem;margin-bottom:6px}
.steps p{font-size:.85rem;margin:0;color:rgba(255,255,255,.76)}
.step-status{
  display:inline-block;margin-top:10px;font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--charcoal);background:var(--gold);padding:5px 12px;border-radius:999px;
}
.commitment{
  border:1px solid var(--gold-line);border-radius:var(--radius);padding:26px 30px;
  background:rgba(212,175,55,.06);
}
.commitment p{margin:0;font-size:.98rem;color:#fff}
.commitment strong{color:var(--gold)}

/* ---------- 14 Form ---------- */
.form-shell{
  max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:44px;box-shadow:var(--shadow-md);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:.82rem;font-weight:600;color:var(--charcoal)}
.field label small{font-weight:400;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:.95rem;color:var(--ink);
  border:1px solid var(--field-line);border-radius:10px;padding:13px 15px;background:#fff;
  transition:border-color .15s,box-shadow .15s;width:100%;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--emerald)}
/* Input ikut memakai cincin fokus dua-nada yang sama seperti elemen lain,
   supaya penanda fokus keyboard tetap >=3:1 (WCAG 1.4.11). */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.consent input:focus-visible{
  outline:3px solid var(--emerald-ink);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--gold);
  border-color:var(--emerald);
}
.form-alert:focus{outline:none}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#A03A26;border-width:2px}
.field-error{font-size:.78rem;color:#A03A26;min-height:1em}
.consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:.85rem;color:var(--ink-soft)}
.consent input{width:19px;height:19px;margin-top:3px;accent-color:var(--emerald);flex:none}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.form-alert{
  grid-column:1/-1;border-radius:10px;padding:14px 18px;font-size:.9rem;font-weight:500;
}
.form-alert--error{background:#FBEDE9;color:#8C3421;border:1px solid #D9A897}
.form-alert--success{background:#EAF4EE;color:var(--emerald);border:1px solid #9CC4AE}
.form-note{grid-column:1/-1;font-size:.8rem;color:var(--ink-soft);margin:6px 0 0;text-align:center}
.form-reassure{grid-column:1/-1;margin:0;font-size:.82rem;color:var(--ink-soft);text-align:center}

/* ---------- 15 FAQ ---------- */
.faq-list{max-width:820px;margin:0 auto}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 4px;position:relative;
  font-weight:600;color:var(--charcoal);font-size:1rem;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:1px solid var(--gold-text);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold-text);font-weight:500;font-size:1.15rem;
}
.faq-list details[open] summary::after{content:"\2013"}
.faq-list details > div{padding:0 4px 24px;color:var(--ink-soft);font-size:.94rem;max-width:700px}

/* ---------- 16 Final CTA ---------- */
.final-cta{text-align:center}
.final-cta h2{margin-bottom:14px}
.final-cta p{max-width:560px;margin:0 auto 32px}
.final-cta .hero-cta{justify-content:center;margin:0 auto;flex-direction:row;flex-wrap:wrap;max-width:none}

/* ---------- 17 Footer ---------- */
.site-footer{background:var(--charcoal);color:rgba(255,255,255,.82);padding:72px 0 0;font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;padding-bottom:52px}
.footer-brand .wordmark{font-weight:800;font-size:1.25rem;letter-spacing:.16em;color:#fff;margin-bottom:2px}
.footer-brand .wordmark-sub{font-size:.68rem;letter-spacing:.42em;color:var(--gold);text-transform:uppercase;margin-bottom:18px}
.footer-brand p{color:rgba(255,255,255,.7);font-size:.86rem;max-width:320px}
.site-footer h3{color:#fff;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:20px}
.footer-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer-list a{color:rgba(255,255,255,.82);text-decoration:none}
.footer-list a:hover{color:var(--gold)}
.footer-legal{
  border-top:1px solid rgba(255,255,255,.12);padding:22px 0;font-size:.76rem;color:rgba(255,255,255,.64);
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;
}
.footer-legal p{margin:0}
.build-tag{opacity:.7;font-size:.9em;letter-spacing:.06em}

/* ---------- 18 WA float ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:900;
  width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.28);transition:transform .18s;
}
.wa-float:hover{transform:scale(1.08)}

/* ---------- 19 Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:1500;background:rgba(8,13,11,.94);
  display:none;align-items:center;justify-content:center;padding:56px 20px 40px;
}
.lightbox.is-open{display:flex}
.lightbox figure{max-width:min(1100px,94vw);text-align:center}
.lightbox img{max-width:100%;max-height:78vh;object-fit:contain;margin:0 auto;border-radius:8px;background:#fff}
.lightbox figcaption{color:rgba(255,255,255,.88);font-size:.85rem;margin-top:14px;letter-spacing:.06em}
.lb-btn{
  position:absolute;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);
  color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.lb-btn:hover{background:rgba(255,255,255,.3)}
.lb-close{top:18px;right:18px}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lb-next{right:14px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;top:26px;left:22px;color:rgba(255,255,255,.7);font-size:.78rem;letter-spacing:.14em}
body.lb-lock{overflow:hidden}

/* ---------- 20 Reveal & a11y ----------
   PENTING: efek reveal HANYA aktif jika JavaScript benar-benar hidup.
   Class "js" dipasang skrip kecil di <head>, dan dicabut kembali kalau
   main.js gagal dimuat. Tanpa itu konten TETAP TERLIHAT — tidak ada
   risiko halaman tampil kosong. */
html.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
html.js [data-reveal].revealed{opacity:1;transform:none}

/* Cincin fokus dua-nada: nada gelap terbaca di latar terang, nada emas
   terbaca di latar gelap — salah satunya selalu >=3:1 (WCAG 1.4.11). */
:focus-visible{
  outline:3px solid var(--emerald-ink);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--gold);
  border-radius:4px;
}
.btn:focus-visible,.wa-float:focus-visible,.header-cta:focus-visible{border-radius:999px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  html.js [data-reveal]{opacity:1;transform:none}
  .btn:hover,.feature:hover,.wa-float:hover,.unit-card:hover .unit-bg,.gal-item:hover img{transform:none}
}

/* ---------- Kartu Bonus ---------- */
.bonus-card{margin-top:40px;background:linear-gradient(155deg,var(--emerald-ink),var(--emerald));border-radius:var(--radius);padding:40px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}
.bonus-card::after{content:"";position:absolute;top:0;right:0;width:40%;height:4px;background:linear-gradient(90deg,transparent,var(--gold))}
.bonus-head{max-width:560px;margin-bottom:28px}
.bonus-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;border:1px solid var(--gold-line);color:var(--gold);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.bonus-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.bonus-card h3{color:#fff;font-size:1.5rem;margin-bottom:10px}
.bonus-head p{color:rgba(255,255,255,.86);margin:0;font-size:.95rem}
.bonus-list{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px 28px}
.bonus-list li{display:flex;gap:14px;align-items:center}
.bonus-ic{flex:none;width:46px;height:46px;border-radius:12px;background:rgba(212,175,55,.12);border:1px solid var(--gold-line);display:flex;align-items:center;justify-content:center;color:var(--gold)}
.bonus-list strong{display:block;font-size:1rem;color:#fff;font-weight:600}
.bonus-list li span:last-child{font-size:.82rem;color:rgba(255,255,255,.78)}
.bonus-terms{margin:0;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:.8rem;color:rgba(255,255,255,.76);font-style:italic}

/* ---------- Halaman sekunder (404 / thank-you / privacy) ----------
   Sebelumnya inline <style> di tiap halaman; dipindah ke sini supaya CSP
   tidak perlu mengizinkan 'unsafe-inline' pada style-src. */
.nf-wrap,.ty-wrap{background:linear-gradient(160deg,var(--emerald-ink),var(--emerald))}
.nf-wrap{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;color:#fff}
.nf-wrap img{height:52px;width:auto;background:#fff;padding:9px 16px;border-radius:12px;margin-bottom:36px}
.nf-code{font-size:clamp(3.5rem,14vw,6rem);font-weight:800;color:var(--gold);line-height:1;letter-spacing:-.03em;margin:0}
.nf-wrap h1{font-size:clamp(1.3rem,4vw,1.7rem);color:#fff;margin:14px 0 10px}
.nf-wrap p{color:rgba(255,255,255,.88);max-width:440px;margin:0 auto 30px;line-height:1.7}
.nf-actions,.ty-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

.ty-wrap{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.ty-header{padding:26px 0}
.ty-header img,.pp-header img{height:44px;width:auto;background:#fff;padding:8px 14px;border-radius:10px}
.ty-main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px 70px}
.ty-card{background:#fff;border-radius:var(--radius);max-width:580px;width:100%;padding:54px 44px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.ty-icon{width:76px;height:76px;border-radius:50%;background:var(--sand);border:1px solid var(--gold-line);display:flex;align-items:center;justify-content:center;margin:0 auto 26px;color:var(--emerald)}
.ty-card h1{font-size:clamp(1.6rem,5vw,2rem);margin-bottom:14px}
.ty-card p{color:var(--ink-soft);font-size:.97rem;line-height:1.75}
.ty-actions{margin-top:32px}
.ty-footer{padding:20px 0;text-align:center;color:rgba(255,255,255,.7);font-size:.76rem}

.pp-header{background:var(--emerald);padding:22px 0}
.pp-header img{height:40px}
.pp-main{max-width:780px;margin:0 auto;padding:64px 24px 90px}
.pp-main h1{font-size:1.9rem}
.pp-main h2{font-size:1.15rem;margin-top:2.2em}
.pp-main p,.pp-main li{color:var(--ink-soft);font-size:.95rem}
.pp-meta{font-size:.82rem;color:var(--gold-text);letter-spacing:.08em;text-transform:uppercase;margin-bottom:28px}
.pp-back{margin-top:48px}

/* ---------- 21 Responsif ---------- */
@media (max-width:1080px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pillars div:nth-child(2){border-right:0}
  .pillars div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .primary-nav ul{gap:20px}
  .primary-nav a{font-size:.8rem}
}
@media (max-width:920px){
  :root{--header-h:70px}
  .brand img{height:38px}
  .nav-toggle{display:flex}
  .header-cta{display:none}
  .primary-nav{
    position:fixed;inset:var(--header-h) 0 auto;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px rgba(9,53,40,.14);padding:10px 24px 22px;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:transform .2s,opacity .2s,visibility .2s;
    max-height:calc(100vh - var(--header-h));
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;overscroll-behavior:contain;
  }
  body.nav-open .primary-nav{transform:none;opacity:1;visibility:visible}
  .primary-nav ul{flex-direction:column;gap:0}
  .primary-nav a{display:block;padding:14px 2px;border-bottom:1px solid var(--line);font-size:.95rem}
  .site-header:not(.is-scrolled) .primary-nav a{color:var(--ink)}
  .site-header:not(.is-scrolled) .primary-nav a[aria-current="true"]{color:var(--emerald)}
  .hero{padding-bottom:110px}
  .about-grid,.project-grid,.siteplan-wrap,.location-grid{grid-template-columns:1fr;gap:40px}
  .steps{grid-template-columns:1fr 1fr;gap:32px 22px}
  .steps li::after{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .section{padding:72px 0}
  .hero{padding-top:calc(var(--header-h) + 44px);padding-bottom:104px}
  .feature-grid{grid-template-columns:1fr}
  .unit-body{padding:30px 24px}
  .unit-body h3{font-size:1.7rem}
  .unit-specs strong{font-size:2.1rem}
  .form-shell{padding:30px 22px}
  .form-grid{grid-template-columns:1fr}
  .unit-list{grid-template-columns:1fr}
  .brand-plaque{right:10px;bottom:-20px;padding:10px 14px}
  .brand-plaque img{height:56px}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .steps{grid-template-columns:1fr}
  .siteplan-figure img{max-height:none;width:100%}
  .siteplan-zoom{position:static;margin-top:14px;width:100%}
  .bonus-card{padding:30px 22px}
  .bonus-list{grid-template-columns:1fr;gap:14px}
  .lightbox{padding:74px 12px 32px}
  .lb-prev{left:8px}
  .lb-next{right:8px}
  .ty-card{padding:38px 22px}
}
@media (max-width:480px){
  .nf-actions .btn,.ty-actions .btn{width:100%}
}
@media (max-width:420px){
  /* Dua kolom + angka yang tidak boleh patah membuat halaman melebar di layar 320px */
  .project-facts{grid-template-columns:1fr}
}
@media (max-width:400px){
  .container{padding:0 18px}
  .btn{padding:14px 22px;font-size:.86rem}
  .hero-cta .btn,.final-cta .hero-cta .btn{width:100%}
}

/* ---------- 22 Cetak (denah & site plan sering dicetak calon pembeli) ---------- */
@media print{
  .site-header,.wa-float,.scroll-cue,.lightbox,.nav-toggle,.hero-cta,.brochure-row,.form-shell,.skip-link{display:none !important}
  .hero{min-height:auto;padding:24px 0;color:#000;background:#fff}
  .hero-bg{display:none}
  .hero::after{display:none}
  .hero h1,.hero .lead,.hero-dev,.hero-tagline,.hero-bonus{color:#000}
  .section{padding:24px 0;break-inside:avoid}
  .section--emerald,.section--sand,.bonus-card,.unit-card{background:#fff !important;color:#000}
  .section--emerald h2,.section--emerald p,.steps h3,.steps p,.commitment p,
  .unit-body h3,.unit-specs strong,.unit-list li,.bonus-card h3,.bonus-list strong{color:#000 !important}
  .unit-bg,.unit-card::after{display:none}
  html.js [data-reveal]{opacity:1 !important;transform:none !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}

/* Dipakai oleh <noscript> GTM saat tracking diaktifkan. Ada di sini (bukan
   sebagai atribut style="...") supaya CSP style-src tidak perlu 'unsafe-inline'. */
.gtm-noscript{display:none !important;visibility:hidden;width:0;height:0;border:0}