/* ============================================================
   lanka.net — MAIN STYLESHEET
   Dibangun dari nol di atas assets/css/tokens.css.
   Nol baris diimpor dari repo cocoexportindo atau galangalsupplier
   (Aturan Keras no. 1 · SERP strategy bagian 29 poin 4).

   Urutan:
     1. Reset & dasar
     2. Utilitas & primitif (container, btn, field, division-tag)
     3. Header & navigasi
     4. Komponen C1–C14
     5. Footer & floating WA
     6. Cetak
   ============================================================ */

/* ============================================================
   1. RESET & DASAR
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor #rfq tidak boleh tersembunyi di balik header sticky. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
  /* Kata tunggal boleh dipecah HANYA kalau ia benar-benar tidak muat.
     Ditambahkan 11 Agustus 2026 setelah audit zoom teks: pada zoom TEKS 200%
     (mode Firefox) heading tumbuh 2x sementara lebar kolom tidak, dan kata
     seperti "Indonesian" jadi lebih lebar daripada kolomnya — hasilnya
     luapan horizontal di seluruh situs.
     `anywhere`, bukan `break-word`: break-word tidak mempengaruhi perhitungan
     lebar minimum intrinsik, jadi flex/grid tetap memesan ruang selebar kata
     terpanjang dan luapannya tetap terjadi. Di ukuran normal tidak ada yang
     berubah — tidak ada kata yang perlu dipecah. */
  overflow-wrap: anywhere;
}

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* Alasan sama dengan heading, tapi akibatnya lebih halus dan lebih merusak.
   `overflow-wrap: anywhere` ikut mengubah perhitungan lebar MIN-CONTENT — dan
   itulah yang dipakai grid/flex untuk menentukan lebar minimum sebuah track.
   Tanpa ini, satu kata panjang di paragraf memaksa track grid selebar kata
   itu: pada zoom teks 200% di 375px, .c8-rfq__inner memesan 389px di dalam
   kotak 296px, dan seluruh halaman ikut meluber.
   Diukur 11 Agustus 2026; sebelumnya luapan itu terbaca seolah berasal dari
   heading, padahal heading sudah ditangani. */
p, li, dd, dt, td, th, figcaption, label, summary {
  overflow-wrap: anywhere;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

img, svg { max-width: 100%; height: auto; display: block; }

table { border-collapse: collapse; width: 100%; }

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

/* Fokus terlihat di semua kontrol — DoD struktur no. 7.
   Warna ring HARUS mengikuti terang/gelapnya permukaan di baliknya: satu
   warna tidak bisa memenuhi 3:1 di keduanya. Default di bawah untuk
   permukaan terang; override berikutnya untuk seksi gelap. */
:focus-visible {
  outline: var(--bw-thick) solid var(--focus-ring);
  outline-offset: 2px;
}

/* Seksi berlatar gelap. Kalau menambah komponen gelap baru, daftarkan di
   sini juga — kalau tidak, ring brass gelapnya nyaris hilang di atasnya. */
.site-header :focus-visible,
.nav-panel :focus-visible,
.c13-breadcrumb :focus-visible,
.c1-hero :focus-visible,
.c2-trust :focus-visible,
.c6-proof :focus-visible,
.c14-cta :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--focus-ring-inverse);
}

/* Tombol WA melayang adalah kasus khusus: posisinya fixed, jadi ia melintasi
   seksi terang DAN gelap saat halaman digulir. Ring satu warna pasti gagal di
   salah satunya. Solusinya cincin dua nada — brass terang menempel di tepi
   tombol (kontras dengan isian gelapnya), lalu cincin navy di luarnya
   (kontras dengan latar terang). Kedua nada berkontras 8.37:1 satu sama lain,
   sehingga selalu ada tepi yang terbedakan apa pun yang ada di belakangnya. */
.wa-float:focus-visible {
  outline: var(--bw-thick) solid var(--focus-ring-inverse);
  outline-offset: 2px;
  box-shadow: var(--sh-raise), 0 0 0 6px var(--c-navy-900);
}

/* Angka spec, harga, MOQ, nomor dokumen selalu mono — Aturan Keras no. 6.
   Ini kelas paling penting di stylesheet: dia yang membuat halaman terbaca
   sebagai trading desk, bukan brosur. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.95em;
  letter-spacing: var(--ls-normal);
}

/* ============================================================
   2. UTILITAS & PRIMITIF
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: var(--z-panel);
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: var(--c-navy-900);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-xs);
}
.skip-link:focus { top: var(--sp-2); }

/* Heading seksi dengan rule brass — penanda dokumen, bukan hiasan. */
.section-heading {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: var(--bw-rule) solid var(--accent);
  display: inline-block;
}

/* --- Section prosa ------------------------------------------
   Untuk bagian halaman yang bukan komponen C1–C14 (Applications,
   Packing & loading, konten pembeda, Related). Komponen tetap
   punya style sendiri; ini hanya kerangka. */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--sp-8); }
.section--subtle { background: var(--bg-subtle); }
.section__intro { max-width: 68ch; color: var(--text-secondary); }

/* Batas lebar baca dipasang pada ANAK-anaknya, bukan pada .container itu
   sendiri. Kalau .prose menimpa max-width .container, `margin-inline: auto`
   milik .container ikut menengahkan seluruh blok — section prosa jadi
   mengambang di tengah sementara section lain rata kiri, dan grid tegas
   yang diminta bagian 32 patah. Dengan cara ini lebar baca tetap ~70ch
   tapi tepi kirinya sejajar dengan seluruh halaman. */
.prose > * { max-width: 70ch; }
.prose p + p { margin-top: var(--sp-4); }
.prose h3 {
  font-size: var(--fs-lg);
  margin: var(--sp-6) 0 var(--sp-2);
}

/* Daftar aplikasi — satu kalimat per item, format baris data. */
.app-list {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
@media (min-width: 48rem) {
  .app-list { grid-template-columns: repeat(2, 1fr); }
}
.app-list__item {
  padding: var(--sp-4);
  background: var(--bg-surface);
  border: var(--bw-hair) solid var(--border-subtle);
  border-left: var(--bw-rule) solid var(--accent);
  border-radius: var(--r-xs);
}
.app-list__term {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-1);
}
.app-list__body { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; }

/* Daftar catatan tujuan / packing — baris data padat. */
.data-list { border-top: var(--bw-hair) solid var(--border-subtle); margin-top: var(--sp-5); }
.data-list__row {
  display: grid;
  gap: var(--sp-1) var(--sp-5);
  padding: var(--sp-3) 0;
  border-bottom: var(--bw-hair) solid var(--border-subtle);
  font-size: var(--fs-sm);
}
@media (min-width: 40rem) {
  .data-list__row { grid-template-columns: 14rem 1fr; }
}
.data-list__key {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.data-list__val { margin: 0; }
/* WhatsApp/email di baris data adalah aksi, bukan sekadar teks — beri
   tinggi target sentuh yang memadai. */
.data-list__val a {
  display: inline-block;
  padding-block: var(--sp-1);
}
/* Kolom KUNCI juga bisa berisi tautan — dan di dua tempat itulah tautan
   utamanya: indeks negara dan indeks guide memakai .data-list__key sebagai
   judul yang bisa diklik. Tanpa aturan ini tingginya cuma 14px.

   Ditemukan 11 Agustus 2026 lewat audit target sentuh (WCAG 2.2 SC 2.5.8):
   19 tautan di bawah 24px, 17 di antaranya di sini. Aturan untuk .__val
   sudah ada sejak lama; versi .__key terlewat karena saat itu belum ada
   halaman yang menaruh tautan di kolom kunci. */
.data-list__key a {
  display: inline-block;
  padding-block: var(--sp-2);
}

/* Entity block /about/ — punya kelas sendiri, tidak meminjam milik C1/C8.
   Bordernya sengaja border-subtle (bukan navy-600 milik hero) karena blok ini
   duduk di latar terang. */
.entity-block { display: grid; gap: var(--sp-8); }
@media (min-width: 56rem) {
  .entity-block { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
}
.entity-block__photo { margin: 0; }
.entity-block__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 30rem;
  object-fit: cover;
  object-position: center 30%;
  border: var(--bw-hair) solid var(--border-subtle);
  border-radius: var(--r-sm);
}

/* Foto produk pada halaman produk — 11 Agustus 2026.
   Sejak hero halaman produk berubah jadi berlatar foto, foto produk tidak lagi
   terbaca di hero (tertutup scrim). Blok ini mengembalikannya ke tempat yang
   justru lebih berguna: tepat di bawah tabel spec yang menjelaskannya.

   Lebar dibatasi pada ANAK-nya, bukan pada elemen ini, dan tidak ada
   max-width di sini — .container punya margin-inline:auto, jadi menyempitkan
   elemen ber-container membuat blok ini tertengahkan sementara tabel di
   atasnya rata kiri. Pernah menggigit di .prose dan .c10-faq__inner. */
.product-figure {
  margin: var(--sp-8) 0 0;
}
.product-figure img {
  width: 100%;
  max-width: 46rem;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 45%;
  border: var(--bw-hair) solid var(--border-subtle);
  border-radius: var(--r-sm);
}
.product-figure__caption {
  max-width: 60ch;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Related — satu link kontekstual ke produk saudara (aturan bagian 13). */
.related {
  padding: var(--sp-5);
  border: var(--bw-hair) solid var(--border-subtle);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
}
.related__label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.related__link { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

/* Blok divisi di homepage & /products */
.division-block + .division-block { margin-top: var(--sp-12); }
.division-block__head { margin-bottom: var(--sp-5); max-width: 60ch; }
.division-block__title { font-size: var(--fs-xl); margin: var(--sp-2) 0; }

/* Judul gelombang pada indeks negara. DULU memakai `.division-block__title`,
   dan itu jebakan: audit CSS menggolongkan seluruh keluarga `division-*`
   sebagai DORMAN menunggu divisi kedua, padahal yang satu ini hidup dan
   merender tiga judul di /supplier/dried-galangal/. Pembersihan sisa
   `division` berikutnya akan menghapusnya tanpa satu pun gerbang menyala,
   karena HTML tetap merender dan hanya gayanya yang hilang — persis yang
   sudah terjadi pada token `--division-coir-*`.
   Namanya kini menyebut apa yang benar-benar dirender: gelombang pasar,
   bukan divisi. */
.market-wave__title { font-size: var(--fs-xl); margin: var(--sp-2) 0; }
/* .c9-deepdive__host DIHAPUS 13 Agustus 2026 — kelas INTERNAL komponen C9
   yang pernah dipinjam /guides/ (audit QA 11 Agustus). Halaman meminjam
   kelas internal komponen sudah menggigit proyek ini dua kali: /about/
   meminjam .c8-rfq__inner dan .c1-hero__visual, lalu /guides/ meminjam ini.
   Penggantinya .guide-list__for. Selama definisinya masih ada, pinjaman
   berikutnya akan tampak berfungsi. */
/* .card-grid--4 DIHAPUS 13 Agustus 2026 — NOL halaman memakainya. CLAUDE.md
   entri P2 Tier B menyebut halaman negara memakai grid `card-grid--4`;
   diperiksa ke filesystem, ke-15 halaman itu memakai
   `card-grid market-products__grid`. Catatannya sudah dikoreksi. */
.card-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) { .card-grid { grid-template-columns: repeat(2, 1fr); } }


/* Tiga poin nilai induk (homepage "Why one export desk") */
.value-grid { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
@media (min-width: 48rem) { .value-grid { grid-template-columns: repeat(3, 1fr); } }
.value-grid__item { padding-top: var(--sp-4); border-top: var(--bw-thick) solid var(--accent); }
.value-grid__title { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.value-grid__body { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; }

.deepdive-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 48rem) { .deepdive-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Label divisi -------------------------------------------
   SATU-SATUNYA pemakai token --division-*. Ukurannya sengaja
   kecil: bagian 32 menyebutnya "sistem penanda, bukan tema". */
.division-tag {
  display: inline-block;
  margin: 0 0 var(--sp-2);
  padding: 3px var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border-radius: var(--r-xs);
}
.division-tag--spice {
  background: var(--division-spice-bg);
  color: var(--division-spice-text);
}
/* .division-tag--coir DIHAPUS 11 Agustus 2026 (audit QA P2) — divisi coir
   tidak ada lagi sejak pivot; aturannya menahan warna identitas cocoexportindo
   tanpa satu pun pemakaian yang sah. Alasan lengkap ada di tokens.css blok 9.
   Nilai hex-nya sengaja TIDAK ditulis ulang di sini: gerbang validator
   melarang hex warna divisi muncul di main.css dan tidak bisa membedakan
   komentar dari deklarasi — dan sikap ketat itu yang benar. */

/* --- Tombol -------------------------------------------------
   Sudut tajam-ish, tanpa gradient, tanpa bayangan lembut. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* TANPA flex-wrap — sempat dipasang lalu DICABUT 11 Agustus 2026.
     flex-wrap menjadikan glif panah ↗ item flex terpisah yang ikut
     membungkus: di 320px NORMAL panah terlempar ke baris ketiga sendirian,
     terpisah dari teksnya. Itu memperbaiki skenario ekstrem dengan merusak
     tampilan biasa — pertukaran yang salah arah.
     Tanpa flex-wrap, teks tetap membungkus DI DALAM item flex-nya sendiri
     dan panah tetap menempel di sampingnya.

     overflow-wrap: anywhere tetap dipakai. Ia yang menangani skenario paling
     ekstrem (zoom teks 200% di 320px), tempat kata "WhatsApp" pada 32px
     lebih lebar daripada kolomnya. Memecah kata memang jelek; gulir
     horizontal di seluruh halaman lebih jelek, dan hanya salah satu dari
     keduanya yang membuat konten tidak terjangkau. */
  text-align: center;
  overflow-wrap: anywhere;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border: var(--bw-hair) solid transparent;
  border-radius: var(--r-xs);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-md); }
.btn--block { width: 100%; }

.btn--accent {
  background: var(--accent);
  color: var(--c-navy-900);
  border-color: var(--accent);
}
.btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--outline:hover { background: var(--text-primary); color: var(--text-inverse); }

.btn--ghost-inverse {
  background: transparent;
  color: var(--text-inverse);
  border-color: var(--border-inverse);
}
.btn--ghost-inverse:hover { background: var(--c-navy-700); border-color: var(--c-navy-500); }

/* --- Field form --------------------------------------------- */
.field { margin-bottom: var(--sp-4); }

.field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.field__control {
  width: 100%;
  padding: var(--sp-3);
  background: var(--bg-surface);
  border: var(--bw-hair) solid var(--c-navy-300);
  border-radius: var(--r-xs);
  font-size: var(--fs-base);
}
.field__control:hover { border-color: var(--c-navy-500); }
.field__control--area { resize: vertical; min-height: 7rem; }

.field__control[aria-invalid="true"] {
  border-color: var(--c-danger);
  background: var(--c-danger-bg);
}

.field-row { display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   3. HEADER & NAVIGASI
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-inverse);
  border-bottom: var(--bw-hair) solid var(--c-navy-700);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-inverse);
  margin-right: auto;
}
.brand { gap: var(--sp-2); }
.brand__mark { height: 28px; width: auto; flex: none; }
/* Wordmark selalu teks — aset logo adalah mark tanpa tulisan.
   Lihat catatan di partials/header.php. */
.brand__wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  /* TANPA white-space: nowrap — dicabut 11 Agustus 2026 setelah audit zoom.
     Dengan nowrap, wordmark memaksa satu baris berapa pun lebarnya. Pada
     zoom TEKS 200% di 375px ia tumbuh 144px -> 289px dan mendorong header
     meluber 61px, memunculkan gulir horizontal di seluruh situs.
     Zoom browser 200% (uji baku, 1280 -> 640 CSS) tidak terpengaruh dan
     memang lolos; yang gagal adalah mode zoom-teks-saja seperti di Firefox.
     Tanpa nowrap teksnya TETAP satu baris di semua ukuran normal — ia hanya
     membungkus saat benar-benar tidak muat, yaitu perilaku yang diinginkan. */
}
/* min-width: 0 supaya flex item boleh menyusut di bawah lebar kontennya.
   Tanpa ini, membungkus teks saja tidak cukup: brand tetap menuntut lebar
   minimum sebesar kata terpanjangnya. */
.brand { min-width: 0; }
@media (max-width: 26rem) {
  /* Layar sempit: mark + CTA + hamburger sudah penuh, wordmark dipendekkan
     supaya header tidak membungkus jadi dua baris. */
  .brand__wordmark { font-size: var(--fs-sm); }
}

.nav-desktop { display: none; }
@media (min-width: 62rem) {
  .nav-desktop { display: block; }
  .nav-desktop__list { display: flex; gap: var(--sp-5); }
}

.nav-desktop__link {
  display: block;
  padding: var(--sp-2) 0;
  color: var(--text-inverse-muted);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-bottom: var(--bw-thick) solid transparent;
}
.nav-desktop__link:hover { color: var(--text-inverse); }
.nav-desktop__link.is-current {
  color: var(--text-inverse);
  border-bottom-color: var(--accent);
}

.site-header__cta { display: none; }
@media (min-width: 62rem) { .site-header__cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: transparent;
  border: var(--bw-hair) solid var(--c-navy-600);
  border-radius: var(--r-xs);
  color: var(--text-inverse);
  cursor: pointer;
}
@media (min-width: 62rem) { .nav-toggle { display: none; } }

.nav-toggle__bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle__bars i { display: block; height: 2px; background: currentColor; }

/* Panel mobile — muat satu layar tanpa scroll (bagian 48). */
.nav-panel {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: var(--z-panel);
  background: var(--bg-inverse-deep);
  border-bottom: var(--bw-hair) solid var(--c-navy-700);
  box-shadow: var(--sh-panel);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.nav-panel[hidden] { display: none; }
@media (min-width: 62rem) { .nav-panel { display: none !important; } }

.nav-panel__inner { padding: var(--sp-4) var(--container-pad) var(--sp-6); }

.nav-panel__link {
  display: block;
  padding: var(--sp-3) 0;
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  text-decoration: none;
  border-bottom: var(--bw-hair) solid var(--c-navy-700);
}
.nav-panel__link--sub {
  font-size: var(--fs-sm);
  color: var(--text-inverse-muted);
  padding: var(--sp-2) 0;
}

.nav-panel__heading {
  margin: var(--sp-5) 0 var(--sp-1);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  /* Bukan --c-navy-400: token itu hanya 3.96:1 di atas latar panel. */
  color: var(--text-inverse-muted);
}

.nav-panel__actions {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* ============================================================
   4. KOMPONEN C1–C14
   ============================================================ */

/* --- C13 Breadcrumb -----------------------------------------
   Tanpa aturan ini, reset `ol { list-style:none }` membuat setiap <li>
   tetap block dan breadcrumb menumpuk jadi tiga baris.
   Warnanya sengaja gelap: breadcrumb duduk antara header (#111827) dan
   hero (#0f1b2d), jadi ia menjadi satu pita gelap yang menyatu daripada
   strip terang menyempil di antara dua blok gelap. */
.c13-breadcrumb {
  background: var(--bg-inverse);
  border-bottom: var(--bw-hair) solid var(--c-navy-700);
}
/* Varian inline — breadcrumb hidup DI DALAM hero C1 (halaman produk,
   11 Agustus 2026), bukan sebagai pita sendiri.

   Latar dan border dilepas karena di sini ia sudah berada di atas scrim hero;
   mempertahankannya akan menggambar kotak gelap kedua di tengah foto.
   Padding container juga dilepas — .c1-hero__inner SUDAH ber-.container, dan
   membiarkan keduanya membuat breadcrumb menjorok satu tingkat lebih dalam
   daripada H1 di bawahnya. */
.c13-breadcrumb--inline {
  background: none;
  border-bottom: 0;
  margin-bottom: var(--sp-4);
}
.c13-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-inverse-muted);
}
.c13-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
/* Target sentuh 24px (WCAG 2.2 SC 2.5.8) — sama seperti link footer. */
.c13-breadcrumb__list a,
.c13-breadcrumb__list [aria-current="page"] {
  display: inline-block;
  padding-block: var(--sp-2);
}
.c13-breadcrumb__list a {
  color: var(--text-inverse-muted);
  text-decoration: none;
}
.c13-breadcrumb__list a:hover {
  color: var(--text-inverse);
  text-decoration: underline;
}
.c13-breadcrumb__list [aria-current="page"] {
  color: var(--text-inverse);
  font-weight: var(--fw-medium);
}
.c13-breadcrumb__sep {
  color: var(--accent);
  user-select: none;
}

/* --- C1 Hero ------------------------------------------------ */
.c1-hero {
  background: var(--bg-inverse-deep);
  color: var(--text-inverse);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.c1-hero__inner { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 56rem) {
  .c1-hero__inner { grid-template-columns: 1.15fr 0.85fr; }
  /* Satu kolom HANYA kalau memang tidak ada foto. Sebelumnya
     .c1-hero--compact ikut dipaksa satu kolom, sehingga hero compact yang
     diberi foto menumpuknya di BAWAH teks dan membengkak (terukur: 1002px
     di viewport 1280). Kedelapan halaman pendukung memakai varian compact,
     jadi bug ini akan menggigit tepat saat foto dipasang. */
  .c1-hero--no-visual .c1-hero__inner { grid-template-columns: minmax(0, 46rem); }
}

/* --- C1 varian latar foto (homepage saja) -------------------
   Foto operasional jadi latar section, teks di atasnya.

   Scrim BUKAN hiasan — ia yang menjaga kontras. Foto ini punya
   massa serat coir yang sangat terang; tanpa lapisan gelap di
   atasnya, H1 putih jatuh jauh di bawah 4.5:1 tepat di area
   paling terang. Angka alpha di bawah diverifikasi dengan
   menyampel piksel foto yang sudah dikomposit, bukan dikira-kira.

   Gradien dibuat lebih pekat di sisi kiri (tempat teks) dan lebih
   tipis di kanan, supaya fotonya tetap terbaca sebagai foto. */
.c1-hero--bg { position: relative; isolation: isolate; overflow: hidden; }

.c1-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.c1-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Titik fokus crop berbeda per foto — subjek foto homepage tidak duduk di
     tempat yang sama dengan foto dua halaman produk. Nilainya dioper per
     halaman lewat `visual['position']` sebagai custom property, bukan lewat
     kelas per halaman: menambah kelas untuk setiap foto baru menaruh data
     halaman ke dalam stylesheet, dan itu yang membuat CSS tumbuh tiap kali
     ada foto. Fallback = nilai homepage yang sudah tervalidasi. */
  object-position: var(--hero-bg-pos, 70% 32%);
}
.c1-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Mobile: teks memenuhi lebar, jadi scrim rata pekat.
     DIUKUR ULANG 9 Agustus 2026 terhadap foto hero baru (galangal slices,
     jauh lebih terang dari foto coir lama — luma mentah sampai 228):
     H1 12.37 · sub 5.22 · eyebrow 4.84.
     EYEBROW ADALAH TITIK GAGAL PERTAMA — hanya 0.34 di atas ambang 4.5,
     karena ia memakai brass --accent yang memang paling lemah di antara
     ketiganya. Kalau foto hero diganti lagi, ukur eyebrow LEBIH DULU;
     kalau turun di bawah 4.5, naikkan alpha di sini sebelum menyentuh
     apa pun yang lain. */
  background: rgba(15, 27, 45, 0.90);
}
@media (min-width: 56rem) {
  .c1-hero__bg::after {
    background: linear-gradient(
      90deg,
      rgba(15, 27, 45, 0.95) 0%,
      rgba(15, 27, 45, 0.93) 46%,
      rgba(15, 27, 45, 0.70) 78%,
      rgba(15, 27, 45, 0.58) 100%
    );
  }
}
.c1-hero--bg .c1-hero__inner { position: relative; }

.c1-hero__eyebrow {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
}
/* Saat eyebrow hero SEKALIGUS label divisi, warna teksnya harus datang dari
   pasangan warna label itu — bukan mewarisi warna hero.
   Aturan lama `.c1-hero__eyebrow.division-tag { color: inherit }` melakukan
   kebalikannya: spesifisitasnya (0,2,0) mengalahkan .division-tag--{divisi}
   (0,1,0), sehingga teks mewarisi putih hero dan mendarat di atas latar label
   yang terang — rasio kontras 1.04, praktis tak terbaca.
   Selektor di bawah juga (0,2,0), jadi menang atas .c1-hero__eyebrow sambil
   tetap membawa warna divisinya.

   Varian --coir dihapus 11 Agustus 2026 bersama tokennya (audit QA P2).
   Aturan ini kini tidak aktif di halaman mana pun — C1 baru menolak merender
   label divisi selama DIVISIONS hanya berisi satu entri — tapi DIPERTAHANKAN
   karena ia menyimpan pelajaran spesifisitas di atas, dan akan langsung
   berlaku lagi begitu divisi kedua ada. */
.c1-hero__eyebrow.division-tag--spice { color: var(--division-spice-text); }

/* Eyebrow sebagai TAG berbingkai — halaman produk, 11 Agustus 2026.

   Dua alasan, dan yang kedua bukan estetika:
   1. Di hero berlatar foto, teks brass telanjang adalah titik gagal kontras
      pertama (terukur 4.84 di homepage — hanya 0.34 di atas ambang). Memberi
      tag latarnya sendiri melepas nasib eyebrow dari terang-gelapnya foto,
      karena yang jadi latar efektif sekarang fill tag, bukan piksel foto.
   2. Bingkai hairline + sudut 2px menahannya tetap "trading desk"
      (Aturan Keras no. 6). Rujukan pemilik memakai pil membulat penuh;
      itu sengaja TIDAK diikuti — keputusan pemilik 11 Agustus 2026. */
/* ============================================================
   C1 varian TERANG — ditambahkan 13 Agustus 2026 (rujukan pemilik).

   YANG DIAMBIL dari rujukan: latar terang, dua kolom, foto portrait,
   kartu fakta mengambang di atas foto, eyebrow bertitik.

   YANG DITOLAK: hijau tua rujukan. Warnanya sekeluarga dengan warna
   identitas galangalsupplier.com, dan Aturan Keras no. 6 melarangnya
   sebagai tema di sini. (Hexnya sengaja TIDAK ditulis: gerbang validator
   "main.css tidak memakai warna divisi langsung" menolaknya bahkan di
   dalam komentar, dan sikap ketat itu memang benar — ia tidak bisa
   membedakan komentar dari deklarasi. Sudah menggigit 11 Agustus, dan
   menggigit saya lagi hari ini.) Presedennya sama dengan rujukan NUSEFA
   11 Agustus: ambil struktur, tolak skin. Sudut juga tetap 2px —
   rujukan memakai pil membulat penuh dan itu sengaja tidak diikuti,
   sama seperti keputusan 11 Agustus.

   Kontras diukur, bukan dikira: teks charcoal-navy di atas --bg-page.
   ============================================================ */
.c1-hero--light {
  background: var(--bg-page);
  color: var(--text-primary);
  border-bottom: var(--bw-hair) solid var(--border-subtle);
}
.c1-hero--light .c1-hero__h1 { color: var(--text-primary); }
.c1-hero--light .c1-hero__sub { color: var(--text-secondary); }
.c1-hero--light .c1-hero__proof {
  color: var(--text-primary);
  border-left-color: var(--accent-text);
}

/* Eyebrow varian terang: brass telanjang GAGAL kontras di latar terang
   (--accent hanya 2.31–2.73:1). Dipakai --accent-text (brass gelap),
   dan titik kecil memakai --accent murni karena ia elemen non-teks
   dengan ambang 3:1, bukan 4.5:1. */
.c1-hero--light .c1-hero__eyebrow,
.c1-hero--light .c1-hero__eyebrow--tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface-raised, #fff);
  border-color: var(--border-subtle);
  color: var(--accent-text);
}
.c1-hero--light .c1-hero__eyebrow--tag::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* Cincin fokus: .c1-hero terdaftar di daftar override latar GELAP di
   blok atas, jadi varian terang HARUS dikembalikan ke ring terang —
   kalau tidak, ring inverse-nya nyaris hilang di atas --bg-page. */
.c1-hero--light :focus-visible { outline-color: var(--focus-ring); }

.c1-hero--light .c1-hero__visual { position: relative; }
.c1-hero--light .c1-hero__visual img {
  border-color: var(--border-subtle);
  border-radius: var(--r-md, 0.5rem);
}

/* Kartu fakta mengambang. ISINYA WAJIB FAKTA YANG SUDAH TERBIT —
   rujukan memakai "Verified Sourcing" dan "Clear Process", dua
   adjektiva tak terbukti yang Aturan Keras no. 4 larang. */
.c1-hero__badges {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c1-hero__badge {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  border: var(--bw-hair) solid var(--border-subtle);
  border-radius: var(--r-sm);
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.10);
  max-width: 15rem;
}
.c1-hero__badge + .c1-hero__badge { margin-top: var(--sp-3); }
.c1-hero__badge-label {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.c1-hero__badge-sub {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* Mengambang HANYA di layar lebar. Di mobile kartu ditumpuk di bawah
   foto: menempelkannya di atas foto selebar 375px menutupi sebagian
   besar gambarnya, dan itu membalik gunanya. */
@media (min-width: 56rem) {
  .c1-hero__badges {
    position: absolute;
    right: calc(var(--sp-6) * -1);
    bottom: var(--sp-6);
    z-index: 1;
  }
  .c1-hero--light .c1-hero__badges > :first-child {
    position: absolute;
    top: calc(var(--sp-6) * -1 - 12rem);
    right: 0;
  }
}
@media (max-width: 55.999rem) {
  .c1-hero__badges {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    flex-wrap: wrap;
  }
  .c1-hero__badge + .c1-hero__badge { margin-top: 0; }
}

.c1-hero__eyebrow--tag {
  display: inline-block;
  margin-bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border: var(--bw-hair) solid var(--border-inverse);
  border-radius: var(--r-xs);
  /* Dipekatkan 0.55 -> 0.74 pada 13 Agustus 2026, saat foto hero beranda
     diganti ke galangal-field-harvest. Foto itu luma sisi kirinya 246 —
     lebih terang dari dua foto hero sebelumnya — dan pada 0.55 eyebrow
     turun ke 4,81 di 375px: lolos, tapi cuma 0,31 di atas ambang, dan
     CLAUDE.md sudah mencatat eyebrow sebagai titik gagal PERTAMA setiap
     kali foto hero berganti. Menaikkan opasitas hanya MENAMBAH kontras di
     dua halaman produk yang juga memakai tag ini, jadi aman untuk ketiganya
     — tapi tetap diukur ulang di ketiganya, bukan diasumsikan. */
  background: rgba(15, 27, 45, 0.74);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--accent);
}

.c1-hero__h1 {
  font-size: var(--fs-4xl);
  margin-bottom: var(--sp-4);
}
.c1-hero--compact .c1-hero__h1 { font-size: var(--fs-3xl); }

.c1-hero__sub {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-inverse-muted);
  max-width: 46ch;
}

/* Proof line — dibedakan visualnya karena dia kalimat paling mahal
   di halaman produk (copy pack bagian 23). */
.c1-hero__proof {
  margin-top: var(--sp-5);
  padding-left: var(--sp-4);
  border-left: var(--bw-rule) solid var(--accent);
  font-size: var(--fs-sm);
  color: var(--text-inverse);
  max-width: 54ch;
}

.c1-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Foto hero di-crop lewat aspect-ratio, bukan dibiarkan mendikte tinggi
   section. Tanpa ini, satu foto portrait membuat hero melar melewati
   viewport dan mendorong CTA/RFQ turun — melanggar syarat "akses RFQ
   maksimal satu scroll" (Aturan Keras no. 9).
   object-position sedikit di atas tengah supaya subjek (orang bekerja)
   tidak terpotong saat di-crop. */
.c1-hero__visual img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--r-sm);
  border: var(--bw-hair) solid var(--c-navy-600);
}
@media (min-width: 56rem) {
  .c1-hero__visual img {
    aspect-ratio: 4 / 5;
    max-height: 30rem;
  }
}

/* --- C2 Trust strip ----------------------------------------- */
.c2-trust {
  background: var(--bg-inverse);
  border-block: var(--bw-hair) solid var(--c-navy-700);
  color: var(--text-inverse-muted);
  padding-block: var(--sp-3);
}
.c2-trust__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
}
.c2-trust__item { display: flex; align-items: center; }
.c2-trust__item + .c2-trust__item::before {
  content: "·";
  margin-right: var(--sp-5);
  color: var(--accent);
}

/* --- C3 Product card ---------------------------------------- */
.c3-card {
  background: var(--bg-surface);
  border: var(--bw-hair) solid var(--border-subtle);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
}
.c3-card:hover { border-color: var(--c-navy-400); }

.c3-card__media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.c3-card__media img { width: 100%; height: 100%; object-fit: cover; }
.c3-card__media--empty {
  background:
    repeating-linear-gradient(45deg,
      var(--c-sand-100) 0 10px,
      var(--c-sand-200) 10px 20px);
}

/* Body ikut kolom fleksnya kartu supaya blok spec bisa didorong ke dasar.
   Tanpa ini, nama produk yang pecah dua baris ("Dried galangal whole &
   chunk") menurunkan spec kartu itu sendiri dan barisan angka jadi tidak
   sejajar — baru kentara sejak empat kartu berjajar di halaman negara. */
.c3-card__body {
  padding: var(--sp-4);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.c3-card__name {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-3);
}
.c3-card__link { text-decoration: none; }
.c3-card__link:hover { text-decoration: underline; }
/* Seluruh kartu bisa diklik, tapi hanya nama yang jadi anchor —
   tetap satu link per kartu untuk screen reader. */
.c3-card__link::after { content: ""; position: absolute; inset: 0; }
.c3-card { position: relative; }

.c3-card__specs {
  margin: 0;
  margin-block-start: auto;   /* rata dasar — lihat catatan di .c3-card__body */
  border-top: var(--bw-hair) solid var(--border-subtle);
}
.c3-card__spec {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: var(--bw-hair) solid var(--border-subtle);
  font-size: var(--fs-xs);
}
.c3-card__spec dt { color: var(--text-muted); }
.c3-card__spec dd { margin: 0; font-weight: var(--fw-medium); }

/* .market-size dan .src-note DIHAPUS 13 Agustus 2026.
   Keduanya menggayakan angka impor UN Comtrade yang dulu terpasang di 20
   halaman negara, lalu DICABUT saat pivot karena HS 5305 adalah kategori
   COIR — dan CLAUDE.md menetapkan "jangan dipasang ulang dalam bentuk apa
   pun". Selama gayanya masih di sini, memasangnya kembali cuma butuh satu
   baris HTML dan tidak akan terlihat salah. Menghapusnya membuat langkah
   itu jadi keputusan sadar, bukan kelalaian.
   Bukan penghematan byte: seluruh blok ini 589 byte, ~160 byte setelah
   kompresi. Alasannya menutup jebakan, bukan performa. */


/* --- Kartu produk di halaman /export-to/{negara}/ ------------
   Duduk di bawah tabel relevansi. Urutannya mengikuti PRODUCTS
   (galangal duluan, Aturan Keras no. 5) sementara tabel di atasnya
   diurut menurut relevansi pasar — dua urutan berbeda dengan tugas
   berbeda, jadi sub-heading ini yang memisahkan keduanya secara visual. */
   Labelnya SENGAJA bukan <h3>: nama produk di dalam C3 sudah <h3>, jadi
   sebuah heading di atasnya membuat kartu jadi saudara label, bukan
   anaknya. Tabel di atas juga dilabeli caption, bukan heading — pola yang
   sama diikuti di sini supaya outline heading tetap h2 → h3 kartu. */
.market-products__label {
  margin-block: var(--sp-10) var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.market-products__grid { margin-block-end: var(--sp-2); }

/* --- C4 Spec table & C11 Comparison table ------------------- */
.c4-spec, .c11-compare { margin-block: var(--sp-6); }

.c4-spec__scroll, .c11-compare__scroll {
  overflow-x: auto;
  border: var(--bw-hair) solid var(--border-subtle);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
}

.c4-spec__table, .c11-compare__table { font-size: var(--fs-xs); min-width: 34rem; }
.c11-compare__table { min-width: 52rem; }

.c4-spec__caption, .c11-compare__caption {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-bottom: var(--bw-hair) solid var(--border-subtle);
}

.c4-spec__table th, .c4-spec__table td,
.c11-compare__table th, .c11-compare__table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--bw-hair) solid var(--border-subtle);
}

.c4-spec__table thead th, .c11-compare__table thead th {
  background: var(--bg-inverse);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.c11-compare__table thead th { white-space: normal; }
.c11-compare__product { display: block; margin-top: var(--sp-1); }

/* Label baris BOLEH membungkus. `white-space: nowrap` ditulis untuk tabel spec
   halaman produk, tempat labelnya nama parameter pendek ("Moisture"). Di halaman
   negara labelnya nama produk ("Dried galangal whole & chunk"), dan nowrap
   memaksanya satu baris selebar 209px — ruang yang diambil dari kolom Note.
   Terukur di 757px: kolom Note 107px -> 195px dan tinggi tabel 436px -> 246px
   hanya dengan mencabut baris ini. Label pendek tetap tidak membungkus karena
   memang muat. */
.c4-spec__table tbody th, .c11-compare__table tbody th {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* SEL TABEL MEMAKAI `break-word`, BUKAN `anywhere` — satu-satunya pengecualian
   dari aturan global di atas, dan alasannya bukan estetika.
   `anywhere` ikut mengubah lebar MIN-CONTENT jadi selebar SATU KARAKTER, dan
   algoritma `table-layout: auto` membaca itu sebagai "kolom ini boleh sesempit
   apa pun" lalu memberikan ruangnya ke kolom lain. Jadi ia tidak sekadar
   memecah kata di layar; ia yang MENYEBABKAN kolomnya sempit.
   Sel tabel tidak pernah butuh `anywhere` untuk mencegah luapan halaman:
   .c4-spec__scroll sudah `overflow-x: auto` dan tabelnya punya `min-width`,
   jadi kasus ekstrem digulir, bukan dipecah.
   Terukur di 757px: tinggi tabel 436px -> 414px, nol luapan halaman. */
.c4-spec__table td, .c4-spec__table th,
.c11-compare__table td, .c11-compare__table th {
  overflow-wrap: break-word;
}
.c4-spec__table tbody tr:nth-child(even),
.c11-compare__table tbody tr:nth-child(even) { background: var(--bg-subtle); }

/* Sel yang menunggu data Calvin — netral, tidak menyerupai angka. */
.c4-spec__pending, .c11-compare__pending {
  color: var(--text-muted);
  font-style: italic;
}

.c4-spec__note, .c11-compare__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* padding-block: baris "Detail" di tabel perbandingan adalah tautan berdiri
   sendiri, bukan tautan inline dalam kalimat — jadi ia tunduk pada 24px
   (SC 2.5.8). Terukur 17px sebelum aturan ini. */
.c11-compare__link {
  display: inline-block;
  font-weight: var(--fw-medium);
  padding-block: var(--sp-1);
}

/* --- C5 De-risk & C12 Procurement flow ---------------------- */
.c5-derisk, .c12-flow { padding-block: var(--section-y); }
.c5-derisk { background: var(--bg-subtle); }

.c5-derisk__list, .c12-flow__list {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 48rem) {
  .c5-derisk__list, .c12-flow__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 68rem) {
  .c5-derisk__list, .c12-flow__list { grid-template-columns: repeat(4, 1fr); }
  .c5-derisk--compact .c5-derisk__list { grid-template-columns: repeat(3, 1fr); }
}

.c5-derisk__step, .c12-flow__step {
  padding-top: var(--sp-4);
  border-top: var(--bw-thick) solid var(--border-strong);
}

.c5-derisk__num, .c12-flow__num {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--accent-text);
}

.c5-derisk__title, .c12-flow__label {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-2);
}

.c5-derisk__body, .c12-flow__body {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* --- C6 Proof bar ------------------------------------------- */
.c6-proof {
  background: var(--bg-inverse-deep);
  color: var(--text-inverse);
  padding-block: var(--sp-8);
}
.c6-proof__list {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 48rem) {
  .c6-proof__list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
.c6-proof__item {
  padding-left: var(--sp-4);
  border-left: var(--bw-rule) solid var(--accent);
}
.c6-proof__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
}
.c6-proof__label {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-2xs);
  color: var(--text-inverse-muted);
}

/* --- C7 Response commitment --------------------------------- */
.c7-response {
  padding: var(--sp-4);
  background: var(--accent-tint);
  border-left: var(--bw-rule) solid var(--accent);
  border-radius: var(--r-xs);
  margin-bottom: var(--sp-6);
}
.c7-response__text { font-size: var(--fs-sm); }

/* --- C8 RFQ form -------------------------------------------- */
.c8-rfq { padding-block: var(--section-y); }
.c8-rfq__inner { display: grid; gap: var(--sp-8); }
/* Anak grid punya `min-width: auto` secara bawaan — artinya track TIDAK BOLEH
   menyusut di bawah lebar min-content anaknya. Di sini anaknya memuat
   .section-heading yang ber-`display: inline-block`, dan inline-block menuntut
   lebar fit-content; keduanya bersama membuat track memesan lebih lebar
   daripada kolomnya.
   Terukur 11 Agustus 2026 pada zoom teks 200% di 375px: track memesan 389px
   di dalam kotak 296px, dan seluruh halaman ikut meluber 61px.
   `min-width: 0` memutus lingkaran itu; di ukuran normal nol yang berubah,
   karena di sana kontennya memang muat. */
.c8-rfq__inner > * { min-width: 0; }
@media (min-width: 56rem) {
  .c8-rfq__inner { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}

.c8-rfq__intro { color: var(--text-secondary); margin-bottom: var(--sp-5); }

.c8-rfq__form {
  background: var(--bg-surface);
  border: var(--bw-hair) solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: var(--sp-6);
}

.c8-rfq__actions { margin-top: var(--sp-5); }
.c8-rfq__hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* --- C9 Deep-dive card -------------------------------------- */
.c9-deepdive {
  padding: var(--sp-5);
  background: var(--bg-surface);
  border: var(--bw-hair) solid var(--border-subtle);
  border-left: var(--bw-rule) solid var(--accent);
  border-radius: var(--r-sm);
}
.c9-deepdive__title { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.c9-deepdive__body {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--sp-4);
}
/* Anchor deep-dive adalah CTA berdiri sendiri, bukan link di tengah kalimat —
   pengecualian "inline" WCAG 2.5.8 tidak berlaku, jadi target sentuh dipenuhi. */
.c9-deepdive__link a {
  display: inline-block;
  padding-block: var(--sp-2);
  font-weight: var(--fw-semibold);
}


/* Label "untuk siapa" di daftar guide — kelas SENDIRI, 11 Agustus 2026.


/* --- C10 FAQ accordion -------------------------------------- */
.c10-faq { padding-block: var(--section-y); }
/* Sama seperti .prose: batas lebar dipasang pada anak, bukan pada .container,
   supaya blok FAQ tidak ikut tertengahkan dan tepi kirinya tetap sejajar
   dengan section lain. */
.c10-faq__inner > * { max-width: var(--container-narrow); }

.c10-faq__item { border-bottom: var(--bw-hair) solid var(--border-subtle); }
.c10-faq__item:first-child { border-top: var(--bw-hair) solid var(--border-subtle); }

.c10-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.c10-faq__q::-webkit-details-marker { display: none; }

.c10-faq__marker {
  flex: none;
  width: 14px; height: 14px;
  position: relative;
}
.c10-faq__marker::before,
.c10-faq__marker::after {
  content: "";
  position: absolute;
  background: var(--accent-text);
  transition: transform var(--dur-fast) var(--ease-out);
}
.c10-faq__marker::before { inset: 6px 0 6px 0; height: 2px; }
.c10-faq__marker::after  { inset: 0 6px 0 6px; width: 2px; }
.c10-faq__item[open] .c10-faq__marker::after { transform: scaleY(0); }

.c10-faq__a {
  padding-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  max-width: 68ch;
}

/* --- C14 CTA banner ----------------------------------------- */
.c14-cta {
  background: var(--bg-inverse);
  color: var(--text-inverse);
  padding-block: var(--sp-10);
}
.c14-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.c14-cta__text {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  max-width: 40ch;
  margin: 0;
}
.c14-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ============================================================
   5. FOOTER & FLOATING WA
   ============================================================ */

.site-footer {
  background: var(--bg-inverse-deep);
  color: var(--text-inverse-muted);
  padding-block: var(--sp-12) var(--sp-6);
  font-size: var(--fs-sm);
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-8);
}
@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.site-footer__heading {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

.site-footer__list li + li { margin-top: var(--sp-1); }
/* Target sentuh minimal 24px (WCAG 2.2 SC 2.5.8). Tanpa padding ini, link
   footer hanya setinggi baris teks (~19px) — terlalu rapat untuk ditekan di
   ponsel, dan footer adalah tempat buyer mencari Contact serta halaman produk. */
.site-footer__list a {
  display: inline-block;
  padding-block: var(--sp-2);
  text-decoration: none;
}
.site-footer__list a:hover { color: var(--text-inverse); text-decoration: underline; }

.site-footer__nap {
  display: grid;
  gap: var(--sp-1);
  margin-top: var(--sp-6);
  font-style: normal;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
/* Email dan nomor WA di NAP juga target sentuh — lihat catatan di
   .site-footer__list a. */
.site-footer__nap a {
  display: inline-block;
  padding-block: var(--sp-2);
}
.site-footer__legal-name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--text-inverse);
}

.ext { font-size: 0.85em; }

.site-footer__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-2xs);
  /* --c-navy-400 hanya mencapai 3.96:1 di atas latar footer — gagal AA untuk
     teks 12px. --text-inverse-muted (--c-navy-300) yang memenuhi 4.5:1.
     Jangan turunkan lagi demi kesan "redup". */
  color: var(--text-inverse-muted);
  max-width: 30ch;
}

.site-footer__bar {
  margin-top: var(--sp-10);
  padding-top: var(--sp-5);
  border-top: var(--bw-hair) solid var(--c-navy-700);
  font-size: var(--fs-2xs);
}

.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-wa);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background: var(--c-navy-800);
  color: var(--accent);
  border: var(--bw-hair) solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--sh-raise);
}
.wa-float:hover { background: var(--accent); color: var(--c-navy-900); }
.wa-float__icon { width: 26px; height: 26px; }

/* Tombol menutupi sudut kanan-bawah kolom konten sebesar 43–52px di SETIAP
   lebar di bawah ~1288px (diukur: 52px di 375, 44px di 1120). Di 1288px ke
   atas gutter .container sudah melebihi lebar tombol, jadi ia berdiri di
   luar kolom konten dan tidak menutupi apa pun — di sana tombol TIDAK boleh
   menyingkir, karena menyembunyikannya justru mengurangi akses tanpa alasan.
   Maka perilaku ini digerbang lebar. */
@media (max-width: 80.5rem) {
  .wa-float { transition: transform 180ms ease, opacity 180ms ease; }

  /* :focus-visible dan :hover menahan penyingkiran — tombol tidak boleh
     lenyap dari bawah kursor atau dari fokus keyboard. */
  .wa-float--tucked:not(:focus-visible):not(:hover) {
    transform: translateX(calc(100% + clamp(1rem, 3vw, 2rem)));
    opacity: 0;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: none; }
}

/* ============================================================
   6. CETAK
   Buyer B2B sering mencetak/PDF halaman spec untuk dilampirkan
   ke sistem procurement — tabel harus tetap terbaca.
   ============================================================ */
@media print {
  .site-header, .nav-panel, .wa-float, .c14-cta, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .c1-hero, .c6-proof, .c2-trust { background: #fff; color: #000; }
  .c4-spec__scroll, .c11-compare__scroll { overflow: visible; }
  .c4-spec__table thead th, .c11-compare__table thead th {
    background: #fff; color: #000; border-bottom: 2px solid #000;
  }
  .c10-faq__item { break-inside: avoid; }
}