/* Contoh website CV Baja Karsa Teknik (fabrikasi & bengkel las) — desain datar: tanpa gradasi, tanpa bayangan.
   Arah: industri tegas & teknis. Latar baja gelap #15171A + bagian abu plat #E6E7E8 + oranye percikan las #FF6A13,
   kisi cetak biru (SVG), garis ukur, sudut plat terpotong. Huruf: Barlow Condensed (judul) + Barlow (isi). */

@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/barlow-condensed-800.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/barlow-600.woff2') format('woff2'); }

:root {
  --baja: #15171A;
  --baja-2: #1D2024;
  --baja-3: #2A2E33;
  --garis-gelap: #343940;
  --plat: #E6E7E8;
  --plat-2: #F4F5F5;
  --garis-terang: #C3C7CB;
  --putih: #FFFFFF;
  --oranye: #FF6A13;
  --oranye-tua: #A83B08;
  --tinta: #15171A;
  --tinta-2: #3A3F45;
  --abu: #565C64;
  --redup-terang: #A9AFB6;
  --huruf-judul: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --huruf: 'Barlow', system-ui, 'Segoe UI', Arial, sans-serif;
  --lebar: 1280px;
  --tepi: clamp(20px, 4.2vw, 56px);
  --kurva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --potong: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--baja); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--baja); color: var(--plat); font-family: var(--huruf); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, picture { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-family: var(--huruf-judul); font-weight: 800; text-transform: uppercase; line-height: 0.95; letter-spacing: 0.005em; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--oranye); outline-offset: 3px; }
.bagian-terang :focus-visible, .bagian-abu :focus-visible { outline-color: var(--oranye-tua); }
.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: -64px; z-index: 100; padding: 12px 16px; background: var(--oranye); color: var(--baja); font-weight: 600; text-decoration: none; }
.lompat-isi:focus { top: 12px; }

/* ---------- pita CONTOH ---------- */
.pita-contoh { background: #0C0D0F; color: var(--redup-terang); font-size: 0.8125rem; line-height: 1.45; border-bottom: 1px solid var(--garis-gelap); }
.pita-contoh-isi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-block: 7px; }
.pita-contoh p { margin: 0; flex: 1 1 280px; }
.lencana-contoh { padding: 2px 10px; background: var(--oranye); color: var(--baja); font-family: var(--huruf-judul); font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.12em; line-height: 1.5; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.pita-contoh a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -7px; color: var(--plat); font-weight: 600; text-underline-offset: 4px; text-decoration-color: var(--oranye); }

/* ---------- bilah atas ---------- */
.bilah { position: sticky; top: 0; z-index: 50; background: var(--baja); border-bottom: 1px solid var(--garis-gelap); }
.bilah-isi { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.merek { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; color: var(--plat); }
.merek-logo { width: 44px; height: 44px; flex: none; }
.merek-teks { display: flex; flex-direction: column; line-height: 1; }
.merek-teks strong { font-family: var(--huruf-judul); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.04em; text-transform: uppercase; }
.merek-teks small { margin-top: 4px; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--redup-terang); }
.navigasi ul { display: flex; gap: 2px; }
.navigasi a { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; font-family: var(--huruf-judul); font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--plat); }
.navigasi a:hover { color: var(--oranye); }
.navigasi a[aria-current='page'] { color: var(--oranye); }
.navigasi a[aria-current='page']::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; background: var(--oranye); }
.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: 48px; min-height: 48px; padding: 0 10px; background: none; border: 0; cursor: pointer; font-family: var(--huruf-judul); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.08em; color: var(--redup-terang); }
.ganti-bahasa .b-pisah { opacity: 0.5; }
html[lang='id'] .ganti-bahasa .b-id, html[lang='en'] .ganti-bahasa .b-en { color: var(--oranye); }
.tombol-menu { display: none; }

/* ---------- tombol: sudut plat terpotong ---------- */
.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 0; cursor: pointer; font-family: var(--huruf-judul); font-weight: 800; font-size: 1.1875rem; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; text-align: center; line-height: 1.1;
  clip-path: polygon(var(--potong) 0, 100% 0, 100% calc(100% - var(--potong)), calc(100% - var(--potong)) 100%, 0 100%, 0 var(--potong)); transition: background-color 0.2s, color 0.2s; }
.tombol:focus-visible { outline-offset: -6px; }
.tombol-utama { background: var(--oranye); color: var(--baja); }
.tombol-utama:hover { background: #FF8540; }
.tombol-terang { background: var(--plat); color: var(--baja); }
.tombol-terang:hover { background: var(--putih); }
.tombol-gelap { background: var(--baja); color: var(--plat); }
.tombol-gelap:hover { background: var(--baja-3); }
.tombol-sekunder { background: var(--baja-3); color: var(--plat); }
.tombol-sekunder:hover { background: #3A3F46; }
.bilah-cta { display: none; }
.panah { width: 20px; height: 20px; flex: none; }
.baris-tombol { display: flex; flex-wrap: wrap; gap: 12px; }
.tautan-panah { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--huruf-judul); font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--oranye); }
.tautan-panah:hover { text-decoration: underline; text-underline-offset: 5px; }
.bagian-terang .tautan-panah, .bagian-abu .tautan-panah { color: var(--oranye-tua); }

/* ---------- label & judul bagian ---------- */
.label { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-family: var(--huruf-judul); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oranye); }
.label::before { content: ''; width: 36px; height: 2px; background: currentColor; }
.bagian-terang .label, .bagian-abu .label { color: var(--oranye-tua); }
.bagian { padding-block: clamp(64px, 9vw, 120px); position: relative; }
.bagian-terang { background: var(--plat); color: var(--tinta); }
.bagian-abu { background: var(--plat-2); color: var(--tinta); }
.bagian-gelap { background: var(--baja); color: var(--plat); }
.bagian-baja { background: var(--baja-2); color: var(--plat); }
.kisi-terang { background-image: url('../img/kisi-terang.svg'); background-size: 48px 48px; }
.kisi-gelap { background-image: url('../img/kisi-gelap.svg'); background-size: 48px 48px; }
.kepala-bagian { margin-bottom: clamp(32px, 5vw, 56px); }
.kepala-bagian h2, .judul-bagian { font-size: clamp(2.75rem, 6.2vw, 5.5rem); max-width: 14ch; }
.dua-kolom .judul-bagian, .hitung-grid .judul-bagian { font-size: clamp(2.5rem, 4.8vw, 4.5rem); max-width: 15ch; margin-bottom: 24px; }
.hitung-grid .daftar-centang { margin-top: 20px; }
.dua-kolom .daftar-data { margin-top: 28px; }
.dua-kolom .teks-besar { margin-bottom: 0; }
.kepala-bagian .teks-besar { margin-top: 20px; }
.teks-besar { font-size: 1.1875rem; line-height: 1.55; max-width: 56ch; color: var(--tinta-2); }
.bagian-gelap .teks-besar, .bagian-baja .teks-besar { color: var(--redup-terang); }
.catatan { margin-top: 18px; font-size: 0.875rem; line-height: 1.5; color: var(--abu); max-width: 70ch; }
.bagian-gelap .catatan, .bagian-baja .catatan { color: var(--redup-terang); }

/* ---------- garis ukur (dimension line) ---------- */
.ukur { display: flex; align-items: center; gap: 14px; color: var(--redup-terang); font-family: var(--huruf-judul); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.12em; line-height: 1; white-space: nowrap; }
.ukur i { position: relative; flex: 1; height: 1px; background: currentColor; }
.ukur i:first-child::before, .ukur i:last-child::before { content: ''; position: absolute; top: -8px; width: 1px; height: 17px; background: currentColor; }
.ukur i:first-child::before { left: 0; }
.ukur i:last-child::before { right: 0; }
.ukur i:first-child::after, .ukur i:last-child::after { content: ''; position: absolute; top: -4px; width: 9px; height: 9px; background: currentColor; }
.ukur i:first-child::after { left: 0; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.ukur i:last-child::after { right: 0; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.ukur-v { flex-direction: column; writing-mode: vertical-rl; transform: rotate(180deg); gap: 12px; }
.ukur-v i { flex: 1; width: 1px; height: auto; }
.ukur-v i:first-child::before, .ukur-v i:last-child::before { top: auto; left: -8px; width: 17px; height: 1px; }
.ukur-v i:first-child::before { bottom: 0; right: auto; top: auto; left: -8px; }
.ukur-v i:last-child::before { top: 0; right: auto; left: -8px; }
.ukur-v i:first-child::after, .ukur-v i:last-child::after { left: -4px; top: auto; width: 9px; height: 9px; }
.ukur-v i:first-child::after { bottom: 0; right: auto; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.ukur-v i:last-child::after { top: 0; bottom: auto; right: auto; clip-path: polygon(50% 0, 0 100%, 100% 100%); }

/* ---------- pembuka beranda: gelap penuh ---------- */
.pembuka { position: relative; isolation: isolate; background: var(--baja); overflow: hidden; }
.pembuka-foto, .pembuka-foto picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.pembuka-foto { z-index: -3; }
.pembuka-foto img { width: 100%; height: 100%; object-fit: cover; }
.js .pembuka-foto img { transform: scale(1.06); transition: transform 2.6s var(--kurva); }
.js .siap .pembuka-foto img { transform: scale(1); }
.pembuka-selubung { position: absolute; inset: 0; z-index: -2; background: rgba(21, 23, 26, 0.66); }
.pembuka-kisi { position: absolute; inset: 0; z-index: -1; background-image: url('../img/kisi-gelap.svg'); background-size: 48px 48px; }
.pembuka-isi { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: clamp(10px, 2vw, 28px); padding-block: clamp(36px, 6vw, 72px) clamp(28px, 4vw, 48px); min-height: min(86vh, 860px); align-content: end; }
.pembuka-isi > .ukur-v { grid-row: 1 / span 2; font-size: 0.8125rem; }
.pembuka-atas { grid-column: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: clamp(20px, 4vw, 56px); }
.pembuka-tengah { grid-column: 2; }
.pembuka-bawah { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-top: clamp(24px, 3.5vw, 40px); }
.blok-judul { display: grid; grid-template-columns: auto auto; border: 1px solid var(--redup-terang); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plat); background: rgba(21, 23, 26, 0.7); }
.blok-judul > div { padding: 8px 14px; border: 0 solid var(--redup-terang); }
.blok-judul > div:nth-child(odd) { border-right-width: 1px; }
.blok-judul > div:nth-child(-n + 2) { border-bottom-width: 1px; }
.blok-judul b { display: block; font-family: var(--huruf-judul); font-size: 1.0625rem; letter-spacing: 0.08em; color: var(--oranye); }
.judul-raksasa { font-size: clamp(3.8rem, 14.5vw, 14rem); line-height: 0.84; letter-spacing: -0.005em; }
.judul-raksasa .h-baris { display: block; }
.judul-raksasa .h-oranye { color: var(--oranye); }
.js .judul-raksasa .h-baris { opacity: 0; transform: translateY(34%); transition: opacity 0.8s var(--kurva), transform 0.8s var(--kurva); }
.js .siap .judul-raksasa .h-baris { opacity: 1; transform: none; }
.js .siap .judul-raksasa .h-baris:nth-child(2) { transition-delay: 0.1s; }
.js .siap .judul-raksasa .h-baris:nth-child(3) { transition-delay: 0.2s; }
.pembuka-tengah .ukur { margin-top: clamp(16px, 2.4vw, 28px); max-width: 100%; }
.pembuka-ringkas { margin: 0 0 22px; max-width: 50ch; font-size: 1.1875rem; line-height: 1.5; color: var(--plat); }
.pembuka-spek { display: grid; grid-template-columns: repeat(2, auto); gap: 0; border: 1px solid var(--garis-gelap); background: rgba(21, 23, 26, 0.72); }
.pembuka-spek div { padding: 12px 20px; border-right: 1px solid var(--garis-gelap); }
.pembuka-spek div:last-child { border-right: 0; }
.pembuka-spek dt { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--redup-terang); }
.pembuka-spek dd { font-family: var(--huruf-judul); font-weight: 800; font-size: 1.75rem; line-height: 1.1; color: var(--plat); }
.pembuka-keterangan { position: absolute; right: var(--tepi); top: 14px; font-size: 0.75rem; color: var(--redup-terang); }

/* pembuka halaman dalam */
.pembuka-dalam .pembuka-isi { min-height: clamp(380px, 52vh, 520px); }
.pembuka-dalam .judul-raksasa { font-size: clamp(3.4rem, 10vw, 9rem); }
.pembuka-dalam .pembuka-selubung { background: rgba(21, 23, 26, 0.74); }
.pembuka-dalam .pembuka-ringkas { margin-top: 20px; margin-bottom: 0; }

/* ---------- layanan: lembar gambar (petak dengan tanda potong) ---------- */
.petak-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.petak { position: relative; display: flex; flex-direction: column; background: var(--putih); border: 1px solid var(--garis-terang); }
.petak::before, .petak::after { content: ''; position: absolute; width: 22px; height: 22px; border: 0 solid var(--oranye-tua); z-index: 2; pointer-events: none; }
.petak::before { top: -1px; left: -1px; border-top-width: 3px; border-left-width: 3px; }
.petak::after { right: -1px; bottom: -1px; border-right-width: 3px; border-bottom-width: 3px; }
.petak-foto { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--baja-3); }
.petak-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--kurva); }
.petak:hover .petak-foto img { transform: scale(1.04); }
.petak-isi { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 22px 24px 20px; }
.kode { margin: 0 0 8px; font-family: var(--huruf-judul); font-weight: 700; font-size: 1rem; letter-spacing: 0.16em; color: var(--oranye-tua); }
.petak h3 { font-size: 2rem; margin-bottom: 10px; }
.petak-isi p { font-size: 1rem; color: var(--tinta-2); }
.petak-isi .tautan-panah { margin-top: auto; }

/* ---------- tabel kemampuan ---------- */
.tabel-bungkus { border: 1px solid var(--garis-gelap); background: rgba(21, 23, 26, 0.6); }
.tabel-kemampuan { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tabel-kemampuan caption { text-align: left; padding: 14px 20px; font-family: var(--huruf-judul); font-weight: 700; font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--redup-terang); border-bottom: 1px solid var(--garis-gelap); }
.tabel-kemampuan th, .tabel-kemampuan td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--garis-gelap); }
.tabel-kemampuan thead th { font-family: var(--huruf-judul); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oranye); background: var(--baja-2); }
.tabel-kemampuan tbody th { font-family: var(--huruf-judul); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.05; color: var(--plat); width: 24%; }
.tabel-kemampuan tbody tr:last-child > * { border-bottom: 0; }
.tabel-kemampuan .angka { font-family: var(--huruf-judul); font-weight: 800; font-size: 1.5rem; line-height: 1.1; white-space: nowrap; color: var(--plat); }
.tabel-kemampuan td { color: #C9CED3; font-size: 1.0625rem; }
.tabel-kemampuan .sel-label { display: none; }

/* ---------- kalkulator berat baja ---------- */
.hitung-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.kalkulator { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); background: var(--putih); border: 1px solid var(--tinta); }
.kalkulator::before { content: ''; position: absolute; top: -1px; left: -1px; width: 26px; height: 26px; border-top: 4px solid var(--oranye); border-left: 4px solid var(--oranye); z-index: 2; }
.kalkulator-isian { padding: clamp(20px, 2.6vw, 32px); }
.kalkulator-hasil { padding: clamp(20px, 2.6vw, 32px); background: var(--baja); color: var(--plat); display: flex; flex-direction: column; gap: 14px; }
.bentuk { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.bentuk legend, .isian label, .isian legend { padding: 0; margin-bottom: 8px; font-family: var(--huruf-judul); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.1em; text-transform: uppercase; }
.bentuk-daftar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bentuk-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 76px; padding: 8px 4px; border: 1px solid var(--garis-terang); background: var(--plat-2); cursor: pointer; text-align: center; font-family: var(--huruf-judul); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; }
.bentuk-item input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.bentuk-item svg { width: 30px; height: 30px; color: var(--tinta); }
.bentuk-item:has(input:checked) { background: var(--baja); color: var(--plat); border-color: var(--baja); }
.bentuk-item:has(input:checked) svg { color: var(--oranye); }
.bentuk-item:has(input:focus-visible) { outline: 3px solid var(--oranye-tua); outline-offset: 2px; }
.kelompok-ukuran[hidden] { display: none; }
.isian-dua, .isian-tiga { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.isian-tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.isian { display: flex; flex-direction: column; min-width: 0; margin-bottom: 14px; }
.isian-dua .isian, .isian-tiga .isian { margin-bottom: 0; }
.isian input, .isian select, .isian textarea { width: 100%; min-height: 50px; padding: 10px 14px; background: var(--putih); border: 1px solid var(--abu); border-radius: 0; font-size: 1.0625rem; color: var(--tinta); }
.isian textarea { min-height: 120px; resize: vertical; }
.isian input:focus-visible, .isian select:focus-visible, .isian textarea:focus-visible { outline: 3px solid var(--oranye-tua); outline-offset: 0; border-color: var(--tinta); }
.isian input[aria-invalid='true'] { border-color: #B3261E; border-width: 2px; }
.isian small { margin-top: 4px; font-size: 0.8125rem; color: var(--abu); }
.pesan-galat { margin: 0 0 14px; padding: 10px 14px; background: #FBE9E7; color: #8A1C14; border-left: 4px solid #B3261E; font-size: 0.9375rem; }
.pesan-galat[hidden] { display: none; }
.hasil-judul { margin: 0; font-family: var(--huruf-judul); font-weight: 700; font-size: 1rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oranye); }
.hasil { display: flex; flex-direction: column; gap: 14px; }
.hasil div { padding-bottom: 14px; border-bottom: 1px solid var(--garis-gelap); }
.hasil dt { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--redup-terang); }
.hasil dd { font-family: var(--huruf-judul); font-weight: 800; font-size: 2.5rem; line-height: 1.05; color: var(--plat); }
.hasil dd span { font-size: 1.25rem; font-weight: 700; color: var(--redup-terang); letter-spacing: 0.04em; }
.hasil .hasil-utama { padding-bottom: 14px; border-bottom: 2px solid var(--oranye); }
.hasil .hasil-utama dd { font-size: clamp(3.4rem, 6vw, 4.75rem); color: var(--oranye); }
.kalkulator-hasil .tombol { width: 100%; margin-top: auto; }
.kalkulator-catatan { grid-column: 1 / -1; margin: 0; padding: 14px clamp(20px, 2.6vw, 32px); border-top: 1px solid var(--garis-terang); background: var(--plat-2); font-size: 0.875rem; line-height: 1.5; color: var(--abu); }

/* ---------- alur kerja: garis ukur bertahap ---------- */
.alur { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; counter-reset: langkah; }
.alur::before { content: ''; position: absolute; left: var(--tepi); right: var(--tepi); top: 22px; height: 1px; background: var(--redup-terang); }
.alur li { position: relative; padding: 0 20px 0 0; }
.alur li::before { content: ''; position: absolute; left: 0; top: 14px; width: 1px; height: 17px; background: var(--redup-terang); }
.alur-no { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; margin-bottom: 20px; padding: 0 10px; background: var(--baja-2); font-family: var(--huruf-judul); font-weight: 800; font-size: 1.5rem; color: var(--oranye); position: relative; z-index: 1; margin-left: 12px; }
.alur h3 { font-size: 1.875rem; margin-bottom: 10px; }
.alur p { font-size: 1rem; color: var(--redup-terang); max-width: 28ch; }
.alur-bungkus { padding-inline: 0; }

/* ---------- lokasi & ajakan ---------- */
.dua-kolom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); align-items: start; }
.daftar-data { display: grid; gap: 0; border-top: 1px solid var(--garis-terang); }
.daftar-data > div { display: grid; grid-template-columns: minmax(110px, 0.35fr) 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--garis-terang); }
.daftar-data dt { font-family: var(--huruf-judul); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.1em; text-transform: uppercase; 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; text-decoration-color: var(--oranye-tua); font-weight: 600; }
.bagian-gelap .daftar-data, .bagian-gelap .daftar-data > div, .bagian-baja .daftar-data, .bagian-baja .daftar-data > div { border-color: var(--garis-gelap); }
.bagian-gelap .daftar-data dd, .bagian-baja .daftar-data dd { color: var(--plat); }
.bagian-gelap .daftar-data dt, .bagian-baja .daftar-data dt { color: var(--redup-terang); }
.bagian-gelap .daftar-data a, .bagian-baja .daftar-data a { text-decoration-color: var(--oranye); }
.lokasi-peta { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--garis-terang); background-color: var(--plat-2); background-image: url('../img/kisi-terang.svg'); background-size: 48px 48px; }
.lokasi-peta svg { width: 100%; height: 100%; }
.ajakan { background: var(--oranye); color: var(--baja); position: relative; overflow: hidden; }
.ajakan-isi { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px 64px; align-items: center; padding-block: clamp(52px, 7vw, 88px); }
.ajakan h2 { font-size: clamp(2.75rem, 6vw, 5.25rem); max-width: 13ch; }
.ajakan .label { color: var(--baja); }
.ajakan p { font-size: 1.1875rem; max-width: 46ch; }
.ajakan .tombol-gelap { background: var(--baja); color: var(--plat); }
.ajakan .tombol-terang { background: var(--plat); }
.ajakan :focus-visible { outline-color: var(--baja); }

/* ---------- layanan: baris rinci ---------- */
.selang { display: grid; gap: clamp(48px, 7vw, 96px); }
.selang-baris { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; scroll-margin-top: 96px; }
.selang-baris:nth-child(even) .selang-foto { order: 2; }
.selang-foto { position: relative; aspect-ratio: 3 / 2; background: var(--baja-3); }
.selang-foto::before, .selang-foto::after { content: ''; position: absolute; width: 28px; height: 28px; border: 0 solid var(--oranye-tua); z-index: 2; }
.selang-foto::before { top: -6px; left: -6px; border-top-width: 4px; border-left-width: 4px; }
.selang-foto::after { right: -6px; bottom: -6px; border-right-width: 4px; border-bottom-width: 4px; }
.selang-foto picture, .selang-foto img { width: 100%; height: 100%; object-fit: cover; }
.no-besar { margin: 0 0 6px; font-family: var(--huruf-judul); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.14em; color: var(--oranye-tua); }
.selang-teks h2 { font-size: clamp(2.5rem, 4.6vw, 4.25rem); margin-bottom: 18px; }
.lembar { margin: 24px 0; border: 1px solid var(--tinta); background: var(--putih); }
.lembar > div { display: grid; grid-template-columns: minmax(96px, 0.32fr) 1fr; border-bottom: 1px solid var(--garis-terang); }
.lembar > div:last-child { border-bottom: 0; }
.lembar dt { padding: 10px 14px; background: var(--plat); font-family: var(--huruf-judul); font-weight: 700; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-2); border-right: 1px solid var(--garis-terang); }
.lembar dd { padding: 10px 14px; font-size: 1rem; color: var(--tinta); }
.daftar-centang li { position: relative; padding: 5px 0 5px 28px; }
.daftar-centang li::before { content: ''; position: absolute; left: 0; top: 14px; width: 12px; height: 12px; background: var(--oranye-tua); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 40%, 40% 40%, 40% 0); }
.daftar-centang li::before { clip-path: polygon(0 40%, 40% 40%, 40% 0, 100% 0, 100% 100%, 0 100%); }
.bahan-foto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.bahan-foto figure { margin: 0; position: relative; }
.bahan-foto figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--redup-terang); }
.bahan-foto picture, .bahan-foto img { width: 100%; height: auto; }
.mitra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--garis-gelap); }
.mitra div { padding: 22px 24px; border-right: 1px solid var(--garis-gelap); }
.mitra div:last-child { border-right: 0; }
.mitra h3 { font-size: 1.75rem; margin-bottom: 8px; color: var(--plat); }
.mitra p { margin: 0; font-size: 1rem; color: var(--redup-terang); }

/* ---------- proyek ---------- */
.galeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.galeri-item { margin: 0; position: relative; background: var(--putih); border: 1px solid var(--garis-terang); }
.galeri-item .petak-foto { aspect-ratio: 3 / 2; }
.galeri-item figcaption { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 16px 18px 18px; }
.galeri-item .kode { margin: 0; grid-row: 1 / span 2; align-self: start; padding-top: 3px; }
.galeri-item strong { font-family: var(--huruf-judul); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; line-height: 1.05; }
.galeri-item span.ket { font-size: 0.9375rem; color: var(--tinta-2); }
.tabel-proyek { width: 100%; border-collapse: collapse; background: var(--putih); border: 1px solid var(--tinta); }
.tabel-proyek th, .tabel-proyek td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--garis-terang); }
.tabel-proyek thead th { background: var(--baja); color: var(--oranye); font-family: var(--huruf-judul); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.14em; text-transform: uppercase; }
.tabel-proyek tbody th { font-family: var(--huruf-judul); font-weight: 800; font-size: 1.375rem; text-transform: uppercase; line-height: 1.1; }
.tabel-proyek td { color: var(--tinta-2); }
.tabel-proyek .sel-label { display: none; }
.tabel-proyek tbody tr:last-child > * { border-bottom: 0; }

/* ---------- tentang ---------- */
.komitmen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--tinta); }
.komitmen li { padding: 24px 24px 8px 0; }
.komitmen li + li { padding-left: 24px; border-left: 1px solid var(--garis-terang); }
.komitmen h3 { font-size: 1.875rem; margin: 6px 0 10px; }
.komitmen p { font-size: 1rem; color: var(--tinta-2); }
.dokumen li { padding: 12px 0 12px 34px; position: relative; border-bottom: 1px solid var(--garis-gelap); }
.dokumen li::before { content: ''; position: absolute; left: 0; top: 18px; width: 16px; height: 12px; border: 2px solid var(--oranye); }
.daftar-kredit { display: grid; gap: 4px; font-size: 0.9375rem; color: var(--tinta-2); }
.daftar-kredit li { padding: 6px 0; border-bottom: 1px solid var(--garis-terang); }
.daftar-kredit a { color: var(--tinta); text-underline-offset: 3px; text-decoration-color: var(--oranye-tua); }
.judul-kecil { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 18px; }
.visi-misi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.visi-misi h3 { font-size: 2.25rem; margin-bottom: 10px; }
.visi-misi li { position: relative; padding: 6px 0 6px 28px; }
.visi-misi li::before { content: ''; position: absolute; left: 0; top: 16px; width: 14px; height: 2px; background: var(--oranye-tua); }


/* denah ilustrasi */
.denah text { font-family: var(--huruf-judul); fill: var(--tinta); text-anchor: middle; }
.denah .denah-besar { font-weight: 800; font-size: 21px; letter-spacing: 0.06em; }
.denah .denah-kecil { font-weight: 700; font-size: 15px; letter-spacing: 0.06em; fill: var(--abu); }
.denah .denah-ukur { font-weight: 700; font-size: 17px; letter-spacing: 0.1em; fill: var(--abu); }
.komitmen-gelap { border-top-color: var(--oranye); }
.komitmen-gelap li + li { border-left-color: var(--garis-gelap); }
.komitmen-gelap p { color: var(--redup-terang); }
.komitmen-gelap .no-besar { color: var(--oranye); }
.komitmen-gelap h3 { color: var(--plat); }

/* ---------- kontak ---------- */
.kontak-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.kontak-info h1 { font-size: clamp(3.4rem, 8vw, 7rem); margin-bottom: 20px; }
.formulir { position: relative; padding: clamp(22px, 3vw, 40px); background: var(--putih); border: 1px solid var(--tinta); color: var(--tinta); }
.formulir::before { content: ''; position: absolute; top: -1px; left: -1px; width: 26px; height: 26px; border-top: 4px solid var(--oranye); border-left: 4px solid var(--oranye); }
.formulir > .isian-dua { margin-bottom: 14px; }
.pilihan { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.pilihan-daftar { display: flex; flex-wrap: wrap; gap: 8px; }
.pilihan-item { position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border: 1px solid var(--abu); background: var(--plat-2); cursor: pointer; font-size: 1rem; }
.pilihan-item input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; min-height: 0; }
.isian .pilihan-item, .pilihan-item { font-family: var(--huruf); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 1rem; margin: 0; }
.pilihan-item:has(input:checked) { background: var(--baja); color: var(--plat); border-color: var(--baja); }
.pilihan-item:has(input:focus-visible) { outline: 3px solid var(--oranye-tua); outline-offset: 2px; }
.halaman-404 { min-height: 60vh; display: flex; align-items: center; }
.halaman-404 h1 { font-size: clamp(3.4rem, 9vw, 8rem); margin-bottom: 20px; }

/* ---------- kaki ---------- */
.kaki { background: #0C0D0F; color: var(--redup-terang); }
.kaki-atas { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 32px 48px; padding-block: 56px 36px; }
.kaki-merek p { margin: 16px 0 0; max-width: 38ch; font-size: 0.9375rem; }
.kaki h2 { margin-bottom: 12px; font-size: 1.125rem; letter-spacing: 0.16em; color: var(--oranye); font-weight: 700; }
.kaki ul { display: grid; }
.kaki a { display: inline-flex; align-items: center; min-height: 44px; color: var(--plat); text-underline-offset: 4px; text-decoration: none; }
.kaki a:hover, .kaki p a, .kaki-bawah a { text-decoration: underline; text-decoration-color: var(--oranye); }
.kaki address { font-style: normal; margin-bottom: 4px; font-size: 0.9375rem; }
.kaki-bawah { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-block: 16px 24px; border-top: 1px solid var(--garis-gelap); font-size: 0.8125rem; }
.kaki-bawah a { text-decoration-color: var(--oranye); }
.kaki-bawah p { margin: 0; }

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

/* ---------- transisi antarhalaman: celah las terbuka dari garis tengah ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  .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: bk-redup 0.8s cubic-bezier(0.7, 0, 0.2, 1) both; }
  ::view-transition-new(root) { animation: bk-celah 0.8s cubic-bezier(0.7, 0, 0.2, 1) both; }
  ::view-transition-old(bilah), ::view-transition-new(bilah), ::view-transition-old(pita), ::view-transition-new(pita) { animation-duration: 0.25s; }
  html.ganti-bahasa-jalan::view-transition-old(root) { animation: none; }
  html.ganti-bahasa-jalan::view-transition-new(root) { animation: bk-pudar 0.3s ease both; }
}
@keyframes bk-celah { from { clip-path: inset(49.5% 0 49.5% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bk-redup { from { opacity: 1; filter: none; } to { opacity: 0.4; filter: brightness(0.6); } }
@keyframes bk-pudar { from { opacity: 0; } }

/* ---------- responsif ---------- */
@media (max-width: 1180px) {
  .navigasi a { padding: 0 10px; font-size: 1.125rem; }
  .tabel-kemampuan tbody th { font-size: 1.3rem; }
}
@media (min-width: 1181px) {
  .bilah-cta { display: inline-flex; }
}
@media (max-width: 1020px) {
  .hitung-grid, .dua-kolom, .kontak-grid, .selang-baris, .bahan-foto, .ajakan-isi { grid-template-columns: minmax(0, 1fr); }
  .selang-baris:nth-child(even) .selang-foto { order: 0; }
  .petak-grid, .galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .komitmen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .komitmen li:nth-child(3) { padding-left: 0; border-left: 0; }
  .kaki-atas { grid-template-columns: 1fr 1fr; }
  .kaki-merek { grid-column: 1 / -1; }
  .alur { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 0; }
  .alur::before { left: 22px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .alur li { padding: 0 0 28px 72px; }
  .alur li::before { left: 14px; top: 22px; width: 17px; height: 1px; }
  .alur-no { position: absolute; left: 0; top: 0; margin: 0; }
  .alur li { padding-top: 6px; }
  .tombol-menu { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 8px 0 12px; background: none; border: 0; cursor: pointer; font-family: var(--huruf-judul); font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plat); }
  .garis-menu, .garis-menu::before, .garis-menu::after { display: block; width: 22px; height: 2px; background: currentColor; transition: transform 0.25s, opacity 0.25s; }
  .garis-menu { position: relative; }
  .garis-menu::before, .garis-menu::after { content: ''; position: absolute; left: 0; }
  .garis-menu::before { top: -7px; }
  .garis-menu::after { top: 7px; }
  .menu-terbuka .garis-menu { background: transparent; }
  .menu-terbuka .garis-menu::before { transform: translateY(7px) rotate(45deg); }
  .menu-terbuka .garis-menu::after { transform: translateY(-7px) rotate(-45deg); }
  .navigasi { position: fixed; left: 0; right: 0; top: var(--atas-menu, 110px); bottom: 0; z-index: 40; padding: 12px var(--tepi) 32px; background: var(--baja); overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0.2s; }
  .menu-terbuka .navigasi { visibility: visible; opacity: 1; }
  .navigasi ul { flex-direction: column; gap: 0; }
  .navigasi a { width: 100%; min-height: 60px; padding: 0; border-bottom: 1px solid var(--garis-gelap); font-size: 2rem; }
  .navigasi a[aria-current='page']::after { display: none; }
  .navigasi .navigasi-cta { display: inline-flex; width: 100%; margin-top: 24px; border-bottom: 0; font-size: 1.1875rem; padding: 0 28px; }
  .menu-terbuka { overflow: hidden; }
  .pembuka-bawah { grid-template-columns: minmax(0, 1fr); }
  .mitra { grid-template-columns: minmax(0, 1fr); }
  .mitra div { border-right: 0; border-bottom: 1px solid var(--garis-gelap); }
  .mitra div:last-child { border-bottom: 0; }
  .kalkulator { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .tabel-kemampuan thead, .tabel-proyek thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabel-kemampuan, .tabel-kemampuan tbody, .tabel-kemampuan tr, .tabel-kemampuan th, .tabel-kemampuan td,
  .tabel-proyek, .tabel-proyek tbody, .tabel-proyek tr, .tabel-proyek th, .tabel-proyek td { display: block; width: 100%; }
  .tabel-kemampuan tbody th { width: 100%; padding: 18px 18px 8px; border-bottom: 0; font-size: 1.75rem; }
  .tabel-kemampuan td { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 6px 18px; border-bottom: 0; }
  .tabel-kemampuan tr { padding-bottom: 14px; border-bottom: 1px solid var(--garis-gelap); }
  .tabel-kemampuan tbody tr:last-child { border-bottom: 0; }
  .tabel-kemampuan .sel-label, .tabel-proyek .sel-label { display: block; font-family: var(--huruf-judul); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oranye); }
  .tabel-proyek .sel-label { color: var(--oranye-tua); }
  .tabel-proyek tbody th { padding: 16px 16px 6px; border-bottom: 0; }
  .tabel-proyek td { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 4px 16px; border-bottom: 0; }
  .tabel-proyek tr { padding-bottom: 12px; border-bottom: 1px solid var(--garis-terang); }
  .tabel-proyek tbody tr:last-child { border-bottom: 0; }
  .pembuka-atas .blok-judul { display: none; }
  .tabel-kemampuan caption { display: block; width: 100%; }
}
@media (max-width: 640px) {
  .judul-raksasa { font-size: 19vw; }
  .pembuka-dalam .judul-raksasa { font-size: 13vw; }
  .petak-grid, .galeri, .komitmen, .visi-misi { grid-template-columns: minmax(0, 1fr); }
  .komitmen li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--garis-terang); }
  .komitmen li { padding: 20px 0; }
  .kaki-atas { grid-template-columns: minmax(0, 1fr); }
  .merek-teks small { display: none; }
  .merek-teks strong { font-size: 1.3125rem; }
  .pembuka-isi { grid-template-columns: 22px minmax(0, 1fr); min-height: 0; }
  .pembuka-spek { grid-template-columns: minmax(0, 1fr); }
  .pembuka-spek div { border-right: 0; border-bottom: 1px solid var(--garis-gelap); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .pembuka-spek div:last-child { border-bottom: 0; }
  .bentuk-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .isian-tiga { grid-template-columns: minmax(0, 1fr); }
  .isian-dua { grid-template-columns: minmax(0, 1fr); }
  .daftar-data > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tabel-kemampuan td, .tabel-proyek td { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lembar > div { grid-template-columns: minmax(0, 1fr); }
  .lembar dt { border-right: 0; padding-bottom: 4px; }
  .baris-tombol .tombol { width: 100%; }
  .kaki-bawah { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
  .merek-teks strong { font-size: 1.125rem; }
  .ganti-bahasa { min-width: 44px; padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-image-pair(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .js [data-muncul], .js .judul-raksasa .h-baris { opacity: 1; transform: none; }
  .js .pembuka-foto img { transform: none; }
}