:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --panel: #ffffff;
  --text: #1f2937;
  --muted: #667085;
  --line: #dde3ec;
  --brand: #667eea;
  --brand-dark: #4f46b8;
  --accent: #fd7e14;
  --nav-start: #667eea;
  --nav-end: #764ba2;
  --danger: #b42318;
  --ok: #027a48;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 10px 40px rgba(0, 0, 0, 0.16);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a {
  color: var(--brand);
  text-decoration: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 18px;
  background: linear-gradient(135deg, var(--nav-start) 0%, var(--nav-end) 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Menu dugmesi en solda, TEK BASINA bir kutuda. Kutunun genisligi dugmenin
   genisligi kadar ve hicbir sekmede degismiyor, bu yuzden dugme sekme
   degistikce yer degistirmiyor. Menu paneli de bu kutuya gore konumlaniyor. */
.topbar-menu {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* Marka bloku ortadaki esnek alan. Sagdaki "Ana ekran" dugmesi gelip
   gittiginde daralip genisleyen taraf burasi olsun -- soldaki dugme degil. */
.topbar-brand {
  flex: 1 1 auto;
  min-width: 0;
}

.brand {
  font-weight: 700;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-line {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-actions {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Dashboard'da icerigi bos kalabiliyor; bos kutu topbar'in 12px gap'ini
   yine de harcardi. */
.top-actions:empty {
  display: none;
}

.approval-alert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: #fd7e14;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  animation: alertPulse 1.1s infinite;
}

.approval-alert:hover {
  color: #fff;
  filter: brightness(0.96);
}

.approval-alert strong {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  color: #b54708;
}

.menu-toggle {
  position: relative;
  display: inline-grid;
  gap: 4px;
  place-content: center;
  width: 42px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
}

.menu-toggle em {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #fd7e14;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  animation: alertPulse 1.1s infinite;
}

/* "Ana ekran" dugmesi. Eski "X" bunun yerindeydi: ne yaptigini soylemiyordu,
   kucuk bir hedefti ve sag ustte absolute konumlanip icerigin uzerine
   biniyordu.
   Artik topbar'in kendi akisinda -- topbar `position: sticky` oldugu icin
   sayfanin neresinde olursan ol KAYDIRMADAN erisilebilir. */
.home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.home-button:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  filter: none;
}

.top-menu {
  position: absolute;
  top: calc(100% + 9px);
  /* Dugme solda oldugu icin panel de soldan aciliyor. */
  left: 0;
  right: auto;
  z-index: 25;
  display: grid;
  min-width: 190px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.top-menu[hidden] {
  display: none;
}

.top-menu a {
  padding: 11px 13px;
  border-bottom: 1px solid #edf1f7;
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
}

.top-menu a:last-child {
  border-bottom: 0;
}

/* ACIK OLAN SAYFA menude isaretli. Menude aktif gosterge YOKTU: kullanici
   menuyu acinca nerede oldugunu goremiyor, ayni baglantiya tekrar basiyordu.
   Renk tek basina bilgi tasimasin diye `aria-current="page"` de yaziliyor. */
.top-menu a.is-current {
  background: #eef2ff;
  color: #1e3a8a;
  box-shadow: inset 3px 0 0 #4f46e5;
}

.top-menu a:hover {
  background: #f5f7fa;
  color: var(--brand-dark);
}

.wrap {
  width: min(1100px, 100%);
  margin: 0 auto;
  /* Genis ekranda daha fazlasi asagida, @media ile. Buradaki 1100 telefon ve
     dizustu icin dogru olcu; masaustunde iade raporunun 11 sutunlu tablosu
     bu genislikte gereksiz yere yatay kaydiriliyordu. */
  /* Alt bosluk kasitli olarak buyuk: sayfanin son ogesi (ornegin oneri
     ekranindaki "Stok kodu veya urun adi ile ara" kutusu) mobil tarayicinin
     alt arac cubugunun ALTINDA kaliyordu. Cubugun yuksekligini tarayici
     bildirmiyor; guvenli pay birakiyoruz. */
  padding: 16px 16px 40px;
}

/* --- TEST SURUMU BILGILENDIRMESI (2026-08-22) ------------------------------
   Modul acilisinda cikan, "Tamam" ile kapanan bilgi penceresi.
   Panel ACIK TEMALI (app.css'te dark mode yok) -- zemin ve yazi renkleri
   acikca veriliyor, seffaf birakilirsa Android'in "karanlik moda zorla"
   ozelligi okunmaz hale getirir.                                          */
.notice-modal {
  position: fixed;
  inset: 0;
  z-index: 120;              /* .topbar'in ustunde kalmali */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
}

.notice-modal[hidden] { display: none; }

/* Pencere acikken arkadaki sayfa kaymasin. */
body.notice-open { overflow: hidden; }

.notice-box {
  width: min(420px, 100%);
  padding: 20px 20px 16px;
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow-strong);
  text-align: center;
}

.notice-box h2 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--brand-dark);
}

.notice-box p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.notice-box strong { color: #9a3412; }

/* Dokunma hedefi 48px: telefonu tek elle tutan biri icin alt sinir budur.
   Sayim ekraninda da ayni olcu korunuyor. */
.notice-ok {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.notice-ok:hover { background: var(--brand-dark); }

/* --- KASA BILGISI: stok satirinin altindaki satir (2026-08-22) -------------
   Stok Sor'daki depo miktari MIKRO'nun stogudur ve gun icinde kasadan
   satilanlari icermez -- Mikro stogu gun sonunda guncellenir. Bu satir farki
   kapatir: "bugun N satildi · kalan M" ve o SUBENIN son satis saati.

   Sube sube ayri: bir subenin interneti kesikken digerleri akmaya devam eder,
   tek bir genel saat bunu gizlerdi (sahibin uyarisi).

   RENKLI ALARM YOK (sahibin karari): kullanici saati gorur, yorumu kendi
   yapar. Kapanista her aksam kirmizi yanan gosterge, kisa surede bakilmayan
   gosterge olur -- ajanin `last_error` alaninda bunu bir kez yasadik.
   Bu yuzden burada yalnizca soluk, sakin bir bilgi satiri var.            */
/* Ad solda, miktar sagda -- satirin ESKI duzeni birebir burada yasiyor.
   `minmax(0, 1fr)` sart: onsuz uzun depo adi sutunu tasirir ve miktari
   ekran disina iter. */
.stock-list-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.stock-pos-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

/* BUGUN SATILAN -- rozet halinde, turuncu. Sahibin istegi 2026-08-22:
   "belirgin olsun". Ekrandaki uc rakamin arasinda gozun ilk gitmesi gereken
   yer burasi; "kalan" degeri neden Mikro stogundan dusuk, cevabi bu.

   Duz turuncu YAZI kullanilmadi: projenin --accent tonu (#fd7e14) beyaz
   uzerinde ~2.9:1 kontrast veriyor ve 12px yazi icin okunmuyor. Acik zemin +
   koyu turuncu yazi hem daha belirgin hem okunur (~7:1). Zemin, satiri
   yalnizca 2px uzatiyor -- ekran uzunlugu zaten sikayet konusuydu. */
.stock-pos-line .pos-sold {
  font-weight: 800;
  color: #9a3412;
  background: #ffedd5;
  border: 1px solid #fed7aa;
  padding: 1px 8px;
  border-radius: 999px;
}

/* Ham Mikro rakami. Kaybolmuyor, ikinci plana geciyor -- "kalan neden bu
   kadar" sorusunun cevabi gorunur kalmali. */
.stock-pos-line .pos-stock { font-weight: 600; }

/* Buyuk rakamin onundeki "kalan" etiketi. Rakamin kendisinden kucuk ve
   soluk: okunan sey SAYI, etiket yalnizca ne oldugunu soyluyor. */
.stock-list-row strong .qty-label {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.7;
  margin-right: 2px;
}

/* "Kalan" tek vurgulu deger: personelin rafa giderken aklinda tutacagi sayi
   bu. Rengi uyari degil, ayirt etme amacli. */
.stock-pos-line .pos-left {
  font-weight: 700;
  color: var(--brand-dark);
}

/* margin-left:auto KALDIRILDI: saati saga yaslamak, dar ekranda alt satira
   dusmesine ve satirin bir kat uzamasina yol aciyordu. Metinler dogal aksin. */

/* Gecen sure daha soluk: saatin kendisi bilgi, "kac dakika once" ise onun
   yorumu. Ikisi ayni agirlikta olursa satir okunmuyor. */
.stock-pos-line .pos-time em {
  font-style: normal;
  opacity: 0.75;
}

/* --- MASAUSTU GENISLIGI (2026-08-21) ---------------------------------------
   Olculdu: 1920px ekranda `.wrap` 1100px kaliyordu, yani 820px bos duruyordu;
   bu sirada iade raporunun urun tablosu (11 sutun) kendi icinde yatay
   kaydiriliyordu. Patron raporu masaustunde okuyor, gereksiz bir kaydirma.

   AMA GENISLIK HER SEKMEYE VERILMEDI. Once `.wrap`in tamami genisletildi ve
   1920px'de ekran goruntusu alindi: kullanici tablosu 1066px'ten 1366px'e
   yayilinca DEPO / YETKI / CIHAZ sutunlarinin arasi bos kaldi, tablo
   seyreldi. Genislik yalnizca gercekten genis tablosu olan yerde ise yarar.
   Bu yuzden `wrap-wide` yalnizca iade/imha raporu sekmesinde veriliyor
   (index.php, $tab === 'returns').

   Yalnizca 1280px ustunde acilir; telefon ve dizustunde hicbir sey degismez.
   Yatay tasma olcumle dogrulandi (scrollWidth - clientWidth = 0).            */
@media (min-width: 1280px) {
  .wrap.wrap-wide {
    width: min(1400px, 100%);
  }
}

/* Genisleyen tek sey TABLOLAR olmali, metin degil. `.returns-note` aciklama
   kutulari genislige yayilinca satirlar 150 karaktere ciciyor ve okunmaz hale
   geliyordu -- goz satir sonundan satir basina donerken yerini kaybediyor.
   78ch, uzun sure okunabilir kabul edilen olcu. */
.returns-note {
  max-width: 78ch;
}

.approval-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #f4c780;
  border-radius: 12px;
  background: #fff7ed;
  color: #7a3b00;
  box-shadow: var(--shadow);
  animation: bannerBlink 1.25s infinite;
}

.approval-banner strong,
.approval-banner span {
  color: inherit;
}

.approval-banner span {
  font-size: 13px;
  font-weight: 700;
}

/* --- Passkey / parmak izi --- */

.passkey-block {
  margin: 0 0 6px;
}

.passkey-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--brand);
  border-radius: 12px;
  background: #fff;
  color: var(--brand-dark);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.passkey-button:hover:not(:disabled) {
  background: #f2f3ff;
}

.passkey-button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Parmak izi ikonu: ek dosya gerektirmemesi icin saf CSS/SVG data URI. */
.passkey-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--passkey-mask) center / contain no-repeat;
  mask: var(--passkey-mask) center / contain no-repeat;
  --passkey-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 4a8 8 0 0 0-8 8v3'/%3E%3Cpath d='M20 15v-3a8 8 0 0 0-4-6.9'/%3E%3Cpath d='M8 12a4 4 0 0 1 8 0v4'/%3E%3Cpath d='M12 12v6'/%3E%3Cpath d='M16 19v1'/%3E%3Cpath d='M6 18v1'/%3E%3C/svg%3E");
}

.passkey-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.passkey-divider::before,
.passkey-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 2px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.checkbox-line input {
  width: auto;
  margin: 0;
}

.passkey-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.passkey-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
}

.passkey-list strong {
  display: block;
  font-size: 14px;
}

.passkey-list .muted {
  font-size: 12px;
}

.ghost-button {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ghost-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.agent-banner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #f0b4ae;
  border-radius: 12px;
  background: #fef3f2;
  color: #7a271a;
  box-shadow: var(--shadow);
}

.agent-banner span {
  font-size: 13px;
}

.agent-banner.agent-disabled,
.agent-banner.agent-unknown {
  border-color: #f4c780;
  background: #fff7ed;
  color: #7a3b00;
}

.agent-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
}

.agent-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}

.agent-state.agent-online .agent-dot {
  background: var(--ok);
}

.agent-state.agent-offline .agent-dot {
  background: var(--danger);
}

.agent-state.agent-disabled .agent-dot,
.agent-state.agent-unknown .agent-dot {
  background: var(--accent);
}

@keyframes alertPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(253, 126, 20, 0.48);
    transform: translateZ(0) scale(1);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(253, 126, 20, 0);
    transform: translateZ(0) scale(1.04);
  }
}

@keyframes bannerBlink {
  0%,
  100% {
    border-color: #f4c780;
    background: #fff7ed;
  }
  50% {
    border-color: #fd7e14;
    background: #ffead5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .approval-alert,
  .menu-toggle em,
  .approval-banner {
    animation: none;
  }
}

.login-wrap {
  /* 100vh mobil tarayicilarda GORUNEN alandan buyuktur: adres cubugu ve alt
     arac cubugu haric tutulur, yani kutunun alti cubugun altinda kalir.
     100dvh gercek gorunen yuksekligi verir; eski tarayicilar icin 100vh
     satiri fallback olarak once yaziliyor. */
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(135deg, var(--nav-start) 0%, var(--nav-end) 100%);
}

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 420px);
  width: min(920px, 100%);
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-strong);
}

.login-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: 520px;
  padding: 44px;
  background:
    linear-gradient(135deg, rgba(36, 46, 124, 0.94) 0%, rgba(92, 66, 154, 0.92) 56%, rgba(255, 102, 0, 0.84) 100%),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.24), transparent 34%);
  color: #fff;
}

.login-hero::before,
.login-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.22;
  filter: saturate(1.08);
  pointer-events: none;
}

.login-hero::before {
  right: -72px;
  top: 34px;
  width: 300px;
  height: 300px;
  background-image: url("/assets/img/ozbereket-cash-carry.jpeg");
}

.login-hero::after {
  left: -64px;
  bottom: -58px;
  width: 270px;
  height: 270px;
  background-image: url("/assets/img/ozbereket-gross.jpg");
  opacity: 0.18;
}

.login-hero h1 {
  position: relative;
  z-index: 1;
  max-width: 420px;
  color: #fff;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 0;
}

.login-hero p {
  position: relative;
  z-index: 1;
  max-width: 440px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 1.5;
}

.login-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.login-points span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.login-box,
.panel,
.result-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.login-box {
  width: 100%;
  padding: 36px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  align-self: center;
}

.login-box h1 {
  text-align: center;
}

.login-box .muted {
  text-align: center;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
}

h1 {
  font-size: 22px;
}

h2 {
  font-size: 18px;
}

.muted {
  color: var(--muted);
}

/* .tabs / .tab / .tab.active KALDIRILDI (2026-09-05).
   Sekme seridi ana ekrandan kalkti; modul kutucuklari ayni isi aciklamayla
   birlikte yapiyor. Bu kurallari kullanan tek markup oydu -- `barcode-tab` ve
   `returns-tab` BASKA siniflar, onlar etkilenmiyor. Kullanilmayan ama canli
   duran CSS, sonradan bakanin "bu serit hala var" sanmasina yol acar. */

.panel {
  padding: 18px;
  margin-bottom: 16px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.filters {
  display: grid;
  grid-template-columns: 110px minmax(220px, 1fr) auto;
  gap: 10px;
}

.price-filters {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.scan-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 8px;
}

label {
  display: block;
  margin: 12px 0 6px;
  font-size: 13px;
  font-weight: 700;
}

.field-hint {
  margin: -2px 0 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

input,
select,
button {
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  padding: 10px 12px;
  background: #fff;
}

input:focus,
select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18);
  outline: 0;
}

button,
.button {
  border: 1px solid var(--brand);
  background: linear-gradient(135deg, var(--nav-start) 0%, var(--nav-end) 100%);
  color: #fff;
  padding: 9px 14px;
  cursor: pointer;
  font-weight: 700;
}

button:hover,
.button:hover {
  border-color: var(--brand-dark);
  filter: brightness(0.96);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  min-height: 42px;
  padding: 0;
}

.camera-glyph {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.camera-glyph::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 4px;
  width: 8px;
  height: 5px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

.camera-glyph::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 7px;
  width: 5px;
  height: 5px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.ghost {
  border-color: #475467;
  background: transparent;
  color: #fff;
}

.message {
  margin: 12px 0;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #f8fafc;
}

.message.error {
  border-color: #fecdca;
  background: #fffbfa;
  color: var(--danger);
}

.message.ok {
  border-color: #abefc6;
  background: #f6fef9;
  color: var(--ok);
}

/* Hata degil ama "oku ve aklinda tut" mesaji. Sifre degistirildikten sonra
   cikan "sifrenizi unutmayin" uyarisi bunu kullaniyor: islem BASARILI, yani
   kirmizi yanlis olur; ama yesil de gecistirilir. */
.message.warn {
  border-color: #fedf89;
  border-left: 5px solid var(--accent);
  background: #fffaeb;
  color: #7a3b00;
  font-weight: 600;
}

.cards {
  display: grid;
  gap: 10px;
}

.result-card {
  padding: 14px;
}

/* ANA EKRAN KUTUCUKLARI IKI SUTUN (2026-09-05).
   Modul sayisi 3'ten 7'ye cikinca tek sutunda 792px tutuyordu -- telefon
   ekranindan uzun, yani kullanici en alttaki modulu gormek icin kaydirmak
   zorundaydi. `.cards` DEGISTIRILEMEZ: ayni sinifi fiyat/stok arama sonuclari
   ve barkod talep listeleri de kullaniyor, onlar tek sutun kalmali. Bu yuzden
   kutucuk bolumune ayri bir sinif verildi. */
.module-cards {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

/* Kutucukta artik yalnizca simge + ad var; h2'nin varsayilan alt bosluguna
   gerek yok, yoksa kart bosuna uzar. */
.module-cards .module-card h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.module-card {
  display: block;
  color: inherit;
  /* Simge ustte ortali; baslik ve aciklama da ortali. Modul BASLIKLARI da
     ortalandi (2026-09-05), ana ekran onlarla ayni dili konussun. */
  text-align: center;
}

/* MODUL SIMGESI. Yuvarlak kosesi olan acik zeminli bir kare -- simge tek
   basina degil, kendi rozetinin icinde duruyor; boylece farkli sekildeki yedi
   simge ayni agirlikta gorunuyor ve kutucuklar hizali kaliyor.
   Renk `currentColor` ile geliyor, SVG'de renk YAZILI DEGIL. */
.module-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 8px;
  border-radius: 12px;
  background: #eef2ff;
  color: #4338ca;
}

.module-card-icon svg {
  width: 23px;
  height: 23px;
}

/* Simge YARDIMCI bir isaret, tek basina bilgi tasimaz -- kutucugun adi zaten
   altinda yaziyor. Bu, iade raporunda ogrenilen kuralin aynisi: telefonun
   "karanlik moda zorla" ozelligi renkleri bozdugunda ekran hala okunur
   kalmali. `aria-hidden` bu yuzden: ekran okuyucu simgeyi degil basligi okur. */
.module-card:hover .module-card-icon {
  background: #e0e7ff;
}

.module-card:hover {
  border-color: #b9c6ff;
  background: #f8faff;
  filter: none;
}

.row-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.code {
  font-weight: 700;
  color: var(--brand-dark);
}

.meta {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.empty {
  padding: 18px;
  text-align: center;
  color: var(--muted);
}

.module-shell {
  margin-bottom: 14px;
  border: 1px solid #d8dee8;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}

/* MODUL BASLIKLARI ORTALI (2026-09-05, sahibin istegi).
   Eskiden `auto minmax(0,1fr)` idi ve baslik sola yaslaniyordu. Tek cocuklu
   basliklar (Sayim, Siparis, Iade, Barkod Talebi) `justify-items: center` ile
   ortalanir -- sutun sayisi ne olursa olsun, cunku ortalama YATAY HIZALAMADAN
   geliyor, sutun genisliginden degil. Bu yuzden asagidaki dar ekran
   sorgusundaki `grid-template-columns: 1fr` bunu bozmuyor. */
.module-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #e6ebf2;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* BASLIKTA BIR EYLEM DUGMESI VARSA (Pasif) baslik yine de GERCEKTEN ortada
   durmali. Uc sutun: bos + baslik + dugme. Iki yan sutun da `minmax(0,1fr)`
   -- sifira kadar kucululebildikleri icin kalan yeri ESIT paylasirlar, boylece
   ortadaki `auto` tam ortaya oturur. Duz `1fr` yazilsaydi (yani
   `minmax(auto,1fr)`) sag sutunun alt siniri dugmenin genisligi olur, sol
   sutunun ki sifir kalir ve baslik SOLA kayardi -- ayni sey gorunmez bir
   hatayla. */
.module-head.has-action {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.module-head.has-action .module-head-action {
  justify-self: end;
}

.module-head h1 {
  margin: 0;
}

.module-head p {
  margin: 2px 0 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.back-link:hover {
  background: #f8fafc;
  filter: none;
}

.price-module {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: -10px 0 8px;
  overflow: hidden;
  border-color: #cbd5e1;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(8px);
}

.price-module .module-head {
  padding: 6px 10px;
}

.price-module .module-head h1 {
  font-size: 18px;
  line-height: 1.1;
}

.price-module .module-head p {
  display: none;
}

.price-reader-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px 10px 9px;
  border-top: 1px solid #e2e8f0;
  background: #eef4fb;
}

.price-module input {
  min-height: 44px;
  font-size: 18px;
  font-weight: 800;
}

.price-module button[type="submit"] {
  min-width: 92px;
  min-height: 44px;
}

.price-screen {
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}

.price-title-band {
  padding: 15px 16px 14px;
  border-bottom: 1px solid #cbd5e1;
  background: linear-gradient(180deg, #063f74 0%, #07518d 100%);
  color: #fff;
}

/* Mikro'da pasife alinmis urun. Fiyat gosterilir ama personel bunu bilmeli. */
.price-passive-badge {
  margin-bottom: 9px;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid #fbbf24;
  background: #78350f;
  color: #fde68a;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.price-kicker {
  margin-bottom: 5px;
  color: #bde4ff;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.price-title-band h2 {
  margin: 0;
  font-size: 25px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.price-identity {
  display: grid;
  gap: 7px;
  margin-top: 11px;
}

.price-stock-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.price-stock-code,
.price-stock-unit,
.price-read-barcode {
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 800;
}

.price-stock-code {
  background: #ffffff;
  color: #063f74;
  font-size: 14px;
  font-weight: 900;
}

.price-read-barcode {
  max-width: 100%;
  padding-right: 12px;
  padding-left: 12px;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.price-primary-layout {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid #cbd5e1;
}

.price-main-panel {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 225px;
  padding: 22px;
  background: linear-gradient(180deg, #fff8cf 0%, #ffe9a3 100%);
  text-align: center;
}

.price-label {
  color: #102a43;
  font-size: 21px;
  font-weight: 900;
}

.price-display {
  margin: 8px 0;
  color: #004a8f;
  font-size: 58px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.price-display small {
  color: #12355b;
  font-size: 25px;
}

.price-unit-name {
  margin-top: -2px;
  color: #102a43;
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
}

.price-list-name {
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #334155;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.price-context {
  color: #2f3b4c;
  font-size: 24px;
  font-weight: 800;
}

.price-summary-panel {
  padding: 16px;
  background: #f8fafc;
}

.price-summary-panel h3 {
  margin: 0 0 11px;
  color: #111827;
  font-size: 17px;
}

.price-summary-panel dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.price-summary-panel dl div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #fff;
}

.price-summary-panel dt {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.price-summary-panel dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
}

.price-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: #cbd5e1;
}

.price-info-panel {
  padding: 16px;
  background: #ffffff;
}

.price-info-panel.accent {
  background: #fff7ed;
}

.price-info-panel.wide {
  grid-column: 1 / -1;
  background: #f8fafc;
}

.price-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.price-section-head h3 {
  margin: 0;
  color: #111827;
  font-size: 16px;
}

.price-section-head span {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e7f4ee;
  color: #027a48;
  font-size: 12px;
  font-weight: 900;
}

.price-list {
  display: grid;
  gap: 7px;
}

.price-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
}

.price-list-row span {
  overflow-wrap: anywhere;
  color: #263445;
  font-size: 13px;
  font-weight: 800;
}

.price-list-row em {
  padding: 4px 7px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.price-list-row strong {
  color: #004a8f;
  font-size: 18px;
  text-align: right;
  white-space: nowrap;
}

.price-empty {
  padding: 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 7px;
  color: var(--muted);
  text-align: center;
}

.barcode-list {
  display: grid;
  gap: 7px;
}

.barcode-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.barcode-list-row:hover {
  border-color: var(--brand);
}

.barcode-list-row:active {
  transform: scale(0.995);
}

/* Toplu secim araclari (depo listesi). Liste uzun oldugu icin tek tek
   isaretlemek yoruyordu. */
.check-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.check-tool {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-dark);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.check-tool:hover {
  border-color: var(--brand);
  background: #eef0ff;
}

.check-counter {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* Hicbiri secili degilse aktif kullanici kaydedilemez; sayac bunu onceden
   soylesin, kullanici "Kaydet"e basip hata almasin. */
.check-counter.is-empty {
  color: var(--danger);
}

/* Stok Sor'daki barkod satirlari: sadece bilgi, tiklanmaz. Buton gorunumunu
   (imlec, hover, basma efekti) kaldiriyoruz ki personel dokunulabilir sanip
   bosuna denemesin. Iki sutun yeter -- "Fiyati gor" etiketi cizilmiyor. */
.barcode-list-row.is-readonly {
  grid-template-columns: minmax(0, 1fr) auto;
  cursor: default;
}

.barcode-list-row.is-readonly:hover {
  border-color: #d8dee8;
}

.barcode-list-row.is-readonly:active {
  transform: none;
}

.barcode-list-row em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: var(--brand-dark);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.barcode-list-row.is-active {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.barcode-list-row.is-active em {
  color: var(--ok);
}

.price-hint {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
}

.price-unit-warning {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff7ed;
  color: #7a3b00;
  font-size: 12px;
  font-weight: 700;
}

/* HESAPLANAN FIYAT rozeti. Kirmizi ve belirgin, cunku bu rakam Mikro'nun
   fiyati DEGIL: 1. birim fiyati katsayiyla carpilarak uretildi. Canli olcum
   (2026-08-15, 2288 kart) carpimin %66 tuttugunu, %30'unda gercek fiyatin
   daha pahali oldugunu gosterdi -- personel bunu gercek fiyat sanmamali. */
.price-calculated {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid #fecdca;
  border-left: 5px solid var(--danger);
  border-radius: 8px;
  background: #fef3f2;
  color: #7a271a;
  text-align: left;
}

.price-calculated strong {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.price-calculated span {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.price-calculated em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}

/* Yeni birim sorgulanirken kart yerinde kalir, sadece soluklasir. */
.price-screen.is-busy {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.barcode-list-row strong {
  overflow-wrap: anywhere;
  color: #111827;
  font-size: 15px;
}

.barcode-list-row span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 12px;
  font-weight: 900;
}

.price-list-row.unit-adet,
.barcode-list-row.unit-adet {
  border-left: 5px solid #027a48;
  background: #f6fef9;
}

.price-list-row.unit-koli,
.barcode-list-row.unit-koli {
  border-left: 5px solid #175cd3;
  background: #eff8ff;
}

.price-list-row.unit-paket,
.barcode-list-row.unit-paket {
  border-left: 5px solid #b54708;
  background: #fffaeb;
}

.price-list-row.unit-litre,
.barcode-list-row.unit-litre {
  border-left: 5px solid #7a2e99;
  background: #fdf4ff;
}

.price-list-row.unit-other,
.barcode-list-row.unit-other {
  border-left: 5px solid #667085;
}

.stock-module {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: -10px 0 8px;
  overflow: hidden;
  border-color: #cbd5e1;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.stock-module .module-head {
  padding: 6px 10px;
}

.stock-module .module-head h1 {
  font-size: 18px;
  line-height: 1.1;
}

.stock-module .module-head p {
  display: none;
}

.stock-reader-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px 10px 9px;
  border-top: 1px solid #e2e8f0;
  background: #eef4fb;
}

.stock-reader-form input,
.stock-reader-form button {
  min-height: 44px;
}

.stock-reader-form .scan-field {
  min-width: 0;
}

.stock-screen {
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}

.stock-head {
  padding: 14px 16px;
  border-bottom: 1px solid #cbd5e1;
  background: linear-gradient(180deg, #063f74 0%, #07518d 100%);
  color: #fff;
}

.stock-head .code {
  color: #bde4ff;
}

.stock-head h2 {
  margin: 4px 0 10px;
  font-size: 24px;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.stock-units {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stock-scan-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 9px;
}

.stock-scan-line span,
.stock-scan-line strong {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.stock-scan-line strong {
  background: #fff;
  color: #063f74;
}

.stock-match-note {
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
}

.stock-units span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.stock-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: #cbd5e1;
}

.stock-panel {
  padding: 16px;
  background: #fff;
}

.stock-list {
  display: grid;
  gap: 7px;
}

/* TEK SUTUN. Ad+miktar ustte (.stock-list-main), kasa bilgisi altinda.
   2026-08-22'de bozuldu ve duzeltildi: satir iki sutunlu grid iken icine
   ikinci bir blok (kasa satiri) eklenince ad ile kasa YAN YANA dizildi, ada
   yer kalmadi ve `overflow-wrap: anywhere` yuzunden depo adi telefonda
   HARF HARF alt alta dustu ("0 3 - G U R S E L"). Iki sutunlu duzen artik
   .stock-list-main icinde; satirin kendisi dikey yigin. */
.stock-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  align-items: stretch;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #d8dee8;
  border-left: 5px solid #027a48;
  border-radius: 8px;
  background: #f6fef9;
}

.stock-list-row span {
  overflow-wrap: anywhere;
  color: #263445;
  font-size: 13px;
  font-weight: 900;
}

.stock-list-row strong {
  color: #027a48;
  font-size: 20px;
  white-space: nowrap;
}

.admin-list {
  display: grid;
  gap: 12px;
}

.heading-count {
  color: var(--muted);
  font-size: 18px;
  font-weight: 700;
}

.users-card {
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.users-list-flat {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.users-list-flat .users-card-head {
  padding: 4px 0 12px;
  border-bottom: 0;
  background: transparent;
}

.users-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #e8edf5;
  background: #fbfcfe;
}

.users-card-head h2 {
  margin-bottom: 3px;
}

.users-card-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-chip.warn {
  border-color: #f4c780;
  background: #fff7ed;
  color: #7a3b00;
}

.users-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #d8dee8;
  background: #fff;
}

.users-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 14px;
}

.users-table th,
.users-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #d8dee8;
  vertical-align: middle;
}

.users-table th {
  background: #f5f6f8;
  color: #111827;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
}

.users-table tbody tr {
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.users-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.users-table tbody tr:hover,
.users-table tbody tr.editing {
  background: #f2f5ff;
}

.users-table tbody tr.needs-approval {
  background: #fff7ed;
}

.users-table tbody tr.needs-approval:hover,
.users-table tbody tr.needs-approval.editing {
  background: #ffedd5;
}

.user-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.user-cell strong,
.user-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-cell span {
  color: var(--muted);
  font-size: 13px;
}

.self-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 900;
  vertical-align: middle;
}

.role-badge,
.verify-badge,
.count-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.role-badge {
  background: #111827;
  color: #fff;
}

.verify-badge.ok {
  background: #dcfce7;
  color: #166534;
}

.verify-badge.wait {
  background: #fef3c7;
  color: #92400e;
}

.count-badge {
  background: #eef2ff;
  color: #4338ca;
}

.actions-col {
  text-align: right;
  white-space: nowrap;
}

.table-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.table-actions form {
  margin: 0;
}

.outline-action {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.outline-action:hover {
  background: #f8fafc;
}

.outline-action.primary {
  border-color: #b9c6ff;
  color: #4f46e5;
}

.outline-action.primary:hover {
  background: #eef2ff;
}

.outline-action.danger {
  border-color: #fecdca;
  color: var(--danger);
}

.outline-action.danger:hover {
  background: #fffbfa;
}

.outline-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.admin-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-summary-counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-summary-counts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #f4c780;
  border-radius: 999px;
  background: #fff7ed;
  color: #7a3b00;
  font-size: 13px;
  font-weight: 800;
}

.approval-board {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #f4c780;
  border-radius: 12px;
  background: #fff7ed;
  box-shadow: var(--shadow);
}

.approval-head h2 {
  margin-bottom: 4px;
}

.approval-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.approval-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f4c780;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
}

.approval-item span {
  display: grid;
  gap: 3px;
}

.approval-item small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.approval-item em {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.user-editor {
  margin-bottom: 0;
  scroll-margin-top: 76px;
}

.user-editor.needs-approval {
  border-color: #f4c780;
  box-shadow: 0 0 0 3px rgba(253, 126, 20, 0.12), var(--shadow);
}

.approval-note {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #f4c780;
  border-radius: 8px;
  background: #fff7ed;
  color: #7a3b00;
  font-size: 13px;
  font-weight: 700;
}

.status-pill.pending,
.status-pill.email_pending {
  border-color: #f4c780;
  background: #fff7ed;
  color: #7a3b00;
}

.user-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.warehouses-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 40px;
  margin: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  font-size: 13px;
  font-weight: 400;
}

.check-item input {
  width: auto;
  min-height: auto;
  margin-top: 2px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.status-pill.active {
  border-color: #abefc6;
  background: #f6fef9;
  color: var(--ok);
}

.status-pill.disabled {
  border-color: #fecdca;
  background: #fffbfa;
  color: var(--danger);
}

.form-actions {
  display: flex;
  align-items: end;
}

.password-row {
  margin-top: 4px;
}

.scanner-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(16, 24, 40, 0.72);
}

.scanner-modal[hidden] {
  display: none;
}

.scanner-sheet {
  width: min(560px, 100%);
  padding: 14px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
}

.scanner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ghost-dark {
  border-color: var(--line);
  background: #fff;
  color: var(--text);
}

.ghost-dark:hover {
  background: #f8fafc;
}

/* CERCEVE GORUNTUNUN ORANINI ALIR, sabit 4:3 DEGIL.
   Onceden `aspect-ratio: 4/3` sabitti. Telefon dikey tutuldugunda kamera
   akisi DIKEY geliyor; dikey goruntu yatay kutuya `contain` ile sigdirilinca
   iki yanda kalin siyah bant kaliyor ve kullanilabilir onizleme ortada ince
   bir seride dusuyordu (sahadan bildirildi 2026-08-15).
   Gercek oran akis basladiginda JS tarafindan yaziliyor
   (video.videoWidth/videoHeight); asagidaki deger yalnizca akis gelene kadar
   gecerli baslangic degeri.
   `contain` KORUNUYOR: cover goruntunun yanlarini kirpar ve cercevenin
   disinda kalan barkod gorunmez olur. Oran dogru olunca zaten bant kalmiyor. */
.scanner-frame {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #101828;
  aspect-ratio: 3 / 4;
  /* Ekranin tamamini yutmasin; altta okuma durumu ve dugmeler icin yer kalsin.
     70vh: dikey akista (3:4) cerceve neredeyse tam genislige ulasiyor.
     Daha dusuk bir deger yuksekligi kirpiyor ve orani korumak icin GENISLIK
     de darallyor -- 62vh'de 412px ekranda cerceve 348px'e dusuyordu. */
  max-height: 70vh;
  margin-inline: auto;
}

/* contain, cover DEGIL: kamera 4:3 istegimizi karsilamazsa cover goruntunun
   yanlarini kirpar ve personel cercevenin disinda kalan barkodu goremez.
   Siyah bant kalmasi, gorus acisini kaybetmekten iyidir.
   transform: dijital zoom buradan uygulanir (donanim zoom'u olmayan cihazlar
   icin); .scanner-frame overflow:hidden oldugu icin buyuyen goruntu kirpilir. */
.scanner-frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 120ms ease-out;
}

/* Onizlemenin sag alt kosesi: uzaklas / yaklas. Cihaz zoom desteklemiyorsa
   kutu hidden kalir. Koyu zemin uzerinde durdugu icin beyaz metin dogru. */
/* Urun adi aramasinin aday listesi. Acik tema: beyaz zemin, koyu yazi. */
.price-candidates {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 14px;
}

.price-candidates-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

.price-candidates-head p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}

/* Liste kirpildi uyarisi. KIRMIZI ve belirgin (sahibin istegi 2026-08-15):
   personel "hepsi bu" sanip aradigi urunu bulamadan vazgeciyordu. "ULKER"
   canli veride 1243 urunle esliyor, ekranda 50'si var -- bu farkin
   gorulmemesi gercek bir yanilma sebebi. */
.price-candidates-more {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #fecdca;
  border-left: 5px solid var(--danger);
  border-radius: 8px;
  background: #fef3f2;
  color: var(--danger);
  font-size: 13px;
  line-height: 1.45;
}

.price-candidates-more strong {
  font-size: 14px;
  font-weight: 800;
}

.price-candidates-more span {
  color: #7a271a;
  font-weight: 600;
}

/* Kirpma YOKKEN gosterilen sade bilgi satiri: liste tam, uyari gerekmiyor. */
.price-candidates-note {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}

.price-candidate-list {
  display: grid;
  gap: 8px;
}

.price-candidate-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.price-candidate-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.price-candidate-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.price-candidate-meta em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
}

.price-candidate-meta em.is-passive {
  border-color: #f4c780;
  background: #fff7ed;
  color: #7a3b00;
}

.scanner-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.scanner-zoom button {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(15, 23, 42, 0.68);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.scanner-zoom button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Kac kat yakinlastirildigi. Dugmeye basildiginda gorunur bir geri bildirim
   olmasi lazim: zoom degisimi kucukse ekranda anlasilmiyordu. */
/* Birim dugmeleri (2026-09-05). Koyu mavi `.stock-head` uzerinde duruyorlar;
   renkler O ZEMINE gore secildi -- acik zemin varsaymak burada tutmuyor. */
.stock-unit-btn {
  /* Telefonda tek elle basiliyor: dokunma hedefi kucultulmez.
     34px'ti, 40'a cikarildi (2026-09-05 arayuz turu) -- reyonda tek basparmakla
     basilan bir dugme icin 34px dar. */
  min-height: 40px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  color: #eaf4ff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* Secili birim RENKLE VE KENARLA belli oluyor; renk tek basina bilgi
   tasimasin diye aria-pressed de yaziliyor (ekran okuyucu ve testler icin). */
.stock-unit-btn.is-active {
  background: #a7f3d0;
  border-color: #a7f3d0;
  color: #06331f;
}

/* Secili birimde fiyat tanimli degilse: uydurma bir rakam gostermek yerine
   durumu YAZIYORUZ. Koli fiyati adet fiyatinin kati olmak zorunda degil. */
.stock-price-none {
  font-size: 12px;
  color: #bde4ff;
}

/* Pasif dugmesi (2026-09-05). BASLIKLA AYNI SATIRDA, sagda.
   Once formun altinda kutucuktu ve tek basina bir satir kapliyordu; bu
   ekranin asil isi arama sonucu, tercih dugmesi yer kaplamamali.
   Yalnizca stock.passive yetkisi olana basiliyor; varsayilan KAPALI cunku
   katalogun yarisi pasif (14.889 / 28.474). */
/* 2026-09-05: buradaki `display: flex; justify-content: space-between`
   KALDIRILDI. Pasif dugmesi eklenirken yazilmisti; artik ayni isi genel
   `.module-head.has-action` uc sutunlu grid'i yapiyor ve baslik SOLA degil
   ORTAYA hizaliyor. Flex kalsaydi genel kurali sessizce ezer, Stok Gor tek
   ortalanmayan ekran olurdu -- ayni listenin/kuralin ikinci kez yazilmasi.

   Eski yorumdaki `min-width: 0` dersi hala gecerli ve grid'de karsiligi
   `minmax(0, 1fr)`: sifira inebilen sutun olmadan aciklama satiri sifir
   genislige dusuyordu (olculmustu, p.width = 0). */
.stock-module .module-head > div {
  min-width: 0;
}

.stock-passive-btn {
  flex: 0 0 auto;
  /* Telefonda tek elle basiliyor: dokunma hedefi kucultulmez. */
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #475467;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ACIKKEN renk DEGISIR ama durum ayrica aria-pressed'de yaziyor: renk tek
   basina bilgi tasimamali (telefonun "karanlik moda zorla" ozelligi panelin
   renklerini bozuyor -- panel acik temali). */
.stock-passive-btn.is-active {
  background: #92400e;
  border-color: #92400e;
  color: #fffbeb;
}

/* Stok Sor fiyat satiri (2026-09-05).
 *
 * TEK SATIR, KOMPAKT. Ilk hali her fiyati kutulu bir blok olarak basiyordu ve
 * STOK MIKTARINI ekrandan asagi itiyordu (sahada bildirildi: "envanter
 * menusunde sadece fiyat gorunuyor"). Bu ekranin asil isi stok miktari;
 * fiyat yardimci bilgi ve o kadar yer kaplamamali.
 *
 * Fiyat sonradan dustugu icin gelmezse satir hic gorunmez (`hidden`). */
.stock-price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 4px 0 2px;
}

/* RENKLER KOYU ZEMINE GORE SECILDI, OLCULEREK.
 *
 * Bu satir `.stock-head` icinde ve o blok KOYU MAVI gradyan (#063f74 ->
 * #07518d), beyaz yazili. Ilk surumde fiyat koyu yesildi (#065f46) --
 * kontrast olculdu: **1.06:1**. WCAG alt siniri 4.5:1; yani yazi fiilen
 * gorunmuyordu, birim yazisi (#334155) ise 1.03:1 ile zeminle ayni
 * parlaklikta kaliyordu. Sahada bildirildi 2026-09-05.
 *
 * Yeni degerler olculdu: #a7f3d0 -> 6.37:1, #bde4ff -> 6.11:1 (ikisi de AA).
 * Beyaz kullanilmadi: urun adi zaten beyaz, fiyat ondan AYIRT EDILEBILMELI.
 *
 * Bu blogun icine yeni bir yazi eklerken kontrasti OLCUN. Panel acik temali
 * ama bu baslik koyu; "beyaz zemin" varsayimi burada tutmuyor. */
.stock-price-main {
  /* Biraz daha buyuk (sahibin istegi 2026-09-05): fiyat kartin en cok
     bakilan ikinci rakami ve 16px telefonda kucuk kaliyordu. */
  font-size: 18px;
  font-weight: 800;
  color: #a7f3d0;
  letter-spacing: 0.2px;
}

/* BIRIM ONDE yaziliyor: "ADET 7,70 TL" (sahibin karari 2026-09-05).
   Birimler dugme ve fiyat secilen birime gore degisiyor; birimi basa almak
   fiyatin HANGI birime ait oldugunu tek bakista gosteriyor.

   Birim MUTLAKA yazilir: bir birimin fiyati cogu zaman baska bir fiyat
   listesinde duruyor; yazilmazsa ADET fiyati KOLI fiyati gibi gorunur -- bu
   hata Fiyat Gor'de 6472 stok kartini etkilemisti. */
.stock-price-main em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #bde4ff;
  margin-right: 2px;
}

/* Yalnizca GENELDEN FARKLI subeler. Ayni fiyati her sube icin tekrar yazmak
   asil bilgiyi -- farkli olani -- gizliyordu (sahibin karari 2026-09-05). */
.stock-price-diff {
  /* 12px cok kucuk kaliyordu (sahada bildirildi 2026-09-05). Sube ozel fiyati
     ana fiyattan daha az onemli degil -- yalnizca daha nadir. */
  font-size: 14px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #7c3a06;
  white-space: nowrap;
}

/* ==================== SIPARIS / TALEP MODULU (2026-09-05) ====================

   DIKKAT -- `.ghost` global tanimi KOYU barlar icin yapilmis ve yazi rengi
   BEYAZ. Bu modulun panelleri beyaz zeminli, yani yeniden bildirilmezse
   dugmeler beyaz uzerine beyaz kalir ve GORUNMEZ olur. Ayni tuzak barkod
   modulunde ve tarama penceresinde de yasandi -- ucuncu kez. */
.orders-module .ghost {
  border: 1px solid var(--line);
  background: #fff;
  color: #1f2937;
  font-weight: 600;
}

.orders-new-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: end;
}

@media (min-width: 640px) {
  .orders-new-form { grid-template-columns: 1fr 1fr auto; }
}

/* Kutunun kendi `gap`i var; genel `label` kurali 12px ust bosluk ekliyor ve
   ikisi ust uste biniyor. Sayim ekraninda ayni sorun yasandi. */
.orders-new-form label,
.orders-scan label,
.orders-qty label {
  margin: 0 0 4px;
}

.orders-scan-row {
  display: flex;
  gap: 8px;
}

.orders-scan-row input {
  flex: 1 1 auto;
  min-width: 0;
  /* Telefonda tek elle kullaniliyor: dokunma hedefi kucultulmez. */
  min-height: 44px;
}

.orders-scan-row button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
}

.orders-product {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

/* Uyari RENKLE DEGIL yaziyla da anlasilir; Android'in "karanlik moda zorla"
   ozelligi renkleri bozuyor (panel acik temali). */
.orders-warn {
  margin-top: 4px;
  color: #92400e;
  font-weight: 600;
  font-size: 13px;
}

.orders-lines {
  margin: 12px 0;
}

.orders-line-table {
  width: 100%;
  border-collapse: collapse;
}

.orders-line-table th,
.orders-line-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.orders-line-table th {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.orders-line-name strong { display: block; }
.orders-line-name .muted { font-size: 12px; }

.orders-line-qty {
  white-space: nowrap;
  text-align: right;
}

.orders-line-del { width: 1%; }

.orders-line-del button {
  min-height: 40px;
  padding: 0 12px;
}

.orders-approve-input {
  width: 84px;
  min-height: 40px;
  text-align: right;
}

.orders-draft-head,
.orders-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.orders-draft-actions,
.orders-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.orders-draft-actions button,
.orders-detail-actions button {
  min-height: 48px;
  flex: 1 1 auto;
}

.orders-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.orders-filter {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #1f2937;
  font-size: 13px;
}

.orders-filter.active {
  background: #1f2937;
  border-color: #1f2937;
  color: #fff;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.orders-card {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.orders-card-top,
.orders-card-mid,
.orders-card-bot,
.orders-detail-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.orders-card-top { justify-content: space-between; }
.orders-card-branch { font-weight: 700; }
.orders-card-bot { font-size: 12px; margin-top: 4px; }

.orders-card-reject {
  margin-top: 6px;
  font-size: 13px;
  color: #b42318;
}

.orders-partial {
  font-size: 12px;
  color: #92400e;
  font-weight: 600;
}

/* Durum rozeti. Renk DESTEK, bilgi yazida -- rozetin metni her zaman durumu
   soyluyor (bkz. iade raporu ekran kararlari). */
.orders-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #f1f5f9;
  color: #334155;
}

.orders-chip-ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.orders-chip-wait { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.orders-chip-error { background: #fef2f2; border-color: #fecaca; color: #b42318; }

.orders-doc {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}


/* Tarama penceresi araclari: flas + kamera degistirme (2026-09-04).

   DIKKAT -- `.ghost` global tanimi KOYU barlar icin yapilmis ve yazi rengi
   BEYAZ. `.scanner-sheet` ise beyaz zeminli, yani yeniden bildirilmezse bu
   dugmeler beyaz uzerine beyaz kalir ve GORUNMEZ. Ayni tuzak barkod
   modulunde de yasanmisti; oradaki cozumun aynisi. */
.scanner-tools {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.scanner-tools button.ghost {
  flex: 1 1 auto;
  /* Telefonda tek elle basiliyor: dokunma hedefi kucultulmez. */
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-size: 15px;
  font-weight: 600;
}

/* Flas ACIKKEN dugme kendi durumunu gosterir; renk tek basina bilgi tasimaz,
   yazi da "Flasi Kapat" olur (bkz. iade raporu ekran kararlari). */
.scanner-tools button.ghost[aria-pressed="true"] {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #92400e;
}

.scanner-tools button.ghost:disabled {
  opacity: 0.55;
}

.scanner-zoom-level {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 44px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(15, 23, 42, 0.68);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.scanner-line {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 2px;
  background: #12b76a;
  box-shadow: 0 0 16px rgba(18, 183, 106, 0.8);
}

@media (max-width: 720px) {
  .wrap {
    /* Mobil: alt arac cubugu (geri/ileri/ana sayfa/sekmeler) ~56-60px
       yer kapliyor ve sayfanin uzerine biniyor. 96px pay + iPhone alt
       gostergesi icin env(safe-area-inset-bottom). Bu olmadan son oge
       yarim gorunuyor ve dokunulamiyor. */
    padding: 12px 12px calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .login-wrap {
    padding: 14px;
  }

  .login-shell {
    display: block;
    border-radius: 12px;
  }

  .login-hero {
    min-height: auto;
    padding: 24px;
  }

  .login-hero h1 {
    font-size: 26px;
  }

  .login-hero::before {
    right: -52px;
    top: 12px;
    width: 170px;
    height: 170px;
    opacity: 0.18;
  }

  .login-hero::after {
    left: -44px;
    bottom: -50px;
    width: 150px;
    height: 150px;
    opacity: 0.14;
  }

  .login-box {
    padding: 24px;
  }

  .tabs,
  .grid,
  .filters,
  .meta,
  .admin-grid,
  .check-grid,
  .warehouses-grid {
    grid-template-columns: 1fr;
  }

  .row-top {
    display: block;
  }

  .user-editor-head {
    display: block;
  }

  .status-pill {
    margin-top: 8px;
  }

  .topbar {
    align-items: start;
  }

  .approval-alert span {
    display: none;
  }

  .approval-banner {
    display: grid;
  }

  .admin-summary-head {
    display: block;
  }

  .admin-summary-counts {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .users-card-head {
    display: block;
    padding: 14px;
  }

  .users-card-tools {
    justify-content: flex-start;
    margin-top: 10px;
  }

  .users-table-wrap {
    overflow: hidden;
    border-right: 0;
    border-left: 0;
  }

  .users-table {
    min-width: 0;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
  }

  .users-table thead {
    display: none;
  }

  .users-table,
  .users-table tbody,
  .users-table tr {
    display: block;
    width: 100%;
  }

  .users-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #d8dee8;
    background: #fff;
  }

  .users-table tbody tr:nth-child(even) {
    background: #fbfcfe;
  }

  .users-table tbody tr.needs-approval {
    background: #fff7ed;
  }

  .users-table td {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
    text-align: left;
    white-space: normal;
  }

  .users-table td::before {
    content: none;
  }

  .users-table td[data-label="Kullanici"] {
    order: 1;
    flex: 1 1 calc(100% - 116px);
  }

  .users-table td[data-label="Rol"],
  .users-table td[data-label="Durum"],
  .users-table td[data-label="Depo"],
  .users-table td[data-label="Yetki"] {
    order: 3;
    flex: 0 0 auto;
    margin-right: 5px;
  }

  .users-table td[data-label="E-posta"] {
    display: none;
  }

  .users-table td[data-label="Depo"]::before {
    content: "Depo ";
    margin-right: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
  }

  .users-table td[data-label="Yetki"]::before {
    content: "Yetki ";
    margin-right: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
  }

  .user-cell {
    gap: 2px;
  }

  .user-cell strong {
    font-size: 14px;
  }

  .user-cell span {
    font-size: 12px;
  }

  .actions-col {
    order: 2;
    flex: 0 0 auto;
    text-align: left;
  }

  .table-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 5px;
  }

  .outline-action {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 12px;
  }

  .role-badge,
  .status-pill,
  .count-badge {
    min-height: 22px;
    padding: 2px 6px;
    font-size: 11px;
  }

  /* Dar ekranda tek sutun -- ama EYLEMLI baslik haric: onun uc sutunu
     korunmali, yoksa Pasif dugmesi alt satira duser ve basligin yaninda
     olmasi istegi (sahibin karari) bozulur. Olculdu: 360px'te sigiyor. */
  .module-head:not(.has-action) {
    grid-template-columns: 1fr;
  }

  .module-head {
    gap: 8px;
    padding: 12px;
  }

  .back-link {
    width: fit-content;
  }

  .price-module {
    top: 0;
    margin-right: -4px;
    margin-left: -4px;
  }

  .price-module .module-head {
    padding: 5px 8px;
  }

  .price-reader-form {
    grid-template-columns: 1fr;
    padding: 6px 8px 8px;
  }

  .price-module input {
    min-height: 44px;
  }

  .price-title-band {
    padding: 12px;
  }

  .price-title-band h2 {
    font-size: 20px;
  }

  .price-identity {
    gap: 5px;
  }

  .price-stock-line {
    justify-content: flex-start;
  }

  .price-read-barcode {
    justify-self: stretch;
  }

  .price-primary-layout,
  .price-detail-grid {
    grid-template-columns: 1fr;
  }

  .price-main-panel {
    min-height: 185px;
    border-right: 0;
  }

  .price-info-panel.wide {
    grid-column: auto;
  }

  .price-display {
    font-size: 48px;
  }

  .price-summary-panel dl div {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .price-list-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .price-list-row em {
    justify-self: start;
  }

  .price-list-row strong {
    grid-column: 1 / -1;
    justify-self: start;
    font-size: 21px;
    text-align: left;
  }

  .stock-module {
    margin-right: -4px;
    margin-left: -4px;
  }

  .stock-reader-form,
  .stock-grid {
    grid-template-columns: 1fr;
  }

  .stock-head {
    padding: 12px;
  }

  .stock-head h2 {
    font-size: 20px;
  }
}
/* ------------------------------------------------------------------ */
/* Barkod tanimlama talepleri                                          */
/* ------------------------------------------------------------------ */
/* Panel acik temali (beyaz zemin). Buradaki renkler :root degiskenleri
   ve panelin geri kalaniyla ayni paletten gelir. Koyu zemin varsayan
   rgba(255,255,255,...) kenarliklar beyaz uzerinde gorunmez olur. */

.barcode-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 4px;
}

.barcode-tab {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.barcode-tab.is-active {
  border-color: var(--brand);
  background: #eef0ff;
  color: var(--brand-dark);
}

.barcode-tab .badge {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.barcode-check {
  margin: 12px 0;
}

/* "Urun zaten tanimli" uyarisi. Personelin kacirmamasi gereken tek satir
   bu oldugu icin normal mesaj kutusundan daha belirgin. */
.barcode-already-defined {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid #a6f4c5;
  background: #ecfdf3;
  color: #054f31;
}

.barcode-already-defined strong {
  font-size: 17px;
}

.barcode-already-defined span {
  font-size: 15px;
}

/* Pasif urun. "Tanimli" kutusunun yesili burada yanlis sinyal verir: urun
   tanimli olsa da kasaya gonderilmemeli. Kirmizi, cunku personelin islemi
   durdurup satinalmaya donmesi gerekiyor. */
.barcode-passive {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid #fecdca;
  border-left: 5px solid var(--danger);
  background: #fef3f2;
  color: #7a271a;
}

.barcode-passive strong {
  font-size: 17px;
}

.barcode-passive span {
  font-size: 15px;
  font-weight: 600;
}

.barcode-owner {
  padding: 12px;
  margin-top: 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}

.barcode-owner-code {
  font-size: 13px;
  color: var(--muted);
}

.barcode-owner-name {
  font-weight: 700;
  margin: 2px 0 6px;
}

.barcode-request-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}

/* Baslikta ustte ve altta bosluk istenmiyor. Formun flex gap'i (10px) basligin
   iki yaninda da olusuyordu; negatif margin ile ikisini de geri aliyoruz.
   Boylece baslik hemen ustundeki kutuya ve altindaki barkod satirina yapisik
   duruyor -- uc parca tek kunye gibi okunuyor. */
.barcode-request-form h2 {
  margin: -4px 0 -8px;
  font-size: 17px;
  line-height: 1.25;
}

/* Baslik altindaki bosluk: <p> tarayici varsayilani olarak margin 1em tasiyor
   ve bu, flex gap'in USTUNE biniyordu (12 + 16 + 16). Ayrica barkod etiketi
   doldurulmadan once bos <p> olarak yer kapliyordu. Ikisi de kapatildi. */
.barcode-request-form > p {
  margin: 0;
  font-size: 13px;
}

.barcode-request-form > p:empty {
  display: none;
}

/* h2 zaten negatif alt margin tasiyor; burada tekrar kismaya gerek yok,
   ust uste binerse barkod satiri basligin uzerine cikar. */

.barcode-request-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

/* "Bu barkod sistemde tanimli degil" -- personelin gordugu ilk ve belirleyici
   bilgi. Duz gri kutuda gozden kaciyordu. Turuncu (--accent) uyari degil
   dikkat cekme rengi: hata yok, sadece islem gerekiyor. */
.barcode-undefined {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--accent);
  border-left: 5px solid var(--accent);
  border-radius: 12px;
  background: #fff7ed;
  color: #7c2d12;
}

.barcode-undefined strong {
  font-size: 16px;
  line-height: 1.35;
}

/* Okutulan barkod numarasi. Personel elindeki ambalajla karsilastiracagi icin
   rakamlar esit genislikte (tabular) ve tek blok halinde duruyor. */
.barcode-number {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 4px;
  border-radius: 6px;
  background: #7c2d12;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

.barcode-undefined span {
  font-size: 13px;
  color: #9a3412;
}

/* Urun adi ve birim: oneri motorunun dogru calismasi bu iki alana bagli,
   o yuzden formun geri kalanindan ayrilip one cikariliyor. */
.barcode-request-form label.field-strong {
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

/* Urun adi ile Birim tek bir blok gibi okunmali: ikisi de oneri motorunun
   girdisi. Aralarindaki flex gap'i negatif margin ile kisiyoruz (10 -> 4px). */
.barcode-request-form label.field-strong + label.field-strong {
  margin-top: -6px;
}

.barcode-request-form label.field-strong > input,
.barcode-request-form label.field-strong > select {
  font-size: 16px;
  font-weight: 600;
  padding: 11px 12px;
  border: 2px solid var(--brand);
  border-radius: 8px;
  background: #fff;
}

.barcode-request-form label.field-strong > input:focus,
.barcode-request-form label.field-strong > select:focus {
  outline: none;
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18);
}

.field-hint {
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  color: var(--muted);
  line-height: 1.4;
}

.field-hint strong {
  color: var(--brand-dark);
  font-weight: 700;
}

/* Yanlis birim secilirse barkod Mikro'ya yanlis birime baglanir ve kasada
   yanlis fiyat okunur -- geri almasi zor bir hata. Bu yuzden ipucu degil
   uyari tonunda. */
.field-hint.danger {
  color: var(--danger);
  font-weight: 700;
}

/* "(STOK KODUNU YAZIN)" -- satinalmanin isini en cok kolaylastiran sey stok
   kodunun yazilmasi, o yuzden etiketin geri kalanindan buyuk, kalin ve kirmizi.
   Kirmizi burada hata degil "dikkat" anlaminda; --danger zaten paletin tek
   kirmizisi, yeni renk uydurmuyoruz. */
.field-req {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  color: var(--danger);
  letter-spacing: 0.2px;
}

/* --- Fotograf yuvalari --- */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 460px) {
  .photo-grid { grid-template-columns: 1fr; }
}

.photo-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  border: 1px dashed #c3cbd8;
  background: #fbfcfe;
}

.photo-slot .muted {
  margin: 0;
  font-size: 12px;
}

/* "Barkod Alanı" / "Ürün Resimleri" -- formun bolum basliklari. Duz siyah
   kalin yaziyla fotograf sayaci ve ipucu satirinin arasinda kayboluyorlardi.
   Mor (--brand-dark) secildi: kirmizi ve turuncu bu ekranda UYARI anlaminda
   kullaniliyor (pasif urun, birim secimi), bolum basligi uyari degil. */
.photo-label {
  font-weight: 800;
  font-size: 16px;
  color: var(--brand-dark);
  letter-spacing: 0.2px;
  border-left: 4px solid var(--brand);
  padding-left: 8px;
  line-height: 1.3;
}

.photo-label em {
  display: inline-block;
  font-style: normal;
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}

.photo-shot {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.photo-capture {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 10px;
  border-radius: 9px;
  border: 1px solid var(--brand);
  background: #eef0ff;
  color: var(--brand-dark);
  font-weight: 700;
  cursor: pointer;
}

.photo-capture:hover {
  background: #e3e6ff;
}

.photo-fallback {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}

.photo-preview {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #f1f3f7;
}

.photo-slot-actions {
  display: flex;
  gap: 6px;
}

.photo-slot-actions button {
  flex: 1;
  font-size: 13px;
  padding: 7px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.photo-slot-actions button.danger {
  border-color: #fecdca;
  color: var(--danger);
}

/* --- Kamera cekim ekrani --- */
/* Canli goruntu ve cekilen kare ayni cerceveyi paylasir, boylece
   "Onayla / Yeniden Cek" arasinda gecerken ekran ziplamaz. */

.photo-sheet {
  max-width: 560px;
}

/* Sabit en-boy orani YOK. Kamera 4:3 goruntu veriyor; kutuyu 3:4 portre
   yapinca goruntu icine sigdirilirken kuculuyor ve ust/altta genis siyah
   bant kaliyordu. Yukseklik goruntunun kendi oranindan gelsin. */
.photo-stage {
  position: relative;
  width: 100%;
  min-height: 240px;
  max-height: 62vh;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-stage video,
.photo-stage img {
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  display: block;
}

.photo-camera-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.photo-camera-actions button {
  flex: 1;
  padding: 13px 10px;
  font-weight: 700;
}

.photo-shoot {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}

/* --- Listeler --- */

.barcode-list-block {
  margin-top: 22px;
}

.barcode-list-block h2 {
  font-size: 16px;
  margin-bottom: 8px;
}

.barcode-filter {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin: 12px 0;
}

.barcode-filter label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.barcode-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}

.barcode-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.barcode-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.barcode-line {
  font-size: 14px;
}

.barcode-note {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--line);
  font-size: 14px;
}

.barcode-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.barcode-thumb-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  text-decoration: none;
  color: var(--muted);
  font-size: 11px;
}

.barcode-thumb {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #f1f3f7;
}

.barcode-match {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.barcode-stock-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.barcode-stock-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
}

.barcode-stock-option:hover {
  border-color: var(--brand);
  background: #eef0ff;
}

.barcode-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.barcode-card-actions button {
  flex: 1;
  min-width: 130px;
}

.barcode-form-actions {
  display: flex;
  gap: 8px;
}

.barcode-form-actions button {
  flex: 1;
}

/* Durum rozetleri */

.chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f1f3f7;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.chip.warn {
  border-color: #f4c780;
  background: #fff7ed;
  color: #7a3b00;
}

.chip.status-pending { border-color: #f4c780; background: #fff7ed; color: #7a3b00; }
.chip.status-matched { border-color: #b2ddff; background: #eff8ff; color: #175cd3; }
.chip.status-done { border-color: #a6f4c5; background: #ecfdf3; color: #054f31; }
.chip.status-rejected { border-color: #fecdca; background: #fef3f2; color: #912018; }

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* .ghost projede koyu zeminli cubuklar icin tanimli (beyaz yazi).
   Barkod modulunun kartlari beyaz oldugu icin orada okunmaz hale gelir;
   modul icinde acik zemine gore yeniden tanimlaniyor. */

.barcode-module .ghost,
.barcode-card .ghost {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.barcode-module .ghost:hover,
.barcode-card .ghost:hover {
  border-color: var(--brand);
  background: #eef0ff;
  color: var(--brand-dark);
}

.barcode-module .ghost.danger,
.barcode-card .ghost.danger {
  border-color: #fecdca;
  color: var(--danger);
}

.barcode-module .ghost.danger:hover,
.barcode-card .ghost.danger:hover {
  border-color: var(--danger);
  background: #fef3f2;
  color: var(--danger);
}

/* Modulun birincil dugmeleri (Kontrol Et, Talebi Gonder, kart aksiyonlari) */
.barcode-module button[type="submit"],
.barcode-card button:not(.ghost):not(.barcode-stock-option) {
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.barcode-module button[type="submit"]:hover,
.barcode-card button:not(.ghost):not(.barcode-stock-option):hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

.barcode-module button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Kamera ekrani modul disinda (body sonunda) durdugu icin ayri hedeflenir. */
#photoCameraModal .ghost {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
}

#photoCameraModal .ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* --- Stok karti onerileri --- */
/* Satinalma personelinin en cok kullanacagi yer burasi: goz once guven
   seviyesine, sonra urun adina takilmali. Renk kodu bunun icin. */

.suggest-button {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--brand);
  border-radius: 9px;
  background: #eef0ff;
  color: var(--brand-dark);
  font-weight: 700;
  cursor: pointer;
}

.suggest-button:hover:not(:disabled) {
  background: #e3e6ff;
}

.suggest-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.barcode-suggestions:empty {
  display: none;
}

.suggest-note {
  margin: 8px 0 4px;
  font-size: 13px;
}

/* "Toplam X bulundu, Y listelendi" -- Fiyat Gor ad aramasindaki uyarinin
   karsiligi. Kirmizi, cunku personelin aradigi urun listede OLMAYABILIR ve
   bunu fark etmeden yanlis karta baglamasi en pahali hata. */
.suggest-truncated {
  margin: 6px 0 8px;
  padding: 8px 10px;
  border: 1px solid #fecdca;
  border-left: 4px solid var(--danger);
  border-radius: 8px;
  background: #fffafa;
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.suggest-note.muted {
  color: var(--muted);
  font-size: 12px;
}

.suggest-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 6px;
}

.suggest-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}

.suggest-item:hover {
  background: #f8fafc;
}

/* Guven seviyesi: 3 = hem uretici hem ad, 2 = uretici, 1 = sadece ad */
.suggest-item.confidence-3 { border-left-color: var(--ok); background: #f6fefa; }
.suggest-item.confidence-2 { border-left-color: #175cd3; }
.suggest-item.confidence-1 { border-left-color: #d0d5dd; }

.suggest-reason {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--muted);
}

.suggest-item.confidence-3 .suggest-reason { color: var(--ok); }
.suggest-item.confidence-2 .suggest-reason { color: #175cd3; }

.suggest-name {
  font-size: 14px;
}

.suggest-barcode {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 999px;
  background: #f1f3f7;
}

/* Veri alanlari (arama kutulari, barkod, urun adi) her zaman buyuk harf gorunur.
   JS degeri de buyutuyor; bu kural sadece kullanicinin yazarken aninda gormesi icin.
   Kullanici sayfasindaki ad/e-posta/sifre alanlari bu sinifi TASIMAZ. */
.upper-input {
  text-transform: uppercase;
}

/* text-transform placeholder'a da gecer. Placeholder veri degil, ipucu yazisi --
   "BARKOD OKUT VEYA STOK KODU YAZ" diye bagirmasin. */
.upper-input::placeholder {
  text-transform: none;
}

.barcode-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.barcode-list-head h2 {
  margin: 0;
}

.barcode-list-head button {
  flex: 0 0 auto;
  padding: 6px 14px;
  min-height: 34px;
  font-size: 13px;
}

.barcode-list-block > .muted {
  margin: 2px 0 8px;
  font-size: 12px;
}

/* --- Fotograf gruplari (barkod alani / urun resimleri) --- */
/* Sabit yuva yerine grup: her gruba birden fazla fotograf eklenebiliyor,
   sayisi urune gore degisiyor. */

.photo-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  border: 1px dashed #c3cbd8;
  background: #fbfcfe;
}

.photo-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.photo-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f3f7;
}

.photo-count.is-full {
  color: #7a3b00;
  background: #fff7ed;
}

.photo-group .muted {
  margin: 0;
  font-size: 12px;
}

.photo-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.photo-thumbs:empty {
  display: none;
}

.photo-thumb {
  position: relative;
  width: 92px;
  height: 92px;
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #f1f3f7;
}

.photo-thumb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #fecdca;
  background: #fff;
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.photo-group-actions {
  display: flex;
  gap: 8px;
}

.photo-group-actions .photo-capture {
  flex: 1;
}

.photo-pick {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.photo-pick:hover {
  border-color: var(--brand);
  background: #eef0ff;
  color: var(--brand-dark);
}

.photo-pick.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.photo-capture:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Satinalma ekraninda fotograflar gruba gore ayrilir */

.barcode-photo-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.barcode-photo-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* --- Mikro'ya yazma son onay ekrani --- */
/* Bu panel ERP'ye kalici kayit atiyor. Gorsel olarak da diger her seyden
   ayrilmali ki yanlislikla tiklanmasin. */

.barcode-confirm:empty {
  display: none;
}

.confirm-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
  padding: 14px;
  border: 2px solid var(--brand);
  border-radius: 12px;
  background: #f8f9ff;
}

.confirm-panel h3 {
  margin: 0;
  font-size: 16px;
  color: var(--brand-dark);
}

.confirm-line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 14px;
  flex-wrap: wrap;
}

.confirm-line > span:first-child {
  min-width: 92px;
  color: var(--muted);
  font-size: 12px;
}

.confirm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.confirm-label {
  font-size: 13px;
  font-weight: 700;
}

.unit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.unit-option {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "radio name" "radio meta";
  gap: 0 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}

.unit-option:hover {
  border-color: var(--brand);
}

.unit-option input {
  grid-area: radio;
  width: auto;
  margin: 0;
}

.unit-name {
  grid-area: name;
  font-weight: 700;
  font-size: 14px;
}

.unit-meta {
  grid-area: meta;
  font-size: 12px;
  color: var(--muted);
}

.unit-option input:checked ~ .unit-name {
  color: var(--brand-dark);
}

.confirm-check,
.confirm-override {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.confirm-check input,
.confirm-override input {
  width: auto;
  margin: 0;
}

.confirm-override {
  margin-top: 8px;
}

.confirm-actions {
  display: flex;
  gap: 8px;
}

.confirm-actions button {
  flex: 1;
}

/* Yazma dugmesi kirmizi degil ama vurgulu: geri alinamayan bir islem. */
.confirm-write {
  border: 1px solid var(--ok);
  background: var(--ok);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.confirm-write:hover:not(:disabled) {
  filter: brightness(0.94);
}

.confirm-write:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Internette bulunan urun bilgisi. Satinalma personelinin ilk bakacagi
   yer burasi olabilir, o yuzden onerilerden once ve ayirt edici. */
.web-hit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  margin: 8px 0;
  border-radius: 10px;
  border: 1px solid #b2ddff;
  background: #eff8ff;
  color: #175cd3;
  font-size: 14px;
}

.web-hit strong {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.web-hit span {
  font-weight: 700;
  color: var(--text);
}

.web-hit em {
  font-style: normal;
  font-size: 11px;
  opacity: 0.75;
}

/* --- Oneri karari --- */
/* Tek net cumle + one cikan aday. Bilgi satirlari kasitli olarak yok:
   satinalma personeli "bu mu, degil mi" sorusuna bakiyor. */

.suggest-verdict {
  font-size: 14px;
  font-weight: 700;
  margin: 10px 0 6px;
}

.suggest-verdict.strong {
  color: var(--ok);
}

.suggest-verdict.weak {
  color: var(--muted);
}

/* One cikan aday: parmakla tek dokunusta secilebilecek kadar buyuk */
.suggest-item.is-top {
  border-width: 2px;
  border-left-width: 5px;
  border-color: var(--ok);
  background: #f6fefa;
  padding: 14px;
}

.suggest-item.is-top strong {
  font-size: 16px;
}

.suggest-item.is-top .suggest-name {
  font-size: 15px;
  font-weight: 600;
}

.suggest-more {
  margin-top: 8px;
}

.suggest-more summary {
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 0;
}

.suggest-more[open] summary {
  margin-bottom: 6px;
}
/* --- Rol ve yetki ekrani ---
 *
 * YETKI AGACI KALDIRILDI (2026-09-05). Burada 30 kadar isaretlenebilir
 * kutu vardi ve her kullanici formunda yeniden ciziliyordu. Yetki artik
 * ROLDEN geliyor; ekran yalnizca SONUCU gosteriyor.
 *
 * Kaldirilan siniflar: .perm-group .perm-tree .perm-branch .perm-parent
 * .perm-child .perm-children .role-hint .role-hint-warn -- hicbiri artik
 * markupta yok. .perm-admin-warning ve .check-grid.dormant DURUYOR. */

.role-perms {
  margin: 6px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

.role-perms-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px 14px;
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}

.role-perms-empty {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Kayittaki yetki ile rolun verdigi ayni degil. Renk TEK BASINA bilgi
   tasimasin diye kutunun icinde ayrica YAZIYLA anlatiliyor -- telefonun
   "karanlik moda zorla" ozelligi renkleri bozuyor (iade raporu dersi). */
.role-drift {
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid #f4c780;
  border-radius: 10px;
  background: #fffbeb;
  color: #7c4a03;
  font-size: 13px;
  line-height: 1.4;
}

.drift-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fef3c7;
  color: #7c4a03;
  border: 1px solid #f4c780;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.drift-badge.is-none {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

/* Rol-yetki uyum paneli: sapan kisi sayisi + tek dugmede duzeltme. */
.role-sync {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.role-sync h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

.role-sync-form {
  margin: 0;
  flex: 0 0 auto;
}

/* --- Rol yetkileri ekrani (2026-09-05) ---
 *
 * Roller <details> icinde ve KAPALI aciliyor: gunluk is kullanici listesi,
 * rol duzenleme nadir bir is. Hepsi acik gelseydi 12 rol x ~22 kutu = 264
 * kutu, kullanici listesini ekrandan asagi iterdi. */
.role-editor-list {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.role-block {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.role-block > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  /* Dokunma hedefi: telefonda tek basparmakla aciliyor. */
  min-height: 44px;
  padding: 11px 14px;
  cursor: pointer;
  background: #f8fafc;
  font-weight: 700;
}

.role-block[open] > summary {
  border-bottom: 1px solid var(--line);
}

.role-block-meta {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--muted);
}

.role-block-form {
  padding: 12px 14px 14px;
}

.role-perm-group {
  margin: 12px 0 6px;
  font-size: 13px;
  font-weight: 700;
}

.role-perm-group em {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
}

.role-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px;
}

/* Arkasinda calisan modul olmayan yetkiler: gorunur ama one cikmaz. */
.role-perm-group.dormant,
.role-perm-grid.dormant {
  opacity: 0.6;
}

/* Alt yetki, ana yetkiye bagimli oldugunu gostersin diye girintili ve kesik
   cizgili. Ana yetki kapaliyken alt yetkinin hukmu yok (sekme hic acilmaz). */
.role-perm-grid .check-item.is-child {
  margin-left: 18px;
  border-style: dashed;
  font-size: 12.5px;
}

.role-block-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* --- Etiket basim evragi (2026-09-07, ikinci tasarim) ---
 *
 * EKRAN TEK AKIS. Ilk hali ust uste yiginmis AYRI `.panel`lerdi (baslat /
 * aktif / gecmis); her biri kendi kenarligi ve golgesiyle ayri bir kutu
 * olusturuyordu ve sahibin ifadesiyle "cok duzensiz" gorunuyordu. Simdi tek
 * kabuk icinde bolumler ince cizgilerle ayriliyor: okut -> fiyat -> ekle.
 *
 * Ekranin merkezinde FIYAT var, urun adi degil: personel onu raftaki etiketle
 * karsilastiracak, karar oradan cikiyor.
 *
 * DIKKAT -- `.ghost` global tanimi KOYU barlar icin ve yazi rengi BEYAZ; bu
 * panel beyaz zeminli. O yuzden burada `.ghost` HIC kullanilmiyor, kendi
 * dugme siniflari var. Ayni tuzaga barkod talebi, tarayici penceresi ve
 * siparis modulu de dusmustu.
 */
.labels-module .module-head p { display: block; }

.labels-shell {
  overflow: hidden;
}

/* Ust serit: hangi depo, kac urun. Baslik degil BILGI tasiyor. */
.labels-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #f1f5f9;
  border-bottom: 1px solid var(--line);
}

.labels-bar-depo {
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  min-width: 0;
  overflow-wrap: anywhere;
}

.labels-bar-close {
  flex: 0 0 auto;
  /* 40px: bu projedeki dokunma hedefi alt siniri. Ilk yazimda 34px'ti ve
     olcumde yakalandi -- daraltma her zaman BOSLUKTAN alinir, dugmeden
     degil. */
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #475467;
  font-size: 13px;
  font-weight: 600;
}

/* Bolum: ince cizgiyle ayrilir, kendi kutusu YOKTUR. */
.labels-block {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

/* Genel `label` kurali `margin: 12px 0 6px` tasiyor. Bolumun kendi dolgusu
   zaten var; ustte cift bosluk olusmasin diye sifirlaniyor. Ayni tuzak sayim
   ekraninda "gereksiz bosluk" sikayetine yol acmisti. */
.labels-block > label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
}

/* Sabit depo yazisi: secim yerine BILGI. Tek deposu olan personel bunu okur
   ve dogrudan baslar -- karar vermesi gereken bir sey yok. */
.labels-fixed {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef2ff;
  color: #1e3a8a;
  font-size: 13.5px;
  line-height: 1.4;
}

.labels-block > select {
  width: 100%;
  min-height: 44px;
  margin-bottom: 10px;
}

.labels-scan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.labels-scan-row input {
  min-height: 46px;
  font-size: 16px;   /* 16px altinda iOS sayfayi yakinlastiriyor */
}

.labels-scan-row button {
  min-height: 46px;
  padding: 0 14px;
  white-space: nowrap;
}

.labels-primary {
  width: 100%;
  min-height: 50px;
  font-size: 15px;
  font-weight: 700;
}

/* Kapali dugme KAPALI GORUNMELI. `disabled` ozelligi tiklamayi engelliyordu
   ama dugmenin kendi gradient zemini duruyordu: sahada cekilen fotografta
   "Subeniz tanimli degil" yazisinin hemen altinda parlak mavi, basilabilir
   gorunen bir "Listeyi Baslat" vardi. Bu projenin ajan `last_error` ve
   flas dugmesinden ogrendigi kuralin aynisi: ise yaramayan bir dugme,
   olmayan dugmeden kotudur. */
.labels-primary:disabled,
.labels-primary[disabled] {
  background: var(--line);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;      /* opacity ile soldurmak yaziyi okunmaz yapiyordu */
  box-shadow: none;
}

/* --- Okutulan urun --- */
.labels-product {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
}

.labels-product-head strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
}

.labels-line-code {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* FIYAT: ekranin en onemli parcasi. Tek bakista okunmali. */
.labels-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.labels-price-label {
  width: 100%;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #047857;
}

.labels-price-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  /* Olculdu: #065f46 uzerine #ecfdf5 = 8,9:1 (WCAG alt siniri 4,5:1). */
  color: #065f46;
}

.labels-price-unit {
  font-size: 15px;
  font-weight: 700;
  color: #047857;
}

.labels-price-hint {
  width: 100%;
  margin-top: 4px;
  font-size: 13px;
  color: #475467;
}

.labels-price-none {
  font-size: 13px;
  color: var(--muted);
}

.labels-product-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.labels-product-actions button {
  min-height: 46px;
  font-size: 14px;
}

/* "Etiket dogru, atla" ikincil: beyaz zeminde okunur olmasi icin kendi
   tanimi var (global `.ghost` beyaz yazili). */
.labels-product-actions .ghost {
  border: 1px solid var(--line);
  background: #fff;
  color: #334155;
}

.labels-warn {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fffbeb;
  border: 1px solid #f4c780;
  color: #7c4a03;
  font-size: 13px;
}

/* --- Liste --- */
.labels-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.labels-count {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #1e3a8a;
  text-align: center;
  font-size: 12.5px;
}

.labels-lines {
  display: grid;
  gap: 6px;
}

.labels-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.labels-line-main { min-width: 0; }

.labels-line-main strong {
  display: block;
  font-size: 13.5px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.labels-line-price {
  display: inline-block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 700;
  color: #065f46;
}

.labels-line-remove {
  /* Telefonda tek basparmakla basiliyor: dokunma hedefi kucultulmez. */
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #b42318;
  font-size: 13px;
  font-weight: 700;
}

.labels-foot {
  padding: 12px 14px;
}

/* --- Gecmis: KAPALI acilir --- */
.labels-history-box {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.labels-history-box > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* Dokunma hedefi: telefonda tek basparmakla aciliyor. */
  min-height: 46px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}

.labels-history-box[open] > summary {
  border-bottom: 1px solid var(--line);
}

.labels-history-hint {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.labels-history-box[open] .labels-history-hint { display: none; }

.labels-history-inner { padding: 12px 14px; }

.labels-refresh {
  min-height: 36px;
  margin-bottom: 10px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

.labels-history { display: grid; gap: 8px; }

.labels-history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.labels-doc { font-size: 13px; font-weight: 700; color: #1e3a8a; }

/* Evrak numarasi okunamadiysa bunu SOYLE. Sessiz birakmak, bilgiislemin
   evraki bulamamasi demek. */
.labels-doc-none { color: #b42318; font-weight: 600; }

/* Kullanici arama kutusu (2026-09-05). */
.user-search {
  flex: 1 1 180px;
  min-width: 150px;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
}

/* Admin rolu yetki listesini tamamen bypass ediyor. Yetki verenin bunu
   gormemesi, yetkiyi kistigini sanip acik birakmasina yol aciyordu. */
.perm-admin-warning {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid #f4c780;
  border-radius: 10px;
  background: #fff7ed;
  color: #7a3b00;
  font-size: 14px;
  line-height: 1.5;
}

.web-more summary {
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 0;
}

.web-line {
  font-size: 12px;
  color: var(--text);
  padding: 2px 0;
}

/* Rol rozeti. Admin rolu yetki listesini bypass ettigi icin listede de
   ayirt edilebilir olmali. */
.role-badge.is-admin {
  border-color: #f4c780;
  background: #fff7ed;
  color: #7a3b00;
  font-weight: 700;
}

.role-badge.is-empty {
  color: var(--muted);
  font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Sayim modulu                                                        */
/* ------------------------------------------------------------------ */

/* Sayim hizli is: personel elinde telefon, rafta ayakta. Dokunma alanlari
   buyuk, adim sayisi az, her ekranda tek karar. */

.inventory-module {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* SAYIM KIPINDE DIKEY ALAN SIKISTIRILIR.
   Sayim ayakta, tek elle telefon tutarak yapiliyor: ekranda ne kadar cok
   satir gorunurse personel o kadar az kaydiriyor. Asagidaki daraltmalar
   SADECE `.is-counting` altinda gecerli -- baslatma formu ve sayim listesi
   ekrani ferah kalir, dar olan yalnizca sayarken gorulen ekran. */
.inventory-module.is-counting {
  gap: 8px;
  /* Panelin genel 18px ic boslugu sayarken hem yukarida hem yanlarda yer
     yiyordu; urun adlarina da daha genis yer kaliyor. */
  padding: 12px;
}

/* Devam eden sayim. Sarj bitmesi / uygulama kapanmasi sonrasi personelin
   gordugu ilk sey; satirlar sunucuda durdugu icin hicbir sey kaybolmuyor. */
.inventory-resume {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #a6f4c5;
  border-left: 5px solid var(--ok);
  border-radius: 12px;
  background: #ecfdf3;
  color: #054f31;
}

.inventory-resume strong { font-size: 16px; }
.inventory-resume span { font-size: 13px; font-weight: 600; }

.inventory-resume-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.inventory-resume-actions button {
  flex: 1 1 auto;
  min-height: 44px;
}

.inventory-start {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}

.inventory-start h2 { margin: 0; font-size: 17px; }

.inventory-area-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 460px) {
  .inventory-area-grid { grid-template-columns: 1fr; }
}

/* Sayim basligi: hangi depo, hangi bolge, kac kalem. Personel bunu surekli
   gormeli -- yanlis depoya sayim en pahali hata. */
.inventory-head {
  padding: 8px 12px;
  border: 1px solid var(--brand);
  border-left: 5px solid var(--brand);
  border-radius: 12px;
  background: #eef0ff;
}

.inventory-head.is-sent {
  border-color: #a6f4c5;
  border-left-color: var(--ok);
  background: #ecfdf3;
}

.inventory-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.inventory-head-main strong { font-size: 16px; color: var(--brand-dark); }

.inventory-area {
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
}

.inventory-head-stats {
  display: flex;
  gap: 14px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

.inventory-head-stats b { color: var(--text); font-size: 15px; }

.inventory-sent-badge {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ok);
}

.inventory-scan {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

/* Genel `label` kurali `margin: 12px 0 6px` tasiyor. Bu kutular flex ve
   aralarindaki bosluk zaten `gap` ile veriliyordu; ikisi ust uste binince
   kutu 18px bosuna sisiyordu. Aralik tek yerden (gap) yonetilsin. */
.inventory-scan label,
.inventory-qty-form label {
  margin: 0;
}

/* Baslik + (barkod kutusu & kamera dugmesi) tek grup. Aralarindaki 4px,
   formun kendi 8px'inden ayri tutuluyor ki etiket kendi alanina yapissin. */
.inventory-scan-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inventory-scan button,
.inventory-qty-form button {
  min-height: 48px;
  font-size: 16px;
}

/* Okutulan urun: eklemeden ONCE gosteriliyor ki yanlis okuma ekranda
   yakalansin. */
.inventory-product {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.inventory-product-name {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.inventory-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.inventory-product-meta span {
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-weight: 700;
}

.inventory-passive {
  padding: 8px 10px;
  border: 1px solid #fecdca;
  border-left: 4px solid var(--danger);
  border-radius: 8px;
  background: #fef3f2;
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
}

.inventory-qty-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inventory-lines {
  display: flex;
  flex-direction: column;
  /* Satirlarin kendi cercevesi zaten birbirinden ayiriyor; aradaki bosluk
     ayirt etmek icin degil, sadece nefes icin. 4px yetiyor. */
  gap: 4px;
}

.inventory-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.inventory-line-main { min-width: 0; }

.inventory-line-main strong {
  display: block;
  font-size: 14px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-line-main span {
  display: block;
  font-size: 12px;
  line-height: 1.25;
  color: var(--muted);
}

.inventory-line-qty {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--brand-dark);
}

.inventory-line-del {
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--danger);
  background: #fff;
  border: 1px solid #fecdca;
  border-radius: 8px;
  cursor: pointer;
}

.inventory-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inventory-actions button {
  flex: 1 1 auto;
  min-height: 48px;
}

/* Gonderme: modulun tek geri alinamaz adimi. Rengi de onu soylesin. */
.inventory-send {
  background: var(--ok);
  border-color: var(--ok);
  font-weight: 800;
}

.inventory-history { margin-top: 4px; }

.inventory-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.inventory-history-row:hover { border-color: var(--brand); }

.inventory-history-main { min-width: 0; }
.inventory-history-main strong { display: block; font-size: 14px; }
.inventory-history-main em { font-style: normal; font-size: 12px; color: var(--muted); }

/* Sag sutun: ustte kalem sayisi + durum, ALTINDA iki tarih.
   Sahibin istegi 2026-08-22: "Mikro'ya gonderildi yazisinin altina koyabiliriz".
   Sayim bugun yapilip yarin gonderilebiliyor; hangi tarihin ne oldugu ekranda
   gorunmedigi surece kimse ayirt edemiyordu. */
.inventory-history-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.inventory-history-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tarihler durum rozetinden kucuk ve soluk: satirin ana bilgisi durum,
   tarihler onun aciklamasi. Ayni agirlikta olurlarsa satir okunmuyor. */
.inventory-history-dates {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 11px;
  line-height: 1.35;
  opacity: 0.85;
}

.inventory-history-dates b { font-weight: 700; color: var(--text); }

/* Dar ekranda satir dikey yigina donsun: sag sutun iki tarih tasidigi icin
   yan yana dizilis, sol taraftaki depo adini sikistiriyordu. */
@media (max-width: 460px) {
  .inventory-history-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .inventory-history-meta { align-items: flex-start; }
  .inventory-history-dates { align-items: flex-start; }
}

.inventory-status {
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
}

.inventory-status.is-open { background: #eef0ff; color: var(--brand-dark); }
.inventory-status.is-sent { background: #ecfdf3; color: var(--ok); }

/* Onay akisi: personel sayar -> mudur onaylar -> Mikro'ya gider. */
.inventory-pending-badge {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #7a3b00;
}

.inventory-rejected {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #fecdca;
  border-left: 5px solid var(--danger);
  border-radius: 10px;
  background: #fef3f2;
  color: #7a271a;
}

.inventory-rejected strong { font-size: 14px; font-weight: 800; }
.inventory-rejected span { font-size: 13px; font-weight: 600; }
.inventory-rejected em { font-style: normal; font-size: 11px; opacity: 0.8; }

/* Onaya sunma: geri alinabilir bir adim, mor. Gonderme yesil ve geri
   alinamaz -- ikisi ayni renkte olmamali. */
.inventory-submit {
  background: var(--brand);
  border-color: var(--brand);
  font-weight: 800;
}

.inventory-status.is-pending { background: #fff7ed; color: #7a3b00; }

/* Sayimi kim yapti / kim onaya sundu / kim gonderdi. Mudur onaylarken en cok
   sordugu soru bu; her ekranda gorunur olmali. */
.inventory-people {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.inventory-people b { color: var(--text); font-weight: 700; }

/* Ortak el terminalinde giren hesap ile sayan kisi farkli olabilir; ikisi
   ayni degilse hesap adi da kucuk puntoyla gorunur (denetim izi). */
.inventory-account { opacity: 0.75; font-style: italic; }

/* Mudurun onay kutusu. Gonderme dugmesi kutu dolmadan pasif -- onay bilincli
   bir islem olsun, refleksle basilan bir dugme degil. */
.inventory-approve {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #a6f4c5;
  border-left: 5px solid var(--ok);
  border-radius: 12px;
  background: #ecfdf3;
}

.inventory-approve label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inventory-approve label span {
  font-size: 14px;
  font-weight: 800;
  color: #054f31;
  line-height: 1.35;
}

.inventory-approve input {
  min-height: 46px;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 600;
  border: 2px solid var(--ok);
  border-radius: 8px;
  background: #fff;
}

.inventory-approve .inventory-send { min-height: 48px; }

.inventory-approve .inventory-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- SAYIM KIPI ----------------------------------------------------
   Sayim acikken ekranda SADECE sayima ait olanlar kalir. Baslatma formu,
   "Sayimlarim" listesi ve devam kutusu gizlenir.

   Sebep: sayim ayakta yapilan, tek elle telefon tutulan bir is. Ekranda
   fazladan ne varsa yanlis dokunma sebebi -- ve personel her okutmadan sonra
   listeyi kaydirmak zorunda kalmamali. */
.inventory-module.is-counting .inventory-start,
.inventory-module.is-counting #inventoryResume,
.inventory-module.is-counting .inventory-history {
  display: none !important;
}


/* Kipteyken modul basligi kucultulur; yer sayim satirlarina kalsin. */
.inventory-module.is-counting .module-head h1 {
  font-size: 18px;
}

/* Sayim basligi: baslik SOLDA, "Ana ekran" SAGDA, tek satir ve kompakt.
   Genel .module-head grid'i `auto minmax(0,1fr)` -- yani link genis sutunda
   ortalanip bos yer kapliyordu. Burada sutunlar ters cevriliyor: baslik
   buyuyen sutunu alir, link kendi genisligi kadar yer kaplar ve saga yaslanir.
   Sayimda dikey alan degerli; satirlar icin yer kalsin. */
.inventory-module .module-head {
  /* Baslikta artik tek oge var ("Ana ekran" topbar a tasindi). */
  grid-template-columns: 1fr;
  padding: 10px 14px;
}

.inventory-module .module-head h1 {
  font-size: 19px;
  line-height: 1.2;
}

/* Sayarken baslikta yalnizca "Sayim" yazisi var; hangi depoda oldugu zaten
   hemen altindaki mavi kutuda. Bu yuzden burasi ince bir ayirac kadar
   kaliyor -- kazanilan yer satirlara gidiyor. */
.inventory-module.is-counting .module-head {
  padding: 5px 14px 6px;
}

.inventory-module.is-counting .module-head h1 {
  font-size: 16px;
  line-height: 1.15;
}


/* --- Iade / Imha / Promosyon raporu (patron ekrani) --- */

.returns-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

/* Genel `label` kurali margin tasiyor; kutu zaten gap kullaniyor.
   Ikisi ust uste binmesin (sayim ekraninda ayni tuzaga dusulmustu). */
.returns-filter label { margin: 0; }

.returns-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.returns-filter-row select {
  flex: 1 1 120px;
  min-width: 0;
  min-height: 42px;
}

.returns-filter-row button {
  flex: 0 0 auto;
  min-height: 42px;
  padding-inline: 18px;
}

.returns-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.returns-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.returns-card strong { font-size: 17px; }
.returns-card em { font-style: normal; font-size: 12px; color: var(--muted); }

.returns-card-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* Ana rakam iadeye cikan: toplam ziyan bu. */
.returns-card.is-main { border-left-color: var(--brand); background: #eef0ff; }
.returns-card.is-main strong { color: var(--brand-dark); }
/* Firmaya iade = para geri alindi. */
.returns-card.is-good { border-left-color: var(--ok); background: #ecfdf3; }
.returns-card.is-good strong { color: #054f31; }
/* Imha = tam zarar. */
.returns-card.is-bad { border-left-color: var(--danger); background: #fffafa; }
.returns-card.is-bad strong { color: var(--danger); }

.returns-warn {
  margin: 6px 0 8px;
  padding: 8px 10px;
  border: 1px solid #fecdca;
  border-left: 4px solid var(--danger);
  border-radius: 8px;
  background: #fffafa;
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
}

/* Mukerrer sayim uyarisi -- ekranda kalici durur, cunku "iade + imha"
   toplamak bu raporun en kolay yapilan hatasi. */
.returns-note {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.returns-branch,
.returns-staff {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 6px;
}

.returns-branch > summary,
.returns-staff > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.returns-branch > summary::-webkit-details-marker,
.returns-staff > summary::-webkit-details-marker { display: none; }

.returns-branch-name { font-size: 15px; }

.returns-branch-figures {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.returns-pending {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.returns-branch-body { padding: 0 10px 10px; }

/* Devir + giren - cikan = kalan. Rapor kendi kendini denetlesin diye
   satirin tamami gorunuyor. */
.returns-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

.returns-flow b { color: var(--text); font-variant-numeric: tabular-nums; }
.returns-flow-result b { color: var(--brand-dark); }

.returns-staff { margin: 0 0 6px; background: #fcfdff; }
.returns-staff-name { font-size: 14px; }
.returns-staff-value { font-size: 13px; font-variant-numeric: tabular-nums; }

/* Genis tablo SAYFAYI degil KENDINI kaydirir; telefonda yatay kaymasin. */
.returns-table-wrap {
  overflow-x: auto;
  padding: 0 10px 10px;
}

.returns-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.returns-table th,
.returns-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.returns-table th {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.returns-table .returns-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.returns-code { color: var(--muted); }

.returns-type {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.returns-type.is-iade { background: #eef0ff; color: var(--brand-dark); }
.returns-type.is-imha { background: #fee4e2; color: var(--danger); }
.returns-type.is-promosyon { background: #fff7ed; color: #7a3b00; }

.returns-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.returns-actions .ghost,
.returns-actions button {
  flex: 1 1 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* .ghost genel kuralda beyaz yazili (koyu cubuklar icin). Bu modul beyaz
   kart uzerinde, o yuzden yeniden tanimlaniyor -- barkod modulunde de
   ayni sey yapilmisti. */
.returns-module .ghost {
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
}

.returns-mail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.returns-mail label { margin: 0; }
.returns-mail input { min-height: 42px; }

.returns-mail-actions {
  display: flex;
  gap: 8px;
}

.returns-mail-actions button {
  flex: 1 1 auto;
  min-height: 44px;
}

/* Akis denklemi tutmadiginda cikan fark. Gizlenmiyor: sessizce yuvarlanan
   bir rakam, patronun yanlis karar verecegi tek yer. */
.returns-flow-diff {
  color: var(--danger);
  font-weight: 700;
}
.returns-flow-diff b { color: var(--danger); }

/* Kapsam etiketi: "Firmaya iade (iade deposundan)". Rakamin neyi olctugu
   basligin yaninda yazsin -- olculdu ki tedarikci iadelerinin %91'i iade
   deposuna ugramadan kesiliyor, bu rakam onlari icermiyor. */
.returns-scope {
  font-style: normal;
  font-weight: 600;
  opacity: 0.75;
}

/* --- Sorumlu -> sube -> urun kirilimi (2026-08-20 yeniden duzenlendi) --- */

.returns-staff-block {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 8px;
}

.returns-staff-block > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.returns-staff-block > summary::-webkit-details-marker { display: none; }
.returns-staff-body { padding: 0 10px 10px; }

.returns-staff-figures {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.returns-good { color: var(--ok); }
.returns-badv { color: var(--danger); }

/* Tabloda giris ve cikis sutunlari gorsel olarak ayrilsin: patron "bu mal
   cikti mi, kesildi mi" sorusunu tek bakista okuyabilmeli. */
.returns-group-in { background: #eef0ff; }
.returns-group-out { background: #ecfdf3; }
.returns-table td.returns-out { background: #fbfffd; }

.returns-status {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.returns-status.is-depoda  { background: #fff7ed; color: #7a3b00; }
.returns-status.is-firmaya { background: #ecfdf3; color: #054f31; }
.returns-status.is-kismen  { background: #eef0ff; color: var(--brand-dark); }
.returns-status.is-imha    { background: #fee4e2; color: var(--danger); }
.returns-status.is-diger   { background: #f1f5f9; color: var(--muted); }

/* Sube bakiye seridi: depo bazinda geliyor, sorumluya bolunemiyor. */
.returns-balances {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  padding: 8px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  font-size: 12px;
}

.returns-balances-label {
  font-weight: 700;
  color: var(--muted);
  width: 100%;
}

.returns-balance { color: var(--muted); }
.returns-balance b { color: var(--text); font-variant-numeric: tabular-nums; }
.returns-balance em { font-style: normal; opacity: 0.7; }

/* Bekleyen urunler: donmus para listesi. */
.returns-pending-block {
  border: 1px solid #fed7aa;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  background: #fffbeb;
  margin-top: 10px;
}

.returns-pending-block > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.returns-pending-block > summary::-webkit-details-marker { display: none; }
.returns-pending-body { padding: 0 10px 10px; }

/* --- Etiketli rakamlar (2026-08-20) ---
   Once uc rakam yan yana duruyor ve hangisinin ne oldugunu SADECE RENK
   soyluyordu. Sahibi ekranda ayirt edemedi -- ustelik Android'in
   "karanlik moda zorla" ozelligi renkleri bozuyor. Artik her rakamin
   ustunde adi yaziyor; renk yalnizca destekleyici. */
.returns-fig {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 96px;
}

.returns-fig em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--muted);
  white-space: nowrap;
}

.returns-fig b {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.returns-fig.is-in b { color: var(--brand-dark); }
.returns-fig.is-out b { color: var(--ok); }
.returns-fig.is-imha b { color: var(--danger); }

/* Renk aciklamasi: hangi renk ne demek, ekranin basinda yazsin. */
.returns-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 8px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
  font-size: 12px;
  color: var(--muted);
}

.returns-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}

.returns-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.returns-dot.is-in { background: var(--brand); }
.returns-dot.is-out { background: var(--ok); }
.returns-dot.is-imha { background: var(--danger); }

.returns-legend-note { margin-left: auto; opacity: 0.8; }

/* Telefonda sorumlu adi ve rakamlar alt alta gecsin, sikismasin. */
@media (max-width: 560px) {
  .returns-staff-block > summary,
  .returns-branch > summary {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .returns-staff-figures,
  .returns-branch-figures {
    justify-content: space-between;
    width: 100%;
  }
  .returns-fig { min-width: 0; flex: 1 1 auto; align-items: flex-start; }
}

/* --- Devir / kalan sutunlari ve toplam satiri (2026-08-20) --- */

.returns-group-devir { background: #f8fafc; }
.returns-group-kalan { background: #fffbeb; }
.returns-table td.returns-devir { background: #fcfdff; color: var(--muted); }
.returns-table td.returns-kalan { background: #fffdf5; font-weight: 700; }
.returns-table th small { font-weight: 600; opacity: 0.7; }

.returns-total td {
  padding: 7px 8px;
  border-top: 2px solid #cbd5e1;
  background: #f1f5f9;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* --- Promosyon bolumu ---
   Ayri duruyor cunku BASKA BIR IS: kirik mal degil, kasada musteriye hediye
   edilen saglam mal. Ziyan rakamina karismasin. */
.returns-promo-block {
  border: 1px solid #ddd6fe;
  border-left: 4px solid #7c3aed;
  border-radius: 10px;
  background: #faf9ff;
  margin-top: 10px;
}

.returns-promo-block > summary,
.returns-promo-staff > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.returns-promo-block > summary::-webkit-details-marker,
.returns-promo-staff > summary::-webkit-details-marker { display: none; }

.returns-promo-outer { padding: 0 10px 10px; }

.returns-promo-staff {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 6px;
}

.returns-promo-body { padding: 0 8px 8px; }

.returns-promo-branch-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.returns-promo-branch-head b { color: #7c3aed; font-variant-numeric: tabular-nums; }
.returns-fig.is-promo b { color: #7c3aed; }

/* HIZALAMA (2026-08-20).
   Once imha sutunu sifir oldugunda HIC BASILMIYORDU; o zaman "Firmaya iade"
   sutunu saga kayiyor ve satirlar birbirini tutmuyordu. Sahibi ekranda
   gordu. Artik uc sutun da her zaman basiliyor, sabit genislikte ve saga
   dayali; sifir olan soluk gorunuyor ama YERINI KORUYOR. */
.returns-staff-figures,
.returns-branch-figures {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.returns-fig {
  width: 130px;
  min-width: 130px;
  align-items: flex-end;
  text-align: right;
}

.returns-fig.is-zero b { color: var(--muted); opacity: 0.5; }
.returns-fig.is-zero em { opacity: 0.6; }

@media (max-width: 720px) {
  .returns-fig { width: auto; min-width: 90px; }
}

/* "Guncel toplam iade bekleyen" karti -- donmus para.
   Once asagida kapali bir bolumun icindeydi; en onemli rakam olmasina
   ragmen gorunmuyordu (sahibin istegi 2026-08-20, ustteki kartlara alindi). */
.returns-card.is-wait {
  border-left-color: #f59e0b;
  background: #fffbeb;
}
.returns-card.is-wait strong { color: #b45309; }

/* GUNCEL TOPLAM IADE BEKLEYEN -- donem seciminin hemen altinda ince serit.
   Kapali bir bolumun icinde de, kartlarin arasinda da goze carpmiyordu;
   donmus parayi gosteren en onemli rakam bu (sahibin istegi 2026-08-20).
   Tek satir, buyuk punto, miktar yok. */
.returns-headline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  padding: 10px 14px;
  margin: 0 0 10px;
  border: 1px solid #fed7aa;
  border-top: 3px solid #f59e0b;
  border-radius: 10px;
  background: #fffbeb;
  white-space: nowrap;
}

.returns-headline span {
  font-size: 15px;
  font-weight: 800;
  color: #7a3b00;
}

.returns-headline b {
  font-size: 26px;
  font-weight: 900;
  color: #b45309;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .returns-headline { flex-wrap: wrap; white-space: normal; gap: 2px; justify-content: center; text-align: center; }
  .returns-headline b { font-size: 22px; }
}

/* Kartlardaki donem etiketi: serit GUNCEL, kartlar SECILEN AY.
   Ikisi ayni ekranda oldugu icin hangisinin hangi donem oldugu yazmali. */
.returns-period {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}

/* --- Iade raporu: dikey sikistirma (2026-08-20) ---
   Ekranin ustunde kullanilamayan alan vardi; patron rakami gormek icin
   kaydirmak zorunda kaliyordu. Dokunma hedeflerine (Getir dugmesi, secim
   kutulari) DOKUNULMADI -- daraltma her zaman bosluktan alinir, dugmeden
   degil. */
.returns-module .module-head { padding: 10px 14px; }
.returns-module .module-head p { margin: 1px 0 0; font-size: 12px; }

.returns-filter { margin-bottom: 8px; }
.returns-headline { margin: 0 0 8px; padding: 9px 14px; }
.returns-cards { gap: 7px; margin-bottom: 7px; }
.returns-card { padding: 8px 10px; }
.returns-note { margin: 0 0 8px; padding: 7px 9px; }
.returns-legend { margin-bottom: 8px; padding: 7px 10px; }

/* Bos mesaj kutusu artik hic uretilmiyor (renderMessage), ama bir sey
   kalirsa da yer kaplamasin. */
#returnsMessage:empty { display: none; }

/* Sorumlu adinin altinda donem. Ustteki "guncel toplam" seridi BIRIKIMLI,
   sorumlu satirlari SECILEN AYIN hareketi -- ikisi ayni ekranda oldugu icin
   hangisinin hangi donem oldugu her satirda yazmali (sahibin istegi
   2026-08-20). */
.returns-staff-name .returns-period {
  font-size: 11px;
  opacity: 0.7;
}

/* --- SEKMELER (2026-08-20) ---
   Uc yeni bilgi eklenirken ekran uzamasin diye. Ayni anda tek panel gorunur;
   ust ozet (serit + kartlar + trend) her zaman ekranda kalir. */
.returns-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--line);
}

.returns-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.returns-tab.is-active {
  background: #fff;
  color: var(--brand-dark);
  border-color: var(--brand);
  border-bottom: 2px solid #fff;
  margin-bottom: -2px;
}

/* --- TREND SERIDI ---
   Ayri bolum DEGIL: kartlarin altinda tek satir. Bir aya tiklayinca rapor o
   aya gecer -- hem bilgi hem kisayol. Tek ay varsa hic cizilmez; iki noktasi
   olmayan sey trend degildir. */
.returns-trend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.returns-trend-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.returns-trend-label em { font-style: normal; text-transform: none; opacity: 0.8; }

.returns-trend-items {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  overflow-x: auto;
}

.returns-trend-item {
  flex: 1 1 0;
  min-width: 82px;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.returns-trend-item:hover { background: #f8fafc; }

.returns-trend-item.is-current {
  border-color: var(--brand);
  background: #eef0ff;
}

.returns-trend-bar {
  display: block;
  width: 100%;
  height: 34px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.returns-trend-bar i {
  display: block;
  width: 60%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--brand);
  opacity: 0.55;
}

.returns-trend-item.is-current .returns-trend-bar i { opacity: 1; }

.returns-trend-val {
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.returns-trend-ay { font-size: 11px; color: var(--muted); }

/* --- Tedarikci / sube siralamasi --- */
.returns-share { color: var(--muted); }

.returns-rate {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

/* Dusuk geri kazanim dikkat cekmeli: o subenin mali iade deposunda
   kaliyor ya da imhaya gidiyor demektir. */
.returns-rate.is-iyi { background: #ecfdf3; color: #054f31; }
.returns-rate.is-orta { background: #fff7ed; color: #7a3b00; }
.returns-rate.is-dusuk { background: #fee4e2; color: var(--danger); }

/* Kullanici deposu secimi (2026-09-07). Depo tiklerinin hemen altinda ve
   onlara BAGLI: yalnizca tikli depolar burada secenek olur. */
.home-warehouse-select {
  width: 100%;
  min-height: 44px;
  margin-bottom: 12px;
}

/* Gecmis satiri ACILIR: icinde urun listesi ve "Tekrar Gonder" var.
   Sahibin istegi 2026-09-07: "gitmediyse sisteme 2. kez gonderebileyim". */
.labels-history-row > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* Dokunma hedefi: telefonda tek basparmakla aciliyor. */
  min-height: 46px;
  padding: 10px 12px;
  cursor: pointer;
}

.labels-history-row[open] > summary { border-bottom: 1px solid var(--line); }

.labels-history-detail { padding: 10px 12px 12px; }

.labels-history-lines {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 13px;
  color: #334155;
}

/* Mikro'da etiket evragi SILINEMIYOR; tekrar gonderim kalici bir kopya
   birakir. Uyari renkle degil YAZIYLA da anlatiliyor. */
.labels-history-warn {
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid #f4c780;
  border-radius: 8px;
  background: #fffbeb;
  color: #7c4a03;
  font-size: 12.5px;
  line-height: 1.45;
}

.labels-resend {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
}

/* ===================================================================
   MESAJ MODULU (2026-09-08)
   =================================================================== */

/* --- Ust bardaki zil --- */
.msg-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;              /* topbar KOYU: burada beyaz dogru olan */
  cursor: pointer;
}

.msg-bell:hover { background: rgba(255, 255, 255, 0.22); }

.msg-bell-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
}

/* --- Gelen kutusu penceresi --- */
.msg-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.55);
}

/* BU SATIR OLMADAN PENCERE HIC KAPANMIYOR ve HERKESIN ekranini kilitliyor.
   `hidden` niteliginin `display:none` kurali TARAYICININ kendi stil
   dosyasindan geliyor; yukaridaki `display:flex` bir YAZAR kurali ve yazar
   kurallari tarayicininkini yener. Sonuc: kutu her sayfada acik duruyor,
   "Kapat" dugmesi `hidden = true` yapiyor ve hicbir sey degismiyor.
   `.notice-modal[hidden]` ayni satiri tasiyor -- ornegi kopyalarken bu
   satir atlandi. display degistiren her modal kuralinin esi olmali. */
.msg-modal[hidden] { display: none; }

.msg-box {
  width: 100%;
  max-width: 520px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.3);
  overflow: hidden;
}

.msg-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.msg-box-head h2 { margin: 0; font-size: 17px; }

.msg-close {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);        /* global .ghost beyaz yazar; burada zemin BEYAZ */
  font-weight: 600;
  cursor: pointer;
}

.msg-list { padding: 8px 16px 16px; overflow-y: auto; }

.msg-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.msg-item:last-child { border-bottom: 0; }

.msg-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.msg-item-head strong { font-size: 15px; }

.msg-item-meta { color: var(--muted); font-size: 12px; }

/* Mesaj metni: satir sonlari korunur, uzun kelime tasmaz. */
.msg-item-body {
  margin: 6px 0 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.45;
}

.msg-read {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: var(--brand, #4338ca);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.msg-item.is-read { opacity: 0.62; }
.msg-item.is-read .msg-read { display: none; }

/* --- Mesaj Gonder ekrani --- */
.msg-compose,
.msg-sent {
  padding: 14px;
  border-top: 1px solid var(--line);
}

.msg-field { margin-bottom: 12px; }

/* Kapsayicida gap YOK, o yuzden label kendi bosluguyla calisiyor. */
.msg-field label {
  display: block;
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 14px;
}

.msg-field input,
.msg-field select,
.msg-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font-size: 15px;
  font-family: inherit;
}

.msg-field textarea { min-height: 110px; resize: vertical; line-height: 1.45; }

.msg-counter {
  display: block;
  margin-top: 4px;
  text-align: right;
  color: var(--muted);
  font-size: 12px;
}

/* Kullanici listesi: kaydirilabilir, ama telefonu doldurmayacak kadar. */
.msg-people {
  margin-top: 8px;
  max-height: 230px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfdff;
}

.msg-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.msg-person:last-child { border-bottom: 0; }

/* Dokunma hedefi kucultulmez: telefon tek elle kullaniliyor. */
.msg-person input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; }

.msg-person-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.msg-person-role { color: var(--muted); font-size: 12px; }

/* KIME gidecegi her zaman ekranda. Toplu gonderimde en cok istenen sey bu. */
.msg-target {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #eef2ff;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
}

.msg-target.is-empty { background: #f1f5f9; color: var(--muted); font-weight: 500; }

.msg-send {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 10px;
  background: var(--brand, #4338ca);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.msg-send:disabled {
  background: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.msg-status { margin: 10px 0 0; padding: 10px 12px; border-radius: 9px; font-size: 14px; }
.msg-status.ok { background: #dcfce7; color: #14532d; }
.msg-status.error { background: #fee2e2; color: #7f1d1d; }

.msg-sent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.msg-sent-head h2 { margin: 0; font-size: 16px; }

/* Bu panel BEYAZ; global .ghost beyaz yazi verir ve dugme kaybolur.
   Barkod, Siparis ve Etiket modullerinde de ayni sey yapildi. */
.messages-shell .ghost,
.msg-sent-head .ghost {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.msg-sent-item {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.msg-sent-item:last-child { border-bottom: 0; }

.msg-sent-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.msg-readcount {
  padding: 2px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.msg-readcount.is-all { background: #dcfce7; color: #14532d; }

.msg-sent-who { margin: 6px 0 0; padding-left: 16px; color: var(--muted); font-size: 12.5px; }
.msg-sent-who li { margin: 2px 0; }
.msg-sent-who .okundu { color: #14532d; font-weight: 600; }

/* Bildirim izni dugmesi: kutunun basinda, goz ardi edilemeyecek kadar acik
   ama pencereyi de bogmayacak kadar sade. Izin verilince JS gizliyor. */
.msg-notify-ask {
  display: block;
  width: calc(100% - 32px);
  margin: 12px 16px 0;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #c7d2fe;
  border-radius: 9px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.msg-notify-ask:disabled {
  border-color: var(--line);
  background: #f1f5f9;
  color: var(--muted);
  cursor: not-allowed;
}

/* --- Mesaja fotograf ekleme --- */
.msg-photo-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.msg-photo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;          /* telefonda tek elle basiliyor, kucultulmez */
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.msg-photo-btn:hover { background: #f8fafc; }

.msg-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.msg-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: #f1f5f9;
}

.msg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Kaldirma dugmesi kucuk gorunur ama dokunma hedefi 28px -- parmakla
   basilabilecek en kucuk makul olcu. */
.msg-thumb button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 15px;
  line-height: 28px;
  cursor: pointer;
}

/* --- Gelen mesajdaki fotograflar --- */
.msg-item-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

/* Kucuk hali kare; tiklayinca tam genislige aciliyor. Ayri bir pencere
   acmiyoruz -- gelen kutusu zaten bir pencere, ustune ikincisi yigmak
   telefonda kapatmayi zorlastirirdi. */
.msg-photo {
  width: 92px;
  height: 92px;
  border: 1px solid var(--line);
  border-radius: 9px;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
}

.msg-photo.is-open {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  cursor: zoom-out;
  background: #0f172a;
}

/* --- Kim kime yazabilir --- */
.msg-rules { padding: 14px; border-top: 1px solid var(--line); }
.msg-rules-note { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }

.msg-rule-targets {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* telefonda iki sutun sigiyor */
  gap: 6px;
  margin-bottom: 12px;
}

.msg-rule-target {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;                  /* dokunma hedefi kucultulmez */
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font-size: 13.5px;
  cursor: pointer;
}

.msg-rule-target input { width: 19px; height: 19px; flex: 0 0 auto; }
.msg-rule-target span { overflow-wrap: anywhere; }

/* Secili hedef gorunur olsun: kutucuk tek basina hizli okunmuyor. */
.msg-rule-target.is-on { border-color: #a5b4fc; background: #eef2ff; }

.msg-rules-summary { margin-top: 14px; }

.msg-rule-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.msg-rule-row:last-child { border-bottom: 0; }
.msg-rule-row strong { display: block; margin-bottom: 2px; }
.msg-rule-row .muted { overflow-wrap: anywhere; }

/* "Hicbiri" hali kirmizi degil ama fark edilir: o rol kimseye yazamaz. */
.msg-rule-row .yok { color: #9a3412; font-weight: 600; }

/* Hesaplanan fiyat rozeti (Stok Gor). Mikro'nun gercek fiyati DEGIL: 1. birim
   fiyatinin katsayiyla carpilmis hali. Olculdu -- gercek 2. birim fiyati olan
   kartlarin %30'unda carpim daha ucuz kaliyor, yani bu rakam kasada odenecek
   tutar olmayabilir. Sari/uyari tonu bilerek: yesil ya da notr bir renk
   "onaylanmis fiyat" izlenimi verirdi. */
.stock-price-calc {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fef3c7;
  color: #78350f;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.stock-price-diff.is-calc { background: #fef3c7; color: #78350f; }

/* ======================= SEPET ANALIZI (2026-09-08) =======================
   Panel ACIK temali: bu bloktaki her renk beyaz ya da cok acik bir zemine
   gore secildi ve olculdu (bkz. CLAUDE.md "Olcmeden yayinlama"). Koyu zemine
   yazan bir kural buraya konulursa okunmaz -- Stok Gor basliginda tam olarak
   bu yasandi (1,06:1). */

.basket-filter {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.basket-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.basket-field {
  display: grid;
  gap: 4px;
}

/* Kutunun kendi `gap`i var; genel `label` kurali 12px ust bosluk ekleyip
   satiri sessizce buyutuyordu (sayim ekraninda ayni sey yasandi). */
.basket-field label {
  margin: 0;
  font-size: 12px;
  color: #475569;
}

.basket-filter input[type="date"],
.basket-filter select {
  width: 100%;
}

.basket-primary {
  height: 42px;
}

.basket-summary {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}

.basket-range {
  margin: 0 0 8px;
  font-weight: 700;
}

.basket-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.basket-total {
  text-align: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 4px;
}

.basket-total span {
  display: block;
  font-size: 11px;
  color: #475569;
}

.basket-total strong {
  display: block;
  font-size: 18px;
  line-height: 1.2;
}

.basket-total small {
  display: block;
  font-size: 11px;
  color: #475569;
}

/* Toplam sutunu ayrilir: paydayi gosteren rakam bu, "100 musteriden" oradan
   okunuyor. */
.basket-total.is-sum {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.basket-list {
  display: grid;
  gap: 8px;
}

.basket-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

/* Dorduncu sutun ::after okudur. Ayri bir eleman eklemek yerine pseudo
   kullaniliyor ki isaretleme sade kalsin. */
.basket-row-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 48px;
}

.basket-row-head::after {
  content: '\25BE';
  font-size: 14px;
  color: #475569;
  transition: transform 0.15s ease;
}

.basket-row-head[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.basket-rank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef2ff;
  color: #3730a3;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
}

.basket-name {
  min-width: 0;
}

.basket-name strong {
  display: block;
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.basket-name small {
  display: block;
  font-size: 11px;
  color: #475569;
}

.basket-figure {
  text-align: right;
  white-space: nowrap;
}

.basket-figure b {
  display: block;
  font-size: 16px;
  color: #065f46;
}

.basket-figure small {
  display: block;
  font-size: 11px;
  color: #475569;
}

/* Perakende / faturali YAN YANA. Ayrimin gorunur olmasi bu raporun tek
   sebebi: canli veride iki kitle birbirinin tersine davraniyor. */
.basket-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding: 0 10px 10px;
}

.basket-split-cell {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
}

.basket-split-cell span {
  display: block;
  font-size: 11px;
  color: #475569;
}

.basket-split-cell b {
  font-size: 14px;
}

.basket-split-cell small {
  font-size: 11px;
  color: #475569;
  margin-left: 4px;
}

.basket-branches {
  padding: 0 10px 10px;
}

.basket-branch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.basket-branch-table th,
.basket-branch-table td {
  padding: 5px 4px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: top;
}

.basket-branch-table th:first-child,
.basket-branch-table td:first-child {
  text-align: left;
}

.basket-branch-table th {
  font-size: 11px;
  color: #475569;
  font-weight: 600;
}

.basket-branch-table small {
  display: block;
  font-size: 10px;
  color: #475569;
}

.basket-branch-table td.is-sum b {
  color: #065f46;
}

.basket-excluded {
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.basket-excluded h2 {
  margin: 0 0 8px;
  font-size: 15px;
}

.basket-excluded ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.basket-excluded li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

/* --- SEPET ANALIZI: MASAUSTU (2026-09-08) --------------------------------
   Telefonda satir uc kata iniyor (baslik / perakende-faturali / kirilim).
   Masaustunde bu dikey yigin bos yer israfi: ekranin sagi bos dururken
   liste asagi uzuyor ve ilk 30'u gormek icin kaydirmak gerekiyor.

   `.basket-row` masaustunde IKI SUTUNA doner: solda sira+ad+toplam, sagda
   perakende/faturali kutulari. Sube kirilimi tam genislikte altta kalir.
   Isaretleme DEGISMIYOR -- ayni HTML iki duzende de dogru.

   `wrap-wide` BILEREK VERILMEDI. 2026-08-21'de olculdu: genislik yalnizca
   gercekten genis tablosu olan yerde ise yariyor (iade raporunun 11 sutunu);
   dort sutunlu bir tablo 1400px'e yayilinca sutunlarin arasi acilip
   seyreliyor ve okumak zorlasiyor.

   Esik 900px: dizustu ve masaustu. Telefonda ve tablette hicbir sey
   degismiyor.                                                              */
@media (min-width: 900px) {
  /* Dort kontrol tek satirda. `display: contents` ile ara sarmalayicilar
     yok sayilip cocuklar dogrudan ust grid'e giriyor. */
  .basket-filter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
  }

  .basket-filter-row {
    display: contents;
  }

  .basket-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .basket-row-head {
    grid-column: 1;
  }

  .basket-split {
    grid-column: 2;
    grid-template-columns: auto auto;
    padding: 10px 12px 10px 0;
    align-self: center;
  }

  .basket-split-cell {
    min-width: 128px;
  }

  .basket-branches {
    grid-column: 1 / -1;
    padding: 0 12px 12px;
  }

  /* Genis ekranda satirlar birbirine yapismasin; okuma cizgisi kaysin diye
     urun adi da biraz buyuyor. */
  .basket-name strong {
    font-size: 15px;
  }

  .basket-branch-table {
    font-size: 13px;
  }

  .basket-branch-table th,
  .basket-branch-table td {
    padding: 7px 8px;
  }

  .basket-branch-table small {
    display: inline;
    margin-left: 6px;
    font-size: 12px;
  }

  /* Ozet kartlari genis ekranda ortada asili kalmasin. */
  .basket-totals {
    max-width: 640px;
  }
}
/* Kac urunden kaci listelendi. UYARI RENGI DEGIL: liste her zaman kirpilir
   (30 gunde 7.500 urun satiliyor, ekranda 100 var), yani kirmizi bir satir
   her acilista yanar ve bir hafta icinde okunmaz hale gelirdi -- ajanin
   `last_error` alaninin ogrettigi sey. Bilgi, alarm degil. */
.basket-count {
  margin: 0 0 8px;
  font-size: 12px;
  color: #475569;
}

.basket-count.is-cut {
  font-weight: 600;
}

/* ===================== RAPORLAR BOLUM BASLIGI (2026-09-08) =================
   Ana ekranda raporlar operasyon modullerinden ayri duruyor (sahibin istegi).
   Baslik yalnizca gorunur rapor VARSA basiliyor -- bos bir baslik olmayan bir
   seyi vaat etmek olurdu. */
.cards-heading {
  margin: 18px 0 8px;
  font-size: 15px;
  color: #334155;
}

/* ======================= BIRLIKTE ALINANLAR (2026-09-08) ===================
   Sepet Analizi'nin filtre ve kart stillerini paylasiyor (.basket-*); burada
   yalnizca "ana urun + altinda es listesi" duzeni tanimli. Ayni stilleri
   ikinci kez yazmak bu projede uc kez sapmaya yol acti. */

/* --- Manav / Sigara dugmeleri (2026-09-11) --------------------------------
   IKI RAPORDA da var: Sepet Analizi ve Birlikte Alinanlar. Ikisi de
   `.basket-module` oldugu icin asagidaki dar ekran kurali ikisini birden
   kapsiyor; sinif adlari bilerek rapordan bagimsiz (`grup-*`), cunku ilk
   surumde `pairs-*` idi ve ikinci ekrana gelince ad yalan soyluyordu.

   Baslik satirinin sag ucunda, `.module-head.has-action` uc sutunlu grid'i
   icinde. Iki dugme oldugu icin `flex-wrap`: dar ekranda alt alta gecerler,
   basligin ustune tasmazlar. */
.grup-toggles {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.grup-toggle {
  /* Telefonda tek elle basiliyor: dokunma hedefi kucultulmez (Pasif
     dugmesiyle ayni olcu). */
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #475467;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* HARIC durumu renkle DEGIL, once yazinin kendisiyle belli oluyor: dugmenin
   metni "Manav Dahil" -> "Manav Hariç" olarak degisiyor ve `aria-pressed`
   ayrica isaretli. Renk yalnizca destek -- telefonlarin "karanlik moda zorla"
   ozelligi panelin renklerini bozuyor (panel acik temali) ve renge yaslanan
   bir durum gostergesi o telefonlarda okunmaz olurdu. */
.grup-toggle.is-excluded {
  background: #92400e;
  border-color: #92400e;
  color: #fffbeb;
}

/* UC SUTUN YALNIZCA MASAUSTUNDE -- ESIK OLCULDU, TAHMIN EDILMEDI.
   Genel `.module-head.has-action` kurali dar ekranda bile uc sutunu koruyor,
   ama o kural TEK ve KISA bir dugme (Pasif) icin yazildi. Burada iki uzun
   dugme var ve sigmiyordu: 360px'te dugmeler baslik blogunun **105 px
   uzerine biniyordu** -- aciklama satiri altlarina giriyordu. `scrollWidth -
   clientWidth` bunu HIC gostermiyor (0 okuyor), cunku cakisma elemanin kendi
   icinde.

   SEBEBI SUTUN OLCULERINDE, olculdu 2026-09-11: baslik sutunu `auto`, yani
   max-content'i SABIT aliyor (Sepet Analizi'nin aciklamasiyla 487px). Yan
   sutunlara kalani `1fr` paylasiyor; 720px'te dugme sutunu **83px** oluyor
   ve TEK dugme bile 113px. Yani o aralikta uc sutun fiziksel olarak
   sigmiyor, dugmeler once kendi kutusunu sonra basligi tasiyor.

   Gercek esik: baslik(487) + iki yan sutun(2 x 232) + bosluk(24) +
   dolgu(32) ~= 1007px. Bu yuzden uc sutun 1024px ve UZERINDE. Altinda tek
   sutun: dugmeler basligin ALTINA, ortalanmis gecer.

   ILK DENEME 700px'ti ve YANLISTI: o esik Birlikte Alinanlar'in KISA
   aciklamasiyla olculmustu; Sepet Analizi'nin cumlesi daha uzun oldugu icin
   701-760px arasi cakismaya devam etti. Esik bir CUMLENIN uzunluguna
   baglanamaz -- metin degisince sessizce bozulur. */
/* STOK DEVIR GUNU AYNI KURALA BAGLANDI (2026-09-21), kural KOPYALANMADI:
   ikinci bir kopya kaciniLmaz olarak birinden sapardi ve sapan sey bir
   ekranin okunmaz hale gelmesi olurdu. Bu ekranda UC dugme var, yani
   sigmama sorunu Sepet Analizi'nden daha buyuk. */
@media (max-width: 1023px) {
  .basket-module .module-head.has-action,
  .stockdays-module .module-head.has-action {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Bosluk sutunu tek sutunlu duzende bos bir satir olurdu. `display:none`
     veriliyor cunku eleman zaten gorunmez bir hizalama araci; icerik tasimaz. */
  .basket-module .module-head.has-action .module-head-spacer,
  .stockdays-module .module-head.has-action .module-head-spacer {
    display: none;
  }

  .basket-module .module-head.has-action .module-head-action,
  .stockdays-module .module-head.has-action .module-head-action {
    justify-self: center;
  }

  .basket-module .grup-toggles,
  .stockdays-module .grup-toggles {
    justify-content: center;
  }
}

/* Ekran goruntusu paylasildiginda dugmenin durumu kaybolur, bu satir kalir. */
.grup-cikarma-notu {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fef3c7;
  color: #7c2d12;
  font-size: 13px;
  font-weight: 600;
}

.pairs-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.pairs-partners {
  list-style: none;
  margin: 0;
  padding: 6px 10px 10px;
  display: grid;
  gap: 4px;
  /* Sayaci burada baslatiyoruz: es sirasi ANA URUNE gore, sayfaya gore degil. */
  counter-reset: es;
}

.pairs-partners li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #f1f5f9;
}

.pairs-partners li:last-child {
  border-bottom: 0;
}

.pairs-partners li::before {
  counter-increment: es;
  content: counter(es) ".";
  font-size: 11px;
  color: #475569;
  min-width: 16px;
}

.pairs-partner-name {
  min-width: 0;
}

.pairs-partner-name strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pairs-partner-name small {
  display: block;
  font-size: 11px;
  color: #475569;
}

@media (min-width: 900px) {
  /* Masaustunde ana urun ve es listesi yan yana DEGIL alt alta kaliyor:
     es listesi dar bir sutuna sikissa urun adlari kirilirdi. Genislik
     yalnizca metne veriliyor. */
  .pairs-row {
    display: block;
  }

  .pairs-partners {
    padding: 8px 12px 12px;
  }

  .pairs-partner-name strong {
    font-size: 14px;
  }
}

/* ========================= GRUP LISTESI (2026-09-11) ======================
   Ana grup / alt grup / marka / reyon secip o gruptaki urunleri listeler.
   Panel ACIK temali: buradaki her renk beyaz zemine gore secildi ve
   olculdu (bkz. CLAUDE.md "Olcmeden yayinlama"). */

.groups-filter {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.groups-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

/* Grup secimi tek basina tam genislik: 1.169 marka arasindan secim
   yapiliyor ve secenek metinleri uzun (kod - isim - adet). */
.groups-filter-row .groups-field.is-wide {
  grid-column: 1 / -1;
}

.groups-filter-row.is-action {
  grid-template-columns: minmax(0, 1fr);
}

.groups-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* Kutunun kendi `gap`i var; genel `label` kurali 12px ust bosluk ekleyip
   satiri sessizce buyutuyordu (sayim ekraninda ayni sey yasandi). */
.groups-field label {
  margin: 0;
  font-size: 12px;
  color: #475569;
}

.groups-field select,
.groups-field input[type="text"] {
  width: 100%;
  min-height: 42px;
}

.groups-primary {
  width: 100%;
  min-height: 46px;
}

.groups-result {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.groups-result h2 {
  margin: 0 0 4px;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.groups-count {
  margin: 0 0 10px;
  font-size: 12px;
  color: #475569;
}

/* Kesilme uyarisi GORUNUR olmali: bu projede gorulmeyen bir kirpma iki kez
   "urun yok" diye okundu. Ama bu uyari NADIREN cikar (tavan 2000), yani
   surekli yanan bir alarm degil -- kirmizi olmasi burada dogru. */
.groups-cut {
  margin: 0 0 10px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 12px;
  font-weight: 600;
}

.groups-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  counter-reset: gsatir;
}

.groups-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}

.groups-list li:last-child {
  border-bottom: 0;
}

.groups-code {
  font-size: 12px;
  color: #475569;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.groups-name {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.groups-unit {
  font-size: 11px;
  color: #475569;
  white-space: nowrap;
}

.groups-passive {
  color: #991b1b;
  font-weight: 700;
}

@media (min-width: 900px) {
  /* Masaustunde uc kontrol tek satirda; liste satirlari da biraz genisler.
     `wrap-wide` BILEREK verilmedi -- uc sutunlu bir liste 1400px'e yayilinca
     kod ile isim arasi acilip okunmasi zorlasir (2026-08-21 olcumu). */
  .groups-filter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    align-items: end;
  }

  .groups-filter-row {
    display: contents;
  }

  .groups-filter-row .groups-field.is-wide {
    grid-column: auto;
  }

  .groups-primary {
    min-height: 42px;
  }

  .groups-name {
    font-size: 15px;
  }
}

/* ====================== ARANABILIR GRUP SECICI (2026-09-11) ===============
   Dugmeye basilinca acilan, ILK SATIRINDA arama olan liste.

   `.combo-panel` uzerinde BILEREK `display` YOK. Bu projede bir modal kurali
   `display: flex` tasiyip `[hidden]` esi unutuldugu icin pencere kapanmamis
   ve panel BUTUN kullanicilar icin kilitlenmisti (2026-09-08). `display`
   hic verilmezse `hidden` niteligi tarayicinin kendi kuraliyla calisir ve o
   tuzaga girmek imkansiz olur. Panel konumlanmasi `position` ile yapiliyor,
   `display` ile degil. */

.groups-label {
  font-size: 12px;
  color: #475569;
}

.combo {
  position: relative;
}

.combo-button {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  text-align: left;
  background: #fff;
  color: var(--ink, #0f172a);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  cursor: pointer;
}

.combo-button:disabled {
  background: #f8fafc;
  color: #475569;
  cursor: default;
}

.combo-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-arrow {
  font-size: 12px;
  color: #475569;
}

.combo-button[aria-expanded="true"] .combo-arrow {
  transform: rotate(180deg);
}

.combo-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  padding: 8px;
  /* Telefonda ekranin yarisindan fazlasini kaplamasin; icerik kaydirilir. */
  max-height: min(60vh, 380px);
  overflow-y: auto;
}

.combo-search {
  width: 100%;
  min-height: 40px;
}

.combo-hint {
  margin: 6px 2px 4px;
  font-size: 11px;
  color: #475569;
}

.combo-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.combo-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  /* Dokunma hedefi: telefonda tek elle secilecek. */
  min-height: 42px;
  padding: 6px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  border-radius: 6px;
}

.combo-list li:last-child {
  border-bottom: 0;
}

.combo-list li:hover,
.combo-list li.is-selected {
  background: #eef2ff;
}

.combo-code {
  font-size: 12px;
  color: #475569;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.combo-name {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.combo-count {
  font-size: 11px;
  color: #475569;
  white-space: nowrap;
}

.combo-empty {
  padding: 10px 6px;
  font-size: 13px;
  color: #475569;
}

/* ================= GUNLUK STOK DEGER RAPORU (2026-09-15) ==================
   YALNIZCA ADMIN. Sepet Analizi'nin filtre ve ozet stillerini paylasiyor
   (.basket-filter, .basket-summary, .basket-total); burada yalnizca sube
   seridi, kirilim agaci ve urun satiri tanimli. Ayni stilleri ikinci kez
   yazmak bu projede uc kez sapmaya yol acti. */

/* Sube seridi: "hangi subede ne kadar para var" -- raporun ana sorusu, o
   yuzden suzgecten BAGIMSIZ ve her zaman gorunur. Dugme, cunku tiklanabilir:
   basinca o subeye suzuyor. */
.sv-branches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 10px 0 4px;
}

.sv-branch {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  /* Telefonda tek elle basiliyor. */
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.sv-branch.is-on {
  border-color: #0b5ed7;
  background: #eef4ff;
  box-shadow: inset 0 0 0 1px #0b5ed7;
}

.sv-branch-name {
  font-size: 12px;
  color: #475467;
  overflow-wrap: anywhere;
}

.sv-branch strong {
  font-size: 15px;
  color: #0f172a;
}

.sv-filter-actions {
  justify-content: flex-end;
}

/* Sepet Analizi'nin .ghost'u gibi: bu panel BEYAZ, genel .ghost kurali
   yaziyi BEYAZ boyuyor. Besinci modul ayni tuzaga geliyor. */
.stockvalue-module .ghost {
  color: #334155;
  border: 1px solid var(--line);
  background: #fff;
}

/* --- Kirilim agaci: Sorumlu -> Sube -> Ana grup -> Alt grup -> Urun ------ */
.sv-tree {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sv-node {
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

/* Ic seviyeler daha sade: her seviyede kenarlik tekrarlanirsa bes katli
   kirilim ic ice kutu yiginina doner. */
.sv-node .sv-node {
  border: 0;
  border-top: 1px solid #f1f5f9;
  border-radius: 0;
}

.sv-node-head {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  /* Dokunma hedefi kucultulmuyor. */
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}

.sv-node-head:hover { background: #f8fafc; }
.sv-node-head.is-open { background: #f1f5f9; }

.sv-caret {
  color: #94a3b8;
  font-size: 12px;
}

.sv-node-name {
  min-width: 0;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.sv-node-amount {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

/* NEGATIF DEGER KIRMIZI. Rapor Mikro'daki veri hatalarini ortaya cikariyor
   (olculdu: tek urunun -868.094'luk hatali hareketi bir subenin toplamini
   -17,5 milyona cekmisti). Gizlemek yerine gosteriliyor -- Iade raporundaki
   "aciklanamayan fark" karariyla ayni. Renk TEK BASINA bilgi tasimiyor:
   rakamin basindaki eksi isareti zaten orada. */
/* OZGULLUK BILEREK YUKSEK (.stockvalue-module ile). Duz `.sv-eksi` (0,1,0)
   yazilmisti ve `.sv-branch strong` (0,1,1) onu SESSIZCE eziyordu: sube
   seridindeki negatif tutar koyu lacivert kaliyordu. Olcerek yakalandi --
   kontrast 17,85:1 okundu, yani kirmizi degil neredeyse siyahti. Goz karari
   bunu gormezdi; bu projede ayni sinif hata daha once de olculerek bulundu
   (Stok Gor fiyat satiri 1.06:1). */
.stockvalue-module .sv-eksi { color: #b42318; }

.sv-node-body {
  padding: 0 0 0 14px;
}

.sv-node-body > .field-hint,
.sv-node-body > .basket-count,
.sv-node-body > .sv-products {
  margin: 6px 10px 10px 0;
}

/* --- Urun satirlari ------------------------------------------------------ */
.sv-products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sv-products li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: 8px;
  background: #f8fafc;
}

.sv-prod-name {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
}

.sv-prod-name strong {
  font-size: 13px;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.sv-prod-name small {
  font-size: 12px;
  color: #64748b;
}

.sv-prod-amount {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

/* Fiyatin NEREDEN geldigi rozetle yaziyor -- "hesaplanan birim fiyati"
   kararinin aynisi: yaklasik bir rakam gizlenmez, ETIKETLENIR. */
.sv-badge {
  padding: 1px 6px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  font-size: 11px;
  font-weight: 700;
}

.sv-badge.is-warn {
  background: #fef3c7;
  color: #92400e;
}

.sv-badge.is-passive {
  background: #f1f5f9;
  color: #475467;
}

@media (max-width: 480px) {
  .sv-branches {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

/* ============= MUSTERI FIYAT EKRANI -- ONIZLEME (2026-09-15) =============
   Musterinin gorecegi ekran. Bugun personel tarafinda ve yalnizca admin
   goruyor; musteri girisi ayri ve henuz yok.

   Bu panel BEYAZ -- genel `.ghost` kurali yaziyi beyaz boyuyor. Altinci
   modul ayni tuzaga geliyor. */
.portalpreview-module .ghost {
  color: #334155;
  border: 1px solid var(--line);
  background: #fff;
}

/* Onizleme oldugunu SOYLEYEN serit. Ekran musteriye acikmis gibi
   gorunmemeli -- yanlis anlasilirsa "musteriler bunu goruyor" sanilir. */
.portal-notice {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fef3c7;
  color: #7c2d12;
  font-size: 13px;
  line-height: 1.5;
}

.portal-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin: 10px 0 4px;
}

.portal-form input {
  width: 100%;
  /* Telefonda tek elle yazılıyor; dokunma hedefi kucultulmuyor. */
  min-height: 44px;
}

.portal-card {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  background: #fff;
}

.portal-card.is-empty { color: #475467; }

/* Kac urun bulundu / kac tanesi listelendi. Kesme bilgisi KIRMIZI degil:
   isimle arama yapan musteride liste cogu zaman kesilir, her seferinde
   kirmizi yanan bir uyari bir hafta icinde okunmaz hale gelir (ajanin
   `last_error` dersi). Kesildiginde yalnizca vurgulaniyor. */
.portal-count {
  margin: 12px 0 0;
  font-size: 13px;
  color: #475467;
}

.portal-count.is-cut {
  color: #7c2d12;
  font-weight: 700;
}

.portal-name {
  margin: 0 0 10px;
  font-size: 17px;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.portal-code {
  margin: 2px 0 10px;
  font-size: 12px;
  color: #64748b;
}

.portal-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef4ff;
}

.portal-price {
  font-size: 22px;
  color: #0b3d91;
}

.portal-price-row small { color: #475467; }

/* Fiyati olmayan urunde SIFIR YAZILMAZ -- "0,00" bedava diye okunur. */
.portal-price-none {
  font-size: 15px;
  font-weight: 700;
  color: #92400e;
}

.portal-sub {
  margin: 14px 0 6px;
  font-size: 14px;
  color: #334155;
}

.portal-branches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portal-branches li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.portal-branch {
  min-width: 0;
  color: #0f172a;
  overflow-wrap: anywhere;
}

/* RENK TEK BASINA BILGI TASIMIYOR: "yok" yazisi da satirda. Telefonun
   "karanlik moda zorla" ozelligi renkleri bozuyor (panel acik temali). */
.portal-band {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.portal-branches li.is-var .portal-band { color: #0f5132; }
.portal-branches li.is-yok { background: #fff; }
/* Kontrast 2.56:1 idi (WCAG alt siniri 4.5) -- musteri "yok" yazisini
   okuyabilmeli. #475467 beyaz uzerinde 7.16:1. Renk TEK BASINA bilgi
   tasimiyor zaten, yazi da orada. */
.portal-branches li.is-yok .portal-band { color: #475467; font-weight: 700; }
.portal-branches li.is-yok .portal-branch { color: #64748b; }

@media (max-width: 480px) {
  .portal-form { grid-template-columns: minmax(0, 1fr); }
}

/* Stok deger raporu: kasa (Genius) durum satiri ve "bugun satilan" etiketi.
   ALARM RENGI YOK -- her aksam kapanista kirmiziya donen bir gosterge bir
   hafta icinde okunmaz hale gelir (ajanin `last_error` dersi). Kasa
   okunamadiginda YALNIZCA vurgulanir, cunku o durumda rakam sabahki stoktur
   ve bunu fark etmemek yanlis para demektir. */
.stockvalue-module .sv-till { margin-top: 6px; }
.stockvalue-module .sv-till.is-off { color: #7c2d12; font-weight: 700; }
.stockvalue-module .sv-sold { color: #475467; }

/* ===== MUSTERI HESAPLARI (2026-09-16) =====
   Ekran ERISIM VERMEZ; var olan erisimi gosterir. Rozetler renk DISINDA da
   bilgi tasir (metin yaziyor): panel acik temali ve Android'in "karanlik
   moda zorla" ozelligi renkleri bozuyor -- Iade raporunun dersi. */
.portalcustomers-module .pc-list { list-style: none; margin: 10px 0 0; padding: 0; }

.portalcustomers-module .pc-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  background: #fff;
}

.portalcustomers-module .pc-main { min-width: 0; }
.portalcustomers-module .pc-main strong { display: block; color: #0f172a; overflow-wrap: anywhere; }
.portalcustomers-module .pc-main small { display: block; color: #64748b; overflow-wrap: anywhere; }
.portalcustomers-module .pc-dates { margin-top: 4px; font-size: 12px; }

.portalcustomers-module .pc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.portalcustomers-module .pc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #eef2ff;
  color: #3730a3;
}
.portalcustomers-module .pc-badge.is-active { background: #dcfce7; color: #14532d; }
.portalcustomers-module .pc-badge.is-off { background: #fee2e2; color: #7f1d1d; }
.portalcustomers-module .pc-badge.is-wait { background: #fef3c7; color: #78350f; }
.portalcustomers-module .pc-badge.is-none { background: #f1f5f9; color: #334155; }
.portalcustomers-module .pc-badge.is-supplier { background: #e0f2fe; color: #075985; }
.portalcustomers-module .pc-badge.is-warn { background: #fee2e2; color: #7f1d1d; }

/* Global `.ghost` metni BEYAZ boyuyor ve bu kartlar beyaz -- bu modul de
   yeniden tanimlamak zorunda (projede besinci kez). */
.portalcustomers-module .ghost {
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
  /* Telefonda tek elle basiliyor; dokunma hedefi kucultulmuyor. */
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
}

/* ===== MESAJ: KARSILIKLI YAZISMA (2026-09-16) =====
   Gelen kutusu bir LISTE; yazisma kutusu konu acildiginda beliriyor. Renk tek
   basina bilgi tasimiyor (metin de yaziyor) -- panel acik temali ve telefonun
   "karanlik moda zorla" ozelligi renkleri bozuyor. */
.msg-item-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }

.msg-thread-count { font-size: 12px; color: #475467; }
.msg-thread-count.is-new { color: #7c2d12; font-weight: 700; }

.msg-thread {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e6ebf2;
}

.msg-reply { margin-bottom: 8px; }
.msg-reply-meta { font-size: 12px; color: #64748b; }
.msg-reply-body { white-space: pre-wrap; overflow-wrap: anywhere; color: #0f172a; }
/* Kendi yazdigin cevap SOLDAN girintili degil, KENARLIKLA ayriliyor:
   girinti dar ekranda metni sikistirirdi. */
.msg-reply.is-mine { border-left: 3px solid #2563eb; padding-left: 8px; }

.msg-reply-form { display: grid; gap: 6px; margin-top: 8px; }
.msg-reply-form textarea {
  width: 100%;
  resize: vertical;
  /* Telefonda tek elle yaziliyor; dokunma hedefi kucultulmuyor. */
  min-height: 44px;
}
.msg-reply-to { display: grid; gap: 4px; font-size: 13px; }
.msg-reply-to select { min-height: 40px; }
.msg-reply-form button[type="submit"] { min-height: 40px; }

/* ==========================================================================
   MUSTERI GIRISI VE MUSTERI EKRANI (2026-09-16)

   `[hidden]` TUZAGI: bu bloktaki hicbir kural gizlenebilen bir ogeye
   `display` ATAMIYOR. 2026-09-08'de `.msg-modal` `display: flex` tasiyip
   `[hidden]` esi olmadigi icin pencere KAPANMAMIS ve panel butun
   kullanicilar icin kilitlenmisti -- `hidden` niteliginin `display: none`
   degeri TARAYICININ stil sayfasindan geliyor ve yazarin kurali onu yener.
   Burada `display` hic atanmadigi icin o tuzak fiziksel olarak kurulamaz:
   `.login-box` ve `.portal-step` yerlesimlerini `display` ile degil, akis ve
   `margin` ile aliyor.
   ========================================================================== */

.login-panel {
  align-self: center;
  width: 100%;
  padding: 0;
}

/* Sekme seridi. Hangi sekmenin ACIK gelecegine SUNUCU karar veriyor
   (portal_login_default_tab); buradaki is yalnizca gecis. */
.login-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}

.login-tab {
  padding: 16px 10px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: #f6f8fb;
  color: #475467;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  /* Telefonda tek elle basilacak: 48px'in altina inmiyor. */
  min-height: 52px;
}

.login-tab:hover { background: #eef2f7; color: #1f2d3d; }

/* Secili sekme RENK DISINDA da belli: kalin cizgi, beyaz zemin ve daha koyu
   metin. "Karanlik moda zorla" ozelligi rengi bozdugunda bile hangi sekmenin
   acik oldugu gorunur kalmali. */
.login-tab.is-active {
  background: #fff;
  border-bottom-color: var(--nav-end);
  color: #10233f;
}

.login-musteri .portal-step h1 { text-align: center; }
.login-musteri .portal-step .muted { text-align: center; }

/* Maskeli e-posta satiri. Adres SUNUCUDAN maskeli geliyor; tam adres hicbir
   zaman tarayiciya inmiyor. */
.portal-mask {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid #dbe6f5;
  border-radius: 10px;
  background: #f4f8ff;
  color: #1f3a5f;
  font-size: 14px;
  text-align: center;
  overflow-wrap: anywhere;
}

.portal-mask strong { font-weight: 800; letter-spacing: 0.3px; }

/* Kod alani: alti hane, okunakli ve genis araliklarla. */
#pmCode {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 6px;
  text-align: center;
}

/* ===== MUSTERI EKRANI ===== */
.musteri-body { background: var(--bg); }

.musteri-topbar .topbar-brand { gap: 4px; }

.musteri-unvan {
  display: block;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.musteri-wrap { padding-top: 16px; }

.musteri-dipnot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

@media (max-width: 700px) {
  /* Tek sutun: gorsel bolum telefonda yer kaplamaktan baska is yapmiyor. */
  .login-shell { grid-template-columns: minmax(0, 1fr); }
  .login-hero { min-height: 0; padding: 26px 22px; }
  .login-hero h1 { font-size: 30px; }
  .login-hero::before, .login-hero::after { display: none; }
  .login-box { padding: 24px 20px; }
}

/* Arama ornekleri (2026-09-17). Sahibin istegi: yildizin ne ise yaradigini
   ANLATMAK yetmiyor, ORNEKLE gostermek gerekiyor. `display` atanan bir kural
   degil -- liste zaten akista; gizlenen bir oge de yok. */
.arama-ornek {
  margin: 6px 0 0;
  padding: 0 0 0 18px;
  color: #475467;
  font-size: 13px;
  line-height: 1.75;
}

.arama-ornek code {
  padding: 1px 6px;
  border: 1px solid #dbe6f5;
  border-radius: 6px;
  background: #f4f8ff;
  color: #10233f;
  font-weight: 700;
  font-size: 12.5px;
}

.arama-ornek em { font-style: normal; font-weight: 600; color: #1f3a5f; }

/* ==========================================================================
   MUSTERI EKRANI -- OLCULMUS DUZELTMELER (2026-09-17)

   Sahibin istegi: "musteriler kullanacagi icin goze hos gelsin ve kullanisli
   olsun." Asagidakilerin hepsi GOZ KARARI DEGIL, gercek 360px'te olculdu.
   (Dikkat: Chrome headless 500px altini yok sayiyor, o yuzden olcum icerigi
   360px'lik bir kutuya sokarak yapildi -- CLAUDE.md'de yazili tuzak.)
   ========================================================================== */

/* 1) CIKIS DUGMESI 32x21 idi -- parmakla basilamaz. Projenin dokunma hedefi
      alt siniri 44px. Kenarlik da belirginlesti: koyu seritte gorunur olsun. */
.musteri-topbar .top-actions .ghost {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  font-weight: 700;
}

.musteri-topbar .top-actions .ghost:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* 2) OKUMA GENISLIGI. Masaustunde kart 1066px'e kadar uzuyordu; urun adi,
      fiyat ve uc sube satiri icin bu cok genis ve okumayi zorlastiriyor.
      Sepet raporunda ayni ders alinmisti: fazladan genislik yalnizca
      GERCEKTEN genis bir tabloya yarar. */
.musteri-wrap { max-width: 760px; margin-inline: auto; }

/* 3) GONDER DUGMESI 42px idi; projenin diger ekranlarinda 48. */
.musteri-body .portal-form .basket-primary { min-height: 48px; font-size: 15px; }

/* 4) ARAMA IPUCLARI SONUCLARDAN SONRA KAPANIR.
      Ilk sonuc karti 360px'te 497px asagidaydi: form + ipuclari + ornekler
      ekranin tamamini dolduruyordu ve musteri her aramada kaydirmak zorunda
      kaliyordu. Ilk kullanimda ipuclari GEREKLI, sonrasinda degil -- bu
      yuzden silinmiyor, KAPANIYOR ve tek satirlik bir baglantiyla geri
      aciliyor. `display` ATANMIYOR: `hidden` tarayicinin kendi kuralindan
      calissin (2026-09-08'de `display:flex` tasiyan bir modal paneli
      kilitlemisti). */
.arama-ipucu-ac {
  margin: 4px 0 0;
  font-size: 13px;
}

.arama-ipucu-ac button {
  padding: 6px 0;
  border: 0;
  background: none;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  min-height: 32px;
}

/* 5) UST SERIT ICERIGI ICERIKLE AYNI SUTUNDA. Masaustunde serit tam
      genislikteyken "Cikis" en sagda, icerik ise 760px'lik ortalanmis
      sutunda kaliyordu -- ikisi birbirinden kopuk duruyordu.
      `max()` ile: dar ekranda 16px kenar bosluk, genis ekranda icerikle
      ayni hizada. */
.musteri-topbar {
  padding-inline: max(16px, calc((100% - 760px) / 2));
}

/* ==========================================================================
   STOK DEVIR GUNU (2026-09-20)

   Renk TEK BASINA bilgi tasimiyor: her bandin ADI da yaziliyor. Panel acik
   temali ve Android'in "karanlik moda zorla" ozelligi renkleri bozuyor --
   Iade raporunun dersi.
   ========================================================================== */
.stockdays-formul {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid #dbe6f5;
  border-radius: 10px;
  background: #f4f8ff;
  color: #1f3a5f;
  font-size: 13px;
  line-height: 1.6;
}

.stockdays-formul em { font-style: normal; font-weight: 800; }

/* BASLAT SATIRI. Dugme 48px: projenin dokunma hedefi standardi -- paylasilan
   `.basket-primary` 42px ve bu dugme telefonda tek basina basiliyor.
   Kutu `gap` kullaniyor, o yuzden icindeki metnin kendi kenar boslugu
   sifirlanir (panelin yazili kurali: gap varsa margin sifir). */
.devir-baslat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.devir-baslat .basket-primary { height: 48px; padding: 0 22px; }
.devir-baslat .field-hint { margin: 0; }

.devir-ozet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.devir-kart {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.devir-kart span { display: block; color: #475467; font-size: 12px; }
.devir-kart strong { display: block; margin-top: 4px; font-size: 19px; font-weight: 800; color: #10233f; }
.devir-kart.is-ana { background: #f4f8ff; border-color: #dbe6f5; }

.devir-suzgec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

/* `gap` kullanan kutuda etiketin kendi margin'i 18px fazladan bosluk
   yaratiyor -- panelde yazili kural: gap varsa label margin sifirlanir. */
.devir-suzgec label { margin: 0 0 4px; font-size: 12px; color: #475467; }
.devir-suzgec select { width: 100%; min-height: 42px; }

/* Tablo genis; dar ekranda YATAY KAYDIRMA kendi kutusunda olsun -- sayfanin
   tamami yana kaymamali (panelin standardi).

   DIKEY kaydirma da BILEREK bu kutuda (sahibin istegi 2026-09-20:
   "ekrani kaydirdigimizda basliklar sabit kalsin"). Sebebi CSS'in az
   bilinen bir kurali: `overflow-x: auto` verildiginde hesaplanan
   `overflow-y` de `auto` olur -- kutu HER IKI eksende kaydirma kabi olur
   ve icindeki `position: sticky` artik viewport'a degil BU KUTUYA gore
   calisir. Kutunun yuksekligi sinirsiz oldugu surece dikey hic kaydirmaz,
   yani `th { position: sticky; top: 0 }` yazilabilir ama HICBIR SEY
   YAPMAZ. Sticky'yi calistiran sey yukseklik siniri.
   Gerekcesi: 102 kategori, ustune acilan urun detayi (179 satira kadar)
   -- tablo ekrandan uzun, ve baslik kaybolunca "bu sutun TL miydi gun
   muydu" sorusu her kaydirmada geri geliyor. Basliklara birimi yazmak
   (ayni gun) ancak baslik goruniyorsa ise yariyor. */
.devir-tablo-sar {
  overflow: auto;
  /* Telefonda da masaustunde de bir ekrandan kisa kalsin; kutunun sonuna
     gelindiginde tarayici kaydirmayi sayfaya devreder (zincirleme acik
     birakildi -- `overscroll-behavior` KOYULMADI, yoksa tabloyu gecip
     asagi inmek zorlasirdi). */
  max-height: 72vh;
}

.devir-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }

.devir-tablo th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  /* ARKA PLAN SART: saydam kalirsa satirlar basligin ALTINDAN gecerken
     ust uste biner ve baslik okunmaz olur. */
  background: #fff;
  /* `border-collapse: collapse` ile kenarlik TABLO duzeyinde cizilir ve
     sticky baslikla birlikte GELMEZ -- kaydirinca cizgi yukari kacar.
     `inset box-shadow` hucrenin kendi uzerine cizdigi icin yerinde kalir. */
  box-shadow: inset 0 -2px 0 var(--line);
  color: #475467;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}

.devir-tablo td { padding: 9px 10px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.devir-tablo tbody tr:hover { background: #f8fafc; }

.devir-ad strong { display: block; color: #10233f; font-weight: 700; }
.devir-ad span { display: block; color: #64748b; font-size: 12px; }

.devir-sayi { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.devir-urun { color: #64748b; }

/* EKSI STOK KIRMIZI. Mikro hareket hatasinin isareti, gizlenmiyor.
   Secici `.stockdays-module` ile baslıyor: daha genel bir kural (ornegin
   `td`) aksi halde sessizce ustune yazar -- Stok Deger Raporu'nda tam bu
   yasandi (kirmizi hic gorunmedi, kontrast 17,85:1 ile yakalandi). */
.stockdays-module .devir-sayi.is-eksi { color: #b42318; font-weight: 700; }

.devir-gun { text-align: right; white-space: nowrap; }

.devir-bant {
  display: inline-block;
  min-width: 52px;
  padding: 3px 8px;
  border-radius: 8px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.devir-gun em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: #64748b; }

/* Kontrastlar olculdu: hepsi beyaz/renkli zeminde 4.5:1 uzerinde. */
.devir-bant.is-hizli    { background: #ecfdf3; color: #05603a; }
.devir-bant.is-normal   { background: #f2f4f7; color: #344054; }
.devir-bant.is-yavas    { background: #fffaeb; color: #93370d; }
.devir-bant.is-cokyavas { background: #fef3f2; color: #b42318; }
.devir-bant.is-yok      { background: #fef3f2; color: #912018; }

.devir-dipnot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* Son giris sutunu. 180 gunden eski vurgulaniyor: o satirda sorun satinalma
   degil ERITME -- iki farkli aksiyon, iki farkli gorunum. */
.devir-giris em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: #64748b; }
.devir-girisgun { font-weight: 700; color: #344054; }
.devir-girisgun.is-eski { color: #b42318; }
.devir-girisyok { font-style: normal; color: #94a3b8; }

/* Devir raporu -- PARA EKSENLI yeniden tasarim (2026-09-20).
   Sahip ilk surumu anlasilmaz buldu: gune gore siralayinca 900 gunluk
   5.000 TL'lik kategori basa cikiyor, 60 gunluk 20 milyonluk asagida
   kaliyordu. Artik siralama ve vurgu "hedefin ustunde kalan TUTAR"da. */
.devir-kart em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: #64748b; }
.devir-kart.is-ana strong { color: #b42318; font-size: 22px; }

.devir-suzgec > div { display: flex; flex-direction: column; }

/* Kategori satiri tiklanabilir: valoru hangi urunun yarattigini acar. */
.devir-satir { cursor: pointer; }
.devir-satir:hover { background: #f4f8ff; }
.devir-satir.is-acik { background: #eef4ff; }
.devir-satir.is-acik .devir-ad strong { color: #1d4ed8; }

/* ASIL SUTUN: hedefin ustunde kalan para. */
.devir-fazla { font-weight: 800; color: #b42318; }

/* Urun satirlari -- kategorinin altinda, girintili ve daha soluk zeminde
   ki hangi satirin detay oldugu bakisla anlasilsin. */
.devir-detay > td { background: #fbfcfe; font-size: 12.5px; }
/* HATA SATIRI. Kirmizi tek basina bilgi tasimiyor: metin zaten hatanin
   kendisini yaziyor ve yanina "tekrar deneyebilirsiniz" ekleniyor.
   Secici `.stockdays-module` ile basliyor -- daha genel bir `td` kurali
   aksi halde sessizce ustune yazar (Stok Deger Raporu'nda yasandi). */
.stockdays-module .devir-detay-hata > td {
  background: #fef3f2;
  color: #912018;
  font-weight: 600;
}
.stockdays-module .devir-detay-hata em {
  font-style: normal;
  font-weight: 400;
  color: #7a271a;
}

.devir-detay .devir-urunad { padding-left: 22px; }
.devir-detay .devir-urunad strong { font-weight: 600; color: #344054; }

/* ======================================================================
   KDV RAPORU (2026-09-23)
   ====================================================================== */
.kdv-donem {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 12px 0 14px;
}
/* Kutu `gap` tasiyor; genel `label` kenar boslugu ustune binerse satir
   sessizce 18px buyuyor (CLAUDE.md > bosluk tek yerde). */
.kdv-donem label { margin: 0; font-weight: 600; }
.kdv-donem select { height: 44px; min-width: 190px; }
.kdv-donem .basket-primary { height: 44px; }

.kdv-kartlar {
  display: grid; gap: 10px; margin-bottom: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .kdv-kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kdv-kart {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; background: #fff;
  display: flex; flex-direction: column; gap: 2px;
}
.kdv-kart-baslik { font-size: 13px; font-weight: 700; color: #334155; }
.kdv-kart strong { font-size: 22px; font-weight: 800; line-height: 1.2; }
.kdv-kart-alt, .kdv-kart-iade { font-size: 12px; color: #64748b; }

/* RENK TEK BASINA BILGI TASIMAZ -- Iade raporunun kurali. Her kartin
   ustunde ADI yaziyor; asagidaki renkler yalnizca destek. Android'in
   "karanlik moda zorla" ozelligi paleti bozdugunda metin ayakta kalir. */
.kdv-hesaplanan { border-left: 4px solid #0369a1; }
.kdv-hesaplanan strong { color: #075985; }
.kdv-indirilecek { border-left: 4px solid #0f766e; }
.kdv-indirilecek strong { color: #115e59; }
.kdv-odenecek { border-left: 4px solid #b45309; }
.kdv-odenecek strong { color: #92400e; }
.kdv-devreden { border-left: 4px solid #047857; }
.kdv-devreden strong { color: #065f46; }

.kdv-blok { margin-bottom: 18px; }
.kdv-blok h2 { font-size: 15px; margin: 0 0 8px; }
/* Genis tablo KENDI kutusunda kayar, sayfa yana kaymaz. `max-height`
   sabit basligin tutunacagi dikey kaydirmayi yaratan sey (CLAUDE.md >
   basliklar kaydirirken sabit). */
.kdv-tablo-sar {
  overflow: auto; max-height: 60vh;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.kdv-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.kdv-tablo th, .kdv-tablo td { padding: 8px 10px; text-align: left; }
.kdv-tablo th {
  position: sticky; top: 0; z-index: 2;
  background: #f8fafc; font-size: 13px; font-weight: 700;
  /* `border-bottom` DEGIL: `border-collapse` altinda kenarlik tablo
     seviyesinde ciziliyor ve sabit baslikla birlikte gitmiyor. */
  box-shadow: inset 0 -2px 0 var(--line);
}
.kdv-tablo tbody tr + tr td { border-top: 1px solid #eef2f7; }
.kdv-sayi { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kdv-diger td { color: #475569; background: #fafafa; }
.kdv-rozet {
  font-size: 11px; font-weight: 700; color: #475569;
  background: #eef2f7; border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}
.kdv-dipnot { margin-top: 4px; }

/* Devreden KDV serit -- kartlardan AYRI, cunku kaynagi farkli (muhasebe). */
.kdv-devreden {
  margin: 0 0 16px;
  border: 1px solid var(--line); border-left: 4px solid #4f46e5;
  border-radius: 12px; padding: 12px 14px; background: #fff;
}
/* Ay kapatilmamissa rakam ONCEKI ayin bakiyesi -- renk degil, YAZI soyluyor;
   renk tek basina bilgi tasimaz (Iade raporunun kurali). */
.kdv-devreden-bekliyor { border-left-color: #b45309; }
.kdv-devreden-bekliyor .kdv-devreden-not { color: #92400e; font-weight: 600; }
.kdv-mahsup { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 14px; }
.kdv-mahsup td { padding: 3px 0; }
.kdv-mahsup td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kdv-mahsup-kalan td { border-top: 1px solid var(--line); font-weight: 800; color: #3730a3; }
.kdv-mahsup-sapma td { border-top: 1px dashed var(--line); color: #92400e; font-weight: 700; }
.kdv-devreden-not { margin: 8px 0 0; font-size: 12px; color: #475569; }

/* ======================================================================
   SUBE KAPANIS TAKIBI (2026-09-30)
   ====================================================================== */
.sk-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 12px 0 14px;
}
/* Kutu `gap` tasiyor; genel `label` kenar boslugu ustune binmesin. */
.sk-form label { margin: 0; font-weight: 600; }
/* Genel `input` kurali genisligi %100 yapiyor; tarih kutusu butun satiri
   kaplayip etiketi ve dugmeyi ayri satirlara itiyordu (olculdu 2026-09-30). */
.sk-form input[type="date"] { height: 44px; width: auto; flex: 0 1 190px; min-width: 150px; margin: 0; }
.sk-form .basket-primary { height: 44px; }

.sk-baslik-satir { margin: 0 0 10px; font-size: 14px; color: #334155; }

.sk-kartlar {
  display: grid; gap: 10px; margin-bottom: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .sk-kartlar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Kart bir DUGME (dokununca liste o duruma suzuluyor). Genel `button`
   kurali arka plani ve yazi rengini degistirdigi icin burada acikca
   yeniden veriliyor -- beyaz kart uzerinde beyaz yazi tuzagi. */
.sk-kart {
  appearance: none; width: 100%; min-height: 96px; margin: 0;
  border: 1px solid var(--line); border-left-width: 4px; border-radius: 12px;
  padding: 10px 12px; background: #fff; color: #0f172a;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; cursor: pointer; font: inherit; box-shadow: none;
}
.sk-kart:hover { background: #f8fafc; }
.sk-kart:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.sk-kart-secili { background: #f1f5f9; box-shadow: inset 0 0 0 2px #334155; }
.sk-kart-baslik { font-size: 13px; font-weight: 700; color: #334155; line-height: 1.25; }
.sk-kart strong { font-size: 24px; font-weight: 800; line-height: 1.15; }
.sk-kart-alt { font-size: 12px; color: #64748b; }
.sk-kart-yeni { font-size: 12px; font-weight: 700; color: #065f46; }

/* RENK TEK BASINA BILGI TASIMAZ -- Iade raporunun kurali. Durumun ADI
   her yerde yaziyor; renk yalnizca destek. */
.sk-kart-a   { border-left-color: #0369a1; } .sk-kart-a strong   { color: #075985; }
.sk-kart-b   { border-left-color: #7c3aed; } .sk-kart-b strong   { color: #5b21b6; }
.sk-kart-ab  { border-left-color: #0f766e; } .sk-kart-ab strong  { color: #115e59; }
.sk-kart-g   { border-left-color: #b45309; } .sk-kart-g strong   { color: #92400e; }
.sk-kart-d   { border-left-color: #475569; } .sk-kart-d strong   { color: #334155; }
.sk-kart-yok { border-left-color: #b91c1c; } .sk-kart-yok strong { color: #991b1b; }

.sk-blok { margin-bottom: 18px; }
.sk-blok h2 { font-size: 15px; margin: 0 0 6px; }
.sk-not { margin: 0 0 8px; font-size: 12px; color: #475569; }

/* Genis tablo KENDI kutusunda kayar, sayfa yana kaymaz. */
.sk-tablo-sar {
  overflow: auto;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
/* `max-height` sabit basligin tutunacagi dikey kaydirmayi yaratan sey
   (CLAUDE.md > basliklar kaydirirken sabit). Yalnizca uzun tablolarda. */
.sk-kaydir { max-height: 70vh; }
.sk-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.sk-tablo th, .sk-tablo td { padding: 7px 9px; text-align: left; vertical-align: top; }
/* IKI SATIRLI BASLIK: yapiskanlik hucrelere degil BASLIGIN TAMAMINA
   veriliyor. Her `th` ayri ayri `top: 0` alsaydi ikinci satir birinci
   satirin USTUNE binerdi. */
.sk-tablo thead { position: sticky; top: 0; z-index: 2; }
.sk-tablo th {
  background: #f8fafc; font-size: 13px; font-weight: 700; color: #1e293b;
  box-shadow: inset 0 -1px 0 var(--line);
}
.sk-tablo tbody tr + tr td { border-top: 1px solid #eef2f7; }
.sk-tablo tfoot td { border-top: 2px solid var(--line); font-weight: 800; }
.sk-sayi { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-orta { text-align: center !important; }
.sk-soluk { color: #64748b; }
.sk-toplam { font-weight: 800; }
.sk-artti { color: #065f46; font-weight: 700; }
.sk-azaldi { color: #991b1b; font-weight: 700; }
.sk-fis { display: block; font-size: 11px; color: #64748b; font-weight: 400; }
.sk-rozet {
  display: inline-block; font-size: 11px; font-weight: 700; color: #475569;
  background: #eef2f7; border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}
.sk-rozet-yeni { color: #065f46; background: #d1fae5; margin: 4px 0 0; }

.sk-cipler { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.sk-cip {
  appearance: none; min-height: 36px; margin: 0; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #1e293b;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none;
}
.sk-cip span { color: #64748b; font-weight: 700; margin-left: 4px; }
.sk-cip-secili { background: #1e293b; color: #fff; border-color: #1e293b; }
.sk-cip-secili span { color: #e2e8f0; }
.sk-suzgec { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sk-suzgec select, .sk-suzgec input { height: 44px; margin: 0; }
/* Acilir kutunun NE suzdugunu soyleyen gorunur etiket (gizli etiket yetmedi:
   "Önceden 4–9 gün" bir tarih araligi gibi okundu). Kutu `gap` tasiyor, genel
   `label` kenar boslugu sifirlaniyor. */
.sk-suzgec .sk-etiket { flex: 0 0 100%; margin: 0; font-size: 12px; font-weight: 700; color: #334155; }
.sk-suzgec input { flex: 1 1 200px; min-width: 0; }
.sk-gizli {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
}

.sk-liste .sk-satir { cursor: pointer; }
.sk-liste .sk-satir:hover td { background: #f8fafc; }
.sk-liste .sk-satir:focus-visible { outline: 3px solid #93c5fd; outline-offset: -3px; }
.sk-liste .sk-acik td { background: #f1f5f9; }
.sk-musteri { min-width: 170px; max-width: 260px; }
.sk-ad { display: block; font-weight: 600; overflow-wrap: anywhere; }
.sk-kod { display: block; font-size: 11px; color: #64748b; font-variant-numeric: tabular-nums; }
.sk-ay { font-size: 13px; padding-left: 6px !important; padding-right: 6px !important; }
.sk-durum {
  display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px;
  padding: 2px 8px; white-space: nowrap;
}
.sk-durum-a   { background: #e0f2fe; color: #075985; }
.sk-durum-b   { background: #ede9fe; color: #5b21b6; }
.sk-durum-ab  { background: #ccfbf1; color: #115e59; }
.sk-durum-g   { background: #fef3c7; color: #92400e; }
.sk-durum-d   { background: #eef2f7; color: #334155; }
.sk-durum-yok { background: #fee2e2; color: #991b1b; }
.sk-detay-satir td { background: #f8fafc; padding: 8px 10px 12px; }
.sk-detay .sk-tablo-sar { max-width: 760px; }
.sk-tablo-kucuk { font-size: 13px; }
.sk-dipnot { margin-top: 4px; }
/* Telefon yalnizca ayrintida (2026-09-30). Baglanti DOKUNULACAK boyutta:
   telefonda tek dokunusla arama bu satirin isi. */
.sk-tel { margin: 0 0 8px; font-size: 14px; color: #1e293b; }
.sk-tel a {
  display: inline-block; min-height: 40px; padding: 8px 12px; margin-left: 4px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: #1d4ed8; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums;
}
.sk-ciro { color: #334155; font-variant-numeric: tabular-nums; }
.sk-suzgec #skSira { flex: 0 1 230px; }