/* Contoh website PT Arkana Bangun Persada (karangan) — Versi 1.
   Editorial-arsitektural yang tenang: latar batu hangat, tinta hijau-hitam, aksen hijau oksida. Tanpa gradasi, tanpa bayangan.
   Huruf: Fraunces (judul serif) + Inter Tight (isi). Pemisah: garis tipis (hairline). Sudut tegas, tanpa lengkung. */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('fonts/inter-tight.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --batu: #EEEBE5;
  --batu-2: #E3DFD6;
  --kertas: #F7F5F1;
  --tinta: #1F2421;
  --abu: #565C58;
  --oksida: #2F5D50;
  --oksida-teks: #264B41;
  --hijau-tua: #17302A;
  --redup-terang: #AEBBB4;
  --garis: #BDB8AD;
  --garis-gelap: #35504A;

  --serif: 'Fraunces', 'Georgia', serif;
  --sans: 'Inter Tight', 'Arial', sans-serif;
  --lebar: 1320px;
  --tepi: clamp(20px, 4.4vw, 64px);
  --jarak: clamp(72px, 9vw, 136px);
  --kurva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--batu); scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--batu); color: var(--tinta); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 380; font-variation-settings: 'opsz' 72, 'SOFT' 0; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
p, dl, dd, ol, ul, figure, address, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
address { font-style: normal; }
p { text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--oksida); outline-offset: 3px; }
.tersembunyi { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wadah { width: 100%; max-width: calc(var(--lebar) + 2 * var(--tepi)); margin-inline: auto; padding-inline: var(--tepi); }
.lompat-isi { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--tinta); color: var(--batu); text-decoration: none; }
.lompat-isi:focus { top: 12px; }

/* ---------- pita CONTOH ---------- */
.pita-contoh { background: var(--tinta); color: #C9D1CB; font-size: 0.8125rem; line-height: 1.45; }
.pita-contoh-isi { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; min-height: 44px; padding-block: 4px; }
.lencana-contoh { flex: none; padding: 2px 8px; border: 1px solid #C9D1CB; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; color: #C9D1CB; }
.pita-contoh p { flex: 1 1 320px; }
.pita-tautan { display: inline-flex; align-items: center; min-height: 44px; color: #FFFFFF; font-weight: 600; text-underline-offset: 4px; }
.pita-tautan:hover { text-decoration-thickness: 2px; }
.pita-tautan:focus-visible { outline-color: #FFFFFF; }

/* ---------- bilah atas ---------- */
.bilah { position: sticky; top: 0; z-index: 50; height: 76px; background: var(--batu); border-bottom: 1px solid var(--garis); transition: border-color 0.3s var(--kurva); }
.bilah.tergulir { border-bottom-color: var(--tinta); }
.bilah-isi { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.merek { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--tinta); }
.merek-logo { width: 36px; height: 36px; flex: none; }
.merek-teks { display: flex; flex-direction: column; line-height: 1.15; }
.merek-teks strong { font-family: var(--serif); font-size: 1.3125rem; font-weight: 440; letter-spacing: -0.01em; font-variation-settings: 'opsz' 30; }
.merek-teks small { margin-top: 2px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--abu); }
.navigasi { display: flex; align-items: center; gap: 12px; }
.navigasi ul { display: flex; gap: 4px; padding: 0; list-style: none; }
.navigasi a:not(.tombol) { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 0.9375rem; font-weight: 500; text-decoration: none; color: var(--abu); transition: color 0.2s; }
.navigasi a:not(.tombol):hover, .navigasi a[aria-current='page'] { color: var(--tinta); }
.navigasi a[aria-current='page']::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 7px; height: 1px; background: var(--tinta); }
.navigasi .navigasi-cta { display: none; }
.bilah-kanan { display: flex; align-items: center; gap: 8px; }
.ganti-bahasa { display: inline-flex; align-items: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; color: var(--abu); }
.ganti-bahasa .b-pisah { opacity: 0.5; }
html[lang='id'] .ganti-bahasa .b-id, html[lang='en'] .ganti-bahasa .b-en { color: var(--tinta); text-decoration: underline; text-underline-offset: 5px; }
.tombol-menu { display: none; }

/* ---------- tombol & tautan ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 30px; border: 1px solid transparent; border-radius: 0;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.25s var(--kurva), color 0.25s var(--kurva), border-color 0.25s var(--kurva);
}
.tombol .panah, .tautan-panah .panah { width: 18px; height: 18px; flex: none; transition: transform 0.3s var(--kurva); }
.tombol:hover .panah, .tautan-panah:hover .panah { transform: translateX(4px); }
.tombol-utama { background: var(--oksida); color: var(--kertas); }
.tombol-utama:hover { background: var(--hijau-tua); }
.tombol-terang { background: var(--batu); color: var(--tinta); }
.tombol-terang:hover { background: #FFFFFF; }
.tombol-garis { border-color: var(--tinta); color: var(--tinta); }
.tombol-garis:hover { background: var(--tinta); color: var(--batu); }
.tombol-garis-terang { border-color: rgba(255, 255, 255, 0.75); color: #FFFFFF; }
.tombol-garis-terang:hover { background: #FFFFFF; color: var(--tinta); }
.pembuka .tombol:focus-visible { outline-color: #FFFFFF; }
.bilah-cta { min-height: 44px; padding: 0 24px; font-size: 0.875rem; }
.baris-tombol { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.tautan-panah { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 18px; font-size: 0.9375rem; font-weight: 600; text-decoration: none; color: var(--oksida-teks); }
.tautan-panah:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- teks ---------- */
.label { display: inline-flex; align-items: center; gap: 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oksida-teks); }
.label::before { content: ''; flex: none; width: 28px; height: 1px; background: currentColor; }
.label-terang { color: #FFFFFF; }
.bagian-gelap .label { color: var(--redup-terang); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 360; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 420; line-height: 1.2; }
.serif-sedang { font-size: clamp(1.75rem, 3.1vw, 2.875rem); font-weight: 340; line-height: 1.16; max-width: 24ch; }
.serif-kecil { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 400; }
.teks-besar { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; color: var(--abu); }
.catatan { margin-top: 20px; font-size: 0.875rem; color: var(--abu); }
.redup { color: var(--abu); font-size: 0.9375rem; }
.no-kecil { display: block; font-family: var(--serif); font-size: 1rem; color: var(--oksida-teks); font-variant-numeric: tabular-nums; }
.no-besar { display: block; font-family: var(--serif); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 280; line-height: 1; color: var(--oksida); font-variant-numeric: lining-nums tabular-nums; }
.sub-label { margin-top: 28px; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--abu); }

/* ---------- pembuka: foto penuh lebar, judul serif sangat besar di kiri bawah ---------- */
.pembuka { position: relative; display: flex; align-items: flex-end; overflow: hidden; background: var(--tinta); color: #FFFFFF; }
.pembuka-utama { min-height: clamp(560px, calc(100svh - 124px), 900px); }
.pembuka-dalam { min-height: clamp(420px, 60vh, 640px); }
.pembuka-foto { position: absolute; inset: 0; }
.pembuka-foto picture, .pembuka-foto img { width: 100%; height: 100%; object-fit: cover; }
.pembuka-foto::after { content: ''; position: absolute; inset: 0; background: rgba(15, 20, 17, 0.5); }
.pembuka-utama .pembuka-foto::after { background: rgba(15, 20, 17, 0.62); }
.js .pembuka-foto img { transform: scale(1.04); transition: transform 2.6s var(--kurva); }
.js .siap .pembuka-foto img { transform: scale(1); }
.pembuka-isi { position: relative; z-index: 1; padding-block: clamp(40px, 6vw, 88px) clamp(36px, 5vw, 72px); }
.pembuka h1 { margin-top: 28px; font-weight: 340; font-variation-settings: 'opsz' 96, 'SOFT' 0; line-height: 0.96; letter-spacing: -0.035em; color: #FFFFFF; }
.pembuka-utama h1 { font-size: clamp(3.25rem, 9.4vw, 9.5rem); max-width: 11.5ch; }
.pembuka-dalam h1 { font-size: clamp(2.75rem, 7vw, 7rem); max-width: 14ch; }
.pembuka-bawah { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; margin-top: clamp(36px, 5vw, 64px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.5); }
.pembuka-ringkas { max-width: 36em; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; color: #FFFFFF; }
.pembuka-bawah .baris-tombol { margin-top: 0; justify-content: flex-end; }
.keterangan-foto { position: absolute; z-index: 1; top: 16px; right: var(--tepi); padding: 2px 10px; background: rgba(15, 20, 17, 0.72); color: #FFFFFF; font-size: 0.75rem; }

.garis-intro { border-bottom: 1px solid var(--garis); }
.dua-kolom-sempit { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px clamp(32px, 6vw, 96px); align-items: start; }
.garis-intro .dua-kolom-sempit { padding-block: clamp(36px, 5vw, 72px); }
.garis-intro .teks-besar { max-width: 38em; font-size: clamp(1.125rem, 1.6vw, 1.5rem); color: var(--tinta); }

/* pita indeks bidang kerja: garis tipis seperti daftar isi gambar */
.pita-indeks { border-bottom: 1px solid var(--garis); background: var(--kertas); }
.pita-indeks-daftar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 auto; padding-block: 0; list-style: none; }
.pita-indeks-daftar li + li { border-left: 1px solid var(--garis); }
.pita-indeks-daftar a { display: flex; align-items: baseline; gap: 12px; min-height: 72px; padding: 20px 16px; font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: background-color 0.2s; }
.pita-indeks-daftar li:first-child a { padding-left: 0; }
.pita-indeks-daftar a:hover { background: var(--batu-2); }
.pita-indeks-daftar li:first-child a:hover { background: transparent; text-decoration: underline; text-underline-offset: 5px; }
.pita-indeks .no { font-family: var(--serif); font-size: 0.875rem; color: var(--oksida-teks); font-variant-numeric: tabular-nums; }

/* ---------- bagian ---------- */
.bagian { padding-block: var(--jarak); }
.bagian-rapat { padding-top: 0; }
.garis-intro + .bagian-rapat { padding-top: clamp(32px, 4vw, 56px); }
.bagian-abu { background: var(--batu-2); }
.bagian-garis { border-top: 1px solid var(--garis); }
.bagian-gelap { background: var(--hijau-tua); color: #EEEBE5; }
.bagian-gelap h2, .bagian-gelap h3 { color: #F4F1EB; }
.kepala-bagian { margin-bottom: clamp(40px, 5vw, 72px); }
.kepala-bagian > h2, .kepala-bagian > div > h2 { max-width: 20ch; }
.kepala-bagian h2 { margin-top: 20px; }
.kepala-baris { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 32px; }
.profil { padding-bottom: clamp(48px, 6vw, 88px); }
.profil .dua-kolom-sempit h2 + .teks-besar { margin-top: 28px; max-width: 40em; }

/* daftar layanan: baris bernomor dengan garis tipis */
.daftar-layanan { margin: 0 auto; padding-block: 0; list-style: none; }
.daftar-layanan li { border-top: 1px solid var(--garis); }
.daftar-layanan li:last-child { border-bottom: 1px solid var(--garis); }
.daftar-layanan a { display: grid; grid-template-columns: 72px minmax(0, 5fr) minmax(0, 5fr) 48px; gap: 8px 32px; align-items: center; padding: 30px 0; text-decoration: none; transition: background-color 0.25s var(--kurva), padding 0.35s var(--kurva); }
.daftar-layanan a:hover { background: var(--batu-2); padding-inline: 16px; }
.daftar-layanan a:focus-visible { outline-offset: -3px; }
.dl-no { font-family: var(--serif); font-size: 1rem; color: var(--oksida-teks); font-variant-numeric: tabular-nums; }
.dl-judul { font-family: var(--serif); font-size: clamp(1.375rem, 2.4vw, 2.125rem); font-weight: 360; line-height: 1.15; letter-spacing: -0.015em; }
.dl-teks { color: var(--abu); font-size: 1rem; }
.dl-panah { display: flex; justify-content: flex-end; color: var(--oksida); }
.dl-panah .panah { width: 24px; height: 24px; transition: transform 0.3s var(--kurva); }
.daftar-layanan a:hover .dl-panah .panah { transform: translateX(6px); }

/* jenis proyek: empat foto sebagai pintu ke saringan */
.jenis-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.jenis { display: block; text-decoration: none; }
.jenis-foto { overflow: hidden; background: var(--batu-2); }
.jenis-foto picture, .jenis-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.jenis-foto img { transition: transform 1.2s var(--kurva); }
.jenis:hover .jenis-foto img { transform: scale(1.04); }
.jenis-nama { display: block; margin-top: 16px; font-family: var(--serif); font-size: 1.5rem; font-weight: 380; letter-spacing: -0.01em; }
.jenis-jumlah { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--garis); font-size: 0.875rem; color: var(--abu); }
.jenis:hover .jenis-nama { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.jenis:focus-visible { outline-offset: 6px; }

/* pita foto penuh lebar */
.pita-foto { margin: 0; background: var(--tinta); }
.pita-foto picture { overflow: hidden; }
.pita-foto img { width: 100%; max-height: 560px; object-fit: cover; }
.pita-foto figcaption { padding-block: 16px; font-size: 0.875rem; color: #C9D1CB; }

/* ---------- indeks proyek: tabel bernomor ala katalog ---------- */
.indeks { width: 100%; border-collapse: collapse; }
.indeks thead th { padding: 14px 12px 14px 0; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--garis); text-align: left; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--abu); }
.indeks td { padding: 24px 12px 24px 0; border-bottom: 1px solid var(--garis); vertical-align: top; }
.indeks tbody tr { transition: background-color 0.2s; }
.indeks tbody tr:hover { background: rgba(31, 36, 33, 0.035); }
.indeks tr[hidden] { display: none !important; }
.k-no { width: 72px; font-family: var(--serif); font-size: 1.25rem; font-variant-numeric: lining-nums tabular-nums; color: var(--oksida-teks); }
.k-proyek { width: 34%; }
.k-proyek strong { display: block; font-family: var(--serif); font-size: clamp(1.1875rem, 1.7vw, 1.5rem); font-weight: 380; line-height: 1.2; letter-spacing: -0.01em; }
.tag-kategori { display: block; margin-top: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oksida-teks); }
.k-lokasi { width: 16%; }
.k-tahun { width: 84px; font-variant-numeric: tabular-nums; }
.k-lingkup { color: var(--abu); }
.l-mobil { display: none; }

/* saringan kategori */
.saring { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; background: transparent; border: 1px solid var(--tinta); border-radius: 0; font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.chip:hover { background: var(--batu-2); }
.chip[aria-pressed='true'] { background: var(--tinta); color: var(--batu); }
.chip-jumlah { font-family: var(--serif); font-size: 0.9375rem; font-variant-numeric: lining-nums tabular-nums; opacity: 0.8; }
.hasil-saring { margin-block: 28px 20px; font-size: 1rem; color: var(--abu); }
.hasil-saring strong { font-family: var(--serif); font-size: 1.375rem; font-weight: 420; color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }
.hasil-saring #nama-saring:not(:empty)::before { content: ' · '; }

/* ---------- tahapan kerja: tab / stepper ---------- */
.tahapan { --t-teks: var(--tinta); --t-redup: var(--abu); --t-garis: var(--garis); --t-aksen: var(--oksida); --t-sel: rgba(47, 93, 80, 0.09); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.bagian-gelap .tahapan { --t-teks: #F4F1EB; --t-redup: var(--redup-terang); --t-garis: var(--garis-gelap); --t-aksen: #8FB8A9; --t-sel: rgba(238, 235, 229, 0.08); }
.tahap-daftar { display: flex; flex-direction: column; border-bottom: 1px solid var(--t-garis); }
.tahap-tab { position: relative; display: flex; align-items: center; gap: 20px; width: 100%; min-height: 64px; padding: 12px 16px; background: none; border: 0; border-top: 1px solid var(--t-garis); border-radius: 0; text-align: left; color: var(--t-redup); cursor: pointer; transition: background-color 0.25s var(--kurva), color 0.25s var(--kurva), padding 0.3s var(--kurva); }
.tahap-tab:hover { color: var(--t-teks); }
.tahap-tab:focus-visible { outline: 3px solid var(--t-aksen); outline-offset: -3px; }
.tahap-tab[aria-selected='true'] { background: var(--t-sel); color: var(--t-teks); }
.tahap-tab[aria-selected='true']::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--t-aksen); }
.tab-no { flex: none; width: 2.2em; font-family: var(--serif); font-size: 1.125rem; font-variant-numeric: lining-nums tabular-nums; color: var(--t-aksen); }
.tab-judul { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; }
.tahap-panel { padding-block: 4px; }
.tahap-panel:focus-visible { outline-offset: 8px; outline-color: var(--t-aksen); }
.tahap-no { font-family: var(--serif); font-size: clamp(4rem, 9vw, 8rem); font-weight: 240; line-height: 0.9; color: var(--t-aksen); font-variant-numeric: lining-nums; }
.tahap-panel h3 { margin-top: 20px; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 360; color: var(--t-teks); }
.tahap-panel .teks-besar { max-width: 36em; margin-top: 18px; color: var(--t-redup); }
.tahap-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 36px; }
.tahap-dua h4 { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-aksen); }
.tahap-dua ul { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--t-garis); }
.tahap-dua li { padding: 12px 0; border-bottom: 1px solid var(--t-garis); color: var(--t-teks); font-size: 1rem; }
.js .tahap-panel:not([hidden]) { animation: tahap-masuk 0.45s var(--kurva) both; }
@keyframes tahap-masuk { from { opacity: 0; transform: translateY(10px); } }
.no-js .tahap-daftar { display: none; }
.no-js .saring, .no-js .hasil-saring { display: none; }
.no-js .tahap-panel + .tahap-panel { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--t-garis); }

/* ---------- layanan: baris berselang-seling ---------- */
.selang { display: grid; gap: 0; }
.selang-baris { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(40px, 7vw, 112px); align-items: center; padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--garis); scroll-margin-top: 100px; }
.selang-baris:last-child { border-bottom: 1px solid var(--garis); }
.selang-baris:nth-child(even) .selang-foto { order: 2; }
.selang-foto { overflow: hidden; background: var(--batu-2); }
.selang-foto picture, .selang-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.selang-foto img { transition: transform 1.4s var(--kurva); }
.selang-baris:hover .selang-foto img { transform: scale(1.03); }
.selang-teks h2 { margin-top: 14px; font-size: clamp(1.75rem, 2.8vw, 2.5rem); max-width: 18ch; }
.selang-teks .teks-besar { margin-top: 18px; }
.daftar-garis { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--garis); }
.daftar-garis li { padding: 12px 0; border-bottom: 1px solid var(--garis); color: var(--tinta); font-size: 1rem; }
.standar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; padding-block: 0; list-style: none; }
.standar li { padding-top: 22px; border-top: 1px solid var(--tinta); }
.standar h3 { margin-top: 18px; font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 380; }
.standar h3 + p { margin-top: 10px; color: var(--abu); font-size: 1rem; }

/* ---------- galeri ---------- */
.galeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.galeri-item picture { overflow: hidden; background: var(--batu); }
.galeri-item picture, .galeri-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.galeri-item img { transition: transform 1.2s var(--kurva); }
.galeri-item:hover img { transform: scale(1.04); }
.galeri-item figcaption { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--garis); }
.galeri-jenis { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oksida-teks); }

/* ---------- tentang ---------- */
.misi { margin: 32px 0 0; padding: 0; list-style: none; counter-reset: misi; border-top: 1px solid var(--garis); }
.misi li { position: relative; counter-increment: misi; padding: 20px 0 20px 56px; border-bottom: 1px solid var(--garis); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
.misi li::before { content: counter(misi, decimal-leading-zero); position: absolute; left: 0; top: 20px; font-family: var(--serif); color: var(--oksida-teks); font-variant-numeric: lining-nums; }
.daftar-data { margin-top: 32px; border-top: 1px solid var(--tinta); }
.daftar-data > div { display: grid; grid-template-columns: minmax(130px, 2fr) minmax(0, 5fr); gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--garis); }
.daftar-data dt { font-size: 0.9375rem; color: var(--abu); }
.daftar-data dd { color: var(--tinta); }
.daftar-data a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; text-underline-offset: 4px; }
.daftar-kredit { margin-top: 28px; padding: 0; list-style: none; border-top: 1px solid var(--garis); font-size: 0.9375rem; color: var(--abu); }
.daftar-kredit li { padding: 14px 0; border-bottom: 1px solid var(--garis); overflow-wrap: anywhere; }
.daftar-kredit a { color: var(--tinta); text-underline-offset: 3px; }

/* ---------- ajakan ---------- */
.ajakan { padding-block: clamp(72px, 9vw, 128px); background: var(--batu-2); border-top: 1px solid var(--garis); }
.ajakan-isi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(40px, 6vw, 112px); align-items: end; }
.ajakan h2 { margin-top: 20px; font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 330; line-height: 1.04; letter-spacing: -0.03em; max-width: 14ch; }
.ajakan-kanan > p { font-size: 1.125rem; color: var(--abu); }

/* ---------- kontak & formulir ---------- */
.kontak { padding-top: clamp(48px, 6vw, 88px); }
.kontak-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px clamp(40px, 6vw, 112px); align-items: start; }
.kontak-info h1 { margin-top: 24px; font-size: clamp(2.75rem, 6vw, 5.5rem); font-weight: 330; line-height: 0.98; letter-spacing: -0.035em; }
.kontak-info .teks-besar { margin-top: 24px; }
.formulir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: clamp(24px, 3.5vw, 48px); background: var(--kertas); border: 1px solid var(--garis); }
.isian { display: grid; gap: 8px; }
.isian-dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.isian label, .isian legend { font-size: 0.875rem; font-weight: 600; color: var(--abu); }
.isian legend { margin-bottom: 8px; padding: 0; }
.isian input, .isian select, .isian textarea { width: 100%; min-height: 52px; padding: 12px 14px; background: #FFFFFF; border: 1px solid #7D837E; border-radius: 0; transition: border-color 0.2s; }
.isian textarea { resize: vertical; min-height: 116px; }
.isian select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%231F2421' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.isian input:focus, .isian select:focus, .isian textarea:focus { outline: 2px solid var(--oksida); outline-offset: 0; border-color: var(--oksida); }
.isian [aria-invalid='true'] { border-color: #B3261E; border-width: 2px; }
.pilihan-daftar { display: flex; flex-wrap: wrap; gap: 8px; }
.pilihan-item { position: relative; display: inline-flex; }
.pilihan-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilihan-item span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: #FFFFFF; border: 1px solid #7D837E; font-size: 0.9375rem; font-weight: 500; color: var(--tinta); cursor: pointer; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.pilihan-item input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--batu); }
.pilihan-item input:focus-visible + span { outline: 3px solid var(--oksida); outline-offset: 2px; }
.pesan-galat { padding: 12px 16px; border: 2px solid #B3261E; color: #8C1D18; font-size: 0.9375rem; background: #FFFFFF; }
.formulir .tombol { justify-self: start; }
.formulir .catatan { margin-top: 0; }

/* 404 */
.halaman-404 { min-height: 62vh; display: flex; align-items: center; }
.halaman-404 h1 { margin-top: 20px; font-size: clamp(2.75rem, 7vw, 6rem); font-weight: 330; line-height: 1; letter-spacing: -0.035em; }
.halaman-404 .teks-besar { margin-top: 20px; max-width: 32em; }

/* ---------- kaki ---------- */
.kaki { background: var(--tinta); color: #AEB8B1; font-size: 0.9375rem; }
.kaki-atas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 48px; padding-block: clamp(56px, 7vw, 96px) 48px; }
.kaki-nama { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 360; letter-spacing: -0.015em; color: #F4F1EB; text-decoration: none; }
.kaki-merek p { max-width: 26em; margin-top: 20px; }
.kaki-kolom h2 { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #8F9B94; }
.kaki-kolom ul { margin-top: 12px; padding: 0; list-style: none; }
.kaki-kolom li a, .kaki-kolom p a { display: inline-flex; align-items: center; min-height: 44px; color: #F4F1EB; text-decoration: none; }
.kaki-kolom li a:hover, .kaki-kolom p a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kaki-kolom address { margin-top: 16px; color: #F4F1EB; }
.kaki-kolom p { margin-top: 6px; }
.kaki-catatan { font-size: 0.875rem; }
.kaki-bawah { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-block: 18px 26px; border-top: 1px solid #3A423E; font-size: 0.8125rem; }
.kaki-bawah a { display: inline-flex; align-items: center; min-height: 44px; color: #F4F1EB; text-underline-offset: 4px; }

/* muncul saat digulir */
.js [data-muncul] { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--kurva), transform 0.9s var(--kurva); transition-delay: var(--tunda, 0ms); }
.js [data-muncul].terlihat { opacity: 1; transform: none; }

/* transisi antarhalaman: lembar gambar baru "digeser" masuk dari kanan, lembar lama bergeser pelan ke kiri */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .pita-contoh { view-transition-name: pita; }
  .bilah { view-transition-name: bilah; }
  ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
  ::view-transition-old(root) { animation: ak-lama 0.8s cubic-bezier(0.76, 0, 0.24, 1) both; }
  ::view-transition-new(root) { animation: ak-buka 0.8s cubic-bezier(0.76, 0, 0.24, 1) both; }
  ::view-transition-old(bilah), ::view-transition-new(bilah), ::view-transition-old(pita), ::view-transition-new(pita) { animation-duration: 0.3s; }
  html.ganti-bahasa-jalan::view-transition-old(root) { animation: none; }
  html.ganti-bahasa-jalan::view-transition-new(root) { animation: ak-pudar 0.3s ease both; }
}
@keyframes ak-buka { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes ak-lama { to { transform: translateX(-6%); opacity: 0.4; } }
@keyframes ak-pudar { from { opacity: 0; } }

/* ---------- layar sedang ---------- */
@media (max-width: 1180px) { .bilah-cta { display: none; } }
@media (max-width: 1100px) {
  .jenis-grid, .galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .tombol-menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: var(--tinta); }
  .garis-menu, .garis-menu::before, .garis-menu::after { display: block; width: 24px; height: 2px; background: currentColor; transition: transform 0.3s var(--kurva); }
  .garis-menu { position: relative; }
  .garis-menu::before, .garis-menu::after { content: ''; position: absolute; left: 0; }
  .garis-menu::before { top: -8px; }
  .garis-menu::after { top: 8px; }
  .tombol-menu[aria-expanded='true'] .garis-menu { background: transparent; }
  .tombol-menu[aria-expanded='true'] .garis-menu::before { transform: translateY(8px) rotate(45deg); }
  .tombol-menu[aria-expanded='true'] .garis-menu::after { transform: translateY(-8px) rotate(-45deg); }
  .navigasi {
    position: fixed; inset: var(--atas-menu, 76px) 0 0 0; z-index: 49;
    flex-direction: column; align-items: stretch; justify-content: space-between; gap: 32px;
    padding: 16px var(--tepi) 40px; background: var(--batu); overflow-y: auto;
    visibility: hidden; opacity: 0; transition: opacity 0.25s var(--kurva), visibility 0s 0.25s;
  }
  .menu-terbuka .navigasi { visibility: visible; opacity: 1; transition: opacity 0.25s var(--kurva); }
  .menu-terbuka { overflow: hidden; }
  .menu-terbuka .bilah { border-bottom-color: var(--tinta); }
  .navigasi ul { flex-direction: column; gap: 0; }
  .navigasi a:not(.tombol) { min-height: 68px; padding: 0; border-bottom: 1px solid var(--garis); font-family: var(--serif); font-size: 2rem; font-weight: 340; letter-spacing: -0.02em; color: var(--tinta); }
  .navigasi a[aria-current='page']::after { display: none; }
  .navigasi a[aria-current='page'] { color: var(--oksida); }
  .navigasi .navigasi-cta { display: inline-flex; align-self: flex-start; }
  .merek, .bilah-kanan { position: relative; z-index: 2; }

  .pembuka-bawah { grid-template-columns: minmax(0, 1fr); }
  .pembuka-bawah .baris-tombol { justify-content: flex-start; }
  .dua-kolom-sempit, .selang-baris, .kontak-grid, .ajakan-isi { grid-template-columns: minmax(0, 1fr); }
  .garis-intro .dua-kolom-sempit > span:empty { display: none; }
  .selang-baris:nth-child(even) .selang-foto { order: 0; }
  .pita-indeks-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pita-indeks-daftar li + li { border-left: 0; }
  .pita-indeks-daftar li { border-top: 1px solid var(--garis); }
  .pita-indeks-daftar li:nth-child(odd) { border-right: 1px solid var(--garis); }
  .pita-indeks-daftar li:nth-child(-n+2) { border-top: 0; }
  .pita-indeks-daftar li:first-child a { padding-left: 0; }
  .pita-indeks-daftar a { padding-left: 16px; }
  .standar { grid-template-columns: minmax(0, 1fr); }
  .kaki-atas { grid-template-columns: 1fr 1fr; }
  .kaki-merek { grid-column: 1 / -1; }
  .daftar-layanan a { grid-template-columns: 56px minmax(0, 1fr) 32px; }
  .daftar-layanan .dl-teks { grid-column: 2 / 3; }
  .dl-panah { grid-row: 1 / span 2; grid-column: 3; }

  /* tab: deretan nomor di atas, isi di bawah */
  .tahapan { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tahap-daftar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; border-bottom: 0; }
  .tahap-tab { justify-content: center; min-height: 52px; padding: 0; border: 1px solid var(--t-garis); }
  .tahap-tab[aria-selected='true'] { padding-left: 0; background: var(--t-aksen); color: var(--hijau-tua); border-color: var(--t-aksen); }
  .tahap-tab[aria-selected='true']::before { display: none; }
  .tahap-tab[aria-selected='true'] .tab-no { color: inherit; }
  .tab-no { width: auto; }
  .tab-judul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- tabel jadi susunan tumpuk ---------- */
@media (max-width: 760px) {
  .indeks, .indeks tbody, .indeks tr, .indeks td { display: block; width: auto; }
  .indeks thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .indeks tbody { border-top: 1px solid var(--tinta); }
  .indeks tr { padding: 22px 0; border-bottom: 1px solid var(--garis); }
  .indeks td { padding: 0; border: 0; }
  .indeks td.k-no { width: auto; margin-bottom: 8px; font-size: 1rem; }
  .indeks td.k-proyek { width: auto; }
  .indeks td.k-lokasi, .indeks td.k-tahun { display: inline; width: auto; margin-right: 14px; font-size: 0.9375rem; color: var(--abu); }
  .indeks td.k-lingkup { margin-top: 10px; font-size: 0.9375rem; }
  .l-mobil { display: inline; color: var(--abu); }
  .k-no .l-mobil { display: none; }
  .indeks td.k-lokasi { margin-top: 12px; }
}

@media (max-width: 860px) {
  .tahap-dua { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---------- HP ---------- */
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .bilah { height: 68px; }
  .navigasi { inset: var(--atas-menu, 68px) 0 0 0; }
  .merek-teks small { display: none; }
  .merek-teks strong { font-size: 1.125rem; }
  .pembuka-utama { min-height: clamp(520px, calc(100svh - 150px), 760px); }
  .pembuka-utama h1 { font-size: clamp(2.75rem, 13vw, 4rem); }
  .pembuka-dalam h1 { font-size: clamp(2.375rem, 11vw, 3.5rem); }
  .keterangan-foto { top: 10px; }
  .baris-tombol .tombol { flex: 1 1 100%; }
  .pita-indeks-daftar { grid-template-columns: minmax(0, 1fr); }
  .pita-indeks-daftar li:nth-child(odd) { border-right: 0; }
  .pita-indeks-daftar li:nth-child(2) { border-top: 1px solid var(--garis); }
  .pita-indeks-daftar li:first-child a, .pita-indeks-daftar a { padding-left: 0; }
  .jenis-grid, .galeri { grid-template-columns: minmax(0, 1fr); }
  .daftar-data > div { grid-template-columns: minmax(0, 1fr); }
  .isian-dua { grid-template-columns: minmax(0, 1fr); }
  .kaki-atas { grid-template-columns: minmax(0, 1fr); }
  .formulir .tombol { justify-self: stretch; }
  .tombol { white-space: normal; text-align: center; padding: 12px 24px; }
  .daftar-layanan a:hover { padding-inline: 0; }
  .tahap-dua { margin-top: 28px; }
}
@media (max-width: 420px) {
  .merek-teks strong { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js [data-muncul] { opacity: 1; transform: none; }
  .js .pembuka-foto img { transform: none; }
}