/* ============================================================
   JOGIN Construction — "Lembar Gambar Kerja"
   ------------------------------------------------------------
   Bahasa visualnya SENGAJA berbeda dari situs Jogja Interior.
   Situs interior = ruang pamer malam hari: hitam, serif, moody.
   Situs ini      = meja gambar: kertas milimeter, tinta, garis
                    ukur, blok judul, dan angka bergaya mono.

   Kenapa: yang dijual di sini bukan suasana, tapi ketelitian.
   Kertas kerja adalah benda yang paling jujur di sebuah proyek.

   Dua mode: KERTAS (terang, default) dan CETAK BIRU (gelap).
   Emas JOGIN tetap dipakai, tapi hanya sebagai penanda merek —
   bukan warna dominan seperti di situs interior.
   ============================================================ */

/* ---------- 1. TOKEN ---------- */
:root {
  color-scheme: light;

  --kertas:    #f3f0e7;
  --kertas-2:  #fbf9f3;
  --kertas-3:  #e7e2d4;
  --kertas-4:  #dcd6c4;

  --tinta:     #14171b;
  --tinta-2:   #4b535d;
  /* #808a95 lama gagal ambang 4,5:1 (3,33 di kertas-2 · 2,71 di kertas-3).
     Diturunkan sampai lolos di SEMUA latar yang dipakai: 5,87 / 4,77 / 5,42. */
  --tinta-3:   #5a626c;

  --garis:     #cec7b4;
  --garis-2:   #b3ab94;
  --grid:      rgba(30, 60, 90, .07);
  --grid-kuat: rgba(30, 60, 90, .12);

  --biru:      #175a8c;
  --biru-mu:   #3e8cc4;
  --emas:      #9a7614;
  --emas-mu:   #c9a227;
  --merah:     #b23a22;
  --hijau:     #2f6b46;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --pad:   clamp(18px, 4.5vw, 56px);
  --rel:   clamp(48px, 7vw, 104px);   /* jarak antar lembar */
  --maxw:  1180px;
  --rail:  clamp(0px, 4vw, 56px);      /* lebar penggaris kiri */
  --ease:  cubic-bezier(.22, .61, .36, 1);
}

[data-mode="biru"] {
  color-scheme: dark;

  --kertas:    #0a1622;
  --kertas-2:  #0e1e2e;
  --kertas-3:  #14293c;
  --kertas-4:  #1b3449;

  --tinta:     #dfeaf4;
  --tinta-2:   #a2b8cb;
  /* #6f8699 lama 4,46 di kertas-2 dan 3,93 di kertas-3 — dua-duanya di bawah ambang. */
  --tinta-3:   #8299ac;

  --garis:     #24425c;
  --garis-2:   #35617f;
  --grid:      rgba(120, 190, 250, .09);
  --grid-kuat: rgba(120, 190, 250, .16);

  --biru:      #7cc0f5;
  --biru-mu:   #a9d8ff;
  --emas:      #e0be5c;
  --emas-mu:   #f0d489;
  --merah:     #ff8f75;
  --hijau:     #7fc9a1;
}

/* ---------- 2. DASAR ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--kertas);
  /* Kertas milimeter: kotak 8 mm dengan garis tebal tiap 5 kotak. */
  background-image:
    linear-gradient(var(--grid-kuat) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-kuat) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(15px, .35vw + 14px, 16.5px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.12; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--emas-mu); color: #101010; }
:focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; }

.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;
}

/* ---------- 3. TIPOGRAFI TEKNIS ---------- */
.mono   { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kode   { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--biru); }
.judul-l { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -.03em; }
.judul-m { font-size: clamp(1.5rem, 3.2vw, 2.3rem); letter-spacing: -.025em; }
.judul-s { font-size: clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing: -.01em; }
.teks    { color: var(--tinta-2); max-width: 62ch; }
.kecil   { font-size: .82rem; color: var(--tinta-3); }

/* Label bergaris seperti keterangan pada gambar teknik */
.label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinta-3);
  display: flex; align-items: center; gap: .55rem;
}
.label::before { content: ""; width: 18px; height: 1px; background: var(--garis-2); flex: none; }

/* ---------- 4. TATA LETAK ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
main { padding-left: var(--rail); }

/* Penggaris tepi kiri — pengganti progress bar biasa.
   Menampilkan skala dan nomor lembar yang sedang dibaca. */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: 60;
  border-right: 1px solid var(--garis);
  background:
    repeating-linear-gradient(to bottom, var(--garis) 0 1px, transparent 1px 24px);
  background-position: right 0 top 0;
  background-size: 8px 100%; background-repeat: no-repeat;
  display: none;
}
.rail__isi {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .8rem;
}
.rail__kode {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  writing-mode: vertical-rl; color: var(--biru);
}
.rail__garis { width: 1px; flex: 0 1 34vh; background: var(--garis-2); position: relative; }
.rail__maju {
  position: absolute; inset: 0 0 auto 0; height: 0; background: var(--emas-mu);
  transition: height .12s linear;
}
@media (min-width: 900px) { .rail { display: block; } }

/* Lembar gambar — kartu dengan tanda sudut seperti bingkai gambar kerja */
.lembar {
  position: relative;
  background: var(--kertas-2);
  border: 1px solid var(--garis);
}
.lembar::before, .lembar::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border: 1px solid var(--garis-2);
}
.lembar::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.lembar::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

/* Blok judul — strip data kecil di kaki lembar, seperti kop gambar */
.blok-judul {
  /* FLEX, bukan grid auto-fit. Dengan grid, 4 sel di lebar 336 px menghasilkan
     3 kolom dan sel keempat berdiri sendiri menyisakan 224 px kosong (terukur
     di 390 px). Flex-wrap + flex-grow membuat baris terakhir selalu meregang
     mengisi lebarnya — berapa pun jumlah selnya, tanpa perlu breakpoint per
     jumlah. Blok ini dipakai dengan 4 sel di A-03 dan 5 sel di A-01. */
  display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--garis);
  font-family: var(--mono); font-size: .68rem;
}
.blok-judul div { flex: 1 1 112px; padding: .55rem .75rem; border-right: 1px solid var(--garis); }
/* TIDAK memakai :last-child untuk menghapus garis penutup. Begitu blok ini
   membungkus jadi beberapa baris, "anak terakhir" bukan lagi sel paling kanan —
   sel di ujung baris pertama tetap bergaris, yang terakhir malah tidak.
   Garis kanan sel paling kanan berimpit dengan garis lembar itu sendiri,
   jadi memang tidak perlu dihapus. */
.blok-judul b { display: block; color: var(--tinta-3); font-weight: 400; letter-spacing: .12em; font-size: .62rem; text-transform: uppercase; }
.blok-judul span { color: var(--tinta); }

/* Seksi */
.seksi { padding-block: var(--rel); position: relative; }
.seksi + .seksi { border-top: 1px dashed var(--garis); }
.kepala { display: grid; gap: .9rem; margin-bottom: clamp(28px, 4vw, 48px); }
.kepala__baris { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem 1.4rem; }

/* Reveal ringan — hanya menggeser, tanpa gaya "melayang" */
.js .rv { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv[data-d="1"] { transition-delay: .06s }
.js .rv[data-d="2"] { transition-delay: .12s }
.js .rv[data-d="3"] { transition-delay: .18s }

/* ---------- 5. TOMBOL ---------- */
.tbl {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .78rem 1.35rem; border: 1px solid var(--tinta);
  background: var(--tinta); color: var(--kertas-2);
  font-size: .87rem; font-weight: 600; cursor: pointer; text-align: center;
  transition: background .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
.tbl:hover { background: var(--biru); border-color: var(--biru); color: #fff; }
[data-mode="biru"] .tbl:hover { color: #06131f; }
.tbl:active { transform: translateY(1px); }
.tbl--garis { background: transparent; color: var(--tinta); border-color: var(--garis-2); }
.tbl--garis:hover { background: transparent; color: var(--biru); border-color: var(--biru); }
.tbl--emas { background: var(--emas-mu); border-color: var(--emas-mu); color: #14120b; }
.tbl--emas:hover { background: var(--emas); border-color: var(--emas); color: #fff; }
[data-mode="biru"] .tbl--emas:hover { color: #14120b; }
.tbl--blok { width: 100%; }
.tbl svg { width: 15px; height: 15px; flex: none; }

/* ---------- 6. KEPALA HALAMAN ---------- */
.hdr {
  position: sticky; top: 0; z-index: 55;
  background: color-mix(in srgb, var(--kertas) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--garis);
  margin-left: var(--rail);
}
.hdr__in { display: flex; align-items: center; gap: 1rem; height: clamp(58px, 7vw, 70px); }
.merek { display: flex; align-items: center; gap: .65rem; margin-right: auto; }
/* Aturan brand: proporsi dan warna logo tidak diubah. Di mode kertas,
   logo emas di atas putih kurang terbaca, jadi diberi kontras ringan. */
.merek img { height: clamp(21px, 2.6vw, 26px); width: auto; }
[data-mode="kertas"] .merek img { filter: brightness(.62) saturate(1.25); }
.merek__unit {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta-2); padding-left: .65rem; border-left: 1px solid var(--garis-2);
}

.nav { display: none; gap: clamp(.7rem, 1.4vw, 1.3rem); }
.nav a {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-3); padding: .3rem 0; border-bottom: 1px solid transparent;
  white-space: nowrap; transition: color .2s, border-color .2s;
}
.nav a:hover { color: var(--tinta); }
.nav a[aria-current="true"] { color: var(--biru); border-bottom-color: var(--biru); }
@media (min-width: 1140px) { .nav { display: flex; } }

.hdr__alat { display: flex; align-items: center; gap: .5rem; }
.saklar {
  width: 44px; height: 44px; border: 1px solid var(--garis-2); background: transparent;
  cursor: pointer; display: grid; place-items: center; color: var(--tinta-2);
  transition: border-color .2s, color .2s;
}
.saklar:hover { border-color: var(--biru); color: var(--biru); }
.saklar svg { width: 17px; height: 17px; }
.saklar__biru { display: none; }
[data-mode="biru"] .saklar__kertas { display: none; }
[data-mode="biru"] .saklar__biru { display: block; }
/* nowrap DIBATASI ke header saja. Waktu dipasang ke semua .tbl, tombol
   "Lihat contoh laporan harian" di lembar sampul menolak melipat dan mendorong
   halaman jadi 315 px di layar 280 px — lalu overflow-x:hidden memotongnya
   diam-diam. Terukur 21 Agu 2026: 52 elemen terpotong tanpa bisa digulir. */
.hdr__alat .tbl { padding: .6rem 1rem; font-size: .8rem; white-space: nowrap; }
@media (max-width: 700px) { .hdr__alat .tbl--garis { display: none; } }
/* Di HP, nama unit "Construction" di sebelah logo memakan ruang yang sama
   dengan tombol. Tombolnya yang mengalah — jalur kontak tetap ada lewat menu,
   tombol di lembar sampul, dan tombol WA mengambang. */
@media (max-width: 560px) {
  .hdr__alat .tbl { display: none; }
  .merek__unit { font-size: .58rem; letter-spacing: .14em; padding-left: .5rem; }
}
.burger { display: grid; }
@media (min-width: 1140px) { .burger { display: none; } }
.burger span { display: block; width: 15px; height: 1px; background: currentColor; }
.burger span + span { margin-top: 4px; }

/* Menu layar penuh */
/* JEBAKAN NOMOR SATU DI KATALOG SOP, dan tadinya ADA di sini:
   `display: grid` mengalahkan atribut `hidden`. Artinya menu.hidden = true
   tidak menyembunyikan apa pun — elemen tetap menutupi seluruh layar dan
   memakan semua klik, tanpa satu pun pesan error. Sekarang tertutup masalah
   itu karena masih ada visibility:hidden, tapi begitu ada yang "merapikan"
   visibility, seluruh halaman mati klik. Baris di bawah mengembalikan arti
   `hidden` dan harus ikut kalau blok ini disalin ke tempat lain. */
.menu[hidden] { display: none; }

.menu {
  position: fixed; inset: 0; z-index: 70; background: var(--kertas);
  padding: 5rem var(--pad) 2rem; display: grid; align-content: start; gap: 0;
  opacity: 0; pointer-events: none;
  overflow: auto;
  /* `visibility` SENGAJA tidak ikut ditransisikan. Selama nilainya masih
     hidden, browser MENOLAK memindahkan fokus ke dalam menu — dan menolaknya
     tanpa error. Yang menahan klik selama animasi tutup adalah pointer-events,
     bukan visibility. */
  transition: opacity .25s var(--ease);
}
.menu.buka { opacity: 1; pointer-events: auto; }
.menu a {
  display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0;
  border-bottom: 1px solid var(--garis); font-size: 1.3rem; font-weight: 600;
}
.menu a i { font-family: var(--mono); font-style: normal; font-size: .72rem; color: var(--biru); letter-spacing: .1em; }
.menu__tutup { position: absolute; top: 1rem; right: var(--pad); }

/* ---------- 7. LEMBAR SAMPUL (hero) ---------- */
.sampul { padding-block: clamp(30px, 5vw, 56px) var(--rel); }
.sampul__kotak { display: grid; grid-template-columns: 1fr; }
@media (min-width: 980px) { .sampul__kotak { grid-template-columns: 1.02fr .98fr; } }

.sampul__kiri { padding: clamp(1.5rem, 3.4vw, 2.8rem); display: grid; align-content: center; gap: 1.4rem; }
.sampul__kanan {
  border-top: 1px solid var(--garis); background: var(--kertas-3);
  display: grid; place-items: center; padding: clamp(1rem, 2.4vw, 1.8rem);
  min-height: 320px;
}
@media (min-width: 980px) { .sampul__kanan { border-top: 0; border-left: 1px solid var(--garis); } }
.sampul h1 { max-width: 15ch; }
.sampul h1 u {
  text-decoration: none; position: relative; white-space: nowrap;
}
/* Garis ukur di bawah kata kunci — dimensi seperti pada gambar kerja */
.sampul h1 u::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.14em; height: 6px;
  border: 1px solid var(--biru); border-top: 0;
}
.sampul__cta { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Gambar bangunan yang "digambar" garis demi garis */
.gambar-hidup { width: 100%; height: auto; }
.gambar-hidup [data-garis] {
  stroke-dasharray: var(--pj, 600); stroke-dashoffset: var(--pj, 600);
  animation: tarikGaris 1.1s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * .11s);
}
@keyframes tarikGaris { to { stroke-dashoffset: 0; } }
.gambar-hidup [data-isi] { opacity: 0; animation: munculIsi .5s var(--ease) forwards; animation-delay: calc(1.1s + var(--i, 0) * .07s); }
@keyframes munculIsi { to { opacity: 1; } }

/* Fakta kecil bergaya catatan gambar */
/* Kolomnya DIPATOK 2 lalu 4, bukan auto-fit. Dengan auto-fit, empat sel bisa
   jatuh jadi 3 + 1 di lebar tertentu — sel keempat berdiri sendiri dan
   menyisakan 264 px kosong di sampingnya (terukur di 1024 px). Jumlah yang
   membagi habis lebih penting daripada kolom yang menyesuaikan sendiri. */
.fakta { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem .8rem; border-top: 1px solid var(--garis); }
@media (min-width: 560px) { .fakta { grid-template-columns: repeat(4, 1fr); } }
.fakta div { padding: .9rem 0 0; }
.fakta b { display: block; font-family: var(--mono); font-size: clamp(1.15rem, 2.1vw, 1.5rem); color: var(--tinta); font-weight: 500; }
.fakta small { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }

/* ---------- 8. DAFTAR LINGKUP (gaya BoQ) ---------- */
.lingkup { border-top: 1px solid var(--garis); }
.lingkup__baris {
  display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .8rem 1rem;
  padding: 1.05rem .4rem; border-bottom: 1px solid var(--garis);
  align-items: baseline; cursor: pointer; width: 100%; text-align: left;
  background: transparent; border-inline: 0; border-top: 0;
  transition: background .18s var(--ease), padding-left .18s var(--ease);
}
.lingkup__baris:hover { background: var(--kertas-2); padding-left: .9rem; }
.lingkup__no { font-family: var(--mono); font-size: .8rem; color: var(--biru); }
.lingkup__nama { font-weight: 600; font-size: 1.02rem; }
.lingkup__tag { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.lingkup__isi { grid-column: 2 / -1; display: none; padding-top: .5rem; }
.lingkup__baris[aria-expanded="true"] .lingkup__isi { display: block; }
.lingkup__baris[aria-expanded="true"] { background: var(--kertas-2); }
.lingkup__isi p { color: var(--tinta-2); font-size: .93rem; margin-bottom: .6rem; }
.lingkup__isi ul { display: flex; flex-wrap: wrap; gap: .35rem; }
.lingkup__isi li {
  font-family: var(--mono); font-size: .68rem; padding: .2rem .55rem;
  border: 1px solid var(--garis); color: var(--tinta-2);
}

/* ---------- 9. KALKULATOR ---------- */
.kalk { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .kalk { grid-template-columns: 340px 1fr; } }

/* min-width:0 WAJIB. Anak grid bawaannya min-width:auto, jadi menolak menyusut
   di bawah lebar min-content isinya — di 320 px itu mendorong seluruh halaman
   melebar 13 px. Terukur: 13 px sebelum, 0 px sesudah. */
.kalk__input { min-width: 0; padding: clamp(1.2rem, 2.4vw, 1.7rem); display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 1000px) { .kalk__input { border-right: 1px solid var(--garis); } }
.ruas { display: grid; gap: .55rem; }
.ruas > .label { margin-bottom: .1rem; }
.pilihan { display: flex; flex-wrap: wrap; gap: -1px; }
.pilihan button {
  /* min-height 44px = patokan target sentuh SOP. Sebelumnya 37 px. */
  padding: .5rem .8rem; min-height: 44px; border: 1px solid var(--garis); background: transparent;
  font-family: var(--mono); font-size: .76rem; cursor: pointer; color: var(--tinta-2);
  margin: 0 -1px -1px 0; transition: all .18s var(--ease);
}
.pilihan button:hover { border-color: var(--garis-2); color: var(--tinta); }
.pilihan button[aria-pressed="true"] {
  background: var(--tinta); border-color: var(--tinta); color: var(--kertas-2); position: relative; z-index: 1;
}
.pilihan button small { display: block; font-size: .6rem; opacity: .7; letter-spacing: .06em; }

.geser { display: grid; gap: .5rem; }
.geser__atas { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.geser__nilai { font-family: var(--mono); font-size: 1.7rem; color: var(--tinta); }
.geser__nilai i { font-style: normal; font-size: .8rem; color: var(--tinta-3); }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: linear-gradient(90deg, var(--biru) var(--isi, 30%), var(--garis) var(--isi, 30%));
}
input[type="range"]::-moz-range-track { height: 2px; background: linear-gradient(90deg, var(--biru) var(--isi, 30%), var(--garis) var(--isi, 30%)); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px;
  background: var(--kertas-2); border: 2px solid var(--biru); border-radius: 0; transform: rotate(45deg);
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; background: var(--kertas-2); border: 2px solid var(--biru); border-radius: 0;
}
.geser__skala { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .62rem; color: var(--tinta-3); }

.centang { display: grid; gap: 1px; }
.centang label {
  display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center;
  padding: .5rem .6rem; border: 1px solid var(--garis); margin-bottom: -1px;
  font-size: .84rem; color: var(--tinta-2); cursor: pointer; transition: background .18s;
}
.centang label:hover { background: var(--kertas-2); }
.centang input { accent-color: var(--biru); width: 14px; height: 14px; }
.centang label:has(input:checked) { border-color: var(--biru); color: var(--tinta); position: relative; z-index: 1; }
.centang em { font-family: var(--mono); font-style: normal; font-size: .7rem; color: var(--tinta-3); }

/* Panel keluaran */
.kalk__hasil { min-width: 0; display: grid; align-content: start; }
.hasil__atas {
  padding: clamp(1.2rem, 2.4vw, 1.7rem); border-bottom: 1px solid var(--garis);
  display: grid; gap: .9rem;
}
.hasil__angka {
  font-family: var(--mono); font-size: clamp(1.35rem, 4.2vw, 2.7rem); letter-spacing: -.03em;
  line-height: 1.1; color: var(--tinta);
}
.hasil__angka span { white-space: nowrap; }
.hasil__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-family: var(--mono); font-size: .74rem; color: var(--tinta-2); }
.hasil__meta b { color: var(--tinta); font-weight: 500; }

/* Tab hasil */
.tabs { display: flex; border-bottom: 1px solid var(--garis); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  padding: .8rem 1.1rem; background: transparent; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3); cursor: pointer; white-space: nowrap; transition: color .2s, border-color .2s;
}
.tabs button:hover { color: var(--tinta); }
.tabs button[aria-selected="true"] { color: var(--biru); border-bottom-color: var(--biru); }
/* overflow-x:auto WAJIB. Tabel tidak bisa menyusut di bawah lebar kolomnya;
   di 280 px tabel RAB melebihi layar 35 px, dan `overflow-x: hidden` milik body
   MEMOTONGNYA DIAM-DIAM — kolom "Perkiraan nilai" hilang tanpa halaman bisa
   digulir menyamping. Sapuan yang cuma mengecek gulir samping melaporkannya
   bersih. Dengan aturan ini isinya tetap terjangkau: digulir di dalam panelnya. */
.panel { min-width: 0; overflow-x: auto; padding: clamp(1rem, 2.2vw, 1.6rem); }
.panel[hidden] { display: none; }

/* Tabel rincian pekerjaan */
.boq { font-size: .86rem; }
.boq th {
  text-align: left; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-3); font-weight: 400;
  padding: 0 .5rem .5rem; border-bottom: 1px solid var(--garis-2);
}
.boq th:last-child, .boq td:last-child { text-align: right; }
.boq td { padding: .5rem; border-bottom: 1px solid var(--garis); vertical-align: baseline; }
.boq tbody tr { cursor: pointer; transition: background .15s; }
.boq tbody tr:hover, .boq tbody tr.sorot { background: var(--kertas-3); }
.boq__kode { font-family: var(--mono); color: var(--biru); width: 2.6rem; }
.boq__bobot { font-family: var(--mono); color: var(--tinta-3); width: 3.4rem; }
.boq__nilai { font-family: var(--mono); white-space: nowrap; }
.boq tr.oh td { border-top: 1px solid var(--garis-2); font-weight: 600; }
.boq tfoot td { padding-top: .7rem; font-family: var(--mono); font-weight: 600; border: 0; }
.boq__bar { height: 3px; background: var(--biru); margin-top: .3rem; opacity: .5; }
.boq tr.sorot .boq__bar { opacity: 1; }

/* Gambar potongan + keterangan */
.potongan { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .potongan { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.potongan svg { width: 100%; height: auto; background: var(--kertas-3); border: 1px solid var(--garis); }
.potongan [data-part] { transition: opacity .2s, stroke .2s, fill .2s; }
.potongan.ada-sorot [data-part] { opacity: .22; }
.potongan.ada-sorot [data-part].nyala { opacity: 1; }
.ket-potongan { display: grid; gap: .6rem; align-content: start; }
.ket-potongan h3 { font-size: .95rem; }
.ket-potongan p { font-size: .88rem; color: var(--tinta-2); }
.ket-potongan .kecil { font-family: var(--mono); }

/* Kurva-S + termin */
.kurva { display: grid; gap: 1rem; }
.kurva svg { width: 100%; height: auto; border: 1px solid var(--garis); background: var(--kertas-3); }
.termin { font-size: .84rem; }
.termin td { padding: .45rem .5rem; border-bottom: 1px solid var(--garis); }
.termin td:nth-child(2) { font-family: var(--mono); text-align: right; white-space: nowrap; }
.termin td:nth-child(3) { color: var(--tinta-3); font-size: .8rem; }

/* Catatan alasan */
.alasan { display: grid; gap: .55rem; }
.alasan li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .3rem; font-size: .88rem; color: var(--tinta-2); }
.alasan li::before { content: attr(data-n); font-family: var(--mono); font-size: .68rem; color: var(--biru); }

/* Peringatan / catatan kaki bergaya markup merah */
.markup {
  border-left: 2px solid var(--merah); padding: .55rem 0 .55rem .8rem;
  font-size: .82rem; color: var(--tinta-2);
}
.markup b { color: var(--merah); }

/* ---------- 10. LINI MASA PELAKSANAAN ---------- */
.masa { display: grid; gap: 1px; }
.masa__baris {
  display: grid; grid-template-columns: 2.6rem minmax(120px, 1fr) 2.6fr; gap: .8rem;
  align-items: center; padding: .55rem .4rem; border-bottom: 1px solid var(--garis);
  cursor: pointer; background: transparent; border-inline: 0; border-top: 0; text-align: left;
  transition: background .18s;
}
.masa__baris:hover, .masa__baris[aria-selected="true"] { background: var(--kertas-3); }
.masa__no { font-family: var(--mono); font-size: .74rem; color: var(--biru); }
.masa__nama { font-size: .9rem; font-weight: 600; }
.masa__jalur { position: relative; height: 14px; background: var(--kertas-3); border: 1px solid var(--garis); }
.masa__bar {
  position: absolute; top: -1px; bottom: -1px; background: var(--biru); opacity: .8;
  display: grid; place-items: center;
}
.masa__baris[aria-selected="true"] .masa__bar { background: var(--emas-mu); opacity: 1; }
/* Batang terpilih berlatar emas — teks putih di atasnya cuma 2,42:1.
   Teks gelap di emas = 7,74:1. Warna teks ikut latar batangnya, bukan ikut mode. */
.masa__bar span { font-family: var(--mono); font-size: .58rem; color: #fff; letter-spacing: .06em; }
.masa__baris[aria-selected="true"] .masa__bar span { color: #14120b; }
[data-mode="biru"] .masa__bar span,
[data-mode="biru"] .masa__baris[aria-selected="true"] .masa__bar span { color: #06131f; }
.masa__detail { padding: 1.1rem; border: 1px solid var(--garis); background: var(--kertas-2); display: grid; gap: .7rem; }
.masa__detail h3 { font-size: 1.05rem; }
.masa__detail p { color: var(--tinta-2); font-size: .92rem; }
.masa__detail ul { display: grid; gap: .4rem; }
.masa__detail li { display: grid; grid-template-columns: 1rem 1fr; gap: .5rem; font-size: .86rem; color: var(--tinta-2); }
.masa__detail li::before { content: "—"; color: var(--biru); font-family: var(--mono); }
.masa__skala { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .62rem; color: var(--tinta-3); padding: .3rem .4rem 0; }

/* ---------- 11. POHON KEPUTUSAN KONTRAK ---------- */
.pohon { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .pohon { grid-template-columns: repeat(3, 1fr); } }
.pohon__i { padding: 1.2rem; display: grid; gap: .7rem; align-content: start; }
.pohon__i.terpilih { border-color: var(--biru); box-shadow: inset 0 0 0 1px var(--biru); }
.pohon__tanya { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--biru); }
.pohon__i h3 { font-size: 1.15rem; }
.pohon__i > p { font-size: .9rem; color: var(--tinta-2); }
.pohon__i dl { display: grid; gap: .55rem; margin: 0; padding-top: .7rem; border-top: 1px solid var(--garis); }
.pohon__i dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.pohon__i dd { margin: .15rem 0 0; font-size: .85rem; color: var(--tinta-2); }
.pohon__i dt.ya { color: var(--hijau); }
.pohon__i dt.tidak { color: var(--merah); }

/* Penyaring pertanyaan di atas pohon.
   Terukur 15 Agu 2026 oleh alat/sapu-ruang-mati.js: dua baris ini menyisakan
   659 px dan 560 px ruang kosong di kanannya pada layar 1280–1440. Dua baris
   pendek yang ditumpuk membuat pita kosong selebar setengah halaman.
   Sekarang berdampingan, dan tombolnya didorong ke tepi kanan kolomnya. */
.saring { display: grid; gap: .7rem; margin-bottom: 1.4rem; }
.saring__baris {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem; font-size: .9rem;
  padding: .55rem .8rem; border: 1px solid var(--garis); background: var(--kertas-2);
}
.saring__baris span { color: var(--tinta-2); }
/* margin-left:auto, bukan cuma justify-content. Kalau labelnya panjang dan
   tombolnya turun ke baris kedua, space-between tidak berlaku lagi untuk baris
   itu — tombolnya menggantung di kiri dan menyisakan 287 px kosong. */
.saring__baris .pilihan { margin-left: auto; }
@media (min-width: 860px) { .saring { grid-template-columns: 1fr 1fr; gap: .8rem; } }

/* ---------- 12. DOKUMENTASI PROYEK ---------- */
.dok { border-top: 1px solid var(--garis-2); }
.dok__baris {
  display: grid; gap: .3rem 1rem; grid-template-columns: 4.6rem 1fr auto;
  padding: .95rem .4rem; border-bottom: 1px solid var(--garis); align-items: baseline;
  cursor: pointer; width: 100%; text-align: left; background: transparent; border-inline: 0; border-top: 0;
  transition: background .18s;
}
.dok__baris:hover { background: var(--kertas-2); }
.dok__kode { font-family: var(--mono); font-size: .74rem; color: var(--biru); }
.dok__judul { font-weight: 600; }
.dok__meta { font-family: var(--mono); font-size: .68rem; color: var(--tinta-3); }
.dok__isi { grid-column: 1 / -1; display: none; padding-top: .9rem; }
.dok__baris[aria-expanded="true"] { background: var(--kertas-2); }
.dok__baris[aria-expanded="true"] .dok__isi { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .dok__baris[aria-expanded="true"] .dok__isi { grid-template-columns: 260px 1fr; } }
/* align-self WAJIB: tanpa ini gambar ikut diregangkan setinggi baris grid
   dan gambar tampak jadi gepeng memanjang. */
.dok__isi img {
  width: 100%; height: auto; align-self: start; aspect-ratio: 16 / 10; object-fit: contain;
  border: 1px solid var(--garis); background: var(--kertas-3);
}
.dok__isi dl { display: grid; gap: .7rem; margin: 0; }
.dok__isi dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--biru); }
.dok__isi dd { margin: .15rem 0 0; font-size: .89rem; color: var(--tinta-2); }
.saring-dok { display: flex; flex-wrap: wrap; gap: -1px; margin-bottom: 1.2rem; }
.saring-dok button {
  padding: .4rem .8rem; border: 1px solid var(--garis); background: transparent;
  font-family: var(--mono); font-size: .7rem; color: var(--tinta-2); cursor: pointer;
  margin: 0 -1px -1px 0; transition: all .18s;
}
.saring-dok button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--kertas-2); }

/* ---------- 13. LAPORAN HARIAN (spesimen) ---------- */
.lapor { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .lapor { grid-template-columns: 1.05fr .95fr; } }
.lapor__kertas { padding: clamp(1.1rem, 2.4vw, 1.6rem); font-family: var(--mono); font-size: .78rem; }
@media (min-width: 900px) { .lapor__kertas { border-right: 1px solid var(--garis); } }
.lapor__kop { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--garis-2); padding-bottom: .6rem; margin-bottom: .8rem; }
.lapor__kop b { font-size: .82rem; letter-spacing: .08em; }
.lapor__baris { display: grid; grid-template-columns: 8.4rem 1fr; gap: .4rem .8rem; padding: .3rem 0; border-bottom: 1px dotted var(--garis); }
/* Kolom label 8,4rem itu lebar TETAP. Di 280 px ia memaksa lembar laporan
   melebihi layar 15 px, lalu overflow-x:hidden memotongnya. Di layar sesempit
   itu label ditumpuk di atas nilainya — lebih panjang ke bawah, tapi terbaca
   utuh. Terukur 21 Agu 2026. */
@media (max-width: 420px) { .lapor__baris { grid-template-columns: 1fr; gap: .1rem; } }
.lapor__baris > span:first-child { color: var(--tinta-3); }
.lapor__cap {
  margin-top: 1rem; display: inline-block; border: 2px solid var(--merah); color: var(--merah);
  padding: .3rem .7rem; font-size: .68rem; letter-spacing: .18em; transform: rotate(-3deg);
}
.lapor__ket { padding: clamp(1.1rem, 2.4vw, 1.7rem); display: grid; gap: .9rem; align-content: center; }

/* ---------- 14. CATATAN (FAQ) ---------- */
.catatan { display: grid; max-width: 900px; border-top: 1px solid var(--garis-2); }
.catatan details { border-bottom: 1px solid var(--garis); }
.catatan summary {
  list-style: none; cursor: pointer; padding: 1rem 2.4rem 1rem 3.2rem; position: relative;
  font-weight: 600; font-size: 1rem;
}
.catatan summary::-webkit-details-marker { display: none; }
.catatan summary::before {
  content: "CAT " attr(data-n); position: absolute; left: 0; top: 1.15rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; color: var(--biru);
}
.catatan summary::after {
  content: "+"; position: absolute; right: .4rem; top: .85rem;
  font-family: var(--mono); color: var(--biru); font-size: 1.1rem;
}
.catatan details[open] summary::after { content: "−"; }
.catatan summary:hover { color: var(--biru); }
.catatan p { padding: 0 1rem 1.2rem 3.2rem; color: var(--tinta-2); font-size: .93rem; max-width: 74ch; }

/* ---------- 15. FORMULIR ---------- */
.rfq { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .rfq { grid-template-columns: .85fr 1.15fr; } }
.rfq__info { padding: clamp(1.2rem, 2.6vw, 1.9rem); display: grid; gap: 1.2rem; align-content: start; background: var(--kertas-3); }
@media (min-width: 900px) { .rfq__info { border-right: 1px solid var(--garis); } }
.rfq__info h3 { font-size: 1.1rem; }
.info-baris { display: grid; gap: .15rem; }
.info-baris b { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); font-weight: 400; }
.info-baris a, .info-baris p { font-size: .92rem; }
.info-baris a:hover { color: var(--biru); }

.form { padding: clamp(1.2rem, 2.6vw, 1.9rem); display: grid; gap: .9rem; }
.form .duo { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form .duo { grid-template-columns: 1fr 1fr; } }
.isian { display: grid; gap: .3rem; }
.isian label { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.isian input, .isian select, .isian textarea {
  width: 100%; padding: .7rem .8rem; background: var(--kertas-2);
  border: 1px solid var(--garis); border-radius: 0; color: var(--tinta);
  font-size: .93rem; transition: border-color .18s;
}
.isian textarea { resize: vertical; min-height: 96px; }
.isian input:focus, .isian select:focus, .isian textarea:focus { outline: none; border-color: var(--biru); }
.isian input::placeholder, .isian textarea::placeholder { color: var(--tinta-3); }
.jebakan { position: absolute; left: -9999px; opacity: 0; }
.pesan { font-size: .86rem; padding: .7rem .85rem; border: 1px solid; display: none; }
.pesan.ok  { display: block; border-color: var(--hijau); color: var(--hijau); }
.pesan.err { display: block; border-color: var(--merah); color: var(--merah); }

/* ---------- 16. KAKI ---------- */
.kaki { border-top: 1px solid var(--garis-2); margin-left: var(--rail); padding-block: clamp(2rem, 4vw, 3rem) 0; background: var(--kertas-2); }
.kaki__grid { display: grid; gap: 1.8rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .kaki__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.kaki img { height: 24px; width: auto; margin-bottom: .8rem; }
[data-mode="kertas"] .kaki img { filter: brightness(.62) saturate(1.25); }
.kaki h4 { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); font-weight: 400; margin-bottom: .8rem; }
.kaki li + li { margin-top: .45rem; }
.kaki li a, .kaki li span { font-size: .87rem; color: var(--tinta-2); }
.kaki li a:hover { color: var(--biru); }
.kaki__bawah {
  margin-top: 2rem; padding-block: 1rem; border-top: 1px solid var(--garis);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-family: var(--mono); font-size: .68rem; color: var(--tinta-3);
}

/* ---------- 17. TOMBOL WA ---------- */
.wa {
  position: fixed; right: 14px; bottom: 14px; z-index: 50;
  display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem;
  background: var(--tinta); color: var(--kertas-2); font-size: .82rem; font-weight: 600;
  border: 1px solid var(--tinta);
  transform: translateY(130%); transition: transform .35s var(--ease), background .2s;
}
.wa.tampil { transform: none; }
.wa:hover { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.wa svg { width: 16px; height: 16px; }
.wa span { display: none; }
@media (min-width: 480px) { .wa span { display: inline; } }

/* ---------- 18. AKSESIBILITAS & CETAK ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .gambar-hidup [data-garis] { stroke-dashoffset: 0; }
  .gambar-hidup [data-isi] { opacity: 1; }
}
@media print {
  .hdr, .rail, .wa, .menu, .tabs { display: none !important; }
  body { background: #fff; color: #000; }
  main { padding-left: 0; }
  .panel[hidden] { display: block !important; }
}

/* ============================================================
   SASARAN SENTUH — 44 px, TANPA DIGERBANG LEBAR LAYAR
   ------------------------------------------------------------
   Aturan ini sengaja BERLAKU DI SEMUA UKURAN. Menggerbangnya dengan
   `max-width` adalah jebakan yang sudah tercatat: layar lebar dianggap
   "pakai tetikus", padahal iPad tegak 768 px justru cuma bisa disentuh —
   dan di sana kendalinya turun ke bawah 44 px tanpa ada yang sadar.
   Lebar layar tidak pernah memberi tahu alat tunjuknya apa.

   Diukur 21 Agu 2026 di 18 lebar (280–3440 px): sebelumnya 10–11 kendali
   masih di bawah 44 px. Yang diperbaiki di bawah ini semuanya.
   ============================================================ */

/* Logo = tautan "kembali ke atas". Tingginya mengikuti gambar, jadi perlu
   dipaksa punya kotak sentuh yang layak. */
.merek { min-height: 44px; }

/* Batang lini masa: 42 px, kurang 2 px. */
.masa__baris { min-height: 44px; }

/* Tombol utama di dalam halaman (bukan di header yang memang padat). */
.sampul__cta .tbl, .panel .tbl, .form .tbl { min-height: 44px; }

/* Penyaring kategori proyek — 33 px, paling sering disentuh di HP. */
.saring-dok button { min-height: 44px; padding-inline: 1rem; }

/* Tautan di blok kontak — nomor telepon dan "Buka di peta". Ini kendali yang
   paling sering ditekan orang yang mau menghubungi, jadi kotak sentuhnya
   dipastikan penuh tanpa mengubah tampilannya. */
.info-baris a { display: inline-block; min-height: 44px; padding-block: .6rem; }

/* Penggeser luas bangunan: batang setipis 22 px susah dikenai jempol. */
input[type="range"] { height: 44px; }

/* Kotak centang. Labelnya memang sudah tinggi (61 px) dan seluruh label
   bisa ditekan — tapi kotaknya sendiri dibesarkan supaya jelas terlihat
   bisa disentuh. */
.centang input { width: 18px; height: 18px; }

/* Kotak pilihan pada formulir kurang 1 px dari ambang. */
.isian select, .isian input { min-height: 44px; }

/* Baris kotak centang: di layar lebar labelnya cukup satu baris dan tingginya
   turun di bawah ambang. Dipatok, karena YANG DISENTUH labelnya. */
.centang label { min-height: 44px; }

/* Tombol di header juga — 42 px, kurang 2 px. Tinggi headernya cukup. */
.hdr__alat .tbl { min-height: 44px; }

/* TOMBOL WHATSAPP — 37 px, dan justru inilah kendali yang paling menentukan
   apakah orang jadi menyapa atau urung. Dibesarkan melewati ambang, diberi
   jarak dari tepi layar supaya tidak bentrok dengan gestur "kembali" di HP,
   dan dijaga agar tidak menutupi isi saat papan ketik muncul. */
.wa {
  min-height: 52px; padding: .85rem 1.15rem;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
}