/* ============================================================
   Ritaş — Public Site Mobil Uyumluluk Katmanı
   ------------------------------------------------------------
   KURAL: Bu dosyadaki TÜM stiller yalnızca @media (max-width)
   blokları içindedir. Masaüstü (>= 992px) görünümü bu dosyadan
   ETKİLENMEZ. Sadece tablet/telefon kırılımları düzeltilir.

   Tema (Crafto) zaten büyük ölçüde responsive'dir; burada yalnızca
   siteye özel eklenmiş bölümler ve inline-style kaynaklı taşmalar
   hedeflenir.
   ============================================================ */

/* ============================================================
   1) GENEL GÜVENLİK — görsel/iframe/tablo taşmaları
   (sticky/fixed başlığı kırmamak için body overflow KULLANILMAZ)
   ------------------------------------------------------------
   Sayfa içerikleri (haber/sayfa açıklamaları) CKEditor'dan serbest
   HTML olarak geldiği için, içeride class'sız geniş görsel / gömülü
   video / tablo bulunabilir. Bunların taşmasını engelliyoruz.
   ============================================================ */
@media (max-width: 991px) {
    img {
        max-width: 100%;
        height: auto;
    }
    .overlap-gap-section iframe,
    .overlap-gap-section video,
    .overlap-gap-section embed {
        max-width: 100%;
    }
    .overlap-gap-section table {
        max-width: 100%;
        display: block;
        overflow-x: auto;
    }
}

/* ============================================================
   2) CUSTOM CARD (anasayfa — siteye özel "pinned scroll" bölüm)
   ------------------------------------------------------------
   JS (main.js) pinned-scroll animasyonunu zaten <768px'te kapatıyor.
   Ancak masaüstü CSS'i kartları yatay (flex-row) + dev başlık fontu ile
   bırakıyordu; 600–991px aralığında taşma oluyordu. Burada kartları
   dikey, taşmasız ve okunur hale getiriyoruz.
   ============================================================ */
@media (max-width: 991px) {
    .custom-card-inner {
        flex-direction: column;
        gap: 1.5em !important;
        padding: 1.5em !important;
        height: auto;
    }
    .custom-card-area {
        flex-direction: column;
        gap: 1.25em;
    }
    .custom-card-content {
        flex: none;
        width: 100%;
    }
    .custom-card-content a {
        font-size: 2.4rem;
        line-height: 1.15;
        width: auto;
        max-width: 100%;
        word-break: break-word;
    }
    .custom-card-content p {
        width: 100%;
    }
    .custom-card-img {
        flex: none;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }
    .custom-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
@media (max-width: 575px) {
    .custom-card-content a {
        font-size: 1.9rem;
    }
    .custom-card-inner {
        padding: 1.15em !important;
        gap: 1.15em !important;
    }
}

/* ============================================================
   3) KARİYER BÖLÜMÜ (anasayfa) — float'lı görsel
   index.php: <img style="float:left;margin-right:15px">
   Mobilde metni sıkıştırıyordu; ortalanmış blok haline getiriyoruz.
   ============================================================ */
@media (max-width: 991px) {
    #kariyer img[style*="float"] {
        float: none !important;
        display: block;
        margin: 0 auto 20px !important;
        max-width: 100%;
        height: auto;
    }
}

/* ============================================================
   4) GÖRSEL SAYFASI (page.php tur=3) — col-4 küçük kutular
   Düz .col-4 her ekranda 3 sütun kalıyordu; telefonda çok küçülüyordu.
   Sadece görsel listesindeki kutular hedeflenir (> .col-4 direkt çocuk).
   ============================================================ */
@media (max-width: 767px) {
    .transition-inner-all > .col-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width: 420px) {
    .transition-inner-all > .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================================================
   5) SEKTÖR / ÜRÜN satırları (page.php tur=5 ve tur=10)
   Aradaki boş <div class="col-12 col-lg-1"></div> mobilde gereksiz
   dikey boşluk yaratmasın.
   ============================================================ */
@media (max-width: 991px) {
    .col-12.col-lg-1:empty {
        display: none;
    }
}

/* ============================================================
   6) UZUN BAŞLIK / KELİME taşmaları (çok küçük ekranlar)
   ============================================================ */
@media (max-width: 575px) {
    h1, h2, h3,
    .custom-card-content a {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* ============================================================
   7) ÇEREZ BİLDİRİMİ — mobilde tam genişlik (masaüstü 370px sabit
   genişliği küçük ekranda taşıyordu)
   ============================================================ */
@media (max-width: 575px) {
    .cookie-message {
        left: 15px;
        right: 15px;
        bottom: 15px;
        max-width: none;
        padding: 25px;
    }
}

/* ============================================================
   8) SLIDER MOBİL VİDEO — yalnızca mobil video YÜKLENMİŞSE (.has-mobil)
   mobilde masaüstü videosu gizlenir, dikey mobil video gösterilir.
   Mobil video yoksa masaüstü videosu mobilde de görünmeye devam eder.
   ============================================================ */
@media (max-width: 767px) {
    .hero-video.has-mobil .hero-video-masaustu {
        display: none;
    }
    .hero-video.has-mobil .hero-video-mobil {
        display: table-cell;
    }
}