/* Kilya Clinic header logosu

   Sorun: tema logo baglantisina sayfa bazinda farkli yukseklik
   veriyordu (anasayfa 80px, ic sayfalar 100px) ve logo olarak
   1600x1131'lik neredeyse kare bir JPEG kullaniliyordu. Sonuc:
   ic sayfalarda logo menunun ilk ogesinin uzerine biniyordu.

   Cozum: baglanti yuksekligi header yuksekligine sabitlendi,
   gorselin kendisi en-boy orani korunarak sinirlandi. Menu ortali
   yerlestigi icin logoya kalan yatay alan dar - genislik ustten
   sinirlaniyor ki hicbir sayfada menuye deymesin. */

#qodef-page-header .qodef-header-logo-link {
  height: var(--qode-header-height, 80px) !important;
  display: flex !important;
  align-items: center;
}

/* Bazi sayfalarda tema logoyu .qodef-header-logo icinde mutlak
   konumlandiriyor; logo akistan cikinca ortalanmis menu onu
   gormuyor ve uzerine biniyor. Menuyu logonun sagina kaydiriyoruz -
   menu kendi alani icinde ortali kalmaya devam ediyor.

   Menu sabit ~1128px genislikte (oge araligi 22px, font 18px) ve
   masaustu header 1201px'ten itibaren calisiyor. Dar masaustunde
   logo + menu ayni anda sigmiyor; oradan asagi menu araligi ve
   punto kademeli daraltilarak logoya yer aciliyor. */

/* --- genis ekran: logo en buyuk, menu dokunulmadan --- */
@media (min-width: 1600px) {
  #qodef-page-header .qodef-header-logo-image {
    max-height: 48px;
    max-width: 233px;
  }

  #qodef-page-header .qodef-header-wrapper {
    padding-left: 265px;
  }
}

/* --- orta masaustu: menu araligi hafif daraliyor --- */
@media (min-width: 1400px) and (max-width: 1599px) {
  #qodef-page-header .qodef-header-logo-image {
    max-height: 40px;
    max-width: 194px;
  }

  #qodef-page-header .qodef-header-wrapper {
    padding-left: 225px;
  }

  #qodef-page-header nav > ul > li {
    margin-right: 16px !important;
  }
}

/* --- dar masaustu: menu hem araligi hem puntosu daraliyor.
       Onceki surumde menu bu genislikte ekrandan tasiyordu. --- */
@media (max-width: 1399px) {
  #qodef-page-header .qodef-header-logo-image {
    max-height: 34px;
    max-width: 165px;
  }

  #qodef-page-header .qodef-header-wrapper {
    padding-left: 190px;
  }

  #qodef-page-header nav > ul > li {
    margin-right: 10px !important;
  }

  #qodef-page-header nav > ul > li > a {
    font-size: 16px !important;
  }
}

@media (max-width: 1280px) {
  #qodef-page-header .qodef-header-logo-image {
    max-height: 31px;
    max-width: 150px;
  }

  #qodef-page-header .qodef-header-wrapper {
    padding-left: 175px;
  }
}

/* Tema, header "acik tema"dayken beyaz logoyu secer - cunku normalde
   koyu bir zeminin uzerindedir. Acik hero'lu sayfada zemin acik
   oldugu icin beyaz logo kayboluyor; renkli varyanta geciriliyor. */
.kc-page--light-hero #qodef-page-header .qodef-header-logo-image.qodef--light {
  opacity: 0 !important;
}

.kc-page--light-hero #qodef-page-header .qodef-header-logo-image.qodef--main {
  opacity: 1 !important;
}

/* Bazi sayfalarda seffaf header acik tonlu bir fotografin uzerine
   biniyor; beyaz logo 2.31:1, menunun sol yarisi da okunmuyor.
   Klonda bastan beri boyleydi. Ustten asagi inen koyu bir tul hem
   logoyu hem menuyu garantiye aliyor - logoyu renkli varyanta
   cevirmek yetmezdi, cunku acik mavi "Clinic" o zeminde 1.34:1. */
.kc-header-scrim #qodef-page-header {
  position: relative;
}

/* Once yumusak bir gradyan denendi ama fotograf cok acik oldugu icin
   en kotu nokta 2.54:1'de kaldi (AA 4.5). Duz lacivert zemine
   gecildi - hakkimizda sayfasinin header'i zaten boyle goruniyor,
   yani sonuc siteyle tutarli. */
.kc-header-scrim #qodef-page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(22, 72, 159, 0.94);
  pointer-events: none;
}

.kc-header-scrim #qodef-page-header-inner {
  position: relative;
  z-index: 1;
}

/* Mobil header'da menu ortada olmadigi icin logo daha genis olabilir. */
#qodef-page-mobile-header .qodef-mobile-header-logo-link {
  display: flex;
  align-items: center;
}

#qodef-page-mobile-header .qodef-header-logo-image,
#qodef-page-mobile-header .qodef-mobile-header-logo-image {
  width: auto !important;
  height: auto !important;
  max-height: 30px;
  max-width: 172px;
  object-fit: contain;
}