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

        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            25% { transform: translateY(-10px) rotate(2deg); }
            50% { transform: translateY(0px) rotate(0deg); }
            75% { transform: translateY(-5px) rotate(-2deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }

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

        @keyframes shine {
            from { mask-position: 150%; }
            to { mask-position: -50%; }
        }

        @keyframes progress {
            0% { width: 0%; }
            20% { width: 40%; }
            50% { width: 60%; }
            70% { width: 75%; }
            90% { width: 90%; }
            100% { width: 100%; }
        }

        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        @keyframes slideOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(-100%); opacity: 0; }
        }

        @keyframes snakeAnim {
            0% { stroke-dashoffset: 1000; }
            100% { stroke-dashoffset: 0; }
        }

        .progress-animation {
            animation: progress 2s ease-in-out forwards;
        }

        .notification-enter {
            animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .notification-exit {
            animation: slideOut 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

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

        .animate-fadeIn {
            animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .gradient-bg {
            background: linear-gradient(-45deg, #FF416C, #FF4B2B, #FF9A8B, #FF6B6B);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }

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

        .input-shine {
            position: relative;
            overflow: hidden;
        }

        .input-shine::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.3) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: rotate(45deg);
            animation: shine 3s infinite;
            pointer-events: none;
        }

        .btn-hover {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-hover:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 20px 40px rgba(255, 107, 107, 0.3);
        }

        .container-shadow {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1),
                        0 1px 8px rgba(0, 0, 0, 0.05);
        }

        body {
            background: linear-gradient(135deg, #f6f8fd 0%, #f0f4fa 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            width: 100%;
            min-width: 400px;
        }

        .loading-overlay {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(5px);
            z-index: 50;
            transition: opacity 0.3s ease;
        }

        .progress-bar {
            background: linear-gradient(90deg, #FF416C, #FF4B2B);
            box-shadow: 0 0 10px rgba(255, 65, 108, 0.5);
            height: 4px;
        }

        .input-focus {
            transition: all 0.3s ease;
        }

        .input-focus:focus {
            border-color: #FF416C;
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 65, 108, 0.2);
        }

        .form-container {
            transform: translateY(0);
            opacity: 1;
            transition: all 0.3s ease;
        }

        .form-hidden {
            transform: translateY(20px);
            opacity: 0;
        }

        /* Minimum genişliği sağla */
        #container {
            width: 400px;
        }

        /* Yılan Efekti */
        .snake-border {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            z-index: -1;
        }

        .snake-border svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .snake-border path {
            fill: none;
            stroke-width: 3;
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: snakeAnim 5s linear infinite;
            stroke: url(#gradient); /* Gradient'i burada kullanıyoruz */
        }

        /* Mat Renkler için Gradient */
        .matte-rainbow-gradient {
            background: linear-gradient(to right, 
                #c72c41, #d68910, #e5e7e9, #48c9b0, #3498db, #8e44ad
            );
        }