/* --- KAYDIRAKLI METİN (HABER BANDI) STİLLERİ --- */

.marquee-wrapper {
    width: 100vw;
    margin-left: calc(-50vw + 50%); /* Tam genişlik (Full-width) garantisi */
    overflow: hidden; /* Taşan yazıları gizler */
    padding: 10px 0;
    font-family: 'Gilroy', 'Inter', sans-serif;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 50;
}

.marquee-track {
    display: flex;
    width: 100%; /* İçeriğin tam oturması için %100 yaptık */
}

/* Kullanıcı fareyle üzerine gelince kaymayı duraklat */
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

.marquee-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-width: 100%; /* Ekranı en az %100 kaplamasını zorunlu kıldık */
    flex-shrink: 0; /* İçerik az olsa bile kutunun daralmasını engeller */
    /* ⚡ Hız ayarını PHP'den gelen CSS değişkeni (--speed) ile alıyoruz */
    animation: scroll-left var(--speed, 30s) linear infinite;
}

.marquee-item {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Cümleler arasına giren ayırıcı nokta (•) */
.marquee-separator {
    margin: 0 30px;
    font-size: 1rem;
    opacity: 0.5;
}

/* 🔄 KESİNTİSİZ KAYMA ANİMASYONU */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%); /* Tam kendi genişliği kadar kayıp başa sarar */
    }
}

/* 📱 MOBİL UYUMLULUK */
@media (max-width: 1024px) {
    .marquee-wrapper {
        padding: 8px 0;
    }
    .marquee-item {
        font-size: 0.75rem;
    }
    .marquee-separator {
        margin: 0 20px;
    }
}