/* =========================== Auth (Login) – Vizora =========================== */ /* 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; } @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; } 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%; } body { margin: 0; color: var(--text); /*font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";*/ 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; } @media (prefers-color-scheme: dark) { .auth-root::before { background-image: var(--bg-image-dark); } } html[data-theme="dark"] .auth-root::before { background-image: var(--bg-image-dark); } 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; } @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); } .auth-head { margin-bottom: 12px; } .auth-title { margin: 0 0 4px 0; font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: 0.2px; } .auth-subtitle { margin: 0; color: var(--muted); font-size: 0.95rem; } /* Camımsı kart */ .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-row { margin-bottom: 14px; } .form-row-inline { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .form-label { display: block; font-weight: 600; margin-bottom: 6px; } .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; } @media (prefers-color-scheme: dark) { .form-input { background: rgba(2,6,23,0.46); color: var(--text); } } .form-input:focus { border-color: #60a5fa; /* sky-400 */ box-shadow: 0 0 0 3px rgba(96,165,250,0.35); } .form-hint { display: block; margin-top: 6px; font-size: .85rem; color: var(--muted); } /* Checkbox + inline linkler */ .checkbox { display: inline-flex; align-items: center; gap: 8px; user-select: none; cursor: pointer; color: var(--text); } .links-inline a { text-decoration: none; } .links-inline a:hover { text-decoration: underline; } /* Butonlar */ .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; } .btn-primary:hover { filter: brightness(1.04); } .btn-primary:active { transform: translateY(1px); } .form-actions { margin-top: 10px; } .auth-links { margin-top: 12px; text-align: center; font-size: .95rem; } .auth-links .sep { margin: 0 6px; color: var(--muted); } .auth-links a { text-decoration: none; } .auth-links a:hover { text-decoration: underline; } /* Harici sağlayıcılar */ .ext-logins { margin-top: 16px; text-align: center; color: var(--muted); } .ext-list { list-style: none; padding: 8px 0 0 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; } .btn-ext { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,0.6); cursor: pointer; } @media (prefers-color-scheme: dark) { .btn-ext { background: rgba(2,6,23,0.4); color: var(--text); } } /* Hata özetleri ve alan hataları */ .validation-summary { margin: 0 0 8px 0; color: #b91c1c; /* red-700 */ } .field-error { display: block; margin-top: 6px; font-size: .9rem; color: #dc2626; /* red-600 */ } /* Alt not */ .auth-foot { margin-top: 12px; color: var(--muted); font-size: .85rem; } /* Responsive: küçük ekranlarda tek sütun */ @media (max-width: 900px) { .auth-root { grid-template-columns: 1fr; } .auth-card { padding: 18px; } .auth-root::after { /* glow'ı daha merkezde tutalım */ 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%); } } /* ===== Center tweak: kartı kenardan ortaya al ===== */ .auth-root { padding-inline: clamp(16px, 3vw, 32px); /* güvenli iç boşluk */ } /* 1200px+ ekranlarda üç kolonlu düzen: [brand] [card] [boşluk] */ @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; } .auth-brand { grid-column: 1; } .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; } }