/*HEADER13-BAS*/
/* 13.11 B: header kutusu sağa kayar; logo kutunun DIŞINDA solda, doğrudan zeminin üzerinde durur.
   Koyu zeminde (hero, footer) beyaz; açık zeminde lacivert + gri unvan (html.mz-acik, betik aşağıda). */
:root { --mz-w: 13.5rem; --mz-bosluk: 1.75rem; }
.ust { left: calc(2.5rem + var(--mz-w) + var(--mz-bosluk)); max-width: calc(84rem - var(--mz-w) - var(--mz-bosluk)); padding-left: 1.5rem; }
/* 13.11 (8. tur, Enes): kutu içeriği kadar geniş (solda boşluk kalmaz); menü sola yaslı, ikonlarla arasında küçük boşluk.
   Sosyal ikonlar bir tık aralı (40px); üzerine gelince yuvarlak zemin YOK — ikonun kendisi belirginleşir. */
@media (min-width: 901px) {
  .ust { width: fit-content; padding-left: 1.4rem; }
  .ust .nav { flex: 0 1 auto; justify-content: flex-start; }
  .ust-sosyal { gap: 0; margin-left: 1.6rem; }
  .ust .ust-ikon { min-width: 2.5rem; transition: opacity 200ms, color 200ms, transform 200ms; }
  .ust .ust-ikon:hover, .ust .ust-ikon:focus-visible { background: none; opacity: 1; color: var(--aksan, #0f2f63); transform: scale(1.18); }
}
.marka.marka-zemin { position: absolute; right: 100%; top: 50%; translate: 0 calc(-50% + .45rem);  /* 13.11 (2. tur): bir tık aşağı */ margin: 0 var(--mz-bosluk) 0 0; padding: 0;
  width: var(--mz-w); min-height: 0; filter: drop-shadow(0 2px 14px rgb(0 0 0 / .45)); transition: filter 300ms; }
.marka-zemin svg { display: block; width: 100%; height: auto; overflow: visible; }
.marka-zemin .mz-el, .marka-zemin .mz-alt { fill: #fff; transition: fill 300ms; }
html.mz-acik .marka.marka-zemin { filter: none; }
html.mz-acik .marka-zemin .mz-el { fill: var(--lacivert, #0f2f63); }
html.mz-acik .marka-zemin .mz-alt { fill: #58595b; }
html.mz-unvansiz .marka-zemin .mz-alt { display: none; }
html.mz-unvansiz .marka-zemin svg { aspect-ratio: 1093.59 / 330; }
@media (max-width: 900px) {
  /* 13.11 (3. tur, Enes): telefonda ARKA PLANLI bar (asıl sitedeki beyaz tam genişlik bar) + LACİVERT logo
     (turkuaz #00b5cc KULLANILMIYOR — Enes 13.11) — zemine göre renk değişimi yalnız masaüstünde. */
  :root { --mz-w: 10.5rem; }
  html:not(.v-header-oval) .ust, .ust { left: 0; right: 0; max-width: none; padding: 0 1.1rem; justify-content: space-between; }
  .marka.marka-zemin, html.mz-acik .marka.marka-zemin { position: static; translate: none; margin: 0; filter: none; }
  .marka-zemin .mz-el, html.mz-acik .marka-zemin .mz-el { fill: var(--lacivert, #0f2f63); }
  .marka-zemin .mz-alt, html.mz-acik .marka-zemin .mz-alt { fill: #58595b; }
}
/* 13.11 (5. tur, Enes): header'ın arkasında kalan içerik hep bulanık — yumuşak, aşağı doğru eriyerek biten bulanıklık.
   Üst üste 4 katman (1 → 3 → 7 → 14px); her biri maskeyle aşağıya doğru söner, böylece sert bir sınır oluşmaz. */
.ust-sis { position: fixed; inset: 0 0 auto 0; height: 10.5rem; z-index: 58; pointer-events: none; }
.ust-sis i { position: absolute; inset: 0; }
.ust-sis i:nth-child(1) { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
  -webkit-mask-image: linear-gradient(#000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(#000 0%, #000 62%, transparent 100%); }
.ust-sis i:nth-child(2) { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(#000 0%, #000 44%, transparent 84%); mask-image: linear-gradient(#000 0%, #000 44%, transparent 84%); }
.ust-sis i:nth-child(3) { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(#000 0%, #000 28%, transparent 68%); mask-image: linear-gradient(#000 0%, #000 28%, transparent 68%); }
.ust-sis i:nth-child(4) { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(#000 0%, #000 12%, transparent 52%); mask-image: linear-gradient(#000 0%, #000 12%, transparent 52%); }
@media (max-width: 900px) { .ust-sis { display: none; } }  /* telefonda bar zaten dolu zeminli */
/*HEADER13-SON*/