/* ============================================================ OrtakIK V2 — OTOMATIK URETILEN CSS PAKETI Kaynak: src/assets/css/ altindaki dosyalar. Bu dosyayi ELLE DUZENLEME; kaynagi degistir ve tools\build-data.ps1 calistir. ============================================================ */ /* ==== tokens.css ========================================================= */ /* ========================================================================== OrtakİK V2 — Tasarım Token'ları Tek doğruluk kaynağı. Hiçbir bileşen ham renk/ölçü yazmaz, buradan okur. Renk teması: açık (beyaz yüzey, çok açık gri-mavi zemin, canlı mavi aksan). ========================================================================== */ :root { /* ---- Marka mavisi -------------------------------------------------- */ --ok-brand-900: #0D3968; --ok-brand-800: #10457E; --ok-brand-700: #14528F; /* bağlantı metni, aktif menü metni (beyaz üzerinde ~7:1) */ --ok-brand-600: #1B6FD6; /* BİRİNCİL — buton dolgusu, odak halkası (~4.6:1) */ --ok-brand-500: #3B8AE8; --ok-brand-300: #8FBCF3; --ok-brand-200: #BEDAF8; --ok-brand-100: #D7E7FB; --ok-brand-50: #EFF6FE; /* aktif menü dolgusu, seçili satır */ /* ---- Nötrler ------------------------------------------------------- */ --ok-bg: #F6F8FC; /* sayfa zemini (giriş ekranı) */ --ok-surface: #FFFFFF; /* kart, sidebar, üst bar */ --ok-surface-alt: #FBFCFE; /* zebra satır, tablo başlık zemini */ --ok-surface-sunk: #F1F4F9; /* girintili alan, devre dışı input */ /* ---- Kabuk zemini -------------------------------------------------- [K-49, 2026-08-18] Kabuğun ARKASI beyaz, kart gövdesi gri idi. [2026-08-19 — kullanıcı kararı] K-49 GERİ ALINDI, kurgu tersine döndü: "ana sayfa ve detay ekranlarda en arkadaki plan gri, ana ekran içeriği beyaz olsun". Artık kabuk zemini gri, kart/panel gövdesi beyaz. Değişen YALNIZ bu üç token'ın DEĞERİdir; token ADLARI ve onları okuyan bileşenler (layout.css `.ok-shell`, card.css `.ok-card`/`.ok-stat`/ `.ok-card__foot`, buttons.css `.ok-form-actions`) aynı kaldı — böylece karar bir daha dönerse yine tek yerden çevrilir. Kapsam dışı bırakılanlar bilinçlidir: giriş ekranı `--ok-bg` okur (auth.css), yüzen katmanlar (modal, açılır menü, toast) `--ok-surface` okur — ikisi de bu karardan etkilenmez. */ /* [2026-08-22 — kullanıcı kararı] Kurgu YENİDEN tersine döndü: kabuk zemini BEYAZ, kart/panel gövdesi GRİ. Bu, 2026-08-19'daki "en arkadaki plan gri, ana ekran içeriği beyaz olsun" kararını geri alıp K-49'un yönüne dönmektir. Kullanıcı değeri doğrudan `wwwroot` aynasında denedi; kalıcı olsun diye kaynağa taşındı. */ --ok-page-bg: #FFFFFF; /* kabuk zemini — en arkadaki beyaz plan */ --ok-panel: #E5E5E5; /* kart / panel gövdesi — gri içerik */ --ok-panel-alt: #F4F7FB; /* panel içi alt şerit (kart ayağı, aksiyon çubuğu) */ /* [2026-08-20 — kullanıcı kararı] Liste ekranlarının ÜST filtre/kriter paneli. Beyaz olduğunda altındaki sonuç ızgarasıyla tek bir yüzey gibi görünüyordu; hafif mavi zemin "burası girdi alanı, aşağısı sonuç" ayrımını veriyor. ⚠️ Yalnız `section.ok-card`'ın DÜZ gövdesine uygulanır — `--flush` gövdeler (ızgara panelleri) ve `form.ok-card` (detay ekranları) BEYAZ kalır; kural card.css'tedir. Kullanıcı "şimdilik" dedi: değer geçici, tek yer burası. */ --ok-panel-filter: #EFF6FE; /* liste ekranı filtre paneli gövdesi */ /* ---- Sol menü teması (K-51, 2026-08-18) ---------------------------- Koyu lacivert zemin + açık metin. Aktif öğe canlı mavi dolgu alır — koyu zeminde `--ok-brand-50` gibi çok açık bir dolgu metni okunmaz hâle getiriyordu. Değerler burada tanımlı ki menü teması tek yerden değişsin ve layout.css'e ham renk sızmasın. [2026-08-19 — kullanıcı kararı] Menü zemini iki ton koyulaştırıldı: #0D3968 → #0A2B4D (aynı ton açısı, hsl 210° 78%; parlaklık %23 → %17). `--ok-brand-900` BİLEREK değiştirilmedi — o token menü dışında da (başlık, gölge, grafik) kullanılıyor; koyulaşma yalnız kabuğu ilgilendiriyor. Ön plan renkleri aynı kaldı, kontrast zaten arttı: `fg` #C6DBF4 ~8,8:1 → ~10,1:1 · `fg-dim` #8FB2D8 ~5,3:1 → ~6,5:1. Üst bar aşağıda bu değerden TÜRETİLDİĞİ için kendiliğinden koyulaşır. */ --ok-sidebar-bg: #0A2B4D; --ok-sidebar-fg: #C6DBF4; /* menü metni (koyu zemin üzerinde ~9:1) */ --ok-sidebar-fg-strong: #FFFFFF; /* hover / açık grup metni */ --ok-sidebar-fg-dim: #8FB2D8; /* ikon, ok işareti, ipucu (~4.8:1) */ --ok-sidebar-hover: rgba(255, 255, 255, .09); --ok-sidebar-active: #1B6FD6; /* seçili öğe dolgusu */ --ok-sidebar-accent: #8FBCF3; /* seçili öğe sol şeridi */ --ok-sidebar-border: rgba(255, 255, 255, .14); --ok-sidebar-field: rgba(255, 255, 255, .10); /* menü arama kutusu */ /* ---- Üst bar teması (kullanıcı kararı, 2026-08-18) ----------------- Talep birebir: "üstteki bar background rengi de soldaki menü gibi olsun". Üst bar artık `--ok-surface` (beyaz) değil, sol menüyle AYNI koyu lacivert zemini kullanır. Değerler sol menüden KOPYALANMAZ, `--ok-sidebar-*`'tan TÜRETİLİR: böylece "üst bar sol menü gibi" kuralı kodda görünür kalır ve menü teması ileride değişirse üst bar kendiliğinden peşinden gelir. Ayrışma gerekirse yalnız buradaki satır değiştirilir, layout.css'e dokunulmaz. */ --ok-topbar-bg: var(--ok-sidebar-bg); --ok-topbar-fg: var(--ok-sidebar-fg); /* ikon/metin (~9:1) */ --ok-topbar-fg-strong: var(--ok-sidebar-fg-strong); /* marka, kullanıcı adı */ --ok-topbar-fg-dim: var(--ok-sidebar-fg-dim); /* ikincil metin (~4.8:1) */ --ok-topbar-hover: var(--ok-sidebar-hover); --ok-topbar-active: var(--ok-sidebar-active); /* bordro dönemi dolgusu */ --ok-topbar-accent: var(--ok-sidebar-accent); /* odak halkası (~5.9:1) */ --ok-topbar-border: var(--ok-sidebar-border); /* Açık dropdown durumu — sol menüde karşılığı yok (menüde açılır panel yerine akordeon var), bu yüzden türetilmeden tanımlandı. Hover'dan (.09) belirgin ayrılması için .18. */ --ok-topbar-open: rgba(255, 255, 255, .18); /* Koyu üst barın içerik alanı üzerinde yükselmesi için gölge; `--ok-sh-top` açık zemine göre ayarlıydı ve ilk katmanı (`--ok-border`) koyu barın altında açık bir dikiş izi bırakıyordu. [2026-08-19 düzeltme] Bu yorum bloğu burada fazladan bir yorum-kapatma imiyle erken kapanıyordu; kalan üç satır CSS'e çöp olarak düşüyor ve ayrıştırıcı hata kurtarma sırasında bir SONRAKİ noktalı virgüle kadar yutuyordu — yani `--ok-topbar-shadow` HİÇ tanımlanmıyordu ve layout.css:40 boşta kalıyordu. Yalnız yorum sınırı düzeltildi, değer değişmedi. (Yorum içine düz yorum-kapatma imi YAZILMAZ; kök CLAUDE.md §6 bu tuzağı SQL için anlatır, CSS'te de aynen geçerlidir.) Gölge rengi bar zeminiyle aynı aileden alınır; menü koyulaşınca (2026-08-19) eski rgba(13,57,104) barın kendisinden AÇIK kalıyor ve altında soluk bir hâle bırakıyordu. Yeni değer #0A2B4D'nin rgb karşılığıdır. */ --ok-topbar-shadow: 0 1px 3px rgba(10, 43, 77, .28); --ok-border: #E2E8F1; /* varsayılan kenarlık */ --ok-border-strong: #CBD5E3; /* input kenarlığı, ayraç */ --ok-border-hard: #AFBECF; /* tablo hücre kenarlığı (yazdırma) */ /* ---- Sekme şeridi zemini (K-71, 2026-08-20) ------------------------ Kullanıcı: "Background rengi de 2,3 ton koyu olsun" (sarmalayan sekme şeridi, `emp-detail`). Şerit bugüne kadar zeminsizdi, yani panelin beyazını (`--ok-panel` #FFFFFF) gösteriyordu. Değer, tasarım sisteminin KENDİ nötr merdiveninden seçildi — yeni bir ton uydurulmadı. HSL parlaklığıyla merdiven: #FFFFFF (surface) 100% → #F1F4F9 (surface-sunk) 96,1% → #EDF1F7 (page-bg) 94,9% → #E2E8F1 91,6% → #CBD5E3 84,3% Beyazdan ÜÇÜNCÜ basamak #E2E8F1; istenen "2,3 ton" birebir bu. Bileşene özel token olarak tanımlandı — `--ok-sidebar-*` / `--ok-topbar-*` ile aynı kalıp. Doğrudan `var(--ok-border)` yazılmadı: o token dosya genelinde SAÇ ÇİZGİSİ kenarlık olarak okunuyor; ileride kenarlıklar koyulaşırsa şerit zemini onunla birlikte sıçramamalı. Legacy karşılığı `#BDBDBD` (emp-detail.aspx:20, parlaklık 74,1%) daha koyudur; birebir kopyalanmadı çünkü bu tasarım sisteminin nötrleri bütünüyle daha açık bir aralıkta duruyor — korunan şey MUTLAK ton değil, "şerit sekmelerden koyu, sekmeler şeritten açık, seçili sekme beyaz" sıralamasıdır. */ --ok-tabbar-bg: #E2E8F1; /* sarmalayan sekme şeridi zemini */ --ok-text: #16202E; /* gövde metni (beyaz üzerinde ~14:1) */ --ok-text-2: #4A5A6E; /* ikincil metin (~7:1) */ --ok-text-3: #7C8A9C; /* yer tutucu / ipucu (~3.6:1 — YALNIZ 16px+ veya dekoratif) */ --ok-text-on-brand: #FFFFFF; /* ---- Anlamsal renkler ---------------------------------------------- */ --ok-success: #2d8659; --ok-success-bg: #65C592; --ok-success-br: #4aa876; --ok-warning: #E0A93C; --ok-warning-bg: #EBE950; --ok-warning-br: #d4a400; --ok-danger: #d43a2a; --ok-danger-bg: #FDECEB; --ok-danger-br: #e85547; --ok-info: #2e7dd3; --ok-info-bg: #EFF6FE; --ok-info-br: #4b94e8; --ok-neutral-bg: #EEF1F6; --ok-neutral-br: #D8DFE9; /* Bordro/İK ekranlarında sık gereken durum renkleri */ --ok-state-approved: #157F52; /* Onaylandı */ --ok-state-pending: #A96A00; /* Süreç devam ediyor */ --ok-state-rejected: #C62F26; /* Reddedildi */ --ok-state-locked: #4A5A6E; /* Dönem kilitli */ --ok-state-draft: #7C8A9C; /* Taslak / pasif */ --ok-chart-1: #1B6FD6; --ok-chart-2: #eb6834; --ok-chart-3: #1baf7a; --ok-chart-4: #eda100; --ok-chart-5: #e87ba4; --ok-chart-6: #008300; --ok-chart-7: #4a3aa7; --ok-chart-8: #e34948; --ok-chart-ink: var(--ok-text-2); --ok-chart-axis: var(--ok-border); --ok-chart-grid: var(--ok-neutral-bg); --ok-tooltip-bg: #1F2C3D; --ok-tooltip-fg: #FFFFFF; /* Bölüm bandı (`.ok-band`) — form içindeki mantıksal grupların başlığı. Legacy karşılığı yoktur; kalıp `badge d-block fs-6` + satır içi `background-color:#588ec7` olarak 18 ekranda elle tekrarlanıyordu (`Settings\InsuranceInformationsDetail.cshtml:221` ve diğerleri). Zemin ve yazı BİRLİKTE token'landı: yalnız zemini token'lamak, yazıyı Bootstrap'in sabit `--bs-badge-color:#fff`ine bırakır ve karanlık temada zemin koyulaşırken yazı beyaz kalırdı — bugün ikisi de sabit olduğu için kalıp iki temada aynı görünüyor, bu davranış korunuyor. */ --ok-band-bg: #588ec7; --ok-band-fg: #FFFFFF; /* ---- Tipografi ----------------------------------------------------- */ --ok-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ok-font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; /* [K-57, 2026-08-19] Kullanıcı kararı: "giriş alanlarının fontları … hâlen fazla". `fs-base` 14→13, `fs-sm` 13→12. `fs-xs` 12'de BIRAKILDI — daha aşağısı okunabilirlik sınırının altına iner ve o token zaten yalnız rozet/ipucu gibi ikincil metinlerde kullanılıyor. Başlık ölçüleri (md/lg/xl) değişmedi: şikâyet form alanlarınaydı, başlık hiyerarşisi düzleşmemeli. */ --ok-fs-xs: 10px; --ok-fs-xs: 11px; --ok-fs-sm: 12px; --ok-fs-base: 13px; --ok-fs-md: 16px; --ok-fs-lg: 20px; --ok-fs-xl: 24px; --ok-fs-2xl: 30px; --ok-lh-tight: 1.25; --ok-lh-base: 1.45; --ok-lh-loose: 1.6; --ok-fw-normal: 400; --ok-fw-medium: 500; --ok-fw-semibold: 600; --ok-fw-bold: 700; /* ---- Boşluk (4px tabanlı) ------------------------------------------ */ --ok-sp-1: 4px; --ok-sp-2: 8px; --ok-sp-3: 12px; --ok-sp-4: 16px; --ok-sp-5: 20px; --ok-sp-6: 24px; --ok-sp-8: 32px; --ok-sp-10: 40px; --ok-sp-12: 48px; --ok-sp-16: 64px; /* ---- Yarıçap ------------------------------------------------------- */ --ok-r-sm: 4px; --ok-r-md: 6px; --ok-r-lg: 10px; --ok-r-xl: 14px; --ok-r-pill: 999px; /* ---- Gölge — YALNIZCA yüzen katmanlar ------------------------------ Kartlar gölgesizdir: yoğun veri ekranında gölge gürültü yapıyor. */ --ok-sh-sm: 0 1px 2px rgba(16, 32, 56, .06); --ok-sh-md: 0 4px 12px rgba(16, 32, 56, .10), 0 1px 3px rgba(16, 32, 56, .06); --ok-sh-lg: 0 12px 32px rgba(16, 32, 56, .14), 0 2px 8px rgba(16, 32, 56, .08); --ok-sh-top: 0 1px 0 var(--ok-border), 0 2px 6px rgba(16, 32, 56, .04); /* ---- Odak ---------------------------------------------------------- */ /* ---- Buton dolgu renkleri (2026-09-16) ----------------------------- Bu uc buton rengi tarihsel olarak kurallarin icine SABIT yaziliydi ve tema katmani onlara hic ulasmiyordu; koyu tema her birini elle ezmek zorunda kaliyordu. Jetona bagliyoruz ki tema kendi guvenli degerini verebilsin. ⚠️ Bunlar `--ok-brand-600` / `--ok-danger` / `--ok-success` OLAMAZ: o jetonlar koyu temada ACILIR ve uzerlerindeki beyaz metin esigin altina duser (olculdu: brand-600 4,21:1 · success 5CBE89 2,29:1). Dolgu jetonlari ayri tutulur, degerleri beyazla >=4,5 olacak sekilde secilir. ACIK TEMA DEGERLERI DEGISMEDI. */ --ok-btn-primary-bg: #0D5BC0; --ok-btn-primary-bg-hover: #0a4599; --ok-btn-danger-bg: #C41C1C; --ok-btn-danger-bg-hover: #a01818; --ok-btn-success-bg: #0F7A1A; --ok-btn-success-bg-hover: #0d6517; --ok-focus-ring: 0 0 0 3px rgba(27, 111, 214, .28); --ok-focus-color: var(--ok-brand-600); /* ---- Kabuk ölçüleri ------------------------------------------------ */ --ok-topbar-h: 56px; --ok-sidebar-w: 264px; --ok-sidebar-rail-w: 60px; /* daraltılmış (simge) mod */ --ok-content-max: 1680px; /* çok geniş ekranda içerik sınırı */ /* ---- Kontrol yoğunluğu (data-density ile değişir) ------------------ */ /* [K-55, 2026-08-19] Kullanıcı kararı: dikey ölçüler GENELİNDE fazla genişti. Değişen: ctrl-h 34→30 · ctrl-px 10→8 · row-h 36→32 · cell-py 6→4 · card-py yeni (16 yerine 10) · field-gap 12→6. Yatay ölçüler (cell-px, card-px) DEĞİŞMEDİ — şikâyet dikeydi ve yatayı daraltmak kolon sığdırmayı zorlaştırır. [K-57, 2026-08-19] İKİNCİ TUR — kullanıcı "hâlen fazla" dedi; bu kez yalnız yükseklik değil FONT ve İÇ DOLGU da küçüldü: ctrl-h 30→28 · ctrl-h-sm 26→24 · ctrl-px 8→7 · card-py 10→8 fs-base 14→13 · fs-sm 13→12 (font blokta, aşağıda) `data-density="compact"` de orantılı düşürüldü, yoksa iki kip birbirine yapışır ve yoğunluk anahtarı anlamsızlaşırdı. ⚠️ 28px hâlâ dokunmatik hedef için kabul edilebilir alt sınıra yakındır; daha aşağısı istenirse tıklama alanı ayrıca büyütülmeli. */ /* [K-59, 2026-08-19] ÜÇÜNCÜ TUR — kullanıcı: "ok-input, ok-select gibi alanlarda çok fazla iç padding var, özellikle vertical". ⚠️ Ölçüm: `.ok-input`/`.ok-native-select` DİKEY DOLGU TAŞIMIYOR (forms.css:99-104, yalnız `padding-inline`); algılanan boşluk sabit YÜKSEKLİK ile 13px font arasındaki farktan geliyordu (28px kutu ↔ ~19px satır). Bu yüzden çözüm dolguyu değil yüksekliği düşürmek: 28→26. Gerçek dikey dolgusu olan iki bileşen ayrıca kısıldı (textarea `padding-block` 5→3, select kontrolü 2→1 — kendi dosyalarında). 26px + 13px font, satırın üstünde/altında ~3px bırakır: sıkı ama kırpmaz. */ /* [K-60, 2026-08-19] DÖRDÜNCÜ TUR — kullanıcı: "ok-input'larda içteki üst/alt padding'i biraz daha azalt, ekranlar aşağı doğru çok kayıyor". K-59'daki ölçüm hâlâ geçerli: `.ok-input`/`.ok-native-select` dikey dolgu TAŞIMIYOR (forms.css, yalnız `padding-inline`), algılanan boşluk sabit YÜKSEKLİK ile font arasındaki farktır. Bu yüzden yine yükseklik düşürüldü: ctrl-h 26→24 · ctrl-h-sm 22→20. 24px kutu = 22px içerik (1px+1px kenarlık). 13px fontun doğal içerik yüksekliği ~15,4px olduğu için satır her hâlükârda sığar; yine de miras alınan 1.45 satır yüksekliğine (≈18,9px) güvenilmedi ve `.ok-input`'a `--ok-lh-tight` (1.25 → ≈16,3px) AÇIKÇA verildi (forms.css) — böylece gövde satır yüksekliği ileride değişse de kutu kırpmaz. Dikey ölçü artık dokunmatik hedef alt sınırının belirgin altında; yalnız fare/klavye ile kullanılan yoğun veri ekranları için bilinçli bir seçim. */ --ok-ctrl-h: 24px; /* input, select, buton yüksekliği */ --ok-ctrl-h-sm: 20px; /* [2026-08-22 — kullanıcı kararı] Dördü birden sıkıldı: denetim yatay boşluğu 7→5, grid satırı 32→30, hücre yatay 10→8, hücre dikey 4→2. ⚠️ `--ok-cell-py` artık sıkışık kiple AYNI (ikisi de 2px) — o tek token'da yoğunluk anahtarı fark üretmiyor. Sıkışık kip 1px'e DÜŞÜRÜLMEDİ: 1px dolgu okunabilirliği bozar ve kipler arası fark zaten `--ok-row-h` (30 ↔ 26) üzerinden korunuyor. Bu, `--ok-card-px/py`deki durumdan farklıdır: orada sıkışık kip varsayılandan BÜYÜK kalacaktı, yani anahtar ters çalışacaktı; burada yalnız eşitlik var. */ --ok-ctrl-px: 5px; /* yatay iç boşluk */ --ok-row-h: 30px; /* grid satır yüksekliği */ --ok-cell-px: 8px; --ok-cell-py: 2px; /* [2026-08-22 — kullanıcı kararı] Kart iç boşluğu yarıya indi: yatay 16→8, dikey 8→4. */ --ok-card-px: 8px; /* kart YATAY iç boşluğu */ --ok-card-py: 4px; /* kart DİKEY iç boşluğu — eskiden card-px ile aynıydı */ --ok-card-py2: 16px; /* kart DİKEY iç boşluğu — eskiden card-px ile aynıydı */ /* ---- Dar denetim ölçeği (2026-08-20, kullanıcı kararı) -------------------- İçeriğin genişliği belliyse alanı boydan boya germek hem çirkin hem yanıltıcı (kullanıcı uzun değer beklendiğini sanıyor). Üç basamak yeterli görüldü: sm saat/gün/adet, 2-4 hane (TxtHour, TxtDay kalıpları) md tarih gg.aa.yyyy, para, sayı — ESKİ `--narrow` DEĞERİ, değişmedi lg kısa metin: kod, IBAN parçası, telefon Kural `forms.css`'te; sınıflar `.ok-input--w-sm|md|lg`. `--narrow` md'nin takma adı olarak sürüyor (11 ekran / 59 kullanım). */ --ok-w-sm: 120px; --ok-w-md: 190px; /* legacy Bootstrap col-md-2/3 karşılığı */ --ok-w-lg: 320px; /* [K-61, 2026-08-19] Kullanıcı kararı: "veri alanları arasındaki boşluk azalsın". Ölçüm: alanlar arası dikey aralığı ÜRETEN tek yer `.ok-fields`'ın satır aralığıdır (forms.css `gap: var(--ok-field-gap) var(--ok-sp-4)`); `.ok-field` kendi içinde dikey dolgu taşımıyor. Bu yüzden 6→4. Yatay aralık (`--ok-sp-4`) DEĞİŞMEDİ — şikâyet dikeydi ve sütunları daraltmak etiketi denetime yapıştırır. */ --ok-field-gap: 4px; /* form satırları arası */ /* Yatay alan düzeninde etiket sütunu genişliği (forms.css `.ok-field`). [K-56, 2026-08-19] Etiket + denetim artık VARSAYILAN olarak yan yana; bu yüzden ölçü token'a taşındı. 220px yalnız tek sütunlu formlarda doğruydu, `.ok-fields--3` içinde denetimi eziyordu. */ --ok-label-w: 150px; /* ---- Katman sırası ------------------------------------------------- */ --ok-z-base: 0; --ok-z-sticky: 100; /* grid sabit başlık, sabit ilk kolon */ --ok-z-topbar: 300; --ok-z-sidebar: 350; --ok-z-dropdown: 500; --ok-z-backdrop: 700; --ok-z-modal: 800; --ok-z-popover: 900; --ok-z-toast: 1000; /* ---- Hareket ------------------------------------------------------- */ --ok-dur-fast: 120ms; --ok-dur-base: 180ms; --ok-dur-slow: 280ms; --ok-ease: cubic-bezier(.4, 0, .2, 1); } :root[data-theme="dark"] { --ok-chart-1: #3987e5; --ok-chart-2: #d95926; --ok-chart-3: #199e70; --ok-chart-4: #c98500; --ok-chart-5: #d55181; --ok-chart-6: #008300; --ok-chart-7: #9085e9; --ok-chart-8: #e66767; } /* Sıkışık mod — bordro, puantaj, geniş liste ekranları için. ile açılır, tercih localStorage'da saklanır. */ [data-density="compact"] { /* [K-57, 2026-08-19] Varsayılan kip küçüldüğü için sıkışık kip de orantılı düşürüldü; yoksa ikisi birbirine yapışır ve yoğunluk anahtarı anlamsızlaşırdı. `fs` 12'nin altına inilmedi (okunabilirlik sınırı). */ /* [K-60 / K-61, 2026-08-19] Varsayılan kip yeniden küçüldüğü için sıkışık kip de orantılı düşürüldü (ctrl-h 23→21 · ctrl-h-sm 20→18 · field-gap 4→3); yoksa iki kip birbirine yapışır ve yoğunluk anahtarı anlamsızlaşır. 12px fontun doğal içerik yüksekliği ~14,2px olduğu için 21px kutu (19px içerik) hâlâ kırpmaz. */ --ok-fs-base: 12px; --ok-fs-sm: 12px; --ok-ctrl-h: 21px; --ok-ctrl-h-sm: 18px; --ok-row-h: 26px; --ok-cell-py: 2px; --ok-cell-px: 7px; /* [2026-08-22] Varsayılan kip 8/4'e indiği için sıkışık kip de orantılı düşürüldü (12/6 → 6/3). Yoksa "sıkışık" kip varsayılandan GEVŞEK kalır ve yoğunluk anahtarı ters çalışırdı — K-57/K-60/K-61'de aynı gerekçeyle aynı şey yapılmıştı. */ --ok-card-px: 6px; --ok-card-py: 3px; --ok-field-gap: 3px; --ok-label-w: 134px; } /* Hareket azaltma tercihi */ @media (prefers-reduced-motion: reduce) { :root { --ok-dur-fast: 0ms; --ok-dur-base: 0ms; --ok-dur-slow: 0ms; } } /* ==== bootstrap-bridge.css =============================================== */ /* ============================================================================ bootstrap-bridge.css — Bootstrap 5 ile OrtakİK tasarım sistemi arasındaki köprü NEDEN VAR --------- [2026-08-22 — kullanıcı kararı] Ekranlar Bootstrap 5'in sınıf sözlüğüne geçiriliyor. Gerekçe okunabilirlik: legacy Bootstrap kullanıyordu ve ekip ona hakim. Ancak Bootstrap'in ÖLÇÜLERİ alınmıyor — yalnız SINIF SÖZLÜĞÜ ve IZGARASI alınıyor (K-B1, K-B4). Bootstrap 5.3.8 varsayılanları bu ürün için fazla gevşektir: gövde 16px · input ~38px · tablo satırı ~41px OrtakİK'in bugünkü ölçüleri (kullanıcının K-55…K-61'de beş turda kendisi küçülttüğü değerler): gövde 13px · input 24px · tablo satırı 32px Legacy ise 11px / 26px / 28px — yani V2 legacy'ye zaten yakın, uzak olan taraf Bootstrap'tir. Bu dosya Bootstrap'i V2'nin ölçülerine çeker. YÖNTEM — tek kaynak ilkesi -------------------------- Hiçbir ölçü buraya SAYI olarak yazılmaz; hepsi `tokens.css`teki `--ok-*` token'larına bağlanır. İki kazanç: 1. Ölçü değişince tek yer (`tokens.css`) güncellenir, burası kendiliğinden uyar — iki ayrı sayı listesi ayrışamaz. 2. Yoğunluk anahtarı BEDAVA çalışır: `` `--ok-*` değerlerini değiştirir, Bootstrap bileşenleri de onları okuduğu için birlikte sıkışır. Bootstrap'in kendi ölçeği bunu veremezdi. YÜKLEME SIRASI — kritik ----------------------- _Layout.cshtml: bootstrap.min.css → ortakik.css (bu dosya onun içinde) Bootstrap ÖNCE gelmezse buradaki ezmeler etkisiz kalır. Paket içindeki yeri: `tokens.css`ten hemen sonra (token'ları okur), bileşen dosyalarından önce (`.ok-*` kuralları bunu ezebilmeli). KAPSAM SINIRI — Bootstrap'in JS'i ALINMADI ------------------------------------------ Bootstrap JS'i almak dört gerçek davranış çakışması üretiyordu: iki kaydırma kilidi, iki odak tuzağı, `data-ok-confirm`in 214 düğmede Bootstrap'in belge dinleyicisini bastırması. Bu yüzden yalnız CSS alındı ve davranışı JS'e bağlı Bootstrap bileşenlerinin SINIFLARI da kullanılmıyor: .modal · .dropdown · .collapse · .toast · .nav-tabs/.tab-pane .offcanvas · .tooltip · .accordion Bunlar `.ok-*` karşılıklarıyla kalır. `data-bs-*` bu kod tabanında hiç geçmez. ⚠️ Sınıfı "sadece görünüm için" kullanmak da olmaz: Bootstrap'in `.modal` kuralı `display:none` taşır, JS'i olmadan o modal bir daha açılmaz. ============================================================================ */ /* --------------------------------------------------------------------------- 1. Kök değişkenler — Bootstrap'in tabanı OrtakİK token'larına bağlanır --------------------------------------------------------------------------- */ :root { /* Tipografi. `--bs-body-font-size` Bootstrap'te yalnız `body`ye uygulanır; bileşenler kendi `--bs-*-font-size` değişkenlerini okur, onlar aşağıda. */ --bs-body-font-family: var(--ok-font); --bs-body-font-size: var(--ok-fs-base); --bs-body-line-height: var(--ok-lh-base); --bs-body-color: var(--ok-text); --bs-body-bg: var(--ok-surface); --bs-secondary-color: var(--ok-text-2); --bs-tertiary-color: var(--ok-text-3); --bs-emphasis-color: var(--ok-text); --bs-font-monospace: var(--ok-font-mono); /* Kenarlık ve yarıçap. Bootstrap'in 6px'i (`--bs-border-radius`) OrtakİK'in `--ok-r-md` değeriyle zaten aynı; kart 10px alır (aşağıda, §4). */ --bs-border-color: var(--ok-border); --bs-border-radius: var(--ok-r-md); --bs-border-radius-sm: var(--ok-r-sm); --bs-border-radius-lg: var(--ok-r-lg); --bs-border-radius-xl: var(--ok-r-xl); /* Marka rengi. Bootstrap'in #0d6efd'si OrtakİK mavisiyle değiştirilir. `-rgb` biçimi Bootstrap'in saydamlık hesapları için zorunlu. */ --bs-primary: var(--ok-brand-600); --bs-primary-rgb: 27, 111, 214; --bs-link-color: var(--ok-brand-700); --bs-link-hover-color: var(--ok-brand-800); /* Odak halkası — OrtakİK'in halkası 3px, Bootstrap'inki 4px (.25rem). */ --bs-focus-ring-width: 3px; --bs-focus-ring-color: rgba(27, 111, 214, .28); } /* Izgara boşluğu. Bootstrap 24px, legacy 20px kullanıyordu; 20px hem legacy paritesini verir hem OrtakİK'in 4px tabanlı ölçeğinde zaten var (`--ok-sp-5`). ⚠️ Bu tanım `:root`ta İŞE YARAMAZ — ölçüldü, 24px kalıyordu. Bootstrap `--bs-gutter-x`i `.row` ve `.container-*` sınıflarının KENDİ gövdesinde tanımlıyor; eleman üzerindeki tanım her zaman `:root`tan gelen kalıtımı gölgeler. Aynı tuzak `.btn`, `.card`, `.table` için de geçerli — onlar zaten aşağıda kendi sınıfları üzerinden eziliyor. Yeni bir Bootstrap değişkeni eklerken önce onu kimin tanımladığına bak. */ .row, .container { --bs-gutter-x: var(--ok-sp-5); } /* --------------------------------------------------------------------------- 2. Form denetimleri Bootstrap bunlar için CSS değişkeni AÇMIYOR (`.form-control` ölçüleri Sass'ta sabitlenmiş), bu yüzden doğrudan kural yazmak zorunlu. Değerler `.ok-input` ile birebir aynı — iki denetim yan yana geldiğinde hizası kaymasın. --------------------------------------------------------------------------- */ .form-control, .form-select { height: var(--ok-ctrl-h); padding-block: 0; padding-inline: var(--ok-ctrl-px); border: 1px solid var(--ok-border-strong); border-radius: var(--ok-r-md); font-size: var(--ok-fs-base); /* Satır yüksekliği AÇIKÇA veriliyor: gövdenin 1.45'i 13px'te ≈18,9px eder ve 22px'lik iç yükseklikte pay bırakmaz. `.ok-input` da aynı sebeple böyle. */ line-height: var(--ok-lh-tight); color: var(--ok-text); background-color: var(--ok-surface); } /* Çok satırlı alan sabit yükseklik almaz — yukarıdaki `height` onu 24px'e kilitlerdi. `.ok-textarea` de aynı istisnayı yapıyor. */ textarea.form-control { height: auto; min-height: calc(var(--ok-ctrl-h) * 2); padding-block: var(--ok-sp-1); line-height: var(--ok-lh-base); } .form-select { /* Bootstrap ok işaretine yer açmak için sağdan fazladan boşluk bırakır. */ padding-inline-end: calc(var(--ok-ctrl-px) + 16px); } .form-control:focus, .form-select:focus { border-color: var(--ok-focus-color); box-shadow: var(--ok-focus-ring); } .form-control:disabled, .form-select:disabled { background-color: var(--ok-surface-sunk); color: var(--ok-text-2); border-inline-start: 3px solid #8D9CAB; padding-inline-start: 3px; } .form-control::placeholder { color: var(--ok-text-3); } .col-form-label { margin-bottom: 0; padding-block: 0; font-size: var(--ok-fs-base); font-weight: var(--ok-fw-medium); color: var(--ok-text-2); line-height: var(--ok-ctrl-h); } /* --------------------------------------------------------------------------- 3. Butonlar — Bootstrap bunlar için değişken açıyor, doğrudan kural gerekmez --------------------------------------------------------------------------- */ .btn { --bs-btn-padding-x: var(--ok-sp-4); --bs-btn-padding-y: 0; --bs-btn-font-size: var(--ok-fs-sm); --bs-btn-font-weight: var(--ok-fw-medium); --bs-btn-line-height: var(--ok-lh-tight); --bs-btn-border-radius: var(--ok-r-md); --bs-btn-focus-box-shadow: var(--ok-focus-ring); /* Yükseklik değişkenle verilemiyor (Bootstrap dolgudan hesaplıyor); `.ok-btn` ile aynı hizada durması için açıkça sabitleniyor. */ height: var(--ok-ctrl-h); display: inline-flex; align-items: center; justify-content: center; gap: var(--ok-sp-2); } .btn-primary { --bs-btn-bg: var(--ok-brand-600); --bs-btn-border-color: var(--ok-brand-600); --bs-btn-hover-bg: var(--ok-brand-700); --bs-btn-hover-border-color: var(--ok-brand-700); --bs-btn-active-bg: var(--ok-brand-800); --bs-btn-active-border-color: var(--ok-brand-800); --bs-btn-color: var(--ok-text-on-brand); --bs-btn-hover-color: var(--ok-text-on-brand); } /* Legacy'nin `.btn-default`u nötr, açık zeminli bir düğmeydi. Bootstrap 5'te karşılığı `.btn-light`tır — `.btn-secondary` DOLU GRİ verir ve legacy'ye benzemez. Çeviri sözlüğünde bu eşleme bağlayıcıdır. */ .btn-light { --bs-btn-bg: var(--ok-surface); --bs-btn-border-color: var(--ok-border-strong); --bs-btn-color: var(--ok-text); --bs-btn-hover-bg: var(--ok-surface-sunk); --bs-btn-hover-border-color: var(--ok-border-strong); --bs-btn-hover-color: var(--ok-text); } .btn-sm { --bs-btn-padding-x: var(--ok-sp-3); height: var(--ok-ctrl-h-sm); } /* --------------------------------------------------------------------------- 4. Kart — legacy'nin `.portlet`u buna çevriliyor (K-B1) Metronic'in mavi başlık çubuğu BİLEREK taklit edilmiyor; kullanıcı kararı. --------------------------------------------------------------------------- */ .card { --bs-card-bg: var(--ok-panel); --bs-card-border-color: var(--ok-border); --bs-card-border-radius: var(--ok-r-lg); --bs-card-spacer-x: var(--ok-card-px); --bs-card-spacer-y: var(--ok-card-py); --bs-card-cap-padding-x: var(--ok-card-px); --bs-card-cap-padding-y: var(--ok-card-py); --bs-card-cap-bg: var(--ok-panel); /* Kartlar gölgesizdir — yoğun veri ekranında gölge kutuları öne çıkarıp veriyi geriye itiyor (00-tasarim-ilkeleri.md §2). */ --bs-card-box-shadow: none; } /* --------------------------------------------------------------------------- 5. Tablo Bootstrap hücre dolgusunu değişkenle açmıyor (`.5rem .5rem` sabit), bu yüzden doğrudan kural. Değerler `.ok-grid` ile aynı. ⚠️ Bu, JS ile üretilen `.ok-grid` ızgarasını ETKİLEMEZ — o kendi sınıfını kullanır. Buradaki kural yalnız `.table` yazan statik tablolar içindir. --------------------------------------------------------------------------- */ .table { --bs-table-color: var(--ok-text); --bs-table-bg: var(--ok-surface); --bs-table-border-color: var(--ok-border); --bs-table-striped-bg: var(--ok-surface-alt); --bs-table-hover-bg: var(--ok-brand-50); font-size: var(--ok-fs-base); } .table > :not(caption) > * > * { padding: var(--ok-cell-py) var(--ok-cell-px); } .table > thead > tr > * { background-color: var(--ok-surface-alt); font-weight: var(--ok-fw-semibold); color: var(--ok-text-2); } /* --------------------------------------------------------------------------- 6. Doğrulama köprüsü — EN KRİTİK BÖLÜM OrtakİK doğrulama işaretini SARMALAYICIYA koyar, Bootstrap ise doğrudan denetime (`.form-control.is-invalid`). İkisi aynı sınıf adını farklı yerde kullanıyor; bu bölüm o köprüyü kurar. ⚠️ Bu kural olmadan hata SESSİZCE görünmez olur: `OK.form.validate` işareti sarmalayıcıya yazmaya devam eder, Bootstrap onu görmez, kullanıcı hatasız sanıp kaydeder. [2026-08-27] Sarmalayıcının İKİ biçimi var ve her seçici ikisini de saymalı: `[data-ok-field]` (yerleşimi Bootstrap'e devredilmiş 1.575 alan) ve `.ok-field` (henüz dönüştürülmemiş 466 çıplak alan + `.ok-fields` ızgarası içindekiler). Tek kaynak JS tarafında: `OK.form.FIELD_SEL`. Buraya yeni bir `is-invalid` kuralı eklerken **iki dalı birden** yaz — yalnız birini yazmak hatayı diğer popülasyonda görünmez kılar. --------------------------------------------------------------------------- */ .ok-field.is-invalid .form-control, .ok-field.is-invalid .form-select, [data-ok-field].is-invalid .form-control, [data-ok-field].is-invalid .form-select { border-color: var(--ok-danger); background-color: var(--ok-danger-bg); } .ok-field.is-invalid .form-control:focus, .ok-field.is-invalid .form-select:focus, [data-ok-field].is-invalid .form-control:focus, [data-ok-field].is-invalid .form-select:focus { border-color: var(--ok-danger); box-shadow: 0 0 0 3px rgba(198, 47, 38, .22); } /* Bootstrap `.invalid-feedback`i yalnız `.is-invalid` KARDEŞİ olduğunda gösterir; OrtakİK'te işaret sarmalayıcıda olduğu için o seçici tutmaz. */ .ok-field.is-invalid .invalid-feedback, [data-ok-field].is-invalid .invalid-feedback { display: block; } /* --------------------------------------------------------------------------- 7. Pilot dalgasında ölçülen iki çakışma (2026-08-22) İkisi de bugün "çalışıyor" ama yalnız dosya yükleme sırası sayesinde: çakışan kuralların özgüllüğü EŞİT (0,1,0) ve `ortakik.css` Bootstrap'ten sonra geldiği için kazanıyor. Sıra bir gün değişirse ikisi de sessizce bozulurdu. Aşağıdaki kurallar sonucu sıradan bağımsız hâle getirir. --------------------------------------------------------------------------- */ /* 7z. ⛔ EN KRİTİK KURAL — kanonik form satırını AYAKTA TUTAN kural. `.ok-field` bir CSS **grid**tir: `display:grid` + `grid-template-columns: 150px minmax(0,1fr)` (`ortakik.css:1718-1727`). Bootstrap `.row` ise `display:flex`. İkisi aynı elemanda buluştuğunda (ADR-T007 §5 kanonik satırı tam olarak bunu yapar) özgüllük EŞİTTİR (0,1,0) ve `ortakik.css` sonra yüklendiği için **grid kazanır**. Sonuç: `col-md-*` sınıfları hiçbir işe yaramaz, etiket sütunu 150px'e çakılır, legacy kolon hizası HİÇ oluşmaz. Ekran düzgün görünür — yalnız istenen genişliklerde değildir. Yani bu, gözle fark edilmesi zor bir sessiz kayıptır ve 350 ekranın tamamını ilgilendirir. `gap: 0` da şarttır: `.ok-field`ın grid boşluğu (`2px var(--ok-sp-3)` = 2px 12px) flex'e geçince kolonlar ARASINA girer ve Bootstrap'in kendi gutter'ına eklenir — her form satırında 12px fazla boşluk oluşurdu. */ .ok-field.row { display: flex; gap: 0; } /* Aynı çakışma KAPSAYICIDA da var: `.ok-fields` (çoğul) alan satırlarını yan yana dizen bir gridtir — `grid-template-columns: repeat(var(--ok-cols,3), 1fr)` (`ortakik.css:2298-2306`). Legacy'nin DIŞ sütun oranlarını (örn. 5/5/2 bölme) taşımak için ona da `row` eklenmesi gerekiyor ve o da aynı sessiz kaybı yaşıyordu. Üç iş kolu bu yüzden dış oranları taşıyamadan bıraktı (Portal, Others, Shared). ⚠️ Buradaki `gap` `.ok-field.row`dakinden FARKLI: `.ok-fields` çok satırlı olabilir (alanlar alta sarar), yani DİKEY aralık korunmalı. Yalnız yatay aralık sıfırlanır — onu artık Bootstrap'in gutter'ı veriyor; ikisi birden kalsaydı sütun arası iki kat açılırdı. */ .ok-fields.row { display: flex; gap: var(--ok-field-gap) 0; } /* 7y. ⛔ ETİKET SÜTUNU HİZASI — oranı aynı olan alanların AYNI yerde başlamasını sağlayan kural. Alan sarmalayıcısı hem `.row` hem `col-md-*`tır (ADR-T007 §5 kanonik satırı, `app\CLAUDE.md` §6 eşleme tablosu). Bu birleşimde etiket sütununun genişliği Bootstrap'te şöyle hesaplanır: etiket = (kap − 24px) × oran 24px = `.row > *` sol+sağ dolgusu denetim kolonunun başlangıcı = etiket + 12px `24px` SABİTTİR, kapla ölçeklenmez. Legacy'nin dar kaplarda oranı ikiye katlama kararı (örn. tam genişlik `col-md-2` ↔ yarım hücre `col-md-4`) YÜZDEYİ doğru eşitler — ikisi de %16,67 — ama bu sabit payı eşitlemez: yarım hücre (0,5P, oran 1/3): 0,167P − 8 + 12 = 0,167P + 4 tam genişlik (P, oran 1/6): 0,167P − 4 + 12 = 0,167P + 8 Sonuç: aynı formda aynı yüzdeye sahip iki alan 4px kaymış başlar. Ölçüm: `Corporate\Company.cshtml` — CCOMPANY_NAME (:157) ve CCOMPANY_WEB (:532) tam genişlik satırlar, komşuları (:143, :170) yarım hücre; ekranda gözle görülür. Gutter'ı sarmalayıcıda sıfırlamak sabit payı düşürür ve formül `kap × oran`a iner — yani hiza artık ölçekten bağımsızdır. ⚠️ Sarmalayıcının DIŞ konumu değişmez: `.row`un `-12px` margin'i ile `.row > *`ın `+12px` dolgusu zaten birbirini götürüyordu; ikisi birden sıfırlanıyor. Değişen yalnız iç ölçeğin tabanı. ⚠️ `.ok-field` sınıfını koruyan 466 çıplak alan bu kuraldan ETKİLENMEZ — onlarda `data-ok-field` yoktur, hizayı `.ok-field` grid'i (`--ok-label-w`) üretir. */ [data-ok-field] { --bs-gutter-x: 0; } /* Gutter gidince kaybolan etiket ↔ denetim boşluğunu geri verir. Değer Bootstrap gutter'ının yarısıyla birebir aynıdır (12px), yani boşluk ölçüsü değişmez. `padding-right` `border-box`ta kutu GENİŞLİĞİNİ değiştirmez, yalnız sağa hizalı metni içeri iter — hizayı bozmadan aralığı üretir. */ [data-ok-field] > .ok-field__label { padding-right: var(--ok-sp-3); } [data-ok-field] > .ok-field__label { align-self: flex-start; min-height: var(--ok-ctrl-h); } /* 7a. Dolgusuz kart gövdesi. `.ok-card__body--flush` ızgara panellerinde dolguyu sıfırlar; `.card-body` ise 16px verir. İki sınıf aynı elemanda buluşuyor (156 liste ekranının tamamında). Birleşik seçici özgüllüğü 0,2,0 yapar. */ .ok-card__body--flush.card-body { padding: 0; } /* 7c. Kart ayağı. `.ok-card__foot` gövdeden bir ton koyu bir şeritle ayrılır (`--ok-panel-alt`) ve alt köşeleri yuvarlar; Bootstrap `.card-footer` ise kart başlığıyla aynı zemini (`--bs-card-cap-bg`, bizde beyaz) verir. Özgüllükleri eşit (0,1,0) olduğu için bugün yalnız dosya sırası sayesinde doğru görünüyor — 58 ekranı ilgilendiren bu farkı sıradan bağımsız hâle getiriyoruz. */ .ok-card__foot.card-footer { padding: var(--ok-sp-2) var(--ok-card-px); background: var(--ok-panel-alt); border-top: 1px solid var(--ok-border); } /* 7b. Bootstrap `.card` kuralı `word-wrap:break-word` taşır ve bu KALITILIR. `.ok-grid` hücreleri varsayılan olarak `nowrap` değildir (nowrap yalnız `.is-nowrap` ile gelir), yani kart içindeki ızgarada IBAN, e-posta, uzun kod gibi boşluksuz değerler kolonu genişletmek yerine KELİME İÇİNDEN bölünmeye başlıyordu. Izgaranın Bootstrap öncesi davranışı geri veriliyor. */ .ok-grid, .ok-grid th, .ok-grid td { word-wrap: normal; overflow-wrap: normal; } /* --------------------------------------------------------------------------- 8. Bordro sayıları — Bootstrap'te karşılığı olmayan, vazgeçilmez davranış Tablo hücrelerindeki sayılar sabit genişlikli rakamla dizilmezse binler basamağı satırdan satıra kayar ve tutar karşılaştırması gözle yapılamaz. Bootstrap'in böyle bir yardımcı sınıfı yok. --------------------------------------------------------------------------- */ .table .ok-num, .table [data-ok-type="number"], .table [data-ok-type="money"] { font-variant-numeric: tabular-nums; text-align: right; } /* ==== base.css =========================================================== */ /* ========================================================================== OrtakİK V2 — Temel katman Sıfırlama, tipografi, temel öğeler, odak yönetimi. tokens.css'ten SONRA yüklenir. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* [hidden] tarayıcı varsayılanı display:none'dur ama bileşen sınıflarımız display:flex/grid verdiği için eziliyor. Bileşenlerin görünürlüğü bu öznitelikle yönetildiği için kural burada güçlendirilir. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; } body { margin: 0; font-family: var(--ok-font); font-size: var(--ok-fs-base); line-height: var(--ok-lh-base); color: var(--ok-text); background: var(--ok-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } h1 { font-size: var(--ok-fs-2xl); line-height: var(--ok-lh-tight); font-weight: var(--ok-fw-semibold); } h2 { font-size: var(--ok-fs-xl); line-height: var(--ok-lh-tight); font-weight: var(--ok-fw-semibold); } h3 { font-size: var(--ok-fs-lg); line-height: var(--ok-lh-tight); font-weight: var(--ok-fw-semibold); } h4 { font-size: var(--ok-fs-md); line-height: var(--ok-lh-tight); font-weight: var(--ok-fw-semibold); } h5, h6 { font-size: var(--ok-fs-base); font-weight: var(--ok-fw-semibold); } a { color: var(--ok-brand-700); text-decoration: none; } a:hover { text-decoration: underline; } strong, b { font-weight: var(--ok-fw-semibold); } small { font-size: var(--ok-fs-xs); } /* [K-62, 2026-08-19] Kullanıcı kararı: "
üst/alt boşluğu azalsın". Dikey kenar boşluğu `--ok-sp-4` (16px) idi; bir ayraç 32px dikey yer kaplıyor ve yoğun veri ekranlarında bölüm arası boşluğun (`.ok-form` 8px) dört katına çıkıyordu. `--ok-sp-2` (8px) ayracın hâlâ nefes almasını sağlar, ölçüyü token'da tutar. Yatay kenar boşluğu 0 kaldı. Uygulama geneli — `hr` her ekranda aynı öğedir. */ hr { border: 0; border-top: 1px solid var(--ok-border); margin: var(--ok-sp-1) 0; } .ok-divider { border: none; height: 2px; background: #b0b0b0; margin: var(--ok-sp-1) 0; border-radius: 2px; } /* ---- Ayracın çevresindeki boşluk: TEK DEĞER ------------------------------- [2026-09-02 — kullanıcı kararı: 4px] Aynı `
` üç farklı boşluk üretiyordu; fark ayracın kendisinden DEĞİL, kapsayıcısından geliyordu. Ölçüm (Corporate\Company.cshtml ve Corporate\WorkplaceDetail.cshtml): · `.ok-form` (FLEX) içinde → gap 4px + margin 4px = 8px / 8px · `.ok-card__body` (BLOK) → yalnız margin = 4px / **0px** Alt boşluğun sıfırlanması Bootstrap'tendir: `.row` negatif üst kenar boşluğu taşır (`margin-top: calc(-1 * var(--bs-gutter-y))`), ayraçtan sonra bir `.row` geliyorsa 4px'i tam olarak yer. Kullanıcının gördüğü "hiç boşluk yok" budur. ⚠️ Legacy `.div-line` 10px/10px veriyordu (`src\OrtakIK\assets\admin\pages\css\ ortakik.css:170-178`); port sırasında 4px'e düşmüş. Kullanıcı 4px'te karar kıldı, yani bu [SAPMA] bilerek korunuyor — ama artık HER KAPSAYICIDA 4px. Aşağıdaki iki kural farkı kapatır: blokta yenen alt boşluk geri gelir, flexte `gap` zaten 4px verdiği için ayracın kendi kenar boşluğu sıfırlanır. Kapsam ölçümü: 94 dosya ayraç kullanıyor, 30'unda hiç `.ok-form` yok. */ .ok-divider + .row { margin-top: 0; } .ok-form > .ok-divider { margin: 0; } img, svg, video { max-width: 100%; height: auto; display: block; } code, kbd, pre, samp { font-family: var(--ok-font-mono); font-size: .92em; } /* Form öğeleri font mirası almaz — zorluyoruz */ button, input, select, textarea, optgroup { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; margin: 0; } button { background: none; border: 0; padding: 0; cursor: pointer; } textarea { resize: vertical; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } th { text-align: start; font-weight: var(--ok-fw-semibold); } /* --- Odak: fare ile tıklamada halka yok, klavye ile var ------------------ */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--ok-focus-color); outline-offset: 2px; border-radius: var(--ok-r-sm); } ::selection { background: var(--ok-brand-500); color: #FFFFFF; } /* --- İnce kaydırma çubuğu (yoğun tablolarda görsel gürültüyü azaltır) --- */ * { scrollbar-width: thin; scrollbar-color: var(--ok-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--ok-border-strong); border: 3px solid transparent; background-clip: content-box; border-radius: var(--ok-r-pill); } *::-webkit-scrollbar-thumb:hover { background-color: #9FB0C4; background-clip: content-box; } /* --- Ekran okuyucuya özel ---------------------------------------------- */ .ok-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } select.ok-sr-only, input.ok-sr-only, textarea.ok-sr-only { width: 1px; min-width: 0; height: 1px; } /* Klavyeyle odaklanınca görünür hale gelen "içeriğe atla" bağlantısı */ .ok-skip-link { position: absolute; left: var(--ok-sp-4); top: -100px; z-index: var(--ok-z-toast); padding: var(--ok-sp-2) var(--ok-sp-4); background: var(--ok-surface); border: 1px solid var(--ok-brand-600); border-radius: var(--ok-r-md); box-shadow: var(--ok-sh-md); font-weight: var(--ok-fw-medium); transition: top var(--ok-dur-base) var(--ok-ease); } .ok-skip-link:focus-visible { top: var(--ok-sp-3); text-decoration: none; } /* --- Başa dön ------------------------------------------------------------ */ .ok-totop { position: fixed; inset-inline-end: var(--ok-sp-4); inset-block-end: var(--ok-sp-4); z-index: var(--ok-z-toast); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid #27323F; border-radius: 50%; background: #1A2530; color: #B4C0CD; box-shadow: 0 4px 12px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--ok-dur-slow) var(--ok-ease), visibility var(--ok-dur-slow) var(--ok-ease), color var(--ok-dur-base) var(--ok-ease); } .ok-totop.is-visible { opacity: .7; visibility: visible; } .ok-totop:hover { opacity: 1; color: #2E7DD3; } :root[data-theme="dark"] .ok-totop { border-color: #E2E8F1; background: #FFFFFF; color: #4A5A6E; box-shadow: 0 4px 12px rgba(16, 32, 56, .10), 0 1px 3px rgba(16, 32, 56, .06); } :root[data-theme="dark"] .ok-totop:hover { color: #1B6FD6; } .ok-totop .ok-icon { width: 20px; height: 20px; stroke-width: 2; vertical-align: 0; } /* --- İkon ---------------------------------------------------------------- */ .ok-icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -.2em; } .ok-icon--sm { width: 14px; height: 14px; } .ok-icon--lg { width: 22px; height: 22px; } .ok-icon--xl { width: 28px; height: 28px; stroke-width: 1.5; } /* Dolgu gerektiren semboller (ör. uyarı üçgeni) bu sınıfla işaretlenir */ .ok-icon--solid { fill: currentColor; stroke: none; } /* --- Sayısal hizalama ---------------------------------------------------- */ .ok-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; text-align: end; } /* --- Metin yardımcıları (sık kullanıldıkları için base'te) --------------- */ .ok-muted { color: var(--ok-text-2); } .ok-faint { color: var(--ok-text-3); } .ok-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ok-nowrap { white-space: nowrap; } .ok-required::after { content: "*"; color: var(--ok-danger); margin-inline-start: 2px; font-weight: var(--ok-fw-bold); } /* ==== layout.css ========================================================= */ /* ========================================================================== OrtakİK V2 — Kabuk düzeni Üst bar + sol menü + içerik. Eski sistemdeki iframe yapısı YOK. Belge doğal olarak kayar; üst bar sabit, sol menü sticky. ========================================================================== */ /* ---------- İskelet ------------------------------------------------------ */ .ok-shell { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "sidebar main"; min-height: 100vh; /* Kabuğun arkası (en arkadaki plan) `--ok-page-bg` okur; `body` base.css'te `--ok-bg` okuyor ve o değer giriş ekranı içindir. Kabuk ayrı token kullanır ki bu satırdaki karar auth.css'i etkilemesin. [2026-08-19 — kullanıcı kararı] Zemin GRİ, içerik beyaz. (K-49'da tersiydi; değer tokens.css'te çevrildi, bu satır değişmedi.) */ background: var(--ok-page-bg); } /* ========================================================================== ÜST BAR [2026-08-18] Kullanıcı kararı: "üstteki bar background rengi de soldaki menü gibi olsun". Zemin beyazdan koyu lacivere döndüğü için barın İÇİNDEKİ her ön plan öğesi yeniden renklendirildi — aksi hâlde `--ok-text-2` / `--ok-brand-700` gibi açık zemine ayarlı renkler koyu barda okunmaz olur. Renkler `--ok-topbar-*` token'larından okunur; o token'lar da tokens.css'te `--ok-sidebar-*`'tan türetilir. Buraya ham renk yazılmaz. ========================================================================== */ .ok-topbar { position: fixed; inset: 0 0 auto 0; height: var(--ok-topbar-h); z-index: var(--ok-z-topbar); display: flex; align-items: center; gap: var(--ok-sp-3); padding-inline: var(--ok-sp-3); background: var(--ok-topbar-bg); /* Koyu zeminde `--ok-border` (#E2E8F1) görünmez/parlak bir çizgi olurdu */ border-bottom: 1px solid var(--ok-topbar-border); box-shadow: var(--ok-topbar-shadow); color: var(--ok-topbar-fg); /* Odak halkası `--ok-brand-600` idi; koyu lacivert üzerinde ~2.4:1 ile görünmez kalıyordu. Bar bağlamında açık mavi aksana çevrilir (~5.9:1). */ --ok-focus-color: var(--ok-topbar-accent); } /* Üst barın İÇİNDE duran ama BEYAZ yüzeyde açılan katmanlar (kullanıcı menüsü, dil menüsü) barın koyu renk bağlamını miras almamalı: `.ok-menu` kendi zeminini `--ok-surface` ile kurar, metin rengini ise büyük ölçüde miras alır. Bu kural o bağlamı açık temaya geri döndürür. */ .ok-topbar .ok-menu { color: var(--ok-text); --ok-focus-color: var(--ok-brand-600); } .ok-topbar__brand { display: flex; align-items: center; gap: var(--ok-sp-2); min-width: 0; flex: 0 0 auto; text-decoration: none; color: var(--ok-topbar-fg-strong); } .ok-topbar__brand:hover { text-decoration: none; } /* Legacy `logo.png` (doğal ölçü 160x40). Bar yüksekliği 56px; 40px'lik doğal yükseklik üstte/altta yalnız 8px bırakıp barı sıkıştırıyordu. 32px, oranı bozmadan (width:auto → 128px) üstte-altta 12px nefes bırakır ve KÜÇÜLTME yönünde ölçeklediği için bulanıklaşmaz. */ .ok-topbar__logo-img { display: block; height: 32px; width: auto; max-width: 100%; object-fit: contain; } /* Menü aç/kapa düğmesi */ .ok-topbar__toggle { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--ok-r-md); color: var(--ok-topbar-fg); flex: 0 0 auto; } .ok-topbar__toggle:hover { background: var(--ok-topbar-hover); color: var(--ok-topbar-fg-strong); } /* Şirket adı / logosu — çok kiracılı sistemde hangi şirkette olduğun kritik */ .ok-topbar__company { display: flex; align-items: center; gap: var(--ok-sp-2); padding: var(--ok-sp-1) var(--ok-sp-3); border-inline-start: 1px solid var(--ok-topbar-border); min-width: 0; color: var(--ok-topbar-fg-dim); text-decoration: none; } .ok-topbar__company:hover { text-decoration: none; color: var(--ok-topbar-fg-strong); } .ok-topbar__company-name { font-weight: var(--ok-fw-semibold); color: var(--ok-topbar-fg-strong); font-size: var(--ok-fs-sm); } .ok-topbar__company-logo { display: block; max-height: 28px; max-width: 160px; width: auto; height: auto; object-fit: contain; } .ok-topbar__company-code { font-size: var(--ok-fs-xs); color: var(--ok-topbar-fg-dim); font-variant-numeric: tabular-nums; } .ok-topbar__spacer { flex: 1 1 auto; min-width: 0; } .ok-topbar__actions { display: flex; align-items: center; gap: var(--ok-sp-1); flex: 0 0 auto; } /* Bordro dönemi seçici — eski sistemde de üst barda duran mavi "pill". G1712 + D1353 yetkisi olmayan kullanıcıda gizlenir (data-aut). [2026-08-18] Koyu bara geçişte `--ok-brand-50` dolgu + `--ok-brand-700` metin (açık zemin kurgusu) barda parlayan bir "delik" yapıyordu. Legacy'de bu düğme zaten koyu mavi zemin üzerinde beyazdı (`src\OrtakIK\Default.aspx:169` — `color:#fff; background-color:#1486ff`), yani dolu mavi + beyaz metin hem parite hem okunabilirlik açısından doğru (beyaz / #1B6FD6 ≈ 4.9:1). */ .ok-period { display: inline-flex; align-items: center; gap: var(--ok-sp-2); height: var(--ok-ctrl-h); padding-inline: var(--ok-sp-3); border: 1px solid var(--ok-topbar-active); border-radius: var(--ok-r-pill); background: var(--ok-topbar-active); color: var(--ok-text-on-brand); font-size: var(--ok-fs-sm); font-weight: var(--ok-fw-semibold); white-space: nowrap; cursor: pointer; transition: background var(--ok-dur-fast) var(--ok-ease), border-color var(--ok-dur-fast) var(--ok-ease); } .ok-period:hover { background: var(--ok-brand-500); border-color: var(--ok-brand-500); } /* İkon düğmesi (dil, bildirim, yardım) */ .ok-topbar__icon-btn { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--ok-r-md); color: var(--ok-topbar-fg); } .ok-topbar__icon-btn:hover { background: var(--ok-topbar-hover); color: var(--ok-topbar-fg-strong); } .ok-topbar__icon-btn[aria-expanded="true"] { background: var(--ok-topbar-open); color: var(--ok-topbar-fg-strong); } /* [2026-08-18] A iş kolu bildirim düğmesini üst bardan kaldırıyor; bu sınıfın tek kullanıcısı o düğmeydi (shell.js:134). ADAY ÖLÜ KURAL — silinmedi, silme kararı orkestratörün. Kırmızı rozet zeminini kendisi bastığı için koyu barda da okunur (beyaz / #C62F26 ≈ 5.9:1). */ .ok-topbar__badge { position: absolute; top: 3px; inset-inline-end: 3px; min-width: 16px; height: 16px; padding-inline: 4px; border-radius: var(--ok-r-pill); background: var(--ok-danger); color: #fff; font-size: 10px; font-weight: var(--ok-fw-bold); line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; } /* Kullanıcı düğmesi — yalnız üst barda kullanılır (shell.js:148) */ .ok-user-btn { display: flex; align-items: center; gap: var(--ok-sp-2); height: 40px; padding: 0 var(--ok-sp-2); border-radius: var(--ok-r-md); color: var(--ok-topbar-fg-strong); max-width: 220px; } .ok-user-btn:hover { background: var(--ok-topbar-hover); } .ok-user-btn[aria-expanded="true"] { background: var(--ok-topbar-open); } @media (max-width: 480px) { .ok-topbar__actions:has(.ok-period) .ok-user-btn { padding-inline: 4px; } .ok-topbar__actions:has(.ok-period) .ok-user-btn > svg { display: none; } } .ok-avatar { width: 30px; height: 30px; border-radius: var(--ok-r-pill); background: var(--ok-brand-100); color: var(--ok-brand-700); display: grid; place-items: center; font-size: var(--ok-fs-xs); font-weight: var(--ok-fw-bold); flex: 0 0 auto; overflow: hidden; border: 1px solid var(--ok-brand-200); } .ok-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Üst bardaki avatar. Kapsam bilerek `.ok-user-btn >` ile daraltıldı: aynı `.ok-avatar` sınıfı kullanıcı menüsünün kimlik bloğunda da (ok-avatar--lg, BEYAZ panel üzerinde) kullanılıyor ve o DOM olarak `.ok-topbar` içinde duruyor — `.ok-topbar .ok-avatar` yazmak onu da bozardı. */ .ok-user-btn > .ok-avatar { background: var(--ok-topbar-hover); color: var(--ok-topbar-fg-strong); border-color: var(--ok-topbar-border); } .ok-user-btn__text { min-width: 0; flex: 1 1 auto; display: block; text-align: start; line-height: 1.2; overflow: hidden; } .ok-user-btn__name { display: block; font-size: var(--ok-fs-sm); font-weight: var(--ok-fw-semibold); } .ok-user-btn__role { display: block; font-size: var(--ok-fs-xs); /* `--ok-text-3` (#7C8A9C) koyu barda ~2.5:1 idi; `--ok-topbar-fg-dim` ~4.8:1 */ color: var(--ok-topbar-fg-dim); } /* ========================================================================== SOL MENÜ ========================================================================== */ /* [K-51] Koyu tema. Renkler tokens.css'teki `--ok-sidebar-*` değişkenlerinden okunur; buraya ham renk yazılmaz. Menü kendi renk bağlamını kurduğu için içindeki bileşenler (`.ok-input`, `.ok-btn--ghost`) de burada uyarlanır — aksi hâlde beyaz zeminli varsayılanlarıyla koyu menüde parlarlar. */ .ok-sidebar { grid-area: sidebar; width: var(--ok-sidebar-w); margin-top: var(--ok-topbar-h); position: sticky; top: var(--ok-topbar-h); height: calc(100vh - var(--ok-topbar-h)); display: flex; flex-direction: column; background: var(--ok-sidebar-bg); border-inline-end: 1px solid var(--ok-sidebar-bg); color: var(--ok-sidebar-fg); z-index: var(--ok-z-sidebar); transition: width var(--ok-dur-base) var(--ok-ease); /* İnce kaydırma çubuğu base.css'te açık zemine göre ayarlı; koyu menüde görünmez oluyordu. */ scrollbar-color: rgba(255, 255, 255, .28) transparent; } .ok-sidebar *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); } /* Menü arama — eski sistemde yok, 150 menü öğesi için eklendi */ .ok-sidebar__search { padding: var(--ok-sp-3) var(--ok-sp-3) var(--ok-sp-2); border-bottom: 1px solid var(--ok-sidebar-border); flex: 0 0 auto; } .ok-sidebar__search .ok-input { background: var(--ok-sidebar-field); border-color: var(--ok-sidebar-border); color: var(--ok-sidebar-fg-strong); } .ok-sidebar__search .ok-input::placeholder { color: var(--ok-sidebar-fg-dim); } .ok-sidebar__search .ok-input:focus { background: rgba(255, 255, 255, .16); border-color: var(--ok-sidebar-accent); } .ok-sidebar__search .ok-icon { color: var(--ok-sidebar-fg-dim); } .ok-sidebar__nav { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--ok-sp-2) var(--ok-sp-2) var(--ok-sp-6); } /* ⚠️ ÖLÜ KURAL (2026-08-19). `ok-sidebar__foot` işaretlemesini üreten tek yer shell.js `renderSidebar()` idi; "Menüyü daralt" satırı kullanıcı kararıyla kaldırıldı (işlev üst bardaki hamburger düğmesinde). Kural, bir sayfa kendi menü ayağını eklerse diye ve ölü kod kaldırma kararı orkestratöre ait olduğu için silinmedi — bkz. shell.js'teki aynı gerekçeli notlar. */ .ok-sidebar__foot { flex: 0 0 auto; padding: var(--ok-sp-2); border-top: 1px solid var(--ok-sidebar-border); display: flex; align-items: center; gap: var(--ok-sp-2); } .ok-sidebar__foot .ok-btn { color: var(--ok-sidebar-fg); } .ok-sidebar__foot .ok-btn:hover { background: var(--ok-sidebar-hover); color: var(--ok-sidebar-fg-strong); } /* -- Menü öğeleri -- [2026-08-19] Satır arası dikey boşluk ölçülü biçimde azaltıldı (kullanıcı kararı): 14 üst + 136 alt menüde tarama mesafesi kısalsın diye. Değişenler yalnız DİKEY ölçüler — yatay dolgu, ikon boşluğu ve tıklama alanının genişliği aynı kaldı: .ok-nav__group alt boşluk 2px → 1px .ok-nav__link dikey dolgu 8px → 6px (satır yüksekliği ~34px → ~30px) .ok-nav__sublink dikey dolgu 6px → 4px .ok-nav__sub alt boşluk 16px → 8px (grup arası ayrım korunuyor) */ .ok-nav__group { margin-bottom: 1px; } .ok-nav__link { display: flex; align-items: center; gap: var(--ok-sp-3); width: 100%; padding: 6px var(--ok-sp-3); border-radius: var(--ok-r-md); color: var(--ok-sidebar-fg); font-size: var(--ok-fs-sm); font-weight: var(--ok-fw-medium); text-align: start; text-decoration: none; position: relative; transition: background var(--ok-dur-fast) var(--ok-ease), color var(--ok-dur-fast) var(--ok-ease); } .ok-nav__link:hover { background: var(--ok-sidebar-hover); color: var(--ok-sidebar-fg-strong); text-decoration: none; } .ok-nav__link > .ok-icon { color: var(--ok-sidebar-fg-dim); transition: color var(--ok-dur-fast) var(--ok-ease); } .ok-nav__link:hover > .ok-icon { color: var(--ok-sidebar-fg-strong); } .ok-nav__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ok-nav__arrow { flex: 0 0 auto; color: var(--ok-sidebar-fg-dim); transition: transform var(--ok-dur-base) var(--ok-ease); } .ok-nav__link[aria-expanded="true"] { color: var(--ok-sidebar-fg-strong); } .ok-nav__link[aria-expanded="true"] > .ok-nav__arrow { transform: rotate(180deg); } .ok-nav__link[aria-expanded="true"] > .ok-icon { color: var(--ok-sidebar-fg-strong); } /* Alt menü — TA_RESOURCES'ta alt menülerin CICON değeri boş, bu yüzden ikonsuz */ .ok-nav__sub { overflow: hidden; margin: 2px 0 var(--ok-sp-1); padding-inline-start: calc(var(--ok-sp-3) + 9px); border-inline-start: 1px solid var(--ok-sidebar-border); margin-inline-start: calc(var(--ok-sp-3) + 9px); } .ok-nav__sub[hidden] { display: none; } .ok-nav__sublink { display: block; padding: 4px var(--ok-sp-3); border-radius: var(--ok-r-sm); color: var(--ok-sidebar-fg); font-size: var(--ok-fs-sm); text-decoration: none; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ok-nav__sublink:hover { background: var(--ok-sidebar-hover); color: var(--ok-sidebar-fg-strong); text-decoration: none; } /* Aktif durum: canlı mavi dolgu + açık mavi sol şerit. [K-51] Eskiden `--ok-brand-50` (neredeyse beyaz) dolgu + koyu mavi metindi; koyu zeminde bu bir "delik" gibi duruyor ve metni okunmaz yapıyordu. */ .ok-nav__sublink.is-active, .ok-nav__link.is-active { background: var(--ok-sidebar-active); color: var(--ok-sidebar-fg-strong); font-weight: var(--ok-fw-semibold); } .ok-nav__sublink.is-active:hover, .ok-nav__link.is-active:hover { background: var(--ok-brand-500); color: var(--ok-sidebar-fg-strong); } .ok-nav__sublink.is-active::before, .ok-nav__link.is-active::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; translate: 0 -50%; width: 3px; height: 60%; border-radius: 0 var(--ok-r-pill) var(--ok-r-pill) 0; background: var(--ok-sidebar-accent); } .ok-nav__link.is-active > .ok-icon { color: var(--ok-sidebar-fg-strong); } /* Arama eşleşmesi vurgusu */ .ok-nav mark { background: #FFF1A8; color: #16202E; /* koyu menüde `inherit` açık metni sarı üzerine koyardı */ border-radius: 2px; padding: 0; } .ok-nav__empty { padding: var(--ok-sp-4) var(--ok-sp-3); color: var(--ok-sidebar-fg-dim); font-size: var(--ok-fs-sm); text-align: center; } /* -- Daraltılmış (rail) mod: yalnız ikonlar, üzerine gelince uçan alt menü -- */ [data-sidebar="rail"] { --ok-sidebar-w: var(--ok-sidebar-rail-w); } [data-sidebar="rail"] .ok-sidebar__search, [data-sidebar="rail"] .ok-nav__text, [data-sidebar="rail"] .ok-nav__arrow { display: none; } [data-sidebar="rail"] .ok-nav__link { justify-content: center; padding-inline: 0; } [data-sidebar="rail"] .ok-nav__sub { display: none; } [data-sidebar="rail"] .ok-nav__group:hover > .ok-nav__sub { display: block; position: fixed; inset-inline-start: var(--ok-sidebar-rail-w); min-width: 240px; margin: 0; padding: var(--ok-sp-2); /* Rail modunda uçan alt menü de menünün parçası — koyu kalır (K-51). */ background: var(--ok-sidebar-bg); border: 1px solid var(--ok-sidebar-border); border-radius: var(--ok-r-lg); box-shadow: var(--ok-sh-lg); z-index: var(--ok-z-dropdown); max-height: 70vh; overflow-y: auto; } /* -- Mobil: kayar panel (drawer) -- */ .ok-backdrop { position: fixed; inset: 0; background: rgba(16, 32, 56, .42); z-index: var(--ok-z-backdrop); opacity: 0; animation: ok-fade-in var(--ok-dur-base) var(--ok-ease) forwards; } @keyframes ok-fade-in { to { opacity: 1; } } /* ========================================================================== ANA ALAN ========================================================================== */ .ok-main { grid-area: main; margin-top: var(--ok-topbar-h); min-width: 0; display: flex; flex-direction: column; } .ok-gomulu { background: var(--ok-page-bg); } .ok-gomulu .ok-main { margin-top: 0; } .ok-gomulu .ok-page-head__actions { justify-content: flex-end; } .ok-modal--hizli-tanim .ok-modal__body { padding: 0; overflow: hidden; } .ok-modal--secim .ok-modal__body { min-height: 400px; } .ok-hizli-tanim__cerceve { display: block; width: 100%; height: min(72vh, 680px); border: 0; } /* [K-50] İçerik alanı dört yandan da genişletildi: dış dolgu küçüldükçe panel büyür. Eski değerler 16/20/40px idi ve özellikle yanlarda 20px'lik şerit, geniş listelerde kolon sığdırmayı zorlaştırıyordu. */ .ok-content { flex: 1 1 auto; width: 100%; max-width: var(--ok-content-max); margin-inline: auto; /* [K-55, 2026-08-19] Sayfa dikey iç boşluğu 12/24 → 8/20. Yatay 12px KALDI. */ /* [2026-08-22 — kullanıcı kararı] Dört yan da 8px'e eşitlendi (eski 8/12/20). Kullanıcı değeri `wwwroot` aynasında denedi; kalıcı olsun diye kaynağa taşındı. */ padding: var(--ok-sp-1) var(--ok-sp-1) var(--ok-sp-1); min-width: 0; } /* Tam genişlik gereken ekranlar (puantaj matrisi, geniş raporlar) */ .ok-content--wide { max-width: none; } /* -- Sayfa başlığı: breadcrumb + başlık + aksiyonlar -- */ .ok-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ok-sp-4); flex-wrap: wrap; margin-bottom: var(--ok-sp-3); /* K-55: 16 → 12 */ margin-left: var(--ok-sp-2); } .ok-page-head__text { min-width: 0; } /* Aksiyonlar HER ZAMAN sağda. `space-between` yalnız iki çocuk varken sağa yaslar; başlık bloğu basılmayan ekranlarda (K-36) tek çocuk kalıyor ve düğmeler sola düşüyordu. `margin-inline-start: auto` iki durumda da doğru sonucu verir. */ .ok-page-head__actions { margin-inline-start: auto; } /* Kırıntı yolu bu bloğa taşındığında (K-40, admin-shell.js) hizalama tabandan ortaya alınır: kırıntı tek satırlık ince bir metin, düğmeler ise yüksek — `flex-end` kırıntıyı düğmelerin altına yapıştırırdı. Alt boşluk da küçülür, çünkü artık iki satır değil tek satır var. */ .ok-page-head--with-crumbs { align-items: center; } .ok-page-head--with-crumbs > .ok-crumbs { margin-bottom: 0; } .ok-page-title { font-size: var(--ok-fs-xl); font-weight: var(--ok-fw-semibold); line-height: var(--ok-lh-tight); letter-spacing: -.01em; display: flex; align-items: center; gap: var(--ok-sp-2); } .ok-page-desc { margin-top: var(--ok-sp-1); color: var(--ok-text-2); font-size: var(--ok-fs-sm); } .ok-page-head__actions { display: flex; align-items: center; gap: var(--ok-sp-2); flex-wrap: wrap; } /* -- Breadcrumb: eski sistemde yok, CPARENT_CODE zincirinden üretiliyor -- */ .ok-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ok-sp-1); margin-bottom: var(--ok-sp-3); font-size: var(--ok-fs-xs); color: var(--ok-text-2); background: var(--ok-surface-sunk); border: 1px solid var(--ok-border); border-radius: var(--ok-r-md); padding: 6px 12px; } /* Boş kırıntı yer kaplamaz. Ana sayfada `renderCrumbs()` artık hiçbir öğe basmıyor (kullanıcı kararı 2026-08-19); `display: flex` + `margin-bottom` yüzünden boş `