/* =========================================================
   Koduken Davetiye — Sticky Navbar
   ========================================================= */

/* --- Global body offset: hero olmayan sayfalar --- */
body[data-page]:not([data-page="home"]) {
  padding-top: 76px;
}

/* --- Navbar root --- */
.site-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-sticky);
  height: 76px;
  background: rgba(62, 26, 42, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    height            var(--duration-fast) var(--ease-spring),
    background        var(--duration-fast) var(--ease-spring),
    border-color      var(--duration-fast) var(--ease-spring),
    backdrop-filter   var(--duration-fast) var(--ease-spring);
}

.site-nav.is-scrolled {
  height: 60px;
  background: rgba(62, 26, 42, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(201, 168, 118, 0.20);
  box-shadow: 0 2px 16px rgba(62, 26, 42, 0.25);
}

/* --- İç konteyner: 3 sütun — logo | linkler | CTA --- */
.site-nav__inner {
  max-width: 1280px;
  margin-inline: auto;
  height: 100%;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

/* --- Logo grubu --- */
.site-nav__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex-shrink: 0;
}

.site-nav__logo-icon {
  width: 32px;
  height: 32px;
  color: var(--cream-50);
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-spring);
}

.site-nav__logo-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--cream-50);
  transition: color var(--duration-fast) var(--ease-spring);
}

/* --- Nav linkleri (orta sütun) --- */
.site-nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  list-style: none;
}

.site-nav__link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(250, 247, 244, 0.95);
  text-decoration: none;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-btn);
  transition:
    color            var(--duration-instant) var(--ease-spring),
    background-color var(--duration-instant) var(--ease-spring);
  white-space: nowrap;
}

.site-nav__link:hover {
  color: var(--cream-50);
  background-color: rgba(255, 255, 255, 0.10);
}

.site-nav__link.is-active {
  color: var(--cream-50);
  background-color: rgba(255, 255, 255, 0.14);
  position: relative;
}

.site-nav__link.is-active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background: var(--champagne);
  border-radius: 1px;
}

/* --- Sağ sütun: CTA + hamburger --- */
.site-nav__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* --- CTA butonu --- */
.site-nav__cta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--plum-900);
  background-color: var(--cream-50);
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background-color var(--duration-instant) var(--ease-spring),
    color            var(--duration-instant) var(--ease-spring),
    transform        var(--duration-instant) var(--ease-spring);
}

.site-nav__cta:hover {
  background-color: var(--plum-200);
  color: var(--plum-900);
  transform: translateY(-1px);
}

/* Dokunsal basma geri bildirimi */
.site-nav__cta:active,
.is-scrolled .site-nav__cta:active {
  transform: scale(0.97);
  transition-duration: 60ms;
}

/* Scrolled state'te CTA rengi: plum zemin üzerinde daha belirgin */
.is-scrolled .site-nav__cta {
  background-color: var(--plum-500);
  color: var(--cream-50);
}

.is-scrolled .site-nav__cta:hover {
  background-color: var(--plum-700);
  color: var(--cream-50);
  transform: translateY(-1px);
}

/* --- Hamburger (sadece mobil) --- */
.site-nav__burger {
  display: none;
  background: none;
  border: none;
  padding: 0.6875rem;  /* (44px - 22px) / 2 */
  min-width: 44px;
  min-height: 44px;
  color: var(--cream-50);
  cursor: pointer;
  border-radius: 6px;
  transition: background-color var(--duration-instant) var(--ease-spring);
}

.site-nav__burger:hover {
  background-color: rgba(255, 255, 255, 0.10);
}

.site-nav__burger svg {
  display: block;
  width: 22px;
  height: 22px;
}

/* --- Mobil drawer (görünürlük Alpine x-show ile yönetilir) --- */
.site-nav__drawer {
  overflow: hidden;
}

.site-nav__drawer-inner {
  padding: 0.75rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: rgba(62, 26, 42, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-nav__drawer .site-nav__link {
  display: flex;
  align-items: center;
  padding: 0.875rem 0.75rem;
  font-size: var(--text-base, 1rem);
  min-height: 44px;
}

.site-nav__drawer .site-nav__cta {
  margin-top: 0.5rem;
  text-align: center;
  display: block;
  background-color: var(--plum-500);
  color: var(--cream-50);
}

/* --- Responsive --- */
@media (max-width: 767px) {
  .site-nav {
    height: auto;
    min-height: 64px;
  }

  body[data-page]:not([data-page="home"]) {
    padding-top: 64px;
  }

  /* Mobilde 2 sütun: logo sol, sağ taraf sağda */
  .site-nav__inner {
    min-height: 64px;
    height: auto;
    grid-template-columns: 1fr auto;
    padding-block: 0;
  }

  /* Nav elementi grid'den çıkar, yer kaplasın */
  .site-nav__inner > nav {
    display: none;
  }

  /* Desktop CTA gizle */
  .site-nav__right .site-nav__cta {
    display: none;
  }

  .site-nav__burger {
    display: flex;
  }

  /* Drawer tüm satırı kaplasın */
  .site-nav__drawer {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .site-nav__burger {
    display: none !important;
  }
}