/* ==========================================================================
   Galleon — BASE
   Tokens, reset, primitif layout, sistem reveal, utilities, print.
   Dimuat di semua halaman, paling pertama.
   ========================================================================== */

/* 1. TOKENS
   ------------------------------------------------------------------------ */
:root {
	/* --- Netral hangat ---
	   Sengaja bukan abu-abu dingin. Netral kebiruan bertemu kuning terang
	   membuat kuningnya terbaca sebagai rambu peringatan, bukan warna brand. */
	--c-ink:        #1A1917;
	--c-ink-soft:   #24231F;
	--c-ink-raised: #302E29;
	--c-ink-line:   rgba(255, 255, 255, 0.12);

	/* --- Permukaan terang --- */
	--c-surface:     #FFFFFF;
	--c-surface-alt: #F7F6F3;
	--c-line:        #E5E2DC;
	--c-line-strong: #CFCBC2;

	/* --- Teks --- */
	--c-text:          #1A1917;
	--c-text-muted:    #6B6659;
	--c-on-dark:       #FFFFFF;
	--c-on-dark-muted: rgba(255, 255, 255, 0.66);

	/* --- Aksen brand ---
	   accent hanya untuk latar/garis dan teks di atas gelap (kontras 1.7:1
	   terhadap putih). accent-text dipakai untuk teks di latar terang. */
	--c-accent:        #FDBD00;
	--c-accent-hover:  #E3A800;
	--c-accent-text:   #7A5C00;
	--c-accent-soft:   #FFF6D9;
	--c-accent-border: rgba(253, 189, 0, 0.50);

	/* --- Semantik --- */
	--c-success: #1F7A4C;
	--c-danger:  #A32A22;
	--c-info:    #24559E;
	--c-focus:   #3D7DFF;

	/* --- Typography --- */
	--font-display: "Archivo", system-ui, sans-serif;
	--font-body:    "Inter", system-ui, sans-serif;
	--font-quote: "Newsreader", Georgia, "Times New Roman", serif;

	/* Skala modular rasio 1.25, fluid antara viewport 360px dan 1400px */
	--fs-xs:   0.8125rem;                                      /* 13px  — eyebrow, label */
	--fs-sm:   0.9375rem;                                      /* 15px  — meta, teks kartu */
	--fs-base: 1rem;                                           /* 16px  — body */
	--fs-md:   clamp(1.0625rem, 0.19vw + 1.019rem, 1.1875rem); /* 17-19 — lead paragraph */
	--fs-lg:   clamp(1.25rem,   0.38vw + 1.164rem, 1.5rem);    /* 20-24 — h3, judul kartu */
	--fs-xl:   clamp(1.5rem,    0.96vw + 1.284rem, 2.125rem);  /* 24-34 — h2 */
	--fs-2xl:  clamp(1.875rem,  1.73vw + 1.486rem, 3rem);      /* 30-48 — judul section */
	--fs-3xl:  clamp(2.25rem,   2.69vw + 1.644rem, 4rem);      /* 36-64 — hero */
	--fs-4xl:  clamp(2.75rem,   4.23vw + 1.798rem, 5.5rem);    /* 44-88 — display, hemat */

	/* --- Bobot font ---
	   Dijadikan token supaya tidak ada lagi angka lepas di CSS.
	   Aturannya: body 400, penekanan 500, elemen UI 600,
	   subjudul 700, judul besar 800. */
	--fw-normal:   400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;
	--fw-black:    800;

	/* --- Line height --- */
	--lh-none:  1;      /* judul display sangat besar */
	--lh-tight: 1.08;   /* judul besar */
	--lh-snug:  1.3;    /* judul kecil, kartu */
	--lh-body:  1.65;   /* paragraf */

	/* --- Letter spacing --- */
	--ls-tight: -0.035em;  /* judul besar */
	--ls-snug:  -0.02em;   /* judul kecil */
	--ls-none:   0;        /* body */
	--ls-wide:   0.09em;   /* label uppercase */
	--ls-wider:  0.16em;   /* eyebrow uppercase */

	/* --- Spacing: kelipatan 4px --- */
	--sp-1: 0.25rem;   /*  4 */
	--sp-2: 0.5rem;    /*  8 */
	--sp-3: 0.75rem;   /* 12 */
	--sp-4: 1rem;      /* 16 */
	--sp-5: 1.5rem;    /* 24 */
	--sp-6: 2rem;      /* 32 */
	--sp-7: 2.5rem;    /* 40 */
	--sp-8: 3rem;      /* 48 */
	--sp-9: 4rem;      /* 64 */

	/* Spacing fluid untuk jarak besar */
	--sp-section: clamp(3.5rem, 7vw, 7rem);
	--sp-block:   clamp(2rem, 4vw, 3.5rem);

	/* --- Layout --- */
	--container:        1200px;
	--container-narrow: 720px;
	--gutter:           clamp(1.25rem, 4vw, 2.5rem);

	--radius-sm:   6px;
	--radius:      10px;
	--radius-lg:   16px;
	--radius-pill: 999px;

	--shadow-sm:   0 1px 2px rgba(26, 25, 23, 0.06);
	--shadow-md:   0 8px 24px rgba(26, 25, 23, 0.10);
	--shadow-lg:   0 20px 48px rgba(26, 25, 23, 0.14);
	--shadow-dark: 0 12px 32px rgba(0, 0, 0, 0.35);

	/* --- Motion --- */
	--ease:      cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast:   150ms;
	--dur:        260ms;
	--dur-slow:   420ms;
	--dur-reveal: 720ms;

	--header-h: 76px;


		/* Ikon untuk pesan form. Dipakai sebagai mask, jadi warnanya
	   mengikuti color elemennya. */
	--icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2V7zm0 9h2v2h-2v-2z'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.2L6.6 12l1.4-1.4 2.8 2.8 5.2-5.2L17.4 9.6l-6.6 6.6z'/%3E%3C/svg%3E");
}

/* 2. RESET
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-normal);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-none);
	color: var(--c-text);
	background: var(--c-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

/* Judul memakai Archivo. Letter-spacing negatif hanya di sini —
   di ukuran body, tracking rapat justru menurunkan keterbacaan. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	margin: 0 0 var(--sp-4);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
	color: var(--c-ink);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}

h2 {
	font-size: var(--fs-xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}

h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button { font: inherit; color: inherit; cursor: pointer; }

strong, b { font-weight: var(--fw-bold); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: 3px;
	border-radius: 3px;
}

/* 3. LAYOUT PRIMITIF
   ------------------------------------------------------------------------ */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.site-main { min-height: 50vh; }

.section { padding-block: var(--sp-section); }
.section--tight { padding-block: var(--sp-block); }
.section--flush-top { padding-block-start: 0; }

/* Section bersebelahan dengan warna latar sama: rapatkan supaya
   tidak ada jarak ganda yang terasa seperti lubang. */
/* .section + .section:not([class*="--"]) { padding-block-start: 0; } */

.page-head { padding-block: var(--sp-8) var(--sp-6); }
.page-head__title { font-size: var(--fs-2xl); }
.page-head__desc {
	font-size: var(--fs-md);
	color: var(--c-text-muted);
	max-width: 60ch;
	margin-block-start: var(--sp-4);
}

/* 4. UTILITIES
   ------------------------------------------------------------------------ */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px; left: var(--sp-4);
	z-index: 999;
	padding: var(--sp-3) var(--sp-5);
	background: var(--c-ink);
	color: var(--c-on-dark);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

.empty-state {
	padding-block: var(--sp-9);
	color: var(--c-text-muted);
	text-align: center;
}

/* 5. SISTEM REVEAL
   ------------------------------------------------------------------------
   Pemakaian di template:

   <section data-reveal>                     satu elemen
   <div data-reveal-group>                   anak-anaknya muncul bergiliran
     <article data-reveal>...</article>
   </div>

   Varian arah: data-reveal="up" (default), "fade", "left", "right", "scale".
   Delay stagger diatur JS lewat custom property --reveal-delay.
   ------------------------------------------------------------------------ */
[data-reveal] {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition:
		opacity var(--dur-reveal) var(--ease-out),
		transform var(--dur-reveal) var(--ease-out),
		clip-path var(--dur-reveal) var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translate3d(-28px, 0, 0); }
[data-reveal="right"] { transform: translate3d(28px, 0, 0); }
[data-reveal="scale"] { transform: scale(0.96); }

/* Tersingkap dari bawah seperti tirai — gerakan yang sama dengan
   judul hero, supaya animasi di seluruh halaman terasa satu bahasa. */
[data-reveal="mask"] {
	transform: translate3d(0, 20px, 0);
	clip-path: inset(0 0 100% 0);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

[data-reveal="mask"].is-visible {
	clip-path: inset(0 0 -12% 0);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Fallback: kalau JS mati, konten tetap terlihat. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* Animasi masuk halaman untuk hero — bukan scroll reveal,
   karena hero sudah berada di viewport saat halaman dimuat. */
@keyframes galleon-enter {
	from { opacity: 0; transform: translate3d(0, 20px, 0); }
	to   { opacity: 1; transform: none; }
}
/* Judul hero dibuka dari bawah seperti tirai — cocok untuk teks
   kapital tebal, dan terasa lebih tegas daripada sekadar fade. */
@keyframes galleon-unmask {
	from {
		opacity: 0;
		transform: translate3d(0, 0.4em, 0);
		clip-path: inset(0 0 100% 0);
	}
	to {
		opacity: 1;
		transform: none;
		clip-path: inset(0 0 -10% 0);
	}
}

@keyframes galleon-cue {
	0%, 100% { transform: translateY(0); opacity: 0.5; }
	50%      { transform: translateY(6px); opacity: 1; }
}

/* 6. PREFERENSI & PRINT
   ------------------------------------------------------------------------ */
@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;
		scroll-behavior: auto !important;
	}

	[data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media print {
	.site-header, .site-footer, .nav-toggle, .breadcrumbs,
	.section-actions, .lang-switcher { display: none !important; }

	body { color: #000; background: #fff; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}