@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
        body { font-family: 'Roboto', sans-serif; }
        
        /* Marquee */
        .marquee-container { overflow: hidden; white-space: nowrap; }
        .marquee-content { display: inline-block; animation: marquee 30s linear infinite; }
        @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
        
        /* Slider & Animasyonlar */
        .slide-content { display: none; opacity: 0; transition: opacity 0.6s ease-in-out; }
        .slide-content.active { display: block; opacity: 1; }
        .thumb-btn.active-thumb { border-color: #2563EB; opacity: 1; transform: scale(1.05); }
        .thumb-btn { opacity: 0.6; transition: all 0.3s; cursor: pointer; }
        .thumb-btn:hover { opacity: 1; }

        /* Scrollbar Gizleme */
        .hide-scroll::-webkit-scrollbar { display: none; }
        .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth; }

        /* Kategori İkon Animasyonu */
        .cat-item:hover .cat-icon { background-color: #2563EB; color: white; transform: rotateY(180deg); }
        .cat-icon { transition: all 0.5s; }

        /* Pulse */
        .pulse { animation: pulse-animation 2s infinite; }
        @keyframes pulse-animation {
            0% { box-shadow: 0 0 0 0px rgba(37, 211, 102, 0.5); }
            100% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
        }

        /* Bunu style etiketinin içine ekle */
        .marquee-wrapper { overflow: hidden; white-space: nowrap; }
        .marquee-content { display: flex; animation: scrolling 35s linear infinite; }
        
        @keyframes scrolling {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }


        /* Slide içeriklerini üst üste bindiriyoruz */
        .slide-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0; /* Başlangıçta hepsi şeffaf */
            transition: opacity 1s ease-in-out; /* 1 saniyelik yumuşak geçiş */
            z-index: 1;
        }

        /* Sadece aktif olan slide görünür ve en üstte olur */
        .slide-content.active {
            opacity: 1;
            z-index: 2;
        }

        /* Beyaz parlamayı önlemek için ana taşıyıcıyı siyah yapıyoruz */
        #main-slides {
            background-color: #000;
            height: 100%;
            width: 100%;
            position: relative;
        }


        /* Mobil Yan Menü ve Karartma en üstte olmalı */
        #mobile-sidebar {
            z-index: 100 !important; /* Slider'dan çok daha yüksek bir değer */
        }

        #mobile-overlay {
            z-index: 90 !important;
        }

        /* Slider şeridi menü açıkken arkada kalmalı */
        #thumb-container {
            z-index: 40; /* Zaten 40-50 arasındaydı, menü 100 olduğu için artık arkada kalır */
        }


        /* Haber kartlarının alttaki galeriyle uyumlu genel yapısı */
        .news-card {
            background: #ffffff;
            border: 1px solid #f1f5f9;
            border-radius: 2rem; /* Galeri kartlarıyla aynı ovallik */
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .news-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
        }

        /* Kategori etiketlerini galeri butonlarıyla aynı dile getirir */
        .category-badge {
            font-size: 10px;
            font-weight: 800;
            padding: 6px 14px;
            border-radius: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Kaydırma noktalarını galeri altındaki çizgilerle uyumlu yapar */
        .swiper-pagination-bullet {
            background: #cbd5e1 !important;
            opacity: 1 !important;
            width: 10px;
            height: 10px;
            transition: all 0.3s ease;
        }

        .swiper-pagination-bullet-active {
            background: #2563eb !important; /* Aktif renk */
            width: 25px; /* Uzayan bar efekti */
            border-radius: 5px;
        }