/*
 * SLK-WBS-26.98 — Global responsive guards
 * En son yüklenir; mevcut style.css / responsive.css kurallarını override eder.
 * Amaç: yatay scroll, taşan görsel/tablo/iframe, kutu modeli farkları gibi
 * tipik responsive sorunlarını tek noktadan bastırmak.
 */

/* 1) Yatay scroll bastırma (sticky'yi bozmaz). overflow-x: clip yoksa hidden. */
html, body {
    overflow-x: clip;
}
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}

/* 2) Tüm projede tek tip kutu modeli */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 3) Medya elementleri max ekrana sığsın */
img, picture, video, iframe, embed, object, canvas, svg {
    max-width: 100%;
    height: auto;
}
img { display: inline-block; }

/* iframe'ler (Google Maps / YouTube vs.) ebeveynden taşmasın */
iframe[src*="google"], iframe[src*="youtube"], iframe[src*="vimeo"] {
    max-width: 100%;
}

/* 4) Uzun kelimeler / URL'ler kapsayıcıyı patlatmasın */
p, h1, h2, h3, h4, h5, h6, li, dd, dt, blockquote, td, th, span, a, label {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 5) Tablolar sığmıyorsa kaydırma çubuğu (manuel sarmalama sınıfı) */
.table-responsive-wrap, .responsive-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 6) Genel font scaling — küçük cihazlarda iOS'un otomatik büyütmesini durdur */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 7) Container padding — Bootstrap zaten verir ama emin olmak için */
.container, .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

/* 8) Mobile breakpoint inceltmeleri */
@media (max-width: 600px) {
    .container, .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
    /* Çoğu module-area `padding: 100px 0` kullanıyor — mobilde fazla */
    .module-area {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    /* Yatay flex zorlamaları mobilde wrap olsun */
    .module-area .row,
    .module-area-2 .row {
        flex-wrap: wrap;
    }
}

/* 9) Tablet aralığı — özellikle 2 sütunlu modüller daralırsa */
@media (max-width: 991px) {
    /* Modül başlıklarında uzun yazılar köşeleri yarmasın */
    h1, h2, h3 { word-break: normal; hyphens: auto; }
}

/* 10) Yazıcı: floating elemanlar ve modal'lar gizli olsun */
@media print {
    .selkas-wa-fab, #return-to-top, .header-mobile-main, .opening-mobile-menu-div {
        display: none !important;
    }
}

/* 11) #return-to-top scroll top butonu sağ altta — WhatsApp ile çakışmasın
 * (WA sola sabit; bu sağa sabit). Aralık emniyeti. */
#return-to-top {
    right: 18px !important;
    left: auto !important;
}

/* 12) Tablet/Mobil header — yatay hizalama tutarlığı.
 * Mevcut responsive.css'te `.header-site-release-logo` masaüstü için
 * `margin-left: auto` ile sağa itiliyor; mobilde bunu sıfırla ki SLK-WBS
 * metni ve logo birbirine yakın, sol grup; kullanıcı/sepet/hamburger sağ
 * grup olarak iki uçta otursun. */
@media (max-width: 1023px) {
    .header-mobile-main {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px;
        padding: 10px 14px !important;
        min-height: 64px;
    }
    .header-mobile-logo {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }
    .header-mobile-logo .header-site-release-logo,
    .header-mobile-logo a.header-site-release-logo {
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-shrink: 0;
    }
    .header-mobile-logo .header-site-release--mob {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding-right: 8px !important;
        border-right: 1px solid rgba(255, 255, 255, .25);
    }
    .header-mobile-right {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        margin: 0 !important;
        width: auto !important;
    }
    .header-mobile-right-cart,
    .header-mobile-right-bars {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .headernew_stil_icons {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin: 0 !important;
        width: auto !important;
    }
    .headernew_stil_box {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    .header-mobile-right-cart i,
    .headernew_stil_box i {
        font-size: 22px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    .mobile-menu-bar-button {
        background: transparent;
        border: none;
        padding: 6px;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Hamburger menü açıldığında üst bar yerinde kalsın */
    .opening-mobile-menu-div {
        margin-top: 0 !important;
    }
}

/* 13) Tablet (geniş telefon yatay / küçük tablet) — yatay alanı daha
 * dengeli kullan: SLK-WBS + logo solda, ikon grubu sağda; gap'ler daha
 * ferah. */
@media (min-width: 768px) and (max-width: 1023px) {
    .header-mobile-main {
        padding: 12px 24px !important;
        min-height: 72px;
    }
    .header-mobile-logo {
        gap: 16px !important;
    }
    .header-mobile-logo img {
        max-width: 140px !important;
        max-height: 68px !important;
    }
    .header-mobile-logo .header-site-release--mob .header-site-release-l1 {
        font-size: 11px !important;
    }
    .header-mobile-logo .header-site-release--mob .header-site-release-l2 {
        font-size: 10px !important;
    }
    .header-mobile-right {
        gap: 16px !important;
    }
    .header-mobile-right-cart i,
    .headernew_stil_box i {
        font-size: 26px !important;
    }
}

/* 14) Gri sayfa başlığı (.page-headers-main): Türkçe noktalı "i" üstünde çift
 * nokta / kopuk nokta — nedeni: Raleway + `.font-spacing` (letter-spacing: 0.04em)
 * birlikte kullanıldığında nokta ile gövde ayrılmış gibi çizilir (özellikle
 * "Regülatörleri" gibi kelimelerde). `fonts.css` içinde kısmi düzeltme vardı;
 * burada tüm banner metni için kesin çözüm (en son yüklenen stylesheet). */
.page-headers-main .page-headers-main-left,
.page-headers-main .page-headers-main-right,
.page-headers-main .page-headers-main-left *,
.page-headers-main .page-headers-main-right * {
    letter-spacing: normal !important;
    word-spacing: normal;
}
.page-headers-main .page-headers-main-left.font-raleway,
.page-headers-main .page-headers-main-right.font-raleway {
    font-family: 'Open Sans', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}