/* Zona News — gaya utama
   Font: Tahoma (konsisten dengan halaman Zona lain)
   Aturan: tanpa glow, tanpa letter-spacing negatif, mobile 375px aman. */

:root {
  --paper: #ffffff;
  --bg: #f5f7f7;
  --bg-soft: #eef2f2;
  --ink: #10202b;
  --ink-2: #3d5260;
  --ink-3: #6c8290;
  --line: #dbe3e6;
  --line-2: #c7d3d8;
  --brand: #0b7666;
  --brand-dark: #085a4e;
  --brand-soft: #e6f2f0;
  --on-brand: #ffffff;
  --focus: #0b7666;
  --radius: 10px;
  --wrap: 1240px;
  --shadow-card: 0 1px 2px rgba(16, 32, 43, 0.06);
  --shadow-pop: 0 10px 28px rgba(16, 32, 43, 0.16);
  --font: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
}

html[data-theme="dark"] {
  --paper: #131e24;
  --bg: #0c1519;
  --bg-soft: #17262d;
  --ink: #e8eef1;
  --ink-2: #aebfc9;
  --ink-3: #8299a5;
  --line: #24363f;
  --line-2: #2f444f;
  --brand: #2fa894;
  --brand-dark: #3fc2ad;
  --brand-soft: #16302f;
  --on-brand: #04201c;
  --focus: #4ec9b6;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 10px 28px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

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

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; letter-spacing: 0; }
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 1em; }

.zn-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.zn-narrow { max-width: 780px; }

.zn-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.zn-skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--brand); color: var(--on-brand);
  padding: 10px 16px; border-radius: 0 0 8px 8px; font-weight: 700;
}
.zn-skip:focus { top: 0; }

/* Atribut hidden harus menang atas display dari class (.zn-card memakai
   display:flex, yang lebih spesifik daripada aturan [hidden] bawaan browser).
   Tanpa ini, filter kategori dan "muat lebih banyak" tidak terlihat bekerja. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- header */

/* Header dua lapis. Lapis atas tetap di semua lebar; lapis nav disembunyikan
   di bawah 900px karena isinya sudah ada di drawer. Sticky dengan backdrop
   blur supaya konten yang lewat di bawahnya tidak mengganggu pembaca. */
.zn-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(10px)) {
  .zn-head {
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: saturate(1.6) blur(10px);
  }
}
/* Setelah halaman digulir, garis bawah dan bayangan muncul supaya header
   terpisah jelas dari konten yang lewat. */
.zn-head.is-stuck { box-shadow: 0 1px 0 var(--line), 0 6px 18px -14px rgba(8, 22, 28, 0.5); }

.zn-progress {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: 0 50%;
  opacity: 0; transition: opacity 0.2s ease;
}
.zn-head.is-reading .zn-progress { opacity: 1; }

.zn-head-top {
  display: flex; align-items: center; gap: 12px; min-height: 58px;
}

.zn-logo {
  font-size: 1.16rem; font-weight: 700; color: var(--ink);
  text-decoration: none; white-space: nowrap; letter-spacing: 0;
  display: inline-flex; align-items: baseline; gap: 0; line-height: 1.15;
}
/* Pemisah visual tipis: dua kata terbaca sebagai satu merek, bukan dua
   label yang menempel. Jaraknya dibentuk oleh padding, bukan gap, supaya
   garis pemisah ikut membesar bersama teks. */
.zn-logo span { padding-left: 4px; border-left: 1.5px solid var(--line-2); }
.zn-logo span { color: var(--brand); }
.zn-logo:hover { text-decoration: none; }

.zn-head-date {
  margin: 0; font-size: 0.72rem; color: var(--ink-3);
  display: flex; flex-direction: column; line-height: 1.35;
  padding-left: 12px; border-left: 1px solid var(--line-2);
}
.zn-head-count { color: var(--brand-dark); font-weight: 700; }

/* Pencarian: kolom grow di tengah, melebar hingga ruang sisa. */
.zn-search {
  display: flex; align-items: center; gap: 7px; flex: 1 1 auto;
  max-width: 460px; margin-left: auto; position: relative;
  background: var(--bg-soft); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 0 10px 0 11px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.zn-search:focus-within { border-color: var(--brand); background: var(--bg); }
.zn-search input {
  flex: 1 1 auto; min-width: 0; padding: 7px 0; font: inherit; font-size: 0.84rem;
  border: 0; background: transparent; color: var(--ink);
}
.zn-search input:focus { outline: none; }
.zn-search input::placeholder { color: var(--ink-3); }
.zn-kbd {
  font: inherit; font-size: 0.66rem; font-weight: 700; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 0 5px;
  background: var(--paper); line-height: 1.5;
}
.zn-search:focus-within .zn-kbd { display: none; }

.zn-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Tombol ikon: kotak bulat, border hairline, hover halus. */
.zn-icobtn {
  width: 34px; height: 34px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2);
  padding: 0; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.zn-icobtn:hover { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); }
.zn-ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.zn-ic-moon { display: none; }
[data-theme="dark"] .zn-ic-sun { display: none; }
[data-theme="dark"] .zn-ic-moon { display: block; }

/* Ukuran teks hanya ditampilkan di desktop, di dalam kelompok perkakas.
   Di bawah 1080px tempatnya pindah ke dalam drawer (lihat media query). */
.zn-textsize { display: flex; gap: 2px; }
.zn-textsize .zn-icobtn { width: 30px; height: 34px; font-size: 0.7rem; font-weight: 700; border-radius: 8px; }

/* Pencarian mobile & panel ukuran teks. */
[data-search-open] { display: none; }

.zn-nav {
  display: flex; align-items: center; gap: 2px;
  border-top: 1px solid var(--line); padding: 0 4px;
  overflow-x: auto; scrollbar-width: none;
}
.zn-nav::-webkit-scrollbar { display: none; }
.zn-nav a {
  color: var(--ink-2); padding: 9px 12px; white-space: nowrap;
  font-size: 0.82rem; font-weight: 700; border-bottom: 2px solid transparent;
}
.zn-nav a:hover { color: var(--ink); text-decoration: none; background: var(--bg-soft); }
.zn-nav a.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); }

/* Burger tidak lagi jadi elemen terpisah di kiri header — ia satu bagian dari
   kelompok perkakas di kanan, dengan bentuk yang sama persis dengan tombol
   ikon di sebelahnya. */
.zn-burger { display: none; }
/* Tiga garis diratakan terhadap sumbu tengah kotak, lebarnya disamakan dengan
   kotak ikon di sebelahnya (32px - 17px = 15px, sisa 7.5px tiap sisi). Tanpa
   align-items, flex kolom membentangkan silang ke kiri dan garisnya nempel tepi. */
.zn-burger span {
  display: block; width: 17px; height: 2px; border-radius: 1px; background: currentColor;
}
.zn-burger-d {
  width: 34px; height: 34px; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 4px; cursor: pointer; border-radius: 9px; border: 1px solid var(--line-2);
  background: var(--paper); color: var(--ink-2); padding: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.zn-burger-d:hover { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); }
.zn-burger-d[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); }

@media (max-width: 900px) {
  .zn-nav { display: none; }
  .zn-burger-d { display: inline-flex; }
  .zn-head-top { min-height: 54px; gap: 10px; }
  .zn-head-date { display: none; }
  .zn-search { display: none; }
  [data-search-open] { display: inline-flex; }
  /* Toolbar seluler sudah sempit dan sistem operasi sudah menyediakan
     penskalaan font, jadi salinan di header disembunyikan; yang tetap dipakai
     adalah kelompok di dalam drawer (.zn-drawer-textsize). */
  .zn-tools > .zn-textsize { display: none; }
  .zn-logo { margin-right: auto; }
}
@media (max-width: 480px) {

  .zn-icobtn { width: 32px; height: 32px; }
}

/* ---------------------------------------------------------------- drawer */

.zn-drawer { position: fixed; inset: 0; z-index: 60; }
.zn-drawer[hidden] { display: none; }
.zn-drawer::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(8, 22, 28, 0.5);
}
.zn-drawer-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(320px, 86vw);
  background: var(--paper); border-left: 1px solid var(--line);
  padding: 18px 20px 28px; overflow-y: auto;
  box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 16px;
}
.zn-drawer-top { display: flex; align-items: center; justify-content: space-between; }
.zn-drawer-title { font-weight: 700; font-size: 1.05rem; }
.zn-drawer-close {
  font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
  padding: 7px 12px; border-radius: 7px;
  border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-2);
}
.zn-drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.zn-drawer-nav a {
  padding: 11px 12px; border-radius: 8px; color: var(--ink);
  font-weight: 700; font-size: 0.95rem;
}
.zn-drawer-nav a:hover { background: var(--bg-soft); text-decoration: none; }
.zn-drawer-nav a.is-active { background: var(--brand-soft); color: var(--brand-dark); }
.zn-drawer-search input {
  width: 100%; padding: 11px 13px; font: inherit;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--bg); color: var(--ink);
}
.zn-drawer-out {
  margin-top: auto; padding: 11px 12px; border-radius: 8px;
  background: var(--brand); color: var(--on-brand); font-weight: 700; text-align: center;
}
.zn-drawer-out:hover { background: var(--brand-dark); text-decoration: none; }

/* ---------------------------------------------------------------- ticker */

.zn-ticker {
  background: var(--brand); color: var(--on-brand);
  overflow: hidden; white-space: nowrap; position: relative;
}
.zn-ticker-track { display: inline-flex; padding: 8px 0; animation: zn-marquee 46s linear infinite; }
/* Salinan kedua dibungkus <span aria-hidden>. Tanpa rule ini span menjadi
   flex item dengan line-height miliknya sendiri dan ticker jadi 4px lebih
   tinggi dari aslinya. */
.zn-ticker-track > span { display: flex; align-items: stretch; }
.zn-ticker a { color: var(--on-brand); padding: 0 18px; font-size: 0.83rem; border-right: 1px solid rgba(255, 255, 255, 0.28); }
.zn-ticker a:hover { text-decoration: underline; }

/* Tombol jeda di ujung kanan: marquee bisa dihentikan atas pilihan sendiri,
   dan tombol inilah satu-satunya cara menghidupkan kembali gerak untuk pembaca
   yang sistemnya meminta reduced-motion (lihat blok media query di bawah). */
.zn-ticker-pause {
  position: absolute; right: 0; top: 0; bottom: 0; width: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-left: 1px solid rgba(255, 255, 255, 0.28);
  background: var(--brand); color: var(--on-brand);
  cursor: pointer; padding: 0; opacity: 0.85;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.zn-ticker-pause:hover { opacity: 1; background: var(--brand-dark); }
.zn-ticker-pause svg { width: 13px; height: 13px; }
.zn-ticker-pause .zn-ic-play { display: none; }
.zn-ticker-pause[aria-pressed="true"] .zn-ic-play { display: block; }
.zn-ticker-pause[aria-pressed="true"] .zn-ic-pause { display: none; }
@media (max-width: 900px) { .zn-ticker-pause { display: none; } }

@keyframes zn-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.zn-ticker.is-paused .zn-ticker-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Mematikan gerak otomatis TIDAK boleh menyembunyikan berita. Isi track
     sekitar 8600px di kotak selebar layar, jadi diam begitu saja membuat
     8 dari 10 judul tidak pernah terlihat. Yang dimatikan hanya animasinya;
     track tetap bisa digeser dengan jari atau keyboard. */
  .zn-ticker-track { animation: none; }
  /* Bisa digeser dengan jari atau keyboard, tapi bilah gulir disembunyikan:
    strip hijau yang hanya 38px jadi lebih tinggi dan bergaris abu-abu kalau
    bilahnya dibiarkan. */
  .zn-ticker { overflow-x: auto; scrollbar-width: none; }
  .zn-ticker::-webkit-scrollbar { display: none; }
  @media (max-width: 900px) { .zn-ticker-pause { display: none; } }
  .zn-ticker.is-forced .zn-ticker-track { animation: zn-marquee 46s linear infinite; }
}

/* ---------------------------------------------------------------- hero */

main { padding: 22px 0 40px; }

.zn-top { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; margin-bottom: 30px; }
.zn-hero {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
}
.zn-hero-media { display: block; background: var(--bg-soft); }
.zn-hero-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.zn-hero-body { padding: 20px 22px 22px; }
.zn-hero-body h1 { font-size: 1.7rem; margin: 10px 0 8px; }
.zn-hero-body h1 a { color: var(--ink); }
.zn-hero-body p { color: var(--ink-2); margin: 0 0 12px; }
.zn-hero-meta { display: flex; gap: 12px; align-items: center; font-size: 0.78rem; color: var(--ink-3); flex-wrap: wrap; }

.zn-cat {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  padding: 3px 9px; border-radius: 5px; text-transform: uppercase;
  background: var(--brand-soft); color: var(--brand-dark); letter-spacing: 0;
}
.zn-cat-ekonomi { background: #e8f1de; color: #46651f; }
.zn-cat-teknologi { background: #e4ecf7; color: #245089; }
.zn-cat-olahraga { background: #f7e8dd; color: #9a4b18; }
.zn-cat-internasional { background: #ece6f6; color: #56378f; }
.zn-cat-lifestyle { background: #f8e4ef; color: #8f3563; }
html[data-theme="dark"] .zn-cat { background: #16302f; color: #63d3c0; }
html[data-theme="dark"] .zn-cat-ekonomi { background: #1d2a17; color: #b3d78a; }
html[data-theme="dark"] .zn-cat-teknologi { background: #16243a; color: #8fb6ea; }
html[data-theme="dark"] .zn-cat-olahraga { background: #35241a; color: #e0a877; }
html[data-theme="dark"] .zn-cat-internasional { background: #251c3a; color: #bda6e8; }
html[data-theme="dark"] .zn-cat-lifestyle { background: #331c28; color: #e79fc4; }

.zn-src { font-weight: 700; color: var(--ink-2); }

/* ---------------------------------------------------------------- sections */

.zn-sec { margin-bottom: 32px; }
.zn-sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  border-bottom: 2px solid var(--line); padding-bottom: 8px; margin-bottom: 16px;
}
.zn-sec-head h2 { margin: 0; font-size: 1.2rem; }
.zn-sec-head p { margin: 0; font-size: 0.8rem; color: var(--ink-3); }
.zn-sec-link { font-size: 0.82rem; font-weight: 700; white-space: nowrap; }

.zn-catsec { margin-bottom: 32px; }

.zn-grid { display: grid; gap: 18px; }
.zn-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zn-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zn-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.zn-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.zn-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.zn-card-media { display: block; position: relative; background: var(--bg-soft); }
.zn-card-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.zn-card-media .zn-cat { position: absolute; left: 10px; top: 10px; }
.zn-card-body { padding: 13px 14px 15px; display: flex; flex-direction: column; flex: 1; }
.zn-card-body h3 { margin: 0 0 7px; font-size: 0.98rem; line-height: 1.35; }
.zn-card-body h3 a { color: var(--ink); }
.zn-card-lead {
  margin: 0 0 10px; font-size: 0.86rem; color: var(--ink-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.zn-card-meta {
  margin-top: auto; display: flex; gap: 10px; align-items: center;
  font-size: 0.75rem; color: var(--ink-3);
}
.zn-card-meta time { margin-left: auto; white-space: nowrap; }

.zn-more {
  display: block; text-align: center; margin-top: 18px; padding: 12px;
  border: 1px solid var(--line-2); border-radius: 9px;
  font-weight: 700; font-size: 0.9rem; color: var(--brand-dark);
  background: var(--paper);
}
.zn-more:hover { background: var(--brand-soft); text-decoration: none; }
.zn-more-wide { max-width: 420px; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- boxes */

.zn-box {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-card);
}
.zn-box h2 {
  font-size: 0.82rem; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline;
  letter-spacing: 0; border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.zn-box h2 span { font-size: 0.7rem; text-transform: none; color: var(--brand); }
.zn-box p { font-size: 0.87rem; color: var(--ink-2); }
.zn-box-dark { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.zn-box-dark h2 { color: var(--on-brand); border-bottom-color: rgba(255, 255, 255, 0.3); }
.zn-box-dark p { color: var(--on-brand); opacity: 0.92; }
.zn-box-dark a { color: var(--on-brand); font-weight: 700; }

.zn-ranks { list-style: none; margin: 0; padding: 0; }
.zn-ranks li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.zn-ranks li:last-child { border-bottom: 0; }
.zn-rank-num { font-size: 0.95rem; font-weight: 700; color: var(--line-2); min-width: 22px; }
.zn-ranks a { color: var(--ink); font-size: 0.88rem; font-weight: 700; line-height: 1.4; }
.zn-rank-meta { display: block; font-size: 0.72rem; color: var(--ink-3); margin-top: 3px; }

.zn-srcs { list-style: none; margin: 0; padding: 0; }
.zn-srcs li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.85rem;
}
.zn-srcs li:last-child { border-bottom: 0; }
.zn-srcs b { color: var(--ink-3); font-size: 0.78rem; }
.zn-picks { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.zn-picks li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.zn-picks li:last-child { border-bottom: 0; }
.zn-picks a { color: var(--ink); font-size: 0.88rem; font-weight: 700; }
.zn-picks span { display: block; font-size: 0.72rem; color: var(--ink-3); margin-top: 3px; }
.zn-plain { list-style: none; margin: 0; padding: 0; }
.zn-plain li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.zn-plain li:last-child { border-bottom: 0; }
.zn-box-dark .zn-plain li { border-bottom-color: rgba(255, 255, 255, 0.25); }
.zn-box-dark .zn-plain a { color: var(--on-brand); }

/* ---------------------------------------------------------------- layout */

.zn-top-side { display: flex; flex-direction: column; gap: 18px; }
.zn-tail { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; }
.zn-tail-side { display: flex; flex-direction: column; gap: 18px; }
.zn-weekgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; }
.zn-weekside { display: flex; flex-direction: column; gap: 18px; }
.zn-week { margin-bottom: 26px; }
.zn-week h2 { font-size: 1rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- pages */

.zn-page-head { margin-bottom: 22px; border-bottom: 2px solid var(--line); padding-bottom: 14px; }
.zn-page-head h1 { margin: 6px 0 6px; }
.zn-page-head p { margin: 0; color: var(--ink-2); font-size: 0.92rem; }
.zn-eyebrow {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  color: var(--brand); letter-spacing: 0;
}

.zn-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.zn-chip {
  padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 0.84rem; font-weight: 700; color: var(--ink-2); background: var(--paper);
}
.zn-chip:hover { background: var(--bg-soft); text-decoration: none; }
.zn-chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.zn-datelist { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 8px; }
.zn-datelist a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 15px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 9px; color: var(--ink); font-weight: 700; font-size: 0.9rem;
}
.zn-datelist a:hover { background: var(--bg-soft); text-decoration: none; }
.zn-datelist b { color: var(--ink-3); font-size: 0.78rem; white-space: nowrap; }
.zn-backlink { margin-bottom: 18px; font-size: 0.88rem; }

.zn-404 { text-align: left; padding-top: 20px; }
.zn-404 h1 { font-size: 1.7rem; }
.zn-404 .zn-plain { margin-top: 20px; }

.zn-table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 0.9rem; }
.zn-table caption { text-align: left; font-size: 0.8rem; color: var(--ink-3); padding-bottom: 8px; }
.zn-table th, .zn-table td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; }
.zn-table th { background: var(--bg-soft); font-size: 0.8rem; }

/* ---------------------------------------------------------------- article */

.zn-art-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; }
.zn-art {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-card);
}
.zn-crumbs { font-size: 0.78rem; color: var(--ink-3); margin-bottom: 12px; }
.zn-crumbs span { margin: 0 5px; }
.zn-art h1 { font-size: 1.75rem; margin: 10px 0 12px; }
.zn-art-meta {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size: 0.8rem; color: var(--ink-3);
  border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 18px;
}
.zn-art-fig { margin: 0 0 20px; }
.zn-art-fig img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.zn-art-fig figcaption { font-size: 0.74rem; color: var(--ink-3); margin-top: 7px; }
.zn-art-body p { font-size: 1.02rem; line-height: 1.8; color: var(--ink); }
.zn-art-cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 14px; }
.zn-btn {
  font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer;
  padding: 11px 18px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center;
}
.zn-btn:hover { background: var(--bg-soft); text-decoration: none; }
.zn-btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.zn-btn-primary:hover { background: var(--brand-dark); }
.zn-btn.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.zn-art-note {
  font-size: 0.8rem; color: var(--ink-3); background: var(--bg-soft);
  padding: 12px 14px; border-radius: 8px; border-left: 3px solid var(--line-2);
}
.zn-art-side { display: flex; flex-direction: column; gap: 18px; }

/* ---------------------------------------------------------------- iklan */

/* min-height per format ada di build_site.py (AD_MIN_H) dan di sini;
   keduanya harus sama. Tinggi yang dipatok inilah yang mencegah
   lompatan layout saat iklan pihak ketiga dimuat belakangan. */
.zn-ad {
  display: block; position: relative; overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.zn-ad-label {
  position: absolute; top: 6px; left: 8px; z-index: 2;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: 4px;
  padding: 2px 6px; line-height: 1.45;
}
.zn-ad-box { display: flex; height: 100%; }

/* Format: leaderboard di atas daftar (kategori, penerbit), dan footer. */
.zn-ad-leader { min-height: 106px; margin-bottom: 20px; }
.zn-ad-foot { min-height: 106px; margin-top: 26px; }
/* Format: di dalam feed kartu, menyatu tinggi dengan kartu di sekitarnya. */
.zn-ad-infeed { min-height: 132px; grid-column: 1 / -1; margin: 6px 0 14px; }
/* Format: di dalam artikel, lebar kolom teks. */
.zn-ad-inline {
  min-height: 250px; margin: 26px 0; padding-top: 22px;
  border-top: 0; border-bottom: 0; border-left: 0; border-right: 0;
  border-radius: 0; background: transparent;
}
/* Format: sidebar, mengikuti lebar kolom dan menempel saat digulir. */
.zn-ad-side { min-height: 600px; }
.zn-ad-side .zn-ad-box { align-items: stretch; padding: 0; }
.zn-ad-side .zn-ad-label { top: 8px; left: 10px; }

/* House ad: blok tautan yang mengisi slot. Kalau nanti diganti iklan
   pihak ketiga, aturan ini tidak dipakai dan slotnya tetap utuh. */
.zn-ad-house {
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px; width: 100%; padding: 18px 16px 16px;
  text-decoration: none; color: inherit; text-align: left;
}
.zn-ad-house:hover { text-decoration: none; }
.zn-ad-house-t { font-weight: 700; font-size: 0.95rem; color: var(--ink); line-height: 1.35; }
.zn-ad-house-x { font-size: 0.82rem; color: var(--ink-2); line-height: 1.55; }
.zn-ad-house-c {
  align-self: flex-start; margin-top: 4px;
  font-size: 0.78rem; font-weight: 700; color: var(--brand-dark);
}
.zn-ad-house:hover .zn-ad-house-t { color: var(--brand-dark); }
.zn-ad-house:hover .zn-ad-house-c { text-decoration: underline; }

/* Slot 250px (inline) dan 600px (sidebar) punya tinggi jauh melebihi
   isi house ad yang cuma beberapa baris. Isinya diperbesar supaya
   blok terasa sengaja dirancang, lalu sisa ruang ditandai garis putus
   dan keterangan SLOT. Saat jaringan iklan terpasang nanti, elemen
   house ad ini digantikan dan tata letaknya tidak berubah. */
.zn-ad-inline .zn-ad-house { padding: 26px 20px 22px; gap: 8px; }
.zn-ad-inline .zn-ad-house-t { font-size: 1.05rem; }
/* Slot sidebar 300x600 adalah ukuran baku untuk iklan setengah halaman.
   Isinya di atas dan keterangan format didorong ke dasar slot
   (margin-top auto), jadi rongga kosong di tengah terbaca sebagai ruang
   yang memang disediakan, bukan teks yang gagal tampil. */
.zn-ad-side .zn-ad-house { padding: 34px 22px 26px; gap: 10px;
  justify-content: flex-start; }
.zn-ad-side .zn-ad-house-t { font-size: 1.12rem; }
.zn-ad-side .zn-ad-note { margin-top: auto; }

/* Penjelasan sisa ruang, dicetak kecil di bawah CTA. */
.zn-ad-note {
  display: block; margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--line-2);
  font-size: 0.72rem; color: var(--ink-3); line-height: 1.5;
}

/* Format lebar (leaderboard, in-feed, footer) mengisi 1200px penuh. Susun
   mendatar supaya blok teks tidak menggantung di kiri dengan separuh
   ruang kosong di sebelah kanan: judul dan tombol dikunci di tepi,
   kalimat deskripsi mengisi ruang sisa. Di bawah 640px susunannya
   kembali ke vertikal. */
.zn-ad-leader .zn-ad-house,
.zn-ad-infeed .zn-ad-house,
.zn-ad-foot .zn-ad-house {
  flex-direction: row; align-items: center; gap: 22px;
  padding: 18px 18px 16px 54px;
}
.zn-ad-leader .zn-ad-house-t,
.zn-ad-infeed .zn-ad-house-t,
.zn-ad-foot .zn-ad-house-t { flex: 0 0 auto; }
.zn-ad-leader .zn-ad-house-x,
.zn-ad-infeed .zn-ad-house-x,
.zn-ad-foot .zn-ad-house-x { flex: 1 1 auto; }
.zn-ad-leader .zn-ad-house-c,
.zn-ad-infeed .zn-ad-house-c,
.zn-ad-foot .zn-ad-house-c { flex: 0 0 auto; align-self: center; margin-top: 0; }

html[data-theme="dark"] .zn-ad { background: var(--bg-soft); }

/* Di layar sempit slot sidebar disembunyikan: kolomnya sendiri sudah
   hilang, dan kotak 600px di atas sisa konten hanya jadi ruang mati. */
@media (max-width: 1024px) { .zn-ad-side { display: none; } }
@media (max-width: 640px) {
  .zn-ad-leader .zn-ad-house,
  .zn-ad-infeed .zn-ad-house,
  .zn-ad-foot .zn-ad-house {
    flex-direction: column; align-items: flex-start; gap: 6px;
  }
  .zn-ad-leader .zn-ad-house-c,
  .zn-ad-infeed .zn-ad-house-c,
  .zn-ad-foot .zn-ad-house-c { align-self: flex-start; margin-top: 4px; }
}
@media (max-width: 480px) {
  .zn-ad-infeed { min-height: 150px; }
  .zn-ad-leader, .zn-ad-foot { min-height: 120px; }
  .zn-ad-house { padding: 26px 14px 18px; }
  /* Label "Iklan" duduk absolut di kiri atas. Pada susunan vertikal
     ruang kosong di atas diperlukan supaya label tidak menimpa judul —
     persis yang terjadi di 375px sebelum padding ini ditambah. */
  .zn-ad-leader .zn-ad-house, .zn-ad-foot .zn-ad-house,
  .zn-ad-infeed .zn-ad-house { padding-left: 14px; padding-top: 30px; }
  .zn-ad-inline .zn-ad-house { padding: 32px 16px 24px; }
}

/* ---------------------------------------------------------------- search */

.zn-searchpage { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.zn-searchpage input {
  flex: 1 1 260px; padding: 13px 15px; font: inherit;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--bg); color: var(--ink);
}
.zn-searchpage input:focus { border-color: var(--brand); }
.zn-searchmeta { font-size: 0.85rem; color: var(--ink-3); margin-bottom: 18px; }
.zn-empty { padding: 30px 0; font-size: 0.95rem; color: var(--ink-2); }
.zn-result { display: block; }
.zn-result h3 { margin: 0 0 4px; font-size: 1rem; }
.zn-result h3 a { color: var(--ink); }
.zn-result p { margin: 0 0 6px; font-size: 0.86rem; color: var(--ink-2); }
.zn-result .zn-card-meta { font-size: 0.75rem; color: var(--ink-3); }

/* ---------------------------------------------------------------- filter chips */

.zn-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 18px; padding: 0;
}
.zn-chip {
  font-family: var(--font); font-size: 0.84rem; letter-spacing: 0;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink-2); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.zn-chip b { font-weight: 700; color: var(--ink-3); margin-left: 4px; }
.zn-chip:hover { border-color: var(--brand); color: var(--ink); }
.zn-chip.is-on {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.zn-chip.is-on b { color: rgba(255, 255, 255, 0.82); }

.zn-loadwrap { text-align: center; margin: 22px 0 4px; }
.zn-loadmore {
  font-family: var(--font); font-size: 0.88rem; letter-spacing: 0;
  padding: 11px 26px; border: 1px solid var(--brand); border-radius: 999px;
  background: var(--paper); color: var(--brand-dark); cursor: pointer;
  transition: background .15s, color .15s;
}
.zn-loadmore:hover { background: var(--brand); color: #fff; }
.zn-loadmore[disabled] { opacity: 0.5; cursor: default; }
.zn-loadmore[disabled]:hover { background: var(--paper); color: var(--brand-dark); }
.zn-loadinfo { margin: 8px 0 0; font-size: 0.78rem; color: var(--ink-3); }
.zn-empty {
  padding: 26px 16px; text-align: center; color: var(--ink-3);
  font-size: 0.9rem; border: 1px dashed var(--line); border-radius: 8px;
}

/* ---------------------------------------------------------------- baca juga */

.zn-more { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.zn-more-h { font-size: 19px; margin: 0 0 14px; }
.zn-more-foot { margin: 14px 0 0; font-size: 14.5px; }
.zn-more-foot a { color: var(--brand); font-weight: 700; text-decoration: none; }
.zn-more-foot a:hover { text-decoration: underline; }
.zn-readtime { color: var(--muted); }

/* ---------------------------------------------------------------- footer */

.zn-foot {
  background: var(--paper); border-top: 1px solid var(--line);
  margin-top: 34px; padding: 28px 0 18px;
}
.zn-foot-grid {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 26px;
}
.zn-foot-brand { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.zn-foot-about p { font-size: 0.85rem; color: var(--ink-2); margin: 0; max-width: 320px; }
.zn-foot h3 {
  font-size: 0.75rem; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 10px; letter-spacing: 0;
}
.zn-foot ul { list-style: none; margin: 0; padding: 0; }
.zn-foot li { padding: 5px 0; font-size: 0.86rem; }
.zn-foot a { color: var(--ink-2); }
.zn-foot a:hover { color: var(--brand-dark); }
.zn-foot-note {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  border-top: 1px solid var(--line); margin-top: 24px; padding-top: 14px;
  font-size: 0.78rem; color: var(--ink-3);
}

.zn-tail-main { min-width: 0; }
.zn-weekmain { min-width: 0; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .zn-top, .zn-tail, .zn-art-grid, .zn-weekgrid { grid-template-columns: minmax(0, 1fr); }
  .zn-top-side { flex-direction: row; }
  .zn-top-side .zn-box { flex: 1; }
  .zn-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zn-nav { display: none; }
  /* Burger hanya hidup di 900px ke bawah. Dulu ada aturan .zn-burger
     display:inline-flex di sini yang membuat batas sebenarnya 1080px,
     tidak sesuai dengan aturan nav di 900px. */
  .zn-burger-d { display: inline-flex; }
  .zn-search { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .zn-wrap { padding: 0 14px; }
  .zn-grid-2, .zn-grid-3, .zn-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .zn-top-side { flex-direction: column; }
  .zn-out { display: none; }
  .zn-foot-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  h1 { font-size: 1.6rem; }
  .zn-hero-body { padding: 16px; }
  .zn-hero-body h1 { font-size: 1.35rem; }
  .zn-art { padding: 18px 16px; }
  .zn-art h1 { font-size: 1.4rem; }
  .zn-art-body p { font-size: 1rem; line-height: 1.75; }
  .zn-datelist a { flex-direction: column; align-items: flex-start; gap: 3px; }
  .zn-card-lead { -webkit-line-clamp: 3; }
}

@media (max-width: 380px) {
  .zn-card-body { padding: 11px 12px 13px; }
  .zn-card-body h3 { font-size: 0.94rem; }
  .zn-hero-body h1 { font-size: 1.22rem; }
  .zn-sec-head h2 { font-size: 1.08rem; }
  .zn-art h1 { font-size: 1.3rem; }
  .zn-btn { padding: 10px 14px; font-size: 0.84rem; }
  /* Pada 375px lebar, baris perkakas (cari, tema, ukuran teks, menu)
     melebar 1px melewati tepi layar. Perkecil kotak ikon dan celah antar
     tombol alih-alih memotong salah satunya. */
  .zn-head-top { padding-left: 14px; padding-right: 14px; }
  .zn-tools { gap: 4px; }
  .zn-icobtn { width: 32px; height: 32px; border-radius: 8px; }
  .zn-textsize .zn-icobtn { width: 26px; }
  .zn-burger-d { width: 32px; height: 32px; }
}

/* ------------------------------------------------- panel cari (mobile/seluler) */

.zn-sheetsheet { position: fixed; inset: 0; z-index: 55; background: var(--paper); }
.zn-sheetsheet[hidden] { display: none; }
.zn-sheetform {
  max-width: 760px; margin: 0 auto; padding: 22px 20px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.zn-sheetform input[type="search"] {
  flex: 1 1 260px; font: inherit; font-size: 1rem; color: var(--ink);
  padding: 11px 14px; border: 1px solid var(--line-2);
  border-radius: 9px; background: var(--bg);
}
.zn-sheetform input:focus { border-color: var(--brand); }

/* --------------------------------------------------------------- pager halaman */

.zn-pager {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 28px 0 8px; align-items: center;
}
.zn-page {
  min-width: 38px; height: 38px; padding: 0 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 9px; background: var(--paper);
  color: var(--ink-2); font-size: 0.84rem; font-weight: 700; text-decoration: none;
}
.zn-page:hover { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); text-decoration: none; }
.zn-page.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.zn-page[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.zn-page-prev, .zn-page-next { font-size: 0.78rem; }

/* ------------------------------------------------------------- halaman penerbit */

.zn-srcrows { display: grid; gap: 10px; }
.zn-srcrow {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  background: var(--paper);
}
.zn-srcrow-name { text-decoration: none; }
.zn-srcrow-name h2 { margin: 0; font-size: 1.02rem; color: var(--ink); }
.zn-srcrow-name:hover h2 { color: var(--brand-dark); }
.zn-srcrow-meta { margin: 4px 0 0; font-size: 0.78rem; color: var(--ink-3); }
.zn-srcrow-cats { margin: 9px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
.zn-page-sub { font-size: 0.8rem; color: var(--ink-3); margin-top: 4px; }

/* ---------------------------------------------------------------- daftar isi */

/* Hanya untuk artikel yang cukup panjang. disembunyikan di server; yang
   menampilkan adalah initToc() di zn.js setelah menghitung paragraf. Tanpa
   JS blok ini tetap tersembunyi, bukan tampil kosong. */
.zn-toc { display: none; }
.zn-toc:not([hidden]) { display: block; }
.zn-toc h2 {
  margin: 0 0 8px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3);
}
.zn-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.zn-toc li { counter-increment: toc; border-left: 2px solid var(--line); }
.zn-toc a {
  display: block; padding: 5px 10px; font-size: 0.78rem; line-height: 1.4;
  color: var(--ink-2); text-decoration: none;
}
.zn-toc a::before { content: counter(toc) ". "; color: var(--ink-3); }
.zn-toc a:hover, .zn-toc a.is-here { background: var(--brand-soft); color: var(--brand-dark); }
.zn-toc li.is-here { border-left-color: var(--brand); }

/* ------------------------------------------------- kembali ke atas + aksi artikel */

.zn-totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 45;
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2);
  box-shadow: var(--shadow-pop); cursor: pointer; padding: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.zn-totop.is-on { opacity: 1; visibility: visible; transform: none; }
.zn-totop:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.zn-art-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; }
.zn-act {
  font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
  padding: 7px 12px; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.zn-act:hover { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); text-decoration: none; }
.zn-act.is-done { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* Tombol aksi artikel dalam bentuk ikon saja. Huruf "Simpan", "Bagikan",
   "Salin tautan" memakan lebar yang sebenarnya tidak perlu di Artikel —
   ikon 34px memberi ruang kosong untuk konteks di layar sempit. Nama yang
   tidak terlihat diambil dari aria-label, jadi pembaca layar tetap
   menyebutkannya. */
.zn-iconbtn {
  width: 42px; height: 42px; padding: 0; justify-content: center;
  border-radius: 8px; flex: 0 0 auto;
}
.zn-iconbtn .zn-ic { width: 18px; height: 18px; }
.zn-iconbtn:active { transform: translateY(1px); }

/* Ikon bookmark terisi penuh ketika artikel sudah disimpan, jadi state
   tersimpan terbaca tanpa bergantung pada warna saja. */
.zn-iconbtn[data-bookmark].is-on .zn-ic { fill: currentColor; }

/* Ikon salin berubah jadi centang sesaat setelah tautan tersalin. Latar
   ikut berubah: tanpa ini ikonnya berwarna putih di atas kertas putih,
   jadi tidak terlihat sama sekali. */
.zn-iconbtn.is-done {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
}
.zn-iconbtn.is-done .zn-ic { color: var(--on-brand); }
.zn-iconbtn .zn-ic-done { display: none; }
.zn-iconbtn.is-done .zn-ic-copy { display: none; }
.zn-iconbtn.is-done .zn-ic-done { display: block; }

/* --------------------------------------------------- ukuran teks & reduced motion */

html { font-size: 16px; }
html[data-textsize="1"] { font-size: 18px; }
html[data-textsize="2"] { font-size: 20px; }
html[data-textsize="-1"] { font-size: 14.5px; }

/* Kunci gulir ketika drawer atau panel cari terbuka: tanpa ini halaman di
   belakang ikut ikut bergeser saat jari menggeser di atas panel. */
body.zn-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .zn-totop, .zn-icobtn, .zn-page, .zn-head { transition: none !important; }
  .zn-totop.is-on { transform: none; }
}

/* Baris preferensi di dalam drawer: ukuran teks punya tempat sendiri di
   seluler, bukan lagi bertumpuk di toolbar yang sudah sempit. */
.zn-drawer-prefs {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 18px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.zn-drawer-prefs-label { font-size: 0.78rem; font-weight: 700; color: var(--ink-2); }
.zn-drawer-textsize { display: flex; }
.zn-drawer-textsize .zn-icobtn { width: 38px; height: 32px; font-size: 0.74rem; border-radius: 8px; }