/* QTeşvik — Cernora/Fabricore gri metalik tema. Token ve sınıf adları Cernora ile aynı;
   yalnızca marka bloğu ve bu ürüne özgü bileşenler (evrak listesi, limit çubuğu,
   kural seti görüntüleyici) eklendi. */
:root{
  --accent:#475569; --accent-ink:#334155; --accent-soft:#e6e9ef;
  --navy:#232a35; --ink:#232a35; --muted:#5c6470; --faint:#8a919d;
  --bg:#e9ecf1; --surface:#ffffff; --surface-2:#f1f3f7; --border:#d6dbe3; --border-strong:#c0c6d0;
  --ok:#16a34a; --ok-soft:#eef7f0; --caution:#b7791f; --caution-soft:#fbf6ea;
  --warn:#c2560c; --warn-soft:#fbf0e8; --danger:#dc2626; --danger-soft:#fbeeee;
  /* Hedef pazar rozeti. Palette kullanılmayan tek ton mor: accent gri-mavi,
     ok yeşil, caution kehribar, warn turuncu, danger kırmızı. Severity
     DEĞİL — tür işareti; aciliyet soldaki gün bloğunda kalıyor.
     lacivert ve kagit temaları bu satırı miras alıyor. */
  --pazar:#524a94; --pazar-ink:#524a94; --pazar-soft:#eceaf7;
  --radius:12px;
  --metal-kenar:#333c49;
  /* Yan menu ve ust cubuk AYNI iki degiskenden besleniyor: ekranin ustu
     artik iki farkli renkte parcaya bolunmuyor, tek bir koyu cerceve. */
  --yan-ust:#2b313d; --yan-alt:#20252f;
  --yan-metin:#c3c9d4; --yan-baslik:#eef1f6; --yan-soluk:#78828f;
  --vurgu-1:#3b82f6; --vurgu-2:#6d5efc;   /* etkin menu ve dolgu cubuklari */
  --metal-btn:linear-gradient(180deg,#5c6675 0%,#3d4757 100%);
  --metal-btn-hover:linear-gradient(180deg,#66707f 0%,#434e5f 100%);
  --metal-light:linear-gradient(180deg,#ffffff 0%,#e6eaf0 100%);
  --metal-icon:linear-gradient(145deg,#9aa4b4 0%,#4b5563 100%);
  --btn-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 -2px 0 rgba(0,0,0,.16) inset,0 3px 0 rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.14),0 2px 4px rgba(0,0,0,.08);
  /* Süreç şemasındaki kutular için kabartma. İKİ KATMAN: ince ve koyu bir
     alt kenar (nesnenin kalınlığı) + geniş ve yumuşak bir gölge (yükseklik).
     Tek katman düz bir bulanıklık gibi duruyor, kabarmıyor. */
  /* Kart kabartması. Şemadaki kutularla aynı mantık: ince ve koyu bir alt
     kenar (nesnenin kalınlığı) + geniş ve yumuşak bir gölge (yükseklik).
     Kart her ekranda onlarca kez geçiyor, o yüzden şemadakinden DAHA HAFİF:
     aynı derinlik verilse sayfa gölge tarlasına dönerdi. */
  --kart-golge:0 1px 0 rgba(35,42,53,.05),0 2px 3px rgba(35,42,53,.07),0 7px 14px rgba(35,42,53,.07);
  --kart-golge-ustu:0 2px 0 rgba(35,42,53,.07),0 4px 6px rgba(35,42,53,.1),0 14px 26px rgba(35,42,53,.13);
  --sema-golge:drop-shadow(0 2px 0 rgba(35,42,53,.18)) drop-shadow(0 6px 9px rgba(35,42,53,.24));
  --sema-golge-ustu:drop-shadow(0 3px 0 rgba(35,42,53,.22)) drop-shadow(0 11px 16px rgba(35,42,53,.3));
}
*{box-sizing:border-box}
html,body,#root{height:100%}
/* BELGE KAYMAZ — kayan tek yer .main-wrap.
   Kabuk görüntü alanını tam dolduruyor, yani belgenin kaymasına hiç gerek
   yok. Ama `height:100%` zinciri kesirli bir görüntü yüksekliğinde (Windows
   %125/%150 ölçekleme, tarayıcı yakınlaştırması) bir pikselin altında taşıyor
   ve Chrome bunun için TAM BOY bir kaydırma çubuğu çiziyor: kullanıcı yan yana
   iki çubuk görüyor, hangisinin ne olduğunu bilmiyor ve dıştaki hiçbir işe
   yaramıyor.

   Kapatmak güvenli, çünkü içerik zaten .main-wrap içinde kayıyor; burada
   erişilemez kalan bir şey yok. Kural gövdeye yazılıyor: kök görünür
   olduğunda gövdenin taşma değeri görüntü alanına devrolur.

   GİRİŞ SAYFASI HARİÇ: orada kabuk yok, sayfa kendi boyunca uzuyor ve kısa
   bir pencerede kaymazsa giriş düğmesi ekranın altında kalırdı. */
body{overflow:hidden}
body.giris-modu{overflow:auto}
/* Açılış: oturum belli olana kadar kabuk gizli (index.html başındaki betik).
   Betik hiç çalışmazsa sayfa boş kalmasın diye 4 sn sonra kendiliğinden görünür. */
html.acilis #root{visibility:hidden;animation:acilisGoster 0s 4s forwards}
@keyframes acilisGoster{to{visibility:visible}}
body{margin:0;background:var(--bg);color:var(--navy);
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Butonlar ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:600;
  cursor:pointer;border:1px solid var(--border-strong);background:var(--metal-light);color:var(--navy);
  transition:all .13s;text-decoration:none;box-shadow:var(--btn-shadow);font-family:inherit}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.12)}
.btn-primary{background:var(--metal-btn);border-color:var(--metal-kenar);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}
.btn-primary:hover{background:var(--metal-btn-hover)}
.btn-sm{padding:5px 12px;font-size:.8rem}
.btn-ghost{background:var(--surface);color:var(--muted);border:1px solid var(--border);box-shadow:0 2px 0 rgba(0,0,0,.06),0 6px 14px rgba(0,0,0,.08)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-success{background:var(--ok-soft);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 32%,var(--surface));box-shadow:0 2px 0 rgba(0,0,0,.05),0 5px 12px rgba(0,0,0,.07)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ── Inputs ── */
.input,select.input{width:100%;padding:9px 12px;border:1px solid var(--border-strong);border-radius:8px;font-size:.9rem;font-family:inherit;background:var(--surface);color:var(--navy)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:5px}
.field{margin-bottom:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--kart-golge)}
.card-pad{padding:20px}
.card-h{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-h h3{font-size:.92rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
/* KART BASLIKLARI BUYUK HARF (03.10.2026, kullanici: "Birlik listesi — bu tip
   basliklarin hepsini buyuk harflerle yapalim"). <html lang="tr"> oldugu icin
   "i" dogru "İ" oluyor. Acilir bolum basliklari da ayni tur. */
.katlanir-ad{text-transform:uppercase;letter-spacing:.04em}

/* ── Shell ── */
/* Kenar cubugunun genisligi TEK bir degiskende: hem izgara sutunu hem de
   kapatma dugmesinin yeri ondan okunuyor. Iki yerde ayri sayi tutulsaydi
   dugme kapanmada cubugun kenarindan kayardi. */
.shell{display:grid;grid-template-columns:var(--yan-genislik,250px) 1fr;height:100%;
  position:relative}
.yan-kapali .shell{--yan-genislik:66px}
.sidebar{background:linear-gradient(180deg,var(--yan-ust) 0%,var(--yan-alt) 100%);color:var(--yan-metin);display:flex;flex-direction:column;padding:0 12px 0;gap:2px;box-shadow:inset -1px 0 0 rgba(0,0,0,.3);overflow:hidden}
/* UST BANT (28.09.2026, kullanici istegi: menu ust cubugun alt cizgisinden,
   "Pano" basligiyla ayni hizadan baslasin). Menunun tepesinde ust cubukla
   ayni yukseklikte, ayni zeminde ve ayni alt cizgili bir bant (.yan-bant; icinde
   yararlanicinin logosu): iki kolon
   tek bir baslik seridi gibi okunuyor. Alt boslugu icerigin ust boslugu
   olculerek ayarli: acik menude FAVORILER yazisi, dar menude ilk ikon
   sayfa basligiyla ("Pano") ayni satirda. Sayfa
   seritleri (lisans, gelistirme) govdenin en ustune eklendigi icin hiza
   onlarla bozulmuyor. */
.yan-bant{flex:none;height:60px;margin:0 -12px 28px;padding:0 16px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--yan-ust) 0%,var(--yan-alt) 100%);
  border-bottom:1px solid rgba(0,0,0,.32)}
/* Bantta yararlanicinin logosu (28.09.2026: "musteri logosu sola uste, urun logosu ortada").
   Yukseklige gore olculuyor; --olcek marka.json'dan. .brand-markali'nin eski
   blok/dolgu kurali burada gecersiz. */
.yan-bant.brand-markali{display:flex;padding:0 16px}
.yan-bant .brand-sahip{width:auto;height:calc(30px * var(--olcek,1));max-width:100%}
/* Kaydırma yalnızca menüde: marka üstte, not altta sabit kalır. Menünün
   tamamını kaydırmak, ekran kısaldığında son kalemleri görünmez yapıyordu. */
#nav{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
#nav::-webkit-scrollbar{width:6px}
#nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
#nav::-webkit-scrollbar-track{background:transparent}
/* Kapali menude yanlara 5 piksel tasiyor (.yan-kapali .nav-sarmal, asagida);
   acik satir menude gerek yok. */
.nav-sarmal{position:relative;flex:1 1 auto;min-height:0;display:flex}
.nav-sarmal::after{content:'';position:absolute;left:0;right:0;bottom:0;height:26px;
  background:linear-gradient(180deg,transparent 0%,var(--yan-alt) 90%);pointer-events:none;
  opacity:0;transition:opacity .2s}
.nav-sarmal.tasiyor::after{opacity:1}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 14px;color:#fff}
.brand .logo{width:34px;height:34px;border-radius:9px;background:var(--metal-icon);display:grid;place-items:center;font-weight:800;color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 -2px 0 rgba(0,0,0,.25) inset,0 3px 6px rgba(0,0,0,.4)}
.brand .logo svg{width:20px;height:20px;display:block}
.brand b{font-size:1.08rem;letter-spacing:-.01em;display:block}
.brand small{display:block;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8892a3;margin-top:-2px}
/* QTeşvik logosu (19.10.2026): satış sitesindeki yatay logo, bant koyu olduğu
   için beyaz yazılı sürüm. Dar menüde yalnız yuvarlak "Q" simgesi. */
.yan-bant .brand-tam{display:block;height:34px;width:auto;max-width:100%}
.yan-bant .brand-simge{display:none;width:30px;height:30px;padding:3px;border-radius:50%;background:#fff;box-sizing:content-box}
.yan-kapali .yan-bant .brand-tam{display:none}
.yan-kapali .yan-bant .brand-simge{display:block}
/* Menu yazilari ince (500) ve hafif kabartma: koyu zeminde alta dusen
   golge yaziyi bir tik one cikarir (26.09.2026, kullanici istegi). 500
   agirligi index.html'deki Nunito baglantisinda yuklu. */
/* GRUP BASLIGI (28.09.2026, kullanici istegi: "ortalasak, daha okunur buyuk
   harflerle, acilir kapanir olsunlar"). Ortada, iki yaninda ince cizgi, bir
   dugme: basinca grup katlanir. Ok acikken asagi, kapaliyken saga bakar.
   Kapali grup secili sayfayi iceriyorsa baslik vurgu renginde. */
.nav-group-title{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border:0;background:none;cursor:pointer;font-family:inherit;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a3aec0;
  padding:12px 2px 6px;text-shadow:0 1px 0 rgba(0,0,0,.4);transition:color .13s}
.nav-group-title::before,.nav-group-title::after{content:"";flex:1 1 0;height:1px;background:rgba(255,255,255,.1)}
/* Harf araligi son harften sonra da bosluk birakiyor; ortalama kaymasin. */
.nav-group-title span{margin-right:-.14em}
.nav-group-title:hover{color:#fff}
.nav-group-title:focus-visible{outline:2px solid var(--vurgu-1);outline-offset:2px;border-radius:6px}
.nav-group-title.etkin-icerir{color:#b8c6ff}
.nav-grup-ok{width:11px;height:11px;flex:none;opacity:.75;transition:transform .2s}
/* Ok yazinin sagina ekleniyor; solda ayni genislikte bos bir oge yazinin
   TAM ortada kalmasini sagliyor (yoksa 14 px sola kayiyordu). */
.nav-grup-denge{width:11px;height:1px;flex:none}
.nav-group-title[aria-expanded="false"] .nav-grup-ok{transform:rotate(-90deg)}
.nav-group-title:first-child{padding-top:4px}
/* Katlanma: tek satirlik izgara 1fr → 0fr (yukseklik "auto"ya canlandirilamiyor).
   Kapaliyken kutular gizli (klavyeyle de ulasilmasin), acilirken kirpili. */
.nav-grup-govde{display:grid;grid-template-rows:1fr;transition:grid-template-rows .22s ease}
.nav-grup-govde>.nav-kutular{min-height:0}
.nav-grup-govde.kapali{grid-template-rows:0fr}
.nav-grup-govde.kapali>.nav-kutular,.nav-grup-govde.aciliyor>.nav-kutular{overflow:hidden}
.nav-grup-govde.kapali>.nav-kutular{visibility:hidden;transition:visibility 0s .22s}
/* Surukleme sirasinda Favoriler kapali olsa da acik: birakilacak yer gorunsun. */
#nav.surukleniyor .nav-grup-govde.fav{grid-template-rows:1fr}
#nav.surukleniyor .nav-grup-govde.fav>.nav-kutular{overflow:visible;visibility:visible}
@media (prefers-reduced-motion:reduce){.nav-grup-govde,.nav-grup-ok{transition:none}}
/* SATIR MENU (29.09.2026, kullanici istegi: "menu acikken eski halinde olsun,
   kapaliyken simdiki gibi kalsin"). Acik menude her sayfa bir satir: solda
   renkli kare ikon, yaninda adi. 26.09'daki kutucuk dizisi (ikon ustte, adi
   altinda, uc sutun) acik menuden kalkti; yumusak renk ve ince yazi kaldi
   (ikisi de menu satir duzenindeyken istenmisti). Kap yine bir izgara, tek
   sutun: kapali menu ayni kabi kullaniyor. */
.nav-kutular{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.nav-item{position:relative;display:flex;align-items:center;gap:9px;
  padding:4px 10px;border-radius:9px;color:#d3d9e4;font-size:.9rem;line-height:1.2;font-weight:500;cursor:pointer;
  transition:background .13s,color .13s,box-shadow .13s;border:none;background:none;font-family:inherit;
  width:100%;min-width:0;text-align:left;
  text-shadow:0 1px 0 rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.28)}
.nav-ad{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* FAVORI YILDIZI satirin sag ucunda, yalniz uzerine gelince (alt menu oku
   varsa onun sagi). DOM'da ilk cocuk; siraya order ile giriyor. Dokunmatikte
   "uzerine gelme" yok; orada hep soluk gorunur. Favorideki satirin yildizi dolu. */
.nav-yildiz{order:3;flex:none;width:18px;height:18px;display:grid;place-items:center;
  border-radius:5px;color:#aab3c2;opacity:0;cursor:pointer;
  transition:opacity .13s,color .13s,background .13s}
.nav-yildiz svg{width:12px;height:12px;display:block}
.nav-item:hover .nav-yildiz,.nav-item:focus-visible .nav-yildiz{opacity:.8}
.nav-yildiz:hover{opacity:1;color:#fbbf24;background:rgba(0,0,0,.18)}
.nav-yildiz.dolu{color:#fbbf24}
.nav-yildiz.dolu svg{fill:currentColor}
.nav-item.active .nav-yildiz:not(.dolu){color:#fff}
@media (hover:none){.nav-yildiz{opacity:.55}}
/* SURUKLE-BIRAK. Tasinan kutu soluk; bos Favoriler yalniz surukerken
   gorunur ve birakilacak yer oldugu belli olsun diye kesik cizgili. */
.nav-item.suruklenen{opacity:.35}
#nav:not(.surukleniyor) .nav-fav-bos{display:none}
#nav:not(.surukleniyor) .nav-fav-bos + .nav-fav-bos + .nav-group-title{padding-top:2px}
#nav.surukleniyor .nav-kutular[data-grup="favori"]{outline:1px dashed rgba(251,191,36,.45);
  outline-offset:2px;border-radius:12px;background:rgba(251,191,36,.05)}
.nav-fav-ipucu{grid-column:1/-1;padding:12px 8px;text-align:center;font-size:.7rem;color:#aab3c2}
.nav-kutular[data-grup="favori"]:has(.nav-item) .nav-fav-ipucu{display:none}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:linear-gradient(135deg,var(--vurgu-1) 0%,var(--vurgu-2) 100%);color:#fff;box-shadow:0 2px 8px rgba(79,110,247,.3);
  text-shadow:0 1px 0 rgba(0,0,0,.28),0 2px 4px rgba(0,0,0,.16)}
/* IKONLAR CRM'DEKI GIBI (26.09.2026, kullanici istegi: "komple CRM'deki
   ikonlar gibi olsun, bir tik kucuk ve renk uyumlu"). CRM ana sayfasindaki
   kutucuklarin ikonu (60 px, 145 derece egimli dolu kare, icinde beyaz
   cizgi ikon) menude 30 px. Her sayfanin kendi rengi var; renkler CRM'in
   paletinden, QTeşvik'in mavi-mor vurgusuyla ayni aileden secildi. Onceden
   ikonlar bilerek soluk bir tabaktaydi ("dikkat basliga"); kullanici canli
   hali istedi. Renk tanimsiz yeni bir sayfa arduvaz griye duser.
   Ardindan "renkler daha soft olsun": sayfa renkleri ayni kalir, kare
   cizilirken menu zeminine yakin bir griyle karistirilir (oklab'da, ton
   korunur, doygunluk duser). Yumusaklik tek yerden: --yum (renk payi). */
/* MENU SIMGESI STILLERI (03.10.2026, kullanici: "tema seciyoruz ya, orada
   birkac tane de buton secenegi olsa"; ardindan "varsayilan renkliler olsun").
   Profil cekmecesinde temanin altinda secilir, kisi basina sunucuda saklanir
   (kullanicilar.ikon_stili), acilista index.html'deki satir <html data-ikon>
   ozniteligini CSS'ten once koyar. Varsayilan (oznitelik yok) = RENKLI.
   Ayni kurallar cekmecedeki onizlemeyi de cizer (.ikon-ornek[data-ikon] .i[data-s]).
   Gecmis: renkli (26.09) → altin/bronz/bakir (02.10, "cok bogdu") → gumus +
   parlama, koyu, beyaz kenarsiz (03.10: "cok acik", "daha net, cevresindeki
   beyazlik olmasin") → hepsi secenek, varsayilan renkli. */

/* Renkli (varsayilan): CRM'deki gibi sayfa basina renk, menu zeminine yakin
   griyle yumusatilmis (--yum; oklab'da, ton korunur, doygunluk duser). Renk
   tanimsiz yeni bir sayfa arduvaz griye duser. */
.nav-item .i,.ikon-ornek .i{--c1:#475569;--c2:#94a3b8;--yum:64%;position:relative;overflow:hidden;
  width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,color-mix(in oklab,var(--c1) var(--yum),#6b7486) 0%,
    color-mix(in oklab,var(--c2) var(--yum),#9aa3b3) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 1px 4px rgba(0,0,0,.22);
  transition:transform .13s,box-shadow .13s}
.nav-item:hover .i{transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 3px 8px rgba(0,0,0,.28)}
.nav-item .i svg,.ikon-ornek .i svg{position:relative;z-index:1;filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
/* Etkin satir zaten mavi-mor; kare rengini korur, beyaz halkayla one cikar. */
.nav-item.active .i{box-shadow:0 0 0 2px rgba(255,255,255,.55),0 1px 4px rgba(0,0,0,.22)}
.nav-item .i svg{width:16px;height:16px}
/* Uzerine gelince kareden bir parilti gecer (butun stillerde). */
.nav-item .i::after{content:'';position:absolute;inset:-40%;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 58%);
  transform:translateX(-75%);transition:transform .55s ease}
.nav-item:hover .i::after{transform:translateX(75%)}
@media (prefers-reduced-motion:reduce){.nav-item .i::after{display:none}}
.nav-item[data-sayfa="pano"] .i,.ikon-ornek .i[data-s="pano"]{--c1:#6366f1;--c2:#818cf8}
.nav-item[data-sayfa="dosyalar"] .i,.ikon-ornek .i[data-s="dosyalar"]{--c1:#0ea5e9;--c2:#38bdf8}
.nav-item[data-sayfa="plan"] .i,.ikon-ornek .i[data-s="plan"]{--c1:#8b5cf6;--c2:#a78bfa}
.nav-item[data-sayfa="posta"] .i{--c1:#0891b2;--c2:#22d3ee}
.nav-item[data-sayfa="mutabakat"] .i{--c1:#10b981;--c2:#34d399}
.nav-item[data-sayfa="yukumluluk"] .i{--c1:#f59e0b;--c2:#fbbf24}
.nav-item[data-sayfa="hatirlatma"] .i{--c1:#ea580c;--c2:#fb923c}
.nav-item[data-sayfa="ajanda"] .i{--c1:#db2777;--c2:#f472b6}
.nav-item[data-sayfa="panorama"] .i{--c1:#0d9488;--c2:#2dd4bf}
.nav-item[data-sayfa="rapor"] .i{--c1:#ef4444;--c2:#f87171}
.nav-item[data-sayfa="liste"] .i{--c1:#2563eb;--c2:#60a5fa}
.nav-item[data-sayfa="musteri"] .i{--c1:#7c3aed;--c2:#a78bfa}
.nav-item[data-sayfa="ayarlar"] .i{--c1:#475569;--c2:#94a3b8}
.nav-item[data-sayfa="destekkaydi"] .i{--c1:#ea580c;--c2:#fb923c}

/* Gumus: koyu cilali gumus, sol ustte kisik isik, dar capraz yansima, koyu
   keskin kenar; secili satirda beyaz halka yok. */
html[data-ikon="gumus"] .nav-item .i,.ikon-ornek[data-ikon="gumus"] .i{
  background:
    radial-gradient(110% 70% at 18% 0%,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 50%),
    linear-gradient(130deg,rgba(255,255,255,0) 44%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 56%),
    linear-gradient(150deg,#a2aab5 0%,#6c7584 52%,#434a56 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.38) inset,0 1px 0 rgba(255,255,255,.14) inset,0 1px 3px rgba(0,0,0,.35)}
html[data-ikon="gumus"] .nav-item:hover .i{box-shadow:0 0 0 1px rgba(0,0,0,.38) inset,0 1px 0 rgba(255,255,255,.18) inset,0 3px 7px rgba(0,0,0,.38)}
html[data-ikon="gumus"] .nav-item.active .i{box-shadow:0 0 0 1px rgba(0,0,0,.38) inset,0 1px 3px rgba(0,0,0,.35)}
html[data-ikon="gumus"] .nav-item .i svg,.ikon-ornek[data-ikon="gumus"] .i svg{filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}

/* Metal stilleri ortak gradyani: --c2 (acik) → --c1 (koyu), ustte parlama. */
html[data-ikon="metal"] .nav-item .i,.ikon-ornek[data-ikon="metal"] .i,
html[data-ikon="altin"] .nav-item .i,.ikon-ornek[data-ikon="altin"] .i,
html[data-ikon="fume"] .nav-item .i,.ikon-ornek[data-ikon="fume"] .i{
  background:
    linear-gradient(145deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 38%,rgba(255,255,255,0) 52%),
    linear-gradient(145deg,var(--c2) 0%,var(--c1) 62%,color-mix(in oklab,var(--c1) 78%,#000) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 -1px 0 rgba(0,0,0,.28) inset,0 1px 4px rgba(0,0,0,.28)}
html[data-ikon="metal"] .nav-item .i svg,html[data-ikon="altin"] .nav-item .i svg,html[data-ikon="fume"] .nav-item .i svg,
.ikon-ornek:is([data-ikon="metal"],[data-ikon="altin"],[data-ikon="fume"]) .i svg{filter:drop-shadow(0 1px 0 rgba(0,0,0,.32))}

/* Altin / bronz / bakir: komsu satirlar farkli aileden. */
html[data-ikon="metal"] .nav-item .i,.ikon-ornek[data-ikon="metal"] .i{--c1:#5e4128;--c2:#a77a4c}
html[data-ikon="metal"] :is(.nav-item[data-sayfa="pano"],.nav-item[data-sayfa="liste"]) .i,
.ikon-ornek[data-ikon="metal"] .i[data-s="pano"]{--c1:#94701a;--c2:#e0b955}
html[data-ikon="metal"] .nav-item[data-sayfa="dosyalar"] .i,.ikon-ornek[data-ikon="metal"] .i[data-s="dosyalar"]{--c1:#7f4f24;--c2:#c88a4a}
html[data-ikon="metal"] .nav-item[data-sayfa="plan"] .i,.ikon-ornek[data-ikon="metal"] .i[data-s="plan"]{--c1:#8a4523;--c2:#d0804f}
html[data-ikon="metal"] :is(.nav-item[data-sayfa="posta"],.nav-item[data-sayfa="musteri"]) .i{--c1:#9a7d42;--c2:#e2cb8f}
html[data-ikon="metal"] .nav-item[data-sayfa="yukumluluk"] .i{--c1:#8c4a3c;--c2:#d4917c}
html[data-ikon="metal"] :is(.nav-item[data-sayfa="rapor"],.nav-item[data-sayfa="hatirlatma"]) .i{--c1:#6e3218;--c2:#b56a3e}
html[data-ikon="metal"] .nav-item[data-sayfa="ajanda"] .i{--c1:#7a611f;--c2:#c7a345}
html[data-ikon="metal"] .nav-item[data-sayfa="panorama"] .i{--c1:#8f6234;--c2:#d6a46a}

/* Tek altin. */
html[data-ikon="altin"] .nav-item .i,.ikon-ornek[data-ikon="altin"] .i{--c1:#a67c1b;--c2:#f4d77c}

/* Fume kare, altin simge. */
html[data-ikon="fume"] .nav-item .i,.ikon-ornek[data-ikon="fume"] .i{--c1:#363c47;--c2:#7d8696;color:#f2cf6b}

/* Cekmecedeki onizleme: uc minik kare. */
.ikon-izgara{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:6px}
.ikon-ornek{display:inline-flex;gap:3px;flex:none}
.ikon-ornek .i{width:18px;height:18px;border-radius:5px}
.ikon-ornek .i svg{width:11px;height:11px}
.cekmece-alt-baslik{margin:14px 0 2px;font-size:.74rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
.sidebar .spacer{flex:1}
.side-note{flex:none;font-size:.7rem;line-height:1.5;color:var(--yan-soluk);padding:8px 12px 12px;
  border-top:1px solid rgba(255,255,255,.07);margin-top:4px;display:flex;align-items:center;
  justify-content:space-between;gap:8px;flex-wrap:wrap}

.main-wrap{display:flex;flex-direction:column;min-width:0;overflow:auto}
.topbar{height:60px;background:linear-gradient(180deg,var(--yan-ust) 0%,var(--yan-alt) 100%);border-bottom:1px solid rgba(0,0,0,.32);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:26px;padding:0 22px;position:sticky;top:0;z-index:5}
.topbar .sp{flex:1}
/* Sag ogeler (musteri secici + kullanici). 1fr sutunun alt siniri icerigin
   kendisi: sigmazsa sutun buyur, orta sutundaki marka sola kayar. BU YUZDEN
   min-width:0 YOK — o, alt siniri sifirliyor ve marka sagdakilerin ustune
   biniyordu (1366 px'de olculdu). */
.ust-sag{display:flex;align-items:center;justify-content:flex-end;gap:14px}
/* Cubuk daralinca once Quality yazisi, daha da daralinca marka gider: sag
   ogeler is gorur, marka susup yer acar. Esikler cubugun KENDI genisligine
   gore (menu acik/dar farkini kendiliginden hesaba katiyor). Telefonun kendi
   kurali dosyanin sonundaki MOBIL bolumunde. */
.topbar{container:ust / inline-size}
@media (min-width:641px){
  @container ust (max-width:600px){ .topbar .brand{display:none} }
}
/* MARKA UST CUBUKTA (28.09.2026): yatay — logo | cizgi | Quality. Logo
   yuksekligine gore olculuyor (cubuk 60 px); --olcek marka.json'dan. */
.topbar .brand{padding:0;gap:10px}
.topbar .brand-urun{height:34px;width:auto}
.tenant{display:flex;align-items:center;gap:9px}
/* TEK ANAHTAR: `hidden`. Yazar stilindeki `display:flex`, tarayıcının
   `[hidden]{display:none}` kuralını eziyor — element "gizli" görünüp ekrana
   çizilmeye devam ediyordu. Aynı tuzağa ortam şeridinde de düşülmüştü.
   Görünürlüğü JS'te ikinci bir sınıfla yönetmek yerine kuralı burada
   düzeltmek, anahtarın tek kalmasını sağlıyor. */
.tenant[hidden]{display:none}
.tenant .label{margin:0;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.tenant select{min-width:230px;padding:6px 10px;font-size:.85rem;font-weight:600}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--metal-icon);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.content{padding:24px}
.page-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.page-h h1{font-size:1.5rem;font-weight:800}
.page-h .sub{color:var(--muted);font-size:.9rem;margin-top:2px}

/* ── KPI ── */
/* Sutun sayisini app.js hesapliyor (kpiDenkle): satirlari DENGELEYEREK.
   Once auto-fit izgaraydi ve 9 kutucuk 6+3 diye sariyor, ikinci satirin sagi
   uc kutuluk BOS kaliyordu. Sonra esnek satir denendi: delik kapandi ama son
   satirdaki iki kutu 694'er piksele sisti — kotusu. Dengeleme ikisini de
   cozuyor: 9 kutucuk 5+4 oluyor, kutular ESIT genislikte kaliyor ve en fazla
   tek bir bos yer kaliyor.
   Sutun sayisi gelmezse auto-fit'e dusuyor; JS calismasa da ekran bozulmaz. */
.kpi-grid{display:grid;gap:12px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(146px,1fr))}
.kpi{padding:13px 14px}
/* Etikete IKI SATIRLIK yer ayriliyor. "Bekleyen tahmini iade" gibi uzun
   basliklar ikinci satira tasiyor ve o kutucukta rakam 19 piksel asagi
   kayiyordu: ayni satirdaki buyuk rakamlar ayni cizgide durmuyordu. Goz bir
   satir rakami tararken hizadaki bu kaymayi hemen yakaliyor. Sabit yer,
   baslik bir satir da olsa ikisi de olsa rakami ayni yere koyuyor. */
.kpi>.k{font-size:.71rem;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;line-height:1.55;min-height:3.1em;
  display:flex;align-items:flex-end}
.kpi>.v{font-size:1.7rem;font-weight:800;margin-top:4px;color:var(--accent-ink);font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
/* Para tutarlari sayilardan uzun; kart genisligine sigsin diye bir kademe kucuk. */
.kpi.para>.v{font-size:1.45rem}
/* Para kartlari kirpilmasin: "168,3 milyon TL" buyuk puntoda dar sutuna
   sigmiyor ve nowrap yuzunden sessizce kesiliyordu. Sayi sutun genisligine
   gore kuculur; kesilmis bir rakam yanlis rakamdir. */
.kpi.para>.v{font-size:1rem}
/* Alt aciklamaya da iki satirlik yer. Aksi halde aciklamasi tasan TEK bir
   kutucuk butun satiri 19 piksel uzatiyor ve iki satir yan yana farkli
   boyda duruyordu. */
.kpi>.s{font-size:.71rem;color:var(--faint);margin-top:2px;line-height:1.5;min-height:3em}
.kpi.danger>.v{color:var(--danger)}
.kpi.warn>.v{color:var(--warn)}
.kpi.ok>.v{color:var(--ok)}

/* ── Tablo ── */
/* KONUMLANDIRILMIŞ: içindeki position:absolute öğeler (ekran okuyucu
   etiketleri gibi) buraya göre konumlansın ve kaydırma kabından KAÇMASIN.
   Kaçtıklarında belgeyi kendi genişliklerine zorluyorlar: mobilde Dosyalar
   ekranı 390 px yerine 993 px oluyordu ve sayfa yana kayıyordu. */
.tablewrap{position:relative;overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.88rem}
.table th{text-align:left;padding:11px 16px;background:var(--surface-2);color:var(--muted);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--border);white-space:nowrap}
.table td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:top}
.table tr:last-child td{border-bottom:none}
.table tbody tr{cursor:pointer}
.table tbody tr:hover{background:var(--surface-2)}
.table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dosya-no{font-family:ui-monospace,'Cascadia Code',monospace;font-size:.76rem;font-weight:700;background:var(--surface-2);color:var(--navy);padding:2px 8px;border-radius:6px;white-space:nowrap}

/* ── Dosya satırı ──
   Liste 250 satıra kadar çıkıyor; okunabilirliği taşıyan şey renk kodu.
   Her destek kalemi kendi rengini alır (satır --kalem değişkeniyle gelir),
   sol şerit ve kalem rozeti o renkten türer. Böylece "hangi kalemler var"
   sorusu tabloyu okumadan cevaplanır. */
.table tbody tr[data-dosya] td{padding-top:10px;padding-bottom:10px}
.table tbody tr[data-dosya] td:first-child{border-left:3px solid var(--kalem,var(--border-strong))}
.table tbody tr[data-dosya]:hover{background:color-mix(in srgb,var(--kalem,#8a919d) 7%,var(--surface))}
.kalem-pil{display:inline-flex;align-items:baseline;gap:5px;padding:2px 9px;border-radius:20px;
  font-size:.72rem;font-weight:800;letter-spacing:.01em;color:var(--kalem);
  background:color-mix(in srgb,var(--kalem) 11%,#fff);
  border:1px solid color-mix(in srgb,var(--kalem) 26%,#fff);white-space:nowrap}
.kalem-pil i{font-style:normal;font-weight:600;opacity:.65;font-size:.67rem}
.kur-ilerleme{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;margin-top:10px}
.kur-ilerleme i{display:block;height:100%;background:var(--accent);border-radius:5px;transition:width .3s}
.kur-kod{font-family:ui-monospace,'Cascadia Code',monospace;font-weight:800;font-size:.86rem}
.kur-deger{font-variant-numeric:tabular-nums;font-weight:700}
.kur-eski{color:var(--caution)}
.kur-arama{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:16px 20px}
.kur-arama .field{margin:0}
.kur-satir{margin:-4px 0 14px;padding:9px 12px;border-radius:8px;background:var(--surface-2);
  border:1px solid var(--border);font-size:.82rem;color:var(--muted);line-height:1.45}
.kur-satir b{color:var(--navy);font-variant-numeric:tabular-nums}
.marka-pil{padding:2px 8px;border-radius:20px;font-size:.69rem;font-weight:800;letter-spacing:.03em;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border);white-space:nowrap}

/* ── Rozetler ── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:.74rem;font-weight:700;white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.caution{background:var(--caution-soft);color:var(--caution)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.danger{background:var(--danger-soft);color:var(--danger)}
.badge.accent{background:var(--accent-soft);color:var(--accent-ink)}
.badge.neutral{background:var(--surface-2);color:var(--muted)}
/* Hedef pazar kendi tonunda. Önce `neutral` idi ve yükümlülükle BİREBİR aynı
   gri pili paylaşıyordu: tür yazıyla ayrılıyor ama görülmüyordu. Soğuk ve
   düşük doygunlukta — severity paletine (warn/danger) girmiyor, çünkü rozet
   türü söylüyor, aciliyeti değil; aciliyet soldaki gün bloğunda. */
.badge.hedef-pazar{background:var(--pazar-soft);color:var(--pazar-ink)}
/* Satır sonundaki rozetler. `flex:none` ŞART: .uyari bir flex satır ve rozet
   son öğe; esnek bırakılınca daralıp iki satıra kırılıyordu (Bulgaristan'da
   "hedef pazar / son yıl" alt alta düşüyordu, Doha'da düşmüyordu — genişliğe
   göre değişen, tutarsız bir kırılma). */
.uyari .rozetler{display:flex;align-items:center;gap:6px;flex:none}

/* Çekmecedeki tür süzgeci. Pano değişmiyor; ayrım yalnız burada. */
.cip-serit{display:flex;flex-wrap:wrap;gap:6px;padding:10px 18px 2px;border-bottom:1px solid var(--border)}
.cip{
  font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;
  padding:3px 11px;border-radius:20px;
  background:var(--surface-2);color:var(--muted);border:1px solid transparent;
}
.cip span{opacity:.7;margin-left:3px;font-variant-numeric:tabular-nums}
.cip:hover{border-color:var(--border)}
.cip.secili{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
.cip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Zaman bandı başlığı. Listenin sıralamasını bozmuyor, araya ayraç koyuyor. */
.bant-baslik{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 5px;
  font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);
}
.bant-baslik span{font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}

/* ── Limit çubuğu ── */
.limit-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.limit-bar{height:12px;border-radius:7px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border)}
.limit-fill{height:100%;border-radius:7px;background:linear-gradient(90deg,var(--vurgu-1),var(--vurgu-2));transition:width .4s}
.limit-legend{display:flex;gap:20px;margin-top:12px;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.limit-legend b{display:block;color:var(--navy);font-size:.95rem;font-variant-numeric:tabular-nums}

/* ── Uyarı listesi ── */
.uyari{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border);cursor:pointer}
.uyari:last-child{border-bottom:none}
.uyari:hover{background:var(--surface-2)}
.uyari .gun{width:62px;flex:none;text-align:center;font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums;line-height:1.1}
.uyari .gun small{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.75}
.uyari .gun.danger{color:var(--danger)} .uyari .gun.warn{color:var(--warn)}
.uyari .gun.caution{color:var(--caution)} .uyari .gun.ok{color:var(--muted)}
.uyari .ana{flex:1;min-width:0}
.uyari .ana b{display:block;font-size:.9rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uyari .ana span{font-size:.78rem;color:var(--muted)}
.empty{padding:28px 20px;text-align:center;color:var(--faint);font-size:.88rem}

/* ── Evrak listesi ── */
.evrak{list-style:none;margin:0;padding:0}
.evrak li{display:flex;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);align-items:flex-start}
.evrak li:last-child{border-bottom:none}
.evrak li.done{background:var(--ok-soft)}
.evrak input[type=checkbox]{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--vurgu-1);cursor:pointer}
.evrak .ad{flex:1;min-width:0}
.evrak .ad b{font-weight:700;font-size:.9rem}
.evrak .ad .k{display:block;font-size:.77rem;color:var(--muted);margin-top:2px}
.evrak .ad .n{display:block;font-size:.77rem;color:var(--faint);margin-top:2px;font-style:italic}

/* ── Notlar ── */
.notlar{list-style:none;margin:0;padding:0}
.notlar > li{padding:10px 20px;border-bottom:1px solid var(--border);font-size:.85rem;color:var(--muted);line-height:1.5;position:relative;padding-left:36px}
.notlar > li:last-child{border-bottom:none}
.notlar > li::before{content:'§';position:absolute;left:20px;top:10px;color:var(--accent);font-weight:800}

/* ── Modal ── */
/* ORTALANAN PENCERE şeridin altına girmesin: şeridin kapladığı pay
   (kaydırma çubuğu + etiket genişliği) app.js ▸ seritYerlestir içinde
   ölçülüp --serit-pay ile veriliyor. Şerit yokken 0.

   SAĞ KENARA YAPIŞIK ÇEKMECELER BU PAYI ALMIYOR (drawer-panel, cekmece):
   onlar kenara yapışık durmalı, içeri çekilince arada boşluk kalıyor ve
   panel havada duruyor gibi görünüyor. Zaten ikisi de şeridin ÜSTÜNDE
   (z-index 61 > 60), yani etiketlerin altına hiç girmiyorlar. */
.overlay{position:fixed;inset:0;background:rgba(15,22,41,.45);display:grid;place-items:center;z-index:900;
  padding:24px;padding-right:calc(24px + var(--serit-pay,0px))}
.modal{background:var(--surface);border-radius:14px;width:min(720px,100%);max-height:90vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.modal-h{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;background:var(--surface);z-index:1}
.modal-h h3{font-size:1.05rem}
.modal-b{padding:22px}
.modal-f{padding:16px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;position:sticky;bottom:0;background:var(--surface)}
.x{background:none;border:none;font-size:1.5rem;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.x:hover{color:var(--navy)}

/* ── Hesap kutusu ── */
.hesap{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.hesap .satir{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;color:var(--muted)}
.hesap .satir b{color:var(--navy);font-variant-numeric:tabular-nums}
.hesap .sonuc{border-top:1px dashed var(--border-strong);padding-top:8px;font-size:.95rem;font-weight:800;color:var(--navy)}
.hesap .sonuc b{color:var(--ok);font-size:1.15rem}

/* ── Kural seti ── */
.kural-kalem{margin-bottom:16px}
.kural-kalem .card-h .badge{margin-left:auto}
.kural-genel > li{display:flex;gap:14px;padding:12px 20px;border-bottom:1px solid var(--border);font-size:.86rem;line-height:1.5}
/* .notlar'ın § imi sol 20px'te duruyor; kural-genel sol boşluğu kaldırdığı için
   im etiketin üstüne biniyordu. Bu listede etiketin kendisi zaten ayraç. */
.kural-genel > li::before{content:none}
.kural-genel > li:last-child{border-bottom:none}
.kural-genel b{flex:none;width:150px;color:var(--navy)}
.kural-genel span{color:var(--muted)}
.sure-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0;border-top:1px solid var(--border)}
.sure-grid div{padding:14px 18px;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.sure-grid .n{font-size:1.35rem;font-weight:800;color:var(--accent-ink);line-height:1.1}
.sure-grid .a{font-size:.86rem;font-weight:700;margin-top:2px}
.sure-grid .d{font-size:.76rem;color:var(--muted);margin-top:3px;line-height:1.45}

/* TABLET ARALIĞI. Alt sınır 641: 640 ve altında kenar çubuğu bir çekmece
   (dosyanın sonundaki MOBİL bölümü) ve oradaki etiketler GÖRÜNÜR olmalı.

   ÇUBUĞU DARALTAN KURALLAR BURADAN KALKTI. Burada kendi daraltma kuralları
   vardı (`grid-template-columns:64px`, `.brand b` gizle) ve marka bloğu
   değişince güncellenmedi: müşterinin logosu 64 px'lik şeride sığmayıp
   taşıyordu. Artık daraltmayı `yan-kapali` yapıyor — sınıfı bu genişlikte
   <head>'deki betik koyuyor — ve daraltmanın bütün ayrıntıları TEK YERDE,
   o sınıfın kurallarında duruyor. */
@media (max-width:900px) and (min-width:641px){
  .grid2{grid-template-columns:1fr}
  .tenant select{min-width:150px}
}

/* ── Eksiklik bildirimi ── */
.btn-warn{background:var(--caution-soft);color:var(--caution);border:1px solid color-mix(in srgb,var(--caution) 32%,var(--surface));box-shadow:0 2px 0 rgba(0,0,0,.05),0 5px 12px rgba(0,0,0,.07)}
.btn-warn:hover{background:color-mix(in srgb,var(--caution-soft) 82%,var(--caution))}
.eksiklik-serit{display:flex;align-items:center;gap:16px;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 30%,var(--surface));
  border-left:4px solid var(--warn);border-radius:10px;padding:14px 18px;margin-bottom:14px}
.eksiklik-serit>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.eksiklik-serit b{font-size:.9rem;color:var(--warn)}
.eksiklik-serit span{font-size:.82rem;color:var(--muted);line-height:1.45}
.eksiklik-serit span b{color:var(--navy);font-size:.82rem}

/* ── Ek belgeler ── */
.ekler{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.ek{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:7px;padding:3px 4px 3px 9px;font-size:.78rem;max-width:100%}
.ek a{color:var(--accent-ink);font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.ek a:hover{text-decoration:underline}
.ek small{color:var(--faint);font-variant-numeric:tabular-nums;flex:none}
.ek-x{background:none;border:none;color:var(--faint);font-size:1rem;line-height:1;cursor:pointer;padding:1px 5px;border-radius:5px;flex:none}
.ek-x:hover{background:var(--danger-soft);color:var(--danger)}
.ek-ekle{background:none;border:1px dashed var(--border-strong);color:var(--muted);font-family:inherit;
  font-size:.76rem;font-weight:600;padding:4px 10px;border-radius:7px;cursor:pointer}
.ek-ekle:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.evrak li.drop{background:var(--accent-soft);outline:2px dashed var(--accent);outline-offset:-3px}

/* ── Danışman görünümü ── */
.firma-et{color:var(--accent-ink);font-weight:800}
.satir-uyari{margin-top:6px;font-size:.76rem;color:var(--warn);background:var(--warn-soft);
  border:1px solid color-mix(in srgb,var(--warn) 30%,var(--surface));border-radius:6px;padding:4px 8px;line-height:1.4}
.eksiklik-serit.kural{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,var(--surface));border-left-color:var(--danger)}
.eksiklik-serit.kural b{color:var(--danger)}

/* ── Hedef pazar saatleri ── */
.pazar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;
  border-top:1px solid var(--border)}
.pazar{padding:14px 20px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);
  display:flex;flex-direction:column;gap:7px}
.pazar-ust{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pazar-ust b{font-size:.92rem;font-weight:700}
.pazar-bar{height:8px;border-radius:5px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}
.pazar-fill{height:100%;border-radius:5px;transition:width .4s}
.pazar-fill.ok{background:linear-gradient(90deg,var(--vurgu-1),var(--vurgu-2))}
.pazar-fill.warn{background:linear-gradient(90deg,#d97706,#f59e0b)}
.pazar-fill.danger{background:linear-gradient(90deg,#dc2626,#ef4444)}
.pazar-not{font-size:.76rem;color:var(--muted);line-height:1.45}

/* ── Alt limit ve kural etiketleri ── */
.limit-fill.alt{background:linear-gradient(90deg,#b7791f,#d9a441)}
.kalem-etiketler{display:flex;flex-wrap:wrap;gap:8px 20px;padding:11px 20px;
  background:var(--surface-2);border-bottom:1px solid var(--border);font-size:.78rem;color:var(--muted)}
.kalem-etiketler b{color:var(--navy);font-weight:700}
.kalem-etiketler i{font-style:normal;font-family:ui-monospace,'Cascadia Code',monospace;
  font-size:.72rem;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:5px}
.kural-genel i.madde{font-style:normal;font-family:ui-monospace,'Cascadia Code',monospace;
  font-size:.72rem;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:5px}

/* ── Yükümlülük satırı ── */
.uyari.tamam{opacity:.62}
.uyari .gun.ok{color:var(--ok)}
.uyari .btn{flex:none}

/* ── Toplu aktarma ── */
.birak{border:2px dashed var(--border-strong);border-radius:12px;padding:38px 24px;text-align:center;
  cursor:pointer;background:var(--surface-2);transition:border-color .13s,background .13s;
  display:flex;flex-direction:column;gap:6px}
.birak:hover,.birak.etkin{border-color:var(--accent);background:var(--accent-soft)}
.birak b{font-size:1rem}
.birak span{font-size:.83rem;color:var(--muted)}
tr.satir-hatali{background:var(--danger-soft)}
tr.satir-hatali td{border-bottom-color:color-mix(in srgb,var(--danger) 30%,var(--surface))}
.side-sifirla{display:block;margin-top:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:#aeb7c6;font-family:inherit;font-size:.72rem;font-weight:600;padding:6px 10px;border-radius:7px;cursor:pointer;width:100%}
.side-sifirla:hover{background:rgba(255,255,255,.13);color:#fff}

/* ── Mutabakat ── */
.kontrol{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.kontrol:last-child{border-bottom:none}
.kontrol .im{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:.8rem;margin-top:1px}
.kontrol.ok .im{background:var(--ok-soft);color:var(--ok)}
.kontrol.uyari .im{background:var(--caution-soft);color:var(--caution)}
.kontrol.eksik .im{background:var(--danger-soft);color:var(--danger)}
.kontrol b{display:block;font-size:.86rem;font-weight:700}
.kontrol span{display:block;font-size:.82rem;color:var(--muted);line-height:1.45}
.kontrol .ayrinti{font-size:.78rem;color:var(--faint);margin-top:2px}

.kunye-liste{overflow-x:auto}
/* min-width 820 px pencereye sığmıyordu: TUTAR sütunu kesiliyor, kullanıcı
   yatay çubuğu bulup kaydırmak zorunda kalıyordu. Sütunlar daraltıldı ve dosya
   adı esneyen tek sütun yapıldı; tarih alanı tarayıcının takvim düğmesiyle
   birlikte sığacak kadar (128 px) bırakıldı. */
.kunye-satir{display:grid;
  grid-template-columns:minmax(120px,1.4fr) 116px 104px 128px 96px 76px;
  gap:6px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--border);
  min-width:0}
/* Zorunlu evrakta tür seçimi yok (evrağın kendisi türü söylüyor): beş sütun,
   kazanılan yer numara alanına. */
.kunye-satir.turesiz{grid-template-columns:minmax(120px,1.4fr) minmax(104px,1.1fr) 128px 96px 76px}
.kunye-satir:last-child{border-bottom:none}
.kunye-satir .input{padding:5px 8px;font-size:.8rem}
.kunye-ad{min-width:0}
.kunye-ad a{display:block;font-size:.84rem;font-weight:700;color:var(--accent-ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kunye-ad a:hover{text-decoration:underline}
.kunye-ad span{display:block;font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kunye-pb{font-size:.78rem;font-weight:600}
.kunye-baslik{background:var(--surface-2);font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);padding-top:8px;padding-bottom:8px}
.kunye-baslik div{white-space:nowrap}

/* ── Marka kırılımı ── */
.marka-liste{display:flex;flex-direction:column}
.marka{border-bottom:1px solid var(--border)}
.marka:last-child{border-bottom:none}
.marka-bas{display:flex;align-items:center;gap:14px;width:100%;padding:14px 20px;background:none;
  border:none;font-family:inherit;text-align:left;cursor:pointer;transition:background .12s}
.marka-bas:hover{background:var(--surface-2)}
.marka-bas .ok{color:var(--muted);font-size:.9rem;transition:transform .16s;flex:none}
.marka-bas .ok.acik{transform:rotate(90deg)}
.marka-ad{flex:1;min-width:0}
.marka-ad b{display:block;font-size:.95rem;font-weight:800;letter-spacing:-.01em}
.marka-ad span{display:block;font-size:.78rem;color:var(--muted);margin-top:1px}
.marka-sayilar{display:flex;gap:26px;flex:none}
.marka-sayilar span{font-size:.72rem;color:var(--muted);text-align:right;display:block}
.marka-sayilar b{display:block;font-size:1.05rem;font-weight:800;color:var(--navy);
  font-variant-numeric:tabular-nums;line-height:1.2}
.marka-govde{background:var(--surface-2);border-top:1px solid var(--border);padding-bottom:4px}
.marka-alt-baslik{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:14px 20px 8px}
.marka-govde .pazar-grid{background:var(--surface);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)}
.marka-govde .tablewrap{background:var(--surface);border-top:1px solid var(--border)}
.marka-not{padding:12px 20px;font-size:.8rem;color:var(--warn);background:var(--warn-soft);
  border-top:1px solid var(--border)}
@media (max-width:900px){.marka-sayilar{display:none}}
.marka-ipucu{margin:0;padding:10px 20px 0;font-size:.76rem;color:var(--faint)}

/* ── Müşteri tanımları ── */
.tanim-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 18px}
.tanim-izgara label{display:block;font-size:.78rem;font-weight:600;color:var(--muted)}
.tanim-izgara .input{margin-top:5px}
tr.ekle-satir{background:var(--surface-2)}
tr.ekle-satir td{padding-top:10px;padding-bottom:10px;vertical-align:middle}
tr.ekle-satir .input{padding:6px 9px;font-size:.82rem}
.onay{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--muted);font-weight:600}
.onay input{width:16px;height:16px;accent-color:var(--vurgu-1);cursor:pointer}

/* ── Rapor ── */
.rapor-cubuk{display:inline-block;width:120px;height:10px;border-radius:6px;background:var(--surface-2);
  border:1px solid var(--border);overflow:hidden;vertical-align:middle;margin-right:9px}
.rapor-dolgu{height:100%;border-radius:6px}
.rapor-dolgu.ok{background:linear-gradient(90deg,#16a34a,#4ade80)}
.rapor-dolgu.warn{background:linear-gradient(90deg,#d97706,#f59e0b)}
.rapor-dolgu.danger{background:linear-gradient(90deg,#dc2626,#ef4444)}
.rapor-oran{font-variant-numeric:tabular-nums;font-weight:700;font-size:.84rem}
.rapor-oran.ok{color:var(--ok)} .rapor-oran.warn{color:var(--caution)} .rapor-oran.danger{color:var(--danger)}
.rapor-not{margin:0;padding:14px 20px;font-size:.82rem;line-height:1.6;color:var(--muted);
  background:var(--surface-2);border-top:1px solid var(--border)}
/* Oran hücresi: çubuk ile yüzde aynı satırda kalmalı */
.table td:has(.rapor-cubuk){white-space:nowrap}

/* Başlangıç tarihi girilmemiş pazarlar — onlarca olabildiği için kart değil,
   müşteri başına tek satır + ülke rozetleri. */
.eksik-satir{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--border)}
.eksik-satir:first-of-type{border-top:0}
.eksik-firma{min-width:210px;font-weight:600;font-size:.88rem}
.eksik-firma span{display:block;font-weight:400;font-size:.76rem;color:var(--muted)}
.eksik-rozetler{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:2px 9px;border-radius:20px;font-size:.76rem;border:1px solid var(--border);color:var(--muted);background:var(--surface-2)}

/* Red analizi çapraz süzgeci: kalem/tedarikçi/marka/yıl birbirini daraltır */
.arama-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 20px}
/* .input kuralı width:100% veriyor; çubuktaki alanlar onu ezmezse her biri
   kendi satırına düşüyor ve arama çubuğu dört satır oluyordu. */
.arama-bar .input{width:auto}
.arama-bar .ara-giris{flex:1 1 260px;min-width:200px}
.arama-bar select.input{flex:0 0 auto;min-width:160px}
.arama-bar .btn{flex:0 0 auto}
.arama-not{padding:0 20px 14px;font-size:.82rem;color:var(--muted)}
.arama-not:empty{display:none}

/* ── Sayfa gezinme ── */
.sayfa-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);flex-wrap:wrap}
.sayfa-bar.alt{border-bottom:none;border-top:1px solid var(--border)}
.sayfa-bilgi{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.sayfa-bilgi b{color:var(--navy)}
.sayfa-dugmeler{display:flex;align-items:center;gap:4px}
.sayfa-d{min-width:32px;height:30px;padding:0 8px;border-radius:7px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted);font-size:.82rem;font-weight:700;cursor:pointer;
  font-family:inherit;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;
  justify-content:center;transition:all .12s}
.sayfa-d:hover:not(:disabled){background:var(--accent-soft);color:var(--accent-ink);border-color:var(--border-strong)}
.sayfa-d:disabled{opacity:.4;cursor:default}
.sayfa-d.secili{background:var(--metal-btn);border-color:var(--metal-kenar);color:#fff}
.sayfa-uc{color:var(--faint);padding:0 2px;font-size:.82rem}
.sayfa-boyut{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--muted)}
.sayfa-boyut select{padding:4px 8px;border-radius:7px;border:1px solid var(--border);
  background:var(--surface);font-family:inherit;font-size:.8rem;color:var(--navy)}
.arama-not b{color:var(--text)}

/* Eksiklik karşılaştırması: iki kova yan yana, oranlar aynı ölçekte */
.eks-ikili{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 20px}
.eks-kova{border:1px solid var(--border);border-radius:10px;padding:14px 16px;background:var(--surface)}
.eks-kova.kotu{border-color:color-mix(in srgb,var(--danger) 30%,var(--surface));background:var(--danger-soft)}
.eks-kova.iyi{border-color:color-mix(in srgb,var(--ok) 32%,var(--surface));background:var(--ok-soft)}
.eks-baslik{font-size:.8rem;font-weight:700;color:var(--muted);letter-spacing:.02em}
.eks-oran{font-size:1.9rem;font-weight:800;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.eks-kova.kotu .eks-oran{color:var(--danger)}
.eks-kova.iyi .eks-oran{color:var(--ok)}
.eks-alt{font-size:.78rem;color:var(--muted);margin-top:3px}
.eks-kova.tiklanir{cursor:pointer;transition:transform .12s,box-shadow .12s}
.eks-kova.tiklanir:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(35,42,53,.12)}
.eks-kova.secili{outline:2px solid var(--accent);outline-offset:2px}
.eks-sec{font-size:.72rem;font-weight:700;color:var(--accent);margin-top:8px}

/* Çekmecedeki dosya listesi */
.cek-ozet{padding:12px 18px;border-bottom:1px solid var(--border);background:var(--surface-2);
  font-size:.84rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center}
.cek-ozet b{color:var(--navy);font-variant-numeric:tabular-nums}
.cek-liste{display:flex;flex-direction:column}
.cek-satir{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 18px;
  border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.cek-satir:hover{background:var(--surface-2)}
.cek-ad{grid-column:1;font-weight:700;font-size:.9rem;line-height:1.3}
.cek-alt{grid-column:1;font-size:.78rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 12px}
/* Bekleyen dosya satiri: ust satir KARSI TARAF, alt satir ulke/marka/kalem.
   Alanlar cogalinca akisa birakmak yetmedi; iki satir, ayri agirlik. */
/* Etiket-deger izgarasi: ilk sutun etiketler (genisligi en uzun etikete gore),
   ikinci sutun degerler. Ayni alan her satirda ayni hizada duruyor. */
.cek-ana{grid-column:1;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:2px 10px;align-items:baseline;min-width:0;font-size:.82rem}
.cek-etiket{color:var(--faint);font-size:.76rem;white-space:nowrap}
/* Iki nokta CSS'te: metne yazilsaydi cevirisi ve hizasi metne karisirdi. */
.cek-etiket::after{content:' :'}
.cek-deger{color:var(--ink);overflow-wrap:anywhere}
.cek-deger.guclu{font-weight:700}
.cek-deger.no{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cek-etiketler{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.78rem}
/* Ulke ve marka birer cip: satirdaki iki SABIT alan onlar, kalem degisken bir
   metin. Cip olmalari goz taramasini kolaylastiriyor — ayni ulke alt alta
   gelince ayni bicimde goruluyor. */
.cek-cip{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;
  font-size:.72rem;font-weight:600;line-height:1.6;white-space:nowrap;
  border:1px solid transparent}
.cek-cip.ulke{background:color-mix(in srgb,var(--accent) 10%,var(--surface));
  color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
.cek-cip.marka{background:var(--surface-2);color:var(--muted);border-color:var(--border)}

/* BEKLEME YASI. Olcut Birlik'in kendi karar ortancasi; renk o esige gore.
   Sol kenarda ince bir seritle veriliyor: satirin tamamini boyamak listeyi
   okunmaz hale getiriyordu, nokta koymak ise 60 satirda goze carpmiyordu. */
.cek-satir{border-left:3px solid transparent}
.cek-satir[data-yas="gec"]{border-left-color:var(--kirmizi,#dc2626);
  background:color-mix(in srgb,#dc2626 4%,transparent)}
.cek-satir[data-yas="yakin"]{border-left-color:#d97706}
.cek-satir[data-yas="taze"]{border-left-color:color-mix(in srgb,#16a34a 55%,transparent)}
.cek-gun{font-size:.78rem;color:var(--muted);white-space:nowrap}
.cek-gun.gec{color:#b91c1c;font-weight:700}
.cek-gun.yakin{color:#b45309;font-weight:600}
/* Olcut satiri: renklerin ne anlama geldigi listenin BASINDA yaziyor.
   Renk kodu aciklamasiz birakilirsa herkes kendi anlamini uyduruyor. */
/* Sayfa numaralari. Once "ilk 60 listeleniyor · toplam 131" yaziyordu:
   kalan 71 dosyaya ulasmanin yolu yoktu. */
.sayfalayici{display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  padding:10px 16px;border-top:1px solid var(--border)}
.sayfa-no{min-width:30px;height:30px;padding:0 8px;border-radius:8px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  font-family:inherit;font-size:.8rem;font-weight:600;line-height:1}
.sayfa-no:hover:not([disabled]){border-color:var(--border-strong)}
.sayfa-no.acik{background:color-mix(in srgb,var(--accent) 12%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--accent-ink)}
.sayfa-no[disabled]{opacity:.4;cursor:default}
.sayfa-no.ok{font-size:1rem}
.sayfa-bosluk{color:var(--faint);padding:0 2px}
.sayfa-bilgi{margin-left:auto;font-size:.76rem;color:var(--muted)}
.cek-olcut{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:8px 18px;font-size:.74rem;color:var(--muted);
  border-bottom:1px solid var(--border)}
.cek-nokta{width:9px;height:9px;border-radius:50%;display:inline-block;margin-left:6px}
.cek-nokta.gec{background:#dc2626}
.cek-nokta.yakin{background:#d97706}
.cek-nokta.taze{background:#16a34a}
.cek-ana>b{font-weight:700;font-size:.9rem;line-height:1.3;overflow-wrap:anywhere}
.cek-ana>.muted{font-size:.78rem;line-height:1.35}
/* Harcama numarasi Birlik'i ararken okunan sey; rakam oldugu icin tabular,
   boylece satirlar alt alta sutun gibi hizalaniyor. */
.cek-no{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;white-space:nowrap}
.cek-sag{grid-column:2;grid-row:1/3;text-align:right;display:flex;flex-direction:column;
  align-items:flex-end;gap:5px;justify-content:center}
.cek-tutar{font-weight:800;font-variant-numeric:tabular-nums;font-size:.9rem;white-space:nowrap}
.drawer-foot{padding:12px 18px;border-top:1px solid var(--border);background:var(--surface-2);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Panodaki sayilar birer kapi: tiklaninca o sayiyi ureten listeyi acar */
.kpi.tiklanir{cursor:pointer;transition:transform .12s,box-shadow .12s}
.kpi.tiklanir:hover{transform:translateY(-2px);box-shadow:var(--kart-golge-ustu)}
.kpi.tiklanir:active{transform:translateY(0)}
.kpi .git{font-size:.7rem;font-weight:700;color:var(--accent);opacity:0;transition:opacity .12s}
.kpi.tiklanir:hover .git{opacity:1}

/* Pano: Birlik'te bekleyenler */
.bekle-govde{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 20px 6px}
.bekle-kutu{border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--surface-2)}
.bekle-kutu b{display:block;font-size:1.35rem;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.bekle-kutu .e{font-size:.76rem;color:var(--muted);font-weight:600}
.bekle-kutu .a{font-size:.74rem;color:var(--faint);margin-top:2px}
.bekle-risk{margin:10px 20px 0;padding:12px 14px;border-radius:10px;background:var(--danger-soft);
  border:1px solid color-mix(in srgb,var(--danger) 30%,var(--surface));display:flex;align-items:center;gap:12px;cursor:pointer}
.bekle-risk .n{font-size:1.5rem;font-weight:800;color:var(--danger);font-variant-numeric:tabular-nums}
.bekle-risk .t{font-size:.83rem;color:var(--text);line-height:1.4}
.bekle-risk:hover{filter:brightness(.98)}
@media (max-width:900px){.bekle-govde{grid-template-columns:1fr}}

.eks-sure{display:flex;flex-wrap:wrap;gap:8px 26px;padding:0 20px 16px;font-size:.83rem;color:var(--muted)}
.eks-sure b{color:var(--text);font-variant-numeric:tabular-nums}
@media (max-width:900px){.eks-ikili{grid-template-columns:1fr}}

.suzgec-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.suzgec-bar .muted{font-size:.8rem}
.suzgec{display:inline-flex;align-items:center;gap:6px;padding:4px 5px 4px 12px;border-radius:20px;
  font-size:.79rem;font-weight:600;background:var(--accent-soft);color:var(--accent-ink)}
.suzgec span{font-weight:400;opacity:.75}
.suzgec button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:1.05rem;
  line-height:1;padding:0 5px;opacity:.6}
.suzgec button:hover{opacity:1}
tr.tiklanir{cursor:pointer}
tr.tiklanir:hover{background:var(--surface-2)}
tr.secili{background:var(--accent-soft)}
tr.secili td b{color:var(--accent-ink)}
.yazim-not{font-size:.71rem;color:var(--muted);font-weight:400;white-space:nowrap}

/* Veri Kaynakları — sınırlar ve bulgular */
.sinir-liste{margin:0;padding-left:18px}
.sinir-liste li{margin:0 0 6px;line-height:1.5}
.sinir-liste li:last-child{margin-bottom:0}
.kaynak-uyari{background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:7px 10px;font-size:.8rem;line-height:1.45;margin-bottom:6px}
.kaynak-bilgi{background:var(--surface-2);color:var(--muted);border-radius:8px;padding:7px 10px;font-size:.8rem;line-height:1.45}
.kural-genel code{font-family:ui-monospace,'Cascadia Code',monospace;font-size:.78rem;background:var(--surface-2);padding:1px 6px;border-radius:5px;word-break:break-all}

/* Yandan açılan çekmece — Cernora'daki desenin aynısı, tokenler zaten ortak.

   SAĞ KENARDAKİ GEZİNME RAYININ ÜSTÜNDE DURUR. z-index 50 iken ray
   (nav.serit, z-index 60) çekmecenin üstünde kalıyordu: Uyarı/Tarih/Limit/
   Marka/Birlik düğmeleri açık pencerenin içeriğine biniyor, tablo hücrelerini
   örtüyordu (24.09.2026). Çekmece kendi örtüsü olan KİPLİ bir pencere —
   açıkken arkadaki hiçbir şeye zaten dokunulamıyor, o yüzden rayı örtmesi
   doğru olan; kenardan kaydırmak sağda boş bir şerit bırakırdı. */
.drawer-root{position:fixed;inset:0;z-index:62;visibility:hidden;pointer-events:none}
.drawer-root.open{visibility:visible;pointer-events:auto}
.drawer-ov{position:absolute;inset:0;background:rgba(20,25,33,.4);opacity:0;transition:opacity .2s}
.drawer-root.open .drawer-ov{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(600px,94vw);background:var(--surface);
  box-shadow:-10px 0 34px rgba(20,25,33,.28);transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden}
.drawer-root.open .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex;align-items:flex-start;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border);background:var(--metal-light)}
.drawer-head h2{font-size:1.15rem;font-weight:800}
.drawer-head .x{margin-left:auto;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--muted);line-height:1;padding:0 4px}
.drawer-head .x:hover{color:var(--navy)}
.drawer-body{padding:20px 22px;overflow-y:auto;flex:1}
@media (prefers-reduced-motion:reduce){
  .drawer-panel{transition:none}.drawer-ov{transition:none}
}

/* Çekmece içindeki kaynak kartları */
.kk{border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;background:var(--surface)}
.kk:last-child{margin-bottom:0}
.kk-ust{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.kk-ust b{font-size:.92rem}
.kk-nokta{width:8px;height:8px;border-radius:50%;flex:none}
.kk-nokta.taze{background:var(--ok)}
.kk-nokta.eski{background:var(--warn)}
.kk-nokta.yok,.kk-nokta.kullanılmadı{background:var(--muted)}
.kk-nokta.elle{background:var(--accent)}
.kk-nokta.erisilemez{background:var(--danger)}
.kk-baslik{font-size:.84rem;color:var(--muted);margin-bottom:10px}
.kk-satir{display:flex;gap:12px;font-size:.8rem;padding:4px 0;border-top:1px solid var(--border)}
.kk-satir span:first-child{color:var(--muted);flex:none;width:180px}
.kk-satir span:last-child{color:var(--navy);font-weight:600}
.kk-alt{display:flex;align-items:center;gap:10px;margin-top:10px}
.kk-zaman{font-size:.74rem;color:var(--muted);margin-left:auto}

/* Panodaki zaman görünümleri */
/* Başvuru marjı kartı kaldırıldıktan sonra burada tek kart kaldı. */
.zaman-izgara{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1100px){.zaman-izgara{grid-template-columns:1fr}}

/* Birlik'te bekleme yaşlandırması — sütunlar */
/* ── İKİ SÜTUNLU BÖLÜM ───────────────────────────────────────────────────────
   Satır içi `grid-template-columns:1fr 1fr` idi ve dört yerde tekrarlanıyordu.
   `1fr`in ÖRTÜK ALT SINIRI min-content: içeriği geniş bir kart sütununu
   kabından taşırıyor ve sütun ekranın dışına çıkıyordu (Red Analizi'nde
   853 px). `minmax(0,1fr)` o alt sınırı kaldırıyor — sütun içeriğinden dar
   olabilir, taşan şey kendi içinde kayar.

   Dar ekranda alt alta: 390 px'te iki sütun demek, her biri 180 px demek. */
.ikili{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ikili.genis-sag{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}

/* SABİT BEŞ SÜTUN DEĞİL. 5×1fr, 641 px genişlikte kutuları 7 px taşırıyordu
   ve `1fr` in min-content tabanı yüzünden daralamıyordu. auto-fit ile sığan
   kadar sütun açılıyor: geniş ekranda yine beş, dar ekranda kendiliğinden az. */
.yas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;padding:16px 20px 6px}
.yas{text-align:center;min-width:0}
.yas-cubuk{height:92px;display:flex;align-items:flex-end;justify-content:center;
  background:var(--surface-2);border-radius:8px;padding:5px;margin-bottom:8px}
.yas-dolgu{width:100%;border-radius:5px;min-height:3px}
.yas-dolgu.ok{background:var(--ok)}
.yas-dolgu.warn{background:var(--warn)}
.yas-dolgu.danger{background:var(--danger)}
.yas-n{font-size:1.15rem;font-weight:800;color:var(--navy);line-height:1.1}
.yas-ad{font-size:.72rem;color:var(--muted);margin-top:2px;line-height:1.3}
.yas-tutar{font-size:.72rem;color:var(--muted);opacity:.75;margin-top:2px}
.yas-kritik{color:var(--danger)}
.yas-uyari{color:var(--warn)}

/* Başvuru marjı — yatay çubuklar */
.marj-liste{padding:16px 20px}
.marj-satir{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.marj-satir:last-child{margin-bottom:0}
.marj-ad{font-size:.8rem;color:var(--muted);width:118px;flex:none}
.marj-bar{flex:1;height:10px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.marj-dolgu{height:100%;border-radius:6px;min-width:4px}
.marj-dolgu.ok{background:var(--ok)}
.marj-dolgu.warn{background:var(--warn)}
.marj-dolgu.danger{background:var(--danger)}
.marj-n{font-size:.88rem;font-weight:700;color:var(--navy);width:34px;text-align:right;flex:none}

/* ── DOSYA PENCERESİ (25.09.2026) ──────────────────────────────────────────
   720 px'lik tek sütundan geniş, sütunlu bir pencereye geçti: üstte künye ve
   zaman şeridi sabit, yalnız gövde kayıyor. Ölçüler ekran genişliğine göre;
   pencere zaten ekranın %96'sı. */
.modal.dosya-modal{width:min(1680px,96vw);height:92vh;max-height:92vh;display:flex;
  flex-direction:column;overflow:hidden}
.dosya-modal .modal-h,.dosya-modal .modal-f{position:static;flex:none}
.dosya-modal .modal-h{padding:14px 22px}
.dosya-modal .dosya-b{flex:1;min-height:0;overflow:auto;padding:0}
.dosya-modal .dosya-ic{padding:18px 22px}
.dosya-modal .dosya-ic > .serit,.dosya-modal .dosya-ic > .eksiklik-serit{margin-bottom:14px}
.dsy-baslik{display:flex;align-items:center;gap:10px;min-width:0}
/* Fatura kalemleri kartında açıklama ve ekleme satırı kart kenarına
   yapışıktı (kartın kendi iç boşluğu yok); geniş sütunda göze batıyordu. */
.dosya-modal .card > p.k{margin:12px 0 10px;padding:0 18px}
.dosya-modal .card > .kalem-ekle{padding:0 18px}

/* Künye: etiket üstte küçük, değer altta; hepsi aynı çizgide. Başlık satırındaki
   "m.6 · Ek-2B · Danışmanlık · MOVENTA · …" cümlesinin yerini aldı — hangi
   değerin ne olduğu artık okunarak değil bakılarak anlaşılıyor. */
.dsy-kunye{flex:none;display:flex;flex-wrap:wrap;gap:10px 30px;padding:10px 22px 12px;
  border-bottom:1px solid var(--border)}
.dsy-kv{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:300px}
.dsy-kv > span{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.dsy-kv > b{font-size:.86rem;font-weight:700;color:var(--navy);line-height:1.35;overflow-wrap:anywhere}

/* Zaman şeridi: nokta · ad · tarih; adımlar arasında gün sayısı. İnce ve yatay. */
.zs{flex:none;display:flex;align-items:flex-start;padding:12px 22px 10px;
  border-bottom:1px solid var(--border);background:var(--surface-2);overflow-x:auto}
.zs-adim{flex:none;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:2px;padding:0 8px;max-width:170px;cursor:default}
.zs-nokta{width:12px;height:12px;border-radius:50%;flex:none;margin-bottom:3px;
  border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border)}
.zs-nokta.ok{background:var(--ok)}
.zs-nokta.warn{background:var(--warn)}
.zs-nokta.danger{background:var(--danger)}
.zs-nokta.neutral{background:var(--muted)}
.zs-nokta.sinir{background:var(--surface);box-shadow:0 0 0 2px var(--accent)}
.zs-nokta.simdi{background:var(--accent)}
.zs-ad{font-size:.76rem;font-weight:700;color:var(--navy);line-height:1.2}
.zs-tarih{font-size:.72rem;font-weight:600;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.zs-not{font-size:.68rem;line-height:1.25;color:var(--muted);white-space:nowrap}
.zs-not.warn{color:var(--warn)}
.zs-not.danger{color:var(--danger)}
.zs-not.simdi{color:var(--accent)}
/* Çizgi noktanın hizasında (nokta 12px, ortası 6px). */
.zs-ara{flex:1 1 40px;min-width:36px;margin-top:5px;border-top:2px solid var(--border-strong);
  text-align:center}
.zs-ara span{display:inline-block;margin-top:3px;font-size:.68rem;color:var(--muted);white-space:nowrap}

/* GÖVDE (26.09.2026, kullanıcı isteği). Üst sıra YAN YANA: künye + zaman şeridi
   (esner) | harcama/oran | süreler. Alt sıra üstten HİZALI iki sütun: evrak |
   fatura kalemleri (+ mutabakat, e-postalar, kurallar). Dar pencerede künye tam
   genişliğe, iki kart altında yan yana; telefonda hepsi alt alta. */
.dsy-ust{display:grid;gap:14px;margin-bottom:16px;align-items:stretch;
  grid-template-columns:minmax(0,1fr) 300px 280px}
.dsy-kimlik{min-width:0;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;display:flex;flex-direction:column}
.dsy-kimlik .dsy-kunye{padding:12px 16px;border-bottom:1px solid var(--border)}
.dsy-kimlik .zs{flex:1;align-items:center;padding:12px 16px;border-bottom:0}
.dsy-alt{display:grid;gap:16px;align-items:start;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.dsy-belge,.dsy-diger{display:flex;flex-direction:column;gap:14px;min-width:0}
.dsy-diger:empty{display:none}
@media (max-width:1250px){
  .dsy-ust{grid-template-columns:1fr 1fr}
  .dsy-ust > .dsy-kimlik{grid-column:1 / -1}
}
@media (max-width:1000px){ .dsy-alt{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){ .dsy-ust{grid-template-columns:minmax(0,1fr)} }
/* BELGE SÜTUNU KENDİ GENİŞLİĞİNE GÖRE. Künye satırının asgarisi 660 px; üç
   sütunlu düzende (≥1560 px ekran) bu sütun ~624 px kalıyor ve künye yatay
   kayıyordu, "Tutar" kesik görünüyordu (25.09.2026). Sütun daralınca belge adı
   kendi satırına çıkıyor, dört alan altında esneyerek diziliyor. Ekran değil
   SÜTUN genişliği ölçülüyor: aynı pencere iki ya da üç sütunlu olabiliyor. */
.dsy-belge{container-type:inline-size}
@container (max-width:720px){
  .kunye-satir.turesiz{grid-template-columns:minmax(0,1.3fr) minmax(128px,1.1fr) minmax(0,.9fr) auto}
  .kunye-satir{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(128px,1.1fr) minmax(0,.9fr) auto;
    row-gap:5px}
  .kunye-satir .kunye-ad{grid-column:1 / -1}
  .kunye-baslik .kunye-ad{display:none}
}
/* Kalemin kuralları: KATLANIR, kapalı gelir. Her dosyada aynı metin; her
   seferinde okunması gerekmiyor, istenince bir tıkla açılıyor. */
/* ZORUNLU EVRAK — TEK SATIR (25.09.2026, kullanıcı isteği). Belgeler ve
   "+ Belge ekle" adın altında ayrı bir satırdaydı; her evrak iki satır, liste
   pencereyi dolduruyordu. Şimdi: kutu · ad (koşul notu yanında) · belgeler ve
   ekle düğmesi · zorunlu rozeti — aynı satırda. Çok belge varsa belgeler kendi
   hücresinde alta kırılıyor, satırın geri kalanı yerinde duruyor. Açıklama
   (varsa) adın altında kalıyor: kuralın kendisi, gizlenmemeli. */
/* ZORUNLU = RENK, rozet değil (kullanıcı isteği): zorunlu evrakın adı eksikken
   kırmızı, belge eklenince ya da işaretlenince yeşil. Koşullu evrak nötr kalır.
   Ekran okuyucu için "(zorunlu)" gizli metin olarak duruyor.
   Ad sütununun ASGARİ genişliği var: yoksa iki belgesi olan satırda çipler adı
   sıkıştırıp "Ödeme / belgesi" diye iki satıra kırıyordu. */
.dosya-modal .evrak li{display:grid;grid-template-columns:18px minmax(min(210px,38%),1fr) auto;
  align-items:center;gap:4px 12px;padding:8px 16px}
.dosya-modal .evrak li.zorunlu .ad b{color:var(--danger)}
.dosya-modal .evrak li.zorunlu.done .ad b{color:var(--ok)}
.dosya-modal .evrak input[type=checkbox]{margin:0}
.dosya-modal .evrak .ad{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.dosya-modal .evrak .ad .k{display:inline;margin:0}
.dosya-modal .evrak .ad .n{flex-basis:100%;margin:1px 0 0}
.dosya-modal .evrak .ekler{margin:0;justify-content:flex-end}
.dosya-modal .evrak .ek a{max-width:170px}
.dosya-modal .evrak .ek-ekle{white-space:nowrap}
/* Künye evrağın altında: ad sütununun hizasından başlıyor (kutunun yanından
   değil), satırın geri kalanı boyunca uzanıyor. Kendi zemininde, çerçeveli —
   evrak satırının bir parçası olduğu, ayrı bir tablo olmadığı belli olsun. */
.dosya-modal .evrak .evrak-kunye{grid-column:2 / -1;display:flex;flex-direction:column;gap:4px;
  margin-top:4px}
.dosya-modal .evrak .evrak-kunye .kunye-satir{padding:6px 8px;border:1px solid var(--border);
  border-radius:8px;background:var(--surface)}
.dosya-modal .evrak .evrak-kunye .kunye-ad a{font-size:.78rem;font-weight:600}
/* PDF önerisi: alan dolu görünür ama işaretli — onaylanana kadar künyede değil. */
.kunye-satir .input.oneri{background:var(--caution-soft);border-color:var(--caution);border-style:dashed}
.pdf-kalem-oneri{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 18px 10px;
  padding:9px 12px;border:1px dashed var(--caution);border-radius:8px;background:var(--caution-soft);
  font-size:.8rem;line-height:1.45}
.pdf-kalem-oneri > span{flex:1 1 260px;min-width:0}
.pdf-kalem-oneri .muted{display:block;font-size:.74rem}
.kunye-oneri{grid-column:1 / -1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.72rem;color:var(--muted);line-height:1.35}
.kunye-oneri > span{flex:1 1 240px;min-width:0}
.kunye-oneri-uyari{color:var(--warn);font-weight:700}
/* Taranmış belge okunuyor (pdfoneri.js) */
.ocr-donen{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;border:2px solid var(--border-strong);
  border-top-color:var(--accent);border-radius:50%;animation:ocr-don 0.9s linear infinite}
@keyframes ocr-don{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.ocr-donen{animation:none}}
.dosya-modal .evrak-ipucu{margin:0;padding:8px 16px;font-size:.76rem;color:var(--muted);
  border-bottom:1px solid var(--border)}

.dsy-kural{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.dsy-kural > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  padding:11px 16px;font-weight:800;font-size:.88rem;color:var(--navy)}
.dsy-kural > summary::-webkit-details-marker{display:none}
.dsy-kural > summary::before{content:'▸';color:var(--muted);transition:transform .15s}
.dsy-kural[open] > summary::before{transform:rotate(90deg)}
.dsy-kural[open] > summary{border-bottom:1px solid var(--border)}
@media (prefers-reduced-motion:reduce){.dsy-kural > summary::before{transition:none}}

/* Tanım tablolarında satır içi düzenleme alanları */
.input-sm{padding:5px 8px;font-size:.82rem;height:auto;min-height:0}

/* Belge sürüm rozeti */
.ek-surum{border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-ink);
  border-radius:20px;font-size:.68rem;font-weight:800;padding:1px 7px;cursor:pointer;line-height:1.5}
.ek-surum:hover{background:var(--accent);color:#fff}

/* Giriş ekranı */
body.giris-modu{background:var(--bg);min-height:100vh}
.giris-sayfa{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.giris-kart{width:min(400px,100%);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;box-shadow:0 12px 34px rgba(20,25,33,.10)}
.giris-marka{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-bottom:22px}
.giris-qtesvik{height:46px;width:auto;max-width:100%}
/* Giriş kartı zemini temaya göre: açıkta lacivert yazılı, gecede beyaz yazılı logo. */
.zemin-koyu{display:none !important}
[data-tema="gece"] .zemin-acik{display:none !important}
[data-tema="gece"] .zemin-koyu{display:block !important}
.giris-logo{width:40px;height:40px;border-radius:11px;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.15rem}
.giris-marka b{display:block;font-size:1.05rem;color:var(--navy)}
.giris-marka span{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* Üyelik talebi (19.10.2026): giriş kartının altındaki bağlantı, form ve teşekkür */
.giris-alt{text-align:center;margin:14px 0 0;font-size:.86rem;color:var(--muted)}
.giris-alt a{font-weight:600}
.uyelik-baslik{font-size:1.05rem;margin:0 0 4px;color:var(--navy);text-align:center}
.uyelik-giris{font-size:.84rem;color:var(--muted);text-align:center;margin:0 0 14px}
.uyelik-iki{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:460px){.uyelik-iki{grid-template-columns:1fr}}
.uyelik-form textarea.input{resize:vertical;min-height:64px}
.uyelik-onay{display:flex;gap:9px;align-items:flex-start;font-size:.82rem;color:var(--muted);margin:4px 0 12px;line-height:1.4}
.uyelik-onay input{margin-top:2px;flex:none}
.uyelik-tuzak{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.uyelik-tesekkur{text-align:center}
.uyelik-tesekkur p{margin:6px 0 14px}
.uyelik-tamam{width:46px;height:46px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft, #e6f4f4);color:var(--accent, #007b82);font-size:1.4rem;font-weight:800}
.giris-kart:has(.uyelik-form){width:min(480px,100%)}
.giris-hata{background:var(--danger-soft);color:var(--danger);border-radius:8px;
  padding:9px 12px;font-size:.83rem;margin-bottom:12px}
.giris-not{font-size:.74rem;color:var(--muted);line-height:1.55;margin:16px 0 0}
.giris-not code{font-family:ui-monospace,'Cascadia Code',monospace;font-size:.72rem;
  background:var(--surface-2);padding:1px 5px;border-radius:4px;word-break:break-all}

/* ── Birlik postası ────────────────────────────────────────────────────────
   Ekran iki adımlı: solda yapıştırılan yazı ve onun ÇÖZÜMÜ, sağda işlenmiş
   yazıların arşivi. Çözüm kartı henüz uygulanmamış bir öneridir; bu yüzden
   kenarı vurgulu, arşiv satırları sakin. */
.posta-alan{width:calc(100% - 40px);margin:0 20px;padding:12px 14px;border:1px solid var(--border);
  border-radius:8px;background:var(--surface-2);color:var(--ink);resize:vertical;
  font-family:ui-monospace,'Cascadia Code',monospace;font-size:.78rem;line-height:1.6}
.posta-alan:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--surface)}
.posta-eylem{display:flex;align-items:center;gap:10px;padding:12px 20px}
.posta-cozum{border-left:3px solid var(--accent)}
.posta-kunye{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 20px;
  border-bottom:1px solid var(--border)}
.posta-kunye .k{display:block;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint)}
.posta-kunye .v{font-weight:700;font-size:.86rem;font-variant-numeric:tabular-nums}
.posta-dosya{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  padding:12px 20px;border-bottom:1px solid var(--border)}
.posta-dosya.tiklanir{cursor:pointer}
.posta-dosya.tiklanir:hover{background:var(--surface-2)}
.posta-dosya-ad{font-weight:700;font-size:.9rem}
.posta-dosya.secilebilir{cursor:pointer;border-left:3px solid transparent}
.posta-dosya.secilebilir:hover{background:var(--surface-2)}
.posta-dosya.secilebilir.secili{border-left-color:var(--accent);background:var(--accent-soft)}
.posta-uyari{margin:14px 20px 0;padding:10px 12px;border-radius:8px;font-size:.83rem;
  line-height:1.55;background:var(--caution-soft);color:var(--caution)}
.posta-etiketler{display:flex;flex-wrap:wrap;gap:6px;padding:12px 20px 0}
.posta-etiketler.kucuk{padding:4px 0 0;grid-column:1}
.posta-etiket{border:1px solid var(--border-strong);background:var(--surface-2);color:var(--accent-ink);
  border-radius:20px;font-size:.7rem;font-weight:700;padding:2px 9px;cursor:help}
.posta-gerekce{padding:12px 20px 0}
.posta-gerekce .k{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.posta-gerekce p{margin:4px 0 0;padding:10px 12px;border-left:2px solid var(--border-strong);
  background:var(--surface-2);border-radius:0 8px 8px 0;font-size:.85rem;line-height:1.6}
.posta-ref{padding:14px 20px 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.posta-ref .k{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
  width:100%}
.posta-ref-no{font-family:ui-monospace,'Cascadia Code',monospace;font-size:.76rem;font-weight:700;
  border:1px solid var(--border-strong);border-radius:6px;padding:2px 8px;background:var(--surface-2)}
.posta-ref-no.tiklanir{cursor:pointer;border-color:var(--accent);color:var(--accent-ink)}
.posta-ref-no.tiklanir:hover{background:var(--accent);color:#fff}
.posta-ref-no.yok{color:var(--faint);border-style:dashed}
.posta-ref .rapor-not{padding:6px 0 0;width:100%}
.posta-onceki{margin:14px 20px 0;font-size:.8rem;color:var(--muted)}
.posta-etki{margin:14px 20px 0;padding:11px 13px;border-radius:8px;font-size:.84rem;line-height:1.6;
  background:var(--accent-soft);color:var(--accent-ink)}
.posta-satir-gerekce{grid-column:1;font-size:.78rem;line-height:1.5;color:var(--muted);
  margin-top:2px}
.posta-bitti{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;margin-bottom:16px;border-left:3px solid var(--ok);font-size:.86rem}

/* ── Yurt dışı birimler ────────────────────────────────────────────────────
   133 birim tek tabloya sığmaz; kart önce özet verir, sonra aranan satırları.
   "Adlandırılmamış" bir sayı değil bir iş listesi: tıklanıp süzülüyor. */
.birim-ozet{display:flex;flex-wrap:wrap;gap:6px 20px;padding:12px 20px;
  border-bottom:1px solid var(--border);font-size:.83rem;color:var(--muted)}
.birim-ozet b{color:var(--ink);font-variant-numeric:tabular-nums}
.birim-ozet .uyari b{color:var(--caution)}
.birim-ozet .tiklanir{cursor:pointer;text-decoration:underline dotted}
.birim-arac{display:flex;gap:10px;padding:12px 20px;align-items:center}
.birim-arac .input{flex:1}
.birim-adsiz{color:var(--faint);font-weight:600}
.birim-no{font-family:ui-monospace,'Cascadia Code',monospace;font-size:.7rem;color:var(--faint)}
.birim-daha{padding:10px 20px;border-top:1px solid var(--border)}
.dosya-birim{cursor:pointer;border-bottom:1px dotted var(--accent);color:var(--accent-ink)}
.dosya-birim:hover{color:var(--accent);border-bottom-style:solid}
/* HDN = harcama DOSYA numarası; altındaki küçük rozetler o dosyadaki beyanlar. */
.posta-ref-grup{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 0;
  border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}
.posta-ref-grup .posta-ref-no{border:0;background:transparent;padding:2px 6px}
.posta-ref-beyan{font-family:ui-monospace,'Cascadia Code',monospace;font-size:.72rem;
  font-weight:700;border:1px solid var(--accent);border-radius:5px;padding:1px 6px;
  background:var(--surface);color:var(--accent-ink);cursor:pointer}
.posta-ref-beyan:hover{background:var(--accent);color:#fff}

/* ── Şirket profili ────────────────────────────────────────────────────────
   Profil şeridi: şirketin yapısı tek bakışta, her kutu kendi bölümüne götürür. */
.profil-serit{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;margin-bottom:16px}
.profil-kutu{display:flex;flex-direction:column;gap:2px;padding:12px 14px;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--ink);transition:border-color .12s,transform .12s}
.profil-kutu:hover{border-color:var(--accent);transform:translateY(-1px)}
.profil-kutu .n{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.profil-kutu .e{font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* Satır içi düzenlenen alanlar tabloya gömülü görünsün, kutu gibi durmasın. */
.input.duz{border-color:transparent;background:transparent;padding:4px 6px;font-weight:700}
.input.duz:hover{border-color:var(--border)}
.input.duz:focus{border-color:var(--accent);background:var(--surface)}
.input.duz.num{text-align:right}
.input.kaydedildi{border-color:var(--ok);background:var(--ok-soft)}

.onay-satir{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-bottom:12px;
  border:1px solid var(--border);border-radius:8px;background:var(--surface-2);
  font-size:.82rem;line-height:1.55;cursor:pointer}
.onay-satir input{margin-top:3px}

/* Karşı taraf dizini geniş çekmecede açılır: tablo dar panele sığmıyor. */
.drawer-panel.genis{width:min(860px,96vw)}
.kt-arac{display:flex;gap:8px;align-items:center;padding:12px 20px;flex-wrap:wrap}
.kt-arac .input{flex:1;min-width:160px}
.kt-arac + .cek-ozet + .tablewrap .btn{white-space:nowrap}

/* ── Aranabilir seçici ─────────────────────────────────────────────────────
   Native <datalist> yerine: 449 tedarikçiyi tarayıcı ekran boyunca döküyor,
   yüksekliği sınırlanamıyor ve içinde arama yapılamıyordu. */
.secici{position:relative}
.secici-liste{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);
  max-height:260px;overflow-y:auto;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:10px;
  box-shadow:0 12px 28px rgba(20,25,33,.16)}
.secici-bilgi{position:sticky;top:0;background:var(--surface-2);
  border-bottom:1px solid var(--border);padding:7px 12px;font-size:.73rem;
  letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.secici-satir{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border)}
.secici-satir:last-child{border-bottom:0}
.secici-satir:hover,.secici-satir.vurgulu{background:var(--accent-soft)}
.secici-satir .ad{font-size:.84rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.secici-satir .bilgi{font-size:.73rem;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.secici-satir.yeni{position:sticky;bottom:0;background:var(--surface);
  border-top:1px solid var(--border-strong)}
.secici-satir.yeni:hover,.secici-satir.yeni.vurgulu{background:var(--accent-soft)}
.uyari-satir{color:var(--caution);font-weight:600}
/* Dar sütunlarda gereksiz iç boşluk metni kesiyordu. */
.kunye-satir .input{min-width:0}
.kunye-satir input[type="date"]{padding-left:5px;padding-right:2px}
.kunye-baslik{font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}

/* ── Panorama ──────────────────────────────────────────────────────────────
   Bütün kırılımlar tek ekranda ve hepsi aynı süzgece bağlı. Çubuklar SVG değil
   düz DOM: ölçekleme tarayıcıya bırakılıyor, dar ekranda kendiliğinden akıyor. */
.pan-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.pan-kart{display:flex;flex-direction:column}
.pan-liste{display:flex;flex-direction:column}
.pan-satir{padding:9px 20px;border-bottom:1px solid var(--border);cursor:pointer;
  transition:background .12s}
.pan-satir:last-child{border-bottom:0}
.pan-satir:hover{background:var(--surface-2)}
.pan-satir.secili{background:var(--accent-soft)}
.pan-satir.secili .pan-ad{color:var(--accent-ink)}
.pan-ust{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pan-ad{font-size:.85rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.pan-deger{font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.pan-cubuk{height:6px;border-radius:4px;background:var(--surface-2);margin:5px 0 4px;overflow:hidden}
.pan-cubuk i{display:block;height:100%;border-radius:4px;transition:width .25s}
.pan-alt{display:flex;gap:12px;font-size:.74rem;color:var(--muted);flex-wrap:wrap}
.pan-red{font-weight:700}
.pan-red.iyi{color:var(--ok)}
.pan-red.orta{color:var(--caution)}
.pan-red.kotu{color:var(--danger)}

.pan-suzgec{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;
  padding:10px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius)}
.pan-cip{border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-ink);
  border-radius:20px;padding:3px 11px;font-size:.78rem;font-weight:700;cursor:pointer}
.pan-cip:hover{background:var(--accent);color:#fff}

.pan-zaman-yuva{padding:12px 20px 0}
.pan-zaman{width:100%;height:auto;display:block}
.pan-yil-etiket{font-size:9px;fill:var(--faint)}
.pan-ay:hover rect{opacity:1}
.pan-lejant{display:flex;gap:16px;padding:6px 20px 12px;font-size:.76rem;color:var(--muted)}
.pan-lejant span{display:inline-flex;align-items:center;gap:6px}
.pan-lejant i{width:11px;height:11px;border-radius:3px;display:inline-block}
.pan-lejant i.cizgi{height:3px;border-radius:2px}

/* ── Rapor kurucu ──────────────────────────────────────────────────────────
   Danışmanın Excel'de kurduğu pivotun karşılığı: satır ▸ alt kırılım × sütun,
   ölçüler yan yana. Eksenleri kullanıcı seçiyor, hazır kalıp dayatılmıyor. */
.r-sekme{display:flex;gap:6px;margin-bottom:14px}
.r-sekme button{padding:7px 16px;border:1px solid var(--border);background:var(--surface);
  border-radius:8px;font-size:.85rem;font-weight:700;color:var(--muted);cursor:pointer}
.r-sekme button.acik{background:var(--navy);border-color:var(--navy);color:#fff}
.r-secim{margin-bottom:14px;padding:14px 18px}
.r-satir{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.r-satir + .r-satir{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.r-satir label{display:flex;flex-direction:column;gap:4px;font-size:.74rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.r-satir label .input,.r-satir select{min-width:190px;text-transform:none;letter-spacing:0}
.r-satir > .label{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted)}
.r-onay{flex-direction:row !important;align-items:center;gap:6px !important;
  padding:4px 10px;border:1px solid var(--border);border-radius:20px;cursor:pointer;
  text-transform:none !important;letter-spacing:0 !important;font-size:.8rem !important;
  font-weight:600 !important;color:var(--ink) !important}
.r-onay.acik{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink) !important}
.r-hazir button{white-space:nowrap}
/* Süzgeç kutuları: eksen seçicilerden dar, çok sayıda yan yana sığsın. */
/* Tek satıra sığsın: dar, sabit genişlikte kutular; uzun seçenek kutuda kısalır. */
.r-satir.r-suzgec{gap:8px 10px}
.r-satir.r-olculer{gap:6px}
.r-olculer .r-onay{padding:4px 8px;white-space:nowrap;font-size:.78rem !important}
.r-suzgec label .input,.r-suzgec select{min-width:0;width:124px;max-width:124px;text-overflow:ellipsis}
.r-suzgec #r-suzgec-diger{align-self:flex-end;white-space:nowrap}

.r-tablo th.r-grup{text-align:center;border-left:2px solid var(--border-strong);
  font-size:.74rem;letter-spacing:.03em}
.r-tablo th.r-genel{background:var(--surface-2)}
.r-tablo th.r-olcu{font-size:.7rem;font-weight:600;white-space:nowrap}
.r-tablo td.r-ad{font-weight:700;font-size:.85rem;white-space:nowrap}
.r-tablo tr.r-alt td.r-ad{font-weight:600;color:var(--muted);font-size:.8rem}
.r-girinti{display:inline-block;width:18px}
.r-dosya{margin-left:8px;font-size:.7rem;font-weight:600;color:var(--faint);
  font-variant-numeric:tabular-nums}
.r-tablo td.r-toplam{background:var(--surface-2);font-weight:700}
.r-tablo tfoot td{border-top:2px solid var(--border-strong);background:var(--surface-2)}
.r-tablo td.num,.r-tablo th.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Liste mutabakatı: sapma olan satır göze çarpsın, olmayanlar tıklanabilir
   görünmesin — tablodaki genel `cursor:pointer` burada yanıltıcı olurdu. */
.table.mutabakat tbody tr{cursor:default}
.table.mutabakat tbody tr.mutabakat-sapma{cursor:pointer;background:var(--warn-soft)}
.table.mutabakat tbody tr.mutabakat-sapma td:first-child{border-left:3px solid var(--warn)}
.table.mutabakat tbody tr.mutabakat-sapma:hover{filter:brightness(.97)}

/* PANO — dikkat şeridi. Yalnızca sorun varken çizilir; boşken hiç yer
   kaplamaz, çünkü her gün görülen bir uyarı uyarı olmaktan çıkar. */
.dikkat-serit{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.dikkat{display:flex;align-items:baseline;gap:10px;padding:9px 13px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:.84rem}
.dikkat b{font-weight:700;white-space:nowrap}
.dikkat span{color:var(--muted);flex:1;line-height:1.4}
.dikkat em{font-style:normal;font-size:.76rem;color:var(--muted);white-space:nowrap}
.dikkat:hover{filter:brightness(.985)}
.dikkat.danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,var(--surface))}
.dikkat.danger b{color:var(--danger)}
.dikkat.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,var(--surface))}
.dikkat.warn b{color:var(--warn)}
.dikkat.caution{background:var(--caution-soft);border-color:color-mix(in srgb,var(--caution) 30%,var(--surface))}
.dikkat.caution b{color:var(--caution)}

/* PANO — Birlik'te bekleyen özeti. Dört rakam yan yana: bağlı para,
   eksiklik bildirilmiş/bildirilmemiş, ortancayı aşmış olanlar. */
.bekleyen-ozet{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.bekleyen-ozet>div{padding:10px 12px;border-radius:9px;background:var(--surface-2)}
.bekleyen-ozet .k{font-size:.72rem;color:var(--muted);font-weight:600}
.bekleyen-ozet .v{font-size:1.25rem;font-weight:800;margin-top:2px}
.bekleyen-ozet .s{font-size:.72rem;color:var(--muted);margin-top:1px}
.bekleyen-ozet .riskli{background:var(--warn-soft)}
.bekleyen-ozet .riskli .v{color:var(--warn)}

/* Uc rakam yan yana: bagli tutar basliga tasindi, burada risk kaldi. */
.bekleyen-ozet.uclu{grid-template-columns:repeat(3,1fr)}

/* AYARLAR — TeknopolCRM ▸ Ayarlar ile ayni duzen (01.10.2026): gruplar yan
   yana uc kart; kartta kucuk buyuk harfli baslik, 72 px kabartmali egimli
   ikon ve altinda adi. Aciklama yok (ipucunda). Golge ve egim CRM'den. */
.ayar-kategoriler{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
@media (max-width:1100px){.ayar-kategoriler{grid-template-columns:1fr}}
.ayar-kategori{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 14px 18px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -2px 0 rgba(0,0,0,.05) inset,0 8px 0 rgba(0,0,0,.05),0 14px 28px rgba(0,0,0,.09),0 3px 6px rgba(0,0,0,.06)}
.ayar-kat-baslik{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);
  margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.ayar-simgeler{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:14px 10px}
.ayar-simge{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;padding:0;
  cursor:pointer;font-family:inherit;width:100%;min-width:0}
.ayar-simge-ikon{position:relative;width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--k),color-mix(in srgb,var(--k) 72%,#000));
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 -2px 0 rgba(0,0,0,.2) inset,0 6px 0 rgba(0,0,0,.18),0 10px 20px rgba(0,0,0,.22),0 2px 4px rgba(0,0,0,.12);
  transform:perspective(200px) rotateX(4deg);transition:transform .15s,box-shadow .15s}
.ayar-simge-ikon svg{width:34px;height:34px}
.ayar-simge:hover .ayar-simge-ikon{transform:perspective(200px) rotateX(4deg) scale(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 -2px 0 rgba(0,0,0,.2) inset,0 8px 0 rgba(0,0,0,.18),0 14px 28px rgba(0,0,0,.26),0 4px 8px rgba(0,0,0,.14)}
.ayar-simge:active .ayar-simge-ikon{transform:perspective(200px) rotateX(4deg) scale(.94) translateY(3px);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 -1px 0 rgba(0,0,0,.15) inset,0 2px 0 rgba(0,0,0,.15),0 4px 10px rgba(0,0,0,.15)}
.ayar-simge:focus-visible{outline:none}
.ayar-simge:focus-visible .ayar-simge-ikon{outline:3px solid var(--vurgu-1);outline-offset:3px}
.ayar-simge-ad{font-size:.78rem;font-weight:600;color:var(--ink);text-align:center;line-height:1.3;overflow-wrap:anywhere}
/* Durum rozeti (Kullanicilar "1 hesap", Posta "bagli degil"): ikonun ust koseinde. */
.ayar-simge-rozet{position:absolute;top:-8px;right:-14px;font-size:.62rem;padding:1px 6px;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.18)}

/* Rozet gorunumlu dugme: sayi tiklanabilir oldugunu belli etsin. */
.badge-dugme{border:none;cursor:pointer;font-family:inherit;font-size:.74rem;
  font-weight:700;padding:3px 10px;border-radius:20px}
.badge-dugme:hover{filter:brightness(.94)}

/* ── Guvenlik ve MFA ────────────────────────────────────────────────────── */
/* Serit: karta girmeye degmeyen ama gorulmesi gereken tek cumlelik durum. */
.serit{border-radius:9px;padding:10px 13px;font-size:.83rem;line-height:1.5;
  margin-bottom:12px;border:1px solid transparent}
.serit.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-soft)}
.serit.warn{background:var(--warn-soft);color:var(--warn)}
.serit.caution{background:var(--caution-soft);color:var(--caution)}
.serit.danger{background:var(--danger-soft);color:var(--danger)}

/* Islem hucresi: dugmeler sigmadiginda alt satira aksin, tabloyu genisletmesin. */
.islem-hucre{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.btn-tehlike{color:var(--danger)}
.btn-tehlike:hover{background:var(--danger-soft)}

/* Kod girisi: alti hane okunakli ve genis aralikli olmali; kullanici telefonla
   ekran arasinda bakisirken hane kaydirmak en sik hata. */
.kod-girisi{font-size:1.5rem;letter-spacing:.5em;text-align:center;
  font-family:var(--mono,ui-monospace,monospace);padding:12px 8px;
  font-variant-numeric:tabular-nums}

.mfa-baslik{text-align:center;margin-bottom:18px}
.mfa-baslik h2{font-size:1.15rem;margin:0 0 5px}
.mfa-baslik p{margin:0;font-size:.84rem;color:var(--muted)}
.mfa-adim{margin:0 0 16px;padding-left:20px;font-size:.84rem;color:var(--muted);line-height:1.7}
.mfa-adim b{color:var(--ink)}
/* Karekodun zemini HER TEMADA beyaz kalmali: koyu temada tersine donen bir
   kare telefonla okutulamaz. */
.mfa-qr{display:flex;justify-content:center;background:#fff;border-radius:12px;
  padding:14px;border:1px solid var(--border)}
.mfa-qr svg{width:186px;height:186px;display:block}
.mfa-elle{margin-top:12px;font-size:.82rem;color:var(--muted)}
.mfa-elle summary{cursor:pointer;font-weight:600}
.mfa-elle p{margin:8px 0 6px}
.mfa-sir{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:.95rem;
  letter-spacing:.08em;background:var(--surface-2);border-radius:8px;padding:10px;
  text-align:center;word-break:break-all;color:var(--ink)}
.mfa-dugmeler{display:flex;gap:8px;margin-top:10px}

.kurtarma-kutu{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;
  background:var(--surface-2);border-radius:10px;padding:13px;margin-top:12px}
.kurtarma-kutu code{font-family:var(--mono,ui-monospace,monospace);font-size:.92rem;
  letter-spacing:.04em;text-align:center;color:var(--ink);user-select:all}
@media(max-width:420px){.kurtarma-kutu{grid-template-columns:1fr}}

.ozet-satir{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--border);font-size:.85rem}
.ozet-satir:last-of-type{border-bottom:none}
.ozet-satir span{color:var(--muted)}
.kritik-sayi{color:var(--danger)}
.kutu-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
/* MFA adimlarinda kart genisler: 400 piksele karekod, adim listesi ve kod
   kutusu birlikte sigmiyor. */
.giris-kart.giris-genis{width:min(470px,100%)}

/* ── Giris ekrani marka kusagi ──────────────────────────────────────────── */
/* Merkezde yararlanicinin ana logosu, cevresinde agir agir donen kardes
   markalar. Yalnizca public/marka/marka.json varsa cizilir. */
.giris-markali{position:relative}
/* Kart 100vh'i asarsa (MFA kurulumu) flex ortalama ustten tasar ve o kisma
   kaydirilamaz. margin:auto hem ortalar hem tasmayi kaydirilabilir birakir. */
.giris-kart{margin:auto}

/* Kusak yalnizca yer varken gorunur. Dar ekranda halkanin yaricapi karti
   ezer; gizlemek, kucultup ust uste bindirmekten iyidir. */
.yorunge{display:none}
/* Uzun kartta (MFA kurulumu, kurtarma listesi) halka alt/ust kenardan karta
   biner. Kusagi kucultup ust uste bindirmektense o adimlarda gizliyoruz. */
.yorunge-yok .yorunge{display:none!important}
@media (min-width:1040px) and (min-height:680px){
  .yorunge{display:grid;place-items:center;position:absolute;inset:0;
    pointer-events:none;z-index:0;overflow:hidden}
}

.yorunge-halka{
  --yaricap:316px;
  --sure:96s;                 /* bir tur. Yavas olmasi kasitli: hareket fark
                                 edilsin ama parolayi yazan kisiden dikkat
                                 calmasin. */
  position:relative;width:0;height:0;
  animation:yorunge-don var(--sure) linear infinite;
}
@media (min-width:1320px){ .yorunge-halka{--yaricap:344px} }

/* Ogeyi acisina tasir. Kendisi 0x0; cocugu ORTALAMAK icin acik bir
   translate(-50%,-50%) gerekiyor — grid'in place-items:center kurali sifir
   olculu bir alanda tasan cocugu ortalamiyor, sol ust kosesini noktaya
   koyuyor. Sonucu: halka, rozetin yarisi kadar (79x33 piksel) kayik cizildi.
   Olcumle yakalandi; gozle bakinca "biraz sag" gorunuyordu, o kadar. */
.yorunge-yuva{
  position:absolute;top:0;left:0;width:0;height:0;
  transform:rotate(var(--aci)) translate(var(--yaricap)) rotate(calc(-1 * var(--aci)));
}
.yorunge-orta{position:absolute;top:0;left:0;transform:translate(-50%,-50%)}
/* Halkanin donusunu geri alir; logolar hep duz durur. */
.yorunge-oge{animation:yorunge-don var(--sure) linear infinite reverse}

/* Logolarin hepsi beyaz zeminli yatay yazi. Rozet HER TEMADA beyaz kalir:
   koyu temada saydam birakilirsa lacivert yazi lacivert zemine oturur. */
/* Logolar SAYDAM PNG (bkz. araclar/logo-hazirla.js). CSS karisim kipi
   DENENDI ve olmadi: halkanin transform/animation'i yeni bir yigin baglami
   aciyor, mix-blend-mode o baglamin disindaki sayfa zeminini goremiyor.
   PNG'lerde calisiyor gibi gorunuyordu ama onlar zaten saydamdi. */
.yorunge-oge img{
  display:block;width:calc(130px * var(--olcek, 1));height:auto;
  opacity:.55;                 /* zeminle akraba dursun, dikkat calmasin */
}

@keyframes yorunge-don{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Hareketi azaltma tercihi: halka durur, logolar yerinde kalir. */
@media (prefers-reduced-motion:reduce){
  .yorunge-halka,.yorunge-oge{animation:none}
}

/* Kart kusagin ustunde durmali, yoksa logolar karta binebilir. */
.giris-markali .giris-kart,.giris-sayfa .giris-kart{position:relative;z-index:1}

/* Yörüngede simgeler (19.10.2026): marka logosu yerine işi anlatan simgeler.
   Lacivert/turkuaz QTeşvik logosundan; gece temasında lacivert açık tona döner. */
.yorunge-simge{--simge-renk:#14294b;display:flex;flex-direction:column;align-items:center;gap:7px;opacity:.62}
.yorunge-simge.turkuaz{--simge-renk:#22a9bd}
[data-tema="gece"] .yorunge-simge{--simge-renk:#c9d4e6}
[data-tema="gece"] .yorunge-simge.turkuaz{--simge-renk:#4cc6d6}
.yorunge-simge svg{width:30px;height:30px;padding:14px;box-sizing:content-box;border-radius:50%;
  color:var(--simge-renk);background:var(--surface);
  border:1.5px solid color-mix(in srgb,var(--simge-renk) 35%,transparent);
  box-shadow:0 6px 18px rgba(20,41,75,.10)}
.yorunge-simge span{font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:var(--simge-renk);white-space:nowrap}

/* Yararlanicinin ana logosu — kartin en ustunde, urun adindan once. */
.giris-sahip{display:flex;flex-direction:column;align-items:center;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--border)}
.giris-sahip img{width:calc(180px * var(--olcek, 1));height:auto}
/* Yararlanicinin logosunun ALTINDA urunun kendi Quality logosu. Burada
   onceden programin logosu duruyordu; tescilli isaret oldugu icin
   26.09.2026'da kaldirildi (bkz. app.js > markaYukle). */
/* URUN YAZI-LOGOSU (28.09.2026). "Quality" artik bir gorsel dosyasi degil,
   acik lisansli Dancing Script (SIL OFL 1.1) ile dizilmis METIN: dosyasi
   yok, ust veri tasimiyor, her boyutta keskin. Renkler eski logodan: Q acik mavi, gerisi
   lacivert. Yazi tipi index.html'de yalniz bu harfler icin yukleniyor
   (text=Quality); yuklenemezse tarayicinin el yazisi yazi tipine duser. */
.urun-yazi{font-family:'Dancing Script',cursive;font-weight:700;line-height:1;white-space:nowrap;
  letter-spacing:0;color:#16294a}
.urun-yazi b{font-weight:inherit;color:#3a8fd6}
.giris-sahip .giris-urun-logo{display:block;margin:14px auto 0;height:44px;width:auto}
/* Islem dugmeleri: CRM'deki gibi cizgili, durumu rengiyle soyleyen kucuk
   dugmeler. Renk paleti QTeşvik'in kendi belirteclerinden — CRM'deki sabit
   hex degerleri koyu temada okunmaz hale gelirdi. */
.btn-ghost.iyi{color:var(--ok);border-color:var(--ok)}
.btn-ghost.uyari{color:var(--warn);border-color:var(--warn)}
.btn-ghost.tehlike{color:var(--danger);border-color:var(--danger)}
.btn-kirmizi{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-kirmizi:hover{filter:brightness(.93)}
.rozet-kucuk{margin-left:6px;font-size:.68rem;padding:2px 8px;vertical-align:middle}
/* Islem dugmeleri tek satirda kalmali: "Sil" alt satira dusunce satir yuksekligi
   iki katina cikiyor ve tablo duzensiz gorunuyor. */
.islem-hucre{flex-wrap:nowrap;white-space:nowrap}
.islem-hucre .btn{white-space:nowrap;flex:0 0 auto}
.table td .btn-sm{white-space:nowrap}
/* Optik kaydirma: logonun govdesini kutunun ortasina getirir. Deger yoksa
   hicbir sey olmaz. Yorungede img'ye uygulaniyor, .yorunge-oge'ye DEGIL —
   orada karsi-donus animasyonu var, transform'lar birbirini ezerdi. */
.yorunge-oge img,.giris-sahip img{
  transform:translate(var(--kx,0),var(--ky,0))
}

/* ── Giris dugmesi ──────────────────────────────────────────────────────── */
/* Kartin en belirgin ogesi ve markanin rengini tasiyor. Ton TEK bir
   degiskenden turuyor: ust parlaklik, alt kenar ve golge color-mix ile
   hesaplaniyor. Boylece baska bir yararlanicida marka.json'daki "renk"
   degisince butun katmanlar birlikte kayiyor — alti ayri hex elle
   guncellenmiyor. Deger yoksa lacivert varsayilan kullanilir. */
.giris-kart .btn-primary{
  --renk: var(--marka-renk, #0d3a66);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--renk) 78%, white) 0%,
    var(--renk) 52%,
    color-mix(in srgb, var(--renk) 88%, black) 100%);
  border:1px solid color-mix(in srgb, var(--renk) 62%, black);
  color:#fff;
  text-shadow:0 -1px 0 rgba(0,0,0,.35);
  letter-spacing:.01em;
  padding:11px 16px;
  /* Ustte ic parlaklik (isik yukaridan), altta KATI bir kenar: dugmenin
     kalinligi bu kati kenardan okunuyor, bulanik golgeden degil. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 3px 0 color-mix(in srgb, var(--renk) 55%, black),
    0 6px 16px color-mix(in srgb, var(--renk) 40%, transparent);
}
.giris-kart .btn-primary:hover{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--renk) 68%, white) 0%,
    color-mix(in srgb, var(--renk) 92%, white) 52%,
    var(--renk) 100%);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 4px 0 color-mix(in srgb, var(--renk) 55%, black),
    0 9px 20px color-mix(in srgb, var(--renk) 45%, transparent);
}
/* Basilinca dugme kati kenarinin uzerine oturur: yukseklik 3px'ten 1px'e iner
   ve ayni miktarda asagi kayar, yani toplam yukseklik sabit kalir. */
.giris-kart .btn-primary:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.28),
    0 1px 0 color-mix(in srgb, var(--renk) 55%, black),
    0 2px 6px color-mix(in srgb, var(--renk) 35%, transparent);
}
.giris-kart .btn-primary:disabled{opacity:.65;transform:none}

/* ── Temalar ────────────────────────────────────────────────────────────── */
/* Her tema YALNIZCA belirtecleri yeniden tanimlar; bilesen kurallarina
   dokunmaz. Bir bilesen kendi rengini sabit yazarsa temalarin disinda kalir —
   yumusak zeminlerin yanindaki kenar renkleri bu yuzden color-mix'e cevrildi.
   Varsayilan (acik) :root'ta duruyor; buradakiler ondan sapan degerler. */

/* GECE — gercek koyu tema. Zemin saf siyah degil: uzun sure bakilan bir
   tabloda saf siyah uzerine beyaz metin, kenarlarda hayalet iz birakiyor. */
[data-tema="gece"]{
  --accent:#93a4bd; --accent-ink:#cbd5e5; --accent-soft:#2b3444;
  --navy:#e8ecf3; --ink:#e8ecf3; --muted:#98a3b4; --faint:#6f7a8b;
  --bg:#161a21; --surface:#1e232c; --surface-2:#252b36;
  --border:#333b48; --border-strong:#414b5a;
  --ok:#4ade80; --ok-soft:#16281d; --caution:#e3b341; --caution-soft:#2b2418;
  --warn:#f59e0b; --warn-soft:#2e2113; --danger:#f87171; --danger-soft:#2f1a1a;
  --pazar:#a79fe0; --pazar-ink:#a79fe0; --pazar-soft:#262238;
  --metal-kenar:#11151b;
  --yan-ust:#1a1f27; --yan-alt:#12161c;
  --yan-metin:#aab3c2; --yan-baslik:#eef1f6; --yan-soluk:#6b7482;
  --metal-btn:linear-gradient(180deg,#39424f 0%,#262d37 100%);
  --metal-btn-hover:linear-gradient(180deg,#434d5c 0%,#2e3641 100%);
  --metal-light:linear-gradient(180deg,#2a303a 0%,#222831 100%);
  --metal-icon:linear-gradient(145deg,#5d6878 0%,#333b47 100%);
  --btn-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 -2px 0 rgba(0,0,0,.3) inset,
    0 3px 0 rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.4);
  /* Koyu zeminde gölge daha koyu ve daha geniş olmalı: açık temadaki değerler
     koyu arka planda görünmez kalıyor. */
  --kart-golge:0 1px 0 rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.42),0 8px 16px rgba(0,0,0,.45);
  --kart-golge-ustu:0 2px 0 rgba(0,0,0,.45),0 5px 8px rgba(0,0,0,.5),0 16px 28px rgba(0,0,0,.55);
  --sema-golge:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 6px 10px rgba(0,0,0,.66));
  --sema-golge-ustu:drop-shadow(0 3px 0 rgba(0,0,0,.66)) drop-shadow(0 12px 18px rgba(0,0,0,.72));
}
/* Koyu temada beyaz zeminli logolar ve karekod olduklari gibi kalir; onlarin
   kontrasti kendi beyazina bagli. */
[data-tema="gece"] .mfa-qr{background:#fff}

/* LACIVERT — acik ama serin. Kagit beyazi yerine hafif mavi kirili yuzeyler. */
[data-tema="lacivert"]{
  --accent:#3f5b86; --accent-ink:#27405f; --accent-soft:#e2e9f4;
  --navy:#1b2740; --ink:#1b2740; --muted:#57647d; --faint:#8590a5;
  --bg:#e4e9f2; --surface:#ffffff; --surface-2:#eef2f9;
  --border:#cfd8e8; --border-strong:#b6c2d8;
  --metal-kenar:#1d2b45;
  --yan-ust:#1f2f4d; --yan-alt:#16223a;
  --yan-metin:#b9c6dd; --yan-baslik:#f0f4fb; --yan-soluk:#6d7d99;
  --vurgu-1:#2f6fd0; --vurgu-2:#5b6ee0;
  --metal-btn:linear-gradient(180deg,#4a628a 0%,#2f4468 100%);
  --metal-btn-hover:linear-gradient(180deg,#556e98 0%,#374d75 100%);
  --metal-icon:linear-gradient(145deg,#8fa2c0 0%,#3f5680 100%);
}

/* KAGIT — sicak, dusuk kontrast. Gun boyu rapor okuyan icin. */
[data-tema="kagit"]{
  --accent:#7a6a55; --accent-ink:#5b4e3d; --accent-soft:#efe9df;
  --navy:#33291d; --ink:#33291d; --muted:#6b6052; --faint:#978c7c;
  --bg:#efe9dd; --surface:#fdfbf6; --surface-2:#f5efe4;
  --border:#ded4c3; --border-strong:#c9bda8;
  --metal-kenar:#3a3126;
  --yan-ust:#3c3427; --yan-alt:#2c261c;
  --yan-metin:#cfc4b0; --yan-baslik:#f7f2e8; --yan-soluk:#8a7f6c;
  --vurgu-1:#b07d3a; --vurgu-2:#8a6a4f;
  --metal-btn:linear-gradient(180deg,#6e6252 0%,#4c4436 100%);
  --metal-btn-hover:linear-gradient(180deg,#7a6d5c 0%,#564d3e 100%);
  --metal-icon:linear-gradient(145deg,#b3a691 0%,#5f5544 100%);
}

/* ── Ust cubuktaki kullanici dugmesi ────────────────────────────────────── */
/* Ad TAM gorunuyor. Eskiden yalnizca iki harflik bir daire vardi ve kimin
   girdigi ancak uzerine gelince anlasiliyordu. */
.kul-dugme{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;
  border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);color:var(--yan-baslik);cursor:pointer;
  font-family:inherit;transition:background .13s,border-color .13s;max-width:330px}
.kul-dugme:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)}
.kul-dugme[aria-expanded="true"]{background:rgba(255,255,255,.16)}
.kul-metin{display:flex;flex-direction:column;align-items:flex-start;
  line-height:1.25;min-width:0;text-align:left}
.kul-metin b{font-size:.83rem;font-weight:700;max-width:190px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kul-metin small{font-size:.67rem;color:var(--yan-metin);max-width:190px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kul-ok{width:15px;height:15px;color:var(--yan-metin);flex:none}
@media(max-width:820px){ .kul-metin{display:none} }

/* Avatar: harf ya da resim. Resim varsa background olarak biniyor, <img>
   olarak degil — kirpma, oranlama ve yuvarlaklik tek satirda cozuluyor. */
.avatar{background-size:cover;background-position:center;overflow:hidden;flex:none;padding:0}
.avatar.avatar-buyuk{width:52px;height:52px;font-size:1.05rem}

/* ── Profil cekmecesi ───────────────────────────────────────────────────── */
.cekmece-ov{position:fixed;inset:0;background:rgba(10,15,26,.42);z-index:60;
  opacity:0;transition:opacity .18s}
.cekmece-ov.acik{opacity:1}
.cekmece{position:fixed;top:0;right:0;bottom:0;width:min(410px,100%);z-index:61;
  background:var(--surface);border-left:1px solid var(--border);
  box-shadow:-14px 0 44px rgba(0,0,0,.22);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .22s ease}
.cekmece.acik{transform:none}
@media(prefers-reduced-motion:reduce){
  .cekmece,.cekmece-ov{transition:none}
}
.cekmece-bas{display:flex;align-items:flex-start;gap:12px;padding:16px 16px 14px;
  border-bottom:1px solid var(--border);background:var(--surface-2)}
.cekmece-kimlik{min-width:0;flex:1;padding-top:2px}
.cekmece-bas-islem{display:flex;align-items:center;gap:6px;flex:none}
.cekmece-kimlik b{display:block;font-size:.98rem;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cekmece-kimlik small{display:block;font-size:.75rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cekmece-kimlik small.soluk{color:var(--faint);font-size:.72rem}
.cekmece-govde{flex:1;overflow-y:auto;padding:6px 16px 16px}
.cekmece-bolum{padding:12px 0;border-bottom:1px solid var(--border)}
.cekmece-bolum:first-child{padding-top:0}
.cekmece-bolum:last-child{border-bottom:none}
.cekmece-bolum h4{margin:0 0 10px;font-size:.7rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.cekmece-not{margin:8px 0 0;font-size:.74rem;color:var(--faint);line-height:1.5}
.cekmece-alt{display:flex;gap:8px;margin-top:4px}
.cekmece-alt .btn{flex:1}

/* Tema secici: renk orneklerine BAKARAK secilir, adini okuyarak degil. */
.tema-izgara{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.tema-kart{display:flex;align-items:center;gap:9px;padding:8px 10px;cursor:pointer;
  border:1.5px solid var(--border);border-radius:10px;background:var(--surface);
  font-size:.8rem;font-weight:600;color:var(--ink);font-family:inherit;
  transition:border-color .13s,background .13s}
.tema-kart:hover{background:var(--surface-2)}
.tema-kart.secili{border-color:var(--vurgu-1);background:var(--accent-soft)}
.tema-ornek{width:26px;height:26px;border-radius:7px;flex:none;
  border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}

/* Profil resmi alani */
.avatar-duzen{display:flex;align-items:center;gap:14px}
.avatar-duzen .avatar{width:64px;height:64px;font-size:1.2rem}
.avatar-islem{display:flex;flex-direction:column;gap:6px;flex:1}
/* Musteri secici koyu ust cubukta duruyor; .input'un acik zemin varsayimini
   burada geri aliyoruz. Ok isareti de kendi rengini tasiyor, yoksa koyu
   zeminde kayboluyor. */
.topbar .tenant .label{color:var(--yan-metin)}
.topbar .tenant select.input{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.18);
  color:var(--yan-baslik);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.topbar .tenant select.input:hover{background:rgba(255,255,255,.15)}
.topbar .tenant select.input:focus{
  border-color:rgba(255,255,255,.4);
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
/* Acilir listenin KENDISI isletim sisteminin cizdigi bir yuzey; oradaki
   secenekler koyu cubugun degil, sayfanin renklerini kullanmali. */
.topbar .tenant select.input option{background:var(--surface);color:var(--ink)}
@media(max-width:960px){ .topbar .tenant .label{display:none} }
/* Profil resmi ÇERÇEVEYE tıklanarak degisiyor. Ayri bir "Resim sec" dugmesi
   paneli kalabalklastiriyordu; ustune gelince cikan katman tiklanabilir
   oldugunu soyluyor. */
.avatar-dugme{position:relative;padding:0;border:2px solid var(--border);cursor:pointer;
  font-family:inherit;transition:border-color .13s}
.avatar-dugme:hover{border-color:var(--accent)}
/* Kose rozeti: tiklanabilirligi RESMI ORTMEDEN soyluyor. Onceki cozum,
   avatarin tam ortasina "Degistir" yaziyordu ve 52 piksellik bir portrede
   o yazi yuzun ustune biniyordu. */
.avatar-sarmal{position:relative;display:inline-block;flex:none;line-height:0}
.avatar-rozet{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;
  border-radius:50%;display:grid;place-items:center;pointer-events:none;
  background:var(--surface);color:var(--muted);border:1.5px solid var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,.18);transition:color .13s,border-color .13s}
.avatar-rozet svg{width:11px;height:11px}
.avatar-sarmal:hover .avatar-rozet{color:var(--accent);border-color:var(--accent)}

/* Baglanti gorunumlu kucuk dugme: "Resmi kaldir" gibi ikincil islemler icin.
   Tam bir dugme koymak, kaldirma islemini kaydetmekle ayni agirliga cikarirdi. */
.baglanti-dugme{background:none;border:none;padding:0;margin-top:4px;cursor:pointer;
  font-family:inherit;font-size:.72rem;font-weight:600;color:var(--danger);
  text-decoration:underline;text-underline-offset:2px}
.baglanti-dugme:hover{filter:brightness(.88)}

/* Kaydirmasiz sigsin diye alanlar biraz siklastirildi. Profil bir okuma
   ekrani degil; kaydirma cubugu cikinca tema ve cikis gorunmez oluyor. */
.cekmece .field{margin-bottom:9px}
.cekmece .cekmece-bolum h4{margin-bottom:8px}
.cekmece .tema-izgara{gap:8px}
.cekmece .tema-kart{padding:7px 9px}
.cekmece .ozet-satir{padding:5px 0;font-size:.82rem}
/* Harfler ayri bir cocukta; "Degistir" katmani onun ustune biniyor. */
.avatar-harf{display:grid;place-items:center;width:100%;height:100%}
/* Kisa degerler yan yana: unvan ve departman alt alta konunca panel
   kaydirmaya dusuyordu. Dar ekranda yine alt alta iniyorlar. */
.alan-ikili{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){ .alan-ikili{grid-template-columns:1fr} }
/* Panel kaydirmasiz sigmali; aralikar son bir tik siklastirildi. */
.cekmece .field{margin-bottom:7px}
.cekmece .cekmece-bolum{padding:10px 0}
.cekmece .tema-kart{padding:6px 9px}
.cekmece-bas{padding-bottom:12px}
/* Kartlar ICERIGE gore hizalanir, esit yukseklige GERILMEZ. Varsayilan
   stretch, kisa karti uzun kartin boyuna cekip altinda bos bir alan
   birakiyordu. */
.kutu-izgara{align-items:start}
/* Guvenlik ekraninda uc kart: dar ekranda ikiye, sonra teke iner. */
.guvenlik-izgara{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
/* Cevrimici gostergesi: adin solunda kucuk bir nokta. Ayri bir sutun
   harcamiyor; kimin ekranin basinda oldugu bir bakista okunuyor. */
.cevrim-nokta{display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:7px;vertical-align:middle;background:var(--border-strong);flex:none}
.cevrim-nokta.acik{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.cevrim-sayi{color:var(--ok)}
/* Kart govdesi. .card kendi ic bosluguna sahip degil — icindeki tablo tam
   genislikte olsun diye. Metin ve alan tasiyan kartlarda bu sarmal gerekiyor;
   yoksa satirlar kartin kenarina yapisiyor ve uzun bir deger (e-posta gibi)
   kartin disina tasiyor. */
.kart-govde{padding:14px 20px 16px}
.kart-govde .rapor-not{margin-bottom:0}
/* Uzun deger kirpilmak yerine sarsin: e-posta okunabilir kalmali. */
.ozet-satir span{flex:0 1 auto;min-width:0}
.ozet-satir b{min-width:0;text-align:right;overflow-wrap:anywhere}
/* Yan menudeki marka blogu — KOYU ZEMININ USTUNDE, ters renklerle.

   Once beyaz bir levha denendi; logolar kendi renklerinde duruyordu ama
   koyu menunun ortasinda parlak bir kart gibi durup dikkat caliyordu.

   Ters cevirme CSS ile yapiliyor, dosyalarin ayri bir "koyu zemin" surumu
   hazirlanarak DEGIL: firma logosu her kurulumda degisiyor ve her yeni
   musteride ikinci bir dosya hazirlamak gerekirdi. brightness(0) once
   goruntuyu tamamen siyaha indiriyor (renk ne olursa olsun), invert(1) de
   onu beyaza ceviriyor — sonucta hangi logo gelirse gelsin temiz beyaz bir
   siluet cikiyor. Saydam pikseller saydam kaliyor. */
.brand-markali{padding:6px 10px 16px;display:block}
.brand-levha{display:flex;flex-direction:column;align-items:center;gap:10px}
.brand-sahip{
  display:block;height:auto;
  filter:brightness(0) invert(1);
  transform:translate(var(--kx,0),var(--ky,0));
}
.brand-sahip{width:calc(132px * var(--olcek,1));opacity:.94}
/* Musteri logosunun altinda urunun Quality logosu. Musteri logosundan kucuk ve
   soluk: ekran yararlanicinin. Koyu zeminde lacivert harfler kayboldugu icin
   musteri logosu gibi beyaz siluete cevriliyor. */
.brand-urun{display:block;height:40px;width:auto}
/* .brand b kurali ("QTeşvik" yazisi: blok, 1.08rem) Q'yu ayri satira
   dusuruyordu; yazi-logonun harfi kendi boyunda, satir icinde kalir. */
.brand .brand-urun b,.brand-urun b{display:inline;font-size:inherit;letter-spacing:inherit;color:inherit}
.brand-ayrac{width:76px;height:1px;background:rgba(255,255,255,.16)}
/* Marka onizlemeleri: logonun gercekte duracagi iki zemin. Yan menu koyu
   oldugu icin oradaki onizleme de koyu — ters cevrilmis hali burada gorulmeli,
   kaydedip menuye bakarak degil. */
.marka-onizleme{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;min-height:112px;border-radius:10px;padding:14px;border:1px solid var(--border)}
.marka-onizleme.acik{background:#fff}
.marka-onizleme.koyu{background:linear-gradient(180deg,var(--yan-ust) 0%,var(--yan-alt) 100%)}
.marka-onizleme img{height:auto;display:block;max-width:100%}
.marka-onizleme img.ters{filter:brightness(0) invert(1);opacity:.92}
/* Koyu onizleme ust cubugun aynisi: yatay, logo | cizgi | Quality. */
.marka-onizleme.koyu{flex-direction:row;gap:16px}
.marka-onizleme.koyu img.ters{width:auto;max-width:190px}
.marka-onizleme .marka-ayrac{width:1px;height:28px;background:rgba(255,255,255,.2)}
.marka-onizleme .brand-urun{height:34px}
/* KISA PENCEREDE EZILME. Ust cubuk ve marka blogu birer flex cocugu ve
   varsayilan flex-shrink:1 tasiyorlar; pencere alcaldiginda ikisi de
   buzuluyordu. Ust cubuk 60 pikselden 43'e iniyor, marka blogu da menunun
   uzerine biniyordu — logonun ustten kesilmis gorunmesinin sebebi buydu.
   Ikisi de sabit; daralmasi gereken yer menu listesi, o da kayabiliyor. */
.topbar{flex:none}
.brand{flex:none}
.nav-sarmal{overflow-y:auto}
/* Alcak pencerede marka blogu kuculur. 636 piksellik bir pencerede blok 122
   piksel yiyor ve menu kayiyor — Pano gorunmez oluyor. Logolar kucultulunce
   liste tam sigiyor. Blok kaybolmuyor; yalnizca yer acacak kadar iniyor. */
@media (max-height:760px){
  /* Marka bloguna ait kucultmeler kalkti: blok 28.09.2026'dan beri ust
     cubukta, menunun yuksekligini yemiyor. */
  /* Alcak pencerede satirlar biraz sikisir: 1366x768 ekranda tarayici
     cubuklari dusunce sayfaya ~650 piksel kaliyor. Kapali menunun kendi
     kurallari (.yan-kapali) daha ozgul, bunlardan etkilenmiyor. */
  .nav-item{padding:3px 10px}
  .nav-item .i{width:28px;height:28px;border-radius:8px}
  .nav-item .i svg{width:15px;height:15px}
  .nav-group-title{padding:7px 2px 3px}
}

/* Marka tanimi gelene kadar blok gorunmez ama YER KAPLAR: display:none
   olsaydi menu yukari zipluyor, sonra geri iniyordu. */
.marka-bekliyor{visibility:hidden}

/* ── Pano yerlesimi (surukle-birak) ─────────────────────────────────────── */
/*
   Pano bloklari izgaranin DOGRUDAN cocugu: surukleme ozellikleri sarmalayiciya
   konuyor, karta degil. Karta konsaydi kartin icindeki tablo satirlari ve
   dugmeler de surukleme baslatirdi.
*/
.pano-blok{min-width:0;display:flex;flex-direction:column;position:relative}
.pano-blok>*{flex:1;margin:0}
/* Alt kartlar: iki ESIT sutun; "genis" olan blok ikisini birden kaplar.
   Eskiden 1.4/1 idi. Asimetrik izgarada bir kartin genisligi kacinci sirada
   oldugona bagli oluyor: kullanici karti tasidiginda yalnizca yeri degil boyu
   da degisiyordu. Surukle-birak varken sira degistirmek yalnizca YERI
   degistirmeli. */
/* PANO KARTLARI TEK SÜTUN — her biri bir SATIR.
   Önce iki sütundu ve bu, kartlar açıkken mantıklıydı. Artık hepsi kapalı
   geliyor: kapalı bir kart 46 pikselik bir başlık satırı, iki sütuna dizilince
   sağdaki ile soldaki farklı yükseklikte kalıp kademeli bir duvar oluşturuyor.
   Alt alta tek satır, okunması kolay bir liste veriyor — hangi bölümde ne
   olduğu başlıktaki özetten görünüyor, açmak isteyen tıklıyor.
   `genis` bayrağı tek sütunda zaten anlamsız; kalması zararsız. */
.pano-kartlar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;
  align-items:start;margin-top:16px}
.pano-kartlar>.pano-blok.genis{grid-column:1 / -1}
/* Zaman gorunumu kendi verisini sonradan yaziyor; bos yuva yer kaplamasin. */
.pano-kartlar>.pano-blok:has(>#zamanYuva:empty){display:none}

/* Duzenleme kipi. Kesikli cerceve "burasi tasinabilir" diyor; kirmizi ya da
   vurgulu bir dolgu kullanilmadi, cunku kutucuklarin kendi renkleri (uyari,
   tehlike) anlam tasiyor ve duzenlerken de okunabilir kalmali. */
.pano-duzen-serit{background:var(--surface-2);border:1px dashed var(--border-strong);
  border-radius:10px;padding:10px 14px;margin-bottom:14px;
  font-size:.82rem;color:var(--muted);line-height:1.5}
.pano-duzen-serit p{margin:0}
/* Kaldirilanlar rafi. Ayri bir "ekle" penceresi yerine surekli gorunuyor:
   kullanici neyi cikardigini ve geri koyabilecegini ayni yerde goruyor. */
.pano-raf{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:9px;
  padding-top:9px;border-top:1px dashed var(--border)}
.pano-raf.bos{color:var(--faint);font-size:.78rem}
.pano-raf-baslik{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--faint);margin-right:2px}
.pano-ekle{font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);
  border-radius:999px;padding:4px 11px;line-height:1.3}
.pano-ekle:hover{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
/* Kaldirma dugmesi: blogun sag ust kosesi. Tutamak noktalarinin yerine geciyor
   (ikisi ayni koseye sigmaz), o yuzden duzenleme kipinde noktalar sola kayiyor. */
.pano-cikar{position:absolute;top:4px;right:4px;z-index:3;width:22px;height:22px;
  display:grid;place-items:center;cursor:pointer;font-family:inherit;
  font-size:1rem;line-height:1;border-radius:999px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--muted)}
.pano-cikar:hover{border-color:var(--danger);background:var(--danger-soft);
  color:var(--danger)}
.pano-duzenleme .pano-blok{cursor:grab;border-radius:12px;
  outline:1px dashed var(--border-strong);outline-offset:3px}
.pano-duzenleme .pano-blok:hover{outline-color:var(--accent)}
.pano-duzenleme .pano-blok.suruklenen{opacity:.4;cursor:grabbing}
/* Duzenlerken kartin ici tiklanmiyor: tek is var, tasimak. AMA kaldirma
   dugmesi HARIC — o da blogun dogrudan cocugu ve kurala dahil olunca tiklama
   altindaki karta gidiyor, dugme hic calismiyordu. */
.pano-duzenleme .pano-blok>*:not(.pano-cikar){pointer-events:none}
.pano-duzenleme .pano-blok .git{visibility:hidden}
/* Tutamak: kosede alti nokta. Ayri bir kulp degil, blogun tamami tutuluyor —
   isaret amacli. */
.pano-tut{position:absolute;top:9px;right:32px;z-index:2;width:14px;height:10px;
  pointer-events:none;
  background:radial-gradient(circle,var(--faint) 1.1px,transparent 1.2px) 0 0/5px 5px;
  opacity:.75}

/* ── Kutucuk renkleri ───────────────────────────────────────────────────── */
/*
   Ham hex SAKLANMIYOR, renk KODU sakleniyor. Zemin color-mix ile o anki
   yuzeye karistiriliyor: ayni kod acik temada soluk bir tonu, koyu temada
   koyu bir tonu veriyor ve yazi her ikisinde de okunur kaliyor. Kullanici
   serbest renk sesece koyu temada gormedigi bir rengi secebilirdi.
*/
[data-renk="mavi"]{--renk:#2f6fae}
[data-renk="turkuaz"]{--renk:#1f8a8a}
[data-renk="yesil"]{--renk:#2f7d5e}
[data-renk="sari"]{--renk:#b09122}
[data-renk="turuncu"]{--renk:#b8762f}
[data-renk="kirmizi"]{--renk:#b8433f}
[data-renk="mor"]{--renk:#7a5cb8}
[data-renk="gri"]{--renk:#5c6470}
.pano-blok[data-renk]>.card{
  background:color-mix(in srgb,var(--renk) 13%,var(--surface));
  border-color:color-mix(in srgb,var(--renk) 32%,var(--border))}
/* Kutucugun kendi rakam rengi (yesil/kirmizi) ANLAM tasiyor; zemin degisse de
   dokunulmuyor. Yalnizca ust etiket biraz koyulasiyor ki zeminden ayrilsin. */
.pano-blok[data-renk]>.card.kpi>.k{color:color-mix(in srgb,var(--renk) 70%,var(--ink))}

/* Palet: cekmecenin basliginin altinda ince bir serit. */
.drawer-renk{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:10px 20px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.drawer-renk-baslik{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--faint);margin-right:3px}
.renk-nokta{width:22px;height:22px;border-radius:999px;cursor:pointer;padding:0;
  border:1px solid var(--border-strong);background:var(--renk,var(--surface))}
/* Varsayilan: rengi olmayan nokta. Capraz cizgi "renk yok" diyor. */
.renk-nokta[data-renk=""]{background:
  linear-gradient(135deg,var(--surface) 45%,var(--border-strong) 45% 55%,var(--surface) 55%)}
.renk-nokta:hover{transform:scale(1.12)}
.renk-nokta.secili{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.renk-nokta:hover{transform:none}}

/* ── Kenar cubugunu kapat / ac ──────────────────────────────────────────── */
/*
   Dugme cubugun ICINDE degil, kabuga gore konumlanmis: cubukta overflow:hidden
   var (logo olceklemesi icin) ve kenarina tasan bir dugme kirpiliyordu.
   Sol degeri izgara sutunuyla ayni degiskenden geliyor, boylece kapali/acik
   fark etmeksizin tam kenarda duruyor.
*/
/* Dikeyde ORTADA. Once ustte sabit bir noktadaydi ve marka logosunun
   hizasina denk geliyordu; logo markadan markaya degisken boyutta oldugu icin
   bazilarinda uzerine binerdi. Orta nokta markadan bagimsiz. */
.yan-dugme{position:absolute;left:var(--yan-genislik,250px);top:50%;z-index:7;
  width:22px;height:22px;transform:translate(-50%,-50%);border-radius:999px;cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:var(--vurgu-1);border:2px solid var(--yan-ust);color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35);transition:background .13s}
.yan-dugme:hover{background:var(--vurgu-2)}
.yan-dugme svg{width:12px;height:12px;display:block;transition:transform .18s}
.yan-kapali .yan-dugme svg{transform:rotate(180deg)}

/* Kapali durum. Genislik degisince gerisi buradan: yazilar gizlenir, ikonlar
   ortalanir. Metinler display:none ile gidiyor; gorunurlugu kismak yer
   kaplamaya devam ederdi ve 66 piksele sigmazlardi. */
/* Kose yuvarlakligi 12 px: acik satir menu 9'a dondu (29.09), kapali menu
   oldugu gibi kaldi. Menu kabi yanlara 5 px tasiyor, ikon sutunu genis. */
.yan-kapali .nav-item{justify-content:center;padding:4px;border-radius:12px}
.yan-kapali .nav-item>span:not(.i){display:none}
.yan-kapali .nav-sarmal{margin:0 -5px}
/* Kapalida tek sutun ikon; kare 32 px ki 13 satir kisa ekranda da sigsin.
   Alt menunun yazisi 66 piksele sigmiyor, gizlenir — sayfanin kendi
   seridinden gezilir. */
.yan-kapali .nav-kutular{grid-template-columns:1fr;gap:2px}
.yan-kapali .nav-item .i{width:32px;height:32px;border-radius:9px}
.yan-kapali .nav-item .i svg{width:17px;height:17px}
.yan-kapali .nav-alt{display:none}
.yan-kapali .nav-fav-ipucu{font-size:0;padding:14px 0}
/* Kapali menude ikonun saga dogru acilip adini gostermesi (app.js
   navAcilirBagla). Katman ikonun tam ustunde, ayni zemin ve cizimle
   baslar; GENISLIGI ikon boyundan yazinin boyuna (--gen, JS olcuyor)
   acilarak "ikon uzuyor" gorunur. clip-path ile acmak halkayi ve golgeyi
   de kirpiyordu. Kapanis aninda: fare zaten baska yerde. */
.nav-acilir{position:fixed;z-index:90;display:flex;align-items:center;visibility:hidden;
  box-sizing:border-box;overflow:hidden;width:var(--ikon,32px);
  padding-left:calc((var(--ikon,32px) - 17px) / 2);border-radius:9px;color:#fff;
  pointer-events:none;white-space:nowrap;font-size:.82rem;font-weight:500;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 18px rgba(0,0,0,.28)}
.nav-acilir.acik{visibility:visible;width:var(--gen,auto);
  transition:width .22s cubic-bezier(.2,.8,.2,1)}
/* Kapalida ikon uzerine gelince KALKMIYOR: katman ikonun yerini olcup ustune
   oturuyor, ikon bir piksel kalkinca katman altinda kaliyordu. */
.yan-kapali .nav-item:hover .i{transform:none}
.nav-acilir.etkin{box-shadow:0 0 0 2px rgba(255,255,255,.55),0 6px 18px rgba(0,0,0,.28)}
.nav-acilir svg{width:17px;height:17px;flex:none;display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
.nav-acilir span{flex:none;padding:0 16px 0 11px;opacity:0;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.nav-acilir.acik span{opacity:1;transition:opacity .16s .06s}
@media (prefers-reduced-motion:reduce){.nav-acilir.acik,.nav-acilir.acik span{transition:none}}
.yan-kapali #nav:not(.surukleniyor) .nav-fav-bos + .nav-fav-bos + .nav-group-title{margin-top:2px}
/* Grup basligi kapalida INCE BIR CIZGI oluyor: "Gunluk is / Analiz / Yonetim"
   ayrimi 66 pikselde yazilamaz ama gruplama bilgisi tamamen kaybolmamali. */
.yan-kapali .nav-group-title{font-size:0;letter-spacing:0;padding:0;height:1px;width:auto;
  margin:9px 10px 7px;background:rgba(255,255,255,.11);pointer-events:none}
.yan-kapali .nav-group-title>*,.yan-kapali .nav-group-title::before,.yan-kapali .nav-group-title::after{display:none}
.yan-kapali .nav-group-title:first-child{margin-top:2px}
/* Kapali menude grup katlama YOK: baslik ince cizgi, basilacak yer yok;
   katlanmis grubun ikonlari da gorunur kalir (yoksa ulasilamazdi). */
.yan-kapali .nav-grup-govde.kapali{grid-template-rows:1fr}
.yan-kapali .nav-grup-govde.kapali>.nav-kutular{overflow:visible;visibility:visible}
/* Marka blogu artik ust cubukta; menu daralinca ona dokunulmuyor. */
/* Alttaki "Kural seti / Demoyu sifirla" kapalida gizli: ikisi de metin. */
.yan-kapali .side-note{display:none}
.yan-kapali .sidebar{padding-left:8px;padding-right:8px}
.yan-kapali .yan-bant{margin:0 -8px 8px;padding:0 6px}
/* Dar menude logo 54 piksele sigdiriliyor; QTeşvik yazisi gider, simgesi kalir. */
.yan-kapali .yan-bant .brand-sahip{height:auto;max-height:30px;max-width:100%}
.yan-kapali .yan-bant>div:not(.logo){display:none}

/* ── Surec semasi ───────────────────────────────────────────────────────── */
/*
   GERCEK akis semasi: kutular, karar elmasi ve dallar. Ilk surumu yatay bir
   kutucuk zinciriydi ve kullanici hakli olarak "bunlar zaten ustte var" dedi:
   panodaki KPI kutucuklarinin ayni sayilarini ok koyarak tekrar ediyordu.
   Semanin kattigi sey sayi degil SUREC — hangi dalin nereye gittigi, saatin
   nerede isledigi, hangi yolun donguye hangisinin cikisa vardigi.

   SVG cizgileri elle yerlestirildi; viewBox sabit, genislik kaba gore
   olcekleniyor. Dar ekranda kucultmek yerine YATAY KAYIYOR: 900 pikselllik
   bir sema 400 piksele sigdirilirsa yazilar okunmaz olur.
*/
.sema-sarmal{overflow-x:auto;padding-bottom:4px}
.sema{width:100%;min-width:760px;height:auto;display:block}
/* GÖLGE ŞEKLE VERİLİYOR, GRUBA DEĞİL. Gruba verilseydi içindeki yazı da
   gölgelenir ve rakamlar bulanık görünürdü. */
/* Gri kutular metalik (renk --surface-2, degrade şemanın <defs>'inde). Tonlar
   temaya göre: koyu temada beyazla karışım üst yarıyı fazla açıyor ve gri
   etiketler ("HARCAMA") okunmuyordu, orada parlama çok daha hafif. */
:root{--metal-gri-1:color-mix(in srgb,var(--surface-2) 45%,#fff);--metal-gri-2:color-mix(in srgb,var(--surface-2) 82%,#fff);
  --metal-gri-3:color-mix(in srgb,var(--surface-2) 96%,#000);--metal-gri-4:color-mix(in srgb,var(--surface-2) 88%,#000)}
[data-tema="gece"]{--metal-gri-1:color-mix(in srgb,var(--surface-2) 84%,#fff);
  --metal-gri-2:color-mix(in srgb,var(--surface-2) 94%,#fff);--metal-gri-3:color-mix(in srgb,var(--surface-2) 92%,#000);
  --metal-gri-4:color-mix(in srgb,var(--surface-2) 80%,#000)}
.sema-kutu{fill:url(#semaMetalGri);stroke:var(--border-strong);stroke-width:1;
  filter:var(--sema-golge);transition:filter .13s}
.sema-elmas{fill:url(#semaMetalGri);stroke:var(--border-strong);stroke-width:1;
  filter:var(--sema-golge);transition:filter .13s}
/* Üstüne gelince kabarma artıyor: kutular tıklanabilir, kalkması bunu söylüyor. */
.sema-dugum:hover .sema-kutu,.sema-dugum:hover .sema-elmas{filter:var(--sema-golge-ustu)}
@media (prefers-reduced-motion:reduce){.sema-kutu,.sema-elmas{transition:none}}
.sema-dugum{cursor:pointer}
.sema-dugum:hover .sema-kutu,.sema-dugum:hover .sema-elmas{stroke:var(--accent);stroke-width:1.6}
.sema-dugum:focus-visible .sema-kutu,.sema-dugum:focus-visible .sema-elmas{
  stroke:var(--accent);stroke-width:2}
.sema-dugum:focus{outline:none}
.sema-etiket{font-size:10.5px;font-weight:700;letter-spacing:.05em;fill:var(--muted)}
.sema-sayi{font-size:22px;font-weight:800;fill:var(--accent-ink);
  font-variant-numeric:tabular-nums}
.sema-sayi.ok{fill:var(--ok)}
.sema-sayi.warn{fill:var(--warn)}
.sema-sayi.danger{fill:var(--danger)}
.sema-sayi.accent{fill:var(--accent)}
.sema-alt{font-size:9.5px;fill:var(--faint)}
.sema-ok{fill:none;stroke:var(--border-strong);stroke-width:1.6}
/* Geri donus KESIKLI: ileri akis degil, donguye geri donus. */
.sema-donus{fill:none;stroke:var(--warn);stroke-width:1.4;stroke-dasharray:5 4}
.sema-dal{font-size:10px;font-weight:700;fill:var(--muted)}
.sema-donus-yazi{font-size:9px;fill:var(--warn)}

/* Ust sira: kutucuklarin da ustunde duran blok(lar). Surukleme bolgesi degil
   (bkz. panoUstSira), o yuzden pano-kartlar gibi bir izgaraya gerek yok. */
.pano-ust{display:flex;flex-direction:column;gap:16px;margin-bottom:14px}
.pano-ust>.pano-blok{width:100%}
/* Sema altindaki para seridi. Tutarlar KUTULARA yazilmiyor: ozette asama
   asama tutar yok, "yolda olan" rakam uc asamayi birden kapsiyor ve tek bir
   kutuya yazilirsa o asamanin tutari sanilir. */
/* ── SÜREÇ ŞEMASININ DİKEY KARŞILIĞI ────────────────────────────────────────
   Geniş ekranda gizli; 640 px altında SVG'nin yerine geçiyor. Kutular aynı
   kabartmayı taşıyor ki iki gösterim aynı şeyin iki hâli gibi dursun. */
.sema-liste{display:none;flex-direction:column;gap:0}
.sl-oge{display:grid;grid-template-columns:1fr auto;grid-template-areas:"ad sayi" "alt sayi";
  gap:2px 12px;align-items:center;text-align:left;width:100%;
  background:var(--surface-2);border:1px solid var(--border);border-radius:11px;
  padding:11px 14px;cursor:pointer;font-family:inherit;box-shadow:var(--sema-golge)}
.sl-oge:active{filter:var(--sema-golge-ustu)}
.sl-ad{grid-area:ad;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--muted)}
.sl-sayi{grid-area:sayi;font-size:1.5rem;font-weight:800;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;line-height:1}
.sl-sayi.ok{color:var(--ok)}
.sl-sayi.warn{color:var(--warn)}
.sl-sayi.danger{color:var(--danger)}
.sl-sayi.accent{color:var(--accent)}
.sl-alt{grid-area:alt;font-size:.74rem;color:var(--faint);line-height:1.4}
/* Aşamalar arası bağ: ok yerine kısa bir dikey çizgi ve açıklaması. */
.sl-bag{display:flex;align-items:center;gap:8px;padding:7px 0 7px 22px;
  font-size:.72rem;color:var(--muted);position:relative}
.sl-bag::before{content:"";position:absolute;left:14px;top:0;bottom:0;
  width:1.6px;background:var(--border-strong)}
.sl-not{margin-top:9px;font-size:.72rem;color:var(--warn);line-height:1.45}

.sema-para{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.sema-para-oge{flex:1 1 260px;display:flex;align-items:baseline;gap:9px;
  padding:10px 14px;border-radius:10px;background:var(--surface-2);
  border:1px solid var(--border)}
.sema-para-oge b{font-size:1.15rem;font-weight:800;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sema-para-oge.ok b{color:var(--ok)}
.sema-para-oge span{font-size:.76rem;color:var(--faint);line-height:1.45}
.sema-para-oge.danger b{color:var(--danger)}
/* Cekmece satirinda "Birlige sunuldu ... / N gundur bekliyor". Ayri satir,
   cunku ustteki kunye satiri (dosya no, kalem, marka, tedarikci) zaten dolu
   ve buraya sikistirmak ikisini de okunmaz yapiyordu. */
.cek-birlik{grid-column:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:3px;font-size:.76rem;color:var(--faint)}
.cek-birlik b{font-weight:700;color:var(--muted)}
/* Kural seti surumu ile UYGULAMA surumu yan yana ama ayri: biri mevzuatin
   surumu, digeri yazilimin. Karistirilmasinlar diye uygulama surumu solukca. */
.side-surum{display:block;width:100%;font-size:.68rem;color:var(--yan-soluk);opacity:.75;margin-top:2px}
.yan-kapali .side-surum{display:none}

/* ── Yayin ekrani ───────────────────────────────────────────────────────── */
/* Gunluk OLDUGU GIBI gosteriliyor: "oldu galiba" yeterli degil, deploy'un ne
   yaptigini gormek gerekiyor. Sabit genislikli yazi ve kendi kaydirmasi. */
.yayin-gunluk{margin:0;padding:14px 18px;max-height:340px;overflow:auto;
  font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:.76rem;
  line-height:1.5;white-space:pre-wrap;word-break:break-word;
  background:var(--surface-2);color:var(--ink);border-top:1px solid var(--border)}
.yayin-kayit{padding:12px 20px;border-bottom:1px solid var(--border)}
.yayin-kayit:last-child{border-bottom:none}
.yayin-kayit-bas{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.yayin-kayit-bas b{font-variant-numeric:tabular-nums}
.yayin-kayit-bas>span:last-child{font-weight:600;color:var(--ink)}
.yayin-kayit ul{margin:6px 0 0;padding-left:20px;font-size:.82rem;
  color:var(--muted);line-height:1.6}

/* Yedek zamanlama satırı: alanlar yan yana, düğme sonda. Dar ekranda
   sarılıyor — kaydet düğmesi hiçbir zaman görünmez bir yere itilmiyor. */
.yedek-ayar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.yedek-ayar .field { margin: 0; min-width: 150px; }
.yedek-ayar .onay { margin: 0 0 9px; white-space: nowrap; }
.yedek-ayar .btn { margin-bottom: 2px; }

/* ── Ortam şeridi ────────────────────────────────────────────────────────────
   Kabuk height:100% olduğu için üstüne blok eklemek taşma yapardı; şeridin
   yüksekliği tek değişkende ve kabuk onu kendi yüksekliğinden düşüyor. */
:root { --serit-y: 26px; }
/* GÖRÜNÜRLÜĞÜN TEK ANAHTARI kökteki .ortam-dev sınıfı.
   Önce `hidden` özniteliği de kullanılıyordu ve ÇALIŞMIYORDU: buradaki
   `display:flex` yazar stili, tarayıcının `[hidden]{display:none}` kuralını
   eziyor. Şerit "gizli" görünüp ekrana çiziliyordu. İki anahtarlı bir
   görünürlük her zaman böyle biter; tek anahtar bırakıldı. */
.ortam-serit { display: none; }
.ortam-dev .ortam-serit {
  height: var(--serit-y);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: #3a2500; font-weight: 800;
  /* Çapraz tarama: düz bir renk şeridi arayüzün parçası sanılabiliyor,
     tarama deseni "burası normal değil" diyor. */
  background: repeating-linear-gradient(-45deg,
    #f6b73c 0 14px, #e8a520 14px 28px);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
  user-select: none;
}
.ortam-dev .ortam-serit span { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .85; }
/* Danışman görünümü anahtarı. Şeridin içinde duruyor çünkü şerit yalnızca
   geliştirme kopyasında çiziliyor — düğmenin canlıya sızması diye bir ihtimal
   kalmıyor. Şeridin kendi rengini bozmuyor: aynı sarı zemin üstünde koyu
   çerçeveli küçük bir düğme. */
.ortam-dev .ortam-serit .serit-dugme {
  font: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: none; color: #3a2500; cursor: pointer;
  background: rgba(255,255,255,.45); border: 1px solid rgba(58,37,0,.35);
  border-radius: 999px; padding: 1px 10px; line-height: 1.5;
}
.ortam-dev .ortam-serit .serit-dugme:hover { background: rgba(255,255,255,.75); }
.ortam-dev .ortam-serit .serit-dugme:focus-visible { outline: 2px solid #3a2500; outline-offset: 1px; }

/* Müşteri değiştirici. Şeridin solunda: "hangi veriye bakıyorum" sorusu,
   "nasıl gösteriliyor" sorusundan önce gelir. */
.ortam-dev .ortam-serit .serit-kopyalar {
  display: inline-flex; align-items: center; gap: 4px;
  text-transform: none; letter-spacing: 0;
}
.ortam-dev .ortam-serit .serit-kopyalar .serit-su-an,
.ortam-dev .ortam-serit .serit-kopyalar .serit-kopya {
  font-size: .72rem; font-weight: 700; border-radius: 999px;
  padding: 1px 9px; line-height: 1.5; color: #3a2500;
}
/* Bulunulan kopya DÜĞME DEĞİL: tıklanacak bir şey gibi görünmemeli. */
.ortam-dev .ortam-serit .serit-kopyalar .serit-su-an {
  background: rgba(58,37,0,.85); color: #fff9ec;
}
.ortam-dev .ortam-serit .serit-kopyalar .serit-kopya {
  background: rgba(255,255,255,.4); border: 1px solid rgba(58,37,0,.3);
  text-decoration: none;
}
.ortam-dev .ortam-serit .serit-kopyalar .serit-kopya:hover { background: rgba(255,255,255,.8); }
.ortam-dev .ortam-serit .serit-kopyalar .serit-kopya:focus-visible {
  outline: 2px solid #3a2500; outline-offset: 1px;
}
/* Şerit gövdenin çocuğu; kök de onun kadar kısalmalı, yoksa sayfa
   26 piksel taşar ve her ekranda dikey kaydırma çubuğu çıkar. */
.ortam-dev #root { height: calc(100% - var(--serit-y)); }
/* Giriş ekranı #root'un içinde değil (gövde baştan yazılıyor) ve yüksekliğini
   100vh'den alıyor; şerit eklenince sayfa tam şerit boyu taşıyordu. */
.ortam-dev .giris-sayfa { min-height: calc(100vh - var(--serit-y)); }
/* Kapatma düğmesi kabuğa göre konumlanıyor; şerit onu aşağı itmemeli diye
   kabuk zaten kısaldı — ayrıca bir şey gerekmiyor. */
@media (max-width: 720px) {
  .ortam-dev .ortam-serit span { display: none; }
}

/* ── Sol menüde alt menü ─────────────────────────────────────────────────────
   Şirket Profili'nin bölümleri (markalar, hedef pazarlar, iştirakler, bayiler,
   yurt dışı birimler) burada açılıyor. Yalnız o sayfadayken görünür: kapalıyken
   menüyü altı satır uzatmasın, açıkken nerede olunduğu görünsün. Üst öğeden
   girintiyle ve daha ince yazıyla ayrılıyor — aynı hiyerarşide değiller.
   Renkler .nav-item ile aynı aileden: menü koyu zeminde duruyor. */
/* Satir menude alt menu ust ogenin hemen altinda, yazisi ikonun hizasinda. */
.nav-alt{display:flex;align-items:center;width:100%;border:none;background:none;
  font-family:inherit;font-size:.82rem;font-weight:500;color:#aab3c2;cursor:pointer;
  padding:4px 10px 4px 40px;border-radius:8px;text-align:left;
  transition:background .13s,color .13s}
.nav-alt:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-alt.active{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
/* Girinti tek başına yetmiyor: üst öğeyle alt öğe arasında görsel bir bağ
   olsun diye ince bir dikey çizgi. */
.nav-alt::before{content:"";width:2px;height:14px;margin-right:10px;margin-left:-12px;
  border-radius:1px;background:rgba(255,255,255,.16)}
.nav-alt.active::before{background:var(--vurgu-1)}

/* Profil şeridi artık çapa değil, bölüm değiştirici — seçili olan işaretli. */
.profil-kutu{border:1px solid transparent;font-family:inherit;cursor:pointer}
.profil-kutu.secili{border-color:var(--accent);background:var(--accent-soft)}
.profil-kutu.secili .n{color:var(--accent-ink)}

/* Hedef pazar satırındaki işlem düğmeleri tek satırda kalsın: "Dönemler"
   eklenince sütun taşıyor ve "Sil" alta düşüp her satırı iki kat uzatıyordu. */
.pazar-islem{white-space:nowrap;width:1%}
.pazar-islem .btn{margin-right:4px}
.pazar-islem .btn:last-child{margin-right:0}

/* Katlanır menü başlığındaki ok. Kapalıyken sağa, açıkken aşağı bakar —
   katlanabilir olduğu görünmezse kimse başlığa ikinci kez basmayı denemez. */
/* Satirin sonunda, adin sagi; favori yildizi ondan sonra (order). */
.nav-ok{order:2;display:grid;place-items:center;width:16px;height:16px;flex:none;
  color:inherit;opacity:.75;transition:transform .15s}
.nav-ok svg{width:13px;height:13px}
.nav-ok.acik{transform:rotate(90deg)}

/* Şirketin kendisini gösteren kutu: sayacak bir şeyi yok, sayı yerine simge.
   Yüksekliği diğer kutularla aynı kalsın diye simge sayı satırının yerine
   oturuyor — kutular şeritte aynı hizada durmalı. */
.profil-kutu.kutu-simge .n{display:grid;place-items:center}
.profil-kutu.kutu-simge .n svg{width:26px;height:26px;opacity:.7}

/* ── Satırda hızlı işlem şeridi ──────────────────────────────────────────────
   Dosyayı açmadan durum değiştirmek için. Üç kural düzeni ayakta tutuyor:

   1. SÜTUN SABİT GENİŞLİKTE. Şerit gizliyken de yerini koruyor; görünürlük
      değişince tablo genişliği oynamıyor, satırlar zıplamıyor.
   2. DÜĞMELER SAĞA HİZALI VE TEK SATIR. `white-space:nowrap` ile "Hazır
      işaretle" iki satıra bölünmüyor — pencerenin altında bölünüyordu.
   3. GÖRÜNÜRLÜK opaklıkla, `display` ile değil: yer kaplamaya devam ettiği
      için hizalama fareyle birlikte değişmiyor. */
.islem-serit{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.islem-serit .btn{white-space:nowrap}
/* HER ZAMAN GÖRÜNÜR. Önce fareyle belirmesini denedim; bulunamadı — gizli
   düğme düğme değil. Bunun yerine şerit SESSİZ duruyor: gölgesi yok, rengi
   soluk. Fare satıra gelince tam rengine kavuşuyor, yani listede gezerken
   göz yorulmuyor ama düğmenin orada olduğu ilk bakışta belli. */
.islem-serit .btn{box-shadow:none;opacity:.72;transition:opacity .12s ease,transform .13s}
.table tbody tr:hover .islem-serit .btn,
.table tbody tr:focus-within .islem-serit .btn{opacity:1}

@media (prefers-reduced-motion:reduce){.islem-serit .btn{transition:none}}

/* Ekran okuyucu için başlık; görsel olarak yok. */
.gizli-metin{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Lisans şeridi ───────────────────────────────────────────────────────────
   Ortam şeridiyle (geliştirme kopyası) aynı yerde durabilir; ikisi birden
   çıkarsa alt alta dizilirler çünkü ikisi de akışın içinde, sabitlenmiş değil.
   Süre dolduğunda kapatma düğmesi YOK: kullanıcı sistemin neden yazmadığını
   bir düğmeye basıp hata alarak öğrenmemeli. */
.lisans-serit{display:flex;align-items:center;gap:12px;padding:9px 18px;
  font-size:.86rem;line-height:1.45;border-bottom:1px solid;position:relative;z-index:40}
.lisans-serit.doldu{background:var(--danger-soft);color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.lisans-serit.uyari{background:var(--caution-soft);color:var(--caution);
  border-color:color-mix(in srgb,var(--caution) 30%,transparent)}
.lisans-serit b{font-weight:700}
.lisans-kapat{margin-left:auto;flex:none;background:none;border:0;cursor:pointer;
  font-size:1.15rem;line-height:1;color:inherit;opacity:.65;padding:2px 6px;border-radius:6px}
.lisans-kapat:hover{opacity:1;background:rgba(0,0,0,.06)}

/* ── Yıllık destek limiti kartı — sıkı düzen ─────────────────────────────────
   Kart 329 px yüksekliğindeydi ve bunun büyük kısmı boşluktu: iki ölçü çubuğu,
   altı sayı ve üç satırlık bir dipnot. Bilgi azalmadı, aralar daraldı.
   Biçimler eskiden satır içi `style` ile dağınıktı; tek yere toplandı ki
   kartın boyu bir daha ayarlanacağında altı yerde arama yapılmasın. */
.limit-kart{padding:15px 16px}
.limit-kart h3{font-size:.92rem}
.limit-kart .limit-row{margin-bottom:6px}
/* İkinci bölüm (Ek-2A) ile birincinin arası. Ayrı bir kart değil, aynı
   ölçünün alt kırılımı — 20 px onları iki ayrı şey gibi gösteriyordu. */
.limit-kart .limit-row + .limit-bar{margin-top:0}
.limit-kart .limit-legend + .limit-row{margin-top:13px}
/* IZGARA, ESNEK DEĞİL. Esnek yerleşimde sütunlar içeriğin genişliğine göre
   kayıyordu: üstte "24,7 milyon ₺", altta "0 ₺" olunca ikinci satırın
   "Kalan"ı birincininkiyle aynı hizada durmuyordu. Aynı ölçünün iki
   kırılımı, aynı sütunlarda okunmalı. */
/* Genişlik SINIRLI: eşit sütunlar tüm karta yayılınca sayılar birbirinden
   kopuyor ve kart gerçekte olduğundan daha büyük duruyor. İki bölümün
   sınırı aynı olduğu için hizalama da korunuyor. */
.limit-kart .limit-legend{display:grid;grid-template-columns:repeat(3,1fr);
  gap:3px 14px;margin-top:9px;font-size:.76rem;max-width:400px}
.limit-kart .limit-legend b{font-size:.88rem;margin-top:1px}
.limit-kart .limit-bar{height:10px}
.limit-alt-not{font-size:.7rem}
/* Dipnot mevzuat açıklaması: kalsın ama başrolde durmasın. */
.limit-dipnot{font-size:.72rem;margin:11px 0 0;line-height:1.45}

/* ── YAN ŞERİT ──────────────────────────────────────────────────────────────
   Sayfa kaydırılsa da sabit kalan etiketler ve açılan panel. Pano dört büyük
   bloğu birden taşıyordu; üçü buraya taşındı.

   ETİKETLER DİKEY YAZILI: yatay olsalardı şerit 140 px genişlik yer kaplar ve
   içerik alanını daraltırdı. Dikey yazımla 34 px yetiyor. */
/* YERİ ÖLÇÜLEREK KONUYOR (app.js ▸ seritYerlestir):
   · --serit-sag  kaydırma çubuğunun genişliği. right:0 iken şerit tam çubuğun
     üstünde duruyordu ve çubuk tıklanamıyordu.
   · --serit-ust  sayfadaki ilk kartın üst hizası; şerit içerikle aynı
     çizgiden başlıyor. Ortalamak, sayfa başındayken kayık duruyordu. */
/* SEÇİCİ `nav.serit` — ÇIPLAK `.serit` DEĞİL.
   Bu dosyada iki ayrı "şerit" var: yukarıdaki (satır ~1146) sayfa içi uyarı
   kutusu (`<div class="serit warn">`), buradaki sağ kenardaki gezinme rayı
   (`<nav class="serit">`). İkisi aynı çıplak seçiciyi paylaşınca sonraki
   kural öncekini eziyordu ve uyarı kutuları position:fixed olup sağ kenarda,
   tablonun üstünde asılı kalıyordu (Kullanıcılar ekranındaki MFA uyarısı
   böyle görüldü, 23.09.2026). Eleman adıyla ayrıldılar. */
nav.serit{position:fixed;right:var(--serit-sag,0px);top:var(--serit-ust,120px);z-index:60;
  display:flex;flex-direction:column;gap:6px;align-items:flex-end}
/* MENÜNÜN RENGİNDE: koyu zemin, açık yazı. Şerit ile sol menü ekranın iki
   kenarında duran aynı tür şey — gezinme. Aynı dili konuşmalılar.
   BOYLARI EŞİT: yazı uzunluğuna göre değişince şerit merdiven gibi duruyordu.

   YAZI YATAY. Önce dik yazıyla (writing-mode) denendi ve okunmadı: döndürülmüş
   metin hem yavaş okunuyor hem küçük puntoda bulanıklaşıyor. Şimdi simge
   üstte, KISA ad altta; ikisi de yatay. Tam ad fare ipucunda ve aria-label'da
   duruyor, yani ekran okuyucu ile fareye tam adı, göze kısa adı veriyor. */
.serit-etiket{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;cursor:pointer;width:62px;height:62px;
  padding:0 4px;border:1px solid rgba(0,0,0,.35);
  border-right:0;border-radius:10px 0 0 10px;
  background:linear-gradient(180deg,var(--yan-ust) 0%,var(--yan-alt) 100%);
  color:var(--yan-baslik);font-family:inherit;font-size:.68rem;font-weight:700;
  letter-spacing:.01em;box-shadow:-2px 2px 10px rgba(35,42,53,.18);
  /* METİN NETLİĞİ: hover'da filter kullanılıyordu ve filtre öğeyi ayrı bir
     katmana taşıyıp yazıyı yumuşatıyordu. Renk/zemin değişimi aynı işi
     görüyor, metni bozmuyor. Yazı da bir kademe büyük ve --yan-metin yerine
     --yan-baslik: dikey yazı yatay yazıdan zor okunuyor, ödünü buradan. */
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:padding .12s,color .12s,background .12s}
.serit-etiket:hover{padding-right:8px;color:#fff;background:linear-gradient(180deg,#39414f 0%,#2b313d 100%)}
.serit-etiket.acik{background:var(--accent);color:#fff;border-color:var(--accent)}
/* İçi boş etiket sönük: tıklamaya değip değmediği tıklamadan önce belli olmalı. */
.serit-etiket.bos{color:var(--yan-metin);font-weight:600}
.serit-etiket.bos:hover{color:#fff}
/* Ağır durum (süresi geçmiş, limit %80 üstü) kenardan okunabilmeli. */
.serit-etiket.agir{border-color:color-mix(in srgb,var(--danger) 45%,var(--border))}

.serit-ortu{position:fixed;inset:0;z-index:55;background:rgba(20,24,31,.18)}
.serit-panel{position:fixed;right:calc(var(--serit-pay,0px) + 10px);top:16px;bottom:16px;z-index:61;
  width:min(520px,calc(100vw - 80px));display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 18px 50px rgba(35,42,53,.28)}
/* Markalar gibi geniş içerik 520 pxe sığmıyor; genişlik etikete ait olsun
   ki dar içerikli paneller boşuna geniş açılmasın. */
.serit-panel.genis{width:min(980px,calc(100vw - 160px))}
.serit-panel-bas{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);flex:none}
.serit-panel-bas h3{margin:0;font-size:1rem;flex:1 1 auto;min-width:0}
/* PANOYA EKLE TİKİ. Katlanir bolumlerindeki "hatirla" tikiyle ayni dil:
   ayni sey soruluyor (bunu kalici yap), ayni bicimde soruluyor. */
.serit-panoya{flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);
  font-family:inherit;font-size:.73rem;font-weight:600;color:var(--faint);
  transition:color .13s,border-color .13s,background .13s}
.serit-panoya:hover{color:var(--ink);border-color:var(--border-strong)}
.serit-panoya.acik{color:var(--accent-ink);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.serit-tik{font-size:.8rem;line-height:1;opacity:.3}
.serit-panoya.acik .serit-tik{opacity:1;color:var(--accent)}
.serit-panoya:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.serit-panoya[disabled]{opacity:.5;cursor:default}
@media (prefers-reduced-motion:reduce){.serit-panoya{transition:none}}

/* Panoya eklenen panel kartlari. Icerigi panelin aynisi; karti panonun
   oteki kartlarindan ayiran tek sey kucuk bir kaynak notu. */
.serit-kart .card-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.serit-kart-not{font-size:.68rem;color:var(--faint);white-space:nowrap}
.serit-kart-govde{display:flex;flex-direction:column;gap:10px}
.serit-kart-govde>.card{border:0;box-shadow:none;padding:0}
.serit-kart-govde .cek-liste{max-height:420px;overflow-y:auto}
.serit-panel-govde{overflow-y:auto;padding:14px 16px;display:flex;
  flex-direction:column;gap:10px}
/* Panelin içindeki kart kendi çerçevesini bırakıyor: panel zaten bir çerçeve,
   iç içe iki kutu gereksiz kalınlık yapıyordu. */
.serit-panel-govde>.card{border:0;box-shadow:none;padding:0}
/* BAŞLIK İKİ KEZ YAZILMASIN. Panelin başlığı zaten kartın adını söylüyordu;
   kartın kendi h3'ü de altında tekrar ediyordu. Rozetler KALIYOR — onlar
   başlık değil, veri ("4 geçti", "36 bekleyen"). */
.serit-panel-govde>.card>.card-h>h3{display:none}
.serit-panel-govde>.card>.card-h{padding-top:0}
.serit-panel-govde .dikkat{cursor:pointer}

/* DAR EKRANDA ŞERİT ALT ÇUBUĞA DÖNÜŞÜR.
   Önce 900 px altında tamamen gizleniyordu ve gerekçesi şuydu: "bloklar
   zaten panoda alt alta diziliyor". O gerekçe ARTIK GEÇERSİZ — Uyarılar,
   Son tarihler, Destek limiti ve Markalar panodan kaldırılıp yalnızca
   şeritte bırakıldı. Gizlemek, telefondan giren kullanıcının bu dört
   bölüme hiçbir yoldan ulaşamaması demekti.

   Yan kenar yerine ALT KENAR: 62 px'lik dikey etiketler 390 px'lik ekranın
   altıda birini yiyor ve içeriğin sağını kırpıyor. Altta beş etiket yan
   yana, genişliği paylaşarak duruyor. */
@media (max-width:900px){
  nav.serit{right:0;left:0;top:auto;bottom:0;flex-direction:row;align-items:stretch;
    gap:0;padding:5px 6px;z-index:60;
    background:linear-gradient(180deg,var(--yan-ust) 0%,var(--yan-alt) 100%);
    border-top:1px solid rgba(0,0,0,.35);box-shadow:0 -3px 14px rgba(35,42,53,.22)}
  .serit-etiket{flex:1 1 0;width:auto;min-width:0;height:52px;gap:3px;
    border:0;border-radius:9px;background:none;box-shadow:none;font-size:.62rem}
  .serit-etiket:hover{padding-right:4px}
  .serit-ad{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Panel neredeyse tam ekran: 310 px'lik bir sütunda liste okunmuyordu.
     Altta çubuğa yer bırakıyor ki açıkken başka bölüme geçilebilsin. */
  .serit-panel{left:10px;right:10px;width:auto;top:12px;bottom:72px}
  .serit-panel.genis{width:auto}
  /* Panel menü düğmesinin ÜSTÜNDE. Düğme z-index:72 ile çekmecenin üstünde
     durmak zorunda; panel 61 de kalınca mavi düğme panelin başlığına
     biniyordu. Panel açıkken düğmeye zaten gerek yok. */
  .serit-ortu{z-index:73}
  .serit-panel{z-index:74}
  /* Dar ekranda ray ALT KENARDA ve menü düğmesi 72'de; çekmece geniş ekrandaki
     62 ile kalsaydı ikisinin de altında kalırdı. */
  .drawer-root{z-index:75}
  /* Uyarı satırı 370 pxe yan yana sığmıyor: başlık `nowrap` olduğu için
     açıklamayı kenardan dışarı itiyordu. Dar ekranda alt alta. */
  .dikkat{flex-direction:column;align-items:flex-start;gap:4px}
  .dikkat b{white-space:normal}
  .dikkat em{align-self:flex-end}
  /* KARTLAR TEK SÜTUN. 900 px altında iki sütun demek, kart başına 255 px
     demek; kart başlıkları ve yaş ızgarası o genişliğe sığmıyor. Tek sütun
     ama `1fr` DEĞİL: `1fr`in örtük min-content tabanı kalırsa geniş
     içerikli kart yine ekranın dışına taşıyor. */
  .ikili,.ikili.genis-sag,.pano-kartlar{grid-template-columns:minmax(0,1fr)}
  /* Son kart alt çubuğun altında kalmasın. */
  .content{padding-bottom:78px}
}
/* İÇERİK ŞERİDİN ALTINA GİRMESİN. Şerit sabit konumda, yani akıştan çıkmış;
   yer ayrılmazsa kartların sağ kenarı etiketlerin altında kalıyor.

   SABİT 46 PİKSEL DEĞİL. Öyleydi ve etiketler 62 piksele büyüyünce (artı
   gölge, ölçülen genişlik 90) yetmez oldu: kart 1394'e kadar gidiyor, şerit
   1350'de başlıyordu. `--serit-pay`i zaten seritYerlestir() ölçüp yazıyor —
   tek doğru kaynak o. Yedek değer, betik çalışmadan önceki ilk boyama için. */
@media (min-width:901px){.content{padding-right:calc(var(--serit-pay,46px) + 12px)}}
/* Simge kutusu: çizgi kalınlığı yazıyla aynı ağırlıkta dursun. */
.serit-simge{display:flex;line-height:0}
.serit-simge svg{width:19px;height:19px}
@media (prefers-reduced-motion:reduce){.serit-etiket{transition:none}}

/* OKUNMAMIŞ UYARI — etiket yazısı kırmızı yanıp söner.
   Yalnız Uyarılar etiketinde: her etiket yanıp sönseydi hiçbiri dikkat
   çekmezdi. Sert aç/kapa değil renk nabzı; göz yormadan fark ediliyor. */
@keyframes seritNabiz{
  0%,100%{color:var(--yan-baslik)}
  50%{color:#ff6b6b}
}
.serit-etiket.yanip .serit-ad,.serit-etiket.yanip .serit-simge{animation:seritNabiz 1.25s ease-in-out infinite}
/* HAREKET İSTEMEYENE SABİT KIRMIZI. Uyarıyı büsbütün kaldırmak yanlış olurdu:
   bilgi hareketin kendisinde değil, renginde. */
@media (prefers-reduced-motion:reduce){
  .serit-etiket.yanip .serit-ad,.serit-etiket.yanip .serit-simge{animation:none;color:#ff6b6b}
}

/* ── KATLANIR BÖLÜM — kapalı gelen özet ──────────────────────────────────────
   Yaş dağılımı kartın üstünde zaten duruyor; bu tablo onun detayı ve açıkken
   on satır yer kaplıyordu. <details> kullanıldı: açılıp kapanması tarayıcının
   işi, JS yok, klavyeyle çalışıyor. */
.katlanir{margin-top:10px;border-top:1px solid var(--border)}
.katlanir>summary{display:flex;align-items:baseline;gap:10px;cursor:pointer;
  padding:11px 20px;list-style:none;font-size:.9rem;font-weight:700;color:var(--ink)}
.katlanir>summary::-webkit-details-marker{display:none}
/* Ok işareti: açık/kapalı olduğu summary'ye bakılınca anlaşılsın. */
.katlanir>summary::before{content:'';width:0;height:0;flex:none;
  border-left:5px solid var(--muted);border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .13s}
.katlanir[open]>summary::before{transform:rotate(90deg)}
.katlanir>summary:hover{background:var(--surface-2)}
.katlanir-oz{margin-left:auto;font-weight:400;font-size:.8rem;color:var(--muted)}
.katlanir-oz b{color:var(--ink);font-variant-numeric:tabular-nums}
/* HATIRLA TİKİ. Sessiz durur, üstüne gelince belirir; işaretliyken kalıcı
   olarak vurgulu. Summary'nin içinde ama onun tıklamasını almıyor (app.js). */
.katlanir-hatirla{flex:none;display:inline-flex;align-items:center;gap:5px;
  margin-left:12px;padding:3px 9px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);
  font-family:inherit;font-size:.72rem;font-weight:600;color:var(--faint);
  opacity:.45;transition:opacity .13s,color .13s,border-color .13s,background .13s}
.katlanir>summary:hover .katlanir-hatirla{opacity:1}
.katlanir-hatirla:hover{color:var(--ink);border-color:var(--border-strong)}
.katlanir-hatirla[aria-pressed="true"]{opacity:1;color:var(--accent-ink);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.katlanir-tik{font-size:.78rem;line-height:1;opacity:.35}
.katlanir-hatirla[aria-pressed="true"] .katlanir-tik{opacity:1;color:var(--accent)}
.katlanir-hatirla:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.katlanir-hatirla{transition:none}}
@media (prefers-reduced-motion:reduce){.katlanir>summary::before{transition:none}}

/* ── MOBİL: KENAR ÇUBUĞU BİR ÇEKMECE ─────────────────────────────────────────
   390 px'lik ekranda çubuk 64 px sütun kaplıyordu: ekranın altıda biri, hiçbir
   şey yazmayan ikonlar için. Marka bloğu da 40 px'lik kutuya sığmadığı için
   taşıyordu. Telefonda menü SÜREKLİ görünmez; çağrılınca gelir.

   Perde (.menu-perde) neden var: çekmece açıkken arkaya dokunmak onu
   kapatmalı. Perdesiz bir çekmecede kullanıcı içeriğe dokunup yanlışlıkla
   kayıt açıyor.

   `yan-kapali` BURADA KULLANILMIYOR. O sınıf "dar ikon şeridi" demek ve
   etiketleri gizliyor; çekmece tam genişlikte açılıp etiketleri göstermeli.
   <head>'deki betik bu yüzden dar ekranda o sınıfı hiç koymuyor. */
.menu-perde{display:none}

@media (max-width:640px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(84vw,270px);z-index:71;
    transform:translateX(-100%);transition:transform .2s ease;
    overflow-y:auto;padding-bottom:16px;box-shadow:3px 0 22px rgba(0,0,0,.45)}
  .menu-acik .sidebar{transform:none}
  .menu-perde{display:block;position:fixed;inset:0;z-index:70;
    background:rgba(8,12,22,.5);opacity:0;pointer-events:none;transition:opacity .2s}
  .menu-acik .menu-perde{opacity:1;pointer-events:auto}

  /* Düğme artık "daralt/genişlet" değil "aç/kapat": üst çubuğun soluna,
     dokunulabilir boyutta. 22 px'lik daire parmakla ıskalanıyor. */
  /* SABİT DEĞİL, KABUĞA GÖRE. position:fixed ekranın tepesini ölçüyor ve
     geliştirme şeridi gibi kabuğun ÜSTÜNDEKİ bir çubuk varken düğme onun
     üzerine biniyordu. .shell zaten position:relative. */
  .yan-dugme{position:absolute;left:10px;top:13px;transform:none;z-index:72;
    width:34px;height:34px;border-radius:10px}
  .yan-dugme svg{width:16px;height:16px;transform:rotate(180deg)}
  /* Acikken cekmecenin SAG KENARINDA duruyor, ekranin sag ucunda degil:
     orada kullanici cipinin ustune biniyordu. */
  .menu-acik .yan-dugme{left:calc(min(84vw,270px) + 10px)}
  .menu-acik .yan-dugme svg{transform:none}

  /* Üst çubuk: solda düğmeye yer, sağda ad yerine yalnız avatar. Müşteri
     seçicisinin 230 px'lik alt sınırı 390 px'de tek başına çubuğu taşırıyor. */
  .topbar{padding:0 12px 0 54px;gap:8px;height:60px}
  /* .sp (esneyen boşluk) DURUYOR: tek müşterili kurulumda seçici gizli ve
     o zaman kullanıcı çipini sağa iten tek şey o. Seçici görününce ikisi
     genişliği paylaşıyor, min-width:0 da seçicinin küçülmesine izin
     veriyor (öntanımlı 230 px tek başına çubuğu taşırıyordu). */
  .tenant{flex:1 1 auto;min-width:0}
  .tenant select{min-width:0;width:100%}
  .kul-metin{display:none}
  .kul-dugme{flex:none;padding:4px}
  /* Telefonda ortada yer yok: Quality yazısı solda, küçük. Müşteri logosu
     çekmecenin (menünün) tepesinde. Sağ öğeler kalan genişliği alıyor. */
  .topbar{grid-template-columns:auto 1fr}
  .topbar .sp{display:none}
  .ust-sag{gap:8px}
  .topbar .brand-urun{height:26px}

  .content{padding:14px}
  /* PENCERE BAŞLIĞI. Başlık ile işlem düğmeleri aynı satırda: "Düzenle · Sil ·
     ×" 180 px alınca başlığa 210 px kalıyor ve altyazı yedi satıra çıkıyordu.
     Yalnız DÜĞME GRUBU (bir <div>) olan pencerelerde grup alt satıra iniyor;
     tek bir × olanlar olduğu gibi kalıyor — 30 px'lik bir düğme başlığı
     sıkıştırmıyor ve onu da alta atmak boş bir satır demekti. */
  .modal-h{padding:14px 16px}
  .modal-h:has(>div:last-child:not(:first-child)){flex-direction:column;align-items:stretch;gap:9px}
  .modal-h>div:last-child:not(:first-child){align-self:flex-end;flex-wrap:wrap;justify-content:flex-end}
  .modal-h>div:first-child{min-width:0}
  .modal-b{padding:16px}
  /* Düğmeler sarsın: sığmayınca her biri üç satırlık yazıya dönüşüyordu. */
  .modal-f{padding:12px 16px;gap:8px;flex-wrap:wrap}
  /* Dosya penceresi telefonda tam ekran; künye ve şerit aynı kenar boşluğunda. */
  .modal.dosya-modal{width:100%;height:100%;max-height:100%;border-radius:0}
  .dosya-modal .modal-h,.dsy-kunye,.zs,.dosya-modal .dosya-ic{padding-left:16px;padding-right:16px}
  .dsy-kunye{gap:8px 20px}
  /* Şema yerine dikey liste. İkisi de DOM'da; seçimi burası yapıyor. */
  .yas-grid{padding:14px 14px 6px}
  .sema-sarmal{display:none}
  .sema-liste{display:flex}
  /* Başlık ve işlem düğmeleri alt alta; düğmeler tek satıra sığmazsa sarsın
     ama her biri kendi yazısını tek satırda tutsun. */
  .page-h{flex-direction:column;align-items:stretch;gap:10px}
  .page-h > div{flex-wrap:wrap}
  .page-h .btn{white-space:nowrap}

  .arama-bar{padding:12px 14px;gap:8px}
  /* Arama kutusu tam satır; seçiciler ikişerli. min-width kaldırılmazsa
     sarmaya rağmen taşıyorlar. */
  .arama-bar .ara-giris{flex:1 1 100%;min-width:0}
  .arama-bar select.input{flex:1 1 calc(50% - 4px);min-width:0}
  .arama-bar .ara-ulke{flex:1 1 100%;min-width:0}
  .ara-ozet{padding:0 14px 12px}
  .ara-tasinan{padding:0 14px 10px}
  /* Sayfa çubuğu tek satıra sığmıyor: bilgi üstte, düğmeler altta ortalı. */
  .sayfa-bar{flex-wrap:wrap;justify-content:center;gap:8px}
  .sayfa-dugmeler{flex-wrap:wrap;justify-content:center}
}

/* Uzun seçenek metni seçiciyi kabından taşırmasın — her genişlikte geçerli. */
.arama-bar select.input{max-width:100%}

/* ── Fatura kalemleri ──────────────────────────────────────────────────────
   Faturanın hangi satırının desteğe konu olduğu burada duruyor. Kapsam dışı
   satır SİLİNMİYOR, soluklaştırılıyor: "neyi bilerek dışarıda bıraktık"
   sorusunun cevabı denetimde sorulan şeyin kendisi. */
.fatura-kalem tbody tr{cursor:default}
.fatura-kalem tbody tr:hover{background:transparent}
.fatura-kalem tr.disarda td{opacity:.55}
.fatura-kalem tr.disarda td:first-child{text-decoration:line-through;text-decoration-color:var(--muted)}
.fatura-kalem tfoot td{padding:8px 16px;border-top:1px solid var(--border);font-size:.84rem;color:var(--muted)}
.fatura-kalem tfoot tr:first-child td{color:var(--ink)}
.fatura-kalem .n{display:block;font-size:.76rem;color:var(--muted);margin-top:2px;text-decoration:none}

.kalem-ekle{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 4px}
.kalem-ekle input[type=text],.kalem-ekle input:not([type]),.kalem-ekle input[type=number]{
  padding:7px 10px;border:1px solid var(--border);border-radius:8px;font-size:.84rem;
  background:var(--surface);color:var(--ink)}
.kalem-ekle #kalemAciklama{flex:1 1 220px;min-width:0}
.kalem-ekle #kalemTutar{width:130px}
.kalem-kapsam{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);white-space:nowrap}

button.mini{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);
  padding:3px 9px;border-radius:14px;font-size:.74rem;font-weight:600;cursor:pointer}
button.mini:hover{background:var(--surface);color:var(--ink)}
button.mini.sil:hover{border-color:var(--danger);color:var(--danger)}

/* Kontroller: durum RENKLE DEĞİL, önce imle anlatılıyor — renk körü bir
   kullanıcı için ✓/✗/? tek başına yeterli olsun. */
.kalem-kontrol{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.kalem-kontrol li{display:flex;gap:9px;align-items:flex-start;padding:8px 11px;border-radius:9px;
  background:var(--surface-2);font-size:.82rem}
.kalem-kontrol li .im{font-weight:800;line-height:1.35}
.kalem-kontrol li .ad{font-weight:700;min-width:180px;flex-shrink:0}
.kalem-kontrol li .mesaj{color:var(--muted)}
.kalem-kontrol li .mesaj b{display:block;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:2px}
.kalem-kontrol li.ok{background:var(--ok-soft)}
.kalem-kontrol li.ok .im{color:var(--ok)}
.kalem-kontrol li.bad{background:var(--danger-soft)}
.kalem-kontrol li.bad .im{color:var(--danger)}
.kalem-kontrol li.caution{background:var(--caution-soft)}
.kalem-kontrol li.caution .im{color:var(--caution)}

@media(max-width:640px){
  .kalem-kontrol li{flex-wrap:wrap}
  .kalem-kontrol li .ad{min-width:0}
  .kalem-ekle #kalemTutar{width:110px}
}

/* ── Mutabakat yıl kırılımı ────────────────────────────────────────────────
   Kapalı geliyor: on iki satırlık tablo, üstteki dört satırlık özetin önüne
   geçmemeli. Sapma varsa <details open> ile açık geliyor. */
.mutabakat-yil{margin-top:14px;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.mutabakat-yil>summary{cursor:pointer;padding:10px 14px;background:var(--surface-2);
  font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:10px;list-style:none}
.mutabakat-yil>summary::-webkit-details-marker{display:none}
.mutabakat-yil>summary::before{content:'▸';color:var(--muted);font-size:.8rem;transition:transform .15s}
.mutabakat-yil[open]>summary::before{transform:rotate(90deg)}
.mutabakat-yil>summary:hover{background:var(--surface)}
.mutabakat-yil .table th{white-space:nowrap}
.mutabakat-yil .table th small{font-weight:400;text-transform:none;letter-spacing:0;opacity:.75}
.mutabakat-yil .table td small{color:var(--muted)}
.mutabakat-yil tfoot td{padding:11px 16px;border-top:2px solid var(--border);
  font-variant-numeric:tabular-nums;background:var(--surface-2)}
.mutabakat-yil tfoot td:not(:first-child){text-align:right}
.mutabakat-yil .rapor-not{padding:0 14px 12px}

/* Tıklanabilir yapısal uyarı. Ok işareti, satırın bir yere GÖTÜRDÜĞÜNÜ söyleyen
   tek işaret — imleç değişimi tek başına yeterli değil. */
.eksiklik-serit.tiklanir{cursor:pointer}
.eksiklik-serit.tiklanir:hover{background:color-mix(in srgb,var(--danger-soft) 80%,var(--danger))}
.eksiklik-serit.tiklanir:focus-visible{outline:2px solid var(--danger);outline-offset:2px}
.eksiklik-serit .uyari-ok{flex:0 0 auto;color:var(--danger);font-size:1rem;font-weight:700}
.cip-suzgec{margin-left:8px;border:1px solid color-mix(in srgb,var(--caution) 40%,var(--surface));
  background:var(--caution-soft);color:var(--caution);border-radius:999px;
  padding:3px 10px;font-size:.76rem;font-weight:600;cursor:pointer;font-family:inherit}
.cip-suzgec:hover{background:color-mix(in srgb,var(--caution-soft) 80%,var(--caution))}

/* Ülke kutusu: seçilince "Hırvatistan · fatura ülkesi" yazıyor, o yüzden
   seçim kutularından geniş. */
.arama-bar .ara-ulke{flex:0 1 240px;min-width:170px}

/* Süzülen kümenin durum kırılımı. Kutucuklar düğme: her biri kendi
   kayıtlarını açıyor, seçiliyken dolu renkte duruyor. */
.ara-ozet{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 20px 14px}
.ara-ozet-bas{font-size:.82rem;font-weight:700;color:var(--text)}
.ara-ozet-para{font-size:.82rem;font-weight:700;color:var(--navy);cursor:help}
.ara-ozet-para .muted{font-weight:500}
/* İKİNCİ SIRADAKİ TUTAR sönük çiziliyor. Ödeme belgesi toplamı harcamanın
   iki katı çıkıyor (aynı belge birden çok dosyaya yazılıyor); eşit ağırlıkta
   dursalardı hangisinin harcama olduğu yine ekrandan okunamazdı. */
.ara-ozet-para.ikincil{font-weight:600;color:var(--muted)}
.ara-ozet-ayrac{width:1px;height:16px;background:var(--border);margin:0 2px}
.ara-cip{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.76rem;
  border:1px solid var(--border);background:var(--surface);color:var(--muted);
  border-radius:999px;padding:4px 11px;cursor:pointer}
.ara-cip b{color:var(--text)}
.ara-cip-para{color:var(--muted);font-variant-numeric:tabular-nums}
.ara-cip:hover{border-color:color-mix(in srgb,var(--navy) 35%,var(--surface))}
.ara-cip.secili{border-color:var(--navy);background:color-mix(in srgb,var(--navy) 10%,var(--surface));color:var(--text)}
.ara-cip.d-sonuclandi b{color:var(--ok)}
.ara-cip.d-reddedildi b{color:var(--danger)}
.ara-cip.d-sunuldu b,.ara-cip.d-eksik b{color:var(--warn)}

/* Çapraz tablonun açılabilir hücreleri. Altı çizili nokta: rakamın bir kapı
   olduğunu söyleyen tek işaret — imleç değişimi dokunmatikte görünmüyor. */
.table td.acilir{cursor:pointer;text-decoration:underline dotted
  color-mix(in srgb,var(--navy) 45%,transparent);text-underline-offset:3px}
.table td.acilir:hover{background:color-mix(in srgb,var(--navy) 8%,var(--surface));
  text-decoration-color:var(--navy)}
.ara-tasinan{display:flex;align-items:center;gap:8px;padding:0 20px 10px;font-size:.8rem}

/* Birlik listesi — yıllara göre. Kart başlığında üç sayı: harcama, red,
   incelemede. Kartı açmadan da okunsun diye başlıkta; içerik katlanır. */
.mutabakat-ozet{margin-left:auto;display:flex;gap:14px;font-size:.8rem;color:var(--muted)}
.mutabakat-ozet b{color:var(--navy);font-variant-numeric:tabular-nums}
.mutabakat-ozet .red b{color:var(--danger)}
.mutabakat-ozet .bekleyen b{color:var(--warn)}
/* Birlik'in kararı sütunları: karşılaştırma değil, ayrı bir soru. Sol kenar
   çizgisi tablodaki iki bölümü ayırıyor. */
.table.mutabakat th.birlik-karar,.table.mutabakat td.birlik-karar{
  border-left:1px solid var(--border);background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.table.mutabakat td.birlik-karar.red-var{color:var(--danger)}
/* Sorgulanan bülten satırı: listede hangi güne bakıldığı görünsün. */
.kur-vurgu{background:color-mix(in srgb,var(--vurgu-1) 12%,var(--surface));
  outline:2px solid color-mix(in srgb,var(--vurgu-1) 45%,transparent);outline-offset:-2px}

/* Birlik panelinin başındaki risk özeti. Panoda ayrı bir karttı; sayı ile onu
   üreten liste ayrı yerlerde durunca ikisi birbirini doğrulamıyordu. */
.bekleyen-serit{padding:0 0 12px;border-bottom:1px solid var(--border);margin-bottom:10px}
.bekleyen-serit-bas{font-size:.86rem;margin-bottom:10px;color:var(--muted)}
.bekleyen-serit-bas b{color:var(--navy)}

/* SÜREÇ ŞEMASI — ÖDENDİ VE REDDEDİLDİ DOLU RENKTE.
   Bütün kutular nötr griydi, yalnız sayı renkliydi; şemanın iki UÇ durumu
   (para geldi / süreç bitti) diğer aşamalarla aynı ağırlıkta görünüyordu.
   Yalnız bu ikisi dolduruldu: hepsi renkli olsa hiçbiri öne çıkmazdı. */
/* 02.10.2026: düz renk yerine metalik dolgu (degradeler şemanın <defs>'inde). */
.sema-dugum.dolu-ok .sema-kutu{fill:url(#semaMetalOk);stroke:color-mix(in srgb,var(--ok) 65%,#000)}
.sema-dugum.dolu-danger .sema-kutu{fill:url(#semaMetalRed);stroke:color-mix(in srgb,var(--danger) 65%,#000)}
.sema-dugum.dolu-warn .sema-kutu{fill:url(#semaMetalTuruncu);stroke:color-mix(in srgb,var(--warn) 65%,#000)}
.sema-dugum.dolu-warn .sema-etiket,.sema-dugum.dolu-warn .sema-sayi,.sema-dugum.dolu-warn .sema-alt{fill:#fff}
.sema-dugum.dolu-warn .sema-alt{opacity:.85}
.sema-dugum.dolu-warn:hover .sema-kutu{stroke:var(--navy);stroke-width:1.6}
[data-tema="gece"] .sema-dugum.dolu-warn .sema-etiket,
[data-tema="gece"] .sema-dugum.dolu-warn .sema-sayi,
[data-tema="gece"] .sema-dugum.dolu-warn .sema-alt{fill:var(--bg)}
.sema-parlak{fill:url(#semaParlak);pointer-events:none}
.sema-dugum:not(.dolu-ok):not(.dolu-danger):not(.dolu-warn) .sema-parlak{opacity:.6}
[data-tema="gece"] .sema-dugum:not(.dolu-ok):not(.dolu-danger):not(.dolu-warn) .sema-parlak{opacity:.2}
[data-tema="gece"] .sema-dugum.dolu-ok text,[data-tema="gece"] .sema-dugum.dolu-danger text,
[data-tema="gece"] .sema-dugum.dolu-warn text{stroke:none}
/* Metal üstünde yazı biraz kabarık dursun. */
.sema-dugum.dolu-ok text,.sema-dugum.dolu-danger text,.sema-dugum.dolu-warn text{paint-order:stroke;stroke:rgba(0,0,0,.18);stroke-width:.6px}
/* Renkli kutudaki sayaç 3B: arkasında tek kat (kutunun koyu tonu, 1 piksel
   aşağıda) ve hafif gölge. Üç kat + 4 piksellik gölge fazla geldi ("aşağı
   aldın ama güzel durmuyor, azaltalım", 02.10.2026). Rakam süzgeçsiz, keskin. */
.sema-dugum.dolu-ok .sema-sayi,.sema-dugum.dolu-danger .sema-sayi,.sema-dugum.dolu-warn .sema-sayi{
  font-size:26px;font-weight:900;stroke:none}
.sema-dugum.dolu-ok .sema-sayi.sema-sayi-kat{fill:color-mix(in srgb,var(--ok) 45%,#000)}
.sema-dugum.dolu-danger .sema-sayi.sema-sayi-kat{fill:color-mix(in srgb,var(--danger) 45%,#000)}
.sema-dugum.dolu-warn .sema-sayi.sema-sayi-kat{fill:color-mix(in srgb,var(--warn) 45%,#000)}
/* SEÇİCİ BİLEREK UZUN: kutudaki yazıları beyaz yapan kural
   (.sema-dugum.dolu-ok .sema-sayi) aynı güçteydi ve dosyada sonra geldiği için
   Ödendi/Reddedildi'de gölgeyi BEYAZ boyuyordu (02.10.2026, "diğerlerindeki
   beyaz gölge bozuyor"). Eksiklik'in kuralı önce durduğu için o doğru çıkıyordu. */
.sema-dugum.dolu-ok .sema-sayi.sema-sayi-golge,.sema-dugum.dolu-danger .sema-sayi.sema-sayi-golge,.sema-dugum.dolu-warn .sema-sayi.sema-sayi-golge{fill:rgba(0,0,0,.28);filter:blur(1px)}
/* Gece teması: açık kutuda koyu rakam; katlar açık renk (rakam basılı görünür). */
[data-tema="gece"] .sema-dugum.dolu-ok .sema-sayi.sema-sayi-kat,[data-tema="gece"] .sema-dugum.dolu-danger .sema-sayi.sema-sayi-kat,[data-tema="gece"] .sema-dugum.dolu-warn .sema-sayi.sema-sayi-kat{fill:rgba(255,255,255,.5)}
[data-tema="gece"] .sema-dugum.dolu-ok .sema-sayi.sema-sayi-golge,[data-tema="gece"] .sema-dugum.dolu-danger .sema-sayi.sema-sayi-golge,[data-tema="gece"] .sema-dugum.dolu-warn .sema-sayi.sema-sayi-golge{fill:rgba(0,0,0,.25)}
.sema-dugum.dolu-ok .sema-etiket,.sema-dugum.dolu-ok .sema-sayi,
.sema-dugum.dolu-ok .sema-alt,.sema-dugum.dolu-danger .sema-etiket,
.sema-dugum.dolu-danger .sema-sayi,.sema-dugum.dolu-danger .sema-alt{fill:#fff}
.sema-dugum.dolu-ok .sema-alt,.sema-dugum.dolu-danger .sema-alt{opacity:.85}
.sema-dugum.dolu-ok:hover .sema-kutu,.sema-dugum.dolu-danger:hover .sema-kutu{
  stroke:var(--navy);stroke-width:1.6}
/* Gece temasında ok/danger açık tonlar: beyaz yazı okunmuyor, koyu yazılıyor. */
[data-tema="gece"] .sema-dugum.dolu-ok .sema-etiket,
[data-tema="gece"] .sema-dugum.dolu-ok .sema-sayi,
[data-tema="gece"] .sema-dugum.dolu-ok .sema-alt,
[data-tema="gece"] .sema-dugum.dolu-danger .sema-etiket,
[data-tema="gece"] .sema-dugum.dolu-danger .sema-sayi,
[data-tema="gece"] .sema-dugum.dolu-danger .sema-alt{fill:var(--bg)}

/* ── HARCAMA PLANI ─────────────────────────────────────────────────────────
   Form solda sabit genişlikte, cevap sağda esneyerek: cevabın içindeki
   kontrol listesi ve belge kutuları yer istiyor, form istemiyor. */
.plan-ikili{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  gap:16px;align-items:start}
@media (max-width:900px){.plan-ikili{grid-template-columns:1fr}}
.plan-evrak{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px}
.plan-evrak-oge{display:flex;gap:9px;align-items:baseline;padding:8px 11px;
  border:1px solid var(--border);border-radius:8px;font-size:.83rem}
.plan-karar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px 18px}

/* Çöp kutusu düğmesi arama sonucunun altında, kendi satırında: her aramada
   yeniden yazılan "N kayıt" notunun İÇİNDE duruyordu ve ilk aramada
   siliniyordu. */
.arama-bar .ara-cop{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}

/* Ayarlar ▸ Posta Bağlantısı — gönderen kuralı ekleme satırı. */
.kural-ekle{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(140px,1.4fr) minmax(120px,1.2fr) auto;
  gap:8px;margin-top:12px;align-items:center}
@media (max-width:760px){.kural-ekle{grid-template-columns:1fr}}

/* ── Resmî Yazışmalar — üç bölmeli posta görünümü ──────────────────────────
 *
 * Klasörler · ileti listesi · okuma bölmesi. Yükseklik ekrana sabitleniyor ve
 * her bölme KENDİ İÇİNDE kayıyor: tek bir sayfa kaydırması olsaydı uzun bir
 * yazıyı okurken liste ekrandan çıkardı ve "hangi yazıdaydım" kaybolurdu.
 */
.posta-outlook{display:grid;grid-template-columns:190px minmax(260px,340px) 1fr;
  gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;
  background:var(--surface);height:calc(100vh - 210px);min-height:440px}

.posta-klasor{display:flex;flex-direction:column;gap:2px;padding:10px 8px;
  background:var(--surface-2);border-right:1px solid var(--border);
  overflow-y:auto}
.klasor-sat{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:7px 10px;border:none;border-radius:7px;background:transparent;
  font:inherit;font-size:.84rem;color:var(--navy);text-align:left;cursor:pointer}
.klasor-sat:hover{background:var(--border)}
.klasor-sat.secili{background:var(--accent-soft);color:var(--accent);font-weight:650}
.klasor-sayi{font-size:.76rem;color:var(--muted);font-weight:600}
.klasor-sat.secili .klasor-sayi{color:var(--accent)}
.klasor-baslik{margin:14px 10px 4px;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}

.posta-liste{display:flex;flex-direction:column;border-right:1px solid var(--border);
  overflow-y:auto}
.ileti{display:block;width:100%;padding:11px 14px;border:none;border-bottom:1px solid var(--border);
  border-left:3px solid transparent;background:transparent;font:inherit;text-align:left;cursor:pointer}
.ileti:hover{background:var(--surface-2)}
.ileti.secili{background:var(--accent-soft);border-left-color:var(--accent)}
/* Gelen kutusundaki (işlenmemiş) yazı Outlook'taki okunmamış ileti gibi koyu. */
.ileti.bekleyen .ileti-gonderen,.ileti.bekleyen .ileti-konu{font-weight:700}
.ileti-ust{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ileti-gonderen{font-size:.82rem;color:var(--navy);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ileti-tarih{font-size:.74rem;color:var(--muted);flex:none}
.ileti-konu{margin-top:2px;font-size:.84rem;color:var(--navy);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ileti-alt{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:5px}
.ileti-onizleme{margin-top:4px;font-size:.76rem;line-height:1.45;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.posta-okuma{overflow-y:auto}
.okuma-bos{padding:28px 24px;color:var(--muted);font-size:.86rem;line-height:1.6}
.okuma-bos p{margin:10px 0 0;font-size:.8rem}
.okuma-bas{padding:18px 20px 12px;border-bottom:1px solid var(--border)}
.okuma-bas h2{margin:0 0 8px;font-size:1.05rem;line-height:1.35}
.okuma-gonderen{font-size:.86rem;font-weight:650;color:var(--navy)}
.okuma-ust{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px;font-size:.78rem}
/* Gövde yazının KENDİSİ: satır sonları korunuyor, biçimlendirme uydurulmuyor. */
.okuma-govde{padding:16px 20px 24px;font-size:.84rem;line-height:1.65;color:var(--navy);
  white-space:pre-wrap;word-break:break-word}
.okuma-islem{margin:14px 20px;padding:12px 14px;border:1px solid var(--border-strong);
  border-radius:9px;background:var(--surface-2)}
.okuma-islem.tamam{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:.84rem}
.okuma-islem-bas{margin-bottom:8px;font-size:.86rem}
.okuma-adaylar{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;
  max-height:170px;overflow-y:auto}
.okuma-aday{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:6px;
  font-size:.82rem;line-height:1.4;cursor:pointer}
.okuma-aday:hover{background:var(--border)}
.okuma-elle{margin-bottom:10px;max-width:280px}
.okuma-eylem{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

@media (max-width:1100px){
  /* Dar ekranda üç bölme yan yana sığmıyor; okuma bölmesi listenin altına
     iniyor ve sabit yükseklik bırakılıyor ki sayfa normal kaysın. */
  .posta-outlook{grid-template-columns:160px 1fr;height:auto}
  .posta-liste{max-height:460px}
  .posta-okuma{grid-column:1 / -1;border-top:1px solid var(--border)}
}
@media (max-width:760px){
  .posta-outlook{grid-template-columns:1fr}
  .posta-klasor{flex-direction:row;flex-wrap:wrap;border-right:none;
    border-bottom:1px solid var(--border)}
  .klasor-baslik{width:100%;margin:6px 10px 0}
  .posta-liste{border-right:none}
}

/* ── Sunucu Durumu (Ayarlar) ── */
.sd-izgara{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:16px;margin-bottom:16px}
@media (max-width:1100px){.sd-izgara{grid-template-columns:1fr}}
.sd-baslik{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.sd-baslik h3{font-size:1rem;font-weight:700}
.sd-baslik .muted{font-size:.78rem}
.sd-olcu{margin-top:10px}
.sd-olcu-b{display:flex;justify-content:space-between;align-items:baseline;font-size:.86rem;font-weight:600}
.sd-olcu-b b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.sd-cubuk{height:8px;border-radius:5px;background:var(--surface-2);border:1px solid var(--border);margin-top:5px;overflow:hidden}
.sd-cubuk i{display:block;height:100%;border-radius:4px;transition:width .4s}
.sd-cubuk i.sd-ok{background:var(--ok)} .sd-cubuk i.sd-warn{background:var(--warn)} .sd-cubuk i.sd-danger{background:var(--danger)}
.sd-olcu-b b.sd-ok{color:var(--ok)} .sd-olcu-b b.sd-warn{color:var(--warn)} .sd-olcu-b b.sd-danger{color:var(--danger)}
.sd-olcu-a{font-size:.74rem;color:var(--faint);margin-top:3px}
.sd-kivilcim{display:block;width:100%;height:46px;margin-top:6px}
.sd-not{font-size:.76rem;color:var(--muted);margin-top:12px;line-height:1.5}
.sd-kpi{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:0}
.sd-kpi.sd-kpi-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sd-kpi .kpi>.v{font-size:1.3rem}
@media (max-width:1400px){.sd-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sd-kpi,.sd-kpi.sd-kpi-4{grid-template-columns:1fr}}
.sd-ikili{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
@media (max-width:640px){.sd-ikili{grid-template-columns:1fr}}
.sd-uyarilar{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.sd-uyari{font-size:.84rem;padding:9px 12px;border-radius:8px;border:1px solid}
.sd-uyari.sd-danger{color:var(--danger);background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.sd-uyari.sd-caution{color:var(--caution);background:var(--caution-soft);border-color:color-mix(in srgb,var(--caution) 30%,transparent)}

/* ── Ajanda: Outlook görünümü (01.10.2026) ──────────────────────────────────
   Kategori rengi --k. Dolgu rengin açık tonu (yüzeyle karışım: koyu temada da
   okunur), solda koyu şerit. */
.tk{overflow:hidden}
.tk-arac{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tk-ok{min-width:32px;font-size:1.05rem;line-height:1}
.tk-baslik{font-size:1.08rem;font-weight:700;margin:0 0 0 8px;white-space:nowrap}
.tk-bosluk{flex:1}
.tk-gorunum{margin:0}
.tk-gorunum select{height:32px;padding:4px 30px 4px 10px;min-width:118px;font-size:.85rem}
.tk-lejant{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.tk-kat{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);
  color:var(--ink);border-radius:14px;padding:3px 10px 3px 7px;font-size:.76rem;cursor:pointer;line-height:1.3}
.tk-kat i{width:11px;height:11px;border-radius:3px;background:var(--k);flex:none}
.tk-kat:hover{border-color:var(--k)}
.tk-kat.kapali{opacity:.45;text-decoration:line-through}
.tk-kat.secili{border-color:var(--k);background:color-mix(in srgb,var(--k) 22%,var(--surface));font-weight:600}
.tk-kat-ayar{font-size:.76rem;margin-left:4px;color:var(--muted)}

/* Kaydırma sütun başlığı ile gövdeyi hizalı tutsun: üç parça da aynı
   kaydırma çubuğu boşluğunu ayırıyor. */
.tk-cerceve{overflow-x:auto}
.tk-ust,.tk-bant,.tk-govde{display:block;overflow-y:hidden;scrollbar-gutter:stable}
.tk-ust,.tk-bant,.tk-izgara{display:grid}
.tk-govde{overflow-y:auto;height:max(420px,calc(100vh - 360px));border-top:1px solid var(--border)}
.tk-kose{border-right:1px solid var(--border)}
.tk-gun-bas{position:relative;padding:8px 10px 6px;border-right:1px solid var(--border);background:var(--surface-2);min-width:0}
.tk-gun-bas.hs{background:color-mix(in srgb,var(--surface-2) 70%,var(--border))}
.tk-gun-ad{display:block;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-gun-no{border:none;background:none;padding:0;font-size:1.05rem;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.tk-gun-no:hover{text-decoration:underline}
.tk-gun-bas.bugun{background:color-mix(in srgb,var(--vurgu-1) 10%,var(--surface));box-shadow:inset 0 3px 0 var(--vurgu-1)}
.tk-gun-bas.bugun .tk-gun-ad,.tk-gun-bas.bugun .tk-gun-no{color:var(--vurgu-1);font-weight:700}
.tk-arti{position:absolute;right:6px;top:8px;width:22px;height:22px;border-radius:50%;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--muted);font-size:.95rem;line-height:1;cursor:pointer;padding:0}
.tk-arti:hover{color:var(--vurgu-1);border-color:var(--vurgu-1)}

.tk-bant{border-top:1px solid var(--border);background:var(--surface)}
.tk-bant-et{font-size:.64rem;color:var(--faint);padding:4px 4px 0;text-align:right}
.tk-bant-ic{display:grid;gap:2px 0;padding:2px 0 4px;min-height:26px;position:relative}
.tk-bant-gun{border-right:1px solid var(--border);cursor:pointer}
.tk-bant-gun:hover{background:var(--surface-2)}
.tk-cubuk,.tk-sure{margin:0 3px;font-size:.72rem;line-height:20px;height:20px;padding:0 7px;border-radius:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;position:relative;z-index:1}
.tk-cubuk{background:color-mix(in srgb,var(--k) 45%,var(--surface));border-left:4px solid var(--k);color:var(--ink);font-weight:600}
.tk-cubuk.sol{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}
.tk-cubuk.sag{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}
.tk-cubuk em,.tk-ay-olay em{font-style:normal;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.tk-cubuk small{font-weight:400;color:var(--muted)}
.tk-cubuk.tamam,.tk-olay.tamam,.tk-ay-olay.tamam{opacity:.55}
.tk-cubuk.tamam,.tk-olay.tamam b,.tk-ay-olay.tamam{text-decoration:line-through}
.tk-sure{border:1px dashed var(--border-strong);background:var(--surface-2);color:var(--muted);line-height:18px}
.tk-sure.kritik{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}

.tk-izgara{position:relative}
.tk-saatler{position:relative;border-right:1px solid var(--border)}
.tk-saat{position:absolute;right:6px;transform:translateY(-50%);font-size:.68rem;color:var(--faint);font-variant-numeric:tabular-nums}
.tk-sutun{position:relative;border-right:1px solid var(--border);cursor:cell;touch-action:none;min-width:0}
.tk-dilim{height:calc(var(--tk-saat, 44px) / 2);box-sizing:border-box;border-bottom:1px solid var(--border);background:var(--surface)}
.tk-dilim.yarim{border-bottom:1px solid var(--border)}
.tk-dilim:not(.yarim){border-bottom:1px dotted color-mix(in srgb,var(--border) 80%,transparent)}
.tk-dilim.disi{background:var(--surface-2)}
.tk-sutun.bugun .tk-dilim{background:color-mix(in srgb,var(--vurgu-1) 5%,var(--surface))}
.tk-sutun.bugun .tk-dilim.disi{background:color-mix(in srgb,var(--vurgu-1) 5%,var(--surface-2))}
.tk-olaylar{position:absolute;inset:0;pointer-events:none}
.tk-olay{position:absolute;pointer-events:auto;box-sizing:border-box;overflow:hidden;cursor:pointer;
  background:color-mix(in srgb,var(--k) 45%,var(--surface));border-left:4px solid var(--k);border-radius:3px;
  padding:2px 6px;font-size:.72rem;line-height:1.25;color:var(--ink);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--surface) 70%,transparent);touch-action:none}
.tk-olay:hover{background:color-mix(in srgb,var(--k) 60%,var(--surface))}
/* Başlık Outlook'taki gibi SARAR: dar sütunda "Bulut Fat…" yerine iki satır. */
.tk-olay b{display:block;font-weight:700;white-space:normal;overflow-wrap:anywhere;line-height:1.2}
.tk-olay span{display:block;color:var(--muted);font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Yarım saatlik kutu: tek satır başlık, saat yok (kutunun yeri saati zaten söylüyor). */
.tk-olay.kisa b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-olay.kisa span{display:none}
.tk-olay.suruklenen{opacity:.85;z-index:5;box-shadow:0 6px 16px rgba(0,0,0,.25);cursor:grabbing}
.tk-tutamac{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.tk-tutamac.ust{top:0;bottom:auto;height:6px}
/* Boş saat dilimi fareyle vurgulanır: tut-çek yapılabildiği görünsün. */
.tk-sutun .tk-dilim:hover{background:color-mix(in srgb,var(--vurgu-1) 10%,var(--surface))}
.tk-sutun .tk-dilim.disi:hover{background:color-mix(in srgb,var(--vurgu-1) 10%,var(--surface-2))}
/* Gün aralığı seçimi (tüm gün şeridi, ay görünümü). */
.tk-bant-gun.tk-secili,.tk-ay-gun.tk-secili{background:color-mix(in srgb,var(--vurgu-1) 16%,var(--surface)) !important;
  box-shadow:inset 0 0 0 1px var(--vurgu-1)}
.tk-bant-gun,.tk-ay-gun{touch-action:none;user-select:none}
.tk-secim{position:absolute;left:2px;right:2px;background:color-mix(in srgb,var(--vurgu-1) 22%,transparent);
  border:1px solid var(--vurgu-1);border-radius:3px;font-size:.68rem;color:var(--vurgu-1);padding:1px 5px;
  pointer-events:none;z-index:4;font-variant-numeric:tabular-nums}
/* Şu an çizgisi: bütün hafta boyunca ince, bugünün sütununda kalın + nokta. */
.tk-simdi{position:absolute;left:56px;right:0;height:0;border-top:1px solid color-mix(in srgb,var(--danger) 55%,transparent);
  pointer-events:none;z-index:3}
.tk-simdi::after{content:"";position:absolute;top:-1.5px;height:2px;background:var(--danger);
  left:calc(100% / var(--n, 7) * var(--gun, 0));width:calc(100% / var(--n, 7))}
.tk-simdi::before{content:"";position:absolute;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--danger);
  left:calc(100% / var(--n, 7) * var(--gun, 0) - 5px)}

/* Ay görünümü */
.tk-ay{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--border)}
.tk-ay-bas{font-size:.74rem;color:var(--muted);padding:6px 8px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface-2)}
.tk-ay-gun{min-height:max(96px,calc((100vh - 400px) / 6));border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:4px 4px 6px;display:flex;flex-direction:column;gap:2px;cursor:pointer;background:var(--surface);min-width:0}
.tk-ay-gun.hs{background:var(--surface-2)}
.tk-ay-gun.diger{background:var(--surface-2)}
.tk-ay-gun.diger .tk-ay-no{color:var(--faint)}
.tk-ay-gun:hover{box-shadow:inset 0 0 0 1px var(--border-strong)}
.tk-ay-no{align-self:flex-start;border:none;background:none;font-size:.8rem;color:var(--ink);padding:1px 6px;border-radius:10px;cursor:pointer;font-variant-numeric:tabular-nums}
.tk-ay-gun.bugun .tk-ay-no{background:var(--vurgu-1);color:#fff;font-weight:700}
.tk-ay-olay{font-size:.72rem;line-height:18px;padding:0 6px;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-left:3px solid var(--k);color:var(--ink);cursor:pointer}
.tk-ay-olay:hover{background:color-mix(in srgb,var(--k) 25%,var(--surface))}
.tk-ay-olay.dolu{background:color-mix(in srgb,var(--k) 45%,var(--surface));font-weight:600}
.tk-ay .tk-sure{margin:0;height:18px;line-height:16px;padding:0 6px}
.tk-daha{align-self:flex-start;border:none;background:none;color:var(--muted);font-size:.72rem;padding:0 6px;cursor:pointer}
.tk-daha:hover{color:var(--ink);text-decoration:underline}

/* Kayıt penceresi */
.tk-p-baslik{font-size:1.05rem;font-weight:600;margin-bottom:12px}
.tk-p-zaman{display:grid;grid-template-columns:auto minmax(0,1fr) 150px;gap:8px 8px;align-items:center;margin-bottom:6px}
select.input.tk-p-saat{padding-right:26px}
.tk-p-zaman.tumgun{grid-template-columns:auto minmax(0,1fr)}
.tk-p-zaman.tumgun .tk-p-saat{display:none}
.tk-p-et{font-size:.8rem;color:var(--muted)}
.tk-p-katlar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* Kategori ayarları */
.tk-kat-tablo .input{max-width:320px}
.tk-kat-tablo td{vertical-align:middle}
.tk-kat-tablo td:nth-child(4){white-space:nowrap}
.tk-renk-kap{position:relative;display:inline-block}
.tk-renk{width:28px;height:22px;border-radius:5px;border:1px solid var(--border-strong);background:var(--k);cursor:pointer;padding:0}
.tk-palet{position:absolute;z-index:20;top:28px;left:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);padding:8px;display:grid;grid-template-columns:repeat(6,24px);gap:6px;width:max-content}
.tk-palet[hidden]{display:none}
.tk-palet button{width:24px;height:24px;border-radius:5px;border:1px solid var(--border);background:var(--k);cursor:pointer;padding:0}
.tk-palet button.secili{outline:2px solid var(--ink);outline-offset:1px}
.tk-palet-ozel{grid-column:1 / -1;display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--muted);cursor:pointer}
.tk-palet-ozel input{width:34px;height:22px;padding:0;border:none;background:none;cursor:pointer}

@media (max-width:640px){
  .tk-arac{padding:10px 12px}
  .tk-baslik{order:5;flex-basis:100%;margin:6px 0 0;font-size:1rem;white-space:normal}
  .tk-p-zaman{grid-template-columns:auto minmax(0,1fr) 96px}
  .tk-ay-gun{min-height:72px}
  .tk-ay-olay{font-size:.66rem;padding:0 3px}
}

/* ── Ayarlar ▸ Yetkilendirme (CRM'deki izin tablosu) ── */
.yk-tablo th,.yk-tablo td{vertical-align:middle}
.yk-tablo .yk-grup-satir th{background:none;border-bottom:none;padding-bottom:0}
.yk-tablo th.yk-grup{text-align:center;font-size:.66rem;letter-spacing:.06em;color:var(--faint);
  border-bottom:2px solid var(--border);padding:6px 4px 3px}
.yk-tablo th.yk-sutun{text-align:center;min-width:66px;font-size:.7rem;line-height:1.25;white-space:normal;vertical-align:bottom;
  text-transform:none;letter-spacing:0}
.yk-rol-tablo{width:auto;min-width:min(100%,860px)}
.yk-rol-tablo th.yk-rol-bas{min-width:128px;font-size:.76rem;font-weight:700;color:var(--ink)}
.yk-rol-tablo .yk-ad{min-width:200px}
.yk-grup-ara td{background:var(--surface-2);font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);
  font-weight:700;padding:6px 12px}
.yk-tik{color:var(--ok);font-weight:800;font-size:1rem}
.yk-tablo th.yk-sutun > div{margin-top:5px}
.yk-tablo .yk-ad{min-width:190px;position:sticky;left:0;background:var(--surface);z-index:1}
.yk-tablo thead .yk-ad{background:var(--surface-2)}
.yk-hucre{text-align:center}
.yk-tam-hucre{text-align:left}
.yk-tam{font-size:.72rem;color:var(--ok);font-weight:700;background:var(--ok-soft);padding:2px 9px;border-radius:99px;white-space:nowrap}
/* select.input (padding 9px) bu kuraldan güçlü; seçici onu geçmeli, yoksa yazı kesiliyor. */
select.input.yk-kip{height:auto;padding:5px 26px 5px 9px;line-height:1.3;font-size:.8rem;width:auto;min-width:112px}
.yk-arac{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.yk-rol-sec{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:7px;
  padding:4px 10px;font-size:.76rem;cursor:pointer}
.yk-rol-sec.etkin{background:var(--vurgu-1);border-color:var(--vurgu-1);color:#fff}
.yk-kutu{position:relative;display:inline-block;width:20px;height:20px;cursor:pointer;vertical-align:middle}
.yk-kutu input{opacity:0;position:absolute;inset:0;margin:0;cursor:pointer}
.yk-kutu span{position:absolute;inset:0;border:2px solid var(--border-strong);border-radius:5px;background:var(--surface);transition:background .12s,border-color .12s}
.yk-kutu input:checked + span{background:var(--vurgu-1);border-color:var(--vurgu-1)}
.yk-kutu input:checked + span::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.yk-kutu input:focus-visible + span{outline:2px solid var(--vurgu-1);outline-offset:2px}
.yk-kutu.pasif{cursor:not-allowed;opacity:.5}
.yk-kutu.pasif input{cursor:not-allowed}

/* ── Ayarlar ▸ Posta Bağlantısı: bağlantı bilgileri formu ── */
.pb-izgara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;margin-top:8px}
@media (max-width:760px){.pb-izgara{grid-template-columns:1fr}}
.pb-izgara .field{margin-bottom:8px}
.pb-ipucu{display:block;font-size:.72rem;color:var(--faint);margin-top:4px;line-height:1.4}
.pb-parola{display:flex;gap:6px;align-items:center}
.pb-parola .input{flex:1;min-width:0}
.pb-dugmeler{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.pb-sonuc{margin-top:12px;padding:10px 12px;border-radius:9px;font-size:.84rem;display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;
  border:1px solid var(--border);background:var(--surface-2)}
.pb-sonuc.ok{border-color:color-mix(in srgb,var(--ok) 35%,transparent);background:var(--ok-soft)}
.pb-sonuc.danger{border-color:color-mix(in srgb,var(--danger) 35%,transparent);background:var(--danger-soft)}
.pb-sonuc > span:nth-child(2){flex:1;min-width:200px;line-height:1.45}
.pb-sonuc details{flex-basis:100%;font-size:.74rem}
.pb-sonuc code{display:block;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:4px;color:var(--muted)}
.pb-rehber{margin-top:14px;font-size:.8rem}
.pb-rehber summary{cursor:pointer;color:var(--accent);font-weight:600}
.pb-rehber ol{margin:8px 0 0 18px;line-height:1.6;color:var(--muted)}
.pb-rehber code{font-size:.72rem;overflow-wrap:anywhere}

/* ── Takipteki dosyalar: yıldız (02.10.2026) ──────────────────────────────
   Boşken ince çizgi, takipteyken dolu altın. Satırın ilk sütununda ve dosya
   penceresinin başlığında; tıklama satırı açmaz (app.js ▸ takipBagla). */
.takip-yildiz{display:inline-grid;place-items:center;width:18px;height:18px;padding:0;
  border:0;background:none;cursor:pointer;color:var(--muted);opacity:.55;border-radius:4px;
  transition:opacity .12s,transform .12s,color .12s}
.takip-yildiz svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.takip-yildiz:hover{opacity:1;color:#e0a100;transform:scale(1.15)}
.takip-yildiz:focus-visible{outline:2px solid var(--accent);outline-offset:1px;opacity:1}
.takip-yildiz.acik{opacity:1;color:#e0a100}
.takip-yildiz.acik svg{fill:#f5b301;stroke:#e0a100}
.dsy-baslik .takip-yildiz{width:22px;height:22px;flex:none}
.dsy-baslik .takip-yildiz svg{width:20px;height:20px}
.takip-kart{margin-bottom:14px}
.takip-kart .card-h h3{display:flex;align-items:center;gap:8px}
.takip-baslik-yildiz{display:inline-grid;place-items:center}
.takip-baslik-yildiz svg{width:17px;height:17px;fill:#f5b301;stroke:#e0a100;stroke-width:1.6;stroke-linejoin:round}

/* ── Dosya ataması (02.10.2026) ────────────────────────────────────────────
   Dosya tablosunda kendi "Sorumlu" sütunu (baş harfli çip); panoda "Bana
   atanan dosyalar" ve yönetici özeti; Dosyalar'da toplu atama şeridi; dosya
   penceresinde sorumlu seçici ve atanmamış dosyada kilit. */
#tostYuva{position:fixed;right:22px;bottom:22px;z-index:2000;display:flex;flex-direction:column;
  gap:8px;align-items:flex-end;pointer-events:none}
.tost{max-width:420px;padding:11px 16px;border-radius:12px;background:#1f2937;color:#fff;border:1px solid rgba(255,255,255,.12);
  font-size:.86rem;box-shadow:0 8px 24px rgba(0,0,0,.22);animation:tostGel .2s ease-out}
.tost.gidiyor{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
@keyframes tostGel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.atanan-kart{margin-bottom:16px;border-left:3px solid var(--accent)}
.atanan-kart .card-h .badge{border:0;cursor:pointer;font:inherit;font-size:.74rem}
.atama-ozet td a{color:inherit;font-weight:600;text-decoration:none}
.atama-ozet td a:hover{color:var(--accent-ink);text-decoration:underline}
.atama-ozet tr.atanmamis td{border-top:1px dashed var(--border)}
.dsy-sorumlu{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);white-space:nowrap}
.dsy-sorumlu select{max-width:230px}
.dsy-sorumlu-pil{font-size:.78rem;padding:4px 10px;border-radius:999px;background:var(--surface-2);
  color:var(--muted);white-space:nowrap}
.dsy-sorumlu-pil.ben{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.dsy-sorumlu-pil i{font-style:normal;opacity:.7}
.dosya-kilit-not{padding:9px 20px;font-size:.84rem;background:var(--caution-soft);color:var(--caution);
  border-bottom:1px solid var(--border)}
.dosya-kilitli .modal-b :disabled,.dosya-kilitli .modal-f :disabled{cursor:not-allowed}
.pano-ust .atanan-kart{margin-bottom:0}

/* Atama seçicisi: satırdaki "Ata" düğmesinden açılan aramalı kişi listesi. */
.atama-secici{position:absolute;z-index:1500;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.22);padding:12px;display:flex;flex-direction:column;gap:8px}
.atama-secici .as-bas{font-size:.82rem;color:var(--ink)}
.atama-secici .as-bas .muted{font-size:.76rem;margin-left:4px}
.atama-secici .as-liste{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin:0 -4px}
.as-kisi{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:0;border-radius:9px;
  background:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.as-kisi:hover,.as-kisi:focus-visible{background:var(--surface-2);outline:none}
.as-kisi.secili{background:var(--accent-soft)}
.as-kisi i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:.7rem;font-weight:800;color:#fff;background:var(--metal-icon)}
.as-kisi-ad{display:flex;flex-direction:column;min-width:0;flex:1}
.as-kisi-ad b{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-kisi-ad small{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-kisi em{font-style:normal;font-size:.66rem;color:var(--accent-ink);background:var(--accent-soft);
  padding:2px 6px;border-radius:999px;white-space:nowrap}
.as-kisi .as-tik{color:var(--ok);font-weight:800}
.as-bos{padding:10px 8px;font-size:.8rem;color:var(--muted)}

/* ── Ekipler (03.10.2026) ──────────────────────────────────────────────────
   Ayarlar ▸ Ekipler kartları, ekip penceresinin üye listesi, atama seçicisinde
   "Ekipler / Kişiler" başlıkları ve çiplerde ekip simgesi. */
.ekip-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.ekip-kart .card-h h3{display:flex;align-items:center;gap:8px}
.ekip-simge{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:var(--accent-soft);color:var(--accent-ink)}
.ekip-simge svg{width:16px;height:16px}
.ekip-govde{padding:14px 20px 16px;display:flex;flex-direction:column;gap:12px}
.ekip-uyeler{display:flex;flex-wrap:wrap;gap:6px}
.ekip-uye{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);font-size:.8rem;font-weight:600}
.ekip-uye i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:.6rem;font-weight:800;color:#fff;background:var(--metal-icon)}
.ekip-uye.pasif{opacity:.55;text-decoration:line-through}
.ekip-atama{font-size:.82rem;color:var(--muted)}
.ekip-dugmeler{display:flex;gap:8px;flex-wrap:wrap}
.ekip-aday-liste{max-height:300px;overflow-y:auto;margin-top:8px;border:1px solid var(--border);border-radius:10px;padding:4px}
.ekip-aday{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;cursor:pointer}
.ekip-aday:hover{background:var(--surface-2)}
.ekip-aday input{width:16px;height:16px;accent-color:var(--accent);flex:none}
.ekip-aday i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:.66rem;font-weight:800;color:#fff;background:var(--metal-icon)}
.ekip-aday span{display:flex;flex-direction:column;min-width:0;flex:1}
.ekip-aday b{font-size:.85rem;font-weight:600}
.ekip-aday small{font-size:.72rem;color:var(--muted)}
.ekip-aday em{font-style:normal;font-size:.66rem;color:var(--accent-ink);background:var(--accent-soft);padding:2px 6px;border-radius:999px}
.as-grup{padding:8px 8px 2px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.as-kisi .as-sayi{color:var(--muted);background:var(--surface-2)}
.as-kisi i svg,.ozet-hedef svg{width:62%;height:62%}
.ozet-hedef{display:inline-flex;align-items:center;gap:6px}
.ozet-hedef svg{width:15px;height:15px;color:var(--accent-ink)}
.dk-sor-cip.ekip i{background:linear-gradient(145deg,#0e7490,#155e75)}

/* ── Sorumluluk alanı ve çoklu sorumlu (03.10.2026) ────────────────────────
   Bir dosyanın birden çok sorumlusu olabilir (markadan ∪ dosyaya ayrıca).
   Çipte ve satır düğmesinde "+N"; seçicide çoklu seçim, markadan gelenler
   gri; Markalar tablosunda sorumlu listesi; kişi/ekip "Sorumluluk alanı"
   penceresi (markalar | tek tek dosyalar + arama). */
.atama-secici .as-liste{max-height:320px}
.as-kisi.markadan{cursor:default;opacity:.62;background:var(--surface-2)}
.as-kisi.markadan:hover{background:var(--surface-2)}
.as-kisi .as-markadan{color:var(--muted);background:var(--surface);border:1px solid var(--border)}
.as-kisi .as-tik{min-width:1ch;text-align:center}
.as-alt{display:flex;align-items:flex-end;gap:10px;border-top:1px solid var(--border);padding-top:9px}
.as-not{flex:1;font-size:.7rem;line-height:1.35;color:var(--muted)}
.as-alt .btn{flex:none}
.marka-sor-liste{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.marka-sor{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 2px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);font-size:.78rem;font-weight:600;white-space:nowrap}
.marka-sor.ben{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.marka-sor i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:.6rem;font-weight:800;color:#fff;background:var(--metal-icon)}
.marka-sor i svg{width:62%;height:62%}
.ozet-islem{display:inline-flex;gap:12px}
.atama-ozet-not{padding:0 20px 14px;margin:0}

.alan-modal .modal-b{display:flex;flex-direction:column;gap:14px}
.alan-modal .modal-h h3{display:flex;align-items:center;gap:10px}
.alan-hedef{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--metal-icon);color:#fff;font-size:.72rem;font-weight:800}
.alan-hedef i{font-style:normal}
.alan-hedef svg{width:62%;height:62%}
.alan-giris{margin:0;font-size:.84rem;line-height:1.5;color:var(--ink-2, var(--ink))}
.alan-izgara{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2fr);gap:16px;min-height:0}
.alan-bolum{display:flex;flex-direction:column;gap:8px;min-width:0}
.alan-bolum h4{margin:0;display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.alan-markalar{display:flex;flex-direction:column;gap:4px;max-height:52vh;overflow-y:auto;
  border:1px solid var(--border);border-radius:12px;padding:6px}
.alan-firma{padding:8px 8px 2px;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.alan-marka{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;cursor:pointer}
.alan-marka:hover{background:var(--surface-2)}
.alan-marka.secili{background:var(--accent-soft)}
.alan-marka.kapali{opacity:.55;cursor:not-allowed}
.alan-marka input,.alan-sonuc-satir input{width:16px;height:16px;flex:none;accent-color:var(--accent)}
.alan-marka-ad{display:flex;flex-direction:column;min-width:0}
.alan-marka-ad b{font-size:.86rem;font-weight:600}
.alan-marka-ad small{font-size:.72rem;color:var(--muted)}
.alan-dosyalar{display:flex;flex-direction:column;gap:2px;max-height:24vh;overflow-y:auto;
  border:1px solid var(--border);border-radius:12px;padding:4px}
.alan-dosya,.alan-sonuc-satir{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;min-width:0}
.alan-dosya:hover,.alan-sonuc-satir:hover{background:var(--surface-2)}
.alan-sonuc-satir{cursor:pointer}
.alan-sonuc-satir.kapali{cursor:default;opacity:.6}
.alan-no{flex:none;font-family:var(--mono, ui-monospace, monospace);font-size:.76rem;font-weight:700;color:var(--muted)}
.alan-dosya-ad{display:flex;flex-direction:column;min-width:0;flex:1}
.alan-dosya-ad b{font-size:.83rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alan-dosya-ad small{font-size:.71rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alan-dosya .badge,.alan-sonuc-satir .badge{flex:none}
.alan-not{flex:none;font-style:normal;font-size:.66rem;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--border);padding:1px 7px;border-radius:999px;white-space:nowrap}
.alan-cikar{flex:none;width:24px;height:24px;border:0;border-radius:50%;background:none;color:var(--muted);
  font-size:1.05rem;line-height:1;cursor:pointer}
.alan-cikar:hover,.alan-cikar:focus-visible{background:var(--danger-soft);color:var(--danger)}
.alan-bos{padding:10px 8px;font-size:.8rem}
.alan-ekle{display:flex;flex-direction:column;gap:8px;border:1px dashed var(--border);border-radius:12px;padding:10px}
.alan-ekle-bas{font-size:.78rem;font-weight:700;color:var(--ink)}
.alan-ara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.alan-ara #alAra{grid-column:1 / -1}
.alan-sonuc{display:flex;flex-direction:column;gap:2px;max-height:30vh;overflow-y:auto}
.alan-ekle-alt{display:flex;align-items:center;gap:12px;font-size:.78rem}
.alan-ekle-alt .muted{flex:1}
.alan-modal .modal-f{align-items:center}
.alan-ozet{margin-right:auto;font-size:.82rem}
@media (max-width:860px){
  .alan-izgara{grid-template-columns:1fr}
  .alan-ara{grid-template-columns:1fr}
  .alan-markalar{max-height:30vh}
}

/* ── Dosyanın denetim izi (03.10.2026) ─────────────────────────────────────
   Dosya penceresinin en altında, kapalı gelen bölüm: kim, ne zaman, ne
   yaptı. Birlik listesi değişiklikleri alan alan (eski → yeni). */
.dsy-iz-yuva{margin-top:16px}
.dsy-iz-yuva:empty{display:none}
.dsy-iz{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.dsy-iz > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  padding:11px 16px;font-weight:800;font-size:.88rem;color:var(--navy)}
.dsy-iz > summary::-webkit-details-marker{display:none}
.dsy-iz > summary::before{content:'▸';color:var(--muted);transition:transform .15s}
.dsy-iz[open] > summary::before{transform:rotate(90deg)}
.dsy-iz[open] > summary{border-bottom:1px solid var(--border)}
@media (prefers-reduced-motion:reduce){.dsy-iz > summary::before{transition:none}}
.dsy-iz-son{margin-left:auto;font-size:.76rem;font-weight:500;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
.iz-liste{list-style:none;margin:0;padding:6px 16px 10px;display:flex;flex-direction:column}
.iz-satir{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;padding:9px 0;
  border-bottom:1px solid var(--border)}
.iz-satir:last-child{border-bottom:0}
.iz-satir.beklenmeyen{background:linear-gradient(90deg,var(--caution-soft),transparent 60%)}
.iz-zaman{display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
.iz-zaman b{font-size:.8rem;font-weight:700;color:var(--ink)}
.iz-zaman small{font-size:.72rem;color:var(--muted)}
.iz-govde{display:flex;flex-direction:column;gap:3px;min-width:0}
.iz-ust{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.iz-ust .badge{font-size:.66rem}
.iz-kim{font-size:.8rem;font-weight:700;color:var(--ink)}
.iz-not,.iz-uyari{font-style:normal;font-size:.64rem;padding:1px 7px;border-radius:999px;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}
.iz-uyari{background:var(--caution-soft);border-color:transparent;color:var(--caution)}
.iz-ozet{font-size:.82rem;color:var(--ink);overflow-wrap:anywhere}
.iz-alanlar{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:.78rem}
.iz-alanlar span{color:var(--muted)}
.iz-alanlar s{color:var(--muted)}
.iz-kaynak{font-size:.7rem;color:var(--muted);overflow-wrap:anywhere}
.iz-hepsi{margin:0 16px 12px}
@media (max-width:640px){ .iz-satir{grid-template-columns:1fr;gap:4px} .iz-zaman{flex-direction:row;gap:6px} }



/* ── Eksiklik onayı, eşleşme önerileri, görevler (04.10.2026) ──────────────
   Pencere body'ye eklenir (dosya penceresinin de üstünde açılabilsin). */
.overlay.ek-ust{z-index:960}
.ek-dosya{display:flex;flex-direction:column;gap:2px;margin-bottom:14px;padding:10px 12px;border-radius:8px;background:var(--bg)}
.ek-dosya .muted{font-size:.78rem}
.ek-yazi{margin-bottom:14px;border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:.82rem}
.ek-yazi summary{cursor:pointer;font-weight:600;color:var(--ink)}
.ek-yazi-govde{margin-top:8px;max-height:220px;overflow:auto;white-space:pre-wrap;color:var(--muted);font-size:.8rem;line-height:1.5}
.ek-belgeler{display:flex;flex-direction:column;gap:6px;max-height:230px;overflow:auto;padding:2px 0}
.ek-belgeler .onay{color:var(--ink);font-weight:500}
.ek-belgeler .input{margin-top:4px}
.ek-oneri{font-style:normal;font-size:.7rem;font-weight:700;color:var(--warn);background:var(--warn-soft);border-radius:4px;padding:1px 6px}
.ek-son{margin-top:4px;padding:9px 12px;border-radius:8px;background:var(--warn-soft);font-size:.82rem;color:var(--ink)}
#ekHata{margin-top:10px}
@media (max-width:640px){ #eksiklikYuva .alan-ikili{grid-template-columns:1fr} }

.oneri-kart{margin-bottom:16px;border-left:3px solid var(--warn)}
.gorev-kart{margin-bottom:16px;border-left:3px solid var(--accent)}
.oneri-liste,.gorev-liste{display:flex;flex-direction:column}
.oneri-satir,.gorev-satir{display:flex;align-items:center;gap:14px;padding:11px 18px;border-top:1px solid var(--border)}
.oneri-ana,.gorev-ana{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.oneri-ana b,.gorev-ana b{font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oneri-ana span,.gorev-ana span{font-size:.76rem;color:var(--muted)}
.oneri-ana small,.gorev-ana small{font-size:.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oneri-dugme,.gorev-dugme{display:flex;gap:6px;flex-shrink:0;align-items:center}
.oneri-ben{font-style:normal;font-weight:700;color:var(--accent-ink)}
.gorev-satir.benim{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.gorev-sure{width:104px;flex-shrink:0;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.gorev-sure small{font-size:.7rem;color:var(--muted)}
.gorev-belgeler{display:flex;flex-wrap:wrap;gap:4px}
.gorev-belgeler span{font-size:.7rem;padding:1px 7px;border-radius:10px;background:var(--warn-soft);color:var(--ink)}
@media (max-width:900px){
  .oneri-satir,.gorev-satir{flex-wrap:wrap}
  .oneri-dugme,.gorev-dugme{width:100%;justify-content:flex-end}
}

/* Dosya penceresi */
.eksiklik-serit .dosya-gorev{color:var(--ink)}
.eksiklik-serit .dosya-gorev i{font-style:normal;font-weight:600}
.eksiklik-serit.oneri-serit{border-style:dashed}
/* Birden çok dosyaya işlenen yazı: pencerede beyan listesi */
.ek-dosyalar{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;padding:10px 12px;border-radius:8px;background:var(--bg);max-height:240px;overflow:auto}
.ek-dosyalar-bas{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.ek-dosyalar-bas .muted{font-size:.76rem}
.ek-dosya-sec{align-items:flex-start;color:var(--ink);font-weight:500}
.ek-dosya-sec input{margin-top:2px;flex-shrink:0}
.ek-dosya-sec span{display:flex;flex-direction:column;gap:1px;min-width:0}
.ek-dosya-sec small{font-size:.72rem;font-weight:500}

/* ── Dosya tablosu: kompakt satır + açılır ayrıntı (04.10.2026) ────────────
   Kullanıcı: "binlerce kayıt için kompakt görünüm + açılır detay". Her dosya
   TEK SATIR; künye (tedarikçi, harcama no, Birlik dosya) ayrıntıda. Sabit
   tablo düzeni: sütun genişlikleri başlıktan gelir, uzun metin üç noktayla
   kesilir, satır yüksekliği içerikle oynamaz. Sütunlar tablonun KENDİ
   genişliğine göre azalır (container query) — pano kartında dar, Dosyalar
   ekranında geniş; gizlenen bilgi ayrıntıda durur. */
.dk-kap{container-type:inline-size}
.table.dk{table-layout:fixed;font-size:.85rem}
.table.dk th,.table.dk td{padding:7px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.table.dk th{padding-top:9px;padding-bottom:9px;font-size:.7rem}
.table.dk tbody tr.dk-satir td:first-child{border-left:3px solid var(--kalem,var(--border-strong))}
.table.dk tbody tr.dk-satir:hover{background:color-mix(in srgb,var(--kalem,#8a919d) 7%,var(--surface))}
.table.dk tr.dk-satir.acik{background:var(--surface-2)}
.table.dk tr.dk-satir.acik td{border-bottom-color:transparent}
.table.dk tr.dk-satir.secili{background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.dk th.dk-sec,.dk td.dk-sec{width:36px;padding-right:0;text-align:center;cursor:default}
.dk .dk-sec input{width:15px;height:15px;accent-color:var(--vurgu-1,var(--accent));cursor:pointer;vertical-align:middle}
.dk th.dk-no{width:142px}
.dk th.dk-firma{width:140px}
.dk th.dk-asama{width:134px}
.dk th.dk-sor{width:116px}
.dk th.dk-sira{width:230px}
.dk th.dk-kalan{width:94px}
.dk th.dk-tutar{width:124px}
.dk-no-ic{display:flex;align-items:center;gap:5px;min-width:0}
.dk-ac{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:5px;
  background:none;color:var(--faint);cursor:pointer}
.dk-ac svg{width:14px;height:14px;transition:transform .15s ease}
.dk-ac:hover{background:var(--surface-2);color:var(--ink)}
.dk-satir.acik .dk-ac svg{transform:rotate(90deg)}
.dk-satir.acik .dk-ac{color:var(--ink)}
.dk a.dosya-no{text-decoration:none}
.dk a.dosya-no:hover{background:var(--accent-soft);color:var(--accent-ink)}
.table.dk td.dk-no{overflow:visible}
.dk-no-kap{position:relative;display:inline-flex}
.dk-uyari-i{position:absolute;top:-6px;right:-7px;display:grid;place-items:center;width:14px;height:14px;
  border-radius:50%;background:var(--danger);color:#fff;font-size:.58rem;font-weight:800;line-height:1;
  box-shadow:0 0 0 2px var(--surface);cursor:help}
.dk a.dosya-no.cop{text-decoration:line-through;color:var(--muted)}
.dk td.dk-firma .marka-pil{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
/* Etiket SABİT GENİŞLİKTE (kullanıcı: "bu başlıkları hizalasak"): etiketler
   farklı uzunlukta olunca yanındaki gider adı her satırda başka yerden
   başlıyordu. 108 px "Belgelendirme"ye kadar her adı tam gösterir; daha
   uzunu üç nokta, tamamı üzerine gelince. */
.dk td.dk-gider .kalem-pil{display:inline-block;width:108px;text-align:center;overflow:hidden;
  text-overflow:ellipsis;vertical-align:middle;margin-right:8px}
.dk-gider-ad{color:var(--ink)}
.dk td.dk-asama .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.dk-sor-cip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 9px 2px 2px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);font:inherit;font-size:.76rem;font-weight:600;color:var(--ink);
  vertical-align:middle}
button.dk-sor-cip{cursor:pointer}
button.dk-sor-cip:hover{border-color:var(--border-strong)}
.dk-sor-cip i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:.62rem;font-weight:800;color:#fff;background:var(--metal-icon)}
.dk-sor-cip i svg{width:13px;height:13px}
.dk-sor-cip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-sor-cip b{font-size:.68rem;color:var(--muted)}
.dk-sor-cip.ben{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.dk-sor-bos{padding:2px 9px;border-radius:999px;border:1px dashed var(--border-strong);background:none;
  font:inherit;font-size:.74rem;color:var(--muted);cursor:pointer}
.dk-sor-bos:hover{color:var(--ink);border-style:solid}
.dk-sira-m{font-weight:700;font-size:.8rem;color:var(--ink)}
.dk-sira-m b{font-weight:600;color:var(--muted);margin-left:2px}
.dk-sira-m.t-danger{color:var(--danger)}
.dk-sira-m.t-warn{color:var(--warn)}
.dk-sira-m.t-caution{color:var(--caution)}
.dk-sira-m.t-ok{color:var(--ok)}
.dk-sira-m.t-accent{color:var(--accent-ink)}
.dk-sira-m.t-soluk{color:var(--muted);font-weight:600}
.dk td.dk-tutar{font-weight:700}

/* Ayrıntı satırı */
.table.dk tr.dk-detay{cursor:default;background:var(--surface-2)}
.table.dk tr.dk-detay:hover{background:var(--surface-2)}
.table.dk tr.dk-detay td{padding:0 10px 12px;white-space:normal;overflow:visible;border-left:3px solid transparent}

.dk-detay-kap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.9fr) minmax(0,1.25fr);
  gap:8px;padding:2px 0 0 42px}
.dk-blok{min-width:0;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--blok);
  border-radius:8px;padding:7px 12px 8px}
.dk-blok h4{margin:0 0 5px;font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--blok)}
.dk-blok dl{display:grid;grid-template-columns:7.4rem minmax(0,1fr);gap:3px 10px;margin:0;font-size:.82rem;line-height:1.35}
.dk-blok dt{color:var(--muted);font-weight:500}
.dk-blok dd{margin:0;min-width:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.dk-blok dd small{display:block;margin-top:1px;font-size:.72rem;font-weight:500;color:var(--muted)}
.dk-blok dd .badge{vertical-align:middle}
.dk-b-kunye{--blok:var(--kalem,var(--accent-ink))}
.dk-b-tutar{--blok:var(--ok)}
.dk-b-surec{--blok:var(--vurgu-1,var(--accent))}
.dk-kod{font-family:ui-monospace,'Cascadia Code',monospace;font-size:.76rem;font-weight:700;
  background:var(--surface-2);border:1px solid var(--border);padding:0 6px;border-radius:5px}
.dk-blok .hedef{color:var(--accent-ink);font-weight:800;font-size:.62rem;letter-spacing:.04em;
  background:var(--accent-soft);padding:1px 6px;border-radius:20px;margin-left:4px}
.dk-iade{color:var(--ok)}
.dk-oran{font-size:.7rem;font-weight:800;padding:0 6px;border-radius:20px;background:var(--ok-soft);color:var(--ok)}
.dk-tam{color:var(--ok)}
.dk-eksik{color:var(--caution)}
.dk-mini{margin-left:6px;padding:0 8px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);
  font:inherit;font-size:.7rem;font-weight:600;color:var(--accent-ink);cursor:pointer;vertical-align:1px}
.dk-mini:hover{border-color:var(--border-strong);background:var(--accent-soft)}
.dk-uyari{grid-column:1 / -1;margin:0}
.dk-detay-alt{grid-column:1 / -1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dk-detay-alt .islem-serit{justify-content:flex-start}
.dk-detay-alt .islem-serit .btn{opacity:1}

/* Seçim çubuğu (Dosyalar ekranı) */
.dk-secim{position:sticky;top:60px;z-index:3;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 16px;background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-bottom:1px solid var(--border)}
.dk-secim b{margin-right:6px;font-size:.86rem;color:var(--accent-ink)}
.dk-secim .dk-temizle{margin-left:auto}
.dk-secim[hidden]{display:none}

/* Tablonun genişliğine göre sütun azaltma; gizlenen her bilgi ayrıntıda. */
@container (max-width:1080px){ .dk .dk-firma{display:none} .dk th.dk-sira{width:178px} .dk-sira-m b{display:none} }
@container (max-width:900px){ .dk .dk-sor{display:none} .dk th.dk-sira{width:150px} }
@container (max-width:740px){ .dk .dk-sira{display:none} .dk .dk-gider-ad{display:none} .dk th.dk-asama{width:120px} }
@container (max-width:980px){ .dk-detay-kap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .dk-b-kunye{grid-column:1 / -1} }
@container (max-width:560px){ .dk .dk-kalan{display:none} .dk th.dk-tutar{width:108px}
  .dk-detay-kap{grid-template-columns:minmax(0,1fr);padding-left:0} }

/* ── Dosyalar: süzgeç çubuğu tek satır (04.10.2026) ────────────────────────
   Kullanıcı: "kibarlaştıralım, alanları biraz küçültelim aynı sıraya sığsın".
   Arama kutusu esner, seçiciler sabit ve dar (seçili metin kısa: "Tüm
   kalemler", "Sorumlu: hepsi"); uzun seçenek açılan listede okunur. Telefon
   (≤640) kendi kuralında kalır. */
/* .btn display veriyor ve [hidden]ı eziyordu: "Temizle" süzgeç yokken de görünüyordu. */
.arama-bar [hidden]{display:none}
@media (min-width:641px){
  .arama-bar{gap:6px;padding:10px 14px}
  .arama-bar .input{height:32px;padding:4px 10px;font-size:.8rem;border-radius:7px;border-color:var(--border)}
  .arama-bar .input:hover{border-color:var(--border-strong)}
  /* Tarayıcının kendi oku ~20 px yer tutup "Tüm durumla…" diye kesiyordu;
     yerine ince bir ok, metne yer kalıyor. */
  .arama-bar select.input{flex:0 0 auto;min-width:0;-webkit-appearance:none;appearance:none;
    padding:4px 22px 4px 9px;font-size:.78rem;text-overflow:ellipsis;
    background:var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238a919d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 10px}
  .arama-bar .ara-giris{flex:1 1 120px;min-width:120px}
  .arama-bar #araDurum{width:114px}
  .arama-bar #araKalem{width:116px}
  .arama-bar #araEksiklik{width:122px}
  .arama-bar #araMarka{width:116px}
  .arama-bar #araSorumlu{width:126px}
  .arama-bar .ara-ulke{flex:0 1 128px;min-width:112px}
  .arama-bar .btn{height:32px;padding:0 11px;font-size:.78rem}
  .arama-bar #araCop.simge{width:32px;padding:0;justify-content:center}
  .arama-bar .ara-cop .badge{font-size:.7rem}
  .ara-ozet{padding:0 14px 10px;gap:6px}
  .ara-tasinan{padding:0 14px 8px}
  .arama-not{padding:0 14px 10px}
}

/* ── Hazır Raporlar (04.10.2026) ───────────────────────────────────────────
   Kart galerisi: her rapor bir Rapor Kurucu ayarı; Aç ve Excel. Gruplar
   başlıklı, kartlar eşit yükseklikte, düğmeler altta hizalı. */
.hr-suzgec{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:12px 16px;margin-bottom:16px}
.hr-suzgec label{display:flex;flex-direction:column;gap:4px;font-size:.72rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em}
.hr-suzgec select.input{width:180px;height:32px;padding:4px 9px;font-size:.8rem;text-transform:none;letter-spacing:0}
.hr-suzgec .muted{font-size:.76rem;margin-left:auto}
.hr-grup{margin-bottom:18px}
.hr-grup h3{margin:0 0 8px;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.hr-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.hr-kart{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-top:3px solid var(--vurgu-1,var(--accent))}
.hr-ad{font-size:.95rem;color:var(--navy)}
.hr-soru{margin:0;font-size:.8rem;line-height:1.45;color:var(--muted);flex:1}
.hr-eksen{font-size:.74rem;color:var(--ink);font-weight:600;line-height:1.5}
.hr-eksen span{display:block;font-weight:500;color:var(--muted)}
.hr-eksen em{display:block;font-style:normal;font-weight:600;color:var(--accent-ink)}
.hr-dugme{display:flex;gap:6px;margin-top:6px}
.hr-bant{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;
  padding:9px 14px;border-radius:10px;background:var(--accent-soft);font-size:.84rem;color:var(--accent-ink)}
.hr-bant b{color:var(--navy)}
/* Hazır rapor favorileri: kartta yıldız, galerinin başında Favoriler. */
.hr-ust{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.hr-yildiz{flex:none;width:22px;height:22px;margin:-2px -4px 0 0}
.hr-yildiz svg{width:18px;height:18px}
.hr-favori h3{display:flex;align-items:center;gap:6px}
.hr-favori-bos{padding:12px 14px;border:1px dashed var(--border-strong);border-radius:10px;font-size:.8rem;color:var(--muted)}

/* ── Birlik listesi kartı: sade görünüm (04.10.2026) ───────────────────────
   Kullanıcı: "panodaki Birlik listesini biraz kibarlaştıralım; reddedilen
   ve ödenen toplamlar kırmızı, yeşil olsun". Satırlar sıkı, ödenen destek
   yeşil, red kırmızı; mutabakat ve tanımlar tek satırlık katlanır başlıkta. */
.birlik-listesi-karti .table.mutabakat{font-size:.84rem}
.birlik-listesi-karti .table.mutabakat th{padding:8px 12px;font-size:.68rem}
.birlik-listesi-karti .table.mutabakat td{padding:6px 12px}
.birlik-listesi-karti .table.mutabakat tfoot td{padding:8px 12px;vertical-align:top}
.birlik-listesi-karti td.bl-odenen{color:var(--ok)}
.birlik-listesi-karti td.bl-odenen b{color:var(--ok)}
.birlik-listesi-karti td.bl-red b{color:var(--danger)}
.birlik-listesi-karti th.bl-odenen{color:var(--ok)}
.bl-adet{display:block;margin-top:1px;font-size:.68rem;font-weight:500;color:var(--muted)}
.birlik-listesi-karti > .mutabakat-yil{margin:10px 14px 0}
.birlik-listesi-karti > .mutabakat-yil:last-child{margin-bottom:14px}
.birlik-listesi-karti > .mutabakat-yil > summary{padding:8px 12px;font-size:.8rem}
.birlik-listesi-karti > .mutabakat-yil .table.mutabakat{border:0}
.bl-not .rapor-not{padding:10px 14px 0;margin:0}
.bl-not .rapor-not:last-child{padding-bottom:12px}
.birlik-listesi-karti th.bl-red-h{color:var(--danger)}

/* ── Süreç şeması: küçük hâl, tek satır (04.10.2026) ───────────────────────
   Aşamalar sayılarıyla, büyük şemadaki renkleriyle; tıklayınca o aşamanın
   dosyaları. Yolda / alınan / red sağda kısaltılmış. */
.card-h .sema-boyut{margin-left:auto}
.sema-boyut{white-space:nowrap}
.sema-kucuk{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:10px 14px 10px 18px}
.sema-kucuk h3{margin:0;font-size:.92rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.sema-boyut.simge{width:30px;padding:0;justify-content:center}
.sk-akis{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.sk-akis > i{font-style:normal;color:var(--faint);font-size:.9rem}
.sk-ayrac{width:1px;height:22px;background:var(--border);margin:0 6px}
.sk-oge{display:inline-flex;align-items:baseline;gap:5px;padding:3px 10px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface-2);font:inherit;font-size:.74rem;font-weight:600;
  color:var(--muted);cursor:pointer;white-space:nowrap}
.sk-oge b{font-size:.92rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.sk-oge:hover{border-color:var(--border-strong);background:var(--surface)}
.sk-oge.accent b{color:var(--accent-ink)}
.sk-oge.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 25%,var(--surface))}
.sk-oge.warn b{color:var(--warn)}
.sk-oge.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 25%,var(--surface))}
.sk-oge.ok b{color:var(--ok)}
.sk-oge.danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 25%,var(--surface))}
.sk-oge.danger b{color:var(--danger)}
.sk-para{display:flex;gap:10px;margin-left:auto;font-size:.76rem;color:var(--muted);white-space:nowrap}
.sk-para b{color:var(--navy);font-variant-numeric:tabular-nums}
.sk-para .ok b{color:var(--ok)}
.sk-para .danger b{color:var(--danger)}
@media (max-width:900px){ .sk-para{margin-left:0} }

/* ── Destek kayıtları (04.10.2026) ─────────────────────────────────────────── */
.nav-sayi{flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);
  color:#fff;font-size:.68rem;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.ds-sayi{margin-left:4px;font-weight:700;opacity:.8}
.ds-tablo td{vertical-align:middle}
.ds-tablo tbody tr{cursor:pointer}
.ds-tablo tbody tr:hover{background:var(--surface-2)}
.ds-tablo .ds-no{white-space:nowrap}
.ds-tablo .ds-konu b{display:block;font-weight:600;color:var(--navy)}
.ds-tablo .ds-konu small{color:var(--muted);font-size:.74rem}
.ds-tablo .ds-acan,.ds-tablo .ds-zaman{color:var(--muted);font-size:.8rem;white-space:nowrap}
.ds-okunmamis .ds-konu b{font-weight:800}
.ds-yeni{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;background:var(--danger-soft);
  color:var(--danger);font-size:.68rem;font-weight:700;vertical-align:middle}
.ds-oncelik{font-size:.78rem;font-weight:600;color:var(--muted)}
.ds-oncelik.o-yuksek{color:var(--warn)}
.ds-oncelik.o-acil{color:var(--danger)}

.ds-ek{margin-top:10px;border:1.5px dashed var(--border-strong);border-radius:10px;padding:10px 12px;
  background:var(--surface-2);transition:border-color .12s,background .12s}
.ds-ek.uzerinde{border-color:var(--accent);background:var(--accent-soft)}
.ds-ek-ipucu{font-size:.8rem;color:var(--muted)}
.ds-ek-sec{color:var(--accent-ink);text-decoration:underline;cursor:pointer}
.ds-ek-liste{display:flex;flex-wrap:wrap;gap:8px}
.ds-ek-liste:not(:empty){margin-top:8px}
.ds-ek-oge{display:flex;align-items:center;gap:6px;max-width:240px;padding:4px 4px 4px 4px;border:1px solid var(--border);
  border-radius:8px;background:var(--surface);font-size:.76rem}
.ds-ek-oge img{width:44px;height:32px;object-fit:cover;border-radius:4px;flex:0 0 auto}
.ds-ek-oge i{font-style:normal;padding:0 4px}
.ds-ek-oge span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ds-ek-oge small{color:var(--faint);white-space:nowrap}
.ds-ek-oge button{border:none;background:none;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer;padding:0 4px}
.ds-ek-oge button:hover{color:var(--danger)}

/* Kayıt penceresi: başlık + künye sabit, yazışma kayar, yanıt kutusu altta. */
.modal.ds-pencere{display:flex;flex-direction:column;overflow:hidden}
.ds-pencere .modal-h h3{display:flex;align-items:center;gap:8px;min-width:0}
.ds-kunye{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 22px;border-bottom:1px solid var(--border);
  font-size:.78rem;color:var(--muted)}
.ds-akis{flex:1 1 auto;overflow:auto;display:flex;flex-direction:column;gap:10px;background:var(--bg);min-height:120px}
.ds-mesaj{max-width:82%;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--border)}
.ds-mesaj.musteri{align-self:flex-end;background:var(--accent-soft);border-color:transparent}
.ds-mesaj.destek{align-self:flex-start;border-left:3px solid var(--ok)}
.ds-mesaj.sistem{align-self:center;max-width:none;padding:2px 10px;border:none;background:none;font-size:.72rem;color:var(--faint)}
.ds-mesaj-bas{display:flex;align-items:baseline;gap:6px;font-size:.76rem;color:var(--muted);margin-bottom:4px}
.ds-mesaj-bas b{color:var(--navy)}
.ds-mesaj-bas time{margin-left:auto;padding-left:12px;white-space:nowrap}
.ds-mesaj-metin{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.88rem;line-height:1.5}
.ds-ekler{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ds-ek-gorsel img{display:block;max-width:220px;max-height:150px;border-radius:6px;border:1px solid var(--border)}
.ds-ek-dosya{font-size:.8rem;padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface)}
.ds-yanit{padding:12px 22px 14px;border-top:1px solid var(--border);background:var(--surface)}
.ds-yanit .ds-ek{margin-top:8px;padding:6px 10px}
.ds-uyari{font-size:.78rem;color:var(--warn);margin-bottom:6px}
.ds-yanit-alt{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
@media (max-width:700px){ .ds-mesaj{max-width:100%} .alan-ikili{grid-template-columns:1fr} }

/* Panodaki "Bana atanan dosyalar": Açık | Tümü (04.10.2026). Etkin sekmenin
   yazısı --surface: koyu temada --navy açık renge döndüğü için #fff okunmazdı. */
.atanan-sekme{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;flex:0 0 auto}
.atanan-sekme button{border:none;background:var(--surface);padding:5px 12px;font:inherit;font-size:.78rem;
  color:var(--muted);cursor:pointer;display:inline-flex;align-items:baseline;gap:6px}
.atanan-sekme button+button{border-left:1px solid var(--border)}
.atanan-sekme button b{color:var(--navy);font-variant-numeric:tabular-nums}
.atanan-sekme button:hover{background:var(--surface-2)}
.atanan-sekme button.acik{background:var(--navy);color:var(--surface)}
.atanan-sekme button.acik b{color:var(--surface)}
.atanan-durumlar{display:flex;flex-wrap:wrap;gap:6px;padding:10px 18px 4px}
.ad-cip{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--muted);font:inherit;font-size:.78rem;cursor:pointer}
.ad-cip b{color:var(--navy);font-variant-numeric:tabular-nums}
.ad-cip:hover{border-color:var(--border-strong)}
.ad-cip.d-sonuclandi{background:var(--ok-soft);border-color:transparent}
.ad-cip.d-sonuclandi b{color:var(--ok)}
.ad-cip.d-reddedildi{background:var(--danger-soft);border-color:transparent}
.ad-cip.d-reddedildi b{color:var(--danger)}
.ad-cip.d-eksik{background:var(--warn-soft);border-color:transparent}
.ad-cip.d-eksik b{color:var(--warn)}

/* ── Konsol ▸ Destek (04.10.2026). Yazışmada bizim mesajımız SAĞDA, müşterininki
   solda — portaldakinin aynası: herkes kendi yazdığını sağda görür. */
.dk-kiracilar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.dk-kiraci{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 14px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);cursor:pointer;font:inherit;text-align:left;min-width:150px}
.dk-kiraci b{font-size:.84rem;color:var(--navy)}
.dk-kiraci span{font-size:.74rem;color:var(--muted)}
.dk-kiraci em{font-style:normal;color:var(--danger);font-weight:700}
.dk-kiraci.secili{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}
.dk-kiraci.hatali{border-style:dashed}
.dk-arac{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ds-tablo tr.dk-bizde td:first-child{box-shadow:3px 0 0 var(--danger) inset}
/* Tablo hücresinde max-width yok sayılır; sınır içteki kutuda. */
.ds-tablo .dk-konu > div{max-width:min(320px,22vw)}
.ds-tablo .dk-konu b{display:block;font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-tablo .dk-konu small{display:block;color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-tablo .dk-musteri > div{font-size:.8rem;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-islem{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 22px;border-bottom:1px solid var(--border);font-size:.82rem}
.dk-islem .sp{flex:1}
.dk-akis .ds-mesaj.musteri{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent)}
.dk-akis .ds-mesaj.destek{align-self:flex-end;background:var(--ok-soft);border:1px solid transparent}
.dk-bilgi{font-size:.8rem;color:var(--ok);margin-bottom:6px}
.dp-ozet{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.84rem;align-items:center}
.dp-rehber{font-size:.84rem;color:var(--muted)}
.dp-rehber summary{cursor:pointer;color:var(--navy);font-weight:600}
.dp-rehber ol{margin:8px 0 0 18px;padding:0;line-height:1.6}
.dp-rehber code{font-size:.76rem;word-break:break-all}

/* ── Tanılama: Sorunu kaydederek bildir (05.10.2026) ─────────────────────── */
#taniSerit{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:950;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 32px);padding:10px 14px;border-radius:14px;
  background:var(--navy);color:var(--surface);box-shadow:0 12px 32px rgba(0,0,0,.35);font-size:.84rem}
#taniSerit[hidden]{display:none}
#taniSerit b{font-weight:700}
#taniSerit #taniSure{font-variant-numeric:tabular-nums;opacity:.85}
#taniSerit .tani-ipucu{opacity:.85}
#taniSerit .tani-sayi{padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.12);font-size:.76rem}
#taniSerit .tani-sayi.hatali{background:var(--danger);color:#fff}
#taniSerit .btn-ghost{background:transparent;color:var(--surface);border-color:rgba(255,255,255,.35)}
.tani-nokta{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--danger);flex:0 0 auto;
  animation:taniNabiz 1.4s ease-in-out infinite}
@keyframes taniNabiz{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.tani-nokta{animation:none}}
.tani-dugme{margin-right:auto;display:inline-flex;align-items:center;gap:8px}
.tani-bilgi{margin-top:10px;padding:8px 12px;border-radius:8px;background:var(--surface-2);font-size:.8rem;color:var(--muted);line-height:1.5}
.tani-bilgi b{color:var(--navy)}
.tani-on{margin:8px 0 0;max-height:220px;overflow:auto;padding:8px;border-radius:6px;background:var(--surface);
  border:1px solid var(--border);font-size:.7rem;line-height:1.45;white-space:pre-wrap;word-break:break-all}
.tani-katman{z-index:960}
.tani-bas{margin:0;padding:8px 10px;border-radius:6px;background:var(--surface-2);font-size:.74rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.tani-tablo td{vertical-align:top;font-size:.8rem}
.tani-tablo .tani-ayrinti{word-break:break-word}
.tani-tablo tr.tani-hata td{background:var(--danger-soft)}
.tani-gunluk{margin:6px 0 0;max-height:260px;overflow:auto;padding:8px;border-radius:6px;background:var(--surface);
  border:1px solid var(--border);font-size:.7rem;white-space:pre-wrap;word-break:break-all}
.ds-ek-dosya.dk-tani{cursor:pointer;font:inherit;font-size:.8rem}