/* Terazi — sayfaya ozel stiller
 *
 * Genel tasarim sistemi ayri dosyalarda:
 *   01-token.css   belirtecler + uc tema
 *   02-kabuk.css   yerlesim, sol menu, ust bant
 *   03-bilesen.css buton, form, tablo, kart, modal, sekme
 *
 * Burada yalnizca tek bir ekrana ait kurallar kalir (giris ekrani, stok
 * yonetimi tablosu, rapor kutulari, depo kartlari vb.).
 */
/* ═══════════════ GIRIS EKRANI ═══════════════
 * Uygulamanin adi Terazi; giris ekrani o fikri tasir. Sol sahne markanin
 * kendisi: PIN'i tartan bir terazi. Her karakter sag kefeye bir agirlik
 * koyar, en kisa gecerli PIN uzunlugunda (4) kol dengeye gelir; dogrulanirken
 * sallanir, reddedilirse tutmaz. Hareketin anlami var — dekor degil.
 *
 * Sahne her temada koyu "murekkep" zemin: tonu temanin vurgusundan turetilir
 * (koyu/acik → lacivert, nane → yesil, bugday → kahve). Sag taraf formdur ve
 * temanin kendi yuzeylerini kullanir; acik temalarda koyu sahne + acik form
 * bilincli bir kontrast.
 *
 * JS yalniz #L uzerine --egim ve durum sinifi yazar (01-giris.js), hareket burada.
 * Eski surumdeki donen isik kureleri acik temalarda leke gibi duruyordu; buradaki
 * atmosfer yalniz koyu sahnenin icinde kalir, form tarafi duz ve temali.
 */
/* --murekkep, --terazi, --sahne-yazi, --sahne-soluk, --yay: 03-kabuk.css :root
   (sol menu de ayni degiskenleri kullaniyor — tek yerde tanimli). */
.login-wrap {
  --egim: -7deg;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(400px, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}

/* ── sahne ── */
.login-sahne {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-10) clamp(24px, 4vw, 56px);
  color: var(--sahne-yazi);
  background:
    radial-gradient(55% 50% at 70% 40%, color-mix(in oklab, var(--accent) 34%, transparent), transparent 72%),
    radial-gradient(45% 40% at 0% 100%, color-mix(in oklab, var(--accent2) 16%, transparent), transparent 70%),
    var(--murekkep);
  animation: lgSolma .6s var(--ease) backwards;
}
/* nokta izgara — olcek kagidi; kenarlara dogru kaybolur */
.login-sahne::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(75% 70% at 62% 45%, #000 30%, transparent 100%);
          mask-image: radial-gradient(75% 70% at 62% 45%, #000 30%, transparent 100%);
}
/* ince gren — duz dijital zemini kagit dokusuna yaklastirir */
.login-sahne::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .08;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.login-sahne-ust {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
}
.login-marka {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sahne-soluk);
}
.login-marka svg { width: 28px; height: 28px; color: var(--terazi); flex: none; }
.login-zaman { text-align: right; }
.login-clock {
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--sahne-yazi);
}
.login-tarih { margin-top: 6px; font-size: var(--fs-xs); letter-spacing: .04em; color: var(--sahne-soluk); }

/* ── terazi ── */
.login-terazi {
  position: absolute;
  z-index: 1;
  right: 2%;
  top: 50%;
  width: min(60%, 560px);
  transform: translateY(-56%);
  color: var(--terazi);
  overflow: visible;
}
.login-terazi .olcek line { stroke: currentColor; opacity: .28; }
.login-terazi .olcek .orta { opacity: .75; transition: opacity var(--dur-slow) var(--ease); }
.terazi-denge {
  fill: currentColor;
  stroke: none;
  font: 700 11px var(--font);
  letter-spacing: .3em;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.login-dengede:not(.login-hata):not(.login-tartiyor) .terazi-denge { opacity: 1; }
.login-dengede:not(.login-hata) .login-terazi .olcek .orta { opacity: 1; }

.terazi-kol {
  transform-origin: 260px 200px;
  transform: rotate(var(--egim));
  transition: transform .9s var(--yay);
  animation: lgTartiIlk 1.4s var(--yay) .25s backwards;
}
.terazi-kefe {
  transform: rotate(calc(var(--egim) * -1));
  transition: transform .9s var(--yay);
  animation: lgKefeIlk 1.4s var(--yay) .25s backwards;
}
.terazi-kefe-sol { transform-origin: 70px 200px; }
.terazi-kefe-sag { transform-origin: 450px 200px; }
.terazi-agirlik circle {
  opacity: 0;
  transform: translateY(-28px);
  transition: opacity .2s var(--ease), transform .5s var(--yay);
}
.terazi-agirlik circle.dolu { opacity: 1; transform: none; }

/* dogrulanirken sallanir */
.login-tartiyor .terazi-kol { animation: lgSallan .8s ease-in-out infinite alternate; }
.login-tartiyor .terazi-kefe { animation: lgKefeSallan .8s ease-in-out infinite alternate; }
/* reddedildi: tutmaz — kol devrilir, govde sarsilir */
.login-hata .terazi-kol { transform: rotate(11deg); }
.login-hata .terazi-kefe { transform: rotate(-11deg); }
.login-hata .terazi-sallanan { animation: lgSars .5s var(--ease); }

/* ── marka yazisi ── */
.login-sahne-alt { position: relative; z-index: 2; max-width: 36rem; }
.login-wm {
  margin: 0;
  padding-bottom: .08em;
  overflow: hidden;
  font-family: var(--font);
  font-size: clamp(64px, 9.5vw, 148px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.055em;
  color: var(--sahne-yazi);
}
.login-wm > span { display: inline-block; animation: lgYazi 1s cubic-bezier(.2, .8, .2, 1) .15s backwards; }
/* noktali i: govde x-yuksekliginde, nokta terazinin rengiyle yanar */
.login-wm .bi { position: relative; display: inline-block; width: .3em; height: .8em; margin-left: .04em; }
.login-wm .bi::before {
  content: '';
  position: absolute;
  left: .075em;
  bottom: 0;
  width: .15em;
  height: .54em;
  border-radius: .08em;
  background: currentColor;
}
.login-wm .bi::after {
  content: '';
  position: absolute;
  left: .045em;
  top: 0;
  width: .21em;
  height: .21em;
  border-radius: 50%;
  background: var(--terazi);
  box-shadow: 0 0 .4em color-mix(in oklab, var(--terazi) 70%, transparent);
}
.login-slogan {
  max-width: 26ch;
  margin: var(--sp-5) 0 0;
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--sahne-soluk);
  animation: lgYukari .7s var(--ease) .5s backwards;
}
.login-slogan em {
  font-style: normal;
  color: var(--sahne-yazi);
  background: linear-gradient(transparent 64%, color-mix(in oklab, var(--accent) 50%, transparent) 64%);
}

/* ── form ── */
.login-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: var(--sp-10) clamp(20px, 4vw, 44px);
}
.login-box > * { animation: lgYukari .55s var(--ease) backwards; }
.login-box > :nth-child(1) { animation-delay: .20s; }
.login-box > :nth-child(2) { animation-delay: .26s; }
.login-box > :nth-child(3) { animation-delay: .32s; }
.login-box > :nth-child(5) { animation-delay: .38s; }
.login-box > :nth-child(6) { animation-delay: .44s; }
.login-box > :nth-child(7) { animation-delay: .50s; }
.login-box > :nth-child(8) { animation-delay: .56s; }

.login-greet { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.login-baslik {
  margin: var(--sp-2) 0;
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--text-strong);
}
.login-aciklama { margin: 0 0 var(--sp-6); font-size: var(--fs-base); color: var(--muted); }

.login-box .err {
  display: none;
  margin: 0 0 var(--sp-4);
  padding: 10px 12px;
  border-left: 3px solid currentColor;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, currentColor 10%, transparent);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--red);
}
.login-box #le.show { display: block !important; }

.login-field { margin-bottom: var(--sp-4); }
.login-field label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-baslik);
  text-transform: uppercase;
  color: var(--muted);
}
.login-secim { position: relative; }
.login-secim::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.login-field select {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-md);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.login-field select:hover { border-color: var(--muted); }
.login-field select:focus { outline: none; border-color: var(--accent); box-shadow: var(--odak-ic); }

.login-pin-wrap { position: relative; }
.login-pin-wrap input {
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  padding: 0 58px 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--text-strong);
  font: inherit;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .4em;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.login-pin-wrap input::placeholder { color: var(--muted); opacity: .5; }
.login-pin-wrap input:hover { border-color: var(--muted); }
.login-pin-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: var(--odak-ic); }
.login-hata .login-pin-wrap input { border-color: var(--red); }
.login-dengede:not(.login-hata) .login-pin-wrap input { border-color: var(--accent); }

.login-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.login-eye:hover { color: var(--text); background: var(--card-hover); }
.login-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.login-eye svg { width: 20px; height: 20px; }
.login-eye .goz-kapali,
.login-eye[aria-pressed="true"] .goz-acik { display: none; }
.login-eye[aria-pressed="true"] .goz-kapali { display: block; }

.login-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  margin-top: var(--sp-5);
  border: 0;
  border-radius: var(--r-md);
  background: var(--accent-fill);
  color: var(--btn-text);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 30px -14px color-mix(in oklab, var(--accent-fill) 85%, transparent);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.login-btn svg { width: 18px; height: 18px; transition: transform var(--dur-slow) var(--yay); }
.login-btn:hover { filter: brightness(1.1); box-shadow: 0 16px 36px -14px var(--accent-fill); }
.login-btn:hover svg { transform: translateX(4px); }
.login-btn:active { transform: scale(.985); }
.login-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* dogrulanirken: isik suzmesi; ikinci tiklama ayni istegi tekrar gondermesin */
.login-tartiyor .login-btn { pointer-events: none; }
.login-tartiyor .login-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: lgIsik 1.1s var(--ease) infinite;
}

.login-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.login-foot svg { width: 14px; height: 14px; flex: none; }

@keyframes lgSolma { from { opacity: 0; } }
@keyframes lgYukari { from { opacity: 0; transform: translateY(10px); } }
@keyframes lgYazi { from { transform: translateY(105%); } }
@keyframes lgTartiIlk { from { transform: rotate(0deg); } }
@keyframes lgKefeIlk { from { transform: rotate(0deg); } }
@keyframes lgSallan { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes lgKefeSallan { from { transform: rotate(3deg); } to { transform: rotate(-3deg); } }
@keyframes lgSars { 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(3px); } }
@keyframes lgIsik { to { transform: translateX(100%); } }

/* ── telefon: sahne ustte bant, form alttan binen kart ── */
@media (max-width: 900px) {
  /* minmax(0, …): PIN kutusunun dogal genisligi (buyuk punto + harf araligi)
     kolonu ekrandan genis zorlamasin — ilk denemede telefonda saga tasiyordu */
  .login-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login-sahne, .login-box { min-width: 0; }
  .login-sahne { padding: var(--sp-5) var(--sp-5) calc(var(--sp-10) + 8px); }
  /* top: saat + tarih bloğunun altından başlasın — 58px'te ölçek çizgileri tarihin arkasına düşüyordu */
  .login-terazi { width: min(54%, 260px); right: -6px; top: 88px; transform: none; }
  .login-sahne-alt { margin-top: 140px; }
  .login-wm { font-size: clamp(54px, 16vw, 88px); }
  .login-slogan { max-width: 19ch; margin-top: var(--sp-3); font-size: 15px; }
  .login-box {
    position: relative;
    z-index: 2;
    justify-content: flex-start;
    max-width: none;
    margin: -24px 0 0;
    padding: var(--sp-8) var(--sp-5);
    border-radius: 22px 22px 0 0;
    background: var(--bg);
    box-shadow: 0 -18px 40px -22px rgba(0, 0, 0, .6);
  }
  .login-box > * { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .login-slogan { display: none; }
  .login-sahne-alt { margin-top: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-wrap *,
  .login-wrap *::before,
  .login-wrap *::after { animation: none !important; transition: none !important; }
}
/* ═══════════════ RAPOR KUTULARI ═══════════════ */
.rapor-sayfa-kutular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-3);
  max-width: var(--icerik-max);
}
.rapor-kutu {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
/* Baslik vurgu rengi degil: hiyerarsi versal + harf araligi ile kuruluyor. */
.rapor-kutu h4 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-strong);
  text-transform: uppercase;
  letter-spacing: var(--ls-baslik);
  font-weight: 700;
}
.rapor-kutu .rapor-kutu-aciklama {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: calc(var(--sp-2) * -1) 0 var(--sp-3);
  line-height: var(--lh);
}
.rapor-graf-ust {
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.rapor-graf-baslik {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 2px;
}
.rapor-graf-alt { font-size: var(--fs-micro); color: var(--muted); margin: 0 0 var(--sp-2); line-height: 1.4; }

/* ═══════════════ HIZLI ISLEM KARTLARI ═══════════════
 * Islem turu artik ikonun sekli + temanin anlam renginde ikon kutusuyla
 * kodlaniyor (eskiden sol kenar seridi). Yazi renk giymez — metin rengiyle
 * okunur, renk yalniz ikonda. Renkler kontrasti olculmus anlam belirteclerinden. */
.hizli-islem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.hizli-islem-btn {
  --hib-renk: var(--accent);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px var(--sp-4);
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--golge-kart);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.hizli-islem-btn:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--hib-renk) 45%, var(--border));
  box-shadow: var(--golge-kart-ust);
}
.hizli-islem-btn:active { transform: translateY(1px); }
.hizli-islem-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hib-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 20px;
  line-height: 1;
  color: var(--hib-renk);
  background: color-mix(in oklab, var(--hib-renk) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--hib-renk) 32%, transparent);
  transition: transform var(--dur-slow) var(--yay);
}
.hizli-islem-btn:hover .hib-ico { transform: scale(1.06) rotate(-4deg); }
.hib-ico svg { width: 22px; height: 22px; }
.hib-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hib-lbl { font-size: var(--fs-base); font-weight: 700; color: var(--text-strong); letter-spacing: -.01em; }
.hib-alt { font-size: var(--fs-xs); color: var(--muted); }

.hib-perakende { --hib-renk: var(--green); }
.hib-toptan { --hib-renk: var(--blue); }
.hib-alis { --hib-renk: var(--yellow); }
.hib-tahsilat { --hib-renk: var(--purple); }
.hib-ay { --hib-renk: var(--accent); }

@media (max-width: 640px) {
  .hizli-islem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .hizli-islem-btn { flex-direction: column; align-items: flex-start; padding: var(--sp-3); }
  .hib-alt { display: none; }
}

/* ═══════════════ ANA SAYFA — KAR / ZARAR SAHNESI ═══════════════
 * Giris ekraninin sahnesi Ana Sayfa'nin basinda: her temada koyu murekkep zemin,
 * tek buyuk rakam (net kar), yaninda brut kari giderlerle tartan terazi —
 * agir olan kefe asagi iner (06-hizli-islemler.js kzTeraziSVG, --kz-egim).
 * Metin sahne tonlarinda; renk yalniz durum cipinde (ikon + etiket ile) ve
 * grup basliklarindaki noktada. */
.kz-sahne {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: var(--sp-5);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  border-radius: 20px;
  color: var(--sahne-yazi);
  background:
    radial-gradient(55% 90% at 80% 0%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, color-mix(in oklab, var(--accent2) 12%, transparent), transparent 70%),
    var(--murekkep);
  box-shadow: var(--golge-kart-ust);
}
.kz-sahne::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 90% at 75% 30%, #000 20%, transparent 100%);
          mask-image: radial-gradient(70% 90% at 75% 30%, #000 20%, transparent 100%);
}

.kz-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; }
.kz-etiket { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sahne-soluk); }
.kz-ust-alt { margin-top: 4px; font-size: var(--fs-xs); color: var(--sahne-soluk); }
.kz-secim {
  -webkit-appearance: none;
  appearance: none;
  height: 34px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--sahne-cizgi);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23eef1f6' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center / 10px 6px;
  color: var(--sahne-yazi);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.kz-secim:hover { background-color: rgba(255, 255, 255, .1); }
.kz-secim:focus-visible { outline: 2px solid var(--terazi); outline-offset: 2px; }
.kz-secim option { color: var(--text); background: var(--card); }

.kz-govde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-6);
  margin: var(--sp-3) 0 var(--sp-5);
}
.kz-hero-etiket { font-size: var(--fs-md); font-weight: 600; color: var(--sahne-soluk); }
/* Tek buyuk rakam: ayni yazi tipi, oransal rakamlar (tabular-nums buyuk puntoda bosluklu durur). */
.kz-hero-deger {
  margin-top: 6px;
  font-size: clamp(44px, 4.6vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--sahne-yazi);
  font-variant-numeric: proportional-nums;
  font-feature-settings: normal;
}
.kz-hero-alt { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--sahne-soluk); }
.kz-hero-alt b { color: var(--sahne-yazi); }
.kz-durum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .03em;
}
.kz-durum-iyi { color: var(--sahne-iyi); background: color-mix(in oklab, var(--sahne-iyi) 16%, transparent); border: 1px solid color-mix(in oklab, var(--sahne-iyi) 40%, transparent); }
.kz-durum-kotu { color: var(--sahne-kotu); background: color-mix(in oklab, var(--sahne-kotu) 16%, transparent); border: 1px solid color-mix(in oklab, var(--sahne-kotu) 40%, transparent); }

.kz-terazi { width: min(300px, 32vw); height: auto; color: var(--terazi); overflow: visible; }
.kz-kol {
  transform-origin: 160px 70px;
  transform: rotate(var(--kz-egim));
  transition: transform .9s var(--yay);
  animation: kzTarti 1.3s var(--yay) .15s backwards;
}
.kz-kefe {
  transform: rotate(calc(var(--kz-egim) * -1));
  transition: transform .9s var(--yay);
  animation: kzTarti 1.3s var(--yay) .15s backwards;
}
.kz-kefe-sol { transform-origin: 40px 70px; }
.kz-kefe-sag { transform-origin: 280px 70px; }
.kz-kefe-ad { fill: var(--sahne-soluk); stroke: none; font: 600 12px var(--font); }
.kz-kefe-tutar { fill: var(--sahne-yazi); stroke: none; font: 700 14px var(--font); }
@keyframes kzTarti { from { transform: rotate(0deg); } }

.kz-kalemler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.kz-grup { padding: var(--sp-3) var(--sp-4); border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--sahne-cizgi); }
.kz-grup-baslik {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sahne-soluk);
}
.kz-grup-baslik::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--kz-grup-renk, var(--terazi)); }
.kz-grup-gelir { --kz-grup-renk: var(--sahne-iyi); }
.kz-grup-gider { --kz-grup-renk: var(--sahne-kotu); }
.kz-satir { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 5px 0; font-size: var(--fs-sm); color: var(--sahne-soluk); }
.kz-satir b { color: var(--sahne-yazi); font-weight: 700; white-space: nowrap; }
.kz-toplam { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--sahne-cizgi); color: var(--sahne-yazi); font-weight: 700; }
.kz-not { margin-top: 6px; font-size: var(--fs-xs); }
.kz-ayrac { height: 1px; margin: 8px 0; background: var(--sahne-cizgi); }
.kz-uyari {
  margin-top: var(--sp-3);
  padding: 8px 12px;
  border-radius: var(--r-md);
  border-left: 3px solid var(--sahne-uyari);
  background: rgba(255, 255, 255, .04);
  font-size: var(--fs-xs);
  color: var(--sahne-soluk);
}
.kz-uyari b { color: var(--sahne-yazi); }

@media (max-width: 900px) {
  .kz-sahne { padding: var(--sp-4); }
  .kz-govde { grid-template-columns: 1fr; gap: var(--sp-3); }
  .kz-terazi { width: min(280px, 86%); justify-self: center; }
  .kz-kalemler { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kz-kol, .kz-kefe { animation: none; transition: none; }
}

/* ═══════════════ ANA SAYFA — TABLO YARDIMCILARI ═══════════════ */
/* Sira rozeti: ilk uc vurgulu. */
.sira {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  background: var(--bg-alt);
}
.sira-ust { color: var(--on-fill); background: var(--accent-fill); }
/* Pay cubugu: listedeki en buyuge gore — deger metni yaninda, metin rengiyle. */
.pay-hucre { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }
.pay-bar { display: inline-block; width: 72px; height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in oklab, var(--accent) 14%, transparent); }
/* Yan yana iki tablo (.cr) dar: cubuk ve hucre boslugu kucuk — yoksa son sutun kesiliyordu. */
.cr .pay-hucre { gap: 8px; }
.cr .pay-bar { width: 40px; }
.cr td, .cr th { padding-left: 10px; padding-right: 10px; }
.pay-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
@media (max-width: 640px) { .pay-bar { display: none; } }
/* Dar ekranda sol menu cekmece; genis ekranda her zaman solda sabit */

.row-menu-wrap{display:inline-block;position:relative}
.row-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--card);border:1px solid rgba(var(--accent2-rgb),.18);border-radius:12px;box-shadow:0 18px 55px rgba(0,0,0,.55);padding:6px;z-index:999}
.row-menu.row-menu-fixed{position:fixed;right:auto;z-index:5000}
.row-menu button{width:100%;text-align:left;border:none;background:transparent;color:var(--text);padding:10px 10px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;display:flex;gap:8px;align-items:center}
.row-menu button:hover{background:rgba(var(--accent2-rgb),.10)}
.row-menu button.sy-menu-danger{color:var(--red)!important}
.row-menu button.sy-menu-danger:hover{background:rgba(239,83,80,.14)!important}
.row-menu .sep{height:1px;background:rgba(var(--accent2-rgb),.12);margin:6px 4px}
/* Stok Yönetimi — kompakt tablo */
#syYonetimKT table.sy-table-yonet{font-size:11px;width:100%;table-layout:fixed;border-collapse:collapse}
#syYonetimKT table.sy-table-yonet th{padding:6px 6px;font-size:9px}
#syYonetimKT table.sy-table-yonet td{padding:3px 6px;vertical-align:middle;border-bottom:1px solid rgba(var(--accent2-rgb),.06);line-height:1.35}
#syYonetimKT table.sy-table-yonet tr.stok-row{height:32px}
#syYonetimKT table.sy-table-yonet .badge{padding:2px 6px;font-size:9px}
@media(max-width:768px){
  #syYonetimKT table.sy-table-yonet td{padding:6px 4px;font-size:11px}
  #syYonetimKT table.sy-table-yonet tr.stok-row{height:42px}
  #syYonetimKT{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
#syYonetimKT table.sy-table-yonet td.sy-col-urun{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#syYonetimKT table.sy-table-yonet td.sy-col-kat{font-size:10px;color:var(--muted);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#syYonetimKT table.sy-table-yonet td.sy-col-kod{word-break:break-word;white-space:normal}
#syYonetimKT table.sy-table-yonet td.sy-expand-cell{text-align:center;width:36px;padding:6px 2px!important}
#syYonetimKT table.sy-table-yonet td.sy-act-cell{text-align:center;width:1%;white-space:normal;padding-left:4px!important;padding-right:4px!important;vertical-align:middle}
#syYonetimKT .sy-act-stack{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:6px;width:auto}
#syYonetimKT .sy-act-stack .row-menu-wrap{display:flex;justify-content:center}
#syYonetimKT .sy-act-stack .btn{width:auto!important;max-width:none!important;margin:0!important;white-space:nowrap}
#syYonetimKT table.sy-table-yonet td.sy-act-cell{white-space:nowrap!important}
#syYonetimKT table.sy-table-yonet td.sy-net-cell{text-align:right;cursor:help}
#syYonetimKT table.sy-table-yonet td.sy-net-cell.sy-net-em{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
#syYonetimKT table.sy-table-yonet td.sy-tip-cell{white-space:nowrap}
#tab-stok_yonetim .tw.sy-yonet-tw{overflow-x:visible}
/* Marka etiketi — renk marka KIMLIGI tasir, dekor degil; korundu.
   Ton her tema icin 01-token.css icinde hesaplaniyor (--mk-*), boylece
   hem koyu hem acik temada 4.5:1 esigini geciyor. Eskiden koyu zemin +
   acik yazi cifti elle yaziliydi ve acik temada okunmuyordu. */
.mk {
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--marka, var(--text));
  border: 1px solid currentColor;
  background: color-mix(in srgb, var(--marka, var(--text)) 12%, transparent);
}
.mk-POVVER { --marka: var(--mk-POVVER); }
.mk-PETLAS { --marka: var(--mk-PETLAS); }
.mk-TOLERO { --marka: var(--mk-TOLERO); }
.mk-VARTA { --marka: var(--mk-VARTA); }
.mk-DURACELL { --marka: var(--mk-DURACELL); }
.mk-ORBUS { --marka: var(--mk-ORBUS); }
.mk-FEZA { --marka: var(--mk-FEZA); }
.mk-TURKUAZ { --marka: var(--mk-TURKUAZ); }
.mk-BANNER { --marka: var(--mk-BANNER); }
.mk-FROW { --marka: var(--mk-FROW); }
.mk-GENTRY { --marka: var(--mk-GENTRY); }
.mk-DEEPPOWER { --marka: var(--mk-DEEPPOWER); }
.mk-UNIBAT { --marka: var(--mk-UNIBAT); }
.hesap-row{cursor:pointer;transition:background .15s}.hesap-row:hover{background:rgba(var(--accent2-rgb),.08)}.hesap-row-active{background:rgba(var(--accent2-rgb),.14)!important;box-shadow:inset 0 0 0 1px var(--accent2)}.hesap-kartlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;padding:14px 16px}.hesap-kart{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:6px;transition:transform .15s,box-shadow .15s,border-color .15s}.hk-actions{position:absolute;top:6px;right:8px;display:flex;gap:2px}.hk-sil,.hk-edit{background:none;border:none;cursor:pointer;font-size:13px;opacity:.5;padding:3px 5px;border-radius:5px;line-height:1}.hk-sil:hover{opacity:1;background:rgba(255,90,90,.18)}.hk-edit:hover{opacity:1;background:rgba(255,255,255,.14)}.hesap-kart.hesap-row{cursor:pointer}.hesap-kart.hesap-row:hover{border-color:var(--border-strong);background:var(--card-hover)}.hesap-kart.hesap-row:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}.hesap-kart.hesap-row-active{border-color:var(--accent2);box-shadow:inset 0 0 0 2px var(--accent2)}.hesap-kart .hk-ad{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hesap-kart .hk-bakiye{font-size:20px;font-weight:800;line-height:1.15}.hesap-kart .hk-alt{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:600;opacity:.92}.hesap-kart-toplam{background:var(--bg-alt);border-color:var(--accent)}.hesap-bos{padding:18px 16px;color:var(--muted);font-size:13px;text-align:center}.hesap-detay-details{margin:10px 0;border:1px solid var(--border);border-radius:8px;background:rgba(0,0,0,.12);overflow:hidden}.hesap-detay-details summary{cursor:pointer;font-weight:700;color:var(--accent2);padding:10px 12px;list-style:none;user-select:none}.hesap-detay-details summary::-webkit-details-marker{display:none}.hesap-detay-details .hesap-detay-body{padding:0 12px 12px}
#toastWrap{position:fixed;top:20px;right:20px;z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast.out{animation:toastOut .25s ease-in forwards}
@keyframes toastIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{to{transform:translateX(120%);opacity:0}}
.depo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.depo-kart{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 10px;cursor:pointer;transition:all .2s;text-align:center;position:relative;overflow:hidden}
.depo-kart:hover{border-color:var(--accent2);transform:translateY(-2px)}
.depo-kart.active{background:var(--card-hover);border-color:var(--accent2);box-shadow:0 0 0 2px rgba(var(--accent2-rgb),.35)}
.depo-kart .dk-ad{font-size:12px;font-weight:700;color:var(--text);margin-bottom:10px;min-height:34px;display:flex;align-items:center;justify-content:center;line-height:1.25}
.depo-kart .dk-sayi{font-size:22px;font-weight:800;color:var(--accent2);line-height:1}
.depo-kart .dk-alt{font-size:10px;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.5px}
/* Stok — marka / toplam özet */
.sy-marka-ozet{margin:0 0 14px;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:10px}
.sy-marka-ozet-baslik{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:10px}
.sy-marka-ozet-baslik h4{margin:0;font-size:13px;font-weight:700;color:var(--text)}
.sy-marka-ozet-toplam{font-size:12px;color:var(--muted);line-height:1.45}
.sy-marka-ozet-toplam b{color:var(--accent2);font-size:14px}
.sy-marka-chip-grid{display:flex;flex-wrap:wrap;gap:8px}
.sy-marka-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:rgba(var(--accent2-rgb),.06);cursor:pointer;transition:border-color .15s,transform .15s;min-width:110px}
.sy-marka-chip:hover{border-color:var(--accent2);transform:translateY(-1px)}
.sy-marka-chip.active{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(var(--accent2-rgb),.3);background:rgba(var(--accent2-rgb),.14)}
.sy-marka-chip .smc-ad{font-size:11px;font-weight:700;letter-spacing:.2px}
.sy-marka-chip .smc-adet{font-size:16px;font-weight:800;color:var(--accent2);line-height:1.1}
.sy-marka-chip .smc-alt{font-size:10px;color:var(--muted)}
.stok-row{border-left:4px solid transparent}
.stok-row.sr-POVVER { border-left-color: var(--mk-POVVER); }
.stok-row.sr-PETLAS { border-left-color: var(--mk-PETLAS); }
.stok-row.sr-TOLERO { border-left-color: var(--mk-TOLERO); }
.stok-row.sr-VARTA { border-left-color: var(--mk-VARTA); }
.stok-row.sr-DURACELL { border-left-color: var(--mk-DURACELL); }
.stok-row.sr-ORBUS { border-left-color: var(--mk-ORBUS); }
.stok-row.sr-FEZA { border-left-color: var(--mk-FEZA); }
.stok-row.sr-TURKUAZ { border-left-color: var(--mk-TURKUAZ); }
.stok-row.sr-BANNER { border-left-color: var(--mk-BANNER); }
.stok-row.sr-FROW { border-left-color: var(--mk-FROW); }
.stok-row.sr-GENTRY { border-left-color: var(--mk-GENTRY); }
.stok-row.sr-DEEPPOWER { border-left-color: var(--mk-DEEPPOWER); }
.stok-row.sr-UNIBAT { border-left-color: var(--mk-UNIBAT); }
.fatura-card{background:var(--card);border-radius:var(--r-md);border:1px solid var(--border);margin-bottom:10px;overflow:hidden;transition:box-shadow .2s}
.fatura-card:hover{box-shadow:0 4px 20px rgba(var(--accent2-rgb),.1)}
.fatura-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;gap:12px;flex-wrap:wrap;transition:background .15s}
.fatura-header:hover{background:rgba(var(--accent2-rgb),.04)}
.fatura-header .fh-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fatura-header .fh-no{font-weight:700;color:var(--accent2);font-size:14px}
.fatura-header .fh-ted{color:var(--text);font-size:13px;font-weight:600}
.fatura-header .fh-tarih{color:var(--muted);font-size:12px}
.fatura-header .fh-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fatura-header .fh-tutar{font-weight:700;font-size:15px;color:var(--green)}
.fatura-header .fh-adet{font-size:11px;color:var(--muted);background:rgba(var(--accent2-rgb),.1);padding:3px 10px;border-radius:8px}
.fatura-header .fh-arrow{color:var(--muted);font-size:16px;transition:transform .25s;flex-shrink:0}
.fatura-card.open .fh-arrow{transform:rotate(180deg)}
.fatura-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.fatura-card.open .fatura-body{max-height:2000px}
.fatura-body table{margin:0;font-size:12px}
.fatura-body th{background:rgba(0,0,0,.2)}
.alis-fatura-tablo{font-size:12px}
.alis-fatura-tablo thead th{background:rgba(var(--accent2-rgb),.08);color:var(--accent2);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.alis-fatura-row td{padding:10px 12px;vertical-align:middle;border-bottom:1px solid var(--border)}
.alis-fatura-row:hover td{background:rgba(var(--accent2-rgb),.04)}
.alis-fatura-row.acik td{background:rgba(var(--accent2-rgb),.07)}
.alis-fatura-detay td{border-bottom:1px solid var(--border)}
.alis-fatura-detay table th{background:rgba(0,0,0,.25);font-size:11px}
.fatura-actions{padding:8px 16px;border-top:1px solid var(--border);display:flex;gap:6px;justify-content:flex-end;background:rgba(0,0,0,.1)}
.modal-bg{position:fixed;inset:0;background:color-mix(in oklab,var(--murekkep) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:none;align-items:flex-start;justify-content:center;z-index:100;overflow-y:auto;padding:24px 12px}.modal-bg.show{display:flex;animation:mbFade .28s ease}
.modal-bg.show .modal{animation:mbPop .44s cubic-bezier(.16,1,.3,1)}
.modal-bg.mb-closing{animation:mbFadeOut .2s ease forwards}
.modal-bg.mb-closing .modal{animation:mbPopOut .2s ease forwards}
@keyframes mbFade{from{opacity:0}to{opacity:1}}
@keyframes mbPop{from{opacity:0;transform:translateY(38px) scale(.93)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mbFadeOut{from{opacity:1}to{opacity:0}}
@keyframes mbPopOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(20px) scale(.97)}}
/* Tedarikçi cari detay — animasyonlu modal */
.tcm-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(0);display:none;align-items:flex-start;justify-content:center;z-index:200;overflow-y:auto;padding:30px 16px;opacity:0;transition:opacity .3s ease,backdrop-filter .3s ease}
.tcm-bg.show{opacity:1;backdrop-filter:blur(7px)}
.tcm-card{position:relative;background:var(--card);border:1px solid rgba(var(--accent2-rgb),.3);border-radius:20px;width:1160px;max-width:97vw;margin:auto;box-shadow:0 40px 110px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);transform:translateY(48px) scale(.93);opacity:0;transition:transform .46s cubic-bezier(.16,1,.3,1),opacity .36s ease;overflow:hidden}
.tcm-bg.show .tcm-card{transform:translateY(0) scale(1);opacity:1}
.tcm-bg.closing{opacity:0;backdrop-filter:blur(0)}
.tcm-bg.closing .tcm-card{transform:translateY(26px) scale(.96);opacity:0}
.tcm-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;background:var(--bg-alt);border-bottom:1px solid rgba(var(--accent2-rgb),.25);backdrop-filter:blur(6px)}
.tcm-head h3 { margin: 0; font-size: var(--fs-md); color: var(--text-strong); font-weight: 700; letter-spacing: -.01em; }
.tcm-x{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text);width:34px;height:34px;border-radius:10px;font-size:20px;cursor:pointer;line-height:1;transition:all .18s ease}
.tcm-x:hover { background: var(--red-fill); color: var(--on-fill); border-color: var(--red-fill); transform: none; }
.tcm-body{max-height:78vh;overflow-y:auto}
@media(max-width:640px){.tcm-card{border-radius:14px}.tcm-body{max-height:84vh}}
/* Müşteri detay: sidebar üstünde (sidebar z=100), modal/tcm altında */
#musteriDetayPanel{left:252px;z-index:150!important}
#musteriDetayPanel .md-card{position:relative;z-index:1;max-width:1150px;margin:12px auto;box-shadow:0 20px 60px rgba(0,0,0,.55)}
@media(max-width:768px){#musteriDetayPanel{left:0}}
/* Tema-uyumlu onay modali (confirm() yerine) */
.tConfirm-bg{position:fixed;inset:0;background:rgba(5,15,15,.72);backdrop-filter:blur(4px);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.tConfirm-bg.show{display:flex}
.tConfirm {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  max-width: 480px;
  width: 100%;
  padding: var(--sp-6);
  box-shadow: var(--e3);
  position: relative;
  animation: tConfIn var(--dur) var(--ease);
}
.tConfirm::before { content: none; }
@keyframes tConfIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.tConfirm h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); color: var(--text-strong); font-weight: 700; letter-spacing: -.01em; }
.tConfirm p { margin: 0 0 var(--sp-5); line-height: var(--lh); color: var(--text); font-size: var(--fs-base); white-space: pre-wrap; }
.tConfirm .actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.tConfirm .btn{min-width:96px;min-height:36px}
/* WCAG 2.2 SC 2.4.11 — yuksek kontrast focus indicator */
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--accent2);box-shadow:inset 0 2px 4px rgba(0,0,0,.3),0 0 0 3px rgba(var(--accent2-rgb),.12),0 0 20px rgba(var(--accent2-rgb),.15)}
.ma{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}
.cr{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4)}.cr>*{min-width:0}
/* Kredi Kartı: Tanımlı Kartlar listesi geniş ödemeler tablosunun altına insin (yatay kaydırma olmasın) */
#odsub-kk .cr{grid-template-columns:1fr}
/* Alım Cari: tablolar tam görünsün */
#tab-alimcari .cr{grid-template-columns:1.55fr 1fr}
#tab-alimcari .tw{min-width:0}
#tab-alimcari table{font-size:11px}
#tab-alimcari th{font-size:9px}
#tab-alimcari td,#tab-alimcari th{padding:6px 8px}
/* Vade tablosu daha sıkı olsun (Gün sütunu sığsın) */
#tab-alimcari #acVadeler table{font-size:10px}
#tab-alimcari #acVadeler th{font-size:8px}
#tab-alimcari #acVadeler td,#tab-alimcari #acVadeler th{padding:5px 6px}
/* Müşteri listesi — 13 sütun yatay kaydırma olmadan sığsın */
#musteriListe table{font-size:11px}
#musteriListe th{font-size:9px;padding:6px 6px}
#musteriListe td{padding:6px 6px}
#musteriListe .btn{padding:3px 7px;font-size:11px}
#musteriListe .mst-ad b{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
@media(max-width:1100px){
  #tab-alimcari .cr{grid-template-columns:1fr}
}
/* Tedarikçiler: prim kartları kompakt */
#tab-tedarikciler #tedPrim .cards{grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px}
#tab-tedarikciler #tedPrim .kpi{padding:10px 10px;border-radius:14px}
#tab-tedarikciler #tedPrim .kpi .lbl{font-size:9px;letter-spacing:.6px;line-height:1.2}
#tab-tedarikciler #tedPrim .kpi .val{font-size:18px;line-height:1.1}
#tab-tedarikciler #tedPrim .kpi .sub{font-size:9px}
@media(max-width:1000px){
  #tab-tedarikciler #tedPrim .cards{grid-template-columns:repeat(2,minmax(140px,1fr))}
  #tab-tedarikciler #tedPrim .kpi .val{font-size:17px}
}
/* Grafik karti: tablo kartiyla ayni dil (yumusak golge, duz yazili baslik + vurgu cubugu).
   Uzerine gelince yukselmez — fare ipucu okurken kart kaymasin. */
.cp{background:var(--card);border-radius:16px;padding:var(--sp-4) var(--sp-5) var(--sp-5);border:1px solid var(--border);box-shadow:var(--golge-kart);position:relative;min-width:0;transition:border-color var(--dur) var(--ease)}
.cp::before{content:none}
.cp:hover{border-color:color-mix(in oklab,var(--accent) 28%,var(--border))}
.cp h4{display:flex;align-items:center;gap:10px;font-size:var(--fs-md);color:var(--text-strong);margin-bottom:var(--sp-3);text-transform:none;letter-spacing:-.01em;font-weight:700;text-shadow:none}
.cp h4::before{content:'';flex:none;width:4px;height:16px;border-radius:2px;background:var(--accent)}
.cw{position:relative;height:260px}
.ld{text-align:center;padding:40px;color:var(--muted)}
/* Yukleniyor: donen halka yerine tartan kucuk terazi. Govde (::after) sabit,
   kol ve kefeler (::before) ust pivottan sallanir. Sekil maske — rengi temadan. */
.sp{position:relative;display:inline-block;width:40px;height:40px;border:0;vertical-align:middle;animation:none}
.sp::before,.sp::after{content:'';position:absolute;inset:0;background:var(--accent);-webkit-mask:var(--sp-sekil) center/contain no-repeat;mask:var(--sp-sekil) center/contain no-repeat}
.sp::before{--sp-sekil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='23' r='3.5'/%3E%3Cline x1='10' y1='23' x2='54' y2='23' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M10 23 L4 37 M10 23 L16 37 M54 23 L48 37 M54 23 L60 37' stroke='black' stroke-width='2' fill='none'/%3E%3Cpath d='M2 37 H18 Q10 46 2 37 Z M46 37 H62 Q54 46 46 37 Z'/%3E%3C/svg%3E");transform-origin:50% 36%;animation:spTarti .9s ease-in-out infinite alternate}
.sp::after{--sp-sekil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='12' r='3'/%3E%3Cline x1='32' y1='16' x2='32' y2='55' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='22' y1='57' x2='42' y2='57' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")}
@keyframes spTarti{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@media (prefers-reduced-motion:reduce){.sp::before{animation:none}}
@keyframes spin{to{transform:rotate(360deg)}}.r2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
#refreshBtn:hover{box-shadow:0 4px 14px rgba(var(--accent2-rgb),.3);transform:translateY(-1px)}
#refreshBtn.loading #refreshIco{animation:spin .8s linear infinite;display:inline-block}
.pager{display:flex;align-items:center;justify-content:center;gap:4px;padding:12px;flex-wrap:wrap}
.pager button{padding:5px var(--sp-3);border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--card);color:var(--text);cursor:pointer;font:inherit;font-size:var(--fs-sm);transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.pager button:hover{border-color:var(--accent);background:var(--card-hover);color:var(--text);box-shadow:none}
.pager button.active{background:var(--accent-fill);color:var(--on-fill);border-color:var(--accent-fill);font-weight:700}
.pager button:disabled{opacity:.3;cursor:default}
.pager .info{color:var(--muted);font-size:11px;margin:0 8px}
.autocomplete{position:relative}
.ac-list{position:absolute;top:100%;left:0;right:0;background:var(--card);border:1px solid var(--border-strong);border-radius:0 0 10px 10px;max-height:200px;overflow-y:auto;z-index:10;display:none;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ac-list.show{display:block}
.ac-item{padding:8px 12px;cursor:pointer;font-size:12px;border-bottom:1px solid rgba(var(--accent2-rgb),.08);transition:background .15s}
.ac-item:hover,.ac-item.hl{background:rgba(var(--accent2-rgb),.18);color:var(--accent2)}
.sub-content{display:none;padding:16px}.sub-content.active{display:block}
/* Odendi rozetleri: dolgu + belirtecten gelen yazi rengi.
   Eskiden hepsi beyaz yaziydi; koyu temada yesil dolguda 3:1 altina
   dusuyordu. --on-bright anlam dolgulari icin dogru esi secer. */
.odendi-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 9px;
  border-radius: var(--r-sm);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: none;
}
.odendi-evet { background: var(--green); color: var(--on-bright); }
.odendi-hayir { background: var(--red-fill); color: var(--on-fill); }
.odendi-bekle { background: var(--yellow); color: var(--on-bright); }
/* WCAG 2.2 SC 1.4.1 — Renge ek olarak ikon (renk korlugu icin) */
.odendi-evet::before{content:'\2713\00a0';font-weight:900}
.odendi-hayir::before{content:'\2717\00a0';font-weight:900}
.odendi-bekle::before{content:'\23F3\00a0'}
.mlyt-kar-acc{padding:0}
.mlyt-kar-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;font-weight:700;font-size:13px;color:var(--text);user-select:none}
.mlyt-kar-acc>summary::-webkit-details-marker{display:none}
.mlyt-kar-acc>summary::after{content:'\25BE';color:var(--muted);transition:transform .2s;font-size:12px}
.mlyt-kar-acc[open]>summary::after{transform:rotate(180deg)}
.mlyt-kar-acc>summary:hover{color:var(--accent2)}
.il-kart{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 8px;text-align:center;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;min-height:90px;display:flex;flex-direction:column;justify-content:center}
.il-kart:hover { transform: none; box-shadow: none; border-color: var(--border-strong); background: var(--card-hover); }
/* Alt serit SIRALAMAYI kodluyor (h1 en yuksek), dekor degil — korundu.
   Neon degradeler yerine anlam belirtecleri; dort temada da calisir. */
.il-kart::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--border); }
.il-kart.yok{opacity:.55}
.il-kart.yok::before{background:var(--border)}
.il-kart.h1::before { background: var(--green); }
.il-kart.h2::before { background: var(--blue); }
.il-kart.h3::before { background: var(--yellow); }
.il-kart.h4::before { background: var(--purple); }
.il-kart .il-ad{font-size:12px;font-weight:800;color:var(--text);letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px}
.il-kart .il-adet{font-size:20px;font-weight:800;color:var(--accent2);line-height:1}
.il-kart .il-alt{font-size:9px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.3px}
@media(max-width:1100px){#ilHarita{grid-template-columns:repeat(4,1fr) !important}}
@media(max-width:600px){#ilHarita{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:768px){.cr,.r2,.r3{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}.topbar-meta{font-size:11px}}

/* ═══ TERAZİ MARKA WORDMARK ═══ */
.brand-wm{font-weight:800;font-size:26px;letter-spacing:-1.2px;display:inline-flex;align-items:flex-end;line-height:1;font-family:'Segoe UI',system-ui,-apple-system,sans-serif}
.brand-wm .bi{display:inline-block;position:relative;width:9px;height:26px;margin-left:3px}
.brand-wm .bi::before{content:'';position:absolute;bottom:0;left:2px;width:5px;height:18px;background:currentColor;border-radius:2.5px}
.brand-wm .bi::after{content:'';position:absolute;top:0;left:0;width:8px;height:8px;border-radius:var(--r-full);background:var(--accent);box-shadow:none}
.terazi-logo{color:var(--accent2)}
/* Tarih/saat input takvim ikonu — koyu temada görünür (beyaz), açık temada normal */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(2);
  cursor:pointer;opacity:.95;
  font-size:16px;padding:2px;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover{opacity:1;filter:invert(1) brightness(2) drop-shadow(0 0 4px rgba(96,165,250,.7))}
/* Firefox/diğer: tarih input metni de net görünsün */
input[type="date"],input[type="datetime-local"],input[type="month"],input[type="time"]{color-scheme:dark}

/* ═══ MODERN AUTOCOMPLETE (Müşteri seçimi) ═══ */
.kasa-ac{position:relative}
.kasa-ac input{width:100%;padding:11px 36px 11px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px;font-weight:600;transition:border-color .15s,box-shadow .15s}
.kasa-ac input:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(var(--accent2-rgb),.18)}
.kasa-ac::after{content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:12px}
.kasa-ac-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.45);max-height:280px;overflow-y:auto;z-index:600;display:none}
.kasa-ac-panel.open{display:block}
.kasa-ac-item{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:background .12s}
.kasa-ac-item:last-child{border-bottom:none}
.kasa-ac-item:hover,.kasa-ac-item.focus{background:rgba(var(--accent2-rgb),.12)}
.kasa-ac-item .kac-tag{font-size:10px;padding:2px 7px;border-radius:6px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.kasa-ac-item .kac-tag.tipBayi { color: var(--purple); border: 1px solid currentColor; background: color-mix(in srgb, var(--purple) 12%, transparent); }
.kasa-ac-item .kac-tag.tipPerakende { color: var(--blue); border: 1px solid currentColor; background: color-mix(in srgb, var(--blue) 12%, transparent); }
.kasa-ac-item .kac-ad{font-weight:700;flex:1;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kasa-ac-item .kac-meta{font-size:11px;color:var(--muted);white-space:nowrap}
.kasa-ac-empty{padding:14px;text-align:center;color:var(--muted);font-size:12px}
.kasa-ac-add { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3); background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--green); cursor: pointer; font-weight: 700; font-size: var(--fs-base); border-top: 1px solid var(--border); }
.kasa-ac-add:hover{background:rgba(34,197,94,.18)}

/* ═══ BANKA KARE BUTON GRİDİ ═══ */
.banka-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:8px}
.banka-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 8px;min-height:74px;border-radius:var(--r-md);border:1px solid var(--border-strong);background:var(--card);color:var(--text);font-weight:700;font-size:13px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;text-align:center;line-height:1.2;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.banka-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.25);border-color:var(--accent2)}
.banka-btn.selected{border-color:var(--accent);background:var(--card-hover);box-shadow:none}
.banka-btn.selected::after{content:'✓';position:absolute;top:6px;right:8px;font-size:13px;color:var(--green);font-weight:900}
.banka-btn .bb-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 2px rgba(255,255,255,.06)}

/* ── tema secim kartlari (Ayarlar) ──
 * Uc tema; kart kendi paletini onizleme seridiyle gosterir.
 * Isaretleme js/24-tema.js icindeki renderTemaSecim'den gelir. */
.tema-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: stretch;
  text-align: left;
  padding: var(--sp-3);
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.tema-kart:hover { border-color: var(--accent); background: var(--card-hover); }
.tema-kart.aktif { border-color: var(--accent); border-width: 2px; padding: calc(var(--sp-3) - 1px); }
.tema-kart.aktif::after {
  content: '';
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--accent);
}
.tema-kart .tema-onizleme {
  display: flex;
  gap: 3px;
  height: 44px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.tema-kart .tema-swatch { flex: 1; display: block; }
.tema-kart .tema-ad {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: .01em;
}
.tema-kart .tema-aciklama { font-size: var(--fs-micro); color: var(--muted); line-height: 1.35; }

/* ═══════════════ ALIŞ FATURASI — KALEM SATIRI ═══════════════
 * Satir 9 sutunlu sabit bir izgaraydi (130px 1fr 1.1fr 70px 100px 110px + 3x36px)
 * ve izgara inline style'daydi. Telefonda sabit sutunlar ekrani astigi icin
 * esnek sutunlar sifira coküyordu; urun kodu alani gorunmez oluyordu
 * (aciklama alani min-width:0 tasimadigi icin cokmuyor, o yuzden fark
 * gozden kaciyordu).
 *
 * Cozum: izgara CSS'e alindi ve dar ekranda satir yeniden akiyor. Her alan
 * kendi etiketini tasiyor (.ak-lbl) — genis ekranda ustteki baslik seridi
 * yeterli oldugu icin gizli, dar ekranda gorunur. */

.alis-kalem {
  display: grid;
  grid-template-columns: 130px 1fr 1.1fr 70px 100px 110px 40px 78px;
  gap: var(--sp-2);
  align-items: end;
  margin-bottom: var(--sp-2);
  padding: var(--sp-2);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.alis-kalem .ak-alan { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Genis ekranda basliklar ustteki seritte; alan basina tekrar etmezler. */
.alis-kalem .ak-lbl { display: none; }

.alis-kalem input,
.alis-kalem select {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  font: inherit;
  font-size: var(--fs-sm);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
}
.alis-kalem input:focus,
.alis-kalem select:focus { outline: none; border-color: var(--accent); box-shadow: var(--odak-ic); }

.alis-kalem .ak-urun { position: relative; }
.alis-kalem .ak_urun { text-transform: uppercase; }
.alis-kalem .ak_adet,
.alis-kalem .ak_birimFiyat,
.alis-kalem .ak_tutar { text-align: right; }
.alis-kalem .ak_tutar { font-weight: 700; color: var(--accent); }

/* Iskonto profili yalnizca gerekince gosteriliyor (JS aciyor). */
.alis-kalem .ak_profil { display: none; padding: 2px 4px; font-size: var(--fs-micro); }

.alis-kalem .ak-onay {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
}
.alis-kalem .ak_stok { width: auto; margin: 0; transform: scale(1.25); }

.alis-kalem .ak-islem { flex-direction: row; gap: var(--sp-1); align-items: stretch; }
.alis-kalem .ak-islem .btn { padding: 6px 8px; font-size: var(--fs-md); line-height: 1; }
.alis-kalem .ak-bedelsiz {
  color: var(--green);
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}

/* ── dar ekran: satir yeniden akar, her alan etiketini gosterir ── */
@media (max-width: 900px) {
  /* Ustteki sutun basligi seridi anlamsizlasir — her alan kendi etiketini tasiyor. */
  .alis-kalem-baslik { display: none !important; }

  .alis-kalem {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-3);
    padding: var(--sp-3);
  }
  .alis-kalem .ak-lbl {
    display: block;
    font-size: var(--fs-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-baslik);
    color: var(--muted);
  }
  .alis-kalem .ak-marka,
  .alis-kalem .ak-urun,
  .alis-kalem .ak-adet,
  .alis-kalem .ak-fiyat,
  .alis-kalem .ak-tutar,
  .alis-kalem .ak-stok { grid-column: span 2; }
  .alis-kalem .ak-aciklama,
  .alis-kalem .ak-islem { grid-column: 1 / -1; }
  .alis-kalem .ak-islem { justify-content: flex-end; }

  /* Dokunma hedefleri: 38px alti parmakla zor. */
  .alis-kalem input,
  .alis-kalem select { padding: 9px 10px; font-size: var(--fs-base); min-height: 38px; }
}

/* Kalem satirinin ustundeki sutun basligi seridi — satirla AYNI izgarayi
   kullanmali, yoksa basliklar alanlarla hizalanmaz. */
.alis-kalem-baslik {
  display: grid;
  grid-template-columns: 130px 1fr 1.1fr 70px 100px 110px 40px 78px;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-baslik);
  padding: 0 var(--sp-2) var(--sp-1);
}

/* ═══════════════ ONAY BEKLEYEN — DETAY PENCERESİ ═══════════════
 * Onaylamadan once "yanlis var mi" diye bakilan ekran. Salt okunur;
 * karar dugmeleri en altta. */

/* Satirin tiklanabilir oldugu gorunsun — aksi halde kimse denemez. */
.per-onay-satir { cursor: pointer; }
.per-onay-satir:hover td { background: var(--card-hover); }

.per-detay-izgara {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: var(--sp-1) var(--sp-4);
  align-items: baseline;
  margin-bottom: var(--sp-4);
}
.per-detay-etiket {
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-baslik);
  color: var(--muted);
}
.per-detay-deger { font-size: var(--fs-base); color: var(--text); word-break: break-word; }

.per-detay-baslik {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-baslik);
  color: var(--text-strong);
  padding-top: var(--sp-4);
  margin-bottom: var(--sp-3);
  border-top: 1px solid var(--border);
}

/* Kalem toplami ile kayit tutari uyusmuyorsa — onay oncesi bakilmasi
   gereken tam olarak bu, o yuzden goz ardi edilemeyecek bicimde. */
.per-detay-uyari {
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--red);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
}

.per-detay-karar {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.per-detay-karar .btn { padding: 9px var(--sp-5); font-size: var(--fs-base); }

@media (max-width: 640px) {
  .per-detay-izgara { grid-template-columns: 1fr; gap: 2px var(--sp-2); margin-bottom: var(--sp-3); }
  .per-detay-izgara .per-detay-deger { margin-bottom: var(--sp-2); }
  .per-detay-karar .btn { flex: 1 1 auto; }
}

/* Emanet uyarisi — personelin bayiye/musteriye BIRAKTIGI ama teslim/tahsil
   edilmemis adet. Onay ekranlarinda hic gorunmuyordu; onaylayan kisi ne
   onayladigini bilmeliydi. */
.per-detay-emanet,
.bs-emanet-uyari {
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--yellow);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--yellow) 10%, transparent);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.bs-emanet-uyari { margin-top: var(--sp-3); }

/* Siparisin fatura karari — personel B2B'de "kesilecek / kesilmeyecek" secer.
   Karar eskiden serbest metin notundaydi ve okunmadigi icin fatura
   kesilmeyecek bayiye fatura kesiliyordu; artik onay ve satisa cevirme
   ekranlarinda kendi kutusunda durur. */
.bs-fatura-uyari {
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
}
.bs-fatura-uyari.evet {
  border-color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 10%, transparent);
  color: var(--yellow);
}
.bs-fatura-uyari.hayir {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red);
}
.bs-fatura-uyari.yok {
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  color: var(--muted);
  font-weight: 500;
}

/* ─────────────────────────────────── faturasi kesilen satis satiri
 * Renk, satirdaki rozetle AYNI anlami tasir: yesil gonderildi, sari
 * kuyrukta, kirmizi iptal/ret. Sinif public/js/37-fatura.js icindeki
 * faturaSatirSinifi()'nden gelir — tek kaynak.
 *
 * NEDEN `td`ye ve `tr`ye DEGIL: her `td` kendi arka planini ciziyor
 * (04-bilesen.css: `tr:hover td { background: var(--card-hover) }`),
 * `tr`ye verilen renk onun altinda kalip hic gorunmez.
 *
 * Ton cok acik tutuldu (%8): satir metni dort temada da okunur kalmali.
 * Hover'da biraz koyulasir ki imlecin hangi satirda oldugu kaybolmasin. */
tr.satis-grup-row.fat-green  td { background: color-mix(in srgb, var(--green)  8%, transparent); }
tr.satis-grup-row.fat-yellow td { background: color-mix(in srgb, var(--yellow) 8%, transparent); }
tr.satis-grup-row.fat-red    td { background: color-mix(in srgb, var(--red)    8%, transparent); }
tr.satis-grup-row.fat-green:hover  td { background: color-mix(in srgb, var(--green)  16%, transparent); }
tr.satis-grup-row.fat-yellow:hover td { background: color-mix(in srgb, var(--yellow) 16%, transparent); }
tr.satis-grup-row.fat-red:hover    td { background: color-mix(in srgb, var(--red)    16%, transparent); }

/* Yoksayilan gelen fatura satiri — listede DURUR ama one cikmaz.
 * Silmiyoruz: belge gercek ve entegratorde duruyor; gizlemek de yanlis
 * olurdu (kullanici "nerede bu fatura" diye arar). Soluk, ama gorunur. */
tr.gelen-fatura-row.gf-yoksay td { opacity: .45; }
tr.gelen-fatura-row.gf-yoksay:hover td { opacity: .75; }

/* ═══════════════ EMANET STOKLARI — TOPLAM / VERİLEN / KALAN ═══════════════
 * Üç sayı sayfanın her yerinde (KPI, satır, alt toplam) aynı anlamı taşır:
 * toplam nötr, verilen yeşil, kalan kırmızı. #tab-emanetler kapsamı,
 * `.kpi .val` rengini ezebilmek için (04-bilesen.css). Çubuk verilen/toplam
 * oranı; zemini kırmızı tint — dolmayan kısım "kalan" okunur. */
#tab-emanetler .em-toplam  { color: var(--text-strong); font-weight: 700; }
#tab-emanetler .em-verilen { color: var(--green); font-weight: 700; }
#tab-emanetler .em-kalan   { color: var(--red);   font-weight: 800; }

.em-ilerleme {
  display: inline-block;
  vertical-align: middle;
  width: 84px;
  height: 6px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--red) 22%, transparent);
  overflow: hidden;
}
.em-ilerleme > span {
  display: block;
  width: var(--oran);
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}
.em-ilerleme-td small {
  margin-left: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* Açılan satış detayı: eskiden sabit koyu rgba'ydı, açık temalarda leke gibi duruyordu. */
#tab-emanetler td.em-detay {
  padding: 10px;
  white-space: normal;
  background: color-mix(in oklab, var(--bg-alt) 60%, var(--card));
}
#tab-emanetler tfoot td {
  border-top: 2px solid var(--border);
  border-bottom: 0;
  font-weight: 800;
  background: color-mix(in oklab, var(--bg-alt) 45%, var(--card));
}