/* ==========================================================================
   BURUH THEME — COMPONENTS.CSS
   Base component styling. Mobile overrides live in responsive.css.
   ========================================================================== */

.media-placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #ececec 25%, #e0e0e0 25%, #e0e0e0 50%, #ececec 50%, #ececec 75%, #e0e0e0 75%, #e0e0e0 100%);
	background-size: 16px 16px;
}

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

.header-top-inner {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	height: var(--header-height);
}

.site-branding { flex-shrink: 0; }

.site-logo-text {
	font-family: var(--font-heading);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--color-charcoal);
}
.site-logo-text::first-letter { color: var(--color-primary); }

.custom-logo { max-height: 56px; width: auto; }

.header-search {
	flex: 1 1 auto;
	display: flex;
	max-width: 480px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.header-search .search-field {
	flex: 1;
	border: none;
	padding: 0 var(--space-4);
	height: 42px;
	font-size: 14px;
	min-width: 0;
}
.header-search .search-field:focus { outline: none; }
.header-search .search-submit {
	border-radius: 0;
	height: 42px;
	min-height: 42px;
}

.header-actions { flex-shrink: 0; margin-left: auto; }

.mobile-menu-toggle,
.mobile-search-toggle {
	display: none;
	background: none;
	border: none;
	padding: 10px;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

.hamburger-icon { display: flex; flex-direction: column; gap: 4px; width: 22px; }
.hamburger-icon span { display: block; height: 2px; background: var(--color-charcoal); border-radius: 2px; }

.icon-search { font-size: 18px; }

.mobile-search-bar { display: none; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.mobile-search-bar form { display: flex; gap: 8px; }
.mobile-search-bar .search-field { flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); height: 44px; }

/* Primary nav (desktop) */
.primary-navigation { border-top: 1px solid var(--color-border); }
.primary-menu, .mobile-menu { display: flex; }
.primary-menu {
	overflow-x: auto;
	scrollbar-width: none;
}
.primary-menu::-webkit-scrollbar { display: none; }

.primary-menu li { flex-shrink: 0; }

.primary-menu .nav-link,
.mobile-menu .nav-link {
	display: block;
	padding: 14px var(--space-4);
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
	color: var(--color-charcoal);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.primary-menu .nav-link:hover,
.primary-menu .current-menu-item .nav-link,
.primary-menu .current_page_item .nav-link {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

/* Trending bar */
.trending-bar {
	background: var(--color-bg-alt);
	border-top: 1px solid var(--color-border);
	overflow: hidden;
}
.trending-inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: 10px var(--space-4);
}
.trending-label {
	flex-shrink: 0;
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #fff;
	background: var(--color-charcoal);
	padding: 4px 10px;
	border-radius: var(--radius-sm);
}
.trending-list {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	gap: var(--space-5);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x;
}
.trending-list::-webkit-scrollbar { display: none; }
.trending-list li { flex-shrink: 0; }
.trending-list a {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
}
.trending-list a:hover { color: var(--color-primary); }

/* Mobile off-canvas nav */
.mobile-nav {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: 82%;
	max-width: 320px;
	background: #fff;
	z-index: 900;
	box-shadow: 2px 0 20px rgba(0,0,0,0.15);
	transform: translateX(-100%);
	transition: transform var(--transition-base);
	overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}
.mobile-nav-title { font-family: var(--font-heading); font-weight: 800; font-size: 18px; }
.mobile-nav-close { background: none; border: none; font-size: 28px; line-height: 1; min-width: 44px; min-height: 44px; }
.mobile-menu { flex-direction: column; }
.mobile-menu .nav-link { padding: 14px var(--space-4); border-bottom: 1px solid var(--color-border); text-transform: none; font-size: 15px; }

.mobile-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 890;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-base);
}
.mobile-nav-overlay.is-visible { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   ADVERTISEMENT
   ========================================================================== */
/* AUDIT FINDING (RISIKO TINGGI): template-parts/advertisement.php mencetak
   kode iklan MENTAH dari Customizer (get_theme_mod) langsung ke halaman —
   `top_banner`, `mobile_banner`, dan `in_content` (single & archive). Kode
   dari ad network (AdSense/ad server lain) HAMPIR SELALU memakai `width`
   tetap dalam piksel (mis. 336px,
   300px, 728px) pada <ins>/<div>/<iframe> bawaannya, dan sebelumnya TIDAK
   ADA satupun pembatas lebar di sisi tema untuk kode tsb — hanya fallback
   placeholder (saat kode kosong) yang punya styling. Unit iklan selebar
   300–336px+ akan overflow di viewport 320–360px dan memaksa <body>
   melebar, yang kemudian ikut memotong elemen lain di halaman (termasuk
   yang posisinya jauh di atas/bawah slot iklan) karena `overflow-x:hidden`
   pada <body> hanya menyembunyikan gejalanya, bukan mencegah pelebaran
   layout viewport itu sendiri di sejumlah browser mobile.

   PERBAIKAN: `.ad-slot` dan SEMUA elemen langsung di dalamnya (termasuk
   markup mentah dari ad network yang tidak kita kontrol) dipaksa untuk
   tunduk pada lebar container. Kalau unit iklan tertentu ternyata tetap
   lebih lebar dari kolom (mis. iklan 728px dipasang di slot mobile),
   `overflow-x: auto` membuatnya bisa digeser HANYA di dalam kotak iklan
   itu sendiri — bukan membuat seluruh halaman ikut melebar/terpotong. */
.ad-slot {
	margin: var(--space-5) 0;
	text-align: center;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	box-sizing: border-box;
}
.ad-slot > * { max-width: 100% !important; }
.ad-slot iframe,
.ad-slot ins,
.ad-slot img,
.ad-slot div { max-width: 100% !important; }
.ad-placeholder {
	background: var(--color-bg-alt);
	border: 1px dashed #bcbcbc;
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: var(--space-6) var(--space-4);
	border-radius: var(--radius-sm);
}
.ad-slot-top-banner { margin: 0; padding: var(--space-3) 0; background: var(--color-bg-alt); }
.ad-slot-top-banner .ad-placeholder { max-width: var(--container-max); margin: 0 auto; }

/* Mobile banner: pengganti Top Banner khusus layar <768px (lihat responsive.css). */
.ad-slot-mobile-banner { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-bg-alt); display: none; }
.ad-slot-mobile-banner .ad-placeholder { max-width: 336px; margin: 0 auto; min-height: 100px; }

/* Main content column. Iklan skyscraper kiri/kanan sudah dihapus (per
   permintaan) — #page.site sekarang membatasi diri ke var(--container-max)
   dan men-tengahkan dirinya sendiri lewat margin:auto, persis mekanisme
   yang sama dipakai oleh .container pada header & footer, sehingga header,
   konten utama, dan footer selalu memiliki lebar dan alignment yang sama. */
#page.site { min-width: 0; max-width: var(--container-max); margin: 0 auto; width: 100%; box-sizing: border-box; }

/* ==========================================================================
   HERO / FEATURED ARTICLE
   ========================================================================== */
.hero-section { padding-top: var(--space-6); }

.hero-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--space-6);
	align-items: start;
}

.featured-article { display: block; }
.featured-media { display: block; border-radius: var(--radius-md); overflow: hidden; }
.featured-media img { aspect-ratio: 16/10; object-fit: cover; }
.featured-body { padding-top: var(--space-4); }
.featured-title {
	font-size: 32px;
	margin: var(--space-3) 0;
}
.featured-title a:hover { color: var(--color-primary); }
.featured-excerpt { color: var(--color-text-muted); font-size: 16px; }
.post-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--color-text-muted);
}
.meta-dot { opacity: 0.6; }

/* Hero quick links row (3 berita lain dengan thumbnail, judul, waktu) */
.hero-quicklinks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}
.hero-quicklink-item {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
}
.hero-quicklink-media {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	display: block;
}
.hero-quicklink-media img,
.hero-quicklink-media .media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hero-quicklink-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.hero-quicklink-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-charcoal);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hero-quicklink-item:hover .hero-quicklink-title { color: var(--color-primary); }
.hero-quicklink-time { font-size: 11px; color: var(--color-text-muted); }

/* Popular list */
.popular-widget { margin-bottom: var(--space-6); }
.popular-list { display: flex; flex-direction: column; gap: var(--space-4); }
.popular-item {
	display: flex;
	gap: var(--space-4);
	align-items: center;
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}
.popular-item:last-child { border-bottom: none; padding-bottom: 0; }
.popular-rank {
	font-family: var(--font-heading);
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	flex-shrink: 0;
	min-width: 36px;
	text-align: center;
	position: relative;
	padding-right: var(--space-3);
}
.popular-rank::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 28px;
	background: var(--color-border);
}
/* Gradasi warna merah dari rank 1 (paling pekat) ke rank 5 (paling muda) */
.popular-rank-1 { color: #b3181f; }
.popular-rank-2 { color: #c81f27; }
.popular-rank-3 { color: var(--color-primary); }
.popular-rank-4 { color: #e05a5f; }
.popular-rank-5 { color: #e98488; }
.popular-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.popular-title { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--color-charcoal); }
.popular-title:hover { color: var(--color-primary); }
.popular-time { font-size: 12px; color: var(--color-text-muted); }

/* ==========================================================================
   NEWS GRID / CARDS
   ========================================================================== */
.news-grid { display: grid; gap: var(--space-5); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

.news-card { display: flex; flex-direction: column; }
.news-card-media { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.news-card-media img { aspect-ratio: 16/9; object-fit: cover; transition: transform var(--transition-base); }
.news-card:hover .news-card-media img { transform: scale(1.04); }
.news-card-body { padding-top: var(--space-3); display: flex; flex-direction: column; gap: 6px; }
.news-card-title { font-size: 16px; }
.news-card-title a:hover { color: var(--color-primary); }
.news-card-time { font-size: 12px; color: var(--color-text-muted); }

/* Compact / small item (image-left) */
.news-small { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.news-small:last-child { border-bottom: none; }
.news-small-media { flex-shrink: 0; width: 88px; border-radius: var(--radius-sm); overflow: hidden; }
.news-small-media img { aspect-ratio: 1/1; object-fit: cover; }
.news-small-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.news-small-title { font-size: 14px; line-height: 1.35; }
.news-small-title a:hover { color: var(--color-primary); }
.news-small-time { font-size: 11px; color: var(--color-text-muted); }

/* ==========================================================================
   FEATURED VIDEO (ENAM+)
   ========================================================================== */
.video-feature {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	background: var(--color-charcoal);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.video-feature-media img,
.video-feature-media .media-placeholder { height: 100%; object-fit: cover; aspect-ratio: auto; }
.video-embed-wrap { position: relative; padding-top: 56.25%; height: 0; }
.video-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-media-overlay-wrap { position: relative; height: 100%; min-height: 320px; }
.video-media-overlay-wrap img { width: 100%; height: 100%; object-fit: cover; }
.video-source-tag {
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
}
.video-play-btn {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 56px; height: 56px;
	border-radius: 50%;
	background: rgba(255,255,255,0.92);
	color: var(--color-primary);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
}
.video-media-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: var(--space-5) var(--space-4) var(--space-4);
	background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
}

.video-feature-body {
	padding: var(--space-6);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-3);
}
.video-feature-eyebrow {
	color: var(--color-primary);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.video-feature-body h2 { color: #fff; font-size: 26px; }
.video-feature-body p { color: #d6d6d6; }
.video-feature-body .btn { align-self: flex-start; }

/* ==========================================================================
   SHORT VIDEO CAROUSEL
   ========================================================================== */
.short-video-wrap { position: relative; }
.carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: #fff;
	color: var(--color-charcoal);
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.carousel-arrow:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.carousel-arrow-prev { left: -8px; }
.carousel-arrow-next { right: -8px; }

.short-video-carousel {
	display: flex;
	gap: var(--space-4);
	overflow-x: auto;
	padding-bottom: 8px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}
.short-video-card {
	position: relative;
	flex: 0 0 180px;
	aspect-ratio: 9/16;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-charcoal);
	scroll-snap-align: start;
	display: block;
}
.short-video-card img,
.short-video-card .media-placeholder { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.play-icon {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,0.9);
	color: var(--color-primary);
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
}
.video-duration {
	position: absolute; top: 8px; right: 8px;
	background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 3px;
}
.short-video-title {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: var(--space-3);
	background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
	color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3;
}

/* ==========================================================================
   SPECIAL CONTENT SECTIONS
   ========================================================================== */
.special-layout {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--space-6);
	align-items: start;
}
.special-supporting { display: flex; flex-direction: column; }

/* ==========================================================================
   LATEST ARTICLES (article rows)
   ========================================================================== */
.article-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--space-5);
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--color-border);
}
.article-row:first-child { padding-top: 0; }
.article-row-media { border-radius: var(--radius-sm); overflow: hidden; }
.article-row-media img { aspect-ratio: 16/9; object-fit: cover; }
.article-row-body { display: flex; flex-direction: column; gap: 6px; }
.article-row-body h3 { font-size: 19px; }
.article-row-body h3 a:hover { color: var(--color-primary); }
.article-row-body p { color: var(--color-text-muted); font-size: 14px; margin: 0; }
.article-row-body time { font-size: 12px; color: var(--color-text-muted); }

.load-more-wrap { display: flex; justify-content: center; margin-top: var(--space-6); }

.buruh-pagination ul { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }
.buruh-pagination a, .buruh-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 10px;
	border: 1px solid var(--color-border); border-radius: var(--radius-sm);
	font-size: 14px;
}
.buruh-pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.buruh-pagination a:hover { border-color: var(--color-charcoal); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--color-charcoal); color: #d6d6d6; padding-top: var(--space-7); }
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--space-6);
	padding-bottom: var(--space-7);
}
.footer-logo { font-family: var(--font-heading); font-size: 22px; font-weight: 800; color: #fff; display: inline-block; margin-bottom: var(--space-3); }
.footer-about p { font-size: 14px; line-height: 1.7; color: #b7b7b7; }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-social a { font-size: 13px; font-weight: 700; color: #fff; border: 1px solid #444; padding: 6px 12px; border-radius: var(--radius-sm); }
.footer-social a:hover { background: var(--color-primary); border-color: var(--color-primary); }
.site-footer .widget-title { color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-4); }
.footer-menu { display: flex; flex-direction: column; gap: 10px; }
.footer-menu a { font-size: 14px; color: #b7b7b7; }
.footer-menu a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #333; padding: var(--space-4) 0; }
.footer-bottom p { margin: 0; font-size: 13px; text-align: center; color: #8f8f8f; }

/* ==========================================================================
   SINGLE ARTICLE
   ========================================================================== */
.breadcrumb { padding: var(--space-3) 0; font-size: 13px; color: var(--color-text-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 6px; color: #ccc; }
.breadcrumb a:hover { color: var(--color-primary); }

.single-content-col {
	max-width: 760px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}
.single-header {
	padding: var(--space-3) 0 var(--space-4);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.single-title { font-size: 34px; line-height: 1.25; margin: var(--space-3) 0; max-width: 100%; }
.single-excerpt { font-size: 18px; color: var(--color-text-muted); }
.single-meta {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
	flex-wrap: wrap;
	padding: var(--space-4) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	margin-top: var(--space-3);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.author-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.author-info img { border-radius: 50%; flex-shrink: 0; }
.author-info span { display: block; font-weight: 700; font-size: 14px; }
.author-info time { font-size: 12px; color: var(--color-text-muted); }

/* flex-wrap + min-width:0 mencegah baris tombol share (Bagikan: FB X WA Salin Link)
   meluber melebihi lebar viewport di layar sempit (320–375px) — kalau baris ini
   overflow, seluruh halaman jadi lebih lebar dari layar dan `overflow-x:hidden`
   pada <body> memotong konten lain di bawahnya (termasuk teks .single-body). */
.share-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 8px; min-width: 0; }
.share-label { font-size: 13px; color: var(--color-text-muted); margin-right: 4px; }
.share-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding: 0 10px;
	border: 1px solid var(--color-border); border-radius: var(--radius-sm);
	font-size: 12px; font-weight: 700; background: #fff;
}
.share-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.single-featured-image {
	margin: var(--space-5) 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.single-featured-image img {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	aspect-ratio: 16/9;
	object-fit: cover;
}
.single-featured-image figcaption { font-size: 13px; color: var(--color-text-muted); margin-top: 8px; }

.single-body {
	font-size: 18px;
	line-height: 1.8;
	color: var(--color-text);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.single-body p { margin: 0 0 1.4em; }
.single-body h2 { font-size: 24px; margin: 1.6em 0 0.6em; }
.single-body h3 { font-size: 20px; margin: 1.4em 0 0.6em; }
.single-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 1.4em 0; }

/* ----------------------------------------------------------------------
   Fix: judul & isi berita terpotong / tidak utuh (berlaku di semua layar,
   bukan hanya mobile). Penyebab utamanya dua hal:
   1) elemen flex/grid menahan min-content bawaan sehingga teks meluber
      lalu terpotong oleh `overflow-x:hidden` pada <body>.
   2) elemen lebar-instrinsik seperti <table>, <pre>, <iframe>, blok kode
      dari editor tidak otomatis menyusut mengikuti lebar kolom artikel.
   ---------------------------------------------------------------------- */
.single-content-col,
.page-content-col,
.article-row-body,
.news-card-body,
.news-small-body,
.featured-body,
.special-main,
.special-supporting,
.hero-featured,
.news-card,
.article-row,
#primary,
.site-main { min-width: 0; }

.single-title,
.featured-title,
.news-card-title,
.article-row-body h3,
.section-title h2,
.page-header h1,
.category-header h1 {
	overflow-wrap: break-word;
	word-break: break-word;
}

.single-body,
.page-body {
	overflow-wrap: anywhere;
	word-break: break-word;
}
.single-body table,
.page-body table { display: block; max-width: 100%; overflow-x: auto; }
.single-body pre,
.page-body pre,
.single-body code,
.page-body code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.single-body iframe,
.single-body video,
.single-body embed,
.single-body object,
.page-body iframe,
.page-body video { max-width: 100%; }

.single-body blockquote {
	border-left: 4px solid var(--color-primary);
	margin: 1.6em 0;
	padding: 0.4em 0 0.4em var(--space-5);
	font-style: italic;
	color: var(--color-text-muted);
}
.single-body a { color: var(--color-primary); text-decoration: underline; }
.page-links { margin: var(--space-5) 0; font-size: 14px; }

/* ----------------------------------------------------------------------
   AUDIT FINDING: functions.php mengaktifkan add_theme_support('align-wide'),
   yang membuat editor Gutenberg menampilkan opsi "Wide width" / "Full width"
   untuk blok gambar. TAPI sebelumnya tema ini tidak punya CSS .alignwide /
   .alignfull sama sekali — akibatnya WordPress core memakai CSS bawaannya
   sendiri yang membuat elemen "bleed" memakai `width:100vw` +
   `margin-left:calc(50% - 50vw)`. Teknik 100vw ini adalah penyebab klasik
   horizontal-overflow di WordPress: `100vw` dihitung dari viewport asli
   TERMASUK lebar scrollbar, dan tidak "tahu" bahwa dirinya berada di dalam
   kolom artikel yang sudah sempit (.single-content-col, max-width 760px,
   bersarang di dalam grid dua-kolom + sidebar). Kalau penulis artikel
   memilih "Wide"/"Full width" untuk sebuah gambar, gambar itu akan
   melebihi viewport dan terpotong persis seperti pada laporan bug.

   PERBAIKAN: alih-alih memakai 100vw (yang berisiko), .alignwide dan
   .alignfull di dalam artikel dibatasi mengikuti lebar kolom artikel itu
   sendiri (100% dari .single-content-col) — gambar tetap tampil penuh dan
   rapi, tapi TIDAK PERNAH bisa melebihi viewport di perangkat manapun.
   ---------------------------------------------------------------------- */
.single-body .alignwide,
.single-body .alignfull,
.page-body .alignwide,
.page-body .alignfull {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.single-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-6) 0; }
.tag-chip { font-size: 13px; background: var(--color-bg-alt); padding: 6px 12px; border-radius: 20px; }
.tag-chip:hover { background: var(--color-primary-light); color: var(--color-primary); }

.author-box {
	display: flex; gap: var(--space-4); align-items: flex-start;
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	margin: var(--space-6) 0;
}
.author-box img { border-radius: 50%; flex-shrink: 0; }
.author-box-name { font-weight: 800; display: block; margin-bottom: 4px; }
.author-box-body p { margin: 0; color: var(--color-text-muted); font-size: 14px; }

.related-articles { margin: var(--space-7) 0; }

/* ==========================================================================
   COMMENTS
   ========================================================================== */
.comments-area { margin-top: var(--space-7); }
.comments-title { font-size: 20px; margin-bottom: var(--space-5); }
.comment-list { display: flex; flex-direction: column; gap: var(--space-5); }
.buruh-comment { list-style: none; }
.comment-author { display: flex; gap: 10px; align-items: center; }
.comment-author img { border-radius: 50%; }
.comment-author-name { font-weight: 700; font-size: 14px; display: block; }
.comment-meta time { font-size: 12px; color: var(--color-text-muted); }
.comment-content { margin: 8px 0 0; font-size: 15px; line-height: 1.7; }
.comment-awaiting-moderation { font-style: italic; color: var(--color-text-muted); font-size: 13px; }
.comment-reply-link { font-size: 12px; font-weight: 700; color: var(--color-primary); }
.children { margin-left: var(--space-6); margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }

.comment-respond { margin-top: var(--space-6); }
.comment-reply-title { font-size: 18px; }
.comment-form p { margin-bottom: var(--space-4); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 12px var(--space-4);
	font-size: 14px;
	font-family: inherit;
}
.comment-form textarea { resize: vertical; }

/* ==========================================================================
   ARCHIVE / CATEGORY / SEARCH
   ========================================================================== */
.archive-header, .search-header, .category-header { padding: var(--space-5) 0; }
.archive-header h1, .search-header h1 { font-size: 26px; }
.search-header h1 span { color: var(--color-primary); }
.category-header { background: var(--color-bg-alt); margin-bottom: var(--space-6); }
.category-header h1 { font-size: 30px; margin-top: 8px; }
.category-description { color: var(--color-text-muted); margin-top: 8px; }
.category-featured { margin-bottom: var(--space-7); }

.no-results { text-align: center; padding: var(--space-8) 0; }
.search-form-inline { display: flex; gap: 8px; max-width: 400px; margin: var(--space-5) auto 0; }
.search-form-inline input { flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); height: 44px; }

/* ==========================================================================
   404
   ========================================================================== */
.error-404-content { text-align: center; padding: var(--space-8) 0 var(--space-7); }
.error-code { font-family: var(--font-heading); font-size: 96px; font-weight: 800; color: var(--color-primary); line-height: 1; display: block; }
.error-404-content h1 { font-size: 22px; margin: var(--space-3) 0; }
.error-404-content p { color: var(--color-text-muted); }
.error-404-content .btn { margin: var(--space-4) 0; }

/* ==========================================================================
   PAGE
   ========================================================================== */
.page-content-col { max-width: 760px; }
.page-header h1 { font-size: 30px; margin-bottom: var(--space-4); }
.page-featured-image { margin-bottom: var(--space-5); }
.page-featured-image img { border-radius: var(--radius-md); }
.page-body { font-size: 17px; line-height: 1.8; }

/* ==========================================================================
   WIDGETS
   ========================================================================== */
.widget { margin-bottom: var(--space-6); }
.widget-title { font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: var(--space-3); border-bottom: 2px solid var(--color-charcoal); padding-bottom: 8px; }