/* ============================================
   NAVBAR
   Nilai warna & font di bawah ini persis dari
   CSS yang di-copy dari Figma Dev Mode kamu:
   - brand-name  : Koulen 64px, #3E4D6E
   - nav-link    : Koulen 40px, #000
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;

  /* dekorasi tambahan biar gak polos:
     shadow lembut + garis gradasi tipis di bawah navbar */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #3E4D6E, #FF8C00) 1;
}

.navbar {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 15px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  /* dekorasi kecil: logo dikasih shadow tipis biar ada depth */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.brand-name {
  font-family: 'Koulen', sans-serif;
  font-size: 64px;
  font-weight: 400;
  line-height: 145%;
  letter-spacing: -1.28px;
  color: #3E4D6E;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-link {
  position: relative;
  font-family: 'Koulen', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 145%;
  letter-spacing: -0.8px;
  color: #000000;
  transition: color 0.25s ease;
}

/* dekorasi: underline animasi muncul pas hover, bukan garis statis polos */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 3px;
  background: #FF8C00;
  border-radius: 2px;
  transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link:hover {
  color: #3E4D6E;
}

.nav-link.active {
  color: #3E4D6E;
}

.nav-icon {
  color: #000000;
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.25s ease, transform 0.2s ease;
}

.nav-icon:hover {
  background-color: rgba(62, 77, 110, 0.1);
  transform: translateY(-2px);
}

/* ============ RESPONSIVE ============
   Font Koulen 64px/40px itu ukuran asli buat layar desktop lebar (1440px).
   Kalau layar lebih kecil, angka segede itu bakal numpuk/overflow,
   makanya di-scale turun. */
@media (max-width: 768px) {
  .brand-name {
    font-size: 32px;
  }

  .nav-link {
    font-size: 20px;
  }

  .main-nav {
    gap: 20px;
  }

  .navbar {
    flex-wrap: wrap;
    gap: 12px;
  }
}