/* =====================================================================
 * header.css — ÜST GEZİNME (HEADER)
 * ---------------------------------------------------------------------
 * İçerik:
 *   1. Header iskeleti (sticky, küçülen, opak arka plan)
 *   2. Logo ve isim alanı
 *   3. Birincil gezinme menüsü (desktop)
 *   4. Mobil gezinme (hamburger + tam ekran katman)
 *   5. Dil değiştirici
 *   6. Header varyantları: şeffaf (hero üzerinde), sıkışmış (scrolled)
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 0. SKIP LINK — ekran okuyucu ve klavye için
 * --------------------------------------------------------------------- */
.be-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--ink);
  color: var(--ink-inverse);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-decoration: none;
  z-index: 9999;
  transform: translateY(-110%);
  transition: transform var(--dur-fast) var(--ease-standard);
  border-radius: 0 0 var(--radius-md) 0;
}
.be-skip-link:focus { transform: translateY(0); }

/* ---------------------------------------------------------------------
 * 1. HEADER İSKELETİ
 * Üst kenarda sabit; aşağı kaydırınca sıkışır ve hafif opaklık
 * kazanır. Gölge yerine ince alt çizgi kullanılır.
 * --------------------------------------------------------------------- */
.be-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--canvas);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    padding-block var(--dur-base) var(--ease-standard);
}

.be-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
  transition: padding-block var(--dur-base) var(--ease-standard);
}

.be-header.is-scrolled {
  background: var(--surface-translucent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--line-soft);
}

.be-header.is-scrolled .be-header__inner {
  padding-block: var(--space-3);
}

@media (min-width: 64em) {
  .be-header__inner { padding-block: var(--space-5); }
  .be-header.is-scrolled .be-header__inner { padding-block: var(--space-3); }
}

/* Şeffaf varyant: koyu veya görsel hero üzerine binen header */
.be-header--transparent {
  background: transparent;
  border-bottom-color: transparent;
}
.be-header--transparent.is-scrolled {
  background: var(--surface-translucent);
  border-bottom-color: var(--line-soft);
}

/* ---------------------------------------------------------------------
 * 2. LOGO
 * Sol üstte. Metin + monogram varyantı. SVG tabanlı.
 * --------------------------------------------------------------------- */
.be-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-serif);
  letter-spacing: var(--tracking-snug);
  line-height: 1;
}

.be-logo__mark {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.be-logo__mark svg { width: 100%; height: 100%; display: block; }

.be-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.be-logo__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--ink);
  letter-spacing: var(--tracking-snug);
}
.be-logo__role {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-top: 2px;
}

@media (min-width: 48em) {
  .be-logo__mark { width: 40px; height: 40px; }
  .be-logo__name { font-size: var(--fs-lg); }
}

@media (max-width: 30em) {
  .be-logo__role { display: none; }
}

/* ---------------------------------------------------------------------
 * 3. BİRİNCİL GEZİNME (desktop)
 * Yatay liste, hover'da mat altın alt çizgi açılır, aktif öğe
 * belirgin.
 * --------------------------------------------------------------------- */
.be-nav {
  display: none;
  align-items: center;
}

@media (min-width: 64em) {
  .be-nav { display: flex; }
}

.be-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  list-style: none;
  margin: 0;
  padding: 0;
}

.be-nav__item { position: relative; }

.be-nav__link {
  display: inline-block;
  position: relative;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--ink-secondary);
  padding: var(--space-2) 0;
  transition: color var(--dur-fast) var(--ease-standard);
}
.be-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out-soft), background-color var(--dur-fast) var(--ease-standard);
}
.be-nav__link:hover { color: var(--ink); }
.be-nav__link:hover::after { transform: scaleX(1); background: var(--gold); }

.be-nav__link.is-current {
  color: var(--ink);
}
.be-nav__link.is-current::after {
  transform: scaleX(1);
  background: var(--ink);
}

/* Alt menü (çok seviyeli) */
.be-nav__sub {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 240px;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    visibility 0s linear var(--dur-fast);
  list-style: none;
  margin: 0;
}
.be-nav__item:hover .be-nav__sub,
.be-nav__item:focus-within .be-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.be-nav__sub li { margin: 0; }
.be-nav__sub a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.be-nav__sub a:hover {
  background: var(--canvas-alt);
  color: var(--ink);
}

/* ---------------------------------------------------------------------
 * 4. SAĞ BLOK: dil + mobil menü tetikleyici
 * --------------------------------------------------------------------- */
.be-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Dil değiştirici */
.be-lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px;
  font-size: var(--fs-xs);
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-secondary);
}
.be-lang a, .be-lang span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.be-lang a:hover { color: var(--ink); }
.be-lang .is-active {
  background: var(--ink);
  color: var(--ink-inverse);
}

/* Polylang dil switcher çok dilli durumda taşma önleme */
@media (min-width: 64em) {
	.be-lang { gap: 0; }
}

/* Mobil menü tetikleyici */
.be-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.be-menu-toggle:hover { border-color: var(--ink); background: var(--canvas-alt); }
@media (min-width: 64em) {
  .be-menu-toggle { display: none; }
}

.be-menu-toggle__bars,
.be-menu-toggle__bars::before,
.be-menu-toggle__bars::after {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out-soft), opacity var(--dur-fast) var(--ease-standard);
}
.be-menu-toggle__bars { position: relative; }
.be-menu-toggle__bars::before { content: ""; position: absolute; top: -6px; left: 0; }
.be-menu-toggle__bars::after  { content: ""; position: absolute; top:  6px; left: 0; }

.be-menu-toggle[aria-expanded="true"] .be-menu-toggle__bars { background: transparent; }
.be-menu-toggle[aria-expanded="true"] .be-menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.be-menu-toggle[aria-expanded="true"] .be-menu-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------------------
 * 5. MOBİL TAM EKRAN KATMAN
 * --------------------------------------------------------------------- */
.be-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: var(--canvas);
  padding: calc(var(--space-13) + var(--space-4)) var(--space-6) var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-out-soft),
    visibility 0s linear var(--dur-base);
}
.be-mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.be-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.be-mobile-nav__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-4) 0;
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.be-mobile-nav__list a::after {
  content: "→";
  font-size: var(--fs-md);
  color: var(--ink-tertiary);
  transition: transform var(--dur-base) var(--ease-out-soft), color var(--dur-fast) var(--ease-standard);
}
.be-mobile-nav__list a:hover { color: var(--gold); }
.be-mobile-nav__list a:hover::after { transform: translateX(4px); color: var(--gold); }

.be-mobile-nav__sub {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0 var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-bottom: 1px solid var(--line-soft);
}
.be-mobile-nav__sub a {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--ink-secondary);
  padding: var(--space-2) 0;
  border: 0;
}
.be-mobile-nav__sub a::after { content: ""; }

/* ---------------------------------------------------------------------
 * 6. BODY kilidi (mobil menü açıkken)
 * --------------------------------------------------------------------- */
body.has-mobile-nav-open { overflow: hidden; }