/* ============================================================================
   MarbleMap — yerleşim düzeltmeleri (main.css'ten SONRA yüklenir)
   ----------------------------------------------------------------------------
   main.css'e DOKUNULMAZ (613 KB şablon dosyası; upstream güncellemesinde çakışır).
   Tema zaten bu deseni kullanıyor: blog.css / pricing.css / cookie-consent.css /
   service-cards.css hepsi main.css'ten sonra yüklenen düzeltme dosyaları.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) HERO BAŞLIĞI MERMER GÖRSELİN ALTINDA KALIYOR  (992–1440px)

   Demet 2026-08-24: "anasayfada yazı görselin üzerine denk gelmiş okunmuyor".

   ÖLÇÜM (canlı marblemap.co, Playwright; maske poligonu üzerinden geometrik —
   piksel diff'i GSAP title-anim + ScrollSmoother yüzünden güvenilir değil):

     viewport | diyagonale kadar yer | başlığın gerçek sağ kenarı | durum
       1920   |  680px |  942px | ok
       1600   |  703px |  782px | ok
       1500   |  653px |  732px | ok
       1440   |  623px |  702px | 7px taşıyor
       1400   |  603px |  682px | 27px taşıyor
       1366   |  543px |  725px | 27px taşıyor
       1300   |  510px |  692px | 60px taşıyor
       1280   |  500px |  682px | 70px taşıyor
       1200   |  460px |  642px | 110px taşıyor
       1100   |  188px |  482px | 172px taşıyor
       1024   |  150px |  444px | 210px taşıyor
        992   |  134px |  428px | 226px taşıyor

   Sadece başlık değil: 1100px'te üst etiket (.sub-title) ve açıklama (.desc) da
   görselin altında kalıyor.

   KÖK NEDEN: Başlık .col-lg-8 içinde ve o kolon görselin başladığı yerin içine
   taşıyor. .h11-banner-img { height:100%; aspect-ratio:928/893 } olduğu için
   metin sardıkça banner uzuyor, banner uzadıkça görsel GENİŞLİYOR ve diyagonal
   metnin üstüne daha çok yürüyor — kısır döngü. Bugün "çalışan" genişlikler
   tasarım değil, metnin tesadüfen erken sarması.

   NEDEN SADECE FONT KÜÇÜLTMEK YETMEZ: 1100px'te başlığa kalan yer 188px,
   992px'te 134px. Oraya hiçbir puntoda başlık sığmaz. Ayrıca fontu küçültmek
   satır sayısını azaltıp banner'ı kısaltır, bu da görseli daraltır — denge
   kırılgan. Denendi ve ölçüldü: çakışmayı AZALTMADI, artırdı.

   ELENEN ALTERNATİF: görseli daraltmak (width:47%). Çakışmayı çözüyordu ama
   maske mask-size:cover ile dar/uzun kutuya ölçeklenince 45°'lik diyagonal
   düzleşiyor ve tasarımın imzası kayboluyor.

   ÇÖZÜM: Görselin ORANI ve TAM YÜKSEKLİĞİ korunur (diyagonal aynen kalır),
   sadece sağa kaydırılır; taşan kısmı bölüm overflow'u kırpar. Doku olduğu
   için görsel kayıp yok.

   DOĞRULAMA (bu kuralla, canlı sayfaya enjekte edilerek ölçüldü):
     1440 / 1366 / 1280 / 1200 / 1100 / 992 → altısında da SIFIR çakışma
     (başlık, .desc ve .sub-title için ayrı ayrı), görsel oranı 1.039 (korundu),
     görsel yüksekliği bölüm yüksekliğine eşit.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1440px) {
  .h11-banner-section { overflow: hidden; }
  .h11-banner-img { inset-inline-end: -22%; }
  .h11-banner-section .banner-content-2 { max-width: 54%; }
}

/* ---------------------------------------------------------------------------
   2) HEADER: LOGO ÇOK KÜÇÜK ÇİZİLİYOR + MENÜ SIKIŞIYOR + <=1024'TE LOGO KAYBOLUYOR

   Demet 2026-08-24: "anasayfadaki logomuz biraz küçük kalmış daha belirgin yapar
   mısın" + "menüyü de düzelt".

   ÖLÇÜM (canlı marblemap.co ve yerel render, iki header için de aynı):
     viewport | logo <img> kutusu | logonun ÇİZİLEN hali | logo-menü boşluğu | menü
       1920   | 136x44 | 136x25 | 205px | tek satır
       1500   | 136x44 | 136x25 |  24px | tek satır
       1440   | 134x44 | 134x25 |   0px | İKİ SATIRA SARIYOR
       1280   | 136x44 | 136x25 |   3px | tek satır
       1200   | 124x44 | 124x23 |   0px | İKİ SATIRA SARIYOR
       1100   |  71x44 |  71x13 |   0px | İKİ SATIRA SARIYOR
       1024   |   0x44 |   0x0  |   0px | LOGO TAMAMEN KAYBOLUYOR
        992   |   0x44 |   0x0  |   0px | LOGO TAMAMEN KAYBOLUYOR

   KÖK NEDEN — üç kural üst üste biniyor:
     main.css   img { max-width:100%; height:auto }              (global)
     main.css   .site_logo .logo { max-width:136px; width:100% }
     _Layout    <img style="height:44px; width:auto">            (satır içi)
   Satır içi `height:44px` stylesheet'i yener ama `max-width`'i YENMEZ. Anchor
   136px'e kapalı olduğu için img de 136px'e kırpılır; SVG'nin doğal oranı
   816/151.016 = 5.4034:1 olduğundan 44px'lik kutuda 136x25 olarak "mektup
   kutusu" gibi çizilir — 19px dikey boşluk boşa gider ve logo tasarlanan
   boyutun ~%55'i kadar görünür. <=1024'te ise `width:100%` flex içinde
   sıkışınca kutu 0'a iner ve logo tamamen kaybolur.

   ÇÖZÜM — akışkan ölçek (Demet'in seçimi, 2026-08-24):
   Logonun yüksekliği tek kaynaktan (--mm-logo-h) clamp() ile viewport'a göre
   büyür, genişlik ORANDAN türetilir (kutu = çizim, letterbox yok). min-width
   ile sert taban konur, böylece bir daha asla kaybolamaz. Menü boşlukları ve
   sağ bloğun iç dolguları da akışkan daralarak yeri açar.

   Kapsam .h11-header.header-area ile sınırlı: offcanvas/hamburger panellerindeki
   34px logolar ve preloader logosu ETKİLENMEZ. İki header de (header-absolute
   ve header-duplicate.header-sticky) kapsanır.
   --------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .h11-header.header-area .header-wrapper {
    --mm-logo-h: clamp(28px, calc(28px + (100vw - 1280px) * 0.0375), 52px);
    --mm-logo-w: calc(var(--mm-logo-h) * 816 / 151.016);
    padding-inline: clamp(10px, calc(10px + (100vw - 1400px) * 0.01538), 18px);
  }

  .h11-header.header-area .site_logo {
    flex: 0 1 auto;
    width: var(--mm-logo-w);
    min-width: 140px;          /* SERT TABAN: min-content artik 0 degil */
    line-height: 0;
  }
  .h11-header.header-area .site_logo > .logo {
    display: block;
    width: 100%;
    max-width: none;                        /* main.css: max-width:136px */
    line-height: 0;
  }
  .h11-header.header-area .site_logo > .logo > img {
    display: block;
    width: 100% !important;                 /* satir ici: width:auto */
    height: var(--mm-logo-h) !important;    /* satir ici: height:44px */
    max-width: none !important;             /* main.css: img{max-width:100%} */
    object-fit: contain;
    object-position: left center;
  }

  .h11-header.header-area .menu-area { min-width: 0; }
  .h11-header.header-area .mainmenu > ul {
    flex-wrap: nowrap;
    column-gap: clamp(11px, calc(11px + (100vw - 1280px) * 0.02969), 30px);
  }
  .h11-header.header-area .mainmenu > ul > li.has-dropdown > a {
    padding-inline-end: 15px;               /* main.css 20px; ok 12px */
  }

  .h11-header.header-area .header-right-item {
    flex: 0 0 auto;
    gap: clamp(10px, calc(10px + (100vw - 1280px) * 0.01563), 20px);
  }
  .h11-header.header-area .header-right-item .mm-lang-switch,
  .h11-header.header-area .header-right-item .mm-login {
    margin-right: 0 !important;
  }
  .h11-header.header-area .header-right-item .mm-lang-switch > a,
  .h11-header.header-area .header-right-item .mm-login > a {
    padding: 5px clamp(9px, calc(9px + (100vw - 1280px) * 0.00469), 12px) !important;
  }
  .h11-header.header-area .header-right-item .tj-primary-btn {
    padding: clamp(11px, calc(11px + (100vw - 1280px) * 0.00469), 14px)
             clamp(14px, calc(14px + (100vw - 1280px) * 0.00938), 20px) !important;
  }
}

/* >=1280'de yer butcesi pozitif olculdu -> menu metni asla sarmasin. */
@media (min-width: 1280px) {
  .h11-header.header-area .mainmenu > ul > li > a { white-space: nowrap; }
}

/* Masaustu offcanvas hamburgeri gorunur menuyle mukerrer; main.css onu zaten
   992-1400'te gizliyor. 1699'a kadar genislet -> 1440'ta ~45px yer acilir. */
@media (min-width: 992px) and (max-width: 1699.98px) {
  .h11-header.header-area .header-right-item .menu_offcanvas { display: none !important; }
}

/* 992-1279: header zaten asiri abone; kalan px kaynagi burada sikistirilir. */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .h11-header.header-area .mainmenu > ul { column-gap: 8px; }
  .h11-header.header-area .mainmenu > ul > li.has-dropdown > a { padding-inline-end: 13px; }
}

/* ---------------------------------------------------------------------------
   3) 992–1149: MASAÜSTÜ MENÜSÜ HAMBURGER'A DÜŞER

   Demet 2026-08-24: "main.js eşiğini de yap".

   NEDEN: bu temanın üst menüsü 7 maddeli ve 1150px altında tek satıra SIĞMIYOR.
   Ölçülen yer bütçesi = iç genişlik − [logo + menünün max-content genişliği + sağ blok]:
     1280 +112   1240 +94   1200 +54   1150 +7   1100 −35   1050 −82   1024 −108   992 −140
   Yani 1150 sınır, altı fiziksel olarak imkânsız. Şablonun `d-lg-*` eşiği (992) bu
   menü uzunluğu için yanlış yerdeydi: 992–1149'da masaüstü menüsü gösteriliyor ama
   sığmadığı için iki (EN'de üç) satıra sarıyordu.

   EŞLİK EDEN JS DEĞİŞİKLİĞİ: assets/js/main.js → meanScreenWidth "991" → "1149".
   İKİSİ BİRLİKTE DEPLOY EDİLMELİ:
     - yalnız CSS giderse  → o bantta masaüstü menüsü gizlenir ama meanmenu nav'ı
                             doldurmaz; hamburger BOŞ panel açar (navigasyon kaybolur).
     - yalnız JS giderse   → meanmenu nav'ı doldurur ama masaüstü menüsü de görünür
                             kalır; iki menü üst üste biner.

   NOT: .menu_offcanvas (bilgi paneli hamburger'ı) bundan AYRI bir düğme ve bölüm 2'de
   992–1699 arasında gizli kalıyor — o panel gezinme linki içermiyor, mükerrerdi.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1149.98px) {
  /* Bootstrap .d-none.d-lg-inline-flex'i ezer */
  .h11-header.header-area .menu-area { display: none !important; }
  /* Bootstrap .d-lg-none'i ezer */
  .h11-header.header-area .menu_bar.mobile_menu_bar { display: inline-flex !important; }
}

/* ---------------------------------------------------------------------------
   4) BAŞLIKLARDA ALT ÇIKINTILI HARFLER KIRPILIYOR (ç, ğ, ş, y, p, j)

   Demet 2026-08-24: "'aç' kelimesinin alt kısmında kesiklik var".

   KÖK NEDEN (canlı DOM'dan okundu, tahmin değil):
     H1.banner-title.title-anim        overflow: visible
       DIV  ← GSAP SplitText satır sarmalayıcısı   overflow: HIDDEN
         DIV (kelime)                  overflow: visible
           DIV (harf "ç")              overflow: visible
   main.js'teki title-anim animasyonu harfleri `y:"100%"` ile alttan getiriyor;
   SplitText de bunu maskelemek için satır sarmalayıcısına overflow:hidden koyuyor.
   Sarmalayıcının yüksekliği satır yüksekliğine eşit (ör. 78px vs line-height
   77.56px), dolayısıyla fontun alt çıkıntısı kutunun dışında kalıp kırpılıyor.

   ÖLÇÜM — mürekkebin satır kutusundan taşma miktarı (canvas actualBoundingBoxDescent):
     1920px / font 90px -> 7.64px taşıyor
     1280px / font 70px -> 6.22px taşıyor
     1100px / font 50px -> 4.80px taşıyor
   Font boyutuna oranı her üçünde de ~0.09em — yani sabit bir em değeriyle kapanır.

   ÇÖZÜM: satır sarmalayıcısına 0.14em alt dolgu (0.09em ihtiyacın üstünde pay) +
   aynı miktarda negatif alt boşluk. Kırpma kenarı aşağı iner, YERLEŞİM DEĞİŞMEZ
   (padding ile margin birbirini götürür).

   MASKE BOZULMUYOR: animasyon harfi kendi yüksekliği kadar (≈ line-height, 1280'de
   78px) aşağıdan getiriyor; kırpma kenarı yalnızca 0.14em (≈9.8px) aşağı indiği için
   harf başlangıçta hâlâ maskenin altında kalıyor. Ayrıca autoAlpha:0 ile zaten görünmez.

   KAPSAM: .title-anim tüm temada 86 başlıkta kullanılıyor (sec-title, title,
   banner-title). Kırpma hepsinde aynı mekanizmadan geliyor, bu yüzden genel.
   > div seçicisi yalnız SplitText'in ürettiği satır sarmalayıcılarını hedefler;
   SplitText çalışmadan önce .title-anim içinde div çocuk YOKTUR.
   --------------------------------------------------------------------------- */
.title-anim > div {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}