/* İ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 {
  /* Yan menü — lacivertten mora giden canlı bir geçiş */
  --yan-menu: #241b4e;
  --yan-menu-koyu: #1a1339;
  --yan-menu-yazi: #c3bde4;
  --yan-menu-aktif: #3a2d75;
  --zemin: #f5f7fd;
  --kart: #ffffff;
  --cizgi: #e4e7f4;
  --cizgi-koyu: #c6cbe6;
  --yazi: #1d2140;
  --yazi-soluk: #6a7091;

  /* Anlam renkleri — daha doygun, anlamları aynı */
  --yesil-zemin: #e3f8ea;  --yesil-cizgi: #58c47c;  --yesil-yazi: #12693a;
  --sari-zemin:  #fff3d9;  --sari-cizgi:  #f5b13c;  --sari-yazi:  #8a5406;
  --kirmizi-zemin: #ffe8ea; --kirmizi-cizgi: #f0566b; --kirmizi-yazi: #a4102a;

  /* ⚠️ **YUMUŞAK TONLAR — 19 Ağustos 2026, kullanıcı isteği.** Kart zemini
     bu tonlardan beyaza akar: *"buradaki kırmızı daha yumuşak, bizimki gibi
     sert değil"*. Bunlar YALNIZ zemin geçişinde kullanılır; çizgi, rozet
     yazısı ve uyarı kutuları eski (okunaklı) tonlarda kaldı — kırmızıyı her
     yerde soluklaştırmak, geciken evrakı göz ucuyla görünmez yapardı. */
  --yesil-yumusak:  #eefbf3;
  --sari-yumusak:   #fff8ec;
  --kirmizi-yumusak: #fdeff1;

  /* Vurgu renkleri */
  --mavi: #3b5bdb;
  --mavi-acik: #5c7cfa;
  --mor: #7048e8;
  --turkuaz: #0ca678;
  --turuncu: #f76707;
  --pembe: #e64980;

  --yuvarlak: 12px;
  --golge: 0 1px 2px rgba(29,33,64,.06), 0 6px 16px rgba(29,33,64,.06);
  --golge-hover: 0 2px 4px rgba(29,33,64,.08), 0 12px 28px rgba(29,33,64,.13);
}

* { 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(--mavi); 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; }

.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ı). */
.yan-menu .alt a { color: #b9a8f5; margin-left: 2px; }
.yan-menu .alt a:hover { color: #fff; }

.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, #eef2ff 0%, #f7f4ff 45%, #ffffff 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: #fff;
  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: #fff; 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. */
#kart-izgarasi { grid-template-columns: repeat(5, 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). */
@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%, #fff 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%, #fff 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%, #fff 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. */
.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); }
/* 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: #fff; }
.isaret.sari    { background: var(--sari-cizgi);    color: #fff; }
.isaret.kirmizi { background: var(--kirmizi-cizgi); color: #fff; }

.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: #fff; 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: #fff; 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: #fff; 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 ---------- */
.firma-cubugu {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(90deg, #eef0ff, #f6edff);
  border: 1px solid #d9d5f7; border-left: 5px solid var(--mor);
  border-radius: var(--yuvarlak);
  padding: 9px 15px; margin-bottom: 16px; font-size: 13.5px;
}
.firma-cubugu a { color: var(--mavi); font-size: 13px; }
.firma-cubugu a:last-child { margin-left: auto; color: var(--yazi-soluk); }

/* Künye çubuğun İÇİNDE, tek satırın devamı olarak (kullanıcı isteği).
   Alanlar arasına ayraç: her `span` kendi anlamını taşır, nokta onları ayırır. */
.firma-cubugu > 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); }