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


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

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


/* ==========================================================================
   2. NAVBAR FLOATING — Capsule + Glassmorphism
   --------------------------------------------------------------------------
   Override .navbar dari design-system supaya jadi floating capsule.

   Apa yang diubah dari default:
     - position sticky → fixed  (supaya bisa diberi jarak dari atas)
     - top: 0 → top: var(--size-400)   (jarak 16px dari atas)
     - width 100% → width auto + margin auto  (capsule, bukan full-width)
     - background solid → backdrop-filter blur  (glassmorphism)
     - border-bottom → border semua sisi + border-radius full
     - left/right: var(--size-400)  (jarak dari sisi kiri & kanan)

   PENTING: karena .navbar sekarang fixed (bukan sticky), halaman di
   bawahnya perlu padding-top supaya konten tidak tertutup navbar.
   Lihat bagian .page-body di bawah.
   ========================================================================== */

.navbar {
  position:   fixed;
  top:        var(--size-400);          /* 16px dari atas */
  left:       var(--size-800);          /* 16px dari kiri */
  right:      var(--size-800);          /* 16px dari kanan */
  width:      auto;                     /* ikut left/right, bukan 100% */

  /* Glassmorphism */
  background-color: hsla(0, 0%, 100%, 0.65);
  backdrop-filter:  blur(7px) saturate(180%);
  -webkit-backdrop-filter: blur(7px) saturate(180%);  /* Safari */

  /* Capsule shape */
  border-radius: var(--radius-full);
  border:        1px solid hsla(0, 0%, 100%, 0.30);

  /* Shadow lebih soft dari default */
  box-shadow:    var(--shadow-sm);

  /* Reset border-bottom dari design-system */
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.30);

  /* Transisi smooth saat scroll */
  transition:
    background-color var(--duration-normal) var(--ease-default),
    box-shadow       var(--duration-normal) var(--ease-default),
    border-color     var(--duration-normal) var(--ease-default);
}

/* Dark mode glassmorphism */
[data-theme="dark"] .navbar {
  background-color: hsla(0, 0%, 10%, 0.65);
  border-color:     hsla(0, 0%, 100%, 0.10);
}

/* Scrolled state — lebih opaque saat sudah scroll */
.navbar.is-scrolled {
  background-color: hsla(0, 0%, 100%, 0.85);
  box-shadow:       var(--shadow-2xl);
  border-color:     hsla(0, 0%, 100%, 0.50);
}

[data-theme="dark"] .navbar.is-scrolled {
  background-color: hsla(0, 0%, 10%, 0.85);
  border-color:     hsla(0, 0%, 100%, 0.15);
}

/* Transparent variant — tetap support untuk hero */
.navbar-transparent {
  background-color:  transparent;
  border-color:      hsla(0, 0%, 100%, 0.15);
  backdrop-filter:   none;
  -webkit-backdrop-filter: none;
  box-shadow:        none;
}

.navbar-transparent.is-scrolled {
  background-color:    hsla(0, 0%, 100%, 0.85);
  backdrop-filter:     blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-color:        hsla(0, 0%, 100%, 0.50);
  box-shadow:          var(--shadow-xl);
}


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

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

.page-body {
  padding-top: calc(var(--navbar-height-md) + var(--size-400) + var(--size-400));
  /* = 60px + 16px + 16px = 92px */
}

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


/* ==========================================================================
   4. RESPONSIVE — Navbar floating di mobile
   --------------------------------------------------------------------------
   Di layar kecil, jarak kiri-kanan dikurangi supaya tidak terlalu sempit.
   ========================================================================== */

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

  .page-body {
    padding-top: calc(var(--navbar-height-md) + var(--size-300) + var(--size-300));
    /* = 60px + 12px + 12px = 84px */
  }
}