/* ============================================================================
 * theme-kkp.css — Tema presentasi Sidang KKP
 * Arah desain: TEKNIS / DATA-FORWARD (laporan riset laboratorium)
 *
 * Prinsip:
 *   1. Tidak ada kartu, sudut membulat, atau bayangan. Struktur dibangun
 *      dari GARIS RAMBUT (hairline) dan RUANG KOSONG, bukan dari kotak.
 *   2. Semua angka memakai monospace ber-tabular figures sehingga digit
 *      berbaris rapi secara vertikal antar baris.
 *   3. Label memakai huruf kapital kecil ber-tracking lebar — memberi nuansa
 *      instrumen ukur, bukan brosur.
 *   4. Warna dipakai sangat hemat: navy untuk struktur, hijau HANYA untuk
 *      menyorot, ambar untuk peringatan. Selebihnya hitam-putih.
 *   5. Terbaca dari belakang ruangan: teks isi 26px, angka utama sangat besar.
 *
 * Palet mengacu design-system/finance-kreasi/MASTER.md.
 * ========================================================================== */

@import url("../vendor/fonts/fonts.css?v=6");

:root {
  --ink:        #0B1220;   /* teks utama — lebih pekat dari navy agar kontras */
  --navy:       #1E3A5F;   /* struktur: judul, garis tebal, batang chart */
  --body:       #333F52;
  --muted:      #6B7787;
  --faint:      #97A1AE;

  --accent:     #16A34A;   /* HANYA untuk menyorot — jangan diobral */
  --warn:       #B45309;
  --err:        #C0322B;
  --info:       #1D4ED8;

  --canvas:     #FFFFFF;
  --wash:       #F4F6F8;   /* blok penekan, tanpa border */
  --rule:       #D5DBE2;   /* garis rambut standar */
  --rule-soft:  #E8ECF1;
  --rule-ink:   #0B1220;   /* garis tebal pembuka bagian */

  --sans: "Source Sans 3", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* --- Dasar ---------------------------------------------------------------- */

.reveal-viewport { background: var(--canvas); }

.reveal {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 400;
  color: var(--body);
  -webkit-font-smoothing: antialiased;
}

.reveal .slides { text-align: left; }
.reveal .slides section { height: 100%; }

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  margin: 0 0 0.45em;
  line-height: 1.15;
}
.reveal h1 { font-size: 1.85em; font-weight: 700; }
.reveal h2 { font-size: 1.42em; }
.reveal h3 { font-size: 1.02em; }
.reveal h4 {
  font-family: var(--mono);
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5em;
}

.reveal p { line-height: 1.5; margin: 0 0 0.55em; }
.reveal strong, .reveal b { color: var(--ink); font-weight: 600; }
.reveal em { font-style: italic; }
.reveal a { color: var(--info); text-decoration: none; }

/* Angka di dalam teks ikut monospace tabular agar konsisten. */
.reveal .num, .reveal td.num, .reveal .fig {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.reveal code {
  font-family: var(--mono);
  font-size: 0.82em;
  color: var(--navy);
  background: var(--wash);
  padding: 0.06em 0.32em;
}

/* --- Daftar: penanda mono, bukan bulatan ---------------------------------- */

.reveal ul, .reveal ol { display: block; margin-left: 0; list-style: none; }
.reveal li { line-height: 1.45; margin-bottom: 0.42em; padding-left: 1.15em; position: relative; }
.reveal ul > li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--faint);
  font-family: var(--mono);
}
.reveal ol { counter-reset: ol; }
.reveal ol > li { counter-increment: ol; }
.reveal ol > li::before {
  content: counter(ol, decimal-leading-zero);
  position: absolute; left: 0;
  font-family: var(--mono); font-size: 0.72em; font-weight: 600;
  color: var(--accent); top: 0.22em;
}
.reveal ul ul { margin-top: 0.3em; }
.reveal ul ul li { font-size: 0.9em; color: var(--muted); }

/* --- Kepala slide --------------------------------------------------------- */

/* Penanda bab bergaya "[BAB IV] hasil-evaluasi" */
.reveal .tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.55em;
}
.reveal .tag .slug { color: var(--faint); letter-spacing: 0.1em; }

/* Judul slide + garis pemisah tebal */
.reveal .slide-title {
  padding-bottom: 0.3em;
  border-bottom: 2px solid var(--rule-ink);
  margin-bottom: 0.85em;
}

/* --- Garis rambut sebagai pemisah ----------------------------------------- */

.reveal .rule    { border: 0; border-top: 1px solid var(--rule); margin: 0.75em 0; }
.reveal .rule.soft  { border-top-color: var(--rule-soft); }
.reveal .rule.heavy { border-top: 2px solid var(--rule-ink); }

/* --- Slide judul ---------------------------------------------------------- */

.reveal .title-slide {
  display: flex; flex-direction: column; justify-content: center;
  height: 100%; padding-right: 4%;
}
.reveal .title-slide .logo { width: 78px; margin-bottom: 1.1em; }
.reveal .title-slide h1 {
  font-size: 1.42em; line-height: 1.2; max-width: 19em;
  margin-bottom: 0.75em;
}
.reveal .title-slide .kicker {
  font-family: var(--mono); font-size: 0.6em; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.1em;
}
.reveal .byline {
  display: flex; gap: 2.6em;
  border-top: 2px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule);
  padding: 0.7em 0; margin-bottom: 0.8em;
}
.reveal .byline .nm { display: block; font-weight: 600; color: var(--ink); font-size: 0.82em; }
.reveal .byline .nim {
  display: block; font-family: var(--mono); font-size: 0.62em;
  color: var(--muted); letter-spacing: 0.04em;
}
.reveal .colophon {
  font-size: 0.66em; color: var(--muted); line-height: 1.65;
}
.reveal .colophon b { color: var(--ink); font-weight: 600; }

/* --- Penanda pergantian penyaji ------------------------------------------- */

.reveal .segment {
  display: flex; flex-direction: column; justify-content: center;
  height: 100%; padding-right: 10%;
}
.reveal .segment .seg-no {
  font-family: var(--mono); font-size: 4.6em; font-weight: 700;
  line-height: 1; color: var(--rule); letter-spacing: -0.04em;
  margin-bottom: 0.06em;
}
.reveal .segment h2 { font-size: 1.72em; margin-bottom: 0.28em; }
.reveal .segment .who {
  font-family: var(--mono); font-size: 0.72em; color: var(--accent);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 0.9em;
}
.reveal .segment .seg-list {
  border-top: 1px solid var(--rule); padding-top: 0.7em;
  font-size: 0.74em; color: var(--muted); line-height: 1.75; max-width: 34em;
}
.reveal .segment .seg-list b { color: var(--ink); }

/* --- Baris metrik: label · angka · satuan · bar ---------------------------- */

.reveal .metrics { margin: 0.2em 0 0.6em; }
/* Hanya blok yang memuat bar yang perlu ruang kanan tambahan, untuk label
   persentase di ujung bar (.bar > span, right:-3.6em). Bila padding ini
   dipasang pada semua .metrics, kolom keterangan pada blok tanpa bar menyempit
   dan teksnya membungkus sehingga slide meluber. */
.reveal .metrics.has-bars { padding-right: 4.6em; }
.reveal .metric-row {
  display: grid;
  grid-template-columns: 5.4em minmax(0, 4.6em) 3.4em 1fr;
  align-items: baseline;
  gap: 0 0.9em;
  padding: 0.34em 0;
  border-bottom: 1px solid var(--rule-soft);
}
.reveal .metric-row:first-child { border-top: 1px solid var(--rule); }
.reveal .metric-row .k {
  font-family: var(--mono); font-size: 0.66em; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.reveal .metric-row .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.42em; font-weight: 700; color: var(--ink);
  letter-spacing: -0.03em; text-align: right;
}
.reveal .metric-row.is-key .v { color: var(--accent); }
.reveal .metric-row .u { font-size: 0.68em; color: var(--muted); }
.reveal .metric-row .note { font-size: 0.66em; color: var(--muted); }

/* Bar meter sebaris — dibaca sekilas dari jauh */
.reveal .bar {
  position: relative; height: 13px; background: var(--rule-soft);
  align-self: center;
}
.reveal .bar > i { position: absolute; inset: 0 auto 0 0; background: var(--navy); }
.reveal .bar.is-key > i { background: var(--accent); }
.reveal .bar > span {
  position: absolute; right: -3.6em; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted);
}

/* Angka tunggal sangat besar (mis. outstanding piutang) */
.reveal .hero-fig {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 3.05em; font-weight: 700; line-height: 1;
  letter-spacing: -0.045em; color: var(--ink);
}
.reveal .hero-fig.is-err { color: var(--err); }
.reveal .hero-fig .unit { font-size: 0.36em; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.reveal .hero-label {
  font-family: var(--mono); font-size: 0.62em; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-top: 0.7em;
}

/* --- Kolom ---------------------------------------------------------------- */

.reveal .cols { display: flex; gap: 2.1em; align-items: flex-start; }
.reveal .cols > * { flex: 1; min-width: 0; }
.reveal .cols.tight { gap: 1.4em; }
.reveal .cols-40-60 > *:first-child { flex: 0 0 36%; }
.reveal .cols-60-40 > *:last-child  { flex: 0 0 36%; }
/* Sekat vertikal tipis antar kolom — pengganti batas kartu */
.reveal .cols.divided > * + * { border-left: 1px solid var(--rule); padding-left: 2.1em; }

/* --- Blok catatan: garis, bukan kotak ------------------------------------- */

.reveal .note-block {
  border-top: 1px solid var(--rule-ink);
  padding-top: 0.5em; margin: 0.7em 0;
  font-size: 0.9em;
}
.reveal .note-block > .lbl {
  display: block;
  font-family: var(--mono); font-size: 0.62em; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 0.35em;
}
.reveal .note-block.warn { border-top-color: var(--warn); }
.reveal .note-block.warn > .lbl { color: var(--warn); }
.reveal .note-block.key  { border-top-color: var(--accent); }
.reveal .note-block.key  > .lbl { color: var(--accent); }

/* Blok berlatar abu — untuk kesimpulan/penekanan, tetap tanpa border-radius */
.reveal .wash {
  background: var(--wash);
  padding: 0.62em 0.85em;
  margin: 0.6em 0;
  font-size: 0.9em;
}
.reveal .wash.accent { box-shadow: inset 3px 0 0 var(--accent); }
.reveal .wash.warn   { box-shadow: inset 3px 0 0 var(--warn); }

/* --- Baris "A → B" -------------------------------------------------------- */

.reveal .flowline { margin: 0.55em 0; }
.reveal .flowline div {
  display: grid; grid-template-columns: auto 1.9em 1fr;
  align-items: baseline; gap: 0 0.3em;
  padding: 0.26em 0; font-size: 0.86em;
}
.reveal .flowline .arw {
  font-family: var(--mono); color: var(--accent); font-weight: 700; text-align: center;
}
.reveal .flowline .from { font-family: var(--mono); font-size: 0.92em; color: var(--ink); }

/* --- Tabel: tanpa isian warna, hanya garis -------------------------------- */

.reveal table {
  width: 100%; border-collapse: collapse;
  font-size: 0.78em; margin: 0.35em 0;
}
.reveal table th {
  background: none; color: var(--muted);
  font-family: var(--mono); font-size: 0.76em; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-align: left; padding: 0 0.7em 0.45em 0;
  border-bottom: 2px solid var(--rule-ink);
  vertical-align: bottom;
}
.reveal table td {
  padding: 0.4em 0.7em 0.4em 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--body); vertical-align: top;
}
.reveal table tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.reveal table td.num, .reveal table th.num {
  text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums; padding-right: 1.1em;
}
.reveal table tr.is-key td { color: var(--ink); font-weight: 600; }
.reveal table tr.is-key td:first-child { box-shadow: inset 3px 0 0 var(--accent); padding-left: 0.7em; }
.reveal table.compact { font-size: 0.66em; }
.reveal table.compact td { padding: 0.26em 0.6em 0.26em 0; }
.reveal table.rule-none td { border-bottom: none; }

/* --- Penanda jenis fitur -------------------------------------------------- */

.reveal .tt {
  font-family: var(--mono); font-size: 0.62em; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.reveal .tt.n { color: var(--navy); }
.reveal .tt.c { color: var(--info); }
.reveal .tt.b { color: var(--muted); }
.reveal .tt.ok { color: var(--accent); }
.reveal .tt.wr { color: var(--warn); }

/* --- Langkah bernomor ----------------------------------------------------- */

.reveal .steps { display: flex; gap: 1.6em; margin: 0.7em 0; }
.reveal .steps > div {
  flex: 1; border-top: 2px solid var(--rule-ink);
  padding-top: 0.5em; font-size: 0.72em; line-height: 1.4; color: var(--muted);
}
.reveal .steps .n {
  display: block; font-family: var(--mono); font-size: 1.05em;
  font-weight: 700; color: var(--accent); margin-bottom: 0.25em;
}
.reveal .steps b { display: block; color: var(--ink); font-size: 1.04em; margin-bottom: 0.18em; }

/* --- Chart ---------------------------------------------------------------- */

.reveal .chart-box { position: relative; width: 100%; }
.reveal .chart-box canvas { display: block; }

/* --- Mermaid -------------------------------------------------------------- */

.reveal .mermaid-box { position: relative; width: 100%; overflow: hidden; }
/* Sumber diagram ada di <pre class="mermaid">; elemen inilah yang diberi
   ukuran pasti agar height:100% pada SVG dapat diselesaikan. */
.reveal .mermaid-box .mermaid {
  position: absolute; inset: 0;
  display: block; margin: 0; padding: 0;
  font-size: inherit; width: auto;
}
/* SVG memenuhi kotak; viewBox + preserveAspectRatio bawaan mermaid membuat isi
   menyusut proporsional dan terpusat, tidak pernah terpotong.
   Catatan: max-height:100% maupun height:100% pada flex item TIDAK berhasil. */
.reveal .mermaid-box svg { display: block; width: 100% !important; height: 100% !important; }
/* Div tooltip 6px yang ditambahkan mermaid ke <body> menjorok melewati slide
   terakhir dan menambah satu halaman kosong pada ekspor PDF. */
.mermaidTooltip { display: none !important; }

/* --- KaTeX ---------------------------------------------------------------- */

.reveal .katex { font-size: 1em; color: var(--ink); }
.reveal .katex-display { margin: 0.5em 0; text-align: left; }
.reveal .katex-display > .katex { text-align: left; }

/* Rumus tampil: diberi jeda dan garis kiri tipis */
.reveal .eq {
  margin: 0.55em 0;
  padding: 0.15em 0 0.15em 0.9em;
  box-shadow: inset 2px 0 0 var(--rule);
}
.reveal .eq.key { box-shadow: inset 2px 0 0 var(--accent); }
.reveal .eq .katex-display { margin: 0.22em 0; }
/* Keterangan lambang di bawah rumus */
.reveal .where {
  font-size: 0.62em; color: var(--muted); line-height: 1.55; margin-top: 0.3em;
}
.reveal .where .katex { font-size: 0.95em; }

/* --- Kode ----------------------------------------------------------------- */

.reveal pre { width: 100%; box-shadow: none; font-size: 0.44em; line-height: 1.5; margin: 0.35em 0; }
.reveal pre code {
  border-radius: 0;
  border-left: 2px solid var(--rule-ink);
  padding: 0.8em 1em;
  max-height: 470px;
  background: var(--wash);
  color: #16202E;
  font-family: var(--mono);
}
.reveal pre code .hljs-keyword,
.reveal pre code .hljs-built_in { color: #1D4ED8; }
.reveal pre code .hljs-string   { color: #0F766E; }
.reveal pre code .hljs-comment  { color: var(--faint); font-style: italic; }
.reveal pre code .hljs-number   { color: var(--warn); }
.reveal pre code .hljs-title    { color: var(--ink); font-weight: 600; }

/* --- Sumber / atribusi ---------------------------------------------------- */

.reveal .src {
  display: block; margin-top: 0.55em;
  font-family: var(--mono); font-size: 0.5em;
  color: var(--faint); letter-spacing: 0.02em;
}
.reveal .src::before { content: "src: "; }

/* --- Tangkapan layar ------------------------------------------------------ */

/* max-height wajib: tanpa itu pada mode ?print-pdf gambar dirender seukuran
   aslinya dan slide meluber jadi beberapa halaman PDF. */
.reveal img.shot {
  width: 100%; max-height: 300px;
  object-fit: contain; object-position: top;
  border: 1px solid var(--rule);
}

/* --- Kontrol Reveal ------------------------------------------------------- */

/* Nomor slide digeser ke kiri dari sudut kanan-bawah agar tidak tertimpa gugus
   tombol navigasi Reveal — yang pada slide vertikal (Lampiran) berbentuk salib
   dan memakan ruang lebih lebar. Tetap di kanan supaya tidak bentrok dengan
   baris atribusi .src yang rata kiri. */
.reveal .slide-number {
  background: transparent; color: var(--faint);
  font-family: var(--mono); font-size: 14px;
  right: 104px; bottom: 16px;
  letter-spacing: 0.06em;
}
.reveal .progress { color: var(--accent); height: 3px; }
.reveal .progress span { transition: width 300ms ease; }
.reveal .controls { color: var(--rule); }
.reveal .controls .navigate-left.highlight,
.reveal .controls .navigate-right.highlight { color: var(--navy); }

/* --- Lampiran ------------------------------------------------------------- */

.reveal .apx-cover {
  display: flex; flex-direction: column; justify-content: center;
  height: 100%; padding-right: 12%;
}
.reveal .apx-cover .seg-no {
  font-family: var(--mono); font-size: 3.4em; font-weight: 700;
  color: var(--rule); line-height: 1; margin-bottom: 0.1em;
}
.reveal .apx-index {
  columns: 2; column-gap: 2.4em; column-rule: 1px solid var(--rule-soft);
  font-size: 0.72em; margin-top: 0.3em;
}
.reveal .apx-index li {
  break-inside: avoid; margin-bottom: 0.4em; padding-left: 3.1em;
}
.reveal .apx-index li::before { content: none; }
.reveal .apx-index .id {
  position: absolute; left: 0;
  font-family: var(--mono); font-size: 0.86em; font-weight: 700;
  color: var(--accent); letter-spacing: 0.04em;
}
.reveal .apx-id {
  font-family: var(--mono); font-size: 0.6em; font-weight: 700;
  letter-spacing: 0.12em; color: var(--accent); margin-right: 0.7em;
}
/* Di dalam .tag ukurannya sudah kecil; jangan dikecilkan dua kali. */
.reveal .tag .apx-id { font-size: 1em; margin-right: 0.5em; }

/* --- Utilitas ------------------------------------------------------------- */

.reveal .small  { font-size: 0.8em; }
.reveal .xsmall { font-size: 0.66em; }
.reveal .muted  { color: var(--muted); }
.reveal .mt-1 { margin-top: 0.7em; } .reveal .mt-2 { margin-top: 1.3em; }
.reveal .mb-0 { margin-bottom: 0; }
.reveal .nowrap { white-space: nowrap; }