/* ==========================================================
    Blog Görselleri — Sabit 1400 x 660 Kutusu
   ----------------------------------------------------------
    Panelde önerilen boyut 1400x660. Yüklenen görsel ne oranda
    olursa olsun kart kutusu bu orana sabitlenir; fazlalık
    `object-fit: cover` ile kırpılır (görsel bozulmaz).

    Öncesi: 600x400 -> 193px, 612x611 -> 290px, 1400x660 -> 137px
    Aynı listede üç farklı yükseklik, kartlar hizasız ve sayfa
    düzeni bozuk görünüyordu.

    Kutu yüksekliği `padding-bottom` yüzdesiyle kurulur
    (660 / 1400 = %47.143) çünkü `aspect-ratio` eski
    tarayıcılarda desteklenmiyor.

    Kapsam:
      - Blog liste sayfası   (.rs-blog.inner.modify)
      - Blog detay sayfası  (.single-blog-item)

    NOT: Anasayfadaki "Son Yazılarımız" bölümü kaldırıldığı için
    .rs-blog.style1 kuralları da bu dosyadan çıkarıldı.
   ========================================================== */

/* --- 1) Liste kartları --- */
.rs-blog.inner.modify .blog-item .blog-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 47.1429%; /* 1400 x 660 oranı */
    overflow: hidden;
    background: #f4f4f4; /* yükleme sırasında boş kutu rengi */
}

/* --- 2) Detay sayfası ana görsel --- */
.single-blog-item .blog-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 47.1429%;
    overflow: hidden;
    background: #f4f4f4;
}

/* --- 3) Görselleri kutuya oturt --- */
.rs-blog.inner.modify .blog-item .blog-image img,
.single-blog-item .blog-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

/* Tema, kart üzerine gelince görseli büyütüyor; kırpma
   kutusu sabit kaldığı için taşma zaten kesilir. */
.rs-blog.inner.modify .blog-item:hover .blog-image img {
    transform: scale(1.06);
}

/* ==========================================================
    Metin Kısmı — Sabit Yükseklik
   ----------------------------------------------------------
    Görseller eşitlendi ama başlık/özet satır sayısına göre
    kartlar yine farklı yükseklikteydi (218px - 330px) ve
    satır tabanları hizasızdı.

    Ölçülen en uzun içerik (başlık 3 satır + özet 3 satır):
      60 (padding) + 90 + 13 + 26 + 20 + 78 + 17 + 26 = 330px

    Başlık 2 satıra kırpılınca en uzun içerik 300px'e düşer,
    bu yüzden kutu 300px sabitlenir. Fazlası `-webkit-line-clamp`
    ile kırpılır, buton `margin-top:auto` ile alta yaslanır.
   ========================================================== */

/* --- Liste sayfası --- */
.rs-blog.inner.modify .blog-item .text-bottom {
    height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rs-blog.inner.modify .blog-item .title2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rs-blog.inner.modify .blog-item .blog-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "Devamını Oku" butonu her kartta aynı yerde dursun */
.rs-blog.inner.modify .blog-item .blog-btn {
    margin-top: auto;
}

/* ==========================================================
    Blog Detay — "İlgili Yazılar" Kartları
   ----------------------------------------------------------
    Temanın blog kartı kuralları YALNIZCA .rs-blog.inner.modify
    kapsamında geçerli. Detay sayfasının kabuğu .rs-blog-single
    olduğu için bu kartlara tema kuralı UYGULANMIYORDU: görseller
    doğal boyutlarıyla basılıyor (183px / 122px / 183px) ve
    başlıklar 61px farklı hizada duruyordu.

    Çözüm: liste sayfasıyla AYNI kutu oranı (1400x660), sabit
    başlık yüksekliği ve satır kırpma -> tüm kartlar dikeyde
    aynı hizada ve aynı boyutta.
   ========================================================== */

/* --- Görsel kutusu --- */
.related-post .blog-item .blog-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 47.1429%; /* 1400 x 660 oranı */
    overflow: hidden;
    background: #f4f4f4;
}

.related-post .blog-item .blog-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transition: transform .3s ease;
}

.related-post .blog-item:hover .blog-image img {
    transform: scale(1.06);
}

/* --- Satır yükseklikleri eşitlensin --- */
.related-post .row > [class*="col-"] {
    display: flex;
}

.related-post .blog-item {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* --- Başlık: en fazla 3 satır, sabit yükseklik --- */
.related-post .blog-item .text-bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 18px üst boşluk + 3 satır (3 x 26px) = 96px.
       Başlık 1 satır olsa bile kutu bu yükseklikte kalır; böylece
       tüm kartlar aynı boyutta ve dikeyde hizalı olur. */
    min-height: 96px;
    padding-top: 18px;
    overflow: hidden;
}

.related-post .blog-item .text-bottom .title2 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: #1f2839;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-post .blog-item .text-bottom .title2 a {
    color: inherit;
}

.related-post .blog-item .text-bottom .title2 a:hover {
    color: #b69d74;
}