yüzeyi (YAZ/DÜZENLE/BOŞ). TEK kaydırma = sayfa (panelde overflow YOK);
önizleme kolonu sticky (doküman tam görünsün). Mobilde önizleme ÜSTTE + static (belge girdinin
kendisi — .fi-izgara'nın display:none mobil hatası tekrarlanmaz). Eski im ve fi-izgara CSS'i ölü → F3b. */
/* ⚠ İKİ KOLON ↔ ALT ALTA EŞİĞİ: 1000px. 2026-08-07'den beri TEK YERDE: `.is-izgara`nın
dar-ekran bloğu (K25 tek sınıf). Eskiden yedi ayrı sınıfa kopyalanmıştı ve o yüzden
`.bi-grid` atlanıp 900'de kalmıştı; `.im-grid` de listede olduğu hâlde ölüydü.
Yeni iki-kolon yüzeyi `.is-izgara` yazar, eşiği HAZIR alır — listeye ekleme YOK.
2026-08-07'ye kadar 1100'dü ve İKİ YAYGIN LAPTOP YAPILANDIRMASI eşiği 3-7px farkla
kaçırıyordu: 1366x768 @%125 = 1093 CSS px · 1920x1080 @%175 = 1097. O kullanıcılar
sırf birkaç piksel yüzünden tamamen farklı bir yerleşim görüyordu.
1000'de en dar hâlde bile önizleme 440px kalır (1024px tablette) — A4 "genişliğe
sığdır" ile okunur. Altında istifleme GERÇEKTEN daha iyi: 380px önizleme + 440px form
ikisi de sıkışır, alt alta her ikisi tam genişlik alır.
Karar ölçümle alındı; tablo docs/referans/ui_standard.md'de. Eşik değişirse YEDİSİ
BİRDEN değişir, yoksa yüzeyler farklı genişliklerde kırılır. */
/* Ölçü de `.is-izgara`da; bu yüzeylerde pane SOLDA olduğu için yalnız aynalama kalır.
⚠ BİLEŞİK seçici ZORUNLU: yalın `.fm-izgara` taban `.is-izgara` ile AYNI özgüllükte (0,1,0)
ve dosyada ONDAN ÖNCE geliyor — sonraki kazanır ve aynalama sessizce ölürdü (ölçüldü:
pane 871px çıkıyordu, 520 yerine). `.is-izgara.fm-izgara` (0,2,0) sıradan bağımsız kazanır. */
.is-izgara.fm-izgara,.is-izgara.bi-grid{grid-template-columns:var(--pane-genislik) minmax(0,1fr)}
/* TEK KOLON HÂLİ — pane yokken (dosya yok / tür seçilmedi) ızgara tek sütuna iner.
⚠ Kural IZGARAYA bakar; sınıf da IZGARAYA konmalıdır. 2026-08-11 taramasında `tek`
mekanizmasının ÜÇ tüketicisinden İKİSİ ölüydü ve ikisi de farklı sebepten:
· finans-kasa-yeni → sınıfı FORMA koyuyordu (`.fm-izgara.tek` ızgarayı hedefler) → eşleşmez
· odeme-islem → sınıfı doğru yere koyuyordu ama `.is-izgara.tek` diye KURAL YOKTU
Sonuç ikisinde de aynı: pane gizliyken --pane-genislik kadar (430-1000px) BOŞ kolon kalıyor,
iş kolonu yana sıkışıyordu. CSS eşleşmemesi hata vermez — sessizce yanlış yerleşim üretir.
Kural artık TABAN sınıfta: yeni yüzey `tek`i ızgaraya yazdığı anda bedava doğru çalışır. */
.is-izgara.tek{grid-template-columns:1fr}
/* ÖNİZLEME KOLONU — TEK GEOMETRİ (kullanıcı 2026-07-30: "önizlemenin boyutları her yerde standart
olsun"). Eskiden üç ayrı değer vardı: --onizleme-boy (fiş), 82vh (belge sayfası), hiç (kabul
ekranı → içerik kadar büzülüyordu). Artık ölçü TEK sınıfta; id'ye bağlı seçici yerine sınıf,
böylece her sayfa aynı ölçüyü ALARAK katılır. */
/* SEÇENEK 3 (kullanıcı kararı 2026-08-06): DIŞ kolon satır boyuna UZAR — form kolonuyla
hem üstten hem ALTTAN hizalanır — İÇ kabuk (.onz-kabuk) yapışık kalır, yani kaydırınca
belge gözün önünden gitmez. Tek elemanla olmuyordu: uzayan eleman sticky olamaz.
Kolon-içi scroll YOK (ui_standard tip-3 yasağı korunur): kaydıran hâlâ SAYFADIR.
Dış kolon artık salt kap — kart görünümü ve ölçü iç kabuğa geçti (.kart sınıfı
markup'ta duruyor, görünümü burada nötrlenir). */
/* #fm-onizleme ID secicileri EMEKLI (2026-08-07): ID'nin ozgullugu (1,1,1) K25'in
sinif kurallarini (0,3,0) eziyordu — Isleme Masasi'nda kart satir tavanina uymuyordu
(genis pencerede 9px kisa, dar pencerede 185px tasma; kullanicinin iki bildirimi de
ayni kokten). fm-onizleme artik markup'ta .onizleme-kolon tasir; TUM onizleme
kolonlari AYNI sinif kurallarindan gecer. */
.onizleme-kolon{align-self:stretch;height:auto;min-height:0;padding:0;overflow:visible;
background:none;border:0;box-shadow:none;display:block}
/* İÇ KABUK — kart görünümü + sabit ölçü + yapışkanlık burada.
⚠ Dış kapta overflow:hidden OLAMAZ: sticky çocuğu kendi kabına yapıştırır ve etki ölür. */
/* ⚠ top:0 ZORUNLU — boşluk vermek için pozitif değer YAZMA. Yapışkanlığın referans kenarı
burada `main#icerik`in içerik üstüdür ve kart zaten TAM orada durur; ölçüldü: top'a yazılan
her piksel kartı daha kaydırma başlamadan o kadar AŞAĞI itiyor (top:16 → dinlenmede 133,
form kolonu 117 → kullanıcının gördüğü 16px kayma, 2026-08-07). Üstelik kaydırınca 133'ten
126'ya sıçrıyordu. Şeritle arasındaki nefes payını main'in kendi padding'i (--bo-5) verir;
o pay scrollport'un DIŞINDA kaldığı için yapışık hâlde de korunur (ölçüldü: 117 sabit).
Eski değer calc(--serit-pay + --bo-4) idi; o değişken hep 0px'ti ve ADR G16 adım 6'da silindi —
ifade `.onzp` kalıbından kopyalanmıştı. */
.onizleme-kolon > .onz-kabuk{position:sticky;top:0;
/* ⚠ flex:none ZORUNLU: belgeOnizleyici dis kaba inline `display:flex` yaziyor, taban
kuraldaki `flex:1` de kabugu satir boyuna GERIYOR ve `height`i eziyordu (olculdu:
550 yerine 1054 -> sticky hic tutmuyordu). Dis kap uzasin, kabuk KENDI boyunda kalsin.
Bu TABAN kural = kabuk modelinin KAPALI olduğu hâl (dar veya kısa ekran); orada
yapışkanlık hâlâ işe yarar. Kabuk modeli açıkken aşağıdaki K25 bloğu height:100% yazar. */
flex:none;
height:var(--onizleme-boy);min-height:var(--onizleme-min);box-sizing:border-box;
background:var(--renk-yuzey);border:1px solid var(--renk-sinir);border-radius:var(--yaricap);
/* ⚠ padding-top 0 (K36, 2026-09-02): kartın İLK satırı artık `.pnl-bas` başlığıdır ve
kartın üst kenarına YAPIŞIK oturur (kart başlığı grameri). Eski 16px'lik iç pay,
etiket+bar ikilisini kartın içinde aşağı itmek içindi; başlık kendi payını taşıyor. */
box-shadow:var(--golge-sm);overflow:hidden;padding-top:0}
/* ══ K36 · PANEL BAŞLIĞI (ADR G15 karar 1 revizyonu — 2026-09-02 kullanıcı kararı) ══════
ESKİ MODEL: kolon etiketi + kolonun araçları kabuk bandında (`#serit-kapsam.kolon`).
Ölçüldü ve BIRAKILDI — üç ayrı gramer birden yürüyordu (7 yüzey bantta · 5 kartta ·
3'ü İKİSİNDE BİRDEN) ve bandın sahipliği yalnız X hizasına dayanıyordu: kart ile bant
arasında `main#icerik`in 24px payı var, <1000px'te ızgara istiflenirken bant tek kolona
düşüyor ve segmentler kendi panelinin üstünde OLMUYORDU.
YENİ MODEL: başlık panelin KENDİ ilk satırıdır — sahiplik hizadan değil SINIRDAN okunur,
istiflemede panelle birlikte iner (dar ekran için ayrı kural gerekmez).
Turnusol: "bu kontrolü kaldırsam hangi kutu anlamını yitirir? sayfa → kabuk bandı ·
tek panel → o panelin başlığı." Kapsam bandı (dönem/defter/düzen — ADR G15-B) DOKUNULMADI.
ÖLÇÜ: --h-panel-bas (tokens.css). Etiket tipografisi eski `.onz-baslik`/`.sk-et`ten
BİREBİR devralındı — yerleşim değişti, dil değişmedi.
⚠ position:sticky: iş kolonu kendi içinde kaydırılır (K25) → başlık tepede kalmalı.
z-index 2, K26 bölüm başlığı (z-index 1) altından geçsin diye. */
.pnl-bas{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex-shrink:0;
min-height:var(--h-panel-bas);padding:0 8px;box-sizing:border-box;
background:var(--renk-yuzey);border-bottom:1px solid var(--renk-cizgi);
position:sticky;top:0;z-index:2}
.pnl-et{font-size:var(--fs-xs);font-weight:var(--fw-kalin);text-transform:uppercase;
letter-spacing:.04em;color:var(--renk-soluk);white-space:nowrap;flex-shrink:0}
/* Esneme: etiket+bağlam solda, araçlar sağda. Ayrı eleman (margin-left:auto DEĞİL) —
flex-wrap sarınca ikinci satırda araçlar sola dönsün, boşlukta asılı kalmasın. */
.pnl-esn{flex:1 1 0;min-width:0}
/* Kolonun KENDİSİ padding'li bir kart ise (Belge Kabul `.be-form` · Teklif formu) başlık,
kartın payının DIŞINA taşar ve tam genişlik bant olur — K26 bölüm başlığının (h4) aynı
çözümü. Pay AYNI jetondan: `.kart` da `.be-form` da --bo-4 taşır, kopya sayı yok. */
.is-izgara > .is-yuzey.kart > .pnl-bas{
margin:0 calc(-1 * var(--bo-4)) var(--bo-4)}
/* ⚠ Üst pay negatif marjla DEĞİL, kartın padding-top'unu sıfırlayarak alınır (2026-09-15,
kullanıcı: "Künye önizleme başlığıyla aynı hizada değil, aşağı kaymış"). Kart K25'te
kaydırma kabıdır (overflow:auto) ve başlık sticky; Chrome sticky öğeyi kabın İÇERİK
kutusunun (padding altı) üstüne çıkarmaz → negatif marj-top hiç işlemiyor, başlık
16px aşağıda oturuyordu (ölçüm canlı: sol bar 118, sağ bar 134; padding-top:0 ile
dinlenmede de kaydırınca da 118). Sol pane (.onz-kabuk) zaten aynı kalıpta: padding-top 0,
"kartın ilk satırı başlıktır". İçerik başlangıcı değişmez: barın margin-bottom'u --bo-4. */
.is-izgara > .is-yuzey.kart:has(> .pnl-bas){padding-top:0}
.pnl-bas .btn{font-size:var(--fs-xs2);padding:1px 8px}
.pnl-bas .alan,.pnl-bas select.alan{width:auto;max-width:100%;font-size:var(--fs-xs2);
padding:2px 4px;height:auto}
/* Başka kaplarda saydam geçiş katmanı (belge çekmecesi, fiş paneli) — görünüm vermez. */
.onz-kabuk{display:flex;flex-direction:column;flex:1;min-height:0}
/* ══ UYGULAMA KABUĞU — iki-kolon iş yüzeylerinin kaydırma modeli (kullanıcı kararı 2026-08-07,
maketten seçildi: "C'yi uygula"). ADR K25.
ESKİ MODEL (A): tek kaydırma = sayfa; önizleme yapışık, form kolonu istediği kadar uzardı.
Kullanıcı itirazı: "iki kutu hep aynı yükseklikte kalsın, kaydırma çubuğu onun içinde olsun;
altına tam genişlik kutu gelirse de format korunsun."
SEÇİLMEYEN (B): iki bölme iç kaydırma + ALTTA tam genişlik kutu. Makette denendi ve elendi —
alttaki kutuya inmek için imlecin altındaki bölmeyi sonuna kadar tüketmek gerekiyordu, yani
aynı tekerlek hareketi imlecin yerine göre iki farklı sonuç veriyordu; çubuk da ikiye çıkıyordu.
(2026-07-22'de bir kez denenip geri alınmasının sebebi de buydu.)
SEÇİLEN (C): ızgara pencerede kalan alanı doldurur, İKİ kolon da kendi içinde kaydırılır,
SAYFA HİÇ KAYDIRILMAZ. ⚠ Bunun bağlayıcı bedeli: ızgaranın ALTINA hiçbir şey konulamaz —
oraya ait içerik (İşlem Geçmişi, yükümlülük kartı) SAĞ kolonun içine girer.
Yükseklik neden `flex:1`, neden sabit sayı değil: ızgaranın üstünde bazen bant oluyor
(iptal uyarısı, kira çakışması). Sabit `calc(100vh - N)` olsaydı bant çıktığı anda ızgara
taşıp sayfayı da kaydırılabilir yapardı — C'nin tek kuralı orada bozulurdu. flex:1 kalanı
ölçer, bant olsa da olmasa da doğru.
`:has()` desteklenmezse main flex olmaz, ızgara doğal boyuna döner ve eski A davranışı
yaşar — sessiz bozulma değil, kabul edilebilir gerileme.
⚠ NEDEN AÇMA KOŞULU VAR (min-height:640): kabuk modeli ancak YER VARSA doğru. Kural
taban olarak yazıldığında ölçüldü — 520px'lik görüntü alanında `--onizleme-min` (460)
devreye giriyor, ızgara pencereye sığmıyor ve SAYFA da kaydırılabilir hâle geliyordu:
yani elenen B seçeneğinin ta kendisi (iç içe iki çubuk) sessizce geri geliyordu.
Eşik hesabı: ızgara 460 + şerit/başlık 93 + main payı 48 = 601 → yuvarlanmış 640, böylece
bölmeler en dar hâlde bile ~500px kalır. Altında model KAPANIR ve tek-kaydırma (A) yaşar.
Somut vaka: 1366x768 @%125 → ~490px görüntü alanı; o kullanıcı A görür, C değil.
⚠ TEK SINIF (kullanıcı kararı 2026-08-07: "tek sınıfta birleştir"). Kural `.is-izgara`
sınıfına bağlıdır; her yüzey markup'ında bu sınıfı TAŞIR ve kendi sınıfında (`.fm-izgara`,
`.icd-izgara`, …) YALNIZ `grid-template-columns` gibi kendine özgü ölçüyü tutar.
Neden: kural yedi ayrı sınıfa kopyalanmıştı ve dördü modül içi `stilKur()`'daydı; K24 eşik
taramasında `.bi-grid` bu yüzden ATLANDI, `.im-grid` de kimse kullanmadığı hâlde çürüdü.
Yeni iki-kolon iş yüzeyi açan `.is-izgara` yazar, başka hiçbir şey yapmaz.
PANE kolonu `.is-pane` ile işaretlenir; kaydırılan taraf "pane OLMAYAN" kolondur. ══ */
/* KOLON OLCUSU DE ORTAK (kullanici 2026-08-07): pane SABIT standart genislikte,
is kolonu kalani alir. Varsayilan pane SAGDA; solda olan yuzeyler `.pane-sol`
ile aynalar (fm-izgara/bi-grid — belge onizlemesi solda). Yuzeye ozgu oran YOK. */
.is-izgara{display:grid;gap:var(--bo-4);align-items:start;
grid-template-columns:minmax(0,1fr) var(--pane-genislik)}
.is-izgara.pane-sol{grid-template-columns:var(--pane-genislik) minmax(0,1fr)}
/* ⚠ AYNALI + TEK: `.is-izgara.tek` (0,2,0) YUKARIDA, `.pane-sol` (0,2,0) BURADA — sonraki kazanır
ve pane gizliyken form 430px'lik PANE kolonuna düşüyordu (ölçüldü 2026-09-26, kasa Harcama
Beyanı: form 430px + 598px boş kolon). Kasada o güne dek pane'siz tür olmadığı için görünmedi.
Üç sınıflı seçici (0,3,0) sıradan bağımsız kazanır. */
.is-izgara.pane-sol.tek{grid-template-columns:1fr}
/* PUANTAJ (2026-08-12 revizyonu — kullanici: "sag ve sol panel olculeri standarda uygun
degil, isleme masasini ornek al"). Onceki hal FR ORANIYDI (minmax(430,1fr) / 1.3fr) +
yuzeye ozel max-width:1560 kapagi; standart ise SEKIL olarak "pane SABIT, is kolonu
KALANI alir" der ve baska hicbir is yuzeyinde genislik kapagi YOKTUR (olculdu: tek
ornek pug'du). Isleme masasi (.fm-izgara/.bi-grid) tam da standardi kullaniyor.
Istisnanin GEREKCESI duruyor — pug'un pane'i A4 onizleme degil, 7 sutunlu takvim —
ama artik oran acarak degil, DAR PANE TOKEN'i ile karsilaniyor: sekil standart kalir,
yalnizca pane genisligi takvime uygun olani secer. Yeni yuzeyde pane onizleme degilse
`--pane-genislik-dar` kullan, kendi fr oranini ACMA. */
.is-izgara.pug-izgara{grid-template-columns:var(--pane-genislik-dar) minmax(0,1fr)}
/* Kabuk KAPALIYKEN (dar/kısa ekran) pane yapışkandır. ⚠ top POZİTİF OLAMAZ: itilme = top,
birebir — pozitif değer kolonu kaydırma başlamadan o kadar aşağı iter ve kardeş kolonla
hizasını bozar. Ölçüldü 2026-08-07; .icd-pane/.pug-sag/.tlp-pane'de 10px, .onzp/.split-sol'da
8px, .onz-kabuk'ta 16px kayma tam olarak buydu. */
.is-izgara > .is-pane{position:sticky;top:0;align-self:start}
@media (min-width:1001px) and (min-height:640px){
/* ⚠ İKİ KAT: rotaların bir kısmı `bolum.sarmala` ile kayıtlı (73 rota) ve o sarmalayıcı
`main#icerik`e `` basıp modülü ONUN İÇİNE çiziyor. İlk sürüm
yalnız `> .is-izgara` arıyordu; sarmasız kayıtlı yüzeylerde (belge-ekle, belge) çalışıp
sarmalı olanlarda (icra, puantaj-gun, personel) SESSİZCE KAPALI kalıyordu — kullanıcı
ölçtü: pencere 1142x1183 (iki eşiği de geçiyor) ama `main` display:block, ızgara
içerik boyunda (1858px) uzamıştı. Kural markup zincirine gizlice bağımlıydı.
Sarmalayıcı da flex kolon olmalı, yoksa `flex:1` ızgaraya ulaşmaz. */
main#icerik:has(> .is-izgara),
main#icerik:has(> .bolum-icerik > .is-izgara){display:flex;flex-direction:column}
main#icerik > .alt-ray{flex:none}
main#icerik > .bolum-icerik:has(> .is-izgara){display:flex;flex-direction:column;flex:1;min-height:0}
/* max-height = A4 tavani SATIRA (kullanici: "alt koseler hizali olsun") — iki kolon
birlikte kisalir, hiza her olcude durur. Gerekce: tokens.css --is-izgara-tavan. */
.is-izgara{flex:1;min-height:0;align-items:stretch;max-height:var(--is-izgara-tavan)}
.is-izgara > *{min-height:0}
/* İŞ kolonu (pane OLMAYAN taraf) kendi içinde kaydırılır. scrollbar-gutter: çubuk çıkıp
kaybolurken kolon genişliği oynamasın — hiza kullanıcının en çok takip ettiği şey. */
.is-izgara > *:not(.is-pane){overflow:auto;scrollbar-gutter:stable}
/* Pane boyu artık ızgaradan geliyor → yapışkanlığa gerek kalmaz, kolonu doldurur.
⚠ KOLONUN uzaması YETMEZ, İÇİNDEKİ KARTIN da dolması gerekir. İlk sürümde kural
`.is-pane > .onz-kabuk` idi ve YALNIZ kart doğrudan çocukken işliyordu: talep'te
öyleydi (çalıştı), icra-detay ve personel-detay'da arada bir sarmalayıcı vardı
(`[data-icd-pane]`) ve `height:100%` tanımsız yüksekliğe çarpıp `auto`ya düşüyordu —
kolon uzuyor, kart 245px kalıyordu (kullanıcı 2026-08-07: "önizleme yüksekliği
standartta değil"). Markup'ı düzeltmek yerine KURALI derinliğe dayanıklı yapıyoruz.
`:only-child` seçimi bilinçli: pane'de TEK blok varsa (önizleme kartı) kolonu doldurur;
BİRDEN FAZLA blok varsa (puantaj-gun'un özet + düğmeler + akordeon yığını) hiçbiri
zorla esnetilmez, doğal boyunda üstte durur. Böylece aynı kural iki durumu da taşır. */
/* ── K26: İŞ KOLONU = TEK YÜZEY (kullanıcı 2026-08-07: "bu format kazandı, her yerde
bunu kullanalım" — ADR G12). Kolon kendisi karttır; içindeki bölümler ayrı kart DEĞİL,
ince çizgiyle ayrılmış bölümlerdir. Üç şeyi birden çözer:
(1) Görünen alt kenar pane ile HER HÂLDE hizalı — dolduran şey kolonun kendisi
(kart yığınında içerik kısalınca son kart pane'den 318px yukarıda bitiyordu).
(2) Kart-içinde-kart katmanı biter. (3) Bölüm başlığı kaydırırken tepede kalır.
KAPSAM: tüm tip-3 iş yüzeyleri — icra-detay · personel-detay · talep · belge sayfası
(#bi-sag + cevap #bc-is) · fis-islem (#fm-panel). Belge Kabul (.be-form) zaten tek kart.
⚠ İKİ SEVİYE: bazı yüzeylerde kartlar bir sarmalayıcının içinde (#bi-islem — panelleri
çizen kod onun içini komple değiştiriyor, kaldırılamaz). Kural bir seviye sarmalayıcıyı
da görür; daha derin .kart (kart-içinde-kart) BİLEREK dokunulmaz.
⚠ margin:0 inline marjı YENEMEZ — belge-islem'deki inline margin-top'lar markup'tan
kaldırıldı; yeni bölüm eklerken karta inline marj YAZMA, ayrımı çizgi verir. */
.is-izgara > .is-yuzey{gap:0;background:var(--renk-yuzey);border:1px solid var(--renk-sinir);
border-radius:var(--yaricap);box-shadow:var(--golge-sm)}
.is-izgara > .is-yuzey > .kart,
.is-izgara > .is-yuzey > :not(.kart) > .kart{background:none;border:0;box-shadow:none;
border-radius:0;margin:0;border-bottom:1px solid var(--renk-cizgi)}
.is-izgara > .is-yuzey > .kart:last-child,
.is-izgara > .is-yuzey > :last-child:not(.kart) > .kart:last-child{border-bottom:0}
/* Bölüm başlığı yapışkan: uzun bölümde kaydırırken "hangi bölümdeyim" kaybolmasın.
Negatif marj başlığı bölümün padding'inin dışına taşırır ki tam genişlik bant olsun. */
/* Basliklar BELIRGIN (kullanici 2026-08-07): bolum ayrimi tek cizgiye kalmasin.
Soluk 11px yerine tam kontrast + zemin bandi; yapiskan oldugu icin kaydirirken de okunur. */
.is-izgara > .is-yuzey > .kart > h4,
.is-izgara > .is-yuzey > :not(.kart) > .kart > h4{position:sticky;top:0;z-index:1;
font-size:var(--fs-sm);font-weight:var(--fw-kalin);color:var(--renk-yazi);
background:var(--renk-zemin);
margin:calc(-1 * var(--bo-3)) calc(-1 * var(--bo-3)) var(--bo-3);
padding:var(--bo-2) var(--bo-3);border-bottom:1px solid var(--renk-sinir)}
/* K36: kolonun KENDİ başlığı varsa bölüm başlıkları onun ALTINA yapışır — yoksa
kaydırırken bölüm başlığı panel başlığının üstüne biner (ikisi de top:0 olurdu).
`:has()` ile KOŞULLU: başlıksız kolonda eski davranış (top:0) aynen yaşar. */
.is-izgara > .is-yuzey:has(> .pnl-bas) > .kart > h4,
.is-izgara > .is-yuzey:has(> .pnl-bas) > :not(.kart) > .kart > h4{top:var(--h-panel-bas)}
.is-izgara > .is-pane{position:static;align-self:stretch;display:flex;flex-direction:column}
/* Onizleme OLMAYAN pane (puantaj takvimi) kendi icinde kaydirilir. ⚠ KOSULLU olmali:
kural daha once `.pug-tk`de ve `.is-izgara.pug-izgara > .is-pane`de KOSULSUZ duruyordu;
kabuk kapaliyken (dar/kisa ekran) sayfa da kolon da kaydirilabilir hale gelip IC ICE
kaydirma uretiyordu. Kaydirma davranisi TEK YERDE: K25 blogu. */
.is-izgara.pug-izgara > .is-pane{overflow:auto}
.is-izgara > .is-pane > :only-child{flex:1;min-height:0}
.is-izgara > .is-pane .onz-kabuk,
.is-izgara > .is-pane .onzp{height:100%;min-height:0;position:static}
}
/* DAR EKRAN — TEK YER (K24 eşiği 1000). Her yüzey kendi modülünde ayrı ayrı yazıyordu;
K25 tek sınıfa indiği için istifleme kuralı da buraya toplandı. Yeni yüzey `.is-izgara`
yazdığı anda dar-ekran davranışını da HAZIR alır — listeye eklenmesi gerekmez. */
@media (max-width:1000px){
.is-izgara{grid-template-columns:minmax(0,1fr) !important}
.is-izgara > .is-pane{position:static}
/* Önizleme dar ekranda YALNIZ GELEN BELGEDE üste çıkar (`.girdi` — önce belgeyi gör, sonra
formu doldur: belge/fiş/ödeme işleme, belge ekle). Varsayılan ALTTA: formdan ÜRETİLEN
taslakta (kasa makbuzu, teklif, süreç, tazminat) önce form gelir — önizleme onunla dolar;
destek pane'i (kişi, sözleşme, makine) de altta kalır. 2026-10-01'e kadar kural koşulsuzdu:
üretim yüzeylerinde boş taslak üstte duruyor, form bir ekran boyu aşağı itiliyordu. */
/* ⚠ `order:1` ŞART, "kuralı kaldırmak" YETMEZ: sol-pane yüzeylerinde (`.pane-sol`) önizleme
DOM'da da ÖNCE gelir — sırasız bırakılınca yine üstte kalır (ölçüldü). */
.onizleme-kolon{order:1;height:auto}
.onizleme-kolon.girdi{order:-1}
.onizleme-kolon > .onz-kabuk{position:static;height:clamp(360px,62vh,760px)}
/* Önizlenecek dosya YOKSA (yükleme formu: dosya henüz seçilmedi) kolon gizli — boş kabuk üstte
bir ekran boyu yer tutup formu katlama altına itiyordu (2026-09-29, #personel-belge-ekle telefonda).
Yüzey işareti kendisi koyar: `data-bos` (seçim gelince kaldırır). !important ZORUNLU: önizleme
kabuğu kolona satır içi display:flex yazıyor (ölçüldü) — kuralsız hâlde sessizce eziliyordu. */
.onizleme-kolon[data-bos]{display:none !important}
}
/* .mkz AİLESİ SİLİNDİ (2026-08-11) — tarayıcıda çizilen makbuz şablonunun (ui/makbuz.js)
stilleriydi. Makbuz artık SUNUCU PDF'i: ekranda gösterilen de basılan da aynı dosya, o
yüzden ekrana ayrı bir makbuz çizen HTML/CSS'in varlık sebebi kalmadı. Silme protokolü
uygulandı: `mkz` arayan tarama yerelde ve SUNUCUDA yalnız ui/makbuz.js'in kendisini
ve onu import eden (bu dalda değiştirilen) kasa yüzeyini döndürdü. */
/* YAZDIRMA — 2026-08-11'de ONARILDI.
ESKİ HÂL: `@media print{ body > *{display:none!important} #mkz-yazdir{display:block} }`.
Kural kasa makbuzunun gizli yazdırma alanı için yazılmış ama KOŞULSUZ konmuştu; `#uygulama`
body'nin doğrudan çocuğu olduğu için (index.html) portalın TAMAMINI gizliyordu. Sonuç:
`window.print()` çağıran DÖRT sayfa — mizan · kârlılık · engelli kota · özlük eksiklik —
BOŞ SAYFA basıyordu. tokens.css'teki doğru print bloğu (renkler) bu kuralın arkasında
etkisiz kalıyordu. Makbuz artık sunucu PDF'i olduğu için gizli alanın kendisi de öldü
(ui/makbuz.js emekli) → kural tümden kalktı, yerine kâğıtta işe yaramayan KROM gizlenir. */
@media print{
header, #serit, #serit-asama, .drawer-katman, .hamburger{display:none!important}
main#icerik{padding:0!important;overflow:visible!important;height:auto!important}
}
/* Kapı kartı (ADR A12) — kartın KENDİSİ adımın kapısıdır; içinde "→ git" düğmesi olmaz
(kart adı "Kabul" iken düğme adı "Kabul Bilgileri" olunca aynı kelime iki kez söyleniyordu,
kullanıcı 2026-07-30). Tıklanabilirlik hover + odakla belli olur. */
/* Kapi = baslik satirinin TAMAMI (kullanici 2026-07-30: "karta tiklayinca ilgili sayfaya
gitmeyecek miydi, calismiyor" - hedef yazi kadar dardi). Serit durum rozetine kadar uzanir. */
a.bi-kapi { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
text-decoration: none; color: inherit; cursor: pointer;
margin: -5px -7px; padding: 5px 7px; border-radius: var(--yaricap-sm);
transition: background-color .12s; }
a.bi-kapi:hover { background: var(--renk-vurgu-zemin); }
a.bi-kapi:hover b { text-decoration: underline; text-underline-offset: 3px; }
a.bi-kapi:focus-visible { outline: 2px solid var(--renk-aksan); outline-offset: 1px; }
.bi-kapi-ok { color: var(--renk-soluk); font-size: 12px; transition: transform .12s; }
a.bi-kapi:hover .bi-kapi-ok { color: var(--renk-aksan); transform: translateX(2px); }
/* Aktif adim karti — kayisin "simdi buradasin" adimi. Ayri bir "Siradaki" bandi YOK (ADR A12:
ayni sey uc kez soylenmez); vurgu kartin kendisinde. */
.kart.bi-aktif { border-color: var(--renk-aksan); background: var(--renk-yuzey-2);
box-shadow: inset 3px 0 0 var(--renk-aksan), var(--golge-sm); }
/* Tek yuzey kolonda (K26) kartlar bolume iner: oradaki duzlestirme kurali (4 sinif) ustteki vurguyu
(2 sinif) sessizce eziyordu, siradaki adim hic ayrismiyordu. Bolum cizgisi kalir; serit + ton geri gelir. */
.is-izgara > .is-yuzey > .kart.bi-aktif,
.is-izgara > .is-yuzey > :not(.kart) > .kart.bi-aktif { background: var(--renk-yuzey-2);
box-shadow: inset 3px 0 0 var(--renk-aksan); }
/* "Simdi yapilacak" kutusu (K26 eki, maket 2026-10-12): siradaki adimin karti, basligin hemen altinda.
Fis panelinin kart dili (.mhf-blok); zemin bolumun tonundan ayrissin diye duz yuzey. Dugme tasimaz (K38). */
.mhf-blok.bi-simdi { margin: 0 0 10px; background: var(--renk-yuzey); }
.mhf-blok.bi-simdi:last-child { margin-bottom: 0; }
.bi-simdi-ad { font-size: var(--fs-md); font-weight: var(--fw-kalin); color: var(--renk-yazi); }
.bi-simdi-alt { font-size: 12.5px; color: var(--renk-yazi); margin-top: 2px; }
.bi-simdi-yol { font-size: 12px; color: var(--renk-orta); margin-top: 6px; }
/* Faz 4 — adimin UC durumu UC gorunum. Once yalniz aktif ayrisiyordu; bitmis ile gelecek
ayni goruluyordu, oysa biri "oldu, bakabilirsin" obüru "sirasi gelmedi". Veri zaten
vardi (`asamalar[].durum`), yalniz okunmuyordu. */
.kart.bi-bitmis .bi-kapi b,
.kart.bi-bitmis > div > b { color: var(--renk-orta); }
.kart.bi-gelecek { opacity: .55; box-shadow: none; background: transparent; }
/* ── ÖDEME TALİMATI (.ot-*) ────────────────────────────────────────────────────
Raporlar ▸ Ödeme Talimatı. Ay Sonu tablosundan AYRI bir yüzey: orada satır bir
muhasebe HESABI, burada bir TARAF. Renk şeması bilgi taşır, süs değildir:
banka = bilgi mavisi, şantiye nakdi = uyarı kehribarı, belirsiz/soru = nötr.
⚠ Sınıf adları odeme-talimati.js markup'ıyla EŞLEŞMEK ZORUNDA. */
.ot-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bo-2);
padding: var(--bo-2) var(--bo-3); margin-bottom: var(--bo-2); }
.ot-et { font-size: var(--fs-sm); }
.ot-ipucu { padding: var(--bo-4); }
.ot-kpi-serit { margin-bottom: var(--bo-2); }
.ot-kpi { padding: 10px 12px; }
.ot-kpi .deger { font-size: 19px; font-weight: var(--fw-bold); line-height: 1.1;
font-variant-numeric: tabular-nums; }
.ot-kpi .ad { font-size: var(--fs-xs2); color: var(--renk-orta); margin-top: 2px; }
.ot-kpi.b { border-left: 3px solid var(--renk-bilgi); }
.ot-kpi.b .deger { color: var(--renk-bilgi-yazi); }
.ot-kpi.s { border-left: 3px solid var(--renk-uyari); }
.ot-kpi.s .deger { color: var(--renk-uyari-yazi); }
.ot-kpi.q { border-left: 3px solid var(--renk-notr-sinir); }
/* KASA BLOĞU — iki kolon: soldaki banka, sağdaki şantiye. Kasa ayrımı raporun ASIL
kararıdır, o yüzden en üst kırılım o (firma değil). */
/* İKİ KUTU EŞİT BOY (kullanıcı 2026-08-18: "hep eşit boyda olsun, uzun olana uyulsun,
altta boşluk kalmış izlenimi olmasın"). `align-items:start` kısa kutuyu içeriği kadar
bırakıyordu ve yanındaki uzun kutunun altı boş görünüyordu; `stretch` satır yüksekliğini
ikisine de verir. Kutu içi kendi akışında kalır — iç kaydırma YOK. */
.ot-kasalar { margin-bottom: var(--bo-2); align-items: stretch; }
.ot-kasa { display: flex; flex-direction: column; }
.ot-kasa { border: 1px solid var(--renk-cizgi); border-radius: 9px; overflow: hidden;
background: var(--renk-yuzey); }
.ot-kasa > header { display: flex; justify-content: space-between; align-items: baseline;
gap: var(--bo-2); padding: 8px 12px; font-size: var(--fs-sm); font-weight: var(--fw-bold);
letter-spacing: .04em; text-transform: uppercase;
border-bottom: 1px solid var(--renk-cizgi); }
.ot-kasa > header .mono { font-size: var(--fs-md); letter-spacing: 0; }
.ot-kasa.b > header { background: var(--renk-bilgi-zemin); color: var(--renk-bilgi-yazi); }
.ot-kasa.s > header { background: var(--renk-uyari-zemin); color: var(--renk-uyari-yazi); }
.ot-kasa.q > header { background: var(--renk-notr-zemin); color: var(--renk-notr-yazi); }
/* TARAF = kart satırı. Ad solda kalın, tek rakam sağda; gerekçeler altında soluk. */
.ot-taraf { padding: 10px 12px; border-bottom: 1px solid var(--renk-cizgi); }
.ot-taraf:last-child { border-bottom: none; }
.ot-taraf .ust { display: flex; justify-content: space-between; align-items: baseline;
gap: var(--bo-3); }
.ot-taraf .ad { font-weight: var(--fw-bold); font-size: var(--fs-md); line-height: 1.3; }
.ot-taraf .tutar { font-weight: var(--fw-bold); font-size: var(--fs-md);
white-space: nowrap; font-variant-numeric: tabular-nums; }
.ot-sebep { margin: 5px 0 0; padding: 0; list-style: none;
display: flex; flex-direction: column; gap: 2px; }
.ot-sebep li { display: flex; justify-content: space-between; gap: var(--bo-3);
font-size: var(--fs-sm); color: var(--renk-orta); }
.ot-sebep li .mono { color: var(--renk-yazi); font-variant-numeric: tabular-nums; }
/* Düşülmeyen kalem: parantezli + üstü soluk — toplama girmediği GÖZLE anlaşılsın. */
.ot-sebep li.bilgi { font-style: italic; opacity: .78; }
.ot-sebep li.bilgi .mono { color: var(--renk-orta); }
.ot-blok { padding: 0; overflow: hidden; margin-bottom: var(--bo-2); }
.ot-kaydir { overflow-x: auto; }
.ot-bolum { padding: 9px 12px; font-weight: var(--fw-kalin); font-size: var(--fs-md);
border-bottom: 1px solid var(--renk-cizgi); }
.ot-soru-bas { border-bottom: none; padding-left: 0; }
.tablo td.ot-odenecek { font-weight: var(--fw-kalin); }
.tablo td.ot-not, .tablo td.ot-sebep-metin { font-size: var(--fs-xs2); }
.ot-soru { border: 1px solid var(--renk-cizgi); border-left: 3px solid var(--renk-uyari);
border-radius: 8px; padding: 12px 14px; background: var(--renk-yuzey);
display: flex; flex-direction: column; gap: 6px; }
.ot-soru .q { font-weight: var(--fw-kalin); font-size: var(--fs-md); }
.ot-soru .kanit { font-size: var(--fs-sm); color: var(--renk-orta); line-height: 1.5; }
.ot-soru .secenek { display: flex; flex-wrap: wrap; gap: 6px; }
.ot-soru .secenek span { border: 1px solid var(--renk-cizgi); border-radius: 999px;
padding: 2px 10px; font-size: var(--fs-xs2); background: var(--renk-yuzey-2);
color: var(--renk-orta); }
/* ── ÖDEME TALİMATI · ikinci tur (öbek · kompakt şantiye · tek tutar) ─────────
2026-08-18 kullanıcı turu: personel ödemeleri kendi başlığı altında ayrışsın · şantiye
seçici pasifleri düşürsün ve kompakt olsun · defter/düzeltme sütunları kalksın, rapor
temiz kalsın. Ölçüler sınıfa; inline style yok. */
.ot-obek { display: flex; justify-content: space-between; align-items: baseline;
gap: var(--bo-2); padding: 6px 12px; font-size: var(--fs-xs2); font-weight: var(--fw-kalin);
letter-spacing: .04em; text-transform: uppercase; color: var(--renk-orta);
background: var(--renk-yuzey-2); border-bottom: 1px solid var(--renk-cizgi);
border-top: 1px solid var(--renk-cizgi); }
.ot-obek .mono { letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* `.tb-obek` = eski bant dili (2026-09-09; yalnız finans-maas-odeme'nin "Girmeyenler" ayrımı kaldı).
`.ot-obek-tr` Personel Dökümü `.tb-grup`'a geçince (K47, 2026-10-21) seçiciden düştü; `.tb-obek` de
K47 göçünde `.tb-grup`'a geçer (scripts/tablo_grup_kontrol.py GOC_BEKLEYEN). */
.tablo tbody tr.tb-obek > td { background: var(--renk-yuzey-2); font-weight: var(--fw-kalin);
font-size: var(--fs-xs2); letter-spacing: .03em; text-transform: uppercase;
color: var(--renk-orta); }
.tablo tbody tr.tb-obek:hover > td { background: var(--renk-yuzey-2); }
/* Hareketsiz şantiye çipi: seçilebilir ama SOLUK — "bu ay burada iş yok" bilgisi. */
.ot-dipnot { padding: 8px 12px; border-top: 1px solid var(--renk-cizgi);
font-size: var(--fs-xs2); color: var(--renk-orta); line-height: 1.5; }
.ot-dipnot b { color: var(--renk-yazi); }
/* Uyarı METNİ (rozet değil) — kullanıcı pill etiket istemiyor. */
.ot-uyari-metin { font-size: var(--fs-xs2); font-weight: var(--fw-orta);
color: var(--renk-uyari-yazi); }
/* ── TALİMAT ALT TABLOLARI · maket A (2026-08-18) ────────────────────────────
Dört tablo ikiye indi. "Not" çöp kutusu dağıtıldı; DÜŞÜLMEYEN kendi sayısal sütununda —
İris vakası bunu zorunlu kıldı (brüt 2.959.373,33 ödenecek, 120'de 3.628.150,40 alacak;
birleşik metinde gözden kaçıyordu). Kasa artık satırda küçük bir im. */
.ot-kasa-im { display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-kalin);
letter-spacing: .03em; padding: 1px 7px; border-radius: 4px; white-space: nowrap;
background: var(--renk-notr-zemin); color: var(--renk-notr-yazi); }
.ot-kasa-im.b { background: var(--renk-bilgi-zemin); color: var(--renk-bilgi-yazi); }
.ot-kasa-im.s { background: var(--renk-uyari-zemin); color: var(--renk-uyari-yazi); }
/* Düşülmeyen: tutar + altında hesap kodu; toplama GİRMEDİĞİ için soluk ve italik. */
.tablo td.ot-dusulmeyen { text-align: right; font-style: italic; color: var(--renk-orta);
font-size: var(--fs-xs2); line-height: 1.4; }
.tablo td.ot-dusulmeyen .mono { display: block; font-variant-numeric: tabular-nums; }
.tablo td.ot-dusulmeyen .kod { font-size: var(--fs-xs); opacity: .8; }
/* ── ŞANTİYE SEÇİCİ · açılır çoklu seçim (2026-08-18) ────────────────────────
13 çip parametre barını dolduruyordu; kullanıcı "daha kompakt" dedi. Tek düğme + panel.
Listede YALNIZ seçili dönemde hareketi olan merkezler var (kütükteki `aktif` bayrağı
güvenilmez); seçili olan hareketsizse yine de durur, yoksa seçim sessizce kaybolur. */
.ot-secici { position: relative; display: inline-block; }
.ot-sec-dugme { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
border: 1px solid var(--renk-cizgi); background: var(--renk-yuzey); color: var(--renk-yazi);
border-radius: 6px; padding: 4px 10px; font-size: var(--fs-sm); font-weight: var(--fw-orta);
min-width: 190px; justify-content: space-between; }
.ot-sec-dugme:hover { border-color: var(--renk-aksan); }
.ot-sec-dugme.dolu { font-weight: var(--fw-kalin); }
.ot-sec-dugme .ok { color: var(--renk-orta); font-size: 10px; }
/* Süzgeç barında (ui/coklu-sec.js — Defterler ▸ Muavin) komşu alanlarla aynı boyda dursun. */
.filtre-bari .ot-sec-dugme { height: var(--suzgec-yuk); }
.ot-sec-panel { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
min-width: 280px; max-height: 340px; overflow-y: auto;
background: var(--renk-yuzey); border: 1px solid var(--renk-cizgi); border-radius: 8px;
box-shadow: 0 6px 20px rgba(0,0,0,.13); padding: 4px; }
.ot-sec-satir { display: flex; align-items: center; gap: 8px; padding: 5px 8px;
border-radius: 5px; cursor: pointer; font-size: var(--fs-sm); }
.ot-sec-satir:hover { background: var(--renk-vurgu-zemin); }
.ot-sec-satir > span:first-of-type { flex: 1; }
.ot-sec-satir .say { font-size: var(--fs-xs); color: var(--renk-orta);
font-variant-numeric: tabular-nums; }
.ot-sec-alt { display: flex; justify-content: space-between; align-items: center; gap: 8px;
border-top: 1px solid var(--renk-cizgi); margin-top: 4px; padding: 6px 8px;
font-size: var(--fs-xs2);
/* Uzun listede dip satırı (Temizle · Getir) kaydırmayla kaybolmasın: panelin dibine yapışır. */
position: sticky; bottom: -4px; background: var(--renk-yuzey); }
.ot-sec-mini { border: 1px solid var(--renk-cizgi); background: var(--renk-yuzey-2);
border-radius: 5px; padding: 2px 9px; font-size: var(--fs-xs2); cursor: pointer;
color: var(--renk-yazi); }
/* Ödeme Talimatı sekmeleri — Excel sayfalarıyla birebir (2026-08-18). Ekranla dosya aynı
yapıyı gösterir; ana sekmede yalnız talimat durur, kalabalık tablolar kendi sekmesinde. */
.ot-sekme { margin-bottom: 0; }
/* Uzun ekstre kendi içinde kayar — sayfa boyunu 285 satırlık bir hesap belirlememeli. */
.ot-ekstre { max-height: 460px; overflow-y: auto; }
/* Hesap Dökümleri: özet satırı tıklanır (ekstre altında açılır) — 863 satırı birden basmak
yerine seçilerek. Açık satır turuncu sol rayla işaretlenir. */
.tablo tbody tr.ot-hs { cursor: pointer; }
.tablo tbody tr.ot-hs.acik > td { background: var(--renk-vurgu-zemin); font-weight: var(--fw-kalin); }
.tablo tbody tr.ot-hs.acik > td:first-child { box-shadow: inset 3px 0 0 var(--renk-aksan); }
/* Taraf başına ayrı tablo → kartlar arası kolon hizası için sabit ızgara. */
.tablo.ot-hs-tablo { table-layout: fixed; min-width: 640px; }
.ot-hs-tablo col.k-kod { width: 200px; }
.ot-hs-tablo col.k-say { width: 110px; }
.ot-hs-tablo col.k-tut { width: 190px; }
.ot-hs-tablo col.k-ac { width: 120px; }
.ot-hs-tablo td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dönem fişi KARTI — iç içe tablo yerine (kullanıcı 2026-08-18). Taraf kartın künyesinde,
yani hangi firmaya ait olduğu için yukarı bakmak gerekmiyor. Sol ray YÖNÜ söyler:
alacak = firmanın alacağını artıran (hakediş), borç = azaltan (ödeme/yansıtma). */
.ot-fisler { align-items: stretch; }
.ot-fis { border: 1px solid var(--renk-cizgi); border-radius: 9px; padding: 11px 13px;
background: var(--renk-yuzey); display: flex; flex-direction: column; gap: 5px; }
.ot-fis.a { border-left: 3px solid var(--renk-pos, #2E7D46); }
.ot-fis.b { border-left: 3px solid var(--renk-bilgi); }
.ot-fis .ust { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ot-fis .taraf { font-weight: var(--fw-bold); font-size: var(--fs-md); line-height: 1.3; }
.ot-fis .cins { font-size: var(--fs-xs2); color: var(--renk-orta); white-space: nowrap; }
.ot-fis .kunye { font-size: var(--fs-xs); color: var(--renk-orta); }
.ot-fis .ack { font-size: var(--fs-sm); color: var(--renk-orta); line-height: 1.45; }
.ot-fis .tut { display: flex; gap: var(--bo-4); margin-top: 2px; padding-top: 6px;
border-top: 1px solid var(--renk-cizgi); flex-wrap: wrap; }
.ot-fis .tut span { display: flex; flex-direction: column; gap: 1px; }
.ot-fis .tut i { font-style: normal; font-size: var(--fs-xs); color: var(--renk-orta); }
.ot-fis .tut b { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
/* Hakediş detayı — fiş kartının içinde. Fiş ÖZET (ADR K10), kalem detayı `hakedis_kalem`de;
kart ikisini yan yana getirir. Zincir satırı "önceki + bu = kümülatif" eşitliğini gösterir:
hakedişin doğruluğu brüt tutardan değil zincirin kapanmasından okunur. */
.ot-hak { border-top: 1px dashed var(--renk-cizgi); margin-top: 4px; padding-top: 6px; }
.ot-hak .bas { font-size: var(--fs-xs2); font-weight: var(--fw-kalin); color: var(--renk-orta);
margin-bottom: 4px; }
.tablo.ot-hak-kalem { font-size: var(--fs-xs2); }
.tablo.ot-hak-kalem th { padding: 3px 6px; font-size: var(--fs-xs); background: transparent;
border-bottom: 1px solid var(--renk-cizgi); }
.tablo.ot-hak-kalem td { padding: 3px 6px; border-bottom: none; }
.tablo.ot-hak-kalem tbody tr:nth-child(even) > td { background: transparent; }
.tablo.ot-hak-kalem tbody tr:hover > td { background: var(--renk-vurgu-zemin); }
.ot-hak .zincir { font-size: var(--fs-xs); color: var(--renk-orta); margin-top: 5px;
padding-top: 4px; border-top: 1px solid var(--renk-cizgi); }
/* Dönem fişi kartı — kart BİR TARAF, hareketler içinde. İlk denemede her fiş satırı ayrı
kart olmuştu ve aynı firma birden çok kez çıkıyordu (kullanıcı 2026-08-18). */
.ot-fis .ozet { font-size: var(--fs-xs2); color: var(--renk-orta); }
.ot-fis .ozet b { color: var(--renk-yazi); }
.ot-fis .hrl { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ot-fis .hr { border-left: 3px solid var(--renk-cizgi); padding: 5px 0 5px 9px; }
.ot-fis .hr.a { border-left-color: var(--renk-pos, #2E7D46); }
.ot-fis .hr.b { border-left-color: var(--renk-bilgi); }
.ot-fis .hr .s1 { display: flex; justify-content: space-between; align-items: baseline;
gap: 10px; }
.ot-fis .hr .s1 .cins { font-weight: var(--fw-kalin); font-size: var(--fs-sm);
color: var(--renk-yazi); }
.ot-fis .hr .s1 .tut { font-weight: var(--fw-kalin); font-size: var(--fs-md);
font-variant-numeric: tabular-nums; white-space: nowrap; }
.ot-fis .hr .s2 { font-size: var(--fs-xs); color: var(--renk-orta); }
.ot-fis .hr .s3 { font-size: var(--fs-xs2); color: var(--renk-orta); line-height: 1.45; }
/* Ödeme talimatı — taraf pozisyon şeridi (hesap dökümü).
Uydurulmuş jeton YASAK: --yzy-2/--metin-2 ilk yazımda kullanılmıştı, kütükte YOKLAR ve
CSS bilinmeyen değişkende SESSİZ kalır (renk hiç uygulanmaz, hata da vermez) —
[[feedback_kural_markup_zincirine_bagimli]]. Jetonlar tokens.css'ten alındı. */
.ot-poz { display: flex; flex-wrap: wrap; gap: var(--bo-1) var(--bo-5);
padding: var(--bo-2) var(--bo-3); background: var(--renk-vurgu-zemin);
border-bottom: 1px solid var(--renk-cizgi); font-size: var(--fs-sm); }
.ot-poz span { color: var(--renk-soluk); }
.ot-poz b { color: var(--renk-yazi); margin-left: var(--bo-1); }
.ot-poz-net { margin-left: auto; }
.ot-alt-bolum { padding: var(--bo-3) var(--bo-3) var(--bo-2);
font-weight: var(--fw-kalin); font-size: var(--fs-md); color: var(--renk-yazi); }
.ot-ekstre-kap { border-top: 1px solid var(--renk-cizgi); }
/* ── Bilgilendirme yazma penceresi (ui/bildirim-yaz.js · yol #653 Faz 1) ─────────────────
TEK e-posta yazma yüzeyi: solda form, sağda alıcının göreceği posta (sunucu HTML'i, iframe).
Modal kabuğu modalAc'tan (Esc · inert · odak dönüşü); gövde 92vh'ye sığar, alt çubuk sabit.
Jetonlar tokens.css'ten — uydurma jeton CSS'te SESSİZ kalır. Etiket yarıçapı K13. */
.by-kok { display: flex; flex-direction: column; gap: var(--bo-3); max-height: calc(92vh - 110px); min-height: 0; }
/* Pencerede [hidden] HER ZAMAN gizler: `.btn` ve `.by-uyari` display'i UA'nin [hidden]{display:none} kuralini eziyordu —
"+ Bilgi (CC)" satir acildiktan sonra da, "+ Gizli" gizli kopyasi olmayan postada da gorunuyordu (2026-10-12). */
.by-kok [hidden] { display: none; }
.by-kaynak { font-size: var(--fs-sm); color: var(--renk-soluk); margin-top: calc(-1 * var(--bo-3)); }
.by-kok > .by-sekme { display: none; align-self: flex-start; } /* dar ekranda görünür (aşağıda) */
.by-govde { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: var(--bo-4); }
.by-sol { min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--bo-3); padding-right: 4px; }
.by-sag { min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--bo-2);
background: var(--renk-zebra); border-radius: var(--yaricap); padding: var(--bo-3); }
.by-etiket { display: flex; align-items: center; gap: var(--bo-2); font-size: var(--fs-xs2);
font-weight: var(--fw-kalin); color: var(--renk-orta); margin-bottom: 4px; }
.by-etiket .by-sag-uc { margin-left: auto; font-weight: var(--fw-orta); }
.by-not { font-size: var(--fs-xs2); color: var(--renk-soluk); margin-top: 4px; }
.by-segment { display: inline-flex; border: 1px solid var(--renk-sinir); border-radius: var(--yaricap); overflow: hidden; }
.by-segment button { font: inherit; font-size: var(--fs-sm); border: 0; background: var(--renk-yuzey);
color: var(--renk-yazi); padding: 5px 14px; cursor: pointer; }
.by-segment button + button { border-left: 1px solid var(--renk-sinir); }
.by-segment button[aria-pressed="true"] { background: var(--renk-ana); color: var(--renk-ana-ustu); font-weight: var(--fw-kalin); }
/* Alıcı kutusu: etiketler + arama girdisi + öneri listesi (mutlak — sarmalayıcı relative). */
.by-alici { position: relative; }
.by-tok-kutu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 34px; padding: 4px 6px;
border: 1px solid var(--renk-sinir); border-radius: var(--yaricap); background: var(--renk-yuzey); cursor: text; }
.by-tok-kutu:focus-within { border-color: var(--renk-odak); }
.by-tok { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 2px 0 3px; max-width: 100%;
border-radius: var(--yaricap-etiket); background: var(--renk-vurgu-zemin); border: 1px solid var(--renk-sinir);
font-size: var(--fs-sm); white-space: nowrap; }
.by-tok.dis { background: var(--renk-yuzey); border-style: dashed; }
.by-tok.kilit { padding-right: 7px; } /* çıkar düğmesi yok (süreç başlatma: onaycı, başlatan, sabit kopya) */
.by-tok .by-bh { width: 18px; height: 18px; border-radius: 3px; background: var(--renk-ana); color: var(--renk-ana-ustu);
font-size: 9.5px; font-weight: var(--fw-kalin); line-height: 18px; text-align: center; flex: none; }
.by-tok.dis .by-bh { background: var(--renk-soluk); }
.by-tok .by-ad { overflow: hidden; text-overflow: ellipsis; }
.by-tok .by-rol { color: var(--renk-soluk); font-size: var(--fs-xs2); }
.by-tok button { border: 0; background: transparent; color: var(--renk-soluk); cursor: pointer; padding: 0 4px; font-size: 11px; }
.by-tok button:hover { color: var(--renk-neg); }
.by-tok-kutu input { flex: 1; min-width: 140px; border: 0; outline: 0; background: transparent; font: inherit;
font-size: var(--fs-md); color: var(--renk-yazi); padding: 3px 2px; }
.by-oneri { position: absolute; left: 0; right: 0; top: 100%; margin-top: 3px; z-index: 5; max-height: 280px; overflow: auto;
background: var(--renk-yuzey); border: 1px solid var(--renk-sinir); border-radius: var(--yaricap); box-shadow: var(--golge); }
.by-oneri .by-grp { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--renk-soluk);
font-weight: var(--fw-kalin); padding: 7px 10px 3px; }
.by-oneri .by-sec { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center;
padding: 5px 10px; font-size: var(--fs-md); cursor: pointer; }
.by-oneri .by-sec.aktif { background: var(--renk-aksan-zemin); }
.by-oneri .by-sec .by-bh { width: 22px; height: 22px; border-radius: 4px; background: var(--renk-ana); color: var(--renk-ana-ustu);
font-size: 10px; font-weight: var(--fw-kalin); line-height: 22px; text-align: center; }
.by-oneri .by-sec.grup .by-bh { background: var(--renk-aksan); }
.by-oneri .by-sec .by-alt { font-size: var(--fs-xs2); color: var(--renk-soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.by-oneri .by-sec .by-ust { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.by-oneri .by-bos { padding: 8px 10px; font-size: var(--fs-sm); color: var(--renk-soluk); }
.by-hizli { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.by-hizli button { font: inherit; font-size: var(--fs-xs2); border: 1px dashed var(--renk-sinir); background: transparent;
color: var(--renk-aksan-yazi); border-radius: var(--yaricap-etiket); padding: 1px 8px; cursor: pointer; }
.by-konu-say { font-family: var(--font-mono); font-size: var(--fs-xs2); color: var(--renk-soluk); font-weight: var(--fw-orta); }
.by-konu-say.uzun { color: var(--renk-uyari-yazi); }
.by-duzenleyici { border: 1px solid var(--renk-sinir); border-radius: var(--yaricap); overflow: hidden; background: var(--renk-yuzey); }
.by-duzenleyici:focus-within { border-color: var(--renk-odak); }
.by-arac { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-bottom: 1px solid var(--renk-cizgi); background: var(--renk-zebra); }
.by-arac button { font: inherit; font-size: var(--fs-sm); border: 1px solid transparent; background: transparent;
color: var(--renk-yazi); padding: 1px 9px; border-radius: 4px; cursor: pointer; }
.by-arac button:hover { border-color: var(--renk-sinir); background: var(--renk-yuzey); }
.by-arac .by-kisa { margin-left: auto; align-self: center; font-size: var(--fs-xs2); color: var(--renk-soluk); padding-right: 4px; }
.by-duzenleyici textarea { display: block; width: 100%; border: 0; outline: 0; resize: vertical; background: transparent;
color: var(--renk-yazi); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; padding: 8px 10px;
min-height: 220px; white-space: pre-wrap; }
.by-duzenleyici.kisa textarea { min-height: 56px; font-family: var(--font-ana); font-size: var(--fs-md); }
.by-ekler { display: flex; flex-direction: column; gap: 5px; }
.by-ek { display: grid; grid-template-columns: auto 38px minmax(0, 1fr) auto; gap: 8px; align-items: center;
border: 1px solid var(--renk-sinir); border-radius: var(--yaricap); padding: 5px 8px; background: var(--renk-yuzey); font-size: var(--fs-md); }
.by-ek.eksik { border-style: dashed; color: var(--renk-uyari-yazi); grid-template-columns: minmax(0, 1fr); }
.by-ek .by-tur { font-family: var(--font-mono); font-size: 9.5px; font-weight: var(--fw-kalin); text-align: center;
border-radius: 3px; padding: 4px 0; background: var(--renk-vurgu-zemin); color: var(--renk-orta); }
.by-ek .by-ek-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-orta); }
.by-ek .by-ek-alt { font-size: var(--fs-xs2); color: var(--renk-soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.by-ek button { border: 0; background: transparent; color: var(--renk-soluk); cursor: pointer; font-size: 11px; }
.by-ek-ekle { display: flex; align-items: center; gap: var(--bo-2); flex-wrap: wrap; }
/* Önizleme: alıcının posta istemcisi — posta HTML'i açık zeminde okunur, iframe beyaz kalır. */
.by-pv-bas { display: flex; align-items: center; justify-content: space-between; gap: var(--bo-2); font-size: var(--fs-sm); color: var(--renk-soluk); }
.by-pv-sekme { display: inline-flex; gap: 2px; background: var(--renk-vurgu-zemin); border-radius: var(--yaricap); padding: 2px; }
.by-pv-sekme button { font: inherit; font-size: var(--fs-xs2); border: 0; background: transparent; color: var(--renk-soluk);
padding: 2px 9px; border-radius: 4px; cursor: pointer; }
.by-pv-sekme button[aria-pressed="true"] { background: var(--renk-yuzey); color: var(--renk-yazi); }
.by-zarf { background: var(--renk-yuzey); border: 1px solid var(--renk-sinir); border-radius: var(--yaricap) var(--yaricap) 0 0;
padding: 8px 12px; display: grid; gap: 2px; font-size: var(--fs-sm); color: var(--renk-soluk); }
.by-zarf b { color: var(--renk-yazi); font-weight: var(--fw-kalin); }
.by-zarf .by-zarf-konu { font-size: var(--fs-md); color: var(--renk-yazi); font-weight: var(--fw-kalin); margin-top: 3px; overflow-wrap: anywhere; }
.by-zarf .by-zarf-kime { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.by-pv-cerceve { flex: 1; min-height: 260px; width: 100%; border: 1px solid var(--renk-sinir); border-top: 0;
border-radius: 0 0 var(--yaricap) var(--yaricap); background: #fff; }
.by-pv-duz { flex: 1; min-height: 260px; margin: 0; border: 1px solid var(--renk-sinir); border-top: 0; background: var(--renk-yuzey);
border-radius: 0 0 var(--yaricap) var(--yaricap); padding: 10px 12px; font-family: var(--font-mono); font-size: 12px;
white-space: pre-wrap; overflow: auto; color: var(--renk-yazi); }
.by-pv-ekler { display: flex; flex-wrap: wrap; gap: 4px; }
.by-pv-ekler span { font-size: var(--fs-xs2); border: 1px solid var(--renk-sinir); border-radius: var(--yaricap-etiket);
padding: 1px 7px; background: var(--renk-yuzey); }
.by-alt { display: flex; align-items: center; gap: var(--bo-3); flex-wrap: wrap; border-top: 1px solid var(--renk-cizgi); padding-top: var(--bo-3); }
.by-alt .by-ozet { display: flex; flex-wrap: wrap; gap: 4px var(--bo-3); font-size: var(--fs-sm); color: var(--renk-soluk); min-width: 0; }
.by-alt .by-ozet b { color: var(--renk-yazi); font-weight: var(--fw-kalin); }
.by-alt .by-hata { flex-basis: 100%; font-size: var(--fs-sm); color: var(--renk-neg); order: 3; }
.by-alt .by-hata:empty { display: none; }
.by-alt .by-dugme { margin-left: auto; display: flex; gap: var(--bo-2); }
@media (max-width: 980px) {
.by-kok > .by-sekme { display: inline-flex; }
.by-govde { grid-template-columns: minmax(0, 1fr); }
.by-govde[data-sekme="yaz"] .by-sag, .by-govde[data-sekme="onizle"] .by-sol { display: none; }
}
/* Faz 2: yapılandırılmış künye + "daha önce bildirildi" bandı (yol #653) */
.by-gecmis { font-size: var(--fs-sm); background: var(--renk-bilgi-zemin); color: var(--renk-bilgi-yazi);
border: 1px solid var(--renk-bilgi-sinir); border-radius: var(--yaricap); padding: 6px 10px; }
.by-kunye { border: 1px solid var(--renk-sinir); border-radius: var(--yaricap); overflow: hidden; background: var(--renk-yuzey); }
.by-kunye-sat { display: grid; grid-template-columns: 18px minmax(90px, 32%) minmax(0, 1fr) auto; gap: 8px;
align-items: center; padding: 4px 10px; font-size: var(--fs-sm); border-top: 1px solid var(--renk-cizgi); cursor: pointer; }
.by-kunye-sat:first-child { border-top: 0; }
.by-kunye-sat input { margin: 0; }
.by-kunye-et { color: var(--renk-soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.by-kunye-dg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.by-kunye-sat.kapali .by-kunye-et, .by-kunye-sat.kapali .by-kunye-dg { text-decoration: line-through; opacity: .55; }
/* Amaç (ADR I4-f): künye grubu başlığı · sunucu uyarıları · kapalı "Ne için?" seçeneği */
.by-kunye-grp { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--renk-soluk);
font-weight: var(--fw-kalin); padding: 6px 10px 3px; background: var(--renk-zebra); border-top: 1px solid var(--renk-cizgi); }
.by-kunye-grp:first-child { border-top: 0; }
.by-uyari { font-size: var(--fs-sm); background: var(--renk-uyari-zemin); color: var(--renk-uyari-yazi);
border: 1px solid var(--renk-uyari-sinir); border-radius: var(--yaricap); padding: 6px 10px; display: grid; gap: 3px; }
.by-segment button:disabled { color: var(--renk-soluk); cursor: not-allowed; text-decoration: line-through; }
/* Belge sayfası "Bildirimler" listesi (belge-islem) */
.bn-liste { display: flex; flex-direction: column; }
.bn-sat { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0;
border-top: 1px solid var(--renk-cizgi); font-size: var(--fs-sm); cursor: pointer; background: none; border-left: 0;
border-right: 0; border-bottom: 0; text-align: left; color: var(--renk-yazi); font-family: inherit; width: 100%; }
.bn-sat:first-child { border-top: 0; }
.bn-sat:hover .bn-kime { text-decoration: underline; }
.bn-zaman { font-family: var(--font-mono); font-size: var(--fs-xs2); color: var(--renk-soluk); }
.bn-kime { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Tazminat Dosyası (#personel-tazminat, F6 yüzey v2, 2026-09-30) — maket görsel dili ──
Sağ kolon tonlu zemin, her bölüm beyaz kart; tablo başlıkları küçük büyük-harf; kart biçimli
seçenek; izin anahtarı; dosya durumu kartları. Sınıf öneki tz-, yalnız bu sayfa (modules/personel-tazminat.js). */
.tz-yuzey{background:var(--renk-zemin-2);border-radius:var(--yaricap);padding:var(--bo-3)}
.kart.tz-kart{background:var(--renk-beyaz);border:1px solid var(--renk-sinir);border-radius:6px;padding:14px;box-shadow:none}
.tz-kart>h4{margin:0 0 10px;font-size:13.5px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.tz-tkap{border:1px solid var(--renk-sinir);border-radius:6px;overflow:hidden;background:var(--renk-beyaz)}
.tz-tkap .tablo th{font-size:10.5px;font-weight:var(--fw-kalin);letter-spacing:.05em;text-transform:uppercase;color:var(--renk-soluk);background:var(--renk-yuzey-2);padding:8px 10px}
.tz-tkap .tablo td{padding:8px 10px;border-bottom-color:var(--renk-cizgi);vertical-align:middle}
.tz-tkap .tablo tbody tr:last-child>td{border-bottom:0}
.tz-tkap .tablo tr.tz-toplam>td{font-weight:var(--fw-kalin);background:var(--renk-notr-zemin)}
.tz-secenek{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--renk-sinir);border-radius:6px;background:var(--renk-beyaz);cursor:pointer}
.tz-secenek.sec{border-color:var(--renk-aksan);background:var(--renk-aksan-zemin)}
.tz-secenek.kapali{opacity:.6;cursor:default}
.tz-secenek input[type=radio]{accent-color:var(--renk-aksan);width:15px;height:15px;margin:0}
.tz-secenek .ad{font-size:13px;font-weight:var(--fw-kalin)}
.tz-secenek .alt{font-size:11.5px;color:var(--renk-soluk)}
.tz-secenek .tut{font-family:var(--font-mono);font-size:13px;font-weight:var(--fw-kalin);text-align:right}
.tz-sure{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12.5px;padding:9px 12px;background:var(--renk-yuzey-2);border:1px solid var(--renk-cizgi);border-radius:6px}
.tz-sure b{font-family:var(--font-mono);font-weight:var(--fw-kalin)}
.tz-anah{appearance:none;-webkit-appearance:none;width:34px;height:19px;border-radius:10px;background:var(--renk-sinir);position:relative;cursor:pointer;vertical-align:middle;margin:0}
.tz-anah::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--renk-beyaz);transition:left .15s}
.tz-anah:checked{background:var(--renk-pos)}
.tz-anah:checked::after{left:17px}
.tz-gerekce{margin-top:8px;padding:9px 12px;border:1px dashed var(--renk-uyari);border-radius:6px;background:var(--renk-uyari-zemin);font-size:12px;display:flex;flex-direction:column;gap:6px}
.tz-asama{display:flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid var(--renk-sinir);border-radius:6px;background:var(--renk-beyaz);font-size:12.5px;flex:1 1 0;min-width:150px}
.tz-asama.bekle{border-color:var(--renk-aksan)}
.tz-asama.kapali{opacity:.6}
.tz-asama .isr{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:11.5px;font-weight:var(--fw-kalin);flex:none;background:var(--renk-notr-zemin);color:var(--renk-notr-yazi)}
.tz-asama.bitti .isr{background:var(--renk-pos-zemin);color:var(--renk-pos)}
.tz-asama.bekle .isr{background:var(--renk-aksan-zemin);color:var(--renk-aksan-yazi)}
.tz-asama small{display:block;color:var(--renk-soluk);font-size:11px;font-weight:400}
.tz-hak{font-family:var(--font-mono);font-weight:var(--fw-kalin);color:var(--renk-soluk)}
.tz-hak.var{color:var(--renk-pos)}
.tz-madde{font-size:10.5px;color:var(--renk-soluk);font-weight:400}
.tz-not{font-size:12px;padding:8px 12px;border-radius:6px;background:var(--renk-bilgi-zemin);border-left:3px solid var(--renk-bilgi)}
.tz-not.uy{background:var(--renk-uyari-zemin);border-left-color:var(--renk-uyari)}
/* BİLGİ BARI (.bb — ilk tüketici Yıllık İzin "izin süreleri", 2026-10-01; maket seçenek A).
Kapalıyken TEK SATIR (34px = --h-panel-bas): ad + değer çipleri + sağda ayrıntı düğmesi; ayrıntı
barın ALTINDA yerinde açılır (liste kayar, çekmece açılmaz). Referans bilgisi içindir — uyarı değil
(uyarı = ui/uyari.js). Ayrıntıdaki .bb-fark kutusu "portal burada kanundan ayrılıyor" demektir. */
.bb{background:var(--renk-bilgi-zemin);border:1px solid var(--renk-bilgi-sinir);border-radius:var(--yaricap-sm);
color:var(--renk-bilgi-yazi);font-size:12px;margin-bottom:var(--bo-3)}
.bb-satir{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:4px 10px 4px 12px;min-height:var(--h-panel-bas)}
.bb-ad{font-weight:var(--fw-kalin);white-space:nowrap}
.bb-kademe{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-width:0}
.bb-kd{background:var(--renk-yuzey);border:1px solid var(--renk-bilgi-sinir);border-radius:4px;padding:1px 8px;
color:var(--renk-yazi);white-space:nowrap}
.bb-kd b{font-family:var(--font-mono);font-weight:var(--fw-kalin)}
.bb-ayrac{width:1px;height:16px;background:var(--renk-bilgi-sinir);flex:none}
.bb-dg{margin-left:auto;font:inherit;font-weight:var(--fw-orta);color:var(--renk-bilgi-yazi);background:transparent;
border:1px solid var(--renk-bilgi-sinir);border-radius:4px;padding:3px 10px;cursor:pointer;white-space:nowrap}
.bb-dg:hover{background:var(--renk-yuzey)}
.bb-ayrinti{border-top:1px solid var(--renk-bilgi-sinir);background:var(--renk-yuzey);color:var(--renk-yazi);
border-radius:0 0 var(--yaricap-sm) var(--yaricap-sm);padding:12px;display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px 22px}
/* Sabit 3 kolon 800px'te tabloyu yan bloğa TAŞIRIYORDU (ölçüldü: 195px kolon, dayanak nowrap) → kolon
sayısı içerik genişliğinden: 300px altına inmez, sığmayan blok alta sarar. */
/* display:grid `hidden` niteliğini EZER (ölçüldü: kapalıyken bar 228px kalıyordu) → açık kural şart. */
.bb-ayrinti[hidden]{display:none}
.bb-blok{min-width:0;display:flex;flex-direction:column;gap:6px}
.bb-blok-ad{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:var(--fw-kalin);color:var(--renk-orta)}
.bb-kt{border-collapse:collapse;width:100%}
.bb-kt td{padding:4px 0;border-bottom:1px solid var(--renk-cizgi);vertical-align:baseline}
.bb-kt td:nth-child(2){text-align:right;font-family:var(--font-mono);font-weight:var(--fw-kalin);white-space:nowrap;padding-inline:10px}
.bb-kt td:nth-child(3){text-align:right}
.bb-dyk{font-family:var(--font-mono);font-size:10.5px;color:var(--renk-soluk);white-space:nowrap}
.bb-oz{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px}
.bb-oz dt{font-weight:var(--fw-kalin);white-space:nowrap}
.bb-oz dd{margin:0}
.bb-fark{min-width:0;background:var(--renk-uyari-zemin);border:1px solid var(--renk-uyari-sinir);color:var(--renk-uyari-yazi);
border-radius:5px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;align-self:start}
.bb-fark .bb-blok-ad,.bb-fark a{color:var(--renk-uyari-yazi)}
@media (max-width:760px){
.bb-dg{margin-left:0}
.bb-oz{grid-template-columns:minmax(0,1fr)}
.bb-oz dt{margin-top:4px}
}
/* ALT SEKME SATIRI (ADR G20) — 'satir' kipli grubun sayfaları, içeriğin başında (core/bolum.js altSatir).
Görsel dil sayfa-içi sekme çubuğuyla aynı (.sekme-bar + .sekme); bağ olduğu için alt çizgi kapatılır.
Sığmayan sekme İKİNCİ SATIRA iner, gizlenmez (Dönem Sonu Düzeni, 2026-11-04: eski kaydırmalı satır 1536 px
ekranda son sekmeleri gizliyordu, kaydırma çubuğu da gizli olduğu için var oldukları görünmüyordu). */
.alt-ray, .sekme-bar.alt-ray { flex-wrap: wrap; overflow: visible; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
.alt-ray .sekme { text-decoration: none; flex: none; }
/* ── ÖDEME LİSTESİ (Finans ▸ Ödemeler; modules/odeme-listesi.js — ADR G19 ek karar 2026-10-09) ──────────────
Yüzey K24/K25 iki kolonlu iş yüzeyidir (.is-izgara + .is-pane): kolon ölçüsü, kırılım eşiği ve yükseklik
KABUKTAN gelir, burada yazılmaz. Buradakiler yalnız liste satırının iç düzeni; ölçüler jetonlardan
(--bo-* · --fs-*). Satır tablo değil esnek satırdır: süzgecin sabitlediği kolon çizilmeyince (K44-③) kalanlar
aynı oranla yayılır, telefon genişliğinde (640 piksel altı) aynı satır karta döner — yana kaydırma yok. */
.ol-esn { flex: 1 1 0; min-width: 0; }
.ol-ozet { display: inline-flex; align-items: baseline; gap: var(--bo-2); flex-wrap: wrap; }
.ol-ozet b { font-size: var(--fs-md); }
.ol-ayrac { align-self: stretch; width: 1px; background: var(--renk-sinir); margin: 0 var(--bo-1); }
/* Panel kartın payını korur (başlık bandı o paya göre taşar — K36); satırlar aynı payla kenardan kenara uzanır. */
.is-izgara > .is-yuzey.kart.ol-panel > .pnl-bas { margin-bottom: 0; }
.ol-panel > .ol-s, .ol-panel > .ol-t, .ol-panel > .ol-bos { margin: 0 calc(-1 * var(--bo-4)); padding-left: var(--bo-4); padding-right: var(--bo-4); }
/* SATIR SABİT İKİ KATLI (kullanıcı kararı 2026-10-09): her hücre iki satırdır — üstte asıl bilgi (.ol-u), altta
yardımcı bilgi (.ol-a); açıklama iki satıra kadar sarar, fazlası kırpılır (tamamı ipucunda). Yükseklik içerikle
DEĞİŞMEZ: tek satırlık açıklamada da satır iki kat boyundadır. */
.ol-s { display: flex; align-items: center; gap: var(--bo-3); padding-top: var(--bo-2); padding-bottom: var(--bo-2);
border-bottom: 1px solid var(--renk-sinir); font-size: var(--fs-sm); line-height: 1.4; min-height: calc(2.8em + 2 * var(--bo-2)); cursor: pointer; }
.ol-s > * { min-width: 0; }
.ol-s.ol-bas { cursor: default; background: var(--renk-vurgu-zemin); color: var(--renk-orta); font-weight: var(--fw-kalin);
min-height: 0; white-space: nowrap; }
.ol-s.ol-bas > * { overflow: hidden; text-overflow: ellipsis; }
.ol-s:not(.ol-bas):hover, .ol-t:hover { background: var(--renk-zebra); }
.ol-s.secili, .ol-t.secili { background: var(--renk-vurgu-zemin); box-shadow: inset 3px 0 0 var(--renk-aksan); }
/* Hesap sayfası Defter tablosu (#hesap/, yol #772): seçili fiş satırı — sağ panel onun belgesini gösterir. */
.hd-tablo tbody tr.secili > td { background: var(--renk-vurgu-zemin); }
.hd-tablo tbody tr.secili > td:first-child { box-shadow: inset 3px 0 0 var(--renk-aksan); }
.ol-s > .ol-kutu { flex: 0 0 var(--bo-4); }
.ol-s > .ol-firma { flex: 1.9 1 0; }
.ol-s > .ol-ack { flex: 1.6 1 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
overflow-wrap: anywhere; }
.ol-s.ol-bas > .ol-ack { display: block; }
.ol-ack > .rozet { margin-right: var(--bo-1); }
.ol-s > .ol-gon { flex: .9 1 0; }
.ol-s > .ol-ack2 { flex: 1.6 1 0; } /* iki katlı açıklama hücresi: açıklama / maliyet merkezi (Ödenenler) */
.ol-s.ol-cari > .ol-firma { flex: 2.4 1 0; } /* cari listesi: açıklama kolonu yok, payı cari adına */
.ol-s.ol-avans > .ol-gon { text-align: right; } /* avans listesi: orta kolon tutardır (satıcıya borcumuz) */
.ol-s.ol-cari > .ol-kalan > .ol-a { font-family: var(--font-ana); font-size: var(--fs-xs2); font-weight: 400; color: var(--renk-soluk); }
.ol-s > .ol-kalan { flex: .8 1 0; text-align: right; }
.ol-u, .ol-a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-firma > .ol-u { font-weight: var(--fw-kalin); }
.ol-a { color: var(--renk-soluk); font-size: var(--fs-xs2); }
.ol-kalan > .ol-a { font-size: var(--fs-sm); font-weight: var(--fw-kalin); }
.ol-kalan > .ol-a.denge-yok { color: var(--renk-neg); }
.ol-kalan > .ol-a.denge-ok { color: var(--renk-pos); }
.ol-duzen { padding: 0 6px; font-size: var(--fs-xs2); line-height: 1.5; }
.ol-s > .ol-belge { display: none; } /* yalnız kart görünümünde */
.ol-bos { padding-top: var(--bo-3); padding-bottom: var(--bo-3); font-size: var(--fs-sm); }
.ol-bos:empty { display: none; }
.ol-uyari { color: var(--renk-uyari-yazi); }
.ol-hata { color: var(--renk-neg); }
/* Talimat adımı: satır SABİT iki katlıdır — üstte alıcı · fatura · kalan · Çıkar; altta IBAN · ödeme biçimi ·
tutar · listede kalır. Alt kat ızgaradır: kolonlar her satırda aynı yerde durur, kip değişince hiçbir şey kaymaz. */
.ol-t { padding-top: var(--bo-3); padding-bottom: var(--bo-3); border-bottom: 1px solid var(--renk-sinir);
font-size: var(--fs-sm); cursor: pointer; }
.ol-t-ust { display: flex; align-items: center; gap: var(--bo-2); }
.ol-t-ust > .ol-firma { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-t-ust > .ol-t-no { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-t-alt { display: grid; grid-template-columns: minmax(0, 1fr) 10em 9em 13em; align-items: center;
gap: var(--bo-3); margin-top: var(--bo-2); }
.ol-t-alt > * { min-width: 0; }
.ol-t-alt > .ol-iban { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-t-alt > .ol-iban select, .ol-t-alt > .seg { width: 100%; }
.ol-t-kalan { flex: none; white-space: nowrap; }
.ol-t-bilgi { display: flex; justify-content: space-between; gap: var(--bo-2); white-space: nowrap; overflow: hidden; }
.ol-t-alt .ol-tutar { width: 100%; text-align: right; }
.ol-t-alt .ol-tutar[readonly] { background: var(--renk-zemin); color: var(--renk-soluk); }
/* Fatura ekle penceresi */
.ol-adaylar { max-height: 52vh; overflow-y: auto; border: 1px solid var(--renk-cizgi); border-radius: var(--yaricap-sm); }
.ol-adaylar > .ol-bos { padding-left: var(--bo-3); padding-right: var(--bo-3); }
.ol-aday { display: grid; grid-template-columns: var(--bo-4) minmax(0, 1fr) auto; gap: var(--bo-2); align-items: start;
padding: var(--bo-2) var(--bo-3); border-bottom: 1px solid var(--renk-cizgi); cursor: pointer; font-size: var(--fs-sm); }
.ol-aday:hover { background: var(--renk-vurgu-zemin); }
.ol-aday-metin { min-width: 0; overflow-wrap: anywhere; }
/* TEMİNAT MEKTUPLARI (modules/teminat.js — ADR L7, maket onayı 2026-10-16): önizlemeli liste, satır TEK katlı
(muhatap · iş | banka no | vade | tutar | durum çipi). Gruplar (Kapanmış olabilir / Yürürlükte) satırla aynı kenar payında. */
.ol-s.ol-tm { min-height: 0; padding-top: var(--bo-1); padding-bottom: var(--bo-1); }
/* Sabit genişlikli kolonlar (tarih, numara, tutar kırpılmaz); kalan pay muhatap · işe. */
.ol-tm > .ol-firma { flex: 1 1 0; }
.ol-tm > .ol-firma > .ol-u { font-weight: var(--fw-normal, 400); }
.ol-tm > .ol-no { flex: 0 0 11.5em; }
.ol-tm > .ol-vade { flex: 0 0 6.6em; text-align: right; }
.ol-tm > .ol-kalan { flex: 0 0 5.4em; }
.ol-tm > .ol-durum { flex: 0 0 10.5em; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-tm > .ol-kutu > input { margin: 0; }
.ol-panel > .ol-grup, .ol-panel > .tm-eski { margin: 0 calc(-1 * var(--bo-4)); padding-left: var(--bo-4); padding-right: var(--bo-4); }
.ol-grup { display: flex; gap: var(--bo-2); align-items: baseline; flex-wrap: wrap; padding-top: var(--bo-1); padding-bottom: var(--bo-1);
background: var(--renk-zebra); border-bottom: 1px solid var(--renk-sinir); font-size: var(--fs-xs2); font-weight: var(--fw-kalin); }
.ol-grup > .dim { font-weight: 400; }
.tm-ozet { flex-basis: 100%; }
.tm-kutuksuz { margin: 0 0 var(--bo-3); font-size: var(--fs-xs2); }
.tm-kutuksuz > summary { cursor: pointer; }
.tm-kutuksuz .tablo { margin-top: var(--bo-2); }
.tm-eski { padding-top: var(--bo-2); }
.tm-onz-ozet { display: grid; gap: var(--bo-2); align-content: start; padding: var(--bo-4); font-size: var(--fs-sm); overflow: auto; }
.tm-kv { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: var(--bo-1) var(--bo-3); }
.tm-secenek { display: grid; gap: var(--bo-1); }
.tm-secenek > label { display: flex; gap: var(--bo-2); align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; }
@media (max-width: 640px) {
.ol-tm > .ol-no, .ol-tm > .ol-vade { flex: 1 1 40%; order: 3; text-align: left; }
.ol-tm > .ol-durum { flex: 1 1 100%; order: 4; text-align: left; }
}
/* ÇEK VE SENETLER (modules/cek-senet.js — tek sayfa önizlemeli, kullanıcı kararı 2026-10-22; maket
claude.ai/artifact/95yEjpEGWUM4BMkS7Xw2uF). Satır TEK katlı (tür · seri no | cari | tutar | vade | durum); sabit
sütunlar kırpılmaz, kalan pay cariye. Sağ panelde künye + geçiş formu önizleme kabuğunun başlığı altında durur. */
.ol-s.ol-cs { min-height: 0; padding-top: var(--bo-1); padding-bottom: var(--bo-1); }
.ol-cs > .ol-tur { flex: 0 0 7.5em; }
.ol-cs > .ol-no { flex: 0 0 6.5em; }
.ol-cs > .ol-firma { flex: 1 1 0; }
.ol-cs > .ol-firma > .ol-u { font-weight: var(--fw-normal, 400); }
.ol-cs > .ol-kalan { flex: 0 0 9em; text-align: right; }
.ol-cs > .ol-vade { flex: 0 0 10em; }
.ol-cs > .ol-durum { flex: 0 0 6.5em; text-align: right; white-space: nowrap; }
.cs-kunye { display: grid; gap: 3px; padding: var(--bo-2) var(--bo-3); border-bottom: 1px solid var(--renk-cizgi); font-size: var(--fs-sm); flex: none; }
.cs-k1 { display: flex; align-items: baseline; gap: var(--bo-2); flex-wrap: wrap; }
.cs-seri { font-weight: var(--fw-kalin); }
.cs-ad { font-weight: var(--fw-kalin); min-width: 0; overflow-wrap: anywhere; }
.cs-tutar { margin-left: auto; font-weight: var(--fw-kalin); font-size: var(--fs-md); white-space: nowrap; }
.cs-k2 { display: flex; gap: 2px var(--bo-3); flex-wrap: wrap; font-size: var(--fs-xs2); }
.cs-iz { display: flex; gap: 2px var(--bo-2); flex-wrap: wrap; align-items: baseline; font-size: var(--fs-xs2); }
.cs-form { display: grid; gap: var(--bo-2); padding: var(--bo-3); border-bottom: 1px solid var(--renk-cizgi);
background: var(--renk-yuzey-2); box-shadow: inset 3px 0 0 var(--renk-aksan); font-size: var(--fs-sm); flex: none; }
.cs-form-dug { display: flex; gap: var(--bo-2); justify-content: flex-end; }
.cs-form .alan-grup { margin-bottom: 0; gap: 2px; }
.cs-form-satir { display: grid; grid-template-columns: minmax(0, 1fr) 10.5em; gap: var(--bo-2); align-items: start; }
.cs-form-satir > :only-child { grid-column: 1 / -1; max-width: 10.5em; }
.cs-bos { margin: auto; max-width: 30em; display: grid; gap: var(--bo-2); padding: var(--bo-4); font-size: var(--fs-sm);
border: 1px dashed var(--renk-sinir); border-radius: var(--yaricap-sm); background: var(--renk-yuzey); }
.cs-bos ol { margin: 0; padding-left: 1.3em; display: grid; gap: var(--bo-1); }
.cs-adaylar { max-height: 52vh; overflow-y: auto; border: 1px solid var(--renk-cizgi); border-radius: var(--yaricap-sm); }
.cs-aday { display: flex; gap: var(--bo-2); align-items: flex-start; padding: var(--bo-2) var(--bo-3); border-bottom: 1px solid var(--renk-cizgi);
font-size: var(--fs-sm); cursor: pointer; }
.cs-aday:hover { background: var(--renk-vurgu-zemin); }
.cs-aday.kapali { cursor: default; opacity: .6; }
.cs-aday-metin { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
.ol-cs > .ol-no, .ol-cs > .ol-vade, .ol-cs > .ol-tur { flex: 1 1 40%; order: 3; text-align: left; }
.ol-cs > .ol-durum { flex: 1 1 100%; order: 4; text-align: left; }
}
@media (max-width: 640px) {
.ol-s.ol-bas { display: none; }
.ol-s { flex-wrap: wrap; gap: var(--bo-1) var(--bo-2); padding-top: var(--bo-3); padding-bottom: var(--bo-3); }
.ol-s > .ol-kutu { order: 0; }
.ol-s > .ol-firma { flex: 1 1 50%; order: 1; }
.ol-s > .ol-firma .ol-u { white-space: normal; }
.ol-s > .ol-kalan { flex: 0 0 auto; order: 2; }
.ol-s > .ol-ack, .ol-s > .ol-ack2 { flex: 1 1 100%; order: 3; }
.ol-s > .ol-gon { flex: 1 1 100%; order: 4; display: flex; gap: var(--bo-2); }
.ol-s > .ol-belge { display: block; flex: 1 1 100%; order: 5; }
.ol-t-ust { flex-wrap: wrap; }
.ol-t-alt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ol-t-alt > .ol-iban { grid-column: 1 / -1; white-space: normal; }
}
/* K25 KABUĞU — SEKMELİ SAYFA (2026-10-09): `ui/gorunum-sekme` gövdeyi `.gs-govde` içine çizer; iki kolonlu iş
yüzeyi oraya basılınca ızgara `.bolum-icerik`in doğrudan çocuğu olmaz ve kabuk SESSİZCE kapalı kalırdı (kural
markup zincirine bağlı — yukarıdaki "İKİ KAT" notunun üçüncü katı). Zincir: main > .bolum-icerik > .gs-govde >
.is-izgara. Üstteki süzgeç barı doğal boyunda kalır, ızgara kalanı doldurur. */
@media (min-width:1001px) and (min-height:640px){
main#icerik:has(> .bolum-icerik > .gs-govde > .is-izgara){display:flex;flex-direction:column}
main#icerik > .bolum-icerik:has(> .gs-govde > .is-izgara){display:flex;flex-direction:column;flex:1;min-height:0}
.bolum-icerik > .gs-govde:has(> .is-izgara){display:flex;flex-direction:column;flex:1;min-height:0}
.bolum-icerik > .gs-govde:has(> .is-izgara) > :not(.is-izgara){flex:none}
}
/* FİNANS HESAPLARI — KONTROL LİSTESİ (yol #774, 2026-10-17; maket claude.ai/artifact/4XgZ7BFP85UH5zbsjZMJHk 5. tur):
tek satır kontrol özeti (kutu = listeyi süzen düğme) · yedi sütunlu ferah tablo (iki bakiye aynı günün) · altta liste
dışında tutulanların bağı. Para tutarı / grafik yok: o soru Para Durumu'nun. Renk yalnız iş varken. */
.fh-ozet{display:flex;flex-wrap:wrap;background:var(--renk-yuzey);border:1px solid var(--renk-sinir);border-radius:var(--yaricap-lg);
margin-bottom:var(--bo-4)}
.fh-ok{display:flex;align-items:baseline;gap:8px;padding:14px 22px;border:0;border-left:1px solid var(--renk-cizgi);
background:transparent;font:inherit;color:inherit;text-align:left}
.fh-ok:first-child{border-left:0}
button.fh-ok{cursor:pointer}
button.fh-ok:hover:not(:disabled){background:var(--renk-yuzey-2)}
button.fh-ok:disabled{cursor:default}
button.fh-ok.aktif{background:var(--renk-uyari-zemin)}
.fh-oe{font-size:12px;color:var(--renk-soluk)}
.fh-ov{font-size:16px;font-weight:700;color:var(--renk-soluk)}
.fh-ok.sabit .fh-ov{color:var(--renk-yazi)}
.fh-ov.pos{color:var(--renk-pos-yazi)!important}
.fh-ov.uyari{color:var(--renk-uyari-yazi)}
.fh-ov.neg{color:var(--renk-neg-yazi)}
.fh-suzgec{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:var(--bo-3)}
.fh-suzgec .alan{flex:1;min-width:220px}
.fh-suzgec .seg .il-say{margin-left:6px;color:var(--renk-soluk);font-family:var(--font-mono);font-size:11.5px;font-weight:500}
.fh-tkap{overflow-x:auto;border:1px solid var(--renk-sinir);border-radius:var(--yaricap-lg);background:var(--renk-yuzey)}
.fh-tablo{table-layout:fixed;min-width:1100px;margin:0}
.fh-tablo th{padding:12px 18px;vertical-align:bottom;white-space:nowrap}
.fh-th-alt{display:block;font-weight:500;font-size:10.5px;color:var(--renk-soluk);margin-top:1px}
.fh-tablo td{padding:0 18px;height:52px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;font-size:12.5px}
.fh-tablo tr.fh-grup > td{height:46px;padding-top:6px;background:var(--renk-yuzey-2);border-top:1px solid var(--renk-sinir)}
.fh-tablo tbody tr.fh-grup:first-child > td{border-top:0}
.fh-tablo tr.fh-grup{cursor:default}
.fh-tablo tr.fh-grup:hover > td{background:var(--renk-yuzey-2)}
.fh-tablo tr.fh-grup:hover > td:first-child{box-shadow:none}
.fh-gad{font-size:13.5px;font-weight:700}
.fh-gnot{color:var(--renk-soluk);font-weight:500;margin-left:10px;font-size:11.5px}
.fh-pasif{margin-left:12px}
.fh-tablo tr.fh-katli > td{height:38px;text-align:center;color:var(--renk-soluk);font-size:11.5px;cursor:pointer}
.fh-tablo tr.fh-katli:hover > td{color:var(--renk-yazi);background:var(--renk-yuzey-2)}
.fh-kurum{color:var(--renk-orta)}
.fh-hs{display:flex;align-items:center;gap:10px;min-width:0}
.fh-ad{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis}
.fh-ek{font-size:11.5px;color:var(--renk-soluk);overflow:hidden;text-overflow:ellipsis}
.fh-kod{margin-left:auto;padding-left:12px;font-size:11px;color:var(--renk-soluk);flex:none}
.fh-tar{color:var(--renk-soluk)}
.fh-tar.eski{color:var(--renk-uyari-yazi);font-weight:600}
.fh-tutar{font-size:13px}
.fh-tutar.neg{color:var(--renk-neg)}
.fh-fark{font-weight:600;font-size:13px;color:var(--renk-neg-yazi)}
.fh-fark.sifir{color:var(--renk-soluk);font-weight:500}
.fh-yok{color:var(--renk-soluk)}
.fh-is{display:flex;align-items:center;gap:10px;min-width:0}
.fh-it{color:var(--renk-soluk);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.fh-bos{padding:18px!important;height:auto!important;white-space:normal!important;text-align:center}
.fh-dis{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;padding:14px 4px 0;font-size:12px;color:var(--renk-soluk)}
.fh-dis a{color:var(--renk-aksan-yazi);font-weight:600;text-decoration:none}
.fh-dis a:hover{text-decoration:underline}
.fh-dis-bas{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-bottom:var(--bo-3);font-size:12px}
.fh-dis-bas a{color:var(--renk-aksan-yazi);font-weight:600;text-decoration:none}
/* MAKİNE PUANTAJI v3 (yol #784; maket claude.ai/artifact/R4c97RPSdhYHNMmLbLYCVR v4, Çağatay 2026-10-19 onaylı):
dolu renk = durum, kutuda yalnız mesai; pazar / tatil yalnız başlıkta (sütun şeridi YOK); haftalar arası ince boşluk;
sabit düzen, kapsayıcıyı doldurur — ~1.500 px'e yatay kaydırmasız sığar (dar ekranda kap kaydırır). */
.mpt-suzgec{display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap;margin-bottom:var(--bo-3)}
.mpt-suzgec label{display:flex;gap:6px;align-items:center;font-size:12px}
.mpt-lejant{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:11.5px;margin-bottom:var(--bo-3)}
.mpt-lejant > span{display:inline-flex;gap:6px;align-items:center}
.mpt-lejant i.h{display:inline-block;width:28px;font-style:normal}
.mpt-ayrac{width:1px;height:18px;background:var(--renk-sinir)}
.mpt-pz{color:var(--renk-neg);font-size:12px;min-width:16px;text-align:center}
.mpt-kap{overflow-x:auto;border:1px solid var(--renk-sinir);border-radius:var(--yaricap-lg);background:var(--renk-yuzey)}
table.mpt{width:100%;min-width:1100px;table-layout:fixed;border-collapse:collapse;font-size:12px;margin:0}
.mpt col.c-mk{width:17%} .mpt col.c-say{width:3.4%} .mpt col.c-kira{width:9.5%}
.mpt th{padding:6px 0 5px;font-size:11.5px;font-weight:600;color:var(--renk-soluk);text-align:center;background:var(--renk-yuzey);
border-bottom:1px solid var(--renk-sinir);user-select:none}
.mpt th small{display:block;font-size:9.5px;font-weight:400;margin-top:1px}
.mpt th.pz{color:var(--renk-neg)}
.mpt th.bugun{color:var(--renk-ana-ustu);background:var(--renk-ana);border-radius:5px 5px 0 0}
.mpt th.bugun small{color:var(--renk-ana-ustu);opacity:.8}
.mpt th.mk{text-align:left;padding-left:12px}
.mpt th.say,.mpt td.say{text-align:right;padding-right:8px}
.mpt th.kira,.mpt td.kira{text-align:right;padding-right:12px;border-left:1px solid var(--renk-cizgi)}
.mpt td{border-bottom:1px solid var(--renk-cizgi);padding:0;background:var(--renk-yuzey);vertical-align:middle}
.mpt td.mk{padding:6px 8px 6px 12px;overflow:hidden}
.mpt .hb{padding-left:5px}
.mpt tr.grup td{background:var(--renk-zemin);font-weight:600;font-size:11.5px;padding:5px 12px}
.mpt tr.grup td .dim{font-weight:400}
.mpt .mk-1{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap}
.mpt .plaka{font-weight:700;color:var(--renk-aksan-yazi);text-decoration:none;flex:none}
.mpt .mk-1 .ad{overflow:hidden;text-overflow:ellipsis;font-size:11.5px;min-width:0}
.mpt .mk-2{font-size:10.5px;color:var(--renk-soluk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.mpt .mk-2 .nk{color:var(--renk-kat-turkuaz);font-weight:600}
.mpt td.say.kirmizi{color:var(--renk-pt-a-yazi);font-weight:600}
.mpt td.kira .xs{font-size:10px;line-height:1.25;white-space:normal}
.mpt tr.kilitli td.h{cursor:default}
/* hücre kutusu */
.mpt td.h,.mpt-lejant i.h{padding:3px 1.5px;text-align:center;cursor:cell}
.mpt td.h > span,.mpt-lejant i.h > span,.mpt-palet .h > span{display:flex;align-items:center;justify-content:center;height:26px;
border-radius:4px;border:1px solid var(--renk-sinir);background:var(--renk-yuzey);font:600 10.5px/1 var(--font-mono)}
.mpt td.k-c > span,.mpt-lejant i.k-c > span,.mpt-palet .k-c > span{background:var(--renk-pt-c);border-color:var(--renk-pt-c-sinir);color:var(--renk-pt-c-yazi)}
.mpt td.k-y > span,.mpt-lejant i.k-y > span,.mpt-palet .k-y > span{background:linear-gradient(90deg,var(--renk-pt-c) 50%,var(--renk-yuzey) 50%);
border-color:var(--renk-pt-c-sinir);color:var(--renk-pt-c-yazi)}
.mpt td.k-a > span,.mpt-lejant i.k-a > span,.mpt-palet .k-a > span{background:var(--renk-pt-a);border-color:var(--renk-pt-a-sinir);color:var(--renk-pt-a-yazi)}
.mpt td.k-b > span,.mpt-lejant i.k-b > span,.mpt-palet .k-b > span{background:var(--renk-pt-b);border-color:var(--renk-pt-b-sinir);color:var(--renk-pt-b-yazi)}
.mpt td.pz > span{border-style:dashed;background:transparent}
.mpt td.gelecek > span,.mpt-lejant i.gelecek > span{background:transparent;border-style:dotted}
.mpt td.gelecek{cursor:default}
.mpt td.nakil{box-shadow:inset 2px 0 0 var(--renk-kat-turkuaz)}
.mpt td.secili > span{outline:2px solid var(--renk-yazi);outline-offset:1px}
.mpt td.imlec > span{box-shadow:0 0 0 2px var(--renk-aksan)}
.mpt td.degisti > span{border-width:2px}
/* palet (fixed — kaydırma kabında mutlak öğe kırpılır) */
.mpt-palet{position:fixed;z-index:60;width:300px;display:grid;gap:8px;padding:10px 12px;background:var(--renk-yuzey);
border:1px solid var(--renk-sinir);border-radius:8px;box-shadow:var(--golge-lg)}
.mpt-palet-bas{font-size:12px;color:var(--renk-soluk)}
.mpt-palet-kod{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.mpt-palet-kod button{border:0;background:transparent;padding:0;cursor:pointer;display:grid;gap:3px;font:inherit;color:inherit}
.mpt-palet-kod button > span{height:32px;font:700 13px/1 var(--font-ana)}
.mpt-palet-kod button small{font-size:10.5px;color:var(--renk-soluk)}
.mpt-palet-kod button.sec > span{outline:2px solid var(--renk-aksan);outline-offset:1px}
.mpt-palet-mesai{display:flex;gap:8px;align-items:center;font-size:12px}
.mpt-palet-tus{display:flex;gap:6px;justify-content:flex-end}
/* AY SONU YAZIM SAYFALARI — Makine Kirası · İşçilik Yansıtması (yol #784; Muhasebe ▸ Dönem Sonu): tek satır özet ·
ferah tablo · açılır satır (hesap + şantiye payları + fiş satırları aynı yerde). */
.ay-ozet{font-size:13px;margin-bottom:var(--bo-3)}
.aksan-y{color:var(--renk-aksan-yazi)} .uyari-y{color:var(--renk-uyari-yazi)}
.tablo-ferah th{padding:10px 14px;white-space:nowrap}
.tablo-ferah td{padding:10px 14px;vertical-align:top}
.tablo-ferah tr.ay-satir{cursor:pointer}
.tablo-ferah tr.ay-satir:hover > td{background:var(--renk-yuzey-2)}
.tablo-ferah tr.acik > td,.tablo-ferah tr.ay-detay > td{background:var(--renk-zemin)}
.tablo-ferah tr.ay-detay > td{padding-top:0}
.ay-ok{display:inline-block;width:12px;color:var(--renk-soluk)}
.plaka-bag{font-weight:700;color:var(--renk-aksan-yazi);text-decoration:none}
.ay-detay-ic{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;background:var(--renk-yuzey);
border:1px solid var(--renk-cizgi);border-radius:6px;padding:10px 14px}
.ay-bas{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--renk-soluk);margin:2px 0 6px}
table.ay-fis{width:100%;font-size:12px;border-collapse:collapse}
table.ay-fis td{padding:3px 6px;border-bottom:1px dashed var(--renk-cizgi)}
.ay-toplam td{font-weight:700;border-top:1px solid var(--renk-sinir)}
/* ── GRUPLU TABLO SÖZLEŞMESİ (ui_standard K47 — 2026-10-21, kullanıcı kararları; maket
claude.ai/artifact/WDaa83qxQyfyA8rpHiLLgd). Grup satırı TEK sınıf `.tb-grup`, çizici `ui/tablo-grup.js`.
Satır boyu iki kademe jetonla (--h-satir-yogun 32 · --h-satir 44). Ortak ızgara: aynı sütunları taşıyan
tablolar colgroup + `.tb-izgara` (table-layout:fixed) ile hizalanır (K19). Yeni grup sınıfı açmayı
scripts/tablo_grup_kontrol.py yakalar. ── */
.tablo.tb-izgara { table-layout: fixed; }
.tablo.tb-standart th { padding: 10px 12px; vertical-align: bottom; }
.tablo.tb-standart td { height: var(--h-satir); padding: 0 12px; vertical-align: middle; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.tablo.tb-yogun td { height: var(--h-satir-yogun); padding-top: 0; padding-bottom: 0; vertical-align: middle; }
/* Gruplu tabloda zebra yok: grup satırı kendi zemini taşır, zebra grupla çakışıp satırları yanlış eşler. */
.tablo.tb-standart tbody tr > td { background: transparent; }
.tablo.tb-standart tbody tr:hover > td { background: var(--renk-yuzey-2); }
.tb-th-alt { display: block; font-weight: 500; font-size: 10.5px; color: var(--renk-soluk); margin-top: 1px; }
.tablo tbody tr.tb-grup:nth-child(n) > td { background: var(--renk-yuzey-2); border-top: 1px solid var(--renk-sinir);
font-weight: var(--fw-kalin); }
.tablo tbody tr.tb-grup:first-child > td { border-top: 0; }
.tablo tbody tr.tb-grup.tb-katlanir { cursor: pointer; }
.tablo tbody tr.tb-grup.tb-katlanir:hover > td { background: var(--renk-vurgu-zemin); }
.tb-gad { font-weight: 700; font-size: 13.5px; }
.tablo td.tb-ek { color: var(--renk-soluk); font-size: 12px; font-weight: 500; }
.tb-adet { display: inline-block; min-width: 62px; margin-right: 8px; font-variant-numeric: tabular-nums; }
.tb-ok { display: inline-block; width: 18px; color: var(--renk-orta); }
.tablo td.tb-girinti { padding-left: 36px; }
.tablo tbody tr.tb-katli > td { height: var(--h-satir-yogun); text-align: center; color: var(--renk-soluk);
font-size: 11.5px; cursor: pointer; }
.tablo tbody tr.tb-katli:hover > td { color: var(--renk-yazi); background: var(--renk-yuzey-2); }
.tablo tbody tr.tb-grup:focus-visible, .tablo tbody tr.tb-katli:focus-visible { outline: 2px solid var(--renk-aksan);
outline-offset: -2px; }
.tablo tfoot tr.tb-toplam > td { background: var(--renk-vurgu-zemin); font-weight: var(--fw-bold);
border-top: 1px solid var(--renk-sinir); }
/* ÖDEME TALİMATI ▸ PERSONEL DÖKÜMÜ (K47 ilk tüketici — maket claude.ai/artifact/Kj1MKE9MgPMdsB8LkwVJBj B2,
2026-10-21): iki kart, ortak ızgara, kpiKutu şeridi. Ölçüler sınıfta, inline stil yok. */
.ot-pd-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px;
margin-bottom: var(--bo-3); }
.ot-pd-arac { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: var(--bo-3); }
.ot-pd-arac .et { font-size: 12.5px; color: var(--renk-orta); margin-right: 6px; }
.ot-pd-kart { padding: 0; overflow: hidden; margin-bottom: var(--bo-3); }
.ot-pd-bas { padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
border-bottom: 1px solid var(--renk-cizgi); }
.ot-pd-bas .t { font-weight: var(--fw-kalin); font-size: var(--fs-md); }
.ot-pd-bas .n { color: var(--renk-soluk); font-size: 12.5px; }
.ot-pd-tablo { min-width: 900px; margin: 0; font-size: 13px; }
.ot-pd-tablo td.ad a { color: var(--renk-yazi); text-decoration: none; font-weight: 500; }
.ot-pd-tablo td.ad a:hover { text-decoration: underline; }
.ot-pd-ip { border-bottom: 1px dotted var(--renk-soluk); cursor: help; }
.ot-pd-bos { text-align: center; color: var(--renk-soluk); }
details.ot-pd-dip { border-top: 0; }
details.ot-pd-dip > summary { cursor: pointer; color: var(--renk-yazi); font-weight: var(--fw-kalin); }
details.ot-pd-dip ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; max-width: 120ch; }
.ot-pd-kimlik { font-family: var(--font-mono); font-size: 12px; color: var(--renk-yazi);
background: var(--renk-vurgu-zemin); border-radius: 4px; padding: 2px 6px; display: inline-block; }
/* HAKEDİŞLER LİSTESİ (ADR K10 ek karar ②, K47 tüketicisi, maket claude.ai/artifact/91ghxCNkp1t76aKu5xsTfe, 2026-10-30): tek sol ray —
başlık, ay, satır adı aynı x'te (32 px), ok rayın solunda; ayrımı çizgi değil zemin yapar. Normal durum nokta + yazı, dolu rozet
yalnız bakılacak kayıtta. Dar kapta aynı tablo üç sıralı satıra döner, yatay kaydırma yok (kap sorgusu). */
/* Yapışkan ay: main#icerik dolgusu kadar eksi; yoksa dolgu boşluğunda kayan satır ay başlığının üstünde görünür (layout.css ≤820 px'te --bo-3). */
.hk-kap { container-type: inline-size; display: grid; gap: var(--bo-3); min-width: 0; --hk-yapis: calc(-1 * var(--bo-5)); }
@media (max-width: 820px) { .hk-kap { --hk-yapis: calc(-1 * var(--bo-3)); } }
.hk-kap .hk-suzgec { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
#hk-esles:empty { display: none; }
.hk-suzgec .alan { width: auto; max-width: 240px; }
.hk-hepsi { margin-left: auto; }
.hk-suz-ac { display: none; }
.hk-seyir { background: var(--renk-yuzey); border: 1px solid var(--renk-sinir); border-radius: var(--yaricap); padding: 10px 16px 8px; display: grid; gap: 6px; }
.hk-seyir[hidden] { display: none; }
.hk-seyir-bas { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: center; font-size: var(--fs-xs); color: var(--renk-soluk); }
.hk-seyir-bas b { color: var(--renk-yazi); font-weight: 600; }
.hk-seyir-not { margin-left: auto; }
.hk-lej { display: inline-flex; align-items: center; gap: 5px; }
.hk-lej i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.hk-seyir i.ge { background: var(--grafik-2); } .hk-seyir i.gi { background: var(--grafik-3); }
.hk-aylar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.hk-ay-sut { background: none; border: 0; border-radius: 4px; padding: 2px 0 3px; cursor: pointer; display: grid; gap: 3px; color: var(--renk-soluk); font: inherit; font-size: var(--fs-xs); min-width: 0; }
.hk-ay-sut:hover, .hk-ay-sut.sec { background: var(--renk-vurgu-zemin); color: var(--renk-yazi); }
.hk-ay-sut.sec { font-weight: 600; }
.hk-cubuk { height: 44px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.hk-cubuk i { width: min(12px, 32%); border-radius: 2px 2px 0 0; display: block; }
.hk-kart { padding: 0; overflow: clip; }
.hk-c-ad { width: 270px; } .hk-c-no { width: 72px; } .hk-c-tut { width: 150px; } .hk-c-dur { width: 190px; } .hk-c-bel { width: 176px; }
.tablo.hk-liste th { background: transparent; color: var(--renk-soluk); font-weight: 500; font-size: var(--fs-xs); padding: 9px 16px; }
.tablo.hk-liste td { padding: 0 16px; border-bottom: 1px solid var(--renk-cizgi); overflow: hidden; text-overflow: ellipsis; }
.tablo.hk-liste th:first-child, .tablo.hk-liste td:first-child { padding-left: 32px; }
.tablo.hk-liste .hk-dur { padding-left: 32px; }
.tablo.hk-liste .hk-no { padding-inline: 4px; color: var(--renk-soluk); }
.tablo.hk-liste tr.son > td { border-bottom: 0; }
.tablo.hk-liste tbody tr.hk-sat { cursor: pointer; }
.tablo.hk-liste tbody tr.tb-grup:nth-child(n) > td { background: var(--renk-zebra); border: 0; font-weight: 400; position: sticky; top: var(--hk-yapis); z-index: 2; }
.tablo.hk-liste tbody tr.tb-grup.tb-katlanir:hover > td { background: var(--renk-vurgu-zemin); }
.tablo.hk-liste tr.tb-grup td:first-child { overflow: visible; }
.hk-liste .tb-ok { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; text-align: center; }
.hk-liste .tb-gad { font-weight: 400; font-size: inherit; }
.hk-ay { display: inline-block; width: 74px; font-weight: 600; }
.hk-yil { color: var(--renk-soluk); font-variant-numeric: tabular-nums; }
.tablo.hk-liste td.hk-ad { font-weight: 500; }
.hk-liste .hk-tut { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hk-dus { color: var(--renk-soluk); text-decoration: line-through; }
.hk-dt { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--renk-orta); }
.hk-dt i { width: 6px; height: 6px; border-radius: 50%; background: var(--renk-pos); flex: none; }
.hk-fis, .hk-fat { display: block; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; }
.hk-fis { font-size: 12.5px; line-height: 16px; color: var(--renk-orta); }
.hk-fat { font-size: 11px; line-height: 14px; color: var(--renk-soluk); }
@container (max-width: 900px) {
.hk-suzgec .seg { flex: 1 1 auto; } .hk-suz-ac { display: inline-block; }
.hk-suzgec .alan, .hk-hepsi { display: none; }
.hk-suzgec.acik .alan { display: block; width: 100%; max-width: 100%; }
.hk-suzgec.acik .hk-hepsi { display: inline-block; margin-left: 0; }
.hk-seyir { padding: 8px 10px 6px; } .hk-seyir-not { margin-left: 0; flex-basis: 100%; }
.hk-aylar { gap: 0; } .hk-cubuk { height: 36px; }
.hk-liste, .hk-liste tbody, .hk-liste tfoot { display: block; }
.hk-liste thead, .hk-liste colgroup { display: none; }
.tablo.hk-liste tr.hk-sat { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ad tut" "is dur" "bel bel"; gap: 1px 10px; padding: 9px 12px 9px 30px; border-bottom: 1px solid var(--renk-cizgi); }
.tablo.hk-liste tr.hk-sat.son { border-bottom: 0; }
.tablo.hk-liste tr.hk-sat > td { display: block; height: auto; padding: 0; border: 0; }
.tablo.hk-liste tr.hk-sat > td.hk-ad { grid-area: ad; }
.tablo.hk-liste tr.hk-sat > td.hk-is { grid-area: is; font-size: var(--fs-xs); color: var(--renk-soluk); }
.tablo.hk-liste tr > td.hk-bos, .tablo.hk-liste tr > td.hk-no, .tablo.hk-liste tr > td.hk-belsiz { display: none; }
.tablo.hk-liste tr.hk-sat > td.hk-tut { grid-area: tut; }
.tablo.hk-liste tr.hk-sat > td.hk-dur { grid-area: dur; text-align: right; overflow: visible; }
.tablo.hk-liste tr.hk-sat > td.hk-bel { grid-area: bel; display: flex; gap: 10px; flex-wrap: wrap; }
.hk-fis, .hk-fat { font-size: 11px; color: var(--renk-soluk); }
.hk-liste td.hk-tut::before { content: attr(data-ad); font: 11px var(--font-ana); color: var(--renk-soluk); margin-right: 5px; }
.tablo.hk-liste tbody tr.tb-grup { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ay gel" "ek gid" "dur dur"; gap: 1px 10px; padding: 8px 12px 8px 30px; background: var(--renk-zebra); position: sticky; top: var(--hk-yapis); z-index: 2; }
.tablo.hk-liste tbody tr.tb-grup:nth-child(n) > td { display: block; height: auto; padding: 0; background: none; position: static; }
.tablo.hk-liste tbody tr.tb-grup > td:first-child { grid-area: ay; }
.tablo.hk-liste tbody tr.tb-grup > td.tb-ek { grid-area: ek; white-space: normal; }
.tablo.hk-liste tbody tr.tb-grup > td.hk-tgel { grid-area: gel; } .tablo.hk-liste tbody tr.tb-grup > td.hk-tgit { grid-area: gid; }
.tablo.hk-liste tbody tr.tb-grup > td.hk-dur { grid-area: dur; }
.hk-liste .tb-ok { left: 10px; top: 18px; transform: none; }
.hk-liste tr.tb-katli { display: block; } .tablo.hk-liste tr.tb-katli > td { display: block; height: auto; padding: 10px 12px; text-align: center; }
.tablo.hk-liste tfoot tr.tb-toplam { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; padding: 9px 12px 9px 30px; background: var(--renk-vurgu-zemin); }
.tablo.hk-liste tfoot tr.tb-toplam > td { display: block; height: auto; padding: 0; border: 0; background: none; white-space: normal; }
.tablo.hk-liste tfoot td.hk-dur, .tablo.hk-liste tfoot td.hk-bel { display: none; }
.tablo.hk-liste tfoot td.tb-ek { grid-column: 1 / -1; order: 9; } .tablo.hk-liste tfoot td.hk-tut { grid-column: 2; }
}
/* ── Finans ▸ Yatırım Getirileri (ADR G19 ek karar 12; js/modules/finans-getiri.js; maket v19) ──────────
Aile renkleri --getiri-1..4 (tokens.css). SVG'ler viewBox ile ölçeklenir; ipucu tek kutu (.yg-ipucu, fixed). */
.yg-sayfa { display: flex; flex-direction: column; gap: 16px; }
.yg-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.yg-pano { padding: 14px 16px 16px; }
.yg-bas { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.yg-bas h4 { font-size: 14px; margin: 0; }
.yg-no { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 600 10.5px var(--font-mono);
font-style: normal; background: var(--renk-vurgu-zemin); color: var(--renk-soluk); vertical-align: 1px; margin-left: 4px; }
.yg-kk { font-size: 11.5px; }
.yg-segler { margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; }
.yg-seg { display: inline-flex; border: 1px solid var(--renk-sinir); border-radius: 6px; overflow: hidden; }
.yg-seg button { font: 500 12px inherit; padding: 4px 11px; border: 0; border-right: 1px solid var(--renk-sinir);
background: var(--renk-yuzey); color: var(--renk-yazi); cursor: pointer; }
.yg-seg button:last-child { border-right: 0; }
.yg-seg button.ak { background: var(--renk-vurgu-zemin); font-weight: 600; }
.yg-oku { margin: 4px 0 10px; color: var(--renk-soluk); font-size: 12.5px; max-width: 120ch; }
.yg-oku b { color: var(--renk-yazi); font-weight: 600; }
.yg-alt { margin: 8px 0 0; color: var(--renk-soluk); font-size: 12px; }
.yg-lej { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; font-size: 12px; color: var(--renk-yazi); }
.yg-lej > span { display: inline-flex; align-items: center; gap: 6px; }
.yg-lej i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
.yg-lej i.yg-bant-i { width: 18px; background: var(--renk-soluk); opacity: .35; }
.yg-lej i.yg-enf-i { background: var(--renk-neg-zemin); border: 1px solid var(--renk-neg); }
.yg-yigin { display: flex; height: 26px; gap: 2px; border-radius: 6px; overflow: hidden; margin: 4px 0 10px; }
.yg-yigin span { display: block; min-width: 2px; }
.yg-tk { overflow-x: auto; border: 1px solid var(--renk-cizgi); border-radius: 8px; }
.tablo.yg-tab { font-size: 13px; }
.tablo.yg-tab th { padding: 9px 12px; font-size: 11.5px; }
.tablo.yg-tab td { padding: 9px 12px; vertical-align: middle; }
.tablo.yg-tab tbody tr:hover > td { background: var(--renk-vurgu-zemin); }
.tablo.yg-tab td.mono { font-size: 12.5px; }
.tablo.yg-tab td.yg-cubh, .tablo.yg-tab th.yg-cubh { width: 34%; min-width: 220px; }
td.yg-cubh svg { display: block; width: 100%; height: 22px; }
.yg-eksen { position: relative; height: 14px; font: 500 10.5px var(--font-mono); color: var(--renk-soluk); }
.yg-eksen span { position: absolute; transform: translateX(-50%); top: 0; }
.yg-eksen span:first-child { transform: none; }
.yg-eksen span:last-child { transform: translateX(-100%); } /* son etiket kutudan taşmasın (canlı ölçüm 474/464) */
.tablo.yg-tab tr.yg-top > td { background: var(--renk-vurgu-zemin); border-top: 1px solid var(--renk-sinir); }
.tablo.yg-tab tr.yg-ref > td { color: var(--renk-soluk); font-size: 12px; }
.yg-nokta { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.yg-bant { fill: var(--renk-soluk); opacity: .2; }
.yg-piy { stroke: var(--renk-yazi); stroke-width: 2; stroke-linecap: round; }
.yg-enf { stroke: var(--renk-neg); stroke-width: 1.5; stroke-linecap: round; }
.yg-enf2 { stroke: var(--renk-neg); stroke-width: 2; }
.yg-bek { fill: var(--renk-soluk); opacity: .55; }
/* ⑦ ay ay sütunlar: 12 sabit yuva (Ocak–Aralık) — Aralık kapanınca da taşmaz; en kalabalık ay koyu (2026-11-05) */
td.yg-cubh svg.yg-aysut { width: 100%; max-width: 260px; height: 30px; }
.yg-bek.yg-bek-tepe { opacity: 1; }
.yg-aysut text { font: 500 9px var(--font-mono); fill: var(--renk-soluk); }
.yg-svg { display: block; width: 100%; height: auto; font-size: 12px; fill: var(--renk-soluk); }
.yg-svg text { fill: var(--renk-soluk); }
.yg-svg .yg-dv { fill: var(--renk-yazi); font-weight: 600; font-size: 11.5px; }
.yg-svg .yg-k { font-size: 10px; }
.yg-izgara line { stroke: var(--renk-cizgi); }
.yg-sifir { stroke: var(--renk-soluk); stroke-width: 1.2; }
.yg-hedef { fill: transparent; }
.yg-sut:hover .yg-hedef { fill: var(--renk-vurgu-zemin); }
.yg-ch { stroke: var(--renk-soluk); stroke-dasharray: 2 3; opacity: 0; }
.yg-ay:hover .yg-ch { opacity: .7; }
.yg-enf-alan { fill: var(--renk-neg-zemin); opacity: .8; }
.yg-pol { fill: none; stroke: var(--renk-soluk); stroke-width: 2; opacity: .45; }
.yg-piy-c { fill: none; stroke: var(--renk-yazi); stroke-width: 1.2; opacity: .75; }
.yg-nk circle { stroke: var(--renk-yuzey); stroke-width: 1.5; }
.yg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.yg-grid.yg-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .yg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .yg-grid, .yg-grid.yg-grid2 { grid-template-columns: minmax(0, 1fr); } }
.yg-oran .yg-g-net, .yg-oran .yg-g-brut, .yg-oran .yg-t-net, .yg-oran .yg-t-brut { display: none; }
.yg-oran[data-gor="grafik"][data-kip="net"] .yg-g-net, .yg-oran[data-gor="grafik"][data-kip="brut"] .yg-g-brut { display: grid; }
.yg-oran[data-gor="tablo"][data-kip="net"] .yg-t-net, .yg-oran[data-gor="tablo"][data-kip="brut"] .yg-t-brut { display: block; }
.yg-mini { border: 1px solid var(--renk-cizgi); border-radius: 8px; padding: 10px 10px 6px; background: var(--renk-yuzey); min-width: 0; }
.yg-mb { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; min-height: 38px; }
.yg-mb i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.yg-mn { font-size: 11.5px; margin-top: 2px; }
.yg-risk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.yg-rn { display: inline-flex; gap: 2px; }
.yg-rn i { width: 6px; height: 6px; border-radius: 50%; background: var(--renk-cizgi); display: inline-block; margin: 0; }
.yg-risk.dusuk .yg-rn i.d { background: var(--getiri-1); }
.yg-risk.yuksek .yg-rn i.d { background: var(--getiri-4); }
.yg-risk:not(.dusuk):not(.yuksek) .yg-rn i.d { background: var(--renk-soluk); }
.yg-ipucu { position: fixed; z-index: 60; max-width: 360px; padding: 8px 11px; border-radius: 6px; pointer-events: none;
background: var(--renk-ana); color: var(--renk-ana-ustu); font-size: 12px; line-height: 1.5; white-space: pre-line; box-shadow: var(--golge); }
.yg-ipucu[hidden] { display: none; }