/* ============================================================================ auth.css — Login / Register / telefon-kayıt sayfalarının ORTAK sade kabuğu. Tasarım kararı (2026-08-14): auth sayfaları olabildiğince sade + tek sayfa + dikey/yatay ortalı. Hero panel, dekoratif daireler, float animasyonu, "256-bit SSL" şeritleri, gradient buton YOK. Ekranda tek bir kolon vardır: başlık → kart → küçük bağlantılar. 2026-08-17 güncellemesi — SAYFALAR ARASI GEÇİŞ: Marka artık sayfanın üstündeki ince şeritte (.auth-top) durur; sağında görünür bir "← Ana Sayfa / geri" bağlantısı vardır ve altta hukuki bağlantı şeridi (.auth-legal) bulunur. Eskiden kartın üstünde tek başına duran logo (tıklanabilir ama etiketsiz) tek çıkış yoluydu; kullanıcı geri dönüşü bulamıyordu. Tipografi anasayfayla hizalandı: başlıklar 'Outfit', gövde 'Plus Jakarta Sans'. Rol rengi ile gelir — sayfa içinde renk hardcode ETME, --accent / --accent-strong kullan. Form kontrolleri .auth-form altında SCOPE'ludur; register form partial'ları (_CustomerRegisterFormStyles / _TruckRegisterFormStyles) kendi .field kurallarını taşır ve panel sayfalarında da kullanıldığı için burayla çakışmaz. Yeni auth sayfası yazarken formu .auth-form ile sarmala. ========================================================================== */ :root { --accent: #F97316; --accent-strong: #EA580C; --accent-soft: rgba(249, 115, 22, .16); /* Zemin BEYAZ (kullanıcı kararı 2026-08-18): eski #F5F6F8 gri zemin formu "sönük" gösteriyordu. Kart artık zeminden çerçeve + gölgeyle ayrışır. */ --auth-bg: #FFFFFF; --auth-surface: #FFFFFF; --auth-line: #E4E7EC; --auth-line-input: #D0D5DD; --auth-ink: #101828; --auth-ink-2: #475467; --auth-ink-3: #98A2B3; --auth-danger: #B42318; --auth-danger-bg: #FEF3F2; --auth-danger-line: #FECDCA; --auth-ok: #067647; --auth-ok-bg: #ECFDF3; --auth-ok-line: #ABEFC6; /* Marka — anasayfa (public.css) ile aynı değerler. Wordmark'ın yeşil yarısı ve marka bağlantıları bunu kullanır; rol accent'inden BAĞIMSIZDIR. */ --auth-brand: #01A249; --auth-brand-ink: #2A3540; } /* Rol temaları — accent: odak halkası/çerçeve, accent-strong: buton + bağlantı (beyaz yazıyla okunur kalması için hep koyu varyant). */ .t-customer { --accent: #F97316; --accent-strong: #EA580C; --accent-soft: rgba(249,115,22,.16); } .t-truck { --accent: #06B6D4; --accent-strong: #0E7490; --accent-soft: rgba(6,182,212,.18); } .t-member { --accent: #22C55E; --accent-strong: #15803D; --accent-soft: rgba(34,197,94,.18); } .t-cooperative{ --accent: #D97706; --accent-strong: #B45309; --accent-soft: rgba(217,119,6,.16); } .t-admin { --accent: #6366F1; --accent-strong: #4338CA; --accent-soft: rgba(99,102,241,.18); } .t-superadmin { --accent: #8B5CF6; --accent-strong: #6D28D9; --accent-soft: rgba(139,92,246,.18); } * { margin: 0; padding: 0; box-sizing: border-box; } /* .auth-form gibi display taşıyan sınıflar UA'nın [hidden] kuralını ezer — adım gizleme bozulmasın. */ [hidden] { display: none !important; } .auth-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--auth-bg); color: var(--auth-ink); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ── Üst şerit: marka + görünür geri dönüş ── Sayfanın TEK çıkış yolu buradadır; her auth sayfasında görünür. */ .auth-top { background: #fff; border-bottom: 1px solid var(--auth-line); flex-shrink: 0; } .auth-bar { max-width: 1120px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .auth-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } /* 34→40 (2026-08-18 "logo küçük duruyor") */ .auth-brand img { height: 40px; width: auto; display: block; } .auth-brand-name { font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em; line-height: 1; white-space: nowrap; color: var(--auth-brand-ink); } .auth-brand-name b { color: var(--auth-brand); font-weight: 700; } /* Geri butonu DOLU rol renginde (kullanıcı kararı 2026-08-18): eski beyaz zemin + ince gri çerçeve, sayfa zemini de beyaz olunca GÖRÜNMÜYORDU. Rol rengi sayfanın temasından gelir (t-customer turuncu, t-truck petrol...). Silik/çerçeveli hale geri düşürme. */ .auth-back { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: none; border-radius: 9px; background: var(--accent-strong); font-size: .87rem; font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap; transition: filter .15s; } .auth-back:hover { filter: brightness(.9); color: #fff; } .auth-back svg { flex-shrink: 0; display: block; } /* ── Ortalama: sayfanın tamamı tek bir dikey blok ── */ .auth { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .auth-box { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: stretch; } /* Genişlik kademeleri: varsayılan 400 → login (tek kolon, kısa form) is-wide 468 → orta form is-form 600 → KAYIT formları. 468'de iki kolonlu satır (Ad/Soyad, Şifre/Tekrar) ~203px'e düşüyordu ve alanlar sıkışık duruyordu (kullanıcı geri bildirimi 2026-08-17). 600 → kart içi 540 → kolon ~253px. is-gate 880 → rol giriş kapıları (yan yana iki büyük seçim kartı) */ .auth-box.is-wide { max-width: 468px; } .auth-box.is-form { max-width: 600px; } .auth-box.is-gate { max-width: 880px; } .auth-head { text-align: center; margin-bottom: 20px; } .auth-head h1 { font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--auth-ink); } /* Başlık kartın İÇİNDE (kullanıcı kararı 2026-08-18): login/register sayfalarında .auth-head kartın İLK ÇOCUĞUDUR — form ile aynı çerçevede durur. Rol kapılarında (/Account/*) kart yoktur, başlık dışarıda kalır; bu kural onları etkilemez. Altındaki ince çizgi başlığı form alanlarından ayırır (bölüm ayrımı görünür olsun). */ .auth-card .auth-head { margin: 2px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--auth-line); } .auth-head p { margin-top: 6px; font-size: .9rem; color: var(--auth-ink-2); } /* Rol kapılarında (.is-gate) başlık BÜYÜK (kullanıcı kararı 2026-08-18): hangi rolün kapısında olduğun bir bakışta anlaşılsın. Login/register'daki kart içi başlık ölçüsü değişmez — bu kural yalnız kapı sayfalarını büyütür. */ .auth-box.is-gate .auth-head { margin-bottom: 30px; } .auth-box.is-gate .auth-head h1 { font-size: clamp(2rem, 3.6vw, 2.6rem); letter-spacing: -.03em; line-height: 1.1; } .auth-box.is-gate .auth-head p { margin-top: 10px; font-size: 1rem; } .auth-card { background: var(--auth-surface); border: 1px solid var(--auth-line); border-radius: 14px; padding: 26px 24px; /* Beyaz zeminde kart yalnız 1px çerçeveyle kayboluyordu — yumuşak geniş gölge kartı sayfadan ayırır (nötr, düşük opaklık; renkli glow değil). */ box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 32px rgba(16, 24, 40, .07); } /* Kartın altındaki küçük bağlantı satırları */ .auth-foot { margin-top: 18px; text-align: center; font-size: .86rem; color: var(--auth-ink-2); display: flex; flex-direction: column; gap: 8px; } /* Alt bağlantılar da kartın İÇİNDE (kullanıcı kararı 2026-08-18): başlığın simetriği — üstte ince ayraç, sonra bağlantı satırları. Kart dışı kullanım (varsa) eski görünümüyle çalışmaya devam eder. */ .auth-card .auth-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--auth-line); } .auth-foot a { color: var(--accent-strong); font-weight: 600; text-decoration: none; } .auth-foot a:hover { text-decoration: underline; } .auth-foot .muted a { color: var(--auth-ink-2); font-weight: 500; } .auth-foot .muted a:hover { color: var(--auth-ink); } /* ── Form kontrolleri ── */ .auth-form { display: flex; flex-direction: column; gap: 16px; } .auth-form .field { display: flex; flex-direction: column; } /* Label KOYU (kullanıcı kararı 2026-08-18): gri --auth-ink-2 zeminde sönük kalıyordu. Alan adları tam mürekkep rengiyle yazılır — griye düşürme. */ .auth-form .field > label { font-size: .84rem; font-weight: 600; color: var(--auth-ink); margin-bottom: 6px; } /* Etiket satırı: label solda + yardımcı bağlantı sağda (örn. "Şifremi unuttum"). Kullanıcı kararı 2026-08-18: şifremi-unuttum kart altındaki küçük satırda GÖRÜNMÜYORDU; şifre unutma çok sık yaşandığı için bağlantı şifre alanının BAŞLIK SATIRINA taşındı. Login sayfalarında bu deseni boz(ma). */ .auth-form .lbl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .auth-form .lbl-row label { font-size: .84rem; font-weight: 600; color: var(--auth-ink); } .auth-form .fp-link { font-size: .8rem; font-weight: 600; color: var(--accent-strong); text-decoration: none; white-space: nowrap; } .auth-form .fp-link:hover { text-decoration: underline; } .auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="tel"], .auth-form input[type="password"], .auth-form select { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--auth-line-input); border-radius: 10px; background: var(--auth-surface); color: var(--auth-ink); font-family: inherit; font-size: .97rem; outline: none; transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none; } /* Uzun placeholder dar alanda "Göster" düğmesinin altına kaçıyordu (Şifre Tekrar, .row2'de ~185px). Ellipsis taşmayı temiz keser — güvenlik ağı; asıl çözüm placeholder metnini kısa tutmak. */ .auth-form input { text-overflow: ellipsis; } .auth-form input::placeholder { color: var(--auth-ink-3); } .auth-form input:focus, .auth-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .auth-form input.is-err { border-color: var(--auth-danger-line); background: var(--auth-danger-bg); } .auth-form input[readonly] { background: #F2F4F7; color: var(--auth-ink-2); } /* Şifre göster/gizle — GÖZ İKONU (kullanıcı kararı 2026-08-17; eskiden "Göster" metniydi). İkonu ve davranışı wwwroot/js/password-toggle.js yerleştirir — butonun içine metin yazma, sadece `.pw-toggle` sınıfını ver. .pw-box input'u sarar; buton input kutusuna göre konumlanır (hata satırından etkilenmez). */ .pw-box { position: relative; display: flex; align-items: center; } .pw-box input { padding-right: 46px; } .pw-box .pw-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border: none; background: none; color: var(--auth-ink-3); cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; } .pw-box .pw-toggle svg { width: 19px; height: 19px; display: block; } .pw-box .pw-toggle:hover { color: var(--auth-ink-2); background: #F2F4F7; } .pw-box .pw-toggle.is-on { color: var(--accent-strong); } /* register-validator.js kendi stilini enjekte eder ama .rv-invalid > input seçicisi .pw-box içindeki şifre alanına ulaşmaz — kırmızı çerçeveyi burada tamamlıyoruz. */ .rv-invalid .pw-box input { border-color: #DC2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important; } .auth-form .hint { margin-top: 6px; font-size: .78rem; color: var(--auth-ink-3); } .auth-form .err, .auth-form .field-validation-error { display: block; margin-top: 6px; font-size: .78rem; font-weight: 600; color: var(--auth-danger); } .auth-form .err:empty { display: none; } .auth-form .ok-note { margin-top: 6px; font-size: .78rem; font-weight: 600; color: var(--auth-ok); } /* İki kolon (ad / soyad) — dar ekranda tek kolona düşer */ .auth-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 460px) { .auth-form .row2 { grid-template-columns: 1fr; } } /* Telefon: ülke kodu widget'ı (phone-input.js) .phone-wrap üzerinden yükselir */ .auth-form .phone-wrap { display: flex; gap: 8px; align-items: stretch; } .auth-form .phone-prefix { flex-shrink: 0; min-width: 68px; display: flex; align-items: center; justify-content: center; height: 46px; border: 1px solid var(--auth-line-input); border-radius: 10px; background: #F9FAFB; color: var(--auth-ink-2); font-weight: 600; font-size: .95rem; user-select: none; } .auth-form .phone-input { flex: 1; width: auto !important; } /* phone-input.js kendi stilini runtime'da head'e ekler (42px/1.5px/12px) — sade dile hizala. Seçici en az 2 sınıf olmalı ki sonradan eklenen tek-sınıflı kuralı ezsin. */ .auth-form .phone-wrap .ucph-trigger { height: 46px; border: 1px solid var(--auth-line-input); border-radius: 10px; background: #F9FAFB; color: var(--auth-ink-2); font-size: .95rem; font-weight: 600; } .auth-form .phone-wrap .ucph-trigger:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .auth-form .phone-wrap .ucph-dd { top: 50px; border-radius: 10px; } /* Referans kodu: sabit "ÜYE-" öneki + yalnız rakam kutusu (kullanıcı kararı 2026-09-03). Telefonun +90 kutusuyla aynı dil; .phone-wrap KULLANMA (phone-input.js o sınıfı ülke-kodu seçicisine çevirir). Rakam kutusu 4 hane için dar tutulur (max-width bilinçli). Kapsam: Member/Register + _PhoneRegisterPage (Customer/Member telefonla kayıt). */ .auth-form .ref-wrap { display: flex; gap: 8px; align-items: stretch; } .auth-form .ref-prefix { flex-shrink: 0; min-width: 68px; padding: 0 14px; display: flex; align-items: center; justify-content: center; height: 46px; border: 1px solid var(--auth-line-input); border-radius: 10px; background: #F9FAFB; color: var(--auth-ink-2); font-weight: 700; font-size: .95rem; letter-spacing: .3px; user-select: none; } .auth-form .ref-wrap input[type="text"] { flex: 1; width: auto; max-width: 200px; font-weight: 600; letter-spacing: 2px; } /* Onay kutusu satırı (KVKK) */ .auth-form .check { display: flex; align-items: flex-start; gap: 10px; font-size: .85rem; color: var(--auth-ink-2); line-height: 1.55; cursor: pointer; } .auth-form .check input[type="checkbox"] { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent-strong); cursor: pointer; } .auth-form .check a { color: var(--accent-strong); font-weight: 600; text-decoration: none; } .auth-form .check a:hover { text-decoration: underline; } /* ── Butonlar ── */ .auth-btn { width: 100%; height: 46px; border: 1px solid transparent; border-radius: 10px; background: var(--accent-strong); color: #fff; font-family: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; transition: filter .15s; } /* Sağlayıcı ikonları (_AuthProviderButtons): metinle birlikte küçülmesin, dikeyde ortalansın. */ .auth-btn svg { flex-shrink: 0; display: block; } .auth-btn:hover { filter: brightness(.93); } .auth-btn:disabled { opacity: .6; cursor: not-allowed; filter: none; } .auth-btn.ghost { background: var(--auth-surface); border-color: var(--auth-line-input); color: var(--auth-ink); font-weight: 600; } .auth-btn.ghost:hover { filter: none; border-color: var(--auth-ink-3); background: #FCFCFD; } .auth-btn + .auth-btn { margin-top: 10px; } /* ── Ayraç ── */ .auth-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: .8rem; color: var(--auth-ink-3); } .auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--auth-line); } /* ── Uyarı / bilgi kutuları ── */ .auth-alert { padding: 11px 13px; border-radius: 10px; font-size: .85rem; font-weight: 500; line-height: 1.5; background: var(--auth-danger-bg); border: 1px solid var(--auth-danger-line); color: var(--auth-danger); margin-bottom: 16px; } .auth-alert.ok { background: var(--auth-ok-bg); border-color: var(--auth-ok-line); color: var(--auth-ok); } .auth-alert.info { background: #F9FAFB; border-color: var(--auth-line); color: var(--auth-ink-2); font-weight: 400; } .auth-alert ul { margin: 6px 0 0 18px; } /* Alert içi CTA — "Üye olmak için tıklayın" gibi yönlendirme butonu (OAuth not-registered). Rol renginin koyu varyantı (--accent-strong) beyaz yazıyla kontrast payı taşır. */ .auth-alert .alert-cta { display: inline-flex; align-items: center; margin-top: 10px; padding: 8px 14px; border-radius: 9px; background: var(--accent-strong); color: #fff; font-size: .84rem; font-weight: 700; text-decoration: none; } .auth-alert .alert-cta:hover { opacity: .92; } /* Kart içi ince not (kart altı açıklama) */ .auth-note { margin-top: 14px; font-size: .8rem; line-height: 1.55; color: var(--auth-ink-3); } /* ═══ ROL GİRİŞ KAPILARI (/Account/Customer|Truck|Admin) ══════════════════════ Kullanıcı kararı 2026-08-17: bu sayfalarda PAZARLAMA METNİ YOK ("yükünüz için doğru taşıyıcı" vb.) — buraya tıklayan zaten anasayfada okuyup gelmiştir. Ekranda tek iş var: Giriş mi, Kayıt mı? Bu yüzden sayfa tek ekrana sığar, dikey ortalıdır ve iki seçim kartı BÜYÜK + BİRBİRİNDEN NET AYRIŞIR: .gc-fill → dolu rol rengi (birincil yol) .gc-out → beyaz kart, üstünde rol renginde kalın şerit (ikincil yol) Gradient/glow YOK; etki ölçek, düz renk kontrastı ve tipografiyle sağlanır. */ .gate-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .gc { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 292px; padding: 32px 30px 28px; border-radius: 18px; text-decoration: none; overflow: hidden; transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s; } .gc:hover { transform: translateY(-4px); } /* Birincil — dolu rol rengi */ .gc-fill { background: var(--accent-strong); border: 1px solid var(--accent-strong); color: #fff; box-shadow: 0 14px 30px -14px rgba(16, 24, 40, .5); } .gc-fill:hover { box-shadow: 0 20px 40px -14px rgba(16, 24, 40, .55); } /* İkincil — beyaz kart; üst şerit rol rengini taşır ki iki kart aynı aileden görünsün */ .gc-out { background: var(--auth-surface); border: 1px solid var(--auth-line); color: var(--auth-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } .gc-out::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); } .gc-out:hover { border-color: var(--accent); box-shadow: 0 14px 30px -16px rgba(16, 24, 40, .35); } .gc-ic { width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .gc-ic svg { width: 25px; height: 25px; display: block; } .gc-fill .gc-ic { background: rgba(255, 255, 255, .18); color: #fff; } .gc-out .gc-ic { background: var(--accent-soft); color: var(--accent-strong); } .gc-t { font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 10px; } .gc-d { font-size: .93rem; line-height: 1.65; } .gc-fill .gc-d { color: rgba(255, 255, 255, .82); } .gc-out .gc-d { color: var(--auth-ink-2); } /* Aksiyon satırı kartın DİBİNE yapışır — iki kart farklı metin uzunluğunda olsa bile düğmeler aynı hizada durur. */ .gc-a { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 9px; font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 600; } .gc-a svg { width: 17px; height: 17px; transition: transform .22s; } .gc:hover .gc-a svg { transform: translateX(5px); } .gc-fill .gc-a { color: #fff; } .gc-out .gc-a { color: var(--accent-strong); } /* Kapı sayfasının altındaki tek satırlık geçiş bağlantısı */ .gate-alt { margin-top: 22px; text-align: center; font-size: .9rem; color: var(--auth-ink-2); } .gate-alt a { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-weight: 600; color: var(--auth-ink); text-decoration: none; } .gate-alt a:hover { color: var(--accent-strong); } .gate-alt a svg { width: 15px; height: 15px; transition: transform .2s; } .gate-alt a:hover svg { transform: translateX(3px); } @media (max-width: 720px) { .gate-choice { grid-template-columns: 1fr; gap: 14px; } .gc { min-height: 0; padding: 26px 24px 24px; } .gc-ic { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px; } .gc-ic svg { width: 22px; height: 22px; } .gc-t { font-size: 1.3rem; } .gc-a { padding-top: 18px; } } /* ── Alt şerit: hukuki bağlantılar ── Koyu footer YOK (sade kural); ince bir ayraç çizgisi + küçük bağlantılar. */ .auth-legal { flex-shrink: 0; border-top: 1px solid var(--auth-line); background: #fff; } .auth-legal .auth-bar { height: auto; min-height: 56px; padding: 14px 20px; flex-wrap: wrap; gap: 10px 18px; } .auth-legal span { font-size: .8rem; color: var(--auth-ink-3); } .auth-legal nav { display: flex; flex-wrap: wrap; gap: 8px 18px; } .auth-legal nav a { font-size: .8rem; color: var(--auth-ink-2); text-decoration: none; font-weight: 500; } .auth-legal nav a:hover { color: var(--auth-ink); text-decoration: underline; } /* ── Mobil ── */ @media (max-width: 520px) { .auth { padding: 24px 16px; } .auth-card { padding: 22px 18px; } .auth-head h1 { font-size: 1.3rem; } .auth-bar { height: 58px; padding: 0 16px; } .auth-brand img { height: 34px; } .auth-brand-name { font-size: 1.08rem; } .auth-back { height: 36px; padding: 0 13px; font-size: .83rem; } .auth-legal .auth-bar { padding: 12px 16px; justify-content: center; text-align: center; } .auth-legal nav { justify-content: center; } } /* ── Rate limit uyarısı (2026-09-05) — _AuthLayout formun üstüne basar; gönder butonu geri sayım boyunca kilitlidir. Süre dolunca .is-clear ile yeşile döner. ── */ .auth-alert.rl-alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; background: #FFFBEB; border-color: #FDE68A; color: #92400E; font-weight: 500; } .auth-alert.rl-alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; } .auth-alert.rl-alert strong { font-weight: 800; } .auth-alert.rl-alert .rl-line { display: block; margin-top: 4px; } .auth-alert.rl-alert .rl-count { font-weight: 800; font-variant-numeric: tabular-nums; } .auth-alert.rl-alert.is-clear { background: var(--auth-ok-bg); border-color: var(--auth-ok-line); color: var(--auth-ok); } .auth-box form button[type="submit"].rl-locked, .auth-box form .auth-btn.rl-locked { opacity: .55; cursor: not-allowed; } /* ── Kayıt yöntemi seçimi — _RegisterMethodChooser (kullanıcı kararı 2026-09-09) ── Gönderici + Taşıyıcı kayıt sayfalarında formun ÜSTÜNDE dört seçim kutusu: Telefon · Google · Outlook/Hotmail · E-posta ve Şifre. İhale tür seçim sayfasının (/Customer/Tender/New) kayıt karşılığı: önce yöntem seçilir, sonra o yolun formu görünür. Masaüstünde kutular yan yana (sayı kadar kolon), ≤640px'de 2×2. Telefon kanalı kapalıyken 3 kutu. Google/Outlook/Telefon kutuları GERÇEK LİNKTİR (o yola gider); "E-posta ve Şifre" kutusu aynı sayfada .reg-pane'i açar. Form yalnız .js-ready altında gizlenir — script çalışmazsa form görünür kalır (sidebar-groups.js ile aynı güvenli varsayılan). */ .reg-methods { display: grid; gap: 10px; margin-bottom: 4px; } .reg-methods[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reg-methods[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reg-methods[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rm-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 9px; min-height: 136px; padding: 16px 8px 14px; border: 1.5px solid var(--auth-line-input); border-radius: 14px; background: var(--auth-surface); color: var(--auth-ink); font-family: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; } .rm-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(16, 24, 40, .4); color: var(--auth-ink); } .rm-tile:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Seçili kutu: rol renginde kalın çerçeve + halka + sağ üstte tik. Yalnız "E-posta ve Şifre" seçili olabilir (diğer üçü sayfadan ayrılır); yine de sınıf geneldir. */ .rm-tile.is-selected { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); background: #FFFFFF; } .rm-tile.is-selected:hover { transform: none; } .rm-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-strong); color: #fff; display: none; align-items: center; justify-content: center; } .rm-check svg { width: 12px; height: 12px; display: block; } .rm-tile.is-selected .rm-check { display: flex; } /* İkon karosu: marka ikonları (Google G, Microsoft kareler) beyaz karoda kendi renkleriyle; telefon + e-posta ikonları rol renginde çizgi ikon (.is-role). Emoji YOK. */ .rm-ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #F9FAFB; border: 1px solid var(--auth-line); } .rm-ic svg { display: block; } .rm-ic.is-role { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); } .rm-t { font-size: .9rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; } .rm-d { font-size: .74rem; line-height: 1.35; color: var(--auth-ink-2); } .rm-tile.is-selected .rm-t { color: var(--accent-strong); } /* Seçim yapılmadan e-posta formu gizli (yalnız JS hazırsa). Script kutu bloğunun hemen ardında satır içi çalışıp .js-ready ekler → form ilk boyamadan önce gizlenir, "form görünüp kayboldu" titremesi olmaz. ?m=email ile gelen sayfada pane .is-open doğar. */ .reg-methods.js-ready ~ .reg-pane:not(.is-open) { display: none; } .reg-pane { scroll-margin-top: 16px; } .reg-pane .auth-sep { margin: 16px 0 18px; } @media (max-width: 640px) { .reg-methods[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rm-tile { min-height: 124px; padding: 14px 8px 12px; } } /* ── DAVET BANDI (_InviteBanner, 2026-09-09) — kartın en üstünde, başlığın ÜSTÜNDE. Kooperatif daveti amber (rol rengi değil, kooperatif kimliği); üye referansı rol aksanı. ── */ .auth-invite { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; margin: 0 0 18px; border: 1.5px solid; } .auth-invite.is-coop { background: #FFFBEB; border-color: #FDE68A; color: #78350F; } .auth-invite.is-ref { background: var(--accent-soft); border-color: var(--accent); color: var(--auth-ink); } .auth-invite .ai-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #D97706; color: #fff; } .auth-invite.is-ref .ai-ic { background: var(--accent-strong); } .auth-invite .ai-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .auth-invite .ai-tx { min-width: 0; } .auth-invite .ai-t { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.02rem; line-height: 1.25; } .auth-invite .ai-t strong { font-weight: 900; } .auth-invite .ai-d { font-size: .84rem; line-height: 1.5; margin-top: 3px; } .auth-invite .ai-code { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 100px; background: #FEF3C7; border: 1px solid #FDE68A; font-weight: 800; font-size: .74rem; margin-left: 2px; }