:root {
    /* Colors - Dark Mode (Default) */
    --primary-bg: #0f172a;
    --secondary-bg: #1a2332;
    --card-bg: #334155;
    --accent-blue: #4f7cff;
    --accent-orange: #ff6b35;
    --accent-green: #00d4aa;
    --accent-purple: #8b5cf6;
    --accent-indigo: #6366f1;
    --accent-blue-hover: #3b82f6;
    --accent-blue-20: rgba(79, 124, 255, 0.2);
    
    /* Badge Colors */
    --badge-cyan: #0891b2;
    --badge-yellow: #eab308;
    --badge-violet: #7c3aed;
    --badge-pink: #db2777;
    --badge-orange: #ea580c;
    --badge-red: #b91c1c;
    --badge-blue-dark: #1e40af;
    --badge-indigo: #4f46e5;
    
    /* Special Backgrounds */
    --special-bg: #2d3e50;
    
    /* Gradient Colors */
    --gradient-purple-end: #764ba2;
    
    /* Text Variants */
    --text-indigo-light: #c7d2fe;
    --text-indigo: #a5b4fc;
    --text-light: #e8ecf4;
    
    /* Scrollbar */
    --scrollbar-thumb: #4b5563;
    --scrollbar-thumb-hover: #6b7280;
    --scrollbar-track: var(--primary-bg);
    
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #475569;
    --border-hover: #64748b;
    --hover-bg: #2d3748;
    
    /* Overlay Backgrounds */
    --bg-overlay-subtle: rgba(255, 255, 255, 0.02);
    --bg-overlay-light: rgba(255, 255, 255, 0.05);
    --bg-overlay-medium: rgba(255, 255, 255, 0.08);
    --bg-overlay-strong: rgba(255, 255, 255, 0.1);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #4f7cff 0%, #00d4aa 100%);
    --gradient-orange: linear-gradient(135deg, #ff6b35 0%, #f59e0b 100%);
    --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #4f7cff 100%);
    
    /* Spacing */
    --container-max-width: 1200px;
    --section-padding: 2rem;
    --card-padding: 1.5rem;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    
    /* Typography */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Semantic Colors (Status) */
    --color-success: #00d4aa;
    --color-success-hover: #00c4a0;
    --color-warning: #ff6b35;
    --color-warning-dark: #d97706;
    --color-error: #ef4444;
    --color-info: #4f7cff;
    
    /* Semantic Backgrounds (Badge, Alert) */
    --bg-primary-alpha: rgba(79, 124, 255, 0.2);
    --bg-primary-alpha-light: rgba(79, 124, 255, 0.1);
    --border-primary-alpha: rgba(79, 124, 255, 0.2);
    
    --bg-success-alpha: rgba(0, 212, 170, 0.2);
    --bg-success-alpha-light: rgba(0, 212, 170, 0.1);
    --border-success-alpha: rgba(0, 212, 170, 0.2);
    
    --bg-warning-alpha: rgba(255, 107, 53, 0.2);
    --bg-warning-alpha-light: rgba(255, 107, 53, 0.1);
    --border-warning-alpha: rgba(255, 107, 53, 0.2);
    
    --bg-error-alpha: rgba(239, 68, 68, 0.2);
    --bg-error-alpha-light: rgba(239, 68, 68, 0.1);
    --border-error-alpha: rgba(239, 68, 68, 0.2);
    
    --bg-purple-alpha: rgba(139, 92, 246, 0.2);
    
    /* Shadows */
    --shadow-primary: 0 8px 25px rgba(79, 124, 255, 0.3);
    --shadow-orange: 0 8px 25px rgba(255, 107, 53, 0.3);
    --shadow-purple: 0 8px 25px rgba(139, 92, 246, 0.3);
    --shadow-focus: 0 0 0 3px rgba(79, 124, 255, 0.1);
    
    /* Loading Spinner */
    --loading-border: rgba(255, 255, 255, 0.3);
    
    /* Modal Overlay */
    --modal-overlay-bg: rgba(0, 0, 0, 0.8);
    
    /* VIP Colors */
    --vip-gold: #ffd700;
    --vip-gold-light: #ffed4e;
    --vip-gradient: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    --vip-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    --vip-shadow-hover: 0 4px 20px rgba(255, 215, 0, 0.8);
    
    /* Badge Error */
    --badge-error: #ef4444;
    
    /* Logo Text Gradient */
    --logo-gradient: linear-gradient(135deg, #00d4aa 0%, #4f7cff 50%, #8b5cf6 100%);
    --logo-shadow: 0 0 20px rgba(79, 124, 255, 0.3);
    
    /* Dropdown & Navigation */
    --dropdown-bg: var(--secondary-bg);
    --dropdown-border: var(--border-color);
    --dropdown-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --dropdown-hover-bg: rgba(79, 124, 255, 0.1);
    --dropdown-divider: rgba(255, 255, 255, 0.05);
    
    /* Notification & User Dropdown */
    --notification-dropdown-bg: var(--secondary-bg);
    --user-dropdown-bg: var(--secondary-bg);
    --user-dropdown-divider: var(--card-bg);
    
    /* Auth Button */
    --auth-btn-gradient: var(--gradient-primary);
    --auth-btn-shadow: 0 2px 8px rgba(79, 124, 255, 0.3);
    --auth-btn-shadow-hover: 0 4px 16px rgba(79, 124, 255, 0.5);
    --auth-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    
    /* Footer */
    --footer-bg: #0f1419;
    --footer-border: #1e2732;
    --footer-text: #d1d5db;
    --footer-text-light: #9ca3af;
    --footer-heading: #f3f4f6;
}

/* Light Mode Override */
[data-theme="light"] {
    --primary-bg: #ffffff;
    --secondary-bg: #f8fafc;
    --card-bg: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --border-hover: #cbd5e1;
    --hover-bg: #f1f5f9;
    --yesil-tema-koyu: #006D35;
    --yesil-tema-acik: #008641;
    
    /* Light mode overlay'ler ters (siyah-based) */
    --bg-overlay-subtle: rgba(0, 0, 0, 0.02);
    --bg-overlay-light: rgba(0, 0, 0, 0.04);
    --bg-overlay-medium: rgba(0, 0, 0, 0.06);
    --bg-overlay-strong: rgba(0, 0, 0, 0.08);
    
    /* Light mode'da loading spinner siyah */
    --loading-border: rgba(0, 0, 0, 0.2);
    
    /* Light mode'da modal overlay daha hafif */
    --modal-overlay-bg: rgba(0, 0, 0, 0.5);
    
    /* Light mode'da shadow'lar daha soft */
    --shadow-focus: 0 0 0 3px rgba(79, 124, 255, 0.15);
    
    /* Light mode'da dropdown shadow daha soft */
    --dropdown-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    
    /* Light mode scrollbar */
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;
    --scrollbar-track: var(--primary-bg);
    
    /* Light mode special bg */
    --special-bg: #f1f5f9;
    
    /* Light mode'da dropdown divider dark */
    --dropdown-divider: rgba(0, 0, 0, 0.05);
    
    /* Light mode'da footer açık ton */
    --footer-bg: #f8f9fa;
    --footer-border: #e9ecef;
    --footer-text: #495057;
    --footer-text-light: #6c757d;
    --footer-heading: #212529;
    
    /* Light mode'da dropdown'lar card background kullanır */
    --notification-dropdown-bg: var(--card-bg);
    --user-dropdown-bg: var(--card-bg);
    --dropdown-bg: var(--card-bg);
	
	
	.header{
		background:  var(--yesil-tema-koyu);
		border-bottom: 1px solid var(--yesil-tema-acik);
	}
	
	
	/* BG YEŞİL*/
	.telegram-btn,.twitter-btn,.youtube-widget .widget-header, .youtube-btn, .premium-ad-widget, .popular-widget .widget-header, .btn-view-all, .btn-analyze,.match-vs,
	.result-icon.pending, .filter-embed-icon, .filter-embed-btn.primary, .mbs-option input:checked + .mbs-chip, .select-all-btn:hover, .column-toggle-btn.active:hover, .btn-tahmin-detay:hover, .rolling-slider-btn:hover, .btn-detail
	{background:var(--yesil-tema-koyu);}
	
	/* BG AÇIK YEŞİL */
	.btn-view-all:hover, .column-toggle-btn.active, .select-all-btn, .btn-tahmin-detay, .header-sorting-btn.active, .start-btn, .btn-detail-home
	{background:var(--yesil-tema-acik);}
	
	
	/* TEXT YEŞİL*/
	.meta-date i, .meta-category i, .featured-section .section-title, .upcoming-matches-section .section-title, .rolling-section .section-title, .blog-header-title, .meta-item i, .mbs-option input + .mbs-chip
	{color:var(--yesil-tema-koyu);}
	
	/*TEXT BEYAZ*/
	.nav-link,.username,.notification-btn,.message-btn,.theme-toggle-btn,.user-menu-btn, .widget-title, .telegram-widget .widget-icon, .twitter-widget .widget-icon,
	.telegram-btn,.twitter-btn, .youtube-widget .widget-header, .youtube-widget .widget-icon, .youtube-btn, .premium-ad-widget, .premium-title, 
	.popular-widget .widget-icon, .btn-view-all, .btn-analyze, .filter-embed-icon, .column-toggle-btn.active, .select-all-btn, .btn-tahmin-detay, .btn-tahmin-detay:hover, .header-sorting-btn.active, .start-btn, .rolling-slider-btn:hover, .btn-detail
	{color:  #fff;}
	
	/*TEXT SARI*/
	.nav-link:hover, .notification-btn:hover, .message-btn:hover, .theme-toggle-btn:hover, .user-menu-btn:hover, .premium-icon, .nav-link:hover
	{color:  #FFD400;}

	.user-avatar-large{background:var(--yesil-tema-koyu);color:#fff;}
	.telegram-widget .widget-header, .twitter-widget .widget-header,.stats-widget .widget-header{background: linear-gradient(135deg, var(--yesil-tema-koyu) 0%, var(--yesil-tema-acik) 100%);}
	.date-tab:hover, .date-tab.active{background:var(--yesil-tema-koyu);border-color: #FFD400;color:#fff;}
    .mbs-option input + .mbs-chip{border: 1px solid var(--yesil-tema-koyu);}
	.mbs-select-wrapper{border: 1px solid var(--border-color);}
	.mbs-option input:checked + .mbs-chip{text-shadow: none;}
	.column-toggle-btn.active{border: none;}
	.progress-bar-home{background: linear-gradient(90deg, var(--yesil-tema-koyu) 0%, var(--yesil-tema-acik) 100%);}
	.custom-select-trigger, .custom-select-option span {color: var(--text-secondary);}
}

/* Smooth transition for theme change */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}





/* Container */

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
    overflow-x: hidden;
}

/* Header */
.header {

    background: var(--secondary-bg);

    border-bottom: 1px solid var(--border-color);

    position: sticky;

    top: 0;

    z-index: 1000;

    backdrop-filter: blur(10px);

}



.header-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 1.5rem;

}



.header-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.5rem 0;

    gap: 2rem;

}



/* Logo */

.logo {

    display: flex;

    align-items: center;

    max-width: 200px;

    flex-shrink: 0;

}



.logo-link {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    text-decoration: none;

    max-width: 100%;

}



.logo-link img {

    max-height: 45px;

    width: auto;

    object-fit: contain;

}



.logo-icon {

    width: 32px;

    height: 32px;

    background: var(--gradient-primary);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-primary);

    font-size: 14px;

}



.logo-text {

    font-size: 18px;

    font-weight: 700;

    background: var(--logo-gradient);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    text-shadow: var(--logo-shadow);

}



/* Navigation */

.navigation {

    flex: 1;

    display: flex;

    justify-content: center;

}



.nav-menu {

    display: flex;

    align-items: center;

    gap: 0;

    list-style: none;

}



.nav-item {

    position: relative;

}



.nav-item.has-dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.nav-link {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--text-secondary);

    font-size: 13px;

    font-weight: 500;

    padding: 0.75rem 1.25rem;

    text-decoration: none;

    transition: all 0.3s ease;

    border-radius: 6px;

    white-space: nowrap;

}



.nav-link:hover {

    color: var(--text-primary);

    background: var(--bg-overlay-light);

}



.nav-link.active {

    color: var(--text-primary);

    background: var(--bg-primary-alpha);

}



.dropdown-arrow {

    font-size: 10px;

    transition: transform 0.3s ease;

}



.nav-item.has-dropdown:hover .dropdown-arrow {

    transform: rotate(180deg);

}



.nav-badge {

    background: var(--badge-error);

    color: var(--text-primary);

    font-size: 10px;

    padding: 2px 6px;

    border-radius: 10px;

    font-weight: 600;

    text-transform: uppercase;

}



.dropdown-badge {

    background: var(--badge-error);

    color: var(--text-primary);

    font-size: 10px;

    padding: 2px 6px;

    border-radius: 10px;

    font-weight: 600;

    margin-left: auto;

}



/* Dropdown Menu */

.dropdown-menu {

    position: absolute;

    top: 100%;

    left: 0;

    transform: translateY(-10px);

    width: 220px;

    background: var(--dropdown-bg);

    border: 1px solid var(--dropdown-border);

    border-radius: 12px;

    box-shadow: var(--dropdown-shadow);

    z-index: 1000;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

    margin-top: 8px;

}



.dropdown-content {

    padding: 0.75rem 0;

}



.dropdown-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    padding: 0.75rem 1rem;

    color: var(--text-secondary);

    font-size: 13px;

    text-decoration: none;

    transition: all 0.3s ease;

    border-bottom: 1px solid var(--dropdown-divider);

}



.dropdown-link:last-child {

    border-bottom: none;

}



.dropdown-link:hover {

    background: var(--dropdown-hover-bg);

    color: var(--text-primary);

    padding-left: 1.25rem;

}



.dropdown-link i {

    color: var(--accent-blue);

    width: 16px;

    font-size: 12px;

}



.dropdown-link:hover i {

    color: var(--accent-orange);

}



/* Nested Dropdown */

.dropdown-link.has-nested-dropdown {

    position: relative;

    cursor: pointer;

    justify-content: space-between;

}



.nested-arrow {

    font-size: 10px;

    transition: transform 0.3s ease;

}



.dropdown-link.has-nested-dropdown:hover .nested-arrow {

    transform: translateX(3px);

}



.nested-dropdown-menu {

    position: absolute;

    left: 100%;

    top: 0;

    width: 220px;

    background: var(--dropdown-bg);

    border: 1px solid var(--dropdown-border);

    border-radius: 12px;

    box-shadow: var(--dropdown-shadow);

    opacity: 0;

    visibility: hidden;

    transform: translateX(-10px);

    transition: all 0.3s ease;

    margin-left: 8px;

}



.dropdown-link.has-nested-dropdown:hover .nested-dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

}



.nested-dropdown-content {

    padding: 0.75rem 0;

}



.nested-dropdown-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    padding: 0.75rem 1rem;

    color: var(--text-secondary);

    font-size: 13px;

    text-decoration: none;

    transition: all 0.3s ease;

    border-bottom: 1px solid var(--dropdown-divider);

}



.nested-dropdown-link:last-child {

    border-bottom: none;

}



.nested-dropdown-link:hover {

    background: var(--dropdown-hover-bg);

    color: var(--text-primary);

    padding-left: 1.25rem;

}



/* User Actions */

.user-actions {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.user-info {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    font-size: 13px;

}



.welcome-text {

    color: var(--text-muted);

    display: none;

}



.username {

    color: var(--text-primary);

    font-weight: 600;

}



/* Auth Header Button */

.auth-header-btn {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.625rem 1.25rem;

    background: var(--auth-btn-gradient);

    border: none;

    border-radius: 20px;

    color: var(--text-primary);

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: var(--auth-btn-shadow);

    position: relative;

    overflow: hidden;

}



.auth-header-btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: var(--auth-shimmer);

    transition: left 0.5s ease;

}



.auth-header-btn:hover::before {

    left: 100%;

}



.auth-header-btn:hover {

    transform: translateY(-2px);

    box-shadow: var(--auth-btn-shadow-hover);

}



.auth-header-btn i {

    font-size: 14px;

}



/* VIP Status */

.vip-status {

    margin-left: 1rem;

}



.vip-badge {

    background: var(--vip-gradient);

    color: var(--primary-bg);

    padding: 6px 16px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 700;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    box-shadow: var(--vip-shadow);

    animation: vipPulse 3s ease-in-out infinite;

    position: relative;

    overflow: hidden;

}



.vip-badge::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);

    animation: vipShine 4s ease-in-out infinite;

}



@keyframes vipPulse {

    0%, 100% {

        box-shadow: var(--vip-shadow);

        transform: scale(1);

    }

    50% {

        box-shadow: var(--vip-shadow-hover);

        transform: scale(1.05);

    }

}



@keyframes vipShine {

    0% {

        transform: translateX(-100%) translateY(-100%) rotate(45deg);

    }

    50% {

        transform: translateX(100%) translateY(100%) rotate(45deg);

    }

    100% {

        transform: translateX(100%) translateY(100%) rotate(45deg);

    }

}



.vip-text {

    font-weight: 800;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

}



.vip-days {

    font-weight: 600;

}



.user-stats {

    display: flex;

    gap: 1rem;

}



.stat-item {

    display: flex;

    align-items: center;

    gap: 0.375rem;

    color: var(--text-secondary);

    font-size: 13px;

}



.stat-item i {

    color: var(--accent-orange);

    font-size: 14px;

}



.stat-value {

    font-weight: 600;

    color: var(--text-primary);

}



/* Notifications */

.notifications {

    position: relative;

}



.notification-btn {

    width: 40px;

    height: 40px;

    background: var(--bg-overlay-strong);

    border: none;

    border-radius: 50%;

    color: var(--text-secondary);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    transition: all 0.3s ease;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

}



.notification-btn:hover {

    background: var(--bg-overlay-medium);

    color: var(--text-primary);

}



.notification-btn:active {

    transform: scale(0.95);

}



.notification-badge {

    position: absolute;

    top: -2px;

    right: -2px;

    background: var(--badge-error);

    color: var(--text-primary);

    font-size: 10px;

    font-weight: 600;

    padding: 2px 6px;

    border-radius: 10px;

    min-width: 16px;

    text-align: center;

}



.notification-dropdown {

    position: absolute;

    top: 100%;

    right: 0;

    width: 320px;

    background: var(--notification-dropdown-bg);

    border: 1px solid var(--dropdown-border);

    border-radius: 12px;

    box-shadow: var(--dropdown-shadow);

    z-index: 10000;

    display: none;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px);

    transition: all 0.3s ease;

    margin-top: 8px;

    pointer-events: none;

}



.notification-dropdown::before {

    content: '';

    position: absolute;

    top: -8px;

    right: 10px;

    left: 0;

    height: 8px;

    background: transparent;

}



.notification-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem;

    border-bottom: 1px solid var(--dropdown-border);

}



.notification-header h4 {

    color: var(--text-primary);

    font-size: 14px;

    font-weight: 600;

    margin: 0;

}



.notification-count {

    color: var(--text-muted);

    font-size: 12px;

}



.notification-list {

    max-height: 300px;

    overflow-y: auto;

}



.notification-item {

    display: flex;

    gap: 0.75rem;

    padding: 0.75rem 1rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    transition: background 0.3s ease;

}



.notification-item:hover {
    background: var(--bg-overlay-light);

}



.notification-item:last-child {

    border-bottom: none;

}



.notification-icon {

    width: 32px;

    height: 32px;

    background: var(--accent-blue);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-primary);

    font-size: 12px;

    flex-shrink: 0;

}



.notification-content {

    flex: 1;

}



.notification-content p {

    color: var(--text-primary);

    font-size: 13px;

    margin: 0 0 4px 0;

    line-height: 1.4;

}



.notification-time {

    color: var(--text-muted);

    font-size: 11px;

}



.notification-footer {

    padding: 0.75rem 1rem;

    border-top: 1px solid var(--dropdown-border);

    text-align: center;

}



.view-all-btn {

    color: var(--accent-blue);

    font-size: 12px;

    font-weight: 500;

    text-decoration: none;

    transition: color 0.3s ease;

}



.view-all-btn:hover {

    color: var(--accent-orange);

}



/* User Menu */

.theme-toggle {
    position: relative;
}

.theme-toggle-btn {
    width: 40px;
    height: 40px;
    background: var(--bg-overlay-strong);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle-btn:hover {
    background: var(--bg-overlay-medium);
    color: var(--color-warning);
    transform: rotate(20deg);
}

.theme-toggle-btn:active {
    transform: scale(0.95) rotate(20deg);
}

.theme-toggle-btn i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

/* Light mode icon animation */
[data-theme="light"] .theme-toggle-btn i {
    transform: rotate(180deg);
}

/* User Menu */

.user-menu {

    position: relative;

}



.user-menu-btn {

    width: 40px;

    height: 40px;

    background: var(--bg-overlay-strong);



    border-radius: 50%;

    color: var(--text-secondary);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

}



.user-menu-btn:hover {

    background: var(--bg-overlay-medium);

    border-color: var(--accent-blue);

    color: var(--text-primary);

}



.user-menu-btn:active {

    transform: scale(0.95);

}



.user-dropdown {

    position: absolute;

    top: 100%;

    right: 0;

    width: 280px;

    background: var(--user-dropdown-bg);

    border: 1px solid var(--dropdown-border);

    border-radius: 12px;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    z-index: 10000;

    display: none;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-10px);

    transition: all 0.3s ease;

    margin-top: 8px;

    pointer-events: none;

}



.user-dropdown::before {

    content: '';

    position: absolute;

    top: -8px;

    right: 10px;

    left: 0;

    height: 8px;

    background: transparent;

}



.user-menu:hover .user-dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.user-dropdown-header {

    display: flex;

    gap: 0.75rem;

    padding: 1rem;

    border-bottom: 1px solid var(--user-dropdown-divider);

}



.user-avatar-large {

    width: 48px;

    height: 48px;

    background: var(--accent-blue);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-primary);

    font-size: 18px;

    flex-shrink: 0;

}



.user-details {

    flex: 1;

}



.user-name {

    color: var(--text-primary);

    font-size: 16px;

    font-weight: 600;

    margin: 0 0 4px 0;

}



.user-email {

    color: var(--text-muted);

    font-size: 12px;

    margin: 0;

}



.user-dropdown-body {

    padding: 0.75rem 0;

}



.user-stat-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.5rem 1rem;

    color: var(--text-secondary);

    font-size: 13px;

    margin-bottom: 0.5rem;

}



.user-stat-item i {

    color: var(--accent-orange);

    width: 16px;

}



.user-menu-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.75rem 1rem;

    color: var(--text-secondary);

    font-size: 13px;

    text-decoration: none;

    transition: all 0.3s ease;

}



.user-menu-item:hover {

    background: var(--bg-overlay-light);

    color: var(--text-primary);

}



.user-menu-item i {

    color: var(--accent-blue);

    width: 16px;

}



.user-dropdown-footer {

    border-top: 1px solid var(--user-dropdown-divider);

    padding: 0.75rem 0;

}



.logout-btn {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.75rem 1rem;

    color: var(--color-error);

    font-size: 13px;

    text-decoration: none;

    transition: all 0.3s ease;

}



.logout-btn:hover {

    background: var(--bg-error-alpha-light);

    color: var(--color-error);

}



.logout-btn i {

    width: 16px;

}



/* Mobile Menu */

.mobile-menu-toggle {

    display: none;

    flex-direction: column;

    gap: 3px;

    padding: 0.5rem;

    background: none;

    border: none;

    cursor: pointer;

    z-index: 1001;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

}



.mobile-menu-toggle:active {

    transform: scale(0.95);

}



.mobile-menu-toggle span {

    width: 18px;

    height: 2px;

    background: var(--text-primary);

    border-radius: 1px;

    transition: all 0.3s ease;

}



.mobile-navigation {

    display: none;

    background: var(--secondary-bg);

    border-top: 1px solid var(--border-color);

    width: 100%;

    position: relative;

    z-index: 9999;

    pointer-events: auto;

}



.mobile-navigation.active {

    display: block !important;

    pointer-events: auto !important;

}



.header-container .mobile-navigation.active {

    display: block !important;

}



@media (max-width: 768px) {

    /* HEADER & NAVIGATION */

    .header-content {

        display: flex !important;

        justify-content: space-between !important;

        align-items: center !important;

        padding: 0.5rem 0 !important;

        width: 100% !important;

    }

    

    .logo {

        flex: 1 !important;

    }

    

    .navigation {

        display: none !important;

    }

    

    .user-actions {

        display: flex !important;

        align-items: center !important;

        gap: 12px !important;

        flex-shrink: 0 !important;

    }

    

    .notifications,

    .user-menu,

    .mobile-menu-toggle {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

    }

    

    .user-info,

    .vip-status,

    .user-stats {

        display: none !important;

    }

    

    .auth-header-btn {

        padding: 0.5rem 1rem !important;

        font-size: 12px !important;

    }

    

    .auth-header-btn span {

        display: none !important;

    }

    

    .auth-header-btn i {

        font-size: 16px !important;

        margin: 0 !important;

    }

    

    .notification-btn,

    .user-menu-btn,

    .mobile-menu-toggle {

        width: 40px !important;

        height: 40px !important;

        min-width: 40px !important;

        min-height: 40px !important;

        flex-shrink: 0 !important;

    }

    

    /* MOBILE NAVIGATION */

    .mobile-navigation {

        display: none !important;

    }

    

    .mobile-navigation.active {

        display: block !important;

    }

    

    /* DROPDOWNS - MOBİL */

    .notification-dropdown,

    .user-dropdown {

        position: fixed !important;

        top: 60px !important;

        right: 10px !important;

        left: auto !important;

        width: 280px !important;

        z-index: 99999 !important;

        display: none !important;

    }

    

    .notification-dropdown.show,

    .user-dropdown.show {

        display: block !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: translateY(0) !important;

    }

    

    .notification-dropdown,

    .user-dropdown {

        position: fixed !important;

        top: 60px !important;

        right: 10px !important;

        left: auto !important;

        width: 280px !important;

        z-index: 1001 !important;

    }

    

    /* CONTENT GRIDS */

    .featured-grid {

        grid-template-columns: 1fr;

    }

    

    .stats-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .hero-actions {

        flex-direction: column;

        align-items: center;

    }

    

    /* DATE TABS */

    .date-tabs {

        grid-template-columns: repeat(3, 1fr);

    }

    

    .match-result {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.75rem;

    }

    

    .match-outcome {

        align-self: flex-end;

    }

    

    /* SLIDER */

    .slider-container {

        height: 250px;

    }

    

    .slide-content {

        padding: 2rem 1rem 1rem;

    }

    

    .slide-content h3 {

        font-size: var(--font-size-xl);

    }

    

    .slide-content p {

        font-size: var(--font-size-base);

    }

    

    .enhanced-stats-grid {

        grid-template-columns: 1fr;

        padding: 0 1rem;

    }

    

    .stat-number-large {

        font-size: 2.5rem;

    }

}



.mobile-nav-menu {

    padding: 1rem 0;

}



.mobile-nav-item {

    position: relative;

}



.mobile-nav-item.has-mobile-dropdown .mobile-nav-link {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.mobile-nav-badge {

    background: #ef4444;

    color: var(--text-primary);

    font-size: 10px;

    padding: 2px 6px;

    border-radius: 10px;

    font-weight: 600;

    margin-left: 8px;

}



.mobile-dropdown-badge {

    background: var(--badge-error);

    color: var(--text-primary);

    font-size: 10px;

    padding: 2px 6px;

    border-radius: 10px;

    font-weight: 600;

    margin-left: auto;

}



.mobile-dropdown-arrow {

    font-size: 10px;

    transition: transform 0.3s ease;

}



.mobile-nav-item.active .mobile-dropdown-arrow {

    transform: rotate(180deg);

}



.mobile-nav-link {

    display: block;

    padding: 0.75rem 1rem;

    color: var(--text-secondary);

    border-bottom: 1px solid var(--border-color);

    text-decoration: none;

    transition: all 0.3s ease;

}



.mobile-nav-link:hover {

    color: var(--text-primary);

    background: var(--hover-bg);

}



.mobile-dropdown-menu {

    display: none;

    background: var(--primary-bg);

    border-top: 1px solid var(--border-color);

}



.mobile-nav-item.active .mobile-dropdown-menu {

    display: block;

}



.mobile-dropdown-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    padding: 0.75rem 2rem;

    color: var(--text-secondary);

    font-size: 13px;

    text-decoration: none;

    transition: all 0.3s ease;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.mobile-dropdown-link:last-child {

    border-bottom: none;

}



.mobile-dropdown-link:hover {

    background: var(--dropdown-hover-bg);

    color: var(--text-primary);

    padding-left: 2.25rem;

}



.mobile-dropdown-link i {

    color: var(--accent-blue);

    width: 16px;

    font-size: 12px;

}



.mobile-dropdown-link:hover i {

    color: var(--accent-orange);

}



/* Nested Mobile Dropdown */

.mobile-dropdown-link.has-nested-mobile-dropdown {

    position: relative;

    cursor: pointer;

    justify-content: space-between;

    display: flex;

}



.nested-mobile-arrow {

    font-size: 10px;

    transition: transform 0.3s ease;

}



.mobile-dropdown-link.has-nested-mobile-dropdown.active .nested-mobile-arrow {

    transform: rotate(180deg);

}



.nested-mobile-dropdown-menu {

    display: none;

    background: #0a0f1a;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.nested-mobile-dropdown-menu.active {

    display: block;

}



.nested-mobile-dropdown-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    padding: 0.75rem 3rem;

    color: var(--text-secondary);

    font-size: 12px;

    text-decoration: none;

    transition: all 0.3s ease;

    border-bottom: 1px solid rgba(255, 255, 255, 0.03);

}



.nested-mobile-dropdown-link:last-child {

    border-bottom: none;

}



.nested-mobile-dropdown-link:hover {

    background: var(--dropdown-hover-bg);

    color: var(--text-primary);

    padding-left: 3.25rem;

}



/* Main Content */

.main-content {

    min-height: calc(100vh - 200px);

}



/* Announcement Banner */

/* Duyuru Banner - Kompakt & Minimal */
.announcement-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 8px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left-width: 3px;
    border-radius: 10px;
}

.announcement-banner.info { border-left-color: var(--color-info); }
.announcement-banner.warning { border-left-color: var(--color-warning); }
.announcement-banner.danger { border-left-color: var(--color-error); }
.announcement-banner.success { border-left-color: var(--color-success); }

.announcement-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.announcement-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.announcement-banner.info .announcement-icon { background: rgba(59, 130, 246, 0.15); color: var(--color-info); }
.announcement-banner.warning .announcement-icon { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); }
.announcement-banner.danger .announcement-icon { background: rgba(239, 68, 68, 0.15); color: var(--color-error); }
.announcement-banner.success .announcement-icon { background: rgba(34, 197, 94, 0.15); color: var(--color-success); }

.announcement-text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.announcement-text h4 {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.announcement-text p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.announcement-action {
    flex-shrink: 0;
}

.announcement-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.announcement-btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: var(--text-primary);
}

@media (max-width: 600px) {
    .announcement-text p {
        display: none;
    }

    /* Başlık butonun üstüne taşmasın */
    .announcement-text h4 {
        white-space: normal;
        line-height: 1.35;
    }

    /* Buton her zaman alt satırda, tam genişlikte */
    .announcement-content {
        flex-wrap: wrap;
    }

    .announcement-action {
        flex: 1 1 100%;
        margin-left: 0;
        margin-top: 8px;
    }

    .announcement-btn {
        width: 100%;
        justify-content: center;
        padding: 7px 12px;
        font-size: 11.5px;
    }
}

/* ============================================
   Announcement Banner - Light Mode
   ============================================ */
[data-theme="light"] .announcement-banner {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .announcement-banner.info {
    border-left-color: var(--color-info);
}

[data-theme="light"] .announcement-banner.warning {
    border-left-color: var(--color-warning);
}

[data-theme="light"] .announcement-banner.danger {
    border-left-color: var(--color-error);
}

[data-theme="light"] .announcement-banner.success {
    border-left-color: var(--color-success);
}

[data-theme="light"] .announcement-banner.info .announcement-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

[data-theme="light"] .announcement-banner.warning .announcement-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

[data-theme="light"] .announcement-banner.danger .announcement-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

[data-theme="light"] .announcement-banner.success .announcement-icon {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

[data-theme="light"] .announcement-text p {
    color: var(--text-secondary);
}

[data-theme="light"] .announcement-btn {
    background: var(--yesil-tema-koyu);
    border-color: rgba(0, 0, 0, 0.12);
    color: #fff;
}

[data-theme="light"] .announcement-btn:hover {
    background: linear-gradient(135deg, var(--yesil-tema-koyu) 0%, var(--yesil-tema-acik) 100%);
    border-color: transparent;
    color: #fff;
}



/* Hero Section */

.hero-section {

    background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--card-bg) 100%);

    padding: 3rem 0;

    text-align: center;

    border-bottom: 1px solid var(--border-color);

}



.hero-title {

    font-size: var(--font-size-4xl);

    font-weight: 700;

    color: var(--accent-orange);

    margin-bottom: 0.5rem;

}



.hero-subtitle {

    font-size: var(--font-size-lg);

    color: var(--text-secondary);

}



/* Content Grid */

.content-grid {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 2rem;

    padding: 2rem 0;

}



/* Cards */

.info-card,

.leaderboard-card,

.rewards-card {

    background: var(--card-bg);

    border-radius: var(--border-radius);

    padding: var(--card-padding);

    border: 1px solid var(--border-color);

    margin-bottom: 1.5rem;

}



.info-header,

.leaderboard-header,

.rewards-header {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    margin-bottom: 1rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid var(--border-color);

}



.info-header i,

.leaderboard-header i,

.rewards-header i {

    color: var(--accent-blue);

    font-size: var(--font-size-lg);

}



.info-header span,

.leaderboard-header span,

.rewards-header span {

    font-weight: 600;

    color: var(--text-primary);

}



.leaderboard-header small {

    color: var(--text-muted);

    font-size: var(--font-size-xs);

    margin-left: auto;

}



.info-text {

    color: var(--text-secondary);

    line-height: 1.6;

}



/* Leaderboard Table */

.leaderboard-table {

    overflow: hidden;

}



.table-header {

    display: grid;

    grid-template-columns: 60px 1fr 80px;

    gap: 1rem;

    padding: 0.75rem 0;

    border-bottom: 1px solid var(--border-color);

    font-size: var(--font-size-xs);

    font-weight: 600;

    color: var(--text-muted);

    text-transform: uppercase;

}



.table-row {

    display: grid;

    grid-template-columns: 60px 1fr 80px;

    gap: 1rem;

    padding: 1rem 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    align-items: center;

    transition: all 0.3s ease;

}



.table-row:hover {

    background: rgba(255, 255, 255, 0.02);

}



.table-row:last-child {

    border-bottom: none;

}



.rank {

    font-weight: 700;

    color: var(--text-primary);

    text-align: center;

}



.username {

    color: var(--text-primary);

    font-weight: 500;

}



.points {

    font-weight: 700;

    color: var(--accent-green);

    text-align: center;

}



/* Rewards */

.reward-item {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

    padding: 1rem 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.reward-item:last-child {

    border-bottom: none;

}



.reward-item.active {

    background: rgba(79, 124, 255, 0.1);

    border-radius: var(--border-radius-sm);

    padding: 1rem;

    margin: 0.5rem 0;

}



.reward-rank {

    font-weight: 700;

    color: var(--accent-orange);

    min-width: 30px;

}



.reward-info {

    flex: 1;

}



.reward-title {

    display: block;

    font-weight: 600;

    color: var(--text-primary);

    margin-bottom: 0.25rem;

}



.reward-desc {

    font-size: var(--font-size-sm);

    color: var(--text-secondary);

}



/* Footer */

.footer {

    background: var(--footer-bg);

    border-top: 1px solid var(--footer-border);

    margin-top: 4rem;

    padding: 3rem 0 2rem;

}



.footer-content {

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1fr;

    gap: 3rem;

}



/* Footer Brand */

.footer-brand {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.footer-logo {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 0.5rem;

    max-width: 200px;

}



.footer-logo img {

    max-height: 40px;

    width: auto;

    object-fit: contain;

}



.footer-logo .logo-icon {

    width: 28px;

    height: 28px;

    background: linear-gradient(135deg, #4f7cff 0%, #00d4aa 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-primary);

    font-size: 12px;

}



.footer-logo .logo-text {

    font-size: 16px;

    font-weight: 700;

    background: linear-gradient(135deg, #00d4aa 0%, #4f7cff 50%, #8b5cf6 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.footer-description {

    color: var(--footer-text);

    font-size: 13px;

    line-height: 1.5;

    margin: 0;

}



.footer-copyright {

    color: var(--footer-text-light);

    font-size: 12px;

    margin: 0;

}



/* Footer Sections */

.footer-section {

    display: flex;

    flex-direction: column;

}



.footer-heading {

    color: var(--footer-heading);

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 1.25rem;

    text-transform: none;

}



.footer-links {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-links li {

    margin: 0;

}



.footer-links a {

    color: var(--footer-text);

    font-size: 13px;

    text-decoration: none;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.footer-links a i {

    font-size: 11px;

    width: 14px;

    opacity: 0.9;

    transition: all 0.2s ease;

}



.footer-links a:hover {

    color: var(--color-warning);

    transform: translateX(3px);

}



.footer-links a:hover i {

    color: var(--color-warning);

    opacity: 1;

}



/* Footer Social */

.footer-social {

    display: flex;

    gap: 0.75rem;

}



.footer-social-link {

    width: 36px;

    height: 36px;

    background: var(--footer-border);

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--footer-text);

    font-size: 16px;

    text-decoration: none;

    transition: all 0.2s ease;

}



.footer-social-link:hover {

    background: var(--color-warning);

    color: var(--footer-bg);

    transform: translateY(-2px);

}



/* Footer Legal Notice */

.footer-legal-notice {

    margin-top: 3rem;

    padding-top: 2rem;

    padding-bottom: 1.5rem;

    padding-left: 1.5rem;

    padding-right: 1.5rem;

    background: var(--secondary-bg);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    display: flex;

    gap: 1rem;

    align-items: flex-start;

    position: relative;

}



.footer-legal-notice::before {

    content: '';

    position: absolute;

    top: -1.5rem;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, #2d3748 20%, #2d3748 80%, transparent);

}



.legal-notice-icon {

    width: 40px;

    height: 40px;

    background: rgba(251, 191, 36, 0.1);

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-warning);

    font-size: 18px;

    flex-shrink: 0;

}



.legal-notice-content {

    flex: 1;

}



.legal-notice-title {

    color: var(--color-warning);

    font-size: 14px;

    font-weight: 600;

    margin: 0 0 0.5rem 0;

}



.legal-notice-text {

    color: var(--footer-text);

    font-size: 12px;

    line-height: 1.6;

    margin: 0;

}



/* Responsive Footer */

@media (max-width: 1024px) {

    .footer-content {

        grid-template-columns: 1fr 1fr;

        gap: 2rem;

    }

}



@media (max-width: 768px) {

    .footer {

        padding: 2rem 0 1.5rem;

    }

    

    .footer-content {

        grid-template-columns: 1fr;

        gap: 2rem;

        text-align: center;

    }

    

    .footer-brand {

        padding-bottom: 1rem;

        border-bottom: 1px solid var(--footer-border);

        align-items: center;

    }

    

    .footer-logo {

        justify-content: center;

        max-width: 150px;

    }

    

    .footer-logo img {

        max-height: 30px;

    }

    

    .footer-section {

        align-items: center;

    }

    

    .footer-links {

        align-items: center;

    }

    

    .footer-links a:hover {

        transform: translateX(0);

    }

    

    .footer-social {

        justify-content: center;

    }

    

    .footer-legal-notice {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

}



/* Index Page Styles */

.featured-section {

    padding: 2rem 0;

}



.section-title {

    font-size: var(--font-size-2xl);

    font-weight: 600;

    color: var(--text-primary);

    margin-bottom: 2rem;

    text-align: center;

}



.featured-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 2rem;

}



.featured-card {

    background: var(--card-bg);

    border-radius: var(--border-radius);

    overflow: hidden;

    border: 1px solid var(--border-color);

    transition: all 0.3s ease;

}



.featured-card:hover {

    transform: translateY(-4px);

    border-color: var(--accent-blue);

    box-shadow: 0 8px 32px rgba(79, 124, 255, 0.2);

}



.card-image {

    position: relative;

    height: 200px;

    overflow: hidden;

}



.card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.featured-card:hover .card-image img {

    transform: scale(1.05);

}



.card-badge {

    position: absolute;

    top: 1rem;

    left: 1rem;

}



.card-content {

    padding: 1.5rem;

}



.card-title {

    margin-bottom: 1rem;

}



.card-title a {

    color: var(--text-primary);

    font-size: var(--font-size-lg);

    font-weight: 600;

    line-height: 1.4;

    transition: color 0.3s ease;

}



.card-title a:hover {

    color: var(--accent-blue);

}



.card-excerpt {

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: 1rem;

}



.card-meta {

    display: flex;

    gap: 1rem;

    font-size: var(--font-size-sm);

}



.meta-date,

.meta-category {

    display: flex;

    align-items: center;

    gap: 0.375rem;

    color: var(--text-muted);

}



.meta-date i {

    color: var(--accent-orange);

}



.meta-category i {

    color: var(--accent-green);

}



/* Stats Section */

.stats-section {

    padding: 3rem 0;

    background: var(--secondary-bg);

    border-radius: var(--border-radius);

    margin: 3rem 0;

}



.stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 2rem;

}



.stat-card {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 1.5rem;

    background: var(--card-bg);

    border-radius: var(--border-radius);

    border: 1px solid var(--border-color);

    transition: all 0.3s ease;

}



.stat-card:hover {

    transform: translateY(-2px);

    border-color: var(--accent-blue);

}



.stat-icon {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-primary);

    font-size: var(--font-size-xl);

}



.stat-content {

    flex: 1;

}



.stat-number {

    display: block;

    font-size: var(--font-size-2xl);

    font-weight: 700;

    color: var(--text-primary);

    line-height: 1;

}



.stat-label {

    color: var(--text-secondary);

    font-size: var(--font-size-sm);

    margin-top: 0.25rem;

}



/* Hero Actions */

.hero-actions {

    display: flex;

    gap: 1rem;

    justify-content: center;

    margin-top: 2rem;

    flex-wrap: wrap;

}







@media (max-width: 480px) {

    .stats-grid {

        grid-template-columns: 1fr;

    }

    

    .stat-card {

        padding: 1rem;

    }

    

    .stat-icon {

        width: 50px;

        height: 50px;

        font-size: var(--font-size-lg);

    }

}

/* Advertisement Banners */

.ad-banner-section {

    margin-top: 1rem;

    width: 100%;

}



.ad-banner {

    display: block;

    width: 100%;

    border-radius: var(--border-radius);

    overflow: hidden;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

}



.ad-banner:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

}



.ad-image {

    width: 100%;

    height: auto;

    display: block;

}

/* Main Content Layout */

.main-content-layout {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 3rem;

    margin-top: 1rem;

}



.main-content-area {

    min-width: 0;

}



/* Home Sidebar */

.home-sidebar {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.sidebar-widget {

    background: var(--card-bg);

    border-radius: var(--border-radius);

    border: 1px solid var(--border-color);

    overflow: hidden;

    transition: all 0.3s ease;

}



.sidebar-widget:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

}



.widget-header {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 1.25rem 1.5rem;

    position: relative;

    overflow: hidden;

}



.widget-header::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    opacity: 0.1;

    z-index: 0;

}



.widget-icon {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-primary);

    font-size: 24px;

    flex-shrink: 0;

    position: relative;

    z-index: 1;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

}



.widget-title-area {

    flex: 1;

    position: relative;

    z-index: 1;

}



.widget-title {

    color: var(--text-primary);

    font-size: 17px;

    font-weight: 700;

    margin-bottom: 0.25rem;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}



.widget-subtitle {

    color: rgba(255, 255, 255, 0.85);

    font-size: 13px;

    margin: 0;

    font-weight: 500;

}



/* YouTube Widget */

.youtube-widget .widget-header {

    background: linear-gradient(135deg, #c4302b 0%, #ff0000 100%);

    border-bottom: none;

}



.youtube-widget .widget-header::before {

    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent);

}



.youtube-widget .widget-icon {

    background: rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(10px);

}



.youtube-content {

    padding: 1.5rem;

    background: var(--card-bg);

}



.youtube-logo {

    margin-bottom: 1.5rem;

    display: flex;

    justify-content: center;

}



.youtube-logo i {

    font-size: 80px;

    color: #ff0000;

    filter: drop-shadow(0 4px 8px rgba(255, 0, 0, 0.3));

}



.youtube-description {

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: 1.5rem;

    font-size: 14px;

}



.youtube-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    background: linear-gradient(135deg, #ff0000 0%, #c4302b 100%);

    color: var(--text-primary);

    padding: 0.875rem 2rem;

    border-radius: 8px;

    font-weight: 600;

    font-size: 15px;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);

    width: 100%;

}



.youtube-btn:hover {

    background: linear-gradient(135deg, #c4302b 0%, #a02622 100%);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);

}



.youtube-btn i {

    font-size: 18px;

}



/* WhatsApp Widget */

.whatsapp-widget .widget-header {

    background: linear-gradient(135deg, #128c7e 0%, #25d366 100%);

    border-bottom: none;

}



.whatsapp-widget .widget-header::before {

    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent);

}



.whatsapp-widget .widget-icon {

    background: rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(10px);

}



.whatsapp-content {

    padding: 1.5rem;

    background: var(--card-bg);

}



.whatsapp-image {

    margin-bottom: 1.5rem;

    display: flex;

    justify-content: center;

}



.whatsapp-image i {

    font-size: 80px;

    color: #25d366;

    filter: drop-shadow(0 4px 8px rgba(37, 211, 102, 0.3));

}



.whatsapp-description {

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: 1.5rem;

    font-size: 14px;

}



.whatsapp-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);

    color: var(--text-primary);

    padding: 0.875rem 2rem;

    border-radius: 8px;

    font-weight: 600;

    font-size: 15px;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);

    width: 100%;

}



.whatsapp-btn:hover {

    background: linear-gradient(135deg, #128c7e 0%, #0d6e5e 100%);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);

}



.whatsapp-btn i {

    font-size: 18px;

}



/* Telegram Widget */

.telegram-widget .widget-header {

    background: linear-gradient(135deg, #0088cc 0%, #00a0e9 100%);

    border-bottom: none;

}



.telegram-widget .widget-header::before {

    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent);

}



.telegram-widget .widget-icon {

    background: rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(10px);

}



.telegram-content {

    padding: 1.5rem;

    background: var(--card-bg);

}



.telegram-image {

    margin-bottom: 1.5rem;

    display: flex;

    justify-content: center;

}



.telegram-image i {

    font-size: 80px;

    color: #0088cc;

    filter: drop-shadow(0 4px 8px rgba(0, 136, 204, 0.3));

}



.telegram-description {

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: 1.5rem;

    font-size: 14px;

}



.telegram-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    background: linear-gradient(135deg, #0088cc 0%, #006699 100%);

    color: var(--text-primary);

    padding: 0.875rem 2rem;

    border-radius: 8px;

    font-weight: 600;

    font-size: 15px;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);

    width: 100%;

}



.telegram-btn:hover {

    background: linear-gradient(135deg, #006699 0%, #004d73 100%);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);

}



.telegram-btn i {

    font-size: 18px;

}



/* Twitter Widget */

.twitter-widget .widget-header {

    background: linear-gradient(135deg, #1DA1F2 0%, #0d8bd9 100%);

    border-bottom: none;

}



.twitter-widget .widget-header::before {

    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent);

}



.twitter-widget .widget-icon {

    background: rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(10px);

}



.twitter-content {

    padding: 1.5rem;

    background: var(--card-bg);

}



.twitter-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    background: linear-gradient(135deg, #1DA1F2 0%, #0d8bd9 100%);

    color: var(--text-primary);

    padding: 0.875rem 2rem;

    border-radius: 8px;

    font-weight: 600;

    font-size: 15px;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(29, 161, 242, 0.3);

    width: 100%;

}



.twitter-btn:hover {

    background: linear-gradient(135deg, #0d8bd9 0%, #0a6fb5 100%);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(29, 161, 242, 0.4);

}



.twitter-btn i {

    font-size: 18px;

}



/* Stats Widget */

.stats-widget .widget-header {

    position: relative;

    background: var(--secondary-bg);

    border-bottom: 1px solid var(--border-color);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1rem 1.5rem;

}



.stats-content {

    padding: 1.2rem;

    background: var(--secondary-bg);

}



.date-tabs {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 0.2rem;

    margin-bottom: 1.5rem;

}



.date-tab {

    padding: 0.3rem 0.1rem;

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: 4px;

    color: var(--text-secondary);

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    text-align: center;

}



.date-tab:hover,

.date-tab.active {

    background: var(--accent-orange);

    color: var(--text-primary);

    border-color: var(--accent-orange);

}



.match-results-tab {

    display: none;

}



.match-results-tab.active {

    display: block;

}



.match-results {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.match-result {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0.8rem 0;

    margin-bottom: 0.5rem;

    border-bottom: 1px solid var(--dropdown-divider);

    transition: all 0.3s ease;

}



.match-result:last-child {

    border-bottom: none;

    margin-bottom: 0;

}



.match-result:hover {

    background: var(--hover-bg);

    border-radius: 6px;

    padding: 0.8rem;

    margin: 0 0 0.5rem 0;

}



.match-info {

    flex: 1;

}



.match-info h4 {

    color: var(--text-primary);

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 0.3rem;

    line-height: 1.2;

}



.match-info p {

    color: var(--text-secondary);

    font-size: 12px;

    margin: 0;

    line-height: 1.2;

}



.match-outcome {

    display: flex;

    align-items: center;

    gap: 0.8rem;

}



.odds {

    color: var(--color-warning);

    font-weight: 700;

    font-size: 14px;

    min-width: 40px;

    text-align: center;

}



.result-icon {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-primary);

    font-size: 12px;

    font-weight: 600;

}



.result-icon.success {

    background: #10b981;

}



.result-icon.failed {

    background: #ef4444;

}



.result-icon.pending {

    background: var(--color-warning);

}



/* Sidebar inline styles to classes */

.locked-prediction-text {

    color: var(--color-warning);

    font-size: 11px;

}



.match-time-text {

    font-size: 11px;

    color: var(--text-muted);

    margin-top: 4px;

}



.locked-result-icon {

    background: var(--bg-warning-alpha);

    color: var(--color-warning);

}



@media (max-width: 1024px) {

    .main-content-layout {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    

    .home-sidebar {

        order: -1;

    }

}





/* Image Slider */

.image-slider {

    position: relative;

    margin-bottom: 2rem;

    border-radius: var(--border-radius);

    overflow: hidden;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    touch-action: pan-y;

}



.slider-container {

    position: relative;

    height: 400px;

    overflow: hidden;

    cursor: grab;

}



.slider-container:active {

    cursor: grabbing;

}



.slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    transition: opacity 0.5s ease-in-out, transform 0.3s ease;

    user-select: none;

}



.slide.active {

    opacity: 1;

}



.slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    pointer-events: none;

}



.slide-content {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));

    padding: 3rem 2rem 2rem;

    color: var(--text-primary);

}



.slide-content h3 {

    font-size: var(--font-size-2xl);

    font-weight: 700;

    margin-bottom: 0.5rem;

}



.slide-content p {

    font-size: var(--font-size-lg);

    opacity: 0.9;

}



.slider-controls {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 100%;

    display: flex;

    justify-content: space-between;

    padding: 0 1rem;

    pointer-events: none;

}



.slider-btn {

    width: 50px;

    height: 50px;

    background: rgba(0, 0, 0, 0.5);

    border: none;

    border-radius: 50%;

    color: var(--text-primary);

    font-size: 18px;

    cursor: pointer;

    transition: all 0.3s ease;

    pointer-events: all;

    backdrop-filter: blur(10px);

}



.slider-btn:hover {

    background: rgba(0, 0, 0, 0.8);

    transform: scale(1.1);

}



.slider-dots {

    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 10px;

}



.dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.5);

    cursor: pointer;

    transition: all 0.3s ease;

}



.dot.active {

    background: white;

    transform: scale(1.2);

}



/* Enhanced Stats Section */

.enhanced-stats-section {

    margin: 2rem 0;

    padding: 3rem 0;

    background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--card-bg) 100%);

    border-radius: var(--border-radius);

    border: 1px solid var(--border-color);

}



.stats-header {

    text-align: center;

    margin-bottom: 3rem;

}



.stats-subtitle {

    color: var(--text-secondary);

    font-size: var(--font-size-lg);

    margin-top: 0.5rem;

}



.enhanced-stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

    padding: 0 2rem;

}



.enhanced-stat-card {

    position: relative;

    background: var(--card-bg);

    border-radius: var(--border-radius);

    padding: 2rem;

    border: 1px solid var(--border-color);

    overflow: hidden;

    transition: all 0.3s ease;

}



.enhanced-stat-card:hover {

    transform: translateY(-4px);

    border-color: var(--accent-blue);

    box-shadow: 0 12px 40px rgba(79, 124, 255, 0.2);

}



.stat-background {

    position: absolute;

    top: -20px;

    right: -20px;

    width: 100px;

    height: 100px;

    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);

    border-radius: 50%;

    opacity: 0.1;

}



.stat-icon-large {

    position: absolute;

    top: 10px;

    right: 10px;

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--accent-blue);

    font-size: 24px;

    z-index: 2;

}



.stat-content-enhanced {

    position: relative;

    z-index: 3;

}



.stat-number-large {

    display: block;

    font-size: 3rem;

    font-weight: 800;

    color: var(--text-primary);

    line-height: 1;

    margin-bottom: 0.5rem;

    background: var(--gradient-primary);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.stat-label-enhanced {

    display: block;

    color: var(--text-secondary);

    font-size: var(--font-size-lg);

    font-weight: 500;

    margin-bottom: 1rem;

}



.stat-progress {

    width: 100%;

    height: 6px;

    background: var(--secondary-bg);

    border-radius: 3px;

    overflow: hidden;

    margin-top: 1rem;

}



.progress-bar {

    height: 100%;

    background: var(--gradient-primary);

    border-radius: 3px;

    transition: width 1s ease-in-out;

}



.stat-trend {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-top: 1rem;

    font-size: var(--font-size-sm);

}



.stat-trend.positive {

    color: var(--accent-green);

}



.stat-trend.negative {

    color: #ef4444;

}





/* Mobile dropdown show class - EN YÜKSEK ÖNCELİK */

.notifications .notification-dropdown.show,

.user-menu .user-dropdown.show {

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: translateY(0) !important;

    pointer-events: auto !important;

}



.notification-dropdown.show,

.user-dropdown.show {

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: translateY(0) !important;

    pointer-events: auto !important;

}



/* Hover effects for desktop - DISABLED for mobile compatibility */

@media (min-width: 769px) {

    .notifications:hover .notification-dropdown,

    .notification-dropdown:hover {

        display: block;

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

        pointer-events: auto;

        transition-delay: 0s;

    }

    

    .notifications:hover .notification-dropdown {

        transition-delay: 0.1s;

    }

    

    .user-menu:hover .user-dropdown,

    .user-dropdown:hover {

        display: block;

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

        pointer-events: auto;

        transition-delay: 0s;

    }

    

    .user-menu:hover .user-dropdown {

        transition-delay: 0.1s;

    }

}



/* Mobile responsive styles */

@media (max-width: 1024px) {

    .header-content {

        gap: 1rem;

    }

    

    .user-info {

        display: none;

    }

    

    .vip-status {

        margin-left: 0;

    }

}



@media (max-width: 480px) {

    .header-content {

        padding: 0.25rem 0;

    }

    

    .logo {

        max-width: 150px;

    }

    

    .logo-link img {

        max-height: 35px;

    }

    

    .logo-text {

        font-size: 16px;

    }

    

    .vip-badge {

        padding: 4px 12px;

        font-size: 11px;

    }

    

    .notification-btn,

    .user-menu-btn {

        width: 36px;

        height: 36px;

    }

}





/* Single Sidebar Page Styles */

.article-header-sidebar {

    background: var(--secondary-bg);

    padding: 2rem 0;

    border-bottom: 1px solid var(--border-color);

}



.article-title-sidebar {

    font-size: var(--font-size-3xl);

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 1rem;

    line-height: 1.3;

}



.article-meta-sidebar {

    display: flex;

    gap: 2rem;

    flex-wrap: wrap;

}



.meta-item {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--text-secondary);

    font-size: var(--font-size-sm);

}



.meta-item i {

    color: var(--accent-blue);

}



.content-sidebar-layout {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 3rem;

    padding: 0.8rem 0;

}



.main-article {

    background: var(--card-bg);

    border-radius: var(--border-radius);

    padding: 2rem;

    border: 1px solid var(--border-color);

}



.featured-image-sidebar {

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: var(--border-radius);

    margin-bottom: 2rem;

}



.featured-image-sidebar img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    background: var(--primary-bg);

}



.content-intro .lead {

    font-size: var(--font-size-lg);

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: 2rem;

    font-weight: 500;

}



.article-content-sidebar h2 {

    font-size: var(--font-size-xl);

    font-weight: 600;

    color: var(--text-primary);

    margin: 2rem 0 1rem;

}



.article-content-sidebar p {

    color: var(--text-secondary);

    line-height: 1.7;

    margin-bottom: 1.5rem;

}



.quote-box {

    background: var(--secondary-bg);

    border-left: 4px solid var(--accent-blue);

    padding: 1.5rem;

    margin: 2rem 0;

    border-radius: 0 var(--border-radius) var(--border-radius) 0;

}



.quote-box blockquote {

    font-size: var(--font-size-lg);

    font-style: italic;

    color: var(--text-primary);

    margin-bottom: 1rem;

    line-height: 1.6;

}



.quote-box cite {

    color: var(--text-secondary);

    font-size: var(--font-size-sm);

}



.cta-box {

    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);

    padding: 2rem;

    border-radius: var(--border-radius);

    text-align: center;

    margin: 2rem 0;

}



.cta-box h3 {

    color: var(--text-primary);

    font-weight: 600;

    margin-bottom: 1rem;

}



.cta-box p {

    color: rgba(255, 255, 255, 0.9);

    margin-bottom: 1.5rem;

}



.article-footer-sidebar {

    border-top: 1px solid var(--border-color);

    padding-top: 2rem;

    margin-top: 2rem;

}



.tags-section,

.share-section {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 1rem;

}



.tags-label,

.share-label {

    color: var(--text-primary);

    font-weight: 600;

    min-width: 80px;

}



.tags-list {

    display: flex;

    gap: 0.5rem;

    flex-wrap: wrap;

}



.tag {

    background: var(--secondary-bg);

    color: var(--text-secondary);

    padding: 0.25rem 0.75rem;

    border-radius: 12px;

    font-size: var(--font-size-sm);

    transition: all 0.3s ease;

}



.tag:hover {

    background: var(--accent-blue);

    color: var(--text-primary);

}



.share-buttons {

    display: flex;

    gap: 0.5rem;

}



.share-btn {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-primary);

    transition: all 0.3s ease;

}



.share-btn.facebook { background: #4267b2; }

.share-btn.twitter { background: #1da1f2; }

.share-btn.whatsapp { background: #25d366; }

.share-btn.telegram { background: #0088cc; }



.share-btn:hover {

    transform: translateY(-2px);

}



/* Sidebar Spacing */

.sidebar {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.sidebar .sidebar-widget {

    margin-bottom: 0;

}



/* Sidebar Popular Widget */

.popular-widget .widget-header {

    background: linear-gradient(135deg, #ff6b35 0%, #f59e0b 100%);

    border-bottom: none;

}



.popular-widget .widget-header::before {

    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent);

}



.popular-widget .widget-icon {

    background: rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(10px);

}



.widget-content {

    padding: 1.5rem;

    background: var(--card-bg);

}



.popular-posts {

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

}



.popular-post {

    display: flex;

    gap: 1rem;

    padding-bottom: 1.25rem;

    border-bottom: 1px solid var(--border-color);

}



.popular-post:last-child {

    border-bottom: none;

    padding-bottom: 0;

}



.post-thumbnail {

    width: 90px;

    height: 70px;

    flex-shrink: 0;

    border-radius: 8px;

    overflow: hidden;

}



.post-thumbnail img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.popular-post:hover .post-thumbnail img {

    transform: scale(1.1);

}



.post-content {

    flex: 1;

}



.post-content h4 {

    font-size: 14px;

    line-height: 1.4;

    margin-bottom: 0.5rem;

}



.post-content h4 a {

    color: var(--text-primary);

    transition: color 0.3s ease;

}



.post-content h4 a:hover {

    color: var(--accent-orange);

}



.post-meta {

    font-size: 12px;

    color: var(--text-secondary);

}



.post-meta i {

    font-size: 10px;

    margin-right: 4px;

}



/* Premium Ad Widget */

.premium-ad-widget {

    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);

    border: none;

    position: relative;

    overflow: hidden;

}



.premium-ad-widget::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);

    animation: pulse 3s ease-in-out infinite;

}



@keyframes pulse {

    0%, 100% { transform: scale(1); opacity: 0.5; }

    50% { transform: scale(1.1); opacity: 0.8; }

}



.premium-ad-content {

    position: relative;

    z-index: 1;

    padding: 2rem 1.5rem;

    text-align: center;

}



.premium-icon {

    width: 60px;

    height: 60px;

    background: rgba(255, 255, 255, 0.2);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1rem;

    color: var(--color-warning);

    font-size: 28px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

}



.premium-title {

    color: var(--text-primary);

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 0.75rem;

}



.premium-description {

    color: rgba(255, 255, 255, 0.95);

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 1.5rem;

}







.premium-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

    color: #1e293b;

    padding: 0.875rem 2rem;

    border-radius: 8px;

    font-weight: 700;

    font-size: 15px;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);

    width: 100%;

}



.premium-btn:hover {

    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.5);

}



.premium-btn i {

    font-size: 16px;

}



/* Single Page Layout (No Sidebar) */

.content-single-layout {

    max-width: 900px;

    margin: 0 auto;

    padding: 0.8rem 0;

}



/* Contact Page Styles */

.contact-header {

    background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--card-bg) 100%);

    padding: 3rem 0;

    border-bottom: 1px solid var(--border-color);

    text-align: center;

}



.contact-title {

    font-size: var(--font-size-4xl);

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 1rem;

}



.contact-subtitle {

    font-size: var(--font-size-lg);

    color: var(--text-secondary);

    max-width: 600px;

    margin: 0 auto;

}



.contact-content {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.contact-info-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.5rem;

    margin-bottom: 2rem;

}



.contact-info-card {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius);

    padding: 2rem 1.5rem;

    text-align: center;

    transition: all 0.3s ease;

}



.contact-info-card:hover {

    transform: translateY(-4px);

    border-color: var(--accent-blue);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

}



.contact-icon {

    width: 64px;

    height: 64px;

    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1rem;

    font-size: 28px;

    color: var(--text-primary);

}



.contact-info-card:nth-child(1) .contact-icon {

    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);

}



.contact-info-card:nth-child(2) .contact-icon {

    background: linear-gradient(135deg, #0088cc 0%, #006699 100%);

}



.contact-info-card h3 {

    color: var(--text-primary);

    font-size: var(--font-size-lg);

    font-weight: 600;

    margin-bottom: 0.5rem;

}



.contact-info-card p {

    color: var(--text-secondary);

    font-size: var(--font-size-sm);

    margin-bottom: 1rem;

}



.contact-link {

    color: var(--accent-blue);

    font-weight: 600;

    transition: color 0.3s ease;

}



.contact-link:hover {

    color: var(--color-warning);

}



.contact-form-wrapper {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius);

    padding: 2rem;

}



.form-header {

    margin-bottom: 2rem;

    padding-bottom: 1.5rem;

    border-bottom: 1px solid var(--border-color);

}



.form-header h2 {

    color: var(--text-primary);

    font-size: var(--font-size-2xl);

    font-weight: 600;

    margin-bottom: 0.5rem;

}



.form-header p {

    color: var(--text-secondary);

    font-size: var(--font-size-sm);

}



.contact-form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.form-row {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1.5rem;

}



.form-group {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.form-group label {

    color: var(--text-primary);

    font-size: var(--font-size-sm);

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.form-group label i {

    color: var(--accent-blue);

    font-size: 14px;

}



.form-group input,

.form-group select,

.form-group textarea {

    background: var(--secondary-bg);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-sm);

    padding: 0.875rem 1rem;

    color: var(--text-primary);

    font-size: var(--font-size-base);

    transition: all 0.3s ease;

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--accent-blue);

    box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.1);

}



.form-group input::placeholder,

.form-group textarea::placeholder {

    color: var(--text-muted);

}



.form-group textarea {

    resize: vertical;

    min-height: 120px;

}



.checkbox-group {

    flex-direction: row;

    align-items: center;

}



.checkbox-label {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    cursor: pointer;

    font-weight: 400;

}



.checkbox-label input[type="checkbox"] {

    width: 18px;

    height: 18px;

    cursor: pointer;

}



.checkbox-label span {

    color: var(--text-secondary);

    font-size: var(--font-size-sm);

}



.checkbox-label a {

    color: var(--accent-blue);

    text-decoration: underline;

}



.submit-btn {

    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);

    color: var(--text-primary);

    border: none;

    border-radius: var(--border-radius-sm);

    padding: 1rem 2rem;

    font-size: var(--font-size-base);

    font-weight: 600;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(79, 124, 255, 0.3);

}



.submit-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(79, 124, 255, 0.4);

}



.submit-btn i {

    font-size: 18px;

}



.faq-section {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius);

    padding: 2rem;

}



.faq-section h2 {

    color: var(--text-primary);

    font-size: var(--font-size-2xl);

    font-weight: 600;

    margin-bottom: 1.5rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid var(--border-color);

}



.faq-item {

    margin-bottom: 1.5rem;

    padding-bottom: 1.5rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.faq-item:last-child {

    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: none;

}



.faq-question {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

    margin-bottom: 0.75rem;

}



.faq-question i {

    color: var(--accent-blue);

    font-size: 20px;

    flex-shrink: 0;

    margin-top: 2px;

}



.faq-question h3 {

    color: var(--text-primary);

    font-size: var(--font-size-lg);

    font-weight: 600;

}



.faq-answer p {

    color: var(--text-secondary);

    line-height: 1.6;

    padding-left: 2rem;

}



/* Blog Page Styles */

.blog-header {

    background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--card-bg) 100%);

    padding: 2rem 0;

    border-bottom: 1px solid var(--border-color);

    text-align: center;

}



.blog-header-title {

    font-size: var(--font-size-4xl);

    font-weight: 700;

    color: var(--color-warning);

  
    margin: 0;

}



.blog-main {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.blog-posts {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 2rem;

}



.blog-post-card {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius);

    overflow: hidden;

    transition: all 0.3s ease;

    display: flex;

    flex-direction: column;

}



.blog-post-card:hover {

    transform: translateY(-4px);

    border-color: var(--accent-blue);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

}



.blog-post-image {

    width: 100%;

    height: 200px;

    overflow: hidden;

}



.blog-post-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    background: var(--primary-bg);

    transition: transform 0.3s ease;

}



.blog-post-card:hover .blog-post-image img {

    transform: scale(1.05);

}



.blog-post-content {

    flex: 1;

    padding: 1.5rem;

    display: flex;

    flex-direction: column;

}



.blog-post-meta {

    display: flex;

    gap: 1.5rem;

    margin-bottom: 1rem;

    flex-wrap: wrap;

}



.blog-meta-item {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--text-muted);

    font-size: var(--font-size-sm);

}



.blog-meta-item i {

    color: var(--accent-blue);

    font-size: 12px;

}



.blog-post-title {

    margin-bottom: 1rem;

}



.blog-post-title a {

    color: var(--text-primary);

    font-size: var(--font-size-xl);

    font-weight: 600;

    line-height: 1.4;

    transition: color 0.3s ease;

}



.blog-post-title a:hover {

    color: var(--color-warning);

}



.blog-post-excerpt {

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: 1.5rem;

    flex: 1;

}



.blog-post-footer {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    padding-top: 1rem;

    border-top: 1px solid var(--border-color);

}



.blog-post-tags {

    display: flex;

    gap: 0.5rem;

    flex-wrap: wrap;

}



.blog-tag {

    background: var(--secondary-bg);

    color: var(--text-secondary);

    padding: 0.25rem 0.75rem;

    border-radius: 12px;

    font-size: var(--font-size-sm);

    transition: all 0.3s ease;

}



.blog-tag:hover {

    background: var(--accent-blue);

    color: var(--text-primary);

}



.blog-read-more {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--accent-blue);

    font-weight: 600;

    font-size: var(--font-size-sm);

    transition: all 0.3s ease;

    white-space: nowrap;

}



.blog-read-more:hover {

    color: var(--color-warning);

}



.blog-read-more i {

    transition: transform 0.3s ease;

}



.blog-read-more:hover i {

    transform: translateX(4px);

}



.blog-pagination {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 2rem 0;

    margin-top: 1rem;

}



.blog-page-btn {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1.5rem;

    background: var(--card-bg);

    color: var(--text-secondary);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-sm);

    font-weight: 500;

    transition: all 0.3s ease;

}



.blog-page-btn:hover:not(.disabled) {

    background: var(--accent-blue);

    color: var(--text-primary);

    border-color: var(--accent-blue);

}



.blog-page-btn.disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



.blog-page-numbers {

    display: flex;

    gap: 0.5rem;

    align-items: center;

}



.blog-page-number {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--card-bg);

    color: var(--text-secondary);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-sm);

    font-weight: 500;

    transition: all 0.3s ease;

}



.blog-page-number:hover,

.blog-page-number.active {

    background: var(--accent-blue);

    color: var(--text-primary);

    border-color: var(--accent-blue);

}



.blog-page-dots {

    color: var(--text-muted);

    padding: 0 0.5rem;

}



/* Responsive Blog */

@media (max-width: 1024px) {

    .blog-posts {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 768px) {

    .blog-header {

        padding: 1.5rem 0;

    }

    

    .blog-header-title {

        font-size: var(--font-size-2xl);

    }

    

    .blog-post-meta {

        flex-direction: column;

        gap: 0.5rem;

    }

    

    .blog-post-title a {

        font-size: var(--font-size-lg);

    }

    

    .blog-post-footer {

        flex-direction: column;

        align-items: flex-start;

        gap: 1rem;

    }

    

    .blog-pagination {

        flex-direction: column;

        gap: 1rem;

    }

    

    .blog-page-numbers {

        order: -1;

    }

}



/* VIP Packages Page Styles */

.vip-header {

    background: var(--bg-overlay);

    padding: 2rem 0;

    border-bottom: 1px solid var(--border-color);

    text-align: center;

}



.vip-header-title {

    font-size: var(--font-size-4xl);

    font-weight: 700;

    color: var(--color-warning);

    text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);

    margin-bottom: 1rem;

}



.vip-header-subtitle {

    color: var(--text-secondary);

    font-size: var(--font-size-base);

    max-width: 700px;

    margin: 0 auto;

}



.vip-packages-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.5rem;

    padding: 3rem 0;

    max-width: 1200px;

    margin: 0 auto;

}



.vip-package-card {

    background: var(--secondary-bg);

    border: 2px solid var(--border-color);

    border-radius: 12px;

    padding: 0;

    text-align: center;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



.vip-package-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 24px var(--shadow-lg);

}



.vip-package-card.popular {

    border-color: var(--color-warning);

}



.vip-package-card.best-value {

    border-color: var(--color-warning);

}



.vip-package-card.premium {

    border-color: var(--border-color);

}



.vip-package-card.lifetime {

    border-color: #8b5cf6;

    background: var(--bg-overlay);

}



.package-badge {

    position: absolute;

    top: 1rem;

    right: 1rem;

    background: var(--color-warning);

    color: var(--primary-bg);

    padding: 0.25rem 0.75rem;

    border-radius: 4px;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    z-index: 10;

}



.package-badge.popular {

    background: var(--color-warning);

}



.package-badge.special {

    background: #8b5cf6;

    color: var(--text-primary);

}



.package-discount-badge {

    position: absolute;

    top: 1rem;

    left: 1rem;

    background: var(--color-error);

    color: var(--text-primary);

    padding: 0.25rem 0.75rem;

    border-radius: 4px;

    font-size: 11px;

    font-weight: 700;

    z-index: 10;

}



.package-header {

    padding: 1.5rem 1.5rem 1rem;

}



.package-title {

    color: var(--color-warning);

    font-size: 18px;

    font-weight: 700;

    margin: 0;

}



.package-body {

    padding: 0 1.5rem 1.5rem;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.package-duration {

    font-size: 32px;

    font-weight: 800;

    color: var(--text-primary);

    margin-bottom: 1rem;

}



.package-features {

    list-style: none;

    padding: 0;

    margin: 0 0 1.5rem 0;

    text-align: left;

    flex: 1;

}



.package-features li {

    color: var(--text-secondary);

    font-size: 13px;

    padding: 0.5rem 0;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    border-bottom: 1px solid var(--border-color);

}



.package-features li:last-child {

    border-bottom: none;

}



.package-features li i {

    color: var(--color-success);

    font-size: 12px;

    flex-shrink: 0;

}



.package-price-old {

    color: var(--text-muted);

    font-size: 14px;

    text-decoration: line-through;

    margin-bottom: 0.25rem;

}



.package-price {

    font-size: 28px;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 0;

}



.package-btn { 

    width: 100%;

    padding: 0.875rem 1.5rem;


	background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%);

    color: #fff;

    border: none;

    border-radius: 0 0 10px 10px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    margin-top: auto;

}



.package-btn:hover {

    filter: brightness(1.1);

}



.package-btn.special {

    background: linear-gradient(90deg, #8b5cf6 0%, #a855f7 100%);

}



.package-btn i {

    font-size: 14px;

}



/* Responsive VIP Packages */

@media (max-width: 1024px) {

    .vip-packages-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 768px) {

    .vip-header {

        padding: 1.5rem 0;

    }

    

    .vip-header-title {

        font-size: var(--font-size-2xl);

    }

    

    .vip-packages-grid {

        grid-template-columns: 1fr;

        padding: 2rem 0;

    }

    

    .package-duration {

        font-size: 28px;

    }

}



/* Responsive Contact Page */

@media (max-width: 1024px) {

    .contact-info-grid {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 768px) {

    .contact-title {

        font-size: var(--font-size-2xl);

    }

    

    .contact-subtitle {

        font-size: var(--font-size-base);

    }

    

    .contact-info-grid {

        grid-template-columns: 1fr;

    }

    

    .form-row {

        grid-template-columns: 1fr;

    }

    

    .contact-form-wrapper,

    .faq-section {

        padding: 1.5rem;

    }

}



/* Responsive Single Sidebar */

@media (max-width: 1024px) {

    .content-sidebar-layout {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

}



@media (max-width: 768px) {

    .article-title-sidebar {

        font-size: var(--font-size-xl);

        line-height: 1.4;

    }

    

    .article-meta-sidebar {

        flex-direction: row;

        gap: 1rem;

        flex-wrap: wrap;

    }

    

    .meta-item {

        font-size: 12px;

    }

    

    .main-article {

        padding: 1.5rem;

    }

    

    .content-sidebar-layout {

        display: flex;

        flex-direction: column;

    }

    

    .sidebar {

        order: 2;

    }

    

    .main-article {

        order: 1;

    }

    

    .featured-image-sidebar {

        margin-bottom: 1.5rem;

    }

}



/* ============================================

   VIP Required Notice (Global)

   ============================================ */



.vip-required-notice {

    position: relative;

    display: flex;

    gap: 2rem;

    padding: 2.5rem;

    background: var(--bg-overlay);

    border: 2px solid transparent;

    border-radius: 16px;

    margin: 2rem 0;

    align-items: center;

    overflow: hidden;

    box-shadow: var(--shadow-lg);

}



/* Animated gradient border */

.vip-required-notice::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    border-radius: 16px;

    padding: 2px;

    background: linear-gradient(45deg, #f59e0b, #fbbf24, #f59e0b, #d97706);

    background-size: 300% 300%;

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    animation: gradientShift 3s ease infinite;

    z-index: 1;

}



@keyframes gradientShift {

    0%, 100% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

}



/* Glow effect */

.vip-required-notice::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;

    height: 100%;

    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);

    animation: pulse 2s ease-in-out infinite;

    z-index: 0;

}



@keyframes pulse {

    0%, 100% {

        opacity: 0.5;

        transform: translate(-50%, -50%) scale(1);

    }

    50% {

        opacity: 1;

        transform: translate(-50%, -50%) scale(1.05);

    }

}



.vip-notice-icon {

    position: relative;

    flex-shrink: 0;

    width: 100px;

    height: 100px;

    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 0 30px rgba(245, 158, 11, 0.6), 0 0 60px rgba(245, 158, 11, 0.3);

    animation: iconFloat 3s ease-in-out infinite;

    z-index: 2;

}



@keyframes iconFloat {

    0%, 100% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-10px);

    }

}



.vip-notice-icon::before {

    content: '';

    position: absolute;

    top: -5px;

    left: -5px;

    right: -5px;

    bottom: -5px;

    background: linear-gradient(45deg, #fbbf24, #f59e0b, #d97706, #f59e0b);

    border-radius: 50%;

    z-index: -1;

    opacity: 0.5;

    filter: blur(10px);

    animation: iconGlow 2s ease-in-out infinite;

}



@keyframes iconGlow {

    0%, 100% {

        opacity: 0.5;

    }

    50% {

        opacity: 0.8;

    }

}



.vip-notice-icon i {

    font-size: 42px;

    color: var(--text-primary);

    animation: iconShake 4s ease-in-out infinite;

    z-index: 1;

}



@keyframes iconShake {

    0%, 100% {

        transform: rotate(0deg);

    }

    10%, 30% {

        transform: rotate(-5deg);

    }

    20%, 40% {

        transform: rotate(5deg);

    }

    50% {

        transform: rotate(0deg);

    }

}



.vip-notice-content {

    flex: 1;

    z-index: 2;

}



.vip-notice-title {

    color: var(--text-primary);

    font-size: 24px;

    font-weight: 700;

    margin: 0 0 1rem 0;

    text-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);

    animation: titleGlow 2s ease-in-out infinite;

}



@keyframes titleGlow {

    0%, 100% {

        text-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);

    }

    50% {

        text-shadow: 0 2px 20px rgba(245, 158, 11, 0.6);

    }

}



.vip-notice-text {

    color: var(--text-secondary);

    font-size: 15px;

    line-height: 1.7;

    margin: 0 0 1.5rem 0;

}



.vip-notice-text strong {

    color: var(--color-warning);

    font-weight: 700;

    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);

}



.vip-notice-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    padding: 1rem 2rem;

    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

    border: none;

    border-radius: 10px;

    color: var(--text-primary);

    font-size: 16px;

    font-weight: 700;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);

    overflow: hidden;

}



.vip-notice-btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

    transition: left 0.5s ease;

}



.vip-notice-btn:hover::before {

    left: 100%;

}



.vip-notice-btn:hover {

    transform: translateY(-3px) scale(1.05);

    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.6);

    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

}



.vip-notice-btn i {

    font-size: 18px;

    animation: crownSpin 3s linear infinite;

}



@keyframes crownSpin {

    0%, 90% {

        transform: rotate(0deg);

    }

    95% {

        transform: rotate(-15deg);

    }

    100% {

        transform: rotate(0deg);

    }

}



/* VIP Notice Responsive */

@media (max-width: 768px) {

    .vip-required-notice {

        flex-direction: column;

        text-align: center;

        padding: 2rem 1.5rem;

        gap: 1.5rem;

    }

    

    .vip-notice-icon {

        width: 80px;

        height: 80px;

    }

    

    .vip-notice-icon i {

        font-size: 36px;

    }

    

    .vip-notice-title {

        font-size: 20px;

    }

    

    .vip-notice-text {

        font-size: 14px;

    }

}



/* ============================================

   VIP Packages - Light Mode

   ============================================ */

[data-theme="light"] .vip-header {

    background: var(--bg-overlay-subtle);

    border-bottom-color: var(--border-color);

}



[data-theme="light"] .vip-package-card {

    background: #ffffff;

    border-color: var(--border-color);

}



[data-theme="light"] .vip-package-card:hover {

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

}



[data-theme="light"] .vip-package-card.lifetime {

    background: var(--bg-overlay-subtle);

}



[data-theme="light"] .package-badge {

    color: #1a1a1a;

}



[data-theme="light"] .vip-required-notice {

    background: var(--bg-overlay-subtle);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

}



[data-theme="light"] .vip-required-notice::after {

    background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 70%);

}



/* ============================================

   Eğitimler Sayfası

   ============================================ */



.page-header {

    text-align: center;

    padding: 2rem 0 3rem;

    border-bottom: 1px solid #2d3748;

    margin-bottom: 3rem;

}



.page-title {

    font-size: 32px;

    font-weight: 700;

    color: var(--text-primary);

    margin: 0 0 1rem 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

}



.page-title i {

    color: var(--color-warning);

    font-size: 36px;

}



.page-description {

    color: var(--text-secondary);

    font-size: 16px;

    margin: 0;

    line-height: 1.6;

}



.egitim-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

    gap: 2rem;

    margin-bottom: 3rem;

}



.egitim-card {

    background: #1e293b;

    border: 1px solid #334155;

    border-radius: 16px;

    overflow: hidden;

    transition: all 0.3s ease;

    position: relative;

}



.egitim-card:hover {

    transform: translateY(-8px);

    border-color: #4f7cff;

    box-shadow: 0 12px 40px rgba(79, 124, 255, 0.3);

}



.egitim-thumbnail {

    position: relative;

    width: 100%;

    height: 200px;

    overflow: hidden;

    background: var(--primary-bg);

}



.egitim-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.egitim-card:hover .egitim-image {

    transform: scale(1.1);

}



.egitim-play-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 0, 0, 0.4);

    opacity: 0;

    transition: opacity 0.3s ease;

    z-index: 1;

}



.egitim-card:hover .egitim-play-overlay {

    opacity: 1;

}



.egitim-play-overlay i {

    font-size: 64px;

    color: var(--text-primary);

    transition: all 0.3s ease;

    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));

}



.egitim-card:hover .egitim-play-overlay i {

    transform: scale(1.2);

    color: var(--color-warning);

}



.egitim-image-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);

    position: relative;

}



.egitim-image-placeholder::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(79, 124, 255, 0.1) 0%, rgba(0, 212, 170, 0.1) 100%);

}



.egitim-image-placeholder i {

    font-size: 64px;

    color: #4f7cff;

    z-index: 1;

    transition: all 0.3s ease;

}



.egitim-card:hover .egitim-image-placeholder i {

    transform: scale(1.2);

    color: var(--color-warning);

}



.egitim-duration {

    position: absolute;

    bottom: 1rem;

    right: 1rem;

    background: rgba(0, 0, 0, 0.8);

    backdrop-filter: blur(10px);

    padding: 0.5rem 1rem;

    border-radius: 8px;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 13px;

    color: var(--text-primary);

    font-weight: 600;

    z-index: 2;

}



.egitim-duration i {

    color: var(--color-warning);

    font-size: 12px;

}



.egitim-content {

    padding: 1.5rem;

}



.egitim-title {

    color: var(--text-primary);

    font-size: 18px;

    font-weight: 600;

    margin: 0 0 1.5rem 0;

    line-height: 1.4;

    min-height: 50px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.egitim-btn {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 1rem 1.5rem;

    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

    border: none;

    border-radius: 10px;

    color: var(--text-primary);

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.egitim-btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    transition: left 0.5s ease;

}



.egitim-btn:hover::before {

    left: 100%;

}



.egitim-btn:hover {

    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);

}



.egitim-btn i {

    font-size: 14px;

    transition: transform 0.3s ease;

}



.egitim-btn:hover i {

    transform: translateX(5px);

}



/* Pagination */

.pagination-wrapper {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    padding: 2rem 0;

}



.pagination-btn {

    width: 44px;

    height: 44px;

    background: #1e293b;

    border: 1px solid #334155;

    border-radius: 10px;

    color: var(--text-secondary);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    font-size: 14px;

}



.pagination-btn:hover {

    background: #334155;

    border-color: #4f7cff;

    color: var(--text-primary);

}



.pagination-btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



.pagination-numbers {

    display: flex;

    gap: 0.5rem;

}



.pagination-number {

    width: 44px;

    height: 44px;

    background: #1e293b;

    border: 1px solid #334155;

    border-radius: 10px;

    color: var(--text-secondary);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    font-size: 15px;

    font-weight: 600;

}



.pagination-number:hover {

    background: #334155;

    border-color: #4f7cff;

    color: var(--text-primary);

}



.pagination-number.active {

    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

    border-color: var(--color-warning);

    color: #0f172a;

    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);

}



/* Responsive */

@media (max-width: 768px) {

    .page-title {

        font-size: 24px;

    }

    

    .page-title i {

        font-size: 28px;

    }

    

    .page-description {

        font-size: 14px;

    }

    

    .egitim-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    

    .egitim-thumbnail {

        height: 180px;

    }

    

    .egitim-play-overlay i {

        font-size: 48px;

    }

    

    .pagination-wrapper {

        gap: 0.5rem;

    }

    

    .pagination-btn,

    .pagination-number {

        width: 40px;

        height: 40px;

        font-size: 13px;

    }

}









/* ============================================

   Auth Modal (Giriş/Kayıt)

   ============================================ */



.auth-modal {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 10000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 1rem;

}



.auth-modal.active {

    display: flex;

}



.auth-modal-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.8);

    backdrop-filter: blur(8px);

}



.auth-modal-content {

    position: relative;

    width: 100%;

    max-width: 480px;

    background: #1e293b;

    border-radius: 20px;

    border: 1px solid #334155;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

    z-index: 1;

    animation: modalSlideIn 0.3s ease;

}



@keyframes modalSlideIn {

    from {

        opacity: 0;

        transform: translateY(-30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.auth-modal-close {

    position: absolute;

    top: 1.5rem;

    right: 1.5rem;

    width: 40px;

    height: 40px;

    background: rgba(255, 255, 255, 0.1);

    border: none;

    border-radius: 10px;

    color: var(--text-secondary);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    z-index: 2;

}



.auth-modal-close:hover {

    background: rgba(255, 255, 255, 0.2);

    color: var(--text-primary);

}



/* Tab Başlıkları */

.auth-tabs {

    display: grid;

    grid-template-columns: 1fr 1fr;

    border-bottom: 1px solid var(--user-dropdown-divider);

}



.auth-tab {

    padding: 1.5rem;

    background: transparent;

    border: none;

    color: #64748b;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    position: relative;

}



.auth-tab:hover {

    color: var(--text-secondary);

    background: rgba(255, 255, 255, 0.02);

}



.auth-tab.active {

    color: var(--text-primary);

    background: rgba(79, 124, 255, 0.1);

}



.auth-tab.active::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(90deg, #4f7cff 0%, #00d4aa 100%);

}



/* Form Container */

.auth-form-container {

    padding: 2.5rem;

}



/* Google Butonu */

.auth-google-btn {

    width: 100%;

    padding: 1rem;

    background: var(--text-primary);

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    color: #1e293b;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

    transition: all 0.3s ease;

}



.auth-google-btn:hover {

    background: #f8fafc;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.auth-google-btn i {

    font-size: 18px;

}



/* Divider */

.auth-divider {

    display: flex;

    align-items: center;

    margin: 1.5rem 0;

    color: #64748b;

    font-size: 14px;

}



.auth-divider::before,

.auth-divider::after {

    content: '';

    flex: 1;

    height: 1px;

    background: #334155;

}



.auth-divider span {

    padding: 0 1rem;

}



/* Form */

.auth-form {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.auth-input-group {

    position: relative;

}



.auth-input {

    width: 100%;

    padding: 1rem 1.25rem;

    background: var(--primary-bg);

    border: 1px solid #334155;

    border-radius: 12px;

    color: var(--text-primary);

    font-size: 15px;

    transition: all 0.3s ease;

}



.auth-input:focus {

    outline: none;

    border-color: #4f7cff;

    box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.1);

}



.auth-input::placeholder {

    color: #64748b;

}



/* Options */

.auth-options {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 0.5rem;

}



.auth-checkbox {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--text-secondary);

    font-size: 14px;

    cursor: pointer;

}



.auth-checkbox input[type="checkbox"] {

    width: 18px;

    height: 18px;

    cursor: pointer;

}



.auth-forgot-link {

    color: #4f7cff;

    font-size: 14px;

    text-decoration: none;

    transition: color 0.3s ease;

}



.auth-forgot-link:hover {

    color: #00d4aa;

}



/* Submit Button */

.auth-submit-btn {

    width: 100%;

    padding: 1rem;

    background: linear-gradient(135deg, #4f7cff 0%, #00d4aa 100%);

    border: none;

    border-radius: 12px;

    color: var(--text-primary);

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.3s ease;

    margin-top: 0.5rem;

}



.auth-submit-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(79, 124, 255, 0.4);

}



/* Footer */

.auth-footer {

    text-align: center;

    margin-top: 1.5rem;

    padding-top: 1.5rem;

    border-top: 1px solid var(--user-dropdown-divider);

    color: var(--text-secondary);

    font-size: 14px;

}



.auth-footer a {

    color: #4f7cff;

    text-decoration: none;

    font-weight: 600;

    margin-left: 0.5rem;

    transition: color 0.3s ease;

}



.auth-footer a:hover {

    color: #00d4aa;

}



/* Responsive */

@media (max-width: 768px) {

    .auth-modal-content {

        max-width: 100%;

        margin: 0 1rem;

    }

    

    .auth-form-container {

        padding: 2rem 1.5rem;

    }

    

    .auth-tab {

        padding: 1.25rem;

        font-size: 15px;

    }

}



/* No Results Message */

.no-results {

    text-align: center;

    padding: 2rem 1rem;

    color: var(--text-secondary);

}



.no-results p {

    font-size: 14px;

    margin: 0;

}



/* ============================================
   SPONSOR BAYİ BANNER - 728x90 STYLE
   ============================================ */

.sponsor-bayi-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(11, 143, 60, 0.15) 0%, rgba(15, 23, 42, 0.9) 40%, rgba(255, 212, 0, 0.1) 100%);
    border: 1px solid rgba(11, 143, 60, 0.3);
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 30px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(11, 143, 60, 0.12),
        0 0 0 1px rgba(255, 212, 0, 0.08) inset;
    transition: all 0.3s ease;
    height: 90px;
}

.sponsor-bayi-banner:hover {
    border-color: rgba(255, 212, 0, 0.4);
    box-shadow: 
        0 6px 28px rgba(11, 143, 60, 0.18),
        0 0 0 1px rgba(255, 212, 0, 0.15) inset,
        0 0 40px rgba(255, 212, 0, 0.08);
    transform: translateY(-1px);
}

.banner-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.bayi-icon-small {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #0B8F3C 0%, #0d7a33 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFD400;
    box-shadow: 
        0 4px 12px rgba(11, 143, 60, 0.3),
        0 0 0 2px rgba(255, 212, 0, 0.15);
    flex-shrink: 0;
}

.banner-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.banner-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.banner-title strong {
    background: linear-gradient(135deg, #FFD400 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.banner-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 400;
}

.banner-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.bayi-kod-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0B8F3C 0%, #0d9943 100%);
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 
        0 2px 10px rgba(11, 143, 60, 0.3),
        0 0 0 1px rgba(255, 212, 0, 0.2) inset;
    white-space: nowrap;
}

.kod-icon {
    font-size: 14px;
}

.kod-text {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.kod-text strong {
    color: #FFD400;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;
}

.banner-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, #0B8F3C 0%, #FFD400 100%);
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 
        0 4px 16px rgba(11, 143, 60, 0.3),
        0 0 20px rgba(255, 212, 0, 0.15);
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.banner-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.4s;
}

.banner-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(11, 143, 60, 0.4),
        0 0 30px rgba(255, 212, 0, 0.25);
}

.banner-cta-btn:hover::before {
    left: 100%;
}

.banner-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 0% 50%, rgba(11, 143, 60, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 50%, rgba(255, 212, 0, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.sponsor-bayi-banner > * {
    position: relative;
    z-index: 1;
}

/* Mobil Uyumluluk */
@media (max-width: 968px) {
    .sponsor-bayi-banner {
        flex-direction: column;
        height: auto;
        padding: 20px;
        gap: 16px;
    }
    
    .banner-left {
        width: 100%;
    }
    
    .banner-right {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }
    
    .bayi-kod-compact,
    .banner-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   Sponsor Bayi Banner - Light Mode
   ============================================ */
[data-theme="light"] .sponsor-bayi-banner {
    background: linear-gradient(135deg, rgba(11, 143, 60, 0.08) 0%, rgba(255, 255, 255, 0.95) 40%, rgba(255, 212, 0, 0.08) 100%);
    border-color: rgba(11, 143, 60, 0.25);
    box-shadow: 
        0 4px 20px rgba(11, 143, 60, 0.1),
        0 0 0 1px rgba(255, 212, 0, 0.15) inset;
}

[data-theme="light"] .sponsor-bayi-banner:hover {
    border-color: rgba(255, 212, 0, 0.5);
    box-shadow: 
        0 6px 28px rgba(11, 143, 60, 0.15),
        0 0 0 1px rgba(255, 212, 0, 0.3) inset,
        0 0 40px rgba(255, 212, 0, 0.12);
}

[data-theme="light"] .bayi-icon-small {
    background: linear-gradient(135deg, #0B8F3C 0%, #0d9943 100%);
    box-shadow: 
        0 4px 12px rgba(11, 143, 60, 0.25),
        0 0 0 2px rgba(255, 212, 0, 0.2);
}

[data-theme="light"] .banner-title {
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .banner-title strong {
    background: linear-gradient(135deg, #c9a500 0%, #8b7500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: brightness(1.1);
    text-shadow: 0 0 20px rgba(201, 165, 0, 0.3);
}

[data-theme="light"] .banner-subtitle {
    color: var(--text-secondary);
    font-weight: 500;
}

[data-theme="light"] .bayi-kod-compact {
    background: linear-gradient(135deg, #0B8F3C 0%, #0d9943 100%);
    box-shadow: 
        0 2px 10px rgba(11, 143, 60, 0.25),
        0 0 0 1px rgba(255, 212, 0, 0.25) inset;
}

[data-theme="light"] .kod-text {
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .banner-cta-btn {
    background: linear-gradient(135deg, #0B8F3C 0%, #FFD400 100%);
    color: #0f172a;
    box-shadow: 
        0 4px 16px rgba(11, 143, 60, 0.25),
        0 0 20px rgba(255, 212, 0, 0.2);
}

[data-theme="light"] .banner-cta-btn:hover {
    box-shadow: 
        0 6px 20px rgba(11, 143, 60, 0.35),
        0 0 30px rgba(255, 212, 0, 0.3);
}

[data-theme="light"] .banner-glow {
    background: 
        radial-gradient(ellipse at 0% 50%, rgba(11, 143, 60, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 50%, rgba(255, 212, 0, 0.06) 0%, transparent 50%);
}

@media (max-width: 640px) {
    .banner-title {
        font-size: 14px;
    }
    
    .banner-subtitle {
        font-size: 12px;
    }
    
    .bayi-icon-small {
        width: 36px;
        height: 36px;
    }
    
    .bayi-icon-small svg {
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   Üyelik/Erişim Uyarı Balonları
   ============================================ */

.access-denied-notice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid transparent;
    border-radius: 20px;
    margin: 3rem auto;
    max-width: 800px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Animated gradient border */
.access-denied-notice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(45deg, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ef4444);
    background-size: 400% 400%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderFlow 8s ease infinite;
    z-index: 1;
}

@keyframes borderFlow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Glow effect */
.access-denied-notice::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(79, 124, 255, 0.15) 0%, transparent 70%);
    animation: glowPulse 3s ease-in-out infinite;
    z-index: 0;
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.access-denied-icon {
    position: relative;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.6), 0 0 80px rgba(239, 68, 68, 0.3);
    animation: iconBounce 2s ease-in-out infinite;
    z-index: 2;
}

@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-15px) scale(1.05);
    }
}

.access-denied-icon::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: linear-gradient(45deg, #f87171, #ef4444, #dc2626, #ef4444);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.6;
    filter: blur(15px);
    animation: iconGlowAnim 3s ease-in-out infinite;
}

@keyframes iconGlowAnim {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.9;
    }
}

.access-denied-icon i {
    font-size: 56px;
    color: var(--text-primary);
    animation: iconShakeAnim 3s ease-in-out infinite;
    z-index: 1;
}

@keyframes iconShakeAnim {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

.access-denied-content {
    position: relative;
    z-index: 2;
}

.access-denied-title {
    color: var(--text-primary);
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 1rem 0;
    text-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    animation: titlePulseAnim 2s ease-in-out infinite;
}

@keyframes titlePulseAnim {
    0%, 100% {
        text-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }
    50% {
        text-shadow: 0 4px 24px rgba(239, 68, 68, 0.6);
    }
}

.access-denied-message {
    color: #cbd5e1;
    font-size: 18px;
    line-height: 1.8;
    margin: 0 0 2rem 0;
    max-width: 600px;
}

.access-denied-message strong {
    color: var(--color-warning);
    font-weight: 700;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.access-denied-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.access-denied-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 2.5rem;
    border: none;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden;
    min-width: 180px;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
}

.access-denied-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.access-denied-btn:hover::before {
    left: 100%;
}

.access-denied-btn.primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

.access-denied-btn.primary:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.6);
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.access-denied-btn.secondary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.access-denied-btn.secondary:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.6);
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

.access-denied-btn.vip {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.4);
}

.access-denied-btn.vip:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 32px rgba(251, 191, 36, 0.6);
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
}

.access-denied-btn i {
    font-size: 20px;
    animation: iconFloat 2s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .access-denied-notice {
        padding: 3rem 1.5rem;
        margin: 2rem 1rem;
    }
    
    .access-denied-icon {
        width: 100px;
        height: 100px;
    }
    
    .access-denied-icon i {
        font-size: 48px;
    }
    
    .access-denied-title {
        font-size: 24px;
    }
    
    .access-denied-message {
        font-size: 16px;
    }
    
    .access-denied-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .access-denied-btn {
        width: 100%;
        min-width: auto;
    }
}


.mrg-t-10{
	margin-top: 10px;
}
.mrg-b-10{
	margin-bottom: 10px;
}
.mrg-r-10{
	margin-right: 10px;
}
.mrg-r-10{
	margin-left: 10px;
}


/* Kullanıcı Mesajları Dropdown */
.user-messages {
    position: relative;
 
}

.message-btn {
   width: 40px;
    height: 40px;

	background: var(--bg-overlay-strong);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.message-btn:hover {
    color: var(--text-primary);
}

.message-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 350px;
    background: var(--user-dropdown-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s;
    z-index: 1000;
    max-height: 500px;
    display: flex;
    flex-direction: column;
}

.message-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.message-dropdown-header {
    padding: 15px;
    border-bottom: 1px solid var(--dropdown-divider);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-dropdown-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

.message-dropdown-body {
    overflow-y: auto;
    max-height: 400px;
}

.message-item {
    display: block;
    padding: 12px 15px;
    border-bottom: 1px solid var(--dropdown-divider);
    transition: background 0.2s;
    text-decoration: none;
}

.message-item:hover {
    background: var(--bg-overlay-light);
}

.message-item.unread {
    background: var(--bg-success-alpha-light);
}

.message-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.message-sender {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-success);
}

.message-item.unread .message-sender {
    color: var(--color-success);
}

.message-time {
    font-size: 11px;
    color: var(--text-muted);
}

.message-subject {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 3px;
}

.message-preview {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-messages {
    padding: 40px 20px;
    text-align: center;
}

@media (max-width: 768px) {
    .message-dropdown {
        width: 300px;
        right: -50px;
    }
}

/* Force black text in legal notice content - ONLY in light mode */
[data-theme="light"] .legal-notice-content * {
    color: #000000 !important;
}

.ai-scan-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    background: linear-gradient(95deg, #a9791d, #f5c518 38%, #ffe98a 55%, #d4af37 78%, #a9791d);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: aiScanWobble 3.4s ease-in-out infinite;
    transform-origin: 50% 65%;
}
.ai-scan-nav i {
    color: #e6b31e;
    -webkit-text-fill-color: #e6b31e;
    font-size: .92em;
    animation: aiScanGlow 3.4s ease-in-out infinite;
}
.ai-scan-nav .ai-scan-spark {
    font-size: .62em;
    color: #fff0b3;
    -webkit-text-fill-color: #fff0b3;
    animation: aiScanSpark 3.4s ease-in-out infinite;
}
.nav-link:hover .ai-scan-nav,
.mobile-nav-link:hover .ai-scan-nav {
    filter: brightness(1.15);
}
@keyframes aiScanWobble {
    0%, 66%, 100% { transform: rotate(0deg) scale(1); }
    72%  { transform: rotate(-7deg) scale(1.05); }
    78%  { transform: rotate(6deg) scale(1.05); }
    84%  { transform: rotate(-4deg) scale(1.02); }
    90%  { transform: rotate(2deg) scale(1.01); }
    95%  { transform: rotate(0deg) scale(1); }
}
@keyframes aiScanGlow {
    0%, 60%, 100% { filter: drop-shadow(0 0 0 rgba(245,197,24,0)); }
    80% { filter: drop-shadow(0 0 6px rgba(245,197,24,.8)); }
}
@keyframes aiScanSpark {
    0%, 55%, 100% { opacity: .35; transform: scale(.75) rotate(0deg); }
    75% { opacity: 1; transform: scale(1.35) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-scan-nav,
    .ai-scan-nav i,
    .ai-scan-nav .ai-scan-spark { animation: none; }
}

.nav-item:has(.ai-scan-nav) .dropdown-link,
.mobile-nav-item:has(.ai-scan-nav) .mobile-dropdown-link {
    border-left: 2px solid transparent;
}
.nav-item:has(.ai-scan-nav) .dropdown-link span,
.mobile-nav-item:has(.ai-scan-nav) .mobile-dropdown-link span {
    font-weight: 700;
    background: linear-gradient(95deg, #c9961f, #f5c518 40%, #ffe98a 60%, #d4af37);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.nav-item:has(.ai-scan-nav) .dropdown-link:hover,
.mobile-nav-item:has(.ai-scan-nav) .mobile-dropdown-link:hover {
    background: rgba(245, 197, 24, 0.1);
    border-left-color: #f5c518;
}
.nav-item:has(.ai-scan-nav) .dropdown-link:hover span,
.mobile-nav-item:has(.ai-scan-nav) .mobile-dropdown-link:hover span {
    filter: brightness(1.15);
}
[data-theme="light"] .nav-item:has(.ai-scan-nav) .dropdown-link span,
[data-theme="light"] .mobile-nav-item:has(.ai-scan-nav) .mobile-dropdown-link span {
    background: linear-gradient(95deg, #8a5f0c, #b8860b 45%, #a9791d);
    -webkit-background-clip: text;
    background-clip: text;
}

.kuponmatik-nav {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    background: linear-gradient(100deg, #7c3aed 0%, #a78bfa 30%, #22d3ee 50%, #a78bfa 70%, #7c3aed 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: kuponmatikParilti 4.5s linear infinite;
}
.kuponmatik-nav b {
    font-weight: 900;
    letter-spacing: .2px;
}
.kuponmatik-ikon {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 6px;
    background: linear-gradient(135deg, #7c3aed, #22d3ee);
    box-shadow: 0 2px 8px rgba(124, 58, 237, .45);
    overflow: hidden;
}
.kuponmatik-ikon i {
    font-size: 10px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    transform: rotate(-12deg);
    animation: kuponmatikBilet 4.5s ease-in-out infinite;
}
.nav-link:hover .kuponmatik-nav,
.mobile-nav-link:hover .kuponmatik-nav {
    filter: brightness(1.15);
}
@keyframes kuponmatikParilti {
    0% { background-position: 110% 0; }
    100% { background-position: -110% 0; }
}
@keyframes kuponmatikBilet {
    0%, 70%, 100% { transform: translateY(0) rotate(-12deg); }
    76% { transform: translateY(16px) rotate(-12deg); }
    77% { transform: translateY(-16px) rotate(-12deg); }
    86% { transform: translateY(1px) rotate(-12deg); }
    92% { transform: translateY(0) rotate(-12deg) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
    .kuponmatik-nav,
    .kuponmatik-ikon i { animation: none; }
}