/* assets/header/header.css — Header (scoped & clean)
   Base tokenlar:
   --hdr-h, --hdr-offset, --hdr-logo-h, --sa-top, --adminbar-h,
   --header-bg, --header-fg

   Yeni tokenlar (Customizer):
   --hdr-pad-x
   --hdr-logo-x, --hdr-logo-y
   --hdr-logo-color, --hdr-logo-grad-from, --hdr-logo-grad-to, --hdr-logo-grad-visible
   --hdr-toggle-x, --hdr-toggle-y
   --hdr-toggle-size, --hdr-toggle-bg, --hdr-toggle-border, --hdr-toggle-icon
*/

/* KÖK: sabit header + güvenli üst boşluk */
.site-header {
  --hdr-offset-active: var(--hdr-offset, 16px);
  --hdr-pad-x-active: var(--hdr-pad-x, 0px);
  --hdr-font-active: var(--hdr-font, inherit);
  --hdr-fg-active: var(--header-fg, #ffffff);
  --hdr-logo-x-active: var(--hdr-logo-x, 0px);
  --hdr-logo-y-active: var(--hdr-logo-y, 0px);
  --hdr-logo-h-active: var(--hdr-logo-h, 44px);
  --hdr-toggle-x-active: var(--hdr-toggle-x, 0px);
  --hdr-toggle-y-active: var(--hdr-toggle-y, 0px);
  --hdr-toggle-size-active: var(--hdr-toggle-size, 44px);
  --hdr-toggle-bg-active: var(--hdr-toggle-bg, rgba(20, 20, 22, 0.35));
  --hdr-toggle-border-active: var(--hdr-toggle-border, rgba(255, 255, 255, 0.25));
  --hdr-toggle-icon-active: var(--hdr-toggle-icon, var(--hdr-fg-active));
  --hdr-logo-auto-color: #ffffff;
  --hdr-logo-auto-grad-from: #ffffff;
  --hdr-logo-auto-grad-to: #60a5fa;
  --hdr-logo-auto-grad-visible: 0;
  --hdr-logo-color-active: var(
    --hdr-logo-preview-color,
    var(--hdr-logo-color, var(--hdr-logo-auto-color))
  );
  --hdr-logo-grad-from-active: var(
    --hdr-logo-preview-grad-from,
    var(--hdr-logo-grad-from, var(--hdr-logo-auto-grad-from))
  );
  --hdr-logo-grad-to-active: var(
    --hdr-logo-preview-grad-to,
    var(--hdr-logo-grad-to, var(--hdr-logo-auto-grad-to))
  );
  --hdr-logo-grad-visible-active: var(
    --hdr-logo-preview-grad-visible,
    var(--hdr-logo-grad-visible, var(--hdr-logo-auto-grad-visible))
  );

  --hdr-top: calc(var(--sa-top) + var(--adminbar-h) + var(--hdr-offset-active));
  position: fixed;
  inset: var(--hdr-top) 0 auto 0;
  z-index: 2147483645;
  background: transparent;
  pointer-events: auto;
}

/* BAR: logo + desktop nav + mobile toggle */
.site-header .sh__bar {
  height: var(--hdr-h);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 0 calc(clamp(12px, 4vw, 24px) + var(--hdr-pad-x-active));
  pointer-events: auto;
  position: relative;
  z-index: 2147483646;

  font-family: var(--hdr-font-active);

  /* Arka plan yok */
  background: transparent;
  color: var(--hdr-fg-active);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;

  border: none;
  border-radius: 0;
}

.site-header .sh__desktop-nav {
  display: none;
}

/* Marka / logo (yalnız header kapsamı) */
.site-header .sh__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  margin: 0 !important;

  transform: translate(var(--hdr-logo-x-active), var(--hdr-logo-y-active));
}

.site-header .custom-logo {
  height: var(--hdr-logo-h-active);
  width: auto;
  display: block;
}

.site-header .asp-header-logo-svg {
  height: var(--hdr-logo-h-active);
  width: auto;
  display: block;
}

.site-header .asp-header-logo-svg .asp-logo-fill {
  transition: opacity 160ms ease;
}

.site-header .asp-header-logo-svg .asp-logo-fill--solid {
  opacity: calc(1 - var(--hdr-logo-grad-visible-active));
}

.site-header .asp-header-logo-svg .asp-logo-fill--grad {
  opacity: var(--hdr-logo-grad-visible-active);
}

/* Toggle */
.site-header .sh__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--hdr-toggle-size-active);
  height: var(--hdr-toggle-size-active);

  cursor: pointer;

  border: 1px solid var(--hdr-toggle-border-active);
  background: var(--hdr-toggle-bg-active);

  color: var(--hdr-fg-active);
  border-radius: 10px;

  -webkit-appearance: none;
  appearance: none;

  position: static !important;
  float: none !important;
  pointer-events: auto;
  touch-action: manipulation;
  position: relative !important;
  z-index: 2147483647;

  transform: translate(var(--hdr-toggle-x-active), var(--hdr-toggle-y-active));
}

.site-header .sh__toggle svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Hamburger (3 çizgi) */
.site-header .sh__burger {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--hdr-toggle-icon-active);
}

.site-header .sh__burger::before,
.site-header .sh__burger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: inherit;
  background: var(--hdr-toggle-icon-active);
}

.site-header .sh__burger::before {
  transform: translateY(-6px);
}

.site-header .sh__burger::after {
  transform: translateY(6px);
}

/* Çekmece (tam ekran overlay menü) */
.site-header .sh__drawer[hidden] {
  display: none !important;
}

.site-header.is-open .sh__drawer {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.site-header .sh__drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  z-index: 2147483646;

  background: rgba(12, 12, 14, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  border-radius: 0;
  border: none;

  /* Bar üstte kalsın, içerik barla çakışmasın */
  padding: calc(var(--sa-top, 0px) + var(--adminbar-h, 0px) + var(--hdr-h, 64px) + 18px)
    clamp(16px, 4vw, 32px) calc(env(safe-area-inset-bottom, 0px) + 22px);

  pointer-events: auto;

  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header .sh__close {
  position: absolute;
  top: calc(var(--sa-top, 0px) + var(--adminbar-h, 0px) + 18px);
  right: clamp(16px, 4vw, 32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(20, 20, 22, 0.42);
  color: #fff;
  font: 600 14px/1 var(--hdr-font-active, system-ui);
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .site-header .sh__close:hover {
    background: rgba(20, 20, 22, 0.58);
  }
}

/* Nav merkezleme */
.site-header .sh__nav {
  width: min(760px, 100%);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Menü listesi tam ortada */
.site-header .sh__menu {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  gap: 16px;

  text-align: center;
}

/* Link görünümü */
.site-header .sh__menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 6px 0;
  text-decoration: none;

  color: #fff;
  font: 650 clamp(18px, 2.1vw, 28px) / 1.1 var(--hdr-font-active, system-ui);
  letter-spacing: -0.01em;

  border-radius: 0;
  background: transparent;
  border: 0;

  will-change: transform;
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

@media (hover: hover) {
  .site-header .sh__menu a:hover {
    opacity: 0.82;
    transform: translateY(-1px);
  }
}

/* Menü ikonları sadece mobil drawer'da */
.site-header .sh__menu a::before {
  content: '•';
  width: 22px;
  display: inline-grid;
  place-items: center;
  opacity: 0.9;
  font-size: 18px;
}

.site-header .sh__menu a[data-goto='hero']::before {
  content: '⌂';
}
.site-header .sh__menu a[data-goto='projects']::before {
  content: '◻';
}
.site-header .sh__menu a[data-goto='films']::before {
  content: '▶';
}
.site-header .sh__menu a[data-goto='panorama']::before {
  content: '⦿';
}
.site-header .sh__menu a[data-goto='team']::before {
  content: '✦';
}
.site-header .sh__menu a[data-goto='about']::before {
  content: 'i';
}
.site-header .sh__menu a[data-goto='contact']::before {
  content: '✉';
}

@media (min-width: 901px) {
  .site-header .sh__bar {
    justify-content: center;
    min-height: var(--hdr-h);
  }

  .site-header .sh__brand {
    position: absolute;
    left: calc(clamp(12px, 4vw, 24px) + var(--hdr-pad-x-active));
    top: 50%;
    transform: translate(var(--hdr-logo-x-active), calc(-50% + var(--hdr-logo-y-active)));
    z-index: 2;
  }

  .site-header .sh__desktop-nav {
    display: flex;
    justify-content: center;
    width: min(760px, calc(100vw - 260px));
  }

  .site-header .sh__menu--desktop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2vw, 34px);
    text-align: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header .sh__menu--desktop a {
    padding: 0;
    color: var(--hdr-fg-active);
    font-family: var(--hdr-font-active, system-ui);
    font-size: clamp(11px, 0.82vw, 13px);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .site-header .sh__menu--desktop a::before {
    display: none !important;
    content: none !important;
  }

  .site-header .sh__toggle,
  .site-header .sh__drawer {
    display: none !important;
  }
}

/* Mobilde sadece logo kalsın, site title/description gizlensin */
@media (max-width: 900px) {
  .site-header {
    z-index: 2147483645;
    --hdr-offset-active: var(--hdr-offset-m, var(--hdr-offset, 16px));
    --hdr-pad-x-active: var(--hdr-pad-x-m, var(--hdr-pad-x, 0px));
    --hdr-font-active: var(--hdr-font-m, var(--hdr-font, inherit));
    --hdr-fg-active: var(--header-fg-m, var(--header-fg, #ffffff));
    --hdr-logo-x-active: var(--hdr-logo-x-m, var(--hdr-logo-x, 0px));
    --hdr-logo-y-active: var(--hdr-logo-y-m, var(--hdr-logo-y, 0px));
    --hdr-logo-h-active: var(--hdr-logo-h-m, var(--hdr-logo-h, 38px));
    --hdr-toggle-x-active: var(--hdr-toggle-x-m, var(--hdr-toggle-x, 0px));
    --hdr-toggle-y-active: var(--hdr-toggle-y-m, var(--hdr-toggle-y, 0px));
    --hdr-toggle-size-active: var(--hdr-toggle-size-m, var(--hdr-toggle-size, 44px));
    --hdr-toggle-bg-active: var(--hdr-toggle-bg-m, var(--hdr-toggle-bg, rgba(20, 20, 22, 0.35)));
    --hdr-toggle-border-active: var(
      --hdr-toggle-border-m,
      var(--hdr-toggle-border, rgba(255, 255, 255, 0.25))
    );
    --hdr-toggle-icon-active: var(
      --hdr-toggle-icon-m,
      var(--hdr-toggle-icon, var(--hdr-fg-active))
    );
    --hdr-logo-color-active: var(
      --hdr-logo-preview-color-m,
      var(
        --hdr-logo-preview-color,
        var(--hdr-logo-color-m, var(--hdr-logo-color, var(--hdr-logo-auto-color)))
      )
    );
    --hdr-logo-grad-from-active: var(
      --hdr-logo-preview-grad-from-m,
      var(
        --hdr-logo-preview-grad-from,
        var(--hdr-logo-grad-from-m, var(--hdr-logo-grad-from, var(--hdr-logo-auto-grad-from)))
      )
    );
    --hdr-logo-grad-to-active: var(
      --hdr-logo-preview-grad-to-m,
      var(
        --hdr-logo-preview-grad-to,
        var(--hdr-logo-grad-to-m, var(--hdr-logo-grad-to, var(--hdr-logo-auto-grad-to)))
      )
    );
    --hdr-logo-grad-visible-active: var(
      --hdr-logo-preview-grad-visible-m,
      var(
        --hdr-logo-preview-grad-visible,
        var(
          --hdr-logo-grad-visible-m,
          var(--hdr-logo-grad-visible, var(--hdr-logo-auto-grad-visible))
        )
      )
    );
  }

  .site-header .sh__bar {
    justify-content: space-between;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
  }

  .site-header .sh__desktop-nav {
    display: none !important;
  }

  .site-header .sh__nav {
    justify-content: center;
  }

  .site-header .sh__menu {
    width: min(280px, 100%);
    justify-items: start;
    text-align: left;
  }

  .site-header .sh__menu a {
    width: 100%;
    justify-content: flex-start;
  }

  .site-header .sh__menu a::before {
    display: none !important;
    content: none !important;
  }

  .site-header .sh__brand .site-title,
  .site-header .sh__brand .site-description {
    display: none !important;
  }
}

/* Menü konumu: Header vs Footer (sadece WEB) */
@media (min-width: 901px) {
  /* Kullanıcı Footer menü seçmişse: header komple gizli */
  body.tals-menu-footer .site-header {
    display: none !important;
  }

  /* Kullanıcı Header menü seçmişse: header görünür */
  body.tals-menu-header .site-header {
    display: block;
  }

  /* Header + Footer birlikteyken de header açık kalsın */
  body.tals-menu-both .site-header {
    display: block;
  }
}

/* Header'da hiçbir yerde sh__title gösterme (desktop + mobil) */
.site-header .sh__title {
  display: none !important;
}

/* Scroll kilidi (JS nav-open/no-scroll ekliyor) */
html.no-scroll,
html.no-scroll body,
body.nav-open {
  overflow: hidden !important;
}

/* Otomatik logo kontrastı (zemin parlaklığına göre) */
.site-header.is-on-light {
  --hdr-logo-auto-color: #111111;
  --hdr-logo-auto-grad-from: #111111;
  --hdr-logo-auto-grad-to: #333333;
  --hdr-logo-auto-grad-visible: 0;
}

.site-header.is-on-dark {
  --hdr-logo-auto-color: #ffffff;
  --hdr-logo-auto-grad-from: #ffffff;
  --hdr-logo-auto-grad-to: #dddddd;
  --hdr-logo-auto-grad-visible: 0;
}