<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">

        <title><?php echo e(config('app.name', 'MyMoney')); ?></title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800&display=swap" rel="stylesheet" />

        <!-- Icons -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

        <!-- Scripts -->
        <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>

        <style>
            body {
                font-family: 'Inter', sans-serif;
                background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 50%, #f0f9ff 100%);
                min-height: 100vh;
                overflow-x: hidden;
            }

            /* Animated floating shapes */
            .floating-shapes {
                position: fixed;
                inset: 0;
                overflow: hidden;
                pointer-events: none;
                z-index: 0;
            }

            .shape {
                position: absolute;
                border-radius: 50%;
                opacity: 0.6;
            }

            .shape-1 {
                width: 300px;
                height: 300px;
                background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(6, 182, 212, 0.1));
                top: -100px;
                left: -100px;
                animation: float-1 20s ease-in-out infinite;
            }

            .shape-2 {
                width: 200px;
                height: 200px;
                background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(20, 184, 166, 0.08));
                top: 50%;
                right: -50px;
                animation: float-2 25s ease-in-out infinite;
            }

            .shape-3 {
                width: 150px;
                height: 150px;
                background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.08));
                bottom: -50px;
                left: 30%;
                animation: float-3 18s ease-in-out infinite;
            }

            .shape-4 {
                width: 100px;
                height: 100px;
                background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(20, 184, 166, 0.1));
                top: 30%;
                left: 20%;
                animation: float-4 22s ease-in-out infinite;
            }

            .shape-5 {
                width: 80px;
                height: 80px;
                background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(20, 184, 166, 0.08));
                bottom: 20%;
                right: 20%;
                animation: float-5 16s ease-in-out infinite;
            }

            @keyframes float-1 {
                0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
                25% { transform: translate(50px, 100px) rotate(90deg) scale(1.1); }
                50% { transform: translate(100px, 50px) rotate(180deg) scale(0.95); }
                75% { transform: translate(30px, 80px) rotate(270deg) scale(1.05); }
            }

            @keyframes float-2 {
                0%, 100% { transform: translate(0, 0) rotate(0deg); }
                33% { transform: translate(-80px, -60px) rotate(120deg); }
                66% { transform: translate(-40px, 40px) rotate(240deg); }
            }

            @keyframes float-3 {
                0%, 100% { transform: translate(0, 0) scale(1); }
                50% { transform: translate(60px, -80px) scale(1.2); }
            }

            @keyframes float-4 {
                0%, 100% { transform: translate(0, 0) rotate(0deg); }
                25% { transform: translate(40px, 30px) rotate(90deg); }
                50% { transform: translate(-20px, 60px) rotate(180deg); }
                75% { transform: translate(30px, -20px) rotate(270deg); }
            }

            @keyframes float-5 {
                0%, 100% { transform: translate(0, 0) scale(1); }
                33% { transform: translate(-30px, -40px) scale(1.15); }
                66% { transform: translate(20px, 30px) scale(0.9); }
            }

            /* Moving lines */
            .moving-line {
                position: absolute;
                height: 2px;
                background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.3), transparent);
                animation: move-line 8s linear infinite;
            }

            .line-1 { top: 20%; width: 200px; animation-delay: 0s; }
            .line-2 { top: 40%; width: 150px; animation-delay: 2s; }
            .line-3 { top: 60%; width: 180px; animation-delay: 4s; }
            .line-4 { top: 80%; width: 120px; animation-delay: 6s; }

            @keyframes move-line {
                0% { left: -200px; opacity: 0; }
                10% { opacity: 1; }
                90% { opacity: 1; }
                100% { left: 100%; opacity: 0; }
            }

            /* Card glass effect */
            .glass-card {
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(20px);
                border: 1px solid rgba(255, 255, 255, 0.8);
                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
            }

            /* Input styling */
            .input-light {
                background: #f8fafc;
                border: 2px solid #e2e8f0;
                color: #1e293b;
                transition: all 0.3s ease;
            }

            .input-light:focus {
                background: #ffffff;
                border-color: #14b8a6;
                box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.1);
            }

            .input-light::placeholder {
                color: #94a3b8;
            }

            /* Button styling */
            .btn-primary {
                background: linear-gradient(135deg, #14b8a6, #0d9488);
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
            }

            .btn-primary::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
                animation: shimmer 3s infinite;
            }

            @keyframes shimmer {
                0% { left: -100%; }
                100% { left: 100%; }
            }

            .btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 25px -5px rgba(20, 184, 166, 0.4);
            }

            /* Logo pulse */
            .logo-pulse {
                animation: logo-pulse 2s ease-in-out infinite;
            }

            @keyframes logo-pulse {
                0%, 100% { transform: scale(1); }
                50% { transform: scale(1.05); }
            }

            [x-cloak] { display: none !important; }
        </style>
    </head>
    <body class="antialiased">
        <!-- Animated Background -->
        <div class="floating-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
            <div class="shape shape-4"></div>
            <div class="shape shape-5"></div>
            <div class="moving-line line-1"></div>
            <div class="moving-line line-2"></div>
            <div class="moving-line line-3"></div>
            <div class="moving-line line-4"></div>
        </div>

        <div class="min-h-screen flex flex-col items-center justify-center px-4 py-12 relative z-10">
            <!-- Logo -->
            <div class="mb-8 text-center">
                <a href="/" class="inline-flex items-center space-x-3 group">
                    <div class="logo-pulse w-14 h-14 bg-gradient-to-br from-teal-500 to-emerald-500 rounded-2xl flex items-center justify-center shadow-lg shadow-teal-500/30">
                        <i class="fas fa-wallet text-white text-2xl"></i>
                    </div>
                    <span class="text-3xl font-bold text-slate-800">MyMoney</span>
                </a>
                <p class="mt-2 text-slate-500">Kelola Keuangan Pribadi</p>
            </div>

            <!-- Card -->
            <div class="w-full max-w-md glass-card rounded-3xl p-8">
                <?php echo e($slot); ?>

            </div>

            <!-- Footer -->
            <p class="mt-8 text-sm text-slate-400">
                &copy; <?php echo e(date('Y')); ?> MyMoney. Made with <i class="fas fa-heart text-rose-400"></i>
            </p>
        </div>
    </body>
</html>
<?php /**PATH C:\xampp\htdocs\mymoney-app\resources\views\layouts\guest.blade.php ENDPATH**/ ?>