/* ===== M9 — Giriş & Yetki ===== */
.login-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(135deg, #284b63, #353535);
  display: flex; align-items: center; justify-content: center;
}
.login-overlay[hidden] { display: none; }
.login-box {
  background: var(--panel); border-radius: 6px; padding: 32px 34px;
  width: min(380px, 92vw); box-shadow: 0 20px 50px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 12px; text-align: center;
}
.login-logo img { height: 56px; object-fit: contain; }
.login-box h2 { margin: 4px 0 0; font-size: var(--yazi-baslik); }
.login-alt { margin: 0 0 8px; color: var(--muted); font-size: var(--yazi-md); }
.login-box label { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: var(--yazi-sm); font-weight: 700; color: var(--muted); }
.login-box input { padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--yazi-lg); }
.login-box input:focus { outline: none; border-color: var(--brand); }
.login-box .btn { padding: 10px; font-size: var(--yazi-lg); margin-top: 6px; }
/* Zoprey ID düğmesi TEK giriş yoluyken (internet adresi — telefondan da açılır)
   dokunma hedefi 44 px. Formla birlikteyken "Giriş Yap" ile aynı boyda kalır. */
.login-box #loginZoprey.primary { min-height: 44px; }
.login-hata { color: var(--red); font-size: var(--yazi-md); min-height: 18px; font-weight: 700; }

/* Kenar menü kullanıcı kutusu */
/* Kullanıcı kutusu — sidebar'ın en altı, Yale Blue (paletin 5. rengi) */
.user-box {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; background: var(--brand-dark); color: #fff;
  border-top: 3px solid var(--brand);
}
/* .user-avatar kaldırıldı (2026-09-08) — baş harflerden üretilen daire bilgi
   taşımıyordu. HTML'den de çıkarıldı; kural kalsaydı ölü kalıntı olurdu. */
.user-meta { overflow: hidden; line-height: 1.25; flex: 1; min-width: 0; }
.user-ad { font-weight: 700; color: #fff; font-size: var(--yazi-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-rol { font-size: var(--yazi-xs); color: #a9c2d1; }
.user-cikis {
  flex-shrink: 0; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff;
  border-radius: var(--radius); padding: 4px 9px; font-size: var(--yazi-xs); font-weight: 700; cursor: pointer;
}
.user-cikis:hover { background: rgba(255,255,255,.15); border-color: #fff; }

/* Kullanıcı yönetimi formu */
.kull-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kull-form input, .kull-form select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: var(--yazi-md); }
.pasif-rozet { background: #fee2e2; color: var(--red); padding: 2px 8px; border-radius: 999px; font-size: var(--yazi-sm); font-weight: 700; }
.aktif-rozet { background: var(--green-bg); color: var(--green); padding: 2px 8px; border-radius: 999px; font-size: var(--yazi-sm); font-weight: 700; }

/* Düzenle penceresi: etiket + alan tek hizada. Etiketler satır içiydi ve
   uzunlukları farklı olduğu için her alan başka noktadan başlıyordu —
   dört alan, dört farklı sol kenar. Sabit ilk sütun bunu bitiriyor.

   `>` ŞART: yetki halkaları da <label>. Alt seçici yazıldığında bu kural
   onları da yakalıyor ve her halkayı 92px'lik bir sütuna sıkıştırıp
   "Okuma / Yazma" metnini kırpıyordu — kapsam çakışması. */
.kull-duzen > label { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; }
.kull-duzen > label > input { width: 100%; }

/* ===== YETKİ IZGARASI (rol rozetlerinin yerine, 2026-09-08) =====
   Rol rozetleri (.rol-Master vb.) kalktı: artık rol yok, kategori izni var.
   Tablodaki rozet yalnız ÖZET — "3 yazma · 2 okuma"; ayrıntı Düzenle'de. */
.yetki-rozet { display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: var(--yazi-sm); font-weight: 700; background: var(--panel-2); color: var(--muted); }
.yetki-rozet.tam { background: var(--brand-soft); color: var(--brand-dark); }
.yetki-rozet.yok { background: var(--red-bg); color: var(--red); }
.capa-rozet { cursor: help; }
/* Kullanıcılar tablosu — davet düğmesi taşıyan satır (V4b): eylem hücresi alt
   satıra kırılabilir. Davet düğmeleriyle satırda altı düğme oluyor; tek satırda
   tutmak tabloyu yana taşırıyordu (1280'de 225 px). Yalnız o satırlar kırılır,
   öteki satırlar ve davet düğmesi olmayan oturumlar aynı kalır. */
#kullTablo td.kull-davetli { white-space: normal; }
/* Durum hücresindeki Zoprey ID metni ("Davetli" / "Bağlı"):
   yer daralınca alt satıra kırılır — tek satırda tutmak 1280'de tabloyu 45 px
   yana taşırıyordu. Yalnız yerleşim; renk `muted`. */
#kullTablo td .kull-zoprey-durum { white-space: normal; }

.yetki-izgara { border: 1px solid var(--line); border-radius: 8px; margin-top: 12px; overflow: hidden; }
.yi-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.yi-bas h3 { margin: 0; font-size: var(--yazi-md); }
.yi-toplu { display: flex; gap: 6px; }
/* Ad sütununda PİKSEL TABANI YOK. `minmax(120px, …)` yazılıydı ve dar
   pencerede (düzenle penceresi) o 120px taban halkaları içeri sıkıştırıp
   "Okuma / Yazma"yı 4px kırpıyordu. `1fr`in kendi tabanı min-content:
   yer daralınca önce kategori adı sarmalanıyor, halkalar bozulmuyor. */
.yi-satir { display: grid; grid-template-columns: 1fr auto; gap: 12px;
  align-items: center; padding: 7px 12px; border-top: 1px solid var(--line); }
.yi-satir:first-of-type { border-top: 0; }
.yi-ad { font-size: var(--yazi-md); }
/* GRUP AYRACI (2026-10-07) — "Veri İşleme" gibi. Yetki DEĞİL, ayraç:
   kendi Okuma/Yazma/Yok seçimi yok. Zemin ve küçük büyük harf, tablo
   başlığı kalıbıyla aynı; yeni bir vurgu dili uydurulmadı. */
.yi-grup {
  padding: 6px 12px; background: var(--panel-2); border-top: 1px solid var(--line);
  font-size: var(--yazi-xs); font-weight: 700; color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase;
}
/* ÜÇ EŞİT SÜTUN, sarmalanmayan metin. Esnek yerleşimde halkalar kendi
   metinlerinin genişliğini alıyordu: her satırda başka noktada bitiyor,
   dar pencerede de "Okuma / Yazma" iki satıra kırılıyordu. Sabit ızgara
   ikisini birden çözüyor — göz aşağı doğru tek bir sütun görüyor. */
/* `max-content` alt sınır: sütun metinden dar olamıyor. Sabit piksel
   denendi ve "Okuma / Yazma" 4px taştı — dar pencerede yine taşardı.
   Bütün satırlarda aynı üç etiket olduğu için hizalama kendiliğinden
   tutuyor; kırpılma ihtimali ise tamamen kalkıyor. */
.yi-secimler { display: flex; justify-content: flex-end; }

/* TEK PARÇA ÜÇ DURUMLU SEÇİCİ (P1 v2 §3.3, tasarım paketi `yetki-secici.css`).
   Eskiden üç AYRI yuvarlak rozet vardı ve aralarında boşluk bulunuyordu:
   birbirini dışlayan tek bir seçim, üç bağımsız düğme gibi görünüyordu.
   Bitişik parçalar bunu biçimle söylüyor — seçili olan dolu, ötekiler nötr.

   Radyo düğmesi görünmüyor ama DURUYOR: klavye ve ekran okuyucu onunla
   geziyor. Gizleseydik (display:none) sekme sırasından da düşerdi. */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius);
  overflow: hidden; background: var(--panel); }
.seg label { position: relative; height: 26px; padding: 0 10px; display: inline-flex; align-items: center;
  border-left: 1px solid var(--line-strong); font-size: var(--yazi-sm); color: var(--muted);
  cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.seg label:first-child { border-left: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:focus-visible + span { box-shadow: var(--odak); }
/* Durum renkleri durum kümesinden (§2): kehribar/yeşil/kırmızı seri değil. */
.seg label.yaz:has(input:checked) { background: var(--brand);      color: #fff;              font-weight: 700; }
.seg label.oku:has(input:checked) { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.seg label.yok:has(input:checked) { background: var(--red-bg);     color: var(--red);        font-weight: 700; }

/* Özet rozeti — "3 yazma · 5 okuma · 4 yok" */
.yi-ozet { margin-right: auto; font-size: var(--yazi-sm); color: var(--muted); font-variant-numeric: tabular-nums; }

.uyari-kutu { background: #fef9c3; border: 1px solid #fde047; border-radius: 8px;
  padding: 10px 12px; font-size: var(--yazi-sm); color: #713f12; }

/* Yetkisiz öğeleri gizle */
[data-yetki-gizli] { display: none !important; }

/* Salt okuma (yalnız okuma izni olan ekran): yazma butonları gizli, alanlar pasif */
body.salt-okuma .btn.primary,
body.salt-okuma .btn.del,
body.salt-okuma .upload-nav,
body.salt-okuma .add-row,
body.salt-okuma .ted-form,
body.salt-okuma .uf-arac,
body.salt-okuma .kull-form { display: none !important; }
body.salt-okuma select,
body.salt-okuma input[type="checkbox"],
body.salt-okuma input[type="number"],
body.salt-okuma textarea { pointer-events: none; opacity: .65; }
/* Excel dışa aktarma read-only → İzleyici de görebilir */
body.salt-okuma #urunExcel { display: inline-block !important; }

/* ===== M11 — Üretim modeli & süreç takibi ===== */
/* Ürün kartı: metod editörü (virgülle) */
.metod-kutu { margin: 12px 0; }
.metod-kutu > h5, .parca-kutu > h5 { margin: 0 0 6px; font-size: var(--yazi-lg); }
.metod-duz { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.metod-girdi { flex: 1; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: var(--yazi-md); }
/* Metod seçici (master metodlardan; sıralı chip) */
.metod-sec { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.metod-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.metod-chip { display: inline-flex; align-items: center; gap: 3px; background: #dbe9e9; color: #284b63; border-radius: 999px; padding: 2px 4px 2px 9px; font-size: var(--yazi-sm); font-weight: 700; }
/* Tıklama alanı 14×14 idi — fareyle isabet zor, dokunmatikte imkânsız.
   Görsel ağırlık aynı kalıyor, yalnız hedef büyüyor. */
.metod-chip .mc-sil { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: 0; background: none; color: var(--brand-dark); cursor: pointer;
  font-size: var(--yazi-lg); line-height: 1; padding: 0; border-radius: var(--radius); }
.metod-chip .mc-sil:hover { color: var(--red); }
/* Metod ekleme: açılır liste değil, dinamik aramalı metin kutusu (kod ya da ad) */
.mc-ara-kutu { position: relative; flex: 1; min-width: 200px; }
.mc-ara { width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: var(--yazi-md); background: #fff; font-family: inherit; }
.mc-ara:focus { outline: none; border-color: var(--brand); }
.mc-oneri {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: 4px;
  list-style: none; background: #fff; border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12); max-height: 240px; overflow-y: auto;
}
.mc-oneri-satir { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; cursor: pointer; font-size: var(--yazi-md); }
.mc-oneri-satir:hover, .mc-oneri-satir.sec { background: #dbe9e9; color: var(--brand-dark); }
.mc-bos { padding: 6px 8px; font-size: var(--yazi-sm); color: var(--muted); }

/* Metod paneli (A1) — senkron bar + arama + paylaşımlı chip bulutu */
.senkron-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #eef1f1; border: 1px solid #d9d9d9; border-radius: var(--radius); padding: 7px 10px; margin-bottom: 10px; font-size: var(--yazi-sm); color: #1e40af; }
.senkron-bar .senkron-info { line-height: 1.4; }
.metod-ara { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 10px; }
.metod-grup { margin-bottom: 14px; }
.metod-grup .grup-baslik { font-size: var(--yazi-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 4px 0 8px; }
/* Yan yana sütunlu metod/operasyon listesi — sütun başına 20 satır */
.metod-cloud, .ted-op-liste {
  display: flex; flex-flow: column wrap; align-content: flex-start;
  box-sizing: content-box;
  gap: 0 18px; overflow-x: auto; overflow-y: hidden;
}
/* Sütun yüksekliği = satır sayısı × 30px. Sütun sayısı buradan çıkar: liste ne kadar
   uzunsa o kadar sütun oluşur ve yana doğru büyür.
   Modal DAR olduğu için 20 satır (3 sütun sığar); sayfa içindeki operasyon listeleri
   GENİŞ olduğu için 10 satır — boş yatay alan sütuna dönüşsün, aşağı uzamasın. */
.metod-cloud { max-height: 600px; }
.ted-op-liste { max-height: 300px; }
.metod-cloud > .metod-ro, .ted-op-liste > label {
  display: flex; align-items: center;
  height: 30px; flex: 0 0 30px; box-sizing: border-box;
  border-bottom: 1px solid var(--line);
}
/* Satır genişlikleri farklı: modalda birim seçici var, yer gerekiyor. Operasyon
   listeleri ise 10 satır × 5 sütun olacak biçimde daha dar — 1440px ekranda bile
   yatay kaydırmaya düşmesin (5×208 + 4×18 = 1112px). Sığmayan ad ellipsis'e düşer. */
.metod-cloud > .metod-ro { width: 250px; }
.ted-op-liste > label { width: 208px; }
.metod-cloud { padding: 2px; }
.metod-ro { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: var(--yazi-sm); padding: 0 6px; }
.metod-ro:hover { background: #eef1f1; }
.metod-ro .no { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 5px; background: var(--brand); color: #fff; border-radius: var(--radius); font-size: var(--yazi-xs); font-weight: 700; flex-shrink: 0; }
/* Ad TEK SATIR: sığmayan uzun ad (ör. "Poliüretan Akrilik Boya") sarmalanıp satırı
   yükseltiyor ve sütun hizasını kaydırıyordu. Artık üç nokta ile kesiliyor; tamamı
   title'da duruyor. min-width:0 şart — flex öğesi varsayılan olarak içeriğinden
   küçülmez, onsuz ellipsis hiç devreye girmez. */
.metod-ro > span, .ted-op-liste > label > span:not(.op-no) {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Kod rozeti ve kategori etiketi sabit kalır — daralan yalnız ad olsun */
.ted-op-liste > label > .op-no, .ted-op-liste > label > input,
.ted-op-liste > label > .op-kat-etiket { flex-shrink: 0; }

/* ===== TEDARİKÇİ FORMU — İKİ SÜTUN (2026-09-06) =====
   Kullanıcı isteği, ekran görüntüsüyle: solda operasyon listesi, sağda firma
   bilgileri.

   ÖNCEKİ DÜZENİN SORUNU YATAY KAYDIRMAYDI. Liste `column wrap` ile sütunlara
   sarılıp `overflow-x` ile yana kayıyordu; 40+ operasyonda sağdaki kategoriler
   ekranın dışında kalıp "Kat…" diye kesiliyordu. Yatay kaydırma bir listede en
   kötü çözüm — orada bir şey olduğu bile görünmüyor.

   Sol sütun SABİT GENİŞLİKTE: operasyon adları benzer uzunlukta ve esneyen bir
   liste sağdaki formu gereksiz daraltırdı. Sağ sütun kalanı alıyor. */
.ted-govde { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--bosluk-5); align-items: start; }
.ted-sol { min-width: 0; }
.ted-sag { min-width: 0; display: flex; flex-direction: column; gap: var(--bosluk-4); }
.ted-sol .ted-op-ara { width: 100%; box-sizing: border-box; margin-bottom: var(--bosluk-2); }

/* Liste TEK SÜTUN ve DİKEY kayıyor — sarma davranışı burada iptal.
   Seçicilerin özgüllüğü yukarıdaki paylaşımlı kurallarla eşit ya da yüksek;
   `.metod-cloud` etkilenmiyor (o modalda hâlâ sütunlara sarılıyor). */
.ted-sol .ted-op-liste {
  display: block; max-height: 460px; overflow-y: auto; overflow-x: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--bosluk-2);
  background: var(--panel);
}
.ted-sol .ted-op-liste > .ted-op-grup > label { width: auto; }
/* SATIR YÜKSEKLİĞİ tıklanabilir olmalı. Sarma düzenindeki `height: 30px`
   kuralı yalnız DOĞRUDAN çocukları hedefliyordu; etiketler kategori
   sarmalayıcısının içinde olduğu için hiç uygulanmıyordu ve satırlar 15px'e
   düşüyordu — kutucuğu ıskalamak kolay. */
.ted-sol .ted-op-liste label[data-ad] {
  width: auto; display: flex; align-items: center; gap: 7px;
  min-height: 26px; padding: 2px var(--bosluk-2) 2px var(--bosluk-4);
  border-radius: var(--radius); cursor: pointer;
}
.ted-sol .ted-op-liste label[data-ad]:hover { background: #eef1f1; }
.ted-sol .ted-op-kat { display: flex; align-items: center; gap: 7px;
  min-height: 28px; padding: 2px var(--bosluk-2); cursor: pointer;
  border-bottom: 1px solid var(--line); margin-bottom: 2px; }

/* Sağdaki alanlar ALT ALTA, iki sütunlu ızgarada değil: altı alan yan yana
   dizilince her biri daralıyor ve e-posta gibi uzun değerler kesiliyordu. */
.ted-sag .ted-kimlik { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--bosluk-3); }
.ted-alan-blok { display: flex; flex-direction: column; gap: 4px; }
.ted-alan-blok > label { display: flex; flex-direction: column; gap: 4px; }
.ted-alan-blok select, .ted-alan-blok input { width: 100%; box-sizing: border-box; }
/* Süre bloğu ana operasyonun hemen altında ve görsel olarak ona bağlı:
   soldaki çizgi ikisinin bir arada okunması gerektiğini söylüyor. */
.ted-sure { border-left: 2px solid var(--brand); padding-left: var(--bosluk-3); }
.ted-sure input { max-width: 160px; }

/* Dar ekranda alt alta: 340px liste + form yan yana sığmıyor ve iki sütunu
   zorlamak ikisini birden okunmaz yapardı. */
@media (max-width: 1100px) {
  .ted-govde { grid-template-columns: 1fr; }
  .ted-sol .ted-op-liste { max-height: 300px; }
}
.ok-flash { color: var(--green); font-weight: 700; margin-left: 4px; }
.uyari-metin { color: var(--amber); font-weight: 700; }

/* ===== ROL ŞABLONLARI MATRİSİ (KDE-0046) =====

   Kullanıcı 2026-10-10: "Sütun değerlerinde kısaltma kullanılmalı — Okuma
   için O, Okuma/Yazma için O/Y ve Giriş izni yok içinde -", gerekçesi de
   kendisinin: "o zaman tablo küçülür ve daha anlaşılır olur."

   Eskiden her hücre tam genişlikte bir `<select>`ti; on kategoride tablo
   yatay kayıyordu. Artık iki üç karakterlik okunur metin — düzenleme satırın
   Düzenle düğmesinden pencerede yapılıyor.

   RENK TEK BAŞINA ANLAM TAŞIMIYOR: harf zaten değeri söylüyor, renk onu
   pekiştiriyor. Renk körü bir okuyucu da "O/Y" ile "O"yu ayırt ediyor. */
.rol-iz { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
#rolTablo th.rol-iz { text-align: center; font-weight: 700; }
.rol-iz-yazma { color: var(--brand-dark); }
.rol-iz-okuma { color: var(--text); }
/* "—" ikincil: yetkisizlik satırın baskın okuması olmamalı, göz dolu
   hücrelere gitsin. */
.rol-iz-yok { color: var(--muted); font-weight: 400; }
#rolTablo .rol-ad-h { white-space: nowrap; }