/* ============================================================ YOYSTRO PANEL TASARIM SİSTEMİ — TOKEN'LAR TARİHÇE: 2026-08-21 yoystro-web/tasarim-sistemi'nden kopyalandı; 2026-08-25 kararıyla marka kimliği PANELDE yaşar (bu dosya tek doğruluk kaynağıdır, web'e geri kopyalanmaz); 2026-09-05 sabah "Atölye Işığı" (D1–D4) ile üç yüzey + ışık + 8pt ızgara geldi. A2 · "KOMUTA AMBER" (2026-09-05 akşam, karar). Kaynak: Claude Design projesi "Tasarımı Premium Hale Getirme" (Yon A2 - Komuta Amber, Panel A2 - Ekranlar/Giris/Mobil). Üç radikal yön arasından A'nın düzenini (ikon rayı, ⌘K komut çubuğu, sağda canlı akış paneli) C'nin amber paletiyle seçti. Bu dosyada değişen: palet (gece daha derin sıcak siyah, gündüz parşömen), yazı ailesi (Geist; logo Chakra Petch'te KALIR), köşe (kart 10px, kontrol 6px, hap 999px), kahraman sayı 72px, ray/sağ panel/komut çubuğu ölçüleri. Token ADLARI korundu: panel.css, testler ve karşılama sayfası aynı adları tüketmeye devam eder. ⚠️ LOGO DEĞİŞMEZ (kural, 2026-09-05): `--logo-aile`, `--punto-logo`, `--aralik-logo`, `--logo-*-boy/en` ve varlik/* bu dalgada DA dokunulmadı; yalnız `--baslik`/`--govde` Geist'e geçti ve logotype kendi ailesini ayrı token'dan alır. :root = GECE teması (varsayılan; anahtar sözleşmesi DEĞİŞMEDİ) [data-theme="gunduz"] = GÜNDÜZ teması İşaretleme: - "ölçüldü" : oran WCAG bağıl parlaklıkla HESAPLANDI (--zemin'e karşı; --zemin2/--zemin3 üstünde de ≥4.5 doğrulandı — kozmetik_kontrast.test.js bunu her koşumda yeniden hesaplar, buradaki sayı bayatlarsa test kırılır) - "türetildi": aynı aileden üretildi ============================================================ */ :root { color-scheme: dark; /* ---------- RENK — zemin (A2: derin sıcak siyah; ray ve gövde aynı ton) ---------- */ --zemin: #0f0e0c; /* ölçüldü — gövde ve ray tabanı */ --zemin2: #171512; /* ölçüldü — kart / panel yüzeyi */ --zemin3: #201d18; /* ölçüldü — hover satırı, çip, ikon kabı, ilerleme rayı, açılır katman */ --zemin-seffaf: rgba(15, 14, 12, .9); /* türetildi — yapışkan üst çubuk zemini */ /* Kod/terminal yüzeyi (A2: sağ paneldeki canlı akış, kanıt fark görünümü): karttan bir ton DERİN, gövdeyle aynı. Ayrı token, çünkü gündüzde kart beyaz kalırken kod yüzeyi parşömene döner (yüzey ilişkisi tersine). */ --zemin-kod: #0f0e0c; /* türetildi — gece: gövdeyle aynı */ /* ---------- RENK — metin ---------- */ --metin: #ece7dc; /* ölçüldü — gövde metni (15.65:1) */ --parlak: #f7f3ea; /* ölçüldü — başlık, büyük sayı (17.42:1) */ --soluk: #a49d8f; /* ölçüldü — ikincil metin (7.16:1; zemin3 6.24) */ --kucukgri: #8a8478; /* ölçüldü — dekoratif / ≥24px büyük metin (5.19:1) */ --kucukgri-metin: #968f82; /* ölçüldü — küçük-metin-güvenli hâli (6.02:1; zemin3 5.24) */ /* ---------- RENK — vurgu (A2: C yönünün amberi; markanın TEK vurgusu) ---------- Birincil düğme artık düz dolgu değil dikey GRADYAN (`--vurgu-gradyan`, açık amber → derin amber) ve düğme metni mürekkep (`--vurgu-uzeri`): tasarımda "Yeni iş" / "Bir iş yaptır" böyle çizilir. */ --vurgu: #e39a52; /* ölçüldü — rozet, aktif kenar, ikon, çubuk (8.28:1) */ --vurgu-metin: #eaa964; /* ölçüldü — küçük-metin-güvenli hâli, bağlantı (9.52:1) */ --vurgu-derin: #c9772c; /* türetildi — gradyan dibi, hover kenarı */ --vurgu-uzeri: #15120d; /* ölçüldü — amber üstündeki metin (8.28:1 vurgu üstünde) */ --vurgu-zemin: rgba(227, 154, 82, .14); /* türetildi — kutlama bandı, .rozet-vurgu, çip zemini */ --vurgu-gradyan: linear-gradient(180deg, #f0b46a 0%, #d98a3c 100%); /* türetildi — birincil düğme */ --vurgu-halka: rgba(227, 154, 82, .28); /* türetildi — birincil düğme dış parıltısı (gölge) */ /* A2 · kural-kota-giris kolu: AMBER HAIRLINE. Kesikli kenar `--cizgi-koyu` ile çizilince kutu "pasif/eksik" okunuyordu; tasarım kaynağında o kenar AMBERdir (davet edici bir sınır, nötr bir çerçeve değil). `--vurgu`nun alfalı hâli; yeni bir renk ailesi doğmaz. */ --vurgu-cizgi: rgba(227, 154, 82, .40); /* türetildi — kesikli kayıt kutusu kenarı */ /* ---------- RENK — çizgi ---------- */ --cizgi: rgba(255, 255, 255, .07); /* türetildi — ince ayırıcı */ --cizgi-koyu: rgba(255, 255, 255, .16); /* türetildi — form odak/hover kenarı */ /* ---------- RENK — durum (yalnız rozet/uyarı/nokta; süsleme rengi değil) ---------- */ --olumlu: #8fc994; /* ölçüldü — geçti / kanıt hazır (10.06:1) */ --uyari: #d3b36a; /* ölçüldü — beklemede / dikkat (9.58:1) */ --olumsuz: #e07d74; /* ölçüldü — geçmedi / insana devredildi (6.76:1) */ --olumsuz-metin: #e8928a; /* ölçüldü — küçük-metin-güvenli hâli (8.19:1) */ --bilgi: #a3adb8; /* ölçüldü — nötr bilgi (8.48:1) */ --olumlu-zemin: rgba(143, 201, 148, .14); /* türetildi */ --uyari-zemin: rgba(211, 179, 106, .14); /* türetildi */ --olumsuz-zemin: rgba(224, 125, 116, .14); /* türetildi */ --bilgi-zemin: rgba(163, 173, 184, .12); /* türetildi */ --notr-zemin: rgba(164, 157, 143, .12); /* türetildi — --soluk'un alfalı hâli */ /* ---------- RENK — grafik (A2: "Son 30 gün", "Günlük kullanım" çubukları) ---------- Dolu çubuk amber, dinlenen çubuk üçüncü yüzey; ikinci renk YOK. */ --grafik-dolu: var(--vurgu); --grafik-sonuk: var(--zemin3); /* ---------- TİPOGRAFİ — aile ---------- A2: Geist (Google Fonts) hem başlık hem gövde; tek aile, ağırlıkla hiyerarşi. Kod/meta/zaman/kimlik tek eşit aralıklı yığın (sistem monospace; üçüncü bir Google ailesi ÇEKİLMEZ — kozmetik_kurallar "en fazla 2 aile" çivisi). Logotype AYRI token: `.logo` Chakra Petch'te kalır (kural), başka hiçbir yer onu tüketmez. */ --baslik: 'Geist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --govde: 'Geist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --kod: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --logo-aile: 'Chakra Petch', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; /* ---------- TİPOGRAFİ — punto ---------- "Sayfa başlığı küçük, veri büyük" (D1) korunur; A2 kahraman sayıyı 72'ye çıkarır, tablo/liste 13-14, meta 12. Asgari metin 12px (2026-08-24 UX denetimi P0, 70 yaş personası) DEĞİŞMEDİ. */ --punto-mikro: 12px; /* rozet, th, etiket, durum */ --punto-kucuk: 12px; /* bant, kart numarası, kimlik */ --punto-etiket: 12px; /* bölüm etiketi, kod, meta satırı */ --punto-yardimci: 13px; /* kart açıklaması, giriş cümlesi, tablo ikincil hücre */ --punto-nav: 14px; /* liste satırı, tablo, düğme, komut çubuğu */ --punto-logo: 15px; /* SAHİBİ KURALI: logo AYNI kalır */ --punto-zaman-metin: 14px; /* zaman çizgisi metni */ --punto-govde: 16px; /* gövde */ --punto-vurgulu: 17px; /* karşılama dert kartı metni (panelde kullanılmaz) */ --punto-h3: 16px; /* A2: kart başlığı 18 -> 16/600 (kart başlığı küçük, veri büyük) */ --punto-h2: 22px; /* bölüm başlığı, selamlama */ --punto-h1: 28px; /* PANEL sayfa başlığı */ --punto-h1-mobil: 22px; /* <=760px sayfa başlığı */ --punto-h1-buyuk: 36px; /* A2: giriş kahraman başlığı (tanıtım cümlesi) */ --punto-sayi-orta: 24px; /* A2 YENİ — metrik şeridi sayısı (kanıt/denetim/kiracı şeritleri) */ --punto-sayi: 32px; /* A2: metrik kartı sayısı 40 -> 32 */ --punto-sayi-hero: 72px; /* A2: Bugün'ün TEK kahraman sayısı 64 -> 72 */ --punto-sayi-hero-mobil: 44px; /* kahraman sayı <=760px */ /* KARŞILAMA SAYFASI ÖLÇEĞİ — eski panel değerlerinin kopyası (karsilama.css tüketir). */ --punto-h3-karsilama: clamp(19px, 2.4vw, 24px); --punto-h2-karsilama: clamp(26px, 4.6vw, 52px); --punto-h1-karsilama: clamp(30px, 6.4vw, 74px); --punto-sayi-karsilama: clamp(30px, 3.6vw, 44px); /* ---------- TİPOGRAFİ — harf aralığı ---------- Büyük harf yalnız ÜÇ yerde (bölüm etiketi, rozet, th), takip .10-.12em; düğme cümle hâli. Karşılama kendi takibini `-karsilama` sonekiyle korur. */ --aralik-logo: .42em; /* ölçüldü — SAHİBİ KURALI, dokunulmaz */ --aralik-ray: .34em; /* yalnız karşılama rayı */ --aralik-mikro: .12em; /* rozet, th, etiket */ --aralik-etiket: .10em; /* kod, durum, saat, meta */ --aralik-durum: var(--aralik-etiket); --aralik-saat: var(--aralik-etiket); --aralik-cta: 0; /* düğme cümle hâli */ --aralik-kod: var(--aralik-etiket); --aralik-mikro-karsilama: .3em; --aralik-cta-karsilama: .24em; --aralik-dar: .14em; /* alt bilgi bağlantıları */ --aralik-id: .06em; /* denetim kimliği, kod etiketi */ --aralik-sik: .02em; /* özellik değeri dar takip */ --aralik-h2: -.01em; --aralik-h1: -.02em; /* A2: Geist'te başlık biraz daha sıkı */ --aralik-sayi: -.03em; /* A2: 72px sayı sıkı takip */ /* ---------- TİPOGRAFİ — satır yüksekliği ---------- */ --satir-govde: 1.6; --satir-siki: 1.5; /* A2: kart metni 1.55 -> 1.5 */ --satir-h2: 1.12; --satir-h1: 1.06; --satir-baslik: 1.15; /* panel başlıkları */ --satir-sayi: 1; /* metrik ve kahraman sayı */ /* ---------- TİPOGRAFİ — ağırlık (Geist 400/500/600/700 yüklü) ---------- */ --agirlik-ince: 300; --agirlik-normal: 400; --agirlik-orta: 500; /* düğme, nav seçili, etiket, tablo başlığı hücresi */ --agirlik-kalin: 600; /* logo, başlıklar (h1/h2/h3) */ --agirlik-sayi: 700; /* A2 YENİ — kahraman sayı ve metrik sayısı */ /* ---------- BOŞLUK — 8pt ızgara ---------- */ --bosluk-1: 4px; --bosluk-2: 8px; --bosluk-3: 12px; --bosluk-4: 16px; --bosluk-5: 20px; --bosluk-6: 24px; --bosluk-7: 32px; --bosluk-8: 40px; --bosluk-9: 56px; --bosluk-10: 64px; --bosluk-rozet: 8px; /* rol/rozet yatay padding */ --bosluk-icerik: 12px; /* form/tablo/buton dolgusu */ --bosluk-sistem: 24px; /* üst çubuk/bant yatay padding */ /* MİNİMAL ÖLÇEK (2026-09-19, 1. dalga sahibi: "kartlar çok büyük"): 20 -> 16. 2. DALGA (aynı gün, sahibi ölçümle: "kart dolgusu 12px"): 16 -> 12 (`--bosluk-3` ile AYNI değer, ikinci bir sayı İCAT EDİLMEDİ). 7 kullanım yeri (giris-kart, plan-kart, kural-kart, kota-kart, yardim-kart ailesi) - `ci/gorunum_olc.mjs` kartYogunlugu ile ÖLÇÜLDÜ. */ --bosluk-kart: 12px; /* A2: 24 -> 20 -> 16 -> 12 (mobilde --bosluk-4 DEĞİL, bu token) */ --ray-genislik: 96px; /* dikey ray sütunu (karşılama) */ --icerik-dolgu: clamp(20px, 3vw, 32px); /* A2: panel yatay içerik dolgusu (eski clamp(20px, 4vw, 48px)) */ --icerik-dolgu-karsilama: clamp(22px, 6vw, 96px); --icerik-azami: 1280px; /* A2: içerik tavanı 1120 -> 1280 (ray dar, içerik geniş) */ --bolum-dolgu: clamp(48px, 9vw, 112px); /* ---------- A2 KABUK ÖLÇÜLERİ (ikon rayı, komut çubuğu, sağ panel) ---------- ⚠️ ÖLÇÜLER KAYNAK TASARIM DOSYASINDAN (2026-09-05 akşam, `docs/tasarim-a2-kaynak/Yon A2 - Komuta Amber.dc.html.txt`) OKUNDU; sözleşme belgesi (§1) o dosya elde YOKKEN yazılmıştı ve ray/kap için 52/36 tahmin ediyordu. Kaynakta ray 64px, ikon kabı 40px, komut alanı en çok 520px. Değerler kaynağa çekildi — bir tahminle bir ölçüm çarpışırsa ölçüm kazanır. RENK ve PUNTO kaynaktan KOPYALANMADI: onlar bu dosyanın kendi token'larından gelir. Üst çubuk 48px'te KALDI (sözleşme §2 + kabuk kolu görevi; kaynak 60 yazıyor ama o mock kendi 14px taban ölçeğinde çizilmiş ve panelin D1.6 ilk-kat bütçesi 48'i şart koşuyor — sapma raporda yazılı). */ --ray-en: 64px; /* A2 — ikon rayı genişliği (kaynak: 64) */ --ray-ikon-kap: 40px; /* A2 — raydaki ikon kabı (kare, --yaricap) */ --sag-panel-en: 272px; /* A2 YENİ — sağ canlı akış / bağlam paneli */ --komut-en: 520px; /* A2 — üst çubuk komut alanı azami eni (kaynak: 520) */ /* TEK YÜZEY (2026-09-11): tek akışlı sayfalarda (``) komut alanının "iş, depo, kanıt ara" genişliğinde dolaşmasına gerek yok — tek bir akış var, kutu Claude/ChatGPT'nin dar ⌘K'sı kadar küçülür. AYRI TOKEN (`--komut-en`i EZMEZ): diğer sayfalarda en ve metin AYNEN kalmalı, tek satırlık bir üzerine yazma bunu ikisine de bulaştırırdı. */ --komut-en-dar: 360px; /* YENİ — tek yüzey ⌘K azami eni */ --sol-liste-en: 264px; /* A2 YENİ — Çalışma Alanı konuşma listesi sütunu */ /* Komut paleti katmanının eni. NEDEN AYRI TOKEN: üst çubuktaki komut ALANI (`--komut-en`, 440) bir tetikleyicidir ve çubuğun ortasına sığmak zorundadır; açılan PALET bir katmandır ve ekranın ortasında durur — ikisini tek sayıda birleştirmek, çubuk daralınca paleti de daraltırdı. Sağ panel + ray + içerik dolgusu toplamının altında kalsın diye 560: 1100px'lik en dar masaüstünde bile perdenin kenarında nefes payı bırakır. */ --komut-paleti-en: 560px; /* A2 YENİ — ⌘K paleti */ /* Palet katmanının üstten uzaklığı: üst çubuğun altına değil, ekranın üst üçte birine oturur (göz oraya bakar). Sabit değil, tokenlardan türetilebilecek bir ölçü DEĞİLDİR: bir konumdur. */ --komut-paleti-ust: 96px; /* A2 YENİ — palet katmanının üst boşluğu */ /* AYARLAR PENCERESİ (dalga 1, 2026-09-11). Komut paletiyle AYNI katman deseni ama içerik iki sütunludur (sekme rayı + panel); 560'lık palet eni burada dar kalırdı — 720 masaüstünde iki sütunu rahat taşır, 1100px'lik en dar masaüstünde bile perdeden pay bırakır (komut paleti eninin gerekçesiyle AYNI ölçü). Ray eni `--sol-liste-en`den (264, konuşma listesi) BİLEREK ayrı token: ikisi ayrışırsa biri değişince öteki sessizce kayardı. */ --ayarlar-en: 720px; /* dalga 1 YENİ — ayarlar penceresi azami eni */ --ayarlar-ray-en: 208px; /* dalga 1 YENİ — pencere içi sekme rayının eni */ --yardim-kart-en: 44rem; /* Yardım kartı — okunabilir satır eni */ --yardim-kart-ust: 8vh; /* Yardım kartı — masaüstü üst boşluğu */ --yardim-kart-yukseklik: 80vh; /* Yardım kartı — gövde kaydırma tavanı */ /* Rayın dibindeki avatardan açılan hesap menüsünün asgari eni. Eski `.rolmenu-liste` 240px'ti ve o menü ÜST ÇUBUKTAN sağa hizalı açılıyordu; ray menüsü 52px'lik bir sütunun SAĞINA açılır ve içindeki en uzun satır ("Hesap değiştir" + açılan koltuk listesi) aynı eni ister. Sayı ikinci kez yazılmasın diye token. */ --ray-menu-en: 240px; /* A2 YENİ — ray hesap menüsü */ /* ⛏ ÖLÇÜLDÜ (Chrome, elementFromPoint + getComputedStyle, 2026-09-06): `.yangez` masaüstünde `position: sticky` alır (aşağıda) ve CSS Positioned Layout'a göre sticky öge z-index'ten BAĞIMSIZ yeni bir yığın bağlamı KURAR. `.nav-ad` ipucunun `z-index: 21`i bu yüzden yalnız `.yangez`in KENDİ bağlamı içinde sıralanır. İçerik tarafında `main.icerik`/`.bolumcuk` `animation: belir … both` taşır ve `to` karesi `transform: none` yazsa da `both` doluş kipi animasyonu SÜRESİZ "etkide" tutar — tarayıcı `transform`u `none` değil `matrix(1,0,0,1,0,0)` olarak hesaplar ve bu da (spesifikasyona göre "none DIŞINDA bir transform değeri") kendi yığın bağlamını kurar. İki bağlam da kök bağlamda z-index `auto` (~0) sayılır; eşitlikte KAYNAK SIRASI kazanır ve `.icerik-kap` (DOM'da `.yangez`den SONRA) üstte kalır — ipucu kartların ALTINDA kalıyordu. Düzeltme: `.yangez` bağlamına açık bir z-index vermek, onu "auto" eşitliğinden çıkarır. */ --katman-nav-ipucu: 15; /* A2 YENİ — .yangez yığın bağlamı (icerik'in animasyon bağlamının ÜSTÜNDE, komut paleti/modallerin ALTINDA) */ --katman-yardim: 40; /* Yardım kartı — nav ipucunun üstünde, sayfa katmanlarının üzerinde */ /* SOL SÜTUN AÇILIR KATMANI (is/sol-sutun-pano-duzeni, 2026-09-12): hesap menüsü (`.calisma-alani-hesap-menu`) gibi TEK sütunun İÇİNDE açılan küçük katmanlar için - sayfa geneli modallerin (30-40) ÇOK ALTINDA, nav ipucunun (15) altında kalır ki iki katman asla çakışmasın. Önceki sabit `z-index: 20` değerleri (kenar hesap menüsü, oturum satırı "···" menüsü) bu tokene TAŞINDI - ikinci bir sayı UYDURULMADI, aynı 20 artık ADLI. */ --katman-acilir: 20; /* ---------- A2 · KURALLAR / KOTA / GİRİŞ ÖLÇÜLERİ (2026-09-05 akşam) ---------- Bu beş değer YALNIZ bu kolun bileşenlerine aittir ve hepsi tasarımdan ÖLÇÜLDÜ: giriş iki sütunlu (sağ kart 400px, düzen tavanı 1080px), kota halkası 120px çapında ve 12px kalınlığında, günlük kullanım çubuk grafiği 64px yüksek, kural ızgarası 300px'in altına inince tek sütuna düşer. Sayı olarak burada dururlar ki `panel.css` hiçbir sabit px taşımasın (`ci/tasarim_sadakati.py`). */ --giris-kart-en: 420px; /* A2 YENİ — giriş sağ sütun kartı (tasarım kaynağından ölçüldü) */ --giris-duzen-en: 1100px; /* A2 YENİ — giriş iki sütunlu düzen tavanı (tasarım kaynağı) */ --halka-boy: 120px; /* A2 YENİ — kota halka göstergesi çapı */ --halka-kalinlik: 12px; /* A2 YENİ — halka yayının kalınlığı */ --grafik-boy: 64px; /* A2 YENİ — günlük kullanım çubuk grafiği yüksekliği */ --kural-kart-min: 300px; /* A2 YENİ — kural ızgarası sütun asgarisi */ --sablon-kart-min: 220px; /* A2 YENİ — dar ekrandaki şablon kartı şeridi */ /* ---------- ÇİZGİ / KÖŞE (A2: keskin köşe KALKTI) ---------- Tasarım kartları 10px, kontrolleri 6px, süzgeç haplarını 999px köşeyle çizer. `--yaricap-tam` yalnız daire (durum noktası, avatar). */ --cizgi-kalinlik: 1px; --cizgi-kalin: 2px; /* vurgu şeridi (seçili ray ögesi, sekme) */ --yaricap: 10px; /* A2: kart, panel, tablo kabı (eski 0) */ --yaricap-kontrol: 6px; /* A2: düğme, alan, rozet, çip, ikon kabı (eski 2px) */ --yaricap-balon: 14px; /* Çalışma Alanı Premium: kullanıcı balonu (tasarım 14/14/4/14) */ --yaricap-hap: 999px; /* A2 YENİ — süzgeç hapı, durum çipi */ --yaricap-tam: 50%; /* daire */ --yaricap-kare-kucuk: 2px; /* Çalışma Alanı Premium: iş şeridinin proje renk karesi (köşeli — nokta/daire ile KARIŞTIRILMAZ) */ /* İş şeridinin meta satırındaki proje renk karesi (tasarım: 6x6px, `--yaricap-kare-kucuk` köşeli). `--nokta-boy` (8px, TAM yuvarlak durum noktası) ile KARIŞTIRILMAZ - ayrı bir şekil, ayrı bir ölçü. */ --proje-kare-boy: 6px; /* Sohbet yanıtının geçitteki önbellekten geldiğini belirten küçük meta etiketi. */ --sohbet-onbellek-etiket-zemin: var(--zemin3); --sohbet-onbellek-etiket-metin: var(--kucukgri-metin); /* "BU İŞ" AÇILIR KARTI (is/bu-is-acilir-kart, 2026-09-13, sahibi tasarım tuvali - salt okunur .dc.html BİREBİR ölçüldü): var olan ölçek bu ölçülerin HİÇBİRİNİ tam karşılamıyordu (28/32px satır, 36x20 anahtar, 22px segment, 6/14px iç boşluk) - "sabit piksel yok" kuralı gereği burada adlandırıldılar, panel.css'e sabit sayı YAZILMADI. `--satir-boy-liste` (32px, yukarıda) normal satır için ZATEN VARDI, ikinci bir 32px tokeni İCAT EDİLMEDİ. */ --bu-is-kart-en: 384px; /* kart genişliği (24rem) */ --bu-is-baslik-boy: 28px; /* bölüm başlığı satırı (DEPO/BU İŞ) */ --bu-is-kart-dolgu-dikey: 6px; /* kartın kendi dikey iç boşluğu */ --bu-is-satir-dolgu-yatay: 14px; /* satırların yatay iç boşluğu */ --bu-is-bosluk-kucuk: 6px; /* kontrol içi küçük boşluk (ikon-metin vb.) */ --bu-is-segment-boy: 22px; /* katman segment düğmesi yüksekliği */ --bu-is-anahtar-en: 36px; /* anahtar (switch) genişliği */ --bu-is-anahtar-boy: 20px; /* anahtar (switch) yüksekliği */ --bu-is-anahtar-dugme: 16px; /* anahtar düğmesinin çapı */ /* PR AÇ MENÜSÜ (is/bu-is-acilir-kart, 3. tur, sahibi canlı ölçümü: menü düğmenin SAĞINDA açılıyordu, ölçüsü düzgün değildi) - "Bu iş" kartıyla AYNI açılır-kart dili, yalnız genişliği farklı (menü kalemleri daha kısa metin taşır). */ --pr-menu-en: 272px; /* PR aç ▾ menüsü genişliği (17rem) */ /* ---------- GÖLGE / IŞIK ---------- Kart: üst kenar iç ışığı + kısa gölge. Birincil düğme: amber halka. Sağ panel ve açılır katman: uzun yumuşak gölge. */ --golge: none; --isik-ust: inset 0 1px 0 rgba(255, 255, 255, .05); --golge-1: 0 1px 2px rgba(0, 0, 0, .32), 0 0 0 1px rgba(255, 255, 255, .02); --golge-2: 0 16px 40px -16px rgba(0, 0, 0, .6); --golge-katman: var(--golge-2); --golge-vurgu: 0 8px 24px -10px var(--vurgu-halka); /* A2 YENİ — birincil düğme */ --parilti-hero: radial-gradient(70% 100% at 8% 0%, rgba(227, 154, 82, .14) 0%, rgba(227, 154, 82, 0) 60%); /* kahraman kart + giriş */ --parilti-giris: radial-gradient(60% 50% at 50% 0%, rgba(227, 154, 82, .18) 0%, rgba(227, 154, 82, 0) 70%); /* A2 YENİ — giriş sayfası tepe ışığı */ --perde: rgba(0, 0, 0, .6); /* kip perdesi */ /* ---------- MALZEME (D3, 2026-09-11) ---------- İki katmanlı gölge: yakın kısa (`--golge-kat-1`) + uzak yumuşak (`--golge-kat-2`) — ikinci bir gölge merdiveni İCAT EDİLMEDİ, bunlar yukarıdaki `--golge-1`/`--golge-2`nin (D1'in kısa/uzak ayrımı) adlı takma adıdır ve tema başına yeniden YAZILMAZ: taban token zaten her temada değişir, `var()` bunu cascade'den okur. `--golge-iki-kat` ikisini TEK box-shadow değerinde birleştirir; iş kartı/çekmece/ şablon kartı yüzeyi bunu tek satırda tüketir (bkz. panel.css `.calisma-alani-gorev`, `.calisma-alani-yan:has(...)`, `.calisma-alani-sablon-kart`). */ --golge-kat-1: var(--golge-1); --golge-kat-2: var(--golge-2); --golge-iki-kat: var(--golge-kat-1), var(--golge-kat-2); /* Tane dokusu: feTurbulence SVG data-URI. Alfa SVG İÇİNDE (feColorMatrix son satırı) .09 tavanına sıkıştırılmış — ham fractalNoise alfası dengesizdir, tavan burada sabitlenmezse "çok düşük opaklık" kuralı kullanım yerine kalır. Yalnız HERO/YÜZEY katmanında kullanılır (`.bugun-hero` arka planı, çekmece `::before`'u) — küçük kontrol/metin yüzeyine UYGULANMAZ. `--malzeme-tane-opaklik` ikinci, ayrı bir düğme: `--malzeme-tane` doğrudan bir elemanın `background-image`ına girdiğinde (hero) elemana `opacity` verilemez (metni de soldurur); ayrı bir `::before` katmanına (çekmece) uygulandığında ek kısma bu token'dan gelir. */ --malzeme-tane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); --malzeme-tane-opaklik: .5; /* ---------- GEÇİŞ ---------- */ --gecis-hizli: 120ms; --gecis: .2s; --gecis-yavas: 320ms; --egri: cubic-bezier(.2, .8, .2, 1); /* D1 (2026-09-11, "Oda ısınır"): ORTAM sıcaklığı katmanının (Çalışma Alanı tepe ışığı, `.calisma-alani::before`) geçiş süresi. Değer `--gecis-yavas` ile AYNI (320ms) - ikinci bir sayı İCAT EDİLMEDİ, yalnız HAREKET kelimesiyle adlandırılmış ayrı bir anlam alanı açılır (bu token yalnız hareket/animasyon süresi taşımak içindir). */ --hareket-sure: 320ms; --gecis-nabiz: 2.4s; --gecis-kay: 1.6s; /* .iskelet-cizgi parıltısı */ --gecis-donus: 1s; /* .ikon-donen (K1, "ölçülüyor" rozeti) */ --belir-kademe: 40ms; /* `belir` kart kademesi */ /* ---------- ODAK HALKASI ---------- */ --odak-halka: 2px; /* ---------- İKON ÖLÇÜSÜ ---------- */ --ikon-boy: 16px; --ikon-boy-orta: 20px; --ikon-boy-ray: 18px; /* A2 YENİ — ray ikonu */ /* ---------- BULANIKLIK ---------- */ --bulanik: blur(12px); /* A2: yapışkan üst çubuk 8 -> 12 */ /* ---------- OPAKLIK ---------- */ --opaklik-pasif: .45; /* ---------- BOYUT ---------- Üst çubuk: dikey dolgu 2×`--bosluk-2` + 32px çip = 48 (A2 kabuk kolu, 2026-09-05: 56 -> 48; `.ustbar` dolgusu `--bosluk-2 --bosluk-4` ve kozmetik_kurallar D1.6 çivisi AYNI dalgada güncellendi). `.iskelet` ve `.giris` min-height'ı buradan türer. */ --ustbar-boy: 48px; --bant-boy: 28px; --kontrol-boy: 36px; --dokunma-gorsel: 18px; /* A2 · TABLOLAR (2026-09-05 akşam, sözleşme §3.2). Üç ölçü BEYANLI token oldu çünkü ÜÇ ayrı dosyada (panel.css tablo bloğu, A2 bölgesi, mobil blok) tekrar ediyorlar ve sabit px yazmak, satır yüksekliğini bir yerde değiştirip ötekini bayat bırakmak demekti. --satir-boy tablo satırının asgari yüksekliği (iki katlı ilk hücre — ad + mono kimlik — bu ölçüyle nefes alır) --nokta-boy satır başındaki durum noktasının çapı --kare-boy satır avatarı ve koltuk kullanım karesi (aynı ölçü, ikisi de "bir koltuk/kişi" büyüklüğünde) */ --satir-boy: 52px; --nokta-boy: 8px; --kare-boy: 28px; /* ---------- D2 · KADRAN (2026-09-11, çift yaylı kullanım göstergesi) ---------- Yalnız KAP boyutu token'landı: `.kadran` (varsayılan) ve `.kadran--kucuk` iki ayrı yerde aynı sayıyı tekrar etmesin diye. SVG viewBox'ı (0 0 60 60) ve yay geometrisi (yarıçap/kalınlık) `kadran.js`in KENDİ çizim sabitleridir — renk/punto/aralık değil, `ci/tasarim_sadakati.py` bunları taramaz; ikinci bir token gerekmez. */ --kadran-boy: 64px; /* D2 YENİ — kadran kabının varsayılan ölçüsü */ --kadran-boy-kucuk: 44px; /* D2 YENİ — `.kadran--kucuk` ölçüsü */ --kenar-ray-en: 3.75rem; /* D2 odak kipi: sol kenarın ray genişliği */ /* ---------- ÇALIŞMA ALANI PREMIUM (2026-09-12) ---------- Kaynak: `docs/tasarim-referans/calisma-alani-premium/`. Tasarım RENK/GÖLGE/TİPOGRAFİ token'ı getirmiyor (dosyası panelinkiyle birebir aynı, ölçüldü); yalnız yeni bir ÖLÇÜ dili getiriyor. `ci/tasarim_sadakati.py` punto/ağırlık/aralık/boşluk için sabit sayı yasakladığından o ölçüler burada token olur; genişlik ve yükseklik kapının taradığı desenlerde değildir ama AYNI değerin üç dosyada tekrar etmemesi için yine buraya yazılır. Bu ölçüler YALNIZ çalışma alanı kabuğunda tüketilir; `--ustbar-boy` gibi genel token'lar 43 sayfanın hepsini değiştirirdi, o yüzden üst çubuk yüksekliği ayrı bir token olarak durur ve `panel.css` tek yüzey gövdesinde `--ustbar-boy`un yerine geçer. */ /* MİNİMAL ÖLÇEK 2. DALGA (2026-09-19, sahibi: "üst bar ve kompozitör yükseklikleri ~%20 azalsın"): 40 -> 32 (tam %20). */ --ustbar-boy-calisma: 32px; /* tasarım: üst çubuk 48 -> 40 -> 32 */ --kontrol-boy-mikro: 26px; /* durum rozeti, PR düğmesi, sekme düğmesi */ --kontrol-boy-kucuk: 28px; /* üst çubuk düğmeleri, arama, proje çipi */ --kontrol-boy-nav: 34px; /* sol sütun gezinti satırı */ --kontrol-boy-ray: 36px; /* daraltılmış ray düğmesi */ /* YOĞUN İKİNCİL DÜĞME (2026-09-19, sahibi ekran görüntüsü: "Teslim al"/"Geri al" iki büyük ayrı düğme yerine tek satırda küçük ikincil düğmeler, 32px). `.buton-kucuk`in genel 44px dokunma asgarisi (`kozmetik_kurallar.test.js`ın 2026-08-22 kararı, BİLİNÇLİ SAPMA) BURADA GERİ ALINMADI - yalnız BU iki masaüstü eylemi için dar bir istisna: `.buton-kucuk--yogun` mobilde (<=768px) `--dokunma-hedef`e (44px) DÖNER, panel.css'te. */ --kontrol-boy-yogun: 32px; /* iş kartı ikincil eylem satırı (Teslim al/Geri al) */ /* MİNİMAL ÖLÇEK 3. DALGA (2026-09-19, sahibi): "Kompozitör simge düğmeleri 44px -> 36px (masaüstü; mobil 44 kalır)". Ek/mikrofon/ gönder - üçü de kare ikon düğmesi, `--kontrol-boy-yogun`dan (32, Teslim al/Geri al'a özgü) BİLEREK AYRI: ikisi farklı bileşen ailesi, aynı sayıyı paylaşmaları TESADÜF olurdu. */ --kontrol-boy-komp-ikon: 36px; /* kompozitör ek/mikrofon/gönder simge düğmesi */ --satir-boy-liste: 32px; /* sol sütun proje ve iş satırı */ --pencere-baslik-boy: 38px; /* sağ panel pencere başlık çubuğu */ --hesap-satir-boy: 48px; /* sol sütun alt hesap satırı */ --okuma-en: 760px; /* mesaj ve kompozitör okuma sütunu */ --kota-cubuk-en: 44px; /* hesap satırındaki ince kota çubuğu */ --kota-cubuk-boy: 3px; --avatar-boy: 30px; /* hesap satırı ve menü avatarı */ --ajan-avatar-boy: 28px; /* sohbette ajan mesajı avatarı */ --proje-kare-boy: 6px; /* meta satırındaki proje renk karesi */ --sag-panel-min-en: 360px; /* tasarım: minmax(360px, 40%) */ --sag-panel-oran: 40%; /* is/kompozitor-ortusme (P0 yan bulgusu, 2026-09-18): sohbet sütununun (kompozitör + giriş formu + akış) KENDİ asgari genişliği - `pencere_yonetici.js::kur` sağ pencerenin kalıcı genişliğini KISITLARKEN bu tokeni `getComputedStyle` ile okur (`--sag-panel-min-en`in AYNI "tek sayı, iki taraf okur" deseni). `--sag-panel-min-en` ile TOPLAMDA `#sohbetDisSaran`ın (sohbet + pencere + varsa sol sütun) payını PAYLAŞIR - ikisi birden EZİLMEZ. ÖLÇÜLDÜ (`ci/gorunum_olc.mjs`, `.calisma-alani-giris-satir` çocukları): metin alanı SARILINCA (`flex-wrap: wrap`) ikinci satıra düşen düğme grubu (ek dosya 28 + kip segmenti 103 + proje çipi 91 + mikrofon 28 + gönder 44 = 294px + aralar ~32px + satır dolgusu ~24px ≈ 350px) 320px'in içine SIĞMIYORDU - taban 380'e çıkarıldı, ikinci satır da SARMADAN sığar. */ --calisma-alani-govde-min-en: 380px; --komut-en-calisma: 360px; /* üst çubuk arama düğmesi (genel 520px) */ /* MİNİMAL ÖLÇEK 2. DALGA (2026-09-19, sahibi: "kompozitör yüksekliği ~%20 azalsın"): 52 -> 42 (%19). Kısa yer tutucu ("Devam et ya da yeni bir şey iste…", tek satır 16px'te) hâlâ kırpılmadan sığar - 52'nin ölçüldüğü eski kırpma arızası (aşağıdaki panel.css şerhi) DAHA UZUN bir yer tutucu metniyle ölçülmüştü, o metin sonradan kısaltıldı. */ --kompozitor-metin-boy: 42px; /* kompozitör metin alanının asgari boyu */ --liste-kilavuz-sol: 24px; /* iş satırı dikey kılavuz çizgisinin solu */ --liste-girinti: 42px; /* iş satırının sol dolgusu */ /* Isler panosu: 1900px olcumunde dort sutun okunur kalir; 1280px calisma alaninda iki sutuna iner. Tek kaynak, CSS'te sabit en yok. */ --pano-sutun-min-en: 385px; /* ---------- SAĞ PANEL · CANLI İZLEME (bölge 3-4, 2026-09-12) ---------- Tasarımın ADIMLAR listesi + satır numaralı çıktı sütunu. Tasarım 10/10.5/11/11.5px puntolar kullanıyor; hepsi `--punto-mikro` (12px) tabanına YUVARLANDI - `ci/gorunum_olc.mjs` kapısının eşiği `kucukMetin === 0`, yani 12px'in ALTINDA görünür metin YASAK. Bu bilinçli bir SAPMADIR ve raporda yazılıdır: tasarım dosyası kendi 14px taban ölçeğinde çizilmiş, panelin erişilebilirlik tabanı ise 12px'tir (`--punto-mikro`), ikinci bir punto ölçeği İCAT EDİLMEDİ. */ --adim-isaret-boy: 16px; /* adım daire işareti (tasarım: 16px) */ --adim-sutun-min-en: 180px; /* ADIMLAR sütunu: minmax(180px, 220px) */ --adim-sutun-maks-en: 220px; /* Önizleme sekmesi TAM GENİŞLİK istediğinde (bkz. panel.css `.canli-izleme--onizleme-aktif`, is/onizleme-govde-yerlesim, 2026-09-19) ADIMLAR sütunu üste TAŞINIR, tek sütunda sonsuz büyümesin diye kendi kaydırmasıyla bu tavanda durur. `--yardim- kart-yukseklik` gibi vh tabanlı - sabit px DEĞİL, pencere boyuyla ölçeklenir. */ --adim-sutun-onizleme-maks-boy: 30vh; --imlec-en: 7px; /* çıktı sonundaki yanıp sönen blok imleç */ --imlec-boy: 13px; --gecis-imlec: 1s; /* imlecin yanıp sönme süresi */ --cikti-no-en: 3ch; /* çıktıdaki satır numarası sütunu */ } /* ============================================================ GÜNDÜZ TEMASI — A2: parşömen zemin (#ebe4d8), beyaz katmanlı kart, doygun amber (#c4610a), koyu mürekkep. Yalnız renk değişir; tipografi / boşluk / köşe ortaktır. ============================================================ */ [data-theme="gunduz"] { color-scheme: light; --zemin: #ebe4d8; /* ölçüldü — parşömen */ --zemin2: #ffffff; /* ölçüldü — kart (zeminden AÇIK, kâğıt üstünde kâğıt) */ --zemin3: #f6f1e8; /* ölçüldü — hover/çip yüzeyi */ --zemin-seffaf: rgba(235, 228, 216, .9); /* türetildi */ --zemin-kod: #f3ede2; /* türetildi — kod/terminal yüzeyi kartın altında bir ton */ --metin: #1f1b15; /* ölçüldü — gövde mürekkebi (13.56:1) */ --parlak: #15120d; /* ölçüldü — başlık mürekkebi (14.78:1) */ --soluk: #5e574b; /* ölçüldü — ikincil metin (≥5:1 parşömende) */ --kucukgri: #8b8477; /* ölçüldü — YALNIZ dekoratif/≥24px */ --kucukgri-metin: #5e574b; /* ölçüldü — küçük-metin-güvenli */ --vurgu: #b95a08; /* ölçüldü — doygun amber; rozet/kenar/büyük metin */ --vurgu-metin: #944607; /* ölçüldü — küçük-metin-güvenli hâli */ --vurgu-derin: #9a4a08; /* türetildi */ --vurgu-uzeri: #ffffff; /* ölçüldü — amber üstündeki metin (≥4.5 vurgu üstünde) */ --vurgu-zemin: rgba(185, 90, 8, .12); /* türetildi */ /* A2 · KURALLAR/KOTA/GİRİŞ kolu (2026-09-05 akşam) — GRADYAN TEPESİ ÖLÇÜLEREK KOYULAŞTIRILDI. Eski tepe #d0711b idi ve düğme metni (`--vurgu-uzeri`, gündüzde BEYAZ) o uçta 3,47:1 ölçüldü — AA küçük metin eşiği 4,5'in ALTINDA. Gradyanın dibi (#a94f06) 5,52:1 ile geçiyordu, yani düğmenin ÜST YARISI okunmuyordu. Yeni uçlar `--vurgu` (#b95a08, 4,64:1) ve `--vurgu-derin` (#9a4a08, 6,26:1): ikisi de eşiğin üstünde ve ikisi de zaten ÖLÇÜLMÜŞ token değerleri, yani gradyan palete yeni bir renk EKLEMEZ. Beyaz metnin geçtiği en AÇIK amber ölçüldü: #bd5d09 hâlâ 4,44 veriyor, #b95a08 ilk geçen tondur. Çift `kozmetik_kontrast.test.js`te (gradyan uçları). */ --vurgu-gradyan: linear-gradient(180deg, #b95a08 0%, #9a4a08 100%); /* ölçüldü — iki ucu da --vurgu-uzeri ile ≥4.5 */ --vurgu-halka: rgba(185, 90, 8, .28); --vurgu-cizgi: rgba(185, 90, 8, .45); /* türetildi */ --cizgi: rgba(31, 27, 21, .09); --cizgi-koyu: rgba(31, 27, 21, .24); --olumlu: #3b6a3f; /* ölçüldü */ --uyari: #735818; /* ölçüldü */ --olumsuz: #ad3b32; /* ölçüldü */ --olumsuz-metin: #96342c; /* ölçüldü — küçük-metin-güvenli hâli */ --bilgi: #506070; /* ölçüldü */ --olumlu-zemin: rgba(59, 106, 63, .12); --uyari-zemin: rgba(115, 88, 24, .12); --olumsuz-zemin: rgba(173, 59, 50, .12); --bilgi-zemin: rgba(80, 96, 112, .10); --notr-zemin: rgba(94, 87, 75, .10); /* Gündüzde iç ışık görünmez ama sıfır alfayla listeyi GEÇERLİ tutar (`none` listeyi bozuyordu, D1'de ölçüldü). Çizgi yerine katmanlı gölge. */ --isik-ust: inset 0 1px 0 rgba(255, 255, 255, 0); --golge-1: 0 1px 2px rgba(31, 27, 21, .06), 0 0 0 1px rgba(31, 27, 21, .05); --golge-2: 0 16px 40px -16px rgba(31, 27, 21, .22); --golge-katman: var(--golge-2); --golge-vurgu: 0 8px 24px -10px var(--vurgu-halka); --parilti-hero: radial-gradient(60% 80% at 8% 0%, rgba(185, 90, 8, .12) 0%, rgba(185, 90, 8, 0) 60%); --parilti-giris: radial-gradient(60% 50% at 50% 0%, rgba(185, 90, 8, .14) 0%, rgba(185, 90, 8, 0) 70%); --perde: rgba(31, 27, 21, .35); /* D3 malzeme: tane KOYU (gece BEYAZ taneydi) — parşömen zeminde açık benek görünmez, "malzeme" hissi koyu benekle okunur. Gölge merdiveni (--golge-kat-*, --golge-iki-kat) yeniden yazılmaz, yukarıdaki --golge-1/-2'yi cascade'den okur. */ --malzeme-tane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ KARŞILAMA SAYFASI TOKEN'LARI (2026-08-22) — kök `/` sayfası. ============================================================ */ :root { --gecis-bant: 34s; /* tanıtım .bant-ic kayma süresi */ --bosluk-kart-yan: 26px; /* tanıtım .dert yan dolgusu */ --bosluk-kart-alt: 40px; /* tanıtım .dert/footer alt dolgusu */ /* DOKUNMA HEDEFİ ASGARİSİ (2026-08-22): 44px, işletim sistemi kılavuzlarının ortak asgarisi; görsel ölçü değil erişilebilirlik tabanı. */ --dokunma-hedef: 44px; /* ALT TAB ÇUBUĞU (<=760px'te ray ekranın altına iner): ikon + ad + dolgu, 44px dokunma payının üstünde, 56px. `.icerik` alt dolgusuna da eklenir. */ --alt-tab-boy: 58px; /* A2 — yüzen alt sekme hapı (kaynak: 58) */ --alt-tab-yaricap: 18px; /* A2 YENİ — yüzen sekme hapının köşesi (kaynak: 18) */ } /* ---------- OTOMATİK TEMA (yalnız karşılama sayfası) ---------- Karşılama oturumsuz ve JS'sizdir; gündüz `prefers-color-scheme`den okunur. Seçici yalnız karsilama.html'in 'inde vardır. Değerler [data-theme="gunduz"] bloğunun BİREBİR kopyasıdır. */ @media (prefers-color-scheme: light) { html[data-tema-kaynak="sistem"]:not([data-theme]) { color-scheme: light; --zemin: #ebe4d8; --zemin2: #ffffff; --zemin3: #f6f1e8; --zemin-seffaf: rgba(235, 228, 216, .9); --zemin-kod: #f3ede2; --metin: #1f1b15; --parlak: #15120d; --soluk: #5e574b; --kucukgri: #8b8477; --kucukgri-metin: #5e574b; --vurgu: #b95a08; --vurgu-metin: #944607; --vurgu-derin: #9a4a08; --vurgu-uzeri: #ffffff; --vurgu-zemin: rgba(185, 90, 8, .12); --vurgu-gradyan: linear-gradient(180deg, #b95a08 0%, #9a4a08 100%); --vurgu-halka: rgba(185, 90, 8, .28); --vurgu-cizgi: rgba(185, 90, 8, .45); --cizgi: rgba(31, 27, 21, .09); --cizgi-koyu: rgba(31, 27, 21, .24); --olumlu: #3b6a3f; --uyari: #735818; --olumsuz: #ad3b32; --olumsuz-metin: #96342c; --bilgi: #506070; --olumlu-zemin: rgba(59, 106, 63, .12); --uyari-zemin: rgba(115, 88, 24, .12); --olumsuz-zemin: rgba(173, 59, 50, .12); --bilgi-zemin: rgba(80, 96, 112, .10); --notr-zemin: rgba(94, 87, 75, .10); --isik-ust: inset 0 1px 0 rgba(255, 255, 255, 0); --golge-1: 0 1px 2px rgba(31, 27, 21, .06), 0 0 0 1px rgba(31, 27, 21, .05); --golge-2: 0 16px 40px -16px rgba(31, 27, 21, .22); --golge-katman: var(--golge-2); --golge-vurgu: 0 8px 24px -10px var(--vurgu-halka); --parilti-hero: radial-gradient(60% 80% at 8% 0%, rgba(185, 90, 8, .12) 0%, rgba(185, 90, 8, 0) 60%); --parilti-giris: radial-gradient(60% 50% at 50% 0%, rgba(185, 90, 8, .14) 0%, rgba(185, 90, 8, 0) 70%); --perde: rgba(31, 27, 21, .35); /* [data-theme="gunduz"] bloğunun BİREBİR kopyası (bkz. şerh orada). */ --malzeme-tane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } } /* ============================================================ MARKA GÖRSELİ ÖLÇÜLERİ (2026-08-23) — SAHİBİ KURALI: DOKUNULMAZ. Üst bar simgesi gövde satırına oturur; alt bilgi simgesi bir kademe büyük. ============================================================ */ :root { --logo-ustbar-boy: 26px; /* türetildi — gövde satırına oturur */ --logo-footer-boy: 40px; /* türetildi — üst bardan bir kademe */ /* --logo-hero-en dosyanın SONUNDAKİ "HERO LOGOSU" bloğundadır; ikinci bir tanım yazılmaz (sıra kazanır, logo sessizce eski ölçüye döner). */ } /* ============================================================ HERO LOGOSU (2026-08-23) — SAHİBİ KURALI: DOKUNULMAZ. Ölçüler ve optik merkez mürekkep kutusundan ÖLÇÜLDÜ (800x800 RGBA; mürekkep %68,9 × %57,0, dikey merkez 11,5px aşağıda = %1,44). Parıltı vurgunun alfalı hâlidir. ============================================================ */ :root { --logo-hero-en: clamp(240px, 36vw, 480px); --logo-hero-en-mobil: 60%; --logo-hero-optik: -1.44%; --logo-hero-parilti: radial-gradient(58% 46% at 50% 50%, rgba(227, 154, 82, .13) 0%, rgba(227, 154, 82, 0) 72%); } [data-theme="gunduz"] { --logo-hero-parilti: radial-gradient(58% 46% at 50% 50%, rgba(185, 90, 8, .10) 0%, rgba(185, 90, 8, 0) 72%); } @media (prefers-color-scheme: light) { html[data-tema-kaynak="sistem"]:not([data-theme]) { --logo-hero-parilti: radial-gradient(58% 46% at 50% 50%, rgba(185, 90, 8, .10) 0%, rgba(185, 90, 8, 0) 72%); } } /* ============================================================ A2 · KARŞILAMA "3D" (2026-09-05 akşam) — Claude Design'da tamamlanan yeni ana sayfanın (docs/tasarim-a2-kaynak/ "Karsilama - 3D.dc.html.txt") token karşılıkları. NEDEN AYRI BLOK: kaynak dosya kendi paletini (`--z0`, `--z2b`, `--parla`, `--golge-kart`, `--cta-zemin`…) sabit hex/rgba ile taşır ve `ci/tasarim_sadakati.py` panelde sabit renk YASAKLAR. Aşağıdaki her satır o kaynaktaki BİR değerin karşılığıdır; sonek `-karsilama` çünkü yalnız kök `/` sayfası tüketir ve panel kolları bu adlara bağlı DEĞİL. ⚠️ MEVCUT TOKEN DEĞERİ DEĞİŞTİRİLMEDİ: bu blok yalnız EKLER. Kaynağın `--z0/--z1/--z2/--z4` merdiveni panelin `--zemin/--zemin2/--zemin3` üçlüsüne indirgendi; aradaki iki ara ton (kaynakta `--z00` ve `--z2b`) burada ayrı token oldu, çünkü 3B sahnede kartların derinlik sırası YALNIZ gölgeyle değil zemin tonuyla da okunuyor. ⚠️ ALFA TÜREVLERİ `color-mix` İLE TEK YERDE: `rgba(233,151,63,.45)` gibi bir değeri üç temaya elle kopyalamak, bir gün amber değişince üç kopyadan ikisini bayat bırakmak demekti. `color-mix(in srgb, var(--vurgu) 45%, transparent)` vurguyu HER temada kendi değerinden türetir; bu yüzden bu token'ların gündüz/sistem kopyası YOKTUR. ============================================================ */ :root { /* ---------- yüzey merdiveninin iki ara basamağı ---------- */ --zemin-derin-karsilama: #0d0b09; /* kaynak --z00: gövdeyle kart arası; yüzen çipler */ --zemin-yuksek-karsilama: #1a1613; /* kaynak --z2b: amber halkalı "mühür" kartı */ /* Üst kenar parıltısı (kaynak --parla): gecede beyaz sızıntı, gündüzde kâğıt parlaması. Tema BAŞINA ters çalıştığı için color-mix'e uygun değil, üç yerde bildirilir. */ --parla-karsilama: rgba(255, 255, 255, .045); /* Yapışkan başlığın cam gradyanının DİBİ (kaynak --glass0): zeminin alfa 0 hâli. `transparent` YAZILMAZ; Safari'de `transparent` rgba(0,0,0,0) sayılır ve gradyan gri bir dişe düşer. */ --zemin-saydam-karsilama: rgba(15, 14, 12, 0); /* ---------- 3B sahne gölgeleri (kaynak --golge-kart/-buyuk/-kucuk) ---------- */ --golge-kart-karsilama: 0 30px 60px -30px rgba(0, 0, 0, .9); --golge-buyuk-karsilama: 0 50px 100px -40px rgba(0, 0, 0, .95); --golge-kucuk-karsilama: 0 20px 50px -20px rgba(0, 0, 0, .9); /* ---------- vinyet ve kapanış kartı zemini ---------- */ --vinyet-karsilama: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .35) 100%); --cta-zemin-karsilama: #15110d; /* ---------- alfa türevleri: TEK tanım, temayı vurgudan türetir ---------- */ --cizgi-vurgu-karsilama: color-mix(in srgb, var(--vurgu) 45%, transparent); --halka-vurgu-karsilama: 0 0 0 4px color-mix(in srgb, var(--vurgu) 12%, transparent); --cizgi-olumlu-karsilama: color-mix(in srgb, var(--olumlu) 35%, transparent); --halka-olumlu-karsilama: 0 0 0 4px color-mix(in srgb, var(--olumlu) 10%, transparent); /* Birincil düğmenin iki kademeli parıltısı (kahraman ve üst çubuk). */ --golge-birincil-karsilama: inset 0 1px 0 color-mix(in srgb, #ffffff 35%, transparent), 0 16px 40px -14px color-mix(in srgb, var(--vurgu) 70%, transparent); --golge-birincil-kucuk-karsilama: inset 0 1px 0 color-mix(in srgb, #ffffff 35%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--vurgu) 60%, transparent); /* ---------- ışık: sayfanın ortam parıltısı, sahne tabanı, kart yıkaması ---------- `--mx` / `--my` işaretçi konumundan gelir (karsilama.js). Yedek 0: betik yoksa ışık tam ortada durur, kaymaz. */ --parilti-ortam-karsilama: radial-gradient(60% 45% at calc(50% + var(--mx, 0) * 6%) calc(0% + var(--my, 0) * 4%), color-mix(in srgb, var(--vurgu) 20%, transparent), transparent 70%); --parilti-taban-karsilama: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--vurgu) 26%, transparent), transparent 70%); --parilti-kart-karsilama: radial-gradient(90% 100% at 0% 0%, color-mix(in srgb, var(--vurgu) 26%, transparent), transparent 60%); --parilti-cta-karsilama: radial-gradient(70% 120% at 50% 0%, color-mix(in srgb, var(--vurgu) 34%, transparent), transparent 60%); /* ---------- birincil düğmenin gradyanı (karşılama kopyası) ---------- GECEDE panelinkiyle BİREBİR AYNI (`var(--vurgu-gradyan)`): iki yüzey ayrışmasın. GÜNDÜZDE ayrı: ÖLÇÜLDÜ (ci/gorunum_olc.mjs, 375+1440 gündüz) panelin gündüz gradyanının AÇIK durağı `#d0711b` ve üstündeki beyaz metin 3,47:1, yani AA küçük-metin eşiğinin (4,5) ALTINDA. Karşılama sayfası bunu kendi kopyasında düzeltir: açık durak `--vurgu` (#b95a08, 4,64:1), dip durak daha derin (6,89:1). ⚠️ Panelin `--vurgu-gradyan`ı DEĞİŞTİRİLMEDİ (bu dalgada başka bir kolun bölgesi); aynı düzeltme orada da gerekiyor, raporda istendi. */ --vurgu-gradyan-karsilama: var(--vurgu-gradyan); /* ---------- kahraman başlığındaki vurgulu sözcüğün gradyanı ---------- */ --vurgu-yazi-karsilama: linear-gradient(90deg, var(--vurgu-metin), var(--vurgu) 60%, var(--vurgu-derin)); /* ---------- kota halkası (güvence kartı): dilimler token'dan ---------- */ --kota-halka-karsilama: conic-gradient(var(--vurgu) 0 24%, var(--olumlu) 24% 33%, var(--zemin3) 33% 100%); /* ---------- ölçü: kaynakta sabit px olan tipografi/kutu değerleri ---------- */ --punto-sayi-buyuk-karsilama: clamp(38px, 5vw, 64px); /* dört ölçüm kartının sayısı */ --cta-boy-karsilama: 48px; /* kahraman ve kapanış düğmesi (>= --dokunma-hedef) */ --yaricap-kart-karsilama: 16px; /* 3B sahnedeki kartlar */ --yaricap-panel-karsilama: 24px; /* kapanış kartı */ --dolgu-cta-karsilama: clamp(40px, 6vw, 72px); } [data-theme="gunduz"] { --zemin-derin-karsilama: #f4efe6; --zemin-yuksek-karsilama: #fdfaf4; --parla-karsilama: rgba(255, 255, 255, .7); --zemin-saydam-karsilama: rgba(235, 228, 216, 0); --golge-kart-karsilama: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(34, 26, 18, .08), 0 0 0 1px rgba(34, 26, 18, .06), 0 24px 50px -30px rgba(90, 60, 20, .35); --golge-buyuk-karsilama: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(34, 26, 18, .07), 0 50px 100px -50px rgba(90, 60, 20, .45); --golge-kucuk-karsilama: 0 0 0 1px rgba(34, 26, 18, .06), 0 14px 30px -18px rgba(90, 60, 20, .4); --vinyet-karsilama: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(90, 60, 20, .08) 100%); --cta-zemin-karsilama: linear-gradient(180deg, #fffdf9, #f7f1e6); /* AA düzeltmesi: açık durak --vurgu (4,64:1), dip durak 6,89:1. */ --vurgu-gradyan-karsilama: linear-gradient(180deg, #b95a08 0%, #93430b 100%); } @media (prefers-color-scheme: light) { html[data-tema-kaynak="sistem"]:not([data-theme]) { --zemin-derin-karsilama: #f4efe6; --zemin-yuksek-karsilama: #fdfaf4; --parla-karsilama: rgba(255, 255, 255, .7); --zemin-saydam-karsilama: rgba(235, 228, 216, 0); --golge-kart-karsilama: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(34, 26, 18, .08), 0 0 0 1px rgba(34, 26, 18, .06), 0 24px 50px -30px rgba(90, 60, 20, .35); --golge-buyuk-karsilama: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(34, 26, 18, .07), 0 50px 100px -50px rgba(90, 60, 20, .45); --golge-kucuk-karsilama: 0 0 0 1px rgba(34, 26, 18, .06), 0 14px 30px -18px rgba(90, 60, 20, .4); --vinyet-karsilama: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(90, 60, 20, .08) 100%); --cta-zemin-karsilama: linear-gradient(180deg, #fffdf9, #f7f1e6); --vurgu-gradyan-karsilama: linear-gradient(180deg, #b95a08 0%, #93430b 100%); } }