/* css/blog.css */

/* Blog Hero Section (Tutarlı Yapı) */
#blog-hero {
    /* Resim yolu, css/blog.css'ten bir üst klasöre (root) çıkarak images/ klasörüne ulaşacak şekilde ayarlandı. */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/slider1.jpg') no-repeat center center; 
    background-size: cover;
    color: white;
    padding: 6rem 0;
    min-height: 350px; 
    /* Sola hizalama için flex ayarını ve align-items'ı container içinde yapacağız. */
    display: flex;
    align-items: center;
}

#blog-hero h1 {
    font-size: 3rem;
    font-weight: 700;
}

/* Yazar Profil Resmi Stili */
.author-profile {
    width: 40px; /* Profil resmi boyutu */
    height: 40px; /* Profil resmi boyutu */
    border-radius: 50%; /* Oval şekil */
    object-fit: cover;
    border: 2px solid white; /* Hafif bir sınır */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* 1. KART GÖRÜNÜMÜNÜ INDEX.HTML İLE EŞLEŞTİRME VE HOVER EKLEME */

/* HTML'de kullanılan h-100 border-0 rounded-3 shadow-sm sınıflarını tamamlar. */
.blog-card-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Kart içeriği taşmasın diye */
}

/* Kartın üzerine gelindiğinde hafifçe yükselme efekti ekler (UX/UI için faydalı) */
.blog-card-item:hover {
    transform: translateY(-5px); 
    /* Gölgelendirmeyi hafifçe arttırarak kartın öne çıkmasını sağlar */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; 
}

/* Blog Görseli Stili (Tüm kartlar görsel yüksekliği eşit olsun diye) */
.blog-img {
    height: 200px; 
    object-fit: cover; 
    width: 100%;
}

/* Sayfalama (Pagination) Stili */
.pagination .page-link {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    border-radius: 0.5rem;
    margin: 0 0.25rem;
}

.pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-light);
}

.pagination .page-link:hover {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
    color: var(--bs-dark);
}