/* fairi.id — Tinta & Kertas
   Design system SPEC §9. Nilai di berkas ini adalah nilai SPEC; mengubahnya
   berarti menyunting SPEC lebih dulu. Tanpa bayangan, di mana pun. */

/* ── Huruf, disajikan sendiri (Invarian III) ───────────────────────── */
@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/aset/newsreader-600.woff2") format("woff2");
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/aset/karla-400.woff2") format("woff2");
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/aset/karla-600.woff2") format("woff2");
}

/* ── Token ─────────────────────────────────────────────────────────── */
/* PERINGATAN: `:root` telanjang di sini berarti TERANG (SPEC §9.1). */
:root {
	--kertas: #FBFAF7;
	--lembar: #FFFFFF;
	--kertas-2: #F2EFE9;
	--kertas-3: #EAE5DB;
	--tinta: #17150F;
	--tinta-2: #55504A;
	--tinta-3: #6F685F;
	--garis: #E3DED4;
	--garis-2: #CFC8BB;
	--aksen: #8C2F23;
	--aksen-lembut: #F6EAE6;
	--di-atas-aksen: #FFFFFF;

	--ruang-1: 0.25rem;
	--ruang-2: 0.5rem;
	--ruang-3: 0.75rem;
	--ruang-4: 1rem;
	--ruang-5: 1.5rem;
	--ruang-6: 2rem;
	--ruang-7: 3rem;
	--ruang-8: 4rem;
	--ruang-9: 6rem;
	--ruang-10: 8rem;

	--kolom: 680px;
	--kolom-lebar: 960px;
	--tepi: clamp(1.25rem, 5vw, 2rem);
	--radius: 4px;
	--gerak: 300ms cubic-bezier(.2, .7, .2, 1);

	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--kertas: #12110E;
		--lembar: #1A1815;
		--kertas-2: #22201C;
		--kertas-3: #2A2722;
		--tinta: #F0EDE6;
		--tinta-2: #B0A99F;
		--tinta-3: #8C857A;
		--garis: #2C2925;
		--garis-2: #3A3630;
		--aksen: #E07C63;
		--aksen-lembut: #2A1A15;
		--di-atas-aksen: #14100E;

		color-scheme: dark;
	}
}

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

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

body {
	margin: 0;
	background: var(--kertas);
	color: var(--tinta);
	font-family: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.68;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

p { margin: 0 0 var(--ruang-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

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

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

/* ── Tautan lewati ─────────────────────────────────────────────────── */
.lewati {
	position: absolute;
	left: var(--tepi);
	top: var(--ruang-2);
	z-index: 10;
	transform: translateY(-200%);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--ruang-4);
	background: var(--lembar);
	border: 1px solid var(--garis-2);
	border-radius: var(--radius);
	color: var(--tinta);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}
.lewati:focus { transform: translateY(0); }

/* ── Kerangka halaman ──────────────────────────────────────────────── */
.halaman {
	max-width: var(--kolom-lebar);
	margin: 0 auto;
	padding: var(--ruang-8) var(--tepi) var(--ruang-7);
}

/* ── BLOK 1 — Kepala ───────────────────────────────────────────────── */
.kepala { display: flex; flex-direction: column; }

.kepala h1 {
	font-family: "Newsreader", Georgia, "Times New Roman", serif;
	font-weight: 600;
	font-size: clamp(2.6rem, 9vw, 4.4rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	margin: 0 0 var(--ruang-3);
}

.peran {
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--tinta-2);
	margin: 0 0 var(--ruang-4);
}

.lede { margin: 0 0 var(--ruang-6); }

.potret {
	width: 88px;
	height: 88px;
	border-radius: 999px;
	background: var(--kertas-3);
	border: 1px dashed var(--garis-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Newsreader", Georgia, "Times New Roman", serif;
	font-size: 1.7rem;
	color: var(--tinta-3);
	margin: 0 0 var(--ruang-5);
	flex: none;
	order: -1;
	user-select: none;
}

/* ── BLOK 2 — Kartu nama ───────────────────────────────────────────── */
.kartu-nama {
	display: flex;
	flex-direction: column;
	gap: var(--ruang-3);
	margin-top: var(--ruang-6);
}

.tombol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ruang-2);
	min-height: 48px;
	padding: 0 var(--ruang-5);
	border-radius: var(--radius);
	border: 1px solid var(--garis-2);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--tinta);
	transition: color 120ms linear, border-color 120ms linear, background-color 120ms linear;
}

.tombol-utama {
	background: var(--aksen);
	border-color: var(--aksen);
	color: var(--di-atas-aksen);
}
.tombol-utama:hover { background: var(--tinta); border-color: var(--tinta); color: var(--kertas); }
.tombol-kedua:hover { border-color: var(--aksen); color: var(--aksen); }

.ikon { flex: none; }

/* ── Bagian ────────────────────────────────────────────────────────── */
.bagian {
	border-top: 1px solid var(--garis);
	margin-top: var(--ruang-8);
	padding-top: var(--ruang-7);
	break-inside: avoid;
}

.label-bagian {
	font-family: "Karla", system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tinta-2);
	margin: 0 0 var(--ruang-3);
}

.bagian h2 {
	font-family: "Newsreader", Georgia, "Times New Roman", serif;
	font-weight: 600;
	font-size: clamp(1.5rem, 3.6vw, 1.9rem);
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 var(--ruang-5);
}

/* ── Tautan ────────────────────────────────────────────────────────── */
.tautan {
	color: var(--aksen);
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	transition: color 120ms linear;
}
.tautan:hover { color: var(--tinta); }

.alamat-surat {
	font-size: 1.2rem;
	margin-bottom: 0;
}
.alamat-surat .tautan {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ── BLOK 10 — Kaki (Invarian II) ──────────────────────────────────── */
.kaki {
	border-top: 1px solid var(--garis);
	margin-top: var(--ruang-8);
	padding-top: var(--ruang-6);
	break-inside: avoid;
}

.pemisahan {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--tinta-2);
	margin: 0 0 var(--ruang-2);
}

.tahun {
	font-size: 0.9rem;
	color: var(--tinta-3);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

/* ── Desktop ───────────────────────────────────────────────────────── */
@media (min-width: 900px) {
	.halaman { padding: var(--ruang-9) var(--tepi) var(--ruang-8); }

	.kepala {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--ruang-7);
	}
	.kepala-teks { max-width: var(--kolom); }
	.potret {
		width: 128px;
		height: 128px;
		font-size: 2.2rem;
		margin: var(--ruang-2) 0 0;
		order: 2;
	}
	.kepala h1 { margin-bottom: var(--ruang-5); }
	.lede { margin-bottom: 0; }

	.kartu-nama {
		flex-direction: row;
		align-items: center;
		margin-top: var(--ruang-6);
	}
	.tombol { min-height: 44px; }

	.bagian, .kaki { margin-top: var(--ruang-9); }

	.kaki {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--ruang-7);
	}
	.pemisahan { margin-bottom: 0; }
}

/* ── Gerak: satu pengungkap gulir, dan ia boleh tidak ada (SPEC §9.6) ─ */
@media (scripting: enabled) {
	.ungkap {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity var(--gerak), transform var(--gerak);
	}
	.ungkap-2 { transition-delay: 60ms; }
	.ungkap-3 { transition-delay: 120ms; }
	.ungkap.tampak { opacity: 1; transform: none; }

	/* Jaring pengaman. Kalau halaman.js tidak pernah berjalan — diblokir
	   proksi, gagal diambil, apa pun — isi tetap muncul sendiri. Begitu JS
	   memasang `.tampak`, pemilih ini berhenti cocok dan animasinya batal. */
	.ungkap:not(.tampak) {
		animation: ungkap-paksa 1ms linear 4s forwards;
	}
	@keyframes ungkap-paksa { to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
	.ungkap { opacity: 1 !important; transform: none !important; }
	*, *::before, *::after {
		transition-duration: 0s !important;
		transition-delay: 0s !important;
		animation-duration: 0s !important;
		animation-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

/* ── Cetak (SPEC §9.7) ─────────────────────────────────────────────── */
@media print {
	:root {
		--kertas: #FFFFFF;
		--lembar: #FFFFFF;
		--kertas-3: #FFFFFF;
		--tinta: #000000;
		--tinta-2: #000000;
		--tinta-3: #000000;
		--garis: #000000;
		--garis-2: #000000;
		--aksen: #000000;
	}
	body { background: #FFFFFF; color: #000000; font-size: 11pt; }
	.halaman { max-width: none; padding: 0; }
	.lewati, .kartu-nama { display: none !important; }
	.ungkap { opacity: 1 !important; transform: none !important; transition: none !important; }
	.bagian, .kaki { break-inside: avoid; page-break-inside: avoid; }
	h1, h2 { break-after: avoid; page-break-after: avoid; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}