/*
|--------------------------------------------------------------------------
| Responsive Güvenlik Ağı
|--------------------------------------------------------------------------
| Bu dosya her sayfaya EN SON yüklenir ve yalnızca dar ekranlarda devreye
| girer. Masaüstü görünümüne (>= 992px) hiçbir kuralı uygulanmaz; bu yüzden
| mevcut tasarımı değiştirmez.
|
| Çözdüğü temel sorun:
| CSS Grid ve Flexbox çocuklarının varsayılan "min-width: auto" değeri, bir
| öğenin içeriğinden daha dar olmasını engeller. Sabit genişlikli bir görsel
| ya da satır sonu almayan uzun bir metin, kapsayıcıyı ekrandan taşırır ve
| üst kapsayıcıdaki "overflow: hidden" nedeniyle içerik kırpılır.
| Aşağıdaki kurallar bu kilidi açar ve geniş içeriği kendi kutusu içinde
| kaydırılabilir hâle getirir.
*/

@media (max-width: 991.98px) {

    /*
     * 0) Yönetim/profil/rapor sayfalarında kenar çubuğunun mobilde kapanması
     *
     * edu-layout.css bu ekran genişliğinde #left-draft'ı off-canvas yapıyor
     * (position: fixed, width: 0). Ancak management-native.css daha sonra
     * yükleniyor ve "body.ka-management-page #left-draft { position: relative }"
     * kuralını MEDYA SORGUSU OLMADAN tanımlıyor. Özgüllükler eşit olduğu için
     * sonradan gelen kural kazanıyor ve kenar çubuğu mobilde de 300px'lik bir
     * sütun işgal ediyordu; içerik ekranın dışına itiliyordu.
     * Bu blok, edu-layout.css'in mobil davranışını bu sayfalar için geri getirir.
     *
     * "!important" zorunlu: management-native.css bu iki bildirimi zaten
     * "!important" ile veriyor, aksi hâlde geçersiz kalırdı.
     */
    body.ka-management-page #draft {
        grid-template-columns: 1fr !important;
    }

    body.ka-management-page #left-draft {
        width: 0 !important;
        position: fixed !important;
        inset: 0 auto 0 0;
        z-index: 2147482300;
        pointer-events: none;
    }

    body.ka-management-page.ka-sidebar-open #left-draft {
        pointer-events: auto;
    }

    body.ka-management-page #right-draft {
        width: 100%;
        min-width: 0;
    }

    /* 1) Yerleşim kapsayıcıları içeriğinden dar olabilsin */
    #content-draft,
    #content-draft > *,
    .contain,
    .contain > *,
    .education-area,
    .education-area > *,
    .educations,
    .educations > *,
    .education-card-body,
    .education-card-body > *,
    .education-add-left,
    .education-add-right,
    .ka-education-add-page,
    .ka-education-add-page > *,
    .ka-edu-form-section,
    .ka-edu-form-section > * {
        min-width: 0;
    }

    /* 2) Görseller kutularına sığsın */
    .education-img,
    .education-img > img,
    .ka-cover-preview img,
    .education-card-body img,
    article img,
    .contain img {
        max-width: 100%;
    }

    .education-img {
        width: 100%;
    }

    .education-img > img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* 3) Tablolar ve veri ızgaraları kendi kutusunda yatay kaysın */
    .table-responsive,
    .ka-table-wrap,
    .ag-theme-quartz,
    .jexcel_container {
        max-width: 100%;
        overflow-x: auto;
    }

    table {
        max-width: 100%;
    }

    /* 4) Uzun kesintisiz metinler (URL, e-posta, kod) satır sonu alsın */
    .contain p,
    .contain span,
    .contain td,
    .education-description,
    .ka-v2-field {
        overflow-wrap: anywhere;
    }

    /* 5) Sekme / filtre şeritleri taşmak yerine kaysın */
    .ka-lp-step-tabs,
    .ps-tabs,
    .fb-toolbar,
    .nav-pills {
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
    }

    .ka-lp-step-tabs > *,
    .ps-tabs > *,
    .nav-pills > * {
        flex: 0 0 auto;
    }
}