/* Haberler bölümünü ortala ve daralt */
.news-section {
    max-width: 800px; /* Haberlerin kaplayacağı maksimum genişlik */
    margin: 4rem auto 6rem auto; /* Üstten, alttan ve yanlardan boşluk, yatayda ortala */
    padding: 0 20px; /* Küçük ekranlarda kenarlara yapışmaması için */
    display: flex;
    flex-direction: column;
    gap: 3rem; /* Haberler arası boşluk */
}

/* Her bir haber kartı için stil */
.news-item {
    background-color: #1a1a1a; /* Haber kartının arka plan rengi */
    padding: 2.5rem; /* İç boşluk */
    border-radius: 8px; /* Köşeleri yuvarla */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge */
    text-align: left; /* Metni sola hizala */
}
/* news.css */
.news-item .news-image {
    display: block; /* Altındaki ve üstündeki elementlerle boşluk bırakır */
    max-width: 100%; /* İçinde bulunduğu haber kartının genişliğini geçmez */
    height: auto; /* Oranını korur */
    margin-bottom: 1.5rem; /* Altında metinle boşluk bırakır */
    border-radius: 5px; /* İsteğe bağlı: köşeleri yuvarlar */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* İsteğe bağlı: hafif gölge */
}

/* news.css */
.news-item .news-image.left-align {
    float: left; /* Sola yasla */
    max-width: 30%; /* Görselin maksimum genişliği (ayarlanabilir) */
    height: auto;
    margin-right: 1.5rem; /* Sağında metinle boşluk bırakır */
    margin-bottom: 0.5rem; /* Altında metinle boşluk bırakır */
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* İstersen sağa yaslama için de bir stil tanımlayabilirsin */
.news-item .news-image.right-align {
    float: right; /* Sağa yasla */
    max-width: 30%;
    height: auto;
    margin-left: 1.5rem; /* Solunda metinle boşluk bırakır */
    margin-bottom: 0.5rem;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Float kullandıktan sonra içeriklerin düzgün akması için (clear fix) */
.news-item::after {
    content: "";
    display: table;
    clear: both;
}

.news-item h3 {
    font-size: 1.8rem;
    color: #f2f2f2;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.news-item p {
    font-size: 1.1rem;
    color: #bbb;
    margin-bottom: 1.5rem;
}

/* "Devamını Oku" butonu */
.read-more-btn {
    display: inline-block; /* Buton gibi davranması için */
    background-color: #3c39fd71; /* Butonun arka plan rengi (menüdeki aktif renk tonu) */
    color: #fff; /* Butonun yazı rengi */
    padding: 0.8rem 1.5rem;
    text-decoration: none; /* Alt çizgiyi kaldır */
    border-radius: 5px; /* Buton köşelerini yuvarla */
    transition: background-color 0.3s ease; /* Hover efekti */
    font-size: 1rem;
    font-weight: 500;
}

.read-more-btn:hover {
    background-color: #2a27b8; /* Hover'da daha koyu bir ton */
}


/* RESPONSIVE AYARLAMALAR (Eğer istersen) */
@media (max-width: 768px) {
    .news-section {
        margin: 2rem auto 4rem auto;
        padding: 0 15px;
        gap: 2rem;
    }

    .news-item {
        padding: 1.8rem;
    }

    .news-item h3 {
        font-size: 1.5rem;
    }

    .news-item p {
        font-size: 1rem;
    }

    .read-more-btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .news-item {
        padding: 1.5rem;
    }

    .news-item h3 {
        font-size: 1.3rem;
    }

    .news-item p {
        font-size: 0.95rem;
    }
}