.input-group label { position: absolute; left: 3rem; top: 0.9rem; color: var(--light-text); pointer-events: none; transition: all 0.2s ease-out; transform-origin: left top; background: transparent; /* Başlangıçta arka plan yok */ } .input-group input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); } .input-group input:focus ~ .icon { color: var(--primary-color); } #toggle-password { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--light-text); } #toggle-password:hover { color: var(--primary-color); } .login-options { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 1.5rem; font-size: 0.9rem; } .remember-me { display: flex; align-items: center; gap: 0.5rem; color: var(--light-text); } .remember-me input[type="checkbox"] { width: 1.1em; height: 1.1em; accent-color: var(--primary-color); } button[type="submit"] { width: 100%; padding: 1rem 0; border: none; border-radius: 0.75rem; background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%); color: white; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.25s ease-out; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2); position: relative; overflow: hidden; } button[type="submit"]:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3); } button[type="submit"].loading .button-text { opacity: 0; } button[type="submit"] .spinner { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none; } button[type="submit"].loading .spinner { display: block; } @keyframes spin { to { transform: rotate(360deg); } } /* Bildirim Stili */ .notification { position: fixed; top: 20px; left: 50%; transform: translate(-50%, -150%); padding: 1rem 1.5rem; border-radius: 0.75rem; color: #fff; display: flex; align-items: center; gap: 1rem; font-weight: 600; box-shadow: 0 5px 20px rgba(0,0,0,0.15); z-index: 10000; transition: transform 0.4s cubic-bezier(0.2, 1, 0.4, 1); max-width: 90vw; } .notification.show { transform: translate(-50%, 0); } .notification.success { background-color: var(--success-color); } .notification.error { background-color: var(--error-color); } @media (max-width: 480px) { .login-card { padding: 2rem 1.5rem; } .login-header h1 { font-size: 1.8rem; } }