/**
 * Ekranın altındaki yüzen katmanlar: Chaty balonu, TranslatePress dil seçici
 * ve sayfaya gömülü "ÜCRETSİZ TEŞHİS ALIN" sabit çubuğu.
 *
 * SORUN (375x812'de ölçüldü):
 * Üstte 80px sabit başlık, altta 106px sabit çubuk — ekranın %23'ü kalıcı olarak
 * kapalı. Kalan alanın alt şeridini de Chaty (sol alt) ve dil seçici (sağ alt)
 * paylaşıyor. Sonuçlar: anasayfada Chaty hero'daki TANIŞALIM butonunun üstüne
 * biniyor, dil seçici sabit çubuğun üstünde duruyor, /blog/'da ikisi birlikte
 * sayfa başlığını kapatıyor, /iletisim/'de KVKK onay satırını kapatıyor.
 *
 * NEDEN MEVCUT ÇÖZÜM ÇALIŞMIYORDU:
 * Sabit çubuğun kendi içindeki <style> bloğu Chaty'yi yukarı itmeye çalışıyor
 * ama yalnızca çubuğun bulunduğu 7 sayfada var (anasayfa + 6 SEO lokasyon
 * sayfası). Blog, yazı, case study ve iletişim sayfalarında hiçbir öteleme yok;
 * Chaty `bottom: 25px` ile içeriğin üstünde kalıyor. Dil seçici hiçbir yerde
 * hesaba katılmamış.
 *
 * ÇÖZÜM:
 * Tek bir değişken -- --ba-alt-cubuk -- çubuğun gerçek yüksekliğini tutuyor
 * (assets/js/yuzen-katmanlar.js ölçüp yazıyor, çubuk yoksa 0 kalıyor). Her iki
 * yüzen katman da bu değişkenin üstüne yerleşiyor. Böylece kural tek yerde ve
 * çubuğun yüksekliği ileride değişse de kendiliğinden uyuyor.
 */

:root {
    --ba-alt-cubuk: 0px;
    --ba-yuzen-bosluk: 16px;
}

/*
 * Çubuğun varlığını PHP bildiriyor (inc/yuzen-katmanlar.php, body_class).
 * Buradaki değer ölçülen yüksekliğe yakın bir varsayılan: düzen ilk boyamada
 * doğru geliyor, JS yüklenmese bile bozulmuyor. JS sonradan çubuğun gerçek
 * yüksekliğini yazıp değeri tam oturtuyor.
 */
body.ba-alt-cubuk-var {
    --ba-alt-cubuk: 70px;
}

/* ================================================================
   1. SABİT ALT ÇUBUK
   ================================================================ */

/*
 * Mobilde çubuk 106px'e çıkıyordu. Sebebi 30px alt dolgu ve içindeki boş
 * paragraf: markup'ta `.desktop-text` var, mobilde gizleniyor ve yerine
 * geçmesi gereken `.mobile-text` elemanı HTML'de HİÇ YOK (CSS'te tanımlı,
 * karşılığı yazılmamış). Yani mobilde metinsiz bir satır ve onun boşluğu
 * duruyor. Dolgu daraltılıp iPhone ana ekran çubuğu env() ile hesaplanıyor.
 */
@media (max-width: 768px) {
    body .brandaft-sticky-bar {
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body .brandaft-sticky-bar .sticky-bar-content {
        gap: 0 !important;
    }

    /* Metinsiz paragraf satır yüksekliği kadar yer tutmasın. */
    body .brandaft-sticky-bar .sticky-text:not(:has(.mobile-text)) {
        display: none !important;
    }
}

/*
 * Çubuğun butonu WhatsApp'a gidiyor; Chaty balonu da aynı numaraya gidiyor.
 * İkisi ekranın altında üst üste binince aynı eylem iki kez sunuluyor.
 * Çubuk varken Chaty'nin metin etiketi gizleniyor (aşağıda), balon kalıyor.
 */

/* ================================================================
   2. CHATY (WhatsApp balonu) — sol alt
   ================================================================ */

/*
 * Konumlanan eleman `.chaty-widget` (position: fixed; bottom: 25px; left: 25px).
 * Çubuğun satır içi CSS'i bunu `bottom: 155px !important` yapıyordu; 812px'lik
 * ekranda balonu tam ortaya taşıyıp hero butonunun üstüne koyuyordu.
 * !important'ı yenmek için gövdeyle başlayan seçici kullanılıyor.
 */
body .chaty-widget {
    bottom: calc(var(--ba-alt-cubuk) + var(--ba-yuzen-bosluk)) !important;
    transition: bottom .2s ease, opacity .2s ease, visibility .2s ease;
}

@media (max-width: 767px) {
    body .chaty-widget {
        left: 14px !important;
    }

    /*
     * "Bizimle İletişime Geç!" etiketi 192px genişliğinde ve balonun sağına
     * taşıyor; içeriğin üstünü kapatan asıl parça bu. Dar ekranda yalnızca
     * yuvarlak simge kalıyor — ne olduğu zaten anlaşılıyor.
     */
    body .chaty-widget .on-hover-text {
        display: none !important;
    }
}

/* ================================================================
   3. TRANSLATEPRESS DİL SEÇİCİ — sağ alt
   ================================================================ */

/*
 * Siyah zeminli, köşeli 66x58 bir kutuydu ve marka diline hiç uymuyordu;
 * ayrıca sabit çubuğun üstünde duruyordu (z-index 9999999).
 * Seçici bir id olduğu için (1,0,0) ağırlığında; !important gerekiyor.
 */
#trp-floater-ls.trp-language-switcher-container {
    bottom: calc(var(--ba-alt-cubuk) + var(--ba-yuzen-bosluk)) !important;
    border-radius: 100px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(8, 20, 38, .18) !important;
    transition: bottom .2s ease, opacity .2s ease, visibility .2s ease;
}

@media (max-width: 767px) {
    #trp-floater-ls.trp-language-switcher-container {
        right: 14px !important;
        /* Balonla aynı görsel ağırlıkta kalsın. */
        transform: scale(.88);
        transform-origin: bottom right;
    }
}

/* ================================================================
   4. FORM DOLDURURKEN YOLDAN ÇEKİLME
   ================================================================ */

/*
 * Dar ekranda klavye açıldığında kullanılabilir alan yarıya iniyor; yüzen
 * katmanların orada durması doğrudan engel oluyor. Bir form alanına
 * odaklanıldığında JS gövdeye `ba-form-odakta` ekliyor.
 */
@media (max-width: 1024px) {
    body.ba-form-odakta .chaty-widget,
    body.ba-form-odakta #trp-floater-ls.trp-language-switcher-container {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ================================================================
   5. SAYFA SONUNDA İÇERİK KATMANLARIN ALTINDA KALMASIN
   ================================================================ */

/*
 * Çubuğun satır içi CSS'i `body { padding-bottom: 140px !important }` yazıyor;
 * çubuk daraldığı için bu artık fazla. Gövdeyi sınıfla hedefleyip (0,1,1)
 * ağırlığıyla geçiyoruz. Çubuk yoksa yalnızca balon yüksekliği kadar boşluk.
 */
body.ba-alt-cubuk-var {
    padding-bottom: calc(var(--ba-alt-cubuk) + var(--ba-yuzen-bosluk)) !important;
}

@media (max-width: 1024px) {
    body:not(.ba-alt-cubuk-var) {
        /* Balon 54px + boşluk; sayfa sonundaki bağlantılar erişilebilir kalsın. */
        padding-bottom: calc(54px + var(--ba-yuzen-bosluk) * 2);
    }
}

@media (prefers-reduced-motion: reduce) {
    body .chaty-widget,
    #trp-floater-ls.trp-language-switcher-container {
        transition: none !important;
    }
}