/* İş emri oluştur (ürün kartı) */
.ie-olustur { display: flex; gap: 8px; margin-top: 10px; }
.ie-olustur input { flex: 1; border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 9px; font-size: var(--yazi-md); }
.ie-badge { display: inline-block; background: #dbe9e9; color: #284b63; border-radius: 5px; padding: 1px 6px; font-size: var(--yazi-xs); font-weight: 700; margin-left: 4px; }
/* İş emri seçim (yeni/mevcut) */
.ie-secim:empty { display: none; }
.ie-secim-kutu { margin-top: 10px; padding: 12px; background: #eef1f1; border: 1px solid #cdd9d9; border-radius: 4px; }
.ie-secim-baslik { font-weight: 700; font-size: var(--yazi-md); margin-bottom: 8px; }
.ie-secim-aksiyon { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ie-secim-aksiyon select { border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 9px; font-size: var(--yazi-md); }
/* İş emri detay — ürün blokları */
.ie-surec-baslik { margin: 6px 0 10px; }
.ie-urun-blok { border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; margin-bottom: 14px; }
.ie-urun-blok > h4 { margin: 0 0 10px; font-size: var(--yazi-lg); }
/* Montaj parça bloğu aç/kapa (iç içe ağaç yapısı — doğrudan çocuk seçiciler) */
.ie-parca-blok { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; }
.ie-parca-blok > .parca-toggle { margin: 0; padding: 9px 12px; font-size: var(--yazi-md); background: #f3f3f3; border-radius: 7px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.ie-parca-blok > .parca-toggle:hover { background: #e6e6e6; }
.ie-parca-blok > .parca-toggle .chev { display: inline-block; transition: transform .15s; color: var(--muted); }
.ie-parca-blok.acik > .parca-toggle .chev { transform: rotate(90deg); }
.parca-fis-say { margin-left: auto; font-weight: 400; }
.ie-parca-blok > .parca-icerik { display: none; padding: 8px 12px 12px; }
.ie-parca-blok.acik > .parca-icerik { display: block; }
/* Üretim kökü altındaki çocuklar girintili (ağaç) */
.uretim-kok > .parca-icerik { padding-left: 18px; }
.uretim-kok > .parca-icerik > .ie-parca-blok { border-left: 3px solid #cdd9d9; }
/* İş emri penceresinde kalem ve süreç tabloları ALT ALTA */
.ie-urun-blok .urun-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ie-urun-blok .urun-cols > div + div { border-top: 1px solid var(--line); padding-top: 12px; }
.mini-num { width: 64px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px; font-size: var(--yazi-md); text-align: right; }
.ie-fis-aciklama { width: 100%; min-width: 120px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: var(--yazi-md); }
.ie-parca-blok { margin-bottom: 12px; }
.ie-parca-blok > h5 { margin: 0 0 6px; font-size: var(--yazi-md); color: var(--brand-dark); }

/* Ürün kartı: tip + parça + metod grupları */
.tip-secim { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: var(--yazi-md); font-weight: 700; }
.tip-secim select { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; font-weight: 700; }
.parca-kutu { background: #f3f3f3; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; }
.parca-kutu > h5 { margin: 0 0 8px; font-size: var(--yazi-md); }
.parca-form { display: flex; gap: 6px; margin-bottom: 8px; }
.parca-form input { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: var(--yazi-md); }
.parca-form input:first-child { flex: 1; }
.parca-list { list-style: none; margin: 0; padding: 0; }
.parca-list li { display: flex; align-items: center; justify-content: space-between; padding: 5px 2px; border-bottom: 1px solid var(--line); font-size: var(--yazi-md); }
.metod-grup { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; }
.metod-grup > h5 { margin: 0 0 8px; font-size: var(--yazi-md); color: var(--brand-dark); }

/* Sipariş oluşturma formu */
.siparis-panel { max-width: 760px; }
.siparis-form { display: flex; flex-direction: column; gap: 14px; }
.siparis-form .fld { display: flex; flex-direction: column; gap: 4px; font-size: var(--yazi-md); color: var(--muted); font-weight: 700; }
.siparis-form .fld select, .siparis-form .fld input { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; font-size: var(--yazi-lg); color: var(--ink); font-weight: 400; }
.fld-row { display: flex; gap: 14px; }
.fld-row .fld { flex: 1; }
.urun-bilgi { font-size: var(--yazi-md); margin-top: -6px; }
.siparis-form h4 { margin: 6px 0 0; font-size: var(--yazi-lg); }
.teslimat-tablo input { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: var(--yazi-md); }
.teslimat-toplam { font-size: var(--yazi-lg); }
.siparis-aksiyon { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.ted-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ted-form input { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; flex: 1 1 140px; }
.ted-metodlar { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--muted); font-size: var(--yazi-md); }
.chk { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }

/* Ürün penceresi */
.urun-head { background: #f3f3f3; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-size: var(--yazi-lg); }
/* İş emri künyesi: solda kimlik, sağda düzenlenebilir teslim tarihi.
   Tarih künyenin PARÇASI — ayrı bir panele koymak "bu emir ne zaman teslim"
   sorusunu bir tık uzağa iterdi. */
#isemriDuzenle .urun-head { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3); flex-wrap: wrap; }
/* Listede tarih salt okunur; geçmişse kırmızı — düzenleme iş emri sayfasında,
   ürün satırında (termin ürün bazlı) */
.ie-teslim-hucre.gecti { color: var(--red); font-weight: 700; }

/* Firma logosu kutusu — solda önizleme, sağda eylemler.
   Önizleme zemini KOYU: logo sol kenar çubuğunda koyu zemin üstünde duruyor;
   beyaz zeminde iyi görünen şeffaf bir PNG orada kaybolabilir. Kullanıcı
   yükledikten sonra gerçekte nasıl görüneceğini görsün. */
.firma-logo-kutu { display: flex; gap: var(--bosluk-4); align-items: center; padding: var(--bosluk-4); flex-wrap: wrap; }
/* Önizleme zemini SIDEBAR'IN zemini (`--chrome`) — elle yazılmış bir koyu ton
   değil. Logo gerçekte orada duruyor; önizleme oradaki hâlini göstermeli.
   Token kullanmak ayrıca ikisinin birlikte değişmesini sağlıyor. */
.flk-onizleme {
  flex: none; width: 220px; min-height: 92px; display: flex; align-items: center; justify-content: center;
  padding: var(--bosluk-3); border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--chrome);
}
/* Logo yüklenmemişse kutu boş kalır — ne olduğu yazsın ki "bozuk mu" denmesin */
.flk-onizleme:empty::after,
.flk-onizleme img[hidden] + .flk-bos { display: block; }
.flk-onizleme::after {
  content: "logo yok"; color: var(--chrome-muted); font-size: var(--yazi-xs);
  letter-spacing: .06em; text-transform: uppercase;
}
.flk-onizleme:has(img:not([hidden]))::after { content: none; }
.flk-onizleme img { max-width: 100%; max-height: 76px; object-fit: contain; }
.flk-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bosluk-2); min-width: 0; }
.flk-eylem p { flex-basis: 100%; margin: 0 0 var(--bosluk-2); font-size: var(--yazi-sm); }
.flk-eylem label.btn { cursor: pointer; }

/* Operasyon dökümü — sayfanın birincil eylemi, künyenin sağ ucunda.
   İki satırlı: ne yaptığı üstte, nereye gittiği altta. Tek satırlık soluk bir
   düğme olarak fark edilmiyordu. */
.ie-dokum-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: var(--radius); text-align: left;
}
.ie-dokum-btn .idb-ikon { font-size: var(--yazi-lg); line-height: 1; }
.ie-dokum-btn .idb-yazi { display: flex; flex-direction: column; line-height: 1.25; font-weight: 700; }
.ie-dokum-btn .idb-yazi small { font-weight: 400; font-size: var(--yazi-xs); opacity: .8; }
/* Ürün Düzenleme tam sayfası + manuel kimlik kartı */
.urun-duz-bar { margin-bottom: 12px; }
#urunDuzenle { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 18px 20px; }
/* ÜST KART PANEL İÇİNDE (P3 §2, K5). Üç sayfada da çıplak duruyordu:
   kart ile sayfanın geri kalanı arasında yalnız bir alt çizgi vardı ve
   kart sayfa zemininin üstünde yüzüyordu. Panel, kimliği aşağıdaki
   sekmelerden ayırıyor — ayrım artık bir çizgiye değil yüzeye dayanıyor. */
.urun-kimlik { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start;
  margin-bottom: 18px; padding: 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
@media (max-width: 720px) { .urun-kimlik { grid-template-columns: minmax(0, 1fr); } }
.uk-gorsel { display: flex; flex-direction: column; gap: 8px; }
.uk-gorsel img { width: 100%; height: 200px; object-fit: contain; background: #f3f3f3; border: 1px solid var(--line); border-radius: 4px; }
.uk-gorsel-bos { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; color: var(--muted); background: #f3f3f3; border: 1px dashed var(--line); border-radius: 4px; font-size: var(--yazi-md); }
/* ===== GÖRSEL EYLEMLERİ GÖRSELİN ÜSTÜNDE (KDE-0052, kullanıcı 2026-10-10)
   "Görseli Değiştir ve Görseli Kaldır da görselin üstünde — gelince
   düzenleme kalem sembolü, görselin sağ üstüne gelince çöp kutusu."

   İki metin düğmesi görselin altında yer kaplıyordu ve asıl eylem satırının
   (STEP/BOM) yerini işgal ediyordu. Artık ikisi de görselin üstünde ve
   yalnız imleç gelince beliriyor. */
.uk-gorsel { position: relative; display: flex; flex-direction: column; gap: 8px; }
.uk-gorsel-ikon {
  position: absolute; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; border-radius: 4px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--text); opacity: 0; transition: opacity .12s ease, background .12s ease;
}
/* Kalem SOL ÜSTTE, çöp kutusu SAĞ ÜSTTE (kullanıcının yerleşimi): yıkıcı
   olan köşede ve ötekinden uzakta — yanlış düğmeye basmak zorlaşıyor. */
.uk-gorsel-degis { top: 6px; left: 6px; }
.uk-gorsel-sil { top: 6px; right: 6px; color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
.uk-gorsel:hover .uk-gorsel-ikon,
.uk-gorsel-ikon:focus-visible { opacity: 1; }
.uk-gorsel-ikon:hover { background: var(--panel); }
/* GÖRSELSİZ ÜRÜNDE KALEM HEP GÖRÜNÜR: boş kutuda "üzerine gelince çıkan" bir
   düğme keşfedilemez — oraya hiç gelinmez. */
.uk-gorsel:not(.dolu) .uk-gorsel-degis { opacity: 1; }
/* KLAVYE: hover'a bağlı bir eylem yalnız fareyle erişilebilir olurdu. */
.uk-gorsel-ikon:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.uk-gorsel-info:empty { display: none; }
.uk-gorsel-info { font-size: var(--yazi-xs); }

/* GÖRSELİN ALTINDAKİ EYLEM SATIRI: solda EKLEME, sağda SİLME (kullanıcı).
   Yön bir söz veriyor — sol taraf veri getiriyor, sağ taraf götürüyor;
   düğmeyi okumadan önce ne yapacağı belli oluyor. */
/* SOL SÜTUN: görsel + eylem satırı tek ızgara ögesi (KDE-0055). Doğrudan
   `.urun-kimlik`in çocuğu olsalardı ızgara üç ögeye çıkar ve bilgi alanı alt
   satıra düşerdi — ölçülen kusur. */
.uk-sol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.uk-gorsel-alt { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bosluk-2); flex-wrap: wrap; }
.uka-sol, .uka-sag { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.uka-sag { justify-content: flex-end; }
.uka-sag:empty { display: none; }
.uk-gorsel-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uk-baslik { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.uk-no { font-size: var(--yazi-baslik); font-weight: 900; }
.uk-tanim { font-size: var(--yazi-lg); color: var(--muted); }
.uk-meta { color: var(--muted); font-size: var(--yazi-md); margin: 4px 0 12px; }
/* ===== KİMLİK FORMU İKİ SÜTUN (KDE-0062, kullanıcı 2026-10-10) =====
   "Görselin sağına alt alta olacak şekilde Tanım, Revizyon, Üretim Tipi,
   Müşteri, Üretim Durumu. Sağ tarafta 1 tane Not alanı."

   ÖNCEKİ HÂLİ: alanlar iki sütunlu bir ızgaraya soldan sağa akıyordu — Tanım
   ile Müşteri yan yana, Revizyon ile Üretim Durumu yan yana. Hangi alandan
   hangisine geçileceği her bakışta yeniden aranıyordu. Artık SOL sütun
   alanların kendi sırası, SAĞ sütun tek bir şey (Not ya da satın almada
   tedarikçi bilgisi).

   Yeni Ürün formu da `.uk-form` kullanıyor ve `.uk-alanlar` sarmalı YOK —
   onun etiketleri eskisi gibi ızgaraya akıyor, davranışı değişmedi. */
/* ÜST KART — P3 paketi (KDE-0075).

   ESKİSİ: `.uk-form` iki eşit kolondu (solda alanlar alt alta, sağda Not) ve
   `.uk-alanlar` tek sütunlu bir yığındı. Mamül'de altı alan alt alta inince
   kart uzuyor, sağdaki Not kutusunun yanında yarım ekran boş kalıyordu.

   YENİSİ: tek kolon; alanlar KENDİ İÇİNDE üç sütun, Not tam genişlik alt
   satır. Alan sırası DOM'dan geliyor — üç sütunlu ızgarada ilk üç alan
   kimlik satırını, sonraki üçü (Konum dâhil) bağlam satırını kuruyor. */
.uk-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.uk-alanlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 22px; min-width: 0; align-items: start; }
.uk-sag { min-width: 0; display: flex; flex-direction: column; }
/* `:not(.btn)` ŞART: aksiyon çubuğu kimlik kartının içine alınınca (2026-09-09)
   "BOM Excel Yükle" düğmesi de bir <label> ve bu kuralı yiyordu — ikon
   metnin ÜSTÜNE geçiyor, düğme iki satır oluyordu. Ölçüldü: flex-direction
   column. Etiket alanları sütun, düğmeler satır. */
.uk-form label:not(.btn) { display: flex; flex-direction: column; gap: 4px; font-size: var(--yazi-sm); font-weight: 700; color: var(--muted); }
/* DEĞER KOYU, ETİKET GRİ (KDE-0062). `color: inherit` yazıyordu ve girdi
   rengini ETİKETTEN alıyordu — etiket `var(--muted)`, yani kullanıcının
   yazdığı değer de gri çıkıyordu. Ölçüldü 2026-10-10 tarayıcıda:
   Düzenle kipinde rgb(71,75,77), Tanım kipinde rgb(53,53,53). İki kip yan
   yana konunca fark görünür hâle geldi; kullanıcının "metinler anlaşılır ve
   koyu renk olsun" isteği düzenleme tarafında da geçerli. */
/* İPUCU DEĞERDEN AYRILIYOR (P3 §6 K2). Satın Alma düzenlemesinde
   "ör. Sabit bilyalı rulman 17x40x12" ipucusu değerle aynı koyulukta
   duruyordu ve dolu alan sanılıyordu. Soluk + italik: ikisi birden,
   çünkü yalnız renk tek başına ekran parlaklığına göre kayboluyor. */
.uk-form input::placeholder, .uk-form textarea::placeholder { color: var(--faint); font-style: italic; opacity: .85; }
.uk-form input, .uk-form textarea { border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 9px; font-size: var(--yazi-lg); font-weight: 400; color: var(--ink); font-family: inherit; }
.uk-form .uk-aciklama { grid-column: 1 / -1; }
.uk-form textarea { resize: vertical; }
.uk-form select { border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 9px; font-size: var(--yazi-lg); font-weight: 400; color: var(--ink); font-family: inherit; background: var(--panel); }
.uk-kaydet { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
/* Dar ekranda Not alanların ALTINA iniyor. 560 px'den 860'a çekildi: iki
   sütun 560-860 arasında da sıkışıyordu — Not kutusu bir satıra iki kelime
   alıyordu. */
/* DAR EKRANDA TEK SÜTUN (P3 §8.3): 900 pxin altında üç sütun 120 pxe
   düşüyor ve etiketler iki satıra kırılıyordu. */
@media (max-width: 900px) { .uk-alanlar { grid-template-columns: minmax(0, 1fr); } }

/* Ürün Düzenleme: sayfanın tek kaydetme çubuğu (yapışkan).
   Şerit kabın dolgusunu örtmeli (yapışkanken altından içerik sızmasın), o yüzden
   negatif kenar boşluğuyla kenara taşıyor. Sabit -24px yazılıydı ama iki farklı
   kap var — `#urunDuzenle` 18/20px dolgulu, `#yariMamulDuzenle` dolgusuz — ve
   aynı değer ikisine uymuyordu: biri 4px, öteki 20px çıkıntı yapıyordu.
   Taşma payı artık kaba göre değişkenden geliyor. */
.urun-aksiyon {
  --tasma-x: 0px; --tasma-y: 0px;
  position: sticky; top: 52px; z-index: 9;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: calc(-1 * var(--tasma-y)) calc(-1 * var(--tasma-x)) 16px;
  padding: 10px var(--tasma-x);
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.urun-aksiyon.kirli { border-bottom-color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); }
.ua-bilgi { font-size: var(--yazi-sm); color: var(--muted); }
.urun-aksiyon.kirli .ua-bilgi { color: var(--brand-dark); font-weight: 700; }
/* KAYDET VE SİL SAĞDA (KDE-0052, kullanıcı: "Değişiklikleri Kaydet ve Ürün
   Sil butonlarını sağ tarafa alalım"). Çubukta yalnız kaydı BÜTÜNÜYLE
   etkileyen iki iş kaldı; dosya getiren işler görselin altına taşındı. */
.ua-butonlar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }

/* ÜRÜN DÜZENLEME'DE ÇUBUK ARTIK KİMLİK KARTININ İÇİNDE (kullanıcı kararı
   2026-09-09): Açıklama alanının hemen altında, `.uk-form` ızgarasının tam
   genişliğinde. Yapışkanlık ve kenara taşma payı burada anlamını yitirdi —
   ikisi de sayfanın en üstündeki şerit içindi.
   Yarı Mamül sayfası ESKİ yapışkan şeridi kullanmaya devam ediyor; yukarıdaki
   temel kural onun için duruyor. */
/* SEÇİCİ `#urunDuzenle`den `.uk-form`a çevrildi (kullanıcı bildirimi
   2026-09-09: "butonların neden arka planında beyazlık var"). Yarı Mamül
   sayfası da aynı düzene geçince oradaki çubuk kuralın dışında kaldı ve
   temel `.urun-aksiyon` kuralındaki beyaz zemin ile yapışkanlık orada
   duruyordu. Kural artık kimlik formunun İÇİNDEKİ her çubuğa uyuyor. */
/* KAYDET VE SİL GERÇEKTEN SAĞDA (KDE-0052'nin iddiası, ölçüldü 2026-10-10).

   `.ua-butonlar` içinde `justify-content: flex-end` yazılıydı ve KDE-0052
   testi o satırı görüp geçiyordu. Ama çubuğun KENDİSİ `space-between` ve
   içinde TEK çocuk var — tek çocuk space-between'de sola yapışıyor, içindeki
   hizalama hiçbir şeyi hareket ettirmiyor. Tarayıcıda ölçüldü: sağ boşluk
   534 px, sol boşluk 262 px, yani düğmeler soldaydı.
   Kuralın yazılı olması çizildiği anlamına gelmiyor. */
.uk-form .urun-aksiyon {
  position: static; grid-column: 1 / -1; justify-content: flex-end;
  margin: 6px 0 0; padding: 0; border-bottom: 0; background: none;
}
/* Kaydedilmemiş değişikliğin tek işareti: Kaydet düğmesinin çevresindeki
   halka. Yanındaki "Kaydedilmemiş değişiklik var" yazısı kaldırıldı. */
.uk-form .urun-aksiyon.kirli { box-shadow: none; }
.uk-form .urun-aksiyon.kirli .btn.primary { box-shadow: 0 0 0 2px var(--brand-dark); }

/* Aktif / Pasif ürün */
.urun-pasif {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: #f2f2f2; color: var(--muted); font-size: var(--yazi-xs); font-weight: 700; letter-spacing: .02em;
}
/* İptal pasiften daha güçlü işaretleniyor: pasif geçici bir hâl (plan geri
   gelirse kendiliğinden aktife döner), iptal ise verilmiş bir karar. */
.urun-iptal {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border: 1px solid var(--red-line); border-radius: 999px;
  background: var(--red-bg); color: var(--red); font-size: var(--yazi-xs); font-weight: 700; letter-spacing: .02em;
}
tr.urun-pasif-satir > td { opacity: .62; }
tr.urun-pasif-satir:hover > td { opacity: 1; }
.uk-durum-not { grid-column: 1 / -1; font-size: var(--yazi-xs); margin-top: -4px; }
.ml-islem { width: 44px; text-align: right; }
/* Bu düğme de hover'da açılıyordu; `.satir-eylem` ile aynı karara tabi —
   dokunmatikte hiç görünmüyordu, çünkü hover yok. Silme confirm'le korunuyor. */
/* Üst: yatay (sevkiyat kalemleri | iş emri oluştur) */
.urun-ust { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; margin-bottom: 16px; }
@media (max-width: 820px) { .urun-ust { grid-template-columns: minmax(0, 1fr); } }
.us-kalemler h4, .us-isemri h4 { margin: 0 0 8px; font-size: var(--yazi-lg); }
.us-isemri { background: #f3f3f3; border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; }
.us-isemri-not { font-size: var(--yazi-sm); margin: 0 0 10px; }
.us-isemri .ie-olustur { flex-direction: column; align-items: stretch; gap: 8px; }
.us-isemri .ie-olustur input { width: 100%; }
/* Alt: tam genişlik metod tablosu.

   ÜST AYRAÇ KALDIRILDI (kullanıcı bildirimi 2026-09-23: "arada bir çizgi
   var, görsel kusur"). Ayraç, bölümlerin çerçevesiz düz kutular olduğu
   zamandan kalmaydı. Bölümler çekmeceye dönünce her biri kendi çerçevesini
   taşımaya başladı ve çizgi bir ayraç değil, çerçevenin hemen üstünde
   duran ikinci bir çizgi hâline geldi.

   SINIF: kendi çerçevesi olan bir kutunun üstündeki ayraç çizgisi. Denetim
   artık bunu `cift-ayrac` olarak arıyor. */
.urun-alt { padding-top: 14px; }
.urun-cols { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 820px) { .urun-cols { grid-template-columns: minmax(0, 1fr); } }
.urun-cols h4 { margin: 0 0 8px; font-size: var(--yazi-lg); }
.fis-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fis-form select, .fis-form input { border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font-size: var(--yazi-md); }
.fis-durum { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: var(--yazi-xs); font-weight: 700; }
.fis-durum.fd-bekle { background: #fef3c7; color: var(--amber-ink); }
.fis-durum.fd-devam { background: #d9d9d9; color: #1e40af; }
.fis-durum.fd-tamam { background: #dcfce7; color: #166534; }
.tamam-chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--yazi-md); cursor: pointer; white-space: nowrap; }
.tamam-chk input { cursor: pointer; }

/* Paneller / tablolar */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px; margin-bottom: 20px; }
.panel h2 { margin: 0 0 12px; font-size: var(--yazi-lg); }
.panel h2 small { color: var(--muted); font-weight: 400; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
/* SATIR ÇİZGİSİ BELİRGİN (Selim 2026-09-10, KD-0040): hairline gözle seçilmiyordu */
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
th { font-size: var(--yazi-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; border-bottom: 1.5px solid var(--line-strong); }
td.num, th.num { text-align: right; }
tbody tr:hover { background: #f3f3f3; }
.gecikti td { background: #fef2f2; }

/* Durum rozet/seçim */
.durum-sel { border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: var(--yazi-md); background: #fff; }
.badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius); font-size: var(--yazi-xs); font-weight: 700; }
.badge.d-bekle { color: var(--muted); background: var(--panel-2); border-color: var(--line-strong); }
.badge.d-uretimde { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); }
.badge.d-sevk { color: var(--green); background: var(--green-bg); border-color: var(--green-line); }

/* Araç çubuğu */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar input[type="search"], .toolbar select, .toolbar input[type="date"] {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; font-size: var(--yazi-lg); background: #fff;
}
.toolbar input[type="search"] { min-width: 240px; }
.toolbar label { color: var(--muted); font-size: var(--yazi-md); display: flex; gap: 6px; align-items: center; }
.spacer { flex: 1; }
.upload-btn {
  background: var(--brand); color: #fff; padding: 9px 16px; border-radius: var(--radius);
  cursor: pointer; font-weight: 700; font-size: var(--yazi-lg);
}
.upload-btn:hover { background: var(--brand-dark); }
.upload-info { margin-bottom: 12px; font-size: var(--yazi-md); }
.upload-info.ok { color: var(--green); } .upload-info.err { color: var(--red); }
.bos { text-align: center; color: var(--muted); padding: 40px; }

/* Proses alt-satır */
.expander { cursor: pointer; color: var(--muted); user-select: none; width: 24px; text-align: center; }
.proses-row > td { background: #f3f3f3; padding: 0; }
.proses-box { padding: 12px 16px 16px; }
.proses-box h4 { margin: 0 0 8px; font-size: var(--yazi-md); }
.proses-table th, .proses-table td { padding: 6px 8px; }
.proses-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.proses-form input { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: var(--yazi-md); }
.btn { border: 1px solid var(--line-strong); background: #fff; color: var(--ink); border-radius: var(--radius); padding: 6px 12px; cursor: pointer; font-size: var(--yazi-md); font-weight: 700; }
.btn:hover { background: #f4f4f2; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.sm { padding: 3px 9px; font-size: var(--yazi-sm); }
.btn.del { background: #fff; border-color: #e0b3b3; color: var(--red); }
.btn.del:hover { background: #fbecec; }
.btn.ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { background: #f4f4f2; }
/* İKİNCİL DOLU BUTON — Yale Blue. Tasarım şartnamesinde `--brand-dark` zaten
   "ikincil dolu buton" olarak tanımlıydı ve markup 10 yerde `btn ikincil`
   yazıyordu, ama KURALIN KENDİSİ hiç yazılmamıştı: o düğmelerin hepsi sade
   beyaz `.btn` gibi görünüyordu. Sınıf sessizce hiçbir şey yapmıyordu.
   Kullanımı: birincil eylemin yanındaki ikinci eylem — "İndir" teal ise
   "Yükle" mavi; ikisi de dolu, ikisi de eşit ağırlıkta ama ayırt edilir. */
.btn.ikincil { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn.ikincil:hover { background: #1e3a4d; border-color: #1e3a4d; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(60,110,113,.22); }



/* ===== ZENGİN NOT (KDE-0062) =====
   Araç çubuğu YALNIZ ODAKTAYKEN görünüyor (kullanıcı: "tıkladığımızda yazı
   tipi düzenlemesi özelliği olsun"). Hep görünse, notu yalnız okuyan kişiye
   beş düğme gösterirdi. */
.zn { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zn-etiket { font-size: var(--yazi-sm); font-weight: 700; color: var(--muted); }
.zn-arac {
  display: none; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0; background: var(--bg);
}
.zn.zn-acik .zn-arac { display: flex; }
.zn-dugme {
  min-width: 28px; height: 26px; padding: 0 6px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; color: var(--ink); font: inherit; font-size: var(--yazi-md);
  line-height: 1; cursor: pointer;
}
.zn-dugme:hover { background: var(--panel); border-color: var(--line); }
/* Basılı hâl: imleç kalın metnin içindeyken B düğmesi de basılı görünüyor. */
.zn-dugme.acik { background: var(--panel); border-color: var(--line-strong); font-weight: 700; }
.zn-dugme:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.zn-im-kalin { font-weight: 900; }
.zn-im-italik { font-style: italic; font-family: Georgia, serif; }
.zn-im-alti { text-decoration: underline; }
.zn-govde {
  min-height: 112px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--yazi-lg); line-height: 1.5; color: var(--ink);
  overflow-wrap: anywhere;
}
/* Açıkken gövde çubuğa yapışıyor — ikisi tek kutu gibi okunsun. */
.zn.zn-acik .zn-govde { border-radius: 0 0 var(--radius) var(--radius); }
.zn-govde:focus { outline: none; border-color: var(--brand); }
.zn-govde > :first-child { margin-top: 0; }
.zn-govde > :last-child { margin-bottom: 0; }
.zn-govde ul, .zn-govde ol { margin: 4px 0; padding-left: 22px; }
.zn-govde li { margin: 2px 0; }
/* SALT OKUNUR (Tanım sayfası): kutu çerçevesi "buraya yazabilirsin" diyor,
   oysa yazılamıyor. Değer düz yazı gibi duruyor. */
.zn-salt .zn-govde {
  border-color: transparent; padding: 0; min-height: 1.5em; background: none;
}

/* ===== SATIN ALMA BİLGİSİ KARTIN SAĞ SÜTUNUNDA (KDE-0066) =====
   Aynı çizici (`satinAlmaEditor`) iki yerde kullanılıyordu: Ürün Düzenleme
   sayfasındaki sarı kutu ve bu sütun. Sarı kart görünümü çekmecenin içinde
   anlamlıydı — orada bir BÖLÜM'dü. Burada kimlik formunun bir sütunu, yani
   Not alanının durduğu yer; kutu çerçevesi onu formun dışında bir şey gibi
   gösterirdi. Alanlar alt alta, kullanıcının saydığı sırada. */
.uk-sag .satin-alma-kart { margin: 0; padding: 0; background: none; border: 0; }
.uk-sag .sak-baslik { color: var(--muted); font-weight: 700; }
.uk-sag .sak-baslik i { display: none; }
.uk-sag .sak-alanlar { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.uk-sag .sak-alanlar label { color: var(--muted); }
.uk-sag .sak-alanlar input, .uk-sag .sak-alanlar select {
  width: 100%; padding: 7px 9px; border-radius: var(--radius); font-size: var(--yazi-lg);
}


/* KONUM SATIRI (KDE-0066) — yalnız Tanım sayfasında, salt okunur.
   Etiket/değer ritmi yanındaki alanlarla AYNI: etiket küçük ve gri, değer
   altında ve koyu. Ayrı bir görünüm verseydim göz onu formun parçası
   saymazdı; aynı sütunda duran bilgi aynı ritimde okunmalı. */
.uk-konum { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.uk-konum-etiket { font-size: var(--yazi-sm); font-weight: 700; color: var(--muted); }
.uk-konum-deger { font-size: var(--yazi-lg); color: var(--ink); font-weight: 500; }
.uk-konum-deger.muted { color: var(--muted); font-weight: 400; }

/* ALT BİLEŞEN TABLOSU (P3 §5, KDE-0075 → KDE-0078).

   KENDİ SÜTUN SINIFLARI KALKTI. Bu blok `ab-kademe` / `ab-gorsel` / `ab-kod`
   / `ab-tanim` için yazılmıştı; tablo İş Emri'nin kademeli BOM sınıflarına
   geçti (`bom-kod`, `bom-gorsel`, `bom-no`, `bom-ad`) ve o dördünü basan yer
   kalmadı. Kuralları burada tutmak, ikinci bir sütun ailesi tanımlamak
   olurdu — "iş emrindeki kademeli BOM gibi" kararının tersi.

   `text-align: center` KURALI DA KALKTI: `.table-wrap td` aynı şeyi zaten
   yapıyor. Fazlası zararlıydı — `uygulama/` katmanında olduğu için
   `bilesen/`deki sütun kurallarıyla çakışıyor ve hangisinin kazandığı
   özgüllüğe kalıyordu. Tam bu çakışma `.bom-kod`un sola yaslamasını
   yıllardır yutmuş bir kusurun kardeşi.

   BAĞLANTI RENGİ TAŞINDI, SİLİNMEDİ: `.ab-kod a` kuralı parça no
   bağlantısını renklendiriyordu; sınıf `bom-no` olunca bağlantı sessizce
   düz mavi tarayıcı rengine dönmüştü. Kural `bilesen/03`e, `.bom-no`nun
   yanına geçti — İş Emri'ndeki ürün no bağlantısı da aynı rengi alıyor. */
.alt-bilesen-tablo { width: 100%; }
/* Döngüye giren dal: veri bozuk değil, aynı parça kendi altında geçiyor —
   satır duruyor ama dikkat çekmiyor. İş emri BOM'undaki `.sonuk` ile aynı. */
.alt-bilesen-tablo .ab-satir.sonuk { opacity: .45; }
/* Başlık ekran okuyucu için; görsel sütununda yazı yer kaplamasın. */
.alt-bilesen-tablo .gorsel-basligi {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}