/* ==========================================================================
   Isparta Kültür Müdürlüğü Stok Takip Sistemi — tasarım sistemi

   Renkler masaüstü uygulamasının paletinden birebir alınmıştır: aynı kurum,
   aynı kimlik. Tokenlar açık temada :root üzerinde tanımlanır; koyu tema hem
   kullanıcının açık seçimiyle ([data-theme="dark"]) hem de işletim sistemi
   tercihiyle (prefers-color-scheme) devreye girer.

   Düzen mobil önceliklidir: temel stiller telefon içindir, geniş ekran
   kuralları 900px'ten sonra eklenir.
   ========================================================================== */

/* --- Tokenlar: açık tema ------------------------------------------------- */
:root {
  color-scheme: light;

  --renk-vurgu: #1B3B6F;
  --renk-vurgu-koyu: #122A50;
  --renk-vurgu-uzeri: #FFFFFF;

  --renk-zemin: #F3F5F9;
  --renk-yuzey: #FFFFFF;
  --renk-yuzey-soluk: #F7F9FC;
  --renk-kenarlik: #D5DBE5;
  --renk-kenarlik-yumusak: #E6EAF1;

  --renk-metin: #1C2333;
  --renk-metin-soluk: #3D4759;

  --renk-serit: #1B3B6F;
  --renk-serit-uzeri: #FFFFFF;
  --renk-serit-uzeri-soluk: #C9D6EA;
  --renk-serit-kenarlik: #4A6799;

  --renk-tehlike: #B3261E;
  --renk-tehlike-zemin: #FBECEA;
  --renk-uyari: #B26A00;
  --renk-uyari-zemin: #FDF3E3;
  --renk-basari: #1E6B45;
  --renk-basari-zemin: #E8F3ED;

  --renk-vurgulu-satir: #C8D8EF;
  --renk-secili-satir: #B4CCEC;
  --renk-alternatif-satir: #D9E2F1;
  --renk-izgara: #94A3B8;
  --renk-satir-secim: #AAC5E9;
  --renk-kritik-satir: #FDF3F2;
  --renk-pasif-satir: #F1F2F5;
  --renk-skt-yaklasan-satir: #FFF6E6;
  --renk-skt-kritik-satir: #FDE9E7;
  --renk-skt-gecmis-satir: #F6D9D6;

  --golge-kart: 0 1px 2px rgb(27 59 111 / 6%), 0 4px 16px rgb(27 59 111 / 6%);
  --golge-katman: 0 8px 32px rgb(27 59 111 / 18%);

  /* Logo: açık temada şerit koyu lacivert olduğu için gümüş varyant kullanılır
     (masaüstündeki kuralın aynısı). */
  --logo: url("img/logo-silver.png");

  /* Kart/yüzey üzerindeki logo şeritten bağımsızdır: orada zemin açıktır,
     gümüş varyant okunmaz. Giriş ekranları bu tokenı kullanır. */
  --logo-yuzey: url("img/logo.png");

  --yaricap: 10px;
  --yaricap-kucuk: 6px;
  --serit-yuksekligi: 56px;
  --menu-genisligi: 264px;

  --yazi-tipi: "Segoe UI", system-ui, -apple-system, "Noto Sans", Arial, sans-serif;
  --yazi-tipi-sayi: "Segoe UI", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* Koyu tema — kullanıcı açıkça seçtiğinde */
:root[data-theme="dark"] {
  color-scheme: dark;

  --renk-vurgu: #8FB4EC;
  --renk-vurgu-koyu: #B9D0F6;
  --renk-vurgu-uzeri: #0F131C;

  --renk-zemin: #0F131C;
  --renk-yuzey: #171D29;
  --renk-yuzey-soluk: #1D2431;
  --renk-kenarlik: #2E3747;
  --renk-kenarlik-yumusak: #262E3C;

  --renk-metin: #E7EBF3;
  --renk-metin-soluk: #BCC6D6;

  --renk-serit: #121826;
  --renk-serit-uzeri: #E7EBF3;
  --renk-serit-uzeri-soluk: #98A7C2;
  --renk-serit-kenarlik: #37425C;

  --renk-tehlike: #F2837A;
  --renk-tehlike-zemin: #3A201D;
  --renk-uyari: #E0A353;
  --renk-uyari-zemin: #352A18;
  --renk-basari: #5FC091;
  --renk-basari-zemin: #1A3227;

  --renk-vurgulu-satir: #2C384E;
  --renk-secili-satir: #35476B;
  --renk-alternatif-satir: #232C3E;
  --renk-izgara: #56637A;
  --renk-satir-secim: #3C5177;
  --renk-kritik-satir: #2E1D1C;
  --renk-pasif-satir: #1B202B;
  --renk-skt-yaklasan-satir: #2E2716;
  --renk-skt-kritik-satir: #33201E;
  --renk-skt-gecmis-satir: #402220;

  --golge-kart: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 28%);
  --golge-katman: 0 8px 32px rgb(0 0 0 / 55%);

  /* Koyu şeritte normal (renkli) logo doğru zemini bulur. */
  --logo: url("img/logo.png");

  /* Koyu yüzeyde ise gümüş varyant okunur. */
  --logo-yuzey: url("img/logo-silver.png");
}

/* Koyu tema — kullanıcı seçim yapmadıysa işletim sistemi tercihi.
   [data-theme="light"] varsa bu blok devreye girmez: açık seçim kazanır. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --renk-vurgu: #8FB4EC;
    --renk-vurgu-koyu: #B9D0F6;
    --renk-vurgu-uzeri: #0F131C;

    --renk-zemin: #0F131C;
    --renk-yuzey: #171D29;
    --renk-yuzey-soluk: #1D2431;
    --renk-kenarlik: #2E3747;
    --renk-kenarlik-yumusak: #262E3C;

    --renk-metin: #E7EBF3;
    --renk-metin-soluk: #BCC6D6;

    --renk-serit: #121826;
    --renk-serit-uzeri: #E7EBF3;
    --renk-serit-uzeri-soluk: #98A7C2;
    --renk-serit-kenarlik: #37425C;

    --renk-tehlike: #F2837A;
    --renk-tehlike-zemin: #3A201D;
    --renk-uyari: #E0A353;
    --renk-uyari-zemin: #352A18;
    --renk-basari: #5FC091;
    --renk-basari-zemin: #1A3227;

    --renk-vurgulu-satir: #2C384E;
    --renk-secili-satir: #35476B;
    --renk-alternatif-satir: #232C3E;
    --renk-izgara: #56637A;
    --renk-satir-secim: #3C5177;
    --renk-kritik-satir: #2E1D1C;
    --renk-pasif-satir: #1B202B;
    --renk-skt-yaklasan-satir: #2E2716;
    --renk-skt-kritik-satir: #33201E;
    --renk-skt-gecmis-satir: #402220;

    --golge-kart: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 28%);
    --golge-katman: 0 8px 32px rgb(0 0 0 / 55%);

    --logo: url("img/logo.png");
    --logo-yuzey: url("img/logo-silver.png");
  }
}

/* --- Temel --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--yazi-tipi);
  font-size: 15px;
  line-height: 1.55;
  color: var(--renk-metin);
  background: var(--renk-zemin);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }

a { color: var(--renk-vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

/* Klavyeyle gezinenler için görünür odak halkası; fareyle tıklamada çıkmaz. */
:focus-visible {
  outline: 2px solid var(--renk-vurgu);
  outline-offset: 2px;
  border-radius: var(--yaricap-kucuk);
}

/* Yönlendirmeden sonra odak sayfa başlığına taşınır (FocusOnNavigate); bu,
   ekran okuyucunun yeni sayfayı okumaya baştan başlaması içindir. Gören
   kullanıcı için başlığın etrafındaki halka yalnız gürültüdür: başlık zaten
   tıklanabilir bir öğe değildir. */
h1:focus, h1:focus-visible { outline: none; }

/* Hareket hassasiyeti olan kullanıcılar için geçişler kapatılır. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Ekran okuyucuya özel metin */
.gizli-metin {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Kabuk düzeni -------------------------------------------------------- */
.kabuk {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Üst şerit: her genişlikte sabit, içerik altında kayar. */
.serit {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .75rem;
  height: var(--serit-yuksekligi);
  padding: 0 .75rem;
  background: var(--renk-serit);
  color: var(--renk-serit-uzeri);
}

.serit__marka {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.serit__marka:hover { text-decoration: none; }

/* Logo arkasına plaka konmaz; temaya uyan varyant doğrudan gösterilir. */
.serit__logo {
  width: 40px;
  height: 40px;
  flex: none;
  background-image: var(--logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.serit__adlar { min-width: 0; display: none; }

.serit__kurum {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serit__sistem {
  display: block;
  font-size: .75rem;
  color: var(--renk-serit-uzeri-soluk);
  white-space: nowrap;
}

.serit__bosluk { flex: 1 1 auto; }

.serit__eylemler { display: flex; align-items: center; gap: .4rem; }

.serit__kullanici { display: none; text-align: right; line-height: 1.25; }
.serit__kullanici-ad { font-weight: 500; font-size: .9rem; }
.serit__kullanici-rol { font-size: .75rem; color: var(--renk-serit-uzeri-soluk); }

/* Şerit düğmeleri: dokunma hedefi 44px'in altına düşmez. */
.serit-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .6rem;
  font: inherit;
  font-size: .85rem;
  color: var(--renk-serit-uzeri);
  background: transparent;
  border: 1px solid var(--renk-serit-kenarlik);
  border-radius: var(--yaricap-kucuk);
  cursor: pointer;
  transition: background-color .15s ease;
}

.serit-dugme:hover { background: rgb(255 255 255 / 10%); }
.serit-dugme__etiket { display: none; }

/* --- Yan menü ------------------------------------------------------------ */
.govde { display: flex; flex: 1 1 auto; min-height: 0; }

/* Telefonda menü çekmecedir: ekranın dışında durur, açılınca üzerine biner. */
.menu {
  position: fixed;
  inset: var(--serit-yuksekligi) auto 0 0;
  z-index: 25;
  width: var(--menu-genisligi);
  max-width: 86vw;
  padding: .75rem;
  overflow-y: auto;
  background: var(--renk-yuzey);
  border-right: 1px solid var(--renk-kenarlik);
  transform: translateX(-100%);
  transition: transform .2s ease;
}

/* Çekmece bir onay kutusuyla açılır. JavaScript'e bağlanmamasının nedeni:
   giriş ekranı gibi statik sunulan sayfalarda henüz bir Blazor devresi
   yoktur; menünün orada da açılması gerekir. */
.menu-anahtari { position: absolute; opacity: 0; pointer-events: none; }

.menu-anahtari:checked ~ .kabuk .menu {
  transform: translateX(0);
  box-shadow: var(--golge-katman);
}

.menu__perde {
  position: fixed;
  inset: var(--serit-yuksekligi) 0 0 0;
  z-index: 24;
  display: none;
  background: rgb(15 19 28 / 55%);
  border: 0;
  padding: 0;
}

.menu-anahtari:checked ~ .kabuk .menu__perde { display: block; }

.menu__baslik {
  margin: 1rem .5rem .35rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--renk-metin-soluk);
}

.menu__baglanti {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  padding: .5rem .65rem;
  margin-bottom: 2px;
  border-radius: var(--yaricap-kucuk);
  color: var(--renk-metin);
  text-decoration: none;
  transition: background-color .12s ease;
}

.menu__baglanti:hover {
  background: var(--renk-yuzey-soluk);
  text-decoration: none;
}

.menu__baglanti.active {
  background: var(--renk-vurgulu-satir);
  color: var(--renk-metin);
  font-weight: 600;
}

.menu__baglanti svg { flex: none; width: 20px; height: 20px; }

/* --- İçerik -------------------------------------------------------------- */
/* İçerik ve alt bilgi tek bir sütundur: alt bilgi menünün yanında değil,
   içeriğin altında durur ve kısa sayfalarda da ekranın altına yapışır. */
.icerik-sutunu {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.icerik {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1rem;
}

.sayfa-basligi { margin-bottom: 1rem; }
.sayfa-basligi p { margin: 0; color: var(--renk-metin-soluk); font-size: .9rem; }

/* --- Alt bilgi ----------------------------------------------------------- */
.alt-bilgi {
  padding: .75rem 1rem;
  font-size: .75rem;
  color: var(--renk-metin-soluk);
  text-align: center;
  border-top: 1px solid var(--renk-kenarlik-yumusak);
}

/* --- Bileşenler ---------------------------------------------------------- */
.kart {
  padding: 1rem;
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenarlik-yumusak);
  border-radius: var(--yaricap);
  box-shadow: var(--golge-kart);
}

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .5rem 1rem;
  font: inherit;
  font-weight: 500;
  color: var(--renk-metin);
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenarlik);
  border-radius: var(--yaricap-kucuk);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.dugme:hover:not(:disabled) { background: var(--renk-yuzey-soluk); }
.dugme:disabled { opacity: .55; cursor: not-allowed; }

.dugme--vurgu {
  color: var(--renk-vurgu-uzeri);
  background: var(--renk-vurgu);
  border-color: var(--renk-vurgu);
}

.dugme--vurgu:hover:not(:disabled) {
  background: var(--renk-vurgu-koyu);
  border-color: var(--renk-vurgu-koyu);
}

.dugme--tehlike {
  color: var(--renk-tehlike);
  border-color: var(--renk-tehlike);
  background: var(--renk-tehlike-zemin);
}

.alan { display: block; margin-bottom: .85rem; }
.alan__etiket { display: block; margin-bottom: .3rem; font-size: .85rem; font-weight: 500; }

.girdi, .secim {
  width: 100%;
  min-height: 44px;
  padding: .5rem .65rem;
  font: inherit;
  color: var(--renk-metin);
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenarlik);
  border-radius: var(--yaricap-kucuk);
}

.girdi:hover, .secim:hover { border-color: var(--renk-vurgu); }

/* Tarayıcının kendi açılır oku koyu temada okunmuyordu; ok bir arka plan
   görüntüsü olarak çizilir ve metin rengini izler. */
.secim {
  appearance: none;
  padding-right: 2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05rem center, right .75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.rozet {
  display: inline-flex;
  align-items: center;
  padding: .15rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 999px;
}

.rozet--tehlike { color: var(--renk-tehlike); background: var(--renk-tehlike-zemin); }
.rozet--uyari { color: var(--renk-uyari); background: var(--renk-uyari-zemin); }
.rozet--basari { color: var(--renk-basari); background: var(--renk-basari-zemin); }

/* Tablolar telefonda taşabilir; yatay kaydırma yalnız tabloya aittir,
   sayfanın kendisi yana kaymaz. */
.tablo-kutusu {
  overflow-x: auto;
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenarlik-yumusak);
  border-radius: var(--yaricap);
}

/* Tablo görünümü masaüstündeki DataGrid'in birebir karşılığıdır: tek/çift
   satır zemini, her yönde ızgara çizgisi, üzerine gelinen ve seçilen satır.
   Amaç uzun listede satırın ve sütunun gözle takip edilebilmesidir. */
.tablo { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.tablo th, .tablo td {
  padding: .5rem .75rem;
  text-align: left;
  white-space: nowrap;
  border: 1px solid var(--renk-izgara);
}
/* Dış çerçeveyi kutu çizer; tablonun kendi kenar çizgisi ikinci bir çerçeve
   olurdu. */
.tablo tr > :first-child { border-left: 0; }
.tablo tr > :last-child { border-right: 0; }
.tablo thead tr:first-child > * { border-top: 0; }
.tablo tbody tr:last-child > * { border-bottom: 0; }

.tablo thead th {
  /* Başlık tablonun en çok okunan satırıdır; ikincil renk yerine ana yazı
     rengini alır ki sütun adları uzaktan da seçilebilsin. */
  font-weight: 600;
  color: var(--renk-metin);
  background: var(--renk-yuzey-soluk);
}

.tablo tbody tr:nth-child(even) td { background: var(--renk-alternatif-satir); }

/* Durum zeminleri (kritik stok, pasif kayıt) tek/çift şeridini ezer. */
.tablo tbody tr.satir--kritik td { background: var(--renk-kritik-satir); }
.tablo tbody tr.satir--pasif td { background: var(--renk-pasif-satir); color: var(--renk-metin-soluk); }
.tablo tbody tr.satir--skt-yaklasan td { background: var(--renk-skt-yaklasan-satir); }
.tablo tbody tr.satir--skt-kritik td { background: var(--renk-skt-kritik-satir); }
.tablo tbody tr.satir--skt-gecmis td { background: var(--renk-skt-gecmis-satir); }

.tablo tbody tr:hover td { background: var(--renk-yuzey-soluk); }

/* Seçili satır: tıklanan satır (tablo.js) ya da düzenlenmekte olan kayıt.
   Renk tek başına yeterli işaret değildir; ilk hücredeki şerit de seçimi
   gösterir. */
.tablo tbody tr.isaretli td,
.tablo tbody tr.secili td {
  background: var(--renk-satir-secim);
  color: var(--renk-vurgu-koyu);
}
.tablo tbody tr.isaretli td:first-child,
.tablo tbody tr.secili td:first-child { box-shadow: inset 3px 0 0 var(--renk-vurgu); }
.tablo .sayi { font-family: var(--yazi-tipi-sayi); font-variant-numeric: tabular-nums; text-align: right; }

.bos-durum {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--renk-metin-soluk);
}

/* Blazor'ın bağlantı/hata bildirimleri: varsayılan görünümleri İngilizce ve
   tasarımın dışında kalıyordu. */
#components-reconnect-modal {
  position: fixed;
  inset: auto 1rem 1rem;
  z-index: 50;
  padding: 1rem;
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenarlik);
  border-radius: var(--yaricap);
  box-shadow: var(--golge-katman);
}

#blazor-error-ui {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: none;
  padding: .75rem 1rem;
  color: var(--renk-tehlike);
  background: var(--renk-tehlike-zemin);
  border-top: 1px solid var(--renk-tehlike);
}

#blazor-error-ui .kapat { float: right; cursor: pointer; font-weight: 700; }

/* --- Bildirim kutuları --------------------------------------------------- */
.bildirim {
  margin-bottom: .85rem;
  padding: .65rem .8rem;
  font-size: .9rem;
  border: 1px solid;
  border-radius: var(--yaricap-kucuk);
}

.bildirim--tehlike {
  color: var(--renk-tehlike);
  background: var(--renk-tehlike-zemin);
  border-color: var(--renk-tehlike);
}

.bildirim--uyari {
  color: var(--renk-uyari);
  background: var(--renk-uyari-zemin);
  border-color: var(--renk-uyari);
}

.bildirim--basari {
  color: var(--renk-basari);
  background: var(--renk-basari-zemin);
  border-color: var(--renk-basari);
}

/* Alan altı yardımcı metinleri. Hata kırmızı, ipucu soluk: renk tek başına
   ayırt edici değil, metin de farklı. */
.alan__hata { display: block; margin-top: .3rem; font-size: .8rem; color: var(--renk-tehlike); }
.alan__ipucu { margin: -.35rem 0 1rem; font-size: .8rem; color: var(--renk-metin-soluk); }

.girdi.invalid, .secim.invalid { border-color: var(--renk-tehlike); }

/* Şerit içindeki çıkış formu düğmeden başka bir şey çizmemeli. */
.serit__cikis { display: contents; }

/* --- Süzgeç çubuğu ------------------------------------------------------- */
.suzgec { margin-bottom: 1rem; }

/* Telefonda tek sütun, ekran genişledikçe sütun eklenir. Izgara kullanılır
   çünkü esnek kutuda son satırda tek kalan süzgeç bütün satırı kaplardı. */
.suzgec__satir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0 .75rem;
}

.suzgec__satir .alan { margin-bottom: .75rem; }

/* Arama kutusu iki sütun kadar yer kaplar; ürün adları uzundur. */
@media (min-width: 900px) {
  .suzgec__arama { grid-column: span 2; }
}

.suzgec__satir--alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: .25rem;
  border-top: 1px solid var(--renk-kenarlik-yumusak);
}

.suzgec__bosluk { flex: 1 1 auto; }

/* Onay kutusu ve yazısı tek bir dokunma hedefi olur; telefonda küçük kutuyu
   nişan almak zordur. */
.onay {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  font-size: .9rem;
  cursor: pointer;
}

.onay input { width: 18px; height: 18px; accent-color: var(--renk-vurgu); }

/* Uzun metinli sütunlar (ürün adı, kategori yolu, marka) satır sarabilir.
   Tablonun geneli nowrap'tir: sayı ve kod sütunlarının bölünmemesi gerekir. */
.tablo .sarabilir { white-space: normal; min-width: 11rem; }

.liste-ozeti {
  margin: 0 0 .5rem;
  font-size: .85rem;
  color: var(--renk-metin-soluk);
}

/* --- Stok ekranları (giriş, çıkış, transfer) ------------------------------ */
/* Telefonda ürün seçici üstte, form altta; geniş ekranda yan yana iki sütun. */
.stok-duzen { display: grid; gap: 1rem; align-items: start; }

@media (min-width: 1100px) {
  .stok-duzen { grid-template-columns: 22rem 1fr; }

  /* Seçici sayfayla birlikte kaymaz: uzun bir hareket listesinde bile ürün
     listesi görünür kalmalı. */
  .secici { position: sticky; top: 1rem; }
}

.stok-duzen__sag { display: grid; gap: 1rem; }

.secici {
  padding: 1rem;
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenarlik-yumusak);
  border-radius: var(--yaricap);
  box-shadow: var(--golge-kart);
}

.secici__bilgi { margin: 0 0 .5rem; font-size: .8rem; color: var(--renk-metin-soluk); }

.secici__liste {
  max-height: 24rem;
  overflow-y: auto;
  border: 1px solid var(--renk-kenarlik-yumusak);
  border-radius: var(--yaricap-kucuk);
}

/* Satırın tamamı tıklanabilir: telefonda küçük bir radyo düğmesini nişan
   almak zordur. Düğme yine de görünür durur — hangi satırın seçili olduğu
   yalnız arka plan renginden anlaşılmamalı. */
.secici__satir {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 .5rem;
  padding: .55rem .7rem;
  cursor: pointer;
}

.secici__radyo {
  grid-row: span 2;
  align-self: center;
  width: 16px;
  height: 16px;
  accent-color: var(--renk-vurgu);
}

.secici__satir + .secici__satir { border-top: 1px solid var(--renk-kenarlik-yumusak); }
.secici__satir:hover { background: var(--renk-yuzey-soluk); }

.secici__satir--secili { background: var(--renk-vurgulu-satir); }
.secici__satir--secili:hover { background: var(--renk-secili-satir); }

/* Klavyeyle gezenin nerede olduğunu görmesi gerekir; girdi gizli olduğu için
   çerçeve satıra çizilir. */
.secici__satir:has(input:focus-visible) { outline: 2px solid var(--renk-vurgu); outline-offset: -2px; }

.secici__ad { font-weight: 500; }
.secici__stok { grid-row: span 2; align-self: center; font-variant-numeric: tabular-nums; }

.secici__alt {
  grid-column: 2;
  font-size: .75rem;
  color: var(--renk-metin-soluk);
}

/* Form alanları: telefonda tek sütun, sonra iki sütun. */
.form-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 .75rem;
}

.form-izgara__genis { grid-column: 1 / -1; }

.ozet__ad { margin: 0 0 .15rem; font-size: 1.1rem; }
.ozet__alt { margin: 0 0 .9rem; font-size: .85rem; color: var(--renk-metin-soluk); }
.ozet__baslik { margin: 1.1rem 0 .5rem; font-size: .95rem; }
.ozet__bos { margin: 0; font-size: .85rem; color: var(--renk-metin-soluk); }

.ozet__kunye {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .75rem;
  margin: 0 0 .5rem;
}

.ozet__kunye dt { font-size: .75rem; color: var(--renk-metin-soluk); }
.ozet__kunye dd { margin: .1rem 0 0; font-weight: 500; }

.dagilim { margin: 0; padding: 0; list-style: none; font-size: .9rem; }

.dagilim li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
}

.dagilim li + li { border-top: 1px solid var(--renk-kenarlik-yumusak); }

/* Geri alma gibi geri dönüşü olmayan işlemler tek tıkla olmaz; onay satırı
   düğmenin yerine geçer. */
.onay-serisi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
}

/* --- Giriş / kurulum ekranları ------------------------------------------- */
.giris-sayfa {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem;
}

/* Tema düğmesi bu ekranlarda kabuk olmadığı için köşede durur. */
.giris-tema {
  position: absolute;
  inset-block-start: .75rem;
  inset-inline-end: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 40px;
  padding: .4rem .7rem;
  font: inherit;
  color: var(--renk-metin-soluk);
  background: transparent;
  border: 1px solid var(--renk-kenarlik);
  border-radius: var(--yaricap-kucuk);
  cursor: pointer;
}

.giris-tema:hover { background: var(--renk-yuzey); }

.giris-kart {
  width: 100%;
  max-width: 26rem;
  padding: 1.5rem;
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenarlik-yumusak);
  border-radius: var(--yaricap);
  box-shadow: var(--golge-kart);
}

.giris-marka {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--renk-kenarlik-yumusak);
}

/* Logo varyantı şeritteki kuralın aynısıdır; token temayı izler. */
.giris-logo {
  flex: none;
  width: 52px;
  height: 52px;
  background: var(--logo-yuzey) center / contain no-repeat;
}

.giris-kurum { font-size: .8rem; font-weight: 600; letter-spacing: .03em; }
.giris-sistem { font-size: .95rem; color: var(--renk-metin-soluk); }

.giris-baslik { margin: 0 0 .25rem; font-size: 1.25rem; }
.giris-aciklama { margin: 0 0 1.1rem; font-size: .9rem; color: var(--renk-metin-soluk); }

.giris-dugme { width: 100%; margin-top: .25rem; }

.giris-vazgec {
  display: block;
  margin-top: .9rem;
  font-size: .875rem;
  text-align: center;
  color: var(--renk-metin-soluk);
}

.giris-alt { font-size: .8rem; color: var(--renk-metin-soluk); }

/* --- Geniş ekran --------------------------------------------------------- */
@media (min-width: 900px) {
  :root { --serit-yuksekligi: 64px; }

  .serit { padding: 0 1.25rem; gap: 1rem; }
  .serit__logo { width: 48px; height: 48px; }
  .serit__adlar { display: block; }
  .serit__kullanici { display: block; }
  .serit-dugme__etiket { display: inline; }
  .menu-dugmesi { display: none; }

  /* Menü artık çekmece değil, düzenin kalıcı bir sütunu. */
  .menu {
    position: sticky;
    top: var(--serit-yuksekligi);
    inset-inline-start: auto;
    height: calc(100dvh - var(--serit-yuksekligi));
    transform: none;
    box-shadow: none;
    flex: none;
  }

  /* Geniş ekranda çekmece yoktur; onay kutusu işaretli kalmış olsa bile
     menü sütunda durur ve perde hiç görünmez. */
  .menu-anahtari:checked ~ .kabuk .menu { box-shadow: none; }
  .menu__perde,
  .menu-anahtari:checked ~ .kabuk .menu__perde { display: none; }

  .icerik { padding: 1.5rem 2rem; }
}

@media (min-width: 1400px) {
  .icerik { padding: 1.75rem 2.5rem; }
}

/* --- Sekmeler (Tanımlar hub'ı) ------------------------------------------- */
/* Yan menüyü şişirmemek için bütün tanım ekranları tek sayfada toplanır. */
.sekmeler {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 1rem;
  padding: .3rem;
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-kenarlik-yumusak);
  border-radius: var(--yaricap);
}

.sekme {
  padding: .45rem .8rem;
  font: inherit;
  font-size: .88rem;
  color: var(--renk-metin-soluk);
  background: none;
  border: 0;
  border-radius: var(--yaricap-kucuk);
  cursor: pointer;
}

.sekme:hover { background: var(--renk-yuzey-soluk); color: var(--renk-metin); }

.sekme--etkin {
  color: #fff;
  background: var(--renk-vurgu);
}

.sekme--etkin:hover { background: var(--renk-vurgu); color: #fff; }

.sekme-ipucu { margin: -.5rem 0 1rem; font-size: .85rem; color: var(--renk-metin-soluk); }

/* --- Liste + form ikilisi ------------------------------------------------- */
/* Tanım ekranlarının ortak düzeni: solda kayıtlar, sağda tek kayıt formu.
   Telefonda alt alta düşer. */
.tanim-duzen { display: grid; gap: 1rem; align-items: start; }

/* İzgara gözeleri varsayılan olarak içeriğinden dar olamaz; geniş bir tablo
   böyle olunca sayfayı yatayda taşırır. min-width sıfırlanmazsa tablonun
   kendi kaydırma çubuğu hiç devreye girmez. */
.tanim-duzen > * { min-width: 0; }

/* Yan yana düzene stok ekranlarından daha geç geçilir: bu sayfalarda solda
   çok sütunlu bir tablo var ve 22rem'lik form ona yer bırakmayınca tablo
   kendi içinde kayıyor, yani kullanıcı satırın sonunu göremiyor. */
@media (min-width: 1400px) {
  .tanim-duzen { grid-template-columns: minmax(0, 1fr) 22rem; }
  .tanim-duzen__form { position: sticky; top: 1rem; }
}

/* --- Ürün kartı -------------------------------------------------------- */
/* Kart, listenin yerine alanın tamamında açılır (masaüstündeki gibi).
   Üç grup yan yana sığmazsa kendiliğinden alta düşer; telefonda tek sütun. */
.urun-karti { display: grid; gap: 1rem; }

.urun-karti__izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .5rem 1.75rem;
  margin-top: .5rem;
}

.urun-karti__bolum {
  margin: 0 0 .9rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--renk-kenarlik-yumusak);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--renk-metin-soluk);
}

.urun-karti__onay { margin-bottom: 1rem; }

/* Etiket sayısı ile indirme düğmesi aynı satırda; düğme girdiyle hizalanır,
   ipucunun altına değil. */
.urun-karti__etiket { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: flex-start; }
.urun-karti__etiket .alan { flex: 0 1 14rem; }
.urun-karti__etiket .dugme { margin-top: 1.45rem; }

/* Tablo içi eylem düğmeleri satırı şişirmemeli. */
.dugme--kucuk { padding: .25rem .55rem; font-size: .78rem; }

.eylem-serisi { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.eylem-serisi--sag { justify-content: flex-end; margin-top: .9rem; }

/* Tablo içindeki eylemler sarmamalı: alt alta düşen iki düğme satırı iki
   katına çıkarır ve liste okunmaz hâle gelir. Dar ekranda satırın kendisi
   zaten yatayda kayıyor. */
.tablo .eylem-serisi { flex-wrap: nowrap; margin-top: 0; }

.tablo .eylemler { text-align: right; }

.kart__baslik {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 .75rem;
}

.kart__baslik h2 { margin: 0; }

.kilavuz { margin: 0 0 .9rem; font-size: .85rem; color: var(--renk-metin-soluk); }


/* Uzun onay kutusu listeleri (markanın geçerli olduğu kategoriler) formu
   sayfa boyu uzatmamalı; tek sütunda kalır ve kendi içinde kaydırılır. */
fieldset .onay-serisi {
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  max-height: 16rem;
  overflow-y: auto;
}

/* --- Barkod tarayıcı ------------------------------------------------------ */
.tarayici { display: grid; gap: .5rem; margin-top: .25rem; }

.tarayici__dugme { display: inline-flex; align-items: center; gap: .4rem; justify-self: start; }
.tarayici__dugme svg { width: 18px; height: 18px; }

/* Önizleme sabit oranda durur: yükseklik kareden kareye değişirse form
   altındaki her şey zıplar. */
.tarayici__pencere {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #000;
  border-radius: var(--yaricap-kucuk);
}

.tarayici__video { width: 100%; height: 100%; object-fit: cover; }

/* Nişan çerçevesi: kullanıcı barkodu nereye tutacağını bilmeli. */
.tarayici__nisan {
  position: absolute;
  inset: 22% 12%;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: var(--yaricap-kucuk);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
}

.tarayici__bilgi { margin: 0; font-size: .8rem; color: var(--renk-metin-soluk); }
.tarayici__hata { margin: 0; font-size: .8rem; color: var(--renk-tehlike); }

/* --- İkonlar --------------------------------------------------------------
   Masaüstündeki IconStyle ölçüleri: 20 px temel, 16 px küçük, sayfa başlığında
   24 px. Renk metinden gelir (currentColor). */
.ikon { width: 20px; height: 20px; flex: none; }
.ikon--kucuk { width: 16px; height: 16px; color: var(--renk-metin-soluk); }
.ikon--sayfa { width: 28px; height: 28px; color: var(--renk-vurgu); }

/* --- Gösterge paneli -------------------------------------------------------
   Masaüstündeki DashboardView'un karşılığı; ölçüler oradaki stillerden
   alınmıştır (HeadingTextStyle, MetricCardStyle, MetricValueStyle). */
.panel-basligi {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
}

.panel-basligi__ad { display: flex; gap: .75rem; align-items: flex-start; }
.panel-basligi__ad .ikon--sayfa { margin-top: .2rem; }
.panel-basligi h1 { margin: 0 0 .25rem; font-size: 1.375rem; font-weight: 600; }
.panel-basligi p { font-size: .8125rem; }

/* Telefonda iki, tablette üç, geniş ekranda masaüstündeki gibi altı sütun. */
.metrikler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .metrikler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .metrikler { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.metrik {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: .125rem;
  padding: .75rem .875rem;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.metrik__etiket {
  display: flex;
  gap: .45rem;
  align-items: center;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--renk-metin);
}

/* Normal sayılar kurumsal lacivert; uyarı kartlarının sayısı uyarı yokken
   soluk kalır, uyarı varken kendi anlam rengini alır. */
.metrik__deger {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--renk-vurgu);
  font-variant-numeric: tabular-nums;
}

.metrik--uyari-karti .metrik__deger { color: var(--renk-metin-soluk); }

.metrik--baglanti:hover { border-color: var(--renk-kenarlik); }
.metrik--baglanti:focus-visible { outline: 2px solid var(--renk-vurgu); outline-offset: 2px; }

.metrik--tehlike { --metrik-renk: var(--renk-tehlike); --metrik-zemin: var(--renk-tehlike-zemin); }
.metrik--uyari { --metrik-renk: var(--renk-uyari); --metrik-zemin: var(--renk-uyari-zemin); }

.metrik--alarm .metrik__deger { color: var(--metrik-renk); }

/* Uyarı vurgusu: kartın zeminine serilen, yavaşça açılıp kapanan bir tabaka.
   Yazının kendisi oynatılmaz, okunurluk bozulmasın diye vurgu zeminde kalır.
   Ritim ve doygunluk masaüstündekiyle aynıdır (0 → 0,55; tam çevrim ~2,6 sn,
   sinüs yumuşatma): gün boyu açık ekranda nefes alma hissi verir. */
.metrik--alarm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1.5px solid var(--metrik-renk);
  border-radius: inherit;
  background: var(--metrik-zemin);
  opacity: 0;
  pointer-events: none;
  animation: metrik-nefes 1.3s ease-in-out infinite alternate;
}

@keyframes metrik-nefes {
  from { opacity: 0; }
  to { opacity: .55; }
}

/* Hareket hassasiyetinde genel kural animasyonu 0,01 ms'ye indirir; sonsuz
   bir döngüde bu, sakin nefes yerine hızlı titreme demektir. Burada vurgu
   durağan gösterilir: uyarı kaybolmaz, yalnız hareket etmez. */
@media (prefers-reduced-motion: reduce) {
  .metrik--alarm::before { animation: none !important; opacity: .55; }
}

/* Tabloyu taşıyan kart: başlık kartın içinde, tablo kenardan kenara. */
.kart--tablo { padding: 0; overflow: hidden; }
.kart--tablo .tablo-kutusu { border: 0; border-top: 1px solid var(--renk-izgara); border-radius: 0; }
.kart--tablo .bos-durum { margin: 0 1rem 1rem; }

.bolum-basligi {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: 1rem 1.125rem .625rem;
}

.bolum-basligi h2 { margin: 0; font-size: .9375rem; font-weight: 600; }

/* Panel başlığındaki düğme grubu: masaüstündeki gibi sağda yan yana. */
.panel-basligi__eylemler { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Yan menüde olmayan alt sayfalara (SKT Uyarıları, Hareket Geçmişi) Ana
   Sayfa'dan gelinir; dönüş bağlantısı başlığın üstünde durur. */
.geri-baglantisi {
  display: inline-flex;
  gap: .3rem;
  align-items: center;
  margin-bottom: .5rem;
  font-size: .85rem;
  color: var(--renk-vurgu);
  text-decoration: none;
}
.geri-baglantisi:hover { text-decoration: underline; }

.ozet-serisi { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.ozet-serisi .kilavuz { margin: 0 0 0 auto; }
a.dugme { text-decoration: none; }