/* ==========================================================================
   ManajerDanaKripto.com — Lembar Gaya Utama
   --------------------------------------------------------------------------
   Sistem token → dasar → tata letak → komponen → responsif → mode gelap
   Palet   : tinta navy, kertas dingin, hijau rupiah, kuningan (khusus konteks
             Indonesia & syariah), merah/hijau sinyal.
   Tipografi: Newsreader (judul & isi), Archivo (antarmuka), IBM Plex Mono (data).
   ========================================================================== */

/* ------------------------------------------------------------------ token -- */
:root {
  /* warna inti */
  --tinta:        #0E1626;
  --tinta-lembut: #33415A;
  --tinta-samar:  #6B7A94;
  --kertas:       #EEF1F6;
  --kertas-dalam: #E2E7EF;
  --permukaan:    #FFFFFF;
  --garis:        #D3DAE6;
  --garis-tegas:  #B8C2D4;

  /* Warna tetap untuk elemen yang selalu berada di atas permukaan gelap
     (pita manajer, kaki halaman, kotak buletin). Token ini sengaja TIDAK
     ditimpa pada [data-tema="gelap"] agar tidak menjadi gelap-di-atas-gelap. */
  --tetap-terang: #E8EDF6;
  --tetap-samar:  rgba(232,237,246,.52);

  /* aksen */
  --rupiah:       #0B6E4F;
  --rupiah-tua:   #085239;
  --rupiah-muda:  #E3F1EB;
  --emas:         #B98A22;
  --emas-muda:    #FBF3E0;
  --naik:         #14805A;
  --turun:        #B3392F;
  --netral:       #6B7A94;

  /* tipografi */
  --serif: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", "SF Mono", ui-monospace, "Roboto Mono", monospace;

  /* skala tipe */
  --t-mikro: 0.6875rem;   /* 11px  — label, eyebrow */
  --t-kecil: 0.8125rem;   /* 13px  — meta */
  --t-dasar: 1rem;
  --t-isi:   1.0625rem;   /* 17px  — badan artikel */
  --t-h4:    1.1875rem;
  --t-h3:    1.5rem;
  --t-h2:    2rem;
  --t-h1:    2.75rem;
  --t-raksasa: 3.5rem;

  /* ruang & bentuk */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4.5rem;
  --r-kecil: 3px;  --r-sedang: 6px; --r-besar: 12px;
  --lebar-maks: 1240px;
  --lebar-baca: 44rem;
  --bayang: 0 1px 2px rgba(14,22,38,.05), 0 8px 24px -12px rgba(14,22,38,.16);
  --bayang-naik: 0 2px 4px rgba(14,22,38,.06), 0 18px 40px -18px rgba(14,22,38,.28);
  --transisi: 160ms cubic-bezier(.4,0,.2,1);
}

/* -------------------------------------------------------------- mode gelap -- */
[data-tema="gelap"] {
  --tinta:        #E8EDF6;
  --tinta-lembut: #AEBACE;
  --tinta-samar:  #7E8CA4;
  --kertas:       #0B111C;
  --kertas-dalam: #111927;
  --permukaan:    #141D2D;
  --garis:        #263349;
  --garis-tegas:  #38475F;
  --rupiah:       #38C08C;
  --rupiah-tua:   #6FD9AF;
  --rupiah-muda:  #102A22;
  --emas:         #E0B453;
  --emas-muda:    #2A2314;
  --naik:         #38C08C;
  --turun:        #E8695C;
  --bayang: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --bayang-naik: 0 2px 4px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.75);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-dasar);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--rupiah); }

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

hr { border: 0; border-top: 1px solid var(--garis); margin: var(--sp-6) 0; }

:focus-visible {
  outline: 2px solid var(--rupiah);
  outline-offset: 3px;
  border-radius: var(--r-kecil);
}

.lompat-konten {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--rupiah); color: #fff; padding: var(--sp-3) var(--sp-4);
}
.lompat-konten:focus { left: var(--sp-4); top: var(--sp-4); color: #fff; }

/* ---------------------------------------------------------------- tata letak */
.bungkus { width: 100%; max-width: var(--lebar-maks); margin-inline: auto; padding-inline: var(--sp-4); }

.bagian { padding-block: var(--sp-7); border-top: 1px solid var(--garis); }
.bagian:first-of-type { border-top: 0; }

.kepala-bagian {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5);
  border-bottom: 2px solid var(--tinta); padding-bottom: var(--sp-2);
}
.kepala-bagian h2 { font-size: var(--t-h3); margin: 0; }
.kepala-bagian .tautan-lanjut {
  font-family: var(--sans); font-size: var(--t-kecil); font-weight: 600;
  color: var(--rupiah); white-space: nowrap;
}

/* label eyebrow — mengodekan rubrik, bukan hiasan */
.eyebrow {
  font-family: var(--sans); font-size: var(--t-mikro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rupiah);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.eyebrow--emas { color: var(--emas); }
.eyebrow::before {
  content: ""; width: 14px; height: 2px; background: currentColor; display: inline-block;
}

.meta {
  font-family: var(--mono); font-size: var(--t-kecil); color: var(--tinta-samar);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
}
.meta .pemisah { opacity: .45; }

/* ------------------------------------------------------------------ masthead */
.masthead {
  background: var(--permukaan);
  border-bottom: 1px solid var(--garis);
  position: sticky; top: 0; z-index: 40;
}
.masthead__atas {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-3); min-width: 0;
}
.wordmark { display: flex; align-items: center; gap: var(--sp-3); }
.wordmark__tanda {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-kecil);
  background: var(--tinta); color: var(--kertas);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: -.04em;
}
.wordmark__teks {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1;
}
.wordmark__teks span { color: var(--rupiah); }
.wordmark__sub {
  display: block; font-family: var(--sans); font-size: var(--t-mikro);
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-samar); margin-top: 3px;
}

.pasar {
  display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--mono); font-size: var(--t-kecil); min-width: 0;
}
/* Papan pasar menyusut bertahap agar masthead tidak meluber di layar kecil. */
@media (max-width: 68rem) { .pasar__butir--tanggal { display: none; } }
@media (max-width: 52rem) { .pasar { display: none; } }
@media (max-width: 30rem) { .wordmark__sub { display: none; } }
.pasar__butir { display: flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap; }
.pasar__label { color: var(--tinta-samar); font-size: var(--t-mikro); letter-spacing: .06em; }
.pasar__nilai { font-weight: 600; }
.naik { color: var(--naik); }
.turun { color: var(--turun); }

.aksi-kepala { display: flex; align-items: center; gap: var(--sp-2); }
.tombol-ikon {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: 1px solid var(--garis); border-radius: var(--r-sedang);
  color: var(--tinta); cursor: pointer; transition: var(--transisi);
}
.tombol-ikon:hover { border-color: var(--rupiah); color: var(--rupiah); }

/* navigasi */
.navigasi { border-top: 1px solid var(--garis); }
.navigasi__daftar {
  display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.navigasi__daftar::-webkit-scrollbar { display: none; }
.navigasi__daftar a {
  display: block; padding: var(--sp-3) 0; white-space: nowrap;
  font-size: var(--t-kecil); font-weight: 600; letter-spacing: .01em;
  border-bottom: 2px solid transparent; transition: var(--transisi);
}
.navigasi__daftar a:hover { color: var(--rupiah); border-bottom-color: var(--rupiah); }
.navigasi__daftar a[aria-current="page"] { color: var(--rupiah); border-bottom-color: var(--rupiah); }

/* ============================================================================
   PITA MANAJER — elemen tanda tangan
   Papan berjalan tempat "ticker"-nya adalah manusia, bukan koin.
   ========================================================================== */
.pita {
  background: var(--tinta); color: var(--tetap-terang);
  border-bottom: 1px solid var(--garis-tegas);
  overflow: hidden; position: relative;
  padding-left: 172px;            /* ruang untuk label tetap di kiri */
}
@media (max-width: 48rem) { .pita { padding-left: 0; } }
[data-tema="gelap"] .pita { background: #060B14; }
.pita__label {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 172px;
  display: flex; align-items: center; gap: var(--sp-2);
  padding-inline: var(--sp-4) var(--sp-5);
  background: var(--rupiah); color: #fff;
  font-family: var(--sans); font-size: var(--t-mikro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
@media (max-width: 48rem) { .pita__label { display: none; } }
.pita__jalur {
  display: flex; width: max-content;
  animation: jalan 90s linear infinite;
  padding-block: var(--sp-2);
}
.pita:hover .pita__jalur, .pita:focus-within .pita__jalur { animation-play-state: paused; }
@keyframes jalan { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.pita__chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-4);
  border-right: 1px solid rgba(255,255,255,.13);
  font-family: var(--mono); font-size: var(--t-kecil); white-space: nowrap;
  color: var(--tetap-terang); transition: var(--transisi);
}
.pita__chip:hover { color: #fff; background: rgba(255,255,255,.07); }
.pita__nama { font-weight: 600; letter-spacing: -.01em; }
.pita__org { color: var(--tetap-samar); font-size: var(--t-mikro); }
.pita__sinyal { font-weight: 700; font-size: var(--t-mikro); letter-spacing: .04em; }
.pita__sinyal[data-sinyal="akumulasi"] { color: #4FD8A4; }
.pita__sinyal[data-sinyal="distribusi"] { color: #FF8577; }
.pita__sinyal[data-sinyal="netral"]     { color: rgba(255,255,255,.45); }

/* -------------------------------------------------------------------- hero */
.hero { display: grid; gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-7); }
@media (min-width: 62rem) { .hero { grid-template-columns: 1.85fr 1fr; gap: var(--sp-7); } }

.utama__judul {
  font-size: clamp(2rem, 4.4vw, var(--t-raksasa));
  font-weight: 650; letter-spacing: -.028em; line-height: 1.06;
  margin-block: var(--sp-3) var(--sp-4);
}
.utama__judul a:hover { color: var(--rupiah); }
.utama__dek {
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.5;
  color: var(--tinta-lembut); margin-bottom: var(--sp-4);
}

/* poin kilat */
.kilat {
  list-style: none; margin: 0 0 var(--sp-4); padding: var(--sp-4) 0;
  border-block: 1px solid var(--garis);
  display: grid; gap: var(--sp-2);
}
.kilat li {
  position: relative; padding-left: var(--sp-5);
  font-size: var(--t-kecil); color: var(--tinta-lembut); line-height: 1.5;
}
.kilat li::before {
  content: "▸"; position: absolute; left: 0; top: -1px;
  color: var(--rupiah); font-size: .8em;
}

/* rail sorotan */
.sorotan { border-top: 2px solid var(--tinta); padding-top: var(--sp-3); }
.sorotan__judul {
  font-family: var(--sans); font-size: var(--t-mikro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--sp-4);
}
.sorotan__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.sorotan__butir { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--garis); }
.sorotan__butir:last-child { border-bottom: 0; padding-bottom: 0; }
.sorotan__butir h3 {
  font-size: 1.0625rem; font-weight: 600; line-height: 1.28; margin-bottom: var(--sp-2);
}

/* -------------------------------------------------------------------- kartu */
.kisi { display: grid; gap: var(--sp-5); }
.kisi--2 { grid-template-columns: 1fr; }
.kisi--3 { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .kisi--2, .kisi--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .kisi--3 { grid-template-columns: repeat(3, 1fr); } }

.kartu {
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--r-sedang); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: var(--transisi);
}
.kartu:hover { border-color: var(--garis-tegas); box-shadow: var(--bayang-naik); transform: translateY(-2px); }
.kartu__judul { font-size: 1.1875rem; line-height: 1.26; margin: 0; }
.kartu__dek { font-size: var(--t-kecil); color: var(--tinta-lembut); margin: 0; line-height: 1.55; }
.kartu__kaki {
  margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--garis);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}

/* keping entitas */
.keping-set { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.keping {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 3px; border: 1px solid var(--garis);
  border-radius: 999px; background: var(--kertas-dalam);
  font-size: var(--t-mikro); font-weight: 600; letter-spacing: .01em;
  transition: var(--transisi);
}
.keping:hover { border-color: var(--rupiah); color: var(--rupiah); background: var(--rupiah-muda); }
.keping__inisial {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tinta); color: var(--kertas);
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: -.03em;
}

/* lencana sinyal */
.sinyal {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}
.sinyal[data-sinyal="akumulasi"] { color: var(--naik); }
.sinyal[data-sinyal="distribusi"] { color: var(--turun); }
.sinyal[data-sinyal="netral"] { color: var(--netral); }

.lencana-rubrik {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-kecil);
  background: var(--rupiah-muda); color: var(--rupiah-tua);
  font-size: var(--t-mikro); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.lencana-rubrik[data-rubrik="syariah-dan-halal"] { background: var(--emas-muda); color: var(--emas); }

/* --------------------------------------------------------------- artikel */
.artikel { padding-block: var(--sp-6) var(--sp-8); }
.artikel__kepala { max-width: var(--lebar-baca); margin-inline: auto; }
.artikel__judul {
  font-size: clamp(1.9rem, 3.6vw, 2.85rem); font-weight: 650;
  letter-spacing: -.026em; line-height: 1.1; margin-block: var(--sp-3);
}
.artikel__dek {
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.55;
  color: var(--tinta-lembut); margin-bottom: var(--sp-5);
}
.artikel__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding-block: var(--sp-3); border-block: 1px solid var(--garis);
  font-family: var(--mono); font-size: var(--t-kecil); color: var(--tinta-samar);
}

.isi { max-width: var(--lebar-baca); margin-inline: auto; }
.isi p {
  font-family: var(--serif); font-size: var(--t-isi); line-height: 1.72;
  margin-bottom: var(--sp-4);
}
/* Hanya paragraf pertama badan artikel. Tanpa pemilih anak langsung, huruf
   kapital besar ini juga muncul di dalam blockquote dan modul Konteks
   Indonesia, karena paragraf tunggal di sana ikut menjadi :first-of-type. */
.isi > p:first-of-type::first-letter {
  float: left; font-size: 3.4rem; line-height: .82; font-weight: 650;
  padding: 4px 10px 0 0; color: var(--rupiah);
}
.isi h2 { font-size: var(--t-h3); margin-top: var(--sp-6); }

/* kutipan — dibatasi 14 kata oleh pipeline */
.kutipan {
  margin: var(--sp-5) 0; padding: var(--sp-4) 0 var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--rupiah);
}
.kutipan p {
  font-family: var(--serif); font-size: 1.3rem; font-style: italic;
  line-height: 1.45; margin-bottom: var(--sp-2);
}
.kutipan cite {
  font-family: var(--sans); font-size: var(--t-kecil); font-style: normal;
  font-weight: 600; color: var(--tinta-samar);
}

/* KONTEKS INDONESIA — modul pembeda utama */
.konteks {
  margin: var(--sp-6) 0; padding: var(--sp-5);
  background: var(--emas-muda); border: 1px solid var(--emas);
  border-left-width: 4px; border-radius: var(--r-sedang);
}
.konteks__kepala {
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3);
  font-family: var(--sans); font-size: var(--t-mikro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--emas);
}
.konteks p { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.65; margin: 0; }

/* atribusi sumber */
.sumber {
  margin: var(--sp-6) 0; padding: var(--sp-4);
  background: var(--kertas-dalam); border-radius: var(--r-sedang);
  border: 1px solid var(--garis); font-size: var(--t-kecil);
}
.sumber__label {
  font-family: var(--sans); font-size: var(--t-mikro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-samar);
  display: block; margin-bottom: var(--sp-2);
}
.sumber a { color: var(--rupiah); font-weight: 600; word-break: break-word; }

/* berbagi — WhatsApp & Telegram diutamakan untuk pembaca Indonesia */
.berbagi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-block: var(--sp-5); }
.berbagi__label {
  font-family: var(--sans); font-size: var(--t-mikro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-samar);
  margin-right: var(--sp-2);
}
.berbagi a, .berbagi button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 1px solid var(--garis); border-radius: 999px;
  background: var(--permukaan); color: var(--tinta);
  font-family: var(--sans); font-size: var(--t-kecil); font-weight: 600;
  cursor: pointer; transition: var(--transisi);
}
.berbagi a:hover, .berbagi button:hover { border-color: var(--rupiah); color: var(--rupiah); }

/* -------------------------------------------------------------- profil tokoh */
.profil {
  display: grid; gap: var(--sp-5); padding-block: var(--sp-6);
  border-bottom: 1px solid var(--garis);
}
@media (min-width: 48rem) { .profil { grid-template-columns: auto 1fr; align-items: start; } }
.profil__avatar {
  width: 108px; height: 108px; border-radius: var(--r-besar);
  background: var(--tinta); color: var(--kertas);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 2.25rem; font-weight: 700; letter-spacing: -.05em;
}
.profil__nama { font-size: var(--t-h2); margin-bottom: var(--sp-2); }
.profil__jabatan { font-size: 1.0625rem; color: var(--tinta-lembut); margin-bottom: var(--sp-3); }
.profil__bio { font-family: var(--serif); font-size: var(--t-isi); line-height: 1.65; max-width: 46rem; }
.profil__fakta {
  display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4);
  padding-top: var(--sp-4); border-top: 1px solid var(--garis);
}
.fakta__label {
  font-family: var(--sans); font-size: var(--t-mikro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-samar);
  display: block; margin-bottom: 2px;
}
.fakta__nilai { font-family: var(--mono); font-size: var(--t-kecil); font-weight: 600; }

/* kartu direktori */
.direktori { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .direktori { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .direktori { grid-template-columns: repeat(3, 1fr); } }

.kartu-tokoh {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--permukaan);
  border: 1px solid var(--garis); border-radius: var(--r-sedang);
  transition: var(--transisi);
}
.kartu-tokoh:hover { border-color: var(--rupiah); box-shadow: var(--bayang); }
.kartu-tokoh__avatar {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--r-sedang);
  background: var(--kertas-dalam); color: var(--tinta);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .8rem; font-weight: 700;
}
.kartu-tokoh__nama { font-family: var(--sans); font-weight: 650; font-size: .9375rem; line-height: 1.3; }
.kartu-tokoh__org { font-size: var(--t-kecil); color: var(--tinta-samar); line-height: 1.35; }
.kartu-tokoh__jumlah {
  margin-left: auto; font-family: var(--mono); font-size: var(--t-mikro);
  color: var(--tinta-samar); text-align: right; white-space: nowrap;
}

/* --------------------------------------------------------------- pencarian */
.pencarian { max-width: 40rem; margin-block: var(--sp-5); }
.pencarian__kotak { display: flex; gap: var(--sp-2); }
.pencarian__input, .saring__input {
  flex: 1; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--garis-tegas); border-radius: var(--r-sedang);
  background: var(--permukaan); color: var(--tinta);
  font-family: var(--sans); font-size: var(--t-dasar);
}
.pencarian__input:focus, .saring__input:focus { border-color: var(--rupiah); outline: none; }
.hasil-kosong { padding: var(--sp-6) 0; color: var(--tinta-samar); font-size: var(--t-kecil); }

.saring { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.saring__tombol {
  padding: 6px 14px; border: 1px solid var(--garis); border-radius: 999px;
  background: var(--permukaan); color: var(--tinta-lembut);
  font-family: var(--sans); font-size: var(--t-kecil); font-weight: 600;
  cursor: pointer; transition: var(--transisi);
}
.saring__tombol:hover { border-color: var(--rupiah); color: var(--rupiah); }
.saring__tombol[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--kertas); }

/* -------------------------------------------------------------- paginasi */
.paginasi {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin-block: var(--sp-7); flex-wrap: wrap;
}
.paginasi a, .paginasi span {
  min-width: 40px; padding: 8px 12px; text-align: center;
  border: 1px solid var(--garis); border-radius: var(--r-sedang);
  font-family: var(--mono); font-size: var(--t-kecil);
}
.paginasi a:hover { border-color: var(--rupiah); color: var(--rupiah); }
.paginasi [aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: var(--kertas); }

/* ------------------------------------------------------------------ buletin */
.buletin {
  background: var(--tinta); color: var(--tetap-terang);
  border-radius: var(--r-besar); padding: var(--sp-6);
  display: grid; gap: var(--sp-4);
}
@media (min-width: 48rem) { .buletin { grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--sp-7); } }
.buletin h2 { font-size: var(--t-h3); margin-bottom: var(--sp-2); color: var(--tetap-terang); }
.buletin p { color: rgba(232,237,246,.74); font-size: var(--t-kecil); margin: 0; }
.buletin__catatan { font-size: var(--t-mikro); color: rgba(232,237,246,.5); margin-top: var(--sp-3); }
.buletin__kotak { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.buletin__input {
  flex: 1 1 12rem; padding: var(--sp-3) var(--sp-4); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-sedang); background: rgba(232,237,246,.08); color: var(--tetap-terang);
  font-family: var(--sans); font-size: var(--t-kecil);
}
.buletin__input::placeholder { color: rgba(232,237,246,.45); }
.tombol {
  padding: var(--sp-3) var(--sp-5); border: 0; border-radius: var(--r-sedang);
  background: var(--rupiah); color: #fff;
  font-family: var(--sans); font-size: var(--t-kecil); font-weight: 700;
  cursor: pointer; transition: var(--transisi); white-space: nowrap;
}
.tombol:hover { background: var(--rupiah-tua); color: #fff; }
[data-tema="gelap"] .tombol { color: #04120C; }

/* ------------------------------------------------------------------ catatan */
.catatan {
  padding: var(--sp-4); border: 1px dashed var(--garis-tegas);
  border-radius: var(--r-sedang); background: var(--kertas-dalam);
  font-size: var(--t-kecil); color: var(--tinta-lembut); line-height: 1.6;
}
.catatan strong { color: var(--tinta); }

.spanduk-demo {
  background: var(--emas); color: #1B1400; text-align: center;
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--mono); font-size: var(--t-kecil); font-weight: 600;
}

/* -------------------------------------------------------------------- kaki */
.kaki {
  background: var(--tinta); color: var(--tetap-terang);
  margin-top: var(--sp-8); padding-block: var(--sp-7) var(--sp-5);
}
[data-tema="gelap"] .kaki { background: #060B14; }
.kaki a { color: rgba(232,237,246,.74); }
.kaki a:hover { color: #fff; }
.kaki__kisi { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .kaki__kisi { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.kaki__judul {
  font-family: var(--sans); font-size: var(--t-mikro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(232,237,246,.48);
  margin-bottom: var(--sp-3);
}
.kaki__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--t-kecil); }
.kaki__disclaimer {
  margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgba(232,237,246,.14);
  font-size: var(--t-kecil); line-height: 1.65; color: rgba(232,237,246,.58);
}
.kaki__wordmark { color: var(--tetap-terang); }
.kaki__tagline { font-size: var(--t-kecil); color: rgba(232,237,246,.6); max-width: 32ch; }
.kaki__hakcipta {
  margin-top: var(--sp-4); font-family: var(--mono); font-size: var(--t-mikro);
  color: rgba(232,237,246,.42);
}

/* --------------------------------------------------------------- glosarium */
.glosarium { display: grid; gap: var(--sp-4); max-width: 52rem; }
.istilah {
  padding: var(--sp-4); background: var(--permukaan);
  border: 1px solid var(--garis); border-radius: var(--r-sedang);
}
.istilah dt { font-family: var(--sans); font-weight: 700; margin-bottom: var(--sp-2); }
.istilah dd { margin: 0; font-size: var(--t-kecil); color: var(--tinta-lembut); line-height: 1.65; }

/* ------------------------------------------------------------- aksesibilitas */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                            transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .pita__jalur { animation: none; transform: none; }
}

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

/* -------------------------------------------------------------------- cetak */
@media print {
  .masthead, .pita, .kaki, .berbagi, .buletin, .paginasi { display: none !important; }
  body { background: #fff; color: #000; }
  .isi p { font-size: 11pt; line-height: 1.5; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}