/* assets/gecisli-duyuru-menu.css */
/* Bu dosya, geçişli duyuru şeridine ait tüm CSS kurallarını içerir. */

/* Duyuru şeridinin ana kapsayıcısı */
.announcement-bar {
    background-color: #040021; /* Kurumsal koyu renk */
    color: white;
    padding: 10px 0;
    overflow: hidden; /* Dışarı taşan içeriği gizle */
    position: relative;
    display: flex;
    align-items: center;
    width: 100%; /* Tam genişlik kaplaması için */
}

/* Kayan içeriğin olduğu bölüm */
.announcement-content {
    display: flex; /* Öğeleri yan yana dizmek için flexbox kullan */
    flex-shrink: 0; /* İçeriğin küçülmesini engelle */
    white-space: nowrap; /* Metinlerin alt satıra geçmesini engelle */
    animation: marquee 60s linear infinite; /* Animasyon süresi 40s'den 60s'ye çıkarıldı */
    will-change: transform; /* Tarayıcıya animasyon ipucu verir */
}

/* Fare üzerine gelince animasyonu durdur */
.announcement-bar:hover .announcement-content {
    animation-play-state: paused;
}

/* Her bir duyuru öğesi */
.announcement-item {
    display: inline-flex; /* Öğeleri yan yana diz */
    align-items: center;
    margin: 0 25px; /* Duyurular arası boşluk */
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: white;
    transition: color 0.3s ease;
}

.announcement-item:hover {
    color: #ffc400; /* Kurumsal sarı renk */
    text-decoration: underline;
}

/* İkon stili (Font Awesome varsayılmıştır) */
.announcement-item .fa-tag {
    margin-right: 8px;
    font-size: 16px;
}

/* Kayan yazı (marquee) animasyonu */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        /* announcement-content iki duyuru setini içerdiği için,
            %50 hareket ettirmek, ilk setin genişliği kadar hareket etmek anlamına gelir.
            Bu, kesintisiz bir döngü sağlar. */
        transform: translateX(-50%);
    }
}