/* Giriş ve Kayıt Sayfaları CSS */
body {
    font-family: 'Inter', sans-serif;
}

.logo-font {
    font-family: 'Pacifico', serif;
}

.auth-bg {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #f3e8ff 100%);
    min-height: 100vh;
}

.auth-card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.form-input {
    transition: all 0.3s ease;
    border: 2px solid #e5e7eb;
}

.form-input:focus {
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
    outline: none;
}

.form-input.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-input.success {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.gender-btn {
    transition: all 0.3s ease;
    border: 2px solid #e5e7eb;
    background: white;
}

.gender-btn:hover {
    border-color: #ec4899;
    background: #fdf2f8;
}

.gender-btn.selected {
    border-color: #ec4899;
    background: #ec4899;
    color: white;
}

.step-indicator {
    transition: all 0.3s ease;
}

.step-indicator.active {
    background: #ec4899;
    color: white;
}

.step-indicator.completed {
    background: #10b981;
    color: white;
}

.step-line {
    transition: all 0.3s ease;
}

.step-line.completed {
    background: #10b981;
}

.password-strength {
    height: 4px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.password-strength.weak {
    background: #ef4444;
    width: 33%;
}

.password-strength.medium {
    background: #f59e0b;
    width: 66%;
}

.password-strength.strong {
    background: #10b981;
    width: 100%;
}

.checkbox-custom {
    appearance: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid #d1d5db;
    border-radius: 0.25rem;
    background: white;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkbox-custom:checked {
    background: #ec4899;
    border-color: #ec4899;
}

.checkbox-custom:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

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

.slide-in {
    animation: slideIn 0.5s ease-out;
}

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

.slide-out {
    animation: slideOut 0.5s ease-out;
}

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

.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.success-message {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border: 1px solid #10b981;
    color: #065f46;
}

.error-message {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 1px solid #ef4444;
    color: #991b1b;
}

.info-message {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border: 1px solid #3b82f6;
    color: #1e40af;
}