/*
Theme Name: Komparatif News
Theme URI: https://komparatif.id
Author: Komparatif.ID
Author URI: https://komparatif.id
Description: Tema WordPress untuk Komparatif.ID — portal berita bergaya profesional (headline besar di atas, sidebar tunggal di kanan), didesain ulang agar lebih modern dan clean: sudut membulat konsisten, shadow lembut, palet warna yang lebih tenang, dan kolom Opini bergaya editorial minimalis. Dilengkapi ticker breaking news, widget berita populer, dan tipografi condensed yang tegas ala siaran berita.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: berita
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
	--berita-ink:        #16181d;   /* header/footer dasar nyaris hitam */
	--berita-accent:     #dc2430;   /* merah Komparatif, sedikit lebih tenang dari merah neon */
	--berita-accent-dark:#a81b26;
	--berita-gold:       #b8863a;   /* label kategori sekunder, dilembutkan dari kuning-emas mencolok */
	--berita-bg:         #ffffff;
	--berita-bg-muted:   #f6f6f7;
	--berita-border:     #ececef;
	--berita-text:       #17181c;
	--berita-text-soft:  #667085;
	--berita-white:      #ffffff;

	--font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--font-body: 'Source Sans 3', 'Segoe UI', sans-serif;

	--container: 1200px;
	--radius: 12px;         /* dulu 3px (tajam ala breaking-news); dibulatkan agar terasa lebih modern & clean */
	--radius-sm: 8px;
	--shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
	--shadow-md: 0 8px 20px rgba(16,24,40,.10);

	/* Palet & tipografi khusus section OPINI: didesain ulang agar
	   lebih bersih — kanvas netral tenang (bukan krem tebal), kartu
	   putih dengan shadow lembut + aksen tipis di sisi kiri, bukan
	   border coklat penuh & glyph kutip raksasa seperti sebelumnya. */
	--opini-bg:     #f7f6f3;
	--opini-ink:    #1e293b;
	--opini-ink-soft: #64748b;
	--opini-card:   #ffffff;
	--opini-border: #eceae4;
	--font-voice: 'Playfair Display', Georgia, serif; /* khusus kutipan opini */

	/* Identitas ketiga: kolom "Sorotan Kategori" — mosaik foto,
	   aksen teal. Sengaja beda dari merah (berita) & navy (opini)
	   supaya tiap zona di beranda terasa punya karakter sendiri. */
	--spotlight-accent: #0d7d84;
	--spotlight-accent-dark: #075a5f;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--berita-text);
	background: var(--berita-bg);
	line-height: 1.55;
	font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 .5em;
	letter-spacing: .2px;
}
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--berita-accent); outline-offset: 2px; }

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 20px;
}
.screen-reader-text { position: absolute; left: -9999px; }

/* =========================================================
   TOP UTILITY BAR
   ========================================================= */
.top-bar {
	background: #0a0b0d;
	color: #9aa0ab;
	font-size: 12.5px;
}
.top-bar .container { display: flex; justify-content: space-between; align-items: center; height: 34px; }
.top-bar time { text-transform: uppercase; letter-spacing: .5px; }
.top-bar .social-links { display: flex; gap: 14px; }
.top-bar .social-links a { color: #9aa0ab; font-weight: 600; font-size: 12px; }
.top-bar .social-links a:hover { color: var(--berita-white); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
	background: var(--berita-ink);
	color: var(--berita-white);
	border-bottom: 3px solid var(--berita-accent);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	gap: 24px;
}
.site-branding .site-title {
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 800;
	margin: 0;
	letter-spacing: .5px;
	text-transform: uppercase;
}
.site-branding .site-title a { color: var(--berita-white); }
.site-branding .site-title span { color: var(--berita-accent); }
.site-branding .site-description {
	margin: 0;
	font-size: 12px;
	color: #9aa0ab;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.main-navigation { flex: 1; display: flex; justify-content: flex-end; }
.nav-menu { display: flex; gap: 2px; flex-wrap: wrap; }
.nav-menu li a {
	display: block;
	padding: 10px 14px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: #d7dae0;
	border-bottom: 3px solid transparent;
}
.nav-menu li a:hover,
.nav-menu li.current-menu-item a {
	color: var(--berita-white);
	border-bottom-color: var(--berita-accent);
}

.menu-toggle {
	display: none;
	background: transparent;
	border: 1px solid #3a3d44;
	color: var(--berita-white);
	padding: 8px 12px;
	border-radius: var(--radius);
}

/* =========================================================
   BREAKING NEWS TICKER (signature element)
   ========================================================= */
.breaking-ticker {
	background: var(--berita-accent);
	color: var(--berita-white);
	overflow: hidden;
	position: relative;
}
.breaking-ticker .container { display: flex; align-items: stretch; padding: 0; max-width: var(--container); }
.breaking-label {
	background: var(--berita-accent-dark);
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;
	padding: 9px 16px;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 8px;
}
.breaking-label .dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--berita-white);
	animation: berita-pulse 1.4s infinite;
}
@keyframes berita-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .35; transform: scale(.8); }
}
.ticker-viewport { flex: 1; overflow: hidden; position: relative; }
.ticker-track {
	display: flex;
	white-space: nowrap;
	animation: berita-scroll 32s linear infinite;
	padding: 9px 0;
}
.ticker-track a {
	color: var(--berita-white);
	font-weight: 600;
	font-size: 14.5px;
	margin-right: 48px;
}
.ticker-track a:hover { text-decoration: underline; }
@keyframes berita-scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.ticker-track { animation: none; overflow-x: auto; }
	.breaking-label .dot { animation: none; }
}

/* =========================================================
   LAYOUT: KONTEN + SIDEBAR KANAN (satu-satunya sidebar)
   ========================================================= */
.site-content-wrap {
	max-width: var(--container);
	margin: 32px auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 36px;
	align-items: start;
}
.primary-content { min-width: 0; }
.sidebar-kanan { min-width: 0; }

@media (max-width: 900px) {
	.site-content-wrap { grid-template-columns: 1fr; }
}

/* =========================================================
   HERO / HEADLINE SECTION (front-page.php)
   ========================================================= */
.hero-section {
	max-width: var(--container);
	margin: 28px auto 0;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 24px;
}
.hero-main {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--berita-ink);
	min-height: 420px;
}
.hero-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease;
	pointer-events: none;
}
.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}
.hero-slide img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78;
}
.hero-slide::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10,11,13,0) 30%, rgba(10,11,13,.94) 100%);
}
.hero-main-content { position: relative; z-index: 2; padding: 32px; padding-right: 90px; color: var(--berita-white); }
.hero-main .berita-badge { background: var(--berita-accent); }
.hero-main h1 {
	font-size: clamp(28px, 4vw, 44px);
	margin: 14px 0 10px;
}
.hero-main h1 a { color: var(--berita-white); }
.hero-excerpt { color: #d7dae0; font-size: 16px; max-width: 60ch; }
.hero-meta { color: #b6bcc6; font-size: 13px; margin-top: 10px; text-transform: uppercase; letter-spacing: .5px; }

.hero-dots {
	position: absolute;
	right: 20px; bottom: 22px;
	z-index: 3;
	display: flex;
	gap: 7px;
}
.hero-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,.45);
	border: none;
	padding: 0;
	transition: width .3s ease, background .3s ease;
}
.hero-dot.is-active { width: 24px; border-radius: 5px; background: var(--berita-accent); }
.hero-dot:hover { background: rgba(255,255,255,.75); }

.hero-secondary { display: flex; flex-direction: column; gap: 10px; }
.hero-secondary-item {
	display: flex;
	align-items: center;
	gap: 14px;
	border-bottom: 1px solid var(--berita-border);
	padding: 10px 8px;
	margin: 0 -8px;
	border-radius: var(--radius);
	border-left: 3px solid transparent;
	transition: background .3s ease, border-left-color .3s ease;
}
.hero-secondary-item:last-child { border-bottom: none; }
.hero-secondary-item.is-active {
	background: var(--berita-bg-muted);
	border-left-color: var(--berita-accent);
}
.hero-secondary-item .thumb-wrap { flex-shrink: 0; line-height: 0; }
.hero-secondary-item img {
	width: 108px; height: 76px;
	object-fit: cover;
	border-radius: var(--radius);
	display: block;
}
.hero-secondary-item .hero-secondary-text { min-width: 0; }
.hero-secondary-item .berita-badge { font-size: 10.5px; padding: 2px 8px; margin-bottom: 5px; }
.hero-secondary-item h3 {
	font-size: 15.5px;
	line-height: 1.3;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hero-secondary-item h3 a:hover { color: var(--berita-accent); }
@media (prefers-reduced-motion: reduce) {
	.hero-slide { transition: none; }
}

.berita-badge {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--berita-white);
	background: var(--berita-gold);
	padding: 3px 10px;
	border-radius: 4px;
}

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.section-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--berita-ink);
}
.section-heading::after {
	content: "";
	flex: 1;
	height: 3px;
	background: var(--berita-accent);
}

/* =========================================================
   GRID BERITA TERBARU
   ========================================================= */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin: 40px auto 0;
	max-width: var(--container);
	padding: 0 20px;
}
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .news-grid { grid-template-columns: 1fr; } }

.news-card { display: flex; flex-direction: column; }
.news-card .thumb { border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; aspect-ratio: 3/2; }
.news-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.news-card:hover .thumb img { transform: scale(1.05); }
.news-card h3 { font-size: 19px; margin: 6px 0; }
.news-card h3 a:hover { color: var(--berita-accent); }
.news-card .entry-meta { font-size: 12.5px; color: var(--berita-text-soft); text-transform: uppercase; letter-spacing: .4px; }

/* =========================================================
   OPINI — kolom editorial, didesain ulang agar lebih bersih:
   kanvas netral tenang (bukan krem tebal), kartu putih dengan
   shadow lembut + aksen tipis di sisi kiri (bukan border coklat
   penuh), ikon kutip kecil (bukan glyph raksasa transparan).
   Box ini TERKURUNG di lebar kolom konten utama saja (tidak
   menjorok ke area sidebar), mirip pola box promo semacam
   "KHAZANAH" pada portal berita pada umumnya.
   ========================================================= */
.opini-section {
	background: var(--opini-bg);
	border-radius: var(--radius);
	padding: 32px 28px;
	margin-top: 44px;
}
.opini-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}
.opini-head-text .opini-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--opini-ink-soft);
}
.opini-head-text .opini-eyebrow::before {
	content: "";
	width: 18px; height: 2px;
	background: var(--opini-ink);
	display: inline-block;
}
.opini-head-text h2 {
	font-family: var(--font-voice);
	font-style: italic;
	font-weight: 700;
	color: var(--opini-ink);
	font-size: 28px;
	margin: 6px 0 0;
}
.opini-more {
	flex-shrink: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--opini-ink);
	display: flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 4px;
}
.opini-more span { transition: transform .2s ease; }
.opini-more:hover span { transform: translateX(3px); }

.opini-track-wrap { position: relative; }
.opini-track {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.opini-track::-webkit-scrollbar { display: none; }

.opini-card {
	scroll-snap-align: start;
	flex: 1 1 0;
	min-width: 240px;
	max-width: 270px;
	background: var(--opini-card);
	border-radius: var(--radius-sm);
	border-left: 3px solid var(--opini-ink);
	padding: 22px 20px;
	position: relative;
	box-shadow: var(--shadow-sm);
	transition: box-shadow .2s ease, transform .2s ease;
}
.opini-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.opini-card .quote-mark {
	width: 30px; height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--opini-bg);
	color: var(--opini-ink);
	font-family: var(--font-voice);
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 14px;
}
.opini-card .opini-topic {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--opini-ink-soft);
	margin-bottom: 10px;
}
.opini-card h3 {
	font-family: var(--font-voice);
	font-style: italic;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.32;
	color: var(--berita-ink);
	margin: 0 0 10px;
}
.opini-card h3 a:hover { color: var(--opini-ink); }
.opini-card p.opini-excerpt {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--berita-text-soft);
	margin: 0 0 18px;
}
.opini-byline {
	display: flex;
	align-items: center;
	gap: 10px;
	border-top: 1px solid var(--opini-border);
	padding-top: 14px;
}
.opini-avatar {
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--opini-ink);
	color: var(--opini-card);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 11px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.opini-byline .opini-name { font-weight: 700; font-size: 13px; color: var(--opini-ink); display: block; }
.opini-byline .opini-role { font-size: 11.5px; color: var(--opini-ink-soft); display: block; }

.opini-controls { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.opini-arrow {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid var(--opini-border);
	background: var(--opini-card);
	color: var(--opini-ink);
	font-size: 15px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.opini-arrow:hover { background: var(--opini-ink); color: var(--opini-card); border-color: var(--opini-ink); }

@media (max-width: 900px) {
	.opini-card { min-width: 220px; }
}
@media (max-width: 640px) {
	.opini-section { padding: 24px 18px; }
	.opini-head { flex-direction: column; align-items: flex-start; }
	.opini-card { min-width: 78vw; max-width: 78vw; }
}

/* =========================================================
   SOROTAN KATEGORI — mosaik foto, identitas ketiga
   (teal + overlay gelap + tipografi condensed), sengaja
   photo-forward: kebalikan dari Opini yang text-forward.
   Terkurung di lebar kolom konten utama, sama seperti Opini.
   ========================================================= */
.spotlight-section { margin-top: 40px; }
.spotlight-heading.section-heading { color: var(--spotlight-accent); }
.spotlight-heading.section-heading::after { background: var(--spotlight-accent); }

.spotlight-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 120px;
	gap: 10px;
}
.spotlight-tile {
	position: relative;
	display: block;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--berita-ink);
}
.spotlight-tile.is-featured { grid-column: span 2; grid-row: span 2; }
.spotlight-tile img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.spotlight-tile:hover img { transform: scale(1.06); }
.spotlight-tile::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(9,13,15,0) 35%, rgba(6,20,22,.92) 100%);
}
.spotlight-tile-content {
	position: absolute; left: 0; right: 0; bottom: 0;
	z-index: 2;
	padding: 12px;
}
.spotlight-badge {
	display: inline-block;
	background: var(--spotlight-accent);
	color: #fff;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	padding: 2px 8px;
	border-radius: 4px;
	margin-bottom: 6px;
}
.spotlight-tile-content h3 {
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.25;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.spotlight-tile.is-featured .spotlight-tile-content { padding: 18px; }
.spotlight-tile.is-featured .spotlight-badge { font-size: 11.5px; }
.spotlight-tile.is-featured h3 { font-size: 21px; -webkit-line-clamp: 3; }

@media (max-width: 700px) {
	.spotlight-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
	.spotlight-tile.is-featured { grid-column: span 2; grid-row: span 1; }
}

/* =========================================================
   ARTIKEL LIST (dipakai di primary-content: index/category/search)
   ========================================================= */
.article-list-item {
	display: flex;
	gap: 18px;
	padding: 20px 0;
	border-bottom: 1px solid var(--berita-border);
}
.article-list-item .thumb { width: 220px; flex-shrink: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.article-list-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-list-item h2 { font-size: 24px; margin: 0 0 8px; }
.article-list-item h2 a:hover { color: var(--berita-accent); }
.article-list-item .entry-meta { font-size: 13px; color: var(--berita-text-soft); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; }
.article-list-item p { color: var(--berita-text-soft); margin: 0; }
@media (max-width: 600px) {
	.article-list-item { flex-direction: column; }
	.article-list-item .thumb { width: 100%; }
}

.archive-title, .page-title, .entry-title-single {
	font-size: 32px;
	border-left: 5px solid var(--berita-accent);
	padding-left: 14px;
	margin-bottom: 24px;
}

/* =========================================================
   SIDEBAR WIDGETS
   ========================================================= */
.widget {
	background: var(--berita-bg-muted);
	border: 1px solid var(--berita-border);
	border-radius: var(--radius);
	padding: 20px;
	margin-bottom: 24px;
}
.widget-title {
	font-family: var(--font-display);
	font-size: 20px;
	text-transform: uppercase;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--berita-accent);
	color: var(--berita-ink);
}
.popular-list { display: flex; flex-direction: column; gap: 12px; }
.popular-item { display: flex; align-items: baseline; gap: 12px; }
.popular-rank {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 22px;
	color: var(--berita-accent);
	min-width: 30px;
}
.popular-link { font-weight: 600; font-size: 15px; }
.popular-link:hover { color: var(--berita-accent); }
.widget ul li { padding: 6px 0; border-bottom: 1px dashed var(--berita-border); font-size: 14.5px; }
.widget ul li:last-child { border-bottom: none; }
.widget select, .widget input[type="search"], .widget input[type="text"] {
	width: 100%; padding: 8px; border: 1px solid var(--berita-border); border-radius: var(--radius);
}
.ad-slot {
	background: var(--berita-white);
	border: 1px dashed var(--berita-border);
	color: var(--berita-text-soft);
	text-align: center;
	padding: 40px 10px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* =========================================================
   SINGLE POST
   ========================================================= */
.entry-header-single { margin-bottom: 20px; }
.entry-meta-single {
	display: flex; gap: 16px; flex-wrap: wrap;
	font-size: 13.5px; color: var(--berita-text-soft);
	text-transform: uppercase; letter-spacing: .4px;
	margin-top: 10px;
}
.entry-thumb-single { margin: 20px 0; border-radius: var(--radius); overflow: hidden; }
.entry-thumb-caption {
	display: block;
	background: var(--berita-bg-muted);
	color: var(--berita-text-soft);
	font-size: 13px;
	font-style: italic;
	line-height: 1.5;
	padding: 10px 16px;
	margin: 0;
}
.entry-content-single { font-size: 18px; line-height: 1.75; }
.entry-content-single p { margin: 0 0 1.3em; }
.entry-content-single h2 { font-size: 26px; margin-top: 1.4em; }
.entry-content-single blockquote {
	border-left: 4px solid var(--berita-accent);
	margin: 1.5em 0; padding: .3em 0 .3em 1.2em;
	font-style: italic; color: var(--berita-text-soft);
}
.entry-tags { margin-top: 30px; display: flex; gap: 8px; flex-wrap: wrap; }
.entry-tags a {
	background: var(--berita-bg-muted); border: 1px solid var(--berita-border);
	padding: 5px 12px; font-size: 13px; border-radius: 20px;
}
.entry-tags a:hover { background: var(--berita-accent); color: var(--berita-white); border-color: var(--berita-accent); }

/* =========================================================
   PAGINATION
   ========================================================= */
.berita-pagination { display: flex; gap: 8px; margin-top: 30px; flex-wrap: wrap; }
.berita-pagination a, .berita-pagination span {
	padding: 8px 14px; border: 1px solid var(--berita-border); border-radius: var(--radius);
	font-family: var(--font-display); font-weight: 600;
}
.berita-pagination .current { background: var(--berita-accent); color: var(--berita-white); border-color: var(--berita-accent); }
.berita-pagination a:hover { border-color: var(--berita-accent); color: var(--berita-accent); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--berita-ink); color: #b6bcc6; margin-top: 50px; }
.footer-top { padding: 40px 0; display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 30px; border-bottom: 1px solid #262a31; }
.footer-col h4 { color: var(--berita-white); text-transform: uppercase; font-size: 16px; margin-bottom: 14px; }
.footer-col ul li { padding: 5px 0; }
.footer-col ul li a:hover { color: var(--berita-white); }
.footer-brand .site-title { color: var(--berita-white); font-family: var(--font-display); font-size: 26px; text-transform: uppercase; }
.footer-brand p { font-size: 14px; margin-top: 10px; color: #8b919c; }
.footer-bottom { padding: 18px 0; display: flex; justify-content: space-between; font-size: 13px; color: #8b919c; flex-wrap: wrap; gap: 10px; }
@media (max-width: 800px) { .footer-top { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .footer-top { grid-template-columns: 1fr; } }

/* =========================================================
   RESPONSIVE HEADER / NAV
   ========================================================= */
@media (max-width: 900px) {
	.hero-section { grid-template-columns: 1fr; }
	.site-header { position: relative; }
	.menu-toggle { display: inline-flex; align-items: center; gap: 8px; }
	.header-inner { flex-wrap: wrap; }

	.main-navigation {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 200;
		background: var(--berita-ink);
		border-top: 1px solid #262a31;
		box-shadow: 0 16px 30px rgba(0,0,0,.4);
		max-height: calc(100vh - 60px);
		overflow-y: auto;
	}
	.main-navigation.is-open { display: block; }

	.nav-menu { flex-direction: column; width: 100%; }
	.nav-menu li a { padding: 14px 20px; border-bottom: 1px solid #262a31; }

	.nav-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(6, 7, 9, .55);
		z-index: 150;
	}
	.nav-backdrop.is-open { display: block; }
}