.login-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            visibility: hidden;
        }

        .login-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .login-modal {
            background: var(--bg-primary);
            border-radius: 30px;
            box-shadow: 20px 20px 60px var(--shadow-dark), -20px -20px 60px var(--shadow-light);
            width: 90%;
            max-width: 480px;
            position: relative;
            transform: scale(0.9) translateY(20px);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            isolation: isolate;
        }

        .login-modal::before,
        .login-modal::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
        }

        .login-modal::before {
            background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15), transparent 45%),
                        radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.08), transparent 40%);
            opacity: 0.8;
        }

        .login-modal::after {
            background: linear-gradient(135deg, rgba(255, 171, 64, 0.15), rgba(82, 113, 255, 0.1));
            filter: blur(30px);
        }

        .login-modal-overlay.active .login-modal {
            transform: scale(1) translateY(0);
        }

        .login-modal-header {
            position: relative;
            padding: 2.5rem 2rem 2rem;
            text-align: center;
        }

        /* Kapat butonu position:absolute kalsın */
        .login-modal-header > *:not(.login-header-pattern):not(.login-modal-close) {
            position: relative;
            z-index: 1;
        }

        .login-logo {
            width: 100px;
            height: 100px;
            margin: 0 auto 1.5rem;
            border-radius: 25px;
            background: linear-gradient(145deg, var(--accent-primary), var(--accent-secondary));
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 10px 10px 20px var(--shadow-dark), -5px -5px 15px var(--shadow-light);
            animation: logoFloat 3s ease-in-out infinite;
        }

        .login-logo i {
            font-size: 3rem;
            color: white;
            animation: logoRotate 4s ease-in-out infinite;
        }

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

        @keyframes logoRotate {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-5deg); }
            75% { transform: rotate(5deg); }
        }

        .login-modal-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
            display: inline-block;
            background: linear-gradient(120deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
            background-size: 200% 200%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: titleGlow 6s ease-in-out infinite, titleBreathe 5s ease-in-out infinite;
        }

        .login-modal-subtitle {
            color: var(--text-secondary);
            margin-top: 0.5rem;
            font-size: 0.95rem;
            letter-spacing: 0.3px;
            animation: subtitleFade 5s ease-in-out infinite;
        }

        @keyframes titleGlow {
            0% { background-position: 0% 50%; text-shadow: 0 0 10px rgba(82, 113, 255, 0.2); }
            50% { background-position: 100% 50%; text-shadow: 0 0 18px rgba(255, 171, 64, 0.35); }
            100% { background-position: 0% 50%; text-shadow: 0 0 10px rgba(82, 113, 255, 0.2); }
        }

        @keyframes titleBreathe {
            0%, 100% { transform: scale(1) translateZ(0); letter-spacing: 0.4px; }
            50% { transform: scale(1.04) translateZ(0); letter-spacing: 1.2px; }
        }

        @keyframes subtitleFade {
            0%, 100% { opacity: 0.85; }
            50% { opacity: 1; }
        }

        .login-header-pattern {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 0;
        }

        .login-header-pattern span {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.35);
            box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
            animation: patternDrift 12s linear infinite;
        }

        .login-header-pattern span:nth-child(1) { top: 15%; left: 18%; animation-delay: 0s; }
        .login-header-pattern span:nth-child(2) { top: 35%; right: 12%; animation-delay: -2s; width: 6px; height: 6px; }
        .login-header-pattern span:nth-child(3) { bottom: 18%; left: 25%; animation-delay: -4s; width: 10px; height: 10px; }
        .login-header-pattern span:nth-child(4) { bottom: 5%; right: 28%; animation-delay: -1s; }

        @keyframes patternDrift {
            0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.4; }
            50% { transform: translate3d(5px, -8px, 0) scale(1.2); opacity: 0.75; }
            100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.4; }
        }

        .login-character-stage {
            position: relative;
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
            height: 140px;
            border-radius: 25px;
            background: linear-gradient(135deg, rgba(82, 113, 255, 0.08), rgba(255, 171, 64, 0.08));
            overflow: hidden;
            box-shadow: inset 8px 8px 20px rgba(0, 0, 0, 0.05), inset -8px -8px 20px rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(6px);
        }

        /* Küçük ekranlarda (500px yükseklikten küçük) karakter animasyonunu gizle */
        @media (max-height: 500px) {
            .login-character-stage {
                display: none !important;
            }
        }

        .login-character-stage::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: radial-gradient(circle at center, rgba(255, 255, 255, 0.18), transparent 55%);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            z-index: 1;
        }

        .login-character-stage .login-aurora {
            position: absolute;
            inset: -40%;
            background: conic-gradient(from 180deg, rgba(82, 113, 255, 0.35), rgba(255, 171, 64, 0.35), rgba(82, 113, 255, 0.35));
            animation: aurora 12s linear infinite;
            opacity: 0.65;
        }

        @keyframes aurora {
            to {
                transform: rotate(360deg);
            }
        }

        .login-floating-bubble {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            box-shadow: inset -8px -8px 20px rgba(255, 255, 255, 0.3), inset 8px 8px 20px rgba(82, 113, 255, 0.2);
            animation: float 8s ease-in-out infinite;
        }

        .login-floating-bubble:nth-child(2) { top: 15%; left: 5%; animation-delay: -2s; }
        .login-floating-bubble:nth-child(3) { bottom: 10%; right: 8%; animation-delay: -4s; width: 40px; height: 40px; }
        .login-floating-bubble:nth-child(4) { top: 50%; left: 45%; animation-delay: -1s; width: 50px; height: 50px; }

        @keyframes float {
            0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
            50% { transform: translate3d(0, -12px, 0) scale(1.05); }
        }

        .login-mascot {
            position: absolute;
            bottom: 8px;
            width: 110px;
            height: 120px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            transition: transform 0.4s ease, filter 0.4s ease;
        }

        .login-mascot[data-character="astro"] { left: 12%; }
        .login-mascot[data-character="bot"] { right: 12%; }

        .mascot-body {
            position: relative;
            width: 90px;
            height: 100px;
            border-radius: 40px;
            background: linear-gradient(145deg, rgba(82, 113, 255, 0.9), rgba(123, 97, 255, 0.9));
            box-shadow: inset 6px 6px 16px rgba(0, 0, 0, 0.12), inset -6px -6px 16px rgba(255, 255, 255, 0.35);
            padding: 12px;
        }

        .login-mascot[data-character="bot"] .mascot-body {
            background: linear-gradient(145deg, rgba(255, 171, 64, 0.9), rgba(255, 111, 97, 0.9));
        }

        .mascot-face {
            position: relative;
            width: 100%;
            height: 46px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: inset 4px 4px 6px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0 8px;
        }

        .mascot-eye {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
        }

        .mascot-eyelid {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(200, 210, 255, 0.6));
            transform-origin: top center;
            transform: scaleY(0);
            transition: transform 0.25s ease-in-out;
            z-index: 2;
        }

        .mascot-pupil {
            --offset-x: 0px;
            --offset-y: 0px;
            position: absolute;
            width: 12px;
            height: 12px;
            background: #0f172a;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y));
            transition: transform 0.1s ease-out;
            z-index: 1;
        }

        .mascot-eye::after {
            content: '';
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.8);
            top: 4px;
            left: 6px;
        }

        .mascot-base {
            position: absolute;
            bottom: -4px;
            left: 10px;
            right: 10px;
            height: 8px;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.08);
            filter: blur(4px);
        }

        .mascot-hand {
            position: absolute;
            width: 34px;
            height: 42px;
            border-radius: 16px;
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(230, 234, 255, 0.85));
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.9), inset 3px 3px 8px rgba(15, 23, 42, 0.15), 0 8px 14px rgba(15, 23, 42, 0.22);
            bottom: 12px;
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 4;
        }

        .mascot-hand::after {
            content: '';
            position: absolute;
            width: 78%;
            height: 58%;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 40% 40% 50% 50%;
            background: rgba(15, 23, 42, 0.05);
            box-shadow: inset 0 -2px 4px rgba(15, 23, 42, 0.08);
        }

        .mascot-hand::before {
            content: '';
            position: absolute;
            bottom: 6px;
            left: 50%;
            transform: translateX(-50%);
            width: 14px;
            height: 8px;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.08);
            opacity: 0.7;
        }

        .mascot-hand.left {
            left: -6px;
            transform: rotate(12deg) translateY(0);
        }

        .mascot-hand.right {
            right: -6px;
            transform: rotate(-12deg) translateY(0);
        }

        .login-mascot[data-character="astro"] .mascot-hand {
            background: linear-gradient(150deg, rgba(248, 249, 255, 0.95), rgba(208, 219, 255, 0.85));
            border-color: rgba(83, 114, 255, 0.15);
        }

        .login-mascot[data-character="bot"] .mascot-hand {
            background: linear-gradient(150deg, rgba(255, 249, 244, 0.95), rgba(255, 223, 205, 0.85));
            border-color: rgba(255, 171, 64, 0.2);
        }

        .login-character-stage .pointer-indicator {
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.7);
            background: rgba(255, 255, 255, 0.25);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: transform 0.2s ease-out, opacity 0.3s ease;
            opacity: 0;
            pointer-events: none;
        }

        .login-character-stage.awake .pointer-indicator {
            opacity: 1;
        }

        .login-character-stage.eye-closed .mascot-eyelid {
            transform: scaleY(1);
        }

        .login-character-stage.eye-closed .mascot-pupil {
            opacity: 0;
            transform: translate(-50%, -30%);
        }

        .login-character-stage.eye-closed .mascot-hand.left {
            transform: translate(16px, -46px) rotate(-6deg);
        }

        .login-character-stage.eye-closed .mascot-hand.right {
            transform: translate(-16px, -46px) rotate(6deg);
        }

        .login-character-stage.eye-wide .mascot-eyelid {
            transform: scaleY(0);
        }

        .login-character-stage.eye-wide .mascot-eye {
            box-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
        }

        .login-character-stage.eye-wide .mascot-pupil {
            transform: translate(-50%, -50%) scale(1.25);
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
        }

        .login-character-stage.eye-wide .mascot-eye::after {
            width: 8px;
            height: 8px;
            top: 2px;
            left: 5px;
        }

        .login-character-stage.eye-wide .mascot-hand.left,
        .login-character-stage.eye-wide .mascot-hand.right {
            transform: translateY(-4px) rotate(0deg);
        }

        .login-modal-close {
            position: absolute;
            top: 1.5rem;
            left: auto !important;
            right: 1.5rem;
            inset-inline-start: auto;
            inset-inline-end: 1.5rem;
            z-index: 20;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--bg-primary);
            border: none;
            box-shadow: 5px 5px 15px var(--shadow-dark), -5px -5px 15px var(--shadow-light);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .login-modal-close:hover {
            transform: rotate(90deg) scale(1.1);
            box-shadow: 8px 8px 20px var(--shadow-dark), -8px -8px 20px var(--shadow-light);
        }

        .login-modal-close i {
            color: var(--text-secondary);
            font-size: 1.2rem;
        }

        .login-modal-body {
            padding: 0 2rem 2.5rem;
        }

        .login-form-group {
            margin-bottom: 1.5rem;
            position: relative;
            transition: transform 0.35s ease;
        }

        .login-form-group:focus-within {
            transform: translateY(-2px);
        }

        .login-form-label {
            display: flex;
            align-items: center;
            margin-bottom: 0.75rem;
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.95rem;
            position: relative;
        }

        .login-form-label i {
            margin-right: 0.5rem;
            color: var(--accent-primary);
            transition: transform 0.3s ease, color 0.3s ease;
        }

        .login-form-label::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 18px;
            height: 3px;
            border-radius: 6px;
            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
            opacity: 0;
            transform: translateX(6px) scaleX(0.6);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .login-form-group:focus-within .login-form-label {
            color: var(--accent-primary);
            letter-spacing: 0.3px;
        }

        .login-form-group:focus-within .login-form-label i {
            color: var(--accent-secondary);
            transform: translateY(-2px) scale(1.1);
        }

        .login-form-group:focus-within .login-form-label::after {
            opacity: 1;
            transform: translateX(0) scaleX(1);
        }

        .login-input-wrapper {
            position: relative;
            border-radius: 18px;
        }

        .login-input-wrapper::before,
        .login-input-wrapper::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 18px;
            opacity: 0;
            transition: opacity 0.35s ease;
            pointer-events: none;
        }

        .login-input-wrapper::before {
            background: conic-gradient(from 180deg, rgba(82, 113, 255, 0.65), rgba(255, 171, 64, 0.65), rgba(82, 113, 255, 0.65));
            filter: blur(6px);
            animation: inputOrbit 6s linear infinite;
        }

        .login-input-wrapper::after {
            inset: -1px;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .login-input-wrapper:focus-within::before,
        .login-input-wrapper:focus-within::after {
            opacity: 1;
        }

        .login-form-input {
            width: 100%;
            padding: 1rem 1.25rem;
            padding-right: 3rem;
            border: none;
            border-radius: 15px;
            background: var(--bg-primary);
            box-shadow: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light);
            color: var(--text-primary);
            font-size: 1rem;
            outline: none;
            transition: all 0.3s ease;
            background-image: radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 55%);
            animation: inputIdle 8s ease-in-out infinite;
        }

        .login-form-input:focus {
            box-shadow: inset 8px 8px 16px var(--shadow-dark), inset -8px -8px 16px var(--shadow-light);
            transform: scale(1.02);
            animation: inputActive 2.5s ease-in-out infinite;
        }

        .login-form-input::placeholder {
            color: var(--text-muted);
            opacity: 0.6;
            transition: opacity 0.25s ease;
        }

        .login-form-input:focus::placeholder {
            opacity: 0.6;
        }

        .login-input-icon {
            position: absolute;
            right: 1.25rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .login-input-icon:hover {
            color: var(--accent-primary);
        }

        .login-error {
            display: none;
            padding: 1rem;
            border-radius: 15px;
            background: var(--bg-primary);
            box-shadow: inset 4px 4px 8px rgba(239, 68, 68, 0.1), inset -4px -4px 8px rgba(239, 68, 68, 0.05);
            border: 2px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
            margin-bottom: 1.5rem;
            animation: shake 0.5s ease;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }

        .login-actions-row {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .login-submit-btn {
            width: 100%;
            padding: 1rem 1.5rem;
            border: none;
            border-radius: 15px;
            background: linear-gradient(145deg, var(--accent-primary), var(--accent-secondary));
            color: white;
            font-weight: 600;
            font-size: 1.05rem;
            box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            animation: buttonBreathe 6s ease-in-out infinite;
        }

        .login-submit-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }

        .login-submit-btn::after {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 18px;
            border: 2px solid rgba(255, 255, 255, 0.18);
            opacity: 0.6;
            animation: buttonOrbit 3.8s linear infinite;
        }

        .login-submit-btn:hover::before {
            width: 300px;
            height: 300px;
        }

        .login-submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 12px 12px 24px var(--shadow-dark), -12px -12px 24px var(--shadow-light);
            animation-play-state: paused;
        }

        .login-submit-btn:active {
            transform: translateY(0);
            box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
        }

        .login-submit-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            animation: none;
            box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
        }

        .login-actions-row .login-passkey-btn {
            width: auto;
            flex: 0 0 auto;
            margin-top: 0;
            padding: 0.78rem 0.95rem;
            min-width: 2.75rem;
            border-radius: 15px;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-weight: 600;
            font-size: 0.9rem;
            white-space: nowrap;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            box-shadow: var(--neu-shadow-sm);
        }

        .login-passkey-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        @keyframes buttonOrbit {
            0% { transform: rotate(0deg); opacity: 0.6; }
            50% { opacity: 0.2; }
            100% { transform: rotate(360deg); opacity: 0.6; }
        }

        @keyframes buttonBreathe {
            0%, 100% {
                box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
            }
            50% {
                box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.35), -10px -10px 20px rgba(255, 255, 255, 0.3);
            }
        }

        .navbar-btn.login-btn {
            position: relative;
            overflow: visible;
            isolation: isolate;
            animation: loginBtnPulse 5s ease-in-out infinite;
        }

        .navbar-btn.login-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at var(--shine-x, 0%) var(--shine-y, 50%), rgba(255, 255, 255, 0.35), transparent 55%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .navbar-btn.login-btn:hover::after,
        .navbar-btn.login-btn:focus-visible::after {
            opacity: 1;
        }

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

        .login-character-stage.success .login-mascot {
            animation: mascotWave 1s ease-out forwards;
        }

        .login-character-stage.success .mascot-hand.left {
            animation: handWaveLeft 0.45s ease-in-out 0.05s 2 alternate;
            transform-origin: 60% 90%;
        }

        .login-character-stage.success .mascot-hand.right {
            animation: handWaveRight 0.45s ease-in-out 0.05s 2 alternate;
            transform-origin: 40% 90%;
        }

        .login-character-stage.success .mascot-face {
            animation: faceGlow 0.9s ease forwards;
        }

        .login-character-stage.success .mascot-pupil {
            animation: pupilSmile 0.6s ease forwards;
        }

        .login-character-stage.error {
            animation: stageShake 0.9s ease;
        }

        .login-character-stage.error::after {
            opacity: 0.7;
            background: radial-gradient(circle at center, rgba(239, 68, 68, 0.35), rgba(15, 23, 42, 0.1) 60%);
            animation: errorFlash 0.9s ease;
        }

        .login-character-stage.error .login-mascot {
            animation: mascotFreakOut 0.9s ease-in-out forwards;
        }

        .login-character-stage.error .mascot-face {
            animation: faceAngry 0.9s ease forwards;
        }

        .login-character-stage.error .mascot-pupil {
            animation: pupilFrown 0.9s ease forwards;
        }

        .login-character-stage.error .mascot-hand.left {
            animation: handCrossLeft 0.85s ease forwards;
        }

        .login-character-stage.error .mascot-hand.right {
            animation: handCrossRight 0.85s ease forwards;
        }

        @keyframes mascotWave {
            0% { transform: translateY(0) scale(1); }
            20% { transform: translateY(-6px) scale(1.03); }
            50% { transform: translateY(2px) scale(0.99); }
            100% { transform: translateY(0) scale(1); }
        }

        @keyframes handWaveLeft {
            0% { transform: translate(-4px, -10px) rotate(-6deg); }
            100% { transform: translate(10px, -6px) rotate(22deg); }
        }

        @keyframes handWaveRight {
            0% { transform: translate(4px, -10px) rotate(6deg); }
            100% { transform: translate(-10px, -6px) rotate(-22deg); }
        }

        @keyframes faceGlow {
            0% { box-shadow: inset 4px 4px 6px rgba(0,0,0,0.08); }
            50% { box-shadow: 0 0 14px rgba(255, 255, 255, 0.7); }
            100% { box-shadow: inset 4px 4px 6px rgba(0,0,0,0.08); }
        }

        @keyframes pupilSmile {
            0% { transform: translate(-50%, -50%); }
            100% { transform: translate(-40%, -60%); }
        }

        @keyframes stageShake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-8px); }
            40%, 80% { transform: translateX(8px); }
        }

        @keyframes faceAngry {
            0% { box-shadow: inset 4px 4px 6px rgba(0,0,0,0.08); }
            50% { box-shadow: inset 0 0 12px rgba(239, 68, 68, 0.35); }
            100% { box-shadow: inset 4px 4px 6px rgba(0,0,0,0.08); }
        }

        @keyframes pupilFrown {
            0% { transform: translate(-50%, -50%); }
            100% { transform: translate(-60%, -40%); }
        }

        @keyframes errorFlash {
            0% { opacity: 0; transform: scale(0.95); }
            50% { opacity: 0.8; transform: scale(1.05); }
            100% { opacity: 0.2; transform: scale(1); }
        }

        @keyframes mascotFreakOut {
            0% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-6px) rotate(-4deg); }
            50% { transform: translateY(3px) rotate(4deg); }
            100% { transform: translateY(0) rotate(0deg); }
        }

        @keyframes handCrossLeft {
            0% { transform: rotate(12deg) translateY(0); }
            100% { transform: translate(22px, -32px) rotate(-24deg); }
        }

        @keyframes handCrossRight {
            0% { transform: rotate(-12deg) translateY(0); }
            100% { transform: translate(-22px, -32px) rotate(24deg); }
        }

        @keyframes inputOrbit {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

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

        @keyframes inputActive {
            0%, 100% { box-shadow: inset 10px 10px 18px rgba(0, 0, 0, 0.35), inset -10px -10px 18px rgba(255, 255, 255, 0.25); }
            50% { box-shadow: inset 6px 6px 14px rgba(0, 0, 0, 0.25), inset -6px -6px 14px rgba(255, 255, 255, 0.2); }
        }

        @media (max-width: 767.98px) {
            .login-modal {
                width: calc(100% - 32px);
                border-radius: 24px;
            }

            /* Mobil: sadece karakter sahnesi üstte; başlık / alt başlık / kilit / pattern yok */
            .login-modal-title,
            .login-modal-subtitle,
            .login-logo,
            .login-header-pattern {
                display: none !important;
            }

            .login-modal-header {
                padding: 1rem 1rem 0.75rem;
                min-height: 0;
            }

            .login-character-stage {
                height: 120px;
                margin-top: 0.35rem;
            }

            .login-mascot {
                transform: scale(0.9);
                transform-origin: bottom;
            }

            .login-modal-close {
                top: 0.75rem;
                right: 0.75rem;
                inset-inline-end: 0.75rem;
            }

            .login-modal-body {
                padding: 0 1.5rem 2rem;
            }

            .login-form-group {
                margin-bottom: 1.1rem;
            }

            .login-actions-row {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: 0.5rem;
                flex-wrap: nowrap;
            }

            .login-remember-me {
                flex: 1 1 auto;
                min-width: 0;
            }

            .login-remember-me .neu-checkbox-label {
                margin-bottom: 0 !important;
            }

            .login-actions-row .login-submit-btn,
            .login-actions-row .login-passkey-btn {
                width: auto !important;
                flex: 0 0 auto;
                padding: 0.75rem 1rem;
                font-size: 0.92rem;
                gap: 0.45rem;
            }

            .login-actions-row .login-submit-btn span {
                white-space: nowrap;
            }
        }

        @media (max-height: 700px) {
            .login-logo,
            .login-modal-title,
            .login-modal-subtitle{
                display: none !important;
            }

            .login-modal-header {
                padding: 1.5rem 2rem 1rem;
            }

            .login-modal-body {
                padding-top: 0.5rem;
            }
        }

        /* Yatay + alçak: metinleri kıs, karakter sahnesi kalsın, çarpı sağda */
        @media (max-height: 500px) and (orientation: landscape) {
            .login-modal-title,
            .login-modal-subtitle,
            .login-logo,
            .login-header-pattern {
                display: none !important;
            }

            .login-modal-header {
                padding: 0.65rem 3rem 0.35rem 1rem !important;
                min-height: 0;
            }

            .login-character-stage {
                height: 100px;
                margin-top: 0.35rem;
            }

            .login-modal-close {
                top: 0.5rem;
                right: 0.65rem;
                left: auto !important;
                inset-inline-end: 0.65rem;
                inset-inline-start: auto;
            }

            .login-modal-body {
                padding: 1rem 2rem 1.5rem !important;
            }

            .login-form-group {
                margin-bottom: 1rem !important;
            }

            .login-form-label {
                margin-bottom: 0.5rem !important;
                font-size: 0.9rem !important;
            }

            .login-actions-row {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: 0.5rem;
            }

            .login-remember-me .neu-checkbox-label {
                margin-bottom: 0 !important;
            }

            .login-actions-row .login-submit-btn {
                width: auto !important;
                flex: 0 0 auto;
                padding: 0.7rem 0.95rem;
                font-size: 0.9rem;
            }
        }

        /* Kompakt giriş düzeni: masaüstünde maskot ve form yan yana. */
        @media (min-width: 768px) {
            .login-modal {
                max-width: 650px;
                display: grid;
                grid-template-columns: 220px minmax(0, 1fr);
                border-radius: 26px;
            }

            .login-modal-header {
                min-height: 330px;
                padding: 1.4rem 1.1rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .login-logo {
                width: 48px;
                height: 48px;
                margin: 0 auto 0.65rem;
                border-radius: 15px;
            }

            .login-logo i {
                font-size: 1.35rem;
            }

            .login-modal-title {
                font-size: 1.25rem;
            }

            .login-modal-subtitle {
                margin-top: 0.25rem;
                font-size: 0.78rem;
            }

            .login-character-stage {
                height: 150px;
                margin: 0.85rem 0 0;
                border-radius: 20px;
            }

            .login-mascot[data-character="astro"] {
                left: calc(50% - 55px);
            }

            .login-mascot[data-character="bot"] {
                display: none;
            }

            .login-modal-body {
                display: flex;
                align-items: center;
                padding: 1.8rem 2rem 1.8rem 1.4rem;
            }

            .login-form-group {
                margin-bottom: 1rem;
            }

            .login-form-label {
                margin-bottom: 0.45rem;
                font-size: 0.84rem;
            }

            .login-form-input {
                padding: 0.78rem 1rem;
                font-size: 0.9rem;
            }

            .login-actions-row {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: 0.75rem;
            }

            .login-remember-me {
                min-width: 0;
            }

            .login-remember-me .neu-checkbox-label {
                margin-bottom: 0 !important;
            }

            .login-actions-row .login-submit-btn,
            .login-actions-row .login-passkey-btn {
                width: auto;
                flex: 0 0 auto;
                padding: 0.78rem 1rem;
                font-size: 0.9rem;
                gap: 0.45rem;
            }
        }

        /* Mobilde de tek, sade maskot kalsın; form dikey akışını korusun. */
        .login-mascot[data-character="bot"] {
            display: none;
        }

        .login-mascot[data-character="astro"] {
            left: calc(50% - 55px);
        }

        @media (max-width: 767.98px) {
            .login-modal {
                width: min(410px, calc(100% - 28px));
            }

            .login-character-stage {
                height: 112px;
                margin-top: 0.25rem;
            }

            .login-modal-body {
                padding: 0 1.25rem 1.35rem;
            }

            .login-form-group {
                margin-bottom: 0.85rem;
            }

            .login-form-label {
                margin-bottom: 0.4rem;
                font-size: 0.84rem;
            }

            .login-form-input {
                padding: 0.75rem 0.95rem;
            }
        }

        /* Nova — tema renklerini kullanan, hafif ve pointer takipli yeni maskot. */
        .login-modal {
            border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent);
        }

        .login-character-stage {
            background:
                radial-gradient(circle at 50% 68%, color-mix(in srgb, var(--accent-primary) 24%, transparent), transparent 42%),
                linear-gradient(145deg, color-mix(in srgb, var(--accent-primary) 12%, var(--bg-primary)), var(--bg-primary));
            box-shadow:
                inset 7px 7px 16px rgba(0, 0, 0, 0.16),
                inset -7px -7px 16px rgba(255, 255, 255, 0.08),
                0 10px 26px color-mix(in srgb, var(--accent-primary) 12%, transparent);
        }

        .login-character-stage .login-aurora {
            inset: 0;
            background:
                radial-gradient(circle at 20% 24%, color-mix(in srgb, var(--accent-primary) 24%, transparent), transparent 30%),
                radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--accent-secondary) 20%, transparent), transparent 32%);
            animation: none;
            opacity: 1;
        }

        .login-floating-bubble {
            width: 7px;
            height: 7px;
            background: var(--accent-primary);
            box-shadow: 0 0 14px color-mix(in srgb, var(--accent-primary) 72%, transparent);
            animation: novaParticle 4.5s ease-in-out infinite;
        }

        .login-floating-bubble:nth-child(2) { top: 22%; left: 16%; }
        .login-floating-bubble:nth-child(3) { right: 15%; bottom: 24%; width: 5px; height: 5px; }
        .login-floating-bubble:nth-child(4) { top: 31%; left: 75%; width: 4px; height: 4px; }

        .login-mascot--nova {
            left: calc(50% - 55px) !important;
            bottom: 2px;
            width: 110px;
            height: 132px;
            z-index: 2;
            filter: drop-shadow(0 12px 12px color-mix(in srgb, var(--accent-primary) 24%, transparent));
        }

        .login-mascot--nova .mascot-body {
            width: 82px;
            height: 91px;
            padding: 10px;
            z-index: 1;
            box-sizing: border-box;
            border-radius: 31px 31px 25px 25px;
            background: linear-gradient(155deg, var(--accent-primary), var(--accent-secondary));
            box-shadow:
                inset 5px 5px 12px rgba(255, 255, 255, 0.2),
                inset -6px -7px 14px rgba(0, 0, 0, 0.23),
                0 8px 14px rgba(0, 0, 0, 0.18);
        }

        .login-mascot--nova .mascot-body::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 14px;
            width: 27px;
            height: 9px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(-18deg);
            pointer-events: none;
        }

        .login-mascot--nova .mascot-face {
            width: 100%;
            height: 40px;
            border-radius: 17px 17px 21px 21px;
            background: color-mix(in srgb, var(--bg-primary) 86%, white);
            box-shadow:
                inset 3px 3px 7px rgba(0, 0, 0, 0.14),
                0 2px 0 rgba(255, 255, 255, 0.12);
        }

        .login-mascot--nova .mascot-eye {
            width: 15px;
            height: 17px;
            background: color-mix(in srgb, var(--accent-primary) 12%, #0f172a);
        }

        .login-mascot--nova .mascot-pupil {
            width: 7px;
            height: 8px;
            background: var(--accent-primary);
            box-shadow: 0 0 7px color-mix(in srgb, var(--accent-primary) 72%, transparent);
        }

        .login-mascot--nova .mascot-eyelid {
            background: linear-gradient(180deg, var(--bg-primary), color-mix(in srgb, var(--accent-primary) 18%, var(--bg-primary)));
        }

        .mascot-ear {
            position: absolute;
            top: 24px;
            width: 27px;
            height: 31px;
            border-radius: 13px 13px 8px 8px;
            background: linear-gradient(145deg, color-mix(in srgb, var(--accent-primary) 86%, white), var(--accent-secondary));
            box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.24), 0 5px 8px rgba(0, 0, 0, 0.16);
            z-index: 0;
        }

        .mascot-ear::after {
            content: '';
            position: absolute;
            inset: 7px 8px 6px;
            border-radius: inherit;
            background: color-mix(in srgb, var(--accent-primary) 40%, transparent);
        }

        .mascot-ear--left {
            left: 7px;
            transform: rotate(-24deg);
        }

        .mascot-ear--right {
            right: 7px;
            transform: rotate(24deg);
        }

        .mascot-antenna {
            position: absolute;
            top: 3px;
            left: 50%;
            width: 3px;
            height: 25px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--accent-primary) 72%, white);
            transform: translateX(-50%) rotate(8deg);
            transform-origin: bottom center;
            z-index: 3;
        }

        .mascot-antenna > span {
            position: absolute;
            top: -5px;
            left: 50%;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--accent-primary);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent), 0 0 12px var(--accent-primary);
            transform: translateX(-50%);
            animation: novaSignal 2.4s ease-in-out infinite;
        }

        .mascot-cheek {
            position: absolute;
            bottom: 8px;
            width: 8px;
            height: 4px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--accent-primary) 42%, #ff6b8a);
            opacity: 0.75;
        }

        .mascot-cheek--left { left: 8px; }
        .mascot-cheek--right { right: 8px; }

        .mascot-badge {
            position: absolute;
            right: 4px;
            bottom: 17px;
            width: 21px;
            height: 21px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: var(--accent-primary);
            background: var(--bg-primary);
            box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.22), -2px -2px 5px rgba(255, 255, 255, 0.2);
            z-index: 5;
        }

        .mascot-badge i {
            font-size: 0.62rem;
            animation: novaBadge 3.2s ease-in-out infinite;
        }

        .login-mascot--nova .mascot-base {
            left: 12px;
            right: 12px;
            bottom: -5px;
            height: 7px;
            opacity: 0.55;
        }

        @keyframes novaSignal {
            0%, 100% { transform: translateX(-50%) scale(0.82); opacity: 0.68; }
            50% { transform: translateX(-50%) scale(1.12); opacity: 1; }
        }

        @keyframes novaBadge {
            0%, 100% { transform: rotate(-8deg) scale(0.9); }
            50% { transform: rotate(12deg) scale(1.08); }
        }

        @keyframes novaParticle {
            0%, 100% { opacity: 0.35; transform: translateY(0) scale(0.8); }
            50% { opacity: 1; transform: translateY(-8px) scale(1); }
        }

        @media (prefers-reduced-motion: reduce) {
            .mascot-antenna > span,
            .mascot-badge i,
            .login-floating-bubble {
                animation: none !important;
            }
        }

        /* Yeni kompozisyon: renkli karşılama paneli + sade form paneli. */
        @media (min-width: 768px) {
            .login-modal {
                max-width: 720px;
                grid-template-columns: 300px minmax(0, 1fr);
                gap: 8px;
                padding: 8px;
                border-radius: 30px;
                background: color-mix(in srgb, var(--bg-primary) 94%, var(--accent-primary));
                box-shadow:
                    24px 28px 70px rgba(0, 0, 0, 0.34),
                    -12px -12px 34px color-mix(in srgb, var(--shadow-light) 70%, transparent);
            }

            .login-modal-header {
                min-height: 370px;
                padding: 1.6rem 1.45rem 1.1rem;
                align-items: flex-start;
                text-align: left;
                border-radius: 23px;
                overflow: hidden;
                background:
                    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.2), transparent 30%),
                    linear-gradient(155deg, var(--accent-primary), var(--accent-secondary));
                box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.24);
            }

            .login-modal-header::after {
                content: '';
                position: absolute;
                inset: auto -25% -38% 28%;
                height: 220px;
                border-radius: 50%;
                border: 1px solid rgba(255, 255, 255, 0.22);
                box-shadow:
                    0 0 0 18px rgba(255, 255, 255, 0.05),
                    0 0 0 36px rgba(255, 255, 255, 0.035);
                transform: rotate(-14deg);
                pointer-events: none;
            }

            .login-header-pattern {
                opacity: 0.55;
            }

            .login-logo {
                width: 42px;
                height: 42px;
                margin: 0 0 1.15rem;
                border-radius: 14px;
                background: rgba(255, 255, 255, 0.18);
                box-shadow: inset 2px 2px 6px rgba(255, 255, 255, 0.18), 5px 8px 16px rgba(0, 0, 0, 0.16);
                animation: none;
            }

            .login-logo i {
                font-size: 1.15rem;
                animation: none;
            }

            .login-modal-title {
                width: 100%;
                max-width: 100%;
                overflow: hidden;
                color: #fff;
                font-size: 1.1rem;
                line-height: 1.25;
                letter-spacing: 0;
                white-space: nowrap;
                text-overflow: clip;
                background: none;
                -webkit-text-fill-color: #fff;
                animation: none;
            }

            .login-modal-subtitle {
                margin: 0.35rem 0 0;
                color: rgba(255, 255, 255, 0.76);
                font-size: 0.78rem;
                animation: none;
            }

            .login-character-stage {
                width: 100%;
                height: 188px;
                margin: auto 0 0;
                border: 1px solid rgba(255, 255, 255, 0.17);
                background: rgba(10, 15, 30, 0.12);
                box-shadow: inset 0 10px 24px rgba(0, 0, 0, 0.12);
                backdrop-filter: blur(3px);
            }

            .login-modal-body {
                min-width: 0;
                border-radius: 23px;
                padding: 2rem 2.1rem;
                background: var(--bg-primary);
                align-items: center;
            }

            .login-modal-body form {
                width: 100%;
            }

            .login-form-group {
                margin-bottom: 1.15rem;
            }

            .login-form-label {
                margin-bottom: 0.5rem;
                font-size: 0.82rem;
            }

            .login-input-wrapper {
                border-radius: 13px;
                background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-primary));
                border: 1px solid color-mix(in srgb, var(--accent-primary) 16%, transparent);
            }

            .login-input-wrapper::before {
                display: none;
            }

            .login-form-input {
                box-sizing: border-box;
                padding: 0.85rem 0.95rem;
                border-radius: 12px;
                background: transparent;
                box-shadow: none;
                font-size: 0.92rem;
                animation: none;
            }

            .login-form-input:focus {
                transform: none;
                box-shadow: inset 0 0 0 1px var(--accent-primary);
                animation: none;
            }

            .login-actions-row {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 0.95rem;
            }

            .login-submit-btn,
            .login-actions-row .login-submit-btn,
            .login-actions-row .login-passkey-btn {
                width: 100%;
                padding: 0.85rem 1rem;
                border-radius: 12px;
                box-shadow: 0 9px 18px color-mix(in srgb, var(--accent-primary) 24%, transparent);
                animation: none;
            }

            .login-submit-btn::after {
                display: none;
            }

            .login-remember-me {
                order: 2;
            }
        }

        @media (max-width: 767.98px) {
            .login-modal {
                display: block;
                padding: 0;
                width: min(410px, calc(100% - 28px));
                border-radius: 25px;
            }

            .login-modal-header {
                min-height: 0;
                padding: 1.1rem 1.25rem 0.8rem;
                align-items: flex-start;
                text-align: left;
                border-radius: 25px 25px 0 0;
                background: linear-gradient(155deg, var(--accent-primary), var(--accent-secondary));
            }

            .login-logo {
                display: flex !important;
                width: 36px;
                height: 36px;
                margin: 0 0 0.65rem;
            }

            .login-logo i {
                font-size: 1rem;
            }

            .login-modal-title {
                display: block !important;
                width: 100%;
                font-size: 0.98rem;
                line-height: 1.25;
                white-space: nowrap;
                color: #fff;
                background: none;
                -webkit-text-fill-color: #fff;
                animation: none;
            }

            .login-modal-subtitle {
                display: block !important;
                margin: 0.25rem 0 0;
                color: rgba(255, 255, 255, 0.76);
                font-size: 0.72rem;
                animation: none;
            }

            .login-character-stage {
                height: 126px;
                margin: 0.8rem 0 0;
                border-color: rgba(255, 255, 255, 0.16);
                background: rgba(10, 15, 30, 0.12);
                box-shadow: inset 0 8px 18px rgba(0, 0, 0, 0.12);
            }

            .login-modal-body {
                padding: 1.2rem 1.25rem 1.35rem;
                border-radius: 0 0 25px 25px;
            }

            .login-form-input {
                box-sizing: border-box;
                padding: 0.78rem 0.9rem;
                animation: none;
            }

            .login-form-input:focus {
                transform: none;
                animation: none;
            }
        }

        /* Nova v2: daha büyük karakter, nötr neumorphic sahne ve hafif orbital hareket. */
        .login-input-icon,
        .login-input-wrapper:focus-within .login-input-icon {
            width: 1.1rem;
            height: 1.1rem;
            display: grid;
            place-items: center;
            font-size: 0.95rem !important;
            line-height: 1;
            transform: translateY(-50%) !important;
            transition: color 0.25s ease !important;
        }

        .login-character-stage {
            background: var(--bg-primary) !important;
            border-color: color-mix(in srgb, var(--shadow-dark) 28%, transparent) !important;
            box-shadow: var(--neu-shadow-inset) !important;
            backdrop-filter: none !important;
        }

        .login-character-stage .login-aurora {
            opacity: 0.35;
            background:
                radial-gradient(circle at 22% 24%, color-mix(in srgb, var(--accent-primary) 13%, transparent), transparent 30%),
                radial-gradient(circle at 78% 76%, color-mix(in srgb, var(--accent-secondary) 11%, transparent), transparent 32%);
        }

        .nova-orbit {
            position: absolute;
            left: 50%;
            top: 59%;
            width: 205px;
            height: 72px;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 42%, transparent);
            border-radius: 50%;
            pointer-events: none;
            opacity: 0.58;
            transform: translate(-50%, -50%) rotate(-13deg);
            animation: novaOrbit 18s linear infinite;
        }

        .nova-orbit--two {
            width: 174px;
            height: 58px;
            opacity: 0.34;
            transform: translate(-50%, -50%) rotate(34deg);
            animation-duration: 24s;
            animation-direction: reverse;
        }

        .nova-spark {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--accent-primary);
            box-shadow: 0 0 10px color-mix(in srgb, var(--accent-primary) 70%, transparent);
            pointer-events: none;
            animation: novaSpark 3.8s ease-in-out infinite;
        }

        .nova-spark--one { top: 22%; left: 28%; }
        .nova-spark--two { right: 25%; bottom: 23%; width: 4px; height: 4px; animation-delay: -1.7s; }

        .login-mascot--nova {
            left: calc(50% - 70px) !important;
            width: 140px;
            height: 170px;
            bottom: -2px;
        }

        .login-mascot--nova .mascot-body {
            width: 106px;
            height: 118px;
            padding: 12px;
            border-radius: 38px 38px 31px 31px;
        }

        .login-mascot--nova .mascot-face {
            height: 52px;
        }

        .login-mascot--nova .mascot-eye {
            width: 16px;
            height: 19px;
        }

        .login-mascot--nova .mascot-pupil {
            width: 7px;
            height: 8px;
        }

        .login-mascot--nova .mascot-hand {
            width: 38px;
            height: 46px;
            bottom: 13px;
        }

        .login-mascot--nova .mascot-hand.left { left: -10px; }
        .login-mascot--nova .mascot-hand.right { right: -10px; }

        .login-mascot--nova .mascot-ear {
            top: 26px;
            width: 32px;
            height: 36px;
        }

        .login-mascot--nova .mascot-ear--left { left: 4px; }
        .login-mascot--nova .mascot-ear--right { right: 4px; }

        .login-mascot--nova .mascot-antenna {
            height: 31px;
        }

        .login-mascot--nova .mascot-badge {
            right: 1px;
            bottom: 20px;
            width: 24px;
            height: 24px;
        }

        @keyframes novaOrbit {
            from { transform: translate(-50%, -50%) rotate(-13deg) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(-13deg) rotate(360deg); }
        }

        @keyframes novaSpark {
            0%, 100% { opacity: 0.22; transform: translateY(0) scale(0.75); }
            50% { opacity: 0.9; transform: translateY(-9px) scale(1.15); }
        }

        @media (min-width: 768px) {
            .login-character-stage {
                height: 214px;
            }
        }

        @media (max-width: 767.98px) {
            .login-character-stage {
                height: 148px;
            }

            .login-mascot--nova {
                left: calc(50% - 60px) !important;
                width: 120px;
                height: 146px;
            }

            .login-mascot--nova .mascot-body {
                width: 94px;
                height: 105px;
                padding: 11px;
            }

            .nova-orbit {
                width: 176px;
                height: 62px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .nova-orbit,
            .nova-spark {
                animation: none !important;
            }
        }

        /* Mini Nova: karakter küçülür, sahne nefes alır; yörünge ana görsel olur. */
        .login-character-stage::before {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 14px;
            width: 116px;
            height: 19px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--bg-primary) 72%, var(--accent-primary));
            box-shadow:
                var(--neu-shadow-inset),
                0 0 18px color-mix(in srgb, var(--accent-primary) 18%, transparent);
            transform: translateX(-50%);
            z-index: 1;
            pointer-events: none;
        }

        .nova-status {
            position: absolute;
            top: 12px;
            right: 13px;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.25rem 0.48rem;
            border-radius: 999px;
            color: var(--text-muted);
            background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
            box-shadow: var(--neu-shadow-sm);
            font-size: 0.52rem;
            font-weight: 800;
            letter-spacing: 0.13em;
            z-index: 6;
        }

        .nova-status i {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--accent-success);
            box-shadow: 0 0 7px var(--accent-success);
        }

        .login-mascot--nova {
            left: calc(50% - 50px) !important;
            width: 100px;
            height: 112px;
            bottom: 9px;
            filter: drop-shadow(0 9px 10px color-mix(in srgb, var(--accent-primary) 22%, transparent));
        }

        .login-mascot--nova .mascot-body {
            width: 68px;
            height: 76px;
            padding: 8px;
            border-radius: 27px 27px 21px 21px;
        }

        .login-mascot--nova .mascot-body::before {
            top: 7px;
            left: 11px;
            width: 20px;
            height: 6px;
        }

        .login-mascot--nova .mascot-face {
            width: calc(100% - 8px);
            margin-inline: auto;
            height: 34px;
            border-radius: 13px 13px 16px 16px;
            padding-inline: 7px;
            justify-content: center;
            gap: 4px;
            overflow: hidden;
        }

        .login-mascot--nova .mascot-eye {
            flex: 0 0 9px;
            width: 9px;
            height: 11px;
        }

        .login-mascot--nova .mascot-pupil {
            width: 4px;
            height: 5px;
        }

        .login-mascot--nova .mascot-hand {
            width: 26px;
            height: 31px;
            bottom: 8px;
            border-radius: 12px;
        }

        .login-mascot--nova .mascot-hand.left { left: -7px; }
        .login-mascot--nova .mascot-hand.right { right: -7px; }

        .login-mascot--nova .mascot-ear {
            top: 18px;
            width: 22px;
            height: 25px;
            border-radius: 10px 10px 6px 6px;
        }

        .login-mascot--nova .mascot-ear::after {
            inset: 5px 6px 5px;
        }

        .login-mascot--nova .mascot-ear--left { left: 6px; }
        .login-mascot--nova .mascot-ear--right { right: 6px; }

        .login-mascot--nova .mascot-antenna {
            height: 22px;
        }

        .login-mascot--nova .mascot-antenna > span {
            width: 7px;
            height: 7px;
        }

        .login-mascot--nova .mascot-cheek {
            bottom: 6px;
            width: 6px;
            height: 3px;
        }

        .login-mascot--nova .mascot-cheek--left { left: 6px; }
        .login-mascot--nova .mascot-cheek--right { right: 6px; }

        .login-mascot--nova .mascot-badge {
            right: -1px;
            bottom: 13px;
            width: 17px;
            height: 17px;
        }

        .login-mascot--nova .mascot-badge i {
            font-size: 0.48rem;
        }

        .login-mascot--nova .mascot-base {
            left: 9px;
            right: 9px;
            bottom: -4px;
            height: 5px;
        }

        .login-mascot--nova .mascot-eye {
            background: #fff;
            border: 1px solid color-mix(in srgb, var(--shadow-dark) 18%, transparent);
            box-shadow:
                inset 1px 1px 2px rgba(255, 255, 255, 0.9),
                0 2px 5px rgba(15, 23, 42, 0.16);
        }

        .login-mascot--nova .mascot-pupil {
            background: #17233e;
            box-shadow: none;
        }

        .login-mascot--nova .mascot-eye::after {
            background: rgba(255, 255, 255, 0.95);
        }

        .login-mascot--nova .mascot-eyelid {
            background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--bg-primary) 82%, white));
        }

        .login-character-stage.eye-closed .login-mascot--nova .mascot-hand.left {
            transform: translate(7px, -2px) rotate(-6deg);
        }

        .login-character-stage.eye-closed .login-mascot--nova .mascot-hand.right {
            transform: translate(-7px, -2px) rotate(6deg);
        }

        @media (max-width: 767.98px) {
            .login-mascot--nova {
                left: calc(50% - 45px) !important;
                width: 90px;
                height: 100px;
                bottom: 8px;
            }

            .login-mascot--nova .mascot-body {
                width: 61px;
                height: 68px;
                padding: 7px;
            }

            .login-character-stage::before {
                width: 100px;
                bottom: 11px;
            }

            .nova-status {
                top: 9px;
                right: 9px;
                font-size: 0.46rem;
            }
        }

        /* Final login layout: masaüstünde yatay, telefonda dikey ve düşük maliyetli. */
        .login-modal-overlay {
            background: rgba(9, 14, 28, 0.62);
            backdrop-filter: none;
            transition: opacity 0.2s ease;
        }

        .login-modal {
            width: min(760px, calc(100% - 32px));
            max-width: 760px;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 16%, transparent);
            border-radius: 26px;
            box-shadow:
                18px 22px 48px rgba(0, 0, 0, 0.28),
                -10px -10px 28px color-mix(in srgb, var(--shadow-light) 72%, transparent);
            background: var(--bg-primary);
            transform: translateY(12px) scale(0.985);
            transition: transform 0.22s ease;
        }

        .login-modal-overlay.active .login-modal {
            transform: translateY(0) scale(1);
        }

        .login-modal::before {
            background:
                linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 6%, transparent), transparent 40%);
            opacity: 1;
        }

        .login-modal::after {
            display: none;
        }

        .login-modal-header {
            min-width: 0;
        }

        .login-header-pattern,
        .login-header-pattern span,
        .login-logo,
        .login-logo i,
        .login-modal-title,
        .login-modal-subtitle,
        .login-character-stage .login-aurora,
        .login-floating-bubble,
        .nova-orbit,
        .nova-spark,
        .nova-status i,
        .mascot-antenna > span,
        .mascot-badge i,
        .login-submit-btn,
        .login-input-wrapper::before {
            animation: none !important;
        }

        .login-header-pattern,
        .login-floating-bubble,
        .nova-orbit,
        .nova-spark,
        .nova-status {
            display: none !important;
        }

        .login-character-stage {
            backdrop-filter: none !important;
            background:
                radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--accent-primary) 10%, transparent), transparent 38%),
                var(--bg-primary) !important;
            border: 1px solid color-mix(in srgb, var(--shadow-dark) 16%, transparent);
            box-shadow: var(--neu-shadow-inset) !important;
        }

        .login-character-stage::before {
            width: 96px;
            height: 14px;
            bottom: 12px;
            background: color-mix(in srgb, var(--bg-primary) 85%, var(--accent-primary));
            box-shadow: var(--neu-shadow-inset);
        }

        .login-form-group,
        .login-form-input,
        .login-submit-btn,
        .login-modal-close {
            transition-duration: 0.16s;
        }

        .login-form-group:focus-within {
            transform: none;
        }

        .login-form-input {
            animation: none !important;
        }

        .login-form-input:focus {
            transform: none;
            animation: none !important;
            box-shadow:
                inset 5px 5px 10px var(--shadow-dark),
                inset -5px -5px 10px var(--shadow-light),
                0 0 0 2px color-mix(in srgb, var(--accent-primary) 20%, transparent);
        }

        .login-submit-btn {
            box-shadow: 7px 7px 14px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
        }

        .login-submit-btn::after {
            display: none;
        }

        @media (min-width: 768px) {
            .login-modal {
                display: grid;
                grid-template-columns: minmax(270px, 0.82fr) minmax(360px, 1.18fr);
                gap: 0;
                padding: 0;
                overflow: hidden;
            }

            .login-modal-header {
                position: static !important;
                min-height: 360px;
                padding: 1.5rem 1.4rem 1.25rem;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                text-align: left;
                background:
                    linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 8%, var(--bg-primary)), var(--bg-primary));
                border-right: 1px solid color-mix(in srgb, var(--shadow-dark) 13%, transparent);
            }

            .login-modal-header::after {
                display: none;
            }

            .login-logo {
                width: 42px;
                height: 42px;
                margin: 0.2rem 0 0.9rem;
                border-radius: 14px;
                background: linear-gradient(145deg, var(--accent-primary), var(--accent-secondary));
                box-shadow: 7px 8px 15px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
            }

            .login-logo i {
                font-size: 1.15rem;
            }

            .login-modal-title {
                width: 100%;
                color: var(--text-primary);
                font-size: 1.28rem;
                line-height: 1.2;
                white-space: normal;
                background: none;
                -webkit-text-fill-color: currentColor;
            }

            .login-modal-subtitle {
                margin: 0.35rem 0 0;
                color: var(--text-secondary);
                font-size: 0.78rem;
            }

            .login-character-stage {
                width: 100%;
                height: 172px;
                margin: auto 0 0;
                border-radius: 19px;
            }

            .login-modal-body {
                min-width: 0;
                display: flex;
                align-items: center;
                padding: 2.1rem 2.2rem;
                background: var(--bg-primary);
            }

            .login-modal-body form {
                width: 100%;
            }

            .login-form-group {
                margin-bottom: 1.1rem;
            }

            .login-form-label {
                margin-bottom: 0.45rem;
                font-size: 0.84rem;
            }

            .login-input-wrapper {
                border-radius: 13px;
            }

            .login-form-input {
                box-sizing: border-box;
                padding: 0.82rem 0.95rem;
                border-radius: 12px;
                font-size: 0.92rem;
            }

            .login-actions-row {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: 0.75rem;
            }

            .login-remember-me .neu-checkbox-label {
                margin-bottom: 0 !important;
            }

            .login-actions-row .login-submit-btn,
            .login-actions-row .login-passkey-btn {
                width: auto;
                flex: 0 0 auto;
                padding: 0.78rem 1rem;
                font-size: 0.9rem;
            }
        }

        @media (max-width: 767.98px) {
            .login-modal {
                display: block;
                width: min(410px, calc(100% - 24px));
                border-radius: 23px;
            }

            .login-modal-header {
                position: relative !important;
                min-height: 0;
                padding: 1.25rem 1.2rem 1rem;
                text-align: left;
                background:
                    linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 8%, var(--bg-primary)), var(--bg-primary));
                border-bottom: 1px solid color-mix(in srgb, var(--shadow-dark) 13%, transparent);
            }

            .login-logo {
                width: 38px;
                height: 38px;
                margin: 0.35rem 0 0.65rem;
                border-radius: 12px;
            }

            .login-logo i {
                font-size: 1rem;
            }

            .login-modal-title {
                display: block !important;
                width: 100%;
                font-size: 1.08rem;
                line-height: 1.25;
                white-space: normal;
                color: var(--text-primary);
                background: none;
                -webkit-text-fill-color: currentColor;
            }

            .login-modal-subtitle {
                display: block !important;
                margin: 0.25rem 0 0;
                color: var(--text-secondary);
                font-size: 0.74rem;
            }

            .login-character-stage {
                height: 126px;
                margin: 0.85rem 0 0;
                border-radius: 17px;
            }

            .login-modal-body {
                padding: 1.25rem 1.2rem 1.35rem;
                border-radius: 0 0 23px 23px;
            }

            .login-form-group {
                margin-bottom: 1rem;
            }

            .login-form-input {
                box-sizing: border-box;
                padding: 0.78rem 0.9rem;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .login-modal-overlay,
            .login-modal,
            .login-modal * {
                transition: none !important;
                animation: none !important;
            }
        }

        /* Nova polish: daha dengeli yüz, gövdeye yakın eller ve okunaklı ifade. */
        .login-mascot--nova {
            left: calc(50% - 63px) !important;
            width: 126px;
            height: 138px;
            bottom: 6px;
        }

        .login-mascot--nova .mascot-body {
            width: 88px;
            height: 96px;
            padding: 11px;
            border-radius: 33px 33px 26px 26px;
        }

        .login-mascot--nova .mascot-face {
            width: calc(100% - 10px);
            height: 42px;
            padding-inline: 8px;
            gap: 9px;
            border-radius: 15px 15px 18px 18px;
        }

        .login-mascot--nova .mascot-face::before {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 5px;
            width: 10px;
            height: 4px;
            border-bottom: 2px solid color-mix(in srgb, var(--accent-primary) 48%, #475569);
            border-radius: 0 0 10px 10px;
            transform: translateX(-50%);
            opacity: 0.7;
            pointer-events: none;
        }

        .login-mascot--nova .mascot-eye {
            flex-basis: 13px;
            width: 13px;
            height: 15px;
        }

        .login-mascot--nova .mascot-pupil {
            width: 5px;
            height: 6px;
        }

        .login-mascot--nova .mascot-hand {
            width: 27px;
            height: 32px;
            bottom: 7px;
        }

        .login-mascot--nova .mascot-hand.left { left: -6px; }
        .login-mascot--nova .mascot-hand.right { right: -6px; }

        .login-mascot--nova .mascot-ear {
            top: 19px;
            width: 26px;
            height: 29px;
        }

        .login-mascot--nova .mascot-antenna {
            top: 10px;
            height: 31px;
        }

        @media (min-width: 768px) {
            .login-modal-close {
                top: 1.25rem !important;
                right: 1.25rem !important;
                left: auto !important;
                inset-inline-start: auto !important;
                inset-inline-end: 1.25rem !important;
            }
        }

        @media (max-width: 767.98px) {
            .login-modal-header {
                display: grid;
                grid-template-columns: 42px minmax(0, 1fr);
                grid-template-areas:
                    "logo title"
                    "logo subtitle"
                    "stage stage";
                column-gap: 0.8rem;
                row-gap: 0;
                align-items: start;
                padding: 1.1rem 1.2rem 1rem;
            }

            .login-mascot--nova {
                left: calc(50% - 59px) !important;
                width: 118px;
                height: 130px;
            }

            .login-mascot--nova .mascot-body {
                width: 82px;
                height: 89px;
                padding: 10px;
            }

            .login-mascot--nova .mascot-face {
                height: 38px;
                gap: 7px;
            }

            .login-mascot--nova .mascot-antenna {
                top: 10px;
                height: 31px;
            }

            .login-logo {
                grid-area: logo;
                margin: 0.2rem 0 0 !important;
            }

            .login-modal-title {
                grid-area: title;
                margin: 0.15rem 0 0 !important;
            }

            .login-modal-subtitle {
                grid-area: subtitle;
                margin: 0.3rem 0 0 !important;
            }

            .login-character-stage {
                grid-area: stage;
                height: 170px;
                margin: 0.9rem 0 0;
            }
        }