/* Özel stiller ve Tailwind CSS için eklemeler */

/* ===================== DOPAMİN RENK PALETİ ===================== */
:root {
    --dopamin-magenta: #FF00AA;
    --dopamin-cyan: #00FFFF;
    --dopamin-gold: #FFD700;
    --dopamin-purple: #A855F7;
    --dopamin-bg-dark: #0A0A0A;
    --dopamin-bg-purple: #1F0B2E;
}

/* Neon Glow Efektleri */
.neon-glow {
    box-shadow: 0 0 15px var(--dopamin-magenta),
                0 0 30px var(--dopamin-cyan);
    transition: all 0.3s ease;
}

.neon-glow:hover {
    box-shadow: 0 0 25px var(--dopamin-magenta),
                0 0 50px var(--dopamin-cyan);
}

.neon-glow-gold {
    box-shadow: 0 0 15px var(--dopamin-gold),
                0 0 30px var(--dopamin-magenta);
    transition: all 0.3s ease;
}

.neon-glow-gold:hover {
    box-shadow: 0 0 25px var(--dopamin-gold),
                0 0 50px var(--dopamin-magenta);
}

/* Arka Plan Gradient + Noise Texture */
body {
    background: linear-gradient(135deg, var(--dopamin-bg-dark) 0%, var(--dopamin-bg-purple) 100%);
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: -1;
}

/* ===================== CHAT ARKA PLAN PRESETLERİ (DOPAMİN) ===================== */
.chat-bg-neon-night {
    background: linear-gradient(135deg, #FF00AA 0%, #00FFFF 50%, #A855F7 100%);
    position: relative;
}

.chat-bg-neon-night::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #FF00AA 0%, #00FFFF 50%, #A855F7 100%);
    filter: blur(40px);
    opacity: 0.3;
    animation: gradientShift 8s ease infinite;
}

.chat-bg-cyber-sunset {
    background: linear-gradient(135deg, #FFD700 0%, #FF00AA 50%, #00FFFF 100%);
    position: relative;
}

.chat-bg-cyber-sunset::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #FFD700 0%, #FF00AA 50%, #00FFFF 100%);
    filter: blur(40px);
    opacity: 0.3;
    animation: gradientShift 8s ease infinite;
}

.chat-bg-electric-purple {
    background: linear-gradient(135deg, #A855F7 0%, #FF00AA 50%, #FFD700 100%);
    position: relative;
}

.chat-bg-electric-purple::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #A855F7 0%, #FF00AA 50%, #FFD700 100%);
    filter: blur(40px);
    opacity: 0.3;
    animation: gradientShift 8s ease infinite;
}

.chat-bg-matrix-rain {
    background: linear-gradient(135deg, #53fc18 0%, #00FFFF 50%, #FF00AA 100%);
    position: relative;
}

.chat-bg-matrix-rain::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #53fc18 0%, #00FFFF 50%, #FF00AA 100%);
    filter: blur(40px);
    opacity: 0.3;
    animation: gradientShift 8s ease infinite;
}

.chat-bg-rainbow {
    background: linear-gradient(135deg, #FF00AA 0%, #00FFFF 25%, #FFD700 50%, #A855F7 75%, #53fc18 100%);
    position: relative;
}

.chat-bg-rainbow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #FF00AA 0%, #00FFFF 25%, #FFD700 50%, #A855F7 75%, #53fc18 100%);
    filter: blur(40px);
    opacity: 0.3;
    animation: gradientShift 10s ease infinite;
}

/* Gradient Shift Animasyonu */
@keyframes gradientShift {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.1) rotate(5deg);
    }
}

/* Particle Efektleri */
.chat-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.chat-particles::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--dopamin-gold);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--dopamin-gold);
    animation: particleFloat 6s ease-in-out infinite;
}

.chat-particles::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--dopamin-cyan);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--dopamin-cyan);
    animation: particleFloat 8s ease-in-out infinite reverse;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translate(50px, -30px) scale(1.2);
        opacity: 1;
    }
    50% {
        transform: translate(100px, 20px) scale(0.8);
        opacity: 0.6;
    }
    75% {
        transform: translate(50px, 50px) scale(1.1);
        opacity: 0.9;
    }
}

/* ===================== KULLANICI RENK/RANK SİSTEMİ (DOPAMİN GRADIENT) ===================== */
.user-name-guest {
    color: #9CA3AF;
    font-weight: 400;
}

.user-name-member {
    background: linear-gradient(90deg, #FF00AA, #00FFFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
    text-shadow: 0 0 10px rgba(255, 0, 170, 0.3);
}

.user-name-moderator {
    background: linear-gradient(90deg, #00FFFF, #FF00AA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    animation: textGlow 2s ease-in-out infinite;
}

.user-name-admin {
    background: linear-gradient(90deg, #FFD700, #A855F7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    animation: textGlow 1.5s ease-in-out infinite;
}

.user-name-owner {
    background: linear-gradient(90deg, #FF00AA, #00FFFF, #FFD700, #A855F7);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    text-shadow: 0 0 25px rgba(255, 0, 170, 0.8);
    animation: rainbowText 3s ease infinite;
}

.user-name-premium {
    background: linear-gradient(90deg, #FF00AA, #00FFFF, #FFD700);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
    animation: premiumGlow 2s ease infinite;
}

@keyframes textGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.3);
    }
}

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

@keyframes premiumGlow {
    0%, 100% {
        background-position: 0% 50%;
        filter: brightness(1);
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(1.4);
    }
}

/* Rank Badge'leri */
.rank-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rank-badge-guest {
    background: rgba(156, 163, 175, 0.2);
    color: #9CA3AF;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

.rank-badge-member {
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.2), rgba(0, 255, 255, 0.2));
    color: #FF00AA;
    border: 1px solid rgba(255, 0, 170, 0.4);
    box-shadow: 0 0 10px rgba(255, 0, 170, 0.2);
}

.rank-badge-moderator {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 170, 0.2));
    color: #00FFFF;
    border: 1px solid rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    animation: badgePulse 2s ease-in-out infinite;
}

.rank-badge-admin {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(168, 85, 247, 0.2));
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    animation: badgePulse 1.5s ease-in-out infinite;
}

.rank-badge-owner {
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.2), rgba(0, 255, 255, 0.2), rgba(255, 215, 0, 0.2));
    color: #FF00AA;
    border: 1px solid rgba(255, 0, 170, 0.5);
    box-shadow: 0 0 25px rgba(255, 0, 170, 0.5);
    animation: rainbowBadge 3s ease infinite;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px currentColor;
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 25px currentColor;
    }
}

@keyframes rainbowBadge {
    0% {
        background-position: 0% 50%;
        border-color: #FF00AA;
        color: #FF00AA;
    }
    25% {
        background-position: 25% 50%;
        border-color: #00FFFF;
        color: #00FFFF;
    }
    50% {
        background-position: 50% 50%;
        border-color: #FFD700;
        color: #FFD700;
    }
    75% {
        background-position: 75% 50%;
        border-color: #A855F7;
        color: #A855F7;
    }
    100% {
        background-position: 100% 50%;
        border-color: #FF00AA;
        color: #FF00AA;
    }
}

/* ===================== PANEL TASARIMLARI (DOPAMİN DISKOTEK) ===================== */
/* Admin Panel - Gold + Purple Glow */
.panel-admin {
    background: linear-gradient(135deg, #FFD700 0%, #A855F7 50%, #FF00AA 100%);
    position: relative;
}

.panel-admin-header {
    background: linear-gradient(90deg, #FFD700, #A855F7, #FF00AA);
    padding: 20px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    position: relative;
}

.panel-admin-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #FFD700, #A855F7, #FF00AA);
    filter: blur(10px);
    opacity: 0.5;
    z-index: -1;
}

.panel-admin-sidebar {
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.1), rgba(255, 215, 0, 0.1));
    border-right: 2px solid rgba(255, 215, 0, 0.3);
}

.panel-admin-menu-item {
    padding: 12px 20px;
    color: #FFD700;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.panel-admin-menu-item:hover {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(168, 85, 247, 0.2));
    border-left-color: #FFD700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    transform: translateX(5px);
}

.panel-admin-card {
    background: rgba(168, 85, 247, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
}

.panel-admin-card:hover {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
    transform: translateY(-2px);
}

.panel-admin-button {
    background: linear-gradient(90deg, #FFD700, #A855F7);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    transition: all 0.3s ease;
}

.panel-admin-button:hover {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
    transform: scale(1.05);
}

.panel-admin-input {
    background: rgba(168, 85, 247, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 10px 15px;
    color: white;
    transition: all 0.3s ease;
}

.panel-admin-input:focus {
    border-color: #FFD700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    outline: none;
}

/* Moderator Panel - Cyan + Magenta Glow */
.panel-moderator {
    background: linear-gradient(135deg, #00FFFF 0%, #FF00AA 50%, #53fc18 100%);
    position: relative;
}

.panel-moderator-header {
    background: linear-gradient(90deg, #00FFFF, #FF00AA, #53fc18);
    padding: 20px;
    border-bottom: 2px solid rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    position: relative;
}

.panel-moderator-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #00FFFF, #FF00AA, #53fc18);
    filter: blur(10px);
    opacity: 0.5;
    z-index: -1;
}

.panel-moderator-sidebar {
    background: linear-gradient(180deg, rgba(0, 255, 255, 0.1), rgba(255, 0, 170, 0.1));
    border-right: 2px solid rgba(0, 255, 255, 0.3);
}

.panel-moderator-menu-item {
    padding: 12px 20px;
    color: #00FFFF;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.panel-moderator-menu-item:hover {
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 170, 0.2));
    border-left-color: #00FFFF;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    transform: translateX(5px);
}

.panel-moderator-card {
    background: rgba(0, 255, 255, 0.1);
    border: 2px solid rgba(0, 255, 255, 0.4);
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.panel-moderator-card:hover {
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
    transform: translateY(-2px);
}

.panel-moderator-button {
    background: linear-gradient(90deg, #00FFFF, #FF00AA);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.panel-moderator-button:hover {
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.6);
    transform: scale(1.05);
}

.panel-moderator-input {
    background: rgba(0, 255, 255, 0.1);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    padding: 10px 15px;
    color: white;
    transition: all 0.3s ease;
}

.panel-moderator-input:focus {
    border-color: #00FFFF;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
    outline: none;
}

/* Owner Panel - Rainbow Glow */
.panel-owner {
    background: linear-gradient(135deg, #FF00AA 0%, #00FFFF 25%, #FFD700 50%, #A855F7 75%, #53fc18 100%);
    position: relative;
}

.panel-owner-header {
    background: linear-gradient(90deg, #FF00AA, #00FFFF, #FFD700, #A855F7, #53fc18);
    background-size: 200% 200%;
    padding: 20px;
    border-bottom: 2px solid rgba(255, 0, 170, 0.5);
    box-shadow: 0 0 20px rgba(255, 0, 170, 0.3);
    position: relative;
    animation: rainbowHeader 5s ease infinite;
}

.panel-owner-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #FF00AA, #00FFFF, #FFD700, #A855F7, #53fc18);
    background-size: 200% 200%;
    filter: blur(10px);
    opacity: 0.5;
    z-index: -1;
    animation: rainbowHeader 5s ease infinite;
}

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

.panel-owner-sidebar {
    background: linear-gradient(180deg, rgba(255, 0, 170, 0.1), rgba(0, 255, 255, 0.1), rgba(255, 215, 0, 0.1));
    border-right: 2px solid rgba(255, 0, 170, 0.3);
}

.panel-owner-menu-item {
    padding: 12px 20px;
    color: #FF00AA;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.panel-owner-menu-item:hover {
    background: linear-gradient(90deg, rgba(255, 0, 170, 0.2), rgba(0, 255, 255, 0.2));
    border-left-color: #FF00AA;
    box-shadow: 0 0 15px rgba(255, 0, 170, 0.3);
    transform: translateX(5px);
}

.panel-owner-card {
    background: rgba(255, 0, 170, 0.1);
    border: 2px solid rgba(255, 0, 170, 0.4);
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 0, 170, 0.2);
    transition: all 0.3s ease;
}

.panel-owner-card:hover {
    box-shadow: 0 0 30px rgba(255, 0, 170, 0.4);
    transform: translateY(-2px);
}

.panel-owner-button {
    background: linear-gradient(90deg, #FF00AA, #00FFFF, #FFD700);
    background-size: 200% 200%;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 0 15px rgba(255, 0, 170, 0.4);
    transition: all 0.3s ease;
    animation: rainbowButton 3s ease infinite;
}

.panel-owner-button:hover {
    box-shadow: 0 0 25px rgba(255, 0, 170, 0.6);
    transform: scale(1.05);
}

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

.panel-owner-input {
    background: rgba(255, 0, 170, 0.1);
    border: 2px solid rgba(255, 0, 170, 0.3);
    border-radius: 8px;
    padding: 10px 15px;
    color: white;
    transition: all 0.3s ease;
}

.panel-owner-input:focus {
    border-color: #FF00AA;
    box-shadow: 0 0 15px rgba(255, 0, 170, 0.4);
    outline: none;
}

/* User Panel - Magenta + Cyan Glow */
.panel-user {
    background: linear-gradient(135deg, #FF00AA 0%, #00FFFF 100%);
    position: relative;
}

.panel-user-header {
    background: linear-gradient(90deg, #FF00AA, #00FFFF);
    padding: 20px;
    border-bottom: 2px solid rgba(255, 0, 170, 0.5);
    box-shadow: 0 0 20px rgba(255, 0, 170, 0.3);
    position: relative;
}

.panel-user-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #FF00AA, #00FFFF);
    filter: blur(10px);
    opacity: 0.5;
    z-index: -1;
}

.panel-user-sidebar {
    background: linear-gradient(180deg, rgba(255, 0, 170, 0.1), rgba(0, 255, 255, 0.1));
    border-right: 2px solid rgba(255, 0, 170, 0.3);
}

.panel-user-menu-item {
    padding: 12px 20px;
    color: #FF00AA;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.panel-user-menu-item:hover {
    background: linear-gradient(90deg, rgba(255, 0, 170, 0.2), rgba(0, 255, 255, 0.2));
    border-left-color: #FF00AA;
    box-shadow: 0 0 15px rgba(255, 0, 170, 0.3);
    transform: translateX(5px);
}

.panel-user-card {
    background: rgba(255, 0, 170, 0.1);
    border: 2px solid rgba(255, 0, 170, 0.4);
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 0, 170, 0.2);
    transition: all 0.3s ease;
}

.panel-user-card:hover {
    box-shadow: 0 0 30px rgba(255, 0, 170, 0.4);
    transform: translateY(-2px);
}

.panel-user-button {
    background: linear-gradient(90deg, #FF00AA, #00FFFF);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 0 15px rgba(255, 0, 170, 0.4);
    transition: all 0.3s ease;
}

.panel-user-button:hover {
    box-shadow: 0 0 25px rgba(255, 0, 170, 0.6);
    transform: scale(1.05);
}

.panel-user-input {
    background: rgba(255, 0, 170, 0.1);
    border: 2px solid rgba(255, 0, 170, 0.3);
    border-radius: 8px;
    padding: 10px 15px;
    color: white;
    transition: all 0.3s ease;
}

.panel-user-input:focus {
    border-color: #FF00AA;
    box-shadow: 0 0 15px rgba(255, 0, 170, 0.4);
    outline: none;
}

/* ===================== ANİMASYONLU AVATAR SİSTEMİ (DOPAMİN GLOW) ===================== */
.avatar-container {
    position: relative;
    display: inline-block;
}

.avatar-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: avatarRingPulse 2s ease-in-out infinite;
}

.avatar-ring-guest {
    border-color: rgba(156, 163, 175, 0.5);
    animation: none;
}

.avatar-ring-member {
    border: 3px solid transparent;
    background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
                linear-gradient(135deg, #FF00AA, #00FFFF) border-box;
    animation: avatarRingPulse 3s ease-in-out infinite;
}

.avatar-ring-moderator {
    border: 3px solid transparent;
    background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
                linear-gradient(135deg, #00FFFF, #FF00AA) border-box;
    animation: avatarRingPulse 2s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

.avatar-ring-admin {
    border: 3px solid transparent;
    background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
                linear-gradient(135deg, #FFD700, #A855F7) border-box;
    animation: avatarRingPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.avatar-ring-owner {
    border: 3px solid transparent;
    background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
                linear-gradient(135deg, #FF00AA, #00FFFF, #FFD700, #A855F7) border-box;
    background-size: 300% 300%;
    animation: avatarRainbowRing 3s ease infinite;
    box-shadow: 0 0 25px rgba(255, 0, 170, 0.8);
}

.avatar-ring-premium {
    border: 3px solid transparent;
    background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
                linear-gradient(135deg, #FF00AA, #00FFFF, #FFD700) border-box;
    background-size: 200% 200%;
    animation: avatarPremiumRing 2s ease infinite;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
}

@keyframes avatarRingPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes avatarRainbowRing {
    0% {
        background-position: 0% 50%;
        transform: scale(1) rotate(0deg);
    }
    50% {
        background-position: 100% 50%;
        transform: scale(1.05) rotate(5deg);
    }
    100% {
        background-position: 0% 50%;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes avatarPremiumRing {
    0% {
        background-position: 0% 50%;
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.9);
    }
    100% {
        background-position: 0% 50%;
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
    }
}

/* Avatar Glow Efektleri */
.avatar-glow-normal {
    box-shadow: 0 0 10px rgba(255, 0, 170, 0.3);
}

.avatar-glow-vip {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    animation: avatarGlowPulse 2s ease-in-out infinite;
}

.avatar-glow-admin {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    animation: avatarGlowPulse 1.5s ease-in-out infinite;
}

.avatar-glow-owner {
    box-shadow: 0 0 25px rgba(255, 0, 170, 0.8);
    animation: avatarRainbowGlow 3s ease infinite;
}

@keyframes avatarGlowPulse {
    0%, 100% {
        box-shadow: 0 0 15px currentColor;
    }
    50% {
        box-shadow: 0 0 25px currentColor;
    }
}

@keyframes avatarRainbowGlow {
    0% {
        box-shadow: 0 0 25px #FF00AA;
    }
    25% {
        box-shadow: 0 0 25px #00FFFF;
    }
    50% {
        box-shadow: 0 0 25px #FFD700;
    }
    75% {
        box-shadow: 0 0 25px #A855F7;
    }
    100% {
        box-shadow: 0 0 25px #FF00AA;
    }
}

/* Avatar Animasyonları */
.avatar-animate-message {
    animation: avatarMessageGlow 0.5s ease-out;
}

.avatar-animate-join {
    animation: avatarJoinEffect 1s ease-out;
}

.avatar-animate-leave {
    animation: avatarLeaveEffect 1s ease-out;
}

.avatar-animate-rankup {
    animation: avatarRankUp 2s ease-out;
}

@keyframes avatarMessageGlow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px currentColor;
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 30px currentColor;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px currentColor;
    }
}

@keyframes avatarJoinEffect {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(10deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes avatarLeaveEffect {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(0.8) rotate(-10deg);
        opacity: 0.5;
    }
    100% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
}

@keyframes avatarRankUp {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px currentColor;
    }
    25% {
        transform: scale(1.3);
        box-shadow: 0 0 40px #FFD700;
    }
    50% {
        transform: scale(1.5);
        box-shadow: 0 0 60px #FFD700, 0 0 80px #FF00AA;
    }
    75% {
        transform: scale(1.2);
        box-shadow: 0 0 40px #FFD700;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px currentColor;
    }
}

/* Avatar Aksesuarları */
.avatar-accessory {
    position: absolute;
    pointer-events: none;
}

.avatar-crown {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    animation: crownFloat 2s ease-in-out infinite;
}

.avatar-crown-gold {
    color: #FFD700;
    text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700;
}

.avatar-crown-rainbow {
    background: linear-gradient(90deg, #FF00AA, #00FFFF, #FFD700, #A855F7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbowText 3s ease infinite;
    text-shadow: 0 0 10px rgba(255, 0, 170, 0.5);
}

@keyframes crownFloat {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Avatar Status Indicator */
.avatar-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #0A0A0A;
}

.avatar-status-online {
    background: #53fc18;
    box-shadow: 0 0 10px #53fc18;
    animation: statusPulse 2s ease-in-out infinite;
}

.avatar-status-away {
    background: #FFD700;
    box-shadow: 0 0 10px #FFD700;
}

.avatar-status-busy {
    background: #FF00AA;
    box-shadow: 0 0 10px #FF00AA;
}

.avatar-status-offline {
    background: #9CA3AF;
}

@keyframes statusPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* ===================== SMILE/EMOJI POWERS (NEON ANİMASYONLU) ===================== */
.emoji-basic {
    font-size: 24px;
    transition: all 0.3s ease;
}

.emoji-basic:hover {
    transform: scale(1.2);
    filter: brightness(1.2);
}

.emoji-rare {
    font-size: 26px;
    animation: emojiPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 5px #00FFFF);
}

.emoji-rare:hover {
    transform: scale(1.3);
    filter: drop-shadow(0 0 15px #00FFFF) brightness(1.3);
}

.emoji-epic {
    font-size: 28px;
    animation: emojiGlow 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 10px #FFD700);
}

.emoji-epic:hover {
    transform: scale(1.4);
    filter: drop-shadow(0 0 20px #FFD700) brightness(1.4);
}

.emoji-legendary {
    font-size: 30px;
    animation: emojiRainbow 3s ease infinite;
    filter: drop-shadow(0 0 15px #FF00AA);
}

.emoji-legendary:hover {
    transform: scale(1.5);
    filter: drop-shadow(0 0 30px #FF00AA) brightness(1.5);
}

@keyframes emojiPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px #00FFFF);
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px #00FFFF);
    }
}

@keyframes emojiGlow {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px #FFD700);
    }
    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 25px #FFD700);
    }
}

@keyframes emojiRainbow {
    0% {
        filter: drop-shadow(0 0 15px #FF00AA);
        transform: scale(1) rotate(0deg);
    }
    25% {
        filter: drop-shadow(0 0 15px #00FFFF);
        transform: scale(1.05) rotate(5deg);
    }
    50% {
        filter: drop-shadow(0 0 15px #FFD700);
        transform: scale(1.1) rotate(0deg);
    }
    75% {
        filter: drop-shadow(0 0 15px #A855F7);
        transform: scale(1.05) rotate(-5deg);
    }
    100% {
        filter: drop-shadow(0 0 15px #FF00AA);
        transform: scale(1) rotate(0deg);
    }
}

/* Emoji Particle Efektleri */
.emoji-particle {
    position: absolute;
    pointer-events: none;
    animation: particleExplode 1s ease-out forwards;
}

.emoji-particle::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dopamin-cyan);
    box-shadow: 0 0 10px var(--dopamin-cyan);
}

@keyframes particleExplode {
    0% {
        transform: scale(0) translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translate(var(--tx), var(--ty));
        opacity: 0;
    }
}

/* Emoji Trail Efekti */
.emoji-trail {
    position: absolute;
    pointer-events: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--dopamin-magenta) 0%, transparent 70%);
    animation: trailFade 0.5s ease-out forwards;
}

@keyframes trailFade {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}

/* Emoji Glow Border */
.emoji-glow-border {
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 4px;
    transition: all 0.3s ease;
}

.emoji-glow-border-rare {
    background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
                linear-gradient(135deg, #00FFFF, #FF00AA) border-box;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.emoji-glow-border-epic {
    background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
                linear-gradient(135deg, #FFD700, #A855F7) border-box;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.emoji-glow-border-legendary {
    background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
                linear-gradient(135deg, #FF00AA, #00FFFF, #FFD700, #A855F7) border-box;
    background-size: 300% 300%;
    animation: rainbowBorder 3s ease infinite;
    box-shadow: 0 0 20px rgba(255, 0, 170, 0.5);
}

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

/* Emoji Send Animation */
.emoji-send-animation {
    animation: emojiSend 0.8s ease-out;
}

@keyframes emojiSend {
    0% {
        transform: scale(0.5) translateY(20px);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) translateY(-10px);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Emoji Bounce Animation */
.emoji-bounce {
    animation: emojiBounce 0.6s ease;
}

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

/* Emoji Spin Animation */
.emoji-spin {
    animation: emojiSpin 1s ease;
}

@keyframes emojiSpin {
    0% {
        transform: rotate(0deg) scale(0.8);
    }
    50% {
        transform: rotate(180deg) scale(1.2);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* Emoji Shake Animation */
.emoji-shake {
    animation: emojiShake 0.5s ease;
}

@keyframes emojiShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px) rotate(-5deg);
    }
    75% {
        transform: translateX(5px) rotate(5deg);
    }
}

/* ===================== ÇIKARTMA (STICKER) SİSTEMİ (DOPAMİN BORDER/GLOW) ===================== */
.sticker-container {
    position: relative;
    display: inline-block;
    padding: 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.sticker-common {
    border: 2px solid rgba(255, 0, 170, 0.3);
    background: rgba(255, 0, 170, 0.05);
}

.sticker-common:hover {
    border-color: rgba(255, 0, 170, 0.6);
    box-shadow: 0 0 15px rgba(255, 0, 170, 0.3);
    transform: scale(1.05);
}

.sticker-rare {
    border: 2px solid rgba(0, 255, 255, 0.4);
    background: rgba(0, 255, 255, 0.08);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.sticker-rare:hover {
    border-color: rgba(0, 255, 255, 0.7);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.4);
    transform: scale(1.1);
}

.sticker-epic {
    border: 2px solid rgba(255, 215, 0, 0.5);
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.sticker-epic:hover {
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.5);
    transform: scale(1.15);
}

.sticker-legendary {
    border: 2px solid transparent;
    background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
                linear-gradient(135deg, #FF00AA, #00FFFF, #FFD700, #A855F7) border-box;
    background-size: 300% 300%;
    animation: stickerRainbow 3s ease infinite;
    box-shadow: 0 0 20px rgba(255, 0, 170, 0.4);
}

.sticker-legendary:hover {
    box-shadow: 0 0 40px rgba(255, 0, 170, 0.6);
    transform: scale(1.2);
}

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

/* Sticker Gönderme Animasyonu */
.sticker-send {
    animation: stickerSend 0.8s ease-out;
}

@keyframes stickerSend {
    0% {
        transform: scale(0.3) translateY(50px) rotate(-10deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.3) translateY(-20px) rotate(5deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0) rotate(0deg);
        opacity: 1;
    }
}

/* Sticker Bounce Animasyonu */
.sticker-bounce {
    animation: stickerBounce 0.6s ease;
}

@keyframes stickerBounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-30px) scale(1.1);
    }
}

/* Sticker Spin Animasyonu */
.sticker-spin {
    animation: stickerSpin 1s ease;
}

@keyframes stickerSpin {
    0% {
        transform: rotate(0deg) scale(0.5);
    }
    50% {
        transform: rotate(180deg) scale(1.2);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* Sticker Shake Animasyonu */
.sticker-shake {
    animation: stickerShake 0.5s ease;
}

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

/* Sticker Glow Pulse */
.sticker-glow-pulse {
    animation: stickerGlowPulse 2s ease-in-out infinite;
}

@keyframes stickerGlowPulse {
    0%, 100% {
        box-shadow: 0 0 10px currentColor;
    }
    50% {
        box-shadow: 0 0 30px currentColor;
    }
}

/* Sticker Particle Efekti */
.sticker-particle {
    position: absolute;
    pointer-events: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: stickerParticle 1s ease-out forwards;
}

.sticker-particle-common {
    background: #FF00AA;
    box-shadow: 0 0 10px #FF00AA;
}

.sticker-particle-rare {
    background: #00FFFF;
    box-shadow: 0 0 10px #00FFFF;
}

.sticker-particle-epic {
    background: #FFD700;
    box-shadow: 0 0 10px #FFD700;
}

.sticker-particle-legendary {
    background: linear-gradient(135deg, #FF00AA, #00FFFF, #FFD700);
    box-shadow: 0 0 15px #FF00AA;
}

@keyframes stickerParticle {
    0% {
        transform: scale(0) translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translate(var(--tx), var(--ty));
        opacity: 0;
    }
}

/* Sticker Text Özelleştirme */
.sticker-text {
    font-size: 14px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    transition: all 0.3s ease;
}

.sticker-text-common {
    color: #FF00AA;
    border: 1px solid rgba(255, 0, 170, 0.3);
}

.sticker-text-rare {
    color: #00FFFF;
    border: 1px solid rgba(0, 255, 255, 0.4);
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.sticker-text-epic {
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.5);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.sticker-text-legendary {
    background: linear-gradient(90deg, #FF00AA, #00FFFF, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border: 1px solid rgba(255, 0, 170, 0.5);
    text-shadow: 0 0 10px rgba(255, 0, 170, 0.7);
    animation: textGlow 1.5s ease-in-out infinite;
}

/* Sticker Drag-Drop */
.sticker-dragging {
    opacity: 0.7;
    transform: scale(1.1) rotate(5deg);
    cursor: grabbing;
}

.sticker-drop-zone {
    border: 2px dashed rgba(255, 0, 170, 0.5);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.sticker-drop-zone.drag-over {
    border-color: #00FFFF;
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

/* ===================== ÖZEL EFEKTLER (POWERS) ANİMASYONLARI ===================== */
/* Power Glow Efektleri */
.power-glow-neon {
    box-shadow: 0 0 15px #FF00AA, 0 0 30px #00FFFF;
    animation: powerNeonGlow 2s ease-in-out infinite;
}

.power-glow-fire {
    box-shadow: 0 0 20px #FF4444, 0 0 40px #FFD700;
    animation: powerFireGlow 1.5s ease-in-out infinite;
}

.power-glow-ice {
    box-shadow: 0 0 20px #00FFFF, 0 0 40px #A855F7;
    animation: powerIceGlow 2s ease-in-out infinite;
}

.power-glow-lightning {
    box-shadow: 0 0 25px #FFD700, 0 0 50px #FFFFFF;
    animation: powerLightningGlow 0.5s ease-in-out infinite;
}

.power-glow-rainbow {
    box-shadow: 0 0 30px #FF00AA, 0 0 60px #00FFFF, 0 0 90px #FFD700;
    animation: powerRainbowGlow 3s ease infinite;
}

@keyframes powerNeonGlow {
    0%, 100% {
        box-shadow: 0 0 15px #FF00AA, 0 0 30px #00FFFF;
    }
    50% {
        box-shadow: 0 0 25px #FF00AA, 0 0 50px #00FFFF;
    }
}

@keyframes powerFireGlow {
    0%, 100% {
        box-shadow: 0 0 20px #FF4444, 0 0 40px #FFD700;
    }
    50% {
        box-shadow: 0 0 35px #FF4444, 0 0 70px #FFD700;
    }
}

@keyframes powerIceGlow {
    0%, 100% {
        box-shadow: 0 0 20px #00FFFF, 0 0 40px #A855F7;
    }
    50% {
        box-shadow: 0 0 30px #00FFFF, 0 0 60px #A855F7;
    }
}

@keyframes powerLightningGlow {
    0%, 100% {
        box-shadow: 0 0 25px #FFD700, 0 0 50px #FFFFFF;
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 50px #FFD700, 0 0 100px #FFFFFF;
        opacity: 0.8;
    }
}

@keyframes powerRainbowGlow {
    0% {
        box-shadow: 0 0 30px #FF00AA, 0 0 60px #00FFFF, 0 0 90px #FFD700;
    }
    25% {
        box-shadow: 0 0 30px #00FFFF, 0 0 60px #FFD700, 0 0 90px #A855F7;
    }
    50% {
        box-shadow: 0 0 30px #FFD700, 0 0 60px #A855F7, 0 0 90px #FF00AA;
    }
    75% {
        box-shadow: 0 0 30px #A855F7, 0 0 60px #FF00AA, 0 0 90px #00FFFF;
    }
    100% {
        box-shadow: 0 0 30px #FF00AA, 0 0 60px #00FFFF, 0 0 90px #FFD700;
    }
}

/* Power Particle Efektleri */
.power-particle-neon {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #FF00AA;
    box-shadow: 0 0 10px #FF00AA;
    animation: powerParticleNeon 1s ease-out forwards;
}

.power-particle-fire {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FF4444;
    box-shadow: 0 0 15px #FF4444;
    animation: powerParticleFire 1.5s ease-out forwards;
}

.power-particle-ice {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00FFFF;
    box-shadow: 0 0 12px #00FFFF;
    animation: powerParticleIce 1.2s ease-out forwards;
}

.power-particle-lightning {
    position: absolute;
    width: 3px;
    height: 20px;
    background: #FFD700;
    box-shadow: 0 0 20px #FFD700;
    animation: powerParticleLightning 0.3s ease-out forwards;
}

@keyframes powerParticleNeon {
    0% {
        transform: scale(0) translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translate(var(--tx), var(--ty));
        opacity: 0;
    }
}

@keyframes powerParticleFire {
    0% {
        transform: scale(0) translate(0, 0);
        opacity: 1;
    }
    50% {
        transform: scale(1.5) translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5));
        opacity: 0.8;
    }
    100% {
        transform: scale(0.5) translate(var(--tx), var(--ty));
        opacity: 0;
    }
}

@keyframes powerParticleIce {
    0% {
        transform: scale(0) translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: scale(0.8) translate(var(--tx), var(--ty));
        opacity: 0;
    }
}

@keyframes powerParticleLightning {
    0% {
        transform: scaleY(0) translate(0, 0);
        opacity: 1;
    }
    50% {
        transform: scaleY(1.5) translate(var(--tx), var(--ty));
        opacity: 0.5;
    }
    100% {
        transform: scaleY(0) translate(var(--tx), var(--ty));
        opacity: 0;
    }
}

/* Power Trail Efektleri */
.power-trail-neon {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 0, 170, 0.5) 0%, transparent 70%);
    animation: powerTrailNeon 0.8s ease-out forwards;
}

.power-trail-fire {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 68, 68, 0.5) 0%, transparent 70%);
    animation: powerTrailFire 1s ease-out forwards;
}

.power-trail-ice {
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.5) 0%, transparent 70%);
    animation: powerTrailIce 0.9s ease-out forwards;
}

@keyframes powerTrailNeon {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

@keyframes powerTrailFire {
    0% {
        opacity: 0.9;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(3);
    }
}

@keyframes powerTrailIce {
    0% {
        opacity: 0.85;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(2.8);
    }
}

/* Power Message Efektleri */
.power-message-neon {
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.2), rgba(0, 255, 255, 0.2));
    border: 2px solid rgba(255, 0, 170, 0.5);
    box-shadow: 0 0 20px rgba(255, 0, 170, 0.3);
    animation: powerMessageNeon 0.5s ease-out;
}

.power-message-fire {
    background: linear-gradient(135deg, rgba(255, 68, 68, 0.2), rgba(255, 215, 0, 0.2));
    border: 2px solid rgba(255, 68, 68, 0.5);
    box-shadow: 0 0 25px rgba(255, 68, 68, 0.4);
    animation: powerMessageFire 0.6s ease-out;
}

.power-message-ice {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(168, 85, 247, 0.2));
    border: 2px solid rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.4);
    animation: powerMessageIce 0.5s ease-out;
}

.power-message-lightning {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 255, 255, 0.2));
    border: 2px solid rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    animation: powerMessageLightning 0.3s ease-out;
}

.power-message-rainbow {
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.2), rgba(0, 255, 255, 0.2), rgba(255, 215, 0, 0.2));
    border: 2px solid transparent;
    background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
                linear-gradient(135deg, #FF00AA, #00FFFF, #FFD700) border-box;
    box-shadow: 0 0 35px rgba(255, 0, 170, 0.5);
    animation: powerMessageRainbow 0.8s ease-out;
}

@keyframes powerMessageNeon {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes powerMessageFire {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes powerMessageIce {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes powerMessageLightning {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes powerMessageRainbow {
    0% {
        transform: scale(0.8) rotate(-5deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.15) rotate(5deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Power Activation Animasyonları */
.power-activation-neon {
    animation: powerActivationNeon 1s ease-out;
}

.power-activation-fire {
    animation: powerActivationFire 1.2s ease-out;
}

.power-activation-ice {
    animation: powerActivationIce 1s ease-out;
}

.power-activation-lightning {
    animation: powerActivationLightning 0.8s ease-out;
}

.power-activation-rainbow {
    animation: powerActivationRainbow 1.5s ease-out;
}

@keyframes powerActivationNeon {
    0% {
        transform: scale(0.5);
        filter: brightness(0.5);
    }
    50% {
        transform: scale(1.5);
        filter: brightness(2);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes powerActivationFire {
    0% {
        transform: scale(0.4);
        filter: brightness(0.5);
    }
    25% {
        transform: scale(1.8);
        filter: brightness(2.5);
    }
    50% {
        transform: scale(1.2);
        filter: brightness(1.5);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes powerActivationIce {
    0% {
        transform: scale(0.6);
        filter: brightness(0.7);
    }
    50% {
        transform: scale(1.3);
        filter: brightness(1.8);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes powerActivationLightning {
    0% {
        transform: scale(0.3);
        filter: brightness(0.3);
    }
    25% {
        transform: scale(2);
        filter: brightness(3);
    }
    50% {
        transform: scale(0.8);
        filter: brightness(0.8);
    }
    75% {
        transform: scale(1.5);
        filter: brightness(2);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes powerActivationRainbow {
    0% {
        transform: scale(0.5) rotate(-10deg);
        filter: brightness(0.5);
    }
    25% {
        transform: scale(1.8) rotate(15deg);
        filter: brightness(2.5);
    }
    50% {
        transform: scale(1.2) rotate(-5deg);
        filter: brightness(1.5);
    }
    75% {
        transform: scale(1.4) rotate(8deg);
        filter: brightness(1.8);
    }
    100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
}

/* ===================== XAT TARZI CHAT STİLLERİ ===================== */
.xat-chat {
    font-family: 'Arial', sans-serif;
}

.xat-banner {
    background: linear-gradient(90deg, rgba(255, 0, 170, 0.1), rgba(0, 255, 255, 0.1));
}

.xat-app-tabs {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 0, 170, 0.3) transparent;
}

.xat-app-tabs::-webkit-scrollbar {
    width: 4px;
}

.xat-app-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.xat-app-tabs::-webkit-scrollbar-thumb {
    background: rgba(255, 0, 170, 0.3);
    border-radius: 2px;
}

.app-tab {
    transition: all 0.2s ease;
}

.app-tab:hover {
    transform: scale(1.1);
}

.app-tab.active {
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.2), rgba(0, 255, 255, 0.2));
    box-shadow: 0 0 10px rgba(255, 0, 170, 0.3);
}

.xat-user-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 255, 0.3) transparent;
}

.xat-user-list::-webkit-scrollbar {
    width: 4px;
}

.xat-user-list::-webkit-scrollbar-track {
    background: transparent;
}

.xat-user-list::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.3);
    border-radius: 2px;
}

.user-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.user-list-item:hover {
    background: rgba(255, 0, 170, 0.1);
}

.user-list-item-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF00AA, #00FFFF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
}

.user-list-item-name {
    font-size: 11px;
    color: #9CA3AF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.user-list-item-name.owner {
    color: #FF00AA;
    font-weight: 600;
}

.user-list-item-name.admin {
    color: #FFD700;
    font-weight: 600;
}

.user-list-item-name.moderator {
    color: #00FFFF;
    font-weight: 600;
}

.user-list-item-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.user-list-item-status.online {
    background: #53fc18;
    box-shadow: 0 0 5px #53fc18;
}

.user-list-item-status.away {
    background: #FFD700;
}

.user-list-item-status.offline {
    background: #9CA3AF;
}

/* Xat Chat Messages */
.chat-message-xat {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.chat-message-xat:hover {
    background: rgba(255, 0, 170, 0.05);
}

.chat-message-xat-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF00AA, #00FFFF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
    position: relative;
}

.chat-message-xat-avatar .avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid #0A0A0A;
}

.chat-message-xat-content {
    flex: 1;
    min-width: 0;
}

.chat-message-xat-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

.chat-message-xat-username {
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-message-xat-username:hover {
    text-decoration: underline;
}

.chat-message-xat-text {
    font-size: 13px;
    color: #E5E7EB;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat-message-xat-timestamp {
    font-size: 10px;
    color: #6B7280;
    margin-left: auto;
}

.chat-message-xat-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Mobile App Tabs */
.xat-app-tabs-mobile {
    scrollbar-width: none;
}

.xat-app-tabs-mobile::-webkit-scrollbar {
    display: none;
}

.app-tab-mobile {
    transition: all 0.2s ease;
}

.app-tab-mobile:hover {
    transform: scale(1.1);
}

.app-tab-mobile.active {
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.2), rgba(0, 255, 255, 0.2));
    box-shadow: 0 0 10px rgba(255, 0, 170, 0.3);
}

/* ===================== NAVBAR SEARCH & DAILY REWARD ===================== */
#searchToggle:hover i,
#dailyRewardBtn:hover i {
    animation: iconPulse 0.3s ease;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

#searchDropdown {
    animation: dropdownSlide 0.2s ease;
}

@keyframes dropdownSlide {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#dailyRewardDropdown {
    animation: dropdownSlide 0.2s ease;
}

#dailyRewardIndicator {
    animation: rewardPulse 2s ease-in-out infinite;
}

@keyframes rewardPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 8px rgba(255, 215, 0, 0);
    }
}

#claimRewardBtn {
    position: relative;
    overflow: hidden;
}

#claimRewardBtn::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;
}

#claimRewardBtn:hover::before {
    left: 100%;
}

#claimRewardBtn:active {
    animation: buttonPress 0.2s ease;
}

@keyframes buttonPress {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
}

/* Reward Claim Animation */
.reward-claim-animation {
    animation: rewardClaim 1s ease;
}

@keyframes rewardClaim {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3) rotate(10deg);
    }
    50% {
        transform: scale(1.2) rotate(-10deg);
    }
    75% {
        transform: scale(1.1) rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Confetti Effect */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(200px) rotate(720deg);
        opacity: 0;
    }
}

/* ===================== AVATAR VE SMILEY ENTEGRASYONU ===================== */
.chat-message-xat-avatar.avatar-ring-member {
    border: 2px solid transparent;
    background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
                linear-gradient(135deg, #FF00AA, #00FFFF) border-box;
    animation: avatarRingPulse 3s ease-in-out infinite;
}

.chat-message-xat-avatar.avatar-ring-moderator {
    border: 2px solid transparent;
    background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
                linear-gradient(135deg, #00FFFF, #A855F7) border-box;
    animation: avatarRingPulse 2.5s ease-in-out infinite;
}

.chat-message-xat-avatar.avatar-ring-admin {
    border: 2px solid transparent;
    background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
                linear-gradient(135deg, #FFD700, #A855F7) border-box;
    animation: avatarRingPulse 2s ease-in-out infinite;
}

.chat-message-xat-avatar.avatar-ring-owner {
    border: 2px solid transparent;
    background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
                linear-gradient(135deg, #FF00AA, #00FFFF, #FFD700, #A855F7) border-box;
    background-size: 300% 300%;
    animation: avatarRingRainbow 3s ease infinite;
}

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

/* Avatar Aksesuarları */
.chat-message-xat-avatar .avatar-crown {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    animation: crownFloat 2s ease-in-out infinite;
}

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

/* Smiley/Emoji Efektleri */
.chat-message-xat-text .emoji-basic {
    display: inline-block;
    font-size: 16px;
    transition: all 0.3s ease;
}

.chat-message-xat-text .emoji-basic:hover {
    transform: scale(1.2);
    filter: brightness(1.2);
}

.chat-message-xat-text .emoji-rare {
    display: inline-block;
    font-size: 18px;
    animation: emojiPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 5px #00FFFF);
}

.chat-message-xat-text .emoji-epic {
    display: inline-block;
    font-size: 20px;
    animation: emojiGlow 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 10px #FFD700);
}

.chat-message-xat-text .emoji-legendary {
    display: inline-block;
    font-size: 22px;
    animation: emojiRainbow 3s ease infinite;
    filter: drop-shadow(0 0 15px #FF00AA);
}

/* Etkileşim Efektleri (Hug, Kiss, etc.) */
.chat-message-xat.interaction-hug {
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.15), rgba(255, 215, 0, 0.15));
    border: 1px solid rgba(255, 0, 170, 0.3);
    animation: interactionGlow 1s ease-out;
}

.chat-message-xat.interaction-kiss {
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.2), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(255, 0, 170, 0.4);
    animation: interactionGlow 1s ease-out;
}

.chat-message-xat.interaction-highfive {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 215, 0, 0.15));
    border: 1px solid rgba(0, 255, 255, 0.3);
    animation: interactionGlow 1s ease-out;
}

@keyframes interactionGlow {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.02);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Power Efektleri */
.chat-message-xat.power-neon {
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.1), rgba(0, 255, 255, 0.1));
    border-left: 3px solid #FF00AA;
    animation: powerNeon 2s ease-in-out infinite;
}

.chat-message-xat.power-fire {
    background: linear-gradient(135deg, rgba(255, 68, 68, 0.1), rgba(255, 215, 0, 0.1));
    border-left: 3px solid #FF4444;
    animation: powerFire 1.5s ease-in-out infinite;
}

.chat-message-xat.power-ice {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(168, 85, 247, 0.1));
    border-left: 3px solid #00FFFF;
    animation: powerIce 2s ease-in-out infinite;
}

.chat-message-xat.power-rainbow {
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.1), rgba(0, 255, 255, 0.1), rgba(255, 215, 0, 0.1));
    border-left: 3px solid transparent;
    border-image: linear-gradient(135deg, #FF00AA, #00FFFF, #FFD700) 1;
    animation: powerRainbow 3s ease infinite;
}

@keyframes powerNeon {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 0, 170, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 0, 170, 0.5);
    }
}

@keyframes powerFire {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 68, 68, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
    }
}

@keyframes powerIce {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    }
}

@keyframes powerRainbow {
    0% {
        border-image: linear-gradient(135deg, #FF00AA, #00FFFF, #FFD700) 1;
    }
    33% {
        border-image: linear-gradient(135deg, #00FFFF, #FFD700, #A855F7) 1;
    }
    66% {
        border-image: linear-gradient(135deg, #FFD700, #A855F7, #FF00AA) 1;
    }
    100% {
        border-image: linear-gradient(135deg, #FF00AA, #00FFFF, #FFD700) 1;
    }
}

/* Progress Bar Glowing ve Renk Geçişi */
.progress-glow {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000);
    background-size: 300% 100%;
    animation: xpRainbow 3s linear infinite;
    box-shadow: 0 0 10px var(--dopamin-magenta), 0 0 20px var(--dopamin-cyan);
}

@keyframes progress-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes xpRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes xpBarShine {
    0% { left: -60%; }
    100% { left: 160%; }
}

.menu-level-rainbow {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: xpRainbow 3s linear infinite;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}

.menu-xp-fire {
    background: linear-gradient(90deg, #ffea00, #ff6200, #ff0000, #ffea00);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: xpFire 1.4s linear infinite;
    filter: drop-shadow(0 0 2px #ff4d00) drop-shadow(0 0 4px #ff0000);
}

@keyframes xpFire {
    0% { background-position: 0% 50%; filter: drop-shadow(0 0 2px #ff4d00) drop-shadow(0 0 4px #ff0000); }
    50% { filter: drop-shadow(0 0 4px #ffea00) drop-shadow(0 0 8px #ff4d00); }
    100% { background-position: 200% 50%; filter: drop-shadow(0 0 2px #ff4d00) drop-shadow(0 0 4px #ff0000); }
}

.menu-info-btn-energetic {
    color: #00ffff;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.25);
    transition: all 0.2s ease;
}

.menu-info-btn-energetic:hover {
    background: rgba(0, 255, 255, 0.22);
    box-shadow: 0 0 14px rgba(0, 255, 255, 0.5);
    transform: scale(1.12);
}

.menu-trophy-btn-energetic {
    color: #ffea00;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.35);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
    animation: trophyPulse 1.6s ease-in-out infinite;
    transition: all 0.2s ease;
}

.menu-trophy-btn-energetic:hover {
    background: rgba(255, 215, 0, 0.24);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.55);
    transform: scale(1.12);
}

.menu-level-badge-energetic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #ffea00, #ff6200, #ff0000);
    box-shadow: 0 0 12px rgba(255, 100, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
    animation: badgePulse 2s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

@keyframes trophyPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 215, 0, 0.3); }
    50% { transform: scale(1.08); box-shadow: 0 0 14px rgba(255, 215, 0, 0.55); }
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 100, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 18px rgba(255, 100, 0, 0.75), 0 0 28px rgba(255, 215, 0, 0.5); }
}

.nav-balance-energetic {
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.45), rgba(219, 39, 119, 0.3));
    border: 1px solid rgba(168, 85, 247, 0.45);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.05);
    animation: balancePulse 2.5s ease-in-out infinite;
    transition: all 0.2s ease;
}

.nav-balance-energetic:hover {
    border-color: rgba(168, 85, 247, 0.85);
    box-shadow: 0 0 22px rgba(168, 85, 247, 0.5), inset 0 0 12px rgba(255, 255, 255, 0.1);
}

.nav-balance-wallet {
    background: conic-gradient(from 0deg, #8b5cf6, #ec4899, #f59e0b, #8b5cf6);
    background-size: 200% 200%;
    animation: walletSpin 4s linear infinite;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
}

.nav-balance-icon {
    color: #ffffff;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.7));
    animation: coinShine 2s ease-in-out infinite;
}

.nav-balance-amount {
    background: linear-gradient(90deg, #f0abfc, #fde68a, #f0abfc);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: shimmerGold 2.5s linear infinite;
    filter: drop-shadow(0 0 4px rgba(236, 72, 153, 0.5));
}

@keyframes balancePulse {
    0%, 100% { box-shadow: 0 0 12px rgba(168, 85, 247, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.05); }
    50% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.45), inset 0 0 14px rgba(255, 255, 255, 0.1); }
}

@keyframes walletSpin {
    0% { background-position: 0% 0%; transform: rotate(0deg) scale(1); }
    50% { transform: rotate(2deg) scale(1.04); }
    100% { background-position: 200% 200%; transform: rotate(0deg) scale(1); }
}

@keyframes coinShine {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.7)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95)); transform: scale(1.12); }
}

@keyframes shimmerGold {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.menu-username-glow {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.5), 0 0 16px rgba(236, 72, 153, 0.4);
}

.menu-handle-glow {
    color: #9ca3af;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.25);
}

.menu-stat-glow {
    color: #ffffff;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.45);
}

.menu-avatar-glow .rounded-full {
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.45), 0 0 24px rgba(236, 72, 153, 0.3);
    animation: avatarPulse 3s ease-in-out infinite;
}

@keyframes avatarPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(168, 85, 247, 0.45), 0 0 24px rgba(236, 72, 153, 0.3); }
    50% { box-shadow: 0 0 18px rgba(168, 85, 247, 0.7), 0 0 34px rgba(236, 72, 153, 0.5); }
}

.menu-link-item {
    position: relative;
    transition: all 0.2s ease;
}

.menu-link-item:hover {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.03);
}

.menu-link-icon {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.menu-link-item:hover .menu-link-icon {
    transform: scale(1.2);
    filter: drop-shadow(0 0 5px currentColor);
}

.menu-logout-energetic {
    transition: all 0.2s ease;
}

.menu-logout-energetic:hover {
    background: rgba(239, 68, 68, 0.08);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.nav-username-glow {
    background: linear-gradient(90deg, #c084fc, #ffffff, #38bdf8, #c084fc);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: navUsernameShine 2.5s linear infinite;
    filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.4));
    font-weight: 700;
}

@keyframes navUsernameShine {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.nav-gift-energetic {
    color: #FFD700;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7));
    animation: giftPulse 1.5s ease-in-out infinite;
}

.nav-search-energetic {
    color: #FF00AA;
    filter: drop-shadow(0 0 4px rgba(255, 0, 170, 0.6));
    animation: searchPulse 2s ease-in-out infinite;
}

@keyframes giftPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6)); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.95)); }
}

@keyframes searchPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(255, 0, 170, 0.5)); }
    50% { transform: scale(1.12); filter: drop-shadow(0 0 7px rgba(255, 0, 170, 0.85)); }
}

.menu-main-trophy-energetic {
    background: radial-gradient(circle at 30% 30%, #fffde7, #ffea00, #ff6200, #ff0000);
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.55), 0 0 28px rgba(255, 80, 0, 0.35), inset 0 0 8px rgba(255, 255, 255, 0.4);
    animation: trophyFireSpin 1.2s ease-in-out infinite;
}

.menu-main-trophy-icon {
    color: #ffffff;
    filter: drop-shadow(0 0 4px rgba(255, 80, 0, 0.9));
}

@keyframes trophyFireSpin {
    0%, 100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 14px rgba(255, 215, 0, 0.55), 0 0 28px rgba(255, 80, 0, 0.35); }
    50% { transform: scale(1.08) rotate(4deg); box-shadow: 0 0 22px rgba(255, 215, 0, 0.8), 0 0 42px rgba(255, 80, 0, 0.55); }
}

.menu-xp-rainbow {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000);
    background-size: 300% 100%;
    animation: xpRainbow 3s linear infinite;
    box-shadow: 0 0 12px rgba(255, 0, 170, 0.6), 0 0 6px rgba(0, 255, 255, 0.4);
}

.menu-xp-rainbow::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    filter: blur(1px);
    animation: xpBarShine 1.8s ease-in-out infinite;
}

/* Canlı İzleyici Pulse Animasyonu */
.viewer-pulse {
    animation: viewer-pulse 2s ease-in-out infinite;
}

@keyframes viewer-pulse {
    0%, 100% {
        color: #fff;
        text-shadow: 0 0 5px var(--dopamin-magenta);
    }
    50% {
        color: var(--dopamin-cyan);
        text-shadow: 0 0 15px var(--dopamin-cyan), 0 0 25px var(--dopamin-magenta);
    }
}

/* İzleyici sayısı artışı efekti */
.viewer-count-increase {
    animation: viewer-count-spike 0.5s ease-out;
}

@keyframes viewer-count-spike {
    0% {
        color: #53fc18;
        transform: scale(1);
        text-shadow: 0 0 10px #53fc18;
    }
    50% {
        color: var(--dopamin-magenta);
        transform: scale(1.3);
        text-shadow: 0 0 20px var(--dopamin-magenta);
    }
    100% {
        color: #fff;
        transform: scale(1);
        text-shadow: 0 0 5px var(--dopamin-magenta);
    }
}

/* Particle Efektleri - CSS Based */
.particle-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--dopamin-magenta);
    border-radius: 50%;
    opacity: 0;
    animation: particle-float 8s ease-in-out infinite;
    box-shadow: 0 0 10px var(--dopamin-magenta), 0 0 20px var(--dopamin-cyan);
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 7s; }
.particle:nth-child(2) { left: 30%; animation-delay: 1s; animation-duration: 9s; background: var(--dopamin-cyan); }
.particle:nth-child(3) { left: 50%; animation-delay: 2s; animation-duration: 8s; }
.particle:nth-child(4) { left: 70%; animation-delay: 3s; animation-duration: 10s; background: var(--dopamin-gold); }
.particle:nth-child(5) { left: 90%; animation-delay: 4s; animation-duration: 7s; }

@keyframes particle-float {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100vh) scale(1);
        opacity: 0;
    }
}

/* Mobil Performans Optimizasyonu */
@media (max-width: 768px) {
    .particle-container {
        display: none;
    }
    
    .daily-streak-container {
        transform: scale(0.8);
    }
    
    .leaderboard-container {
        display: none;
    }
    
    .lootbox-card {
        transform: scale(0.9);
    }
    
    .glow-card:hover {
        transform: translateY(-2px) scale(1.02);
    }
}

/* ===================== CONFETTİ ANİMASYONU ===================== */
.confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
}

.confetti.animate {
    animation: confetti-fall 2s ease-out forwards;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg) scale(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg) scale(1);
        opacity: 0;
    }
}

/* XP Fly Animasyonu */
.xp-fly {
    position: absolute;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dopamin-gold);
    text-shadow: 0 0 10px var(--dopamin-gold), 0 0 20px var(--dopamin-magenta);
    pointer-events: none;
    z-index: 10000;
    animation: xp-fly-up 0.6s ease-out forwards;
}

@keyframes xp-fly-up {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(1.5);
        opacity: 0;
    }
}

/* Kalp Patlama Animasyonu */
.heart-burst {
    position: absolute;
    pointer-events: none;
    z-index: 10000;
    animation: heart-burst 0.6s ease-out forwards;
}

.heart-burst::before {
    content: '❤️';
    font-size: 2rem;
    animation: heart-scale 0.6s ease-out forwards;
}

@keyframes heart-burst {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes heart-scale {
    0% {
        transform: scale(0) rotate(0deg);
    }
    50% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* ===================== LEVEL UP ANİMASYONU ===================== */
.level-up-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 0, 170, 0.3) 0%, transparent 70%);
    animation: level-up-fade 1.5s ease-out forwards;
}

@keyframes level-up-fade {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.level-up-content {
    text-align: center;
    transform: scale(0.5);
    animation: level-up-bounce 1s ease-out forwards;
}

@keyframes level-up-bounce {
    0% { transform: scale(0.5) translateY(50px); opacity: 0; }
    50% { transform: scale(1.2) translateY(-10px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.level-up-title {
    font-size: 4rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--dopamin-gold), var(--dopamin-magenta), var(--dopamin-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px var(--dopamin-gold);
    animation: level-up-text-glow 1s ease-in-out infinite alternate;
}

@keyframes level-up-text-glow {
    0% {
        filter: drop-shadow(0 0 20px var(--dopamin-gold));
    }
    100% {
        filter: drop-shadow(0 0 40px var(--dopamin-magenta));
    }
}

.level-up-subtitle {
    font-size: 2rem;
    color: #fff;
    margin-top: 1rem;
    font-weight: 700;
}

.level-up-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.level-up-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--dopamin-gold);
    border-radius: 50%;
    animation: level-up-particle-explode 1.5s ease-out forwards;
}

@keyframes level-up-particle-explode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx, 100px), var(--ty, -100px)) scale(0);
        opacity: 0;
    }
}

/* Scrollbar gizle */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

#sidebar::-webkit-scrollbar { display: none; }
#sidebar { -ms-overflow-style: none; scrollbar-width: none; }

/* Işıldaklı hover efektleri - Dopamin Renkleri */
.glow-card {
    transition: all 0.3s ease;
    position: relative;
}

.glow-card:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 20px 40px rgba(255, 0, 170, 0.3),
                0 0 20px rgba(0, 255, 255, 0.2),
                0 0 40px rgba(255, 0, 170, 0.1);
    border-color: rgba(255, 0, 170, 0.5);
}

.glow-card:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
        rgba(255, 0, 170, 0.1) 0%,
        rgba(0, 255, 255, 0.1) 50%,
        rgba(255, 215, 0, 0.1) 100%);
    border-radius: 12px;
    z-index: -1;
    animation: shimmer 2s ease-in-out infinite;
}

/* Yayın Kartı Thumbnail Zoom */
.stream-card {
    position: relative;
    overflow: hidden;
}

.stream-card .thumbnail-container {
    overflow: hidden;
    position: relative;
}

.stream-card:hover .thumbnail-container img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Şimdi Canlı Pulse Badge */
.live-badge-pulse {
    animation: live-badge-pulse 2s ease-in-out infinite;
}

@keyframes live-badge-pulse {
    0%, 100% {
        box-shadow: 0 0 5px #53fc18, 0 0 10px #53fc18;
        background: #53fc18;
    }
    50% {
        box-shadow: 0 0 15px var(--dopamin-magenta), 0 0 25px var(--dopamin-cyan);
        background: var(--dopamin-magenta);
    }
}

/* Kategori Kartları Neon Border + Glow */
.category-card {
    position: relative;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    border-radius: 16px;
}

.category-card:hover {
    border-color: var(--dopamin-magenta);
    box-shadow: 0 0 15px var(--dopamin-magenta),
                0 0 30px var(--dopamin-cyan),
                inset 0 0 20px rgba(255, 0, 170, 0.1);
    transform: translateY(-4px) scale(1.05);
}

.category-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(45deg,
        var(--dopamin-magenta),
        var(--dopamin-cyan),
        var(--dopamin-gold),
        var(--dopamin-magenta));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.category-card:hover::before {
    opacity: 1;
    animation: category-border-gradient 3s linear infinite;
}

@keyframes category-border-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Öne Çıkan Canlı Yayınlar Auto-Scroll + Highlight */
.featured-live-section {
    position: relative;
}

.featured-live-container {
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.featured-live-container::-webkit-scrollbar {
    display: none;
}

.featured-live-item {
    transition: all 0.3s ease;
}

.featured-live-item.highlighted {
    transform: scale(1.05);
    box-shadow: 0 0 30px var(--dopamin-magenta),
                0 0 50px var(--dopamin-cyan);
    border: 2px solid var(--dopamin-magenta);
    z-index: 10;
}

.featured-live-item.highlighted::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid var(--dopamin-cyan);
    border-radius: inherit;
    animation: highlight-pulse 1s ease-in-out infinite;
}

@keyframes highlight-pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* ===================== DAILY STREAK SİSTEMİ ===================== */
.daily-streak-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.1), rgba(255, 215, 0, 0.1));
    border: 1px solid rgba(255, 0, 170, 0.3);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.daily-streak-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, var(--dopamin-magenta), var(--dopamin-gold), var(--dopamin-cyan));
    background-size: 200% 200%;
    animation: streak-gradient 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.daily-streak-container:hover::before {
    opacity: 0.1;
}

@keyframes streak-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.streak-fire-icon {
    font-size: 1.5rem;
    animation: fire-flicker 0.5s ease-in-out infinite alternate;
}

@keyframes fire-flicker {
    0% {
        transform: scale(1) rotate(-5deg);
        filter: drop-shadow(0 0 5px #FF4500);
    }
    100% {
        transform: scale(1.1) rotate(5deg);
        filter: drop-shadow(0 0 15px #FFD700);
    }
}

.streak-count {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 10px var(--dopamin-gold);
}

.streak-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.streak-bonus {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, var(--dopamin-gold), var(--dopamin-magenta));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    animation: streak-bonus-pulse 1s ease-in-out infinite;
}

@keyframes streak-bonus-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 5px var(--dopamin-gold);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 15px var(--dopamin-magenta);
    }
}

/* Streak Uyarı */
.streak-warning-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    animation: overlay-fade 0.3s ease-out;
}

@keyframes overlay-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.streak-warning-content {
    background: linear-gradient(135deg, #1a1a24, #2a1a34);
    border: 2px solid var(--dopamin-magenta);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(255, 0, 170, 0.3);
    animation: warning-bounce 0.5s ease-out;
}

@keyframes warning-bounce {
    0% { transform: scale(0.8) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.streak-warning-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    animation: warning-icon-shake 0.5s ease-in-out infinite;
}

@keyframes warning-icon-shake {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

.streak-warning-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.streak-warning-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
}

.streak-warning-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.streak-warning-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.streak-warning-btn-primary {
    background: linear-gradient(135deg, var(--dopamin-magenta), var(--dopamin-cyan));
    border: none;
    color: #fff;
}

.streak-warning-btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px var(--dopamin-magenta);
}

.streak-warning-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.streak-warning-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ===================== GÜNLÜK GÖREV KUTUSU (LOOTBOX) - KALDIRILDI ===================== */
/* Lootbox card navbar'da günlük ödül butonu olarak kullanılıyor */

/* ===================== TAB CONTENT STYLES ===================== */
.channel-tab-content {
    display: none;
}

.channel-tab-content:not(.hidden) {
    display: block;
}

.hidden {
    display: none;
}

/* ===================== KOMPAKT HERO SECTION ===================== */
.channel-profile-card-compact {
    background: linear-gradient(135deg, rgba(22, 26, 35, 0.8), rgba(11, 14, 20, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    min-height: 56px;
    white-space: nowrap;
}

/* ===================== Yayın Bilgi Panelleri (Player/Chat altı) ===================== */
.stream-info-panel,
.stream-info-actions-panel {
    background: linear-gradient(135deg, rgba(22, 26, 35, 0.9), rgba(11, 14, 20, 0.97));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.28);
}

.stream-info-panel {
    padding: 12px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.stream-info-avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-top: 6px;
}

.stream-info-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    position: relative;
}

.stream-info-handle-under {
    font-size: 0.68rem;
    color: #8b95a8;
    font-weight: 600;
    white-space: nowrap;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stream-info-avatar::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--dopamin-magenta, #FF00AA), var(--dopamin-cyan, #00FFFF));
    opacity: 0.5;
    z-index: -1;
}

.stream-info-avatar .profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 13px;
    font-size: 1.05rem;
    overflow: hidden;
}

.stream-info-avatar .profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.stream-info-text-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.stream-info-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 6px 12px;
}

.stream-info-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.stream-info-bottom-split {
    display: flex;
    align-items: stretch;
    gap: 12px;
    min-width: 0;
    flex: 1 1 0;
    min-height: 0;
}

.stream-info-desc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 0;
}

.stream-info-bottom-split .stream-info-box {
    padding: 14px 12px;
    min-height: 52px;
}

.stream-info-box-icon {
    width: 14px;
    height: 14px;
    color: #00FFFF;
    flex-shrink: 0;
}

.bio-tooltip-container {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 6px;
}

.bio-info-icon {
    width: 14px;
    height: 14px;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s ease;
}

.bio-info-icon:hover {
    color: #94a3b8;
}

.bio-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    transform: translateY(-8px);
    background: rgba(22, 26, 35, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 200px;
    max-width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.bio-tooltip p {
    font-size: 0.75rem;
    color: #e2e8f0;
    line-height: 1.4;
    margin: 0;
    white-space: normal;
}

.bio-tooltip-container:hover .bio-tooltip {
    opacity: 1;
    visibility: visible;
}

.stream-info-name {
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    line-height: 1.15;
}

.stream-info-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.stream-info-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 0;
}

.stream-info-handle {
    font-size: 0.75rem;
    color: #8b95a8;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.stream-info-divider {
    color: #4b5563;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.stream-info-title {
    font-size: 0.8rem;
    color: #cbd5e1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 0;
}

.stream-info-desc {
    font-size: 0.78rem;
    color: #8b95a8;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 0;
    margin: 0;
}

.stream-info-actions-panel {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
}

.stream-info-actions-row-primary {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
}

.stream-info-actions-row-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.stream-info-icon-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.stream-info-icon-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1.08);
}

.stream-info-icon-btn-accent {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 0, 170, 0.3);
    box-shadow: 0 0 10px rgba(255, 0, 170, 0.12);
}

.stream-info-icon-btn-accent:hover {
    border-color: rgba(255, 0, 170, 0.5);
    box-shadow: 0 0 14px rgba(255, 0, 170, 0.2);
}

.stream-action-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

.stream-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.stream-action-btn-cyan {
    background: linear-gradient(135deg, rgba(0, 200, 170, 0.35), rgba(0, 90, 90, 0.35));
    border-color: rgba(0, 255, 200, 0.45);
    box-shadow: 0 0 14px rgba(0, 255, 200, 0.25), inset 0 0 12px rgba(0, 255, 200, 0.08);
}

.stream-action-btn-cyan:hover {
    border-color: rgba(0, 255, 200, 0.7);
    box-shadow: 0 0 22px rgba(0, 255, 200, 0.4), inset 0 0 14px rgba(0, 255, 200, 0.12);
}

.stream-action-btn-gold {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.12);
}

.stream-action-btn-gold:hover {
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.2);
}

.stream-action-btn-magenta {
    background: linear-gradient(135deg, rgba(180, 0, 110, 0.35), rgba(70, 0, 45, 0.35));
    border-color: rgba(255, 0, 170, 0.45);
    box-shadow: 0 0 14px rgba(255, 0, 170, 0.25), inset 0 0 12px rgba(255, 0, 170, 0.08);
}

.stream-action-btn-magenta:hover {
    border-color: rgba(255, 0, 170, 0.7);
    box-shadow: 0 0 22px rgba(255, 0, 170, 0.4), inset 0 0 14px rgba(255, 0, 170, 0.12);
}

.stream-info-social-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.stream-info-slogan-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    text-align: center;
}

.stream-info-slogan-text {
    font-family: 'Dancing Script', cursive;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
    background: linear-gradient(90deg, var(--dopamin-cyan, #00FFFF), var(--dopamin-magenta, #FF00AA));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.25));
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stream-info-slogan-text:empty::before {
    content: 'Kanalın için bir slogan ekle...';
    -webkit-text-fill-color: #6b7280;
    color: #6b7280;
    font-style: italic;
}

.stream-info-slogan-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.stream-info-slogan-edit input {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    padding: 6px 10px;
    font-family: 'Dancing Script', cursive;
    font-size: 1.05rem;
    color: #fff;
}

.stream-info-slogan-edit input:focus {
    outline: none;
    border-color: rgba(0, 255, 255, 0.6);
}

.stream-info-slogan-edit button {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
    transition: all 0.2s ease;
}

.stream-info-slogan-edit button:hover {
    background: rgba(255, 255, 255, 0.16);
}

#sloganSaveBtn {
    color: #00FFFF;
}

#sloganCancelBtn {
    color: #FF00AA;
}

.social-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: #ffffff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0 6px rgba(120, 190, 255, 0.35));
}

.social-icon-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
}

.social-icon-btn::after {
    content: '';
    position: absolute;
    inset: -3px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: transparent;
    border: 1px solid rgba(150, 210, 255, 0.55);
    pointer-events: none;
}

.social-icon-btn svg {
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.social-icon-btn:hover {
    transform: translateY(-3px) scale(1.12);
    filter: drop-shadow(0 0 12px rgba(150, 210, 255, 0.65));
}

.social-icon-instagram {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    filter: drop-shadow(0 0 8px rgba(214, 36, 159, 0.55)) drop-shadow(0 0 6px rgba(120, 190, 255, 0.35));
}
.social-icon-instagram:hover { filter: drop-shadow(0 0 16px rgba(214, 36, 159, 0.8)) drop-shadow(0 0 10px rgba(150, 210, 255, 0.6)); }

.social-icon-twitter {
    background: linear-gradient(145deg, #1a1a1a, #000000);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 6px rgba(120, 190, 255, 0.35));
}
.social-icon-twitter:hover { filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 10px rgba(150, 210, 255, 0.6)); }

.social-icon-youtube {
    background: linear-gradient(145deg, #ff3b3b, #cc0000);
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.55)) drop-shadow(0 0 6px rgba(120, 190, 255, 0.35));
}
.social-icon-youtube:hover { filter: drop-shadow(0 0 16px rgba(255, 0, 0, 0.8)) drop-shadow(0 0 10px rgba(150, 210, 255, 0.6)); }

.social-icon-tiktok {
    background: linear-gradient(145deg, #1f1f1f, #000000);
    filter: drop-shadow(0 0 7px rgba(37, 244, 238, 0.5)) drop-shadow(0 0 7px rgba(254, 44, 85, 0.4));
}
.social-icon-tiktok:hover { filter: drop-shadow(0 0 14px rgba(37, 244, 238, 0.75)) drop-shadow(0 0 14px rgba(254, 44, 85, 0.6)); }

.social-icon-discord {
    background: linear-gradient(145deg, #6c76f5, #4a54d6);
    filter: drop-shadow(0 0 8px rgba(88, 101, 242, 0.55)) drop-shadow(0 0 6px rgba(120, 190, 255, 0.35));
}
.social-icon-discord:hover { filter: drop-shadow(0 0 16px rgba(88, 101, 242, 0.8)) drop-shadow(0 0 10px rgba(150, 210, 255, 0.6)); }

.social-icon-facebook {
    background: linear-gradient(145deg, #3b8cf7, #1461d9);
    filter: drop-shadow(0 0 8px rgba(24, 119, 242, 0.55)) drop-shadow(0 0 6px rgba(120, 190, 255, 0.35));
}
.social-icon-facebook:hover { filter: drop-shadow(0 0 16px rgba(24, 119, 242, 0.8)) drop-shadow(0 0 10px rgba(150, 210, 255, 0.6)); }

.social-edit-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #d1d5db;
}
.social-edit-btn:hover {
    color: #ffffff;
    filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.6));
}

.social-icon-empty {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.28);
    box-shadow: none;
    filter: none;
    cursor: default;
}
.social-icon-empty::after {
    border-color: rgba(255, 255, 255, 0.15);
}
.social-icon-empty svg { filter: none; }
button.social-icon-empty {
    cursor: pointer;
}
button.social-icon-empty:hover {
    color: rgba(139, 92, 246, 0.9);
    filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.5));
}

@media (max-width: 900px) {
    .stream-info-name {
        max-width: 140px;
    }
}

.profile-avatar-compact {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.profile-avatar-compact .profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    font-size: 1rem;
    object-fit: cover;
    overflow: hidden;
}

.profile-avatar-compact {
    width: 42px;
    height: 42px;
    min-width: 42px;
}

.profile-avatar-compact .profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.profile-avatar-compact .profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: 36px !important;
    max-height: 36px !important;
}

.profile-avatar-compact .avatar-glow {
    filter: blur(6px);
    opacity: 0.15;
}

.profile-left-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.profile-info-compact {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    line-height: 1.2;
    margin-left: 0;
}

.profile-row-1-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}

.profile-row-1-compact > * {
    min-width: 0;
}

.channel-name-compact {
    display: inline-flex;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-group-compact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.profile-row-2-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    line-height: 1.2;
    flex-wrap: wrap;
}

.profile-row-2-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.profile-row-2-right {
    display: none;
}

#channelXPBar {
    margin-left: 8px;
}

.channel-name-compact {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.channel-tag-compact {
    font-size: 0.7rem;
    color: #64748b;
    white-space: nowrap;
    line-height: 1.2;
}

.bio-title-compact {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.tag-group-compact {
    display: flex;
    gap: 4px;
    line-height: 1.2;
}


.tag-group-compact span {
    font-size: 0.65rem;
    color: #64748b;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.profile-actions-compact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
    line-height: 1.1;
    margin-left: auto;
}

.action-buttons-compact {
    display: flex;
    gap: 4px;
    align-items: center;
}

.action-buttons-compact .btn-action {
    padding: 4px 10px;
    font-size: 0.7rem;
    line-height: 1.1;
}

.action-buttons-compact .btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
}

/* ===================== SABİT ÇERÇEVE LAYOUT ===================== */
.channel-layout-container {
    display: grid;
    grid-template-columns: 1fr 360px;
    grid-template-rows: auto 1fr;
    gap: 20px;
    padding: 20px;
    max-width: 100%;
}

/* Hero Section - Tüm Genişlik */
.channel-layout-hero {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* Player - Sol Taraf */
.channel-layout-player {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
}

/* Chat - Sağ Taraf */
.channel-layout-chat {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
}

/* Neon LED Çerçeve Efekti */
.neon-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.neon-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, #FF00AA, #00FFFF, #FFD700);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.6;
    pointer-events: none;
}

.neon-frame::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    background: linear-gradient(135deg, #FF00AA, #00FFFF, #FFD700);
    filter: blur(8px);
    opacity: 0.3;
    z-index: -1;
}

/* Player Container */
.player-frame {
    height: 60vh;
    background: #0a0a10;
}

/* Chat Container */
.chat-frame {
    height: 60vh;
    background: #0f0f15;
}

/* ===================== FIRST FOLD 100VH LAYOUT ===================== */
/* İlk ekranın sınırlarını çiziyoruz */
.first-fold-container {
    display: flex;
    flex-direction: column;
    /* Header yüksekliğini düşerek ekranı tam kaplatıyoruz */
    height: calc(100vh - 70px);
    padding: 20px;
    box-sizing: border-box;
    gap: 15px;
}

/* Player ve Chat'in yan yana durduğu dikeyde esneyen satır */
.top-media-row {
    display: flex;
    flex: 1; /* Dikeydeki tüm boşluğu bu satıra zorla veriyoruz */
    min-height: 0; /* İçeride taşma olmaması için tarayıcıya küçülme izni verir */
    gap: 15px;
    height: 75vh; /* Yüksekliğin %75'ini buraya sabitliyoruz */
}

.player-container {
    flex: 1;
    height: 100%;
}

.chat-container {
    width: 360px;
    height: 100%;
}

/* Tüm genişliğe yayılan Hero Section - Kompakt */
.full-width-hero {
    width: 100%;
    height: 90px; /* Dikey yüksekliği sınırla! */
    flex-shrink: 0; /* Ezilmesini engelle ama uzamasını da durdur */

    /* İçindeki her şeyi tek satıra döküyoruz */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px; /* Paddingleri kıstık */
    background: rgba(22, 26, 35, 0.6);
    border-radius: 12px;
}

/* Scroll edilerek gelmesini istediğin alt taraftaki diğer bölümler */
.lower-content-section {
    padding: 40px 20px;
    background-color: #080a0f;
}

/* ===================== YENİ HERO SECTION TASARIMI ===================== */
/* --- KANAL PROFİL KARTI ANA DÜZENİ --- */
.channel-profile-card {
    background: radial-gradient(100% 300% at 0% 0%, rgba(22, 26, 35, 0.5) 0%, rgba(11, 14, 20, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    gap: 28px;
    align-items: flex-start;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Sol Profil Resmi Grubu */
.profile-avatar-container {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    object-fit: cover;
    border: 2px solid rgba(139, 92, 246, 0.4);
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, #8b5cf6, #db2777);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
}

.avatar-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #8b5cf6;
    filter: blur(20px);
    opacity: 0.3;
    border-radius: 24px;
    z-index: 1;
}

/* Sağ Taraf İçerik Alanı */
.profile-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Kompakt Profil Bilgileri */
.profile-info-compact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.channel-name-compact {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.3px;
}

.header-sub-row-compact {
    display: flex;
    align-items: center;
    gap: 8px;
}

.channel-tag-compact {
    font-size: 0.75rem;
    color: #64748b;
}

/* Kompakt Bio */
.bio-compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 300px;
}

.bio-title-compact {
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-group-compact {
    display: flex;
    gap: 4px;
}

/* Kompakt Butonlar */
.action-buttons-compact {
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-buttons-compact .btn-action {
    padding: 6px 12px;
    font-size: 0.75rem;
}

.action-buttons-compact .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
}

/* Eski CSS stilleri (geriye uyumluluk için) */
.profile-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.channel-name {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.header-sub-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.channel-tag {
    font-size: 0.9rem;
    color: #64748b;
}

/* Şık Level Badge */
.level-badge {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(219, 39, 119, 0.2));
    border: 1px solid rgba(139, 92, 246, 0.3);
    padding: 6px 14px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #f472b6;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
}

/* Glassmorphism Biyografi Kartı */
.bio-card {
    background: rgba(22, 26, 35, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bio-title {
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.4;
}

.bio-text {
    font-size: 0.95rem;
    color: #cbd5e1;
    font-weight: 500;
    line-height: 1.4;
}

/* Taglar */
.tag-group {
    display: flex;
    gap: 8px;
}

.tag {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 8px;
}

.tag-purple {
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.tag-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Alt Bölüm */
.profile-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    gap: 20px;
    flex-wrap: wrap;
}

/* Modern XP Bar */
.xp-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    margin-top: 0.2rem;
    min-width: 0;
    flex-wrap: nowrap;
}

.xp-bar-bg {
    width: 180px;
    max-width: 100%;
    height: 14px;
    background: rgba(15, 23, 42, 0.95);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.08), 0 0 18px rgba(59, 130, 246, 0.14);
}

.xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000);
    background-size: 300% 100%;
    animation: xpRainbow 2.2s linear infinite;
    box-shadow: 0 0 24px rgba(255, 0, 170, 0.4), 0 0 28px rgba(0, 255, 255, 0.35), 0 0 36px rgba(255, 215, 0, 0.3);
    border-radius: 999px;
    transition: width 0.7s ease;
    position: relative;
}

.xp-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.06));
    opacity: 0.45;
    filter: blur(4px);
    border-radius: 999px;
}

.xp-bar-fill::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000);
    background-size: 300% 100%;
    animation: xpRainbow 2.7s linear infinite;
    opacity: 0.22;
    filter: blur(18px);
    border-radius: 999px;
    z-index: -1;
}

.xp-text-inline {
    font-size: 0.75rem;
    color: #e2e8f0;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Butonlar */
.action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-action {
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-solid {
    background: #8b5cf6;
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

.btn-solid:hover {
    background: #7c3aed;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35);
}

.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.15);
}

/* ===================== BASİT LEADERBOARD ===================== */
.leaderboard-container {
    background: linear-gradient(135deg, rgba(26, 26, 36, 0.95), rgba(42, 26, 52, 0.95));
    border: 2px solid rgba(255, 0, 170, 0.3);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(10px);
}

.leaderboard-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    text-align: center;
    text-shadow: 0 0 10px var(--dopamin-magenta);
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    transition: all 0.3s ease;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.leaderboard-item:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.1);
}

.leaderboard-rank {
    font-size: 1.2rem;
    font-weight: 700;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
}

/* İlk 3'e özel glow */
.leaderboard-item:nth-child(2) .leaderboard-rank {
    background: linear-gradient(135deg, var(--dopamin-gold), var(--dopamin-magenta));
    box-shadow: 0 0 15px var(--dopamin-gold), 0 0 30px var(--dopamin-magenta);
    animation: gold-glow 2s ease-in-out infinite alternate;
}

.leaderboard-item:nth-child(3) .leaderboard-rank {
    background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
    box-shadow: 0 0 15px #C0C0C0, 0 0 30px #A8A8A8;
    animation: silver-glow 2s ease-in-out infinite alternate;
}

.leaderboard-item:nth-child(4) .leaderboard-rank {
    background: linear-gradient(135deg, #CD7F32, #8B4513);
    box-shadow: 0 0 15px #CD7F32, 0 0 30px #8B4513;
    animation: bronze-glow 2s ease-in-out infinite alternate;
}

@keyframes gold-glow {
    0% {
        filter: drop-shadow(0 0 10px var(--dopamin-gold));
    }
    100% {
        filter: drop-shadow(0 0 20px var(--dopamin-magenta));
    }
}

@keyframes silver-glow {
    0% {
        filter: drop-shadow(0 0 10px #C0C0C0);
    }
    100% {
        filter: drop-shadow(0 0 20px #A8A8A8);
    }
}

@keyframes bronze-glow {
    0% {
        filter: drop-shadow(0 0 10px #CD7F32);
    }
    100% {
        filter: drop-shadow(0 0 20px #8B4513);
    }
}

.leaderboard-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dopamin-magenta), var(--dopamin-cyan));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.leaderboard-info {
    flex: 1;
}

.leaderboard-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.leaderboard-score {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.leaderboard-xp {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--dopamin-gold);
    text-shadow: 0 0 5px var(--dopamin-gold);
}

@keyframes shimmer {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

.glow-image {
    transition: all 0.3s ease;
}

.glow-image:hover {
    filter: brightness(1.1) contrast(1.05);
    transform: scale(1.05);
}

/* Tasarımsal Cursor Efektleri */
.category-scroll {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke="%23a855f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') 12 12, auto;
}

.category-scroll:active {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke="%23ec4899" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') 12 12, grabbing;
}

.category-scroll.dragging {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke="%23fbbf24" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') 12 12, grabbing;
}

/* Diğer kaydırılabilir alanlar için */
.flex.overflow-x-auto {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke="%236366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') 12 12, auto;
}

.flex.overflow-x-auto:active {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke="%23f59e0b" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') 12 12, grabbing;
}

/* Responsive Düzenlemeler */
@media (max-width: 768px) {
    /* Mobilde daha küçük kartlar */
    .glow-card {
        min-width: 280px;
        max-width: 320px;
    }
    
    /* Kategoriler için mobil düzen */
    .category-scroll .w-48 {
        width: 160px !important;
        height: 240px !important;
    }
    
    /* Mobilde gap azalt */
    .flex.gap-6 {
        gap: 1rem;
    }
    
    /* Cursor'lar mobilde devre dışı */
    .category-scroll,
    .flex.overflow-x-auto {
        cursor: auto;
    }
    
    /* Touch için daha iyi kaydırma */
    .category-scroll,
    .flex.overflow-x-auto {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .category-scroll > *,
    .flex.overflow-x-auto > * {
        scroll-snap-align: start;
    }
}

@media (max-width: 480px) {
    /* Ultra küçük ekranlar */
    .glow-card {
        min-width: 240px;
        max-width: 280px;
    }
    
    .category-scroll .w-48 {
        width: 140px !important;
        height: 210px !important;
    }
    
    /* Mobil navbar optimizasyonu */
    nav {
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Ultra küçük ekran için butonlar */
    nav .px-5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        font-size: 0.7rem !important;
    }
    
    /* Arama kutusu daha da küçült */
    nav input[type="text"] {
        min-width: 80px !important;
        max-width: 100px !important;
        font-size: 0.75rem !important;
    }
    
    /* Logo daha küçük */
    nav .w-9 {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    
    nav .w-5 {
        width: 1rem !important;
        height: 1rem !important;
    }
    
    /* Menu butonu küçült */
    nav .w-6 {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    
    nav .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    nav .py-3 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* Mobil logo boyutu */
    nav .w-9 {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    nav .w-5 {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    
    /* Mobil menu butonu */
    nav .w-6 {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    
    /* Mobil arama kutusu */
    nav input {
        font-size: 0.875rem !important;
        padding: 0.5rem !important;
    }
    
    /* Mobil butonlar */
    nav button {
        padding: 0.5rem !important;
    }
    
    nav .w-10 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    /* Giriş/Kayıt butonları mobil için */
    nav .flex.items-center.space-x-3 {
        display: flex !important;
        gap: 0.5rem !important;
    }
    
    nav .px-5 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        font-size: 0.75rem !important;
    }
    
    nav .py-2\.5 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    /* Mobilde navbar flex layout */
    nav > div {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
    
    /* Arama kutusu mobilde küçült */
    nav input[type="text"] {
        min-width: 120px !important;
        max-width: 150px !important;
        font-size: 0.875rem !important;
    }
}

/* Mobil özel touch efektleri */
@media (max-width: 768px) {
    /* Touch feedback */
    .glow-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    /* Mobil sidebar */
    .sidebar-mobile {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar-mobile.active {
        transform: translateX(0);
    }
    
    /* Mobil scroll indicator */
    .mobile-scroll-indicator {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: rgba(139, 92, 246, 0.9);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 2rem;
        font-size: 0.75rem;
        z-index: 100;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 0.8; }
        50% { opacity: 1; }
    }
    
    /* Mobil performans optimizasyonu */
    .glow-card {
        will-change: transform;
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
    }
    
    /* Mobilde animasyonları basitleştir */
    .glow-card:hover {
        animation: none !important;
        transform: translateY(-2px) scale(1.01) !important;
        box-shadow: 0 10px 20px rgba(168, 85, 247, 0.2) !important;
    }
    
    /* Mobilde daha hızlı geçişler */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Sadece metinler seçilebilir */
    p, h1, h2, h3, h4, h5, h6, span {
        -webkit-user-select: text;
        user-select: text;
    }
    
    /* Mobil için daha iyi scroll performansı */
    .flex.overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Mobil için lazy loading hint */
    img {
        content-visibility: auto;
        contain-intrinsic-size: 320px 180px;
    }
}

/* Scrollbar özelleştirme - Dopamin tema */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--dopamin-bg-dark);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dopamin-magenta), var(--dopamin-cyan));
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--dopamin-magenta), var(--dopamin-cyan));
    box-shadow: 0 0 10px var(--dopamin-magenta);
}

/* Firefox için scrollbar renkleri */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--dopamin-magenta) var(--dopamin-bg-dark);
}

/* Carousel transition */
.carousel-slide {
    transition: opacity 0.5s ease-in-out;
}

/* Live indicator animasyonu */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* FadeIn animasyonu */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Kanal kartları için hover efekti */
.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

/* Sidebar transition */
#sidebar {
    transition: all 0.3s ease-in-out;
}

/* Main content transition for smooth sidebar toggle */
#mainContent {
    transition: padding-left 0.3s ease-in-out;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Gradient text için */
.bg-gradient-to-r {
    background-clip: text;
    -webkit-background-clip: text;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #sidebar {
        transform: translateX(-100%);
    }
    
    #sidebar.open {
        transform: translateX(0);
    }
}

/* Line clamp için */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Buton hover efektleri için */
button {
    position: relative;
    overflow: hidden;
}

/* Card hover shadow efekti */
.group:hover {
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.15);
}

/* Navbar backdrop blur */
nav {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* İkon hover efektleri */
a:hover i[data-lucide] {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Form elementleri için focus ring */
input:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}

/* Gradient overlay iyileştirmesi */
.bg-gradient-to-r {
    background-clip: text;
    -webkit-background-clip: text;
}

/* Footer link hover efekti */
footer a:hover {
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

/* Shimmer animasyonu (panel banner'ları için) */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.animate-shimmer {
    animation: shimmer 3s infinite;
}

/* Spin animasyonu (yenileme butonu için) */
@keyframes spin-once {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin-once {
    animation: spin-once 1s linear;
}

/* Panel hover efektleri */
.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

/* ===================== AVATAR CROWN RING ===================== */

.avatar-ring-wrap {
    display: inline-block;
    border-radius: 50%;
    padding: 3px;
    position: relative;
}

/* Yeni (Novice) */
.avatar-ring-novice {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 0 4px rgba(99,102,241,0.4);
}

/* Demir */
.avatar-ring-iron {
    background: #94a3b8;
    box-shadow: 0 0 6px rgba(148,163,184,0.5);
}

/* Bronz */
.avatar-ring-bronze {
    background: linear-gradient(135deg, #cd7f32, #f5c87a, #cd7f32);
    box-shadow: 0 0 8px rgba(205,127,50,0.6);
}

/* Gümüş */
@keyframes ring-silver-spin {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.avatar-ring-silver {
    background: linear-gradient(135deg, #cbd5e1, #f8fafc, #94a3b8, #f8fafc, #cbd5e1);
    background-size: 200% 200%;
    animation: ring-silver-spin 2s linear infinite;
    box-shadow: 0 0 10px rgba(203,213,225,0.7);
}

/* Altın */
@keyframes ring-gold-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(251,191,36,0.7), 0 0 16px rgba(251,191,36,0.3); }
    50%       { box-shadow: 0 0 16px rgba(251,191,36,1), 0 0 32px rgba(251,191,36,0.5); }
}
.avatar-ring-gold {
    background: linear-gradient(135deg, #f59e0b, #fde68a, #f59e0b, #fbbf24);
    background-size: 200% 200%;
    animation: ring-silver-spin 1.5s linear infinite, ring-gold-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(251,191,36,0.8);
}

/* Elmas */
@keyframes ring-diamond {
    0%   { filter: hue-rotate(0deg) brightness(1); }
    50%  { filter: hue-rotate(30deg) brightness(1.4); }
    100% { filter: hue-rotate(0deg) brightness(1); }
}
.avatar-ring-diamond {
    background: linear-gradient(135deg, #67e8f9, #a5f3fc, #22d3ee, #67e8f9);
    background-size: 200% 200%;
    animation: ring-silver-spin 1.2s linear infinite, ring-diamond 2s ease-in-out infinite;
    box-shadow: 0 0 14px rgba(103,232,249,0.8), 0 0 28px rgba(103,232,249,0.3);
}

/* Kraliyet */
@keyframes ring-royal-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(168,85,247,0.8), 0 0 20px rgba(168,85,247,0.4); }
    50%       { box-shadow: 0 0 20px rgba(168,85,247,1), 0 0 40px rgba(168,85,247,0.6), 0 0 60px rgba(168,85,247,0.2); }
}
.avatar-ring-royal {
    background: linear-gradient(135deg, var(--dopamin-purple), var(--dopamin-magenta), var(--dopamin-purple), var(--dopamin-cyan));
    background-size: 200% 200%;
    animation: ring-silver-spin 1s linear infinite, ring-royal-pulse 1.5s ease-in-out infinite;
}

/* Tanrı */
@keyframes ring-god-rotate {
    0%   { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}
@keyframes ring-god-glow {
    0%   { box-shadow: 0 0 12px var(--dopamin-magenta), 0 0 24px var(--dopamin-purple); }
    33%  { box-shadow: 0 0 14px var(--dopamin-purple), 0 0 28px var(--dopamin-cyan); }
    66%  { box-shadow: 0 0 14px var(--dopamin-cyan), 0 0 28px var(--dopamin-gold); }
    100% { box-shadow: 0 0 12px var(--dopamin-gold), 0 0 24px var(--dopamin-magenta); }
}
.avatar-ring-god {
    background: linear-gradient(135deg, var(--dopamin-magenta), var(--dopamin-purple), var(--dopamin-cyan), var(--dopamin-gold), var(--dopamin-magenta), var(--dopamin-purple), var(--dopamin-cyan));
    background-size: 400% 400%;
    animation: ring-god-rotate 2s linear infinite, ring-god-glow 2s ease-in-out infinite;
}

/* Kurucu (Admin) — kırmızı-altın alev halkası */
@keyframes ring-founder-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(244,63,94,0.9), 0 0 26px rgba(251,146,60,0.5); }
    50%       { box-shadow: 0 0 20px rgba(251,146,60,1), 0 0 40px rgba(244,63,94,0.7), 0 0 60px rgba(251,191,36,0.3); }
}
.avatar-ring-founder {
    background: linear-gradient(135deg, #f43f5e, #fb923c, #fbbf24, #fb923c, #f43f5e);
    background-size: 300% 300%;
    animation: ring-silver-spin 1.2s linear infinite, ring-founder-glow 2s ease-in-out infinite;
}

/* İç avatar sarmalayıcı */
.avatar-ring-wrap .avatar-inner {
    border-radius: 50%;
    overflow: hidden;
    display: block;
    background: #0f0f15;
}

/* Avatar üzerinde büyük taç */
#channelCrown {
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.8));
    animation: crown-float 2s ease-in-out infinite;
}

@keyframes crown-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-2px); }
}

#channelCrown .crown-svg {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 0 6px currentColor);
}

/* Seviye rozeti */
#channelLevelBadge {
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
    white-space: nowrap;
}

/* Genel taç animasyonu */
.crown-svg,
.crown-icon {
    display: inline-block;
    vertical-align: middle;
}
/* PNG crown: iç boşluğu kırp */
img.crown-icon {
    object-fit: contain;
    margin: 0 -1px;
}

.crown-novice { filter: drop-shadow(0 0 2px #6366f1); animation: crown-novice-pulse 2s ease-in-out infinite; }
.crown-iron { filter: drop-shadow(0 0 2px #94a3b8); }
.crown-bronze { filter: drop-shadow(0 0 3px #cd7f32); }
.crown-silver { filter: drop-shadow(0 0 4px #cbd5e1); }
.crown-gold { filter: drop-shadow(0 0 6px #fbbf24); animation: crown-gold-shimmer 1.5s ease-in-out infinite alternate; }
.crown-diamond { filter: drop-shadow(0 0 6px #67e8f9); animation: crown-diamond-shimmer 1.2s ease-in-out infinite alternate; }
.crown-royal { filter: drop-shadow(0 0 8px var(--dopamin-purple)); animation: crown-royal-shimmer 1s ease-in-out infinite alternate; }
.crown-god { filter: drop-shadow(0 0 10px var(--dopamin-purple)); }
.crown-founder { filter: drop-shadow(0 0 8px rgba(244,63,94,0.9)); animation: crown-founder-shimmer 1.1s ease-in-out infinite alternate; }

@keyframes crown-founder-shimmer {
    from { filter: drop-shadow(0 0 5px rgba(244,63,94,0.9)) brightness(1); }
    to   { filter: drop-shadow(0 0 14px rgba(251,146,60,1)) brightness(1.35); }
}

/* Kurucu rozeti — isim yanındaki koleksiyon-rozet görünümü */
@keyframes founder-tag-shine {
    0%, 100% { box-shadow: 0 0 8px rgba(244,63,94,0.5), inset 0 1px 0 rgba(255,255,255,0.18); }
    50%      { box-shadow: 0 0 16px rgba(251,146,60,0.7), inset 0 1px 0 rgba(255,255,255,0.25); }
}
.founder-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px 2px 5px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    color: #fde68a;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    vertical-align: middle;
    background: linear-gradient(135deg, #3d1522 0%, #1c0f16 55%, #2a1218 100%);
    border: 1px solid rgba(251,191,36,0.55);
    box-shadow: 0 0 10px rgba(244,63,94,0.35), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 2px rgba(0,0,0,0.5);
    animation: founder-tag-shine 2.4s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
.founder-tag::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.22) 48%, transparent 62%);
    transform: translateX(-120%);
    animation: founder-tag-sweep 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes founder-tag-sweep {
    0%, 55%  { transform: translateX(-120%); }
    85%, 100%{ transform: translateX(120%); }
}
.founder-tag img.founder-tag-crown {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(251,191,36,0.7));
    flex-shrink: 0;
}

/* Satın alınabilir özel rozet */
.custom-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px 2px 6px;
    margin-left: 6px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.custom-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 48%, transparent 62%);
    transform: translateX(-120%);
    animation: founder-tag-sweep 3.6s ease-in-out infinite;
    pointer-events: none;
}
.custom-badge-icon {
    font-size: 11px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
    flex-shrink: 0;
}
.custom-badge-text { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.custom-badge-clickable { cursor: pointer; }
.custom-badge-clickable:hover { filter: brightness(1.15); }

/* "+ Rozet Ekle" — kart üzerindeki boş rozet slotu */
.add-badge-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    margin-left: 6px;
    border-radius: 999px;
    border: 1px dashed rgba(255,255,255,0.3);
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all .2s ease;
    vertical-align: middle;
}
.add-badge-btn:hover {
    border-color: #a78bfa;
    color: #c4b5fd;
    background: rgba(167,139,250,0.08);
    box-shadow: 0 0 8px rgba(167,139,250,0.3);
}

/* Rozet Atölyesi modalı */
.badge-studio-icon, .badge-studio-theme { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.badge-studio-icon:hover { transform: scale(1.12); }
.badge-studio-icon.selected {
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 2px rgba(167,139,250,0.5), 0 0 12px rgba(167,139,250,0.35);
    background: rgba(167,139,250,0.12) !important;
}
.badge-studio-theme.selected {
    border-color: #fff !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.6), 0 0 14px rgba(255,255,255,0.25);
    transform: scale(1.06);
}

/* Kurucu avatar süslemesi — duvardaki profil avatarı üstünde süzülen taç */
.channel-avatar-container.avatar-ring-wrap {
    padding: 3px;
}
.wall-founder-crown {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: 50% 90%;
    z-index: 10;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(244,63,94,0.8));
    animation: wall-crown-float 2.6s ease-in-out infinite;
}
@keyframes wall-crown-float {
    0%   { transform: translateX(-50%) translateY(0) rotate(-6deg); }
    25%  { transform: translateX(-50%) translateY(-3px) rotate(0deg); }
    50%  { transform: translateX(-50%) translateY(-5px) rotate(6deg); }
    75%  { transform: translateX(-50%) translateY(-3px) rotate(0deg); }
    100% { transform: translateX(-50%) translateY(0) rotate(-6deg); }
}

@keyframes crown-novice-pulse {
    0%, 100% { filter: drop-shadow(0 0 2px #6366f1) brightness(1); }
    50% { filter: drop-shadow(0 0 4px #8b5cf6) brightness(1.2); }
}

@keyframes crown-gold-shimmer {
    from { filter: drop-shadow(0 0 4px #fbbf24) brightness(1); }
    to { filter: drop-shadow(0 0 10px #fbbf24) brightness(1.3); }
}

@keyframes crown-diamond-shimmer {
    from { filter: drop-shadow(0 0 4px #67e8f9) brightness(1); }
    to { filter: drop-shadow(0 0 10px #67e8f9) brightness(1.3); }
}

@keyframes crown-royal-shimmer {
    from { filter: drop-shadow(0 0 6px var(--dopamin-purple)) brightness(1); }
    to { filter: drop-shadow(0 0 12px var(--dopamin-purple)) brightness(1.3); }
}

/* ===================== LEVEL UP ANIMATION ===================== */

.level-up-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(circle, rgba(168,85,247,0.2) 0%, transparent 70%);
    animation: level-up-fade 1.5s ease-out forwards;
}

@keyframes level-up-fade {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.level-up-content {
    text-align: center;
    transform: scale(0.5);
    animation: level-up-bounce 1s ease-out forwards;
}

@keyframes level-up-bounce {
    0% { transform: scale(0.5) translateY(50px); opacity: 0; }
    50% { transform: scale(1.2) translateY(-10px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.level-up-title {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--dopamin-gold), var(--dopamin-magenta), var(--dopamin-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(251,191,36,0.5);
}

.level-up-subtitle {
    font-size: 1.5rem;
    color: #fff;
    margin-top: 0.5rem;
    font-weight: 700;
}

.level-up-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.level-up-particles::before,
.level-up-particles::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fbbf24;
    border-radius: 50%;
    box-shadow: 0 0 10px #fbbf24, 0 0 20px #f97316;
    animation: particle-float 2s ease-out forwards;
}

.level-up-particles::before {
    left: 30%;
    top: 40%;
}

.level-up-particles::after {
    right: 30%;
    top: 45%;
    animation-delay: 0.3s;
}

@keyframes particle-float {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx, 50px), var(--ty, -100px)) scale(0); opacity: 0; }
}

/* ===================== TAÇ ROZET SİSTEMİ ===================== */

.crown-badge-wrap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
    line-height: 1;
}

.crown-svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.crown-level-num {
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.crown-tier-label {
    font-size: 0.65em;
    font-weight: 600;
    line-height: 1;
}

/* Demir - Statik */
.crown-iron .crown-svg,
.crown-svg.crown-iron {
    filter: drop-shadow(0 0 2px rgba(148,163,184,0.4));
}

/* Bronz - Hafif parıltı */
.crown-svg.crown-bronze {
    filter: drop-shadow(0 0 3px rgba(205,127,50,0.6));
}

/* Gümüş - Shimmer */
@keyframes silver-shimmer {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(203,213,225,0.5)); }
    50%       { filter: drop-shadow(0 0 6px rgba(203,213,225,0.9)) brightness(1.2); }
}
.crown-svg.crown-silver {
    animation: silver-shimmer 2.5s ease-in-out infinite;
}

/* Altın - Pulse */
@keyframes gold-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(251,191,36,0.6)); transform: scale(1); }
    50%       { filter: drop-shadow(0 0 8px rgba(251,191,36,0.9)); transform: scale(1.08); }
}
.crown-svg.crown-gold {
    animation: gold-pulse 1.8s ease-in-out infinite;
}

/* Elmas - Animated shimmer */
@keyframes diamond-shimmer {
    0%   { filter: drop-shadow(0 0 4px rgba(103,232,249,0.5)) hue-rotate(0deg); }
    50%  { filter: drop-shadow(0 0 10px rgba(103,232,249,0.9)) hue-rotate(20deg) brightness(1.3); }
    100% { filter: drop-shadow(0 0 4px rgba(103,232,249,0.5)) hue-rotate(0deg); }
}
.crown-svg.crown-diamond {
    animation: diamond-shimmer 2s ease-in-out infinite;
}

/* Kraliyet - Halo */
@keyframes royal-halo {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(168,85,247,0.6)) drop-shadow(0 0 10px rgba(168,85,247,0.3)); }
    50%       { filter: drop-shadow(0 0 10px rgba(168,85,247,0.9)) drop-shadow(0 0 20px rgba(168,85,247,0.5)); transform: scale(1.1); }
}
.crown-svg.crown-royal {
    animation: royal-halo 1.5s ease-in-out infinite;
}

/* Tanrı - Rainbow shimmer */
@keyframes god-spin {
    0%   { filter: drop-shadow(0 0 6px #f97316) brightness(1.1); transform: scale(1); }
    25%  { filter: drop-shadow(0 0 8px var(--dopamin-purple)) brightness(1.3); transform: scale(1.12) rotate(3deg); }
    50%  { filter: drop-shadow(0 0 10px #67e8f9) brightness(1.4); transform: scale(1.15); }
    75%  { filter: drop-shadow(0 0 8px #fbbf24) brightness(1.3); transform: scale(1.12) rotate(-3deg); }
    100% { filter: drop-shadow(0 0 6px #f97316) brightness(1.1); transform: scale(1); }
}
.crown-svg.crown-god {
    animation: god-spin 2s ease-in-out infinite;
}

/* Chat mesajlarında taç */
.chat-crown {
    display: inline-flex;
    align-items: center;
    margin-right: 2px;
}

/* Profil sayfasında büyük taç */
.crown-badge-lg .crown-svg {
    width: 24px !important;
    height: 24px !important;
}
.crown-badge-lg .crown-level-num {
    font-size: 0.75em;
}

/* Taç tooltip */
.crown-badge-wrap:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a24;
    border: 1px solid #374151;
    color: #e5e7eb;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
}
.crown-badge-wrap {
    position: relative;
}

/* ===================== video.js Rondo Theme ===================== */
.video-js.vjs-rondo-theme {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #ffffff;
}

.video-js.vjs-rondo-theme .vjs-control-bar {
    background: linear-gradient(to top, rgba(10, 10, 16, 0.95), rgba(21, 21, 29, 0.75));
    border-top: 1px solid rgba(168, 85, 247, 0.2);
    height: 44px;
    padding: 0 12px;
}

.video-js.vjs-rondo-theme .vjs-button,
.video-js.vjs-rondo-theme .vjs-play-control,
.video-js.vjs-rondo-theme .vjs-volume-menu-button,
.video-js.vjs-rondo-theme .vjs-quality-selector {
    color: #e5e7eb;
    transition: color 0.2s ease, transform 0.15s ease;
}

.video-js.vjs-rondo-theme .vjs-button:hover,
.video-js.vjs-rondo-theme .vjs-play-control:hover,
.video-js.vjs-rondo-theme .vjs-volume-menu-button:hover {
    color: #53fc18;
    transform: scale(1.1);
}

.video-js.vjs-rondo-theme .vjs-play-progress,
.video-js.vjs-rondo-theme .vjs-slider-bar {
    background: var(--dopamin-purple);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}

.video-js.vjs-rondo-theme .vjs-load-progress {
    background: rgba(168, 85, 247, 0.25);
}

.video-js.vjs-rondo-theme .vjs-volume-level {
    background: #53fc18;
    box-shadow: 0 0 6px rgba(83, 252, 24, 0.5);
}

.video-js.vjs-rondo-theme .vjs-big-play-button {
    background: rgba(168, 85, 247, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    line-height: 76px;
    font-size: 32px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease;
}

.video-js.vjs-rondo-theme .vjs-big-play-button:hover {
    background: rgba(168, 85, 247, 1);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.7);
    transform: translate(-50%, -50%) scale(1.08);
}

.video-js.vjs-rondo-theme.vjs-paused .vjs-big-play-button {
    display: block;
}

.video-js.vjs-rondo-theme .vjs-menu {
    background: rgba(21, 21, 29, 0.95);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.video-js.vjs-rondo-theme .vjs-menu-item {
    color: #e5e7eb;
    font-size: 13px;
    padding: 10px 16px;
    transition: background 0.15s ease;
}

.video-js.vjs-rondo-theme .vjs-menu-item:hover,
.video-js.vjs-rondo-theme .vjs-menu-item.vjs-selected {
    background: rgba(168, 85, 247, 0.25);
    color: #53fc18;
}

.video-js.vjs-rondo-theme .vjs-live-control {
    color: #53fc18;
    font-weight: 700;
}

.video-js.vjs-rondo-theme .vjs-watermark {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Kalite seçici butonu */
.video-js.vjs-rondo-theme .vjs-quality-selector .vjs-icon-placeholder {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
}

/* Radiant Media Player container fill fix */
#rmpPlayer,
#creatorRMP {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* RMP oluşturduğu iç div'lerin tamamını doldurmasını sağla */
#rmpPlayer .rmp,
#creatorRMP .rmp {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

#rmpPlayer video,
#creatorRMP video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* RMP logo/watermark boyutunu ayarla */
#rmpPlayer .rmp-logo {
    max-width: 230px !important;
    max-height: 90px !important;
    width: auto !important;
    height: auto !important;
    opacity: 0.88 !important;
    transition: opacity 0.3s ease !important;
}

#creatorRMP .rmp-logo,
#creatorRMP img.rmp-logo,
#creatorRMP img.rmp-logo.rmp-force-show,
#creatorRMP img.rmp-logo.rmp-logo-bottom-right {
    max-width: 120px !important;
    max-height: 45px !important;
    width: auto !important;
    height: auto !important;
    opacity: 0.88 !important;
    transition: opacity 0.3s ease !important;
}

/* RMP inline style override for creator logo */
#creatorRMP img.rmp-logo {
    width: auto !important;
    height: auto !important;
}

#rmpPlayer .rmp-logo:hover,
#creatorRMP .rmp-logo:hover {
    opacity: 1 !important;
}

.vjs-user-inactive #rmpPlayer .rmp-logo,
.vjs-user-inactive #creatorRMP .rmp-logo {
    opacity: 0.45 !important;
}

/* Eski video.js fill fix - geriye dönük uyumluluk */
#channel-player,
#creatorPreviewPlayer,
#channel-player.video-js,
#creatorPreviewPlayer.video-js,
#channel-player.vjs-fill,
#creatorPreviewPlayer.vjs-fill {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

#channel-player .vjs-tech,
#creatorPreviewPlayer .vjs-tech {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===================== video.js Modern Additions ===================== */
.video-js.vjs-rondo-modern {
    border-radius: 12px;
    overflow: hidden;
}

/* Daha modern, yuvarlak ve şeffaf kontrol bar */
.video-js.vjs-rondo-modern .vjs-control-bar {
    background: rgba(15, 15, 21, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: none;
    width: 100% !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    padding: 0 14px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}

/* Buton hover glow */
.video-js.vjs-rondo-modern .vjs-button:hover,
.video-js.vjs-rondo-modern .vjs-play-control:hover,
.video-js.vjs-rondo-modern .vjs-volume-menu-button:hover,
.video-js.vjs-rondo-modern .vjs-quality-selector:hover {
    color: #53fc18;
    text-shadow: 0 0 10px rgba(83, 252, 24, 0.5);
    transform: scale(1.12);
}

/* Daha şık play/durdur butonu */
.video-js.vjs-rondo-modern .vjs-play-control {
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.15);
    width: 38px !important;
    height: 38px !important;
    margin-top: 5px;
    line-height: 36px !important;
}

.video-js.vjs-rondo-modern .vjs-play-control:hover {
    background: rgba(168, 85, 247, 0.35);
}

/* Slider/track modern */
.video-js.vjs-rondo-modern .vjs-progress-control {
    height: 24px;
}

.video-js.vjs-rondo-modern .vjs-progress-holder {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    margin-top: 9px;
}

.video-js.vjs-rondo-modern .vjs-play-progress {
    background: linear-gradient(90deg, var(--dopamin-purple), var(--dopamin-magenta));
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

.video-js.vjs-rondo-modern .vjs-load-progress div {
    background: rgba(168, 85, 247, 0.2);
    border-radius: 3px;
}

.video-js.vjs-rondo-modern .vjs-play-progress::after {
    content: '';
    position: absolute;
    right: -6px;
    top: -3px;
    width: 11px;
    height: 11px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.8);
}

/* Volume slider modern */
.video-js.vjs-rondo-modern .vjs-volume-bar {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}

.video-js.vjs-rondo-modern .vjs-volume-level {
    background: linear-gradient(90deg, #53fc18, var(--dopamin-purple));
    border-radius: 2px;
}

/* Menü daha modern */
.video-js.vjs-rondo-modern .vjs-menu {
    background: rgba(21, 21, 29, 0.98);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 10px;
    bottom: 50px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.55);
}

.video-js.vjs-rondo-modern .vjs-menu-item {
    padding: 11px 18px;
    font-size: 13px;
    border-radius: 6px;
    margin: 2px 6px;
}

.video-js.vjs-rondo-modern .vjs-menu-item:hover {
    background: rgba(168, 85, 247, 0.22);
}

.video-js.vjs-rondo-modern .vjs-menu-item.vjs-selected {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.35), rgba(236, 72, 153, 0.25));
    color: #53fc18;
    font-weight: 700;
}

/* Büyük play butonu modern */
.video-js.vjs-rondo-modern .vjs-big-play-button {
    background: rgba(168, 85, 247, 0.9);
    border: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 10px 40px rgba(168, 85, 247, 0.5);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-js.vjs-rondo-modern .vjs-big-play-button:hover {
    background: rgba(168, 85, 247, 1);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 0 35px rgba(168, 85, 247, 0.8);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Canlı rozeti modern */
.video-js.vjs-rondo-modern .vjs-live-control {
    color: #53fc18;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-shadow: 0 0 8px rgba(83, 252, 24, 0.45);
}

/* Custom Watermark - sağ alt ve tam ekranda sabit */
.player-watermark {
    position: absolute !important;
    right: 12px !important;
    bottom: 54px !important;
    z-index: 100 !important;
    pointer-events: none !important;
    opacity: 0.9 !important;
    transition: opacity 0.3s ease !important;
}

.player-watermark span {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.6px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.vjs-user-inactive .player-watermark {
    opacity: 0.45 !important;
}

.vjs-fullscreen .player-watermark {
    right: 22px !important;
    bottom: 66px !important;
}

.vjs-fullscreen .player-watermark span {
    font-size: 13px;
    padding: 5px 10px;
}

/* Thumbnail/poster arka planı blend */
.video-js.vjs-rondo-modern .vjs-poster {
    background-size: cover;
    background-position: center;
    border-radius: 12px;
}

.video-js.vjs-rondo-modern.vjs-has-started .vjs-poster {
    display: none;
}

/* Loading spinner mor/yeşil */
.video-js.vjs-rondo-modern .vjs-loading-spinner {
    border-top-color: var(--dopamin-purple);
    border-right-color: rgba(168, 85, 247, 0.35);
    border-bottom-color: #53fc18;
    border-left-color: rgba(83, 252, 24, 0.35);
}

/* Zaman/süre gösterimi */
.video-js.vjs-rondo-modern .vjs-current-time,
.video-js.vjs-rondo-modern .vjs-duration,
.video-js.vjs-rondo-modern .vjs-time-divider {
    color: #e5e7eb;
    font-weight: 500;
    font-size: 12px;
}

/* Kalite seçici butonu modern */
.video-js.vjs-rondo-modern .vjs-quality-selector .vjs-icon-placeholder {
font-size: 12px;
letter-spacing: 0.4px;
}

/* ===================== SAĞ ETKİLEŞİM PANELİ YENİ TASARIM ===================== */
.action-panel-divider {
    height: 1px;
    width: 100%;
    margin: 0.35rem 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}

.stream-info-actions-row-primary .stream-action-btn {
    flex: 1 1 0%;
    padding: 0.45rem 0.5rem;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 999px;
    justify-content: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
}

.stream-info-actions-row-primary .stream-action-btn:hover {
    transform: scale(1.03);
}

.stream-info-actions-row-primary .stream-action-btn:active {
    transform: scale(0.98);
}

.social-links-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
}

.stream-info-actions-panel .social-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    clip-path: none;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.stream-info-actions-panel .social-icon-btn::before,
.stream-info-actions-panel .social-icon-btn::after {
content: none;
}

.stream-info-actions-panel .social-icon-btn:hover {
transform: translateY(-2px) scale(1.08);
box-shadow: 0 0 14px rgba(150, 210, 255, 0.35);
}

.owner-actions-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
}

.owner-action-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
    transition: all 0.2s ease;
}

.owner-action-btn:hover {
background: rgba(0, 255, 255, 0.12);
border-color: rgba(0, 255, 255, 0.35);
color: #00FFFF;
box-shadow: 0 0 12px rgba(0, 255, 255, 0.2);
}

/* Sağ Alt Misafir Çerçevesi (Chat Altı) */
.chat-bottom-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 64px;
    height: auto;
    padding: 8px 12px;
    gap: 8px;
    box-sizing: border-box;
}

.chat-bottom-card.stream-hero-card {
    background: linear-gradient(135deg, rgba(20, 15, 35, 0.9) 0%, rgba(35, 20, 50, 0.7) 100%);
    border: 1px solid rgba(168, 85, 247, 0.2);
    box-shadow: inset 0 0 12px rgba(168, 85, 247, 0.05), 0 4px 20px rgba(0, 0, 0, 0.35);
}

.chat-bottom-card > .stream-hero-card,
.chat-bottom-card > div.relative {
    height: 100%;
}

.social-links-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Sağ alttaki sosyal ikonları override et: kare, küçük, sade */
.chat-bottom-card .social-icon-btn {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 13px;
    padding: 4px;
    box-sizing: border-box;
    clip-path: none;
    filter: none;
    transition: all 0.2s ease;
    text-decoration: none;
}

.chat-bottom-card .social-icon-btn::before,
.chat-bottom-card .social-icon-btn::after {
    content: none;
}

.chat-bottom-card .social-icon-btn svg {
    width: 14px;
    height: 14px;
    filter: none;
}

.chat-bottom-card .social-icon-btn:hover {
    background: rgba(168, 85, 247, 0.3);
    color: #fff;
    border-color: rgba(168, 85, 247, 0.55);
    transform: translateY(-1px);
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
}

.chat-bottom-card .social-icon-empty {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.25);
    cursor: default;
    filter: none;
}

.chat-bottom-card button.social-icon-empty:hover {
    background: rgba(139, 92, 246, 0.1);
    color: rgba(139, 92, 246, 0.9);
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
}

.guest-action-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.action-btn {
    flex: 1;
    height: 30px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
    padding: 0 6px;
    line-height: 1;
    font-family: system-ui, -apple-system, sans-serif;
}

.btn-gift {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.btn-gift i, .btn-gift svg {
    color: #fff;
}
.btn-gift:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.btn-sub {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
    color: #000;
    font-weight: 800;
    border: 1px solid rgba(234, 179, 8, 0.6);
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
}
.btn-sub i, .btn-sub svg {
    color: #000;
}
.btn-sub:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 14px rgba(234, 179, 8, 0.5);
}

.btn-follow {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    color: #ffffff;
    font-weight: 800;
    border: 1px solid transparent;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}
.btn-follow i, .btn-follow svg {
    color: #fff;
}
.btn-follow:hover {
    opacity: 0.95;
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.5);
}

@media (max-width: 768px) {
    .chat-bottom-card {
        padding: 8px 10px;
        gap: 8px;
    }
    .chat-bottom-card .social-icon-btn {
        width: 26px;
        height: 26px;
    }
    .chat-bottom-card .social-icon-btn svg {
        width: 12px;
        height: 12px;
    }
    .action-btn {
        height: 28px;
        font-size: 11px;
    }
}

/* ===================== HERO STATUS ROTATOR ===================== */
.status-rotator {
    height: 24px;
    overflow: hidden;
    border-radius: 20px;
    display: inline-flex;
    align-items: flex-start;
    flex-shrink: 0;
    padding: 0 10px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-sizing: border-box;
    background: rgba(148, 163, 184, 0.15);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.status-rotator.live {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    border-color: transparent;
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.4);
}

.status-rotator-track {
    display: flex;
    flex-direction: column;
    animation: slideStatus 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform;
}

.status-rotator .status-pill,
.status-rotator .username-pill {
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.status-rotator .status-pill { color: #94a3b8; }
.status-rotator .username-pill { color: #f1f5f9; }
.status-rotator.live .status-pill,
.status-rotator.live .username-pill { color: #ffffff; }

@keyframes slideStatus {
    0%, 45% {
        transform: translateY(0);
    }
    50%, 95% {
        transform: translateY(-22px);
    }
    100% {
        transform: translateY(0);
    }
}

/* ===================== SIDEBAR COLLAPSE (ikon-only mod) ===================== */
@media (min-width: 768px) {
    #sidebar.sidebar-collapsed {
        width: 4.5rem;
    }
    #sidebar.sidebar-collapsed > .p-4 {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
    #sidebar.sidebar-collapsed .sidebar-text,
    #sidebar.sidebar-collapsed #sidebarTrending,
    #sidebar.sidebar-collapsed #followingList,
    #sidebar.sidebar-collapsed #recommendedList,
    #sidebar.sidebar-collapsed .border-t,
    #sidebar.sidebar-collapsed #refreshTrending,
    #sidebar.sidebar-collapsed .trending-time-btn {
        display: none !important;
    }
    #sidebar.sidebar-collapsed a {
        justify-content: center;
        gap: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    #sidebar.sidebar-collapsed #sidebarNotificationBadge {
        position: absolute;
        top: 0;
        right: 2px;
        margin-left: 0;
    }
    #sidebar.sidebar-collapsed a {
        position: relative;
    }
}

/* ===================== PLAYER ALTı STREAMER CARD ===================== */
.streamer-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(20, 15, 30, 0.85) 0%, rgba(10, 8, 18, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    transition: box-shadow .4s ease, border-color .4s ease;
}

/* Canlı durum: dönen neon border + hafif iç glow */
.streamer-card.is-live {
    border-color: rgba(236, 72, 153, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 22px rgba(236, 72, 153, 0.15), 0 0 40px rgba(168, 85, 247, 0.08);
}
.streamer-card.is-live::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #ec4899 25%, #a855f7 50%, #22d3ee 75%, transparent);
    animation: liveBorderSweep 3.5s linear infinite;
    opacity: .9;
}
@keyframes liveBorderSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.streamer-card.is-live .avatar-container {
    animation: avatarGlowPulse 2.5s ease-in-out infinite;
}
@keyframes avatarGlowPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(168, 85, 247, 0.4); }
    50% { box-shadow: 0 0 26px rgba(236, 72, 153, 0.65); }
}

/* HD+ roseti */
.badge-hd {
    background: linear-gradient(90deg, #FFD700, #FFAA00);
    color: #000;
    border: none;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    font-weight: 900;
}

/* Sağ canlı meta sütunu — mini stat paneli */
.live-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
    padding: 12px 16px;
    min-width: 104px;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}
.live-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 3px 9px;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.5);
}
.live-meta-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: statusPulse 1.5s ease-in-out infinite;
}
.live-meta-stat {
    font-size: 12px;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
}
.live-meta-uptime {
    font-size: 10px;
    font-weight: 500;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Avatar Çerçevesi ve Parlama */
.avatar-container {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #3b82f6 100%);
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.4);
    position: relative;
}

/* Kurucu streamer kartı avatarı — kırmızı-altın dönen halka */
.avatar-container.founder {
    background: linear-gradient(135deg, #f43f5e, #fb923c, #fbbf24, #fb923c, #f43f5e);
    background-size: 300% 300%;
    animation: founder-avatar-ring-spin 2.4s linear infinite, ring-founder-glow 2s ease-in-out infinite;
}
@keyframes founder-avatar-ring-spin {
    to { background-position: 300% 300%; }
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #000;
    display: block;
}

/* Streamer kartı avatarında seviye halkaları (badges.js tier'larıyla aynı görünüm) */
.avatar-container.avatar-ring-iron {
    background: #94a3b8;
    box-shadow: 0 0 6px rgba(148,163,184,0.5);
}
.avatar-container.avatar-ring-bronze {
    background: linear-gradient(135deg, #cd7f32, #f5c87a, #cd7f32);
    box-shadow: 0 0 8px rgba(205,127,50,0.6);
}
.avatar-container.avatar-ring-silver {
    background: linear-gradient(135deg, #cbd5e1, #f8fafc, #94a3b8, #f8fafc, #cbd5e1);
    background-size: 200% 200%;
    animation: ring-silver-spin 2s linear infinite;
    box-shadow: 0 0 10px rgba(203,213,225,0.7);
}
.avatar-container.avatar-ring-gold {
    background: linear-gradient(135deg, #f59e0b, #fde68a, #f59e0b, #fbbf24);
    background-size: 200% 200%;
    animation: ring-silver-spin 1.5s linear infinite, ring-gold-pulse 2s ease-in-out infinite;
}
.avatar-container.avatar-ring-diamond {
    background: linear-gradient(135deg, #67e8f9, #a5f3fc, #22d3ee, #67e8f9);
    background-size: 200% 200%;
    animation: ring-silver-spin 1.2s linear infinite, ring-diamond 2s ease-in-out infinite;
}
.avatar-container.avatar-ring-royal {
    background: linear-gradient(135deg, var(--dopamin-purple), var(--dopamin-magenta), var(--dopamin-purple), var(--dopamin-cyan));
    background-size: 200% 200%;
    animation: ring-silver-spin 1s linear infinite, ring-royal-pulse 1.5s ease-in-out infinite;
}
.avatar-container.avatar-ring-god {
    background: linear-gradient(135deg, var(--dopamin-magenta), var(--dopamin-purple), var(--dopamin-cyan), var(--dopamin-gold), var(--dopamin-magenta), var(--dopamin-purple), var(--dopamin-cyan));
    background-size: 400% 400%;
    animation: ring-god-rotate 2s linear infinite, ring-god-glow 2s ease-in-out infinite;
}

.avatar-img[src=""],
.avatar-img:not([src]) {
    display: none;
}

/* Detay Alanı */
.streamer-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.stream-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Etiketler Satırı */
.badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Offline Badgesi */
.badge-offline {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* LIVE Badgesi */
.badge-live {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
}

/* Pembe Etiket */
.badge-pink {
    background: rgba(236, 72, 153, 0.1);
    color: #f472b6;
    border: 1.5px solid #ec4899;
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.2);
}

/* Turkuaz Etiket */
.badge-cyan {
    background: rgba(6, 182, 212, 0.1);
    color: #22d3ee;
    border: 1.5px solid #06b6d4;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.2);
}

/* Kullanıcı Adı / Durum Badge */
.badge-status {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    line-height: 1;
}

.username-text {
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.3px;
    display: inline-block;
    min-width: 56px;
    text-align: center;
    line-height: 1.2;
    position: relative;
    top: -1px;
    transition: opacity .25s ease, transform .25s ease;
}

.username-text.username-flip-out {
    opacity: 0;
    transform: translateY(-7px);
}

.username-text.username-flip-in {
    animation: usernameFlipIn .4s ease;
}

.username-text.status-word {
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.username-text.status-word.status-word-live {
    color: #34d399;
    text-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
}

@keyframes usernameFlipIn {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Durum Noktası Animasyonu */
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    animation: statusPulse 1.5s ease-in-out infinite;
}

.status-dot.live {
    background: #10b981;
    box-shadow: 0 0 6px #10b981, 0 0 12px rgba(16, 185, 129, 0.5);
}

.status-dot.offline {
    background: #94a3b8;
    box-shadow: 0 0 6px #94a3b8, 0 0 12px rgba(148, 163, 184, 0.4);
}

@keyframes statusPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.7);
        opacity: 0.55;
    }
}

/* Alt Açıklama Kutusu */
.description-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 6px 14px;
    min-width: 0;
}

.desc-text {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}

.info-icon {
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 10px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.info-icon:hover {
    color: #94a3b8;
}

/* ===================== CHAT ALTı ACTION CARD ===================== */
.chat-bottom-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.chat-bottom-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.chat-bottom-card .btn i,
.chat-bottom-card .btn svg {
    width: 16px;
    height: 16px;
}

.btn-follow {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

.btn-follow:hover {
    opacity: 0.95;
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.5);
}

.btn-sub {
    background: linear-gradient(135deg, #facc15 0%, #fbbf24 100%);
    color: #000000;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
}

.btn-sub:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 14px rgba(234, 179, 8, 0.5);
}

.btn-gift {
    background: linear-gradient(135deg, #22d3ee 0%, #00ffff 100%);
    color: #000000;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.3);
}

.btn-gift:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.5);
}

.social-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.social-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    transition: all 0.2s ease;
}

.social-icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

/* ===================== PLAYER OFFLINE / RESTRICTED BANNERS ===================== */
.offline-state {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.offline-banner-1 {
    background-image: linear-gradient(rgba(10, 10, 16, 0.55), rgba(10, 10, 16, 0.7)),
                      url('assets/images/offline-banners/offline-banner-1.jpg');
}

.offline-banner-2 {
    background-image: linear-gradient(rgba(10, 10, 16, 0.55), rgba(10, 10, 16, 0.7)),
                      url('assets/images/offline-banners/offline-banner-2.jpg');
}

.offline-title {
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

.offline-subtitle {
    text-transform: capitalize;
}

/* ═══ VOD İZLEME MODALI ═══ */
#vodWatchModal {
    font-family: 'Inter', system-ui, sans-serif;
}

.vod-modal-container {
    width: 100%;
    max-width: 1200px;
    max-height: 96vh;
    background: #12121a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 360px;
}

.vod-video-wrap {
    position: relative;
    background: #000;
    aspect-ratio: 16 / 9;
    max-height: 72vh;
    overflow: hidden;
}

#vodTikTokVideo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.vod-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    cursor: pointer;
}

.vod-play-overlay i {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

#vodQualitySelect:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vod-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 96vh;
    background: #161620;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.vod-sidebar-header {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vod-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vod-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #a0a0b0;
    font-size: 13px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.vod-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vod-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e2ec;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s ease;
    cursor: pointer;
}

.vod-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(168, 85, 247, 0.4);
}

#vodUpNextList {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

#vodUpNextList::-webkit-scrollbar {
    width: 6px;
}

#vodUpNextList::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

#vodCommentsPanel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#vodCommentList {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    min-height: 120px;
}

#vodCommentInput {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    outline: none;
    flex: 1;
}

#vodCommentInput:focus {
    border-color: rgba(168, 85, 247, 0.5);
}

@media (max-width: 1024px) {
    .vod-modal-container {
        grid-template-columns: 1fr;
        max-width: 720px;
    }
    .vod-sidebar {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        max-height: 420px;
    }
}

/* ===================== RONDOPLAYER KONTROLLER ===================== */
.rondo-ctrl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    transition: all 0.2s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.rondo-ctrl-btn:hover {
    background: rgba(0, 255, 255, 0.15);
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
    transform: scale(1.05);
}

.rondo-ctrl-btn:active {
    transform: scale(0.95);
}

.rondo-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.rondo-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00FFFF;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
    transition: transform 0.15s ease;
}

.rondo-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
}

.rondo-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00FFFF;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

.rondo-quality-select {
    min-width: 70px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rondo-quality-select:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.3);
}

.rondo-quality-select option {
    background: #0a0a10;
    color: #fff;
}

#rondoPlayer:fullscreen,
#rondoPlayer:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

#rondoPlayer:fullscreen #liveHlsVideo,
#rondoPlayer:-webkit-full-screen #liveHlsVideo {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    object-fit: contain;
}

/* =========================================================
   Sağ Alt Aksiyon Kartı - Chat Action Card
   ========================================================= */

.action-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(135deg, rgba(20, 15, 30, 0.9) 0%, rgba(10, 8, 18, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    width: 100%;
    box-sizing: border-box;
}

.social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.action-card .social-links .social-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 4px;
    box-sizing: border-box;
}

.action-card .social-links .social-icon-btn svg {
    width: 14px;
    height: 14px;
    display: block;
}

.action-card .social-links .social-icon-btn:hover {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.action-buttons-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.action-card .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.action-card .btn .icon {
    font-size: 13px;
    line-height: 1;
}

.action-card .btn-gift {
    flex: 1;
    background: linear-gradient(90deg, #00FFFF 0%, #40E0D0 100%);
    color: #000000;
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
}

.action-card .btn-gift:hover {
    opacity: 0.92;
    box-shadow: 0 0 16px rgba(0, 255, 255, 0.5);
}

.action-card .btn-follow {
    flex: 1;
    background: linear-gradient(90deg, #c084fc 0%, #e879f9 50%, #f43f5e 100%);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(232, 121, 249, 0.35);
}

.action-card .btn-follow:hover {
    opacity: 0.92;
    box-shadow: 0 0 16px rgba(232, 121, 249, 0.5);
}

.action-card .btn-subscribe {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #000000;
    font-weight: 800;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}

.action-card .btn-subscribe:hover {
    opacity: 0.92;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
}

@media (max-width: 768px) {
    .action-card {
        padding: 10px 12px;
    }

    .action-card .social-links .social-icon-btn {
        width: 26px;
        height: 26px;
    }

    .action-card .social-links .social-icon-btn svg {
        width: 12px;
        height: 12px;
    }

    .action-card .btn {
        height: 32px;
        font-size: 12px;
    }
}

/* ═══ Streamer Control Deck — Dashboard Bar (dark-neon glassmorphism) ═══ */
#streamerControlDeck {
    background: linear-gradient(135deg, rgba(20, 16, 34, 0.92) 0%, rgba(10, 9, 20, 0.96) 100%);
    border: 1px solid rgba(168, 85, 247, 0.18);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(168, 85, 247, 0.08);
}

#streamerControlDeck .bar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#streamerControlDeck .bar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#streamerControlDeck .header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(0, 255, 255, 0.15));
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #c4b5fd;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.35);
    flex-shrink: 0;
}

#streamerControlDeck .header-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

#streamerControlDeck .header-text h2 {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #fff;
    white-space: nowrap;
}

#streamerControlDeck .header-text span {
    font-size: 9px;
    color: #8b8b9e;
    white-space: nowrap;
}

#streamerControlDeck .bar-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#streamerControlDeck .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

#streamerControlDeck .status-badge.live {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.45);
    color: #f87171;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
    animation: deckLivePulse 1.6s ease-in-out infinite;
}

#streamerControlDeck .status-badge.offline {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #9ca3af;
}

@keyframes deckLivePulse {
    0%, 100% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.25); }
    50% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.55); }
}

#streamerControlDeck .collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a1a1aa;
    cursor: pointer;
    transition: all 0.2s;
}

#streamerControlDeck .collapse-btn:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
    color: #c4b5fd;
}

/* ── Tab bar ── */
#streamerControlDeck .bar-tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.25);
}

#streamerControlDeck .nav-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #8b8b9e;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    cursor: pointer;
    transition: all 0.22s ease;
    min-width: 0;
}

#streamerControlDeck .nav-tab i,
#streamerControlDeck .nav-tab svg {
    width: 12px;
    height: 12px;
}

#streamerControlDeck .nav-tab:hover {
    color: #d4d4dc;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

#streamerControlDeck .nav-tab.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.35) 0%, rgba(0, 255, 255, 0.22) 100%);
    border-color: rgba(168, 85, 247, 0.65);
    box-shadow:
        0 0 12px rgba(168, 85, 247, 0.45),
        0 0 22px rgba(0, 255, 255, 0.18),
        inset 0 0 8px rgba(168, 85, 247, 0.15);
    text-shadow: 0 0 8px rgba(196, 181, 253, 0.6);
}

#streamerControlDeck .nav-tab.active i,
#streamerControlDeck .nav-tab.active svg {
    color: #67e8f9;
    filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.6));
}

/* ===================== GLOBAL SELECT / DROPDOWN ===================== */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgba(15, 15, 21, 0.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300ffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 14px;
    color: #fff;
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 10px;
    padding: 8px 36px 8px 12px;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

select:hover,
select:focus {
    border-color: rgba(0, 255, 255, 0.65);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
}

select option,
select optgroup {
    background: #0a0a10 !important;
    color: #fff !important;
    font-size: 13px;
}