/* ============================================================
   header.css — Sticky Navbar Stilleri
   Üst navigasyon çubuğu: logo, menü linkleri,
   mobil hamburger menü ve scroll efekti.
   ============================================================ */

/* --- Ana Header --- */

/* Sabit (sticky) pozisyonlu header — sayfanın üstüne yapışır */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Mobil menu (z-index: var(--z-overlay)) tam ekran acildiginda header'in
     (ve icindeki hamburger butonunun) altinda kalmamasi icin overlay'den
     yuksek tutuluyor - aksi halde acilan menu, kapatma icin kullanilan
     ayni butonu ortuyor ve ziyaretci menuyu kapatamiyordu. */
  z-index: calc(var(--z-overlay) + 1);
  /* Scroll'da arka plan değişimi için geçiş */
  transition: background-color var(--transition-normal),
              box-shadow var(--transition-normal),
              backdrop-filter var(--transition-normal);
  /* Başlangıçta koyu — logo ile uyumlu */
  background-color: rgba(30, 30, 30, 0.95);
  /* Bulanıklık efekti — glassmorphism */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Scroll edildiğinde header'a eklenen sınıf */
.header.scrolled {
  background-color: rgba(20, 20, 20, 0.98);
  /* Alt gölge belirginleşir */
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* Header iç sarmalayıcı — logo ve menüyü hizalar */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Header yüksekliği */
  height: 80px;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- Logo --- */

/* Logo sarmalayıcı */
.logo {
  /* Flex shrink kapalı — logo küçülmesin */
  flex-shrink: 0;
  /* Z-index — mobil menü overlay'ının üstünde kalır */
  z-index: 10;
}

/* Logo linki */
.logo a {
  display: flex;
  align-items: center;
  /* Hover'da renk değişmesin */
  color: var(--color-gray-900);
  /* Geçiş efekti */
  transition: opacity var(--transition-fast);
}

/* Logo hover — hafif opaklık azalması */
.logo a:hover {
  opacity: 0.8;
}

/* Logo görseli — beyaz filtre uygulanmış */
.logo img {
  /* Logo yüksekliği */
  height: 40px;
  width: auto;
  /* SVG logosunu beyazlaştır — koyu arka plan üzerine */
  filter: brightness(0) invert(1);
  transition: filter var(--transition-fast), opacity var(--transition-fast);
}

/* Panelden yüklenen logo beyazlatılmaz.
   Yukarıdaki filtre, pakette gelen TEK RENK koyu SVG'yi koyu zeminde görünür
   kılmak için var. Yönetici kendi logosunu yüklediğinde aynı filtre onu da
   tamamen beyaza çevirir ve renkli bir logo tanınmaz hale gelirdi. */
.logo.logo-custom img {
  filter: none;
}

/* Logo metin alternatifi (placeholder için) */
.logo-text {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-gray-900);
}

/* Logo içindeki vurgulu metin — marka kırmızısı */
.logo-text span {
  color: var(--color-primary);
}

/* --- Masaüstü Navigasyon --- */

/* Navigasyon listesi — yatay hizalı */
.nav-menu {
  display: none;
  align-items: center;
  /* Menü öğeleri arası boşluk */
  gap: var(--space-xs);
}

/* Nav link stili */
.nav-menu a {
  position: relative;
  padding: 0.5rem 1rem;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.8);
  /* Geçiş efekti */
  transition: color var(--transition-fast);
  /* Alt çizgi animasyonu için */
  text-decoration: none;
}

/* Nav link hover */
.nav-menu a:hover {
  color: var(--color-white);
}

/* Aktif sayfa linki */
.nav-menu a.active {
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
}

/* Alt çizgi animasyonu — hover'da soldan sağa kayar */
.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  /* Başlangıçta genişlik 0 */
  width: 0;
  height: 2px;
  background-color: var(--color-white);
  /* Ortadan genişler */
  transform: translateX(-50%);
  transition: width var(--transition-normal);
}

/* Hover'da alt çizgi genişler */
.nav-menu a:hover::after,
.nav-menu a.active::after {
  width: 70%;
}

/* --- Header Sağ Bölüm --- */

/* Sağdaki buton ve hamburger grubu */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Header CTA butonu — "Satın Al" */
.header-cta {
  /* Mobilde gizle */
  display: none;
}

/* --- Hamburger Menü Butonu (Mobil) --- */

/* Hamburger ikon butonu */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Buton boyutu */
  width: 40px;
  height: 40px;
  /* Arka planı temizle */
  background: none;
  border: none;
  cursor: pointer;
  /* İçindeki çizgiler arası boşluk */
  gap: 5px;
  /* Z-index — overlay üzerinde */
  z-index: 10;
  /* Geçiş */
  transition: all var(--transition-fast);
}

/* Hamburger çizgileri */
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: 2px;
  /* Animasyon geçişi */
  transition: all var(--transition-normal);
  /* Transform origin — dönüş noktası */
  transform-origin: center;
}

/* --- Hamburger Aktif Durumu (X şekli) --- */

/* Üst çizgi — 45 derece döner */
.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

/* Orta çizgi — kaybolur */
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

/* Alt çizgi — -45 derece döner */
.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Mobil Menü Overlay --- */

/* Tam ekran mobil menü */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* Arka plan — koyu tema */
  background-color: rgba(20, 20, 20, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* Header'ın altında */
  z-index: var(--z-overlay);
  /* Başlangıçta gizli */
  opacity: 0;
  visibility: hidden;
  /* Açılma animasyonu */
  transition: opacity var(--transition-normal),
              visibility var(--transition-normal);
  /* İçeriği ortala */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Header yüksekliği kadar üst boşluk */
  padding-top: 80px;
}

/* Mobil menü açık durumu */
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

/* Mobil menü navigasyon listesi */
.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

/* Mobil menü linkleri — büyük ve belirgin */
.mobile-nav a {
  font-size: 1.5rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  /* Geçiş efekti */
  transition: color var(--transition-fast),
              transform var(--transition-fast);
  /* Kayma animasyonu için */
  transform: translateY(20px);
  opacity: 0;
}

/* Mobil menü açıldığında linkler kayarak görünür */
.mobile-menu.open .mobile-nav a {
  transform: translateY(0);
  opacity: 1;
}

/* Her link sırayla görünür — kademeli animasyon.
   Menü artık panelden yönetiliyor, kaç satır olacağı önceden bilinmiyor.
   Önceden gecikmeler nth-child(1..6) ile tek tek yazılmıştı ve 6'dan fazla
   link eklendiğinde fazlası animasyonsuz açılıyordu. Sıra numarasını React
   `--menu-sirasi` olarak veriyor (karüseldeki --pc-page ile aynı yaklaşım). */
.mobile-menu.open .mobile-nav a {
  transition-delay: calc(0.1s + var(--menu-sirasi, 0) * 0.05s);
}

/* Mobil menü link hover */
.mobile-nav a:hover {
  color: var(--color-accent);
  transform: translateX(8px);
}

/* Mobil menüdeki CTA butonu */
.mobile-menu .btn {
  margin-top: var(--space-xl);
  /* Kayma animasyonu */
  transform: translateY(20px);
  opacity: 0;
  transition: all var(--transition-normal);
  transition-delay: 0.4s;
}

/* Menü açıkken buton görünür */
.mobile-menu.open .btn {
  transform: translateY(0);
  opacity: 1;
}

/* --- Responsive: Tablet ve Üzeri --- */

@media (min-width: 768px) {

  /* Header CTA butonunu göster */
  .header-cta {
    display: inline-flex;
  }
}

/* --- Responsive: Masaüstü --- */

@media (min-width: 1024px) {

  /* Masaüstü navigasyonu göster */
  .nav-menu {
    display: flex;
  }

  /* Hamburger menü butonunu gizle */
  .hamburger {
    display: none;
  }

  /* Mobil menüyü tamamen devre dışı bırak */
  .mobile-menu {
    display: none;
  }
}