/* v469 CAM TEMELİ — Görev 1 (MIMARI §B, §C, §D): token'lar, malzeme katmanları, yazı tipi, kapılar. LF. ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────── TEK KAYNAK: --cam-* çekirdek adları YALNIZ burada tanımlanır; cam-kabuk / cam-bilesen / cam-veri yalnız TÜKETİR (kendi ekleri --cam-k-* / --cam-b-* / --cam-v-*). Değerler maketle birebir (tasarim-v469/mockup/cam-maket.css §2). KAPSAM: bütün kurallar :root[data-cam-etkin] önekli (D18). Nitelik yoksa (?demo=1&cam=kapali) bu dosyanın hiçbir token'ı doğmaz → v468 görünümü. Nitelikleri js/tema-erken.js (ilk boyamadan önce) ve js/cam.js (tercih / zemin hız koruması / erişilebilirlik değişince, YALNIZ o an) yazar: data-cam-tercih = sivi|buzlu|duz (kullanıcı) · data-cam-etkin = sivi|buzlu|duz (sonuç). ⚠️ Komuta seçicisi YAZILMAZ (#komutaGorunum, .foton, .fk-*, .km-*) — D2. Yazı tipi body'ye değil kabuk seçicilerine verilir. ⚠️ Filtre ve yarıçap değerleri transition/animation ALMAZ (§C-2). brightness() YOK (kontrastı kaydırır, doğrulayıcı dışı). ⚠️ Opaklık sayıları tasarim-v469/arac/yogunluk-dogrula-cam.mjs ile ÖLÇÜLDÜ (8 palet × 3 canlılık × ince/normal/kalın/buzlu/ sayfa+perde → 0 kalan). Biri değişirse doğrulayıcı yeniden koşulur (aynı tabloyu okur: CAM_OP). ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */ /* ---------- 1) Tema bağımsız: yazı, ölçek, köşe, boşluk, hareket (§B.3, §B.4) ---------- */ :root[data-cam-etkin] { /* Apple cihazında SF Pro SİSTEMDEN (gömülmez, lisans [K20]); Windows/Android'de projenin Hanken Grotesk'i (styles/fonts.css) */ --cam-font: -apple-system, BlinkMacSystemFont, "Hanken Grotesk", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; --cam-font-kod: var(--st-font-mono); /* IBAN, kart no, belge/poliçe no — başka yerde YOK (D8) */ /* 7 kademe (12·13·15·17·22·26·40) */ --cam-y-dipnot: 400 12px/16px var(--cam-font); /* tablo başlığı, çip, gösterge, zaman (duzeltme-2: 500 → 400, D7 3 ağırlık) */ --cam-y-alt: 400 13px/18px var(--cam-font); /* ikincil satır, KPI alt yazısı, yoğun tablo gövdesi */ --cam-y-govde: 400 15px/21px var(--cam-font); /* gövde, liste satırı, düğme */ --cam-y-girdi: 400 15px/21px var(--cam-font); /* girdi — dokunmatikte 16 px (aşağıda; iOS yakınlaştırması FO-18) */ --cam-y-baslik: 600 17px/22px var(--cam-font); /* panel / sayfa başlığı (Headline) */ --cam-y-bolum: 700 22px/28px var(--cam-font); /* kanvas bölüm başlığı (Title 2) */ --cam-y-buyuk: 700 26px/32px var(--cam-font); /* görünüm başlığı (macOS Large Title 26) */ --cam-y-kahraman: 600 40px/44px var(--cam-font); /* Özet kahraman bakiye */ /* izleme (letter-spacing) — kademe başına */ --cam-iz-dipnot: 0; --cam-iz-alt: -.003em; --cam-iz-govde: -.009em; --cam-iz-baslik: -.016em; --cam-iz-bolum: -.02em; --cam-iz-buyuk: -.022em; --cam-iz-kahraman: -.03em; /* Köşe — eşmerkezli: r_iç = r_dış − boşluk (en az 6) */ --cam-r-kabuk: 26px; --cam-r-kart: 22px; --cam-r-satir: 14px; --cam-r-alan: 12px; --cam-r-kapsul: 999px; --cam-r-sayfa: 28px; --cam-r-sayfa-dar: 32px; --cam-r-kart-dar: 24px; --cam-r-ray-oge: 16px; /* 26 − 10 */ --cam-r-damla: 26px; /* sekme çubuğu 32 − 6 */ --cam-r-arac: 18px; /* araç düğmesi 22 − 4 */ /* Boşluk (4 tabanlı) */ --cam-a1: 4px; --cam-a2: 8px; --cam-a3: 12px; --cam-a4: 16px; --cam-a5: 20px; --cam-a6: 24px; --cam-a8: 32px; --cam-a12: 48px; /* Hareket (D16): konum/ölçek yayı ≈ %1,7 aşma; opaklık ease-out. hareketDuzeyi() kapısı aynen (style.css --hareket-* ezmeleri) */ --cam-yay: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1); --cam-giris: var(--hareket-giris, 240ms); --cam-cikis: var(--hareket-cikis, 160ms); --cam-bas: 90ms; /* Yükselti ölçeği 3 kademe; seçim / üzerine gelme / grup tonu tema bloklarında */ } /* linear() yoksa (eski Safari, R6) → mevcut giriş eğrisi */ @supports not (transition-timing-function: linear(0, 1)) { :root[data-cam-etkin] { --cam-yay: var(--egri-giris, cubic-bezier(.22, .9, .3, 1)); } } @media (max-width: 759px) { /* dar ekran: iOS büyük başlık 32/38, kahraman 36/40 */ :root[data-cam-etkin] { --cam-y-buyuk: 700 32px/38px var(--cam-font); --cam-y-kahraman: 600 36px/40px var(--cam-font); } } @media (pointer: coarse) { :root[data-cam-etkin] { --cam-y-girdi: 400 16px/22px var(--cam-font); } } /* ---------- 2) Malzeme katmanları — KOYU (§B.1, §B.2) ---------- Dolgu = paletin nötrü (--panel) × opaklık; camın KENDİ rengi yok. Opaklık sayıları ayrı token (--cam-*-op) → kademe ve canlılık blokları yalnız sayıyı değiştirir, renk formülü tek yerde kalır (custom property'ler aynı öğede hesaplanır). */ :root[data-cam-etkin][data-tema="koyu"] { --cam-ince-op: 58%; /* küçük kontrol camı (YALNIZ bulanıklıkla) — maket 52 → 58: jüri (§D-3) koyu Klasik/Grafit --cam-soluk 4,26 → 4,77 (doymuş GL pikseli, saturate 165) */ --cam-ray-op: 72%; /* Regular — sade (v463 kuşağı); dengeli/canlı aşağıda (= zemin.css v467 sol ray) */ --cam-kalin-op: 86%; /* sayfa, menü, kompakt rayın açık hâli */ --cam-kayan-op: 88%; /* bulanıklık YOKKEN içerik altından kayan Regular/ince cam (§3 notu) */ --cam-dolgu-ince: color-mix(in srgb, var(--panel) var(--cam-ince-op), transparent); --cam-dolgu: color-mix(in srgb, var(--panel) var(--cam-ray-op), transparent); --cam-dolgu-kalin: color-mix(in srgb, var(--panel) var(--cam-kalin-op), transparent); --cam-dolgu-opak: color-mix(in srgb, var(--panel) 96%, transparent); --cam-dolgu-kayan: color-mix(in srgb, var(--panel) var(--cam-kayan-op), transparent); --cam-pencere: color-mix(in srgb, var(--panel) var(--yuzey-op), transparent); /* içerik kartı — BULANIKLIK YOK, v467 tablosu AYNEN */ --cam-filtre: blur(18px) saturate(165%); --cam-filtre-kalin: blur(20px) saturate(150%); /* Işık (speküler) — çizgisiz kenar: yumuşak iç parıltı bandı + katmanlı gölge (D6) */ --cam-parilti: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .085), rgba(255, 255, 255, 0) 46%), radial-gradient(90% 70% at 100% 100%, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 55%); --cam-parilti-pencere: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 42%); /* JÜRİ DEĞERİ — AŞILMAZ */ --cam-isik: inset 0 2px 14px -6px rgba(255, 255, 255, .20), inset 0 0 22px rgba(255, 255, 255, .025), inset 0 -14px 22px -18px rgba(0, 0, 0, .55); --cam-golge-1: 0 1px 2px rgba(0, 0, 0, .22), 0 14px 34px -14px rgba(0, 0, 0, .55); /* içerik kartı */ --cam-golge-2: 0 2px 8px rgba(0, 0, 0, .22), 0 18px 44px -14px rgba(0, 0, 0, .60); /* işlevsel cam */ --cam-golge-3: 0 8px 24px rgba(0, 0, 0, .32), 0 36px 90px -18px rgba(0, 0, 0, .70); /* menü / sayfa */ /* Ton: seçim / üzerine gelme / kart içi grup (kutu değil) */ --cam-sec-op: 14%; /* maket 17 → 14: sekme çubuğu seçili etiketi (vurgu / cam-sec) 4,13 → ≥ 4,5 */ --cam-sec: color-mix(in srgb, var(--vurgu) var(--cam-sec-op), transparent); --cam-vurgu-kaldir: 35%; /* §4b: kabuk camında vurgu YAZISI --metin'e doğru (jüri en az 30 + 5 pay) */ --cam-ust: color-mix(in srgb, #FFFFFF 7%, transparent); --cam-ic: color-mix(in srgb, #FFFFFF 5%, transparent); --cam-odak: color-mix(in srgb, var(--vurgu) 70%, white); /* outline 2px; ≥ 3:1 */ /* Cam üstünde ikincil yazı (§D-2): ham --soluk cam üstünde 3,54–4,08 → yerine bu */ --cam-soluk: color-mix(in srgb, var(--st-on-surface-variant) 65%, var(--st-on-surface)); /* Sayfa (modal) perdesi — bulanıksız, hafif (D14) */ --cam-perde: rgba(2, 5, 12, .46); } :root[data-cam-etkin][data-tema="koyu"][data-zemin-canlilik="dengeli"] { --cam-ray-op: 62%; } :root[data-cam-etkin][data-tema="koyu"][data-zemin-canlilik="canli"] { --cam-ray-op: 56%; } /* ---------- 2b) Malzeme katmanları — AYDINLIK ---------- */ :root[data-cam-etkin][data-tema="aydinlik"] { --cam-ince-op: 50%; --cam-ray-op: 86%; /* sade */ --cam-kalin-op: 82%; --cam-kayan-op: 88%; --cam-dolgu-ince: color-mix(in srgb, var(--panel) var(--cam-ince-op), transparent); --cam-dolgu: color-mix(in srgb, var(--panel) var(--cam-ray-op), transparent); --cam-dolgu-kalin: color-mix(in srgb, var(--panel) var(--cam-kalin-op), transparent); --cam-dolgu-opak: color-mix(in srgb, var(--panel) 96%, transparent); --cam-dolgu-kayan: color-mix(in srgb, var(--panel) var(--cam-kayan-op), transparent); --cam-pencere: color-mix(in srgb, var(--panel) var(--yuzey-op), transparent); --cam-filtre: blur(18px) saturate(180%); --cam-filtre-kalin: blur(20px) saturate(160%); --cam-parilti: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 46%), radial-gradient(90% 70% at 100% 100%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%); --cam-parilti-pencere: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 46%); /* style.css bugünkü değer */ --cam-isik: inset 0 2px 14px -4px rgba(255, 255, 255, .95), inset 0 0 18px rgba(255, 255, 255, .35), inset 0 -14px 24px -18px rgba(24, 38, 74, .16); --cam-golge-1: 0 1px 2px rgba(24, 38, 74, .05), 0 16px 36px -16px rgba(24, 38, 74, .24); --cam-golge-2: 0 2px 8px rgba(24, 38, 74, .07), 0 20px 46px -18px rgba(24, 38, 74, .30); --cam-golge-3: 0 8px 24px rgba(24, 38, 74, .10), 0 36px 90px -20px rgba(24, 38, 74, .36); --cam-sec-op: 13%; --cam-sec: color-mix(in srgb, var(--vurgu) var(--cam-sec-op), transparent); --cam-vurgu-kaldir: 35%; /* §4b: aydınlıkta --metin'e doğru KOYULT (jüri en az 30 + 5 pay) */ --cam-ust: color-mix(in srgb, #101B34 5%, transparent); --cam-ic: color-mix(in srgb, #101B34 3.5%, transparent); --cam-odak: var(--vurgu); --cam-soluk: var(--st-on-surface-variant); --cam-perde: rgba(16, 27, 52, .20); } :root[data-cam-etkin][data-tema="aydinlik"][data-zemin-canlilik="dengeli"] { --cam-ray-op: 64%; } :root[data-cam-etkin][data-tema="aydinlik"][data-zemin-canlilik="canli"] { --cam-ray-op: 58%; } /* ---------- 3) KADEMELER (§C-3, D5) ---------- */ /* buzlu (Apple "Tinted"): her dolgu +14 puan (kalın tavanı koyu 92 / aydınlık 90; sade aydınlık 86+14 → opak 96), filtre hafif */ :root[data-cam-etkin="buzlu"][data-tema] { --cam-filtre: blur(12px) saturate(130%); --cam-filtre-kalin: blur(12px) saturate(130%); } :root[data-cam-etkin="buzlu"][data-tema="koyu"] { --cam-ince-op: 72%; --cam-ray-op: 86%; --cam-kalin-op: 92%; } :root[data-cam-etkin="buzlu"][data-tema="aydinlik"] { --cam-ince-op: 64%; --cam-ray-op: 96%; --cam-kalin-op: 90%; } :root[data-cam-etkin="buzlu"][data-tema="koyu"][data-zemin-canlilik="dengeli"] { --cam-ray-op: 76%; } :root[data-cam-etkin="buzlu"][data-tema="koyu"][data-zemin-canlilik="canli"] { --cam-ray-op: 70%; } :root[data-cam-etkin="buzlu"][data-tema="aydinlik"][data-zemin-canlilik="dengeli"] { --cam-ray-op: 78%; } :root[data-cam-etkin="buzlu"][data-tema="aydinlik"][data-zemin-canlilik="canli"] { --cam-ray-op: 72%; } /* duz: bulanıklık yok. Regular %62 kalır (sol ray içerikle çakışmaz — doğrulanmış); arkasından içerik geçen yüzeyler koyulaşır: sayfa/menü (kalın) → %96; içerik altından kayan Regular/ince cam (araç çubuğu grupları, dar ekran sekme çubuğu ve daire düğmeler, bildirim, grafik ipucu) → --cam-dolgu-kayan %88 (v467 alt menü kuralı: "arkasından geçen yazı menü yazısına karışırdı"). */ :root[data-cam-etkin="duz"][data-tema] { --cam-filtre: none; --cam-filtre-kalin: none; --cam-kalin-op: 96%; } :root[data-cam-etkin="duz"] :is(.gorunum-arac, .grafik-ipucu[data-cam], #camBildirimKok, .ust-bar) { --cam-dolgu: var(--cam-dolgu-kayan); --cam-dolgu-ince: var(--cam-dolgu-kayan); } @media (max-width: 1023px) { :root[data-cam-etkin="duz"] .alt-menu { --cam-dolgu: var(--cam-dolgu-kayan); --cam-dolgu-ince: var(--cam-dolgu-kayan); } } /* Tarayıcıda backdrop-filter yoksa (cam.js zaten "duz" yazar; bu blok CSS kemeri — JS gecikse de aynı sonuç) */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root[data-cam-etkin][data-tema] { --cam-filtre: none; --cam-filtre-kalin: none; --cam-kalin-op: 96%; } :root[data-cam-etkin] :is(.gorunum-arac, .grafik-ipucu[data-cam], #camBildirimKok, .ust-bar, .alt-menu) { --cam-dolgu: var(--cam-dolgu-kayan); --cam-dolgu-ince: var(--cam-dolgu-kayan); } } /* ---------- 4) ERİŞİLEBİLİRLİK (§B.2 son madde, §C-3) ---------- */ /* Azaltılmış saydamlık (Chromium/Firefox; Safari'de yok [K31] → Ayarlar ▸ Cam: Düz tek yol): bütün cam opak, bulanıklık yok */ @media (prefers-reduced-transparency: reduce) { :root[data-cam-etkin][data-tema] { --cam-filtre: none; --cam-filtre-kalin: none; --cam-dolgu: var(--cam-dolgu-opak); --cam-dolgu-ince: var(--cam-dolgu-opak); --cam-dolgu-kalin: var(--cam-dolgu-opak); --cam-dolgu-kayan: var(--cam-dolgu-opak); } } /* Yüksek kontrast (Apple Increase Contrast [K16]): dolgular opak, ışık bandı yerine 2 px --kenar-vurgu kenar (iç halka — bileşenler "box-shadow: var(--cam-isik), …" kurduğu için kenar kendiliğinden gelir; kontur yasağının izinli istisnası) */ @media (prefers-contrast: more) { :root[data-cam-etkin][data-tema] { --cam-dolgu: var(--cam-dolgu-opak); --cam-dolgu-ince: var(--cam-dolgu-opak); --cam-dolgu-kalin: var(--cam-dolgu-opak); --cam-dolgu-kayan: var(--cam-dolgu-opak); --cam-filtre: none; --cam-filtre-kalin: none; /* opak yüzeyin arkasını bulanıklaştırmak boşa iş */ --cam-parilti: none; --cam-isik: inset 0 0 0 2px var(--kenar-vurgu); --cam-soluk: var(--metin); } } /* ---------- 4b) KABUK CAMINDA VURGU YAZISI (§D-2, jüri: tasarim-v469/arac/yogunluk-dogrula-cam.mjs) ---------- Kenar çubuğu / dar ekran sekme çubuğu (.alt-menu), üst çubuk ve bildirim .gorunum DIŞINDA → v467 yazı kaldırması orada YOK; cam (Regular %62/%56 + saturate 165–180) doymuş bir zemin pikselinin üstünde vurgu yazısı (sekme çubuğu seçili etiketi --cam-sec üstünde, "Geri Al") 3,65–4,45'e iniyordu. v467 kalıbıyla: kökte çözülmüş vurgu (--zemin-kok-vurgu, zemin.css) --metin'e doğru %35 (koyu: açılır · aydınlık: koyulaşır). --cam-sec / --cam-odak kökte çözüldüğü için etkilenmez. Sayfa/menü (kalın) gerekmez. */ :root[data-cam-etkin] :is(.alt-menu, .ust-bar, #camBildirimKok) { --vurgu: color-mix(in srgb, var(--metin) var(--cam-vurgu-kaldir), var(--zemin-kok-vurgu, var(--st-primary))); } /* Zorlanmış renkler: bulanıklık yok (gölgeyi tarayıcı zaten kaldırır). Komuta hariç (D2). */ @media (forced-colors: active) { :root[data-cam-etkin] *:not(#komutaGorunum, #komutaGorunum *) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } } /* ---------- 5) YAZI TİPİ ATAMASI — kabuk seçicileri, Komuta HARİÇ (D7, §A.3) ---------- body'ye verilmez: Komuta'nın sans yazıları body'den miras alıyor (piksel farkı 0 şartı). style.css öğeleri "font-family: var(--font)" ile tek tek bağladığı için değişken de kapsam içinde yeniden tanımlanır (mono --font-mono'ya DOKUNULMAZ — D8 Görev 4). */ :root[data-cam-etkin] :is(.alt-menu, .ust-bar, #gorunumUst, main > .gorunum:not(#komutaGorunum), .modal-fon, #camBildirimKok) { --font: var(--cam-font); --st-font: var(--cam-font); font-family: var(--cam-font); } /* Odak halkası tabanı (§B.4): özgüllük (0,1,0) — bileşen kuralları (style.css ve cam-*.css) kendi ofsetini ezer */ :where(:root[data-cam-etkin]) :where(.alt-menu, .ust-bar, #gorunumUst, main > .gorunum:not(#komutaGorunum), .modal-fon, #camBildirimKok) :focus-visible { outline: 2px solid var(--cam-odak); outline-offset: 2px; } /* ---------- 6) GERİ DÖNÜŞ KAPISI (D18) — v469'da DOĞAN öğeler cam kapalıyken görünmez ve yerleşimi değiştirmez ---------- ?demo=1&cam=kapali → nitelik yok → aynı yapıda v468 görünümü (önce/sonra panoları, acil geri dönüş). */ :root:not([data-cam-etkin]) :is(#gorunumUst, .ray-bolum, .cam-kaydirma-kenari, #camBildirimKok, #camAyarSatiri) { display: none; } :root:not([data-cam-etkin]) .gorunum-arac { display: contents; } /* İkon çifti (entegratör, index.html + js/mobilmenu.js): .ikon-v468 = eski ikon (İLK svg — komuta.js ▸ ikonYap kutu ikonunu oradan okur; Komuta v469'da değişmez, D2) · .ikon-cam = v469 tek-glif ikonu (MIMARI §B.4). Cam açıkken eskisi, kapalıyken yenisi gizli. */ :root:not([data-cam-etkin]) svg.ikon-cam { display: none; } :root[data-cam-etkin] svg.ikon-v468 { display: none; } /* ---------- 7) ÖLÇÜM KARTI (?demo=1&cam-olcum=1 — yalnız demo; js/cam.js üretir) ---------- Gerçek kullanıcıyı etkilemez (demo dışında öğe hiç doğmaz). Opak, bulanıksız: ölçtüğü şeye kendi yükünü eklemesin. */ #camOlcumKart { position: fixed; z-index: 2147483000; left: 50%; top: 24px; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; padding: 18px 20px; border-radius: 22px; background: var(--panel, #0F1420); color: var(--metin, #EAF0FC); box-shadow: 0 8px 24px rgba(0, 0, 0, .32), 0 36px 90px -18px rgba(0, 0, 0, .7); font: 400 14px/20px var(--cam-font, system-ui, sans-serif); font-variant-numeric: tabular-nums lining-nums; } #camOlcumKart h2 { font: 700 19px/24px var(--cam-font, system-ui, sans-serif); letter-spacing: -.016em; margin: 0 0 4px; } #camOlcumKart p { margin: 6px 0; } #camOlcumKart table { width: 100%; border-collapse: collapse; margin: 10px 0; } #camOlcumKart th, #camOlcumKart td { padding: 6px 8px; text-align: right; border: 0; } #camOlcumKart th:first-child, #camOlcumKart td:first-child { text-align: left; } #camOlcumKart th { font-weight: 600; font-size: 12px; } #camOlcumKart tbody tr:nth-child(odd) { background: color-mix(in srgb, currentColor 6%, transparent); } #camOlcumKart .cam-olcum-durum { font-weight: 600; } #camOlcumKart .cam-olcum-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } #camOlcumKart button { min-height: 36px; padding: 0 14px; border-radius: 18px; border: 0; cursor: pointer; font: 600 14px/1 var(--cam-font, system-ui, sans-serif); background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; } #camOlcumKart button:focus-visible { outline: 2px solid var(--cam-odak, currentColor); outline-offset: 2px; } /* ---------- 8) v470 MİKRO ETKİLEŞİM token'ları (KURALLAR v470 ▸ "Mikro etkileşimler") ---------- Yalnız token (bu dosya transition/animation YAZMAZ — §C sözleşmesi). Tüketen: cam-bilesen §12, cam-kabuk §8, cam-veri §14, js/cam.js. Yaylar sönümlü yay denkleminden örneklendi (1 − e^(−ζωt)(cos ω_d t + ζω/ω_d · sin ω_d t), RDP ±0,004): · --cam-yay-birak ζ .62 — bırakış/geri dönüş; %8 aşma (ölçek .97 → 1,0025: görünmez ama "canlı"), %48'de tepe. · --cam-yay-bildirim ζ .72 — bildirim girişi; %4 aşma. Basış GECİKMESİZ: 70 ms ease-out (parmak kalkmadan geri bildirim). Kapı aynen: html.hareket-kapali → style.css süreleri .001 ms; prefers-reduced-motion → bileşen kuralları transform/animation'ı kaldırır. */ :root[data-cam-etkin] { --cam-bas-in: 70ms; --cam-bas-egri: cubic-bezier(.2, 0, 0, 1); --cam-birak: 460ms; --cam-yay-birak: linear(0, .008 1.5%, .029 3%, .069 4.8%, .12 6.5%, .238 9.8%, .515 16.5%, .632 19.5%, .738 22.5%, .822 25.3%, .894 28%, .953 30.8%, 1.002 33.8%, 1.039 36.8%, 1.074 42%, 1.083 48.3%, 1.074 53.5%, 1.024 68.8%, 1.004 77.8%, .993 91%, .994 99.8%, 1); --cam-yay-bildirim: linear(0, .007 1.3%, .025 2.5%, .06 4%, .106 5.5%, .218 8.5%, .472 14.5%, .582 17.3%, .681 20%, .767 22.8%, .839 25.5%, .902 28.5%, .951 31.5%, .986 34.5%, 1.009 37.3%, 1.025 40.3%, 1.038 47%, 1.004 76%, 1); --cam-damla-sure: 420ms; /* seçim damlası (kenar çubuğu, sekme çubuğu, sekme şeridi) — js/cam.js okur */ --cam-odak-sure: 180ms; /* odak halkası "oturma" (macOS: halka büyükten kontrole oturur) */ --cam-isik-sure: 200ms; /* kart kenar ışığının imleci izleme gecikmesi (yumuşak takip) */ } @supports not (transition-timing-function: linear(0, 1)) { :root[data-cam-etkin] { --cam-yay-birak: cubic-bezier(.34, 1.36, .64, 1); --cam-yay-bildirim: cubic-bezier(.3, 1.2, .6, 1); } } /* Kart kenar ışığı (cam-veri §14): imleç yakınında camın KENARI ışıl ışıl — renksiz, yarıçapı izleyen iç ışık (inset gölge 12 px bulanık → kenardan 10 px içeride ≤ .03 söner; okunurluk sözleşmesi), radyal maskeyle YALNIZ imlecin çevresinde (çevre boyu halka değil). --cam-golge-kalk: kart bir kademe yükselir (gölge-1 + kalk ≈ gölge-2) — opaklıkla açılır (yalnız opacity animasyonu). */ :root[data-cam-etkin][data-tema="koyu"] { --cam-kenar-isik: rgba(255, 255, 255, .58); --cam-golge-kalk: 0 4px 10px -2px rgba(0, 0, 0, .16), 0 22px 46px -18px rgba(0, 0, 0, .42); } :root[data-cam-etkin][data-tema="aydinlik"] { --cam-kenar-isik: rgba(255, 255, 255, .98); --cam-golge-kalk: 0 4px 12px -2px rgba(24, 38, 74, .08), 0 24px 48px -20px rgba(24, 38, 74, .28); } /* ---------- 9) v507 PANEL OPAKLIĞI — kullanıcı kaydırıcısı (Ayarlar ▸ Görünüm ▸ Arka plan ▸ Panel opaklığı; KURALLAR v507) ---------- Kök niteliği data-panel-opaklik = N (adım 5; js/tema-erken.js ▸ PANEL_OPAKLIK aralığı). 0 = VARSAYILAN → nitelik HİÇ yazılmaz → bu blok ve cam-veri §15 eşleşmez → bugünkü görünüm, piksel farkı 0. Tek ayar değişkeni u = --panel-op-u = N / 100: etkin = kök + (100% − kök)·max(0, u) + kök·min(0, u)·alt u > 0 → kalan saydamlığın u'su kapanır (u = 1 → TAM OPAK, "veriler daha okunur") · u < 0 → kök opaklık (1 + u) katına iner. "kök" = paletin × canlılığın --yuzey-op'u (tema-paletleri.css / zemin.css — burada DEĞİŞMEZ); kökte ÇÖZÜLMÜŞ kopyası --yuzey-op-kok (özdeğişken kendini referans alamaz → v467 --zemin-kok-* kalıbı). Uygulama YALNIZ içerik katmanında (cam-veri.css §15: .gorunum, Komuta hariç); kabuk camı (kenar çubuğu, sekme çubuğu, üst çubuk, araç çubuğu), sayfa/menü/pencere ve bildirim ETKİLENMEZ. --panel-op-alt: azaltılmış saydamlık / yüksek kontrast isteyen sistemde 0 → kaydırıcı yalnız OPAKLAŞTIRIR. ⚠️ JS köke değişken YAZMAZ (v424/v463 kuralı) — yalnız nitelik; sayılar aşağıdaki üretilmiş adımlardan. */ :root[data-cam-etkin][data-panel-opaklik] { --yuzey-op-kok: var(--yuzey-op); --panel-op-u: 0; --panel-op-alt: 1; } /* Eksi tarafın KONTRAST BEDELİ iki yoldan ödenir (ikisi de yalnız u < 0'da, |u| ile orantılı; artı tarafta / varsayılanda 0): (1) CAM KARARTMA (cam-veri §15): kart camının rengi temanın ucuna kayar (koyu: siyaha, aydınlık: beyaza) %KD·|u| — arka plan daha çok görünür ama "füme cam" ardında; yazı renkleri DEĞİŞMEZ. (2) YAZI KALDIRMA (cam-veri §15b, v467 kalıbı): kart içindeki yazı rolleri --metin'e doğru %K·|u| — yalnız camın karartamadığı payı kapatacak kadar (durum renkleri anlamını korur). K ve KD ÖLÇÜLDÜ. */ :root[data-cam-etkin][data-panel-opaklik] { --panel-op-kaldir-k: 0.6; --panel-op-karart-k: 4; --panel-op-kaldir: clamp(0%, calc(-100% * min(0, var(--panel-op-u)) * var(--panel-op-kaldir-k) * var(--panel-op-alt)), 100%); --panel-op-karart: clamp(0%, calc(-100% * min(0, var(--panel-op-u)) * var(--panel-op-karart-k) * var(--panel-op-alt)), 100%); } :root[data-cam-etkin][data-tema="koyu"][data-panel-opaklik] { --panel-op-uc: #000; } :root[data-cam-etkin][data-tema="aydinlik"][data-panel-opaklik] { --panel-op-uc: #FFF; } /* PANEL-OPAKLIK-ADIMLAR:BAS (üretildi; aralık -30..100, adım 5 — js/tema-erken.js ▸ PANEL_OPAKLIK ile AYNI, test) */ :root[data-cam-etkin][data-panel-opaklik="-30"] { --panel-op-u: -.3; } :root[data-cam-etkin][data-panel-opaklik="-25"] { --panel-op-u: -.25; } :root[data-cam-etkin][data-panel-opaklik="-20"] { --panel-op-u: -.2; } :root[data-cam-etkin][data-panel-opaklik="-15"] { --panel-op-u: -.15; } :root[data-cam-etkin][data-panel-opaklik="-10"] { --panel-op-u: -.1; } :root[data-cam-etkin][data-panel-opaklik="-5"] { --panel-op-u: -.05; } :root[data-cam-etkin][data-panel-opaklik="5"] { --panel-op-u: .05; } :root[data-cam-etkin][data-panel-opaklik="10"] { --panel-op-u: .1; } :root[data-cam-etkin][data-panel-opaklik="15"] { --panel-op-u: .15; } :root[data-cam-etkin][data-panel-opaklik="20"] { --panel-op-u: .2; } :root[data-cam-etkin][data-panel-opaklik="25"] { --panel-op-u: .25; } :root[data-cam-etkin][data-panel-opaklik="30"] { --panel-op-u: .3; } :root[data-cam-etkin][data-panel-opaklik="35"] { --panel-op-u: .35; } :root[data-cam-etkin][data-panel-opaklik="40"] { --panel-op-u: .4; } :root[data-cam-etkin][data-panel-opaklik="45"] { --panel-op-u: .45; } :root[data-cam-etkin][data-panel-opaklik="50"] { --panel-op-u: .5; } :root[data-cam-etkin][data-panel-opaklik="55"] { --panel-op-u: .55; } :root[data-cam-etkin][data-panel-opaklik="60"] { --panel-op-u: .6; } :root[data-cam-etkin][data-panel-opaklik="65"] { --panel-op-u: .65; } :root[data-cam-etkin][data-panel-opaklik="70"] { --panel-op-u: .7; } :root[data-cam-etkin][data-panel-opaklik="75"] { --panel-op-u: .75; } :root[data-cam-etkin][data-panel-opaklik="80"] { --panel-op-u: .8; } :root[data-cam-etkin][data-panel-opaklik="85"] { --panel-op-u: .85; } :root[data-cam-etkin][data-panel-opaklik="90"] { --panel-op-u: .9; } :root[data-cam-etkin][data-panel-opaklik="95"] { --panel-op-u: .95; } :root[data-cam-etkin][data-panel-opaklik="100"] { --panel-op-u: 1; } /* PANEL-OPAKLIK-ADIMLAR:SON */ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root[data-cam-etkin][data-panel-opaklik] { --panel-op-alt: 0; } }