/* ============================================================================= assets/pages/auth.css — Login / Register (Faz 5 / AdminLTE sökümü, Adım B) ============================================================================= Bu dosya AUTH_ENVANTER.md'nin (Adım A) çıktısına dayanır. Bootstrap 3 + AdminLTE + skin-blue + yerel FontAwesome 4'ün YERİNE geçer. DURUM (Adım C, 2026-08-16): dosya artık CANLI — `layouts/auth.php` bunu `tokens.css`'ten sonra yüklüyor, AdminLTE seti tamamen kaldırıldı. `assets/js/auth.js` DEĞİŞMEDİ (sözleşme dosyası) → JS'in ürettiği eski rozet class'ları aşağıda `.auth-badge*` ile birlikte hedefleniyor. TASARIM: Bölüm 3'ün ilkeleri — derinlik GÖLGEYLE değil KENARLIKLA (koyu zeminde gölge çalışmıyor, tokens.css §"KENARLIK KALİBRASYONU"), zemin/kart profile.css'in .card'ı, form input'u style.css'in #search-input'i emsal. YENİ TOKEN YOK — tamamen mevcut anlamsal katmanla çözülüyor (§F). ============================================================================= CLASS HARİTASI (Adım C bu adları KULLANACAK — markup bu dosyaya göre yazılır) ----------------------------------------------------------------------------- KORUNAN JS KANCALARI (B2, AYNEN — auth.js/inline onclick bunlara bağlı): #frm_login, #frm_register, #user_name, #stat_available, input name="email|password|user_name|UserName|password_retype" YENİ YAPISAL/GÖRSEL SINIFLAR (B1+B3'ün yerini alır, Bootstrap/AdminLTE adları TAMAMEN terk edildi — bu sayfada başka hiçbir CSS'in "form-control"/ "btn"/"row" gibi jenerik adları kullanmadığından, çakışma riski sıfır ama yine de kendi ad alanına (auth-*) taşındı, karışıklık payı bırakmamak için): body.auth-page (+ .login-page / .register-page — sayfa-özel hook, şu an bu dosyada kullanılmıyor, ileride gerekirse hazır) .auth-shell — tam yükseklik ortalayıcı sarmalayıcı .auth-logo-link — logo sargısı (yalnız logo_href doluyken) .auth-logo — logo .auth-card — görünür kart (zemin/kenarlık/gölge/padding) .auth-title — banner_title (STOCHTER Login/Signup) — eski login100-form-title + bg_2.png banner'ının YERİNE basit başlık (§F: "muhtemelen tamamen kaldırılacak" — KARAR: kaldırıldı) .auth-subtitle — eski .login-box-msg .auth-form —
.auth-field — eski .form-group.has-feedback .auth-field--with-badge — yalnız register #user_name alanı; .auth-input'a sağda rozet için boşluk açar (yeni, eski markup'ta yoktu) .auth-field-icon — eski .glyphicon.form-control-feedback (soldan, §C1 "input içinde ikon" deseni korundu — konum SOL'a taşındı, bkz aşağıdaki not) .auth-input — eski .form-control .auth-availability — YENİ class, #stat_available'ın id'si AYNEN kalır ama konumlama artık bu class'a bağlı (Adım C markup'ta id'nin YANINA `class="auth-availability"` ekler — ID CSS SELECTOR OLARAK KULLANILMIYOR, çünkü bu dosyanın kendi test harness'i aynı sayfada 3 mock örnek göstermek zorunda, ID tekil olmalı; class üretim sayfasında da tekil kalmaya devam eder, davranış değişmez). Aşağıya bak: eski absolute-glyphicon çakışması buradaki flex/absolute ayrımıyla kalıcı çözüldü .auth-badge — eski JS-üretimi `.label.pull-right.bg-red/bg-green` .auth-badge--ok — eski `.bg-green` .auth-badge--bad — eski `.bg-red` ⚠️ Adım C'de auth.js DEĞİŞMEDİ → rozeti hâlâ eski adlarla basıyor. CSS iki ad setini birden hedefliyor, alias'lar `.auth-availability` kapsamına hapsedildi (aşağı bak). .auth-btn, .auth-btn--primary — eski `.btn.btn-primary.pull-right.btn-flat` (`.row`/`.col-xs-12` sarmalayıcısı KALDIRILDI — tek kolon zaten, gerek yok) .auth-divider — eski `.social-auth-links` ("- OR -" bloğu) .auth-btn--google — eski `.btn.btn-block.btn-social.btn-google.btn-flat` .auth-link — eski bare `` İKONLAR (§E, FA 6.5.0 — CDN'den bu turda doğrulandı): email → fa-solid fa-envelope password → fa-solid fa-lock user_name → fa-solid fa-user password_retype → fa-solid fa-right-to-bracket (FA6 adı; \f2f6, alias fa-sign-in-alt de aynı glyph'e gidiyor — CDN'de doğrulandı, §G risk #5 kapandı) Google butonu → fa-brands fa-google (fa-google-plus DEĞİL: §E'nin kritik bulgusu — bare `fa` FA6'da Free ailesine bağlanıyor, marka glyph'i orada yok → tofu/boş render olurdu. `fa-google` ayrıca §F'nin önerdiği "Google+ kapandı, güncel G logosu" kararı.) spinner (JS) → fa-solid fa-spinner fa-spin (auth.js'in ürettiği `` — bare `fa fa-spinner` zaten Free/solid'te çalışıyordu (§E), Adım C'de auth.js güncellenirken tutarlılık için fa-solid önekiyle yazılması önerilir, ZORUNLU değil) TASARIM KARARLARI (§F'nin açık bıraktığı 3 madde, burada karara bağlandı): 1) Sayfa zemini → var(--bg) gradyanı (profile.css'in `body` kalıbı), var(--brand-navy) DEĞİL. Gerekçe: auth artık ayrı bir "AdminLTE adası" değil, sitenin koyu temasının bir parçası; --brand-navy şerit/marka rengi rolünde (header/footer), sayfa zemini rolünde değil. 2) Başlık şeridi (bg_2.png + Poppins-Bold overlay) → KALDIRILDI, basit `.auth-title` metnine indirgendi. Sitenin hiçbir yerinde 3 katmanlı görsel-banner deseni yok, tek kullanım yeri buydu. 3) Google butonu → nötr/kart rengi (marka kırmızısı KORUNMADI). Gerekçe: Bölüm 3'ün "tek-renk disiplini" ilkesi + kırmızı zemin koyu palette yabancı kalıyor; ikon (`fa-brands fa-google`) zaten üçüncü-taraf kimliğini taşıyor, zeminin kırmızı olması şart değil. ============================================================================= */ /* ----------------------------------------------------------------------------- ZORUNLU İLK KURAL (§C5) — Bootstrap'in global `*{box-sizing:border-box}` reset'i sitenin geri kalanına YAYILMADAN, yalnız auth kapsamında yeniden kuruluyor. Auth formları `width:100%` + padding + border kullanıyor (.auth-input) — bu reset olmadan inputlar konteynerlerinden TAŞAR. ----------------------------------------------------------------------------- */ body.auth-page, body.auth-page *, body.auth-page *::before, body.auth-page *::after { box-sizing: border-box; } /* ============================================================================= SAYFA ZEMİNİ + ORTALAYICI KABUK ========================================================================== */ body.auth-page { margin: 0; min-height: 100vh; font-family: var(--font-body); background: linear-gradient(180deg, var(--bg), var(--bg-2)); color: var(--text); line-height: var(--lh-body); } .auth-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5); padding: var(--sp-6) var(--sp-4); } .auth-logo-link { display: inline-block; } .auth-logo { display: block; width: 200px; height: auto; } /* ============================================================================= KART — profile.css'in .card kalıbının birebir aynısı (emsal, §F) ========================================================================== */ .auth-card { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: var(--sp-5); } .auth-title { margin: 0 0 var(--sp-1) 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: .3px; color: var(--text-soft); text-align: center; } .auth-subtitle { margin: 0 0 var(--sp-5) 0; font-size: var(--fs-sm); color: var(--text-muted); text-align: center; } /* ============================================================================= FORM ALANLARI — style.css'in #search-input kalıbı emsal (§F) Kontrast hedefleri (görev tanımı): metin ≥15:1, placeholder ≥5:1, odak halkası ≥6.8:1 — #search-input'in ölçülmüş değerleriyle aynı token'lar kullanıldığı için aynı sonuçlar geçerli (harness'te doğrulandı). ========================================================================== */ .auth-form { display: flex; flex-direction: column; gap: var(--sp-3); } .auth-field { position: relative; } /* Sol ikon — Bootstrap'in orijinali SAĞ'daydı (.form-control-feedback). §C1'in belgelediği çakışma (register'daki #user_name alanında feedback ikonu ile #stat_available rozeti aynı köşede üst üste biniyordu) burada ikonu SOLA, rozeti SAĞA ayırarak kalıcı çözüldü — "input içinde ikon" AFORDANSI korundu, çakışma kalmadı. */ .auth-field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: var(--fs-base); pointer-events: none; line-height: 1; } .auth-input { width: 100%; padding: 10px 16px 10px 42px; border: 1.5px solid var(--border-strong); border-radius: var(--r-lg); font-size: var(--fs-base); font-family: var(--font-body); background: var(--inset); color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; } .auth-input::placeholder { color: var(--text-muted); opacity: 1; } .auth-input:focus { border-color: var(--link-color); box-shadow: 0 2px 8px rgba(0, 119, 255, 0.08); background: var(--card); } .auth-input:disabled { opacity: .55; cursor: not-allowed; } /* register.php: #user_name alanı — sağda müsaitlik rozetine yer aç. `:has()` yerine açık modifier class tercih edildi (eski tarayıcı/motor bağımsız, Adım C'nin markup'ta tek fazla class eklemesi yeterli): `
` ⚠️ DEĞER ÖLÇÜLEREK BULUNDU (Adım C, gerçek sayfada): rozetin EN GENİŞ hâli "not available" = 105px, `.auth-availability` sağdan 12px içeride duruyor → metin alanının bitmesi gereken sınır 105+12 = 117px. Adım B'nin tahmini 108px'ti; o değerde uzun bir kullanıcı adı rozetin ALTINA 9px giriyordu (rozet zemini opak `--inset` olduğu için metin sessizce kayboluyordu — görünür bir çakışma değil, o yüzden gözle fark edilmezdi). 128px = 117 + 11px nefes payı (font yüklenmezse rozet biraz genişleyebilir). */ .auth-field--with-badge .auth-input { padding-right: 128px; } /* ----------------------------------------------------------------------------- Müsaitlik rozeti. id="stat_available" AYNEN korunur (§A1/B2 JS kancası, auth.js `$('#stat_available').html(...)` ile buraya yazıyor) — ama CSS konumlaması id'ye değil `.auth-availability` class'ına bağlı (Adım C markup'ta id'nin yanına bu class'ı ekleyecek). auth.js'in `.html()` ile İÇİNE yazdığı `` .auth-badge--ok/--bad almalı (Adım C'de auth.js güncellenir, bkz dosya başı class haritası) VEYA spinner (`