/* =========================================
   avc01
   ========================================= */
:root {
    --color-bg-body: #0d0d0d !important;
    --color-bg-sidebar: #111111 !important;
    --color-bg-card: #171717 !important;
    --color-bg-elevated: #1f1f1f !important;
    --color-bg-deep: #050505 !important;
    
    --color-brand-primary: #007BD9 !important;
    --color-brand-primary-dark: #005fa8 !important;
    --color-brand-primary-deeper: #002B4D !important;
    --color-brand-secondary: #00D6D6 !important;
    
    --theme-gradient: linear-gradient(135deg, #00D6D6 0%, #007BD9 50%, #005fa8 100%) !important;
    --theme-gradient-hover: linear-gradient(135deg, #33e5e5 0%, #00D6D6 40%, #007BD9 100%) !important;
    
    --color-border: rgba(0, 123, 217, 0.15) !important;
    --color-border-light: rgba(0, 214, 214, 0.15) !important;
    --color-border-subtle: rgba(255, 255, 255, 0.05) !important;
    
    --color-text-bright: #ffffff !important;
    --color-text-light: #e0e0e0 !important;
    --color-text-dim: #8a8a8a !important;
}

/* =========================================
   2. TAILWIND SINIFLARINI GEÇERSİZ KILMA
   (Eski Yeşil, Kırmızı, Sarı ve Morları Temizler)
   ========================================= */
.text-emerald-400, .text-emerald-500, .text-orange-400, .text-blue-400, .text-blue-500 { 
    color: var(--color-brand-secondary) !important; 
}
.bg-emerald-500\/10, .bg-emerald-500\/15, .bg-emerald-500\/20,
.bg-orange-500\/10, .bg-orange-500\/15, .bg-orange-500\/20,
.bg-blue-500\/10, .bg-blue-500\/15, .bg-blue-500\/20, .bg-blue-500\/5 {
    background-color: rgba(0, 214, 214, 0.12) !important;
}
.border-emerald-500\/20, .border-orange-500\/20, .border-blue-500\/20, .border-red-500\/20 {
    border-color: rgba(0, 214, 214, 0.25) !important;
}
.from-emerald-500, .from-orange-500, .from-blue-500, .from-emerald-600, .from-blue-600 {
    --tw-gradient-from: #00D6D6 !important;
    --tw-gradient-to: rgba(0, 214, 214, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-teal-700, .to-amber-600, .to-indigo-700, .to-teal-600, .to-amber-500, .to-indigo-600 {
    --tw-gradient-to: #007BD9 !important;
}
.via-emerald-500, .via-indigo-500, .via-teal-500 {
    --tw-gradient-stops: var(--tw-gradient-from), #007BD9, var(--tw-gradient-to) !important;
}
.shadow-emerald-900\/40, .shadow-orange-900\/40, .shadow-blue-900\/40,
.shadow-emerald-600\/20, .shadow-blue-600\/20 {
    box-shadow: 0 10px 25px -5px rgba(0, 123, 217, 0.4), 0 8px 10px -6px rgba(0, 123, 217, 0.1) !important;
}

/* =========================================
   3. GENEL GÖRÜNÜM & HEADER
   ========================================= */
body, .main-content, #app {
    background-color: var(--color-bg-body) !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(0, 123, 217, 0.05) 0%, transparent 60%) !important;
    color: var(--color-text-light);
}

header.bg-bg-card {
    background: rgba(23, 23, 23, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
}

/* =========================================
   4. ÜST MENÜ BUTONLARI (API'den Gelenleri Ezme)
   ========================================= */
#top-menu-buttons a {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Telegram, Günlük Ödüller, Şans Çarkı (Eski Sarı Butonlar) */
#top-menu-buttons a[style*="#ffea00"],
#top-menu-buttons a[href*="t.me"],
#top-menu-buttons a[href*="gunluk-oduller"],
#top-menu-buttons a[href*="sans-carki"] {
    background: linear-gradient(135deg, #00D6D6 0%, #007BD9 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0, 123, 217, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
#top-menu-buttons a[style*="#ffea00"]:hover,
#top-menu-buttons a[href*="t.me"]:hover,
#top-menu-buttons a[href*="gunluk-oduller"]:hover,
#top-menu-buttons a[href*="sans-carki"]:hover {
    background: linear-gradient(135deg, #33e5e5 0%, #00D6D6 40%, #007BD9 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 214, 214, 0.4) !important;
}

/* Dünya Kupası (Eski Mor Buton) */
#top-menu-buttons a[style*="#570080"],
#top-menu-buttons a[style*="#ff9500"],
#top-menu-buttons a[href*="score"] {
    background: linear-gradient(160deg, #1f1f1f 0%, #0a0a0c 100%) !important;
    color: #00D6D6 !important;
    border: 1px solid #007BD9 !important;
    box-shadow: 0 4px 15px rgba(0, 123, 217, 0.25) !important;
}
#top-menu-buttons a[style*="#570080"]:hover,
#top-menu-buttons a[style*="#ff9500"]:hover,
#top-menu-buttons a[href*="score"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 123, 217, 0.4) !important;
    border-color: #00D6D6 !important;
}

/* =========================================
   5. ORTAK BUTTON & LİNK STİLLERİ
   ========================================= */
.bg-gradient-to-r.from-brand-primary.to-brand-primary-dark,
button[onclick*="AuthModal('register')"],
.bf-detail-btn, .popup-btn-dismiss {
    background: var(--theme-gradient) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 123, 217, 0.35), inset 0 1px 1px rgba(255,255,255,0.3) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
.bg-gradient-to-r.from-brand-primary.to-brand-primary-dark:hover,
button[onclick*="AuthModal('register')"]:hover,
.bf-detail-btn:hover, .popup-btn-dismiss:hover {
    background: var(--theme-gradient-hover) !important;
    box-shadow: 0 6px 25px rgba(0, 214, 214, 0.5), inset 0 1px 1px rgba(255,255,255,0.5) !important;
}

/* =========================================
   6. SİDEBAR (Sol Menü)
   ========================================= */
#sidebar {
    background: rgba(17, 17, 17, 0.95) !important;
    backdrop-filter: blur(15px);
    border-right: 1px solid var(--color-border) !important;
}
#sidebar .nav-card, #sidebar .list-item { transition: all 0.3s ease !important; }
#sidebar .nav-card:hover, #sidebar .list-item:hover {
    background: rgba(0, 123, 217, 0.08) !important;
    border-color: rgba(0, 123, 217, 0.4) !important;
    transform: translateX(4px);
}
#sidebar .nav-card[style*="background: linear-gradient"] {
    background: var(--theme-gradient) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 123, 217, 0.3) !important;
}
#sidebar .nav-card[style*="background: linear-gradient"] svg { color: #ffffff !important; }
.sidebar-content::-webkit-scrollbar { width: 4px; }
.sidebar-content::-webkit-scrollbar-track { background: transparent; }
.sidebar-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

/* =========================================
   7. CANLI SOHBET (Sağ Sidebar)
   ========================================= */
#chat-sidebar {
    background: rgba(17, 17, 17, 0.95) !important;
    backdrop-filter: blur(25px) !important;
    border-left: 1px solid var(--color-border) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8) !important;
}
#chat-sidebar > div:first-child {
    background: linear-gradient(135deg, rgba(0, 123, 217, 0.08) 0%, transparent 100%) !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
}
.chat-scroll::-webkit-scrollbar { width: 5px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
.chat-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

.chat-mod-tag {
    display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px; border-radius: 3px;
    font-size: 8px; font-weight: 700; letter-spacing: 0.5px; line-height: 1;
    color: var(--color-brand-secondary) !important;
    background: rgba(0, 214, 214, 0.12) !important;
    border: 1px solid rgba(0, 214, 214, 0.15) !important;
    vertical-align: middle;
}
.chat-time-inside { position: absolute; bottom: 4px; right: 8px; font-size: 10px; color: rgba(255,255,255,0.35); display: flex; align-items: center; gap: 1px; line-height: 1; pointer-events: none; }
.chat-username-clickable { cursor: pointer; transition: opacity 0.15s; }
.chat-username-clickable:hover { opacity: 0.8; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }

#chat-input-wrap input {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(0, 123, 217, 0.2) !important;
    color: #ffffff !important;
}
#chat-input-wrap input:focus {
    border-color: var(--color-brand-secondary) !important;
    background: rgba(0, 123, 217, 0.05) !important;
    box-shadow: 0 0 12px rgba(0, 214, 214, 0.2);
}

/* =========================================
   8. MARQUEE (Kayan Butonlar)
   ========================================= */
.marquee-wrapper > div.absolute { background: linear-gradient(to right, #111111, transparent) !important; }
.marquee-wrapper > div.absolute.right-0 { background: linear-gradient(to left, #111111, transparent) !important; }

.marquee-pill {
    background: rgba(23, 23, 23, 0.8) !important;
    border: none !important;
    backdrop-filter: blur(8px);
    overflow: hidden;
}
.marquee-pill-border { border: 1px solid rgba(0, 123, 217, 0.2) !important; transition: border-color 0.3s; }
.marquee-pill:hover .marquee-pill-border { border-color: rgba(0, 214, 214, 0.4) !important; }
.marquee-pill:hover {
    background: rgba(0, 123, 217, 0.1) !important;
    box-shadow: 0 0 20px rgba(0, 214, 214, 0.15) !important;
}
.marquee-pill::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    z-index: 0; animation: marquee-shine 6s ease-in-out infinite;
    animation-delay: var(--shine-delay, 0s);
}
@keyframes marquee-shine {
    0%, 100% { left: -100%; opacity: 0; }
    10% { opacity: 1; }
    40% { left: 150%; opacity: 0; }
    41%, 100% { opacity: 0; left: -100%; }
}

/* =========================================
   9. KARTLAR (Site Cards, Bonus Cards)
   ========================================= */
.bg-bg-card, .ss-card, .site-card, .bonus-item, .from-bg-card, .bf-slide .relative {
    background: linear-gradient(160deg, #1f1f1f 0%, #171717 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative;
    overflow: hidden;
}

.ss-card-bg { background: radial-gradient(ellipse at 50% 0%, rgba(0,123,217,0.04) 0%, transparent 70%) !important; }
.ss-card:hover .ss-card-bg { background: radial-gradient(ellipse at 50% 0%, rgba(0,214,214,0.1) 0%, transparent 70%) !important; }

.ss-card:hover, .site-card:hover, .bonus-item:hover {
    border-color: rgba(0, 214, 214, 0.4) !important;
    background: linear-gradient(160deg, #242424 0%, #1c1c1c 100%) !important;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 123, 217, 0.15) !important;
    transform: translateY(-5px);
}

.ss-card.ss-highlight {
    border-color: rgba(0, 214, 214, 0.45) !important;
    box-shadow: 0 0 25px rgba(0, 123, 217, 0.15), 0 0 50px rgba(0, 214, 214, 0.06), inset 0 1px 0 rgba(0, 214, 214, 0.1) !important;
    transform: translateY(-2px);
}
.ss-card.ss-highlight .ss-card-bg { background: radial-gradient(ellipse at 50% 0%, rgba(0,214,214,0.15) 0%, rgba(0,123,217,0.03) 50%, transparent 80%) !important; }
.ss-card.ss-highlight img { filter: drop-shadow(0 0 12px rgba(0, 214, 214, 0.3)); }

.ss-icon-pulse { animation: ss-iconGlow 3s ease-in-out infinite; }
@keyframes ss-iconGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 214, 214, 0); }
    50% { box-shadow: 0 0 12px 2px rgba(0, 214, 214, 0.15); }
}

/* =========================================
   10. KATEGORİ FİLTRELERİ (Score & Bonus)
   ========================================= */
.score-filter-tab, .bl-filter {
    background: transparent !important;
    color: var(--color-text-dim) !important;
    border: 1px solid transparent !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.score-filter-tab:hover:not(.active), .bl-filter:hover:not(.active) {
    background: rgba(0, 123, 217, 0.08) !important;
    color: var(--color-brand-secondary) !important;
    border-color: rgba(0, 214, 214, 0.25) !important;
    transform: translateY(-1px);
}
.score-filter-tab.active, .bl-filter.active {
    background: var(--theme-gradient) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0, 123, 217, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px);
}

/* =========================================
   11. GÜNLÜK ÖDÜLLER (Daily Rewards)
   ========================================= */
#daily-rewards-section {
    background: linear-gradient(145deg, #1c1c1c 0%, #111111 100%) !important;
    border: 1px solid var(--color-border-light) !important;
    box-shadow: inset 0 0 60px rgba(0, 123, 217, 0.03) !important;
}
#dr-days > div.border-brand-primary\/20 {
    background: linear-gradient(135deg, rgba(0, 123, 217, 0.15), rgba(0, 214, 214, 0.03)) !important;
    border-color: var(--color-brand-primary) !important;
    box-shadow: 0 0 15px rgba(0, 123, 217, 0.15);
}
.dr-scroll::-webkit-scrollbar { display: none; }
.dr-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* =========================================
   12. BİLDİRİM (Notifications) VE DROPDOWN
   ========================================= */
#notif-dropdown, #user-dropdown {
    background: rgba(23, 23, 23, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid var(--color-border) !important;
}

/* =========================================
   13. MOBİL ALT MENÜ (Bottom Nav)
   ========================================= */
#mobile-bottom-nav { background: rgba(17, 17, 17, 0.92) !important; }
.mobile-nav-item { color: rgba(161,161,170,0.6); -webkit-tap-highlight-color: transparent; }
.mobile-nav-item.active { color: var(--color-brand-secondary) !important; }
.mobile-nav-item.active .mobile-nav-icon-wrap {
    background: rgba(0, 214, 214, 0.15) !important;
    box-shadow: 0 0 20px rgba(0, 214, 214, 0.25), 0 0 8px rgba(0, 214, 214, 0.15) !important;
}
.mobile-nav-item.active::before {
    content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 24px; height: 2px;
    background: var(--color-brand-secondary); border-radius: 0 0 4px 4px;
    box-shadow: 0 0 12px rgba(0, 214, 214, 0.6), 0 0 4px rgba(0, 214, 214, 0.4);
}
.mobile-nav-item:active .mobile-nav-icon-wrap { background: rgba(255, 255, 255, 0.08); transform: scale(0.92); }

/* =========================================
   14. AUTH MODAL (Giriş / Kayıt Ol) & IŞIKLAR
   ========================================= */
.auth-backdrop { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); }
.auth-card {
    background: linear-gradient(165deg, rgba(23, 23, 23, 0.97) 0%, rgba(17, 17, 17, 0.99) 50%, rgba(13, 13, 13, 0.98) 100%) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 24px 80px rgba(0, 0, 0, 0.6), 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
.auth-top-line { background: linear-gradient(90deg, transparent 0%, rgba(0, 214, 214, 0.5) 20%, rgba(0, 123, 217, 0.4) 50%, rgba(0, 214, 214, 0.5) 80%, transparent 100%) !important; }
.auth-tab-indicator { background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); }

.auth-input-glow { background: linear-gradient(135deg, rgba(0, 123, 217, 0.15), rgba(0, 123, 217, 0.05), rgba(0, 214, 214, 0.1)) !important; border-radius: 12px; filter: blur(1px); }
.auth-input-glow-green { background: linear-gradient(135deg, rgba(0, 214, 214, 0.15), rgba(0, 214, 214, 0.05), rgba(0, 123, 217, 0.1)) !important; border-radius: 12px; filter: blur(1px); }

.auth-btn-shimmer {
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 75%);
    background-size: 250% 100%;
    animation: auth-shimmer 4s ease-in-out infinite;
}
@keyframes auth-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.auth-icon-float { animation: auth-icon-bob 3s ease-in-out infinite; }
@keyframes auth-icon-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.auth-orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; }
.auth-orb-1 { width: 200px; height: 200px; background: radial-gradient(circle, rgba(0, 214, 214, 0.15) 0%, transparent 70%); top: 10%; left: 10%; animation: auth-orb-drift-1 8s ease-in-out infinite; }
.auth-orb-2 { width: 160px; height: 160px; background: radial-gradient(circle, rgba(0, 123, 217, 0.1) 0%, transparent 70%); bottom: 20%; right: 10%; animation: auth-orb-drift-2 10s ease-in-out infinite; }
.auth-orb-3 { width: 120px; height: 120px; background: radial-gradient(circle, rgba(0, 214, 214, 0.08) 0%, transparent 70%); top: 50%; right: 30%; animation: auth-orb-drift-3 12s ease-in-out infinite; }

@keyframes auth-orb-drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -20px) scale(1.1); } 66% { transform: translate(-15px, 15px) scale(0.9); } }
@keyframes auth-orb-drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-25px, 15px) scale(0.95); } 66% { transform: translate(20px, -25px) scale(1.05); } }
@keyframes auth-orb-drift-3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, 20px); } }

.auth-modal-enter { animation: auth-modal-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes auth-modal-enter { 0% { opacity: 0; transform: scale(0.92) translateY(16px); filter: blur(4px); } 100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } }

.auth-stagger { animation: auth-stagger-in 0.4s ease-out both; }
@keyframes auth-stagger-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }

.verify-digit.filled { border-color: rgba(0, 214, 214, 0.5) !important; background: rgba(0, 214, 214, 0.05) !important; box-shadow: 0 0 16px rgba(0, 214, 214, 0.1); }
.duration-400 { transition-duration: 400ms; }

@media (max-width: 639px) {
    #auth-modal > .auth-modal-enter { height: 100%; display: flex; flex-direction: column; }
    #auth-modal .auth-card { flex: 1; display: flex; flex-direction: column; min-height: 100%; }
    #auth-modal .auth-card > .relative.z-10 { flex: 1; display: flex; flex-direction: column; }
    @keyframes auth-modal-enter { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(0); } }
    .auth-orb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-modal-enter, .auth-stagger, .auth-icon-float, .auth-btn-shimmer, .auth-orb { animation: none !important; }
}

/* =========================================
   15. POPUP MODAL (Karşılama/Reklam Popup)
   ========================================= */
.popup-modal-wrap{ position:fixed;inset:0;z-index:200; display:none;align-items:center;justify-content:center; background:rgba(0,0,0,.0); backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); transition:background .45s ease, backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease; }
.popup-modal-wrap.is-visible{ display:flex; background:rgba(0,0,0,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.popup-ambient{ position:absolute; width:340px;height:420px; border-radius:50%; background:radial-gradient(circle, rgba(0,214,214,.18) 0%, transparent 70%) !important; filter:blur(60px); pointer-events:none; opacity:0; transition:opacity .8s ease .15s; }
.popup-modal-wrap.is-visible .popup-ambient{opacity:1;}
.popup-container{ position:relative; width:100%;max-width:370px; padding:0 16px; opacity:0; transform:scale(.88) translateY(24px); transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
.popup-modal-wrap.is-visible .popup-container{ opacity:1;transform:scale(1) translateY(0); }

.popup-card{ border-radius:12px; overflow:hidden; background:var(--color-bg-card); border:1px solid rgba(255,255,255,.07); box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 8px 40px rgba(0,0,0,.55), 0 2px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05); }

.popup-progress-wrap{ position:relative;height:3px; background:rgba(255,255,255,.04); overflow:hidden; display:none; }
.popup-progress-wrap.is-active{display:block;}
.popup-progress-bar{ height:100%;width:0%; background:linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-secondary)) !important; border-radius:0 2px 2px 0; transition:width .15s linear; }

.popup-slider-viewport{ position:relative;width:100%; overflow:hidden; background:#0d0d0d; }
.popup-slides{ display:flex;height:100%; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.popup-slides>*{ flex:0 0 100%;min-width:100%;height:100%;display:block; }
.popup-slides img{ width:100%;height:100%; object-fit:cover;display:block; -webkit-user-drag:none; }

.popup-nav{ position:absolute;top:50%;transform:translateY(-50%); width:36px;height:36px; display:none;align-items:center;justify-content:center; border-radius:50%; background:rgba(0,0,0,.45); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.8); cursor:pointer; transition:all .2s ease; opacity:0; }
.popup-slider-viewport:hover .popup-nav{opacity:1;}
.popup-nav:hover{ background:rgba(0,0,0,.7); color:#fff; border-color:rgba(255,255,255,.15); }
.popup-nav-prev{left:8px;}
.popup-nav-next{right:8px;}
.popup-nav.is-visible{display:flex;}

.popup-bottom{ padding:10px 12px 12px; display:flex; flex-direction:column; align-items:center; gap:10px; background:var(--color-bg-card); }
.popup-dots{ display:none; align-items:center; gap:6px; }
.popup-dots.is-visible{display:flex;}
.popup-dot{ width:7px;height:7px; border-radius:10px; background:rgba(255,255,255,.15); border:none;cursor:pointer; transition:all .35s cubic-bezier(.4,0,.2,1); }
.popup-dot:hover{background:rgba(255,255,255,.3);}
.popup-dot.is-active{ width:24px; background:linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-secondary)) !important; box-shadow:0 0 10px rgba(0,214,214,.35) !important; }

.popup-actions{ display:flex; gap:8px; width:100%; }
.popup-btn{ flex:1; padding:10px 0; border-radius:8px; border:none; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s ease; letter-spacing:.01em; }
.popup-btn-close{ background:rgba(255,255,255,.07); color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.08); }
.popup-btn-close:hover{ background:rgba(255,255,255,.12); color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.15); }

.popup-btn-dismiss{ background:rgba(0,123,217,.12) !important; color:var(--color-brand-secondary) !important; border:1px solid rgba(0,123,217,.2) !important; }
.popup-btn-dismiss:hover{ background:rgba(0,214,214,.2) !important; border-color:rgba(0,214,214,.35) !important; color:var(--color-brand-secondary) !important; }

.popup-modal-wrap.is-closing .popup-container{ opacity:0; transform:scale(.92) translateY(12px); transition:opacity .25s ease, transform .25s ease; }
.popup-modal-wrap.is-closing{ background:rgba(0,0,0,0); backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); transition:background .3s ease .1s, backdrop-filter .3s ease .1s; }

@keyframes popup-shimmer{ 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }
.popup-slides img{position:relative;}
.popup-slide-wrap{position:relative;overflow:hidden;height:100%;}
.popup-slide-wrap::after{ content:''; position:absolute;inset:0; background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%); transform:translateX(-100%); animation:popup-shimmer 1.8s ease .6s 1 forwards; pointer-events:none; }
@media(min-width:480px){ .popup-container{max-width:400px;} }

/* =========================================
   16. AD BANNER (Kenar Reklamları)
   ========================================= */
.ad-banner { display: none; position: fixed; top: calc(56px + 12px); height: calc(100vh - 56px - 24px); z-index: 20; overflow: hidden; }
.ad-banner a { display: block; width: 100%; height: 100%; cursor: pointer; }
.ad-banner img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; display: block; opacity: 0.9; transition: opacity 0.2s; }
.ad-banner img:hover { opacity: 1; }

/* =========================================
   17. FOOTER BÖLÜMÜ
   ========================================= */
.site-footer {
    background: #0d0d0d !important;
    border-top: 1px solid var(--color-border) !important;
}
.footer-inner { width: 100%; max-width: 1400px; margin: 0 auto; padding: 28px 16px; box-sizing: border-box; }
.footer-brand { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--color-border-subtle); }
.footer-logo { height: 26px; object-fit: contain; margin-bottom: 10px; }
.footer-desc { color: var(--color-text-dim); font-size: 12px; line-height: 1.6; margin: 0 0 14px 0; }
.footer-socials { display: flex; gap: 6px; flex-wrap: wrap; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px 0; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--color-border-subtle); }
.footer-col { width: 50%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
.footer-col:last-child { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 6px 20px; }
.footer-col:last-child .footer-col-title { width: 100%; }
.footer-col-title { color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 4px 0; }
.footer-col a { color: var(--color-text-dim); font-size: 12px; text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: var(--color-brand-secondary); }
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.footer-bottom span { color: var(--color-text-dim); font-size: 10px; }
.footer-bottom-links { display: flex; gap: 16px; }
.footer-bottom-links a { color: var(--color-text-dim); font-size: 10px; text-decoration: none; transition: color 0.2s; }
.footer-bottom-links a:hover { color: var(--color-brand-secondary); }

@media (min-width: 640px) {
    .footer-inner { padding: 40px 24px; }
    .footer-logo { height: 32px; }
    .footer-desc { font-size: 13px; max-width: 320px; }
    .footer-links { gap: 32px; flex-wrap: nowrap; }
    .footer-col { width: auto; flex: 1; }
    .footer-col:last-child { width: auto; flex-direction: column; flex: 1; }
    .footer-col:last-child .footer-col-title { width: auto; }
    .footer-col-title { font-size: 12px; margin-bottom: 8px; }
    .footer-col a { font-size: 13px; }
    .footer-bottom { flex-direction: row; justify-content: space-between; }
    .footer-bottom span, .footer-bottom-links a { font-size: 11px; }
}

@media (min-width: 1024px) {
    .footer-inner { padding: 48px 32px; display: grid; grid-template-columns: 280px 1fr; grid-template-rows: auto auto; gap: 0 48px; }
    .footer-brand { border-bottom: none; margin-bottom: 0; padding-bottom: 0; grid-row: 1; }
    .footer-links { border-bottom: none; margin-bottom: 0; padding-bottom: 0; grid-row: 1; }
    .footer-bottom { grid-column: 1 / -1; grid-row: 2; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border-subtle); }
    .footer-col a { font-size: 14px; }
    .footer-bottom span, .footer-bottom-links a { font-size: 12px; }
}
/* =========================================
   GLASSMORPHISM KARTLAR (.ss-card, .site-card, .bonus-item)
   ========================================= */

/* 1. Temel Cam Görünümü */
.ss-card, .site-card, .bonus-item {
    background: linear-gradient(135deg, rgba(23, 23, 25, 0.5) 0%, rgba(10, 10, 12, 0.8) 100%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border-radius: 16px !important;
}

/* 2. Kart İçi Sabit Işık */
.ss-card-bg { 
    background: radial-gradient(ellipse at 50% 0%, rgba(0, 123, 217, 0.1) 0%, transparent 70%) !important; 
    opacity: 0.6 !important;
    transition: opacity 0.5s ease, background 0.5s ease !important;
}

/* HTML İÇİNDEKİ ESKİ YEŞİL SATIRI EZMEK İÇİN ZORUNLU KURAL */
.ss-card div[style*="radial-gradient(circle at 50% 40%"],
.ss-card div[style*="38,186,193"] {
    background: radial-gradient(circle at 50% 40%, rgba(0, 214, 214, 0.15) 0%, transparent 70%) !important;
}

/* 3. Kart Hover (Üzerine Gelince) Durumu */
.ss-card:hover, .site-card:hover, .bonus-item:hover {
    background: linear-gradient(135deg, rgba(30, 30, 35, 0.7) 0%, rgba(15, 15, 18, 0.95) 100%) !important;
    border-color: rgba(0, 214, 214, 0.3) !important;
    border-top-color: rgba(0, 214, 214, 0.6) !important;
    border-left-color: rgba(0, 123, 217, 0.4) !important;
    box-shadow: 
        0 15px 35px -5px rgba(0, 0, 0, 0.9), 
        0 0 25px rgba(0, 123, 217, 0.2), 
        inset 0 1px 10px rgba(0, 214, 214, 0.15) !important;
    transform: translateY(-5px) !important;
}

.ss-card:hover .ss-card-bg {
    background: radial-gradient(ellipse at 50% 0%, rgba(0, 214, 214, 0.25) 0%, transparent 70%) !important; 
    opacity: 1 !important;
}

/* 4. Vurgulanan (Highlight) Kart Özel Stili */
.ss-card.ss-highlight {
    background: linear-gradient(135deg, rgba(0, 123, 217, 0.15) 0%, rgba(10, 10, 12, 0.85) 100%) !important;
    border-color: rgba(0, 214, 214, 0.4) !important;
    border-top-color: rgba(0, 214, 214, 0.8) !important;
    border-left-color: rgba(0, 123, 217, 0.5) !important;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.8), 
        0 0 30px rgba(0, 123, 217, 0.3), 
        0 0 40px rgba(0, 214, 214, 0.1) !important;
    transform: translateY(-2px) !important;
    z-index: 10 !important;
}

.ss-card.ss-highlight:hover {
    transform: translateY(-5px) !important;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.9), 
        0 0 40px rgba(0, 123, 217, 0.4), 
        inset 0 0 15px rgba(0, 214, 214, 0.3) !important;
}

.ss-card.ss-highlight .ss-card-bg { 
    background: radial-gradient(ellipse at 50% 0%, rgba(0, 214, 214, 0.3) 0%, rgba(0, 123, 217, 0.15) 50%, transparent 80%) !important; 
    opacity: 1 !important;
}

/* 5. Logolar İçin Derinlik ve Neon Gölge */
.ss-card img, .site-card img, .bonus-item img {
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.7)) !important;
    transition: filter 0.4s ease !important;
}

.ss-card:hover img, .ss-card.ss-highlight img, .site-card:hover img, .bonus-item:hover img {
    filter: drop-shadow(0 10px 20px rgba(0, 214, 214, 0.4)) !important;
}