/*
Theme Name: Rupabhumi
Theme URI: https://bhuminews.id/rupabhumi
Author: Penjaga bhumi
Author URI: https://bhuminews.id
Description: Tema WordPress untuk media digital lingkungan hidup. Dibangun dengan HTML semantik penuh, CSS Grid dan Flexbox murni tanpa framework, serta data terstruktur JSON-LD agar konten mudah dipahami mesin pencari, Answer Engine, dan sistem Generative Engine Optimization (GEO).
Version: 1.1.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rupabhumi
Tags: news, magazine, blog, custom-menu, featured-images, translation-ready, accessibility-ready, grid-layout
*/

/* =========================================================================
   1. TOKEN DESAIN
   ========================================================================= */

:root {
	/* Warna dasar */
	--rb-bg:            #FDFDFB;
	--rb-ink:           #1B1B18;
	--rb-ink-soft:      #2A2A24;
	--rb-muted:         #4A473D;
	--rb-meta:          #6E6C5C; /* Kontras 5.20:1 terhadap --rb-bg (WCAG AA). */
	--rb-faint:         #767463; /* Kontras 4.64:1 terhadap --rb-bg (WCAG AA). */

	/* Warna aksen */
	--rb-accent:        #1F6F4A;
	--rb-accent-dark:   #165136;
	--rb-accent-ink:    #FDFDFB;

	/* Garis dan permukaan */
	--rb-rule:          #E6E3D9;
	--rb-rule-light:    #EFEDE5;
	--rb-rule-strong:   #1B1B18;
	--rb-rank:          #D8D5C8;
	--rb-placeholder:   repeating-linear-gradient(135deg, #EDEBE3 0, #EDEBE3 10px, #E3E0D4 10px, #E3E0D4 20px);

	/* Tipografi */
	--rb-font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--rb-font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--rb-text-2xs:      0.75rem;   /* 12px */
	--rb-text-xs:       0.8125rem; /* 13px */
	--rb-text-sm:       0.875rem;  /* 14px */
	--rb-text-base:     0.9375rem; /* 15px */
	--rb-text-md:       1rem;      /* 16px */
	--rb-text-lg:       1.0625rem; /* 17px */
	--rb-text-xl:       1.125rem;  /* 18px */
	--rb-text-2xl:      1.375rem;  /* 22px */
	--rb-text-3xl:      1.625rem;  /* 26px */
	--rb-text-4xl:      1.75rem;   /* 28px */
	--rb-text-5xl:      2rem;      /* 32px */
	--rb-text-6xl:      2.25rem;   /* 36px */

	--rb-weight-normal:   400;
	--rb-weight-medium:   500;
	--rb-weight-semibold: 600;
	--rb-weight-bold:     700;
	--rb-weight-black:    800;

	--rb-leading-tight:  1.2;
	--rb-leading-snug:   1.35;
	--rb-leading-normal: 1.55;
	--rb-leading-relaxed:1.7;

	--rb-tracking-tight: -0.02em;
	--rb-tracking-wide:  0.04em;
	--rb-tracking-wider: 0.06em;

	/* Jarak */
	--rb-space-3xs: 0.25rem;
	--rb-space-2xs: 0.375rem;
	--rb-space-xs:  0.625rem;
	--rb-space-sm:  0.875rem;
	--rb-space-md:  1.25rem;
	--rb-space-lg:  1.75rem;
	--rb-space-xl:  2.25rem;
	--rb-space-2xl: 3rem;
	--rb-space-3xl: 3.5rem;

	/* Layout */
	--rb-container:  1280px;
	--rb-measure:    720px;
	--rb-measure-sm: 680px;
	--rb-gutter:     1.5rem;
	--rb-gap-grid:   3rem;
	--rb-radius:     0;
}

/* =========================================================================
   2. RESET RINGAN
   ========================================================================= */

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

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

body {
	margin: 0;
	background-color: var(--rb-bg);
	color: var(--rb-ink);
	font-family: var(--rb-font-sans);
	font-size: var(--rb-text-md);
	line-height: var(--rb-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
nav ul, nav ol { list-style: none; }

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

a {
	color: var(--rb-accent);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover,
a:focus-visible { color: var(--rb-accent-dark); text-decoration: underline; }

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

button, input, textarea, select { font: inherit; color: inherit; }

/* Utilitas aksesibilitas */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.rb-skip-link:focus {
	position: fixed;
	top: 0.5rem; left: 0.5rem;
	z-index: 999;
	width: auto; height: auto;
	clip: auto; clip-path: none;
	padding: 0.75rem 1rem;
	background-color: var(--rb-ink);
	color: var(--rb-bg);
	font-weight: var(--rb-weight-bold);
}

.rb-container {
	width: 100%;
	max-width: var(--rb-container);
	margin-inline: auto;
	padding-inline: var(--rb-gutter);
}

/* =========================================================================
   3. HEADER SITUS
   ========================================================================= */

.rb-siteheader {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--rb-bg);
	border-bottom: 1px solid var(--rb-rule);
}

.rb-siteheader__utility {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rb-space-md);
	padding-block: 0.625rem;
	border-bottom: 1px solid var(--rb-rule-light);
	font-size: var(--rb-text-2xs);
	color: var(--rb-meta);
}

.rb-siteheader__date {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.rb-utilitynav {
	display: flex;
	align-items: center;
	gap: 1.125rem;
}

.rb-utilitynav a {
	font-size: var(--rb-text-2xs);
	font-weight: var(--rb-weight-semibold);
	color: var(--rb-muted);
}

.rb-siteheader__brand {
	display: flex;
	justify-content: center;
	padding-top: var(--rb-space-md);
}

.rb-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-size: 1.75rem;
	font-weight: var(--rb-weight-black);
	letter-spacing: var(--rb-tracking-tight);
	line-height: 1.1;
	color: var(--rb-ink);
}
.rb-brand:hover,
.rb-brand:focus-visible { color: var(--rb-ink); text-decoration: none; }
.rb-brand__accent { color: var(--rb-accent); }

/* Logo diukur relatif terhadap teks di sebelahnya, sehingga proporsinya tetap
   terjaga di header maupun footer tanpa aturan piksel terpisah. */
.rb-brand__mark {
	width: auto;
	height: 1.25em;
	flex-shrink: 0;
	object-fit: contain;
}

.rb-siteheader__tagline {
	margin-top: var(--rb-space-3xs);
	font-size: var(--rb-text-2xs);
	color: var(--rb-meta);
	text-align: center;
}

.rb-siteheader__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rb-space-md);
	padding-block: var(--rb-space-sm);
}

.rb-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.625rem;
}

.rb-nav__list a {
	font-size: var(--rb-text-sm);
	font-weight: var(--rb-weight-medium);
	color: var(--rb-ink-soft);
}

.rb-nav__list .current-menu-item > a,
.rb-nav__list .current-cat > a,
.rb-nav__list .current-menu-ancestor > a {
	font-weight: var(--rb-weight-bold);
	color: var(--rb-accent);
}

/* =========================================================================
   4. AREA UTAMA
   ========================================================================= */

.rb-main {
	display: block;
	width: 100%;
	max-width: var(--rb-container);
	margin-inline: auto;
	padding: var(--rb-space-xl) var(--rb-gutter) 4rem;
}

.rb-main--narrow { max-width: var(--rb-measure); }

.rb-breadcrumb {
	margin-bottom: var(--rb-space-md);
	font-size: var(--rb-text-2xs);
	color: var(--rb-meta);
}
.rb-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.rb-breadcrumb__list li + li::before {
	content: "\203A";
	margin-right: 0.5rem;
	color: var(--rb-rank);
}
.rb-breadcrumb a { color: var(--rb-muted); }

/* =========================================================================
   5. GAMBAR & PLACEHOLDER
   ========================================================================= */

.rb-figure { margin: 0; }

.rb-figure__media {
	position: relative;
	display: block;
	background: var(--rb-placeholder);
	overflow: hidden;
}
.rb-figure__media img { width: 100%; height: 100%; object-fit: cover; }

.rb-figure--wide   .rb-figure__media { aspect-ratio: 16 / 10; }
.rb-figure--cinema .rb-figure__media { aspect-ratio: 16 / 9; }
.rb-figure--square .rb-figure__media { aspect-ratio: 1 / 1; }

/* Tanpa rasio paksa: gambar tampil utuh sesuai proporsi aslinya. */
.rb-figure--natural .rb-figure__media { background: none; }
.rb-figure--natural .rb-figure__media img { height: auto; object-fit: fill; }

.rb-figure__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0.5rem;
	font-family: var(--rb-font-mono);
	font-size: 0.6875rem;
	color: #6E6C5C;
	text-align: center;
}

.rb-figure__caption {
	padding-top: var(--rb-space-2xs);
	font-size: var(--rb-text-2xs);
	line-height: var(--rb-leading-snug);
	color: var(--rb-meta);
}

/* =========================================================================
   6. KOMPONEN KARTU ARTIKEL
   ========================================================================= */

.rb-eyebrow {
	display: inline-block;
	align-self: flex-start;
	padding: 0.25rem 0.625rem;
	background-color: var(--rb-accent);
	color: var(--rb-accent-ink);
	font-size: var(--rb-text-2xs);
	font-weight: var(--rb-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--rb-tracking-wide);
}

.rb-kicker {
	font-size: var(--rb-text-xs);
	font-weight: var(--rb-weight-bold);
	color: var(--rb-accent);
	text-transform: uppercase;
	letter-spacing: var(--rb-tracking-wide);
}

.rb-meta {
	font-size: var(--rb-text-2xs);
	color: var(--rb-meta);
}
.rb-meta a { color: var(--rb-meta); }
.rb-meta__sep { padding-inline: 0.3em; }

.rb-excerpt {
	color: var(--rb-muted);
	line-height: var(--rb-leading-normal);
	text-wrap: pretty;
}

.rb-headline {
	font-weight: var(--rb-weight-bold);
	line-height: var(--rb-leading-snug);
	letter-spacing: var(--rb-tracking-tight);
	text-wrap: pretty;
}
.rb-headline a { color: inherit; }
.rb-headline a:hover,
.rb-headline a:focus-visible { color: var(--rb-accent); text-decoration: none; }

/* Kartu hero */
.rb-card-hero {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-sm);
}
.rb-card-hero .rb-headline {
	font-size: var(--rb-text-6xl);
	line-height: 1.15;
	font-weight: var(--rb-weight-black);
}
.rb-card-hero .rb-excerpt { font-size: var(--rb-text-lg); }
.rb-card-hero__cta {
	font-size: var(--rb-text-sm);
	font-weight: var(--rb-weight-bold);
	color: var(--rb-accent);
}

/* Kartu unggulan rubrik */
.rb-card-feature {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-xs);
}
.rb-card-feature .rb-headline {
	font-size: var(--rb-text-2xl);
	line-height: 1.25;
	font-weight: var(--rb-weight-black);
}
.rb-card-feature .rb-excerpt { font-size: var(--rb-text-base); }

/* Kartu daftar ringkas */
.rb-card-list {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-2xs);
	padding-bottom: var(--rb-space-md);
	margin-bottom: var(--rb-space-md);
	border-bottom: 1px solid var(--rb-rule);
}
.rb-card-list:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.rb-card-list .rb-headline { font-size: var(--rb-text-md); line-height: 1.3; }
.rb-card-list .rb-excerpt { font-size: var(--rb-text-xs); line-height: 1.5; }

/* Kartu baris dengan thumbnail */
.rb-card-row {
	display: flex;
	gap: var(--rb-space-md);
	padding-block: var(--rb-space-md);
	border-bottom: 1px solid var(--rb-rule);
}
.rb-card-row > .rb-figure { flex: 0 0 220px; }
.rb-card-row__body {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-2xs);
}
.rb-card-row .rb-headline { font-size: var(--rb-text-xl); line-height: 1.3; }
.rb-card-row .rb-excerpt { font-size: var(--rb-text-sm); }

/* Kartu hasil pencarian */
.rb-card-search {
	display: flex;
	gap: var(--rb-space-md);
	padding-bottom: var(--rb-space-md);
	border-bottom: 1px solid var(--rb-rule);
}
.rb-card-search > .rb-figure { flex: 0 0 84px; width: 84px; }
.rb-card-search__body {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-2xs);
}
.rb-card-search .rb-headline { font-size: var(--rb-text-md); }

/* Kartu "Baca juga" */
.rb-card-related {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-2xs);
}
.rb-card-related .rb-headline { font-size: var(--rb-text-base); line-height: 1.3; }

/* =========================================================================
   7. JUDUL SEKSI
   ========================================================================= */

.rb-sectiontitle {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--rb-space-md);
	margin-bottom: var(--rb-space-md);
	padding-bottom: var(--rb-space-xs);
	border-bottom: 2px solid var(--rb-rule-strong);
	font-size: 1.25rem;
	font-weight: var(--rb-weight-black);
}

.rb-sectiontitle--small {
	font-size: var(--rb-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.rb-sectiontitle__link {
	flex-shrink: 0;
	font-size: var(--rb-text-2xs);
	font-weight: var(--rb-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--rb-tracking-wide);
	color: var(--rb-accent);
}

/* =========================================================================
   8. BERANDA
   ========================================================================= */

.rb-hero {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--rb-gap-grid);
	padding-bottom: var(--rb-space-md);
	border-bottom: 1px solid var(--rb-rule);
}

.rb-rail {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-lg);
}

.rb-tip {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-xs);
	padding: var(--rb-space-md);
	border: 1px solid var(--rb-rule-strong);
}
.rb-tip__label {
	font-size: var(--rb-text-2xs);
	font-weight: var(--rb-weight-black);
	text-transform: uppercase;
	letter-spacing: var(--rb-tracking-wider);
	color: var(--rb-accent);
}
.rb-tip p {
	font-size: var(--rb-text-base);
	line-height: 1.5;
	color: var(--rb-ink-soft);
	text-wrap: pretty;
}
.rb-tip__link {
	font-size: var(--rb-text-xs);
	font-weight: var(--rb-weight-bold);
}

.rb-popular__list {
	list-style: none;
	counter-reset: rb-rank;
}
.rb-popular__item {
	display: flex;
	gap: var(--rb-space-sm);
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--rb-rule);
	counter-increment: rb-rank;
}
/* Nomor peringkat digambar dari counter, bukan teks tambahan, agar mesin
   pembaca tidak menemukan angka ganda pada daftar berurutan. */
.rb-popular__item::before {
	content: counter(rb-rank);
	font-size: 1.375rem;
	font-weight: var(--rb-weight-black);
	color: var(--rb-rank);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.rb-popular__body {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-3xs);
}
.rb-popular__body .rb-headline { font-size: var(--rb-text-base); line-height: 1.3; }

.rb-rubrik {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	column-gap: var(--rb-gap-grid);
	row-gap: var(--rb-space-lg);
	margin-top: var(--rb-space-3xl);
}
.rb-rubrik > .rb-sectiontitle {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

.rb-rubrik__list { display: flex; flex-direction: column; }

/* Daftar standar (halaman berikutnya, arsip tanggal, dsb.) */
.rb-stream { display: flex; flex-direction: column; }

.rb-pagetitle {
	margin-bottom: var(--rb-space-md);
	font-size: var(--rb-text-4xl);
	font-weight: var(--rb-weight-black);
	letter-spacing: var(--rb-tracking-tight);
	line-height: 1.2;
}

/* =========================================================================
   9. ARSIP / KATEGORI
   ========================================================================= */

.rb-archiveheader {
	max-width: var(--rb-measure-sm);
	margin: 0 auto var(--rb-space-lg);
	text-align: center;
}
.rb-archiveheader__title {
	margin-bottom: var(--rb-space-sm);
	font-size: var(--rb-text-6xl);
	font-weight: var(--rb-weight-black);
	letter-spacing: var(--rb-tracking-tight);
	line-height: 1.15;
}
.rb-archiveheader__description {
	font-size: var(--rb-text-md);
	line-height: 1.6;
	color: var(--rb-muted);
	text-wrap: pretty;
}
.rb-archiveheader__description > * + * { margin-top: var(--rb-space-xs); }
.rb-archiveheader__description a { color: var(--rb-accent); }

.rb-archivelead {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--rb-gap-grid);
}
.rb-archivelead .rb-headline { font-size: var(--rb-text-4xl); line-height: 1.2; font-weight: var(--rb-weight-black); }
.rb-archivelead .rb-excerpt { font-size: var(--rb-text-md); line-height: 1.6; }

.rb-archivemore {
	margin-top: var(--rb-space-3xl);
	padding-top: var(--rb-space-xl);
	border-top: 1px solid var(--rb-rule);
}

/* =========================================================================
   10. ARTIKEL TUNGGAL
   ========================================================================= */

.rb-article { max-width: var(--rb-measure); margin-inline: auto; }

.rb-article__header {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-xs);
	margin-bottom: var(--rb-space-md);
}
.rb-article__title {
	font-size: var(--rb-text-5xl);
	line-height: 1.2;
	font-weight: var(--rb-weight-black);
	letter-spacing: var(--rb-tracking-tight);
	text-wrap: pretty;
}
.rb-article__standfirst {
	font-size: var(--rb-text-lg);
	line-height: 1.6;
	color: var(--rb-muted);
	text-wrap: pretty;
}
.rb-article__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--rb-text-xs);
	color: var(--rb-meta);
}
.rb-article__byline a { color: var(--rb-muted); font-weight: var(--rb-weight-semibold); }

.rb-article__figure { margin-bottom: var(--rb-space-lg); }

.rb-article__body { font-size: var(--rb-text-lg); line-height: var(--rb-leading-relaxed); color: var(--rb-ink-soft); }
.rb-article__body > * + * { margin-top: var(--rb-space-md); }
.rb-article__body h2 { margin-top: var(--rb-space-xl); font-size: var(--rb-text-2xl); font-weight: var(--rb-weight-black); line-height: 1.25; }
.rb-article__body h3 { margin-top: var(--rb-space-lg); font-size: var(--rb-text-xl); font-weight: var(--rb-weight-bold); }
.rb-article__body ul,
.rb-article__body ol { padding-left: 1.25rem; }
.rb-article__body li + li { margin-top: 0.5rem; }
.rb-article__body ul { list-style: disc; }
.rb-article__body ol { list-style: decimal; }
.rb-article__body blockquote {
	padding-left: var(--rb-space-md);
	border-left: 3px solid var(--rb-accent);
	font-size: var(--rb-text-xl);
	line-height: 1.5;
	color: var(--rb-ink);
}
.rb-article__body figure { margin-block: var(--rb-space-lg); }
.rb-article__body figcaption {
	padding-top: var(--rb-space-2xs);
	font-size: var(--rb-text-2xs);
	color: var(--rb-meta);
}
.rb-article__body code { font-family: var(--rb-font-mono); font-size: 0.9em; background: var(--rb-rule-light); padding: 0.1em 0.35em; }
.rb-article__body table { width: 100%; border-collapse: collapse; font-size: var(--rb-text-base); }
.rb-article__body th,
.rb-article__body td { padding: 0.625rem; border-bottom: 1px solid var(--rb-rule); text-align: left; }

.rb-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--rb-space-lg);
	list-style: none;
}
.rb-taglist a {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--rb-rule);
	font-size: var(--rb-text-2xs);
	font-weight: var(--rb-weight-semibold);
	color: var(--rb-muted);
}
.rb-taglist a:hover { border-color: var(--rb-accent); color: var(--rb-accent); text-decoration: none; }

.rb-related { margin-top: var(--rb-space-2xl); }
.rb-related__title {
	padding-top: var(--rb-space-md);
	border-top: 1px solid var(--rb-rule);
	font-size: var(--rb-text-md);
	font-weight: var(--rb-weight-black);
}
.rb-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--rb-space-md);
	margin-top: var(--rb-space-md);
}

.rb-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rb-space-md);
	margin-top: var(--rb-space-2xl);
	padding-top: var(--rb-space-md);
	border-top: 1px solid var(--rb-rule);
}
.rb-postnav__label {
	display: block;
	font-size: var(--rb-text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--rb-tracking-wide);
	color: var(--rb-meta);
	margin-bottom: var(--rb-space-3xs);
}
.rb-postnav__title { font-size: var(--rb-text-base); font-weight: var(--rb-weight-bold); line-height: 1.3; }
.rb-postnav__next { text-align: right; }

/* =========================================================================
   11. PENCARIAN
   ========================================================================= */

.rb-searchpage { max-width: var(--rb-measure); margin-inline: auto; }
.rb-searchpage__title { margin-bottom: var(--rb-space-md); font-size: var(--rb-text-3xl); font-weight: var(--rb-weight-black); }

.rb-searchform { display: flex; gap: 0; }
.rb-searchform__field {
	flex: 1;
	padding: 0.875rem 1rem;
	background-color: var(--rb-bg);
	border: 2px solid var(--rb-rule-strong);
	border-radius: var(--rb-radius);
	font-size: var(--rb-text-md);
	outline: none;
}
.rb-searchform__field::placeholder { color: var(--rb-meta); }
.rb-searchform__field:focus { border-color: var(--rb-accent); }
.rb-searchform__submit {
	padding: 0.875rem 1.25rem;
	background-color: var(--rb-ink);
	color: var(--rb-bg);
	border: 2px solid var(--rb-rule-strong);
	border-left: 0;
	font-size: var(--rb-text-sm);
	font-weight: var(--rb-weight-bold);
	cursor: pointer;
}
.rb-searchform__submit:hover { background-color: var(--rb-accent); border-color: var(--rb-accent); }

.rb-searchresults {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-md);
	margin-top: var(--rb-space-lg);
}
.rb-searchcount { font-size: var(--rb-text-xs); color: var(--rb-meta); }

/* =========================================================================
   12. HALAMAN STATIS & 404
   ========================================================================= */

.rb-page { max-width: var(--rb-measure-sm); margin-inline: auto; }
.rb-page__title { margin-bottom: var(--rb-space-md); font-size: var(--rb-text-4xl); font-weight: var(--rb-weight-black); letter-spacing: var(--rb-tracking-tight); }
.rb-page__body { font-size: var(--rb-text-lg); line-height: var(--rb-leading-relaxed); color: var(--rb-ink-soft); }
.rb-page__body > * + * { margin-top: var(--rb-space-md); }
.rb-page__body h2 { margin-top: var(--rb-space-xl); font-size: var(--rb-text-2xl); font-weight: var(--rb-weight-black); }

.rb-contact {
	margin-top: var(--rb-space-xl);
	padding: var(--rb-space-md);
	border: 1px solid var(--rb-rule-strong);
}
.rb-contact__title {
	font-size: var(--rb-text-2xs);
	font-weight: var(--rb-weight-black);
	text-transform: uppercase;
	letter-spacing: var(--rb-tracking-wider);
	color: var(--rb-accent);
	margin-bottom: var(--rb-space-xs);
}
.rb-contact__list { list-style: none; display: flex; flex-direction: column; gap: var(--rb-space-2xs); font-size: var(--rb-text-base); }
.rb-contact__list dt { font-weight: var(--rb-weight-bold); }
.rb-contact dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; font-size: var(--rb-text-base); }
.rb-contact dt { font-weight: var(--rb-weight-bold); }
.rb-contact dd { margin: 0; color: var(--rb-muted); }

.rb-404 { max-width: var(--rb-container); margin-inline: auto; }
.rb-404__header { max-width: var(--rb-measure-sm); margin: 0 auto var(--rb-space-xl); text-align: center; }
.rb-404__code {
	font-size: 4rem;
	font-weight: var(--rb-weight-black);
	letter-spacing: var(--rb-tracking-tight);
	color: var(--rb-rank);
	line-height: 1;
}
.rb-404__title { margin-block: var(--rb-space-sm); font-size: var(--rb-text-4xl); font-weight: var(--rb-weight-black); }
.rb-404__text { font-size: var(--rb-text-md); line-height: 1.6; color: var(--rb-muted); text-wrap: pretty; }
.rb-404__header search,
.rb-searchpage search { display: block; }
.rb-404__header search { max-width: var(--rb-measure-sm); margin: var(--rb-space-md) auto 0; }
.rb-searchpage search { margin-bottom: var(--rb-space-lg); }

.rb-categorygrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--rb-space-md);
	list-style: none;
	margin-top: var(--rb-space-md);
}
.rb-categorygrid__item {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-3xs);
	padding: var(--rb-space-md);
	border: 1px solid var(--rb-rule);
	transition: border-color 0.15s ease;
}
.rb-categorygrid__item:hover { border-color: var(--rb-accent); }
.rb-categorygrid__name { font-size: var(--rb-text-xl); font-weight: var(--rb-weight-bold); }
.rb-categorygrid__name a { color: var(--rb-ink); }
.rb-categorygrid__name a:hover { color: var(--rb-accent); text-decoration: none; }
.rb-categorygrid__desc { font-size: var(--rb-text-xs); line-height: 1.5; color: var(--rb-muted); text-wrap: pretty; }
.rb-categorygrid__count { font-size: var(--rb-text-2xs); color: var(--rb-meta); }

/* =========================================================================
   13. PAGINASI
   ========================================================================= */

.rb-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--rb-space-xl);
	padding-top: var(--rb-space-md);
	border-top: 1px solid var(--rb-rule);
}
.rb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--rb-rule);
	font-size: var(--rb-text-sm);
	font-weight: var(--rb-weight-semibold);
	color: var(--rb-muted);
}
.rb-pagination .page-numbers:hover { border-color: var(--rb-accent); text-decoration: none; }
.rb-pagination .page-numbers.current {
	background-color: var(--rb-ink);
	border-color: var(--rb-ink);
	color: var(--rb-bg);
}

/* =========================================================================
   14. FOOTER SITUS
   ========================================================================= */

.rb-sitefooter {
	border-top: 1px solid var(--rb-rule);
	padding-block: var(--rb-space-xl);
}

.rb-sitefooter__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--rb-space-xl);
}

.rb-sitefooter__brand {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-xs);
	min-width: 180px;
}
.rb-sitefooter__brand .rb-brand { font-size: var(--rb-text-xl); }
.rb-sitefooter__brand .rb-brand__mark { height: 1.4em; }
.rb-sitefooter__blurb { max-width: 220px; font-size: var(--rb-text-xs); color: var(--rb-meta); }

.rb-footercol {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-xs);
}
.rb-footercol__title {
	font-size: var(--rb-text-2xs);
	font-weight: var(--rb-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--rb-tracking-wide);
	color: var(--rb-meta);
}
.rb-footercol ul { list-style: none; display: flex; flex-direction: column; gap: var(--rb-space-xs); }
.rb-footercol a { font-size: var(--rb-text-sm); color: var(--rb-ink-soft); }
.rb-footercol a:hover { color: var(--rb-accent); }

.rb-widget { min-width: 200px; }
.rb-widget .widget-title,
.rb-widget h2 {
	font-size: var(--rb-text-2xs);
	font-weight: var(--rb-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--rb-tracking-wide);
	color: var(--rb-meta);
	margin-bottom: var(--rb-space-xs);
}
.rb-widget ul { list-style: none; display: flex; flex-direction: column; gap: var(--rb-space-xs); }
.rb-widget a { font-size: var(--rb-text-sm); color: var(--rb-ink-soft); }

.rb-sitefooter__legal {
	margin-top: var(--rb-space-xl);
	font-size: var(--rb-text-2xs);
	color: var(--rb-faint);
}

/* =========================================================================
   15. KOMENTAR
   ========================================================================= */

.rb-comments { max-width: var(--rb-measure); margin: var(--rb-space-2xl) auto 0; padding-top: var(--rb-space-md); border-top: 1px solid var(--rb-rule); }
.rb-comments__title { font-size: var(--rb-text-md); font-weight: var(--rb-weight-black); margin-bottom: var(--rb-space-md); }
.rb-comments .comment-list { list-style: none; }
.rb-comments .comment-list li { padding-block: var(--rb-space-md); border-bottom: 1px solid var(--rb-rule); }
.rb-comments input[type="text"],
.rb-comments input[type="email"],
.rb-comments input[type="url"],
.rb-comments textarea {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--rb-rule-strong);
	background: var(--rb-bg);
}
.rb-comments .submit {
	padding: 0.75rem 1.25rem;
	background: var(--rb-ink);
	color: var(--rb-bg);
	border: 0;
	font-weight: var(--rb-weight-bold);
	cursor: pointer;
}

/* =========================================================================
   16. RESPONSIF
   ========================================================================= */

@media (max-width: 860px) {
	:root {
		--rb-gap-grid: 1.75rem;
	}

	/* Seluruh rubrik tetap terlihat, melipat ke baris berikutnya bila perlu. */
	.rb-nav__list { gap: 0.75rem 1.125rem; }
	.rb-nav__list a { font-size: var(--rb-text-xs); }

	.rb-hero,
	.rb-rubrik,
	.rb-archivelead { grid-template-columns: 1fr; }

	.rb-card-hero .rb-headline { font-size: var(--rb-text-4xl); }
	.rb-archiveheader__title { font-size: var(--rb-text-4xl); }
	.rb-article__title { font-size: var(--rb-text-4xl); }

	.rb-card-row { flex-wrap: wrap; }
	.rb-card-row > .rb-figure { flex-basis: 100%; }

	.rb-postnav { grid-template-columns: 1fr; }
	.rb-postnav__next { text-align: left; }
}

@media (max-width: 560px) {
	.rb-main { padding-top: var(--rb-space-md); }
	.rb-card-search { gap: var(--rb-space-xs); }
	.rb-card-search > .rb-figure { flex-basis: 64px; width: 64px; }
	.rb-404__code { font-size: 3rem; }
	.rb-searchform { flex-wrap: wrap; }
	.rb-searchform__submit { width: 100%; border-left: 2px solid var(--rb-rule-strong); border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 860px) {
	.rb-hub__title { font-size: var(--rb-text-4xl); }
	.rb-authorhead__name { font-size: var(--rb-text-4xl); }
}

@media (max-width: 560px) {
	.rb-table table { min-width: 30rem; }
	.rb-faq dt { font-size: var(--rb-text-lg); }
	.rb-faq dd { font-size: var(--rb-text-md); }
}

/* =========================================================================
   17. CETAK
   ========================================================================= */

@media print {
	.rb-siteheader__utility,
	.rb-siteheader__nav,
	.rb-rail,
	.rb-related,
	.rb-topictrail,
	.rb-authorlinks,
	.rb-postnav,
	.rb-sitefooter { display: none; }
	body { background: #fff; color: #000; }
	.rb-main { max-width: none; padding: 0; }
}

/* =========================================================================
   18. HUB TOPIK
   ========================================================================= */

.rb-hub { max-width: var(--rb-measure); margin-inline: auto; }

.rb-hub__header {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-xs);
	margin-bottom: var(--rb-space-lg);
}

.rb-hub__title {
	font-size: var(--rb-text-5xl);
	line-height: 1.2;
	font-weight: var(--rb-weight-black);
	letter-spacing: var(--rb-tracking-tight);
	text-wrap: pretty;
}

.rb-hub__standfirst {
	font-size: var(--rb-text-lg);
	line-height: 1.6;
	color: var(--rb-muted);
	text-wrap: pretty;
}

.rb-hub__meta { font-size: var(--rb-text-2xs); color: var(--rb-meta); }

/* Isi pilar memakai gaya baca yang sama dengan artikel. */
.rb-hub__pillar {
	font-size: var(--rb-text-lg);
	line-height: var(--rb-leading-relaxed);
	color: var(--rb-ink-soft);
}
.rb-hub__pillar > * + * { margin-top: var(--rb-space-md); }
.rb-hub__pillar h2 {
	margin-top: var(--rb-space-xl);
	font-size: var(--rb-text-2xl);
	font-weight: var(--rb-weight-black);
	line-height: 1.25;
}
.rb-hub__pillar h3 {
	margin-top: var(--rb-space-lg);
	font-size: var(--rb-text-xl);
	font-weight: var(--rb-weight-bold);
}
.rb-hub__pillar ul,
.rb-hub__pillar ol { padding-left: 1.25rem; }
.rb-hub__pillar ul { list-style: disc; }
.rb-hub__pillar ol { list-style: decimal; }
.rb-hub__pillar li + li { margin-top: 0.5rem; }
.rb-hub__pillar blockquote {
	padding-left: var(--rb-space-md);
	border-left: 3px solid var(--rb-accent);
	font-size: var(--rb-text-xl);
	line-height: 1.5;
	color: var(--rb-ink);
}

.rb-hub__children,
.rb-hub__posts { margin-top: var(--rb-space-2xl); }

.rb-hub__empty {
	font-size: var(--rb-text-base);
	color: var(--rb-muted);
	text-wrap: pretty;
}

/* Kartu sub-topik */
.rb-topicgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--rb-space-md);
	list-style: none;
}
.rb-topicgrid__item {
	display: flex;
	flex-direction: column;
	gap: var(--rb-space-3xs);
	padding: var(--rb-space-md);
	border: 1px solid var(--rb-rule);
	transition: border-color 0.15s ease;
}
.rb-topicgrid__item:hover { border-color: var(--rb-accent); }
.rb-topicgrid__name { font-size: var(--rb-text-xl); font-weight: var(--rb-weight-bold); line-height: 1.25; }
.rb-topicgrid__name a { color: var(--rb-ink); }
.rb-topicgrid__name a:hover { color: var(--rb-accent); text-decoration: none; }
.rb-topicgrid__desc { font-size: var(--rb-text-xs); line-height: 1.5; color: var(--rb-muted); text-wrap: pretty; }
.rb-topicgrid__count { font-size: var(--rb-text-2xs); color: var(--rb-meta); }

/* Jejak topik di bawah artikel */
.rb-topictrail {
	margin-top: var(--rb-space-lg);
	padding: var(--rb-space-md);
	border: 1px solid var(--rb-rule);
}
.rb-topictrail__label {
	font-size: var(--rb-text-2xs);
	font-weight: var(--rb-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--rb-tracking-wide);
	color: var(--rb-meta);
	margin-bottom: var(--rb-space-3xs);
}
.rb-topictrail__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	font-size: var(--rb-text-base);
	font-weight: var(--rb-weight-semibold);
}
.rb-topictrail__list li + li::before {
	content: "\203A";
	margin-right: 0.4rem;
	color: var(--rb-rank);
}

/* =========================================================================
   19. TABEL DALAM KONTEN
   ========================================================================= */

/* Wadah geser: tabel HTML tidak bisa menyusut di bawah lebar isinya, jadi di
   layar sempit ia digeser mendatar alih-alih dipaksa mengecil. */
.rb-table {
	position: relative;
	margin-block: var(--rb-space-lg);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;

	/* Bayangan di tepi kanan sebagai isyarat masih ada kolom di sebelahnya.
	   Menghilang sendiri ketika tabel sudah digeser sampai ujung. */
	background:
		linear-gradient(to right, var(--rb-bg) 30%, rgba(253, 253, 251, 0)) left center / 2.5rem 100% no-repeat,
		linear-gradient(to left, var(--rb-bg) 30%, rgba(253, 253, 251, 0)) right center / 2.5rem 100% no-repeat,
		linear-gradient(to right, rgba(27, 27, 24, 0.12), rgba(27, 27, 24, 0)) left center / 1rem 100% no-repeat,
		linear-gradient(to left, rgba(27, 27, 24, 0.12), rgba(27, 27, 24, 0)) right center / 1rem 100% no-repeat;
	background-attachment: local, local, scroll, scroll;
}
.rb-table:focus-visible { outline: 2px solid var(--rb-accent); outline-offset: 2px; }

.rb-table table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: var(--rb-text-base);
	line-height: 1.45;
}
.rb-table caption {
	padding-bottom: var(--rb-space-xs);
	font-size: var(--rb-text-base);
	font-weight: var(--rb-weight-semibold);
	line-height: 1.4;
	color: var(--rb-ink-soft);
	text-align: left;
}
.rb-table th,
.rb-table td {
	padding: 0.625rem 0.75rem;
	border-bottom: 1px solid var(--rb-rule);
	text-align: left;
	vertical-align: top;
}
.rb-table thead th {
	border-bottom: 2px solid var(--rb-rule-strong);
	font-weight: var(--rb-weight-bold);
	white-space: nowrap;
}
.rb-table tbody th { font-weight: var(--rb-weight-semibold); }

/* =========================================================================
   20. BLOK TANYA JAWAB
   ========================================================================= */

.rb-faq { margin-top: var(--rb-space-xl); }
.rb-faq > h2 {
	margin-bottom: var(--rb-space-md);
	padding-bottom: var(--rb-space-xs);
	border-bottom: 2px solid var(--rb-rule-strong);
	font-size: var(--rb-text-2xl);
	font-weight: var(--rb-weight-black);
}
.rb-faq dl { display: flex; flex-direction: column; }
.rb-faq dt {
	margin-top: var(--rb-space-md);
	font-size: var(--rb-text-xl);
	font-weight: var(--rb-weight-bold);
	line-height: 1.35;
	color: var(--rb-ink);
	text-wrap: pretty;
}
.rb-faq dt:first-of-type { margin-top: 0; }
.rb-faq dd {
	margin: var(--rb-space-2xs) 0 0;
	padding-bottom: var(--rb-space-md);
	border-bottom: 1px solid var(--rb-rule);
	font-size: var(--rb-text-lg);
	line-height: var(--rb-leading-relaxed);
	color: var(--rb-ink-soft);
	text-wrap: pretty;
}
.rb-faq dd:last-of-type { border-bottom: 0; padding-bottom: 0; }

/* =========================================================================
   21. HALAMAN PENULIS
   ========================================================================= */

.rb-authorpage { max-width: var(--rb-measure); margin-inline: auto; }

/* Rata kiri, bukan rata tengah seperti arsip rubrik: bio penulis adalah
   paragraf panjang, dan teks panjang yang dirata-tengah menyulitkan mata
   menemukan awal baris berikutnya. */
.rb-authorhead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rb-space-xs);
	padding-bottom: var(--rb-space-lg);
	border-bottom: 1px solid var(--rb-rule);
	text-align: left;
}

.rb-authorhead__avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

.rb-authorhead__name {
	font-size: var(--rb-text-5xl);
	line-height: 1.15;
	font-weight: var(--rb-weight-black);
	letter-spacing: var(--rb-tracking-tight);
}

.rb-authorhead__bio {
	font-size: var(--rb-text-lg);
	line-height: var(--rb-leading-relaxed);
	color: var(--rb-ink-soft);
	text-wrap: pretty;
}
.rb-authorhead__bio > * + * { margin-top: var(--rb-space-sm); }
.rb-authorhead__bio a { color: var(--rb-accent); }

.rb-authorhead__count { font-size: var(--rb-text-2xs); color: var(--rb-meta); }

/* Profil sosial */
.rb-authorlinks__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin-top: var(--rb-space-3xs);
}
.rb-authorlinks__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--rb-rule);
	font-size: var(--rb-text-xs);
	font-weight: var(--rb-weight-semibold);
	color: var(--rb-muted);
}
.rb-authorlinks__list a:hover,
.rb-authorlinks__list a:focus-visible {
	border-color: var(--rb-accent);
	color: var(--rb-accent);
	text-decoration: none;
}
.rb-socialicon { flex-shrink: 0; }

/* Bidang liputan */
.rb-authorbeats,
.rb-authorposts { margin-top: var(--rb-space-xl); }

.rb-beatlist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
}
.rb-beatlist a {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	background-color: var(--rb-rule-light);
	font-size: var(--rb-text-xs);
	font-weight: var(--rb-weight-semibold);
	color: var(--rb-ink-soft);
}
.rb-beatlist a:hover,
.rb-beatlist a:focus-visible {
	background-color: var(--rb-accent);
	color: var(--rb-accent-ink);
	text-decoration: none;
}

.rb-authorposts__empty {
	font-size: var(--rb-text-base);
	color: var(--rb-muted);
}

/* =========================================================================
   22. BLOK KONTEN KHUSUS
   ========================================================================= */

/* Ringkasan cepat: ditempatkan setelah paragraf pembuka, di sepertiga awal
   halaman tempat sistem retrieval paling sering memotong kutipan. */
.rb-takeaways {
	margin-block: var(--rb-space-lg);
	padding: var(--rb-space-md) var(--rb-space-lg);
	border-left: 3px solid var(--rb-accent);
	background-color: var(--rb-rule-light);
}
.rb-takeaways > h2 {
	margin-bottom: var(--rb-space-xs);
	font-size: var(--rb-text-md);
	font-weight: var(--rb-weight-black);
	text-transform: uppercase;
	letter-spacing: var(--rb-tracking-wide);
	color: var(--rb-accent-dark);
}
.rb-takeaways ul { padding-left: 1.15rem; list-style: disc; }
.rb-takeaways li {
	font-size: var(--rb-text-md);
	line-height: 1.6;
	color: var(--rb-ink-soft);
	text-wrap: pretty;
}
.rb-takeaways li + li { margin-top: 0.45rem; }

/* Catatan pembaruan: sengaja memakai <p>, bukan <aside>, agar tidak
   diperlakukan sebagai konten pinggiran yang boleh dilewati pengekstrak. */
.rb-updatenote {
	margin-block: var(--rb-space-md);
	padding: var(--rb-space-sm) var(--rb-space-md);
	border: 1px solid var(--rb-rule-strong);
	font-size: var(--rb-text-md);
	line-height: 1.6;
	color: var(--rb-ink-soft);
}
.rb-updatenote strong { color: var(--rb-ink); }

/* Catatan koreksi: ditumpuk di akhir artikel agar riwayatnya bisa ditelusuri. */
.rb-corrections {
	margin-top: var(--rb-space-xl);
	padding-top: var(--rb-space-md);
	border-top: 1px solid var(--rb-rule);
}
.rb-corrections > h2 {
	margin-bottom: var(--rb-space-xs);
	font-size: var(--rb-text-md);
	font-weight: var(--rb-weight-black);
}
.rb-corrections ul { list-style: none; }
.rb-corrections li {
	padding-block: var(--rb-space-2xs);
	font-size: var(--rb-text-base);
	line-height: 1.55;
	color: var(--rb-muted);
}
.rb-corrections li + li { border-top: 1px solid var(--rb-rule-light); }
.rb-corrections time { font-weight: var(--rb-weight-semibold); color: var(--rb-ink-soft); }