/* ==========================================================================
   Nexus Temel Stil Katmanı
   --------------------------------------------------------------------------
   tokens.css'ten SONRA yüklenir. Nexus'un görsel dilini birebir üretir, ama:
     · etkileşimli her şey semantik elemandır (button / a / input)
     · :focus-visible istisnasız her etkileşimli elemanda vardır
     · yedi paralel rozet sistemi tek .badge'e indirgenmiştir
     · switch ve checkbox gerçek <input type="checkbox">'tır
     · disabled / busy / boş durumları tanımlıdır

   Sınıf adları mevcut panelle uyumlu tutuldu ki taşıma sırasında markup
   birebir eşleşsin. Yeni bir şey eklerken buradaki kalıba uy.
   ========================================================================== */

/* --- Sıfırlama ve taban --------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--body-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--fw-semibold);
  color: var(--heading);
  line-height: var(--lh-tight);
}
h1 { font-size: var(--fs-xl); }    /* sayfa başlığı  */
h2 { font-size: var(--fs-2xl); }   /* hero başlığı   */
h3 { font-size: var(--fs-lg); }    /* kart başlığı   */
h4 { font-size: var(--fs-base); }

p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
svg { flex: 0 0 auto; }

a {
  color: var(--primary-strong);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
a:hover { text-decoration: underline; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  font-weight: var(--fw-medium);
  color: var(--heading);
  overflow-wrap: anywhere;
}

.muted { color: var(--muted); }
.hidden { display: none !important; }

/* Görsel olarak gizli ama ekran okuyucuya açık — ikon-only kontrollerde
   aria-label yerine kullanılabilir, ve tablo başlıklarını gizlemek için. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- ODAK ----------------------------------------------------------------
   Nexus'un tek erişilebilirlik başarısı buydu; kapsamı genişletildi.
   :focus-visible kullanmak, fare tıklamasında halka göstermez ama klavye
   kullanıcısını asla yalnız bırakmaz.                                       */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Yapışkan topbar odaklanan içeriği örtmesin (WCAG 2.4.11) */
:target,
[id] { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }

/* ==========================================================================
   Butonlar
   ========================================================================== */

:root { --nxf-h: 36px; --nxf-h-sm: 30px; --nxf-h-lg: 44px; --on-fill: #fff; }

.btn {
  appearance: none;
  min-height: var(--nxf-h);
  border: 1px solid transparent;
  background: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  cursor: pointer;
  transition: var(--dur);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  padding: 0 16px;
}
.btn.sm, .btn-sm { min-height: var(--nxf-h-sm); padding: 0 var(--space-5); font-size: var(--fs-md); }
.btn.lg, .btn-lg { min-height: var(--nxf-h-lg); padding: 0 20px; }
.btn svg { width: var(--icon-sm); height: var(--icon-sm); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Yükleniyor: metin yerinde kalır (düzen zıplamasın), yanına dönen halka. */
.btn[aria-busy="true"] { pointer-events: none; opacity: .8; }
.btn[aria-busy="true"]::after {
  content: "";
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-circle);
  animation: nx-spin .6s linear infinite;
}
@keyframes nx-spin { to { transform: rotate(360deg); } }

.btn-primary {
  background: var(--primary-fill);   /* beyaz metin taşıdığı için -fill */
  color: var(--on-fill);
}
.btn-primary:hover { background: var(--primary-hover); }

.btn-primary.full { width: 100%; }

.btn-ghost {
  background: var(--card);
  color: var(--primary-strong);
  border-color: var(--primary);
}
.btn-ghost:hover { background: var(--primary-soft); }

.btn-soft {
  background: var(--body-bg);
  color: var(--text);
  border-color: var(--input-border);
}
.btn-soft:hover { background: var(--pill-m-bg); border-color: var(--muted); }

.btn-danger {
  background: var(--card);
  color: var(--danger-strong);
  border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger-soft); }
.btn-danger-solid { background: var(--danger-fill); color: var(--on-fill); border-color: var(--danger-fill); }
.btn-danger-solid:hover { background: var(--danger-strong); border-color: var(--danger-strong); }

/* Tablo/araç çubuğu içi mikro buton. Hover'da tamamen dolar — güçlü
   affordance, Nexus'un en karakteristik buton davranışı.
   min-height 24px: WCAG 2.5.8 dokunma hedefi alt sınırı.                    */
.btn-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 var(--space-5);
  min-height: var(--nxf-h-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--muted-strong);
  font-family: inherit;
  font-size: var(--fs-code);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--dur);
}
.btn-row svg { width: var(--icon-xs); height: var(--icon-xs); }
.btn-row:hover {
  background: var(--primary-fill);
  border-color: var(--primary-fill);
  color: var(--on-fill);
}

/* İkon-only buton. aria-label ZORUNLU — yoksa ekran okuyucuda sessizdir. */
.icon-btn {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  border-radius: var(--radius-circle);
  color: var(--icon-ink);
  cursor: pointer;
  position: relative;
  transition: var(--dur);
}
.icon-btn svg { width: var(--icon-md); height: var(--icon-md); }
.icon-btn:hover { background: var(--body-bg); }
.icon-btn .dot {
  position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px;
  border-radius: var(--radius-circle);
  background: var(--danger);
  border: 1.5px solid var(--dot-ring);
}

/* Metin bağlantısı — kart başlığındaki "Tümünü gör →" gibi */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 30px;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--primary-strong);
  cursor: pointer;
}
.link:hover { text-decoration: underline; }

/* ==========================================================================
   Kart — Nexus'un temel yüzeyi
   Kenarlık + çok yumuşak gölge BİRLİKTE. Sınırı gölge değil kenarlık çizer.
   ========================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;              /* uzun API yolları ızgarayı patlatmasın */
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-7) var(--space-8);
  border-bottom: 1px solid var(--border);
}
.card-head h3 { font-size: var(--fs-lg); }
.card-head .alt { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

.card-body { padding: var(--space-8); }

/* Tablo barındıran gövde: tablo kenarları karta yaslansın */
.card-body.flush { padding: var(--space-1) var(--space-7); overflow-x: auto; }

.card-foot {
  padding: var(--space-5) var(--space-8);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ==========================================================================
   KPI / istatistik kartı
   Kural: çıplak sayı yok — her metrik yanında karşılaştırma taşır.
   ========================================================================== */

.stat {
  padding: 18px var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.stat .t { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--muted); margin-bottom: var(--space-3); }
.stat .v { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); color: var(--heading); line-height: 1.2; }
.stat .chg { font-size: var(--fs-xs); margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-1); }
.chg.up   { color: var(--success-strong); }
.chg.down { color: var(--danger-strong); }
.stat .ic {
  width: 46px; height: 46px;
  border-radius: var(--radius-circle);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.stat .ic svg { width: var(--icon-lg); height: var(--icon-lg); }

/* Yumuşak ikon kutusu renkleri — uygulamadaki TÜM ikon kutularında kullanılır */
.bg-p { background: var(--primary-soft); color: var(--primary-strong); }
.bg-s { background: var(--success-soft); color: var(--success-strong); }
.bg-i { background: var(--info-soft);    color: var(--info-strong); }
.bg-w { background: var(--warning-soft); color: var(--warning-strong); }
.bg-d { background: var(--danger-soft);  color: var(--danger-strong); }

/* ==========================================================================
   Rozet — tek bileşen, eski yedi sistemin yerine
   .badge + ton sınıfı + isteğe bağlı .pill / .mono / .xs
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  padding: 2px 9px;
  border-radius: 12px;
  white-space: nowrap;
}
.badge.pill { border-radius: var(--radius-pill); }
.badge.xs   { font-size: var(--fs-2xs); padding: 1px 6px; border-radius: var(--radius-xs); }
.badge.mono { font-family: var(--font-mono); font-weight: var(--fw-bold); border-radius: var(--radius-xs); }

.badge.tone-primary { background: var(--primary-soft); color: var(--primary-strong); }
.badge.tone-success { background: var(--success-soft); color: var(--success-strong); }
.badge.tone-info    { background: var(--info-soft);    color: var(--info-strong); }
.badge.tone-warning { background: var(--warning-soft); color: var(--warning-strong); }
.badge.tone-danger  { background: var(--danger-soft);  color: var(--danger-strong); }
.badge.tone-neutral { background: var(--pill-m-bg);    color: var(--pill-m-fg-strong); }

/* Anahatlı varyant — durum rozeti olarak */
.badge.outline { background: none; border: 1px solid currentColor; }

/* Genel yükleme çubuğu — api() açık istek sayacı > 0 iken üst çubuğun hemen altında */
#nx-yukleme {
  position: fixed; left: 0; right: 0; top: var(--topbar-h); height: 3px;
  z-index: calc(var(--z-topbar) + 1); pointer-events: none;
  background: var(--primary-soft); opacity: 0; transition: opacity .15s;
  overflow: hidden;
}
#nx-yukleme::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: var(--primary); border-radius: 2px;
  animation: nx-yukleme-kay 1.1s ease-in-out infinite;
}
#nx-yukleme.acik { opacity: 1; }
@keyframes nx-yukleme-kay { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { #nx-yukleme::before { animation-duration: 2.5s; } }

/* API anahtarı kapsam hücresi: servis çipleri */
.kapsam-hucre { max-width: 360px; }
.kapsam-cipler { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.kapsam-cip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-2xs); line-height: 1.5; padding: 1px 7px;
  border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--pill-m-bg); color: var(--pill-m-fg-strong);
  border: 1px solid transparent;
}
.kapsam-cip b { font-weight: var(--fw-bold); font-family: var(--font-mono); }
.kapsam-cip.tam { background: var(--primary-soft); color: var(--primary-strong); }
.kapsam-cip.daha { background: none; border-color: var(--border); color: var(--muted); }

/* Durum noktası — rozetin içinde veya tek başına */
.dot-state {
  width: 7px; height: 7px;
  border-radius: var(--radius-circle);
  background: currentColor;
  flex: 0 0 auto;
}
.st { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.st.on  { color: var(--success-strong); }
.st.off { color: var(--muted); }
.st.off .dot-state { background: var(--state-off); }

/* ==========================================================================
   Tablo
   ========================================================================== */

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
/* SÜTUN başlığı — yalnız thead. tbody içindeki <th scope="row"> satır
   başlığıdır ve normal hücre gibi görünmelidir; bu ayrımı yapmazsan
   satır başlıkları büyük harfe döner. */
.tbl thead th {
  text-align: left;
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--muted-strong);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl tbody th,
.tbl td {
  padding: 11px var(--space-6);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
/* Satır başlığı — hücre gibi görünür ama biraz vurgulu (sıra önemli:
   bu blok yukarıdakinden SONRA gelmeli, yoksa rengi ezilir). */
.tbl tbody th {
  text-align: left;
  font-weight: var(--fw-medium);
  color: var(--heading);
}
.tbl tr:last-child td,
.tbl tr:last-child th { border-bottom: none; }
.tbl tbody tr:hover > td, .tbl tbody tr:hover > th { background: var(--row-hover); }
.tbl .right { text-align: right; white-space: nowrap; }

/* Sıralanabilir başlık — <button> içerir, th'nin kendisi tıklanmaz */
.tbl th button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.tbl th button:hover { color: var(--heading); }

/* ==========================================================================
   Form
   ========================================================================== */

.field { margin-bottom: var(--space-7); }
.field > label {
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--heading);
  margin-bottom: var(--space-2);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 9px var(--space-5);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--input-bg);
  transition: var(--dur);
}
.field textarea { min-height: 76px; resize: vertical; line-height: var(--lh-base); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
/* Klavye kullanıcısı için ayrıca dış halka — renk körü kullanıcı yalnız
   kenarlık rengi değişimini fark etmeyebilir. */

.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  background: var(--body-bg);
  color: var(--muted);
  cursor: not-allowed;
}

.field .hint { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: var(--space-1); }

/* Hata durumu — renk TEK başına yeterli değil, metin de gerekir */
.field.error input,
.field.error select,
.field.error textarea { border-color: var(--danger); }
.field .err {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--danger-strong);
  margin-top: var(--space-1);
}

.field.required > label::after { content: " *"; color: var(--danger-strong); }

/* Anahtar (switch) — gerçek checkbox, klavyeyle çalışır */
.switch {
  appearance: none;
  width: 38px; height: 21px;
  border-radius: 12px;
  background: var(--control-off);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  margin: 0;
  transition: background var(--dur);
}
.switch::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-radius: var(--radius-circle);
  background: #fff;
  top: 2.5px; left: 2.5px;
  transition: transform var(--dur);
}
.switch:checked { background: var(--success); }
.switch:checked::after { transform: translateX(17px); }
.switch:disabled { opacity: .55; cursor: not-allowed; }

/* Bilinen sınır: --success beyaz üzerinde 2.25:1, yani açık anahtarın
   izi WCAG 1.4.11'in (3:1) altında kalıyor. Doygun yeşil gözle net
   seçiliyor ama ölçüm geçmiyor — marka rengini korumak adına varsayılan
   bırakıldı, yüksek kontrast modunda düzeliyor. */
[data-contrast="yuksek"] .switch:checked { background: var(--success-fill); }
[data-contrast="yuksek"] .chk:checked,
[data-contrast="yuksek"] .chk:indeterminate { background: var(--primary-fill); border-color: var(--primary-fill); }

/* Onay kutusu */
.chkrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-md);
  color: var(--text);
  cursor: pointer;
  min-height: 24px;
}
.chk {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--control-off);
  background: var(--input-bg);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  margin: 0;
  transition: var(--dur-fast);
}
/* `.field input` (tam genişlik, dolgu) onay kutusunu ezmesin — form alanı içindeki
   onay kutuları da 18px kare kalır. */
.field .chk {
  width: 18px; height: 18px;
  padding: 0;
  border: 1.5px solid var(--control-off);
  border-radius: var(--radius-xs);
}
.field .chk:focus { box-shadow: none; }
.chk:checked, .field .chk:checked { background: var(--primary); border-color: var(--primary); }
.chk:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1.5px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.chk:indeterminate { background: var(--primary); border-color: var(--primary); }
.chk:indeterminate::after {
  content: "";
  position: absolute;
  left: 3px; top: 6.5px;
  width: 9px; height: 2px;
  background: #fff;
  border: 0;
  transform: none;
}

/* Kart-radyo (rol seçici gibi) */
.rol-sec { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.rol-opt {
  flex: 1 1 0;
  min-width: 130px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  font-size: var(--fs-md);
  cursor: pointer;
  transition: var(--dur);
}
.rol-opt:hover { border-color: var(--primary); }
.rol-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.rol-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.rol-opt b { display: block; color: var(--heading); margin-bottom: 3px; }
.rol-opt span { color: var(--muted); font-size: var(--fs-xs); }
.rol-opt input { position: absolute; opacity: 0; pointer-events: none; }

/* Arama */
.search { position: relative; flex: 0 1 250px; min-width: 0; }
.search input {
  width: 100%;
  height: var(--nxf-h);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  padding: 0 var(--space-5) 0 34px;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--text);
}
.topbar .search input { background: var(--body-bg); border-color: transparent; }
.search input:focus { outline: none; box-shadow: var(--ring); border-color: var(--primary); }
.search svg {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  width: var(--icon-sm); height: var(--icon-sm);
  color: var(--muted);
  pointer-events: none;
}

/* ==========================================================================
   Sekmeler — role="tablist" ile birlikte kullanılır
   ========================================================================== */

.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-8);
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  position: relative;
  border: 0;
  background: none;
  padding: var(--space-5) var(--space-8);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--muted-strong);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-med);
}
.tab-btn::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform var(--dur-slow);
}
.tab-btn:hover { color: var(--heading); }
.tab-btn[aria-selected="true"] {
  color: var(--primary-strong);
  font-weight: var(--fw-semibold);   /* renk tek işaret olmasın */
}
.tab-btn[aria-selected="true"]::after { transform: scaleX(1); }

/* ==========================================================================
   Açılır panel (dropdown / menü)
   ========================================================================== */

.drop {
  position: absolute;
  top: calc(100% + var(--space-4));
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-drop);
  z-index: var(--z-drop);
  overflow: hidden;
  animation: nx-drop-in var(--dur) ease;
}
@keyframes nx-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.drop-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--heading);
  border-bottom: 1px solid var(--border);
}
.drop-scroll { max-height: 300px; overflow-y: auto; }
.drop-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: var(--space-4) var(--space-6);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-md);
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.drop-item > svg { width: var(--icon-nav); height: var(--icon-nav); color: var(--muted); }
.drop-item .t { color: var(--heading); }
.drop-item .s { font-size: var(--fs-xs); color: var(--muted); }
.drop-item:hover { background: var(--row-hover); }
.drop-item[aria-current="true"] { background: var(--primary-soft); }
.drop-item.danger, .drop-item.danger > svg { color: var(--danger-strong); }
.drop-sep { height: 1px; background: var(--border); margin: var(--space-1) 0; border: 0; }
.drop-foot {
  display: block; width: 100%;
  padding: 11px;
  border: 0; border-top: 1px solid var(--border);
  background: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--primary-strong);
  cursor: pointer;
}
.drop-foot:hover { background: var(--row-hover); }

/* ==========================================================================
   Modal — <dialog> tabanlı: odak tuzağı, Esc ve inert bedava gelir
   ========================================================================== */

.modal {
  padding: 0;
  border: 0;
  background: var(--card);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  width: 640px;
  max-width: calc(100vw - var(--space-8));
  max-height: 86vh;
  overflow: hidden;
}
.modal::backdrop { background: rgba(0, 0, 0, .45); }
.modal.modal-sm { width: 440px; }
.modal-body > p:first-child { margin-top: 0; }
.modal-body > p:last-child { margin-bottom: 0; }
.modal > form,
.modal > .modal-inner { display: flex; flex-direction: column; max-height: 86vh; }
/* Form modal-inner içindeyse (başlık/gövde/alt bilgi formun içinde) aynı sütun düzeni forma da uygulanır; gövde kaydırılabilir kalır. */
.modal > .modal-inner > form { display: flex; flex-direction: column; min-height: 0; max-height: 86vh; }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) 18px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { font-size: var(--fs-lg); }
.modal-body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-6) 18px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-5) 18px;
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   Liste satırı — tek kalıp, yedi kopyanın yerine
   hover = --row-hover · seçili = --primary-soft · ayırıcı son satırda yok
   ========================================================================== */

.row-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  padding: 11px var(--space-5);
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius-lg);
  background: none;
  font-family: inherit;
  font-size: var(--fs-md);
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: var(--dur);
}
.row-item:hover { background: var(--row-hover); }
.row-item[aria-current="true"] { background: var(--primary-soft); }
.row-item.unread { border-left-color: var(--primary); background: var(--primary-soft); }
.row-item .av {
  width: 34px; height: 34px;
  border-radius: var(--radius-circle);
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.row-item .ic {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.row-item .t { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--heading); }
.row-item .s { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; margin-top: 2px; }
.row-item .z { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--space-1); }

/* Anahtar–değer satırı */
.kv {
  display: flex; justify-content: space-between; gap: var(--space-5);
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-md);
}
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); }
.kv .v { color: var(--heading); font-weight: var(--fw-medium); min-width: 0; overflow-wrap: anywhere; text-align: right; }

/* ==========================================================================
   Boş / yükleniyor / hata durumları
   Mevcut panelin en büyük eksiği. Her liste ve her kart bunlara sahip olmalı.
   ========================================================================== */

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: 44px var(--space-8);
  color: var(--muted);
}
.state .ic {
  width: 48px; height: 48px;
  border-radius: var(--radius-circle);
  background: var(--body-bg);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.state .ic svg { width: var(--icon-lg); height: var(--icon-lg); }
.state .t { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--heading); }
.state .s { font-size: var(--fs-sm); max-width: 42ch; }
.state.compact { padding: var(--space-8); }

/* İskelet (skeleton) — yükleniyor durumunda düzen zıplamasın */
.skeleton {
  background: linear-gradient(90deg, var(--body-bg) 25%, var(--pill-m-bg) 37%, var(--body-bg) 63%);
  background-size: 400% 100%;
  animation: nx-shimmer 1.4s ease infinite;
  border-radius: var(--radius-xs);
  color: transparent !important;
  user-select: none;
}
@keyframes nx-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ==========================================================================
   Bildirim (toast) — mevcut panelde YOK, eklendi
   aria-live bölgesi olmadan ekran okuyucu başarı/hata mesajını duyurmaz.
   ========================================================================== */

.toast-wrap {
  position: fixed;
  bottom: var(--space-8); right: var(--space-8);
  z-index: var(--z-tooltip);
  display: flex; flex-direction: column; gap: var(--space-3);
  max-width: 360px;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-drop);
  font-size: var(--fs-md);
  animation: nx-drop-in var(--dur-med) ease;
}
.toast.success { border-left-color: var(--success); }
.toast.warning { border-left-color: var(--warning); }
.toast.danger  { border-left-color: var(--danger); }
.toast .t { font-weight: var(--fw-semibold); color: var(--heading); }
.toast .s { color: var(--muted); margin-top: 2px; }

/* ==========================================================================
   Segment kontrolü — mod anahtarı, dönem seçici, dil seçici
   Tek bir dönem sözlüğü kullan: 7g / 30g / 90g. Ekranlar arası değiştirme.
   ========================================================================== */

.mode-sw {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--body-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.ms-opt {
  border: 0;
  background: none;
  padding: 4px 11px;
  min-height: 24px;
  border-radius: 20px;
  font-family: inherit;
  font-size: var(--fs-code);
  font-weight: var(--fw-semibold);
  color: var(--muted-strong);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--dur);
}
.ms-opt:hover { color: var(--heading); }
.ms-opt[aria-pressed="true"],
.ms-opt[aria-selected="true"] { background: var(--primary-fill); color: var(--on-fill); }
/* Canlı / Test ortam anahtarı — anlamlı renkler */
.mode-sw.env .ms-opt[aria-pressed="true"] { background: var(--success-fill); }
.mode-sw.env .ms-opt.test[aria-pressed="true"] { background: var(--warning-fill); }

/* ==========================================================================
   Avatar
   ========================================================================== */

.av {
  width: 34px; height: 34px;
  border-radius: var(--radius-circle);
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.sm { width: 28px; height: 28px; font-size: var(--fs-xs); }
.av.lg { width: 40px; height: 40px; font-size: var(--fs-base); }

.avatar {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 5px var(--space-3) 5px 5px;
  border: 0;
  background: none;
  border-radius: var(--radius);
  font-family: inherit;
  cursor: pointer;
}
.avatar:hover { background: var(--body-bg); }
.avatar .nm { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--heading); }
.avatar .rl { font-size: var(--fs-xs); color: var(--muted); }

/* Organizasyon seçici */
.org-pill {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 6px var(--space-5);
  border: 0;
  background: var(--body-bg);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  min-width: 0;
}
.org-pill b { color: var(--heading); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   Mobil sekme çubuğu ve karartma katmanı
   ========================================================================== */

.tabbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--tabbar-h);
  background: var(--card);
  border-top: 1px solid var(--border);
  z-index: var(--z-tabbar);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar a, .tabbar button {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  border: 0; background: none;
  font-family: inherit;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--muted-strong);
  text-decoration: none;
  cursor: pointer;
}
.tabbar svg { width: var(--icon-md); height: var(--icon-md); }
.tabbar [aria-current="page"] { color: var(--primary-strong); }
@media (max-width: 768px) { .tabbar { display: flex; } }

.overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow);
  border: 0;
}
.app.nav-open .overlay { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   İlerleme
   ========================================================================== */

.progress {
  height: 5px;
  background: var(--body-bg);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 5px;
}
.progress > i {
  display: block; height: 100%;
  border-radius: 3px;
  background: var(--primary);
  transition: width var(--dur-slow);
}

/* ==========================================================================
   Kod bloğu
   ========================================================================== */

.codeblock {
  background: var(--code-bg);
  border-radius: var(--radius);
  padding: var(--space-7) 18px;
  overflow-x: auto;
  max-width: 100%;
}
.codeblock pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  line-height: var(--lh-loose);
  color: var(--code-fg);
  white-space: pre;
}
.codeblock .cm { color: var(--code-comment); }
.codeblock .st { color: var(--code-string); }
.codeblock .ky { color: var(--code-key); }
.codeblock .nu { color: var(--code-number); }
.codeblock .kw { color: var(--code-keyword); }

/* ==========================================================================
   Uyarı şeridi
   Kaydırma yazısı (marquee) KALDIRILDI — WCAG 2.2.2 ve okunabilirlik.
   Uzun metin gerekiyorsa kırp ve "detay" bağlantısı ver.
   ========================================================================== */

.alertbar {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--alertbar-h);
  padding: var(--space-2) var(--space-9);
  background: var(--alert-bg);
  border-bottom: 1px solid var(--alert-border);
  color: var(--alert-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  position: sticky;
  top: var(--topbar-h);
  z-index: var(--z-alert);
}
.alertbar svg { width: var(--icon-md); height: var(--icon-md); }
.alertbar .msg { flex: 1 1 auto; min-width: 0; }
.alertbar.crit { background: var(--alert-crit-bg); border-bottom-color: var(--alert-crit-bd); color: var(--alert-crit-fg); }
.alertbar.info { background: var(--alert-info-bg); border-bottom-color: var(--alert-info-bd); color: var(--alert-info-fg); }

/* ==========================================================================
   Sayfa kabuğu
   ========================================================================== */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sb-w);
  background: var(--card);
  border-right: 1px solid var(--border);
  position: fixed;
  inset: 0 auto 0 0;
  overflow: hidden auto;
  z-index: var(--z-sidebar);
  transition: width var(--dur-med), transform var(--dur-slow);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
}
/* Yayınlanan sürüm: menü altında küçük not (her dağıtımda artar). */
.sb-surum { margin: 0; padding: 12px 22px 16px; color: var(--muted); font-size: 12px; white-space: nowrap; text-align: left; }
.sb-brand {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 22px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--card);
  z-index: var(--z-brand);
}
.sb-brand .logo {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: var(--primary);
  color: var(--on-fill);
  display: flex; align-items: center; justify-content: center;
}
.sb-brand b { font-size: 1.0625rem; color: var(--heading); font-weight: var(--fw-semibold); }

.sb-section {
  padding: var(--space-6) 22px 5px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--section-fg);
  white-space: nowrap;
}

.sb-link {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 7px 22px 7px 44px;
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  font-family: inherit;
  font-size: var(--fs-md);
  text-align: left;
  color: var(--sidebar-link);
  cursor: pointer;
  min-height: 32px;
}
/* Gruplanmamış (düz) menü öğesi — .sb-link ile aynı davranış, girinti yok */
.sb-flat {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 9px 22px;
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  font-family: inherit;
  font-size: var(--fs-md);
  text-align: left;
  color: var(--sidebar-link);
  cursor: pointer;
  min-height: 32px;
}
.sb-flat svg, .sb-link svg { width: var(--icon-nav); height: var(--icon-nav); opacity: .8; }
.sb-link:hover, .sb-flat:hover { color: var(--primary-strong); background: var(--row-hover); }
.sb-link[aria-current="page"],
.sb-flat[aria-current="page"] {
  color: var(--primary-strong);
  background: color-mix(in oklab, var(--primary) 6%, transparent);
  border-left-color: var(--primary);
  font-weight: var(--fw-medium);
}

.main {
  flex: 1 1 auto;
  margin-left: var(--sb-w);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: margin-left var(--dur-med);
  /* Geniş tablo sayfayı yatay kaydırmasın: üst çubuk ne olursa olsun yerinde kalır (clip, sticky'yi bozmaz). */
  overflow-x: clip;
}

.topbar {
  height: var(--topbar-h);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 var(--space-9);
  gap: var(--space-6);
  position: sticky; top: 0;
  z-index: var(--z-topbar);
  min-width: 0;
}
.top-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

.content { padding: var(--space-9); flex: 1 1 auto; min-width: 0; }

/* --- Alt bilgi (footer) --------------------------------------------------
   Her sayfanın en altında proje adı bulunur. `.content` flex:1 olduğu için
   içerik kısa olsa da footer ekranın dibine oturur, uzun sayfada akışta kalır. */

.footer {
  margin-top: auto;
  padding: var(--space-6) var(--space-9);
  border-top: 1px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.footer .proje { color: var(--text); font-weight: var(--fw-medium); }
.footer nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.footer a { color: var(--muted); font-weight: var(--fw-regular); }
.footer a:hover { color: var(--primary-strong); }

/* --- Kullanıcı menüsü başlığı (dropdown içi profil bloğu) ---------------- */

.user-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border-bottom: 1px solid var(--border);
}
.user-head .nm { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--heading); }
.user-head .em {
  font-size: var(--fs-xs); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}

/* Menü içi satır — solda etiket, sağda kontrol (tema seçici gibi) */
.drop-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  font-size: var(--fs-md);
  color: var(--text);
}
.drop-satir > span { display: flex; align-items: center; gap: 11px; }
.drop-satir svg { width: var(--icon-nav); height: var(--icon-nav); color: var(--muted); }

/* Bildirim/mesaj panelinde okunmamış işareti */
.drop-item.unread { background: color-mix(in oklab, var(--primary) 5%, transparent); }
.drop-item .un {
  width: 8px; height: 8px; border-radius: var(--radius-circle);
  background: var(--primary); flex: 0 0 auto; align-self: center;
}

.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.breadcrumb { font-size: var(--fs-sm); color: var(--muted); }
.breadcrumb b { color: var(--text); font-weight: var(--fw-medium); }

/* --- Izgara --------------------------------------------------------------- */

.grid { display: grid; gap: var(--space-8); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.main-side { grid-template-columns: 2fr 1fr; align-items: start; }
.grid.list-detail { grid-template-columns: 340px 1fr; gap: var(--space-7); align-items: start; }
.grid.auto { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-6); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }

/* --- Kırılım noktaları — sadeleştirilmiş set --------------------------- */

@media (max-width: 1200px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .grid.main-side { grid-template-columns: 1fr; }
  .topbar { padding: 0 var(--space-7); gap: var(--space-4); }
}
@media (max-width: 820px) {
  .grid.list-detail { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); width: var(--sb-w-mobile); box-shadow: 0 0 30px rgba(0, 0, 0, .15); }
  .app.nav-open .sidebar { transform: translateX(0); }
  .main { margin-left: 0; }
  .content { padding: var(--space-7) var(--space-6) calc(76px + env(safe-area-inset-bottom, 0px)); }
  .search { display: none; }
  .breadcrumb { display: none; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .tbl { min-width: 520px; }

  /* iOS otomatik yakınlaştırmayı engeller (16px eşiği) */
  :root { --nxf-h: 44px; --nxf-h-sm: 36px; }
  :where(input:not([type="checkbox"], [type="radio"]), select, textarea) { font-size: 16px; }
  .field input:not([type="checkbox"], [type="radio"]), .field select, .field textarea, .search input, .nx-tarih .nx-tarih-metin { font-size: 16px; }

  /* Dokunma hedefleri — WCAG 2.5.8 üstü, pratikte 44px hedeflenir */
  .btn, .btn-row { min-height: 40px; }
  .sb-link, .sb-flat { min-height: 44px; }
  .tab-btn { padding: 13px var(--space-7); min-height: 44px; }
  .icon-btn { width: 40px; height: 40px; }

  /* Footer mobil tabbar'ın altında kalmasın */
  .footer {
    padding: var(--space-5) var(--space-6) calc(var(--space-5) + var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  /* İçerik alt payı footer varken tekrarlanmasın */
  .main:has(.footer) .content { padding-bottom: var(--space-7); }

  /* Dar ekranda açılır paneller ekranı taşırmasın */
  .drop { width: min(330px, calc(100vw - var(--space-7))) !important; right: 0; }
}
@media (max-width: 560px) {
  .grid.auto { grid-template-columns: 1fr; }
}

/* --- Yazdırma ------------------------------------------------------------- */

@media print {
  .sidebar, .topbar, .alertbar, .tabs, .btn, .icon-btn, .drop { display: none !important; }
  .main { margin-left: 0; }
  .content { padding: 0; }
  .card { break-inside: avoid; box-shadow: none; border: 1px solid #e4e6ef; }
  @page { size: a4; margin: 14mm; }
}

/* ==========================================================================
   Kabuk — aşamalı daralma (ilove.services eklemesi)
   layout-ve-kabuk.md §Topbar bu kademeleri tarif ediyor ama temel.css'te
   karşılıkları yoktu; topbar dar ekranda taşıyordu. Gizleme sırası:
   önce süs (avatar metni), sonra kolaylık (tema kısayolu, organizasyon),
   en son işlev. Gizlenen her işlevin başka bir yolu var:
   tema → kullanıcı menüsünde, organizasyon → kullanıcı menüsü başlığında.
   ========================================================================== */

/* Satır içi display yerine sınıf — aksi hâlde mobil gizleme kuralı ezilemez */
.avatar .nm { display: block; }

@media (max-width: 1200px) {
  .avatar .nm, .avatar .rl { display: none; }
  .avatar { padding: 5px; }
}
@media (max-width: 900px) {
  .org-pill b { max-width: 90px; }
}
@media (max-width: 560px) {
  .tema-kisayol { display: none; }
  /* Organizasyon seçici mobilde KALDIRILMAZ (kullanıcı kararı, 29 Eki 2026): yalnız simge + ok kalır, tıklanınca aynı açılır pencere. */
  .org-pill { padding: 6px 8px; gap: 4px; }
  .org-pill b { display: none; }
  #mod-rozet { display: none; }
}

/* ==========================================================================
   Tarayıcı varsayılanı kontrollerin Nexus karşılıkları (ilove.services, faz 1)
   Seçim kutusu oku, sayı okları, tarih/saat seçici (.nx-tarih), dosya alanı
   (.nx-dosya). Yeni renk yok — yalnız token.
   ========================================================================== */

/* Seçim kutusu — sistem oku yerine token renkli chevron, input'la aynı yükseklik */
.field select,
select.nx-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--space-5) * 2 + 8px);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - var(--space-5) - 5px) 50%,
    calc(100% - var(--space-5)) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field select[multiple] { background-image: none; padding-right: var(--space-5); }

/* Sayı alanı — sistem okları gizli; klavye okları çalışmaya devam eder */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Tarih / saat seçici ------------------------------------------------- */
.nx-tarih { position: relative; display: block; width: 100%; }
.nx-tarih.satir-ici { display: inline-block; width: auto; min-width: 180px; vertical-align: middle; }
.nx-tarih-asil { display: none !important; }
.nx-tarih[hidden] { display: none !important; }
.nx-tarih .nx-tarih-metin {
  width: 100%;
  height: var(--nxf-h);
  padding: 0 calc(var(--space-5) + var(--icon-md) + var(--space-2)) 0 var(--space-5);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--input-bg);
  transition: var(--dur);
}
.nx-tarih .nx-tarih-metin:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.nx-tarih .nx-tarih-metin:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.nx-tarih .nx-tarih-metin[aria-invalid="true"] { border-color: var(--danger); }
.nx-tarih .nx-tarih-metin:disabled { background: var(--body-bg); color: var(--muted); cursor: not-allowed; }
.nx-tarih-btn {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: var(--dur);
}
.nx-tarih-btn:hover { background: var(--primary-soft); color: var(--primary); }
.nx-tarih-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.nx-tarih-btn:disabled { cursor: not-allowed; opacity: .5; }
.nx-tarih-btn svg { width: var(--icon-sm); height: var(--icon-sm); }

.nx-tarih-pop {
  position: fixed;
  z-index: var(--z-tooltip);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-drop);
  color: var(--text);
  font-size: var(--fs-md);
}
.nx-tarih-govde { display: flex; gap: var(--space-5); }
.nx-tarih-bas { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.nx-tarih-baslik { font-weight: var(--fw-semibold); color: var(--heading); }
.nx-tarih-ok {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--muted); cursor: pointer; transition: var(--dur);
}
.nx-tarih-ok:hover { background: var(--primary-soft); color: var(--primary); }
.nx-tarih-ok svg { width: var(--icon-xs); height: var(--icon-xs); }
.nx-tarih-izgara { border-collapse: separate; border-spacing: 2px; }
.nx-tarih-izgara th {
  width: 34px; padding: var(--space-1) 0;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); text-align: center;
}
.nx-tarih-izgara td { padding: 0; text-align: center; }
.nx-tarih-gun, .nx-tarih-ay, .nx-tarih-saat button {
  border: 0; background: none; color: var(--text); cursor: pointer;
  font-family: inherit; font-size: var(--fs-md); font-variant-numeric: tabular-nums;
  border-radius: var(--radius-sm); transition: var(--dur-fast);
}
.nx-tarih-gun { width: 34px; height: 32px; padding: 0; }
.nx-tarih-gun.dis { color: var(--muted); }
.nx-tarih-gun.bugun { box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary-strong); font-weight: var(--fw-semibold); }
.nx-tarih-gun:hover, .nx-tarih-ay:hover, .nx-tarih-saat button:hover { background: var(--primary-soft); color: var(--primary-strong); }
.nx-tarih-gun[aria-selected="true"], .nx-tarih-ay[aria-selected="true"], .nx-tarih-saat button[aria-pressed="true"] {
  background: var(--primary-fill); color: var(--on-fill); font-weight: var(--fw-semibold); box-shadow: none;
}
.nx-tarih-gun:disabled, .nx-tarih-ay:disabled { color: var(--muted); opacity: .45; cursor: not-allowed; background: none; }
.nx-tarih-gun:focus-visible, .nx-tarih-ay:focus-visible, .nx-tarih-saat button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.nx-tarih-aylar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.nx-tarih-ay { padding: var(--space-3) var(--space-4); }
.nx-tarih-saat { display: flex; gap: var(--space-2); }
.nx-tarih-saat > div { display: flex; flex-direction: column; align-items: stretch; }
.nx-tarih-saat .et { font-size: var(--fs-xs); color: var(--muted); text-align: center; padding: var(--space-1) 0; }
.nx-tarih-saat ul {
  list-style: none; margin: 0; padding: 0 2px;
  height: 232px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent;
}
.nx-tarih-saat li + li { margin-top: 2px; }
.nx-tarih-saat button { width: 44px; height: 30px; padding: 0; }
.nx-tarih-alt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-4); }
.nx-tarih-alt .sol { display: flex; gap: var(--space-2); }
.nx-tarih-link {
  border: 0; background: none; padding: var(--space-1) var(--space-2);
  font-family: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium);
  color: var(--primary); cursor: pointer; border-radius: var(--radius-sm);
}
.nx-tarih-link:hover { background: var(--primary-soft); }
.nx-tarih-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.nx-tarih-pop.alt-sayfa { width: 100%; max-height: 85vh; overflow-y: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
.nx-tarih-pop.alt-sayfa .nx-tarih-izgara { width: 100%; }
.nx-tarih-pop.alt-sayfa .nx-tarih-gun { width: 100%; }
@media (max-width: 560px) {
  .nx-tarih-govde { flex-direction: column; }
  .nx-tarih-saat ul { height: 140px; }
}

/* --- Dosya bırakma alanı ------------------------------------------------- */
.nx-dosya {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  border: 1px dashed var(--input-border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--text);
  cursor: pointer;
  transition: var(--dur);
}
.nx-dosya:hover, .nx-dosya.surukle { border-color: var(--primary); background: var(--primary-soft); }
.nx-dosya:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.nx-dosya:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }
.nx-dosya.pasif { cursor: not-allowed; opacity: .6; }
.nx-dosya > input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0;
}
.nx-dosya-ikon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-circle);
  background: var(--primary-soft); color: var(--primary);
}
.nx-dosya-ikon svg { width: var(--icon-sm); height: var(--icon-sm); }
.nx-dosya-metin { display: flex; flex-direction: column; min-width: 0; }
.nx-dosya-metin b { font-weight: var(--fw-medium); color: var(--heading); font-size: var(--fs-md); }
.nx-dosya-metin span { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Alan tabanı (tek kaynak) ---------------------------------------------
   .field dışında kalan çıplak alanlar (araç çubuğu, tablo içi, dinamik
   şablonlar) tarayıcı varsayılanına düşmesin diye :where() ile sıfır
   özgüllükte taban. .field / .search / ekran kuralları bunu ezer.
   Ölçü: 13px yazı, 9px × 14px iç boşluk, 1px --input-border, 6px yarıçap,
   ~38px yükseklik (input ve select aynı).                                  */
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea) {
  box-sizing: border-box;
  height: var(--nxf-h);
  padding: 0 var(--space-5);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
  color: var(--text);
  background-color: var(--input-bg);
  transition: border-color var(--dur), box-shadow var(--dur);
}
:where(textarea) { height: auto; padding: 9px var(--space-5); min-height: 76px; resize: vertical; line-height: var(--lh-base); }
:where(select[multiple]) { height: auto; }
:where(input, select, textarea)::placeholder { color: var(--muted); opacity: 1; }
:where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--muted); }
:where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
:where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
:where(input, select, textarea):disabled { background-color: var(--body-bg); color: var(--muted); cursor: not-allowed; }
:where(input, textarea)[readonly] { background-color: var(--body-bg); }
:where(input, select, textarea)[aria-invalid="true"],
.field.error .nx-tarih-metin { border-color: var(--danger); }
.field input:not([type="checkbox"], [type="radio"], [type="file"]), .field select:not([multiple]) { height: var(--nxf-h); padding-top: 0; padding-bottom: 0; line-height: var(--lh-tight); }
/* Çıplak select de aynı oku alır */
:where(select:not([multiple])) {
  appearance: none; -webkit-appearance: none;
  padding-right: calc(var(--space-5) * 2 + 8px);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - var(--space-5) - 5px) 50%, calc(100% - var(--space-5)) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field > .hint, .field .hint { line-height: var(--lh-base); }
.form-row { column-gap: var(--space-7); }

/* --- Faz 3: denetim maddeleri -------------------------------------------- */
/* Form özeti hatası Nexus adıyla da kullanılabilir (.form-hata panel tarafında) */
.nxf-hata-ozet { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-7); border: 1px solid var(--danger); background: var(--danger-soft); color: var(--danger-strong); border-radius: var(--radius); font-size: var(--fs-md); }

/* Sekme şeridi kaydırılabilir olduğunda sağ kenar solma ipucu */
.tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); padding-right: 24px; }

/* Tablo durumları: boş gövde → açıklama; aria-busy → yükleniyor; data-hata → hata.
   JS satır üretmediğinde de kullanıcı boş başlık görmez. */
.tbl { position: relative; }
.tbl:has(> tbody:empty)::after,
.tbl[aria-busy="true"]::after,
.tbl[data-hata]::after {
  display: table-caption;
  caption-side: bottom;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  font-size: var(--fs-md);
  color: var(--muted-strong);
  border-top: 1px solid var(--border);
}
.tbl:has(> tbody:empty)::after { content: "Gösterilecek kayıt yok."; }
.tbl[aria-busy="true"]::after { content: "Yükleniyor…"; }
.tbl[data-hata]::after { content: attr(data-hata); color: var(--danger-strong); }
.tbl[aria-busy="true"] > tbody { opacity: .5; }


/* Koyu temada odak halkası: --ring zayıf, outline her zaman primary 2px */
[data-theme="dark"] :where(input, select, textarea):focus { box-shadow: 0 0 0 2px var(--primary); }

/* --- Tablo hücre kuralları (faz 4) ----------------------------------------
   Varsayılan tek satır: kod, telefon, tarih, kimlik dikey kırılmaz. Uzun metin
   hücresine (.uzun, JS 48+ karakterde ekler) kırılma izni + okunur genişlik.
   Kap yatay kaydırır.                                                        */
.table-wrap, .api-tablo, .card-body:has(> .tbl) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { font-variant-numeric: tabular-nums; }
.tbl td, .tbl tbody th { white-space: nowrap; }
.tbl td.uzun, .tbl td.wrap { white-space: normal; min-width: 14rem; max-width: 32rem; overflow-wrap: anywhere; }
.tbl td .mono, .tbl td code, .tbl td .badge, .tbl td time { white-space: nowrap; }
.tbl .sayi { text-align: right; }
.tbl th.islem, .tbl td.islem { width: 1%; text-align: right; white-space: nowrap; }
/* Form içindeki mod anahtarı komşu alanla aynı yükseklikte */
.field .mode-sw:not(.sarar), .form-row .mode-sw:not(.sarar) { box-sizing: border-box; height: var(--nxf-h); }
.field .mode-sw:not(.sarar) .ms-opt, .form-row .mode-sw:not(.sarar) .ms-opt { min-height: 28px; }

/* Sunucudan açılışta ilk ekran seçilene kadar sayfa gizli; örnek veri hiç görünmez. */
/* Betik hata verse bile sayfa 4 sn sonra yine görünür (güvenlik ağı). */
html[data-yukleniyor] body { visibility: hidden; animation: nx-yukleme-ag 0s 4s forwards; }
@keyframes nx-yukleme-ag { to { visibility: visible; } }
html[data-canli] [data-demo-yalniz] { display: none !important; }

/* Biçimli metin düzenleyici (e-posta HTML gövdesi) */
.rte { border: 1px solid var(--input-border); border-radius: var(--radius); background: var(--input-bg); transition: var(--dur); }
.rte:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding: var(--space-2); border-bottom: 1px solid var(--input-border); background: var(--body-bg); border-radius: var(--radius) var(--radius) 0 0; }
.rte-btn { min-width: 36px; height: 36px; padding: 0 var(--space-3); display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; transition: var(--dur); }
.rte-btn:hover:not(:disabled) { background: var(--input-bg); border-color: var(--input-border); }
.rte-btn[aria-pressed="true"] { background: var(--input-bg); border-color: var(--primary); color: var(--primary); }
.rte-btn:disabled, .rte-bar select:disabled, .rte-bar input:disabled { opacity: .5; cursor: not-allowed; }
.rte-bar select.rte-block { width: auto; height: 36px; padding: 0 var(--space-3); }
.rte-color { display: inline-flex; align-items: center; height: 36px; }
.rte-color input[type="color"] { width: 36px; height: 36px; padding: 2px; border: 1px solid var(--input-border); border-radius: var(--radius); background: var(--input-bg); cursor: pointer; }
.rte-sep { width: 1px; height: 22px; background: var(--input-border); margin: 0 var(--space-1); }
.rte-src { margin-left: auto; }
.rte-area { min-height: 260px; max-height: 70vh; overflow: auto; resize: vertical; padding: var(--space-4) var(--space-5); color: var(--text); line-height: var(--lh-base); outline: none; overflow-wrap: anywhere; }
.rte-area img { max-width: 100%; height: auto; }
.rte-area a { color: var(--primary); }
.rte-area[aria-disabled="true"], .rte.is-disabled .rte-area { color: var(--muted); background: var(--body-bg); cursor: not-allowed; }
.field .rte textarea.rte-raw { border: 0; border-radius: 0 0 var(--radius) var(--radius); min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm); box-shadow: none; }

/* Form içindeki anahtar: `.field input` (0,1,1) zemini, kenarı ve köşeyi ezip anahtarı
   beyaz zeminde görünmez yapıyordu; anahtar görünümü burada geri verilir. */
.field input.switch, .chkrow input.switch {
  width: 38px; height: 21px; padding: 0;
  border: 0; border-radius: 12px;
  background: var(--control-off);
  transition: background var(--dur);
}
.field input.switch:checked, .chkrow input.switch:checked { background: var(--success); }
[data-contrast="yuksek"] .field input.switch:checked { background: var(--success-fill); }

/* Tıklanabilir satır (profil güvenlik olayları vb.) */
.tbl tr.tiklanir { cursor: pointer; }
.tbl tr.tiklanir:hover > td, .tbl tr.tiklanir:hover > th { background: var(--primary-soft); }
.tbl tr.tiklanir.secili > td, .tbl tr.tiklanir.secili > th { background: var(--primary-soft); }
.tbl tr.satir-uyari td { background: var(--warning-soft); }
.tbl tr.tiklanir:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* WhatsApp şablon ön izlemesi (telefon balonu; marka renkleri ürün taklidi değil, tanınabilirlik için nötr yeşil/krem) */
.wt-govde-iki { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
@media (max-width: 900px) { .wt-govde-iki { grid-template-columns: 1fr; } .wt-onizleme { order: -1; } }
.wa-telefon { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #e5ddd5; font-size: 13px; }
.wa-ust { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #075e54; color: #fff; }
.wa-ust small { display: block; font-size: 11px; opacity: .85; }
.wa-avatar { width: 32px; height: 32px; border-radius: 50%; background: #25d366; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.wa-ekran { padding: 12px 10px 18px; min-height: 260px; background: #e5ddd5; }
.wa-gun { text-align: center; margin: 0 auto 10px; width: max-content; background: #fff; border-radius: 8px; padding: 3px 10px; font-size: 11px; color: #555; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-bilgi { background: #d9fdd3; color: #2a5b43; border-radius: 8px; padding: 6px 10px; font-size: 11px; text-align: center; margin-bottom: 10px; }
.wa-balon { background: #fff; border-radius: 8px; padding: 8px 10px 6px; max-width: 92%; box-shadow: 0 1px 1px rgba(0,0,0,.1); color: #111; word-wrap: break-word; }
.wa-baslik { font-weight: 600; margin-bottom: 4px; }
.wa-metin { white-space: pre-wrap; line-height: 1.4; }
.wa-alt { color: #667781; font-size: 11px; margin-top: 6px; }
.wa-saat { text-align: right; color: #8696a0; font-size: 10px; margin-top: 4px; }
.wa-dugmeler { border-top: 1px solid #e9edef; margin: 6px -10px -6px; display: flex; flex-direction: column; }
.wa-dugme { border: 0; border-top: 1px solid #e9edef; background: transparent; color: #027eb5; font-weight: 600; padding: 9px; cursor: default; font: inherit; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.wa-dugme:first-child { border-top: 0; }

/* Tablo içi sayı girişi (ör. kota GB/MB) */
.tbl input.inp-sayi { width: 7.5rem; }
.tbl td.nowrap { white-space: nowrap; }

/* Dosya önizleme (Dosya Depolama → ayrıntı penceresi) */
.fl-onizleme { margin: var(--space-4) 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2, var(--bg)); display: flex; justify-content: center; overflow: hidden; }
.fl-onizleme img, .fl-onizleme video { max-width: 100%; max-height: 60vh; display: block; }
.fl-onizleme iframe { width: 100%; height: 70vh; border: 0; background: #fff; }
.fl-onizleme audio { width: 100%; margin: var(--space-4); }
.fl-dt-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }

/* Gerçek sunucu koruması: ana script çalışmadan (data-canli yokken) örnek işaretleme ve uygulama kabuğu görünmez; yalnız kritik uyarı. */
html[data-gercek-sunucu]:not([data-canli]) .app, html[data-gercek-sunucu]:not([data-canli]) [data-demo-yalniz] { display: none !important; }
#nx-kritik { position: fixed; inset: auto 16px 16px 16px; z-index: 1000; padding: 12px 16px; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger-strong); font-size: var(--fs-sm); }

/* ==========================================================================
   Grid standardı (js/nx-grid.js) — sıralama, filtre, sütun sırası/gizleme, bağlam menüsü, dışa aktarım.
   Yalnız mevcut token'lar; durum renkleri ve .15s geçiş Nexus'tan değişmeden alınır.
   ========================================================================== */
.tbl th[data-nx-col] { position: relative; }
.tbl th .nxg-sort { padding-right: 1.1em; position: relative; }
.tbl th .nxg-sort::after { content: ""; position: absolute; right: 0; top: 50%; width: 0; height: 0; margin-top: -3px; border: 4px solid transparent; opacity: 0; transition: opacity var(--dur); }
.tbl th[aria-sort="ascending"] .nxg-sort::after { border-bottom-color: var(--primary-strong); margin-top: -6px; opacity: 1; }
.tbl th[aria-sort="descending"] .nxg-sort::after { border-top-color: var(--primary-strong); margin-top: 0; opacity: 1; }
.tbl th[aria-sort="ascending"] .nxg-sort, .tbl th[aria-sort="descending"] .nxg-sort { color: var(--heading); }
.tbl th .nxg-sort:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-xs); }
.nxg-tools { display: inline-flex; vertical-align: middle; margin-left: var(--space-1); }
.nxg-filt { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-xs); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity var(--dur), background var(--dur); }
.nxg-filt svg { width: var(--icon-xs); height: var(--icon-xs); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.tbl th:hover .nxg-filt, .tbl th:focus-within .nxg-filt, .nxg-filt.on, .nxg-filt[aria-expanded="true"] { opacity: 1; }
.nxg-filt:hover, .nxg-filt[aria-expanded="true"] { background: var(--primary-soft); color: var(--primary-strong); }
.nxg-filt.on { color: var(--primary-strong); }
.nxg-filt.on svg { fill: currentColor; }
.nxg-filt:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; opacity: 1; }
@media (hover: none) { .nxg-filt { opacity: .6; } }
.tbl th.nxg-dragging { opacity: .5; }
.tbl th.nxg-over { box-shadow: inset 3px 0 0 var(--primary); }
.tbl th[draggable="true"] { cursor: grab; }
.tbl th[draggable="true"]:active { cursor: grabbing; }
.nxg-hide { display: none !important; }
.tbl tbody tr.nxg-filt { display: none !important; }

/* Tablo üstü şerit: sayaç + filtre çipi + ⋯ menü düğmesi. Filtre yokken yalnızca düğme, sağa yaslı ve sönük. */
.nxg-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); min-height: 22px; padding: var(--space-1) 0 0; font-size: var(--fs-xs); color: var(--muted); position: sticky; left: 0; }
.nxg-bar.aktif { padding-bottom: var(--space-1); }
.nxg-count { margin-right: auto; font-variant-numeric: tabular-nums; }
.nxg-chip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3); min-height: 20px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-strong); font-size: var(--fs-xs); font-weight: var(--fw-medium); cursor: pointer; }
.nxg-chip:hover { background: var(--primary-fill); color: var(--on-fill); }
.nxg-chip:focus-visible, .nxg-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.nxg-more { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-circle); color: var(--icon-ink); cursor: pointer; opacity: .55; transition: opacity var(--dur), background var(--dur); }
.nxg-more svg { width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; }
.nxg-more:hover, .nxg-more[aria-expanded="true"], .card-body:hover .nxg-more, .nxg-bar.aktif .nxg-more { opacity: 1; }
.nxg-more:hover, .nxg-more[aria-expanded="true"] { background: var(--body-bg); }

/* Filtre açılır penceresi ve bağlam menüsü — .drop ile aynı yüzey dili */
.nxg-pop, .nxg-menu { position: fixed; z-index: var(--z-tooltip); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-drop); font-size: var(--fs-md); color: var(--text); animation: nx-drop-in var(--dur) ease; }
.nxg-pop { width: 260px; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.nxg-pop.hidden, .nxg-menu.hidden { display: none; }
.nxg-pop-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.nxg-pop-t { font-weight: var(--fw-semibold); color: var(--heading); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-caps); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxg-x { all: unset; cursor: pointer; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-circle); color: var(--muted); font-size: var(--fs-lg); line-height: 1; }
.nxg-x:hover { background: var(--body-bg); color: var(--heading); }
.nxg-x:focus-visible { outline: 2px solid var(--primary); }
.nxg-pop-l { display: block; }
.nxg-pop-in { width: 100%; box-sizing: border-box; min-height: var(--nxf-h-sm); padding: 0 var(--space-3); border: 1px solid var(--input-border); border-radius: var(--radius); background: var(--input-bg); color: var(--text); font: inherit; }
.nxg-pop-in:focus { outline: none; box-shadow: var(--ring); border-color: var(--primary); }
.nxg-pop-vals { display: flex; flex-direction: column; max-height: 220px; overflow: auto; border-top: 1px solid var(--border); padding-top: var(--space-2); }
.nxg-pop-vals[hidden] { display: none; }
.nxg-pop-v { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxg-pop-v:hover { background: var(--row-hover); }
.nxg-pop-v input { margin: 0; accent-color: var(--primary); }
.nxg-pop-f { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.nxg-pop-note { font-size: var(--fs-xs); color: var(--muted); }
.nxg-pop-clear { all: unset; cursor: pointer; color: var(--primary-strong); font-size: var(--fs-sm); font-weight: var(--fw-medium); padding: 0 var(--space-2); border-radius: var(--radius-xs); }
.nxg-pop-clear:hover { text-decoration: underline; }
.nxg-pop-clear:focus-visible { outline: 2px solid var(--primary); }
@media (max-width: 560px) { .nxg-pop { left: 8px !important; right: 8px; width: auto; } }

.nxg-menu { min-width: 220px; padding: var(--space-2) 0; overflow: hidden; }
.nxg-mi { display: flex; align-items: center; gap: var(--space-4); width: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-6); border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.nxg-mi > svg, .nxg-mi .nxg-ico { width: var(--icon-sm); height: var(--icon-sm); flex: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.nxg-mi .t { flex: 1; }
.nxg-mi .nxg-sub { color: var(--muted); }
.nxg-mi:hover, .nxg-mi:focus-visible { background: var(--row-hover); outline: none; color: var(--heading); }
.nxg-mi:focus-visible { box-shadow: inset 2px 0 0 var(--primary); }
.nxg-mi[aria-disabled="true"] { opacity: .5; cursor: default; }
.nxg-mi[aria-disabled="true"]:hover { background: none; }
.nxg-back { font-weight: var(--fw-semibold); color: var(--heading); }
.nxg-sep { height: 1px; background: var(--border); margin: var(--space-2) 0; }
.nxg-cols { max-height: 300px; overflow: auto; }
.nxg-col input { margin: 0; accent-color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .nxg-pop, .nxg-menu { animation: none; } .nxg-filt, .nxg-more, .nxg-sort::after { transition: none; } }