/* ==========================================================================
   Depologi — uygulama kabuğu (giriş sonrası)
   Masaüstü: sabit yan menü. Tablet/mobil: çekmece + alt güvenli alan.
   ========================================================================== */

.kabuk { display: flex; min-height: 100dvh; }

/* ================================================================ YAN MENÜ */

.yan {
  width: var(--yan-genislik);
  flex-shrink: 0;
  /* MAUI Primary → PrimaryDark. Önceki neredeyse siyah lacivert yerine
     markanın kendi mavisi kullanılır. */
  background: linear-gradient(170deg, var(--marka-600) 0%, var(--marka-800) 55%, var(--marka-900) 100%);
  color: rgba(255,255,255,.92);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
  z-index: 40;
}

.yan-baslik {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.yan-baslik .marka-logo-kutu { width: 38px; height: 38px; border-radius: 11px; }
.yan-baslik .marka-logo-kutu svg { width: 21px; height: 21px; }
.yan-baslik-ad { font-size: 17px; font-weight: 700; }
.yan-baslik-alt { font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; }

.yan-govde { flex: 1; overflow-y: auto; padding: 12px 10px 20px; }

.yan-grup-ad {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  padding: 16px 10px 7px;
}
/* Grup rengini koyu zeminde okunur kılmak için beyazla karıştırılır */
.yan-grup-ad::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--grup-renk, #fff) 70%, white);
  flex-shrink: 0;
}

.yan-bag {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px;
  border-radius: 10px;
  color: rgba(255,255,255,.78);
  font-size: 14.5px;
  min-height: 44px;
  transition: background var(--gecis), color var(--gecis);
  cursor: pointer;
}
.yan-bag:hover { background: rgba(255,255,255,.10); color: #fff; }
.yan-bag.etkin {
  background: rgba(255,255,255,.16);
  color: #fff;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--grup-renk, var(--vurgu-400)) 65%, white);
}
.yan-bag svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; }
.yan-bag.etkin svg { opacity: 1; }

.yan-alt { padding: 12px; border-top: 1px solid rgba(255,255,255,.09); }

.yan-kullanici {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 11px;
  background: rgba(255,255,255,.06);
}
.avatar {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--vurgu-400), var(--vurgu-600));
  color: #fff; font-weight: 700; font-size: 14px;
}
.yan-kullanici-ad { font-size: 14px; font-weight: 600; color: #fff; }
.yan-kullanici-alt { font-size: 11.5px; color: rgba(255,255,255,.5); }
.yan-kullanici-bilgi { min-width: 0; flex: 1; }
.yan-kullanici-bilgi > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.yan-cikis {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border: none; background: transparent; color: rgba(255,255,255,.6);
  border-radius: 9px; cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.yan-cikis:hover { background: rgba(220,38,38,.22); color: #fff; }
.yan-cikis svg { width: 17px; height: 17px; }

/* =================================================================== İÇERİK */

.icerik { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ust-serit {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px;
  background: var(--yuzey);
  border-bottom: 1px solid var(--kenar);
  position: sticky; top: 0; z-index: 30;
  min-height: 62px;
}
.ust-serit h1 { font-size: 19px; }
.ust-serit-bosluk { flex: 1; }

.menu-dugmesi {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--kenar); background: var(--yuzey-2);
  border-radius: 10px; cursor: pointer; color: var(--metin);
  place-items: center;
}
.menu-dugmesi svg { width: 20px; height: 20px; }

.cevrimici-rozet {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(76,175,80,.12); color: var(--basari);
  border: 1px solid rgba(76,175,80,.26);
}
.cevrimici-rozet.kapali { background: rgba(255,152,0,.12); color: var(--uyari); border-color: rgba(255,152,0,.28); }
.nokta { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.sayfa { padding: 22px; flex: 1; }
.sayfa-genis { max-width: 1180px; }

/* ============================================================== MENÜ KARTLAR */

.grup-baslik {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--metin-2); margin: 26px 0 12px;
}
.grup-baslik:first-child { margin-top: 0; }

/* Grup rengini taşıyan küçük şerit */
.grup-baslik::before {
  content: ""; width: 4px; height: 15px; border-radius: 3px;
  background: var(--grup-renk, var(--vurgu-500));
  flex-shrink: 0;
}

.kart-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 13px;
}

.menu-kart {
  display: flex; align-items: center; gap: 13px;
  padding: 16px;
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--r-lg);
  box-shadow: var(--golge-1);
  cursor: pointer;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
  min-height: 76px;
  color: var(--metin);
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.menu-kart:hover {
  transform: translateY(-2px);
  box-shadow: var(--golge-2);
  border-color: var(--grup-renk, var(--vurgu-500));
}
.menu-kart:active { transform: translateY(0); }

/* Kartın sol kenarında grup rengi şeridi */
.menu-kart::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grup-renk, var(--vurgu-500));
  opacity: .85;
}
.menu-kart { position: relative; padding-left: 18px; }

.menu-kart-ikon {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--grup-renk, var(--vurgu-500)) 14%, transparent);
  color: var(--grup-renk, var(--vurgu-600));
}
.menu-kart-ikon svg { width: 21px; height: 21px; }
.menu-kart-ad { font-weight: 600; font-size: 15px; }
.menu-kart-alt { font-size: 12.5px; color: var(--metin-3); }

/* ------------------------------------------------------------ GRUP RENKLERİ
   Hem ana menü kartları hem yan menü başlıkları aynı değişkeni kullanır. */
[data-grup="MAL_KABUL"]     { --grup-renk: var(--grup-malkabul); }
[data-grup="SEVKIYAT"]      { --grup-renk: var(--grup-sevkiyat); }
[data-grup="DEPOLAR_ARASI"] { --grup-renk: var(--grup-depolar); }
[data-grup="DINAMIK_DEPO"]  { --grup-renk: var(--grup-dinamik); }
[data-grup="SAYIM"]         { --grup-renk: var(--grup-sayim); }
[data-grup="SIPARIS"]       { --grup-renk: var(--grup-siparis); }
[data-grup="URETIM"]        { --grup-renk: var(--grup-uretim); }
/* ⚠️ Geçen turda RAPOR menülerini ve başlığını ekleyip BU SATIRI ve renk
   değişkenini atlamıştım; rapor menüleri grup rengi olmadan çiziliyordu.
   Yeni menü grubu eklemenin DÖRT adımı var: DB satırı, GrupBasligi
   switch'i, bu seçici, ve app.css'teki renk değişkeni. */
[data-grup="RAPOR"]         { --grup-renk: var(--grup-rapor); }
[data-grup="HAL"]           { --grup-renk: var(--grup-hal); }
[data-grup="ETIKET"]        { --grup-renk: var(--grup-etiket); }
[data-grup="STOK"]          { --grup-renk: var(--grup-stok); }
[data-grup="YONETIM"]       { --grup-renk: var(--grup-yonetim); }
[data-grup="AI"]            { --grup-renk: var(--grup-ai); }

/* ==================================================================== KART */

.kart {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--r-lg);
  box-shadow: var(--golge-1);
  overflow: hidden;
}
.kart-basi {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--kenar);
  background: var(--yuzey-2);
}
.kart-basi h2 { font-size: 16px; }
.kart-govde { padding: 18px; }

/* =================================================================== TABLO */

.tablo-sarmal { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* .editor-tablo genişliği yalnız .satir-editor altında tanımlıydı; başka
   bağlamlarda (kiplik içindeki rehberler) tablo daralıp sola sıkışıyordu. */
.tablo-sarmal > .editor-tablo { width: 100%; }

table.tablo { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
table.tablo th {
  text-align: left; font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--metin-3);
  padding: 11px 14px; border-bottom: 1px solid var(--kenar);
  background: var(--yuzey-2); white-space: nowrap;
}
table.tablo td { padding: 12px 14px; border-bottom: 1px solid var(--kenar); vertical-align: middle; }
table.tablo tbody tr:hover { background: var(--yuzey-2); }
table.tablo tbody tr:last-child td { border-bottom: none; }

.rozet {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: var(--yuzey-2); color: var(--metin-2);
  border: 1px solid var(--kenar);
  white-space: nowrap;
}
.rozet-yesil { background: rgba(76,175,80,.12); color: var(--basari); border-color: rgba(76,175,80,.26); }
.rozet-mavi  { background: rgba(36,113,163,.10); color: var(--vurgu-600); border-color: rgba(36,113,163,.24); }
.rozet-gri   { background: var(--yuzey-2); color: var(--metin-3); }
/* ⚠️ ÖLÇÜLDÜ: `.rozet-uyari` ve `.rozet-bilgi` DOKUZ ve YEDİ ekranda
   kullanılıyordu ama hiçbir CSS dosyasında TANIMLI DEĞİLDİ (app.css 0,
   kabuk.css 0). Tarayıcı bilinmeyen sınıfı sessizce yok sayar: "Kilitli",
   "Stok çıkışı", "ilk 500" gibi UYARI rozetleri nötr gri görünüyordu —
   yani uyarı, uyarı olduğunu belli etmiyordu. Renkler icat edilmedi;
   kardeş sınıfların dili ve mevcut değişkenler kullanıldı:
   turuncu = --uyari (.cevrimici-rozet.kapali ile aynı), mavi = --vurgu.
   --uyari koyu kipte app.css'te #FFB74D'ye dönüyor, o yüzden turuncunun
   ayrı bir koyu kip kuralı gerekmez; --vurgu-600 koyu kipte AÇILMIYOR,
   onun için aşağıda ayrı kural var. */
.rozet-uyari { background: rgba(255,152,0,.12); color: var(--uyari); border-color: rgba(255,152,0,.28); }
.rozet-bilgi { background: rgba(36,113,163,.10); color: var(--vurgu-600); border-color: rgba(36,113,163,.24); }

/* ⚠️ ÖLÇÜLDÜ (tests/tarayici/rozetCss.mjs): düz `var(--uyari)` (#EF6C00) bu
   açık turuncu zeminin üstünde KONTRAST 2.58 veriyordu — WCAG AA eşiği 4.5.
   Yani rozet "görünür" oluyor ama YAZISI okunmuyordu; kusurun yarısı
   düzelmiş sayılırdı. Yeni renk uydurulmadı: aynı değişken, kabuk.css'te
   zaten kullanılan color-mix tekniğiyle koyulaştırıldı (ölçülen: 5.75).
   İlk bildirim geriye dönük yedektir — color-mix desteklemeyen tarayıcı
   ikinciyi yok sayar ve eski tonda kalır. Koyu kipte --uyari #FFB74D'ye
   döndüğü için orada ölçüm 8.43'tü; karıştırma YALNIZ açık kipe uygulanır. */
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  .rozet-uyari { color: color-mix(in srgb, var(--uyari) 62%, #000); }
}

@media (prefers-color-scheme: dark) {
  /* ⚠️ ÖLÇÜLDÜ: --vurgu-600 (#17406A) koyu kipte app.css'te AÇILMIYOR, yani
     lacivert yazı lacivert zeminde kalıyor — .rozet-mavi için ölçülen
     kontrast 1.52 (WCAG AA eşiği 4.5). Rozet TANIMLIYDI ama okunmuyordu:
     "tanımsız sınıf" kusurunun sessiz kardeşi. Aynı düzeltme yeni
     .rozet-bilgi ile birlikte .rozet-mavi'ye de uygulanır — yoksa iki
     kardeş sınıf koyu kipte birbirinden farklı davranırdı. */
  .rozet-bilgi,
  .rozet-mavi { background: rgba(107,174,220,.14); color: var(--vurgu-400); border-color: rgba(107,174,220,.30); }
}

.eylemler { display: flex; gap: 7px; flex-wrap: wrap; }

/* ================================================================== KİPLİK */

.kaplama {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 46, 77, .55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  animation: belir 140ms ease-out;
}

.kiplik {
  background: var(--yuzey);
  border-radius: var(--r-xl);
  box-shadow: var(--golge-3);
  width: 100%; max-width: 620px;
  max-height: 92dvh;
  display: flex; flex-direction: column;
  border: 1px solid var(--kenar);
}
.kiplik-basi {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--kenar);
}
.kiplik-basi h2 { font-size: 17px; flex: 1; }
.kiplik-govde { padding: 20px; overflow-y: auto; }
.kiplik-alt {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 20px; border-top: 1px solid var(--kenar);
  background: var(--yuzey-2); flex-wrap: wrap;
}
.kapat-dugme {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: none; background: transparent; color: var(--metin-3);
  border-radius: 9px; cursor: pointer;
}
.kapat-dugme:hover { background: var(--kenar); color: var(--metin); }
.kapat-dugme svg { width: 18px; height: 18px; }

/* ============================================================ SEÇİM LİSTESİ */

.secim-listesi {
  border: 1px solid var(--kenar);
  border-radius: var(--r-md);
  max-height: 290px; overflow-y: auto;
  background: var(--yuzey-2);
}
.secim-grup {
  padding: 9px 14px 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--metin-3);
  background: var(--yuzey-2);
  position: sticky; top: 0;
}
.secim-satir {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 14px; cursor: pointer; min-height: 42px;
  transition: background var(--gecis);
}
.secim-satir:hover { background: var(--kenar); }
.secim-satir input { width: 17px; height: 17px; accent-color: var(--vurgu-500); cursor: pointer; flex-shrink: 0; }
.secim-satir-ad { font-size: 14px; }
.secim-satir-alt { font-size: 12px; color: var(--metin-3); }

/* ============================================================== STOK DETAY */

.arama-satir { display: flex; gap: 10px; align-items: flex-start; }
.depo-sec { max-width: 230px; min-height: 48px; flex-shrink: 0; }

.don180 { transform: rotate(180deg); }

/* --- güncel kur şeridi --- */
.kur-serit {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding: 8px 12px;
  background: var(--vurgu-acik);
  border: 1px solid rgba(36,113,163,.22);
  border-radius: var(--r-md);
  font-size: 13px;
}
.kur-serit > svg { width: 16px; height: 16px; color: var(--vurgu-600); }
.kur-oge { display: inline-flex; align-items: baseline; gap: 6px; }
.kur-oge b { color: var(--vurgu-600); font-size: 12px; letter-spacing: .04em; }
.kur-deger { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--metin); }
.kur-tarih { margin-left: auto; font-size: 12px; color: var(--metin-3); }

/* --- fiyat kutusu: döviz eki ve karşılıklar --- */
.doviz-eki { font-size: 12px; font-weight: 600; color: var(--metin-3); margin-left: 3px; }
.fiyat-karsilik {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 5px; font-size: 11.5px; color: var(--metin-2);
}
.fiyat-karsilik b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- sonuç listesi --- */
.stok-liste { display: flex; flex-direction: column; }

.stok-satir {
  display: block; width: 100%; text-align: left;
  padding: 13px 18px;
  background: transparent; border: none;
  border-bottom: 1px solid var(--kenar);
  cursor: pointer; font-family: inherit; color: var(--metin);
  transition: background var(--gecis);
}
.stok-satir:last-child { border-bottom: none; }
.stok-satir:hover { background: var(--yuzey-2); }
.stok-satir:active { background: var(--kenar); }

.stok-satir-ust { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.stok-kod { font-weight: 700; color: var(--veri-kod); font-size: 14.5px; }
.stok-fiyat { font-weight: 700; color: var(--veri-fiyat); font-size: 13px; white-space: nowrap; }
.stok-fiyat em { font-style: normal; font-size: 11px; color: var(--metin-3); }

.stok-ad { font-size: 13.5px; color: var(--metin); margin: 3px 0; }

.stok-satir-alt { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.stok-kisa { font-size: 12px; color: var(--metin-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stok-mik { font-size: 12px; color: var(--metin-2); white-space: nowrap; }
.stok-mik strong { color: var(--veri-miktar); }
.stok-mik em { font-style: normal; color: var(--metin-3); }
.stok-mik .ayrac { color: var(--kenar-koyu); margin: 0 4px; }
.stok-mik .takip { color: var(--veri-takip); font-weight: 600; }

/* --- kart --- */
.kart-ad {
  font-size: 17px; font-weight: 700; margin-bottom: 2px;
  color: var(--vurgu-500);       /* MAUI StockDetailPage başlık rengi #2471A3 */
}
.kart-kisa { font-size: 13px; color: var(--metin-3); margin-bottom: 14px; }

/* --- özet kutuları: her biri kendi anlam rengiyle --- */
.ozet-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin: 14px 0 18px;
}
.ozet-kutu {
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--yuzey-2);
  border: 1px solid var(--kenar);
  border-left: 4px solid var(--kenar-koyu);
}
.ozet-etiket { font-size: 11.5px; color: var(--metin-3); text-transform: uppercase; letter-spacing: .06em; }
.ozet-deger { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; }
.ozet-alt { font-size: 11.5px; color: var(--metin-3); }

/* Bu depo — birincil mavi */
.ozet-kutu.ozet-depo {
  background: var(--vurgu-acik);
  border-color: rgba(36,113,163,.30);
  border-left-color: var(--vurgu-500);
}
.ozet-kutu.ozet-depo .ozet-etiket,
.ozet-kutu.ozet-depo .ozet-deger { color: var(--vurgu-600); }

/* Tüm depolar — nötr */
.ozet-kutu.ozet-genel { border-left-color: var(--metin-3); }

/* Fiyat — yeşil */
.ozet-kutu.ozet-fiyat {
  background: rgba(76,175,80,.08);
  border-color: rgba(76,175,80,.26);
  border-left-color: var(--basari-parlak);
}
.ozet-kutu.ozet-fiyat .ozet-deger { color: var(--veri-fiyat); }

/* KDV — turuncu */
.ozet-kutu.ozet-kdv {
  background: rgba(255,152,0,.08);
  border-color: rgba(255,152,0,.26);
  border-left-color: var(--uyari-parlak);
}
.ozet-kutu.ozet-kdv .ozet-deger { color: var(--uyari); }

/* --- alan panelleri (groupbox) --- */
.panel {
  border: 1px solid var(--kenar);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 14px;
}
.panel-basi {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--vurgu-acik);
  border-bottom: 1px solid rgba(36,113,163,.22);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--vurgu-600);
}
.panel-basi svg { width: 15px; height: 15px; }
.panel-govde { padding: 12px 14px; }

.alan-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px 18px;
}
.alan-izgara > div {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--kenar);
  font-size: 13.5px;
}
.alan-izgara > div:last-child { border-bottom: none; }
.alan-izgara span { color: var(--metin-3); }
.alan-izgara b { font-weight: 600; text-align: right; color: var(--metin); }
.alan-izgara b.vurgulu { color: var(--veri-kod); }
.alan-izgara b.takip { color: var(--veri-takip); }

/* --- sekmeler --- */
.sekme-serit {
  display: flex; gap: 6px; margin-bottom: 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 3px;
}
.sekme {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; min-height: 42px; white-space: nowrap;
  border: 1px solid var(--kenar); border-radius: 999px;
  background: var(--yuzey); color: var(--metin-2);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: all var(--gecis);
}
.sekme:hover { border-color: var(--kenar-koyu); color: var(--metin); }
.sekme.etkin {
  background: linear-gradient(135deg, var(--vurgu-500), var(--vurgu-600));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(23,64,106,.26);
}
.sekme svg { width: 16px; height: 16px; }

/* --- EVRAK KABUĞUNUN sekme şeridi (Ortak/EvrakKabugu.razor) ---------------
   Genel `.sekme-serit`ten AYRI bir sınıf, çünkü davranışı el terminaline göre:

   1) EŞİT GENİŞLİK. Referansta şerit `<Grid ColumnDefinitions="*,*">` — iki
      düğme satırı tam paylaşır. Genel şerit ise içeriğe göre daralıp yatay
      kayıyor; parmakla kullanılan bir terminalde hedefi küçültür.
   2) YAPIŞKAN. Terminal tek elle kullanılır; satır listesinin dibindeyken
      bölüm değiştirmek için başa kaydırmak gerekmemeli.
   3) `.sekme span` dar ekranda gizleniyor (aşağıdaki 640px kuralı). İki ikon
      birbirine benzediğinde şerit anlamsızlaşır; `.sekme-kisa` orada devreye
      girip kısa metni geri getirir. */
.evrak-sekme-serit {
  position: sticky; top: 0; z-index: 5;
  background: var(--zemin); padding-top: 4px;
  overflow-x: visible;
}
/* ⚠️ 46px, genel `.sekme`nin 42px'i DEĞİL. El terminali parmakla kullanılır ve
   dokunma hedefi ≥44px olmalı; ölçüldü, 42px eşiği geçmiyordu
   (tests/tarayici/evrakKabugu.mjs kontrol 1c). */
.evrak-sekme-serit .sekme { flex: 1 1 0; justify-content: center; min-height: 46px; }
.sekme-kisa { display: none; font-style: normal; }
.sekme-rozet { margin-left: 2px; }
.evrak-durum-kusak { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.evrak-durum-kusak:empty { display: none; }

td.sayi { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
td.sayi.eksi { color: var(--hata); }

/* ---------------------------------------------------------------- İPTAL KAYIT
   PROJE KURALI: Mikro'da *_iptal = 1 olan hiçbir kart kullanılamaz ve
   değiştirilemez. Her listede üstü çizili + italik gösterilir; evrak
   ekranlarında seçilemez. Tek istisna: bilgi amaçlı görüntüleme. */
tr.iptal-satir,
.iptal-satir {
  text-decoration: line-through;
  font-style: italic;
  color: var(--metin-3);
}
tr.iptal-satir code,
tr.iptal-satir b,
tr.iptal-satir strong { font-weight: 500; color: inherit; }
/* Rozetin kendisi okunur kalmalı */
tr.iptal-satir .rozet { text-decoration: none; font-style: normal; }

@media (max-width: 640px) {
  .arama-satir { flex-direction: column; }
  .depo-sec { max-width: none; width: 100%; }
  .ozet-deger { font-size: 18px; }
  .sekme span { display: none; }
  .sekme { padding: 9px 14px; }
  /* Evrak kabuğunda ikon tek başına kalmasın — kısa ad geri gelir. */
  .evrak-sekme-serit .sekme-kisa { display: inline; }
  .evrak-sekme-serit .sekme { padding: 9px 10px; }
}

/* ================================================================== DURUMLAR */

.bos-durum { text-align: center; padding: 46px 20px; color: var(--metin-3); }
.bos-durum svg { width: 42px; height: 42px; opacity: .4; margin-bottom: 12px; }

/* ⚠️ HATA PANELİ, BOŞ-KÜME PANELİ DEĞİLDİR — ÖLÇÜLDÜ.
   On bir yerde hata durumu `bos-durum` sınıfını giyiyordu. İkisi aynı
   görünüyordu: "kayıt yok" ile "kayıt olup olmadığını BİLMİYORUM" kullanıcıya
   AYNI sessiz gri kutu olarak çıkıyordu. Bölge/Adres'te bu, depoda 58 adres
   dururken "Adres bulunamadı." okutuyordu.
   `hata-durum` ikisini hem GÖRSEL olarak (soluk değil, uyarı rengi) hem
   PROGRAMATİK olarak (role="alert" + sınıf) ayırır. */
.bos-durum.hata-durum { color: var(--uyari); }
.bos-durum.hata-durum svg { opacity: .85; }

.yukleniyor-satir { display: flex; align-items: center; gap: 11px; padding: 34px; justify-content: center; color: var(--metin-2); }

.ipucu-metin { font-size: 12.5px; color: var(--metin-3); margin-top: 6px; }

/* ======================================================= DUYARLI KIRILIMLAR */

/* Tablet ve altı: yan menü çekmeceye dönüşür */
@media (max-width: 1024px) {
  /* Kapali cekmece EKRAN DISINDA ama DOM'da: transform tek basina odak
     sirasindan cikarmaz, Tab ile once gorunmeyen tum menu baglantilari ve
     "Cikis yap" geziliyordu. visibility:hidden odaklanabilir ogeleri de
     kapatir; gecikme kapanis animasyonu bitene kadar cizimi surdurur. */
  .yan {
    position: fixed; left: 0; top: 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1),
                visibility 0s linear 220ms;
    box-shadow: var(--golge-3);
  }
  .yan.acik {
    transform: none;
    visibility: visible;
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1), visibility 0s;
  }
  .menu-dugmesi { display: grid; }
  .yan-perde {
    position: fixed; inset: 0; z-index: 35;
    background: rgba(16,46,77,.5);
    animation: belir 140ms ease-out;
  }
}

@media (max-width: 640px) {
  .ust-serit { padding: 10px 14px; }
  .ust-serit h1 { font-size: 17px; }
  .sayfa { padding: 15px 14px 28px; }
  .kart-izgara { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 11px; }
  .menu-kart { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 106px; }
  .kiplik { max-height: 96dvh; }
  .kiplik-alt { flex-direction: column-reverse; }
  .kiplik-alt .dugme { width: 100%; }
  .cevrimici-rozet span.etiket { display: none; }
}

/* Güvenli alan (çentikli telefonlar) */
@supports (padding: env(safe-area-inset-bottom)) {
  .sayfa { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .yan-alt { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .yan { transition: none; }
}

/* ===================================================== YENİ STOK KARTI === */

.zorunlu { color: var(--tehlike, #C62828); font-weight: 700; }

/* Stok kodu müsaitlik rozeti — üç durum ayrı renkte okunur. */
.kod-durum {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; font-size: 12.5px; color: var(--metin-2);
  min-height: 18px;
}
.kod-durum svg { width: 15px; height: 15px; }
.kod-durum.musait { color: #2E7D32; font-weight: 600; }
.kod-durum.dolu   { color: #C62828; font-weight: 600; }

/* Alt sekmelerin ortak düzenlenebilir tablosu */
.satir-editor .editor-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.satir-editor .editor-tablo th {
  text-align: left; padding: 8px 8px; font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--metin-2); border-bottom: 1px solid var(--kenar);
  white-space: nowrap;
}
.satir-editor .editor-tablo td { padding: 4px 6px; border-bottom: 1px solid var(--kenar-2, #EEF2F6); }
.satir-editor .editor-tablo td .girdi { margin: 0; height: 34px; font-size: 13.5px; }
.satir-editor .editor-sil { text-align: center; }
.satir-editor .editor-sil svg { width: 15px; height: 15px; }

/* Üst şeritteki bekleyen-kuyruk rozeti */
.kuyruk-rozet {
  border: 1px solid #F0B429; background: #FFF8E6; color: #8A5A00;
  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
}
.kuyruk-rozet:hover { background: #FFEFC2; }
.kuyruk-rozet svg { width: 14px; height: 14px; }

/* Form ızgarası. .alan-izgara OKUMA içindir (etiket solda / değer sağda);
   girdi formlarında etiket girdinin ÜSTÜNDE olmalı. */
.form-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2px 18px;
}
.form-izgara > .alan { margin-bottom: 12px; }
.form-izgara .girdi { width: 100%; }

/* Parti/Lot listesindeki satır eylemleri */
.editor-tablo .satir-eylem { white-space: nowrap; padding: 5px 10px; min-height: 30px; }
.editor-tablo .satir-eylem svg { width: 14px; height: 14px; }
.kilit-rozet { display: inline-flex; color: var(--metin-3); }
.kilit-rozet svg { width: 15px; height: 15px; }

/* Kiplik içi bölüm başlığı (ör. Parti/Lot "Kod alanları") */
.alt-baslik {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 12px; padding-top: 12px;
  border-top: 1px solid var(--kenar);
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--metin-2);
}
.alt-baslik > span { flex: 1; }

/* Terminal Tanımları — seçili terminal satırı */
.editor-tablo tr.secili-satir > td { background: var(--vurgu-acik); }

/* Ekranı henüz yazılmamış menü — listede durur, tıklanmaz */
.yan-bag.yakinda { opacity: .45; cursor: default; }
.yan-bag.yakinda:hover { background: transparent; }
.yakinda-rozet {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: inherit;
}
.menu-kart.yakinda { opacity: .45; cursor: default; box-shadow: none; }
.menu-kart.yakinda:hover { transform: none; }
.menu-kart.yakinda .menu-kart-alt { font-style: italic; }

/* Selamlamanın yanındaki terminal rozeti */
.terminal-rozet {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--vurgu-acik); color: var(--vurgu-500);
  font-size: 12.5px; font-weight: 600; vertical-align: middle;
}
.terminal-rozet svg { width: 14px; height: 14px; }

/* Girdi + yardımcı düğme yan yana */
.girdi-dugmeli { display: flex; gap: 8px; align-items: center; }
.girdi-dugmeli .girdi { flex: 1; min-width: 0; }

/* Yazdırma yönetimi */
.rozet-hata { background: #FDECEA; color: #C62828; border-color: #F5C6C2; }
.yazici-liste { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============================================================ ŞABLON TASARIM
   Tasarımcı üç sütundur: sorgu/palet · tuval · özellikler. Tuvalde 1 mm sabit
   sayıda piksele karşılık gelir (zoom), böylece ekrandaki yerleşim kâğıttaki
   ölçüyle bire bir okunur. */
.tasarim-sayfa {
  display: flex; flex-direction: column;
  height: calc(100vh - 112px);
  margin: -6px -4px 0;
}

.tasarim-serit {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--yuzey); border: 1px solid var(--kenar);
  border-radius: var(--r-md); box-shadow: var(--golge-1);
}
.girdi-serit { height: 32px; padding: 4px 8px; font-size: 13px; }
/* Şeritteki düğmeler tam genişlik almasın; .dugme varsayılanı width:100%. */
.tasarim-serit .dugme { width: auto; flex: 0 0 auto; }
.serit-ayrac { width: 1px; height: 22px; background: var(--kenar); }
.serit-olcu {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--metin-2); white-space: nowrap;
}
.serit-olcu .girdi-serit { width: 80px; }

.tasarim-govde {
  display: grid; grid-template-columns: 290px minmax(0, 1fr) 320px;
  gap: 10px; margin-top: 10px; flex: 1; min-height: 0;
}
.tasarim-sol, .tasarim-sag {
  background: var(--yuzey); border: 1px solid var(--kenar);
  border-radius: var(--r-md); overflow: auto;
}
.tasarim-orta {
  background: var(--zemin); border: 1px solid var(--kenar);
  border-radius: var(--r-md); overflow: auto; padding: 18px;
  touch-action: none;   /* sürüklerken sayfa kaymasın */
}

.panel-alt-basi {
  margin: 14px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--kenar);
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--metin-3);
  display: flex; align-items: center; gap: 8px;
}
.alan-sik { margin-bottom: 8px; }
.alan-sik > label { font-size: 12px; color: var(--metin-2); display: block; margin-bottom: 3px; }
.form-izgara.iki-sutun { grid-template-columns: 1fr 1fr; gap: 0 10px; }
.kod-alani { font-family: Consolas, "Courier New", monospace; font-size: 12.5px; }
.girdi-renk { padding: 2px; height: 34px; }
.onay-serit { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.onay-kucuk { font-size: 11.5px; }

/* --- palet --- */
.palet { display: flex; flex-wrap: wrap; gap: 5px; }
.palet-oge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; font-size: 12px;
  background: var(--yuzey-2); border: 1px solid var(--kenar);
  border-radius: var(--r-sm); cursor: grab; user-select: none;
}
.palet-oge:hover { border-color: var(--vurgu-500); color: var(--vurgu-600); }
.palet-oge:active { cursor: grabbing; }
.palet-oge svg { width: 13px; height: 13px; }

/* --- tuval --- */
.tuval-cerceve { display: inline-block; }
.tuval {
  background: #fff; box-shadow: var(--golge-2);
  border: 1px solid var(--kenar-koyu);
}
.bant + .bant { border-top: 1px dashed var(--kenar-koyu); }
.bant-basi {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 8px; font-size: 11px; color: var(--metin-2);
  background: var(--yuzey-2); border-bottom: 1px solid var(--kenar);
}
.bant-ad { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.bant-boy { display: flex; align-items: center; gap: 4px; }
.bant-boy .girdi-serit { width: 62px; height: 24px; padding: 2px 5px; font-size: 11.5px; }
.bant-gizli { opacity: .45; }

.bant-yuzey { position: relative; box-sizing: content-box; }
.bant-ic { position: absolute; inset: 0; }

.oge {
  position: absolute; box-sizing: border-box;
  display: flex; overflow: hidden;
  cursor: move; line-height: 1.05;
  outline-offset: -1px;
}
.oge-ic { white-space: nowrap; overflow: hidden; }
.oge.secili { outline: 2px solid var(--vurgu-500) !important; z-index: 5; }
.oge-tutamac {
  position: absolute; right: -4px; bottom: -4px;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--vurgu-500); cursor: nwse-resize;
}
/* Palet öğesi sürüklenirken bırakma hedefi HER ZAMAN bant yüzeyi olmalı;
   aksi halde imleç mevcut bir öğenin üstündeyse konum yanlış hesaplanır. */
.birakma-modu .oge { pointer-events: none; }
.birakma-modu .bant-yuzey { background: rgba(36,113,163,.05); }

.tuval-bilgi { margin-top: 8px; font-size: 12px; color: var(--metin-3); }

/* --- önizleme --- */
.kiplik-genis { max-width: 1000px; width: 94vw; }
.onizleme-cerceve { width: 100%; height: 72vh; border: 0; display: block; }

@media (max-width: 1200px) {
  .tasarim-govde { grid-template-columns: 250px minmax(0, 1fr) 280px; }
}

/* Etkin sekmedeki sayaç rozeti: mavi zemin üstünde mavi rozet okunmuyordu. */
.sekme.etkin .rozet {
  background: rgba(255, 255, 255, .22);
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}

/* Yerinde etiket basım paneli (Stok Detay sekmesi / Parti-Lot kipliği) */
.basim-paneli { padding: 14px; }
.basim-ozet {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 14px;
  background: var(--yuzey-2); border: 1px solid var(--kenar);
  border-radius: var(--r-sm); font-size: 13.5px;
}
.basim-ozet svg { width: 17px; height: 17px; color: var(--vurgu-500); }
/* minmax(0, 1fr) — sade `1fr` `minmax(auto, 1fr)` demektir ve iz, içeriğin
   doğal en küçük genişliğinin altına inemez. Savunma amaçlı; ÖLÇÜLDÜ:
   bu satır tek başına kırpmayı ÇÖZMEDİ (ızgara zaten 332px'e iniyordu).
   Asıl sebep aşağıdaki `.alan` kuralında — oraya bakın. */
.form-izgara.uc-sutun { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
@media (max-width: 900px) { .form-izgara.uc-sutun { grid-template-columns: minmax(0, 1fr); } }

/* Giriş ekranı sürüm damgası — hangi derlemenin çalıştığı okunsun diye */
.surum-serit {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 6px;
  font-size: 11.5px; color: var(--metin-3);
}
.surum-serit code {
  font-family: Consolas, "Courier New", monospace;
  background: var(--yuzey-2); border: 1px solid var(--kenar);
  border-radius: 5px; padding: 1px 6px; color: var(--metin-2);
}
.surum-etiket { text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.surum-ayrac { opacity: .5; }

/* Evrak kartları (Depolar Arası Sipariş listesi — MAUI kart düzeni) */
.evrak-kart {
  border: 1px solid var(--kenar); border-radius: var(--r-sm);
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
  background: var(--yuzey); transition: border-color var(--gecis), box-shadow var(--gecis);
}
.evrak-kart:hover { border-color: var(--vurgu-500); box-shadow: var(--golge-1); }
.evrak-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.evrak-no { font-size: 15px; letter-spacing: .02em; }
.evrak-alt {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--kenar);
}
.evrak-depolar { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.evrak-depolar svg { width: 14px; height: 14px; color: var(--metin-3); }
/* ⚠️ `.evrak-alt` bir FLEX kutusudur; içine konan çıplak <Ikon> esner.
   Kardeş kutuların hepsinde boyut kuralı vardı (.kart-basi, .kunye-alt,
   .evrak-depolar), burada YOKTU ve Sipariş ekranındaki ok devasa
   çıkıyordu. Ikon.razor artık taban boyut veriyor ama bu kural da
   yerinde dursun: ikon burada kardeşleriyle aynı ölçüde olmalı. */
.evrak-alt > svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--metin-3); }
/* Rozetin içindeki ikon da boyutsuzdu (Siparis.razor:164 kilit rozeti). */
.rozet svg { width: 13px; height: 13px; flex: 0 0 auto; }
.depo-kaynak { color: #2471A3; font-weight: 600; }
.depo-hedef  { color: #2E7D32; font-weight: 600; }

/* Kart başlığı flex kutusudur: içine konan çıplak <Ikon> esneyip dev bir blok
   olur (K.6/10'un .kart-basi'ndeki hali — Depolar Arası Sipariş'te ölçüldü).
   .panel-basi için zaten vardı; burada da sabitlenir. */
.kart-basi > svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Seçilen stoğun künyesi (evrak satırı girişi) */
.stok-kunye {
  border: 1px solid var(--kenar); border-radius: var(--r-sm);
  background: var(--yuzey-2); padding: 10px 12px; margin-bottom: 12px;
}
.kunye-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kunye-kod { font-weight: 700; font-size: 14px; }
.kunye-alt {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--kenar);
}
.kunye-alt > svg { width: 15px; height: 15px; color: var(--metin-3); }
.kunye-kutu {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--yuzey); border: 1px solid var(--kenar); font-size: 13.5px;
}
.kunye-kaynak { border-color: #2471A3; }
.kunye-hedef  { border-color: #2E7D32; }
.kunye-etiket { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--metin-3); }
tr.secilebilir { cursor: pointer; }
tr.secilebilir:hover { background: var(--vurgu-acik); }
/* Satir artik tabindex=0 ile odaklanabilir (StokSecici): klavye kullanicisi
   nerede oldugunu gormeli. Yalnizca klavye odaginda cizilir, fareyle degil. */
tr.secilebilir:focus-visible {
  outline: 2px solid var(--vurgu-500); outline-offset: -2px;
  background: var(--vurgu-acik);
}
@media (prefers-color-scheme: dark) {
  tr.secilebilir:focus-visible { outline-color: var(--vurgu-400); }
}

/* --- E0.2: tablo siralama + sayfalama ------------------------------------ */
/* Baslik bir DUGMEDIR: klavyeyle de siralanabilmeli (erisilebilirlik). */
/* ⚠️ Seçiciler HEM `.tablo` HEM `.editor-tablo` için: liste ekranlarının
   büyük bölümü `editor-tablo` kullanıyor ve Tablo bileşeni oraya
   bağlandığında sıralama başlığı stilsiz kalıyordu (başlık düğme olduğu
   için de gövde yazısı gibi görünüyordu). */
.tablo th.sirali-baslik,
.editor-tablo th.sirali-baslik { padding: 0; }
.sirala-dugme {
  display: flex; align-items: center; gap: 4px; width: 100%;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  padding: 8px 8px; text-align: left;
}
.sirala-dugme:hover { background: var(--yuzey-2); }
/* --vurgu diye bir degisken hic tanimlanmadi: bildirim "invalid at
   computed-value time" olup dusuyordu, yani odak halkasi HIC cizilmiyordu
   (WCAG 2.4.7). Tanimli ton --vurgu-500. */
.sirala-dugme:focus-visible { outline: 2px solid var(--vurgu-500); outline-offset: -2px; }
.tablo th.etkin .sirala-dugme,
.editor-tablo th.etkin .sirala-dugme { color: var(--vurgu-500); font-weight: 700; }
/* Koyu temada 500 tonu zemine cok yakin kaliyor; app.css orada yalnizca
   --vurgu-400'u aciyor. */
@media (prefers-color-scheme: dark) {
  .sirala-dugme:focus-visible { outline-color: var(--vurgu-400); }
  .tablo th.etkin .sirala-dugme,
  .editor-tablo th.etkin .sirala-dugme { color: var(--vurgu-400); }
}
.sirala-ok { font-size: 9px; line-height: 1; }

.sayfalama {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--kenar);
}
.girdi-kucuk { width: auto; padding: 4px 8px; height: auto; }

@media (max-width: 640px) {
  /* Dar ekranda sayfa bilgisi one alinir, secim alta duser. */
  .sayfalama { gap: 8px; }
  .sayfalama label { order: 3; }
}

/* Onay kipligi dar olmali: tek soruya genis kutu agir durur. */
.kiplik-dar { max-width: 460px; }

/* Yikici islem dugmesi — silme onayinda kullanilir. */
.dugme-tehlike { background: #C62828; color: #fff; border-color: #C62828; }
.dugme-tehlike:hover:not(:disabled) { background: #A81F1F; border-color: #A81F1F; }
.dugme-tehlike:focus-visible { outline: 2px solid #C62828; outline-offset: 2px; }

/* ============================================ TELEFONDA KIRPILMA — ÖLÇÜLDÜ
   Flex öğelerinin varsayılan `min-width: auto` tabanı vardır: bir <input>
   doğal genişliğinin ALTINA inemez. `.alan` içinde yan yana duran iki
   `input[type=date]` (tarih aralığı) 390px ekranda 181+181+ara = ~394px
   istiyor, kart ise 360px. `.kart { overflow: hidden }` farkı KAYDIRMA
   ÇUBUĞU ÜRETMEDEN kesiyordu — yani içerik erişilemez hâldeydi ama hiçbir
   kaydırma göstergesi yoktu.

   ⚠️ Bunu `document.body.scrollWidth > window.innerWidth` ölçütü GÖREMEZ:
   taşma karttan dışarı hiç çıkmadığı için body temiz görünür. Altı ekranın
   altısında da o ölçüt "sorun yok" diyordu. Ölçüt kart seviyesine taşındı:
   tests/tarayici/responsive.mjs — `overflowX==='hidden' && scrollW>clientW`.

   Ölçüm (390x844, sistem Chrome): düzeltmeden önce 6 ekranda 34px kesiliyordu. */
.alan input.girdi, .alan select.girdi { min-width: 0; }

/* Kuyrukta GONDERILEMEYEN kayit var: rozet notr degil UYARI rengindedir.
   Sebep title'da ve ayrica bir uyari kutusunda yazili (MainLayout). */
.kuyruk-rozet.kuyruk-hatali { color: var(--uyari); border-color: rgba(255,152,0,.45); }

/* ============================================== TAMAMLANMA YÜZDESİ (sipariş)
   ⚠️ ÇUBUK TEK BAŞINA YETMEZ: %48 ile %52'yi ayırt ettirmez ve renk körü
   kullanıcıya hiçbir şey söylemez. Sayı her zaman yanında yazar. */
.tamamlanma { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.tamamlanma-cubuk {
  flex: 1; min-width: 40px; height: 6px;
  background: var(--yuzey-2, #eef2f6);
  border-radius: 999px; overflow: hidden;
}
.tamamlanma-cubuk > span {
  display: block; height: 100%;
  background: var(--basari, #2E7D32);
  border-radius: 999px;
  transition: width .2s ease;
}
.tamamlanma-sayi {
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--metin-2, #5b6b7d); white-space: nowrap;
}

/* Adres özeti (dinamik depo + çıkış) — satırda "nerede" göstergesi. */
.adres-ozet {
  display: flex; align-items: center; gap: 4px; justify-content: flex-end;
  margin-top: 4px; font-size: 11px; color: var(--metin-2, #5b6b7d);
}
.adres-ozet svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* ---------------------------------------------------- LİSANSLAMA (K.31) */
.lisans-ozet { display: flex; gap: 24px; padding: 8px 4px; flex-wrap: wrap; }
.lisans-ozet > div { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
.lisans-ozet strong { font-size: 26px; line-height: 1.2; }
.lisans-ozet span { font-size: 12.5px; color: var(--metin-3); }
.lisans-uret-satir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lisans-uretilen { margin-top: 10px; }
.lisans-qr-govde { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lisans-qr-govde img { width: min(300px, 70vw); height: auto; image-rendering: pixelated; }
.lisans-qr-metin { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 14px; }

/* Merkezi lisans (25.09.2026) — kurulum lisansı ve lisans merkezi ekranları. */
.lisans-bilgi-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 16px; }
.lisans-bilgi-izgara > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lisans-bilgi-izgara span { font-size: 12px; color: var(--metin-3); }
.lisans-bilgi-izgara strong { font-size: 14px; overflow-wrap: anywhere; }
.lisans-bandi { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13.5px;
                background: var(--uyari-zemin, #FFF4E5); color: var(--uyari-metin, #8A4B00);
                border-bottom: 1px solid var(--uyari-kenar, #F5C27A); }
.lisans-bandi.salt-okur { background: var(--hata-zemin, #FDECEC); color: var(--hata-metin, #9B1C1C);
                          border-bottom-color: var(--hata-kenar, #F3A6A6); }
.lisans-ek-secim { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.lisans-ek-secim label.pasif { opacity: .5; }
.lisans-anahtar-kutu { font-family: ui-monospace, Consolas, monospace; font-size: 15px; letter-spacing: .5px; }
.surum-notlari { white-space: pre-wrap; font-size: 13px; background: var(--zemin-2, #F4F6F8);
                 border-radius: 6px; padding: 10px 12px; margin: 8px 0 0; max-height: 220px; overflow: auto; }

/* ============================================================ EVRAK SATIRLARI
   Kullanıcı kuralı (09.08.2026): "sadece stok kodu ve miktar yetmez… her satır
   rahatlıkla ayırt edilebilmeli, satırlarda renkli olmalı yazılar, kurumsal
   modern olmalı". MAUI tarafındaki SatirGorunumu ile AYNI dili konuşur:
   aynı bilgi türü iki istemcide de aynı renkte görünür.

   Renk süs değil, ayırt edicidir: stok kodu mavi, miktar koyu ve büyük,
   parti/seri kehribar rozet, adres mor rozet, açıklama soluk italik. */

.satir-kod {
  font-weight: 700;
  color: var(--vurgu);
  letter-spacing: .01em;
}

.satir-ad {
  font-size: 12.5px;
  color: var(--metin-2);
  margin-top: 2px;
}

/* Miktar okunacak İLK sayıdır: büyük, koyu ve sağa dayalı. */
.satir-miktar {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 15px;
  color: var(--vurgu-koyu, var(--vurgu));
  white-space: nowrap;
}

.satir-birim {
  font-size: 11.5px;
  color: var(--metin-3);
  margin-left: 4px;
  font-weight: 500;
}

.satir-aciklama {
  font-size: 11.5px;
  color: var(--metin-3);
  font-style: italic;
  margin-top: 2px;
}

/* Takip rozeti — parti/lot ve seri no. Takip tipine göre kullanıcı NE
   eklediğini görmek zorunda (kullanıcı kuralı). */
.rozet-takip,
.rozet-adres {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.rozet-takip {
  background: rgba(255,143,0,.14);
  color: #B26A00;
  border: 1px solid rgba(255,143,0,.3);
}

.rozet-adres {
  background: rgba(149,117,205,.16);
  color: #5E35B1;
  border: 1px solid rgba(149,117,205,.32);
}

/* Satırın DURUMU: sol şerit. İptal satırı soluk ve üstü çizili. */
.satir-iptal { opacity: .6; }
.satir-iptal .satir-kod { text-decoration: line-through; color: var(--metin-3); }

/* ===================================== MİKTAR + SATIR EKLE AYNI SATIRDA
   Kullanıcı isteği: "ekranların yüksekliğini verimli kullanmak açısından
   Miktar ve Satır Ekle butonlarını aynı satıra alalım tüm evraklarda"
   (MAUI'de yapıldı, PWA'da da aynısı istendi).

   Kutu kalan yeri doldurur, düğme kendi metnine göre daralır. Düğme kutuyla
   ALT HİZALIDIR: etiket kutunun üstünde durduğu için ortalama hizada düğme
   yukarı kayar ve satır eğri görünürdü. */
.miktar-satiri {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.miktar-satiri > .girdi { flex: 1 1 auto; min-width: 0; }

/* ⚠️ DÜĞME KÜÇÜLEBİLMELİ — `flex: 0 0 auto` idi ve KUTUYU EZİYORDU.
   ---------------------------------------------------------------------------
   ÖLÇÜLDÜ (28.08.2026), Mal Çıkış → İşlem, iki cihaz sınıfında da:

       360×800 terminal :  Miktar kutusu  34 px · düğme ∩ Birim fiyat 2352 px²
       1400×1000 masaüstü: Miktar kutusu  60 px · düğme ∩ Birim fiyat 2784 px²

   Yani kusur cihaza özgü DEĞİLDİ; ilk teşhisim "el terminali sorunu" diye
   dardı, masaüstü ölçümü onu çürüttü. Düğme küçülemediği için hücreden taşıyor
   ve YAN HÜCREDEKİ "Birim fiyat" alanının ÜSTÜNE biniyordu (ekran görüntüsüyle
   de doğrulandı).

   `min-width: 0` ŞART: ızgara/esnek öğeler varsayılan olarak içeriklerinden
   küçülmez (`min-width: auto`), bu yüzden `flex: 0 1 auto` tek başına yetmez.
   Aynı tuzağa bu depoda daha önce de düşüldü (Sipariş Kabul tarih kutuları).

   Deneyle ölçüldü (aynı ekran, aynı anda):
       masaüstü  miktar 60 → 175 px · örtüşme 2784 → 0
   ⚠️ `white-space: nowrap` KORUNDU: metin sarmalanıp düğme iki satır olmasın. */
.miktar-satiri > .dugme { flex: 0 1 auto; min-width: 0; white-space: nowrap; }

/* Izgara hücresi içeriğinden küçülebilmeli; yoksa içindeki esnek satır
   hücreyi taşırır ve komşu sütuna binerdi (yukarıdaki ölçüm). */
.form-izgara > .alan { min-width: 0; }

/* =============================================================== CRM RAPORU
   Huni çubuğu ve "gecikmiş" özet kutusu. Çubuk ADET oranını gösterir, tutar
   değil: tek büyük fırsat huniyi olduğundan dolu gösterirdi. */
.ozet-kutu.ozet-hata { border-left-color: var(--hata); }
.ozet-kutu.ozet-hata .ozet-deger { color: var(--hata); }

.cubuk-yuva {
  height: 8px; border-radius: 4px; margin-top: 4px;
  background: var(--kenar); overflow: hidden;
}
.cubuk-dolu {
  height: 100%; border-radius: 4px;
  background: var(--marka-600);
  transition: width 200ms ease-out;
}