/* ============================================================ TASARIM SİSTEMİ — tek kaynak. Tüm renk/tipografi/ölçü burada. 3 KATMAN (epik #81): 1) HAM PALET --p-* : marka renkleri. MODÜL KODU KULLANAMAZ. Kiracı teması yalnız --p-vurgu'yu ezer (SAY). 2) SEMANTİK --renk-* : roller. Modüller YALNIZ bunları tüketir. 3) BİLEŞEN : components.css'te (.rozet varyantları vb.) KOYU TEMA: KOYU BLOK yalnız katman 1+2 değerlerini ezer. PALET: SICAK KİMLİK (kâğıt + mürekkep + yeşil-defter yeşili + turuncu) — FLIP 2026-07-10 patron onayıyla (header = mürekkep koyusu, patron seçimi). Eski slate kimliği: git geçmişi (flip öncesi tokens.css). ============================================================ */ :root { color-scheme: light; /* koyu bloklar 'dark'a çevirir — form kontrolü/scrollbar native uyar */ /* ── KATMAN 1 · HAM PALET (--p-*) — modül kodunda YASAK ── */ --p-murekkep: #232A2E; /* mürekkep — kimlik çekirdeği (header + metin) */ --p-murekkep-2: #2E363B; --p-kagit: #F6F5F0; /* sıcak kâğıt zemin */ --p-turuncu: #E8842C; --p-turuncu-koyu:#C96A1A; --p-kirmizi: #B3261E; --p-yesil: #1E7A4F; /* yeşil-defter yeşili */ --p-amber: #B45309; --p-mavi: #1E5A8A; --p-vurgu: var(--p-turuncu); /* KİRACI TEK KAPISI — SAY: /api/tema bunu ezer */ /* ── KATMAN 2 · SEMANTİK ROLLER ── */ --renk-ana: var(--p-murekkep); /* header/nav — PATRON SEÇİMİ: mürekkep koyusu (flip turu) */ --renk-ana-2: var(--p-murekkep-2); --renk-ana-ustu: #FFFFFF; /* header/dolu-buton üstü metin */ --renk-ana-hover: rgba(255,255,255,.10); --renk-orta: #4C524B; /* tablo başlığı / ikincil koyu metin (sıcak gri) */ --renk-aksan: var(--p-vurgu); /* vurgu/aktif — METİN RENGİ OLARAK KULLANMA (kontrast) */ --renk-aksan-2:var(--p-turuncu-koyu); --renk-aksan-yazi: #9C4D0D; /* turuncu METİN/link türevi (AA uyumlu) */ --renk-neg: var(--p-kirmizi); --renk-pos: var(--p-yesil); --renk-uyari: var(--p-amber); --renk-bilgi: var(--p-mavi); --renk-zemin: var(--p-kagit); /* sayfa arka planı */ --renk-yuzey: #FFFFFF; /* kart/panel zemini */ --renk-yuzey-2:#FBFAF7; /* yükseltilmiş yüzey / zebra */ --renk-beyaz: var(--renk-yuzey); /* ESKİ AD — alias; yeni kodda YASAK (literal renk adı) */ --renk-sinir: #E0DDD2; --renk-cizgi: #EAE8DD; /* ince ayraç (sınırdan açık) — bağlam çubuğu/sekme */ --renk-yazi: var(--p-murekkep); --renk-yazi-ters: #FFFFFF; /* renkli/koyu zemin üstü metin */ --renk-soluk: #5F6B63; /* AA uyumlu soluk (eski #8A9BB0 2.8:1 İHLALDİ) */ --renk-vurgu-zemin:#EFEDE4; --renk-zebra: #F4F2EB; /* veri tablosu tek/cift satir tonu (STANDART) */ --renk-perde: rgba(35,42,46,.5); /* modal/drawer overlay */ --renk-odak: var(--renk-aksan); /* focus ring */ /* Durum ÇİP üçlüleri (zemin/yazı/sınır) — .rozet varyantlarının kaynağı (WCAG AA doğrulanmış) */ --renk-pos-zemin: #E2F0E8; --renk-pos-yazi: #145A3A; --renk-pos-sinir: #C8DFD2; --renk-neg-zemin: #F9E9E8; --renk-neg-yazi: #8F1D17; --renk-neg-sinir: #EED3D1; --renk-uyari-zemin:#F8EFDD; --renk-uyari-yazi:#8A4306; --renk-uyari-sinir:#EBDCC0; --renk-bilgi-zemin:#E6EEF5; --renk-bilgi-yazi:#17486E; --renk-bilgi-sinir:#D2DFEA; --renk-notr-zemin: #ECEBE3; --renk-notr-yazi: #4C524B; --renk-notr-sinir: #DCDACF; --renk-satir-ozel: #FBF3E4; /* yevmiye 'özel' fiş satırı (sıcak krem) */ --renk-aksan-zemin: #F8E9D8; /* marka-vurgu rozeti (.rozet.aksan) */ /* Grafik paleti (markaya hizalı; çizimler var() ya da getComputedStyle ile okur) */ --grafik-1:#1E7A4F; --grafik-2:#1E5A8A; --grafik-3:#E8842C; --grafik-4:#7C3AED; --grafik-5:#0D9488; --grafik-6:#B3261E; --grafik-7:#B45309; --grafik-8:#5F6B63; /* Kategori/tür rozetleri (durum ekseni DEĞİL — koyu temada yalnız parlaklık değişir) */ --renk-kat-mor:#6D28D9; --renk-kat-mor-zemin:#EDE9FE; --renk-kat-indigo:#3730A3; --renk-kat-indigo-zemin:#E0E7FF; --renk-kat-turkuaz:#0F766E;--renk-kat-turkuaz-zemin:#CCFBF1; --renk-kat-pembe:#BE185D; --renk-kat-pembe-zemin:#FCE7F3; /* HAYALET TOKEN TAKMA-ADLARI — eski kod referansları; YENİ KODDA YASAK */ --renk-dim: var(--renk-soluk); --renk-vurgu: var(--renk-aksan); --renk-kart: var(--renk-yuzey); --renk-metin: var(--renk-yazi); --renk-ikincil: var(--renk-soluk); --renk-zemin-2: var(--renk-vurgu-zemin); --renk-pos-bg: var(--renk-pos-zemin); --cizgi: var(--renk-cizgi); --renk-poz: var(--renk-pos); /* ── Tipografi ── */ --font-ana: 'IBM Plex Sans', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --fs-xs:10px; --fs-xs2:11px; --fs-sm:12px; --fs-md:13px; --fs-lg:16px; --fs-xl:20px; --fs-xxl:26px; --fw-orta:500; --fw-kalin:600; --fw-bold:700; /* ── Boşluk ── */ --bo-1:4px; --bo-2:8px; --bo-3:12px; --bo-4:16px; --bo-5:24px; --bo-6:32px; --pane-yukseklik: clamp(360px, 50vh, 540px); /* iki kolonlu is yuzeyi onizleme/form esit yukseklik (K17) */ --onizleme-boy: calc(100vh - 150px); /* ADR H9 F3: Fis Masasi SOL onizleme kolonu sticky yuksekligi (.fm-izgara) */ --yaricap-etiket: 4px; /* K13: TUM etiket/rozet/cip TEK yaricap (kosELI — oval biter, patron #8). Tek satirdan tum portal degisir. */ /* ── Yarıçap / gölge ── */ --yaricap-sm:4px; --yaricap:6px; --yaricap-lg:10px; --suzgec-yuk:32px; /* K21: suzgec barindaki TUM kontrollerin (select/input/.seg) ortak boyu */ --golge-sm:0 1px 3px rgba(0,0,0,.08); --golge: 0 4px 12px rgba(0,0,0,.12); --golge-lg:0 12px 32px rgba(0,0,0,.18); /* ── Ölçüler ── */ --header-h:52px; } /* ============================================================ KOYU BLOK — iki seçicide BİREBİR AYNI içerik (CSS tekilleştiremiyor; birini değiştiren diğerini de değiştirmek ZORUNDA). 1) sistem koyu + kullanıcı 'light' SEÇMEMİŞ 2) kullanıcı 'dark' seçmiş ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --renk-ana:#1A1E21; --renk-ana-2:#242A2F; --renk-ana-ustu:#E8E6DE; --renk-ana-hover:rgba(255,255,255,.08); --renk-orta:#9AA7B0; --renk-aksan:#F0964E; --renk-aksan-2:#E8842C; --renk-aksan-yazi:#F0964E; --renk-neg:#F28B82; --renk-pos:#4CC48A; --renk-uyari:#E8A94F; --renk-bilgi:#7FB3DD; --renk-zemin:#14171A; --renk-yuzey:#1D2226; --renk-yuzey-2:#242A2F; --renk-sinir:#323A40; --renk-cizgi:#282F34; --renk-yazi:#E8E6DE; --renk-yazi-ters:#14171A; --renk-soluk:#A2AAA4; --renk-vurgu-zemin:#262D31; --renk-zebra:#22282C; --renk-perde:rgba(0,0,0,.6); --renk-odak:#F0964E; --renk-pos-zemin:#173428; --renk-pos-yazi:#7FD7AB; --renk-pos-sinir:#1F4534; --renk-neg-zemin:#3A211F; --renk-neg-yazi:#F2A49E; --renk-neg-sinir:#4C2B28; --renk-uyari-zemin:#382A17; --renk-uyari-yazi:#ECC07C; --renk-uyari-sinir:#49371E; --renk-bilgi-zemin:#1A2B3A; --renk-bilgi-yazi:#9EC7E8; --renk-bilgi-sinir:#23394C; --renk-notr-zemin:#272D2A; --renk-notr-yazi:#B8BFB8; --renk-notr-sinir:#333B36; --renk-satir-ozel:#2E2A20; --renk-aksan-zemin:#3A2C1E; --grafik-1:#4CC48A; --grafik-2:#7FB3DD; --grafik-3:#F0964E; --grafik-4:#A78BFA; --grafik-5:#2DD4BF; --grafik-6:#F28B82; --grafik-7:#ECC07C; --grafik-8:#A2AAA4; --renk-kat-mor:#A78BFA; --renk-kat-mor-zemin:#2A2440; --renk-kat-indigo:#818CF8; --renk-kat-indigo-zemin:#242A4A; --renk-kat-turkuaz:#2DD4BF;--renk-kat-turkuaz-zemin:#12332E; --renk-kat-pembe:#F472B6; --renk-kat-pembe-zemin:#3D1F30; --golge-sm:0 1px 3px rgba(0,0,0,.35); --golge: 0 4px 12px rgba(0,0,0,.5); --golge-lg:0 12px 32px rgba(0,0,0,.55); } } :root[data-theme="dark"] { color-scheme: dark; --renk-ana:#1A1E21; --renk-ana-2:#242A2F; --renk-ana-ustu:#E8E6DE; --renk-ana-hover:rgba(255,255,255,.08); --renk-orta:#9AA7B0; --renk-aksan:#F0964E; --renk-aksan-2:#E8842C; --renk-aksan-yazi:#F0964E; --renk-neg:#F28B82; --renk-pos:#4CC48A; --renk-uyari:#E8A94F; --renk-bilgi:#7FB3DD; --renk-zemin:#14171A; --renk-yuzey:#1D2226; --renk-yuzey-2:#242A2F; --renk-sinir:#323A40; --renk-cizgi:#282F34; --renk-yazi:#E8E6DE; --renk-yazi-ters:#14171A; --renk-soluk:#A2AAA4; --renk-vurgu-zemin:#262D31; --renk-zebra:#22282C; --renk-perde:rgba(0,0,0,.6); --renk-odak:#F0964E; --renk-pos-zemin:#173428; --renk-pos-yazi:#7FD7AB; --renk-pos-sinir:#1F4534; --renk-neg-zemin:#3A211F; --renk-neg-yazi:#F2A49E; --renk-neg-sinir:#4C2B28; --renk-uyari-zemin:#382A17; --renk-uyari-yazi:#ECC07C; --renk-uyari-sinir:#49371E; --renk-bilgi-zemin:#1A2B3A; --renk-bilgi-yazi:#9EC7E8; --renk-bilgi-sinir:#23394C; --renk-notr-zemin:#272D2A; --renk-notr-yazi:#B8BFB8; --renk-notr-sinir:#333B36; --renk-satir-ozel:#2E2A20; --renk-aksan-zemin:#3A2C1E; --grafik-1:#4CC48A; --grafik-2:#7FB3DD; --grafik-3:#F0964E; --grafik-4:#A78BFA; --grafik-5:#2DD4BF; --grafik-6:#F28B82; --grafik-7:#ECC07C; --grafik-8:#A2AAA4; --renk-kat-mor:#A78BFA; --renk-kat-mor-zemin:#2A2440; --renk-kat-indigo:#818CF8; --renk-kat-indigo-zemin:#242A4A; --renk-kat-turkuaz:#2DD4BF;--renk-kat-turkuaz-zemin:#12332E; --renk-kat-pembe:#F472B6; --renk-kat-pembe-zemin:#3D1F30; --golge-sm:0 1px 3px rgba(0,0,0,.35); --golge: 0 4px 12px rgba(0,0,0,.5); --golge-lg:0 12px 32px rgba(0,0,0,.55); } /* YAZDIRMA: temadan bağımsız DAİMA açık değerler (koyu zemin kağıda basılmasın) */ @media print { :root, :root[data-theme="dark"] { color-scheme: light; --renk-ana:#232A2E; --renk-ana-2:#2E363B; --renk-ana-ustu:#FFFFFF; --renk-orta:#4C524B; --renk-aksan:#E8842C; --renk-aksan-2:#C96A1A; --renk-aksan-yazi:#9C4D0D; --renk-neg:#B3261E; --renk-pos:#1E7A4F; --renk-uyari:#B45309; --renk-bilgi:#1E5A8A; --renk-zemin:#FFFFFF; --renk-yuzey:#FFFFFF; --renk-yuzey-2:#FBFAF7; --renk-sinir:#E0DDD2; --renk-cizgi:#EAE8DD; --renk-yazi:#232A2E; --renk-yazi-ters:#FFFFFF; --renk-soluk:#5F6B63; --renk-vurgu-zemin:#EFEDE4; --renk-zebra:#F4F2EB; --renk-perde:transparent; --renk-pos-zemin:#E2F0E8; --renk-pos-yazi:#145A3A; --renk-neg-zemin:#F9E9E8; --renk-neg-yazi:#8F1D17; --renk-uyari-zemin:#F8EFDD; --renk-uyari-yazi:#8A4306; --renk-bilgi-zemin:#E6EEF5; --renk-bilgi-yazi:#17486E; --renk-notr-zemin:#ECEBE3; --renk-notr-yazi:#4C524B; --renk-satir-ozel:#FBF3E4; --renk-aksan-zemin:#F8E9D8; } }