:root {
  /* ==========================================================================
     TEMA DEGISKENLERI — ACIK KIP
     --------------------------------------------------------------------------
     Kural: renk DOGRUDAN yazilmaz, degiskenden gelir. Bu dosyada 114 gomulu
     renk vardi, hepsi buraya tasindi; yoksa koyu kipte tek tek avlamak
     gerekiyordu.
     Acik kip degerleri ESKISIYLE BIREBIR AYNI - koyu kip eklenirken acik
     kipin gorunumu degismedi.
     ========================================================================== */

  /* --- marka --- */
  --teal: #ABD590;      /* marka yuzeyi: buton, tablo basligi */
  --teal-m: #8FC76B;    /* hover / daha guclu dolgu */
  --teal-d: #4A762D;    /* KOYU DOLGU - uzerine --on-vurgu yazilir */
  --teal-l: #EBF5E5;    /* cok acik zemin tonu */
  --on-teal: #1F2C31;   /* --teal / --teal-m uzerindeki yazi */
  --on-vurgu: #fff;     /* --teal-d dolgusu uzerindeki yazi */
  /* ROL AYRIMI: --teal-d hem dolgu hem yazi rengi olarak kullaniliyordu.
     Koyu kipte ikisi ZIT yone gider (dolgu acilir, uzerindeki yazi koyulasir).
     Yazi rolu ayri degiskene alindi. */
  --yesil-yazi: #4A762D;
  --accent: #4A762D;

  /* --- yuzeyler --- */
  --bg: #f4f6f7;          /* sayfa zemini */
  --card: #ffffff;        /* kart / panel */
  --yuzey-2: #fafcfc;     /* hafif ton: zebra satir, kart gradyani alti */
  --yuzey-3: #eef2f3;     /* belirgin ton: tablo basligi, notr rozet */
  --yuzey-yesil: #f2f8f4;
  --yuzey-yesil-2: #e6f0ec;
  --line: #dce4e7;
  --line-koyu: #c3ced2;   /* daha gorunur ayirici */
  --text: #1f2c31;
  --muted: #5f7077;      /* 4,5:1 icin koyulastirildi: #6a7b82 en tonlu
                            yuzeyde 3,91:1 veriyordu (899 ogede olculdu).
                            #5f7077 esigi gecen EN ACIK deger (en kotu 4,58). */
  --ipucu-zemin: #1f2c31; /* kucuk kara kutu ipuclari */
  --ipucu-yazi: #fff;

  /* --- durum --- */
  --ok: #2e7d5b;
  --ok-koyu: #175a3c;
  /* YAZI rolu: --ok bir ISARET rengi (esik 3:1); yazi 4,5:1 istiyor ve
     #2e7d5b en tonlu yuzeyde 4,29 veriyordu. */
  --ok-yazi: #2a7051;
  --ok-tint: #eaf3ea;
  --warn: #c07a1a;
  --warn-yazi: #6B4400;
  --warn-tint: #FFF3CD;
  --warn-kenar: #E0B44E;
  --gecikme-tint: #FFE1BF;   /* TPF_02 gecikme nedeni girilmiş satır (turuncu zemin) */
  --gecikme-kenar: #E8862A;
  --bad: #b3402f;
  --bad-tint: #fbeae7;
  --bad-kenar: #e3b7af;

  /* --- grafik renkleri ---
     Sayfa renkleri her grafikte TEK basina kullanilir (ayni grafikte
     bulusmazlar). Ayni grafikte bulusan iki kume - WB serileri ve MES halkasi -
     renk koru gorusunde ayrica dogrulandi; bkz. tools/renk-dogrula.js. */
  --gr-mor: #7B3FA0;
  --gr-turuncu: #C07A1A;
  --gr-yesil: #4A762D;
  --gr-mavi: #356FD4;
  --gr-pembe: #C2456F;
  --gr-konum: #5C89DB;
  --gr-acik-yesil: #8FC76B;
  --gr-mor-2: #8C4BB0;        /* WB: bug serisi */
  /* Sektör treemap YOĞUNLUK rampası (Ümit, 2026-10-08: "yoğunlar daha koyu ve farklı renk,
     az yoğun olanlar daha açık ve farklı renk"). ÇOK TONLU sıralı rampa (ColorBrewer YlGnBu
     ailesi): az = açık sarı-yeşil -> turkuaz -> mavi -> çok = koyu mor. Sırayı AÇIKLIK taşır
     (renk körü de okur): dataviz validate_palette --ordinal -> monoton L PASS, adım farkı
     >= 0,06 PASS, açık uç yüzeye 2,25:1 PASS; "tek ton" FAIL BİLEREK (Ümit'in isteği farklı
     renk). Etiket mürekkebi ölçüldü (hepsi >= 4,5:1): 1-2 koyu yazı, 3-5 beyaz. */
  --gr-tm-1: #86BC4E; --gr-tm-2: #36A48B; --gr-tm-3: #2478AA; --gr-tm-4: #29509D; --gr-tm-5: #351A6E;
  --gr-tm-y1: #0f0a1c; --gr-tm-y2: #0f0a1c; --gr-tm-y3: #ffffff; --gr-tm-y4: #ffffff; --gr-tm-y5: #ffffff;
  --gr-teal: #1F8A70;         /* MES: beklemede */
  /* SWOT baslik DOLGULARI. --gr-teal ve --warn ISARET renkleri (3:1 esigine gore
     secildi, grafiklerde kullaniliyor); uzerlerine BEYAZ YAZI gelince 4,5:1
     tutmuyordu (olculdu: Firsatlar 4,26 · Tehditler 3,48). Token'lari global
     degistirmek olculmus grafik paletini bozardi -> yazi tasiyan dolgu icin
     ayri deger. Acik kipte --on-vurgu beyaz.                                */
  --swot-o: #1e856c;          /* beyaz yazi ile 4,54 */
  --swot-t: #a56916;          /* beyaz yazi ile 4,53 */
  --gr-kirmizi-koyu: #8E2F22; /* MES: pasif */
  --gr-etiket: #fff;          /* dolgu ustune yazilan etiket */

  --radius: 10px;
  /* Golge ASAGI agirlikli: kartlar sayfadan kalksin (Umit, 2026-09-10). */
  --shadow: 0 3px 5px -1px rgba(31,58,68,.16), 0 8px 16px -6px rgba(31,58,68,.22);
  --shadow-bar: 0 1px 3px rgba(31,58,68,.10), 0 4px 12px rgba(31,58,68,.08);
  --golge-guc: rgba(31,58,68,.20);
  color-scheme: light;
}

/* ============================================================================
   KOYU KIP
   ----------------------------------------------------------------------------
   Iki yerde tanimli, ikisi de SART:
     1) @media (prefers-color-scheme: dark) — kullanici bir sey secmediyse
        isletim sistemini izler. :root:not([data-tema="acik"]) ile sarili:
        kullanici ACIKCA "acik" dediyse sistem koyu olsa bile acik kalir.
     2) :root[data-tema="koyu"] — kullanici acikca koyu dediyse, sistem acik
        olsa bile koyu olur.
   Yalniz bir tanesi olsaydi ya sistem takip edilemezdi ya da elle secim
   sistemi ezemezdi.

   GRAFIK RENKLERI yeniden secildi ve OLCULDU (tools/renk-dogrula.js):
     MES halkasi (5 dilim, ayni grafikte) : en kotu cift DE 17.2 (acik kip 13.3)
     WB serileri (3 seri, ayni grafikte)  : en kotu cift DE 21.9 (acik kip 25.9)
   Sayfa renkleri (her grafik TEK renk, ayni grafikte bulusmuyorlar) icin
   yalniz kontrast onemli: hepsi zemine karsi >= 5.5:1.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    /* --- marka ---
       ROL DEGISIMI: acik kipte --teal-d KOYU yesil dolgu + BEYAZ yazi idi.
       Koyu kipte tersi: ACIK yesil dolgu + KOYU yazi. Marka kimligi ayni,
       kontrast korunuyor (olculdu: 9,05:1). Koyu yesil dolguyu korumak
       uzerindeki beyaz yaziyi 4,24:1'e dusuruyordu - 13px kalin yazi icin
       gereken 4,5:1'in altinda. */
    --teal: #8FC76B;
    --teal-m: #A8DC86;
    --teal-d: #8FC76B;
    --teal-l: #23331f;
    --on-teal: #12181c;
    --on-vurgu: #12181c;
    --yesil-yazi: #A5D98A;     /* zemine karsi 9,98:1 */
    --accent: #A5D98A;

    /* --- yuzeyler --- */
    --bg: #12171a;
    --card: #1b2228;
    --yuzey-2: #212a30;
    --yuzey-3: #28333a;
    --yuzey-yesil: #1c2a22;
    --yuzey-yesil-2: #23342a;
    --line: #2e3a42;
    --line-koyu: #435059;
    --text: #e3ebee;           /* 13,3:1 */
    --muted: #9bacb4;          /* 6,93:1 */
    /* Ipucu kutusu TERS CEVRILDI: acik kipte koyu kutu/beyaz yazi idi; koyu
       zeminde koyu kutu gorunmez olurdu. */
    --ipucu-zemin: #e8eef1;
    --ipucu-yazi: #12181c;

    /* --- durum (hepsi zemine karsi >= 5,8:1) --- */
    --ok: #5FCB96;
  --ok-yazi: #5FCB96;    /* koyu zeminde zaten 8,17:1 */
    --ok-koyu: #8FE0B4;
    --ok-tint: #172a22;
    --warn: #E8B93F;
    --warn-yazi: #F0C862;
    --warn-tint: #33280e;
    --warn-kenar: #7a5f1e;
    --gecikme-tint: #4f2d0c;
    --gecikme-kenar: #D9822F;
    --bad: #F0776A;
    --bad-tint: #331a17;
    --bad-kenar: #7a3730;

    /* --- grafik renkleri (tools/renk-dogrula.js ile olculdu) ---
       Sayfa renkleri: her grafik TEK renk kullanir, ayni grafikte bulusmazlar;
       bu yuzden yalniz zemin kontrasti onemli (hepsi >= 5,5:1).
       Ayni grafikte bulusan iki kume AYRICA dogrulandi:
         MES halkasi 5 dilim : en kotu cift DE 17,2  (acik kip 13,3)
         WB serileri 3 seri  : en kotu cift DE 21,9  (acik kip 25,9)
       WB'de acik kipin 25,9'u yakalanamadi: o deger cok KOYU bir yesilden
       (#4A762D) geliyordu ve koyu zeminde 3:1 kontrast tabanini gecemiyor.
       21,9 hala fazlasiyla ayirt edilebilir (kiyas: MES acik kipte 13,3). */
    --gr-mor: #B794F6;
    --gr-turuncu: #E8A33D;
    --gr-yesil: #8FC76B;
    --gr-mavi: #6FA8EA;
    --gr-pembe: #E8718F;
    --gr-konum: #8FB8F0;
    --gr-acik-yesil: #8FC76B;
    --gr-mor-2: #a874e9;        /* WB: bug */
    /* Treemap yoğunluk rampası, koyu kip: AYNI anlam — yoğun = koyu (Ümit). Az = açık
       sarı-yeşil, çok = orta-koyu mor; en yoğun ton koyu zeminde kaybolmasın diye mordan
       aşağı inilmedi (zemine #191d26 2,60:1). --ordinal: monoton L, adım farkı PASS.
       Etiket: 1-4 koyu yazı (4. adım 4,73:1), 5 beyaz. */
    --gr-tm-1: #D4EFA0; --gr-tm-2: #86D6AE; --gr-tm-3: #56AEDA; --gr-tm-4: #4C7BD6; --gr-tm-5: #6646C4;
    --gr-tm-y1: #0f0a1c; --gr-tm-y2: #0f0a1c; --gr-tm-y3: #0f0a1c; --gr-tm-y4: #0f0a1c; --gr-tm-y5: #ffffff;
    --gr-teal: #56d4dd;         /* MES: beklemede */
    /* Koyu kipte --on-vurgu KOYU yazi; isaret renginin kendisi yetiyor
       (10,11 ve 9,75).                                                      */
    --swot-o: #56d4dd;
    --swot-t: #E8B93F;
    --gr-kirmizi-koyu: #c73b2b; /* MES: pasif */
    --gr-etiket: #12181c;       /* dolgular acik -> etiket KOYU */

    /* Golge koyu zeminde ise yaramaz (siyah uzerine siyah); yerini ince bir
       kenar cizgisi aliyor - kartlar yine de zeminden ayrilsin. */
    --shadow: 0 0 0 1px #2a343b, 0 6px 14px -6px rgba(0,0,0,.6);
    --shadow-bar: 0 1px 0 #2a343b;
    --golge-guc: rgba(0,0,0,.55);
    color-scheme: dark;
  }
}

:root[data-tema="koyu"] {
  /* --- marka ---
     ROL DEGISIMI: acik kipte --teal-d KOYU yesil dolgu + BEYAZ yazi idi.
     Koyu kipte tersi: ACIK yesil dolgu + KOYU yazi. Marka kimligi ayni,
     kontrast korunuyor (olculdu: 9,05:1). Koyu yesil dolguyu korumak
     uzerindeki beyaz yaziyi 4,24:1'e dusuruyordu - 13px kalin yazi icin
     gereken 4,5:1'in altinda. */
  --teal: #8FC76B;
  --teal-m: #A8DC86;
  --teal-d: #8FC76B;
  --teal-l: #23331f;
  --on-teal: #12181c;
  --on-vurgu: #12181c;
  --yesil-yazi: #A5D98A;     /* zemine karsi 9,98:1 */
  --accent: #A5D98A;

  /* --- yuzeyler --- */
  --bg: #12171a;
  --card: #1b2228;
  --yuzey-2: #212a30;
  --yuzey-3: #28333a;
  --yuzey-yesil: #1c2a22;
  --yuzey-yesil-2: #23342a;
  --line: #2e3a42;
  --line-koyu: #435059;
  --text: #e3ebee;           /* 13,3:1 */
  --muted: #9bacb4;          /* 6,93:1 */
  /* Ipucu kutusu TERS CEVRILDI: acik kipte koyu kutu/beyaz yazi idi; koyu
     zeminde koyu kutu gorunmez olurdu. */
  --ipucu-zemin: #e8eef1;
  --ipucu-yazi: #12181c;

  /* --- durum (hepsi zemine karsi >= 5,8:1) --- */
  --ok: #5FCB96;
  --ok-yazi: #5FCB96;    /* koyu zeminde zaten 8,17:1 */
  --ok-koyu: #8FE0B4;
  --ok-tint: #172a22;
  --warn: #E8B93F;
  --warn-yazi: #F0C862;
  --warn-tint: #33280e;
  --warn-kenar: #7a5f1e;
  --gecikme-tint: #4f2d0c;
  --gecikme-kenar: #D9822F;
  --bad: #F0776A;
  --bad-tint: #331a17;
  --bad-kenar: #7a3730;

  /* --- grafik renkleri (tools/renk-dogrula.js ile olculdu) ---
     Sayfa renkleri: her grafik TEK renk kullanir, ayni grafikte bulusmazlar;
     bu yuzden yalniz zemin kontrasti onemli (hepsi >= 5,5:1).
     Ayni grafikte bulusan iki kume AYRICA dogrulandi:
       MES halkasi 5 dilim : en kotu cift DE 17,2  (acik kip 13,3)
       WB serileri 3 seri  : en kotu cift DE 21,9  (acik kip 25,9)
     WB'de acik kipin 25,9'u yakalanamadi: o deger cok KOYU bir yesilden
     (#4A762D) geliyordu ve koyu zeminde 3:1 kontrast tabanini gecemiyor.
     21,9 hala fazlasiyla ayirt edilebilir (kiyas: MES acik kipte 13,3). */
  --gr-mor: #B794F6;
  --gr-turuncu: #E8A33D;
  --gr-yesil: #8FC76B;
  --gr-mavi: #6FA8EA;
  --gr-pembe: #E8718F;
  --gr-konum: #8FB8F0;
  --gr-acik-yesil: #8FC76B;
  --gr-mor-2: #a874e9;        /* WB: bug */
  /* Treemap yoğunluk rampası, koyu kip: AYNI anlam — yoğun = koyu (Ümit). Az = açık
     sarı-yeşil, çok = orta-koyu mor; en yoğun ton koyu zeminde kaybolmasın diye mordan
     aşağı inilmedi (zemine #191d26 2,60:1). --ordinal: monoton L, adım farkı PASS.
     Etiket: 1-4 koyu yazı (4. adım 4,73:1), 5 beyaz. */
  --gr-tm-1: #D4EFA0; --gr-tm-2: #86D6AE; --gr-tm-3: #56AEDA; --gr-tm-4: #4C7BD6; --gr-tm-5: #6646C4;
  --gr-tm-y1: #0f0a1c; --gr-tm-y2: #0f0a1c; --gr-tm-y3: #0f0a1c; --gr-tm-y4: #0f0a1c; --gr-tm-y5: #ffffff;
  --gr-teal: #56d4dd;         /* MES: beklemede */
  /* Koyu kipte --on-vurgu KOYU yazi; isaret renginin kendisi yetiyor. */
  --swot-o: #56d4dd;
  --swot-t: #E8B93F;
  --gr-kirmizi-koyu: #c73b2b; /* MES: pasif */
  --gr-etiket: #12181c;       /* dolgular acik -> etiket KOYU */

  /* Golge koyu zeminde ise yaramaz (siyah uzerine siyah); yerini ince bir
     kenar cizgisi aliyor - kartlar yine de zeminden ayrilsin. */
  --shadow: 0 0 0 1px #2a343b, 0 6px 14px -6px rgba(0,0,0,.6);
  --shadow-bar: 0 1px 0 #2a343b;
  --golge-guc: rgba(0,0,0,.55);
  color-scheme: dark;
}


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", Calibri, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ===========================================================================
   KABUK — sol gezinme + ust bar (Umit: "bu sekle cevirir misin", 2026-09-11).
   Gezinme dugmeleri ust bardan SOL MENUYE tasindi; ust barda yalniz kirinti
   yolu, ortam etiketi ve kullanici tarafi kaldi. Sidebar TUM sayfalarda ayni
   (Umit'in secimi) — tek sayfada sidebar, digerlerinde ust bar olsaydi
   gezinme yeri sayfadan sayfaya degisirdi.
   =========================================================================== */
.kabuk { display: flex; align-items: flex-start; min-height: 100vh; }
.kabuk-govde { flex: 1 1 auto; min-width: 0; }   /* min-width:0 olmadan genis
   tablolar sidebar'i ezip yatay tasma yapiyor (flex ogesi varsayilan olarak
   icerigi kadar kuculebiliyor, daha fazla degil). */

.yan {
  flex: 0 0 208px; width: 208px; align-self: stretch;
  position: sticky; top: 0; height: 100vh;
  background: var(--card); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 14px;
  z-index: 60;
}
.yan-ust { display: flex; align-items: center; gap: 6px; padding: 2px 2px 12px 4px; }
.yan-marka { display: flex; align-items: center; gap: 9px; cursor: pointer;
  user-select: none; flex: 1 1 auto; min-width: 0; }

/* Katlama dugmesi. Sol menude duruyor, ust barda degil: daraltilmis halde de
   gorunur kaliyor ve "menuyu ac/kapat" eylemi menunun kendi uzerinde. */
.yan-katla {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 1px solid transparent;
  border-radius: 8px; background: transparent; color: var(--muted);
  transition: background .12s, color .12s, border-color .12s;
}
.yan-katla:hover { background: var(--teal-l); color: var(--yesil-yazi); }
/* Klavyeyle gezenler icin gorunur odak halkasi - dugmenin metni yok, odak
   kayarsa nerede oldugunu anlamanin baska yolu kalmiyor. */
.yan-katla:focus-visible { outline: none; border-color: var(--yesil-yazi);
  box-shadow: 0 0 0 2px rgba(74,118,45,.25); }
.yan-katla svg { width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease; }
.yan-ad { font-weight: 800; font-size: 19px; letter-spacing: .5px; color: var(--yesil-yazi); }
.yan-menu { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.yan-oge {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text); font-size: 13.5px; font-weight: 600; text-align: left;
  transition: background .12s, color .12s;
}
.yan-oge:hover { background: var(--teal-l); }
.yan-oge svg { flex: 0 0 auto; width: 18px; height: 18px; stroke: currentColor;
  fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Etkin sayfa: dolgu + KALIN yazi + sol serit. Renk tek basina birakilmadi —
   dolgunun zeminle kontrasti dusuk oldugu icin ikinci bir isaret sart. */
.yan-oge.etkin { background: var(--teal-d); color: var(--on-vurgu); }
.yan-oge.etkin:hover { background: var(--teal-d); }
.yan-alt { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }

/* --------------------------------------------------------------- DARALTILMIS
   Menu GIZLENMIYOR, ikon seridine donuyor (60px). Tamamen gizlemek gezinmeyi
   de goturur; serit halinde hem yer aciliyor hem de tek tikla geri donulecek
   yer belli kaliyor. Etiketler gidince ikonun tasidigi anlam title ile
   yasiyor (yan-oge zaten title tasiyordu).
   Genislik gecisi animasyonlu; icerik alani da onunla birlikte kayiyor. */
.yan { transition: flex-basis .18s ease, width .18s ease; }

/* hidden ozniteligi .yan'in display:flex'ini YENEMIYORDU: tarayicinin
   [hidden]{display:none} kurali sinif seciciden daha zayif. Sonuc: giris
   ekraninda sol kenarda 76px'lik bos bir serit kaliyordu (JS zaten
   yan.hidden = true yapiyor, gorunmemesi gerekirdi). Acikca bastiriliyor. */
.yan[hidden] { display: none; }

body.yan-kapali .yan { flex-basis: 60px; width: 60px; }
body.yan-kapali .yan-ust { justify-content: center; padding-left: 2px; }
body.yan-kapali .yan-marka { display: none; }
body.yan-kapali .yan-katla svg { transform: rotate(180deg); }
body.yan-kapali .yan-oge { justify-content: center; padding-left: 0; padding-right: 0; }
/* Etiketi display:none yapmak yerine gizlemek: ekran okuyucu icin dugmenin
   erisilebilir adi metinden geliyor, kaldirirsak dugme adsiz kalirdi. */
body.yan-kapali .yan-oge > span {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Marka sol menuden kalkinca ust barda geri gelsin - yoksa logo hic kalmiyor. */
body.yan-kapali .brand.brand-dar { display: flex; }

/* Kirinti yolu: "Ana Sayfa > Projeler". Ust barin yesili uzerinde okunur olsun
   diye --on-teal; ayirici daha soluk. */
/* flex 1 1 auto DEGIL 0 1 auto: kirinti buyumeyince ortam etiketi hemen onun
   yanina gelir. Buyuseydi (eski hali) bos alani yiyip etiketi ta saga,
   kullanici hapinin dibine itiyordu (Umit: "cok sagda olmus"). */
.kirinti { display: flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--muted); min-width: 0; overflow: hidden; white-space: nowrap; flex: 0 1 auto; }
.kirinti button { background: none; border: 0; padding: 0; font: inherit;
  color: inherit; opacity: .9; }
.kirinti button:hover { text-decoration: underline; opacity: 1; }
.kirinti .kir-ayrac { opacity: .55; }
.kirinti .kir-son { font-weight: 700; color: var(--text); }

/* Sayfaya ait araclar (firma secici + arama). Bos oldugunda yer kaplamaz. */
.topbar-orta { display: flex; align-items: center; gap: 10px; flex: 1 1 auto;
  min-width: 0; justify-content: flex-end; }
.topbar-orta:empty { display: none; }
.topbar-orta select { max-width: 200px; }
.topbar-orta input[type="text"] { flex: 0 1 340px; min-width: 150px; }

/* Kullanici blogu: bas harf dairesi + ad / rol (mockup). */
.kullanici { display: flex; align-items: center; gap: 9px; min-width: 0; }
.kul-daire { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--teal-l);
  color: var(--yesil-yazi); font-weight: 800; font-size: 12.5px; letter-spacing: .3px; }
.kul-metin { min-width: 0; line-height: 1.2; }
.kul-ad { font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kul-rol { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
/* Sidebar varken ust bardaki marka gereksiz; yalniz dar ekranda geri gelir.
   Ozgulluk NOTU: tek sinifla (.brand-dar) yazildiginda dosyada DAHA SONRA
   gelen .brand{display:flex} esit ozgullukte kazaniyor ve marka genis ekranda
   da gorunuyordu. Iki sinif (0,2,0) ile baglaniyor. */
.brand.brand-dar { display: none; }

@media (max-width: 900px) {
  /* Dar ekranda sol menu yatay serit olur: 208px'i burada harcamak, tablolari
     okunmaz hale getiriyordu. Sticky birakilmadi - iki yapiskan serit ekranin
     yarisini yiyor. */
  .kabuk { display: block; }
  .yan { position: static; width: auto; height: auto; flex-direction: row;
    flex-wrap: wrap; align-items: center; border-right: 0;
    border-bottom: 1px solid var(--line); padding: 8px 12px; }
  .yan-marka { display: none; }
  .yan-menu { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .yan-oge { width: auto; padding: 7px 10px; font-size: 12.5px; }
  .yan-alt { margin-top: 0; padding-top: 0; border-top: 0; }
  .brand.brand-dar { display: flex; }
  .kirinti { display: none; }
  /* Dar ekranda menu zaten yatay serit; daraltma kavrami burada karsiliksiz.
     Kaydedilmis "kapali" tercihi bu genislikte YOK SAYILIR, yoksa maddeler
     adsiz ikonlara donup yatay seritte ne oldugu anlasilmaz olurdu. */
  body.yan-kapali .yan { flex-basis: auto; width: auto; }
  body.yan-kapali .yan-oge { justify-content: flex-start; padding: 7px 10px; }
  body.yan-kapali .yan-oge > span { position: static; width: auto; height: auto;
    margin: 0; overflow: visible; clip-path: none; }
  .yan-katla { display: none; }
  /* Dar ekranda ust bar tasiyordu (561px goruntude govde 605px'e cikiyordu):
     kullanici hapi uzun ("Umit Degirmenci · Admin") ve topbar tek satira
     zorluyordu. Sarmaya izin verip hapi kisaltiyoruz — YATAY KAYDIRMA, uzun
     bir adin kisalmasindan cok daha rahatsiz edici. */
  .topbar { flex-wrap: wrap; row-gap: 6px; padding: 7px 12px; }
  .topbar-right { min-width: 0; }
  .kul-ad { max-width: 34vw; }
  /* Dar ekranda arama tam satiri alsin; secici ile yan yana sikismasin. */
  .topbar-orta { flex: 1 1 100%; justify-content: flex-start; }
  .topbar-orta input[type="text"] { flex: 1 1 160px; }
}

/* Topbar */
/* Ust bar BEYAZ (Umit, 2026-09-11 — mockup). Marka yesili artik sol menude:
   iki kenarin da markali olmasi gerekmiyor, ustelik beyaz zemin arama kutusu ve
   kullanici blogu gibi form ogelerini tasimaya daha uygun. Golge yerine alt
   cizgi: beyaz bar beyaz olmayan zeminden cizgiyle ayrilinca daha sakin. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  background: var(--card); color: var(--text);
  border-bottom: 1px solid var(--line);
  padding: 7px 20px; min-height: 52px;
}
.brand { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; flex-wrap: nowrap; white-space: nowrap; }
/* LOGO PLAKASI HEP BEYAZ (Ümit, 2026-09-29): trex-logo.png sabit renkli bir
   raster — yeşil X + KOYU yazı. Plaka var(--card) iken koyu kipte kart da
   koyulaşıyor ve "Digital Manufacturing" yazısı kayboluyordu. Plaka logonun
   parçasıdır, tema yüzeyi değil; bu yüzden token'a bağlanmaz (P26 bilinçli
   istisna, grafik paletiyle aynı gerekçe). */
.brand-pill { flex: 0 0 auto; display: inline-flex; align-items: center; background: #ffffff; border-radius: 8px; padding: 4px 10px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.brand-logo { display: block; height: 30px; width: auto; }
.logo { font-weight: 800; font-size: 20px; letter-spacing: 1px; }
.brand-sub { font-size: 12px; color: var(--muted); }
/* Beyaz barda marka yazisi artik --teal-d (acik yesil zemin gitti). */
.topbar .logo { color: var(--yesil-yazi); }
/* Ortam etiketi (ornek: "GELISTIRME - UMITPC").
   CANLIDA GOSTERILMEZ - bkz. app.js ortamEtiketiniGuncelle(). Bu yuzden
   .ortam-canli kurali YOK: etiketin gorunmesi "canli degilsin" demek.
   Ust bar acik yesil (var(--teal)) oldugu icin etiket KENDI zeminini tasiyor;
   dogrudan ust bar uzerine yazi yazmak yeterince okunur degildi.
   Kontrast (WCAG AA, normal metin 4.5:1): var(--warn-yazi) uzerinde var(--warn-tint) -> 7.4:1 */
.ortam { flex: 0 0 auto; margin-left: 14px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; white-space: nowrap;
  user-select: text; cursor: default; }
.ortam-gelistirme { background: var(--warn-tint); color: var(--warn-yazi); border: 1px solid var(--warn-kenar); }
/* Etiket yok (sqlapp.json'da ortam alani bos) -> notr. Amber birakmak
   bilmedigimiz halde "gelistirme" iddia etmek olurdu. */
.ortam-belirsiz { background: var(--yuzey-3); color: var(--muted); border: 1px solid rgba(0,0,0,.15); }
/* Bosluk artik BURADA yaraniyor: kimlik/Cikis saga yaslanir, kirinti ve ortam
   etiketi solda yan yana kalir. */
.topbar-right { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-left: auto; }
.save-ind { font-size: 12px; color: var(--yesil-yazi); min-width: 90px; text-align: right; }
.save-ind.saving { color: var(--warn-yazi); }
.save-ind.saved { color: var(--ok-koyu); }

/* Tema dugmesi — ust barda, kullanici blogunun solunda. Uc durumlu:
   sistem -> acik -> koyu -> sistem. Ikon durumu anlatir, metin yok; erisilebilir
   ad ve ipucu JS'te yaziliyor (temaDugmesiniGuncelle). */
.tema-dugme {
  flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--muted);
  transition: background .12s, color .12s, border-color .12s;
}
.tema-dugme:hover { background: var(--teal-l); color: var(--yesil-yazi); }
.tema-dugme:focus-visible { outline: none; border-color: var(--yesil-yazi);
  box-shadow: 0 0 0 2px var(--golge-guc); }
.tema-dugme svg { width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Ust bardaki kullanici blogu artik saga yaslanmayi tema dugmesinden devralir. */
.tema-dugme + .topbar-right { margin-left: 10px; }

/* Buttons — baslik (topbar) rengiyle ayni: teal/yesil */
.btn { border: 1px solid var(--teal); background: var(--teal); color: var(--on-teal); padding: 7px 13px; border-radius: 8px; font-size: 13px; }
.btn:hover { background: var(--teal-m); border-color: var(--teal-m); }
.btn-primary { background: var(--teal); color: var(--on-teal); border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-m); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--yesil-yazi); }
.btn-ghost:hover { background: rgba(0,0,0,.07); }
.btn-danger { color: var(--bad); border-color: var(--bad-kenar); background: var(--card); }
.btn-danger:hover { background: var(--bad-tint); }
.btn-sm { padding: 3px 9px; font-size: 12px; }

/* Layout */
/* Geniş tablolar (TPF görünümleri, Gantt) için ekran genişliği kullanılır; çok geniş
   monitörlerde satırlar aşırı uzamasın diye üst sınır 2200px. */
/* Ust dolgu 18 -> 6: yapiskan sayfa basligi (.pv-head) ust cubuga daha yakin dursun.
   Alt/yan dolgu korundu. */
main { max-width: 2200px; margin: 0 auto; padding: 6px 22px 18px; }

/* Home / project cards */
.home-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.home-head h1 { font-size: 22px; margin: 0; color: var(--yesil-yazi); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px; box-shadow: var(--shadow); cursor: pointer; transition: transform .08s, border-color .1s;
}
.pcard:hover { transform: translateY(-2px); border-color: var(--teal); }
.pcard h3 { margin: 0 0 6px; font-size: 16px; color: var(--yesil-yazi); }
.pcard .meta { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.empty { color: var(--muted); padding: 40px; text-align: center; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); }

/* Badges */
/* Ana sayfa özet şeridi — proje sayısı + kalan süre toplamı.
   Önce küçük bir inline-note satırıydı, gözden kaçıyordu. Sayılar okunur
   büyüklükte; etiketler küçük ve sessiz kalıyor ki sayı öne çıksın. */
/* OZET SERIDI (Umit: "proje ve adam-gun bolumunu biraz daha belirgin yap",
   2026-09-11). Ustundeki KPI kartlari ikon + renk seridi + cubuk aldiktan sonra
   bu serit yaninda soluk kaliyordu. Ayni gorsel dili kullaniyor:
     - sayi buyudu (22 -> 26px) ve TABULAR: rakamlar sutun gibi hizali durur,
       binlik ayracli sayilarda gozun kaymasini onler
     - her sayinin ALTINDA kendi renginde 3px'lik kisa bir serit — kartlardaki
       ust renk seridi ile ayni is, "bu blok su anlama geliyor" isareti
     - ayiricilar kenarlara DEGMIYOR (ust/alt 10px bosluk): tam boy cizgi
       seridi tabloya benzetiyordu
   Serit 8 rapor sayfasinda ortak; degisiklik hepsinde gecerli. */
/* Serit ICERIGI KADAR (Umit: "pozitifi kisaltir misin", 2026-09-11).
   Onceden blok bir seviye eleman gibi TUM SATIRI kapliyordu; bloklar solda
   bitince sagda uzun bos beyaz bir bant kaliyordu — son blogun (POZITIF)
   sagindaki o bosluk kartin yarim kalmis gibi gorunmesine yol aciyordu.
   fit-content ile kart sayilarin bittigi yerde biter; max-width dar ekranda
   tasmayi onler. */
.ozet-serit { display: flex; flex-wrap: wrap; align-items: stretch;
  width: fit-content; max-width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; }
/* Dolgu 22 -> 14px, taban genislik 124 -> 96px (Umit: "pozitifi kisaltir misin",
   2026-09-11). Dort blok 558px yer kapliyordu; dar pencerede sonuncusu (POZITIF)
   alt satira kayiyor ve seridin altinda bos beyaz bir bant birakiyordu. Daraltilmis
   hali ~420px — ayni satirda kalir. */
.oz-blok { position: relative; padding: 11px 14px; display: flex; flex-direction: column; gap: 2px;
  min-width: 96px; }
/* Ayirici: kenarlara degmeyen ince cizgi */
.oz-blok + .oz-blok::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
  border-left: 1px solid var(--line);
}
.oz-deger { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--yesil-yazi);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.oz-deger.neg { color: var(--bad); }
.oz-deger.poz { color: var(--ok-yazi); }
/* Etiketin altindaki renk seridi — degerin rengini tasir. */
.oz-etiket { position: relative; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; padding-top: 5px; }
.oz-etiket::before {
  /* 26 -> 18px (Umit: "biraz kisar misin", 2026-09-11). Vurgu isareti olarak
     duruyor, alt cizgi gibi degil; dordunde de ayni uzunluk. */
  content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 3px;
  border-radius: 999px; background: var(--teal-d);
}
/* neg/poz sinifi .oz-deger UZERINDE (JS oraya yaziyor); serit rengi bu yuzden
   KARDES seciciyle aliniyor — sinifi bloga tasimak 8 cagri yerini degistirmek
   demekti, tek CSS satiri daha ucuz ve kirilma riski yok. */
.oz-deger.neg + .oz-etiket::before { background: var(--bad); }
.oz-deger.poz + .oz-etiket::before { background: var(--ok); }
.oz-not { padding: 11px 14px; align-self: center; font-size: 12px; color: var(--muted); }

/* Ana sayfa proje listesi: satir tiklanabilir */
table.proj-list tr { cursor: pointer; }
.proj-list tr:hover td { background: var(--yuzey-2); }
table.proj-list td { vertical-align: middle; }
table.proj-list td:first-child { max-width: 380px; }
/* Proje kodu grup basligi (tiklayinca grup acilir/kapanir).
   Secici BILEREK "table.data.proj-list": asagidaki
   `table.data tr:nth-child(even) td { background:var(--yuzey-2) }` cizgili-satir
   kurali ile ozgulluk esit olurdu (0,2,3) ve o kural dosyada daha sonra
   geldigi icin cift siradaki grup basliklarinin zeminini beyaza cekiyordu.
   Iki sinifi birlikte yazmak ozgullugu (0,3,3) yapip bu isi cozuyor. */
table.data.proj-list tr.grup-bas td { background: var(--ok-tint); border-top: 2px solid var(--line);
  font-weight: 600; padding: 5px 8px; user-select: none; }
table.data.proj-list tr.grup-bas:hover td { background: var(--yuzey-yesil-2); }
/* Gruplar ile tek projeli kodlar arasindaki ayirici - grup basligi DEGIL:
   yesil serit yok, tiklanmiyor. Ozgulluk icin ayni iki-sinif numarasi. */
table.data.proj-list tr.grup-ayirici td { background: var(--card); border-top: 2px solid var(--line);
  padding: 7px 8px; font-size: 11px; font-weight: 400; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); cursor: default; user-select: none; }
table.data.proj-list tr.grup-ayirici:hover td { background: var(--card); }
.grup-ok { display: inline-block; width: 14px; color: var(--muted); font-size: 11px; }
.grup-kod { color: var(--yesil-yazi); letter-spacing: .3px; }
.grup-adet { margin-left: 10px; font-size: 12px; font-weight: 400; color: var(--muted); }
.grup-bal { margin-left: 10px; font-size: 12px; font-weight: 700; }
.grup-bal.poz { color: var(--ok-yazi); }
.grup-bal.neg { color: var(--bad); }
/* ============================================================================
   Destek Performansi sayfasi (#/performans) - yatay cubuk grafik
   ----------------------------------------------------------------------------
   Cubuk: 18px (spec <=24), yuvarlatma YALNIZ veri ucunda, tabanda kosekli.
   Satir bandi 24px -> fare/klavye hedefi yeterli.
   Cubuklar arasi ayirici KENARLIK DEGIL, yuzey boslugu (satir arasi 6px).
   Izgara yok; tek dikey hairline taban cizgisi (.pf-yol sol kenarligi).
   ========================================================================== */
.pf-filtre { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.pf-kip, .pf-nav { display: flex; align-items: center; gap: 6px; }
.pf-donem { min-width: 230px; text-align: center; font-weight: 600; font-size: 13px; color: var(--text); }

/* Efsane: IKI seri oldugu icin ZORUNLU (kimlik yalniz renge birakilmaz).
   Ayrica acik ton (--teal-m) yuzey kontrasti 3:1 altinda; dogrulayici bu
   durumda "gorunur etiket ya da tablo gorunumu" sart kosuyor - ikisi de var. */
.pf-efsane { display: flex; align-items: center; gap: 16px; margin: 0 0 8px 0; }
.pf-ef-oge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.pf-ef-kutu { width: 11px; height: 11px; border-radius: 3px; }

.pf-grafik { position: relative; padding: 4px 0 2px; }
.pf-satir { display: flex; align-items: center; gap: 8px; height: 24px; outline: none; }
.pf-satir:focus-visible { box-shadow: 0 0 0 2px rgba(74,118,45,.35); border-radius: 4px; }
.pf-sira { width: 22px; text-align: right; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.pf-ad { width: 190px; flex: 0 0 auto; font-size: 12px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Taban cizgisi: hairline, solid, yuzeyden bir ton uzakta (kesikli DEGIL) */
.pf-yol { position: relative; flex: 1 1 auto; height: 24px; border-left: 1px solid var(--line); }
/* Iki cubuk: faturalanan ustte (koyu), calisilan altta (acik).
   9px + 2px yuzey boslugu + 9px = 20px, 24px bandin icinde.
   Ayirici KENARLIK degil, aradaki bosluk. */
.pf-cubuk { position: absolute; left: 0; height: 9px; min-width: 2px; border-radius: 0 4px 4px 0; }
.pf-bill { top: 2px; background: var(--teal-d); }
.pf-work { top: 13px; background: var(--teal-m); }
.pf-satir:hover .pf-bill { background: var(--yesil-yazi); }
.pf-satir:hover .pf-work { background: var(--teal-m); }
/* Efsane kutulari cubuklarla ayni renk */
.pf-ef-kutu.pf-bill, .pf-ef-kutu.pf-work { position: static; }
/* Deger YALNIZ faturalanan cubugun ucunda ve UST yarida: alt yarida calisilan
   cubugu var, oraya yazi koymak ustune binerdi. Metin veri rengini giymez. */
.pf-uc { position: absolute; top: 0; height: 12px; display: flex; align-items: center;
  margin-left: 7px; font-size: 11px; font-weight: 700; color: var(--text);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Deger sifir: cubuk hic cizilmez (min-width devre disi) */
/* TEK seri kipi: tek cubuk 24px bandin tamamini kullanir (18px + 3px pay).
   Iki cubuk yokken ust/alt yariya bolmenin anlami yok. */
.pf-cubuk.pf-tek { top: 3px; height: 18px; }
.pf-cubuk.pf-sifir { min-width: 0; }
/* Deger etiketi CALISILAN cubugun ucundayken alt yariya iner (calisilan
   cubugu orada); ust yarida kalsa kendi cubugundan kopuk gorunurdu. */
.pf-uc.pf-uc-alt { top: 12px; }

/* Calisma kayitlari - listede satira tiklayinca acilan detay */
table.data.pf-ana-tablo tr.pf-tikla { cursor: pointer; }
table.data.pf-ana-tablo tr.pf-tikla:hover td { background: var(--yuzey-2); }
table.data.pf-ana-tablo tr.pf-acik td { background: var(--teal-l); }
.pf-ok { width: 20px; text-align: center; color: var(--muted); font-size: 10px; user-select: none; }
/* :nth-child(n) yalnizca OZGULLUGU yukseltmek icin (her satiri esler, secimi
   degistirmez) — zebra ile esitligi bozar, bkz. asagidaki ozgulluk notu. */
table.data tr.pf-detay:nth-child(n) > td { background: var(--yuzey-2); padding: 10px 12px; }
.pf-kayit-tablo { width: 100%; }
.pf-kayit-tablo th { font-size: 10.5px; }
.pf-kayit-tablo td { font-size: 12px; }
.pf-konu { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-sebep { white-space: nowrap; font-size: 11px; color: var(--muted); }

/* --- Yillik seyir: cizgi grafik ------------------------------------------
   Cizgi 2px yuvarlak uc/birlesim; isaretci r=4 (>=8px cap); izgara hairline
   SOLID ve yuzeyden bir ton uzakta (kesikli DEGIL - kesik cizgi "projeksiyon"
   gibi okunur). Metin veri rengini giymez; TEK istisna uc etiketleri, cunku
   orada renk cizginin kimligini tasiyor ve iki seri bitisik duruyor.        */
.pf-cizgi-kutu { position: relative; margin-top: 4px; }
.pf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf-hat { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pf-nokta { stroke: var(--card); stroke-width: 2; }
.pf-izgara { stroke: var(--line); stroke-width: 1; }
.pf-nisan { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.pf-eksen { font-size: 10.5px; fill: var(--muted); }
.pf-eksen-y { text-anchor: end; }
.pf-eksen-x { text-anchor: middle; }
.pf-uc-etiket { font-size: 11px; font-weight: 700; }
.pf-yakala { cursor: crosshair; }
/* --- Waterfall raporu (yatay selale) --------------------------------------
   Basamaklar tek ton, TOPLAM ayri ton: toplam bir katki degil, ayri anlam.
   Baglayici cizgi selale kurali - bir basamagin bittigi yer sonrakinin
   basladigi yer. Metin veri rengini giymez.                               */
.pf-wf-basamak { fill: var(--teal-m); }
.pf-wf-toplam  { fill: var(--yesil-yazi); }
.pf-wf-bag { stroke: var(--muted); stroke-width: 1; opacity: .45; }
.pf-wf-ad { font-size: 11px; fill: var(--text); text-anchor: end; }
.pf-wf-ad-toplam { font-weight: 700; }
.pf-wf-deger { font-size: 11px; font-weight: 700; fill: var(--text); }

.pf-ipucu { position: absolute; z-index: 5; pointer-events: none; background: var(--text);
  color: var(--ipucu-yazi); font-size: 11.5px; padding: 5px 8px; border-radius: 6px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(31,44,49,.25); }

.pf-liste { margin-top: 14px; overflow-x: auto; }
.pf-liste table.data th { font-size: 11px; }
.pf-sayi { text-align: right; font-variant-numeric: tabular-nums; }

/* TPF Tanimlama sayfasi sekmeleri (tpysup ile ayni gorunum) */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tab { cursor: pointer; user-select: none; padding: 7px 12px; border-radius: 8px 8px 0 0;
  border: 1px solid var(--line); border-bottom: none; background: var(--yuzey-2); color: var(--muted);
  font-size: 13px; white-space: nowrap; }
.tab:hover { background: var(--yuzey-3); }
.tab.active { background: var(--card); color: var(--yesil-yazi); font-weight: 700; }
/* TPF Tanimlama: 16 sekme ad ile yazildigi icin daha dar aralik + sarma */
.tabs .tab { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
/* Adam-Gun tablosu: toplam satirlari */
/* Ozgulluk notu: satir seritlemesi (`table.data tr:nth-child(even) td`, asagida)
   AYNI ozgullukte (0,2,3) ve DOSYADA SONRA geldigi icin, cift sirada duran
   toplam satirinin arka planini eziyordu — olculdu: var(--yuzey-2) cikiyordu.
   `:nth-child(n)` her satiri esler ama ozgullugu (0,3,3) yapar; seritlemeyi
   yenmesi icin var, baska bir isi yok. */
/* :nth-child(n) ozgulluk icin — cift sirada denk gelen toplam satiri zebra
   zeminini almasin (bu daha once bir kez basimiza geldi). */
table.data tr.toplam-satir:nth-child(n) td { background: var(--yuzey-2); border-top: 2px solid var(--line); font-weight: 700; }
table.data tr.toplam-satir:nth-child(n):hover > td { background: var(--yuzey-2); }
/* Portfoy Tamamlanma — kart gorunumu */
.pf-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pf-kart { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; }
.pf-ad { font-weight: 700; color: var(--yesil-yazi); font-size: 14px; line-height: 1.25; }
/* Firma adi Gantt a gidiyor — tiklanabilir oldugu belli olsun */
.pf-ad[style*="pointer"]:hover { text-decoration: underline; }
.pf-sorumlu { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pf-olcutler { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 6px; row-gap: 12px; margin-top: auto; }
.pf-olcut { border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; background: var(--yuzey-2);
  text-align: center; }
/* Ucerli grup renkleri — ana sayfa karolariyla AYNI palet (bkz. .pano-grup-*).
   Izgara 3 kolonlu, dolayisiyla grup = satir; satirlar arasi bosluk grup ici
   bosluktan genis olsun diye .pf-olcutler'de satir/kolon araligi ayrildi. */
.pf-olcut.pf-grup-1 { border-top: 3px solid var(--yesil-yazi); }
.pf-olcut.pf-grup-2 { border-top: 3px solid var(--gr-mor); }
.pf-olcut.pf-grup-3 { border-top: 3px solid var(--warn); }
/* Secili olcutun (aktif) vurgusu grup renginden ONCE gelir: hangi olcute gore
   siralandigi, grup susunden onemli. */
.pf-olcut.aktif.pf-grup-1, .pf-olcut.aktif.pf-grup-2, .pf-olcut.aktif.pf-grup-3 { border-top-color: var(--teal); }
.pf-olcut.aktif { border-color: var(--teal); background: var(--yuzey-3); }
/* Tiklanabilir ILERLEME kutusu (Gantt acar) */
.pf-olcut[style*="pointer"]:hover { border-color: var(--teal); background: var(--yuzey-3); }
.pf-olcut-ad { font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-olcut-deger { font-size: 14px; font-weight: 700; margin-top: 1px; }
.pf-olcut-deger.ok { color: var(--ok-yazi); }
.pf-olcut-deger.warn { color: var(--warn-yazi); }
.pf-olcut-deger.bad { color: var(--bad); }
/* Portfoy kirilimi: oran ve gecikme hucrelerinde durum rengi */
table.data td.ok { color: var(--ok-yazi); font-weight: 600; }
table.data td.warn { color: var(--warn-yazi); font-weight: 600; }
table.data td.bad { color: var(--bad); font-weight: 600; }
/* Durum hapi: mockup'taki gibi ONUNDE NOKTA. Nokta rengi hapin yazi rengini
   alir (currentColor) — yeni bir durum sinifi eklenince nokta kendiliginden
   dogru renge gelir, ayrica tanimlamak gerekmez. */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
/* Nokta YALNIZ durum hapinda anlamli; sayi/etiket hapinda (ornegin "admin")
   sus olurdu. */
.badge.b-no::before, .badge.b-on::before, .badge.b-off::before { display: none; }
.badge.b-open { background: var(--yuzey-yesil-2); color: var(--ok-yazi); }
.badge.b-hold { background: var(--warn-tint); color: var(--warn-yazi); }
.badge.b-closed { background: var(--yuzey-3); color: var(--muted); }
.badge.b-bad { background: var(--bad-tint); color: var(--bad); }

/* Project view */
/* Proje basligi: ust cubugun hemen altinda sabit kalir.
   --topbar-h ve --pvhead-h app.js tarafindan olculup yazilir (syncStickyHead). */
.pv-head {
  /* align-items: center -> baslik ve butonlar ayni hizada; flex-start'ta buton
     ust kenara yapisip fazladan bosluk birakiyordu */
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: sticky; top: var(--topbar-h, 60px); z-index: 40;   /* topbar z-index 50 */
  background: var(--bg);
  margin: 0 -22px 10px;            /* main'in yatay padding'ini tasir -> yanlardan icerik sizmaz */
  padding: 6px 22px;
  border-bottom: 1px solid var(--line);
}
/* h1'in alt bosluğu alt satır (.sub) icindi; alt satir olmayan sayfalarda
   gereksiz yer kapliyordu -> bosluk .sub'a tasindi */
.pv-head h1 { font-size: 22px; margin: 0; color: var(--yesil-yazi); }
.pv-head .sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.pv-actions { display: flex; gap: 8px; flex-shrink: 0; }
.pv-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.toc { position: sticky; top: calc(var(--topbar-h, 60px) + var(--pvhead-h, 62px) + 10px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); font-size: 13px; max-height: calc(100vh - var(--topbar-h, 60px) - var(--pvhead-h, 62px) - 30px); overflow: auto; }
.toc .grp { font-weight: 700; color: var(--yesil-yazi); margin: 10px 6px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.toc a { display: block; padding: 4px 8px; border-radius: 6px; color: var(--text); }
.toc a:hover { background: var(--teal-l); }

/* Sections */
.section { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow); scroll-margin-top: calc(var(--topbar-h, 60px) + var(--pvhead-h, 62px) + 10px); }
.section > h2 { margin: 0 0 4px; font-size: 16px; color: var(--yesil-yazi); display: flex; align-items: center; gap: 8px; }
.section .tag { font-size: 11px; color: var(--on-teal); background: var(--teal); border-radius: 5px; padding: 1px 7px; }
.section .hint { color: var(--muted); font-size: 12.5px; font-style: italic; margin: 0 0 10px; }

/* Forms */
label.fld { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
input[type=text], input[type=date], input[type=password], textarea, select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px;
  font-family: inherit; font-size: 13.5px; color: var(--text); background: var(--card);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(74,118,45,.20); }
textarea { resize: vertical; min-height: 60px; }
.kv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
.kv-grid .full { grid-column: 1 / -1; }

/* Tables */
.tbl-wrap { overflow-x: auto; }
/* Görünüm formlarında (TPF) alt bar: butonlar + araçlar ekranın altına sabit.
   Negatif kenar boşlukları .section padding'i (16px 18px) kadar. */
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 20;
  background: var(--card); margin: 16px -18px -16px; padding: 12px 18px; border-top: 1px solid var(--line);
  box-shadow: 0 -2px 8px rgba(0,0,0,.06); border-radius: 0 0 var(--radius) var(--radius); }
/* Tablo kutusu: yükseklik ekranla sınırlı → yatay kaydırma çubuğu her zaman görünür */
.tbl-scroll { overflow: auto; max-height: calc(100vh - 330px); }
.tbl-scroll table.data th { position: sticky; top: 0; z-index: 2; }
/* Araç satırı (+ Satır ekle vb.) — JS ile alt bara taşınır (mergeRowTools); taşınamazsa normal satır kalır */
.row-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
/* Alt barda butonlar ile araçlar arasındaki dikey ayırıcı */
.fa-sep { width: 1px; align-self: stretch; min-height: 26px; background: var(--line); margin: 0 4px; }
/* IZGARA GORUNUMU (Umit: "gridleri biraz daha buna benzetirmisin", 2026-09-11).
   Once: koyu yesil baslik bandi + her hucrede tam cerceve + zebra seritleme —
   bir hesap tablosu gibi duruyordu. Simdi: acik baslik, YALNIZ YATAY ayirici,
   genis satir yuksekligi, uzerine gelince vurgu. Dikey cizgiler kalkinca goz
   satiri daha rahat takip ediyor; kolon ayrimini hizalama zaten veriyor. */
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  background: var(--yuzey-2); color: var(--muted); text-align: left;
  padding: 10px 12px; font-weight: 700; font-size: 11px;
  letter-spacing: .4px; text-transform: uppercase; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
table.data th:last-child { width: 34px; }
table.data td { border: 0; border-bottom: 1px solid var(--yuzey-3); padding: 9px 12px; vertical-align: middle; }

/* DUZENLENEBILIR hucreler eski izgarasini korur: oradaki cerceve sus degil,
   girdi kutusunun kendisi (input'un kendi cercevesi yok). :has() ile ayrildi,
   boylece cagri yerlerinde tek satir bile degismedi. */
table.data td:has(> input), table.data td:has(> select), table.data td:has(> textarea) {
  border: 1px solid var(--line); padding: 3px; vertical-align: top;
}
/* ZEBRA (Umit, 2026-09-11 — geri istendi). Yeni gorunumun kalanini bozmuyor:
   acik baslik, yatay ayirici ve genis satir duruyor; yalniz cift satirlar
   hafif zeminli.
   🔴 OZGULLUK NOTU — bu blogun SIRASI onemli. Asagidaki uc secicinin ozgullugu
   AYNI (0,2,3):
       table.data tr:nth-child(even) td      (zebra)
       table.data tr:hover > td              (uzerine gelme)
       table.data tr.pf-detay > td           (portfoy detay satiri)
   Esitlikte dosyada SONRA gelen kazanir. Bu yuzden hover zebradan sonra
   yaziliyor (yoksa cift satirlarda hover hic gorunmezdi) ve pf-detay bir
   :nth-child(n) ile yukari cekiliyor (yoksa zebra onun zeminini ezerdi).
   Ayni tuzak toplam satirinda da var; orasi da ayrica guclendirildi. */
table.data tr:nth-child(even) td { background: var(--yuzey-2); }
table.data tr:hover > td { background: var(--yuzey-yesil); }
/* RAPORLAR (Açık Kayako / Açık Jira) — başlık ORTALI + kolon/satır ızgarası BELİRGİN
   (Ümit, 2026-09-17). Yalnız table.data.rapor kapsamında; proje listesi/portföy
   tabloları kendi düzenini korur. Zebra + hover taban kuraldan geliyor, bozulmaz. */
table.data.rapor th { text-align: center; }
table.data.rapor th, table.data.rapor td { border: 1px solid var(--line); }
table.data td input, table.data td textarea, table.data td select { border: none; border-radius: 4px; padding: 5px 6px; background: transparent; }
table.data td input:focus, table.data td textarea:focus, table.data td select:focus { background: var(--card); box-shadow: 0 0 0 2px rgba(74,118,45,.20); }

.row-del { color: var(--bad); background: transparent; border: none; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 5px; }
.row-del:hover { background: var(--bad-tint); }
.add-row { margin-top: 8px; }

/* SWOT */
.swot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.swot .q { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.swot .q h4 { margin: 0; padding: 6px 10px; color: var(--on-vurgu); font-size: 13px; }
.swot .s h4 { background: var(--ok); } .swot .w h4 { background: var(--bad); }
.swot .o h4 { background: var(--swot-o); } .swot .t h4 { background: var(--swot-t); }
.swot textarea { border: none; border-radius: 0; min-height: 80px; }

/* KPI dashboard */
/* auto-fit: kartlar boş kolon bırakmadan satırı doldurur (geniş ekranda yan boşluk kalmaz) */
.kpi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin-bottom: 6px; }
.kpi-card { background: linear-gradient(180deg,var(--card),var(--yuzey-2)); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  box-shadow: var(--shadow); transition: box-shadow .12s, transform .08s; }
/* Tiklanabilir KPI kartlari (kpi-card + cursor:pointer) uzerine gelince hafifce kalkar */
.kpi-card[style*="pointer"]:hover { box-shadow: 0 2px 6px rgba(31,58,68,.12), 0 8px 24px rgba(31,58,68,.10); transform: translateY(-2px); }
.kpi-card .k-label { font-size: 12px; color: var(--muted); }
.kpi-card .k-value { font-size: 24px; font-weight: 800; color: var(--yesil-yazi); margin-top: 4px; }
.kpi-card .k-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.kpi-card.good .k-value { color: var(--ok-yazi); }
.kpi-card.warn .k-value { color: var(--warn-yazi); }
.kpi-card.bad .k-value { color: var(--bad); }

/* Tamamlanan takvim satiri hafifce geri plana duser — dikkat ACIK islerde
   kalsin. Pasif muhataptan farkli: burada ustu cizilmiyor, is iptal degil bitti. */
tr.satir-bitti td { background: var(--yuzey-2); }
tr.satir-bitti .k-label, tr.satir-bitti td input { color: var(--muted); }

/* Tablo icindeki cok satirli aciklama alani: tek satirlik girdi kadar alcak
   baslasin, yaziyi uzattikca buyusun. */
table.data td textarea { min-height: 32px; resize: vertical; }

/* Pasif muhatap satiri: SILINMEZ ama geri plana duser — "gercekten aktif olan
   kim" sorusu listeye bakinca goz gezdirmeden cevaplanabilsin.
   Yalniz soluklastirma yetmez (renk tek basina bilgi tasiyamaz); Durum kolonunda
   "Pasif" yazisi zaten duruyor, bu ikincil kodlama. */
tr.satir-pasif td { opacity: .55; }
tr.satir-pasif td input, tr.satir-pasif td select { text-decoration: line-through; }
tr.satir-pasif:hover td { opacity: 1; }

/* Grup basligindaki toplu ekip atama secicisi */
.grup-ekip { margin-left: auto; max-width: 190px; font-size: 12px; padding: 3px 6px; }

/* Proje ekibi kartlari (Oneri no.8) */
.ekip-kartlar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ekip-kart { flex: 0 1 210px; cursor: pointer; background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--teal-m); border-radius: 10px;
  padding: 10px 13px; box-shadow: var(--shadow); transition: box-shadow .12s, transform .08s; }
.ekip-kart:hover { transform: translateY(-1px);
  box-shadow: 0 5px 8px -1px rgba(31,58,68,.20), 0 14px 24px -8px rgba(31,58,68,.26); }
/* Secili kart SOLUKLASTIRMA ile degil, DOLGU + kalin serit ile isaretli:
   secim bir durum, renk tek basina tasimasin diye kenar da degisiyor. */
.ekip-kart.secili { border-left-color: var(--yesil-yazi); background: var(--teal-l); }
.ekip-kart.ekip-yok { border-left-color: var(--line-koyu); }
.ekip-ad { font-weight: 700; color: var(--yesil-yazi); font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ekip-sorumlu { font-size: 11.5px; color: var(--muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ekip-sayi { margin-top: 7px; display: flex; align-items: baseline; gap: 4px; }
.ekip-aktif { font-size: 20px; font-weight: 800; color: var(--yesil-yazi); font-variant-numeric: tabular-nums; }
.ekip-bolu { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ekip-etiket { margin-left: 4px; font-size: 10px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--muted); }

/* Basit kip penceresi (ekip yonetimi) */
.modal-arka { position: fixed; inset: 0; background: rgba(0,0,0,.40); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-kutu { background: var(--card); border-radius: 14px; padding: 20px 22px;
  width: 100%; max-width: 620px; max-height: 84vh; overflow: auto; box-shadow: var(--shadow); }

/* Connector gelistirmeleri — OKUMA gorunumu. Icerik duz metin oldugu icin
   tarayicinin Ctrl+F'i buluyor (textarea icini aramaz). */
.con-liste { display: flex; flex-direction: column; gap: 10px; }
.con-kart { border: 1px solid var(--line); border-left: 3px solid var(--teal-m);
  border-radius: 10px; padding: 10px 14px; background: var(--card); }
.con-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.con-ad { font-weight: 700; color: var(--yesil-yazi); }
.con-spd { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--yesil-yazi);
  background: var(--teal-l); border-radius: 999px; padding: 2px 10px; }
.con-spd:hover { text-decoration: underline; }
.con-spd-yok { color: var(--muted); background: var(--yuzey-3); }
.con-satir { display: grid; grid-template-columns: minmax(90px, 130px) 1fr; gap: 10px;
  padding: 3px 0; font-size: 13px; }
.con-etiket { color: var(--muted); font-weight: 600; }
/* pre-wrap: parametre listesi alt alta yazildiysa oyle kalsin; monospace,
   cunku icerik cogunlukla anahtar=deger / servis adi. */
.con-deger { white-space: pre-wrap; word-break: break-word;
  font-family: Consolas, "Courier New", monospace; font-size: 12.5px; }

/* Satir eki ('ek' kolon tipi) — B.1 Degisiklik Istekleri */
.ek-hucre { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 150px; }
.ek-oge { display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
  background: var(--teal-l); border-radius: 999px; padding: 2px 4px 2px 8px; }
.ek-rozet { font-size: 11.5px; color: var(--yesil-yazi); max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-rozet:hover { text-decoration: underline; }
.ek-sil { border: 0; background: none; color: var(--muted); font-size: 14px;
  line-height: 1; padding: 0 3px; border-radius: 50%; }
.ek-sil:hover { color: var(--bad); background: rgba(179,64,47,.12); }
.ek-sil:disabled { opacity: .5; cursor: default; }
.ek-ekle { white-space: nowrap; }

/* Kunye: Knowledge Base adresi KOPRU olarak gorunur, ✎ ile yazi kutusuna doner.
   Kopru kutusu ile yazi kutusunun YUKSEKLIGI ayni tutuldu (min-height 34px +
   ayni dolgu); yoksa gorunum degisince komsu alanlar zipliyor. */
.kb-govde { display: flex; align-items: center; gap: 6px; min-height: 34px; }
.kb-govde input { flex: 1 1 auto; min-width: 0; }
.kb-bag {
  flex: 1 1 auto; min-width: 0; display: block;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--teal-l); color: var(--yesil-yazi); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-bag:hover { text-decoration: underline; border-color: var(--teal-m); }
.kb-duzenle {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--card);
  color: var(--muted); border-radius: 8px; padding: 6px 9px; font-size: 13px; line-height: 1;
}
.kb-duzenle:hover { color: var(--yesil-yazi); border-color: var(--teal-m); }

/* Misc */
.list-simple .row { display: flex; gap: 6px; margin-bottom: 6px; }
.list-simple .row input { flex: 1; }
.inline-note { font-size: 12px; color: var(--muted); }
.danger-zone { margin-top: 26px; border-top: 1px dashed var(--line); padding-top: 14px; }

/* Dosya ekleri */
.file-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; background: var(--yuzey-2); }
.file-row a { flex: 1; font-weight: 600; word-break: break-all; }
.file-row .file-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.file-ic { font-size: 16px; }

/* Giriş ekranı */
.login-wrap { display: flex; justify-content: center; align-items: flex-start; padding-top: 8vh; }
.login-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 24px; width: 340px; max-width: 92vw; }
.login-card h1 { margin: 0 0 2px; font-size: 20px; color: var(--yesil-yazi); }
.login-card input { margin-bottom: 2px; }
/* Şifre göster/gizle (Ümit, 2026-09-18): input sağında göz butonu. */
.sifre-alani { position: relative; display: block; }
.sifre-alani input { width: 100%; padding-right: 42px; }
.sifre-goster { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer; font-size: 17px; line-height: 1;
  padding: 4px 6px; border-radius: 6px; color: var(--muted); }
.sifre-goster:hover { background: var(--yuzey-3); }
/* Açık yeşil üst çubuk: beyaz saydam hap + açık gri yazı görünmez kalıyordu;
   hap koyu saydama, yazı --on-teal'e alındı. */
/* .user-chip ARTIK KULLANILMIYOR (yerine .kullanici blogu). Eski yazdirma
   goruntuleri ve olasi dis kullanimlar icin biraktim, rengi beyaz bara uyarlandi. */
.user-chip { font-size: 12.5px; color: var(--text); background: var(--teal-l); padding: 4px 10px; border-radius: 999px; }

/* Toast */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(60px); background: var(--teal-d); color: var(--on-vurgu); padding: 10px 18px; border-radius: 8px; box-shadow: var(--shadow); opacity: 0; transition: .25s; z-index: 100; font-size: 13px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 820px) {
  .pv-layout { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; }
  .kv-grid { grid-template-columns: 1fr; }
  .swot { grid-template-columns: 1fr; }
}

/* Yazdirmada sabitleme kapali */
@media print {
  .pv-head { position: static; margin: 0 0 14px; padding: 0; border-bottom: 0; }
  /* Golgeler kagitta gri bulasik gibi cikiyor */
  .kpi-card { box-shadow: none; }
}

/* --- Proje Portfoy Panosu (#/portfoy-pano) ------------------------------- */
/* Karolar dar: 9 karo genis ekranda tek satira yakin durabilsin (kpi-cards
   varsayilani 180px, o kadar genis karo 9 tane olunca uc satira dusuyordu). */
/* Karo seridi UCERLI gruplar: kartlarin gorunumu ayni, yalnizca gruplar arasi
   bosluk (18px) grup ici bosluktan (8px) belirgin sekilde genis. Dar ekranda
   gruplar alt alta duser, ic dizilim bozulmaz. */
.pano-karolar { display: flex; flex-wrap: wrap; gap: 14px; }
/* Karo tabani 150 -> 112px, grup tabani 470 -> 340px: ucuncu grup da ayni
   satira sigsin. max-width SART: onceden son grup tek basina alt satira
   dusunce flex-grow onu TUM SATIRA yayiyordu ve o uc karo devlesiyordu
   (Umit'in ekran goruntusu: Energy/Andon/Forklift). Ust sinir, yalniz kalan
   grubun komsulariyla ayni boyda kalmasini sagliyor. */
.pano-uclu { display: grid; grid-template-columns: repeat(3, minmax(112px, 1fr)); gap: 6px;
  flex: 1 1 340px; max-width: 560px; }
/* GRUP RENKLERI — panoda ucerli, proje sayfasinda ikiserli gruplar icin ORTAK.
   Renkler dogrulandi (dataviz validate_palette.js, tum ciftler, acik kip):
   var(--yesil-yazi) / var(--gr-mor) / var(--warn) -> ALL CHECKS PASS, en kotu cift DE 7,1 (protan).
   Bu deger 6-8 bandinda; kural "yalnizca ikincil kodlama varsa" diyor - burada
   GRUPLAR ARASI BOSLUK (18px, ic bosluk 8px) o ikincil kodlamayi sagliyor,
   renk tek basina tasimiyor.
   Elenenler: var(--bad) kirmizi yesille DE 2,7 (deutan), var(--gr-teal) teal morla 7,8.
   ONEMLI: .k-value rengi yalniz NOTR kartlarda gecerli; good/warn/bad kartlarin
   kendi durum rengi DAHA ONCELIKLI olmali — durum bilgisi grup susunden
   onemli. Bu yuzden :not() ile disarida birakildilar. (Ozgullukte de durum
   kurali kazanirdi; :not() niyeti okunur kiliyor.)
   Olculdu (CIEDE2000 + dichromat simulasyonu), notr deger yazisi vs durum:
       grup2 var(--gr-mor) vs bad var(--bad) -> 50,7 protan   grup2 vs good -> 42,0
       grup3 var(--warn) vs bad var(--bad) -> 17,5 protan   grup3 vs good -> 17,7
       grup1 var(--yesil-yazi) vs bad var(--bad) ->  6,1 protan   grup1 vs good ->  7,7 tritan
   Grup1'in 6,1'i DUSUK ama gruplamanin getirdigi bir sey DEGIL: var(--yesil-yazi) zaten
   --teal-d, yani tum notr KPI degerlerinin oteden beri kullandigi varsayilan
   renk. Yani bu cift, gruplama olmadan da sayfada aynen var; burada
   dokunulmadi. Duzeltilecekse temanin --teal-d/--bad ciftinde duzeltilir. */
.pano-grup-1 .kpi-card, .kart-grup-1 .kpi-card { border-top: 3px solid var(--yesil-yazi); }
.pano-grup-2 .kpi-card, .kart-grup-2 .kpi-card { border-top: 3px solid var(--gr-mor); }
.pano-grup-3 .kpi-card, .kart-grup-3 .kpi-card { border-top: 3px solid var(--warn); }
.pano-grup-1 .kpi-card:not(.good):not(.warn):not(.bad) .k-value,
.kart-grup-1 .kpi-card:not(.good):not(.warn):not(.bad) .k-value { color: var(--yesil-yazi); }
.pano-grup-2 .kpi-card:not(.good):not(.warn):not(.bad) .k-value,
.kart-grup-2 .kpi-card:not(.good):not(.warn):not(.bad) .k-value { color: var(--gr-mor); }
.pano-grup-3 .kpi-card:not(.good):not(.warn):not(.bad) .k-value,
.kart-grup-3 .kpi-card:not(.good):not(.warn):not(.bad) .k-value { color: var(--warn-yazi); }

/* Ikiserli gruplarin kabi. Umit: "kartlari ana sayfadaki gibi yap" — bu yuzden
   olculer ANA SAYFA (.pano-karolar/.pano-uclu) ile ayni tutuldu: gruplar arasi
   18px, grup ici 8px, karo tabani ~107px (ucluye 320px, ikiliye 214px basis). */
.kpi-cards.kart-gruplu { display: flex; flex-wrap: wrap; gap: 14px; }
.kart-grubu { display: grid; grid-template-columns: repeat(2, minmax(104px, 1fr)); gap: 6px;
  flex: 1 1 236px; max-width: 420px; }
/* Karolarin ALT KENARINA belirgin golge (Umit, 2026-09-10). Genel --shadow
   cok yumusak kaliyordu (0 1px 3px / .08); burada golge ASAGI kaydirilip
   koyulastirildi, boylece kartlar sayfadan kalkiyor. Ust kenardaki renk seridi
   zaten var - golge yalnizca altta, yanlarda neredeyse yok (yayilma 0). */
/* Golge artik GENEL --shadow'da (tum kartlar ayni); burada yalniz dolgu ve
   hover kaliyor. */
/* Kart govdesi: SOLA hizali, ikon karesi + metin sutunu, altta cubuk.
   Hem Projeler/proje sayfasindaki gruplu kartlar hem PANO karolari ayni —
   Umit: "projeler sayfasina benzetirmisin" (2026-09-11).
   Tasks sayfasinin 7 karosu (gruplanmamis .pano-karolar) da ayni govdeyi
   kullanir; orada ikon/cubuk verilmediginde sadece etiket+deger cikar. */
/* Olculer bir tik kucultuldu (Umit: "biraz kucultur musun", 2026-09-11):
   dolgu 12/14 -> 9/11, ikon karesi 34 -> 28, deger 22 -> 19px. Oran cubugu ve
   ust bosluk da buna gore daraldi. */
.pano-karolar .kpi-card, .kart-gruplu .kpi-card {
  padding: 9px 11px; display: flex; flex-direction: column;
  transition: box-shadow .12s, transform .12s;
}
.pano-karolar .kpi-card:hover, .kart-gruplu .kpi-card:hover {
  box-shadow: 0 5px 8px -1px rgba(31,58,68,.20), 0 14px 24px -8px rgba(31,58,68,.26);
  transform: translateY(-1px);
}
.pano-karolar .k-label, .kart-gruplu .k-label { font-size: 11px; }
.pano-karolar .k-value, .kart-gruplu .k-value { font-size: 19px; margin-top: 1px; }
/* Metin deger (tarih vb.): sayi puntosu 10 haneli metni dar karoda kirpiyor. */
.k-value.k-value-kucuk { font-size: 15px; letter-spacing: -.2px; }
.pano-karolar .k-sub, .kart-gruplu .k-sub { font-size: 10.5px; }
/* Alt not bos gelirse (pano karolarinda hep boyle) yer kaplamasin. */
.k-sub:empty { display: none; }

/* --- KPI kart ici: ikon karesi + ilerleme cubugu ------------------------- */
/* Ikon SOLDA kendi sutununda, metin saginda — mockup dizilimi. */
.kpi-ust { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.kpi-metin { min-width: 0; flex: 1 1 auto; }
/* Etiket KIRPILMAZ, SARAR. nowrap+ellipsis ile dar ekranda "Portföy Ta..." /
   "Zaman Sa..." cikiyordu — kirpilmis bir gosterge adi, iki satira sarmis
   adindan kotu. Etiketler kisa, en fazla iki satir eder. */
.kpi-ust .k-label { min-width: 0; overflow-wrap: anywhere; }
/* DOLU kare + BEYAZ simge (mockup). Simge bir metin degil "grafik oge";
   WCAG esigi 3:1 ve en zayif zemin (var(--warn) turuncu) beyazla 3,48:1 — geciyor.
   Kare 34px: 26px'te dolu zemin uzerindeki ince cizgili simge kayboluyordu. */
.kpi-ikon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; background: var(--teal-d); color: var(--on-vurgu); }
.kpi-ikon svg { width: 15px; height: 15px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Kare kartin grup rengini alir — kart ustundeki serit ile ayni dil.
   Durum kartlarinda (good/warn/bad) durum rengi ONCELIKLI: karenin rengi
   "iyi mi kotu mu" sorusunu yanitlamali, grup susunu degil. */
.kart-grup-1 .kpi-ikon, .pano-grup-1 .kpi-ikon { background: var(--yesil-yazi); }
.kart-grup-2 .kpi-ikon, .pano-grup-2 .kpi-ikon { background: var(--gr-mor); }
.kart-grup-3 .kpi-ikon, .pano-grup-3 .kpi-ikon { background: var(--warn); }
.kpi-card.good .kpi-ikon { background: var(--ok); }
.kpi-card.warn .kpi-ikon { background: var(--warn); }
.kpi-card.bad  .kpi-ikon { background: var(--bad); }

/* Ilerleme cubugu: kartin en altinda, otomatik ust bosluk ile tabana yaslanir
   (kartlar farkli yukseklikte olsa da cubuklar hizali kalir). */
/* Cubuk kartin TAM genisliginde (ikon sutununun altindan da gecer) ve tabana
   yaslanir; boylece kartlar farkli yukseklikte olsa da cubuklar ayni hizada. */
.kpi-oran { margin-top: auto; padding-top: 7px; display: flex; align-items: center; gap: 7px; }
.kpi-ray { flex: 1 1 auto; min-width: 0; height: 5px; border-radius: 999px;
  background: rgba(31,58,68,.10); overflow: hidden; }
.kpi-ray i { display: block; height: 100%; border-radius: 999px; background: var(--teal-d); }
.kpi-oran-not { flex: 0 0 auto; font-size: 10px; color: var(--muted); white-space: nowrap; }
/* Dolgu rengi = degerin rengi. Durum varsa durum rengi, yoksa grup rengi —
   .k-value ile ayni kural, iki gosterge farkli renk soylemesin. */
.kart-grup-1 .kpi-card:not(.good):not(.warn):not(.bad) .kpi-ray i,
.pano-grup-1 .kpi-card .kpi-ray i { background: var(--yesil-yazi); }
.kart-grup-2 .kpi-card:not(.good):not(.warn):not(.bad) .kpi-ray i,
.pano-grup-2 .kpi-card .kpi-ray i { background: var(--gr-mor); }
.kart-grup-3 .kpi-card:not(.good):not(.warn):not(.bad) .kpi-ray i,
.pano-grup-3 .kpi-card .kpi-ray i { background: var(--warn); }
.kpi-card.good .kpi-ray i { background: var(--ok); }
.kpi-card.warn .kpi-ray i { background: var(--warn); }
.kpi-card.bad  .kpi-ray i { background: var(--bad); }

/* Yatay cubuk listesi: ad | dolgu | sayi. Ad kolonu sabit genislikte, boylece
   cubuklarin sol kenari hizali baslar (kaymis taban okumayi bozuyor). */
.pano-cubuk { display: flex; flex-direction: column; gap: 3px; }
.pano-cs { display: grid; grid-template-columns: minmax(0, 190px) 1fr 40px; align-items: center; gap: 8px; font-size: 12px; }
.pano-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pano-dolgu { background: transparent; }
/* Cubuk yuksekligi 24px ustune cikmiyor; veri ucu 4px yuvarlak, taban duz */
.pano-bar { display: block; height: 14px; min-width: 2px; border-radius: 0 4px 4px 0; }
.pano-sayi { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--yesil-yazi); }

.pano-tm svg { width: 100%; height: auto; display: block; }
.pano-tm-ad { font-size: 11.5px; font-weight: 700; fill: var(--gr-etiket); }
.pano-tm-sayi { font-size: 11px; font-weight: 700; fill: var(--gr-etiket); }
.pano-tm-kutu:hover rect { opacity: .82; }
.pano-cerceve { stroke: var(--line); stroke-width: 1; }
/* Pano suzgec etkilesimi: tiklanabilir cubuk satiri + secili isaret */
.pano-cs-tikla { cursor: pointer; border-radius: 4px; }
.pano-cs-tikla:hover { background: var(--yuzey-yesil); }
.pano-cs-secili { background: var(--teal-l); }
.pano-cs-secili .pano-ad { font-weight: 700; color: var(--yesil-yazi); }
.pano-tm-tikla { cursor: pointer; }
/* Secili treemap kutusu: renk DEGISMIYOR (renk kategori kodlamiyor),
   beyaz cerceve ile isaretleniyor. */
.pano-tm-secili rect { stroke: var(--card); stroke-width: 3; }
/* Treemap yoğunluk efsanesi (2026-10-08) — metin token rengi, kutucuk adım rengi. */
.pano-tm-efsane { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.pano-tm-ef-baslik { font-weight: 600; }
.pano-tm-ef-oge { display: inline-flex; align-items: center; gap: 5px; }
.pano-tm-ef-kutu { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
/* Firma listesi sütun süzgeçleri (2026-10-08). Başlığın altında ikinci satır; satır
   tıklaması yalnız gövde satırlarında, bu satır tıklanınca hiçbir şey açılmaz. */
.pano-kolon-suz th { padding: 4px 6px; background: var(--yuzey-2); text-transform: none; letter-spacing: 0; }
.pano-kolon-suz input { width: 100%; min-width: 64px; box-sizing: border-box; font-size: 11.5px; padding: 4px 6px; }
.pano-kolon-durum { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.pano-kolon-bos td { text-align: center; color: var(--muted); padding: 14px; }
.pano-karo-secili { outline: 2px solid var(--teal-d); outline-offset: -2px; }
/* Firma listesi satir secimi - proje listesiyle ayni his.
   Ozgulluk notu: satir seritlemesi (table.data tr:nth-child(even) td) ile ayni
   ozgullukte olmamak icin iki sinif birlikte yaziliyor (bkz. proj-list). */
table.data.pano-liste tr { cursor: pointer; }
table.data.pano-liste tr:hover td { background: var(--yuzey-2); }
table.data.pano-liste tr.pano-satir-secili td { background: var(--teal-l); }
table.data.pano-liste tr.pano-satir-secili td:first-child { box-shadow: inset 3px 0 0 var(--teal-d); }

/* trex MES halka grafigi */
.pano-halka { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.pano-halka-svg { width: 300px; max-width: 100%; height: auto; display: block; order: 2; }
.pano-halka-efsane { display: flex; flex-direction: column; gap: 8px; order: 1; min-width: 210px; }
.pano-hef { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 10px; font-size: 13px; }
.pano-hef-kutu { width: 11px; height: 11px; border-radius: 3px; }
.pano-hef-ad { color: var(--text); }
.pano-hef-yuzde { font-weight: 700; color: var(--yesil-yazi); font-variant-numeric: tabular-nums; }
.pano-hef-adet { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.pano-halka-sayi { text-anchor: middle; font-size: 40px; font-weight: 800; fill: var(--text); }
.pano-halka-alt { text-anchor: middle; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; fill: var(--muted); }
/* Dilim kenarina yuzey rengi halka: komsu dilimler birbirine yapismasin */
.pano-dilim path { stroke: var(--card); stroke-width: 2; }
.pano-dilim:hover path { opacity: .85; }
/* Halka: tiklanabilir dilim + secili isaret */
.pano-dilim-tikla { cursor: pointer; }
.pano-dilim-secili path { stroke: var(--text); stroke-width: 3; }
.pano-hef-tikla { cursor: pointer; border-radius: 4px; padding: 2px 4px; margin: -2px -4px; }
.pano-hef-tikla:hover { background: var(--yuzey-yesil); }
.pano-hef-secili { background: var(--teal-l); }
.pano-hef-secili .pano-hef-ad { font-weight: 700; color: var(--yesil-yazi); }
.pano-halka-alt-secili { fill: var(--yesil-yazi); font-weight: 700; }
.pano-halka-toplam { text-anchor: middle; font-size: 10.5px; fill: var(--muted); }
/* Proje adinin solundaki durum noktasi — mockup'taki gibi satirin durumunu
   goz gezdirirken okutur. Renk .badge ile AYNI kaynaktan (statusClass). */
.proj-nokta { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; flex: 0 0 auto; vertical-align: 1px; }
.proj-nokta.b-open { background: var(--ok); }
.proj-nokta.b-hold { background: var(--warn); }
.proj-nokta.b-bad { background: var(--bad); }
.proj-nokta.b-closed { background: var(--line-koyu); }

/* Kalan sure rozeti: sayi duz yazi degil, hap. Negatif bakiye kirmizi hapta —
   listede en cok aranan sey o. */
.bal-rozet { display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bal-rozet.neg { background: var(--bad-tint); color: var(--bad); }
.bal-rozet.poz { background: var(--yuzey-yesil-2); color: var(--ok-yazi); }

/* Portfoy karti: eslesen tpys projesi olmayan firma adi baglanti gibi durmasin */
.pf-ad.pf-ad-yok { color: var(--muted); cursor: default; }

/* (Pano karo seridi ozel bicimi kaldirildi — Umit sade 9 karoyu tercih etti,
   2026-09-10. Karolar yine standart .kpi-card gorunumunde.) */

/* ---------------------------------------------------------------- surum rozeti
   Sag alt kosede, sabit. Degeri index.html'e sunucu gomuyor (lib/surum.js).

   OPAKLIK DUSURULMUYOR. Ilk denemede opacity .55 ile soluklastirilmisti;
   olculdu: metin/zemin kontrasti 1,95:1 cikti -- WCAG'in kucuk yazi icin
   istedigi 4,5:1'in cok altinda, yani okunamaz. Gorunsun diye konan bir sey
   okunamiyorsa isi gormez. Simdi tam opak. Umit "biraz daha belirgin" isteyince punto 12,5px,
   kalin ve koyu metne cekildi: olculen kontrast 14,7:1.

   z-index 30: kip penceresinin (200) ve toast'in (100) ALTINDA -- rozet
   hicbir zaman bir uyarinin onune gecmemeli. Yapiskan form cubugunun (20)
   ustunde, cunku o cubugun butonlari solda hizali, sag kose bos. */
.surum-rozet {
  position: fixed; right: 10px; bottom: 8px; z-index: 30;
  padding: 4px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  color: var(--text); font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: opacity .15s, border-color .15s;
  -webkit-user-select: text; user-select: text;   /* destek icin kopyalanabilir */
}
.surum-rozet:hover { border-color: var(--teal-m); }

/* Toast tam da sag alttan yukari geliyor; ikisi ayni anda gorunurken
   rozet cekiliyor ki mesaj okunabilsin. */
.toast.show ~ .surum-rozet, body:has(.toast.show) .surum-rozet { opacity: 0; }

/* ---------------------------------------------------------------------------
   AÇIK JIRA TALEPLERİ raporu (#/jira-acik)
   Gün eşikleri: 90+ uyarı, 180+ kritik. Renkler YAZI rolündeki belirteçlerden
   (--warn-yazi / --bad); işaret renkleri 3:1'e göre seçilmiş, yazı 4,5 istiyor.
   --------------------------------------------------------------------------- */
/* Firma KOLON (gruplama değil, sıralama). Ad HER SATIRDA yazılı — satır
   kopyalandığında/süzüldüğünde firma kaybolmasın. Firma değişimi üst çizgiyle
   işaretleniyor; sıralı listede blokların nerede başladığı böyle görünüyor. */
.ja-firma-h { font-weight: 600; color: var(--yesil-yazi); min-width: 190px; max-width: 300px; }
tr.ja-yeni-firma > td { border-top: 2px solid var(--line-koyu); }
.ja-gun { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ja-gun.ja-uyari  { color: var(--warn-yazi); }
.ja-gun.ja-kritik { color: var(--bad); }

/* Tıklanabilir kolon başlığı (Açık Jira Talepleri). Ok işareti yönü söylüyor;
   etkin kolon ayrıca kalın ve vurgu renginde — renk TEK BAŞINA ayırt edici
   değil (renk körlüğünde ok kalır). */
th.ja-sirala { cursor: pointer; user-select: none; white-space: nowrap; }
th.ja-sirala:hover { background: var(--yuzey-3); }
th.ja-sirala:focus-visible { outline: 2px solid var(--teal-d); outline-offset: -2px; }
th.ja-sirala.etkin { color: var(--yesil-yazi); }
th.ja-sirala .ja-ok { font-size: 11px; }

/* Açık Jira Talepleri üst özeti — gün eşikleri tablodakiyle AYNI sınıfları
   kullanıyor (90+ uyarı, 180+ kritik), böylece eşik tek yerde tanımlı kalıyor. */
.oz-deger.ja-uyari  { color: var(--warn-yazi); }
.oz-deger.ja-kritik { color: var(--bad); }

/* AÇIK KAYAKO TALEPLERİ raporu (#/kayako-acik) yukarıdaki ja-* sınıflarının
   AYNISINI kullanıyor — gün eşikleri (90+ uyarı, 180+ kritik) iki raporda
   tek yerde tanımlı kalsın diye. Sınıf adı 'ja-' kalıyor: yeniden
   adlandırmak çalışan raporu da elleme riski, kazancı yalnız isim.
   Kayako'ya özel tek şey konu kolonu: başlıklar 200 karaktere kadar
   çıkıyor, sınırlanmazsa tablo yatay kayıyor ve gün kolonu ekrandan
   çıkıyordu. Tam metin hücrenin ipucunda duruyor. */
.ka-konu { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "Portal'a Yaz" bekleme göstergesi (2026-10-08). Renkler token'dan (K3); hareket
   azaltılmışsa animasyon durur, metin + sayaç kalır. */
.tpf-bekle { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line);
  border-left: 4px solid var(--teal); border-radius: 10px; background: var(--yuzey-2); }
.tpf-bekle-halka { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 4px solid var(--line); border-top-color: var(--teal); animation: tpf-don .9s linear infinite; }
.tpf-bekle-metin { flex: 1 1 auto; min-width: 0; }
.tpf-bekle-baslik { font-size: 15px; font-weight: 700; color: var(--text); }
.tpf-bekle-alt { font-size: 13px; color: var(--muted); margin-top: 2px; }
.tpf-bekle-sure { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.tpf-bekle-cubuk { position: relative; height: 6px; margin-top: 10px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tpf-bekle-cubuk span { position: absolute; top: 0; bottom: 0; left: -35%; width: 35%; border-radius: 3px;
  background: var(--teal); animation: tpf-ak 1.4s ease-in-out infinite; }
.tpf-bekle-not { font-size: 12px; color: var(--muted); margin-top: 8px; }
/* Belirli kip: sunucu ilerleme bildiriyorsa çubuk gerçek yüzdeyle dolar, akmaz. */
.tpf-bekle-cubuk.belirli span { animation: none; left: 0; width: 0; transition: width .6s ease; }
@keyframes tpf-don { to { transform: rotate(360deg); } }
@keyframes tpf-ak { 0% { left: -35%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .tpf-bekle-halka, .tpf-bekle-cubuk span { animation: none; }
  .tpf-bekle-cubuk span { left: 0; width: 100%; opacity: .5; }
}

/* TPF_02 takvimi BÜYÜK YAZI (Ümit, 2026-10-08: "fontları büyüt, yaşlılar okuyamıyor").
   Genel tablo başlığı 11px büyük harf; bu formda 13px ve büyük-harf aralığı korunur.
   Kutu/liste/gövde 14px (inline stilde, js). Hafta numaraları da okunur olsun. */
table.data.tpf02-tablo th { font-size: 13px; padding: 8px 10px; }
table.data.tpf02-tablo td { font-size: 14px; }

/* TPF_02 tam ekran (2026-10-09, tpysup 1.19.6 deseni). Fullscreen API'de #view tüm
   ekranı kaplar; API yoksa .tpf02-tam-ekran sabit konumla sayfayı kaplar. */
#view:fullscreen { background: var(--bg); overflow: auto; padding: 16px; box-sizing: border-box; }
#view.tpf02-tam-ekran { position: fixed; inset: 0; z-index: 9999; background: var(--bg); overflow: auto; padding: 16px; margin: 0; box-sizing: border-box; }

/* TPF_02 ayrıntı sütunları gizli (2026-10-09): Gantt'a yer. Hücreler js'te işaretli. */
table.data.tpf02-tablo.tpf02-ayr-gizli .tpf02-ayr { display: none; }
/* MCP Erişimi (2026-10-13) */
.ldap-eylem { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.ldap-sonuc { margin-top: 10px; font-size: 13px; }
.ldap-ipucu { font-size: 12px; color: var(--muted); margin: 2px 0 5px; }
.ldap-uyari { font-size: 12.5px; color: var(--bad); border: 1px solid var(--bad); border-radius: 8px; padding: 8px 10px; margin: 0 0 12px; }
.mcp-form { max-width: 1100px; }
.mcp-form .ldap-eylem select, .mcp-form .ldap-eylem input { max-width: 340px; }
.mcp-anahtar { display: inline-block; word-break: break-all; user-select: all; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); font-size: 12.5px; }
tr.mcp-pasif td { color: var(--muted); }
.mcp-form td { white-space: nowrap; }
/* Yetkilendirme (2026-10-13) */
.guv-sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 4px 0 14px; }
.guv-sekme { background: transparent; border: 1px solid transparent; border-bottom: none; padding: 8px 16px; border-radius: 8px 8px 0 0;
.guv-sekme:hover { color: var(--text); }
.guv-sekme.secili { color: var(--text); background: var(--card); border-color: var(--line); }
.yetki-form { max-width: 980px; }
.yetki-tablo td:nth-child(3), .yetki-tablo td:nth-child(4), .yetki-tablo th:nth-child(3), .yetki-tablo th:nth-child(4) { text-align: center; }
.yetki-tablo input[type=checkbox] { width: 18px; height: 18px; }
.yetki-aciklama { font-size: 12.5px; color: var(--muted); }
/* Denetim Kaydı (2026-10-15) */
.denetim-suzgec { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 10px; }
.denetim-suzgec input[type=text] { max-width: 170px; }
.denetim-kutu { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.denetim-tablo td { font-size: 12.5px; vertical-align: top; }
.denetim-hata td { color: var(--bad); }
.denetim-soluk { color: var(--muted); font-size: 12px; }
.denetim-ayrinti td { background: var(--card); }
.denetim-fark { width: 100%; max-width: 900px; table-layout: fixed; }
.denetim-fark th:first-child { width: 28%; }
.denetim-fark td { white-space: normal; word-break: break-word; }
.denetim-json { margin: 0; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }
/* Tanımlar (2026-10-15) */
.tanim-form { max-width: 980px; }
.tanim-tablo input[type=text] { width: 100%; }
.tanim-tablo td:nth-child(2) { min-width: 260px; }
.tanim-tablo td:nth-child(3) { min-width: 200px; }
.tanim-tablo td:first-child .btn { padding: 1px 7px; margin-left: 2px; }
/* TPF_02: gecikme nedeni girilmiş satır turuncu (Ümit, 2026-10-15). Yapışkan sütunların satır içi
   zemini (var(--card)) olduğu için !important; hücredeki giriş kutuları zemini göstersin diye şeffaf.
   Hafta hücrelerindeki plan kutuları kendi renginde kalır. */
tr.tpf02-gecikme > td { background: var(--gecikme-tint) !important; }
tr.tpf02-gecikme > td:first-child { box-shadow: inset 4px 0 0 var(--gecikme-kenar); }
tr.tpf02-gecikme input, tr.tpf02-gecikme select { background: transparent; }