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