/* ==========================================================================
swansimage / custom.css
--------------------------------------------------------------------------
Tambahan style yang tidak ada di design-system.
Semua nilai wajib pakai token design-system — tidak boleh hardcode.

ATURAN:
✓  var(--size-400)          → spacing
✓  var(--radius-full)       → border radius
✓  var(--shadow-lg)         → shadow
✗  16px, #fff, 9999px       → hardcode — jangan

EXCEPTION yang boleh hardcode:
- hsla() untuk glassmorphism (token DS adalah nilai solid, tidak ada
opacity variant)
- clamp() untuk responsive typography (tidak bisa jadi token statis)
- font-weight: 800 (DS hanya sampai 700, lihat --font-weight-extrabold)
- Gradient warna klien (bukan bagian dari token DS)
========================================================================== */


/* ==========================================================================
1. CUSTOM TOKENS KLIEN
--------------------------------------------------------------------------
Token tambahan yang tidak ada di design-system. Didefinisikan di sini
supaya nilai terpusat dan mudah diubah.
========================================================================== */

:root {
	/* Font weight ekstrabold — DS hanya sampai --font-weight-bold: 700 */
	--font-weight-extrabold: 800;

	/* Warna accent klien untuk gradient hero title */
	--hero-gradient-accent: hsl(280, 70%, 55%);

	/* Durasi animasi dekoratif — di luar skala DS */
	--duration-decorative: 2s;
}


/* ==========================================================================
2. HERO — Full screen
--------------------------------------------------------------------------
Hero section setinggi viewport penuh. Konten di-center secara vertikal.
Pakai min-height bukan height supaya tetap bisa scroll kalau konten
lebih panjang dari viewport (mis. di mobile).
========================================================================== */

.hero-fullscreen {
	min-height:      100svh;   /* svh = small viewport height — akurat di mobile */
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	position:        relative;
	overflow:        hidden;
	padding:         var(--size-1600) var(--size-400);

	/* Gradient background klien */
	background: linear-gradient(
		135deg,
		hsl(220, 90%, 96%) 0%,
		hsl(260, 80%, 95%) 50%,
		hsl(300, 60%, 96%) 100%
	);
}

/* Dark mode */
[data-theme="dark"] .hero-fullscreen {
	background: linear-gradient(
		135deg,
		hsl(220, 40%, 8%)  0%,
		hsl(260, 35%, 10%) 50%,
		hsl(280, 30%, 9%)  100%
	);
}

/* Dekorasi radial glow di background */
.hero-fullscreen::before {
content:        '';
position:       absolute;
inset:          0;
pointer-events: none;
background:
	radial-gradient(circle at 20% 30%, hsla(220, 80%, 70%, 0.20) 0%, transparent 50%),
	radial-gradient(circle at 80% 70%, hsla(280, 70%, 70%, 0.15) 0%, transparent 50%);
}

/* Fallback untuk browser lama yang tidak support svh */
@supports not (min-height: 100svh) {
.hero-fullscreen {
	min-height: 100vh;
}
}

/* ── Hero konten ── */
.hero-content {
text-align: center;
position:   relative;
z-index:    1;
}

.hero-eyebrow {
display:        inline-block;
font-size:      var(--text-caption-size);     /* 0.8rem ≈ 12.8px */
font-weight:    var(--font-weight-semibold);
letter-spacing: var(--tracking-wider);        /* 0.05em */
text-transform: uppercase;
color:          var(--color-text-secondary);
margin-bottom:  var(--size-400);
}

.hero-title {
font-size:      clamp(2rem, 6vw, 3.75rem);   /* responsive — tidak bisa token statis */
font-weight:    var(--font-weight-extrabold); /* 800 — custom token di atas */
line-height:    1.1;                          /* lebih tight dari --leading-tight (1.25) */
letter-spacing: var(--tracking-tight);        /* -0.025em — cukup dekat dengan -0.03em */
color:          var(--color-text-primary);
margin-bottom:  var(--size-500);
max-width:      14ch;
margin-inline:  auto;
}

/* Gradient text pada span di dalam .hero-title */
.hero-title span {
background:              linear-gradient(135deg, var(--brand-500), var(--hero-gradient-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip:         text;
}

.hero-subtitle {
font-size:     var(--font-size-350);          /* 1.125rem — 18px */
color:         var(--color-text-secondary);
max-width:     44ch;
margin-inline: auto;
margin-bottom: var(--size-800);
line-height:   var(--leading-relaxed);        /* 1.625 */
}

/* ── Scroll hint ── */
.hero-scroll-hint {
display:     inline-flex;
align-items: center;
gap:         var(--size-200);
font-size:   var(--text-label-size);
color:       var(--color-text-secondary);
opacity:     0.7;
animation:   hero-bounce var(--duration-decorative) var(--ease-in-out) infinite;
}

@keyframes hero-bounce {
0%, 100% { transform: translateY(0); }
50%       { transform: translateY(6px); }
}

/* Hormati preferensi reduced motion */
@media (prefers-reduced-motion: reduce) {
.hero-scroll-hint {
	animation: none;
}
}

/* ==========================================================================
4. PAGE BODY — Kompensasi cek-navbar fixed
--------------------------------------------------------------------------
Karena cek-navbar sekarang fixed (bukan sticky), konten halaman perlu
padding-top supaya tidak tertutup di belakang cek-navbar.

Nilai: tinggi cek-navbar + jarak atas cek-navbar + buffer
	--cek-navbar-height-md (60px) + --size-400 (16px) + --size-400 (16px) = 92px
========================================================================== */

.page-body {
padding-top: calc(var(--cek-navbar-height-md) + var(--size-400) + var(--size-400));
}

/* Hero fullscreen tidak butuh padding-top — cek-navbar mengambang di atasnya */
.page-body-hero {
padding-top: 0;
}


/* ==========================================================================
5. RESPONSIVE
--------------------------------------------------------------------------
Di layar kecil, jarak kiri-kanan dikurangi supaya cek-navbar tidak terlalu
sempit.
========================================================================== */

@media (max-width: 767px) {
.cek-navbar {
	left:  var(--size-300);   /* 12px di mobile */
	right: var(--size-300);
	top:   var(--size-300);
}

.page-body {
	padding-top: calc(var(--cek-navbar-height-md) + var(--size-300) + var(--size-300));
}

.hero-fullscreen {
	padding: var(--size-1200) var(--size-400);
}
}