/* ===================================================================== MİKRO ETKİLEŞİMLER — css/mikro.css (v463, SPEC §4 · KURALLAR v463 ▸ Mikro etkileşimler) Yükleme: css/style.css'ten SONRA (index.html: … style.css → zemin.css → grafik.css → grafik3b.css → BU DOSYA → ayarlar-gorunum.css). style.css'teki eski değerleri (kaydırma belirişi, sekme göstergesi, görünüm geçişi, düğme süreleri) AYNI ya da daha yüksek özgüllükle, SONRA gelerek ezer; style.css'e (BOM + CRLF) dokunmaz. Davranış: js/kaydirma.js (kademeli giriş, sekme göstergesi, aurora imzasının süresi) · js/egim.js (kart eğilmesi). ⚠️ TEK HAREKET KAPISI hareketDuzeyi() (js/tema-erken.js). JS tarafı kapıyı okur (sahne ve eğilme yalnız "tam"); CSS tarafında "kapali" = html.hareket-kapali (style.css tüm süreleri .001ms'ye indirir), işletim sistemi tercihi = prefers-reduced-motion. "azalt"ta CSS geçişleri kısa kalır, JS'li hareketler hiç kurulmaz. ⚠️ HİÇBİR başlangıç karesi öğeyi GÖRÜNMEZ yapmaz (opacity ≥ .55). Blur ve ölçekli giriş YOK. backdrop-filter YOK. ⚠️ #uygulama, .gorunum, üst çubuk, modal ve KAP .panel'e transform VERİLMEZ; eğilme yalnız [data-egim] > .egim-ic. ⚠️ Köke DEĞİŞKEN YAZILMAZ (JS); buradaki :root token'ları durağan stil tanımıdır. Süreler: --hareket-giris 240 / --hareket-cikis 160 (v422, style.css) + aşağıdaki SPEC §4 değerleri. ===================================================================== */ :root { --mikro-giris: 420ms; /* kademeli giriş (panel + satır) */ --mikro-egri: cubic-bezier(.16, 1, .3, 1); /* yumuşak varış — style.css --sahne-egri ile aynı */ --mikro-kesin: cubic-bezier(.2, .8, .2, 1); /* taşmasız: sekme göstergesi */ --mikro-gosterge: 240ms; /* sekme göstergesi */ --mikro-hizli: 120ms; /* hover zemini, satır hover */ --mikro-bas: 80ms; /* düğme :active */ } /* ---------- 1) KADEMELİ GİRİŞ (js/kaydirma.js, data-belir: bekliyor → gordu → tamam) ---------- style.css (KAYDIRMA BELIRISI) opacity 0 + translate3d(0,22px,0) scale(.98) ile başlıyordu → KURALLAR v463: opacity .55 → 1, translateY(8px) → 0, 420 ms; blur ve ölçek YOK. Gizleme/soldurma yine YALNIZ body.kaydirma-acik altında (JS çalışmazsa hiçbir şey soluk kalmaz). Gecikme (--gecikme) kaydirma.js'ten: panel 60 ms × ≤ 6, satır 24 ms × ≤ 8. */ body.kaydirma-acik [data-belir="bekliyor"], body.kaydirma-acik [data-belir-tur="satir"][data-belir="bekliyor"] { opacity: .55; transform: translate3d(0, 8px, 0); } body.kaydirma-acik [data-belir="gordu"], body.kaydirma-acik [data-belir-tur="satir"][data-belir="gordu"] { opacity: 1; transform: none; transition: opacity var(--mikro-giris) var(--mikro-egri) var(--gecikme, 0ms), transform var(--mikro-giris) var(--mikro-egri) var(--gecikme, 0ms); } /* Panel girişi sürerken imleç ışığının kenar/gölge geçişi (style.css: section.gorunum .panel) kaybolmasın */ body.kaydirma-acik section.gorunum .panel[data-belir="gordu"] { transition: opacity var(--mikro-giris) var(--mikro-egri) var(--gecikme, 0ms), transform var(--mikro-giris) var(--mikro-egri) var(--gecikme, 0ms), border-color .2s ease, box-shadow .45s var(--mikro-egri); } /* ---------- 2) AURORA İMZASI (yalnız Kutup Işığı / Buzul Şafağı) ---------- Panel "gordu"ya geçtiği anda ::before 1 px üst kıl çizgisi (ışık-1 → ışık-2 → ışık-3) 900 ms'de soldan sağa BİR KEZ süpürülür (background-position). Başta ve sonda saydam: kalıcı çizgi bırakmaz. SINIF DÖNGÜSÜ YOK — mevcut data-belir hâli kullanılır (MutationObserver maliyeti yok); "gordu" hâli kaydirma.js'te süpürme bitene dek (≥ 1050 ms) sürer. position:relative yalnız bu kısa hâlde (giriş transform'u zaten geçici bir çerçeve kuruyordu). Yalnız panel TÜRÜ (data-belir-tur="panel"; .panel.varlik-satir gibi satır-kartlarda süpürme yok). Dışarıda: kendi ::before'u olan paneller (.cfo-panel, .para-kart, .bakiye-kart) ve Komuta Merkezi (dokunulmaz). */ :root[data-palet="kutup-isigi"] body.kaydirma-acik section.gorunum:not(#komutaGorunum) .panel[data-belir-tur="panel"][data-belir="gordu"]:not(.cfo-panel, .para-kart, .bakiye-kart), :root[data-palet="buzul-safagi"] body.kaydirma-acik section.gorunum:not(#komutaGorunum) .panel[data-belir-tur="panel"][data-belir="gordu"]:not(.cfo-panel, .para-kart, .bakiye-kart) { position: relative; } :root[data-palet="kutup-isigi"] body.kaydirma-acik section.gorunum:not(#komutaGorunum) .panel[data-belir-tur="panel"][data-belir="gordu"]:not(.cfo-panel, .para-kart, .bakiye-kart)::before, :root[data-palet="buzul-safagi"] body.kaydirma-acik section.gorunum:not(#komutaGorunum) .panel[data-belir-tur="panel"][data-belir="gordu"]:not(.cfo-panel, .para-kart, .bakiye-kart)::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 1px; border-radius: 1px; pointer-events: none; background: linear-gradient(90deg, transparent 0, transparent 34%, var(--st-zemin-isik-1) 42%, var(--st-zemin-isik-2) 50%, var(--st-zemin-isik-3) 58%, transparent 66%, transparent 100%) no-repeat; background-size: 300% 100%; background-position: 100% 0; /* ışıklı bant kutunun solunda (görünmez) */ animation: auroraImza 900ms cubic-bezier(.45, 0, .25, 1) var(--gecikme, 0ms) both; } @keyframes auroraImza { /* bant soldan girer, sağdan çıkar */ from { background-position: 100% 0; } to { background-position: 0 0; } } /* ---------- 3) SEKME GÖSTERGESİ (js/kaydirma.js ▸ yerlestir: FLIP, yalnız transform) ---------- translate3d() + scale(), 240 ms cubic-bezier(.2,.8,.2,1) — TAŞMA YOK (eski --sahne-yay hedefi aşıyordu). Genişlik/yükseklik GEÇİŞİ YOK (yerleşim tetiklemez); ölçek FLIP'in başlangıç karesinde, dinlenmede 1. Alt çizgi 2 px --st-sampanya (ışıma yok). Hap (.segment) vurgu zemini aynen. */ .kaydirma-gosterge { transform-origin: 0 0; transition: transform var(--mikro-gosterge) var(--mikro-kesin), opacity .2s ease; } .kaydirma-gosterge[data-ilk] { transition: none; } .kaydirma-gosterge.cizgi { height: 2px; border-radius: 2px; background: var(--st-sampanya, var(--vurgu)); box-shadow: none; } @media (prefers-reduced-motion: reduce) { .kaydirma-gosterge { transition: none; } } /* ---------- 4) GÖRÜNÜM GEÇİŞİ (.gorunum.aktif — style.css ▸ gorunumGel) ---------- Yalnız opacity .55 → 1, 180 ms. Kapta transform YOK. Aynı adlı @keyframes SONRA tanımlandığı için bu kazanır; süre boylamasına (longhand) yazılır → style.css'in prefers-reduced-motion "animation: none" kuralı geçerli kalır. */ @keyframes gorunumGel { from { opacity: .55; } to { opacity: 1; } } .gorunum.aktif { animation-duration: 180ms; } /* ---------- 5) DÜĞME ---------- :active scale(.98) 80 ms (kural style.css'te, süre burada) · hover zemini --metin %6, 120 ms (zeminsiz düğmeler; dolu düğmeler parlaklıkla kalır) · odak 2 px --vurgu, 2 px aralık · koyu Obsidyen ve Fildişi'nde şampanya hale · dokunmatikte hedef yüksekliği ≥ 44 px (genişliğe dokunulmaz: 400 px'te yatay taşma olmasın). */ .btn { transition: filter var(--mikro-hizli) ease, transform var(--mikro-bas) ease, background-color var(--mikro-hizli) ease, border-color var(--mikro-hizli) ease, color var(--mikro-hizli) ease; } @media (hover: hover) { .btn-ikincil:hover:not(:disabled), .btn-metin:hover:not(:disabled) { background-color: color-mix(in srgb, var(--metin) 6%, transparent); } } :where(button, .btn, [role="button"], [role="radio"], [role="tab"], [role="switch"], summary):focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; } :root[data-tema="koyu"][data-palet="obsidyen-zumrut"] :where(button, .btn, [role="button"], [role="radio"], [role="tab"], [role="switch"], summary):focus-visible, :root[data-tema="aydinlik"][data-palet="fildisi-varak"] :where(button, .btn, [role="button"], [role="radio"], [role="tab"], [role="switch"], summary):focus-visible { box-shadow: 0 0 0 5px color-mix(in srgb, var(--st-sampanya) 22%, transparent); } @media (pointer: coarse) { .btn-kucuk, .sekme-serit > button, .periyot-secici > button, .segment > button { min-height: 44px; } } /* ---------- 6) SATIR HOVER (liste / tablo satırları) ---------- Zemin --metin %4, 120 ms + solda 2 px --vurgu (box-shadow inset). Transform YOK. Durum opaklıkla ANLATILMAZ. Tabloda: satırın hücreleri; tıklanabilir satırın (tr.tiklanabilir) daha güçlü mevcut zemini korunur (özgüllüğü yüksek). .kalem kendi zeminini taşır → renk, zemini EZMEMEK için iç gölge katmanıyla bindirilir (geçişlenebilir). */ table.rapor tbody tr > td { transition: background-color var(--mikro-hizli) ease, box-shadow var(--mikro-hizli) ease; } .kalem { transition: box-shadow var(--mikro-hizli) ease; } @media (hover: hover) { table.rapor tbody tr:hover > td { background-color: color-mix(in srgb, var(--metin) 4%, transparent); } table.rapor tbody tr:hover > td:first-child { box-shadow: inset 2px 0 0 var(--vurgu); } .kalem:hover { box-shadow: inset 2px 0 0 var(--vurgu), inset 0 0 0 100vmax color-mix(in srgb, var(--metin) 4%, transparent); } } /* ---------- 7) HERO RAKAM ([data-rakam="kahraman"]; yazı ailesi + rakam biçimi css/tema-paletleri.css'te) ---------- Hanken 300 (Grafit/Porselen/Buzul/Klasik) · Rakam Serif 400 (Obsidyen/Kutup/Fildişi — tek kesimi 400 olduğu için 300 isteği onu seçer, sentez yok). 44 px, mobilde clamp(34px, 9vw, 44px) — tek clamp ikisini de verir. ⚠️ Metin TEK DİZGE kalır: kuruş + " TL" yalnız stiliyle (.6em, --soluk); bölen panel.js ▸ kahramanTutar (son virgülden, textContent). Özgüllük: style.css .bakiye-kart .rakam (0,2,0) aşılır. Değer değişince 160 ms YALNIZ-opacity geçiş: kanca data-degisti (niteliği kaldır → yeniden ekle) ya da el.animate([{opacity:.55},{opacity:1}], 160) — ikisi de hareketDuzeyi() === "tam" iken. */ html [data-rakam="kahraman"][data-rakam] { font-size: clamp(34px, 9vw, 44px); white-space: nowrap; /* v463 test: TEK satır — sığmazsa panel.js ▸ kahramanSigdir küçültür */ font-weight: 300; line-height: 1.05; letter-spacing: -.025em; font-variant-numeric: lining-nums tabular-nums; } [data-rakam="kahraman"] .kahraman-kurus { font-size: .6em; font-weight: inherit; letter-spacing: 0; color: var(--soluk); } :root[data-tema="koyu"][data-palet="obsidyen-zumrut"] [data-rakam="kahraman"] { text-shadow: 0 0 28px color-mix(in srgb, var(--st-primary) 20%, transparent); } [data-rakam="kahraman"][data-degisti] { animation: kahramanGecis 160ms linear; } @keyframes kahramanGecis { from { opacity: .55; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { [data-rakam="kahraman"][data-degisti] { animation: none; } } /* ---------- 8) SAYAÇ (rapor.js ▸ sayacYaz; panel.js bakiye kartları [data-sayac]) ---------- Her karede tam biçim ("1.284.905,42 TL") yazılır → tabular rakam: genişlik oynamaz. */ [data-sayac] { font-variant-numeric: lining-nums tabular-nums; } /* ---------- 9) KART EĞİLMESİ (js/egim.js; sözleşme: [data-egim] > .egim-ic) ---------- En çok 4° (tutar taşıyan kartta 3°), perspective 800px — dönüşüm KARTA DEĞİL iç sarmalayıcıya (kartın data-belir transform'uyla çakışmaz). Değişkenler (--egim-x/-y, --isik-x/-y) kartın KENDİSİNDE. İzlerken 80 ms linear, bırakınca 450 ms; dinlenmede transform: none (yığın bağlamı / çerçeve yalnız izlerken). will-change YALNIZ izlerken. Sarmalayıcı kartın yerleşimini (display, flex/grid, gap) MİRAS alır → kartı çizen dosya içeriği .egim-ic'e sardığında düzen değişmez. :where → özgüllük 0: bileşenin kendi kuralı (örn. .hassas-kadran > .egim-ic) her zaman kazanır. */ :where([data-egim]) { position: relative; } :where([data-egim]) > .egim-ic { display: inherit; flex-direction: inherit; flex-wrap: inherit; align-items: inherit; align-content: inherit; justify-content: inherit; justify-items: inherit; gap: inherit; grid-template-columns: inherit; grid-template-rows: inherit; grid-template-areas: inherit; grid-auto-flow: inherit; grid-auto-columns: inherit; grid-auto-rows: inherit; grid-column: 1 / -1; grid-row: 1 / -1; flex: 1 1 auto; align-self: stretch; justify-self: stretch; min-width: 0; min-height: 0; } [data-egim] > .egim-ic { transform: none; transform-origin: 50% 50%; transition: transform 450ms var(--mikro-egri); } [data-egim][data-egim-etkin] > .egim-ic { transform: perspective(800px) rotateX(var(--egim-y, 0deg)) rotateY(var(--egim-x, 0deg)); transition: transform 80ms linear; will-change: transform; } /* Parlama: kartın üstünde imleci izleyen ışık (koyu .07 / aydınlık .5 beyaz, 240 px). Kartın kendi ::after'ı varsa kart data-egim-parlama="yok" taşır. */ [data-egim]:not([data-egim-parlama="yok"])::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(240px circle at var(--isik-x, 50%) var(--isik-y, 50%), rgba(255, 255, 255, .07), transparent 60%); opacity: 0; transition: opacity 160ms ease; } :root[data-tema="aydinlik"] [data-egim]:not([data-egim-parlama="yok"])::after { background: radial-gradient(240px circle at var(--isik-x, 50%) var(--isik-y, 50%), rgba(255, 255, 255, .5), transparent 60%); } [data-egim][data-egim-etkin]:not([data-egim-parlama="yok"])::after { opacity: 1; } .hassas-kadran[data-egim]::after { border-radius: 50%; } /* hero SVG yedeği yuvarlak: kare parlama olmasın */ /* Kapı kapalıyken (egim.js zaten kurmaz) son emniyet: dinlenme hâli */ html.hareket-kapali [data-egim] > .egim-ic { transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { [data-egim] > .egim-ic, [data-egim][data-egim-etkin] > .egim-ic { transform: none; transition: none; will-change: auto; } [data-egim]::after { transition: none; } } /* ---------- 10) TEMA / PALET DEĞİŞİMİ (js/tema-palet.js ▸ temaGecisiyle) ---------- startViewTransition yalnız zemin.yetenek() === "donanim" VE hareket "tam" iken çağrılır; süre JS'te 220 ms'ye ayarlanır — bu kural getAnimations/updateTiming olmayan tarayıcı için yedektir. 4.646 öğede CSS transition ile renk geçişi YAPILMAZ. Grafikler kendi çapraz geçiş örtüsüyle (grafiktema.js). */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: cubic-bezier(.2, 0, 0, 1); } /* ---------- 11) v470 — KAYITLI ÖZELLİKLER (css/cam-veri.css §14a kart kenar ışığının YUMUŞAK takibi) ---------- Kayıtlı (typed) özellik geçiş alabilir: kenar ışığının merkezi imlece 200 ms'de yetişir. Kayıt küreseldir ama yalnız cam-veri §14a tüketir (yeni ad — v463'ün --isik-x/-y'sine, egim.js'e ve style.css'in v468 ışığına DOKUNULMAZ). Desteklemeyen tarayıcıda (Firefox < 128) özellik kayıtsız kalır → ışık imleci anında izler (v469 davranışı). inherits: false — yalnız ::before'da tanımlı ve tüketilir. */ @property --cam-isik-x { syntax: ""; inherits: false; initial-value: 50%; } @property --cam-isik-y { syntax: ""; inherits: false; initial-value: 0px; }