/* ===== Mobil menü - 1. parça, 3. sürüm (17 Eyl 2026) =====
   Eklentinin yapısı:
     .ue_menu        -> ekranı kaplayan, tıklamaları yakalayan ARKA KATMAN
     .ue_inner_menu  -> asıl turkuaz PANEL, scale(0) -> scale(1) ile açılıyor
   ÖLÇÜLEN SORUNLAR ve çözümleri aşağıda madde madde.
   Kapatmak için: wp option update okan_mobil_menu 0 */

@media (max-width:1199px){

  /* (a) KAPANIŞ ANİMASYONU
     Katmanı yalnızca .menu-opened varken görünür yapmıştım; sınıf kalkınca panel bir anda
     yok oluyor, küçülme animasyonu oynayamıyordu. Katmanı HER ZAMAN görünür yapıyoruz.
     Kapalıyken zararsız: arka planı yok ve eklenti pointer-events:none veriyor,
     içindeki panel de scale(0) olduğu için hiçbir şey görünmüyor. */
  .ue_menu{visibility:visible!important; background:transparent}

  /* (b) PANEL: sağa yaslı sayfa. transform'a dokunmuyoruz (kapalı durum scale(0) ile sağlanıyor),
         yalnızca büyüme noktasını sağa alıyoruz. */
  .ue_menu > .ue_inner_menu{
    margin-left:auto!important;
    width:88%!important; max-width:400px!important;
    transform-origin:right center!important;
    border-radius:20px 0 0 20px;
    box-shadow:-20px 0 44px rgba(0,0,0,.28);
    overflow-x:hidden;
  }

  /* (c) TAŞMA: Eklenti içerik kutularını TAM EKRAN genişliğine göre kuruyor (90vw).
         Panel 330px olunca içerik 375px kalıyordu -> ölçülen 45px taşma; sağ taraf kesiliyor,
         ok düğmesi panelin tamamen dışında (351->403) kalıyordu. Hepsini panele sığdırıyoruz. */
  .ue_menu > .ue_inner_menu .ue_inner_menu-box,
  .ue_menu > .ue_inner_menu .ue_inner_menu-box > div,
  .ue_menu ul.uc-list-menu,
  .ue_menu ul.uc-list-menu > li,
  .ue_menu ul.uc-list-menu ul.sub-menu{
    width:100%!important; max-width:100%!important; box-sizing:border-box;
  }

  /* (d) SATIRLAR */
  .ue_menu ul.uc-list-menu{padding:8px 0 24px}
  .ue_menu ul.uc-list-menu > li{border-bottom:1px solid rgba(255,255,255,.16)}
  .okan-mm-satir{display:flex; align-items:center; width:100%}
  .ue_menu ul.uc-list-menu > li > a,
  .ue_menu .okan-mm-satir > a{
    flex:1 1 auto; min-width:0; min-height:52px; display:flex; align-items:center;
    padding:0 8px 0 20px; text-decoration:none;
  }

  /* (e) ALT MENÜLER: varsayılan kapalı (eklenti kimlik seçiciyle display:block bastığı için
         öncelik yükseltmek zorunlu), açılınca panele sığan girinti */
  .ue_menu ul.uc-list-menu > li > ul.sub-menu{display:none!important}
  .ue_menu ul.uc-list-menu > li.okan-acik > ul.sub-menu{
    display:block!important; background:rgba(0,0,0,.12);
  }
  .ue_menu ul.uc-list-menu > li > ul.sub-menu > li{border-bottom:0}
  .ue_menu ul.uc-list-menu > li > ul.sub-menu > li > a{
    min-height:44px; display:flex; align-items:center;
    padding:8px 16px 8px 34px!important; font-size:14px; line-height:1.3; opacity:.92;
    white-space:normal;
  }

  /* (f) OK DÜĞMESİ: panelin içinde kalsın */
  .ue_menu .ue_inner_menu_expand_icon,
  .ue_menu .ue_inner_menu_collapse_icon,
  .ue_menu .uc-menu-item-pointer{display:none!important}
  .okan-mm-ok{
    flex:0 0 auto; width:44px; min-height:52px; display:flex;
    align-items:center; justify-content:center;
    background:none; border:0; padding:0; margin-right:6px; color:inherit;
    font-size:22px; line-height:1; cursor:pointer;
    transition:transform .2s ease;
  }
  .ue_menu li.okan-acik > .okan-mm-satir .okan-mm-ok{transform:rotate(90deg)}
  .okan-mm-ok:focus-visible{outline:3px solid #f4d35e; outline-offset:-3px}

  /* (g) "Randevu Al" düğmesi */
  .ue_menu ul.uc-list-menu > li.okan-mm-cta{border-bottom:0; padding:18px 20px 6px}
  .ue_menu ul.uc-list-menu > li.okan-mm-cta > a{
    background:#f4d35e; color:#1c1b18!important; font-weight:700;
    border-radius:999px; justify-content:center; min-height:52px; padding:0 22px;
  }

  /* (h) DİL: Polylang açılır liste veriyor - üstte AKTİF dil (tıklanamaz #pll_switcher),
     altında diğer dil. Hangisinin aktif olduğu belli olmuyordu ve alt menü gibi duruyordu.
     Onun yerine JS ile iki dili yan yana koyan bir AÇ/KAPA düğmesi kuruyoruz:
     aktif olan dolu, diğeri tek dokunuşla açılır. Eski iki satır gizleniyor. */
  .ue_menu ul.uc-list-menu > li.okan-mm-dil{border-bottom:0}
  .ue_menu ul.uc-list-menu > li.okan-mm-dil > a,
  .ue_menu ul.uc-list-menu > li.okan-mm-dil > .okan-mm-satir,
  .ue_menu ul.uc-list-menu > li.okan-mm-dil > ul.sub-menu{display:none!important}

  .okan-dil-toggle{
    display:flex; gap:4px; padding:4px;
    margin:20px auto 0; width:calc(100% - 44px); max-width:264px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.5);
    border-radius:999px;
  }
  /* !important SART: aktif parca <span>, pasif olan <a>. Tema kimlik secicili kuralla
     span'a display:block dayatiyordu -> flex ortalama calismiyor, yazi hapin ustune cikiyordu.
     Ayrica <a> tema yuzunden 17px, <span> 13px aliyordu -> iki yarim farkli boyuttaydi. */
  .okan-dil-toggle > *{
    flex:1 1 0; min-width:0;
    display:flex!important; align-items:center!important; justify-content:center!important;
    min-height:40px; height:40px; padding:0 10px; border-radius:999px;
    font-size:13px!important; line-height:1!important; font-weight:700; letter-spacing:.03em;
    /* Aktif dil ham metinden geliyordu (Türkçe), digeri tema tarafindan buyuk harfe
       ceviriliyordu (ENGLISH) -> ayni dugmenin iki yarisi farkli goruniyordu. Esitlendi. */
    text-transform:uppercase;
    text-decoration:none; color:#fff; white-space:nowrap;
    transition:background-color .18s ease, color .18s ease;
  }
  /* Aktif dil dolu beyaz: koyu turkuaz yazı ile okunaklı (7:1 üzeri) */
  .okan-dil-toggle > .okan-dil-aktif{background:#fff; color:#0b6f66;}
  .okan-dil-toggle > a:focus-visible{outline:3px solid #f4d35e; outline-offset:2px}
}

/* ===== ÜST ŞERİT (menü kapalıyken) =====
   Ölçülen yerleşim (375px): şerit 375x95; logo 15->100 (85px); hamburger 311->371.
   Logo ile hamburger arasında 211px boşluk var -> etiketli iki düğme sığıyor. */
@media (max-width:1199px){
  /* Üstteki ikinci dil menüsü ve ondan kalan süs ok işareti kalksın
     (ölçüldü: <i class="pxli pxli-chevron-right"> 214->229, dil bağlantısından arta kalmıştı) */
  .pxl-header-mobile .elementor-widget-pxl_menu{display:none!important}
  .pxl-header-mobile .pxli-chevron-right{display:none!important}

  .pxl-header-mobile .elementor-widget-image img{max-width:150px!important; height:auto!important}
  .pxl-header-mobile{position:relative}

  /* Logo ile hamburger ARASINA ortalanır (şeridin ortasına değil; logo solda olduğu için
     şerit ortası görsel olarak ortalı durmaz). */
  .okan-ust-eylemler{
    position:absolute; left:108px; right:70px; top:50%; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center; gap:8px;
    /* Dokunuşlar düğmelere ulaşmıyordu. Sebep (ölçüldü): başlıktaki
       SECTION.elementor-top-section z-index:99 ile kendi katmanını kuruyor ve logo kutusu
       (15->281, yani 266px - logo aslında 85px) düğmelerin üstünü şeffaf olarak kaplıyor.
       Kutuyu o katmanın da üstüne çıkarıyoruz. */
    z-index:120;
  }
  .okan-ust-dugme{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    height:40px; padding:0 14px; border-radius:999px; border:0;
    text-decoration:none; white-space:nowrap;
    font-size:12px; font-weight:700; letter-spacing:.02em;
    /* Marka tonu (#00ad9f) + beyaz yazi. Musteri karari: marka gorunumu oncelikli.
       (Olcum: beyaz bu ton uzerinde 2.81:1; footer icin de ayni tercih yapildi.) */
    background:var(--okan-teal,#00ad9f); color:#fff!important;
  }
  .okan-ust-dugme.randevu{background:#f4d35e; color:#1c1b18!important}
  .okan-ust-dugme svg{width:17px; height:17px; fill:currentColor; flex:0 0 auto}
  .okan-ust-dugme:focus-visible{outline:3px solid #f4d35e; outline-offset:2px}

  /* Hamburger: turkuaz kalıyor ama buzlu cam görünümü.
     Not: eski hali düz #00ad9f idi; beyaz çubukların kontrastı 2.7:1 (arayüz öğesi için
     gereken 3:1'in altında). Koyu turkuazı baskın yapıyoruz -> beyaz çubuk ~4.9:1. */
  .pxl-header-mobile .ue_hamburger{
    /* Yarı saydam turkuaz, beyaz başlık üzerine binince açık bir tona düşüyordu ve
       beyaz çubuklar soluk kalıyordu (ölçüldü: çubuklar beyaz, ama zemin ~3.4:1).
       Zemini DOLU koyu turkuaz yapıyoruz -> beyaz çubuk ~5.1:1. Camsı his,
       kenar + iç parlama + gölge + blur ile korunuyor. */
    /* Marka tonu. */
    background:linear-gradient(155deg,#00b3a4,#00a396)!important;
    -webkit-backdrop-filter:blur(10px) saturate(140%);
    backdrop-filter:blur(10px) saturate(140%);
    border:1px solid rgba(255,255,255,.42)!important;
    border-radius:16px!important;
    box-shadow:0 8px 20px rgba(0,110,100,.22), inset 0 1px 0 rgba(255,255,255,.38);
  }

  /* Menü AÇIKKEN üstteki İletişim/Randevu düğmeleri panelin üstünde kalıyordu
     (ölçüldü: panelin katman değeri "auto", düğmelerinki 120 -> düğmeler üstte).
     Menü açıkken onları gizliyoruz; sınıfı JS ekliyor. */
  .pxl-header-mobile.okan-menu-acik .okan-ust-eylemler{
    opacity:0; pointer-events:none; visibility:hidden;
  }

  /* Hamburger cizgileri beyaz (eklentinin varsayilani). Musteri karari. */
  .pxl-header-mobile .ue_hamburger > div,
  .pxl-header-mobile .ue_hamburger > div::before,
  .pxl-header-mobile .ue_hamburger > div::after{background-color:#fff!important}
}