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

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

.glow-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(168, 85, 247, 0.3),
                0 0 20px rgba(168, 85, 247, 0.2),
                0 0 40px rgba(168, 85, 247, 0.1);
}

.glow-card:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(168, 85, 247, 0.1) 0%, 
        rgba(236, 72, 153, 0.1) 50%, 
        rgba(59, 130, 246, 0.1) 100%);
    border-radius: 12px;
    z-index: -1;
    animation: shimmer 2s ease-in-out infinite;
}

@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 navbar sticky */
    nav {
        position: sticky;
        top: 0;
        backdrop-filter: blur(10px);
        background: rgba(26, 26, 36, 0.95);
    }
    
    /* 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 {
        loading: eager;
        content-visibility: auto;
        contain-intrinsic-size: 320px 180px;
    }
}

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

::-webkit-scrollbar-track {
    background: #1a1a24;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8b5cf6, #53fc18);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a855f7, #53fc18);
    box-shadow: 0 0 10px #8b5cf6;
}

/* Firefox için scrollbar renkleri */
html {
    scrollbar-width: thin;
    scrollbar-color: #53fc18 #1a1a24;
}

/* 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;
}

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