/* ============================================================ ANOTHERSOFT — auth.css Giriş / Kayıt / Şifre / Doğrulama ekranlarına özel stiller. Navbar, footer ve genel tema değişkenleri /assets/common.css içinden gelir (bu dosya onları tekrar tanımlamaz). Bu dosya yalnızca auth sayfalarında yüklendiği için body üzerindeki "sticky footer" kuralları diğer sayfaları etkilemez. ============================================================ */ :root { --auth-navy: #0F172A; --auth-text-secondary: #475569; --auth-text-muted: #64748B; --auth-blue: #2563EB; --auth-blue-hover: #1D4ED8; --auth-cyan: #06B6D4; --auth-card: #FFFFFF; --auth-border: #E2E8F0; --auth-error: #DC2626; --auth-error-bg: rgba(220, 38, 38, 0.06); --auth-success: #10B981; --auth-success-text: #047857; --auth-success-bg: rgba(16, 185, 129, 0.08); --auth-radius: 18px; --auth-transition: 0.2s ease; } /* Sayfa geçişleri için tarayıcı-yerel View Transitions (yalnızca destekleyen tarayıcılarda çalışır; desteklemeyenlerde bu kural sessizce yok sayılır ve normal sayfa geçişi olduğu gibi devam eder — ekstra JS/framework gerekmez). */ @view-transition { navigation: auto; } /* ===== GİRİŞ ANİMASYONLARI (yalnızca CSS, JS bağımlılığı yok) ===== */ @keyframes authFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes authCardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes authSpin { to { transform: rotate(360deg); } } /* ===== SAYFA İSKELETİ ===== Site genelinde navbar sabit (position:fixed) olduğu için içerik üstten pay bırakır. Footer'ın kısa sayfalarda ekranın altına yapışması için body flex-column + min-height:100vh, ana içerik ise flex:1 kullanır — sabit bir yükseklik/overflow:hidden yok, içerik uzarsa sayfa normal şekilde kayar. Bare "body" seçici KULLANILMAZ: normal sayfalar bu dosyayı hiç yüklemez ama yine de kural yalnızca auth öğesini hedeflesin diye class ile sınırlandırıldı. */ body.auth-body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .auth-shell { /* align-items:flex-start (dikey ortalama DEĞİL) kasıtlı: navbar-form boşluğu yalnızca padding-top ile belirlensin, viewport yüksekliğine göre değişen flex ortalama matematiğine bağlı kalmasın. */ flex: 1 0 auto; display: flex; align-items: flex-start; justify-content: center; padding: 140px 20px 64px; } .auth-container { width: 100%; display: flex; justify-content: center; } .auth-card { position: relative; width: 100%; max-width: 480px; background: var(--auth-card); border: 1px solid var(--auth-border); border-radius: var(--auth-radius); padding: clamp(28px, 4vw, 40px); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.06), 0 24px 56px -20px rgba(37, 99, 235, 0.14); animation: authCardIn 0.4s ease both; overflow: hidden; } .auth-card::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, var(--auth-blue), var(--auth-cyan), transparent); opacity: 0.8; } .auth-card-title { font-family: 'Space Grotesk', sans-serif; font-size: 23px; font-weight: 700; color: var(--auth-navy); margin: 0 0 6px; } .auth-card-desc { font-size: 13.5px; color: var(--auth-text-muted); margin: 0 0 20px; line-height: 1.5; } /* Kart başında sade durum ikonu (kilit, e-posta, başarı vb.) */ .auth-icon-badge { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(37, 99, 235, 0.08); color: var(--auth-blue); font-size: 17px; margin-bottom: 16px; animation: authFadeUp 0.4s ease both; } .auth-icon-badge--success { background: var(--auth-success-bg); color: var(--auth-success); } .auth-icon-badge--error { background: var(--auth-error-bg); color: var(--auth-error); } .auth-submit-link { text-decoration: none; } .auth-submit--outline { background: var(--auth-card); color: var(--auth-text-secondary); border: 1px solid var(--auth-border); box-shadow: none; } .auth-submit--outline:hover { background: #F8FAFC; border-color: #CBD5E1; box-shadow: none; } .auth-form-secondary { margin-top: 10px; } .auth-card > * { animation: authFadeUp 0.4s ease both; } .auth-card > *:nth-child(1) { animation-delay: 0.13s; } .auth-card > *:nth-child(2) { animation-delay: 0.17s; } .auth-card > *:nth-child(3) { animation-delay: 0.21s; } .auth-card > *:nth-child(4) { animation-delay: 0.25s; } .auth-card > *:nth-child(n+5) { animation-delay: 0.25s; } .auth-card > form > * { animation: authFadeUp 0.35s ease both; } .auth-card > form > *:nth-child(1) { animation-delay: 0.22s; } .auth-card > form > *:nth-child(2) { animation-delay: 0.26s; } .auth-card > form > *:nth-child(3) { animation-delay: 0.30s; } .auth-card > form > *:nth-child(4) { animation-delay: 0.34s; } .auth-card > form > *:nth-child(5) { animation-delay: 0.38s; } .auth-card > form > *:nth-child(n+6) { animation-delay: 0.4s; } /* ===== SOSYAL GİRİŞ ===== */ .auth-social-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .auth-social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--auth-transition), border-color var(--auth-transition), box-shadow var(--auth-transition), transform var(--auth-transition); text-decoration: none; } .auth-social-btn svg { flex-shrink: 0; transition: transform 0.2s ease; } .auth-social-btn:hover svg { transform: scale(1.08); } .auth-social-google { background: #fff; border: 1px solid var(--auth-border); color: #1F2937; } .auth-social-google:hover { border-color: #CBD5E1; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07); } .auth-social-apple { background: #000; border: 1px solid #000; color: #fff; } .auth-social-apple:hover { background: #1a1a1a; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } .auth-social-btn:active { transform: scale(0.99); } .auth-social-btn[disabled]:hover svg, .auth-social-btn[aria-disabled="true"]:hover svg { transform: none; } .auth-social-btn:focus-visible { outline: 2px solid var(--auth-blue); outline-offset: 2px; } .auth-social-btn[disabled], .auth-social-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .auth-social-btn.is-loading { opacity: 0.7; pointer-events: none; } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; font-size: 12.5px; color: var(--auth-text-muted); } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--auth-border); } .auth-status { display: flex; align-items: center; gap: 10px; background: var(--auth-success-bg); border: 1px solid rgba(16, 185, 129, 0.25); color: var(--auth-success-text); font-size: 13.5px; font-weight: 500; padding: 11px 14px; border-radius: 10px; margin-bottom: 18px; } .auth-status i { color: var(--auth-success); flex-shrink: 0; } .auth-status--error { background: var(--auth-error-bg); border-color: rgba(220, 38, 38, 0.25); color: var(--auth-error); } .auth-status--error i { color: var(--auth-error); } .auth-field { margin-bottom: 12px; } .auth-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--auth-navy); margin-bottom: 6px; transition: color var(--auth-transition); } .auth-field:focus-within .auth-label { color: var(--auth-blue); } .auth-input-wrap { position: relative; } .auth-input { width: 100%; padding: 10px 13px; font-size: 14.5px; font-family: inherit; color: var(--auth-navy); background: #fff; border: 1px solid var(--auth-border); border-radius: 9px; transition: border-color var(--auth-transition), box-shadow var(--auth-transition); } .auth-input::placeholder { color: #94A3B8; } .auth-input:focus { outline: none; border-color: var(--auth-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .auth-input[aria-invalid="true"] { border-color: var(--auth-error); } .auth-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--auth-error-bg); } .auth-input-wrap.has-toggle .auth-input { padding-right: 42px; } /* Tarayıcı autofill sarısını ez, okunabilirliği koru */ .auth-input:-webkit-autofill, .auth-input:-webkit-autofill:hover, .auth-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--auth-navy); -webkit-box-shadow: 0 0 0 1000px #fff inset; transition: background-color 9999s ease-in-out 0s; } .auth-toggle-password { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 7px; color: var(--auth-text-muted); cursor: pointer; transition: color var(--auth-transition), background var(--auth-transition); } .auth-toggle-password:hover { color: var(--auth-navy); background: rgba(15, 23, 42, 0.05); } .auth-toggle-password:active { transform: translateY(-50%) scale(0.92); } .auth-toggle-password:focus-visible, .auth-input:focus-visible, .auth-submit:focus-visible, .auth-checkbox input:focus-visible, a.auth-link:focus-visible { outline: 2px solid var(--auth-blue); outline-offset: 2px; } .auth-error-msg { display: flex; align-items: flex-start; gap: 6px; color: var(--auth-error); font-size: 12.5px; margin-top: 6px; line-height: 1.5; } .auth-error-msg i { margin-top: 2px; flex-shrink: 0; } .auth-remember-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .auth-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--auth-text-secondary); cursor: pointer; } .auth-checkbox input { width: 16px; height: 16px; accent-color: var(--auth-blue); cursor: pointer; } .auth-link { font-size: 13.5px; font-weight: 500; color: var(--auth-blue); } .auth-link:hover { text-decoration: underline; } .auth-submit { position: relative; width: 100%; padding: 12px; background: linear-gradient(135deg, var(--auth-blue), #2f6ff2); color: #fff; border: none; border-radius: 9px; font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22); transition: background var(--auth-transition), transform 0.2s ease, box-shadow 0.2s ease, opacity var(--auth-transition); display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .auth-submit:hover { background: linear-gradient(135deg, var(--auth-blue-hover), var(--auth-blue)); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28); } .auth-submit:active { transform: translateY(0) scale(0.99); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22); } .auth-submit[disabled] { cursor: not-allowed; opacity: 0.85; transform: none; } .auth-submit[disabled]:hover { transform: none; } .auth-spinner { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: authSpin 0.6s linear infinite; flex-shrink: 0; } .auth-switch { text-align: center; font-size: 13.5px; color: var(--auth-text-muted); margin-top: 18px; } .auth-legal { font-size: 11.5px; color: #94A3B8; text-align: center; line-height: 1.6; margin-top: 14px; } .auth-legal a { color: var(--auth-text-muted); text-decoration: underline; } /* ===== RESPONSIVE ===== */ @media (max-width: 900px) { .auth-shell { padding: 138px 16px 48px; } /* Dokunma alanı >= 44px */ .auth-input { min-height: 44px; font-size: 16px; padding: 11px 13px; } .auth-submit { min-height: 44px; padding: 13px; } .auth-toggle-password { width: 44px; height: 44px; } .auth-checkbox input { width: 20px; height: 20px; } } @media (max-width: 767px) { /* mobile.css'in kendi navbar yükseklik geçişiyle aynı eşik (<=767px); navbar bu genişlikte ~66px (bkz. common.css .nav-container{min-height:66px}) */ .auth-shell { padding-top: 120px; } } @media (max-width: 480px) { .auth-social-btn { height: 48px; } } @media (max-width: 380px) { .auth-card { padding: 24px 18px; } .auth-card-title { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { body * { transition: none !important; animation: none !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }