/* ============================================================
   ANAYA — BASE
   Reset, tipografi dasar, layout primitif, utility.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  /* Kilatan bawaan saat elemen disentuh: Android menggambar kotak biru/abu
     tebal, iOS kotak abu gelap — keduanya menutupi tombol pill & kartu
     dengan persegi yang tidak mengikuti sudut membulatnya. Diganti tint
     brand tipis, BUKAN `transparent`: tanpa umpan balik sama sekali, di layar
     sentuh tidak terlihat apakah ketukan diterima. */
  -webkit-tap-highlight-color: rgba(28, 117, 188, 0.12);
  scroll-behavior: smooth;
  /* Navbar sekarang melayang (position: sticky/fixed), jadi setiap lompatan
     jangkar — skip link "Lewati ke konten", tombol ke #penawaran, paginasi —
     mendarat di BALIK navbar kalau tidak diberi jarak. Ditulis sekali di sini,
     bukan sebagai scroll-margin-top per target: targetnya bertambah terus dan
     yang terlewat gagal diam-diam (isinya cuma tertutup, bukan error). */
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scrollbar batang di layar sempit. Browser HP asli sudah memakai scrollbar
   overlay yang menghilang sendiri, tapi di webview/browser yang memakai
   scrollbar klasik batangnya memakan ~15px lebar layar dan terlihat seperti
   elemen desain yang salah tempat. Halaman tetap bisa di-scroll seperti biasa
   — yang disembunyikan cuma tampilannya, bukan kemampuannya. */
@media (max-width: 900px) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { width: 0; height: 0; }
}

/* Kunci halaman selama drawer menu terbuka, supaya yang ter-scroll cuma isi
   drawer-nya (dipasang/dilepas oleh initNav di main.js). */
body.is-drawer-open { overflow: hidden; }

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* Default ikon SVG: hanya ukuran. Ukuran spesifik tetap diatur komponen
   masing-masing (.btn .icon, .card-cat .icon, dst.).
   JANGAN menambahkan fill/stroke di sini — CSS mengalahkan atribut presentasi
   di sprite, dan ikon bergaya solid (linkedin, phone, location, whatsapp)
   memakai fill="currentColor" sementara sisanya stroke. Satu aturan global
   akan mematikan salah satu kelompok. */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  /* Aman untuk <svg> (viewBox selalu persegi) maupun <img> ikon PNG hasil
     ekspor Figma yang rasionya beragam — cegah gepeng saat dipaksa masuk
     kotak persegi oleh konteks (.card-cat .icon, .icon-rail__badge .icon). */
  object-fit: contain;
  /* Beberapa ikon (kartu nilai, penanda Misi di Tentang) adalah PNG hasil
     export Figma, bukan simbol SVG — rasionya tidak selalu persis persegi.
     object-fit: contain mencegah distorsi saat width/height dipaksa oleh
     komponen; tidak berpengaruh pada <svg>. */
  object-fit: contain;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--t-fast);
}

/* Fokus keyboard harus selalu terlihat — jangan hapus tanpa pengganti. */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Tipografi ---------- */

h1, h2, h3, h4 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  /* Catatan: text-wrap:balance meratakan panjang baris judul, sedangkan
     Figma kadang memakai pemenggalan MANUAL (mis. hero Flexitank). Kalau
     sebuah judul harus persis mengikuti desain, tulis <br> di markup-nya —
     jangan matikan balance global, karena judul lain sudah pas begini. */
  text-wrap: balance;
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-section); }
h3 { font-size: var(--fs-product); }
h4 { font-size: var(--fs-card-title); }

p { text-wrap: pretty; }

/* Judul section — biru, tengah. Pola paling sering di desain. */
.section-title {
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  text-align: center;
}

.section-lead {
  /* 760px = lebar lead di Tentang (dump 767px). Lead Home jauh lebih lebar
     (1017px) — pakai .section-lead--wide. */
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  /* Dump Home (18/23) & Tentang (18/25) sepakat 18px — bukan --fs-body-sm
     (16px) yang dipakai sebelumnya. */
  font-size: var(--fs-body);
  /* Rasio dump 1,28-1,39 — bukan --lh-body (1,7) yang terwarisi dari body.
     Ini kalimat pengantar pendek, bukan paragraf artikel. */
  line-height: var(--lh-snug);
}

/* Lead lebar — dump Home: 1017px, hampir selebar container. */
.section-lead--wide { max-width: 1020px; }

/* Varian besar — subjudul "Isi formulir berikut" di Kontak: 25px (dump). */
.section-lead--lg { font-size: var(--fs-hero-sub); }

/* Ikon PNG hasil ekspor manual dari Figma yang warnanya harus ikut konteks
   (biru di form, hitam default / putih saat hover-aktif di kartu kategori) —
   sumbernya abu-abu/hitam/putih apa adanya, warna finalnya diatur di sini
   lewat background-color:currentColor, bentuknya dari alpha channel PNG
   (mask-image mengabaikan RGB, cuma pakai siluetnya). Dipakai untuk ikon yang
   TIDAK bisa dipakai apa adanya seperti nilai-*.png (yang sudah putih solid
   dan konteksnya cuma satu warna, jadi cukup <img> biasa). */
/* mask-image SENGAJA tidak diatur di sini lewat var(--icon-src) — persis
   jebakan aturan #8 di catatan proyek: url() di dalam custom property diresolusi
   terhadap file CSS ini (assets/css/), bukan terhadap dokumen HTML yang
   memakainya. mask-image/-webkit-mask-image ditulis langsung di atribut
   style tiap elemen (lihat tools/terapkan-ikon-figma.py) supaya resolusinya
   ikut dokumen, sama seperti solusi background-image di aturan itu. */
.icon-mask {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.text-muted { color: var(--c-ink-soft); }
/* Dump Home & Tentang: tanggal artikel 12px, bukan 13px. --fs-meta (13px)
   tetap ada untuk tombol teks kecil ("Lihat Lebih", 13px di dump). */
.text-meta  { font-size: var(--fs-micro); color: var(--c-ink-soft); }

/* ---------- Layout ---------- */

/* Kolom konten = yang lebih kecil antara --container (1200px) dan lebar layar
   dikurangi gutter di kedua sisi. Ditulis dengan width+min(), bukan max-width+
   padding: dengan padding, gutter memakan lebar konten sehingga di layar lebar
   kolomnya jadi 1152px, bukan 1200px seperti desain. */
.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section { padding-block: var(--section-y); }

/* Dua section berurutan menumpuk padding: 80px bawah + 80px atas = 160px,
   sementara di desain jarak antar-section sekitar 106px. Padding atas
   dinolkan supaya jarak ditentukan oleh satu section saja, bukan dua. */
.section + .section { padding-top: 0; }

/* Full-bleed: menembus lebar viewport walau berada di dalam container.

   Penempatannya WAJIB lewat margin, JANGAN lewat transform. Versi lama
   memakai `margin-left: 50%` + `transform: translateX(-50%)`: kotak TATA
   LETAKNYA membentang 720px..2160px di viewport 1440px, lalu ditarik balik
   secara visual oleh transform. Chromium & WebKit menghitung area gulir
   dokumen dari posisi SESUDAH transform, Firefox dari kotak tata letak
   aslinya — jadi di Firefox halaman Flexitank benar-benar bisa digeser ~716px
   ke kanan ke ruang kosong (diuji 2026-09-09, `window.scrollX` mencapai 716).

   Bug ini sulit dilacak karena `getBoundingClientRect()` mengembalikan kotak
   SESUDAH transform, sehingga setiap pemindaian "elemen yang lewat tepi
   kanan" melapor bersih — yang meluber cuma area gulirnya, tanpa satu pun
   elemen yang bisa ditunjuk. Cirinya khas: luberan tepat 50% lebar viewport
   di lebar berapa pun (720 dari 1440, 195 dari 390).

   `calc(50% - 50vw)` menempatkannya lewat properti tata letak, jadi ketiga
   mesin sepakat. Posisi & lebar hasilnya identik dengan sebelumnya
   (kiri=0, lebar=1440 di ketiganya). */
/* Pita selebar layar (band CTA Tentang, band CTA & sertifikasi Flexitank,
   band KCL Home).

   ⚠️ TIDAK memakai `100vw`. `100vw` mengukur viewport TERMASUK batang gulir
   vertikal, sementara `50%` mengukur lebar ISI induknya yang sudah dikurangi
   batang gulir itu. Selisihnya = lebar scrollbar, dan elemennya meluber
   sebanyak itu ke kanan -- muncul batang gulir MENDATAR di seluruh halaman
   yang memakainya.

   Gagalnya tidak pernah terlihat di pengujian otomatis: Chromium headless
   memakai overlay scrollbar selebar 0px, jadi `100vw` kebetulan sama persis
   dengan lebar isi dan tidak ada yang meluber. Di Chrome Windows sungguhan
   (scrollbar klasik 15px) halaman meluber 8px. Terukur 2026-09-16 di
   peramban bermodus tampil: Home 8px, Flexitank 8px -- dan yang Flexitank
   sudah begitu sejak lama, bukan regresi hari itu.

   Yang dipakai sekarang cuma `width: 100%`. SYARATNYA induk elemen ini sudah
   selebar viewport; itu benar untuk seluruh pemakaian sekarang (ketiganya
   anak langsung <main>, yang memang tanpa max-width -- yang membatasi lebar
   adalah `.container` DI DALAM section, bukan section-nya).
   ⚠️ Kalau suatu saat kelas ini dipasang pada elemen DI DALAM `.container`,
   ia tidak akan menembus keluar. Itu disengaja: lebih baik tidak full-bleed
   daripada menghidupkan lagi batang gulir mendatar di seluruh situs. */
.full-bleed {
  width: 100%;
  margin-inline: 0;
}

.stack > * + * { margin-top: var(--flow, var(--sp-4)); }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* ---------- Utility ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — WAJIB keluar dari persembunyian saat difokus.

   Tautan ini elemen PERTAMA yang dijangkau Tab di setiap halaman. Semula ia
   cuma memakai `.sr-only` tanpa aturan `:focus` sama sekali, jadi tetap
   terkleklip 1x1px bahkan saat difokus: pengguna keyboard menekan Tab sekali
   dan fokusnya mendarat di tautan yang TIDAK TERLIHAT di mana pun, lalu
   menekan Enter membawa mereka entah ke mana. Gejalanya tak kasatmata dari
   membaca markup — markupnya benar, yang hilang justru aturan CSS-nya.
   Ditemukan 2026-09-09 lewat `tools/audit-aksesibilitas.py`; WCAG 2.4.1
   (Bypass Blocks) & 2.4.7 (Focus Visible).

   `clip: auto` + `width/height: auto` melepas kleklip `.sr-only`; sisanya
   memakai gaya tombol utama supaya terbaca sebagai kontrol sungguhan. */
.skip-link:focus {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-header);
  width: auto;
  height: auto;
  padding: var(--sp-3) var(--sp-5);
  clip: auto;
  background: var(--c-primary);
  color: var(--c-white);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
}

.center { text-align: center; }

/* ---------- Reveal saat scroll ----------
   Elemen diberi .reveal; JS menambahkan .is-visible saat masuk viewport. */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Jeda kecil supaya teks pengantar menyusul judulnya, bukan muncul serentak.
   Sengaja cuma 90ms: cukup terasa berurutan, tidak sampai terkesan menunggu.
   Hanya untuk elemen sekali-jalan — JANGAN dipasang bersama .reveal--ulang,
   karena elemen itu melepas .is-visible saat keluar layar dan jedanya akan
   ikut menahan animasi mundurnya. */
.reveal--tunda { transition-delay: 90ms; }

/*
 * WADAH PEMICU: elemennya sendiri TIDAK dianimasikan — ia hanya ikut
 * diobservasi supaya mendapat `.is-visible`, dan yang muncul adalah
 * anak-anaknya.
 *
 * ⚠️ Kenapa ini ada. Diagram Flexitank memakai `.reveal`, jadi SELURUH blok
 * (foto kontainer + garis + titik + label) memudar masuk bersama selama
 * 400ms. Sesudah animasi label dipercepat jadi 200ms, urutannya jadi:
 * label tuntas di 248ms sementara induknya baru selesai di 448ms — terukur
 * lewat event `transitionend`. Akibatnya labelnya tidak pernah terlihat
 * MUNCUL di atas fotonya; yang sampai ke mata hanya satu gambar yang
 * fade-in. Klien melaporkannya sebagai "belum kaya muncul dari gak ada".
 *
 * Dengan kelas ini fotonya sudah ada sejak awal dan diam, lalu garis, titik,
 * dan label muncul di atasnya — itulah "muncul dari tidak ada" yang dimaksud.
 */
.reveal--wadah {
  opacity: 1;
  transform: none;
  transition: none;
}

/* JARING PENGAMAN TANPA JS. `anaya-no-js` dipasang di body oleh
   anaya_body_class() (inc/helpers.php) dan dilepas oleh skrip inline di
   header.php sebelum halaman digambar.

   Aturan ini SEBELUMNYA TIDAK ADA — komentar di berkas ini menjanjikannya
   ("Tanpa JS, aturan .no-js di bawah membuatnya tetap terlihat") tapi
   CSS-nya tidak pernah ditulis, sehingga dengan JavaScript dimatikan
   SELURUH isi halaman tinggal ruang kosong: elemen .reveal bertahan di
   opacity 0 selamanya. Diuji ulang 2026-09-08 dengan Playwright
   `java_script_enabled=False` — halaman Tentang benar-benar kosong.
   Jangan dihapus: makin banyak elemen yang diberi .reveal, makin besar
   akibatnya. */
.anaya-no-js .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- Aksesibilitas motion ----------
   Wajib. Semua animasi dimatikan, semua elemen reveal langsung tampil. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}