/* İSG-BYS — tüm tasarım tek dosyada (Terra Muhasebe düzeni).
   Renkler burada, HTML'de sabit renk yok.

   ⚠️ TEMA KURALI (kullanıcı isteği, 11 Ağustos 2026): arayüz **canlı** olacak,
   sönük durmayacak. Ama renk değişikliği **yalnız stildir** — hiçbir davranış,
   hiçbir sınıf adı ve hiçbir şablon mantığı değişmez.

   ⚠️ Yeşil / sarı / kırmızı SÜS DEĞİL, ANLAMDIR: uyum durumu (yeşil=güncel,
   sarı=yaklaşıyor, kırmızı=geçti). Bu üç renk canlandırıldı ama **birbirinin
   yerine geçecek ya da başka amaçla kullanılacak biçimde değiştirilemez.**
   Neşeli görünsün diye kırmızıyı yumuşatmak, geciken evrakı gizlemek olur. */

:root {
  /* ══ TEK JETON KAYNAĞI — «Mevcut» (Saha) teması ══
     ⚠️ Burada İKİ `:root` vardı; ilkinin 32 jetonunun **31'i ölüydü**
     (aşağıdaki blok eziyordu) ve dosyadan okunan renk tarayıcıda
     görünenden farklı çıkıyordu. Ölçülüp birleştirildi, 15 Eyl 2026.
     ⚠️ Değerler tarayıcının HESAPLADIĞI değerlerdir, dosyadan
     kopyalanmış değil. Tema blokları en altta. */
  /* Taşıyıcı — yan menü */
  --yan-menu-ust: #202329;
  --yan-menu: #191b1f;
  --yan-menu-koyu: #0e0f12;
  --yan-menu-yazi: #b9bcc4;
  --yan-menu-baslik: #8b8f99;
  --yan-menu-alt-yazi: #a9adb6;
  --yan-menu-aktif: #2a2d34;

  /* Yüzey */
  --zemin: #f3f2ee;
  --kart: #ffffff;
  --zemin-yumusak: #eceae4;
  --cizgi: #dcd8d0;
  --cizgi-koyu: #bdb8ad;
  --yazi: #15171b;
  /* ⚠️ Soluk yazı 17 Eyl 2026'da bir ton koyulaştı (6a6e78 idi): kırmızı/sarı/yeşil zeminde 4,15-4,44 ölçüldü, eşik 4,5 (test_tema.KontrastOlculur) */
  --yazi-soluk: #63676f;

  /* Tablo */
  --tablo-baslik-zemin: #eceae4;
  --tablo-baslik-yazi: #3c3f46;
  --satir-vurgu: #f7f5f0;
  --hucre-vurgu: #faf9f5;

  /* Anlam üçlüsü — yeşil=güncel · sarı=yaklaşıyor · kırmızı=geçti. ⚠️ Bu üçü SÜS DEĞİL ANLAMDIR; hiçbir temada birbirinin yerine geçemez */
  --yesil-zemin: #dcf5e5;
  --yesil-cizgi: #15803d;
  --yesil-yazi: #14532d;
  --yesil-yumusak: #f2fbf5;
  --yesil-uzeri-yazi: #ffffff;
  --sari-zemin: #fdeecd;
  --sari-cizgi: #c2740a;
  --sari-yazi: #7c4a05;
  --sari-yumusak: #fefaf1;
  --sari-uzeri-yazi: #1d1101;
  --kirmizi-zemin: #ffe0e6;
  --kirmizi-cizgi: #be123c;
  --kirmizi-yazi: #8f0e2e;
  --kirmizi-yumusak: #fff5f7;
  --kirmizi-uzeri-yazi: #ffffff;

  /* Vurgu = EYLEM (uyum durumu değil). ⚠️ `--mavi` MARKA rengidir ve yalnız kenarlık/şerit/simgede kullanılır; yazı ve dolu düğme ayrı yuvadan gelir — ölçüldü: marka turuncusu yazı olarak kırmızı uyarı şeridinde 2,89 veriyordu (eşik 4,5) */
  --mavi: #ea580c;
  --mavi-acik: #fb7a3c;
  --vurgu-metin: #b04209;
  --vurgu-dolu: #cd4d0a;
  --vurgu-yazi: #ffffff;
  --vurgu-rgb: 234, 88, 12;
  --firma-zemin: #fdf3ea;
  --firma-cizgi: #f0d9c4;
  /* Vurgu tonlu açık yüzey — takvim maddesi, seçili taslak alanı ve son bakılanlar çipi. Firma çubuğunun zeminiyle aynı ton: üstünde yazı ve bağlantı her temada ölçülü. ⚠️ Eskiden kurala gömülü açık leylaktı ve Tebeşir'de açık yazının altında okunmuyordu (17 Eyl 2026) */
  --vurgu-yumusak: var(--firma-zemin);
  /* Bilgi kutusu zemini (`isgbys-form.css`). ⚠️ Eskiden kurala gömülü bir leylak geçişti ve koyu temada açık yazıyla okunmuyordu (Tebeşir 1,1 — 17 Eyl 2026'da ölçüldü) */
  --bilgi-zemin: linear-gradient(90deg, #eef1ff, #f7edff);

  /* Renksiz kartların dönen şeridi — altı yuva */
  --mor: #6d4fa8;
  --turkuaz: #0f766e;
  --turuncu: #475569;
  --pembe: #2c6e9b;
  --dekor-6: #6b4423;

  /* Şekil */
  --yuvarlak: 6px;
  --yuvarlak-kucuk: 5px;
  --yuvarlak-dugme: 5px;
  --yuvarlak-rozet: 4px;
  --serit-kalinlik: 5px;
  --golge: 0 1px 0 rgba(21,23,27,.07);
  --golge-hover: 0 2px 0 rgba(21,23,27,.10), 0 10px 22px rgba(21,23,27,.12);
  --giris-golge: 0 18px 50px rgba(0,0,0,.38);

  /* Tek eş aralıklı yazı yuvası — MFA gizli anahtarı gibi harf harf
     okunan metinler için. Temaya göre değişmez. */
  --font-mono: Consolas, "Cascadia Mono", ui-monospace, monospace;

  /* Yazı ve etiket — «Lacivert» teması için açıldı (17 Eyl 2026).
     ⚠️ Değerler bugünkü görünümün BİREBİR karşılığıdır: bu yuvalar
     eklenince «Mevcut», Kobalt, Kâğıt ve Tebeşir'de hiçbir şey değişmez.
     Eskiden aynı değerler kurallara gömülüydü; tema yalnız jeton ezdiği
     için (test_tema) yazı ailesini ve etiket biçimini değiştiremiyordu.
     ⚠️ `--etiket-ailesi` küçük büyük harfli etiketlerin (menü bölümü,
     tablo başlığı, kurum türü) ailesidir; `--font-mono` DEĞİL — o gizli
     anahtar gibi harf harf okunan metnindir ve temaya göre değişmez. */
  --yazi-ailesi: "Segoe UI", system-ui, -apple-system, sans-serif;
  --baslik-ailesi: var(--yazi-ailesi);
  --etiket-ailesi: var(--yazi-ailesi);
  --sayfa-basligi-boyut: 20px;
  --sayfa-basligi-kalinlik: 800;
  --sayfa-basligi-aralik: .02em;
  --sayfa-basligi-donusum: uppercase;
  --marka-boyut: 15px;
  --marka-aralik: .04em;
  --marka-alt-boyut: 12px;
  --marka-alt-aralik: normal;
  --marka-alt-donusum: none;
  /* ⚠️ BİLEREK DEĞİŞTİ (17 Eyl 2026, .65 idi): alt yazı menünün en açık yerinde duruyor ve «Mevcut» 4,38 · Tebeşir 3,75 ölçüldü. Lacivert için ölçülen .8 köke alındı */
  --marka-alt-saydamlik: .8;
  --menu-baslik-boyut: 11px;
  --menu-baslik-kalinlik: 700;
  --menu-baslik-aralik: .07em;
  --menu-aktif-zemin: rgba(var(--vurgu-rgb), .18);
  --menu-aktif-cizgi: var(--mavi-acik);
  --tablo-baslik-boyut: 12px;
  --tablo-baslik-kalinlik: 700;
  --tablo-baslik-aralik: .05em;
  --dugme-donusum: uppercase;
  --dugme-aralik: .06em;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--yazi-ailesi);
  font-size: 14px;
  color: var(--yazi);
  background: var(--zemin);
}

a { color: var(--vurgu-metin); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- İmleç: tıklanabilen her şey EL olur ----------
   🔴 **Kullanıcı bildirimi, 24 Eyl 2026:** *"Mouse'un ucu ok şeklinde. Ama
   açılabilir ekran ya da linklere ya da yazılara geldiğinde ele dönsün.
   Bastığında açıldığını kişi anlasın, açılabildiğini."*

   ⚠️ **Sebep tarayıcı varsayılanı**: `<a href>` kendiliğinden el olur ama
   `<button>`, `<summary>`, `<select>` ve kutucuklar Chrome'da **ok** kalır.
   Projede `cursor: pointer` bugüne kadar bileşen bileşen yazılmıştı (16
   ayrı yerde); yazılmayan her yeni düğme sessizce tıklanmaz görünüyordu.
   Bu blok kuralı **öğe tipine** bağlıyor: yeni bir düğme eklendiğinde
   kimsenin bir şey yazması gerekmiyor.

   ⚠️ `label` yalnız bir alana BAĞLIYSA el olur (`[for]` ya da içinde input).
   Serbest label bir başlıktır; ona el imleci vermek tıklanır sanmak olurdu.
   ⚠️ Devre dışı öğe **el olmaz** — `not-allowed` ile "tıklanır ama şimdi
   değil" der; el verilseydi kullanıcı bozuk düğme sanırdı. */
button, summary, select,
[role="button"], [role="tab"], [onclick],
input[type="checkbox"], input[type="radio"],
input[type="submit"], input[type="button"], input[type="reset"],
input[type="file"], input[type="color"],
label[for], label:has(input[type="checkbox"]), label:has(input[type="radio"]),
.kart, .dugme, .serit-baglanti {
  cursor: pointer;
}
button:disabled, select:disabled, input:disabled,
.dugme[aria-disabled="true"], [aria-disabled="true"] {
  cursor: not-allowed;
}

/* Basılma geri bildirimi — *"bastığında açıldığını kişi anlasın"*.
   ⚠️ 1 px'lik iniş bilerek: daha fazlası uzun listelerde satırı oynatıyor.
   ⚠️ Sürüklenen kartlar hariç — orada imleç `grabbing` olmalı, itilme
   hareketi sürüklemeyle karışırdı. */
button:not(:disabled):active, .dugme:active, summary:active,
.kartlar:not(.suruklenebilir) .kart:active {
  transform: translateY(1px);
}

/* ---------- Yerleşim ---------- */
.duzen { display: flex; min-height: 100vh; }

/* ⚠️ **MENÜ EKRANA SABİT** (kullanıcı bildirimi, 18 Ağu 2026: *"ekran
   yukarıdayken alta kalıyor, görünmüyor"*). Sebep: `.duzen` bir flex kutu ve
   varsayılan `align-items: stretch` yan menüyü **sayfa boyunda** uzatıyordu.
   Uyum çizelgesi gibi uzun bir sayfada menü 3000 px oluyor, alttaki kullanıcı
   bloğu (Güvenlik · Parolam · İşlem geçmişim · Çıkış) **sayfanın** dibine
   düşüyor ve görmek için sonuna kadar kaydırmak gerekiyordu.
   Çözüm: yükseklik ekranla sınırlanır ve menü yapışkan olur.
   ⚠️ `align-self: flex-start` ŞART — `stretch` yüksekliği kaba göre
   büyütür, yapışkanlık da yalnız kutusundan **kısa** öğede çalışır. */
.yan-menu {
  width: 232px; flex-shrink: 0;
  color: var(--yan-menu-yazi);
  display: flex; flex-direction: column;
  position: sticky; top: 0;
  align-self: flex-start;
  height: 100vh;
}
.yan-menu .kurum {
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.yan-menu .kurum b { color: #fff; display: block; font-size: 15px; }
.yan-menu .kurum span { font-size: 12px; opacity: .65; }
/* Kurum başlığı ana ekrana gider. ⚠️ Tıklama alanı BLOK olmalı — satır içi
   bırakılsaydı yalnız harflerin üstü tıklanır, kullanıcı "çalışmıyor" derdi.
   Odak halkası `:focus-visible` ile korunuyor (klavyeyle gezen kullanıcı). */
.yan-menu .kurum-baglanti {
  display: block; text-decoration: none; color: inherit;
  border-radius: 8px; margin: -6px -8px; padding: 6px 8px;
  transition: background .15s;
}
.yan-menu .kurum-baglanti:hover { background: rgba(255,255,255,.08); }
.yan-menu .kurum-baglanti:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}

/* 🔴 **SATIR ARALIĞI DARALTILDI** (kullanıcı bildirimi, 25 Eyl 2026:
   *"menüdeki satır arasında çok fazla boşluk var, azalt"*).
   Ölçülen: bağlantı dolgusu 9 px → satır 36 px; yedi grup başlığının her
   birinde ayrıca 14 px üst boşluk vardı. Menü 100vh'ye sığmayıp kendi
   içinde kayıyordu (`overflow-y: auto`), yani alttaki satırlar için
   kaydırmak gerekiyordu.
   Yeni: bağlantı 6 px (satır ~30 px), başlık üstü 10 px.
   ⚠️ Yazı boyutu **küçültülmedi** — boşluğu almak okunaklılığı bozmaz,
   punto düşürmek bozar. */
.yan-menu nav { padding: 6px 0; flex: 1; overflow-y: auto; }
.yan-menu nav a {
  display: block; padding: 6px 18px;
  color: var(--yan-menu-yazi); font-size: 13.5px; text-decoration: none;
  border-left: 3px solid transparent;
}
.yan-menu nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.yan-menu nav a.aktif {
  color: #fff; border-left-color: var(--mavi-acik); font-weight: 600;
}
.yan-menu nav .baslik {
  padding: 10px 18px 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700;
}

/* ---------- Açılır menü grupları (18 Ağustos 2026) ----------
   ⚠️ Betik yok: `<details>` tarayıcının kendi işidir, betiksiz de açılır.
   İçinde bulunulan grup şablonda `open` alır. */
.yan-menu .menu-grup > summary.baslik {
  cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  /* ⚠️ Varsayılan üçgen KALDIRILIYOR: kendi okumuzu basıyoruz ve ikisi
     yan yana iki işaret olurdu. `list-style` Firefox/Chrome, `::-webkit-`
     eski Safari içindir. */
  list-style: none;
}
.yan-menu .menu-grup > summary.baslik::-webkit-details-marker { display: none; }
/* Ok: kapalıyken sağa, açıkken aşağı bakar. Dönme geçişi yalnız süstür. */
.yan-menu .menu-grup > summary.baslik::after {
  content: "▸"; font-size: 12px; line-height: 1;
  transition: transform .12s ease; transform-origin: 50% 50%;
}
.yan-menu .menu-grup[open] > summary.baslik::after { transform: rotate(90deg); }
/* Katlanmış grubun altındaki boşluk, açık gruptakiyle aynı kalsın.
   ⚠️ 10 → 7 px (25 Eyl 2026, satır aralığı daraltmasıyla birlikte): bu değer
   bağlantı dolgusuyla eşleşmeli, yoksa kapalı grupların altı açıklardan
   geniş görünür. */
.yan-menu .menu-grup:not([open]) > summary.baslik { padding-bottom: 7px; }
/* ⚠️ **BLOK ARTIK MENÜNÜN ÜSTÜNDE** (kullanıcı, 19 Eyl 2026: *"soldakini
   sağdakinin alt kısmına ekleyelim, en alt olmasına gerek yok"*) — kurum
   başlığının hemen altında. Ayırıcı çizgi de yön değiştirdi: `border-top`
   üstteki bloğun altını çizmiyordu, blokla menü birbirine yapışıyordu.
   ⚠️ Taşıma **DOM'da** yapıldı, CSS `order` ile değil: `order` yalnız
   görüntüyü taşır, klavyeyle gezen kullanıcı blokları hâlâ eski sırada
   dolaşır ve odak ekranda yukarı aşağı zıplar. */
.yan-menu .alt {
  padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: 12.5px;
}
/* Menü altındaki bağlantılar — renk HTML'de değil burada (dosya başı kuralı). */
/* ⚠️ `nowrap` SÜS DEĞİL GÜVENLİK: bağlantı satır sonunda bölününce tıklama
   hedefi komşu bağlantının üstüne kayıyor. "İşlem geçmişim" bölünüp
   "Çıkış"ın dibine düşmüş ve kullanıcı yanlışlıkla oturumunu kapatmıştı
   (13 Eyl 2026 satıcı paneli test raporu). */
.yan-menu .alt a { margin-left: 2px; white-space: nowrap; }
.yan-menu .alt a:hover { color: #fff; }
/* Yıkıcı eylem kendi satırında ve diğerlerinden ayrı durur. */
/* ⚠️ `inline-block` YETMEDİ (ölçüldü): yeni satır zorlamıyor, Çıkış yine
   "İşlem geçmişim"in yanında kalıyordu. `block` + `max-content` hem satırı
   ayırır hem kutuyu metin kadar tutar. */
.yan-menu .alt .cikis-baglantisi {
  display: block; width: max-content; margin: 10px 0 0; padding: 3px 10px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 6px;
}

/* 🔴 **BLOK DERLİ TOPLU DURSUN** (kullanıcı, 19 Eylül 2026: *"burası çok
   dağınık duruyor, düzenle ya… düzgün durmalı"*). Blok yukarı taşınınca
   dağınıklığı görünür oldu: kullanıcı adı, üç bağlantı, bir başlık, bir
   açılır liste ve bir düğme **beş ayrı hizada** duruyordu.
   Yapılanlar — hepsi hizalama, bilgi çıkarılmadı:
     · ad kendi satırında ve **belirgin** (blokta kim olduğun ilk bilgidir),
     · üç bağlantı tek satırda, ayraç «·» yerine **boşluk** (nokta, satır
       sonuna düştüğünde bağlantının parçası gibi okunuyordu),
     · «ARAYÜZ TEMASI» etiketi küçülüp soluklaştı — o bir başlık değil,
       altındaki listenin etiketi,
     · seçici ile Çıkış **aynı satırda**: ikisi de tek satırlık kontrol ve
       alt alta durunca blok gereksiz uzuyordu. */
/* ⭐ **«AYARLAR» + ÇIKIŞ TEK SATIR** (kullanıcı, 21 Eyl 2026: *"güvenlik,
   parolam, işlem geçmişi, arayüz teması → ayarların içine; çıkış ayarların
   sağ tarafına"*). Ayarlar solda açılır (`<details>`), Çıkış sağ uçta ve
   çerçeveli — yıkıcı eylem ayrı kutuda (13 Eyl dersi). */
.yan-menu .alt .ayarlar-satiri {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.yan-menu .alt .ayarlar { flex: 1; min-width: 0; }
.yan-menu .alt .ayarlar > summary {
  cursor: pointer; list-style: none; padding: 3px 0; user-select: none;
  color: var(--yan-menu-alt-yazi);
}
.yan-menu .alt .ayarlar > summary::-webkit-details-marker { display: none; }
.yan-menu .alt .ayarlar > summary::after { content: " ▸"; font-size: 11px; }
.yan-menu .alt .ayarlar[open] > summary::after { content: " ▾"; }
.yan-menu .alt .ayarlar > summary:hover { color: #fff; }
.yan-menu .alt .ayarlar-icerik {
  display: flex; flex-direction: column; gap: 7px; padding: 8px 0 2px 10px;
  border-left: 1px solid rgba(255,255,255,.14); margin: 4px 0 0 4px;
}
.yan-menu .alt .ayarlar-icerik a { margin-left: 0; }
.yan-menu .alt .ayarlar-icerik .tema-secici { margin: 0; }
.yan-menu .alt .ayarlar-icerik select { width: 100%; }
/* Çıkış satır içinde: üstteki `block` kuralı geri alınır, kutu ve çerçeve
   (yıkıcı eylemin işareti) durur. */
.yan-menu .alt .ayarlar-satiri > .cikis-baglantisi {
  display: inline-block; margin: 0; flex-shrink: 0;
}
/* Etiket bir başlık değil, altındaki listenin etiketi: küçük ve soluk. */
.yan-menu .alt .tema-etiketi {
  display: block; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; opacity: .6; margin: 4px 0 -3px; cursor: pointer;
}
/* ⭐ Hesabın sahibi kurum ünvanının altında, küçük (21 Eyl 2026). */
.yan-menu .kurum .hesap-sahibi {
  display: block; margin-top: 6px; font-size: 12px; opacity: .72;
}
/* Uzun ticari ünvan (ör. «… ORTAK SAĞLIK GÜVENLİK BİRİMİ … LTD. ŞTİ.»)
   birkaç satıra sarar; yazı biraz küçülür ki menünün tepesini doldurmasın. */
.yan-menu .kurum b { line-height: 1.25; overflow-wrap: anywhere; }
.yan-menu .kurum b.uzun { font-size: 12.5px; }

/* ⚠️ İçerik dolgusu 22/26/40 → 14/20/20 (25 Eyl 2026, genel daraltma).
   Alttaki 40 px hiçbir işe yaramıyordu: sayfanın sonu zaten kaydırma
   bitişi. Yan boşluk 26 → 20; tabloların sağa soluna nefes payı kalıyor
   ama ekranın %7'si boşa gitmiyor. */
.icerik { flex: 1; min-width: 0; padding: 14px 20px 20px; }
/* ⚠️ Başlık şeridinin altındaki boşluk 18 → 12 px, bölüm başlıklarının
   üstü 26 → 16 px (25 Eyl 2026, genel daraltma). Uzun ekranlarda üç dört
   bölüm başlığı 40 px'lik boşluk demekti. */
.ust-satir {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
/* ⚠️ Aile ve boyut `.icerik h1`e DEĞİL buraya: o seçicinin özgüllüğü
   (0,1,1) sınıflı bir başlığın (`h1.belge-baslik`) kendi boyutunu ezerdi. */
h1 { font-family: var(--baslik-ailesi); font-size: var(--sayfa-basligi-boyut);
  font-weight: 600; margin: 0; }
h2 { font-size: 16px; font-weight: 600; margin: 16px 0 8px; }

/* ---------- Ana ekran uyum şeridi ----------
   ⚠️ Kullanıcı isteği (19 Ağustos 2026): beğendiği tasarımdaki üst özet
   şeridi. Sayılar `_uyum_ozeti`'nden gelir ve **yalnız uyum sinyali olan
   kartları** sayar; sinyalsiz modül "tamam" sayılsaydı ekran hiçbir şey
   yapılmamış müşteride %100 gösterirdi.
   ⚠️ Halkanın dolgusu `--oran` değişkeninden; sayı şablonda `localize off`
   ile basılıyor (Türkçe ayraç CSS'i bozar). */
.uyum-serit {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--zemin-yumusak) 0%,
    var(--zemin) 45%, var(--kart) 100%);
  border: 1px solid var(--cizgi);
  border-radius: 16px; padding: 14px 18px; margin: 0 0 16px;
  box-shadow: var(--golge);
}
.uyum-serit .halka {
  --oran: 0;
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.uyum-serit .halka span {
  width: 48px; height: 48px; border-radius: 50%; background: var(--kart);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--yazi);
}
.uyum-serit .serit-metin { display: flex; flex-direction: column; gap: 2px; }
.uyum-serit .serit-sayaclar { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.uyum-serit .sayac {
  min-width: 108px; padding: 8px 12px; border-radius: 12px;
  background: var(--kart); border: 1px solid var(--cizgi);
  display: flex; flex-direction: column; gap: 1px;
}
.uyum-serit .sayac .deger { font-size: 19px; font-weight: 700; line-height: 1.1; }
.uyum-serit .sayac .ad { font-size: 11.5px; color: var(--yazi-soluk); }
/* ⭐ **Sıkı şerit** (kullanıcı, 21 Eyl 2026: *"üst taraf çok yer kaplıyor,
   daralt"*). Bilgi aynı; iç boşluk, halka ve sayaç kutuları küçüldü
   (ölçüldü: 92 → 64 px). */
.uyum-serit { padding: 8px 14px; gap: 14px; margin-bottom: 12px; }
.uyum-serit .halka { width: 46px; height: 46px; }
.uyum-serit .halka span { width: 36px; height: 36px; font-size: 12.5px; }
.uyum-serit .sayac { padding: 4px 10px; min-width: 96px; }
.uyum-serit .sayac .deger { font-size: 17px; }
/* Sayaç renkleri kartlarla aynı anlam düzeninden gelir. */
.uyum-serit .sayac.yesil   { background: var(--yesil-yumusak); border-color: var(--yesil-cizgi); }
.uyum-serit .sayac.yesil .deger   { color: var(--yesil-yazi); }
.uyum-serit .sayac.sari    { background: var(--sari-yumusak); border-color: var(--sari-cizgi); }
.uyum-serit .sayac.sari .deger    { color: var(--sari-yazi); }
.uyum-serit .sayac.kirmizi { background: var(--kirmizi-yumusak); border-color: var(--kirmizi-cizgi); }
.uyum-serit .sayac.kirmizi .deger { color: var(--kirmizi-yazi); }

@media (max-width: 900px) {
  .uyum-serit .serit-sayaclar { margin-left: 0; width: 100%; }
  .uyum-serit .sayac { flex: 1; min-width: 0; }
}

/* ---------- Sayı kutuları (rapor ekranları) ---------- */
/* 🔴 **KUTULAR ÇOK YER KAPLIYORDU** (kullanıcı, 19 Eylül 2026: *"kutular çok
   yer kaplıyor, bayağı bir küçült… ekrana baktığımda her şeyi
   görebilmeliyim"*). Rapor ekranları modül kartıyla **aynı** `.kart`
   sınıfını kullanıyordu; o kart bir **gezinme aracı** (büyük dokunma alanı,
   gölge, hover animasyonu, sağdaki ok), buradakiler ise tıklanamayan birer
   **sayı kutusu**. On bir grup × 4-6 kutu, ekranın birkaç katı yer tutuyordu.
   ⚠️ `.kart`ın kendisi küçültülmedi: ana ekranın kartları ve "Modül ekle"
   ekranı tıklanan yüzeylerdir, onları daraltmak dokunmayı zorlaştırırdı.
   Ayrım sınıfla yapılıyor — `.kartlar.sayilar`. */
.kartlar.sayilar {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 7px;
}
.sayilar .kart {
  padding: 6px 9px 7px; border-radius: 8px; border-top-width: 2px;
  box-shadow: none; transition: none;
}
/* Tıklanamayan kutuda hover **yanıltıcıdır**: kullanıcı tıklanır sanır. */
.sayilar .kart:hover {
  transform: none; box-shadow: none; border-color: var(--cizgi);
}
.sayilar .kart::after { content: none; }
/* Sayı okunur kalmalı — küçülen şey kutu, rakam değil. */
.sayilar .kart .ad { font-size: 15px; margin-bottom: 0; line-height: 1.2; }
.sayilar .kart .durum { font-size: 11px; line-height: 1.25; }

/* Yıllık değerlendirme raporunun çalışma tablosu (19 Eyl 2026).
   ⚠️ Girdiler hücreyi TAM doldurur: sabit genişlik verilseydi yedi sütunlu
   tablo yatay kaydırmaya düşer, uzman satırın sonunu göremezdi. */
.calisma-tablosu input { width: 100%; box-sizing: border-box; font-size: 12.5px; }
.calisma-tablosu input[type="number"] { width: 70px; }
.calisma-tablosu td { vertical-align: top; }

/* Grup başlığındaki «tümü» kutucuğu (konu seçimi, 19 Eyl 2026).
   ⚠️ Başlık `<legend>` — küçük ve BÜYÜK HARFLİ; kutucuk onun ağırlığını ve
   harf aralığını devralırsa "tümü" bir başlık gibi okunur. Burada normal
   yazıya dönüyor. */
.grup-tumu {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 10px;
  font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none;
  color: var(--yazi-soluk); cursor: pointer; vertical-align: middle;
}
.grup-tumu:hover { color: var(--yazi); }

/* ---------- Ana ekrandaki katlanır evrak uyum bloğu ---------- */
/* ⚠️ Kapalıyken **bir satır** yer kaplar: açık dururken 13 sütunlu tablo
   ana ekranın altını dolduruyordu (19 Eyl 2026 kullanıcı isteği). */
.uyum-blok {
  margin: 26px 0 0; border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); background: var(--kart);
}
.uyum-blok > summary {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 12px 14px; font-weight: 600; font-size: 15px;
  border-radius: var(--yuvarlak);
}
/* Üçgen ok kalıyor (açık/kapalı durumu onunla okunuyor); `display:flex`
   işaretçiyi satır dışına attığı için boyutu burada ayarlanıyor. */
.uyum-blok > summary::marker { font-size: 12px; }
.uyum-blok > summary:hover { background: var(--vurgu-yumusak); }
.uyum-blok-ikon { font-size: 17px; line-height: 1; }
.uyum-blok-ad { margin-right: auto; }
.uyum-blok-govde { padding: 0 14px 14px; }

/* ---------- Modül kartları ---------- */
/* ⚠️ Kart arası 12 → 9 px (25 Eyl 2026, genel daraltma). Sekiz sütunlu
   ızgarada satır başına 21 px, üç satırda 63 px kazanç. */
.kartlar {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

/* ⚠️ ANA EKRAN IZGARASI **BEŞLİ** (kullanıcı isteği, 18 Ağustos 2026).
   Yalnız ana ekranın ızgarası sabitlenir; `.kartlar` sınıfını rapor ekranları
   da kullanıyor ve oradaki kutular sayı kutusudur, modül kartı değil.
   Sayı neden sabit: `auto-fill` sütun sayısını pencere genişliğinden
   türetiyordu, aynı ekran 4 ile 6 sütun arası gidip geliyordu. Kartın yerini
   ezberleyen kullanıcı için sütun sayısının değişmesi, düzenin değişmesidir.
   `minmax(0, 1fr)`: sıfır taban olmadan uzun modül adı sütunu şişirir ve beş
   sütun taşar. */
/* ⚠️ **BEŞ → SEKİZ (kullanıcı isteği, 15 Eylül 2026):** *"şu anda ekranda
   beş ya da altı tane sunuyor, bir sırada onu sekize çıkartacaksın."*
   Sütun sayısı SABİT kalmaya devam ediyor (yukarıdaki gerekçe geçerli);
   yalnız sayı değişti. Geniş ekranda 20 modül üç satır yerine üç kısa
   satıra sığıyor ve alt sıraya kaydırmadan hepsi görünüyor. */
#kart-izgarasi { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* Beş sütun aynı yere sığdığı için ana ekran kartı bir tık ufalır.
   Ölçüler yalnız bu ızgarada geçerli — "Modül ekle" ekranındaki kartlar ve
   rapor kutuları eski boyutunda kalır. */
/* ⭐ Kart yüksekliği %15 kısaldı (kullanıcı, 21 Eyl 2026: *"modüllerin
   yüksekliklerini yüzde on beş küçült"*). Ölçüldü (1600 px): 142 → 121 px.
   Yazı boyutu küçülmedi — kısalan iç boşluk, ikon kutusu ve satır aralığı. */
#kart-izgarasi .kart { padding: 9px 12px 12px; }
#kart-izgarasi .kart-ikon { font-size: 17px; width: 30px; height: 30px;
  margin-bottom: 4px; border-radius: 9px; }
#kart-izgarasi .kart .ad { font-size: 13.5px; line-height: 1.2; margin-bottom: 2px; }
#kart-izgarasi .kart .durum { font-size: 12px; line-height: 1.25; }
#kart-izgarasi .kart .rozet { font-size: 10.5px; padding: 2px 8px; margin-left: 6px; }
#kart-izgarasi .kart.ekle { min-height: 72px; }

/* Beşli düzen ancak sütun okunur genişlikte kalırken sürer: 150 px'in
   altında modül adı üç satıra bölünüyor ve kart bilgi vermez oluyor.
   1100 px proje genelindeki kırılma noktasıdır (bkz. isgbys-form.css). */
/* ⚠️ Sekiz sütun ancak GENİŞ ekranda okunur. Basamaklar ölçüldü: kart
   içeriği (simge + ad + durum) 150 px'in altında üç satıra bölünüyor ve
   kart bilgi vermez oluyor. Kırılmalar sütun genişliği ~155 px'in altına
   düşmeden önce devreye girer. */
/* ⚠️ **1700 → 1580 (kullanıcı isteği, 19 Eyl 2026):** *"ana ekrandaki
   gözüken modül sayısını bir sırada 8'e çıkar."* Sayı zaten sekizdi; onu
   yedide tutan **bu basamaktı** — 1597 px'lik ekran 1700'ün altında kalıyor
   ve sekizli düzen hiç görünmüyordu.
   🔴 **Yeni eşik ölçülerek seçildi, tahminle değil.** 1600 px pencerede
   ızgara 1301 px: sekiz sütunda sütun **152 px** (yedide 176 px). Tarayıcıda
   ölçüldü: sekiz sütunda da en uzun modül adı **iki satır**, üç satıra
   bölünen kart **sıfır**, taşan kart **sıfır**, kart yüksekliği değişmiyor
   (111 px). Yani 150 px korkusu 152'de gerçekleşmiyor.
   ⚠️ 1580'in altında yediye düşülür: 8 × 150 + 7 × 12 boşluk = 1284 px
   ızgara gerekir, buna yan menü eklenince pencere ~1583 px eder. */
@media (max-width: 1580px) { #kart-izgarasi { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 1500px) { #kart-izgarasi { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1300px) { #kart-izgarasi { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) { #kart-izgarasi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { #kart-izgarasi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { #kart-izgarasi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 🔴 **MENÜ KATLIYKEN EŞİKLER 232 px AŞAĞI KAYAR** (kullanıcı bildirimi,
   25 Eyl 2026: *"Güzel 7 tane var. Ama ben 8 tane olsun demiştim."*).

   Ölçülen sebep: yukarıdaki eşikler **viewport** genişliğine bakıyor ve
   yan menünün 232 px'ini hep varmış gibi sayıyor. Menü katlanınca o yer
   içeriğe geçiyor ama medya sorgusu bunu göremiyor — 1400 px'lik bir
   pencerede kartlar sekize rahat sığdığı hâlde yediye düşüyordu.

   ⚠️ Seçici `#kart-izgarasi`den **daha özgül** (id + sınıf), bu yüzden
   yukarıdaki medya kurallarını eziyor; sıraya değil özgüllüğe güveniliyor.
   🔴 **ÜST EŞİK DE YAZILMAK ZORUNDA** (ölçüldü): yalnız alt eşikler
   yazıldığında 1400 px'lik pencerede hiçbir `.menu-katli` kuralı eşleşmiyor
   ve genel `max-width: 1500px` kuralı devreye girip **altı** sütun
   basıyordu. Medya sorgusuz temel kural sekizi kurar, alttakiler kırar.
   ⚠️ 720 px altı yazılmadı: orada menü zaten çekmece, `menu-katli` sınıfının
   etkisi yok ve üstteki eşikler doğru çalışıyor. */
.menu-katli #kart-izgarasi { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1348px) { .menu-katli #kart-izgarasi { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 1268px) { .menu-katli #kart-izgarasi { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1068px) { .menu-katli #kart-izgarasi { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 868px)  { .menu-katli #kart-izgarasi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ⚠️ "MODÜL EKLE" IZGARASI **ALTILI** (kullanıcı isteği, 20 Ağustos 2026).
   Ana ekranınki beşli kalır — ikisi ayrı ekran ve bu ekranda kart **seçim
   listesidir**, yerini ezberlenen bir düzen değil; tek bakışta hepsinin
   görünmesi daha değerli.
   `auto-fill` bırakılsaydı sütun sayısı yine pencereden türerdi (bu ekran
   1811 px'te 4 basıyordu) — ana ekranda sabitlemenin gerekçesi burada da
   geçerli. `minmax(0, 1fr)`: sıfır taban olmadan uzun modül adı sütunu
   şişirir ve altı sütun taşar. */
#modul-ekle-izgarasi { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Altı sütun beşten dar; kart ana ekrandakiyle aynı ölçülere iner.
   ⚠️ Değerler `#kart-izgarasi` ile birebir aynı — iki ızgara aynı kartı
   gösteriyor, biri değişip öteki kalsaydı "ekleyeceğim kart ana ekranda
   nasıl görünecek" sorusuna ekran farklı cevap verirdi. */
#modul-ekle-izgarasi .kart { padding: 9px 12px 12px; }
#modul-ekle-izgarasi .kart-ikon { font-size: 17px; width: 30px; height: 30px;
  margin-bottom: 4px; border-radius: 9px; }
#modul-ekle-izgarasi .kart .ad { font-size: 13.5px; line-height: 1.2; margin-bottom: 2px; }
#modul-ekle-izgarasi .kart .durum { font-size: 12px; line-height: 1.25; }
#modul-ekle-izgarasi .kart .rozet { font-size: 10.5px; padding: 2px 8px; margin-left: 6px; }

/* Daralınca ana ekranın basamaklarına oturur; 1400 px'in altında altı sütun
   modül adını üç satıra bölüyor. */
@media (max-width: 1400px) { #modul-ekle-izgarasi { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) { #modul-ekle-izgarasi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { #modul-ekle-izgarasi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { #modul-ekle-izgarasi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ⚠️ **KART GÖRÜNÜMÜ YUMUŞATILDI — 19 Ağustos 2026 (kullanıcı isteği).**
   *"Modüllerin şekli buradaki gibi olsun ama renkler yine kırmızı, sarı /
   turuncu, yeşil ve beyaz. Buradaki kırmızı daha yumuşak — bizimki gibi sert
   değil."*

   Değişen YALNIZ stildir: sınıf adları (`yesil`/`sari`/`kirmizi`), rozet
   metni ve şablon mantığı aynı kaldı. Renk hâlâ **anlamdır**:
   yeşil=güncel · sarı=süresi yaklaşıyor · kırmızı=eksik.

   ⚠️ Anlam **renge tek başına yüklenmedi**: rozet metni ("3 eksik" / "tamam")
   duruyor. Yumuşayan zemin, rengi göremeyen kullanıcıda bilgi kaybına yol
   açmaz.

   ⚠️ Zemin yumuşadı ama **şerit koyu kaldı**: kırmızıyı tamamen soluklaştırmak
   geciken evrakı göz ucuyla görünmez yapardı ("neşeli görünsün diye kırmızıyı
   yumuşatmak, geciken evrakı gizlemek olur" — dosya başındaki kural). */
.kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 14px; padding: 15px 16px 16px;
  display: block; color: inherit; text-decoration: none;
  border-top: 3px solid var(--mavi-acik);
  box-shadow: var(--golge);
  transition: transform .12s ease, box-shadow .12s ease;
  position: relative;
}
.kart:hover {
  text-decoration: none; border-color: var(--cizgi-koyu);
  transform: translateY(-2px); box-shadow: var(--golge-hover);
}
/* İkon, örnekteki gibi yuvarlak köşeli bir kutunun içinde durur. */
.kart-ikon {
  font-size: 19px; line-height: 1;
  width: 38px; height: 38px; margin-bottom: 9px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
}
.kart .ad { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.kart .durum { font-size: 12.5px; color: var(--yazi-soluk); }
.kart .rozet {
  float: right; font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: 999px;
}
/* Örnekteki "→" — kartın tıklanabilir olduğunu söyler. Yalnız süs olduğu
   için `aria-hidden` gerekmez: `content` ekran okuyucuya okunmaz. */
.kart::after {
  content: "→"; position: absolute; right: 14px; bottom: 12px;
  font-size: 13px; color: var(--yazi-soluk); opacity: .55;
  transition: transform .12s ease, opacity .12s ease;
}
.kart:hover::after { transform: translateX(3px); opacity: 1; }
.kart.ekle::after { content: none; }

/* ⚠️ Üç durum rengi ANLAM taşır (bkz. dosya başı). Zeminler yumuşak bir
   geçişle beyaza akıyor; eşleşmeler değişmedi. */
.kart.yesil {
  border-top-color: var(--yesil-cizgi);
  background: linear-gradient(150deg, var(--yesil-yumusak) 0%, var(--kart) 72%);
}
.kart.yesil .kart-ikon { background: var(--yesil-zemin); }
.kart.yesil .rozet { background: var(--yesil-zemin); color: var(--yesil-yazi); }
.kart.sari {
  border-top-color: var(--sari-cizgi);
  background: linear-gradient(150deg, var(--sari-yumusak) 0%, var(--kart) 72%);
}
.kart.sari .kart-ikon { background: var(--sari-zemin); }
.kart.sari .rozet { background: var(--sari-zemin); color: var(--sari-yazi); }
.kart.kirmizi {
  border-top-color: var(--kirmizi-cizgi);
  background: linear-gradient(150deg, var(--kirmizi-yumusak) 0%, var(--kart) 72%);
}
.kart.kirmizi .kart-ikon { background: var(--kirmizi-zemin); }
.kart.kirmizi .rozet { background: var(--kirmizi-zemin); color: var(--kirmizi-yazi); }

/* Renksiz kartlar tek tip kalmasın: sıraya göre dönen vurgu şeridi.
   Yalnız görsel — hiçbir anlam taşımaz, durum renkleri her zaman üstün gelir.
   ⚠️ **BU BLOK SİLİNMEZ — ölü değildir (25 Ağu 2026'da ölçüldü).** Kartların
   SARMALAYICISIZ dizildiği 13 ekranda (raporlar, İSG-KATİP, CRM hunisi,
   özlük paneli…) dönüşü hâlâ bu kural sağlıyor; kardeş kartlarda sayaç
   doğru işler. Kural yalnız ANA EKRANDA çalışmıyordu — orada her kart kendi
   `div.kart-sarma`sında tek `<a>` ve sayaç hep 1. Onun onarımı aşağıda,
   tema bölümündeki `.kart-sarma:nth-of-type` kuralları (özgüllükleri daha
   yüksek olduğu için sarmalı ekranda bunları ezerler). */
.kart:nth-of-type(6n+1) { border-top-color: var(--mavi); }
.kart:nth-of-type(6n+2) { border-top-color: var(--mor); }
.kart:nth-of-type(6n+3) { border-top-color: var(--turkuaz); }
.kart:nth-of-type(6n+4) { border-top-color: var(--turuncu); }
.kart:nth-of-type(6n+5) { border-top-color: var(--pembe); }
.kart:nth-of-type(6n+6) { border-top-color: var(--mavi-acik); }
.kart.yesil, .kart.sari, .kart.kirmizi { border-top-width: 4px; }
.kart.yesil   { border-top-color: var(--yesil-cizgi) !important; }
.kart.sari    { border-top-color: var(--sari-cizgi) !important; }
.kart.kirmizi { border-top-color: var(--kirmizi-cizgi) !important; }

.kart.ekle {
  border: 1px dashed var(--cizgi-koyu); background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--yazi-soluk); min-height: 78px; border-top-style: dashed;
  border-top-color: var(--cizgi-koyu);
}

/* Kartı kaldırma — dokunmatikte de görünsün diye gizlenmez, soluk durur. */
.kart-sarma { position: relative; display: flex; }
.kart-sarma > .kart { flex: 1; }

/* "Modül ekle" ekranında kart bir <button>'dur (form gönderir). Tarayıcının
   düğme varsayılanlarını sıfırla ki ana ekrandaki kartla **aynı** görünsün. */
button.kart {
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  position: relative;
}

/* Ana ekran ızgarasında sürükleyerek sıralama.
   ⚠️ İmleç yalnız betik yüklendiğinde `grab` olur (`.suruklenebilir` sınıfını
   betik ekler): betiksiz tarayıcıda sürüklenebilir görünüp sürüklenmeyen bir
   kart, kullanıcıya bozuk ekran hissi verirdi. */
.kartlar.suruklenebilir .kart-sarma { cursor: grab; }
.kartlar.suruklenebilir .kart-sarma:active { cursor: grabbing; }
.kart-sarma.suruklenen { opacity: .45; }
.kart-sarma.suruklenen .kart { border-style: dashed; }
/* ⚠️ Sürükleme sırasında metin seçilmesin: seçili metin, tarayıcının kendi
   sürükleme görüntüsünü tetikliyor ve kart takip etmiyormuş gibi görünüyor. */
.kartlar.suruklenebilir .kart-sarma { user-select: none; -webkit-user-select: none; }
/* ⭐ **TIKLANAN ŞEY GÖRÜLMELİ (19 Eyl 2026).** Saydamlık .5 idi: `--yazi-soluk`
   kart zemininde .5 ile karışınca etkin kontrast beş temada 1,92-2,91'e
   düşüyordu (ölçüldü) — kaldırma düğmesi bir **düğme**, eşiği 3,0. .70
   sınırda kalıyordu (en kötü tema 3,01), .75 seçildi: en kötü 3,33.
   Üstüne gelince yine tam opak oluyor (aşağıdaki kural). */
.kart-kaldir { position: absolute; right: 8px; bottom: 7px; opacity: .75; }
.kart-sarma:hover .kart-kaldir, .kart-kaldir:focus-within { opacity: 1; }
.kart-kaldir button {
  width: 22px; height: 22px; padding: 0; line-height: 1; font-size: 14px;
  border: 1px solid var(--cizgi-koyu); border-radius: 6px;
  background: var(--kart); color: var(--yazi-soluk); cursor: pointer;
}
.kart-kaldir button:hover { color: var(--kirmizi-yazi); border-color: var(--kirmizi-cizgi); }
.kart-kilit {
  position: absolute; right: 10px; bottom: 8px;
  font-size: 11px; color: var(--yazi-soluk);
}

/* ---------- Tablo ---------- */
.tablo { width: 100%; border-collapse: collapse; background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); overflow: hidden; }
/* 🔴 **SATIR DOLGUSU DARALTILDI** (kullanıcı, 25 Eyl 2026: *"liste hâlinde
   olan bütün şeylerin arasında çok fazla boşluk var… satırla alt satır
   arasındaki bütün alanları daralt"*).
   Ölçülen: `td` 10 px üst + 10 px alt = her satırda 20 px yalnız dolgu.
   27 satırlık işyeri listesinde 540 px, yani bir ekran boyu.
   Yeni: 6 px (satır başına 8 px kazanç). Başlık 11 → 7 px.
   ⚠️ Yazı boyutu **küçültülmedi**: boşluğu almak okunaklılığı bozmaz,
   punto düşürmek bozar (menüde de aynı karar verildi).
   ⚠️ Yan dolgu (12 px) **korundu** — sütunların birbirine yapışması
   okumayı dikey boşluktan daha çok zorlaştırır. */
.tablo th {
  text-align: left; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 7px 12px;
}
/* ⚠️ **`line-height` de daraltıldı — ama ÖLÇÜLEREK.** Bu programın
   tablolarında hücrelerin çoğu **çok satırlı** (ad + altında soluk künye,
   işlem bağlantıları, uyarı satırları) ve orada asıl yeri satır aralığı
   yiyor.

   🔴 **İlk deneme 1.35'ti ve satırı BÜYÜTTÜ.** Chrome'un `normal` değeri
   13,5 px puntoda 1.3 civarı; 1.35 yazmak daraltma değil **genişletme**
   oluyordu. Aynı satır üzerinde ölçüldü (eğitim listesi, tek satır):
   `normal` 101 px · `1.35` 104 · `1.3` 101 · `1.25` 98 · `1.2` 94.
   ⚠️ 1.2 daha çok kazandırıyor ama Türkçe'nin şapkalı/noktalı harfleri
   (Ğ, İ, ş) sıkışmaya başlıyor — **1.25 seçildi**. */
.tablo td {
  padding: 6px 12px; border-bottom: 1px solid var(--cizgi);
  font-size: 13.5px; line-height: 1.25;
}

/* Puan hücresi — sayı tek satırda, renk anlamdan gelir.
   ⚠️ Kullanıcı bildirimi (19 Ağu 2026): *"orta kısım güzel durmuyor"*.
   Hücrede tam cümle vardı ("2500 · Çok yüksek — iş durdurulmalı") ve dar
   sütunda üç satıra bölünüyordu. Cümle `title`'a taşındı; sayı kaldı.
   ⚠️ Renkler uyum düzeninden: yeşil/sarı/kırmızı anlamı taşımaya devam
   ediyor, yalnız zemin yumuşadı (kart tasarımıyla aynı ton ailesi). */
.skor-hucre { white-space: nowrap; }
.skor-rozet {
  display: inline-block; min-width: 54px; text-align: center;
  padding: 5px 9px; border-radius: 9px;
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
  background: var(--zemin); color: var(--yazi-soluk);
}
.skor-rozet.yesil   { background: var(--yesil-yumusak);   color: var(--yesil-yazi); }
.skor-rozet.sari    { background: var(--sari-yumusak);    color: var(--sari-yazi); }
.skor-rozet.kirmizi { background: var(--kirmizi-yumusak); color: var(--kirmizi-yazi); }

/* ⭐ **ÖNLEM SONRASI (hedef) rozeti** — 15 Eylül 2026, kullanıcı isteği:
   *"öncesi sonrası değerlendirmesi… o renkler gözükmeli."*

   ⚠️ **Hedef, ölçüm DEĞİLDİR.** Bu sayı "önlem alınırsa risk buraya düşer"
   der; düştüğünü söylemez (modeldeki kayıtlı uyarının aynısı). Bu yüzden
   rozet mevcut puanla **aynı renkte ama farklı dokuda**: kesikli çerçeve ve
   hafif saydamlık. Birebir aynı basılsaydı denetimde iki sayı eşit ağırlıkta
   okunur, "risk zaten düşük" sanılırdı.
   ⚠️ Renk ölçeği ortak: ikinci bir eşik tablosu YOK. */
.skor-rozet.sonrasi {
  border: 1px dashed currentColor;
  opacity: .82;
  min-width: 48px;
}
.skor-ok {
  display: inline-block; margin: 0 3px;
  color: var(--yazi-soluk); font-weight: 700; font-size: 13px;
}
/* Derece, sayının **altında ve çok küçük** (kullanıcı isteği, 19 Ağu 2026).
   ⚠️ `nowrap` burada kalkar: iki kelimelik derece ("Kabul edilemez") tek
   satıra sığmazsa alt satıra insin — kırpılması bilgi kaybı olurdu. */
.skor-rozet small {
  display: block; margin-top: 1px;
  font-size: 9.5px; font-weight: 600; line-height: 1.15;
  letter-spacing: .01em; opacity: .85; white-space: normal;
}

/* Satır eylem hücresi — tek düğme + küçük bağlantı, alt alta ve dar.
   ⚠️ Kullanıcı bildirimi (19 Ağu 2026): *"ekran çok karışık duruyor"*.
   Hücrede üç denetim vardı; ikisi kaldırıldı, kalan ikisi hizalandı. */
/* 🔴 **HÜCRE İÇİ İŞLEMLER YAN YANA** (kullanıcı, 25 Eyl 2026: *"sağda
   sonlandır/devret kısımları olduğu için boşluk oluşuyor… üstte olmasına
   gerek yok, bir sürü boşluk var"* ve *"genel olarak kontrol et böyleleri
   varsa düzenle, tek tek söylememe gerek yok"*).

   Ölçülen sebep: `.satir-eylem` sınıfı şablonda kullanılıyordu ama **CSS'te
   hiç tanımlı değildi**; `<form>` blok öğe olduğu için her işlem kendi
   satırına düşüyor ve görevlendirme satırı iki katına çıkıyordu.

   ⚠️ `inline-flex` + `flex-wrap` bilinçli: yer varsa yan yana, dar ekranda
   alt alta. Sabit `inline-block` dar sütunda taşmaya yol açardı.
   ⚠️ Aynı desen hücrede kaç işlem olursa olsun çalışır — yeni bir düğme
   eklendiğinde kimsenin CSS yazması gerekmiyor. */
.satir-eylem {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0; vertical-align: middle;
}
.satir-eylem + .satir-eylem { margin-left: 4px; }
/* ⭐ İşlem düğmesinin **yanındaki** açıklama (hedef e-posta adresi gibi).
   25 Eyl 2026'ya kadar `<div>` idi, yani düğmenin altına düşüyor ve her
   satırı iki katına çıkarıyordu — kullanıcı: *"mail'i yan tarafa"*.
   ⚠️ Bilgi **kaldırılmadı, yanına alındı**: "bu posta nereye gidiyor?"
   düğmeye basmadan önce sorulan sorudur (şablondaki gerekçe). */
.hesap-adres { margin-left: 6px; white-space: nowrap; }
/* 🔴 **HÜCRE SARMAZ — sütun genişler** (ölçüldü, 25 Eyl 2026). Önce
   `white-space: normal` yazılmıştı ve iki form yine alt alta düşüyordu
   (37 px fark ölçüldü): hücre dar olduğu için satır kırılıyordu. `nowrap`
   ile formlar yan yana kalıyor, tablo yerleşimi de yeri **işyeri
   sütunundan** alıyor — kullanıcının istediği buydu: *"görevi biraz sola
   kaydırsan ya da başlangıçları sıkıştırsan yer açılır"*. */
.tablo td:has(> .satir-eylem) { white-space: nowrap; }
/* Uzun işyeri unvanı sütunu şişirmesin: sarar, gerekirse iki satır olur —
   ama işlem düğmelerini alta itmez. */
.tablo td:has(> .satir-eylem) ~ td,
.tablo td:first-child { white-space: normal; }

.tablo td.satir-islem { white-space: nowrap; text-align: right; }
.tablo td.satir-islem .dugme { padding: 3px 9px; font-size: 12.5px; }
/* ⚠️ İşlem bağlantıları alt alta dizilir (dar sütun); aralık 3 → 1 px
   (25 Eyl 2026). Beş bağlantılı bir hücrede 8 px kazandırıyor. */
.tablo td.satir-islem a { display: block; margin-top: 1px; }
.tablo tr:last-child td { border-bottom: none; }
/* 🔴 **QA-11 (P2, 25 Eyl 2026 test raporu): 20 SAYFADA YATAY TAŞMA.**
   Rapor kök nedeni izole edememişti; ölçüldü (390 px, `/risk/yeni/`):
   sarmalayıcı `overflow-x: auto` olmasına rağmen **790 px tablo**
   ebeveyni genişletiyor, belge 827 px'e yayılıyordu.

   Sebep `<fieldset>`: tarayıcı ona varsayılan olarak `min-width: min-content`
   verir ve bu değer içeriğin en geniş öğesine göre büyür. Fieldset büyüyünce
   içindeki `overflow: auto` hiçbir şey yapmaz — kaydıracak bir taşma kalmaz,
   kutu zaten içeriği kadar geniştir.

   ⚠️ `min-width: 0` **yalnız fieldset'e** yazıldı: genel bir kural bütün
   esnek kutuların büzülmesine yol açardı.
   ⚠️ `max-width: 100%` sarmalayıcıya: ebeveyn düzeldikten sonra tablonun
   kendi sınırını da açıkça söylemek gerekiyor, yoksa grid/flex bağlamında
   yine taşabiliyor. */
fieldset { min-width: 0; }
.sarma { overflow-x: auto; max-width: 100%; }

/* ---------- Durum işaretleri ---------- */
.isaret {
  display: inline-block; width: 20px; height: 20px; line-height: 20px;
  text-align: center; border-radius: 50%; font-size: 12px; font-weight: 700;
}
.isaret.yesil   { background: var(--yesil-cizgi);   color: var(--yesil-uzeri-yazi); }
.isaret.sari    { background: var(--sari-cizgi);    color: var(--sari-uzeri-yazi); }
.isaret.kirmizi { background: var(--kirmizi-cizgi); color: var(--kirmizi-uzeri-yazi); }

.etiket {
  font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 999px;
}
.etiket.yesil   { background: var(--yesil-zemin);   color: var(--yesil-yazi);
                  border-color: var(--yesil-cizgi); }
.etiket.sari    { background: var(--sari-zemin);    color: var(--sari-yazi);
                  border-color: var(--sari-cizgi); }
.etiket.kirmizi { background: var(--kirmizi-zemin); color: var(--kirmizi-yazi);
                  border-color: var(--kirmizi-cizgi); }

/* ⚠️ Rozet dar hücrede iki satıra bölününce hap görünümü bozulur: yuvarlak
   uçlar ortada kalır, dolgu üst satırda asılı durur («eksiği var» → «eksiği»
   / «var», 19 Eyl 2026). Kural `.etiket`in TAMAMINA verilmedi: 137 şablonda
   486 rozet var ve bir kısmı uzun cümle taşıyor («… üyenin eğitimi
   girilmemiş»); onlara nowrap dar hücrede TAŞMA üretirdi, bölünmeden kötü.
   Bu yüzden bölünmezlik, kısa durum rozetine tek tek verilir. */
.etiket.tek-satir { white-space: nowrap; }

.soluk { color: var(--yazi-soluk); }
.kucuk { font-size: 12.5px; }

/* ---------- Form ---------- */
select, input[type=text], input[type=email], input[type=password], input[type=date] {
  font: inherit; padding: 8px 10px; border: 1px solid var(--cizgi-koyu);
  border-radius: 7px; background: var(--kart); color: var(--yazi);
}
.dugme {
  font: inherit; font-weight: 600; padding: 9px 18px; border: 0;
  border-radius: 9px; cursor: pointer;
}
.dugme.sade {
  background: var(--kart); color: var(--yazi); border: 1px solid var(--cizgi-koyu);
  box-shadow: none;
}
.dugme.sade:hover { filter: none; }

/* ---------- Giriş ---------- */
.giris-sayfa {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
}
.giris-kutu {
  background: var(--kart); padding: 30px 32px; border-radius: 16px; width: 360px;
  border-top: 5px solid var(--mor);
}
.giris-kutu h1 { margin-bottom: 4px; }
.giris-kutu .alt-yazi { color: var(--yazi-soluk); font-size: 13px; margin-bottom: 20px; }
.giris-kutu label { display: block; font-size: 13px; margin: 12px 0 5px; }
.giris-kutu input { width: 100%; }
.giris-kutu .dugme { width: 100%; margin-top: 20px; padding: 10px; }
.hata { background: var(--kirmizi-zemin); color: var(--kirmizi-yazi);
  padding: 9px 12px; border-radius: 7px; font-size: 13px; margin-top: 14px; }

/* ---------- Boş durum ---------- */
.bos {
  background: var(--kart); border: 1px dashed var(--cizgi-koyu);
  border-radius: var(--yuvarlak); padding: 34px; text-align: center; color: var(--yazi-soluk);
}

/* Sayfalama */
.sayfalama { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; font-size:13px; flex-wrap:wrap; }
.sayfalama a { margin:0 5px; }

/* ---------- Ziyaret gündemi ---------- */
.gundem-kutu {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-left: 3px solid var(--mavi);
  border-radius: var(--yuvarlak); padding: 14px 16px; margin: 18px 0;
}
.gundem-liste { list-style: none; margin: 0; padding: 0; }
.gundem-liste li { padding: 6px 0; border-bottom: 1px solid var(--cizgi); font-size: 13.5px; }
.gundem-liste li:last-child { border-bottom: 0; }

/* ---------- Firma (müşteri) bağlam çubuğu ---------- */
/* ⚠️ **İKİ SATIR (14 Eyl 2026).** Önce tek sıraydı ve sekiz bilgi aynı
   ağırlıkta yan yana diziliyordu — kullanıcı "karışık duruyor" dedi.
   Bilgi çıkarılmadı, SIRADÜZEN kondu: üstte kimlik, altta künye. */
/* ⭐ Sıkıştırıldı (kullanıcı, 21 Eyl 2026: *"üst taraf biraz karışık, çok
   yer kaplıyor, daralt"*). İki satırlık sıradüzen (14 Eyl kararı) KORUNDU;
   küçülen boşluklar ve amblem: 84 → 67 px (ölçüldü, demo firma). */
.firma-cubugu {
  border-radius: var(--yuvarlak);
  padding: 6px 12px; margin-bottom: 10px; font-size: 13.5px;
}
.firma-satir-kimlik {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.firma-ad { font-size: 14px; }
.firma-ad b { font-size: 15px; }
/* İşlemler sağa yaslanır; `margin-left:auto` ile — sabit genişlik verilseydi
   uzun firma adında çakışırdı. */
.firma-islem { margin-left: auto; display: flex; gap: 12px; align-items: center; }

/* ⭐ **İki amblem: solda müşteri, sağda kurum** (15 Eylül 2026).
   ⚠️ **Yükseklik SABİT, genişlik serbest**: kurumların yüklediği PNG'ler
   3000px olabiliyor ve çubuk tek satır — sınırsız bırakılsaydı tek bir
   büyük logo ekranın yarısını kaplardı. `object-fit: contain` oranı korur,
   kırpmaz; logo kırpılırsa kurum kimliği bozulmuş olur.
   ⚠️ `max-width` de var: çok geniş yatay logolar firma adını ezmesin. */
.firma-amblem {
  height: 22px; max-width: 110px; width: auto;
  object-fit: contain; vertical-align: middle;
  align-self: center;
}
.firma-amblem.kurum { height: 20px; opacity: .92; }
/* ⚠️ Bağlantı rengi `--vurgu-metin`: marka rengi (`--mavi`) firma zemininde
   yazı olarak 3,25 ölçüldü (17 Eyl 2026, «müşteri değiştir», 202 ekran). */
.firma-cubugu a { color: var(--vurgu-metin); font-size: 13px; }
.firma-islem a:last-child { color: var(--yazi-soluk); }

/* Künye ikinci satırda, küçük ve soluk. Ayraç: her `span` kendi anlamını
   taşır, nokta onları ayırır. ⚠️ Seçici `.firma-satir-kunye > span + span`
   olmalı — eski `.firma-cubugu > span` artık iç içe yapıda eşleşmiyor. */
.firma-satir-kunye {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 3px; padding-top: 3px;
  border-top: 1px dashed var(--firma-cizgi);
}
.firma-satir-kunye > span + span::before {
  content: "· "; color: var(--yazi-soluk);
}
.firma-hizmet { display: inline-flex; align-items: center; gap: 5px; }

/* Çubuğun altındaki serbest açıklama ve ekrana özel not. */
.firma-kunye { margin: -10px 0 6px 4px; }
.firma-notu { margin: 0 0 16px 4px; }

/* ---------- Yıllık plan matrisi ---------- */
/* Satır: faaliyet, sütun: ay. Hücreler küçük birer formdur — betiksiz
   tarayıcıda da tıklanabilsin (projedeki "JS yoksa ekran bozulmaz" kuralı). */
.plan-matris th { white-space: nowrap; }
/* 🔴 **SATIRLAR DARALTILDI** (kullanıcı, 24 Eyl 2026: *"yazılar arasında çok
   boşluk var, altı satırlar altı dolayınca çok boşluk var — daralt
   bunları"*). Genel tablo dolgusu 10px; 40 maddelik bir planda matris
   ekrana sığmıyor, göz satırı kaybediyordu. Yalnız bu tabloda daraltıldı:
   genel kural değişseydi bütün ekranlar sıkışırdı. */
.plan-matris td { vertical-align: middle; padding: 3px 8px; }
.plan-matris th { padding: 6px 8px; }
.plan-matris td:first-child { line-height: 1.25; }
/* Madde altındaki kategori/etiket satırı — ayrı bir blok yerine aynı
   hücrede, arası dar. */
.plan-matris .madde-alt { margin-top: 1px; }

.matris-hucre {
  width: 26px; height: 26px; line-height: 1;
  border: 1px solid var(--cizgi); border-radius: 5px;
  background: var(--kart); color: var(--yazi-soluk);
  font-size: 13px; cursor: pointer; padding: 0;
}
.matris-hucre:hover { border-color: var(--mor); }
.matris-hucre.planli { background: var(--sari-zemin); color: var(--sari-yazi);
  border-color: var(--sari-yazi); }
.matris-hucre.yapildi { background: var(--yesil-zemin); color: var(--yesil-yazi);
  border-color: var(--yesil-yazi); font-weight: 700; }
.matris-hucre.gecikti { background: var(--kirmizi-zemin); color: var(--kirmizi-yazi);
  border-color: var(--kirmizi-yazi); font-weight: 700; }
/* Eğitim planı (21 Eyl 2026): seçili eğitimin satırı işaretli — eski
   programdaki yeşil satırın karşılığı, ama yalnız ad hücresinde; bütün
   satırı boyamak hücre renklerini okunmaz yapardı. */
.egitim-matris tr.secili td:first-child { background: var(--yesil-zemin);
  box-shadow: inset 3px 0 0 var(--yesil-yazi); }

/* 🔴 **12 AYIN TAMAMI GÖRÜNSÜN** (kullanıcı üç kez sordu — 26–27 Eyl 2026:
   *"eğitim planında 12 ayın tamamı görünsün, şu an yarısı kesiliyor"*).

   **Ölçüldü** (1440 px pencere, yan menü açık): içerik alanı 1111 px, tablo
   1164 px → 53 px taşma. 1280 px'te taşma 213 px, yani **altı ay** ekranın
   dışında kalıyordu.

   ⚠️ Çözüm sütun **silmek değil daraltmak**: künye sütunlarını kullanıcı
   24 Eyl'de eski programdan örnek vererek istedi, kaldırılamaz. Değer
   kısalınca **üç nokta** ile biter ve tamamı `title`da durur; hücreye
   tıklayınca zaten künye penceresi açılıyor.
   ⚠️ Yalnız `.egitim-matris`: `.plan-matris` yıllık plan matrisiyle ortak ve
   oranın sütun sayısı başka — genel kural değişseydi o ekran da sıkışırdı. */
.egitim-matris th, .egitim-matris td { padding: 3px 5px; }
.egitim-matris .kunye-hucre { max-width: 58px; }
.egitim-matris .kunye-hucre .kunye-dugme,
.egitim-matris .kunye-hucre > span {
  display: block; max-width: 58px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.egitim-matris .matris-hucre { width: 24px; height: 24px; font-size: 12px; }

/* ⭐ İlk iki sütun **yapışkan**: 12 ay sığmayan dar ekranda yana kaydırınca
   "hangi eğitimin satırındayım" bilgisi kaybolmasın. Zemin şart — saydam
   kalsaydı altından geçen hücreler okunurdu. */
.egitim-matris th:nth-child(1), .egitim-matris td:nth-child(1),
.egitim-matris th:nth-child(2), .egitim-matris td:nth-child(2) {
  position: sticky; background: var(--kart); z-index: 1;
}
.egitim-matris th:nth-child(1), .egitim-matris td:nth-child(1) { left: 0; }
.egitim-matris th:nth-child(2), .egitim-matris td:nth-child(2) { left: 32px; }
.egitim-matris tr.secili td:nth-child(2) { background: var(--yesil-zemin); }

/* ⭐ **ANINDA İŞARET** — tıklanan hücre sunucuyu beklemeden çevrilir; bu
   sınıf yalnız "gidiyor" demek için, işaretin kendisi zaten basılı. */
.egitim-matris .matris-hucre.bekliyor { border-style: dashed; opacity: .85; }

/* ---------- Değerlendirme ekibi tablosu (21 Eyl 2026) ----------
   Kullanıcı: "sayfada çok boşluk var, çok aşağıya kaydırmak zor". Dokuz
   satırın her biri ~80 px'ti: liste ile ad kutusu alt altaydı, hücre ve
   kontrol dolguları genel tablo ölçüsündeydi. Satır tek hat, dolgular sıkı. */
.ekip-tablosu th, .ekip-tablosu td { padding: 4px 8px; vertical-align: middle; }
.ekip-tablosu select, .ekip-tablosu input[type=text] {
  padding: 4px 8px; font-size: 13px; }
.ekip-tablosu .kisi-secimi { display: flex; gap: 6px; }
.ekip-tablosu .kisi-secimi select { flex: 1 1 58%; min-width: 0; }
.ekip-tablosu .kisi-secimi input { flex: 1 1 42%; min-width: 0; }
.ekip-tablosu input[type=checkbox] { margin: 0; }

/* ---------- Evrak uyum matrisi ---------- */
/* Satır: işyeri, sütun: evrak türü. Sayfa başına 40 satır × ~38 sütun.
   ⚠️ İlk sütun YAPIŞKAN: sağa kaydırıldığında hangi işyerine bakıldığı
   kaybolursa tablo okunamaz hâle gelir. Yatay kaydırma `.sarma` içinde
   kalır — sayfa gövdesi yana kaymaz. */
/* ⚠️ `border-collapse: separate` bilerek: `collapse` ile hücrelerde
   `position: sticky` bazı tarayıcılarda hiç çalışmaz. Çizgiler bu yüzden
   hücre kenarına elle veriliyor. */
/* ⚠️ `width: auto` — `.tablo`'nun `width:100%`'ini EZER. Matris az sütunluyken
   tablo pencereye yayılıyor ve fazlalığı ilk sütun yutuyordu: 250px'e
   sabitlenmiş "İşyeri" sütunu kullanıcının ekranında **640px**'e çıkıyor,
   eğik başlıklar sağdan taşıyor ve tablo boş yer varken bile yatay
   kaydırma istiyordu (ölçüldü, 17 Ağu 2026). Doğal genişlikte 20 sütun
   ≈ 890px — normal bir pencereye sığar.
   ⚠️ `overflow-x: auto` yine de kalır: 38 sütunlu portföyde kaydırma şart. */
/* ⚠️ `table-layout: fixed` + `width: auto` — ikisi birlikte şart.
   `.tablo`'nun `width:100%`'i tabloyu pencereye yayıyor, **otomatik** düzende
   ise hücre genişliği yalnız bir ÖNERİDİR: içerik dikte eder. Sonuç, 230px'e
   sabitlenmiş "İşyeri" sütununun kullanıcının ekranında **541px**'e çıkması
   ve tablonun boş yer varken yatay kaydırma istemesiydi (ölçüldü, 17 Ağu
   2026 — önce yalnız `width:auto` denendi, yetmedi).
   Sabit düzende genişlik = 230 + sütun×30; 20 sütun ≈ 830px, pencereye sığar.
   ⚠️ `overflow-x: auto` yine de kalır: 38 sütunlu portföyde kaydırma şart. */
.uyum-matris { border-collapse: separate; border-spacing: 0; overflow: visible;
  width: auto; table-layout: fixed; }
.uyum-matris th, .uyum-matris td { border-bottom: 1px solid var(--cizgi); }

.uyum-matris .isyeri-sutun {
  position: sticky; left: 0; z-index: 2;
  /* ⚠️ `width` de verilir: yalnız min/max verildiğinde tablo düzeni bunları
     öneri sayıp sütunu genişletebiliyordu. */
  width: 230px; min-width: 230px; max-width: 230px;
  background: var(--kart);
  border-right: 2px solid var(--cizgi-koyu);
  text-transform: none; letter-spacing: 0;
}
.uyum-matris thead .isyeri-sutun { z-index: 3; }
.uyum-matris .satir-ozet {
  display: flex; align-items: center; gap: 7px; margin-top: 5px; flex-wrap: wrap;
}

/* Sütun başlıkları eğik: 38 evrak adı yan yana düz yazılsa tablo ekrana
   sığmaz, kısaltılsa hangi evrak olduğu anlaşılmaz. Tam ad `title`'da. */
/* ⚠️ Açı ve sütun genişliği birlikte ayarlanır (kullanıcı isteği, 17 Ağu
   2026: "yazıları biraz daha yatır, aralarını aç"). Açıyı yatırmak
   (-60° → -45°) başlığı **alçaltır** ama sağa taşmasını artırır; sütun
   genişletilmezse eğik yazılar birbirine değer. 32px'de 28 sütun = 1126px,
   pencereye sığmaya devam eder. */
/* ⚠️ **BAŞLIK ZEMİNİ BEYAZLADI — 19 Ağustos 2026 (kullanıcı isteği).**
   Gösterdiği tasarımda eğik başlıklar düz beyaz üstünde duruyor; mor
   degrade, altındaki yumuşak hücrelerle yarışıyordu. Açı ve genişlik
   değişmedi — onlar ölçülerek bulunmuştu. */
.uyum-matris th.tur {
  height: 132px; width: 34px; min-width: 34px; padding: 0;
  vertical-align: bottom; background: var(--kart);
}
.uyum-matris th.tur > div {
  width: 32px; transform-origin: bottom left;
  transform: translateX(24px) rotate(-45deg);
}
.uyum-matris th.tur > div > span {
  display: inline-block; white-space: nowrap;
  padding: 0 8px 4px 2px; font-size: 11.5px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--tablo-baslik-yazi);
}

/* ⚠️ **HÜCRELER YUVARLAK KÜP OLDU — 19 Ağustos 2026 (kullanıcı isteği:
   "evrak durum matrisini buradaki tasarıma göre güncelle").** Renk artık
   `td`nin tamamını değil, içindeki bağlantıyı boyuyor: aralarında 3px boşluk
   kalıyor ve her hücre ayrı bir kutu gibi okunuyor.

   ⚠️ **İşaretler ve anlamları değişmedi** (✓ tamam · ! yaklaşıyor · ✕ eksik ·
   – zorunlu değil). Renk yumuşadı ama **yazı rengi koyu kaldı**: soluk
   zemin üstünde soluk yazı, eksik evrağı okunmaz yapardı. */
.uyum-matris td.hucre {
  padding: 2px; width: 34px; min-width: 34px; text-align: center;
  background: var(--kart);
}
.uyum-matris td.hucre a {
  display: block; line-height: 32px; text-decoration: none;
  font-weight: 700; font-size: 13px; border-radius: 9px;
}
.uyum-matris td.hucre.yesil a   { background: var(--yesil-yumusak); color: var(--yesil-yazi); }
.uyum-matris td.hucre.sari a    { background: var(--sari-yumusak); color: var(--sari-yazi); }
.uyum-matris td.hucre.kirmizi a { background: var(--kirmizi-yumusak); color: var(--kirmizi-yazi); }
/* ⚠️ "Bu işyerinde zorunlu değil" bir EKSİKLİK DEĞİLDİR: nötr kalır,
   uyum renklerinden hiçbirini almaz. Kırmızıya benzeyen bir gri bile
   olmayan bir yükümlülüğü varmış gibi gösterirdi. */
.uyum-matris td.hucre.gerekmiyor   { background: var(--kart); }
.uyum-matris td.hucre.gerekmiyor a { color: var(--cizgi-koyu); font-weight: 400; }

/* Satır başına tamamlanma çubuğu. Payda o işyerinde ZORUNLU olan evraktır. */
.oran-cubugu {
  height: 5px; margin-top: 6px; border-radius: 999px;
  background: var(--cizgi); overflow: hidden;
}
.oran-cubugu i { display: block; height: 100%; }
.oran-cubugu i.yesil   { background: var(--yesil-cizgi); }
.oran-cubugu i.sari    { background: var(--sari-cizgi); }
.oran-cubugu i.kirmizi { background: var(--kirmizi-cizgi); }

/* Sütun özeti — "bu evrak kaç müşteride eksik" (matrisin asıl kazancı). */
.ozet-serit {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-left: 5px solid var(--turuncu);
  border-radius: var(--yuvarlak); padding: 12px 15px; margin-bottom: 16px;
}
.ozet-serit .ozet-baslik { font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 9px; }
.ozet-kutular { display: flex; gap: 9px; flex-wrap: wrap; }
.ozet-kutu {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  background: var(--zemin); border: 1px solid var(--cizgi);
  border-radius: 999px; padding: 5px 12px 5px 14px;
}

.matris-aciklama {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 14px 16px; margin-top: 16px;
}
.matris-aciklama .baslik { font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.matris-aciklama ul { list-style: none; margin: 0; padding: 0;
  display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; }
.matris-aciklama li { display: flex; align-items: center; gap: 7px; }
.hucre-ornek {
  display: inline-block; width: 26px; line-height: 24px; text-align: center;
  border: 1px solid var(--cizgi); border-radius: 5px; font-weight: 700; font-size: 12px;
}
.hucre-ornek.yesil   { background: var(--yesil-zemin);   color: var(--yesil-yazi); }
.hucre-ornek.sari    { background: var(--sari-zemin);    color: var(--sari-yazi); }
.hucre-ornek.kirmizi { background: var(--kirmizi-zemin); color: var(--kirmizi-yazi); }
.hucre-ornek.gerekmiyor { color: var(--yazi-soluk); }

/* ==================================================================
   TEMA: SAHA — 30.08.2026, kullanıcı seçimi ("B")

   Üç öneri arasından endüstriyel olan seçildi: kaskın, uyarı levhasının
   ve reflektif yeleğin dili. Taşıyıcı neredeyse siyah, vurgu güvenlik
   turuncusu, köşeler keskin, durum şeridi kalın, etiketler büyük harf.

   ⚠️ DEĞİŞEN YALNIZ STİLDİR. Hiçbir sınıf adı, hiçbir şablon mantığı,
   hiçbir davranış değişmedi. Dosyanın ilk 686 satırına dokunulmadı;
   blok SONA eklendi. Geri almak = bu bloğu silmek.
   🔴 17 Eyl 2026: GERİ ALMA YOLU ARTIK BU DEĞİL. Yukarıdaki katmanda bu
   bloğun ezdiği 25 SABİT renk (eski mor palet) silindi: ölüydüler ama
   dosyayı okuyana ekrandakinden farklı renk söylüyorlardı — `:root` için
   15 Eyl'de yaşananın aynısı. Ezilmeyen üçü (matris sütun başlığı, firma
   künyesi çizgisi, «Sil» bağlantısı) koyu temada okunmuyordu; renkler
   artık yalnız jetondan gelir (`test_tema.SabitRenkYok`).

   ⚠️ YEŞİL / SARI / KIRMIZI ÜÇLÜSÜ TAKAS EDİLMEDİ. Anlam aynı
   (yeşil=güncel, sarı=yaklaşıyor, kırmızı=geçti); tonlar yalnızca
   kâğıt gibi ılık yeni zeminde okunur olsun diye KOYULAŞTIRILDI.
   Turuncu vurgu bu üçlüden ayrı bir iştir: eylem ve seçili durum
   demektir, uyum durumu değil. Sarıyla karışmasın diye sarı
   kahverengiye çekildi (#c2740a) ve turuncu asla kart şeridinde,
   rozet zemininde ya da sayaçta kullanılmadı.

   ⚠️ "Yumuşatma yalnız zeminde" kuralı korundu: kart zemini yumuşak
   tondan beyaza akar, ŞERİT VE ROZET YAZISI KOYU KALIR. Kalın şerit
   (5px) bu temada geciken kartı daha da görünür yapar.

   ⚠️ Büyük harf yalnız ETİKETLERDE (rozet, tablo başlığı, düğme, h1).
   Kart adı, durum metni ve tablo hücresi büyük harfe çevrilmedi —
   Türkçe'de "i→İ" dönüşümü tarayıcıda güvenilmez ve uzun ad okunmaz
   hâle gelir.
   ================================================================== */


/* ---------- Yan menü ---------- */
.yan-menu { background: linear-gradient(178deg, var(--yan-menu-ust) 0%,
  var(--yan-menu) 42%, var(--yan-menu-koyu) 100%); }
.yan-menu .kurum b {
  font-family: var(--baslik-ailesi);
  font-size: var(--marka-boyut);
  letter-spacing: var(--marka-aralik);
}
.yan-menu .kurum span {
  font-family: var(--etiket-ailesi);
  font-size: var(--marka-alt-boyut);
  letter-spacing: var(--marka-alt-aralik);
  text-transform: var(--marka-alt-donusum);
  opacity: var(--marka-alt-saydamlik);
}
.yan-menu nav a.aktif {
  background: var(--menu-aktif-zemin);
  border-left-color: var(--menu-aktif-cizgi);
}
.yan-menu nav .baslik {
  color: var(--yan-menu-baslik);
  font-family: var(--etiket-ailesi);
  font-size: var(--menu-baslik-boyut);
  font-weight: var(--menu-baslik-kalinlik);
  letter-spacing: var(--menu-baslik-aralik);
}
.yan-menu .menu-grup > summary.baslik:hover { color: #ffffff; }
.yan-menu .alt a { color: var(--yan-menu-alt-yazi); }

/* ---------- Uyum şeridi ---------- */
.uyum-serit {
  background: var(--kart);
  border-radius: var(--yuvarlak);
  border-color: var(--cizgi);
}
.uyum-serit .halka {
  background: conic-gradient(var(--mavi) calc(var(--oran) * 1%),
                             rgba(var(--vurgu-rgb), .16) 0);
}
.uyum-serit .sayac { border-radius: var(--yuvarlak-kucuk); }
/* Büyük sayılar başlık ailesinden (Lacivert'te serif); diğer temalarda
   başlık ailesi metin ailesiyle aynı olduğu için görünüm değişmez. */
.uyum-serit .sayac .deger,
.uyum-serit .halka span { font-family: var(--baslik-ailesi); }

/* ---------- Modül kartları ---------- */
/* Şerit 3px'ten 5px'e: bu temanın durum işareti kalın bant.
   ⚠️ `border-top-color` BURADA VERİLMEZ. Renksiz kartların şeridini
   `:nth-of-type` kuralı belirliyor ve onun özgüllüğü daha yüksek;
   buraya renk yazmak sessizce etkisiz kalır (denendi, öyle oldu). */
.kart {
  border-radius: var(--yuvarlak);
  border-top-width: var(--serit-kalinlik);
}
.kart-ikon {
  border-radius: var(--yuvarlak-kucuk);
  background: rgba(var(--vurgu-rgb), .12);
}
/* ⚠️ Rozet ve etiket yazısı `--vurgu-metin`: eskiden marka rengiydi
   (`--mavi`) ve «Mevcut»ta kendi tonlu zemininde 2,83-3,15 ölçüldü. */
.kart .rozet {
  border-radius: var(--yuvarlak-rozet);
  background: rgba(var(--vurgu-rgb), .12);
  color: var(--vurgu-metin);
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Renkli kartlarda zemin DÜZ: keskin dilde degrade yumuşaklık yapıyor,
   ayrımı şerit ve rozet taşıyor. */
.kart.yesil   { background: var(--yesil-yumusak); }
.kart.sari    { background: var(--sari-yumusak); }
.kart.kirmizi { background: var(--kirmizi-yumusak); }

/* ---------- Dönen şerit: ANA EKRAN onarımı ----------
   🔴 `.kart:nth-of-type(6n+…)` (böl. "Renksiz kartlar tek tip kalmasın")
   ANA EKRANDA çalışmıyordu: orada her kart kendi `div.kart-sarma`sının
   içinde tek `<a>` olduğu için sayaç her kartta 1'e düşüyor ve altı
   kuraldan yalnız `6n+1` tutuyordu. Sonuç: ana ekrandaki bütün renksiz
   kartlar tek renk. Eski palette hepsi mavi çıktığı için fark edilmemiş.
   Sayaç burada sarmalayıcıya taşındı. ⚠️ Eski kural SİLİNMEDİ ve
   silinmez: sarmalayıcısız 13 ekranda (raporlar, İSG-KATİP…) dönüşü
   hâlâ o sağlıyor — orada kartlar kardeş, sayaç doğru işliyor.
   Bu bir DAVRANIŞ değişikliği değil; şablona ve sınıf adlarına
   dokunulmadı, kural yine yalnız görsel.

   ⚠️ `:not(.yesil):not(.sari):not(.kirmizi)` ŞART. Onsuz bu kuralın
   özgüllüğü `.kart.kirmizi`yi geçiyor ve dekoratif şerit uyum rengini
   eziyordu — yani geciken kart artık kırmızı görünmüyordu. */
.kart-sarma:nth-of-type(6n+1) .kart:not(.yesil):not(.sari):not(.kirmizi) { border-top-color: var(--mavi); }
.kart-sarma:nth-of-type(6n+2) .kart:not(.yesil):not(.sari):not(.kirmizi) { border-top-color: var(--mor); }
.kart-sarma:nth-of-type(6n+3) .kart:not(.yesil):not(.sari):not(.kirmizi) { border-top-color: var(--turkuaz); }
.kart-sarma:nth-of-type(6n+4) .kart:not(.yesil):not(.sari):not(.kirmizi) { border-top-color: var(--turuncu); }
.kart-sarma:nth-of-type(6n+5) .kart:not(.yesil):not(.sari):not(.kirmizi) { border-top-color: var(--pembe); }
/* ⚠️ 6. yuva bilerek `--mavi-acik` DEĞİL. Açık turuncu (#fb7a3c) sarı
   uyum rengine ΔE76 = 24 uzaklıktaydı; bu, ayırt etmesi zor bir aralık
   ve dekoratif bir şeridin "süresi yaklaşıyor" sanılması bu programda
   kabul edilemez. Koyu kahve ölçüldü: üç anlam rengine en yakın 43,2 ·
   diğer beş dekoratife 42,1. `--mavi-acik` menünün aktif çizgisinde
   kalmaya devam ediyor. */
.kart-sarma:nth-of-type(6n+6) .kart:not(.yesil):not(.sari):not(.kirmizi) { border-top-color: var(--dekor-6); }

/* ---------- Tablolar ---------- */
.tablo th {
  color: var(--tablo-baslik-yazi);
  border-bottom: 2px solid var(--cizgi-koyu);
  background: var(--tablo-baslik-zemin);
  font-family: var(--etiket-ailesi);
  font-size: var(--tablo-baslik-boyut);
  font-weight: var(--tablo-baslik-kalinlik);
  letter-spacing: var(--tablo-baslik-aralik);
}
.tablo tr:hover td { background: var(--satir-vurgu); }

/* ---------- Düğmeler ve alanlar ---------- */
.dugme {
  border-radius: var(--yuvarlak-dugme);
  background: var(--vurgu-dolu);
  color: var(--vurgu-yazi);
  box-shadow: none;
  letter-spacing: var(--dugme-aralik);
  text-transform: var(--dugme-donusum);
}
.dugme:hover { filter: brightness(1.06); box-shadow: none; }
.dugme.sade { text-transform: none; letter-spacing: 0; }
.dugme.sade:hover { border-color: var(--mavi); color: var(--vurgu-metin); }
/* ⭐ BAĞLANTI DÜĞMESİ KUTUDUR (17 Eyl 2026). `a` satır içidir: dikey dolgu
   satır yüksekliğine girmez. Dar hücrede düğme iki parçaya bölünüp komşu
   metnin üstüne biniyordu — acil durum ekipleri «pano», 1024 px'te 38 px'lik
   iki parça 18 px arayla; «Verimi indir» ve «SGK kimliğini gir» de metne
   biniyordu (558 ekran ölçüldü). `button` zaten satır içi-bloktur.
   ⚠️ `:not([hidden])` ŞART: yazar kuralı tarayıcının `[hidden]` kuralını
   ezer, `hidden` ile gizlenen bağlantı düğmesi görünür olurdu. */
a.dugme:not([hidden]) { display: inline-block; }
select, input, textarea { border-radius: var(--yuvarlak-rozet); }
select:focus, input:focus, textarea:focus {
  outline: 3px solid rgba(var(--vurgu-rgb), .30);
  border-color: var(--mavi);
}

/* ---------- Etiket ve rozetler ---------- */
.etiket { background: rgba(var(--vurgu-rgb), .10);
  border: 1px solid rgba(var(--vurgu-rgb), .20);
  color: var(--vurgu-metin); }

/* ---------- Giriş ekranı ---------- */
.giris-sayfa { background: linear-gradient(168deg, var(--yan-menu-ust) 0%,
  var(--yan-menu) 45%, var(--yan-menu-koyu) 100%); }
/* ⚠️ `border-top-color` ŞART: şablondaki kural şeridi `var(--mor)`den
   alıyor ve mor artık yalnız dekoratif kart şeridi yuvasında duruyor —
   giriş kartının tepesinde tek başına kalmış mor bir çizgi bırakıyordu.
   Giriş kartı birincil eylemin ekranıdır, şerit de onun rengini alır. */
.giris-kutu {
  border-radius: var(--yuvarlak);
  border-top-color: var(--mavi);
  box-shadow: var(--giris-golge);
}

/* ---------- Firma çubuğu ---------- */
.firma-cubugu {
  background: var(--firma-zemin);
  border: 1px solid var(--firma-cizgi);
  border-left: 5px solid var(--mavi);
}

/* ---------- Uyum matrisi ---------- */
.uyum-matris tr:hover td { background: var(--satir-vurgu); }
.uyum-matris thead .isyeri-sutun { background: var(--tablo-baslik-zemin); }
.uyum-matris tr:hover .isyeri-sutun { background: var(--satir-vurgu); }
/* Satır vurgusu hücre kutularını ezmesin: yalnız zemin değişir. */
.uyum-matris tr:hover td.hucre { background: var(--hucre-vurgu); }
.ozet-serit .ozet-baslik,
.matris-aciklama .baslik { color: var(--tablo-baslik-yazi); }

/* ---------- Sayfa başlığı ----------
   ⚠️ `h1` GENELİNE verilmiyor: giriş ekranındaki marka adı da h1 ve
   büyük harf kuralı onu "ISGHELP" yapıyordu. Yalnız içerik alanının
   sayfa başlığı büyür. */
.icerik h1 {
  letter-spacing: var(--sayfa-basligi-aralik);
  text-transform: var(--sayfa-basligi-donusum);
  font-weight: var(--sayfa-basligi-kalinlik);
}

/* ===================================================================
   MOBİL DÜZEN — 13 Eylül 2026
   🔴 Kullanıcının canlı testinde ölçüldü (390×844): yan menü 232 px sabitti
   ve ekranın yarısından fazlasını kaplıyordu. Ana içerik okunmaz bir şeride
   sıkışıyor, kart adları hece hece bölünüyor, CRM tabloları sayfayı yatay
   kaydırtıyordu. Menüyü kapatacak hiçbir düğme yoktu.

   ⚠️ **JAVASCRIPT KULLANILMADI.** Çekmece `#menu-anahtari` onay kutusu ile
   açılıp kapanıyor: betik yüklenmese de menü çalışır (projenin kuralı).
   ⚠️ Kırılma 720 px: 768 px'lik tabletler **masaüstü** düzeninde kalsın —
   orada 232 px menü ekranın %30'u ve okunur.
   ⚠️ Masaüstünde `.menu-dugme` gizli; geniş ekran düzenine DOKUNULMADI.
   =================================================================== */
.menu-dugme { display: none; }

/* ===================================================================
   MASAÜSTÜNDE MENÜYÜ KATLA — *"daha geniş bir ekran kullanım alanı olur"*
   (kullanıcı isteği, 24 Eyl 2026: *"solda mavi bulunan alan… hide sidebar
   gibi, gizle, tek tıkla açayım"*).

   ⚠️ **Dar ekranın çekmecesinden AYRI mekanizma, bilerek.** Çekmece
   (`#menu-anahtari`) betiksiz çalışsın diye onay kutusuyla kuruldu ama
   **sayfa değişince sıfırlanır** — dar ekranda doğru davranış budur.
   Masaüstünde tam tersi gerekiyor: menüyü gizleyen kullanıcı her sayfada
   yeniden gizlemek zorunda kalırsa özellik işe yaramaz. Bu yüzden durum
   `<html>` sınıfında ve `localStorage`'da tutuluyor.

   ⚠️ **Düğmeyi BETİK ekler** (`isgbys-menu-katla.js`). Şablona yazılsaydı,
   betiksiz tarayıcıda tıklanınca hiçbir şey yapmayan ölü bir düğme kalırdı;
   projenin kuralı "betik yoksa ekran çalışır", "betik yoksa yalan düğme"
   değil.
   ⚠️ Sınıf `<head>` içinde, öğeler basılmadan önce ekleniyor — sonra
   eklenseydi menü bir kare görünüp kaybolur (titreme) olurdu.
   ⚠️ Kural 720 px ÜSTÜNDE: dar ekranda menü zaten çekmece, ikisi üst üste
   binseydi çekmece açılmaz olurdu.
   =================================================================== */
/* ⭐ **ÜST ÇUBUK** (25 Eyl 2026): [Menüyü gizle] [Ana ekran] … [seçici] … [bırak]
   Kullanıcı: *"menü gizle sekmesi üstte çok yer kaplıyor… bu seçtiğimiz kutu
   olsun, ortaya doğru gözüksün… ana ekran sekmesi ekleyelim."*
   ⚠️ Seçici `margin: auto` ile **ortalanır**, sabit genişlik verilmez: firma
   adları çok farklı uzunlukta ve sabit kutu uzun unvanı kırpardı.
   ⚠️ Çubuk sarılabilir (`flex-wrap`): dar ekranda seçici alt satıra iner,
   yatay kaydırma çıkmaz. */
.ust-cubuk {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px;
}
/* 🔴 **ÇUBUK FİRMA ŞERİDİNİN İÇİNE ALINDI** (kullanıcı, 26 Eyl 2026:
   *"yanlış yere koymuşum, hemen alttaki o boşluğun olduğu yere koyacaktım…
   üstteki boşluğu da kaldır"*). Ayrı satırdayken kendi üst boşluğunu da
   getiriyor ve iki şerit üst üste biniyordu. Artık şeridin **ilk satırı**:
   künye hemen altında, tek kutu. */
.ust-cubuk-serit { margin: 0 0 4px; }

.ust-secici { margin: 0 auto; min-width: 0;
  /* Genislik SECILEN ADA gore buyur (isgbys-secici-genislik.js).
     Betik yoksa yedek deger gecerli: kutu eski haliyle calisir. */
  flex: 0 1 var(--ust-secici-genislik, 460px); }
.ust-secici select { width: 100%; }

/* ⚠️ **«Ana ekran» KUTU DEĞİL, BAĞLANTI** (kullanıcı, 26 Eyl 2026: *"ana
   ekrana dön kutucuğu çok kötü duruyor, sanki oraya monte edilmiş gibi"*).
   Çerçeveli düğme, yanındaki sade «Menüyü gizle» ile aynı çubukta iki ayrı
   dil konuşuyordu. İkisi de artık aynı sade görünümde; ikonlar da aynı
   puntoda. Tıklama alanı korundu (dolgu duruyor), yalnız çerçeve kalktı. */
.ust-cubuk .ust-ana-ekran {
  white-space: nowrap; border: none; background: none;
  color: var(--yazi-soluk); font-size: 12.5px; font-weight: 500;
  padding: 5px 8px; box-shadow: none;
}
.ust-cubuk .ust-ana-ekran:hover {
  color: var(--yazi); background: color-mix(in srgb, var(--yazi) 5%, transparent); text-decoration: none;
}
.ust-birak { font-size: 12.5px; color: var(--yazi-soluk); white-space: nowrap; }

/* ⚠️ Çubuğun içindeyken «Menüyü gizle» de sade: ikisi aynı dili konuşsun
   (26 Eyl 2026, «Ana ekran» ile birlikte). Çubuk dışında (girişsiz ekran)
   eski çerçeveli hâli kalır — orada tek başına duruyor ve seçilebilir
   olduğunun görünmesi gerekiyor. */
.ust-cubuk .menu-katla {
  border: none; background: none; box-shadow: none;
  color: var(--yazi-soluk); font-weight: 500; padding: 5px 8px;
}
.ust-cubuk .menu-katla:hover {
  color: var(--yazi); background: color-mix(in srgb, var(--yazi) 5%, transparent);
}

.menu-katla {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 5px 11px;
  background: var(--kart); color: var(--yazi-soluk);
  border: 1px solid var(--cizgi); border-radius: 7px;
  font: inherit; font-size: 12.5px;
}
.menu-katla:hover { color: var(--yazi); border-color: var(--cizgi-koyu); }

@media (min-width: 721px) {
  .menu-katli .yan-menu { display: none; }
}
@media (max-width: 720px) {
  /* Dar ekranda çekmece zaten var; ikinci düğme kafa karıştırırdı. */
  .menu-katla { display: none; }
}

@media (max-width: 720px) {
  .duzen { flex-direction: column; }

  /* Üstte ince bir çubuk: her ekranda aynı yerde, başparmakla erişilir. */
  .menu-dugme {
    display: block;
    position: sticky; top: 0; z-index: 30;
    background: var(--yan-menu); color: var(--yan-menu-yazi);
    padding: 11px 14px; font-size: 14px; font-weight: 600;
    letter-spacing: .04em; cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  /* Menü varsayılan olarak KAPALI: dar ekranda içerik önce gelir. */
  .yan-menu {
    display: none;
    width: 100%; height: auto;
    position: static; align-self: stretch;
  }
  .menu-anahtari:checked ~ .yan-menu { display: flex; }

  /* Açıkken ekranı tamamen yutmasın; uzun menü kendi içinde kayar. */
  .yan-menu nav { max-height: 60vh; }

  /* İçerik kenar boşluğu dar ekranda israf. */
  .icerik { padding: 14px 12px; }

  /* ⚠️ Tek sütun: iki sütunda kart adı üç satıra bölünüyor ve kart
     bilgi vermez oluyor (ölçüldü, 390 px). */
  #kart-izgarasi,
  #modul-ekle-izgarasi,
  .kartlar { grid-template-columns: 1fr; }

  /* ⚠️ Yatay kaydırma SAYFANIN değil TABLONUN işi olmalı: sayfa kayınca
     menü ve başlık da kayıyor, kullanıcı yerini kaybediyor. */
  .sarma { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ust-satir { flex-wrap: wrap; gap: 8px; }
}

/* --- Ödeme hatırlatma kutusu (13 Eyl 2026) ---------------------------------
   ⚠️ Renk **uyarıdır, süs değil**: sarı "yaklaşıyor", kırmızı "tarih geçti".
   Uyum renkleriyle aynı dili konuşur (böl. 4: uyarı rengi kişiselleştirmeye
   açılmaz). */
.odeme-hatirlatma {
  border: 1px solid var(--sari-cizgi); border-left: 5px solid var(--sari-cizgi);
  background: var(--sari-yumusak); border-radius: var(--yuvarlak);
  padding: 12px 16px; margin: 0 0 16px;
}
.odeme-hatirlatma.gecikti { border-color: var(--kirmizi-cizgi);
  border-left-color: var(--kirmizi-cizgi);
  background: var(--kirmizi-yumusak); }
.odeme-hatirlatma .odeme-baslik {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.odeme-hatirlatma .odeme-baslik form { margin: 0; }
.odeme-hatirlatma .odeme-tutar { margin: 8px 0; }
.odeme-hatirlatma .odeme-hesap {
  background: var(--zemin-yumusak); border-radius: var(--yuvarlak);
  padding: 10px 12px; margin-top: 8px;
  /* IBAN elle kopyalanır: rakamlar bitişik yazı tipiyle daha az yanlış okunur. */
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------- Renk anahtarı (alt şerit)
   Kullanıcı isteği (14 Eyl 2026): "ekrandaki renklerin ne anlama geldiği
   en altta yazsın".
   ⚠️ Renkler buradaki değişkenlerden gelir — elle hex yazılmaz, yoksa
   kartın rengi değişince açıklama yalan söyler.
   ⚠️ Her öğede renksiz bir işaret (●/◐/▲/—) var: renk tek başına işaret
   olamaz; renk körlüğünde üç ton birbirine benzer. */
.renk-anahtari {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin: 28px 0 8px; padding: 12px 14px;
  border-top: 1px solid var(--cizgi);
  font-size: 12.5px; color: var(--yazi-soluk);
}
.renk-anahtari-baslik { font-weight: 600; color: inherit; }
.renk-oge { display: inline-flex; align-items: center; gap: 6px; }
.renk-oge i { font-style: normal; font-size: 13px; line-height: 1; }
.renk-oge.yesil i { color: var(--yesil-yazi); }
.renk-oge.sari i { color: var(--sari-yazi); }
.renk-oge.kirmizi i { color: var(--kirmizi-yazi); }
.renk-oge.gri i { color: var(--yazi-soluk); }
@media print { .renk-anahtari { display: none; } }

/* Eylem düğmesi taşıyan uyarı kutusu (ilk ziyaret formu vb.).
   ⚠️ Düğme metnin İÇİNE gömülüydü; metin sarınca etiketi ikiye bölünüyordu
   ("FORMU / DOLDUR"). Flex ile metin solda akar, düğme sağda bütün kalır. */
.uyari-eylemli {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 6px 12px;
}
.uyari-eylemli p { margin: 0; flex: 1; min-width: 240px; }
/* Düğme de sıkı (21 Eyl 2026, "daralt"): tam boy düğme kutuyu 65 px'e
   çıkarıyordu. */
.uyari-eylemli .dugme { flex: none; white-space: nowrap; padding: 5px 14px;
  font-size: 13px; }

/* Kontrol listesinde alt maddeler (14 Eyl 2026).
   ⚠️ Girinti + sol çizgi: hangi maddenin altında olduğu görünmezse liste
   79 kutuluk bir duvara döner. Renk değil ÇİZGİ kullanıldı — renk bu
   programda uyum sinyalidir, süs olarak harcanmaz. */
.kontrol-altlar {
  margin: 2px 0 8px 26px;
  padding-left: 12px;
  border-left: 2px solid var(--cizgi-koyu);
}
.kontrol-satir.alt { font-size: 13px; }
.kontrol-satir.alt .kontrol-metin { color: var(--yazi-soluk); }
.kontrol-satir.alt.secili .kontrol-metin { color: var(--yazi); }

/* İşyeri seçilmeden açılamayan kart (14 Eyl 2026).
   ⚠️ Soluk ama OKUNUR: kullanıcı hangi modüllerin orada olduğunu görmeli,
   yalnız girememeli. Tamamen silinseydi "modül yok" sanılırdı.
   ⚠️ İmleç `not-allowed`: tıklanabilir görünüp hiçbir şey yapmayan kart,
   bozuk kart gibi okunur. */
.kart.kilitli-kart {
  opacity: .55;
  cursor: not-allowed;
  border-top-color: var(--cizgi-koyu);
  background: var(--zemin);
}
.kart.kilitli-kart .durum { font-style: italic; }

/* İlk ziyaret formundaki alan (m²) girdileri — 14 Eyl 2026.
   İki alan yan yana, dar ekranda alt alta. */
.alan-satiri { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.alan-satiri label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13.5px; font-weight: 600; min-width: 210px;
}
.alan-satiri input { max-width: 160px; font-variant-numeric: tabular-nums; }
.alan-satiri .soluk { font-weight: 400; }

/* Yazdır düğmesi — her ekranın sağ üstünde (15 Eyl 2026).
   ⚠️ İçerik bloğunun ÜSTÜNDE duruyor, `.ust-satir`ın içinde değil: o satır
   her şablonun kendi `icerik` bloğunda ve temel şablondan içine girilemez.
   Negatif alt boşluk başlık satırına yaklaştırıyor, yoksa 179 ekranın
   tepesinde boş bir bant kalırdı.
   ⚠️ Baskıda gizleniyor (`isgbys-yazdir.css`): kâğıda basılmış bir "Yazdır"
   düğmesi hiçbir işe yaramaz. */
.yazdir-arac {
  display: flex; justify-content: flex-end; gap: 8px;
  margin: -6px 0 6px;
}
.yazdir-dugmesi,
.geri-dugmesi { font-size: 12.5px; padding: 4px 10px; }
/* ⚠️ «Geri» SOLDA durur: eylem çubuğunun sağı «ileri/üret» işleri içindir,
   geri dönüş göz akışının başında beklenir. */
.geri-dugmesi { margin-right: auto; }

/* «Parolayı göster» onay kutusu — davet/parola ekranı (15 Eyl 2026).
   ⚠️ Onay kutusu `width:100%` almasın: form alanları kuralı bütün
   girdileri tam genişlik yapıyor, kutu da kocaman bir bant oluyordu. */
.parola-goster {
  display: flex; align-items: center; gap: 7px;
  margin: 10px 0 2px; font-size: 13px; color: var(--yazi-soluk);
  cursor: pointer; user-select: none;
}
.parola-goster input[type="checkbox"] { width: auto; margin: 0; }

/* Tema seçici — yan menünün altında (kullanıcı isteği, 15 Eyl 2026).
   ⚠️ Kutu dar menüye sığmak zorunda: uzun tema adları (“Kobalt — mavi,
   yoğun veri panosu”) taşarsa menü yatay kayar. `width:100%` + `min-width:0`
   ikisi birden gerekli — flex çocuğu varsayılan olarak küçülmez. */
.tema-secici {
  margin: 10px 0 8px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.tema-secici label {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--yan-menu-baslik);
}
.tema-secici select {
  width: 100%; min-width: 0;
  font-size: 12px; padding: 4px 6px;
  border-radius: var(--yuvarlak-rozet);
  background: var(--yan-menu-aktif);
  color: var(--yan-menu-yazi);
  border: 1px solid rgba(255,255,255,.14);
}
@media print { .tema-secici { display: none !important; } }


/* ══════════════════════════════════════════════════════════════
   TEMALAR — kullanıcı seçer (15 Eylül 2026)

   ⚠️ **YALNIZ JETON EZERLER.** Hiçbir seçici, sınıf adı ya da
   davranış değişmez; tema değiştirmek stil değiştirmektir.
   ⚠️ Varsayılan «Mevcut»tur ve o yukarıdaki `:root`tur — burada
   tekrar edilmez, yoksa iki kaynak doğar ve biri bayatlar.
   ⚠️ Renkler ÜRETİLDİ ve KONTRASTI ÖLÇÜLDÜ (metin 4,5 · anlam
   renkleri 3,0 · dolu rozet yazısı 4,5). Geçmeyen tema çıktı
   vermiyor — kaynak: `~/.claude/skills/terra-tema`.
   ══════════════════════════════════════════════════════════════ */

/* ---- Kobalt — aydinlik ---- */
html[data-tema="kobalt"] {
  /* Taşıyıcı — yan menü */
  --yan-menu-ust: #000000;
  --yan-menu: #010203;
  --yan-menu-koyu: #050910;
  --yan-menu-yazi: #b8b8b8;
  --yan-menu-baslik: #858686;
  --yan-menu-alt-yazi: #a1a1a2;
  --yan-menu-aktif: #1f2021;

  /* Yüzey */
  --zemin: #EEF2F9;
  --kart: #FFFFFF;
  --zemin-yumusak: #E2E9F5;
  --cizgi: #ced7e6;
  --cizgi-koyu: #A8B6CE;
  --yazi: #0E1729;
  --yazi-soluk: #46536B;

  /* Tablo */
  --tablo-baslik-zemin: #E2E9F5;
  --tablo-baslik-yazi: #273247;
  --satir-vurgu: #f2f5fa;
  --hucre-vurgu: #f9fafd;

  /* Anlam üçlüsü — yeşil=güncel · sarı=yaklaşıyor · kırmızı=geçti. ⚠️ Bu üçü SÜS DEĞİL ANLAMDIR; hiçbir temada birbirinin yerine geçemez */
  --yesil-zemin: #d6e6dc;
  --yesil-cizgi: #0F6B32;
  --yesil-yazi: #03180b;
  --yesil-yumusak: #f1f6f3;
  --yesil-uzeri-yazi: #ffffff;
  --sari-zemin: #f2ead5;
  --sari-cizgi: #B5820A;
  --sari-yazi: #281d02;
  --sari-yumusak: #fbf8f0;
  --sari-uzeri-yazi: #161001;
  --kirmizi-zemin: #ecd6d8;
  --kirmizi-cizgi: #8E0F18;
  --kirmizi-yazi: #1f0305;
  --kirmizi-yumusak: #f8f1f1;
  --kirmizi-uzeri-yazi: #ffffff;

  /* Vurgu = EYLEM (uyum durumu değil). ⚠️ `--mavi` MARKA rengidir ve yalnız kenarlık/şerit/simgede kullanılır; yazı ve dolu düğme ayrı yuvadan gelir — ölçüldü: marka turuncusu yazı olarak kırmızı uyarı şeridinde 2,89 veriyordu (eşik 4,5) */
  --mavi: #1D4ED8;
  --mavi-acik: #5c80e3;
  --vurgu-metin: #1c4cd3;
  --vurgu-dolu: #1c4cd3;
  --vurgu-yazi: #FFFFFF;
  --vurgu-rgb: 29, 78, 216;
  --firma-zemin: #edf1fc;
  --firma-cizgi: #c9d5f6;

  /* Renksiz kartların dönen şeridi — altı yuva */
  --mor: #6d4fa8;
  --turkuaz: #0f766e;
  --turuncu: #475569;
  --pembe: #2c6e9b;
  --dekor-6: #6b4423;

  /* Şekil */
  --yuvarlak: 12px;
  --yuvarlak-kucuk: 5px;
  --yuvarlak-dugme: 8px;
  --yuvarlak-rozet: 6px;
  --serit-kalinlik: 4px;
  --golge: 0 1px 2px rgba(20,40,90,.12);
  --golge-hover: 0 2px 4px rgba(20,40,90,.12), 0 12px 28px rgba(20,40,90,.12);
  --giris-golge: 0 18px 50px rgba(20,40,90,.12);
}

/* ---- Kağıt — aydinlik ---- */
html[data-tema="kagit"] {
  /* Taşıyıcı — yan menü */
  --yan-menu-ust: #000000;
  --yan-menu: #020202;
  --yan-menu-koyu: #0b0a08;
  --yan-menu-yazi: #b8b8b8;
  --yan-menu-baslik: #868686;
  --yan-menu-alt-yazi: #a1a1a1;
  --yan-menu-aktif: #202020;

  /* Yüzey */
  --zemin: #F6F2EA;
  --kart: #FFFFFF;
  --zemin-yumusak: #EFE9DE;
  --cizgi: #dbd3c6;
  --cizgi-koyu: #B9AE9B;
  --yazi: #1E1A14;
  --yazi-soluk: #554C3F;

  /* Tablo */
  --tablo-baslik-zemin: #EFE9DE;
  --tablo-baslik-yazi: #373027;
  --satir-vurgu: #f8f5f0;
  --hucre-vurgu: #fbfaf8;

  /* Anlam üçlüsü — yeşil=güncel · sarı=yaklaşıyor · kırmızı=geçti. ⚠️ Bu üçü SÜS DEĞİL ANLAMDIR; hiçbir temada birbirinin yerine geçemez */
  --yesil-zemin: #d6e6dc;
  --yesil-cizgi: #0F6B32;
  --yesil-yazi: #03180b;
  --yesil-yumusak: #f1f6f3;
  --yesil-uzeri-yazi: #ffffff;
  --sari-zemin: #f2ead5;
  --sari-cizgi: #B5820A;
  --sari-yazi: #281d02;
  --sari-yumusak: #fbf8f0;
  --sari-uzeri-yazi: #161001;
  --kirmizi-zemin: #ecd6d8;
  --kirmizi-cizgi: #8E0F18;
  --kirmizi-yazi: #1f0305;
  --kirmizi-yumusak: #f8f1f1;
  --kirmizi-uzeri-yazi: #ffffff;

  /* Vurgu = EYLEM (uyum durumu değil). ⚠️ `--mavi` MARKA rengidir ve yalnız kenarlık/şerit/simgede kullanılır; yazı ve dolu düğme ayrı yuvadan gelir — ölçüldü: marka turuncusu yazı olarak kırmızı uyarı şeridinde 2,89 veriyordu (eşik 4,5) */
  --mavi: #8A3324;
  --mavi-acik: #ab6c61;
  --vurgu-metin: #873223;
  --vurgu-dolu: #873223;
  --vurgu-yazi: #FFFFFF;
  --vurgu-rgb: 138, 51, 36;
  --firma-zemin: #f6efed;
  --firma-cizgi: #e3ceca;

  /* Renksiz kartların dönen şeridi — altı yuva */
  --mor: #6d4fa8;
  --turkuaz: #0f766e;
  --turuncu: #475569;
  --pembe: #2c6e9b;
  --dekor-6: #6b4423;

  /* Şekil */
  --yuvarlak: 10px;
  --yuvarlak-kucuk: 5px;
  --yuvarlak-dugme: 8px;
  --yuvarlak-rozet: 6px;
  --serit-kalinlik: 4px;
  --golge: 0 1px 2px rgba(60,45,20,.10);
  --golge-hover: 0 2px 4px rgba(60,45,20,.10), 0 12px 28px rgba(60,45,20,.10);
  --giris-golge: 0 18px 50px rgba(60,45,20,.10);
}

/* ---- Tebeşir — karanlik ---- */
html[data-tema="tebesir"] {
  /* Taşıyıcı — yan menü */
  --yan-menu-ust: #3a3a47;
  --yan-menu: #242433;
  --yan-menu-koyu: #101018;
  --yan-menu-yazi: #c2c2c6;
  --yan-menu-baslik: #96969d;
  --yan-menu-alt-yazi: #aeaeb4;
  --yan-menu-aktif: #3e3e4b;

  /* Yüzey */
  --zemin: #101018;
  --kart: #191925;
  --zemin-yumusak: #242433;
  --cizgi: #2b2b3a;
  --cizgi-koyu: #4C4C63;
  --yazi: #EFEFF6;
  --yazi-soluk: #ABABC2;

  /* Tablo */
  --tablo-baslik-zemin: #242433;
  --tablo-baslik-yazi: #d0d0df;
  --satir-vurgu: #1e1e2b;
  --hucre-vurgu: #1b1b28;

  /* Anlam üçlüsü — yeşil=güncel · sarı=yaklaşıyor · kırmızı=geçti. ⚠️ Bu üçü SÜS DEĞİL ANLAMDIR; hiçbir temada birbirinin yerine geçemez */
  --yesil-zemin: #2d413e;
  --yesil-cizgi: #7BE3A3;
  --yesil-yazi: #8fe7b1;
  --yesil-yumusak: #242f33;
  --yesil-uzeri-yazi: #0f1b14;
  --sari-zemin: #43382d;
  --sari-cizgi: #E9B44C;
  --sari-yazi: #ecbf67;
  --sari-yumusak: #302a29;
  --sari-uzeri-yazi: #1c1609;
  --kirmizi-zemin: #473037;
  --kirmizi-cizgi: #FF8A80;
  --kirmizi-yazi: #ff9c93;
  --kirmizi-yumusak: #32252f;
  --kirmizi-uzeri-yazi: #1f110f;

  /* Vurgu = EYLEM (uyum durumu değil). ⚠️ `--mavi` MARKA rengidir ve yalnız kenarlık/şerit/simgede kullanılır; yazı ve dolu düğme ayrı yuvadan gelir — ölçüldü: marka turuncusu yazı olarak kırmızı uyarı şeridinde 2,89 veriyordu (eşik 4,5) */
  --mavi: #A78BFA;
  --mavi-acik: #c0abfb;
  --vurgu-metin: #b29afb;
  --vurgu-dolu: #a98efa;
  --vurgu-yazi: #150B2E;
  --vurgu-rgb: 167, 139, 250;
  --firma-zemin: #242236;
  --firma-cizgi: #3b3458;
  --bilgi-zemin: #242236;

  /* Renksiz kartların dönen şeridi — altı yuva */
  --mor: #af9ecf;
  --turkuaz: #7bb4af;
  --turuncu: #9aa2ac;
  --pembe: #8bafc8;
  --dekor-6: #ae9886;

  /* Şekil */
  --yuvarlak: 12px;
  --yuvarlak-kucuk: 5px;
  --yuvarlak-dugme: 8px;
  --yuvarlak-rozet: 6px;
  --serit-kalinlik: 4px;
  --golge: 0 1px 2px rgba(0,0,0,.55);
  --golge-hover: 0 2px 4px rgba(0,0,0,.55), 0 12px 28px rgba(0,0,0,.55);
  --giris-golge: 0 18px 50px rgba(0,0,0,.55);
}

/* ---- Lacivert yazı tipleri (17 Eyl 2026) ----
   ⚠️ Dosyalar `statik/yazitipi/` altında; dışarıya istek GİTMEZ. Google
   Fonts adresi konsaydı sağlık verisi olan her ekranda kullanıcının IP
   adresi Google'a giderdi (KVKK). Kaynak ve lisans: `yazitipi/OKU.md`.
   ⚠️ Tarayıcı bir yazı tipini yalnız KULLANILDIĞINDA indirir. Bu aileleri
   yalnız «Lacivert» çağırıyor; öteki temalarda dosyalar hiç istenmez.
   ⚠️ Her kalınlık İKİ dosyadır: `latin-ext` (ğ ş İ) + `latin` (ç ö ü ı).
   `unicode-range` yazılmasaydı biri bütün metni üstlenir, Türkçe
   harflerin bir kısmı yedek yazı tipine düşerdi — kelimenin ortasında
   harf değişirdi. Sıra Fontsource'unkiyle aynı (önce latin-ext). */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("yazitipi/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("yazitipi/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("yazitipi/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("yazitipi/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("yazitipi/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("yazitipi/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("yazitipi/ibm-plex-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("yazitipi/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("yazitipi/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("yazitipi/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("yazitipi/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("yazitipi/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("yazitipi/source-serif-4-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("yazitipi/source-serif-4-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("yazitipi/source-serif-4-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("yazitipi/source-serif-4-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- Lacivert — aydinlik (17 Eyl 2026) ----
   Kaynak: Claude Design «Sistem Panel» (kullanıcı beğendi; tanıtım
   sitesiyle aynı çizgi): lacivert #1E2A3A · mavi #2F6F9E · kâğıt #F7F6F3
   · anlam #3D7A4E / #B8791F / #9E3B30. Köşesiz, gölgesiz, serif başlık,
   eş aralıklı büyük harf etiket. Jeton dosyası: terra-tema `lacivert.json`.
   ⚠️ Tasarımdaki soluk yazılar (#6C7D91 menü bölümü 3,4 · #8B9099 tablo
   başlığı 3,1 · #6B7482 alt yazı 4,4) 4,5 eşiğini GEÇMİYORDU; aynı tonda
   koyulaştırıldı/açıldı. Eşikler `test_tema.KontrastOlculur`de çakılı.
   ⚠️ Kobalt'ın tonu DEĞİL (ölçüldü): vurgu mavileri arasında ΔE76 = 60,
   zemin soğuk mavi değil ılık kâğıt, köşe ve gölge yok, yazı aileleri ayrı.
   ⚠️ Dönen şeridin turkuaz yuvası bilerek LACİVERT: denenen soluk turkuaz
   (#4f8a8b) yeşil uyum rengine ΔE76 = 28 kalıyordu; dekoratif bir şerit
   «güncel» sanılmamalı (eşik 30, `test_tema`).
   ⚠️ Köşeler `0px` BİRİMLİ yazıldı: bir `calc()` içine birimsiz 0 girerse
   bütün ifade geçersiz olur ve kural sessizce düşer.
   ⚠️ Blok içindeki yorumlar TEK SATIR: `test_tema` bloğu satır satır okur,
   yorumun devam satırını jeton dışı kural sayar.
   ⚠️ 17 Eyl öğleden sonra (558 ekranlık tarama): soluk yazı ve bağlantı
   RENKLİ zeminde eşiği geçmiyordu — uyarı kutusundaki bağlantı 4,11 (173
   ekran), kırmızı zeminde soluk yazı 4,29. İkisi bir ton koyulaştı
   (soluk 5f6875 → 5a626e, bağlantı 2f6f9e → 29658f); dolu düğme ve
   marka rengi tasarımdaki #2F6F9E'de kaldı. */
html[data-tema="lacivert"] {
  /* Taşıyıcı — yan menü */
  --yan-menu-ust: #1e2a3a;
  --yan-menu: #1e2a3a;
  --yan-menu-koyu: #1b2635;
  --yan-menu-yazi: #a3b3c4;
  --yan-menu-baslik: #8a9aae;
  --yan-menu-alt-yazi: #97a7ba;
  --yan-menu-aktif: #2b3a4d;

  /* Yüzey */
  --zemin: #f7f6f3;
  --kart: #ffffff;
  --zemin-yumusak: #efede7;
  --cizgi: #e2e0d8;
  --cizgi-koyu: #b3b0a5;
  --yazi: #1e2a3a;
  --yazi-soluk: #5a626e;

  /* Tablo */
  --tablo-baslik-zemin: #fafaf8;
  --tablo-baslik-yazi: #5f6875;
  --satir-vurgu: #f9f8f5;
  --hucre-vurgu: #fbfbf9;

  /* Anlam üçlüsü — yeşil=güncel · sarı=yaklaşıyor · kırmızı=geçti. ⚠️ Bu üçü SÜS DEĞİL ANLAMDIR; hiçbir temada birbirinin yerine geçemez */
  --yesil-zemin: #dce9df;
  --yesil-cizgi: #3d7a4e;
  --yesil-yazi: #1d3f27;
  --yesil-yumusak: #f3f7f4;
  --yesil-uzeri-yazi: #ffffff;
  --sari-zemin: #f4e7d2;
  --sari-cizgi: #b8791f;
  --sari-yazi: #5c3b0d;
  --sari-yumusak: #fbf6ee;
  --sari-uzeri-yazi: #1a1204;
  --kirmizi-zemin: #f1dcd9;
  --kirmizi-cizgi: #9e3b30;
  --kirmizi-yazi: #6a261f;
  --kirmizi-yumusak: #faf2f1;
  --kirmizi-uzeri-yazi: #ffffff;

  /* Vurgu = EYLEM (uyum durumu değil). ⚠️ `--mavi` MARKA rengidir ve yalnız kenarlık/şerit/simgede kullanılır; yazı ve dolu düğme ayrı yuvadan gelir */
  --mavi: #2f6f9e;
  --mavi-acik: #8fb4cf;
  --vurgu-metin: #29658f;
  --vurgu-dolu: #2f6f9e;
  --vurgu-yazi: #ffffff;
  --vurgu-rgb: 47, 111, 158;
  --firma-zemin: #eef3f7;
  --firma-cizgi: #cddbe6;
  --bilgi-zemin: #eef3f7;

  /* Renksiz kartların dönen şeridi — altı yuva (turkuaz yuvası bilerek lacivert, başlığa bak) */
  --mor: #56507e;
  --turkuaz: #1e2a3a;
  --turuncu: #748196;
  --pembe: #8fb4cf;
  --dekor-6: #6b5a45;

  /* Şekil — köşesiz, gölgesiz (`0px` birimli, başlığa bak) */
  --yuvarlak: 0px;
  --yuvarlak-kucuk: 0px;
  --yuvarlak-dugme: 0px;
  --yuvarlak-rozet: 0px;
  --serit-kalinlik: 3px;
  --golge: none;
  --golge-hover: 0 1px 0 rgba(30,42,58,.10);
  --giris-golge: 0 18px 50px rgba(30,42,58,.30);

  /* Yazı — aileler `statik/yazitipi/` altındaki dosyalardan */
  --yazi-ailesi: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --baslik-ailesi: "Source Serif 4", Georgia, "Times New Roman", serif;
  --etiket-ailesi: "IBM Plex Mono", Consolas, ui-monospace, monospace;
  --sayfa-basligi-boyut: 28px;
  --sayfa-basligi-kalinlik: 700;
  --sayfa-basligi-aralik: -.015em;
  --sayfa-basligi-donusum: none;
  --marka-boyut: 18px;
  --marka-aralik: 0;
  --marka-alt-boyut: 10px;
  --marka-alt-aralik: .14em;
  --marka-alt-donusum: uppercase;
  /* ⚠️ .8 ÖLÇÜLDÜ: menü yazısı %80 saydamlıkta lacivert üstünde 4,9. */
  --marka-alt-saydamlik: .8;
  --menu-baslik-boyut: 10px;
  --menu-baslik-kalinlik: 500;
  --menu-baslik-aralik: .14em;
  --menu-aktif-zemin: #2f6f9e;
  --menu-aktif-cizgi: #2f6f9e;
  --tablo-baslik-boyut: 11px;
  --tablo-baslik-kalinlik: 500;
  --tablo-baslik-aralik: .08em;
  --dugme-donusum: none;
  --dugme-aralik: 0;
}

/* ============================================================
   ⭐ MÜŞTERİ SEÇİLİYKEN «İŞYERİ» SÜTUNU DÜŞER — 16 Eylül 2026
   ------------------------------------------------------------
   Kullanıcı: *"Solda tekrardan şirketin adı var. Neye gerek var?
   İşte zaten var."* · *"Zaten en üstte işyerinin adı yazıyor …
   boşuna yer kaplıyor."*

   ⚠️ Ölçü: firma bağlamı kuruluyken listedeki BÜTÜN satırlar aynı
   işyerinindir — sütun hiçbir şeyi ayırt etmez ve üstteki firma
   çubuğu adı zaten yazar. Müşteri seçili DEĞİLKEN sütun kalır:
   portföy görünümünde satırları ayıran tek şey odur.

   ⚠️ Kural TEK yerde: şablonlarda yalnız `class="sutun-isyeri"`
   işareti var, karar burada. Her şablonda `{% if firma %}` yazılsaydı
   biri unutulur ve o ekran tek başına eski davranışta kalırdı.

   ⚠️ Baskıda da düşer: kâğıtta da aynı ad 40 satır tekrarlanmamalı.
   ============================================================ */
body.firma-secili .sutun-isyeri { display: none !important; }

/* ⭐ BULUNULAN MENÜ GRUBU — grup artık kendiliğinden açılmıyor
   (16 Eyl 2026), bu yüzden kapalıyken de nerede olduğun görünmeli.
   Eski davranışın gerekçesi buydu; karşılığı bu işaret. */
.yan-menu .menu-grup.bulunulan > .baslik {
  color: #fff;
  opacity: 1;
}
.yan-menu .menu-grup.bulunulan > .baslik::after {
  content: " •";
  color: var(--mavi-acik);
}

/* ⭐ SATIR İÇİ «Sil» DÜĞMESİ — bağlantı gibi görünür, POST gönderir.
   ------------------------------------------------------------------
   Silme bir <form> ile gitmek zorunda (adres çubuğuna yazılan GET ile
   belge silinemez), ama satır içinde kutulu bir düğme «Aç · Düzenle ·
   Yazdır» dizisini bozuyordu. Bu sınıf yalnız GÖRÜNÜMÜ bağlantıya
   benzetir; gönderim yine POST'tur.
   ⚠️ Baskıda basılmaz: `isgbys-yazdir.css` bütün `button`ları gizliyor.
   🔴 Renk bağlantınınkiyle aynı jetondan (17 Eyl 2026). Eskiden
   `var(--bag)` yazıyordu; `--bag` hiçbir yerde TANIMLI DEĞİLDİ,
   yedek mavi her temada sabit kaldı ve Tebeşir'de 3,01 ölçüldü.
   Yedek değer bu yüzden yasak (`test_tema.SabitRenkYok`). */
.baglanti-dugme {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--vurgu-metin);
  text-decoration: underline; cursor: pointer;
}
.baglanti-dugme:hover { color: var(--kirmizi-yazi); }

/* ⭐ Ekranın kendi aracı — «Geri» ile «Yazdır» arasındaki şeritte (20 Eyl
   2026). Ana ekrandaki işyeri seçicisi başlığın altında kendi satırına taşıp
   tam genişliğe yayılıyordu; şeridin ortası ise boştu.
   ⚠️ `margin-right:auto` seçiciyi ORTALAR: «Geri»de de aynı kural var, boş
   alan ikisi arasında bölünüyor. Tek başına verilseydi seçici sağa yapışıp
   «Yazdır»a dayanırdı.
   ⚠️ `max-width` şart: seçenek metni uzun (unvan + SGK sicili) ve sınırsız
   bırakılınca kutu şeridi tek başına doldurup düğmeleri alt satıra atıyordu. */
.yazdir-arac { align-items: center; flex-wrap: wrap; }
.ekran-secici { margin-right: auto; min-width: 0; flex: 1 1 260px; }
.ekran-secici select {
  width: 100%; max-width: 520px; font-size: 12.5px; padding: 3px 8px;
}
@media (max-width: 720px) {
  /* Dar ekranda şerit zaten sarıyor; seçici tam satırı alsın. */
  .ekran-secici { flex-basis: 100%; margin-right: 0; }
}

/* --- Belge görüntüleme (EK-2 yıllık değerlendirme) — 20 Eyl 2026 ----------
   ⚠️ Kâğıt zemini `--kart`, sabit beyaz DEĞİL: koyu temada beyaz kutu ekranı
   deler (projedeki "kurala gömülü renk temayı deler" kuralı).
   ⚠️ Tablo yedi sütunlu; dar ekranda **yatay kaydırılır**, sütun gizlenmez —
   eksik sütunlu bir belge, belge değildir. */
.belge-kagit {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 8px;
  padding: 20px 22px; margin-bottom: 18px;
}
.belge-mevzuat {
  text-align: center; color: var(--yazi-soluk); font-size: 12.5px;
  margin: 0 0 14px;
}
.belge-kunye, .belge-tablo, .belge-imza {
  width: 100%; border-collapse: collapse; margin-bottom: 10px;
}
.belge-kunye th, .belge-kunye td,
.belge-tablo th, .belge-tablo td,
.belge-imza th, .belge-imza td {
  border: 1px solid var(--cizgi); padding: 5px 7px; font-size: 12.5px;
  vertical-align: top; text-align: left;
}
.belge-kunye th { width: 22%; background: var(--tablo-baslik-zemin); }
.belge-tablo th { background: var(--tablo-baslik-zemin); font-size: 12px; }
.belge-tablo { display: block; overflow-x: auto; white-space: normal; }
.belge-eksik { margin: 4px 0 6px 18px; }
.belge-tarih { margin: 22px 0 6px; font-weight: 600; }
.belge-imza th { background: var(--tablo-baslik-zemin); text-align: center; }
.belge-imza td { text-align: center; }
.belge-imza .imza-yeri { height: 60px; text-align: left; color: var(--yazi-soluk); }

/* Acil durum ekibi — özet satır + AYRI DETAY SATIRI (24 Eyl 2026).
   🔴 Kullanıcı: *"İlk yardım ve yangınla mücadele ekibinin altı kapalı ama
   çok genişler; ekipler açınca genişletsin."* Üye tablosu `<td>` içindeyken
   o hücre genişliyor ve **sütunun tamamı** — yani kapalı ekiplerin satırları
   da — aynı genişlikte kalıyordu.

   ⚠️ **`:has()` desteklenmeyen tarayıcıda detay AÇIK kalır.** Ters kurulsaydı
   (varsayılan kapalı) üyeler o tarayıcılarda tamamen erişilemez olurdu;
   projenin kuralı "betik/özellik yoksa ekran çalışır". */
.ekip-ac {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; user-select: none;
}
.ekip-ac::before { content: "▸"; font-size: 11px; opacity: .7; }
.ekip-anahtari:checked + .ekip-ac::before { content: "▾"; }
.ekip-detay > td { padding-top: 0; }
@supports selector(tr:has(input)) {
  .ekip-detay { display: none; }
  tr:has(.ekip-anahtari:checked) + .ekip-detay { display: table-row; }
}

/* Ekip üyesi ekleme satırı — açılan ekibin üye listesinin ALTINDA
   (24 Eyl 2026, kullanıcı isteği: *"şu çalışan ekle kısmı… en son altında
   eklensin"*). Eskiden tablonun ayrı bir sütunundaydı ve göz "kimler var"
   ile "kimi ekleyeceğim" arasında iki yere gidiyordu. */
.uye-ekle-satiri {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 8px 0 4px; padding: 8px 10px;
  background: var(--kart); border: 1px dashed var(--cizgi); border-radius: 8px;
}

/* Özet şerit — bir ekranın KOMŞU modüle bakan tek satırlık haberi
   (24 Eyl 2026, özlük ile çalışan modülü ayrılınca). Kart değil bilerek:
   kart "burası bir modül alanı" der, şerit "komşuda şu durum var" der.
   Eksik varsa sarıya döner; kırmızı kullanılmadı — şerit bir uyum rozeti
   değil, kapıdır. Asıl renk ana ekrandaki M06 kartındadır. */
.serit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 9px 13px; margin: 0 0 16px; border-radius: 9px;
  background: var(--kart); border: 1px solid var(--cizgi);
  font-size: 13.5px;
}
.serit-uyari { background: var(--sari-yumusak); border-color: var(--sari-cizgi); }
.serit-ad { font-weight: 600; }
.serit-durum { color: var(--yazi-soluk); }
.serit-uyari .serit-durum { color: var(--sari-yazi); }
.serit-baglanti { margin-left: auto; white-space: nowrap; }

/* Görsel olarak gizli, ekran okuyucuda duran metin (21 Eyl 2026 — ana
   ekran başlığı). `display:none` kullanılmaz: o, metni ekran okuyucudan
   da siler. */
.gorsel-gizli {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0;
}