/*
Theme Name: PortalSatu
Theme URI: https://portalsatu.com
Author: Team Portal Satu
Author URI: https://portalsatu.com
Description: Tema portal berita modern untuk WordPress – hero slider, mobile drawer, sistem iklan terjadwal, inline related posts, dukungan dark mode, dan performa tinggi.
Version: 3.0.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: portalsatu
Tags: news, blog, responsive, dark-mode, custom-logo, featured-images
*/

/* ============================================================
   TABLE OF CONTENTS
   01. Design Tokens (CSS Variables)
   02. Reset & Base
   03. SEO Heading Structure
   04. Accessibility
   05. Layout & Grid
   06. Header Top
   07. Header Nav & Sticky
   08. Mobile Navigation Drawer
   09. Search Overlay
   10. Section Header
   11. Sidebar Widgets
   12. Ads System
   13. News Cards & Lists
   14. Foto Grid
   15. Pendapat Section
   16. Inline Related Posts
   17. Single Post Article
   18. Comments
   19. Archive / Tag / Search / 404
   20. Pagination
   21. Footer
   22. Page Template
   23. Load More Button
   24. AI Summary Block
   25. Newsroom Meta Block
   26. YouTube Embed
   27. Logo System
   28. Peunutoh Mobile Block
   29. Category Layout Variants
   30. Dark Mode Overrides
   31. Responsive — 900px Tablet
   32. Responsive — 600px Mobile
   33. Print Styles
   34. Utilities
============================================================ */


/* ============================================================
   01. DESIGN TOKENS
============================================================ */
:root {
  /* Brand */
  --primary:       #053d6a;
  --primary-light: #0a5a9e;
  --primary-dark:  #032b4c;
  --accent:        #e8232a;
  --accent-dark:   #b91c1c;
  --accent2:       #f59e0b;

  /* Surface */
  --bg:            #f4f6f8;
  --bg2:           #eef0f3;
  --card:          #ffffff;

  /* Text */
  --text:          #1a1a2e;
  --text2:         #4a5568;
  --text3:         #718096;

  /* UI */
  --border:        #e2e8f0;
  --shadow:        0 2px 12px rgba(0,0,0,.08);
  --shadow-md:     0 4px 20px rgba(0,0,0,.10);
  --shadow-lg:     0 8px 32px rgba(0,0,0,.16);

  /* Typography */
  --font-head:     'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;

  /* Layout */
  --radius:        6px;
  --nav-h:         48px;
  --max-w:         1200px;
  --sidebar-w:     300px;
  --transition:    0.25s ease;
}

[data-theme="dark"] {
  --bg:            #0d1117;
  --bg2:           #161b22;
  --card:          #1c2330;
  --text:          #e6edf3;
  --text2:         #8b949e;
  --text3:         #6e7681;
  --border:        #30363d;
  --shadow:        0 2px 12px rgba(0,0,0,.35);
  --shadow-md:     0 4px 20px rgba(0,0,0,.40);
}


/* ============================================================
   02. RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html   { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body   {
  font-family: var(--font-body);
  background: var(--bg); color: var(--text);
  line-height: 1.7; font-size: 15px; letter-spacing: -0.01em;
  transition: background var(--transition), color var(--transition);
}
a      { text-decoration: none; color: inherit; }
img    { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }


/* ============================================================
   03. SEO HEADING STRUCTURE
   H1 = Judul utama halaman (1 per halaman)
   H2 = Label section / artikel featured
   H3 = Judul artikel di card / list / grid
   H4 = Widget sidebar / kolom footer
============================================================ */

/* H1 tersembunyi homepage – dibaca crawler, tidak merusak desain */
.ps-seo-h1-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ── Reset heading di card: hapus margin/font default browser ──────────────
   Semua heading yang dipakai sebagai judul artikel di card/list/grid
   harus di-reset agar tidak ada margin, padding, atau ukuran font bawaan.
   CATATAN: ps-hero__post-title tetap di sini karena masih perlu reset
   margin/padding bawaan browser meskipun tidak punya nested <a>.
   ───────────────────────────────────────────────────────────────────────── */
h2.post-title-xl,
h2.news-card-title,
h3.news-card-title,
h3.news-list-title,
h3.ps-cat-b__title,
h3.ps-cat-c__main-title,
h3.ps-cat-c__side-title,
h3.ps-hero__post-title,
h3.ps-basa__card-title,
h3.ps-slide__title {
  font-size: inherit; font-weight: inherit;
  line-height: inherit; margin: 0; padding: 0;
}

/* ── Link di dalam heading card: tampil block (full-width) ──────────────
   Card/list/grid vertikal – link block agar seluruh area judul bisa diklik.
   ps-hero__post-title DIKECUALIKAN: tidak punya nested <a> sama sekali,
   wrapper <a class="ps-hero__post"> yang menjadi link utamanya.
   ───────────────────────────────────────────────────────────────────────── */
h2.post-title-xl a,
h2.news-card-title a,
h3.news-card-title a,
h3.news-list-title a,
h3.ps-cat-b__title a,
h3.ps-cat-c__main-title a,
h3.ps-cat-c__side-title a,
h3.ps-slide__title a {
  display: block; color: inherit; text-decoration: none;
}

/* ── Basa card title: tidak ada nested <a> (wrapper <a> yang jadi link) ─── */
h3.ps-basa__card-title {
  font-size: inherit; font-weight: inherit;
  line-height: inherit; margin: 0; padding: 0;
}


/* ============================================================
   04. ACCESSIBILITY
============================================================ */
/* Skip to content */
.skip-to-content {
  position: absolute; top: -100%; left: 16px;
  background: var(--primary); color: #fff;
  padding: 10px 20px; border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700; font-size: 14px; z-index: 9999;
  transition: top .2s; text-decoration: none;
}
.skip-to-content:focus { top: 0; }

/* Focus ring – WCAG 2.1 AA */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* Screen reader text */
.visually-hidden,
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}


/* ============================================================
   05. LAYOUT & GRID
============================================================ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }

.main-layout {
  display: grid; grid-template-columns: 1fr var(--sidebar-w);
  gap: 28px; padding: 28px 0; align-items: start;
}
.main-content { min-width: 0; }

.single-layout {
  display: grid; grid-template-columns: 1fr var(--sidebar-w);
  gap: 28px; padding: 24px 0; align-items: start;
}
.single-article { min-width: 0; }

.page-layout {
  display: grid; grid-template-columns: 1fr var(--sidebar-w);
  gap: 28px; padding: 24px 0 40px; align-items: start;
}
.page-article { min-width: 0; }

.content-section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 24px;
}


/* ============================================================
   06. HEADER TOP
============================================================ */
#site-header { position: relative; z-index: 100; }

.header-top {
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 10px 0; transition: background var(--transition);
}
[data-theme="dark"] .header-top { background: var(--bg2); }

.header-top-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* Logo */
.site-logo {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; max-width: 220px; text-decoration: none;
}
.site-logo:has(.ps-logo-single) { gap: 0; }

.logo-icon {
  width: 36px; height: 36px; background: var(--primary); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 800; font-family: var(--font-head); flex-shrink: 0;
}
.logo-text { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--primary); letter-spacing: -0.02em; line-height: 1; }
.logo-text span { color: var(--accent); }
.custom-logo { height: 42px; width: auto; object-fit: contain; }

.header-top-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-date { font-size: 12px; color: var(--text3); font-weight: 500; white-space: nowrap; }

/* Dark mode toggle */
.dark-toggle {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 20px; width: 50px; height: 28px;
  position: relative; flex-shrink: 0; transition: background .3s;
}
.dark-toggle::after {
  content: '☀️'; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 20px; transition: transform .3s;
}
[data-theme="dark"] .dark-toggle { background: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .dark-toggle::after { transform: translateX(22px); content: '🌙'; }


/* ============================================================
   07. HEADER NAV & STICKY
============================================================ */
.header-nav { background: var(--primary); position: relative; z-index: 99; }
[data-theme="dark"] .header-nav { background: var(--primary-dark); }

.header-nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; height: var(--nav-h); gap: 4px;
}

/* Sticky logo */
.nav-sticky-logo { display: none; align-items: center; margin-right: 14px; flex-shrink: 0; }
.nav-sticky-logo .site-logo,
.nav-sticky-logo .sticky-logo-link { display: flex; align-items: center; gap: 8px; color: #fff; }
.nav-sticky-logo .logo-text { color: #fff; font-size: 15px; }
.nav-sticky-logo .logo-icon { width: 26px; height: 26px; font-size: 12px; }
.nav-sticky-logo .ps-logo-light { display: block !important; }
.nav-sticky-logo .ps-logo-dark  { display: none  !important; }

.sticky-logo-link { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.sticky-logo-link .logo-text { color: #fff; }

/* Primary nav */
.main-nav { display: flex; align-items: center; flex: 1; }
.main-nav ul { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
.main-nav ul li { position: relative; }
.main-nav ul li a {
  display: flex; align-items: center; height: var(--nav-h); padding: 0 13px;
  color: rgba(255,255,255,.85); font-size: 12px; font-weight: 600;
  letter-spacing: .7px; text-transform: uppercase;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap; position: relative;
}
.main-nav ul li a::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--accent2); transform: scaleX(0); transition: transform .25s ease;
}
.main-nav ul li a:hover,
.main-nav ul li.current-menu-item > a,
.main-nav ul li.current_page_item > a { color: #fff; background: rgba(255,255,255,.12); }
.main-nav ul li a:hover::after,
.main-nav ul li.current-menu-item > a::after,
.main-nav ul li.current_page_item > a::after { transform: scaleX(1); }

/* Nav actions */
.nav-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-icon-btn {
  background: none; border: none; color: rgba(255,255,255,.85);
  width: 38px; height: 38px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background var(--transition);
}
.nav-icon-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.nav-icon-btn svg { width: 18px; height: 18px; pointer-events: none; }

/* Hamburger */
.hamburger-btn  { display: none; }
.hamburger-icon { display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
.hamburger-icon span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }

/* Sticky state */
.header-nav.is-sticky {
  position: fixed; top: 0; left: 0; right: 0;
  box-shadow: var(--shadow-lg);
  animation: ps-slide-down .28s ease;
}
.header-nav.is-sticky .nav-sticky-logo { display: flex; }
@keyframes ps-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.sticky-spacer { display: none; height: var(--nav-h); }
.sticky-spacer.active { display: block; }


/* ============================================================
   08. MOBILE NAVIGATION DRAWER
============================================================ */
.mobile-nav-overlay {
  display: none; position: fixed; inset: 0; z-index: 299;
  background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
}
.mobile-nav-overlay.is-open { display: block; }

.mobile-nav-drawer {
  position: fixed; top: 0; left: -320px; bottom: 0;
  width: 300px; max-width: 85vw; background: var(--primary-dark);
  z-index: 300; display: flex; flex-direction: column;
  transition: left .32s cubic-bezier(.4,0,.2,1);
}
.mobile-nav-drawer.is-open { left: 0; }
[data-theme="dark"] .mobile-nav-drawer { background: #0a1628; }

.mobile-nav-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--primary);
  border-bottom: 1px solid rgba(255,255,255,.1); flex-shrink: 0;
}
[data-theme="dark"] .mobile-nav-header { background: var(--primary-dark); }
.mobile-nav-header .logo-text { color: #fff; font-size: 18px; }
.mobile-nav-header .logo-icon { width: 30px; height: 30px; font-size: 13px; }

.mobile-nav-close {
  background: none; border: none; color: #fff; font-size: 22px;
  line-height: 1; padding: 4px 8px; border-radius: 4px; transition: background .2s;
}
.mobile-nav-close:hover { background: rgba(255,255,255,.15); }

.mobile-nav-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.mobile-nav-list li a {
  display: block; padding: 13px 20px;
  color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .2s, color .2s;
}
.mobile-nav-list li a:hover,
.mobile-nav-list li.current-menu-item > a { background: rgba(255,255,255,.1); color: #fff; }

/* Logo pada mobile drawer – force visible di background gelap */
.mobile-nav-logo .ps-logo-single { filter: brightness(0) invert(1); }
.mobile-nav-logo .ps-logo-light  { display: none  !important; }
.mobile-nav-logo .ps-logo-dark   { display: block !important; }


/* ============================================================
   09. SEARCH OVERLAY
============================================================ */
.search-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(5,61,106,.94);
  align-items: flex-start; justify-content: center; padding-top: 100px;
}
.search-overlay.is-open { display: flex; }
[data-theme="dark"] .search-overlay { background: rgba(3,43,76,.96); }

.search-overlay-inner { width: 100%; max-width: 640px; padding: 0 24px; }
.search-overlay-inner form { display: flex; align-items: center; }
.search-overlay-inner input[type="search"] {
  flex: 1; padding: 14px 18px; font-size: 20px;
  border: none; border-bottom: 2px solid rgba(255,255,255,.4);
  background: transparent; color: #fff; outline: none; font-family: var(--font-body);
}
.search-overlay-inner input[type="search"]::placeholder { color: rgba(255,255,255,.45); }
.search-submit-btn { background: none; border: none; color: #fff; padding: 14px 10px; font-size: 22px; opacity: .7; }
.search-submit-btn:hover { opacity: 1; }
.search-close-btn {
  position: absolute; top: 24px; right: 28px;
  background: none; border: none; color: #fff; font-size: 30px; line-height: 1; opacity: .65; transition: opacity .2s;
}
.search-close-btn:hover { opacity: 1; }


/* ============================================================
   10. SECTION HEADER
============================================================ */
.section-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--card);
}
.section-header::before {
  content: ''; display: block; flex-shrink: 0;
  width: 4px; height: 20px; background: var(--accent); border-radius: 2px;
}
.section-header h2 { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text); line-height: 1; }
.section-header .view-all {
  margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid currentColor; white-space: nowrap; transition: opacity var(--transition);
}
.section-header .view-all:hover { opacity: .7; }


/* ============================================================
   11. SIDEBAR WIDGETS
============================================================ */
.site-sidebar {
  display: flex; flex-direction: column; gap: 18px;
  width: var(--sidebar-w); position: sticky;
  top: calc(var(--nav-h) + 20px); align-self: start; overflow: visible;
}

.sidebar-widget {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; flex-shrink: 0;
}
.widget-header { background: var(--primary); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.widget-header h3 { font-family: var(--font-head); font-size: 13.5px; font-weight: 700; color: #fff; }
.widget-icon { font-size: 13px; line-height: 1; }
.widget-body { padding: 12px 14px; }

/* Trending */
.trending-list { display: flex; flex-direction: column; gap: 10px; }
.trending-item { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px dashed var(--border); }
.trending-item:last-child { border-bottom: none; padding-bottom: 0; }
.trending-rank { font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--border); line-height: 1; min-width: 26px; flex-shrink: 0; }
.trending-item:nth-child(1) .trending-rank { color: var(--accent);  }
.trending-item:nth-child(2) .trending-rank { color: var(--accent2); }
.trending-item:nth-child(3) .trending-rank { color: #94a3b8; }
.trending-title { font-family: var(--font-head); font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.trending-title:hover { color: var(--primary); }
.trending-meta { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* Popular */
.popular-list { display: flex; flex-direction: column; }
.popular-item { display: grid; grid-template-columns: 68px 1fr; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.popular-item:last-child { border-bottom: none; }
.popular-img { width: 68px; height: 50px; object-fit: cover; border-radius: 4px; display: block; }
.popular-title { font-family: var(--font-head); font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.popular-title:hover { color: var(--primary); }
.popular-meta { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* Tag Cloud */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill {
  display: inline-block; background: var(--bg2); color: var(--text2);
  font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 20px;
  border: 1px solid var(--border); transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.tag-pill:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Category list */
.sidebar-cat-list { display: flex; flex-direction: column; }
.sidebar-cat-list li { border-bottom: 1px solid var(--border); }
.sidebar-cat-list li:last-child { border-bottom: none; }
.sidebar-cat-list li a { display: flex; align-items: center; justify-content: space-between; padding: 9px 2px; font-size: 13px; font-family: var(--font-head); font-weight: 600; color: var(--text2); transition: color var(--transition); }
.sidebar-cat-list li a:hover { color: var(--primary); }
.sidebar-cat-count { background: var(--bg2); color: var(--text3); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }

/* Category rank badge */
.sidebar-cat-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px;
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 800; flex-shrink: 0; margin-right: 6px;
}
.sidebar-cat-list li:nth-child(1) .sidebar-cat-rank { background: var(--accent);            }
.sidebar-cat-list li:nth-child(2) .sidebar-cat-rank { background: var(--accent2); color: #000; }
.sidebar-cat-list li:nth-child(3) .sidebar-cat-rank { background: #94a3b8;                  }


/* ============================================================
   12. ADS SYSTEM
============================================================ */
.ps-ad-wrap { position: relative; text-align: center; margin: 16px 0; overflow: hidden; max-width: 100%; }
.ps-ad-leaderboard { padding: 6px 0; background: var(--bg2); border: 1px dashed var(--border); border-radius: var(--radius); }
.ps-ad-rectangle   { padding: 6px;   background: var(--bg2); border: 1px dashed var(--border); border-radius: var(--radius); }
.ps-ad-inline      { margin: 20px 0; padding: 12px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); }
.ps-ad-label       { display: block; font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; font-weight: 600; }


/* ============================================================
   13. NEWS CARDS & LISTS
============================================================ */

/* Category badge */
.post-badge {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 9.5px; font-weight: 800; padding: 3px 10px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .8px; width: fit-content; transition: background var(--transition);
}
.post-badge:hover { background: var(--accent-dark); }

/* News Card */
.news-card {
  background: var(--card); display: flex; flex-direction: column;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.news-card:hover { background: var(--bg2); }
.news-card-thumb { width: 100%; height: 160px; object-fit: cover; display: block; flex-shrink: 0; }
.news-card-body  { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.news-card-cat   { display: inline-block; font-size: 9px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; border-left: 2px solid var(--accent); padding-left: 6px; }
.news-card-title { font-family: var(--font-head); font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card-title:hover,
.news-card-title a:hover { color: var(--primary); }
.news-card-meta  { font-size: 11px; color: var(--text3); margin-top: auto; }

/* Terbaru 3-column grid */
.terbaru-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.terbaru-grid .news-card:nth-child(3n)       { border-right: none; }
.terbaru-grid .news-card:nth-last-child(-n+3) { border-bottom: none; }

/* Featured lead */
.terbaru-lead {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; padding: 16px 18px 18px;
  border-bottom: 1px solid var(--border); align-items: start;
}
.terbaru-lead-img  { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius); display: block; }
.terbaru-lead-body { display: flex; flex-direction: column; gap: 10px; }
.post-title-xl {
  font-family: var(--font-head); font-size: 20px; font-weight: 800;
  line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.post-title-xl:hover,
.post-title-xl a:hover { color: var(--primary); }
.post-excerpt   { font-size: 13px; color: var(--text2); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-meta-row  { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text3); flex-wrap: wrap; }
.post-meta-row a { color: var(--primary); font-weight: 600; }

/* Standalone card */
.news-card-standalone {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.news-card-standalone:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* News list – 2 columns */
.news-list { display: grid; grid-template-columns: 1fr 1fr; }
.news-list-item {
  display: grid; grid-template-columns: 100px 1fr;
  gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  transition: background var(--transition);
}
.news-list-item:nth-child(even)       { border-right: none; }
.news-list-item:nth-last-child(-n+2) { border-bottom: none; }
.news-list-item:hover { background: var(--bg2); }
.news-list-img  { width: 100px; height: 72px; object-fit: cover; border-radius: 4px; display: block; flex-shrink: 0; }
.news-list-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.news-list-cat  { font-size: 9px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; border-left: 2px solid var(--accent); padding-left: 5px; }
.news-list-title {
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-list-title:hover,
.news-list-title a:hover { color: var(--primary); }
.news-list-meta { font-size: 11px; color: var(--text3); margin-top: auto; }


/* ============================================================
   14. FOTO GRID
============================================================ */
.foto-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 14px 16px; }
.foto-item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; display: block; }
.foto-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.foto-item:hover img { transform: scale(1.06); }
.foto-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), transparent 60%); display: flex; align-items: flex-end; padding: 10px; }
.foto-caption { color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.3; font-family: var(--font-head); }


/* ============================================================
   15. PENDAPAT SECTION
============================================================ */
.pendapat-list { display: flex; flex-direction: column; padding: 14px 16px; gap: 14px; }
.pendapat-item { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border); align-items: start; }
.pendapat-item:last-child { border-bottom: none; padding-bottom: 0; }
.author-avatar  { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; }
.author-name    { font-size: 11px; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.pendapat-title { font-family: var(--font-head); font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px; }
.pendapat-title:hover { color: var(--primary); }
.pendapat-meta  { font-size: 10.5px; color: var(--text3); }


/* ============================================================
   16. INLINE RELATED POSTS
============================================================ */
.inline-related {
  margin: 20px 0; border-left: 3px solid var(--primary);
  background: var(--bg2); border-radius: 0 var(--radius) var(--radius) 0; overflow: hidden;
}
.inline-related-label { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); padding: 8px 14px 6px; }
.inline-related-item  { display: flex; align-items: center; gap: 12px; padding: 0 14px 10px; text-decoration: none; transition: background var(--transition); }
.inline-related-item:hover { background: var(--border); }

.inline-related-img-wrap {
  display: block; width: 88px; min-width: 88px; height: 64px;
  border-radius: 4px; overflow: hidden; flex-shrink: 0; background: var(--border);
}
.inline-related-img-wrap img {
  display: block !important; width: 88px !important; height: 64px !important;
  min-width: 88px !important; min-height: 64px !important;
  max-width: 88px !important; max-height: 64px !important;
  object-fit: cover !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important;
}
.inline-related-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.inline-related-cat  { font-size: 9px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .8px; }
.inline-related-title{ font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inline-related-date { font-size: 11px; color: var(--text3); }


/* ============================================================
   17. SINGLE POST ARTICLE
============================================================ */
.post-header-band { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 9px 0; }
.post-breadcrumb  { font-size: 12px; color: var(--text3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.post-breadcrumb a    { color: var(--primary); font-weight: 500; }
.post-breadcrumb a:hover { text-decoration: underline; }
.post-breadcrumb .sep { opacity: .5; }

.article-cat-badge {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 9.5px; font-weight: 800; padding: 3px 12px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
}
.article-cat-badge:hover { background: var(--accent-dark); }

.article-title { font-family: var(--font-head); font-size: 26px; font-weight: 800; line-height: 1.25; color: var(--text); margin-bottom: 14px; }

.article-meta-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.article-author-wrap     { display: flex; align-items: center; gap: 8px; }
.article-author-wrap img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.article-author-name     { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.2; }
.article-author-name a   { color: inherit; }
.article-author-role     { font-size: 11px; color: var(--text3); }
.article-date-str        { font-size: 12px; color: var(--text3); }

/* Share buttons */
.share-bar { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.share-btn  {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; padding: 6px 12px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
  border: none; color: #fff; transition: filter .2s, transform .15s;
  white-space: nowrap; text-decoration: none; line-height: 1;
}
.share-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.share-btn svg  { flex-shrink: 0; }
.share-btn-fb   { background: #1877f2; }
.share-btn-wa   { background: #25d366; }
.share-btn-tw   { background: #000;    }

/* Featured image */
.article-featured-img {
  width: 100%; height: 460px; max-height: 460px;
  object-fit: cover; object-position: center top;
  border-radius: var(--radius); display: block; margin-bottom: 6px;
}
.img-caption { font-size: 11.5px; color: var(--text3); text-align: center; margin-bottom: 20px; font-style: italic; }

/* Article body */
.article-body {
  font-size: 17px; line-height: 1.85; color: var(--text2);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 28px; overflow: hidden;
}
.article-body > * + * { margin-top: 1rem; }
.article-body h2 { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text); margin-top: 2rem; }
.article-body h3 { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text); margin-top: 1.6rem; }
.article-body a  { color: var(--primary); text-decoration: underline; }
.article-body blockquote {
  border-left: 4px solid var(--primary); padding: 12px 18px;
  background: var(--bg2); border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic; color: var(--text); font-family: var(--font-head); font-size: 16px; margin: 1.5rem 0;
}
.article-body ul { list-style: disc;    padding-left: 22px; }
.article-body ol { list-style: decimal; padding-left: 22px; }
.article-body li + li { margin-top: 5px; }
.article-body img {
  border-radius: var(--radius); margin: 1rem auto;
  max-width: 100% !important; width: auto !important; height: auto !important; display: block;
}
/* Override: inline-related images inside body */
.article-body .inline-related-img-wrap img {
  width: 88px !important; height: 64px !important;
  min-width: 88px !important; min-height: 64px !important;
  max-width: 88px !important; max-height: 64px !important;
  object-fit: cover !important; margin: 0 !important; border-radius: 0 !important; display: block !important;
}
.article-body figure { margin: 1rem 0; max-width: 100%; overflow: hidden; }
.article-body iframe,
.article-body video,
.article-body embed  { max-width: 100% !important; height: auto; display: block; }
.article-body table  { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.article-body th,
.article-body td     { padding: 9px 11px; border: 1px solid var(--border); font-size: 14px; }
.article-body th     { background: var(--bg2); font-weight: 700; }

.article-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.article-tags-label { font-size: 11px; font-weight: 700; color: var(--text3); }

.post-nav { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.post-nav-item  { font-size: 13px; color: var(--primary); font-weight: 600; max-width: 46%; }
.post-nav-item:hover { text-decoration: underline; }
.post-nav-next  { text-align: right; margin-left: auto; }

.related-section { margin-top: 28px; }
.related-grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }


/* ============================================================
   18. COMMENTS
============================================================ */
.comments-area { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.comments-area .comments-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 18px; }
.comment-list  { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.comment-body  { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.comment-meta  { font-size: 12px; color: var(--text3); margin-bottom: 7px; }
.comment-content p  { font-size: 14px; color: var(--text2); line-height: 1.65; margin: 0; }
.comment-reply-link { font-size: 12px; color: var(--primary); font-weight: 600; margin-top: 7px; display: inline-block; }
.comment-respond    { margin-top: 24px; }
.comment-respond .comment-reply-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.comment-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; color: var(--text); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; padding: 9px 13px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--text); font-family: var(--font-body); font-size: 14px;
  margin-bottom: 12px; transition: border-color .2s;
}
.comment-form input:focus,
.comment-form textarea:focus { outline: none; border-color: var(--primary); }
.comment-form textarea { min-height: 110px; resize: vertical; }
.comment-form .submit { background: var(--primary); color: #fff; border: none; padding: 9px 24px; border-radius: var(--radius); font-size: 14px; font-weight: 700; transition: background .2s; }
.comment-form .submit:hover { background: var(--primary-light); }


/* ============================================================
   19. ARCHIVE / TAG / SEARCH / 404
============================================================ */
.archive-band {
  background: var(--card) !important;
  padding: 18px 0 16px !important;
  border-bottom: 1px solid var(--border) !important;
}
[data-theme="dark"] .archive-band { background: var(--bg) !important; border-color: var(--border) !important; }
.archive-band-inner   { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
.archive-breadcrumb   { font-size: 12px; color: var(--text3); margin-bottom: 7px; }
.archive-breadcrumb a { color: var(--primary); }
.archive-breadcrumb a:hover { text-decoration: underline; }
.archive-title  { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--text); border-left: 4px solid var(--primary); padding-left: 12px; }
.archive-desc   { font-size: 13px; color: var(--text2); margin-top: 5px; padding-left: 16px; }
.archive-count  { display: inline-block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 10px; margin-top: 7px; }
.archive-grid   { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 24px; }

.tag-band       { background: var(--bg2); border-bottom: 2px solid var(--primary); padding: 18px 0; }
.tag-band-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
.tag-label-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--primary); color: #fff; padding: 5px 16px; border-radius: 20px; font-size: 14px; font-weight: 700; font-family: var(--font-head); }
.tag-label-pill::before { content: '#'; opacity: .65; }

.search-band        { background: var(--primary); padding: 24px 0; }
.search-band-inner  { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
.search-band h1     { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: #fff; }
.search-band p      { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 4px; }
.search-band form   { margin-top: 14px; display: flex; gap: 8px; max-width: 500px; }
.search-band input[type="search"] { flex: 1; padding: 9px 14px; border: none; border-radius: var(--radius); font-size: 14px; font-family: var(--font-body); }
.search-band button { background: var(--accent); color: #fff; border: none; padding: 9px 18px; border-radius: var(--radius); font-weight: 700; transition: background .2s; }
.search-band button:hover { background: var(--accent-dark); }
.search-nothing { text-align: center; padding: 60px 20px; color: var(--text3); }

.error-404     { text-align: center; padding: 70px 20px; }
.error-404-num { font-family: var(--font-head); font-size: 90px; font-weight: 800; color: var(--accent); line-height: 1; }
.error-404 h1  { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--text); margin: 10px 0 8px; }
.error-404 p   { font-size: 15px; color: var(--text2); margin-bottom: 22px; }


/* ============================================================
   20. PAGINATION
============================================================ */
.pagination { margin: 8px 0 24px; }
.pagination .nav-links { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; }
.page-numbers {
  min-width: 36px; height: 36px; padding: 0 9px;
  border: 1px solid var(--border); background: var(--card); border-radius: var(--radius);
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--text2);
  transition: background .2s, color .2s, border-color .2s; text-decoration: none; line-height: 1;
}
.page-numbers.current,
.page-numbers:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.page-numbers.dots  { border: none; background: none; cursor: default; }
.page-numbers.prev,
.page-numbers.next  { font-size: 16px; }


/* ============================================================
   21. FOOTER
============================================================ */
.site-footer   { background: var(--primary); color: rgba(255,255,255,.82); margin-top: 12px; }
.footer-top    { max-width: var(--max-w); margin: 0 auto; padding: 36px 20px 28px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.footer-logo   { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 10px; }
.footer-logo .logo-text      { color: #fff; }
.footer-logo .logo-text span { color: var(--accent2); }
.footer-about p { font-size: 13px; line-height: 1.75; margin-top: 10px; color: rgba(255,255,255,.58); }
.footer-social  { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.social-link    { display: flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(255,255,255,.62); transition: color var(--transition); }
.social-link:hover { color: var(--accent2); }
.footer-col h4  { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 12px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.15); }
.footer-col ul  { display: flex; flex-direction: column; gap: 7px; }
.footer-col ul li a { font-size: 12.5px; color: rgba(255,255,255,.6); transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--accent2); }
.footer-contact      { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.62); }
.footer-contact-item span:first-child { flex-shrink: 0; margin-top: 1px; }
.footer-contact-item a { color: rgba(255,255,255,.75); transition: color var(--transition); }
.footer-contact-item a:hover { color: var(--accent2); }
.footer-bottom  { background: rgba(0,0,0,.28); text-align: center; padding: 12px 20px; font-size: 12px; color: rgba(255,255,255,.42); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.footer-nav-links   { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.footer-nav-links a { color: rgba(255,255,255,.42); font-size: 12px; transition: color var(--transition); }
.footer-nav-links a:hover { color: var(--accent2); }


/* ============================================================
   22. PAGE TEMPLATE
============================================================ */
.page-title { font-family: var(--font-head); font-size: 28px; font-weight: 800; line-height: 1.25; color: var(--text); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--border); }
.page-content { font-size: 16px; line-height: 1.85; color: var(--text2); }
.page-content h2 { font-size: 22px; margin: 28px 0 12px; color: var(--text); }
.page-content h3 { font-size: 18px; margin: 22px 0 10px; color: var(--text); }
.page-content p  { margin-bottom: 16px; }
.page-content ul,
.page-content ol  { padding-left: 24px; margin-bottom: 16px; }
.page-content li  { margin-bottom: 6px; }
.page-content img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 16px 0; }
.page-content a   { color: var(--primary); text-decoration: underline; }
.page-content blockquote { border-left: 4px solid var(--primary); margin: 20px 0; padding: 12px 20px; background: var(--bg2); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--text2); }
.page-links { margin: 24px 0; display: flex; gap: 8px; flex-wrap: wrap; }


/* ============================================================
   23. LOAD MORE BUTTON
============================================================ */
.load-more-wrap { text-align: center; padding: 20px 0; }
.load-more-btn  {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary); color: #fff; border: none; border-radius: var(--radius);
  padding: 10px 28px; font-family: var(--font-head); font-size: 13px; font-weight: 700;
  transition: background var(--transition), transform .15s;
}
.load-more-btn:hover   { background: var(--primary-light); transform: translateY(-1px); }
.load-more-btn:disabled { opacity: .55; cursor: wait; }
.load-more-btn.is-loading::after {
  content: ''; display: block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ============================================================
   24. AI SUMMARY BLOCK
============================================================ */
.ps-ai-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 16px; background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 20px 0; }
.ps-ai-summary__label { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.ps-ai-summary__tools { display: flex; align-items: center; gap: 16px; }
.ps-ai-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card); color: var(--text2); text-decoration: none;
  transition: border-color .2s, background .2s, transform .15s; flex-shrink: 0;
}
.ps-ai-icon-btn:hover { border-color: var(--primary); background: var(--bg2); transform: translateY(-2px); }
.ps-ai-icon { fill: currentColor; display: block; width: 22px !important; height: 22px !important; min-width: 22px; min-height: 22px; max-width: 22px; max-height: 22px; overflow: visible; }


/* ============================================================
   25. NEWSROOM META BLOCK
============================================================ */
.ps-newsroom-meta { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin: 20px 0; }
.ps-newsroom-meta__title { font-size: 12px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 10px; }
.ps-newsroom-meta__grid  { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.ps-newsroom-meta__item  { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.ps-newsroom-meta__key   { color: var(--text3); font-weight: 600; flex-shrink: 0; }
.ps-newsroom-meta__key::after { content: ':'; }
.ps-newsroom-meta__val   { color: var(--text2); }
.ps-newsroom-meta__val a { color: var(--primary); text-decoration: underline; }


/* ============================================================
   26. YOUTUBE EMBED
============================================================ */
.ps-yt-embed { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; margin: 24px 0; border-radius: var(--radius); overflow: hidden; }
.ps-yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }


/* ============================================================
   27. LOGO SYSTEM (LIGHT / DARK)
============================================================ */
.ps-logo-img    { display: block; object-fit: contain; max-width: 100%; max-height: 60px; width: auto; height: auto; }
/* Logo dengan tinggi dinamis – --ps-logo-h di-set di wrapper <a> dari PHP */
.ps-logo-img--sized { height: var(--ps-logo-h, 42px); width: auto; max-height: none; }
.ps-logo-single { display: block; }
.ps-logo-light  { display: block; }
.ps-logo-dark   { display: none;  }
[data-theme="dark"] .ps-logo-light { display: none;  }
[data-theme="dark"] .ps-logo-dark  { display: block; }


/* ============================================================
   28. PEUNUTOH MOBILE BLOCK
============================================================ */
.peunutoh-mobile { display: none; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.peunutoh-mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--primary); }
.peunutoh-mobile-list   { display: grid; grid-template-columns: 1fr 1fr; }
.peunutoh-mobile-item   { display: flex; flex-direction: column; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-decoration: none; overflow: hidden; transition: background var(--transition); }
.peunutoh-mobile-item:nth-child(even)       { border-right: none; }
.peunutoh-mobile-item:nth-last-child(-n+2) { border-bottom: none; }
.peunutoh-mobile-item:hover { background: var(--bg2); }
.peunutoh-mobile-item img   { width: 100%; height: 120px; object-fit: cover; display: block; }
.peunutoh-mobile-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.peunutoh-mobile-cat  { font-size: 9px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .8px; }
.peunutoh-mobile-title{ font-family: var(--font-head); font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.peunutoh-mobile-date { font-size: 10.5px; color: var(--text3); }


/* ============================================================
   29. CATEGORY LAYOUT VARIANTS (A / B / C)
   Desktop ≥901px: semua tampil sebagai news-list biasa
   Mobile  ≤900px: tiap varian punya layout unik
============================================================ */

/* Variant B */
.ps-cat-b__featured { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.ps-cat-b__img-link { display: block; position: relative; }
.ps-cat-b__img      { width: 100%; height: 190px; object-fit: cover; display: block; }
.ps-cat-b__overlay  { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, transparent 55%); }
.ps-cat-b__meta     { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 16px; color: #fff; }
.ps-cat-b__badge    { display: inline-block; background: var(--accent); font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 2px; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; }
.ps-cat-b__title    { font-family: var(--font-head); font-size: 16px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps-cat-b__date     { font-size: 11px; opacity: .7; margin-top: 4px; }

/* Variant C */
.ps-cat-c__mag        { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.ps-cat-c__main       { position: relative; overflow: hidden; display: block; text-decoration: none; border-right: 1px solid var(--border); }
.ps-cat-c__main-img   { width: 100%; height: 100%; min-height: 200px; object-fit: cover; display: block; }
.ps-cat-c__badge      { position: absolute; top: 8px; left: 8px; display: inline-block; background: var(--primary); color: #fff; font-size: 8px; font-weight: 800; padding: 2px 7px; border-radius: 2px; text-transform: uppercase; }
.ps-cat-c__main-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 10px 10px; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, transparent 100%); font-family: var(--font-head); font-size: 13px; font-weight: 700; color: #fff; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ps-cat-c__main-date  { display: none; } /* disembunyikan - overlap dengan title */
.ps-cat-c__side       { display: flex; flex-direction: column; }
.ps-cat-c__side-item  { display: flex; flex-direction: column; flex: 1; text-decoration: none; border-bottom: 1px solid var(--border); background: var(--card); overflow: hidden; transition: background .2s; }
.ps-cat-c__side-item:last-child  { border-bottom: none; }
.ps-cat-c__side-item:hover       { background: var(--bg2); }
.ps-cat-c__side-img   { width: 100%; height: 90px; object-fit: cover; display: block; }
.ps-cat-c__side-title { font-family: var(--font-head); font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; padding: 6px 8px 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps-cat-c__side-date  { font-size: 10px; color: var(--text3); padding: 0 8px 6px; }

/* Desktop: semua variant pakai news-list */
@media (min-width: 901px) {
  .ps-cat-b__featured,
  .ps-cat-c__mag { display: none; }
  .ps-cat-b .news-list,
  .ps-cat-c .news-list { display: flex; flex-direction: column; }
}

/* Mobile ≤900px: aktifkan variant layouts */
@media (max-width: 900px) {
  /* Variant A: 2-column grid */
  .ps-cat-a .news-list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0; }
  .ps-cat-a .news-list-item { display: flex !important; flex-direction: column; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .ps-cat-a .news-list-item:nth-child(2n)       { border-right: none; }
  .ps-cat-a .news-list-item:nth-last-child(-n+2) { border-bottom: none; }
  .ps-cat-a .news-list-img   { width: 100% !important; height: 110px !important; object-fit: cover !important; }
  .ps-cat-a .news-list-body  { padding: 8px 10px; }
  .ps-cat-a .news-list-title { font-size: 12.5px; -webkit-line-clamp: 3; }
  .ps-cat-a .news-list-meta  { font-size: 10px; }

  /* Variant B: sembunyikan default list */
  .ps-cat-b .news-list:not(.ps-cat-b__list) { display: none; }

  /* Variant C: sembunyikan default list, tampilkan magazine */
  .ps-cat-c > .news-list:first-of-type { display: none; }
  .ps-cat-c__mag { display: grid; }
}

@media (max-width: 600px) {
  .ps-cat-b__img         { height: 160px; }
  .ps-cat-c__main-img    { min-height: 160px; }
  .ps-cat-c__side-img    { height: 76px; }
  .ps-cat-a .news-list-img { height: 90px !important; }
}


/* ============================================================
   30. DARK MODE OVERRIDES
============================================================ */
[data-theme="dark"] .site-footer      { background: var(--primary-dark); }
[data-theme="dark"] .footer-bottom    { background: rgba(0,0,0,.4); }
[data-theme="dark"] .content-section  { background: var(--card); }
[data-theme="dark"] .news-card        { background: var(--card); }
[data-theme="dark"] .news-card:hover  { background: var(--bg2); }
[data-theme="dark"] .news-card-standalone { background: var(--card); }
[data-theme="dark"] .news-list-item   { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .news-list-item:hover { background: var(--bg2); }
[data-theme="dark"] .terbaru-lead     { background: var(--card); }
[data-theme="dark"] .hero-post-item   { background: var(--card); }
[data-theme="dark"] .hero-post-item:hover { background: var(--bg2); }
[data-theme="dark"] .trending-item    { border-color: var(--border); }
[data-theme="dark"] .popular-item     { border-color: var(--border); }
[data-theme="dark"] .pendapat-item    { border-color: var(--border); }
[data-theme="dark"] .inline-related   { background: var(--bg2); }
[data-theme="dark"] .inline-related-item:hover { background: var(--border); }
[data-theme="dark"] .tag-pill         { background: var(--bg2); border-color: var(--border); }
[data-theme="dark"] .sidebar-cat-count{ background: var(--bg2); }
[data-theme="dark"] .ps-ad-leaderboard,
[data-theme="dark"] .ps-ad-rectangle,
[data-theme="dark"] .ps-ad-inline     { background: var(--bg2); border-color: var(--border); }
[data-theme="dark"] .ps-ai-summary    { background: var(--bg2); }
[data-theme="dark"] .comment-body     { background: var(--card); }
[data-theme="dark"] .article-meta-bar { border-color: var(--border); }
[data-theme="dark"] .article-body blockquote { background: var(--bg2); }
[data-theme="dark"] .post-header-band { background: var(--bg2); }
[data-theme="dark"] .foto-overlay     { background: linear-gradient(to top, rgba(0,0,0,.85), transparent 60%); }
[data-theme="dark"] .peunutoh-mobile  { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .peunutoh-mobile-item  { border-color: var(--border); }
[data-theme="dark"] .peunutoh-mobile-item:hover { background: var(--bg2); }
[data-theme="dark"] .ps-cat-c__side-item { background: var(--card); }
[data-theme="dark"] .ps-cat-b__featured  { border-color: var(--border); }
[data-theme="dark"] .ps-cat-c__mag       { border-color: var(--border); }
[data-theme="dark"] .ps-cat-c__main      { border-color: var(--border); }
[data-theme="dark"] .search-overlay      { background: rgba(3,43,76,.96); }


/* ============================================================
   31. RESPONSIVE — 900px TABLET
============================================================ */
@media (max-width: 900px) {
  /* Layouts collapse to 1 column */
  .main-layout,
  .single-layout,
  .page-layout { grid-template-columns: 1fr; }

  /* Sidebar: full width, not sticky */
  .site-sidebar { width: 100%; position: static; top: auto; gap: 12px; }

  /* Single post sidebar appears below article with separator */
  .single-layout .site-sidebar { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }

  /* Nav */
  .main-nav      { display: none; }
  .hamburger-btn { display: flex; }
  .desktop-only  { display: none !important; }

  /* Terbaru → 2 columns */
  .terbaru-grid { grid-template-columns: 1fr 1fr; }
  .terbaru-grid .news-card:nth-child(3n)          { border-right: 1px solid var(--border); }
  .terbaru-grid .news-card:nth-child(2n)          { border-right: none; }
  .terbaru-grid .news-card:nth-last-child(-n+3)   { border-bottom: 1px solid var(--border); }
  .terbaru-grid .news-card:nth-last-child(-n+2)   { border-bottom: none; }

  /* News list → 1 column */
  .news-list { grid-template-columns: 1fr; }
  .news-list-item { border-right: none; }
  .news-list-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .news-list-item:last-child           { border-bottom: none; }

  /* Archive & related */
  .archive-grid { grid-template-columns: 1fr 1fr; }
  .related-grid { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr; }

  /* Single */
  .article-featured-img { height: 240px !important; max-height: 240px !important; }
  .share-bar { margin-left: 0; }

  /* Peunutoh mobile visible */
  .peunutoh-mobile { display: block !important; }
}


/* ============================================================
   32. RESPONSIVE — 600px MOBILE
============================================================ */
@media (max-width: 600px) {
  .container { padding: 0 14px; }

  /* Header */
  .header-top { padding: 8px 0; }
  .logo-text  { font-size: 18px; }

  /* Images */
  .article-featured-img { height: 200px !important; max-height: 200px !important; }

  /* Terbaru lead → 1 column */
  .terbaru-lead { grid-template-columns: 1fr; }
  .terbaru-lead-img  { height: 220px; }
  .terbaru-lead-body { gap: 8px; }

  /* Terbaru grid → 1 column, horizontal thumbnail */
  .terbaru-grid { grid-template-columns: 1fr; }
  .terbaru-grid .news-card {
    display: flex !important; flex-direction: row; align-items: stretch;
    border-right: none; border-bottom: 1px solid var(--border);
    min-height: 90px; max-height: 90px; overflow: hidden;
  }
  .terbaru-grid .news-card:last-child { border-bottom: none; }
  .terbaru-grid .news-card .news-card-thumb {
    width: 110px !important; min-width: 110px !important; max-width: 110px !important;
    height: 90px !important; min-height: 90px !important; max-height: 90px !important;
    object-fit: cover !important; display: block !important; flex-shrink: 0;
  }
  .terbaru-grid .news-card .news-card-body { padding: 8px 10px; flex: 1; min-width: 0; overflow: hidden; justify-content: center; }
  .terbaru-grid .news-card .news-card-title { font-size: 13px; -webkit-line-clamp: 2; }

  /* Archive & related */
  .archive-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .foto-grid    { grid-template-columns: 1fr 1fr; padding: 10px; }

  /* Single */
  .article-title    { font-size: 21px; line-height: 1.3; }
  .article-meta-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .share-bar        { flex-wrap: wrap; }
  .article-body     { font-size: 16px; line-height: 1.85; padding: 16px 14px; }
  .article-body p   { margin-bottom: 1.2rem; }
  .inline-related-title { font-size: 13px; }
  .inline-related-item img { width: 72px !important; height: 52px !important; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; padding: 24px 14px; }

  /* Ads – prevent horizontal overflow */
  .ps-ad-wrap { max-width: 100%; overflow: hidden; margin: 10px 0; }
  .ps-ad-leaderboard ins.adsbygoogle,
  .ps-ad-leaderboard iframe { max-width: 100% !important; }
  .ps-layout__sidebar .ps-ad-wrap,
  .single-layout .site-sidebar .ps-ad-wrap { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* Desktop: hide peunutoh-mobile */
@media (min-width: 601px) {
  .peunutoh-mobile { display: none !important; }
}


/* ============================================================
   33. PRINT STYLES
============================================================ */
@media print {
  .header-nav, .share-bar, .ps-ai-summary, .related-section,
  .post-nav, footer, .ps-peunutoh-mobile, .site-sidebar,
  .ps-ad-wrap { display: none !important; }
  .single-layout, .single-article { display: block !important; }
  .article-body { font-size: 12pt; line-height: 1.6; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}


/* ============================================================
   35. 404 PAGE – Search form & recent posts grid
   File: 404.php
============================================================ */

/* Wrapper search form di halaman 404 */
.error-404__search {
  margin-top: 36px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* Teks hint di atas form 404 */
.error-404__search-hint {
  font-size: 14px;
  color: var(--text3);
  margin-bottom: 12px;
}

/* Form search 404 – flex row */
.error-404__search-form {
  display: flex;
  gap: 8px;
}

/* Input search di halaman 404 */
.error-404__search-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color 0.2s;
}
.error-404__search-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Submit button 404 – pakai padding custom (lebih kecil dari .btn-primary default) */
.error-404__search-btn {
  padding: 10px 18px;
}

/* Wrapper artikel terbaru di halaman 404 */
.error-404__recent {
  margin-top: 48px;
  text-align: left;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Judul "Artikel Terbaru" di 404 */
.error-404__recent-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

/* Grid 2 kolom untuk artikel terbaru di 404 */
.error-404__recent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .error-404__recent-grid { grid-template-columns: 1fr; }
  .error-404__search { max-width: 100%; }
}


/* ============================================================
   36. ARCHIVE / SEARCH – Layout padding override
   File: archive.php, search.php
   Menggantikan style="padding-top:28px" pada .main-layout
============================================================ */

/* Override padding atas main-layout khusus archive & search */
.main-layout--archive {
  padding-top: 28px;
}

/* Deskripsi tag di tag-band */
.tag-band__desc {
  font-size: 13px;
  color: var(--text2);
  margin-top: 10px;
}


/* ============================================================
   37. SEARCH NOTHING – Tampilan kosong hasil pencarian
   File: search.php
============================================================ */

/* Ikon emoji di search-nothing */
.search-nothing__icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 16px;
}

/* Teks utama "Tidak ada hasil" */
.search-nothing__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}


/* ============================================================
   38. SINGLE POST – Section header "Berita Terkait"
   File: single.php
   Override .section-header agar tanpa background/border
============================================================ */

/* Versi minimal section-header (hanya padding bawah, tanpa bg/border) */
.section-header--bare {
  padding: 0 0 14px;
  border: none;
  background: none;
}
/* Hilangkan garis merah kiri pada section-header--bare */
.section-header--bare::before {
  display: none;
}


/* ============================================================
   39. SVG SPRITE HIDDEN – SVG tersembunyi untuk icon sprite
   File: functions.php, single.php
   Menggantikan style="display:none;width:0;height:0;position:absolute"
============================================================ */

/* SVG sprite – harus ada di DOM tapi tidak terlihat */
.ps-svg-sprite {
  display: none;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ============================================================
   40. PAGE TEMPLATE – Figure wrapper
   File: page.php
   Menggantikan style="margin-bottom:24px" pada figure
============================================================ */

/* Figure di halaman statis (page.php) */
.page-figure {
  margin-bottom: 24px;
}


/* ============================================================
   41. ADS IMAGE – Gambar iklan yang diunggah
   File: inc/ads.php
   Menggantikan style inline pada img gambar iklan
============================================================ */

/* Gambar iklan tipe image (upload) */
.ps-ad-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Wrapper link gambar iklan */
.ps-ad-image-link {
  display: block;
}


/* NOTE: CSS khusus admin (ads badges, newsroom meta box,
   theme settings, dashboard widgets) ada di css/admin.css
   yang di-load HANYA di halaman admin, bukan frontend.
============================================================ */


/* ============================================================
   34. UTILITIES
============================================================ */
.btn-primary { display: inline-block; background: var(--primary); color: #fff; padding: 11px 26px; border-radius: var(--radius); font-weight: 700; font-size: 14px; transition: background .2s; border: none; }
.btn-primary:hover { background: var(--primary-light); }
/* .desktop-only: tampil di ≥900px, hidden di <900px via section 31 */
.desktop-only  { display: block; }
.no-results    { text-align: center; padding: 44px 20px; color: var(--text3); font-size: 15px; }
.clearfix::after { content: ''; display: table; clear: both; }
.text-center { text-align: center; }