/*
Theme Name: Berita News
Theme URI: https://example.com/berita-news
Author: Studio Redaksi
Author URI: https://example.com
Description: Tema WordPress untuk portal berita bergaya profesional (headline besar di atas, sidebar tunggal di kanan) terinspirasi tata letak Al Jazeera / CNBC Indonesia / CNN Indonesia. 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:        #14161a;   /* header/footer dasar nyaris hitam */
	--berita-accent:     #d81f26;   /* merah breaking news */
	--berita-accent-dark:#a4141a;
	--berita-gold:       #c99a3c;   /* label kategori sekunder */
	--berita-bg:         #ffffff;
	--berita-bg-muted:   #f3f4f6;
	--berita-border:     #e5e7eb;
	--berita-text:       #1a1c20;
	--berita-text-soft:  #5b6270;
	--berita-white:      #ffffff;

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

	--container: 1200px;
	--radius: 3px;

	/* Palet & tipografi khusus section OPINI: sengaja berbeda dari
	   area berita (merah/hitam) agar terasa seperti "halaman editorial"
	   yang disisipkan, bukan sekadar grid berita lain */
	--opini-bg:     #f4efe3;   /* krem kertas koran */
	--opini-ink:    #1e3a52;   /* navy tinta, warna aksen & nama kolumnis */
	--opini-ink-soft: #4d6a80;
	--opini-card:   #fffdf8;
	--opini-border: #e2d8c0;
	--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: #0e7c86;
	--spotlight-accent-dark: #095a61;
}

/* =========================================================
   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: 2px;
}

/* =========================================================
   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 — carousel editorial, identitas visual berbeda
   sengaja: krem + navy + serif, agar terasa seperti
   "kolom pendapat" yang disisipkan di tengah portal berita.
   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: 1px solid var(--opini-border);
	border-radius: 10px;
	padding: 26px 26px 22px;
	margin-top: 38px;
}
.opini-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.opini-head-text .opini-eyebrow {
	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 h2 {
	font-family: var(--font-voice);
	font-style: italic;
	font-weight: 700;
	color: var(--opini-ink);
	font-size: 26px;
	margin: 2px 0 0;
}
.opini-more {
	flex-shrink: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .3px;
	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: 16px;
	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: 220px;
	max-width: 260px;
	background: var(--opini-card);
	border: 1px solid var(--opini-border);
	border-radius: 6px;
	padding: 20px 18px 18px;
	position: relative;
	overflow: hidden;
}
.opini-card .quote-mark {
	position: absolute;
	top: -14px; left: 8px;
	font-family: var(--font-voice);
	font-size: 84px;
	color: var(--opini-ink);
	opacity: .07;
	line-height: 1;
	pointer-events: none;
}
.opini-card .opini-topic {
	position: relative;
	display: inline-block;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--opini-ink);
	border-bottom: 2px solid var(--opini-ink);
	padding-bottom: 3px;
	margin-bottom: 12px;
}
.opini-card h3 {
	position: relative;
	font-family: var(--font-voice);
	font-style: italic;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--berita-ink);
	margin: 0 0 12px;
}
.opini-card h3 a:hover { color: var(--opini-ink); }
.opini-card p.opini-excerpt {
	position: relative;
	font-size: 13.5px;
	color: var(--berita-text-soft);
	margin: 0 0 16px;
}
.opini-byline {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	border-top: 1px solid var(--opini-border);
	padding-top: 12px;
}
.opini-avatar {
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--opini-ink);
	color: var(--opini-card);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	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: 14px; }
.opini-arrow {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid var(--opini-ink);
	background: transparent;
	color: var(--opini-ink);
	font-size: 15px;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s ease, color .2s ease;
}
.opini-arrow:hover { background: var(--opini-ink); color: var(--opini-card); }

@media (max-width: 900px) {
	.opini-card { min-width: 200px; }
}
@media (max-width: 640px) {
	.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: 6px;
	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: 2px;
	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-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; }
	.menu-toggle { display: inline-flex; align-items: center; gap: 8px; }
	.main-navigation { display: none; width: 100%; order: 3; }
	.main-navigation.is-open { display: block; }
	.header-inner { flex-wrap: wrap; }
	.nav-menu { flex-direction: column; width: 100%; }
	.nav-menu li a { border-bottom: 1px solid #262a31; }
}