/* design-system.css — Vercel Geist Design System (light mode, birebir)
   Referans: out/VERCEL-STYLE-GUIDE.md
   Renkler https://vercel.com/geist/colors resmi paletinden alınmıştır. */

:root {
  /* ── Geist Gray scale (resmi) ──────────── */
  --ds-gray-100: #f2f2f2;
  --ds-gray-200: #ebebeb;
  --ds-gray-300: #e0e0e0;
  --ds-gray-400: #c9c9c9;
  --ds-gray-500: #a3a3a3;
  --ds-gray-600: #8f8f8f;
  --ds-gray-700: #707070;
  --ds-gray-800: #595959;
  --ds-gray-900: #404040;
  --ds-gray-1000: #0a0a0a;

  /* ── Backgrounds ───────────────────────── */
  --ds-background-100: #fafafa;
  --ds-background-200: #ffffff;

  /* ── Semantic ──────────────────────────── */
  --ds-blue-100: #ebf5ff;
  --ds-blue-700: #0072f5;
  --ds-blue-800: #006bdb;
  --ds-green-100: #e6f6ee;
  --ds-green-700: #007a5a;
  --ds-amber-100: #fef3c7;
  --ds-amber-700: #c2410c;
  --ds-red-100: #feebec;
  --ds-red-700: #e5484d;
  --ds-red-800: #c12126;

  /* ── Backward-compat semantic aliases (pages bunları kullanıyor) ──
     Vercel modeli: page = gray-50, elevated yüzey = white.
     --bg     : sayfa zemini (sidebar + main canvas) → gray-50
     --surface: yüzey üstü kompozit (card, modal, menu, btn, ctrl…) → white
     --bg-subtle / --bg-muted: hover/disabled için hafif gri tint */
  --bg:           var(--ds-background-100);
  --surface:      var(--ds-background-200);
  --bg-subtle:    var(--ds-gray-100);
  --bg-muted:     var(--ds-gray-100);
  --border:       var(--ds-gray-200);
  --border-strong:var(--ds-gray-300);
  --fg:           var(--ds-gray-1000);
  --fg-muted:     var(--ds-gray-700);
  --fg-subtle:    var(--ds-gray-600);
  --accent:       var(--ds-gray-1000);
  --link:         var(--ds-blue-700);
  --ring:         var(--ds-gray-1000);

  --success:      var(--ds-green-700);
  --success-bg:   var(--ds-green-100);
  --warning:      var(--ds-amber-700);
  --warning-bg:   var(--ds-amber-100);
  --danger:       var(--ds-red-700);
  --danger-bg:    var(--ds-red-100);
  --info:         var(--ds-blue-700);
  --info-bg:      var(--ds-blue-100);

  /* ── Radius ────────────────────────────── */
  --r-sm:   4px;
  --r:      6px;
  --r-md:   8px;
  --r-lg:  12px;
  --r-full: 9999px;

  /* ── Shadow (Vercel dashboard çok hafif) ── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.04);
  --shadow:      0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.10);
  --shadow-menu: 0 12px 32px rgba(0,0,0,0.12);

  /* ── Motion ────────────────────────────── */
  --dur-fast: 100ms;
  --dur:      160ms;
  --dur-slow: 240ms;
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --ease-in:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ── z-index ───────────────────────────── */
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
  --z-popover:  500;

  /* ── Focus ring (Vercel: gray-1000 4px alpha 0.06) ── */
  --ring-focus:        0 0 0 4px rgba(10,10,10,0.06);
  --ring-focus-danger: 0 0 0 4px rgba(229,72,77,0.12);

  /* ── Shell ölçüleri ────────────────────── */
  --shell-sidebar-w:   280px;
  --shell-topbar-h:    56px;
  --shell-main-max-w: 1440px;
  --shell-workspace-gutter: 16px;  /* workspace modunda panel-tuval boşluğu */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ── base ─────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
body {
  font-family: 'Geist', 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03', 'cv01';
  font-variant-ligatures: common-ligatures contextual;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
svg { shape-rendering: geometricPrecision; }
code, pre, .mono, .font-mono { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; }

h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.25; }
h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 0; line-height: 1.3; }
h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; margin: 0; line-height: 1.4; }

a { color: inherit; text-decoration: none; }
a.link { color: var(--link); }
a.link:hover { text-decoration: underline; text-underline-offset: 2px; }

button { font: inherit; cursor: pointer; }

::selection { background: rgba(0,114,245,0.18); }

/* ── focus ring ───────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── utilities (token-bound colors) ───── */
.text-fg        { color: var(--fg); }
.text-fg-muted  { color: var(--fg-muted); }
.text-fg-subtle { color: var(--fg-subtle); }
.text-link      { color: var(--link); }
.text-danger    { color: var(--danger); }
.text-success   { color: var(--success); }
.bg-bg          { background: var(--bg); }
.bg-bg-subtle   { background: var(--bg-subtle); }
.bg-bg-muted    { background: var(--bg-muted); }
.border-default { border: 1px solid var(--border); }

/* ── scrollbar ────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ds-gray-300); border-radius: 5px; border: 2px solid var(--bg); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-gray-500); background-clip: padding-box; border: 2px solid var(--bg); }

/* ═══════════════════════════════════════
   APP SHELL — Vercel topbar + sidebar
   ═══════════════════════════════════════ */

.app-shell {
  height: 100vh;
  display: flex;
  flex-direction: row;
  background: var(--bg);
}

/* ── Topbar ─────────────────────────────
   Vercel'de topbar üç bölme: sol = team selector, orta = sayfa adı,
   sağ = overflow. Hairline border-bottom. */
.topbar {
  height: var(--shell-topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  flex-shrink: 0;
}

/* Brand lockup (UGS Development) — B+ refined inline wordmark (v0 okulu)
   ExtraBold UGS + thin separator + tracked-out DEVELOPMENT descriptor */
.topbar-brand,
.sidebar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  text-decoration: none;
  color: var(--fg);
  cursor: pointer;
  min-width: 0;
}
.topbar-brand:hover,
.sidebar-brand:hover { background: transparent; }
.topbar-brand:focus-visible,
.sidebar-brand:focus-visible { outline: none; }
.topbar-brand:focus-visible .topbar-brand-word,
.sidebar-brand:focus-visible .sidebar-brand-word {
  box-shadow: var(--ring-focus);
  border-radius: 3px;
}

.topbar-brand-word,
.sidebar-brand-word {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--fg);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar-brand-sep,
.sidebar-brand-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--ds-gray-300);
  flex-shrink: 0;
}

.topbar-brand-desc,
.sidebar-brand-desc {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* tracking adds trailing space after last letter — trim optically */
  margin-right: -0.16em;
  min-width: 0;
}

@media (max-width: 480px) {
  .topbar-brand,
  .sidebar-brand { gap: 8px; }
  .topbar-brand-word,
  .sidebar-brand-word { font-size: 16px; }
  .topbar-brand-sep,
  .sidebar-brand-sep { height: 12px; }
  .topbar-brand-desc,
  .sidebar-brand-desc { font-size: 9px; letter-spacing: 0.09em; }
}


.topbar-spacer { flex: 1; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.topbar-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--ds-gray-100);
  font-size: 12px;
  color: var(--fg-muted);
  white-space: nowrap;   /* "48,56 UGC" dar topbar'da alt satıra kaymasın */
  flex-shrink: 0;
}
.topbar-status--dot {
  width: 28px;
  padding: 0;
  justify-content: center;
  gap: 0;
}
.topbar-status--dot .status-dot { width: 8px; height: 8px; }
.topbar-icon-btn {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--r);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.topbar-icon-btn:hover { background: var(--ds-gray-100); color: var(--fg); }
.topbar-crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fg-muted);
    min-width: 0;
    overflow: hidden;
}
.topbar-crumbs a {
    color: var(--fg-muted);
    text-decoration: none;
    white-space: nowrap;
}
.topbar-crumbs a:hover { color: var(--fg); }
.topbar-crumbs .is-current {
    color: var(--fg);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-crumb-sep { color: var(--ds-gray-400); flex-shrink: 0; }

/* Dev rol değiştirici — yalnız arayüz tasarım fazı (gerçek oturumda kaldırılır). */
.topbar-roleswitch { position: relative; flex-shrink: 0; }
.topbar-roleswitch > button {
  width: auto;
  gap: 6px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--fg-muted);
}
.topbar-roleswitch-label { font-weight: 500; }
.topbar-roleswitch-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 60;
}
.topbar-roleswitch-head {
  display: block;
  padding: 6px 8px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
}
.topbar-roleswitch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
}
.topbar-roleswitch-item:hover { background: var(--ds-gray-100); }
.topbar-roleswitch-item.is-active { color: var(--fg); font-weight: 500; }
.topbar-roleswitch-item i { color: var(--success); }
@media (max-width: 640px) { .topbar-roleswitch-label { display: none; } }

/* ── Sidebar ──────────────────────────── */
.sidebar {
  width: var(--shell-sidebar-w);
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 12px 12px 12px;
  flex-shrink: 0;
  overflow: hidden;
}

/* Mobil off-canvas sidebar (<1024px). Desktop'ta sabit. */
.topbar-sidebar-toggle { display: none; }
@media (max-width: 1023px) {
  .topbar-sidebar-toggle { display: inline-flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: var(--z-modal);
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.is-open { transform: translateX(0); }
  body.sidebar-open::after {
    content: ''; position: fixed; inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: calc(var(--z-modal) - 1);
  }
}

/* Sidebar header (logo + status pill) */
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 12px;
  margin-bottom: 4px;
}

.sidebar-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  margin-left: auto;
  border-radius: var(--r-full);
  background: var(--ds-gray-100);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: default;
}
.sidebar-status-pill .status-dot { width: 6px; height: 6px; }

/* v∞ — SVG infinity, geometrik olarak v'nin x-height merkez hizasına oturur
   Unicode ∞ font'tan font'a baseline pozisyonu farklı olduğu için SVG ile
   pixel-perfect kontrol sağlanıyor. align-items:center her iki kutuyu
   ortalar; SVG path simetrik olduğu için glyph merkezi = kutu merkezi. */
.version-vinf {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.version-vinf-glyph {
  display: block;
  width: 1.7em;
  height: 0.78em;
  flex-shrink: 0;
}



.sidebar-group { margin-top: 4px; }
.sidebar-group-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-gray-600);
  padding: 12px 8px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 8px;
  margin-bottom: 2px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ds-gray-900);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  text-decoration: none;
}
.nav-item:hover { background: var(--ds-gray-100); color: var(--fg); }
.nav-item.is-active {
  background: var(--ds-gray-100);
  color: var(--fg);
}
.nav-item .nav-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: currentColor;
  display: block;
}
.nav-item .nav-badge {
  margin-left: auto;
  font-size: 11px;
  color: var(--fg-subtle);
}
/* Durum sayaç rozeti (sidebar üretim/sorular öğeleri) — sağa yaslı, tabular sayı. */
.nav-item .nav-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fg-subtle);
  min-width: 1.4em;
  text-align: right;
}
.nav-item.is-active .nav-count { color: var(--fg); }


.sidebar nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Sidebar footer (user row + menu) */
.sidebar-foot {
  /* padding-top, sidebar'ın alt padding'i (12px) ile eşit → user satırı divider ile
     sidebar alt kenarı arasında dengeli (pixel-perfect); eskiden 8/12 asimetrikti. */
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: auto;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--fg);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.sidebar-user:hover { background: var(--ds-gray-100); }
.sidebar-user:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.sidebar-user-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  /* Geist "U" cap-letter content box centers slightly low in flex —
     bump up by 1px so the glyph optical center hits the disc center. */
  text-indent: 0;
  padding-top: 1px;
  box-sizing: border-box;
}
.sidebar-user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.sidebar-user-menu {
  position: relative;
  flex-shrink: 0;
}
.sidebar-user-action {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-subtle);
  border: none;
  background: transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sidebar-user-action:hover,
.sidebar-user-action.is-open { background: var(--ds-gray-100); color: var(--fg); }

.sidebar-user-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 60;
}
.sidebar-user-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
}
.sidebar-user-popover-item:hover { background: var(--ds-gray-100); }
.sidebar-user-popover-item i { color: var(--fg-muted); }

/* Body layout */
.shell-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.shell-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--bg);
  position: relative;
}
/* Footer pinli DEĞİL: içerik scroller'ı (.shell-main) içinde akar. Kısa sayfada
   #app büyüyüp footer'ı dibe yaslar (sticky-footer); uzun sayfada içerikle kayar.
   Yalnız document modu — workspace'te footer zaten gizli (.is-workspace .page-footer). */
.app-shell:not(.is-workspace) .shell-main { display: flex; flex-direction: column; }
.app-shell:not(.is-workspace) .shell-main > #app { flex: 1 0 auto; }

/* Utility */
.p-6 { padding: 24px; }

/* İçerik #app'in kendisinde basılır (çocuk değil) — selektör buna göre. */
#app {
  max-width: var(--shell-main-max-w);
  margin-inline: auto;
  width: 100%;
  /* fill-mode 'backwards' (NOT 'both'): animasyon biter bitmez base'e döner; 'both' bitişte
     transform:none'u kalıcı identity-matrix olarak tutuyordu → #app fixed için containing-block
     olup .modal-overlay'i viewport yerine içeriğe hapsediyordu (backdrop sidebar'ı kaplamıyordu). */
  animation: page-mount 220ms cubic-bezier(.16, 1, .3, 1) backwards;
}
@keyframes page-mount {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ── Workspace shell modu ────────────────────────────────────────────────
   Araç/çalışma-yüzeyi sayfaları (studyo) için full-bleed + tam-yükseklik +
   footer'sız kabuk. Yalnız .is-workspace altında — belge sayfaları etkilenmez.
   Bkz. specs/2026-05-29-workspace-shell-sistemi-design.md */
.app-shell.is-workspace .shell-main { overflow: hidden; }
.app-shell.is-workspace #app.app-workspace {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--shell-workspace-gutter);
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.app-shell.is-workspace .page-footer { display: none; }
/* Mobil: dar ekranda paneller alt alta dizilir → tam-yükseklik kilidi yerine
   sayfa scroll'una düş (içerik kırpılmasın). */
@media (max-width: 900px) {
  .app-shell.is-workspace .shell-main { overflow: auto; }
  .app-shell.is-workspace #app.app-workspace { height: auto; min-height: 100%; }
}

/* Workspace utility bar — page-title'ın ince muadili (ideal-design §3).
   Breadcrumb topbar'da tek kaynak; bar yalnız kimlik + aksiyon taşır. */
.workspace-bar {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* dar ekranda aksiyonlar alt satıra iner (taşma yok) */
  gap: 8px 12px;
  min-height: 40px;
  margin-bottom: var(--shell-workspace-gutter);
}
.workspace-bar-id {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  white-space: nowrap;
}
.workspace-bar-sp { flex: 1; }
.workspace-bar-actions { flex-wrap: wrap; }
.workspace-bar-actions { display: flex; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) {
  #app { animation: none; }
}


/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { border-color: var(--ds-gray-400); }
.btn:active { background: var(--ds-gray-100); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-xs { height: 24px; padding: 0 8px; font-size: 11px; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 40px; padding: 0 16px; font-size: 14px; }

.btn-primary {
  background: var(--ds-gray-1000);
  color: #fff;
  border-color: var(--ds-gray-1000);
}
.btn-primary:hover { background: var(--ds-gray-900); border-color: var(--ds-gray-900); }
.btn-primary:active { background: var(--ds-gray-800); border-color: var(--ds-gray-800); }

.btn-danger {
  background: var(--ds-red-700);
  color: #fff;
  border-color: var(--ds-red-700);
}
.btn-danger:hover { background: var(--ds-red-800); border-color: var(--ds-red-800); }

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--fg-muted);
}
.btn-ghost:hover { background: var(--ds-gray-100); color: var(--fg); border-color: transparent; }

.btn-link {
  border-color: transparent;
  background: transparent;
  color: var(--link);
  padding: 0;
  height: auto;
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 2px; border-color: transparent; }

.btn-icon { width: 32px; padding: 0; }
.btn-icon.btn-xs { width: 24px; }
.btn-icon.btn-sm { width: 28px; }
.btn-icon.btn-lg { width: 40px; }

.btn-loading { color: transparent; position: relative; }
.btn-loading::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  border: 1.5px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin 800ms linear infinite;
  color: var(--fg);
}
.btn-primary.btn-loading::after, .btn-danger.btn-loading::after { color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════
   FORM CONTROLS
   ═══════════════════════════════════════ */
.ctrl {
  display: block; width: 100%;
  height: 32px; padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ctrl::placeholder { color: var(--fg-subtle); }
.ctrl:hover:not(:focus):not(:disabled) { border-color: var(--ds-gray-300); }
.ctrl:focus { outline: none; border-color: var(--fg); box-shadow: var(--ring-focus); }
.ctrl:disabled { background: var(--bg-subtle); cursor: not-allowed; color: var(--fg-muted); }
.ctrl.is-error { border-color: var(--danger); }
.ctrl.is-error:focus { box-shadow: var(--ring-focus-danger); }

textarea.ctrl { height: auto; min-height: 80px; padding: 8px 10px; line-height: 1.5; resize: vertical; }
textarea.ctrl-code {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.ctrl-sm { height: 28px; padding: 0 8px; font-size: 12px; }
.ctrl-lg { height: 40px; padding: 0 12px; font-size: 14px; }
.ctrl-narrow { width: 7rem; }

textarea.ctrl-sm { height: auto; min-height: 56px; padding: 6px 8px; line-height: 1.4; }

select.ctrl {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23707070' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,4.5 6,8.5 10,4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* Placeholder hissiyatı: empty value seçiliyken select metni input placeholder rengiyle aynı (fg-subtle).
   Açılan listede seçenekler kendi rengine döner (fg). */
select.ctrl:has(option[value=""]:checked) { color: var(--fg-subtle); }
select.ctrl option { color: var(--fg); }

.label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--fg); }
.help  { font-size: 12px; color: var(--fg-subtle); margin-top: 6px; }
.help-error { font-size: 12px; color: var(--danger); margin-top: 6px; }

/* ── Checkbox / Radio ─────────────────── */
.ck { appearance: none; width: 16px; height: 16px; border: 1.5px solid var(--ds-gray-400); border-radius: 4px; background: var(--surface); display: inline-block; position: relative; cursor: pointer; vertical-align: -3px; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.ck:hover { border-color: var(--fg-muted); }
.ck:checked { background: var(--ds-gray-1000); border-color: var(--ds-gray-1000); }
.ck:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid white; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ck:disabled { opacity: 0.4; cursor: not-allowed; }

.rd { appearance: none; width: 16px; height: 16px; border: 1.5px solid var(--ds-gray-400); border-radius: 50%; background: var(--surface); display: inline-block; position: relative; cursor: pointer; vertical-align: -3px; }
.rd:hover { border-color: var(--fg-muted); }
.rd:checked { border-color: var(--ds-gray-1000); }
.rd:checked::after { content: ''; position: absolute; inset: 3px; background: var(--ds-gray-1000); border-radius: 50%; }
.rd:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Switch ───────────────────────────── */
.sw { appearance: none; width: 28px; height: 16px; border-radius: 9px; background: var(--ds-gray-300); position: relative; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: left var(--dur-fast) var(--ease); }
.sw:checked { background: var(--ds-gray-1000); }
.sw:checked::after { left: 14px; }
.sw:disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══════════════════════════════════════
   BADGES / TAGS / STATUS
   ═══════════════════════════════════════ */

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 6px;
  border-radius: var(--r-sm);
  font-size: 11px; font-weight: 500; line-height: 1;
  background: var(--ds-gray-100);
  color: var(--fg);
}
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge-neutral { background: var(--ds-gray-100); color: var(--fg); }
.badge-success { background: var(--success-bg);  color: var(--success); }
.badge-warning { background: var(--warning-bg);  color: var(--warning); }
.badge-danger  { background: var(--danger-bg);   color: var(--danger); }
.badge-info    { background: var(--info-bg);     color: var(--info); }
.badge-outline { background: transparent; color: var(--fg-muted); border: 1px solid var(--border); }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 6px 0 8px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); font-size: 12px; color: var(--fg-muted);
}
.tag-x { color: var(--fg-subtle); cursor: pointer; line-height: 1; }
.tag-x:hover { color: var(--fg); }

.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.status-dot-success { background: var(--success); }
.status-dot-warning { background: var(--warning); }
.status-dot-danger  { background: var(--danger); }
.status-dot-neutral { background: var(--fg-subtle); }
.status-dot-pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Status combo (borderless "● status ▾" dropdown trigger) ── */
.status-combo {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--r);
  background: transparent; color: var(--fg); font-size: 12px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.status-combo:hover { background: var(--bg-subtle); }
.status-combo[aria-expanded="true"] { background: var(--bg-subtle); border-color: var(--border); }
.status-combo > .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-combo > .chev { width: 12px; height: 12px; opacity: 0.55; flex-shrink: 0; }
.status-combo:disabled { opacity: 0.5; cursor: not-allowed; }
.dot-success { background: var(--success); }
.dot-warning { background: var(--warning); }
.dot-danger  { background: var(--danger); }
.dot-neutral { background: var(--fg-subtle); }
.dot-outline { background: transparent; border: 1.5px solid var(--border-strong); }

/* ═══════════════════════════════════════
   CARD
   ═══════════════════════════════════════ */
.card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.card-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.card-h h2, .card-h h3 { margin: 0; font-size: 15px; font-weight: 600; }
.card-b { padding: 16px; }
.card-b-tight { padding: 12px 16px; }
/* Tablo bir kartın ana içeriğiyse flush oturur: card-b padding'i sıfırlanır
   (th/td kendi 16px yatay padding'iyle card-h ile hizalanır), yatay taşma
   tabloya hapsedilir (sayfa/main scroll yerine). .table-scroll wrapper'ı hâlâ
   kart-dışı tablolar için kullanılabilir; kart-içi tablolar bunu otomatik alır. */
.card-b:has(> table.tbl) {
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.card-b:has(> table.tbl) > table.tbl {
  min-width: max-content;
}
.card-hover { transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.card-hover:hover { border-color: var(--ds-gray-300); }

/* ═══════════════════════════════════════
   METRIC CARD — dashboard özet kartı (spec 4.3)
   ═══════════════════════════════════════ */
.metric-card {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.metric-card .metric-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
}
.metric-card .metric-value {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}
.metric-card .metric-link {
    font-size: 12px;
    color: var(--fg-subtle);
    text-decoration: none;
    margin-top: 4px;
}
.metric-card .metric-link:hover { color: var(--fg); }

/* ═══════════════════════════════════════
   EMPTY STATE (spec 4.6)
   ═══════════════════════════════════════ */
.empty-state {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
}
.empty-state-icon {
    font-size: 48px;
    color: var(--fg-subtle);
    line-height: 1;
    margin-bottom: 4px;
}
.empty-state-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--fg);
}
.empty-state-message {
    font-size: 13px;
    color: var(--fg-muted);
    max-width: 60ch;
    line-height: 1.5;
}
.empty-state-cta {
    margin-top: 12px;
}

/* ═══════════════════════════════════════
   PAGE TITLE + BREADCRUMB (spec 4.8)
   ═══════════════════════════════════════ */
.page-title {
    margin-bottom: 20px;
}
.page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}
.page-title-h {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--fg);
    margin: 0;
    line-height: 1.25;
}
.page-title-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-title-crumbs {
    font-size: 12px;
    color: var(--fg-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.page-title-crumbs a {
    color: var(--fg-muted);
    text-decoration: none;
}
.page-title-crumbs a:hover { color: var(--fg); }
.page-title-crumbs .is-current { color: var(--fg); }
.page-title-sep { color: var(--ds-gray-400); flex-shrink: 0; }

/* Mobil — sayfa başlığı 24px, yanındaki buton (13px) / kart etiketleri (11px) ve
   metric değerleriyle (24px) yarışıp baskın duruyor; dar ekranda 20px daha dengeli. */
@media (max-width: 767px) {
  .page-title-h { font-size: 20px; }
}

/* ═══════════════════════════════════════
   SPINNER
   ═══════════════════════════════════════ */
.spinner {
  display: inline-block; border-radius: 50%;
  border: 1.5px solid currentColor; border-top-color: transparent;
  animation: spin 800ms linear infinite;
}
.spinner-sm { width: 12px; height: 12px; }
.spinner-md { width: 16px; height: 16px; }
.spinner-lg { width: 24px; height: 24px; }
.spinner-xl { width: 32px; height: 32px; }

/* ═══════════════════════════════════════
   TABLE
   ═══════════════════════════════════════ */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; font-weight: 500;
  padding: 10px 16px;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--surface);
  /* T15: sticky kaldırıldı — .table-scroll wrapper'ı (overflow-x:auto) yüzünden
     sticky thead page scroll yerine wrapper scroll'a yapışıyordu; wrapper kısa
     olduğundan pratikte hiç yapışmıyordu. Sticky-free akış daha tutarlı. */
}
.tbl td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  vertical-align: middle;
}
.tbl tbody tr:hover td { background: var(--ds-gray-100); }
.tbl-id { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--fg-subtle); letter-spacing: -0.01em; }
.tbl-time { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--fg-muted); white-space: nowrap; }
.tbl-row-clickable { cursor: pointer; }
.tbl-row-clickable:hover .tbl-id { color: var(--fg-muted); }
.tbl-empty td { padding: 48px; text-align: center; color: var(--fg-subtle); }

.tbl-batch {
  background: var(--ds-gray-1000); color: #fff;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
  border-radius: var(--r) var(--r) 0 0;
}
.tbl-batch .btn { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.2); }
.tbl-batch .btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.32); }
.tbl-batch .tbl-batch-btn-danger { color: #fcb6b6; }
.tbl-batch .tbl-batch-btn-danger:hover { background: rgba(229,72,77,0.2); color: #ffd0d0; border-color: rgba(229,72,77,0.4); }
.tbl-batch .tbl-batch-btn-ghost { color: rgba(255,255,255,0.7); }
.tbl-batch .tbl-batch-btn-ghost:hover { color: #fff; }

/* ─────────────────────────────────────────
   Tablo — mobil yatay kaydırma ergonomisi (≤767px)
   Karar (kullanıcı onaylı): tablolar mobilde yatay kayar, kolon gizlenmez.
   İlk kolon sabitlenir → sağa kayarken satır kimliği (ID/ad) görünür kalır.
   Sağ kenardaki gölge "devamı var" ipucudur. is-* sınıfları dashboard.js'ten.
   ───────────────────────────────────────── */
@media (max-width: 767px) {
  .tbl th:first-child,
  .tbl td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
  }
  .tbl tbody tr:hover td:first-child { background: var(--ds-gray-100); }
  .tbl tbody tr.is-selected td:first-child { background: var(--bg-subtle); }
  .tbl tbody tr.is-selected:hover td:first-child { background: var(--ds-gray-200); }

  /* sabit kolon ayıracı — yalnız yatay kaydırma başlayınca belirir */
  .tbl-scroll.is-scrolled-x .tbl th:first-child,
  .tbl-scroll.is-scrolled-x .tbl td:first-child {
    box-shadow: 6px 0 6px -4px rgba(0,0,0,0.12);
    clip-path: inset(0 -8px 0 0);
  }

  /* sağ kenar "devamı var" ipucu — kaydırılabilir ve sonunda değilken */
  .card:has(> .tbl-scroll.is-scrollable-x:not(.is-at-end)) { position: relative; }
  .card:has(> .tbl-scroll.is-scrollable-x:not(.is-at-end))::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.09));
    pointer-events: none;
    z-index: 2;
  }
}

/* ═══════════════════════════════════════
   MODAL / DRAWER
   ═══════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 48px);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  transform: scale(0.96); opacity: 0;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
  overflow: hidden;
}
.modal-card > .card-b,
.modal-card > .card-b-tight {
  overflow-y: auto;
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
  min-height: 0;
}
.modal-card.is-open { transform: scale(1); opacity: 1; }
.modal-card-md { max-width: 640px; }
.modal-card-lg { max-width: 880px; }
.modal-card-qwiz { max-width: 720px; }
.modal-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-h h2 { margin: 0; }
.modal-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.drawer-overlay {
  position: fixed; inset: 0;
  height: 100vh;
  background: rgba(0,0,0,0.3);
  z-index: var(--z-overlay);
}
.drawer-panel {
  position: fixed; top: 0; right: 0;
  width: 100%; max-width: 640px;
  height: 100vh; max-height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
}
/* Body scroll lock when drawer/modal overlay açıksa — :has() ile, JS plumbing yok */
body:has(.drawer-overlay:not([style*="display: none"])),
body:has(.modal-overlay:not([style*="display: none"])) {
  overflow: hidden;
}
.drawer-panel.is-open { transform: translateX(0); }
.drawer-panel-sm { max-width: 320px; }
.drawer-panel-md { max-width: 480px; }
.drawer-panel-lg { max-width: 640px; }
.drawer-panel-xl { max-width: 820px; }
.drawer-h {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-h.drawer-h-stacked { align-items: flex-start; gap: 12px; }
.drawer-body { flex: 1; overflow: auto; padding: 20px; }
.drawer-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ───────────────────────────────────────
   Question modal (Üretim — soru detay)
   ─────────────────────────────────────── */
.modal-card-xl { max-width: 1040px; }

.qmodal-card {
  /* .modal-card temelinin üstünde: padding 0, çünkü iç bölümler kendi padding'lerini taşır */
  padding: 0;
  max-height: 90vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.qmodal-h {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.qmodal-h-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }

.qmodal-split {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  padding: 16px 20px;
  overflow: auto;
  min-height: 0;
}
@media (max-width: 768px) {
  .qmodal-split { grid-template-columns: 1fr; gap: 16px; }
}
/* Inline split — drawer içindeki tab content gibi yerlerde modal-split davranışı */
.qmodal-split-inline {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
}
@media (max-width: 768px) {
  .qmodal-split-inline { grid-template-columns: 1fr; gap: 16px; }
}

.qmodal-canvas {
  background: var(--ds-gray-100);
  border-radius: 8px;
  padding: 20px;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
}
.qmodal-canvas img {
  max-width: 100%; max-height: 520px;
  width: auto; height: auto;
  object-fit: contain; display: block;
}

.qmodal-meta {
  display: grid;
  grid-template-columns: 88px 1fr;
  column-gap: 12px;
  row-gap: 6px;
  font-size: 13px;
  line-height: 20px;
  margin: 0;
  align-items: center;
}
.qmodal-meta dt { color: var(--fg-muted); font-weight: 400; }
.qmodal-meta dd { color: var(--fg); margin: 0; min-width: 0; }
.qmodal-meta dd .badge { font-size: 11px; }

.qmodal-sidebar-section { margin-top: 20px; }
.qmodal-sidebar-section:first-child { margin-top: 0; }
.qmodal-sidebar-section h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--fg-muted);
  font-weight: 500;
  margin: 0 0 10px;
}

.qmodal-activity-item {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 13px; line-height: 18px;
  padding: 5px 0;
}
.qmodal-activity-item + .qmodal-activity-item {
  border-top: 1px solid var(--border);
}
.qmodal-activity-item .dot,
.qmodal-activity-item .status-dot {
  flex-shrink: 0;
  align-self: center;
}
.qmodal-activity-time {
  color: var(--fg-muted); font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
}

.qmodal-prompt {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.qmodal-prompt textarea {
  resize: none;
  font-size: 14px; line-height: 20px;
}
.qmodal-prompt-actions {
  display: flex; gap: 8px; align-items: center;
}
.qmodal-prompt-actions .grow { flex: 1; }
.qmodal-prompt-hint {
  font-size: 11px; color: var(--ds-gray-700);
}

/* ───────────────────────────────────────
   Üretim — sağ kolon preview kartı
   ─────────────────────────────────────── */
.preview-card {
  display: flex; flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.preview-card-h {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.preview-card-h-meta { flex: 1; min-width: 0; }
.preview-card-canvas {
  background: var(--ds-gray-100);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  min-height: 220px;
  flex: 1;
}
.preview-card-canvas:not(:last-child) {
  border-bottom: 1px solid var(--border);
}
.preview-card-canvas img {
  max-width: 100%; max-height: 260px;
  width: auto; height: auto;
  object-fit: contain; display: block;
}
.preview-img {
  max-width: 100%; max-height: 560px;
  width: auto; height: auto;
  object-fit: contain; display: block;
}
.preview-img-thumb {
  display: block;
  margin: 0 auto;
  max-height: 192px;
  border-radius: var(--r);
  border: 1px solid var(--border);
}

/* arşiv detay drawer 2-kolon grid: kaynak sayfa + form */
.grid-cols-arsiv-detail { grid-template-columns: 180px 1fr; }
@media (max-width: 768px) { .grid-cols-arsiv-detail { grid-template-columns: 1fr; } }
.preview-card-prompt {
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.preview-card-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--fg-subtle);
  font-size: 13px;
}

/* Mode tabs içinde kart header'ı — Vercel pattern */
.card-tabs-header {
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
}
.card-tabs-header .tabs { border-bottom: none; }

/* ═══════════════════════════════════════
   DROPDOWN / MENU
   ═══════════════════════════════════════ */
.menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-menu);
  min-width: 200px;
  padding: 4px;
  z-index: var(--z-dropdown);
}
.menu-item {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--fg);
  cursor: pointer;
}
.menu-item:hover { background: var(--ds-gray-100); }
.menu-item.is-danger { color: var(--danger); }
.menu-item-disabled { opacity: 0.4; cursor: not-allowed; }
.menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
.menu-group-label {
  padding: 8px 8px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  font-weight: 500;
}

/* ═══════════════════════════════════════
   TABS
   ═══════════════════════════════════════ */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
}
.tab {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--fg-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  background: transparent;
  border-left: none; border-right: none; border-top: none;
}
.tab:hover { color: var(--fg); }
.tab.is-active { color: var(--fg); border-bottom-color: var(--fg); font-weight: 500; }

/* Vercel-style segmented pill control — variant of .tabs */
.tabs-pills {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--ds-gray-100);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
}
.tabs-pills .tab {
  height: 26px;
  padding: 0 12px;
  margin: 0;
  border: none;
  border-radius: var(--r-full);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.tabs-pills .tab:hover { color: var(--fg); }
.tabs-pills .tab.is-active {
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
}
.tabs-pills.is-full {
  display: flex;
  width: 100%;
}
.tabs-pills.is-full .tab {
  flex: 1;
  justify-content: center;
}
.card-pills-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}

/* ═══════════════════════════════════════
   TOAST
   ═══════════════════════════════════════ */
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fg);
  border-radius: var(--r-md);
  padding: 12px 16px;
  box-shadow: var(--shadow);
  min-width: 280px; max-width: 400px;
  display: flex; align-items: flex-start; gap: 10px;
  transform: translateY(8px); opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  pointer-events: auto;
}
.toast.is-open { transform: translateY(0); opacity: 1; }
.toast-success { border-left-color: var(--success); }
.toast-warning { border-left-color: var(--warning); }
.toast-danger  { border-left-color: var(--danger); }
.toast-msg { font-size: 13px; color: var(--fg); flex: 1; }
.toast-close { color: var(--fg-subtle); cursor: pointer; font-size: 16px; line-height: 1; }
.toast-close:hover { color: var(--fg); }

/* ═══════════════════════════════════════
   BANNER
   ═══════════════════════════════════════ */
.banner {
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid;
  border-left-width: 3px;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px;
}
.banner-success { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.banner-warning { border-color: var(--warning); background: var(--warning-bg); color: var(--warning); }
.banner-danger  { border-color: var(--danger);  background: var(--danger-bg);  color: var(--danger); }
.banner-info    { border-color: var(--border);  background: var(--bg-subtle);  color: var(--fg); }
.banner-actions { margin-left: auto; display: flex; gap: 6px; }
.banner .grow { flex: 1; min-width: 0; }
.banner .btn-close { margin: -2px -4px -2px 0; flex-shrink: 0; }

/* ═══════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════ */
.pgnt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  font-size: 13px; color: var(--fg-muted);
}
.pgnt-pages { display: flex; gap: 4px; }
.pgnt-pg {
  min-width: 32px; height: 32px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 13px; cursor: pointer;
  background: var(--surface);
}
.pgnt-pg:hover { border-color: var(--ds-gray-400); }
.pgnt-pg.is-active { background: var(--ds-gray-1000); color: #fff; border-color: var(--ds-gray-1000); }
.pgnt-pg.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══════════════════════════════════════
   EMPTY / ERROR STATES
   ═══════════════════════════════════════ */
.state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 64px 24px; max-width: 360px; margin: 0 auto; gap: 8px;
}
.state-icon { width: 32px; height: 32px; color: var(--fg-subtle); }
.state-icon.is-danger { color: var(--danger); }
.state-title { font-size: 18px; font-weight: 600; color: var(--fg); margin-top: 12px; letter-spacing: -0.01em; }
.state-msg { font-size: 13px; color: var(--fg-muted); line-height: 1.5; }
.state-cta { margin-top: 16px; }

/* ═══════════════════════════════════════
   SKELETON / PROGRESS
   ═══════════════════════════════════════ */
.skel {
  background: linear-gradient(90deg, var(--ds-gray-100) 0%, var(--ds-gray-200) 50%, var(--ds-gray-100) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s linear infinite;
  border-radius: var(--r-sm);
  display: block;
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.progress {
  width: 100%; height: 4px;
  background: var(--ds-gray-100);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--ds-gray-1000);
  border-radius: var(--r-full);
  transition: width var(--dur) var(--ease);
}
.progress-thin { height: 2px; }

/* ═══════════════════════════════════════
   KBD
   ═══════════════════════════════════════ */
.kbd {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--ds-gray-100);
  color: var(--fg-muted);
}

/* ═══════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════ */
.tt { position: relative; display: inline-flex; }
.tt-tip {
  position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--ds-gray-1000); color: #fff;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
  z-index: var(--z-popover);
}
.tt:hover .tt-tip, .tt:focus-within .tt-tip { opacity: 1; transition-delay: 200ms; }

/* ═══════════════════════════════════════
   JSON PREVIEW
   ═══════════════════════════════════════ */
.json-pre {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  background: var(--ds-background-100);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  max-height: 360px;
  overflow: auto;
  color: var(--fg);
  white-space: pre;
  margin: 0;
  line-height: 1.6;
}

/* ═══════════════════════════════════════
   FILE UPLOAD ZONE
   ═══════════════════════════════════════ */
.dz {
  border: 1.5px dashed var(--ds-gray-300);
  border-radius: var(--r-md);
  padding: 32px 24px;
  text-align: center;
  background: var(--ds-background-100);
  color: var(--fg-muted);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  display: block;
}
.dz:hover, .dz.is-dragover {
  border-color: var(--ds-gray-1000);
  background: var(--surface);
  color: var(--fg);
}

/* ═══════════════════════════════════════
   JOB STATUS PILL (header)
   ═══════════════════════════════════════ */
.job-pill {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 360px;
  padding: 4px 10px 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 12px;
  color: var(--fg);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  line-height: 1.4;
  user-select: none;
}
.job-pill:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.job-pill:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }
.job-pill .job-pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-subtle);
  flex-shrink: 0;
}
.job-pill .job-pill-label { font-weight: 500; }
.job-pill .job-pill-sep { color: var(--fg-subtle); }
.job-pill .job-pill-event {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--fg-muted);
}
.job-pill .job-pill-elapsed {
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 11px;
  color: var(--fg-subtle);
  flex-shrink: 0;
}
.job-pill .job-pill-chev {
  width: 12px; height: 12px;
  color: var(--fg-subtle);
  flex-shrink: 0;
}
.job-pill .job-pill-spinner { width: 12px; height: 12px; flex-shrink: 0; }

/* State variantları (dot rengi + opsiyonel arka plan vurgusu) */
.job-pill[data-variant="running"]      .job-pill-dot { background: var(--success); animation: pill-dot-pulse 1.4s ease-in-out infinite; }
.job-pill[data-variant="succeeded"]    .job-pill-dot { background: var(--success); }
.job-pill[data-variant="failed"]       .job-pill-dot { background: var(--danger); }
.job-pill[data-variant="quality_hold"] .job-pill-dot { background: var(--warning); }
.job-pill[data-variant="cancelled"]    .job-pill-dot { background: var(--fg-subtle); }
.job-pill[data-variant="queued"]       .job-pill-dot { background: var(--fg-muted); }

/* Idle (iş yok) — soluk + tıklanamaz */
.job-pill[data-variant="idle"] {
  background: transparent;
  color: var(--fg-subtle);
  cursor: not-allowed;
  border-color: var(--border);
}
.job-pill[data-variant="idle"]:hover { background: transparent; border-color: var(--border); }
.job-pill[data-variant="idle"] .job-pill-dot { background: var(--fg-subtle); }
.job-pill[data-variant="idle"] .job-pill-chev { visibility: hidden; }

/* Yeni iş başlama animasyonu (2 sn) */
.job-pill.is-just-started { animation: pill-pulse-ring 1.2s ease-out 2; }

@keyframes pill-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@keyframes pill-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(0, 122, 90, 0.45); }
  100% { box-shadow: 0 0 0 8px rgba(0, 122, 90, 0); }
}

/* Mobil */
@media (max-width: 640px) {
  .job-pill { max-width: 240px; }
  .job-pill .job-pill-chev { display: none; }
}

/* ============================================================
   T19 PRE-CLEANUP — AdminLTE tasfiyesi öncesi Geist replacement'lar
   ============================================================ */

/* Close button (X) — replaces Bootstrap .btn-close */
.btn-close {
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--r);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-muted);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn-close:hover { background: var(--ds-gray-100); color: var(--fg); }
.btn-close::before {
    content: '';
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'><line x1='3' y1='3' x2='11' y2='11'/><line x1='11' y1='3' x2='3' y2='11'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}

/* App footer (replaces Bootstrap .app-footer + .float-end + .d-sm-inline) */
.page-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    font-size: 12px;
    color: var(--fg-muted);
    border-top: 1px solid var(--border);
}
.page-footer-meta { display: flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
    .page-footer-copy { display: none; }
}

/* ═══════════════════════════════════════
   PAGE TOPBAR (sayfa içi başlık çubuğu)
   ═══════════════════════════════════════
   Bazı sayfalar shell topbar'ı taklit eden iç bir başlık çubuğu kullanıyor
   (örn. havuz, isler, uretim — breadcrumb + sağda durum/aksiyon).
   Bu sınıf, parent `.p-6` padding'ini negate edip shell ile hizalı bir
   topbar üretir. Shell `.topbar` (index.html) ile birebir aynı yüksekliği
   ve padding'i kullanır.
   ═══════════════════════════════════════ */
.topbar-page {
  height: var(--shell-topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  margin: -24px -24px 0;   /* parent .p-6 padding'ini negate eder */
  flex-shrink: 0;
}
.topbar-page-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--ds-gray-300);
  transform: skew(-20deg);
  margin: 0 4px;
}

/* ═══════════════════════════════════════
   TREE (taksonomi ağacı)
   ═══════════════════════════════════════ */
.tree-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.tree-node:hover { background: var(--bg-subtle); }
.tree-node.is-active { background: var(--bg-muted); font-weight: 500; }
.tree-leaf { color: var(--fg-muted); }
.tree-scroll { max-height: 70vh; overflow: auto; }
.audit-log-scroll { max-height: 60vh; overflow: auto; }

/* Taksonomi 2-kolon layout: sol ağaç (320px) + sağ detay */
.grid-cols-taksonomi { grid-template-columns: 320px 1fr; }
@media (max-width: 768px) { .grid-cols-taksonomi { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════
   TABLE ROW SELECTED STATE
   ═══════════════════════════════════════ */
.tbl tbody tr.is-selected td { background: var(--bg-subtle); }
.tbl tbody tr.is-selected:hover td { background: var(--ds-gray-200); }

/* ═══════════════════════════════════════
   LABEL ROW (settings/form layout helper)
   ═══════════════════════════════════════
   "Sol etiket + açıklama, sağ kontrol" iki-kolon satır deseni.
   Ardışık satırlar ince ayraç ile ayrılır. */
.label-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.label-row:first-child { border-top: none; }
.label-row-title { font-size: 13px; font-weight: 500; color: var(--fg); }
.label-row-help  { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
@media (max-width: 640px) {
  .label-row { grid-template-columns: 1fr; gap: 6px; padding: 8px 0; }
}

/* ═══════════════════════════════════════
   CHART BAR (istatistik bar chart)
   ═══════════════════════════════════════
   Yükseklik runtime'da :style ile bind edilir (dinamik). Track + bar pattern'i
   class'tan gelir. */
.chart-bar-track {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--border);
}
.chart-bar-track-sm { height: 160px; }
.chart-bar-track-xs { height: 120px; }
.chart-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.chart-bar-value {
  font-size: 12px;
  color: var(--fg-muted);
  font-family: 'Geist Mono', ui-monospace, monospace;
}
.chart-bar {
  width: 100%;
  max-width: 48px;
  background: var(--fg);
  border-radius: 4px 4px 0 0;
  transition: height var(--dur) var(--ease);
}
.chart-bar-labels {
  display: flex;
  gap: 12px;
  padding: 6px 8px 0;
}
.chart-bar-label {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--fg-subtle);
}

/* ═══════════════════════════════════════
   DONUT (istatistik durum dağılımı)
   ═══════════════════════════════════════ */
.donut {
  position: relative;
  width: 140px;
  height: 140px;
}
.donut-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* background runtime :style ile bind */
}
.donut-hole {
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: var(--bg);
}
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.donut-center-value {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.donut-center-label {
  font-size: 12px;
  color: var(--fg-muted);
}
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.donut-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  /* color runtime :style ile bind */
}
.donut-legend-count {
  margin-left: auto;
  color: var(--fg-muted);
  font-family: 'Geist Mono', ui-monospace, monospace;
}
.donut-legend-pct {
  color: var(--fg-subtle);
  font-size: 12px;
}

/* ═══════════════════════════════════════
   EVENT LOG (isler + uretim canlı iş log)
   ═══════════════════════════════════════ */
.event-log {
  display: flex;
  flex-direction: column;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: auto;
}
.event-log-sm { max-height: 288px; }
.event-log-md { max-height: 60vh; min-height: 240px; }
.event-log-bare { border: none; border-radius: 0; }
.event-log-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 12px;
}
.event-log-item .status-dot { margin-top: 6px; flex-shrink: 0; }
.event-log-item-time {
  color: var(--fg-subtle);
  flex-shrink: 0;
}
.event-log-item-body {
  flex: 1;
  min-width: 0;
}
.event-log-empty {
  padding: 12px;
  color: var(--fg-subtle);
}

/* ═══════════════════════════════════════
   STATUS DOT — runtime size override için yardımcı
   (8px gerekiyorsa, hard-code yerine bunu kullan)
   ═══════════════════════════════════════ */
.status-dot-lg { width: 8px; height: 8px; }

/* ═══════════════════════════════════════
   LOCK STATE (kilitli kart / readonly enum)
   ═══════════════════════════════════════ */
.card.is-locked { opacity: 0.85; }
.card.is-locked .card-h h3 { color: var(--fg-muted); }

/* ═══════════════════════════════════════
   TABLE SCROLL (mobil/tablet yatay overflow)
   ═══════════════════════════════════════ */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: max-content; }

/* ═══════════════════════════════════════
   GEIST UTILITY LAYER — Bootstrap utility portu
   (Task 19'da adminlte.css silinince hayatta kalsın)
   ═══════════════════════════════════════ */

/* Spacing — margin */
.me-1 { margin-right: 4px; }
.me-2 { margin-right: 8px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Spacing — padding */
.p-0 { padding: 0; }
.p-2 { padding: 8px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 16px; padding-bottom: 16px; }
.py-4 { padding-top: 24px; padding-bottom: 24px; }
.py-5 { padding-top: 32px; padding-bottom: 32px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 16px; padding-right: 16px; }
.ps-3 { padding-left: 16px; }
.pe-2 { padding-right: 8px; }

/* Gap */
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }

/* Sizing */
.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* Display */
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }

/* Flex */
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.flex-1 { flex: 1 1 0%; min-width: 0; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.border-b { border-bottom: 1px solid var(--border); }

/* Text */
.text-center { text-align: center; }
.text-start { text-align: left; }
.text-end { text-align: right; }
.fw-bold { font-weight: 700; }
.fw-semibold { font-weight: 600; }
.fw-normal { font-weight: 400; }
.small { font-size: 12px; }

/* ═══════════════════════════════════════
   LAYOUT — sayfa-içi yerleşimler
   ═══════════════════════════════════════ */

/* Metrics grid — N adet metric-card'ı eşit dağıtır */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.metric-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease;
}
.metric-card-link:hover { transform: translateY(-1px); }
.metric-card-link:hover .metric-card { border-color: var(--ds-gray-400); }

/* Page split — ana içerik + sağ aside (8/4 oran) */
.page-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.page-split--7-5 { grid-template-columns: 7fr 5fr; }
.page-split--5-7 { grid-template-columns: 5fr 7fr; }
.balance-value { font-size: 32px; font-weight: 700; color: var(--fg); margin: 4px 0; }
.page-split-main, .page-split-side { min-width: 0; }
@media (max-width: 900px) {
    .page-split, .page-split--7-5, .page-split--5-7 { grid-template-columns: 1fr; }
}

/* Definition list — soru detayı vb. */
.def-list {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    row-gap: 8px;
    column-gap: 16px;
    margin: 0 0 16px 0;
}
.def-list dt {
    color: var(--fg-muted);
    font-weight: 500;
    font-size: 13px;
    margin: 0;
}
.def-list dd {
    margin: 0;
    color: var(--fg);
    font-size: 14px;
}
@media (max-width: 640px) {
    .def-list { grid-template-columns: 1fr; row-gap: 4px; }
    .def-list dd { margin-bottom: 8px; }
}

/* Stack — children arasına dikey aralık */
.stack-1 > * + * { margin-top: 4px; }
.stack-2 > * + * { margin-top: 8px; }
.stack-3 > * + * { margin-top: 16px; }

/* Card eklentileri (Geist .card / .card-h / .card-b mevcut) */
.card-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.card-foot {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    color: var(--fg-muted);
    font-size: 12px;
}

/* Review card (Task 3 — inceleme/index için) */
.review-card { margin-bottom: 16px; }
.review-card-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 16px;
}
.review-card-visual { text-align: center; }
.review-card-actions { display: flex; flex-direction: column; gap: 4px; }
.review-img {
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
@media (max-width: 768px) {
    .review-card-grid { grid-template-columns: 1fr; }
}

/* Danger ghost button — Reddet vb. yıkıcı outline aksiyon */
.btn-danger-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--danger);
}
.btn-danger-ghost:hover {
    background: var(--ds-red-100, #feebec);
    color: var(--danger);
    border-color: transparent;
}

/* Form field wrapper — Geist form-field component */
.form-field { margin-bottom: 16px; }
.form-field:last-child { margin-bottom: 0; }

/* Form grid 2 — 2-column form layout */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
/* Mobil: iki kolonlu form alanları tek kolona iner (sıkışma/etiket sarması olmasın). */
@media (max-width: 560px) {
    .form-grid-2 { grid-template-columns: 1fr; }
}

/* Input with prefix/suffix affix (Bootstrap input-group karşılığı) */
.input-affix-group { display: flex; align-items: stretch; }
.input-affix-group .ctrl { border-radius: 0; flex: 1; min-width: 0; }
.input-affix-group > :first-child { border-top-left-radius: var(--r); border-bottom-left-radius: var(--r); }
.input-affix-group > :last-child  { border-top-right-radius: var(--r); border-bottom-right-radius: var(--r); }
.input-affix {
    display: inline-flex; align-items: center;
    padding: 0 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    color: var(--fg-muted);
    font-size: 13px;
    white-space: nowrap;
}
.input-affix + .ctrl  { margin-left: -1px; }
.ctrl + .input-affix  { margin-left: -1px; }

/* data-table + admin liste yardımcıları (sayfa-içi tekrardan taşındı) */
.g7-num { font-variant-numeric: tabular-nums; }
.g7-rowmain { font-weight: 500; color: var(--fg); text-decoration: none; }
.tbl-row-clickable:hover .g7-rowmain { color: var(--link); }
.dt[data-dt] th[data-dt-th] { cursor: pointer; user-select: none; }
.dt[data-dt] th[data-dt-th]:hover { color: var(--fg); }