/* ===================================================================== JARVIS PANELİ · BELİRTEÇLER (tokens.css) · v3 MEVCUT DİL Tek kaynak. Canlı panelin ölçüleri: ../MEVCUT-DIL.md (v3 tabanı); holografik katalog: ../HOLO-DNA.md. v3: Holo v2'nin yapısı ve API'si durur; görünüş canlı panelin diline döner (kutusuz widget + üst kural, cam blok, holo pencere, düz altıgen ağ). v2 dekorları kapalıdır, data-öznitelikle açılır (SOZLESME.md 11). Panel, W, Ç, E, Ayarlar, konsol, telefon ve İkinci Beyin aynı dosyayı yükler. Üç katman: ilkel → anlamsal → bileşen. Kural: bölüm CSS'inde ham renk, ham süre, ham punto YAZILMAZ; her değer buradaki bir değişkenden gelir. 12 Eki (canlı): belirteçler :root'ta DEĞİL, .v3 kökündedir. Canlı panel aynı sayfada kendi --mono, --zemin, --yay, --mute, --sis, --mor, --pr-ease, --pr-yay, --yazi … değişkenlerini :root'ta tutar; v3 değerleri yalnız class="v3" taşıyan kökün içinde geçerlidir. Kip öznitelikleri (data-ortam, data-yogunluk, data-yazi, data-kontrast, data-pil) 'de ya da bir v3 öğesinde olabilir; kural ikisini de karşılar ve yalnız v3 öğelerine dokunur. Ayrıntı: CANLI-NOTLAR.md. ===================================================================== */ .v3{ color-scheme:dark; /* ---------- 1 · İLKEL RENKLER (doğrudan kullanılmaz) ---------- */ /* çelik (soğuk gri) kademesi: zemin → metin */ --c-00:#080B0F; /* zemin */ --c-01:#0B0F14; /* zemin 2: kenar boşluğu, girdi */ --c-02:#0D1218; /* kart (opağa yakın levha) */ --c-03:#111820; /* satır hover, iç alan */ --c-04:#17202A; /* seçili, avatar, segment içi */ --c-05:#1C2631; /* açılır menü, ipucu (opak) */ --c-06:#26313D; /* güçlü ayırıcı */ --c-07:#5F6B78; /* UI sınırı: onay kutusu, segment (3,46:1 · WCAG 1.4.11) */ --c-08:#8794A0; /* eski üçüncül metin; artık yalnız açık temanın pasif rengi */ --c-08a:#9AA6B2; /* üçüncül metin (7,6:1 · Lc 53) */ --c-09:#B0BAC4; /* ikincil metin (9,6:1 · Lc 64) */ --c-10:#C8D0D8; /* açık çelik (yüksek kontrastta ikincil metin) */ --c-10a:#D2D9E0; /* 11 px etiket metni (13,2:1 · Lc 82; en koyu çip zemininde Lc 75+) */ --c-11:#E6EDF3; /* birincil metin (15,9:1 · Lc 95) */ /* yeşil (marka) kademesi */ --y-01:#05140C; /* yeşil zemin üstündeki koyu yazı (11,9:1) */ --y-02:#0C2A1D; --y-03:#145236; --y-05:#2FC57F; --y-06:#46E899; /* MARKA */ --y-07:#8CF3C3; /* açık yeşil: hover, çekirdek parıltısı */ --y-08:#D6FFEA; /* çekirdek ışığı */ /* anlam renkleri */ --a-06:#FFC145; /* amber (11,6:1 · Lc 75) */ --k-06:#FF5C6C; /* kırmızı şekil ve çizgi (6,3:1) — METİNDE KULLANILMAZ */ --k-08:#FF9AA2; /* kırmızı metin (9,3:1 · Lc 63) — en az 12 px */ --k-04:#B3202F; /* dolu kırmızı zemin (beyaz yazı 6,6:1 · Lc 86) */ --z-06:#8ED8F8; /* buz mavisi (11,9:1 · Lc 76) */ /* rgba için üçlüler */ --yesil-r:70,232,153; --amber-r:255,193,69; --kirmizi-r:255,92,108; --buz-r:142,216,248; --celik-r:176,186,196; --metin-r:230,237,243; /* ---------- 2 · ANLAMSAL RENKLER (bölümler bunları kullanır) ---------- */ --zemin:var(--c-00); --zemin-2:var(--c-01); --yuzey-1:var(--c-02); /* widget levhası, kart */ --yuzey-2:var(--c-03); /* hover, iç alan, tablo başlığı */ --yuzey-3:var(--c-04); /* seçili, avatar, kbd zemini */ --yuzey-pop:var(--c-05); /* menü, ipucu, popover (opak) */ --cizgi-1:rgba(var(--metin-r),.07); /* ayırıcı */ --cizgi-2:rgba(var(--metin-r),.11); /* kart çerçevesi */ --cizgi-3:rgba(var(--metin-r),.18); /* güçlü çerçeve, hayalet düğme */ --ui-sinir:var(--c-07); --metin-1:var(--c-11); /* ana metin, sayılar */ --metin-2:var(--c-09); /* ikincil metin, meta (12 px ve üstü) */ --metin-et:var(--c-10a); /* 11 px büyük harf etiket, kbd, (i) */ --metin-3:var(--c-08a); /* yalnız 12 px+ yardımcı olgu (eksen, zaman damgası, yer tutucu) */ --metin-pasif:#5E6B77; /* yalnız devre dışı öğe */ --marka:var(--y-06); /* marka, etkin, canlı, birincil eylem */ --marka-acik:var(--y-07); --marka-yazi:var(--y-01); /* dolu yeşil üstündeki yazı */ --dikkat:var(--a-06); /* dikkat, eşik, seni bekliyor */ --hata:var(--k-06); /* hata şekli, çizgisi, şeridi */ --hata-metin:var(--k-08); /* hata metni */ --hata-dolgu:var(--k-04); /* dolu kırmızı zemin (acil sayı rozeti) */ --hata-dolgu-yazi:#FFFFFF; /* dolu kırmızı üstündeki yazı */ --dikkat-yazi:#1A1204; /* dolu amber üstündeki yazı */ --bilgi:var(--z-06); /* bilgi olayı */ /* 11–12 px etiket ve çip tonları: küçük yazıda Lc 75 tabanı için ana ton --metin-1'e doğru %35 açılır (koyu temada açılır, açık temada koyulaşır). Koyu temada ≈ #7EEAB9 · #F6D082 · #ADDFF6; çip zemininde Lc 78+, açılır yüzeyde (a08 zemin) 75+. Birincil yazı, ikon, çizgi ve 13 px üstü metin ana tonlarda kalır. Not: :root'ta çözülen değer kapsamlı tema değişimini izlemez; bu yüzden .h-et, .h-cip ve .h-widget-hata aynı karışımı kendi üzerinde yeniden tanımlar (bilesenler.css). */ --et-acik:35%; --marka-et:color-mix(in srgb,var(--marka),var(--metin-1) var(--et-acik)); --dikkat-et:color-mix(in srgb,var(--dikkat),var(--metin-1) var(--et-acik)); --bilgi-et:color-mix(in srgb,var(--bilgi),var(--metin-1) var(--et-acik)); /* tonlar (zemin ve çerçeve için hazır karışımlar) */ --marka-a06:rgba(var(--yesil-r),.06); --marka-a08:rgba(var(--yesil-r),.08); --marka-a10:rgba(var(--yesil-r),.10); --marka-a12:rgba(var(--yesil-r),.12); --marka-a20:rgba(var(--yesil-r),.20); --marka-a32:rgba(var(--yesil-r),.32); --marka-a62:rgba(var(--yesil-r),.62); --dikkat-a08:rgba(var(--amber-r),.08); --dikkat-a12:rgba(var(--amber-r),.12); --dikkat-a32:rgba(var(--amber-r),.32); --hata-a12:rgba(var(--kirmizi-r),.12); --hata-a32:rgba(var(--kirmizi-r),.34); --bilgi-a08:rgba(var(--buz-r),.08); --bilgi-a12:rgba(var(--buz-r),.12); --bilgi-a32:rgba(var(--buz-r),.32); --celik-a06:rgba(var(--metin-r),.06); --celik-a10:rgba(var(--metin-r),.10); --celik-a45:rgba(var(--celik-r),.45); /* ---------- 3 · YAZI ---------- */ /* 12 Eki (canlı): önce v3'e özel adlar ('… v3', arac.js yükler; canlının yüz seti değişmez), sonra canlının yüzleri */ --font:'Plus Jakarta Sans v3','Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono v3','JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* rakam, kod, kimlik, teklif no */ --doto:'Doto v3','Doto',var(--mono); /* v3: yalnız küre durum yazısı (canlıdaki BEKLEMEDE, DÜŞÜNÜYOR) */ --yazi:1; /* kullanıcı yazı boyu: Küçük 1 · Orta 1,1 · Büyük 1,2 */ /* tip ölçeği: 11/12/13/14/16/20/28 + gösterim 34/44. 11 px altında metin YOK. */ --t-11:calc(11px * var(--yazi)); --sy-11:16px; /* yalnız 1–2 kelimelik büyük harf etiket, kbd, rozet sayısı */ --t-12:calc(12px * var(--yazi)); --sy-12:16px; /* meta, ikincil, widget başlığı, S düğme */ --t-13:calc(13px * var(--yazi)); --sy-13:20px; /* gövde (en az) */ --t-14:calc(14px * var(--yazi)); --sy-14:20px; /* satır başlığı, form etiketi */ --t-16:calc(16px * var(--yazi)); --sy-16:24px; /* pencere alt başlığı, telefon satırı */ --t-20:calc(20px * var(--yazi)); --sy-20:28px; /* pencere başlığı, küre durumu */ --t-28:calc(28px * var(--yazi)); --sy-28:36px; /* KPI, telefon sayfa başlığı */ --t-34:calc(34px * var(--yazi)); --sy-34:40px; /* gösterim: saat, holo tutar */ --t-44:calc(44px * var(--yazi)); --sy-44:48px; /* gösterim: ana KPI, odak sayacı */ --a-govde:500; --a-orta:600; --a-kalin:700; --a-marka:800; --a-gosterim-34:400; /* 34 px gösterim rakamı */ --a-gosterim-44:300; /* 44 px gösterim rakamı (yalnız tabular rakam; yüksek kontrastta 400) */ --iz-etiket:.08em; /* büyük harf kısa etiket */ --iz-baslik:.04em; /* başlık */ --iz-marka:calc(var(--iz-etiket) * 2); /* tek istisna: JARVIS ve LEVEL UP marka sözcükleri */ /* ---------- 4 · BOŞLUK (4 px ızgarası) ve KÖŞE ---------- */ --b-1:4px; --b-2:8px; --b-3:12px; --b-4:16px; --b-5:20px; --b-6:24px; --b-8:32px; --b-10:40px; --b-12:48px; --b-16:64px; --r-1:4px; /* etiket, kbd, iç denetim */ --r-2:8px; /* düğme, satır, girdi */ --r-3:12px; /* widget, pencere, kart */ --r-hap:999px; --hedef-masa:28px; /* masaüstü en küçük ikincil hedef */ --hedef-dokun:44px; /* dokunmatik en küçük hedef */ /* ---------- 5 · DERİNLİK: gölge, cam, braket ---------- */ --ust-isik:inset 0 1px 0 rgba(255,255,255,.045); /* levhanın üst kenar ışığı */ --golge-1:0 14px 30px -18px rgba(0,0,0,.75); /* widget levhası */ --golge-2:0 24px 48px -22px rgba(0,0,0,.82); /* menü, tost, olay çipi */ --golge-3:0 44px 96px -28px rgba(0,0,0,.88); /* pencere */ --cam-1:blur(6px) saturate(1.2); /* olay çipi, küçük cam */ --cam-2:blur(12px) saturate(1.3); /* menü, tost, rıhtım */ --cam-3:blur(18px) saturate(1.4); /* pencere */ --cam-zemin:linear-gradient(180deg,rgba(22,32,42,.72),rgba(10,15,20,.84)); /* camın kendi zemini */ --cam-zemin-opak:linear-gradient(180deg,#141C25,#0B1016); /* geçiş sırasında, Pil kipinde, telefonda */ --brk-renk:var(--marka-a62); /* pencere braketi (tam) */ /* --brk-dinlen: widget braketi dinlenirken (kartın 4 px dışında). Holo v2'de ışık rengini izler; tanımı aşağıdaki :root,[data-isik] kuralında. Bölüm kendi kapsamında verebilir (ör. --brk-dinlen:transparent → dinlenirken braket yok). */ --brk-kalin:1.5px; --brk-boy:10px; /* widget 10 px · pencere 18 px */ --parilti-yesil:0 0 4px rgba(var(--yesil-r),.55); /* ---------- 6 · KATMANLAR (tek sözleşme) ---------- */ --z-zemin:0; /* petek, ızgara, halka tuvalleri */ --z-icerik:10; /* widget, küre, çıktı halkası */ --z-sahne:100; /* W, E, Ç, konsol, İkinci Beyin */ --z-acilir:200; /* menü, popover, ipucu */ --z-pencere:300; /* modal, çekmece, holo, Ayarlar */ --z-odak:400; /* odak kadranı ve kartları */ --z-bildirim:500; /* tost, son olay çipi, canlı oturum adası */ --z-sistem:600; /* oturum düştü, kritik uyarı */ --z-onizleme:700; /* yalnız önizleme çubuğu (ürüne girmez) */ /* ---------- 7 · HAREKET ---------- */ /* 6 süre. Bunların dışında süre yazılmaz (istisnalar: FLIP 200 ms = --flip, kaptan büyüme 280 ms = --dur-kap). */ --dur-1:70ms; /* hover, anahtar, basma, renk */ --dur-2:120ms; /* solma; kısayolla açılan pencere ve sahne; eski etiketin çıkışı */ --dur-3:180ms; /* menü, popover, sekme hapı, yeni etiketin girişi, braket kilidi */ --dur-4:240ms; /* pencere, çekmece, kart yer değişimi, satır çıkışı, tost */ --dur-5:400ms; /* sahne geçişi (fareyle), küre rıhtımı, holo kabuğu, kenar ışığı */ --dur-6:700ms; /* yalnız oturumun ilk açılışı, İkinci Beyin dalışı, tek tarama ışını */ --dur-kap:280ms; /* yalnız kaptan büyüyen pencere (container transform) açılışı */ --flip:200ms; --kademe:24ms; /* öğe başına; en çok 8 öğe, toplam en çok 240 ms */ --nabiz:1.6s; /* tek nabız süresi */ --nefes:5.2s; /* çalışan ajan, Tam kipte boştaki küre */ /* 4 eğri ailesi */ --ease-standard:cubic-bezier(.2,0,0,1); --ease-enter:cubic-bezier(.05,.7,.1,1); --ease-exit:cubic-bezier(.3,0,.8,.15); --ease-linear:linear; /* yalnız ilerleme ve dönüş */ /* 3 yay (kritik sönümlü yay çözümünden örneklenmiş linear()) */ --yay-ui:linear(0,0.0232,0.0811,0.1592,0.2473,0.3381,0.4268,0.5103,0.5866,0.655,0.7151,0.7671,0.8116,0.8491,0.8804,0.9063,0.9274,0.9445,0.9582,0.9691,0.9776,0.9842,0.9892,0.993,0.9958,0.9978,0.9993,1.0002,1.0009,1.0013,1.0015,1.0015,1); /* ζ 0,9 · aşmasız · konum ve boyut */ --yay-jest:linear(0,0.0251,0.0891,0.1779,0.2799,0.3866,0.4916,0.5902,0.6798,0.7586,0.8261,0.8823,0.9279,0.9636,0.9908,1.0105,1.024,1.0325,1.037,1.0384,1.0376,1.0352,1.0319,1.028,1.0239,1.0199,1.016,1.0126,1.0095,1.0069,1.0047,1.0029,1); /* ζ 0,72 · tepe 1,038 · yalnız sürükle-bırak, rozet sıçraması, küre anlık tepkisi, tik */ --yay-efekt:linear(0,0.0314,0.1054,0.1996,0.3002,0.3986,0.4901,0.5723,0.6444,0.7065,0.7593,0.8037,0.8406,0.8711,0.8962,0.9166,0.9332,0.9467,0.9575,0.9662,0.9732,0.9788,0.9832,0.9867,0.9895,0.9918,0.9935,0.9949,0.996,0.9969,0.9975,0.9981,1); /* ζ 1 · renk, opaklık, parlaklık — asla sekmez */ --m:1; /* hareket çarpanı: Kapalı kipte 0 → translate ve scale düşer, yalnız opaklık kalır */ /* ---------- 8 · YOĞUNLUK: Rahat (varsayılan). Sıkı'da punto değişmez, yalnız boşluk. ---------- */ --kenar:16px; /* sahne kenar boşluğu */ --aralik:16px; /* widget'lar arası */ --w-pad:16px; /* kart, pencere, levha iç boşluğu (v1/v2 adı; widget gövdesi --w-ic kullanır) */ --w-bas:46px; /* widget başlık yüksekliği (canlı .wh: 13 + 23 + 9 + üst kural) */ --w-ic:36px; /* v3: widget gövdesinin yatay iç payı (canlı .wb: 4 + widgetInset 32 = 36 px; 320 px'ten dar widget'ta 16) */ --w-bas-sol:28px; /* v3: widget başlığının sol payı (canlı: ikon kuraldan 28–30 px içeride) */ --h-satir:44px; /* standart liste satırı */ --h-satir-k:36px; /* kompakt satır */ --h-karar:64px; /* karar satırı */ --h-yp:40px; /* yapılacak satırı */ --h-ajan:52px; /* ajan satırı */ --h-tablo:40px; /* tablo satırı */ --h-form:48px; /* form satırı */ --satir-ara:2px; /* satırlar arası */ /* ---------- 10 · HOLO v2: IŞIK, PARLAMA, DOKU (HOLO-DNA.md 1–5) ---------- Işık rengi tek üçlüden gelir: --isik-rgb. Kapsam değiştirirse (ör. hata anı) bütün parlama onu izler. --isik (0–1) ayrı bir şeydir: küre durumunun kenar ışığı ŞİDDETİ (sahne kökünde). */ --isik-rgb:var(--yesil-r); --isik-renk:rgb(var(--isik-rgb)); --isik-cekirdek:var(--y-08); /* beyaza yakın çekirdek ışığı #D6FFEA */ --isik-acik:var(--y-07); /* #8CF3C3 */ /* parlama, holo kenar, holo cam ve doku belirteçleri aşağıda :root,[data-isik] kuralındadır (kapsamlı ışık rengini izlesin diye) */ --doku-gurultu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .95 0 0 0 0 .75 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"); /* altıgen ağ: canlı #hexCv ile aynı geometri (20 px altıgen, yatay 20·√3, dikey 30) ve aynı ışık: beyaz 0,6 px çizgi, merkezde .064 × hexStrength .85 = .054 opaklık; kenara doğru fade² ile söner (.h-zemin maskesi). */ --desen-petek:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.641' height='60' viewBox='0 0 34.641 60'%3E%3Cpath d='M17.32 0L34.64 10L34.64 30L17.32 40L0 30L0 10ZM17.32 40L17.32 60' fill='none' stroke='white' stroke-opacity='.054' stroke-width='.6'/%3E%3C/svg%3E"); --petek-sonum:radial-gradient(farthest-corner at var(--zx,50%) var(--zy,50%),#000 0,rgba(0,0,0,.72) 25%,rgba(0,0,0,.49) 50%,rgba(0,0,0,.3) 75%,rgba(0,0,0,.16) 100%); /* (1 − 0,6·u)² */ --desen-izgara:linear-gradient(rgba(var(--metin-r),.045) 1px,transparent 1px) 0 0/45px 45px,linear-gradient(90deg,rgba(var(--metin-r),.045) 1px,transparent 1px) 0 0/45px 45px; /* ortam hareketi: döngü süreleri Sakin'de --ortam-hiz ile uzar (calc(var(--dur-supur) / var(--ortam-hiz))) */ --ortam-hiz:1; /* Tam 1 · Sakin .45 */ --ortam-guc:1; /* ortam katmanlarının parlaklık çarpanı: Tam 1 · Sakin .55 · Kapalı .35 (durağan) */ --dur-kovala:7.2s; /* kenarda dolaşan ışık: bir tur */ --dur-kovala-hizli:2.4s; /* hover, meşgul */ --dur-supur:11s; /* panel üstünde yavaş ortam ışığı (metnin arkasında ≤ .12) */ --dur-radar:6s; /* radar süpürmesi bir tur */ --dur-yorunge-1:16s; --dur-yorunge-2:26s; --dur-yorunge-3:42s; /* farklı hızda dönen halkalar */ --dur-akis:2.6s; /* veri akışı şeridi */ --dur-parilti:2.2s; /* iskelet ve ilerleme parıltısı */ --dur-halka-nabiz:2.2s; /* rozet ve nokta nabız halkası */ --ease-holo:cubic-bezier(.2,.8,.2,1); /* canlıdaki holoIn eğrisi: belirme */ --ease-projeksiyon:cubic-bezier(.16,1,.3,1); /* projeksiyon açılımı, uzun kuyruk */ --ease-tarama:cubic-bezier(.4,0,.2,1); /* tarama ışını */ --tarama-alfa:.12; /* metnin arkasından geçen ortam hareketinin en yüksek opaklığı */ /* ---------- 11 · v3 MEVCUT DİL: canlı panelin sabitleri (MEVCUT-DIL.md) ---------- Widget kabuğu kutusuzdur: zemin yok, gölge yok; widget'ı 2,5 px'lik krem üst kural taşır, üzerine gelince yeşil çizgi soldan sağa 1 sn'de dolar (canlı .w / .w::after, Panel ayarı ruleWidth 2.5 · ruleOpacity .24 · hoverBar 100). */ --kural:rgba(var(--metin-r),.24); /* canlı rgba(228,237,242,.24) */ --kural-kalin:2.5px; --dur-kural:1s; /* hoverSpeed 1 sn */ --ease-kural:cubic-bezier(.2,.8,.3,1); /* canlı .w::after */ --t-wbas:calc(18px * var(--yazi)); /* widget başlığı: canlı 12,6 × headerSize 1,42 = 17,9 px */ --iz-wbas:3.6px; /* headerTrack 3,6 px (≈ .2em) */ --a-wbas:400; /* canlı .wh ağırlık vermez → 400 */ --mute:#7E8C9B; /* canlı --mute; okunan metinde --metin-3 (11 px tabanında kontrast için bir ton açık) */ --sis:#A3B2C0; /* canlı --warm/--sis: ikincil satır metni */ --r-kart:10px; /* cam blok (.hw-cam) */ --r-pencere:18px; /* holo pencere (.holo-k) */ --r-pop:16px; /* büyük açılır pencere (#todopop .pop 16, #ayarpop 14) */ --r-palet:20px; /* komut paleti */ --ease-canli:cubic-bezier(.2,.75,.2,1); /* HW --e: satır, çubuk, halka, tarama */ --yay-canli:cubic-bezier(.34,1.56,.64,1);/* HW --yay: çubuk sütunu, galeri */ --pr-ease:cubic-bezier(.2,.8,.2,1); /* premium katman: holoIn, prWGir, prKGir */ --pr-yay:cubic-bezier(.34,1.45,.55,1); /* premium katman: prPop (palet, Bağlantılar) */ /* ---------- 12 · CANLI RENKLER: canlıda olup çekirdekte belirteci olmayan tonlar (birebir canlı değer) ---------- Yalnız canlıda o rengi taşıyan yerde kullanılır (e-posta ve kaynak, gönderildi durumu, ajan kimliği, Ayarlar kategorisi, model kimliği). Arayüzün geneli yine yeşil ailesi + buz mavisi; amber dikkat, kırmızı hata. Her ton r,g,b üçlüsüyle gelir. */ --mavi-r:63,200,242; --mavi:rgb(var(--mavi-r)); /* #3FC8F2 · HW --mav: e-posta, kişisel, web/form kaynağı, çekim, Asistan */ --gonderildi-r:120,190,255; --gonderildi:rgb(var(--gonderildi-r)); /* #78BEFF · teklif/posta "gönderildi · görüntülendi · açıldı" */ --mor-r:201,162,255; --mor:rgb(var(--mor-r)); /* #C9A2FF · Ayarlar › Görünüm */ --turuncu-r:255,196,107; --turuncu:rgb(var(--turuncu-r)); /* #FFC46B · Ayarlar › Cihazlarım, özel durum */ --bag-mavi-r:88,199,245; --bag-mavi:rgb(var(--bag-mavi-r)); /* #58C7F5 · Ayarlar › Bağlantılar */ --mor-hw-r:169,124,255; --mor-hw:rgb(var(--mor-hw-r)); /* #A97CFF · HW --mor: Satış, onay aksiyonu, Instagram, satış aşaması */ --turuncu-hw-r:255,159,67; --turuncu-hw:rgb(var(--turuncu-hw-r)); /* #FF9F43 · HW --tur: Armut, Outreach */ --pembe-r:255,111,181; --pembe:rgb(var(--pembe-r)); /* #FF6FB5 · ctwa, Mete */ --mercan-r:255,107,107; --mercan:rgb(var(--mercan-r)); /* #FF6B6B · Avcı, sıcak an */ --nane-r:127,227,196; --nane:rgb(var(--nane-r)); /* #7FE3C4 · takip, Sosyal */ --sis-r:163,178,192; /* #A3B2C0 · --sis üçlüsü */ /* model kimliği (canlı RENK: Jarvis reaktörü, sohbet --sr, #jarvisLine, beyin çarkı --dr). -cek: çekirdek ışığı · -satir: sohbet satırı */ --model-claude-r:70,232,153; --model-claude-cek:210,255,232; --model-claude-satir:140,243,195; --model-codex-r:120,190,255; --model-codex-cek:225,240,255; --model-codex-satir:158,208,255; --model-gemini-r:255,178,64; --model-gemini-cek:255,240,210; --model-gemini-satir:255,208,138; --model-fable-r:255,64,72; --model-fable-cek:255,225,225; --model-fable-satir:255,138,144; --kure-hata-r:255,96,96; /* reaktörün hata mercanı (canlı CANLI_KIRMIZI) */ /* hızlı komut kartı model renkleri (canlı ADJ_RENK: Haiku · Sonnet · Opus · Fable) */ --komut-haiku-r:95,212,196; --komut-haiku:rgb(var(--komut-haiku-r)); /* #5FD4C4 */ --komut-sonnet-r:70,232,153; --komut-sonnet:rgb(var(--komut-sonnet-r)); /* #46E899 */ --komut-opus-r:180,140,255; --komut-opus:rgb(var(--komut-opus-r)); /* #B48CFF */ --komut-fable-r:255,64,72; --komut-fable:rgb(var(--komut-fable-r)); /* #FF4048 */ /* ---------- 9 · İKON ---------- */ --ik-kalin:1.6; /* çizgi kalınlığı (16 px ikon) */ font-variant-emoji:text; } /* ---------- ışık rengini izleyen belirteçler (v3: değerler canlı panelden; MEVCUT-DIL.md) ---------- Bu belirteçler --isik-rgb'den hesaplanır. .v3 kökünde (eskiden :root) çözülen değer kapsamlı değişimi izlemez; bu yüzden data-isik taşıyan her öğe aynı tanımı kendi üzerinde yeniden hesaplar. Kullanım:
… içindeki bütün parlama kırmızıya döner. */ .v3,[data-isik],.h-widget[data-kip="tek"]{ /* metin parlaması (text-shadow) — canlı değerler */ --parla-metin-ince:0 0 12px rgba(var(--isik-rgb),.4); /* geri sayım (.siradaki .geri), ikinci rakam */ --parla-metin:0 0 14px rgba(var(--isik-rgb),.45); /* KPI rakamı (.hw-kpi .a .hw-n) */ --parla-metin-guclu:0 0 20px rgba(var(--isik-rgb),.45); /* saat 18:33, CRM 86.000 ₺ */ --parla-baslik:0 0 30px rgba(var(--isik-rgb),.35); /* yalnız büyük sayfa başlığı; widget başlığı parlamaz */ --parla-dikkat:0 0 14px rgba(var(--amber-r),.35); --parla-hata:0 0 14px rgba(var(--kirmizi-r),.35); --parla-bilgi:0 0 14px rgba(var(--buz-r),.35); /* kutu parlaması (box-shadow): yalnız durağan; canlandırılmaz */ --parla-nokta:0 0 8px rgba(var(--isik-rgb),.7); /* sinyal şeridi, canlı nokta (.hw-s::before) */ --parla-cizgi:0 0 8px rgba(var(--isik-rgb),.6); --parla-kenar:0 0 0 1px rgba(var(--isik-rgb),.26),0 0 22px -8px rgba(var(--isik-rgb),.5); --parla-yogun:0 0 0 1px rgba(var(--isik-rgb),.55),0 0 18px -5px rgba(var(--isik-rgb),.8); /* .hbtn:hover */ --parla-ic:inset 0 0 12px rgba(var(--isik-rgb),.12); --parla-dugme:0 10px 26px -10px rgba(var(--isik-rgb),.8); /* dolu birincil (.htk-dug .ana, .tk-dg .ana) */ /* ikon parlaması (filter) */ --parla-ikon:drop-shadow(0 0 5px rgba(var(--isik-rgb),.55)); /* widget başlık ikonu (.w .wh .gic svg) */ --parla-ikon-guclu:drop-shadow(0 0 6px rgba(var(--isik-rgb),.8)); /* W ray seçili ikon */ --golge-holo:0 40px 90px rgba(0,0,0,.6),0 0 60px rgba(var(--isik-rgb),.06); /* holo pencere (.holo-k) */ --golge-pop:0 40px 120px rgba(0,0,0,.65),0 0 80px rgba(var(--isik-rgb),.08); /* büyük açılır pencere (#todopop .pop) */ --brk-dinlen:transparent; /* v3: dinlenirken braket YOK (canlıda widget braketi yok). data-braket="hover" v2 kilidini açar */ --brk-holo:rgba(var(--isik-rgb),.55); /* holo pencere köşesi: 14 px · 1 px · 10 px içeride */ --brk-cam:rgba(var(--isik-rgb),.7); /* cam blok köşesi: 7 px · 1,5 px · kenarda */ /* holo degrade kenarlar (1 px maske halkasıyla kullanılır; v2 .h-isik ve bölüm panelleri) */ --holo-kenar:linear-gradient(180deg,rgba(var(--isik-rgb),.62),rgba(var(--isik-rgb),.14) 32%,rgba(var(--isik-rgb),.07) 66%,rgba(var(--isik-rgb),.32)); --holo-kenar-yan:linear-gradient(90deg,transparent,rgba(var(--isik-rgb),.7),transparent); /* palet üst çizgisi (#prPalet .kutu::before) */ --dolgu-marka:linear-gradient(135deg,#9CFBCB,var(--marka) 55%,#22B873); /* dolu birincil (canlıdaki degrade) */ /* yüzeyler — canlı değerler (v3) */ --cam-holo-1:linear-gradient(180deg,rgba(var(--isik-rgb),.065),rgba(var(--isik-rgb),.012) 70%); /* cam blok (.hw-cam) — zemin üstünde yarı saydam */ --cam-holo-2:linear-gradient(180deg,rgba(11,17,24,.93),rgba(6,10,15,.9)); /* holo pencere (.holo-k) */ --cam-holo-3:linear-gradient(180deg,rgba(15,21,28,.88),rgba(10,14,19,.93)); /* büyük açılır pencere (#todopop .pop) */ --cam-palet:linear-gradient(170deg,rgba(28,36,44,.96),rgba(10,14,19,.97)); /* komut paleti (#prPalet .kutu) */ --cam-ipucu:rgba(10,15,20,.94); /* ipucu, menü, onay şeridi */ --isik-havuzu:radial-gradient(120% 60% at 50% -10%,rgba(var(--isik-rgb),.08),transparent 60%); /* holo pencerenin üst ışığı (.holo-k::after) */ --kart-kenar:rgba(var(--isik-rgb),.16); /* cam blok çerçevesi */ --kart-ust:inset 0 1px 0 rgba(255,255,255,.03); /* dokular (v2; v3'te varsayılan yüzeylerde YOK — yalnız bölüm açıkça kullanırsa) */ --doku-tarama:repeating-linear-gradient(180deg,rgba(var(--isik-rgb),.05) 0 1px,transparent 1px 3px); /* canlı .hw-cam.tara-cizgi */ --doku-tarama-ince:repeating-linear-gradient(180deg,rgba(var(--isik-rgb),.022) 0 1px,transparent 1px 4px); } [data-isik="marka"]{--isik-rgb:var(--yesil-r)} [data-isik="dikkat"]{--isik-rgb:var(--amber-r)} [data-isik="hata"]{--isik-rgb:var(--kirmizi-r)} [data-isik="bilgi"]{--isik-rgb:var(--buz-r)} [data-isik="celik"]{--isik-rgb:var(--celik-r)} [data-yogunluk="siki"]:where(.v3,.v3 *),[data-yogunluk="siki"] .v3{ --kenar:12px; --aralik:12px; --w-pad:12px; --w-bas:38px; --w-ic:18px; --w-bas-sol:14px; --h-satir:36px; --h-satir-k:32px; --h-karar:52px; --h-yp:32px; --h-ajan:44px; --h-tablo:32px; --h-form:36px; --satir-ara:0px; } /* kullanıcı yazı boyu (Ayarlar › Görünüm) */ [data-yazi="orta"]:where(.v3,.v3 *),[data-yazi="orta"] .v3{--yazi:1.1} [data-yazi="buyuk"]:where(.v3,.v3 *),[data-yazi="buyuk"] .v3{--yazi:1.2} /* yüksek kontrast */ [data-kontrast="yuksek"]:where(.v3,.v3 *),[data-kontrast="yuksek"] .v3{ --metin-2:var(--c-10); --metin-3:var(--c-09); --metin-et:var(--c-11); --et-acik:45%; --cizgi-1:rgba(var(--metin-r),.12); --cizgi-2:rgba(var(--metin-r),.2); --cizgi-3:rgba(var(--metin-r),.3); --a-gosterim-44:500; --a-gosterim-34:600; } /* Pil kipi ve telefonda cam yok: opak zemin. Bulanıklık olmadığı için yüzen cam (--cam-holo-2: tost, alt sayfa, açık pencere) de OPAK olur; yoksa arkadaki metin okunurdu. Kapsamdaki [data-isik] öğesi belirteci yeniden hesapladığı için o da sayılır. */ [data-pil="1"]:where(.v3,.v3 *),[data-pil="1"] .v3{ --cam-1:none; --cam-2:none; --cam-3:none; --cam-zemin:var(--cam-zemin-opak); } [data-pil="1"]:where(.v3,.v3 *),[data-pil="1"] .v3,[data-pil="1"] [data-isik],[data-pil="1"] .h-widget[data-kip="tek"]{ --cam-holo-2:linear-gradient(180deg,#0B1118,#060A0F); --cam-holo-3:linear-gradient(180deg,#0F151C,#0A0E13); --cam-ipucu:#0A0F14; } /* ---------- ORTAM HAREKETİ: Tam / Sakin / Kapalı ---------- Tam : her şey açık (VARSAYILAN). Küre boşta 30 fps, etkin 60 fps; ortam döngüleri tam hızda. Sakin : ortam döngüleri yavaşlar (× 0,45) ve kısılır; .h-dongu sınıfı durur; küre boşta 15 fps, etkin 30 fps. Kapalı : translate/scale yok (--m:0), yalnız opaklık ve renk; tuvaller durum başına tek statik kare. İşletim sistemi azaltılmış hareket istiyorsa ve kullanıcı seçim yapmadıysa Kapalı geçerlidir. */ /* Sakin: ortam döngüleri YAVAŞLAR ve AZALIR (durum animasyonları sürer). .h-dongu = "Sakin'de dursun" isteğe bağlı sınıfı. */ [data-ortam="sakin"]:where(.v3,.v3 *),[data-ortam="sakin"] .v3{--ortam-hiz:.45;--ortam-guc:.55} [data-ortam="sakin"] .h-dongu:where(.v3,.v3 *), [data-ortam="sakin"] .h-dongu:where(.v3,.v3 *)::before, [data-ortam="sakin"] .h-dongu:where(.v3,.v3 *)::after{animation:none!important} [data-ortam="kapali"]:where(.v3,.v3 *),[data-ortam="kapali"] .v3{--m:0;--ortam-guc:.35} [data-ortam="kapali"] *:where(.v3,.v3 *), [data-ortam="kapali"] *:where(.v3,.v3 *)::before, [data-ortam="kapali"] *:where(.v3,.v3 *)::after{ animation-duration:1ms!important; animation-delay:0ms!important; animation-iteration-count:1!important; transition-property:opacity,color,background-color,border-color,fill,stroke!important; transition-duration:var(--dur-2)!important; transition-delay:0ms!important; transition-timing-function:var(--ease-standard)!important; /* tarayıcı varsayılanı "ease" değil */ scroll-behavior:auto!important; } @media (prefers-reduced-motion: reduce){ html:not([data-ortam]) .v3{--m:0} html:not([data-ortam]) *:where(.v3,.v3 *), html:not([data-ortam]) *:where(.v3,.v3 *)::before, html:not([data-ortam]) *:where(.v3,.v3 *)::after{ animation-duration:1ms!important; animation-iteration-count:1!important; transition-property:opacity,color,background-color,border-color!important; transition-duration:var(--dur-2)!important; transition-timing-function:var(--ease-standard)!important; } } /* görünmeyen bölüm ve ekran dışındaki kap: CSS döngüleri durur (Hareket.uykuKapisi) */ .uyku:where(.v3,.v3 *),.uyku *:where(.v3,.v3 *),.uyku *:where(.v3,.v3 *)::before,.uyku *:where(.v3,.v3 *)::after{animation-play-state:paused!important} /* ---------- GEÇİŞ KALIPLARI (View Transitions; Hareket.gecis) ---------- */ /* 12 Eki (canlı): yalnız Hareket.gecis'in açtığı geçişte (html[data-gecis]); belirteçler 'de olmadığı için değerler yedekli */ html[data-gecis]::view-transition-old(root),html[data-gecis]::view-transition-new(root){animation-duration:var(--dur-4,240ms);animation-timing-function:var(--ease-standard,cubic-bezier(.2,0,0,1))} html[data-gecis="eksen-x"]::view-transition-old(root){animation:h-vt-cik-x var(--dur-4,240ms) var(--ease-exit,cubic-bezier(.3,0,.8,.15)) both} html[data-gecis="eksen-x"]::view-transition-new(root){animation:h-vt-gir-x var(--dur-4,240ms) var(--ease-enter,cubic-bezier(.05,.7,.1,1)) both} html[data-gecis="solma"]::view-transition-old(root){animation:h-vt-sol var(--dur-2,120ms) var(--ease-exit,cubic-bezier(.3,0,.8,.15)) both} html[data-gecis="solma"]::view-transition-new(root){animation:h-vt-gel var(--dur-4,240ms) var(--ease-enter,cubic-bezier(.05,.7,.1,1)) var(--dur-2,120ms) both} @keyframes h-vt-cik-x{to{opacity:0;transform:translateX(calc(-24px * var(--m,1)))}} @keyframes h-vt-gir-x{from{opacity:0;transform:translateX(calc(24px * var(--m,1)))}} @keyframes h-vt-sol{to{opacity:0}} @keyframes h-vt-gel{from{opacity:0}}