/* ===== ZAMAN ÇİZELGESİ (Gantt) · İş Emirleri sekmesi =====
   Bir satır = bir operasyon, iki kademeli bar: üst planlanan, alt gerçekleşen.
   İki katman ÜST ÜSTE değil ALT ALTA — üst üste bindirmek kısa olanı
   gizlerdi ve asıl mesele ikisinin farkı. */
/* RENK KÜMELERİ tokens.css'teki ayrıma uyuyor: plan ve teslim BİLGİ
   (--durum-bilgi), gerçekleşen bar ise DURUM (notr/is/iyi). İlk yazımda
   tanımsız bir --mavi kullanmıştım; tanımsız değişken sessizce renksiz
   bırakır ve hata da vermez. */
.gt-kap { display: flex; flex-direction: column; gap: var(--bosluk-4); }
.gt-grup { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gt-bas { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.gt-bas b { font-size: var(--yazi-sm); }
.gt-rozet { font-size: var(--yazi-xs); color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.gt-teslim-yazi { font-size: var(--yazi-xs); color: var(--durum-bilgi); }
.gt-eksik { font-size: var(--yazi-xs); color: var(--amber);
  background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 4px; padding: 1px 7px; }

/* Zaman ekseni — ay başları işaretli; her günü yazmak dar ekranda okunmaz */
.gt-eksen { position: relative; height: 18px; margin-left: 190px;
  border-bottom: 1px solid var(--line); }
.gt-tick { position: absolute; top: 2px; transform: translateX(-50%);
  font-size: var(--yazi-xs); color: var(--muted); white-space: nowrap; }

.gt-satir { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.gt-satir:last-child { border-bottom: 0; }
.gt-satir.tutarsiz { background: var(--amber-bg); }
.gt-etiket { flex: 0 0 190px; padding: 6px 10px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gt-ad { font-size: var(--yazi-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-etiket small { font-size: var(--yazi-xs); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gt-iz { position: relative; flex: 1 1 auto; min-width: 0; padding: 6px 0; }
.gt-kat { position: relative; height: 9px; margin: 1px 0; }
.gt-bar { position: absolute; top: 0; height: 100%; border-radius: 3px; display: block; }
.gt-bar.plan { background: var(--durum-bilgi); opacity: .4; }
.gt-bar.plan.gec { background: var(--amber); opacity: .55; }
.gt-bar.gercek { background: var(--durum-notr); }
.gt-bar.gercek.bitti { background: var(--durum-iyi); }
.gt-bar.gercek.devam { background: var(--durum-is); }
.gt-bar.gercek.bekliyor { background: var(--durum-notr); opacity: .35; }

/* Plan yoksa boşluk değil YAZI: boş satır "planlandı ama görünmüyor" gibi okunur */
/* Yazı izin ÜSTÜNDEKİ boşluğa (satırın 6px iç boşluğu) kayıyor: 13px satır
   kutusu alttaki gerçekleşen çubuğuna (izin 11px altı) değmiyor. Önce top:-2px
   idi; "plan yok" yeşil çubukla üst üste biniyordu (2026-09-29). */
.gt-yok { position: absolute; left: 0; top: -7px; line-height: 13px; font-size: var(--yazi-xs); color: var(--muted); font-style: italic; }

.gt-bugun { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--red); opacity: .55; }
.gt-teslim { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--durum-bilgi); opacity: .75; }
.gt-not { position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-size: var(--yazi-xs); padding: 0 4px; border-radius: 3px; background: var(--panel); }
.gt-not.gec { color: var(--amber); }
.gt-not.erken { color: var(--durum-iyi); }
.gt-uyari { position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  font-size: var(--yazi-xs); cursor: help; }

.gt-arac { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: var(--bosluk-3); }
.gt-onay { font-size: var(--yazi-sm); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.gt-lejant { display: flex; gap: 14px; flex-wrap: wrap; }
.gt-lj { display: inline-flex; align-items: center; gap: 5px; font-size: var(--yazi-xs); color: var(--muted); }
.gt-ornek { width: 16px; height: 8px; border-radius: 2px; display: inline-block; }
.gt-ornek.plan { background: var(--durum-bilgi); opacity: .4; }
.gt-ornek.gercek { background: var(--durum-iyi); }
.gt-ornek.bugun { width: 2px; height: 12px; background: var(--red); border-radius: 0; }
.gt-ornek.teslim { width: 0; height: 12px; border-left: 2px dashed var(--durum-bilgi); border-radius: 0; }

@media (max-width: 720px) {
  .gt-etiket { flex-basis: 120px; }
  .gt-eksen { margin-left: 120px; }
}

/* ===== TOPLU SİLME KİPİ ===== */
.ts-sutun { width: 34px; text-align: center; }
.ts-tik { cursor: pointer; }
.ts-tumu {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--yazi-md); line-height: 1; color: var(--ink);
}
/* Kipteyken satır zemini hafifçe değişiyor: hangi tablonun silme kipinde
   olduğu, tik sütunu dışında da belli olsun. */
.ts-kip tbody tr:hover { background: var(--hover); }

/* Eksik tanım rozeti artık düğme — görünümü aynı kalsın, tıklanabilirliği
   imleçten belli olsun. */
button.tanim-eksik { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.eksik-liste { margin: 0; padding-left: 20px; }
.eksik-liste li { padding: 2px 0; }

/* Satın alma bilgisi eksik işareti — bileşen satırında, kart yerine. */
/* .sa-eksik kalktı (KDE-0066): tedarikçi eksikliği işareti kaldırıldı. */

/* Rota kolonu başlığındaki şablon seçici — Düzenle'nin solunda.
   ROZET (Selim 2026-10-01, KD-0074): "Şablon seç butonunu farklı bir rozet
   haline getirelim… daha uyumlu olsun." Yuvarlak, `.rozet.bilgi` renkleri
   (marka kümesi, 8.3:1), Düzenle düğmesiyle aynı boy (`--tik-h`). Genişlik
   sabit: seçici en uzun seçeneğe göre büyüyüp başlığı alta itmesin. */
.rota-sablon {
  flex: 0 0 auto; width: 84px; height: var(--tik-h); padding: 0 4px 0 10px;
  border: 1px solid var(--brand-line); border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: var(--yazi-sm); font-weight: 700; cursor: pointer;
}
.rota-sablon option { font-weight: 400; color: var(--ink); background: var(--panel); }

/* ÜÇ ROTA KOLONU AYNI HİZADA (KD-0074): "ön hazırlıkta şablon aşağıda,
   üretimde yanda — birbirine benzetelim." Başlık solda, rozet + Düzenle
   sağda, tek satır.
   DAR KOLONDA (ör. 1280 px ekranda kolon ~265 px) en uzun başlık ile
   eylemler aynı satıra sığmıyor. Eskiden her kolon kendi başına sarıyordu —
   kısa başlıklı kolonda eylem yanda, uzun başlıklıda altta kalıyordu (Selim'in
   şikâyeti tam buydu). Artık karar KOLON GENİŞLİĞİNE göre (container query):
   üç kolon hep aynı genişlikte olduğu için üçü birlikte geçer — başlık üstte,
   rozet + Düzenle altında sağda. Eşik: en uzun başlık (~136 px) + eylemler
   (~162 px) + boşluk. Üç başlık aynı düzende olduğu için üç adım listesi
   aynı yükseklikten başlar. */
.rota-kolon { container-type: inline-size; }
.rk-bas { flex-wrap: nowrap; }
.rota-kolon .rk-bas h5 { flex: 1 1 auto; }
.rk-eylem { flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto; }
@container (max-width: 309px) {
  .rk-bas { flex-wrap: wrap; row-gap: var(--bosluk-1); }
  .rota-kolon .rk-bas h5 { flex-basis: 100%; }
  .rk-eylem { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; }
}
/* Adım satırları aynı yükseklikte: gün kutulu (ön hazırlık / sevkiyat) ve
   kutusuz (üretim) satır aynı boy (kutu + dolgu + çizgi), içerik ortada. */
.rota-adimlar li { align-items: center; min-height: calc(var(--row-h) + 9px); }

/* ===== ALT SEKMELER (KD-0074) — Rotalar ve Üretim Metodu Süreleri içinde.
   Segment düğme kalıbı (`.btn-grup`), panelin sol üstünde. */
.alt-sekmeler { margin-bottom: var(--bosluk-3); max-width: 100%; }
.alt-panel[hidden] { display: none; }

/* Alt Bileşen Rotaları — sıra numaralı metod etiketleri (Ana Montaj
   rotasındaki numara rozetiyle aynı dil).

   KUTULAR ARTIK GİZLİ ve Alt Bileşenler tablosundaki Rota sütunundan bir
   PENCEREDE açılıyor (KDE-0078). Kutunun kendi çerçevesi/zemini kalktı:
   pencere zaten çerçeve, ikincisi kutu içinde kutu demekti. Başlığı da
   pencere taşıyor ("Rota — kod · ad"), `.abr-bas` gereksizleşti.
   Numara sayacı DURUYOR — asıl istenen oydu. */
.abr-kutu .metod-chips { counter-reset: abr-sira; }
.abr-kutu .metod-chip { counter-increment: abr-sira; padding-left: 3px; }
.abr-kutu .metod-chip::before {
  content: counter(abr-sira); min-width: 18px; height: 18px; margin-right: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  font-size: var(--yazi-xs); font-weight: 700;
}

/* BOM yükleme bilgi satırı boşken yer kaplamasın ("Şablon indir" kalktı, KD-0074) */
.parca-import:has(> #parcaImportInfo:empty) { display: none; }

/* ===== ÜRÜN DÜZENLEME ÇEKMECELERİ =====
   Rota · Üretim Metodu Süreleri · Bileşenler aynı kalıpta. Sayfa altı bölüm
   üst üste açık duruyordu; hangisine bakıldığı kaybolyordu. */
.ud-cekmece, details.sure-bolum {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); margin-bottom: var(--bosluk-3);
}
.ud-cekmece > summary, details.sure-bolum > summary {
  padding: 10px var(--bosluk-3); cursor: pointer; list-style: none;
  background: var(--panel-2); border-radius: var(--radius);
  display: flex; align-items: center; gap: 8px;
  /* Açılış/kapanış tonu AKARAK değişiyor — kenar çubuğundaki aktif öge
     davranışının aynısı. Anında renk değiştirmek, hangi bölümün yeni
     açıldığını göz takip edemeden bitirirdi. */
  transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}
.ud-cekmece > summary:hover, details.sure-bolum > summary:hover { background: var(--hover); }
/* AKTİF ÇEKMECE AÇIK MAVİ TON (kullanıcı isteği 2026-09-23): "aktif
   çekmecelerde başlık satırı hafif bir mavi ton kazansın, bizim
   patternimize göre aktiflik animasyonu gibi."

   Marka kümesinden: `--brand-soft` zemin, `--brand` metin, solda `--brand`
   şerit. Kenar çubuğundaki aktif menü ögesi ve `.hmb-og.secili` ile aynı
   dil — aktiflik uygulamanın her yerinde aynı renkle söyleniyor. */
.ud-cekmece[open] > summary, details.sure-bolum[open] > summary {
  border-bottom: 1px solid var(--brand-line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--brand-soft); color: var(--brand-dark);
  box-shadow: inset 3px 0 0 var(--brand);
}
.ud-cekmece[open] > summary:hover, details.sure-bolum[open] > summary:hover {
  background: var(--brand-soft);
}
.ud-cekmece[open] > summary::before, details.sure-bolum[open] > summary::before { color: var(--brand); }
/* Hareketi kapatan kullanıcıda geçiş yok — renk yine değişiyor, akmıyor */
@media (prefers-reduced-motion: reduce) {
  .ud-cekmece > summary, details.sure-bolum > summary { transition: none; }
}
.ud-cekmece > summary::-webkit-details-marker,
details.sure-bolum > summary::-webkit-details-marker { display: none; }
.ud-cekmece > summary::before, details.sure-bolum > summary::before {
  content: '▸'; color: var(--muted); transition: transform .15s;
}
.ud-cekmece[open] > summary::before, details.sure-bolum[open] > summary::before {
  transform: rotate(90deg);
}
.ud-cekmece > *:not(summary), details.sure-bolum > *:not(summary) { padding: 0 var(--bosluk-3); }
.ud-cekmece > *:last-child, details.sure-bolum > *:last-child { padding-bottom: var(--bosluk-3); }
/* İş emri kutusu kalkınca sevkiyat kalemleri tam genişlik */
.urun-ust.tekli { grid-template-columns: 1fr; display: block; }
/* Bileşenler çekmecesi hem .ud-cekmece hem .parca-kutu — ikincisi kendi
   dolgusunu ve gri zeminini getiriyor, öteki çekmecelerle hizası kaçıyordu.
   Çekmece kalıbı kazanıyor. */
details.ud-cekmece.parca-kutu { background: var(--panel); padding: 0; }

/* ÇEKMECE BAŞLIKLARI TAM OLARAK AYNI ÖLÇÜDE.
   İki fark ölçümle bulundu:
   ① .sure-bolum (style.css) kendi üst boşluğunu, üst çizgisini ve dış
     boşluğunu getiriyordu — Süreler ötekilerden 16px aşağıda başlıyor ve
     üstünde fazladan bir çizgi çiziyordu.
   ② Açık çekmecenin başlığı, alt kenarlık eklendiği için 1px daha uzundu.
     Kenarlık yerine iç gölge: yer kaplamıyor, çizgi yine görünüyor. */
details.ud-cekmece, details.sure-bolum {
  margin: 0 0 var(--bosluk-3); padding: 0; border-top: 1px solid var(--line);
}
.ud-cekmece[open] > summary, details.sure-bolum[open] > summary {
  border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line);
}

/* ===== ÜRÜN KARTI SEKMELERİ (Selim 2026-09-29) =====
   Çekmeceler yan yana sekme oldu (ekranlar/urun-karti.js `urunSekmeleriKur`). Şerit
   uygulamanın ortak `.sekme-bar` / `.sekme` kalıbı; panel şeridin hemen
   altında, başlık satırı gizli (başlık şeritte). */
.sekme-bar.ud-sekmeler {
  margin: var(--bosluk-3) 0 0; padding: 0;
  border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
}
.ud-sekmeler .sekme { display: inline-flex; align-items: center; gap: var(--bosluk-2); }
.ud-sekmeler .sekme .muted { font-weight: 400; }
details.ud-sekmeli {
  margin: 0 0 var(--bosluk-3); border-radius: 0 0 var(--radius) var(--radius);
  padding-top: var(--bosluk-3);
}
details.ud-sekmeli[hidden] { display: none; }
details.ud-sekmeli > summary { display: none; }

/* Revizyon geçmişi — Revizyon alanının altında `rev · tarih` düğmeleri */
.uk-rev { display: flex; flex-direction: column; gap: var(--bosluk-1); min-width: 0; }
.rev-gecmis { display: flex; flex-wrap: wrap; gap: var(--bosluk-1); }
.rev-gecmis[hidden] { display: none; }
#popupGovde textarea.rev-not { min-height: 96px; }

/* Süre tablosu tam genişlik. `max-width: 620px` vardı: çekmece 1260px
   genişken tablo yarıda kesiliyor, sağında boş alan kalıyordu. Sütunlar da
   payla dağıtılıyor — "süre girilmemiş" sütunu tabloyu sağa sarkıtmasın. */
.sure-tablo { max-width: none; }
.sure-tablo table { width: 100%; }
.sure-tablo th:first-child, .sure-tablo td:first-child { width: 45%; }
.sure-tablo th:nth-child(2), .sure-tablo td:nth-child(2) { width: 25%; }
/* Rota kodu kendi dar sütununda — kodlu ve kategorili satırların adları
   aynı noktadan başlasın. */
.sure-tablo th.sa-kod, .sure-tablo td.sa-kod { width: 56px; text-align: left; white-space: nowrap; }
.sure-tablo th:first-child, .sure-tablo td:first-child { width: 56px; }
.sure-tablo th:nth-child(2), .sure-tablo td:nth-child(2) { width: 42%; }
.sure-tablo th:nth-child(3), .sure-tablo td:nth-child(3) { width: 25%; }

/* Süre tablosu: kod · metod · kategori · süre */
.sure-tablo th.sa-kat, .sure-tablo td.sa-kat { width: 22%; }
.sure-tablo .op-no + .op-no { margin-left: 3px; }
.sure-toplam { padding: 10px 0 0; border-top: 1px solid var(--line); font-size: var(--yazi-md); }

/* Süre girişi ve birim ayrı sütun; kutular eşit ölçüde. */
.sure-tablo th.sa-giris, .sure-tablo td.sa-giris { width: 196px; text-align: right; white-space: nowrap; }
.sure-tablo th.sa-birim, .sure-tablo td.sa-birim { width: 90px; color: var(--muted); font-size: var(--yazi-sm); }
.sure-tablo td.sa-birim.gun { color: var(--amber); font-weight: 700; }
.sure-tablo .sr-bs {
  width: 96px; padding: 5px 8px; text-align: right;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--yazi-md); font-variant-numeric: tabular-nums;
}
/* Montajın ağacında VURGU ELLE GİRİLENDE (Selim 2026-10-01): o yere özel
   değer açık aksan zemin + kalın çerçeve + kalın yazı; parçanın kendi (ürün
   kartı) süresi sade beyaz kutu, italik değil, yanında "Ürün kartı" rozeti. */
.sure-tablo .sr-bs.sr-ozel {
  background: var(--brand-soft); border: 2px solid var(--brand);
  padding: 4px 7px; color: var(--brand-dark); font-weight: 700;
}
/* Rozet yeri her parça satırında ayrılı — özel değerli satırlarda da kutular
   aynı hizada dursun. */
.sure-tablo .sa-kaynak { display: inline-block; width: 80px; text-align: left; margin-left: 6px; vertical-align: middle; }
button.sa-kart-rozet { display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; font-family: inherit; line-height: 1; }
button.sa-kart-rozet:focus-visible { outline: none; box-shadow: var(--odak); }
.sa-kart-balon {
  position: fixed; z-index: 1000; max-width: 260px; padding: 8px 10px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: var(--radius); font-size: var(--yazi-sm);
}
/* Süresi girilmemiş satır sarı — "süre girilmemiş" metni yerine. */
/* SÜRESİ GİRİLMEMİŞ SATIR — jeton (P3 §5). Sabit #fff8c4 yazıyordu: tablo
   zeminlerinin geri kalanı (--amber-row, --red-row) jetondan gelirken bu
   satır kendi sarısını taşıyordu ve ikisi yan yana farklı tonda duruyordu. */
.sure-tablo tr.sa-suresiz > td { background: var(--amber-row); }

/* ===== SEVK LİSTESİ PENCERESİ ===== */
.sl-pencere { display: flex; flex-direction: column; gap: var(--bosluk-3); min-width: min(880px, 88vw); }
.sl-ust { display: flex; gap: var(--bosluk-3); flex-wrap: wrap; }
.sl-ust label { display: flex; flex-direction: column; gap: 4px; font-size: var(--yazi-sm); color: var(--muted); }
.sl-ust input {
  padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--yazi-md); color: var(--ink);
}
.sl-tablo { width: 100%; }
.sl-tablo .sl-adet { width: 84px; padding: 4px 7px; text-align: right;
  border: 1px solid var(--line); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
.sl-ayak { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sl-toplam { font-weight: 700; }
.sl-ayak .hata-metin { margin-left: auto; }

/* AYARLAR kenar çubuğunun en altında, kullanıcı kutusunun üstünde.
   `.nav-alt` ile aynı ayrımı taşıyor: üstünde ince çizgi, menü akışından
   ayrı durduğu belli olsun. */
.nav-ayarlar { border-top: 1px solid rgba(0, 0, 0, .08); padding: 4px 0; }

/* FİNANS GİZLİ — modül hazır değil (kullanıcı kararı 2026-09-08).
   Gösterim kapalı; veri, uç ve hesap duruyor. Modül gelince tek bayrak. */
body.finans-gizli .mly-kap,
body.finans-gizli .mk-fiyatlar,
body.finans-gizli .mk-fiyat-ekle,
body.finans-gizli #ieMaliyet,
body.finans-gizli #ymMaliyet { display: none !important; }

/* ===== ARAMA BANDI (kullanıcı kararı 2026-09-09) =====
   Araç çubuğu, ayrı ayrı duran kutuların yan yana dizilmesiydi: arama
   kutusu, süzgeç çipleri ve düğmeler farklı yüksekliklerdeydi ve satır
   dağınık okunuyordu.

   Şimdi tek bir bant: bütün denetimler AYNI yükseklikte (--bant-boy) ve
   bant kendi yüzeyine oturuyor. Ölçü tek değişkende — biri değişirse
   ötekiler kendiliğinden hizada kalıyor.

   `bilesenler.css` en son yükleniyor, yani buradaki kurallar style.css'teki
   eski `.toolbar` tanımını eziyor. */
.toolbar {
  --bant-boy: 34px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: var(--bosluk-3);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
/* Panelin İÇİNDEKİ araç çubuğu kendi yüzeyini almıyor: panelin zaten
   çerçevesi var, iç içe iki kutu gereksiz kalınlık demek. */
.panel > .toolbar { background: none; border: 0; padding: 0; }

.toolbar input[type="search"],
.toolbar input[type="text"],
.toolbar select,
.toolbar input[type="date"] {
  height: var(--bant-boy); box-sizing: border-box;
  padding: 0 10px; font-size: var(--yazi-md); color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
/* ARAMA KUTUSU: içinde büyüteç. Simge arka plan olarak geliyor — CSP satır
   içi işleyicileri blokluyor ve ayrı bir <span> koymak her ekranda markup
   değişikliği isterdi. */
.toolbar input[type="search"] {
  min-width: 260px; flex: 0 1 320px;
  padding-left: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6163' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 14px 14px;
}
.toolbar input:focus, .toolbar select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft);
}
/* Düğmeler de bantla aynı yükseklikte — farklı yükseklik satırı bozuyordu. */
.toolbar .btn { height: var(--bant-boy); display: inline-flex; align-items: center; }

/* SÜZGEÇ ÇİPLERİ bandın parçası: aynı yükseklik, kendi grubunda toplu.
   Ayrı bir yüzeye oturuyorlar ki "bunlar bir küme" görünsün — arama ve
   düğmeler tekil denetim, bunlar birbirini dışlayan seçenekler. */
.toolbar .filtre-cipler {
  display: inline-flex; gap: 2px; align-items: center;
  height: var(--bant-boy); box-sizing: border-box;
  padding: 3px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.toolbar .filtre-cip {
  height: 100%; padding: 0 11px; border: 0; border-radius: calc(var(--radius) - 1px);
  background: none; color: var(--muted);
  font-size: var(--yazi-sm); font-weight: 700; cursor: pointer; white-space: nowrap;
}
.toolbar .filtre-cip:hover { background: var(--panel); color: var(--ink); }
.toolbar .filtre-cip.aktif { background: var(--brand); color: #fff; }

/* İş emri bandı da aynı kalıba giriyor — iki ekranda iki farklı arama
   görüntüsü, aynı işi iki yerde yapmak demekti. */
.ie-arac-bar {
  --bant-boy: 34px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: var(--bosluk-3);
}
.ie-ara {
  height: var(--bant-boy); box-sizing: border-box;
  flex: 0 1 340px; min-width: 0;
  padding: 0 10px 0 30px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: var(--yazi-md); font-family: inherit; color: var(--ink); background: var(--panel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6163' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 9px center; background-size: 14px 14px;
}
.ie-ara:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft);
}
.ie-arac-bar .btn { height: var(--bant-boy); display: inline-flex; align-items: center; }

@media (max-width: 700px) {
  .toolbar input[type="search"], .ie-ara { flex: 1 1 100%; min-width: 0; }
  .toolbar .filtre-cipler { overflow-x: auto; max-width: 100%; }
}

/* ===== İŞ EMRİ AŞAMA SÜTUNLARI (kullanıcı isteği 2026-09-09) =====
   Adetten sonra üç dar sütun. Dar tutuluyor: taşıdıkları şey en fazla
   dört karakter ve geniş sütun asıl bilgiyi (ürün, adet) sağa itiyordu. */
.ie-asama { width: 78px; text-align: center; white-space: nowrap; }
th.ie-asama { font-size: var(--yazi-xs); }
/* Üç hücre de YÜZDE (2026-09-29): %100 · %14 · %0 aynı boyda, aynı
   tabular rakamla. Ayrım yalnız renkte: bitmiş yeşil, süren koyu,
   başlamamış soluk. Alt alta gelen sayılar aynı genişlikte — zıplamasın. */
.ie-asama-tam, .ie-asama-yuzde, .ie-asama-sifir { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--yazi-sm); }
.ie-asama-tam { color: var(--green); }
.ie-asama-sifir { color: var(--muted); font-weight: 400; }

/* Araç bandındaki onay kutusu — çiplerle aynı yükseklikte dursun ki
   bant tek satır gibi okunsun. */
.toolbar-tik {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--bant-boy); padding: 0 10px; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--yazi-sm); color: var(--ink); cursor: pointer; white-space: nowrap;
}
.toolbar-tik input { margin: 0; cursor: pointer; }

/* ===== ŞİFREMİ UNUTTUM / PAROLA TALEPLERİ (madde 8) ===== */
/* Giriş kutusundaki bağlantı: düğme değil bağlantı görünüyor — birincil
   eylem "Giriş Yap", bu onun yanında ikinci bir düğme gibi durmamalı. */
.login-bag {
  margin-top: 4px; padding: 0; background: none; border: 0;
  color: var(--muted); font-size: var(--yazi-sm); font-family: inherit;
  text-decoration: underline; cursor: pointer;
}
.login-bag:hover { color: var(--ink); }
/* Geçici parola: tek kopyası bu, okunması kolay olmalı. */
.pt-parola {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--yazi-lg); font-weight: 700; letter-spacing: 1px;
  padding: 3px 8px; background: var(--panel-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  user-select: all;
}

/* ===== ASN KAPSAM KUTUSU (kullanıcı isteği 2026-09-09) =====
   Sarı zemin: bu bir uyarı alanı, bir özet değil. Pasif sayısı sıfır
   olmadığında portalın istediği ama plandan düşmüş bir ürün var demektir
   ve bakılması gerekir. */
.asn-kapsam {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 18px;
  margin: var(--bosluk-2) 0;
  padding: 9px 14px;
  background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: var(--radius);
  font-size: var(--yazi-md); color: var(--amber-ink);
}
.asn-kapsam b { font-size: var(--yazi-lg); font-variant-numeric: tabular-nums; }
.asn-kapsam-pasif { color: var(--red); }

/* ===== KRİTİK STOK (kullanıcı isteği 2026-09-09) =====
   Satır sarı zemin, sayı turuncu: "bitmedi ama bitmek üzere". Eksi bakiye
   kırmızısından AYRI tutuluyor — eksi artık oluşamıyor, kritik ise normal
   bir işletme durumu ve her gün görülecek. Her gün görülen bir şeyin
   kırmızı olması, kırmızıyı anlamsızlaştırır. */
tr.kritik-stok > td { background: #fdf6d8; }
.stok-kritik { color: var(--amber); font-weight: 700; }

/* "KRİTİK STOK SEKMESİ" KURALLARI KALKTI (KDE-0029, 2026-10-10).
   Sekme kaldırıldı; `.ks-pay` (emniyet payı kutusu), `.ks-etkin` (yürürlükteki
   eşiği koyultan sınıf) ve `.ks-elle` ölçüsü onunla birlikte gitti — hiçbiri
   başka ekranda üretilmiyordu. Eşik girişinin ölçüsü zaten KDE-0018'de
   kapsamsız `.tablo-sayi` tabanına taşınmıştı (bilesen/01); Stok Düzenle
   sayfası oradan besleniyor, bu dosyadaki kurala bağlı değildi.
   `.kritik-col` / `.kritik-tik` KALIYOR: Ürün Listesi'ndeki "Stok İzle"
   sütunu onları kullanıyor ve o sütun eşik hesabını besliyor. */
.kritik-col, .kritik-tik { text-align: center; }
.kritik-tik input { cursor: pointer; }

/* ===== STOK DÜZENLE SAYFASI (KDE-0013, 2026-10-09) =====

   BEKLEYEN DEĞİŞİKLİK GÖRÜNÜR OLMAK ZORUNDA. Sayfa toplu düzenleme
   yapıyor ve Kaydet üstte: 25 satırlık bir sayfada hangi üçüne
   dokunduğunu hatırlamak kullanıcıya bırakılamaz. İşaret marka tonunda
   (`--brand-soft`) — uygulamanın her yerinde "aktif/seçili" aynı renkle
   söyleniyor (şartname §4.4) ve bu bir UYARI değil, o yüzden kırmızı ya
   da sarı değil.

   SAYI TEK SİNYAL DEĞİL: satır zemini boyanırken sayaç da kaç satırda
   bekleyen değişiklik olduğunu YAZIYOR. Renk körü kullanıcı için zemin
   tonu hiçbir şey söylemezdi.

   ÖLÇÜLDÜ 2026-10-09 (1440 · 1024 · 768) — İLK HÂLİ İKİ KUSUR TAŞIYORDU:
   ① `tr.sd-degisti td` (0,1,2) satır hover kuralından (`.table-wrap tbody
     tr:hover td`, 0,1,3) ZAYIF: değiştirilen satırın üstüne gelince işaret
     SİLİNİYORDU — hem de tam fareyle dokunurken, yani en çok bakıldığı anda.
   ② `--hover` (#eef1f1) ile `--brand-soft` (#eef3f3) arasında yeşil/mavi
     kanalda 2 birim fark var; gözle ayırt edilmiyor. Yani hover edilen TEMİZ
     satır, bekleyen değişikliği olan satırla aynı görünüyordu — işaret
     sinyal vermiyor, gürültü üretiyordu.

   Çözüm iki parçalı: seçici hover'ı YENİYOR (0,2,3) ve asıl sinyal SOL
   ŞERİT oldu. Şerit hover'ın dokunmadığı bir özellikte (`box-shadow`)
   duruyor ve uygulamanın aktiflik dili bu — açık çekmecenin başlık satırı
   da solda `--brand` şerit taşıyor (şartname §4.4). */
.table-wrap tbody tr.sd-degisti td { background: var(--brand-soft); }
.table-wrap tbody tr.sd-degisti td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.sd-sayac { font-size: var(--yazi-sm); color: var(--muted); }
.sd-sayac.sd-bekleyen { color: var(--brand-dark); font-weight: 700; }
/* Sayım geçmişi paneli — sayfanın altında, tablodan ayrı bir yüzey. */
.sd-gecmis { margin-top: var(--bosluk-4); }
.sd-gecmis-ust {
  padding: var(--bosluk-3) var(--bosluk-4);
  font-size: var(--yazi-sm); color: var(--muted);
}

/* ===== MALZEME BİÇİMİ ROZETİ (üretim rotasından türetildi) =====
   Üç biçim üç renk: sac düz gri-mavi, profil yeşilimsi, dolu kahverengi.
   Renkler ayırt etmek için, uyarı için değil — hiçbiri bir sorun
   bildirmiyor, o yüzden hiçbiri kırmızı/turuncu değil. */
.bicim-rozet {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: var(--yazi-xs); font-weight: 700; border: 1px solid;
}
.bicim-sac    { color: #1e4f6b; background: #e7f1f7; border-color: #b9d6e6; }
.bicim-profil { color: #2c5c3a; background: #e8f4ec; border-color: #bcdcc7; }
.bicim-dolu   { color: #6b4a1e; background: #f7f0e4; border-color: #e0cfae; }
/* Bükümlü, biçimin kendisi değil onun BİR ÖZELLİĞİ — o yüzden dolu değil
   çerçeveli: yan yana durduklarında hangisinin ana bilgi olduğu görünüyor. */
.bicim-bukumlu { color: var(--muted); background: transparent; border-color: var(--line-strong); font-weight: 400; }

/* Depo başlığındaki tür seçici — ad ile sil düğmesinin arasında. */
.tn-depo-sag { display: inline-flex; align-items: center; gap: 8px; }
.tn-depo-tur { height: 26px; font-size: var(--yazi-sm); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); }


/* STOK SATIRINDA GÖRSEL + KOD (KDE-0024, ölçülerek düzeltildi 2026-10-09).

   İlk hâlinde `<img>` ile `<b>kod</b>` bitişikti: görselin çerçevesi kodun
   ilk harfine değiyordu ve satır sıkışık görünüyordu. Kullanıcı: "görselle
   kod arasını düzenle, birazda büyütebilirsin."

   TABAN SINIFA DOKUNULMADI: `.liste-gorsel` 40×28 olarak duruyor (Ürün
   Listesi, üretim ağacı ve Stok Düzenle onu kullanıyor). Burada yalnız
   #stokTablo içindeki ölçü büyütülüyor — satır yüksekliği bu tablonun kendi
   kararı, ötekileri etkilememeli.

   `inline-flex` + `gap`: boşluğu `margin` ile vermek görselsiz kutuda da
   boşluk bırakır ve hizayı kaydırırdı; flex boşluğu yalnız ÖGELER ARASINDA
   açıyor. `vertical-align` yerine `align-items: center` — 36px görselle 13px
   metni taban çizgisine göre hizalamak metni aşağı itiyordu.

   KDE-0025 (2026-10-10): sınıf `.stok-link` → `.stok-kod`. Hücre artık
   bağlantı değil, düz metin — tıklanmayan bir şeyi bağlantı gibi göstermek
   (imleç, alt çizgi, Tab durağı) yalan söylüyordu.

   `#sdTablo` da AYNI ölçüyü alıyor (kullanıcı: "Stok Düzenle'nin altında da
   aynı şekilde yap"). İki ekranda aynı satırın iki farklı boyda görünmesi,
   birinden ötekine geçen kişiye "başka bir liste" izlenimi verirdi. */
/* SARMALAYICI `<span>` ŞART, `<td>`ye verilemez (ölçülen hata 2026-10-10).
   Sınıf önce hücrenin kendisine konmuştu; bir `<td>`ye `display: inline-flex`
   vermek onu tablo sütun modelinden ÇIKARIYOR — sütunlar hizasını kaybetti,
   kullanıcı "stok sayfasını bozdun" dedi. Flex kutusu hücrenin İÇİNDE olmalı. */
/* `flex`, `inline-flex` DEĞİL (KDE-0028, ölçüldü 2026-10-10). Satır içi kutu
   taban çizgisine oturur: inline-flex sarmalayıcının taban çizgisi ilk
   ögenin — yani 36px görselin — ALT kenarıydı, altına da yazı tipinin iniş
   payı ekleniyordu. Ölçüm: satır 42,3px, görsel 36px, üstte 0,5px altta
   5,8px → görsel satır ortasının 2,6px YUKARISINDA. Kullanıcı "görseller
   satırda üste dayalı" derken gördüğü buydu. Blok seviyesindeki flex
   kutusunun taban çizgisi yoktur; hücre onu ortalar.
   İZOLE DENEMEDE GÖRÜNMEZ: tek hücreli bir kopyada satır yüksekliğini
   görselin kendisi belirliyor, boşluk doğmuyor ve kusur saklanıyor. */
#stokTablo .stok-kod,
#sdTablo .sd-kod {
  display: flex; align-items: center; gap: var(--bosluk-3);
  text-decoration: none;
}
#stokTablo .liste-gorsel,
#sdTablo .liste-gorsel { width: 52px; height: 36px; flex: 0 0 auto; }

/* SAYI SÜTUNLARI ORTALI — yalnız Stok ve Stok Düzenle (KDE-0027, kullanıcı
   kararı 2026-10-10: "değerleri ortala").

   Küresel `.num` sağa yaslı ve `padding-right`i `!important` taşıyor; o
   kurala DOKUNULMUYOR — onlarca tablo ondan besleniyor ve sağa yaslama
   para/miktar sütunlarında okumayı kolaylaştırıyor. Burada iki tablo
   kapsanıyor.

   `!important` zorunlu: küresel kuraldaki `padding-right` de `!important`,
   onu dengelemeden sağ dolgu ortalamayı sola kaydırıyor.

   Başlık ve hücre BİRLİKTE ortalanıyor — yalnız hücreyi ortalamak başlığı
   sağda bırakır ve sütun eğri görünür. İçerideki girdi kutusu da ortalı,
   yoksa yazarken sayı sola kaçıyor. */
#stokTablo th.num, #stokTablo td.num,
#sdTablo th.num, #sdTablo td.num {
  text-align: center;
  padding-right: var(--bosluk-3) !important;
}
#sdTablo td.num .tablo-sayi { text-align: center; }

/* ===== ALT BİLEŞENLER TABLOSU (KDE-0078) =====
   Tablonun kendisi İş Emri'nin `bom-tablo` sınıflarını kullanıyor; burada
   yalnız BU ekrana özel iki şey var: düzenleme kipindeki İşlem sütunu ve
   satır arasına açılan ekleme formu. Tablo kuralları KOPYALANMADI. */
.alt-bilesen-tablo .ab-islem { white-space: nowrap; text-align: right; width: 1%; }
.alt-bilesen-tablo th.ab-islem { text-align: right; }
.alt-bilesen-tablo .ab-islem .btn + .btn { margin-left: 4px; }
/* Form satırı tablo zemininden AYRILIYOR: aynı zeminde dursaydı veri satırı
   gibi okunur ve "hangi satıra ekliyorum" sorusu belirsiz kalırdı. */
.alt-bilesen-tablo .ab-form-satir > td { background: var(--panel-2); padding: var(--bosluk-2) var(--bosluk-3); }
.ab-arac .ab-ara { min-width: 220px; }

/* ----- TASARIMA UYUM (kullanıcı 2026-10-11: "görsele uymaya çalış ve
   tasarımı aynı yap; görselden farklı olarak Rota sütunu ekledik sadece") -----

   MONTAJ SATIRI: --panel-2 zemin, kalın yazı. Ağaçta göz önce "nerede
   dallanıyor" diye bakıyor; montaj düz satırla aynı göründüğünde bu soru
   her seferinde kademe numarasını okumayı gerektiriyordu. */
.alt-bilesen-tablo .ab-montaj > td { background: var(--panel-2); font-weight: 600; }
.alt-bilesen-tablo .ab-montaj:hover > td { background: var(--hover); }

/* ALT SATIRI ANA KALEMİNE BAĞLAYAN 1px ÇİZGİ (tasarım notu: "alt satırlarda
   ana kaleme bağlanan 1px --line-strong çizgi"). Konum satır içinde
   `--ab-cizgi` değişkeniyle geliyor: kademe derinliği SINIRSIZ, her seviyeye
   ayrı sınıf yazılamazdı. Hücre `relative` olmasa çizgi en yakın konumlanmış
   ataya göre yerleşir ve satırdan kaçardı. */
.alt-bilesen-tablo .bom-kod { position: relative; }
.alt-bilesen-tablo .bom-kod[data-alt]::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 1px;
  left: var(--ab-cizgi); background: var(--line-strong);
}

/* GÖRSEL 26px KARE (tasarım notu: "Görsel 26px küçük resim (P3 standardı);
   yoksa boş kutu"). `liste-gorsel` 40x28 — ürün listesinin ölçüsü. Sınıf
   KORUNUYOR ki görsel haritası (KDE-0030) ve kırık resim kapısı çalışmaya
   devam etsin; yalnız ölçü bu tabloda daralıyor. */
.alt-bilesen-tablo .bom-gorsel .liste-gorsel { width: 26px; height: 26px; }

/* ADET SÜTUNU DAR: küresel `.num` kuralı sağa `--bosluk-4` dolgu koyuyor ve
   sütunu 52px'lik girdi için 104px'e çıkarıyordu. Bu tablo 10 sütunla
   uygulamanın en geniş tablosu; ölçüldü (`npm run ab-olcum`), tasarımın
   20px girintisi ve ikonlu tip rozeti eklenince düzenleme kipi 1280'de 3px
   taşıyordu. Dolgu bir kademe inince taşma kapanıyor — sütun sırası ya da
   tasarımın hiçbir ölçüsü değişmeden. */
.alt-bilesen-tablo th.num, .alt-bilesen-tablo td.num { padding-right: var(--bosluk-3) !important; }

/* DİKEY ADIM LİSTESİ — yalnız rota penceresinde (kullanıcı 2026-10-11:
   "şuanki yan yana rozet yapısını çok istemiyorum").

   Yan yana dizilen etiketlerde sıra yatay okunuyor, satır dolunca alta
   kayıyordu; "3. adım hangisi" sorusu saymayı gerektiriyordu. Dikeyde sıra
   göz hareketiyle aynı yönde akıyor.

   `×` HEDEFİ BÜYÜDÜ: 20px'lik düğme tek karakterlik bir tıklama hedefiydi ve
   yanlış metodu silmeye açıktı. Satır tam genişlik olduğu için düğme sağ uca
   yaslanıp 28px'e çıkabiliyor — komşu etiketle arasında fiziksel mesafe var.

   Sınıf pencere açılırken ekleniyor, kapanırken kaldırılıyor: aynı kutu
   gizliyken de duruyor ve oraya dikey yerleşim uygulamanın anlamı yok. */
.rota-pencere { min-width: 320px; }
.mc-dikey .metod-chips { flex-direction: column; align-items: stretch; gap: var(--bosluk-1); }
.mc-dikey .metod-chip { border-radius: var(--radius); padding: 5px 4px 5px 5px; justify-content: flex-start; }
.mc-dikey .metod-chip .mc-sil { width: 28px; height: 28px; margin-left: auto; }