/* Custom animations */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes float-delayed {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(-5deg); }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(3deg); }
}

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

@keyframes pulse-glow {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.3; }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 8s ease-in-out infinite;
}

.animate-float-slow {
    animation: float-slow 10s ease-in-out infinite;
}

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

.animate-pulse-glow {
    animation: pulse-glow 4s ease-in-out infinite;
}

.bg-grid-pattern {
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Scroll Indicator Styles */
.scroll-indicator {
    transition: all 0.3s ease;
}

.scroll-indicator:hover {
    transform: translateY(-2px);
}

.scroll-indicator .scroll-mouse {
    transition: all 0.3s ease;
}

.scroll-indicator:hover .scroll-mouse {
    border-color: currentColor;
}

.scroll-indicator .scroll-dot {
    animation: scroll-dot 2s infinite;
}

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

/* Hero section full height minus header */
.hero-fullscreen {
    height: calc(100vh - 5rem); /* 100vh - header height (80px = 5rem) */
    min-height: calc(600px - 5rem);
}

@media (max-height: 600px) {
    .hero-fullscreen {
        min-height: calc(500px - 5rem);
    }
}

/* Alternative class for sections that need full viewport height minus header */
.section-fullscreen-minus-header {
    height: calc(100vh - 5rem);
    min-height: calc(600px - 5rem);
}

/* Ensure main content starts below fixed header */
main {
    padding-top: 0; /* Header is fixed, so no padding needed */
}

/* Hero sections should account for fixed header */
section.h-screen {
    height: calc(100vh - 5rem) !important;
    min-height: calc(600px - 5rem) !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    section.h-screen {
        height: calc(100vh - 5rem) !important;
        min-height: calc(500px - 5rem) !important;
    }
}

/* Pricing Toggle Styles */
.pricing-toggle-btn {
    color: #6b7280;
    transition: all 0.3s ease;
}

.pricing-toggle-btn.active {
    background: linear-gradient(to right, #2563eb, #1d4ed8, #1e40af);
    color: white;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(1.05);
}

.pricing-toggle-btn:not(.active):hover {
    color: #2563eb;
    background-color: rgba(59, 130, 246, 0.05);
    transform: translateY(-2px);
}

.pricing-toggle-btn.active .shine-effect {
    transform: translateX(100%);
    transition: transform 1s ease;
}

.pricing-toggle-btn i {
    color: #2563eb;
    transition: color 0.3s ease;
}

.pricing-toggle-btn.active i {
    color: white;
}

/* Pricing Content Styles */
.pricing-description {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    will-change: transform, opacity;
}

.pricing-description.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.pricing-content {
    margin-bottom: 0;
}

/* Kart hover ve gölge iyileştirmesi */
.group:hover .shadow-xl {
    box-shadow: 0 12px 32px 0 rgba(37,99,235,0.12), 0 1.5px 6px 0 rgba(0,0,0,0.04);
    border-color: #2563eb33;
}

.yearly-price { display: none; }

/* Dark Mode Smooth Transitions */
:root {
    color-scheme: light dark;
}

/* Prevent FOUC and smooth transitions */
html {
    visibility: visible;
    opacity: 1;
    transition: background-color 0.3s ease;
}

html.theme-transitioning * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                opacity 0.3s ease,
                transform 0.3s ease !important;
}

/* Dark mode specific transitions */
.dark-mode-transition {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* Prevent dark mode flicker */
html.dark {
    background-color: rgb(17, 24, 39);
    color-scheme: dark;
}

/* Prevent light mode flicker */
html:not(.dark) {
    background-color: white;
    color-scheme: light;
}

/* Override for elements that shouldn't have transition */
.no-transition,
.no-transition * {
    transition: none !important;
}

/* Enhanced transitions for specific elements */
.bg-white,
.dark\:bg-gray-900,
.dark\:bg-gray-800,
.dark\:bg-gray-700,
.text-gray-900,
.dark\:text-white,
.dark\:text-gray-300,
.dark\:text-gray-400 {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Slide Up Animation */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    opacity: 0;
    animation: slideUp 0.8s ease-out forwards;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #374151;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Alpine.js */
[x-cloak] { display: none !important; }

@keyframes bounce-slow { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@keyframes pulse-slow { 0%, 100% { opacity: 0.1; transform: scale(1); } 50% { opacity: 0.2; transform: scale(1.05); } }
.animate-bounce-slow { animation: bounce-slow 4s ease-in-out infinite; }
.animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }

body { overflow-x: hidden; }