/* ============================================================
   BONO — TASARIM TEMELİ
   Manrope · #1d1d1f (koyu nötr, mavi YOK — 2026-09-12) · krem zemin (#F4F3EF) · sarı + turuncu aksan

   Buradaki değişkenler tüm ekranların ortak dilidir. Bir rengi ya da
   ölçüyü değiştirmek istiyorsan ekranın içine sabit değer yazma —
   buradan değiştir, her yer birden döner.

   Chrome 109 hedefi: :has(), container query, text-wrap KULLANILMAZ.
   ============================================================ */
:root {
  /* Tasarım sabit AÇIK (krem zemin, koyu yazı) — cihaz sistem
     karartılmış modda olsa bile. Bu satır yoksa tarayıcı NATIVE form
     kontrollerini (select açılır listesi, date/time seçici) OS'un
     karanlık temasıyla çiziyor: kutunun kendi arkaplanı koyulaşıyor
     ama üstündeki yazı hâlâ bizim CSS'imizin verdiği koyu renk —
     koyu üstüne koyu, metin görünmez oluyor (kullanıcı bildirimi:
     "Sıralama dropdown'ındaki metin görünmüyor"). */
  color-scheme: light;
  /* --- MARKA ---
     Mavi tek renk değil, üç ton. Hepsi aynı maviye benziyor ama
     kontrast ölçüsünde ayrışıyorlar: dolgu / beyaz yazılı buton /
     açık zemin üstünde mavi yazı. 14px yazı için 4.5:1 gerekiyor. */
  --brand-1: #2b2b29;
  --brand-2: #0f0f10;
  --brand-grad: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
  --accent: #1d1d1f;          /* yazı taşımayan dolgular */
  --accent-strong: #1d1d1f;   /* üstünde beyaz yazı olan buton (4.7:1, 2026-09-12: mavi kaldırıldı) */
  --accent-dark: #1d1d1f;     /* açık zemin üstünde koyu YAZI (2026-09-12: mavi kaldırıldı) */
  --accent-soft: #ECEAE4;
  --accent-ink: #ffffff;

  /* --- AKSAN: sarı ve turuncu ---
     Yalnızca özet kartlarında ve vurgu gereken tek tük yerde.
     Üstlerindeki yazı her zaman koyu (--sari-ink / --turuncu-ink),
     beyaz yazı bu zeminlerde okunmuyor. */
  --sari-1: #FFF34D;
  --sari-2: #F5E200;
  --sari-3: #E8D400;
  --sari-grad: linear-gradient(155deg, var(--sari-1) 0%, var(--sari-2) 55%, var(--sari-3) 100%);
  --sari-ink: #1B1A00;
  --sari-golge: 0 20px 44px -26px rgba(232, 212, 0, 0.55);
  --turuncu-1: #FFC79E;
  --turuncu-2: #FDA166;
  --turuncu-3: #F8853C;
  --turuncu-grad: linear-gradient(140deg, var(--turuncu-1) 0%, var(--turuncu-2) 45%, var(--turuncu-3) 100%);
  --turuncu-ink: #241000;
  --turuncu-golge: 0 20px 44px -26px rgba(248, 133, 60, 0.45);

  /* --- ÜST ÜÇ KARTIN KENDİ RENKLERİ (kullanıcının seçimi, 2026-08-20) ---
     Sarı/turuncu aksan sol bardaki aktif düğmeye ait; kartlar artık
     kendi koyu degradelerini kullanıyor ve üzerlerindeki yazı BEYAZ. */
  --finans-grad: linear-gradient(155deg, #F2E28C 0%, #8A8270 100%);
  --finans-golge: 0 20px 44px -26px rgba(138, 130, 112, 0.5);
  --stok-grad:   linear-gradient(140deg, #86A493 0%, #080F0B 100%);
  --stok-golge:  0 20px 44px -26px rgba(8, 15, 11, 0.5);
  --hizli-grad:  radial-gradient(ellipse 90% 80% at 50% 42%, #C84E5C 0%, #FFC6CE 100%);

  /* --- METİN --- */
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;        /* küçük ikincil metin — 4.9:1 */
  --ink-faint: #86868b;       /* yalnızca 15px+ metin için */

  /* --- YÜZEY ---
     Zemin degrade, kartlar yarı saydam cam. Kartın arkasındaki degrade
     kartın içinden hafifçe görünüyor; --cam bulanıklığı bu geçişi
     yumuşatıyor.

     --yuzey-opak: cam OLMAYACAK yerler. Modal, açılır liste, kamera
     kutusu ve giriş kutusu içeriğin ÜSTÜNE biniyor; yarı saydam olurlarsa
     altlarındaki yazı okunmaz hâle geliyor. */
  --page-bg: #f6f4f0;         /* açık sıcak krem */
  --page-grad: linear-gradient(160deg, #f8f7f4 0%, #f1efea 100%);
  --yuzey: rgba(255, 255, 255, 0.2);
  --yuzey-opak: #FFFFFF;
  --cam: blur(2px);
  --yuzey-2: rgba(255, 255, 255, 0.42);   /* hafif çukur alanlar: tablo başlığı, satır hover */
  --yuzey-3: rgba(255, 255, 255, 0.30);   /* basılı/seçili ikincil yüzey */
  --glass: var(--yuzey);
  --glass-2: var(--yuzey);
  --glass-3: var(--yuzey-2);
  /* Kenar: beyaz ışık hattı KALDIRILDI. Yerinde yalnızca çok soluk,
     nötr bir hat var — kart zeminden ayrılsın ama parlamasın. */
  --glass-brd: rgba(20, 20, 15, 0.06);
  /* Kabartma: üst kenarda ışık, alt kenarda gölge. İkisi birlikte
     kartın camdan kesilmiş bir levha gibi görünmesini sağlıyor. */
  /* İÇ GÖLGE YOK. Kartın alt kenarında toplanan gölge kaldırıldı;
     derinliği yalnızca dış gölge (--sh-1) veriyor. Değişken duruyor
     çünkü birçok kural ona bakıyor — artık hiçbir şey üretmiyor. */
  --cam-kabartma: none;
  --line: rgba(20, 20, 15, 0.14);
  --line-strong: rgba(20, 20, 15, 0.16);
  --gray-light: #a6a69c;

  /* --- DURUM RENKLERİ ---
     Canlı tonlar (--*-fill) yalnızca DOLGU: nokta, çubuk, rozet zemini.
     Metin olarak okunmuyorlar; yazı için koyulaştırılmış olanlar var. */
  --ok: #1d7a33;              /* 5.4:1 */
  --warn: #d70015;            /* 5.4:1 */
  --amber: #a15c00;           /* 5.2:1 */
  --ok-fill: #34C759;
  --warn-fill: #d70015;
  --amber-fill: #ff9500;
  --ok-bg: linear-gradient(140deg, #E9FBEF 0%, #C2EFD1 100%);
  --ok-ink: var(--ok);
  --warn-bg: linear-gradient(140deg, #FEEEEC 0%, #FACFCB 100%);
  --warn-ink: #b42318;        /* 5.9:1 */
  --amber-bg: linear-gradient(140deg, #FEF6DA 0%, #FAE1A2 100%);
  --amber-ink: #b3541e;       /* 5.1:1 */
  --info-bg: linear-gradient(140deg, #F1F0EC 0%, #E2E0D8 100%);   /* mavi kaldırıldı, 2026-09-12 */
  --info-ink: #57544c;        /* 5.6:1'e yakın, sıcak nötr koyu */
  --neutral-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.5) 0%, rgba(20, 20, 15, 0.08) 100%);

  /* --- KÖŞE ---
     10 buton ve küçük kart · 14 kart · 16 aksan kartı · 22 büyük blok */
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius: 20px;
  --radius-sm: 14px;
  --radius-xs: 10px;

  /* --- GÖLGE ---
     Düz tasarım: gölge derinlik değil, sadece kenar ayrımı.
     Renkli kartlar kendi renkli gölgelerini taşır (--sari-golge). */
  --sh-1: 0 1px 2px rgba(20, 20, 15, 0.05), 0 14px 34px -20px rgba(20, 20, 15, 0.45);
  --sh-2: 0 2px 8px rgba(20, 20, 15, 0.06);
  --sh-3: 0 18px 40px -20px rgba(20, 20, 15, 0.28);
  --sh-brand: 0 10px 24px -12px rgba(20, 20, 15, 0.45);
  --shadow: var(--sh-1);
  --shadow-lg: var(--sh-3);
  --ring: 0 0 0 4px rgba(20, 20, 15, 0.16);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.22s;

  /* --- TİP ÖLÇEĞİ ---
     Sabit px yazma, bu basamakları kullan. */
  --fs-2xs: 12px;    /* rozet, tablo başlığı, en küçük etiket */
  --fs-xs: 13px;     /* ikincil metin, kart etiketi */
  --fs-sm: 14px;     /* gövde metni, tablo hücresi */
  --fs-md: 15px;     /* buton, vurgulu gövde */
  --fs-lg: 16px;     /* büyük buton, alt başlık */
  --fs-xl: 18px;     /* h2 */
  --fs-2xl: 20px;    /* kart rakamı */
  --fs-3xl: 24px;    /* büyük kart rakamı */
  --fs-4xl: 26px;    /* öne çıkan rakam */
  --fs-5xl: 30px;    /* sayım ekranı */
  --fs-6xl: 32px;    /* h1 */

  /* --- BOŞLUK — 4px tabanlı --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 28px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  /* Manrope (kullanıcının kararı, 2026-09-12). Google Fonts'tan
     yükleniyor, bkz. index.html <head>. */
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Duvar fotoğrafı KALDIRILDI (kullanıcının kararı, 2026-09-05:
     "arka plan çok koyu"). Zemin düz ve açık. */
  background: var(--page-bg);
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.5;
  /* Harf aralığı puntoya bağlıdır: punto büyüdükçe harfler birbirinden
     uzak görünür ve sıkılaştırılır, küçüldükçe tersi — sıkışınca
     okunmaz. Gövde 15px, burada aralık nötre yakın olmalı. Eskiden
     -0.2px idi ve KALITIMLA 12–13px etiketlere de iniyordu; o boyutta
     -0.2px belirgin şekilde sıkı. Büyük rakamlar kendi (daha negatif)
     değerlerini zaten ayrı ayrı veriyor. */
  letter-spacing: -0.005em;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

/* Nokta deseni kaldırıldı (kullanıcının kararı, 2026-09-12: "arka
   plandaki beyaz noktalar" gitsin). Zemin artık düz — body::before
   ve kartlardaki eşlik eden desen katmanları da kaldırıldı, bkz.
   .glass/.card ve .ak/.ak-sari/.ak-turuncu/.ak-yayilan tanımları. */


.bg-orbs { display: none; }

.hidden { display: none !important; }

h1 { font-weight: 600; font-size: var(--fs-6xl); letter-spacing: -0.022em; margin-bottom: 6px; }
h2 { font-weight: 500; font-size: var(--fs-xl); letter-spacing: -0.008em; margin: var(--sp-6) 0 var(--sp-3); }

/* Ortak yüzey: düz beyaz kart, ince kenar, neredeyse görünmez gölge.
   Yarı saydam beyaz + bulanıklık: kartın arkasındaki degrade içinden
   hafifçe görünüyor.

   .shell-body BU LİSTEDE DEĞİL — bilerek. backdrop-filter taşıyan bir
   öğe, içindeki `position: fixed` çocuklar için kapsayıcı blok olur;
   sol bar fixed olduğu için gövdeye cam verilirse ray ekrana değil o
   kutuya göre konumlanır. */
/* TEK YÜZEY: anasayfadaki renksiz kartın ta kendisi. Liste, tablo,
   form, blok — hepsi aynı camdan. Bulanıklık 2px: zeminin nokta
   deseni içlerinden görünüyor, yükseği deseni siliyor ve yüzey
   saydam olmasına rağmen opak duruyor. */
/* .ak burada YOK, bilerek: anasayfa kartları kendi (koyu, nötr) yüzey
   kuralını taşıyor, bkz. aşağıdaki ".ak" tanımı. */
.glass, .card, .form-card, .table-wrap, .label-preview-panel,
.hist-sum div, .blok {
  /* LIQUID GLASS (kullanıcının kararı, 2026-09-05): yüksek bulanıklık +
     doygunluk artışı + üst kenarda beyaz ışık. Yüzey saydam.
     Yazı her yerde koyu (--ink ailesi) kaldığı için kontrast düşmüyor.
     Telefonda bu blur KAPALI (bkz. `pointer: coarse` bloğu).
     Nokta deseni kaldırıldı (kullanıcının kararı, 2026-09-12). */
  background-color: rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: blur(6px) saturate(1.45);
  backdrop-filter: blur(6px) saturate(1.45);
  /* Kenar çizgisi (kullanıcının kararı: "borderlar geri gelebilir").
     Camda çizgi hem dış hat hem üst ışık: ikisi birlikte yüzeyi
     kesilmiş bir levha gibi gösteriyor. */
  border: 1px solid rgba(20, 20, 15, 0.13);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75),
              inset 0 -1.5px 0 rgba(255, 255, 255, 0.4);
}
.shell-body { background: none; border: none; box-shadow: none; }

/* İçeriğin ÜSTÜNE binen yüzeyler opak kalıyor: altlarındaki yazı
   yarı saydamlıktan okunmaz hâle geliyordu. */
.modal, .ac-dropdown, .nav-menu, .scanner-box, .login-box, .ara-sonuc {
  background: var(--yuzey-opak);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}

/* ---------- Giriş ---------- */
.login-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box { border-radius: var(--radius-xl); padding: 40px 36px; width: 400px; max-width: 92vw; box-shadow: var(--sh-3); animation: popIn .5s var(--ease) backwards; }
.login-logo img { height: 42px; width: auto; display: block; margin-bottom: 4px; }
.login-logo span { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-sub { color: var(--ink-soft); margin: 6px 0 26px; font-size: 14px; }
.login-box input { width: 100%; margin-bottom: 12px; }
.login-error { color: var(--warn); font-weight: 600; margin-top: 12px; min-height: 22px; font-size: var(--fs-sm); }
/* Placeholder etiket degildir: yazmaya baslayinca kaybolur. Gorunur
   etiket hem klavyeyle hem ekran okuyucuyla alani adlandirir. */
.login-label { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); }
.login-box input { margin-bottom: var(--sp-4); }
.login-box .btn { width: 100%; margin-top: var(--sp-2); }
/* Teshis satiri: app.js yuklenmisse JS bunu kaldirir, yani bu kutu
   YALNIZCA gercekten bozukken gorunur. */
.login-tani {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  background: var(--amber-bg); color: var(--amber-ink);
  border-radius: var(--radius); padding: 12px 14px;
  font-size: var(--fs-xs); line-height: 1.5; margin: 0 0 var(--sp-5);
}
.login-tani .bi { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* ============================================================
   KABUK — sol cam ray + yüzen cam gövde
   ============================================================ */
.shell {
  display: flex; align-items: flex-start; gap: 12px;
  /* Sidebar gidince tek sütun kaldı; 1480px'te büyük monitörde iki
     yanda boşluk "dar" görünüyordu (kullanıcının kararı, 2026-09-12).
     Ekranın kalanına göre büyüyor, 1920px'te tavan var. */
  max-width: min(1920px, 100vw); margin: 0 auto; padding: 18px 28px 26px;
  min-height: 100dvh;
}
.shell-body {
  flex: 1; min-width: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: calc(100dvh - 44px);
  animation: shellIn .6s var(--ease) backwards;
}
@keyframes shellIn { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Sol ikon rayı ---------- */
.rail {
  position: sticky; top: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px; flex: 0 0 auto;
  border-radius: 26px;
  /* ÖNEMLİ — ipucu balonunun içerik altında kalmasının sebebi buydu:
     .rail'de backdrop-filter var, bu kendi yığın bağlamını (stacking context)
     yaratıyor. İçerideki .rail-tip z-index'i ne kadar büyük olursa olsun o
     bağlamın dışına çıkamıyor. .shell-body DOM'da sonra geldiği ve onun da
     backdrop-filter'ı olduğu için rayın üzerine boyanıyordu.
     Çözüm ipucunda değil, rayın kendisinde: raya z-index vermek. */
  z-index: 60;
  animation: shellIn .6s var(--ease) backwards;
}

/* LOGO - Sol Menü: wordmark'tan kırpılmış "b" glifi.
   Logo koyu renkli, mavi kutunun üstünde okunmuyordu; filtreyle beyaza
   çevriliyor (aktif ikonlarla aynı dil). */
.rail-logo {
  width: 52px; height: 52px;
  border-radius: 16px; margin-bottom: 14px;
  background: var(--brand-grad);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-brand);
  flex: none;
}
.rail-logo img {
  width: 22px; height: 26px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.rail-nav { display: flex; flex-direction: column; gap: 5px; }
.rail-btn {
  position: relative;
  width: 52px; height: 52px; border-radius: 17px;
  border: 1px solid transparent; background: transparent; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform .18s var(--ease), box-shadow var(--dur) var(--ease);
}
.rail-btn svg { width: 24px; height: 24px; }
.rail-btn:hover { background: var(--yuzey-3); border-color: var(--line); color: var(--ink); box-shadow: none; }
.rail-btn:active { transform: scale(.94); }
/* Aktif ikon sol bardaki ile aynı dilde: sarı kutu, koyu ikon. */
.rail-btn.active {
  background: var(--sari-grad); color: var(--sari-ink); border-color: transparent;
  box-shadow: 0 8px 24px -10px rgba(232, 212, 0, 0.65);
}
@keyframes iconPop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.rail-btn-exit { margin-top: 14px; }
.rail-btn-exit:hover { background: rgba(255, 59, 48, 0.12); color: var(--warn); }

/* ---------- TOOLTIP DÜZELTMESİ ---------- */
.rail-btn .rail-tip {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 99999;
  background: rgba(29, 29, 31, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 9px;
  white-space: nowrap;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--sh-2);
}
.rail-btn:hover .rail-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 820px) {
  .rail-btn .rail-tip { display: none !important; }
}

/* ---------- Üst bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px; min-height: 70px;
  /* Arkaplan ve alt çizgi yok (kullanıcının kararı, 2026-09-12) —
     üst bar sayfanın zeminiyle aynı, sınır çizgisiz. */
  border-bottom: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: -.3px; white-space: nowrap; }

/* LOGO - Üst Bar: tam wordmark, kendi koyu renginde.
   Yanına ayrıca "BONO AYAKKABI" yazmıyoruz — wordmark zaten markanın kendisi. */
.brand { text-decoration: none; color: inherit; flex: none; }
.brand-logo {
  height: 24px; width: auto; display: block;
  transition: opacity var(--dur) var(--ease);
}
.brand:hover .brand-logo { opacity: .65; }



/* Hap navigasyon */
.nav {
  /* Tek büyük hap DEĞİL — her buton kendi ayrı, köşeleri yuvarlak
     kutusu (kullanıcının kararı, 2026-09-12). Şerit artık salt
     düzen, kendi zemini/kenarı yok. */
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: none; border: none; box-shadow: none;
  padding: 0; justify-content: center; margin: 0 auto;
}
.nav-btn {
  font-family: inherit; font-weight: 500; font-size: 14px;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 8px 16px 8px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  /* İkon + yazı YAN YANA, tek satır, tek buton — sidebar temizliğinde
     (2026-09-12) bu üç kural kazara silinmişti, ikon kutusu yazının
     altına düşüyordu. Geri kondu, bu sefer yatay bar için. */
  display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform .16s var(--ease);
}
.nav-kutu {
  flex: none; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
}
.nav-ico { width: 18px; height: 18px; flex: none; }
.nav-yazi { line-height: 1; }
.nav-btn:hover { color: var(--ink); background: rgba(255,255,255,.7); }
.nav-btn:active { transform: scale(.97); }
.nav-btn.active { background: var(--ink); color: #fff; font-weight: 600; box-shadow: none; }
.nav-btn-logout { display: none; }
.menu-toggle { display: none; background: transparent; border: none; color: var(--ink); cursor: pointer; padding: 6px; border-radius: 10px; }

.topbar-right { display: flex; align-items: center; gap: 10px; }

/* ============================================================
   ÜST BAR — ORTA BÖLGE: nav YA DA arama/asistan çubuğu
   (kullanıcının kararı, 2026-09-12). Arama/asistan ikonuna
   tıklanınca nav gizlenip çubuk onun yerini "morf" ederek kaplıyor.
   ============================================================ */
.topbar-center {
  flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center;
  position: relative;
}
/* Morf, 3. deneme (kullanıcının kararı, 2026-09-12). Önceki iki deneme
   flex-grow/max-width ile nav'ı sıkıştırıp çubuğu onun yerine
   büyütüyordu — hem üst bar hâlâ kalınlaşıyordu hem de çubuk tam
   ortalanmıyordu. KÖKTEN ÇÖZÜM: çubuk artık akışın DIŞINDA,
   .topbar-center'a göre `position:absolute` + `left:50%` ile HER ZAMAN
   dead-center. nav'ın genişliğinin ne olduğu artık önemsiz — üst barın
   yüksekliğini de tek başına nav belirliyor, çubuk hiç katkı vermiyor. */
.topbar-center .nav {
  min-width: 0; overflow: hidden;
  opacity: 1; transform: scale(1);
  transition: opacity .22s var(--ease), transform .3s var(--ease);
}
.topbar-center.arama-acik .nav,
.topbar-center.asistan-acik .nav {
  opacity: 0; transform: scale(.96); pointer-events: none;
}
.topbar-center .ara-sar,
.topbar-center .ai-cubuk-sar {
  position: absolute; left: 50%; top: 50%;
  width: calc(100% - 40px); max-width: 560px;
  transform: translate(-50%, -50%) scale(.94);
  opacity: 0; pointer-events: none;
  /* Sabit YÜKSEKLİK, nav-btn ile aynı — üst bar kalınlaşmasın. Gölge
     YOK, tek çerçeve. */
  height: 36px; padding: 0 18px; gap: var(--sp-2);
  background: var(--yuzey-opak); border: 1px solid var(--line); box-shadow: none;
  transition: opacity .22s var(--ease), transform .3s var(--ease);
}
.topbar-center.arama-acik .ara-sar,
.topbar-center.asistan-acik .ai-cubuk-sar {
  opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto;
}
#dash-ara-sar:focus-within, #ai-cubuk-sar:focus-within {
  box-shadow: none !important; border-color: var(--accent);
}
/* Giriş kutusunun KENDİ varsayılan input çerçevesi/gölgesi — genel
   `input:focus` kuralı burada da devreye giriyordu ve hapın ortasında
   ikinci, dikdörtgen bir "gölgeli yer" gibi görünüyordu (kullanıcının
   kararı, 2026-09-12). Kutu şeklini .ara-sar/.ai-cubuk-sar zaten
   veriyor — input'un kendi çerçevesine hiç gerek yok. */
#dash-ara, #ai-cubuk {
  background: transparent !important; border: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 0 !important; width: auto; flex: 1; min-width: 0;
  /* Yer tutucu VE yazılan metin ortalı (kullanıcının kararı,
     2026-09-12) — soldan değil, kutunun ortasından başlıyor. */
  text-align: center;
}
#dash-ara:focus, #ai-cubuk:focus {
  background: transparent !important; box-shadow: none !important; border-color: transparent !important;
}
@media (min-width: 1180px) {
  /* Bu genişlikten sonra nav tek satır garanti (bkz. 1180px sarma
     kuralı) — üst bar artık min-height DEĞİL, sabit height: hiçbir
     çocuk onu büyütemez. */
  #topbar { height: 70px; }
}

/* Sağ kümedeki yuvarlak ikon butonlar (ara / asistan) */
.tb-yuvarlak {
  width: 38px; height: 38px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--glass-brd);
  background: rgba(255,255,255,.55); color: var(--ink-soft);
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform .16s var(--ease);
}
.tb-yuvarlak svg { width: 17px; height: 17px; }
.tb-yuvarlak:hover { background: rgba(255,255,255,.85); color: var(--ink); }
.tb-yuvarlak:active { transform: scale(.94); }
#tb-arama-btn.acik, #tb-asistan-btn.acik { background: var(--brand-grad); color: #fff; }

/* Yazdırma durumu artık yuvarlak — yalnızca nokta görünüyor, yazı
   ekran okuyucu / title için hâlâ DOM'da (görsel olarak gizli). */
.yaz-chip.tb-yuvarlak {
  gap: 0; padding: 0; width: 38px; height: 38px; border-radius: 50%;
}
.yaz-chip.tb-yuvarlak .yaz-nokta { margin: 0; width: 10px; height: 10px; }
.yaz-chip.tb-yuvarlak .yaz-chip-yazi { display: none; }
/* KESİN — ID ile. #yaz-chip eski `.ana-satir .yaz-chip` (height:42px,
   border-radius:999px) kalıntı kuralıyla aynı özgüllük seviyesinde
   kalıp yanlış boyuta düşebiliyordu; ID her class kombinasyonunu
   ezer, tartışma biter (kullanıcının kararı, 2026-09-12: "yuvarlak
   olsun"). */
#yaz-chip {
  width: 38px !important; height: 38px !important; padding: 0 !important;
  gap: 0 !important; border-radius: 50% !important; box-shadow: none !important;
  /* Nokta yuvarlağın SOLUNA yaslanıyordu — justify-content yoktu
     (kullanıcının kararı, 2026-09-12). */
  justify-content: center !important;
}

.ust-isletme-ad { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.user-chip {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.55); border: 1px solid var(--glass-brd);
  border-radius: 999px; padding: 5px 14px 5px 5px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  box-shadow: var(--sh-1);
}
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand-grad); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}

/* Gruplu menü */
.nav-group { position: relative; }
.nav-group-btn { display: inline-flex; align-items: center; gap: 3px; }
.nav-caret { width: 14px; height: 14px; opacity: .55; }
.nav-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 60;
  transform-origin: top center;
  border-radius: 18px; padding: 6px; min-width: 210px;
  background: var(--glass-2);
  box-shadow: var(--sh-3);
  display: none; flex-direction: column; gap: 2px;
}
.nav-group:hover > .nav-menu, .nav-group.open > .nav-menu { display: flex; animation: menuIn .22s var(--ease); }
@keyframes menuIn { from { opacity: 0; transform: translate(-50%, -8px) scale(.97); } }
.nav-group:hover::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.nav-menu .nav-btn { width: 100%; text-align: left; font-size: 14px; border-radius: 12px; }
.nav-group-btn.has-active { background: rgba(255,255,255,.85); color: var(--accent-dark); box-shadow: var(--sh-1); }

main { padding: 26px 26px 80px; }

/* Ekran geçişi — sol bardan günde onlarca kez tıklanıyor. Bu sıklıkta
   animasyon "canlı" değil YAVAŞ hissettiriyor: her tıklamada 0.4s ve
   10px'lik kayma, ekranın gecikmeyle geldiği izlenimi veriyordu.
   Kayma kaldırıldı, süre kısaldı — geçiş fark edilmiyor, sıçrama da yok. */
.screen { animation: screenIn .14s var(--ease); }
@keyframes screenIn { from { opacity: 0; } }

/* ---------- Butonlar ---------- */
/* Butonlar artık hap (999px) değil, 10px köşeli — tasarımın temel şekli.
   Hover'da yukarı zıplama yerine %2 büyüme; 150ms. Renkler düz, gradient
   yok: birincil #1d1d1f (mavi kaldırıldı, 2026-09-12), ikincil #6f6f77. */
.btn {
  font-family: inherit; font-weight: 600; font-size: var(--fs-md);
  border: 1px solid transparent;
  border-radius: 999px; padding: 14px 22px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s ease-out, box-shadow .15s ease-out, background .15s ease-out, color .15s ease-out;
}
.btn:hover { transform: scale(1.02); }
.btn:active { transform: scale(.97); }
/* Bütün düğmeler degrade + üst kenarda ince cam ışığı. */
.btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); }
/* ============================================================
   BUTON RENK SİSTEMİ (kullanıcının kararı, 2026-09-12)
   Pastel, düşük doygunluk — renk yalnızca aksiyonun ANLAMINI taşır,
   hiçbir buton canlı/doygun yeşil-turuncu-kırmızı OLMAZ. Düz renk,
   degrade yok (eski "her buton degrade taşır" kuralı bu beşi için
   bilerek terk edildi).
   ============================================================ */
.btn-primary { background: #1C1C1E; color: #fff; }
.btn-primary:hover { background: #2A2A2D; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }

.btn-secondary { background: #F3F2EF; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: #EAE8E3; }

.btn-success { background: #DDF5E8; color: #19703D; }
.btn-success:hover { background: #C8EBD8; }

.btn-warning { background: #FFF0D6; color: #A15C00; }
.btn-warning:hover { background: #FFE4B5; }

.btn-danger { background: #FBE9E9; color: #C62828; }
.btn-danger:hover { background: #F6D5D5; }

.btn-ghost { background: transparent; color: #666666; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: #F3F2EF; box-shadow: none; }

/* Dosya/bilgi gönderme aksiyonu — hafif mavi (kullanıcının kararı,
   2026-09-12: "Ekstre Gönder"). BİLEREK istisna: projede başka hiçbir
   yerde mavi yok, bu TEK anlam kategorisi (dosya/bilgi gönder) için
   dar kapsamlı. Standart aksiyon değil, .btn-primary/.btn-secondary
   yerine geçmez. */
.btn-info { background: #E8F2FF; color: #1769C2; }
.btn-info:hover { background: #D6E8FD; }

/* İkincil ama vurgulu eylem (Excel İndir vb.) — yukarıdaki altı
   role dahil değil, koyu-cam görünümü koruyor. */
.btn-dark {
  background: linear-gradient(140deg, rgba(72, 68, 60, 0.74) 0%, rgba(40, 37, 32, 0.78) 100%);
  color: #fff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.btn-dark:hover {
  background: linear-gradient(140deg, rgba(86, 81, 72, 0.85) 0%, rgba(50, 47, 41, 0.88) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-big { font-size: var(--fs-lg); padding: 16px 26px; }
.bi { width: 18px; height: 18px; flex: none; }
.btn-big .bi { width: 20px; height: 20px; }
.btn-small .bi { width: 15px; height: 15px; }
.btn-small { font-size: var(--fs-xs); padding: 9px 16px; border-radius: 999px; }
.btn.icon-only { position: relative; padding: 0; width: 42px; height: 42px; flex: none; border-radius: 50%; }
.btn.icon-only.btn-small { width: 34px; height: 34px; }
.btn-badge {
  position: absolute; top: -6px; right: -6px; background: #fff; color: var(--ink);
  font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 5px; line-height: 1.4;
  box-shadow: var(--sh-1); min-width: 15px; text-align: center;
}
.bi-inline { width: 14px; height: 14px; flex: none; vertical-align: -2px; margin-right: 3px; }
.bi-line { display: inline-flex; align-items: center; }
.btn:focus-visible, .rail-btn:focus-visible, .nav-btn:focus-visible, .tab-btn:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

/* ---------- Form elemanları ---------- */
/* Anasayfadaki arama/asistan barlarıyla AYNI kutu: yarı saydam beyaz,
   arkası bulanık, zemine oyulmuş gibi içe ışıyan. Tek satırlık alanlar
   hap; textarea çok satırlı olduğu için yumuşak köşeli. */
input, select, textarea {
  font-family: inherit; font-size: var(--fs-md); padding: 11px 18px;
  border: 1px solid rgba(20, 20, 15, 0.12); border-radius: 999px;
  background: rgba(255, 255, 255, 0.42); width: 100%; color: var(--ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  /* İçe doğru "oyuk" ışıma KALDIRILDI (kullanıcının kararı,
     2026-09-12) — sadece çerçeve. */
  box-shadow: none;
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
textarea { border-radius: var(--radius); padding: 13px 18px; }
/* Chrome, varsayılan görünümdeki <select>'e köşe yarıçapı uygulamıyor;
   kutu diğer alanların yanında köşeli kalıyordu. Native görünümü
   kapatıp oku kendimiz çiziyoruz. */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 11px 8px;
}
select::-ms-expand { display: none; }
/* Kaydırıcı: rayı form alanlarıyla aynı oyuk, tutamağı beyaz hap. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 26px; padding: 0; background: transparent;
  border: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: rgba(20, 20, 15, 0.12);
  box-shadow: inset 0 1px 2px rgba(20, 20, 15, 0.16);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px;
  border-radius: 50%; border: 1px solid rgba(20, 20, 15, 0.14);
  background: linear-gradient(140deg, #FFFFFF 0%, #EDEAE4 100%);
  box-shadow: 0 2px 6px -2px rgba(20, 20, 15, 0.45);
}
input[type="range"]:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

/* Onay kutusu native; hap/oyuk kuralları ona uymuyor. */
input[type="checkbox"], input[type="radio"] {
  width: auto; padding: 0; border-radius: 0;
  background: none; box-shadow: none; border: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
::-webkit-input-placeholder { color: var(--gray-light); }
::placeholder { color: var(--gray-light); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--ring);
}
label { display: block; font-weight: 500; font-size: var(--fs-xs); color: var(--ink-soft); margin: var(--sp-4) 0 6px; }

.search-input {
  font-size: var(--fs-lg); padding: 13px 22px; margin-bottom: var(--sp-4); border-radius: 999px;
  animation: tabMorph .42s var(--ease) .05s backwards; /* sekmelerden hemen sonra */
}
.pending-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pending-controls .tabs { margin-bottom: 0; }
.cari-list-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cari-list-toolbar .search-input { flex: 1; min-width: 220px; margin-bottom: 0; }
.cari-list-toolbar .sort-select { flex: none; }
#cari-list table { table-layout: fixed; }
/* colgroup ile sabit yüzdelik genişlik verilen tablolar table-layout:fixed
   OLMALI — auto'da tarayıcı pencere daraldıkça içeriğe göre sütunları
   yeniden hesaplıyor, bu da colgroup oranlarını yok sayıp sütun
   genişliklerinin/metinlerinin pencere boyutuna göre "kaymasına" sebep
   oluyordu (bkz. bekleyenler tablosu şikayeti). Sadece colgroup'lu tabloya
   uygulanır — #pending-body içindeki diğer (colgroup'suz) sekme tabloları
   fixed olursa ilk satırın genişliğine kilitlenip bozulur. */
.tbl-fixed { table-layout: fixed; min-width: 960px; }
/* Sipariş/Çıkan/Kalan/Stok gibi tek-iki haneli sayı sütunları dar tutulduğu
   için standart 18px yatay hücre boşluğu fazla yer kaplıyordu — bu dört
   sütun + Tarih'te boşluk daraltıldı, Tarih'e kazandırılan alanla
   "20.07.2026" artık Ürün sütununa taşmıyor. */
.tbl-fixed th.num, .tbl-fixed td.num { padding-left: 8px; padding-right: 8px; }
#cari-list td:first-child { overflow: hidden; text-overflow: ellipsis; }
.sort-select { font-size: var(--fs-sm); padding: 10px 40px 10px 18px; border-radius: 999px; cursor: pointer; width: auto; }

.form-card { border-radius: var(--radius); padding: 24px; max-width: 560px; }
.form-card .btn { margin-top: 20px; }
/* flex-wrap + gerçek bir taban genişliği ŞART: date/time gibi native
   girişlerin tarayıcı tarafından dayatılan bir asgari içerik genişliği
   var (`width:100%` bunu ezemiyor). min-width:0 olmadan flex öğesi o
   asgari genişliğin altına küçülmeyi REDDEDİYORDU — dar ekranda ikinci
   alan (ör. "Bitiş" tarihi) satırdan/viewport'tan taşıyordu. Artık
   sığmayınca alan kendi satırına düşüyor, sayfa değil. */
.form-row { display: flex; gap: 14px; align-items: start; flex-wrap: wrap; }
.form-row > div { flex: 1 1 160px; min-width: 0; }
.field-hint { font-size: 12px; line-height: 1.5; color: var(--ink-soft); margin: 10px 0 0; }
.manual-add-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.manual-add-row .grow { flex: 1; min-width: 220px; }
.manual-add-row .qty { width: 90px; }
.manual-add-row .btn { padding-top: 12px; padding-bottom: 12px; white-space: nowrap; }

/* ---------- Otomatik tamamlama ---------- */
.ac-wrap { position: relative; }
.ac-dropdown {
  margin-top: 6px; border-radius: var(--radius-lg);
  max-height: 240px; overflow-y: auto;
  background: var(--glass-2); animation: dropIn .2s var(--ease); transform-origin: top center;
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.ac-item { padding: 12px 16px; cursor: pointer; font-size: 15px; border-bottom: 1px solid var(--line); transition: background .16s; }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.ac-active { background: var(--accent-soft); }
.ac-empty { padding: 12px 16px; color: var(--ink-soft); font-size: 14px; }

/* ---------- Stok bazlı toplu etiket basma ---------- */
.stock-print-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.selected-count-text { font-weight: 600; color: var(--ink-soft); margin-right: 4px; }
#selected-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prod-ck, #products-select-all { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent-strong); }

/* ---------- Etiket tasarımı ---------- */
.label-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.label-preview-panel { border-radius: var(--radius-lg); padding: 24px; }
.label-preview-box { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.55); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; min-height: 140px; }
.label { overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #fff; box-sizing: content-box; }
.label svg { display: block; }
@media (max-width: 900px) { .label-settings-grid { grid-template-columns: 1fr; } }

/* ---------- Ekran başlığı ---------- */
/* KÖK NEDEN — ÜÇÜNCÜ VE KALICI DÜZELTME (kullanıcı bildirimi, üst üste
   ekran görüntüleri): sekmeler eskiden position:absolute + top:50% ile
   .screen-head'in TAMAMINA göre ortalanıyordu. h1 kısaysa ve head-actions
   birkaç butonla genişse, "tam ortası" matematiksel olarak head-actions'ın
   İÇİNE denk geliyor, ikisi aynı yerde çiziliyordu — hem 761-1150px
   arası genişliklerde hem "masaüstü siteyi iste" açık telefonlarda.
   Absolute/transform hilesi tamamen kaldırıldı: üç sütun GERÇEK IZGARA
   (1fr auto 1fr). Sütunlar asla üst üste binmez; h1 sol sütunda, sekmeler
   kendi orta sütununda, head-actions sağ sütunda — her sütun ne kadar
   dar/geniş olursa olsun. */
.screen-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: 12px; row-gap: 12px; margin-bottom: 20px;
  position: relative;
}
.screen-head h1 { margin-bottom: 0; grid-column: 1; justify-self: start; min-width: 0; }
.screen-head .tabs {
  grid-column: 2; justify-self: center; margin: 0;
  animation: tabMorph .42s var(--ease) backwards;
}
.screen-head .head-actions {
  grid-column: 3; justify-self: end; max-width: 100%;
  /* Işık, buton sayısı arttıkça ikinci satıra SARMIYOR (o da aynı üst
     üste binme hatasına yol açardı) — sığmayınca kendi içinde yatay
     kayıyor, .tabs/.grup-sekme ile aynı desen. */
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.screen-head .head-actions::-webkit-scrollbar { display: none; }
.screen-head .head-actions > .btn, .screen-head .head-actions > .head-more {
  flex: none;
}
@media (max-width: 760px) {
  /* Telefonda üç sütun yerine tek sütun, alt alta: h1 → head-actions →
     sekmeler (sekmeler .grup-sekme ile aynı desen, soldan başlar, parmakla
     kayar — bkz. .screen-head .tabs order:3 aşağıda). */
  .screen-head { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .screen-head h1 { grid-column: auto; }
  .screen-head .tabs {
    grid-column: auto; justify-self: auto;
    position: static; margin: 0 auto; order: 3; width: 100%; justify-content: flex-start;
    animation: tabMorph .42s var(--ease) backwards;
  }
  .screen-head .head-actions { grid-column: auto; justify-self: auto; }
}
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.badge { background: var(--accent-soft); color: var(--accent-dark); border-radius: 999px; padding: 2px 10px; font-size: var(--fs-2xs); font-weight: 600; margin-left: 6px; }

/* ---------- Kartlar ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.card {
  border-radius: var(--radius); padding: 20px;
  position: relative; overflow: hidden;
  transition: box-shadow .1s ease-out;
  animation: cardIn .4s var(--ease) backwards;
}
.cards .card:nth-child(1) { animation-delay: .04s; }
.cards .card:nth-child(2) { animation-delay: .08s; }
.cards .card:nth-child(3) { animation-delay: .12s; }
.cards .card:nth-child(4) { animation-delay: .16s; }
.cards .card:nth-child(5) { animation-delay: .20s; }
.cards .card:nth-child(6) { animation-delay: .24s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.card:hover { box-shadow: var(--sh-2); }
.card .num {
  font-weight: 600; font-size: var(--fs-3xl); line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.card .lbl { color: var(--ink-soft); font-size: var(--fs-xs); margin-top: 4px; font-weight: 500; }

.card-hero {
  background: var(--stok-grad) !important; border-color: transparent !important; color: #fff;
  box-shadow: var(--stok-golge) !important;
}
.card-hero .lbl { color: rgba(255,255,255,.88); }
.card-hero .num, .card-hero .num.counting { color: #fff; }
.card-hero::after { content: none; }
@keyframes sheen { 0% { transform: translateX(-70%); } 45%, 100% { transform: translateX(70%); } }

/* Ana sayfa bölüm başlıkları.
   Dashboard eskiden yedi bloğu arka arkaya, hiçbir ayrım olmadan diziyordu:
   kullanıcı nereye baktığını başlıktan değil, kartların şeklinden anlamaya
   çalışıyordu. Bu başlıklar "para / eylem / depo / analiz / bugün"
   bölümlerini ayırıyor. h2'nin kendisinden daha sessizler — bölüm etiketi
   olduklarını belli etmek için küçük ve büyük harf. */
.dash-baslik {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: var(--sp-6) 0 var(--sp-3);
}
.dash-baslik:first-of-type { margin-top: var(--sp-5); }

.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 26px; }
/* Izgara düzenindeyken düğme hücresini doldurur. Anasayfada şerit flex'e
   çevrildiği için orada `width: auto` — yoksa her düğme tam genişlik alıp
   alt alta diziliyordu. */
.quick-actions .btn { width: 100%; }
.dash-izgara .quick-actions .btn { width: auto; }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.dash-cols h2 { margin-top: 0; }

/* ---------- Tablolar ---------- */
.table-wrap { border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table + table { margin-top: 4px; }
table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: var(--fs-sm); table-layout: auto; }
th { font-weight: 600; font-size: var(--fs-2xs); color: var(--ink-soft); text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--yuzey-2); text-transform: uppercase; letter-spacing: .04em; }
/* overflow-wrap KÖK NEDEN: eskiden "anywhere" idi — dar ekranda sütun
   sıkışınca kelimeyi ORTASINDAN bölüyordu (rakam, tutar, rozet metni fark
   etmeden). break-word + word-break:normal önce boşluktan sarar, gerçekten
   sığmayan TEK kelimeyi böler; tablo o zaman .table-wrap içinde YATAY
   KAYAR — sayfa değil. Bu artık tek tanım; .cari-defter'in eskiden aynı
   sorun için taşıdığı ayrı override kaldırıldı (bkz. o tablonun notu). */
td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: break-word; word-break: normal; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s ease-out; }
tbody tr:hover td { background: var(--yuzey-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-xs); letter-spacing: 0; }
.stok-ok { color: var(--ok); font-weight: 600; }
.stok-zero { color: var(--warn); font-weight: 600; }
/* Durum etiketleri: degrade zemin + cam kenar. Renkler --ok-bg /
   --amber-bg / --warn-bg / --info-bg üzerinden geliyor, o yüzden
   projedeki BÜTÜN rozetler (gel-badge, bek-rozet, test-sonuc...)
   aynı anda degradeye geçiyor. */
.tag {
  display: inline-block; font-size: var(--fs-2xs); font-weight: 700;
  padding: 4px 11px; border-radius: 999px; white-space: normal; line-height: 1.4;
  background: var(--neutral-bg); color: var(--ink-soft);
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Sabit, kısa etiket metinleri (tek kelime) ortadan bölünmesin diye nowrap; */
/* dinamik/uzun içerikli .tag'ler (örn. "ALTERNATİF VAR: X (N seri)") normal kalır. */
.tag-fixed { white-space: nowrap; }
.tag-new { background: var(--ok-bg); color: var(--ok); }
.tag-upd { background: var(--amber-bg); color: var(--amber); }
/* .tag-del işaretlemede kullanılıyordu ama karşılığı YOKTU: hatalı
   satırın rozeti nötr görünüyordu. */
.tag-del { background: var(--warn-bg); color: var(--warn-ink); }
.fark-pos { color: var(--ok); font-weight: 600; }
.fark-neg { color: var(--warn); font-weight: 600; }

/* ---------- Sayım ---------- */
.info-text { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 20px; max-width: 68ch; }
.count-flash {
  background: linear-gradient(135deg, #2E2B26 0%, #43403A 100%); color: #fff;
  border-radius: var(--radius-lg); padding: 26px; text-align: center;
  font-weight: 700; font-size: 26px; letter-spacing: -.6px; margin-bottom: 16px;
  min-height: 96px; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-3);
}
.count-flash.flash-ok { animation: flashOk .35s; }
.count-flash.flash-err { animation: flashErr .5s; }
@keyframes flashOk { 0% { background: var(--ok-fill); } 100% { background: #2E2B26; } }
@keyframes flashErr { 0%, 50% { background: var(--warn); } 100% { background: #2E2B26; } }
.count-summary { display: flex; gap: 20px; margin-bottom: 14px; font-weight: 600; font-size: 16px; }
.count-actions { display: flex; gap: 12px; margin-top: 20px; }
.qty-ctrl { display: inline-flex; align-items: center; gap: 8px; }
.qty-ctrl button { width: 36px; height: 36px; font-size: 20px; font-weight: 600; border: none; border-radius: 11px; background: var(--brand-grad); color: #fff; cursor: pointer; box-shadow: var(--sh-1); transition: transform .16s var(--ease); }
.qty-ctrl button:active { transform: scale(.9); }
.qty-ctrl input { width: 62px; text-align: center; padding: 7px; font-weight: 600; }
.line-note-input { width: 140px; padding: 8px 10px; font-size: 14px; border: 1px solid var(--line-strong); border-radius: 10px; }
/* Birim fiyat kutusunun altındaki liste fiyatı referansı (Sipariş Al) —
   müşteriye özel fiyat ile ürünün normal fiyatı yan yana görünsün diye. */
.line-note-alt { margin-top: 4px; font-size: var(--fs-2xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- Seri ⇄ Çift sayacı ----------
   Sipariş alırken müşteri "üç seri" diyor, sistem çift tutuyor. İki kutu
   yan yana durur, biri değişince öteki canlanarak güncellenir. Seri
   kutusunun İKİ YANINDA artı/eksi var — parmakla en hızlı yol o. */
.seri-cift { display: inline-flex; align-items: flex-end; gap: 10px; }
.seri-cift .sc-alan { display: flex; flex-direction: column; gap: 5px; }
.seri-cift .sc-cap {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft); padding-left: 2px;
}
.seri-cift .sc-row { display: inline-flex; align-items: center; gap: 7px; }
.seri-cift button {
  width: 36px; height: 36px; flex: 0 0 36px; font-size: 22px; font-weight: 600; line-height: 1;
  border: none; border-radius: 11px; background: var(--brand-grad); color: #fff; cursor: pointer;
  box-shadow: var(--sh-1); transition: transform .16s var(--ease), box-shadow .16s var(--ease);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.seri-cift button:hover { box-shadow: var(--sh-brand); }
.seri-cift button:active { transform: scale(.88); }
/* Yükseklik artı/eksi tuşlarıyla AYNI: iki kutunun üstündeki "SERİ" ve
   "ÇİFT" yazıları tek hizada dursun (biri tuşlu satır, öteki tek kutu). */
.seri-cift input {
  width: 66px; height: 36px; text-align: center; padding: 0 4px; font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums; border: 1px solid var(--line-strong);
  border-radius: 11px; background: #fff; color: var(--ink);
}
.seri-cift input:focus { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
/* Çift TÜRETİLEN taraf: gözle ayrılsın ama tıklanabilir olduğu belli olsun. */
.seri-cift .sc-cift { background: var(--accent-soft); border-color: transparent; color: var(--accent-dark); }
.seri-cift .sc-esit { font-size: 17px; font-weight: 700; color: var(--gray-light); padding-bottom: 8px; }

/* Değişen kutu: kısa bir büyüme + mavi vurgu. Sadece transform/background
   canlanıyor — düzen (layout) hiç hesaplanmıyor, tablo zıplamıyor. */
@keyframes scParla {
  0%   { transform: scale(1);    background: var(--accent-soft); }
  38%  { transform: scale(1.16); background: #e6e3da; }
  100% { transform: scale(1); }
}
.seri-cift input.sc-parla { animation: scParla .34s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .seri-cift input.sc-parla { animation: none; }
  .seri-cift button:active { transform: none; }
}

/* Tablo satırı içinde: aynı bileşen, daha dar. */
.seri-cift.sc-kompakt { gap: 7px; }
.seri-cift.sc-kompakt button { width: 32px; height: 32px; flex-basis: 32px; font-size: 20px; border-radius: 10px; }
.seri-cift.sc-kompakt input { width: 56px; height: 32px; font-size: 15px; padding: 0 3px; }
.seri-cift.sc-kompakt .sc-esit { font-size: 15px; padding-bottom: 6px; }

@media (max-width: 560px) {
  .seri-cift { gap: 8px; }
  .seri-cift input { width: 58px; }
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: transparent;
  /* Arkadaki ekran bulanıklaşsın; pencerenin kendisi opak. */
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
  animation: fadeIn .2s var(--ease);
}
.modal {
  border-radius: var(--radius-xl); padding: 28px; width: 660px; max-width: 96vw;
  max-height: 88vh; overflow-y: auto;
  background: var(--yuzey-opak);
  box-shadow: var(--sh-3);
  animation: popIn .28s var(--ease);
}
@keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.modal h3 { font-weight: 600; font-size: var(--fs-3xl); letter-spacing: -.015em; margin-bottom: var(--sp-4); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
/* Onay penceresi metni: confirm() mesajları satır sonu taşıyor, o
   yüzden boşluk korunuyor. */
.onay-metin {
  white-space: pre-wrap; color: var(--ink-soft);
  font-size: var(--fs-md); line-height: 1.6; margin-top: -6px;
}
.modal .table-wrap { box-shadow: none; }

/* ---------- Fiyatsız çıkış uyarısı ----------
   Fiyatı girilmemiş satır cariye girmiyor: mal gitmiş, borç yazılmamış.
   Bu yüzden uyarı kehribar zeminli ve kartlardan ÖNCE duruyor. Sorun
   yokken hiç çizilmiyor — her zaman görünen bir uyarı, uyarı olmaktan
   çıkar. */
.fiyatsiz-serit {
  margin-bottom: var(--sp-4);
  padding: 14px 20px;
  border-radius: var(--radius-xl);
  background: var(--amber-bg);
  border: 1px solid rgba(161, 92, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: var(--amber-ink);
  animation: cardIn .35s var(--ease) backwards;
}
.fys-bas {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--fs-lg);
}
.fys-bas .btn { margin-left: auto; }
.fys-ikon { display: inline-flex; flex: none; }
.fys-ikon .bi { width: 20px; height: 20px; }
.fys-sayi {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; opacity: .85;
}
.fys-aciklama { margin: 6px 0 0; font-size: var(--fs-sm); line-height: 1.5; opacity: .9; }
.fys-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Cari ekranında isimler düğme (defteri açar), anasayfada düz yazı. */
.fys-ad {
  font-family: inherit; font-size: var(--fs-xs); font-weight: 700;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(161, 92, 0, 0.2);
  color: inherit; cursor: pointer;
  transition: background .15s ease-out;
}
.fys-ad:hover { background: rgba(255, 255, 255, 0.85); }
.fys-ad-duz { cursor: default; }
.fys-ad-duz:hover { background: rgba(255, 255, 255, 0.55); }
@media (max-width: 560px) {
  .fys-bas .btn { margin-left: 0; width: 100%; }
}

/* ---------- Toast ---------- */
#toast-root { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast {
  background: rgba(28, 28, 24, 0.94); color: #fff; padding: 13px 22px; border-radius: 999px;
  font-weight: 500; font-size: var(--fs-sm); box-shadow: var(--sh-3);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; gap: 10px;
  /* Kare (keyframe) DEĞİL geçiş (transition): barkod okuturken toast'lar
     arka arkaya biniyor. Kare her seferinde sıfırdan başlar, geçiş
     bulunduğu yerden devam eder. */
  opacity: 0; transform: translateY(18px) scale(.94);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.toast.gir { opacity: 1; transform: none; }
/* Girdiği yoldan çıkıyor — aşağı. Çıkış daha hızlı: kullanıcı okumayı
   bitirmiş, sistemin cevabı bekletmiyor. */
.toast.cik { opacity: 0; transform: translateY(18px) scale(.94); transition-duration: .18s; }
.toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.toast.err::before { background: var(--warn-fill); }
.toast.ok::before { background: var(--ok-fill); }
/* Uzun mesaj tek satirda ezilmesin; telefonda ekrani asmasin. */
.toast { max-width: min(92vw, 460px); text-align: left; line-height: 1.45; border-radius: var(--radius-lg); }

/* ---------- Uyarı kutusu ---------- */
.alert { padding: 14px 18px; border-radius: var(--radius-sm); font-weight: 500; margin: var(--sp-3) 0; }
.alert-warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid rgba(215, 0, 21, 0.18); }

/* ---------- Etiket baskı ---------- */
#print-area { display: none; }
@media print {
  body > *:not(#print-area) { display: none !important; }
  body { background: #fff; }
  #print-area { display: block; }
  .label { page-break-after: always; }
}

.label-page {
  display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center;
  page-break-after: always; break-after: page;
}
.label-page:last-child { page-break-after: auto; break-after: auto; }
.label-page .label { flex: 0 0 auto; break-inside: avoid; page-break-inside: avoid; }
@media print {
  .label-page .label { page-break-after: auto !important; outline: 1px dashed #bbb; }
}

/* ---------- Kamera ile barkod okuma ---------- */
.fab-scan {
  position: fixed; right: 20px; bottom: 24px; width: 60px; height: 60px; border-radius: 50%;
  background: var(--accent-strong); color: #fff; font-size: 24px; border: none; cursor: pointer;
  box-shadow: var(--sh-brand); z-index: 90; display: flex; align-items: center; justify-content: center;
  transition: transform .2s var(--ease), box-shadow var(--dur) var(--ease);
}
.fab-scan::after { content: none; }
@keyframes pulse { 70%, 100% { box-shadow: 0 0 0 18px rgba(20,20,15,0); } }
.fab-scan:hover { transform: scale(1.06); }
.fab-scan:active { transform: scale(.93); }
.scanner-overlay { position: fixed; inset: 0; background: rgba(10,11,20,.9); backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 14px; animation: fadeIn .2s var(--ease); }
.scanner-box { border-radius: var(--radius-xl); padding: 16px; width: 480px; max-width: 100%; background: var(--yuzey-opak); animation: popIn .28s var(--ease); }
.scanner-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 600; font-size: 15px; padding: 0 4px; }
#reader { width: 100%; min-height: 240px; border-radius: var(--radius); overflow: hidden; background: #000; }
#reader video, #reader img { border-radius: var(--radius); }
#reader__scan_region { border-radius: var(--radius); }
#reader__dashboard { display: none !important; }
.scanner-flash { margin-top: 12px; background: #2E2B26; color: #fff; border-radius: var(--radius); padding: 16px; text-align: center; font-weight: 600; font-size: 16px; min-height: 54px; display: flex; align-items: center; justify-content: center; }
.scanner-flash.flash-ok { animation: flashOk .35s; }
.scanner-flash.flash-err { animation: flashErr .5s; }

/* ---------- Sekmeler ---------- */
/* Ray, form alanlarıyla aynı oyuk; seçili sekme rayın üstünde duran
   beyaz bir hap. Sert kenar ve gri dolgu yok. */
.tabs {
  /* Çerçevesiz — her sekme kendi ayrı butonu (kullanıcının kararı,
     2026-09-12: "üst bar gibi ayrı buton, çerçeve içinde olmasın").
     Ortalı, üst barın altında, tüm sayfalar için geçerli. Açılışta
     morf: bkz. @keyframes tabMorph. */
  display: flex; gap: 6px; margin: 0 auto var(--sp-4); flex-wrap: wrap;
  background: none; border: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
  padding: 0; width: fit-content; max-width: 100%;
  animation: tabMorph .42s var(--ease) backwards;
}
.tab-btn {
  font-family: inherit; font-weight: 600; font-size: var(--fs-sm); padding: 9px 18px;
  border: 1px solid var(--line);
  background: transparent; color: var(--ink-soft); border-radius: 999px; cursor: pointer;
  transition: background .15s ease-out, color .15s ease-out, transform .16s var(--ease); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab-btn .bi { width: 15px; height: 15px; }
.tab-btn:hover { color: var(--ink); background: rgba(255,255,255,.7); }
.tab-btn:active { transform: scale(.97); }
/* Belirgin morf (kullanıcının kararı, 2026-09-12: "daha belirgin
   olsun") — daha büyük ölçek farkı, hafif bulanıklık, biraz daha
   uzun süre. */
@keyframes tabMorph {
  from { opacity: 0; transform: scale(.75) translateY(-10px); filter: blur(3px); }
  60%  { opacity: 1; transform: scale(1.03) translateY(0); filter: blur(0); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
/* .screen-head .tabs positioning'i translate(-50%,-50%) İLE yapıyor
   (bkz. aşağıda) — yukarıdaki keyframe'in kendi transform'u onu
   ezip önce sağa kaydırıyordu, sonra animasyon bitince yerine
   zıplıyordu ("önce sağda, sonra ortada" hatası, 2026-09-12,
   2. bildirim). Ortalanan bağlamlar için ayrı, ortalamayı da taşıyan
   keyframe. */
@keyframes tabMorphCenter {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.75) translateY(-10px); filter: blur(3px); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.03) translateY(0); filter: blur(0); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tabs, .grup-sekme, .search-input, .ara-sar, .ai-cubuk-sar { animation: none !important; }
}
/* Aktif sekme saydam cam: rayın ve zeminin rengi içinden geçiyor. */
/* Aktif sekme üst bardaki nav-btn ile aynı dil: siyah tonları
   (kullanıcının kararı, 2026-09-12). */
.tab-btn.active {
  background: var(--ink); border-color: var(--ink);
  color: #fff; font-weight: 700;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}

.report-customer { margin-top: 18px; }
.report-customer h3 { font-weight: 600; font-size: 17px; margin-bottom: 8px; }
.report-subtotal { font-weight: 600; color: var(--ink-soft); margin: 6px 0 4px; font-size: 14px; }
.report-total {
  font-weight: 600; background: var(--accent-strong); color: #fff;
  padding: 16px 22px; border-radius: var(--radius); margin-top: 18px; font-size: var(--fs-lg);
}

/* Depo kırılımı raporu (spec §11). Şirket toplamı satırı, depoların
   arasında kaybolmasın diye üstünde kalın bir çizgiyle ayrılıyor —
   ayrı bir renk kullanılmadı, tabloyu iki parçaya bölerdi. */
.rapor-toplam > td { border-top: 2px solid var(--line-strong); }
/* "Depo belirtilmemiş" gibi bir DEĞER değil, bir YOKLUK bildiren metin. */
.muted { color: var(--ink-soft); }

/* ---------- Fiyat + Cari ---------- */
.price-cell { white-space: nowrap; }
.price-input {
  width: 116px; max-width: 130px; text-align: right;
  padding: 8px 11px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(255,255,255,.8); color: var(--ink);
}
.price-input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: var(--ring); }
.price-input::placeholder { color: var(--ink-soft); }

.price-confirm-row {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; margin: 7px 0; border: 1px solid var(--line);
  border-radius: var(--radius); background: rgba(255,255,255,.55); font-size: 14px; line-height: 1.45;
}
.price-confirm-row input[type="checkbox"] { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--accent-strong); cursor: pointer; }
.price-confirm-row label { margin: 0; font-size: 14px; color: var(--ink); cursor: pointer; }

/* ÖNEMLİ: display:flex DOĞRUDAN <td>'ye değil, içindeki .ra-flex div'ine
   uygulanır. <td>'ye display:flex verilirse tarayıcı onu artık normal bir
   tablo hücresi gibi işlemiyor — vertical-align:middle etkisiz kalıyor ve
   içerik satırın gerçek (bazen uzun Ürün/Müşteri metniyle uzamış) yüksekliği
   içinde ORTALANMAK yerine TEPEYE yapışıyor. Bu, aylardır çözülemeyen
   "satır çizgisi kayıyor" şikayetinin asıl kaynağıydı — Playwright ile
   izole sayfada görsel olarak doğrulandı. <td class="row-actions"> normal
   bir hücre olarak kalır (vertical-align:middle miras alır); flex/gap/nowrap
   SADECE .ra-flex'te. */
.row-actions { text-align: right; }
.ra-flex { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; align-items: center; white-space: nowrap; }
/* Butonların box-shadow'u: satır Ürün/Müşteri sütunundaki metin sarmasıyla
   normalden uzun olduğunda, gölge satırın gerçek alt çizgisinden çok daha
   yukarıda kalıp SANKİ ikinci bir (yanlış hizalı) çizgiymiş gibi görünüyordu.
   Tablo içindeki aksiyon butonlarında gölge tamamen kapalı. */
.ra-flex .btn { box-shadow: none; }
.icon-btn {
  border: 1px solid rgba(20, 20, 15, 0.12);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 38px; height: 38px; cursor: pointer; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform .16s var(--ease);
}
.icon-btn:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.icon-btn.danger:hover { border-color: var(--warn); background: var(--warn-bg); }
.icon-btn:active { transform: scale(.92); }
.icon-btn + .icon-btn { margin-left: 4px; }

.donem-head {
  font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--accent-dark); margin: 20px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.row-total { font-weight: 600; }

@media print {
  .print-report { font-family: -apple-system, Arial, sans-serif; color: #000; }
  .print-report h2 { font-size: 18pt; margin-bottom: 4pt; }
  .print-report .rc { margin-top: 14pt; page-break-inside: avoid; }
  .print-report h3 { font-size: 13pt; border-bottom: 2px solid #000; padding-bottom: 2pt; margin-bottom: 4pt; }
  .print-report table { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
  .print-report th, .print-report td { border: 1px solid #999; padding: 3pt 6pt; text-align: left; }
  .print-report td.n, .print-report th.n { text-align: right; }
}

.card .num.counting { color: var(--ink); }
.card-accent-warn { background: rgba(255, 59, 48, 0.06) !important; border-color: rgba(255, 59, 48, 0.15) !important; }
.card-accent-warn .num { color: var(--warn); }
.card-accent-soft { background: rgba(255,255,255,.42) !important; }

.gel-group { margin-bottom: 20px; }
.gel-group h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.gel-badge { background: var(--ok-bg); color: var(--ok); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.gel-late { background: var(--warn-bg); color: var(--warn); }

.hist-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.hist-in { color: var(--ok); font-weight: 600; }
.hist-out { color: var(--warn); font-weight: 600; }
.hist-void { color: var(--ink-soft); text-decoration: line-through; }
.hist-sum { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.hist-sum div { border-radius: var(--radius); padding: 12px 16px; font-size: 13px; color: var(--ink-soft); }
.hist-sum b { display: block; font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.6px; }
.link-like { background: none; border: none; padding: 0; font: inherit; color: var(--accent-dark); font-weight: 600; cursor: pointer; text-align: left; }
.link-like:hover { text-decoration: underline; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .row-2 { grid-template-columns: 1fr; } }

/* Modal içinde onay kutusu + etiketi tek satırda hizalar (adres etiketi anahtarı) */
.chk-line { display: flex; align-items: center; gap: 9px; margin-top: 14px; cursor: pointer; font-weight: 600; }
.chk-line input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); cursor: pointer; }

.screen > h1:first-child { padding-bottom: 16px; border-bottom: 1px solid rgba(20, 20, 15, 0.06); margin-bottom: 22px; }
.screen h2 { display: flex; align-items: center; gap: 8px; }
.screen h2::before { content: none; }
.sup-pane { animation: fadeIn .25s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } }
.table-wrap table tr td[colspan], .table-wrap table tr:only-child td { color: var(--ink-soft); }

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  /* NOT: overflow-x:auto KULLANMA — CSS kuralı gereği overflow-x tanımlanınca
     overflow-y otomatik "auto" olur ve bu da altta açılan .nav-menu (mouse
     üzeriyle açılan akordiyon) dropdown'unu keser, pencere yarı ekran
     olduğunda görünmez olur. Bunun yerine satır sar (flex-wrap). */
  .nav { flex: 1 1 100%; order: 3; margin: 0; justify-content: flex-start; flex-wrap: wrap; }
  .topbar { flex-wrap: wrap; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .user-name { display: none; }
  .user-chip { padding: 5px; }
}

/* ---------- Mobil ---------- */
@media (max-width: 820px) {
  .shell { padding: 0; gap: 0; display: block; }
  .shell-body { border-radius: 0; border: none; box-shadow: none; min-height: 100dvh; background: transparent; padding-left: 0; }
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 95;
    flex-direction: row; justify-content: space-around; gap: 0;
    border-radius: 0; border: none; border-top: 1px solid var(--line);
    background: var(--yuzey);
    box-shadow: 0 -6px 24px -14px rgba(20, 20, 15, 0.35);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .rail-logo, .rail-btn-exit, .rail-secondary { display: none; }
  .rail-nav { flex-direction: row; gap: 2px; width: 100%; justify-content: space-around; }
  .rail-tip { display: none !important; }
  .rail-btn { width: 46px; height: 46px; }

  .topbar { padding: 10px 14px; min-height: 62px; gap: 10px; }
  /* Açılır panel/hamburger YOK (kullanıcının kararı, 2026-09-12: "sidebar
     kullanılmayacak, tek üst nav, her genişlikte yatay pill nav"). Burada
     ESKİDEN .nav'ı telefonda display:none yapıp yalnızca #menu-toggle'a
     basınca açılan bir panele çeviren kurallar vardı — üst bar butonları
     telefonda hiç görünmüyordu, bu KÖK NEDENDİ. Artık nav masaüstündeki
     gibi her zaman görünür, yalnızca parmakla yatay kayıyor (.tabs /
     .grup-sekme ile aynı desen). */
  .menu-toggle { display: none; }
  /* Arama/asistan/yazıcı durumu telefonda da erişilebilir kalmalı
     (kullanıcının kararı, 2026-09-12) — eskiden burada .user-chip
     vardı ve gizleniyordu, o kart artık burada değil. */
  .topbar-right { gap: 6px; }
  .ust-isletme-ad { display: none; }
  .tb-yuvarlak { width: 40px; height: 40px; }
  /* Özgüllük NOTU: `.topbar-center .nav` (dosya başı, arama/asistan morfu
     için `overflow:hidden` veriyor) iki sınıflı — düz `.nav` (tek sınıf)
     burada onu EZEMEZ, kaydırma sessizce iptal olurdu. Aynı özgüllükle
     karşılık veriliyor. */
  .topbar-center .nav {
    display: flex; flex-wrap: nowrap; justify-content: flex-start;
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-btn { flex: none; white-space: nowrap; }
  .nav-group { width: 100%; }
  .nav-group:hover::after { display: none; }
  .nav-menu {
    position: static; transform: none; display: flex; box-shadow: none; border: none;
    padding: 0 0 0 12px; min-width: 0; background: transparent; margin-top: 2px;
    backdrop-filter: none; -webkit-backdrop-filter: none; animation: none;
  }
  .nav-menu .nav-btn { font-size: 14px; padding: 12px 16px; }
  .nav-group-btn { pointer-events: none; opacity: .65; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; padding-bottom: 4px; }
  .nav-caret { display: none; }
  .nav-btn-logout { display: block; color: var(--warn); border-top: 1px solid var(--line); margin-top: 6px; padding-top: 16px; border-radius: 0; }

  main { padding: 18px 14px 110px; }
  h1 { font-size: 22px; }
  h2 { font-size: 16px; }
  .count-flash { font-size: 20px; padding: 20px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card .num { font-size: 26px; }
  .quick-actions { grid-template-columns: 1fr; }
  .dash-cols { grid-template-columns: 1fr; gap: 8px; }
  .form-card { padding: 18px; max-width: 100%; }
  .modal { padding: 20px; border-radius: 24px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1; min-width: 120px; }
  input, select, textarea, .btn { min-height: 46px; }
  .btn-small { min-height: 38px; }
  th, td { padding: 11px 13px; font-size: 14px; }
  .fab-scan { right: 14px; bottom: 86px; width: 54px; height: 54px; font-size: 22px; }
  .screen-head .head-actions { width: 100%; }
  .screen-head .head-actions .btn { flex: 1; min-width: 45%; }
  .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}

/* ---------- Küçük telefon ---------- */
@media (max-width: 420px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card { padding: 15px; border-radius: 16px; }
  .card .num { font-size: 24px; }
  .card .lbl { font-size: 12px; }
  h1 { font-size: 22px; }
  .btn { padding: 11px 16px; font-size: 14px; }
  .btn-big { font-size: 15px; padding: 14px 18px; }
  .brand-soft { display: none; }
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, .card:hover, .icon-btn:hover, .rail-btn:hover { transform: none !important; }
}

/* ---------- Dokunmatikte hover yok ----------
   Parmakla dokunulan öğede tarayıcı :hover'ı bırakmıyor: elini çektikten
   sonra düğme büyümüş/renklenmiş kalıyor. Fare yoksa hover'ın görsel
   karşılığını kapatıyoruz — basma geri bildirimini (:active) veren zaten
   ayrı kural, o kalıyor. */
@media (hover: none) {
  .btn:hover, .card:hover, .icon-btn:hover, .rail-btn:hover,
  .nav-btn:hover, .tab-btn:hover { transform: none; }
  .nav-btn:hover:not(.active) { background: transparent; color: var(--ink-soft); }
  .tab-btn:hover:not(.active) { background: transparent; color: var(--ink-soft); }
  .icon-btn:hover:not(.danger) { border-color: rgba(20, 20, 15, 0.12); background: linear-gradient(140deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.3) 100%); }
}

/* ---------- Saydamlık azaltma ----------
   Sistem ayarında "şeffaflığı azalt" açıksa cam yüzeyler donuklaşıyor.
   Değerler `pointer: coarse` bloğundakinin aynısı — yeni renk uydurulmuyor.
   Eski tarayıcı bu sorguyu tanımıyorsa blok görmezden gelinir. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .card, .form-card, .table-wrap, .modal, .shell-body, .rail, .login-box,
  .ac-dropdown, .nav-menu, .label-preview-panel, .scanner-box, .hist-sum div, .blok,
  .ak, .topbar, .nav, .tabs {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.9);
  }
}

/* Blur desteklemeyen tarayıcılar */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .card, .form-card, .table-wrap, .modal, .shell-body, .rail, .login-box,
  .ac-dropdown, .nav-menu, .label-preview-panel, .scanner-box, .hist-sum div, .blok,
  .topbar, .nav, .tabs { background: rgba(245, 245, 247, 0.95); }
}

/* ============================================================
   ANA SAYFA — Toplam ürün maliyeti kartı
   Elde kalan tüm malın alış fiyatına göre değeri. Sayfanın en
   üstünde ve en büyük öğe: gün içinde en çok bakılan rakam bu.
   ============================================================ */
#dash-cost { margin-bottom: 16px; }
.cost-card {
  border-radius: var(--radius-xl);
  background: var(--glass-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-brd);
  box-shadow: var(--sh-2);
  overflow: hidden;
  animation: cardIn .5s var(--ease) backwards;
}
.cost-top { padding: 22px 26px 20px; }
.cost-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cost-title { color: var(--ink-soft); font-size: 16px; font-weight: 500; }
.cost-info {
  width: 30px; height: 30px; flex: none; padding: 0; cursor: pointer;
  border: none; background: transparent; color: var(--gray-light);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cost-info svg { width: 22px; height: 22px; }
.cost-info:hover { color: var(--accent-dark); background: var(--accent-soft); }
.cost-value {
  margin-top: 6px;
  font-size: clamp(34px, 5.2vw, 52px); font-weight: 700; line-height: 1.1;
  letter-spacing: -1.8px; color: var(--ink);
  /* Sayarken rakam genişliği oynayıp kartı titretmesin */
  font-variant-numeric: tabular-nums;
}

/* Üçlü özet şeridi */
.cost-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  padding: 16px 26px;
}
.cost-stats > div { text-align: center; }
.cost-stats > div + div { border-left: 1px solid var(--line); }
.cost-stats b {
  display: block; font-size: 22px; font-weight: 700; letter-spacing: -.6px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.cost-stats span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-soft); }
.cost-stats b.cost-warn { color: var(--amber); }

/* Eksik fiyat uyarısı — tıklanınca hangi ürünler olduğunu gösterir */
.cost-alert {
  width: 100%; border: none; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 26px; text-align: left;
  border-top: 1px solid var(--line);
  background: rgba(255, 149, 0, .09);
  color: var(--amber); font-size: 14px; font-weight: 600;
  transition: background var(--dur) var(--ease);
}
.cost-alert:hover { background: rgba(255, 149, 0, .16); }
.cost-alert > svg:first-child { width: 18px; height: 18px; flex: none; }
.cost-alert span { flex: 1; }
.cost-chev { width: 16px; height: 16px; flex: none; opacity: .7; transition: transform var(--dur) var(--ease); }
.cost-alert:hover .cost-chev { transform: translateX(3px); }

@media (max-width: 820px) {
  .cost-top { padding: 18px 18px 16px; }
  .cost-title { font-size: 14px; }
  .cost-value { letter-spacing: -1.2px; }
  .cost-stats { padding: 14px 12px; }
  .cost-stats b { font-size: 20px; }
  .cost-stats span { font-size: 12px; }
  .cost-alert { padding: 13px 18px; font-size: 13px; }
}

/* ============================================================
   CARİ HESAPLAR — liste, defter, kesim bandı
   ============================================================ */
.cari-ozet { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cari-ozet-kart {
  flex: 1; min-width: 220px;
  display: flex; flex-direction: column; gap: 2px;
  border-radius: var(--radius-lg); padding: 18px 22px;
  background: var(--glass); border: 1px solid var(--glass-brd); box-shadow: var(--sh-2);
  animation: cardIn .45s var(--ease) backwards;
}
.cari-ozet-kart .lbl { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.cari-ozet-kart .val {
  font-size: 30px; font-weight: 700; letter-spacing: -1px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.cari-ozet-kart .val.sm { font-size: 24px; }
.cari-ozet-kart.is-cust { background: linear-gradient(135deg, rgba(20,20,15,.08), rgba(20,20,15,.02)); }
/* "Müşterilerime borcum" — alacakla karışmasın diye ayrı ton (yeşil:
   benim aleyhime değil, fazla tahsilat aldığım için ona borçluyum). */
.cari-ozet-kart.is-cust-neg { background: linear-gradient(135deg, rgba(52,199,89,.12), rgba(52,199,89,.03)); }
.cari-ozet-kart.is-sup { background: linear-gradient(135deg, rgba(255,149,0,.12), rgba(255,149,0,.03)); }
/* Üç kart yan yana sığsın; dar ekranda ikişerli sonra alt alta. */
@media (min-width: 900px) { .cari-ozet-kart { min-width: 200px; } }
.cari-ozet-kart.is-click { cursor: pointer; border: none; text-align: left; font: inherit; color: inherit; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cari-ozet-kart.is-click:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }

.cari-row { cursor: pointer; transition: background .16s; }
.cari-row:hover { background: var(--accent-soft); }
.cari-bak-borc { color: var(--warn); }
.cari-bak-alacak { color: var(--ok); }
.cari-bak-sifir { color: var(--ink-soft); }

.cari-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cari-head .cari-ad { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.5px; flex: 1; min-width: 200px; }
.cari-head .head-actions { margin-left: auto; }

.cari-hero {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: stretch;
  border-radius: var(--radius-xl); padding: 22px 26px; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(29,29,31,.05), rgba(29,29,31,.01));
  border: 1px solid var(--glass-brd); box-shadow: var(--sh-2);
  animation: cardIn .45s var(--ease) backwards;
}
.cari-hero.cari-kotu { background: linear-gradient(135deg, rgba(255,59,48,.13), rgba(255,59,48,.02)); }
.cari-hero.cari-iyi  { background: linear-gradient(135deg, rgba(52,199,89,.14), rgba(52,199,89,.02)); }
.cari-hero-main { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; }
.cari-hero-main .lbl { font-size: 12px; font-weight: 700; letter-spacing: .6px; color: var(--ink-soft); }
.cari-hero-main .val {
  font-size: 42px; font-weight: 700; letter-spacing: -1.6px; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.cari-hero.cari-kotu .cari-hero-main .val { color: var(--warn); }
.cari-hero.cari-iyi .cari-hero-main .val { color: var(--ok); }
.cari-hero-main .sub { font-size: 13px; color: var(--ink-soft); }
.cari-hero-yan { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.cari-hero-yan div {
  border-radius: var(--radius); padding: 12px 16px; min-width: 130px;
  background: rgba(255,255,255,.55); border: 1px solid var(--line);
}
.cari-hero-yan b { display: block; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.cari-hero-yan span { font-size: var(--fs-2xs); color: var(--ink-soft); }

/* İADE ≠ TAHSİLAT.
   Üç kalem eskiden birebir aynı görünüyordu; iade ile tahsilat aynı
   finansal kategori sanılıyordu. İade para girişi DEĞİLDİR — borcu
   azaltan bir düzeltmedir. Renk ve kenar çizgisi bu ayrımı taşıyor:
   tahsilat yeşil (para girdi), iade amber (borç düzeltmesi). */
.cari-hero-yan .chy-tahsilat { border-left: 3px solid var(--ok-fill); }
.cari-hero-yan .chy-tahsilat b { color: var(--ok); }
.cari-hero-yan .chy-iade { border-left: 3px solid var(--amber-fill); }
.cari-hero-yan .chy-iade b { color: var(--amber-ink); }
.cari-hero-yan .chy-borc { border-left: 3px solid var(--line-strong); }

.cari-kesim-bandi {
  background: var(--accent-soft); color: var(--accent-dark);
  border: 1px solid rgba(20,20,15,.2); font-size: 14px; line-height: 1.6;
}
.cari-kesim-bandi .link-like { margin-left: 8px; }
.cari-ok-bandi { background: var(--ok-bg); color: var(--ok); border: 1px solid rgba(29,122,51,.25); }

/* ---------- Cari defter tablosu ----------
   İki sorun vardı:
   1) Ürün Kodu sütunu daktilo fontundaydı (.mono → JetBrains Mono). Excel'den
      gelen satırlarda o alan uzun ürün ADI taşıdığı için fark göze batıyor,
      aynı tabloda iki ayrı yazı tipi görünüyordu. Sistem fontuna alındı;
      rakam hizası tabular-nums ile zaten korunuyor.
   2) Rakamlar satır atlıyordu. Sebebi genel `td { overflow-wrap: anywhere }`:
      "1.234.567,89 ₺" gibi bir tutarı kelime ortasından bölebiliyor. Para ve
      tarih artık HİÇ bölünmüyor; bölünmesi gereken tek sütun açıklama. */
.cari-defter table {
  font-variant-numeric: tabular-nums;
  /* Sabit yerleşim: tek bir uzun ürün adı bütün sütun genişliklerini
     bozamasın. Dar ekranda tablo ezilmek yerine kayar (.table-wrap). */
  table-layout: fixed;
  /* En dar hâl: 96+206+160+80+118+146+146+152+76. Bunun altında açıklama
     sütunu eziliyor, içindeki "defter" rozeti hücreden taşıyordu. Daha
     darında tablo KAYAR — sayfa değil, sadece tablo. */
  min-width: 1250px;
  /* Dinamik punto: geniş ekranda 14.5, dar ekranda 12.5'e kadar iner —
     kaydırmaya gerek kalmadan bir tık daha çok satır sığar. */
  font-size: clamp(12.5px, .55rem + .55vw, 14.5px);
}
.cari-defter th, .cari-defter td { padding: 11px 10px; }
.cari-defter th { white-space: nowrap; }

/* Sayı ve tarih taşıyan her hücre TEK SATIR. */
.cari-defter td.num, .cari-defter th.num, /* Satır düğmeleri: TAM yuvarlak (oval değil), degrade ve her biri kendi
   renginde — fiş mavi, düzelt kehribar, sil kırmızı. Sabit en/boy ve
   flex:none olmadan hücre daraldığında oval oluyorlardı. */
.cari-defter .ra-flex { gap: 8px; }
.cari-defter .icon-btn {
  flex: none; width: 34px; height: 34px; min-width: 34px; padding: 0;
  border-radius: 50%; color: #fff; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cari-defter .icon-btn svg { width: 16px; height: 16px; }
/* 1. düğme fiş (yalnızca satış satırlarında var), 2. düzelt, 3. sil.
   Sınıf yerine türe göre: silme düğmesi zaten .danger taşıyor,
   fiş düğmesi data-fis-gun ile ayrılıyor. */
.cari-defter .icon-btn[data-fis-gun] {
  background: linear-gradient(140deg, #4a4a48 0%, #1d1d1f 100%);
}
.cari-defter .icon-btn[data-mov-edit], .cari-defter .icon-btn[data-movg-edit],
.cari-defter .icon-btn[data-pay-edit], .cari-defter .icon-btn[data-ent-edit] {
  background: linear-gradient(140deg, #FFC46B 0%, #E08A00 100%);
}
.cari-defter .icon-btn.danger {
  background: linear-gradient(140deg, #F0455A 0%, #D70015 100%);
}
.cari-defter .icon-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.cari-c-tarih { white-space: nowrap; }
/* Metin sütunları kelime sınırından sarılır; sığmayan tek kelime bölünür —
   artık genel `td` kuralının varsayılanı (bkz. yukarısı), burada ayrıca
   tekrar tanımlamaya gerek yok. */

/* Sütun genişlikleri (table-layout: fixed ilk satırdan okur).
   1 Tarih · 2 Açıklama · 3 Ürün Kodu · 4 Adet · 5 Fiyat
   6 Toplam · 7 Ödeme · 8 Bakiye · 9 aksiyon

   Para sütunları en uzun GERÇEK tutara göre ölçüldü: "1.246.171,89 ₺"
   14 karakter, 14.5px tabular rakamla ~122px + 20px dolgu. Dar tutulunca
   sarma yerine taşıma oluyordu — rakam yan sütuna giriyordu. */
.cari-defter th:nth-child(1) { width: 84px; }
.cari-defter th:nth-child(2) { width: auto; }    /* esneyen tek sütun */
.cari-defter th:nth-child(3) { width: 160px; }
.cari-defter th:nth-child(4) { width: 80px; }
.cari-defter th:nth-child(5) { width: 118px; }
.cari-defter th:nth-child(6) { width: 146px; }
.cari-defter th:nth-child(7) { width: 146px; }
.cari-defter th:nth-child(8) { width: 152px; }
.cari-defter th:nth-child(9) { width: 152px; }   /* üç yuvarlak düğme yan yana */

/* Ürün kodu artık tablonun geri kalanıyla aynı yazı tipinde. */
.cari-defter .mono {
  font-family: inherit; font-size: inherit; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.cari-c-tarih { white-space: nowrap; }
.cari-c-odeme { color: var(--ok); font-weight: 600; }
.cari-devir { background: rgba(20,20,15,.06); }
.cari-satir-iade { background: rgba(255,149,0,.07); }
.cari-satir-iade td:nth-child(6) { color: var(--amber); font-weight: 600; }
.cari-kaynak {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 999px; vertical-align: 1px;
  background: rgba(29,29,31,.07); color: var(--ink-soft);
}
.cari-kaynak.ok { background: var(--ok-bg); color: var(--ok); }

/* ---------- Toplu ödeme / tahsilat penceresi ---------- */
.to-tablo table { table-layout: fixed; min-width: 560px; }
.to-tablo th, .to-tablo td { padding: 9px 10px; vertical-align: top; }
.to-tablo th:nth-child(1) { width: auto; }
.to-tablo th:nth-child(2) { width: 132px; }
.to-tablo th:nth-child(3) { width: 168px; }
.to-tablo th:nth-child(4) { width: 52px; }
.to-tablo input { width: 100%; padding: 9px 11px; font-size: 14px; }
.to-tablo .to-tutar { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.to-tablo .to-sil-h { text-align: right; }
/* Öneri listesi satırı BÜYÜTMESİN. Normalde akış içinde duruyor; tablo
   içinde bu, yazdıkça satır yüksekliğinin oynamasına ve alttaki satırların
   zıplamasına yol açıyor — tıklamak istediğin yer kayıyor. Burada üstte
   yüzüyor. (Sadece bu tabloya özel; diğer ekranlardaki davranış aynı.) */
.to-tablo td.ac-wrap { position: relative; }
.to-tablo .ac-dropdown {
  position: absolute; left: 10px; right: 10px; top: 51px;   /* hücre dolgusu + kutu boyu */
  z-index: 20; margin-top: 0;
}

/* Adın hangi cariye denk geldiği + o carinin güncel bakiyesi.
   Yanlış yazılan ad sessizce YENİ cari açıyordu; uyarı buradan çıkıyor. */
.to-durum { font-size: 12px; line-height: 1.45; margin-top: 5px; min-height: 17px; }
.to-durum.is-ok { color: var(--ok); }
.to-durum.is-yeni { color: var(--amber); font-weight: 600; }

.to-alt { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.to-ozet { display: flex; align-items: baseline; gap: 12px; margin-left: auto; }
.to-ozet-adet { font-size: 13px; color: var(--ink-soft); }
.to-ozet-tutar { font-size: 24px; font-weight: 700; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .to-tablo th:nth-child(3), .to-tablo td:nth-child(3) { display: none; }  /* açıklama sütunu dar ekranda gizlenir */
  .to-tablo table { min-width: 0; }
}

/* ============================================================
   ÜRÜN PERFORMANSI — kar kartı, sıralama çubukları, aylık grafik
   ============================================================ */
.perf-hero { display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 0 20px; align-items: stretch; }
.perf-hero-kar {
  flex: 1 1 340px; display: flex; flex-direction: column; gap: 3px;
  border-radius: var(--radius-xl); padding: 24px 28px;
  border: 1px solid var(--glass-brd); box-shadow: var(--sh-2);
  background: linear-gradient(135deg, rgba(52,199,89,.16), rgba(52,199,89,.03));
  animation: cardIn .5s var(--ease) backwards;
}
.perf-hero-kar.is-neg { background: linear-gradient(135deg, rgba(255,59,48,.16), rgba(255,59,48,.03)); }
.perf-hero-kar .lbl { font-size: 12px; font-weight: 700; letter-spacing: .7px; color: var(--ink-soft); }
.perf-hero-kar .val {
  font-size: 46px; font-weight: 700; letter-spacing: -1.8px; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--ok);
}
.perf-hero-kar.is-neg .val { color: var(--warn); }
.perf-hero-kar .sub { font-size: 13px; color: var(--ink-soft); }
.perf-bar {
  height: 8px; border-radius: 999px; margin: 12px 0 6px; overflow: hidden;
  background: rgba(52,199,89,.22);
}
.perf-hero-kar.is-neg .perf-bar { background: rgba(255,59,48,.22); }
.perf-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #1d1d1f, #555);
  animation: barGrow .8s var(--ease) backwards;
}
/* Çubuklar `width`/`height` ile büyüyordu: her kare yeniden yerleşim
   hesabı demek. `clip-path` yerleşime dokunmadan açıyor — degrade ve
   yuvarlak uç da bozulmuyor (scaleX olsaydı ezilirdi). */
@keyframes barGrow { from { clip-path: inset(0 100% 0 0); } }

.perf-hero-yan { flex: 1 1 420px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.perf-mini {
  border-radius: var(--radius-lg); padding: 14px 16px;
  background: var(--glass); border: 1px solid var(--glass-brd); box-shadow: var(--sh-1);
  display: flex; flex-direction: column; gap: 1px;
  animation: cardIn .45s var(--ease) backwards;
}
.perf-mini .lbl { font-size: 12px; color: var(--ink-soft); font-weight: 600; letter-spacing: .2px; }
.perf-mini .val { font-size: 22px; font-weight: 700; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.perf-mini .sub { font-size: 12px; color: var(--ink-soft); }
.perf-mini.is-warn { background: rgba(255,149,0,.10); border-color: rgba(255,149,0,.22); }
.perf-mini.is-warn .val { color: var(--amber); }
.perf-mini.is-ok .val { color: var(--ok); }
.perf-mini.is-bad .val { color: var(--warn); }

.perf-sort-tabs { margin: 6px 0 14px; }
.perf-rank { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.perf-rank-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-brd);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  animation: cardIn .4s var(--ease) backwards;
}
.perf-rank-row:hover { transform: translateX(3px); box-shadow: var(--sh-2); }
.perf-rank-row:nth-child(1) { animation-delay: .03s; }
.perf-rank-row:nth-child(2) { animation-delay: .06s; }
.perf-rank-row:nth-child(3) { animation-delay: .09s; }
.perf-rank-row:nth-child(4) { animation-delay: .12s; }
.perf-rank-row:nth-child(5) { animation-delay: .15s; }
.perf-rank-row:nth-child(6) { animation-delay: .18s; }
.perf-rank-row:nth-child(7) { animation-delay: .21s; }
.perf-rank-row:nth-child(8) { animation-delay: .24s; }
.perf-rank-row .rk { width: 26px; text-align: center; font-size: 16px; font-weight: 700; color: var(--ink-soft); flex: none; }
.perf-rank-row .ad { flex: 0 0 190px; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perf-rank-row .bar { flex: 1; min-width: 60px; height: 10px; border-radius: 999px; background: rgba(29,29,31,.06); overflow: hidden; }
.perf-rank-row .bar i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--brand-grad); animation: barGrow .7s var(--ease) backwards;
}
.perf-rank-row .dg { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; min-width: 110px; text-align: right; }

.perf-tablo table { font-variant-numeric: tabular-nums; }
.perf-row { cursor: pointer; transition: background .16s; }
.perf-row:hover { background: var(--accent-soft); }
.perf-iade { color: var(--amber); font-weight: 600; }
.perf-iade-pct { font-size: 12px; opacity: .75; }
.perf-yok { font-size: 12px; font-weight: 500; color: var(--ink-soft); }

.perf-detay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.perf-aylik {
  display: flex; align-items: flex-end; gap: 6px; height: 140px;
  padding: 12px 14px 0; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.5); border: 1px solid var(--line); overflow-x: auto;
}
.perf-ay { flex: 1 0 34px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.perf-ay .cb {
  width: 70%; min-height: 3px; border-radius: 6px 6px 0 0;
  background: var(--brand-grad); animation: colGrow .6s var(--ease) backwards;
}
.perf-ay .et { font-size: 10px; color: var(--ink-soft); margin-top: 5px; white-space: nowrap; }
/* Aynı sebeple `height` değil `clip-path`: aşağıdan yukarı açılıyor. */
@keyframes colGrow { from { clip-path: inset(100% 0 0 0); } }

@media (max-width: 820px) {
  .cari-hero-main .val { font-size: 34px; }
  .perf-hero-kar .val { font-size: 34px; }
  .perf-rank-row .ad { flex: 0 0 110px; }
  .perf-rank-row .dg { min-width: 84px; font-size: 13px; }
}

/* ============================================================
   ANA SAYFA — Şampiyon Ürün kartı (bu ayın en çok kar getiren ürünü)
   ============================================================ */
.champion-card {
  width: 100%; display: flex; align-items: center; gap: 16px;
  border: none; cursor: pointer; text-align: left; font-family: inherit;
  border-radius: var(--radius-xl); padding: 18px 22px; margin-bottom: 18px;
  background: linear-gradient(120deg, #1d1d1f 0%, #3a2f0e 55%, #6b4e0a 100%);
  box-shadow: var(--sh-2);
  animation: cardIn .5s var(--ease) backwards;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.champion-card:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.champion-badge {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0;
  background: rgba(255,255,255,.14);
}
/* İçindeki 🏆 emojisi SVG oldu: font-size ile büyümüyor, ölçü açık verilir. */
.champion-badge .bi { width: 24px; height: 24px; }
.champion-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.champion-lbl { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: rgba(255,255,255,.7); text-transform: uppercase; }
.champion-ad {
  font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.champion-alt { font-size: 13px; color: rgba(255,255,255,.72); }
.champion-kar { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.champion-kar-val { font-size: 22px; font-weight: 700; color: #ffd982; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.champion-kar-lbl { font-size: 12px; color: rgba(255,255,255,.65); }
.champion-arrow { flex: none; width: 20px; height: 20px; color: rgba(255,255,255,.5); }

@media (max-width: 640px) {
  .champion-card { padding: 14px 16px; gap: 10px; }
  .champion-ad { font-size: 16px; }
  .champion-kar-val { font-size: 17px; }
  .champion-badge { width: 38px; height: 38px; }
  .champion-badge .bi { width: 20px; height: 20px; }
}

/* ============================================================
   ANA SAYFA — Satış Performansı kartı (aylık ciro grafiği)
   ============================================================ */
.sales-card {
  border-radius: var(--radius-xl); padding: 18px 22px 14px; margin-bottom: 18px;
  background: var(--glass-2); box-shadow: var(--sh-2);
  animation: cardIn .5s var(--ease) backwards;
}
.sales-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sales-title { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--ink-soft); text-transform: uppercase; }
.sales-val { font-size: 20px; font-weight: 700; letter-spacing: -.3px; display: inline-flex; align-items: center; gap: 8px; }
.sales-trend { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; }
.sales-trend svg { width: 12px; height: 12px; }
.sales-trend.trend-up { color: var(--ok); }
.sales-trend.trend-down { color: var(--warn); }
.sales-bars { display: flex; align-items: flex-end; gap: 10px; height: 92px; }
.sales-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
/* Yükseklik ANİMASYONU yerine ölçek: height her karede yerleşimi
   yeniden hesaplatıyordu (7 çubuk × 300 ms). transform derleyici
   katmanında kalır, yerleşime dokunmaz. Son hâl scaleY(1) olduğu
   için köşe yarıçapı bozulmaz. */
.sales-bar {
  width: 100%; max-width: 34px; border-radius: 6px 6px 2px 2px;
  background: var(--accent-soft);
  transform-origin: bottom;
  animation: cubukBuyu .34s var(--ease) backwards;
}
@keyframes cubukBuyu { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .sales-bar { animation: none; } }
.sales-bar-now .sales-bar { background: var(--brand-grad); }
.sales-bar-lbl { font-size: 12px; color: var(--ink-soft); }
.sales-bar-now .sales-bar-lbl { color: var(--ink); font-weight: 700; }

@media (max-width: 640px) {
  .sales-card { padding: 14px 16px 10px; }
  .sales-bars { height: 74px; gap: 6px; }
  .sales-bar-lbl { font-size: 10px; }
}

.dash-cols-analytics { align-items: stretch; margin-bottom: 4px; }
.dash-cols-analytics .sales-card { height: 100%; display: flex; flex-direction: column; margin-bottom: 0; }
.perf-mini-stats { display: flex; gap: 4px; margin: 4px 0 14px; }
.perf-mini-stats > div { flex: 1; text-align: center; padding: 6px 4px; }
.perf-mini-stats > div + div { border-left: 1px solid var(--line); }
.perf-mini-stats b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.perf-mini-stats span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-soft); }
.perf-mini-link { margin-top: auto; width: 100%; }

/* Cari defter: arama/filtre çubuğu */
.cari-filtre-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
/* Kendi kutusu YOK: genel input kuralı (oyuk hap, cam) geçerli.
   Buradaki tek iş satırdaki payını belirlemek. */
.cari-filtre-input { flex: 1; min-width: 240px; margin: 0; }
@media (max-width: 560px) { .cari-filtre-bar .chk-line { width: 100%; } }

/* Toplu cari yükleme: atlanacak dosya satırı — soluk ve üstü çizili */
.ty-atlanan { opacity: 0.5; }
.ty-atlanan td:first-child b { text-decoration: line-through; }
/* Filtre sekmeleri modal içinde daha dar dursun */
#ty-filtreler { gap: 4px; flex-wrap: wrap; }
#ty-filtreler .tab-btn { padding: 7px 12px; font-size: 13px; }
#ty-filtreler .tab-btn b { font-variant-numeric: tabular-nums; }

/* Cari defter: sıralama seçici (filtre çubuğunda) */
/* Sıralama seçici de aynı hap; okunu genel `select` kuralı çiziyor. */
.cari-sira-sec {
  margin: 0; padding: 10px 40px 10px 18px;
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer; width: auto;
}


/* ---------- Geçmiş fiyat önerisi ----------
   Kayıtlı müşteri fiyatı olmayan ürünlerde, eski defterden bulunan en
   güncel fiyat rozet olarak çıkar. Fiyat KENDİLİĞİNDEN uygulanmaz —
   kullanıcı görüp basar (bkz. fiyat-hafiza.js, 4. madde). */
.fh-oneri {
  display: block; margin-top: 5px; width: 100%;
  border: 1px solid rgba(29,122,51,.28); background: var(--ok-bg); color: var(--ok);
  border-radius: 9px; padding: 5px 8px; font: inherit; font-size: 12px;
  cursor: pointer; text-align: left; line-height: 1.35;
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.fh-oneri:hover { background: var(--ok-bg); transform: translateY(-1px); }
.fh-oneri:active { transform: none; }
.fh-oneri b { font-variant-numeric: tabular-nums; }
/* Eşleşmenin kesin olmadığı hâl — basınca onay sorulur. */
.fh-oneri.fh-belirsiz {
  border-color: rgba(161,92,0,.3); background: var(--amber-bg); color: var(--amber);
}
.fh-oneri.fh-belirsiz:hover { background: var(--amber-bg); }
.fh-yok {
  display: block; margin-top: 5px; font-size: 12px; color: var(--ink-soft);
}

/* ============================================================
   YAZDIRMA KONTROL PANELİ

   Amaç: "çıkış yaptım ama bir şey çıkmadı" durumunda sebebin ARANMAMASI.
   Üst çubuktaki nokta her ekranda görünür; sorun varsa kırmızıya döner.
   Tıklayınca tam kontrol açılır — aç/kapat, yazıcı durumu, geçmiş, hatalar.
   ============================================================ */

.yaz-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.55); border: 1px solid var(--glass-brd);
  border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  color: var(--ink); font-family: inherit;
  box-shadow: var(--sh-1); transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.yaz-chip:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.yaz-nokta {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--gray-light); box-shadow: 0 0 0 0 currentColor;
}
/* Yeşil sabit durur; kırmızı nabız gibi atar — göz otomatik oraya gider. */
.yaz-tamam  .yaz-nokta { background: var(--ok-fill); }
.yaz-tamam  { color: var(--ok); }
.yaz-kapali .yaz-nokta { background: var(--amber-fill); }
.yaz-kapali { color: var(--amber); }
.yaz-sorun  .yaz-nokta { background: var(--warn-fill); animation: yazNabiz 1.6s infinite; }
.yaz-sorun  { color: var(--warn); border-color: rgba(255,59,48,.35); }
@keyframes yazNabiz {
  0%   { box-shadow: 0 0 0 0 rgba(255,59,48,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255,59,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}
@media (prefers-reduced-motion: reduce) { .yaz-sorun .yaz-nokta { animation: none; } }

/* Panel */
.yaz-panel { width: 720px; }
.yaz-bant {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 18px;
  border: 1px solid var(--line); background: rgba(255,255,255,.6);
}
.yaz-bant-ikon { font-size: 26px; line-height: 1; flex: none; }
.yaz-bant-baslik { font-weight: 700; font-size: 16px; letter-spacing: -.3px; }
.yaz-bant-alt { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin-top: 4px; }
.yaz-bant.iyi    { background: rgba(52,199,89,.10);  border-color: rgba(52,199,89,.28); }
.yaz-bant.iyi    .yaz-bant-baslik { color: var(--ok); }
.yaz-bant.uyari  { background: rgba(255,149,0,.10);  border-color: rgba(255,149,0,.3); }
.yaz-bant.uyari  .yaz-bant-baslik { color: var(--amber); }
.yaz-bant.kotu   { background: rgba(255,59,48,.09);  border-color: rgba(255,59,48,.28); }
.yaz-bant.kotu   .yaz-bant-baslik { color: var(--warn); }

/* Ana açma/kapama — büyük ve tek anlamlı olsun */
.yaz-anahtar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 18px; background: rgba(255,255,255,.55); margin-bottom: 18px;
}
.yaz-anahtar-yazi { font-weight: 650; font-size: 15px; }
.yaz-anahtar-alt { font-size: 12px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.yaz-sw { position: relative; width: 58px; height: 32px; flex: none; border: 0; padding: 0;
  border-radius: 999px; background: var(--gray-light); cursor: pointer; transition: background .2s var(--ease); }
.yaz-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px;
  border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform .22s var(--ease); }
.yaz-sw[aria-checked="true"] { background: var(--ok-fill); }
.yaz-sw[aria-checked="true"]::after { transform: translateX(26px); }
.yaz-sw:disabled { opacity: .5; cursor: progress; }

.yaz-baslik { font-weight: 700; font-size: 13px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--ink-soft); margin: 20px 0 8px; }

/* Yazıcı satırları */
.yaz-satir {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px;
  background: rgba(255,255,255,.5); font-size: 14px;
}
.yaz-satir .rol { font-weight: 650; min-width: 118px; flex: none; }
.yaz-satir .ad { color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; flex: 1; }
.yaz-durum { font-weight: 650; font-size: 13px; white-space: nowrap; flex: none; }
.yaz-durum.iyi { color: var(--ok); }
.yaz-durum.kotu { color: var(--warn); }

/* Geçmiş listesi */
.yaz-gecmis { max-height: 300px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 14px; background: rgba(255,255,255,.5); }
.yaz-is { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px;
  border-bottom: 1px solid var(--line); font-size: 13px; }
.yaz-is:last-child { border-bottom: 0; }
.yaz-is .saat { color: var(--ink-soft); font-size: 12px; white-space: nowrap; flex: none;
  font-variant-numeric: tabular-nums; }
.yaz-is .ne { flex: 1; overflow-wrap: anywhere; }
.yaz-is .hata { display: block; color: var(--warn); font-size: 12px; margin-top: 3px; line-height: 1.5; }
.yaz-rozet { border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; flex: none; }
.yaz-rozet.ok  { background: rgba(52,199,89,.16); color: var(--ok); }
.yaz-rozet.bek { background: rgba(255,149,0,.16); color: var(--amber); }
.yaz-rozet.err { background: rgba(255,59,48,.13); color: var(--warn); }
.yaz-bos { padding: 22px; text-align: center; color: var(--ink-soft); font-size: 13px; }

.yaz-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.yaz-sonuc { margin-top: 12px; font-size: 13px; line-height: 1.6; white-space: pre-wrap;
  background: rgba(29,31,29,.05); border-radius: 12px; padding: 10px 14px; color: var(--ink-soft); }

/* Telefonda üst sağ köşe komple gizleniyordu; durum noktası orada da görünsün. */
@media (max-width: 820px) {
  .topbar-right { display: flex; }
  .topbar-right .user-chip { display: none; }
  /* Yazı GİZLENMİYOR: rozet başlık satırına indi ve yazısız hâlde
     kırmızı boş bir oval gibi görünüyordu — ne olduğu okunmuyordu. */
  .yaz-chip { padding: 8px 14px; }
}

/* Servis kapalıyken komut düğmeleri çalışmıyor — bunun GÖRÜNMESİ gerekiyor,
   yoksa kullanıcı basıp basıp hiçbir şey olmadığını sanır. */
#yaz-panel-govde .btn:disabled {
  opacity: .42; cursor: not-allowed; transform: none; box-shadow: none;
}

/* ============================================================
   YÜZEY SİSTEMİ  —  dashboard ve ileride diğer ekranlar
   ============================================================
   Kartlar birbirinden habersiz büyümüştü: .card radius-lg / .cost-card
   radius-xl / .champion-card ayrı, paddingler 18–24 arası dört farklı
   değer, kimi cam kimi düz. Aynı sayfada beş ayrı kart dili vardı.

   Aşağısı o beşini TEK yüzey diline bağlar. Sınıflar silinmedi, ortak
   özellikleri buradan geliyor — geri almak bu bloğu kaldırmak kadar basit.

   CAM ETKİSİ ÖLÇÜLÜ: tek bir --yzy-bg + tek bir blur. Kart başına farklı
   cam yok, sayfa geneli glassmorphism yok. backdrop-filter yalnızca ÜÇ
   yerde (finansal kart, maliyet kartı, hızlı işlem şeridi) — her kartta
   blur çalıştırmak eski makinelerde kaydırmayı takar.
   ============================================================ */
/* Bu blok eski --yzy-* isimlerini yeni cam diline bağlıyor; onlara bakan
   aşağıdaki kurallar olduğu gibi kalabilsin diye. */
:root {
  --yzy-bg: var(--yuzey);
  --yzy-bg-duz: var(--yuzey);
  --yzy-brd: var(--line);
  --yzy-brd-dis: var(--line);
  --yzy-sh: var(--sh-1);
  --yzy-sh-us: var(--sh-2);
  --yzy-r: var(--radius);                    /* TEK yarıçap */
  --yzy-r-sm: var(--radius-sm);              /* kart içi hücre */
  --yzy-pad: 20px;                           /* TEK iç boşluk */
  --yzy-blur: var(--cam);
}

/* --- ortak yüzey --- */
.card, .cari-ozet-kart, .cost-card, .rc {
  border-radius: var(--yzy-r);
  padding: var(--yzy-pad);
  background: var(--yzy-bg-duz);
  border: 1px solid var(--yzy-brd-dis);
  box-shadow: var(--yzy-sh);
}

/* --- cam: YALNIZCA finansal kartlar ve maliyet kartı ---
   Hızlı işlem şeridi bilerek DIŞARIDA. Sayfadaki en geniş yüzey o; blur
   maliyeti alanla büyür ve orada görsel kazanç yok — arkasında bulanacak
   bir şey yok, düz zemin var. Yarı saydam yüzeyi alıyor, blur'ü almıyor. */
.cari-ozet-kart, .cost-card {
  background: var(--yzy-bg);
  -webkit-backdrop-filter: var(--yzy-blur);
  backdrop-filter: var(--yzy-blur);
  border: 1px solid var(--yzy-brd);
  box-shadow: var(--yzy-sh);
}
.quick-actions {
  background: var(--yzy-bg);
  border: 1px solid var(--yzy-brd);
  box-shadow: var(--yzy-sh);
}

/* --- FİNANSAL ÖZET: sayfanın en güçlü bilgisi --- */
.cari-ozet { gap: 14px; margin-bottom: var(--sp-5); }
.cari-ozet-kart { padding: 24px 26px; gap: 6px; }
.cari-ozet-kart .lbl {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.cari-ozet-kart .val { font-size: 34px; letter-spacing: -1px; line-height: 1.1; }
.cari-ozet-kart .val.sm { font-size: 26px; }
/* Renk DEKORASYON değil ANLAM: sol kenar ince bir şerit taşır, zemin sakin
   kalır. Eskiden kartın tamamı renkli degradeydi ve üç kart yan yana
   gelince sayfa alacalanıyordu. */
.cari-ozet-kart.is-cust { background: var(--yzy-bg); border-left: 3px solid var(--accent); }
.cari-ozet-kart.is-cust-neg { background: var(--yzy-bg); border-left: 3px solid var(--amber-fill); }
.cari-ozet-kart.is-sup { background: var(--yzy-bg); border-left: 3px solid var(--warn-fill); }

/* --- HIZLI İŞLEMLER ---
   Kart içinde değil, doğrudan sayfa zemininde duran bir düğme şeridi.
   Birincil iki eylem (Sipariş Al, Ürün Çıkışı) mavi; gerisi gri. */
.quick-actions {
  border-radius: 0; padding: 0; background: none; border: none; box-shadow: none;
  gap: 12px; margin-bottom: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.quick-actions .btn-big {
  font-size: var(--fs-sm); padding: 14px 18px; border-radius: var(--radius-sm);
  box-shadow: none;
}

/* --- DEPO DURUMU: beş ayrı kart yerine TEK kart içinde ızgara --- */
.cards {
  background: var(--yzy-bg-duz);
  border: 1px solid var(--yzy-brd-dis);
  border-radius: var(--yzy-r);
  box-shadow: var(--yzy-sh);
  padding: var(--yzy-pad);
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: var(--sp-5);
}
/* Kart içindeki kutular artık hücre: kendi gölgesi, kenarı, zemini yok.
   "Kutunun içinde kutu" görüntüsü böyle kalkıyor. */
.cards .card {
  background: none; border: none; box-shadow: none; padding: 6px 18px;
  border-left: 1px solid var(--line); border-radius: 0;
  animation: none;
}
.cards .card:first-child { border-left: none; padding-left: 4px; }
.cards .card:hover { transform: none; box-shadow: none; }
.cards .card .num { font-size: 28px; letter-spacing: -.8px; }
.cards .card .lbl {
  font-size: var(--fs-2xs); color: var(--ink-soft); font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
/* card-hero artık kart değil hücre — koyu zemin ve degrade kalkıyor,
   vurgu rakamın rengiyle veriliyor. */
.cards .card-hero { background: none; }
.cards .card-hero .num, .cards .card-hero .num.counting { color: var(--accent-dark); }
.cards .card-hero .lbl { color: var(--ink-soft); }
.cards .card-hero::after { display: none; }
.cards .card-accent-warn .num { color: var(--warn); }

@media (max-width: 900px) {
  .cards { padding: 16px; }
  .cards .card { border-left: none; padding: 10px 4px; }
  .cari-ozet-kart { padding: 18px 20px; }
  .cari-ozet-kart .val { font-size: 28px; }
}
/* Dokunma/hareket azaltma tercihi: giriş animasyonları kapanır. */
@media (prefers-reduced-motion: reduce) {
  .card, .cari-ozet-kart, .cost-card { animation: none !important; }
}

/* ============================================================
   DEPO DURUMU IZGARASI — DÜZELTME
   ============================================================
   İki görsel hata vardı:

   1) AYRAÇ ÇİZGİSİ SARMADA BOZULUYORDU. Beş hücre auto-fit ile dar
      ekranda 3+2 diye sarıyor; ikinci satırın ilk hücresinde border-left
      kalıyor ve kenarda boşta duran bir çubuk çıkıyordu. :first-child
      yalnızca birinci hücreyi kurtarıyor, satır başlarını değil — CSS'te
      "satırın ilk hücresi" diye bir seçici yok.
      Çözüm: ayraç çizgisi kaldırıldı. Ayrım artık boşlukla veriliyor;
      kaç sütuna sararsa sarsın bozulmuyor.

   2) İLK HÜCRE HİZASIZDI. Diğerleri padding-left 18px, ilki 4px'ti;
      rakamlar ve etiketler dikeyde tutmuyordu. Artık hepsi aynı.
   ============================================================ */
.cards {
  gap: 18px 12px;
  padding: 24px var(--yzy-pad);
}
.cards .card {
  background: none; border: none; box-shadow: none; border-radius: 0;
  padding: 0; animation: none;          /* hepsi AYNI — hizalama düzeldi */
}
.cards .card:first-child { border-left: none; padding-left: 0; }
.cards .card:hover { transform: none; box-shadow: none; }

/* ============================================================
   ÜST MENÜ  —  yüzey sistemine geçiş
   ============================================================
   Aktif sekme doygun mavi degrade + renkli gölge taşıyordu; menü
   şeridinin kendisi de kenarlık + iç gölge taşıyordu. Yan yana
   gelince üst bant sayfanın en gürültülü yeriydi.

   Artık: aktif sekme SOFT MAVİ zemin + MAVİ yazı. Degrade yok,
   renkli gölge yok. Menü şeridi kenarlıksız.
   ============================================================ */
.topbar {
  background: none;
  border-bottom: none;
}
/* DİKKAT — yalnızca GENİŞ ekran.
   820px altında .nav bir açılır panele dönüşüyor ve kendi zeminini
   (--glass-2) oradan alıyor. Bu blok dosyanın sonunda olduğu için aynı
   özgüllükteki mobil kuralı EZERDİ ve mobilde menü şeffaf kalırdı —
   sayfa içeriğinin üstünde okunmaz bir panel. Bu yüzden min-width. */
@media (min-width: 821px) {
  .nav {
    background: transparent; border: none; box-shadow: none;
    padding: 0; gap: 2px;
  }
}
.nav-btn {
  /* Tam yuvarlak (999px), az radyus değil (kullanıcının kararı,
     2026-09-12: "bunun gibi az radyus değil tam radyus"). */
  font-size: var(--fs-sm); border-radius: 999px; padding: 9px 16px;
}
.nav-btn:hover { background: rgba(29,29,31,.05); color: var(--ink); }
/* Aktif sekme artık mavi değil, SİYAH tonlarında (kullanıcının kararı,
   2026-09-12). */
.nav-btn.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  font-weight: 600;
  box-shadow: none;
}
.nav-btn.active:hover { background: var(--ink); }

/* ============================================================
   SOL DİKEY MENÜ  (geniş ekran)  +  ARKA PLAN
   ============================================================
   HTML YENİDEN KURULMADI. `header.topbar` zaten logo + menü + kullanıcı
   içeriyordu; burada dikey bir şeride dönüştürülüyor. Böylece JS'in
   bağlı olduğu #menu-toggle, #main-nav ve .nav-group olduğu gibi kalıyor
   ve mobil açılır menü davranışı bozulmuyor.
   ============================================================ */
@media (min-width: 821px) {
  /* DUVAR FOTOĞRAFI SABİT BİR KATMANDA — body'nin arka planında DEĞİL.
     ============================================================
     Burada `body { background-attachment: fixed }` VARDI ve telefonda
     "masaüstü sitesi" modunda sekmeyi öldürüyordu: sayfa iki kez kendini
     yenileyip boş kalıyordu.

     Sebep: `background-attachment: fixed`, tarayıcıyı SAYFA BOYU kadar
     yüksek bir birleştirme katmanı kurmaya zorluyor ve her kaydırma
     karesinde 2560 piksellik fotoğrafı yeniden ölçekliyor. Uzun bir
     sayfada (ana ekran, tablolar) bu onlarca MB tutuyor; telefonun
     belleği yetmeyince tarayıcı sekmeyi kapatıp yeniden açıyor.

     `position: fixed` bir katman aynı görüntüyü verir ama maliyeti
     EKRAN BOYUTU kadardır, sayfa uzadıkça büyümez.

     Perde (fotoğrafın üstündeki hafif beyaz katman) aynı katmanda, çünkü
     ayrı bir eleman ikinci bir tam ekran katmanı daha demek olurdu.
     Koyulukları --duvar-perde ile ayarlanıyor: aşağıdaki ızgara bloğu
     yalnızca bu değişkeni değiştiriyor, fotoğrafı tekrar yazmıyor. */
  /* DUVAR FOTOĞRAFI KALDIRILDI (2026-08-20).
     Yerini nokta deseni aldı (aşağıda, temel bloktaki body::before).
     --duvar-perde artık kullanılmıyor ama ona bakan bloklar olabilir
     diye tanımlı bırakıldı. */
  :root { --duvar-perde: var(--page-bg); }

  /* ESKİ İKON ŞERİDİ KALDIRILDI.
     Projede zaten `aside.rail` vardı (ikon + ipucu balonu). Menü dikey
     hale gelince ikisi yan yana iki çubuk oluyordu. Tek menü kalıyor:
     ikonlu ve yazılı olan. */
  .rail { display: none; }

  /* position: fixed KULLANILMIYOR — bilerek.
     .topbar'ın atası .shell-body cam grubunda ve backdrop-filter taşıyor
     (styles.css:128). backdrop-filter taşıyan bir ata, içindeki
     position:fixed öğeler için KAPSAYICI BLOK olur; menü ekrana değil o
     kutuya göre konumlanıyor, kenara yapışmıyordu. Kodda bu tuzağa dair
     uyarı zaten vardı (.rail-tip yorumu).
     Çözüm: shell-body'yi satır düzenine alıp menüyü normal bir sütun
     yapmak. Konumlandırma hilesi yok, kapsayıcı blok sorunu da yok. */
  /* ---------- SOL BAR (ikon rayı) ----------
     Arka plan YOK: ray sayfanın kendi kremi üzerinde duruyor, ayrı bir
     panel gibi görünmüyor. Genişliği sabit — açılıp kapanmıyor, o yüzden
     hover'da düzen de oynamıyor. Düğmeler dikeyde ORTALI.

     `position: fixed` — ray sayfayla birlikte kaymasın diye; içerik
     alanına .shell-body'nin sol dolgusu yer açıyor. */
  /* Ray GENİŞ: ikonun yanında adı da yazıyor (kullanıcının kararı,
     2026-09-05). Eskiden 88px'lik ikon şeridiydi ve ad yalnızca hover
     ipucunda görünüyordu. */
  /* SOL BAR (dikey sidebar) sistemi tamamen KAPATILDI (kullanıcının
     kararı, 2026-09-12): "sidebar kullanılmayacak, tek üst nav" —
     .topbar'ı position:fixed 212px sidebar'a çeviren, .nav'ı dikey
     listeye döndüren ve aktif sekmeyi sarı yapan kurallar bilerek
     silindi. Üst bar artık her genişlikte topbar-center'daki yatay
     pill nav'ı kullanıyor (bkz. dosya başı, .nav / .nav-btn). */
  .menu-toggle { display: none; }

  main { padding: 30px 32px 90px; max-width: none; }
}

/* ============================================================
   card-hero — MAVİ ÜSTÜNE MAVİ HATASI
   ============================================================
   .card-hero zemini `!important` ile veriyordu; depo ızgarasındaki
   geçersiz kılmam sessizce KAYBEDİYORDU. Üstüne rakamı da maviye
   çevirdiğim için mavi degradenin üzerine mavi yazı geldi ve
   "Toplam Stok" okunmaz oldu. Kendi hatam.

   Burada `!important` ile karşılık veriliyor — tercih ettiğim bir yol
   değil ama kaynak kuralın kendisi `!important` olduğu için özgüllük
   artırmak yetmiyor.
   ============================================================ */
.cards .card-hero {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--ink);
}
.cards .card-hero .num, .cards .card-hero .num.counting { color: var(--accent-dark); }
.cards .card-hero .lbl { color: var(--ink-soft); }
.cards .card-hero::after { display: none !important; content: none !important; }

/* ============================================================
   YAZDIRMA DURUMU + KARŞILAMA  →  SAĞ ÜST
   ============================================================
   Menü dikeye geçince bu ikisi şeridin dibinde kalmıştı. Yeri orası değil:
   yazdırma durumu her ekranda göz ucuyla görülmesi gereken bir uyarı,
   karşılama da sayfanın başlığıyla aynı hizada durmalı.

   position: fixed KULLANILMIYOR — bilerek. .shell-body backdrop-filter
   taşıyor ve fixed öğeler için kapsayıcı blok oluyor (aynı tuzağa menüde
   düşmüştüm). absolute + .shell-body'ye relative, hile gerektirmeden
   içerik alanının sağ üstüne oturuyor.
   ============================================================ */
/* Sağ üst köşeye mutlak konumlandırma KAPATILDI (kullanıcının kararı,
   2026-09-12): .topbar-right artık topbar'ın normal (flex) bir çocuğu,
   köşeye oturtma hilesine gerek yok — bkz. dosya başı .topbar-right. */

/* ============================================================
   MENÜ İKONLARI — HER EKRAN BOYUTUNDA
   ============================================================
   Aşağıdaki iki kural yalnızca `@media (min-width: 821px)` bloğunun
   İÇİNDEYDİ. Mobil açılır menüde `.nav-btn` flex olmuyor ve `.nav-ico`
   hiç boyut almıyordu; SVG'ler viewBox'larının doğal boyutunda çiziliyordu:
   ölçüldü — 158×158, 301×301, 338×338 piksel. Menü 2000 pikselden uzun
   oluyor, yazılar devasa ikonların altında kayboluyordu.

   `.nav-ico-dolu` (aşağıda) zaten genel kapsamdaydı; boyutlu görünen
   ikonlar onlardı, boyutsuz devleşenler ise sadece `.nav-ico` taşıyanlar.
   ============================================================ */
/* :not(.rail-btn) ŞART — alt şeritteki ikon düğmeleri de `nav-btn` sınıfı
   taşıyor ve bir kısmı mobilde `.rail-secondary { display: none }` ile
   gizleniyor. Burada koşulsuz `display: flex` yazmak, aynı özgüllükte ama
   DAHA SONRA geldiği için o gizlemeyi eziyor ve alt barda olmaması gereken
   iki düğme ortaya çıkıyordu. */
/* Bu kurallar ARTIK YALNIZCA TELEFON menüsü için.
   Masaüstünde sol bar kendi ölçülerini veriyor (52px kutu, 24px ikon).
   Buradaki `:not(.rail-btn)` seçicisi masaüstü kuralından daha özgül
   olduğu için, medya sorgusu içine alınmasaydı 24px ikonu 17px'e
   düşürüyordu — medya sorgusu özgüllük eklemez. */
@media (max-width: 820px) {
  .nav-btn:not(.rail-btn) { display: flex; align-items: center; gap: 10px; }
  .nav-ico { width: 17px; height: 17px; flex: none; opacity: .75; }
  .nav-btn.active .nav-ico { opacity: 1; }
  .nav-ico-dolu { width: 15px; height: 15px; opacity: .68; }
  .nav-btn.active .nav-ico-dolu { opacity: 1; }
}

/* ============================================================
   SOL MENÜ — AÇILIR DAVRANIŞ TAMAMEN KAPATILDI
   ============================================================
   Üstteki yatay menü açılır kutulu çalışıyordu; dikeye taşırken o davranış
   da beraberinde geldi. Fareyle grubun üstüne gelince `menuIn` animasyonu
   (`transform: translate(-50%, -8px)`) yeniden oynuyor ve menü zıplıyordu.

   Önceki denememde `.nav-menu { animation: none }` yazmıştım ama
   `.nav-group:hover > .nav-menu` seçicisinin ÖZGÜLLÜĞÜ daha yüksek
   (0,2,1 > 0,1,0); sırada sonra gelmek yetmiyor, aynı seçiciyle karşılık
   vermek gerekiyordu.

   Sol menüde açılır kutuya gerek yok: zaten hepsi aynı sayfanın parçası.
   Gruplar artık sadece BÖLÜM BAŞLIĞI, altındaki öğeler hep görünür.
   ============================================================ */
@media (min-width: 821px) {
  /* Hover/açık durumlarında hiçbir hareket yok — aynı özgüllükle susturuluyor */
  .nav-group:hover > .nav-menu,
  .nav-group.open > .nav-menu {
    animation: none;
    transform: none;
    display: flex;
  }
  .nav-group:hover::after { content: none; }

  /* Grup başlığı: tıklanamaz bölüm etiketi.
     JS hâlâ ona click bağlıyor (kırmamak için öğe duruyor) ama
     pointer-events ile tıklama hiç ulaşmıyor — açılıp kapanma yok. */
  .nav-group-btn {
    pointer-events: none;
    cursor: default;
    color: var(--ink);
    font-size: 11px; font-weight: 700; letter-spacing: .09em;
    padding: 16px 12px 6px;
    opacity: .55;
  }
  .nav-group-btn:hover { background: none; color: var(--ink); }

  /* Bölümler arası ince ayrım — başlıkların belirginliği buradan geliyor,
     renkten değil. Sakin kalsın. */
  .nav-group .nav-group-btn { border-top: 1px solid var(--yzy-brd-dis); margin-top: 6px; }
  .nav > .nav-group:first-of-type .nav-group-btn { border-top: none; margin-top: 2px; }

  /* Öğelerin kendisinde de zıplama olmasın */
  .nav-btn { transition: background .15s var(--ease), color .15s var(--ease); }
  .nav-btn:hover { transform: none; box-shadow: none; }
}

/* ============================================================
   YAZDIRMA DURUMU + KARŞILAMA — KAPSAYICI BLOK DÜZELTMESİ
   ============================================================
   Öğe `header.topbar`'ın İÇİNDEYDİ ve ona `position: sticky` vermiştim.
   Sticky KONUMLANDIRILMIŞ bir öğedir; içindeki `absolute` öğeler için
   kapsayıcı blok o olur. Bu yüzden `right: 32px` 248px'lik şeridin
   içinde ölçülüyor, ikisi menünün üstüne biniyordu.

   Aynı sınıftan üçüncü hata: kapsayıcı bloğun hangi ata olduğunu
   varsaydım. Kalıcı çözüm konumlandırma ayarı değil, öğeyi menünün
   DIŞINA almaktı — artık .shell-body'nin doğrudan çocuğu.
   ============================================================ */
.shell-body { position: relative; }

/* Telefonda .topbar-right'ı köşeye mutlak konumlandıran kural KALDIRILDI
   (kullanıcı bildirimi: "üst bardaki butonlar üst üste binmiş"). .nav
   artık telefonda da görünür ve akışta olduğu için bu absolute kural
   arama/asistan/yazdırma-durumu kümesini nav'ın ÜSTÜNE bindiriyordu.
   .topbar-right zaten normal bir flex çocuğu (bkz. dosya başı) — masaüstüyle
   aynı, ayrıca bir konumlandırma hilesine gerek yok. */

/* ============================================================
   YERLEŞİM — KÖKTEN ÇÖZÜM
   ============================================================
   Yazdırma durumu + karşılama `absolute` ile içeriğin ÜSTÜNE biniyordu.
   Her sayfada farklı bir buton/başlık altında kalıyordu ve tek tek yer
   ayarlamak sonu gelmez bir iş. Kökten çözüm: onu akıştan çıkarmamak.

   .shell-body ızgaraya alındı. Üç öğe (menü · üst şerit · içerik) DOM
   sırasını koruyarak yerine oturuyor; üst şerit kendi satırında, hiçbir
   şeyin üstüne binmiyor.

       ┌──────────┬────────────────────────────┐
       │          │  yazdırma · Merhaba …      │  satır 1 (auto)
       │   MENÜ   ├────────────────────────────┤
       │          │  <main>                    │  satır 2 (1fr)
       └──────────┴────────────────────────────┘
   ============================================================ */
/* Sidebar'a özel ızgara KAPATILDI (kullanıcının kararı, 2026-09-12) —
   .shell / .shell-body artık dosya başındaki temel kart düzenini
   (flex, padding, border-radius, "yüzen cam gövde") kullanıyor; menü
   ayrı bir sütun değil, topbar'ın kendi satırı. */


/* ============================================================
   TEDARİKTE BEKLEYENLER — satır durumu rozetleri
   "sipariş verildi" / "sipariş verilmedi" ayrımı renkle okunsun diye.
   Renkler durum paletinden (--ok/--info/--warn) geliyor, yeni renk yok.
   ============================================================ */
.bek-rozet {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
}
.bek-rozet.verildi { background: var(--info-bg);  color: var(--info-ink); }
.bek-rozet.yok     { background: var(--warn-bg);  color: var(--warn-ink); }
.bek-rozet.tam     { background: var(--ok-bg);    color: var(--ok-ink); }

/* ============================================================
   BLOK — başlığı tablonun DIŞINDA olan kart
   ============================================================
   SORUN: Tedarikçi Siparişi sayfasında her tedarikçi bloğu ayrı bir
   <table> idi ama hepsi TEK bir .table-wrap kartının içindeydi. .table-wrap
   cam yüzeyin kendisi olduğu için beş tedarikçi tek bir "sheet" üstünde
   üst üste diziliyordu. Eylem düğmeleri de <th> hücrelerinin içinde
   duruyordu: tablo başlığı, düğme barı ve blok adı aynı şeride biniyordu.

   ÇÖZÜM: her blok KENDİ kartı. Başlık ve düğmeler tablonun dışında,
   kendi şeridinde; tablo altında, kartın içinde. Böylece "hangi düğme
   hangi tedarikçinin?" sorusu gözle bir bakışta cevaplanıyor.
   ============================================================ */
.blok-liste { display: flex; flex-direction: column; gap: 14px; }

.blok {
  border-radius: var(--radius-lg);
  overflow: hidden;                 /* tablo köşeleri karta göre kırpılsın */
}

.blok-bas {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.blok-ad {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-lg); font-weight: 650; letter-spacing: -.2px;
  color: var(--ink); min-width: 0;
}
.blok-ad .bi-inline { flex: none; }
.blok-alt { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-soft); }

/* Düğmeler kendi şeridinde, sağda; dar ekranda alta iner ve sola yaslanır */
.blok-eylem { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .blok-bas { flex-direction: column; align-items: stretch; }
  .blok-eylem { justify-content: flex-start; }
}

/* Tablo artık kart DEĞİL — kabuğu blok sağlıyor. Yatay taşma burada yönetilir. */
.blok-tablo { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.blok-tablo table { margin: 0; }
.blok-tablo table tr:last-child td { border-bottom: none; }

/* ============================================================
   TEDARİKÇİ SİPARİŞİ — birincil eylem şeridi
   "SİPARİŞİ OLUŞTUR" öneri tablosunun hemen altında, gövde metnine
   karışmış tek bir düğmeydi. Kendi şeridine alındı: üstünde ayırıcı
   çizgi, tam genişlik. Sayfanın bitiş noktası olduğu belli oluyor.

   YAPIŞKAN DEĞİL — bilerek. .shell-body'de `overflow: hidden` var;
   bu onu bir kaydırma kabı yapıyor ama kendisi kaydırılmıyor (sayfa
   gövdede kayıyor). İçine konan `position: sticky` bu yüzden hiç
   yapışmaz, sadece akışta durur. Çalışmayan bir yapışkanlık iddia
   etmektense düğme dürüstçe akışın sonunda duruyor.
   ============================================================ */
.sup-eylem-bar {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.sup-eylem-bar .btn { width: 100%; }

/* Bölüm başlığı — pane içindeki grupları ayırır (ana sayfadaki
   .dash-baslik ile aynı dil, aynı ölçek). */
.sup-baslik {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 26px 0 10px;
}
.sup-baslik:first-child { margin-top: 0; }

/* ============================================================
   DOKUNMATİK CİHAZ — PAHALI GÖRSEL KATMANLAR KAPALI
   ============================================================
   SORUN: Telefonda "masaüstü sitesi" istendiğinde tarayıcı ekranı 980px
   sayıyor, `min-width: 821px` blokları devreye giriyor ve telefon masaüstü
   görselleriyle baş başa kalıyor: tam ekran duvar fotoğrafı + onlarca
   bulanık cam yüzey. Sayfa iki kez kendini yenileyip boş kalıyordu —
   sekme bellek yetersizliğinden kapanıyor.

   Aynı sayfa, aynı JS, aynı veri mobil görünümde sorunsuz açılıyordu;
   iki mod arasındaki TEK fark CSS. Sebep bu yüzden veride değil burada.

   ÇÖZÜM: yerleşim aynen kalır (geniş ekranda menü yine solda, ızgara yine
   iki kolon) — yalnızca GPU'yu ve belleği yiyen süsler kapanır:
     • duvar fotoğrafı → düz zemin
     • backdrop-filter bulanıklığı → opak zemin
     • sonsuz döngüdeki parıltı animasyonu → durur
   Zemin renkleri, blur desteklemeyen tarayıcılar için zaten tanımlı olan
   yedekle AYNI; yeni bir renk uydurulmuyor.

   `pointer: coarse` parmakla kullanılan her cihazda doğru: telefon ve
   tablet evet, fare takılı bilgisayar hayır. "Masaüstü sitesi" modu bunu
   değiştirmez — ekran genişliğini taklit eder, dokunmatikliği değil.
   ============================================================ */
@media (pointer: coarse) {
  /* Degrade parmakla kullanılan cihazda SABİTLENMİYOR: sabit arka plan
     sayfa boyu kadar bir birleştirme katmanı kurmaya zorluyor ve uzun
     listelerde telefonun belleğini yiyor (yukarıdaki duvar fotoğrafı
     olayının aynısı). Görüntü aynı, maliyeti değil. */
  body { background-attachment: scroll; }

  /* Cam yok: bulanıklık her kaydırma karesinde yeniden hesaplanıyor.
     Kartlar opak — okunurluk aynı, kaydırma akıcı. */
  .glass, .card, .form-card, .table-wrap, .modal, .shell-body, .rail, .login-box,
  .ac-dropdown, .nav-menu, .label-preview-panel, .scanner-box, .hist-sum div, .blok,
  .ak, .topbar, .nav, .tabs {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.9);
  }

  /* Sonsuz parıltı: her karede yeniden çizim demek. Masaüstünde göze hoş,
     telefonda pil ve bellek yükü. */
  .card-hero::after { animation: none; display: none; }
}

/* ============================================================
   MOBİL MENÜ — SIKIŞTIRILDI
   ============================================================
   Açılır menüde 19 satır alt alta diziliyordu (1 ana + 4 grup başlığı +
   12 sayfa + Ayarlar + Çıkış Yap) ve toplam ~900px tutuyordu: telefonda
   menünün kendisi ekrandan uzun oluyor, kullanıcı menü içinde ayrıca
   kaydırmak zorunda kalıyordu.

   Grup öğeleri artık İKİ KOLON. Satır sayısı 12'den 7'ye, toplam yükseklik
   ~900px'ten ~520px'e iniyor — tipik bir telefonda menü tek ekrana sığıyor.
   Grup başlıkları duruyor: "Satış / Tedarik / Depo / Muhasebe" ayrımı
   olmadan 12 düğme tek yığın olurdu.

   Yalnızca 820px altında geçerli; geniş ekrandaki açılır menü aynı kalıyor.
   ============================================================ */
@media (max-width: 820px) {
  .nav { padding: 8px 12px 14px; gap: 2px; }

  /* Üst seviye: Ana Sayfa · Ayarlar · Çıkış Yap */
  .nav > .nav-btn { padding: 11px 14px; font-size: var(--fs-sm); border-radius: 12px; }

  /* Grup başlığı: tıklanamaz etiket, sadece ayraç — yer kaplamasın */
  .nav-group-btn { padding: 10px 14px 2px; font-size: 11px; }

  .nav-menu {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px; padding: 0 0 0 6px; margin-top: 0;
  }
  /* İki kolonda "Satış / Alış Raporu" gibi uzun adlar sığmıyor —
     nowrap kaldırılıyor, iki satıra inebilsinler. */
  .nav-menu .nav-btn {
    padding: 9px 10px; font-size: var(--fs-2xs);
    white-space: normal; line-height: 1.25; text-align: left;
    border-radius: 10px;
  }
  .nav-btn-logout { margin-top: 4px; padding-top: 12px; }
}

/* ============================================================
   ASİSTAN EKRANI
   Sohbet akışı + soru kutusu. Renkler ve yuvarlaklıklar üstteki
   simgelerden (--accent, --radius-*) geliyor; ayrı bir palet yok.
   ============================================================ */
.ai-sar {
  display: flex; flex-direction: column;
  /* Akış kendi içinde kayar, soru kutusu hep altta sabit durur.
     Yükseklik artık karttan geliyor (pencere), ekrandan değil. */
  flex: 1; min-height: 0;
}
.ai-akis {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px 2px 12px;
}
.ai-balon {
  max-width: min(760px, 92%);
  padding: 13px 16px; border-radius: var(--radius-lg);
  font-size: var(--fs-sm); line-height: 1.6;
  animation: aiGir .22s var(--ease) both;
}
@keyframes aiGir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ai-balon { animation: none; } }

.ai-soru {
  align-self: flex-end; background: var(--brand-grad); color: var(--accent-ink);
  border-bottom-right-radius: var(--radius-sm); box-shadow: var(--sh-brand);
}
.ai-cevap {
  align-self: flex-start; background: rgba(255,255,255,.86);
  border: 1px solid var(--line); color: var(--ink);
  border-bottom-left-radius: var(--radius-sm); box-shadow: var(--sh-1);
}
.ai-hata {
  align-self: flex-start; background: var(--warn-bg);
  border: 1px solid rgba(255,59,48,.22); color: var(--warn-ink);
  border-bottom-left-radius: var(--radius-sm);
}
.ai-bekleyen { background: rgba(255,255,255,.6); }

.ai-paragraf { margin: 0 0 8px; }
.ai-balon > .ai-paragraf:last-child { margin-bottom: 0; }
.ai-alt-baslik {
  margin: 12px 0 6px; font-size: var(--fs-sm); font-weight: 700;
  color: var(--ink); letter-spacing: -.01em;
}
.ai-balon > .ai-alt-baslik:first-child { margin-top: 0; }
.ai-liste { margin: 0 0 8px; padding-left: 20px; }
.ai-liste li { margin: 3px 0; }
.ai-durum { margin: 0; font-size: var(--fs-xs); color: var(--ink-soft); }
.ai-soru .ai-paragraf { white-space: pre-wrap; }

/* "Bakılan kayıtlar" — rakamın nereden geldiğinin görünür kanıtı. */
.ai-adimlar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.ai-adim-baslik { font-size: var(--fs-2xs); color: var(--ink-soft); font-weight: 500; }
.ai-adim {
  font-size: var(--fs-2xs); padding: 3px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark); font-weight: 600;
}
.ai-adim-hata { background: var(--warn-bg); color: var(--warn-ink); }

.ai-bos { text-align: center; padding: 30px 20px 10px; }
/* Emoji idi: isletim sistemine gore bambaska ciziliyordu ve tek bir
   cizgi kalinligi tutmuyordu. SVG'nin olcusu font-size'dan gelmez. */
.ai-bos-ikon { line-height: 0; color: var(--ink-soft); }
.ai-bos-svg { width: 32px; height: 32px; }
.ai-bos-baslik { margin: 10px 0 6px; font-size: var(--fs-xl); font-weight: 700; color: var(--ink); }
.ai-bos-alt { margin: 0 auto; max-width: 460px; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.6; }

.ai-ornekler { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 14px 0 4px; }
.ai-ornek {
  font-family: inherit; font-size: var(--fs-xs); font-weight: 500;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.7); border: 1px solid var(--line);
  color: var(--ink); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ai-ornek:hover { background: #fff; transform: translateY(-1.5px); }
.ai-ornek:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

.ai-giris-sar {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px; margin-top: 10px;
  background: rgba(255,255,255,.8); border: 1px solid var(--line);
  border-radius: var(--radius-xl); box-shadow: var(--sh-1);
}
.ai-giris {
  flex: 1; resize: none; border: none; background: transparent;
  font-family: inherit; font-size: var(--fs-md); line-height: 1.5;
  color: var(--ink); padding: 8px 6px; max-height: 160px;
}
.ai-giris:focus { outline: none; }
.ai-giris:disabled { color: var(--ink-soft); }
.ai-giris-sar:focus-within { box-shadow: var(--ring); border-color: var(--accent); }

@media (max-width: 820px) {
  .ai-balon { max-width: 96%; }
  /* Telefonda pencere tam ekran: küçük ekranda ortalanmış kart yerine
     kenardan kenara daha çok yer. */
  .ai-kapla { padding: 0; }
  .ai-kart { max-width: 100%; height: 100dvh; border-radius: 0; }
}

/* Model cevabındaki markdown tablosu. Kendi içinde kayar: dar ekranda
   sayfayı yana kaydırmaz. */
.ai-tablo-sar { overflow-x: auto; margin: 4px 0 10px; -webkit-overflow-scrolling: touch; }
.ai-tablo { border-collapse: collapse; width: 100%; font-size: var(--fs-xs); }
.ai-tablo th, .ai-tablo td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ai-tablo th { font-weight: 700; color: var(--ink-soft); font-size: var(--fs-2xs); text-transform: none; }
.ai-tablo tbody tr:last-child td { border-bottom: none; }
.ai-tablo .ai-sayi { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   ASİSTAN — ana sayfadaki çubuk ve açılan pencere
   ============================================================ */

/* Ana sayfadaki "arama kutusu" görünümlü giriş. Tıklayınca ya da
   yazmaya başlayınca asistan penceresi açılır. */
.ai-cubuk-sar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; margin: 0 0 18px;
  background: rgba(255,255,255,.8); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--sh-1);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ai-cubuk-sar:hover { box-shadow: var(--sh-2); }
.ai-cubuk-sar:focus-within { box-shadow: var(--ring); border-color: var(--accent); }
.ai-cubuk-ikon { width: 19px; height: 19px; flex: none; color: var(--accent-dark); }
.ai-cubuk {
  flex: 1; border: none; background: transparent; outline: none;
  font-family: inherit; font-size: var(--fs-md); color: var(--ink);
  padding: 14px 0;
}
.ai-cubuk::placeholder { color: var(--ink-soft); }

/* Pencere: sayfanın üstünde, ortalanmış kart. */
.ai-kapla {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(29,29,31,.32);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  animation: aiKaplaGir .18s var(--ease) both;
}
.ai-kapla.hidden { display: none; }
@keyframes aiKaplaGir { from { opacity: 0; } to { opacity: 1; } }

.ai-kart {
  display: flex; flex-direction: column;
  width: 100%; max-width: 860px; height: min(86dvh, 760px);
  background: var(--page-bg); border: 1px solid var(--glass-brd);
  border-radius: var(--radius-xl); box-shadow: var(--sh-3);
  padding: 16px 18px 14px;
  animation: aiKartGir .24s var(--ease) both;
}
@keyframes aiKartGir { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ai-kapla, .ai-kart { animation: none; }
}

.ai-kart-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; flex: none;
}
.ai-kart-bas h2 { margin: 0; font-size: var(--fs-xl); font-weight: 700; color: var(--ink); }
.ai-kart-dugmeler { display: flex; align-items: center; gap: 8px; }

/* Pencere açıkken arkadaki sayfa kaymasın */
body.ai-acik { overflow: hidden; }

/* ============================================================
   BORDER BEAM — AI giriş kutusunun etrafında dönen renkli ışık

   KAYNAK: Jakubantalik/Libraries → packages/border-beam (MIT).
   Bu blok ELLE YAZILMADI: kütüphanenin kendi generateBeamCSS()
   üreteci Node'da çalıştırılıp bizim yapılandırmamız için çıktı
   alındı — size "md", colorVariant "colorful", theme "light",
   borderRadius 22px (--radius-xl ile aynı).

   TEK SAPMA: dönüş süresi 1.96 sn yerine 4.2 sn. Varsayılan hız
   bu boyuttaki bir kutuda huzursuz duruyordu; "rahatsız edecek
   kadar hızlı olmasın" isteğine göre yavaşlatıldı.

   React GEREKMİYOR: beam tamamen CSS. Sarmalayıcıdaki data-active
   niteliği index.html'de duruyor, JavaScript hiç karışmıyor.
   Pencere kapalıyken .ai-kapla display:none olduğu için hiçbir
   kare boyanmaz.

   @property desteklenmeyen tarayıcıda --beam-opacity 0'da kalır:
   beam görünmez, kutu normal çalışır.
   ============================================================ */

@property --beam-angle-ai-giris {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

@property --beam-opacity-ai-giris {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

[data-beam="ai-giris"] {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
}

[data-beam="ai-giris"][data-active] {
  animation:
    beam-spin-ai-giris 4.2s linear infinite,
    beam-fade-in-ai-giris 0.6s ease forwards;
}

[data-beam="ai-giris"][data-fading] {
  animation:
    beam-spin-ai-giris 4.2s linear infinite,
    beam-fade-out-ai-giris 0.5s ease forwards;
}

[data-beam="ai-giris"][data-active]::after,
[data-beam="ai-giris"][data-fading]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 21px;
  padding: 1px;
  clip-path: inset(0 round 22px);
  background: conic-gradient(
        from var(--beam-angle-ai-giris),
        transparent 0%, transparent 54%,
        rgba(0, 0, 0, 0.08) 57%,
        rgba(0, 0, 0, 0.2) 60%,
        rgba(0, 0, 0, 0.4) 63%,
        rgba(0, 0, 0, 0.55) 66%,
        rgba(0, 0, 0, 0.4) 69%,
        rgba(0, 0, 0, 0.2) 72%,
        rgba(0, 0, 0, 0.08) 75%,
        transparent 78%, transparent 100%
      ),radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(255, 50, 100), transparent),
    radial-gradient(ellipse 60px 35px at 12% -5%, rgb(40, 140, 255), transparent),
    radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(50, 200, 80), transparent),
    radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(30, 185, 170), transparent),
    radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(100, 70, 255), transparent),
    radial-gradient(ellipse 85px 26px at 55% 100%, rgb(40, 140, 255), transparent),
    radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(255, 120, 40), transparent),
    radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(240, 50, 180), transparent),
    radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(180, 40, 240), transparent);
  -webkit-mask:
    conic-gradient(
      from var(--beam-angle-ai-giris),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask:
    conic-gradient(
      from var(--beam-angle-ai-giris),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
  pointer-events: none;
  z-index: 2;
  opacity: calc(var(--beam-opacity-ai-giris) * 0.12 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
  animation: beam-hue-shift-ai-giris 12s ease-in-out infinite;
}

[data-beam="ai-giris"][data-active]::before,
[data-beam="ai-giris"][data-fading]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255, 50, 100, 0.45), transparent),
    radial-gradient(ellipse 54px 32px at 12% -5%, rgba(40, 140, 255, 0.45), transparent),
    radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(50, 200, 80, 0.45), transparent),
    radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(30, 185, 170, 0.45), transparent),
    radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(100, 70, 255, 0.45), transparent),
    radial-gradient(ellipse 77px 23px at 55% 100%, rgba(40, 140, 255, 0.45), transparent),
    radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255, 120, 40, 0.45), transparent),
    radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(240, 50, 180, 0.45), transparent),
    radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(180, 40, 240, 0.45), transparent);
  box-shadow: inset 0 0 9px 1px rgba(0, 0, 0, 0.14);
  -webkit-mask-image:
    conic-gradient(
      from var(--beam-angle-ai-giris),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  -webkit-mask-composite: source-in, source-over;
  mask-image:
    conic-gradient(
      from var(--beam-angle-ai-giris),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  mask-composite: intersect, add;
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--beam-opacity-ai-giris) * 0.26 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
  clip-path: inset(0 round 22px);
  animation: beam-hue-shift-ai-giris 12s ease-in-out infinite;
}

[data-beam="ai-giris"] [data-beam-bloom] {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 21px;
  clip-path: inset(0 round 22px);
  background: conic-gradient(
        from var(--beam-angle-ai-giris),
        transparent 0%, transparent 58%,
        rgba(0, 0, 0, 0.02) 62%,
        rgba(0, 0, 0, 0.08) 65%,
        rgba(0, 0, 0, 0.2) 67%,
        rgba(0, 0, 0, 0.4) 69%,
        rgba(0, 0, 0, 0.6) 70%,
        rgba(0, 0, 0, 0.6) 70.5%,
        rgba(0, 0, 0, 0.4) 71.5%,
        rgba(0, 0, 0, 0.2) 73%,
        rgba(0, 0, 0, 0.08) 75%,
        rgba(0, 0, 0, 0.02) 78%,
        transparent 82%
      );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 1px;
  filter: blur(8px) brightness(1.30) saturate(1.50);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

[data-beam="ai-giris"][data-active] [data-beam-bloom],
[data-beam="ai-giris"][data-fading] [data-beam-bloom] {
  display: block;
  opacity: calc(var(--beam-opacity-ai-giris) * 0.34 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
}

@keyframes beam-spin-ai-giris {
  to { --beam-angle-ai-giris: 360deg; }
}

@keyframes beam-fade-in-ai-giris {
  to { --beam-opacity-ai-giris: 1; }
}

@keyframes beam-fade-out-ai-giris {
  from { --beam-opacity-ai-giris: 1; }
  to { --beam-opacity-ai-giris: 0; }
}

@keyframes beam-hue-shift-ai-giris {
  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.50); }
  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 30deg)) brightness(1.30) saturate(1.50); }
  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.50); }
}

[data-beam="ai-giris"][data-paused],
[data-beam="ai-giris"][data-paused]::after,
[data-beam="ai-giris"][data-paused]::before,
[data-beam="ai-giris"][data-paused] [data-beam-bloom] {
  animation-play-state: paused !important;
}


/* Sarmalayıcı yerleşimi: eskiden .ai-giris-sar'ın kendi üst boşluğu
   vardı; beam artık dışta olduğu için boşluk da dışa taşındı, yoksa
   ışık halkasının içinde 10px boş şerit kalıyordu. */
[data-beam="ai-giris"] { margin-top: 10px; }
.ai-giris-sar { margin-top: 0; }

/* Odak halkası sarmalayıcıya taşındı. Sebep: beam sarmalayıcısında
   overflow:hidden var (bloom bulanıklığı dışarı taşmasın diye) ve bu,
   İÇERİDEKİ kutunun dışa doğru büyüyen odak halkasını kırpıyordu.
   Öğenin KENDİ box-shadow'u overflow'dan etkilenmez, o yüzden halkayı
   dışa almak görünürlüğü geri kazandırıyor — klavyeyle gezen kullanıcı
   nereye yazdığını görmeye devam ediyor. */
[data-beam="ai-giris"]:focus-within { box-shadow: var(--ring); }
.ai-giris-sar:focus-within { box-shadow: none; }

/* Hareket azaltılmışsa ışık durur — renk kalır, dönme biter. */
@media (prefers-reduced-motion: reduce) {
  [data-beam="ai-giris"],
  [data-beam="ai-giris"]::after,
  [data-beam="ai-giris"]::before,
  [data-beam="ai-giris"] [data-beam-bloom] { animation: none !important; }
}

/* Düşünen küre — bekleme balonundaki canvas. Boyut JS'te veriliyor;
   burada yalnızca hizalama. */
.ai-bekleyen { display: flex; align-items: center; gap: 10px; }
.ai-kure { display: block; flex: none; }
.ai-bekleyen > .ai-durum { margin: 0; }

/* ============================================================
   SİSTEM KATMANI — erişilebilirlik, durumlar, buton hâlleri
   ------------------------------------------------------------
   Buradaki hiçbir kural yeni bir görsel dil kurmuyor. Üstteki
   token'ları (renk, boşluk, yarıçap, gölge, hareket) kullanıp
   sistemde EKSİK olan üç şeyi tamamlıyor:

     1) Klavye ve ekran okuyucu altyapısı  (atlama bağlantısı,
        yalnız-okuyucu metin, her tıklanabilir öğede odak halkası)
     2) Boş / yükleniyor / hata durumları  (ekranların yarısı
        veri gelmediğinde bomboş kalıyordu)
     3) Buton durumları: pasif ve "işlem sürüyor"

   Neden dosyanın sonunda: bu kurallar mevcut bileşenlerin
   ÜSTÜNE biner (aynı özgüllükte son yazan kazanır), yani
   yukarıdaki hiçbir tanımı silmeden tamamlıyor.
   ============================================================ */

/* ---------- Yalnızca ekran okuyucu için ----------
   Görsel olarak yok, okuyucuya var. Tablo başlığı olmayan aksiyon
   sütunu, yalnız-ikon buton ve durum bildirimi bunu kullanır. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Odaklanınca görünür olan hâli — atlama bağlantısı bunu kullanır. */
.sr-only-focusable:focus-visible {
  position: fixed; top: var(--sp-3); left: var(--sp-3);
  width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; white-space: normal;
  z-index: 10000;
  background: var(--accent-strong); color: var(--accent-ink);
  padding: 12px 20px; border-radius: var(--radius);
  font-weight: 600; font-size: var(--fs-md);
  box-shadow: var(--sh-3);
}

/* ---------- Odak halkası: TEK kural, her yerde ----------
   Önceden yalnızca .btn / .rail-btn / .nav-btn / .tab-btn / .icon-btn
   odak halkası alıyordu. Tablo içindeki satır aksiyonları, onay
   kutuları, bağlantılar ve sekmeler klavyeyle gezildiğinde
   NEREDE OLDUĞUNU GÖSTERMİYORDU. Depoda tek elle telefon kullanan
   kullanıcı için değil ama klavyeyle çalışan ofis kullanıcısı için
   bu, ekranı kör gezmek demekti. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Koyu zeminli butonda mavi halka kayboluyordu — beyaz ara halka ekle. */
.btn-dark:focus-visible,
.btn-danger:focus-visible,
.btn-primary:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px var(--accent-strong);
}
/* Fare ile tıklamada halka çıkmasın (yalnızca klavye). */
:focus:not(:focus-visible) { outline: none; }

/* ---------- Buton durumları ----------
   .btn'in hover/active hâli vardı; PASİF ve İŞLEM SÜRÜYOR hâli yoktu.
   Kaydet'e iki kez basılması bu yüzden mümkündü. */
/* PASİF: "bu sana kapalı". Rengini kaybeder, tıklanamaz görünür. */
.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--neutral-bg);
  background-image: none;
  color: var(--ink-soft);
  border-color: var(--line-strong);
  box-shadow: none;
  filter: none;
  opacity: 1;                    /* opaklıkla soldurmak yazıyı okunmaz yapıyordu */
}
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover { transform: none; filter: none; }

/* İŞLEM SÜRÜYOR: "çalışıyorum". Rengini KORUR — pasif değil, meşgul.
   İkisini aynı griye düşürmek kullanıcıya "buton bozuldu" dedirtiyordu. */
.btn.is-loading {
  cursor: progress;
  pointer-events: none;          /* çift tıklamayı gerçekten engelle */
}
.btn.is-loading:hover { transform: none; }
/* İşlem sürerken: yazı yerinde kalır (buton zıplamasın), önüne dönen
   halka gelir. Yazıyı "Yükleniyor…" ile değiştirmiyoruz — buton
   genişliği değişince yanındaki butonlar kayıyor. */
.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after {
  content: ''; position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  color: var(--accent-ink);
  animation: btnSpin .6s linear infinite;
}
.btn-ghost.is-loading::after { color: var(--ink); }
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ---------- Durum bloğu: boş · yükleniyor · hata ----------
   Bunlar üç ayrı bileşen değil; aynı kabuk, üç farklı ton. Sebep:
   kullanıcı "burada bir şey yok" ile "burada bir şey ters gitti"yi
   ayırt edebilmeli, ama her ekranda ayrı bir düzen öğrenmek
   zorunda kalmamalı. */
.durum {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  color: var(--ink-soft);
}
.durum-ikon {
  width: 40px; height: 40px;
  color: var(--gray-light);
  margin-bottom: var(--sp-1);
}
.durum-bas {
  font-size: var(--fs-lg); font-weight: 600; color: var(--ink);
  letter-spacing: -0.2px;
}
.durum-aciklama {
  font-size: var(--fs-sm); line-height: 1.6;
  max-width: 42ch;               /* ölçü: uzun satır taranmıyor */
}
.durum-eylem { margin-top: var(--sp-3); display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }

/* Hata tonu: kırmızıyı ZEMİNE değil yalnızca ikona ve başlığa veriyoruz.
   Tablo yerine kırmızı bir kutu koymak, olmayan veriyi bir felakete
   çeviriyor; asıl mesele kullanıcının ne yapacağını bilmesi. */
.durum-hata .durum-ikon { color: var(--warn-fill); }
.durum-hata .durum-bas { color: var(--warn-ink); }

/* Tablo gövdesinin içinde kullanıldığında (tek hücreye yayılır) */
td > .durum, th > .durum { padding: var(--sp-5) var(--sp-4); }

/* ---------- İskelet (yükleniyor) ----------
   Dönen halka yerine iskelet: cari defter 32.000 satır okurken
   ekranın NE OLACAĞINI göstermek, boş bir bekleme halkasından
   daha az huzursuz ediyor. */
.iskelet {
  background: linear-gradient(
    90deg,
    rgba(29,29,31,.06) 25%,
    rgba(29,29,31,.11) 37%,
    rgba(29,29,31,.06) 63%
  );
  background-size: 400% 100%;
  animation: iskeletKay 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  height: 14px;
}
.iskelet + .iskelet { margin-top: var(--sp-2); }
.iskelet-satir { height: 40px; border-radius: var(--radius); }
.iskelet-kart { height: 92px; border-radius: var(--radius-lg); }
@keyframes iskeletKay {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------- Satır içi yükleme göstergesi ---------- */
.yukleniyor-nokta {
  display: inline-block; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; margin-right: 4px;
  animation: noktaNabiz 1s ease-in-out infinite;
}
.yukleniyor-nokta:nth-child(2) { animation-delay: .15s; }
.yukleniyor-nokta:nth-child(3) { animation-delay: .3s; }
@keyframes noktaNabiz { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---------- Hareket azaltma: bu katmanın tamamı ----------
   Depo telefonunda ve vestibüler hassasiyette dönen/kayan hiçbir şey
   kalmasın; bilgi kalır, hareket biter. */
@media (prefers-reduced-motion: reduce) {
  .iskelet,
  .yukleniyor-nokta,
  .btn.is-loading::after { animation: none; }
  .iskelet { background: rgba(29,29,31,.08); }
  .btn.is-loading::after { border-top-color: currentColor; opacity: .5; }
}

/* ============================================================
   EMOJİ → İKON GEÇİŞİNİN STİL KARŞILIĞI
   ------------------------------------------------------------
   Ekranlardaki ~90 emoji inline SVG'ye çevrildi. Emoji kendi
   boyutunu ve rengini getiriyordu; SVG getirmiyor. Aşağıdakiler
   o boşluğu kapatır — yeni bir görünüm getirmez, eskisini
   ölçülebilir hâle sokar.
   ============================================================ */

/* Sekme ve buton içindeki satır içi ikon: yazıyla aynı hizada dursun.
   .bi-inline'ın vertical-align değeri düz metin için ayarlıydı; flex
   kutuda (buton, sekme) hizalamayı flex yapar, negatif offset kayma
   yaratıyordu. */
.tab-btn .bi-inline,
.btn .bi-inline,
.blok-ad .bi-inline { vertical-align: 0; margin-right: 0; }
.tab-btn { gap: 7px; }

/* Sıralama madalyaları emoji idi (🥇🥈🥉) — Windows 7'de kutu çıkıyordu.
   Yerine numara: sıra zaten bilginin kendisi, renk onu güçlendirir. */
.perf-rank-row .rk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  font-size: var(--fs-2xs); font-variant-numeric: tabular-nums;
  background: var(--neutral-bg); color: var(--ink-soft);
}
.perf-rank-row .rk-1 { background: #f6e3b4; color: #6b4e00; }
.perf-rank-row .rk-2 { background: #e3e5e8; color: #4a4f57; }
.perf-rank-row .rk-3 { background: #f0ddcd; color: #6d4523; }

/* Yazdırma paneli: bant ikonu artık SVG, font-size ile büyümüyor. */
.yaz-bant-ikon { font-size: 0; flex: none; }
.yaz-bant-ikon .bi { width: 26px; height: 26px; }
.yaz-bant.iyi   .yaz-bant-ikon { color: var(--ok); }
.yaz-bant.uyari .yaz-bant-ikon { color: var(--amber); }
.yaz-bant.kotu  .yaz-bant-ikon { color: var(--warn); }
/* Yazıcı satırındaki durum: ikon + yazı tek satırda, renk anlamı taşır. */
.yaz-durum { display: inline-flex; align-items: center; gap: 5px; }
.yaz-durum.iyi { color: var(--ok); }
.yaz-durum.kotu { color: var(--warn); }

/* Çıkış tablosunda satır uyarısı. Önce ' ⛔ stok yetersiz' düz metindi;
   satır sonuna yapışıyor ve tarayıcıya göre bambaşka çiziliyordu. */
.satir-uyari {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap;
  color: var(--amber-ink);
}
.satir-uyari .bi-inline { width: 13px; height: 13px; }
.satir-uyari.is-blok { color: var(--warn-ink); }

/* ---------- Okutma geri bildirimi ----------
   Barkod okutulduğunda '❌ TANINMAYAN' / '✅' emojileri anlamı taşıyordu.
   Emoji gitti; anlamı ARTIK RENK VE İKON taşıyor — üstelik animasyon
   bittikten sonra da duruyor (emoji öyleydi, animasyon değildi).
   Depoda telefonla çalışan kişi ekrana yarım saniye bakıyor: durumun
   kalıcı olması bir süs değil, işin kendisi. */
.count-flash, .scanner-flash { transition: background var(--dur) var(--ease); }
.count-flash.flash-ok::before, .count-flash.flash-err::before,
.scanner-flash.flash-ok::before, .scanner-flash.flash-err::before {
  content: ''; flex: none;
  width: 1.05em; height: 1.05em; margin-right: .5em;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.count-flash.flash-ok::before, .scanner-flash.flash-ok::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.count-flash.flash-err::before, .scanner-flash.flash-err::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20Z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Ccircle cx='12' cy='17.2' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20Z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Ccircle cx='12' cy='17.2' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
/* Nötr hâlde ikon YOK: yukarıdaki kural yalnızca durum sınıfı varken
   çiziyor. (Eskiden :empty ile engellenmeye çalışılıyordu ama bu
   paneller boş değil, varsayılan yönerge metni taşıyorlar.) */
/* Uyarı: işlem oldu ama dikkat isteyen bir yanı var (sipariş dışı çıkış). */
.count-flash.flash-uyari::before, .scanner-flash.flash-uyari::before {
  content: ''; flex: none;
  width: 1.05em; height: 1.05em; margin-right: .5em;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20Z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Ccircle cx='12' cy='17.2' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20Z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Ccircle cx='12' cy='17.2' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
.count-flash.flash-uyari, .scanner-flash.flash-uyari { box-shadow: var(--sh-3), inset 0 0 0 2px var(--amber-fill); }
@keyframes flashUyari { 0%, 50% { background: var(--amber); } 100% { background: #1d1d1f; } }
.count-flash.flash-uyari { animation: flashUyari .5s; }

/* Durum, animasyon bitince de okunur kalsın: kenar rengi kalıcı. */
.count-flash.flash-ok, .scanner-flash.flash-ok { box-shadow: var(--sh-3), inset 0 0 0 2px var(--ok-fill); }
.count-flash.flash-err, .scanner-flash.flash-err { box-shadow: var(--sh-3), inset 0 0 0 2px var(--warn-fill); }

/* mask-image desteklemeyen tarayıcı (çok eski Chrome): ikon yerine
   kenar rengi tek başına anlamı taşır — kimse durumsuz kalmaz. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .count-flash.flash-ok::before, .count-flash.flash-err::before,
  .scanner-flash.flash-ok::before, .scanner-flash.flash-err::before { display: none; }
}

/* ============================================================
   DOKUNMA HEDEFLERİ VE MOBİL DÜZELTMELER
   ------------------------------------------------------------
   Depo personeli telefonu TEK ELLE, ayakta ve hareket hâlinde
   kullanıyor (bkz. PRODUCT.md). Küçük hedef burada estetik değil
   işlevsel bir arıza: yanlış tuşa basmak yanlış çıkış demek.
   ============================================================ */

/* Kamera düğmesi: içindeki emoji SVG'ye çevrildi, artık font-size ile
   büyümüyor — boyutu açıkça verilmeli. */
.fab-scan .bi { width: 26px; height: 26px; }
.fab-scan { font-size: 0; }

@media (max-width: 820px) {
  .fab-scan .bi { width: 24px; height: 24px; }

  /* 44px, WCAG 2.5.5'in hedef boyutu ve tek el için gerçek taban.
     Küçük butonlar tabloların içinde: satır aksiyonu kaçırılan
     en sık dokunuş. */
  .btn-small { min-height: 44px; padding-left: 16px; padding-right: 16px; }
  .btn.icon-only, .btn.icon-only.btn-small { width: 44px; height: 44px; }
  .prod-ck, #products-select-all { width: 22px; height: 22px; }
  .tab-btn { min-height: 44px; }
  .sort-select { min-height: 44px; }

  /* Satır aksiyonları alt alta ezilmesin; aralarında parmak payı olsun. */
  .ra-flex { gap: 8px; }

  /* Boş durum telefonda daha derli toplu dursun. */
  .durum { padding: var(--sp-5) var(--sp-3); }
  .durum-aciklama { font-size: var(--fs-xs); }
}

/* Masaüstünde fare hedefi: 34px yerine 36px. Telefondaki 44px kuralını
   ezmemesi için min-width ile sınırlandı — özgüllükleri aynı olduğu için
   sırf kaynak sırası yüzünden onu geçersiz kılıyordu. */
@media (min-width: 821px) {
  .btn.icon-only.btn-small { width: 36px; height: 36px; }
}

/* ============================================================
   ÇIKIŞ ONAYI EKRANI
   ------------------------------------------------------------
   Bu ekran günde onlarca kez, çoğu zaman ayakta kullanılıyor.
   Tasarım ölçütü "güzel gösterge paneli" değil, ŞU: kullanıcı
   müşteriyi seçtikten sonra kaç hamlede çıkışı bitirebiliyor.

   Eskiden iki tablo vardı — bekleyenler ayrı, taslak ayrı — ve
   sekiz sütun: Sipariş · Stok · Çıkan · Kalan · Seri · Çıkacak ·
   Fiyat. Aynı bilgi iki kez okunuyordu. Şimdi tek liste ve altı
   alan: Ürün · Bekleyen · Stok · Çıkacak · Fiyat · Toplam.
   ============================================================ */

/* ---------- Başlık ---------- */
.cikis-bas { margin-bottom: var(--sp-4); }
.cikis-bas h1 { margin-bottom: var(--sp-3); }
.cikis-bas-alan {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: var(--sp-3);
  align-items: end;
}
.cikis-bas-alan label { margin: 0 0 6px; }
.cikis-bas-alan .ac-wrap { min-width: 0; }

/* ---------- Ürün listesi ---------- */
/* Tek grid: başlık şeridi ve satırlar AYNI sütun tanımını paylaşır,
   böylece hizalama kayamaz. */
.cikis-liste { display: flex; flex-direction: column; gap: 6px; }

.cikis-basliklar,
.cikis-satir {
  display: grid;
  grid-template-columns:
    minmax(200px, 2.2fr)   /* ürün    */
    minmax(96px, .9fr)     /* bekleyen*/
    minmax(80px, .7fr)     /* stok    */
    minmax(190px, 1.1fr)   /* çıkacak */
    minmax(140px, 1fr)     /* fiyat   */
    minmax(120px, .9fr);   /* toplam  */
  gap: var(--sp-3);
  align-items: center;
}
.cikis-basliklar {
  padding: 0 var(--sp-4) 2px;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; color: var(--ink-soft);
}
.cikis-satir {
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px var(--sp-4);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cikis-satir:hover { background: #fff; border-color: var(--line-strong); }
/* Stok yetersiz: kenarlık uyarır, zemin sakin kalır. Satırı komple
   kırmızıya boyamak 20 satırlık listede okunmayı bitiriyor. */
.cikis-satir.is-sorunlu { border-color: var(--warn-fill); background: rgba(255,59,48,.045); }

/* STOK BEKLEYEN SATIR (kullanıcının kararı, 2026-08-20)
   Gizlemek yerine grileştirildi: "ne bekliyorduk" bilgisi ekranda
   kalsın ama üzerinde işlem yapılamasın. Kilidi `disabled` sağlıyor —
   bu sadece görünüm değil, klavyeyle de odaklanılamıyor. Buradaki CSS
   yalnızca o durumu GÖRÜNÜR kılıyor; kilit CSS'e emanet edilmedi. */
.cikis-satir.is-stoksuz {
  background: rgba(20, 20, 15, 0.03);
  border-color: rgba(20, 20, 15, 0.07);
  color: var(--gray-light);
}
.cikis-satir.is-stoksuz:hover {
  background: rgba(20, 20, 15, 0.03);
  border-color: rgba(20, 20, 15, 0.07);
}
/* Ürün adı okunur kalsın: satırın amacı zaten "bunu bekliyoruz" demek. */
.cikis-satir.is-stoksuz .cs-kod { color: var(--ink-soft); }
.cikis-satir.is-stoksuz .cs-renk,
.cikis-satir.is-stoksuz .cs-alan,
.cikis-satir.is-stoksuz .cs-ek { color: var(--gray-light); }
.cikis-satir.is-stoksuz .cs-alan b { font-weight: 600; }
.cikis-satir.is-stoksuz .cs-sayac,
.cikis-satir.is-stoksuz .price-input { opacity: .45; }
.cikis-satir.is-stoksuz .cs-cift,
.cikis-satir.is-stoksuz .price-input,
.cikis-satir.is-stoksuz .cs-eksi,
.cikis-satir.is-stoksuz .cs-arti { cursor: not-allowed; }
/* Alternatif önerisi AÇIK kalıyor: stok yokken en işe yarar düğme o. */
.cikis-satir.is-stoksuz .cikis-alt { opacity: 1; color: var(--accent-dark); }
.satir-uyari.is-bekle { color: var(--ink-soft); }

.cs-urun { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.cs-kod { font-weight: 700; font-size: var(--fs-md); letter-spacing: -.2px; }
.cs-renk { color: var(--ink-soft); font-size: var(--fs-sm); }
.cs-alan { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; min-width: 0; }
.cs-alan b { font-size: var(--fs-md); }
.cs-ek { display: block; font-size: var(--fs-2xs); color: var(--ink-soft); margin-top: 1px; }
.cs-yok { color: var(--ink-soft); font-size: var(--fs-xs); }

/* ---------- Çıkacak: adım BİR SERİ ---------- */
/* Depoda çift çift saymak hata kaynağıydı: "16" yazmak isterken 1
   fazla/eksik basılıyordu. Artık + ve − bir seri (8 çift) taşır;
   altta çift karşılığı yazılı durur. */
.cs-sayac { display: flex; align-items: center; gap: 6px; }
.cs-sayac button {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
  font-size: var(--fs-lg); font-weight: 600; line-height: 1; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cs-sayac button:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.cs-sayac button:disabled { opacity: .4; cursor: not-allowed; }
.cs-deger { display: flex; flex-direction: column; align-items: center; min-width: 62px; }
.cs-deger .cs-cift {
  width: 100%; text-align: center; padding: 5px 4px;
  font-weight: 700; font-size: var(--fs-md); font-variant-numeric: tabular-nums;
  border-radius: var(--radius-sm);
}
/* Tarayıcının kendi artı/eksi okları: sayacın yanında ikinci bir
   kontrol gibi duruyor ve yanlışlıkla çift çift değiştiriyordu. */
.cs-deger .cs-cift::-webkit-outer-spin-button,
.cs-deger .cs-cift::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-deger .cs-cift { -moz-appearance: textfield; }
.cs-seri { font-size: var(--fs-2xs); color: var(--ink-soft); margin-top: 2px; white-space: nowrap; }

.cs-fiyat .price-input { padding: 8px 10px; font-size: var(--fs-sm); }
.cs-toplam b { font-weight: 700; }
.cs-alan .satir-uyari { margin-top: 4px; }

.cikis-alt {
  flex-basis: 100%; display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 2px 0 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-2xs); font-weight: 600;
  color: var(--accent-dark); text-align: left;
}
.cikis-alt:hover { text-decoration: underline; }

/* ---------- Ürün ekleme: ikincil, kapalı gelir ---------- */
.cikis-ekle {
  margin-top: var(--sp-4);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: rgba(255,255,255,.5);
}
.cikis-ekle > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 12px var(--sp-4); cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--fs-sm); color: var(--ink);
}
.cikis-ekle > summary::-webkit-details-marker { display: none; }
.cikis-ekle > summary .bi { width: 16px; height: 16px; color: var(--accent-dark); }
.cikis-ekle-alt { font-weight: 400; color: var(--ink-soft); font-size: var(--fs-2xs); }
.cikis-ekle[open] > summary { border-bottom: 1px solid var(--line); }
.cikis-ekle .manual-add-row { padding: var(--sp-4); }

/* ---------- Alt özet + tek ana işlem ---------- */
/* Sayfanın altına yapışır: 20 ürünlük listede kullanıcı toplamı
   görmek ya da onaylamak için başa dönmek zorunda kalmasın. */
.cikis-ozet {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--glass-brd); border-radius: var(--radius-lg);
  background: var(--glass-2);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: var(--sh-3);
}
.cikis-ozet-sayilar { display: flex; align-items: baseline; gap: var(--sp-5); flex-wrap: wrap; }
.coz { display: flex; flex-direction: column; gap: 1px; }
.coz-val { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.6px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.coz-lbl { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); }
/* Çift ve tutar: kullanıcının onaylamadan önce gözünün yakaladığı iki sayı. */
.coz.is-buyuk .coz-val { font-size: var(--fs-4xl); }
.coz.is-tutar .coz-val { color: var(--ok); }
.cikis-ozet-eylem { display: flex; align-items: center; gap: var(--sp-2); }

/* Sipariş ekranı — brüt kâr alt grubu (alış maliyeti + kâr), toplam
   tutarın yanında ikinci bir satır gibi durur; yetkisiz kullanıcıda
   .hidden ile tamamen kaybolur (bkz. app.js:siparisKarTazele). */
.coz-kar-grup { display: flex; align-items: baseline; gap: var(--sp-5); flex-wrap: wrap; }
.coz.is-kar .coz-val { color: var(--ok); }
.coz.is-kar.is-zarar .coz-val { color: var(--warn); }

/* ---------- Telefon ---------- */
@media (max-width: 900px) {
  .cikis-bas-alan { grid-template-columns: 1fr; }
  .cikis-basliklar { display: none; }   /* her alan kendi etiketini taşır */
  .cikis-satir {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3);
  }
  .cs-urun { grid-column: 1 / -1; }
  .cs-cikacak, .cs-fiyat { grid-column: 1 / -1; }
  /* Telefonda sütun başlığı yok; her alan kendini tanıtır. */
  .cs-alan[data-bas]::before {
    content: attr(data-bas) " ";
    display: block; font-size: var(--fs-2xs); text-transform: uppercase;
    letter-spacing: .4px; color: var(--ink-soft); margin-bottom: 2px;
  }
  .cs-sayac button { width: 44px; height: 44px; }   /* tek elle kullanılıyor */
  .cs-deger { flex: 1; min-width: 0; }
  .cikis-ozet { flex-direction: column; align-items: stretch; }
  .cikis-ozet-sayilar { justify-content: space-between; gap: var(--sp-3); }
  .cikis-ozet-eylem { flex-direction: column-reverse; }
  .cikis-ozet-eylem .btn { width: 100%; }
  .coz.is-buyuk .coz-val { font-size: var(--fs-3xl); }
  .coz-kar-grup { width: 100%; justify-content: space-between; gap: var(--sp-3); }
}

/* Çıkış ekranındaki okutma şeridi ince. Sayım ekranında şerit büyük
   olmalı (depoda uzaktan okunuyor), ama çıkış onayında listenin üstünde
   96px'lik bir kutu ekranın üçte birini yiyor ve kullanıcıyı scroll'a
   zorluyordu. Aynı bileşen, farklı sahne. */
.count-flash.is-ince {
  min-height: 0; padding: 12px 16px; margin-bottom: var(--sp-3);
  font-size: var(--fs-md); font-weight: 600; letter-spacing: -.2px;
  justify-content: flex-start; text-align: left; border-radius: var(--radius);
}
@media (max-width: 820px) {
  .count-flash.is-ince { font-size: var(--fs-sm); padding: 10px 14px; }
}


/* Geçmiş çıkışın kargo firması — fiş başlığında küçük rozet.
   Müşterinin bugünkü varsayılanı değil, o çıkışta kullanılan firma
   (cikis_bildirim.kargo). */
.fis-kargo {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 10px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap;
}
.fis-kargo .bi-inline { width: 14px; height: 14px; }

/* ============================================================
   İŞLEM EKRANLARI — SİPARİŞ AL · MAL GİRİŞİ
   ============================================================
   İkisi de aynı işi yapıyor (kimden/kime + ürün ekle + kaydet) ama
   ekranda iki ayrı tam genişlikte kutu olarak duruyordu. Aralarındaki
   boşluk "iki ayrı adım" hissi veriyordu; oysa tek akış.

   Artık tek kart, içinde ince bir ayraç. Ekleme butonu birincil renkte:
   ekranda yapılacak ilk iş o.
   ============================================================ */
.islem-kart { padding: 18px 20px; }
.islem-kart > label:first-child { margin-top: 0; }
.islem-ayrac {
  height: 1px; background: var(--line);
  margin: 16px -20px 14px;             /* kartın iki kenarına kadar */
}
.islem-kart .field-hint { margin-bottom: 0; }
.islem-kart .manual-add-row { margin-bottom: 0; }

@media (max-width: 760px) {
  .islem-kart { padding: 16px; }
  .islem-ayrac { margin: 14px -16px 12px; }
}

/* Bekleyenler: eylem sütunu dar ekranda taşıyordu — butonlar sarsın,
   Durum etiketinin üstüne binmesin. YALNIZCA o tabloda: cari defterinde
   sarma üç düğmeyi alt alta koyup her satırı gereksiz yere uzatıyordu. */
.pending-tbl .ra-flex { flex-wrap: wrap; }

/* Bekleyenler satırındaki "⋯" menüsü — ikincil işlemler modal içinde dikey
   liste (bkz. app.js > openPendingRowMenu). Dropdown DENENMEDİ: satır
   .table-wrap içinde yatay kayan bir tabloda, absolute konumlu bir menü
   kayan kapta kırpılırdı; modal her yerde aynı davranıyor. */
.pending-menu { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.pending-menu-btn { width: 100%; justify-content: flex-start; gap: 10px; background: transparent; box-shadow: none; }
.pending-menu-btn:hover { background: rgba(20, 20, 15, .06); transform: none; }
.pending-menu-danger { color: #D70015; }

/* Tedarikçi bazlı sekmede tablonun üstündeki grup başlığı (artık tablonun
   dışında, bkz. app.js — .pending-tbl mobilde <thead>'i gizliyor).
   flex-wrap: dar ekranda "Eksikleri Bas" düğmesi sığmazsa ALT SATIRA
   kendisi kayar — tedarikçi adı kelime ortasından bölünüp düğmeyle
   üst üste binmesin diye (bkz. "MAHMUT SENİH" adının ikiye bölünmesi). */
.pending-ted-baslik {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 15px; color: #1c1b1a; margin: 16px 0 4px;
}
.pending-ted-baslik:first-child { margin-top: 0; }
/* .bi-line (inline-flex) BİLEREK kullanılmıyor: içindeki tek boşluklu metin
   düğümü kendi başına anonim flex öğesi olup satır sonunda kırpılıyor —
   "ALİ BAZAR" ile "(16 seri...)" arasındaki boşluk kayboluyordu. Normal
   satır-içi akışta ikon hizası .bi-inline'ın vertical-align'ıyla geliyor. */
.pending-ted-ad { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------
   BEKLEYENLER — TELEFONDA KART LİSTESİ
   ------------------------------------------------------------
   Yedi sütunlu tablo 390px'e sığmıyordu: yatay kaydırma vardı ve
   ekranın SOLUNDA kalan tek şey müşteri adıyla ürün oluyordu.
   Depoda telefona bakan kişinin sorduğu soru ("kalan ne kadar,
   gönderebilir miyim") ekran dışında kalıyordu.

   "Her şeyi küçült" yerine biçim değişiyor: her satır bir kart,
   her hücre kendi etiketiyle. Hiçbir sütun SİLİNMİYOR — hepsi
   kartın içinde, alt alta.
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  .pending-tbl, .pending-tbl tbody, .pending-tbl tr, .pending-tbl td { display: block; }
  /* .tbl-fixed'in min-width: 960px'i kart düzeninde satırı 960px yapıyor,
     space-between ile değerler ekranın sağına, görüş dışına kaçıyordu. */
  .pending-tbl { table-layout: auto; width: 100%; min-width: 0; }
  .pending-tbl thead { display: none; }
  .pending-tbl colgroup { display: none; }
  .pending-tbl tr {
    border: 1px solid var(--line); border-radius: var(--yzy-r-sm);
    padding: 10px 12px; margin-bottom: 10px; background: var(--yzy-bg-duz);
  }
  /* Etiket ÜSTTE, değer ALTINDA — satır satır. Önceden etiket solda/değer
     sağda tek satıra sıkıştırılıyordu; dar ekranda bu "başlıklar solda,
     içerik sağda" garip bir iki-sütun görünümüne dönüşüyordu (özellikle
     Durum ve "Kimler istiyor?" gibi uzun içeriklerde). */
  .pending-tbl td { border: none; padding: 5px 0 0; text-align: left; }
  /* .tbl-fixed'in num sütunlarına verdiği 8px yan boşluk (bkz. yukarısı)
     kart düzeninde tek başına gereksiz girinti yapıyordu; sıfırlandı. */
  .pending-tbl td.num { text-align: left; font-variant-numeric: tabular-nums; padding-left: 0; padding-right: 0; }
  .pending-tbl td[data-lbl]::before {
    content: attr(data-lbl); display: block;
    font-size: var(--fs-2xs); color: var(--ink-soft); font-weight: 600;
    margin-bottom: 1px;
  }
  /* Müşteri adı kartın başlığı — etiketsiz, ilk satır. */
  .pending-tbl td[data-lbl="Müşteri"] { font-size: var(--fs-md); padding-top: 0; }
  .pending-tbl td[data-lbl="Müşteri"]::before { content: none; }
  .pending-tbl td.row-actions { padding-top: 8px; }
}

/* ============================================================
   AYARLAR — SEKMELER
   ============================================================
   Beş konu (firma · fiş · mesajlar · etiket · yazdırma) tek uzun
   sayfada alt alta akıyordu; sol taraf sıkışık, sağ taraf boştu.
   Artık sekmeli. Ayarların HİÇBİRİ kaldırılmadı — gruplandı.
   ============================================================ */
.ayar-giris { color: var(--ink-soft); margin: -8px 0 18px; max-width: 620px; }
.ayar-sekmeler { flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-5); }
.ayar-sekmeler .tab-btn { min-height: 42px; padding-inline: 16px; }
.ayar-sekmeler .ayar-ikincil { margin-left: auto; color: var(--ink-soft); }
.ayar-bolum-baslik { margin: 0 0 18px; }
.ayar-bolum-baslik span { display: block; color: var(--ink); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; }
.ayar-bolum-baslik p { margin: 2px 0 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.ayar-bolum > h2:first-child { margin-top: 0; }
/* Kartlar sekmenin tam genişliğini alır — eskiden 560px'e kilitliydi,
   sol taraf sıkışıp sağ taraf boş kalıyordu. Ama METİN kutuları
   sınırsız uzamaz: 90 karakterlik bir satır okunmaz, o yüzden
   girdi/açıklama genişliği ayrıca sınırlı. */
#screen-settings .form-card { max-width: none; }
#screen-settings .form-card > input[type="text"],
#screen-settings .form-card > input[type="number"],
#screen-settings .form-card > textarea,
#screen-settings .form-card > .info-text,
#screen-settings .form-card > .field-hint { max-width: 720px; }
/* Fatura formu: kalem satırları (açıklama+miktar+birim+fiyat+KDV+iskonto+
   toplam) yan yana yedi kutu — 560px'e kilitli kart hepsini alt alta
   yığıp kullanılamaz hale getiriyordu. */
#screen-invoices .form-card { max-width: none; }
#screen-invoices .form-card > input[type="text"],
#screen-invoices .form-card > .field-hint { max-width: 720px; }
@media (min-width: 1200px) {
  /* Otomatik Mesajlar sekmesi çok uzun: alt bölümler iki sütuna
     dizilince sayfa yarı yarıya kısalıyor. */
  #screen-settings [data-ayar-bolum="mesaj"] .form-card { column-gap: 32px; }
}
#screen-settings label { font-size: var(--fs-xs); }
.ayar-yonlendirme { max-width: 620px !important; }
.ayar-yonlendirme .info-text { margin: 0 0 14px; }
.ayar-hesap { display: flex; align-items: center; gap: 12px; padding: 14px 0 2px; color: var(--ink-soft); }
.ayar-hesap label { margin: 0; }
.ayar-hesap .mono { margin: 0 !important; color: var(--ink); }
.ayar-bilgi { appearance: none; border: 0; padding: 0; background: transparent; color: var(--accent-dark); font: inherit; font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ayar-bilgi-detay { color: var(--ink-soft); }
.otomasyon-karti { padding: 16px 0; border-top: 1px solid var(--line); }
.otomasyon-karti:first-of-type { border-top: 0; padding-top: 4px; }
.otomasyon-karti h3 { display: inline-block; margin: 0 14px 0 0 !important; }
.otomasyon-karti > .chk-line { display: inline-flex; margin: 0 !important; }
.otomasyon-detay { padding-top: 12px; }
#screen-settings .liste-grup:not(.yonetiliyor) .liste-deger:nth-child(n+4) { display: none; }
#screen-settings .liste-yonet { margin-top: 8px; }

@media (max-width: 680px) {
  .ayar-sekmeler { gap: 6px; }
  .ayar-sekmeler .tab-btn { padding-inline: 12px; }
  .ayar-sekmeler .ayar-ikincil { margin-left: 0; }
  .ayar-hesap { align-items: flex-start; flex-wrap: wrap; }
}
/* min-width:0 artık genel `.form-row > div` kuralında (bkz. yukarısı) —
   burada tekrar tanımlamaya gerek yok. */

/* ============================================================
   TİPOGRAFİ DENETİMİ — TELEFONDA BUTON YAZILARI
   ============================================================
   390px'te ekran başlığındaki eylem butonlarının yazıları ikiye
   bölünüyordu ("Müşteri Fiyatı Şablonu / İndir"). Buton tam
   genişlikte olduğu hâlde yazı sığmıyor, çünkü punto ve iç boşluk
   masaüstü ölçüsündeydi.

   Çözüm metni kısaltmak değil (bilgi kaybı): punto ve iç boşluk
   telefonda bir kademe iniyor. Dokunma yüksekliği 44px korunuyor.
   ============================================================ */
@media (max-width: 480px) {
  /* İki buton yan yana = her biri ~165px; "Müşteri Fiyatı Şablonu İndir"
     oraya sığmıyor. Telefonda tek sütun: her buton tam satır. */
  .screen-head .head-actions .btn { min-width: 100%; }
  .head-actions .btn,
  .count-actions .btn,
  .cari-araclar .btn {
    font-size: var(--fs-sm); padding-left: 12px; padding-right: 12px;
    min-height: 44px;
  }
  .head-actions .btn .bi,
  .count-actions .btn .bi { width: 17px; height: 17px; }
}

/* ============================================================
   ANA SAYFA — TEK IZGARA (yetkili katman)
   ============================================================
   Bundan önce ana sayfa üç ayrı CSS katmanından besleniyordu
   (12-kolonlu ızgara, .dash-orta iki-sütun, .dash-kolon flex). Üçü de
   aynı kartlara ayrı kural yazıyordu; hangisinin kazandığı ekran
   genişliğine göre değişiyordu. Sonuç: bölümlerin sol kenarları
   tutmuyor, kartlar birbirinden bağımsız aşağı kayıyordu.

   O üç katman SİLİNDİ. Yerine tek ızgara:

     12 kolon · 12px sütun aralığı · 14px satır aralığı

     ┌ başlık ────────────────────────────────────────── 12 ┐
     ┌ asistan ───────────────────────────────────────── 12 ┐
     ┌ özet ×5 ───────────────────────────────────────── 12 ┐
     ┌ hızlı işlem ───────────────────────────────────── 12 ┐
     ┌ satış grafiği ── 7 ┐┌ stok durumu ─────────────── 5 ┐
     ┌ maliyet ─ 4 ┐┌ ürün perf. ─ 4 ┐┌ şampiyon ────── 4 ┐
     ┌ bugünkü hareketler 7 ┐┌ bugün gelen siparişler ── 5 ┐

   Kartın kendi hizası yok: nereden başlayacağını ızgara söylüyor.
   align-items varsayılan (stretch) → aynı satırdaki kartların hem üst
   hem alt kenarı hizalı.

   ÖLÇEK: bu bir landing page değil, günlük operasyon ekranı. Punto ve
   iç boşluk bir kademe küçük; para rakamları ve KPI sayıları belirgin
   kalıyor. Boşluk sistemi 4/8/12/16/24 — ara değer yok.
   ============================================================ */

.dash-izgara {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px 12px;
  align-content: start;
}
.dash-izgara > * { grid-column: 1 / -1; min-width: 0; margin: 0; }
/* Boş kap ızgarada delik bırakmasın. Şampiyon kartı id ile hedeflendiği
   için ayrıca yazılıyor: id seçicisi :empty kuralını yener. */
.dash-izgara > :empty { display: none; }
.dash-izgara.no-sampiyon #dash-champion { display: none; }

@media (min-width: 1024px) {
  .dash-izgara .dg-8 { grid-column: span 8; }
  .dash-izgara .dg-7 { grid-column: span 7; }
  .dash-izgara .dg-5 { grid-column: span 5; }
  .dash-izgara .dg-4 { grid-column: span 4; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .dash-izgara .dg-4 { grid-column: span 6; }
  .dash-izgara .dg-8 { grid-column: span 12; }
}

/* --- Sayfa başlığı: iki satır, sıkı --- */
.dg-bas h1 { margin: 0; font-size: var(--fs-4xl); letter-spacing: -.6px; }
.dg-alt { margin: 1px 0 0; color: var(--ink-soft); font-size: var(--fs-xs); }

/* --- Asistan çubuğu: yüksekliği kısaldı --- */
.dash-izgara .ai-cubuk-sar { margin: 0; }
.dash-izgara .ai-cubuk { padding-top: 11px; padding-bottom: 11px; font-size: var(--fs-sm); }

/* ------------------------------------------------------------
   ÖZET ŞERİDİ (5 kart)
   Bunlar sayfanın ANA içeriği değil, hızlı özet. Bu yüzden kart
   yüksekliği kısa: ikon + etiket + rakam tek blok, altında yalnızca
   sistemde GERÇEKTEN olan yardımcı bilgi (tahsilat/ödeme adedi).
   ------------------------------------------------------------ */
.dg-ozet {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.dg-ozet > .cari-ozet { display: contents; }
.dg-ozet > #dash-cari-ozet, .dg-ozet > #dash-hafta-para { display: contents; }
.dg-ozet .iskelet-kart { min-height: 74px; }

.kpi {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 12px 14px; border-radius: var(--yzy-r-sm);
  background: var(--yzy-bg-duz); border: 1px solid var(--yzy-brd-dis);
  box-shadow: var(--yzy-sh);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kpi:hover { border-color: var(--accent); box-shadow: var(--sh-3); }
.kpi-ikon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.kpi-ikon .bi { width: 17px; height: 17px; }
.kpi-metin { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.kpi-lbl {
  font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.25;
  color: var(--ink-soft);
  /* Kelime ortadan bölünmesin: Türkçe uzun kelimeler tireleme
     olmadan kırılırsa "Tedarikçile / re" gibi okunur. */
  overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
.kpi-val {
  font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.5px;
  line-height: 1.2; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-not { font-size: 11px; color: var(--ink-soft); line-height: 1.2; }

/* İkon zeminleri — renk ANLAM taşır. */
.kpi-mavi    .kpi-ikon { background: rgba(20,20,15,.10);  color: var(--accent-dark); }
.kpi-turuncu .kpi-ikon { background: rgba(255,149,0,.12);  color: var(--amber); }
.kpi-kirmizi .kpi-ikon { background: rgba(255,59,48,.10);  color: var(--warn); }
.kpi-yesil   .kpi-ikon { background: rgba(52,199,89,.12);  color: var(--ok); }
.kpi-mor     .kpi-ikon { background: rgba(120,80,220,.10); color: #6a44c8; }

@media (max-width: 1200px) { .dg-ozet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .dg-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* ------------------------------------------------------------
   HIZLI İŞLEM — tek yatay şerit
   ------------------------------------------------------------ */
.dash-izgara .quick-actions {
  display: flex; flex-wrap: wrap;
  gap: 12px; padding: 0; margin: 0;
  background: none; border: none; box-shadow: none;
}
.dash-izgara .quick-actions .btn {
  flex: 0 1 auto;
  min-height: 46px; padding: 14px 20px; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.2px;
  border-radius: var(--radius-sm); box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;                 /* "BEKLEYENLER" ikiye bölünmesin */
  overflow: hidden; text-overflow: ellipsis;
}
.dash-izgara .quick-actions .btn .bi { width: 17px; height: 17px; flex: none; }
.dash-izgara .quick-actions .btn span { overflow: hidden; text-overflow: ellipsis; }
/* Telefonda düğmeler ikişerli tam genişlik: tek elle basılabilir hedef. */
@media (max-width: 700px) {
  .dash-izgara .quick-actions { gap: 8px; }
  .dash-izgara .quick-actions .btn { flex: 1 1 calc(50% - 8px); padding: 14px 10px; }
}

/* ------------------------------------------------------------
   ORTAK KART YÜZEYİ — tek tasarım sistemi, karta özel tasarım yok
   ------------------------------------------------------------ */
.dash-izgara .cards,
.dash-izgara .cost-card,
.dash-izgara .sales-card,
.dash-izgara .dg-kart {
  background: var(--yzy-bg-duz);
  border: 1px solid var(--yzy-brd-dis);
  border-radius: var(--yzy-r-sm);
  box-shadow: var(--yzy-sh);
  padding: 14px 16px;
  margin: 0;
  height: 100%;
  display: flex; flex-direction: column; min-width: 0;
}
.dash-izgara #dash-cost, .dash-izgara #dash-perf, .dash-izgara #dash-sales,
.dash-izgara #dash-champion { display: flex; min-width: 0; }
.dash-izgara #dash-cost > *, .dash-izgara #dash-perf > *,
.dash-izgara #dash-sales > * { flex: 1; min-width: 0; }

/* Kart başlığı — hepsinde AYNI: 11px, harf aralıklı, büyük harf. */
.kart-bas, .dash-izgara .sales-title, .dash-izgara .cost-title {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 8px; display: block;
}

/* ------------------------------------------------------------
   STOK DURUMU — tek kart içinde metrik ızgarası
   ------------------------------------------------------------ */
.dash-izgara .cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 10px;
  align-content: start;
}
.dash-izgara .cards .kart-bas { grid-column: 1 / -1; }
.dash-izgara .cards .card {
  background: none; border: none; box-shadow: none; border-radius: 0;
  padding: 0; animation: none; min-width: 0;
}
.dash-izgara .cards .card:hover { transform: none; box-shadow: none; }
.dash-izgara .cards .card .num {
  font-size: var(--fs-2xl); letter-spacing: -.5px; line-height: 1.15;
}
.dash-izgara .cards .card .lbl {
  font-size: 11px; color: var(--ink-soft); margin-top: 1px; line-height: 1.25;
  overflow-wrap: normal; word-break: keep-all;
}
.dash-izgara .cards .card-hero { background: none; }
.dash-izgara .cards .card-hero .num,
.dash-izgara .cards .card-hero .num.counting { color: var(--accent-dark); }
.dash-izgara .cards .card-hero .lbl { color: var(--ink-soft); }
.dash-izgara .cards .card-hero::after { content: none; }
.dash-izgara .cards .card-accent-warn { background: none !important; border: none !important; }
.dash-izgara .cards .card-accent-warn .num { color: var(--warn); }
.dash-izgara .cards .card-accent-soft { background: none !important; }

/* ------------------------------------------------------------
   SATIŞ GRAFİĞİ — başlık · rakam · dönem tek satırda
   ------------------------------------------------------------ */
.sg-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 2px;
}
.sg-bas .sales-title { margin: 0; white-space: nowrap; }
.sg-donem {
  flex: none; width: auto; max-width: 120px;
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 26px 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--yzy-brd-dis); background: var(--yzy-bg-duz);
  color: var(--ink);
}
.sg-deger {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.7px;
  font-variant-numeric: tabular-nums; margin-bottom: 2px; line-height: 1.15;
}
.sg-deger .kpi-delta, .sg-deger .kpi-not {
  font-size: 12px; font-weight: 600; letter-spacing: 0;
}
.sg-deger .kpi-not { color: var(--ink-soft); }
.kpi-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.kpi-delta svg { width: 10px; height: 10px; }
.kpi-delta.is-iyi { color: var(--ok); }
.kpi-delta.is-kotu { color: var(--warn); }
.kpi-delta.is-notr { color: var(--ink-soft); }

.sg-sar { position: relative; margin-top: auto; }
.sg { display: block; width: 100%; height: 128px; overflow: visible; }
.sg-izgara { stroke: var(--line); stroke-width: 1; }
.sg-dolgu { stroke: none; }
.sg-cizgi {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;   /* yatay esnemede kalınlık sabit */
}
/* Işık: aynı yolun bulanık kopyası — ayrı renk değil, çizginin kendisi. */
.sg-cizgi-isik {
  fill: none; stroke: var(--accent); stroke-width: 2; opacity: .32;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sg-nokta {
  fill: #fff; stroke: var(--accent); stroke-width: 2;
  opacity: 0; transition: opacity var(--dur) var(--ease);
  vector-effect: non-scaling-stroke;
}
.sg-nokta-simdi, .sg-nokta.is-acik { opacity: 1; }
.sg-ay { fill: var(--ink-soft); font-size: 11px; font-weight: 500; }
.sg-ay-simdi { fill: var(--ink); font-weight: 700; }
.sg-alan { fill: transparent; cursor: default; }
.sg-balon {
  position: absolute; transform: translate(-50%, calc(-100% - 10px));
  background: var(--ink); color: #fff; border-radius: 9px;
  padding: 5px 9px; pointer-events: none; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.22); z-index: 2;
}
.sg-balon b { display: block; font-size: 12px; font-variant-numeric: tabular-nums; }
.sg-balon span { display: block; font-size: 11px; color: rgba(255,255,255,.7); }
@media (prefers-reduced-motion: reduce) { .sg-nokta { transition: none; } }

/* ------------------------------------------------------------
   MALİYET · ÜRÜN PERFORMANSI · ŞAMPİYON — aynı satır, aynı dil
   ------------------------------------------------------------ */
.dash-izgara .cost-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
.dash-izgara .cost-top { padding: 0; }
.dash-izgara .cost-head { margin-bottom: 2px; }
.dash-izgara .cost-info { padding: 0; }
.dash-izgara .cost-info svg { width: 17px; height: 17px; }
.dash-izgara .cost-value { font-size: var(--fs-3xl); letter-spacing: -.7px; line-height: 1.15; }
.dash-izgara .cost-stats {
  padding: 10px 0 0; margin-top: 10px; border-top: 1px solid var(--line);
  display: flex; gap: 4px;
}
.dash-izgara .cost-stats > div + div { border-left: 1px solid var(--line); }
.dash-izgara .cost-stats b { font-size: var(--fs-lg); }
.dash-izgara .cost-stats span { font-size: 11px; }
.dash-izgara .cost-alert {
  margin-top: 10px; padding: 7px 10px; font-size: 11px; gap: 6px; line-height: 1.3;
}
.dash-izgara .perf-mini-stats { margin: 6px 0 10px; }
.dash-izgara .perf-mini-stats b { font-size: var(--fs-lg); }
.dash-izgara .perf-mini-stats span { font-size: 11px; }
.dash-izgara .perf-mini-link { margin-top: auto; }
.dash-izgara .champion-card { margin: 0; padding: 12px 14px; height: 100%; }
.dash-izgara .champion-ad { font-size: var(--fs-md); }
.dash-izgara .champion-kar-val { font-size: var(--fs-xl); }

/* ------------------------------------------------------------
   BUGÜN — iki tablo kartı, yan yana, aynı yükseklikte
   ------------------------------------------------------------ */
.dg-kart-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.dg-kart-bas h2 {
  margin: 0; font-size: var(--fs-md); letter-spacing: -.2px; line-height: 1.3;
}
.dg-link {
  flex: none; border: none; background: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 600; color: var(--accent-dark);
  padding: 4px 6px; border-radius: 7px; white-space: nowrap;
}
.dg-link:hover { background: var(--accent-soft); }
.dg-kart .table-wrap {
  flex: 1; margin: 0; background: none; border: none; box-shadow: none;
  padding: 0; border-radius: 0;
}

/* Tablolar: satır yüksekliği düşük, metin ortadan bölünmez. */
.dash-tablo { font-size: 12.5px; table-layout: fixed; width: 100%; }
.dash-tablo th, .dash-tablo td {
  padding: 6px 8px; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  word-break: keep-all; overflow-wrap: normal;
}
.dash-tablo th { font-size: 11px; }
.dash-tablo .dm-saat { color: var(--ink-soft); font-variant-numeric: tabular-nums; width: 46px; }
/* Buton metni tek satır ve kutusu metne yetecek kadar: "İptal Et"
   kesinlikle "İptal / Et" diye bölünmeyecek. */
.dash-tablo td .btn {
  white-space: nowrap; padding: 3px 9px; font-size: 11.5px;
  min-height: 0; flex: none; width: auto;
}
.dash-tablo .bi-inline { width: 13px; height: 13px; }

/* Boş durum: kartın yarısını kaplamasın. */
.dg-kart .durum { padding: 20px 12px; }
.dg-kart .durum-ikon { width: 26px; height: 26px; margin-bottom: 6px; }
.dg-kart .durum-bas { font-size: var(--fs-sm); margin: 0; }
.dg-kart .durum-aciklama { font-size: 12px; margin: 2px 0 0; }

@media (max-width: 700px) {
  .dash-izgara { gap: 10px 8px; }
  .dg-bas h1 { font-size: var(--fs-3xl); }
  .dash-izgara .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-izgara .cards .card .num, .kpi-val { font-size: var(--fs-xl); }
}

/* --- Ana sayfa: son rötuşlar --- */
/* Maliyet kartındaki üç rakam eşit paylaşsın (flex temel genişlik
   metinden geliyordu: "yaklaşık seri" geniş, "çift" dar kalıyordu). */
.dash-izgara .cost-stats > div { flex: 1 1 0; min-width: 0; }

/* Alan dolgusu biraz belirgin — Apple Stocks hissi düz bir çizgiden
   değil, çizginin altındaki yumuşak dolgudan geliyor. */
.dash-izgara .sg-dolgu { opacity: 1; }

/* Buton yazıları tek satır. */
.dash-izgara .perf-mini-link,
.dash-izgara .cost-alert span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-izgara .champion-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Şampiyon kartı sistemin dışına çıkmıştı: koyu zemin + altın rakam,
   sayfadaki en gürültülü yüzeydi. Diğer kartlarla aynı yüzeye indi;
   vurgu yalnızca rozet renginde. */
.dash-izgara .champion-card {
  background: var(--yzy-bg-duz);
  border: 1px solid var(--yzy-brd-dis);
  box-shadow: var(--yzy-sh);
  border-radius: var(--yzy-r-sm);
}
.dash-izgara .champion-badge { background: rgba(255,149,0,.14); color: var(--amber); }
.dash-izgara .champion-lbl { color: var(--ink-soft); }
.dash-izgara .champion-ad { color: var(--ink); }
.dash-izgara .champion-alt { color: var(--ink-soft); }
.dash-izgara .champion-kar-val { color: var(--ok); }
.dash-izgara .champion-kar-lbl { color: var(--ink-soft); }
.dash-izgara .champion-arrow { color: var(--ink-soft); }

/* ------------------------------------------------------------
   BUGÜN TABLOLARI — TELEFONDA KART LİSTESİ
   ------------------------------------------------------------
   Altı sütun 390px'e sığmıyordu. Sabit genişlikle ürün/müşteri
   sütunlarına 10-15px kalıyor, hücreler okunmaz oluyordu; serbest
   genişlikle tablo 411px'e çıkıp en önemli sütunu (tutar) ekran
   dışına itiyordu. Kelimeyi ortadan bölmek yasak.

   Çözüm biçim değişikliği — Bekleyenler ekranındaki desenin aynısı:
   her satır bir kart, her hücre kendi etiketiyle. Hiçbir sütun
   silinmiyor, hiçbir metin kırpılmıyor.
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  .dash-tablo, .dash-tablo tbody, .dash-tablo tr, .dash-tablo td { display: block; }
  .dash-tablo { table-layout: auto; width: 100%; min-width: 0; }
  .dash-tablo thead, .dash-tablo colgroup { display: none; }
  .dash-tablo tr {
    border: 1px solid var(--line); border-radius: 12px;
    padding: 8px 10px; margin-bottom: 8px;
  }
  .dash-tablo td {
    border: none; padding: 3px 0; text-align: left;
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    white-space: normal; overflow: visible;
  }
  .dash-tablo td[data-lbl]::before {
    content: attr(data-lbl); flex: none;
    font-size: 11px; color: var(--ink-soft); font-weight: 600;
  }
  /* Boş eylem hücresi kartta boşluk bırakmasın. */
  .dash-tablo td.dm-eylem:empty { display: none; }
  .dash-tablo td.dm-eylem { padding-top: 6px; justify-content: flex-start; }
  .dash-tablo .dm-saat { width: auto; }
  .dg-kart .table-wrap { overflow-x: visible; }
}

/* ============================================================
   TEST MESAJI SONUCU — Ayarlar > Sistem Kontrolü
   ============================================================
   Üç hâl, üç renk: beklerken nötr, çalışıyorsa yeşil, takıldıysa
   kırmızı. Renkler durum paletinden; yeni renk tanımlanmadı.
   ============================================================ */
.test-sonuc {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; padding: 11px 14px;
  border-radius: var(--yzy-r-sm); border: 1px solid var(--line);
  font-size: var(--fs-sm); line-height: 1.5;
}
.test-sonuc .bi-inline { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.test-sonuc.is-bekle { background: var(--info-bg); color: var(--info-ink); border-color: transparent; }
.test-sonuc.is-ok    { background: var(--ok-bg);   color: var(--ok-ink);   border-color: transparent; }
.test-sonuc.is-hata  { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
/* Ham hata metni (NetGSM cevabı) — okunur ama gövdeden ayrı dursun. */
.test-sebep {
  display: inline-block; margin-top: 3px; padding: 2px 8px;
  border-radius: 6px; background: rgba(0,0,0,.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-2xs);
}
/* Beklerken ikon dönsün: "takıldı mı, çalışıyor mu" belli olsun. */
.test-sonuc.is-bekle .bi-inline { animation: testDon 1.4s linear infinite; }
@keyframes testDon { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .test-sonuc.is-bekle .bi-inline { animation: none; }
}

/* ============================================================
   GRUP SEKMELERİ
   ============================================================
   Sol barda yedi madde var; "Sipariş Al", "Sayım", "Rapor" gibi alt
   ekranlar oraya sığmıyor ve sığsaydı da menü yine on dört maddeli
   olurdu. Bunun yerine her alt ekran, ait olduğu grubun sekme şeridini
   taşıyor: Depo'dayken Ürünler / Sayım / Mal Girişi hep görünür durumda.

   Şerit sayfa başlığının ÜSTÜNDE — "hangi bölümdeyim" sorusu, "bu sayfa
   ne" sorusundan önce cevaplanıyor.

   Düğmeler `data-goto` kullanıyor; app.js bunu zaten devrederek
   dinliyor, yeni JS bağlanmadı. Aktif sekme HTML'de işaretli olduğu için
   çalışma anında hesaplanmasına da gerek yok.
   ============================================================ */
.grup-sekme {
  /* Çerçevesiz kapsayıcı — her madde kendi ayrı butonu (kullanıcının
     kararı, 2026-09-12: ".tabs gibi, hâlâ çerçevenin içindeler"
     düzeltmesi). Ortalı, üst barın altında, tüm sayfalar için geçerli. */
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 auto var(--sp-5);
  padding: 0;
  background: none; border: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
  border-radius: 999px;
  width: fit-content; max-width: 100%;
  animation: tabMorph .42s var(--ease) backwards;
}
.grup-sekme-btn {
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: -0.2px; white-space: nowrap;
  padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: background .15s ease-out, color .15s ease-out;
}
.grup-sekme-btn:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
/* Aktif madde nav-btn ile aynı dil: siyah tonları. */
.grup-sekme-btn.active {
  background: var(--ink); border-color: var(--ink);
  color: #fff; font-weight: 700;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
.grup-sekme-btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

/* Telefonda şerit tam genişlik ve yatay kaydırmalı: dört sekme alt alta
   sarıp üç satır kaplamasın. */
@media (max-width: 820px) {
  .grup-sekme {
    width: auto; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-bottom: var(--sp-4);
  }
  .grup-sekme-btn { flex: none; padding: 9px 14px; }
}

/* ============================================================
   ANASAYFA — YENİ BÖLÜMLER (2026-08-20)
   ============================================================ */

/* ---------- Yükleme çubuğu ----------
   "Bakiyeler neden gelmiyor?" sorusunun cevabı ekranda dursun diye.
   Yükleme bitince .hidden ile kapanır. */
.yuk-cubuk {
  /* Gölgeli çerçeve kaldırıldı (kullanıcının kararı, 2026-09-12) —
     çubuk artık çerçevesiz, doğrudan zeminin üstünde. */
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 22px; height: 42px;
  background: none; border: none; box-shadow: none;
}
.yuk-bar {
  flex: 1; height: 5px; border-radius: 999px;
  background: rgba(20, 20, 15, 0.1); overflow: hidden;
}
/* Dolgu, sol bardaki aktif düğmenin ışığıyla aynı turuncu. */
.yuk-dolgu {
  display: block; height: 100%; width: 0;
  border-radius: 999px; background: var(--turuncu-grad);
  box-shadow: 0 0 10px -1px rgba(248, 133, 60, 0.75);
  transition: width .25s ease-out;
}
.yuk-yazi {
  flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------- Arama kutusu ---------- */
.ara-sar {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 13px 22px; border-radius: 999px;
  background: var(--yuzey); border: 1px solid rgba(20, 20, 15, 0.1);
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.ara-sar:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.ara-ikon { flex: none; width: 17px; height: 17px; color: var(--gray-light); }
.ara-giris {
  flex: 1; border: none; background: transparent; outline: none;
  padding: 0; font-size: var(--fs-lg); color: var(--ink);
}
.ara-giris:focus { border: none; box-shadow: none; background: transparent; }

/* Sonuç listesi kutunun altına açılır. Izgara satırını itmesin diye
   akışın dışında: absolute. */
.ara-sonuc {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 70;
  max-height: 420px; overflow-y: auto;
  /* İçeriğin ÜSTÜNE biniyor: opak. Yarı saydam olunca altındaki
     kartların yazısı sonuçların arasından okunuyordu. */
  background: var(--yuzey-opak); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--sh-3);
  padding: 6px;
}
.ara-bolum {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 10px 12px 6px;
}
.ara-satir {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; padding: 10px 12px; border: none; border-radius: var(--radius-xs);
  background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; font-size: var(--fs-sm); color: var(--ink);
}
.ara-satir:hover, .ara-satir.ara-secili { background: var(--accent-soft); }
.ara-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ara-not { flex: none; font-size: var(--fs-2xs); color: var(--ink-soft); }
.ara-bakiye { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.ara-bos { padding: 18px 14px; text-align: center; color: var(--ink-soft); font-size: var(--fs-sm); }

/* ---------- Nakit akışı ---------- */
.nk-kart { padding: 20px; }
.nk-donem { display: flex; gap: 2px; padding: 3px; background: var(--yuzey-3); border-radius: var(--radius-xs); }
.nk-donem-btn {
  font-family: inherit; font-size: var(--fs-2xs); font-weight: 600;
  padding: 6px 14px; border: none; border-radius: 999px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
}
.nk-donem-btn.active { background: var(--yuzey); color: var(--accent-dark); box-shadow: var(--sh-1); }

.nk-ozet {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-5);
}
.nk-kalem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nk-lbl {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft);
}
.nk-val { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nk-not { font-size: var(--fs-2xs); color: var(--ink-soft); }

/* Günlük çubuklar: her gün için giren (yeşil) ve çıkan (kırmızı) yan yana.
   Yükseklikler dönemin en büyük hareketine göre ölçekleniyor — mutlak
   değer değil, birbirine göre okunuyor. */
.nk-grafik {
  display: flex; align-items: flex-end; gap: 6px;
  height: 120px; padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}
.nk-gun { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.nk-cubuklar { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.nk-cubuk { display: block; width: 42%; max-width: 14px; border-radius: 4px 4px 2px 2px; }
.nk-giren { background: var(--ok-fill); }
.nk-cikan { background: var(--warn-fill); }
.nk-gun-lbl { flex: none; font-size: 10px; color: var(--ink-soft); white-space: nowrap; }
.nk-bos { margin: 0; }

/* ---------- Stok sütunu: stok durumu kartları + maliyet kartı ---------- */
.dg-stok-sut { display: flex; flex-direction: column; gap: 12px; }
.dg-stok-sut > * { min-width: 0; }

/* ---------- İki liste: gönderilmeye hazır · eksik stok ----------
   İkisi de aynı biçimde okunuyor: ad · oransal çubuk · çift adedi.
   Çubuk mutlak değil, listenin EN BÜYÜĞÜNE göre ölçekli — hangisinin
   ağır bastığı tek bakışta görünsün diye. */
.ana-listeler {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-4); margin-top: var(--sp-4);
}
@media (max-width: 900px) { .ana-listeler { grid-template-columns: 1fr; } }

.liste { list-style: none; margin: 0; padding: 0; }
.liste-satir {
  display: grid;
  grid-template-columns: minmax(120px, 1.5fr) minmax(60px, 1fr) auto;
  align-items: center; gap: var(--sp-3);
  padding: 9px 2px; border-bottom: 1px solid var(--line);
}
.liste-satir:last-child { border-bottom: none; }
.liste-ad {
  font-size: var(--fs-sm); font-weight: 500; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.liste-bar { height: 7px; border-radius: 999px; background: var(--yuzey-3); overflow: hidden; }
.liste-bar i { display: block; height: 100%; border-radius: 999px; }
.liste-bar-ok i  { background: var(--ok-fill); }
.liste-bar-yok i { background: var(--warn-fill); }
.liste-adet {
  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.liste-fazla { margin: var(--sp-2) 0 0; font-size: var(--fs-2xs); color: var(--ink-soft); }

/* ---------- Üçlü satır: bugünün hareketleri ----------
   Kartlar dar olduğu için tablolar .dash-tablo ile sıkıştırılmış hâlde
   çiziliyor; kartın kendi kenarlığı zaten var, tablo kabuğu çıkarılıyor. */
.ana-uclu {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4); margin-top: var(--sp-4);
}
@media (max-width: 1200px) { .ana-uclu { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .ana-uclu { grid-template-columns: 1fr; } }

.ana-uclu .table-wrap {
  background: none; border: none; box-shadow: none;
  border-radius: 0; overflow-x: auto;
  /* Yoğun bir günde "Bugün Gelen Siparişler" yüzlerce satır olabiliyor;
     sınır olmasa üç kartlık satır ekranı aşacak kadar uzuyordu. */
  max-height: 320px; overflow-y: auto;
  /* Kartın camı zaten var; tablo ikinci bir bulanıklık katmanı kurmasın. */
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ana-uclu .dash-tablo th { background: none; padding-top: 0; opacity: .6; }
.ana-uclu .dash-tablo tr:last-child td { border-bottom: none; }

/* ---------- Hareket satırları: üç bilgi tek hücrede ----------
   Alt üçlüdeki kartlar dört kolon genişliğinde; tip, ürün ve kime için
   ayrı sütun açmak hepsini kırpıyordu. Üçü alt alta tek hücrede. */
.dm-tip { display: block; font-weight: 600; font-size: var(--fs-xs); }
.dm-tip .bi, .dm-tip svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.dm-urun { display: block; font-size: var(--fs-2xs); color: var(--ink-soft); }
.dm-kime { display: block; font-size: var(--fs-2xs); color: var(--ink-soft); }
.dash-tablo .dm-eylem { padding-left: 4px; padding-right: 8px; }
.dash-tablo .dm-eylem .btn { padding: 5px 9px; font-size: 11px; }

/* ============================================================
   ANASAYFA — TEK SATIR
   ============================================================
   Başlık · arama · asistan · yazdırma durumu yan yana. Arama ve asistan
   kalan yeri eşit paylaşıyor; başlık ve yazdırma rozeti kendi
   genişliklerinde kalıyor.

   Kartlar bilerek yok. Geri gelecek olanlar bu satırın ALTINA eklenecek.
   ============================================================ */
/* Satır kendi yığın bağlamını kuruyor ve kartların ÜSTÜNDE duruyor:
   kartlarda backdrop-filter var, o da her birini yeni bir yığın
   bağlamı yapıyor — arama sonuçları aksi hâlde altlarında kalıyordu. */
.ana-satir {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  position: relative; z-index: 30;
}
.ana-baslik {
  flex: none; margin: 0;
  font-size: var(--fs-6xl); font-weight: 600; letter-spacing: -0.015em;
  white-space: nowrap;
}
/* Arama ve asistan kutuları AYNI kutu: aynı dolgu, aynı kenar, aynı
   yükseklik, aynı yazı boyu. İkisi kalan yeri eşit paylaşıyor ve satır
   yazdırma rozetine kadar uzuyor. */
.ana-satir .ara-sar,
.ana-satir .ai-cubuk-sar {
  flex: 1 1 0; min-width: 220px; margin: 0;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 20px; height: 42px;
  /* Şeffaf: zemin degradesi olduğu gibi görünüyor, kendi dolgusu yok.
     Işıma KOYU ve içe doğru — bar zemine oyulmuş gibi duruyor. Alt
     kenardaki ince beyaz hat oyuğun karşı duvarındaki ışık. */
  background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(20, 20, 15, 0.1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 999px;
  /* Işıma HAFİF. Güçlü iç gölge, dolgunun ortasını aydınlık bırakıp
     kenarını karartıyordu; kutunun içinde ikinci bir hap varmış gibi
     duruyordu. */
  box-shadow: inset 0 1px 3px rgba(20, 20, 15, 0.1),
              inset 0 -1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
/* Odaklanınca oyuk derinleşiyor; dışa taşan halka yok. */
.ana-satir .ara-sar:focus-within,
.ana-satir .ai-cubuk-sar:focus-within {
  border-color: rgba(20, 20, 15, 0.2);
  box-shadow: inset 0 2px 5px rgba(20, 20, 15, 0.15),
              inset 0 -1px 0 rgba(255, 255, 255, 0.75);
}
.ana-satir .ara-ikon,
.ana-satir .ai-cubuk-ikon { flex: none; width: 16px; height: 16px; color: var(--gray-light); }
.ana-satir .ara-giris,
.ana-satir .ai-cubuk {
  flex: 1; min-width: 0; padding: 0; height: 100%;
  border: none; background: transparent; outline: none; box-shadow: none;
  /* Genel input kuralı cam veriyor; kutunun içinde ikinci bir hap
     görünüyordu. İçerideki alan tamamen şeffaf. */
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-family: inherit; font-size: var(--fs-sm); color: var(--ink);
}
.ana-satir .ara-giris::placeholder,
.ana-satir .ai-cubuk::placeholder { color: var(--gray-light); }
/* Yazdırma rozeti satırın en sağında, kendi genişliğinde. */
.ana-satir .yaz-chip { flex: none; margin-left: 0; height: 42px; border-radius: 999px; }

@media (max-width: 1100px) {
  .ana-satir { flex-wrap: wrap; }
  .ana-baslik { flex: 1 1 100%; }
}

/* ============================================================
   ANASAYFA KARTLARI — finans (sarı) · stok (turuncu) · hızlı işlemler
   ============================================================
   Genişlik oranı 0.92 / 1.86 / 1: ortadaki kart üç rakam taşıdığı için
   en geniş, yanlar dengeli. Kartlar aynı satırda ve aynı yükseklikte.
   ============================================================ */
.ana-kartlar {
  display: grid;
  grid-template-columns: 0.92fr 1.86fr 1fr;
  gap: var(--sp-4);
  align-items: stretch;
}
@media (max-width: 1200px) {
  .ana-kartlar { grid-template-columns: 1fr 1fr; }
  /* 3 kart 2 sütuna girince üçüncü (Hızlı İşlemler) tek başına alt satıra
     düşüp yanında boş bir hücre bırakıyordu. Tam genişlik alsın — zaten
     içindeki düğme ızgarası kendi genişliğine göre yeniden diziliyor. */
  .ana-kartlar .ak-yayilan { grid-column: 1 / -1; }
}
@media (max-width: 760px)  { .ana-kartlar { grid-template-columns: 1fr; } }
/* JS'in doldurduğu iki kap ızgarada kendi hücresini kaplasın. */
.ana-kartlar > div { display: flex; min-width: 0; }
.ana-kartlar > div > .ak { flex: 1; }

/* ANASAYFA KARTLARININ TEK ORTAK ZEMİNİ (kullanıcının kararı, 2026-08-26)
   ============================================================
   Renk kimliği yok: finans / stok / hızlı işlemler / alt listeler
   hepsi AYNI açık nötr camı kullanır, tek fark içerik. Gölge yok,
   yazı krem zemindeki gibi koyu (--ink).

   KENARLIK VAR (kullanıcının kararı, 2026-09-05). Eskiden yoktu:
   kartlar zeminden yalnızca camın açıklığıyla ayrılıyordu. Zemin
   açılınca (duvar fotoğrafı kalktı) o fark yetmez oldu. */
.ak {
  position: relative;
  display: flex; flex-direction: column;
  padding: 16px 20px; border-radius: var(--radius-xl);
  min-width: 0;
  border: 1px solid var(--line);
  /* Liquid Glass — diğer yüzeylerle aynı reçete. Nokta deseni
     kaldırıldı (kullanıcının kararı, 2026-09-12). */
  background-color: rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: blur(6px) saturate(1.45);
  backdrop-filter: blur(6px) saturate(1.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  color: var(--ink);
}
/* Alt-kart öğeleri (Gönderilmeye Hazır / Eksik Stok / Bugünkü Hareketler):
   aynı zemin, biraz daha küçük köşe. */
.ak-duz { border-radius: var(--radius); }

.ak-bas {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-3);
}
.ak-bas h2 {
  margin: 0; font-size: var(--fs-2xl); font-weight: 500; letter-spacing: -.01em;
  color: inherit; white-space: nowrap;
}
/* Uzun başlıklar (ör. "Gönderilmeye Hazır Ürünler") dar kartta nowrap ile
   köşedeki ok düğmesini kart dışına, viewport'un dışına itiyordu — tek
   satıra sıkıştırma dar ekranda vazgeçiliyor, iki satıra sarsın. */
@media (max-width: 480px) {
  .ak-bas h2 { white-space: normal; }
}
/* .screen h2 küçük mavi bir çentik taşıyor; renkli kartlarda o çentiğin
   anlamı yok ve zeminle çakışıyor. */
.ak-bas h2::before { content: none; }
/* Köşedeki ok: "bu kartın tam sayfası" düğmesi — chevron-link, buton değil. */
.ak-git {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid rgba(20, 20, 15, 0.18); border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
  transition: background .15s ease-out;
}
.ak-git:hover { background: rgba(20, 20, 15, 0.08); }
.ak-git svg { width: 14px; height: 14px; }

.ak-kalem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ak-lbl { font-size: var(--fs-xs); font-weight: 500; opacity: .78; }
.ak-val {
  font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ak-ayrac { height: 1px; background: rgba(20, 20, 15, 0.14); margin: 12px 0; }

/* Stok kartının başlığında maliyet sağa yaslı duruyor. */
.ak-maliyet {
  flex: 1; display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; min-width: 0; text-align: right;
}
.ak-maliyet .ak-lbl { font-size: var(--fs-sm); }
.ak-maliyet .ak-val { font-size: var(--fs-4xl); }
/* Çok dar ekranda "Stok Durumu" başlığı + sağa yaslı maliyet bloğu aynı
   satırda sıkışınca "Toplam Stok Maliyeti" etiketi üç satıra bölünüyordu.
   DOM sırası h2 → maliyet → git-düğmesi; düğmeyi başlığın yanında tutmak
   için flex-direction DEĞİL, flex-wrap + maliyete %100 taban genişliği
   kullanılıyor — böylece h2 ve ok düğmesi ilk satırda kalır, maliyet
   bloğu kendiliğinden alt satıra düşüp tam genişliği alır. */
@media (max-width: 420px) {
  .ak-turuncu .ak-bas { flex-wrap: wrap; row-gap: 8px; }
  .ak-turuncu .ak-maliyet { flex: 1 1 100%; align-items: flex-start; text-align: left; order: 3; }
  .ak-turuncu .ak-git { order: 2; }
}

/* Stok kartında rakam şeridi başlıktan biraz daha uzakta dursun:
   maliyet büyüdüğü için ikisi birbirine yapışıyordu. */
.ak-turuncu .ak-ayrac { margin-top: 22px; }
.ak-turuncu .ak-sutunlar { padding-top: 6px; }

.ak-sutunlar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4); flex: 1;
}
.ak-sut { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ak-sut .ak-lbl { font-size: var(--fs-2xs); }
.ak-sayi {
  font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
/* Rakamın altındaki renk çizgisi, alttaki anahtarın karşılığı. */
.ak-cizgi { display: block; height: 3px; border-radius: 999px; width: 72%; margin-top: 4px; }
.ak-cizgi-ok     { background: #2E7D32; }
.ak-cizgi-kritik { background: #8A6D00; }
.ak-cizgi-yok    { background: #C62828; }

.ak-anahtar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 14px; margin-top: var(--sp-3);
  font-size: var(--fs-2xs); opacity: .82;
}
.ak-nokta { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-right: -8px; }
.ak-ok     { background: #2E7D32; }
.ak-kritik { background: #8A6D00; }
.ak-yok    { background: #C62828; }
.ak-koyu   { background: currentColor; }
.ak-soluk  { background: currentColor; opacity: .45; }

/* Hızlı işlemler: iki sütun, çerçeveli düğmeler. */
.hizli-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; flex: 1; align-content: center; }
/* Hap biçimli, saydam, ince çerçeveli — kartın degradesi içlerinden
   geçiyor, kendi dolguları yok. */
.hizli-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 15px; min-width: 0;
  border: 1px solid rgba(20, 20, 15, 0.18); border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 400;
  letter-spacing: -.2px; text-align: left;
  transition: background .15s ease-out, border-color .15s ease-out;
}
.hizli-btn:hover { background: rgba(20, 20, 15, .08); border-color: rgba(20, 20, 15, 0.32); }
.hizli-btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.hizli-btn svg { flex: none; width: 17px; height: 17px; color: var(--ink); opacity: .9; }
/* "Bekleyen Siparişler" iki sütuna sığmıyordu, üç noktayla kesiliyordu.
   Kesmek yerine sarıyor; düğme yüksekliği ızgarada eşitleniyor. */
.hizli-btn span { min-width: 0; white-space: normal; line-height: 1.25; }
.hizli-izgara .hizli-btn { align-items: center; min-height: 40px; }
@media (max-width: 560px) { .hizli-izgara { grid-template-columns: 1fr; } }

/* ============================================================
   KAYDIRMA ÇUBUKLARI
   ============================================================
   Tarayıcının varsayılan çubuğu bu tasarımın içinde yabancı duruyordu:
   kalın, gri, kartın yuvarlak köşesine dayanıyor.

   Yerine ince ve renksiz bir çubuk: ray görünmüyor, tutamak zeminin
   kendi mürekkep tonundan ve yalnızca üzerine gelince koyulaşıyor.

   YALNIZCA `::-webkit-scrollbar` kullanılıyor. Standart
   `scrollbar-width`/`scrollbar-color` de yazılmıştı ama ÖLÇTÜM:
   yeni Chrome'da standart özellik varsa webkit kuralları TAMAMEN yok
   sayılıyor — çubuk yine yerleşik gri hâlinde, ok düğmeleriyle birlikte
   çiziliyordu. İkisi bir arada olmuyor; hedef tarayıcı Chrome olduğu
   için webkit tarafı bırakıldı.
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
/* Uçlardaki ok düğmeleri: bu tasarımda karşılığı yok. */
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(20, 20, 15, 0.18);
  border-radius: 999px;
  /* Saydam kenarlık + background-clip: tutamak 4px kalır ve raya
     yapışmaz; çubuğun kendisi 10px olduğu için tıklama hedefi büyük
     kalırken görünen şerit ince oluyor. */
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(20, 20, 15, 0.34); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Kart içindeki kaydırma alanları: çubuk kartın yuvarlak köşesine
   dayanmasın diye sağdan biraz boşluk. */
.ana-uclu .table-wrap { padding-right: 4px; }

/* Hazır ürün satırında ürünün altındaki müşteri adı. */
.liste-ad { display: flex; flex-direction: column; gap: 1px; }
.liste-alt {
  font-size: var(--fs-2xs); font-weight: 400; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Çek: fotoğraftan okuma ---------- */
/* Okuma kutusu formun BAŞINDA duruyor: kullanıcı elle doldurmaya
   başlamadan önce fotoğrafı görsün. */
.cek-oku-kutu {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
  background: var(--accent-soft);
}

/* Fotoğraftan gelen alan işaretli: kullanıcı neyi kontrol edeceğini
   bilsin. Renk değil KENAR kullanılıyor — renk körlüğünde de görünsün. */
input.okunan, select.okunan {
  border-left: 3px solid var(--ok);
}

.uyari-kutu {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: var(--fs-sm);
}

/* Karekodda birden fazla numara çıktığında seçim düğmeleri */
[data-karekod-no].secili {
  border-color: var(--ok);
  color: var(--ok);
  font-weight: 600;
}


/* ============================================================
   SONRADAN GELEN ÖZELLİKLERİN STİLLERİ
   ============================================================
   2026-09-05: arayüz nokta desenli sürüme geri döndü (kullanıcının
   kararı). O günden sonra gelen ÖZELLİKLER duruyor — giriş/kayıt
   ekranı, ürün fotoğrafı, "Diğer İşlemler" menüsü, cari yaşlandırma,
   etiket önizlemesi… Aşağıdaki kurallar onlara ait; tasarım değil
   işlev taşıyorlar, o yüzden geri alınmadılar.
   ============================================================ */
/* İçeriğin ÜSTÜNE binen yüzeyler opak kalıyor: altlarındaki yazı
   yarı saydamlıktan okunmaz hâle geliyordu. */
.modal, .ac-dropdown, .nav-menu, .scanner-box, .login-box, .ara-sonuc, .head-more-menu {
  background: var(--yuzey-opak);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}

/* ---------- Giris / Kayit / Sifre: uc ayri akis ----------
   Ucu de ayni kutuda ama AYRI panel. Gecis kisa ve tek yonlu: ileri
   giderken saga dogru, geri donerken sola dogru kayar. Kutu yuksekligi
   panelle birlikte yumusak degisiyor, sayfa ziplamiyor. */
.auth-panels { position: relative; }

.auth-panel { display: block; }

.auth-panel.hidden { display: none; }

.auth-panel input { width: 100%; }

.auth-panel.gelir-ileri { animation: authIleri .26s var(--ease) both; }

.auth-panel.gelir-geri  { animation: authGeri  .26s var(--ease) both; }

/* Kutunun kendisi de boyu degisirken yumusak: panel degisince yukseklik
   JS ile olculup gecis veriliyor (bkz. app.js authGoster). */
.auth-box { transition: height .26s var(--ease); }

.auth-ayrac {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-soft); font-size: var(--fs-xs); margin: var(--sp-4) 0 var(--sp-2);
}

.auth-ayrac::before, .auth-ayrac::after {
  content: ''; flex: 1; height: 1px; background: rgba(29,29,31,.10);
}

.auth-demo { display: flex; align-items: center; justify-content: center; gap: 8px; }

.auth-demo .bi { width: 16px; height: 16px; flex: none; }

.auth-ipucu { color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.5; margin: 10px 2px 0; }

.auth-aciklama { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; margin: 0 0 var(--sp-4); }

.auth-alt { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: var(--sp-4); }

.auth-nokta { color: var(--ink-soft); }

.auth-link {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  color: var(--ink-soft); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  border-radius: var(--radius-sm);
}

.auth-link:hover { color: var(--ink); }

.auth-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sifre kurallari: saglandikca isaretlenir. */
.pw-kural { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: 6px; }

.pw-kural li {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--ink-soft);
  transition: color .2s var(--ease);
}

.pw-im {
  flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid rgba(29,29,31,.22); position: relative;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}

.pw-kural li.ok { color: var(--ok, #1d7a33); }

.pw-kural li.ok .pw-im { background: var(--ok, #1d7a33); border-color: var(--ok, #1d7a33); }

.pw-kural li.ok .pw-im::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

.pw-esles { font-size: var(--fs-xs); font-weight: 600; margin: -6px 2px var(--sp-4); min-height: 16px; }

.pw-esles.olur { color: var(--ok, #1d7a33); }

.pw-esles.olmaz { color: var(--warn); }

.auth-onay { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; margin-bottom: var(--sp-2); }

.auth-onay input { width: auto; margin-top: 2px; flex: none; }

/* DEMO MODU rozeti — uygulama icinde ust barda. */
.demo-rozet {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--amber-bg); color: var(--amber-ink);
  border-radius: 999px; padding: 4px 11px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {

  .auth-panel.gelir-ileri, .auth-panel.gelir-geri { animation: none; }

  .auth-box { transition: none; }
}

/* Masaüstü dikey ray dar (88px); "b" işareti orada, tam wordmark
   telefon/tablet üst barında (bkz. aşağıdaki @media (min-width: 821px)). */
.brand-logo-mark { display: none; }

@media (prefers-reduced-motion: reduce) {

  .ac-dropdown, .head-more-menu { animation: none; }
}

/* Etiket yazı tipi Ubuntu (kullanıcı kararı 2026-09-02). Yedek zincir
   kasıtlı: font yüklenmezse etiket fontsuz kalmasın. */
.label .l-firma { font-family: 'Ubuntu', 'Ubuntu Sans', -apple-system, Arial, sans-serif; font-weight: 700; }

.label .l-kod { font-family: 'Ubuntu', 'Ubuntu Sans', -apple-system, Arial, sans-serif; font-weight: 700; line-height: 1.05; }

/* Liste fiyatı — showroom etiketinde müşterinin baktığı satır, koddan
   daha kalın. Fiyat yoksa öğe hiç basılmaz (app.js), boş yer kalmaz. */
.label .l-fiyat { font-family: 'Ubuntu', 'Ubuntu Sans', -apple-system, Arial, sans-serif; font-weight: 700; line-height: 1.05; white-space: nowrap; }

/* ---------- Ekran başlığındaki "Diğer İşlemler" menüsü ----------
   Nadiren kullanılan (toplu/Excel) işlemleri birincil aksiyonun
   gölgesinden çıkarmak için: <details> — JS'siz açılır/kapanır,
   klavyeyle de çalışır. app.js sadece dışarı tıklayınca veya içindeki
   bir düğmeye basılınca kapatıyor (id'ler ve click handler'ları
   değişmedi, sadece bu menünün içine taşındılar). */
.head-more { position: relative; }

.head-more .head-more-caret { transition: transform .16s var(--ease); }

.head-more.acik .head-more-trigger .head-more-caret { transform: rotate(180deg); }

.head-more-menu {
  /* background/border/box-shadow: .modal, .ac-dropdown, ... grubundan
     opak olarak geliyor (satır ~211) — altındaki içerik saydamlıktan
     okunmaz olmasın. */
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  display: flex; flex-direction: column; gap: 2px;
  border-radius: var(--radius-lg);
  padding: 6px; min-width: 260px;
  animation: dropIn .2s var(--ease); transform-origin: top right;
}

.head-more-menu .btn {
  width: 100%; justify-content: flex-start; background: transparent;
  border: none; box-shadow: none; font-weight: 500;
}

.head-more-menu .btn:hover { background: rgba(20, 20, 15, .06); transform: none; }

/* "Öneri" bloğu (ör. Tedarikçi ekranındaki eksik-ürün önerileri): henüz
   taslağa eklenmemiş, ikincil bir liste — taslak tablosuyla karışmasın
   diye kesikli kenar + hafif dolgu ile geri planda tutuluyor. */
.table-wrap-oneri {
  background: rgba(20, 20, 15, 0.035);
  border: 1px dashed var(--line-strong);
  padding: var(--sp-2);
}

/* Satır silme: tablo tamamen yeniden çizildiği için yükseklik değil,
   sadece hücre içeriği söner — kaldırma tıklamasını kısaca onaylar. */
tbody tr.row-exit td { transition: opacity .15s ease-out, transform .15s ease-out; opacity: 0; transform: translateX(6px); }

/* Alt-seviye filtre şeridi (örn. Bekleyenler'deki "durum" filtresi):
   üstündeki görünüm sekmesiyle (Müşteri/Ürün/Tedarikçi Bazlı) aynı
   .tab-btn bileşenini kullanıyor ama kavramsal olarak ikincil bir
   filtre — cam/kabarık gövdeyi kaldırıp düz, küçük bir çip şeridine
   indirgiyoruz ki iki seviye birbirine karışmasın. data-status ve
   click handler'ları (app.js) dokunulmadı. */
.tabs-sub {
  background: transparent; border: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0; gap: 6px;
}

.tabs-sub .tab-btn {
  padding: 6px 14px; font-size: var(--fs-xs); font-weight: 600; border: none;
  background: rgba(20, 20, 15, .05); color: var(--ink-soft);
}

.tabs-sub .tab-btn:hover { background: rgba(20, 20, 15, .09); color: var(--ink); }

.tabs-sub .tab-btn.active {
  background: var(--accent-soft); color: var(--accent-dark);
  font-weight: 700; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}

.brand-logo-wide { display: block; height: 32px; }

/* ---------- Performans rozeti ----------
   "Borç devir günü": bu müşteri sürekli kaç günlük mal parasını üstünde
   tutuyor. Aramada, cari listesinde ve çıkış onayında AYNI görünür —
   üç ayrı gösterge yerine tek dil. Renk tek başına anlam taşımıyor,
   yanında hep sayı var (renk körlüğü). */
.perf-rozet {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: var(--fs-2xs); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  border: 1px solid transparent;
}

.perf-rozet::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

.perf-yesil   { color: var(--ok);        border-color: color-mix(in srgb, var(--ok) 30%, transparent); }

.perf-sari    { color: var(--amber);     border-color: color-mix(in srgb, var(--amber) 30%, transparent); }

.perf-kirmizi { color: var(--warn);      border-color: color-mix(in srgb, var(--warn) 30%, transparent); }

/* ---------- Durum özeti (müşteri VE tedarikçi defteri) ---------- */
.perf-panel { margin: 0 0 14px; }

.perf-panel-bos { padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }

/* Durum özeti — dört terimli kutu yerine düz cümleler.
   Rakamlar aynı; değişen, ne anlama geldiklerinin YAZIYOR olması. */
/* Izgara: tam genişlik şeritler yerine küçük kartlar. Yedi şerit alt alta
   dizilince panel ekranı yiyordu ve göz nereye bakacağını bilemiyordu. */
.do-liste {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}

.do-satir {
  display: flex; flex-direction: column; gap: 3px; height: 100%;
  padding: 11px 13px; border-radius: var(--radius-sm);
  border-left: 3px solid var(--line); background: var(--yuzey);
}

.do-bas { display: block; font-weight: 600; line-height: 1.3; }

.do-alt {
  display: block; margin-top: auto;
  font-size: var(--fs-2xs); color: var(--ink-soft); line-height: 1.4;
}

.do-iyi  { border-left-color: var(--ok);       background: var(--ok-bg); }

.do-orta { border-left-color: var(--amber);    background: var(--amber-bg); }

.do-kotu { border-left-color: var(--warn);     background: var(--warn-bg); }

.do-notr { border-left-color: var(--line);     background: var(--yuzey); }

.do-not {
  margin: var(--sp-2) 0 0; font-size: var(--fs-2xs);
  color: var(--ink-soft); line-height: 1.45;
}

.do-cubuk-bas {
  margin: 0 0 4px; font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .04em; color: var(--ink-soft);
}

/* Borç yaşlandırma çubuğu: soldan sağa taze → eski. */
.perf-yas { margin-top: 10px; }

.pyas-bar {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--line);
}

.pyas-parca { display: block; height: 100%; }

.pyas-a { background: var(--ok); }

.pyas-b { background: var(--amber-fill); }

.pyas-c { background: #ff6b35; }

.pyas-d { background: var(--warn); }

.pyas-etiket {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: 6px; font-size: var(--fs-2xs); color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.pyas-eski { color: var(--warn); }

.perf-not { margin: 8px 0 0; }

/* ============================================================
   ÜRÜN FOTOĞRAFI
   SABİT ölçüde KARE (kullanıcının kararı, 2026-09-09): kabın genişliğine
   göre büyüyen kare ilk denemede çok iri oldu; sabit genişlik+yükseklik
   yerine yalnızca height verilince de kart yatay dikdörtgene döndü.
   İkisi de yanlıştı — 92×92 sabit KARE, kartın ortasında duruyor
   (.urun-karti flex-column'da varsayılan stretch'i align-self ile kesiyor).
   Fotoğraf inince kart ZIPLAMIYOR (ölçü önceden sabit).
   ============================================================ */
.urun-foto {
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; align-self: center; flex: none;
  border-radius: 10px;
  background: var(--accent-soft); overflow: hidden;
  color: var(--ink-soft);
}
.urun-foto svg { width: 30px; height: 30px; }

/* KIRPMA YOK (Ürünler yeniden tasarım, 2026-09-10): `cover` ürünün
   burnunu/topuğunu kesiyordu. `contain` fotoğrafın TAMAMINI gösterir —
   farklı en-boy oranında iki yanda/üstte-altta boşluk kalır, kabul
   edilebilir (spec: "kırpma yok" kuralı doldurmaktan önce gelir). Grid
   kartında (`.urun-karti .urun-foto`) kap KARE'ye genişliyor — bkz. altta. */
.urun-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }

.urun-foto-yok { border: 1px dashed var(--line); background: transparent; opacity: .55; }

.urun-foto-detay {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 220px; margin: 8px 0 4px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--accent-soft); overflow: hidden;
  color: var(--ink-soft); text-align: center;
}

.urun-foto-detay img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.urun-foto-yukleniyor { font-size: 13px; }

.urun-foto-yok-buyuk { font-size: 12px; line-height: 1.8; }

.urun-foto-dugmeler { display: flex; gap: 8px; margin-bottom: 8px; }

/* Başlık satırındaki demo / lisans rozeti ve işletme adı. */
.ana-satir .ust-isletme-ad { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }

/* ============================================================
   ÜST ÜÇ KART — RENKLİ VE SAYDAM  (kullanıcının kararı, 2026-09-05)
   ============================================================
   Finansal Durum sarı, Stok Durumu turuncu, Hızlı İşlemler mavi.
   Renk `background-color`da DEĞİL, degradede: kartın nokta deseni ve
   bulanıklığı olduğu gibi duruyor, üstüne yalnızca renkli bir cam
   ekleniyor. Alfa düşük (.10–.34) — opak olmayacak, altındaki desen
   ve zemin görünmeye devam edecek.

   Yazı üçünde de KOYU kalıyor (--ink ailesi): tonlar açık uçtan
   seçildi, beyaz yazı bu zeminlerde okunmuyor.
   ============================================================ */
.ak-sari, .ak-turuncu, .ak-yayilan {
  /* Nokta deseni kaldırıldı (kullanıcının kararı, 2026-09-12) —
     yalnızca renkli degrade kaldı. */
  background-image: linear-gradient(150deg, var(--kart-ic) 0%, var(--kart-dis) 100%);
  border-color: var(--kart-hat);
}
.ak-sari    { --kart-ic: rgba(255, 243, 77, 0.34); --kart-dis: rgba(232, 212, 0, 0.16);  --kart-hat: rgba(184, 168, 0, 0.30); }
.ak-turuncu { --kart-ic: rgba(255, 199, 158, 0.34); --kart-dis: rgba(248, 133, 60, 0.14); --kart-hat: rgba(214, 120, 55, 0.26); }
.ak-yayilan { --kart-ic: rgba(180, 178, 172, 0.30); --kart-dis: rgba(20, 20, 15, 0.10);  --kart-hat: rgba(20, 20, 15, 0.22); }

/* Parmakla kullanılan cihazda cam kapalı (bkz. `pointer: coarse`):
   orada `background` kısayolu bu degradeleri de siliyordu. Renk
   kalsın — yalnızca saydamlık gitsin. */
@media (pointer: coarse) {
  .ak-sari, .ak-turuncu, .ak-yayilan {
    background-image: linear-gradient(150deg, var(--kart-ic) 0%, var(--kart-dis) 100%);
    background-color: rgba(255, 255, 255, 0.9);
    background-attachment: scroll;
  }
}

/* ============================================================
   SAYI ANİMASYONU  (bkz. sayi-anim.js)
   ============================================================
   Her rakam kendi penceresinde kayıyor. Blur YALNIZCA hareket eden
   rakamda: kapta, kartta ya da çerçevede bulanıklık yok.
   `tabular-nums` şart — rakam genişlikleri eşit olmazsa pencere
   değişiminde yazı yatayda oynuyor.
   ============================================================ */
.sa-p {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  height: 1.2em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.sa-s { font-variant-numeric: tabular-nums; }
.sa-t {
  display: block;
  transform: translateY(0);
  transition: transform 420ms cubic-bezier(.22, .8, .25, 1);
}
.sa-t > span {
  display: block;
  height: 1.2em;
  line-height: 1.2;
  transition: filter 180ms ease;
}
/* Hareket eden ray: yukarı kayıyor, rakam kısa süre bulanıklaşıyor.
   Blur geçişi (180ms) kaymadan (420ms) kısa — rakam yerine otururken
   çoktan netleşmiş oluyor. */
.sa-t.sa-kayiyor {
  transform: translateY(-50%);
  will-change: transform;
}
.sa-t.sa-kayiyor > span { filter: blur(3px); }
.sa-t.sa-kayiyor { opacity: .92; }

@media (prefers-reduced-motion: reduce) {
  .sa-t { transition: none; }
  .sa-t.sa-kayiyor > span { filter: none; }
}

/* ============================================================
   ÜRÜN DÜZENLE — İLERİ ALANLAR  (Genel ERP, v68-v75)

   Ürüne özel ölçü birimi ve izleme bayrakları. İkisi de ÇOĞU ÜRÜNDE
   BOŞ KALACAK: ayakkabı toptancısının 416 ürününün hiçbirinde ayrı bir
   birim yok ve izleme kapalı.

   Bu yüzden birim bloğu <details> içinde kapalı duruyor. Açıkta
   olsaydı her ürün düzenlemede dört boş kutu görünür ve asıl alanları
   (stok, fiyat) aşağı iterdi — spec §16, TASARIM.md'nin sadelik kuralı.

   İzleme bloğu ise HİÇ ÇİZİLMİYOR: işletme o özelliği açmamışsa
   `openEditProduct` bu HTML'i hiç üretmiyor. Gizlemek yetmezdi —
   kullanılmayan özellik var olmamalı.
   ============================================================ */
.ep-ileri {
  margin-top: var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .5);
  padding: 0 var(--sp-4);
}
.ep-ileri > summary {
  padding: 12px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--fs-sm); color: var(--ink);
}
.ep-ileri > summary::-webkit-details-marker { display: none; }
/* Açık/kapalı göstergesi: metnin önünde küçük bir üçgen. Ayrı bir ikon
   dosyası yüklemeye değmeyecek kadar küçük bir işaret. */
.ep-ileri > summary::before {
  content: '›'; display: inline-block; margin-right: 8px;
  color: var(--ink-soft); transition: transform .16s var(--ease);
}
.ep-ileri[open] > summary::before { transform: rotate(90deg); }
.ep-ileri[open] > summary { border-bottom: 1px solid var(--line); }
.ep-ileri > *:not(summary) { padding-bottom: var(--sp-3); }

.ep-izleme {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* ============================================================
   AYARLAR > LİSTELER  (Genel ERP, v69-v70)

   Sınıflandırma grupları ve varyant eksenleri. İkisi de aynı şekil:
   bir başlık, altında değer hapları, en altta ekleme satırı.

   DEĞERLER HAP OLARAK: bir grupta yirmi renk olabilir. Alt alta liste
   olsaydı ekran uzar, kullanıcı aradığını bulmak için kaydırırdı.
   Yan yana haplar tek bakışta okunuyor.
   ============================================================ */
.liste-grup {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  background: rgba(255, 255, 255, .5);
}
.liste-grup-bas {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); margin-bottom: 10px;
}
/* Silme düğmesi sağa yaslanıyor: başlıkla arasına giren boşluk,
   yanlışlıkla basmayı zorlaştırıyor. */
.liste-grup-bas .liste-baslik-sil { margin-left: auto; }

.liste-degerler { display: flex; flex-wrap: wrap; gap: 6px; }
.liste-deger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--ink);
  font-size: var(--fs-2xs); font-weight: 600;
}
/* Kaç üründe kullanıldığı. Sayı görünmezse kullanıcı silmeye çalışıp
   reddedilir ve nedenini anlamaz. */
.liste-deger-sayi {
  font-weight: 400; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.liste-deger-sil {
  border: 0; background: none; cursor: pointer; padding: 0 0 0 2px;
  color: var(--ink-faint); font-size: 15px; line-height: 1;
}
.liste-deger-sil:hover { color: var(--ink); }

.liste-ekle { display: flex; gap: 8px; margin-top: 10px; }
.liste-ekle input { margin: 0; flex: 1; min-width: 0; }

/* Model bilgileri — ürün kartındaki "model ve varyant" bölümünün ALT
   yarısı. Üstteki varyant seçimleri yalnızca o ürünü, buradakiler
   modelin BÜTÜN çeşitlerini etkiliyor. Çizgi bu ayrımı gösteriyor;
   ayrım görünmezse kullanıcı bir ürünün rengini değiştirdiğini sanıp
   on beş ürünün kategorisini değiştirir. */
.ep-model-blok {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px dashed var(--line-strong);
}
/* Çoklu seçim (sezon gibi) — kutular alt alta değil yan yana aksın,
   beş sezonluk bir liste modalı uzatmasın. */
.ep-coklu { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ep-coklu .chk-line { margin: 0; }

/* ============================================================
   ÜRÜN LİSTESİ — MODELE GÖRE GRUPLAMA  (Genel ERP, v69)

   Varsayılan KAPALI; açıkken aynı kodun çeşitleri tek başlık altında
   toplanıyor ve başlıkta modelin TOPLAM stoğu yazıyor.

   Başlık kartı GRID'İN İÇİNDE, tüm satırı kaplayan bir kap (bkz.
   .urun-grup-baslik grid-column) — ayrı bir yerde dursaydı hangi
   ürünlerin altında olduğu belirsizleşirdi.
   ============================================================ */
.urun-grup-anahtar {
  margin: 10px 0 0; font-weight: 600; font-size: var(--fs-sm);
  text-transform: none; letter-spacing: 0; color: var(--ink);
}
.urun-grup-baslik {
  grid-column: 1 / -1;
  background: var(--accent-soft);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  padding: 10px var(--sp-4);
}
.urun-grup-alt {
  color: var(--ink-soft); font-weight: 400; margin-left: 10px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   ÜRÜN LİSTESİ — GRİD  (yeniden tasarım, 2026-09-10)

   ADAPTİF KOLON — sabit sayı YOK. `auto-fill` + `minmax`: kart asla
   190px'in altına düşmez, ekran genişledikçe (tablet/geniş masaüstü)
   otomatik yeni kolon açılır — 4'te tavan yok, boş alan bırakmak yerine
   5-6 karta kadar büyüyebilir. Telefonda (dar ekran) SABİT 2 kolon
   (spec §2: "iPhone: 2 sütun") — auto-fill orada 1'e düşebilirdi.

   Kart TAMAMEN tıklanabilir → Ürün Düzenle açılır (bkz. app.js
   renderProducts): eskiden yalnızca kod (mavi link) ve aksiyon
   ikonları tıklanabilirdi. `.uk-kod`/`.uk-renk` artık düz metin.
   ============================================================ */
.urun-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
@media (min-width: 560px) {
  .urun-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* LİSTE görünümü (spec §15 — grid varsayılan, liste seçilebilir kalıyor):
   tek sütun, satır başına küçük foto + bilgiler yan yana — iOS'taki
   `UrunSatiri` ile aynı fikir. */
.urun-liste { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.ul-satir {
  display: flex; align-items: center; gap: var(--sp-3);
  border: 1px solid var(--glass-brd); border-radius: var(--radius-sm);
  background: var(--glass-2); padding: 10px var(--sp-3);
  cursor: pointer; position: relative;
}
.ul-satir .urun-foto { width: 44px; height: 44px; border-radius: 8px; }
.ul-satir .uk-ck { position: static; background: none; border: 0; padding: 0; flex: none; }
.ul-gövde { min-width: 0; flex: 1; }
.ul-ust { display: flex; align-items: baseline; gap: 8px; }
.ul-kod { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
.ul-renk { color: var(--ink-soft); font-size: var(--fs-2xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ul-alt { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-size: var(--fs-2xs); color: var(--ink-soft); }
.ul-sag { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.ul-aksiyon { display: flex; gap: 4px; flex: none; }

/* Görünüm/filtre/sıralama çubuğu — kolay ulaşılabilir, gereksiz büyük
   değil (spec §7-8, TASARIM.md §6 "Sekmeler" ile aynı dil: aktif SAYDAM
   cam, pasif düz metin/hap). */
.urun-arac-cubugu {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.urun-filtre-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.urun-filtre-chip {
  border: 1px solid var(--glass-brd); background: var(--glass);
  border-radius: 999px; padding: 6px 14px; font-size: var(--fs-2xs); font-weight: 600;
  color: var(--ink-soft); cursor: pointer; white-space: nowrap;
}
.urun-filtre-chip.active {
  background: var(--accent-soft); border-color: var(--accent-dark);
  color: var(--accent-dark);
}
.urun-siralama-sec { margin-left: auto; min-width: 150px; }
.urun-gorunum-degistir { display: flex; gap: 2px; flex: none; }
.urun-gorunum-degistir button {
  border: 1px solid var(--glass-brd); background: var(--glass);
  border-radius: 8px; padding: 6px 9px; cursor: pointer; color: var(--ink-soft);
  display: flex; align-items: center;
}
.urun-gorunum-degistir button.active { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-dark); }
.urun-gorunum-degistir .bi { width: 16px; height: 16px; }

.urun-tumunu-sec {
  margin: var(--sp-3) 0 0;
  font-weight: 600; font-size: var(--fs-sm);
  text-transform: none; letter-spacing: 0; color: var(--ink);
}

.urun-karti {
  display: flex; flex-direction: column;
  border: 1px solid var(--glass-brd); border-radius: var(--radius);
  background: var(--glass-2);
  padding: var(--sp-3);
  position: relative;
  cursor: pointer;
}
/* Dış gölge YOK (TASARIM.md kırmızı çizgi #7) — ayrım cam+kenarlıkta
   zaten var; dokunuşta yalnızca hafif bir yükselme hissi. */
.urun-karti:hover { border-color: var(--line-strong); }
.urun-karti:active { transform: scale(.98); }
/* Grid kartındaki foto KAP genişliğine göre KARE (spec §3-A) — sabit
   92px değil, kolon genişliği ne olursa (190px'ten geniş masaüstünde
   daha da büyür) foto onunla birlikte büyür/küçülür. */
.urun-karti .urun-foto { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); }
.uk-ck {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  width: auto; height: auto; margin: 0;
  background: var(--glass); border: 1px solid var(--glass-brd);
  border-radius: 6px; padding: 2px;
}
.uk-ck input { display: block; margin: 0; }
/* B) ÜRÜN KODU + RENK — kartın en önemli metni, TEK satırda (spec §3-B).
   Artık link DEĞİL: kart tamamen tıklanabilir, ayrıca link olmasına
   gerek yok — iki farklı tıklama hedefi kafa karıştırırdı. */
.uk-baslik {
  margin-top: 10px; font-weight: 700; font-size: var(--fs-md); color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.25;
}
.uk-baslik b { font-weight: 700; }
.uk-baslik .uk-renk-parca { color: var(--ink-soft); font-weight: 600; }
/* C) LİSTE FİYATI — kod/renkin HEMEN ALTINDA, rozet/köşe etiketi DEĞİL
   (spec §3-C). */
.uk-fiyat { margin-top: 3px; font-size: var(--fs-lg); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.uk-fiyat .tag { margin-left: 6px; vertical-align: middle; }
/* F) STOK — üç renk kademesi: yok/kritik/normal (spec §3-F, §12). */
.uk-stok { margin-top: 6px; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 5px; }
.uk-stok::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.uk-stok.stok-dusuk { color: var(--turuncu-ink); }
/* D) TEDARİKÇİ — barkod kadar küçük/önemsiz DEĞİL, ikinci seviye önemli
   bilgi (spec §3-D). */
.uk-tedarikci { margin-top: 3px; font-size: var(--fs-sm); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* E) BARKOD — görünür ama en sessiz seviye, ikonla (spec §3-E). */
.uk-barkod { margin-top: 5px; font-size: var(--fs-2xs); color: var(--ink-faint); display: flex; align-items: center; gap: 4px; }
.uk-barkod .bi { width: 12px; height: 12px; flex: none; }
.uk-satir {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 6px; font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.uk-satir.mono { justify-content: flex-start; color: var(--ink-soft); }
.uk-aksiyon { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); justify-content: flex-end; }

/* Kritik stok — rozet ve liste üstündeki özet (spec §12).
   Özet YALNIZCA kritik ürün varsa çiziliyor; "0 ürün kritik" yazan
   kalıcı bir satır, kullanılmayan bir özelliği ekranda tutmak olurdu. */
.tag-kritik {
  background: var(--turuncu-grad);
  color: var(--turuncu-ink);
  border: 0;
}
.urun-kritik-ozet {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: var(--sp-3);
  padding: 10px var(--sp-4);
  border-radius: var(--radius);
  background: var(--turuncu-grad);
  color: var(--turuncu-ink);
  font-size: var(--fs-sm);
}
.urun-kritik-ozet .bi { width: 18px; height: 18px; flex: none; }

/* Lot / SKT partisi ve seri numarası ekleme satırı. Alanlar yan yana:
   lot, tarih ve miktar birlikte girilen tek bir şey; alt alta
   olsalardı bir parti eklemek üç satır kaydırma isterdi. */
.ep-parti-ekle { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ep-parti-ekle input { margin: 0; flex: 1; min-width: 110px; }
/* Toplam tutmuyor uyarısı — sessizce düzeltmek yerine söyleniyor. */
.ep-parti-uyari { color: var(--turuncu-ink); }

/* ============================================================
   ÜRETİM  (Genel ERP, v73 · spec §8)

   Rozet ve plan penceresi. İşletme üretim takibini açmadıysa bu
   sınıfların hiçbiri ekrana çıkmıyor — kod HTML'i hiç üretmiyor.
   ============================================================ */
.tag-uretim {
  background: var(--sari-grad);
  color: var(--sari-ink);
  border: 0;
}
/* Üç sayı yan yana: kalan sipariş, stok, eksik. Alt alta olsalardı
   kullanıcı üçünü karşılaştırmak için göz gezdirmek zorunda kalırdı;
   asıl karar "stok yetmiyor" sayısına bakarak veriliyor. */
.uretim-ozet {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  margin: var(--sp-3) 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--line);
}
.uretim-ozet > div { display: flex; flex-direction: column; gap: 2px; }
.uretim-ozet .lbl {
  font-size: var(--fs-2xs); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em;
}
.uretim-ozet b { font-variant-numeric: tabular-nums; }

/* Depo kartının düğme sırası — ekleme ve transfer yan yana. */
.depo-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }


/* Üç adımlı yeni kullanıcı kurulumu */
.kurulum-ilerleme { display:flex; gap:7px; margin:0 0 18px; }
.kurulum-ilerleme span { height:5px; flex:1; border-radius:999px; background:rgba(29,29,31,.10); }
.kurulum-ilerleme span.aktif { background:var(--accent, #1d1d1f); }
.kurulum-ilerleme span.tamam { background:var(--ok-fill); }
#kurulum-govde h3 { margin-top:0; }
#kurulum-govde .field-hint { font-size:12px; color:var(--ink-soft); }