/* RSS Haber Kartları - responsive grid görünümü
   !important kullanıldı çünkü sitede mevcut .rss-item stilleri
   (border'lı kutu, ortalanmış metin, flex/3 sütun gibi) bu kuralları eziyordu. */

/* === GÜVENLİK KATMANI: :has() desteklenmeyen tarayıcılar için fallback === */
/* :has() yerine, doğrudan bilinen Bootstrap yapısını hedefliyoruz.
   Sitenizdeki gerçek class adlarını (örn. .col-8.col-mb-12) kullanıyoruz,
   böylece :has() desteği olmayan tarayıcılarda da çalışır.
   ÖNEMLİ: width/flex genişliğine burada DOKUNMUYORUZ — desktop'taki
   8/12 sütun oranını (yanındaki sidebar vs.) bozmamak için sadece
   taşmayı önleyen min-width:0 ve overflow ekliyoruz. Genişlik zorlaması
   sadece aşağıdaki mobil/tablet medya sorgusunda yapılıyor. */
.col-8.col-mb-12 {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

@media (max-width: 900px) {
    .col-8.col-mb-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* :has() destekleyen tarayıcılar için ek güvence (Chrome 105+, Safari 15.4+) */
*:has(> #rss-feed) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

div.row:has(#rss-feed) {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}
div.row:has(#rss-feed) > [class*="col-"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* === ANA GRID === */
#rss-feed#rss-feed {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 28px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    border: none !important;
    background: none !important;
    text-align: left !important;
    overflow: hidden !important;
}

/* KRİTİK DÜZELTME: grid item'lar varsayılan min-width:auto alır,
   bu da içerik (img) taşarsa sütunun büyümesine ve tüm satırın
   ekrandan dışarı taşmasına sebep olur. Her item'a min-width:0 zorla. */
#rss-feed#rss-feed > .rss-item {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

#rss-feed#rss-feed .rss-item {
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

#rss-feed#rss-feed .rss-item a {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#rss-feed#rss-feed .rss-item a:hover h3 {
    text-decoration: underline !important;
}

/* KRİTİK DÜZELTME: img'e max-width yetmiyor, intrinsic genişliği
   (örn. 1280px) flex/grid item'ı küçülmeye zorluyor olabilir.
   width:100% + display:block zaten var ama min-width:0 eksikti. */
#rss-feed#rss-feed .rss-item img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 2px !important;
    border: none !important;
    box-sizing: border-box !important;
}

#rss-feed#rss-feed .rss-item h3 {
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #16215c !important;
    text-align: left !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Tablet: 2 sütun */
@media (max-width: 900px) {
    #rss-feed#rss-feed {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobil: 2 sütun (6 haber -> 2 sütun x 3 satır) */
@media (max-width: 480px) {
    #rss-feed#rss-feed {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px 12px !important;
    }
    #rss-feed#rss-feed .rss-item h3 {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }
}