/*
Theme Name: PatriotPost
Theme URI: http://localhost:8090
Author: Redaksi PatriotPost
Description: Tema portal berita modern PatriotPost — editorial, cepat dibaca, aksen hangat, sans untuk UI dan serif untuk badan artikel.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: patriotpost
*/

/* ============ Token desain ============ */
:root {
	--brand: #fe8e00;
	--brand-dark: #d97800;
	--brand-ink: #3a2400;
	--brand-tint: #fff3e3;
	/* Oranye khusus TEKS di atas latar terang. --brand-dark (#d97800) hanya 3,16:1
	   di atas putih — cukup untuk bidang/garis, tidak untuk teks kecil. Ini 5,4:1. */
	--brand-text: #a75a00;
	--brand-ghost: #ffd9a6;
	--text: #0d0d0d;
	--text-2: #606060;
	--text-3: #909090;
	--line: #eeeeee;
	--bg: #ffffff;
	--bg-soft: #f4f6f6;
	/* Seluruh sudut membulat situs memakai satu nilai kecil. Untuk mengembalikan
	   tampilan lama, cukup setel --radius: 8px dan --radius-lg: 12px di sini. */
	--radius-xs: 4px;
	--radius: var(--radius-xs);
	--radius-lg: var(--radius-xs);
	/* Footer terang. Sebelumnya memakai --brand-ink (cokelat keruh) lalu nyaris-hitam;
	   keduanya membuat blok gelap besar di ujung halaman yang isinya cuma tautan.
	   Latar terang menyambung dari pita newsletter di atasnya, dan teks gelap di atas
	   terang lebih mudah dibaca daripada putih tipis di atas hitam. */
	--footer-bg: #faf8f5;
	--footer-fg: #6b6459;
	--footer-strong: #221d18;
	--footer-line: rgba(34, 29, 24, 0.12);
	--font-ui: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
	--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--container: 1120px;
	--narrow: 820px;
	--shadow-soft: 0 10px 30px -18px rgba(80, 45, 15, 0.22);
	--header-bg: rgba(255, 255, 255, 0.94);
}

/* ============ Mode gelap ============ */
html.theme-dark {
	/* Di latar gelap oranye terang justru yang kontras — kebalikan dari mode terang. */
	--brand-text: #ffab4d;
	/* Footer wajib punya versi gelapnya sendiri. Tanpa ini token --footer-* di :root
	   bertahan terang sementara halaman menggelap, sehingga footer jadi blok krem
	   menyala di ujung halaman gelap. */
	--footer-bg: #0f0d09;
	--footer-fg: #a9a29a;
	--footer-strong: #f1ece5;
	--footer-line: rgba(255, 255, 255, 0.1);
	--brand-ink: #0b0906;
	--brand-tint: #402b0a;
	--brand-ghost: #6b4610;
	--text: #f1ece5;
	--text-2: #aea79d;
	--text-3: #857d72;
	--line: #2d2721;
	--bg: #15120d;
	--bg-soft: #211c15;
	--header-bg: rgba(19, 16, 11, 0.9);
	--shadow-soft: 0 10px 30px -18px rgba(0, 0, 0, 0.55);
}

html.theme-dark .chip,
html.theme-dark .byline-avatar {
	color: #ffab4d;
}

html.theme-dark .article-content a {
	color: #ffab4d;
}

html.theme-dark .thumb-fallback {
	background: linear-gradient(135deg, var(--brand) 0%, #1a1208 100%);
}

/* ============ Reset & dasar ============ */
*,
*::before,
*::after {
	box-sizing: border-box;
}


body {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.55;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure {
	margin: 0;
}

ul, ol {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

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

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 24px;
}

.container-narrow {
	max-width: var(--narrow);
	margin-inline: auto;
	padding-inline: 24px;
}

.composer-container {
	max-width: 1120px;
	padding-block: 28px 72px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--brand-dark);
	color: #fff;
	padding: 10px 16px;
	z-index: 2000;
}

.skip-link:focus {
	left: 12px;
	top: 12px;
}

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection {
	background: var(--brand-tint);
	color: var(--brand-ink);
}

/* ============ Header ============ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 3000;
	background: var(--header-bg);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow 0.25s ease;
	overflow: visible;
}

.site-header.is-scrolled {
	box-shadow: 0 6px 24px -16px rgba(80, 45, 15, 0.3);
}

.admin-bar .site-header {
	top: 32px;
}

/*
 * Logo menempati kolom kiri setinggi dua baris; kolom kanan berisi baris utilitas
 * di atas dan navigasi kanal di bawah. Kolom logo memakai lebar konten (auto) dan
 * kolom kanan mengambil sisa (1fr), sehingga proporsinya bertahan di lebar berapa
 * pun tanpa nilai piksel yang dipatok.
 */
/*
 * Susunan dibalik dari pola umum portal berita.
 *
 * Umumnya: baris 1 = logo + pencarian + ikon, baris 2 = navigasi kanal.
 * Di sini : baris 1 = strip utilitas (pencarian lebar + aksi), baris 2 = LOGO
 *           bersebelahan dengan navigasi kanal.
 *
 * Logo duduk sebaris dengan kanal supaya merek dan isi terbaca sebagai satu
 * kesatuan, dan pencarian dinaikkan karena portal berita dicari, bukan ditelusuri
 * dari atas ke bawah. Hasilnya siluet header berbeda tanpa menambah tinggi.
 */
.header-grid {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"utility utility"
		"brand   nav";
	column-gap: 32px;
	position: relative;
	z-index: 3010;
}

.header-grid > .brand {
	grid-area: brand;
	align-self: center;
	/* Pemisah vertikal memisahkan merek dari deretan kanal di sebelahnya. */
	padding-right: 28px;
	border-right: 1px solid var(--line);
	align-items: center;
}

.header-utility {
	grid-area: utility;
	display: flex;
	align-items: center;
	gap: 18px;
	height: 52px;
	border-bottom: 1px solid var(--line);
}

/* Pencarian mengisi sisa ruang: inilah yang membuat baris atas terbaca sebagai
   "portal yang dicari", bukan deretan ikon. */
.header-utility .header-search {
	flex: 1;
	min-width: 0;
}

/*
 * Di bawah 1080px logo kembali ke atas dan nav memakai lebar penuh.
 * Alasannya terukur: dengan logo di samping, kolom nav hanya kebagian 682px di
 * viewport 1000px sedangkan 9 item kanal butuh ~800px — dua item terakhir meluber
 * keluar layar. Susunan logo-samping memang menuntut lebar, jadi dipakai hanya
 * saat lebarnya tersedia.
 */
/*
 * Di bawah 1080px logo dan navigasi tidak muat dalam satu baris (9 kanal butuh
 * ~800px, logo ~233px, sisa ruang tak cukup), jadi susunannya kembali bertingkat:
 * logo + utilitas di atas, navigasi selebar penuh di bawah.
 */
@media (max-width: 1080px) {
	.header-grid {
		grid-template-areas:
			"brand utility"
			"nav nav";
		column-gap: 20px;
	}

	.header-grid > .brand {
		padding-right: 0;
		border-right: 0;
	}

	.header-utility {
		height: 66px;
		border-bottom: 0;
	}

	/* Susunan bertingkat kembali butuh garis pemisah di atas navigasi. */
	.site-nav {
		border-top: 1px solid var(--line);
	}

	.site-nav .nav-inner {
		min-height: 46px;
	}
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
}

.brand-mark {
	color: var(--brand);
	display: inline-flex;
}

.brand-name {
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--text);
}

.brand-name em {
	font-style: normal;
	color: var(--brand);
}

.brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.brand-tagline {
	margin-top: 3px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--text-3);
	white-space: nowrap;
}

/* Logo gambar di header */
.brand-logo {
	display: block;
	height: 35px;
	width: auto;
}

.header-search {
	flex: 1;
	min-width: 0; /* biar search bisa menyusut di layar sempit; cegah tombol akun terdorong keluar */
	max-width: 430px;
}

.search-mobile-toggle {
	display: none;
}

.search-form {
	display: flex;
	align-items: center;
	gap: 9px;
	background: var(--bg-soft);
	border: 1px solid transparent;
	border-radius: 999px;
	height: 40px;
	padding-inline: 15px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.search-form:focus-within {
	background: var(--bg);
	border-color: var(--brand);
}

.search-icon {
	color: var(--text-3);
	flex-shrink: 0;
}

.search-field {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	color: var(--text);
}

.search-field:focus {
	outline: none;
}

.search-field::placeholder {
	color: var(--text-3);
}

.search-close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--text-2);
	cursor: pointer;
	flex-shrink: 0;
}

.header-date {
	margin-left: auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-2);
	white-space: nowrap;
}

/* Navigasi kategori */
.site-nav {
	grid-area: nav;
	/* Tanpa border-top di layar lebar: strip utilitas di atasnya sudah punya
	   border-bottom, dua garis bersebelahan akan terbaca sebagai garis ganda. */
	border-top: 0;
	position: relative;
	z-index: 3001;
	overflow: visible;
}

/* Dulu <div class="container"> — diganti .nav-inner karena nav kini berada DI DALAM
   .header-grid yang sudah ber-class .container; container bersarang akan menggandakan
   padding dan max-width. */
.site-nav .nav-inner {
	display: flex;
	align-items: center;
	min-height: 62px;
	overflow: visible;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
	overflow-x: visible;
	scrollbar-width: none;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.nav-list::-webkit-scrollbar {
	display: none;
}

.nav-list li {
	position: relative;
	overflow: visible;
}

.nav-list > .menu-item-more {
	margin-left: auto;
	order: 100;
}

.nav-list a {
	display: block;
	position: relative;
	padding: 12px 14px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	transition: color 0.18s ease;
}

/* Latar pil yang memudar masuk di belakang teks — memberi bidang sentuh yang terasa,
   bukan sekadar teks berubah warna. Dipakai ::before agar tidak bentrok dengan
   garis bawah di ::after. */
.nav-list a::before {
	content: "";
	position: absolute;
	inset: 4px 6px;
	border-radius: 999px;
	background: var(--brand-tint);
	opacity: 0;
	transform: scale(0.92);
	transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	/* z-index negatif, bukan menaikkan isi tautan: teks menu berupa teks polos
	   tanpa elemen pembungkus, jadi tak ada yang bisa dinaikkan di atas pil. */
	z-index: -1;
}

.nav-list a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--brand);
	transform: scaleX(0);
	/* Tumbuh dari tengah, bukan dari kiri — arahnya simetris dan terbaca lebih
	   sengaja daripada garis yang menyapu satu arah. */
	transform-origin: center;
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-list a:hover {
	color: var(--brand-dark);
}

.nav-list a:hover::before,
.nav-list a:focus-visible::before {
	opacity: 1;
	transform: scale(1);
}

.nav-list a:hover::after,
.nav-list .current-menu-item a::after,
.nav-list .current_page_item a::after {
	transform: scaleX(1);
}

.nav-list .current-menu-item a {
	color: var(--brand-dark);
}

.nav-list > .menu-item > .sub-menu {
	display: none;
	position: absolute;
	z-index: 90;
	top: 100%;
	left: 0;
	min-width: 190px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.nav-list > .menu-item-more > .sub-menu {
	left: auto;
	right: 0;
}

.nav-list > .menu-item:hover > .sub-menu,
.nav-list > .menu-item:focus-within > .sub-menu,
.nav-list > .menu-item > a:hover + .sub-menu,
.nav-list > .menu-item-has-children:hover > .sub-menu {
	display: block;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.nav-list > .menu-item > .sub-menu a {
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
}

.nav-list > .menu-item > .sub-menu a::after {
	display: none;
}

.nav-list > .menu-item > .sub-menu a:hover {
	background: var(--surface);
}

.nav-toggle {
	display: none;
}

.submenu-toggle {
	display: none;
}

/* ============ Utilitas kartu ============ */
.chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--brand-tint);
	color: var(--brand-dark);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: background 0.18s ease, color 0.18s ease;
}

.chip:hover {
	background: var(--brand-ghost);
}

.chip--solid {
	background: var(--brand);
	color: #fff;
}

.chip--solid:hover {
	background: var(--brand-dark);
	color: #fff;
}

.chip--outline {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--text-2);
	font-weight: 600;
	padding: 6px 14px;
	font-size: 13px;
}

.chip--outline:hover {
	border-color: var(--brand);
	color: var(--brand-dark);
	background: transparent;
}

.card-meta {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--text-3);
}

.meta-source {
	color: var(--brand-dark);
	font-weight: 700;
}

.meta-views {
	color: var(--brand-dark);
	font-weight: 700;
}

.meta-dot {
	color: var(--text-3);
}

.thumb-fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-ink) 100%);
	color: rgba(255, 255, 255, 0.9);
	font-size: 30px;
	font-weight: 800;
}

.section-title {
	display: flex;
	align-items: center;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.section-title .tick {
	width: 5px;
	height: 20px;
	border-radius: 3px;
	background: var(--brand);
	margin-right: 11px;
	flex-shrink: 0;
}

.section-title--sm {
	font-size: 16px;
}

.section-title--sm .tick {
	height: 15px;
	width: 4px;
	margin-right: 9px;
}

.see-all {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--brand-dark);
	white-space: nowrap;
}

.see-all:hover {
	text-decoration: underline;
}

/* ============ Hero ============ */
/*
 * Hero editorial: judul TIDAK lagi ditumpuk di atas foto.
 *
 * Susunan lama menaruh teks putih di atas gambar dengan gradien gelap — pola banner
 * yang dipakai hampir semua portal berita, dan keterbacaannya bergantung pada
 * seberapa ramai fotonya. Di sini gambar dan teks dipisah: foto di atas, judul serta
 * ringkasan di panel bawah dengan warna teks normal. Kontrol carousel ikut turun ke
 * baris teks, bukan melayang menutupi foto.
 */
/*
 * Hero mosaik. Kerangkanya bukan lagi "kolom besar + rel vertikal" melainkan dua
 * pita bertumpuk: mosaik berita utama di atas, "Terkini" mendatar di bawah.
 */
.hero {
	display: block;
	margin-top: 32px;
}

/* Berita utama menempati kolom 1 setinggi dua baris; empat ubin mengisi kolom 2-3
   lewat auto-placement (baris 1: ubin 1-2, baris 2: ubin 3-4). */
.hero-mosaic {
	display: grid;
	grid-template-columns: 1.55fr 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 24px;
}

.hero-mosaic > .hero-lead {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
}

/* Gambar utama MENGISI sisa tinggi kolom, bukan dipatok rasio. Alasannya: kolom ini
   membentang dua baris sementara teksnya lebih pendek — dengan rasio tetap, sisa
   ruangnya menganga kosong di bawah. Dengan flex:1 gambar tumbuh menutup selisih,
   sekaligus membuat berita utama benar-benar terbaca dominan. */
.hero-mosaic > .hero-lead .hero-lead-thumb {
	aspect-ratio: auto;
	flex: 1;
	min-height: 300px;
}

.hero-tile {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.hero-tile-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius);
	overflow: hidden;
}

.hero-tile-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
}

.hero-tile-title {
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.38;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Pita "Terkini": mendatar tiga kolom, bukan daftar vertikal di samping. */
.hero-latest {
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.hero-latest-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px 32px;
	margin-top: 14px;
	counter-reset: hero-terkini;
}

.hero-latest-list .card-mini {
	position: relative;
	counter-increment: hero-terkini;
	grid-template-columns: 24px 1fr 76px;
	gap: 12px;
	align-items: start;
}

.hero-latest-list .card-mini::before {
	content: counter(hero-terkini, decimal-leading-zero);
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.5;
	color: var(--brand);
	font-variant-numeric: tabular-nums;
}

.hero-latest-list .card-mini-thumb {
	order: 3;
}

@media (max-width: 1080px) {
	.hero-mosaic {
		grid-template-columns: 1fr 1fr;
	}

	.hero-mosaic > .hero-lead {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.hero-latest-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.hero-mosaic {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.hero-latest-list {
		grid-template-columns: 1fr;
		gap: 0 24px;
	}
}

/* Catatan: dulu ada aturan `.hero > .hero-lead { display: none }` untuk menyembunyikan
   blok lead statis sisa desain sebelum carousel. Blok PHP-nya sudah dihapus dari
   home.php, jadi aturan ini ikut dihapus — artikel teratas kini hanya dirender sekali,
   yaitu sebagai slide pertama carousel. */

.hero-carousel {
	min-width: 0;
	position: relative;
}

.hero-carousel-track {
	position: relative;
	display: grid;
}

.hero-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: scale(1.025);
	pointer-events: none;
	z-index: 0;
	will-change: opacity, transform;
	/* Slide KELUAR. Pudarnya sengaja ditunda 0.14s supaya bertumpang tindih dengan
	   slide masuk — tanpa jeda ini keduanya semi-transparan bersamaan dan muncul
	   kedip gelap di tengah transisi. visibility TIDAK ikut ditransisi karena
	   properti diskret (nilainya melompat, bukan berangsur) — cukup ditunda
	   sampai fade benar-benar selesai agar slide lama tak menghilang mendadak. */
	transition:
		opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.14s,
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0.64s;
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	pointer-events: auto;
	z-index: 1;
	/* Slide MASUK ditaruh di atas (z-index) dan memakai easeOutQuint: cepat di awal,
	   melambat panjang di akhir sehingga berhenti tanpa terasa direm. Skala 1.025 -> 1
	   memberi kesan maju perlahan, lebih halus daripada geser mendatar yang berhenti
	   mendadak seperti sebelumnya. */
	transition:
		opacity 0.64s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
	.hero-slide,
	.hero-slide.is-active {
		transform: none;
		transition: opacity 0.01s linear, visibility 0s linear;
	}
}

.hero-carousel .hero-lead {
	position: relative;
	/* Tanpa overflow:hidden dan latar gelap: kini kontainer ini memuat foto DAN
	   panel teks di bawahnya, bukan foto yang ditimpa teks. */
	background: transparent;
}

/* Gradien gelap tidak diperlukan lagi karena tak ada teks di atas foto. */

.hero-carousel .hero-lead-thumb {
	/* 3:2 — lebih tinggi dari 16:9, memberi foto bobot editorial tanpa berubah
	   jadi potret. */
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}

.hero-carousel .hero-lead-body {
	padding-top: 18px;
}

.hero-carousel .hero-lead-title {
	max-width: 680px;
	font-size: 30px;
	line-height: 1.22;
}

.hero-carousel .hero-lead-title a:hover {
	color: var(--brand-dark);
}

.hero-carousel .hero-lead-excerpt {
	max-width: 620px;
	color: var(--text-2);
}

.hero-carousel .card-meta,
.hero-carousel .card-meta a {
	color: var(--text-2);
}

.hero-carousel .meta-dot {
	display: none;
}

.hero-carousel .card-meta time {
	margin-left: 10px;
}

/* Kontrol jadi baris statis di bawah teks: titik indikator di kiri, panah di kanan.
   Tidak ada lagi tombol melayang yang menutupi wajah/objek di foto. */
.hero-carousel-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.hero-carousel-btn {
	position: static;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--bg);
	color: var(--text);
	cursor: pointer;
	transform: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-carousel-btn:hover {
	background: var(--brand-tint);
	border-color: var(--brand);
	color: var(--brand-dark);
	transform: translateY(-2px);
}

/* Panah dikelompokkan di kanan. */
.hero-carousel-controls .hero-carousel-btn:first-of-type {
	order: 2;
}

.hero-carousel-controls .hero-carousel-btn:last-of-type {
	order: 3;
}

.hero-carousel-controls .hero-carousel-dots {
	order: 1;
	margin-right: auto;
}

/* Aturan posisi absolut panah (left/right) dan hover translateY(-50%) dihapus:
   kontrol sekarang baris statis, dan aturan lama itu berada setelah aturan baru
   sehingga akan menang dan membuat panah melompat saat hover. */

.hero-carousel-dots {
	position: static;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border-radius: 0;
	background: none;
	backdrop-filter: none;
	transform: none;
}

.hero-carousel-dot {
	width: 8px;
	height: 8px;
	border: 0;
	border-radius: 999px;
	background: var(--brand-ghost);
	cursor: pointer;
	transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}

.hero-carousel-dot:hover {
	background: var(--brand);
}

.hero-carousel-dot.is-active {
	width: 26px;
	background: var(--brand);
}

.hero-lead-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

.hero-lead-thumb img,
.card-feed-thumb img,
.card-block-thumb img,
.card-mini-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-lead:hover .hero-lead-thumb img,
.card-feed:hover .card-feed-thumb img,
.card-block:hover .card-block-thumb img,
.card-mini:hover .card-mini-thumb img {
	transform: scale(1.035);
}

.hero-lead-body {
	padding-top: 18px;
}

.hero-lead-title {
	font-size: 29px;
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -0.02em;
	margin-top: 12px;
}

.hero-lead-title a:hover,
.card-feed-title a:hover,
.card-block-title a:hover,
.card-mini-title a:hover,
.popular-title a:hover {
	color: var(--brand-dark);
}

.hero-lead-excerpt {
	margin-top: 10px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--text-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hero-lead-body .card-meta {
	margin-top: 12px;
}

/* Nomor urut dibuat lewat CSS counter, bukan ditambahkan ke markup — daftar ini
   dirender oleh loop di home.php dan tidak perlu tahu urutannya. */
.hero-side-list {
	margin-top: 18px;
	counter-reset: hero-terkini;
}

.hero-side-list .card-mini {
	position: relative;
	counter-increment: hero-terkini;
	grid-template-columns: 26px 1fr 76px;
	gap: 12px;
	align-items: start;
}

.hero-side-list .card-mini::before {
	content: counter(hero-terkini, decimal-leading-zero);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.5;
	color: var(--brand);
	font-variant-numeric: tabular-nums;
}

.hero-side-list .card-mini-thumb {
	order: 3;
}

.card-mini {
	display: grid;
	grid-template-columns: 1fr 96px;
	gap: 14px;
	padding-block: 15px;
	border-bottom: 1px solid var(--line);
}

.hero-side-list .card-mini:first-child {
	padding-top: 4px;
}

.card-mini:last-child {
	border-bottom: 0;
}

.card-mini-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
	order: 2;
}

.card-mini-title {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-mini .card-meta {
	margin-top: 7px;
}

/* ============ Video Story (reel) ============ */
.reel {
	margin-top: 56px;
}

.reel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.reel-hint {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-3);
	white-space: nowrap;
}

.social-strip {
	margin: -2px 0 18px;
}

.social-strip-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.social-strip-title {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
}

.social-strip-sub {
	max-width: 520px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-3);
	text-align: right;
}

.social-card-row {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 8px;
	/* proximity, bukan mandatory: mandatory memaksa setiap lepas-jari mendarat tepat
	   di kartu, sehingga geseran cepat terasa direbut dan menyentak. proximity hanya
	   membantu saat berhenti dekat kartu, momentum pengguna tetap dihormati. */
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(254, 142, 0, 0.45) transparent;
}

.social-card-row::-webkit-scrollbar {
	height: 6px;
}

.social-card-row::-webkit-scrollbar-thumb {
	background: rgba(254, 142, 0, 0.45);
	border-radius: 999px;
}

.social-card {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 10px;
	flex: 0 0 230px;
	min-height: 126px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	box-shadow: var(--shadow-soft);
	transition: transform 0.18s ease, border-color 0.18s ease;
	scroll-snap-align: start;
}

.social-card:hover {
	transform: translateY(-2px);
	border-color: rgba(254, 142, 0, 0.46);
}

.social-card-mark {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--brand-ink);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}

.social-card-mark svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
	color: currentColor;
}

.social-card--youtube .social-card-mark {
	background: #ff0033;
}

.social-card--youtube .social-card-mark svg {
	width: 24px;
}

.social-card--instagram .social-card-mark {
	background: #d62976;
}

.social-card--facebook .social-card-mark {
	background: #1877f2;
}

.social-card--facebook .social-card-mark svg {
	width: 25px;
	height: 25px;
}

.social-card--tiktok .social-card-mark {
	background: #111;
}

.social-card--x .social-card-mark {
	background: #000;
}

.social-card--threads .social-card-mark {
	background: #101010;
}

.social-card--threads .social-card-mark svg {
	width: 24px;
	height: 24px;
}

.social-card-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.social-card-name {
	font-size: 14px;
	font-weight: 800;
	color: var(--text);
}

.social-card-handle {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--brand-dark);
}

.social-card-text {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--text-2);
}

.reel-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	padding-block: 4px 20px;
	/* Deretan kartu ditahan di dalam .container: margin kiri & kanan sama seperti bagian lain */
	scrollbar-width: none;
}

.reel-track::-webkit-scrollbar {
	display: none;
}

.reel-card {
	flex: 0 0 auto;
	width: 190px;
	scroll-snap-align: start;
}

.reel-thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--brand-ink);
	box-shadow: var(--shadow-soft);
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.reel-thumb img,
.reel-thumb .thumb-fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.reel-card:hover .reel-thumb img {
	transform: scale(1.06);
}

.reel-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 52, 56, 0.35) 0%, rgba(15, 52, 56, 0) 32%, rgba(15, 52, 56, 0.05) 55%, rgba(15, 52, 56, 0.85) 100%);
}

.reel-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(3px);
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	color: #fff;
	padding-left: 3px;
	transition: transform 0.25s ease, background 0.25s ease;
}

.reel-card:hover .reel-play {
	background: var(--brand);
	border-color: var(--brand);
	transform: translate(-50%, -50%) scale(1.08);
}

.reel-duration {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 3px 8px;
	border-radius: 6px;
	background: rgba(13, 13, 13, 0.7);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

.reel-info {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.reel-cat {
	align-self: flex-start;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.reel-title {
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.35;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 720px) {
	.reel {
		margin-top: 36px;
	}

	.reel-hint {
		display: none;
	}

	.social-strip-head {
		display: block;
	}

	.social-strip-sub {
		margin-top: 5px;
		text-align: left;
	}

	.social-card-row {
		gap: 10px;
		padding-bottom: 6px;
		scrollbar-width: none;
	}

	.social-card-row::-webkit-scrollbar {
		display: none;
	}

	.social-card {
		flex: 0 0 224px;
		min-height: 118px;
	}

	.reel-track {
		gap: 12px;
	}

	.reel-card {
		width: 152px;
	}
}

/* ============ Pemutar Video Story (lightbox) ============ */
.reel-player {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 24px;
	background: rgba(24, 14, 6, 0.94);
	backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease, visibility 0.28s ease;
}

.reel-player.is-open {
	opacity: 1;
	visibility: visible;
}

body.reel-lock {
	overflow: hidden;
}

.reel-stage {
	position: relative;
	height: min(88vh, 800px);
	aspect-ratio: 9 / 16;
	max-width: calc(100vw - 150px);
	border-radius: 18px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
	transform: translateY(14px);
	transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.reel-player.is-open .reel-stage {
	transform: translateY(0);
}

.reel-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #000;
}

.reel-tap {
	position: absolute;
	inset: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.reel-tap-icon {
	width: 76px;
	height: 76px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.42);
	color: #fff;
	padding-left: 5px;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.reel-stage.is-paused .reel-tap-icon {
	opacity: 1;
	transform: scale(1);
}

.reel-player-info {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 60px;
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
	pointer-events: none;
}

.reel-player-title {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.reel-player-link {
	pointer-events: auto;
	align-self: flex-start;
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.reel-player-link:hover {
	color: var(--brand-tint);
}

.reel-mute {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	z-index: 2;
}

.reel-mute .ico-unmuted {
	display: none;
}

.reel-mute.is-unmuted .ico-muted {
	display: none;
}

.reel-mute.is-unmuted .ico-unmuted {
	display: block;
}

.reel-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: rgba(255, 255, 255, 0.25);
}

.reel-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--brand);
	transition: width 0.1s linear;
}

.reel-player-close {
	position: absolute;
	top: 22px;
	right: 26px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	z-index: 4;
}

.reel-player-close:hover {
	background: rgba(255, 255, 255, 0.26);
}

.reel-nav {
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	transition: background 0.18s ease;
}

.reel-nav:hover {
	background: rgba(255, 255, 255, 0.26);
}

.reel-nav:disabled {
	opacity: 0.3;
	cursor: default;
}

@media (max-width: 720px) {
	.reel-player {
		padding: 0;
		gap: 0;
	}

	.reel-stage {
		height: 100vh;
		height: 100dvh;
		width: 100vw;
		max-width: 100vw;
		border-radius: 0;
		aspect-ratio: auto;
	}

	/* Di mobile: ganti panah dengan geser (swipe) atas/bawah, ala reel sungguhan */
	.reel-nav {
		display: none;
	}

	.reel-player-info {
		bottom: 30px;
		left: 18px;
		right: 18px;
	}

	.reel-player-close {
		top: 16px;
		right: 16px;
	}
}

/* Avatar kustom di tombol akun header */
.account-avatar.has-img {
	padding: 0;
	overflow: hidden;
}

.account-avatar.has-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 999px;
}

/* Bell mengambang Perfecty Push disembunyikan — opt-in lewat tombol footer "Aktifkan notifikasi" */
.perfecty-push-settings-container {
	display: none !important;
}

/* ============ Modal detail Video Story (video + komentar PatriotPost) ============ */
.story-modal {
	position: fixed;
	inset: 0;
	z-index: 3200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
	background: rgba(18, 11, 5, 0.82);
	backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.26s ease, visibility 0.26s ease;
}

.story-modal.open {
	opacity: 1;
	visibility: visible;
}

.story-close {
	position: fixed;
	/* DI LUAR card, di pojok kiri-atas (area gelap), sejajar tepi atas modal */
	top: max(16px, calc(50% - min(43vh, 360px)));
	left: max(14px, calc(50% - 470px - 58px));
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(30, 22, 14, 0.6);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	z-index: 3300;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	transition: background 0.18s ease, transform 0.18s ease;
}

.story-close:hover {
	background: rgba(20, 14, 8, 0.88);
	transform: scale(1.06);
}

/* Tombol next / prev antar-story: oranye, kiri & kanan */
.story-nav {
	position: fixed;
	top: calc(50% - 25px);
	width: 50px;
	height: 50px;
	border: 0;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	z-index: 3300;
	box-shadow: 0 8px 22px rgba(217, 120, 0, 0.5);
	transition: background 0.18s ease, opacity 0.2s ease, transform 0.18s ease;
}

.story-nav:hover {
	background: var(--brand-dark);
	transform: scale(1.08);
}

.story-prev {
	left: max(14px, calc(50% - 470px - 62px));
}

.story-next {
	right: max(14px, calc(50% - 470px - 62px));
}

.story-nav:disabled {
	opacity: 0;
	pointer-events: none;
}

/* Sembunyikan panah saat konten digulir melewati video (mobile) */
.story-modal.story-scrolled .story-nav {
	opacity: 0;
	pointer-events: none;
}

.story-box {
	display: flex;
	width: min(940px, 100%);
	height: min(86vh, 720px);
	background: var(--bg);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 90px -24px rgba(0, 0, 0, 0.7);
	transform: translateY(14px) scale(0.99);
	transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-modal.open .story-box {
	transform: translateY(0) scale(1);
}

/* ---- Panel video (kiri) ---- */
.story-video-pane {
	position: relative;
	flex: 0 0 auto;
	height: 100%;
	min-height: 0;
	aspect-ratio: 9 / 16;
	background: #000;
	overflow: hidden;
}

.story-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #000;
}

.story-tap {
	position: absolute;
	inset: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.story-tap-icon {
	width: 72px;
	height: 72px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.42);
	color: #fff;
	padding-left: 4px;
	opacity: 0;
	transform: scale(0.82);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.story-tap-icon .ico-pause {
	display: none;
}

.story-modal.is-paused .story-tap-icon {
	opacity: 1;
	transform: scale(1);
}

/* ---- Panel detail (kanan) ---- */
.story-detail-pane {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--bg);
}

.story-detail-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 22px 22px 8px;
}

.story-head {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 15px;
}

.story-avatar {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--brand-tint);
	color: var(--brand-dark);
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 16px;
}

.story-head-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.story-author {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--text);
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.2;
}

.story-author:hover .story-author-name {
	color: var(--brand-dark);
}

.story-verified {
	display: inline-flex;
	align-items: center;
}

.story-date {
	color: var(--text-3);
	font-size: 12.5px;
}

.story-title {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: -0.01em;
	margin-bottom: 10px;
}

.story-desc {
	color: var(--text-2);
	font-size: 14.5px;
	line-height: 1.62;
	white-space: pre-line;
}

.story-desc.clamped {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.story-more {
	margin-top: 4px;
	border: 0;
	background: transparent;
	color: var(--brand-dark);
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	padding: 0;
}

.story-more:hover {
	text-decoration: underline;
}

.story-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 0;
	margin-top: 4px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.story-act {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--text-2);
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.story-act:hover {
	border-color: var(--brand-ghost);
	color: var(--brand-dark);
}

.story-like.is-liked {
	background: var(--brand-tint);
	border-color: var(--brand-ghost);
	color: var(--brand-dark);
}

.story-like.is-liked svg {
	fill: var(--brand);
	stroke: var(--brand);
}

.story-share {
	margin-left: auto;
}

.story-share.copied {
	color: var(--brand-dark);
	border-color: var(--brand-ghost);
}

.story-comments-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 18px 0 12px;
}

.story-comments-head .tick {
	width: 3px;
	height: 15px;
	border-radius: 2px;
	background: var(--brand);
}

.story-comments-title {
	font-weight: 800;
	font-size: 14.5px;
}

.story-comments {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.story-comment {
	display: flex;
	gap: 10px;
}

.story-c-avatar {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--bg-soft);
	color: var(--text-2);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 13px;
}

.story-c-body {
	min-width: 0;
}

.story-c-name {
	font-weight: 700;
	font-size: 13.5px;
	color: var(--text);
}

.story-c-text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
	margin: 2px 0 3px;
	word-wrap: break-word;
}

.story-c-meta {
	font-size: 12px;
	color: var(--text-3);
}

.story-comments-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	color: var(--text-3);
	font-size: 14px;
	line-height: 1.5;
	padding: 26px 0 12px;
}

.story-comments-empty[hidden] {
	display: none;
}

.story-empty-ill {
	width: 88px;
	height: 88px;
	opacity: 0.92;
}

/* ---- Form komentar (menempel di bawah) ---- */
.story-comment-form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--line);
	background: var(--bg);
}

.story-comment-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--line);
	background: var(--bg-soft);
	border-radius: 999px;
	padding: 10px 16px;
	font: inherit;
	font-size: 14px;
	color: var(--text);
}

.story-comment-input:focus {
	outline: none;
	border-color: var(--brand);
	background: var(--bg);
}

.story-comment-send {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.16s ease;
}

.story-comment-send:hover {
	background: var(--brand-dark);
}

.story-comment-send:disabled {
	opacity: 0.5;
	cursor: default;
}

.story-login-prompt {
	display: block;
	padding: 15px 16px;
	border-top: 1px solid var(--line);
	text-align: center;
	color: var(--brand-dark);
	font-weight: 700;
	font-size: 14px;
	background: var(--bg);
}

/* Atribut hidden harus menang atas display di atas */
.story-comment-form[hidden],
.story-login-prompt[hidden] {
	display: none;
}

@media (max-width: 760px) {
	.story-modal {
		padding: 0;
	}

	/* Mobile: SATU kolom scroll natural — video imersif di atas,
	   detail & komentar mengalir di bawah, kotak komentar menempel di bawah layar. */
	.story-box {
		display: block;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		border-radius: 0;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.story-video-pane {
		width: 100%;
		height: 62vh;
		aspect-ratio: auto;
	}

	.story-detail-pane {
		display: block;
	}

	.story-detail-scroll {
		overflow: visible;
		padding: 18px 18px 10px;
	}

	.story-comment-form,
	.story-login-prompt {
		position: sticky;
		bottom: 0;
	}

	.story-close {
		top: 12px;
		left: 12px;
		width: 40px;
		height: 40px;
	}

	.story-nav {
		width: 42px;
		height: 42px;
		top: calc(31vh - 21px);
	}

	.story-prev {
		left: 12px;
	}

	.story-next {
		right: 12px;
	}
}

/* ============ Layout 2 kolom & feed ============ */
.layout-2col {
	display: grid;
	grid-template-columns: 1fr 344px;
	gap: 48px;
	margin-top: 52px;
	align-items: start;
}

.feed > .section-title {
	padding-bottom: 6px;
	border-bottom: 1px solid var(--line);
}

.card-feed {
	display: grid;
	grid-template-columns: 1fr 180px;
	gap: 20px;
	padding-block: 20px;
	border-bottom: 1px solid var(--line);
}

.card-feed-thumb {
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: var(--radius);
	overflow: hidden;
	align-self: start;
}

/* Kartu pertama feed: gambar besar di atas, teks di bawah. grid-row diset eksplisit
   karena di markup .card-feed-body ditulis sebelum .card-feed-thumb — tanpa ini
   gambarnya akan mendarat di bawah teks. */
.card-feed--lead {
	grid-template-columns: 1fr;
	gap: 14px;
	padding-top: 4px;
}

.card-feed--lead .card-feed-thumb {
	grid-row: 1;
	aspect-ratio: 16 / 9;
	width: 100%;
}

.card-feed--lead .card-feed-body {
	grid-row: 2;
}

.card-feed--lead .card-feed-title {
	font-size: 24px;
	line-height: 1.28;
}

.card-feed--lead .card-feed-excerpt {
	font-size: 15.5px;
	-webkit-line-clamp: 3;
}

.card-feed-title {
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
	margin-top: 9px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-feed-excerpt {
	margin-top: 7px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-feed .card-meta {
	margin-top: 9px;
}

/* ============ Sidebar ============ */
.sidebar {
	position: sticky;
	top: 130px;
	display: grid;
	gap: 24px;
}

.sidebar-box {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 22px;
}

.popular-list {
	margin-top: 6px;
	counter-reset: pop;
}

.popular-list li {
	counter-increment: pop;
	display: grid;
	grid-template-columns: 34px 1fr;
	column-gap: 12px;
	padding-block: 13px;
	border-bottom: 1px solid var(--line);
}

.popular-list li:last-child {
	border-bottom: 0;
	padding-bottom: 2px;
}

.popular-list li::before {
	content: counter(pop, decimal-leading-zero);
	grid-row: 1 / span 2;
	align-self: start;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--brand-ghost);
	letter-spacing: -0.03em;
}

.popular-title {
	grid-column: 2;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.42;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.popular-list .card-meta {
	grid-column: 2;
	margin-top: 6px;
	flex-wrap: wrap;
}

.chip-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 16px;
}

/* ============ Blok kanal ============ */
.channels {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px 40px;
	margin-block: 64px 72px;
}

/* Kanal pertama mengambil 2 kolom: gambar besar di kiri, daftar tautan di kanan.
   Memberi hierarki editorial supaya bagian ini tidak terbaca sebagai enam kotak
   kategori yang dihasilkan otomatis. */
/* Hierarki kanal dibuat lewat LEBAR, bukan tinggi. Lead memakai 2 kolom (gambar
   besar di kiri, tautan di kanan) dan blok terakhir melebar penuh sebagai penutup.
   Aritmetikanya: 6 kanal = lead(2) + 4 biasa(4) + penutup(3) = 9 satuan = tepat
   3 baris di grid 3 kolom, sehingga tak ada blok yatim di baris terakhir.
   Tinggi sengaja tidak ditambah: tiap kanal hanya berisi 4 artikel, jadi blok yang
   dipaksa setinggi 2 baris justru menyisakan ruang kosong besar. */
.channel-block--lead {
	grid-column: span 2;
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 4px 32px;
	align-content: start;
}

.channel-block--lead .channel-head {
	grid-column: 1 / -1;
}

.channel-block--lead .card-block-thumb {
	aspect-ratio: 4 / 3;
}

.channel-block--lead .card-block-title {
	font-size: 20px;
	-webkit-line-clamp: 3;
}

/* Penutup: melebar penuh, kartu di kiri dengan lebar tetap agar gambarnya tidak
   ikut meraksasa, tautan dibagi tiga kolom di sisa ruang. */
.channels > .channel-block:last-child {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 4px 32px;
	align-content: start;
}

.channels > .channel-block:last-child .channel-head {
	grid-column: 1 / -1;
}

.channels > .channel-block:last-child .channel-links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 32px;
	align-content: start;
}

.channel-block--lead .channel-links {
	margin-top: 0;
}

.channel-block--lead .channel-links li:first-child {
	padding-top: 0;
}

.channel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 18px;
}

.card-block-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius);
	overflow: hidden;
}

.card-block-body {
	padding-top: 12px;
}

.card-block-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
	margin-top: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-block-body .card-meta {
	margin-top: 8px;
}

.channel-block .card-block-body {
	padding-top: 12px;
}

.channel-links {
	margin-top: 6px;
}

.channel-links li {
	padding-block: 12px;
	border-bottom: 1px solid var(--line);
}

.channel-links li:last-child {
	border-bottom: 0;
}

.channel-links a {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.42;
	color: var(--text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.channel-links a:hover {
	color: var(--brand-dark);
}

.channel-links time {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--text-3);
}

/* ============ Arsip & pencarian ============ */
.archive-header {
	background: linear-gradient(180deg, var(--brand-tint) 0%, rgba(252, 238, 226, 0) 100%);
	border-bottom: 1px solid var(--line);
	padding-block: 40px 32px;
	margin-bottom: 8px;
}

.archive-kicker {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--brand-dark);
}

.archive-title {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin-top: 6px;
}

.archive-desc {
	margin-top: 10px;
	font-size: 15px;
	color: var(--text-2);
	max-width: 560px;
}

.archive-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px 32px;
	margin-block: 36px;
}

.empty-state {
	padding-block: 48px;
	color: var(--text-2);
	font-size: 15.5px;
}

.pagination {
	margin-block: 12px 56px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 13px;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-2);
	transition: border-color 0.18s ease, color 0.18s ease;
}

.pagination .page-numbers:hover {
	border-color: var(--brand);
	color: var(--brand-dark);
}

.pagination .page-numbers.current {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.pagination .page-numbers.dots {
	border: 0;
}

/* ============ Artikel ============ */
.article-header {
	padding-top: 44px;
}

.article-title {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -0.025em;
	margin-top: 10px;
}

.article-standfirst {
	margin-top: 14px;
	font-size: 17.5px;
	line-height: 1.6;
	color: var(--text-2);
}

.article-byline {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 24px;
	padding-block: 16px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.byline-avatar {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--brand-tint);
	color: var(--brand-dark);
	display: grid;
	place-items: center;
	font-size: 17px;
	font-weight: 800;
	flex-shrink: 0;
	overflow: hidden;
}

.byline-avatar.has-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.byline-text {
	display: grid;
	gap: 2px;
}

.byline-author {
	font-size: 14.5px;
	font-weight: 700;
}

.byline-meta {
	font-size: 13px;
	color: var(--text-2);
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.article-figure {
	margin-top: 30px;
}

.article-figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.article-figure figcaption {
	padding-top: 10px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--text-3);
}

.article-content {
	margin-top: 32px;
	font-family: var(--font-serif);
	font-size: 18.5px;
	line-height: 1.7;
	color: var(--text);
}

.article-reveal-ready .article-content .article-reveal-item {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--article-reveal-delay, 0ms),
		transform 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--article-reveal-delay, 0ms);
	will-change: opacity, transform;
}

.article-reveal-ready .article-content .article-reveal-item.is-visible {
	opacity: 1;
	transform: translateY(0);
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.article-reveal-ready .article-content .article-reveal-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.article-content p {
	margin-bottom: 24px;
}

.article-content h2,
.article-content h3 {
	font-family: var(--font-ui);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.3;
	margin: 38px 0 14px;
}

.article-content h2 {
	font-size: 23px;
}

.article-content h3 {
	font-size: 19px;
}

.article-content a {
	color: var(--brand-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-content blockquote {
	margin: 30px 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--brand);
	font-style: italic;
	color: var(--text-2);
}

.article-content img {
	border-radius: var(--radius);
}

.article-content ul,
.article-content ol {
	padding-left: 26px;
	margin-bottom: 24px;
	list-style: disc;
}

.article-content ol {
	list-style: decimal;
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 36px;
}

.related {
	margin-block: 64px 72px;
}

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

/* ============ Footer ============ */
.site-footer {
	background: var(--footer-bg);
	color: var(--footer-fg);
	margin-top: 24px;
	border-top: 1px solid var(--footer-line);
}

/* Empat kolom: merek | Perusahaan | Ketentuan | Ikuti kami.
   Sebelumnya bertumpuk vertikal (merek, deret enam tautan, pembatas, lalu satu blok
   sosial) sehingga sisi kanan kosong panjang setelah blok "Part of" dihapus. */
.footer-main {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
	gap: 40px;
	padding-block: 48px 40px;
}

.footer-heading {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--footer-strong);
	margin-bottom: 14px;
}

.footer-col .footer-links {
	display: grid;
	gap: 10px;
}

.footer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

@media (max-width: 900px) {
	.footer-main {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.footer-main {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

.footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.footer-logo {
	display: block;
	height: 40px;
	width: auto;
}

.footer-tagline {
	margin-top: 12px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--footer-fg);
	max-width: 620px;
}

.footer-nav {
	margin-top: 30px;
}

.footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links a {
	font-size: 14px;
	font-weight: 600;
	color: var(--footer-fg);
	transition: color 0.18s ease;
}

.footer-links a:hover {
	color: #f2995a;
}

/* .footer-divider dan .footer-lower dihapus: footer kini grid empat kolom, tidak
   lagi bertumpuk vertikal sehingga tak perlu pembatas horizontal. */



/* Blok "Part of" beserta logo grup induk dihapus — aturan .footer-group,
   .footer-group-label, dan .footer-group-logo ikut dibuang karena tidak lagi
   mengenai elemen mana pun. */

.footer-connect {
	margin-left: auto;
	text-align: left;
}

/* .footer-heading versi lama (putih 14px) dihapus — letaknya lebih bawah dari aturan
   baru sehingga menang, dan di latar terang tajuknya jadi tak terlihat. */

.footer-bottom {
	border-top: 1px solid var(--footer-line);
	padding-block: 20px;
	font-size: 13px;
	/* Token, bukan nilai gelap yang dipatok: baris ini harus ikut berbalik di mode
	   gelap, kalau tidak teksnya hilang di latar gelap. */
	color: var(--footer-fg);
}

.footer-bottom p {
	margin: 0;
}

/* ============ 404 ============ */
.error-404 {
	text-align: center;
	padding-block: 72px 88px;
	max-width: 560px;
	margin-inline: auto;
}

.error-code {
	font-size: 96px;
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--brand-ghost);
}

.error-404 .archive-title {
	margin-top: 8px;
}

.error-404 .empty-state {
	padding-block: 10px 26px;
}

.error-search {
	max-width: 380px;
	margin-inline: auto;
	margin-bottom: 26px;
}

/* ============ Animasi masuk ============ */
@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-lead,
.hero-side,
.feed,
.sidebar,
.channel-block,
.article,
.archive-grid,
.related {
	animation: rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.hero-side { animation-delay: 0.08s; }
.sidebar { animation-delay: 0.1s; }
.channel-block:nth-child(2) { animation-delay: 0.06s; }
.channel-block:nth-child(3) { animation-delay: 0.12s; }
.channel-block:nth-child(4) { animation-delay: 0.18s; }
.channel-block:nth-child(5) { animation-delay: 0.24s; }
.channel-block:nth-child(6) { animation-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ============ Responsif ============ */
@media (max-width: 1080px) {
	.header-date {
		display: none;
	}

	.hero {
		grid-template-columns: 1.4fr 1fr;
		gap: 32px;
	}

	.layout-2col {
		grid-template-columns: 1fr 300px;
		gap: 36px;
	}

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

@media (max-width: 840px) {
	.hero {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.hero-side {
		margin-top: 24px;
	}

	.layout-2col {
		grid-template-columns: 1fr;
		gap: 44px;
		margin-top: 40px;
	}

	.sidebar {
		position: static;
	}

	.related-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.related-grid .card-block {
		display: grid;
		grid-template-columns: 1fr 130px;
		gap: 16px;
		padding-block: 14px;
		border-bottom: 1px solid var(--line);
	}

	.related-grid .card-block-thumb {
		order: 2;
		aspect-ratio: 4 / 3;
	}

	.related-grid .card-block-body {
		padding-top: 0;
	}
}

@media (max-width: 960px) {
	.brand-tagline,
	.header-actions .header-ico {
		display: none;
	}
}

@media (max-width: 720px) {
	.container,
	.container-narrow {
		padding-inline: 18px;
	}

	.header-actions .btn-write {
		display: none;
	}

	/* Mobile: logo tidak lagi membentang dua baris — nav berubah jadi drawer, jadi
	   grid cukup satu baris berisi hamburger, logo, lalu utilitas. */
	.header-grid {
		grid-template-columns: auto auto minmax(0, 1fr);
		grid-template-areas: "toggle brand utility";
		column-gap: 10px;
		align-items: center;
	}

	.header-grid > .nav-toggle {
		grid-area: toggle;
	}

	.header-grid > .brand {
		padding-right: 0;
		margin-right: 0;
		border-right: 0;
	}

	.header-utility {
		height: 58px;
		gap: 10px;
	}

	.brand-logo {
		height: 26px;
	}

	.header-search {
		flex: 0 0 38px;
		width: 38px;
		max-width: 38px;
		margin-left: auto;
	}

	.header-actions {
		gap: 8px;
	}

	.header-search .search-wrap {
		width: 38px;
	}

	.search-mobile-toggle {
		display: grid;
		place-items: center;
		width: 38px;
		height: 38px;
		padding: 0;
		border: 1px solid var(--line);
		border-radius: 999px;
		background: transparent;
		color: var(--text-2);
		cursor: pointer;
	}

	.search-mobile-toggle:hover {
		border-color: var(--brand);
		color: var(--brand-dark);
	}

	.header-search .search-wrap > .search-form {
		display: none;
	}

	.header-search .search-wrap.is-searching > .search-mobile-toggle {
		display: none;
	}

	.header-search .search-wrap.is-searching > .search-form {
		display: flex;
	}

	body.search-open {
		overflow: hidden;
	}

	body.nav-open {
		overflow: hidden;
	}

	body.search-open .site-nav,
	body.search-open main,
	body.search-open .site-footer {
		filter: blur(10px);
		transform: scale(1.01);
		transition: filter 0.18s ease, transform 0.18s ease;
		pointer-events: none;
	}

	.search-wrap.is-searching {
		position: fixed;
		inset: 0;
		z-index: 5000;
		width: auto;
		padding: max(22px, env(safe-area-inset-top)) 18px 18px;
		background: transparent;
		isolation: isolate;
	}

	.search-wrap.is-searching::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 0;
		background: rgba(4, 7, 12, 0.58);
		-webkit-backdrop-filter: blur(24px) saturate(0.85);
		backdrop-filter: blur(24px) saturate(0.85);
	}

	.search-wrap.is-searching .search-form {
		position: relative;
		z-index: 1;
		max-width: 640px;
		height: 54px;
		margin: 0 auto;
		padding-inline: 18px 10px;
		background: var(--bg);
		border-color: rgba(255, 255, 255, 0.18);
		box-shadow: 0 18px 46px rgba(0, 0, 0, 0.26);
	}

	.search-wrap.is-searching .search-field {
		font-size: 16px;
	}

	.search-wrap.is-searching .search-close {
		display: inline-flex;
	}

	.search-wrap.is-searching .search-dropdown {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		z-index: 1;
		max-width: 640px;
		max-height: calc(100vh - 106px);
		margin: 12px auto 0;
		padding: 12px;
		overflow-y: auto;
		border-radius: 18px;
		box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
	}

	.search-wrap.is-searching .search-popular {
		padding: 12px 10px 8px;
	}

	.search-wrap.is-searching .search-pop-chips {
		gap: 9px;
	}

	.search-wrap.is-searching .search-pop-chips .chip {
		min-height: 36px;
		padding-inline: 13px;
		font-size: 13px;
	}

	/* Hamburger + panel menu */
	.nav-toggle {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 4.5px;
		width: 38px;
		height: 38px;
		padding: 8px;
		background: transparent;
		border: 0;
		cursor: pointer;
		flex-shrink: 0;
	}

	.nav-toggle span {
		display: block;
		height: 2.4px;
		width: 100%;
		border-radius: 2px;
		background: var(--text);
		transition: transform 0.25s ease, opacity 0.2s ease;
	}

	.nav-open .nav-toggle span:nth-child(1) {
		transform: translateY(6.9px) rotate(45deg);
	}

	.nav-open .nav-toggle span:nth-child(2) {
		opacity: 0;
	}

	.nav-open .nav-toggle span:nth-child(3) {
		transform: translateY(-6.9px) rotate(-45deg);
	}

	/* Drawer meluncur dari KANAN. Memakai transform + visibility, bukan display:none —
	   elemen yang display:none tidak bisa dianimasikan, jadi sebelumnya drawer muncul
	   mendadak dari atas tanpa transisi. */
	.site-nav {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(84vw, 340px);
		height: 100dvh;
		z-index: 3005;
		background: var(--bg);
		border-left: 1px solid var(--line);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		box-shadow: -18px 0 44px -24px rgba(0, 0, 0, 0.45);
		transform: translateX(100%);
		visibility: hidden;
		/* visibility ditunda agar animasi keluar tetap terlihat sampai tuntas. */
		transition:
			transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 0.38s;
	}

	/*
	 * .site-nav berada DI DALAM .site-header (sejak header dirombak jadi grid), dan
	 * .site-header ber-z-index:3000 sehingga membentuk stacking context sendiri.
	 * Akibatnya z-index drawer dihitung relatif terhadap header — berapa pun nilainya
	 * tidak akan melewati backdrop yang z-index-nya dibandingkan di level halaman.
	 * Yang harus dinaikkan adalah HEADER-nya.
	 */
	.nav-open .site-header {
		z-index: 3010;
	}

	.nav-open .site-nav {
		z-index: 3010;
		transform: none;
		visibility: visible;
		transition:
			transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 0s;
	}

	.admin-bar .site-nav {
		top: 46px;
		height: calc(100dvh - 46px);
	}

	.nav-backdrop {
		/* display WAJIB dikembalikan: aturan global menyetelnya none agar tak muncul
		   di desktop. */
		display: block;
		position: fixed;
		inset: 0;
		/* 3007 — di atas tab bar (3006) supaya seluruh layar tertutup saat drawer
		   terbuka, bukan hanya sebagian. */
		z-index: 3007;
		background: rgba(10, 7, 3, 0.5);
		backdrop-filter: blur(2px);
		opacity: 0;
		transition: opacity 0.32s ease;
	}

	.nav-backdrop.is-visible {
		opacity: 1;
	}

	.nav-open .site-nav .nav-inner {
		padding: 10px 18px max(28px, env(safe-area-inset-bottom));
	}

	/*
	 * Vertikal SELALU, bukan hanya saat .nav-open. Sebelumnya daftar tetap mendatar
	 * selebar 823px ketika drawer tertutup — dan karena drawer position:fixed yang
	 * digeser keluar layar, lebar itu tetap menambah scrollWidth halaman sehingga
	 * seluruh halaman bisa digeser ke samping.
	 */
	.site-nav .nav-list {
		align-items: stretch;
		flex-direction: column;
		gap: 0;
		padding: 0;
	}

	.nav-open .nav-list {
		align-items: stretch;
		flex-direction: column;
		gap: 0;
		padding: 0;
		overflow: hidden;
	}

	.nav-open .nav-list li {
		width: 100%;
		position: relative;
	}

	.nav-open .nav-list > .menu-item-more {
		margin-left: 0;
		order: initial;
	}

	.nav-open .nav-list a {
		text-align: left;
		padding: 13px 44px 13px 8px;
		font-size: 15px;
		border-bottom: 1px solid var(--line);
		white-space: normal;
		line-height: 1.35;
	}

	.nav-open .nav-list li:last-child a {
		border-bottom: 0;
	}

	.nav-open .nav-list a::after {
		display: none;
	}

	.nav-open .site-nav .nav-list > li.menu-item-has-children:not(.submenu-open) > .sub-menu {
		display: none !important;
	}

	.nav-open .site-nav .nav-list > li.menu-item-has-children.submenu-open > .sub-menu {
		display: block !important;
		position: static;
		min-width: 0;
		padding: 4px 0 7px 14px;
		background: var(--bg-soft);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.nav-open .nav-list .sub-menu a {
		padding: 10px 42px 10px 10px;
		font-size: 13.5px;
		color: var(--text-2);
	}

	.nav-open .submenu-toggle {
		display: grid;
		place-items: center;
		position: absolute;
		top: 5px;
		right: 0;
		z-index: 2;
		width: 38px;
		height: 38px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--text-2);
		cursor: pointer;
	}

	.nav-open .submenu-toggle::before {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.18s ease;
	}

	.nav-open .submenu-open > .submenu-toggle::before {
		transform: translateY(2px) rotate(225deg);
	}

	.site-header .account-menu {
		position: fixed;
		top: 66px;
		left: 18px;
		right: 18px;
		min-width: 0;
		max-height: calc(100vh - 84px);
		overflow-y: auto;
		z-index: 5005;
	}

	.admin-bar .site-header .account-menu {
		top: 112px;
	}

	.hero {
		margin-top: 20px;
	}

	/* aspect-ratio pada kontrol dihapus — dulu kontrol menutupi foto sehingga perlu
	   setinggi foto; sekarang ia baris statis dan aspect-ratio membuatnya setinggi
	   221px berisi ruang kosong. */
	.hero-carousel {
		touch-action: pan-y;
	}

	/* Di layar sentuh geser lebih alami daripada panah; titik indikator tetap ada. */
	.hero-carousel-btn {
		display: none;
	}

	.hero-carousel .hero-lead-thumb {
		aspect-ratio: 16 / 10;
	}

	.hero-carousel .hero-lead-excerpt {
		-webkit-line-clamp: 1;
	}

	.hero-carousel .card-meta {
		display: none;
	}

	.hero-carousel-btn {
		width: 34px;
		height: 34px;
	}

	.hero-lead-title {
		font-size: 23px;
	}

	.card-feed {
		grid-template-columns: 1fr 116px;
		gap: 14px;
	}

	.card-feed-thumb {
		aspect-ratio: 1 / 1;
	}

	.card-feed-excerpt {
		display: none;
	}

	/* Varian lead ditulis ulang di sini: aturan .card-feed di atas berada lebih akhir
	   dalam file dengan spesifisitas sama, jadi tanpa penegasan ini kartu lead ikut
	   menyempit jadi dua kolom di layar kecil. */
	.card-feed--lead {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.card-feed--lead .card-feed-thumb {
		aspect-ratio: 16 / 9;
	}

	.card-feed--lead .card-feed-excerpt {
		display: -webkit-box;
	}

	.card-feed--lead .card-feed-title {
		font-size: 20px;
	}

	.channels {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-block: 48px 56px;
	}

	/* Grid tinggal satu kolom — span 2 akan meluber keluar. */
	.channel-block--lead,
	.channels > .channel-block:last-child {
		grid-column: auto;
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.channels > .channel-block:last-child .channel-links {
		grid-template-columns: 1fr;
	}

	.archive-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.archive-title {
		font-size: 27px;
	}

	.article-header {
		padding-top: 28px;
	}

	.article-title {
		font-size: 26px;
	}

	.article-content {
		font-size: 17px;
	}

	.footer-main {
		padding-block: 38px 30px;
	}

	.footer-logo {
		height: 30px;
	}

	.footer-nav {
		margin-top: 24px;
	}

	.footer-links {
		align-items: flex-start;
		gap: 12px 24px;
	}

	.footer-connect {
		margin-left: 0;
		width: 100%;
	}
}

/* ============ Tombol mode gelap ============ */
.header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	/* Didorong ke tepi kanan. Tanpa ini, .header-search berhenti di max-width 430px
	   dan menyisakan ~227px ruang mati di ujung kanan strip utilitas. */
	margin-left: auto;
}

.header-ico,
.theme-toggle {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: var(--text-2);
	cursor: pointer;
	display: grid;
	place-items: center;
	text-decoration: none;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.header-ico,
.theme-toggle {
	transition:
		color 0.2s ease,
		border-color 0.2s ease,
		background-color 0.2s ease,
		transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.28s ease;
}

/* Terangkat sedikit + bayangan lembut: memberi umpan balik fisik, bukan cuma
   pergantian warna garis tepi seperti sebelumnya. */
.header-ico:hover,
.theme-toggle:hover,
.header-ico:focus-visible,
.theme-toggle:focus-visible {
	color: var(--brand-dark);
	border-color: var(--brand);
	background-color: var(--brand-tint);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px -12px rgba(254, 142, 0, 0.85);
}

.header-ico:active,
.theme-toggle:active {
	transform: translateY(0);
}

/* Logo ikut merespons, halus saja — ini tautan paling sering diklik. */
.header-grid > .brand {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.header-grid > .brand:hover {
	transform: translateY(-1px);
}

.btn-write {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0;
	transition:
		background 0.2s ease,
		transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.28s ease;
}

.btn-write:hover,
.btn-write:focus-visible {
	background: var(--brand-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 22px -12px rgba(217, 120, 0, 0.9);
}

.btn-write:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Ikon pena bergeser sedikit saat hover — detail kecil yang membuat tombol
   terasa mengajak, bukan sekadar berubah gelap. */
.btn-write svg {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-write:hover svg {
	transform: translateX(2px) rotate(-8deg);
}

/* Semua animasi hover di atas dimatikan bagi yang memintanya. */
@media (prefers-reduced-motion: reduce) {
	.nav-list a::before,
	.nav-list a::after,
	.header-ico,
	.theme-toggle,
	.header-grid > .brand,
	.btn-write,
	.btn-write svg {
		transition: none;
	}

	.header-ico:hover,
	.theme-toggle:hover,
	.btn-write:hover,
	.header-grid > .brand:hover {
		transform: none;
	}
}

/* ===== Switch mode gelap =====
   Menggantikan tombol bundar. Kedua ikon tampil bersamaan di dalam track dan
   knob meluncur di antaranya, sehingga keadaan sekarang DAN tujuan perpindahan
   terbaca sekaligus — beda dari tombol lama yang hanya menampilkan satu ikon
   sehingga ambigu: apakah ikon itu mode saat ini atau mode yang akan dituju. */
.theme-toggle.theme-switch {
	width: 58px;
	height: 30px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--bg-soft);
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Override aturan lama yang menyembunyikan salah satu ikon. */
.theme-toggle.theme-switch .ico-sun,
.theme-toggle.theme-switch .ico-moon,
html.theme-dark .theme-toggle.theme-switch .ico-sun,
html.theme-dark .theme-toggle.theme-switch .ico-moon {
	display: block;
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
	transition: opacity 0.3s ease, color 0.3s ease;
	z-index: 1;
}

/*
 * Knob menutupi ikon di sisi tempat ia berhenti, jadi yang terlihat selalu ikon
 * di sisi SEBERANG. Karena itu ikon seberang yang dibuat terang: posisi knob
 * menyatakan mode sekarang, ikon yang tampak menyatakan mode tujuan bila ditekan.
 */
.theme-toggle.theme-switch .ico-sun {
	left: 8px;
	opacity: 0.35;
}

.theme-toggle.theme-switch .ico-moon {
	right: 8px;
	opacity: 1;
	color: var(--brand);
}

.theme-switch-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--bg);
	box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.4);
	z-index: 2;
	/* Kurva easeOutQuint: meluncur cepat lalu mendarat lembut. */
	transition:
		transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.3s ease;
}

/* 58 lebar - 2 border - 3 kiri - 22 knob - 3 kanan = 28 */
html.theme-dark .theme-switch-knob {
	transform: translateX(28px);
	background: var(--brand);
}

html.theme-dark .theme-toggle.theme-switch {
	background: var(--brand-ink);
	border-color: var(--brand-ghost);
}

html.theme-dark .theme-toggle.theme-switch .ico-sun {
	opacity: 1;
	color: var(--brand);
}

html.theme-dark .theme-toggle.theme-switch .ico-moon {
	opacity: 0.35;
	color: inherit;
}

/* Switch tidak ikut terangkat seperti tombol bundar — kendali dua-keadaan
   sebaiknya terasa menempel, cukup tepinya yang menyala. */
.theme-toggle.theme-switch:hover,
.theme-toggle.theme-switch:focus-visible {
	transform: none;
	border-color: var(--brand);
	background-color: var(--brand-tint);
	box-shadow: 0 6px 16px -12px rgba(254, 142, 0, 0.9);
}

html.theme-dark .theme-toggle.theme-switch:hover,
html.theme-dark .theme-toggle.theme-switch:focus-visible {
	background-color: var(--brand-ink);
	border-color: var(--brand);
}

.theme-toggle.theme-switch:active .theme-switch-knob {
	width: 26px;
}

@media (prefers-reduced-motion: reduce) {
	.theme-switch-knob,
	.theme-toggle.theme-switch,
	.theme-toggle.theme-switch .ico-sun,
	.theme-toggle.theme-switch .ico-moon {
		transition: none;
	}
}

.theme-toggle .ico-sun {
	display: none;
}

html.theme-dark .theme-toggle .ico-moon {
	display: none;
}

html.theme-dark .theme-toggle .ico-sun {
	display: block;
}

/* ============ Breadcrumb ============ */
.breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text-3);
	margin-bottom: 14px;
}

.breadcrumb a {
	color: var(--text-2);
	transition: color 0.18s ease;
}

.breadcrumb a:last-child {
	color: var(--brand-dark);
}

.breadcrumb a:hover {
	color: var(--brand-dark);
}

.breadcrumb-sep {
	color: var(--text-3);
}

/* ============ Aksi artikel: suka + bagikan ============ */
.article-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.article-tools {
	display: grid;
	gap: 12px;
	margin-top: 20px;
	margin-bottom: 28px;
}

.article-tools .jn-listen {
	margin: 0;
}

.article-tools .jn-tr {
	margin: 0;
}

.article-actions-bottom {
	margin-bottom: 24px;
}

.like-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: var(--text-2);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.like-btn:hover {
	border-color: var(--brand);
	color: var(--brand-dark);
}

.like-btn svg {
	transition: transform 0.2s ease;
}

.like-btn.is-liked {
	background: var(--brand-tint);
	border-color: transparent;
	color: var(--brand-dark);
	cursor: default;
}

.like-btn.is-liked svg {
	fill: var(--brand);
	stroke: var(--brand);
	transform: scale(1.1);
}

.share-group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.share-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-3);
}

.share-btn {
	position: relative;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: var(--text-2);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.share-btn:hover {
	color: #fff;
	border-color: transparent;
}

.share-wa:hover {
	background: #25d366;
}

.share-fb:hover {
	background: #1877f2;
}

.share-x:hover {
	background: #111;
}

.share-copy:hover {
	background: var(--brand);
}

.copied-toast {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--brand-ink);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.share-copy.is-copied .copied-toast {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (max-width: 560px) {
	.share-group {
		margin-left: 0;
		width: 100%;
	}

	.share-label {
		display: none;
	}
}

/* ============ Komentar ============ */
.comments {
	margin-top: 8px;
	padding-bottom: 8px;
}

.comments-area {
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.comment-list {
	margin-top: 22px;
	display: grid;
	gap: 22px;
}

.comment-list ol.children {
	margin-top: 20px;
	margin-left: 26px;
	display: grid;
	gap: 20px;
	padding-left: 18px;
	border-left: 2px solid var(--line);
}

.comment-body {
	display: grid;
	gap: 6px;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

.comment-author .avatar {
	border-radius: 999px;
}

.comment-author .fn {
	font-weight: 700;
	font-style: normal;
	color: var(--text);
}

.comment-author .says {
	display: none;
}

.comment-meta {
	display: grid;
	gap: 5px;
}

.comment-metadata {
	font-size: 12.5px;
	color: var(--text-3);
}

.comment-metadata a {
	color: var(--text-3);
}

.comment-content {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--text);
}

.comment-content p {
	margin-bottom: 10px;
}

.reply {
	font-size: 13px;
	font-weight: 700;
}

.reply a {
	color: var(--brand-dark);
}

.comments-empty {
	margin-top: 18px;
	color: var(--text-2);
	font-size: 15px;
}

.comment-respond {
	margin-top: 34px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
}

.comment-form-title {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 16px;
}

.comment-form {
	display: grid;
	gap: 14px;
}

.comment-form p {
	margin: 0;
	display: grid;
	gap: 6px;
}

.comment-form label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-2);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 11px 14px;
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--brand);
}

.comment-form textarea {
	resize: vertical;
	min-height: 96px;
}

.comment-form .form-submit {
	margin-top: 4px;
}

.comment-form .btn-submit,
.btn-submit {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.18s ease;
}

.comment-form .btn-submit:hover,
.btn-submit:hover {
	background: var(--brand-dark);
}

.comment-form .comment-form-cookies-consent {
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 8px;
}

.comment-form .comment-form-cookies-consent label {
	color: var(--text-3);
	font-weight: 400;
	font-size: 12.5px;
}

/* ============ Grid halaman Video Story ============ */
.reel-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin-block: 30px 64px;
}

/* ===== Halaman Video Story ===== */

/* Header ramping: judul di kiri, ajakan di kanan, sejajar di satu baris. */
.vs-header {
	border-bottom: 1px solid var(--line);
	padding-block: 30px 26px;
	margin-bottom: 30px;
}

.vs-header-inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.vs-kicker {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-3);
}

.vs-kicker-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--brand);
}

.vs-count {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--brand-tint);
	color: var(--brand-dark);
	letter-spacing: 0.02em;
}

.vs-title {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-top: 8px;
}

.vs-desc {
	font-size: 14.5px;
	color: var(--text-2);
	max-width: 520px;
	margin-top: 8px;
}

.vs-cta {
	flex-shrink: 0;
}

/* Empat kolom, bukan lima: dengan 8 video jadi tepat dua baris penuh, dan kartunya
   naik dari ~190px ke ~250px — video vertikal butuh bidang yang lebih besar.
   Selector ganda (.reel-grid.reel-grid--page) dipakai supaya spesifisitasnya di atas
   aturan .reel-grid di media query yang letaknya lebih bawah dalam file ini —
   mengandalkan urutan sumber saja akan kalah. */
.reel-grid.reel-grid--page {
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-block: 0 44px;
}

/* Kartu reel dipatok 190px untuk deretan geser di beranda. Di grid halaman ini
   lebarnya harus mengikuti sel grid, kalau tidak kolomnya melebar tapi kartunya
   tetap kecil dan menyisakan celah. */
.reel-grid--page .reel-card {
	width: auto;
}

@media (max-width: 1080px) {
	.reel-grid.reel-grid--page {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 760px) {
	.vs-header {
		padding-block: 22px 20px;
		margin-bottom: 22px;
	}

	.vs-header-inner {
		align-items: flex-start;
		gap: 16px;
	}

	.vs-title {
		font-size: 26px;
	}

	.reel-grid.reel-grid--page {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.reel-grid--page .reel-card {
		width: auto;
	}
}

@media (max-width: 1080px) {
	.reel-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 720px) {
	.reel-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.header-actions {
		gap: 8px;
	}

	.theme-toggle {
		width: 36px;
		height: 36px;
	}
}

@media (max-width: 520px) {
	.brand-logo {
		height: 22px;
	}
}

@media (max-width: 400px) {
	.header-grid.container {
		padding-inline: 12px;
	}
}

@media (max-width: 340px) {
	.header-actions .theme-toggle {
		display: none;
	}
}

/* ============ Breaking news ticker ============ */
.ticker {
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}

.ticker-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 42px;
}

.ticker-label {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 11px;
	border-radius: 6px;
	background: var(--brand);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ticker-label::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	animation: ticker-blink 1.2s steps(1) infinite;
}

@keyframes ticker-blink {
	50% { opacity: 0.25; }
}

.ticker-viewport {
	flex: 1;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 93%, transparent);
}

.ticker-track {
	display: inline-flex;
	align-items: center;
	gap: 34px;
	white-space: nowrap;
	will-change: transform;
	animation: ticker-scroll 45s linear infinite;
}

.ticker:hover .ticker-track {
	animation-play-state: paused;
}

.ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text);
}

.ticker-item:hover {
	color: var(--brand-dark);
}

.ticker-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--brand);
	flex-shrink: 0;
}

@keyframes ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ============ Menu akun ============ */
.account {
	position: relative;
	flex-shrink: 0;
}

.account-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: var(--text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.account-btn:hover {
	border-color: var(--brand);
	color: var(--brand-dark);
}

.account-login svg {
	color: var(--brand-dark);
}

.account-toggle {
	padding: 0;
	width: 40px;
	justify-content: center;
}

.account-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 14px;
	font-weight: 800;
}

.account-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	min-width: 210px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow-soft);
	padding: 8px;
	display: none;
	z-index: 4000;
}

.account.open .account-menu {
	display: block;
}

.account-hi {
	padding: 8px 12px 10px;
	font-size: 13px;
	color: var(--text-2);
	line-height: 1.45;
	border-bottom: 1px solid var(--line);
	margin-bottom: 6px;
}

.account-hi strong {
	color: var(--text);
	font-size: 14.5px;
}

.account-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.account-menu a:hover {
	background: var(--bg-soft);
	color: var(--brand-dark);
}

.account-logout {
	color: #c0392b !important;
}

/* ============ Slot iklan ============ */
.ad-slot {
	text-align: center;
	margin: 8px 0;
}

.ad-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: 6px;
}

.ad-inner {
	display: grid;
	place-items: center;
	border: 1px dashed var(--line);
	border-radius: 10px;
	background: var(--bg-soft);
	color: var(--text-3);
	font-size: 13px;
	font-weight: 600;
}

.ad-sidebar .ad-inner {
	min-height: 250px;
}

.ad-infeed {
	margin: 22px 0;
}

.ad-infeed .ad-inner {
	min-height: 120px;
}

.ad-article {
	margin: 34px auto;
}

.ad-article .ad-inner {
	min-height: 140px;
}

/* ============ Muat lebih banyak ============ */
.load-more-wrap {
	display: flex;
	justify-content: center;
	padding: 30px 0 6px;
}

.load-more-btn {
	height: 46px;
	padding: 0 30px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: var(--brand-dark);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.load-more-btn:hover {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.load-more-btn.is-loading {
	opacity: 0.65;
	cursor: default;
}

/* ============ Tombol simpan artikel ============ */
.save-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: var(--text-2);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.save-btn:hover {
	border-color: var(--brand);
	color: var(--brand-dark);
}

.save-btn.is-saved {
	background: var(--brand-tint);
	border-color: transparent;
	color: var(--brand-dark);
}

.save-btn.is-saved svg {
	fill: var(--brand);
	stroke: var(--brand);
}

@media (max-width: 820px) {
	.account-login span {
		display: none;
	}

	.account-login {
		width: 40px;
		padding: 0;
		justify-content: center;
	}
}

@media (max-width: 720px) {
	.ticker-inner {
		height: 38px;
	}
}

/* ============ Kanal penerbit: byline, badge, follow ============ */
.chan-byline {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--brand-dark);
	font-weight: 700;
}

.chan-byline:hover .chan-name {
	text-decoration: underline;
}

.verified-badge {
	flex-shrink: 0;
	vertical-align: middle;
}

.chan-avatar {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	display: inline-grid;
	place-items: center;
	font-size: 10px;
	font-weight: 800;
}

.follow-btn {
	flex-shrink: 0;
	height: 34px;
	padding: 0 16px;
	border: 1.5px solid var(--brand);
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.follow-btn:hover {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
}

.follow-btn.is-following {
	background: transparent;
	color: var(--brand-dark);
}

.follow-btn.is-following:hover {
	background: var(--brand-tint);
}

.byline-author {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.byline-author a {
	color: inherit;
}

.byline-author a:hover {
	color: var(--brand-dark);
}

.article-byline .byline-text {
	flex: 1;
}

a.byline-avatar {
	text-decoration: none;
}

/* Header kanal (author.php) */
.channel-header {
	background: linear-gradient(180deg, var(--brand-tint) 0%, rgba(252, 238, 226, 0) 100%);
	border-bottom: 1px solid var(--line);
	padding-block: 40px 34px;
	margin-bottom: 8px;
}

.channel-head-inner {
	display: flex;
	align-items: center;
	gap: 22px;
}

.channel-avatar {
	width: 84px;
	height: 84px;
	border-radius: 24px;
	background: var(--brand);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 38px;
	font-weight: 800;
	flex-shrink: 0;
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}

.channel-avatar.has-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.channel-meta {
	flex: 1;
	min-width: 0;
}

.channel-name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.channel-desc {
	margin-top: 6px;
	color: var(--text-2);
	font-size: 15px;
	line-height: 1.55;
	max-width: 620px;
}

.channel-stats {
	margin-top: 10px;
	font-size: 14px;
	color: var(--text-3);
	display: flex;
	align-items: center;
	gap: 8px;
}

.channel-stats strong {
	color: var(--text);
	font-weight: 800;
}

.channel-actions {
	flex-shrink: 0;
}

.channel-actions .follow-btn {
	height: 44px;
	padding: 0 26px;
	font-size: 14.5px;
}

@media (max-width: 620px) {
	.channel-head-inner {
		flex-wrap: wrap;
		gap: 16px;
	}

	.channel-avatar {
		width: 64px;
		height: 64px;
		font-size: 28px;
		border-radius: 18px;
	}

	.channel-name {
		font-size: 22px;
	}

	.channel-actions {
		width: 100%;
	}

	.channel-actions .follow-btn {
		width: 100%;
	}
}

/* ============ Newsletter ============ */
.newsletter {
	border-top: 1px solid var(--line);
	background: var(--brand-tint);
}

.newsletter-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding-block: 34px;
	flex-wrap: wrap;
}

.newsletter-title {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--text);
}

.newsletter-sub {
	margin-top: 6px;
	font-size: 14.5px;
	color: var(--text-2);
	max-width: 480px;
}

.newsletter-form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	min-width: 320px;
	flex: 1;
	max-width: 460px;
}

.newsletter-input {
	height: 48px;
	padding: 0 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg);
	font-family: inherit;
	font-size: 14.5px;
	color: var(--text);
}

.newsletter-input:focus {
	outline: none;
	border-color: var(--brand);
}

.newsletter-btn {
	height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.18s ease;
}

.newsletter-btn:hover {
	background: var(--brand-dark);
}

.newsletter-msg {
	grid-column: 1 / -1;
	font-size: 13px;
	font-weight: 600;
}

.newsletter-msg.is-ok {
	color: var(--brand-dark);
}

.newsletter-msg.is-err {
	color: #c0392b;
}

.newsletter-msg:empty {
	display: none;
}

@media (max-width: 720px) {
	.newsletter-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.newsletter-form {
		max-width: none;
		width: 100%;
		min-width: 0;
	}
}

/* ============ Format khusus: Plus & Live ============ */
.plus-badge {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	border-radius: 5px;
	background: linear-gradient(135deg, #f0a832, #fe8e00);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.live-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 20px;
	padding: 0 9px;
	border-radius: 5px;
	background: #e0322f;
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	animation: live-pulse 1.1s ease-in-out infinite;
}

@keyframes live-pulse {
	50% { opacity: 0.3; }
}

.card-tagrow {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.article-badges {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.article-badges .plus-badge,
.article-badges .live-badge {
	height: 25px;
	font-size: 11.5px;
	padding: 0 12px;
	border-radius: 6px;
}

.live-feed {
	margin-top: 10px;
	border-left: 2px solid var(--line);
	padding-left: 22px;
}

.live-update {
	position: relative;
	padding-bottom: 26px;
}

.live-update::before {
	content: "";
	position: absolute;
	left: -27px;
	top: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 0 0 3px var(--bg);
}

.live-update:last-child {
	padding-bottom: 0;
}

.live-update-time {
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 800;
	color: var(--brand-dark);
	margin-bottom: 5px;
}

.live-update-body {
	font-family: var(--font-serif);
	font-size: 17px;
	line-height: 1.6;
	color: var(--text);
}

/* Live blog: kepala "LANGSUNG" + status auto-refresh */
.live-wrap {
	margin-top: 24px;
}

.live-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.live-indicator {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 11px;
	border-radius: 6px;
	background: #e0322f;
	color: #fff;
	font-family: var(--font-ui);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.07em;
}

.live-indicator .live-dot {
	background: #fff;
}

.live-auto {
	font-family: var(--font-ui);
	font-size: 12.5px;
	color: var(--muted);
	transition: color 0.2s ease;
}

.live-auto.flash {
	color: var(--brand-dark);
	font-weight: 700;
}

/* Pembaruan baru yang masuk lewat polling: geser masuk + tanda "BARU" */
.live-update.is-new {
	animation: live-new-in 0.55s ease;
}

.live-update.is-new .live-update-time::after {
	content: "BARU";
	margin-left: 8px;
	padding: 1px 6px;
	border-radius: 4px;
	background: #fbeae0;
	color: var(--brand-dark);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.05em;
	vertical-align: middle;
}

@keyframes live-new-in {
	0% { opacity: 0; transform: translateY(-7px); }
	100% { opacity: 1; transform: translateY(0); }
}

.paywall {
	margin-top: 12px;
	text-align: center;
	padding: 36px 28px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
	font-family: var(--font-ui);
}

.paywall .plus-badge {
	margin-bottom: 12px;
}

.paywall-title {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.paywall-text {
	margin-top: 8px;
	color: var(--text-2);
	font-size: 15px;
	max-width: 420px;
	margin-inline: auto;
}

.paywall-btn {
	display: inline-flex;
	align-items: center;
	margin-top: 18px;
	height: 46px;
	padding: 0 28px;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
}

.paywall-btn:hover {
	background: var(--brand-dark);
}

.article-content.is-locked {
	-webkit-mask-image: none;
}

/* ============ Liputan Khusus (hero) ============ */
.lipsus-header {
	position: relative;
	overflow: hidden;
	background: var(--brand-ink);
	color: #fff;
	padding-block: 46px 40px;
	margin-bottom: 8px;
}

.lipsus-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 15%, rgba(254, 142, 0, 0.38), transparent 55%);
}

.lipsus-header .container {
	position: relative;
}

.lipsus-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #ffab4d;
}

.lipsus-kicker .live-dot {
	background: #ffab4d;
}

.lipsus-title {
	margin-top: 10px;
	font-size: 38px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.lipsus-desc {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	max-width: 640px;
}

.lipsus-count {
	margin-top: 14px;
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 720px) {
	.lipsus-title {
		font-size: 27px;
	}
}

/* ============ Tombol notifikasi ============ */
.footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* Keterangan tanggung jawab redaksi — lebih redup dari baris hak cipta agar
   hierarkinya jelas, bukan dua kalimat berbobot sama. opacity dipakai supaya
   redupnya relatif terhadap warna teks yang berlaku, bukan nilai gelap yang dipatok. */
.footer-bottom-note {
	color: var(--footer-fg);
	opacity: 0.72;
}

.notif-btn {
	border: 1px solid var(--footer-line);
	background: var(--bg);
	color: var(--footer-strong);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease;
}

/* Sebelumnya border teal #3cc7d0 + teks putih — sisa era footer gelap. Di latar
   terang teks putih hilang saat hover, dan teal bentrok dengan oranye merek. */
.notif-btn:hover {
	border-color: var(--brand);
	background: var(--brand-tint);
	color: var(--brand-dark);
}

.notif-btn:disabled {
	cursor: default;
	opacity: 0.7;
}

/* .footer-bottom-actions dihapus — tombol notifikasi & instal kini berada di
   kolom "Ikuti kami" (.footer-actions), bukan di baris hak cipta. */

.install-btn {
	border-color: var(--brand);
	color: var(--footer-strong);
}

/* ============ Persetujuan cookie ============ */
/* ============ Persetujuan cookie (modal) ============
   Dulu bar melebar di dasar layar. Sekarang modal terpusat dengan backdrop:
   keputusannya jadi eksplisit, tidak mudah terlewat seperti bar yang menyatu
   dengan footer.

   Halaman di belakang TIDAK dikunci scroll-nya — menahan pembaca sampai menekan
   tombol adalah pola gelap, dan backdrop sudah cukup menyatakan modalitas.
   Kalau ingin benar-benar memblokir, tinggal tambahkan penguncian di js/main.js. */
/* Bar di dasar layar seperti semula. Yang berubah hanya susunan isinya:
   ikon — [judul + keterangan] — tombol, bukan satu paragraf panjang lalu tombol. */
.cookie-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2500;
	/* Terang, bukan cokelat gelap. Bar ini muncul di atas konten yang sedang dibaca;
	   bidang gelap besar di dasar layar terasa memblokir, sedangkan panel terang
	   dengan bayangan ke atas terbaca sebagai lapisan di atas halaman. */
	background: var(--bg);
	color: var(--text-2);
	border-top: 1px solid var(--line);
	box-shadow: 0 -12px 32px -20px rgba(34, 29, 24, 0.35);
	transform: translateY(120%);
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-consent.is-visible {
	transform: translateY(0);
}

/* Tiga zona: ikon (lebar tetap), teks (mengisi sisa), tombol (lebar tetap). */
.cookie-inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	padding-block: 16px;
}

.cookie-badge {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--brand-tint);
	color: var(--brand-dark);
}

.cookie-title {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--text);
	margin-bottom: 2px;
}

.cookie-text {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text-2);
	max-width: 760px;
}

.cookie-text a {
	color: var(--brand-dark);
	font-weight: 700;
	text-decoration: underline;
}

.cookie-accept {
	height: 42px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background 0.2s ease,
		transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.28s ease;
}

.cookie-accept:hover,
.cookie-accept:focus-visible {
	background: var(--brand-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 22px -12px rgba(217, 120, 0, 0.9);
}

.cookie-accept:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Di layar sempit tiga zona tidak muat sejajar: ikon + judul tetap sebaris,
   keterangan turun, tombol melebar penuh. */
@media (max-width: 700px) {
	.cookie-inner {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 10px 14px;
	}

	.cookie-copy {
		grid-column: 2;
	}

	.cookie-accept {
		grid-column: 1 / -1;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cookie-consent,
	.cookie-accept {
		transition: none;
	}
}

/* ============ Untuk Anda (feed personal) ============ */
.foryou-cta,
.foryou-suggest {
	padding-block: 22px 44px;
}

.foryou-cta .paywall-btn {
	margin-top: 4px;
}

.chan-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

.chan-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 11px 9px 13px;
	border: 1px solid var(--line);
	border-radius: 999px;
}

.chan-chip-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
}

.chan-chip-link:hover {
	color: var(--brand-dark);
}

.chan-chip .chan-avatar {
	width: 26px;
	height: 26px;
	font-size: 12px;
}

.chan-chip .follow-btn {
	height: 30px;
	padding: 0 13px;
	font-size: 12px;
}

.foryou-channels {
	margin-block: 30px 8px;
}

.foryou-feed {
	margin-top: 34px;
}

/* ============ Jajak pendapat (polling) ============ */
.poll {
	margin: 34px 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 22px 24px;
	background: var(--bg-soft);
	font-family: var(--font-ui);
}

.poll-label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand-dark);
}

.poll-question {
	margin-top: 6px;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.poll-options {
	margin-top: 18px;
	display: grid;
	gap: 10px;
}

.poll-option {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 10px 16px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: var(--bg);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--text);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.18s ease;
}

.poll-option:hover:not(:disabled) {
	border-color: var(--brand);
}

.poll-option:disabled {
	cursor: default;
}

.poll-opt-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: var(--brand-tint);
	transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 0;
}

.poll-option.is-chosen {
	border-color: var(--brand);
}

.poll-option.is-chosen .poll-opt-fill {
	background: var(--brand-ghost);
}

.poll-opt-label {
	position: relative;
	z-index: 1;
	flex: 1;
}

.poll-opt-pct {
	position: relative;
	z-index: 1;
	font-weight: 800;
	color: var(--brand-dark);
	font-variant-numeric: tabular-nums;
}

.poll-total {
	margin-top: 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-3);
}

/* ============ Rangkuman cerdas (TL;DR) ============ */
.summary-box {
	margin-top: 24px;
	border: 1px solid var(--brand-ghost);
	border-left: 4px solid var(--brand);
	border-radius: var(--radius-lg);
	background: var(--brand-tint);
	padding: 18px 22px;
	font-family: var(--font-ui);
}

.summary-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--brand-dark);
}

.summary-list {
	margin-top: 12px;
	display: grid;
	gap: 9px;
}

.summary-list li {
	position: relative;
	padding-left: 22px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--text);
}

.summary-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--brand);
}

/* ============ Dengarkan (text-to-speech) ============ */
.tts-bar {
	margin-top: 22px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.tts-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 44px;
	padding: 0 20px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg);
	color: var(--text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.tts-btn:hover {
	border-color: var(--brand);
	color: var(--brand-dark);
}

.tts-btn .tts-ico-pause {
	display: none;
}

.tts-bar.is-playing:not(.is-paused) .tts-btn {
	border-color: var(--brand);
	color: var(--brand-dark);
}

.tts-bar.is-playing:not(.is-paused) .tts-ico-play {
	display: none;
}

.tts-bar.is-playing:not(.is-paused) .tts-ico-pause {
	display: block;
}

.tts-stop {
	height: 44px;
	padding: 0 14px;
	border: 0;
	background: transparent;
	color: var(--text-3);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
}

.tts-stop:hover {
	color: #c0392b;
}

/* ============ Galeri foto ============ */
.gallery {
	margin: 34px auto;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.gallery-item {
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	background: var(--bg-soft);
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.gallery-item:hover img {
	transform: scale(1.06);
}

.gallery-count {
	margin-top: 10px;
	font-size: 13px;
	color: var(--text-3);
	font-weight: 600;
}

.gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 30px;
	background: rgba(10, 7, 4, 0.94);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease, visibility 0.28s ease;
}

.gallery-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.gallery-full {
	max-width: calc(100vw - 160px);
	max-height: 88vh;
	border-radius: 10px;
}

.gallery-close {
	position: absolute;
	top: 22px;
	right: 26px;
}

.gallery-close,
.gallery-nav {
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	transition: background 0.18s ease;
}

.gallery-close:hover,
.gallery-nav:hover {
	background: rgba(255, 255, 255, 0.26);
}

.gallery-counter {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	font-weight: 700;
}

@media (max-width: 600px) {
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery-full {
		max-width: calc(100vw - 24px);
	}

	.gallery-nav {
		position: absolute;
		bottom: 20px;
	}

	.gallery-prev {
		left: 20px;
	}

	.gallery-next {
		right: 20px;
	}
}

/* ============ Peringkat kanal ============ */
.rank-list {
	margin-block: 30px 60px;
	display: grid;
	gap: 10px;
}

.rank-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.rank-1,
.rank-2,
.rank-3 {
	border-color: var(--brand-ghost);
}

.rank-num {
	width: 32px;
	flex-shrink: 0;
	text-align: center;
	font-size: 20px;
	font-weight: 800;
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
}

.rank-1 .rank-num {
	color: #e0a92e;
}

.rank-2 .rank-num {
	color: #9aa0a6;
}

.rank-3 .rank-num {
	color: #cd7f32;
}

.rank-channel {
	display: flex;
	align-items: center;
	gap: 13px;
	flex: 1;
	min-width: 0;
}

.rank-avatar {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	flex-shrink: 0;
	background: var(--brand);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 20px;
	font-weight: 800;
}

.rank-info {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.rank-name {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 15.5px;
	font-weight: 800;
	color: var(--text);
}

.rank-channel:hover .rank-name {
	color: var(--brand-dark);
}

.rank-sub {
	font-size: 12.5px;
	color: var(--text-3);
}

.rank-followers {
	font-size: 13.5px;
	color: var(--text-2);
	flex-shrink: 0;
}

.rank-followers strong {
	color: var(--text);
}

@media (max-width: 560px) {
	.rank-followers {
		display: none;
	}

	.rank-item .follow-btn {
		display: none;
	}
}

/* ============ Kirim tulisan (opini) ============ */
.submit-composer {
	position: relative;
	margin-block: 0 64px;
	padding: 24px;
	display: grid;
	gap: 18px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background:
		linear-gradient(135deg, rgba(252, 238, 226, 0.72), rgba(255, 255, 255, 0) 38%),
		var(--bg);
	box-shadow: 0 22px 60px -42px rgba(85, 48, 16, 0.48);
}

.composer-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--bg);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.02);
}

.composer-steps button {
	appearance: none;
	width: 100%;
	height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-right: 1px solid var(--line);
	background: transparent;
	color: var(--text-3);
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.composer-steps li:last-child button {
	border-right: 0;
}

.composer-steps span {
	width: 22px;
	height: 22px;
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 11px;
	color: inherit;
}

.composer-steps button.is-active {
	background: var(--brand-tint);
	/* --brand-ink, bukan --text: di mode gelap --brand-tint menjadi cokelat gelap
	   sedangkan --text menerang, sehingga teks di atasnya terukur 1,35:1.
	   Pasangan tint/ink memang dirancang saling kontras di kedua mode. */
	color: var(--brand-text);
}

.composer-steps button.is-done span,
.composer-steps button.is-active span {
	border-color: var(--brand);
	background: var(--brand);
	color: #fff;
}

.composer-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
	align-items: start;
}

.composer-main {
	min-width: 0;
}

.composer-panel {
	display: grid;
	gap: 20px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.78);
	box-shadow: var(--shadow-soft);
}

.composer-panel[hidden] {
	display: none;
}

.composer-panel-head {
	display: grid;
	gap: 4px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.composer-eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-text);
}

.composer-panel h2 {
	font-size: 26px;
	line-height: 1.16;
	letter-spacing: 0;
}

.submit-form .field,
.field-grid {
	display: grid;
	gap: 8px;
}

.field-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.submit-form label {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--text-2);
}

.submit-form input[type="text"],
.submit-form input[type="url"],
.submit-form select,
.submit-form textarea {
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 13px 15px;
	box-shadow: none;
}

.field-opt {
	font-weight: 500;
	color: var(--text-3);
	font-size: 13px;
}

.submit-form input[type="file"] {
	width: 100%;
	font-family: inherit;
	font-size: 14px;
	color: var(--text-2);
	background: var(--bg-soft);
	border: 1px dashed var(--brand-ghost);
	border-radius: var(--radius);
	padding: 12px 14px;
	cursor: pointer;
}

.submit-form input[type="file"]::file-selector-button {
	font-family: inherit;
	font-weight: 800;
	color: #fff;
	background: var(--brand);
	border: 0;
	border-radius: 999px;
	padding: 8px 15px;
	margin-right: 12px;
	cursor: pointer;
}

.composer-file-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
}

.composer-cover-drop {
	display: grid;
	grid-template-columns: 172px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 14px;
	border: 1px dashed var(--brand-ghost);
	border-radius: 14px;
	background: linear-gradient(180deg, var(--bg), var(--bg-soft));
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.composer-cover-drop:hover {
	border-color: var(--brand);
	background: var(--brand-tint);
	transform: translateY(-1px);
}

.composer-cover-drop.has-file {
	border-style: solid;
	border-color: var(--brand);
	background: var(--bg);
}

.composer-cover-art {
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 10px;
	background: var(--brand-tint);
	color: var(--brand-dark);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.composer-cover-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.composer-cover-copy {
	display: grid;
	gap: 5px;
	min-width: 0;
}

.composer-cover-copy strong {
	color: var(--text);
	font-size: 14px;
}

.composer-cover-copy small {
	color: var(--text-2);
	font-size: 12.5px;
	line-height: 1.45;
}

.composer-cover-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}

.submit-form textarea {
	line-height: 1.6;
	resize: vertical;
}

.composer-editor {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--bg);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.composer-editor.is-focused {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(254, 142, 0, 0.12);
}

.composer-editor-toolbar {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	overflow-x: auto;
	padding: 9px 10px;
	border-bottom: 1px solid var(--line);
	background: color-mix(in srgb, var(--bg) 92%, var(--brand-tint));
	scrollbar-width: none;
}

.composer-editor-toolbar::-webkit-scrollbar {
	display: none;
}

.composer-editor-toolbar button {
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--text-2);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.composer-editor-toolbar button:hover,
.composer-editor-toolbar button.is-active {
	border-color: var(--brand-ghost);
	background: var(--brand-tint);
	color: var(--brand-dark);
}

.composer-editor-divider {
	width: 1px;
	height: 20px;
	flex: 0 0 auto;
	background: var(--line);
}

.composer-editor-surface {
	min-height: 300px;
	padding: 22px 24px 26px;
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 1.78;
	color: var(--text);
	outline: none;
}

.composer-editor-surface:empty::before {
	content: attr(data-placeholder);
	color: var(--text-3);
	pointer-events: none;
}

.composer-editor-surface p,
.composer-editor-surface h2,
.composer-editor-surface blockquote,
.composer-editor-surface ul,
.composer-editor-surface ol {
	margin: 0 0 18px;
}

.composer-editor-surface h2 {
	font-family: var(--font-sans);
	font-size: 24px;
	line-height: 1.25;
}

.composer-editor-surface blockquote {
	padding-left: 16px;
	border-left: 3px solid var(--brand);
	color: var(--text-2);
}

.composer-editor-surface ul,
.composer-editor-surface ol {
	padding-left: 24px;
}

.composer-editor-surface a {
	color: var(--brand-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.composer-editor-surface figure {
	margin: 24px 0;
}

.composer-editor-surface img {
	width: 100%;
	max-width: 100%;
	max-height: 420px;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
	background: var(--bg-soft);
}

.composer-editor-surface figcaption {
	margin-top: 8px;
	color: var(--text-3);
	font-family: var(--font-ui);
	font-size: 13px;
	line-height: 1.45;
}

.composer-editor-surface figcaption[data-placeholder] {
	min-height: 42px;
	display: flex;
	align-items: center;
	padding: 8px 14px;
	border: 1px dashed var(--line);
	border-radius: 0;
	outline: none;
}

.composer-editor-surface figcaption[data-placeholder]:empty::before {
	content: attr(data-placeholder);
	color: #dedede;
	pointer-events: none;
}

.composer-editor-surface figcaption[data-placeholder]:focus {
	border-color: var(--brand-ghost);
	box-shadow: 0 0 0 3px rgba(254, 142, 0, 0.08);
}

.composer-editor-source {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
}

#tulis-ringkasan {
	min-height: 110px;
}

.submit-form input:focus,
.submit-form select:focus,
.submit-form textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(254, 142, 0, 0.12);
}

.field-hint {
	font-size: 12.5px;
	/* --text-3 di atas putih hanya 2,8:1 — di bawah ambang AA meski teks bantu.
	   --text-2 memberi 6,3:1 dan tetap terbaca sekunder. */
	color: var(--text-2);
}

.field-hint a,
.composer-consent a {
	color: var(--brand-dark);
	text-decoration: underline;
}

.composer-side {
	position: sticky;
	top: 92px;
	display: grid;
	gap: 14px;
}

.composer-preview {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg);
	box-shadow: var(--shadow-soft);
}

.composer-preview-thumb {
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	background: var(--bg-soft);
	color: var(--text-3);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.composer-preview-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.composer-preview-body {
	display: grid;
	gap: 10px;
	padding: 16px;
}

.composer-preview-chip {
	width: max-content;
	max-width: 100%;
	padding: 4px 8px;
	border-radius: 5px;
	background: var(--brand-tint);
	color: var(--brand-dark);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

.composer-preview h3 {
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0;
}

.composer-preview p {
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-2);
}

.composer-checklist {
	display: grid;
	gap: 8px;
}

.composer-checklist li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	/* Naik dari --text-3 (3,2:1) ke --text-2 (6,3:1) — daftar kesiapan ini justru
	   perlu terbaca, bukan sekadar hiasan. */
	color: var(--text-2);
}

.composer-checklist li::before {
	content: "";
	width: 13px;
	height: 13px;
	flex: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg);
}

.composer-checklist li.is-ready {
	color: var(--text-2);
}

.composer-checklist li.is-ready::before {
	border-color: var(--brand);
	background: var(--brand);
	box-shadow: inset 0 0 0 3px var(--bg);
}

.composer-review-box {
	display: grid;
	gap: 18px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-soft);
	color: var(--text-2);
}

.composer-review-box p {
	font-size: 14px;
	line-height: 1.55;
}

.composer-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 700;
	color: var(--text);
}

.composer-consent input {
	margin-top: 3px;
}

.submit-actions {
	position: sticky;
	bottom: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 -24px -24px;
	padding: 14px 24px;
	border-top: 1px solid var(--line);
	border-radius: 0 0 18px 18px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
}

.submit-btn,
.composer-nav-btn {
	appearance: none;
	height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.submit-btn {
	border: 0;
	background: var(--brand);
	color: #fff;
}

.composer-nav-btn {
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--text-2);
}

.submit-btn:hover {
	background: var(--brand-dark);
}

.composer-nav-btn:hover {
	border-color: var(--brand);
	color: var(--brand-dark);
}

.submit-btn:disabled,
.composer-nav-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.submit-msg {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--text-2);
}

.submit-msg.is-ok {
	color: var(--brand-dark);
}

.submit-msg.is-err {
	color: #c0392b;
}

.submit-msg:empty {
	display: none;
}

html.theme-dark .submit-composer {
	background:
		linear-gradient(135deg, rgba(92, 61, 24, 0.34), rgba(21, 18, 13, 0) 42%),
		var(--bg);
}

html.theme-dark .composer-panel,
html.theme-dark .submit-actions {
	background: rgba(21, 18, 13, 0.88);
}

@media (max-width: 860px) {
	.composer-layout {
		grid-template-columns: 1fr;
	}

	.composer-side {
		position: static;
		order: -1;
	}

	.submit-composer {
		padding: 18px;
	}

	.submit-actions {
		margin: 0 -18px -18px;
		padding-inline: 18px;
	}
}

@media (max-width: 560px) {
	.composer-container {
		padding-inline: 16px;
		padding-block: 18px 56px;
	}

	.submit-composer {
		border-radius: 14px;
		padding: 14px;
	}

	.composer-steps {
		gap: 0;
		border-radius: 10px;
	}

	.composer-steps button {
		height: 46px;
		font-size: 12px;
	}

	.composer-steps span {
		display: none;
	}

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

	.composer-panel h2 {
		font-size: 22px;
	}

	.composer-panel {
		padding: 18px;
		border-radius: 12px;
	}

	.composer-cover-drop {
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	.composer-cover-cta {
		width: 100%;
	}

	#tulis-isi {
		min-height: 1px;
	}

	.composer-editor-surface {
		min-height: 260px;
		padding: 18px;
		font-size: 17px;
	}

	.composer-editor-toolbar {
		padding: 8px;
	}

	.composer-editor-toolbar button {
		height: 31px;
		padding-inline: 9px;
	}

	.submit-btn,
	.composer-nav-btn {
		width: 100%;
	}

	.submit-msg {
		width: 100%;
	}

	.submit-actions {
		margin: 0 -14px -14px;
		border-radius: 0 0 14px 14px;
	}
}

/* ============ Fullscreen composer workspace ============ */
.composer-fullscreen-page {
	overflow: hidden;
	background: var(--bg);
}

.composer-fullscreen-page .breaking-alert,
.composer-fullscreen-page .site-header,
.composer-fullscreen-page .ticker,
.composer-fullscreen-page .newsletter,
.composer-fullscreen-page .site-footer,
.composer-fullscreen-page .cookie-consent {
	display: none !important;
}

.composer-fullscreen-page .site-main {
	min-height: 100dvh;
	padding: 0;
}

.composer-container--workspace {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.submit-composer.composer-workspace {
	min-height: 100dvh;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-rows: 62px minmax(0, 1fr);
	gap: 0;
	border: 0;
	border-radius: 0;
	background: var(--bg);
	box-shadow: none;
}

.admin-bar .submit-composer.composer-workspace {
	min-height: calc(100dvh - 32px);
}

.admin-bar.composer-fullscreen-page .site-main {
	min-height: calc(100dvh - 32px);
	padding-top: 0;
}

.admin-bar .composer-topbar {
	top: 32px;
}

.composer-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	min-width: 0;
	height: 62px;
	border-bottom: 1px solid var(--line);
	background: var(--bg);
}

.composer-back {
	width: 62px;
	height: 62px;
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	border-right: 1px solid var(--line);
	color: var(--text);
	font-size: 28px;
	line-height: 1;
}

.composer-back:hover {
	color: var(--brand-dark);
}

.composer-topbar-tools {
	position: static;
	flex: 0 1 auto;
	min-width: 0;
	height: 62px;
	padding: 0 18px;
	border: 0;
	background: transparent;
}

.submit-form .composer-format-select,
.composer-format-select {
	width: 144px;
	min-width: 144px;
	height: 36px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 4px;
	padding: 0 10px;
	background: transparent;
	color: var(--text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	box-shadow: none;
	cursor: pointer;
}

.composer-format-select:focus {
	outline: none;
	box-shadow: none;
}

.composer-topbar-tools button {
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 4px;
	font-size: 15px;
	color: var(--text);
}

.composer-topbar-tools button:hover,
.composer-topbar-tools button.is-active {
	background: var(--bg-soft);
	border-color: transparent;
	color: var(--brand-dark);
}

.composer-topbar-tools .composer-upload-tool {
	width: auto;
	gap: 7px;
	padding: 0 12px;
}

.composer-upload-tool span:last-child {
	font-size: 12.5px;
	font-weight: 800;
}

.composer-underlined {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.composer-topbar-spacer {
	flex: 1 1 auto;
	min-width: 20px;
}

.composer-viewer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 16px;
	color: var(--text-2);
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}

.composer-viewer-dot {
	width: 18px;
	height: 18px;
	border: 2px solid #22a55a;
	border-radius: 999px;
	box-shadow: 8px 4px 0 -5px #22a55a, -8px 4px 0 -5px #22a55a;
}

.composer-submit-top {
	width: auto;
	min-width: 76px;
	flex: 0 0 auto;
	height: 38px;
	margin-right: 18px;
	padding: 0 24px;
	border-radius: 5px;
	background: var(--brand);
	font-size: 13px;
}

.composer-workspace-body {
	height: calc(100dvh - 62px);
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	background: var(--bg);
}

.admin-bar .composer-workspace-body {
	height: calc(100dvh - 94px);
}

.composer-canvas {
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	padding: 88px clamp(40px, 7vw, 120px) 96px;
}

.composer-canvas > * {
	width: 100%;
	max-width: 760px;
	margin-inline: auto;
}

.composer-title-input {
	min-height: 74px;
	display: block;
	overflow: hidden;
	resize: none;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--text);
	font-family: var(--font-ui);
	font-size: 46px !important;
	font-weight: 800;
	line-height: 1.14 !important;
	letter-spacing: 0;
}

.composer-title-input::placeholder {
	color: #ececec;
	opacity: 1;
}

.composer-editor--workspace {
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.composer-editor--workspace.is-focused {
	border-color: transparent;
	box-shadow: none;
}

.composer-editor--workspace .composer-editor-surface {
	min-height: 560px;
	padding: 28px 0 0;
	font-size: 22px;
	line-height: 1.78;
	color: var(--text);
}

.composer-editor--workspace .composer-editor-surface:empty::before {
	color: #eeeeee;
}

.composer-editor--workspace .composer-editor-surface h2 {
	font-size: 30px;
	line-height: 1.24;
}

.composer-editor--workspace .composer-editor-surface pre {
	overflow-x: auto;
	padding: 16px;
	border-radius: 8px;
	background: var(--bg-soft);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 15px;
	line-height: 1.6;
}

.composer-inspector {
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	border-left: 1px solid var(--line);
	background: var(--bg);
}

.composer-status-panel {
	display: grid;
	gap: 10px;
	padding: 22px 20px 20px;
	border-bottom: 1px solid var(--line);
}

.composer-status-panel p {
	font-size: 15px;
	font-weight: 700;
	color: var(--text);
}

.composer-status-panel strong {
	color: #df2145;
}

.composer-status-panel > span {
	color: var(--text-3);
	font-size: 13px;
}

.composer-counts {
	display: grid;
	gap: 4px;
	margin-top: 4px;
	color: var(--text-2);
	font-size: 13px;
	line-height: 1.4;
}

.composer-inspector-section {
	display: grid;
	gap: 10px;
	padding: 20px;
	border-bottom: 1px solid var(--line);
}

.composer-inspector-section h2 {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	color: var(--text);
	font-size: 14px;
	font-weight: 900;
	line-height: 1.2;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.composer-inspector-section h2::after {
	content: "^";
	margin-left: auto;
	color: var(--text);
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
}

.composer-inspector-section h2 span {
	color: #df2145;
	text-decoration: none;
}

.composer-inspector-section p {
	justify-self: end;
	color: var(--text-3);
	font-size: 12px;
	line-height: 1.3;
}

.composer-inspector-section textarea,
.composer-inspector-section input[type="text"],
.composer-inspector-section input[type="url"],
.composer-inspector-section select {
	width: 100%;
	border: 1px solid #bdbdbd;
	border-radius: 4px;
	background: var(--bg);
	color: var(--text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	padding: 10px 12px;
	box-shadow: none;
}

.composer-inspector-section textarea {
	min-height: 104px;
	resize: vertical;
}

.composer-inspector-section select {
	height: 46px;
}

.composer-readonly-channel {
	width: 100%;
	min-height: 46px;
	display: flex;
	align-items: center;
	border: 1px solid #bdbdbd;
	border-radius: 4px;
	background: var(--bg-soft);
	color: var(--text);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.5;
	padding: 10px 12px;
}

.composer-cover-drop--side {
	grid-template-columns: 94px minmax(0, 1fr);
	gap: 12px;
	padding: 10px;
	border-radius: 8px;
}

.composer-cover-drop--side .composer-cover-art {
	aspect-ratio: 1 / 1;
	border-radius: 6px;
}

.composer-cover-drop--side .composer-cover-copy small {
	display: block;
}

.composer-cover-drop--side .composer-cover-cta {
	grid-column: 1 / -1;
	min-height: 36px;
	border-radius: 5px;
}

.composer-inspector .composer-consent {
	align-items: flex-start;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
}

.composer-inspector .composer-checklist {
	padding: 18px 20px;
	border-bottom: 1px solid var(--line);
}

.composer-inspector .submit-msg {
	display: block;
	padding: 16px 20px 22px;
	font-size: 13px;
	line-height: 1.45;
}

.composer-inspector .submit-msg:empty {
	display: none;
}

html.theme-dark .composer-title-input::placeholder,
html.theme-dark .composer-editor--workspace .composer-editor-surface:empty::before {
	color: rgba(255, 255, 255, 0.16);
}

html.theme-dark .composer-topbar,
html.theme-dark .composer-workspace-body,
html.theme-dark .composer-inspector,
html.theme-dark .submit-composer.composer-workspace {
	background: var(--bg);
}

html.theme-dark .composer-inspector-section textarea,
html.theme-dark .composer-inspector-section input[type="text"],
html.theme-dark .composer-inspector-section input[type="url"],
html.theme-dark .composer-inspector-section select {
	border-color: var(--line);
	background: var(--bg-soft);
}

@media (max-width: 980px) {
	.composer-fullscreen-page {
		overflow: auto;
	}

	.submit-composer.composer-workspace {
		min-height: 100dvh;
	}

	.composer-topbar {
		overflow: hidden;
	}

	.composer-topbar-tools {
		flex: 1 1 auto;
		overflow-x: auto;
	}

	.composer-viewer {
		display: none;
	}

	.composer-topbar-spacer {
		display: none;
	}

	.composer-workspace-body {
		height: auto;
		grid-template-columns: 1fr;
	}

	.composer-canvas {
		min-height: 72dvh;
		padding: 58px 24px 70px;
	}

	.composer-inspector {
		overflow: visible;
		border-left: 0;
		border-top: 1px solid var(--line);
	}
}

@media (max-width: 560px) {
	.composer-topbar {
		height: 56px;
	}

	.composer-back {
		width: 54px;
		height: 56px;
		font-size: 24px;
	}

	.composer-topbar-tools {
		height: 56px;
		padding-inline: 10px;
	}

	.composer-format-select {
		width: 116px;
		min-width: 116px;
		font-size: 13px;
	}

	.composer-topbar-tools button {
		width: 32px;
		height: 32px;
	}

	.composer-topbar-tools .composer-upload-tool {
		width: 32px;
		padding: 0;
	}

	.composer-upload-tool span:last-child {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.composer-submit-top {
		height: 34px;
		margin-right: 10px;
		padding-inline: 16px;
	}

	.composer-canvas {
		padding: 42px 20px 56px;
	}

	.composer-title-input {
		min-height: 56px;
		font-size: 34px !important;
	}

	.composer-editor--workspace .composer-editor-surface {
		min-height: 440px;
		font-size: 19px;
	}

	.composer-inspector-section,
	.composer-status-panel,
	.composer-inspector .composer-checklist,
	.composer-inspector .submit-msg {
		padding-inline: 18px;
	}
}

@media screen and (max-width: 782px) {
	.admin-bar.composer-fullscreen-page .site-main {
		min-height: calc(100dvh - 46px);
		padding-top: 0;
	}

	.admin-bar .submit-composer.composer-workspace {
		min-height: calc(100dvh - 46px);
	}

	.admin-bar .composer-topbar {
		top: 46px;
	}

	.admin-bar .composer-workspace-body {
		height: auto;
	}
}

/* PatriotPost Studio: editor opini yang lebih original dan SEO-ready. */
.submit-composer.composer-workspace {
	grid-template-rows: 74px minmax(0, 1fr);
	background: #f5f3ee;
}

.admin-bar .submit-composer.composer-workspace {
	min-height: calc(100dvh - 32px);
}

.composer-topbar {
	height: 74px;
	gap: 12px;
	padding-right: 18px;
	border-bottom-color: #e7ded2;
	background:
		linear-gradient(90deg, rgba(254, 142, 0, 0.1), rgba(13, 94, 88, 0.06)),
		#fffaf3;
	box-shadow: 0 16px 34px -30px rgba(63, 39, 17, 0.55);
}

.composer-back {
	width: 74px;
	height: 74px;
	border-right-color: #e7ded2;
	color: #1d211d;
	font-size: 25px;
}

.composer-brand-chip {
	min-width: 210px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	padding-right: 4px;
	color: #1f2521;
}

.composer-brand-mark {
	width: 38px;
	height: 38px;
	display: inline-grid;
	place-items: center;
	border-radius: 8px;
	background: #1f342f;
	color: #fff7ed;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0;
	box-shadow: inset 4px 0 0 #fe8e00;
}

.composer-brand-text {
	display: grid;
	gap: 1px;
	line-height: 1.1;
}

.composer-brand-text strong {
	font-size: 14px;
	font-weight: 900;
}

.composer-brand-text small {
	color: #7b6f63;
	font-size: 11.5px;
	font-weight: 800;
}

.composer-topbar-tools {
	height: 46px;
	max-width: min(58vw, 760px);
	padding: 5px 8px;
	border: 1px solid #e6d9ca;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.84);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.submit-form .composer-format-select,
.composer-format-select {
	height: 34px;
	border-radius: 6px;
	color: #26302b;
}

.composer-topbar-tools button {
	border-radius: 6px;
	color: #26302b;
}

.composer-topbar-tools button:hover,
.composer-topbar-tools button.is-active {
	background: #fff0df;
	color: #d97800;
}

.composer-topbar-tools .composer-upload-tool {
	background: #1f342f;
	color: #fff7ed;
}

.composer-topbar-tools .composer-upload-tool:hover {
	background: #2c4a43;
	color: #fff7ed;
}

.composer-viewer {
	color: #4d5a52;
}

.composer-submit-top {
	border-radius: 8px;
	background: #fe8e00;
	box-shadow: 0 12px 24px -18px rgba(217, 120, 0, 0.8);
}

.composer-workspace-body {
	height: calc(100dvh - 74px);
	grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
	background:
		linear-gradient(90deg, rgba(31, 52, 47, 0.045) 0 1px, transparent 1px),
		#f5f3ee;
	background-size: 32px 32px;
}

.admin-bar .composer-workspace-body {
	height: calc(100dvh - 106px);
}

.composer-canvas {
	position: relative;
	padding: clamp(58px, 7vh, 92px) clamp(32px, 7vw, 112px) 112px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36)),
		#f7f5ef;
}

.composer-canvas::before {
	content: "";
	position: fixed;
	top: 74px;
	left: 0;
	bottom: 0;
	width: 5px;
	background: linear-gradient(180deg, #fe8e00, #1f342f);
}

.admin-bar .composer-canvas::before {
	top: 106px;
}

.composer-canvas > * {
	max-width: 790px;
	margin-inline: 0 auto;
}

.composer-title-input {
	color: #171a16;
	font-size: clamp(38px, 4vw, 54px) !important;
	line-height: 1.08 !important;
	text-wrap: balance;
}

.composer-title-input::placeholder {
	color: #cfc8bd;
}

.composer-editor--workspace .composer-editor-surface {
	min-height: 560px;
	padding-top: 24px;
	color: #24211e;
	font-size: 22px;
	line-height: 1.82;
}

.composer-editor--workspace .composer-editor-surface:empty::before {
	color: #cfc8bd;
}

.composer-editor-surface figure.composer-inline-figure {
	position: relative;
	margin: 30px 0;
	padding-top: 4px;
}

.composer-editor-surface figure.composer-inline-figure.is-wide {
	margin-inline: -38px;
}

.composer-editor-surface figure.composer-inline-figure.is-selected img {
	outline: 3px solid rgba(254, 142, 0, 0.55);
	outline-offset: 3px;
}

.composer-editor-surface .composer-image-menu {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 4;
	display: none;
	align-items: center;
	gap: 6px;
	padding: 6px;
	border: 1px solid rgba(31, 52, 47, 0.1);
	border-radius: 8px;
	background: rgba(255, 250, 243, 0.96);
	box-shadow: 0 18px 38px -24px rgba(45, 31, 18, 0.55);
}

.composer-editor-surface figure.composer-inline-figure:hover .composer-image-menu,
.composer-editor-surface figure.composer-inline-figure.is-selected .composer-image-menu {
	display: inline-flex;
}

.composer-editor-surface .composer-image-menu button {
	height: 32px;
	border: 0;
	border-radius: 6px;
	padding: 0 10px;
	background: transparent;
	color: #26302b;
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
}

.composer-editor-surface .composer-image-menu button:hover {
	background: #1f342f;
	color: #fff7ed;
}

.composer-editor-surface .composer-image-menu button[data-image-action="cover"] {
	background: #0d7b72;
	color: #ffffff;
}

.composer-editor-surface figcaption[data-placeholder] {
	border-color: #ded3c6;
	background: rgba(255, 250, 243, 0.72);
	color: #675d53;
	font-family: var(--font-ui);
}

.composer-inspector {
	border-left-color: #e3d9cb;
	background: #fbfaf6;
}

.composer-status-panel {
	margin: 14px 14px 0;
	border: 0;
	border-radius: 8px;
	background: #1f342f;
	color: #fff7ed;
}

.composer-status-panel p,
.composer-status-panel > span,
.composer-counts {
	color: inherit;
}

.composer-status-panel strong {
	color: #ffb067;
}

.composer-inspector-section {
	margin: 0 14px;
	padding: 18px 0;
	border-bottom-color: #e8dfd3;
}

.composer-inspector-section h2 {
	color: #4c4338;
	font-size: 13px;
	font-weight: 900;
	text-decoration: none;
}

.composer-inspector-section h2::after {
	content: "";
	width: 18px;
	height: 2px;
	margin-left: auto;
	border-radius: 999px;
	background: #fe8e00;
}

.composer-inspector-section label {
	color: #675d53;
	font-size: 12.5px;
	font-weight: 850;
	line-height: 1.35;
}

.composer-inspector-section textarea,
.composer-inspector-section input[type="text"],
.composer-inspector-section input[type="url"],
.composer-inspector-section select,
.composer-readonly-channel {
	border-color: #ded3c6;
	border-radius: 8px;
	background: #fffefa;
	color: #1d211d;
}

.composer-inspector-section textarea:focus,
.composer-inspector-section input[type="text"]:focus,
.composer-inspector-section input[type="url"]:focus {
	border-color: #fe8e00;
	box-shadow: 0 0 0 4px rgba(254, 142, 0, 0.12);
	outline: none;
}

.composer-seo-preview {
	display: block;
	overflow: hidden;
	border-left: 3px solid #0d7b72;
	padding: 8px 10px;
	background: #f0f6f4;
	color: #0d5e58;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.composer-cover-drop--side {
	border-color: #efc5a2;
	background: #fff8f0;
}

.composer-cover-cta {
	background: #1f342f;
}

.composer-readonly-channel {
	background: #f0f6f4;
	color: #0d5e58;
}

.composer-inspector .composer-checklist {
	margin: 4px 14px 0;
	padding-inline: 0;
	border-bottom-color: #e8dfd3;
}

.composer-inspector .submit-msg {
	margin: 0 14px;
	padding-inline: 0;
}

html.theme-dark .submit-composer.composer-workspace,
html.theme-dark .composer-workspace-body,
html.theme-dark .composer-canvas,
html.theme-dark .composer-topbar,
html.theme-dark .composer-inspector {
	color: #1d211d;
	background: #f5f3ee;
}

html.theme-dark .composer-topbar {
	border-bottom-color: #e7ded2;
	background:
		linear-gradient(90deg, rgba(254, 142, 0, 0.1), rgba(13, 94, 88, 0.06)),
		#fffaf3;
}

html.theme-dark .composer-canvas {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36)),
		#f7f5ef;
}

html.theme-dark .composer-inspector {
	background: #fbfaf6;
}

html.theme-dark .composer-status-panel {
	background: #1f342f;
	color: #fff7ed;
}

html.theme-dark .composer-brand-chip,
html.theme-dark .composer-back,
html.theme-dark .composer-title-input,
html.theme-dark .composer-editor--workspace .composer-editor-surface,
html.theme-dark .composer-inspector-section h2,
html.theme-dark .composer-inspector-section label {
	color: inherit;
}

html.theme-dark .composer-title-input::placeholder,
html.theme-dark .composer-editor--workspace .composer-editor-surface:empty::before {
	color: #cfc8bd;
}

html.theme-dark .composer-inspector-section p {
	color: #7b6f63;
}

html.theme-dark .composer-inspector-section textarea,
html.theme-dark .composer-inspector-section input[type="text"],
html.theme-dark .composer-inspector-section input[type="url"],
html.theme-dark .composer-inspector-section select,
html.theme-dark .composer-readonly-channel {
	border-color: #ded3c6;
	background: #fffefa;
	color: #1d211d;
}

html.theme-dark .composer-inspector-section textarea::placeholder,
html.theme-dark .composer-inspector-section input::placeholder {
	color: #90867b;
}

html.theme-dark .composer-readonly-channel,
html.theme-dark .composer-seo-preview {
	background: #f0f6f4;
	color: #0d5e58;
}

@media (max-width: 1120px) {
	.composer-brand-chip {
		min-width: auto;
	}

	.composer-brand-text {
		display: none;
	}

	.composer-topbar-tools {
		max-width: none;
	}
}

@media (max-width: 980px) {
	.submit-composer.composer-workspace {
		grid-template-rows: auto minmax(0, 1fr);
	}

	.composer-topbar {
		height: auto;
		min-height: 64px;
		flex-wrap: wrap;
		align-items: center;
		padding: 0 12px 10px 0;
	}

	.composer-back {
		width: 64px;
		height: 64px;
	}

	.composer-brand-chip {
		min-height: 64px;
	}

	.composer-topbar-tools {
		order: 5;
		width: calc(100% - 24px);
		margin-left: 12px;
	}

	.composer-topbar-spacer {
		display: block;
		flex: 1 1 auto;
		min-width: 10px;
	}

	.composer-workspace-body,
	.admin-bar .composer-workspace-body {
		height: auto;
		grid-template-columns: 1fr;
	}

	.composer-canvas::before {
		display: none;
	}

	.composer-canvas > * {
		margin-inline: auto;
	}

	.composer-inspector {
		border-left: 0;
		border-top: 1px solid #e3d9cb;
	}
}

@media (max-width: 560px) {
	.composer-topbar {
		gap: 8px;
	}

	.composer-brand-mark {
		width: 34px;
		height: 34px;
	}

	.composer-topbar-tools {
		height: 44px;
	}

	.composer-canvas {
		padding: 40px 20px 58px;
	}

	.composer-editor-surface figure.composer-inline-figure.is-wide {
		margin-inline: 0;
	}

	.composer-editor-surface .composer-image-menu {
		position: static;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 8px;
	}
}

/* ============ Clean guided composer ============ */
.composer-container--clean {
	max-width: 1180px;
	padding-block: 36px 80px;
}

/*
 * Pemaksaan latar putih di mode gelap DIHAPUS.
 *
 * Blok lama menyetel background:#fff pada body dan .site-main saat mode gelap, lalu
 * menambal warna teks satu per satu. Yang tidak ikut ditambal tetap memakai token
 * mode gelap (terang) di atas putih — placeholder editor dan teks "Unggah cover
 * artikel" terukur 1,18:1, praktis tak terlihat. Hasilnya juga terbelah: area form
 * putih menyala di antara header, newsletter, dan footer yang gelap.
 *
 * Sekarang halaman ini mengikuti tema seperti halaman lain; warnanya datang dari
 * token sehingga kedua mode benar tanpa tambalan.
 */

.composer-flow {
	margin-block: 0 72px;
	padding: 26px 28px 0;
	gap: 22px;
	border-color: var(--line);
	border-radius: 16px;
	background:
		linear-gradient(135deg, var(--brand-tint), transparent 34%),
		var(--bg);
	box-shadow: 0 24px 70px -54px rgba(62, 38, 18, 0.44);
}

.composer-flow .composer-steps {
	border-color: var(--line);
	border-radius: 12px;
	background: var(--bg);
	box-shadow: none;
}

.composer-flow .composer-steps button {
	height: 54px;
	border-right-color: var(--line);
	/* Abu dipatok tidak berbalik di mode gelap — pakai token. */
	color: var(--text-3);
	font-size: 13.5px;
}

.composer-flow .composer-steps button.is-active {
	background: var(--brand-tint);
	/* #161616 dipatok gelap: di mode gelap --brand-tint jadi cokelat gelap juga,
	   sehingga teks gelap di atas latar gelap terukur 1,35:1. */
	color: var(--brand-text);
}

.composer-flow .composer-steps button.is-done {
	color: var(--text-2);
}

.composer-flow .composer-steps span {
	width: 24px;
	height: 24px;
	border-color: #e8e8e8;
	background: var(--bg);
}

.composer-flow .composer-layout {
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 26px;
}

.composer-flow .composer-panel {
	gap: 20px;
	padding: 26px;
	border-color: var(--line);
	border-radius: 14px;
	background: var(--bg);
	box-shadow: none;
}

.composer-flow .composer-panel-head {
	gap: 6px;
	padding-bottom: 14px;
	border-bottom-color: var(--line);
}

.composer-flow .composer-eyebrow {
	color: var(--brand-text);
	letter-spacing: 0.1em;
}

.composer-flow .composer-panel h2 {
	font-size: 28px;
	line-height: 1.14;
}

.composer-flow .field-hint {
	/* #9a9a9a hanya 2,8:1 di atas putih dan tidak berbalik di mode gelap. */
	color: var(--text-2);
}

.composer-flow input[type="text"],
.composer-flow input[type="url"],
.composer-flow textarea,
.composer-flow select,
.composer-flow .composer-readonly-channel {
	border-color: #e8e8e8;
	border-radius: 8px;
	background: var(--bg);
	color: var(--text);
}

.composer-flow textarea::placeholder,
.composer-flow input::placeholder {
	color: #999999;
}

.composer-flow .composer-cover-drop {
	grid-template-columns: 172px minmax(0, 1fr) auto;
	border-color: #ffd9a6;
	border-radius: 12px;
	background: var(--bg);
}

.composer-flow .composer-cover-drop:hover {
	background: var(--brand-tint);
}

.composer-flow .composer-cover-art {
	border-radius: 10px;
	background: var(--brand-tint);
}

.composer-flow .composer-cover-cta {
	border-radius: 999px;
	background: var(--brand);
}

.composer-flow .composer-editor {
	border-color: #e8e8e8;
	border-radius: 12px;
	background: var(--bg);
}

.composer-flow .composer-editor-toolbar {
	position: static;
	top: auto;
	border-bottom-color: var(--line);
	background: var(--bg-soft);
}

.composer-flow .composer-format-select {
	width: 122px;
	min-width: 122px;
	border-radius: 7px;
	color: #161616;
}

.composer-flow .composer-editor-toolbar button {
	color: #4e4e4e;
}

.composer-flow .composer-editor-toolbar .composer-upload-tool {
	width: auto;
	gap: 7px;
	padding-inline: 12px;
	background: #1f342f;
	color: #fff7ed;
}

.composer-flow .composer-editor-surface {
	min-height: 330px;
	font-size: 18px;
	line-height: 1.76;
}

.composer-flow .composer-editor-surface:empty::before {
	color: #9d9d9d;
}

.composer-seo-box {
	display: grid;
	gap: 16px;
	padding: 18px;
	border: 1px solid #f1e2d5;
	border-radius: 14px;
	background: var(--bg-soft);
}

.composer-seo-box .composer-panel-head {
	padding-bottom: 10px;
}

.composer-seo-box h3 {
	font-size: 18px;
	line-height: 1.25;
}

.composer-flow .composer-seo-preview {
	display: block;
	margin-top: 7px;
	overflow: hidden;
	border-left: 3px solid #0d7b72;
	border-radius: 6px;
	padding: 9px 10px;
	background: #f2f8f6;
	color: #0d5e58;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.composer-flow .composer-readonly-channel {
	min-height: 48px;
	background: #f2f8f6;
	color: #0d5e58;
}

.composer-flow .composer-side {
	top: 104px;
	gap: 16px;
}

.composer-flow .composer-preview {
	border-color: var(--line);
	border-radius: 10px;
	box-shadow: 0 18px 42px -34px rgba(35, 35, 35, 0.55);
}

.composer-flow .composer-preview-thumb {
	aspect-ratio: 16 / 10;
	background: #f5f5f5;
	color: #969696;
	font-size: 12px;
}

.composer-flow .composer-preview-chip {
	border-radius: 5px;
	background: var(--brand-tint);
	color: var(--brand-dark);
}

.composer-flow .composer-checklist {
	padding: 2px 0 0;
}

.composer-flow .composer-review-box {
	border-color: var(--line);
	background: #fafafa;
}

.composer-flow .submit-actions {
	margin: 0 -28px;
	padding: 14px 28px;
	border-color: var(--line);
	border-radius: 0 0 16px 16px;
	background: var(--bg);
}

/*
 * Seluruh override `html.theme-dark .composer-flow ...` dihapus.
 *
 * Blok itu memaksa panel, input, editor, dan pratinjau tetap putih saat mode gelap
 * lalu menambal sebagian warna teks. Yang tidak tertambal tetap memakai token mode
 * gelap di atas putih — placeholder editor dan teks cover terukur 1,18:1.
 * Tanpa blok ini seluruh composer memakai --bg / --line / --text yang sudah benar
 * di kedua mode, jadi tidak ada lagi tambalan yang bisa ketinggalan.
 */

@media (max-width: 900px) {
	.composer-flow .composer-layout {
		grid-template-columns: 1fr;
	}

	.composer-flow .composer-side {
		position: static;
		order: -1;
	}
}

@media (max-width: 620px) {
	.composer-container--clean {
		padding-inline: 16px;
		padding-block: 22px 64px;
	}

	.composer-flow {
		padding: 16px 16px 0;
		overflow-x: clip;
	}

	.composer-flow .composer-panel {
		padding: 20px;
	}

	.composer-flow .composer-panel h2 {
		font-size: 24px;
	}

	.composer-flow .composer-cover-drop,
	.composer-flow .field-grid {
		grid-template-columns: 1fr;
	}

	.composer-flow .composer-cover-cta {
		width: 100%;
	}

	.composer-flow .composer-editor-toolbar .composer-upload-tool span:last-child {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.composer-flow .submit-actions {
		margin: 0 -16px;
		padding-inline: 16px;
	}
}

/* ============ Zodiak ============ */
.zodiac-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-block: 30px 60px;
}

.zodiac-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 20px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.zodiac-card:hover {
	border-color: var(--brand-ghost);
	box-shadow: var(--shadow-soft);
}

.zodiac-sym {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 14px;
	display: grid;
	place-items: center;
	font-size: 26px;
	background: var(--brand-tint);
	color: var(--brand-dark);
}

.zodiac-name {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.zodiac-date {
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--brand-dark);
}

.zodiac-text {
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--text-2);
}

@media (max-width: 900px) {
	.zodiac-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.zodiac-grid {
		grid-template-columns: 1fr;
	}
}

/* ============ Progress bar baca ============ */
.read-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1200;
	height: 3px;
	width: 0;
	background: var(--brand);
	transition: width 0.1s linear;
}

.admin-bar .read-progress {
	top: 32px;
}

/* ============ Ukuran teks ============ */
.font-controls {
	display: inline-flex;
	gap: 6px;
	margin-left: auto;
}

.font-btn {
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg);
	color: var(--text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.font-btn small {
	font-size: 10px;
	margin-left: 1px;
}

.font-btn:hover {
	border-color: var(--brand);
	color: var(--brand-dark);
}

/* ============ Cek Fakta ============ */
.factcheck {
	margin-top: 22px;
	border: 1px solid var(--line);
	border-left: 5px solid var(--fc, var(--brand));
	border-radius: var(--radius-lg);
	padding: 18px 22px;
	background: var(--bg-soft);
	font-family: var(--font-ui);
}

.factcheck-head {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fc, var(--brand-dark));
}

.factcheck-claim {
	margin-top: 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--text);
}

.factcheck-verdict {
	margin-top: 12px;
}

.factcheck-stamp {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 8px;
	background: var(--fc, var(--brand));
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.fc-badge {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	border-radius: 5px;
	background: #6941c6;
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ============ Reaksi emoji ============ */
.reactions {
	margin: 32px auto;
	padding: 18px 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	font-family: var(--font-ui);
}

.reactions-label {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--text-2);
}

.reactions-row {
	display: flex;
	gap: 10px;
	margin-left: auto;
	flex-wrap: wrap;
}

.reaction {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg);
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--text-2);
	transition: border-color 0.18s ease, transform 0.12s ease;
}

.reaction:hover {
	border-color: var(--brand);
	transform: translateY(-1px);
}

.reaction-emoji {
	font-size: 19px;
	line-height: 1;
}

.reaction.is-active {
	border-color: var(--brand);
	background: var(--brand-tint);
	color: var(--brand-dark);
}

.reactions.has-reacted .reaction:not(.is-active) {
	opacity: 0.6;
	cursor: default;
}

@media (max-width: 560px) {
	.reactions-row {
		margin-left: 0;
		width: 100%;
	}
}

/* ============ Widget Info Hari Ini ============ */
.util-date {
	font-size: 12.5px;
	color: var(--text-3);
	margin-top: 4px;
}

.util-section {
	padding-block: 14px;
	border-top: 1px solid var(--line);
}

.util-section:first-of-type {
	margin-top: 6px;
}

.util-head {
	font-size: 13px;
	font-weight: 800;
	color: var(--text);
	margin-bottom: 9px;
}

.prayer-times,
.util-kv {
	display: grid;
	gap: 6px;
}

.prayer-times li,
.util-kv li {
	display: flex;
	justify-content: space-between;
	font-size: 13.5px;
	color: var(--text-2);
}

.prayer-times li span:last-child,
.util-kv li span:last-child {
	font-weight: 700;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.util-weather {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.util-temp {
	font-size: 22px;
	font-weight: 800;
	color: var(--text);
}

.util-cond {
	font-size: 13px;
	color: var(--text-2);
}

.util-note {
	margin-top: 10px;
	font-size: 11px;
	color: var(--text-3);
	line-height: 1.4;
}

/* ============ Pencarian pintar (dropdown) ============ */
.search-wrap {
	position: relative;
	width: 100%;
	z-index: 3004;
}

.search-dropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--shadow-soft);
	padding: 8px;
	z-index: 3005;
}

.search-suggest-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.search-suggest-item svg {
	color: var(--text-3);
	flex-shrink: 0;
}

.search-suggest-item:hover {
	background: var(--bg-soft);
	color: var(--brand-dark);
}

.search-popular {
	padding: 10px 12px 6px;
}

.search-suggest:not(:empty) + .search-popular {
	border-top: 1px solid var(--line);
	margin-top: 6px;
}

.search-pop-label {
	display: block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: 9px;
}

.search-pop-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

/* ============ Riwayat baca ============ */
.riwayat-head {
	margin-block: 26px 6px;
}

.riwayat-list {
	display: grid;
	gap: 2px;
	margin-bottom: 60px;
}

.riwayat-item {
	display: block;
	padding: 15px 4px;
	border-bottom: 1px solid var(--line);
	font-size: 15.5px;
	font-weight: 700;
	color: var(--text);
}

.riwayat-item:hover {
	color: var(--brand-dark);
}

.riwayat-list .empty-state {
	padding-block: 30px;
}

/* ============ Kabar Daerah ============ */
.daerah-chips {
	margin-block: 24px 34px;
}

.chip-count {
	display: inline-flex;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--brand-tint);
	color: var(--brand-dark);
	font-size: 11px;
	font-weight: 800;
	margin-left: 3px;
}

.archive-follow {
	margin-top: 16px;
}

/* ============ Infografik ============ */
.info-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--brand-tint);
	color: var(--brand-dark);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.infographic {
	margin: 30px auto;
	text-align: center;
}

.infographic .infographic-item {
	aspect-ratio: auto;
	width: 100%;
	border-radius: 12px;
	display: block;
}

.infographic-item img {
	width: 100%;
	height: auto;
	display: block;
}

.infographic figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: var(--text-3);
	font-weight: 600;
}

/* ============ Verifikasi OTP ============ */
.verify-form {
	margin-block: 30px 60px;
	display: grid;
	gap: 20px;
	max-width: 420px;
}

.verify-form .field {
	display: grid;
	gap: 7px;
}

.verify-form label {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--text-2);
}

.verify-form input {
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 13px 16px;
}

.verify-form input:focus {
	outline: none;
	border-color: var(--brand);
}

.otp-input {
	text-align: center;
	font-size: 26px !important;
	font-weight: 800;
	letter-spacing: 12px;
	padding-left: 12px !important;
}

.verify-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.verify-resend {
	border: 0;
	background: transparent;
	color: var(--brand-dark);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.verify-resend:hover {
	text-decoration: underline;
}

.verify-resend:disabled {
	opacity: 0.6;
	cursor: default;
}

.verify-msg {
	font-size: 13.5px;
	font-weight: 600;
}

.verify-msg.is-ok {
	color: var(--brand-dark);
}

.verify-msg.is-err {
	color: #c0392b;
}

.verify-msg:empty {
	display: none;
}

/* ==========================================================================
   FITUR KOMUNITAS: notifikasi, komentar, seri, kuis, profil, indeks, rekomendasi
   ========================================================================== */

/* ---- Lonceng notifikasi ---- */
.notif-bell {
	position: relative;
	display: inline-flex;
}

.notif-toggle {
	position: relative;
}

.notif-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 17px;
	text-align: center;
	border: 2px solid var(--bg);
}

.notif-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 340px;
	max-width: calc(100vw - 32px);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 44px -16px rgba(40, 22, 8, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
	z-index: 1200;
	overflow: hidden;
}

.notif-bell.open .notif-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.notif-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 16px;
	border-bottom: 1px solid var(--line);
	font-weight: 800;
	font-size: 14.5px;
}

.notif-readall {
	border: 0;
	background: none;
	color: var(--brand-dark);
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
}

.notif-list {
	max-height: 380px;
	overflow-y: auto;
}

.notif-item {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	color: var(--text);
}

.notif-item:hover {
	background: var(--bg-soft);
}

.notif-item.is-unread {
	background: var(--brand-tint);
}

.notif-ico {
	font-size: 17px;
	line-height: 1.3;
	flex-shrink: 0;
}

.notif-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.notif-text {
	font-size: 13.5px;
	line-height: 1.4;
}

.notif-time {
	font-size: 11.5px;
	color: var(--text-3);
}

.notif-empty {
	padding: 26px 16px;
	text-align: center;
	color: var(--text-3);
	font-size: 13.5px;
}

.notif-all {
	display: block;
	padding: 12px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--brand-dark);
	border-top: 1px solid var(--line);
}

/* Halaman notifikasi penuh */
.notif-page-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: 0 0 12px;
}

.notif-page-actions form,
.notif-page-list .notif-item > form {
	margin: 0;
}

.notif-page-actions button {
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--bg);
	color: var(--text);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.notif-page-actions button.is-danger {
	color: #b53a32;
}

.notif-page-list {
	list-style: none;
	margin: 8px 0 40px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.notif-page-list .notif-item:last-child {
	border-bottom: 0;
}

.notif-page-list .notif-item > a {
	display: flex;
	flex: 1;
	gap: 11px;
	min-width: 0;
	color: inherit;
}

.notif-page-list .notif-type {
	color: var(--brand-dark);
	font-size: 10px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.notif-delete {
	display: inline-grid;
	width: 32px;
	height: 32px;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text-3);
	font-size: 22px;
	cursor: pointer;
}

.notif-delete:hover {
	background: var(--bg-soft);
	color: #b53a32;
}

@media (max-width: 560px) {
	.notif-page-actions {
		align-items: stretch;
		flex-direction: column;
	}
	.notif-page-actions button {
		width: 100%;
	}
}

/* ---- Komentar: like + balasan berjenjang ---- */
.comment-list,
.comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list {
	margin: 18px 0 30px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.comment-list .children {
	margin-top: 4px;
	padding-left: 44px;
	border-left: 2px solid var(--line);
	margin-left: 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.jn-comment-body {
	display: flex;
	gap: 12px;
	padding: 14px 0;
}

.jn-comment-avatar {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--brand-tint);
	color: var(--brand-dark);
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 15px;
}

.jn-comment-main {
	min-width: 0;
	flex: 1;
}

.jn-comment-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.jn-comment-author {
	font-weight: 700;
	font-size: 14px;
}

.jn-comment-time {
	font-size: 12px;
	color: var(--text-3);
}

.jn-comment-text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--text);
	margin: 4px 0 8px;
}

.jn-comment-text p {
	margin: 0 0 6px;
}

.jn-comment-moderation {
	font-size: 12.5px;
	color: var(--brand-dark);
	margin: 3px 0;
	font-style: italic;
}

.jn-comment-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.jn-clike {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 0;
	background: none;
	padding: 0;
	color: var(--text-2);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.jn-clike:hover {
	color: var(--brand-dark);
}

.jn-clike.is-liked {
	color: var(--brand);
}

.jn-clike.is-liked svg {
	fill: var(--brand);
	stroke: var(--brand);
}

.jn-comment-actions .comment-reply-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-2);
}

.jn-comment-actions .comment-reply-link:hover {
	color: var(--brand-dark);
}

/* ---- Artikel berseri ---- */
.series-box {
	margin: 26px 0;
	border: 1px solid var(--brand-ghost);
	border-radius: var(--radius-lg);
	background: var(--brand-tint);
	overflow: hidden;
}

.series-head {
	padding: 15px 18px 10px;
}

.series-eyebrow {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand-dark);
}

.series-name {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	margin-top: 3px;
	color: var(--text);
}

.series-list {
	list-style: none;
	margin: 0;
	padding: 0 18px 12px;
	counter-reset: none;
}

.series-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid var(--brand-ghost);
}

.series-num {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--bg);
	color: var(--brand-dark);
	font-size: 12.5px;
	font-weight: 800;
	display: grid;
	place-items: center;
	margin-top: 1px;
}

.series-item.is-current .series-num {
	background: var(--brand);
	color: #fff;
}

.series-title {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--text);
}

a.series-title:hover {
	color: var(--brand-dark);
}

.series-item.is-current .series-title {
	font-weight: 800;
}

.series-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	vertical-align: middle;
}

/* ---- Kuis interaktif ---- */
.quiz {
	margin: 30px 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 22px;
	background: var(--bg);
}

.quiz-eyebrow {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand-dark);
}

.quiz-title {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
	margin: 4px 0 4px;
}

.quiz-sub {
	font-size: 13px;
	color: var(--text-3);
	margin-bottom: 6px;
}

.quiz-q {
	padding: 18px 0;
	border-top: 1px solid var(--line);
}

.quiz-q-text {
	display: flex;
	gap: 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	margin-bottom: 12px;
}

.quiz-q-num {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--brand-tint);
	color: var(--brand-dark);
	font-size: 13px;
	display: grid;
	place-items: center;
}

.quiz-opts {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.quiz-opt {
	text-align: left;
	border: 1.5px solid var(--line);
	background: var(--bg);
	border-radius: 10px;
	padding: 11px 15px;
	font: inherit;
	font-size: 14.5px;
	color: var(--text);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.quiz-opt:hover {
	border-color: var(--brand-ghost);
}

.quiz-opt.is-picked {
	border-color: var(--brand);
	background: var(--brand-tint);
}

.quiz-q.is-done .quiz-opt {
	cursor: default;
}

.quiz-opt.is-correct {
	border-color: #2e9e5b;
	background: rgba(46, 158, 91, 0.12);
	color: #1e7d44;
	font-weight: 700;
}

.quiz-opt.is-wrong {
	border-color: #cf4a3c;
	background: rgba(207, 74, 60, 0.1);
	color: #b23325;
}

.quiz-submit {
	margin-top: 18px;
	width: 100%;
	border: 0;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	padding: 13px;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	transition: background 0.16s ease;
}

.quiz-submit:hover:not(:disabled) {
	background: var(--brand-dark);
}

.quiz-submit:disabled {
	opacity: 0.5;
	cursor: default;
}

.quiz-result {
	margin-top: 20px;
	text-align: center;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.quiz-score {
	display: block;
	font-size: 40px;
	font-weight: 800;
	color: var(--brand-dark);
	letter-spacing: -0.02em;
}

.quiz-verdict {
	font-size: 15px;
	color: var(--text-2);
	margin: 6px 0 16px;
}

.quiz-retry {
	border: 1px solid var(--line);
	background: var(--bg);
	border-radius: 999px;
	padding: 9px 20px;
	font-weight: 700;
	font-size: 14px;
	color: var(--text-2);
	cursor: pointer;
}

.quiz-retry:hover {
	border-color: var(--brand);
	color: var(--brand-dark);
}

/* ---- Rekomendasi ---- */
.reco {
	margin: 12px auto 8px;
}

.reco-title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 18px;
}

.reco-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.reco-card {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.reco-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg-soft);
}

.reco-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reco-cat {
	font-size: 11.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--brand-dark);
}

.reco-headline {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	margin-top: 3px;
}

.reco-headline a:hover {
	color: var(--brand-dark);
}

/* ---- Halaman profil ---- */
.profile-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
	margin: 8px 0 50px;
	align-items: start;
}

.profile-form {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 26px;
}

.profile-avatar-row {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 22px;
}

.profile-avatar {
	width: 88px;
	height: 88px;
	border-radius: 999px;
	background: var(--brand-tint);
	color: var(--brand-dark);
	display: grid;
	place-items: center;
	font-size: 34px;
	font-weight: 800;
	overflow: hidden;
	flex-shrink: 0;
}

.profile-avatar .avatar-inner {
	width: 100%;
	height: 100%;
	border-radius: 999px;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.profile-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile-upload-btn {
	display: inline-block;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--text-2);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.profile-upload-btn:hover {
	border-color: var(--brand);
	color: var(--brand-dark);
}

.profile-hint {
	font-size: 12px;
	color: var(--text-3);
	margin-top: 7px;
}

.profile-crop-dialog {
	width: min(92vw, 500px);
	max-width: none;
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--bg);
	color: var(--text);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.profile-crop-dialog::backdrop {
	background: rgba(12, 10, 8, 0.72);
	backdrop-filter: blur(5px);
}

.profile-crop-panel { padding: 22px; }

.profile-crop-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.profile-crop-head h2 {
	font-size: 20px;
	line-height: 1.25;
}

.profile-crop-close,
.profile-crop-icon {
	width: 40px;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg);
	color: var(--text);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.profile-crop-close:hover,
.profile-crop-icon:hover {
	border-color: var(--brand);
	color: var(--brand-dark);
}

.profile-crop-stage {
	position: relative;
	width: min(100%, 360px);
	aspect-ratio: 1;
	margin: 0 auto;
	overflow: hidden;
	background: #16130f;
	touch-action: none;
}

.profile-crop-canvas {
	display: block;
	width: 100%;
	height: 100%;
	cursor: grab;
}

.profile-crop-canvas.is-dragging { cursor: grabbing; }

.profile-crop-mask {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border: 2px solid rgba(255, 255, 255, 0.94);
	border-radius: 999px;
	box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.42);
}

.profile-crop-tools {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 40px;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
}

.profile-crop-zoom {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-2);
}

.profile-crop-zoom input {
	width: 100%;
	accent-color: var(--brand);
}

.profile-crop-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}

.profile-crop-cancel,
.profile-crop-apply {
	border-radius: 999px;
	padding: 10px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
}

.profile-crop-cancel {
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--text-2);
}

.profile-crop-apply {
	border: 1px solid var(--brand);
	background: var(--brand);
	color: #fff;
}

.profile-crop-apply:hover {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
}

.profile-field {
	display: block;
	margin-bottom: 18px;
}

.profile-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-2);
	margin-bottom: 6px;
}

.profile-input {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 11px 14px;
	font: inherit;
	font-size: 15px;
	color: var(--text);
	background: var(--bg);
}

.profile-input:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 1px var(--brand);
}

.profile-textarea {
	resize: vertical;
	min-height: 80px;
}

.profile-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.profile-save {
	border: 0;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	padding: 12px 28px;
	font-size: 14.5px;
	font-weight: 800;
	cursor: pointer;
	transition: background 0.16s ease;
}

.profile-save:hover:not(:disabled) {
	background: var(--brand-dark);
}

.profile-save:disabled {
	opacity: 0.6;
	cursor: default;
}

.profile-msg {
	font-size: 13.5px;
	font-weight: 600;
}

.profile-msg.is-ok {
	color: #1e7d44;
}

.profile-msg.is-err {
	color: #b23325;
}

.profile-side-title {
	font-size: 15px;
	font-weight: 800;
	margin-bottom: 14px;
}

.profile-stats {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.profile-stats li a,
.profile-stats li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
}

.profile-stats li a:hover {
	border-color: var(--brand-ghost);
	background: var(--brand-tint);
}

.profile-stat-num {
	font-size: 22px;
	font-weight: 800;
	color: var(--brand-dark);
	line-height: 1.1;
}

.profile-stat-label {
	font-size: 12.5px;
	color: var(--text-3);
}

.profile-links {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.profile-links a {
	padding: 10px 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-2);
	border-bottom: 1px solid var(--line);
}

.profile-links a:hover {
	color: var(--brand-dark);
}

.profile-links .profile-logout {
	color: #b23325;
	border-bottom: 0;
}

/* ---- Halaman indeks (arsip per tanggal) ---- */
.indeks-day {
	font-size: 14px;
	font-weight: 800;
	color: var(--brand-dark);
	text-transform: capitalize;
	margin: 26px 0 4px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--brand-tint);
}

.indeks-list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.indeks-item {
	border-bottom: 1px solid var(--line);
}

.indeks-link {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 12px 2px;
	color: var(--text);
}

.indeks-link:hover .indeks-title {
	color: var(--brand-dark);
}

.indeks-time {
	flex-shrink: 0;
	font-size: 12.5px;
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
	width: 42px;
}

.indeks-cat {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--brand-dark);
	width: 78px;
}

.indeks-title {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
}

.indeks-nav {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 28px 0 50px;
}

.indeks-nav .page-numbers {
	display: inline-flex;
	min-width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	color: var(--text-2);
}

.indeks-nav .page-numbers.current {
	background: var(--brand);
	color: #fff;
	border-color: var(--brand);
}

.indeks-nav a.page-numbers:hover {
	border-color: var(--brand);
	color: var(--brand-dark);
}

@media (max-width: 860px) {
	.profile-layout {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.reco-grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
}

@media (max-width: 560px) {
	.profile-crop-panel {
		padding: 16px;
	}

	.profile-crop-dialog {
		width: calc(100vw - 24px);
	}

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

	.indeks-cat {
		display: none;
	}

	.comment-list .children {
		padding-left: 20px;
		margin-left: 8px;
	}
}

/* ==========================================================================
   FITUR PENEMUAN & BACA LANJUTAN (grup E/F/G)
   ========================================================================== */

/* ---- Daftar isi (TOC) ---- */
.toc {
	margin: 4px 0 26px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
	overflow: hidden;
}
.toc-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border: 0;
	background: none;
	padding: 13px 18px;
	cursor: pointer;
	color: var(--text);
}
.toc-title {
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--brand-dark);
}
.toc-toggle svg { transition: transform 0.2s ease; }
.toc.is-collapsed .toc-toggle svg { transform: rotate(-90deg); }
.toc-list {
	list-style: none;
	margin: 0;
	padding: 0 18px 14px;
	max-height: 320px;
	overflow-y: auto;
}
.toc.is-collapsed .toc-list { display: none; }
.toc-list li { margin: 2px 0; }
.toc-list .toc-h3 { padding-left: 16px; }
.toc-list a {
	display: block;
	padding: 5px 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--text-2);
	border-left: 2px solid transparent;
	padding-left: 12px;
	margin-left: -12px;
}
.toc-list a:hover { color: var(--brand-dark); }
.toc-list a.is-active {
	color: var(--brand-dark);
	font-weight: 700;
	border-left-color: var(--brand);
}

/* ---- Bagikan kutipan ---- */
.quote-share {
	position: absolute;
	z-index: 2000;
	display: none;
	align-items: center;
	gap: 2px;
	padding: 5px;
	background: #1a1410;
	border-radius: 999px;
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
}
.quote-share.show { display: flex; }
.quote-share::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 10px;
	height: 10px;
	background: #1a1410;
}
.quote-share button {
	position: relative;
	z-index: 1;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.quote-share button:hover { background: rgba(255, 255, 255, 0.15); }
.quote-share button.done { color: var(--brand); }
.quote-share-label {
	color: #cfc6bd;
	font-size: 12px;
	font-weight: 600;
	padding: 0 10px 0 6px;
	white-space: nowrap;
}

/* ---- Continuous scroll (artikel berikutnya) ---- */
.cont-divider {
	margin: 44px auto 26px;
	text-align: center;
	position: relative;
}
.cont-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 24px;
	right: 24px;
	height: 1px;
	background: var(--line);
}
.cont-divider span {
	position: relative;
	background: var(--bg);
	padding: 0 16px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-3);
}
.cont-article { padding-top: 6px; }
.cont-cat {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--brand-dark);
	margin-bottom: 8px;
}

/* ---- Komentar: urutkan + laporkan ---- */
.comment-sort {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--bg-soft);
	border-radius: 999px;
	margin: 6px 0 16px;
}
.comment-sort button {
	border: 0;
	background: none;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-2);
	cursor: pointer;
}
.comment-sort button.is-active {
	background: var(--bg);
	color: var(--brand-dark);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.jn-creport {
	border: 0;
	background: none;
	padding: 0;
	color: var(--text-3);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}
.jn-creport:hover { color: #b23325; }
.jn-creport.done { color: #b23325; cursor: default; }

/* ---- Onboarding minat ---- */
.interests-picker {
	border: 1px solid var(--brand-ghost);
	background: var(--brand-tint);
	border-radius: var(--radius-lg);
	padding: 24px;
	margin-bottom: 30px;
}
.interests-title { font-size: 19px; font-weight: 800; }
.interests-sub { color: var(--text-2); font-size: 14px; margin: 4px 0 16px; }
.interest-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.interest-chip {
	border: 1.5px solid var(--brand-ghost);
	background: var(--bg);
	color: var(--text);
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.15s ease;
}
.interest-chip:hover { border-color: var(--brand); }
.interest-chip.is-on {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}
.interests-save {
	border: 0;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	padding: 12px 28px;
	font-size: 14.5px;
	font-weight: 800;
	cursor: pointer;
}
.interests-save:hover:not(:disabled) { background: var(--brand-dark); }
.interests-save:disabled { opacity: 0.6; }

/* ---- Koleksi bookmark ---- */
.col-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 8px 0 24px;
}
.col-chip {
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--text-2);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
}
.col-chip.is-active {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}
.col-chip .col-count { opacity: 0.7; margin-left: 3px; }
.col-create { display: inline-flex; gap: 6px; margin-left: auto; }
.col-create input {
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 8px 14px;
	font: inherit;
	font-size: 13.5px;
	width: 150px;
}
.col-create input:focus { outline: none; border-color: var(--brand); }
.col-create button {
	border: 0;
	border-radius: 999px;
	background: var(--brand-tint);
	color: var(--brand-dark);
	padding: 8px 16px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
}
.col-card[hidden] { display: none; }
.col-card-foot { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.col-assign {
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 6px 10px;
	font: inherit;
	font-size: 12.5px;
	color: var(--text-2);
	background: var(--bg);
	max-width: 100%;
}
.col-added { font-size: 12px; color: #1e7d44; font-weight: 600; }

/* ---- Topik hangat (chip trending) ---- */
.chip--hot {
	background: var(--brand-tint) !important;
	border-color: var(--brand-ghost) !important;
	color: var(--brand-dark) !important;
}

/* ---- Pilihan Redaksi ---- */
.pick-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--brand-ink);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pick-item { display: flex; gap: 12px; }
.pick-thumb {
	flex-shrink: 0;
	width: 84px;
	aspect-ratio: 16 / 11;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg-soft);
}
.pick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pick-text { display: flex; flex-direction: column; gap: 5px; }
.pick-title { font-size: 14px; font-weight: 700; line-height: 1.35; }
.pick-title a:hover { color: var(--brand-dark); }

/* ---- Rangkuman mingguan (recap) ---- */
.recap-list { list-style: none; margin: 8px 0 50px; padding: 0; counter-reset: recap; }
.recap-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}
.recap-rank {
	flex-shrink: 0;
	font-size: 30px;
	font-weight: 800;
	color: var(--brand-ghost);
	width: 38px;
	text-align: center;
	letter-spacing: -0.02em;
}
.recap-item:nth-child(-n+3) .recap-rank { color: var(--brand); }
.recap-thumb {
	flex-shrink: 0;
	width: 116px;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg-soft);
}
.recap-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recap-cat {
	font-size: 11.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--brand-dark);
}
.recap-title { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 3px 0 4px; }
.recap-title a:hover { color: var(--brand-dark); }
.recap-meta { font-size: 12.5px; color: var(--text-3); }

/* ---- Statistik topik (archive) ---- */
.archive-stats { font-size: 13.5px; color: var(--text-3); margin-top: 6px; }
.archive-stats strong { color: var(--text-2); }

/* ---- Statistik penulis (profil) ---- */
.author-stats { margin: 10px 0 50px; }
.author-stats-title { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.author-stats-summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 18px;
}
.author-stats-summary > div {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.as-num { font-size: 26px; font-weight: 800; color: var(--brand-dark); line-height: 1.1; }
.as-label { font-size: 12.5px; color: var(--text-3); }
.author-stats-list { list-style: none; margin: 0; padding: 0; }
.author-stats-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}
.author-stats-list a { font-size: 14.5px; font-weight: 600; }
.author-stats-list a:hover { color: var(--brand-dark); }
.as-metrics { flex-shrink: 0; font-size: 12.5px; color: var(--text-3); }

@media (max-width: 640px) {
	.author-stats-summary { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
	.author-stats-summary > div { padding: 12px; }
	.as-num { font-size: 20px; }
	.recap-thumb { width: 84px; }
	.recap-title { font-size: 15px; }
	.col-create { margin-left: 0; width: 100%; }
	.col-create input { flex: 1; }
}

/* ---- Media sosial di footer ---- */
.footer-social { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.footer-social a {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.1);
	color: #f2e9df;
	transition: background 0.16s ease, color 0.16s ease;
}
.footer-social a:hover { background: var(--brand); color: #fff; }
.footer-social .footer-social-link--yt { background: #f20d28; }
.footer-social .footer-social-link--ig { background: #d62976; }
.footer-social .footer-social-link--fb { background: #1877f2; }
.footer-social .footer-social-link--tiktok,
.footer-social .footer-social-link--x,
.footer-social .footer-social-link--threads {
	background: #111;
	border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ---- Dashboard kontributor: "Tulisan Saya" ---- */
.my-posts { margin: 12px 0 50px; }
.my-posts-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.my-posts-title { font-size: 18px; font-weight: 800; }
.my-posts-new { font-size: 13.5px; font-weight: 700; color: var(--brand-dark); }
.my-posts-new:hover { text-decoration: underline; }
.my-posts-list { list-style: none; margin: 0; padding: 0; }
.my-post {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--line);
}
.my-post-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.my-post-status {
	flex-shrink: 0;
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.my-post--publish .my-post-status { background: rgba(46, 158, 91, 0.14); color: #1e7d44; }
.my-post--pending .my-post-status { background: var(--brand-tint); color: var(--brand-dark); }
.my-post--draft .my-post-status { background: var(--bg-soft); color: var(--text-3); }
.my-post-title { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
a.my-post-title:hover { color: var(--brand-dark); }
.my-post-meta { flex-shrink: 0; font-size: 12.5px; color: var(--text-3); }

/* ==========================================================================
   FORMAT KONTEN & GAMIFIKASI (grup H/I/J)
   ========================================================================== */

/* ---- Breaking news alert ---- */
.breaking-alert { background: #cf2e2e; color: #fff; }
.breaking-inner { display: flex; align-items: center; gap: 12px; padding: 10px 24px; }
.breaking-tag {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	background: #fff;
	color: #cf2e2e;
	padding: 3px 9px;
	border-radius: 4px;
	animation: breaking-pulse 1.4s ease-in-out infinite;
}
@keyframes breaking-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.breaking-text { flex: 1; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.35; }
a.breaking-text:hover { text-decoration: underline; }
.breaking-close { flex-shrink: 0; border: 0; background: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; opacity: 0.85; padding: 0 4px; }
.breaking-close:hover { opacity: 1; }

/* ---- Listicle ---- */
.listicle { margin: 26px 0; }
.listicle-nav { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.listicle-nav a {
	width: 34px; height: 34px; border-radius: 999px;
	display: grid; place-items: center;
	border: 1.5px solid var(--line); color: var(--text-2);
	font-weight: 800; font-size: 13.5px;
}
.listicle-nav a:hover { border-color: var(--brand); color: var(--brand-dark); }
.listicle-list { list-style: none; margin: 0; padding: 0; }
.listicle-item { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.listicle-num {
	flex-shrink: 0; width: 42px; height: 42px; border-radius: 999px;
	background: var(--brand-tint); color: var(--brand-dark);
	display: grid; place-items: center; font-size: 19px; font-weight: 800;
}
.listicle-title { font-size: 19px; font-weight: 800; line-height: 1.3; margin-bottom: 5px; }
.listicle-body p { font-size: 16px; line-height: 1.6; color: var(--text-2); margin: 0; }

/* ---- Kuis kepribadian ---- */
.pquiz { margin: 30px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.pquiz-eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-dark); }
.pquiz-title { font-size: 20px; font-weight: 800; line-height: 1.3; margin: 4px 0 6px; }
.pquiz-q { padding: 16px 0; border-top: 1px solid var(--line); }
.pquiz-q-text { font-size: 16px; font-weight: 700; margin-bottom: 11px; }
.pquiz-opts { display: flex; flex-direction: column; gap: 8px; }
.pquiz-opt {
	text-align: left; border: 1.5px solid var(--line); background: var(--bg);
	border-radius: 10px; padding: 11px 15px; font: inherit; font-size: 14.5px;
	color: var(--text); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.pquiz-opt:hover { border-color: var(--brand-ghost); }
.pquiz-opt.is-picked { border-color: var(--brand); background: var(--brand-tint); }
.pquiz-submit {
	margin-top: 18px; width: 100%; border: 0; border-radius: 999px;
	background: var(--brand); color: #fff; padding: 13px; font-size: 15px; font-weight: 800; cursor: pointer;
}
.pquiz-submit:hover:not(:disabled) { background: var(--brand-dark); }
.pquiz-submit:disabled { opacity: 0.5; cursor: default; }
.pquiz-result { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; }
.pquiz-badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-dark); }
.pquiz-rname { font-size: 26px; font-weight: 800; color: var(--brand-dark); margin: 6px 0 8px; }
.pquiz-rdesc { font-size: 15px; color: var(--text-2); line-height: 1.6; }

/* ---- Timeline / kronologi ---- */
.timeline { margin: 30px 0; }
.timeline-head { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.timeline-heading { font-size: 20px; font-weight: 800; }
.timeline-list { list-style: none; margin: 0; padding: 0 0 0 8px; }
.timeline-item { position: relative; padding: 0 0 26px 30px; border-left: 2px solid var(--line); }
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-dot { position: absolute; left: -8px; top: 2px; width: 14px; height: 14px; border-radius: 999px; background: var(--brand); border: 3px solid var(--bg); }
.timeline-date { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--brand-dark); }
.timeline-title { font-size: 16.5px; font-weight: 700; line-height: 1.35; margin: 3px 0 4px; }
.timeline-text { font-size: 15px; line-height: 1.6; color: var(--text-2); margin: 0; }

/* ---- Koreksi / ralat ---- */
.correction { margin: 24px 0; border-left: 4px solid #b45a1c; background: var(--brand-tint); border-radius: 0 8px 8px 0; padding: 14px 18px; }
.correction-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.correction-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #b45a1c; }
.correction-date { font-size: 12px; color: var(--text-3); }
.correction-text { font-size: 14.5px; line-height: 1.55; color: var(--text); margin: 0; }

/* ---- Rating bintang ---- */
.rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 26px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rating-label { font-size: 14.5px; font-weight: 700; }
.rating-stars { display: inline-flex; gap: 2px; }
.rating-star { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--line); line-height: 0; transition: color 0.1s ease; }
.rating-star.on { color: #f2b01e; }
.rating.is-done .rating-star { cursor: default; }
.rating-summary { font-size: 13.5px; color: var(--text-3); }

/* ---- Lencana pembaca (profil) ---- */
.badges { margin: 12px 0 40px; }
.badges-title { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); opacity: 0.45; filter: grayscale(1); }
.badge.is-earned { opacity: 1; filter: none; background: var(--brand-tint); border-color: var(--brand-ghost); }
.badge-icon { font-size: 28px; line-height: 1; }
.badge-name { font-size: 13.5px; font-weight: 800; color: var(--text); }
.badge-desc { font-size: 11.5px; color: var(--text-3); line-height: 1.35; }

/* ---- Leaderboard komentator ---- */
.commenter-list { list-style: none; margin: 8px 0 50px; padding: 0; }
.commenter-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.commenter-rank { flex-shrink: 0; width: 30px; text-align: center; font-size: 20px; font-weight: 800; color: var(--brand-ghost); }
.commenter-item:nth-child(-n+3) .commenter-rank { color: var(--brand); }
.commenter-avatar { width: 46px; height: 46px; flex-shrink: 0; border-radius: 999px; background: var(--brand-tint); color: var(--brand-dark); display: grid; place-items: center; font-weight: 800; font-size: 18px; overflow: hidden; }
.commenter-avatar img { width: 100%; height: 100%; object-fit: cover; }
.commenter-info { flex: 1; min-width: 0; }
.commenter-name { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; color: var(--text); }
.commenter-name:hover { color: var(--brand-dark); }
.commenter-count { flex-shrink: 0; font-size: 13px; color: var(--text-3); font-weight: 600; }

/* ---- Indeks Topik A-Z ---- */
.az-nav { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 30px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.az-nav a, .az-nav span { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.az-nav a { background: var(--brand-tint); color: var(--brand-dark); }
.az-nav a:hover { background: var(--brand); color: #fff; }
.az-nav span.is-empty { color: var(--line); }
.az-group { margin-bottom: 30px; scroll-margin-top: 90px; }
.az-letter { font-size: 26px; font-weight: 800; color: var(--brand); border-bottom: 2px solid var(--brand-tint); padding-bottom: 6px; margin-bottom: 14px; }
.az-list { display: flex; flex-wrap: wrap; gap: 9px; }
.az-topic { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text); }
.az-topic:hover { border-color: var(--brand); color: var(--brand-dark); }
.az-count { font-size: 11.5px; color: var(--text-3); background: var(--bg-soft); border-radius: 999px; padding: 1px 7px; }

/* ---- Kalkulator ---- */
.calc { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 20px; }
.calc-title { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.calc-field { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-2); margin-bottom: 12px; }
.calc-field input { display: block; width: 100%; margin-top: 5px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; font: inherit; font-size: 15px; background: var(--bg); color: var(--text); }
.calc-field input:focus { outline: none; border-color: var(--brand); }
.calc-run { border: 0; border-radius: 999px; background: var(--brand); color: #fff; padding: 11px 24px; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.calc-run:hover { background: var(--brand-dark); }
.calc-result { margin-top: 16px; padding: 14px 16px; background: var(--brand-tint); border-radius: 10px; font-size: 16px; color: var(--text); }
.calc-result strong { color: var(--brand-dark); font-size: 19px; }
.calc-sub { font-size: 13px; color: var(--text-3); }
.calc-note { font-size: 12.5px; color: var(--text-3); margin-top: 6px; }

/* ---- Mention di komentar ---- */
.mention { color: var(--brand-dark); font-weight: 700; }
.mention:hover { text-decoration: underline; }

@media (max-width: 560px) {
	.badges-grid { grid-template-columns: 1fr 1fr; }
	.listicle-title { font-size: 17px; }
	.breaking-inner { padding: 9px 16px; gap: 9px; }
	.breaking-text { font-size: 13px; }
}

/* ============================================================
 * Sudut membulat kecil (xs) — SELURUH sisi publik
 * ============================================================
 * Nilai --radius dan --radius-lg di :root sudah menunjuk --radius-xs, sehingga
 * setiap tempat yang memakai token itu (kartu, panel, thumbnail) otomatis ikut.
 * Blok di bawah menangani yang nilainya dipatok langsung sebagai pil (999px).
 *
 * DIKECUALIKAN dan tetap bulat penuh:
 *  - Kolom pencarian — sesuai permintaan.
 *  - Elemen yang bentuknya memang lingkaran: avatar, tombol ikon bundar, titik
 *    indikator, tombol putar/mute/tutup, dan knob switch mode gelap. Pada elemen
 *    ini border-radius bukan "sudut yang dibulatkan" melainkan penentu bentuk;
 *    memaksanya 4px membuat tombol putar dan avatar tampak rusak.
 *
 * Selector diawali `body` (0,1,1 bersama :is) agar mengalahkan aturan asal yang
 * umumnya satu sampai dua kelas, tanpa perlu !important.
 */
body :is(
	/* chip, tag, badge */
	.chip, .chan-chip, .col-chip, .interest-chip, .az-topic, .reel-cat,
	.info-badge, .pick-badge, .series-badge, .my-post-status, .reel-duration,
	.notif-badge, .vs-count, .composer-steps span,
	/* tombol */
	.btn-write, .btn-submit, .comment-form .btn-submit, .submit-btn, .load-more-btn,
	.cookie-accept, .newsletter-btn, .follow-btn, .save-btn, .like-btn, .share-btn,
	.reaction, .tts-btn, .font-btn, .paywall-btn, .notif-btn, .quiz-submit,
	.quiz-retry, .pquiz-submit, .interests-save, .calc-run, .profile-save,
	.profile-upload-btn, .col-create button, .quote-share button, .story-act,
	.comment-sort button, .composer-cover-cta, .composer-nav-btn, .reels-cta,
	.header-ico, .account-btn, .footer-social a, .footer-social-link,
	.indeks-nav .page-numbers, .listicle-nav a,
	/* kolom isian (selain pencarian) */
	.newsletter-input, .col-create input, .story-comment-input, .comment-sort,
	.newsletter-form input, .newsletter-form button,
	.submit-form input[type="file"]::file-selector-button,
	/* thumbnail & panel */
	.hero-lead-thumb, .hero-tile-thumb, .card-feed-thumb, .card-block-thumb,
	.card-mini-thumb, .pick-thumb, .reel-thumb, .social-card, .sidebar-box, .see-all
) {
	border-radius: var(--radius-xs);
}

/* Pencarian tetap pil — ditulis setelah sapuan di atas agar menang. */
body :is(.search-form, .search-field) {
	border-radius: 999px;
}

/* ============================================================
 * Tab bar bawah (mobile)
 * ============================================================
 * Empat tujuan utama + tombol Menu yang membuka drawer kanan.
 * Disembunyikan di desktop: navigasi di sana memakai baris kanal di header.
 */
.tabbar,
.nav-backdrop {
	display: none;
}

@media (max-width: 720px) {
	/*
	 * clip, bukan hidden: clip tidak membentuk scroll container sehingga
	 * position:sticky pada header tetap bekerja. Ini menahan drawer off-canvas
	 * agar tidak menambah lebar dokumen.
	 */
	html,
	body {
		overflow-x: clip;
	}

	/* Tinggi & jarak disimpan sebagai token supaya bar, padding body, dan posisi bar
	   cookie selalu sinkron — kalau tingginya berubah, ketiganya ikut. */
	:root {
		--tabbar-h: 64px;
		--tabbar-gap: 12px;
		--tabbar-pad: 6px;
	}

	/* Mengambang: lepas dari tepi layar, bersudut, berbayang. */
	.tabbar {
		position: fixed;
		left: var(--tabbar-gap);
		right: var(--tabbar-gap);
		bottom: calc(var(--tabbar-gap) + env(safe-area-inset-bottom));
		z-index: 3006;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 0;
		height: var(--tabbar-h);
		padding: var(--tabbar-pad);
		border: 1px solid var(--line);
		border-radius: 18px;
		background: var(--bg);
		box-shadow: 0 14px 34px -14px rgba(34, 29, 24, 0.32);
		/*
		 * Ditandai agar browser memperlakukannya sebagai elemen YANG SAMA saat pindah
		 * halaman — bar tidak ikut hilang lalu dirender ulang, melainkan tetap di
		 * tempatnya sementara isi halaman bertukar. Tanpa animasi masuk, karena
		 * animasi itu justru yang membuatnya terasa "memuat ulang" tiap navigasi.
		 */
		view-transition-name: tabbar;
	}

	/* Pil membungkus ikon DAN label — seperti versi sebelumnya. */
	.tabbar-pill {
		position: absolute;
		top: var(--tabbar-pad);
		bottom: var(--tabbar-pad);
		left: var(--tabbar-pad);
		width: calc((100% - var(--tabbar-pad) * 2) / 5);
		border-radius: 14px;
		background: var(--brand-tint);
		transform: translateX(calc(var(--tab-active) * 100%));
		transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
		pointer-events: none;
	}

	.tabbar--no-active .tabbar-pill {
		opacity: 0;
	}

	.tabbar-item {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		border: 0;
		background: none;
		font-family: inherit;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: -0.015em;
		line-height: 1.1;
		white-space: nowrap;
		color: var(--text-3);
		cursor: pointer;
		transition: color 0.28s ease;
	}

	.tabbar-label {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tabbar-ico {
		display: grid;
		place-items: center;
		width: 22px;
		height: 22px;
		transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.tabbar-ico svg {
		width: 21px;
		height: 21px;
	}

	.tabbar-item.is-active {
		color: var(--brand-text);
	}

	.tabbar-item.is-active .tabbar-ico {
		transform: translateY(-1px) scale(1.06);
	}

	.tabbar-item:active .tabbar-ico {
		transform: scale(0.9);
	}

	/* Ruang agar konten terakhir tidak tertutup bar mengambang. */
	body {
		padding-bottom: calc(var(--tabbar-h) + var(--tabbar-gap) * 2 + env(safe-area-inset-bottom));
	}

	/* Bar cookie duduk DI ATAS tab bar, tidak saling menimpa. */
	.cookie-consent {
		bottom: calc(var(--tabbar-h) + var(--tabbar-gap) * 2 + env(safe-area-inset-bottom));
	}

	/* display:block ditulis DI SINI, bukan hanya di media query drawer yang letaknya
	   lebih awal — aturan global `.nav-backdrop{display:none}` di blok ini berada
	   setelahnya dan akan menang. [hidden] tetap dihormati agar JS bisa menutupnya. */
	.nav-backdrop {
		display: block;
	}

	.nav-backdrop[hidden] {
		display: none;
	}

	/* Hamburger di header tidak lagi diperlukan — Menu sudah ada di tab bar,
	   dua pintu masuk untuk hal yang sama justru membingungkan. */
	.header-grid > .nav-toggle {
		display: none;
	}

	.header-grid {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "brand utility";
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-nav,
	.nav-backdrop,
	.tabbar-ico {
		transition: none;
	}
}

/*
 * Antara 721px dan 900px navigasi masih berada di header (drawer baru aktif di
 * bawah 721px), tetapi 9 item kanal butuh ~823px sedangkan kontainer lebih sempit.
 * Barisnya dibuat dapat digeser mendatar di dalam dirinya sendiri, sehingga tidak
 * meluber dan menyeret seluruh halaman.
 */
@media (min-width: 721px) and (max-width: 900px) {
	/*
	 * Dibuat MEMBUNGKUS, bukan digeser mendatar. Dua alasan:
	 * 1. inc/setup.php menyisipkan inline style `.site-nav .nav-inner{overflow:visible}`
	 *    yang dimuat setelah stylesheet ini, sehingga overflow-x:auto tidak akan menang
	 *    tanpa menaikkan spesifisitas.
	 * 2. overflow-x:auto memaksa overflow-y ikut terpotong, dan submenu dropdown
	 *    memang butuh meluap keluar batas nav.
	 */
	.site-header .site-nav .nav-list {
		flex-wrap: wrap;
		justify-content: flex-start;
		row-gap: 0;
	}

	.site-header .site-nav .nav-inner {
		min-height: 0;
		padding-block: 4px;
	}
}

/*
 * Transisi antar halaman tanpa "kedip muat ulang".
 *
 * WordPress memuat ulang halaman penuh setiap navigasi, jadi tab bar dan header
 * biasanya ikut hilang lalu digambar lagi. Dengan @view-transition, browser
 * memotret halaman lama, memuat yang baru, lalu menyilangkannya — elemen yang
 * diberi view-transition-name yang sama diperlakukan sebagai elemen itu juga,
 * sehingga tab bar dan header terlihat DIAM di tempatnya.
 *
 * Belum didukung semua browser (Firefox belum). Di browser tanpa dukungan,
 * navigasi berjalan seperti biasa — tidak ada yang rusak.
 */
@view-transition {
	navigation: auto;
}

@media (max-width: 720px) {
	.site-header {
		view-transition-name: header;
	}
}

/* Isi halaman menyilang halus; bar dan header tidak ikut. */
::view-transition-old(root) {
	animation-duration: 0.22s;
}

::view-transition-new(root) {
	animation-duration: 0.28s;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}