/*
 * Lembar Survei: dasar gaya Pantau Karhutla.
 * Tiga warna (kertas, tinta, sinyal), garis 1px, sudut siku, tanpa bayangan.
 * Sinyal hanya untuk deteksi aktif (24 jam terakhir) dan angka kritis berukuran besar:
 * kontrasnya 3,26:1 terhadap kertas, cukup untuk tanda grafis dan teks >= 24 px saja.
 *
 * Catatan untuk lint taste-skill: garis 1px, huruf mono untuk data, dan penggaris di tepi
 * halaman diwajibkan ARAH DESAIN pemilik proyek; baris terkait diberi taste-skill-ignore.
 */

@font-face {
	font-family: "League Spartan";
	src: url("../fonts/league-spartan.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-italic.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Martian Mono"; /* taste-skill-ignore: mono untuk data diwajibkan ARAH DESAIN */
	src: url("../fonts/martian-mono.woff2") format("woff2");
	font-weight: 300 600;
	font-stretch: 75% 112.5%;
	font-display: swap;
}

:root {
	--kertas: #dde2d3;
	--tinta: #14201a;
	--sinyal: #e8301a;

	--f-judul: "League Spartan", "Futura", "Century Gothic", sans-serif;
	--f-teks: "Source Serif 4", Georgia, serif;
	--f-data: "Martian Mono", ui-monospace, monospace; /* taste-skill-ignore: mono untuk data diwajibkan ARAH DESAIN */

	/* Lima ukuran saja: angka besar, judul, pengantar, teks, data/keterangan. */
	--s1: clamp(4.5rem, 9vw, 9.5rem);
	--s2: clamp(2.25rem, 3.9vw, 3.5rem);
	--s3: clamp(1.25rem, 1.5vw, 1.375rem);
	--s4: 1.125rem;
	--s5: 1rem;

	--tepi: clamp(16px, 2.2vw, 32px);
	--sela: 24px;
	--garis: 1px solid var(--tinta); /* taste-skill-ignore: garis 1px diwajibkan ARAH DESAIN */
	--pita: 56px;
	--penggaris: 30px;

	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

html {
	background: var(--kertas);
	color: var(--tinta);
	scrollbar-color: var(--tinta) var(--kertas);
	scrollbar-width: thin;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	font: 400 var(--s4) / 1.55 var(--f-teks);
	font-optical-sizing: auto;
	caret-color: var(--tinta);
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--tinta); color: var(--kertas); }

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

h1, h2, h3 {
	font-family: var(--f-judul);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: balance;
}

p { margin: 0; }
p, li, figcaption, dd { text-wrap: pretty; }

/* Data: koordinat, waktu, kode, angka tabel. */
.data, time, .angka, code {
	font-family: var(--f-data);
	font-size: var(--s5);
	font-stretch: 87.5%;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

.lewati {
	position: absolute;
	left: var(--tepi);
	top: -100px;
	z-index: 2000;
	background: var(--tinta);
	color: var(--kertas);
	padding: 10px 14px;
}
.lewati:focus { top: 8px; }

/* ---- Pita atas: merek, navigasi, waktu ganda, umur data ---------------------------- */

.pita {
	position: sticky;
	top: 0;
	z-index: 1000;
	min-height: var(--pita);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: 32px;
	padding: 0 var(--tepi);
	background: var(--kertas);
	border-bottom: var(--garis);
}

.merek {
	font: 800 var(--s3) / 1 var(--f-judul);
	text-decoration: none;
	white-space: nowrap;
}

.nav ul {
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav a { text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

.pita-waktu {
	display: flex;
	margin: 0;
	white-space: nowrap;
}
.pita-waktu > div {
	display: flex;
	gap: 8px;
	padding: 0 14px;
	border-left: var(--garis);
	line-height: var(--pita);
}
.pita-waktu > div:last-child { padding-right: 0; }
.pita-waktu dt, .pita-waktu dd { margin: 0; }
.pita-waktu dt { font-weight: 600; }

/* ---- Muka: peta penuh lebar + tepi bawah lembar ------------------------------------- */

.muka {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	height: calc(100svh - var(--pita));
	min-height: 640px;
	border-bottom: var(--garis);
}

.peta {
	position: relative;
	z-index: 0; /* panel Leaflet tetap di dalam peta */
	min-height: 0;
}

.leaflet-container {
	background: var(--kertas);
	font: inherit;
	color: var(--tinta);
}
/* Tinta di atas kertas: tile OSM dijadikan abu, lalu "dicetak" ke warna kertas. */
.leaflet-tile-pane {
	filter: grayscale(1) contrast(0.82) brightness(1.08);
	mix-blend-mode: multiply;
}
.leaflet-bar {
	border: var(--garis) !important;
	border-radius: 0 !important;
	box-shadow: none !important; /* taste-skill-ignore: menghapus bayangan bawaan Leaflet */
}
.leaflet-bar a, .leaflet-bar a:hover {
	width: 34px;
	height: 34px;
	background: var(--kertas);
	color: var(--tinta);
	border-radius: 0 !important;
	border-bottom: var(--garis);
	font: 400 var(--s3) / 34px var(--f-data);
}
.leaflet-bar a:last-child { border-bottom: 0; }
.leaflet-bar a:hover { background: var(--tinta); color: var(--kertas); }
.leaflet-top.leaflet-right { top: calc(var(--penggaris) + 10px); right: calc(var(--penggaris) + 10px); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.leaflet-control.tombol-peta {
	min-height: 36px;
	padding: 0 12px;
	font: 600 var(--s5) / 1 var(--f-teks);
	color: var(--tinta);
	background: var(--kertas);
	border: var(--garis);
	border-radius: 0;
	cursor: pointer;
}
.leaflet-control.tombol-peta:hover { background: var(--tinta); color: var(--kertas); }
.leaflet-control.tombol-peta:disabled { cursor: progress; }
.leaflet-top .leaflet-control, .leaflet-right .leaflet-control { margin: 0; }

.leaflet-popup-content-wrapper {
	background: var(--kertas);
	color: var(--tinta);
	border: var(--garis);
	border-radius: 0;
	box-shadow: none; /* taste-skill-ignore: menghapus bayangan bawaan Leaflet */
}
.leaflet-popup-tip-container { display: none; }
.leaflet-popup-content { margin: 14px 16px; font: 400 var(--s5) / 1.6 var(--f-data); font-stretch: 87.5%; }
.leaflet-popup-content strong { font: 700 var(--s4) / 1.2 var(--f-teks); display: block; margin-bottom: 6px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--tinta); }

/* Penggaris koordinat di keempat tepi peta, seperti lembar peta topografi. */
.penggaris {
	position: absolute;
	z-index: 500;
	background: var(--kertas);
	pointer-events: none;
	overflow: hidden;
}
.penggaris-atas { top: 0; left: var(--penggaris); right: var(--penggaris); height: var(--penggaris); border-bottom: var(--garis); }
.penggaris-bawah { bottom: 0; left: var(--penggaris); right: var(--penggaris); height: 12px; border-top: var(--garis); }
.penggaris-kiri { top: 0; left: 0; bottom: 0; width: var(--penggaris); border-right: var(--garis); }
.penggaris-kanan { top: 0; right: 0; bottom: 0; width: var(--penggaris); border-left: var(--garis); }
.penggaris .tik { position: absolute; background: var(--tinta); }
.penggaris-atas .tik { bottom: 0; width: 1px; height: 5px; } /* taste-skill-ignore: tik penggaris (ARAH DESAIN) */
.penggaris-atas .tik.utama { height: 11px; }
.penggaris-bawah .tik { top: 0; width: 1px; height: 5px; } /* taste-skill-ignore: tik penggaris (ARAH DESAIN) */
.penggaris-bawah .tik.utama { height: 11px; }
.penggaris-kiri .tik { right: 0; height: 1px; width: 5px; } /* taste-skill-ignore: tik penggaris (ARAH DESAIN) */
.penggaris-kanan .tik { left: 0; height: 1px; width: 5px; } /* taste-skill-ignore: tik penggaris (ARAH DESAIN) */
.penggaris-kiri .tik.utama, .penggaris-kanan .tik.utama { width: 11px; }
.penggaris .label {
	position: absolute;
	font: 500 var(--s5) / 1 var(--f-data);
	font-stretch: 75%;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.penggaris-atas .label { top: 7px; transform: translateX(4px); }
.penggaris-kiri .label { left: 7px; writing-mode: vertical-rl; transform: rotate(180deg) translateY(4px); }
.penggaris-kanan .label { right: 7px; writing-mode: vertical-rl; transform: translateY(4px); }

/* Tepi bawah: kartus judul, angka, sumber, dan keterangan, seperti margin lembar peta cetak. */
.tepi-bawah {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sela);
	padding: 22px var(--tepi) 0;
	border-top: var(--garis);
}
.tepi-judul { grid-column: 4 / 8; grid-row: 1; }
.tepi-judul h1 { font-size: var(--s2); margin-bottom: 14px; }
.tepi-angka { grid-column: 1 / 4; grid-row: 1; }
.angka-kritis {
	font: 800 var(--s1) / 0.88 var(--f-judul);
	letter-spacing: -0.02em;
	color: var(--sinyal);
}
.tepi-angka .data { margin-top: 12px; }
.tepi-sumber {
	grid-column: 1 / -1;
	margin: 20px calc(var(--tepi) * -1) 0;
	padding: 12px var(--tepi);
	border-top: var(--garis);
	display: flex;
	gap: 8px 32px;
	flex-wrap: wrap;
}
.tepi-sumber a { margin-left: auto; }
.label-contoh {
	display: inline-block;
	margin-bottom: 12px;
	padding: 4px 8px;
	background: var(--tinta);
	color: var(--kertas);
	font: 600 var(--s5) / 1.3 var(--f-data);
}

.keterangan { grid-column: 8 / 13; grid-row: 1; }
.keterangan-grup { display: grid; grid-template-columns: 1.25fr 1fr 0.9fr; gap: 14px var(--sela); }
.keterangan fieldset, .keterangan .grup { margin: 0; padding: 0; border: 0; min-width: 0; }
.keterangan legend, .keterangan .grup-judul { padding: 0; margin-bottom: 4px; font: 600 var(--s5) / 1.3 var(--f-teks); }
.keterangan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.keterangan li, .keterangan label { display: flex; gap: 8px; align-items: center; font-size: var(--s5); line-height: 1.3; }
.keterangan label { cursor: pointer; }
.keterangan input[type="checkbox"] {
	appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: var(--garis);
	background: var(--kertas);
	display: grid;
	place-content: center;
	flex: none;
}
.keterangan input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; background: var(--tinta); visibility: hidden; }
.keterangan input[type="checkbox"]:checked::before { visibility: visible; }
.keterangan .skala { margin-top: 12px; display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.keterangan .skala p { font-size: var(--s5); }

/* Tanda registrasi (SVG di legenda; di peta digambar di canvas dengan parameter sama). */
.tanda { display: block; overflow: visible; flex: none; }
.tanda circle, .tanda path { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; }
.tanda.aktif { color: var(--sinyal); }

.leaflet-control-scale { margin: 0 !important; }
.leaflet-control-scale-line {
	border: var(--garis);
	border-top: 0;
	background: transparent;
	text-shadow: none; /* taste-skill-ignore: menghapus text-shadow bawaan Leaflet */
	font: 500 var(--s5) / 1.4 var(--f-data);
	font-stretch: 87.5%;
	color: var(--tinta);
}

/* ---- Bagian isi ---------------------------------------------------------------- */

.bagian {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sela);
	padding: clamp(96px, 11vw, 168px) var(--tepi) 0;
}
.bagian > h2 { grid-column: 1 / 10; font-size: var(--s2); margin-bottom: 28px; }
.teks { grid-column: 1 / 8; }
.teks > p + p { margin-top: 1em; }
.pengantar { font-size: var(--s3); line-height: 1.45; }
.samping { grid-column: 9 / 13; font-size: var(--s5); line-height: 1.5; }
.samping p { padding-top: 8px; border-top: var(--garis); }
.samping p + p { margin-top: 18px; }
sup.no { font: 600 var(--s5) / 0 var(--f-data); font-stretch: 75%; margin-left: 2px; vertical-align: 0.45em; }
.samping sup.no { margin: 0 6px 0 0; vertical-align: baseline; }

/* Tabel gaya buletin: garis 1px mendatar, angka rata kanan, angka tabular. */
.tabel {
	width: 100%;
	border-collapse: collapse;
	border-top: 2px solid var(--tinta);
	border-bottom: var(--garis);
}
.tabel caption {
	caption-side: bottom;
	text-align: left;
	padding-top: 10px;
	font-size: var(--s5);
}
.tabel th, .tabel td {
	padding: 9px 12px 9px 0;
	text-align: left;
	vertical-align: baseline;
	border-bottom: var(--garis);
}
.tabel thead th {
	font: 600 var(--s5) / 1.3 var(--f-teks);
	vertical-align: bottom;
}
.tabel tbody th { font-weight: 600; }
.tabel .angka { text-align: right; font-size: var(--s4); font-stretch: 87.5%; }
.tabel thead .angka { font-family: var(--f-teks); font-size: var(--s5); }
.tabel td:last-child, .tabel th:last-child { padding-right: 0; }
.tabel .dengan-tanda { display: inline-flex; gap: 8px; align-items: center; justify-content: flex-end; }

/* ---- Kolofon ------------------------------------------------------------------- */

.kolofon {
	margin-top: clamp(120px, 12vw, 200px);
	background: var(--tinta);
	color: var(--kertas);
	padding: clamp(72px, 8vw, 120px) var(--tepi) var(--tepi);
}
.kolofon ::selection { background: var(--kertas); color: var(--tinta); }
.kolofon :focus-visible { outline-color: var(--kertas); }
.kolofon-isi {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sela);
}
.kolofon h2 { grid-column: 1 / 5; font-size: var(--s2); }
.kolofon-daftar { grid-column: 5 / 13; margin: 0; columns: 2; column-gap: var(--sela); }
.kolofon-daftar div { break-inside: avoid; padding: 10px 0; border-top: 1px solid var(--kertas); } /* taste-skill-ignore: garis kolofon 1px (ARAH DESAIN) */
.kolofon-daftar dt { font-weight: 600; }
.kolofon-daftar dd { margin: 0; font-size: var(--s5); }
.kolofon-nama {
	margin-top: clamp(64px, 8vw, 120px);
	font: 800 var(--s1) / 0.88 var(--f-judul);
	letter-spacing: -0.02em;
}
.kolofon-imprint { max-width: 75ch; margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--kertas); font-size: var(--s5); } /* taste-skill-ignore: garis kolofon 1px (ARAH DESAIN) */

.kolofon-kepala { grid-column: 1 / 5; }
.kolofon-kepala p { margin-top: 16px; font-size: var(--s5); max-width: 36ch; }

/* ---- Menu (details): terbuka di desktop, dilipat di layar sempit ---------------------- */

.menu > summary { display: none; }
.menu > summary::-webkit-details-marker { display: none; }

/* ---- Halaman, artikel, catatan samping --------------------------------------------- */

.halaman {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sela);
	padding: clamp(56px, 7vw, 104px) var(--tepi) 0;
}
.artikel { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.kepala-halaman { grid-column: 1 / 9; margin-bottom: clamp(40px, 5vw, 72px); }
.kepala-halaman h1 { font-size: var(--s2); }
.kepala-halaman .pengantar { margin-top: 20px; max-width: 52ch; }
.kepala-halaman .meta { margin-top: 16px; }
.kosong { grid-column: 1 / 9; }

.artikel-isi { grid-column: 1 / -1; max-width: 66ch; }
.artikel-isi > * + * { margin-top: 1.1em; }
.artikel-isi h2, .artikel-isi h3 { font-size: var(--s3); line-height: 1.2; margin-top: 2.2em; }
.artikel-isi ul, .artikel-isi ol { padding-left: 1.3em; }
.artikel-isi li + li { margin-top: 0.4em; }
.artikel-isi blockquote { margin-left: 0; padding-left: 20px; border-left: var(--garis); }
.artikel-isi img { max-width: 100%; height: auto; display: block; }
.artikel-isi figure { margin-left: 0; margin-right: 0; }
.artikel-isi figcaption, .artikel-isi .wp-element-caption { font-size: var(--s5); margin-top: 8px; }
.artikel-isi table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--tinta); }
.artikel-isi th, .artikel-isi td { padding: 9px 12px 9px 0; text-align: left; border-bottom: var(--garis); vertical-align: baseline; }
.artikel-isi .wp-block-table { overflow-x: auto; }
sup.no a { text-decoration: none; }

/* Catatan samping: di desktop melayang ke margin kanan sejajar baris rujukannya. */
.catatan-samping {
	display: block;
	margin: 12px 0;
	padding-top: 8px;
	border-top: var(--garis);
	font-size: var(--s5);
	line-height: 1.5;
}
.catatan-samping sup.no { margin: 0 6px 0 0; vertical-align: baseline; }
@media (min-width: 1101px) {
	.catatan-samping { float: right; clear: right; width: 300px; margin: 0.3em -348px 0 0; }
}

.artikel-navigasi { grid-column: 1 / 9; margin-top: 72px; padding-top: 12px; border-top: var(--garis); display: grid; gap: 8px; font-size: var(--s5); }

/* Daftar catatan: judul, tanggal & kategori, ringkasan dalam kolom asimetris. */
.daftar-catatan { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.daftar-catatan li {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sela);
	padding: 22px 0 26px;
	border-bottom: var(--garis);
}
.daftar-catatan h2, .daftar-catatan h3 { grid-column: 1 / 7; font-size: var(--s3); line-height: 1.2; }
.daftar-catatan h2 a, .daftar-catatan h3 a { text-decoration: none; }
.daftar-catatan h2 a:hover, .daftar-catatan h3 a:hover { text-decoration: underline; }
.daftar-catatan .meta { grid-column: 7 / 9; }
.daftar-catatan p:last-child { grid-column: 9 / 13; font-size: var(--s5); }

.kategori { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 24px; }
.kategori a { text-decoration: none; }
.kategori a:hover, .kategori a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }

.pagination { grid-column: 1 / -1; margin-top: 32px; }
.pagination .nav-links { display: flex; gap: 18px; font-family: var(--f-data); font-size: var(--s5); }

/* ---- Beranda ------------------------------------------------------------------- */

.beranda-pekan .teks { grid-column: 1 / 6; }
.beranda-pekan .teks p + p { margin-top: 18px; }
.beranda-tabel { grid-column: 7 / 13; grid-row: 2; }
.pernyataan { grid-column: 1 / 10; font: 700 var(--s3) / 1.35 var(--f-judul); letter-spacing: -0.01em; }
.pernyataan a { text-decoration-thickness: 4px; text-underline-offset: 6px; }

/* Kampanye: satu pernyataan besar, lalu daftar aksi bergaris seperti baris formulir survei (bukan kartu). */
.beranda-kampanye > h2 { grid-column: 1 / -1; font-size: var(--s1); line-height: 0.95; letter-spacing: -0.02em; margin-bottom: 32px; }
.beranda-kampanye .pengantar { margin-bottom: 48px; }
.aksi { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.aksi li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sela); align-items: baseline; padding: 22px 0 26px; border-bottom: var(--garis); }
.aksi-no { grid-column: 1 / 2; font-size: var(--s3); font-weight: 600; font-stretch: 87.5%; }
.aksi h3 { grid-column: 2 / 6; font-size: var(--s3); line-height: 1.2; }
.aksi p { grid-column: 6 / 12; }
.sumber-kampanye { grid-column: 1 / 9; margin-top: 16px; font-size: var(--s5); }
.artikel-isi .pernyataan-kampanye { font: 800 var(--s2) / 1 var(--f-judul); letter-spacing: -0.02em; }
.artikel-isi .daftar-aksi li + li { margin-top: 0.9em; }

/* ---- Layar Pantau (jalur app-screen: kolom 1088 px, angka dalam tinta) ---------------- */

/* Layar kerja: judul kecil (aturan app), supaya pertanyaan dan jawabannya muat di layar pertama. */
.layar { max-width: calc(1088px + 2 * var(--tepi)); margin: 0 auto; padding: 28px var(--tepi) 0; }
.layar-kepala h1 { font-size: var(--s3); line-height: 1.2; }
.layar-kepala .data { margin-top: 4px; }
.periode { display: inline-flex; margin-top: 20px; border: var(--garis); }
.periode a { padding: 0 18px; line-height: 44px; text-decoration: none; border-left: var(--garis); }
.periode a:first-child { border-left: 0; }
.periode a:hover { text-decoration: underline; }
.periode a[aria-current] { background: var(--tinta); color: var(--kertas); }
.temuan { margin-top: 18px; font-size: var(--s3); line-height: 1.45; max-width: 70ch; }

.kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 0; border-top: 2px solid var(--tinta); border-bottom: var(--garis); }
.kpi > div { padding: 14px 16px 16px; border-left: var(--garis); }
.kpi > div:first-child { border-left: 0; padding-left: 0; }
.kpi dt { font-size: var(--s5); }
.kpi dd { margin: 0; }
.kpi dd.angka { margin-top: 6px; font-size: var(--s3); }
.kpi .utama dd.angka { font-size: 2rem; line-height: 1.1; }
.kpi .sub { font-size: var(--s5); font-family: var(--f-teks); }

.grafik-baris { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sela); margin-top: 32px; }
.grafik { margin: 0; min-width: 0; display: flex; flex-direction: column; --tinggi-plot: 184px; }
.grafik figcaption h2 { font-size: var(--s3); line-height: 1.2; }
.grafik figcaption p { margin-top: 6px; font-size: var(--s5); }
.grafik figcaption .dengan-tanda { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.grafik-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; margin-top: auto; padding-top: 14px; } /* rata bawah antargrafik */
.grafik-y { position: relative; height: var(--tinggi-plot); font: 400 var(--s5) / 1 var(--f-data); font-stretch: 75%; font-variant-numeric: tabular-nums; text-align: right; }
.grafik-y span { display: block; position: absolute; right: 0; transform: translateY(50%); white-space: nowrap; }
.grafik-y::before { content: "00.000"; visibility: hidden; display: block; height: 0; overflow: hidden; } /* lebar kolom label tetap */
.grafik-area { position: relative; min-width: 0; }
.grafik-area svg { display: block; width: 100%; height: var(--tinggi-plot); overflow: visible; } /* tinggi tetap: persen di baris grid auto ikut tinggi alami SVG */
.grafik-area line { vector-effect: non-scaling-stroke; stroke: var(--tinta); }
.grafik-area line.bantu { stroke-width: 1; stroke-dasharray: 2 5; }
.grafik-area line.dasar { stroke-width: 1.5; }
.grafik-area rect { fill: var(--tinta); }
.grafik-area rect.sorot { fill: var(--sinyal); }
.grafik-x { position: relative; height: 26px; font: 400 var(--s5) / 1 var(--f-data); font-stretch: 75%; }
.grafik-x span { position: absolute; top: 8px; transform: translateX(-50%); white-space: nowrap; }
.grafik-keterangan { display: flex; gap: 6px; align-items: center; margin-top: 6px; font-size: var(--s5); }

.acuan { margin-top: 10px; }
.cakupan { margin-top: 28px; font: 700 var(--s4) / 1.3 var(--f-judul); letter-spacing: 0; }
.cakupan + .kpi { margin-top: 8px; }
.pilihan { margin-top: 36px; padding-top: 4px; border-top: 2px solid var(--tinta); }
.pilihan .cakupan { margin-top: 12px; }
.pilihan .temuan { margin-top: 8px; }
#tren, .pilihan { scroll-margin-top: calc(var(--pita) + 16px); }
.sampel-batang { fill: var(--sinyal); flex: none; }
.petunjuk { margin-top: 56px; font-size: var(--s5); }
.tabel-pantau { margin-top: 10px; }
.tabel-pantau tbody th a { text-decoration-thickness: 1px; }
.tabel-pantau tbody th a:hover { text-decoration-thickness: 2px; }
.tabel .angka { white-space: nowrap; }
.tabel-pantau tr.terpilih { background: var(--tinta); color: var(--kertas); }
.tabel-pantau tr.terpilih th, .tabel-pantau tr.terpilih td { border-bottom-color: var(--tinta); }
.tabel-pantau tr.terpilih :focus-visible { outline-color: var(--kertas); }
.tabel-pantau th:first-child, .tabel-pantau td:first-child { padding-left: 8px; }
.tabel-pantau tfoot th, .tabel-pantau tfoot td { font-weight: 600; border-top: 2px solid var(--tinta); }
.tabel .urut { fill: currentColor; }
.sumber-tabel { margin-top: 12px; }

/* ---- Form laporan --------------------------------------------------------------- */

.lapor-form { grid-column: 1 / 8; grid-row: 2; }
.lapor-samping { grid-row: 2; position: sticky; top: calc(var(--pita) + 24px); align-self: start; } /* pesan 112 tetap terlihat selama mengisi */
.lapor-samping h2 { margin-top: 28px; font: 700 var(--s4) / 1.3 var(--f-teks); }
.lapor-samping h2 + p { margin-top: 8px; }
.form-lapor { max-width: 66ch; }
.isian { margin: 28px 0 0; padding: 0; border: 0; min-width: 0; }
.isian > label, .isian > legend { display: block; padding: 0; font: 700 var(--s4) / 1.3 var(--f-teks); }
.opsional { font-weight: 400; }
.bantu { margin-top: 4px; font-size: var(--s5); }
.isian:has([aria-invalid="true"]) .bantu { font-weight: 700; }
.form-lapor input[type="number"], .form-lapor input[type="text"], .form-lapor textarea, .form-lapor input[type="file"] {
	display: block;
	width: 100%;
	min-height: 46px;
	margin-top: 8px;
	padding: 10px 12px;
	font: inherit;
	color: var(--tinta);
	background: var(--kertas);
	border: var(--garis);
	border-radius: 0;
}
.form-lapor [aria-invalid="true"] { border-width: 2px; }
.form-lapor textarea { resize: vertical; }
.koordinat { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin-top: 12px; }
.koordinat label { font-size: var(--s5); font-weight: 600; }
.peta-pilih { height: 320px; margin-top: 12px; border: var(--garis); }
.isian-jebakan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.privasi { margin-top: 28px; font-size: var(--s5); }
.tombol, .tombol-sekunder { cursor: pointer; border-radius: 0; }
.tombol {
	margin-top: 20px;
	min-height: 50px;
	padding: 0 24px;
	font: 700 var(--s4) / 1 var(--f-judul);
	color: var(--kertas);
	background: var(--tinta);
	border: 0;
}
.tombol:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.tombol:active { transform: translateY(1px); }
.tombol-sekunder { min-height: 46px; padding: 0 14px; font: 600 var(--s5) / 1 var(--f-teks); color: var(--tinta); background: var(--kertas); border: var(--garis); }
.tombol-sekunder:hover { background: var(--tinta); color: var(--kertas); }
.tombol-sekunder:disabled { cursor: progress; }
.pesan { margin: 0 0 28px; padding: 16px 20px; border: 2px solid var(--tinta); max-width: 66ch; }
.pesan ul { margin: 8px 0 0; padding-left: 1.2em; }
.pesan > p + p, .pesan > dl + p { margin-top: 12px; }
.ringkasan-lapor { margin: 14px 0 0; border-top: var(--garis); }
.ringkasan-lapor div { display: grid; grid-template-columns: 8em 1fr; gap: 12px; padding: 8px 0; border-bottom: var(--garis); }
.ringkasan-lapor dt { font-weight: 600; }
.ringkasan-lapor dd { margin: 0; }
.atribusi { margin-top: 6px; font-size: var(--s5); }
.form-lapor input[type="file"] { padding: 8px; }
.form-lapor input[type="file"]::file-selector-button {
	margin-right: 12px;
	min-height: 36px;
	padding: 0 14px;
	font: 600 var(--s5) / 1 var(--f-teks);
	color: var(--tinta);
	background: var(--kertas);
	border: var(--garis);
	border-radius: 0;
	cursor: pointer;
}
.form-lapor input[type="file"]::file-selector-button:hover { background: var(--tinta); color: var(--kertas); }

/* ---- Tablet & telepon --------------------------------------------------------- */

/* Menu dilipat ke tombol "Menu" sampai 1359 px: enam tautan + jam tidak muat dalam satu baris di bawah itu. */
@media (max-width: 1359px) {
	.pita { position: sticky; grid-template-columns: auto 1fr auto; column-gap: 20px; }
	.menu { justify-self: start; }
	.pita-waktu > div { padding: 0 10px; font-stretch: 75%; }
	.pita-waktu .kata { display: none; }
	.menu > summary {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		padding: 0 14px;
		border: var(--garis);
		font-weight: 600;
		cursor: pointer;
		list-style: none;
	}
	.menu[open] > summary { background: var(--tinta); color: var(--kertas); }
	.menu > .nav { position: absolute; left: 0; right: 0; top: 100%; padding: 0 var(--tepi) 8px; background: var(--kertas); border-bottom: var(--garis); }
	.nav ul { flex-direction: column; gap: 0; }
	.nav a { display: block; padding: 12px 0; border-top: var(--garis); }
	.nav li:first-child a { border-top: 0; }
}

@media (max-width: 1100px) {
	.muka { height: auto; min-height: 0; grid-template-rows: min(58svh, 74vw) auto; }
	.daftar-catatan h2, .daftar-catatan h3 { grid-column: 1 / 9; }
	.daftar-catatan .meta { grid-column: 9 / 13; }
	.daftar-catatan p:last-child { grid-column: 1 / 9; margin-top: 8px; }
	.kepala-halaman, .artikel-navigasi { grid-column: 1 / -1; }
	.tepi-angka { grid-column: 1 / 6; }
	.tepi-judul { grid-column: 6 / 13; }
	.keterangan { grid-column: 1 / -1; grid-row: 2; margin-top: 24px; padding-top: 16px; border-top: var(--garis); }
	.keterangan-grup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	:root { --penggaris: 26px; --sela: 16px; }
	/* Di HP pita tidak lengket: baris 1 merek + menu, baris 2 waktu ganda dan umur data. */
	.pita { position: relative; grid-template-columns: 1fr auto; column-gap: 12px; }
	.merek { grid-row: 1; grid-column: 1; line-height: 52px; }
	.menu { grid-row: 1; grid-column: 2; justify-self: end; }
	.pita-waktu { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; margin: 0 calc(var(--tepi) * -1); padding: 0 var(--tepi); border-top: var(--garis); }
	.pita-waktu > div { line-height: 36px; padding: 0 10px; }
	.pita-waktu > div:first-child { border-left: 0; padding-left: 0; }
	.pita-waktu > div:last-child { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: var(--garis); }
	.pita-waktu .kata { display: inline; }
	.daftar-catatan h2, .daftar-catatan h3, .daftar-catatan .meta, .daftar-catatan p:last-child { grid-column: 1 / -1; }
	.daftar-catatan .meta { margin-top: 6px; }
	.beranda-pekan .teks, .beranda-tabel, .pernyataan { grid-column: 1 / -1; }
	.aksi li { grid-template-columns: 1fr; row-gap: 6px; }
	.aksi-no, .aksi h3, .aksi p, .sumber-kampanye { grid-column: 1 / -1; }
	.beranda-tabel { grid-row: auto; margin-top: 28px; }
	.kpi { grid-template-columns: 1fr 1fr; }
	.kpi > div:nth-child(3) { border-left: 0; padding-left: 0; }
	.kpi > div:nth-child(n+3) { border-top: var(--garis); }
	.grafik-baris { grid-template-columns: 1fr; row-gap: 40px; }
	.tabel-pantau .frp { display: none; }
	.lapor-form, .lapor-samping { grid-column: 1 / -1; grid-row: auto; }
	.lapor-samping { position: static; margin: 0 0 32px; }
	.koordinat { grid-template-columns: 1fr 1fr; }
	.koordinat .tombol-sekunder { grid-column: 1 / -1; }
	.muka { grid-template-rows: min(52svh, 88vw) auto; border-bottom: 0; }
	.tepi-angka, .tepi-judul { grid-column: 1 / -1; }
	.tepi-judul { grid-row: 1; }
	.tepi-angka { grid-row: 2; margin-top: 18px; }
	.keterangan { grid-row: 3; }
	.keterangan-grup { grid-template-columns: 1fr 1fr; }
	.keterangan-grup > :first-child { grid-column: 1 / -1; }
	.bagian > h2, .teks, .samping { grid-column: 1 / -1; }
	.samping { margin-top: 28px; }
	.tabel .kode, .tabel .lalu { display: none; }
	.tabel .angka { font-size: var(--s5); }
	.tabel th, .tabel td { padding-right: 8px; }
	.tabel tbody th { font-size: var(--s5); }
	.tabel thead .angka { white-space: normal; }
	.kolofon-kepala, .kolofon-daftar { grid-column: 1 / -1; }
	.kolofon-daftar { columns: 1; margin-top: 24px; }
}

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