/* ==========================================================================
   Header — partial: _Header
   States: default (solid) · --overlay (over cinematic hero) · .is-scrolled
           · .is-hidden (scrolling down) · .is-menu-open (mobile)
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--ink);
  transition:
    transform var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  transition: opacity var(--t-base) var(--ease);
}

.site-header--overlay {
  color: var(--on-noir);
}

/* The bar has to hold over whatever frame the hero film is on, so it carries
   its own scrim instead of leaning on the hero gradient. It goes once the
   solid header takes over. */
.site-header--overlay::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -2;
  height: calc(var(--header-h) + 34px);
  background: linear-gradient(180deg, rgba(12, 12, 11, 0.74) 0%, rgba(12, 12, 11, 0.46) 52%, rgba(12, 12, 11, 0) 100%);
  transition: opacity var(--t-base) var(--ease);
}

.site-header--overlay.is-scrolled::after,
.site-header.is-menu-open::after {
  opacity: 0;
}

.site-header--overlay::before {
  opacity: 0;
}

.site-header--overlay.is-scrolled {
  color: var(--ink);
}

.site-header--overlay.is-scrolled::before {
  opacity: 1;
}

.site-header.is-hidden {
  transform: none;
}

.site-header__inner {
  position: relative;
  z-index: 45;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
}

/* Wordmark */

.brand {
  display: inline-flex;
  flex-direction: column;
  justify-self: start;
  gap: 3px;
  line-height: 1;
}

.brand__mark {
  font-size: 0.9375rem;
  font-weight: 600;
  font-variation-settings: "wdth" 125;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand__sub {
  font-family: var(--font-figure);
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Primary navigation */

.nav {
  position: relative;
  display: flex;
  gap: clamp(20px, 2.4vw, 40px);
}

.nav__link {
  position: relative;
  padding-block: 8px;
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.015em;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* One shared underline travels between items instead of each link
   drawing its own — the eye follows a single line. */
.js .nav__link::after {
  display: none;
}

.nav__indicator {
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 1px;
  width: var(--w, 0);
  background: currentColor;
  opacity: var(--o, 0);
  transform: translateX(var(--x, 0));
  transition:
    transform 620ms var(--ease),
    width 620ms var(--ease),
    opacity 300ms var(--ease);
}

.nav__indicator.no-anim {
  transition: none;
}

.nav__link {
  transition: opacity var(--t-base) var(--ease);
}

.nav:hover .nav__link:not(:hover) {
  opacity: 0.55;
}

.header-actions__link {
  position: relative;
  transition: opacity var(--t-base) var(--ease);
}

.header-actions__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--ease);
}

.header-actions__link:hover::after,
.header-actions__link.is-current::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__link--live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav__link--live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
}

/* Dropdown Menu (Profil) ------------------------------------------------ */

.nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav__link--dropdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.nav__caret {
  flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease);
}

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 215px;
  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(12, 12, 11, 0.12), 0 2px 6px rgba(12, 12, 11, 0.04);
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    visibility var(--t-fast);
  z-index: 100;
  overflow: hidden;
}

/* Invisible bridge so mouse hover doesn't break between trigger and dropdown */
.nav__dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown,
.nav__item--dropdown.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav__item--dropdown:hover .nav__caret,
.nav__item--dropdown:focus-within .nav__caret,
.nav__item--dropdown.is-open .nav__caret {
  transform: rotate(180deg);
}

.nav__item--dropdown:hover .nav__link,
.nav__item--dropdown:focus-within .nav__link,
.nav__item--dropdown.is-open .nav__link {
  opacity: 1 !important;
}

.nav__dropdown-item {
  display: block;
  padding: 13px 20px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  text-decoration: none;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.nav__dropdown-item:last-child {
  border-bottom: none;
}

.nav__dropdown-item:hover,
.nav__dropdown-item:focus {
  background-color: var(--bone);
  color: var(--ink) !important;
}

.nav__dropdown-item--logout:hover,
.nav__dropdown-item--logout:focus {
  color: var(--error) !important;
  background-color: #faede8;
}

/* Mobile menu profile */
.mobile-menu__profile {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-noir);
}

.mobile-menu__profile-heading {
  display: block;
  color: var(--on-noir-3);
  margin-bottom: 8px;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mobile-menu__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 10px;
  border-bottom: 1px solid var(--line-noir);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--on-noir);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}

.mobile-menu__sublink:hover {
  color: #ffffff;
  padding-left: 6px;
}

/* Actions */

.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: clamp(16px, 1.8vw, 28px);
}

.header-actions__link {
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.015em;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -10px;
}

.header-cta {
  --btn-bg: currentColor;
  --cta-fill: var(--ink);
  min-height: 40px;
  padding: 0 18px;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.015em;
}

.header-cta::before {
  background: var(--cta-fill);
}

.site-header--overlay:not(.is-scrolled) .header-cta,
.site-header.is-menu-open .header-cta {
  --cta-fill: var(--on-noir);
}

.site-header--overlay:not(.is-scrolled) .header-cta:hover {
  color: var(--ink-fixed);
}

.site-header--overlay.is-scrolled .header-cta:hover,
.site-header:not(.site-header--overlay) .header-cta:hover {
  color: var(--bone);
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 12px;
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.menu-toggle__bars {
  position: relative;
  width: 22px;
  height: 8px;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease), top var(--t-base) var(--ease);
}

.menu-toggle__bars::before {
  top: 0;
}

.menu-toggle__bars::after {
  top: 7px;
}

.is-menu-open .menu-toggle__bars::before {
  top: 4px;
  transform: rotate(45deg);
}

.is-menu-open .menu-toggle__bars::after {
  top: 4px;
  transform: rotate(-45deg);
}

/* Mobile menu — full-screen, typographic ----------------------------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 24px) var(--gutter) max(28px, env(safe-area-inset-bottom));
  background: var(--noir);
  color: var(--on-noir);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 700ms var(--ease-io),
    visibility 0s linear 700ms;
}

.is-menu-open .mobile-menu {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 700ms var(--ease-io);
}

.is-menu-open.site-header {
  color: var(--on-noir);
}

.is-menu-open.site-header::before {
  opacity: 0;
}

.mobile-menu__status {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-noir);
  color: var(--on-noir-2);
}

/* Açık artırma adı uzunsa tek satırda kısalır */
.mobile-menu__status-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-menu__status > a {
  flex-shrink: 0;
}

.mobile-menu__nav {
  display: grid;
  margin-top: 12px;
}

.mobile-menu__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 14px;
  border-bottom: 1px solid var(--line-noir);
  font-size: clamp(1.875rem, 8vw, 2.5rem);
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.025em;
  line-height: 1.1;
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 500ms var(--ease), transform 800ms var(--ease);
}

.mobile-menu__link span {
  color: var(--on-noir-3);
}

.is-menu-open .mobile-menu__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(200ms + var(--i, 0) * 60ms);
}

.mobile-menu__foot {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 32px;
}

.mobile-menu__foot .btn {
  width: 100%;
}

.mobile-menu__contact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  color: var(--on-noir-2);
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Six items in the bar: between the phone menu and full width the nav
   needs a tighter rhythm so it never crowds the logo. */
@media (max-width: 1280px) {
  .nav {
    gap: clamp(16px, 1.8vw, 28px);
  }
}

@media (max-width: 1160px) {
  .nav,
  .header-actions__link,
  .header-cta {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .site-header__inner {
    grid-template-columns: 1fr auto;
  }
}

@media (min-width: 1081px) {
  .mobile-menu {
    display: none;
  }
}

@media (max-width: 480px) {
  .header-actions .icon-btn {
    display: none;
  }
}

/* Logo slot ------------------------------------------------------------ */
/* Live as soon as data.js > brand.logo points at real artwork. Supply a
   second, light file for the overlay header; until then the typographic
   wordmark (.brand__mark) carries the identity on its own. */

.header-cta:focus-visible,
.header-actions__link:focus-visible,
.icon-btn:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.brand {
  transition: opacity var(--t-base) var(--ease);
}

.brand:hover {
  opacity: 0.68;
}

.brand__logo {
  display: block;
  height: var(--logo-h, 20px);
}

@media (max-width: 760px) {
  .brand__logo {
    height: calc(var(--logo-h, 20px) * 0.82);
  }
}

.brand__logo img {
  display: block;
  width: auto;
  height: 100%;
}

/* The light file only exists on headers that sit over the hero; where it is
   absent the default logo stays put on both surfaces. */
.brand__logo img.brand__logo-alt {
  display: none;
}

/* Logo yazısı (0107, lib/fonts/fonts.css): boyut burada; koyu zeminde (videonun üstü, açık mobil menü) koyu zemin rengi. */
.site-header .site-logo-lockup {
  --site-logo-text-h: 36px;
}

@media (max-width: 760px) {
  .site-header .site-logo-lockup {
    --site-logo-text-h: 30px;
  }
}

.site-header--overlay:not(.is-scrolled) .site-logo-text,
.site-header.is-menu-open .site-logo-text {
  color: var(--site-logo-text-color-dark, #ffffff);
}

/* Dark surfaces: over the hero, and behind the open mobile menu. */
.site-header--overlay:not(.is-scrolled) .brand__logo:has(.brand__logo-alt) img,
.site-header.is-menu-open .brand__logo:has(.brand__logo-alt) img {
  display: none;
}

.site-header--overlay:not(.is-scrolled) .brand__logo img.brand__logo-alt,
.site-header.is-menu-open .brand__logo img.brand__logo-alt {
  display: block;
}

/* AdminUI › Site Kimliği › Mobil logo / Mobil menü logosu (_Layout yalnız girilmişse yazar).
   Mobil logo: dar ekranda açık zeminde ana logonun yerine (koyu zeminde yukarıdaki kurallarla koyu zemin logosu kalır).
   Mobil menü logosu: menü açıkken (koyu zemin) öbür logoların ve logo yazısının yerine; yatay biçimdeki yazı okunsun diye daha yüksek (mobilde 11px + 42px + 11px = 64px çubuk). */
.brand__logo img.brand__logo-mobile,
.brand__logo img.brand__logo-drawer {
  display: none;
}

@media (max-width: 760px) {
  .brand__logo:has(.brand__logo-mobile) img.brand__logo-main {
    display: none;
  }

  .brand__logo:has(.brand__logo-mobile) img.brand__logo-mobile {
    display: block;
  }
}

.site-header.is-menu-open .brand__logo:has(.brand__logo-drawer) {
  height: 42px;
}

.site-header.is-menu-open .brand__logo:has(.brand__logo-drawer) img {
  display: none;
}

.site-header.is-menu-open .brand__logo:has(.brand__logo-drawer) img.brand__logo-drawer {
  display: block;
}

.site-header.is-menu-open .site-logo-lockup:has(.brand__logo-drawer) .site-logo-text {
  display: none;
}