/* auth.css */

/* 1. Google Fontları (Inter - Modern ve Okunaklı) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* Slate-50: Çok açık gri/mavi tonu */
    color: #1e293b; /* Slate-800: Koyu gri metin rengi */
    overflow-x: hidden; /* Yatay kaydırmayı engelle */
    min-height: 100vh;
}

/* 2. Arka Plan Filigran (Watermark) Ayarları */
.watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: clamp(4rem, 15vw, 10rem); /* Mobilde küçülen, masaüstünde büyüyen yazı */
    font-weight: 900;
    color: #007bff; /* WellMind360 Mavisi */
    opacity: 0.04; /* Çok silik (%4 görünürlük) */
    pointer-events: none; /* Tıklamaları engellemez, arkada kalır */
    z-index: 0; /* En arkada durur */
    white-space: nowrap;
    user-select: none; /* Seçilemez */
    letter-spacing: -2px;
}

/* 3. İlerleme Çubuğu Animasyonu (Profil Sayfası İçin) */
.progress-bar {
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.4); /* Hafif yeşil parlama */
}

/* 4. Form Konteynerleri için Giriş Animasyonu (Fade In Up) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bu class'ı form kapsayıcı div'lerine ekleyebilirsiniz */
.fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* 5. Buzlu Cam Efekti (Opsiyonel Modern Dokunuş) */
.glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1);
}

/* 6. Form Elemanları Özelleştirmesi */
input[type="radio"], input[type="checkbox"] {
    accent-color: #007bff; /* Tarayıcı varsayılan mavi rengini markaya uygun yap */
    cursor: pointer;
}

/* Hata mesajları veya uyarılar için */
.input-error {
    border-color: #ef4444 !important; /* Kırmızı */
    background-color: #fef2f2;
}