/* ==========================================================================
   Swara v5.1 — Lembar Gaya Lengkap (Design Tokens & Komponen Mockup 1:1)
   Sesuai brief PEKERJAAN-SWARA-V5.md dan acuan swara-mockup.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens (:root)
   -------------------------------------------------------------------------- */
:root {
  --navy: #16294d;
  --navy2: #0e1c38;
  --gold: #e8b33c;
  --gold-d: #c9962e;
  --paper: #f4f1ea;
  --card: #ffffff;
  --line: #e3ddcf;
  --muted: #8a8fa0;
  --ink: #1c2333;
  --gray: #5b6474;
  --judul: #16294d;   /* warna judul: ikut tema (gelap -> terang) */
  --gold-t: #8a6410;  /* emas untuk TEKS di latar terang (kontras 4,76:1 di --paper) */
  --soft: #efeadd;    /* permukaan lembut: chip kode, kepala tabel, kutipan (terang) */
}

/* --------------------------------------------------------------------------
   2. Reset & Fondasi Tipografi
   -------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #dfe3ea;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   3. Cangkang Aplikasi & Tampilan Halaman (.phone & .view)
   -------------------------------------------------------------------------- */
.phone {
  width: 100%;
  max-width: 430px;
  background: var(--paper);
  min-height: 100vh;
  box-shadow: 0 0 30px rgba(0, 0, 0, .18);
  position: relative;
}

.view {
  display: none;
  padding-bottom: 96px;
}

.view.active,
.view:only-of-type {
  display: block;
}

/* Penyesuaian ruang bawah jika halaman tunggal tanpa .view */
.phone > main:not(.view) {
  padding-bottom: 96px;
}

/* Bilah pengembang (mockup / pengujian) */
.devbar {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  max-width: 430px;
  background: #111;
  color: #fff;
  font-size: 12px;
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.devbar span {
  opacity: .6;
  margin-right: 4px;
}

.devbar button {
  background: #2a2a2e;
  color: #fff;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

.devbar button.on {
  background: var(--gold);
  border-color: var(--gold);
  color: #111;
  font-weight: 700;
}

.devnote {
  width: 100%;
  max-width: 430px;
  background: var(--navy);
  color: #ffe9b8;
  font-size: 11.5px;
  padding: 8px 14px;
  line-height: 1.5;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Topbar & Wordmark Soundwave
   -------------------------------------------------------------------------- */
.topbar {
  background: linear-gradient(135deg, var(--navy), #243a68);
  padding: 16px 18px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
}

.wave i {
  width: 4px;
  background: var(--gold);
  border-radius: 2px;
  transform-origin: bottom;
  animation: wv 1.8s ease-in-out infinite;
  display: block;
}

.wave i:nth-child(1) { height: 38%; }
.wave i:nth-child(2) { height: 72%; animation-delay: .15s; }
.wave i:nth-child(3) { height: 100%; animation-delay: .3s; }
.wave i:nth-child(4) { height: 58%; animation-delay: .45s; }
.wave i:nth-child(5) { height: 34%; animation-delay: .6s; }

@keyframes wv {
  0%, 100% { transform: scaleY(.55); }
  50% { transform: scaleY(1); }
}

.tagline {
  color: #c9d4e8;
  font-size: 11.5px;
  margin-top: 4px;
}

.topright {
  display: flex;
  align-items: center;
}

.tcount {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 7px 12px;
  white-space: nowrap;
  line-height: 1.25;
  text-align: center;
}

.darktoggle {
  background: rgba(255, 255, 255, .14);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  margin-left: 8px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform .15s ease, background .2s ease;
}

.darktoggle:hover {
  background: rgba(255, 255, 255, .22);
}

.darktoggle:active {
  transform: scale(.92);
}

/* --------------------------------------------------------------------------
   5. Ticker Marquee Berjalan
   -------------------------------------------------------------------------- */
.ticker {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
}

.ticker .tk {
  display: inline-block;
  padding: 9px 0;
  font-size: 13px;
  color: var(--gray);
  animation: tick 36s linear infinite;
}

.ticker .tk b {
  color:var(--judul);
  font-weight: 800;
  margin: 0 10px 0 40px;
}

@keyframes tick {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   6. Search Row
   -------------------------------------------------------------------------- */
.searchrow {
  display: flex;
  gap: 10px;
  padding: 14px 18px;
}

.searchrow input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
}

.searchrow input:focus {
  outline: none;
  border-color: var(--gold-d);
}

.searchrow button {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0 20px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s ease;
}

.searchrow button:hover {
  opacity: .92;
}

/* --------------------------------------------------------------------------
   7. Sorotan Hero Card (.sorot)
   -------------------------------------------------------------------------- */
.sorot {
  margin: 4px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(22, 41, 77, .08);
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}

.sorot:hover {
  text-decoration: none;
}

.sorot .shead {
  background: linear-gradient(135deg, var(--navy), #243a68);
  color: #fff;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sorot .shead .n {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0;
}

.sorot img {
  width: 100%;
  aspect-ratio: 16/8;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #4d3a16, #9c7a3a);
}

.sorot .sbody {
  padding: 14px 16px 16px;
}

.kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-d);
}

.sorot h2 {
  font-size: 19px;
  line-height: 1.38;
  margin: 6px 0;
  font-weight: 700;
  color: var(--ink);
}

.excerpt {
  font-size: 13.5px;
  color: var(--gray);
  line-height: 1.55;
}

.badge-media {
  display: inline-block;
  background: #fdf3df;
  border: 1px solid #e3c87e;
  color: #8a6414;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 12px;
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   8. Chip Kategori (.cats, .cat)
   -------------------------------------------------------------------------- */
.cats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 18px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cats::-webkit-scrollbar {
  display: none;
}

.cat {
  flex: 0 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  text-decoration: none;
  transition: all .15s ease;
}

.cat:hover {
  border-color: var(--gold-d);
  text-decoration: none;
}

.cat.active {
  background: var(--navy);
  border-color:var(--judul);
  color: #fff;
}

/* --------------------------------------------------------------------------
   9. Tren / Lagi Rame (.trend, .trendrow, .tchip)
   -------------------------------------------------------------------------- */
.trend {
  padding: 10px 18px 2px;
}

.trend h4 {
  font-size: 12px;
  font-weight: 800;
  color:var(--judul);
  letter-spacing: .07em;
  margin-bottom: 8px;
}

.trendrow {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.trendrow::-webkit-scrollbar {
  display: none;
}

.tchip {
  flex: 0 0 auto;
  background: var(--card);
  border: 1.5px solid #e3c87e;
  color: #8a6414;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: transform .12s ease;
}

.tchip:hover {
  text-decoration: none;
}

.tchip:active {
  transform: scale(.94);
}

/* --------------------------------------------------------------------------
   10. Wire Timeline (Garis, Titik, Thumbnail & Detail)
   -------------------------------------------------------------------------- */
.wirehead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 20px 0;
}

.wirehead h3 {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color:var(--judul);
}

.wire {
  position: relative;
  margin: 8px 20px 0;
  padding-left: 24px;
}

.wire::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: #d8d2c2;
  border-radius: 2px;
}

.witem {
  position: relative;
  padding: 10px 0 12px;
  cursor: pointer;
}

.witem::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 16px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--card);
  border: 2.5px solid var(--gold);
}

.witem.hot::before {
  background: var(--gold);
  border-color: var(--gold-d);
}

.wrow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.wmain {
  flex: 1;
  min-width: 0;
}

.wthumb {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #dfe3ea;
}

.wtop {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.wtime {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  background: #eef1f6;
  border-radius: 6px;
  padding: 3px 8px;
}

.wsrc {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-d);
}

.witem h3 {
  font-size: 15px;
  line-height: 1.45;
  margin-top: 4px;
  font-weight: 700;
  color: var(--ink);
}

/* Accordion Detail Wire Item */
.wdetail {
  display: none;
  margin-top: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.witem.open .wdetail {
  display: block;
}

.wdetail img {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #16294d, #3a5a9c);
}

.wdetail .excerpt {
  margin-top: 8px;
  font-size: 12.5px;
}

.wdetail .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  gap: 8px;
}

.wdetail .row.end {
  justify-content: flex-end;
}

.src-link {
  color:var(--judul);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-size: 13px;
}

.src-link:hover {
  color: var(--gold-d);
}

.loadmore {
  display: block;
  width: calc(100% - 40px);
  margin: 14px 20px 0;
  text-align: center;
  border: 1.5px dashed #c9c2b2;
  color: var(--gray);
  font-weight: 600;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}

.loadmore:hover {
  background: rgba(0, 0, 0, .03);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   11. Kotak Recap (.recap-box, .recap-badge, .disclaimer)
   -------------------------------------------------------------------------- */
.recap-badge {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 12px;
  letter-spacing: .03em;
  margin-bottom: 8px;
}

.recap-box {
  background: #f4f6fb;
  border: 1px solid #dbe2f0;
  border-radius: 12px;
  padding: 14px;
  margin: 12px 0;
}

.recap-box p {
  font-size: 13.5px;
  color: #333a4a;
  line-height: 1.65;
}

.disclaimer {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   12. Halaman Peristiwa (Dossier & Cover-Row Liputan Per Media)
   -------------------------------------------------------------------------- */
.backbtn {
  display: inline-block;
  margin: 14px 20px 0;
  font-weight: 700;
  font-size: 14px;
  color:var(--judul);
  cursor: pointer;
  text-decoration: none;
}

.backbtn:hover {
  text-decoration: underline;
}

.dossier {
  margin: 12px 18px 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(22, 41, 77, .08);
}

.dossier .dhead {
  background: var(--navy);
  color: #fff;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dossier .dhead .dim {
  color: #c9d4e8;
  font-weight: 600;
  letter-spacing: 0;
}

.dossier img {
  width: 100%;
  aspect-ratio: 16/8;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #4d3a16, #9c7a3a);
}

.dossier .dbody {
  padding: 14px 16px 16px;
}

.dossier h1 {
  font-size: 20px;
  line-height: 1.4;
  margin: 6px 0 4px;
  font-weight: 700;
  color: var(--ink);
}

.cover-row {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0 18px 10px;
  padding: 12px 14px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, border-color .15s ease;
}

.cover-row:hover {
  text-decoration: none;
  border-color: var(--gold-d);
}

.cover-row .mini {
  flex: 1;
  min-width: 0;
}

.cover-row .msrc {
  font-size: 12px;
  font-weight: 800;
  color:var(--judul);
}

.cover-row .mtitle {
  font-size: 13.5px;
  line-height: 1.42;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink);
}

.cover-row .mtime {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.cover-row .go {
  font-weight: 800;
  font-size: 18px;
  color: var(--gold-d);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   13. Halaman Artikel + Actionbar Sticky + Berita Terkait
   -------------------------------------------------------------------------- */
.article {
  padding: 16px 20px 0;
}

.article h1 {
  font-size: 22px;
  line-height: 1.4;
  margin: 8px 0 6px;
  font-weight: 700;
  color: var(--ink);
}

.byline {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 2px;
}

.byline b {
  color: var(--ink);
}

.prov {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 4px;
}

.btn-source {
  display: block;
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-weight: 800;
  border-radius: 12px;
  padding: 15px;
  margin: 16px 0 6px;
  text-decoration: none;
  font-size: 15px;
  transition: opacity .15s ease;
}

.btn-source:hover {
  opacity: .92;
  text-decoration: none;
}

.rel {
  margin: 20px 20px 0;
}

.rel h4 {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  color:var(--judul);
  margin-bottom: 4px;
}

.rel a {
  display: block;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.45;
}

.rel a:hover {
  color:var(--judul);
}

.rel a span {
  color: var(--muted);
  font-size: 12px;
}

/* Actionbar Sticky */
.actionbar {
  position: sticky;
  bottom: 78px;
  z-index: 20;
  display: flex;
  gap: 10px;
  padding: 11px 18px;
  background: rgba(244, 241, 234, .96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.actionbar a,
.actionbar button {
  flex: 1;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  border-radius: 12px;
  padding: 13px 0;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease;
}

.actionbar a:active,
.actionbar button:active {
  transform: scale(.96);
}

.actionbar .share {
  background: var(--gold);
  color: var(--navy2);
  border: none;
}

.actionbar .save {
  background: var(--card);
  border: 1.5px solid var(--navy);
  color:var(--judul);
}

/* --------------------------------------------------------------------------
   14. Halaman Topik / Simpan / Cari (.pagehead, .topic-list, .topic)
   -------------------------------------------------------------------------- */
.pagehead {
  padding: 20px 20px 6px;
}

.pagehead h2 {
  font-size: 24px;
  color:var(--judul);
  letter-spacing: -.01em;
  font-weight: 700;
}

.pagehead p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.topic-list {
  margin: 12px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.topic {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
}

.topic span {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.follow {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}

.follow.on {
  background: #e7f6ee;
  color: #0d7a3f;
}

/* --------------------------------------------------------------------------
   15. Footer Navy
   -------------------------------------------------------------------------- */
.footer {
  background: var(--navy);
  color: #c9d4e8;
  margin-top: 16px;   /* §E.2: jarak antar bagian 12-16px */
  padding: 20px 20px 28px;
  font-size: 12.5px;
  line-height: 1.7;
}

.footer .flinks {
  margin-bottom: 10px;
}

.footer .flinks a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  margin-right: 16px;
}

.footer .flinks a:hover {
  text-decoration: underline;
}

.footer .ver {
  margin-top: 10px;
  color: #8fa0bd;
  font-size: 11.5px;
}

/* --------------------------------------------------------------------------
   16. Bottom Nav Fixed
   -------------------------------------------------------------------------- */
.bottomnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 60;
  display: flex;
  background: rgba(244, 241, 234, .97);
  border-top: 1px solid var(--line);
  padding: 8px 6px calc(10px + env(safe-area-inset-bottom));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bottomnav button,
.bottomnav a {
  flex: 1;
  background: none;
  border: none;
  font-size: 21px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  font-family: inherit;
  text-decoration: none;
  transition: color .15s ease;
}

.bottomnav button span,
.bottomnav a span {
  font-size: 10.5px;
  font-weight: 700;
}

.bottomnav button.on,
.bottomnav a.on {
  color:var(--judul);
}

/* --------------------------------------------------------------------------
   17. Share Sheet & Backdrop
   -------------------------------------------------------------------------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 24, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 80;
}

.sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 105%);
  width: 100%;
  max-width: 430px;
  z-index: 90;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
  transition: transform .32s cubic-bezier(.2, .9, .3, 1.05);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
}

.sheet.open {
  transform: translate(-50%, 0);
}

.sheet .grab {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  margin: 0 auto 12px;
}

.sheet h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 14px;
  text-align: center;
}

.share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.share-grid button {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 4px;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-family: inherit;
  transition: transform .12s ease;
}

.share-grid button span {
  font-size: 11px;
  font-weight: 700;
}

.share-grid button:active {
  transform: scale(.94);
}

.sheet-close {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 800;
  border-radius: 12px;
  padding: 13px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  transition: opacity .15s ease;
}

.sheet-close:hover {
  opacity: .9;
}

/* --------------------------------------------------------------------------
   18. Mode Gelap (Dark Mode — body.dark)
   Sesuai §3 Brief Desain & Mockup v5.1
   -------------------------------------------------------------------------- */
body.dark {
  --paper: #10151f;
  --card: #1a2233;
  --ink: #f0e9d8;
  --navy: #0b1220;
  --line: #2a3449;
  --muted: #7f7a6e;
  --gray: #b6ae99;
  --judul: #f0e9d8;   /* di mode gelap --navy jadi hampir hitam, judul harus terang */
  --gold-t: var(--gold);   /* di latar gelap emas penuh sudah cukup kontras */
  --soft: #16213a;
  background: #080c14;
}

body.dark .topbar {
  background: #05080f;
}

body.dark .ticker {
  background: #1a2233;
}

body.dark .ticker .tk {
  color: var(--gray);
}

body.dark .ticker .tk b {
  color: var(--gold);
}

body.dark .sorot .shead {
  background: #05080f;
}

body.dark .dossier .dhead {
  background: #05080f;
}

body.dark .recap-box {
  background: #1c2438;
  border-color: #2a3449;
}

body.dark .recap-box p {
  color: #d8d2c2;
}

body.dark .badge-media {
  background: #3a2f16;
  color: #ffd97a;
  border-color: #5a4a22;
}

body.dark .wtime {
  background: #263049;
  color: #cfe0ff;
}

body.dark .tchip {
  background: #1a2233;
  color: #ffd97a;
  border-color: #5a4a22;
}

body.dark .bottomnav {
  background: rgba(16, 21, 31, .97);
}

body.dark .actionbar {
  background: rgba(16, 21, 31, .96);
}

body.dark .footer {
  background: #05080f;
}

body.dark .trend h4,
body.dark .wirehead h3,
body.dark .rel h4,
body.dark .pagehead h2 {
  color: var(--gold);
}

body.dark .src-link {
  color: #9db8e8;
}

body.dark .searchrow button {
  background: var(--gold);
  color: var(--navy2);
}

body.dark .btn-source {
  background: #1f2c4d;
}

body.dark .wire::before {
  background: #2a3449;
}

body.dark .cat.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #111;
}

body.dark .bottomnav button.on,
body.dark .bottomnav a.on {
  color: var(--gold);
}

body.dark .backbtn {
  color: var(--gold);
}

body.dark .actionbar .save {
  border-color: var(--gold);
  color: var(--gold);
}

body.dark .follow {
  background: var(--gold);
  color: var(--navy2);
}

body.dark .follow.on {
  background: #1e382b;
  color: #4ade80;
}

/* --------------------------------------------------------------------------
   19. Elemen Penunjang & Keadaan Kosong (Empty State)
   -------------------------------------------------------------------------- */
.empty-state,
.kosong {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
  font-size: 14px;
}

.empty-state p,
.kosong p {
  margin-top: 6px;
}


/* ==================================================================
   Tambahan integrasi 16 Okt 2026 (arahan pemilik §A, §B, §E):
   toast, bagian "Untukmu", dan kartu di halaman Simpanan.
   ================================================================== */

/* Toast: melayang 16px di atas bottom nav, hilang sendiri 2,5 detik */
.sw-toast {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 24px);
  bottom: calc(72px + 16px + env(safe-area-inset-bottom, 0px));
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 8px 22px rgba(10, 20, 40, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 60;
  max-width: 88vw;
  text-align: center;
}
.sw-toast.tampil { opacity: 1; transform: translate(-50%, 0); }

/* Bagian "Untukmu" di beranda */
.untukmu { margin: 12px 0 2px; }
.untukmu .uhead {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 18px; margin-bottom: 6px;
}
.untukmu .uhead h4 { font-size: 13px; font-weight: 800; color:var(--judul); letter-spacing: .04em; }
.untukmu .uhead span { font-size: 11px; color: var(--muted, #7b8493); }
.untukmu .ulihat {
  display: block; text-align: right; padding: 4px 18px 0; font-size: 12px;
  font-weight: 700; color:var(--judul); text-decoration: none;
}
body.dark .untukmu .uhead h4 { color: #f0e9d8; }
.chip-topik {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gold-d, #8a6414);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; margin-top: 4px;
}
.ajakan-untukmu {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 6px 18px 2px; padding: 8px 12px; background: var(--card);
  border: 1px dashed var(--line); border-radius: 12px; font-size: 13px;
  font-weight: 600; color: var(--ink); text-decoration: none;
}
.ajakan-untukmu .panah { color:var(--judul); font-weight: 800; }

/* Kartu di halaman Simpanan */
.simp-kartu {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 10px 14px; margin: 0 18px 8px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.simp-kartu .swthumb { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; display: block; }
.simp-kartu .sw-thumb-kosong { width: 76px; height: 76px; border-radius: 8px; background: var(--paper); display: block; }
.simp-kartu h3 { font-size: 14px; line-height: 1.32; margin: 2px 0 4px; font-weight: 700;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.simp-kartu .smeta { font-size: 11px; color: var(--muted, #7b8493); display: flex; gap: 6px; flex-wrap: wrap; }
.simp-kartu .smedia { color: var(--gold-d, #8a6414); font-weight: 700; }
.simp-hapus {
  border: 1px solid var(--line); background: transparent; border-radius: 8px;
  width: 38px; height: 38px; font-size: 16px; cursor: pointer; color: var(--ink);
}
.simp-kosong { text-align: center; padding: 46px 24px; }
.simp-kosong .ikon { font-size: 52px; line-height: 1; }
.simp-kosong h3 { font-size: 16px; margin: 14px 0 6px; }
.simp-kosong p { font-size: 13px; color: var(--muted, #7b8493); max-width: 300px; margin: 0 auto; }
.simp-kosong .btn-source { display: inline-block; margin: 16px auto 0; }

/* Halaman Simpanan, ronde 2 (20 Okt 2026): sekarang memuat artikel DAN naskah
   khusus. Kartu memakai grid yang sama; judul jadi tautan, tombol lepas di kanan. */
.simp-kartu { text-align: left; }
.simp-kartu .simp-isi { min-width: 0; }
.simp-kartu h3 a { color: inherit; text-decoration: none; }
.simp-kartu h3 a:hover, .simp-kartu h3 a:focus-visible { text-decoration: underline; }
.simp-kartu .sw-thumb-kosong {
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  border: 1px solid var(--line);
}
.simp-kartu .smeta .stitik { opacity: .55; }
.simp-kartu .srel { color: var(--muted, #7b8493); }
.simp-kartu .simp-hapus { font-size: 14px; line-height: 1; }
.simp-kartu .simp-hapus:hover, .simp-kartu .simp-hapus:focus-visible {
  border-color: var(--judul); color: var(--judul);
}

/* Tombol "Simpanan" di topbar: ikut gaya .nav-khusus, diberi jarak dari "Khusus". */
.topright .nav-khusus + .nav-khusus { margin-left: 8px; }
.nav-simpan.on { background: var(--gold); color: var(--navy2); }

/* Konfirmasi kecil setelah menekan ikon Simpan (halaman artikel & naskah khusus).
   Melayang di atas menu bawah: bentuk rail ikon TIDAK berubah. */
.simpan-info {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 10px); z-index: 70;
  display: none; align-items: center; gap: 10px;
  max-width: calc(100vw - 28px); padding: 10px 12px;
  background: var(--navy); color: #f4f1ea; border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px; box-shadow: 0 10px 26px rgba(10,16,30,.3);
  font-size: 13px; line-height: 1.3;
  transition: opacity .18s ease, transform .18s ease; opacity: 0;
}
.simpan-info.tampil { display: flex; opacity: 1; transform: translate(-50%, 0); }
.simpan-info .si-teks { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simpan-info .si-tautan { color: var(--gold); font-weight: 800; text-decoration: none; white-space: nowrap; }
.simpan-info .si-tautan:hover, .simpan-info .si-tautan:focus-visible { text-decoration: underline; }
.simpan-info .si-tutup {
  background: transparent; border: 0; color: #f4f1ea; opacity: .7;
  font: inherit; font-size: 13px; cursor: pointer; padding: 2px 4px; margin-left: 2px;
}
@media (min-width: 768px) { .simpan-info { bottom: 24px; } }
@media (max-width: 360px) { .simpan-info .si-teks { display: none; } }


/* Toggle judul asli untuk berita asing (§C.4) */
.tombol-asli {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  color:var(--judul);
  padding: 2px 7px;
  margin-top: 5px;
  cursor: pointer;
  display: inline-block;
}
.tombol-asli.aktif { background: var(--navy); color: #fff; border-color:var(--judul); }
body.dark .tombol-asli { color: #f0e9d8; border-color: #2a3449; }
body.dark .tombol-asli.aktif { background: #243d78; color: #fff; }


/* Recap Pointer Cerdas (§D): bullet rapi, bukan paragraf */
.recap-pointer {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.recap-pointer li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 5px;
  font-size: 13.5px;
  line-height: 1.5;
}
.recap-pointer li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gold-d, #8a6414);
  font-weight: 800;
}
.recap-pointer li:last-child { margin-bottom: 0; }


/* Pencarian minimalis (permintaan pemilik 16 Okt 2026: "cari berita ini minimalis ajalah") */
.searchrow.minimalis { padding: 8px 18px 10px; }
.searchrow.minimalis input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 14px;
  box-shadow: none;
}
.searchrow.minimalis input::placeholder { color: var(--muted, #7b8493); }

/* RECAP DI KARTU FEED (18 Okt 2026)
   Kotak Recap dulu hanya ada di dalam .wdetail yang tertutup, jadi pembaca tidak melihat tombol
   apa pun sampai kartu diketuk. Strip ini tampil langsung di kartu, ringkas dan tidak mengganggu. */
.recap-kartu{margin:6px 0 0}
.recap-kartu p{font-size:13.5px;line-height:1.5;color:var(--gray);margin:0 0 6px}
.recap-kartu .recap-buat{font-size:12.5px;padding:6px 12px;border-radius:9px}
body.dark .recap-kartu p{color:var(--gray)}
.recap-kartu .recap-teks ul.recap-pointer{margin:4px 0 6px;padding-left:18px}
.recap-kartu .recap-teks li{font-size:13.5px;line-height:1.5;color:var(--gray);margin:0 0 4px}

/* CUPLIKAN BIASA DI KARTU TANPA RECAP (keputusan pemilik 20 Okt 2026)
   Kartu tanpa Recap tidak lagi menampilkan penanda "Recap sedang disiapkan" atau tombol
   "Buat Recap" (keduanya hanya di halaman artikel). Penggantinya cuplikan teks biasa,
   dibatasi dua baris supaya tinggi kartu tetap rapi dan tidak ada ruang menggantung. */
.cuplikan-kartu{font-size:13px;line-height:1.5;color:var(--gray);margin:6px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.dark .cuplikan-kartu{color:var(--gray)}

/* TOMBOL "KHUSUS" DI POJOK KANAN ATAS (20 Okt 2026)
   Pintu "Cari" di navigasi diganti "Khusus". Pencarian tidak hilang: /cari tetap hidup
   dan kotak telusurnya pindah ke dalam halaman /khusus. Tombol ini yang tampil di topbar. */
.nav-khusus{background:rgba(255,255,255,.14);color:#fff;font-size:12.5px;font-weight:800;
  letter-spacing:.04em;border-radius:999px;padding:0 14px;min-height:36px;
  display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;
  transition:background .15s ease,color .15s ease}
.nav-khusus:hover,.nav-khusus:focus-visible{background:var(--gold);color:var(--navy2);text-decoration:none}
.nav-khusus:active{transform:scale(.96)}
body.dark .nav-khusus{background:rgba(255,255,255,.12);color:#f0e9d8}
body.dark .nav-khusus:hover{background:var(--gold);color:#0b1220}

/* ==========================================================================
   20. HALAMAN KHUSUS (liputan khusus / naskah panjang)
   Sejak 20 Okt 2026 halaman ini TIDAK lagi bergaya gelap sendiri: seluruh
   warnanya memakai token tema di atas, jadi terang <-> gelap mengikuti
   body.dark seperti halaman lain. Tidak ada satu pun warna latar gelap yang
   ditulis di sini — ganti tema cukup lewat token.
   ========================================================================== */
body.khusus{font-size:17px}
body.khusus .phone{max-width:760px;box-shadow:none}
body.khusus a{color:var(--gold-t)}
body.khusus .bottomnav{max-width:760px}

.kh-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px clamp(14px,4vw,22px);background:linear-gradient(135deg,var(--navy),var(--navy2));
  border-bottom:1px solid rgba(0,0,0,.18);position:sticky;top:0;z-index:50}
.kh-brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:800;
  font-size:20px;letter-spacing:.02em;text-decoration:none;min-width:0}
.kh-brand .wave{height:20px}
.kh-brand .wave i{width:3px}
.kh-aksi{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.kh-tandai{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(232,179,60,.55);border-radius:999px;
  padding:5px 11px;text-decoration:none;white-space:nowrap}
.kh-tandai.on{background:var(--gold);color:var(--navy2);border-color:var(--gold)}

.kh-hero{padding:clamp(20px,6vw,34px) clamp(16px,5vw,26px) 6px;max-width:720px;margin:0 auto}
.kh-kicker{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-t);margin-bottom:10px}
.kh-hero h1{font-size:clamp(26px,7.5vw,38px);line-height:1.15;letter-spacing:-.01em;
  color:var(--judul);margin-bottom:10px;overflow-wrap:break-word}
.kh-sub{color:var(--gray);font-size:15px;line-height:1.6;max-width:56ch}

.kh-cari{display:flex;gap:8px;margin:20px 0 4px;max-width:520px}
.kh-cari input{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font-size:16px;padding:11px 13px;font-family:inherit}
.kh-cari input::placeholder{color:var(--muted)}
.kh-cari input:focus{outline:2px solid rgba(232,179,60,.55);outline-offset:1px}
.kh-cari button{background:var(--gold);color:var(--navy2);border:0;border-radius:10px;
  font-size:14px;font-weight:800;padding:0 16px;cursor:pointer;white-space:nowrap;font-family:inherit}
.kh-cari button:hover{background:var(--gold-d)}

.kh-daftar{max-width:720px;margin:0 auto;padding:16px clamp(16px,5vw,26px) 8px;display:grid;gap:14px}
.kh-kartu{position:relative;display:block;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:16px 16px 14px;text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s;
  box-shadow:0 2px 8px rgba(22,41,77,.05)}
.kh-kartu:hover{border-color:var(--gold);transform:translateY(-1px)}
.kh-kartu h2{font-size:19px;line-height:1.3;color:var(--judul);margin:6px 0 8px;font-weight:800;
  overflow-wrap:break-word}
/* seluruh kartu bisa diketuk lewat lapisan ::after pada judul (tidak ada aksi di kartu) */
.kh-kartu h2 a{color:inherit}
.kh-kartu h2 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:16px}
.kh-kartu p{color:var(--gray);font-size:14.5px;line-height:1.6}
.kh-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kh-meta .titik{opacity:.5}
.kh-baca{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold-t)}
.kh-kosong{max-width:720px;margin:0 auto;padding:22px clamp(16px,5vw,26px);color:var(--gray)}
.kh-pesan{max-width:720px;margin:12px auto 0;padding:0 clamp(16px,5vw,26px);color:var(--gold-t);font-size:14.5px}

/* --- naskah --- */
.kh-artikel{max-width:720px;margin:0 auto;padding:18px clamp(16px,5vw,26px) 10px}
.kh-remah{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:16px}
.kh-remah a{text-decoration:none}
.kh-artikel h1{font-size:clamp(25px,7vw,36px);line-height:1.18;letter-spacing:-.01em;
  color:var(--judul);margin:6px 0 12px;overflow-wrap:break-word}
.kh-dek{font-size:17px;line-height:1.62;color:var(--gray);margin-bottom:14px}
.kh-dek p{margin:0}
.kh-dek em,.kh-dek i{font-style:italic}
.kh-artikel .kh-meta{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:22px}
.kh-isi{font-size:17px;line-height:1.75;color:var(--ink);overflow-wrap:break-word}
.kh-isi p{margin:0 0 18px}
.kh-isi .kh-h1-artikel{font-size:24px}
.kh-isi h2{font-size:clamp(20px,5.4vw,25px);line-height:1.28;color:var(--judul);font-weight:800;
  margin:34px 0 12px;padding-left:12px;border-left:3px solid var(--gold);overflow-wrap:break-word}
.kh-isi h3{font-size:18.5px;line-height:1.35;color:var(--judul);font-weight:800;margin:26px 0 10px}
.kh-isi h4{font-size:16.5px;color:var(--gold-t);font-weight:800;margin:22px 0 8px;
  letter-spacing:.04em;text-transform:uppercase}
.kh-isi strong{color:var(--judul);font-weight:800}
.kh-isi em{color:var(--ink)}
.kh-isi a{color:var(--gold-t);text-decoration:underline;text-underline-offset:2px}
.kh-isi code{background:var(--soft);border-radius:5px;padding:1px 5px;font-size:.92em}
.kh-kutip{margin:20px 0;padding:14px 16px;background:var(--soft);
  border-left:3px solid var(--gold);border-radius:0 10px 10px 0}
.kh-kutip p{margin:0;font-size:16.5px;line-height:1.68;color:var(--ink);font-style:italic}
.kh-ul,.kh-ol{margin:0 0 18px;padding-left:22px}
.kh-ul li,.kh-ol li{margin-bottom:9px;line-height:1.68}
.kh-ul{list-style:disc}
.kh-ol{list-style:decimal}
.kh-sumber{border-top:1px solid var(--line);padding-top:14px;color:var(--ink);font-size:15.5px}
.kh-sumber li{margin-bottom:10px}
.kh-garis{border:0;border-top:1px solid var(--line);margin:26px 0}
.kh-gulir{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 20px}
.kh-tabel{width:100%;border-collapse:collapse;font-size:14.5px;table-layout:fixed}
.kh-tabel th,.kh-tabel td{border:1px solid var(--line);padding:9px 10px;text-align:left;
  vertical-align:top;overflow-wrap:break-word;word-break:break-word;line-height:1.5}
.kh-tabel th{background:var(--soft);color:var(--judul);font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;font-weight:800}
.kh-tabel tbody tr:nth-child(even) td{background:rgba(0,0,0,.03)}
body.dark .kh-tabel tbody tr:nth-child(even) td{background:rgba(255,255,255,.03)}

/* --- blok "Tentang liputan ini" (asal-usul narasumber & cara bahan diperoleh) --- */
.kh-tentang{margin:28px 0 8px;padding:16px 18px;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 14px 14px 0;
  scroll-margin-top:74px}   /* tautan #tentang tidak tertutup bilah atas yang sticky */
.kh-tentang h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:800;margin:0 0 10px;padding:0;border:0}
.kh-tentang-isi{font-size:15px;line-height:1.68;color:var(--ink);overflow-wrap:break-word}
.kh-tentang-isi p{margin:0 0 11px}
.kh-tentang-isi p:last-child{margin-bottom:0}
.kh-tentang-isi strong{color:var(--judul);font-weight:800}
.kh-tentang-isi em{color:var(--ink)}
.kh-tentang-isi a{color:var(--gold-t);text-decoration:underline;text-underline-offset:2px}
.kh-tentang-isi ul,.kh-tentang-isi ol{margin:0 0 11px;padding-left:20px}
.kh-tentang-isi li{margin-bottom:7px}
.kh-tentang-isi dl{margin:0}
.kh-tentang-isi dt{font-weight:800;color:var(--judul);font-size:13.5px;margin-top:8px}
.kh-tentang-isi dd{margin:0 0 6px}

.kh-penutup{max-width:720px;margin:30px auto 0;padding:18px clamp(16px,5vw,26px) 4px;
  border-top:1px solid var(--line)}
.kh-penutup h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:800;margin-bottom:12px}
.kh-lain{display:grid;gap:10px}
.kh-lain a{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;text-decoration:none;color:var(--ink);font-size:15px;font-weight:700;
  line-height:1.4;overflow-wrap:break-word}
.kh-lain a:hover{border-color:var(--gold)}
.kh-lain span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-top:5px}

@media (max-width:420px){
  body.khusus{font-size:16.5px}
  .kh-isi{font-size:16.5px}
  .kh-kutip p{font-size:16px}
  .kh-tabel{font-size:13.5px}
  .kh-cari button{padding:0 13px;font-size:13px}
}

/* ==========================================================================
   21. RAIL AKSI BACAAN (.aksi-baris) — IKON SAJA, DI SISI KANAN ARTIKEL
   Arahan pemilik (20 Okt 2026, dengan tangkapan layar UI berita lain): tombol
   aksi bacaan pindah ke SISI KANAN artikel seperti tombol sosial media dan
   HANYA berupa ikon — tulisan "Bagikan"/"Simpan" tidak boleh tampil lagi.
   Nama tombol tetap terbaca pembaca layar lewat aria-label dan muncul sebagai
   tooltip desktop lewat title (bukan teks di dalam tombol).
   - >=900px: rail vertikal 44x44 menempel (sticky) di kanan kolom baca.
     Kolom baca diberi ruang kanan 56px (lihat intrinsic.css 8j & .kh-artikel)
     supaya teks tidak pernah tertimpa.
   - <900px : rail fixed di tepi kanan layar, ikon 40x40, semi transparan,
     kolom baca diberi padding-right 48px, ikut safe-area perangkat berponi.
   Opsi WhatsApp/X/Telegram/Salin tetap ada, tersembunyi di popover Bagikan
   (di HP tombol itu memanggil lembar bagikan bawaan sistem/navigator.share).
   Warna sepenuhnya memakai token tema, jadi terang/gelap ikut otomatis.
   ========================================================================== */
.aksi-baris{
  position:sticky;top:24px;z-index:45;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:44px;
  /* margin kanan negatif: rail duduk di ruang 56px yang disisihkan padding
     kolom baca, jadi tidak pernah menimpa baris teks (lihat .article) */
  margin:0 -52px -96px auto;padding:0}
.aksi-btn{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;min-height:44px;padding:0;
  font-family:inherit;line-height:1;
  border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--judul);
  box-shadow:none;   /* permintaan pemilik 20 Okt: bayangan di bawah tombol dihilangkan */
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease}
.aksi-btn:hover{border-color:var(--gold);color:var(--gold-t)}
.aksi-btn:active{transform:scale(.94)}
.aksi-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.aksi-btn .aksi-svg{display:block;width:20px;height:20px}

/* Bagikan = tombol utama (emas), Simpan = tombol kedua (garis tepi).
   Saat tersimpan, gambar bookmark diisi (fill) lewat aria-pressed/.aktif. */
.aksi-bagi{background:var(--gold);border-color:var(--gold);color:var(--navy2)}
.aksi-bagi:hover,.aksi-bagi:focus-visible{background:var(--gold-d);border-color:var(--gold-d);color:var(--navy2)}
.aksi-simpan.aktif,.aksi-simpan[aria-pressed="true"]{background:var(--soft);border-color:var(--gold);color:var(--gold-t)}
.aksi-simpan.aktif .aksi-svg,.aksi-simpan[aria-pressed="true"] .aksi-svg{fill:currentColor}

/* popover opsi platform: terbuka ke KIRI rail (rail ada di tepi kanan),
   posisinya digeser JS bila perlu supaya tetap di dalam viewport */
.aksi-pop{
  position:absolute;top:0;right:calc(100% + 10px);left:auto;z-index:46;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;
  width:216px;max-width:calc(100vw - 78px);
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 34px rgba(10,20,40,.20)}
.aksi-pop[hidden]{display:none}
.aksi-pop button{
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding:10px 8px;width:100%;
  font-family:inherit;font-size:13.5px;font-weight:700;line-height:1.2;
  border:1px solid var(--line);border-radius:10px;background:var(--soft);
  color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s ease,background .15s ease,transform .12s ease}
.aksi-pop button:hover,.aksi-pop button:focus-visible{border-color:var(--gold);outline:none}
.aksi-pop button:active{transform:scale(.97)}
.aksi-pop .ik{font-size:14px;line-height:1;font-weight:800;display:block}
.aksi-pop .lb{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- HP & tablet kecil: rail menempel di tepi kanan LAYAR ------------------ */
@media (max-width:899.98px){
  .aksi-baris{
    position:fixed;top:50%;
    right:calc(6px + env(safe-area-inset-right, 0px));
    transform:translateY(-50%);
    width:40px;margin:0;padding:6px 0;gap:8px;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    background:color-mix(in srgb, var(--paper) 78%, transparent);
    border:1px solid var(--line);
    box-shadow:0 6px 18px rgba(10,20,40,.16);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .aksi-btn{width:40px;height:40px;min-height:40px;background:transparent;box-shadow:none}
  .aksi-btn .aksi-svg{width:18px;height:18px}
  .aksi-bagi{background:var(--gold);border-color:var(--gold)}
  .aksi-pop{width:208px;max-width:calc(100vw - 74px)}
  /* ruang kanan kolom baca: teks tidak tertimpa rail yang fixed */
  .article{padding-right:48px}
  .kh-artikel{padding-right:48px}
}

/* --- >=900px: ruang kanan kolom baca untuk rail sticky -------------------- */
@media (min-width:900px){
  .kh-artikel{padding-right:56px}
  /* naskah Khusus punya bilah atas sticky (65px, z-index 50): rail menempel
     DI BAWAHNYA supaya tombol tidak tersembunyi saat digulir */
  body.khusus .aksi-baris{top:84px}
}

/* ==== Gambar pendukung liputan Khusus ==== */
.kh-gambar{margin:22px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.kh-gambar img{display:block;width:100%;height:auto}
.kh-gambar figcaption{padding:9px 12px;font-size:12.5px;line-height:1.45;color:var(--muted);border-top:1px solid var(--line);background:var(--soft)}
body.dark .kh-gambar figcaption{color:#b9c2d0}