/* ╔════════════════════════════╗ */ /* ║ FILE: wwwroot/css/auth.css ║ */ /* ╚════════════════════════════╝ */ /* Görsel yolları ve tema değişkenleri */ :root { --bg-image-light: url("/img/bg-vizora-light-4k.png"); --bg-image-dark: url("/img/bg-vizora-dark-4k.png"); --text: #0f172a; /* slate-900 */ --muted: #475569; /* slate-600 */ --surface: rgba(255,255,255,0.22); --border: rgba(15, 23, 42, 0.12); --btn-bg: #4f46e5; --btn-text: #ffffff; } /* Otomatik tema: prefers-color-scheme desteği olan tarayıcılarda geçerli olur */ @media (prefers-color-scheme: dark) { :root { --text: #e5e7eb; /* slate-200 */ --muted: #94a3b8; /* slate-400 */ --surface: rgba(15, 23, 42, 0.42); --border: rgba(255,255,255,0.18); --btn-bg: #7c3aed; --btn-text: #ffffff; } } /* Manuel tema override: */ html[data-theme="dark"] { --text: #e5e7eb; --muted: #94a3b8; --surface: rgba(15, 23, 42, 0.42); --border: rgba(255,255,255,0.18); --btn-bg: #7c3aed; --btn-text: #ffffff; } /* Light tema override'u dark modda da geçerli olur, böylece kullanıcı tercihi her zaman öncelikli olur */ html[data-theme="light"] { --text: #0f172a; --muted: #475569; --surface: rgba(255,255,255,0.22); --border: rgba(15, 23, 42, 0.12); --btn-bg: #4f46e5; --btn-text: #ffffff; } /* Sayfa kökü */ html, body { height: 100%; } /* Temel tipografi ve renkler */ body { margin: 0; color: var(--text); line-height: 1.45; background: #0b1220; } /* Arka plan görselini sabitleyen katman: - Light/Dark otomatik geçiş + override destekli */ .auth-root { min-height: 100vh; position: relative; display: grid; grid-template-columns: 1fr min(520px, 40vw); gap: clamp(16px, 3vw, 32px); } /* Görsel: full-bleed */ .auth-root::before { content: ""; position: fixed; inset: 0; background-image: var(--bg-image-light); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -2; will-change: transform; } /* Dark modda farklı görsel */ @media (prefers-color-scheme: dark) { .auth-root::before { background-image: var(--bg-image-dark); } } /* Manuel tema override'ları otomatik tercihten üstün gelir */ html[data-theme="dark"] .auth-root::before { background-image: var(--bg-image-dark); } /* Light tema override'u dark modda da geçerli olur, böylece kullanıcı tercihi her zaman öncelikli olur */ html[data-theme="light"] .auth-root::before { background-image: var(--bg-image-light); } /* Sağ-orta glow (login kartını taşıyacak bölgeyi vurgular) */ .auth-root::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; /* Light için biraz daha açık vurgu */ background: radial-gradient(900px 520px at 72% 46%, rgba(255,255,255,0.25), transparent 60%), radial-gradient(1100px 640px at 70% 49%, rgba(79,70,229,0.20), transparent 65%); mix-blend-mode: screen; } /* Dark modda glow'u biraz daha belirgin yapalım */ @media (prefers-color-scheme: dark) { .auth-root::after { background: radial-gradient(900px 520px at 72% 46%, rgba(124,58,237,0.28), transparent 62%), radial-gradient(1100px 640px at 70% 49%, rgba(16,185,129,0.18), transparent 65%); mix-blend-mode: lighten; } } /* Sol blok – logo/başlık için sessiz alan */ .auth-brand { display: grid; align-content: center; padding: clamp(24px, 5vw, 64px); } /* Sağ blok – login kartı (glassmorphism) */ .auth-card { display: grid; align-content: center; padding: clamp(16px, 3vw, 24px); } /* Kart içeriği */ .auth-head { margin-bottom: 12px; } /* Başlık ve alt başlık */ .auth-title { margin: 0 0 4px 0; font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: 0.2px; } /* Alt başlık: daha küçük, daha hafif ve biraz aralıklı */ .auth-subtitle { margin: 0; color: var(--muted); font-size: 0.95rem; } /* Form alanları */ .auth-form { margin-top: 16px; padding: clamp(16px, 3vw, 24px); border-radius: 16px; background: var(--surface); backdrop-filter: saturate(1.15) blur(14px); -webkit-backdrop-filter: saturate(1.15) blur(14px); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08); } /* Form satırları: her biri bir label+input veya checkbox+label içerir */ .form-row { margin-bottom: 14px; } /* Bazı satırlar (örneğin checkbox+label) yan yana durabilir, bu yüzden inline versiyon da var */ .form-row-inline { display: flex; justify-content: space-between; align-items: center; gap: 12px; } /* Form etiketleri */ .form-label { display: block; font-weight: 600; margin-bottom: 6px; } /* Form girişleri */ .form-input { width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,0.68); padding: 12px 14px; font-size: 1rem; outline: none; } /* Dark modda girişlerin arka planını ve metin rengini uyarlayalım */ @media (prefers-color-scheme: dark) { .form-input { background: rgba(2,6,23,0.46); color: var(--text); } } /* Odak durumları: border ve hafif bir glow ile vurgulayalım */ .form-input:focus { border-color: #60a5fa; /* sky-400 */ box-shadow: 0 0 0 3px rgba(96,165,250,0.35); } /* Form ipuçları ve hata mesajları */ .form-hint { display: block; margin-top: 6px; font-size: .85rem; color: var(--muted); } /* Checkbox + label düzeni */ .checkbox { display: inline-flex; align-items: center; gap: 8px; user-select: none; cursor: pointer; color: var(--text); } /* Checkbox input'u gizleyelim, sadece görsel olarak göstermek istediğimiz kutu ve label kalacak */ .links-inline a { text-decoration: none; } /* Linkler: basit ve temiz, hover'da altı çizili */ .links-inline a:hover { text-decoration: underline; } /* Form eylem düğmeleri */ .btn-primary { width: 100%; padding: 12px 16px; border: 0; border-radius: 12px; background: linear-gradient(90deg, var(--btn-bg), #22d3ee); color: var(--btn-text); font-weight: 700; font-size: 1.02rem; cursor: pointer; transition: transform .04s ease, filter .2s ease; } /* Hover'da hafifçe parlatalım, aktifken de küçük bir hareketle basılı hissi verelim */ .btn-primary:hover { filter: brightness(1.04); } /* Aktif durum: düğmeye basılıyormuş hissi için hafifçe aşağı kaydıralım */ .btn-primary:active { transform: translateY(1px); } /* Form eylem düğmeleri ve diğer bağlantılar arasındaki boşluk */ .form-actions { margin-top: 10px; } /* Kayıt ol / Şifremi unuttum gibi bağlantılar */ .auth-links { margin-top: 12px; text-align: center; font-size: .95rem; } /* Aralarına bir ayırıcı ekleyelim */ .auth-links .sep { margin: 0 6px; color: var(--muted); } /* Linkler: basit ve temiz, hover'da altı çizili */ .auth-links a { text-decoration: none; } /* Linkler: basit ve temiz, hover'da altı çizili */ .auth-links a:hover { text-decoration: underline; } /* Google/Facebook gibi üçüncü taraf oturum açma seçenekleri */ .ext-logins { margin-top: 16px; text-align: center; color: var(--muted); } /* Üçüncü taraf oturum açma düğmeleri: liste şeklinde, her biri tam genişlikte */ .ext-list { list-style: none; padding: 8px 0 0 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; } /* Her bir üçüncü taraf oturum açma düğmesi: basit, tam genişlikte, hafif şeffaf arka planlı */ .btn-ext { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,0.6); cursor: pointer; } /* Dark modda üçüncü taraf düğmelerinin arka planını ve metin rengini uyarlayalım */ @media (prefers-color-scheme: dark) { .btn-ext { background: rgba(2,6,23,0.4); color: var(--text); } } /* Doğrulama hataları */ .validation-summary { margin: 0 0 8px 0; color: #b91c1c; /* red-700 */ } /* Her bir alanın altındaki hata mesajları */ .field-error { display: block; margin-top: 6px; font-size: .9rem; color: #dc2626; /* red-600 */ } /* Formun altındaki genel bilgi mesajları (örneğin "Parolanızı mı unuttunuz?") */ .auth-foot { margin-top: 12px; color: var(--muted); font-size: .85rem; } /* ===== Responsive düzen: tek kolonlu düzen için geçiş */ @media (max-width: 900px) { .auth-root { grid-template-columns: 1fr; } /* Sol blok (logo/başlık) artık üstte, sağ blok (kart) altta */ .auth-card { padding: 18px; } /* Glow'u da daha geniş ve merkezde tutalım */ .auth-root::after { background: radial-gradient(720px 420px at 50% 38%, rgba(255,255,255,0.25), transparent 60%), radial-gradient(950px 520px at 50% 46%, rgba(79,70,229,0.20), transparent 65%); } } /* 900px-1200px arası: orta geçiş düzeni, hala tek kolon ama daha geniş iç boşluklarla */ .auth-root { padding-inline: clamp(16px, 3vw, 32px); } /* 1200px ve üzeri: iki kolonlu düzen, sol blok genişlerken sağ blok (kart) sabit kalır */ @media (min-width: 1200px) { .auth-root { max-width: 1600px; /* içerik genişliği sınırı */ margin-inline: auto; /* ortala */ grid-template-columns: 4fr min(520px, 36vw) 1fr; } /* Sol blok (logo/başlık) genişler, sağ blok (kart) sabit kalır ve ortalanır */ .auth-brand { grid-column: 1; } /* Sağ blok (kart) sabit kalır ve ortalanır */ .auth-card { grid-column: 2; justify-self: center; } /* Glow merkezini de biraz içeri al (light tema) */ .auth-root::after { background: radial-gradient(900px 520px at 62% 46%, rgba(255,255,255,0.25), transparent 60%), radial-gradient(1100px 640px at 60% 49%, rgba(79,70,229,0.20), transparent 65%); } } /* Dark temada aynı merkez güncellemesi */ @media (min-width: 1200px) and (prefers-color-scheme: dark) { .auth-root::after { background: radial-gradient(900px 520px at 62% 46%, rgba(124,58,237,0.28), transparent 62%), radial-gradient(1100px 640px at 60% 49%, rgba(16,185,129,0.18), transparent 65%); mix-blend-mode: lighten; } } /* Çok geniş ekranlar */ @media (min-width: 1600px) { .auth-root { max-width: 1800px; } } /* Tarayıcının kendi şifre göster/gizle ikonunu kaldır */ /* Edge, IE */ input::-ms-reveal { display: none !important; width: 0 !important; height: 0 !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Chrome, Opera, Yandex (Chromium tabanlı) */ input[type="password"]::-webkit-credentials-auto-fill-button, input[type="password"]::-webkit-strong-password-auto-fill-button, input[type="password"]::-webkit-textfield-decoration-container { display: none !important; visibility: hidden; } /* Safari — doğrudan CSS ile kapatılamaz, JS ile çözülür */ input[type="password"] { -webkit-text-security: disc; /* sadece type text'e geçince kullanılır */ }