/* Lot izi — izin tam olup olmadığı müşteriye verilecek cevabın güvenilirliği */
.lot-tam { padding: 2px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: var(--yazi-xs); font-weight: 700; }
.lot-eksik { color: var(--amber); font-size: var(--yazi-xs); font-weight: 700; cursor: help; }
.lot-tablo { width: 100%; border-collapse: collapse; font-size: var(--yazi-sm); margin-top: 8px; }
.lot-tablo th { padding: 5px 8px; border-bottom: 1.5px solid var(--line-strong); font-size: var(--yazi-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: center; }
.lot-tablo td { text-align: center; }
.lot-tablo th.num, .lot-tablo td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lot-tablo td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.lot-kart { display: flex; gap: 24px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.lot-kart div { display: flex; flex-direction: column; gap: 2px; }
.lot-kart span { font-size: var(--yazi-xs); }

/* ==========================================================================
   Eras VCRM — bilesenler.css
   Mevcut sınıf adları korunmuştur. Yeni sınıflar "YENİ" notuyla işaretli.
   Gerektirir: tokens.css
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* UYGULAMA UYARLAMASI — `hidden` her zaman kazanır.
   Uygulama görünürlüğü 53 yerde `el.hidden = ...` ile yönetiyor; bu dosyada 54 kural
   `display:` veriyor. Bir bileşene display verildiği anda tarayıcının
   `[hidden]{display:none}` varsayılanı ezilir ve gizli olması gereken öğe görünür
   (boş uyarı şeritleri 26px yer kaplıyordu). Prototipte çıkmıyor çünkü o kendi render
   mantığını kullanıyor, `hidden` ile göstermiyor. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--yazi-md);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; font-weight: 700; }
a:hover { color: var(--brand-dark); }

/* Başlıklar ve `small` ÖLÇEĞE bağlı.
   Stilsiz bırakılan `h2`/`h3`/`small` tarayıcı varsayılanıyla (em katsayısı)
   ölçülüyordu: aynı sayfada 15.795px, 20.25px, 11.25px, 10.4167px gibi ölçekte
   olmayan boylar çıkıyordu — `small` içinde bulunduğu kutuya göre her yerde
   farklı büyüklükteydi. Sabit basamaklara bağlandı. */
h1, h2 { font-size: var(--yazi-baslik); }
h3, h4 { font-size: var(--yazi-lg); }
h5, h6 { font-size: var(--yazi-md); }
small { font-size: var(--yazi-sm); }

/* Odak: klavye gezinmesi her yerde görünür */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--odak);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   1 · BUTON
   -------------------------------------------------------------------------- */
/* Buton yazısı GÖVDEDEN KALIN. Taban 400'dü: dolu butonlar (primary/ikincil)
   700 taşıyordu ama çerçeveli, nötr ve ghost butonlar tablo metniyle aynı
   kalınlıktaydı — tıklanabilir olduğu yazıdan değil yalnız kenarlıktan
   anlaşılıyordu. 600 ikisinin arasını açıyor; 700 dolu butonlara kalıyor ki
   birincil eylem hâlâ öne çıksın. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bosluk-2);
  height: var(--row-h); padding: 0 var(--bosluk-4);
  font: inherit; font-size: var(--yazi-md); font-weight: 700; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
/* DÜĞME HER ZAMAN TEK SATIR. `<label class="btn">` biçimindeki dosya yükleme
   düğmeleri, içinde bulundukları formun `label` kuralını yiyip sütuna
   dönüşebiliyor (ölçüldü 2026-09-09: "BOM Excel Yükle" ikonu metnin üstüne
   geçmişti). Tip + sınıf seçicisi form kurallarıyla aynı ağırlıkta ve bu
   dosya sonra yüklendiği için kazanıyor. */
label.btn, button.btn, a.btn { flex-direction: row; white-space: nowrap; }
.btn:hover { background: var(--brand-soft); border-color: var(--brand); }
.btn:active { background: var(--hover); }
.btn[disabled], .btn.disabled {
  color: var(--faint); background: var(--panel-2);
  border-color: var(--line); cursor: default;
}
.btn.primary {
  color: #fff; font-weight: 700;
  background: var(--brand); border-color: var(--brand);
}
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
/* İKİNCİL DOLU — Yale Blue (#284b63). Yan yana duran iki eylemden ikincisi
   için: birincil teal, ikincil lacivert, ikisi de dolu ve okunur. Ghost'la
   ayrımı şu: ghost "isterse tıklar", ikincil "bu da gerçek bir eylem".
   Palet: Stormy Teal · Yale Blue · Dust Grey · Graphite. */
.btn.ikincil {
  color: #fff; font-weight: 700;
  background: var(--brand-dark); border-color: var(--brand-dark);
}
.btn.ikincil:hover { background: var(--chrome); border-color: var(--chrome); }

/* NÖTR DOLU — Dust Grey (#d9d9d9). Ne birincil ne yıkıcı: "Düzenle", "Sayım"
   gibi sıradan ama düğme olduğu belli olması gereken eylemler. Ghost bunları
   metin gibi gösteriyordu, tıklanabilir olduğu anlaşılmıyordu. */
.btn.notr {
  color: var(--ink); background: var(--line); border-color: var(--line-strong);
}
.btn.notr:hover { background: var(--line-strong); }

.btn.ghost { color: var(--brand); background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--brand-soft); }
.btn.del { color: var(--red); border-color: var(--red-line); }
.btn.del:hover { background: var(--red-bg); border-color: var(--red); }
/* PASİF DÜĞME VARYANTINI EZMESİN (Selim 2026-09-29, ekran notu [39]): yukarıdaki
   `.btn[disabled]` ile `.btn.del` aynı ağırlıkta ve `.del` SONRA yazıldığı için
   pasif "Sil" kırmızı yazısıyla etkin görünüyordu — basınca tepki yoktu.
   `aria-disabled`: tıklanabilir kalıp nedenini söyleyen pasif düğme
   (toplu silme kipinde seçim yokken). */
.btn[aria-disabled="true"],
.btn.del[disabled], .btn.del[aria-disabled="true"],
.btn[aria-disabled="true"]:hover, .btn.del[disabled]:hover {
  color: var(--faint); background: var(--panel-2); border-color: var(--line); cursor: default;
}
.btn.sm { height: var(--tik-h); padding: 0 var(--bosluk-3); font-size: var(--yazi-sm); }
.btn.yukleniyor { color: transparent; position: relative; pointer-events: none; }
.btn.yukleniyor::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: var(--muted); animation: btn-don .7s linear infinite;
}
@keyframes btn-don { to { transform: rotate(360deg); } }

/* Buton grubu (yoğunluk anahtarı, segment) — YENİ */
.btn-grup { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.btn-grup > button {
  height: var(--row-h); padding: 0 var(--bosluk-3); font: inherit; font-size: var(--yazi-sm); font-weight: 700;
  color: var(--muted); background: var(--panel); border: 0; border-left: 1px solid var(--line); cursor: pointer;
}
.btn-grup > button:first-child { border-left: 0; }
.btn-grup > button[aria-pressed="true"] { color: #fff; background: var(--brand); }

/* --------------------------------------------------------------------------
   2 · PANEL · ARAÇ ÇUBUĞU · KART
   -------------------------------------------------------------------------- */
.panel, .card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel { margin-bottom: var(--bosluk-4); }
.panel > h2 {
  margin: 0; padding: var(--bosluk-3) var(--bosluk-4);
  font-size: var(--yazi-lg); font-weight: 700; border-bottom: 1px solid var(--line);
}
.panel > h2 small { font-weight: 400; font-size: var(--yazi-sm); color: var(--faint); }
.panel-ayak { padding: var(--bosluk-3) var(--bosluk-4); background: var(--panel-2); font-size: var(--yazi-sm); color: var(--muted); }

.toolbar {
  display: flex; align-items: center; gap: var(--bosluk-2); flex-wrap: wrap;
  padding: var(--bosluk-3) var(--bosluk-4); border-bottom: 1px solid var(--line);
}
.toolbar .sag { margin-left: auto; display: flex; align-items: center; gap: var(--bosluk-2); }
/* ESNEK ARALIK — 15 yerde `<span class="bosluk">` yazılıydı ama KURALI YOKTU
   (ölçüldü 2026-09-09): boşluk sıfır genişlikte kalıyor, ardındaki düğme
   sağa değil solda kalan öğenin dibine yapışıyordu. `.sag` sarmalayıcısıyla
   aynı işi tek etiketle yapıyor. */
.bosluk { flex: 1 1 auto; min-width: 0; }

/* KPI kartı: sol kenarı durum rengi taşır */
.card { border-left: 4px solid var(--brand); padding: var(--bosluk-3) var(--bosluk-4); }
.card .sayi { font-size: var(--yazi-sayi); font-weight: 700; line-height: 1.1; }
/* UYGULAMA UYARLAMASI: bizim KPI kartları `.num` kullanıyor (ekranlar/ortak.js `kartHTML`), tasarım `.sayi`ya
   geçmiş. İkisi de büyük rakam olsun; `.num`un tablo hizası KPI içinde geçersiz kılınır. */
.card .num  { font-size: var(--yazi-sayi); font-weight: 700; line-height: 1.1;
              text-align: left; padding-right: 0 !important; }
.card.red .num { color: var(--red); } .card.amber .num { color: var(--amber); } .card.green .num { color: var(--green); }
/* Eski tip sınıfları da aynı renkleri versin (tip-geciken vb. ekranlar/ortak.js `TIP_KARTLAR`ta üretiliyor) */
.card.tip-geciken { border-left-color: var(--amber); } .card.tip-geciken .num { color: var(--amber); }
.card.tip-kesin   { border-left-color: var(--brand); }
.card.tip-ongorulen { border-left-color: var(--green); } .card.tip-ongorulen .num { color: var(--green); }
/* Bizim tıklanabilir kart sınıfı `.clickable`, tasarımınki `.tikla` */
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: var(--line-strong); border-left-color: var(--brand-dark); }
.card .lbl { font-size: var(--yazi-sm); font-weight: 700; color: var(--muted); margin-top: 3px; }
.card .alt { font-size: var(--yazi-sm); color: var(--faint); }
.card.red   { border-left-color: var(--red); }   .card.red .sayi   { color: var(--red); }
.card.amber { border-left-color: var(--amber); } .card.amber .sayi { color: var(--amber); }
.card.green { border-left-color: var(--green); } .card.green .sayi { color: var(--green); }
.card.tikla { cursor: pointer; }
.card.tikla:hover { border-color: var(--line-strong); border-left-color: var(--brand-dark); }

/* --------------------------------------------------------------------------
   3 · SEKME
   -------------------------------------------------------------------------- */
/* `overflow-x: auto` tek başına yazılınca dikey eksen de `auto` oluyor; sekmenin
   1px'lik alt çizgisi içeriği kutudan taşırıp 15px'lik bir DİKEY kaydırma çubuğu
   çıkarıyordu (sekme şeridinin sağ üstünde küçük bir kaydırıcı görünüyordu).
   Dikey eksen açıkça kapatıldı — sekmeler yalnız yatayda kayar. */
.sekme-bar { display: flex; gap: 0; padding: 0 var(--bosluk-3); background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
.sekme {
  padding: 0 var(--bosluk-4); height: 48px; white-space: nowrap;
  font: inherit; font-size: var(--yazi-lg); font-weight: 400; color: var(--muted);
  background: transparent; border: 0; border-bottom: 3px solid transparent; cursor: pointer;
}
.sekme:hover { color: var(--ink); background: var(--hover); }
.sekme.aktif { color: var(--ink); font-weight: 700; border-bottom-color: var(--brand); }
.sekme-say { margin-left: var(--bosluk-2); font-size: var(--yazi-sm); color: var(--faint); }
/* UYGULAMA UYARLAMASI: sekme PANELİ `hidden` attribute'uyla açılıp kapanıyor
   (ekranlar/*.js: ayarlar, isemirleri, urun-listesi… `x.hidden = …`), `.aktif` sınıfıyla değil. Her iki sözleşme de desteklenir. */
.sekme-icerik { display: block; }
.sekme-icerik[hidden] { display: none; }
.sekme-icerik.aktif { display: block; }

/* Dar ekran: sekme yerine çip şeridi */
@media (max-width: 720px) {
  .sekme-bar { gap: var(--bosluk-1); padding: var(--bosluk-2); border-bottom: 0; }
  .sekme { height: var(--row-h); border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: var(--yazi-md); }
  .sekme.aktif { color: #fff; background: var(--brand); border-color: var(--brand); }
}

/* --------------------------------------------------------------------------
   4 · ROZET
   -------------------------------------------------------------------------- */
.badge, .tip-badge, .ym-tip, .fis-durum {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  font-size: var(--yazi-xs); font-weight: 700; white-space: nowrap;
  color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.badge.bilgi,  .tip-badge.tip-kesin,      .ym-tip.uretilen { color: var(--brand-dark); background: var(--brand-soft); border-color: var(--brand-line); }
.badge.basari, .fis-durum.tamam, .tip-badge.tip-ongorulen { color: var(--green); background: var(--green-bg); border-color: var(--green-line); }
.badge.uyari,  .tip-badge.tip-geciken,    .ym-tip.satinalma { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); }
.badge.hata                               { color: var(--red); background: var(--red-bg); border-color: var(--red-line); }
.badge.birim { font-weight: 400; background: var(--panel); border-color: var(--line); }        /* dk/adet */
.badge.birim-gun { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); } /* gün · kapasite tüketmez */

/* --------------------------------------------------------------------------
   5 · TABLO — ürünün omurgası
   -------------------------------------------------------------------------- */
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.table-wrap > table { width: 100%; border-collapse: collapse; }

/* SAYFALAMA — tablonun altında, ORTADA (kullanıcı kararı 2026-09-09).
   Uçlarda çift ok başa/sona atlar, tekler bir sayfa gider, ortada üç
   numara durur. Sona geldiğinde düğme siliniyor değil PASİFLEŞİYOR: yerini
   koruyor, yoksa çubuk her sayfada bir kayardı. */
/* ÜÇ BÖLGE: solda boşluk, ORTADA düğmeler, sağda satır sayısı seçici.
   Izgara — esnek kutuda seçicinin genişliği düğmeleri merkezden kaydırırdı;
   eşit yan sütunlarla orta gerçekten orta kalıyor. */
.sayfalama {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; margin-top: var(--bosluk-3);
}
.sayfalama:empty { display: none; }
.syf-orta { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.syf-boy { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: var(--yazi-sm); color: var(--muted); }
.syf-boy-sec {
  height: 30px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); font: inherit; font-size: var(--yazi-sm);
}
.syf-ok, .syf-no {
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--muted);
  font: inherit; font-size: var(--yazi-sm); font-variant-numeric: tabular-nums; cursor: pointer;
}
.syf-ok:hover:not(:disabled), .syf-no:hover { border-color: var(--brand); color: var(--ink); }
.syf-ok:disabled { opacity: .35; cursor: default; }
.syf-no.aktif { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }

/* ===== TABLO HİZASI (KDE-0053, kullanıcı 2026-10-10) =====
   "Tablo başlıkları ortalanmış olmalı. Tanım hariç tüm değerlerde ortalanmış
   olmalı."

   VARSAYILAN ORTA, İSTİSNA SERBEST METİN. İstisnayı `ortak.js` işaretliyor
   (`tabloHizaUygula`): başlığın METNİNE bakıp o sütuna `.tanim` koyuyor.
   Sütun sırası tabloya göre değişiyor ve sütun eklenince kayıyor; metin
   sabit. Gerekçenin tamamı orada.

   SAYI SÜTUNU DA ORTADA: `.num` uygulama genelinde sağa yaslı ama kullanıcı
   "tüm değerler" dedi ve bunu Stok ekranında da istemişti (KDE-0027).
   Geçersiz kılma TABLO İÇİNE sınırlı — KPI kartlarındaki `.num` (büyük
   rakam) dokunulmadan kalıyor. */
.table-wrap th {
  position: sticky; top: 0; z-index: 2;
  height: 40px; padding: 0 var(--bosluk-3); text-align: center; white-space: nowrap;
  font-size: var(--yazi-xs); font-weight: 700; letter-spacing: var(--harf-etiket); text-transform: uppercase;
  color: var(--muted); background: var(--panel-2); border-bottom: 1px solid var(--line-strong);
}
/* Dikey dolgu YOK: satır yüksekliğinin tek kaynağı --row-h (TASARIM-SARTNAMESI).
   Genel dikey dolgu her tabloyu 1-6px uzatıyordu (denetçi ölçümü 2026-09-30).
   İki satırlı hücrenin nefes payı yalnız o hücreye verilir (style.css DAR EKRAN). */
.table-wrap td {
  height: var(--row-h); padding: 0 var(--bosluk-3); text-align: center;
  font-size: var(--yazi-md); border-bottom: 1px solid var(--line);
}
/* SERBEST METİN SOLDA: ortalanmış uzun tanım satır satır farklı yerden
   başlar, göz dikey olarak tarayamaz. Sütun `ortak.js`te işaretleniyor. */
.table-wrap th.tanim, .table-wrap td.tanim,
.lot-tablo th.tanim, .lot-tablo td.tanim { text-align: left; }
.table-wrap tbody tr:hover td { background: var(--hover); }
.table-wrap tbody tr.secili td { background: var(--brand-soft); }
.table-wrap tbody tr.tikla { cursor: pointer; }

/* Sayısal sütun: sağa dayalı + komşuyla arasında zorunlu boşluk */
.num { text-align: right; padding-right: var(--bosluk-4) !important; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
/* TABLO İÇİNDE SAYI DA ORTADA (KDE-0053). `!important` gerekiyor çünkü
   yukarıdaki `.num` kuralı da onu taşıyor; kapsam tabloyla sınırlı, KPI
   kartlarındaki büyük rakam etkilenmiyor. */
.table-wrap th.num, .table-wrap td.num,
.lot-tablo th.num, .lot-tablo td.num { text-align: center !important; }

/* Ortalanmış sütun. BAŞLIK İÇİN AYRI SATIR GEREKİYOR: yukarıdaki
   `.table-wrap th` sola yaslıyor ve aynı özgüllükte, daha sonra geldiği için
   tek sınıflı bir kural onu geçemiyor — `.num` da bu tuzağa düşüp `th.num`
   satırıyla çözülmüştü. Aynı kusur, aynı çözüm. */
.orta { text-align: center; }
th.orta { text-align: center; }

/* BAŞLIK, HÜCRESİYLE AYNI YÖNE BAKAR (kullanıcı bildirimi 2026-09-09:
   "tablolarda metin kaymaları olabilir").
   `.table-wrap th` iki seçicili (0,1,1) ve tek sınıflı hizalama
   kurallarını eziyordu: `.tanim-col` hücreleri ortalıyor ama başlığı sola
   kalıyordu; sütun tarak gibi görünüyordu. Ölçüldü — ürün listesi ve yarı
   mamül listesinde 29 satır. Hizalama sınıfı taşıyan başlıklar burada
   aynı ağırlıkta yeniden yazılıyor. */
.table-wrap th.tanim-col, .table-wrap th.kritik-col { text-align: center; }
/* İş emri tablosu da aynı tuzağa düşmüştü: `.ie-urun-basi` ve `.ie-asama`
   tek sınıf (0,1,0), `.table-wrap th` iki seçicili (0,1,1) — başlıklar
   ortalanmak istendiği hâlde sola kalıyordu. HTML'deki yorum "ikisi de
   ortalı" diyordu ama ölçümde başlık `left` çıkıyordu; görsel denetim bunu
   4 bulgu olarak veriyordu (Ürünler · Ön Hazırlık · Üretim · Sevkiyat). */
.table-wrap th.ie-urun-basi, .table-wrap th.ie-asama { text-align: center; }
/* `.sag` TABLO İÇİNDE SAĞA YASLAR — ölçüldü 2026-09-09: 21 hücre ve
   başlık bu sınıfı taşıyordu ama tabloya dönük bir kuralı YOKTU (yalnız
   `.toolbar .sag` ve `.vsrm-cek .sag` vardı, ikisi de başka iş yapıyor).
   Yani "sağa yaslı" diye işaretlenmiş sayılar yıllardır sola yaslıydı.
   Yeni yazılanlar `.num` kullanmalı; bu kural eskiyi kurtarıyor. */
.table-wrap th.sag, .table-wrap td.sag { text-align: right; font-variant-numeric: tabular-nums; }

/* `kullanim-col` hücreleri aynı zamanda `.num` — başlık da sağa bakmalı. */
.table-wrap th.kullanim-col { text-align: right; }
/* BAŞLIK VE HÜCRE BİRLİKTE SOLA (ölçülen kusur 2026-10-11): kural yalnız
   `th`ye yazılmıştı, hücreler varsayılan ortalıda kalıyordu — başlık solda,
   25 hücre ortada, sütun eğri görünüyordu. Aşağıdaki `.ie-urun-basi` notu
   bunun kardeşi: "başlık ve hücre BİRLİKTE ortalanıyor — yalnız hücreyi
   ortalamak başlığı sağda bırakır". */
.table-wrap th.uretim-col, .table-wrap td.uretim-col { text-align: left; }

/* Sıralanabilir sütun */
th.sirala { cursor: pointer; user-select: none; }
th.sirala::after { content: "↕"; margin-left: 6px; color: var(--line-strong); font-size: var(--yazi-xs); }
th.sirala.artan::after  { content: "↑"; color: var(--brand); }
th.sirala.azalan::after { content: "↓"; color: var(--brand); }

/* Satır içi eylem: HER ZAMAN görünür.
   Önceden `opacity: 0` ile hover'da açılıyordu. Kullanıcı hammadde sayfasında
   "stok adedi giremiyorum" diye bildirdi — düğme oradaydı ama görünmüyordu.
   Var olduğu bilinmeyen düğme yok demektir; gürültü azaltmak keşfedilebilirlikten
   önce gelmiyor. Silme gibi yıkıcı eylemler zaten kendi renginden ayırt ediliyor. */
/* Aynı tuzak: `td.satir-eylem`e flex verilince hücre satır yüksekliğinden
   kopuyordu. Hücre `table-cell` kalır, düğmeler satır içi hizalanır. */
.satir-eylem { text-align: right; white-space: nowrap; }
.satir-eylem > * { vertical-align: middle; }
.satir-eylem > * + * { margin-left: 6px; }

/* Grup / toplam / durum satırları */
.sa-grup td { background: var(--panel-2); font-weight: 700; }
.toplam-satir td { height: 40px; background: var(--panel-2); font-size: var(--yazi-sm); color: var(--muted); }
tr.grup-uyari td, tr.eksik-tanim td { background: var(--amber-row); }
/* `rezerve-asim`: rezerve stoktan büyük — söz verilen, elde olandan fazla
   (KDE-0009). Eksi bakiyeyle AYNI kırmızı: ikisi de "bu satıra bak" diyor,
   ikinci bir kırmızı tonu uydurmak iki uyarı dili kurmak olurdu. Ayrı sınıf
   olmasının sebebi teşhis — hangi kuralın boyadığı sınıf adından okunuyor. */
tr.kap-asim td, tr.eksi-bakiye td, tr.rezerve-asim td { background: var(--red-row); }
/* `:not(tr)` şart — tasarımda bu bir div araç çubuğu, bizde ise Aktif Sipariş
   Listesi'nde bir TABLO SATIRI (`<tr class="filtre-satir">`). Satır flex kutuya
   dönünce hücreler tablonun sütun düzeninden kopuyor: yedi süzgeç alanı sola
   yığılıyor, üstteki başlıklarla hiçbir hizası kalmıyordu. */
.filtre-satir:not(tr) { display: flex; align-items: center; gap: var(--bosluk-2); padding: var(--bosluk-3) var(--bosluk-4); border-bottom: 1px solid var(--line); }
.bos { padding: var(--bosluk-6) var(--bosluk-4); text-align: center; color: var(--muted); }
.bos b { display: block; color: var(--ink); font-size: var(--yazi-lg); margin-bottom: 4px; }

/* Dar ekran: tablo → kart listesi (YENİ) */
@media (max-width: 720px) {
  .table-wrap.karta-don thead { display: none; }
  .table-wrap.karta-don tr { display: block; padding: var(--bosluk-3); border-bottom: 1px solid var(--line); }
  .table-wrap.karta-don td { display: flex; justify-content: space-between; gap: var(--bosluk-3); height: auto; padding: 3px 0; border: 0; }
  .table-wrap.karta-don td::before { content: attr(data-etiket); font-size: var(--yazi-xs); font-weight: 700; letter-spacing: var(--harf-etiket); text-transform: uppercase; color: var(--muted); }
  .table-wrap.karta-don .num { text-align: right; padding-right: 0 !important; }
}

/* NOT: Burada bir `.onizleme` bloğu vardı — "Önizleme hücresi (Ürün Listesi)"
   diye. Ürün listesi görseli aslında `.liste-gorsel` kullanıyor; bu kural
   hiçbir yere uymuyordu ama adı `style.css`'teki PMRL ÖNİZLEME PANELİYLE
   çakışıyordu. bilesenler.css sonra yüklendiği için kazanıyor ve paneli
   72 piksele sıkıştırıyordu (sayıların arkasındaki çapraz tarama da
   `.onizleme span` kuralıydı). Ölü kural silindi. */

/* ===== TABLO İÇİ DÜZENLEME KUTULARI — TABAN (KDE-0018, 2026-10-09) =====

   Satır içinde düzenlenen hücrelerin kutusu. KAPSAMSIZ, bilerek: ölçü
   daha önce `#ksTablo .ks-elle, #stokTablo .stok-esik` diye kaba
   bağlıydı ve aynı kutu üçüncü bir tabloda kullanılınca sessizce çıplak
   kalıyordu (şartname §4.5 — sınıf bir sözleşmedir).

   Bugün üç yerde: Emniyet Stoğu sekmesindeki `.ks-elle`, Stok Düzenle
   sayfasının Stok ve Emniyet Stoğu sütunları, Not sütunu. Ölçü eski
   kuralla aynı (84px, sağa dayalı) — görünüm değişmedi, kapsamı değişti.

   `.tablo-metin` HÜCREYE YAYILIYOR: not alanı sabit genişlikte olsaydı
   uzun not görünmez olurdu; `min-width` ise sütunun dar kalıp metni "i"
   diye kırpmasını engelliyor (aynı kusur 2026-09-10'da süzgeç kutusunda
   ölçüldü). */
.tablo-sayi { width: 84px; text-align: right; }

/* ===== KOD HÜCRESİ: GÖRSEL + METİN — TABAN (KDE-0030, 2026-10-10) =====

   Kullanıcı: ürün kodu geçen her TABLODA ürün görseli. Kural KAPSAMSIZ,
   bilerek — aynı hata iki kez yaşandı: `.pgt-soru` (KDE-0011) ve `.ks-elle`
   (KDE-0018) bir kaba bağlıydı ve üçüncü bir ekranda sessizce çıplak
   kalmıştı (şartname §4.5: sınıf bir sözleşmedir).

   `flex`, `inline-flex` DEĞİL. Satır içi bir kutu taban çizgisine oturuyor
   ve `inline-flex` sarmalayıcının taban çizgisi ilk ögenin ALT kenarı;
   altına yazı tipinin iniş payı eklenip görsel yukarı kayıyor. Stok
   tablosunda ölçüldü: 2,6px. Blok seviyesinde flex kutusunun taban çizgisi
   yok, hücre onu ortalıyor.

   `min-width: 0` metin kutusunda: uzun kodun hücreyi esnetip sütunu
   taşırmasını engelliyor.

   ÖLÇÜ 52×36 (kullanıcı 2026-10-10: "52x36'ya çek sen"). Önce taban ölçü
   (40×28) konmuştu; kullanıcı Stok ekranındaki büyük görselle AYNI olmasını
   istedi — aynı satırın iki ekranda iki boyda görünmesi, geçen kişiye
   "başka bir liste" izlenimi veriyor.

   TABAN `.liste-gorsel` (40×28) DEĞİŞMİYOR: Ürün Listesi, üretim ağacı ve
   bileşen satırları onu kullanıyor; kapsamsız bir ölçü değişikliği onların
   satır yüksekliğini de sessizce değiştirirdi. Büyütme yalnız kod
   hücresinin içinde geçerli.

   `flex: 0 0 auto` ŞART: flex kutusunda görsel, uzun kod metni yer
   isteyince ezilip daralırdı. */
.kod-gorsel { display: flex; align-items: center; gap: var(--bosluk-3); min-width: 0; }
.kod-gorsel > .kg-metin { min-width: 0; }
.kod-gorsel > .liste-gorsel { width: 52px; height: 36px; flex: 0 0 auto; }

/* ===== GÖRSEL BÜYÜTME PENCERESİ (KDE-0031, 2026-10-10) =====

   Resim ekrandan TAŞMIYOR: `max-height: 70vh` ve `max-width: 100%`. Sabit
   bir ölçü verseydik dar ekranda ya kırpılır ya da pencereyi yatay kaydırma
   çubuğuna düşürürdü; ikisi de "büyüttüm" demenin tersi.

   `object-fit: contain` — teknik resimde en-boy oranı bilgi taşıyor,
   germek parçayı yanlış gösterirdi.

   Zemin AÇIK: saydam PNG'lerin çoğu beyaz hatlı; koyu zeminde çizgiler
   kayboluyordu (aynı sebeple liste kutusu da beyaz). */
.gb-kap { display: flex; flex-direction: column; align-items: center; gap: var(--bosluk-3); }
.gb-resim {
  max-width: 100%; max-height: 240px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.gb-eylem { display: flex; gap: var(--bosluk-2); }
/* GÖRSEL PENCERESİ DİKEY ORTALI (kullanıcı 2026-10-10: "pencere konumu
   ortada olsun"). Ortak pencere kalıbı üstten hizalı (`align-items:
   flex-start` + 56px üst dolgu) — uzun formlarda doğru, çünkü form ekrandan
   taşarsa üstten başlaması gerekir. Görsel penceresi KISA ve sabit boyda
   (en çok 320×240), üstte durunca ekranın alt yarısı boş kalıyordu.

   `:has()` ile YALNIZ BU PENCEREYE: ortak kuralı değiştirmek bütün
   pencereleri birden kaydırırdı ve uzun formları bozardı. Depoda aynı
   kalıbın örneği var (`.parca-import:has(…)`). */
#popup:has(.gb-kap) { align-items: center; padding-top: var(--bosluk-4); }

/* ===== 3B GÖRÜNTÜLEYİCİ — TAM EKRAN KATMAN (KDE-0033) =====

   Önce ERP'nin içerik alanında bir görünümdü. Ölçüldü (1440×900): kenar
   çubuğu 250px, üst çubuk ve dolgular 210px; viewer'a 1142×690 kalıyordu —
   alanın dörtte biri kabuk tarafından yeniyordu. Kullanıcı tam ekran istedi.

   `z-index: 95` — büyütme penceresinin (90) ÜSTÜNDE, çünkü oradaki düğmeden
   açılıyor; uyarı kutusunun (300) ALTINDA, çünkü 3B içindeki bir hata mesajı
   katmanın arkasında kalmamalı. Kimlik seçicisiyle yazılan `#popup, #modal`
   bloğu burayı etkilemiyor: bu sınıf o bloğun dışında.

   `inset: 0` ve dolgu YOK: tam ekran demek, kenarda çerçeve payı bırakmak
   değil. Zemin opak — altındaki ERP ekranı 3B sahnenin arkasından sızarsa
   model okunmaz olur. */
.viewer-katman {
  position: fixed; inset: 0; z-index: 95;
  display: flex; flex-direction: column;
  background: var(--panel);
}
.viewer-katman[hidden] { display: none; }
/* Üst şerit İNCE: tek işi nerede olunduğunu söylemek ve çıkış vermek.
   Kalınlaştırmak, tam ekrana geçerek kazanılan yeri geri vermek olurdu. */
.vk-ust {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--bosluk-3);
  height: 44px; padding: 0 var(--bosluk-3);
  background: var(--panel-2); border-bottom: 1px solid var(--line);
}
/* Çerçeve KALANIN TAMAMI. `min-height: 0` şart: flex ögesi varsayılan olarak
   içeriğinden küçülmüyor ve çerçeve şeridi aşağı itip taşırıyordu. */
.vk-cerceve { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; display: block; }

/* ===== 3B MODEL DURUM KUTUSU (KDE-0034) — ürün kartı =====

   BOŞKEN YER KAPLAMIYOR: modeli olmayan ürün çoğunluk ve orada boş bir satır
   bırakmak, kutunun "bir şey olmalıydı" izlenimi vermesi olurdu. */
.model-durum { display: flex; align-items: center; gap: var(--bosluk-2); flex-wrap: wrap; }
.model-durum:empty { display: none; }
/* Yükleme çubuğu ortak `.bar` bileşeni; yalnız genişliği burada sabit —
   satırda ötekilerle birlikte akarken esneyip zıplamasın. */
.model-bar { width: 160px; flex: 0 0 auto; }
/* TAŞMA YERİNE KÜÇÜLME (CI kırmızısı, 2026-10-10).

   KDE-0030 ürün görselini kod gösteren HER tabloya koydu ve `npm run denetim`
   o commit'te kırmızıya döndü (22:29 yeşil → 23:04 kırmızı, sonraki üç koşum
   da kırmızı). Sebep: görsel SABİT genişlikte, hücre ise tablonun payına göre
   daralabiliyor — ör. `.sip-td-gorsel` hücresi 56px, `padding-left: 4px`,
   yani içerik kutusu tam 52px ve görsel de tam 52px. Payı YOK; hücre bir
   piksel daralınca görsel sağa taşıyor.

   `max-width: 100%` yer varken hiçbir şeyi değiştirmez (52px yine 52px),
   yer yokken taşmak yerine küçültür. Tasarım korunuyor — kullanıcı kararı
   2026-10-10: "ürün görseli konusunda benim yaptığımı koruyalım."

   TABAN KURALA kondu, tek hücreye değil: görsel artık onlarca tabloda ve
   aynı sınıf kusuru hepsinde doğabilir. Tek örneği yamamak, kusuru bir
   sonraki dar tabloda yeniden bulmak demekti. */
.liste-gorsel { cursor: zoom-in; max-width: 100%; }
/* Görselsiz kutuda büyütecek bir şey yok — imleç yalan söylemesin. */
.liste-gorsel.gorselsiz { cursor: default; }
button.liste-gorsel.gorsel-ekle { cursor: pointer; }
.tablo-metin { width: 100%; min-width: 140px; }


/* ===== "?" İPUCU DÜĞMESİ VE BALONU — TABAN (KDE-0011, 2026-10-09) =====

   YALNIZ TAŞIMA: bu kurallar `10-vsrm-yukleme.css` içinde
   `.vy-soru-kap .pgt-soru` / `.pgt-balon` diye KAPSANMIŞ duruyordu.
   Kurallarda VSRM'ye özgü hiçbir şey yok; kapsam yüzünden mekanizma
   yalnız o ekranda çalışıyordu.

   ÖLÇÜLEN HATA: Stok tablosunun Rezerve başlığına aynı düğme konuldu
   (KDE-0009), işleyici ortak (gecmis-tablo.js, document dinleyicisi) ve
   düğme gerçekten tıklanıyordu — ama balon `position` ALMADIĞI için
   `style.left/top` hiçbir şey yapmadı ve balon sayfanın akışında
   görünmez bir yere düştü. Dışarıdan bakınca "düğme çalışmıyor" görünüyor;
   oysa çalışan ama GÖRÜNMEYEN bir balon vardı.

   Portal tarafında taban zaten kapsamsız (`portal/stiller/09-…`), yalnız
   portal değişkenleriyle. ERP kopyası burada, ERP değişkenleriyle. */
.pgt-soru {
  flex: 0 0 auto; width: 20px; height: 20px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--panel);
  font: inherit; font-size: var(--yazi-xs); font-weight: 700; line-height: 1; letter-spacing: 0;
  text-transform: none; color: var(--muted); cursor: pointer;
}
.pgt-soru:hover, .pgt-soru[aria-expanded="true"] { color: var(--brand-dark); border-color: var(--brand); }
.pgt-soru:focus-visible { outline: none; box-shadow: var(--odak); }
.pgt-balon {
  position: fixed; z-index: 20; max-width: 340px;
  padding: var(--bosluk-3); background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: var(--yazi-md); font-weight: 400; line-height: 1.45; color: var(--ink);
  text-transform: none; letter-spacing: 0; white-space: normal; text-align: left;
}
.pgt-balon b { display: block; margin-bottom: var(--bosluk-1); }

/* Panel başlığında düğme (KDE-0021). `.panel > h2` blok ve dikey dolgulu;
   düğmeyi içine koyunca metnin altına düşüyordu. Flex satıra çevirip düğmeyi
   sağa itiyoruz — başlığın kendi dolgusu ve çizgisi değişmiyor, yalnız bu
   sınıfı taşıyan başlıklar etkileniyor. */
.panel > h2.panel-bas { display: flex; align-items: center; gap: var(--bosluk-3); }
.panel > h2.panel-bas > .btn { margin-left: auto; }

/* PASİF DÜĞME (KDE-0047). `<label>` ile sarılmış dosya seçicilerde `disabled`
   etiketin kendisine uygulanamıyor — iç `<input>` kapalı olsa da etiket
   tıklanabilir görünüyordu. Bu sınıf görünümü ve imleci de kapatıyor.

   GİZLEMEK YERİNE PASİF, bilerek: kaybolan düğme "bu ürün STEP almıyor" diye
   okunur; pasif düğme sebebini ipucunda söylüyor. */
.btn.pasif { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ===== STEP YÜKLEME / DÖNÜŞÜM PENCERESİ (KDE-0049) =====
   Kullanıcı: "küçük bir uyarı ekranı gibi bir ekran çıksın ve STEP
   dönüşümünü burada göstersin, ön izlemeye hazır hâle gelsin."
   Dar ve tek sütun: pencere bir İŞ ekranı değil, bir durum ekranı. */
.step-pencere { display: flex; flex-direction: column; gap: var(--bosluk-2); min-width: 320px; }
.sp-dosya { font-size: var(--yazi-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-asama { font-size: var(--yazi-md); font-weight: 700; }
.sp-asama.sp-tamam { color: var(--green); }
.sp-asama.sp-hata { color: var(--red); font-weight: 400; }
.sp-bar { height: 8px; }
/* Sayı solda, eylem sağda: göz ilerlemeyi solda arar, düğmeyi sağda. */
.sp-alt { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-2); min-height: 28px; }

/* ===== DOSYA YÜKLEME PENCERESİ (KDE-0056) =====
   Kullanıcı: "tek bir buton: Dosya Yükle… bir pencere açılacak ve yükleme
   durumu takibini buradan canlı göreceğiz. Aşamalı yükleme olacak."

   Üç sütun: NE (ad + neyi beslediği) · DURUM · EYLEM. Sıra bağımlılığı
   anlatıyor — BOM olmadan STEP yüklenemiyor, satır sırası bunu okutuyor. */
.dosya-yukle { display: flex; flex-direction: column; gap: var(--bosluk-2); min-width: 360px; }
.dy-asama {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: var(--bosluk-3); padding: var(--bosluk-2) 0; border-bottom: 1px solid var(--line);
}
.dy-asama:last-of-type { border-bottom: 0; }
.dya-ad { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dya-ad small { font-size: var(--yazi-xs); }
.dya-durum { font-size: var(--yazi-sm); font-weight: 700; white-space: nowrap; }
/* Renk tek başına anlam taşımıyor: durum zaten kelimeyle yazılı. */
.dya-tamam { color: var(--green); }
.dya-eksik { color: var(--muted); }
.dya-hata { color: var(--red); }
.dya-surüyor { color: var(--brand); }
.dya-kilitli { color: var(--muted); }
/* İlerleme boşken yer kaplamıyor — "henüz bir şey olmuyor" bir satır değil. */
.dy-ilerleme:empty { display: none; }
.dy-ilerleme { padding-top: var(--bosluk-2); border-top: 1px solid var(--line); }

/* BOM yükleme özeti (KDE-0057): sayılar tek satır, uyarılar altında. */
.dy-ozet { padding: var(--bosluk-2) 0; }
.dyo-sayilar { display: flex; flex-wrap: wrap; gap: var(--bosluk-3); font-size: var(--yazi-sm); }
.dyo-uyari { margin: var(--bosluk-2) 0 0; padding-left: 0; list-style: none; }
.dyo-uyari li { color: var(--amber); font-size: var(--yazi-sm); line-height: 1.5; }
.dy-ozet-satir > td { background: var(--panel-2); }

/* ===== AŞAMA KUTUCUKLARI (P2 v2 paketi, KDE-0076) ===== */
.asama { display: inline-flex; flex-direction: column; align-items: center; gap: var(--bosluk-1); min-width: 96px; vertical-align: middle; }
.asama-kutu { display: flex; gap: 2px; width: 96px; justify-content: center; }
.asama-kutu i { display: block; flex: 1 1 12px; max-width: 12px; min-width: 3px; height: 5px; border-radius: 1px; background: var(--line); }
.asama-kutu i.on  { background: var(--brand); }        /* biten adım */
.asama-kutu i.cur { background: var(--brand-line); }   /* sürmekte olan adım */
.asama-ad { font-size: var(--yazi-sm); line-height: 1.1; }
.asama-ad small { margin-left: var(--bosluk-1); font-size: var(--yazi-xs); color: var(--muted); }
.asama-ad.bos { color: var(--faint); }                  /* Plan yok */
.asama-ad.yok { color: var(--amber-ink); font-weight: 700; } /* Metod tanımlı değil */
.asama.tamam .asama-kutu i { background: var(--durum-iyi); } /* tüm adımlar bitti */
.asama.tamam .asama-ad { color: var(--durum-iyi); font-weight: 700; }

/* ===== TARİH GRUP SATIRI ve SEÇİM ÇUBUĞU (P2 v2 paketi) ===== */
tr.grup td { height: 32px; background: var(--panel-2); border-bottom: 1px solid var(--line); text-align: left; }
.grup-ic { display: flex; align-items: center; gap: var(--bosluk-2); font-size: var(--yazi-sm); }
.grup-ic b { font-size: var(--yazi-md); }
.grup-ic .gun, .grup-ic .top { color: var(--muted); }
.grup-ic .top { margin-left: auto; }
/* etiket: .rozet tabanı üzerine */
.grup-ic .rozet.ileri  { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }
.grup-ic .rozet.bugun  { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-ink); }
.grup-ic .rozet.gecmis { background: var(--red-bg); border-color: var(--red-line); color: var(--red); }

/* seçim çubuğu (İş Emirleri iptal/sil) */
.secim-cubuk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bosluk-2); padding: var(--bosluk-3) var(--bosluk-4); border-bottom: 1px solid var(--line); background: var(--brand-soft); }
.secim-cubuk .sayi { font-weight: 700; color: var(--brand-dark); }
.secim-cubuk .sag { margin-left: auto; display: flex; gap: var(--bosluk-2); }
.secim-cubuk.dolu { background: var(--brand-dark); border-bottom-color: var(--brand-dark); }
.secim-cubuk.dolu .sayi { color: var(--panel); font-size: var(--yazi-lg); font-weight: 900; }
.secim-cubuk.dolu .ipucu { color: var(--brand-line); }

/* SEÇİM SÜTUNU (P2 §5). Kutucuklar HER ZAMAN GÖRÜNMEZ: yalnız İş Emri İptal
   ya da Sil basılınca sütun DOM'a giriyor (gizlenmiyor — gizli hücre satır
   hizası ölçümünü bozuyor, denetim haklı olarak bulgu veriyordu).

   `accent-color` ile kutu marka renginde: tarayıcı varsayılanı sistem mavisi
   ve ekranın geri kalanıyla hiç konuşmuyor. */
.table-wrap th.ts-sutun, .table-wrap td.ts-sutun { width: 40px; padding: 0; text-align: center; }
.ts-tik, .ts-tumu { accent-color: var(--brand); width: 16px; height: 16px; cursor: pointer; }

/* SEÇİM KİPİNDE ARAÇ ÇUBUĞU DÜĞMELERİ GİZLİ (P2 §5, kullanıcı 2026-10-11).
   Seçim çubuğu açıkken altında "Sil · Excel'e Aktar" duruyordu: ekranda iki
   ayrı eylem kümesi ve hangisinin seçime ait olduğu belirsiz.
   Arama kutusu KALIYOR — süzmek seçim yaparken işe yarıyor, eylem değil. */
.ts-kipte .btn { display: none; }