/* =====================================================================
   Citra Nusa Media — Editorial Premium
   Mobile-first, tokens design, Core Web Vitals diprioritaskan.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --paper: #ffffff;
  --paper-soft: #f7f8fa;
  --paper-deep: #eef0f4;
  --ink: #14171c;
  --ink-soft: #3d4552;
  --ink-muted: #6b7383;
  --line: #dfe3e9;
  --line-strong: #c3c9d3;
  --brand: #a8261f;
  --brand-dark: #7d1b16;
  --brand-tint: #fdf2f1;
  --navy: #17293f;
  --gold: #b4894a;
  --success: #12694a;
  --warning: #9a6a00;

  --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.80rem, 0.78rem + 0.10vw, 0.87rem);
  --step-0: clamp(0.95rem, 0.93rem + 0.12vw, 1.03rem);
  --step-1: clamp(1.12rem, 1.08rem + 0.22vw, 1.25rem);
  --step-2: clamp(1.32rem, 1.24rem + 0.42vw, 1.58rem);
  --step-3: clamp(1.58rem, 1.42rem + 0.78vw, 2.05rem);
  --step-4: clamp(1.9rem, 1.62rem + 1.3vw, 2.65rem);
  --step-5: clamp(2.3rem, 1.86rem + 2.1vw, 3.5rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1.25rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;

  --container: 1240px;
  --reading: 720px;
  --radius: 3px;
  --radius-l: 8px;
  --shadow-s: 0 1px 2px rgba(20, 23, 28, .06), 0 1px 1px rgba(20, 23, 28, .04);
  --shadow-m: 0 8px 24px -12px rgba(20, 23, 28, .18);
  --shadow-l: 0 24px 60px -28px rgba(20, 23, 28, .28);

  --header-h: 64px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset & dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.012em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.15em; }
a { color: var(--ink); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--brand); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-l) 0; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: var(--radius);
}
.skip-link:focus { left: var(--space-s); top: var(--space-s); color: #fff; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-s); }
@media (min-width: 720px) { .container { padding-inline: var(--space-m); } }

.kicker {
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--brand); display: inline-block; margin-bottom: .45rem;
}
.kicker--muted { color: var(--ink-muted); }
.meta { font-size: var(--step--1); color: var(--ink-muted); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.meta time { font-variant-numeric: tabular-nums; }
.meta .dot { color: var(--line-strong); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3. Bar atas & ticker ---------- */
.topbar {
  background: var(--navy); color: #dbe3ee; font-size: .78rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.topbar__inner { display: flex; align-items: center; gap: var(--space-m); min-height: 36px; }
.topbar__date { white-space: nowrap; letter-spacing: .02em; color: #9fb0c6; }
.topbar__links { margin-left: auto; display: flex; gap: var(--space-m); }
.topbar a { color: #dbe3ee; }
.topbar a:hover { color: #fff; }
@media (max-width: 719px) { .topbar__links { display: none; } }

.breaking { background: var(--brand-tint); border-bottom: 1px solid #f3d8d6; }
.breaking__inner { display: flex; align-items: center; gap: var(--space-s); min-height: 44px; overflow: hidden; }
.breaking__label {
  flex: none; background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: .3rem .55rem; border-radius: var(--radius);
}
.breaking__list { display: flex; gap: var(--space-l); overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
.breaking__list::-webkit-scrollbar { display: none; }
.breaking__list a { font-size: .86rem; font-weight: 600; white-space: nowrap; }

/* ---------- 4. Masthead & navigasi ---------- */
.masthead { background: var(--paper); border-bottom: 1px solid var(--line); }
.masthead__inner { display: flex; align-items: center; gap: var(--space-m); min-height: var(--header-h); padding-block: var(--space-s); }
.brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; }
.brand__logo { height: 34px; width: auto; }
.brand__name { font-family: var(--font-display); font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.brand__name span { color: var(--brand); }
.brand__tagline { display: none; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted); margin-top: .25rem; }
@media (min-width: 900px) { .brand__stack { display: grid; } .brand__tagline { display: block; } }

.icon-button {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line);
  background: var(--paper); border-radius: var(--radius); cursor: pointer; color: var(--ink);
}
.icon-button:hover { background: var(--paper-soft); color: var(--brand); }

.search-toggle { display: flex; align-items: center; gap: .5rem; padding-inline: .9rem; width: auto; font-size: .85rem; color: var(--ink-muted); }
@media (max-width: 599px) { .search-toggle span { display: none; } .search-toggle { width: 44px; padding: 0; } }

.nav { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; transition: top .22s var(--ease); }
:root { --qs-h: 52px; }
body.qs-on .nav { top: var(--qs-h); }

/* ---------- bilah pencarian cepat (muncul saat menggulir) ---------- */
.quicksearch {
  position: fixed;
  left: 0; right: 0; top: 0; z-index: 80;
  transform: translateY(-110%);
  visibility: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 34px -22px rgba(20, 23, 28, .45);
  transition: transform .22s var(--ease), visibility 0s linear .22s;
}
.quicksearch.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform .22s var(--ease);
}
.quicksearch__inner { display: flex; align-items: center; gap: .95rem; min-height: var(--qs-h); }
.quicksearch__brand {
  flex: none;
  font: 800 1.02rem/1 var(--font-display);
  letter-spacing: -.01em;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.quicksearch__brand span { color: var(--brand); }
.quicksearch__brand:hover span { color: var(--navy); }
.quicksearch__logo { height: 30px; width: auto; display: block; }
.quicksearch__form { flex: 0 1 520px; height: 40px; }
.btn.quicksearch__cta {
  margin-left: auto; flex: none;
  min-height: 34px; padding: .3rem .85rem;
  font-size: .78rem; letter-spacing: .02em; text-transform: none;
  background: transparent; color: var(--navy); border-color: var(--line);
}
@media (max-width: 899px) {
  :root { --qs-h: 50px; }
  .quicksearch__brand { display: none; }
  .btn.quicksearch__cta { min-height: 30px; padding: .22rem .65rem; font-size: .74rem; }
  .quicksearch__form { max-width: none; flex: 1; min-width: 0; }
}
.nav__inner { display: flex; align-items: stretch; gap: var(--space-s); }
.nav__menu { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0; list-style: none; }
.nav__menu::-webkit-scrollbar { display: none; }
.nav__menu a {
  display: block; padding: .85rem .8rem; font-size: .84rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent; color: var(--ink-soft);
}
.nav__menu a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.nav__menu a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }
.nav__panel { display: none; border-top: 1px solid var(--line); background: var(--paper-soft); padding: var(--space-m) 0; }
.nav__panel[data-open="true"] { display: block; }
.nav__panel form { display: flex; gap: .5rem; }
@media (min-width: 900px) { .nav__panel .menu-mobile { display: none; } }
.menu-mobile { list-style: none; margin: var(--space-m) 0 0; padding: 0; display: grid; gap: .1rem; }
.menu-mobile a { display: block; padding: .7rem .25rem; border-bottom: 1px solid var(--line); font-weight: 600; }
@media (min-width: 900px) { .menu-mobile { display: none; } }

/* ---------- 5. Hero ---------- */
.hero { padding-block: var(--space-l); border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; gap: var(--space-l); }
@media (min-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }

.lead { position: relative; }
.lead__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--paper-deep); margin-bottom: var(--space-m); }
.lead__media img { width: 100%; height: 100%; object-fit: cover; }
.lead h1 { font-size: var(--step-4); margin-bottom: .4em; }
.lead h1 a { color: var(--ink); }
.lead h1 a:hover { color: var(--brand); }
.lead__excerpt { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.55; margin-bottom: var(--space-m); }

.lead__side { display: grid; gap: var(--space-m); align-content: start; }
@media (min-width: 900px) {
  .lead__side { border-left: 1px solid var(--line); padding-left: var(--space-l); }
  .lead__media { aspect-ratio: 3 / 2; }
}

/* ---------- 6. Kartu ---------- */
.card { display: grid; gap: var(--space-s); padding-block: var(--space-m); border-bottom: 1px solid var(--line); }
.card:last-child { border-bottom: 0; }
@media (min-width: 560px) {
  .card--row { grid-template-columns: minmax(0, 1fr) 132px; align-items: start; }
  .card--row .card__media { order: 2; aspect-ratio: 4 / 3; }
}
.card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--paper-deep); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.045); }
.card__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; line-height: 1.28; margin: 0 0 .35em; }
.card__title a { color: var(--ink); }
.card__title a:hover { color: var(--brand); }
.card__excerpt { color: var(--ink-muted); font-size: var(--step--1); margin: 0; }
.card--compact { grid-template-columns: 84px minmax(0, 1fr); align-items: start; padding-block: var(--space-s); }
.card--compact .card__title { font-size: 1.02rem; }
.card--compact .card__media { order: 0; aspect-ratio: 1 / 1; }

.grid-cards { display: grid; gap: var(--space-l); }
@media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid-cards .card { border-bottom: 0; padding-block: 0; }

.rank { display: flex; gap: var(--space-s); align-items: flex-start; padding-block: .9rem; border-bottom: 1px solid var(--line); }
.rank:last-child { border-bottom: 0; }
.rank__num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--line-strong); line-height: 1; min-width: 1.6rem; }
.rank__title { font-size: .95rem; font-weight: 600; line-height: 1.4; margin: 0 0 .25rem; }

/* ---------- 7. Bagian beranda ---------- */
.section { padding-block: var(--space-xl); border-bottom: 1px solid var(--line); }
.section--alt { background: var(--paper-soft); }
.section__head { display: flex; align-items: baseline; gap: var(--space-m); margin-bottom: var(--space-l); border-bottom: 2px solid var(--ink); padding-bottom: .5rem; }
.section__title { font-size: var(--step-2); margin: 0; }
.section__more { margin-left: auto; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); white-space: nowrap; }

.split { display: grid; gap: var(--space-xl); }
@media (min-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr) 330px; } }
.split--reverse { grid-template-columns: minmax(0, 1fr) 330px; }

.stream { display: grid; gap: var(--space-m); }
.stream__more { display: block; text-align: center; margin-top: var(--space-l); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .6rem 1.4rem; border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font-size: .84rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-radius: var(--radius); cursor: pointer; transition: all .2s var(--ease);
}
.btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--block { width: 100%; }

/* ---------- 8. Sidebar ---------- */
.sidebar { display: grid; gap: var(--space-l); align-content: start; }

.widget { border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-m); background: var(--paper); }
.widget--soft { background: var(--paper-soft); }
.widget__title { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 var(--space-m); padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.widget__title::before { content: ""; display: block; width: 28px; height: 3px; background: var(--brand); margin-bottom: .6rem; }

.tagcloud { display: flex; flex-wrap: wrap; gap: .4rem; }
.tagcloud a {
  font-size: .76rem; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); background: var(--paper);
}
.tagcloud a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }

.newsletter p { font-size: .88rem; color: var(--ink-muted); }
.newsletter input[type="email"] { width: 100%; margin-bottom: .6rem; }

/* ---------- 9. Halaman artikel ---------- */
.article { padding-block: var(--space-l) var(--space-2xl); }
.article__head { max-width: var(--reading); margin-inline: auto; }
.article__title { font-size: var(--step-4); margin: 0 0 .45em; }
@media (min-width: 900px) { .article__title { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem); } }
.article__chapeau { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.55; margin: 0 0 var(--space-l); }

.byline { display: flex; align-items: center; gap: .8rem; padding-block: var(--space-m); border-block: 1px solid var(--line); margin-bottom: var(--space-l); }
.avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--paper-deep); display: grid; place-items: center; font-weight: 700; color: var(--paper); font-size: .9rem; flex: none; }
.avatar--text { background: var(--navy); }
.byline__who { line-height: 1.35; }
.byline__role { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.byline__name { font-weight: 700; }
.byline__meta { margin-left: auto; text-align: right; font-size: .78rem; color: var(--ink-muted); }

.article__figure { margin: 0 0 var(--space-l); }
.article__figure img { width: 100%; border-radius: var(--radius); }
.article__figure figcaption { font-size: .8rem; color: var(--ink-muted); padding-top: .5rem; border-bottom: 1px solid var(--line); }

.layout-article { display: grid; gap: var(--space-xl); }
@media (min-width: 1000px) { .layout-article { grid-template-columns: minmax(0, 1fr) 430px; } }
.article__body { max-width: var(--reading); margin-inline: auto; }
.article__body > p:first-of-type::first-letter {
  float: left; font-family: var(--font-display); font-size: 3.4rem; line-height: .82;
  padding-right: .1em; margin-bottom: .05em; color: var(--brand); font-weight: 800;
}
.article__body h2 { margin-top: 1.6em; }
.article__body h3 { margin-top: 1.5em; color: var(--navy); }
.article__body blockquote {
  margin: var(--space-l) 0; padding: var(--space-m) var(--space-l); background: var(--paper-soft);
  border-left: 3px solid var(--brand); font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45;
}
.article__body blockquote p:last-child { margin-bottom: 0; }
.article__body img { border-radius: var(--radius); margin-inline: auto; }
.article__body a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.article__body table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.article__body th, .article__body td { border: 1px solid var(--line); padding: .6rem .7rem; text-align: left; }
.article__body th { background: var(--paper-soft); }
.article__body iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }

.keypoints { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius); padding: var(--space-m); margin-bottom: var(--space-l); background: var(--paper-soft); }
.keypoints h2 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-body); font-weight: 800; margin-bottom: .7rem; }
.keypoints ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }

.share { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: var(--space-l); align-items: center; }
.share__label { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-right: .3rem; }
.share a, .share button {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600;
  padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); cursor: pointer; color: var(--ink-soft);
}
.share--icons a.share__btn, .share--icons button.share__btn { padding: 0; }
.share--icons a.share__btn svg, .share--icons button.share__btn svg { margin: 0; }
.share a:hover, .share button:hover { border-color: var(--ink); color: var(--ink); }

.article__footer { max-width: var(--reading); margin-inline: auto; padding-top: var(--space-m); }
.pager { display: grid; gap: var(--space-s); margin-block: var(--space-xl) 0; }
@media (min-width: 640px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a { display: block; border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-m); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.pager a:hover { border-color: var(--brand); box-shadow: var(--shadow-m); }
.pager__label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); display: block; margin-bottom: .35rem; }
.pager__title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
.pager a:last-child { text-align: right; }

.page-split { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-block: var(--space-l); flex-wrap: wrap; }
.pagination { display: flex; justify-content: center; gap: .35rem; flex-wrap: wrap; margin-block: var(--space-xl); }
.pagination a, .pagination span {
  min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding: .4rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius); font-size: .88rem; font-weight: 600;
}
.pagination [aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination a:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- 10. Iklan (CLS dijaga) ---------- */
/* Tanpa label teks: unit AdSense sudah jelas berbeda dari konten (kebijakan
   penempatan Google), pemisahan dijaga jarak 2rem yang konsisten. */
.ad { display: block; margin-block: var(--space-l); min-height: 118px; text-align: center; overflow: hidden; }
.ad--leaderboard { min-height: 132px; }
.ad--rail { min-height: 600px; background: var(--paper-soft); border: 1px dashed var(--line); border-radius: var(--radius); padding: .3rem; }
.ad--in-feed { min-height: 250px; background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: .3rem; }
.ad-anchor { display: none; }
@media (max-width: 767px) {
  .ad-anchor.is-active {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--paper); border-top: 1px solid var(--line); box-shadow: var(--shadow-l); padding: .3rem 0 0;
  }
  body:has(.ad-anchor.is-active) { padding-bottom: 120px; }
}

/* ---------- 11. Halaman istilah & pencarian ---------- */
.page-head { padding-block: var(--space-l); border-bottom: 1px solid var(--line); background: var(--paper-soft); }
.page-head__title { margin: 0 0 .35rem; }
.page-head__intro { color: var(--ink-soft); max-width: 62ch; margin: 0; }
.results-count { font-size: .85rem; color: var(--ink-muted); margin: var(--space-m) 0 0; }
.empty { text-align: center; padding-block: var(--space-2xl); border: 1px dashed var(--line); border-radius: var(--radius-l); }
.empty h2 { margin-bottom: .4rem; }

.search-form { display: flex; gap: .5rem; }
input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], select, textarea {
  font: inherit; width: 100%; padding: .62rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

/* ---------- 12. Footer ---------- */
.footer { background: var(--navy); color: #c8d3e2; padding-block: var(--space-2xl) var(--space-l); margin-top: var(--space-2xl); }
.footer a { color: #c8d3e2; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: var(--space-l); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); } }
.footer h3 { font-family: var(--font-body); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: var(--space-m); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .9rem; }
.footer__brand { font-family: var(--font-display); font-size: 1.5rem; color: #fff; margin-bottom: .6rem; }
.footer__note { font-size: .85rem; max-width: 42ch; }
.footer__bottom {
  margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; font-size: .8rem; color: #94a6bd;
}
.footer__social { display: flex; gap: .5rem; margin-left: auto; }
.footer__social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; }

/* ---------- 13. Utilitas ---------- */
.badge { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .5rem; border-radius: var(--radius); background: var(--brand); color: #fff; }
.badge--live { background: var(--success); }
.badge--soft { background: var(--paper-deep); color: var(--ink-soft); }
.progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--brand); width: 0; z-index: 120; transition: width .08s linear; }
.breadcrumbs { font-size: .78rem; color: var(--ink-muted); padding-block: var(--space-s); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .35rem; color: var(--line-strong); }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs [aria-current="page"] { color: var(--ink-soft); }
.notice { padding: .8rem 1rem; border-radius: var(--radius); background: var(--brand-tint); border: 1px solid #f0cfcb; font-size: .85rem; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

@media print {
  .topbar, .breaking, .masthead, .nav, .sidebar, .ad, .share, .footer, .progress, .quicksearch { display: none !important; }
  .layout-article { grid-template-columns: 1fr; }
  body { font-size: 12pt; }
}

/* =====================================================================
   Penguatan visual 2026 — beranda, rubrik, dan halaman baca.
   Lapisan ini menyempurnakan komponen dasar tanpa mengubah struktur.
   ===================================================================== */

/* ---------- kartu: konsistensi rasio & susunan ---------- */
.card { grid-template-columns: minmax(0, 1fr); align-items: start; }
.card__text { min-width: 0; }
.card__title { letter-spacing: -.018em; }
.card__excerpt { line-height: 1.55; }
.card--row { grid-template-columns: minmax(0, 1fr) 168px; gap: var(--space-m); }
.card--row .card__media { order: 2; aspect-ratio: 16 / 9; }
.card--row .card__title { font-size: 1.2rem; line-height: 1.3; }
.card--plain { display: grid; grid-template-columns: minmax(0, 1fr); }
.card--plain .card__media { order: -1; aspect-ratio: 16 / 9; margin-bottom: .6rem; }
.card--plain .card__title { font-size: var(--step-1); }
.card--plain .card__excerpt { margin-bottom: .5rem; }
.card--compact { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-s); }
.card--compact .card__media { aspect-ratio: 4 / 3; border-radius: 4px; }
.card--compact .card__title { font-size: .98rem; margin-bottom: .3em; }
.card--compact .kicker { margin-bottom: .2rem; font-size: .64rem; }
.card--compact .meta { font-size: .72rem; }
.card__media { border-radius: 6px; }
.card__media img { transition: transform .55s var(--ease); }
a.kicker:hover { color: var(--brand-dark); }

/* ---------- hero beranda ---------- */
.hero { padding-block: var(--space-xl) var(--space-l); background: linear-gradient(180deg, #fff 0%, #fbfbfc 100%); }
.hero__grid { align-items: start; }
.lead__media { position: relative; border-radius: 8px; box-shadow: var(--shadow-m); }
@media (min-width: 900px) { .hero .lead__media { aspect-ratio: 16 / 9; } }
.lead__media::after {
  position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(180deg, transparent, rgba(16, 22, 30, .45));
  content: ""; pointer-events: none;
}
.lead__media img { transition: transform .6s var(--ease); }
.lead:hover .lead__media img { transform: scale(1.025); }
.lead__badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: .3rem .6rem; border-radius: 4px;
  background: rgba(23, 41, 63, .82); backdrop-filter: blur(6px);
  color: #fff; font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
}
.lead h1 { font-size: clamp(2rem, 1.55rem + 2vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em; }
.lead__excerpt { max-width: 58ch; }

.lead__side { gap: 0; }
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: .7rem; border-bottom: 2px solid var(--ink); }
.side-head__label { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.side-head__count { color: var(--ink-muted); font-size: .72rem; }
.side-story { display: grid; grid-template-columns: 26px minmax(0, 1fr) 78px; gap: 10px; align-items: start; padding-block: .85rem; border-bottom: 1px solid var(--line); }
.side-story:last-child { border-bottom: 0; }
.side-story__rank { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--line-strong); line-height: 1.1; }
.side-story__body { min-width: 0; }
.side-story__title { margin: 0 0 .3rem; font-size: 1rem; line-height: 1.32; letter-spacing: -.012em; }
.side-story__title a { color: var(--ink); }
.side-story__title a:hover { color: var(--brand); }
.side-story .kicker { margin-bottom: .18rem; font-size: .62rem; }
.side-story .meta { font-size: .71rem; gap: .35rem; }
.side-story__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--paper-deep); }
.side-story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.side-story:hover .side-story__media img { transform: scale(1.06); }

/* ---------- judul bagian & blok rubrik ---------- */
.section__head { border-bottom-width: 1px; border-bottom-color: var(--line-strong); }
.section__tick { display: inline-block; width: 9px; height: 9px; margin-right: .55rem; border-radius: 3px; vertical-align: middle; }
.section--block { background: #fff; }
.block { display: grid; gap: var(--space-l); }
@media (min-width: 900px) { .block { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start; } }
.block__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; margin-bottom: var(--space-s); background: var(--paper-deep); }
.block__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.block__lead:hover .block__media img { transform: scale(1.03); }
.block__title { font-size: var(--step-2); line-height: 1.2; margin-bottom: .4em; }
.block__list { border-top: 1px solid var(--line); }
.block__list .card { padding-block: .8rem; }
.block__list .card:last-child { border-bottom: 0; }

/* ---------- kepala rubrik / topik / penulis ---------- */
.page-head--term {
  padding-block: var(--space-s) var(--space-xl);
  background: linear-gradient(180deg, #fff 0%, #f7f8fa 100%);
  border-bottom: 1px solid var(--line);
}
.page-head--term .breadcrumbs { padding-block: .25rem .75rem; }
.term-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-l); }
.term-head__text { max-width: 70ch; }
.term-head__text .kicker { margin-bottom: .5rem; }
.page-head--term .page-head__title { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem); letter-spacing: -.03em; line-height: 1.1; margin-bottom: .5rem; }
.page-head--term .page-head__intro { max-width: 64ch; color: var(--ink-soft); }
.term-head__meta { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; color: var(--ink-muted); font-size: .82rem; }
.term-head__meta strong { color: var(--ink); }
.term-head__mark {
  display: grid; place-items: center; width: 88px; height: 88px; flex: none;
  border-radius: 20px; background: color-mix(in srgb, var(--c, #a8261f) 10%, #fff);
  color: var(--c, #a8261f); font-family: var(--font-display); font-size: 38px; font-weight: 800;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #a8261f) 18%, #fff);
}
.term-profile { display: flex; align-items: center; gap: var(--space-m); }
.term-profile .avatar { width: 66px; height: 66px; font-size: 1.25rem; }
.term-social { display: flex; gap: .4rem; margin-top: .8rem; flex-wrap: wrap; }
.term-social a { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-size: .74rem; font-weight: 600; color: var(--ink-soft); }
.term-social a:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- berita unggulan di rubrik & arsip ---------- */
.section--term { padding-top: var(--space-l); }
.feature { display: grid; gap: var(--space-m); padding-bottom: var(--space-l); margin-bottom: var(--space-l); border-bottom: 1px solid var(--line); }
@media (min-width: 820px) {
  .feature { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: var(--space-l); align-items: center; }
}
.feature__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--paper-deep); box-shadow: var(--shadow-s); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.feature:hover .feature__media img { transform: scale(1.03); }
.feature__title { font-size: var(--step-3); line-height: 1.15; letter-spacing: -.025em; margin: 0 0 .45em; }
.feature__excerpt { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.6; margin-bottom: var(--space-s); }
.term-grid { gap: var(--space-l) var(--space-m); }
.term-grid .card { padding-block: 0; border-bottom: 0; }
.term-grid .card__title { font-size: 1.16rem; }

/* ---------- halaman baca ---------- */
.article { padding-block: var(--space-m) var(--space-2xl); }
.article__head { max-width: var(--reading); margin-inline: auto; }
.article__kicker { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .55rem; }
.article__kicker .kicker { margin: 0; }
.article__kicker-note { color: var(--ink-muted); font-size: .78rem; }
.article__title { font-size: clamp(2rem, 1.55rem + 2.2vw, 3.15rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: .5em; }
.article__chapeau { font-size: clamp(1.05rem, 1rem + .3vw, 1.28rem); line-height: 1.55; color: var(--ink-soft); margin-bottom: var(--space-l); }
.article__meta {
  display: grid; gap: var(--space-s);
  max-width: var(--reading); margin: 0 auto var(--space-l);
   border-block: 1px solid var(--line);
}
.article__meta .byline { padding: 0; border: 0; margin: 0; flex-wrap: nowrap; }
.article__meta .byline__who { flex: 1; min-width: 0; }
.article__meta .byline__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.article__meta .byline__meta { flex: none; max-width: 62%; }
.share--top { margin: 0; justify-content: flex-start; }
.share--top a, .share--top button { padding: .42rem .7rem; font-size: .74rem; }
.byline__meta { line-height: 1.5; }
.article__figure { max-width: var(--reading); margin-inline: auto; }
.article__figure img { border-radius: 6px; box-shadow: var(--shadow-s); }
.article__figure figcaption { border-bottom: 0; padding-top: .6rem; }
.article__body { font-size: clamp(1.02rem, 1rem + .18vw, 1.12rem); line-height: 1.8; color: #1d222b; }
.article__body > p:first-of-type::first-letter { font-size: 3.8rem; line-height: .78; }
.article__body h2 { font-size: var(--step-2); margin-top: 1.8em; letter-spacing: -.02em; }
.article__body h3 { font-size: var(--step-1); margin-top: 1.6em; }
.article__body blockquote { border-radius: 0 8px 8px 0; }
.keypoints { border-radius: 8px; background: linear-gradient(180deg, #fbfbfc, #f6f7f9); }
.keypoints h2 { color: var(--brand); }
.author-box { display: flex; gap: var(--space-m); align-items: flex-start; padding: var(--space-m); border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(180deg, #fbfbfc, #f6f7f9); margin-bottom: var(--space-l); }
.author-box .avatar--lg { width: 64px; height: 64px; font-size: 1.25rem; }
.author-box__body { min-width: 0; }
.author-box__name { font-size: var(--step-1); margin: .15rem 0 .35rem; }
.author-box p { margin: 0 0 .55rem; color: var(--ink-muted); font-size: .9rem; line-height: 1.6; }
.author-box__link { font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--brand); }
.article__tags { display: flex; align-items: flex-start; gap: .8rem; flex-wrap: wrap; margin-bottom: var(--space-l); }
.article__tags-label { padding-top: .3rem; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.article__tags .tagcloud a { font-size: .74rem; }
.pager a { background: #fff; }
.pager a:hover { transform: translateY(-1px); }

/* ---------- penyesuaian responsif ---------- */
@media (max-width: 899px) {
  .term-head__mark { display: none; }
  .side-story { grid-template-columns: 22px minmax(0, 1fr) 68px; }
  .side-story__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 719px) {
  .hero { padding-block: var(--space-l) var(--space-m); }
  .lead h1 { font-size: clamp(1.75rem, 1.3rem + 3vw, 2.4rem); }
  .lead__excerpt { font-size: 1rem; }
  .card--row { grid-template-columns: minmax(0, 1fr) 108px; }
  .card--row .card__media { order: 2; aspect-ratio: 4 / 3; }
  .card--row .card__title { font-size: 1.02rem; }
  .card--row .card__excerpt { display: none; }
  .article__meta { align-items: flex-start; }
  .share--top { width: 100%; justify-content: flex-start; }
  .author-box { flex-direction: column; }
  .term-profile { align-items: flex-start; }
  .term-grid { grid-template-columns: minmax(0, 1fr); }
  .term-grid .card { border-bottom: 1px solid var(--line); padding-block: var(--space-m); }
  .term-grid .card:last-child { border-bottom: 0; }
  .feature__title { font-size: var(--step-2); }
}

/* =====================================================================
   Beranda 2026 — tata letak majalah digital: kartu utama tumpang tindih,
   daftar pilihan bernomor, strip terpopuler, dan rubrik bergaya bento.
   ===================================================================== */
.home { background: #fff; }
.home .container { position: relative; }

/* ---------- hero ---------- */
.home-hero {
  position: relative;
  padding-block: var(--space-l) var(--space-xl);
  background:
    radial-gradient(900px 300px at 85% -10%, rgba(168, 38, 31, .06), transparent 65%),
    linear-gradient(180deg, #fbfbfc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}
.home-hero__grid { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 960px) { .home-hero__grid { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: var(--space-xl); } }

/* ---------- slider berita utama ---------- */
.hero-slider { position: relative; min-width: 0; }
.hero-slider__track {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: 12px;
  outline: none;
  -webkit-overflow-scrolling: touch;
}
.hero-slider__track::-webkit-scrollbar { display: none; }
.hero-slider__track:focus-visible { box-shadow: 0 0 0 3px var(--brand-tint, rgba(168, 38, 31, .25)); }
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  opacity: .38;
  transform: scale(.985);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hero-slide__num {
  position: absolute; right: 14px; bottom: 12px; z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(15, 17, 21, .55);
  color: #fff;
  font: 700 .68rem/1.4 var(--font-mono, monospace);
  letter-spacing: .08em;
  backdrop-filter: blur(4px);
}
.hero-slider__nav {
  position: absolute; top: 50%; z-index: 3;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  margin-top: -34px;
  border: 0; border-radius: 999px;
  background: rgba(15, 17, 21, .45);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
  backdrop-filter: blur(6px);
}
.hero-slider__nav--prev { left: 12px; }
.hero-slider__nav--next { right: 12px; }
.hero-slider:hover .hero-slider__nav,
.hero-slider:focus-within .hero-slider__nav { opacity: 1; transform: none; }
.hero-slider__nav:hover { background: var(--brand); }
.hero-slider__foot {
  display: flex; align-items: center; gap: .8rem;
  margin-top: .7rem;
}
.hero-slider__counter {
  flex: none;
  color: var(--ink-muted);
  font: 700 .72rem/1.4 var(--font-mono, monospace);
  letter-spacing: .08em;
}
.hero-slider__counter b { color: var(--brand); font-weight: 800; }
.hero-slider__dots { display: flex; flex: 1; justify-content: center; gap: 7px; }
.hero-slider__dot {
  width: 22px; height: 5px;
  padding: 0;
  border: 0; border-radius: 999px;
  background: var(--line-strong, #d5dae2);
  cursor: pointer;
  transition: background .25s var(--ease), width .25s var(--ease);
}
.hero-slider__dot:hover { background: var(--ink-soft, #8b95a3); }
.hero-slider__dot.is-active { width: 34px; background: var(--brand); }
.hero-slider__hint {
  flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink-muted);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slider__track { scroll-behavior: auto; }
  .hero-slide { transition: none; }
}
@media (max-width: 959px) {
  .hero-slider__nav { opacity: 1; transform: none; width: 34px; height: 34px; margin-top: -46px; }
  .hero-slider__nav--prev { left: 8px; }
  .hero-slider__nav--next { right: 8px; }
  .hero-slider__foot { margin-top: .55rem; }
  .hero-slider__hint { display: none; }
}
[data-theme="dark"] .hero-slider__dot { background: rgba(255, 255, 255, .22); }
[data-theme="dark"] .hero-slider__dot.is-active { background: var(--brand); }
[data-theme="dark"] .hero-slider__counter { color: rgba(255, 255, 255, .55); }
[data-theme="dark"] .hero-slider__hint { color: rgba(255, 255, 255, .45); }

.hero-card { position: relative; min-width: 0; }
.hero-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper-deep);
  box-shadow: 0 24px 60px -34px rgba(20, 23, 28, .55);
}
.hero-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.hero-card:hover .hero-card__media img { transform: scale(1.03); }
.hero-card__cat {
  position: absolute; top: 14px; left: 14px;
  padding: .32rem .65rem;
  border-radius: 6px;
  background: rgba(16, 22, 30, .55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: .66rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
}
.hero-card__live {
  position: absolute; top: 14px; right: 14px;
  padding: .32rem .6rem; border-radius: 6px;
  background: var(--brand); color: #fff;
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.hero-card__body {
  position: relative;
  z-index: 2;
  margin: -76px 26px 0;
  padding: 22px 24px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 50px -34px rgba(20, 23, 28, .5);
}
.hero-card__title { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.7rem); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 .45em; }
.hero-card__title a { color: var(--ink); }
.hero-card__title a:hover { color: var(--brand); }
.hero-card__excerpt { margin: 0 0 var(--space-s); color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }

.hero-side { min-width: 0; }
.hero-side__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: .7rem; border-bottom: 2px solid var(--ink);
}
.hero-side__label { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero-side__count { color: var(--ink-muted); font-size: .72rem; }
.hero-list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hero-list__item {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 86px; gap: 12px;
  align-items: start; padding-block: .5rem; border-bottom: 1px solid var(--line);
}
.hero-list__item:last-child { border-bottom: 0; }
.hero-list__rank {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 800;
  color: var(--line-strong); line-height: 1.1; letter-spacing: -.02em;
}
.hero-list__item:first-child .hero-list__rank { color: var(--brand); }
.hero-list__text { min-width: 0; }
.hero-list__title { margin: 0 0 .25rem; font-size: 1rem; line-height: 1.32; letter-spacing: -.012em; }
.hero-list__title a { color: var(--ink); }
.hero-list__title a:hover { color: var(--brand); }
.hero-list .kicker { margin-bottom: .15rem; font-size: .62rem; }
.hero-list .meta { font-size: .71rem; gap: .35rem; }
.hero-list__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 5px; background: var(--paper-deep); }
.hero-list__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.hero-list__item:hover .hero-list__thumb img { transform: scale(1.06); }
.hero-side__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; color: var(--brand); font-size: .78rem; font-weight: 750; letter-spacing: .02em; }
.hero-side__more:hover { gap: .55rem; }

/* ---------- strip terpopuler ---------- */
.home-trend { background: var(--navy); color: #cdd8e6; }
.home-trend__inner { display: flex; align-items: center; gap: var(--space-m); min-height: 52px; overflow: hidden; }
.home-trend__label {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
.home-trend__pulse { width: 7px; height: 7px; border-radius: 50%; background: #e2564c; box-shadow: 0 0 0 4px rgba(226, 86, 76, .18); }
.home-trend__list { display: flex; gap: var(--space-m); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); }
.home-trend__list::-webkit-scrollbar { display: none; }
.home-trend__list a { display: inline-flex; align-items: baseline; gap: .5rem; white-space: nowrap; color: #cdd8e6; font-size: .82rem; }
.home-trend__list a:hover { color: #fff; }
.home-trend__list b { color: #e2564c; font-family: var(--font-display); font-size: .92rem; }

/* ---------- kepala bagian ---------- */
.home-section { padding-block: var(--space-xl); }
.home-section--cat { border-top: 1px solid var(--line); }
.section-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-m); margin-bottom: var(--space-l); padding-bottom: .65rem; border-bottom: 1px solid var(--line-strong); }
.section-bar__main { min-width: 0; }
.section-bar__kicker { display: block; margin-bottom: .25rem; color: var(--brand); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-bar__title { display: flex; align-items: center; gap: .1rem; margin: 0; font-size: var(--step-2); letter-spacing: -.025em; line-height: 1.15; }
.section-bar__tick { display: inline-block; width: 9px; height: 9px; margin-right: .55rem; border-radius: 3px; }
.section-bar__more { flex: none; color: var(--ink-muted); font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.section-bar__more:hover { color: var(--brand); }

/* ---------- feed utama ---------- */
.home-layout { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 1000px) { .home-layout { grid-template-columns: minmax(0, 1fr) 330px; } }
.home-feed { min-width: 0; }
.feed-item {
  display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--space-m);
  padding-block: var(--space-m); border-bottom: 1px solid var(--line);
}
.feed-item:first-child { padding-top: 0; }
.feed-item__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 7px; background: var(--paper-deep); }
.feed-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.feed-item:hover .feed-item__media img { transform: scale(1.05); }
.feed-item__body { min-width: 0; }
.feed-item__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.feed-item__top .kicker { margin: 0; }
.feed-item__top time { color: var(--ink-muted); font-size: .72rem; white-space: nowrap; }
.feed-item__title { margin: .25rem 0 .35rem; font-size: 1.16rem; line-height: 1.3; letter-spacing: -.018em; }
.feed-item__title a { color: var(--ink); }
.feed-item__title a:hover { color: var(--brand); }
.feed-item__excerpt { margin: 0 0 .45rem; color: var(--ink-muted); font-size: .9rem; line-height: 1.55; }
.feed-item__meta { display: flex; align-items: center; gap: .45rem; color: var(--ink-muted); font-size: .74rem; }
.feed-item__author { color: var(--ink-soft); font-weight: 600; }
.feed-item--lead .feed-item__title { font-size: 1.42rem; }
.feed-item--lead .feed-item__excerpt { font-size: .95rem; }

/* ---------- rubrik bento ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); }
.cat-card { min-width: 0; }
.cat-card--lead { grid-column: span 2; }
.cat-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 7px; margin-bottom: .6rem; background: var(--paper-deep); }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.cat-card:hover .cat-card__media img { transform: scale(1.04); }
.cat-card__title { margin: .2rem 0 .35rem; font-size: 1.1rem; line-height: 1.3; letter-spacing: -.018em; }
.cat-card--lead .cat-card__title { font-size: 1.5rem; }
.cat-card__title a { color: var(--ink); }
.cat-card__title a:hover { color: var(--brand); }
.cat-card__excerpt { margin: 0 0 .4rem; color: var(--ink-muted); font-size: .9rem; line-height: 1.55; }
.cat-card .meta { font-size: .74rem; }
.feature--home { margin-bottom: 0; }

/* ---------- ajakan kanal ---------- */
.home-cta { padding-block: 0 var(--space-2xl); }
.home-cta__box {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-l); flex-wrap: wrap;
  padding: clamp(24px, 3vw, 38px);
  border-radius: 16px;
  background:
    radial-gradient(520px 260px at 92% -30%, rgba(226, 86, 76, .3), transparent 65%),
    linear-gradient(120deg, #17293f 0%, #243c5b 70%, #6f2a24 140%);
  color: #d7e1ee;
  box-shadow: 0 30px 70px -40px rgba(23, 41, 63, .8);
}
.home-cta__copy { max-width: 62ch; }
.home-cta__kicker { display: block; margin-bottom: .4rem; color: #f0b8b2; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.home-cta h2 { margin: 0 0 .4rem; color: #fff; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: -.02em; line-height: 1.15; }
.home-cta p { margin: 0; font-size: .92rem; line-height: 1.6; color: #b9c8da; }
.home-cta__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.home-cta__btn { background: #fff; border-color: #fff; color: #17293f; }
.home-cta__btn:hover { background: #f3f5f8; border-color: #f3f5f8; color: #17293f; }
.home-cta__btn.btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
.home-cta__btn.btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

/* ---------- responsif ---------- */
@media (max-width: 959px) {
  .hero-card__body { margin: -54px 18px 0; padding: 18px; }
  .hero-card__title { font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2.2rem); }
}
@media (max-width: 899px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-card--lead { grid-column: span 2; }
}
@media (max-width: 719px) {
  .home-hero { padding-block: var(--space-m) var(--space-l); }
  .hero-card__body { margin: -34px 12px 0; padding: 15px 15px 14px; border-radius: 10px; }
  .hero-card__excerpt { font-size: .94rem; }
  .hero-list__item { grid-template-columns: 24px minmax(0, 1fr) 68px; gap: 9px; }
  .hero-list__title { font-size: .94rem; }
  .home-trend__inner { gap: var(--space-s); }
  .home-trend__list { gap: var(--space-m); }
  .home-section { padding-block: var(--space-l); }
  .feed-item { grid-template-columns: 108px minmax(0, 1fr); gap: 12px; padding-block: var(--space-s); }
  .feed-item--lead { grid-template-columns: minmax(0, 1fr); }
  .feed-item--lead .feed-item__media { margin-bottom: .4rem; }
  .feed-item__title { font-size: 1rem; }
  .feed-item--lead .feed-item__title { font-size: 1.22rem; }
  .feed-item__excerpt { display: none; }
  .feed-item__top time { display: none; }
  .cat-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
  .cat-card--lead { grid-column: auto; }
  .cat-card__title, .cat-card--lead .cat-card__title { font-size: 1.12rem; }
  .home-cta__actions { width: 100%; }
  .home-cta__btn { flex: 1; justify-content: center; }
}

/* =====================================================================
   Topbar, masthead, dan pencarian cerdas — edisi 2026.
   ===================================================================== */

/* ---------- bar utilitas ---------- */
.topbar {
  background: linear-gradient(90deg, #0e1a28 0%, #17293f 62%, #1b2d46 100%);
  border-top: 3px solid var(--brand);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: .78rem;
}
.topbar__inner { display: flex; align-items: center; gap: var(--space-m); min-height: 38px; }
.topbar__date {
  display: inline-flex; align-items: center; gap: .42rem; flex: none;
  color: #9fb0c6; white-space: nowrap; letter-spacing: .02em;
}
.topbar__date svg { opacity: .7; }
.topbar__tagline {
  flex: 1; min-width: 0; overflow: hidden;
  color: #7f93aa; font-size: .67rem; font-weight: 600; letter-spacing: .14em;
  text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap;
}
.topbar__links { display: flex; gap: .85rem; flex: none; }
.topbar__links a { position: relative; color: #c3cede; }
.topbar__links a:hover { color: #fff; }
.topbar__links a + a::before {
  position: absolute; left: -.42rem; top: 50%;
  width: 1px; height: 10px;
  background: rgba(255, 255, 255, .14);
  content: ""; transform: translateY(-50%);
}
@media (max-width: 1099px) { .topbar__tagline { display: none; } }
@media (max-width: 899px) { .topbar__links { margin-left: auto; } }
@media (max-width: 719px) { .topbar__links { display: none; } }

/* ---------- masthead + pencarian utama ---------- */
.masthead { background: var(--paper); border-bottom: 1px solid var(--line); }
.masthead__inner { display: flex; align-items: center; gap: var(--space-m); min-height: 72px; padding-block: .65rem; }
.masthead__tools { display: flex; align-items: center; gap: .55rem; margin-left: auto; width: min(520px, 100%); }
.topsearch {
  position: relative;
  display: flex; align-items: center;
  width: 100%; height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-s);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.topsearch:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(168, 38, 31, .09), var(--shadow-s); }
.topsearch__icon { display: grid; place-items: center; flex: none; padding-inline: 12px 0; color: #8b95a3; }
.topsearch__input {
  flex: 1; min-width: 0; height: 100%;
  padding: 0 .6rem; border: 0; background: none;
  color: var(--ink); font: .88rem/1.4 var(--font-body);
  outline: none;
}
.topsearch__input::-webkit-search-cancel-button { display: none; }
.topsearch__kbd {
  flex: none; margin-right: .5rem; padding: 2px 6px;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--paper-soft); color: var(--ink-muted);
  font: .68rem/1.2 var(--font-mono);
}
.topsearch__submit {
  flex: none; height: 32px; margin-right: 5px; padding: 0 .95rem;
  border: 0; border-radius: 7px;
  background: var(--navy); color: #fff;
  font: 700 .76rem/1 var(--font-body); letter-spacing: .03em;
  cursor: pointer; transition: background .16s var(--ease);
}
.topsearch__submit:hover { background: var(--brand); }
.search-toggle { display: none; }
@media (max-width: 899px) {
  .masthead__inner { min-height: 62px; }
  .masthead__tools { width: auto; }
  .topsearch { display: none; }
  .search-toggle { display: grid; place-items: center; }
}

/* ---------- saran pencarian ---------- */
.topsearch__suggest,
.search-form__suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 90;
  max-height: min(64vh, 430px); overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 28px 60px -26px rgba(20, 23, 28, .38);
  animation: suggest-in .16s var(--ease);
}
@keyframes suggest-in { from { opacity: 0; transform: translateY(-4px); } }
.suggest-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft, var(--line));
  color: #8b95a3; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.suggest-head small { color: var(--ink-muted); font-size: .66rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.suggest-head button {
  border: 0; background: none; padding: 0;
  color: var(--brand); font: 700 .68rem var(--font-body); letter-spacing: 0; text-transform: none;
  cursor: pointer;
}
.suggest-head button:hover { text-decoration: underline; }
.suggest-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--ink); text-decoration: none;
  transition: background .12s;
}
.suggest-item:hover, .suggest-item.is-active { background: var(--paper-soft); color: var(--ink); text-decoration: none; }
.suggest-item__type {
  flex: none; width: 52px; padding: 3px 6px;
  border-radius: 5px;
  background: var(--paper-deep); color: var(--ink-soft);
  font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-align: center; text-transform: uppercase;
}
.suggest-item__type--berita { background: var(--brand-tint); color: var(--brand); }
.suggest-item__type--topik { background: #f2edfb; color: #6444a3; }
.suggest-item__type--rubrik { background: #eef3fa; color: #35659c; }
.suggest-item__type--recent { background: var(--paper-deep); color: var(--ink-muted); }
.suggest-item__body { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 1px; }
.suggest-item__body strong {
  overflow: hidden; color: var(--ink);
  font-size: .86rem; font-weight: 650; line-height: 1.35;
  text-overflow: ellipsis; white-space: nowrap;
}
.suggest-item__body small { overflow: hidden; color: var(--ink-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.suggest-item mark { padding: 0 1px; border-radius: 2px; background: #fdeeb5; color: inherit; }
.suggest-item__arrow { flex: none; color: #c3cad4; font-size: .8rem; opacity: 0; transform: translateX(-3px); transition: opacity .14s, transform .14s; }
.suggest-item:hover .suggest-item__arrow, .suggest-item.is-active .suggest-item__arrow { opacity: 1; transform: none; color: var(--brand); }
.suggest-loading { display: flex; align-items: center; gap: 9px; padding: 16px 12px; color: var(--ink-muted); font-size: .8rem; }
.suggest-spinner { width: 15px; height: 15px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: suggest-spin .7s linear infinite; }
@keyframes suggest-spin { to { transform: rotate(360deg); } }
.suggest-empty { display: grid; gap: 3px; padding: 16px 12px; }
.suggest-empty strong { color: var(--ink-soft); font-size: .84rem; font-weight: 650; }
.suggest-empty span { color: var(--ink-muted); font-size: .74rem; line-height: 1.5; }
.suggest-foot { margin-top: 4px; padding: 8px 10px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: .68rem; }

/* panel pencarian mobile */
.search-form { position: relative; }
.search-form__suggest { top: calc(100% + 6px); }
@media (max-width: 899px) {
  .nav__panel { position: relative; z-index: 70; }
  .nav__panel form { flex-wrap: wrap; }
  .nav__panel form input[type="search"] { flex: 1 1 100%; }
  .nav__panel form .btn { width: 100%; }
  .search-form__suggest { position: static; margin-top: .5rem; box-shadow: none; border-radius: 8px; }
}

/* ---------- judul berita utama: skala lebih tenang ---------- */
.hero-card__body { margin: -64px 24px 0; padding: 20px 22px 18px; }
.hero-card__title {
  font-size: clamp(1.5rem, 1.22rem + 1.05vw, 2.1rem);
  line-height: 1.13;
  letter-spacing: -.024em;
  margin-bottom: .4em;
}
.hero-card__excerpt { font-size: .96rem; line-height: 1.58; }
@media (max-width: 959px) {
  .hero-card__body { margin: -46px 16px 0; padding: 17px 17px 15px; }
}
@media (max-width: 719px) {
  .hero-card__body { margin: -30px 10px 0; padding: 14px 14px 13px; }
  .hero-card__title { font-size: clamp(1.32rem, 1.12rem + 1vw, 1.62rem); line-height: 1.16; }
  .hero-card__excerpt { font-size: .92rem; }
}


/* ---------- pencarian: satu area, tanpa outline ---------- */
.topsearch { border: 0; background: #f2f4f7; box-shadow: none; }
.topsearch:focus-within { border: 0; background: #f2f4f7; box-shadow: none; }
.topsearch__input,
.topsearch__input:focus,
.topsearch__input:focus-visible { outline: 0; box-shadow: none; border: 0; }
.topsearch:focus-within .topsearch__icon { color: var(--brand); }
.topsearch__kbd { border: 0; background: #e9ecf1; }
.topsearch__submit { margin-right: 4px; }

/* masthead mobile: satu kolom pencarian penuh */
@media (max-width: 899px) {
  .masthead__inner { flex-wrap: wrap; gap: .55rem; min-height: 0; padding-block: .7rem; }
  .masthead__tools { width: 100%; margin-left: 0; }
  .topsearch { display: flex; height: 40px; }
  .topsearch__kbd { display: none; }
  .topsearch__submit { height: 30px; padding-inline: .8rem; }
}

/* ---------- hero: judul lebih ringkas ---------- */
.hero-card__body { margin: -90px 22px 0; padding: 17px 20px 15px; }
.hero-card__title {
  font-size: clamp(1.22rem, 1.02rem + .62vw, 1.58rem);
  line-height: 1.17;
  letter-spacing: -.022em;
  margin-bottom: 0;
}
.hero-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .55rem;
  color: var(--ink-muted); font-size: .78rem;
}
.hero-card__meta a { color: var(--ink-soft); font-weight: 600; }
.hero-card__meta a:hover { color: var(--brand); }
.hero-card__excerpt { display: none; }
@media (max-width: 719px) {
  .hero-card__body { margin: -26px 10px 0; padding: 13px 13px 12px; }
  .hero-card__title { font-size: clamp(1.12rem, 1rem + .55vw, 1.3rem); line-height: 1.2; }
  .hero-card__meta { font-size: .72rem; margin-top: .45rem; }
}

/* ---------- thumbnail mengikuti tinggi konten di sebelahnya ---------- */
.feed-item { align-items: stretch; }
.feed-item__media { aspect-ratio: auto; height: 100%; min-height: 104px; }
.feed-item__media img { height: 100%; }
.feature { align-items: stretch; }
.feature__media { aspect-ratio: auto; height: 100%; }
.feature__media img { height: 100%; }
.hero-list__item { align-items: stretch; }
.hero-list__thumb { aspect-ratio: auto; height: 100%; min-height: 58px; }
.hero-list__thumb img { height: 100%; }

@media (max-width: 819px) {
  .feature__media { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 719px) {
  .feed-item--lead .feed-item__media { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .feed-item:not(.feed-item--lead) .feed-item__media { min-height: 70px; }
  .hero-list__thumb { min-height: 48px; }
}

/* =====================================================================
   Navigasi mobile premium — tombol menu & sheet dropdown 2026.
   ===================================================================== */
.nav__burger {
  display: none;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  margin-block: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.nav__burger:hover { border-color: var(--brand); color: var(--brand); }
.nav__burger svg { pointer-events: none; }
body.nav-open .nav__burger { background: var(--navy); border-color: var(--navy); color: #fff; }

/* tombol hanya untuk layar kecil */
@media (min-width: 900px) {
  #menuToggle, .nav__panel, .nav__scrim { display: none !important; }
}

@media (max-width: 899px) {
  body.nav-open { overflow: hidden; }
  .nav__burger { display: inline-grid; }

  .nav__panel {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 80;
    display: block;
    max-height: calc(100dvh - 112px);
    overflow-y: auto;
    padding: 0;
    border-top: 1px solid var(--line);
    border-radius: 0 0 18px 18px;
    background: #fff;
    box-shadow: 0 34px 70px -30px rgba(20, 23, 28, .5);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav__panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .nav__panel-inner { padding: 14px 16px 20px; }

  .nav__scrim {
    position: fixed; inset: 0; z-index: 55;
    margin: 0; padding: 0; border: 0;
    background: rgba(10, 16, 24, .5);
    backdrop-filter: blur(2px);
    animation: menu-dim .2s var(--ease);
  }
  .nav__scrim[hidden] { display: none; }
  @keyframes menu-dim { from { opacity: 0; } }

  .menu-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .menu-sheet__eyebrow { display: block; color: var(--ink-muted); font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
  .menu-sheet__title { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
  .menu-sheet__close {
    display: grid; place-items: center;
    width: 38px; height: 38px; flex: none;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--paper-soft); color: var(--ink-soft);
    cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  }
  .menu-sheet__close:hover { background: var(--brand-tint); border-color: #f0cfcb; color: var(--brand); }

  .menu-sheet__section { margin-top: 18px; }
  .menu-sheet__label { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: var(--ink-muted); font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
  .menu-sheet__label::after { flex: 1; height: 1px; background: var(--line); content: ""; }

  .menu-sheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
  .menu-sheet__grid a {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 11px;
    border: 1px solid var(--line); border-radius: 10px;
    background: #fff; color: var(--ink-soft);
    font-size: .85rem; font-weight: 600;
    transition: background .15s, border-color .15s, color .15s;
  }
  .menu-sheet__grid a:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
  .menu-sheet__grid a[aria-current="page"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
  .menu-sheet__grid em { margin-left: auto; padding: 1px 6px; border-radius: 99px; background: var(--paper-deep); color: var(--ink-muted); font-size: .6rem; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
  .menu-sheet__grid svg { flex: none; color: #b7c0cc; }
  .menu-sheet__grid a:hover svg, .menu-sheet__grid a[aria-current="page"] svg { color: currentColor; }

  .menu-sheet__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
  .menu-sheet__list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .88rem; font-weight: 550; }
  .menu-sheet__list a::after { color: #b7c0cc; font-size: 1.05rem; line-height: 1; content: "›"; }
  .menu-sheet__list a:hover { color: var(--brand); }
  .menu-sheet__list a:hover::after { color: var(--brand); }

  .menu-sheet__cta { display: grid; gap: 7px; margin-top: 18px; }
  .menu-sheet__cta .btn { min-height: 42px; font-size: .78rem; letter-spacing: .05em; }
  .menu-sheet__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: .68rem; }
}

/* =====================================================================
   Halaman baca 2026 — alat baca, daftar isi, dan tipografi yang tenang.
   ===================================================================== */
.article__main { min-width: 0; }
.article__head { max-width: var(--reading); margin-inline: auto; }
.article__meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); flex-wrap: wrap;
  max-width: var(--reading); margin: 0 auto var(--space-l);
    border-block: 1px solid var(--line);
}
.article__meta .byline { flex: 1; min-width: 240px; padding: 0; border: 0; margin: 0; flex-wrap: nowrap; }
.article__meta .byline__who { flex: 1; min-width: 0; }
.article__tools { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.share--icons { display: flex; align-items: center; gap: 6px; margin: 0; }
.share--icons .share__label { margin-right: 2px; color: var(--ink-muted); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.share__btn {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--ink-soft);
  cursor: pointer; text-decoration: none;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.share__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.share__btn:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); transform: translateY(-1px); text-decoration: none; }
.share__btn.is-copied { border-color: var(--success); background: var(--success-tint); color: var(--success); }

.reader-size {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--paper-soft);
}
.reader-size button {
  min-width: 30px; height: 28px;
  border: 0; border-radius: 7px; background: none;
  color: var(--ink-soft); font: 650 .78rem/1 var(--font-body);
  cursor: pointer; transition: background .14s, color .14s, box-shadow .14s;
}
.reader-size button:hover { color: var(--brand); }
.reader-size button.is-on { background: #fff; color: var(--brand); box-shadow: var(--shadow-s); }

.article { --reading-scale: 1; }
.article__body { font-size: calc(clamp(1.02rem, 1rem + .18vw, 1.12rem) * var(--reading-scale, 1)); }
.article__body h2, .article__body h3 { scroll-margin-top: calc(var(--header-h) + 22px); }

.article__figure--wide { max-width: 100%; margin-bottom: var(--space-l); }
.article__figure--wide img { width: 100%; }

/* daftar isi */
.widget--toc { padding-bottom: var(--space-m); }
.toc { display: grid; gap: 2px; max-height: 48vh; overflow-y: auto; margin: 0; padding: 0; list-style: none; scrollbar-width: thin; }
.toc__item a {
  display: block;
  padding: 7px 9px 7px 11px;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
  font-size: .82rem; line-height: 1.4;
  text-decoration: none;
  transition: border-color .14s, color .14s, background .14s;
}
.toc__item--h3 a { padding-left: 22px; font-size: .78rem; color: var(--ink-muted); }
.toc__item a:hover, .toc__item a.is-active {
  border-left-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand);
  border-radius: 0 6px 6px 0;
}

.toc-mobile { display: none; margin-bottom: var(--space-l); border: 1px solid var(--line); border-radius: 10px; background: var(--paper-soft); }
.toc-mobile summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
  cursor: pointer; list-style: none;
}
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::after { color: var(--ink-muted); font-size: .9rem; content: "＋"; }
.toc-mobile[open] summary::after { content: "−"; }
.toc-mobile summary span { margin-left: auto; color: var(--ink-muted); font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .02em; }
.toc-mobile ol { display: grid; gap: 2px; margin: 0; padding: 0 14px 14px; list-style: none; }
.toc-mobile .toc__item a { border-left-color: var(--line-strong); }

.article__top { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--space-l); color: var(--ink-muted); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.article__top:hover { color: var(--brand); }

@media (max-width: 999px) {
  .toc-mobile { display: block; }
  .article__figure--wide { margin-inline: 0; }
}
@media (max-width: 719px) {
  .article__meta { align-items: flex-start; gap: .7rem; }
  .article__tools { width: 100%; justify-content: space-between; }
  .share--icons { flex-wrap: wrap; }
  .share--icons .share__label { display: none; }
  .share__btn { width: 33px; height: 33px; }
  .article__body { font-size: calc(1rem * var(--reading-scale, 1)); }
}

/* ---------- baris byline & alat baca: dua baris rapi ---------- */
.article__meta { display: flex; flex-direction: column; align-items: stretch; gap: .55rem; }
.article__meta .byline { width: 100%; flex-wrap: nowrap; }
.article__meta .byline__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article__meta .byline__meta { flex: none; max-width: 54%; margin-left: auto; text-align: right; line-height: 1.5; white-space: nowrap; }
.article__meta .article__tools { width: 100%; justify-content: space-between; padding-top: .55rem; border-top: 1px dashed var(--line); }
.share__btn svg { stroke-width: 1.9; }
@media (max-width: 719px) {
  .article__meta .byline { flex-wrap: wrap; row-gap: .2rem; }
  .article__meta .byline__meta { max-width: none; flex-basis: 100%; margin-left: 0; text-align: left; white-space: normal; }
  .article__meta .byline__meta div { display: inline; }
  .article__meta .byline__meta div + div::before { content: " · "; }
}

/* ikon bagikan: pastikan tidak terhimpit padding warisan */
.share .share__btn { padding: 0; }
.share .share__btn svg { width: 15px; height: 15px; flex: none; }

@media (max-width: 999px) { .widget--toc { display: none; } }

/* =====================================================================
   Halaman baca 2026 — tahap 2: layout premium & pembersihan mobile.
   ===================================================================== */
.article { padding-block: var(--space-s) var(--space-2xl); }
.article__main { min-width: 0; }

/* ---------- kepala artikel ---------- */
.article__head { max-width: var(--reading); margin-inline: auto; }
.article__kicker { gap: .5rem; }
.article__title {
  font-size: clamp(1.72rem, 1.42rem + 1.35vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  margin-bottom: .45em;
}
.article__chapeau { font-size: clamp(1.02rem, .99rem + .22vw, 1.2rem); line-height: 1.58; color: var(--ink-soft); }

/* ---------- kartu oleh ---------- */
.article__meta {
  gap: 0;
  max-width: var(--reading);
  margin: 0 auto var(--space-l);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfbfc, #fff);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.article__meta .byline {
  display: flex; align-items: center; gap: .75rem;
  flex: none; min-width: 0; width: 100%;
  padding: 13px 16px; border: 0; margin: 0;
  flex-wrap: nowrap;
}
.article__meta .byline .avatar { width: 42px; height: 42px; }
.article__meta .byline__who { flex: 1; min-width: 0; }
.article__meta .byline__role { font-size: .6rem; }
.article__meta .byline__name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .92rem;
}
.article__meta .byline__meta {
  flex: none; margin-left: auto; max-width: none;
  padding-left: 14px; border-left: 1px solid var(--line);
  text-align: right; line-height: 1.45; font-size: .74rem; white-space: nowrap;
}
.article__meta .byline__meta div { white-space: nowrap; }
.article__tools {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px 10px 16px;
  background: var(--paper-soft);
  border-top: 1px solid var(--line);
}
.share--icons .share__label { margin-right: 1px; }
.reader-size { background: #fff; border-color: var(--line); }
.reader-size button.is-on { background: var(--paper-soft); }

/* ---------- gambar lebar ---------- */
.article__figure--wide {
  max-width: var(--reading);
  margin-inline: auto;
  margin-bottom: var(--space-l);
}
.article__figure--wide img { border-radius: 10px; }

/* ---------- daftar isi ---------- */
.widget--toc {
  margin-bottom: 0;
}
.widget--toc .toc { max-height: 52vh; padding-right: 2px; }

/* ---------- daftar isi mobile (kartu lipat) ---------- */
.toc-mobile {
  margin-bottom: var(--space-l);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-s);
}
.toc-mobile summary { padding: 13px 15px; background: var(--paper-soft); }
.toc-mobile[open] summary { border-bottom: 1px solid var(--line); }
.toc-mobile ol { padding: 10px 15px 14px; }

/* ---------- tipografi & penyesuaian blok ---------- */
.article__body > .ad:first-child { margin-top: 0; }
.article__body .ad { margin-block: var(--space-l); }
.article__footer { max-width: var(--reading); margin-inline: auto; }
.author-box { border-radius: 12px; }
.pager a { border-radius: 10px; }

.article__top { margin-top: var(--space-l); }

/* ---------- mobile: nol tumpang tindih ---------- */
@media (max-width: 999px) {
  .layout-article { gap: var(--space-l); }
  .article__figure--wide { margin-inline: 0; }
  .article__figure--wide img { border-radius: 8px; }
  .toc-mobile { display: block; }
}

@media (max-width: 719px) {
  .article { padding-block: .4rem var(--space-xl); }
  .article__kicker { gap: .45rem; }
  .article__kicker .kicker { font-size: .68rem; }
  .article__title {
    font-size: clamp(1.46rem, 1.22rem + 1.6vw, 1.9rem);
    line-height: 1.16;
    letter-spacing: -.022em;
    margin-bottom: .5em;
  }
  .article__chapeau { font-size: 1rem; line-height: 1.6; margin-bottom: var(--space-m); }

  .article__meta { margin-bottom: var(--space-m); border-radius: 11px; }
  .article__meta .byline { align-items: flex-start; gap: .6rem; padding: 11px 12px; }
  .article__meta .byline .avatar { width: 36px; height: 36px; }
  .article__meta .byline__role { font-size: .55rem; }
  .article__meta .byline__name { font-size: .84rem; white-space: normal; }
  .article__meta .byline__meta {
    flex: none;
    width: auto;
    max-width: 44%;
    padding-left: 10px;
    font-size: .63rem;
    line-height: 1.4;
    text-align: right;
  }
  .article__meta .byline__meta div { display: block; white-space: normal; }
  .article__meta .byline__meta div + div { margin-left: 0; }
  .article__meta .byline__meta div + div::before { content: ""; }
  .article__tools { padding: 8px 9px; gap: 8px; }
  .share--icons { gap: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .share--icons::-webkit-scrollbar { display: none; }
  .share--icons .share__label { display: none; }
  .share__btn { width: 30px; height: 30px; }
  .share__btn svg { width: 13.5px; height: 13.5px; }
  .reader-size button { min-width: 26px; height: 24px; font-size: .7rem; }

  .keypoints { margin-bottom: var(--space-m); padding: 13px 14px; }
  .keypoints h2 { margin-bottom: .5rem; }
  .keypoints ul { font-size: .86rem; }

  .toc-mobile summary { padding: 11px 13px; font-size: .95rem; }
  .toc-mobile ol { padding: 8px 13px 12px; }

  .article__body { font-size: calc(1.01rem * var(--reading-scale, 1)); line-height: 1.75; }
  .article__body > p:first-of-type::first-letter { font-size: 3.1rem; line-height: .8; }
  .article__body h2 { margin-top: 1.55em; }
  .article__body h3 { margin-top: 1.4em; }
  .article__body blockquote { margin-block: var(--space-m); padding: var(--space-s) var(--space-m); font-size: 1rem; }
  .article__body table { font-size: .82rem; }
  .article__body .table-scroll { margin-block: var(--space-m); }

  .article__footer { padding-top: 0; }
  .author-box { padding: 13px; gap: 12px; border-radius: 10px; align-items: center; }
  .author-box .avatar--lg { width: 46px; height: 46px; font-size: 1rem; }
  .article__tags { margin-bottom: var(--space-m); }
  .pager a { padding: .9rem 1rem; }
  .page-split { margin-block: var(--space-m); }
  .article__top { margin-top: var(--space-m); }
}


/* ---------- jarak breadcrumb ke kepala artikel ---------- */
.article .breadcrumbs { padding-block: .35rem .95rem; }
.article .breadcrumbs + .layout-article { margin-top: .6rem; }

/* ---------- keypoints & ad: selebar konten artikel ---------- */
.keypoints { max-width: 100%; }
.article__main > .keypoints,
.article__main .keypoints { max-width: none; }
.toc-mobile { max-width: 100%; }
.article__main .keypoints,
.article__main > .toc-mobile { width: 100%; }

/* ---------- ikon bagikan presisi di tengah ---------- */
.share--icons .share__btn { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.share__btn svg { display: block; margin: 0 auto; width: 15px; height: 15px; transform: translate(-0.5px, -0.5px); }
.share__btn .fill-icon { fill: currentColor; stroke: none; transform: none; }
@media (min-resolution: 2dppx) {
  .share__btn svg { transform: none; }
}

/* ---------- seluruh sidebar sticky seragam ---------- */
.sidebar { --st: calc(var(--header-h) + 12px); }

.sidebar__inner {
  position: sticky; top: var(--st);
  max-height: 100%;
  /*overflow-y: auto;*/
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  padding-right: 2px;
  display: grid; gap: var(--space-l);
}
.sidebar__inner:hover { scrollbar-color: #c9d1dc transparent; }
.sidebar__inner::-webkit-scrollbar { width: 6px; }
.sidebar__inner::-webkit-scrollbar-track { background: transparent; }
.sidebar__inner::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.sidebar__inner:hover::-webkit-scrollbar-thumb { background: #c9d1dc; }


/* prebody: ringkasan & daftar isi selebar kolom artikel */
.article__prebody { display: grid; gap: var(--space-m); margin-bottom: var(--space-l); }
.article__prebody { max-width: var(--reading); margin-inline: auto; }
@media (max-width: 999px) { .article__prebody { max-width: 100%; } }
.article__prebody .keypoints,
.article__prebody .toc-mobile { max-width: 100%; margin-bottom: 0; }

/* ---------- kartu meta: baris alat rapi & penuh ---------- */
.article__meta .article__tools {
  padding: 10px 16px 12px;
  gap: 10px;
  align-items: center;
}
.article__meta .article__tools .share { flex: 1; min-width: 0; margin: 0; gap: 7px; }
.article__meta .article__tools .share .share__label {
  width: auto; padding-top: 0;
  color: var(--ink-muted); font-size: .6rem; font-weight: 800; letter-spacing: .12em;
  white-space: nowrap;
}
.article__meta .article__tools .reader-size { margin-left: auto; background: #fff; border-color: var(--line); }
.article__meta .article__tools .reader-size button.is-on { background: var(--paper-soft); }
.article__meta .byline { padding: 14px 16px; gap: .8rem; }
.article__meta .byline__meta { gap: 2px; }
.article__meta .byline__meta div { color: var(--ink-muted); }
@media (max-width: 719px) {
  .article__meta .article__tools { padding: 9px 12px 10px; gap: 8px; }
  .article__meta .article__tools .share { gap: 5px; }
  .article__meta .article__tools .share .share__label { display: none; }
  .article__meta .article__tools .reader-size { margin-left: auto; }
}

/* =====================================================================
   Sidebar 2026 — kartu modern, peringkat bergaya, kanal resmi.
   ===================================================================== */
.sidebar { gap: var(--space-m); }
.sidebar__inner { gap: var(--space-l); }
.widget {
  padding: var(--space-m) 16px 16px;
  border-radius: 12px;
  box-shadow: var(--shadow-s);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.widget:hover { box-shadow: var(--shadow-m); border-color: #d6dce4; }

.widget__title {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.widget__title::after {
  content: ""; flex: 1;
  height: 2px; margin-left: auto;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.widget__title span { color: var(--ink-muted); font-size: .62rem; font-weight: 650; letter-spacing: .06em; }
.widget__empty { margin: 0; color: var(--ink-muted); font-size: .82rem; line-height: 1.6; }
.widget__note { display: block; margin-top: 9px; color: var(--ink-muted); font-size: .7rem; }

/* ---------- terpopuler ---------- */
.widget--popular .widget__title::after { background: var(--brand); }
.popular-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.popular-item {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px;
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
}
.popular-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.popular-item__rank {
  font-family: var(--font-display); font-size: 1.28rem; font-weight: 800;
  color: var(--line-strong); line-height: 1.05; letter-spacing: -.03em;
  transition: color .18s var(--ease);
}
.popular-item__rank.is-top { color: var(--brand); }
.popular-item__body { min-width: 0; }
.popular-item__cat {
  display: block; margin-bottom: .18rem;
  color: var(--brand); font-size: .62rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
}
.popular-item__title { margin: 0 0 .28rem; font-size: .95rem; font-weight: 700; line-height: 1.38; letter-spacing: -.012em; }
.popular-item__title a {
  display: -webkit-box; overflow: hidden; color: var(--ink);
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  transition: color .15s var(--ease);
}
.popular-item__title a:hover { color: var(--brand); }
.popular-item:hover .popular-item__rank { color: var(--brand); }
.popular-item .meta { font-size: .72rem; gap: .35rem; }

/* ---------- topik ---------- */
.widget--soft { background: var(--paper-soft); }
.widget--soft .tagcloud a {
  padding: .42rem .68rem;
  font-size: .74rem; font-weight: 600;
  transition: border-color .15s, color .15s, background .15s, transform .15s var(--ease);
}
.widget--soft .tagcloud a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); transform: translateY(-1px); text-decoration: none; }

/* ---------- kanal resmi ---------- */
.widget--channels p { margin: 0 0 12px; color: var(--ink-muted); font-size: .84rem; line-height: 1.6; }
.channel-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 42px;
  margin-bottom: 8px; padding: .55rem .9rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink);
  font-size: .86rem; font-weight: 650;
  text-decoration: none;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.channel-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.channel-btn::after { margin-left: auto; color: #b7c0cc; content: "›"; font-size: 1rem; line-height: 1; }
.channel-btn:hover { transform: translateY(-1px); text-decoration: none; }
.channel-btn--wa:hover { border-color: #128c4b; background: #ecf9f1; color: #0f7038; }
.channel-btn--tg:hover { border-color: #2a7fa8; background: #eaf5fa; color: #1d6285; }

/* ---------- daftar isi ---------- */
.widget--toc { background: linear-gradient(180deg, #fbfbfc, #fff); }
.widget--toc .widget__title::after { background: var(--brand); }
.widget--toc .toc { max-height: none; padding-right: 2px; }
.widget--toc + .widget,
.widget--toc + .ad { margin-top: var(--space-m); }
.toc__item a {
  padding: 7px 10px 7px 12px;
  border-left: 2px solid var(--line);
  border-radius: 0 7px 7px 0;
  font-size: .82rem;
}
.toc__item a:hover, .toc__item a.is-active {
  border-left-color: var(--brand);
  background: var(--brand-tint);
  border-radius: 0 7px 7px 0;
}

/* iklan rail tetap punya bingkai */
.widget--channels + .ad,
.sidebar .ad--rail { border-radius: 10px; }

@media (max-width: 999px) {
  .sidebar__inner { gap: var(--space-m); }
}

/* =====================================================================
   Tipografi publik terpadu — beranda, kategori, artikel.
   Inter untuk UI & isi; Fraunces untuk headline editorial.
   ===================================================================== */
:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --headline-hero: clamp(1.55rem, 1.18rem + 1.45vw, 1.8rem);
  --headline-page: clamp(1.5rem, 1.40rem + 1.44vw, 2rem);
  --headline-card: clamp(1rem, .94rem + .2vw, 1.13rem);
}

body, button, input, select, textarea { font-family: var(--font-body); }
.kicker, .meta, .breadcrumbs, .badge, .section-bar__kicker, .section-bar__more,
.feed-item__meta, .cat-card .meta, .article__kicker-note, .article__meta,
.widget, .pagination, .footer { font-family: var(--font-body); }

/* Semua headline editorial memakai Fraunces, satu keluarga & bobot konsisten. */
.hero-card__title, .feature__title, .article__title,
.page-head--term .page-head__title, .lead h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.024em;
}
.hero-card__title { font-size: var(--headline-hero); line-height: 1.15; }
.feature__title { font-size: clamp(1.38rem, 1.12rem + .9vw, 1.82rem); line-height: 1.2; }
.article__title { font-size: var(--headline-page); line-height: 1.13; }
.page-head--term .page-head__title { font-size: clamp(1.8rem, 1.42rem + 1.35vw, 2.45rem); line-height: 1.14; }
.lead h1 { font-size: var(--headline-hero); line-height: 1.14; }

.feed-item__title, .cat-card__title, .hero-list__title, .side-story__title,
.popular-item__title, .card__title, .pager__title, .author-box__name {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -.014em;
}
.feed-item__title { font-size: var(--headline-card); line-height: 1.32; }
.feed-item--lead .feed-item__title { font-size: clamp(1.18rem, 1.05rem + .45vw, 1.42rem); }
.cat-card__title, .cat-card--lead .cat-card__title { font-size: var(--headline-card); line-height: 1.34; }
.hero-list__title, .side-story__title, .popular-item__title { font-size: .98rem; line-height: 1.36; }
.card__title { font-size: var(--headline-card); line-height: 1.34; }

.article__body, .article__body p, .article__body li,
.article__body table, .article__body figcaption { font-family: var(--font-body); }
.article__body { font-size: clamp(1rem, .98rem + .15vw, 1.08rem); line-height: 1.82; }
.article__body h2, .article__body h3, .article__body h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.018em;
}
.article__body h2 { font-size: clamp(1.35rem, 1.2rem + .5vw, 1.62rem); line-height: 1.25; }
.article__body h3 { font-size: clamp(1.16rem, 1.08rem + .25vw, 1.32rem); line-height: 1.3; }
.article__body blockquote { font-family: var(--font-display); font-weight: 600; }

@media (max-width: 719px) {
  :root {
    --headline-hero: clamp(1.2rem, 1rem + .75vw, 1.58rem);
    --headline-page: clamp(1.48rem, 1.3rem + 1.1vw, 1.78rem);
    --headline-card: 1rem;
  }
  .hero-card__title { line-height: 1.2; }
  .article__title { line-height: 1.35; }
  .article__body { font-size: calc(.99rem * var(--reading-scale, 1)); line-height: 1.78; }
}

/* Gambar isi artikel: tata letak & ukuran dari editor redaksi */
.article__body figure[class*="fig--"] img { width: 100%; height: auto; }
.article__body figure.fig--s { max-width: 50%; }
.article__body figure.fig--m { max-width: 75%; }
.article__body figure.fig--s:not(.fig--left):not(.fig--right),
.article__body figure.fig--m:not(.fig--left):not(.fig--right) { margin-left: auto; margin-right: auto; }
.article__body figure.fig--left { float: left; max-width: 50%; margin: .4rem 1.5rem 1.2rem 0; }
.article__body figure.fig--right { float: right; max-width: 50%; margin: .4rem 0 1.2rem 1.5rem; }
.article__body figure.fig--left.fig--m,
.article__body figure.fig--right.fig--m { max-width: 75%; }
.article__footer { clear: both; }
@media (max-width: 720px) {
  .article__body figure.fig--left,
  .article__body figure.fig--right,
  .article__body figure.fig--s,
  .article__body figure.fig--m {
    float: none;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Pendaftaran & verifikasi kontributor ---------- */
.authcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-sm, 0 1px 3px rgba(23,41,63,.08)); }
.authcard--narrow { max-width: 520px; margin-inline: auto; }
.authcard__title { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -.01em; margin: 1.4rem 0 .9rem; padding-top: 1.1rem; border-top: 1px dashed var(--line); }
.authcard__title:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.authcard__submit { margin-top: 1.4rem; }
.authcard__foot { margin-top: 1rem; font-size: .83rem; color: var(--ink-soft); }
.authcard__resend { margin-top: .6rem; }
.authcard .notice { margin-bottom: .9rem; }
.authcard .notice--error { background: #fdf1f0; border-color: #f0cfcb; color: #8c2f28; }
.authcard .notice--success { background: #eef7f0; border-color: #cfe8d4; color: #2c6b3f; }
.authcard .notice--info { background: #eef2f8; border-color: #ccd9ea; color: #2c4a6b; }

.authcard .field { margin-bottom: 1rem; }
.authcard .field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; color: var(--ink); }
.authcard .field label em { color: #c0392b; font-style: normal; }
.authcard .field label span { color: var(--ink-soft); font-weight: 400; }
.authcard .field .input { width: 100%; padding: .65rem .8rem; border: 1px solid var(--line-strong, #d8d8d2); border-radius: 8px; font: inherit; font-size: .92rem; background: #fff; color: var(--ink); }
.authcard .field .input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.authcard textarea.input { resize: vertical; }
.field__hint { display: block; margin-top: .3rem; font-size: .76rem; color: var(--ink-soft); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
@media (max-width: 640px) { .field-grid { grid-template-columns: 1fr; } }

.authcode { font-size: 1.6rem !important; letter-spacing: .6em; text-align: center; font-weight: 700; }

.checkline { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; color: var(--ink); margin: 1.2rem 0; padding: .9rem 1rem; background: var(--paper-soft, #faf9f6); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.checkline input { margin-top: .2rem; accent-color: var(--brand); flex: none; }
.auth-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.authside { display: grid; gap: 1.1rem; align-content: start; }
.authside__card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); padding: 1.2rem 1.4rem; }
.authside__card h3 { font-family: var(--font-display); font-size: .98rem; margin: 0 0 .7rem; }
.authside__card--ethics { background: #fdf6f5; border-color: #f0d5d2; }
.authside__list { margin: 0; padding-left: 1.1rem; font-size: .85rem; color: var(--ink-soft); display: grid; gap: .45rem; }
.authside__list--num { padding-left: 1.3rem; }
.page-head__lead { max-width: 64ch; color: var(--ink-soft); margin-top: .5rem; }

/* ---------- arsip: statistik, navigasi tahun, kartu bulan ---------- */
.arc-stats { display: flex; flex-wrap: wrap; gap: .6rem .9rem; margin-top: 1.1rem; }
.arc-stat { display: flex; flex-direction: column; gap: .1rem; padding: .55rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-s); min-width: 140px; }
.arc-stat strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--navy); line-height: 1.2; }
.arc-stat span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }

.arc-years { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-l); }
.arc-years a { display: inline-flex; align-items: baseline; gap: .45rem; padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: .88rem; transition: border-color .15s var(--ease), background .15s var(--ease); }
.arc-years a strong { font-family: var(--font-display); font-size: .95rem; }
.arc-years a span { font-size: .74rem; color: var(--ink-muted); }
.arc-years a:hover { border-color: var(--navy); background: var(--paper-soft); }

.arc-year { margin-bottom: var(--space-xl); scroll-margin-top: calc(var(--header-h, 64px) + 24px); }
.arc-year__head { display: flex; align-items: baseline; gap: .8rem; padding-bottom: .6rem; margin-bottom: 1rem; border-bottom: 2px solid var(--navy); }
.arc-year__head h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + .6vw, 1.8rem); color: var(--navy); margin: 0; }
.arc-year__total { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }

.arc-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }
.arc-month { display: flex; flex-direction: column; gap: .55rem; padding: .9rem 1rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-s); transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease); }
.arc-month:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-m); }
.arc-month__head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.arc-month__name { font-family: var(--font-display); font-size: 1.02rem; color: var(--navy); }
.arc-month__count { font-size: .74rem; white-space: nowrap; color: var(--ink-muted); }
.arc-month__bar { display: block; height: 6px; background: var(--paper-deep); border-radius: 999px; overflow: hidden; }
.arc-month__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy), #2d4a6e); }
.arc-month:hover .arc-month__bar span { background: linear-gradient(90deg, var(--brand), var(--brand-dark)); }
.arc-month__latest { font-size: .78rem; color: var(--ink-soft); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 640px) {
  .arc-stat { flex: 1 1 44%; min-width: 0; }
  .arc-months { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .arc-month { padding: .7rem .75rem .8rem; }
  .arc-month__latest { display: none; }
}
@media (max-width: 420px) {
  .arc-months { grid-template-columns: 1fr; }
}

/* ---------- feed hidup beranda: muat lebih banyak + pil berita baru ---------- */
.feed-more { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: var(--space-m) 0 var(--space-s); }
.feed-more[hidden] { display: none; }
.feed-more__btn { min-width: 240px; }
.feed-more__count { margin: 0; font-size: .78rem; color: var(--ink-muted); }

.feed-alert { position: fixed; left: 0; right: 0; bottom: 18px; z-index: 70; display: flex; justify-content: center; pointer-events: none; padding: 0 1rem; }
.feed-alert[hidden] { display: none; }
.feed-alert__pill { pointer-events: auto; display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.1rem; background: var(--navy); color: #fff; border: 0; border-radius: 999px; box-shadow: var(--shadow-l); font: inherit; font-size: .86rem; cursor: pointer; animation: feed-alert-in .35s var(--ease); }
.feed-alert__pill:hover { background: #1f3552; }
.feed-alert__pill strong { font-weight: 700; }
.feed-alert__pulse { width: 8px; height: 8px; border-radius: 50%; background: #e2564c; box-shadow: 0 0 0 4px rgba(226, 86, 76, .22); animation: feed-alert-pulse 1.6s ease-in-out infinite; }
@keyframes feed-alert-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes feed-alert-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(226, 86, 76, .22); } 50% { box-shadow: 0 0 0 7px rgba(226, 86, 76, .1); } }
@media (max-width: 640px) {
  .feed-alert { bottom: 92px; } /* di atas iklan anchor mobile */
}

/* ---------- seksi Opini & Video di beranda ---------- */
.opini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; }
.opini-card { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: 1.15rem 1.2rem 1rem; background: var(--brand-tint); border: 1px solid #f0d5d2; border-radius: var(--radius-l); }
.opini-card__quote { position: absolute; top: .15rem; right: .9rem; font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: rgba(168, 38, 31, .14); pointer-events: none; }
.opini-card__title { margin: 0; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.35; }
.opini-card__title a { color: var(--ink); text-decoration: none; }
.opini-card__title a:hover { color: var(--brand); }
.opini-card__excerpt { margin: 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.55; }
.opini-card .meta { margin-top: auto; padding-top: .4rem; font-size: .78rem; color: var(--ink-muted); }

.video-card .cat-card__media { position: relative; }
.video-card__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(23, 41, 63, .82); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-m); transition: transform .18s var(--ease), background .18s var(--ease); }
.video-card__play svg { width: 22px; height: 22px; margin-left: 2px; }
.video-card:hover .video-card__play { transform: translate(-50%, -50%) scale(1.1); background: var(--brand); }
.cat-card { position: relative; }
@media (max-width: 640px) {
  .opini-grid { grid-template-columns: 1fr; gap: .6rem; }
}

/* ---------- toggle tema ---------- */
.theme-toggle {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; margin-block: auto; margin-left: auto;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--paper); color: var(--ink-soft);
  cursor: pointer; transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.theme-toggle:hover { color: var(--brand); border-color: var(--line-strong); }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
/* Desktop: tombol tema pindah ke topbar, paling kanan sejajar form pencarian;
   baris nav (mobile) tetap memakai tombolnya sendiri. */
.theme-toggle--topbar { display: none; }
@media (min-width: 1024px) {
  .theme-toggle--topbar { display: grid; margin-left: 0; }
  .nav .theme-toggle { display: none; }
}

/* ---------- tema gelap ---------- */
[data-theme="dark"] {
  --paper: #14181f;
  --paper-soft: #1a202a;
  --paper-deep: #232c38;
  --ink: #e7ebf2;
  --ink-soft: #b8c1cf;
  --ink-muted: #8b96a7;
  --line: #2b3441;
  --line-strong: #3d4a5c;
  --brand: #e2605a;
  --brand-dark: #c94b44;
  --brand-tint: #2b1d1c;
  --gold: #c9a06a;
  --success: #4cb08a;
  --warning: #d3a13c;
  --shadow-s: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 1px rgba(0, 0, 0, .3);
  --shadow-m: 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-l: 0 24px 60px -28px rgba(0, 0, 0, .75);
  color-scheme: dark;
}

/* permukaan yang tadinya putih keras */
[data-theme="dark"] .home,
[data-theme="dark"] .section--block,
[data-theme="dark"] .pager a,
[data-theme="dark"] .hero-card__body,
[data-theme="dark"] .search-form__suggest,
[data-theme="dark"] .topsearch__suggest,
[data-theme="dark"] .toc-mobile,
[data-theme="dark"] .authcard .field .input { background: var(--paper); }
[data-theme="dark"] .topsearch,
[data-theme="dark"] .nav__burger,
[data-theme="dark"] .share__btn,
[data-theme="dark"] .channel-btn,
[data-theme="dark"] .reader-size,
[data-theme="dark"] .article__meta .article__tools .reader-size,
[data-theme="dark"] .checkline,
[data-theme="dark"] .theme-toggle { background: var(--paper-soft); }
[data-theme="dark"] .nav__panel { background: var(--paper-soft); }
[data-theme="dark"] .menu-sheet__grid a { background: var(--paper); }
[data-theme="dark"] .reader-size button.is-on { background: var(--paper-deep); color: var(--brand); }
[data-theme="dark"] .page-head--term { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%); }

/* tombol: tinta terang butuh teks gelap */
[data-theme="dark"] .btn { color: var(--paper); }
[data-theme="dark"] .btn:hover { color: #fff; }
[data-theme="dark"] .btn--ghost:hover { color: var(--paper); }

/* navy sebagai teks pada latar gelap */
[data-theme="dark"] .quicksearch__brand span,
[data-theme="dark"] .quicksearch__brand:hover span,
[data-theme="dark"] .btn.quicksearch__cta,
[data-theme="dark"] .article__body h3,
[data-theme="dark"] .arc-stat strong,
[data-theme="dark"] .arc-year__head h2,
[data-theme="dark"] .arc-month__name { color: var(--ink); }
[data-theme="dark"] .term-head__mark { --c: #3d4a5c; }

/* permukaan navy tetap gelap: sedikit lebih terang agar terpisah dari latar */
[data-theme="dark"] .topbar,
[data-theme="dark"] .footer,
[data-theme="dark"] .home-trend,
[data-theme="dark"] .home-cta__box,
[data-theme="dark"] .feed-alert__pill { background-color: #1d2a3d; }
[data-theme="dark"] .feed-alert__pill:hover { background-color: #25364e; }
[data-theme="dark"] .home-cta__btn { background: var(--paper); border-color: var(--paper); color: var(--ink); }
[data-theme="dark"] .topsearch__submit { background: var(--brand); }
[data-theme="dark"] .topsearch__submit:hover { background: var(--brand-dark); }

/* ---------- jelajahi arsip ---------- */
.widget--archive > p { margin: 0 0 10px; color: var(--ink-muted); font-size: .84rem; line-height: 1.6; }
.widget--archive .widget-archive__total strong { color: var(--ink); font-size: 1rem; font-weight: 800; }
.widget-archive__years { display: flex; flex-wrap: wrap; gap: 8px; }
.widget-archive__chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-size: .82rem; text-decoration: none;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.widget-archive__chip strong { font-weight: 800; }
.widget-archive__chip span { color: var(--ink-muted); font-size: .74rem; font-weight: 650; }
.widget-archive__chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); text-decoration: none; }
.widget-archive__chip:hover span { color: var(--brand); }
.widget-archive__all { display: inline-block; margin-top: 10px; color: var(--brand); font-size: .8rem; font-weight: 750; text-decoration: none; }
.widget-archive__all:hover { text-decoration: underline; }

/* ---------- buletin email ---------- */
.widget--newsletter { background: var(--paper-soft); }
.widget--newsletter > p { margin: 0 0 10px; color: var(--ink-muted); font-size: .84rem; line-height: 1.6; }
.newsletter-form { display: flex; flex-direction: column; gap: 8px; }
.newsletter-form__input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: .9rem;
}
.newsletter-form__input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.newsletter-form__btn {
  padding: 10px 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--brand); color: #fff;
  font: inherit; font-size: .88rem; font-weight: 750; letter-spacing: .01em;
  transition: background .15s var(--ease);
}
.newsletter-form__btn:hover { background: var(--brand-dark); }
.newsletter-form__btn:disabled { opacity: .65; cursor: wait; }
.newsletter-form__msg { margin: 0; font-size: .8rem; line-height: 1.5; font-weight: 600; }
.newsletter-form__msg.is-ok { color: var(--success); }
.newsletter-form__msg.is-error { color: var(--brand-dark); }
.newsletter-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* video overlay tetap terbaca */
[data-theme="dark"] .video-card__play { background: rgba(226, 96, 90, .88); }

/* permukaan gradien terang yang tersisa */
[data-theme="dark"] .hero,
[data-theme="dark"] .home-hero,
[data-theme="dark"] .keypoints,
[data-theme="dark"] .author-box,
[data-theme="dark"] .article__meta,
[data-theme="dark"] .widget--toc { background: var(--paper); }
[data-theme="dark"] .hero { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%); }
[data-theme="dark"] .home-hero {
  background:
    radial-gradient(900px 300px at 85% -10%, rgba(226, 96, 90, .08), transparent 65%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%);
}
[data-theme="dark"] .keypoints,
[data-theme="dark"] .author-box { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%); }
[data-theme="dark"] .widget:hover { border-color: var(--line-strong); }
[data-theme="dark"] .author-box__link { color: var(--brand); }

/* Nada logo adaptif (site.js mengukur luminance): logo gelap dibalik
   jadi terang di masthead gelap; logo terang dibiarkan warna aslinya. */
[data-theme="dark"] .brand__logo,
[data-theme="dark"] .quicksearch__logo { filter: brightness(0) invert(1); }
[data-theme="dark"] .brand__logo.logo-tone--keep,
[data-theme="dark"] .quicksearch__logo.logo-tone--keep { filter: none; }