/*
    site.css — LAVEAS
    -------------------
    Dipindahkan langsung dari mockup yang sudah disetujui tim
    (mockup/laveas-look-2.html, Look 2), tanpa mengubah satu warna pun.

    Bedanya dari mockup:
      - Foto dummy base64 (stok Unsplash) TIDAK ikut dipindahkan — foto asli
        di produksi datang dari URL yang diunggah lewat CMS, bukan data URI
        raksasa yang ditempel ke CSS. Lihat kelas .photo di bagian bawah.
      - Router hash (.page/.page.active) tidak dipakai — navigasi server-side
        biasa (setiap halaman = request baru), jadi aturan itu dihapus.

    ================================================================
    2026-09 — BERANDA diganti mengikuti Mockup 2 (mockup/laveas-adex-3.html).
    Header & footer (shared di semua halaman) ikut diganti. BADAN halaman lain
    (Layanan, Kualitas & Workshop, Kontak) BELUM digarap ulang — masih pakai
    kelas & gaya lama, jadi kelas-kelas itu TETAP ada di file ini walau tidak
    lagi dipakai Beranda. Lihat blok "BERANDA BARU" di bagian bawah file
    untuk semua kelas yang diperkenalkan lewat Mockup 2.

    FONT JUDUL: Playfair Display sudah PENSIUN di seluruh situs — semua judul
    memakai --judul (Plus Jakarta Sans). Dipasang lewat aturan global h1,h2,h3
    supaya halaman BARU otomatis ikut tanpa perlu ditambal satu per satu.
    ================================================================
*/

:root{
  /* ====== Palet resmi LAVEAS — Look 2 · 5 warna dasar ====== */
  --ivory:#F4F1EA;      /* Warm Ivory      · 60% · latar belakang / dominan */
  --lavender:#B7C1AA;   /* Soft Olive      · 20% · warna sekunder */
  --mauve:#C8BFB6;      /* Greige          · 10% · aksen pendukung */
  --taupe:#A3B49A;      /* Sage            ·  7% · teks netral / detail */
  --plum:#3B3B3B;       /* Deep Charcoal   ·  3% · teks utama / aksen tegas */

  /* ====== Aksen tambahan — coklat kayu untuk brand furniture/interior ====== */
  --walnut:#7C5940;
  --walnut-tint: color-mix(in srgb, var(--ivory) 82%, var(--walnut) 18%);
  --walnut-line: rgba(124,89,64,.32);

  /* ====== Turunan — HANYA campuran/opacity dari warna di atas ====== */
  --ivory-deep: color-mix(in srgb, var(--ivory) 88%, var(--taupe) 12%);
  --surface: var(--ivory);
  --lavender-tint: color-mix(in srgb, var(--ivory) 85%, var(--lavender) 15%);
  --lavender-line: rgba(183,193,170,.35);
  --taupe-line: rgba(163,180,154,.28);
  --plum-deep: var(--plum);
  --plum-ink: var(--plum);
  --plum-cta: color-mix(in srgb, var(--plum) 85%, var(--walnut) 15%);
  --on-plum: var(--ivory);
  --on-plum-muted: rgba(244,241,234,.68);
  --lavender-on-dark: var(--lavender);

  /* --judul dipakai SEMUA judul di situs (h1,h2,h3 dan turunannya). Dulu ada
     dua: Playfair Display untuk halaman lama, Plus Jakarta Sans khusus
     Beranda. Playfair kini pensiun total supaya satu keluarga huruf saja —
     dan supaya halaman BARU otomatis ikut tanpa perlu ditambal satu per satu.
     Namanya --judul (bukan --judul-beranda seperti sebelumnya) karena
     cakupannya sudah sesitus, bukan cuma Beranda. */
  --judul: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --sans: "Montserrat", "Segoe UI", Arial, sans-serif;

  --maxw: 1180px;
  --radius: 2px;

  /* ====== Token BARU untuk Beranda (Mockup 2) ======
     --sage-ink/--sage-ink-dark BUKAN warna baru sembarangan — ini rekomendasi
     resmi dari PALET-WARNA-LAVEAS.html sendiri (bagian "Catatan Penting"):
     Sage (--taupe) digelapkan supaya teks di atasnya lolos kontras AA
     (4,63:1), karena --taupe asli cuma 1,95:1 kalau dipakai sebagai teks.
     Semua warna LAIN yang dipakai Beranda baru sudah ada di atas dengan nama
     berbeda tapi hex sama (sage=taupe, charcoal=plum, greige=mauve,
     olive=lavender) — dipakai ulang lewat nama yang sudah ada, bukan
     didobelkan di sini. */
  /* Audit SEO 1 Nov 2026: SEMUA teks kecil yang tadinya memakai --taupe
     (breadcrumb, eyebrow, label meta, keterangan foto, label kartu proyek)
     dipindah ke --sage-ink. --taupe tetap untuk garis, latar, & hiasan besar.
     Kontras rendah dinilai Lighthouse/aksesibilitas — sinyal kualitas halaman. */
  --sage-ink:#5F7255;
  --sage-ink-dark:#4A5C41;
  --body-beranda:#696867;      /* teks isi Beranda baru — charcoal 75%, 4,93:1 */
  --radius-baru:16px;
  --radius-baru-sm:10px;
  --pill:999px;
  --shadow-baru:0 20px 44px -26px rgba(59,59,59,.5);
  --shadow-baru-lembut:0 10px 26px -18px rgba(59,59,59,.45);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--plum-ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--plum); outline-offset:3px; }

h1,h2,h3{
  font-family:var(--judul);
  font-weight:600;
  color:var(--plum);
  margin:0;
  text-wrap:balance;
  letter-spacing:.005em;
}
h1 em, h2 em, h3 em{ font-style:italic; font-weight:500; color:var(--walnut); }
p{ margin:0; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:clamp(20px, 5vw, 56px); }

.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sage-ink);
}

.notice{
  background:var(--plum-deep); color:var(--on-plum-muted);
  font-size:.78rem; letter-spacing:.02em; text-align:center; padding:8px 16px;
}
.notice strong{ color:var(--ivory); font-weight:600; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.05em; text-decoration:none; text-transform:uppercase;
  padding:12px 24px; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--plum-cta); color:var(--on-plum); }
.btn-primary:hover{ background:var(--plum-deep); }
.btn-outline{ border-color:var(--plum); color:var(--plum); background:transparent; }
.btn-outline:hover{ background:var(--plum); color:var(--on-plum); }
.btn-ghost-light{ border-color:rgba(244,241,234,.5); color:var(--on-plum); background:transparent; }
.btn-ghost-light:hover{ background:rgba(244,241,234,.12); }
.btn-sm{ padding:9px 18px; font-size:.72rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.mobile-menu{ display:none; flex-direction:column; border-top:1px solid var(--taupe-line); background:var(--ivory); }
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  padding:15px clamp(20px,5vw,56px); font-size:.92rem; font-weight:500; letter-spacing:.02em;
  text-decoration:none; color:var(--plum-ink); border-bottom:1px solid var(--taupe-line);
}
.mobile-menu a:active{ background:var(--lavender-tint); }
.mobile-menu a.active-link{ color:var(--plum); border-color:var(--lavender); font-weight:600; }

section[id]{ scroll-margin-top: 76px; }

.page-head{ padding-block: clamp(48px,6vw,76px) clamp(28px,4vw,44px); }
.page-head .eyebrow{ display:block; margin-bottom:14px; }
.page-head h1{ font-size:clamp(2rem,3.6vw,2.9rem); max-width:28ch; }
.page-head p.lede{ margin-top:18px; color:var(--plum-ink); font-size:.98rem; max-width:58ch; line-height:1.75; }

/* ---------- varian kepala halaman: label kecil sebagai H1 ----------
   Dipakai halaman Portofolio, yang judul besarnya dihapus sehingga label
   "PORTOFOLIO" naik pangkat jadi <h1>. Tampilannya harus tetap label kecil,
   jadi ukuran & batas lebar bawaan .page-head h1 dinetralkan di sini. */
.page-head h1.eyebrow-judul{
  font-size:.72rem; max-width:none; font-weight:600; line-height:1.4;
}

/* Paragraf pembuka mengikuti lebar layar (batas 58ch dilepas) dan rata
   kanan-kiri. hyphens:auto penting: tanpa pemenggalan kata, teks justify
   melebar begitu akan menyisakan celah antarkata yang menganga -- halaman
   sudah lang="id" sehingga pemenggalannya mengikuti kaidah bahasa Indonesia.
   SENGAJA lewat kelas .page-head-lebar, bukan aturan dasar .page-head:
   dipakai KHUSUS bagian Portofolio (halaman daftar + halaman studi kasus),
   sementara Layanan/Kualitas & Workshop/Kontak tetap seperti semula. */
.page-head-lebar p.lede{ max-width:none; text-align:justify; hyphens:auto; }

/* Cerita Tantangan & Solusi di halaman studi kasus ikut rata kanan-kiri
   supaya seluruh teks bacaan di bagian Portofolio seragam. Kolomnya lebih
   sempit (dua kolom), jadi hyphens:auto di sini lebih penting lagi.

   white-space:pre-line mengikuti pola .hero p — baris kosong yang diketik
   admin di CMS ikut tampil sebagai paragraf baru. Tanpa ini, cerita yang
   ditulis beberapa paragraf akan menyatu jadi satu blok teks panjang yang
   berat dibaca. */
.story-grid p{ text-align:justify; hyphens:auto; white-space:pre-line; }
.page-head .breadcrumb{ display:flex; gap:8px; align-items:center; margin-bottom:20px; font-size:.78rem; color:var(--sage-ink); }
.breadcrumb a{ text-decoration:none; color:var(--sage-ink); }
.breadcrumb a:hover{ color:var(--plum); }
.breadcrumb .sep{ opacity:.5; }

.detail-top{ background:var(--surface); }

/* Varian rapat: .page-head sudah punya padding-block sendiri, jadi kalau
   dibungkus <section> yang juga kena aturan umum section{padding-block},
   ruang kosongnya jadi dobel. Di halaman yang kepalanya panjang (H1 besar +
   paragraf) tumpukan itu masih terbaca sebagai ruang napas, tapi di halaman
   Portofolio -- yang judul besarnya sudah dihapus dan tersisa label kecil --
   yang tampak hanya bidang kosong. Kelas ini SENGAJA opt-in, bukan aturan
   dasar .detail-top: Layanan/Kualitas & Workshop/Status/Error tetap seperti
   semula. */
.detail-top-rapat{ padding-block:0; }
/* Kepala halaman studi kasus: jarak ke foto pertama cukup margin foto itu
   sendiri (40px, .foto-utama / .compare-grid). Tanpa ini, padding bawah
   section{} (hingga 108px) + padding .page-head (28px) + margin foto
   menumpuk jadi ~150px antara tombol Instagram dan foto utama. Latar
   kepala sama dengan latar halaman, jadi tidak ada pita warna terpotong. */
.detail-top-proyek, .detail-top-proyek .page-head{ padding-bottom:0; }
/* Flex, bukan 5 kolom tetap: isiannya opsional (2–5 keping). Dengan kolom
   tetap, proyek berisian 2 keping tetap dijatah 1/5 lebar per keping —
   "Fatmawati, Jakarta Selatan" turun ke baris kedua padahal sisi kanannya
   kosong. Kini tiap keping selebar isinya, berjarak sama, rapat kiri. */
.meta-grid{
  display:flex; flex-wrap:wrap; gap:20px clamp(40px,6vw,88px);
  padding-block:26px; border-top:1px solid var(--taupe-line); border-bottom:1px solid var(--taupe-line);
  margin-top:36px;
}
.meta-grid div{ display:flex; flex-direction:column; gap:6px; }
.meta-grid b{ font-family:var(--judul); color:var(--plum); font-size:1.02rem; font-weight:600; }
.meta-grid span{ font-size:.68rem; color:var(--sage-ink); letter-spacing:.06em; text-transform:uppercase; }

.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:40px; }
.compare-grid .ph{ aspect-ratio:4/3; }
/* Label di pojok foto sebelum/sesudah. Untuk proyek desain, label inilah yang
   memberi tahu pengunjung bahwa gambar kanan adalah visualisasi, bukan foto
   hasil pemasangan. Latar gelap transparan supaya terbaca di foto terang
   maupun gelap. */
.banding{ position:relative; margin:0; border-radius:var(--radius); overflow:hidden; }
.banding figcaption{
  position:absolute; left:12px; top:12px; padding:5px 11px; border-radius:999px;
  background:rgba(43,43,43,.72); color:#fff; font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}

.story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); margin-top:56px; }
.story-grid .eyebrow{ display:block; margin-bottom:12px; }
.story-grid h2{ font-size:1.25rem; }
/* "pretty", bukan "balance" warisan h1-h3: balance menyamakan panjang dua
   baris, sehingga baris pertama judul Solusi sengaja dipendekkan dan tampak
   seperti di-enter. pretty mengisi baris sewajarnya, hanya menghindari satu
   kata yatim di baris terakhir. */
.story-grid h2{ text-wrap:pretty; }
.story-grid p{ margin-top:14px; color:var(--plum-ink); font-size:.92rem; line-height:1.8; }
/* Poin cerita (CeritaHelper): baris "- …" dari CMS. Penanda titik kecil
   berwarna sage, bukan bullet bawaan, supaya senada dengan eyebrow di atasnya;
   label "Desain Menyatu:" ditebalkan agar daftar mudah dipindai. */
.story-grid .poin-cerita{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.story-grid .poin-cerita li{ position:relative; padding-left:18px; color:var(--plum-ink); font-size:.92rem; line-height:1.75; }
.story-grid .poin-cerita li::before{ content:""; position:absolute; left:2px; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--sage-ink); }
.story-grid .poin-cerita b{ color:var(--plum); font-weight:600; }

/* Foto sampul sebagai foto pembuka — hanya untuk proyek tanpa pasangan
   sebelum/sesudah. 16:9 memotong foto potret ke bagian tengahnya; foto
   utuhnya tetap ada di galeri. */
.foto-utama{ margin:40px 0 0; }
.foto-utama .ph{ aspect-ratio:16/9; }

/* ---------- Galeri bertahap: Sketsa 3D / Render / Foto Hasil Pekerjaan ----------
   Satu tab = satu format gambar, jadi grid tidak lagi "naik-turun":
   sketsa & render lanskap 4:3 dua kolom, foto asli potret 3:4 tiga kolom.
   object-fit:cover pada .ph memotong ke kotak seragam; gambar utuhnya
   terlihat saat diperbesar (zoom). */
.proses-proyek{ margin-top:72px; }
.proses-proyek .eyebrow{ display:block; }
.proses-proyek h2{ font-size:clamp(1.7rem,2.6vw,2.35rem); margin-top:10px; text-wrap:pretty; }
.tab-tahap{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 clamp(20px,3vw,28px); }
.tab-tahap-btn{
  display:inline-flex; align-items:center; gap:9px; padding:9px 16px 9px 9px;
  border:1px solid var(--taupe-line); border-radius:999px; background:transparent;
  color:var(--plum); font-family:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.tab-tahap-btn:hover{ border-color:var(--plum); }
.tab-tahap-btn:focus-visible{ outline:2px solid var(--plum); outline-offset:2px; }
.tab-tahap-no{
  width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--taupe-line); font-size:.74rem;
}
.tab-tahap-jumlah{ font-size:.74rem; font-weight:500; color:var(--sage-ink); }
.tab-tahap-btn.aktif{ background:var(--plum); border-color:var(--plum); color:var(--ivory); }
.tab-tahap-btn.aktif .tab-tahap-no{ background:var(--ivory); color:var(--plum); }
.tab-tahap-btn.aktif .tab-tahap-jumlah{ color:rgba(244,241,234,.75); }
/* Tanpa .siap (JavaScript mati) semua panel tampil bertumpuk; panel
   berikutnya diberi jarak supaya tetap terbaca sebagai bagian terpisah. */
.panel-tahap{ padding-block:0; }
.panel-tahap + .panel-tahap{ margin-top:40px; }
.proses-proyek.siap .panel-tahap{ margin-top:0; }
.proses-proyek.siap .panel-tahap:not(.aktif){ display:none; }
.grid-tahap{ display:grid; gap:16px; }
.panel-lanskap .grid-tahap{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.panel-potret .grid-tahap{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-tahap figure{ margin:0; }
.panel-lanskap .ph{ aspect-ratio:4/3; }
.panel-potret .ph{ aspect-ratio:3/4; }
.grid-tahap figcaption{ margin-top:8px; font-size:.8rem; color:var(--sage-ink); line-height:1.55; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Zoom foto halaman studi kasus (lihat "Zoom foto" di site.js) ---------- */
img.bisa-zoom{ cursor:zoom-in; }
img.bisa-zoom:focus-visible{ outline:2px solid var(--plum); outline-offset:3px; }
html.zoom-kunci, html.zoom-kunci body{ overflow:hidden; }
.zoom-lapisan{
  position:fixed; inset:0; z-index:1000; display:none;
  background:#161614; color:#fff; /* pekat: teks halaman di belakang tidak boleh ikut terbaca */
}
.zoom-lapisan.terbuka{ display:block; }
.zoom-bingkai{
  position:absolute; inset:56px 0 84px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding-inline:clamp(8px,6vw,72px);
}
/* touch-action:none: sentuhan di foto diurus pointer event (ketuk, geser,
   usap), bukan dipakai peramban untuk menggulir halaman di belakangnya. */
.zoom-bingkai img{
  max-width:100%; max-height:100%; object-fit:contain; user-select:none;
  touch-action:none; cursor:zoom-in; transform-origin:center center; will-change:transform;
}
.zoom-lapisan.diperbesar .zoom-bingkai img{ cursor:grab; }
.zoom-tutup, .zoom-nav{
  position:absolute; z-index:2; border:0; background:rgba(255,255,255,.12); color:#fff;
  border-radius:999px; cursor:pointer; line-height:1; font-family:inherit;
}
.zoom-tutup{ top:10px; right:12px; width:40px; height:40px; font-size:1.6rem; }
.zoom-nav{ top:50%; transform:translateY(-50%); width:44px; height:44px; font-size:1.8rem; }
.zoom-sebelum{ left:12px; }
.zoom-berikut{ right:12px; }
.zoom-tutup:hover, .zoom-nav:hover{ background:rgba(255,255,255,.24); }
.zoom-lapisan.diperbesar .zoom-nav{ display:none; }
.zoom-bawah{ position:absolute; left:0; right:0; bottom:0; padding:12px 20px 20px; text-align:center; }
.zoom-hitung{ font-size:.72rem; letter-spacing:.1em; opacity:.7; }
.zoom-ket{ margin:6px auto 0; max-width:70ch; font-size:.84rem; line-height:1.5; opacity:.92; }
/* Di ponsel tombol panah disembunyikan: usap kiri/kanan lebih alami, dan
   panah menutupi tepi foto yang sudah sempit. */
@media (max-width:600px){ .zoom-nav{ display:none; } }

/* Pita di atas halaman pratinjau draft (lihat PratinjauProyek). */
.pita-pratinjau{ margin:0 0 18px; padding:10px 14px; border:1px dashed var(--walnut); border-radius:var(--radius); background:var(--surface); color:var(--plum); font-size:.86rem; }

/* Tombol ke unggahan Instagram/TikTok proyek (lihat db/47). */
.tautan-medsos{
  display:inline-flex; align-items:center; gap:9px; margin-top:22px;
  padding:10px 18px; border:1px solid var(--taupe-line); border-radius:999px;
  color:var(--plum); font-size:.86rem; font-weight:600; text-decoration:none;
  transition:border-color .15s ease, background .15s ease;
}
.tautan-medsos:hover{ border-color:var(--plum); background:rgba(255,255,255,.5); }
.tautan-medsos svg{ width:18px; height:18px; flex:none; }

.detail-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px; }
.detail-gallery .ph{ aspect-ratio:1/1; }
.detail-gallery figcaption{ margin-top:8px; font-size:.76rem; color:var(--sage-ink); text-align:center; }

.spec-table{ width:100%; border-collapse:collapse; margin-top:28px; font-size:.88rem; }
.spec-table th, .spec-table td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--taupe-line); }
.spec-table th{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sage-ink); font-weight:600; width:32%; }
.spec-table td{ color:var(--plum-ink); }

.cta-banner{
  background:var(--lavender-tint); border:1px solid var(--lavender-line); border-radius:var(--radius);
  padding:clamp(28px,4vw,48px); display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-top:64px;
}
/* Dua tombol berdampingan di banner CTA. flex:none supaya blok tombol tidak
   ikut menyusut saat teks di kirinya panjang; membungkus ke bawah di layar
   sempit mengikuti flex-wrap milik .cta-banner. */
.cta-aksi{ display:flex; gap:12px; flex-wrap:wrap; flex:none; }
/* h2 DAN h3: banner ini dipakai di tiga halaman dengan tingkat heading
   berbeda — studi kasus memakai h2, Layanan & Kualitas memakai h3. Selektor
   yang hanya menyebut satu tingkat membuat judul banner di halaman lain
   jatuh ke ukuran bawaan peramban (pernah terjadi: 18,72px, bukan 20,48px). */
.cta-banner h2, .cta-banner h3{ font-size:1.28rem; max-width:36ch; }
.cta-banner p{ margin-top:8px; color:var(--sage-ink); font-size:.86rem; }

.related-head{ margin-top:72px; margin-bottom:24px; }
.related-head span{ display:block; }
.related-head h2{ font-size:1.3rem; margin-top:8px; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

.load-more{ display:flex; justify-content:center; margin-top:44px; }

.deliverable-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
.deliverable{
  border:1px solid var(--taupe-line); background:var(--surface); padding:24px 22px;
  border-radius:var(--radius); display:flex; flex-direction:column; gap:12px;
}
.deliverable svg{ width:26px; height:26px; color:var(--plum); }
.deliverable b{ font-family:var(--judul); color:var(--plum); font-size:1rem; font-weight:600; }
.deliverable span{ font-size:.82rem; color:var(--sage-ink); line-height:1.6; }

.payment-box{
  background:var(--plum-deep); color:var(--on-plum); border-radius:var(--radius);
  padding:clamp(28px,4vw,44px); display:flex; gap:22px; align-items:flex-start; margin-top:56px;
}
.payment-box svg{ width:26px; height:26px; color:var(--lavender-on-dark); flex:none; margin-top:2px; }
.payment-box h3{ color:var(--on-plum); font-size:1.15rem; }
.payment-box p{ margin-top:10px; color:var(--on-plum-muted); font-size:.88rem; line-height:1.75; max-width:60ch; }

.compare-table{ width:100%; border-collapse:collapse; margin-top:32px; }
.compare-table th, .compare-table td{ padding:14px 16px; border-bottom:1px solid var(--taupe-line); font-size:.86rem; text-align:left; }
.compare-table th{ font-family:var(--judul); color:var(--plum); font-size:.98rem; font-weight:600; }
.compare-table .no{ color:var(--sage-ink); text-decoration:line-through; opacity:.75; }
.compare-table .yes{ color:var(--plum-ink); font-weight:500; }

.swatch-row{ display:flex; gap:18px; flex-wrap:wrap; margin-top:36px; }
.swatch{ width:130px; }
.swatch .ph{ aspect-ratio:1/1; }
.swatch span{ display:block; margin-top:9px; font-size:.78rem; color:var(--sage-ink); text-align:center; }

.workshop-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.workshop-gallery .ph{ aspect-ratio:4/3; }
.workshop-gallery .ph:first-child{ grid-column:1/3; aspect-ratio:16/9; }

.stat-row{ display:flex; gap:clamp(28px,5vw,64px); margin-top:44px; flex-wrap:wrap; }
.stat-row div{ display:flex; flex-direction:column; gap:4px; }
.stat-row b{ font-family:var(--judul); font-size:2rem; color:var(--plum); font-weight:600; }
.stat-row span{ font-size:.76rem; color:var(--sage-ink); letter-spacing:.03em; }

.kontak-page .booking{ background:var(--plum-deep); }
.faq{ margin-top:20px; }
.faq-item{ border-top:1px solid rgba(244,241,234,.16); padding:22px 0; }
.faq-item:last-child{ border-bottom:1px solid rgba(244,241,234,.16); }
.faq-item b{ display:block; font-family:var(--judul); color:var(--on-plum); font-size:1.02rem; margin-bottom:8px; font-weight:600; }
.faq-item p{ font-size:.86rem; color:var(--on-plum-muted); line-height:1.75; }
.faq-item.light b{ color:var(--plum); }
.faq-item.light p{ color:var(--plum-ink); }
.faq-item.light{ border-color:var(--taupe-line); }

/* .hero-actions dipakai Shared/Error.cshtml (tombol "Kembali ke Beranda") —
   TETAP, walau .hero lama (di bawah, dulu dipakai Beranda) sudah diganti. */
.hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

.ph{
  position:relative;
  background:
    radial-gradient(130% 90% at 12% 8%, var(--walnut-tint), transparent 62%),
    radial-gradient(120% 90% at 88% 92%, color-mix(in srgb, var(--ivory) 78%, var(--taupe) 22%), transparent 60%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--ivory) 90%, var(--walnut) 10%) 0%,
      color-mix(in srgb, var(--ivory) 76%, var(--walnut) 24%) 100%);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; align-items:flex-end;
}
/* Tekstur serat kayu — aksen dekoratif untuk placeholder "foto belum ada" */
.ph::before{
  content:"";
  position:absolute; inset:0;
  opacity:.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='64' viewBox='0 0 220 64'%3E%3Cg fill='none' stroke='%237C5940' stroke-width='0.8' stroke-linecap='round'%3E%3Cpath d='M-10 8 Q45 -2 110 8 T230 8' opacity='0.30'/%3E%3Cpath d='M-10 20 Q45 12 110 20 T230 20' opacity='0.22'/%3E%3Cpath d='M-10 34 Q45 24 110 34 T230 34' opacity='0.28'/%3E%3Cpath d='M-10 46 Q45 38 110 46 T230 46' opacity='0.20'/%3E%3Cpath d='M-10 58 Q45 50 110 58 T230 58' opacity='0.24'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 64px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
}
/* position:absolute (bukan mengandalkan flex parent) — .ph-tag harus tetap
   terlihat baik saat jadi satu-satunya anak (placeholder) MAUPUN bersebelahan
   dengan <img> (foto asli, lihat FotoHelper.Ph). Flex layout hanya bekerja
   untuk kasus pertama; begitu <img> muncul sebagai saudara elemen, keduanya
   berebut ruang di baris yang sama dan ph-tag jadi terhimpit tak terlihat. */
.ph .ph-tag{
  position:absolute; z-index:1; left:16px; bottom:16px;
  padding:8px 14px;
  background:rgba(244,241,234,.88);
  backdrop-filter:blur(2px);
  border-radius:var(--radius);
  font-size:.68rem; letter-spacing:.04em; color:var(--plum-ink);
  display:flex; align-items:center; gap:8px;
}
.ph .ph-tag svg{ width:13px; height:13px; opacity:.6; }

/* Foto ASLI (dari CMS/upload) — menggantikan placeholder .ph sepenuhnya
   begitu URL foto ada, tanpa gradient/tekstur dekoratif di baliknya. */
.ph.has-photo{ background:var(--surface); }
.ph.has-photo::before{ display:none; }
.ph img{ width:100%; height:100%; object-fit:cover; }

section{ padding-block: clamp(64px,8vw,108px); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(36px,5vw,56px); flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.7rem,2.6vw,2.35rem); margin-top:10px; }
.section-head .desc{ max-width:44ch; color:var(--sage-ink); font-size:.92rem; line-height:1.7; }
.section-head .right{ max-width:360px; }

/* .service-grid & .svc* dipakai Layanan/Index.cshtml (bukan cuma Beranda
   lama) — TETAP. .services (wrapper section Beranda lama) sudah tidak
   dipakai lagi, dihapus. */
.service-grid{ display:grid; grid-template-columns: 1.35fr 1fr 1fr; gap:22px; }
.svc{ border:1px solid var(--taupe-line); background:var(--ivory); padding:clamp(26px,3vw,38px); display:flex; flex-direction:column; gap:18px; border-radius:var(--radius); }
.svc.featured{ background:linear-gradient(165deg, var(--lavender-tint), var(--ivory) 70%); border-color:var(--lavender-line); }
.svc .icon{ width:40px; height:40px; color:var(--plum); }
/* Badge "Paling Diminati" — highlight positif (bukan "utama/tambahan" yang
   berkesan hierarki), meniru pola umum kompetitor: Best Seller/Populer. */
.svc .badge-diminati{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  background:var(--walnut); color:var(--ivory); font-size:.66rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px;
}
.svc .kicker{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-ink); font-weight:600; }
/* h2 untuk nama layanan sejak hierarki heading diperbaiki; h3 tetap disebut
   supaya kartu .svc yang mungkin dipakai di tempat lain tidak ikut berubah
   ukuran — pelajaran dari regresi .cta-banner. */
.svc h2, .svc h3{ font-size:1.3rem; }

/* ---------- Tahapan pengerjaan (halaman Layanan) ----------
   Enam langkah bernomor sejak revisi Nov 2026 (langkah 6: pembayaran
   bertahap) — 3 kolom × 2 baris; 5 kolom lama membuat 6 kartu menyisakan
   satu kartu yatim di baris kedua. Nomor dari CSS counter, bukan ditulis di
   markup, supaya <ol> tetap daftar berurutan yang bersih bagi pembaca layar. */
.alur{ list-style:none; margin:0; padding:0; counter-reset:langkah; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.alur li{ counter-increment:langkah; background:var(--surface); border:1px solid var(--taupe-line); border-radius:var(--radius); padding:20px 18px; }
.alur li::before{ content:counter(langkah, decimal-leading-zero); display:block; font-family:var(--judul); font-weight:700; font-size:1.05rem; color:var(--sage-ink); margin-bottom:10px; }
.alur h3{ font-size:1.02rem; line-height:1.35; }
.alur p{ margin-top:8px; font-size:.86rem; line-height:1.6; color:var(--sage-ink); }

/* ---------- Contoh hasil kerja (halaman Layanan) ----------
   Grid sendiri, bukan .proj-grid: yang ini selalu 4 kartu (satu per
   kategori), .proj-grid dirancang 3 kolom untuk halaman Portofolio. */
/* Kolom = jumlah kategori (--jumlah-contoh di Layanan/Index), maksimal 5. */
.contoh-grid{ display:grid; grid-template-columns:repeat(min(var(--jumlah-contoh,4),5),1fr); gap:18px; }
.tautan-semua{ display:inline-block; margin-top:8px; font-weight:600; color:var(--sage-ink); text-decoration:none; }
.tautan-semua:hover{ text-decoration:underline; }
.svc p.desc{ color:var(--plum-ink); font-size:.9rem; line-height:1.7; }
.svc ul{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.svc li{ font-size:.83rem; color:var(--plum-ink); display:flex; gap:10px; align-items:flex-start; }
.svc li svg{ width:13px; height:13px; margin-top:3px; flex:none; color:var(--mauve); }

.portfolio{ background:var(--ivory); }

/* ---------- kelompok kategori (pengganti deretan tombol filter) ----------
   Proyek tidak lagi disaring lewat tombol; semuanya tampil dalam satu halaman,
   dipisah per kategori dengan judul <h2>. Garis tipis di bawah judul memberi
   irama seperti rubrik majalah, sekaligus menandai batas antar kelompok tanpa
   perlu kotak atau latar tambahan. */
/* Tiap kelompok kategori memakai <section> supaya punya id sendiri untuk
   ditautkan breadcrumb. Efek sampingnya: ia ikut mewarisi aturan umum
   section{padding-block:clamp(64px,8vw,108px)} di atas, padahal ini section
   di DALAM section -- padding warisan itu bertumpuk dengan jarak antar-kelompok
   sehingga celahnya sampai ~284px di layar lebar. Padding warisan dimatikan;
   jarak antar-kelompok diatur satu pintu lewat margin di bawah ini. */
.kelompok-proyek{ padding-block:0; }
.kelompok-proyek + .kelompok-proyek{ margin-top:clamp(48px,6vw,76px); }
.kelompok-kepala{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:14px; margin-bottom:26px; border-bottom:1px solid var(--taupe-line);
}
/* h3 sejak portofolio bertingkat jenis → kategori; h2 tetap disebut supaya
   kepala kelompok yang mungkin dipakai di tempat lain tidak berubah ukuran. */
.kelompok-kepala h2, .kelompok-kepala h3{ font-family:var(--judul); font-weight:600; font-size:clamp(1.25rem,2.2vw,1.65rem); color:var(--plum); }

/* ---------- bagian per jenis proyek (Proyek Terpasang / Desain Interior) ----------
   Juga <section> — jadi padding warisan section{} WAJIB dinolkan, persis
   seperti .kelompok-proyek di atas, kalau tidak celah raksasa kembali.
   Jarak bagian pertama dari paragraf pembuka sama dengan jarak kelompok
   pertama sebelum pemisahan jenis (36–60px), supaya halaman yang hanya
   berisi satu jenis tampil persis seperti sebelumnya. */
.jenis-proyek{ padding-block:0; margin-top:clamp(36px,4.5vw,60px); }
.jenis-proyek + .jenis-proyek{ margin-top:clamp(72px,9vw,120px); }
/* Tanpa max-width: deskripsinya satu kalimat pendek — dibatasi 62ch, kalimat
   itu terpotong ke baris kedua padahal masih muat di layar lebar. */
.jenis-kepala{ margin-bottom:clamp(28px,3.5vw,40px); }
.jenis-kepala h2{ font-size:clamp(1.55rem,2.8vw,2.1rem); }
.jenis-kepala p{ margin-top:8px; color:var(--sage-ink); font-size:.92rem; line-height:1.7; }
/* Jangkar lama #kategori-{slug}: span kosong, dibuat blok supaya target
   gulirnya tepat di atas kepala kelompok, di bawah header yang menempel. */
.jangkar{ display:block; height:0; scroll-margin-top:76px; }
.kelompok-jumlah{ flex:none; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-ink); }

.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.proj{ display:block; background:var(--surface); border:1px solid var(--taupe-line); border-radius:var(--radius); overflow:hidden; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.proj:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(59,59,59,.35); }
.proj .ph{ aspect-ratio:4/3; }
.proj-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; }
.proj-cat{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sage-ink); font-weight:700; }
/* Judul kartu naik dari <h4> ke <h3> supaya hierarki heading tidak melompat
   (h2 kategori/"Serupa" → h3 kartu). Tampilannya SENGAJA dibuat identik
   dengan h4 lama: aturan global h1,h2,h3 di atas mengenolkan margin, memberi
   letter-spacing dan text-wrap:balance — tiga hal yang dulu tidak berlaku
   untuk h4. margin 1.33em adalah margin bawaan peramban untuk h4 yang selama
   ini membentuk jarak di dalam kartu; tanpa baris ini semua kartu menyusut. */
.proj h3, .proj h4{ font-family:var(--judul); font-weight:600; font-size:1.08rem; color:var(--plum); margin:1.33em 0; letter-spacing:normal; text-wrap:wrap; }
.proj-meta{ font-size:.78rem; color:var(--sage-ink); }
.empty-state{ padding-block:48px; text-align:center; color:var(--sage-ink); font-size:.92rem; border:1px dashed var(--taupe-line); border-radius:var(--radius); }

.booking{ background:var(--plum-deep); color:var(--on-plum); }
.booking h2{ color:var(--on-plum); }
.booking .eyebrow{ color:var(--lavender-on-dark); }
.booking .section-head .desc{ color:var(--on-plum-muted); }
.booking .wrap.grid2{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,64px); }

.form-card{ background:rgba(244,241,234,.05); border:1px solid rgba(244,241,234,.16); border-radius:var(--radius); padding:clamp(24px,3vw,36px); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field label{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--on-plum-muted); font-weight:600; }
.field input, .field select, .field textarea{
  background:rgba(244,241,234,.06); border:1px solid rgba(244,241,234,.28); color:var(--on-plum);
  padding:12px 14px; border-radius:var(--radius); font-family:var(--sans); font-size:.88rem;
}
.field textarea{ resize:vertical; min-height:88px; }
.field select option{ color:#111; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(244,241,234,.4); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--lavender); outline:none; }
.form-note{ font-size:.74rem; color:var(--on-plum-muted); margin-top:6px; }
.form-alert{
  background:rgba(183,193,170,.16); border:1px solid var(--lavender); color:var(--on-plum);
  padding:14px 18px; border-radius:var(--radius); font-size:.86rem; margin-bottom:18px;
}
.form-alert.error{ background:rgba(191,90,90,.16); border-color:#bf5a5a; }
.field-error{ font-size:.72rem; color:#e2a3a3; margin-top:-4px; }

.contact-panel{ display:flex; flex-direction:column; gap:26px; }
.contact-item{ display:flex; gap:14px; align-items:flex-start; }
.contact-item svg{ width:19px; height:19px; color:var(--lavender-on-dark); margin-top:3px; flex:none; }
.contact-item b{ display:block; font-size:.8rem; letter-spacing:.04em; color:var(--on-plum-muted); text-transform:uppercase; margin-bottom:4px; }
.contact-item span{ font-size:.94rem; }

/* Nomor WhatsApp di panel kontak: tampil seperti teks di sekitarnya (ukuran
   sama dengan .contact-item span) tapi jelas bisa diketuk lewat garis bawah
   tipis yang menebal saat disentuh. Panel ini berlatar gelap, jadi warnanya
   mengikuti --on-plum, bukan warna tautan biasa yang akan kontras buruk. */
.tautan-wa{
  position:relative;
  font-size:.94rem; color:var(--on-plum); text-decoration:none;
  border-bottom:1px solid rgba(244,241,234,.35); padding-bottom:1px;
  transition:border-color .2s;
}
.tautan-wa:hover, .tautan-wa:focus-visible{ border-bottom-color:var(--on-plum); }

/* Teks nomor hanya setinggi 21px — separuh dari 44px yang disarankan WCAG 2.5.8
   maupun panduan Apple & Google untuk sasaran sentuh. Diperbesar lewat
   pseudo-element transparan, BUKAN padding: padding akan menggeser garis bawah
   menjauh dari teksnya dan mengubah tata letak panel, sementara cara ini
   memperluas area yang bisa diketuk tanpa menggeser satu piksel pun.
   -12px atas/bawah menjadikan tingginya 45px. */
.tautan-wa::after{ content:""; position:absolute; inset:-12px -8px; }
.map-ph{
  aspect-ratio:16/10; border-radius:var(--radius); border:1px dashed rgba(244,241,234,.3);
  background:
    repeating-linear-gradient(0deg, rgba(244,241,234,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(244,241,234,.05) 0 1px, transparent 1px 34px);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  color:var(--on-plum-muted); font-size:.76rem; text-align:center; padding:20px;
}
.map-ph svg{ width:26px; height:26px; color:var(--lavender-on-dark); }
.map-embed{ aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(244,241,234,.28); }
.map-embed iframe{ width:100%; height:100%; border:0; }

.social-row{ display:flex; gap:10px; }
.social-row a{ width:36px; height:36px; border:1px solid rgba(244,241,234,.28); border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.social-row a svg{ width:15px; height:15px; color:var(--on-plum); }
.social-row a:hover{ border-color:var(--lavender); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

@media (max-width: 980px){
  .service-grid{ grid-template-columns:1fr; }
  .proj-grid{ grid-template-columns:repeat(2,1fr); }
  .contoh-grid{ grid-template-columns:repeat(2,1fr); }
  .alur{ grid-template-columns:repeat(2,1fr); }
  .booking .wrap.grid2{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .compare-grid{ grid-template-columns:1fr; }
  .story-grid{ grid-template-columns:1fr; }
  .detail-gallery{ grid-template-columns:repeat(2,1fr); }
  .deliverable-grid{ grid-template-columns:1fr 1fr; }
  .workshop-gallery{ grid-template-columns:1fr 1fr; }
  .workshop-gallery .ph:first-child{ grid-column:1/3; }
  .related-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  .proj-grid{ grid-template-columns:1fr; }
  .contoh-grid{ grid-template-columns:1fr; }
  .alur{ grid-template-columns:1fr; }
  /* Di ponsel kembali ke grid 2 kolom: keping selebar isi akan membuat
     barisnya bergerigi di layar sempit. */
  .meta-grid{ display:grid; grid-template-columns:1fr 1fr; }
  .detail-gallery{ grid-template-columns:1fr; }
  .foto-utama .ph{ aspect-ratio:4/3; }
  .panel-lanskap .grid-tahap{ grid-template-columns:1fr; }
  .panel-potret .grid-tahap{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .tab-tahap-btn{ font-size:.8rem; padding:7px 12px 7px 7px; gap:7px; }
  .deliverable-grid{ grid-template-columns:1fr; }
  .workshop-gallery{ grid-template-columns:1fr; }
  .workshop-gallery .ph:first-child{ grid-column:1/2; }
  .related-grid{ grid-template-columns:1fr; }
  .cta-banner{ flex-direction:column; align-items:flex-start; }
  .payment-box{ flex-direction:column; }
}

/* ================================================================
   BERANDA BARU — Mockup 2 (mockup/laveas-adex-3.html)
   ================================================================
   Header & footer di bawah ini SHARED di semua halaman (lewat
   Shared/_Layout.cshtml) — jadi Portofolio/Layanan/Kualitas/Kontak yang
   badan halamannya belum digarap tetap dapat header/footer baru ini.
   Section .hero/.kenapa/.mosaik/.tentang/.proyek/.tile/.cta-band/.testi/
   .klien HANYA dipakai Views/Home/Index.cshtml.

   Tombol section baru pakai kelas .tombol* (BUKAN .btn*) supaya tidak
   menimpa tampilan tombol .btn-primary/.btn-outline di halaman lama.
   ================================================================ */

.tombol{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:.74rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding:14px 30px; border-radius:var(--pill);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .18s ease;
}
.tombol:hover{ transform:translateY(-2px); }
.tombol-hijau{ background:var(--sage-ink); color:var(--ivory); }
.tombol-hijau:hover{ background:var(--sage-ink-dark); }
.tombol-gelap{ background:var(--plum-cta); color:var(--ivory); }
.tombol-gelap:hover{ background:var(--plum-deep); }
.tombol-garis{ border-color:var(--sage-ink); color:var(--sage-ink); background:transparent; }
.tombol-garis:hover{ background:var(--sage-ink); color:var(--ivory); }
.tombol-sm{ padding:10px 22px; font-size:.68rem; }

.hl{ color:var(--sage-ink); }
.aksen{ font-style:italic; font-weight:500; color:var(--walnut); }

/* ---------- top bar ---------- */
.topbar{
  background:var(--sage-ink-dark); color:rgba(244,241,234,.9);
  font-size:.72rem; letter-spacing:.03em;
}
.topbar .wrap{ display:flex; justify-content:space-between; gap:16px; padding-block:8px; flex-wrap:wrap; }
.topbar span{ display:inline-flex; align-items:center; gap:7px; }
.topbar .pisah{ opacity:.45; margin-inline:10px; }

/* ---------- header: logo di dalam bidang hijau miring ---------- */
header.situs{ position:sticky; top:0; z-index:40; background:#fff; box-shadow:0 1px 0 var(--taupe-line); }
.bar{ position:relative; display:flex; align-items:center; justify-content:flex-end; gap:26px; min-height:70px; }
.slab{
  position:absolute; left:calc(50% - 50vw); top:0; bottom:0;
  /* +350px (bukan +300px) — logo wordmark-only lebih lebar dari logo lama
     yang menyertakan "Interiors & Build" (rasio ~5:1), konstanta lama
     membuat ruang di dalam slab menyempit di viewport ~1000px. */
  width:calc(50vw - var(--maxw)/2 + 350px);
  background:linear-gradient(135deg, var(--sage-ink), var(--sage-ink-dark));
  clip-path:polygon(0 0, 100% 0, calc(100% - 64px) 100%, 0 100%);
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:78px;
}
/* File logo pra-warna ivory (bukan filter CSS di atas pengaturan.LogoUrl) —
   hasilnya pasti, tidak bergantung rendering filter tiap browser. Hanya
   dipakai di slab header; footer & tempat lain tetap ikut pengaturan.LogoUrl. */
.slab img{ height:36px; width:auto; }
nav.menu{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
nav.menu a{ font-size:.8rem; font-weight:500; color:var(--plum); padding-block:6px; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; text-decoration:none; }
nav.menu a:hover{ color:var(--sage-ink); }
nav.menu a.active-link{ color:var(--sage-ink); font-weight:700; border-color:var(--sage-ink); }
.menu-toggle{ display:none; width:40px; height:40px; border:1px solid var(--taupe-line); background:transparent; border-radius:var(--radius-baru-sm); align-items:center; justify-content:center; cursor:pointer; color:var(--plum); }

/* ---------- hero: foto full-bleed di belakang teks, rata tengah ---------- */
.hero{
  position:relative; min-height:600px; display:flex; align-items:center;
  background-color:var(--ivory);
  background-size:cover; background-position:center;
}
.hero .wrap{ text-align:center; }
/* padding-bottom sengaja lebih besar dari padding-top -- memberi ruang foto
   lebih banyak di bawah tombol supaya kartu "Kenapa Memilih" (margin-top
   negatif, lihat .kenapa di bawah) punya area foto yang cukup untuk benar-
   benar tertutup separuh, bukan cuma menyentuh ujung padding kosong. */
.hero .isi{ max-width:720px; margin:0 auto; padding-top:clamp(64px,9vw,110px); padding-bottom:clamp(140px,14vw,170px); }
.hero h1{ font-family:var(--judul); font-weight:700; letter-spacing:-.01em; font-size:clamp(2.1rem,4.8vw,3.4rem); line-height:1.14; color:var(--plum); }
.hero .sub{ display:block; margin-top:14px; font-family:var(--sans); font-size:1.02rem; font-weight:700; color:var(--sage-ink); letter-spacing:.01em; }
/* .sub kini berada di dalam <h1> (alasan SEO, lihat Views/Home/Index.cshtml).
   Tanpa baris ini ia mewarisi line-height 1,14 dan text-wrap:balance milik
   h1 — dua hal yang dulu tidak berlaku saat ia masih di luar h1. Nilai di
   bawah adalah persis yang ia warisi sebelumnya dari body. */
.hero h1 .sub{ line-height:1.6; text-wrap:wrap; }
/* pre-line — baris baru yang diketik admin di Deskripsi (CMS) ikut tampil
   sebagai baris/paragraf baru di sini, bukan digabung jadi satu baris
   panjang seperti perilaku default HTML. */
.hero p{ margin-top:22px; color:var(--plum); font-size:.95rem; line-height:1.85; white-space:pre-line; }
.hero .aksi{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }

/* ---------- kartu mengambang "kenapa memilih" ---------- */
/* -130px (bukan -92px) -- supaya kartu terasa benar-benar "masuk" ke foto
   hero (seperti referensi adex.id), bukan cuma menyentuh ujung bawahnya.
   Aman dari ketombol CTA di atasnya karena padding-bottom .hero .isi
   (clamp 140-170px) selalu lebih besar dari overlap ini. TIDAK berlaku di
   mobile (≤600px) -- lihat media query, kartu jadi rata/flat di sana.

   padding-top:0 WAJIB -- section{padding-block:...} di atas (aturan umum utk
   semua <section>) diam-diam memberi ~64-108px padding-top ke .kenapa juga,
   yang membatalkan sebagian besar margin-top negatif di atas (efek nyatanya
   cuma ~26px, bukan 130px, kalau tidak di-nolkan di sini). */
.kenapa{ position:relative; z-index:3; margin-top:-130px; padding-top:0; }
.kenapa .kartu{ background:#fff; border-radius:22px; box-shadow:var(--shadow-baru); padding:clamp(34px,4.4vw,54px) clamp(24px,4vw,52px); }
.judul-tengah{ text-align:center; margin-bottom:clamp(28px,4vw,44px); }
.judul-tengah h2{ font-family:var(--judul); font-weight:700; letter-spacing:-.005em; font-size:clamp(1.5rem,2.7vw,2rem); color:var(--plum); }
.judul-tengah .sub{ display:block; margin-top:10px; font-family:var(--sans); font-size:.86rem; font-weight:700; color:var(--sage-ink); }
.judul-tengah p{ max-width:62ch; margin:14px auto 0; font-size:.9rem; color:var(--body-beranda); }
/* ---------- Ikuti LAVEAS (media sosial) — pengganti "Kenapa Memilih" ----------
   Kartu & judul memakai .kenapa .kartu / .judul-tengah. Tombol akun berupa
   kartu kecil yang seluruhnya bisa diklik: ikon, nama platform, akun, isi. */
.sosial-label{ display:block; margin-bottom:10px; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sage-ink); }
/* Kelas bagian: .ikuti-laveas — BUKAN .sosial, yang sudah dipakai aturan
   ikon bulat 34px (baris .sosial a) dan sempat mengecilkan tombol ke 42px. */
.ikuti-laveas .judul-tengah h2{ text-wrap:balance; }
/* Kolom = jumlah akun (maks 4) — Shopee menambah kartu keempat. */
.sosial-daftar{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(min(var(--jumlah-akun,3),4),minmax(0,1fr)); gap:16px; }
.sosial-tautan{
  display:flex; align-items:flex-start; gap:14px; height:100%; padding:18px 20px;
  border:1px solid var(--taupe-line); border-radius:var(--radius-baru-sm);
  color:var(--plum); text-decoration:none; background:#fff;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sosial-tautan:hover{ border-color:var(--sage-ink); transform:translateY(-2px); box-shadow:0 6px 18px rgba(59,59,59,.08); }
.sosial-tautan:focus-visible{ outline:2px solid var(--plum); outline-offset:3px; }
.sosial-ikon svg{ width:26px; height:26px; color:var(--sage-ink); display:block; }
.sosial-teks{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.sosial-teks b{ font-family:var(--judul); font-size:1rem; font-weight:700; }
.sosial-handle{ font-size:.8rem; color:var(--sage-ink); }
.sosial-isi{ margin-top:6px; font-size:.86rem; color:var(--body-beranda); line-height:1.5; }
.sosial-panah{ color:var(--sage-ink); font-size:1rem; }
@media (prefers-reduced-motion: reduce){ .sosial-tautan{ transition:none; } .sosial-tautan:hover{ transform:none; } }

.grid-unggul{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,34px) 18px; }
.unggul{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.unggul svg{ width:28px; height:28px; color:var(--sage-ink); }
.unggul b{ font-family:var(--sans); font-size:.8rem; font-weight:700; color:var(--plum); line-height:1.45; }

/* ---------- "kenapa" versi slider — TABLET & MOBILE saja (≤980px, lihat
   media query di bawah). Di desktop .kenapa-slider cuma bungkus tak terlihat
   di sekitar .grid-unggul; dot disembunyikan lewat display:none di sini dan
   baru dimunculkan di breakpoint. Tanpa panah (meniru adex.id) -- geser lewat
   swipe/scroll-snap murni. Logika geser (autoplay, sinkron dot aktif) ada di
   site.js — cari "kenapa-slider". ---------- */
.kenapa-slider{ position:relative; }
.kenapa-dots{ display:none; justify-content:center; gap:8px; margin-top:20px; }
.kenapa-dot{ width:7px; height:7px; border-radius:50%; background:var(--taupe-line); border:none; padding:0; cursor:pointer; }
.kenapa-dot.aktif{ background:var(--sage-ink); }

/* ---------- mosaik foto ---------- */
.mosaik{ padding-block:clamp(56px,7vw,88px); }
.mosaik .wrap{ display:grid; grid-template-columns:1.15fr 1fr; gap:18px; }
.mosaik figure{ margin:0; border-radius:var(--radius-baru); overflow:hidden; box-shadow:var(--shadow-baru-lembut); }
.mosaik figure .ph{ width:100%; height:100%; border-radius:0; }
.mosaik .kanan{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.mosaik .besar{ min-height:340px; }
.mosaik .kanan figure{ aspect-ratio:4/3; }

/* ---------- tiga poin pendukung ---------- */
/* Kartu bergaris atas + nomor kecil -- sengaja BUKAN daftar bullet polos
   (diminta eksplisit: jangan tampil seperti bullet paragraf), meniru gaya
   "kepala section bernomor" yang sudah dipakai di mockup Opsi 4. */
.poin-pendukung{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px); margin-top:clamp(36px,4.5vw,52px); text-align:left; }
.poin-item{ padding-top:20px; border-top:2px solid var(--sage-ink); }
.poin-item .no{ display:block; font-family:var(--judul); font-size:.78rem; font-weight:700; color:var(--sage-ink); letter-spacing:.08em; margin-bottom:10px; }
.poin-item h3{ font-family:var(--judul); font-weight:700; font-size:1.05rem; color:var(--plum); margin-bottom:8px; }
.poin-item p{ font-size:.85rem; color:var(--body-beranda); line-height:1.65; }

/* ---------- angka statistik ---------- */
.tentang{ padding-bottom:clamp(56px,7vw,88px); }
/* Beranda sejak revisi Nov 2026: hanya baris angka (judul & tiga poin
   dihapus) — jarak atas bawaan .angka-baris tidak lagi punya isi di atasnya. */
.tentang.hanya-angka .angka-baris{ margin-top:0; }
/* "Tim Ahli & Berpengalaman" adalah frasa, bukan angka: lebih kecil dari
   "100+" supaya muat sebaris di kolom desktop. Di kolom sempit dipatah
   seimbang (balance) — "Tim Ahli &" / "Berpengalaman" — bukan menyisakan
   satu kata di baris kedua. */
.angka b.angka-kata{ font-size:clamp(1.45rem,2.5vw,2.3rem); line-height:1.2; text-wrap:balance; }
/* Desktop: frasa itu harus SEBARIS (permintaan pemilik situs). Tiga kolom
   sama lebar hanya ~340px di layar 1440px, sedangkan frasanya butuh ~505px —
   jadi kolom mengikuti lebar isinya dan sisa ruang dibagi rata di antaranya. */
/* Ponsel (satu kolom): tanpa keterangan di bawahnya, frasa ini terlalu
   rapat ke "100%" — diberi jarak setara satu baris keterangan. */
@media (max-width:600px){
  .tentang.hanya-angka .angka b.angka-kata{ margin-bottom:16px; }
}
@media (min-width:981px){
  /* baseline: frasa yang lebih kecil duduk segaris dengan dasar "100+",
     bukan menggantung di atasnya. */
  .tentang.hanya-angka .angka-baris{ grid-template-columns:repeat(3,auto); justify-content:space-around; align-items:baseline; }
  .tentang.hanya-angka .angka b.angka-kata{ white-space:nowrap; }
}
.angka-baris{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:clamp(44px,5vw,60px); text-align:center; }
.angka b{ display:block; font-family:var(--sans); font-size:clamp(2.3rem,4.6vw,3.2rem); font-weight:700; line-height:1; color:var(--sage-ink); }
.angka b .satuan{ color:var(--plum); }
/* Anak LANGSUNG saja — ".angka span" polos ikut mengenai <span class="satuan">
   di dalam <b>, membuat "+/Thn/%" mengecil dan turun ke baris sendiri. */
.angka > span{ display:block; margin-top:10px; font-size:.8rem; color:var(--body-beranda); line-height:1.5; }

/* ---------- band proyek: slider foto polos ----------
   Meniru "Latest Projects" adex.id -- foto berjejer digeser, TANPA
   judul/lokasi/pita per foto (beda dari .rel-proyek/.kartu-proyek/.pita
   lama yang dulu dipakai _KartuProyekBeranda -- sudah dihapus). Slider ini
   SELALU aktif di semua lebar layar (beda dari .kenapa-slider yang cuma
   aktif ≤980px), karena itemsPerView sendiri sudah menyesuaikan breakpoint.
   Panah/dot dibangun & disinkron oleh site.js (cari "proyekTrack"); geser
   pakai jari berfungsi lewat scroll-snap CSS murni, tanpa JS. */
.proyek{ background:var(--ivory-deep); padding-block:clamp(56px,7vw,88px); }
.proyek-slider{ position:relative; margin-top:clamp(28px,3.5vw,40px); }
.proyek-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;
}
.proyek-track::-webkit-scrollbar{ display:none; }
.proyek-foto{
  flex:0 0 calc(25% - 12px); scroll-snap-align:start; margin:0;
  aspect-ratio:3/4; border-radius:var(--radius-baru); overflow:hidden; box-shadow:var(--shadow-baru-lembut);
}
.proyek-foto .ph{ width:100%; height:100%; border-radius:0; }
/* Foto yang ditautkan ke studi kasus: <a> dibuat blok setinggi bingkai supaya
   .ph di dalamnya tetap mengisi rasio 3:4 — <a> bawaannya inline, dan tinggi
   100% anak blok di dalam elemen inline tidak bisa diandalkan. */
.proyek-foto > a{ display:block; height:100%; }
.proyek-dots{ display:flex; justify-content:center; gap:17px; margin-top:22px; }
.proyek-dot{ width:7px; height:7px; border-radius:50%; background:var(--taupe-line); border:none; padding:0; cursor:pointer; }
/* Titik tetap 7px, tapi area ketuknya 24×24px lewat ::before transparan
   (target sentuh minimal WCAG 2.5.8) — dulu jari harus tepat mengenai 7px.
   Jarak antartitik 17px supaya area ketuk tetangga tidak bertumpuk. */
.proyek-dot{ position:relative; }
.proyek-dot::before{ content:""; position:absolute; inset:-8.5px; }
.proyek-dot.aktif{ background:var(--sage-ink); }
.tengah-tombol{ display:flex; justify-content:center; margin-top:28px; }

/* ---------- tile kategori full-bleed ---------- */
.tile-baris{ display:grid; grid-template-columns:repeat(var(--jumlah-tile,4),1fr); }
.tile{ position:relative; min-height:300px; overflow:hidden; display:block; text-decoration:none; }
.tile .ph{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(59,59,59,.62) 0%, rgba(59,59,59,.12) 55%, rgba(59,59,59,.42) 100%); pointer-events:none; }
.tile h3{ position:absolute; z-index:2; top:26px; left:26px; right:20px; color:var(--ivory); font-family:var(--sans); font-weight:700; font-size:1.05rem; line-height:1.3; letter-spacing:.02em; }

/* ---------- band CTA — foto latar opsional, jatuh ke gradasi warna solid
   kalau kosong (background-image cuma di-set lewat inline style saat foto
   ada, lihat Views/Home/Index.cshtml -- pola sama dengan .hero). ---------- */
.cta-band{
  position:relative; padding-block:clamp(64px,8vw,104px);
  background-color:var(--sage-ink-dark);
  background-image:linear-gradient(135deg, var(--sage-ink), var(--sage-ink-dark));
  background-size:cover; background-position:center;
}
.cta-band h2{ font-family:var(--judul); font-weight:700; letter-spacing:-.005em; color:var(--ivory); font-size:clamp(1.5rem,2.8vw,2.1rem); max-width:22ch; }
.cta-band .aksen{ font-style:normal; color:var(--ivory); }
.cta-band p{ margin-top:18px; max-width:52ch; color:rgba(244,241,234,.92); font-size:.92rem; }
.cta-band .tombol{ margin-top:30px; }

/* ---------- testimoni ---------- */
/* Putih polos (bukan var(--ivory), beda dari .klien di bawahnya) -- meniru
   laveas-adex-3.html: body di sana dasarnya putih, .klien yang eksplisit
   diberi ivory, jadi dua section ini kelihatan beda walau sama-sama "polos".
   Situs kita body-nya sudah ivory dari awal, jadi .testi perlu putih
   eksplisit di sini supaya bedanya tetap kelihatan. */
.testi{ background:#fff; padding-block:clamp(56px,7vw,88px); }
/* Slider (bukan grid statis lagi) -- SELALU aktif di semua lebar layar,
   sama seperti .proyek-slider (logikanya di site.js, cari "testiTrack").
   Maksimal 3 kutipan per layar di desktop; kalau testimoninya ≤3, slider
   ini otomatis cuma 1 "halaman" (dot tetap ada tapi tak berbuat apa-apa)
   -- tidak perlu penanganan khusus terpisah. Tanpa panah (meniru adex.id)
   -- geser lewat swipe/scroll-snap murni atau klik dot. */
.testi-slider{ position:relative; margin-top:clamp(28px,3.5vw,40px); }
.testi-track{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;
}
.testi-track::-webkit-scrollbar{ display:none; }
.testi-dots{ display:flex; justify-content:center; gap:17px; margin-top:22px; }
.testi-dot{ width:7px; height:7px; border-radius:50%; background:var(--taupe-line); border:none; padding:0; cursor:pointer; }
/* Titik tetap 7px, tapi area ketuknya 24×24px lewat ::before transparan
   (target sentuh minimal WCAG 2.5.8) — dulu jari harus tepat mengenai 7px.
   Jarak antartitik 17px supaya area ketuk tetangga tidak bertumpuk. */
.testi-dot{ position:relative; }
.testi-dot::before{ content:""; position:absolute; inset:-8.5px; }
.testi-dot.aktif{ background:var(--sage-ink); }
.kutip{
  /* margin:0 -- <blockquote> punya margin bawaan browser (mis. 1em 40px)
     yang KALAU tidak di-reset menumpuk dengan gap flexbox .testi-track,
     bikin jarak antar kartu jauh lebih lebar dari 22px yang dimaksud
     sehingga kartu ke-3 terdorong keluar & terlihat "terpotong". */
  flex:0 0 calc(33.333% - 15px); scroll-snap-align:start; margin:0;
  background:#fff; border:1px solid var(--taupe-line); border-radius:var(--radius-baru); box-shadow:var(--shadow-baru-lembut); padding:30px 26px; display:flex; flex-direction:column; gap:16px;
}
/* Ornamen, bukan teks pembawa informasi — kontras rendah di sini disengaja. */
.kutip .tanda{ font-family:var(--judul); font-size:2.6rem; font-weight:800; line-height:.7; color:var(--taupe); }
.kutip p{ font-family:var(--judul); font-style:italic; font-size:1rem; line-height:1.65; color:var(--plum); }
.kutip footer{ font-size:.78rem; color:var(--body-beranda); }
.kutip footer b{ display:block; font-family:var(--sans); color:var(--sage-ink); font-weight:700; font-size:.86rem; }

/* ---------- strip logo klien (Laveas_LogoMitra, dinamis) ----------
   <=5 logo: flex rata TENGAH (bukan grid 5 kolom tetap) -- supaya 1 logo
   pun tetap di tengah, ikut jumlah aslinya bukan terjebak di sel pertama
   grid. >5 logo: jadi slider, pola sama seperti .proyek-slider/.testi-slider
   (logikanya di site.js, cari "logoTrack"). */
.klien{ background:var(--ivory); padding-block:clamp(48px,6vw,72px); }
.logo-baris{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:32px; margin-top:clamp(28px,3.5vw,40px); }
.logo-item{ flex:0 0 220px; width:220px; aspect-ratio:5/2; }
.logo-item .ph{ width:100%; height:100%; }
.logo-item .ph img{ object-fit:contain; padding:6px; }

.logo-slider{ position:relative; margin-top:clamp(28px,3.5vw,40px); }
.logo-track{
  display:flex; gap:32px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;
}
.logo-track::-webkit-scrollbar{ display:none; }
.logo-track .logo-item{ flex:0 0 calc(20% - 25.6px); scroll-snap-align:start; }
.logo-dots{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
.logo-dot{ width:7px; height:7px; border-radius:50%; background:var(--taupe-line); border:none; padding:0; cursor:pointer; }
.logo-dot.aktif{ background:var(--sage-ink); }

/* ---------- footer gelap (sage-ink, SAMA dengan slab header) ----------
   Latar disamakan dengan header supaya logo wordmark ivory bisa dipakai
   APA ADANYA di kedua tempat (tidak perlu direcolor lewat filter lagi) --
   seluruh teks di bawah ini menyesuaikan jadi nuansa ivory/terang. */
footer.situs{ background:var(--sage-ink); padding-top:clamp(48px,6vw,72px); }
footer.situs .foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; padding-bottom:40px; }
/* height:36px sama persis dengan .slab img (header) -- file logo & warnanya
   pun SAMA PERSIS (logo-wordmark-ivory.png, tanpa filter) karena latar
   footer sekarang gelap juga seperti slab header. */
footer.situs .foot-grid img{ height:36px; width:auto; margin-bottom:16px; }
footer.situs .foot-grid p{ font-size:.82rem; color:rgba(244,241,234,.8); max-width:34ch; }
/* Ikon akun media sosial di footer (MedsosLaveas). 36px + jarak 8px —
   target sentuh ≥24px tanpa bertumpuk. */
.foot-sosial{ list-style:none; margin:18px 0 0; padding:0; display:flex; gap:8px; }
.foot-sosial a{ width:36px; height:36px; border:1px solid rgba(244,241,234,.28); border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(244,241,234,.85); transition:border-color .15s ease, color .15s ease; }
.foot-sosial a:hover{ border-color:var(--ivory); color:var(--ivory); }
.foot-sosial svg{ width:16px; height:16px; }
/* h2, bukan h4: judul kolom footer dulu h4, sehingga di halaman yang judul
   terakhirnya h2 hierarkinya melompat h2 → h4. Tampilannya dikunci sama
   persis dengan h4 lama — margin atas 1,33em (bawaan h4), tanpa
   letter-spacing & text-wrap:balance warisan aturan h1-h3. */
.foot-col h2{ font-family:var(--sans); font-size:.86rem; font-weight:700; margin:1.33em 0 14px; color:var(--ivory); letter-spacing:normal; text-wrap:wrap; line-height:inherit; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.foot-col li, .foot-col a{ font-size:.82rem; color:rgba(244,241,234,.75); text-decoration:none; }
/* Target sentuh ≥24px (WCAG 2.5.8): tautan footer tadinya hanya 16px tinggi.
   Padding vertikal menambah area ketuk; jarak antarbaris dikurangi sebanyak
   itu (gap 9px → 1px) supaya tampilan daftar tidak berubah. */
.foot-col a{ display:inline-block; padding-block:4px; }
.foot-col a:hover{ color:var(--ivory); }
.sosial{ display:flex; gap:10px; margin-top:20px; }
.sosial a{ width:34px; height:34px; border-radius:50%; background:rgba(244,241,234,.14); color:var(--ivory); display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease; }
.sosial a:hover{ background:var(--ivory); color:var(--sage-ink); }
/* Sebelumnya foot-bawah SUDAH sage-ink (sengaja beda dari foot-grid yang
   dulu terang) -- sekarang keduanya gelap, jadi dipakai sage-ink-dark di
   sini supaya strip copyright tetap kelihatan sebagai pemisah, bukan
   menyatu polos dengan bagian di atasnya. */
.foot-bawah{ background:var(--sage-ink-dark); color:rgba(244,241,234,.85); font-size:.72rem; }
.foot-bawah .wrap{ display:flex; justify-content:space-between; gap:12px; padding-block:14px; flex-wrap:wrap; }

/* ---------- WhatsApp bulat mengambang ---------- */
.wa{
  position:fixed; right:22px; bottom:22px; z-index:50;
  width:54px; height:54px; border-radius:50%;
  background:var(--sage-ink); color:var(--ivory);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 12px 26px -10px rgba(59,59,59,.6);
  transition:transform .2s ease;
}
.wa:hover{ background:var(--sage-ink-dark); transform:translateY(-3px); }

@media (max-width:980px){
  .slab{ width:min(58vw,280px); padding-right:64px; }
  nav.menu{ display:none; }
  .menu-toggle{ display:inline-flex; }
  /* Grid jadi jalur geser 2 kartu per layar (bukan lagi grid biasa) --
     scroll-snap murni CSS, jadi swipe jari langsung berfungsi tanpa JS.
     Panah & dot cuma kosmetik/kemudahan, dipasang lewat site.js. */
  .grid-unggul{
    display:flex; grid-template-columns:none; overflow-x:auto; gap:0;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .grid-unggul::-webkit-scrollbar{ display:none; }
  .sosial-daftar{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .unggul{ flex:0 0 50%; scroll-snap-align:start; padding-inline:10px; }
  .kenapa-dots{ display:flex; }
  .mosaik .wrap{ grid-template-columns:1fr; }
  .proyek-foto{ flex-basis:calc(50% - 8px); }
  .tile-baris{ grid-template-columns:repeat(2,1fr); }
  /* Jumlah ganjil di grid 2 kolom: tile terakhir selebar penuh, bukan sendirian setengah baris. */
  .tile-baris .tile:last-child:nth-child(odd){ grid-column:1 / -1; }
  .kutip{ flex-basis:calc(50% - 11px); }
  .logo-track .logo-item{ flex-basis:calc(33.333% - 21.33px); }
  footer.situs .foot-grid{ grid-template-columns:1fr 1fr; }
  .angka-baris{ gap:18px; }
  /* 1 kolom (bukan 2) -- tiap poin berisi kalimat penuh, bukan cuma label
     pendek, jadi lebih terbaca ditumpuk daripada dipepetkan 2 kolom. */
  .poin-pendukung{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:600px){
  /* Tombol CTA header disembunyikan — bertabrakan dengan bidang hijau miring
     di layar sempit. Kontak tetap terjangkau lewat top bar dan tombol
     WhatsApp mengambang. */
  .bar > .tombol{ display:none; }
  .slab{ width:min(62vw,220px); padding-right:50px; }
  .slab img{ height:28px; }
  .unggul{ flex:0 0 100%; }
  /* 100% penuh (bukan sekadar mayoritas lebar) -- slide lain TIDAK boleh
     ikut terlihat "terpotong" di tepi layar, tiap slide harus utuh satu
     layar penuh baru geser ke berikutnya. */
  .proyek-foto{ flex-basis:100%; }
  .kutip{ flex-basis:100%; }
  .tile-baris{ grid-template-columns:1fr; }
  .tile-baris .tile:last-child:nth-child(odd){ grid-column:auto; }
  .logo-track .logo-item{ flex-basis:calc(50% - 16px); }
  footer.situs .foot-grid{ grid-template-columns:1fr; }
  .angka-baris{ grid-template-columns:1fr; }
  /* Mobile: TIDAK lagi kartu mengambang (beda dari tablet/desktop) -- meniru
     adex.id yang di lebar HP section ini jadi rata/flat, menyatu sebagai
     lanjutan halaman biasa persis di bawah hero, bukan kotak terpisah yang
     tampak "mengambang sendiri". Slider tetap jalan seperti biasa. */
  .kenapa{ margin-top:0; }
  .kenapa .kartu{ background:transparent; box-shadow:none; border-radius:0; padding:36px 0 4px; }
  .sosial-daftar{ grid-template-columns:1fr; gap:10px; }
}