/* ============================================================
   HALAMAN PROYEK — situs mandiri tiap kawasan

   Warna --aksen & --aksen-gelap disuntikkan per halaman dari data
   kawasan, sehingga tiap proyek punya identitas visualnya sendiri.
   Tipografi & token dasar diwarisi dari style.css.
   ============================================================ */

.situs-proyek{ background:#fff; }

/* nonaktifkan navbar landing bila ikut termuat */
.situs-proyek > .nav{ display:none; }

/* ============================================================
   GERAK MASUK SAAT GULIR

   Satu pola untuk seluruh halaman: elemen naik sedikit sambil
   memudar masuk. Jaraknya sengaja pendek (1rem, 2rem untuk blok
   besar) — gerak yang jauh terasa "murahan" dan memperlambat
   pembaca. Konsistensi inilah yang membuat halaman terasa rapi,
   bukan variasi efek yang banyak.

   Kelas .muncul dipasang IntersectionObserver di proyek.js.
   Tanpa JS, aturan .no-js di bawah membuat semuanya tampil normal.
   ============================================================ */
[data-muncul]{
  opacity:0;
  transform:translate3d(0, 1rem, 0);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),
             transform .8s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
/* Blok besar (hero, gambar utama) bergerak sedikit lebih jauh
   supaya bobotnya terasa. */
[data-muncul="jauh"]{ transform:translate3d(0, 2rem, 0); }

[data-muncul].muncul{
  opacity:1;
  transform:translate3d(0, 0, 0);
  will-change:auto;
}

/* Jaring pengaman: bila JavaScript mati, konten tidak boleh
   ikut hilang. */
html:not(.js) [data-muncul]{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  [data-muncul]{
    opacity:1 !important; transform:none !important;
    transition:none !important;
  }
}

/* ============================================================
   PARALLAX

   Gambar bergerak lebih lambat daripada halaman, sehingga terasa
   berada di kedalaman berbeda. Nilai transform-nya dipasang JS
   (initParallax) ke variabel --geser.

   Penting: transform ditaruh di PEMBUNGKUS, bukan pada <img> —
   .pj-hero-foto img sudah memakai animation:pjZoom dan .pj-foto img
   sudah memakai transform untuk hover. Menumpuk transform di elemen
   yang sama akan membatalkan keduanya.

   Gambar dibuat lebih tinggi dari bingkainya (padding gerak), kalau
   tidak akan muncul celah kosong saat digeser. Bingkainya sendiri
   sudah overflow:hidden. */
.pj-hero-foto,
.pj-foto-dalam{
  transform:translate3d(0, var(--geser, 0px), 0);
  will-change:transform;
}

/* Lapisan tambahan di dalam .pj-foto supaya .pj-foto tetap menjadi
   item grid dan pemegang aspect-ratio, sementara lapisan ini yang
   bergerak.

   Angka inset HARUS >= kekuatan parallax di proyek.js, karena geseran
   maksimumnya = tinggi bingkai x kekuatan. Galeri memakai 0.10, jadi
   10% adalah batas minimum; 12% memberi sedikit margin aman.
   Kurang dari ini akan memunculkan celah kosong saat digulir. */
.pj-foto-dalam{
  position:absolute; inset:-12% 0;
}
.pj-foto-dalam img{ width:100%; height:100%; object-fit:cover; }

/* Hero memakai kekuatan 0.18 sehingga butuh minimal 18%; inset-nya
   dipasang 20% langsung pada aturan .pj-hero-foto di bawah, supaya
   angka itu hanya ada di satu tempat. */

/* Catatan: penetralan parallax untuk prefers-reduced-motion ditaruh di
   AKHIR berkas, bukan di sini — aturan .pj-hero-foto yang asli muncul
   lebih bawah, dan dengan spesifisitas yang sama aturan terakhirlah
   yang menang. Kalau ditulis di sini, inset-nya tidak akan berlaku. */

.pj-wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:32px; }

/* ============================================================
   NAVBAR KHUSUS PROYEK
   ============================================================ */
.pj-nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:74px;
  background:transparent;
  transition:background .38s ease, box-shadow .38s ease,
             height .38s ease, backdrop-filter .38s ease;
}
.pj-nav.mengambang{
  height:64px;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.pj-nav-in{
  max-width:1180px; height:100%; margin-inline:auto; padding-inline:32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.pj-merek{ display:flex; align-items:center; gap:12px; min-width:0; }
.pj-merek-mono{
  display:grid; place-content:center; flex-shrink:0;
  width:42px; height:42px; border-radius:13px;
  background:var(--aksen); color:#fff;
  font-family:var(--font-display); font-size:14px; font-weight:500; letter-spacing:.6px;
  box-shadow:0 4px 14px color-mix(in srgb, var(--aksen) 40%, transparent);
}
.pj-merek-mono.besar{ width:58px; height:58px; border-radius:17px; font-size:18px; }

/* ---------- logo kawasan ----------
   Berkas logonya beragam: ada yang berlatar putih, ada yang berlatar
   gelap. Alih-alih memaksa satu perlakuan, logo diberi alas putih
   agar semuanya terbaca konsisten di atas foto hero maupun navbar. */
.pj-merek-logo{
  flex-shrink:0; width:42px; height:42px; border-radius:13px;
  object-fit:contain; background:#fff; padding:3px;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
}
.pj-hero-logo{
  height:76px; width:auto; max-width:240px;
  object-fit:contain; margin-bottom:18px;
  background:#fff; border-radius:14px; padding:10px 14px;
  box-shadow:0 8px 26px rgba(0,0,0,.22);
}
@media (max-width:720px){
  .pj-hero-logo{ height:58px; max-width:180px; }
}
.pj-merek-teks{ display:flex; flex-direction:column; min-width:0; }
.pj-merek-teks b{
  font-family:var(--font-display); font-size:17px; font-weight:500;
  letter-spacing:-.3px; line-height:1.2; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .38s ease;
}
.pj-merek-teks small{
  font-size:11px; font-weight:600; letter-spacing:.7px; text-transform:uppercase;
  color:rgba(255,255,255,.66); transition:color .38s ease;
}
.pj-nav.mengambang .pj-merek-teks b{ color:var(--ink); }
.pj-nav.mengambang .pj-merek-teks small{ color:var(--aksen); }

.pj-menu{ display:flex; align-items:center; gap:4px; }
.pj-menu > a{
  position:relative; padding:9px 15px; border-radius:var(--r-sm);
  font-size:14.5px; font-weight:500; color:rgba(255,255,255,.88);
  transition:color .25s ease, background .25s ease;
}
.pj-menu > a::after{
  content:''; position:absolute; left:15px; right:15px; bottom:5px; height:2px;
  background:currentColor; border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease-pop);
}
.pj-menu > a:hover::after,
.pj-menu > a.aktif::after{ transform:scaleX(1); }
.pj-nav.mengambang .pj-menu > a{ color:var(--ink-2); }
.pj-nav.mengambang .pj-menu > a:hover,
.pj-nav.mengambang .pj-menu > a.aktif{ color:var(--aksen); }

.pj-menu-cta{
  margin-left:10px; padding:10px 20px !important;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.16); color:#fff !important;
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-weight:600 !important;
  transition:transform .28s var(--ease-pop), background .25s ease;
}
.pj-menu-cta::after{ display:none !important; }
.pj-menu-cta:hover{ background:rgba(255,255,255,.26); transform:translateY(-2px); }
.pj-nav.mengambang .pj-menu-cta{
  background:var(--aksen); border-color:transparent; color:#fff !important;
  box-shadow:0 5px 16px color-mix(in srgb, var(--aksen) 34%, transparent);
}

.pj-burger{ display:none; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:11px; }
.pj-burger span{ display:block; height:2px; background:#fff; border-radius:2px; transition:.3s var(--ease-pop); }
.pj-burger span + span{ margin-top:5px; }
.pj-nav.mengambang .pj-burger span{ background:var(--ink); }
.pj-burger.buka span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.pj-burger.buka span:nth-child(2){ opacity:0; }
.pj-burger.buka span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO PENUH LAYAR
   ============================================================ */
.pj-hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:120px;
  overflow:hidden;
}
/* inset diperlebar ke atas & bawah untuk memberi ruang gerak parallax
   (lihat blok PARALLAX di atas). Bingkainya, .pj-hero, sudah
   overflow:hidden sehingga kelebihannya tidak terlihat. */
.pj-hero-foto{ position:absolute; inset:-20% 0; z-index:-2; background:var(--aksen-gelap); }
.pj-hero-foto img{
  width:100%; height:100%; object-fit:cover; object-position:center 55%;
  animation:pjZoom 16s ease-out forwards;
}
@keyframes pjZoom{ from{ transform:scale(1);} to{ transform:scale(1.06);} }

.pj-hero-selubung{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--aksen-gelap) 72%, transparent) 0%,
      color-mix(in srgb, var(--aksen-gelap) 30%, transparent) 34%,
      color-mix(in srgb, var(--aksen-gelap) 62%, transparent) 68%,
      var(--aksen-gelap) 100%);
}

.pj-hero-isi{
  width:100%; max-width:1180px; margin-inline:auto; padding:0 32px 56px;
  color:#fff;
}
.pj-label{
  display:inline-block; margin-bottom:20px;
  padding:7px 18px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:12px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
}
.pj-hero h1{
  font-family:var(--font-display);
  font-size:clamp(31px, 4.4vw, 54px); font-weight:600; line-height:1.15;
  letter-spacing:-.8px; margin-bottom:18px;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
  max-width:16ch;
}
.pj-tagline{
  font-family:var(--font-display);
  font-size:clamp(17px, 1.8vw, 21px); font-weight:400; line-height:1.6;
  color:rgba(255,255,255,.93); margin-bottom:22px; max-width:32ch;
  text-shadow:0 1px 18px rgba(0,0,0,.36);
}
.pj-alamat{
  display:flex; align-items:flex-start; gap:9px;
  font-size:15.5px; line-height:24px; color:rgba(255,255,255,.8);
  margin-bottom:34px; max-width:52ch;
}
.pj-alamat svg{ width:19px; height:19px; flex-shrink:0; margin-top:2px; }

.pj-hero-cta{ display:flex; flex-wrap:wrap; gap:13px; }
.pj-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:14px 30px;
  border-radius:var(--r-pill); border:1px solid transparent;
  font-size:15.5px; font-weight:600;
  transition:transform .3s var(--ease-pop), background .25s ease, box-shadow .3s ease;
}
.pj-btn.utama{
  background:#fff; color:var(--aksen-gelap);
  box-shadow:0 10px 32px rgba(0,0,0,.28);
}
.pj-btn.utama:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.34); }
.pj-btn.kaca{
  background:rgba(255,255,255,.1); color:#fff;
  border-color:rgba(255,255,255,.3);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.pj-btn.kaca:hover{ background:rgba(255,255,255,.2); transform:translateY(-3px); }

/* ---------- bilah angka ---------- */
.pj-angka{
  position:relative; z-index:1;
  width:100%; max-width:1180px; margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.18);
}
.pj-angka > div{
  padding:26px 32px;
  border-right:1px solid rgba(255,255,255,.14);
  color:#fff;
}
.pj-angka > div:last-child{ border-right:0; }
.pj-angka b{
  display:block; font-family:var(--font-display);
  font-size:clamp(22px,2.3vw,29px); font-weight:600; line-height:1.25;
  letter-spacing:-.5px;
}
.pj-angka b i{ font-style:normal; font-size:14px; margin-left:3px; opacity:.7; }
.pj-angka span{
  display:block; margin-top:5px;
  font-size:12.5px; color:rgba(255,255,255,.68); font-weight:500;
}

/* ============================================================
   KERANGKA SEKSI
   ============================================================ */
.pj-sec{ padding:88px 0; }
.pj-eyebrow{
  display:inline-block; margin-bottom:14px;
  padding:6px 15px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--aksen) 10%, transparent);
  color:var(--aksen);
  font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
}
.pj-eyebrow.terang{ background:rgba(255,255,255,.16); color:#fff; }
.pj-kepala{ max-width:640px; margin-bottom:44px; }
.pj-kepala h2{
  font-family:var(--font-display);
  font-size:clamp(24px,2.6vw,34px); font-weight:600; line-height:1.25;
  letter-spacing:-.5px; color:var(--ink); margin-bottom:14px;
}
.pj-kepala p{ font-size:17px; line-height:29px; color:var(--ink-3); }
.pj-nota{ margin-top:16px; font-size:13.5px; color:var(--ink-4); }
.pj-nota a{ color:var(--aksen); font-weight:600; }

.pj-tentang{ padding-bottom:24px; }
.pj-lead{
  font-family:var(--font-display);
  font-size:clamp(18px,1.9vw,23px); font-weight:400; line-height:1.6;
  color:var(--ink); max-width:26ch; letter-spacing:-.5px;
}

.pj-kosong{
  padding:26px 28px; border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--aksen) 5%, var(--bg-alt));
  border:1.5px dashed color-mix(in srgb, var(--aksen) 26%, transparent);
  font-size:15.5px; line-height:26px; color:var(--ink-3); max-width:62ch;
}
.pj-kosong a{ color:var(--aksen); font-weight:600; text-decoration:underline; }

/* ============================================================
   KARTU TIPE UNIT
   ============================================================ */
.pj-unit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pj-unit{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:30px 28px 26px;
  border-radius:var(--r-xl);
  background:#fff;
  border:1.5px solid var(--line-2);
  transition:transform .45s var(--ease-out), box-shadow .4s ease, border-color .3s ease;
}
.pj-unit::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--aksen);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.pj-unit:hover{
  transform:translateY(-8px);
  border-color:transparent; box-shadow:var(--sh-lg);
}
.pj-unit:hover::before{ transform:scaleX(1); }

.pj-unit-atas{ margin-bottom:22px; }
.pj-unit-no{
  display:block; font-family:var(--font-display);
  font-size:13px; font-weight:600; letter-spacing:1.4px;
  color:var(--aksen); margin-bottom:9px;
}
.pj-unit h3{
  font-family:var(--font-display); font-size:23px; font-weight:500;
  line-height:1.24; color:var(--ink); letter-spacing:-.5px;
}
.pj-unit-catatan{
  display:inline-block; margin-top:10px;
  padding:4px 12px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--aksen) 9%, transparent);
  color:var(--aksen); font-size:12px; font-weight:600;
}

.pj-unit-spek{ display:grid; gap:0; margin-bottom:24px; }
.pj-unit-spek > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--line-2);
}
.pj-unit-spek > div:last-child{ border-bottom:0; }
.pj-unit-spek dt{ font-size:13.5px; color:var(--ink-4); }
.pj-unit-spek dd{
  font-family:var(--font-display); font-size:20px; font-weight:500;
  color:var(--ink); letter-spacing:-.4px;
}
.pj-unit-spek dd i{ font-style:normal; font-size:12px; margin-left:2px; color:var(--ink-4); }

.pj-unit-cta{
  margin-top:auto; text-align:center;
  padding:13px 20px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--aksen) 8%, transparent);
  color:var(--aksen); font-size:14.5px; font-weight:600;
  transition:background .28s ease, color .28s ease;
}
.pj-unit-cta:hover{ background:var(--aksen); color:#fff; }
.pj-unit-cta span{ transition:transform .3s var(--ease-pop); display:inline-block; }
.pj-unit-cta:hover span{ transform:translateX(4px); }

/* ============================================================
   GALERI
   ============================================================ */
.pj-galeri-sec{ padding-bottom:88px; background:var(--bg-alt); }
.pj-galeri{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
  padding-inline:32px; max-width:1400px; margin-inline:auto;
}
/* foto pertama dibuat lebih besar agar tata letaknya tidak monoton */
.pj-galeri .pj-foto:first-child{ grid-column:span 2; grid-row:span 2; }
.pj-foto{
  position:relative; margin:0; overflow:hidden; cursor:pointer;
  border-radius:var(--r-lg); background:var(--line-2);
  aspect-ratio:4/3;
}
.pj-galeri .pj-foto:first-child{ aspect-ratio:auto; min-height:340px; }
.pj-foto img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.pj-foto:hover img{ transform:scale(1.07); }
.pj-foto-zoom{
  position:absolute; inset:0; display:grid; place-content:center;
  background:color-mix(in srgb, var(--aksen-gelap) 42%, transparent);
  color:#fff; opacity:0; transition:opacity .35s ease;
}
.pj-foto-zoom svg{ width:34px; height:34px; }
.pj-foto:hover .pj-foto-zoom,
.pj-foto:focus-visible .pj-foto-zoom{ opacity:1; }

/* lightbox */
.pj-lightbox{
  position:fixed; inset:0; z-index:1500; display:none;
  place-items:center; padding:36px;
  background:rgba(12,12,18,.92);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.pj-lightbox.buka{ display:grid; animation:pjFade .3s ease; }
@keyframes pjFade{ from{ opacity:0 } to{ opacity:1 } }
.pj-lightbox img{
  max-width:100%; max-height:88vh; border-radius:var(--r-lg);
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  animation:pjPop .38s var(--ease-pop);
}
@keyframes pjPop{ from{ opacity:0; transform:scale(.94) } to{ opacity:1; transform:scale(1) } }
.pj-lb-tutup{
  position:absolute; top:22px; right:26px;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.14); border:0; color:#fff;
  font-size:28px; line-height:1; cursor:pointer;
  transition:background .25s ease, transform .3s var(--ease-pop);
}
.pj-lb-tutup:hover{ background:rgba(255,255,255,.26); transform:rotate(90deg); }

/* ============================================================
   AKSES & FASILITAS
   ============================================================ */
.pj-akses{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.pj-akses li{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:19px 24px; border-radius:var(--r-lg);
  background:#fff; border:1.5px solid var(--line-2);
  transition:border-color .28s ease, transform .3s var(--ease-out);
}
.pj-akses li:hover{
  border-color:color-mix(in srgb, var(--aksen) 40%, transparent);
  transform:translateX(4px);
}
.pj-akses-nama{ font-size:15.5px; color:var(--ink-2); }
.pj-akses-jarak{
  flex-shrink:0; padding:5px 15px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--aksen) 10%, transparent);
  color:var(--aksen); font-size:13.5px; font-weight:700;
}

/* ============================================================
   PETA
   ============================================================ */
.pj-peta{
  width:100%; aspect-ratio:16/7; min-height:340px;
  border-radius:var(--r-xl); overflow:hidden;
  background:var(--bg-alt); border:1.5px solid var(--line-2);
  z-index:0;
}
.pj-peta .leaflet-container{ width:100%; height:100%; font-family:var(--font); }
.pj-peta .leaflet-tile-pane{ filter:saturate(.7) brightness(1.03); }
.pj-peta .leaflet-control-zoom{ border:0; box-shadow:var(--sh-xs); border-radius:9px; overflow:hidden; }
.pj-peta .leaflet-control-zoom a{
  width:34px; height:34px; line-height:34px;
  color:var(--aksen); background:#fff; border:1px solid var(--line);
  font-size:18px; font-weight:600;
}
.pj-peta .leaflet-control-attribution{
  background:rgba(255,255,255,.88); font-size:10.5px; color:var(--ink-4);
}
.pj-pin{ position:relative; display:block; width:26px; height:26px; }
.pj-pin span{
  position:absolute; inset:0; margin:auto;
  width:17px; height:17px; border-radius:50%;
  background:var(--aksen); border:3px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}

/* ============================================================
   FORMULIR
   ============================================================ */
.pj-formulir{
  padding:88px 0;
  background:linear-gradient(150deg, var(--aksen-gelap) 0%, var(--aksen) 100%);
  color:#fff;
}
.pj-form-in{ display:grid; grid-template-columns:1fr .82fr; gap:56px; align-items:start; }
.pj-form-teks h2{
  font-family:var(--font-display);
  font-size:clamp(24px,2.5vw,33px); font-weight:600; line-height:1.25;
  letter-spacing:-.5px; color:#fff; margin-bottom:16px;
}
.pj-form-teks > p{
  font-size:16.5px; line-height:28px; color:rgba(255,255,255,.85);
  margin-bottom:32px; max-width:44ch;
}
.pj-kontak{ display:grid; gap:18px; }
.pj-kontak li{ display:grid; gap:4px; }
.pj-kontak b{
  font-size:11.5px; font-weight:700; letter-spacing:.9px;
  text-transform:uppercase; color:rgba(255,255,255,.58);
}
.pj-kontak a{
  font-size:17px; color:#fff; justify-self:start;
  border-bottom:1px solid rgba(255,255,255,.34);
  transition:border-color .22s ease;
}
.pj-kontak a:hover{ border-color:#fff; }

/* tombol kirim mengikuti warna kawasan */
.pj-formulir .btn-primary{ background:var(--aksen-gelap); color:#fff; }
.pj-formulir .btn-primary:hover{ background:var(--aksen); color:#fff; }

/* ============================================================
   FOOTER MANDIRI
   ============================================================ */
.pj-footer{
  padding:64px 0 34px;
  background:var(--aksen-gelap); color:rgba(255,255,255,.72);
}
.pj-footer-atas{
  display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between;
  padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.13);
}
.pj-footer-merek{ display:flex; align-items:center; gap:16px; }
.pj-footer-merek b{
  display:block; font-family:var(--font-display);
  font-size:21px; font-weight:500; color:#fff; letter-spacing:-.4px;
}
.pj-footer-merek span{ display:block; font-size:13.5px; line-height:21px; max-width:42ch; margin-top:3px; }
.pj-footer-kontak{ display:grid; gap:7px; align-content:center; }
.pj-footer-kontak a{
  font-size:14.5px; color:rgba(255,255,255,.82);
  transition:color .22s ease;
}
.pj-footer-kontak a:hover{ color:#fff; }

.pj-footer-lain{ padding:34px 0; border-bottom:1px solid rgba(255,255,255,.13); }
.pj-footer-judul{
  display:block; margin-bottom:18px;
  font-size:11.5px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.pj-lain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.pj-lain{
  display:grid; gap:5px; padding:20px 22px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  transition:background .3s ease, transform .38s var(--ease-out), border-color .3s ease;
}
.pj-lain:hover{
  background:rgba(255,255,255,.11); transform:translateY(-4px);
  border-color:rgba(255,255,255,.22);
}
.pj-lain-mono{
  display:inline-grid; place-content:center;
  width:38px; height:38px; margin-bottom:7px; border-radius:11px;
  background:var(--kartu, rgba(255,255,255,.15)); color:#fff;
  font-family:var(--font-display); font-size:13px; font-weight:500; letter-spacing:.5px;
}
.pj-lain b{ font-family:var(--font-display); font-size:16.5px; font-weight:500; color:#fff; }
.pj-lain-loc{ font-size:13px; color:rgba(255,255,255,.6); }

.pj-footer-bawah{
  display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;
  padding-top:26px;
}
.pj-oleh{ display:flex; align-items:center; gap:11px; }
.pj-oleh img{
  width:38px; height:38px; object-fit:contain;
  background:#fff; border-radius:9px; padding:3px;
}
.pj-oleh span{ font-size:13.5px; color:rgba(255,255,255,.66); }
.pj-oleh b{ color:#fff; font-weight:600; }
.pj-footer-bawah p{ font-size:12.5px; color:rgba(255,255,255,.45); }

/* ---------- tombol WhatsApp mengambang ---------- */
.pj-wa{
  position:fixed; right:22px; bottom:22px; z-index:800;
  display:flex; align-items:center; gap:10px;
  padding:14px 22px 14px 18px; border-radius:var(--r-pill);
  background:var(--aksen); color:#fff; font-size:15px; font-weight:600;
  box-shadow:0 10px 30px color-mix(in srgb, var(--aksen) 45%, transparent);
  transition:transform .3s var(--ease-pop), box-shadow .3s ease;
}
.pj-wa:hover{ transform:translateY(-4px) scale(1.03); }
.pj-wa svg{ width:20px; height:20px; }

/* ============================================================
   RESPONSIF
   ============================================================ */
@media (max-width:1024px){
  .pj-unit-grid{ grid-template-columns:repeat(2,1fr); }
  .pj-form-in{ grid-template-columns:1fr; gap:36px; }
  .pj-lain-grid{ grid-template-columns:1fr; }
  .pj-galeri{ grid-template-columns:repeat(2,1fr); }
  .pj-galeri .pj-foto:first-child{ grid-column:span 2; min-height:300px; }
}

@media (max-width:768px){
  .pj-wrap, .pj-nav-in, .pj-hero-isi{ padding-inline:24px; }
  .pj-burger{ display:block; }

  .pj-menu{
    position:fixed; top:64px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:3px;
    padding:18px 24px 26px;
    background:#fff; box-shadow:var(--sh-sm);
    clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
    transition:clip-path .42s var(--ease-pop), opacity .3s ease;
  }
  .pj-menu.buka{ clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; }
  .pj-menu > a{ padding:13px 14px; font-size:16px; color:var(--ink-2); }
  .pj-menu > a::after{ display:none; }
  .pj-menu-cta{
    margin-left:0; margin-top:8px; text-align:center;
    background:var(--aksen); border-color:transparent;
  }

  .pj-hero{ min-height:88svh; padding-top:100px; }
  .pj-hero-isi{ padding-bottom:40px; }
  .pj-angka{ grid-template-columns:repeat(2,1fr); }
  .pj-angka > div{ padding:20px 24px; border-bottom:1px solid rgba(255,255,255,.14); }
  .pj-angka > div:nth-child(2n){ border-right:0; }

  .pj-sec{ padding:64px 0; }
  .pj-unit-grid{ grid-template-columns:1fr; }
  .pj-akses{ grid-template-columns:1fr; }
  .pj-galeri{ grid-template-columns:1fr; padding-inline:24px; }
  .pj-galeri .pj-foto:first-child{ grid-column:span 1; min-height:0; aspect-ratio:4/3; }
  .pj-formulir{ padding:64px 0; }
  .pj-footer-atas{ flex-direction:column; gap:22px; }
  .pj-peta{ aspect-ratio:4/3; }
  .pj-wa span{ display:none; }
  .pj-wa{ padding:16px; }
}

@media (max-width:480px){
  .pj-wrap, .pj-nav-in, .pj-hero-isi{ padding-inline:16px; }
  .pj-galeri{ padding-inline:16px; }
  .pj-hero-cta .pj-btn{ width:100%; }
  .pj-merek-teks b{ font-size:15px; max-width:44vw; }
}

/* ============================================================
   HORMATI PREFERENSI GERAK
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .pj-hero-foto img{ animation:none; }
}

/* ============================================================
   PENETRALAN PARALLAX — prefers-reduced-motion

   Sengaja diletakkan paling akhir: aturan .pj-hero-foto asli berada
   jauh di atas dengan spesifisitas yang sama, sehingga penetralan
   hanya berlaku bila ditulis belakangan.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .pj-hero-foto, .pj-foto-dalam{
    transform:none !important; will-change:auto;
  }
  .pj-hero-foto{ inset:0; }
  .pj-foto-dalam{ inset:0; }
}