/* ==========================================================================
   mobile-fixes.css — Safe-area + responsive güvenlik ağı
   Oluşturma: 2026-09-08 · Plan: PLAN.md Faz 1.5 + Faz 2

   Bu dosya EN SON yüklenir; amacı style.css / responsive.css / bootstrap
   kurallarını bozmadan üzerine yama geçmektir. Tamamı geri alınabilir:
   header_libs.php'den <link> satırını kaldırmak yeterlidir.
   ========================================================================== */


/* --------------------------------------------------------------------------
   FAZ 2.1–2.3 — Responsive güvenlik ağı
   -------------------------------------------------------------------------- */

/* 2.1 — Görseller akışkan olsun. Projede tek bir global img kuralı yoktu;
        her görsel breakpoint başına elle boyutlandırılıyordu. */
img {
    max-width: 100%;
    height: auto;
}

/* 2.2 — Yatay taşmaya karşı ağ.
        DEĞİŞTİ (2026-09-09): eskiden burada yalnızca `overflow-x: hidden` vardı
        ve gerekçesi "projede position:sticky kullanılmıyor" idi. Bu varsayım
        artık geçerli değil — ürün detay sayfasının sağ paneli yapışkan
        (modern.css, "AKILLI YAPIŞKAN SAĞ PANEL").

        `overflow-x: hidden` html/body üzerinde bir KAYDIRMA KAPSAYICISI yaratır;
        içindeki sticky elemanlar viewport yerine o kapsayıcıya göre konumlanır
        ve pratikte hiç yapışmaz (ölçüldü: panel kaydırmayla birlikte ekrandan
        çıkıyordu). `overflow-x: clip` aynı taşma korumasını verir ama kaydırma
        kapsayıcısı YARATMAZ, sticky çalışmaya devam eder.

        `hidden` önce yazılıyor: clip desteklemeyen eski tarayıcı onu kullanır
        (o tarayıcıda sticky çalışmaz ama sayfa yine de doğru görünür). */
html,
body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* 2.3 — iOS'un yatay modda metni kendiliğinden şişirmesini engelle. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* --------------------------------------------------------------------------
   FAZ 1.5 — Safe-area (Dynamic Island / çentik / jest çubuğu)

   viewport-fit=cover ile sayfa artık ekranın tamamını kaplıyor. Aşağıdaki
   env() değerleri olmadan yüzen elemanlar home indicator'ın altına girer.
   env() desteklemeyen eski tarayıcılarda ikinci argüman (0px) devreye girer.
   -------------------------------------------------------------------------- */

/* Yatay moddaki letterbox şeritlerini kaldırır; dikeyde etkisi yoktur. */
body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* WhatsApp butonu — style.css:10, bottom:20px sabit, hiçbir breakpoint
   override'ı yoktu. iOS Safari'nin alt adres çubuğu da bu bölgede. */
.cbh-phone {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Yukarı-çık butonu — bottom değeri panelden (ayarlar.totop_bottom) geliyor
   ve header_libs.php içinde inline basılıyor. Burada sadece güvenli alan
   payını ekliyoruz; inline kural bottom'u belirlemeye devam eder. */
#return-to-top {
    margin-bottom: env(safe-area-inset-bottom, 0px);
    margin-right: env(safe-area-inset-right, 0px);
}

/* Çerez banner'ı — CDN'den gelen cookieconsent@3, varsayılanı bottom:0. */
.cc-window.cc-banner,
.cc-window.cc-floating {
    padding-bottom: calc(1em + env(safe-area-inset-bottom, 0px));
}

/* Sabit header (yalnızca masaüstünde görünür; mobilde display:none) —
   ana ekrana eklenip standalone açıldığında üst güvenli alan payı. */
#fixed-header-main {
    padding-top: env(safe-area-inset-top, 0px);
}

/* Tam ekran modal/overlay katmanları — kapatma düğmeleri güvenli alanda kalsın.
   .kg = katalog görüntüleyici, .kp = katalog paylaşım penceresi
   (assets/css/katalog.css). Güvenli alan payı BİLEREK orada değil burada:
   modern.css'in başındaki kural env(safe-area-*) yazılacak tek yerin bu dosya
   olduğunu söylüyor; katalog.css de aynı ağa yaslanıyor. */
.mfp-container,
.swal2-modal,
.kg,
.kp {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}


/* --------------------------------------------------------------------------
   FAZ 2.4 — iOS zoom-on-focus

   iOS Safari, font-size < 16px olan bir alana odaklanınca sayfayı otomatik
   büyütür. Projede 9 adet 14px/13px input kuralı vardı (arama + bülten).
   Düğmeler ve seçim kutuları kapsam dışı — onlarda zoom tetiklenmiyor.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1100px) {

    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* --------------------------------------------------------------------------
   FAZ 2.5 — .service-icon-1-box yatay taşması

   responsive.css:100 ve :103 → width:315px + margin 35+35 = 385px, üstelik
   max-width:321px bloğunun içinde. Satır 415 marjini 10px'e indiriyor ama
   toplam yine 335px kalıyor → 320px ekranda ~15px yatay kaydırma.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 410px) {

    .service-icon-1-box,
    .service-icon-1-box:last-child {
        width: calc(100% - 20px) !important;
        max-width: 315px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        box-sizing: border-box !important;
    }
}


/* --------------------------------------------------------------------------
   FAZ 3.4 — Büyük ekranlarda header/footer hizasızlığı

   Temel style.css'te dış kabuk genişlikleri tutarsız:
     header / slider / trigger / page-headers ... 1333px
     footer-*-inside ............................ 1366px   <- 33px daha geniş

   responsive.css 1440px üstünde footer'ın "ust" bloklarını hiç ezmiyor, bu yüzden
   footer içeriği header'dan 16.5px daha dışarıda oturuyor. Aşağıda footer dış
   kabuğu header ile hizalanıyor. İç içerik genişlikleri (1300/1200/1170/1155)
   kasıtlı dar alanlar; onlara DOKUNULMUYOR.

   Kapsam min-width ile sınırlı: küçük ekranlarda responsive.css footer'ı
   yüzdeye çeviriyor (ör. 1101–1439 aralığında %90) ve o kurallar korunmalı.
   -------------------------------------------------------------------------- */

/* 1440–1680: responsive.css header'ı 1300px'e indiriyor, footer'ın "ust"
   blokları ezilmeden 1366px kalıyor. "alt" bloklar (%100 / %95) kasıtlı
   tam genişlik şeritleri — onlara dokunulmuyor. */
@media screen and (min-width: 1440px) and (max-width: 1680.98px) {

    .footer-dark-ust-main-inside,
    .footer-light-ust-main-inside {
        width: 1300px;
    }
}

/* 1681px üstü: hiçbir media query yok, temel stil geçerli (header 1333px). */
@media screen and (min-width: 1681px) {

    .footer-dark-ust-main-inside,
    .footer-dark-alt-main-inside,
    .footer-light-ust-main-inside,
    .footer-light-alt-main-inside {
        width: 1333px;
    }
}


/* --------------------------------------------------------------------------
   FAZ 2.6 — Görsellerde min-width taşması

   responsive.css:128 (290px), :186 :217 :240 (300px), :456 (280px) — hepsi
   !important. Bu değerler 0–321px bloğunda tanımlı olduğu için 300px'ten dar
   ekranlarda (ör. Galaxy Fold kapak ekranı, 280px) taşma yaratıyor.
   Yalnızca ≤320px'e sınırlandırıldı; üstündeki aralıklar değişmedi.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 320px) {

    .product-group-box img,
    .project-item-img img,
    .photo-galleri-home-box-img,
    .video-gallery-home-box-img img,
    .photogallery-detail-box img {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}