/* Terazi — bilesenler: buton, form, tablo, kart, modal, rozet, sekme
 *
 * Gorsel yon: Swiss / teknik disiplin.
 *   · Degrade, text-shadow ve ic parlama (inset highlight) YOK. Bunlar 2010'lar
 *     "parlak" dilinin kalintisiydi ve her temada elle ezilmek zorundaydi.
 *   · Renk anlam tasir: dolgu butonun yazi rengi --on-fill / --on-bright
 *     belirtecinden gelir ve kontrasti tools/tema-uret.js ile olculur.
 *     (Eskiden beyaz yazi parlak yesil dolguda 2.34:1 idi ve text-shadow ile
 *     gizleniyordu; artik koyu yazi kullaniliyor, 8.4:1.)
 *   · Para ve adet sutunlari tabular-nums ile hizalanir.
 *   · Hareket: renk gecisi kisa; basma geri bildirimi 1px yer degistirme.
 */

/* ─────────────────────────────────────────────── butonlar */
.btn {
  padding: 6px var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
  /* Varsayilan buton notr yuzey — eskiden arka plani hic tanimli degildi ve
     tarayici gri butonuna dusuyordu. */
  background: var(--card);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--e1);
  text-shadow: none;
  position: relative;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn::before { content: none; }

/* Uzerine gelince vurgu kenari + temanin renginde yumusak isik. */
.btn:hover {
  background: var(--card-hover);
  border-color: var(--accent);
  box-shadow: 0 6px 16px -10px color-mix(in oklab, var(--accent) 70%, transparent);
}
/* Basma geri bildirimi: bastirma. */
.btn:active { transform: translateY(1px); box-shadow: var(--e1); }
.btn:disabled,
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.btn-lg {
  padding: 11px var(--sp-5);
  font-size: var(--fs-base);
  border-radius: var(--r-lg);
}

/* Dolgu cesitleri — sinif adlari korundu (yuzlerce yerde kullaniliyor),
   yalnizca gorunum degisti. Yazi rengi belirtecten gelir. */
.btn-blue   { background: var(--accent-fill); color: var(--on-fill);   border-color: var(--accent-fill); box-shadow: 0 8px 20px -12px color-mix(in oklab, var(--accent-fill) 90%, transparent); }
.btn-red    { background: var(--red-fill);    color: var(--on-fill);   border-color: var(--red-fill); }
.btn-green  { background: var(--green);       color: var(--on-bright); border-color: var(--green); }
.btn-yellow { background: var(--yellow);      color: var(--on-bright); border-color: var(--yellow); }
.btn-purple { background: var(--purple);      color: var(--on-bright); border-color: var(--purple); }

/* Dolgu butonlarda hover rengi degistirmez — parlaklikla kademe verir,
   boylece kontrast garantisi bozulmaz. */
.btn-blue:hover, .btn-red:hover, .btn-green:hover,
.btn-yellow:hover, .btn-purple:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ─────────────────────────────────────────────── odak
 * Tek bir odak dili: her etkilesimli ogede ayni halka. */
.btn:focus-visible,
.nav-item:focus-visible,
.nav-group-header:focus-visible,
.pager button:focus-visible,
th:focus-visible,
details summary:focus-visible,
.sub-tab:focus-visible,
.tema-kart:focus-visible,
.depo-kart:focus-visible,
.il-kart:focus-visible,
.sidebar-toggle:focus-visible,
.fg input:focus-visible,
.fg select:focus-visible,
.fg textarea:focus-visible,
.filter-bar input:focus-visible,
.filter-bar select:focus-visible,
.row-menu button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* ─────────────────────────────────────────────── form */
.fg { margin-bottom: var(--sp-3); }

.fg label {
  display: block;
  font-size: var(--fs-micro);
  color: var(--muted);
  margin-bottom: var(--sp-1);
  text-transform: uppercase;
  letter-spacing: var(--ls-baslik);
  font-weight: 700;
}
.fg.req > label::after { content: ' *'; color: var(--red); font-weight: 700; }

.fg input,
.fg select,
.fg textarea {
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-md);
  /* 3:1 kontrast garantili kenarlik — form sinirlari gorunur olmali. */
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease);
}

.fg input:hover,
.fg select:hover,
.fg textarea:hover { border-color: var(--muted); }

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--odak-ic);
}

.fg input::placeholder,
.fg textarea::placeholder { color: var(--muted); opacity: .8; }

/* Yerel acilir liste menusu temayi izlesin. */
select option { background: var(--card); color: var(--text); }
select option:checked,
select option:hover { background: var(--accent-fill); color: var(--on-fill); }

/* ─────────────────────────────────────────────── coklu secim (sorumlu atamasi)
   Musteri birden fazla kisiye atanabilir. Yerel <select multiple> bu formlarda
   hem dar hem de ctrl-tikla ogrenilen bir etkilesim gerektiriyor; onun yerine
   dokunmatikte de calisan, secili durumu net okunan etiket-anahtarlar. */
.cs-kutu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  max-height: 132px;
  overflow-y: auto;
  box-sizing: border-box;
}
.cs-kutu:focus-within { border-color: var(--accent); box-shadow: var(--odak-ic); }

.cs-etiket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-micro);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cs-etiket:hover { background: var(--card-hover); border-color: var(--accent); }
.cs-etiket input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-etiket:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-etiket:has(input:checked) {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-fill);
}

/* Kutucuk isareti — secili olmayanda bos cerceve, secilide onay. */
.cs-etiket .cs-im {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border-radius: 3px;
  border: 1.5px solid currentColor;
  opacity: .55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}
.cs-etiket:has(input:checked) .cs-im { opacity: 1; }
.cs-etiket:has(input:checked) .cs-im::after { content: '✓'; font-weight: 700; }

/* Birincil rozeti: listenin ilk secili ogesi; B2B senkronu ve eski tekil
   `sorumlu` alani bu kisiyi gorur. Sirasi Tanimlar'daki kategori sirasidir. */
.cs-birincil {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--ls-baslik);
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: rgba(var(--card-rgb), .35);
}
.cs-bos { font-size: var(--fs-micro); color: var(--muted); padding: 4px 2px; }
.cs-ozet { font-size: var(--fs-micro); color: var(--muted); margin-top: var(--sp-1); }

/* ─────────────────────────────────────────────── kartlar (KPI) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* KPI karti: ustte vurgu cizgisi (soldan kaybolan), sag ust kosede temanin
   renginde hafif isik, buyuk rakam. Uzerine gelince 2px yukselir — kartlarin
   cogu tiklaninca ilgili ekrana gidiyor, hareket bunu hissettirir. */
.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--golge-kart);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.kpi::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--kpi-renk, var(--accent)), transparent 75%);
  opacity: .6;
  transition: opacity var(--dur) var(--ease);
}
.kpi::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -48px;
  top: -48px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--kpi-renk, var(--accent)) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.kpi:hover {
  border-color: color-mix(in oklab, var(--kpi-renk, var(--accent)) 35%, var(--border));
  box-shadow: var(--golge-kart-ust);
  transform: translateY(-2px);
}
.kpi:hover::before { opacity: 1; }

/* Etiket duz yazi (versal degil) — ozet kutusunda once etiket okunur. */
.kpi .lbl {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.kpi .val {
  font-size: clamp(22px, 1.1vw + 14px, 30px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-strong);
  margin: 10px 0 var(--sp-1);
  letter-spacing: -.03em;
  text-shadow: none;
  /* Tek basina duran buyuk rakam oransal: tabular-nums buyuk puntoda "121"i
     bosluklu gosterir. Sabit genislik yalniz alt alta hizalanan sutunlarda. */
  font-variant-numeric: proportional-nums;
  font-feature-settings: normal;
}

.kpi .sub {
  font-size: var(--fs-micro);
  color: var(--muted);
  letter-spacing: .01em;
  opacity: 1;
}

/* Renkli KPI: rakam metin renginde kalir, kartin kimlik rengi (--kpi-renk)
   etiketin onundeki noktada, ust cizgide ve kose isiginda. */
.kpi-renkli .lbl::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--kpi-renk);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--kpi-renk) 18%, transparent);
}
.kpi-tik { cursor: pointer; }
.kpi-tik:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Dort sutunlu KPI izgarasi (Ana Sayfa'daki 8 kart 5+3 degil 4+4 dizilsin). */
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ─────────────────────────────────────────────── tablo */
.tw {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow-x: auto;
  margin-bottom: var(--sp-5);
  box-shadow: var(--golge-kart);
  position: relative;
  transition: border-color var(--dur) var(--ease);
}
.tw::before { content: none; }

/* Tablo baslik seridi: kartin ustunden yuzeye yumusak gecis. */
.th {
  padding: 14px var(--sp-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-alt) 55%, var(--card)), var(--card));
  position: relative;
}

/* Bolum basligi: duz yazi (eskiden mikro versal), onunde vurgu renginde kisa cubuk. */
.th h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md);
  color: var(--text-strong);
  text-transform: none;
  letter-spacing: -.01em;
  font-weight: 700;
  text-shadow: none;
}
.th h3::before {
  content: '';
  flex: none;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--accent);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

th {
  text-align: left;
  color: var(--muted);
  padding: 10px var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-baslik);
  white-space: nowrap;
  background: color-mix(in oklab, var(--bg-alt) 70%, var(--card));
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
th:hover { color: var(--text-strong); }
th.sort-asc::after  { content: ' ↑'; color: var(--accent); font-size: var(--fs-micro); }
th.sort-desc::after { content: ' ↓'; color: var(--accent); font-size: var(--fs-micro); }

/* Metin hucresi kelime arasindan kirilabilir. Eskiden butun hucreler nowrap'ti:
   "PERAKENDE / SERBEST MUSTERI …" gibi uzun adlar tabloyu ekrandan tasiriyor,
   son sutunlar (Fatura, Detay) icin saga kaydirmak gerekiyordu (2026-09-14).
   Kirilmamasi gerekenler asagida ayrica tutuluyor: tutar sutunlari (.r),
   rozetler, dugmeler, marka etiketleri. Tarih ve kodlar zaten bosluksuz. */
td {
  padding: 9px var(--sp-3);
  border-bottom: 1px solid var(--border-light);
  white-space: normal;
  color: var(--text);
  transition: background-color var(--dur-fast) var(--ease);
}
td.r,
td .badge,
td .btn,
td .mk { white-space: nowrap; }
/* Satir vurgusu temanin renginde cok hafif — hangi satirda oldugun belli olsun. */
tr:hover td { background: color-mix(in oklab, var(--accent) 7%, var(--card)); }
.r { text-align: right; }

/* ─────────────────────────────────────────────── rozet
 * Anlam rengi + ayni renkte kenarlik + cok hafif tint.
 * color-mix desteklenmezse tint dusler, rozet yine okunur kalir. */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid color-mix(in oklab, currentColor 45%, transparent);
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}
.bg-green  { color: var(--green);  background: color-mix(in srgb, var(--green) 14%, transparent); }
.bg-red    { color: var(--red);    background: color-mix(in srgb, var(--red) 14%, transparent); }
.bg-blue   { color: var(--blue);   background: color-mix(in srgb, var(--blue) 14%, transparent); }
.bg-yellow { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 14%, transparent); }
.bg-purple { color: var(--purple); background: color-mix(in srgb, var(--purple) 14%, transparent); }
/* Notr rozet — durum bildirmeyen etiketler icin (tur, kanal, sayfa vb.). */
.bg-notr   { color: var(--muted);  background: color-mix(in srgb, var(--muted) 12%, transparent); }

/* ─────────────────────────────────────────────── bildirim */
/* Buzlu cam bildirim; sagdan yayla girer (toastIn — 05-sayfa.css). */
.toast {
  background: color-mix(in oklab, var(--card) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
          backdrop-filter: saturate(1.3) blur(12px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  color: var(--text-strong);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 12px;
  box-shadow: var(--golge-kart-ust);
  font-size: var(--fs-base);
  font-weight: 600;
  min-width: 240px;
  max-width: 420px;
  pointer-events: auto;
  animation: toastIn .38s var(--yay);
}
.toast.err { border-color: var(--border-strong); border-left-color: var(--red); }

/* ─────────────────────────────────────────────── modal */
.modal-bg { background: rgba(0, 0, 0, .62); }

.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  width: 420px;
  max-width: 90vw;
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .2);
  position: relative;
  margin: auto;
}
/* ust kenarda ortadan yayilan ince isik — giris ekranindaki vurgunun kucuk yankisi */
.modal::before {
  content: '';
  position: absolute;
  left: 28px;
  right: 28px;
  top: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .75;
  pointer-events: none;
}

.modal h3 {
  color: var(--text-strong);
  margin-bottom: var(--sp-5);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: -.02em;
  text-shadow: none;
}

/* ─────────────────────────────────────────────── sekmeler
 * Segment kontrol: cukur bir yuva icinde secili sekme yuzeye cikar. */
.sub-tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: calc(100% - 2 * var(--sp-4));
  margin: var(--sp-3) var(--sp-4);
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  flex-wrap: wrap;
  background: var(--bg-alt);
}

.sub-tab {
  padding: 7px 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.sub-tab:hover { color: var(--text-strong); background: color-mix(in oklab, var(--card) 60%, transparent); }
.sub-tab.active {
  background: var(--card);
  color: var(--text-strong);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 0 0 1px var(--border);
}

/* ─────────────────────────────────────────────── filtre seridi */
.filter-bar {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  align-items: center;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  background: transparent;
}

.filter-bar input,
.filter-bar select {
  padding: 7px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.filter-bar input { width: 210px; }
.filter-bar input:focus,
.filter-bar select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--odak-ic);
}
.filter-bar label {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-baslik);
  font-weight: 600;
}

/* ═══ VERI YUKLENIYOR SERIDI ═══
   Giris iki fazli: kabuk once aciliyor, agir veri arkadan geliyor.
   Bu serit o araligi GORUNUR kiliyor. Sessiz birakilsaydi kullanici bos
   listeyi 'kayit yok' sanardi. */
.veri-yukle-serit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--accent2);
  background: rgba(var(--accent2-rgb), .10);
  border-bottom: 1px solid var(--border);
}
.veri-yukle-serit.hata {
  color: var(--red);
  /* --red-rgb belirteci YOK (01-token.css uretiliyor, elle eklenmez).
     Notr bir koyulastirma + kirmizi metin ayni uyari etkisini veriyor. */
  background: rgba(0, 0, 0, .16);
  border-bottom-color: var(--red);
}
.veri-yukle-serit .vy-nokta {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: vyNabiz 1s ease-in-out infinite;
}
@keyframes vyNabiz { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .veri-yukle-serit .vy-nokta { animation: none; opacity: .8 }
}