/* ============================================================ ORBITAL — GİRİŞ EKRANI ============================================================ Uygulamanın vitrini. Kullanıcının markayı gördüğü ilk ve tek "boş" ekran; her yer veriyle dolu olduğu için ambient zemin ancak burada tam güçle çalışabiliyor. İMZA: TEK altıgen yörünge halkası ve üzerinde dolaşan bir düğüm. İlk sürümde iki iç içe altıgen vardı ve üçüncü olarak markanın kendi altıgeni ortada duruyordu — yani imza, marka işaretini üç kez farklı boyutta çizmekten ibaretti. Bu türetmenin en zayıf biçimi: tekrarı sistem sanmak. İki halka ayrıca 9–10px arayla duruyordu ve 60° dönme simetrisi yüzünden her 2.65 saniyede bir üst üste binip tek bir kalın çizgiye çöküyordu. Şimdi: bir halka, gerçek boşluk (çekirdeğin çevresinde çekirdek boyundan geniş bir açıklık), ve halkadan BAĞIMSIZ periyotta dolaşan tek bir plazma düğümü. Cesaret tek yerde harcanıyor; ekranın geri kalanı bilinçli olarak sakin. Bütün ölçüler 4pt ızgarada (orbital.css bölüm 1). ============================================================ */ /* Giriş ekranındayken ambient tam güçte — ekran boş, verinin arkasında durması gereken bir şey yok. Sınıf js/core/auth.js tarafından 'e ekleniyor, initAppShell() kaldırıyor. */ :root.is-login { --ambient-intensity: .9; } :root.is-login[data-theme="light"] { --ambient-intensity: .4; } /* ============ KABUK ============ Eski kural burada kendi radial-gradient'ini ve var(--bg-0) dolgusunu basıyordu; o dolgu ambient katmanların üzerine opak bir kapak gibi biniyordu. Saydam olmak zorunda. */ .login-shell { position: fixed; inset: 0; background: none; display: grid; place-items: center; padding: var(--sp-6); overflow-y: auto; z-index: 3; } /* ============ KART ============ */ .login-card { width: 100%; max-width: 448px; position: relative; border: 1px solid transparent; /* Kart KENDİ dolgusunu taşıyor, --glass-fill'i değil. Ölçüm: paylaşılan cam dolgu (%5.8 beyaz) kullanıldığında kartın içindeki zemin, arkasından geçen nebulaya göre #48547D ile #0B364F arasında değişiyordu ve --text-2 etiketleri 2.49:1 ile 4.57:1 arasında SALINIYORDU — üst kısımda hiç okunmuyordu. Ambient'i kısmak yanlış çözüm olurdu: dönen renk bu ekranın bütün amacı. Doğru çözüm gösteriyi kartın DIŞINDA bırakmak. Bu koyu dolgu kart içini her koşulda ~5.3:1'de sabitliyor, arkasındaki yıldız alanı ise kenarlardan ve blur'dan hâlâ görünüyor. */ background: linear-gradient(180deg, rgba(12,17,32,.76), rgba(6,9,18,.87)) padding-box, var(--glass-edge) border-box; border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-6) var(--sp-6); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09); /* Uygulamadaki iki gerçek blur'dan biri: burada bulanıklaşan şey düşük frekanslı bir gradyan değil, yıldız alanı — kartın arkasındaki noktalar yumuşak bir bokeh'ye dönüşüyor. */ backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); animation: orb-rise .7s var(--ease-out) both; } :root[data-theme="light"] .login-card { background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.92)) padding-box, var(--glass-edge) border-box; box-shadow: var(--shadow-lg); backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%); } /* Üstteki spektrum şeridi — kartın "açık" olduğunu söyleyen tek doygun renk. KPI kartlarındaki şeritle aynı davranış: tam genişlik, köşe yarıçapını izliyor. Önceki sürümde biri içeriden başlıyor biri tam genişlikteydi; aynı detayın iki davranışı yan yana görünüyordu. */ .login-card::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: var(--spectrum-line); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 0 18px rgba(79,127,251,.55); } /* Retikül köşeleri — KPI kartlarıyla AYNI ölçü (--sp-3). */ .login-card::after { content: ""; position: absolute; inset: var(--sp-3); pointer-events: none; background: linear-gradient(var(--reticle), var(--reticle)) top left / var(--sp-3) 1px no-repeat, linear-gradient(var(--reticle), var(--reticle)) top left / 1px var(--sp-3) no-repeat, linear-gradient(var(--reticle), var(--reticle)) bottom right/ var(--sp-3) 1px no-repeat, linear-gradient(var(--reticle), var(--reticle)) bottom right/ 1px var(--sp-3) no-repeat; opacity: .6; } /* ============ İMZA: ALTIGEN YÖRÜNGE ============ Geometri (viewBox 200, kutu 148px → ölçek .74): halka çevrel yarıçapı 96 birim → 71px halka düz kenar mesafesi → 61.5px çekirdek → 40px (yarısı 20px) çekirdeğin çevresindeki açıklık → 41.5px Açıklık çekirdekten geniş: işte bu yüzden yörünge gibi okunuyor. Önceki sürümde açıklık 12px'ti ve halka logoya yapışıp rozet çerçevesine dönüşüyordu. */ .orb-mark { position: relative; width: 148px; height: 148px; flex-shrink: 0; display: grid; place-items: center; } .orb-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .orb-hex { fill: none; stroke: rgba(134,170,255,.55); stroke-width: 1.3; stroke-linejoin: round; } :root[data-theme="light"] .orb-hex { stroke: rgba(47,95,216,.42); } /* Halka ve düğüm AYRI periyotlarda. Aynı gruptayken düğüm hep aynı köşede duruyordu — hareket eden bir nesne değil, halkanın bir parçası gibi okunuyordu. Farklı periyot düğümü halkadan koparıyor: bazen bir köşeye biniyor, bazen düz kenarın ortasından geçiyor. */ .orb-r1 { transform-origin: 100px 100px; animation: orb-spin 44s linear infinite; } .orb-node-orbit { transform-origin: 100px 100px; animation: orb-spin 17s linear infinite; } .orb-node { fill: #7ef0ff; filter: drop-shadow(0 0 9px rgba(34,211,238,1)) drop-shadow(0 0 20px rgba(34,211,238,.55)); } :root[data-theme="light"] .orb-node { fill: #0e94b8; filter: drop-shadow(0 0 7px rgba(28,159,196,.8)); } /* Halkanın merkezindeki marka bloğu. Arkasındaki hale halkayla aynı spektrumu kullanıyor ki ikisi tek bir nesne gibi okunsun. */ .orb-core { position: relative; width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--spectrum); box-shadow: 0 10px 26px -8px rgba(79,127,251,.7), inset 0 1px 0 rgba(255,255,255,.32); animation: orb-core-pulse 6s var(--ease) infinite; } .orb-core svg { width: 66%; height: 66%; } @keyframes orb-spin { to { transform: rotate(360deg); } } @keyframes orb-core-pulse { 0%, 100% { box-shadow: 0 10px 26px -8px rgba(79,127,251,.7), inset 0 1px 0 rgba(255,255,255,.32); } 50% { box-shadow: 0 12px 34px -8px rgba(139,92,246,.85), inset 0 1px 0 rgba(255,255,255,.32); } } /* ============ BAŞLIK ============ */ .login-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--sp-6); } .login-title { font-size: 25px; font-weight: 700; letter-spacing: -0.035em; color: var(--text-0); margin-top: var(--sp-3); } .login-sub { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); margin-top: var(--sp-2); } /* ============ FORM ============ */ .login-form { display: flex; flex-direction: column; gap: var(--sp-4); } .orb-field { display: flex; flex-direction: column; gap: var(--sp-2); } .orb-field label { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--text-2); transition: color .18s var(--ease); } .orb-field:focus-within label { color: var(--brand-2); } .orb-field input { width: 100%; padding: var(--sp-3); font-size: 13.5px; font-family: var(--font); color: var(--text-0); background: rgba(255,255,255,.045); border: 1px solid var(--line-2); border-radius: var(--r-md); outline: none; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } :root[data-theme="light"] .orb-field input { background: rgba(255,255,255,.94); } .orb-field input::placeholder { color: var(--text-3); } .orb-field input:focus { border-color: var(--brand); background: rgba(255,255,255,.07); box-shadow: 0 0 0 3px var(--brand-soft), 0 10px 26px -12px rgba(79,127,251,.7); } :root[data-theme="light"] .orb-field input:focus { background: #fff; } /* Parola alanı mono: maskelenmiş noktalar sabit genişlikte daha düzgün diziliyor. */ .orb-field input[type="password"] { font-family: var(--mono); letter-spacing: .12em; } /* ============ GİRİŞ DÜĞMESİ ============ Rampa koyultulmuş sürüm: parlak spektrum üzerinde beyaz metin ölçüldüğünde 1.93:1'e kadar düşüyordu. Bkz. orbital.css, --spectrum-btn. */ .orb-submit { position: relative; width: 100%; margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-family: var(--font); font-size: 13px; font-weight: 640; letter-spacing: -0.01em; color: #fff; background: var(--spectrum-btn); border: none; border-radius: var(--r-md); cursor: pointer; overflow: hidden; box-shadow: 0 4px 18px -4px rgba(59,99,217,.6), inset 0 1px 0 rgba(255,255,255,.24); transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease); } .orb-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.16) saturate(1.05); box-shadow: 0 12px 30px -8px rgba(59,99,217,.72), inset 0 1px 0 rgba(255,255,255,.3); } .orb-submit:active:not(:disabled) { transform: translateY(0) scale(.99); } .orb-submit:disabled { opacity: .75; cursor: progress; } /* Üzerine gelince yüzeyden geçen ışık. Tek mikro etkileşim, birincil eylemde — her yerde olsaydı gürültü olurdu. */ .orb-submit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.4) 50%, transparent 68%); transform: translateX(-110%); transition: transform .7s var(--ease-out); } .orb-submit:hover:not(:disabled)::after { transform: translateX(110%); } /* Bekleme sırasında aynı ışık kendi başına dönüyor: buton "çalışıyor" demek için metin değiştirmek zorunda kalmıyor. */ .orb-submit:disabled::after { animation: orb-shimmer 1.2s linear infinite; transition: none; } @keyframes orb-shimmer { from { transform: translateX(-110%); } to { transform: translateX(110%); } } /* ============ HATA ============ Hata bir ruh hali değil, bir durum raporu: ne olduğunu söyleyen bir satır, kırmızı bir panik değil. display DEĞİŞMİYOR — canlı bölge her zaman DOM'da ve görünür kutuda; yalnız metni ve opaklığı değişiyor. display:none ile gidip gelen bir aria-live bölgesi ekran okuyucularda güvenilmez biçimde duyuruluyor. */ .login-error { display: block; background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(251,113,133,.32); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: 12px; margin: 0; } .login-error:empty { display: block; padding: 0; border: 0; background: none; height: 0; overflow: hidden; } .login-error:not(:empty) { animation: orb-shake .4s var(--ease); } @keyframes orb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* ============ ALT BÖLÜM ============ */ .login-footer { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); text-align: center; } .login-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-2); } .login-footer .lang-toggle { margin-top: var(--sp-3); } /* ============ AÇILIŞ DİZİSİ ============ Kart yükselirken içindekiler sırayla beliriyor: marka → başlık → alanlar → alt bilgi. Dağınık efektler yerine tek düzenlenmiş an; okuma sırasını da öğretiyor. */ @keyframes orb-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes orb-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } .login-card > * { animation: orb-in .55s var(--ease-out) both; } .login-head { animation-delay: .10s; } .login-form { animation-delay: .18s; } .login-footer { animation-delay: .26s; } /* ============ DAR EKRAN ============ */ @media (max-width: 520px) { .login-shell { padding: var(--sp-4); align-items: start; padding-top: var(--sp-10); } .login-card { padding: var(--sp-6) var(--sp-5) var(--sp-5); border-radius: var(--r-lg); } .login-card::before { border-radius: var(--r-lg) var(--r-lg) 0 0; } .orb-mark { width: 120px; height: 120px; } .orb-core { width: 34px; height: 34px; border-radius: var(--r-sm); } .login-title { font-size: 22px; } } /* ============ HAREKET AZALTMA ============ Halkanın dönmesi, düğümün yörüngesi, nabız ve açılış dizisi tamamen süs. Hepsi kalkıyor; ekran statik ama eksiksiz kalıyor. */ @media (prefers-reduced-motion: reduce) { .login-card, .login-card > *, .orb-r1, .orb-node-orbit, .orb-core, .login-error:not(:empty) { animation: none; } .orb-submit::after { display: none; } .orb-submit:hover:not(:disabled) { transform: none; } }