.sph-main-wrapper { width: 100%; position: relative; border-radius: 15px; overflow: hidden; }
.swiper { width: 100%; height: 100%; }
.sph-bg { width: 100%; height: 100%; object-fit: cover; }

.sph-overlay {
    position: absolute; 
    bottom: 70px; /* Siyah çubuğun üzerinde başlaması için değer eklendi */
    left: 0; 
    right: 0; 
    height: 60%;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    display: flex; 
    align-items: flex-end; 
    padding: 5px 50px; /* Alttan 30px, yanlardan 50px boşluk */
}

.sph-date-box {
    background: rgba(44, 62, 80, 0.9); color: #fff; padding: 15px;
    border-radius: 10px; text-align: center; margin-right: 25px; min-width: 100px;
}

.sph-info h2 { color: #fff; text-transform: uppercase; margin: 0; font-weight: 800; line-height: 1.1; }
.sph-info p { color: #ddd; margin: 10px 0 0; }

.sph-footer {
    position: absolute; bottom: 0; left: 0; width: 100%; z-index: 10;
    background: #000; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center;
}

/* Swiper Pagination (Numaralar) */
.custom-pagination { position: relative !important; width: auto !important; bottom: 0 !important; }
.swiper-pagination-bullet {
    width: 35px !important; height: 35px !important; line-height: 35px !important;
    background: #222 !important; color: #fff !important; opacity: 1 !important;
    border-radius: 5px !important; font-size: 14px !important; text-align: center !important;
}
.swiper-pagination-bullet-active { background: #34495e !important; }

.sph-more-btn {
    background: #234e41; color: #fff; text-decoration: none;
    padding: 10px 20px; border-radius: 5px; font-weight: bold;
}
/* Mobil Cihazlar İçin (768px ve altı) */
@media (max-width: 768px) {
    .sph-main-wrapper {
        height: 400px !important; /* Mobilde çok devasa durmaması için yüksekliği kıstık */
    }

    .sph-overlay {
        padding: 20px; /* İç boşluğu daralttık */
        flex-direction: column; /* Tarih ve yazıyı alt alta aldık */
        align-items: flex-start;
        bottom: 50px; /* Navigasyonun üzerinde kalması için */
    }

    .sph-date-box {
        margin-right: 0;
        margin-bottom: 10px; /* Yazıyla arasına boşluk koyduk */
        padding: 8px 12px;
        min-width: 60px;
    }

    .sph-date-box span { font-size: 10px; }
    .sph-date-box strong { font-size: 18px; }

    .sph-info h2 {
        font-size: 18px !important; /* Mobilde devasa başlıkları küçülttük */
        line-height: 1.2;
    }

    .sph-info p {
        display: none; /* Mobilde ekran kalabalığını önlemek için özeti gizledik (isteğe bağlı) */
    }

    .sph-footer {
        padding: 10px;
        flex-wrap: nowrap; /* Elemanların sığmasını sağlar */
        overflow-x: auto; /* Çok numara varsa kaydırılabilir olsun */
    }

    .swiper-pagination-bullet {
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        font-size: 12px !important;
    }

    .sph-more-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}
@media (max-width: 768px) {
    /* Slider yüksekliğini mobilde sabitliyoruz */
    .sph-main-wrapper {
        height: 450px !important;
    }

    /* Yazı alanını yukarı taşıyoruz ki butonlarla çakışmasın */
    .sph-overlay {
        bottom: 100px !important; /* Butonların çok üstünde durması için yükselttik */
        padding: 15px !important;
        height: auto !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Yazı boyutlarını jilet gibi yapıyoruz */
    .sph-info h2 {
        font-size: 16px !important;
        line-height: 1.2 !important;
        margin-bottom: 5px !important;
    }

    .sph-info p {
        font-size: 12px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Sadece 2 satır göster, gerisini gizle */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Alt siyah barı ve butonları düzenliyoruz */
    .sph-footer {
        flex-direction: column !important; /* Butonlar ve "Tüm Haberler" alt alta */
        padding: 10px 5px !important;
        gap: 10px;
    }

    .custom-pagination {
        display: flex !important;
        flex-wrap: nowrap !important; /* Yan yana kalmaya zorla */
        overflow-x: auto !important; /* Sığmazsa sağa kaydırılabilsin */
        width: 100% !important;
        justify-content: flex-start !important;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
    }

    /* Numaralı butonları küçültüyoruz */
    .swiper-pagination-bullet {
        min-width: 28px !important;
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        font-size: 11px !important;
        margin: 0 3px !important;
        flex-shrink: 0; /* Boyutunun bozulmasını engelle */
    }

    .sph-more-btn {
        width: 100%; /* Mobilde butonu tam genişlik yapıyoruz */
        text-align: center;
        padding: 8px !important;
        font-size: 13px !important;
    }
}
@media (max-width: 767px) {
    /* Konteyner yüksekliğini mobilde daraltalım */
    .sph-main-wrapper {
        height: 350px !important; 
    }

    /* Yazı alanını (Overlay) butonların çok üzerine, güvenli bölgeye taşıyalım */
    .sph-overlay {
        bottom: 80px !important; 
        padding: 15px !important;
        flex-direction: column !important;
        background: linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 100%) !important;
    }

    .sph-info h2 {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    .sph-info p, .sph-date-box {
        display: none !important; /* Mobilde alan kazanmak için tarih ve özeti gizledik */
    }

    /* Alt Bar ve Numaralar: Burası kritik */
    .sph-footer {
        flex-direction: row !important; /* Yan yana kalsınlar */
        height: 60px !important;
        padding: 5px 10px !important;
        background: #000 !important;
        overflow: hidden !important;
    }

    .custom-pagination {
        display: flex !important;
        flex-wrap: nowrap !important; /* ASLA alt satıra geçme */
        overflow-x: auto !important; /* Sığmazsa sağa kaydır */
        width: 65% !important; /* Butonlara alan bırak */
        justify-content: flex-start !important;
        gap: 5px !important;
        scrollbar-width: none; /* Firefox için scroll gizle */
    }

    .custom-pagination::-webkit-scrollbar {
        display: none; /* Chrome/Safari için scroll gizle */
    }

    .swiper-pagination-bullet {
        min-width: 32px !important; /* Parmakla basılabilecek kadar geniş */
        height: 32px !important;
        line-height: 32px !important;
        flex-shrink: 0 !important; /* Küçülmeye zorlanmasın */
        margin: 0 !important;
        background: #333 !important;
        font-size: 12px !important;
        border-radius: 4px !important;
    }

    .sph-more-btn {
        width: 30% !important;
        font-size: 10px !important;
        padding: 8px 5px !important;
        text-align: center;
        white-space: nowrap;
    }
}