/*
 * TimurUpdate main stylesheet — original design system.
 */

:root {
	--color-primary: #1F5AD6;
	--color-secondary: #111827;
	--color-link: #0E59FB;
	--color-background: #F8FAFC;
	--color-surface: #FFFFFF;
	--color-text: #111827;
	--color-muted: #64748B;
	--color-border: #E2E8F0;
	--color-header-bg: #FFFFFF;
	--color-footer-bg: #1F5AD6;
	--container-width: 1200px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 4px rgba(15, 23, 42, .06);
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
	--color-background: #0F172A;
	--color-surface: #1E293B;
	--color-text: #F1F5F9;
	--color-muted: #94A3B8;
	--color-border: #334155;
	--color-header-bg: #0F172A;
	--color-footer-bg: #0B1120;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--color-background: #0F172A;
		--color-surface: #1E293B;
		--color-text: #F1F5F9;
		--color-muted: #94A3B8;
		--color-border: #334155;
		--color-header-bg: #0F172A;
		--color-footer-bg: #0B1120;
	}
}

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

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

/* Safety net: a stray element even 1-2px wider than the viewport (common
   cause of "cut off on some Android phones, fine on iPhone" reports — the
   two render engines round sub-pixel widths differently) creates a tiny
   horizontal scroll that clips the right edge instead of just wrapping.
   html only (not body) — overflow-x on body would force overflow-y:auto
   too, turning body into its own scroll container and breaking the
   header's position:sticky (it needs the viewport itself to be the
   scrolling ancestor). */
html { overflow-x: hidden; }
body { max-width: 100%; }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 400;
	background: var(--color-background);
	color: var(--color-text);
	line-height: 1.55;
	font-size: 16px;
}

a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; color: var(--color-text); margin: 0 0 .5em; }

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 1.25rem;
}

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

.skip-link {
	position: fixed;
	top: -100px;
	left: 1rem;
	background: var(--color-primary);
	color: #fff;
	padding: .75rem 1.25rem;
	border-radius: var(--radius-sm);
	z-index: 9999;
	transition: top .2s ease;
}
.skip-link:focus {
	top: 1rem;
	width: auto;
	height: auto;
	clip: auto;
}

:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .6rem 1.1rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: #0b47cc; text-decoration: none; }
.btn-secondary { background: transparent; border-color: var(--color-border); color: var(--color-text); }

.btn-icon {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-text);
	padding: .4rem;
	display: inline-flex;
	border-radius: var(--radius-sm);
}
.btn-icon:hover { background: var(--color-border); }

/* ---------- UTILITY MENU (inline, next to logo) ---------- */
.utility-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
}
.utility-menu li { position: relative; }
.utility-menu li:not(:last-child)::after {
	content: "|";
	color: var(--color-border);
	margin: 0 .6rem;
}
.utility-menu a {
	color: var(--color-text);
	font-size: .875rem;
}
.utility-menu a:hover { color: var(--color-primary); text-decoration: none; }
@media (max-width: 991px) {
	.utility-bar { display: none; }
}

/* ---------- BREAKING NEWS / TOP BAR ---------- */
.breaking-news {
	background: var(--color-primary);
	color: #fff;
}
.breaking-news-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .6rem 1.25rem;
}
.breaking-news-label {
	background: #153E93;
	color: #fff;
	font-size: .8rem;
	font-weight: 500;
	padding: .3rem .7rem;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
	letter-spacing: .03em;
}
.topbar-search {
	display: flex;
	flex-shrink: 0;
	width: 280px;
}
.topbar-search input {
	flex: 1;
	border: none;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	padding: .5rem .75rem;
	font-size: .875rem;
	letter-spacing: .015em;
	background: #fff;
	color: #9AA3AF;
}
.topbar-search input::placeholder { color: #9AA3AF; }
.topbar-search input:focus { outline: 2px solid rgba(255,255,255,.6); outline-offset: -2px; }
.topbar-search button {
	border: none;
	background: #FF2626;
	color: #fff;
	padding: 0 .9rem;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	cursor: pointer;
	display: flex;
	align-items: center;
}
@media (max-width: 767px) {
	.topbar-search { display: none; }
}
/* Continuous running-text ticker, broadcast-style: the list is rendered
   twice back to back (see breaking-news.php) and the whole pair scrolls
   left together — once the first copy has fully scrolled past, the second
   (identical) copy is exactly in its place, so the loop point is
   invisible instead of snapping/jumping. */
.breaking-news-track {
	position: relative;
	overflow: hidden;
	flex: 1;
	min-height: 1.4em;
}
.breaking-news-track a {
	color: #fff;
	font-size: .875rem;
	font-weight: 400;
}
.breaking-news-marquee {
	display: flex;
	align-items: center;
	width: max-content;
	animation: breaking-news-scroll linear infinite;
	/* Duration set inline per-page (px-width / broadcast-pace) by main.js,
	   this is only a sane fallback if that JS hasn't run yet. */
	animation-duration: 50s;
}
.breaking-news-track:hover .breaking-news-marquee,
.breaking-news-track:focus-within .breaking-news-marquee {
	animation-play-state: paused;
}
.breaking-news-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.breaking-news-list li {
	white-space: nowrap;
	flex-shrink: 0;
}
.breaking-news-list li:not(:last-child)::after {
	content: "•";
	display: inline-block;
	margin: 0 1.25rem;
	color: rgba(255,255,255,.5);
}
/* Separator at the seam between the two duplicated lists too, so the loop
   point reads the same as every other gap instead of two headlines
   running together. */
.breaking-news-list + .breaking-news-list::before {
	content: "•";
	display: inline-block;
	margin-right: 1.25rem;
	color: rgba(255,255,255,.5);
}
@keyframes breaking-news-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.breaking-news-marquee { animation: none; }
}

/* ---------- HEADER ---------- */
.site-header {
	background: var(--color-header-bg);
	border-bottom: 1px solid var(--color-border);
}
.has-sticky-header .site-header { position: sticky; top: 0; z-index: 500; }

.header-main {
	display: flex;
	align-items: center;
	padding: 2rem 1.25rem;
	gap: 1.75rem;
	transition: min-height .3s cubic-bezier(.4,0,.2,1), padding .3s cubic-bezier(.4,0,.2,1);
}
.site-logo img { transition: max-height .3s cubic-bezier(.4,0,.2,1); }
.site-branding { display: flex; flex-direction: column; }
.site-title { font-size: 1.5rem; font-weight: 800; color: var(--color-text); }
.site-tagline { margin: 0; font-size: .8rem; color: var(--color-muted); }

/* Desktop: bigger logo/header, plus the shrink-on-scroll compact state
   (.is-scrolled, toggled in navigation.js) — logo itself stays fixed at
   92px while the bar around it shrinks (resizing the logo too felt off). */
@media (min-width: 1200px) {
	.container { padding-left: 5rem; padding-right: 5rem; }
	.topbar-search { width: 345px; }
	.site-logo img { max-height: 68px; }
	.header-main { padding-top: .75rem; padding-bottom: .75rem; min-height: 96px; }
	.is-scrolled .header-main { padding-top: 0; padding-bottom: 0; min-height: 64px; }
	.is-scrolled .site-logo img { max-height: 56px; }
}
.site-logo img { max-height: 44px; width: auto; }

.header-datetime-row {
	display: flex;
	justify-content: flex-end;
	padding-top: 1.25rem;
}
.header-datetime {
	font-size: .8rem;
	font-weight: 700;
	color: var(--color-secondary);
	white-space: nowrap;
	display: none;
}
[data-theme="dark"] .header-datetime { color: var(--color-text); }
.header-datetime.is-ready { display: inline-block; }
.header-actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: inline-flex; }

.nav-inner {
	display: flex;
	align-items: stretch;
	background: var(--color-primary);
	max-width: 1000px;
	margin: 0 auto;
	border-radius: var(--radius-md);
}
.container.nav-inner { padding: 0; }
.nav-scroll {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
	cursor: grab;
	user-select: none;
	flex: 1;
	min-width: 0;
}
.nav-scroll::-webkit-scrollbar { display: none; }
.nav-scroll a, .nav-scroll img,
.trending-pills a, .trending-pills img { -webkit-user-drag: none; user-drag: none; }
.nav-scroll.is-dragging { cursor: grabbing; }
.nav-home {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FF2626;
	color: #fff;
	padding: 0 1.1rem;
	flex-shrink: 0;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.nav-home:hover { text-decoration: none; opacity: .9; }
.primary-menu {
	list-style: none;
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
}
.primary-menu > .menu-item { position: relative; flex-shrink: 0; }
.primary-menu > .menu-item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 60%;
	background: rgba(255,255,255,.25);
}
.menu-link {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem 1.1rem;
	color: #fff;
	font-weight: 400;
	font-size: .95rem;
	white-space: nowrap;
}
.menu-link:hover, .current-menu-item > .menu-link { color: #fff; background: #FF2626; text-decoration: none; }

.sub-menu {
	list-style: none;
	margin: 0;
	padding: .5rem 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease;
	z-index: 100;
}
.sub-menu .sub-menu { top: 0; left: 100%; }
.has-submenu:hover > .sub-menu,
.has-submenu:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.sub-menu .menu-link { padding: .55rem 1rem; }
.submenu-toggle { font-size: 1.1rem; }

/* ---------- SEARCH OVERLAY ---------- */
.search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .6);
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 10vh;
}
.search-overlay[hidden] { display: none; }
.search-overlay-inner {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: 1.5rem;
	width: min(560px, 90vw);
	display: flex;
	gap: .75rem;
	align-items: center;
}
.search-form { display: flex; flex: 1; gap: .5rem; }
.search-field {
	flex: 1;
	padding: .7rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-background);
	color: var(--color-text);
}
.search-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--color-text); }

/* ---------- MOBILE MENU ---------- */
.mobile-menu {
	position: fixed;
	top: 0; right: 0;
	width: min(320px, 85vw);
	height: 100%;
	background: var(--color-surface);
	z-index: 1100;
	overflow-y: auto;
	box-shadow: -8px 0 24px rgba(15,23,42,.15);
	transform: translateX(100%);
	transition: transform .25s ease;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu[hidden] { display: block; }
.mobile-menu-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--color-border); }
.mobile-menu-title {
	display: flex;
	align-items: center;
	/* Text-only fallback (no custom logo set) keeps the bold blue +
	   two-tone underline treatment used elsewhere for section titles. */
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--color-primary);
	padding-top: .9rem;
	position: relative;
}
.mobile-menu-title:not(:has(img))::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 5px;
	background: linear-gradient(90deg, #1F5AD6 0%, #1F5AD6 50%, #FF2626 50%, #FF2626 100%);
	border-radius: 3px;
}
.mobile-menu-title img { max-height: 60px; width: auto; }
.mobile-menu-close { background: none; border: none; font-size: 1.75rem; cursor: pointer; color: var(--color-text); }
.mobile-menu-list { list-style: none; margin: 0; padding: .5rem 1rem; }
/* .menu-link's base color/hover (white text, red hover fill) is built for
   the blue desktop nav bar — reused here on the plain surface background it
   was invisible (white on white in light mode). Override both explicitly. */
.mobile-menu-list .menu-link {
	display: flex;
	justify-content: space-between;
	padding: .8rem 0;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-primary);
	font-weight: 800;
}
.mobile-menu-list .menu-link:hover,
.mobile-menu-list .current-menu-item > .menu-link {
	background: none;
	color: #FF2626;
}
.mobile-menu-list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; display: none; padding-left: 1rem; }
.mobile-menu-list .has-submenu.is-expanded > .sub-menu { display: block; }

.mobile-menu-sitelinks { padding: .75rem 1rem; border-bottom: 1px solid var(--color-border); }
.mobile-sitelinks-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
}
.mobile-sitelinks-list li { position: relative; }
.mobile-sitelinks-list li:not(:last-child)::after {
	content: "|";
	color: var(--color-border);
	margin: 0 .5rem;
}
.mobile-sitelinks-list a {
	color: var(--color-muted);
	font-size: .8rem;
}
.mobile-sitelinks-list a:hover { color: var(--color-primary); text-decoration: none; }
.mobile-menu-list .sub-menu .menu-link { color: var(--color-muted); font-weight: 400; }

.mobile-menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15,23,42,.5);
	z-index: 1050;
}
.mobile-menu-overlay[hidden] { display: none; }

@media (min-width: 992px) {
	.btn-icon.js-mobile-toggle { display: none; }
	.btn-icon.js-search-toggle { display: none; }
}
/* Category bar stays visible on mobile too (same nav, horizontally
   scrollable — .nav-scroll already supports touch/drag scroll). The
   hamburger menu remains as a secondary, non-scrolling way to reach it. */
@media (max-width: 991px) {
	.container.nav-inner { margin-left: 1.25rem; margin-right: 1.25rem; }
	.nav-home { padding: 0 .9rem; border-radius: var(--radius-md) 0 0 var(--radius-md); }
	.menu-link { padding: .3rem .85rem; font-size: .88rem; }
}
@media (max-width: 480px) {
	.container.nav-inner { margin-left: .75rem; margin-right: .75rem; }
}

/* ---------- TRENDING ---------- */
.trending-section, .hero-section, .editor-picks-section, .hot-topics-section,
.latest-news-section, .category-section, .related-posts-section {
	margin: 3rem auto;
}
.section-title {
	font-size: 1.4rem;
	font-weight: 800;
	margin-bottom: 1.25rem;
	padding-left: .75rem;
	border-left: 4px solid var(--color-primary);
}
.trending-section {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}
.trending-section .section-title { border-left: none; padding-left: 0; margin-bottom: 0; flex-shrink: 0; font-weight: 800; }
.trending-pills {
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	cursor: grab;
	user-select: none;
	flex: 1;
	min-width: 0;
}
.trending-pills::-webkit-scrollbar { display: none; }
.trending-pills.is-dragging { cursor: grabbing; }
.trending-pills li { flex-shrink: 0; }
.trending-pills a {
	display: inline-block;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: .3rem .8rem;
	white-space: nowrap;
	font-size: .82rem;
	font-weight: 500;
	color: var(--color-text);
	transition: border-color .15s ease, color .15s ease;
}
.trending-pills a:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }

/* ---------- AD SLOTS ---------- */
.ad-slot {
	overflow: hidden;
	border-radius: var(--radius-md);
}
.ad-slot:empty { display: none; }
.ad-slot img { width: 100%; height: auto; display: block; }
.hero-secondary .ad-slot { margin-bottom: 1.25rem; }

/* Both stack while sticky (different top offsets so they don't overlap).
   Each naturally un-sticks on its own once the sidebar's bottom edge — which
   lines up with the top of the footer — scrolls into view. */
.ad-slot--sidebar_middle {
	width: 300px;
	max-width: 100%;
	height: 250px;
	margin: 0 auto;
	position: sticky;
	top: 100px;
}
.ad-slot--sidebar_bottom {
	width: 300px;
	max-width: 100%;
	height: 250px;
	margin: 0 auto;
	position: sticky;
	top: 374px;
}

/* Skyscraper 160x600s: fixed to the viewport (not the page), so they follow
   scroll for the entire visit — only on screens wide enough to show them
   without overlapping the 1200px content column. */
.ad-slot--skyscraper_left,
.ad-slot--skyscraper_right {
	display: none;
}
/* Below 992px there's no way to fit a 160px fixed ad without covering
   content outright — hidden there, same cutoff as the rest of the desktop
   layout (nav, header sizing already switch at this point too). */
@media (min-width: 992px) {
	.ad-slot--skyscraper_left,
	.ad-slot--skyscraper_right {
		display: block;
		position: fixed;
		/* Fixed offset from the top (not vertically centered) so it always
		   clears the sticky main header instead of overlapping it on page
		   load or after scrolling back up. */
		top: 130px;
		width: 160px;
		height: 600px;
		z-index: 300;
		transition: top .3s cubic-bezier(.4,0,.2,1);
	}
	.ad-slot--skyscraper_left { left: 5px; }
	.ad-slot--skyscraper_right { right: 5px; }
	/* Header shrinks once scrolled (.is-scrolled, see navigation.js) — follow
	   it up so the gap above the ad doesn't grow instead of staying put. */
	.is-scrolled .ad-slot--skyscraper_left,
	.is-scrolled .ad-slot--skyscraper_right {
		top: 90px;
	}
}
/* 992–1529px: the 1200px container itself doesn't leave room for both ads,
   so the container gives way instead of hiding them — shrinks just enough
   (100vw minus both ads' width+gap) to guarantee zero overlap at any width
   in this range. */
@media (min-width: 992px) and (max-width: 1529px) {
	:root { --container-width: calc(100vw - 330px); }
}
/* 1530px+: container is back to its normal 1200px, so the ads are
   positioned relative to ITS edge (not the raw browser edge) — otherwise
   they'd leave an ever-growing empty gap on very wide monitors. */
@media (min-width: 1530px) {
	.ad-slot--skyscraper_left { left: calc(50vw - (var(--container-width) / 2) - 165px); }
	.ad-slot--skyscraper_right { right: calc(50vw - (var(--container-width) / 2) - 165px); }
}

.ad-banner-wrap { margin: 1.5rem auto; }
.ad-banner {
	max-width: 1050px;
	aspect-ratio: 1050 / 200;
	margin: 0 auto;
}
.ad-banner-image { width: 100%; height: 100%; object-fit: cover; }
.ad-banner--desktop { display: none; }
@media (min-width: 1200px) {
	.ad-banner--desktop { display: block; }
}

.quick-headlines { display: none; margin: 2rem auto; }
@media (min-width: 1200px) {
	.quick-headlines { display: block; }
}
.quick-headlines-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.quick-headlines-header .section-title { margin-bottom: 0; }
.quick-headlines-nav { display: flex; gap: .5rem; }
.quick-headlines-nav button {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.quick-headlines-nav button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.quick-headlines-nav button:disabled { opacity: .35; cursor: default; pointer-events: none; }

.quick-headlines-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(20% - 1rem);
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.quick-headlines-track::-webkit-scrollbar { display: none; }
.quick-headline { position: relative; scroll-snap-align: start; }
.quick-headline-media {
	aspect-ratio: 4/3;
	overflow: hidden;
	border-radius: var(--radius-sm);
	margin-bottom: .6rem;
}
.quick-headline-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.quick-headline:hover .quick-headline-media img { transform: scale(1.04); }
.quick-headline-title {
	margin: 0;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.35;
}
.quick-headline-title a {
	color: var(--color-text);
	position: static;
}
.quick-headline-title a::after { content: ""; position: absolute; inset: 0; }
.quick-headline-title a:hover { color: var(--color-primary); text-decoration: none; }

/* ---------- HERO ---------- */
.hero-section {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: auto auto;
	gap: 1.75rem;
	margin-top: 2rem;
}
.hero-featured { grid-column: 1; grid-row: 1; }
.editor-picks-featured { margin-bottom: 1.5rem; }
.load-more-btn { display: block; width: max-content; margin: 1.5rem auto 0; text-align: center; }
/* Spans both rows so its bottom edge lines up with the banner row below
   the featured image — "sejajar" with the side list. */
.hero-secondary { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 1.25rem; }
/* Fixed height (not stretched to match the side list — that made the crop
   unpredictable). Width stays fluid, following the featured column. */
.hero-banner-row { grid-column: 1; grid-row: 2; }
.hero-banner-row .ad-banner-wrap { margin: 0; padding: 0; max-width: none; }
.hero-banner-row .ad-banner {
	max-width: none;
	margin: 0;
	aspect-ratio: unset;
	height: 160px;
	background: var(--color-border);
}
.hero-banner-row .ad-banner-image { object-fit: cover; }
.hero-secondary .article-card { flex-direction: row; box-shadow: none; background: transparent; border-bottom: 1px solid var(--color-border); border-radius: 0; padding-bottom: 1.25rem; }
.hero-secondary .article-card:last-child { border-bottom: none; padding-bottom: 0; }
.hero-secondary .article-card-media { width: 120px; flex-shrink: 0; border-radius: var(--radius-md); aspect-ratio: 1/1; }
.hero-secondary .article-card-body { padding: 0 0 0 .9rem; }
.hero-secondary .article-card-title { font-size: .95rem; }

.hero-featured .article-card--large .article-card-media { aspect-ratio: 16/10; }

/* ---------- ARTICLE CARDS ---------- */
.article-grid { display: grid; gap: 1.5rem; }
.article-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.article-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.article-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.article-grid--list { grid-template-columns: 1fr; }

.article-card {
	position: relative;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
}
.article-card-media { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; }
.article-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.article-card:hover .article-card-media img { transform: scale(1.04); }

/* Stretched-link: the title is the only real link, but its clickable area
   covers the whole card, so clicking anywhere (image, gradient, whitespace)
   opens the article. The category badge sits above it to stay independently
   clickable. */
.article-card-title-link {
	position: static;
}
.article-card-title-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.article-card-category { position: relative; z-index: 2; }
.article-card-title-link:focus-visible::after {
	outline: 3px solid var(--color-primary);
	outline-offset: -3px;
	border-radius: var(--radius-md);
}
.thumbnail-placeholder { display: block; width: 100%; height: 100%; }
.thumbnail-placeholder svg { width: 100%; height: 100%; }

/* Medium (default grid card): plain, safe pattern — image on top, solid
   body below. No absolute-positioned overlay, so there is no height math to
   get wrong and nothing can ever get clipped regardless of title length. */
.article-card--medium .article-card-media { border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* Large (hero-featured only, one big card with lots of headroom): image
   with a gradient text overlay for the editorial "headline on photo" look. */
.article-card--large {
	position: relative;
	box-shadow: none;
	background: transparent;
	border-radius: var(--radius-md);
}
.article-card--large .article-card-media { border-radius: var(--radius-md); }
.article-card--large .article-card-body {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 2.5rem 1.5rem 1.5rem;
	background: linear-gradient(0deg, rgba(2,6,23,.9) 0%, rgba(2,6,23,.5) 60%, rgba(2,6,23,0) 100%);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	gap: .3rem;
}
.article-card--large .article-card-category { color: #93C5FD; }
.article-card--large .article-card-title,
.article-card--large .article-card-title a,
.article-card--large .article-card-excerpt,
.article-card--large .article-card-meta { color: #fff; }
.article-card--large .article-card-excerpt { color: #E2E8F0; }
.article-card--large .article-card-meta { color: #CBD5E1; }

.indicator {
	position: absolute;
	bottom: .5rem;
	right: .5rem;
	background: rgba(15,23,42,.75);
	color: #fff;
	border-radius: 999px;
	padding: .2rem .5rem;
	font-size: .7rem;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	z-index: 2;
}
.indicator--video { right: auto; left: .5rem; }
/* The large card's text gradient covers the bottom of the image, so its
   indicator badge moves up top to stay visible instead of vanishing
   underneath it. Medium cards have a plain body below the image, so their
   indicator can safely stay bottom-right (nothing covers it there). */
.article-card--large .indicator {
	bottom: auto;
	top: .5rem;
}

.article-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.article-card-category {
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-primary);
	letter-spacing: .04em;
}
/* No line-clamp here — the safe (non-overlay) card variants are normal
   document flow now, so a long title just makes the card a little taller
   instead of ever getting cut off. */
.article-card-title {
	font-size: 1.1rem;
	line-height: 1.35;
	margin: 0;
}
.article-card-title a { color: var(--color-text); }
.article-card-title a:hover { color: var(--color-primary); text-decoration: none; }
.article-card--large .article-card-title a:hover { color: #fff; text-decoration: underline; }
/* .article-card--large is the one variant that overlays text on a fixed-
   height image, so its title still needs a bound — otherwise a very long
   headline could grow past the image and get clipped by the card's own
   overflow:hidden. 3 lines comfortably covers real headline lengths. */
.article-card--large .article-card-title {
	font-size: 1.85rem;
	line-height: 1.25;
	max-width: 90%;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.article-card-excerpt {
	color: var(--color-muted);
	font-size: .9rem;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.article-card-meta { font-size: .78rem; color: var(--color-muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.article-card-meta .sep { opacity: .6; }
.article-card-author {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	color: var(--color-primary);
	font-weight: 700;
}
.article-card-author::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #FF2626;
	flex-shrink: 0;
}
.article-card-author:hover { color: #17369a; text-decoration: none; }
.article-card--large .article-card-author { color: #fff; }
.article-card--large .article-card-author:hover { color: #E2E8F0; }

.article-card--horizontal { flex-direction: row; }
.article-card--horizontal .article-card-media { aspect-ratio: 1/1; }
.article-card--horizontal .article-card-body { padding: .5rem .75rem; }

.article-card--list, .article-grid--list .article-card { flex-direction: row; }
.article-grid--list .article-card-media { width: 200px; flex-shrink: 0; aspect-ratio: 4/3; }

.article-card--compact .article-card-body { padding: .6rem; gap: .25rem; }
.article-card--compact .article-card-title { font-size: .9rem; }

/* ---------- HOT TOPICS / CATEGORY SECTION ---------- */
.hot-topic-block {
	margin-bottom: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--color-border);
}
.hot-topic-block:first-child { padding-top: 0; border-top: none; }
.hot-topic-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.25rem; }
.hot-topic-header h3, .hot-topic-header h2 { margin: 0; font-size: 1.25rem; font-weight: 800; }
.category-section + .category-section { margin-top: -1rem; padding-top: 2.5rem; border-top: 1px solid var(--color-border); }
.see-all { font-size: .85rem; font-weight: 600; }

/* ---------- LAYOUT WITH SIDEBAR ---------- */
.layout-with-sidebar {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 2rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
	/* stretch (not start): the sidebar column needs to be as tall as the
	   content column, otherwise the sticky ad inside it runs out of room to
	   travel and stops long before the footer. */
	align-items: stretch;
}
.widget-area { display: flex; flex-direction: column; gap: 1.5rem; min-height: 100%; }
.widget { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.25rem; }
.widget-title,
.widget .wp-block-group > h2,
.widget h2.wp-block-heading {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--color-primary);
	margin: 0 0 .85rem;
	padding-top: .9rem;
	position: relative;
}
.widget-title::before,
.widget .wp-block-group > h2::before,
.widget h2.wp-block-heading::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 5px;
	background: linear-gradient(90deg, #1F5AD6 0%, #1F5AD6 50%, #FF2626 50%, #FF2626 100%);
	border-radius: 3px;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget-popular-posts li { display: flex; flex-direction: column; padding: .6rem 0; border-bottom: 1px solid var(--color-border); }
.widget-popular-posts li:last-child { border-bottom: none; }
.widget-popular-posts .views { font-size: .75rem; color: var(--color-muted); }

/* WordPress default blocks (Search, Recent Posts, Recent Comments, Archives,
   Categories) used as widgets — restyled to match the rest of the sidebar
   instead of default unstyled WP output. (Heading style is shared with
   .widget-title above.) */
.widget .wp-block-search__label { display: none; }
.widget .wp-block-search__inside-wrapper {
	display: flex;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.widget .wp-block-search__input {
	flex: 1;
	border: none;
	padding: .6rem .75rem;
	font-size: .875rem;
	font-family: inherit;
	background: var(--color-background);
	color: var(--color-text);
}
.widget .wp-block-search__button {
	border: none;
	background: var(--color-primary);
	color: #fff;
	padding: 0 1rem;
	cursor: pointer;
	font-weight: 600;
	font-size: .85rem;
}
.widget .wp-block-search__button:hover { background: #17369a; }

.widget .wp-block-latest-posts,
.widget .wp-block-archives,
.widget .wp-block-categories,
.widget .wp-block-latest-comments {
	list-style: none;
	margin: 0;
	padding: 0;
}
.widget .wp-block-latest-posts li,
.widget .wp-block-archives li,
.widget .wp-block-categories li,
.widget .wp-block-latest-comments li {
	padding: .6rem 0;
	border-bottom: 1px solid var(--color-border);
	font-size: .875rem;
}
.widget .wp-block-latest-posts li:last-child,
.widget .wp-block-archives li:last-child,
.widget .wp-block-categories li:last-child,
.widget .wp-block-latest-comments li:last-child { border-bottom: none; }
.widget .wp-block-latest-posts a,
.widget .wp-block-archives a,
.widget .wp-block-categories a,
.widget .wp-block-latest-comments a {
	color: var(--color-text);
	font-weight: 600;
}
.widget .wp-block-latest-posts a:hover,
.widget .wp-block-archives a:hover,
.widget .wp-block-categories a:hover,
.widget .wp-block-latest-comments a:hover { color: var(--color-primary); text-decoration: none; }
.widget .wp-block-latest-posts__post-date {
	display: block;
	font-size: .75rem;
	color: var(--color-muted);
	font-weight: 400;
	margin-top: .2rem;
}
.widget .wp-block-categories-list .wp-block-categories-list__label,
.widget .wp-block-archives-list .wp-block-archives-list__label { display: none; }
.widget .wp-block-latest-comments__comment {
	font-size: .875rem;
	padding: .6rem 0;
	border-bottom: 1px solid var(--color-border);
}
.widget .wp-block-latest-comments__comment:last-child { border-bottom: none; }
.widget .wp-block-latest-comments__comment-link { color: var(--color-text); font-weight: 600; }
.widget .wp-block-latest-comments__comment-link:hover { color: var(--color-primary); }
.widget .wp-block-latest-comments__comment-excerpt p { color: var(--color-muted); font-size: .82rem; margin: .2rem 0 0; }

/* ---------- SINGLE ARTICLE ---------- */
.single-article, .page-content { max-width: 780px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; padding: 0; font-size: .82rem; color: var(--color-muted); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .35rem; }
.article-category {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: .5rem;
}
.article-title { font-size: 2rem; margin-bottom: .75rem; }
.article-meta-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; color: var(--color-muted); font-size: .85rem; margin-bottom: 1.25rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.post-meta .sep { opacity: .6; }
.post-meta-author {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	color: var(--color-primary);
	font-weight: 700;
}
.post-meta-author::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #FF2626;
	flex-shrink: 0;
}
.post-meta-author:hover { color: #17369a; text-decoration: none; }
.article-featured-image { margin: 0 0 1.5rem; }
.article-featured-image img { border-radius: var(--radius-md); width: 100%; }
.article-featured-image figcaption { font-size: .8rem; color: var(--color-muted); margin-top: .5rem; }

.article-font-controls { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; font-size: .8rem; color: var(--color-muted); }
.article-font-controls button {
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	border-radius: var(--radius-sm);
	width: 2rem; height: 2rem;
	cursor: pointer;
	color: var(--color-text);
}

.article-content { font-size: 1.05rem; line-height: 1.8; }
.article-content p { margin: 0 0 1.25em; }
.article-content img { border-radius: var(--radius-sm); margin: 1.5em 0; }
.article-content h2, .article-content h3 { margin-top: 1.75em; }
.article-content blockquote { border-left: 4px solid var(--color-primary); margin: 1.5em 0; padding: .5em 1.25em; color: var(--color-muted); font-style: italic; }
.article-content table { width: 100%; overflow-x: auto; display: block; }

.social-share { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 2rem 0; }
.social-share-label { font-size: .85rem; font-weight: 600; color: var(--color-muted); }
.share-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem;
	border-radius: 999px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	cursor: pointer;
}
.share-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.article-tags { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1.5rem 0; }
.article-tags a {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: .3rem .8rem;
	font-size: .8rem;
	color: var(--color-text);
}

.author-box {
	display: flex;
	gap: 1rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 1.25rem;
	margin: 2rem 0;
}
.author-box-avatar img { border-radius: 50%; }
.author-box-name { margin: 0 0 .4rem; font-size: 1.1rem; }
.author-box-name a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--color-primary);
	font-weight: 700;
}
.author-box-name a::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #FF2626;
	flex-shrink: 0;
}
.author-box-name a:hover { color: #17369a; text-decoration: none; }
.author-box-bio { color: var(--color-muted); margin: 0 0 .4rem; font-size: .9rem; }

.post-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.post-navigation a { display: block; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.post-navigation .nav-next { text-align: right; }
.post-navigation .nav-label { display: block; font-size: .75rem; color: var(--color-muted); margin-bottom: .3rem; }
.post-navigation .nav-title { font-weight: 600; }

/* ---------- PAGINATION (category/tag/search/archive listings) ---------- */
.pagination { margin: 2.5rem 0; }
.pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .75rem;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: .9rem;
	font-weight: 600;
}
a.pagination .page-numbers,
.pagination a.page-numbers {
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pagination a.page-numbers:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	text-decoration: none;
}
.pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}
.pagination .page-numbers.dots {
	border: none;
	background: none;
	color: var(--color-muted);
	min-width: auto;
	padding: 0 .25rem;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
	padding: 0 1.1rem;
	font-weight: 700;
}

/* ---------- COMMENTS ---------- */
.comments-area { margin-top: 2.5rem; }
.comments-title {
	font-size: 1.3rem;
	font-weight: 800;
	margin: 0 0 1.5rem;
	padding-top: .75rem;
	position: relative;
}
.comments-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 4px;
	background: linear-gradient(90deg, #1F5AD6 0%, #1F5AD6 50%, #FF2626 50%, #FF2626 100%);
	border-radius: 2px;
}

.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-item {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--color-border);
}
.comment-item:first-child { padding-top: 0; }
.comment-body { display: flex; gap: .9rem; }
.comment-avatar img { border-radius: 50%; }
.comment-content { flex: 1; min-width: 0; }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .82rem; color: var(--color-muted); margin-bottom: .4rem; }
.comment-author {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 700;
	color: var(--color-primary);
}
.comment-author::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #FF2626;
	flex-shrink: 0;
}
.comment-text { color: var(--color-text); line-height: 1.7; }
.comment-text p:last-child { margin-bottom: 0; }
.comment-awaiting-moderation {
	background: #FFF7E6;
	border: 1px solid #F5D68A;
	color: #92660A;
	font-size: .82rem;
	padding: .5rem .75rem;
	border-radius: var(--radius-sm);
	margin: .5rem 0;
}
.comment-reply-link {
	display: inline-block;
	margin-top: .5rem;
	font-size: .8rem;
	font-weight: 600;
	color: var(--color-primary);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: .25rem .8rem;
}
.comment-reply-link:hover { border-color: var(--color-primary); text-decoration: none; background: rgba(31,90,214,.06); }
.children { list-style: none; margin: 1rem 0 0 2.75rem; }
.children .comment-item { border-bottom: none; padding: 1rem 0 0; }
.children .comment-item:not(:last-child) { border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; }

/* Comment form */
.comment-respond {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 1.5rem;
	margin-top: 2rem;
}
.comment-reply-title { font-size: 1.15rem; font-weight: 800; margin: 0 0 1rem; }
.comment-form p { margin: 0 0 1rem; }
.comment-form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; color: var(--color-text); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: .65rem .85rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-background);
	color: var(--color-text);
	font-family: inherit;
	font-size: .92rem;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--color-primary);
}
.comment-form textarea { resize: vertical; }
.comment-notes, .comment-form-cookies-consent { font-size: .8rem; color: var(--color-muted); }
.comment-form-cookies-consent { display: flex; align-items: center; gap: .4rem; }
.form-submit { margin-bottom: 0; }
.logged-in-as { font-size: .85rem; color: var(--color-muted); margin-bottom: 1rem; }
.logged-in-as a { color: var(--color-primary); }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--color-footer-bg); color: #E2E8F0; margin-top: 3rem; }
/* The footer background is a brand color (blue in light mode), so links
   inheriting the sitewide blue link color become invisible on it — every
   link/heading in here gets an explicit light color instead. */
.site-footer a { color: #E2E8F0; }
.site-footer a:hover { color: #fff; }
.site-footer .widget-title { color: #fff; }
.site-footer .widget-title::before { background: linear-gradient(90deg, #fff 0%, #fff 50%, #FF2626 50%, #FF2626 100%); }
.footer-top { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding: 3rem 1.25rem; }
.footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; }
.footer-widgets ul { list-style: none; margin: 0; padding: 0; }
.footer-widgets li { margin-bottom: .5rem; font-size: .88rem; }
.footer-widget-column .widget { background: transparent; border: none; padding: 0; color: inherit; }
.footer-description { color: #fff; font-size: .9rem; }
.footer-redaksi {
	font-style: normal;
	font-size: .82rem;
	color: #CBD5E1;
	line-height: 1.6;
	margin: 1rem 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(255,255,255,.15);
}
.footer-redaksi p { margin: 0 0 .3rem; }
.footer-redaksi a { color: #E2E8F0; }
.footer-redaksi a:hover { color: #fff; }
.social-links { list-style: none; display: flex; gap: .75rem; padding: 0; margin: 1rem 0 0; }
.social-links a { color: #E2E8F0; font-size: .85rem; border: 1px solid #334155; border-radius: 999px; padding: .3rem .8rem; }
.footer-bottom {
	border-top: 1px solid #334155;
	padding: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	font-size: .82rem;
	color: #94A3B8;
}
.footer-menu { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
.footer-menu a { color: #94A3B8; }

/* ---------- 404 ---------- */
.error-404-content { padding: 3rem 1.25rem; text-align: center; }
.error-code { font-size: 5rem; font-weight: 800; color: var(--color-primary); margin: 0; }
.error-404-hero .search-form { max-width: 420px; margin: 1.5rem auto; }
.error-404-categories, .error-404-latest { margin-top: 3rem; text-align: left; }

/* ---------- EPAPER ---------- */
.epaper-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 2rem 0; }
.epaper-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; display: block; color: var(--color-text); }
.epaper-cover { aspect-ratio: 3/4; overflow: hidden; }
.epaper-title { font-size: .95rem; padding: .75rem .75rem 0; margin: 0; }
.epaper-card time { display: block; padding: .3rem .75rem .75rem; font-size: .8rem; color: var(--color-muted); }
.epaper-single { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; padding: 2rem 1.25rem; }

/* ---------- MOBILE AD SLOTS ---------- */
.ad-slot--mobile_infeed_1,
.ad-slot--mobile_infeed_2 { display: none; margin: 1.5rem 0; }
@media (max-width: 767px) {
	.ad-slot--mobile_infeed_1,
	.ad-slot--mobile_infeed_2 { display: block; }
}

.mobile-sticky-ad {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1400;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -2px 12px rgba(15,23,42,.15);
	transition: transform .25s ease;
}
@media (max-width: 767px) {
	.mobile-sticky-ad { display: block; }
}
.mobile-sticky-ad .ad-slot { margin: 0; max-height: 100px; }
.mobile-sticky-ad .ad-slot img { width: 100%; height: 100%; max-height: 100px; object-fit: contain; }
.mobile-sticky-ad-toggle,
.mobile-sticky-ad-close {
	position: absolute;
	top: -30px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-bottom: none;
	color: var(--color-text);
	cursor: pointer;
}
.mobile-sticky-ad-toggle { right: 36px; border-radius: 6px 0 0 0; }
.mobile-sticky-ad-close { right: 0; border-radius: 0 6px 0 0; font-size: 1.1rem; line-height: 1; }
.mobile-sticky-ad.is-collapsed { transform: translateY(calc(100% - 6px)); }
.mobile-sticky-ad.is-collapsed .mobile-sticky-ad-toggle svg { transform: rotate(180deg); }
.mobile-sticky-ad.is-closed { display: none !important; }

/* ---------- RESPONSIVE / MOBILE ---------- */
@media (max-width: 1199px) {
	/* Terpopuler was desktop-only (hidden by default) — show it everywhere,
	   just drop to a narrower card and hide the prev/next buttons in favour
	   of native touch-scroll on smaller viewports below. */
	.quick-headlines { display: block; }
	.quick-headlines-track { grid-auto-columns: calc(33.333% - 1rem); }
}

@media (max-width: 991px) {
	.header-main { padding: 1rem 1.25rem; gap: 1rem; }
	.site-logo img { max-height: 52px; }
	.site-title { font-size: 1.25rem; }
	.header-datetime-row { padding-top: .75rem; }

	.hero-section { grid-template-columns: 1fr; grid-template-rows: none; gap: 1.25rem; }
	.hero-featured, .hero-secondary, .hero-banner-row { grid-column: 1; grid-row: auto; }

	.article-grid--cols-3,
	.article-grid--cols-4,
	.article-grid--cols-5 { grid-template-columns: repeat(2, 1fr); }

	.layout-with-sidebar { grid-template-columns: 1fr; }
	.widget-area { min-height: 0; }
	.ad-slot--sidebar_middle,
	.ad-slot--sidebar_bottom { position: static; top: auto; }

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

	.epaper-grid { grid-template-columns: repeat(2, 1fr); }
	.epaper-single { grid-template-columns: 1fr; }

	.quick-headlines-track { grid-auto-columns: calc(45% - 1rem); }

	.trending-section { flex-wrap: nowrap; }
}

@media (max-width: 767px) {
	.article-title { font-size: 1.5rem; }
	.hero-featured .article-card--large .article-card-title { font-size: 1.35rem; }

	.quick-headlines-header { display: none; }
	.quick-headlines-track { grid-auto-columns: calc(50% - .625rem); gap: 1rem; }
	.quick-headline-title { font-size: .8rem; }

	.post-navigation { grid-template-columns: 1fr; }
	.post-navigation .nav-next { text-align: left; }

	.hero-secondary .article-card-media { width: 96px; }

	.latest-news-section .article-card-media { aspect-ratio: 1/1; }

	.footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
	.article-grid--cols-3,
	.article-grid--cols-4,
	.article-grid--cols-5 { grid-template-columns: 1fr; }

	.epaper-grid { grid-template-columns: 1fr; }

	.author-box { flex-direction: column; align-items: center; text-align: center; }
	.author-box-name a { justify-content: center; }

	.header-datetime { font-size: .72rem; }
	.header-actions { gap: 0; }

	.quick-headlines-track { grid-auto-columns: calc(50% - .5rem); gap: .75rem; }
	.quick-headline-title { font-size: .76rem; }
}

/* ---------- PRINT ---------- */
@media print {
	.site-header, .main-navigation, .breaking-news, .search-overlay, .mobile-menu,
	.mobile-menu-overlay, .widget-area, .ad-slot, .social-share, .comments-area,
	.site-footer, .article-font-controls, .post-navigation, .related-posts-section {
		display: none !important;
	}
	.layout-with-sidebar { grid-template-columns: 1fr; }
	body { background: #fff; color: #000; }
	.article-content { font-size: 12pt; }
}