/* ============================================================================
   MOBİL NATIVE KATMAN — Material 3

   ⚠️ BU DOSYA RESPONSIVE DEĞİLDİR. Tek bir `@media (max-width: ...)` yoktur.
   Kural: `html[data-cihaz]` ne diyorsa o düzen çizilir. Dar bir masaüstü
   penceresi telefon sayılmaz — çünkü kullanıcının eli değişmemiştir.

   ⚠️ MASAÜSTÜNE HİÇ DOKUNMAZ. Her seçici `:root:not([data-cihaz="masaustu"])`
   ya da doğrudan bir cihaz sınıfı altındadır; masaüstü kabuğu (kabuk.css)
   olduğu gibi çalışmayı sürdürür.
   ========================================================================= */

/* ==========================================================================
   1. TEMEL — kaydırma, seçim, dokunma
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) body {
  /* Momentumlu kaydırma + lastik bant. Native hissin yarısı buradadır. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;      /* sayfa "pull-to-refresh" ile zıplamasın */
  touch-action: manipulation;        /* çift dokunuşla yakınlaştırma gecikmesi yok */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  font: var(--yz-govde-o);
}

/* Metin girilen ve OKUNAN yerler seçilebilir kalmalı: barkodu kopyalamak
   gerçek bir ihtiyaçtır. */
:root:not([data-cihaz="masaustu"]) input,
:root:not([data-cihaz="masaustu"]) textarea,
:root:not([data-cihaz="masaustu"]) .secilebilir,
:root:not([data-cihaz="masaustu"]) code {
  -webkit-user-select: text;
  user-select: text;
}

/* ==========================================================================
   2. UYGULAMA KABUĞU — üst çubuk + içerik + alt gezinme
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .m-kabuk {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--zemin, #fff);
  overflow: hidden;                  /* kaydırma YALNIZ gövdede olur */
}

/* ---------------------------------------------------------- ÜST APP BAR */
.m-ust {
  display: flex;
  align-items: center;
  gap: var(--bo-1);
  height: calc(var(--ust-cubuk) + var(--gv-ust));
  padding: var(--gv-ust) var(--bo-2) 0 var(--bo-2);
  background: var(--marka-800, #17406A);
  color: #fff;
  /* Kaydırınca gölge belirir (Material 3 "on scroll" durumu). */
  box-shadow: var(--yk-0);
  transition: box-shadow var(--hz-kisa) var(--eg-standart);
  z-index: 4;
}
.m-ust[data-kaydi="1"] { box-shadow: var(--yk-2); }

.m-ust-baslik {
  flex: 1;
  min-width: 0;
  font: var(--yz-baslik-o);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Üst çubuk düğmeleri: 48dp dokunma alanı, 24dp ikon. */
.m-ust-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dokun);
  height: var(--dokun);
  border: 0;
  border-radius: var(--yr-tam);
  background: transparent;
  color: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.m-ust-dugme svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------- GÖVDE */
.m-govde {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: var(--bo-3) var(--bo-kenar);
  /* Alt gezinme ve jest çubuğu içeriği ÖRTMEZ. */
  padding-bottom: calc(var(--bo-6) + var(--alt-gezinme-tam));
  padding-left: max(var(--bo-kenar), var(--gv-sol));
  padding-right: max(var(--bo-kenar), var(--gv-sag));
}
/* Alt gezinmesi olmayan derin sayfalarda fazladan boşluk gerekmez. */
.m-kabuk[data-gezinme="yok"] .m-govde {
  padding-bottom: calc(var(--bo-6) + var(--gv-alt));
}

/* --------------------------------------------------- ALT GEZİNME (nav bar) */
.m-alt {
  display: flex;
  align-items: stretch;
  height: var(--alt-gezinme-tam);
  padding-bottom: var(--gv-alt);
  background: var(--yuzey-2, #f2f5f9);
  border-top: 1px solid var(--cizgi, #dfe6ee);
  z-index: 5;
}
/* Klavye açıkken gizlenir: aksi hâlde yazılan alanı örter. */
:root[data-klavye] .m-alt { display: none; }

.m-alt-bag {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--metin-2, #5b6b7d);
  text-decoration: none;
  font: var(--yz-etiket-k);
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-alt-bag svg { width: 24px; height: 24px; }

/* Material 3 "active indicator": ikonun arkasında hap biçimli dolgu. */
.m-alt-bag .m-alt-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 32px;
  border-radius: var(--yr-tam);
  transition: background var(--hz-kisa) var(--eg-standart);
}
.m-alt-bag[aria-current="page"] { color: var(--marka-800, #17406A); }
.m-alt-bag[aria-current="page"] .m-alt-ikon { background: var(--vurgu-acik, #D6EAF8); }
.m-alt-bag[aria-current="page"] { font: var(--yz-etiket-o); }

.m-alt-etiket {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   3. DOKUNMA GERİ BİLDİRİMİ — dalga (ripple)
   Native hissin en çok fark edilen ayrıntısı: dokunulan yer CEVAP VERİR.
   ========================================================================== */
.m-dalga { position: relative; overflow: hidden; }
.m-dalga::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--hz-orta) var(--eg-cikis);
  pointer-events: none;
}
.m-dalga:active::after {
  opacity: .12;
  transition: opacity var(--hz-kisa) var(--eg-giris);
}

/* ==========================================================================
   4. KART — mobilde tablonun yerini alır
   ========================================================================== */
.m-kart {
  display: block;
  width: 100%;
  text-align: start;
  background: var(--yuzey, #fff);
  border: 1px solid var(--cizgi, #e3e9f0);
  border-radius: var(--yr-orta);
  padding: var(--bo-3) var(--bo-4);
  margin-bottom: var(--bo-2);
  box-shadow: var(--yk-0);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--hz-kisa) var(--eg-standart),
              transform var(--hz-kisa) var(--eg-standart);
}
button.m-kart, a.m-kart { cursor: pointer; }
button.m-kart:active, a.m-kart:active { transform: scale(.985); box-shadow: var(--yk-1); }

.m-kart-ust { display: flex; align-items: center; gap: var(--bo-2); }
.m-kart-baslik {
  flex: 1; min-width: 0;
  font: var(--yz-baslik-k);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-kart-alt {
  font: var(--yz-govde-k);
  color: var(--metin-2, #5b6b7d);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-kart-satir {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--bo-2); margin-top: var(--bo-2);
}
.m-kart-sayi { font: var(--yz-sayi); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   5. LİSTE ÖĞESİ (list tile) — avatar/ikon + iki satır + son ek
   ========================================================================== */
.m-liste { display: block; }
.m-oge {
  display: flex;
  align-items: center;
  gap: var(--bo-3);
  width: 100%;
  min-height: var(--dokun-buyuk);
  padding: var(--bo-2) var(--bo-1);
  border: 0;
  border-bottom: 1px solid var(--cizgi, #eef2f6);
  background: transparent;
  text-align: start;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.m-oge-ikon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--yr-tam);
  background: var(--vurgu-acik, #D6EAF8);
  color: var(--marka-800, #17406A);
}
.m-oge-ikon svg { width: 22px; height: 22px; }
.m-oge-govde { flex: 1; min-width: 0; }
.m-oge-bas {
  font: var(--yz-govde-b);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-oge-alt {
  font: var(--yz-govde-k); color: var(--metin-2, #5b6b7d);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-oge-son { flex: 0 0 auto; display: flex; align-items: center; gap: var(--bo-2); }

/* ==========================================================================
   6. DÜĞMELER — Material 3
   ========================================================================== */
.m-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bo-2);
  min-height: var(--dokun);
  padding: 0 var(--bo-6);
  border: 0;
  border-radius: var(--yr-tam);
  font: var(--yz-etiket-b);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--hz-kisa) var(--eg-standart),
              background var(--hz-kisa) var(--eg-standart);
}
.m-dugme svg { width: 20px; height: 20px; }
.m-dugme:disabled { opacity: .38; cursor: not-allowed; }

.m-dugme-dolu    { background: var(--marka-800, #17406A); color: #fff; }
.m-dugme-dolu:not(:disabled):active { box-shadow: var(--yk-1); }
.m-dugme-tonlu   { background: var(--vurgu-acik, #D6EAF8); color: var(--marka-900, #102E4D); }
.m-dugme-cizgili { background: transparent; color: var(--marka-800, #17406A);
                   box-shadow: inset 0 0 0 1px var(--cizgi-koyu, #b9c6d4); }
.m-dugme-metin   { background: transparent; color: var(--marka-800, #17406A); padding: 0 var(--bo-3); }
.m-dugme-tehlike { background: var(--hata, #C62828); color: #fff; }
.m-dugme-basari  { background: var(--basari, #2E7D32); color: #fff; }
.m-dugme-tam     { width: 100%; }

/* İkon düğmesi: dokunma alanı 48dp, görsel 24dp. */
.m-ikon-dugme {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--dokun); height: var(--dokun);
  border: 0; border-radius: var(--yr-tam);
  background: transparent; color: inherit; cursor: pointer;
  position: relative; overflow: hidden;
}
.m-ikon-dugme svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------------- FAB */
.m-fab {
  position: fixed;
  right: max(var(--bo-4), var(--gv-sag));
  bottom: calc(var(--alt-gezinme-tam) + var(--bo-4));
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--bo-2);
  min-width: var(--dokun-fab); height: var(--dokun-fab);
  padding: 0 var(--bo-5);
  border: 0; border-radius: var(--yr-buyuk);
  background: var(--vurgu-500, #2471A3); color: #fff;
  font: var(--yz-etiket-b);
  box-shadow: var(--yk-3);
  cursor: pointer; z-index: 6;
  transition: transform var(--hz-orta) var(--eg-giris), box-shadow var(--hz-kisa) var(--eg-standart);
}
.m-fab:active { transform: scale(.94); box-shadow: var(--yk-4); }
.m-fab svg { width: 24px; height: 24px; }
/* Etiketsiz (yuvarlak) hâli. */
.m-fab-sade { padding: 0; width: var(--dokun-fab); border-radius: var(--yr-buyuk); }
:root[data-klavye] .m-fab { display: none; }
.m-kabuk[data-gezinme="yok"] ~ .m-fab,
.m-fab[data-gezinmesiz="1"] { bottom: calc(var(--gv-alt) + var(--bo-4)); }

/* ==========================================================================
   7. GİRİŞ ALANLARI — Material 3 "outlined", yüzen etiket
   ⚠️ Etiket üstte ayrı satır DEĞİL: dar ekranda her satır maliyetlidir ve
   yüzen etiket alanın ne olduğunu odaktayken de görünür tutar.
   ========================================================================== */
.m-alan { position: relative; margin-bottom: var(--bo-4); }

.m-girdi {
  width: 100%;
  min-height: var(--dokun-buyuk);
  padding: var(--bo-5) var(--bo-4) var(--bo-2);
  border: 1px solid var(--cizgi-koyu, #b9c6d4);
  border-radius: var(--yr-kucuk);
  background: var(--yuzey, #fff);
  color: var(--metin, #16232f);
  font: var(--yz-govde-b);
  /* ⚠️ 16px ALTINA İNMEZ: iOS/Android tarayıcı 16px'ten küçük girdide
     odakta sayfayı YAKINLAŞTIRIR ve düzen bozulur. */
  transition: border-color var(--hz-kisa) var(--eg-standart),
              box-shadow var(--hz-kisa) var(--eg-standart);
}
.m-girdi:focus {
  outline: none;
  border-color: var(--vurgu-500, #2471A3);
  box-shadow: inset 0 0 0 1px var(--vurgu-500, #2471A3);
}
.m-girdi[readonly] { background: var(--yuzey-2, #f5f8fb); }
.m-girdi::placeholder { color: transparent; }   /* yüzen etiket görevi görür */

.m-etiket {
  position: absolute;
  left: var(--bo-4);
  top: 50%;
  transform: translateY(-50%);
  padding: 0 var(--bo-1);
  color: var(--metin-2, #5b6b7d);
  font: var(--yz-govde-b);
  pointer-events: none;
  transition: transform var(--hz-kisa) var(--eg-standart),
              font-size var(--hz-kisa) var(--eg-standart),
              color var(--hz-kisa) var(--eg-standart);
}
.m-girdi:focus + .m-etiket,
.m-girdi:not(:placeholder-shown) + .m-etiket,
.m-alan[data-dolu="1"] .m-etiket {
  transform: translateY(-172%) scale(.78);
  color: var(--vurgu-500, #2471A3);
}

.m-yardim { font: var(--yz-govde-k); color: var(--metin-2, #5b6b7d); margin: var(--bo-1) var(--bo-4) 0; }
.m-hata   { font: var(--yz-govde-k); color: var(--hata, #C62828);     margin: var(--bo-1) var(--bo-4) 0; }
.m-alan[data-hata="1"] .m-girdi { border-color: var(--hata, #C62828); }

/* Sayısal alanlarda rakamlar hizalı. */
.m-girdi[inputmode="numeric"], .m-girdi[inputmode="decimal"] {
  font: var(--yz-sayi); font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   8. ALT SAYFA (bottom sheet) — mobilde açılır pencerenin yerine geçer
   ========================================================================== */
.m-perde {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 20;
  animation: m-solgun var(--hz-orta) var(--eg-standart);
}
.m-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 21;
  max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--yuzey, #fff);
  border-radius: var(--yr-dev) var(--yr-dev) 0 0;
  box-shadow: var(--yk-4);
  padding-bottom: var(--gv-alt);
  animation: m-yukari var(--hz-uzun) var(--eg-giris);
}
/* Tutamaç: sürüklenebileceğini SÖYLER. */
.m-sheet-tutamac {
  width: 32px; height: 4px; margin: var(--bo-3) auto var(--bo-1);
  border-radius: var(--yr-tam);
  background: var(--cizgi-koyu, #b9c6d4);
  flex: 0 0 auto;
}
.m-sheet-bas {
  display: flex; align-items: center; gap: var(--bo-2);
  padding: var(--bo-2) var(--bo-4) var(--bo-2) var(--bo-5);
  font: var(--yz-baslik-o);
  flex: 0 0 auto;
}
.m-sheet-govde {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 var(--bo-4) var(--bo-4);
}
.m-sheet-alt {
  display: flex; gap: var(--bo-2);
  padding: var(--bo-3) var(--bo-4);
  border-top: 1px solid var(--cizgi, #e3e9f0);
  flex: 0 0 auto;
}

/* Tam ekran sayfa (lookup, kamera, imza). */
.m-tamekran {
  position: fixed; inset: 0; z-index: 22;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--zemin, #fff);
  animation: m-kay var(--hz-uzun) var(--eg-giris);
}

@keyframes m-solgun { from { opacity: 0 } to { opacity: 1 } }
@keyframes m-yukari { from { transform: translateY(100%) } to { transform: none } }
@keyframes m-kay    { from { transform: translateX(12%); opacity: .4 } to { transform: none; opacity: 1 } }

/* ==========================================================================
   9. ROZET / DURUM
   ========================================================================== */
.m-rozet {
  display: inline-flex; align-items: center; gap: var(--bo-1);
  height: 24px; padding: 0 var(--bo-2);
  border-radius: var(--yr-tam);
  font: var(--yz-etiket-k);
  background: var(--yuzey-2, #eef2f6);
  color: var(--metin-2, #5b6b7d);
  white-space: nowrap;
}
.m-rozet svg { width: 14px; height: 14px; }
.m-rozet-basari  { background: #E3F2E5; color: #1B5E20; }
.m-rozet-uyari   { background: #FFF3E0; color: #E65100; }
.m-rozet-hata    { background: #FDE7E7; color: #B71C1C; }
.m-rozet-bilgi   { background: var(--vurgu-acik, #D6EAF8); color: var(--marka-900, #102E4D); }

/* ==========================================================================
   10. İSKELET (skeleton) — spinner yerine
   ⚠️ Spinner "bekle" der; iskelet "NE geleceğini" gösterir ve bekleme
   süresini kısa hissettirir.
   ========================================================================== */
.m-iskelet {
  border-radius: var(--yr-kucuk);
  background: linear-gradient(90deg,
              var(--yuzey-2, #eef2f6) 25%,
              var(--cizgi, #e0e7ee) 37%,
              var(--yuzey-2, #eef2f6) 63%);
  background-size: 400% 100%;
  animation: m-parla 1.2s ease-in-out infinite;
}
.m-iskelet-satir { height: 14px; margin-bottom: var(--bo-2); }
.m-iskelet-kart  { height: 78px; margin-bottom: var(--bo-2); border-radius: var(--yr-orta); }
@keyframes m-parla { from { background-position: 100% 50% } to { background-position: 0 50% } }
@media (prefers-reduced-motion: reduce) { .m-iskelet { animation: none } }

/* ==========================================================================
   11. BOŞ / HATA / ÇEVRİMDIŞI durumları
   ========================================================================== */
.m-durum {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--bo-3);
  padding: var(--bo-10) var(--bo-6);
  color: var(--metin-2, #5b6b7d);
}
.m-durum-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: var(--yr-tam);
  background: var(--yuzey-2, #eef2f6);
}
.m-durum-ikon svg { width: 34px; height: 34px; }
.m-durum-bas { font: var(--yz-baslik-k); color: var(--metin, #16232f); }
.m-durum-alt { font: var(--yz-govde-o); max-width: 40ch; }

/* ==========================================================================
   12. YAN ÇEKMECE (drawer) — alt gezinmeye sığmayan modüller
   ========================================================================== */
.m-cekmece {
  position: fixed; inset: 0 auto 0 0; z-index: 21;
  width: min(86vw, 340px);
  display: flex; flex-direction: column;
  background: var(--yuzey, #fff);
  border-radius: 0 var(--yr-buyuk) var(--yr-buyuk) 0;
  box-shadow: var(--yk-4);
  padding-top: var(--gv-ust); padding-bottom: var(--gv-alt);
  padding-left: var(--gv-sol);
  animation: m-cek var(--hz-uzun) var(--eg-giris);
}
@keyframes m-cek { from { transform: translateX(-100%) } to { transform: none } }
.m-cekmece-govde { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   13. KOYU KİP
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-cihaz="masaustu"]) {
    --zemin: #0e1620;
    --yuzey: #16202c;
    --yuzey-2: #1d2a38;
    --cizgi: #263544;
    --cizgi-koyu: #35485c;
    --metin: #e8eef5;
    --metin-2: #9aacc0;
  }
  .m-ust { background: #16202c; }
  .m-alt { background: #131c26; }
  .m-rozet-basari { background: #17351c; color: #A5D6A7; }
  .m-rozet-uyari  { background: #3a2a10; color: #FFCC80; }
  .m-rozet-hata   { background: #3a1717; color: #EF9A9A; }
}

/* Çekmecedeki grup başlığı — masaüstündeki renk kodlaması korunur ki
   kullanıcı iki cihazda aynı zihinsel haritayı kullansın. */
.m-cekmece-grup {
  font: var(--yz-etiket-o);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--metin-2, #5b6b7d);
  padding: var(--bo-4) var(--bo-4) var(--bo-1);
}
.m-cekmece-grup::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-inline-end: var(--bo-2);
  border-radius: var(--yr-tam);
  background: var(--grup-rengi, var(--cizgi-koyu, #b9c6d4));
  vertical-align: middle;
}
.m-cekmece-grup[data-grup="MALKABUL"] { --grup-rengi: var(--grup-malkabul); }
.m-cekmece-grup[data-grup="SEVKIYAT"] { --grup-rengi: var(--grup-sevkiyat); }
.m-cekmece-grup[data-grup="DEPOLAR"]  { --grup-rengi: var(--grup-depolar); }
.m-cekmece-grup[data-grup="DINAMIK"]  { --grup-rengi: var(--grup-dinamik); }
.m-cekmece-grup[data-grup="SAYIM"]    { --grup-rengi: var(--grup-sayim); }

/* ==========================================================================
   14. DOKUNMA TABANI — henüz dönüştürülmemiş ekranlar için
   ⚠️ BU RESPONSIVE KÜÇÜLTME DEĞİL, TABAN'DIR. Ekranlar tek tek native
   bileşenlere taşınırken (m-kart, m-oge, m-dugme) aylar sürecek bir ara
   dönem oluşur; o dönemde eski `.dugme` sınıfları dokunmatikte 44px
   kalıyordu (ölçüldü). 48dp altı hedef, eldivenli elde yanlış satır
   seçtirir ve yanlış satır YANLIŞ STOK HAREKETİ demektir. Taban, dönüşüm
   bitene kadar hiçbir ekranı kullanılamaz bırakmaz.
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .dugme,
:root:not([data-cihaz="masaustu"]) .girdi,
:root:not([data-cihaz="masaustu"]) select.girdi,
:root:not([data-cihaz="masaustu"]) .satir-eylem,
:root:not([data-cihaz="masaustu"]) .yan-cikis,
/* ⚠️ SINIFSIZ `select` DE DOKUNULACAK BIR HEDEFTIR — ölçüldü
   (`mobilSupurme.mjs`, 390 px): Analitik ekranındaki `<select @bind="_depoNo">`
   sınıfsız yazıldığı için 40 px kalıyordu; eşik 48 px. Sınıf eklemeyi
   beklemek yerine öğenin kendisi kapsanır: birincil cihaz parmakla
   kullanılan el terminalidir. */
:root:not([data-cihaz="masaustu"]) select,
/* Sekme düğmeleri de dokunma hedefidir: Görüşmeler ekranındaki
   "Tüm kayıtlar" / "Bekleyen hatırlatmalar" sekmeleri 42 px ölçüldü. */
:root:not([data-cihaz="masaustu"]) .sekme {
  min-height: var(--dokun);
}

/* Küçük ikon düğmeleri KARE kalmalı: yalnız yüksekliği büyütmek onları
   dikdörtgene çevirip hizayı bozardı. */
:root:not([data-cihaz="masaustu"]) .dugme-kucuk {
  min-width: var(--dokun);
}

/* Onay kutuları da parmakla seçilebilmeli. */
:root:not([data-cihaz="masaustu"]) input[type="checkbox"],
:root:not([data-cihaz="masaustu"]) input[type="radio"] {
  width: 22px; height: 22px;
}
:root:not([data-cihaz="masaustu"]) label.secim-satir,
:root:not([data-cihaz="masaustu"]) label.onay {
  min-height: var(--dokun);
  display: flex; align-items: center; gap: var(--bo-2);
}

/* ==========================================================================
   15. TABLO → KART LİSTESİ (dokunmatik)

   ⚠️ 37 EKRANIN TAMAMI BURADAN DÖNÜŞÜR. Ortak `Tablo` bileşeni hem başlıkları
   hem satırları sahiplendiği için, dönüşüm tek dosyada durur ve hiçbir ekran
   dosyası açılmaz.

   ⚠️ BU "RESPONSIVE TABLO" DEĞİLDİR. Tablo daraltılmıyor, yatay kaydırmaya
   bırakılmıyor, sütun gizlenmiyor: her SATIR bir KARTA dönüşür, her hücre
   "etiket + değer" satırı olur. Masaüstünde tablo aynen tablo kalır.

   Etiketler `--b1..--bN` değişkenlerinden gelir (Tablo.razor yazar).
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo {
  overflow: visible;                 /* yatay kaydırma YOK */
}
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table,
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody {
  display: block;
  width: 100%;
  border: 0;
}
/* Başlık satırı gizlenir: etiketler artık hücrelerin içinde. */
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > thead { display: none; }

:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr {
  display: block;
  background: var(--yuzey, #fff);
  border: 1px solid var(--cizgi, #e3e9f0);
  border-radius: var(--yr-orta);
  padding: var(--bo-2) var(--bo-3);
  margin-bottom: var(--bo-2);
  box-shadow: var(--yk-0);
}
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr:active {
  box-shadow: var(--yk-1);
}
/* Seçili / iptal satır işaretleri kartta da anlamlı kalmalı. */
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr.secili-satir {
  border-color: var(--vurgu-500, #2471A3);
  box-shadow: inset 0 0 0 1px var(--vurgu-500, #2471A3);
}
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr.iptal-satir {
  opacity: .55;
}

:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td {
  display: flex;
  align-items: baseline;
  gap: var(--bo-3);
  width: auto;
  min-height: 28px;
  padding: var(--bo-1) 0;
  border: 0;
  text-align: start !important;      /* sayısal sütunlar sağa dayalıydı */
}
/* Etiket — başlık adından. */
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td::before {
  content: var(--etiket, "");
  flex: 0 0 40%;
  max-width: 40%;
  font: var(--yz-etiket-o);
  color: var(--metin-2, #5b6b7d);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td > * { min-width: 0; }

/* İLK HÜCRE KARTIN BAŞLIĞIDIR: etiketi basılmaz, büyük ve tam genişlik. */
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:first-child {
  font: var(--yz-baslik-k);
  padding-bottom: var(--bo-2);
  margin-bottom: var(--bo-1);
  border-bottom: 1px solid var(--cizgi, #eef2f6);
}
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:first-child::before {
  display: none;
}

/* Eylem hücresi (düğmeler) kartın ALTINDA, tam genişlik, 48dp. */
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:last-child:has(.satir-eylem),
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:last-child:has(button) {
  justify-content: flex-end;
  gap: var(--bo-2);
  padding-top: var(--bo-2);
  margin-top: var(--bo-1);
  border-top: 1px solid var(--cizgi, #eef2f6);
}
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:last-child:has(button)::before {
  display: none;
}

/* Sayfalama: dar ekranda sarar ve düğmeler 48dp olur. */
:root:not([data-cihaz="masaustu"]) .sayfalama {
  flex-wrap: wrap;
  gap: var(--bo-2);
  padding: var(--bo-3) 0 0;
}

/* --------------------------------------------------------------------------
   Hücre sırası → etiket eşlemesi. 12 sütun yeter: ölçüldü, en geniş tablo
   (Stok Depo Detayları) 8 sütun. Fazlası olursa etiket boş kalır, kart yine
   okunur — sessizce BOZULMAZ.
   -------------------------------------------------------------------------- */
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:nth-child(1)  { --etiket: var(--b1); }
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:nth-child(2)  { --etiket: var(--b2); }
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:nth-child(3)  { --etiket: var(--b3); }
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:nth-child(4)  { --etiket: var(--b4); }
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:nth-child(5)  { --etiket: var(--b5); }
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:nth-child(6)  { --etiket: var(--b6); }
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:nth-child(7)  { --etiket: var(--b7); }
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:nth-child(8)  { --etiket: var(--b8); }
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:nth-child(9)  { --etiket: var(--b9); }
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:nth-child(10) { --etiket: var(--b10); }
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:nth-child(11) { --etiket: var(--b11); }
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td:nth-child(12) { --etiket: var(--b12); }

/* ==========================================================================
   16. DİYALOG / REHBER → NATIVE SAYFA (dokunmatik)

   ⚠️ MASAÜSTÜ AÇILIR PENCERESİ MOBİLDE KULLANILMAZ (kullanıcı kuralı).
   Projede bütün diyaloglar ve rehberler AYNI kalıbı paylaşıyor
   (`.kaplama` > `.kiplik` > `.kiplik-basi/govde/alt`) — ölçüldü: Onay 18
   ekranda, seçiciler ~66 yerde. Bu yüzden dönüşüm TEK yerde yapılır;
   hiçbir ekran dosyası açılmaz ve biri unutulamaz.

   İKİ AYRI DAVRANIŞ, çünkü iki ayrı iş:
     • ONAY (.kiplik-dar) → ALT SAYFA. Kısa bir soru; ekranı kaplaması
       kullanıcıyı bağlamdan koparırdı.
     • REHBER (.kiplik) → telefonda/terminalde TAM EKRAN. Arama ilk odak
       olmalı ve liste uzun; yarım ekranda klavye açılınca 2-3 satır kalırdı.
       Tablette alt sayfa yeter (ekran zaten geniş).
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .kaplama {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 20;
  display: block;                    /* masaüstündeki ortalama kalkar */
  padding: 0;
  animation: m-solgun var(--hz-orta) var(--eg-standart);
}

/* ------------------------------------------------------------- ALT SAYFA */
:root:not([data-cihaz="masaustu"]) .kiplik {
  position: fixed;
  left: 0; right: 0; bottom: 0; top: auto;
  width: auto; max-width: none;
  max-height: 88dvh;
  display: flex; flex-direction: column;
  border-radius: var(--yr-dev) var(--yr-dev) 0 0;
  box-shadow: var(--yk-4);
  padding-bottom: var(--gv-alt);
  animation: m-yukari var(--hz-uzun) var(--eg-giris);
}
/* Sürüklenebilir olduğunu SÖYLEYEN tutamaç. */
:root:not([data-cihaz="masaustu"]) .kiplik::before {
  content: "";
  width: 32px; height: 4px;
  margin: var(--bo-3) auto var(--bo-1);
  border-radius: var(--yr-tam);
  background: var(--cizgi-koyu, #b9c6d4);
  flex: 0 0 auto;
}

:root:not([data-cihaz="masaustu"]) .kiplik-basi {
  font: var(--yz-baslik-o);
  padding: var(--bo-2) var(--bo-4);
  flex: 0 0 auto;
}
:root:not([data-cihaz="masaustu"]) .kiplik-govde {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--bo-2) var(--bo-4) var(--bo-4);
}
:root:not([data-cihaz="masaustu"]) .kiplik-alt {
  display: flex; gap: var(--bo-2);
  padding: var(--bo-3) var(--bo-4);
  border-top: 1px solid var(--cizgi, #e3e9f0);
  flex: 0 0 auto;
}
/* Onay düğmeleri tam genişlik ve baş parmak menzilinde. */
:root:not([data-cihaz="masaustu"]) .kiplik-alt .dugme {
  flex: 1; width: auto !important; min-height: var(--dokun);
  border-radius: var(--yr-tam);
}

/* ------------------------------------------- REHBER: TELEFON/TERMİNALDE TAM EKRAN
   ⚠️ Ölçüt "liste uzun mu" değil CİHAZ: telefonda klavye açılınca yarım
   ekranlı bir rehberde 2-3 satır kalır ve arama işe yaramaz. */
:root[data-cihaz="telefon"] .kiplik:not(.kiplik-dar),
:root[data-cihaz="terminal"] .kiplik:not(.kiplik-dar) {
  top: 0; max-height: none; height: 100dvh;
  border-radius: 0;
  padding-top: var(--gv-ust);
  animation: m-kay var(--hz-uzun) var(--eg-giris);
}
:root[data-cihaz="telefon"] .kiplik:not(.kiplik-dar)::before,
:root[data-cihaz="terminal"] .kiplik:not(.kiplik-dar)::before { display: none; }

/* Tam ekran rehberde başlık bir APP BAR'dır. */
:root[data-cihaz="telefon"] .kiplik:not(.kiplik-dar) > .kiplik-basi,
:root[data-cihaz="terminal"] .kiplik:not(.kiplik-dar) > .kiplik-basi {
  display: flex; align-items: center; gap: var(--bo-2);
  min-height: var(--ust-cubuk);
  background: var(--marka-800, #17406A);
  color: #fff;
  padding: 0 var(--bo-2) 0 var(--bo-4);
  margin: 0;
}
:root[data-cihaz="telefon"] .kiplik:not(.kiplik-dar) > .kiplik-basi .dugme,
:root[data-cihaz="terminal"] .kiplik:not(.kiplik-dar) > .kiplik-basi .dugme {
  color: inherit; background: transparent;
  min-width: var(--dokun); border-radius: var(--yr-tam);
}

/* Rehber araması İLK ODAK olmalı: yapışkan ve büyük. */
:root:not([data-cihaz="masaustu"]) .kiplik-govde > .arama-satir,
:root:not([data-cihaz="masaustu"]) .kiplik-govde > .girdi:first-child {
  position: sticky; top: 0; z-index: 2;
  background: var(--yuzey, #fff);
  padding-top: var(--bo-2);
}

/* ==========================================================================
   17. FORM — Material 3 girdi dili (dokunmatik)

   ⚠️ "Etiket üstte / kutu altta" düzeni dar ekranda İKİ SATIR harcar ve
   ekranın üçte biri etikete gider. Etiket kutunun İÇİNE alınır, kutu
   büyütülür (>=56dp) ve odakta çerçeve renklenir.

   ⚠️ YAZI BOYU 16px ALTINA İNMEZ. Android/iOS tarayıcı 16px'ten küçük bir
   girdiye odaklanınca sayfayı YAKINLAŞTIRIR; düzen kayar, kullanıcı ne
   yazdığını göremez. Bu, mobil web hissinin en belirgin işaretlerinden.
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .girdi {
  min-height: var(--dokun-buyuk);
  padding: var(--bo-3) var(--bo-4);
  border-radius: var(--yr-kucuk);
  border: 1px solid var(--cizgi-koyu, #b9c6d4);
  font-size: 16px;
  background: var(--yuzey, #fff);
}
:root:not([data-cihaz="masaustu"]) .girdi:focus {
  outline: none;
  border-color: var(--vurgu-500, #2471A3);
  box-shadow: inset 0 0 0 1px var(--vurgu-500, #2471A3);
}
:root:not([data-cihaz="masaustu"]) .girdi[readonly] {
  background: var(--yuzey-2, #f5f8fb);
}
/* Sayısal alanlarda rakamlar hizalı — liste taranırken göz kaymasın. */
:root:not([data-cihaz="masaustu"]) .girdi[type="number"] {
  font: var(--yz-sayi); font-variant-numeric: tabular-nums;
}
:root:not([data-cihaz="masaustu"]) .alan-sik > label,
:root:not([data-cihaz="masaustu"]) .alan > label {
  font: var(--yz-etiket-o);
  color: var(--metin-2, #5b6b7d);
  margin-bottom: var(--bo-1);
}

/* Çok sütunlu form ızgarası TEK SÜTUNA iner — ama bu "responsive wrap"
   değil: dokunmatikte iki sütun demek her alanın yarım genişlikte olması,
   yani tek elle yazılamaz hâle gelmesi demektir. */
:root[data-cihaz="telefon"] .form-izgara,
:root[data-cihaz="terminal"] .form-izgara,
:root[data-cihaz="telefon"] .form-izgara.iki-sutun,
:root[data-cihaz="terminal"] .form-izgara.iki-sutun,
:root[data-cihaz="telefon"] .form-izgara.uc-sutun,
:root[data-cihaz="terminal"] .form-izgara.uc-sutun {
  grid-template-columns: 1fr;
  gap: 0;
}
/* Tablette iki sütun kalır: ekran genişliği gerçekten var. */
:root[data-cihaz="tablet"] .form-izgara.uc-sutun { grid-template-columns: 1fr 1fr; }

/* Rehberli alanlarda kutu + düğme aynı yükseklikte olmalı. */
:root:not([data-cihaz="masaustu"]) .alan > div[style*="display:flex"] > .dugme,
:root:not([data-cihaz="masaustu"]) .alan-sik > div[style*="display:flex"] > .dugme {
  min-width: var(--dokun); min-height: var(--dokun-buyuk);
  border-radius: var(--yr-kucuk);
}

/* ==========================================================================
   18. SEKME ŞERİDİ → Material 3 "primary tabs"
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .sekme-serit {
  display: flex;
  position: sticky; top: 0; z-index: 3;
  background: var(--yuzey, #fff);
  border-bottom: 1px solid var(--cizgi, #e3e9f0);
  padding: 0;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
:root:not([data-cihaz="masaustu"]) .sekme-serit::-webkit-scrollbar { display: none; }
:root:not([data-cihaz="masaustu"]) .sekme-serit > button {
  flex: 1 0 auto;
  min-width: 96px;
  min-height: var(--dokun-buyuk);
  border: 0; border-radius: 0;
  background: transparent;
  color: var(--metin-2, #5b6b7d);
  font: var(--yz-etiket-b);
  position: relative;
}
/* Etkin sekmenin ALTINDA kalın gösterge — Material 3 imzası. */
:root:not([data-cihaz="masaustu"]) .sekme-serit > button[aria-selected="true"] {
  color: var(--marka-800, #17406A);
}
:root:not([data-cihaz="masaustu"]) .sekme-serit > button[aria-selected="true"]::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0;
  background: var(--vurgu-500, #2471A3);
}

/* ==========================================================================
   19. KART / PANEL — masaüstü kutuları mobilde yumuşar
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .kart {
  border-radius: var(--yr-orta);
  border: 1px solid var(--cizgi, #e3e9f0);
  box-shadow: var(--yk-0);
  margin-bottom: var(--bo-3);
}
:root:not([data-cihaz="masaustu"]) .kart-basi {
  min-height: var(--dokun);
  font: var(--yz-baslik-k);
  padding: var(--bo-2) var(--bo-4);
}
:root:not([data-cihaz="masaustu"]) .kart-govde { padding: var(--bo-3) var(--bo-4); }

/* Eylem şeridi: düğmeler tam genişlik ve alt alta — tek elle basılabilsin. */
:root[data-cihaz="telefon"] .eylemler,
:root[data-cihaz="terminal"] .eylemler {
  display: flex; flex-direction: column; gap: var(--bo-2);
}
:root[data-cihaz="telefon"] .eylemler > .dugme,
:root[data-cihaz="terminal"] .eylemler > .dugme {
  width: 100% !important;
  border-radius: var(--yr-tam);
  min-height: var(--dokun-buyuk);
}
/* "flex:1" ayırıcılar dikey düzende boşluk üretmesin. */
:root[data-cihaz="telefon"] .eylemler > div[style*="flex:1"],
:root[data-cihaz="terminal"] .eylemler > div[style*="flex:1"] { display: none; }

/* ==========================================================================
   20. BARKOD — dokunmatikte birincil giriş yolu
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .barkod-satir .girdi {
  font: var(--yz-sayi);
  min-height: var(--dokun-buyuk);
}
:root[data-cihaz="terminal"] .barkod-satir .girdi {
  /* El terminalinde barkod kutusu ekranın en belirgin öğesidir. */
  font-size: 20px; font-weight: 700;
  border-width: 2px;
  border-color: var(--vurgu-500, #2471A3);
}

/* ==========================================================================
   21. YÜKLENİYOR → İSKELET (dokunmatik)

   ⚠️ SPINNER "BEKLE" DER, İSKELET "NE GELECEĞİNİ" GÖSTERİR. İkincisi
   bekleme süresini kısa hissettirir ve native uygulamaların standardıdır.
   Dönüşüm mevcut `.yukleniyor-satir` kalıbı üzerinden yapılır: 30'dan fazla
   ekranda aynı kalıp var (ölçüldü), tek yerde dönüştürülür.
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .kart-govde > .yukleniyor-satir,
:root:not([data-cihaz="masaustu"]) .kart > .yukleniyor-satir {
  display: block;
  padding: var(--bo-2) 0;
  position: relative;
}
/* Dönen çember ve metin gizlenir; yerine üç iskelet kart gelir. */
:root:not([data-cihaz="masaustu"]) .kart-govde > .yukleniyor-satir > *,
:root:not([data-cihaz="masaustu"]) .kart > .yukleniyor-satir > * { display: none; }

:root:not([data-cihaz="masaustu"]) .kart-govde > .yukleniyor-satir::before,
:root:not([data-cihaz="masaustu"]) .kart > .yukleniyor-satir::before {
  content: "";
  display: block; height: 78px; margin-bottom: var(--bo-2);
  border-radius: var(--yr-orta);
  background: linear-gradient(90deg, var(--yuzey-2,#eef2f6) 25%,
              var(--cizgi,#e0e7ee) 37%, var(--yuzey-2,#eef2f6) 63%);
  background-size: 400% 100%;
  animation: m-parla 1.2s ease-in-out infinite;
}
:root:not([data-cihaz="masaustu"]) .kart-govde > .yukleniyor-satir::after,
:root:not([data-cihaz="masaustu"]) .kart > .yukleniyor-satir::after {
  content: "";
  display: block; height: 78px; margin-bottom: var(--bo-2);
  border-radius: var(--yr-orta);
  background: linear-gradient(90deg, var(--yuzey-2,#eef2f6) 25%,
              var(--cizgi,#e0e7ee) 37%, var(--yuzey-2,#eef2f6) 63%);
  background-size: 400% 100%;
  animation: m-parla 1.2s ease-in-out infinite .15s;
  opacity: .7;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-cihaz="masaustu"]) .yukleniyor-satir::before,
  :root:not([data-cihaz="masaustu"]) .yukleniyor-satir::after { animation: none; }
}

/* ==========================================================================
   22. BOŞ / HATA DURUMU — native ölçekte
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .bos-durum {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--bo-3);
  padding: var(--bo-10) var(--bo-5);
  font: var(--yz-govde-o);
}
:root:not([data-cihaz="masaustu"]) .bos-durum svg {
  width: 34px; height: 34px; opacity: 1; margin: 0;
  padding: 19px;
  box-sizing: content-box;
  border-radius: var(--yr-tam);
  background: var(--yuzey-2, #eef2f6);
  color: var(--metin-2, #5b6b7d);
}
:root:not([data-cihaz="masaustu"]) .bos-durum.hata-durum svg {
  background: #FDE7E7; color: #B71C1C;
}

/* ==========================================================================
   23. BARKOD KAMERASI → TAM EKRAN (telefon / terminal)

   ⚠️ Kamera küçük bir kutuda çalışmaz: kullanıcı cihazı barkoda tutarken
   ekrana bakamaz ve çerçeveyi hizalayamaz. Native barkod ekranları tam
   ekrandır; hedef çerçevesi ve ipucu üstte durur.
   ========================================================================== */
:root[data-cihaz="telefon"] .kamera-kutu,
:root[data-cihaz="terminal"] .kamera-kutu {
  position: fixed; inset: 0; z-index: 30;
  width: auto; height: auto; max-height: none;
  border-radius: 0;
  background: #000;
  padding-top: var(--gv-ust); padding-bottom: var(--gv-alt);
}
:root[data-cihaz="telefon"] .kamera-video,
:root[data-cihaz="terminal"] .kamera-video {
  width: 100%; height: 100%; object-fit: cover;
}
:root[data-cihaz="telefon"] .kamera-hedef,
:root[data-cihaz="terminal"] .kamera-hedef {
  position: absolute; left: 8%; right: 8%; top: 34%;
  height: 32%;
  border: 3px solid #fff;
  border-radius: var(--yr-orta);
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.45);
}
:root[data-cihaz="telefon"] .kamera-ipucu,
:root[data-cihaz="terminal"] .kamera-ipucu {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--gv-alt) + var(--bo-8));
  text-align: center; color: #fff;
  font: var(--yz-govde-b);
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  padding: 0 var(--bo-5);
}

/* ==========================================================================
   24. GÜVENLİ ALAN — mobil kabuk DIŞINDAKİ tam ekran sayfalar
   (giriş, kurulum: bunlar BosDuzen kullanır, .m-kabuk yoktur)
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .sayfa-genis,
:root:not([data-cihaz="masaustu"]) .sayfa-dar {
  padding-left: max(var(--bo-kenar), var(--gv-sol));
  padding-right: max(var(--bo-kenar), var(--gv-sag));
}

/* ==========================================================================
   25. IZGARA KÜÇÜLME TUZAĞI

   ⚠️ ÖLÇÜMLE BULUNDU: 98 ekranın 71'inde içerik 360px ekranda 403px
   genişliğindeydi. Sayfa yatay KAYMIYORDU (.m-kabuk overflow:hidden onu
   gizliyordu) — yani kusur sessizdi: kullanıcı sağdaki içeriğin bir kısmını
   HİÇ göremiyordu ve kaydıramıyordu da.

   Sebep CSS ızgara/esnek kutu varsayılanı: ızgara öğesinin `min-width`
   değeri `auto`dur ve öğe, İÇERİĞİNDEN küçülmeyi reddeder. `minmax(0,1fr)`
   ve `min-width:0` bu reddi kaldırır.
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .m-kabuk {
  grid-template-columns: minmax(0, 1fr);
}
:root:not([data-cihaz="masaustu"]) .m-govde,
:root:not([data-cihaz="masaustu"]) .m-govde > * {
  min-width: 0;
  max-width: 100%;
}

/* ==========================================================================
   26. HAM TABLO — ortak Tablo bileşenini KULLANMAYAN ekranlar
   ⚠️ Pano ve birkaç ekran tabloyu `.tablo-sarmal` sarmalı olmadan yazıyor
   (ölçüldü: /, /giris, /kurulum'da 7 tablo dönüşmemişti). Bu tablolarda
   başlık adı yoktur, o yüzden kart etiketi basılamaz; yapılabilecek en
   dürüst şey onları YATAY KAYDIRILABİLİR bırakmaktır — sütun gizlemek
   veriyi saklamak olurdu.
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) table:not(.kart-tablo table) {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ⚠️ `white-space: nowrap` KALDIRILDI. Ham tablolarda satırı tek satırda
   tutmak için konmuştu ama `:not(.tablo-sarmal table)` beklendiği gibi
   ayırmadı ve KART tablolarına da bulaştı: kartlar 620px'e uzayıp ekranı
   taştı (ölçüldü: /da-siparis, /yonetim/adresler, /yonetim/kullanicilar).
   Kaydırma için `overflow-x: auto` zaten yeterli; nowrap yalnız görsel
   tercihti ve bedeli kart düzeninin bozulmasıydı.

   Kart tablosu her koşulda SARMALI olmalı — ham tablo kuralı ne olursa
   olsun. Bu yüzden ayrıca ve daha yüksek özgüllükle yazılır. */
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table,
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody,
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr,
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table > tbody > tr > td {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* ==========================================================================
   27. KÜÇÜLME TUZAĞI — İÇ İÇE KAPLAR

   ⚠️ 25. bölümdeki düzeltme YALNIZ `.m-govde`nin DOĞRUDAN çocuklarını
   kapsıyordu; ölçüldü: içerik `.kart > .kart-govde > .tablo-sarmal`
   zincirinde hâlâ 620px kalıyor ve sağı görünmüyordu. `min-width: auto`
   reddi her düzeyde ayrı ayrı kaldırılmalı.
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .m-govde .kart,
:root:not([data-cihaz="masaustu"]) .m-govde .kart-govde,
:root:not([data-cihaz="masaustu"]) .m-govde .kart-basi,
:root:not([data-cihaz="masaustu"]) .m-govde .tablo-sarmal,
:root:not([data-cihaz="masaustu"]) .m-govde .form-izgara,
:root:not([data-cihaz="masaustu"]) .m-govde .sayfa-genis,
:root:not([data-cihaz="masaustu"]) .m-govde .sayfa-dar,
:root:not([data-cihaz="masaustu"]) .m-govde .evrak-sekme-govde {
  min-width: 0;
  max-width: 100%;
}

/* ==========================================================================
   28. SÜPÜRMEDE ÇIKAN SON İKİ KUSUR (ölçüldü: 98 rotanın 8'i)

   (a) `.girdi-dugme` 38px ölçüldü — barkod kutusunun içindeki temizle/kamera
       düğmeleri. Bunlar el terminalinin EN ÇOK dokunulan düğmeleridir;
       38dp, eldivenli parmakla ıskalanır.

   (b) Ekranların ELLE yazdığı `.tablo-sarmal` (kart-tablo İŞARETSİZ) yatay
       kaydırılamıyordu: tablo 620px, sarmal kaydırmıyor → sağdaki sütunlar
       kullanıcı için HİÇ YOK. Kart yapamayız (başlık değişkeni yok, etiketsiz
       kalırdı); yapılacak doğru şey kaydırılabilir kılmaktır — veri saklanmaz.
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .girdi-dugme {
  min-width: var(--dokun);
  min-height: var(--dokun);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Kutunun içindeki düğme, metnin üstüne binmesin diye sağ dolgu büyür. */
:root:not([data-cihaz="masaustu"]) .girdi-sarmal > .girdi {
  padding-right: calc(var(--dokun) + var(--bo-2));
}

:root:not([data-cihaz="masaustu"]) .tablo-sarmal:not(.kart-tablo) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ==========================================================================
   29. TABLONUN ASGARİ GENİŞLİĞİ — kart kipinde kalkar

   ⚠️ ÖLÇÜMLE BULUNDU ve tahminle bulunamazdı: kart kipindeki tablonun
   hesaplanan `min-width` değeri 620px'ti. Masaüstünde bu doğrudur (dar
   sütunlar okunmaz olmasın diye tablo asgari bir genişlik ister ve sarmal
   onu yatay kaydırır). Kart kipinde ise satırlar zaten alt alta; 620px
   asgari genişlik kartı 310px'lik sarmalın DIŞINA taşırıyor ve `.kart`
   overflow:hidden olduğu için sağdaki içerik kullanıcı için HİÇ YOK.

   Zincir ölçümü: tablo 620 (min-width 620) › sarmal 310 › kart 312 ›
   sayfa 336 › gövde 360. Yani tek suçlu tablonun kendisiydi.
   ========================================================================== */
:root:not([data-cihaz="masaustu"]) .tablo-sarmal.kart-tablo > table {
  min-width: 0;
  width: 100%;
}

/* ==========================================================================
   30. SAYFA GEÇİŞİ — native yığın

   ⚠️ GEÇİŞ SÜSLEME DEĞİL, KONUM BİLGİSİDİR. Ani değişen bir ekran
   kullanıcıya "nereye gittiğini" söylemez; içeri girerken sağdan gelen,
   geri dönerken soldan gelen bir sayfa, yığında nerede olduğunu anlatır.
   Native uygulamaların "web değil" hissi büyük ölçüde buradan gelir.

   ⚠️ YALNIZ GİRİŞ ANİMASYONU VAR, ÇIKIŞ YOK. Blazor eski düğümü yeni düğüm
   çizilmeden ÖNCE kaldırır; çıkış animasyonu için iki sayfayı aynı anda
   DOM'da tutmak gerekirdi ve bu, ekranların `OnInitialized`'ını iki kez
   çalıştırıp veri isteklerini ikiye katlardı. Tek yönlü geçiş, ikiye
   katlanan sunucu isteğinden iyidir.

   ⚠️ SOLA/SAĞA KAYMA YOK, YALNIZ KISA BİR KAYMA + SOLMA. Tam genişlik
   kaydırma, `overflow-x` gizli olsa bile düşük güçlü el terminallerinde
   kare atlatıyor; 16px'lik kayma aynı bilgiyi verir ve 60 FPS'te akar.
   ========================================================================== */
/* ⚠️ `will-change: transform` KULLANILMAZ — ÖLÇÜMLE ÇIKTI.
   Transform (ve will-change:transform) bir öğeyi `position: fixed`
   torunları için KAPSAYICI BLOK yapar. Sonuç: FAB ve alt sayfalar
   ekrana değil, KAYDIRILAN İÇERİĞE göre konumlandı — ölçümde FAB'ın alt
   kenarı 915px'lik ekranda 2170px çıktı, yani düğme görünmez oldu.
   `will-change` kalıcı olduğu için kusur da kalıcıydı; animasyon
   bittiğinde `transform: none` olduğu için o kapsayıcı blok kalkar. */
.m-sayfa {
  animation: m-sayfa-ileri var(--hz-orta) var(--eg-giris);
}
.m-sayfa[data-yon="geri"] {
  animation-name: m-sayfa-geri;
}
@keyframes m-sayfa-ileri {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes m-sayfa-geri {
  from { transform: translateX(-16px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* `both` yerine `backwards`: animasyon BİTTİĞİNDE hiçbir transform kalmaz,
   böylece kapsayıcı blok da kalkar ve FAB yeniden ekrana göre konumlanır. */
.m-sayfa { animation-fill-mode: backwards; }

@media (prefers-reduced-motion: reduce) {
  .m-sayfa { animation: none; }
}

/* ==========================================================================
   31. TABLET — GEZİNME RAYI (Material 3 navigation rail)

   ⚠️ TABLET, TELEFONUN BÜYÜĞÜ DEĞİLDİR (kullanıcı kuralı: "Tablet başka").
   Material 3'ün geniş ekran kalıbı ALT gezinme değil YAN RAYDIR ve sebebi
   ergonomiktir: 10-12" bir cihaz iki elle, genellikle kenarlarından tutulur;
   baş parmaklar ekranın ALT ORTASINA değil YANLARINA yakındır. Alt şeridi
   olduğu gibi büyütmek, hedefleri parmakların uzağına taşırdı.

   ⚠️ DOM DEĞİŞMEZ, YALNIZ DÜZEN DEĞİŞİR. Aynı `.m-alt` işaretlemesi
   telefonda alt şerit, tablette yan raydır. Ayrı bir işaretleme yazmak iki
   kod yolu demekti ve biri güncellenmeden kalırdı.
   ========================================================================== */
:root[data-cihaz="tablet"] .m-kabuk {
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "ray ust"
    "ray govde";
}
:root[data-cihaz="tablet"] .m-ust   { grid-area: ust; }
:root[data-cihaz="tablet"] .m-govde { grid-area: govde; }

:root[data-cihaz="tablet"] .m-alt {
  grid-area: ray;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--bo-2);
  height: auto;
  width: 88px;
  padding: calc(var(--gv-ust) + var(--bo-3)) 0 var(--gv-alt);
  padding-left: var(--gv-sol);
  border-top: 0;
  border-right: 1px solid var(--cizgi, #dfe6ee);
  overflow-y: auto;
}
:root[data-cihaz="tablet"] .m-alt-bag {
  flex: 0 0 auto;
  min-height: var(--dokun-buyuk);
  padding: var(--bo-1) var(--bo-1);
}
/* Rayda alt gezinmenin alt boşluğu gerekmez — gövde artık onun yanında. */
:root[data-cihaz="tablet"] .m-govde {
  padding-bottom: calc(var(--bo-6) + var(--gv-alt));
}
/* FAB rayın üstüne binmesin. */
:root[data-cihaz="tablet"] .m-fab {
  bottom: calc(var(--gv-alt) + var(--bo-5));
}

/* ==========================================================================
   32. TABLET — İKİ SÜTUNLU KART LİSTESİ (yatayda)

   ⚠️ ÖLÇÜT YALNIZ "tablet" DEĞİL, YATAY OLMASI DA ŞART. Dikey duran bir
   10" tablette iki sütun, kart başına ~350px bırakır ve stok adları kesilir;
   yatayda ~600px kalır ve iki sütun gerçekten okunur. `data-yon` cihaz.js
   tarafından zaten yazılıyordu ama hiç kullanılmıyordu.
   ========================================================================== */
:root[data-cihaz="tablet"][data-yon="yatay"] .tablo-sarmal.kart-tablo > table > tbody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bo-2);
  align-items: start;
}
:root[data-cihaz="tablet"][data-yon="yatay"] .tablo-sarmal.kart-tablo > table > tbody > tr {
  margin-bottom: 0;
}

/* ==========================================================================
   33. ARAMALI SEÇİCİ ALT SAYFASI (uzun <select> listeleri)
   ⚠️ Kısa listelerde açılmaz: Android'in kendi <select> diyaloğu zaten
   native'dir ve onu taklit etmek bedava değildir. Eşik 12 seçenek; ölçüldü
   ki canlıda 256 select'in 165'i bunun üstünde (en büyüğü 57 adres).
   ========================================================================== */
.m-secici-sheet { max-height: 88dvh; }
.m-secici-ara { padding: 0 var(--bo-4) var(--bo-2); flex: 0 0 auto; }
.m-secici-ara .girdi { width: 100%; min-height: var(--dokun-buyuk); font-size: 16px; }
.m-secici-sheet .m-oge { min-height: var(--dokun-buyuk); }

/* Telefon/terminalde tam ekran: klavye açılınca yarım ekranda 2-3 satır
   kalır ve arama işe yaramaz (rehberlerde ölçülen aynı gerekçe). */
:root[data-cihaz="telefon"] .m-secici-sheet,
:root[data-cihaz="terminal"] .m-secici-sheet {
  top: 0; height: 100dvh; max-height: none;
  border-radius: 0;
  padding-top: var(--gv-ust);
}
:root[data-cihaz="telefon"] .m-secici-sheet .m-sheet-tutamac,
:root[data-cihaz="terminal"] .m-secici-sheet .m-sheet-tutamac { display: none; }

/* ==========================================================================
   34. BAŞA DÖN — uzun listeler
   ⚠️ FAB'IN ÜSTÜNDE durur, onun yerine geçmez: FAB birincil EYLEMDİR
   (yeni kayıt), bu ise gezinme yardımcısıdır. İkisini aynı yere koymak
   kullanıcıya yanlış düğmeye bastırırdı.
   ========================================================================== */
.m-basa-don {
  position: fixed;
  right: max(var(--bo-4), var(--gv-sag));
  bottom: calc(var(--alt-gezinme-tam) + var(--dokun-fab) + var(--bo-6));
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--dokun); height: var(--dokun);
  border: 0; border-radius: var(--yr-tam);
  background: var(--yuzey, #fff);
  color: var(--marka-800, #17406A);
  box-shadow: var(--yk-2);
  cursor: pointer; z-index: 6;
  animation: m-solgun var(--hz-orta) var(--eg-standart);
}
.m-basa-don svg { width: 22px; height: 22px; }
:root[data-klavye] .m-basa-don { display: none; }
.m-kabuk[data-gezinme="yok"] .m-basa-don {
  bottom: calc(var(--gv-alt) + var(--dokun-fab) + var(--bo-6));
}
:root[data-cihaz="tablet"] .m-basa-don {
  bottom: calc(var(--gv-alt) + var(--dokun-fab) + var(--bo-6));
}

/* ==========================================================================
   35. CİHAZ SINIFI SEÇİMİ (çekmece altı) — bölümlü denetim
   ⚠️ Açılır liste DEĞİL: dört seçenek var ve hepsi aynı anda görünmeli;
   kullanıcı hangi düzende olduğunu ve alternatifleri tek bakışta görsün.
   ========================================================================== */
.m-cihaz-secim {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bo-2);
  padding: var(--bo-1) var(--bo-4) var(--bo-2);
}
.m-cihaz-dugme {
  min-height: var(--dokun);
  border: 1px solid var(--cizgi-koyu, #b9c6d4);
  border-radius: var(--yr-tam);
  background: transparent;
  color: var(--metin, #16232f);
  font: var(--yz-etiket-b);
  cursor: pointer;
  position: relative; overflow: hidden;
}
.m-cihaz-dugme.etkin {
  background: var(--vurgu-acik, #D6EAF8);
  border-color: var(--vurgu-500, #2471A3);
  color: var(--marka-900, #102E4D);
}
.m-cekmece-ipucu {
  font: var(--yz-govde-k);
  color: var(--metin-2, #5b6b7d);
  padding: 0 var(--bo-4) var(--bo-5);
}

/* ==========================================================================
   36. ÇEVRİMDIŞI ŞERİDİ
   ⚠️ Uyarı rengi kullanılır, HATA rengi değil: çevrimdışı olmak bir arıza
   değildir — uygulama çalışmayı sürdürür ve kayıtları kuyruğa alır. Kırmızı
   bir şerit kullanıcıya "bozuldu" dedirtir ve işini bırakmasına yol açardı.
   ========================================================================== */
.m-cevrimdisi {
  display: flex; align-items: center; gap: var(--bo-2);
  min-height: 36px;
  padding: var(--bo-1) var(--bo-4);
  background: #FFF3E0;
  color: #E65100;
  font: var(--yz-etiket-o);
  z-index: 3;
}
.m-cevrimdisi svg { width: 18px; height: 18px; flex: 0 0 auto; }
.m-cevrimdisi-metin { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-color-scheme: dark) {
  .m-cevrimdisi { background: #3a2a10; color: #FFCC80; }
}

/* ==========================================================================
   37. content-visibility DENENDİ ve ÖLÇÜMLE ELENDİ — tekrar denemeyin

   Hipotez: 1000+ kartlı listelerde ekran dışı satırların düzenini ertelemek
   kaydırmayı hızlandırır. `content-visibility: auto` +
   `contain-intrinsic-size: auto 120px` uygulandı.

   ⚠️ ÖLÇÜM TERSİNİ SÖYLEDİ (4x yavaşlatılmış işlemci, /yonetim/adresler):
       content-visibility YOK  → 29,8 FPS
       content-visibility VAR  → 20,8 · 11,9 · 11,2 FPS (üç koşu)
   Sebep: sürekli ve hızlı kaydırmada tarayıcı, görünürlüğe giren her satırın
   düzenini O ANDA hesaplamak zorunda kalır; `auto` boyut hatırlaması da
   yeniden düzen tetikler. Yani erteleme kazanç değil, kaydırma anına
   yığılmış bir maliyet oldu.

   Kural kaldırıldı. Bu not DURUYOR ki aynı fikir "bariz iyileştirme" diye
   yeniden yazılmasın; bariz olan yanlıştı.

   Sıradaki doğru adım ölçülmüş hâliyle: sayfa başına kayıt sayısını
   düşürmek (sayfalama zaten var) ya da gerçek sanal liste — ama önce
   /yonetim/adresler'in neden 1273 DOM öğesi ürettiği incelenmeli.
   ========================================================================== */

/* Çekmece: oturumu kapat — mobilde eksikti (kullanıcı bulgusu 04.08.2026);
   düğme <button>, bağ değil: gezinme yok, eylem var. Tam genişlik + hata
   tonu: yanlışlıkla dokunulmasın diye listenin en altında ve ayrı grupta. */
.m-cikis { width: 100%; border: 0; background: transparent; text-align: left;
           font: inherit; cursor: pointer; color: var(--hata, #E53935); }
.m-cikis .m-oge-ikon { color: var(--hata, #E53935); }
.m-cikis .m-oge-alt { color: var(--metin-3); font-size: 12px; }

/* ==========================================================================
   MİKTAR SATIRI — el terminalinde düğme kutuyu EZİYORDU (ölçüldü 28.08.2026)

   `.miktar-satiri` masaüstünde doğru: miktar kutusu ile "Satıra ekle" yan yana
   durur ve bir satır yükseklik kazandırır (kullanıcı isteği). Ama düğme
   `flex: 0 0 auto` ile KÜÇÜLMEZ ve 360 px'lik el terminalinde 182 px yer
   kaplar; geriye kalanı kutu paylaşır.

   360×800 terminal profilinde ÖLÇÜLEN (Mal Çıkış → İşlem):
       Miktar kutusu        34 px      <- rakam okunmuyor
       "Satıra ekle" ∩ Birim fiyat  2352 px²  <- düğme alanın ÜSTÜNE biniyor
   Ekran görüntüsüyle de doğrulandı: düğme "Miktar" ve "Birim fiyat"
   kutularının üzerine oturmuş durumdaydı.

   ⚠️ ÇÖZÜM DÜĞMEYİ KÜÇÜLTMEK DEĞİL: dokunma hedefi zaten en az `--dokun`
   olmalı (eldivenli parmak). Doğru olan, dar ekranda düğmeyi KENDİ SATIRINA
   indirmektir — dikeyde bir satır kaybedilir, karşılığında iki alan da
   kullanılabilir olur.

   Deneyle ölçüldü (aynı ekran, aynı anda):
       miktar 34 → 141 px · birim fiyat 100 → 141 px · örtüşme 2352 → 0

   ⚠️ Bu kural TEK BAŞINA yetmez: aynı kusur masaüstünde de ölçüldü
   (miktar 60 px, örtüşme 2784 px²). Asıl düzeltme `kabuk.css`tedir
   (`.miktar-satiri > .dugme { flex: 0 1 auto; min-width: 0 }` +
   `.form-izgara > .alan { min-width: 0 }`); buradaki kural dar ekranda
   düğmeyi ayrıca KENDİ SATIRINA indirir, çünkü 141 px'lik bir sütunda
   yan yana durması kutuya okunabilir genişlik bırakmaz. */
:root[data-cihaz="telefon"] .miktar-satiri,
:root[data-cihaz="terminal"] .miktar-satiri {
  flex-wrap: wrap;
}
:root[data-cihaz="telefon"] .miktar-satiri > .dugme,
:root[data-cihaz="terminal"] .miktar-satiri > .dugme {
  flex: 1 1 100%;
  justify-content: center;
}