/* =========================================================================
   SIKA — Base: reset, tipografi, utilitas, animasi dasar
   ====================================================================== */

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

* {
	margin: 0;
	padding: 0;
}

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

body {
	font-family: var(--font);
	font-size: var(--t-base);
	line-height: 1.6;
	color: var(--teks);
	background: var(--kanvas);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'cv11', 'ss01';
	text-rendering: optimizeLegibility;
	min-height: 100vh;
	overflow-x: hidden;
}

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

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

button {
	background: none;
	border: none;
	cursor: pointer;
}

a {
	color: var(--biru-600);
	text-decoration: none;
	transition: color var(--cepat) var(--ease-keluar);
}

a:hover {
	color: var(--biru-700);
}

ul,
ol {
	list-style: none;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* ---- Judul ---- */

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.018em;
	color: var(--teks);
}

h1 { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -0.028em; }
h2 { font-size: var(--t-2xl); letter-spacing: -0.024em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
h5 { font-size: var(--t-base); }

/* ---- Fokus terlihat, hanya via keyboard ---- */

:focus {
	outline: none;
}

:focus-visible {
	outline: none;
	box-shadow: var(--cincin);
	border-radius: var(--r-sm);
}

/* ---- Scrollbar halus ---- */

* {
	scrollbar-width: thin;
	scrollbar-color: var(--abu-300) transparent;
}

*::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

*::-webkit-scrollbar-thumb {
	background: var(--abu-300);
	border-radius: var(--r-bulat);
	border: 2px solid transparent;
	background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--abu-400);
	background-clip: content-box;
}

/* ---- Seleksi teks ---- */

::selection {
	background: var(--biru-200);
	color: var(--biru-900);
}

/* =========================================================================
   Utilitas
   ====================================================================== */

.s-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.s-tumpuk       { display: flex; flex-direction: column; }
.s-baris        { display: flex; align-items: center; }
.s-baris-atas   { display: flex; align-items: flex-start; }
.s-antara       { display: flex; align-items: center; justify-content: space-between; }
.s-tengah       { display: flex; align-items: center; justify-content: center; }
.s-bungkus      { flex-wrap: wrap; }
.s-isi          { flex: 1 1 auto; min-width: 0; }

.g-1 { gap: var(--s-1); }
.g-2 { gap: var(--s-2); }
.g-3 { gap: var(--s-3); }
.g-4 { gap: var(--s-4); }
.g-5 { gap: var(--s-5); }
.g-6 { gap: var(--s-6); }

.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }

.t-2xs { font-size: var(--t-2xs); }
.t-xs  { font-size: var(--t-xs); }
.t-sm  { font-size: var(--t-sm); }
.t-md  { font-size: var(--t-md); }
.t-lg  { font-size: var(--t-lg); }
.t-xl  { font-size: var(--t-xl); }

.b-4 { font-weight: 400; }
.b-5 { font-weight: 500; }
.b-6 { font-weight: 600; }
.b-7 { font-weight: 700; }
.b-8 { font-weight: 800; }

.w-2 { color: var(--teks-2); }
.w-3 { color: var(--teks-3); }
.w-4 { color: var(--teks-4); }
.w-biru      { color: var(--biru-600); }
.w-sukses    { color: var(--sukses-600); }
.w-peringatan { color: var(--peringatan-600); }
.w-bahaya    { color: var(--bahaya-600); }

.rata-kanan  { text-align: right; }
.rata-tengah { text-align: center; }

.kapital { text-transform: uppercase; letter-spacing: 0.06em; }
.nowrap  { white-space: nowrap; }

.angka {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
}

.potong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.potong-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pra-baris {
	white-space: pre-line;
}

.color-sub      { color: var(--teks-3); }
.justify-center { justify-content: center; }
.border-t       { border-top: 1px solid var(--garis-lembut); }
.pt-3           { padding-top: var(--s-3); }
.pad-y-4        { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.pad-y-6        { padding-top: var(--s-6); padding-bottom: var(--s-6); }

/* =========================================================================
   Animasi
   ====================================================================== */

@keyframes s-naik {
	from { opacity: 0; transform: translate3d(0, 14px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes s-turun {
	from { opacity: 0; transform: translate3d(0, -10px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes s-muncul {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes s-skala {
	from { opacity: 0; transform: scale(0.94) translate3d(0, 8px, 0); }
	to   { opacity: 1; transform: scale(1) translate3d(0, 0, 0); }
}

@keyframes s-geser-kanan {
	from { opacity: 0; transform: translate3d(28px, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes s-kilau {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

@keyframes s-denyut {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.14); opacity: 0.72; }
}

@keyframes s-gelombang {
	0%   { transform: scale(0.8); opacity: 0.55; }
	100% { transform: scale(2.4); opacity: 0; }
}

@keyframes s-putar {
	to { transform: rotate(360deg); }
}

@keyframes s-goyang {
	0%, 100%   { transform: translateX(0); }
	20%, 60%   { transform: translateX(-5px); }
	40%, 80%   { transform: translateX(5px); }
}

@keyframes s-lonceng {
	0%, 100%      { transform: rotate(0); }
	15%, 45%, 75% { transform: rotate(11deg); }
	30%, 60%, 90% { transform: rotate(-11deg); }
}

@keyframes s-gambar-garis {
	from { stroke-dashoffset: var(--panjang, 1000); }
	to   { stroke-dashoffset: 0; }
}

/* ---- Kelas animasi siap pakai ---- */

.s-anim-naik   { animation: s-naik var(--sedang) var(--ease-keluar) both; }
.s-anim-turun  { animation: s-turun var(--sedang) var(--ease-keluar) both; }
.s-anim-muncul { animation: s-muncul var(--sedang) var(--ease-keluar) both; }
.s-anim-skala  { animation: s-skala var(--sedang) var(--ease-pegas) both; }

/* Stagger: elemen ber-atribut data-tunda mendapat penundaan bertahap */
[data-tunda] { animation-delay: calc(var(--tunda, 0) * 55ms); }

/* Masuk halaman — dipakai pada wadah utama */
.s-masuk > * {
	animation: s-naik 460ms var(--ease-keluar) both;
}

.s-masuk > *:nth-child(1) { animation-delay: 0ms; }
.s-masuk > *:nth-child(2) { animation-delay: 60ms; }
.s-masuk > *:nth-child(3) { animation-delay: 120ms; }
.s-masuk > *:nth-child(4) { animation-delay: 180ms; }
.s-masuk > *:nth-child(5) { animation-delay: 240ms; }
.s-masuk > *:nth-child(6) { animation-delay: 300ms; }
.s-masuk > *:nth-child(7) { animation-delay: 350ms; }
.s-masuk > *:nth-child(8) { animation-delay: 400ms; }

/* Muncul saat masuk viewport (dikendalikan JS via IntersectionObserver) */
.s-amati {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition: opacity 620ms var(--ease-keluar), transform 620ms var(--ease-keluar);
	will-change: opacity, transform;
}

.s-amati.s-terlihat {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* ---- Hormati preferensi gerak minimal ---- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.s-amati {
		opacity: 1;
		transform: none;
	}
}

/* ---- Cetak ---- */

@media print {
	body { background: #fff; }

	.s-sidebar,
	.s-topbar,
	.s-tanpa-cetak,
	.s-toast-wadah {
		display: none !important;
	}

	.s-utama { margin: 0 !important; }
	.s-kartu { box-shadow: none !important; border: 1px solid #ddd; break-inside: avoid; }
}