/* ===== Hammadde ağacı — ⓪ kategori → ① malzeme → ② biçim → ③ tip → ④ ölçü ==
   Düz tablo aynı malzemenin farklı kalınlıklarını ve aynı kalınlığın farklı
   plakalarını yan yana diziyordu; hangisinin neyin altında olduğu ancak satır
   satır okunarak anlaşılıyordu. Girinti hiyerarşiyi taşıyor.

   ⓪ KATEGORİ ÇEKMECESİ 2026-10-07 (kullanıcı kararı): 27 malzeme kalitesi
   yedi kategoriye dağılıyor ve hepsi tek düzeyde yan yanaydı. Çekmece ev
   standardı `ud-cekmece` üzerine kuruldu — yeni açılır-kapanır kalıp
   uydurulmadı (şartname §4.4). Sarf Malzeme sekmesinde kategori kabuğu
   çizilmiyor: sarfın malzeme kalitesi yok, kategoriye bağlanamıyor. */
.hm-agac { display: flex; flex-direction: column; gap: var(--bosluk-4); }
.hm-kategori > summary { display: flex; align-items: center; gap: var(--bosluk-2); }
/* Ad büyümeyi üstlenir, sayaç sağa yaslanır — başlık uzayınca sayı kaymaz. */
.hm-k-ad { flex: 1; font-weight: 700; }
.hm-k-govde { display: flex; flex-direction: column; gap: var(--bosluk-3); padding-top: var(--bosluk-2); }
.hm-malzeme { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hm-m-bas {
  padding: 10px var(--bosluk-3); background: var(--yuzey-2);
  border-bottom: 1px solid var(--line); font-size: var(--yazi-md);
}
.hm-bicim { padding: 0 0 0 var(--bosluk-3); }
.hm-b-bas {
  padding: 8px 0 6px; font-size: var(--yazi-sm); font-weight: 700; color: var(--ink-2);
  letter-spacing: .02em;
}
.hm-tip { border-top: 1px solid var(--line); }
.hm-tip:first-of-type { border-top: 0; }
.hm-tip-bas {
  display: grid; align-items: center; gap: 12px; padding: 9px var(--bosluk-3) 9px 0;
  /* Hücre sayısı her satırda SABİT: ad · ölçü sayısı · adet · doğal · tedarikçi · eylem.
     Koşullu bir eleman (ok, "kalan" etiketi) grid item olarak eklendiğinde
     bütün sütunlar kayıyordu — ölçüldü. Koşullu içerik kendi hücresinin
     İÇİNDE duruyor. */
  grid-template-columns: minmax(240px, 1.4fr) 92px 118px 112px minmax(80px, 1fr) 232px;
  cursor: pointer; list-style: none;
}
.hm-tip-bas::-webkit-details-marker { display: none; }
.hm-tip-bas:hover { background: var(--yuzey-2); }
.hm-t-ad { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.hm-t-ad > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-ok::before { content: '▸'; color: var(--ink-3); }
.hm-tip[open] .hm-ok::before { content: '▾'; }
.hm-t-say { font-size: var(--yazi-sm); white-space: nowrap; }
.hm-t-ted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-t-stok, .hm-t-dogal, .hm-t-kg { text-align: right; font-variant-numeric: tabular-nums; }
/* Düğmeler EŞİT genişlikte: farklı uzunluktaki etiketler satırdan satıra
   farklı genişlikte düğme üretiyordu ve sıra düzensiz görünüyordu. */
.hm-t-eylem, .hm-o-eylem { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.hm-t-eylem .btn, .hm-o-eylem .btn { min-width: 68px; justify-content: center; }
.hm-t-eylem .btn.del, .hm-o-eylem .btn.del { min-width: 44px; }
.hm-t-say a { color: var(--brand); text-decoration: none; }
.hm-t-say a:hover { text-decoration: underline; }

/* ④ ölçüler — kalan parça da burada, ayrı bir liste değil */
/* Girinti satırın DIŞINDA değil ilk hücrenin İÇİNDE: dış boşluk verilince
   bütün ızgara kayıyor ve ölçü sütunları tip sütunlarıyla tutmuyordu. */
.hm-olculer { padding: 0 var(--bosluk-3) 8px 0; }
.hm-olcu > .hm-o-ad { padding-left: 18px; }
.hm-olcu {
  display: grid; align-items: center; gap: 12px; padding: 6px 0;
  /* Tip başlığıyla AYNI ızgara — sütunlar birbirini tutsun */
  grid-template-columns: minmax(240px, 1.4fr) 92px 118px 112px minmax(80px, 1fr) 232px;
  border-top: 1px dashed var(--line);
}
.hm-olcu.kalan { background: var(--amber-bg); }
.hm-o-ad { display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.hm-o-adet, .hm-o-dogal, .hm-o-kg { text-align: right; font-variant-numeric: tabular-nums; }
.hm-o-yer { display: block; }
.hm-yer-et {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: var(--yazi-xs); font-weight: 700; color: var(--muted); cursor: help;
}
/* Hover'a saklanmıyor: raf ataması ekranda görünmezse kimse aramaz. Soluk
   duruyor, satırın üstüne gelince belirginleşiyor. */
.hm-yer-ata { opacity: .45; transition: opacity .12s; }
.hm-olcu:hover .hm-yer-ata { opacity: 1; }

.hm-olcu-bos { padding: 8px 0; color: var(--ink-3); font-size: var(--yazi-sm); }
.hm-kalan-et {
  font-size: var(--yazi-xs); color: var(--amber); background: var(--amber-bg);
  border: 1px solid var(--amber-line); border-radius: 999px; padding: 0 6px; white-space: nowrap;
}
/* Kesim penceresinin canlı özeti — "Kes" demeden önce ne gideceği görünsün */
.hm-kes-ozet {
  margin: 10px 0 0; padding: 10px var(--bosluk-3); border-radius: var(--radius);
  background: var(--yuzey-2); font-size: var(--yazi-sm);
}

@media (max-width: 900px) {
  .hm-tip-bas, .hm-olcu { grid-template-columns: 1fr auto; row-gap: 4px; }
  .hm-t-say, .hm-t-dogal, .hm-t-ted, .hm-o-dogal, .hm-o-kg { display: none; }
}

/* Malzeme kaliteleri — yoğunluk ve tedarikçi bazlı kg fiyatı */
.mk-fiyatlar { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-fiyat {
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
  font-size: var(--yazi-sm); white-space: nowrap;
}
.mk-gecmis { margin-left: 4px; color: var(--ink-3); cursor: help; }

/* Ürün bağı — malzeme seçimi ①②③ seviyesinde, ölçü sorulmuyor.
   Kademeler yan yana sütun: biçim → malzeme → ebat → miktar. Soldan sağa
   okunuyor ve her sütun bir öncekinin sonucunu gösteriyor. */
.hmb-ekle { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.hmb-alan {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--yazi-xs); font-weight: 700; color: var(--muted);
}
/* Başlık satırı sabit yükseklikte: uzun bir başlık iki satıra sarınca kendi
   sütununun girdilerini aşağı itiyordu — açınım kutuları diğerlerinden 23px
   aşağıda duruyordu. Yükseklik başlıkta, kaymanın kaynağında sabitleniyor. */
.hmb-alan-bas { display: block; min-height: 16px; line-height: 16px; }
.hmb-bicim-alan select { min-width: 150px; }
.hmb-cins-alan, .hmb-tip-alan { flex: 0 1 auto; }
.hmb-tip-alan[hidden] { display: none; }
.hmb-liste {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 130px; max-height: 168px; overflow-y: auto;
  padding: 4px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
}
/* Liste öğeleri düğme: klavyeyle gezilebilsin ve seçili olan görünsün.
   `.btn` sınıfı bilerek yok — bunlar eylem değil seçenek. */
.hmb-og {
  padding: 5px 9px; border: 1px solid transparent; border-radius: var(--radius);
  background: none; font: inherit; font-size: var(--yazi-sm); font-weight: 400;
  color: var(--ink); text-align: left; white-space: nowrap; cursor: pointer;
}
.hmb-og:hover { background: var(--hover); }
.hmb-og.secili { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 700; }
.hmb-og-bos { padding: 5px 9px; font-size: var(--yazi-sm); }
.hmb-mik-satir { display: flex; gap: 6px; align-items: center; }
.hmb-mik-alan input { width: 110px; }
.hmb-ac-alan input { width: 92px; }
.hmb-mik-alan[hidden], .hmb-ac-alan[hidden] { display: none; }
.hmb-ac-sonuc { font-size: var(--yazi-sm); font-weight: 400; font-variant-numeric: tabular-nums; }
/* Düğmeler kendi satırında, solda: kademelerin altında bir eylem satırı —
   sütunların arasına sıkışmış bir düğme, sütun genişliklerini de bozuyordu. */
.hmb-dugmeler { display: flex; gap: 8px; flex-basis: 100%; margin-top: 4px; }
.hmb-birim { font-size: var(--yazi-sm); font-weight: 400; min-width: 56px; }
/* Planlanan maliyet — üç kalem ayrı, eksikler üstte ve toplam damgalı */
.mly-uyari {
  margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--amber); border-radius: var(--radius);
  background: #fffbeb; font-size: var(--yazi-sm);
}
.mly-eksik-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mly-eksik-liste span {
  padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.7);
  border: 1px solid var(--line); font-size: var(--yazi-xs);
}
.mly-kalemler { display: flex; flex-direction: column; gap: 4px; }
.mly-kalem { display: grid; grid-template-columns: 130px 110px 1fr 46px; gap: 10px; align-items: center; font-size: var(--yazi-sm); }
.mly-et { font-weight: 700; }
.mly-tutar { text-align: right; font-variant-numeric: tabular-nums; }
.mly-cubuk { height: 8px; border-radius: 2px; background: var(--line); overflow: hidden; }
.mly-cubuk i { display: block; height: 100%; background: var(--brand); }
.mly-kalem.iscilik .mly-cubuk i { background: var(--blue, #284b63); }
.mly-kalem.dis .mly-cubuk i { background: var(--amber); }
.mly-kalem.bilesen .mly-cubuk i { background: #8a8f98; }
.mly-pay { text-align: right; font-size: var(--yazi-xs); font-variant-numeric: tabular-nums; }
.mly-toplam {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 8px; border-top: 1.5px solid var(--line-strong);
  font-size: var(--yazi-lg);
}
.mly-toplam b { font-variant-numeric: tabular-nums; }
.mly-yok { color: var(--amber); font-size: var(--yazi-xs); font-weight: 700; }
.mly-detay { margin-top: 10px; font-size: var(--yazi-sm); }
.mly-detay summary { cursor: pointer; color: var(--muted); }
.mly-tablo { width: 100%; border-collapse: collapse; font-size: var(--yazi-sm); margin-top: 8px; }
.mly-tablo th { padding: 5px 8px; border-bottom: 1.5px solid var(--line-strong); font-size: var(--yazi-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: left; }
.mly-tablo th.num, .mly-tablo td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mly-tablo td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.mly-tablo tr.mly-eksik { background: #fffbeb; }

.ie-panel-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ie-panel-bas h5 { margin: 0; }
.zk-ozet { display: flex; gap: 24px; margin: 10px 0; }
.zk-ozet span { display: flex; flex-direction: column; }
.zk-ozet b { font-size: var(--yazi-lg); font-variant-numeric: tabular-nums; }
.zk-ozet small { font-size: var(--yazi-xs); color: var(--muted); }
.zk-sapma.asim b { color: var(--red); }
.zk-sapma.altinda b { color: var(--blue, #284b63); }
.zk-sapma.uygun b { color: var(--brand); }
.zk-tablo { width: 100%; border-collapse: collapse; font-size: var(--yazi-sm); }
.zk-tablo th { padding: 5px 8px; border-bottom: 1.5px solid var(--line-strong); font-size: var(--yazi-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: left; }
.zk-tablo th.num, .zk-tablo td.num { text-align: right; font-variant-numeric: tabular-nums; }
.zk-tablo td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
/* Ters kayıt (düzeltme) ayrı okunmalı — silinmiş bir şey değil, eklenmiş bir düzeltme */
.zk-tablo tr.zk-ters { background: #fffbeb; }
.zk-tablo tr.zk-ters td:first-child::before { content: '↩ '; color: var(--amber); }

/* Bakım rozeti — makine satırında, o tezgahın en acil bakımı */
.bkm-r {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: var(--yazi-xs); font-weight: 700; cursor: help;
}
.bkm-r.gecikti { background: var(--red-bg); color: var(--red); }
.bkm-r.yaklasti { background: var(--amber-bg); color: var(--amber); }
.bkm-r.zamani-var { background: var(--brand-soft); color: var(--brand); }
.bkm-r.belirsiz { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
#bkmTablo tr.bkm-gecikti td:first-child { box-shadow: inset 3px 0 0 var(--red); }
#bkmTablo tr.bkm-yaklasti td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
#bkmTablo tr.bkm-belirsiz { opacity: .7; }

.mkn-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.mkn-op {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: var(--yazi-xs); font-weight: 700;
}
.badge.mkn-aktif { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.badge.mkn-arizali { color: var(--red); background: var(--red-bg); border-color: var(--red-line); }
.badge.mkn-bakimda { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); }
.mkf-op { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.mkf-op-bas { display: block; margin-bottom: 8px; font-size: var(--yazi-sm); font-weight: 700; }
.mkf-op-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; max-height: 220px; overflow-y: auto; }
.mkf-op-liste label { display: flex; align-items: center; gap: 6px; font-size: var(--yazi-sm); cursor: pointer; }

.mly-kar {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.mly-kar.zarar { border-top-color: var(--red); }
.mly-fiyat-et { display: flex; flex-direction: column; gap: 3px; font-size: var(--yazi-xs); font-weight: 700; color: var(--muted); }
.mly-fiyat { width: 140px; }
.mly-kar-sonuc { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.mly-kar-sonuc b { font-size: var(--yazi-lg); font-variant-numeric: tabular-nums; }
.mly-kar-sonuc small { font-size: var(--yazi-xs); color: var(--muted); }
.mly-kar-tutar { color: var(--brand); }
.mly-zarar { color: var(--red); }
.mly-kar-bos { font-size: var(--yazi-sm); align-self: center; }

/* Tedarikçi özeti — satır tıklanınca alttaki listeler o tedarikçiye süzülür */
.td-ozet-kap { margin-bottom: 14px; }
.td-ozet-bas { margin-bottom: 8px; font-size: var(--yazi-md); font-weight: 700; }
.td-ozet-bas small { font-weight: 400; }
#tdOzet tbody tr { cursor: pointer; }
#tdOzet tbody tr:hover { background: var(--hover); }
#tdOzet tr.td-geciken td:first-child { box-shadow: inset 3px 0 0 var(--red); }
#tdOzet tr.td-atanmamis { opacity: .7; }