/* ============================================================
   NewsCore — main.css
   Warna: Biru (#0057b8) Primer | Merah (#e63946) Aksen
   Mobile First | Dark Mode via CSS Variables
   ============================================================ */

/* ─── 1. CSS VARIABLES ─────────────────────────────────────── */
:root {
  /* Brand */
  --nc-primary:       #0057b8;
  --nc-primary-dark:  #003d85;
  --nc-primary-light: #e8f0fb;
  --nc-accent:        #e63946;
  --nc-accent-dark:   #c1121f;
  --nc-link:          #0057b8;

  /* Neutral */
  --nc-bg:            #ffffff;
  --nc-bg-alt:        #f4f6fa;
  --nc-bg-card:       #ffffff;
  --nc-text:          #1a1d23;
  --nc-text-muted:    #5c6473;
  --nc-border:        #e2e6ed;
  --nc-shadow:        rgba(0,0,0,0.08);

  /* Typography */
  --nc-font-base:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nc-font-serif:    Georgia, "Times New Roman", serif;
  --nc-font-mono:     "Courier New", monospace;
  --nc-font-size:     16px;
  --nc-line-height:   1.65;

  /* Spacing */
  --nc-gap:           1.25rem;
  --nc-radius:        6px;
  --nc-radius-lg:     12px;

  /* Layout */
  --nc-container:     1200px;
  --nc-sidebar-w:     320px;

  /* Ticker */
  --nc-ticker-bg:     #e63946;
  --nc-ticker-speed:  30s;
  --nc-ticker-text:   #ffffff;

  /* Z-index layers */
  --nc-z-header:      100;
  --nc-z-nav:         90;
  --nc-z-ticker:      80;
  --nc-z-dropdown:    200;
  --nc-z-modal:       9000;
}

/* Dark Mode */
[data-theme="dark"] {
  --nc-bg:         #0e1117;
  --nc-bg-alt:     #161b24;
  --nc-bg-card:    #1c2333;
  --nc-text:       #e8eaf0;
  --nc-text-muted: #8892a4;
  --nc-border:     #2a3040;
  --nc-shadow:     rgba(0,0,0,0.4);
  --nc-primary-light: #0d2444;
}

/* ─── 2. RESET & BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: var(--nc-font-size); scroll-behavior: smooth; }

body {
  font-family: var(--nc-font-base);
  font-size: 1rem;
  line-height: var(--nc-line-height);
  color: var(--nc-text);
  background: var(--nc-bg);
  -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--nc-link); text-decoration: none; }
a:hover { color: var(--nc-primary-dark); text-decoration: underline; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ─── 3. UTILITY ───────────────────────────────────────────── */
.nc-container {
  width: 100%;
  max-width: var(--nc-container);
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 768px)  { .nc-container { padding: 0 1.5rem; } }
@media (min-width: 1200px) { .nc-container { padding: 0 2rem; } }

.nc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.nc-no-posts { padding: 2rem; text-align: center; color: var(--nc-text-muted); }

/* ─── 4. BUTTONS ───────────────────────────────────────────── */
.nc-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.2rem;
  background: var(--nc-primary);
  color: #fff;
  border-radius: var(--nc-radius);
  font-size: .875rem; font-weight: 600;
  text-decoration: none;
  transition: background .2s, transform .15s;
  border: 2px solid transparent;
}
.nc-btn:hover { background: var(--nc-primary-dark); color: #fff; text-decoration: none; transform: translateY(-1px); }
.nc-btn--outline { background: transparent; color: var(--nc-primary); border-color: var(--nc-primary); }
.nc-btn--outline:hover { background: var(--nc-primary); color: #fff; }
.nc-btn--sm { padding: .35rem .8rem; font-size: .8rem; }
.nc-btn--accent { background: var(--nc-accent); }
.nc-btn--accent:hover { background: var(--nc-accent-dark); }

/* ─── 5. TOP BAR ───────────────────────────────────────────── */
.nc-topbar {
  background: var(--nc-primary-dark);
  color: #b8d0f0;
  font-size: .75rem;
  line-height: 1;
}
.nc-topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 34px; gap: 1rem;
}
.nc-topbar__date { font-weight: 500; white-space: nowrap; }
.nc-topbar__nav { display: flex; gap: 0; }
.nc-topbar__nav li a {
  display: block; padding: 0 .7rem; height: 34px; line-height: 34px;
  color: #b8d0f0; font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .3px;
}
.nc-topbar__nav li a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.07); }
.nc-topbar__right { display: flex; align-items: center; gap: .6rem; }
.nc-topbar__social { display: flex; align-items: center; gap: .3rem; }
.nc-topbar__social a {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; color: #b8d0f0; border-radius: 3px;
  transition: color .2s, background .2s;
}
.nc-topbar__social a:hover { color: #fff; background: rgba(255,255,255,.1); }
.nc-dark-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; color: #b8d0f0; border-radius: 3px;
  transition: color .2s;
}
.nc-dark-toggle:hover { color: #fff; }
[data-theme="light"] .nc-icon-moon { display: none; }
[data-theme="dark"]  .nc-icon-sun  { display: none; }

/* ─── 6. SITE HEADER ───────────────────────────────────────── */
.nc-header {
  background: var(--nc-bg);
  border-bottom: 2px solid var(--nc-primary);
  box-shadow: 0 2px 8px var(--nc-shadow);
}
.nc-header--sticky {
  position: sticky; top: 0; z-index: var(--nc-z-header);
}
.nc-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; gap: 1rem;
}
.nc-site-name { display: flex; flex-direction: column; text-decoration: none; }
.nc-site-name__main {
  font-size: 1.5rem; font-weight: 800; color: var(--nc-primary);
  letter-spacing: -.5px; line-height: 1.1;
}
.nc-site-name__tagline { font-size: .7rem; color: var(--nc-text-muted); font-weight: 400; }
.nc-site-name:hover .nc-site-name__main { text-decoration: none; }
.nc-header__brand .custom-logo-link { display: block; }
.nc-header__brand .custom-logo { height: 50px; width: auto; max-width: 200px; }
.nc-header__right { display: flex; align-items: center; gap: .5rem; }
.nc-search-toggle, .nc-menu-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; color: var(--nc-text);
  border-radius: var(--nc-radius); transition: background .2s;
}
.nc-search-toggle:hover, .nc-menu-toggle:hover { background: var(--nc-bg-alt); }
.nc-menu-toggle { flex-direction: column; gap: 4px; }
.nc-menu-toggle__bar {
  display: block; width: 20px; height: 2px;
  background: var(--nc-text); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nc-menu-toggle.is-active .nc-menu-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nc-menu-toggle.is-active .nc-menu-toggle__bar:nth-child(2) { opacity: 0; }
.nc-menu-toggle.is-active .nc-menu-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1024px) { .nc-menu-toggle { display: none; } }

/* Search Box */
.nc-search-box {
  background: var(--nc-bg-alt); border-top: 1px solid var(--nc-border);
  padding: .75rem 0; animation: nc-slidedown .2s ease;
}
@keyframes nc-slidedown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.nc-search-form { display: flex; gap: .5rem; align-items: center; }
.nc-search-form__input {
  flex: 1; padding: .6rem 1rem; border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius); font-size: .95rem;
  background: var(--nc-bg); color: var(--nc-text);
}
.nc-search-form__btn {
  padding: .6rem .9rem; background: var(--nc-primary); color: #fff;
  border-radius: var(--nc-radius); display: flex; align-items: center;
}
.nc-search-form__close {
  padding: .6rem; color: var(--nc-text-muted); display: flex; align-items: center;
}

/* ─── 7. PRIMARY NAV ───────────────────────────────────────── */
.nc-nav {
  background: var(--nc-primary);
  position: sticky; top: 70px; z-index: var(--nc-z-nav);
  display: none;
}
@media (min-width: 1024px) { .nc-nav { display: block; } }
.nc-nav__inner { display: flex; }
.nc-nav__menu { display: flex; flex-wrap: nowrap; }
.nc-nav__menu > li { position: relative; }
.nc-nav__menu > li > a {
  display: block; padding: 0 1rem; height: 44px; line-height: 44px;
  color: rgba(255,255,255,.9); font-size: .85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px; white-space: nowrap;
  transition: background .2s, color .2s;
}
.nc-nav__menu > li:hover > a,
.nc-nav__menu > li.current-menu-item > a,
.nc-nav__menu > li.current-menu-ancestor > a {
  background: rgba(0,0,0,.2); color: #fff;
}
/* Dropdown */
.nc-nav__menu .sub-menu {
  display: none; position: absolute; top: 44px; left: 0;
  min-width: 220px; background: var(--nc-bg); border: 1px solid var(--nc-border);
  border-top: 3px solid var(--nc-accent);
  box-shadow: 0 4px 16px var(--nc-shadow);
  border-radius: 0 0 var(--nc-radius) var(--nc-radius);
  z-index: var(--nc-z-dropdown);
}
.nc-nav__menu li:hover > .sub-menu { display: block; }
.nc-nav__menu .sub-menu li a {
  display: block; padding: .6rem 1rem; color: var(--nc-text);
  font-size: .85rem; border-bottom: 1px solid var(--nc-border);
  transition: background .15s;
}
.nc-nav__menu .sub-menu li:last-child a { border-bottom: none; }
.nc-nav__menu .sub-menu li a:hover { background: var(--nc-bg-alt); text-decoration: none; }

/* ─── 8. MOBILE MENU ───────────────────────────────────────── */
.nc-mobile-menu {
  position: fixed; top: 0; left: 0; width: 280px; height: 100%;
  background: var(--nc-bg); z-index: var(--nc-z-modal);
  box-shadow: 4px 0 24px rgba(0,0,0,.15);
  overflow-y: auto;
  transform: translateX(-100%); transition: transform .25s ease;
}
.nc-mobile-menu:not([hidden]) { transform: translateX(0); }
.nc-mobile-menu__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem; background: var(--nc-primary); color: #fff;
}
.nc-mobile-menu__close { color: #fff; display: flex; align-items: center; }
.nc-mobile-menu__body { padding: 1rem; }
.nc-mobile-menu__nav li a {
  display: block; padding: .7rem .5rem;
  border-bottom: 1px solid var(--nc-border);
  color: var(--nc-text); font-size: .95rem; font-weight: 500;
}
.nc-mobile-menu__nav .sub-menu { padding-left: 1rem; }
.nc-mobile-menu__nav .sub-menu li a { font-size: .875rem; }
.nc-mobile-search { display: flex; gap: .4rem; margin-top: 1rem; }
.nc-mobile-search input { flex:1; padding: .5rem .75rem; border: 1px solid var(--nc-border); border-radius: var(--nc-radius); background: var(--nc-bg); color: var(--nc-text); }
.nc-mobile-search button { padding: .5rem .75rem; background: var(--nc-primary); color: #fff; border-radius: var(--nc-radius); display: flex; align-items: center; }
.nc-mobile-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: calc(var(--nc-z-modal) - 1); backdrop-filter: blur(2px);
}
.nc-mobile-overlay:not([hidden]) { display: block; }

/* ─── 9. BREAKING NEWS TICKER ──────────────────────────────── */
.nc-ticker {
  background: var(--nc-ticker-bg);
  color: var(--nc-ticker-text);
  font-size: .8rem; overflow: hidden;
}
.nc-ticker__inner {
  display: flex; align-items: center; height: 36px; gap: 0;
}
.nc-ticker__label {
  flex-shrink: 0;
  background: rgba(0,0,0,.2);
  padding: 0 .75rem; height: 100%;
  display: flex; align-items: center; gap: .3rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: .72rem;
  white-space: nowrap;
}
.nc-ticker__track-wrapper {
  flex: 1; overflow: hidden; position: relative; height: 100%;
}
.nc-ticker__track {
  display: flex; align-items: center; height: 100%;
  white-space: nowrap;
  animation: nc-ticker var(--nc-ticker-speed) linear infinite;
}
.nc-ticker__track.is-paused { animation-play-state: paused; }
@keyframes nc-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.nc-ticker__item {
  display: inline-flex; align-items: center; padding: 0 1.5rem;
}
.nc-ticker__item::before {
  content: '▶'; font-size: .5rem; margin-right: .75rem; opacity: .7;
}
.nc-ticker__link { color: #fff; text-decoration: none; font-weight: 500; }
.nc-ticker__link:hover { text-decoration: underline; color: #fff; }
.nc-ticker__pause {
  flex-shrink: 0; color: rgba(255,255,255,.7); padding: 0 .75rem; height: 100%;
  display: flex; align-items: center;
}
.nc-ticker__pause:hover { color: #fff; }

/* ─── 10. SECTION HEADER ───────────────────────────────────── */
.nc-section { padding: 2rem 0; }
.nc-section__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; padding-bottom: .6rem;
  border-bottom: 3px solid var(--nc-primary);
}
.nc-section__title {
  font-size: 1.1rem; font-weight: 800; color: var(--nc-text);
  text-transform: uppercase; letter-spacing: .3px;
  display: flex; align-items: center; gap: .4rem;
}
.nc-section__icon { color: var(--nc-accent); flex-shrink: 0; }
.nc-section__more {
  display: flex; align-items: center; gap: .3rem;
  font-size: .78rem; color: var(--nc-primary); font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px; white-space: nowrap;
}
.nc-section__more:hover { color: var(--nc-accent); text-decoration: none; }

/* ─── 11. CATEGORY BADGE ───────────────────────────────────── */
.nc-badge {
  display: inline-block;
  padding: .2rem .55rem;
  background: var(--nc-primary);
  color: #fff;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  border-radius: 3px; margin-bottom: .4rem; text-decoration: none;
  transition: opacity .15s;
}
.nc-badge:hover { opacity: .85; text-decoration: none; color: #fff; }

/* ─── 12. META ─────────────────────────────────────────────── */
.nc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.nc-meta--sm .nc-meta__item { font-size: .75rem; }
.nc-meta--xs .nc-meta__item { font-size: .7rem; }
.nc-meta__item { display: flex; align-items: center; gap: .25rem; color: var(--nc-text-muted); font-size: .8rem; }
.nc-meta__item a { color: var(--nc-text-muted); }
.nc-meta__item a:hover { color: var(--nc-primary); }
.nc-meta svg { flex-shrink: 0; }

/* ─── 13. LAYOUT ───────────────────────────────────────────── */
.nc-layout { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .nc-layout--sidebar {
    grid-template-columns: 1fr var(--nc-sidebar-w);
  }
}

/* ─── 14. GRID SYSTEM ──────────────────────────────────────── */
.nc-grid { display: grid; gap: var(--nc-gap); }
.nc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nc-grid--3 { grid-template-columns: 1fr 1fr; }
.nc-grid--4 { grid-template-columns: 1fr 1fr; }
.nc-grid--list { grid-template-columns: 1fr; }
@media (min-width: 640px) { .nc-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) {
  .nc-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .nc-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─── 15. CARD ─────────────────────────────────────────────── */
.nc-card {
  background: var(--nc-bg-card); border-radius: var(--nc-radius);
  border: 1px solid var(--nc-border);
  overflow: hidden; transition: box-shadow .2s, transform .2s;
  display: flex; flex-direction: column;
}
.nc-card:hover { box-shadow: 0 6px 20px var(--nc-shadow); transform: translateY(-2px); }
.nc-card__thumb {
  display: block; overflow: hidden; background: var(--nc-bg-alt);
  aspect-ratio: 16/9; position: relative;
}
.nc-card__thumb img { transition: transform .3s; }
.nc-card:hover .nc-card__thumb img { transform: scale(1.04); }
.nc-card__body { padding: .85rem; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.nc-card__title { font-size: .95rem; font-weight: 700; line-height: 1.35; margin: 0; }
.nc-card__title a { color: var(--nc-text); }
.nc-card__title a:hover { color: var(--nc-primary); text-decoration: none; }
.nc-card__excerpt { font-size: .82rem; color: var(--nc-text-muted); line-height: 1.5; flex: 1; }
.nc-card__play-icon {
  position: absolute; bottom: .5rem; right: .5rem;
  background: var(--nc-accent); color: #fff;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.nc-card__play-icon svg { width: 12px; height: 12px; margin-left: 2px; }

/* Horizontal list card */
.nc-card--hlist {
  flex-direction: row; align-items: flex-start;
  border-radius: var(--nc-radius); padding: .6rem;
}
.nc-card--hlist .nc-card__thumb {
  width: 100px; flex-shrink: 0; border-radius: 4px;
  aspect-ratio: 16/9;
}
.nc-card--hlist .nc-card__body { padding: 0 0 0 .75rem; }
.nc-card--hlist.nc-card--sm .nc-card__thumb { width: 80px; }
.nc-card--hlist .nc-card__title { font-size: .85rem; }

/* Trending card */
.nc-card--trending { flex-direction: row; padding: .7rem; align-items: flex-start; gap: .75rem; border: none; border-bottom: 1px solid var(--nc-border); border-radius: 0; }
.nc-card--trending:last-child { border-bottom: none; }
.nc-card--trending:hover { transform: none; box-shadow: none; background: var(--nc-bg-alt); }
.nc-card__rank { font-size: 1.5rem; font-weight: 900; color: var(--nc-border); line-height: 1; flex-shrink: 0; min-width: 36px; }
.nc-card--trending:nth-child(1) .nc-card__rank { color: var(--nc-accent); }
.nc-card--trending:nth-child(2) .nc-card__rank { color: var(--nc-primary); }
.nc-card--trending:nth-child(3) .nc-card__rank { color: #e9a500; }
.nc-card--trending .nc-card__thumb { width: 80px; flex-shrink: 0; border-radius: 4px; aspect-ratio: 16/9; }
.nc-card--trending .nc-card__body { padding: 0; }
.nc-card--trending .nc-card__title { font-size: .85rem; }

/* ─── 16. HERO SECTION ─────────────────────────────────────── */
.nc-hero { padding-bottom: 0; }
.nc-hero__grid { display: grid; gap: 1rem; }
@media (min-width: 768px) {
  .nc-hero__grid { grid-template-columns: 1fr 360px; gap: 1.5rem; }
}
.nc-hero__main { position: relative; border-radius: var(--nc-radius-lg); overflow: hidden; }
.nc-hero__thumb { display: block; aspect-ratio: 16/9; overflow: hidden; }
.nc-hero__thumb img { width: 100%; height: 100%; transition: transform .4s; }
.nc-hero__main:hover .nc-hero__thumb img { transform: scale(1.03); }
.nc-hero__body {
  padding: 1.5rem;
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 60%, transparent 100%);
  color: #fff;
  /* BUG FIX #1: overlay ini menutupi link gambar di belakangnya.
     pointer-events:none = klik menembus overlay ke link di bawah.
     Elemen interaktif (a, button) di dalam body diaktifkan kembali. */
  pointer-events: none;
}
.nc-hero__body a,
.nc-hero__body button { pointer-events: auto; }
.nc-hero__title {
  font-size: 1.35rem; font-weight: 800; line-height: 1.25; margin: .5rem 0;
}
@media (min-width: 768px) { .nc-hero__title { font-size: 1.6rem; } }
.nc-hero__title a { color: #fff; text-decoration: none; }
.nc-hero__title a:hover { text-decoration: underline; }
.nc-hero__excerpt { font-size: .85rem; opacity: .9; margin-bottom: .6rem; }
.nc-hero__body .nc-meta { color: rgba(255,255,255,.8); }
.nc-hero__body .nc-meta__item { color: rgba(255,255,255,.8); }
.nc-hero__secondary { display: flex; flex-direction: column; gap: 0; }
.nc-hero__secondary .nc-card--hlist {
  border-bottom: 1px solid var(--nc-border); border-radius: 0;
  padding: .8rem 0; background: none; border-left: none; border-right: none; border-top: none;
}
.nc-hero__secondary .nc-card--hlist:first-child { border-top: 1px solid var(--nc-border); }
.nc-hero__secondary .nc-card--hlist:hover { background: var(--nc-bg-alt); }

/* ─── 17. TRENDING SECTION ─────────────────────────────────── */
.nc-trending { background: var(--nc-bg-alt); padding: 1.5rem 0; }
.nc-trending__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .nc-trending__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .nc-trending__grid { grid-template-columns: repeat(5, 1fr); } }

/* ─── 18. CATEGORY BLOCKS ──────────────────────────────────── */
.nc-cat-blocks { background: var(--nc-bg); }
.nc-cat-block { margin-bottom: 2.5rem; }
.nc-cat-block__inner {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .nc-cat-block__inner { grid-template-columns: 1fr 340px; }
}
.nc-cat-block__featured { position: relative; border-radius: var(--nc-radius); overflow: hidden; }
.nc-cat-block__featured-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; }
.nc-cat-block__featured-thumb img { width: 100%; height: 100%; transition: transform .3s; }
.nc-cat-block__featured:hover .nc-cat-block__featured-thumb img { transform: scale(1.04); }
.nc-cat-block__featured-body {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
  color: #fff;
  /* BUG FIX #2: sama seperti nc-hero__body - overlay menutupi link thumbnail */
  pointer-events: none;
}
.nc-cat-block__featured-body a,
.nc-cat-block__featured-body button { pointer-events: auto; }
.nc-cat-block__featured-title { font-size: 1rem; font-weight: 700; line-height: 1.3; margin-bottom: .3rem; }
.nc-cat-block__featured-title a { color: #fff; }
.nc-cat-block__featured-excerpt { font-size: .8rem; opacity: .85; }
.nc-cat-block__list { display: flex; flex-direction: column; gap: 0; background: var(--nc-bg-card); border: 1px solid var(--nc-border); border-radius: var(--nc-radius); overflow: hidden; }

/* ─── 19. VIDEO SECTION ────────────────────────────────────── */
.nc-video-section { background: #0e1520; color: #e8eaf0; }
[data-theme="dark"] .nc-video-section { background: #070b12; }
.nc-video-section .nc-section__header { border-bottom-color: var(--nc-accent); }
.nc-video-section .nc-section__title { color: #e8eaf0; }
.nc-video-section .nc-section__more { color: #89b4f0; }
.nc-video-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .nc-video-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .nc-video-grid { grid-template-columns: repeat(6, 1fr); } }
.nc-video-card { background: #1c2a3a; border-radius: var(--nc-radius); overflow: hidden; }
.nc-video-card__media { position: relative; aspect-ratio: 16/9; overflow: hidden; cursor: pointer; background: #0a1220; }
.nc-video-card__thumb { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.nc-video-card__media:hover .nc-video-card__thumb { opacity: .8; }
.nc-video-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--nc-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, background .2s;
}
.nc-video-card__play svg { width: 16px; height: 16px; margin-left: 2px; }
.nc-video-card__media:hover .nc-video-card__play { transform: translate(-50%,-50%) scale(1.1); background: var(--nc-accent-dark); }
.nc-video-card__duration {
  position: absolute; bottom: .4rem; right: .4rem;
  background: rgba(0,0,0,.7); color: #fff;
  font-size: .7rem; font-weight: 600; padding: .1rem .35rem; border-radius: 3px;
}
.nc-video-card__body { padding: .6rem; }
.nc-video-card__title { font-size: .8rem; font-weight: 600; line-height: 1.3; margin-top: .25rem; }
.nc-video-card__title a { color: #e8eaf0; text-decoration: none; }
.nc-video-card__title a:hover { color: #fff; text-decoration: underline; }
.nc-video-card .nc-meta { color: #6b88a8; }

/* ─── 20. VIDEO PLAYER (Single) ────────────────────────────── */
.nc-video-player { margin-bottom: 1.5rem; border-radius: var(--nc-radius); overflow: hidden; background: #000; }
.nc-video-player__poster { position: relative; aspect-ratio: 16/9; cursor: pointer; }
.nc-video-player__thumb { width: 100%; height: 100%; object-fit: cover; }
.nc-video-player__play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--nc-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, background .2s;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.nc-video-player__play-btn svg { width: 28px; height: 28px; margin-left: 4px; }
.nc-video-player__poster:hover .nc-video-player__play-btn { transform: translate(-50%,-50%) scale(1.08); }
.nc-video-player__duration {
  position: absolute; bottom: .75rem; right: .75rem;
  background: rgba(0,0,0,.75); color: #fff;
  font-size: .8rem; padding: .2rem .5rem; border-radius: 4px;
}
.nc-video-player__frame { aspect-ratio: 16/9; }
.nc-video-player__frame iframe { width: 100%; height: 100%; border: none; display: block; }

/* ─── 21. ARTICLE (Single) ─────────────────────────────────── */
.nc-single { padding: 2rem 0; }
.nc-article { max-width: 100%; }
.nc-breadcrumb { font-size: .78rem; color: var(--nc-text-muted); margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.nc-breadcrumb a { color: var(--nc-text-muted); }
.nc-breadcrumb a:hover { color: var(--nc-primary); }
.nc-article__header { margin-bottom: 1.5rem; }
.nc-article__title { font-size: 1.7rem; font-weight: 800; line-height: 1.2; margin: .6rem 0 .8rem; color: var(--nc-text); }
@media (min-width: 768px) { .nc-article__title { font-size: 2.1rem; } }
.nc-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.nc-article__featured-image { margin-bottom: 1.5rem; border-radius: var(--nc-radius); overflow: hidden; }
.nc-article__featured-image img { width: 100%; }
.nc-article__caption { font-size: .78rem; color: var(--nc-text-muted); padding: .4rem .6rem; text-align: center; font-style: italic; }
.nc-article__content { font-size: 1rem; line-height: 1.8; color: var(--nc-text); }
.nc-article__content p { margin-bottom: 1.25rem; }
.nc-article__content h2 { font-size: 1.4rem; font-weight: 700; margin: 2rem 0 .75rem; padding-left: .8rem; border-left: 4px solid var(--nc-primary); }
.nc-article__content h3 { font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.nc-article__content ul, .nc-article__content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.nc-article__content ul { list-style: disc; }
.nc-article__content ol { list-style: decimal; }
.nc-article__content li { margin-bottom: .4rem; }
.nc-article__content blockquote {
  border-left: 4px solid var(--nc-accent); padding: .75rem 1rem;
  background: var(--nc-bg-alt); margin: 1.5rem 0;
  border-radius: 0 var(--nc-radius) var(--nc-radius) 0;
  font-style: italic; color: var(--nc-text-muted);
}
.nc-article__content a { color: var(--nc-link); text-decoration: underline; }
.nc-article__content img { border-radius: var(--nc-radius); margin: 1rem 0; }
.nc-article__content table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.nc-article__content th, .nc-article__content td { border: 1px solid var(--nc-border); padding: .5rem .75rem; }
.nc-article__content th { background: var(--nc-bg-alt); font-weight: 700; }
.nc-article__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1.5rem 0; padding-top: 1rem; border-top: 1px solid var(--nc-border); }
.nc-article__tags svg { color: var(--nc-text-muted); }
.nc-tag {
  display: inline-block; padding: .25rem .65rem;
  background: var(--nc-bg-alt); border: 1px solid var(--nc-border);
  border-radius: 20px; font-size: .75rem; color: var(--nc-text-muted);
  transition: background .15s; text-decoration: none;
}
.nc-tag:hover { background: var(--nc-primary-light); color: var(--nc-primary); border-color: var(--nc-primary); text-decoration: none; }
.nc-article__support { margin: 1.5rem 0; }

/* ─── 22. SOCIAL SHARE ─────────────────────────────────────── */
.nc-share { margin: 1.5rem 0; padding: 1rem; background: var(--nc-bg-alt); border-radius: var(--nc-radius); }
.nc-share__heading { font-size: .9rem; font-weight: 700; margin-bottom: .75rem; color: var(--nc-text); }
.nc-share--top { background: none; padding: 0; }
.nc-share__buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.nc-share__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem; border-radius: var(--nc-radius);
  font-size: .8rem; font-weight: 600; text-decoration: none;
  transition: opacity .15s, transform .15s; color: #fff;
}
.nc-share__btn:hover { opacity: .88; transform: translateY(-1px); text-decoration: none; color: #fff; }
.nc-share__btn--facebook  { background: #1877f2; }
.nc-share__btn--twitter   { background: #000; }
.nc-share__btn--whatsapp  { background: #25d366; }
.nc-share__btn--telegram  { background: #0088cc; }
.nc-share__btn--copy      { background: var(--nc-text-muted); color: #fff; }
.nc-share__btn--copy.copied { background: #27ae60; }

/* ─── 23. AUTHOR BOX ───────────────────────────────────────── */
.nc-author-box {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem; background: var(--nc-bg-alt);
  border-radius: var(--nc-radius); border: 1px solid var(--nc-border);
  margin: 2rem 0;
}
.nc-author-box__avatar { width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.nc-author-box__name { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.nc-author-box__name a { color: var(--nc-text); }
.nc-author-box__bio { font-size: .85rem; color: var(--nc-text-muted); margin-bottom: .6rem; line-height: 1.5; }

/* ─── 24. RELATED POSTS ────────────────────────────────────── */
.nc-related { margin: 2rem 0; }
.nc-related__title { font-size: 1rem; font-weight: 800; text-transform: uppercase; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 3px solid var(--nc-primary); }

/* ─── 25. SIDEBAR WIDGETS ──────────────────────────────────── */
.nc-layout__sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.widget { background: var(--nc-bg-card); border: 1px solid var(--nc-border); border-radius: var(--nc-radius); padding: 1rem; }
.widget-title { font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; margin-bottom: .85rem; padding-bottom: .5rem; border-bottom: 2px solid var(--nc-primary); display: flex; }
.widget-title span { display: block; }

/* Trending Widget */
.nc-widget-trending { display: flex; flex-direction: column; gap: 0; }
.nc-widget-trending__item { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--nc-border); }
.nc-widget-trending__item:last-child { border-bottom: none; padding-bottom: 0; }
.nc-widget-trending__rank { font-size: 1.1rem; font-weight: 900; color: var(--nc-border); line-height: 1.2; flex-shrink: 0; min-width: 28px; }
.nc-widget-trending__item:nth-child(1) .nc-widget-trending__rank { color: var(--nc-accent); }
.nc-widget-trending__item:nth-child(2) .nc-widget-trending__rank { color: var(--nc-primary); }
.nc-widget-trending__item:nth-child(3) .nc-widget-trending__rank { color: #e9a500; }
.nc-widget-trending__thumb { width: 65px; flex-shrink: 0; border-radius: 3px; aspect-ratio: 16/9; overflow: hidden; }
.nc-widget-trending__thumb img { width: 100%; height: 100%; object-fit: cover; }
.nc-widget-trending__title { font-size: .82rem; font-weight: 600; line-height: 1.35; display: block; color: var(--nc-text); text-decoration: none; margin-bottom: .2rem; }
.nc-widget-trending__title:hover { color: var(--nc-primary); text-decoration: underline; }

/* Latest/Category Widget */
.nc-widget-latest, .nc-widget-catposts--list { display: flex; flex-direction: column; gap: 0; }
.nc-widget-latest__item, .nc-widget-catposts__item { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--nc-border); }
.nc-widget-latest__item:last-child, .nc-widget-catposts__item:last-child { border-bottom: none; }
.nc-widget-latest__thumb, .nc-widget-catposts__thumb { width: 65px; flex-shrink: 0; border-radius: 3px; aspect-ratio: 16/9; overflow: hidden; }
.nc-widget-latest__thumb img, .nc-widget-catposts__thumb img { width:100%; height:100%; object-fit:cover; }
.nc-widget-latest__title, .nc-widget-catposts__title { font-size: .82rem; font-weight: 600; line-height: 1.35; color: var(--nc-text); display: block; text-decoration: none; }
.nc-widget-latest__title:hover, .nc-widget-catposts__title:hover { color: var(--nc-primary); text-decoration: underline; }
.nc-widget-latest__date { font-size: .7rem; color: var(--nc-text-muted); display: flex; align-items: center; gap: .2rem; margin-top: .2rem; }

/* Video Widget */
.nc-widget-videos { display: flex; flex-direction: column; gap: 0; }
.nc-widget-videos__item { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--nc-border); }
.nc-widget-videos__item:last-child { border-bottom: none; }
.nc-widget-videos__thumb { width: 80px; flex-shrink: 0; border-radius: 4px; aspect-ratio: 16/9; overflow: hidden; position: relative; background: #0a1220; }
.nc-widget-videos__thumb img { width:100%; height:100%; object-fit:cover; }
.nc-widget-videos__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--nc-accent); color:#fff; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.nc-widget-videos__play svg { width:9px; height:9px; margin-left:1px; }
.nc-widget-videos__dur { position:absolute; bottom:2px; right:2px; background:rgba(0,0,0,.7); color:#fff; font-size:.6rem; padding:1px 3px; border-radius:2px; }
.nc-widget-videos__title { font-size:.82rem; font-weight:600; color:var(--nc-text); display:block; margin-bottom:.2rem; }
.nc-widget-videos__title:hover { color:var(--nc-primary); text-decoration:underline; }
.nc-widget-videos__date { font-size:.7rem; color:var(--nc-text-muted); display:flex; align-items:center; gap:.2rem; }
.nc-widget-more { display:flex; align-items:center; gap:.3rem; font-size:.78rem; color:var(--nc-primary); font-weight:600; margin-top:.75rem; padding-top:.75rem; border-top:1px dashed var(--nc-border); }
.nc-widget-more:hover { color:var(--nc-accent); text-decoration:none; }

/* Grid category widget */
.nc-widget-catposts--grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* ─── 26. ADS ──────────────────────────────────────────────── */
.nc-ads { text-align: center; overflow: hidden; }
.nc-ads--header { padding: .5rem 0; background: var(--nc-bg-alt); }
.nc-ads--sidebar { margin: 0; }
.nc-ads--in-article, .nc-ads--in_article_top, .nc-ads--in_article_bottom { margin: 1.5rem 0; }
.nc-ads--footer_top { padding: 1rem 0; background: var(--nc-bg-alt); }
.nc-ads--footer { padding: 1rem 0; }
.nc-ads--between_blocks { margin: 1rem 0; }

/* ─── 27. FOOTER ───────────────────────────────────────────── */
.nc-footer { background: #0d1520; color: #8899b0; margin-top: 2.5rem; }
.nc-footer__widgets { padding: 2.5rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.nc-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .nc-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nc-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.nc-footer__site-name { font-size: 1.4rem; font-weight: 800; color: #fff; text-decoration: none; display: block; margin-bottom: .75rem; }
.nc-footer__desc { font-size: .85rem; line-height: 1.6; color: #6b7f97; margin-bottom: 1rem; }
.nc-footer__social { display: flex; gap: .5rem; }
.nc-footer__social-link { color: #6b7f97; display: flex; align-items: center; padding: .3rem; border-radius: 4px; transition: color .2s; }
.nc-footer__social-link:hover { color: #fff; text-decoration: none; }
.nc-footer__col .widget { background: transparent; border: none; padding: 0; }
.nc-footer__col .widget-title { color: #d0dae8; border-bottom-color: var(--nc-primary); font-size: .8rem; }
.nc-footer__col .widget a { color: #8899b0; font-size: .85rem; }
.nc-footer__col .widget a:hover { color: #fff; text-decoration: none; }
.nc-footer__col .nc-widget-trending__rank { color: rgba(255,255,255,.15); }
.nc-footer__col .nc-widget-trending__title { color: #c0ccd9; }
.nc-footer__col .nc-widget-latest__title { color: #c0ccd9; }
.nc-footer__col .nc-widget-trending__item, .nc-footer__col .nc-widget-latest__item { border-color: rgba(255,255,255,.07); }
.nc-footer__supporters { padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.nc-footer__bottom { border-top: 1px solid rgba(255,255,255,.06); }
.nc-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; min-height: 48px; }
.nc-footer__copy { font-size: .78rem; color: #4d6070; }
.nc-footer__copy a { color: #4d6070; }
.nc-footer__copy a:hover { color: #fff; text-decoration: none; }
.nc-footer__nav { display: flex; flex-wrap: wrap; gap: .2rem; }
.nc-footer__nav li a { color: #4d6070; font-size: .78rem; padding: .2rem .5rem; }
.nc-footer__nav li a:hover { color: #fff; text-decoration: none; }

/* ─── 28. ARCHIVE / CATEGORY HEADER ────────────────────────── */
.nc-archive-header { padding: 1.5rem 0; margin-bottom: 1.5rem; border-bottom: 2px solid var(--nc-border); }
.nc-archive-header__title { font-size: 1.5rem; font-weight: 800; color: var(--nc-text); }
.nc-archive-header__desc { color: var(--nc-text-muted); font-size: .9rem; margin-top: .4rem; }
.nc-category-header { padding: 1.25rem 0 1.25rem 1rem; margin-bottom: 1.5rem; border-left: 4px solid var(--nc-primary); }
.nc-category-header__line { display: none; }
.nc-category-header__title { font-size: 1.5rem; font-weight: 800; color: var(--nc-text); }
.nc-category-header__desc { font-size: .875rem; color: var(--nc-text-muted); margin-top: .3rem; }
.nc-category-header__count { font-size: .78rem; color: var(--nc-text-muted); margin-top: .25rem; }

/* Layout Toggle */
.nc-layout-toggle { display: flex; gap: .3rem; margin-bottom: 1rem; }
.nc-layout-toggle__btn { padding: .4rem .6rem; border: 1px solid var(--nc-border); border-radius: var(--nc-radius); color: var(--nc-text-muted); display: flex; align-items: center; transition: background .15s; }
.nc-layout-toggle__btn.is-active, .nc-layout-toggle__btn:hover { background: var(--nc-primary); color: #fff; border-color: var(--nc-primary); }

/* ─── 29. PAGINATION ───────────────────────────────────────── */
.nc-pagination { margin: 2rem 0; }
.nc-pagination ul { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; }
.nc-pagination ul li a,
.nc-pagination ul li span {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 .6rem;
  border: 1px solid var(--nc-border); border-radius: var(--nc-radius);
  font-size: .85rem; font-weight: 500; color: var(--nc-text); text-decoration: none;
  transition: background .15s, color .15s;
}
.nc-pagination ul li a:hover { background: var(--nc-primary-light); color: var(--nc-primary); border-color: var(--nc-primary); text-decoration: none; }
.nc-pagination ul li .current { background: var(--nc-primary); color: #fff; border-color: var(--nc-primary); }

/* ─── 30. LOAD MORE ────────────────────────────────────────── */
.nc-loadmore-wrap { text-align: center; margin: 1.5rem 0; }
.nc-loadmore:disabled { opacity: .6; cursor: not-allowed; }

/* ─── 31. SEARCH PAGE ──────────────────────────────────────── */
.nc-search-page-form { margin: 1.5rem 0; }
.nc-search-page-form form { display: flex; gap: .5rem; }
.nc-search-page-form input { flex: 1; padding: .65rem 1rem; border: 2px solid var(--nc-border); border-radius: var(--nc-radius); font-size: 1rem; background: var(--nc-bg); color: var(--nc-text); }
.nc-search-page-form input:focus { outline: none; border-color: var(--nc-primary); }
.nc-search-page-form button { padding: .65rem 1.2rem; background: var(--nc-primary); color: #fff; border-radius: var(--nc-radius); font-weight: 600; }

/* ─── 32. 404 PAGE ─────────────────────────────────────────── */
.nc-404 { text-align: center; padding: 4rem 1rem; }
.nc-404__code { display: block; font-size: 6rem; font-weight: 900; color: var(--nc-primary); line-height: 1; }
.nc-404__title { font-size: 1.5rem; font-weight: 700; margin: .5rem 0 .75rem; }
.nc-404__desc { color: var(--nc-text-muted); margin-bottom: 1.5rem; }
.nc-404__search { display: flex; gap: .5rem; max-width: 480px; margin: 0 auto 1.5rem; }
.nc-404__search input { flex:1; padding:.6rem 1rem; border:2px solid var(--nc-border); border-radius:var(--nc-radius); background:var(--nc-bg); color:var(--nc-text); font-size:1rem; }
.nc-404__search button { padding:.6rem 1rem; background:var(--nc-primary); color:#fff; border-radius:var(--nc-radius); }

/* ─── 33. MOBILE SEARCH BOX ────────────────────────────────── */
@media (max-width:767px) {
  .nc-topbar__left .nc-topbar__date { display: none; }
  .nc-hero__body { padding: 1rem; }
  .nc-hero__title { font-size: 1.1rem; }
  .nc-hero__excerpt { display: none; }
  .nc-article__title { font-size: 1.4rem; }
  .nc-video-grid { grid-template-columns: repeat(2, 1fr); }
  .nc-video-card__title { font-size: .75rem; }
}

/* ─── 34. ANIMATIONS ───────────────────────────────────────── */
@keyframes nc-fadein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.nc-fadein { animation: nc-fadein .3s ease; }

/* ─── 35. PRINT ────────────────────────────────────────────── */
@media print {
  .nc-topbar, .nc-header, .nc-nav, .nc-ticker, .nc-footer,
  .nc-share, .nc-ads, .nc-related, .nc-layout__sidebar,
  .srai-floating-bar, .spe-popup-wrapper, .sd-donation-overlay { display: none !important; }
  .nc-article__content { font-size: 12pt; }
  .nc-article__title { font-size: 18pt; }
  a::after { content: " (" attr(href) ")"; }
}