/* İ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;
  --yazi-soluk: #6a6e78;

  /* 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;

  /* 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;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--yazi);
  background: var(--zemin);
}

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

/* ---------- 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;
  background: linear-gradient(168deg, #2d2166 0%, var(--yan-menu) 45%, #1a1339 100%);
  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;
}

.yan-menu nav { padding: 10px 0; flex: 1; overflow-y: auto; }
.yan-menu nav a {
  display: block; padding: 9px 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 {
  background: linear-gradient(90deg, rgba(92,124,250,.30), rgba(92,124,250,.05));
  color: #fff; border-left-color: var(--mavi-acik); font-weight: 600;
}
.yan-menu nav .baslik {
  padding: 14px 18px 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: #8f86c8; 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; }
.yan-menu .menu-grup > summary.baslik:hover { color: #cfc7ff; }
/* 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. */
.yan-menu .menu-grup:not([open]) > summary.baslik { padding-bottom: 10px; }
.yan-menu .alt {
  padding: 12px 18px; border-top: 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 { color: #b9a8f5; 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;
}

.icerik { flex: 1; min-width: 0; padding: 22px 26px 40px; }
.ust-satir {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
h1 { font-size: 20px; font-weight: 600; margin: 0; }
h2 { font-size: 16px; font-weight: 600; margin: 26px 0 12px; }

/* ---------- 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;
  background: conic-gradient(var(--mavi) calc(var(--oran) * 1%),
                             rgba(59,91,219,.14) 0);
}
.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); }
/* 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; }
}

/* ---------- Modül kartları ---------- */
.kartlar {
  display: grid; gap: 12px;
  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-izgarasi .kart { padding: 13px 13px 15px; }
#kart-izgarasi .kart-ikon { font-size: 19px; margin-bottom: 5px; }
#kart-izgarasi .kart .ad { font-size: 13.5px; line-height: 1.25; }
#kart-izgarasi .kart .durum { font-size: 12px; line-height: 1.3; }
#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. */
@media (max-width: 1700px) { #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)); } }

/* ⚠️ "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: 13px 13px 15px; }
#modul-ekle-izgarasi .kart-ikon { font-size: 19px; margin-bottom: 5px; }
#modul-ekle-izgarasi .kart .ad { font-size: 13.5px; line-height: 1.25; }
#modul-ekle-izgarasi .kart .durum { font-size: 12px; line-height: 1.3; }
#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;
  background: rgba(59,91,219,.10);
}
.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;
  background: rgba(59,91,219,.12); color: var(--mavi);
}
/* Ö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; }
.kart-kaldir { position: absolute; right: 8px; bottom: 7px; opacity: .5; }
.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; }
.tablo th {
  text-align: left; font-size: 12px; font-weight: 700; color: #4b3fa8;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 11px 12px; border-bottom: 2px solid #ddd8f5;
  background: linear-gradient(180deg, #f3f0ff, #eceaff);
}
.tablo td { padding: 10px 12px; border-bottom: 1px solid var(--cizgi); font-size: 13.5px; }

/* 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ı. */
.tablo td.satir-islem { white-space: nowrap; text-align: right; }
.tablo td.satir-islem .dugme { padding: 4px 10px; font-size: 12.5px; }
.tablo td.satir-islem a { display: block; margin-top: 3px; }
.tablo tr:last-child td { border-bottom: none; }
.tablo tr:hover td { background: #f7f5ff; }
.sarma { overflow-x: auto; }

/* ---------- 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;
  background: rgba(59,91,219,.10); color: var(--mavi);
  border: 1px solid rgba(59,91,219,.18);
}
.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); }

.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);
}
select:focus, input:focus { outline: 3px solid rgba(92,124,250,.28); border-color: var(--mavi); }
.dugme {
  font: inherit; font-weight: 600; padding: 9px 18px; border: 0;
  border-radius: 9px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--mavi-acik), var(--mor));
  box-shadow: 0 2px 8px rgba(112,72,232,.28);
}
.dugme:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(112,72,232,.35); }
.dugme.sade {
  background: var(--kart); color: var(--yazi); border: 1px solid var(--cizgi-koyu);
  box-shadow: none;
}
.dugme.sade:hover { border-color: var(--mavi); color: var(--mavi); filter: none; }

/* ---------- Giriş ---------- */
.giris-sayfa {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2d2166 0%, #3b2d8f 45%, #6c3fb5 100%);
}
.giris-kutu {
  background: var(--kart); padding: 30px 32px; border-radius: 16px; width: 360px;
  box-shadow: 0 18px 50px rgba(20,12,60,.35);
  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. */
.firma-cubugu {
  background: linear-gradient(90deg, #eef0ff, #f6edff);
  border: 1px solid #d9d5f7; border-left: 5px solid var(--mor);
  border-radius: var(--yuvarlak);
  padding: 10px 15px; margin-bottom: 16px; font-size: 13.5px;
}
.firma-satir-kimlik {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.firma-ad { font-size: 15px; }
.firma-ad b { font-size: 16px; }
/* İş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: 26px; max-width: 120px; width: auto;
  object-fit: contain; vertical-align: middle;
  align-self: center;
}
.firma-amblem.kurum { height: 24px; opacity: .92; }
.firma-cubugu a { color: var(--mavi); 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: 10px; flex-wrap: wrap;
  margin-top: 5px; padding-top: 5px;
  border-top: 1px dashed rgba(90,80,160,.22);
}
.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; }
.plan-matris td { vertical-align: middle; }

.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; }

/* ---------- 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 tr:hover td { background: #f7f5ff; }

.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; background: #eceaff; }
.uyum-matris tr:hover .isyeri-sutun { background: #f7f5ff; }
.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: #4b3fa8;
}

/* ⚠️ **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 vurgusu hücre kutularını ezmesin: yalnız zemin değişir. */
.uyum-matris tr:hover td.hucre { background: #faf9ff; }

/* 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; color: #4b3fa8;
  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; color: #4b3fa8;
  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.

   ⚠️ 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 { letter-spacing: .04em; }
.yan-menu nav a.aktif { background: rgba(var(--vurgu-rgb), .18); }
.yan-menu nav .baslik { color: var(--yan-menu-baslik); }
.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); }

/* ---------- 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);
}
.kart .rozet {
  border-radius: var(--yuvarlak-rozet);
  background: rgba(var(--vurgu-rgb), .12);
  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);
  letter-spacing: .05em;
}
.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: .06em;
  text-transform: uppercase;
}
.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); }
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-color: rgba(var(--vurgu-rgb), .20); }

/* ---------- 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); }
.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: .02em; text-transform: uppercase; font-weight: 800; }

/* ===================================================================
   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; }

@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: 14px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.uyari-eylemli p { margin: 0; flex: 1; min-width: 240px; }
.uyari-eylemli .dugme { flex: none; white-space: nowrap; }

/* 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;

  /* 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);
}

/* ============================================================
   ⭐ 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, #fb7a3c);
}

/* ⭐ 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. */
.baglanti-dugme {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--bag, #2b5cd9);
  text-decoration: underline; cursor: pointer;
}
.baglanti-dugme:hover { color: var(--kirmizi-yazi, #b42318); }