/* --------------------------------------------------------------------------
   11 · ÜRETİM AĞACI (iş emri rotası) — YENİ
   Parçadan ürüne yakınsayan yatay ağaç; raylar saf CSS.
   -------------------------------------------------------------------------- */
/* KART 300 → 330 px, iç boşluk 9/11 → 11/13 (KDE-0044, kullanıcı: "mevcut
   ağaçtaki kartları biraz büyütelim"). Genişlik sütun hizasını belirliyor —
   kartın içindeki hiçbir şey esnemiyor, o yüzden ölçü burada tek yerde. */
:root { --agac-kart-w: 330px; --agac-ray-w: 32px; }
.agac { display: flex; flex-direction: row-reverse; align-items: center; }
.agac > * { flex: 0 0 auto; }
.agac-ray { position: relative; width: var(--agac-ray-w); align-self: stretch; }
.agac-ray::before { content: ""; position: absolute; right: 16px; top: var(--ray-inset, 50%); bottom: var(--ray-inset, 50%); width: 1px; background: var(--line-strong); }
.agac-ray::after  { content: ""; position: absolute; right: 0; left: 16px; top: 50%; height: 1px; background: var(--line-strong); }
/* Kolon SAĞA yaslı: kartın yeri montaj SEVİYESİ belirlesin.
   Varsayılan `stretch` ile yaprak kart kolonun soluna, alt ağacın kartı ise
   kendi sağ kenarına oturuyordu; 1. seviyedeki bir parça 2. seviyedekilerle
   aynı sütuna düşüyordu. Sağa yaslayınca aynı seviyedeki her kart aynı
   sütunda — bağlantı çizgileri de artık boşluğa değil raya bakıyor. */
.agac-kol { display: flex; flex-direction: column; align-items: flex-end; gap: var(--bosluk-3); }
.agac-kart {
  position: relative; width: var(--agac-kart-w); padding: 11px 13px; cursor: pointer;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius);
}
.agac-kart::after { content: ""; position: absolute; right: -16px; top: 50%; width: 16px; height: 1px; background: var(--line-strong); }
.agac-kart.secili { background: var(--brand-soft); border-color: var(--brand); }
.agac-kart .kod { font-size: var(--yazi-sm); font-weight: 700; }
/* Filtre dışı düğüm: gizlenmez, soluklaşır — bağlam kaybolmasın */
.agac-kart.sonuk { opacity: .32; }
.agac-kart.sonuk:hover { opacity: .7; }
.ak-bas { display: flex; align-items: center; gap: 6px; }
/* Kimlik: parça NO başlık, tanım altında ikincil. Tanım uzun olabildiği için
   kırpılır — kart genişliği sütun hizasını belirliyor, esneyemez. */
.ak-kimlik { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ak-kimlik .kod { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-ad { font-size: var(--yazi-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-gorsel {
  width: 34px; height: 26px; flex: 0 0 auto; object-fit: contain;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 2px;
}
.ak-durum { font-size: var(--yazi-xs); font-weight: 700; letter-spacing: var(--harf-etiket); white-space: nowrap; }
/* 22px: 18px iken gerçek tıklama alanı 16×16'ya düşüyordu — fareyle isabet
   ettirmesi zor, dokunmatikte neredeyse imkânsız. */
.agac-ok {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0; line-height: 1;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px;
  font-size: var(--yazi-sm); color: var(--muted); cursor: pointer;
}
.agac-ok:hover { border-color: var(--brand); color: var(--brand); }
.agac-kart .ilerleme { min-width: 0; margin-top: 7px; }
.agac-kart .bar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.agac-kart .bar-dolu { height: 100%; background: var(--brand); }
.agac-kart .bar-dolu.tamam { background: var(--green); }
.agac-kart .ad { font-size: var(--yazi-md); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agac-cipler { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.op-cip {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 6px; white-space: nowrap;
  font-size: var(--yazi-xs); background: var(--panel);
  border: 1px solid var(--line); border-top: 2px solid var(--line-strong); border-radius: 2px;
}
.op-cip.devam { border-top-color: var(--brand); }
.op-cip.tamam { border-top-color: var(--green); }
.op-cip b { font-weight: 700; }
/* ALT SATIR: solda sayılar, sağda Rota düğmesi (KDE-0044).

   İKİ DÜZELTME, ikisi de kullanıcının ölçtüğü:
   · YAZI BİR TIK BÜYÜK (--yazi-xs 11px → --yazi-sm 12.5px): "görsel olarak
     anlaşılsın". 11 px kolon başlığı ölçüsü; burada okunan bir sayı var.
   · YAZI ÇUBUĞA ÇOK YAKINDI, AŞAĞI KAYDI (margin-top 6px). Çubuk yerinde
     duruyor — kullanıcı "yazı ilerleme çubuğuna yakın, aşağı kayması gereken
     yazı" diye ayrıca belirtti. */
.agac-trio {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-2);
  margin-top: 6px; font-size: var(--yazi-sm); color: var(--muted);
}
.agac-trio .at-sayi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rota düğmesi satırın sağ ucunda; sayılar uzasa da küçülmüyor. */
.agac-trio .rota-ac, .bom-rota .rota-ac { flex: 0 0 auto; padding: 2px 10px; }

/* Dar ekran: ağaç dikey girintili listeye döner.
   Sütun başlıkları ve yakınlaştırma burada anlamsız — kolonlar hizalanmıyor. */
@media (max-width: 900px) {
  .agac, .agac-kol { flex-direction: column; align-items: stretch; }
  .agac-ray { display: none; }
  .agac-kart { width: auto; }
  .agac-kart::after { content: none; }
  .agac-kart[data-seviye="1"] { margin-left: 26px; }
  .agac-kart[data-seviye="2"] { margin-left: 52px; }
  .agac-basliklar, .agac-zum { display: none; }
  .agac-olcek { zoom: 1 !important; display: block; }
  .agac-ara { width: 100%; }
}

/* --------------------------------------------------------------------------
   UYGULAMA EKİ · İş emri ağacının yerleşim kapları
   Tasarım kart ve rayı tanımladı ama bunları saran düzeni prototipte inline
   style ile vermişti. Üretimde inline style istemediğimiz için sınıflandırıldı.
   -------------------------------------------------------------------------- */
/* Yükseklik: tuval sağ panelin boyuna geriliyordu — ağaç kısaysa 200-300px boş
   alan kalıyor, uzunsa küçük bir kutuda kayıyordu. Artık bölüm içeriğe göre
   büyüyor ama ekranı yutmasın diye üstten sınırlı; iki yan da kendi içinde
   kayıyor. Alt sınır, tek düğümlü ağacın kutuyu çökertmesini engelliyor. */
/* `flex-wrap: nowrap` ŞART. Sarmalı bir flex kabında satırın çapraz ölçüsü
   ögelerin İÇERİK yüksekliğinden hesaplanıyor ve kabın `max-height`i onu
   kısıtlamıyor: rota panelinde çok operasyon olunca panel kaydırmak yerine
   kutudan TAŞIYORDU, alttaki adımlar hiç görünmüyordu. Sarmayı kapatınca
   ögeler kabın yüksekliğine sıkışıyor ve kendi içlerinde kayıyorlar.
   `min-height: 0` de gerekli — flex ögesinin varsayılan alt sınırı
   `min-content`, o kaldırılmadan `overflow` hiç devreye girmiyor. */
/* TEK AKIŞ (Selim 29.09 [27]–[29]): bölüm artık üstten sınırlı değil ve
   yanında rota paneli yok — rota ağacın ALTINDA. Tuval dikeyde içeriği kadar
   uzuyor, iç dikey kaydırma yok; sayfa tek başına kayıyor. Yatayda yalnız
   kullanıcı elle büyüttüğünde kayar (açılışta "Sığdır" ağacı sığdırıyor). */
.agac-bolum { display: block; min-width: 0; }
.agac-tuval { min-width: 0; padding: var(--bosluk-4); overflow-x: auto; overflow-y: hidden; cursor: grab; }

/* Tam ekran: ağaç bölümü tüm pencereyi kaplar (Esc ya da düğme ile çıkılır) */
body.agac-tam-ekran { overflow: hidden; }
.agac-sarmal.tam-ekran {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--panel); border: 0; overflow-y: auto;
}
.agac-sarmal.tam-ekran .agac-bolum { flex: 0 0 auto; }
/* Üretim sekmeleri (Ürün Ağacı · Rota) — standart .sekme-bar; style.css'teki
   eski .sekme-bar kuralının -4px kenar payı kutudan taşırıyordu, sıfırlandı. */
.agac-sarmal > .uretim-sekmeler { margin: 0; flex: 0 0 auto; }
.agac-sarmal.tam-ekran .agac-genislet { background: var(--brand); border-color: var(--brand); color: #fff; }

.agac-tuval.suruklu { cursor: grabbing; user-select: none; }
.agac-kart-kap { flex: 0 0 auto; }
/* Yakınlaştırma `zoom` ile, `transform: scale()` ile DEĞİL: ölçeklenmiş içerik
   transform'da kaydırma alanını küçültmüyor, hiçbir şey taşmazken yatay çubuk
   çıkıyordu. `zoom` yeniden yerleşim yaptığı için tuvalin scrollWidth'i doğru.
   Desteklemeyen tarayıcıda ağaç %100'de kalır — kaydırmayla yine kullanılabilir. */
.agac-olcek { display: inline-block; }

/* Araç çubuğu — aç/kapa · ara · durum filtresi · zum */
.agac-arac {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--bosluk-2);
  padding: var(--bosluk-3) var(--bosluk-4); border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.agac-arac > b { font-size: var(--yazi-md); }
.agac-ara { width: 210px; }
.filtre-cipler { display: inline-flex; gap: 4px; }
.filtre-cip {
  padding: 3px 9px; font-size: var(--yazi-xs); font-weight: 700; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
}
.filtre-cip:hover { border-color: var(--brand); color: var(--brand); }
.filtre-cip.aktif { background: var(--brand); border-color: var(--brand); color: #fff; }
.agac-zum { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.agac-zum b { min-width: 44px; text-align: center; font-size: var(--yazi-sm); }

/* Görünüm değiştirici — Ağaç / Kademeli BOM. Segment düğme: iki seçenek de
   hep görünür, hangisinde olduğun tek bakışta okunuyor. */
.gorunum-sec { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.gs-btn {
  padding: 4px 12px; font-size: var(--yazi-xs); font-weight: 700; cursor: pointer;
  background: var(--panel); border: 0; color: var(--muted);
}
.gs-btn + .gs-btn { border-left: 1px solid var(--line-strong); }
.gs-btn:hover { color: var(--brand); }
.gs-btn.aktif { background: var(--brand); color: #fff; }

/* ---------- Kademeli BOM tablosu ----------
   Kademe derinliği SABİT DEĞİL: girinti `padding-left` ile satır satır
   hesaplanıyor, 4-5 kademeli montajda da çalışıyor. */
.bom-kap { padding: var(--bosluk-3); }
.bom-ozet { font-size: var(--yazi-xs); margin-bottom: var(--bosluk-2); }
/* SÜTUN DÜZENİ (KDE-0044, kullanıcı 2026-10-10):
     Kademe | Görsel | Ürün No | Tanım | Durum | Gerekli | Tamam | Kalan | Rota
   Kalkanlar: Tür · Adet/Üst · Metod. Gerekçeleri `isemri-detay-sayfa.js`te. */
.bom-tablo { width: 100%; font-size: var(--yazi-md); border-collapse: collapse; }
.bom-tablo th {
  white-space: nowrap; font-size: var(--yazi-xs); letter-spacing: var(--harf-etiket);
  color: var(--muted); font-weight: 700; padding: 7px 10px; border-bottom: 1px solid var(--line-strong);
}
.bom-tablo td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* KADEME AKORDİYON: girinti ve aç/kapa oku bu sütunda. Kod ile tanım ayrı
   sütunlara bölününce hiyerarşi girintisi onların hizasını bozuyordu —
   derinliği söyleyen sütun kademe sütunu, girinti de orada durmalı.
   Sola yaslı, çünkü artık bir girinti taşıyor; sağa yaslı olsaydı girinti
   hiç görünmezdi. */
.bom-kod {
  font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap;
  font-size: var(--yazi-xs);
}
/* SOLA YASLAMA AYRI VE İKİ SEÇİCİLİ KURALDA — ÖLÇÜLEN KUSUR (KDE-0078).

   Yukarıdaki kuralın içinde `text-align: left` yazılıydı ve HİÇ İŞLEMİYORDU:
   `.bom-kod` tek sınıf (0,1,0), `.table-wrap td` iki seçicili (0,1,1) ve
   ortalıyor. Özgüllük sıradan güçlü olduğu için 03'ün 01'den sonra yüklenmesi
   kurtarmıyordu. Ölçüm (`npm run ab-olcum`) kademe ve kod hücresini `center`
   gösterdi — yani üstteki yorumun "sola yaslı, çünkü artık bir girinti
   taşıyor" açıklaması yazıldığı günden beri gerçekleşmemiş.

   AYNI TUZAK BU DOSYADA ZATEN KAYITLI (aşağıda, `.ie-urun-basi` / `.ie-asama`):
   "HTML'deki yorum 'ikisi de ortalı' diyordu ama ölçümde başlık `left`
   çıkıyordu". Not vardı; ikinci kez düşülmesi engellenmemişti.

   İŞ EMRİ'NİN KADEMELİ BOM'U DA ETKİLENİYOR: sınıflar ortak, kusur ortak,
   düzeltme ortak — "bir varyantta düzeltileni diğerlerinde ara". */
.table-wrap th.bom-kod, .table-wrap td.bom-kod,
.bom-tablo th.bom-kod, .bom-tablo td.bom-kod { text-align: left; }
.bom-kod .agac-ok { margin-right: 4px; vertical-align: middle; }
/* Görsel sütunu içeriğe göre dar; `liste-gorsel` ürün listeleriyle aynı ölçü. */
.bom-gorsel { width: 1%; padding-right: 0; }
.bom-gorsel .liste-gorsel { display: block; }
/* ÜRÜN NO ile TANIM AYRI SÜTUN: tek sütunda tanım kodun altına iniyordu ve
   kod listesi dikey taranamıyordu. No tek satır (kırpılır), tanım sarabilir.
   SOLA YASLAMA yukarıdakiyle aynı sebepten ayrı kuralda: ortalanmış kod
   sütunu, "dikey taranabilsin" diye ayrılmış olmasının anlamını götürüyordu. */
.bom-no { white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-wrap th.bom-no, .table-wrap td.bom-no,
.bom-tablo th.bom-no, .bom-tablo td.bom-no { text-align: left; }
/* KOD BAĞLANTISI MARKA RENGİNDE. Kural Alt Bileşenler tablosunun kendi
   sınıfında (`.ab-kod a`) duruyordu; sütun `bom-no`ya geçince bağlantı
   sessizce tarayıcının düz mavisine düşmüştü — hiçbir şey kırılmadığı için
   yalnız bakınca görülürdü. Buraya alındı, böylece İş Emri'ndeki ürün no
   bağlantısı da aynı rengi taşıyor: iki tablo tek dil. */
.bom-no a { color: var(--brand-dark); text-decoration: none; }
.bom-no a:hover { text-decoration: underline; }
.bom-ad { white-space: normal; }
/* Durum: yüzde üstte, etiket altta — yan yana iken sütun 130px tutuyordu */
.bom-durum { white-space: nowrap; }
.bom-durum small { display: block; white-space: nowrap; }
/* YASLAMA İKİ SEÇİCİLİ: tek sınıflı yazım `.table-wrap td`ye yeniliyor.
   Burada görünür bir kusur DOĞURMUYORDU (ikisi de ortalıyor) ama kural ölü
   yazılmış oluyordu — `.table-wrap td` bir gün değişse bu sütun sessizce
   onunla birlikte kayardı. `.bom-kod`ta aynı yazım gerçek kusur üretmişti. */
.bom-rota { white-space: nowrap; width: 1%; }
.table-wrap th.bom-rota, .table-wrap td.bom-rota,
.bom-tablo th.bom-rota, .bom-tablo td.bom-rota { text-align: center; }
.bom-bosluk { display: inline-block; width: 20px; text-align: center; }
.bom-satir { cursor: pointer; }
.bom-satir:hover > td { background: var(--panel-2); }
.bom-satir.secili > td { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.bom-satir.sonuk > td { opacity: .42; }
.bom-ham > td { background: var(--panel-2); }
.bom-ham .bom-ad { font-weight: 400; color: var(--muted); }
.bom-ops { color: var(--muted); font-size: var(--yazi-xs); white-space: nowrap; }
/* Başlık ve hücre BİRLİKTE ortalı, ikisi de iki seçicili — `.bom-rota`daki
   gerekçenin aynısı. */
.table-wrap th.bom-ops, .table-wrap td.bom-ops,
.bom-tablo th.bom-ops, .bom-tablo td.bom-ops { text-align: center; }
/* Operasyon sayısı rozeti — sütunu tek karaktere indiriyor, tıklanınca diyagram */
.op-say {
  min-width: 24px; height: 21px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2); color: var(--ink);
  font-weight: 700; font-size: var(--yazi-xs); line-height: 1; cursor: pointer;
}
.op-say:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Rota diyagramı (BOM → operasyon sayısı) ----------
   Operasyonlar bir SIRA. Düz metin bunu göstermiyordu; kutular ve aralarındaki
   ok akışı görünür kılıyor. Ok her adımın SOLUNA çiziliyor (`:first-child`
   hariç) — satır kaydığında baştaki ok "önceki satırdan devam" diye okunuyor,
   satır sonunda öksüz ok kalmıyor. */
.rd-kap { display: flex; flex-direction: column; gap: var(--bosluk-4); }
.rd-bas { display: flex; align-items: flex-start; gap: var(--bosluk-4); flex-wrap: wrap; }
.rd-gorsel { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line); background: var(--panel-2); }
.rd-parca { font-size: var(--yazi-lg); font-weight: 700; }
.rd-dortlu { display: flex; gap: 1px; margin-left: auto; background: var(--line); border: 1px solid var(--line); }
.rd-dortlu > div { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; background: var(--panel); min-width: 62px; }
.rd-dortlu span { font-size: var(--yazi-xs); font-weight: 700; letter-spacing: var(--harf-etiket); color: var(--muted); }
.rd-dortlu b { font-size: var(--yazi-md); }

.rd-akis { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--bosluk-2) 0; }
.rd-adim {
  position: relative; flex: 0 0 auto; width: 158px;
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; background: var(--panel);
}
.rd-adim + .rd-adim { margin-left: 26px; }
.rd-adim + .rd-adim::before {
  content: '→'; position: absolute; left: -21px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: var(--yazi-md);
}
.rd-adim.bitti { background: var(--panel-2); border-color: var(--green); }
.rd-no { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); color: #fff; font-size: var(--yazi-xs); font-weight: 700; }
.rd-ad { font-size: var(--yazi-sm); font-weight: 700; }
.rd-meta { font-size: var(--yazi-xs); }
.rd-ted { font-size: var(--yazi-xs); color: var(--brand); }
.rd-cubuk { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 2px; }
.rd-cubuk i { display: block; height: 100%; }
.rd-alt { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--yazi-xs); }

.rd-ham { border-top: 1px solid var(--line); padding-top: var(--bosluk-3); }
.rd-ham-satir { display: flex; justify-content: space-between; gap: var(--bosluk-3); padding: 3px 0; font-size: var(--yazi-sm); }

/* ---------- Operasyon dökümü penceresi ----------
   Solda seçim (çoklu), sağda önizleme. Seçim kutusu ile önizleme AYRI eylem:
   etikete tıklamak önizler, kutuya tıklamak dışa aktarıma katar. */
/* İki kolonlu düzen: solda seçim listesi, sağda içerik. Operasyon Dökümü ve
   Toplu Giriş aynı düzeni paylaşıyor — iki sayfa da "bir operasyon seç,
   içeriğini gör" işini yapıyor, farklı görünmeleri için sebep yok. */
.od-kap, .tg-kap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--bosluk-4); align-items: start; }
@media (max-width: 820px) { .od-kap, .tg-kap { grid-template-columns: minmax(0, 1fr); } }
.od-baslik { font-size: var(--yazi-sm); font-weight: 700; margin-bottom: var(--bosluk-2); }
.od-baslik small { font-weight: 400; margin-left: 8px; }
.od-sol, .tg-sol { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--bosluk-3); }
/* Toplu Giriş'te seçim TEK — onay kutusu yok, satırın kendisi düğme.
   Görünüşü `.od-secenek` ile aynı tutuluyor ki iki sayfa arasında geçen göz
   yeni bir şey öğrenmek zorunda kalmasın. */
.tg-op { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px; border: 0;
  border-radius: 4px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tg-op:hover { background: var(--panel-2); }
.tg-op.secili { background: var(--brand-soft); box-shadow: inset 2px 0 0 var(--brand); font-weight: 700; }
.tg-op-ad { flex: 1; min-width: 0; }
.od-secenek { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 4px; cursor: pointer; }
.od-secenek:hover { background: var(--panel-2); }
.od-secenek.onizlenen { background: var(--brand-soft); box-shadow: inset 2px 0 0 var(--brand); }
.od-ad { flex: 1; font-size: var(--yazi-sm); cursor: pointer; }
.od-ad.satinalma { font-weight: 700; }
/* Tamamlanan süreç kutusu kapanır — içerik silinmez, gizlenir. Başlık ve
   aç/gizle bağlantısı kalır ki yanlış işaretlenen adım düzeltilebilsin. */
.surec-kutu.sk-kapali .sk-govde { display: none; }
.surec-kutu.sk-bitti > h5 { display: flex; align-items: baseline; gap: 8px; }
.surec-kutu.sk-bitti > h5::before { content: '✓'; color: var(--green); font-weight: 700; }
.sk-goster { margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--yazi-xs); font-weight: 400; color: var(--brand); text-decoration: underline; }
.sk-goster:hover { color: var(--brand-dark); }
/* Tedarikçi operasyonları kategori altında — başlıktan toplu seçim */
.ted-op-grup { break-inside: avoid; margin-bottom: var(--bosluk-3); }
.ted-op-kat { display: flex; align-items: center; gap: 8px; padding: 4px 6px; margin-bottom: 2px;
  background: var(--panel-2); border-radius: 4px; }
.ted-op-grup > label[data-ad] { padding-left: var(--bosluk-4); }
/* Geriye dönük işlem: her girişin kendi tarihi */
.adim-chk { display: flex; align-items: center; gap: 6px; }
.adim-chk .adim-ad { flex: 1; min-width: 0; }
.adim-tarih, .mini-tarih { font: inherit; font-size: var(--yazi-xs); padding: 1px 4px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--panel); color: var(--muted); }
.adim-tarih { width: 118px; }
.mini-tarih { width: 116px; }
.adim-tarih:focus, .mini-tarih:focus { color: var(--ink); border-color: var(--brand); }
/* Plandan iş emri önerisi ekranı */
.po-bolum { margin-bottom: var(--bosluk-4); }
.po-bas { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: var(--yazi-sm); }
.po-bas .btn { margin-left: 0; }
.po-bas b { font-size: var(--yazi-md); }
.po-bakiye { font-size: var(--yazi-xs); color: var(--amber); background: var(--amber-bg);
  border: 1px solid var(--amber-line); border-radius: 999px; padding: 0 6px; }
/* Öneri satırındaki ürün listesi — kod, tanım ve görsel; hangi ürüne emir
   açıldığı seçim yapılmadan görünsün diye satırın içinde duruyor. */
.po-urunler { min-width: 280px; }
.po-u { display: flex; align-items: center; gap: 8px; padding: 2px 0; line-height: 1.35; }
.po-u + .po-u { border-top: 1px solid var(--line); }
.po-u-kod { font-weight: 700; white-space: nowrap; }
.po-u-ad { flex: 1; min-width: 0; color: var(--ink-2); font-size: var(--yazi-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-u-adet { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.po-gizli > .po-u:first-child { border-top: 1px solid var(--line); }
.po-dahasi { margin-top: 4px; }
/* Süreç penceresinde ürün arama — pencerede yüzlerce satır olabiliyor */
.surec-ara-bar { display: flex; align-items: center; gap: 10px; margin-bottom: var(--bosluk-3); }
.surec-ara { flex: 1; min-width: 0; height: var(--row-h); padding: 0 var(--bosluk-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit;
  background: var(--panel); color: var(--ink); }
.surec-ara:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
/* AŞAMA SÜZGECİ arama kutusunun yanında. `flex: none` — arama kutusu esneyip
   yeri dolduruyor, süzgeç içeriği kadar kalıyor; ikisi de esnerse aşama adları
   uzun olduğunda arama kutusu sıkışıyor. */
.surec-asama { flex: none; height: var(--row-h); padding: 0 var(--bosluk-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit;
  background: var(--panel); color: var(--ink); cursor: pointer; }
.surec-asama:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ================== ASN — SEVKİYAT BİLDİRİMİ ================== */

/* ANLIK TEDARİKÇİ EKLEME — iş emrinden açılan küçük form.
   Dar tutuluyor: iki alanlık bir form geniş bir pencerede kaybolur ve
   "burada başka alanlar da var mı" izlenimi verir. */
.yt-form { display: flex; flex-direction: column; gap: var(--bosluk-3); max-width: 420px; }
.yt-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--yazi-sm); color: var(--muted); }
.yt-form input { height: var(--row-h); padding: 0 var(--bosluk-3); border: 1px solid var(--line-strong);
  border-radius: var(--radius); font: inherit; background: var(--panel); color: var(--ink); }
.yt-form input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Düğmeler SAĞA yaslı ve Kaydet sonda — okuma yönüyle aynı sırada,
   "vazgeç" yanlışlıkla tıklanacak yerde durmuyor. */
.yt-dugmeler { display: flex; justify-content: flex-end; gap: var(--bosluk-2); margin-top: var(--bosluk-2); }
/* Panel boşken sebebi söyleyen tek satır. Panelin tamamı kadar yer kaplamıyor
   ama "burası neden boş" sorusunu cevaplıyor. */
.panel-bos-not { margin: var(--bosluk-3) 0 0; padding: 8px 12px; border-radius: var(--radius);
  font-size: var(--yazi-sm); color: var(--muted); background: var(--panel-2); border: 1px dashed var(--line); }
.panel-bos-not b { color: var(--ink); }
/* Fason: KATEGORİ → TEDARİKÇİ → parçalar. Sevkiyat tedarikçi başına
   yapılıyor, o yüzden asıl kutu tedarikçi; kategori onları toplayan başlık. */
.fs-kategori { margin-top: var(--bosluk-4); }
.fs-kat-bas { display: flex; align-items: baseline; gap: 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--line-strong); font-size: var(--yazi-md); font-weight: 700; }
.fs-tedarikci { margin: var(--bosluk-3) 0 0 var(--bosluk-3); padding-left: var(--bosluk-3);
  border-left: 2px solid var(--line); }
.fs-ted-bas { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: var(--yazi-sm); }
/* Gönder / Termin tedarikçi adının yanında — sevkiyat tedarikçi başına */
.fs-ted-eylem { margin-left: auto; display: flex; gap: 6px; }
.fs-parca { white-space: nowrap; }
/* Üretim aşaması kilitliyken kutunun başına gelen şerit */
.uretim-kilit { margin-bottom: var(--bosluk-3); padding: 8px 12px; border-radius: var(--radius);
  font-size: var(--yazi-sm); color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-line); }
/* Akışta önü kapalı rota adımı: sebep düğmenin solunda tek kısa cümle.
   Alarm kutusu değil (Selim 29.09 [31]: "çok gereksiz") — düz metin. */
.ra-tavan { flex: 1 1 auto; min-width: 0; font-size: var(--yazi-xs); color: var(--amber-ink); }
/* Plan sapması: adımın içinde, kutuların altında tek satır. Kasıtlı olarak
   çerçevesiz ve gri — `.ra-tavan` bir ENGEL bildiriyor (amber, eylem
   satırında), bu ise yalnızca bir ÖLÇÜM. */
.ra-plan-not { margin: 4px 0 0; font-size: var(--yazi-xs); color: var(--muted); }
.ra-plan-not .pn-gec { color: var(--amber); }
.ra-plan-not .pn-erken { color: var(--green); }
.ra-plan-not .pn-rev { color: var(--muted); cursor: help; }
.od-say { font-size: var(--yazi-xs); color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: 1px 8px; }
.od-alt { display: flex; gap: 6px; margin-top: var(--bosluk-3); border-top: 1px solid var(--line); padding-top: var(--bosluk-3); }
.od-tablo { width: 100%; font-size: var(--yazi-sm); }
.od-tablo td small { display: block; color: var(--muted); }
.od-ham-sat { display: block; font-size: var(--yazi-xs); }
.od-ham-sat i { color: var(--muted); font-style: normal; margin-left: 6px; }
.od-sarf { margin-top: var(--bosluk-4); border-top: 1px solid var(--line); padding-top: var(--bosluk-3); }
.od-sarf-sat { display: flex; align-items: center; gap: 8px; font-size: var(--yazi-sm); padding: 3px 0; }
.od-sarf-sat.yok { color: var(--red); }
.od-yok { font-size: var(--yazi-xs); font-weight: 700; color: var(--red); }

/* Son hareket tarih+saat — rakamlar hizalı dursun ki sıralama okunabilsin */
.stok-zaman { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Fason paneli ----------
   Malzeme panelinin kardeşi, aynı tablo dilini kullanıyor. Tek eklediği
   vurgu "tedarikçide": rafta olmayan ama bize ait miktar. */
.fs-ozet {
  font-size: var(--yazi-xs); font-weight: 700; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand);
}
.fs-ozet.bekleyen { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber); }
.fs-tablo td small { font-weight: 400; }
.fs-disarida { color: var(--brand); }
.fs-gecikti { color: var(--red); font-weight: 700; }
.fs-ertelendi { color: var(--amber); cursor: help; margin-left: 3px; }
/* Gönderim penceresindeki üretim girişi kutusu — kararın kendisi, form alanı
   değil; o yüzden çerçeveli ve açıklamalı. */
.fg-uretim {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  padding: 12px 14px; border: 1px solid var(--brand-line); border-radius: var(--radius);
  background: var(--brand-soft); cursor: pointer;
}
.fg-uretim input { margin-top: 3px; flex: none; }
.fg-uretim small { display: block; margin-top: 4px; color: var(--muted); font-weight: 400; }

/* Operasyon tablosu ve toplu tedarikçi penceresi.
   DİKKAT — satırlar `metod-ro` sınıfını KULLANMAZ. O sınıf çip bulutu için
   yazılmış ve `display: flex` veriyor; bir `<tr>`ye düştüğü anda tablo düzeni
   çöküyor: hücreler sütun paylaşmayı bırakıp her satır kendi başına
   boyutlanıyor ve sütunlar birbirinden kayıyor. Bir kez yaşandı.
   Sütun genişlikleri `<colgroup>` ile sabit — açılır listelerin içeriği
   sütunu itmesin diye. */
.pm-tablo, .tt-tablo { width: 100%; font-size: var(--yazi-sm); table-layout: fixed; }
.pm-tablo th, .tt-tablo th { white-space: nowrap; }
.pm-tablo td, .tt-tablo td { vertical-align: middle; }
.pm-tablo .pm-no { font-variant-numeric: tabular-nums; color: var(--muted); }
.pm-tablo .pm-ad { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-tablo select, .tt-tablo select { width: 100%; padding: 3px 6px; font-size: var(--yazi-sm); }
.pm-tablo tr.birim-gun .pm-ad { color: var(--amber); }
.pm-tablo tbody tr:hover > td { background: var(--panel-2); }

/* --- Ayrı pencere kipi (#operasyon) ---
   Kabuk gizleniyor: pencere bir araç, ana uygulamanın kopyası değil. */
body.ayri-pencere .sidebar,
body.ayri-pencere .sidebar-backdrop,
body.ayri-pencere .menu-toggle { display: none !important; }
body.ayri-pencere .app { min-height: 100vh; }
body.ayri-pencere .view { padding: var(--bosluk-4) var(--bosluk-5) var(--bosluk-5); }
.op-bilgi {
  padding: var(--bosluk-3) var(--bosluk-4); border-bottom: 1px solid var(--line);
  background: var(--panel-2); font-size: var(--yazi-sm); color: var(--muted);
}
.op-bilgi p { margin: 0; max-width: 92ch; }
.op-bilgi p + p { margin-top: 6px; }
.op-bilgi b { color: var(--ink); }
/* Uzun listede başlık satırı yapışkan — 45 satırda hangi sütun olduğu kaybolmasın */
.op-tablo-kap { max-height: calc(100dvh - 420px); min-height: 240px; overflow: auto; }
.op-tablo-kap thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); }
.tt-ezme { display: inline-flex; align-items: center; gap: 6px; font-size: var(--yazi-xs); color: var(--muted); white-space: nowrap; }

/* Hammadde → operasyon bağı (sarf malzeme).
   DİKKAT: `.hm-form label` kuralı `flex-direction: column` veriyor ve seçicisi
   daha güçlü. Çip de bir `label` olduğu için ilk yazımda kutu/numara/ad alt
   alta diziliyor, `999px` yuvarlaklıkla birlikte daireye dönüşüyordu.
   Bu yüzden kural `.hm-form label.hm-metod-sec` olarak yazılıyor. */
.hm-metod-kutu { display: block; }
.hm-metod-et { display: block; font-size: var(--yazi-sm); font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.hm-metod-et small { font-weight: 400; margin-left: 8px; }
.hm-metod-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-form label.hm-metod-sec, .hm-metod-sec {
  display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
  cursor: pointer; white-space: nowrap; width: auto;
  padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--yazi-sm); font-weight: 400; color: var(--ink); background: var(--panel);
}
.hm-form label.hm-metod-sec input, .hm-metod-sec input { margin: 0; flex: none; }
.hm-metod-sec b { color: var(--muted); font-weight: 700; font-size: var(--yazi-xs); }
.hm-metod-sec:hover { border-color: var(--brand); }
.hm-metod-sec.acik { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.hm-metod-hucre { white-space: normal; }
.hm-metod-cip {
  display: inline-block; margin: 1px 3px 1px 0; padding: 1px 8px;
  border: 1px solid var(--line); border-radius: 999px; font-size: var(--yazi-xs); color: var(--muted);
}

/* Sütun başlıkları — hangi kolon ne. Ağaçla aynı yönde (row-reverse) akar. */
.agac-basliklar { display: flex; flex-direction: row-reverse; margin-bottom: var(--bosluk-3); }
.ab-sutun { width: var(--agac-kart-w); flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; padding-bottom: 5px; border-bottom: 1px solid var(--line-strong); }
.ab-sutun > span { font-size: var(--yazi-xs); font-weight: 700; letter-spacing: var(--harf-etiket); color: var(--muted); }
.ab-alt { font-size: var(--yazi-xs); color: var(--faint); letter-spacing: 0; }
.ab-ray { width: var(--agac-ray-w); flex: 0 0 auto; }

/* ÜRETİM ROTASI — ağacın ALTINDA, tam genişlik (Selim 29.09 [28]–[30]).
   Eskiden sağda 320px'lik, kendi kaydırma çubuğu olan bir sütundu. Artık
   iç kaydırma YOK: üstte tek satırlık başlık (parça + dört ölçü), altında
   üretim metodu kartları soldan sağa rota sırasıyla. Her kart aynı iskelet —
   kutu içinde kutu yok. */
.agac-yan {
  box-sizing: border-box; min-width: 0;
  border-top: 1px solid var(--line); background: var(--panel-2); padding: var(--bosluk-4);
}
.ay-ust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--bosluk-3) var(--bosluk-5); }
.ay-kimlik { min-width: 0; flex: 1 1 240px; }
.ay-baslik { font-size: var(--yazi-xs); font-weight: 700; letter-spacing: var(--harf-etiket); color: var(--muted); }
.ay-ad { font-size: var(--yazi-lg); font-weight: 700; margin-top: 2px; overflow-wrap: anywhere; }
.ay-tanim { font-size: var(--yazi-sm); font-weight: 400; margin-left: 6px; }
.ay-gorsel {
  display: block; width: 56px; height: 56px; flex: 0 0 auto; object-fit: contain;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}

/* GEREKLİ · TAMAM · KALAN · SÜRE — başlık satırında yan yana, çerçevesiz */
.ay-dortlu { display: flex; flex-wrap: wrap; gap: var(--bosluk-2) var(--bosluk-5); }
.ay-dortlu > div { display: flex; flex-direction: column; gap: 2px; min-width: 56px; }
.ay-dortlu span { font-size: var(--yazi-xs); font-weight: 700; letter-spacing: var(--harf-etiket); color: var(--muted); }
.ay-dortlu b { font-size: var(--yazi-baslik); }

/* Kartlar: dar ekranda tek sütun, genişte 3-4 yan yana. `align-items:start`
   — katlı (tamamlanmış) kart açık komşusunun boyuna gerilmesin. */
.ay-adimlar {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--bosluk-3); align-items: start; margin-top: var(--bosluk-4);
}
.agac-tuval { min-height: 200px; }

/* Kart. style.css'teki `.rota-adim` (şablon ekranının girdi kutusu) aynı adı
   taşıyor — ölçü ve kenarlık burada açıkça yeniden yazılıyor. */
.agac-yan .rota-adim {
  width: auto; box-sizing: border-box; min-width: 0; font-size: var(--yazi-md);
  padding: var(--bosluk-3); background: var(--panel);
  border: 1px solid var(--line); border-top: 3px solid var(--line-strong); border-radius: var(--radius);
}
/* Durum rengi kartın üst çizgisinde ve rozette — tokens.css ② DURUM kümesi */
.agac-yan .rota-adim.ra-suruyor { border-top-color: var(--durum-is); }
.agac-yan .rota-adim.ra-tamam { border-top-color: var(--durum-iyi); }
.rota-adim .adim-no {
  width: 20px; height: 20px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: var(--yazi-xs); font-weight: 700; color: #fff;
}
.ra-bas { display: flex; align-items: center; gap: 7px; }
.ra-bas b { flex: 1; min-width: 0; font-size: var(--yazi-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Katlama oku — başlık satırının tamamı değil YALNIZ ok tıklanabilir. */
.ra-katla {
  /* 20px TABAN: görsel denetim 20'nin altını "küçük tıklama hedefi" sayıyor. */
  flex: 0 0 auto; width: 20px; height: 20px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--faint); font-size: var(--yazi-md); line-height: 1;
}
.ra-katla:hover { color: var(--ink); }
.rota-adim.kapali .ra-govde { display: none; }
/* Durum rozeti: hap biçimi, açık zemin + koyu metin (AAA) */
.ra-durum {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-size: var(--yazi-xs); font-weight: 700; letter-spacing: var(--harf-etiket);
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--line);
}
.ra-suruyor .ra-durum { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); }
.ra-tamam .ra-durum { color: var(--green); background: var(--green-bg); border-color: var(--green-line); }

/* Alan ızgaraları: sayılar üç eşit sütun, tarihler iki eşit sütun — etiketler
   kartlar arasında da aynı hizada. Tarih girdisi 116px'in altına inmesin
   diye kart tabanı 260px (iki tarih + boşluk sığıyor). */
.rota-alanlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bosluk-2); margin-top: var(--bosluk-3); }
.rota-alanlar.ra-tarihler { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--bosluk-2); }
.rota-alanlar .alan { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rota-alanlar .mini-tarih { width: 100%; box-sizing: border-box; }
.rota-alanlar .alan > span { font-size: var(--yazi-xs); font-weight: 700; letter-spacing: var(--harf-etiket); color: var(--muted); }
.rota-alanlar .mini-num { width: 100%; box-sizing: border-box; }
.rota-alanlar .alan > input,
.rota-alanlar .salt-okunur { flex: 1; }
.rota-alanlar .salt-okunur {
  display: flex; align-items: center; box-sizing: border-box; padding: 4px 8px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
}
/* Eylem satırı: kısıt cümlesi solda, düğme sağda; bitmiş adımda yeşil etiket */
.ra-alt {
  display: flex; align-items: center; gap: var(--bosluk-2); margin-top: var(--bosluk-3);
  padding-top: var(--bosluk-3); border-top: 1px solid var(--line);
}
.ra-alt .btn { margin-left: auto; }
.ra-bitti {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: var(--yazi-sm); font-weight: 700;
  color: var(--green); background: var(--green-bg); border: 1px solid var(--green-line);
}
.rota-ted { margin-top: var(--bosluk-3); }
.ra-aciklama { font-size: var(--yazi-sm); margin-bottom: 4px; }
/* Etiket seçimin ÜSTÜNDE duruyor: "İç üretim" bir SEÇİM, boşluk değil.
   Satır içi kalsaydı select tek başına duran, etiketsiz bir kutu gibi
   görünürdü — tam da kaldırmak istediğimiz izlenim. */
.rota-ted .ay-baslik { display: block; margin-bottom: 3px; }
.rota-ted select { width: 100%; }

/* SÜRE KUTUSU tedarikçi seçiminin hemen altında — ikisi tek karar olduğu için
   görsel olarak da bir arada duruyor. Ayrı bir kutuya alsaydık "tedarikçiyi
   seçtim ama süreyi nereye yazacağım" sorusu doğardı.

   `box-sizing` gerekiyor: kutu %100 genişlikte ve iç dolgusu var; onsuz
   kapsayıcıyı taşırıyor — iş emrindeki üç haneli değer taşmasının aynısı. */
.ra-sure { display: block; margin-top: 6px; }
.ra-sure .ay-baslik { display: block; margin-bottom: 3px; }
.ra-sure input { width: 100%; box-sizing: border-box; }
/* Miras alınan değeri gösteren yer tutucu, girilen değerden AYIRT EDİLEBİLİR
   olmalı: aynı tonda olsaydı "ürün kartı: 12" yazısı girilmiş bir değer gibi
   okunur ve kullanıcı yazdığını sanırdı. */
.ra-sure input::placeholder { font-style: italic; opacity: 0.75; }

.rota-adim .tamam-chk { flex: 0 0 auto; }

/* UYGULAMA UYARLAMASI: liste küçük görseli satır yüksekliğine oturtuldu.
   Eski ölçü 52×52 idi ve Ürün Listesi satırlarını 59px'e çıkarıyordu (yoğunluk
   ölçütü 34px). 44×34 denendi ama görsel satırın TAMAMINI dolduruyordu — üstte
   altta boşluk kalmayınca satır sıkışık, görsel taşmış gibi görünüyordu.
   40×28: satırda 3'er piksel nefes payı kalıyor. */
.liste-gorsel { width: 40px; height: 28px; }