/* kabar.css — tata letak halaman Kabar (indeks + artikel).
 *
 * Dipakai bareng main.css, bukan menggantikannya: token warna, .nav, dan
 * tombol tetap dari sana supaya halaman artikel tidak pelan-pelan menyimpang
 * dari sisa situs. Yang ada di sini cuma yang khas dokumen panjang.
 *
 * Sebagian besar aturan .doc di bawah disalin dari <style> metodologi.html —
 * halaman itu sudah terbukti terbaca nyaman dan sudah lewat perbaikan mobile.
 * Menyalinnya ke berkas bersama berarti artikel yang dibangun build_kabar.js
 * tidak perlu menempelkan <style> sepanjang 100 baris ke tiap keluaran.
 */

html { scroll-behavior: smooth; }
html, body { height: auto; overflow: visible; }
body { padding-top: var(--nav-height); background: #fff; }
.nav { position: fixed; top: 0; background: #fff; backdrop-filter: none; }

.doc-wrap { width: min(760px, calc(100% - 40px)); margin: 0 auto; }
.doc { width: 100%; min-width: 0; padding: 30px 0 80px; }
.doc h2, .doc h3 { scroll-margin-top: calc(var(--nav-height) + 22px); }

.doc-kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.doc-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--navy)); }
.doc h1 { font-size: clamp(27px, 5vw, 40px); line-height: 1.12; letter-spacing: -.02em; color: var(--navy-deep); margin: 14px 0 12px; }
.doc-lead { font-size: 17px; line-height: 1.6; color: #38516f; margin-bottom: 8px; }
.doc-meta { font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 8px; }
.doc-meta time { font-variant-numeric: tabular-nums; }

.doc h2 { font-size: 23px; letter-spacing: -.01em; color: var(--navy-deep); margin: 40px 0 6px; }
.doc h3 { font-size: 16px; color: var(--navy); margin: 24px 0 4px; }
.doc p { font-size: 15.5px; line-height: 1.72; color: #33465e; margin: 10px 0; }
.doc strong { color: var(--ink); }
.doc em { color: var(--navy); font-style: normal; font-weight: 700; }
.doc a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { color: var(--accent); }
/* Garis bawah itu untuk tautan DI DALAM kalimat. Tanpa pengecualian ini ia
   ikut mengenai apa pun yang kebetulan sebuah <a>: tombol .btn, kartu artikel
   di indeks (seluruh kartunya satu tautan, jadi judul, tanggal, dan ringkasan
   ikut bergaris), dan tombol bagikan. Semuanya sudah punya bentuknya sendiri
   dan justru rusak kalau digarisbawahi. */
.doc a.btn, .doc a.kabar-card, .doc .share a,
.doc .kabar-card *, .doc .doc-cta a { text-decoration: none; }
/* Warnanya harus dikembalikan terpisah, bukan sekadar dikecualikan: `.doc a`
   (0-1-1) menang atas `.btn-primary` (0-1-0), jadi tombol merah kehilangan
   teks putihnya dan terbaca biru tua di atas merah. */
.doc a.btn-primary { color: var(--white); }
.doc a.btn-secondary { color: var(--navy); }
.doc hr { border: none; border-top: 1px solid var(--line); margin: 34px 0; }

/* main.css menyetel ul/li global jadi grid/flex (untuk halaman jualan) — di
   artikel itu memecah <strong> pembuka jadi "kolom" sendiri dan teks tampil
   dua lajur yang susah dibaca. Kembalikan ke alur teks normal.
   Bedanya dengan metodologi.html: penanda butirnya TITIK, bukan ceklis.
   Ceklis membaca sebagai "poin bagus" — keliru total di artikel yang isinya
   justru daftar indikator yang jeblok. */
.doc ul, .doc ol { display: block; margin: 10px 0 14px; padding-left: 2px; }
.doc li {
  display: block; position: relative; padding-left: 24px; margin: 8px 0;
  font-size: 15.5px; line-height: 1.68; color: #33465e;
}
.doc ul > li::before { content: "•"; position: absolute; left: 6px; top: -1px; color: var(--navy); font-weight: 900; }
.doc ol { counter-reset: docol; }
.doc ol > li { counter-increment: docol; }
.doc ol > li::before {
  content: counter(docol) "."; position: absolute; left: 0; top: 0;
  color: var(--navy); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums;
}

.doc blockquote {
  margin: 18px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--line);
  color: #4a5d78; font-size: 15.5px; line-height: 1.7;
}
.doc blockquote p { color: inherit; }

.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; background: #f1f5fa; border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; color: var(--navy-deep);
}

.callout {
  border: 1px solid var(--line); border-left: 4px solid var(--navy); background: #f6f9fd;
  border-radius: 10px; padding: 16px 18px; margin: 18px 0;
}
.callout.accent { border-left-color: var(--accent); background: #fdf5f5; }
.callout.good { border-left-color: var(--green); background: #f2faf6; }
.callout p { margin: 6px 0; font-size: 14.5px; }
.callout .ttl { font-weight: 800; color: var(--navy-deep); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.callout.accent .ttl { color: var(--accent-dark); }
.callout.good .ttl { color: var(--green); }

table.tbl { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
table.tbl th, table.tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tbl thead th { background: #f4f7fb; color: var(--navy-deep); font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
table.tbl td.wt, table.tbl th.wt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tr.hi td { background: #fdf5f5; font-weight: 700; color: var(--accent-dark); }
/* Di ponsel, tabel berkolom banyak melebar sampai 685px dan MENARIK SELURUH
   HALAMAN ikut melebar — dokumennya jadi 705px di layar 390px, sehingga tombol
   menu terdorong keluar layar dan seluruh navigasi tidak bisa disentuh.
   Tabelnya dibuat menggulir sendiri supaya halamannya tetap selebar layar. */
@media (max-width: 900px) {
  table.tbl {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  table.tbl th, table.tbl td { white-space: nowrap; }
  table.tbl td:first-child, table.tbl th:first-child { white-space: normal; min-width: 12ch; }
}

.doc-foot { margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.doc-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 6px; }
.disclaimer { font-size: 13px; color: var(--muted); background: #f7f9fc; border-radius: 10px; padding: 14px 16px; margin-top: 24px; }

/* ── Sumber & bagikan ───────────────────────────────────────────────────── */
.doc-sumber { margin-top: 34px; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: #fbfcfe; }
.doc-sumber .ttl { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.doc-sumber ul { margin: 0; }
.doc-sumber li { font-size: 13.5px; margin: 5px 0; padding-left: 20px; line-height: 1.55; }
.doc-sumber li::before { content: "↗"; color: var(--muted); font-weight: 700; left: 2px; }

.share { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 30px 0 0; }
.share .lbl { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.share a, .share button {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 13px; border-radius: 9px; border: 1px solid var(--line); background: #fff;
  color: var(--navy); text-decoration: none; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.share a:hover, .share button:hover { border-color: var(--navy); background: #f4f8fd; }
.share svg { width: 15px; height: 15px; flex: 0 0 auto; }
.share .ok { color: var(--green); border-color: var(--green); }

/* ── Indeks kabar ───────────────────────────────────────────────────────── */
.kabar-list { display: grid; gap: 14px; margin: 26px 0 10px; }
.kabar-card {
  display: block; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px;
  text-decoration: none; background: #fff; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.kabar-card:hover { border-color: var(--navy); box-shadow: 0 6px 22px rgba(6, 42, 95, .07); transform: translateY(-1px); }
.kabar-card .kb-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.kabar-card .kb-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-dark); background: #fdf0f1; border-radius: 999px; padding: 4px 10px;
}
.kabar-card .kb-date { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kabar-card h2 { font-size: 19px; line-height: 1.3; color: var(--navy-deep); margin: 0 0 7px; letter-spacing: -.01em; }
.kabar-card p { font-size: 14.5px; line-height: 1.6; color: #4a5d78; margin: 0; }
.kabar-card .kb-more { display: inline-block; margin-top: 11px; font-size: 13.5px; font-weight: 700; color: var(--accent); }

.kabar-empty { border: 1px dashed var(--line); border-radius: 14px; padding: 34px 22px; text-align: center; color: var(--muted); font-size: 14.5px; }

@media (max-width: 640px) {
  .doc { padding: 22px 0 60px; }
  .doc h1 { font-size: 26px; }
  .doc-lead { font-size: 16px; }
  .kabar-card { padding: 17px 18px; }
  .kabar-card h2 { font-size: 17px; }
}