/* ==========================================================================
   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
	   membuat kuningnya terbaca sebagai rambu peringatan, bukan brand.
	   --c-ink-rgb dipakai untuk overlay/bayangan berwarna ink:
	   rgb(var(--c-ink-rgb) / 0.35) */
	--c-ink:        #2A251E;
	--c-ink-rgb:    42 37 30;
	--c-ink-soft:   #352F27;
	--c-ink-raised: #433B31;
	--c-ink-line:   rgba(255, 255, 255, 0.12);

	/* --- Permukaan terang --- */
	--c-surface:     #FFFFFF;
	/* --c-surface-alt: #FBF8F2; */
	--c-surface-alt: #FFFFFF;
	--c-line:        #EDE6D8;
	--c-line-strong: #D9CEBB;

	/* --- Teks --- */
	--c-text:          #2A251E;
	--c-text-muted:    #6E6559;
	--c-on-dark:       #FFFFFF;
	--c-on-dark-muted: rgba(255, 255, 255, 0.66);

	/* --- Aksen brand #F4C45C ---
	   accent untuk latar, garis, dan teks di atas gelap (teks ink di
	   atas accent 9.3:1). Teks emas di latar terang pakai accent-text
	   (6.8:1 di putih). */
	--c-accent:        #F4C45C;
	--c-accent-rgb:    244 196 92;
	--c-accent-hover:  #EBAF37;
	--c-accent-text:   #7D5212;
	--c-accent-soft:   #FDF5E3;
	--c-accent-border: rgb(var(--c-accent-rgb) / 0.55);
	--c-accent-glow:   rgb(var(--c-accent-rgb) / 0.40);

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

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

	/* --- Ukuran font ---
	   Disetel untuk Montserrat (lebar, x-height besar). Fluid antara
	   viewport 360px dan 1440px, rasio ±1.2. */
	--fs-2xs:   0.6875rem;                                     /* 11     — eyebrow, label, chip */
	--fs-1xs:   0.75rem;                                       /* 12     — eyebrow, label, chip */
	--fs-xs:   0.8125rem;                                     /* 13     — eyebrow, label, chip */
	--fs-sm:   0.875rem;                                      /* 14     — meta, teks kartu, nav */
	--fs-base: 1rem;                                          /* 16     — body */
	--fs-md:   clamp(1.0625rem, 0.09vw + 1.042rem, 1.125rem); /* 17–18 — lead paragraph */
	--fs-lg:   clamp(1.1875rem, 0.28vw + 1.125rem, 1.375rem); /* 19–22 — h3, judul kartu */
	--fs-xl:   clamp(1.375rem,  0.56vw + 1.25rem,  1.75rem);  /* 22–28 — h2 kecil, subjudul */
	--fs-2xl:  clamp(1.75rem,   1.11vw + 1.5rem,   2.5rem);   /* 28–40 — judul section, h1 halaman */
	--fs-3xl:  clamp(2.125rem,  1.67vw + 1.75rem,  3.25rem);  /* 34–52 — judul hero */

	/* --- Bobot font ---
	   body 400 · penekanan 500 · elemen UI 600 · judul 700.
	   --fw-black dipertahankan sebagai alias judul besar; 800 pada
	   Montserrat terlalu berat untuk teks sepanjang judul. */
	--fw-normal:   400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;
	--fw-black:    700;

	/* --- Line height --- */
	--lh-none:  1;      /* angka, ikon, badge satu baris */
	--lh-tight: 1.15;   /* judul besar */
	--lh-snug:  1.3;    /* judul kecil, kartu */
	--lh-body:  1.65;   /* paragraf */

	/* --- Letter spacing --- */
	--ls-tight: -0.02em;  /* judul besar */
	--ls-snug:  -0.01em;  /* judul kecil */
	--ls-none:   0;       /* body */
	--ls-wide:   0.08em;  /* label uppercase */
	--ls-wider:  0.12em;  /* 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 (360px → 1440px) */
	--sp-section: clamp(3.5rem, 3.7vw + 2.667rem, 6rem);  /* 56–96 — antar section */
	--sp-block:   clamp(2rem,   1.48vw + 1.667rem, 3rem); /* 32–48 — antar blok dalam section */

	/* --- Layout ---
	   Breakpoint standar (media query tidak bisa memakai variabel,
	   jadi ini acuan tertulis — pakai hanya angka ini):
	     1200px  desktop kecil / laptop
	     1024px  tablet landscape
	      768px  tablet portrait, HP landscape
	      480px  HP */
	--container:        1200px;
	--container-narrow: 760px;
	--gutter:           clamp(1.25rem, 4vw, 2.5rem);
	--header-h:         76px;

	--radius-sm:   6px;
	--radius:      10px;
	--radius-lg:   16px;
	--radius-xl:   20px;   /* kartu besar, tile bento */
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgb(var(--c-ink-rgb) / 0.06);
	--shadow-md: 0 8px 24px rgb(var(--c-ink-rgb) / 0.08);
	--shadow-lg: 0 20px 48px rgb(var(--c-ink-rgb) / 0.12);

	/* --- 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;

	/* --- Ikon 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");
}

/* Header lebih pendek di layar sempit. Semua yang memakai
   --header-h (hero, panel menu mobile, scroll-padding) ikut. */
@media (max-width: 768px) {
	:root { --header-h: 64px; }
}

/* 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 --font-display. Letter-spacing negatif hanya di
   judul — di ukuran body, tracking rapat menurunkan keterbacaan. */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-display);
	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); }
h5, h6 { font-size: var(--fs-base); }

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);
}

/* Lebar baca artikel & 404 (±70 karakter per baris).
   Hapus rule ini kalau artikel memang ingin selebar container. */
.container--narrow { max-width: var(--container-narrow); }

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

.section { padding-block: var(--sp-section); }

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

/* 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);
	border-radius: var(--radius-sm);
	background: var(--c-ink);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-on-dark);
	text-decoration: none;
	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", "mask". Delay stagger diatur JS lewat --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);
}

/* 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 — 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);
	}
}

/* Isyarat scroll di hero video. */
@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; }
}