:root, body {
    --theme-primary: #9522bf;
    --theme-primary-rgb: 149, 34, 191;
    --theme-secondary: #ff159c;
    --theme-secondary-rgb: 255, 21, 156;
    --color-brand-primary: var(--theme-primary) !important;
    --color-brand-primary-dark: var(--theme-secondary) !important;
    --color-bg-body: #09020d !important;      
    --color-bg-sidebar: #100318 !important;   
    --color-bg-card: #14041e !important;      
    --color-bg-elevated: #1b0628 !important;  
    --color-bg-deep: #06010a !important;      
    --color-border: rgba(149, 34, 191, 0.25) !important;
    --color-border-light: rgba(149, 34, 191, 0.15) !important;
    --color-border-subtle: rgba(149, 34, 191, 0.08) !important;
}

.bg-bg-body { background-color: var(--color-bg-body) !important; }
.bg-bg-card { background-color: var(--color-bg-card) !important; }
.bg-bg-sidebar { background-color: var(--color-bg-sidebar) !important; }
.bg-bg-elevated { background-color: var(--color-bg-elevated) !important; }
.bg-bg-deep { background-color: var(--color-bg-deep) !important; }
.border-border-light { border-color: var(--color-border-light) !important; }
.border-border-subtle { border-color: var(--color-border-subtle) !important; }
.hover\:bg-\[\#252935\]:hover { background-color: var(--color-bg-elevated) !important; }

.text-brand-primary { color: var(--theme-primary) !important; }
.bg-brand-primary { background-color: var(--theme-primary) !important; }
.border-brand-primary { border-color: var(--theme-primary) !important; }

.from-brand-primary { --tw-gradient-from: var(--theme-primary) var(--tw-gradient-from-position) !important; }
.to-brand-primary { --tw-gradient-to: var(--theme-primary) var(--tw-gradient-to-position) !important; }
.to-brand-primary-dark { --tw-gradient-to: var(--theme-secondary) var(--tw-gradient-to-position) !important; }
.from-brand-primary-dark { --tw-gradient-from: var(--theme-secondary) var(--tw-gradient-from-position) !important; }

.hover\:text-brand-primary:hover { color: var(--theme-primary) !important; }
.hover\:bg-brand-primary:hover { background-color: var(--theme-primary) !important; }
.hover\:bg-brand-primary-dark:hover { background-color: var(--theme-secondary) !important; }
.hover\:border-brand-primary\/30:hover { border-color: rgba(var(--theme-primary-rgb), 0.3) !important; }
.group:hover .group-hover\:bg-brand-primary { background-color: var(--theme-primary) !important; }
.group:hover .group-hover\:text-brand-primary { color: var(--theme-primary) !important; }
.group:hover .group-hover\:border-brand-primary\/50 { border-color: rgba(var(--theme-primary-rgb), 0.5) !important; }

.bg-brand-primary\/10 { background-color: rgba(var(--theme-primary-rgb), 0.1) !important; }
.bg-brand-primary\/15 { background-color: rgba(var(--theme-primary-rgb), 0.15) !important; }
.bg-brand-primary\/\[0\.04\] { background-color: rgba(var(--theme-primary-rgb), 0.04) !important; }
.bg-brand-primary\/\[0\.08\] { background-color: rgba(var(--theme-primary-rgb), 0.08) !important; }
.border-brand-primary\/20 { border-color: rgba(var(--theme-primary-rgb), 0.2) !important; }
.border-brand-primary\/30 { border-color: rgba(var(--theme-primary-rgb), 0.3) !important; }
.border-brand-primary\/40 { border-color: rgba(var(--theme-primary-rgb), 0.4) !important; }
.text-brand-primary\/50 { color: rgba(var(--theme-primary-rgb), 0.5) !important; }
.text-brand-primary\/60 { color: rgba(var(--theme-primary-rgb), 0.6) !important; }

.shadow-brand-primary\/20 { 
    --tw-shadow-color: rgba(var(--theme-primary-rgb), 0.2) !important; 
    --tw-shadow: var(--tw-shadow-colored) !important; 
}
.shadow-brand-primary-deeper\/20,
.shadow-brand-primary-deeper\/30,
.shadow-brand-primary-deeper\/40 { 
    --tw-shadow-color: rgba(var(--theme-secondary-rgb), 0.3) !important; 
    --tw-shadow: var(--tw-shadow-colored) !important; 
}
.hover\:shadow-brand-primary\/25:hover { 
    --tw-shadow-color: rgba(var(--theme-primary-rgb), 0.35) !important; 
    --tw-shadow: var(--tw-shadow-colored) !important; 
}

#chat-sidebar, #chat-banned-panel {
    background: linear-gradient(180deg, var(--color-bg-card) 0%, var(--color-bg-body) 100%) !important;
}
#chat-sidebar > div:first-child {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.08) 0%, transparent 60%) !important;
}
#chat-user-popup, #chat-ban-modal, #chat-unban-modal {
    background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-card) 100%) !important;
    border-color: var(--color-border-light) !important;
}

#mobile-bottom-nav {
    background: rgba(14, 4, 30, 0.92) !important; 
}
.mobile-nav-item.active .mobile-nav-icon-wrap {
    background: rgba(var(--theme-primary-rgb), 0.15) !important;
    box-shadow: 0 0 20px rgba(var(--theme-primary-rgb), 0.25), 0 0 8px rgba(var(--theme-primary-rgb), 0.15) !important;
}
.mobile-nav-item.active::before {
    background: var(--theme-primary) !important;
    box-shadow: 0 0 12px rgba(var(--theme-primary-rgb), 0.6), 0 0 4px rgba(var(--theme-primary-rgb), 0.4) !important;
}

.auth-card {
    background: linear-gradient(165deg, rgba(27, 6, 40, 0.97) 0%, rgba(20, 4, 30, 0.99) 50%, rgba(10, 2, 15, 0.98) 100%) !important;
}
.auth-top-line {
    background: linear-gradient(90deg, transparent 0%, rgba(var(--theme-primary-rgb), 0.5) 20%, rgba(var(--theme-secondary-rgb), 0.4) 50%, rgba(var(--theme-primary-rgb), 0.5) 80%, transparent 100%) !important;
}
.auth-input-glow {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.15), rgba(var(--theme-primary-rgb), 0.05), rgba(var(--theme-secondary-rgb), 0.1)) !important;
}
.auth-orb-1 { background: radial-gradient(circle, rgba(var(--theme-primary-rgb), 0.12) 0%, transparent 70%) !important; }
.auth-orb-2 { background: radial-gradient(circle, rgba(var(--theme-secondary-rgb), 0.08) 0%, transparent 70%) !important; }

div[style*="linear-gradient(135deg, rgba(38,186,193"] {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.08) 0%, transparent 40%, transparent 60%, rgba(var(--theme-secondary-rgb), 0.05) 100%) !important;
}

.marquee-pill:hover .marquee-pill-border { border-color: rgba(var(--theme-primary-rgb), 0.4) !important; }
.marquee-pill:hover {
    background: rgba(var(--theme-primary-rgb), 0.06) !important;
    box-shadow: 0 0 20px rgba(var(--theme-primary-rgb), 0.15) !important;
}

.ss-card-bg {
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--theme-primary-rgb), 0.08) 0%, transparent 70%) !important;
}
.ss-card:hover {
    border-color: rgba(var(--theme-primary-rgb), 0.4) !important;
    box-shadow: 0 0 30px rgba(var(--theme-primary-rgb), 0.15), 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
.ss-card:hover .ss-card-bg {
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--theme-primary-rgb), 0.15) 0%, transparent 70%) !important;
}
.ss-card.ss-highlight {
    border-color: rgba(var(--theme-secondary-rgb), 0.5) !important;
    box-shadow: 0 0 25px rgba(var(--theme-secondary-rgb), 0.2), 0 0 50px rgba(var(--theme-secondary-rgb), 0.1), inset 0 1px 0 rgba(var(--theme-secondary-rgb), 0.1) !important;
}
.ss-card.ss-highlight .ss-card-bg {
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--theme-secondary-rgb), 0.2) 0%, rgba(var(--theme-secondary-rgb), 0.05) 50%, transparent 80%) !important;
}
.ss-card.ss-highlight img {
    filter: drop-shadow(0 0 15px rgba(var(--theme-secondary-rgb), 0.4)) !important;
}

@keyframes ss-iconGlowCustom {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--theme-primary-rgb), 0); }
    50% { box-shadow: 0 0 12px 2px rgba(var(--theme-primary-rgb), 0.3); }
}
.ss-icon-pulse {
    animation: ss-iconGlowCustom 3s ease-in-out infinite !important;
}

.hover\:shadow-\[0_0_20px_rgba\(38\,186\,193\,0\.08\)\]:hover {
    box-shadow: 0 0 20px rgba(var(--theme-primary-rgb), 0.2) !important;
}

.sidebar-logo-full {
    width: 240px !important;
    max-width: 100% !important;
}
.sidebar-logo-mini {
    width: 72px !important;
    height: 72px !important;
}
header img[alt="AŞKONUZ"] {
    height: 38px !important; 
}
@media (min-width: 640px) {
    header img[alt="AŞKONUZ"] {
        height: 44px !important; 
    }
}
.footer-logo {
    height: 42px !important;
}
@media (min-width: 640px) {
    .footer-logo {
        height: 48px !important;
    }
}