/* ═══════════════════════════════════════════════════════════════════════════ KİMLİK EKRANLARI — giriş, kayıt, şifre, iki faktör ═══════════════════════════════════════════════════════════════════════════ KAPSAM. Her kural `body.page-auth` altında. Kanca, kullanıcı HENÜZ GİRİŞ YAPMAMIŞKEN gösterilen ekranlara verilir: giriş, iki faktör, kurtarma kodu ile giriş, e-posta OTP, şifremi unuttum ve onayı, şifre sıfırlama ve onayı, kayıt, kayıt başarılı, e-posta doğrulama sonuçları, erişim engellendi. Kamuya açık kart sayfası ve pazarlama sitesi almıyor. ALMAYANLAR — bilinçli. `/account/2fa/setup` ve `/account/2fa/recovery-codes` giriş YAPILMIŞ hâlde açılıyor ve panelin form bileşenlerini (`fs-card`, `fs-header`, `fs-body`, `fs-actions`) kullanıyor; onlar panel ekranı. Kanca ilk turda yanlışlıkla onlara da verilmişti — iki tasarım katmanı aynı sayfada çakışıyordu. Bir ekranın hangi katmana ait olduğunu adresi değil, KİME gösterildiği belirler. `/account/access-denied` ikisinde de görünebiliyor (403 alan kimlikli kullanıcı ya da anonim istek) ve giriş ekranıyla aynı markup'ı kullanıyor; kanca onda kalıyor. Giriş yapılmış hâlde panel.css bu dosyadan SONRA yüklendiği için eşit özgüllükte o kazanıyor — yükleme sırası kararı veriyor. NEDEN AYRI KATMAN. Denetimde kimlik yüzeyinin ÜÇ ayrı kabukta olduğu çıktı: `_Layout` + `page-login` (giriş, şifremi unuttum, 2FA, OTP, kurtarma), `_Layout` + sınıfsız (erişim engellendi, doğrulayıcı kurulumu, kurtarma kodları) ve `Layout = null` olan yedi sayfa (şifre sıfırlama zinciri, kayıt). Sonuncuların `` değeri SABİTTİ — yani yedi ekranın koyu teması hiç yoktu. Şifre sıfırlayan bir kullanıcıda kabuk iki kez değişiyordu: koyu giriş → açık onay → açık sıfırlama → koyu giriş. YÖN. Kapı ile odanın aynı boyada olması. Renk ve ölçek panelle aynı `design-tokens.css` dosyasından geliyor; buradaki iş yalnızca yerleşim ve bileşen. Vurgu rengi tek yerde: sayfanın birincil eylemi. YÜKLEME SIRASI. site.css → design-tokens.css → auth.css → utilities.css. ═══════════════════════════════════════════════════════════════════════════ */ body.page-auth { /* Kimlik ekranına özel tek ölçek: panelin başlık ölçeği 22px'te bitiyor çünkü orası yoğun bir arayüz. Bir giriş ekranının başlığı sayfanın tek cümlesi; kendi basamağı var. */ --fs-auth-hero: 1.75rem; /* 28px */ } /* ─────────────────────────────────────────────────────────────────────────── 1. ZEMİN ─────────────────────────────────────────────────────────────────────────── site.css `body`ye üç katmanlı radyal degrade + `body::before/::after` dokusu bindiriyor; kimlik ekranında bu, sayfanın yarısını pembe bir bulut yapıyordu (ölçüldü: `body` ve `body::after` üzerinde %12–20 vurgu yıkaması). Bir giriş ekranının işi tek bir formu öne çıkarmak; arkasındaki hareket dikkat çalıyor. ─────────────────────────────────────────────────────────────────────────── */ body.page-auth { background: var(--pnl-canvas); background-image: none; color: var(--pnl-text); font-size: var(--fs-md); line-height: var(--lh-snug); -webkit-font-smoothing: antialiased; } body.page-auth::before, body.page-auth::after { display: none; } body.page-auth .shell, body.page-auth .page-frame, body.page-auth .container { background: transparent; background-image: none; } /* Tek işi olan bir sayfa dikeyde ortalanır. Üstten yaslı hâlinde 1280×900'de içeriğin altında ekranın yarısı kadar boşluk kalıyordu (ölçüldü) — sayfa "yüklenmemiş" gibi duruyor. `min-height` ile: içerik uzarsa ortalama kendini bırakır, kısa formda ortada durur. */ body.page-auth .page-frame { display: flex; flex-direction: column; justify-content: center; min-height: calc(100dvh - 160px); } /* ─────────────────────────────────────────────────────────────────────────── 2. ÜST BAR — tek marka işareti ─────────────────────────────────────────────────────────────────────────── Panelde aynı logo iki kez basılıyordu ve düzeltilmişti; kimlik ekranında da öyleydi: üst barda marka bloğu, hero panelinde ikinci kez logo kutusu. Üst bardaki işaret kalıyor (sol üst, ana sayfaya bağlı — yerleşik yer); hero'daki kopya kaldırılıyor. ─────────────────────────────────────────────────────────────────────────── */ body.page-auth .global-brand-kicker { display: none; /* "DİJİTAL CARD PLATFORM" — marka adı zaten altında */ } body.page-auth .global-brand-mark { background: var(--pnl-surface-2); background-image: none; color: var(--pnl-text-2); box-shadow: none; } body.page-auth .brand-surface-logo, body.page-auth .hero-copy > .brand-mark { display: none; /* üst bardaki işaretin kopyası */ } /* Logo levhası. Yüklenen logo koyu renkli olabildiği için koyu temada arkasına açık bir levha konuyor — bu doğru; ama levha 110×52px'e kadar büyüyordu ve dar ekranda üst barın yarısını kaplayan beyaz bir kart gibi duruyordu (ölçüldü, 375px). Yükseklik sabitleniyor, levha logoyu sarmalıyor. */ /* Marka bloğu ana sayfaya giden tek bağlantı; logo 28px'e inince blok da 28px kaldı ve dokunma hedefinin altına düştü. Yükseklik ayrı veriliyor. */ body.page-auth .global-brand { min-height: 40px; } /* Kimlik ekranları yalnızca platform markasını gösterir (AccountController.ApplyBrandingAsync): şeffaf SVG işaret, levha ve iç boşluk gerekmez (v1.28.0). */ body.page-auth .global-brand-logo { height: 34px; width: 34px; padding: 0; background: transparent; border-radius: 0; object-fit: contain; } /* ─────────────────────────────────────────────────────────────────────────── 3. İKİ SÜTUNLU DÜZEN ─────────────────────────────────────────────────────────────────────────── Solda ne aldığını anlatan panel, sağda form. Formun sütunu SINIRLI: bir giriş formu geniş ekranda 700px'e yayılmamalı, alanlar okunabilir ölçüde kalmalı. ─────────────────────────────────────────────────────────────────────────── */ body.page-auth .split-hero, body.page-auth.page-login .split-hero { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); gap: var(--sp-6); align-items: start; } body.page-auth .panel, body.page-auth .card { border: 1px solid var(--pnl-border); border-radius: var(--r-xl); background: var(--pnl-surface); background-image: none; box-shadow: var(--elev-1); } /* Üst bar `global-toolbar panel` sınıflarını BİRLİKTE taşıyor; yukarıdaki `.panel` kuralıyla aynı özgüllükte (0,2,1). Bu yüzden üst barın kendi kuralı `.panel`den SONRA gelmeli — aksi hâlde kaynak sırası gereği kart yarıçapı ve gölgesi üst bara biniyor. (İlk yazımda öyleydi.) */ body.page-auth .global-toolbar { border: 1px solid var(--pnl-border); border-radius: var(--r-lg); background: var(--pnl-surface); background-image: none; box-shadow: none; } /* Vurgu yıkaması: hero panelinin köşelerinden gelen iki radyal degrade. */ body.page-auth .hero-panel::before, body.page-auth .hero-panel::after { display: none; } body.page-auth .hero-panel { padding: var(--sp-7); } body.page-auth .form-panel { padding: var(--sp-7); } body.page-auth .hero-copy { display: grid; gap: var(--sp-3); } body.page-auth .hero-copy h1 { margin: 0; font-size: var(--fs-auth-hero); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--pnl-text); } body.page-auth .hero-copy p { margin: 0; max-width: 46ch; font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--pnl-text-2); } /* ─────────────────────────────────────────────────────────────────────────── 4. ÖZELLİK LİSTESİ ─────────────────────────────────────────────────────────────────────────── Süs yıldızı (✦) yerine onay işareti: liste bir vaat listesi, dekor değil. ─────────────────────────────────────────────────────────────────────────── */ body.page-auth .login-feature-list { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 0; padding: 0; list-style: none; } body.page-auth .login-feature-item { display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--pnl-text-2); } body.page-auth .login-feature-icon { position: relative; display: inline-flex; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: var(--r-full); border: 1px solid color-mix(in srgb, var(--pnl-success) 30%, transparent); background: var(--pnl-success-bg); font-size: 0; color: transparent; } body.page-auth .login-feature-icon::after { content: ""; position: absolute; left: 5px; top: 6px; width: 8px; height: 4px; border-left: 2px solid var(--pnl-success); border-bottom: 2px solid var(--pnl-success); transform: rotate(-45deg); } /* ─────────────────────────────────────────────────────────────────────────── 5. FORM ─────────────────────────────────────────────────────────────────────────── Panelin form dili. Kapsam ayrı olduğu için SEÇİCİLER tekrarlanıyor, DEĞERLER tekrarlanmıyor — hepsi design-tokens.css'ten geliyor. ─────────────────────────────────────────────────────────────────────────── */ body.page-auth .section-heading h1, body.page-auth .section-heading h2, body.page-auth .auth-title { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--pnl-text); } body.page-auth .field, body.page-auth .form-group { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); } body.page-auth label, body.page-auth .form-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--pnl-text-2); } body.page-auth input[type="text"], body.page-auth input[type="email"], body.page-auth input[type="password"], body.page-auth input[type="tel"], body.page-auth input[type="url"], body.page-auth input:not([type]), body.page-auth select, body.page-auth textarea, body.page-auth .form-control { width: 100%; min-width: 0; height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--pnl-border); border-radius: var(--r-sm); background: var(--pnl-surface); color: var(--pnl-text); font-family: inherit; font-size: var(--fs-md); box-shadow: none; transition: border-color var(--dur-1) var(--ease); } body.page-auth textarea { height: auto; min-height: 88px; padding: var(--sp-2) var(--sp-3); } body.page-auth input::placeholder, body.page-auth textarea::placeholder { color: var(--pnl-text-3); } body.page-auth input:hover, body.page-auth select:hover { border-color: var(--pnl-border-strong); } body.page-auth input:focus, body.page-auth select:focus, body.page-auth textarea:focus, body.page-auth .form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--pnl-accent-bg); } body.page-auth .input-validation-error { border-color: var(--pnl-danger); background: var(--pnl-danger-bg); } /* Hata özeti (2FA, OTP, kurtarma kodu ekranları). site.css'te `--danger` üstüne %88 beyaz karıştırıyordu — açık temada tint'li zeminde soluk kalıyor. Token'a bağlanıyor; 18px yarıçap da kimlik ekranlarının ölçeğine geliyor. */ body.page-auth .error-list, body.page-auth .alert-danger, body.page-auth .flash-error { padding: var(--sp-3) var(--sp-4); border: 1px solid color-mix(in srgb, var(--pnl-danger) 30%, transparent); border-radius: var(--r-md); background: var(--pnl-danger-bg); color: var(--pnl-danger); font-size: var(--fs-md); line-height: var(--lh-snug); } body.page-auth .error-list ul, body.page-auth .flash-error ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); } body.page-auth .flash-info { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid color-mix(in srgb, var(--pnl-info) 30%, transparent); border-radius: var(--r-md); background: var(--pnl-info-bg); color: var(--pnl-info); font-size: var(--fs-sm); line-height: var(--lh-snug); } body.page-auth .flash-success, body.page-auth .flash-warning { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: var(--lh-snug); } body.page-auth .flash-success { border: 1px solid color-mix(in srgb, var(--pnl-success) 30%, transparent); background: var(--pnl-success-bg); color: var(--pnl-success); } body.page-auth .flash-warning { border: 1px solid color-mix(in srgb, var(--pnl-warning) 30%, transparent); background: var(--pnl-warning-bg); color: var(--pnl-warning); } body.page-auth .flash-link { display: inline-flex; align-items: center; min-height: 28px; margin-top: var(--sp-1); color: inherit; font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; } /* Doğrulama özeti hata yokken de basılır; boş kutu görünmesin (panelle aynı kural). */ body.page-auth .flash-error:empty, body.page-auth .flash-error.validation-summary-valid, body.page-auth .flash-info:empty { display: none; } body.page-auth .field-validation-error, body.page-auth .field-error, body.page-auth .text-danger { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--pnl-danger); } body.page-auth input[type="checkbox"], body.page-auth input[type="radio"] { width: 16px; min-width: 16px; height: 16px; padding: 0; accent-color: var(--accent); } body.page-auth .checkbox-row { display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-2); } body.page-auth .form-hint, body.page-auth .subtitle { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--pnl-text-3); } /* ── Düğmeler ───────────────────────────────────────────────────────────── Vurgu rengi kimlik yüzeyinde TEK yerde: sayfanın birincil eylemi. */ body.page-auth .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-5); border: 1px solid var(--accent); border-radius: var(--r-sm); background: var(--accent); background-image: none; color: var(--pnl-on-accent); font-family: inherit; font-size: var(--fs-md); font-weight: var(--fw-semibold); text-decoration: none; box-shadow: none; cursor: pointer; } body.page-auth .btn:hover { background: color-mix(in srgb, var(--accent) 88%, #000); border-color: color-mix(in srgb, var(--accent) 88%, #000); } body.page-auth .btn-block, body.page-auth .btn-full { width: 100%; } body.page-auth .btn-secondary { background: var(--pnl-surface); border-color: var(--pnl-border); color: var(--pnl-text); } body.page-auth .btn-secondary:hover { background: var(--pnl-surface-2); border-color: var(--pnl-border-strong); } /* ─────────────────────────────────────────────────────────────────────────── 6. KENDİ KENDİNE YETEN SAYFALAR (`Layout = null`) ─────────────────────────────────────────────────────────────────────────── Şifre sıfırlama zinciri ve onay ekranları. Üst barları yok — tek bir işi olan sayfalar; markayı kendi tepelerinde taşıyorlar. ─────────────────────────────────────────────────────────────────────────── */ body.page-auth.auth-standalone { display: flex; align-items: center; justify-content: center; min-height: 100dvh; margin: 0; padding: var(--sp-6); } body.page-auth .auth-standalone-wrap { width: 100%; max-width: 460px; } body.page-auth .auth-panel { display: block; padding: var(--sp-7); box-shadow: var(--elev-2); } body.page-auth .auth-form-wrap { width: 100%; } body.page-auth .auth-brand-link { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--pnl-text); text-decoration: none; } body.page-auth .link-accent { color: var(--pnl-accent-fg); } /* Kayıt sonrası "e-postanı doğrula" ekranı */ body.page-register-success .auth-panel { display: grid; gap: var(--sp-4); } body.page-register-success .auth-form-wrap { display: grid; gap: var(--sp-4); } body.page-register-success .reg-done-icon { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pnl-accent-bg); border: 1px solid var(--pnl-accent-border); color: var(--pnl-accent-fg); } body.page-register-success .reg-done-icon--error { background: var(--pnl-danger-bg); border-color: color-mix(in srgb, var(--pnl-danger) 30%, transparent); color: var(--pnl-danger); } body.page-register-success .auth-title { font-size: var(--fs-xl); } body.page-register-success .reg-done-lead, body.page-register-success .reg-done-note { margin: 0; font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--pnl-text-2); } body.page-register-success .reg-done-note { font-size: var(--fs-sm); } body.page-register-success .reg-done-steps { margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 18px); border: 1px solid var(--pnl-border); border-radius: var(--r-md); background: var(--pnl-surface-2); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--pnl-text-2); display: grid; gap: var(--sp-2); } body.page-register-success .reg-done-resend { display: grid; gap: var(--sp-2); } body.page-register-success .reg-done-resend-row { display: flex; gap: var(--sp-2); } body.page-register-success .reg-done-resend-row .form-control { flex: 1 1 auto; min-width: 0; } body.page-register-success .reg-done-resend-row .btn { white-space: nowrap; } body.page-register-success .reg-done-back { margin: 0; font-size: var(--fs-sm); } @media (max-width: 420px) { body.page-register-success .reg-done-resend-row { flex-direction: column; } } /* ─────────────────────────────────────────────────────────────────────────── 7. KAYIT EKRANI ─────────────────────────────────────────────────────────────────────────── Giriş ekranıyla AYNI kabuk (split-hero: solda vaat, sağda form) — eskiden kendi düzeni, kendi CSS'i (site.css'te iki ayrı blok) ve kendi marka yazısı vardı. Plan seçimi formun içinde, gerçek radyo düğmeleri: JavaScript olmadan da, ≤900px'te de çalışır (eski sürüm plan kartlarını dar ekranda gizliyordu — telefondan kimse plan seçemiyordu). Form sütunu 360–420px; plan kartı bu genişliğe sığacak kadar sıkıdır: ad + fiyat bir satır, limit bir satır, özellik bir satır, deneme notu. ─────────────────────────────────────────────────────────────────────────── */ body.page-register .section-heading { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-5); } body.page-register .reg-plan-summary { margin: 0; font-size: var(--fs-sm); color: var(--pnl-text-2); } body.page-register .reg-fieldset { margin: 0 0 var(--sp-5); padding: 0; border: 0; min-width: 0; } body.page-register .reg-legend { padding: 0 0 var(--sp-2); margin-bottom: var(--sp-3); width: 100%; border-bottom: 1px solid var(--pnl-border); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--pnl-text-3); } /* Plan kartları */ body.page-register .reg-plans { display: grid; gap: var(--sp-2); } body.page-register .reg-plan { position: relative; display: block; cursor: pointer; } /* Radyo görünmez ama odaklanabilir kalır (klavye + ekran okuyucu). */ body.page-register .reg-plan input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } body.page-register .reg-plan-body { display: grid; gap: 3px; padding: var(--sp-3) var(--sp-4) var(--sp-3) 40px; border: 1px solid var(--pnl-border); border-radius: var(--r-md); background: var(--pnl-surface); transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } /* Radyo göstergesi: çizilen daire; işaretlenince dolar. */ body.page-register .reg-plan-body::before { content: ""; position: absolute; left: 14px; top: 16px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pnl-border-strong); background: var(--pnl-surface); box-sizing: border-box; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } body.page-register .reg-plan input:checked + .reg-plan-body { border-color: var(--pnl-accent-border); background: var(--pnl-accent-bg); } body.page-register .reg-plan input:checked + .reg-plan-body::before { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--pnl-surface); background: var(--accent); } body.page-register .reg-plan input:focus-visible + .reg-plan-body { outline: 2px solid var(--accent); outline-offset: 2px; } body.page-register .reg-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); } body.page-register .reg-plan-name { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--pnl-text); } body.page-register .reg-plan-badge { padding: 1px 8px; border-radius: var(--r-full); background: var(--pnl-accent-bg); border: 1px solid var(--pnl-accent-border); color: var(--pnl-accent-fg); font-size: var(--fs-xs); font-weight: var(--fw-semibold); } /* Fiyat veri; vurgu rengiyle değil metin rengiyle (giriş/kayıt kararı, 1.20.0). */ body.page-register .reg-plan-price { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--pnl-text); font-variant-numeric: tabular-nums; white-space: nowrap; } body.page-register .reg-plan-limits { font-size: var(--fs-sm); color: var(--pnl-text); } body.page-register .reg-plan-features, body.page-register .reg-plan-trial { font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--pnl-text-2); } body.page-register .reg-plan-trial { color: var(--pnl-text-3); } body.page-register .reg-enterprise { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--pnl-text-2); } /* Metin görünümlü düğme (teklif penceresini açar); bağlantı gibi okunur, düğme gibi odaklanır. */ body.page-register .reg-link-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: var(--fw-semibold); color: var(--pnl-accent-fg); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 32px; /* dokunma hedefi; 24px dar kalıyordu (ölçüldü) */ } /* Kart adresi: sabit önek + alan tek çerçevede. */ body.page-register .reg-slug { display: flex; align-items: stretch; border: 1px solid var(--pnl-border); border-radius: var(--r-sm); background: var(--pnl-surface); overflow: hidden; } body.page-register .reg-slug:focus-within { border-color: var(--accent); } body.page-register .reg-slug-prefix { display: flex; align-items: center; padding: 0 var(--sp-3); background: var(--pnl-surface-2); border-right: 1px solid var(--pnl-border); color: var(--pnl-text-2); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; } body.page-register .reg-slug .form-control { border: 0; border-radius: 0; flex: 1 1 auto; min-width: 0; } body.page-register .reg-slug .form-control:focus { outline: none; box-shadow: none; } /* Uygunluk geri bildirimi: durum sınıfla, renk tokenle (eski sürüm satır içi #16a34a, 3,3:1). */ body.page-register .reg-slug-help.is-ok { color: var(--pnl-success); } body.page-register .reg-slug-help.is-bad { color: var(--pnl-danger); } body.page-register .btn-full { width: 100%; justify-content: center; margin-top: var(--sp-2); } body.page-register .reg-login-hint { margin: var(--sp-4) 0 0; text-align: center; font-size: var(--fs-sm); color: var(--pnl-text-2); } body.page-register .reg-login-hint a { color: var(--pnl-accent-fg); text-decoration: underline; text-underline-offset: 2px; } /* Honeypot: ekran dışı, odak sırasında değil. `display:none` KULLANILMAZ — bazı botlar görünmez alanı atlar; ekran dışı alan ise doldurulur. Gerçek kullanıcı görmez (aria-hidden, tabindex=-1). */ body.page-register .reg-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } body.page-register .reg-turnstile { margin: var(--sp-2) 0 var(--sp-3); min-height: 65px; /* parça yüklenene kadar yerleşim zıplamasın */ } /* Sol paneldeki üç adım */ body.page-register .reg-steps { display: grid; gap: var(--sp-3); margin: var(--sp-6) 0 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--pnl-border); list-style: none; } body.page-register .reg-step { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--pnl-text-2); } body.page-register .reg-step-no { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pnl-surface-2); border: 1px solid var(--pnl-border); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--pnl-text); } @media (max-width: 480px) { /* Dar ekranda önek uzun kalırsa alan sıkışır; önek üste alınır. */ body.page-register .reg-slug { flex-direction: column; } body.page-register .reg-slug-prefix { border-right: 0; border-bottom: 1px solid var(--pnl-border); padding: 6px var(--sp-3); } } /* Onay kutusundaki yasal bağlantılar. Kullanıcının imzaladığı metinler bunlar; okunabilirlik pazarlıksız. Ham vurgu rengiyle 3,96:1 veriyorlardı — metin olarak koyulaştırılmış vurgu tonuna alındı ve altı çizildi ki bağlantı olduğu renkten bağımsız da anlaşılsın. */ body.page-auth .checkbox-label a, body.page-auth .checkbox-copy a { color: var(--pnl-accent-fg); text-decoration: underline; text-underline-offset: 2px; } /* ─────────────────────────────────────────────────────────────────────────── 8. DAR EKRAN ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { body.page-auth .split-hero, body.page-auth.page-login .split-hero { grid-template-columns: 1fr; } /* Dar ekranda FORM ÖNCE gelir: kullanıcı giriş yapmaya geldi, tanıtımı okumaya değil. Tanıtım paneli formun altına iniyor. */ body.page-auth .form-panel { order: -1; } body.page-auth .hero-panel, body.page-auth .form-panel { padding: var(--sp-5); } } @media (pointer: coarse) { body.page-auth input[type="text"], body.page-auth input[type="email"], body.page-auth input[type="password"], body.page-auth input[type="tel"], body.page-auth select, body.page-auth .form-control { height: 46px; /* iOS, 16px'in altındaki bir alana odaklanınca sayfayı yakınlaştırır. */ font-size: 1rem; } body.page-auth .btn { min-height: 46px; } } /* Durum sayfaları (doğrulama, şifre sıfırlama): emoji yerine kurumsal çizgi ikon (v1.33.1) */ .auth-status-icon { width: 56px; height: 56px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-surface-2, #f3f4f6); color: var(--c-text-2, #4b5563); } .auth-status-icon svg { width: 28px; height: 28px; } .auth-status-icon--ok { background: #ecfdf5; color: #047857; } .auth-status-icon--warn { background: #fffbeb; color: #b45309; } /* v1.43 kampanya paketi kartı (docs/31): vurgulu kenar, geri sayım satırı */ body.page-register .reg-plan--campaign .reg-plan-body { border-color: var(--accent, #E51E25); box-shadow: 0 0 0 1px var(--accent, #E51E25); } body.page-register .reg-plan-countdown { display: block; margin-top: 6px; font-size: .8rem; color: var(--accent, #E51E25); }