/**
 * Journal -- template publik (Tahap 3), 2026-08-22. Krem/editorial, SEMUA
 * variable & rule di-scope ke wrapper `.zsd-journal` (nggak pernah nyentuh
 * :root) biar nggak bentrok sama token warna biru dashboard/halaman lain di
 * toko. Font: reuse "Inter" yang udah dimuat tema Botiga -- TIDAK nambah
 * font library baru. Container max-width 1275px sama kayak halaman Shop
 * lain di storefront ini (dicek langsung live), biar Journal kerasa satu
 * kesatuan sama toko, bukan halaman lepas.
 */

.zsd-journal {
	--zsd-jr-bg: #fdfaf5;
	--zsd-jr-krem: #f2e8da;
	--zsd-jr-krem-muda: #f8f2e9;
	--zsd-jr-coklat: #6b5744;
	--zsd-jr-coklat-muda: #a9927a;
	--zsd-jr-hijau: #7c8a6a;
	--zsd-jr-teks: #2c2620;
	--zsd-jr-teks-muted: #8a7f6f;
	--zsd-jr-border: #e7dccb;

	/* Personalisasi Single Artikel (2026-08-23) -- 2 variable BARU, terpisah
	   dari 9 variable palet dasar di atas:
	   - --zsd-jr-aksen: warna tombol/link/like. DEFAULT = var(--zsd-jr-coklat)
	     (ikut warna palet, PERSIS perilaku sebelum fitur ini ada) -- cuma
	     dioverride kalau seller pilih preset aksen selain "Ikuti Warna Palet"
	     (lihat blok [data-jr-aksen] di bagian bawah file ini).
	   - --zsd-jr-font-heading: font judul artikel/kartu. DEFAULT = font body
	     yang sama (Inter) -- cuma dioverride kalau seller pilih font pairing
	     selain "Konsisten" (lihat blok [data-jr-font] di bagian bawah file).
	   Keduanya di-scope ke .zsd-journal juga (bukan :root), sama kayak semua
	   variable lain di file ini. */
	--zsd-jr-aksen: var(--zsd-jr-coklat);
	--zsd-jr-font-heading: "Inter", -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;

	background: var(--zsd-jr-bg);
	color: var(--zsd-jr-teks);
	font-family: "Inter", -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
	line-height: 1.5;
}

.zsd-journal a {
	color: inherit;
	text-decoration: none;
}

/* ===== Hero ===== */

.zsd-journal-hero {
	max-width: 1275px;
	margin: 32px auto 0;
	padding: 0 24px;
}

.zsd-journal-hero-inner {
	background-size: cover;
	background-position: center;
	background-color: var(--zsd-jr-krem);
	border-radius: 20px;
	min-height: 340px;
	display: flex;
	align-items: center;
	padding: 48px 56px;
}

/* FIX 2026-08-23 (Ferdian): h1+p sebelumnya taruh langsung sebagai anak
   .zsd-journal-hero-inner yang display:flex TANPA flex-direction -- jadi
   judul & tagline kesejajar SAMPING-SAMPINGAN (row, default flex), bukan
   BERTUMPUK seperti mockup. Dibungkus 1 wrapper block (.zsd-journal-hero-teks)
   khusus buat teksnya, .zsd-journal-hero-inner tetap flex cuma buat nge-
   center wrapper ini secara vertikal di dalam hero. */
.zsd-journal-hero-teks {
	max-width: 560px;
}

.zsd-journal-hero-teks h1 {
	font-size: 48px;
	font-weight: 500;
	margin: 0 0 14px;
	line-height: 1.1;
	color: var(--zsd-jr-teks);
	font-family: var(--zsd-jr-font-heading);
}

.zsd-journal-hero-teks p {
	font-size: 16px;
	color: var(--zsd-jr-teks);
	max-width: 440px;
	margin: 0;
	line-height: 1.6;
}

/* ===== Body: list + sidebar ===== */

.zsd-journal-body {
	max-width: 1275px;
	margin: 0 auto;
	padding: 48px 24px;
	display: flex;
	align-items: flex-start;
	gap: 48px;
}

.zsd-journal-main {
	flex: 1;
	min-width: 0;
}

.zsd-journal-label-filter {
	font-size: 14px;
	color: var(--zsd-jr-teks-muted);
	margin: 0 0 24px;
}

.zsd-journal-label-filter a {
	color: var(--zsd-jr-aksen);
	text-decoration: underline;
}

.zsd-journal-kosong {
	color: var(--zsd-jr-teks-muted);
	font-size: 15px;
}

/* ===== Artikel: 2-kolom gambar+konten ===== */

.zsd-journal-item {
	display: flex;
	gap: 32px;
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--zsd-jr-border);
}

.zsd-journal-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.zsd-journal-item-gambar {
	flex: 0 0 320px;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
	background: var(--zsd-jr-krem-muda);
}

.zsd-journal-item-gambar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.zsd-journal-item-gambar:hover img {
	transform: scale(1.03);
}

.zsd-journal-item-konten {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.zsd-journal-item-meta {
	font-size: 13px;
	color: var(--zsd-jr-teks-muted);
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.zsd-journal-pill {
	display: inline-block;
	background: var(--zsd-jr-krem);
	color: var(--zsd-jr-aksen);
	font-size: 12px;
	padding: 3px 12px;
	border-radius: 999px;
}

.zsd-journal-item-judul {
	font-size: 23px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 10px;
	font-family: var(--zsd-jr-font-heading);
}

.zsd-journal-item-judul a:hover {
	color: var(--zsd-jr-aksen);
}

.zsd-journal-item-excerpt {
	font-size: 15px;
	color: var(--zsd-jr-teks);
	opacity: .85;
	margin: 0 0 14px;
}

.zsd-journal-item-baca {
	font-size: 14px;
	font-weight: 600;
	color: var(--zsd-jr-aksen);
	width: fit-content;
}

.zsd-journal-item-baca:hover {
	text-decoration: underline;
}

/* ===== Pagination ===== */

.zsd-journal-paginasi {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.zsd-journal-paginasi .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border-radius: 8px;
	font-size: 13px;
	color: var(--zsd-jr-teks);
}

.zsd-journal-paginasi a.page-numbers:hover {
	background: var(--zsd-jr-krem-muda);
}

.zsd-journal-paginasi .page-numbers.current {
	background: var(--zsd-jr-krem);
	color: var(--zsd-jr-aksen);
	font-weight: 600;
}

.zsd-journal-paginasi .page-numbers.dots {
	color: var(--zsd-jr-teks-muted);
}

/* ===== Sidebar ===== */

.zsd-journal-sidebar {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.zsd-journal-card {
	background: var(--zsd-jr-krem-muda);
	border: 1px solid var(--zsd-jr-border);
	border-radius: 14px;
	padding: 24px;
}

.zsd-journal-card h3 {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 14px;
	color: var(--zsd-jr-teks);
}

.zsd-journal-daftar-kategori {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zsd-journal-daftar-kategori li {
	margin-bottom: 4px;
}

.zsd-journal-daftar-kategori a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 10px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--zsd-jr-teks);
}

.zsd-journal-daftar-kategori a:hover {
	background: var(--zsd-jr-krem);
}

.zsd-journal-daftar-kategori .zsd-journal-kategori-aktif a {
	background: var(--zsd-jr-krem);
	color: var(--zsd-jr-aksen);
	font-weight: 600;
}

.zsd-journal-kategori-jumlah {
	font-size: 12px;
	color: var(--zsd-jr-teks-muted);
}

/* Widget "Artikel Terbaru" -- dipakai sidebar single artikel (2026-08-23) */

.zsd-journal-daftar-artikel-terbaru {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zsd-journal-artikel-terbaru-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.zsd-journal-artikel-terbaru-gambar {
	flex: 0 0 56px;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
	background: var(--zsd-jr-krem);
}

.zsd-journal-artikel-terbaru-gambar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.zsd-journal-artikel-terbaru-teks {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.zsd-journal-artikel-terbaru-teks a {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--zsd-jr-teks);
}

.zsd-journal-artikel-terbaru-teks a:hover {
	color: var(--zsd-jr-aksen);
}

.zsd-journal-artikel-terbaru-tanggal {
	font-size: 11.5px;
	color: var(--zsd-jr-teks-muted);
}

.zsd-journal-card-subscribe p {
	font-size: 13.5px;
	color: var(--zsd-jr-teks-muted);
	margin: 0 0 16px;
	line-height: 1.55;
}

.zsd-journal-form-subscribe {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zsd-journal-form-subscribe input[type="email"] {
	padding: 11px 14px;
	border: 1px solid var(--zsd-jr-border);
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	color: var(--zsd-jr-teks);
}

.zsd-journal-form-subscribe input[type="email"]:focus {
	outline: none;
	border-color: var(--zsd-jr-coklat-muda);
}

.zsd-journal-form-subscribe button {
	padding: 11px 14px;
	border: none;
	border-radius: 8px;
	background: var(--zsd-jr-aksen);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.zsd-journal-form-subscribe button:hover {
	opacity: .92;
}

.zsd-journal-form-subscribe button:disabled {
	opacity: .6;
	cursor: default;
}

.zsd-journal-subscribe-pesan {
	font-size: 13px;
	margin: 10px 0 0;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--zsd-jr-krem);
	color: var(--zsd-jr-aksen);
}

.zsd-journal-subscribe-pesan.zsd-journal-pesan-gagal {
	background: #f5e4df;
	color: #8a4635;
}

.zsd-journal-subscribe-catatan {
	font-size: 11.5px;
	color: var(--zsd-jr-teks-muted);
	margin: 12px 0 0 !important;
}

/* ===== Trust strip ===== */

.zsd-journal-trust {
	max-width: 1275px;
	margin: 0 auto;
	padding: 32px 24px 56px;
	border-top: 1px solid var(--zsd-jr-border);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.zsd-journal-trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	color: var(--zsd-jr-teks-muted);
	font-size: 13.5px;
	font-weight: 500;
}

.zsd-journal-trust-item svg {
	width: 26px;
	height: 26px;
	color: var(--zsd-jr-aksen);
}

/* ===== Responsive ===== */

@media (max-width: 1024px) {
	.zsd-journal-body {
		flex-direction: column;
	}
	.zsd-journal-sidebar {
		flex: 1 1 auto;
		width: 100%;
		flex-direction: row;
	}
	.zsd-journal-card {
		flex: 1;
	}
}

@media (max-width: 768px) {
	.zsd-journal-hero-inner {
		min-height: 260px;
		padding: 32px 24px;
	}
	.zsd-journal-hero-inner h1 {
		font-size: 32px;
	}
	.zsd-journal-item {
		flex-direction: column;
		gap: 16px;
	}
	.zsd-journal-item-gambar {
		flex-basis: auto;
		width: 100%;
	}
	.zsd-journal-sidebar {
		flex-direction: column;
	}
	.zsd-journal-trust {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.zsd-journal-hero-inner h1 {
		font-size: 26px;
	}
	.zsd-journal-item-judul {
		font-size: 19px;
	}
}

/**
 * ===== Single artikel (`/journal/{slug}/`) -- mulai dibangun 2026-08-23 =====
 * Tahap ini (build pertama): cuma wrapper dasar + judul + konten, biar nggak
 * mepet ke tepi viewport. Class baru semua prefix `.zsd-journal-single-*`
 * biar kebeda dari class listing (`.zsd-journal-item-*`, dst) meski sama-sama
 * reuse variable warna (--zsd-jr-*) & font (Inter) dari wrapper `.zsd-journal`
 * di atas -- TIDAK ada variable/font baru. Header/meta/hero/sidebar/navigasi/
 * komentar nyusul di section CSS berikutnya begitu bagian-bagian itu dibangun.
 */

/* Batasi lebar baca isi artikel di dalam .zsd-journal-main (yang lebarnya
   ikut flex:1 di samping sidebar) -- TIDAK mengubah .zsd-journal-main/-body
   itu sendiri (dipakai bareng listing page, harus tetap sama persis di
   sana). Target ~720px biar nyaman dibaca, sesuai brief (680-760px). */
.zsd-journal-single .zsd-journal-main {
	max-width: 720px;
}

.zsd-journal-single-breadcrumb {
	display: inline-block;
	font-size: 14px;
	color: var(--zsd-jr-teks-muted);
	margin-bottom: 24px;
}

.zsd-journal-single-breadcrumb:hover {
	color: var(--zsd-jr-aksen);
}

.zsd-journal-single-header {
	margin-bottom: 24px;
}

.zsd-journal-single-meta {
	font-size: 13px;
	color: var(--zsd-jr-teks-muted);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.zsd-journal-single-judul {
	font-size: 38px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 14px;
	color: var(--zsd-jr-teks);
	font-family: var(--zsd-jr-font-heading);
}

.zsd-journal-single-deskripsi {
	font-size: 17px;
	line-height: 1.6;
	color: var(--zsd-jr-teks-muted);
	margin: 0;
}

.zsd-journal-single-meta-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

.zsd-journal-single-author {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.zsd-journal-single-author img {
	border-radius: 50%;
	display: block;
}

/* Avatar author (2026-08-23) SEKARANG pakai logo toko (get_theme_mod('custom_logo')),
   BUKAN Gravatar lagi -- logo toko biasanya nggak persegi (wordmark lebar,
   dsb), jadi dipaksa jadi kotak 32x32 dulu (object-fit:contain, background
   krem sebagai "bantalan") SEBELUM di-bulatkan biar nggak keliatan gepeng
   kepotong kalau bentuk aslinya lonjong. */
.zsd-journal-single-author-avatar {
	width: 32px;
	height: 32px;
	object-fit: contain;
	background: var(--zsd-jr-krem);
	padding: 2px;
}

.zsd-journal-single-author-nama {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--zsd-jr-teks);
}

.zsd-journal-single-estimasi-baca {
	font-size: 13px;
	color: var(--zsd-jr-teks-muted);
}

.zsd-journal-single-share {
	display: flex;
	gap: 8px;
	margin-top: 16px;
	flex-wrap: wrap; /* bisa sampai 5 tombol kalau seller nyalain semua platform opsional (2026-08-23) */
}

.zsd-journal-single-share-tombol {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--zsd-jr-border);
	border-radius: 999px;
	font-size: 12.5px;
	color: var(--zsd-jr-teks-muted);
	background: none;
	cursor: pointer;
	font-family: inherit;
}

.zsd-journal-single-share-tombol:hover {
	background: var(--zsd-jr-krem-muda);
	color: var(--zsd-jr-aksen);
}

.zsd-journal-share-ikon {
	width: 14px;
	height: 14px;
}

.zsd-journal-single-hero {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 14px;
	background: var(--zsd-jr-krem-muda);
	margin-bottom: 32px;
}

.zsd-journal-single-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.zsd-journal-single-konten {
	font-size: 16px;
	line-height: 1.75;
	color: var(--zsd-jr-teks);
}

.zsd-journal-single-konten p {
	margin: 0 0 20px;
}

.zsd-journal-single-konten img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 8px 0 24px;
}

.zsd-journal-single-konten blockquote {
	margin: 32px 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--zsd-jr-aksen);
	font-size: 20px;
	font-style: normal;
	line-height: 1.5;
	color: var(--zsd-jr-aksen);
}

.zsd-journal-single-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--zsd-jr-border);
}

.zsd-journal-single-nav-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border: 1px solid var(--zsd-jr-border);
	border-radius: 12px;
}

.zsd-journal-single-nav-card:hover {
	background: var(--zsd-jr-krem-muda);
}

.zsd-journal-single-nav-berikutnya {
	text-align: right;
	grid-column: 2;
}

.zsd-journal-single-nav-arah {
	font-size: 12.5px;
	color: var(--zsd-jr-teks-muted);
}

.zsd-journal-single-nav-judul {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--zsd-jr-teks);
	font-family: var(--zsd-jr-font-heading);
}

@media (max-width: 1024px) {
	.zsd-journal-single .zsd-journal-main {
		max-width: none;
	}
}

@media (max-width: 768px) {
	.zsd-journal-single-nav {
		grid-template-columns: 1fr;
	}
	.zsd-journal-single-nav-berikutnya {
		text-align: left;
		grid-column: 1;
	}
}

/* ===== Komentar (2026-08-23, tampilan dasar -- tombol suka menyusul) ===== */

.zsd-journal-single-komentar {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--zsd-jr-border);
}

.zsd-journal-single-komentar-judul {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 20px;
	color: var(--zsd-jr-teks);
	font-family: var(--zsd-jr-font-heading);
}

.zsd-journal-single-komentar-list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.zsd-journal-single-komentar-item {
	display: flex;
	gap: 12px;
}

.zsd-journal-single-komentar-avatar img {
	border-radius: 50%;
	display: block;
}

.zsd-journal-single-komentar-isi {
	flex: 1;
	min-width: 0;
}

.zsd-journal-single-komentar-meta {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 4px;
}

.zsd-journal-single-komentar-nama {
	font-size: 14px;
	font-weight: 600;
	color: var(--zsd-jr-teks);
}

.zsd-journal-single-komentar-waktu {
	font-size: 12px;
	color: var(--zsd-jr-teks-muted);
}

.zsd-journal-single-komentar-teks {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--zsd-jr-teks);
}

.zsd-journal-single-komentar-teks p {
	margin: 0 0 8px;
}

.zsd-journal-single-komentar-tutup {
	font-size: 14px;
	color: var(--zsd-jr-teks-muted);
}

.zsd-journal-single-suka {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 8px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--zsd-jr-teks-muted);
	font-family: inherit;
	font-size: 12.5px;
}

.zsd-journal-single-suka:hover {
	color: var(--zsd-jr-aksen);
}

.zsd-journal-single-suka:disabled {
	cursor: default;
}

.zsd-journal-suka-ikon {
	width: 15px;
	height: 15px;
}

.zsd-journal-single-suka.zsd-journal-suka-aktif {
	color: var(--zsd-jr-aksen);
}

.zsd-journal-single-suka.zsd-journal-suka-aktif .zsd-journal-suka-ikon {
	fill: currentColor;
}

.zsd-journal-single-form-komentar .comment-reply-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 16px;
	color: var(--zsd-jr-teks);
}

.zsd-journal-single-form-field {
	margin-bottom: 14px;
}

.zsd-journal-single-form-field label {
	display: block;
	font-size: 13px;
	color: var(--zsd-jr-teks-muted);
	margin-bottom: 6px;
}

.zsd-journal-form-wajib {
	color: var(--zsd-jr-aksen);
}

.zsd-journal-single-form-field input,
.zsd-journal-single-form-field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--zsd-jr-border);
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	color: var(--zsd-jr-teks);
	box-sizing: border-box;
}

.zsd-journal-single-form-field input:focus,
.zsd-journal-single-form-field textarea:focus {
	outline: none;
	border-color: var(--zsd-jr-coklat-muda);
}

.zsd-journal-single-form-submit {
	padding: 11px 20px;
	border: none;
	border-radius: 8px;
	background: var(--zsd-jr-aksen);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.zsd-journal-single-form-submit:hover {
	opacity: .92;
}

@media (max-width: 480px) {
	.zsd-journal-single-judul {
		font-size: 28px;
	}
	.zsd-journal-single-deskripsi {
		font-size: 15.5px;
	}
}

/* ===== Personalisasi Single Artikel -- preset Palet Dasar/Warna Aksen/
   Font Pairing (2026-08-23) =====
   Diaktifkan lewat atribut data-jr-palet/data-jr-aksen/data-jr-font di
   wrapper .zsd-journal.zsd-journal-single (lihat
   zsd_render_halaman_journal_single() di journal-template.php), nilainya
   dari setting seller (tab dashboard "Pengaturan Single Journal", lihat
   zsd_journal_daftar_preset_palet()/_aksen()/_font() di journal.php --
   SUMBER TUNGGAL kebenaran warna & label, jangan diubah cuma di salah satu
   sisi doang kalau nanti direvisi).

   "klasik"/"ikuti-palet"/"konsisten" SENGAJA nggak punya blok di sini --
   itu preset default yang berarti "pakai nilai dasar .zsd-journal apa
   adanya" (lihat variable block paling atas file ini), BUKAN kelupaan.

   FASE 4 (2026-08-23, request tambahan Ferdian): halaman listing/kategori
   Journal (`.zsd-journal-listing`, lihat zsd_render_halaman_journal_publik()
   di journal-template.php) sekarang JUGA bisa dipersonalisasi lewat
   preset yang SAMA (journal_palet/journal_aksen/journal_font, setting
   TERPISAH dari single_palet/single_aksen/single_font -- lihat sub-tab
   "Pengaturan Journal" > "Warna & Font"). Selector di bawah SENGAJA
   ditambah `.zsd-journal-listing[...]` di samping `.zsd-journal-single[...]`
   (comma-separated, bukan duplikat blok) supaya nilai warna/font-nya tetap
   1 sumber, tapi dikontrol INDEPENDEN lewat atribut data-jr-* masing-masing
   wrapper -- listing & single BISA beda preset tanpa saling pengaruh. */

.zsd-journal-single[data-jr-palet="terracotta-hangat"],
.zsd-journal-listing[data-jr-palet="terracotta-hangat"] {
	--zsd-jr-bg: #fdf8f3;
	--zsd-jr-krem: #f0e0d0;
	--zsd-jr-krem-muda: #f7ebdf;
	--zsd-jr-coklat: #8a4b32;
	--zsd-jr-coklat-muda: #c08b6f;
	--zsd-jr-teks: #2e2117;
	--zsd-jr-teks-muted: #9c8672;
	--zsd-jr-border: #e8d2bd;
}

.zsd-journal-single[data-jr-palet="zaitun-alami"],
.zsd-journal-listing[data-jr-palet="zaitun-alami"] {
	--zsd-jr-bg: #f9faf5;
	--zsd-jr-krem: #e8ecdc;
	--zsd-jr-krem-muda: #f1f4e9;
	--zsd-jr-coklat: #5b6b4a;
	--zsd-jr-coklat-muda: #93a17f;
	--zsd-jr-teks: #262b1f;
	--zsd-jr-teks-muted: #8b937d;
	--zsd-jr-border: #dde3cd;
}

.zsd-journal-single[data-jr-palet="abu-batu-modern"],
.zsd-journal-listing[data-jr-palet="abu-batu-modern"] {
	--zsd-jr-bg: #f7f7f5;
	--zsd-jr-krem: #e9e7e2;
	--zsd-jr-krem-muda: #f2f1ed;
	--zsd-jr-coklat: #5c5850;
	--zsd-jr-coklat-muda: #948d80;
	--zsd-jr-teks: #262420;
	--zsd-jr-teks-muted: #928d84;
	--zsd-jr-border: #dedad2;
}

.zsd-journal-single[data-jr-aksen="terracotta"],
.zsd-journal-listing[data-jr-aksen="terracotta"] { --zsd-jr-aksen: #b3572f; }
.zsd-journal-single[data-jr-aksen="hijau-sawo"],
.zsd-journal-listing[data-jr-aksen="hijau-sawo"] { --zsd-jr-aksen: #6b7a4f; }
.zsd-journal-single[data-jr-aksen="biru-dusty"],
.zsd-journal-listing[data-jr-aksen="biru-dusty"] { --zsd-jr-aksen: #4f7686; }
.zsd-journal-single[data-jr-aksen="mustard"],
.zsd-journal-listing[data-jr-aksen="mustard"]    { --zsd-jr-aksen: #c08a2e; }

.zsd-journal-single[data-jr-font="editorial-klasik"],
.zsd-journal-listing[data-jr-font="editorial-klasik"] {
	--zsd-jr-font-heading: "Playfair Display", Georgia, serif;
}

.zsd-journal-single[data-jr-font="editorial-hangat"],
.zsd-journal-listing[data-jr-font="editorial-hangat"] {
	--zsd-jr-font-heading: "Fraunces", Georgia, serif;
}

/* Ikon kategori (opsional) di sidebar -- 2026-09-11 */
.zsd-journal-kategori-nama {
	display: flex;
	align-items: center;
	gap: 8px;
}

.zsd-journal-kategori-ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--zsd-jr-aksen);
}

.zsd-journal-kategori-ikon .zsd-ikon-svg {
	width: 100%;
	height: 100%;
}