/**
 * CUSTOM GRADIENT UTILITIES - DARK MODE FIX
 *
 * Tailwind JIT motoru dark mode + gradient + hover kombinasyonlarını
 * otomatik generate etmiyor. Bu CSS dosyası eksik sınıfları sağlar.
 *
 * Sebep: Tailwind'in safelist'i bu kadar kompleks kombinasyonları
 * desteklemiyor ve JIT static analysis bu sınıfları tespit edemiyor.
 */

/* Base gradient colors - Light mode */
.from-violet-700 {
    --tw-gradient-from: #6d28d9 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(109 40 217 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-purple-700 {
    --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
}

.from-violet-800 {
    --tw-gradient-from: #5b21b6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(91 33 182 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-purple-800 {
    --tw-gradient-to: #6b21a8 var(--tw-gradient-to-position);
}

/* Dark mode variants */
.dark .dark\:from-violet-700 {
    --tw-gradient-from: #6d28d9 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(109 40 217 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .dark\:to-purple-700 {
    --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
}

.dark .dark\:hover\:from-violet-800:hover {
    --tw-gradient-from: #5b21b6 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(91 33 182 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .dark\:hover\:to-purple-800:hover {
    --tw-gradient-to: #6b21a8 var(--tw-gradient-to-position);
}

/* ========================================
   🎨 DARK MODE ANIMATED BACKGROUND
   ======================================== */

/* 🌊 MULTI-LAYER GRADIENT ANIMATIONS */
@keyframes gradient-x {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

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

@keyframes gradient-xy {
    0%, 100% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
}

.animate-gradient-x {
    background-size: 400% 400%;
    animation: gradient-x 60s ease infinite;
}

.animate-gradient-y {
    background-size: 400% 400%;
    animation: gradient-y 80s ease infinite;
}

.animate-gradient-xy {
    background-size: 400% 400%;
    animation: gradient-xy 40s ease infinite;
}

/* ========================================
   🎬 ICON ANIMATIONS - SERVICE CATEGORIES
   ======================================== */

/* Bounce Up-Down Animation - Teknik Servis */
@keyframes bounce-y {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce-y {
    animation: bounce-y 2s ease-in-out infinite;
}

/* Slide Left-Right Animation - Satın Alma Sepeti */
@keyframes slide-x {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(8px);
    }
}

.animate-slide-x {
    animation: slide-x 1.5s ease-in-out infinite;
}

/* Swing Animation - Kiralama */
@keyframes swing {
    0%, 100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

.animate-swing {
    animation: swing 2s ease-in-out infinite;
    transform-origin: top center;
}

/* Rotate Wiggle Animation - Teknik Servis */
@keyframes rotate-wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(45deg);
    }
}

.animate-rotate-wiggle {
    animation: rotate-wiggle 1.5s ease-in-out infinite;
}

/* Hover Versions - Only animate on hover */
.group:hover .group-hover\:animate-slide-x {
    animation: slide-x 1.5s ease-in-out infinite;
}

.group:hover .group-hover\:animate-swing {
    animation: swing 2s ease-in-out infinite;
    transform-origin: top center;
}

.group:hover .group-hover\:animate-bounce-y {
    animation: bounce-y 2s ease-in-out infinite;
}

.group:hover .group-hover\:animate-rotate-wiggle {
    animation: rotate-wiggle 1.5s ease-in-out infinite;
}