/* ==========================================================================
   Liputan - mobile-first news portal
   Base styles target 360px. Wider screens layer on via min-width queries.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  /* Read off the kurnia.com logo: blue wordmark leads, the red ".com" stays
     a small secondary note rather than the primary brand colour. */
  --brand-deep: #004cff;
  --brand: #0875ed;
  --brand-dark: #004cff;
  --brand-light: #06a8fc;
  --brand-gradient: linear-gradient(90deg, #004cff 0%, #0875ed 50%, #06a8fc 100%);
  /* A deeper, moodier blue for panels that need to read as a section of
     their own rather than a bright call-to-action like the ticker/buttons. */
  --panel-dark-blue: linear-gradient(160deg, #041233 0%, #06215c 45%, #0a3aa6 100%);
  --bg: #ffffff;
  --bg-soft: #f5f6f8;
  --bg-elev: #ffffff;
  --text: #14171a;
  --text-soft: #5b636b;
  --text-faint: #8b949c;
  --border: #e4e7ea;
  --accent: #0b6bcb;

  --bg-page: #eeeeee;

  --radius: 4px;
  --radius-sm: 4px;
  --radius-pill: 999px;

  --gap: 20px;
  --pad: 18px;
  --header-h: 56px;
  --rail-h: 42px;
  --bottomnav-h: 60px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
  --shadow: 0 4px 16px rgb(0 0 0 / 8%);

  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: var(--font);

  /* 994px shell minus its 12px gutters leaves the 970px content band. */
  --maxw: 994px;
  --maxw-mobile: 768px;
  --side-w: 300px;
}

[data-theme="dark"] {
  --bg-page: #07090c;
  --bg: #0e1116;
  --bg-soft: #161a21;
  --bg-elev: #181d25;
  --text: #e8eaed;
  --text-soft: #a8b0b9;
  --text-faint: #78818b;
  --border: #262c35;
  --accent: #6aa9f0;
  /* The deep blue loses contrast on a dark ground, so the scale shifts up. */
  --brand: #2f90ff;
  --brand-dark: #0875ed;
  --brand-light: #56c4ff;
  --brand-gradient: linear-gradient(90deg, #0f5cff 0%, #2f90ff 50%, #56c4ff 100%);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow: 0 4px 16px rgb(0 0 0 / 45%);
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-page);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

/* The components below are toggled through the hidden attribute, and several
   of them set display in their own rules. Without this the attribute loses. */
[hidden] { display: none !important; }

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.3;
  margin: 0 0 .5em;
  font-weight: 700;
}

p { margin: 0 0 1em; }

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

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- Layout ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.site-main { padding-block: 16px calc(var(--bottomnav-h) + 24px); }

.section { margin-bottom: 28px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border-left: 4px solid var(--brand);
  border-radius: 3px;
  padding-left: 10px;
}
.section-head h2 { font-size: 1.15rem; margin: 0; }
.section-head a { font-size: .8rem; color: var(--text-soft); font-weight: 600; }

/* --- Header ------------------------------------------------------------- */
/* Only the bar pins to the top. The category rail below belongs to the page
   and scrolls away with it, so the pinned strip stays one row tall. */
.header-main {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-elev);
  transition: box-shadow .2s ease;
}


.site-header {
  position: sticky;
  top: var(--header-h);
  z-index: 45;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}

.header-bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  color: var(--brand);
  margin-right: auto;
  min-width: 0;
}
.site-brand .site-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-brand:hover { color: var(--brand-dark); }
.site-logo { width: auto; height: 44px; max-width: 200px; object-fit: contain; }

/* The search trigger moves into the drawer on mobile - see .drawer-search-btn
   - so the header's own copy of it only shows once there's a second, wider
   way in for it (the 640px breakpoint below re-shows it there). */
.header-actions .js-search-open { display: none; }
@media (min-width: 640px) {
  .header-actions .js-search-open { display: grid; }
}

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  color: var(--text);
  flex: none;
}
.icon-btn:hover { background: var(--bg-soft); }
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Category chip rail */
.chip-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 0 10px;
  border-top: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.chip-rail::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
}
.chip:hover { color: var(--text); }
.chip.is-active { background: var(--brand); color: #fff; }

/* --- Breaking ticker ---------------------------------------------------- */
/* Hidden on mobile - the header, chip rail and drawer already carry enough
   on a small screen without an auto-scrolling strip fighting for attention
   too. Reappears once there's room, from the 640px breakpoint up. */
.ticker { display: none; }
@media (min-width: 640px) {
.ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 16px;
  overflow: hidden;
}
}
.ticker-label {
  flex: none;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgb(255 255 255 / 20%);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.ticker-track { overflow: hidden; flex: 1; }
.ticker-items {
  display: flex;
  gap: 28px;
  white-space: nowrap;
  font-size: .85rem;
  animation: ticker-scroll 9s linear infinite;
}
.ticker:hover .ticker-items { animation-play-state: paused; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Cards -------------------------------------------------------------- */
.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  color: var(--text-faint);
}
/* Meta printed above the title (liputan_post_meta() right after the
   thumbnail, not below it) needs its own breathing room - nothing else
   between them supplies one. */
.card-thumb-link + .card-meta { margin-top: 10px; }
.card-cat {
  color: var(--brand);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.card-dot { opacity: .5; }

.thumb {
  position: relative;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-badge {
  position: absolute; left: 8px; top: 8px;
  background: var(--brand); color: #fff;
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-pill);
}

/* Terbaru ahead of the Foto widget on mobile only - see .feed-stack in
   index.php. Every direct child needs an explicit order (not just the two
   being swapped), otherwise the un-ordered ones default to 0 and jump to
   the front of the stack instead of keeping their place. */
@media (max-width: 639.98px) {
  .feed-stack { display: flex; flex-direction: column; }
  .feed-stack > .zone-hero-below   { order: 1; }
  .feed-stack > .block-feed        { order: 2; }
  .feed-stack > .zone-latest-above { order: 3; }
  .feed-stack > .zone-home-top     { order: 4; }
}

/* Hero card */
.card-hero { margin-bottom: 20px; }
.card-hero .thumb { aspect-ratio: 1 / 1.05; border-radius: var(--radius); }
.card-hero .thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 30 110 / 90%) 0%, rgb(0 30 110 / 55%) 55%, rgb(0 30 110 / 15%) 90%, transparent 100%);
  /* Purely decorative - without this, being a positioned element, it paints
     above the plain (non-positioned) .card-thumb-link and swallows clicks
     over the picture everywhere except where .hero-body's own real content
     happens to sit on top of it. */
  pointer-events: none;
}
.card-hero .hero-body {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 14px;
  color: #fff;
  z-index: 1;
}
/* The decorative link needs to actually cover the picture it sits behind,
   which a plain (non-positioned) anchor around a 100%-sized <img> only does
   by accident of layout - explicit here so it can't be knocked out from
   under it by a future change to .thumb's content. */
.card-hero .card-thumb-link { position: absolute; inset: 0; }
.card-hero h2 { font-size: 1.35rem; margin: 6px 0 0; color: #fff; }
.card-hero .card-meta { color: rgb(255 255 255 / 78%); }
.card-hero .card-cat { color: #fff; background: var(--brand); padding: 2px 8px; border-radius: var(--radius-pill); }
.card-hero .card-byline { margin-top: 6px; }
.card-hero .card-byline-name { color: rgb(255 255 255 / 78%); }

/* Opini's hero: a column is the writer's own voice, not a news event, so it
   reads differently on purpose - warm instead of the site's usual blue, a
   serif headline, an opening quote mark, and the byline promoted to the
   size a photo credit would get everywhere else on the card. */
.card-hero-opini .thumb::after {
  background: linear-gradient(to top, rgb(63 27 12 / 92%) 0%, rgb(63 27 12 / 60%) 55%, rgb(63 27 12 / 18%) 90%, transparent 100%);
}
.card-hero-opini .card-cat { background: #c2600f; }
.hero-opini-mark {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.6rem;
  line-height: 1;
  color: #e2a15c;
  margin-top: 4px;
}
.card-hero-opini h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 600;
}
.card-byline-opini { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.card-byline-opini img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #e2a15c; }
.card-byline-opini .card-byline-name { display: flex; flex-direction: column; font-weight: 600; color: #fff; }
.card-byline-opini .card-byline-name small { font-weight: 400; color: rgb(255 255 255 / 70%); }

/* List card (thumb left, text right) */
.card-list {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.card-list:last-child { border-bottom: 0; }
.card-list .thumb { aspect-ratio: 1 / 1; }
.card-list h3 {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 4px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-list .list-body { display: flex; flex-direction: column; min-width: 0; }
.card-list .card-meta { margin-top: auto; }

/* Grid card (stacked) */
.card-grid-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.card-stack h3 {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 8px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-byline {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
}
.card-byline img { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.card-byline-name {
  font-size: .74rem; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Numbered popular list */
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.rank-item:last-child { border-bottom: 0; }
.rank-item:has(.rank-thumb) { grid-template-columns: 28px 96px 1fr; }
.rank-number {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--brand);
  opacity: .55;
  line-height: 1.2;
}
.rank-thumb .thumb { aspect-ratio: 1 / 1; }
.rank-text { min-width: 0; }
.rank-list h3 { font-size: .9rem; font-weight: 700; margin: 0 0 4px; }
.rank-views {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; color: var(--text-faint); margin-top: 4px;
}
.rank-views .icon { width: 14px; height: 14px; }

/* --- Drawer (mobile nav) ------------------------------------------------ */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgb(0 0 0 / 45%);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 90;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(84vw, 320px);
  background: var(--bg-elev);
  z-index: 100;
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

/* The search trigger that used to sit top-right of the header on mobile -
   moved in here so that corner has room to breathe. */
.drawer-search-btn {
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 32px);
  margin: 12px 16px 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-size: .9rem; font-weight: 600;
}
.drawer-search-btn .icon { width: 18px; height: 18px; flex: none; }

/* A small uppercase label ahead of each drawer section (Sections, About),
   so a long category list and the legal links below it read as two
   deliberate groups instead of one undifferentiated stack. */
.drawer-label {
  padding: 14px 16px 4px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
}

/* Two columns for the top-level sections: category names are short, and this
   roughly halves how far the list runs down the drawer. An item with a
   submenu (Sub Menu, with its toggle) spans both columns instead, so its
   expanded children have the full width to sit in rather than a half. */
.drawer-nav > ul {
  list-style: none;
  margin: 0;
  padding: 4px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.drawer-nav > ul > li.menu-item-has-children { grid-column: 1 / -1; }
.drawer-nav a {
  display: block;
  padding: 10px 0;
  font-weight: 600;
  font-size: .9rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-nav a:hover { background: var(--bg-soft); }
.drawer-nav .sub-menu { padding-left: 4px; }
.drawer-nav .sub-menu a { padding-left: 12px; font-weight: 500; color: var(--text-soft); }

/* The About list (Redaksi, Kode Etik, ...) is short and secondary, so it
   reads smaller and lighter than the section list above it. */
.drawer-about ul { list-style: none; margin: 0; padding: 4px 0 8px; }
.drawer-about a {
  display: block;
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-soft);
}
.drawer-about a:hover { background: var(--bg-soft); color: var(--text); }

/* --- Search overlay ----------------------------------------------------- */
.search-panel {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 110;
  padding: 16px;
  display: none;
}
.search-panel.is-open { display: block; }
.search-form { display: flex; gap: 8px; align-items: center; }
.search-form input[type="search"] {
  flex: 1;
  padding: 12px 14px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--text);
}
.js-search-close { display: none; }
.search-panel .js-search-close { display: grid; }
.search-form button[type="submit"] {
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

/* --- Bottom nav --------------------------------------------------------- */
.bottom-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  height: var(--bottomnav-h);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a,
.bottom-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: .65rem;
  font-weight: 600;
  color: var(--text-faint);
}
.bottom-nav a.is-active { color: var(--brand); }
.bottom-nav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Single post -------------------------------------------------------- */
.entry-header { margin-bottom: 16px; }
.entry-title { font-size: 1.55rem; margin-bottom: 10px; }
.entry-byline {
  display: flex; align-items: center; gap: 10px;
  font-size: .8rem; color: var(--text-soft);
  padding: 10px 0;
  border-block: 1px solid var(--border);
}
.entry-byline img { width: 32px; height: 32px; border-radius: 50%; }

.entry-content {
  font-size: 1.02rem; line-height: 1.75;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.entry-content > * { margin-bottom: 1.1em; }
.entry-content h2 { font-size: 1.25rem; margin-top: 1.6em; }
.entry-content h3 { font-size: 1.08rem; margin-top: 1.4em; }
.entry-content img, .entry-content figure { border-radius: var(--radius-sm); }
.entry-content figcaption { font-size: .78rem; color: var(--text-faint); margin-top: 6px; }
.entry-content blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 16px;
  border-left: 4px solid var(--brand);
  font-style: italic;
  color: var(--text-soft);
}
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .9rem; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { border: 1px solid var(--border); padding: 8px; text-align: left; }
.entry-content pre {
  background: var(--bg-soft);
  padding: 14px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: .85rem;
}

.entry-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.entry-tags a {
  font-size: .75rem; font-weight: 600;
  background: var(--bg-soft); color: var(--text-soft);
  padding: 5px 12px; border-radius: var(--radius-pill);
}

.share-bar { display: flex; gap: 8px; margin: 20px 0; }
.share-bar a, .share-bar button {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: .8rem;
  font-weight: 700;
}

/* Reading progress */
.read-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: var(--brand-gradient);
  background-size: 100vw 100%;
  z-index: 80;
  transition: width .1s linear;
}

/* --- Pagination --------------------------------------------------------- */
.pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 24px 0; }
.pagination .page-numbers {
  min-width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 600;
}
.pagination .current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- Comments ----------------------------------------------------------- */
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list li { padding: 14px 0; border-bottom: 1px solid var(--border); }
.comment-list .children { list-style: none; padding-left: 18px; }
.comment-meta { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-soft); margin-bottom: 6px; }
.comment-meta img { width: 28px; height: 28px; border-radius: 50%; }
.comment-form input, .comment-form textarea {
  width: 100%; padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-soft); color: var(--text); font: inherit;
}
.comment-form .submit {
  background: var(--brand); color: #fff; font-weight: 700;
  padding: 11px 22px; border-radius: var(--radius-pill);
}

/* --- Footer ------------------------------------------------------------- */
/* A thin brand-gradient rule across the very top, then everything below it
   centered in one column - logo, social row, the legal links run together
   with dashes, copyright last. Same shape at every screen size; only the
   spacing grows on wider ones. */
.site-footer {
  background: var(--bg-soft);
  padding: 0 0 calc(var(--bottomnav-h) + 24px);
  font-size: .85rem;
  color: var(--text-soft);
}
.footer-topline { height: 3px; background: var(--brand-gradient); }
.footer-center {
  padding: 28px var(--pad) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-brand { margin-bottom: 16px; }
/* Muted, not full colour - a footer wordmark reads as a sign-off, not
   another call to action competing with the header's. */
.footer-brand img { filter: grayscale(1); opacity: .55; }
.footer-follow-label {
  margin: 0 0 10px;
  font-size: .78rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.footer-legal-links {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: .78rem;
}
.footer-legal-links li { display: flex; align-items: center; }
.footer-legal-links li a { padding: 4px 8px; }
.footer-legal-links li:not(:last-child)::after { content: "-"; color: var(--text-faint); }
.site-info { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .78rem; text-align: center; width: 100%; }

/* --- Utilities ---------------------------------------------------------- */
.no-results { padding: 40px 0; text-align: center; color: var(--text-soft); }


/* ==========================================================================
   Breakpoints - tablet 640px, desktop 1024px
   ========================================================================== */
@media (min-width: 640px) {
  :root { --pad: 24px; }
  .card-hero h2 { font-size: 1.7rem; }
  .card-hero .thumb { aspect-ratio: 16 / 9; }
  .entry-title { font-size: 2rem; }
  .card-grid-wrap { grid-template-columns: repeat(3, 1fr); }
  .card-list { grid-template-columns: 160px 1fr; }
  .card-list h3 { font-size: 1.05rem; }
}

@media (min-width: 1024px) {
  :root { --header-h: 64px; }
  .site-main { padding-bottom: 40px; }
  .site-footer { padding-bottom: 28px; }
  .bottom-nav { display: none; }
  /* The pinned-billboard "scroll to read" effect is a mobile trick - on a
     desktop viewport the ad just doesn't render at all (the hint bar's own
     desktop override sits further down, next to its base rule, since a
     same-specificity declaration later in this file would otherwise win
     over this one regardless of the media query). */
  .zone-billboard { display: none; }
  .content-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
  }
  .card-hero h2 { font-size: 2.1rem; }
  .entry-title { font-size: 2.4rem; }
  .entry-content { font-size: 1.08rem; }
  .footer-center { padding-top: 40px; }
  .footer-legal-links { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   News-portal layout: blocks, rails, article furniture, ad zones
   Mobile-first like the rest of the file; wider rules sit at the bottom.
   ========================================================================== */

/* --- Page shell --------------------------------------------------------- */
.layout { display: block; }
.layout-main { min-width: 0; }
.layout-side { margin-top: 28px; }

.icon { width: 20px; height: 20px; }

/* --- Blocks ------------------------------------------------------------- */
.block { margin-bottom: 28px; }
.block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.block-title { font-size: 1.15rem; margin: 0; color: var(--brand); }
.block-more { font-size: .8rem; color: var(--text-soft); font-weight: 600; }
.widget { margin-bottom: 28px; }
.zone > .widget:last-child { margin-bottom: 0; }

.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.headline-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 4px; }

/* --- Horizontal rail ---------------------------------------------------- */
.rail { position: relative; }
.rail-track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.rail-track::-webkit-scrollbar { display: none; }
/* Exactly two cards per view at every width, same as the lead rail below the
   hero, rather than a peek of a third that made the two rails feel unlike
   each other. */
.card-slide { flex: 0 0 calc(50% - var(--gap) / 2); scroll-snap-align: start; max-width: 280px; }
.card-slide .slide-body { padding-top: 8px; }
.card-slide h3 {
  font-size: .92rem; font-weight: 700; line-height: 1.35; margin: 6px 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rail-nav { display: none; }

/* On mobile the scrollable rail gives way to a fixed 2x2 grid (four cards,
   no swiping) with one clear button to the rest of the section - see
   liputan_block_slider(). The full scrollable rail takes back over once
   there's room for it to be worth scrolling, from 640px up. */
.slider-wide { display: none; }
.slider-narrow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
/* Compound selector - .btn-solid's own display/border-radius/padding are
   declared later in the file and would otherwise win over a plain single
   class at the same specificity. */
.btn-solid.slider-narrow-more {
  display: block;
  width: fit-content;
  margin: 14px auto 0;
  padding: 10px 28px;
  border-radius: 4px;
  font-size: .9rem;
  font-weight: 700;
}
@media (min-width: 640px) {
  .slider-wide { display: block; }
  .slider-narrow-grid, .slider-narrow-more { display: none; }
}

/* --- Video cards -------------------------------------------------------- */
.video-grid { display: grid; gap: var(--gap); }
.video-column { display: grid; gap: 4px; }
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(0 0 0 / 55%);
  color: #fff;
}
.video-play .icon { width: 20px; height: 20px; margin-left: 2px; }
.video-time {
  position: absolute; right: 6px; bottom: 6px;
  background: rgb(0 0 0 / 75%); color: #fff;
  font-size: .68rem; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
}
.video-big h3 { font-size: 1.1rem; margin: 10px 0 4px; }
.video-big .summary { font-size: .85rem; color: var(--text-soft); margin: 0 0 6px; }

/* --- YouTube facade: poster + play button until clicked ----------------- */
/* .video-play's own default size (44px) fits the compact list-row thumb;
   the hero gets a bigger one since its picture has far more room. */
.yt-facade { cursor: pointer; }
.yt-facade .video-play { transition: transform .15s ease, background .15s ease; }
.yt-facade:hover .video-play { background: var(--brand); transform: scale(1.06); }
.card-hero .yt-facade .video-play { width: 60px; height: 60px; background: rgb(0 0 0 / 60%); }
.card-hero .yt-facade .video-play .icon { width: 26px; height: 26px; }
.yt-facade.is-playing .video-play,
.yt-facade.is-playing .hero-body,
.yt-facade.is-playing::after { display: none; }
.yt-facade iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-small {
  display: grid; grid-template-columns: 112px 1fr; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.video-small > a { display: contents; }
.video-small .thumb { aspect-ratio: 16 / 9; }
.video-small h3 {
  font-size: .88rem; font-weight: 700; line-height: 1.35; margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Hashtags ----------------------------------------------------------- */
.hashtags { display: flex; flex-wrap: wrap; gap: 8px; }
.hashtag {
  font-size: .8rem; font-weight: 700;
  background: var(--bg-soft); color: var(--text-soft);
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.hashtag span { color: var(--brand); }
.hashtag:hover { background: var(--brand); color: #fff; }
.hashtag:hover span { color: #fff; }

/* Trending-tags pills: a small outline, a colour-matched dot, cycled per
   position - see liputan_block_tags(). Distinct from the plain .hashtag
   used for an article's own tags below it. */
.hashtag-dot {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
}
.hashtags .hashtag[class*="hashtag-"] {
  background: transparent;
  border: 1px solid currentColor;
  font-weight: 600;
}
.hashtag-blue   { color: #2563eb; }
.hashtag-green  { color: #16a34a; }
.hashtag-orange { color: #ea580c; }
.hashtag-red    { color: #dc2626; }
.hashtag-purple { color: #9333ea; }
/* Hover-fill only applies inside the bordered sidebar pills, not the flat
   trending-bar text row, which just brightens via the browser's default. */
.hashtags .hashtag-blue:hover   { background: #2563eb; color: #fff; }
.hashtags .hashtag-green:hover  { background: #16a34a; color: #fff; }
.hashtags .hashtag-orange:hover { background: #ea580c; color: #fff; }
.hashtags .hashtag-red:hover    { background: #dc2626; color: #fff; }
.hashtags .hashtag-purple:hover { background: #9333ea; color: #fff; }
.hashtags .hashtag[class*="hashtag-"]:hover .hashtag-dot { background: #fff; }

/* --- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font-size: .75rem; color: var(--text-faint);
  margin-bottom: 12px;
}
.breadcrumbs a { font-weight: 600; }
.breadcrumbs .sep .icon { width: 12px; height: 12px; opacity: .6; }
.breadcrumbs .current { color: var(--text-soft); }

/* --- Article furniture -------------------------------------------------- */
.entry-head-row { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-block: 1px solid var(--border); }
.byline { display: flex; align-items: center; gap: 10px; }
.byline img { width: 40px; height: 40px; border-radius: 50%; }
.byline-name { font-weight: 700; font-size: .9rem; }
.byline-meta { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--text-faint); }
.meta-video { display: inline-flex; align-items: center; gap: 4px; }
.meta-video .icon { width: 12px; height: 12px; }

.entry-featured { margin: 0 0 16px; }
.entry-featured img { border-radius: var(--radius-sm); width: 100%; }
.entry-featured figcaption { font-size: .78rem; color: var(--text-faint); padding-top: 6px; }

.tags-label, .credits-label, .share-label {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faint);
}
.credits { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 16px 0; font-size: .82rem; }
.credits-names { color: var(--text-soft); font-weight: 600; }

.source-line { font-size: .82rem; color: var(--text-soft); margin: 8px 0; word-break: break-word; }
.source-label { font-weight: 700; color: var(--text); }
.source-line a { color: var(--accent); }

.author-editor { font-size: .8rem; color: var(--text-soft); margin: 0 0 4px; }

.share-bar { display: flex; align-items: center; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
.share-btn {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--text-soft);
}
.share-btn:hover { filter: brightness(1.1); }

/* Brand colors, filled solid, on both the article share bar and the
   footer social row - not just a hover tint, always on so the row reads
   at a glance instead of being a wall of identical gray circles. */
.share-btn.share-whatsapp, .social-btn.social-whatsapp { background: #25D366; color: #fff; border-color: transparent; }
.share-btn.share-facebook, .social-btn.social-facebook { background: #1877F2; color: #fff; border-color: transparent; }
.share-btn.share-x, .social-btn.social-x { background: #000; color: #fff; border-color: transparent; }
.share-btn.share-telegram, .social-btn.social-telegram { background: #26A5E4; color: #fff; border-color: transparent; }
.social-btn.social-instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); color: #fff; border-color: transparent; }
.social-btn.social-youtube { background: #FF0000; color: #fff; border-color: transparent; }
.social-btn.social-tiktok { background: #000; color: #fff; border-color: transparent; }
.social-btn.social-rss { background: #FF6600; color: #fff; border-color: transparent; }
.share-btn.share-copy, .share-btn.share-native { background: var(--bg-soft); color: var(--text-soft); }
.share-copy:hover, .share-native:hover { background: var(--brand); color: #fff; }
.share-inline { margin: 0; }

.post-views-block {
  display: flex; align-items: baseline; gap: 8px;
  margin: 24px 0 0;
}
.post-views-label,
.post-views-count {
  font-size: .8rem; font-weight: 700;
  letter-spacing: .03em;
  color: var(--text);
}

.author-card {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 16px;
  margin: 24px 0;
}
.author-card img { width: 64px; height: 64px; border-radius: 50%; }
.author-role { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.author-card h3 { font-size: 1rem; margin: 2px 0 6px; }
.author-card p { font-size: .85rem; color: var(--text-soft); margin: 0; }

.post-nav { display: grid; gap: 10px; margin: 24px 0; }
.post-nav a {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.post-nav span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.post-nav strong { display: block; font-size: .9rem; margin-top: 4px; }

/* In-article "Read also" */
.read-also {
  border-left: 3px solid var(--brand);
  background: var(--bg-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 14px;
  margin: 20px 0;
}
.read-also-label {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--brand);
}
.read-also ul { list-style: none; margin: 6px 0 0; padding: 0; }
.read-also li { padding: 4px 0; }
.read-also a { font-size: .9rem; font-weight: 700; line-height: 1.4; }
.read-also a:hover { color: var(--brand); }

/* --- Load more and endless reading -------------------------------------- */
.load-more { text-align: center; margin: 24px 0; }
.btn-more, .btn-solid, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: .9rem;
}
.btn-more, .btn-solid { background: var(--brand-gradient); color: #fff; }
.btn-more:hover, .btn-solid:hover { background: var(--brand-dark); color: #fff; }
.btn-more.is-busy { opacity: .6; pointer-events: none; }
.btn-ghost { border: 1px solid var(--border); color: var(--text-soft); }
.btn-ghost .icon { width: 16px; height: 16px; }
.load-done { font-size: .82rem; color: var(--text-faint); }

.endless-item { border-top: 8px solid var(--bg-soft); margin-top: 32px; padding-top: 24px; }
.endless-status { display: grid; place-items: center; padding: 24px 0; }
.spinner-dots { display: flex; gap: 6px; }
.spinner-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); opacity: .3;
  animation: dot-pulse 1s infinite ease-in-out;
}
.spinner-dots i:nth-child(2) { animation-delay: .15s; }
.spinner-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* --- Archive and index heads -------------------------------------------- */
.archive-head { margin-bottom: 20px; }
.archive-title { font-size: 1.4rem; margin-bottom: 6px; }
.archive-desc { font-size: .88rem; color: var(--text-soft); }
.archive-sort { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.index-filter { display: grid; gap: 10px; margin-top: 14px; }
.filter-field { display: grid; gap: 4px; font-size: .78rem; color: var(--text-faint); font-weight: 600; }
.filter-field select, .filter-field input {
  padding: 10px 12px; font: inherit; font-size: .9rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-soft); color: var(--text); width: 100%;
}
.index-filter .btn-solid, .index-filter .btn-ghost { justify-self: start; }

.error-code { font-size: 3rem; color: var(--brand); margin-bottom: 8px; }

/* Paginated links printed by paginate_links( type => list ) */
ul.page-numbers {
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
  list-style: none; margin: 24px 0; padding: 0;
}
ul.page-numbers .page-numbers {
  min-width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 600;
}
ul.page-numbers .current { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- Ad zones ----------------------------------------------------------- */
.ad-slot { display: grid; place-items: center; margin-inline: auto; overflow: hidden; }
.ad-label {
  display: block; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-faint); margin-bottom: 4px;
}
.ad-billboard { min-height: 100px; max-width: 970px; }
.ad-leader { min-height: 90px; max-width: 728px; }
.ad-box { min-height: 250px; max-width: 300px; }
.ad-halfpage { min-height: 600px; max-width: 300px; }
.ad-skyscraper { min-height: 600px; max-width: 160px; }
.ad-mobile { min-height: 100px; max-width: 320px; }

.zone-billboard { padding: 0; }

/* Nudge to scroll past the pinned billboard ad. Sits above the header in
   both DOM order and stacking, pinned itself so it stays visible the whole
   time the ad is covering the page - the header's own sticky offset shifts
   down by its height (see --scroll-hint-h) so the two stack without
   overlapping once both are pinned. */
/* Only set on body.has-scroll-hint (see header.php) - everywhere else this
   stays undefined so .header-main's var(--scroll-hint-h, 0px) falls back
   to 0 instead of leaving a permanent gap above the bar. */
/* Plain, normal-flow content on purpose - it scrolls away like anything
   else once the header above it reaches the top and sticks there, instead
   of freezing in place alongside it. */
.scroll-hint-bar {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font: 700 10px/1 "Montserrat", -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
}
@media (min-width: 1024px) {
  .scroll-hint-bar { display: none; }
}

/* Pinned to the viewport behind everything else, so the header and the page
   under it slide over the top of it as the visitor scrolls - covering it
   bit by bit - instead of it scrolling away like normal content. main.js
   adds .is-pinned once it has measured the zone's height and inserted a
   same-height spacer to hold its place in the document. */
.zone-billboard.is-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Negative, not just low - a positive z-index would still paint above
     the page's own plain (non-positioned) content regardless of DOM order,
     which is exactly the covering effect this needs to NOT have here. */
  z-index: -1;
}
.zone-in-article { margin: 24px 0; }
.zone-hero-above { margin-bottom: 12px; }
.zone-hero-below { margin-bottom: 20px; }
.zone-latest-above { margin-bottom: 20px; }
.zone-latest-below { margin-bottom: 20px; }
.zone-pick-below { margin-bottom: 20px; }
.zone-rail { display: none; }

.sticky-ad {
  position: fixed; inset-inline: 0; bottom: var(--bottomnav-h);
  z-index: 55;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  padding: 6px;
  display: grid; place-items: center;
}
.sticky-ad .widget { margin: 0; }
.sticky-ad-close {
  position: absolute; top: -14px; right: 8px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-soft);
}
.sticky-ad-close .icon { width: 14px; height: 14px; }

/* --- Footer additions --------------------------------------------------- */
.social-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.social-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-soft);
}
.social-btn:hover { filter: brightness(1.1); }
.contact-email-btn {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-soft);
  max-width: max-content;
}
.contact-email-btn:hover { border-color: var(--brand); color: var(--brand); }
.contact-email-btn .icon { width: 20px; height: 20px; flex-shrink: 0; }
.contact-email-btn span { font-size: 13px; line-height: 1.4; }
.contact-email-btn span strong { display: block; font-size: 12px; color: var(--text); }
.footer-network { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.network-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; font-size: .8rem; }

/* --- Search panel extras ------------------------------------------------ */
.search-suggest { margin-top: 18px; }
.search-suggest > span {
  display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faint); margin-bottom: 8px;
}

/* --- Drawer submenu ----------------------------------------------------- */
.drawer-nav .menu-item-has-children { position: relative; }
.drawer-nav .submenu-toggle {
  position: absolute; top: 0; right: 0;
  width: 48px; height: 45px;
  display: grid; place-items: center;
  color: var(--text-faint);
}
.drawer-nav .submenu-toggle .icon { transition: transform .2s ease; }
.drawer-nav .menu-item-has-children.is-open > .submenu-toggle .icon { transform: rotate(180deg); }
.drawer-nav .sub-menu { display: none; }
.drawer-nav .menu-item-has-children.is-open > .sub-menu { display: block; }
.drawer-foot { margin-top: auto; display: grid; gap: 8px; padding: 16px; border-top: 1px solid var(--border); }

/* --- Theme toggle icon swap --------------------------------------------- */
.icon-in-dark { display: none; }
[data-theme="dark"] .icon-in-light { display: none; }
[data-theme="dark"] .icon-in-dark { display: block; }

/* --- Lightbox and toast ------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(0 0 0 / 92%);
  display: grid; place-items: center;
  padding: 16px;
}
.lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox-close {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 15%);
  color: #fff;
}

/* Small cards play their video here instead of in a thumbnail too tiny to
   watch anything in - a compact popup, not a full-bleed lightbox. */
.video-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(0 0 0 / 80%);
  display: grid; place-items: center;
  padding: 16px;
}
.video-modal-box {
  position: relative;
  width: min(92vw, 480px);
}
.video-modal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.video-modal-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-modal-close {
  position: absolute; top: -44px; right: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 15%);
  color: #fff;
}
/* Confirms on screen that the popup matches the card that opened it. */
.video-modal-title {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  text-align: center;
}
.video-modal-title:empty { display: none; }

.toast {
  position: fixed;
  bottom: calc(var(--bottomnav-h) + 16px);
  left: 50%;
  transform: translate(-50%, 12px);
  background: var(--text);
  color: var(--bg);
  font-size: .82rem; font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 210;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.to-top {
  position: fixed;
  right: 16px;
  bottom: calc(var(--bottomnav-h) + 16px);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text-soft);
  z-index: 55;
}
.to-top .icon { transform: rotate(180deg); }

body.has-sticky-ad .site-footer { padding-bottom: calc(var(--bottomnav-h) + 90px); }

/* ==========================================================================
   Wider screens
   ========================================================================== */
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .headline-strip { grid-template-columns: repeat(4, 1fr); }
  .video-grid { grid-template-columns: 1fr 1fr; }
  .entry-head-row { flex-direction: row; align-items: center; justify-content: space-between; }
  .post-nav { grid-template-columns: 1fr 1fr; }
  .post-nav-next { text-align: right; }
  .index-filter { grid-template-columns: 1fr 1fr auto auto; align-items: end; gap: 12px; }
  .archive-title { font-size: 1.7rem; }
}

@media (min-width: 1024px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
  }
  .layout-side { position: sticky; top: calc(var(--header-h) + 16px); }
  /* minmax(0, 1fr), not just a bare implicit column - without a ceiling a
     grid track auto-sizes to its widest child's content, so one wide ad
     (a 728px leaderboard dropped into the sidebar) was blowing the whole
     column out past the 300px it's supposed to stay inside. */
  .side-sticky { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .card-slide { max-width: 300px; }
  .rail-nav {
    position: absolute; top: 38%; z-index: 2;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    color: var(--text);
  }
  .rail-prev { left: -14px; }
  .rail-next { right: -14px; }
  .rail-nav.is-off { opacity: 0; pointer-events: none; }

  .sticky-ad { bottom: 0; }
  .toast, .to-top { bottom: 24px; }
  body.has-sticky-ad .site-footer { padding-bottom: 130px; }

}

/* The fixed side rails need room outside the 1160px shell. */
@media (min-width: 1500px) {
  .zone-rail {
    display: block;
    position: fixed;
    top: calc(var(--header-h) + 24px);
    z-index: 40;
  }
  .zone-rail-left { left: calc((100vw - var(--maxw)) / 2 - 180px); }
  .zone-rail-right { right: calc((100vw - var(--maxw)) / 2 - 180px); }
}

/* ==========================================================================
   Type scale and shell metrics
   Sizes follow the reference portal: a 14px/1.5 Inter base, a 768px white
   column on phones and tablets, and a 994px shell with a 300px rail from
   1024px up. Anything set earlier in this file is deliberately overridden
   here so the numbers live in one place.
   ========================================================================== */

/* --- Shell -------------------------------------------------------------- */
.header-main,
.site-header,
.site-main,
.site-footer,
.zone-billboard,
.sticky-ad {
  background: var(--bg);
  max-width: var(--maxw-mobile);
  margin-inline: auto;
}
.site-main { padding-block: 10px calc(var(--bottomnav-h) + 24px); }
.container { max-width: none; padding-inline: var(--pad); }

/* Menu button, logo, actions - logo left-aligned next to the menu button
   rather than centred, so it reads as the site's mark, not a floating
   ornament between two unrelated controls. */
.header-bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.site-brand {
  margin-right: 0;
  justify-content: flex-start;
  font-size: 1.3rem;
}

/* The bundled mark's own aspect ratio drives width; height is what's set. */
.site-logo { width: auto; height: 56px; max-width: min(60vw, 320px); object-fit: contain; }
.drawer-head .site-logo { height: 34px; }
.site-logo-footer { height: 40px; }
.icon-btn { width: 40px; height: 40px; }
.icon-btn svg { width: 21px; height: 21px; }

.chip-rail {
  border-top: 0;
  height: var(--rail-h);
  align-items: center;
  padding: 0;
  margin: 0;
  gap: 6px;
}
/* Plain bold text, no pill behind it. The row keeps the same order and the
   same starting position on every page; the section you are in is marked by
   colour alone, so nothing moves as you click through. */
.chip {
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  line-height: var(--rail-h);
}
.chip:hover { background: none; color: var(--brand); }
.chip.is-active { background: none; color: var(--brand); }
.chip-rail { gap: 16px; }

/* --- Section and widget headings ---------------------------------------- */
.block-title,
.section-head h2 {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .2px;
}
.block-title,
.section-head h2 { font-weight: 900; }
.block-head { margin-bottom: 10px; }
.block { margin-bottom: 20px; }
.widget { margin-bottom: 20px; }

/* --- Card meta ---------------------------------------------------------- */
.card-meta { font-size: 10px; gap: 6px; }
.card-cat { font-size: 10px; font-weight: 800; letter-spacing: .4px; }
.card-meta time { font-size: 10px; }
.summary {
  font-size: 13px;
  line-height: 20px;
  color: var(--text-soft);
  margin: 4px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Feed row ----------------------------------------------------------- */
/* Text on the left, square picture on the right: category and time first,
   then the headline, image trailing rather than leading. The markup already
   puts the text first (the thumbnail link is aria-hidden, decorative), so
   this is only ever a column-width change, never a reorder. */
.card-list {
  grid-template-columns: 1fr 85px;
  gap: 10px;
  padding: 12px 0;
  align-items: center;
}
.card-list .thumb { border-radius: var(--radius-sm); }
.card-list h3 {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  margin: 4px 0;
}
.card-list .card-meta { margin-top: 0; }
.card-list .summary { display: none; }

/* --- Hero and stacked cards --------------------------------------------- */
.card-hero { margin-bottom: 16px; }
.card-hero h2 { font-size: 20px; font-weight: 700; line-height: 1.3; }
.card-hero .card-cat { font-size: 10px; }

.card-stack h3 { font-size: 14px; font-weight: 700; line-height: 20px; }
.card-slide h3 { font-size: 14px; font-weight: 700; line-height: 20px; }

/* --- Video, rank, related ----------------------------------------------- */
.video-big h3 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.video-small h3 { font-size: 12px; font-weight: 700; line-height: 1.3; }
.video-small { grid-template-columns: 100px 1fr; }
.video-time { font-size: 10px; }

.rank-list h3 { font-size: 14px; font-weight: 700; line-height: 20px; }
.rank-number { font-size: 20px; font-weight: 800; }
.rank-item:has(.rank-thumb) { grid-template-columns: 24px 60px 1fr; }
.rank-item { grid-template-columns: 24px 1fr; gap: 10px; align-items: center; }

.block-related .card-stack h3 { font-size: 14px; line-height: 1.43; }

/* --- Editor's Pick ------------------------------------------------------- */
/* The exact same row as the Terbaru feed - same thumb size, same square
   crop, same gap - just mirrored, thumbnail on the left instead of the
   right. Sized up from 1024px along with Terbaru's own row (see the
   min-width: 1024px block below), so the two stay matched there too. */
.editors-pick-list { display: grid; gap: 4px; }
.editors-pick-list .card-list { grid-template-columns: 85px 1fr; }
.editors-pick-list .card-list > :first-child { order: 2; }
.editors-pick-list .card-list > :last-child { order: 1; }

/* No special panel treatment any more - Editor's Pick reads like any other
   widget block on the page, not a highlighted card. */

.hashtag { font-size: 12px; font-weight: 700; padding: 6px 10px; }

/* --- Article ------------------------------------------------------------ */
.entry-title { font-size: 24px; font-weight: 800; line-height: 1.2; margin-bottom: 12px; }
.entry-content { font-size: 16px; line-height: 1.5; }
.entry-content > * { margin-bottom: .9em; }
.entry-content h2 { font-size: 18px; }
.entry-content h3 { font-size: 16px; }
.byline-name { font-size: 13px; font-weight: 700; }
.byline-meta { font-size: 11px; }
.byline img { width: 34px; height: 34px; }
.breadcrumbs { font-size: 11px; }
.read-also a { font-size: 14px; line-height: 20px; }
.read-also-label { font-size: 11px; }
.author-card h3 { font-size: 15px; }
.author-card p { font-size: 13px; }
.post-nav strong { font-size: 14px; line-height: 20px; }

/* --- Ticker, chips, buttons --------------------------------------------- */
/* The ticker sits right on top of the feed, so the gap under it is small and
   the main padding stops adding a second one. On phones it runs edge to edge
   by cancelling the container gutters, which buys room for the headline. */
.ticker {
  height: 42px;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad);
  border-radius: 0;
}
/* A solid white plate with the brand word on it. Sized off its own text so
   nothing crops it, and only slightly rounded. */
.ticker-label {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: 24px;
  padding: 0 10px;
  background: #fff;
  color: var(--brand-dark);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1;
}
.ticker-items { font-size: 14px; line-height: 1.4; font-weight: 500; }
/* The global a:hover turns links brand-blue, which nearly vanishes against
   this ticker's own blue background - headlines here stay plain white. */
.ticker-items a:hover { color: inherit; }
.chip { font-size: 13px; font-weight: 700; }
.btn-more, .btn-solid, .btn-ghost { font-size: 13px; padding: 10px 20px; }
.load-done { font-size: 12px; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { font-size: 13px; padding-top: 24px; }
.footer-brand { font-size: 1.05rem; }
.network-list { font-size: 12px; }
.site-info { font-size: 11px; }

/* ==========================================================================
   1024px and up: the 994px shell with a 300px rail
   ========================================================================== */
@media (min-width: 1024px) {
  :root { --header-h: 64px; --rail-h: 46px; }

  .header-main,
  .site-header,
  .site-main,
  .site-footer,
  .zone-billboard,
  .sticky-ad {
    max-width: none;
  }
  .site-main { padding-block: 12px 40px; }
  .container { max-width: var(--maxw); }

  .layout { grid-template-columns: minmax(0, 1fr) var(--side-w); gap: 24px; }
  .layout-side { margin-top: 0; }

  .header-bar { height: var(--header-h); gap: 8px; }
  .site-brand { font-size: 1.6rem; }
  .site-logo { height: 60px; max-width: 340px; }
  .site-logo-footer { height: 46px; }
  .chip { font-size: 14px; }

  .block-title, .section-head h2 { margin-bottom: 0; }
  .block-head { margin-bottom: 13px; }
  .block, .widget { margin-bottom: 20px; }

  /* Feed rows widen to a 200px landscape thumb, still trailing the text. */
  .card-list { grid-template-columns: 1fr 200px; gap: 15px; padding: 10px 0; }
  .card-list .thumb { aspect-ratio: 200 / 117; border-radius: var(--radius-sm); }
  .card-list h3 { font-size: 17px; line-height: 1.4; }

  /* The sidebar column is only 300px wide - that same 200px thumb would
     leave barely 85px for the title and time, clipping both. A small
     square thumbnail instead, sized the way it already works on phones,
     leaves the text column enough room to read in full. */
  .layout-side .card-list { grid-template-columns: 1fr 84px; gap: 10px; }
  .layout-side .card-list .thumb { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); }
  .layout-side .card-list h3 { font-size: 14px; line-height: 20px; }

  /* Same 200px thumb as the Terbaru feed row above - this block also runs
     the full content width, not the sidebar's narrower one. */
  .editors-pick-list .card-list { grid-template-columns: 200px 1fr; gap: 15px; padding: 10px 0; }
  .editors-pick-list .card-list .thumb { aspect-ratio: 200 / 117; border-radius: var(--radius-sm); }
  .editors-pick-list .card-list h3 { font-size: 17px; line-height: 1.4; }

  .card-hero h2 { font-size: 26px; }
  .card-hero .hero-body { padding: 20px; }

  .card-stack h3, .card-slide h3 { font-size: 14px; line-height: 20px; }
  .block-related .card-stack h3 { font-size: 14px; line-height: 1.43; }

  .entry-title { font-size: 34px; font-weight: 800; line-height: 1.3; margin: 13px 0 14px; }
  .entry-content { font-size: 16px; line-height: 23px; }
  .entry-content h2 { font-size: 22px; }
  .entry-content h3 { font-size: 18px; }

  .rank-item:has(.rank-thumb) { grid-template-columns: 28px 60px 1fr; }
  .video-small { grid-template-columns: 120px 1fr; }
  /* Back inside the shell on desktop, where the strip has room already. */
  .ticker { margin-inline: 0; border-radius: 0 0 7px 7px; }
  .site-footer { font-size: 13px; }
}

/* --- Front page lead ----------------------------------------------------- */
/* The hero and the four stories beside it are one block, so the top of the
   page reads as a front page rather than as a picture followed by a list. */
.lead {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
/* Trending keyword strip above the hero: each word sits in its own soft
   box - var(--bg-soft), so it's a light grey card in light mode and a dark
   elevated one in dark mode, never a hardcoded grey either way. "Terpopuler"
   is a plain label box standing in for the old icon; the rest are the
   actual trending tags, same colour-per-position scheme as the sidebar's
   Trending Topics widget. */
.trending-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.trending-label {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.trending-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.trending-scroll::-webkit-scrollbar { display: none; }
.trending-pill {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.trending-label, .trending-pill {
  display: inline-flex; align-items: center;
  background: var(--bg-soft);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

.lead .card-hero {
  margin-bottom: 14px;
}

/* Hidden on mobile - the hero above already carries the lead story, and the
   Latest feed just below covers the rest without a second swipeable rail
   competing for the same space. Reappears from 640px up. */
.lead-secondary { display: none; }
@media (min-width: 640px) {
.lead-secondary {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.lead-secondary::-webkit-scrollbar { display: none; }
.lead-secondary > * {
  flex: 0 0 calc(50% - 6px);
  scroll-snap-align: start;
}

/* Secondary cards stay stacked on phones: picture over headline. No category
   line, and every headline occupies the same three-line box whether it fills
   it or not, so the pictures and the text sit on one line across the row. */
.lead-secondary .card-stack { display: flex; flex-direction: column; }
.lead-secondary .card-stack > a { display: block; }
.lead-secondary .card-stack .thumb { aspect-ratio: 16 / 9; }
.lead-secondary .card-stack h3 {
  font-size: 13px;
  line-height: 18px;
  margin: 2px 0 0;
  min-height: 54px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The section name goes, the timestamp stays: it is what tells the reader how
   fresh the story is. It sits straight under the picture, hard left. */
.lead-secondary .card-cat,
.lead-secondary .card-dot { display: none; }
.lead-secondary .card-meta {
  font-size: 10px;
  margin: 6px 0 0;
  justify-content: flex-start;
}
}

@media (min-width: 640px) {
  /* Room for all four, so the rail becomes a plain row again. */
  .lead-secondary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    overflow: visible;
  }
  .lead-secondary > * { flex: none; }
}

@media (min-width: 1024px) {
  /* Hero runs the full width of the main column - never past it, since
     .layout-main is already boxed in by the sidebar column beside it - with
     the four extra stories on their own row underneath, rather than
     shrinking the hero to share a row with a narrow side column. */
  .lead {
    display: block;
    padding-bottom: 20px;
    margin-bottom: 24px;
  }
  .lead .card-hero { margin-bottom: 20px; margin-inline: 0; }
  .lead .card-hero .thumb { aspect-ratio: 16 / 10; border-radius: var(--radius); }
  .lead .card-hero h2 { font-size: 28px; }

  /* Two cards visible at a time, same as the phone layout, just bigger -
     .lead no longer squeezes this into a single narrow column, so the
     overflow that main.js's auto-slide needs to page through is back. */
  .lead-secondary {
    display: flex;
    grid-template-columns: none;
    gap: 20px;
    /* The 640px rule above turns this visible so all four show at once in
       its 4-column grid - back to a clipped, scrollable rail here, or the
       two off-screen cards spill out over the sidebar instead of staying
       hidden until auto-slide (or a swipe) brings them into view. */
    overflow-x: auto;
  }
  .lead-secondary > * { flex: 0 0 calc(50% - 10px); }

  .lead-secondary .card-stack { display: flex; flex-direction: column; }
  .lead-secondary .card-stack > a { display: block; }
  .lead-secondary .card-stack .thumb { aspect-ratio: 16 / 9; }
  .lead-secondary .card-stack h3 {
    font-size: 15px;
    line-height: 21px;
    margin: 8px 0 0;
    min-height: 0;
    -webkit-line-clamp: 2;
  }
  .lead-secondary .card-meta { font-size: 11px; margin-top: 6px; }
}