/**
 * katalog.css — Apple environment untuk halaman yang tidak memakai Tailwind.
 *
 * Halaman ini hidup di luar bundel SPA (ADR-07), jadi ia tidak bisa memakai
 * kelas Tailwind maupun token dari components/. Nilai di :root disalin dari
 * components/FinanceApp.tsx yang AGENTS.md sebut sebagai referensi terbaik,
 * supaya halaman ini dan aplikasi terasa satu keluarga. Kalau token di aplikasi
 * berubah, blok :root ini disunting manual: duplikasi ini disengaja, sebab
 * modul bersama akan menarik halaman ini ke dalam graf modul Rollup.
 *
 * NOL font pihak ketiga. Halaman ini dibuka di jaringan seluler Indonesia dan
 * tidak boleh bergantung CDN mana pun; tumpukan sistem menghasilkan SF Pro di
 * perangkat Apple dan Roboto di Android.
 *
 * ATURAN GERAK: animasi di sini punya MAKSUD, bukan hiasan. Yang bergerak hanya
 * (a) angka yang dihitung naik, (b) bilah pemakaian, (c) balok muatan yang
 * mengisi ruang, (d) satu penyingkapan masuk per bagian. Sapuan kilau, blob
 * melayang, dan rotasi otomatis TIDAK ADA di berkas ini: gerak tanpa maksud
 * membuat halaman terbaca gimmick dan justru menurunkan kepercayaan, dan
 * objek yang berputar sendiri memicu mual pada pengguna dengan sensitivitas
 * vestibular.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. Token
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Kanvas dan permukaan */
  --k-kanvas:        #f5f5f7;
  --k-kartu:         rgba(255, 255, 255, 0.72);
  --k-kartu-padat:   #ffffff;
  --k-hairline:      rgba(0, 0, 0, 0.06);
  --k-hairline-kuat: rgba(0, 0, 0, 0.10);

  /* Teks */
  --k-teks:          #1d1d1f;
  --k-teks-2:        #3a3a3c;
  --k-teks-3:        #6e6e73;

  /* Aksen: SATU biru untuk seluruh halaman */
  --k-aksen:         #0a84ff;
  --k-aksen-lembut:  rgba(10, 132, 255, 0.10);
  --k-aksen-teks:    #0060df;

  /* Indigo merek, warna logo. Hanya untuk kop, tidak pernah untuk kartu. */
  --k-merek:         #1e285d;

  /* Semantik, HANYA untuk makna */
  --k-baik:          #34c759;
  --k-waspada:       #ff9f0a;
  --k-kritis:        #ff3b30;
  --k-waspada-teks:  #9a6100;

  --k-bayang: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --k-bayang-naik: 0 2px 6px rgba(0, 0, 0, 0.05), 0 18px 44px rgba(15, 32, 80, 0.10);

  --k-r-kartu: 22px;
  --k-r-sedang: 16px;
  --k-r-kecil: 10px;

  --k-s1: 4px;  --k-s2: 8px;  --k-s3: 12px;
  --k-s4: 16px; --k-s6: 24px; --k-s8: 32px; --k-s12: 48px; --k-s16: 64px;

  --k-lebar: 1120px;

  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. Dasar dan PAGAR SCROLL HORIZONTAL
   Aturan berdiri Direksi: scroll SELALU vertikal. Ditegakkan empat teknik yang
   saling menutup, bukan satu.
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* Item flex/grid default min-width:auto — penyebab meluber yang paling umum
   dan paling sulit dilacak, karena kotaknya sendiri terlihat benar. */
* { min-width: 0; }

html, body {
  margin: 0;
  max-width: 100%;
  /* clip, BUKAN hidden: hidden membuat konteks scroll baru dan mematikan
     position:sticky pada kop di sebagian peramban. */
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

body {
  background: var(--k-kanvas);
  color: var(--k-teks);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

/**
 * `[hidden]` HARUS mengalahkan `display` milik penulis.
 *
 * Atribut `hidden` hanya diberi `display: none` oleh stylesheet BAWAAN
 * peramban, dan aturan penulis mana pun mengalahkannya. Jadi `.k-sim { display:
 * grid }` membuat `<div id="sim" hidden>` TETAP TAMPIL. Ini bukan teori: pada
 * pemeriksaan pertama, kartu isian simulator muncul di bawah kalimat "perkiraan
 * otomatis belum kami buka", dan baris WhatsApp kosong muncul di blok kontak,
 * keduanya karena hal ini. Satu aturan menutup seluruh kelasnya sekaligus.
 */
[hidden] { display: none !important; }

.k-halaman {
  max-width: var(--k-lebar);
  margin: 0 auto;
  /* Area aman ponsel berponi. max() menjaga padding minimum di perangkat
     tanpa poni tanpa menuliskan dua aturan. */
  padding-left:  max(var(--k-s4), env(safe-area-inset-left));
  padding-right: max(var(--k-s4), env(safe-area-inset-right));
}

/* Disembunyikan dengan clip-path, BUKAN `left: -9999px`. Elemen yang
   ditempatkan jauh di luar layar tetap ikut dihitung dalam scrollWidth body
   di sebagian mesin, dan itu memunculkan gulir mendatar hantu yang jejaknya
   sangat sulit dilacak justru karena tidak ada yang terlihat meluber. */
.k-lewati {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.k-lewati:focus {
  width: auto; height: auto;
  clip-path: none;
  left: var(--k-s4);
  top: var(--k-s4);
  z-index: 60;
  background: #fff;
  padding: var(--k-s2) var(--k-s4);
  border-radius: var(--k-r-kecil);
  box-shadow: var(--k-bayang);
}

:focus-visible {
  outline: 2px solid var(--k-aksen);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. Tipografi
   ═══════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4 {
  margin: 0;
  letter-spacing: -0.02em;
  font-weight: 650;
  color: var(--k-teks);
}
h1 { font-size: clamp(30px, 7.4vw, 52px); line-height: 1.08; font-weight: 700; }
h2 { font-size: clamp(22px, 3.6vw, 30px); line-height: 1.18; }
h3 { font-size: 17px; line-height: 1.3; }
p  { margin: 0; }

/* Baris panjang sulit dibaca di layar lebar. 68ch adalah batas yang dipakai
   seluruh blok naratif halaman ini. */
.k-naratif { max-width: 68ch; }

.k-eyebrow {
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--k-teks-3);
}
.k-sub { color: var(--k-teks-2); font-size: 16px; }
.k-kecil { font-size: 13px; color: var(--k-teks-3); }
.k-mini { font-size: 11.5px; color: var(--k-teks-3); line-height: 1.45; }

/* Wajib pada SETIAP angka yang berubah, supaya kolom tidak bergoyang saat
   nilai berganti (count-up, hasil simulasi, dimensi). */
.k-angka {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.015em;
}

/* Hairline sungguhan: 1px pada layar retina terlihat tebal. */
.k-pisah { border-top: 1px solid var(--k-hairline); }
@media (min-resolution: 2dppx) {
  .k-pisah { border-top-width: 0.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. Permukaan kaca
   ═══════════════════════════════════════════════════════════════════════════ */
.k-kartu {
  background: var(--k-kartu);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--k-hairline);
  border-radius: var(--k-r-kartu);
  box-shadow: var(--k-bayang);
}
/* Tanpa backdrop-filter, JANGAN pernah transparan: hasilnya teks di atas foto
   yang tidak terbaca. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .k-kartu { background: var(--k-kartu-padat); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. Kop: frosted, menempel, mengeras saat digulir
   ═══════════════════════════════════════════════════════════════════════════ */
.k-kop {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(245, 245, 247, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.k-kop[data-gulir='1'] {
  border-bottom-color: var(--k-hairline);
  background: rgba(245, 245, 247, 0.86);
}
.k-kop-isi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-s3);
  min-height: 54px;
  padding-top: var(--k-s2);
  padding-bottom: var(--k-s2);
}
.k-merek-baris { display: flex; align-items: center; gap: 9px; min-width: 0; }
.k-merek-tanda {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 9px;
  background: var(--k-merek);
  color: #fff;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
}
.k-merek-nama { font-size: 14px; font-weight: 620; letter-spacing: -0.01em; }
.k-merek-legal { font-size: 11px; color: var(--k-teks-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   6. Tombol
   ═══════════════════════════════════════════════════════════════════════════ */
.k-tombol {
  /* 44 x 44 sasaran sentuh minimum, panduan Apple yang menjadi acuan
     design system ini. */
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 590;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.k-tombol:active { transform: scale(0.975); }

/* Aksen penuh: TEPAT SATU ajakan utama per layar. */
.k-tombol-utama {
  background: var(--k-aksen);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 132, 255, 0.24), 0 8px 22px rgba(10, 132, 255, 0.26);
}
.k-tombol-utama:hover { background: #0b7ae8; }

.k-tombol-lembut {
  background: var(--k-aksen-lembut);
  color: var(--k-aksen-teks);
}
.k-tombol-lembut:hover { background: rgba(10, 132, 255, 0.16); }

.k-tombol-hening {
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--k-hairline);
  color: var(--k-teks-2);
}
.k-tombol-hening:hover { background: #fff; }

.k-tombol-kecil { min-height: 36px; padding: 0 13px; font-size: 13px; }

/* Pada layar sentuh, sasaran di bawah 44px sulit dikenai dan itu terasa
   sebagai "aplikasinya rewel", bukan sebagai jari yang meleset. Ukurannya
   dinaikkan HANYA untuk penunjuk kasar, supaya kop di desktop tetap ramping. */
@media (pointer: coarse) {
  .k-tombol-kecil { min-height: 44px; padding: 0 16px; }
  .k-tingkat button { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. Hero
   ═══════════════════════════════════════════════════════════════════════════ */
.k-hero { position: relative; padding: var(--k-s12) 0 var(--k-s8); }

/* Satu cahaya lembut, DIAM. Tidak melayang dan tidak berdenyut: latar yang
   bergerak sendiri di halaman berisi angka membuat angkanya terbaca sebagai
   materi pemasaran, bukan sebagai catatan. */
.k-hero::before {
  content: '';
  position: absolute;
  inset: -80px -20% auto -20%;
  height: 460px;
  /* rgba(...,0), BUKAN `transparent`. `transparent` adalah rgba(0,0,0,0), jadi
     interpolasinya melewati HITAM dan meninggalkan pita abu-abu tipis yang
     terlihat jelas di atas kanvas #f5f5f7. Ini kesalahan yang tampak seperti
     bug layar pada tangkapan layar yang diteruskan ke grup WhatsApp. */
  background:
    radial-gradient(58% 70% at 22% 8%, rgba(10, 132, 255, 0.13), rgba(10, 132, 255, 0) 70%),
    radial-gradient(48% 62% at 82% 0%, rgba(30, 40, 93, 0.10),   rgba(30, 40, 93, 0) 72%);
  pointer-events: none;
  z-index: -1;
}
.k-hero h1 { margin-top: var(--k-s3); }
.k-hero .k-sub { margin-top: var(--k-s4); font-size: 17px; }
.k-hero-aksi { display: flex; flex-wrap: wrap; gap: var(--k-s3); margin-top: var(--k-s6); }

/* Sapaan personal. Disembunyikan sampai token terbukti sah; halaman tetap
   utuh tanpanya. */
.k-sapaan {
  display: none;
  align-items: center;
  gap: 9px;
  margin-bottom: var(--k-s4);
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  background: var(--k-aksen-lembut);
  color: var(--k-aksen-teks);
  font-size: 13px;
  font-weight: 560;
  width: fit-content;
  max-width: 100%;
}
.k-sapaan[data-ada='1'] { display: inline-flex; }
.k-sapaan-titik {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--k-aksen); flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. Deret angka rekam jejak
   Inilah yang membangun kepercayaan di halaman ini: bukan grafis, melainkan
   bukti. Karena itu angkanya besar, cakupannya menempel, dan keduanya tidak
   pernah dipisahkan.
   ═══════════════════════════════════════════════════════════════════════════ */
.k-bukti {
  display: grid;
  gap: var(--k-s3);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  margin-top: var(--k-s8);
}
.k-bukti-sel { padding: var(--k-s4) var(--k-s4) var(--k-s3); }
.k-bukti-n {
  font-size: clamp(27px, 4.6vw, 36px);
  font-weight: 680;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.k-bukti-n small {
  font-size: 0.42em;
  font-weight: 600;
  color: var(--k-teks-3);
  margin-left: 5px;
  letter-spacing: 0;
}
.k-bukti-l { margin-top: 3px; font-size: 13.5px; color: var(--k-teks-2); font-weight: 540; }
/* Cakupan tidak pernah boleh hilang: "83 kota" dan "83 kota, mencakup 11.685
   dari 12.354 pengiriman" adalah dua klaim yang berbeda, dan yang pertama
   runtuh saat ditanya. */
.k-bukti-c {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--k-hairline);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--k-teks-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. Bagian
   ═══════════════════════════════════════════════════════════════════════════ */
.k-bagian { padding: var(--k-s12) 0 0; scroll-margin-top: 72px; }
.k-bagian-kop { margin-bottom: var(--k-s6); }
.k-bagian-kop h2 { margin-top: 6px; }
.k-bagian-kop .k-sub { margin-top: var(--k-s3); }

/* ═══════════════════════════════════════════════════════════════════════════
   10. Kartu kelas armada
   ═══════════════════════════════════════════════════════════════════════════ */
/**
 * Kelasnya SELALU empat (taksonomi dikunci ke quo_fleet_class), jadi jumlah
 * kolomnya ditetapkan eksplisit alih-alih diserahkan ke auto-fit. auto-fit
 * dengan minmax(280px) menghasilkan TIGA kolom pada 1120px, sehingga kartu
 * keempat berdiri sendirian di baris bawah dan halaman terlihat seperti
 * kehabisan isi. 1 / 2 / 4 tidak pernah menyisakan kartu yatim.
 */
.k-kisi-kelas {
  display: grid;
  gap: var(--k-s4);
  grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .k-kisi-kelas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .k-kisi-kelas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Catatan yang berdiri satu kali di atas kisi, melintasi seluruh kolom. */
.k-catatan-lebar {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--k-s4);
  align-items: flex-start;
  padding: var(--k-s4) var(--k-s6) var(--k-s6);
}
.k-catatan-ikon {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 11px;
  background: rgba(255, 159, 10, 0.12);
  display: grid; place-items: center;
  margin-top: var(--k-s2);
}

.k-kelas { display: flex; flex-direction: column; overflow: hidden; }
.k-kelas-kop { padding: var(--k-s4) var(--k-s4) var(--k-s3); }
.k-kelas-nama { font-size: 16px; font-weight: 640; letter-spacing: -0.015em; }
.k-kelas-kode { font-size: 11px; color: var(--k-teks-3); margin-top: 2px; letter-spacing: 0.02em; }

.k-lencana {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  background: var(--k-aksen-lembut); color: var(--k-aksen-teks);
}
.k-lencana-tunggu { background: rgba(255, 159, 10, 0.14); color: var(--k-waspada-teks); }
.k-lencana-netral { background: rgba(0, 0, 0, 0.05); color: var(--k-teks-3); }

/* Gambar kelas: rasio dikunci supaya kisi tidak melompat saat gambar tiba. */
.k-kelas-gambar {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #eef1f6, #e6eaf1);
  overflow: hidden;
}
.k-kelas-gambar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.k-kelas-gambar:hover img { transform: scale(1.028); }
.k-kelas-gambar-label {
  position: absolute; left: 10px; bottom: 10px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 10.5px; font-weight: 600; color: var(--k-teks-2);
}

/* Siluet berskala untuk kelas tanpa foto asli. */
.k-siluet { width: 100%; height: 100%; display: block; }
.k-siluet-bungkus {
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,247,250,0.9));
  border-bottom: 1px solid var(--k-hairline);
  padding: var(--k-s2) var(--k-s2) 0;
}
.k-sl-tanah  { stroke: var(--k-hairline-kuat); stroke-width: 1; }
.k-sl-bak    { fill: rgba(10, 132, 255, 0.07); stroke: var(--k-aksen); stroke-width: 1.5; }
.k-sl-sasis  { fill: rgba(0, 0, 0, 0.05); stroke: var(--k-hairline-kuat); stroke-width: 1; }
.k-sl-roda   { fill: rgba(0, 0, 0, 0.08); stroke: var(--k-hairline-kuat); stroke-width: 1; }
.k-sl-dim line { stroke: var(--k-teks-3); stroke-width: 1; }
.k-sl-dim text { fill: var(--k-teks-3); font-size: 11px; font-weight: 600; }
.k-sl-orang  { fill: none; stroke: var(--k-teks-3); stroke-width: 1.5; stroke-linecap: round; }
.k-sl-orang circle { fill: var(--k-kanvas); }
.k-sl-catatan { fill: var(--k-teks-3); font-size: 10px; }

/* Baris spesifikasi. Bentuk baris, BUKAN tabel lebar: di 320px tabel akan
   mendorong halaman, dan menggeser halaman itu yang dilarang. */
.k-spek { padding: 0 var(--k-s4) var(--k-s2); }
.k-spek-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--k-s3);
  padding: 9px 0;
  border-top: 1px solid var(--k-hairline);
  font-size: 13.5px;
}
.k-spek-k { color: var(--k-teks-3); flex: 1 1 auto; }
/* margin-left:auto menjaga nilai tetap rata kanan bahkan ketika ia terpaksa
   turun ke baris sendiri karena labelnya panjang. */
.k-spek-v { font-weight: 600; text-align: right; flex: 0 1 auto; margin-left: auto; }
.k-utuh { white-space: nowrap; }
.k-spek-v em { font-style: normal; font-weight: 500; color: var(--k-teks-3); font-size: 12px; }

.k-kelas-kaki { margin-top: auto; padding: var(--k-s3) var(--k-s4) var(--k-s4); }
.k-provenansi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--k-s3); }

/* Keadaan "sedang diverifikasi". Harus terbaca sebagai keterangan yang
   disengaja, bukan sebagai kolom yang lupa diisi: itu bedanya antara
   perusahaan yang teliti dan situs yang belum jadi. */
.k-tunggu {
  margin: 0 var(--k-s4) var(--k-s4);
  padding: var(--k-s3) var(--k-s4);
  border-radius: var(--k-r-sedang);
  background: rgba(255, 159, 10, 0.07);
  border: 1px solid rgba(255, 159, 10, 0.20);
}
.k-tunggu p { font-size: 13px; color: var(--k-teks-2); line-height: 1.5; }
.k-tunggu p + p { margin-top: 6px; }
.k-tunggu strong { font-weight: 620; color: var(--k-teks); }

/* ═══════════════════════════════════════════════════════════════════════════
   11. Penjelasan dua batas
   Bagian yang paling meyakinkan di halaman ini dan satu-satunya yang tidak
   butuh satu angka pun: kemampuan menjelaskan kepada pelanggan mengapa
   truknya "sudah penuh tapi baru 8 ton".
   ═══════════════════════════════════════════════════════════════════════════ */
.k-dua-batas {
  display: grid;
  gap: var(--k-s4);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.k-batas-sel { padding: var(--k-s6) var(--k-s4) var(--k-s4); }
.k-batas-ikon {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  margin-bottom: var(--k-s3);
}
.k-batas-sel h3 { margin-bottom: 6px; }
.k-batas-sel p { font-size: 13.5px; color: var(--k-teks-2); }

/* Dua gelas isi: ilustrasi murni, nol angka. Tinggi isian ditulis di HTML
   sebagai --isi, dan keduanya sengaja tidak diberi persentase supaya tidak
   terbaca sebagai pengukuran NAMLOG. */
.k-gelas {
  position: relative;
  height: 76px;
  margin-top: var(--k-s3);
  border-radius: var(--k-r-kecil);
  border: 1.5px solid var(--k-hairline-kuat);
  background: rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
.k-gelas-isi {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--isi, 0.5) * 100%);
  background: repeating-linear-gradient(
    -45deg,
    rgba(10, 132, 255, 0.16) 0 7px,
    rgba(10, 132, 255, 0.09) 7px 14px);
  border-top: 1.5px solid rgba(10, 132, 255, 0.5);
  transition: height 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Label di ATAS gelas, bukan di bawah: di bawah ia bertumpuk dengan garis
   permukaan isian dan garis itu justru informasinya. */
.k-gelas-teks {
  position: absolute; inset: 0 0 auto 0;
  padding: 6px 10px;
  font-size: 11px; font-weight: 600; color: var(--k-teks-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. Simulator
   ═══════════════════════════════════════════════════════════════════════════ */
.k-sim { display: grid; gap: var(--k-s4); }
.k-sim-isian { padding: var(--k-s4); }
.k-sim-hasil { padding: var(--k-s4); }

.k-tingkat {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.045);
  gap: 2px;
  margin-bottom: var(--k-s4);
  max-width: 100%;
}
.k-tingkat button {
  border: 0; background: transparent;
  font: inherit; font-size: 13px; font-weight: 560;
  color: var(--k-teks-3);
  padding: 8px 14px; min-height: 38px;
  border-radius: 999px; cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.k-tingkat button[aria-selected='true'] {
  background: #fff;
  color: var(--k-teks);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09);
}

.k-medan { display: grid; gap: var(--k-s3); }
@media (min-width: 480px) {
  .k-medan-3 { grid-template-columns: repeat(3, 1fr); }
  .k-medan-2 { grid-template-columns: repeat(2, 1fr); }
}
.k-medan label {
  display: block;
  font-size: 12px; font-weight: 580; color: var(--k-teks-3);
  margin-bottom: 5px;
}
.k-kotak { position: relative; }
.k-kotak input, .k-kotak select {
  width: 100%;
  min-height: 46px;
  padding: 0 46px 0 13px;
  font: inherit; font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--k-teks);
  background: #fff;
  border: 1px solid var(--k-hairline-kuat);
  border-radius: 12px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  -webkit-appearance: none;
  appearance: none;
}
.k-kotak select { padding-right: 34px; cursor: pointer; }
.k-kotak input:focus, .k-kotak select:focus {
  outline: none;
  border-color: var(--k-aksen);
  box-shadow: 0 0 0 3.5px var(--k-aksen-lembut);
}
.k-kotak input[aria-invalid='true'] { border-color: var(--k-kritis); }
/* Satuan sebagai akhiran DI DALAM kolom, bukan hanya di label: pengguna yang
   menyalin angka dari lembar kerja membaca kotaknya, bukan labelnya. */
.k-kotak-satuan {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px; color: var(--k-teks-3); pointer-events: none;
}
.k-kotak select ~ .k-kotak-satuan { right: 13px; font-size: 11px; }

.k-sakelar { display: flex; flex-wrap: wrap; gap: var(--k-s3); margin-top: var(--k-s4); }
.k-sakelar-butir {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 14px 0 11px;
  border: 1px solid var(--k-hairline-kuat);
  border-radius: 12px;
  background: #fff;
  font-size: 13.5px; color: var(--k-teks-2);
  cursor: pointer;
}
.k-sakelar-butir input { width: 18px; height: 18px; accent-color: var(--k-aksen); cursor: pointer; }

/* Pesan validasi dan penjaga lunak. Penjaga lunak BERTANYA, jadi warnanya
   amber (waspada), bukan merah (kritis). Keduanya tidak pernah sama. */
.k-nota {
  margin-top: var(--k-s3);
  padding: 11px 13px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
}
.k-nota-tanya { background: rgba(255, 159, 10, 0.09); color: var(--k-waspada-teks); }
.k-nota-tolak { background: rgba(255, 59, 48, 0.07); color: #a5241c; }
.k-nota-info  { background: rgba(0, 0, 0, 0.035); color: var(--k-teks-2); }
.k-nota button {
  border: 0; background: rgba(255, 255, 255, 0.7);
  font: inherit; font-size: 12px; font-weight: 600;
  color: inherit;
  padding: 5px 10px; margin-left: 6px;
  border-radius: 999px; cursor: pointer; min-height: 30px;
}

/* Hasil */
.k-hasil-unit {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.k-hasil-n {
  font-size: clamp(34px, 8vw, 46px);
  font-weight: 690; line-height: 1;
  letter-spacing: -0.035em;
}
.k-hasil-satuan { font-size: 15px; color: var(--k-teks-3); font-weight: 560; }
.k-hasil-pengikat {
  margin-top: var(--k-s3);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--k-aksen-lembut); color: var(--k-aksen-teks);
  font-size: 12.5px; font-weight: 600;
}

.k-bilah-blok { margin-top: var(--k-s4); }
.k-bilah-baris + .k-bilah-baris { margin-top: var(--k-s3); }
.k-bilah-kop {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--k-s3);
  font-size: 12.5px; margin-bottom: 6px;
}
.k-bilah-kop b { font-weight: 620; }
.k-bilah-kop span { color: var(--k-teks-3); }
.k-bilah {
  height: 9px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.k-bilah-isi {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--k-aksen);
  transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s ease;
}
/* Warna semantik HANYA untuk makna: amber muncul saat pemakaian melewati 90%,
   tidak pernah sebagai variasi visual. */
.k-bilah-isi[data-penuh='1'] { background: var(--k-waspada); }
/* Sisi yang mengikat ditandai cincin, BUKAN warna berbeda, supaya
   informasinya tetap sampai kepada pembaca buta warna lewat label teksnya. */
.k-bilah-baris[data-pengikat='1'] .k-bilah {
  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.28);
}

/* Penyangkalan yang WAJIB ikut terbawa saat kartu hasil di-screenshot dan
   diteruskan ke grup WhatsApp pembeli. Karena itu ia DI DALAM kartu, bukan di
   bawahnya, dan tidak pernah disembunyikan di layar sempit. */
.k-penyangkalan {
  margin-top: var(--k-s4);
  padding-top: var(--k-s3);
  border-top: 1px solid var(--k-hairline);
  font-size: 11.5px; line-height: 1.5; color: var(--k-teks-3);
}

/* Penolakan yang diubah menjadi prospek. */
.k-rujukan {
  padding: var(--k-s4);
  border-radius: var(--k-r-sedang);
  background: rgba(255, 159, 10, 0.08);
  border: 1px solid rgba(255, 159, 10, 0.22);
}
.k-rujukan p { font-size: 13.5px; color: var(--k-teks-2); line-height: 1.55; }
.k-rujukan .k-tombol { margin-top: var(--k-s3); }

/* ═══════════════════════════════════════════════════════════════════════════
   13. Panggung 3D
   CSS 3D transform, bukan WebGL (ADR-02). TEPAT satu balok ruang muat dan satu
   balok muatan: preserve-3d tidak punya depth buffer dan mengurutkan elemen
   dengan algoritma pelukis per elemen, sehingga balok yang bersinggungan akan
   saling menembus, dengan WebKit sebagai pelanggar terburuk.
   ═══════════════════════════════════════════════════════════════════════════ */
.k-panggung-bungkus {
  margin-top: var(--k-s4);
  padding: var(--k-s4);
  border-radius: var(--k-r-sedang);
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(240,243,248,0.7));
  border: 1px solid var(--k-hairline);
}
.k-panggung {
  height: 220px;
  display: grid;
  place-items: center;
  perspective: 1100px;
  /* Panggung TIDAK menangkap gestur: satu jari yang menggeser di atasnya harus
     tetap menggulirkan halaman. Rotasi memakai tombol dan slider, bukan geser. */
  touch-action: pan-y;
  overflow: hidden;
}
.k-adegan {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(var(--sudut, -28deg));
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Balok berukuran nol dan berperan sebagai TITIK PUSAT; keenam sisi
   ditempatkan relatif terhadapnya. Cara ini membuat rotasi selalu terjadi di
   pusat balok tanpa satu pun transform-origin yang perlu dihitung ulang saat
   dimensi kelas berganti. */
.k-balok {
  position: absolute;
  width: 0; height: 0;
  transform-style: preserve-3d;
}
.k-sisi {
  position: absolute;
  left: 50%; top: 50%;
  backface-visibility: visible;
}
/* --p panjang, --l lebar (kedalaman), --t tinggi. Ketiganya dalam px dan
   diisi katalog.js dari rasio inner_length_mm : inner_width_mm :
   inner_height_mm, sehingga balok yang digambar dan angka CBM yang tertulis
   lahir dari tiga bilangan yang sama dan tidak bisa saling membohongi. */
.k-depan    { width: var(--p); height: var(--t); transform: translate(-50%, -50%) translateZ(calc(var(--l) / 2)); }
.k-belakang { width: var(--p); height: var(--t); transform: translate(-50%, -50%) translateZ(calc(var(--l) / -2)) rotateY(180deg); }
.k-kiri     { width: var(--l); height: var(--t); transform: translate(-50%, -50%) translateX(calc(var(--p) / -2)) rotateY(-90deg); }
.k-kanan    { width: var(--l); height: var(--t); transform: translate(-50%, -50%) translateX(calc(var(--p) / 2)) rotateY(90deg); }
.k-atas     { width: var(--p); height: var(--l); transform: translate(-50%, -50%) translateY(calc(var(--t) / -2)) rotateX(90deg); }
.k-bawah    { width: var(--p); height: var(--l); transform: translate(-50%, -50%) translateY(calc(var(--t) / 2)) rotateX(-90deg); }

/* Ruang muat: rangka transparan, supaya muatan di dalamnya terlihat. */
.k-bak .k-sisi {
  border: 1px solid rgba(10, 132, 255, 0.42);
  background: rgba(10, 132, 255, 0.045);
}
/* Muatan: padat, supaya batas isian terbaca tegas. */
.k-muatan .k-sisi {
  border: 1px solid rgba(10, 132, 255, 0.55);
  background: rgba(10, 132, 255, 0.28);
}
/* Tinggi balok muatan adalah SATU-SATUNYA hal yang beranimasi di panggung ini,
   dan itu justru maksudnya: ia memperlihatkan muatan mengisi ruang. Yang
   beranimasi adalah --t (tinggi balok muatan) dan pergeseran vertikalnya
   supaya alasnya tetap menempel di lantai bak, bukan melayang di tengah. */
.k-muatan { transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
.k-muatan .k-sisi {
  transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              height 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.k-panggung-kendali {
  display: flex; align-items: center; gap: var(--k-s3);
  margin-top: var(--k-s3);
}
/* Tinggi 44px adalah AREA SENTUH, bukan tebal relnya: rel tetap tipis, tetapi
   jari yang meleset beberapa piksel tetap mengenainya. */
.k-panggung-kendali input[type='range'] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--k-aksen);
  height: 44px;
}
.k-putar {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--k-hairline-kuat);
  background: rgba(255, 255, 255, 0.8);
  color: var(--k-teks-2);
  font: inherit; font-size: 16px;
  cursor: pointer;
  display: grid; place-items: center;
}
.k-putar:hover { background: #fff; }

/* Peramban tanpa preserve-3d: panggung disembunyikan seluruhnya dan bilah
   pemakaian mengambil alih. Setiap angka di panggung SUDAH ada sebagai teks
   HTML nyata, jadi tidak ada informasi yang hilang. */
.k-panggung-bungkus[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   14. Galeri bukti kerja
   Aset NAMLOG timpang: mayoritas WingBox, beberapa jenis nol foto. Kisi
   masonry-ringan dengan rasio bebas membuat kumpulan timpang tetap terlihat
   matang, karena tidak ada slot kosong yang menuntut diisi.
   ═══════════════════════════════════════════════════════════════════════════ */
/* TIGA kolom maksimum, bukan auto-fill. Aset foto NAMLOG timpang (mayoritas
   WingBox, beberapa jenis nol foto), jadi jumlah kartu di baris terakhir tidak
   bisa diatur. Empat kolom membuat kumpulan lima foto berakhir 4+1, dan satu
   kartu sendirian di baris bawah terbaca sebagai galeri yang kehabisan isi.
   Tiga kolom mengubah kasus yang sama menjadi 3+2, yang terlihat disengaja. */
.k-galeri {
  display: grid;
  gap: var(--k-s3);
  grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .k-galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .k-galeri { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.k-galeri figure { margin: 0; }
.k-foto {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--k-hairline);
  border-radius: var(--k-r-sedang);
  overflow: hidden;
  background: #e9ecf1;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  box-shadow: var(--k-bayang);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}
.k-foto:hover { transform: translateY(-2px); box-shadow: var(--k-bayang-naik); }
.k-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-foto-ket {
  position: absolute; inset: auto 0 0 0;
  padding: 22px 12px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.62));
  color: #fff;
  font-size: 12px; font-weight: 550;
  text-align: left;
  line-height: 1.35;
}
.k-galeri figcaption { margin-top: 7px; font-size: 11.5px; color: var(--k-teks-3); }

/* Lightbox */
.k-lightbox {
  position: fixed; inset: 0; z-index: 80;
  display: none;
  place-items: center;
  padding: var(--k-s4);
  background: rgba(20, 20, 24, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.k-lightbox[open], .k-lightbox[data-buka='1'] { display: grid; }
.k-lightbox img {
  max-width: min(1000px, 100%);
  max-height: 78vh;
  border-radius: var(--k-r-sedang);
  display: block;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}
.k-lightbox-ket {
  margin-top: var(--k-s3);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  text-align: center;
  max-width: 60ch;
}
.k-lightbox-tutup {
  position: absolute; top: max(var(--k-s4), env(safe-area-inset-top)); right: var(--k-s4);
  width: 44px; height: 44px;
  border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff; font-size: 20px; cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. Legalitas, kontak, kaki
   ═══════════════════════════════════════════════════════════════════════════ */
.k-daftar-legal { display: grid; gap: 0; padding: var(--k-s2) var(--k-s4) var(--k-s4); }
.k-legal-baris {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--k-s4);
  padding: 11px 0;
  border-top: 1px solid var(--k-hairline);
  font-size: 13.5px;
}
.k-legal-baris:first-child { border-top: 0; }
.k-legal-k { color: var(--k-teks-3); }
.k-legal-v { font-weight: 600; text-align: right; }

.k-kontak {
  display: grid;
  gap: var(--k-s4);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.k-kontak-sel { padding: var(--k-s6) var(--k-s4); }
/* Pengguna B2B menolak halaman kontak yang hanya berisi formulir. Alamat,
   telepon, dan email ditulis sebagai teks yang bisa disalin. */
.k-kontak-baris { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; }
.k-kontak-baris + .k-kontak-baris { border-top: 1px solid var(--k-hairline); }
.k-kontak-ikon {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 9px;
  background: var(--k-aksen-lembut);
  display: grid; place-items: center;
}
.k-kontak-k { font-size: 11.5px; color: var(--k-teks-3); }
.k-kontak-v { font-size: 14px; font-weight: 570; color: var(--k-teks); word-break: break-word; }
a.k-kontak-v { text-decoration: none; }
a.k-kontak-v:hover { color: var(--k-aksen-teks); }

.k-ajakan {
  margin-top: var(--k-s12);
  padding: var(--k-s8) var(--k-s6);
  border-radius: 26px;
  background: linear-gradient(135deg, #1e285d 0%, #24408f 55%, #0a84ff 130%);
  color: #fff;
  text-align: center;
}
.k-ajakan h2 { color: #fff; }
.k-ajakan p { margin: var(--k-s3) auto 0; color: rgba(255, 255, 255, 0.84); max-width: 54ch; font-size: 15px; }
.k-ajakan-aksi { display: flex; flex-wrap: wrap; gap: var(--k-s3); justify-content: center; margin-top: var(--k-s6); }
.k-ajakan .k-tombol-utama { background: #fff; color: var(--k-merek); box-shadow: 0 10px 30px rgba(0,0,0,0.22); }
.k-ajakan .k-tombol-utama:hover { background: #f2f5ff; }
.k-ajakan .k-tombol-hening {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.k-ajakan .k-tombol-hening:hover { background: rgba(255, 255, 255, 0.2); }

.k-kaki {
  margin-top: var(--k-s12);
  padding: var(--k-s6) 0 var(--k-s12);
  border-top: 1px solid var(--k-hairline);
}
.k-kaki p + p { margin-top: var(--k-s2); }

/* Kerangka sementara. Denyutnya adalah UMPAN BALIK, bukan hiasan: ia
   menyatakan "sedang datang" pada koneksi seluler yang lambat. Karena itu ia
   berdenyut, dan karena itu pula ia berhenti berdenyut ketika pengguna
   meminta gerak dikurangi (blok reduced-motion di bawah). */
.k-rangka { pointer-events: none; }
.k-rangka-gambar {
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #eef1f6, #e6eaf1);
}
.k-rangka-baris {
  height: 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.055);
  margin: 10px 0;
}
.k-rangka .k-rangka-gambar,
.k-rangka .k-rangka-baris { animation: k-denyut 1.5s ease-in-out infinite; }
@keyframes k-denyut { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Keadaan seluruh halaman: 503 dibedakan tegas dari 200 berisi data kosong.
   Kegagalan sistem dan kekosongan data terlihat sama bagi pelanggan kalau
   tidak dibedakan, dan yang pertama harus terlihat oleh kita sebagai insiden. */
.k-keadaan { padding: var(--k-s8) var(--k-s6); text-align: center; }
.k-keadaan h3 { margin-bottom: var(--k-s2); }
.k-keadaan p { color: var(--k-teks-2); font-size: 14px; margin: 0 auto; max-width: 46ch; }
.k-keadaan .k-tombol { margin-top: var(--k-s4); }

/* ═══════════════════════════════════════════════════════════════════════════
   16. Penyingkapan masuk
   SATU animasi per bagian, sekali, dipicu saat bagian mendekat. Bukan hiasan:
   ia memberi ritme baca pada halaman panjang.

   KENAPA DIGERBANGI `.k-js` PADA <html>. Kelas itu dipasang katalog.js sebagai
   baris pertamanya. Tanpa gerbang ini, `opacity: 0` berlaku sejak byte CSS
   pertama tiba, sehingga halaman yang skripnya gagal dimuat (jaringan seluler
   putus di tengah, atau salah ketik yang lolos karena berkas ini di luar
   jangkauan tsc) menjadi HALAMAN KOSONG di depan calon pelanggan, bukan
   halaman tanpa animasi. Kegagalan itu senyap dan tidak akan pernah muncul di
   `npm run build`.
   ═══════════════════════════════════════════════════════════════════════════ */
.k-js .k-muncul { opacity: 0; transform: translateY(14px); }
.k-js .k-muncul.k-tampil {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--tunda, 0ms);
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. Responsif
   Mobile-first: gaya dasar untuk ponsel, min-width MENAMBAH, tidak pernah
   mengurangi.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .k-halaman { padding-left: var(--k-s6); padding-right: var(--k-s6); }
  .k-sim { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .k-panggung { height: 260px; }
}
@media (min-width: 1024px) {
  .k-hero { padding-top: var(--k-s16); }
  .k-bagian { padding-top: var(--k-s16); }
}

/* Tabel atau blok yang memang lebar mendapat wadah scroll SENDIRI, sehingga
   gulir mendatarnya tidak pernah merambat ke halaman. */
.k-lebar-bungkus {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. prefers-reduced-motion
   Bukan "matikan semuanya", melainkan: jangan memulai gerak sendiri dan jangan
   menganimasikan perpindahan besar. Yang bersifat INFORMASI tetap hidup
   (nilai angka, lebar bilah, tinggi balok berubah seketika); yang bersifat
   DEKORASI yang dimatikan.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Sudut balok diam pada posisi terbaik. Rotasi manual lewat tombol TETAP
     bekerja, karena itu tindakan sadar pengguna. */
  .k-adegan, .k-muatan, .k-bilah-isi, .k-gelas-isi { transition: none; }
  .k-foto:hover { transform: none; }
  .k-kelas-gambar:hover img { transform: none; }
  /* Penyingkapan masuk tidak boleh menyembunyikan isi bila geraknya dimatikan. */
  .k-js .k-muncul { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. Cetak
   Kartu hasil sering dicetak ke PDF dan dilampirkan ke permintaan penawaran
   internal pelanggan. Penyangkalan wajib ikut tercetak.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .k-kop, .k-panggung-bungkus, .k-hero-aksi, .k-ajakan-aksi, .k-lightbox { display: none !important; }
  body { background: #fff; }
  .k-kartu { box-shadow: none; border-color: #ddd; background: #fff; }
  .k-bagian { padding-top: var(--k-s6); break-inside: avoid; }
}