<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title') - {{ config('app.name') }}</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
          rel="stylesheet">

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .gradient-bg-2 {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .gradient-bg-3 {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

        .animated-gradient {
            background: linear-gradient(-45deg, #1e293b, #334155, #3b82f6, #2563eb);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }

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

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

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

        .fade-in {
            animation: fadeIn 0.8s ease-in;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .input-focus:focus {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .btn-hover {
            transition: all 0.3s ease;
        }

        .btn-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        @keyframes float-particle {
            0%, 100% {
                transform: translate(0, 0) rotate(0deg);
            }
            25% {
                transform: translate(10px, -10px) rotate(90deg);
            }
            50% {
                transform: translate(0, -20px) rotate(180deg);
            }
            75% {
                transform: translate(-10px, -10px) rotate(270deg);
            }
        }
    </style>
</head>
<body class="antialiased">
<div class="min-h-screen relative overflow-hidden animated-gradient">
    <!-- Animated Particles -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="particle w-2 h-2 bg-white/30 absolute top-1/4 left-1/4 animate-pulse"
             style="animation: float-particle 10s infinite;"></div>
        <div class="particle w-3 h-3 bg-white/20 absolute top-1/3 right-1/4 animate-pulse"
             style="animation: float-particle 15s infinite 2s;"></div>
        <div class="particle w-4 h-4 bg-white/25 absolute bottom-1/4 left-1/3 animate-pulse"
             style="animation: float-particle 12s infinite 4s;"></div>
        <div class="particle w-2 h-2 bg-white/30 absolute top-2/3 right-1/3 animate-pulse"
             style="animation: float-particle 8s infinite 1s;"></div>
        <div class="particle w-3 h-3 bg-white/20 absolute bottom-1/3 right-1/4 animate-pulse"
             style="animation: float-particle 14s infinite 3s;"></div>
    </div>

    <!-- Decorative Blobs -->
    <div class="absolute top-0 right-0 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl float-animation"></div>
    <div class="absolute bottom-0 left-0 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl float-animation"
         style="animation-delay: 2s;"></div>

    <div class="relative z-10 flex items-center justify-center min-h-screen px-4 py-12 sm:px-6 lg:px-8">
        <div class="w-full max-w-md fade-in">
            <!-- Logo -->
            <div class="text-center mb-8">
                <a href="{{ route('home') }}" class="inline-block">
                    <div
                        class="w-16 h-16 mx-auto bg-white rounded-2xl shadow-2xl flex items-center justify-center mb-4 transform hover:scale-110 transition-transform duration-300">
                        <svg class="w-10 h-10 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h1 class="text-3xl font-bold text-white drop-shadow-lg">{{ config('app.name') }}</h1>
                </a>
            </div>

            <!-- Main Card -->
            <div class="glass-effect rounded-3xl shadow-2xl overflow-hidden">
                <div class="px-8 py-10 sm:px-10">
                    @yield('content')
                </div>
            </div>

            <!-- Footer Links -->
            <div class="mt-8 text-center">
                <div class="flex justify-center space-x-6 text-sm">
                    <a href="#"
                       class="text-white/90 hover:text-white transition-colors duration-200 drop-shadow">Yardım</a>
                    <span class="text-white/50">•</span>
                    <a href="#" class="text-white/90 hover:text-white transition-colors duration-200 drop-shadow">Gizlilik</a>
                    <span class="text-white/50">•</span>
                    <a href="#" class="text-white/90 hover:text-white transition-colors duration-200 drop-shadow">Şartlar</a>
                </div>
                <p class="mt-4 text-white/80 text-sm drop-shadow">
                    © {{ date('Y') }} {{ config('app.name') }}. Tüm hakları saklıdır.
                </p>
            </div>
        </div>
    </div>
</div>

@stack('scripts')

<script>
    // Add ripple effect to buttons
    document.querySelectorAll('button, .btn').forEach(button => {
        button.addEventListener('click', function (e) {
            let ripple = document.createElement('span');
            ripple.classList.add('ripple');
            this.appendChild(ripple);

            let x = e.clientX - e.target.offsetLeft;
            let y = e.clientY - e.target.offsetTop;

            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';

            setTimeout(() => {
                ripple.remove();
            }, 600);
        });
    });

    // Add floating animation to input focus
    document.querySelectorAll('input, textarea, select').forEach(input => {
        input.addEventListener('focus', function () {
            this.parentElement.style.transform = 'scale(1.02)';
            this.parentElement.style.transition = 'transform 0.2s ease';
        });

        input.addEventListener('blur', function () {
            this.parentElement.style.transform = 'scale(1)';
        });
    });

    // Password visibility toggle
    document.querySelectorAll('[data-toggle-password]').forEach(button => {
        button.addEventListener('click', function () {
            const target = document.querySelector(this.dataset.togglePassword);
            const type = target.type === 'password' ? 'text' : 'password';
            target.type = type;

            const icon = this.querySelector('svg');
            icon.classList.toggle('text-purple-600');
        });
    });
</script>
</body>
</html>
