:root {
            --bg-color: #060709;
            --card-base: #12151c;
            --primary-glow: #6366f1;
            --secondary-glow: #ec4899;
    		--ticker-bg: #12151c;
            --accent-color: #93c909;

            --accent-blue: #2c59ff; /* Puan Marketi mavisi */
            --hover-bg: #1e242c;
            
    		--nav-bg: #0b0d12;
            --offcanvas-bg: rgba(18, 21, 28, 0.75); /* %75 Saydamlık */
            --btn-bg: rgba(255, 255, 255, 0.05);
            /* Marka Renkleri */
            --tg-color: #0088cc;
            --ig-color: #e1306c;
            --yt-color: #ff0000;
            --ts-color: #4b53bc;
            --tw-color: #9146ff;
            --kick-color: #53fc18;
            --mail-color: #93c909;
            --xcom-color: #383c46;
	
			--bg-body: #050508;
            --bg-card: #0c0e14;
            --accent-purple: #a855f7;
            --yt-red: #ff0000;
            --tg-blue: #0088cc;
            --dc-purple: #5865F2;
            --text-muted: rgba(255, 255, 255, 0.4);
	
	
			--primary-white: #ffffff;
			--muted-gray: #6b7280;
			--accent-yellow: #bbdd52;
			--accent-orange: #bad85b;
	
	
			--announcement-bg: #0b0d12;
			--label-bg: #bbdd52; 
			--text-white: #f5f5f5;
			--border-rgba: rgba(255, 255, 255, 0.08);
			--bar-height: 45px; /* Yüksekliği tek yerden yönetmek için */
	
	
        }

        body {
            background-color: var(--bg-color);
            color: #ebebeb;
    		font-size: 22px;
            font-family: "Barlow Semi Condensed", sans-serif;
            overflow-x: hidden;
        }

    a {
      color: #e3e5e8;
      text-decoration: none;
      background-color: transparent;
    }

    a:hover {
      color: #bbdd52;
      text-decoration: none;
    }



/* NAVBAR YAPI */
        .custom-navbar {
            background-color: var(--nav-bg);
            border-bottom: 1px solid rgba(255,255,255,0.08);
            padding: 8px 0;
            position: sticky;
            top: 0;
            z-index: 1030;
        }

        /* --- SOSYAL MEDYA BUTONLARI & ORİJİNAL HOVERLAR --- */
        .social-container { display: flex; gap: 10px; }
        .social-box {
            display: flex;
            align-items: center;
            background: var(--btn-bg);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            padding: 8px 16px;
            text-decoration: none;
            color: #fff;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            min-width: 120px;
        }
        .social-box i { font-size: 1.2rem; margin-right: 12px; color: #f5f5f5 }
        .social-box span { font-weight: 700; font-size: 14px; text-transform: uppercase; color: #f5f5f5 }

        /* Orijinal Parlama Hoverları */
        .social-box.tg:hover { background: var(--tg-color); border-color: var(--tg-color); box-shadow: 0 0 20px rgba(0,136,204,0.5); }
        .social-box.ig:hover { background: var(--ig-color); border-color: var(--ig-color); box-shadow: 0 0 20px rgba(225,48,108,0.5); }
        .social-box.xcom:hover { background: var(--xcom-color); border-color: #444; box-shadow: 0 0 20px rgba(255,255,255,0.1); }
        .social-box.ts:hover { background: var(--ts-color); border-color: var(--ts-color); box-shadow: 0 0 20px rgba(75,83,188,0.5); }

        /* --- OFF-CANVAS KESİN ÇÖZÜM (BLUR & YUMUŞAK GEÇİŞ) --- */
        .offcanvas { 
            background-color: var(--offcanvas-bg) !important; 
            width: 320px !important; 
            border-left: 1px solid rgba(255,255,255,0.1);
            /* Glassmorphism / Blur Efekti */
            backdrop-filter: blur(10px) !important; 
            -webkit-backdrop-filter: blur(10px) !important;
            /* Atlamayı engelleyen yumuşak geçiş */
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; 
        }

        /* Başlık yokken X'i sağa yaslayan ve atlamayı önleyen yapı */
        .offcanvas-header { 
            padding: 25px 20px; 
            border-bottom: 1px solid rgba(255,255,255,0.05);
            display: flex;
            justify-content: flex-end; 
        }

        .btn-close-white { 
            filter: invert(1) grayscale(100%) brightness(200%); 
            opacity: 1; 
            transition: 0.3s;
        }
        .btn-close-white:hover { transform: rotate(90deg); }

        /* Mobil Düzen */
        @media (max-width: 991px) {
            .social-container { flex-direction: column; width: 100%; gap: 12px; }
            .social-box { width: 100%; justify-content: flex-start; }
        }
        



.animated-main-title {
        font-family: "Barlow Semi Condensed", sans-serif;
        font-weight: 700;
        font-size: 2.5rem;
        color: var(--primary-white);
        letter-spacing: -1px;
        margin-bottom: 15px;
        text-transform: none;
    }

    /* Parlama (Shimmer) Efekti: "Sponsor" kelimesi için */
    .shimmer-text {
        background: linear-gradient(90deg, #fff, #12151c, #fff);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shimmer 2.5s linear infinite;
    }

    /* Titreme (Flicker) Efekti: "Bahis Siteleri" kelimesi için */
    .flicker-text {
        color: rgba(255, 255, 255, 0.9);
        animation: flicker 2s linear infinite;
        text-shadow: 0 0 10px rgba(255,255,255,0.2);
    }

    /* Alt Başlık: Görseldeki Sarı/Turuncu Geçişli Renk */
    .animated-sub-title {
        font-family: "Barlow Semi Condensed", sans-serif;
        font-weight: 400;
        font-size: 1.5rem;
        background: linear-gradient(to right, var(--accent-yellow), var(--accent-orange));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 0;
        display: inline-block;
        position: relative;
    }

    /* Animasyon Tanımları */
    @keyframes shimmer {
        to { background-position: 200% center; }
    }

    @keyframes flicker {
        0%, 18%, 22%, 25%, 53%, 57%, 100% {
            opacity: 1;
            text-shadow: 0 0 10px rgba(255,255,255,0.3);
        }
        20%, 24%, 55% {
            opacity: 0.5;
            text-shadow: none;
        }
    }

    /* Mobil Uyumluluk */
    @media (max-width: 768px) {
        .animated-main-title {
            font-size: 1.5rem;
        }
        .animated-sub-title {
            font-size: 0.85rem;
            padding: 0 15px;
        }
    }




/* Story Slider Alanı */
    .story-wrapper { width: 100%; display: flex; justify-content: center; }
    .story-container { width: 100%; max-width: 1350px; padding: 0 25px; position: relative; }

    .swiper-slide { 
    display: flex; flex-direction: column; align-items: center; 
    cursor: pointer; width: auto; 
    }


    .story-circle { 
    width: 95px; height: 95px; border-radius: 50%; padding: 6px; 
    border: 1px solid #93c909; background: #12151c;
    }
    .story-circle:hover { 
    transition: transform 0.4s ease;
    }
    .story-circle img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
    .story-title { font-size: 16px; margin-top: 8px; color: #e3e5e8; text-align: center; white-space: nowrap; }

    /* Story Overlay (İzleme Modu) */
    #storyOverlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75); z-index: 10000; justify-content: center; align-items: center;
    }

    .story-window {
    position: relative; width: 100%; max-width: 372px; height: 660px;
    background: #000; border-radius: 15px; overflow: hidden;
    }

    .story-header { position: absolute; top: 15px; left: 10px; right: 10px; z-index: 10005; }
    .progress-bar-bg { height: 2px; background: rgba(255,255,255,0.5); border-radius: 10px; overflow: hidden; }
    .progress-bar-fill { height: 100%; background: #f5f5f5; width: 0%; }
    .run-progress { animation: progressFill 3.1s linear forwards; }

    @keyframes progressFill { from { width: 0%; } to { width: 100%; } }

    .close-btn { position: absolute; top: 25px; right: 15px; color: #fff; font-size: 24px; cursor: pointer; z-index: 10006; }
    .nav-side { position: absolute; top: 0; height: 100%; width: 100%; z-index: 10004; }
    .nav-left { left: 0; }
    .nav-right { right: 0; }
    .main-story-img { width: 100%; height: 100%; object-fit: cover; }

    @media (max-width: 576px) {
    .story-window { height: 100vh; max-width: 100%; border-radius: 0; }
    .story-circle { width: 75px; height: 75px; }
    }





/* 5'li Slider */
.slider-container {
    perspective: 2000px; /* Derinlik hissi artırıldı */
    height: 512px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider {
    position: relative;
    width: 384px; /* Tam görsel genişliği */
    height: 584px; /* Görsel (512) + Alt Metin/Buton Alanı */
    transform-style: preserve-3d;
}

.slider-item {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 0;
    pointer-events: none;
}

.card-custom {
    background: rgba(18,21,28,0.5);
    		backdrop-filter: blur(5px);
    border-radius: 22px;
    border: 1px solid #2a2a2a;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 25px 50px rgba(0,0,0,0.8);
}

.card-custom img {
    width: 100%;
    height: 384px;
    object-fit: contain;
    display: block;
}

.card-body-custom {
    padding: 25px;
	background: rgba(18,21,28,0.5);
    		backdrop-filter: blur(5px);
}

.btn-custom {
    padding: 12px 0;
    transition: 0.3s;
	border-radius: 14px;
    font-weight: 500;
	font-size: 16px;
}

/* --- 5'Lİ KART DİZİLİMİ --- */

.slider-item.active {
    opacity: 1;
    z-index: 10;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

/* Yan Kartlar (Genişlik 512 olduğu için translateX değerleri artırıldı) */
.slider-item.prev {
    opacity: 0.6;
    z-index: 8;
    transform: translateX(-85%) scale(0.8) rotateY(35deg);
}

.slider-item.next {
    opacity: 0.6;
    z-index: 8;
    transform: translateX(85%) scale(0.8) rotateY(-35deg);
}

/* En Dış Kartlar */
.slider-item.far-prev {
    opacity: 0.2;
    z-index: 5;
    transform: translateX(-135%) scale(0.65) rotateY(50deg);
}

.slider-item.far-next {
    opacity: 0.2;
    z-index: 5;
    transform: translateX(135%) scale(0.65) rotateY(-50deg);
}
/* 5'li Slider */





/* --- 3D PERSPECTIVE CONTAINER --- */
        .card-perspective {
            perspective: 1000px; /* 3D derinlik seviyesi */
        }
        
    /* --- VIP Başlık --- */
        .betpro-title {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #93c909;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 20px 0;
			font-size: 1.5rem;
        }
		
        .betpro-title::before, .betpro-title::after {
            content: "";
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, #93c909, transparent);
            margin: 0 10px;
        }

		.betpro-title-star {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #93c909;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 30px 0;
			font-size: 1.05rem;
        }

        /* --- ANA KART YAPISI (BOZULMAYAN EFEKTLER) --- */
        .bet-card {
            
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            padding: 1rem;
            position: relative;
            overflow: hidden;
			background: rgba(18,21,28,0.5);
    		backdrop-filter: blur(5px);
            transition: transform 0.1s ease-out, box-shadow 0.4s ease;
            transform-style: preserve-3d; /* Çocukların 3D katmanlara ayrılmasını sağlar */
            cursor: pointer;
			box-shadow: 0 25px 50px rgba(0,0,0,0.8);
        }

        /* 1. Dinamik Işık Süzmesi (Mouse Takibi) */
        .bet-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(
                circle at var(--x, 50%) var(--y, 50%), 
                rgba(99, 102, 241, 0.15) 0%, 
                transparent 50%
            );
            opacity: 0;
            transition: opacity 0.5s;
            z-index: 1;
        }

        /* 2. Hover'da Arkaplan Mesh Gradient Değişimi */
        .card-mesh {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(236, 72, 153, 0.08) 100%);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 0;
        }

        .bet-card:hover .card-mesh { opacity: 1; }
        .bet-card:hover::before { opacity: 1; }

        .bet-card:hover {
            box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 
                        0 0 20px rgba(99, 102, 241, 0.1);
            border-color: rgba(99, 102, 241, 0.4);
        }


        /* --- İÇERİK DERİNLİĞİ (POP-UP EFEKTİ) --- */
        .card-inner-content {
    width: 100%;
            position: relative;
            z-index: 2;
            transform: translateZ(50px); /* İçeriği kartın yüzeyinden 50px öne çıkarır */
        }

        .logo-box {
            width: 100%;
            height: 80px;
            background: #1a1f26;
            margin: 0 auto 1.1rem;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255,255,255,0.05);
            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

		.card-img-top {
            width: 75% !important;
			}

        .bet-card:hover .logo-box {
            transform: scale(1.02) translateZ(5px);
            border-color: var(--primary-glow);
            box-shadow: 0 15px 30px rgba(99, 102, 241, 0.2);
        }
        
    /* Masaüstünde normal hizalama, mobilde ortalama */
    @media (max-width: 767px) {
    /* Yıldızlar zaten Bootstrap d-none sınıfı ile gizlendi */

    .card-inner-content {
    justify-content: center; /* Mobilde içeriği merkeze çek */
    width: 100%;
    }

    .mx-auto-mobile {
		justify-content: center!important;
		margin-left: auto!important;
		margin-right: auto!important;
	}
    }

/* Bootstrap Butonuna Premium Dokunuş */
        .btn-premium {
            background: #12151c;
            border: 1px solid rgba(255,255,255,0.05);
            color: #fff;
            padding: 12px;
            border-radius: 14px;
            font-weight: 500;
			font-size: 16px;
            transition: all 0.3s;
            transform: translateZ(20px);
        }

    .btn-premium:hover {
            background: linear-gradient(90deg, var(--primary-glow), var(--secondary-glow));
            box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
            border-color: transparent;
            color: #fff;
        }

        .bet-card:hover .btn-premium {
            background: linear-gradient(90deg, var(--primary-glow), var(--secondary-glow));
            box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
            border-color: transparent;
            color: #fff;
        }

        .badge-live {
            background: rgba(51, 59, 68, 0.5);
            color: #888d94;
            font-size: 1.05rem;
            font-weight: 400;
            border-radius: 16px;
    		border-color: rgba(21, 29, 40, 0.2);
			padding: 14px;
        }


        .stars { color: #fbbf24; font-size: 18px; margin-bottom: 2px; }



/* Modal Slider Özel Ayarları */
.modalSwiper {
    width: 100%;
    height: auto;
}

.modalSwiper .swiper-slide img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Sayfalama noktalarını özelleştirme */
.modalSwiper .swiper-pagination-bullet {
    background: #fff !important;
    opacity: 0.5;
}

.modalSwiper .swiper-pagination-bullet-active {
    background: #0088cc !important; /* Tema mavisi */
    opacity: 1;
}

/* Navigasyon okları sadece üzerine gelince daha belirgin olsun */
.modalSwiper .swiper-button-next, 
.modalSwiper .swiper-button-prev {
    width: 45px;
    height: 45px;
    font-weight: bold;
}


/* Footer Özel Stil Ayarları */
        .custom-footer {
            background-color: #0b0e14; /* Koyu arka plan rengi */
            padding: 20px 0;
            border-top: 1px solid #1a1d24;
            color: #888d94; /* Genel metin rengi */
            font-size: 1.05rem;
        }

        .footer-brand {
            color: #93c909; /* Sarı marka rengi */
            font-weight: 400;
            text-decoration: none;
        }

        /* Sağ taraftaki rozet (badge) stilleri */
        .footer-badge {
            display: inline-flex;
            align-items: center;
            padding: 6px 16px;
            border-radius: 8px;
            font-weight: 400;
            font-size: 18px;
            border: 1px solid transparent;
        }

        .badge-18plus {
            color: #dc3545;
        }


        .badge-safe {
            color: #198754;
        }

        .footer-badge i {
            margin-right: 8px;
        }

        /* Mobil uyumluluk için hizalama */
        @media (max-width: 768px) {
            .footer-content {
                text-align: center;
                flex-direction: column;
                gap: 15px;
            }
        }
        


/* ANA taşıyıcı: Mouse hareketini takip edecek */
    #custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    pointer-events: none; /* Tıklamaları engellememesi için şart */
    z-index: 9999;
    transform: translate(-50%, -50%);
    display: none; /* Başlangıçta gizli, mouse hareket edince görünecek */
    }

    /* Merkezdeki parlak kırmızı nokta */
    .cursor-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #bbdd52;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #ff0000;
    }

    /* Dışarıya doğru yayılan halka (Pulse Efekti) */
    .cursor-pulse {
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: rgba(189, 229, 62, 0.75);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: cursorPulseAnim 4s infinite ease-out;
    }

    /* Animasyon Tanımı */
    @keyframes cursorPulseAnim {
    0% {
    width: 10px;
    height: 10px;
    opacity: 0.8;
    }
    100% {
    width: 40px;
    height: 40px;
    opacity: 0;
    }
    }
/* Mobilde Custom Cursor'ı Devre Dışı Bırak */
@media (max-width: 991.98px) {
    #custom-cursor {
        display: none !important;
    }
}
@media (hover: none) and (pointer: coarse) {
    #custom-cursor {
        display: none !important;
    }
}

    /* Gerçek mouse imlecini gizlemek istersen (isteğe bağlı) */
    /* body { cursor: none; } */



/* YUKARI ÇIK BUTONU TASARIMI */
        #backToTop {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 45px;
            height: 45px;
            background-color: #bbdd52; /* Görseldeki yeşil tonu */
            color: white;
            border-radius: 50%; /* Tam yuvarlak */
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 18px;
			font-weight: bold;
            z-index: 9999;
            transition: all 0.3s ease;
            opacity: 0; /* Başlangıçta gizli */
            visibility: hidden;
            border: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

        /* Butonun görünür hali */
        #backToTop.show {
            opacity: 1;
            visibility: visible;
        }

        #backToTop:hover {
            background-color: #83aa0b;
            transform: translateY(-5px); /* Hafif yukarı zıplama efekti */
        }
        
    /* Mobil uyumluluk için hizalama */
        @media (max-width: 768px) {
            #backToTop {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 35px;
            height: 35px;
            background-color: #28a745; /* Görseldeki yeşil tonu */
            color: white;
            border-radius: 50%; /* Tam yuvarlak */
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 14px;
            z-index: 9999;
            transition: all 0.3s ease;
            opacity: 0; /* Başlangıçta gizli */
            visibility: hidden;
            border: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            }
    }


.announcement-bar {
        background-color: var(--announcement-bg);
        border: 1px solid var(--border-rgba);
        height: var(--bar-height);
        border-radius: 12px;
        display: flex;
        align-items: center;
        overflow: hidden;
        position: relative;
    }

    .announcement-label {
        background-color: var(--label-bg);
        color: #12151c;
        height: 100%;
        padding: 0 20px;
        display: flex;
        align-items: center;
        font-weight: 700;
        font-size: 16px;
        letter-spacing: -0.25px;
        z-index: 2;
        white-space: nowrap;
    }

    .announcement-content {
        flex: 1;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .ticker-wrapper {
        position: absolute;
        width: 100%;
        top: 0;
        left: 20px;
        /* Cubic-bezier geçişi daha yumuşak (premium) hissettirir */
        transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    }

    .ticker-item {
        height: var(--bar-height);
        display: flex;
        align-items: center;
        color: rgba(255, 255, 255, 0.9);
        font-size: 18px;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .announcement-time {
        padding: 0 20px;
        color: rgba(255, 255, 255, 0.4);
        font-size: 14px;
        font-weight: 500;
        border-left: 1px solid var(--border-rgba);
        white-space: nowrap;
    }

    @media (max-width: 576px) {
        .announcement-label span { display: none; }
        .announcement-label { padding: 0 15px; }
        .ticker-item { font-size: 12px; }
    }







        /* Ana Konteyner Tasarımı */
        .quick-access-box {
            background-color: #080a10;
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 24px;
            padding: 25px;
        }

        .access-section-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 25px;
            font-weight: 800;
            font-size: 20px;
        }

        .access-section-header i {
            color: var(--accent-purple);
            filter: drop-shadow(0 0 8px var(--accent-purple));
        }

        /* Kart Tasarımı */
        .access-card {
            background: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.03);
            border-radius: 18px;
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            transition: all 0.3s ease;
            height: 100%;
        }

        .access-card:hover {
            border-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-5px);
            background: #12151c;
        }

        .card-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .icon-box {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        .info-box {
            display: flex;
            flex-direction: column;
        }

        .label-top {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .access-main-title {
            font-size: 16px;
            font-weight: 500;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        /* Butonlar */
        .action-btn {
            border: none;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 800;
            padding: 8px 16px;
            color: #fff;
            transition: 0.3s;
            text-decoration: none;
        }

        .btn-yt { background: var(--yt-red); box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3); }
        .btn-tg { background: var(--tg-blue); box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3); }
        .btn-dc { background: var(--dc-purple); box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3); }

        .action-btn:hover {
            filter: brightness(1.2);
            color: #fff;
        }

        /* Yeni Rozeti */
        .access-new-badge {
            position: absolute;
            top: -10px;
            right: 15px;
            background: #00d26a;
            color: #fff;
            font-size: 9px;
            font-weight: 900;
            padding: 2px 8px;
            border-radius: 20px;
            z-index: 2;
            box-shadow: 0 0 10px rgba(0, 210, 106, 0.4);
        }

        @media (max-width: 576px) {
            .main-title { max-width: 140px; }
        }



/* --- PREMIUM 2'Lİ BANNER --- */
.banner-link { text-decoration: none; display: block; }
.banner-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.banner-wrapper img { width: 100%; transition: transform 0.6s ease; }
.banner-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    border-color: #0088cc;
}
.banner-wrapper:hover img { transform: scale(1.05); }

/* Örnek Sitedeki Parlama (Glare) Efekti */
.banner-glare {
    position: absolute;
    top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
}
.banner-wrapper:hover .banner-glare {
    animation: shineEffect 0.8s forwards;
}
@keyframes shineEffect {
    100% { left: 150%; }
}







/* --- 2'Lİ YATAY BANNER TASARIMI --- */
.pro-banner {
    display: block;
    text-decoration: none;
    outline: none;
}

.pro-banner-inner {
    position: relative;
    width: 100%;
    border-radius: 15px; /* Köşe ovalliği */
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pro-banner-inner img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* Hover Efektleri: Yükselme ve Zoom */
.pro-banner:hover .pro-banner-inner {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 136, 204, 0.5); /* Marka rengin */
}

.pro-banner:hover .pro-banner-inner img {
    transform: scale(1.05);
}

/* 60bonuspops.site'daki Parlama (Shine) Efekti */
.pro-banner-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    z-index: 2;
}

.pro-banner:hover .pro-banner-shine {
    animation: proShine 0.75s forwards;
}

@keyframes proShine {
    100% {
        left: 125%;
    }
}

/* Mobil için boşluk ayarı */
@media (max-width: 767.98px) {
    .pro-banner-inner {
        border-radius: 12px;
    }
}