/* ==========================================================================
   Kodend UI v0.1 — ortak tasarım token'ları ve temel bileşenler
   Kullanım:
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap">
     <link rel="stylesheet" href="/kodend-ui/kodend-ui.css">
     <html data-product="commerce">  → aksan: mavi     (E-Ticaret)
     <html data-product="connect">   → aksan: turkuaz  (Pazaryeri)
     (yok)                           → aksan: kırmızı  (kodend.com, hesap)
     <html data-theme="dark|light">  → elle tema; yoksa sistem teması
   Mevcut Bootstrap panellere (boss/, Connect "modernize") en son yüklenen
   override katmanı olarak eklenir. Ayrıntı: docs/tasarim-sistemi.md
   ========================================================================== */

:root {
  /* Nötrler */
  --kd-ink: #141A33;
  --kd-bg: #FAFAFC;
  --kd-surface: #FFFFFF;
  --kd-soft: #EEEFF8;
  --kd-line: #E3E5EF;
  --kd-muted: #5D6380;

  /* Marka ve ürün aksanları */
  --kd-brand: #CB2228;
  --kd-brand-soft: #FBE7E8;
  --kd-commerce: #2F49D1;
  --kd-commerce-soft: #E5E9FC;
  --kd-connect: #0B8F80;
  --kd-connect-soft: #DDF4F1;
  --kd-on-accent: #FFFFFF;

  /* Durum (aksandan bağımsız) */
  --kd-ok: #15803D;
  --kd-warn: #B45309;
  --kd-err: #C42B2B;
  --kd-info: #2563EB;

  /* Aktif aksan — ürün seçimine göre değişir */
  --kd-accent: var(--kd-brand);
  --kd-accent-soft: var(--kd-brand-soft);

  /* Tipografi */
  --kd-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --kd-font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --kd-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --kd-text-xs: .75rem;
  --kd-text-sm: .875rem;
  --kd-text-md: 1rem;
  --kd-text-lg: 1.125rem;
  --kd-text-xl: 1.375rem;
  --kd-text-2xl: 1.75rem;
  --kd-text-3xl: 2.25rem;
  --kd-text-4xl: 3rem;

  /* Boşluk (4 tabanlı) */
  --kd-s1: 4px; --kd-s2: 8px; --kd-s3: 12px; --kd-s4: 16px;
  --kd-s5: 24px; --kd-s6: 32px; --kd-s7: 48px; --kd-s8: 64px;

  /* Köşe ve gölge */
  --kd-r-sm: 6px;
  --kd-r-md: 10px;
  --kd-r-lg: 16px;
  --kd-r-pill: 999px;
  --kd-shadow-float: 0 8px 24px rgba(20, 26, 51, .12), 0 2px 6px rgba(20, 26, 51, .08);

  --kd-focus: 0 0 0 3px color-mix(in srgb, var(--kd-accent) 35%, transparent);
  --kd-ease: cubic-bezier(.2, .7, .2, 1);
}

:root[data-product="commerce"] { --kd-accent: var(--kd-commerce); --kd-accent-soft: var(--kd-commerce-soft); }
:root[data-product="connect"]  { --kd-accent: var(--kd-connect);  --kd-accent-soft: var(--kd-connect-soft); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kd-ink: #E8EAF6; --kd-bg: #0E1124; --kd-surface: #161A32; --kd-soft: #1D2240;
    --kd-line: #2A2F4D; --kd-muted: #9AA0BF;
    --kd-brand: #FF6B70; --kd-brand-soft: #3D1B1E;
    --kd-commerce: #8FA0FF; --kd-commerce-soft: #1F2650;
    --kd-connect: #3FD0BD; --kd-connect-soft: #123532;
    --kd-on-accent: #0E1124;
    --kd-ok: #4ADE80; --kd-warn: #FBBF24; --kd-err: #F87171; --kd-info: #60A5FA;
    --kd-shadow-float: 0 8px 24px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --kd-ink: #E8EAF6; --kd-bg: #0E1124; --kd-surface: #161A32; --kd-soft: #1D2240;
  --kd-line: #2A2F4D; --kd-muted: #9AA0BF;
  --kd-brand: #FF6B70; --kd-brand-soft: #3D1B1E;
  --kd-commerce: #8FA0FF; --kd-commerce-soft: #1F2650;
  --kd-connect: #3FD0BD; --kd-connect-soft: #123532;
  --kd-on-accent: #0E1124;
  --kd-ok: #4ADE80; --kd-warn: #FBBF24; --kd-err: #F87171; --kd-info: #60A5FA;
  --kd-shadow-float: 0 8px 24px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ---------- Temel ---------- */
.kd, .kd-body {
  background: var(--kd-bg);
  color: var(--kd-ink);
  font: 400 var(--kd-text-sm)/1.6 var(--kd-font-body);
  -webkit-font-smoothing: antialiased;
}
.kd h1, .kd h2, .kd h3, .kd-h { font-family: var(--kd-font-display); line-height: 1.15; text-wrap: balance; color: var(--kd-ink); }
.kd-mono, .kd code { font-family: var(--kd-font-mono); }
.kd-num { font-variant-numeric: tabular-nums; }
.kd-muted { color: var(--kd-muted); }
.kd-eyebrow { font: 600 var(--kd-text-xs)/1 var(--kd-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--kd-accent); }
.kd :focus-visible { outline: none; box-shadow: var(--kd-focus); }

/* ---------- Buton ---------- */
.kd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kd-s2);
  min-height: 38px; padding: 0 var(--kd-s4);
  border: 1px solid transparent; border-radius: var(--kd-r-sm);
  font: 600 var(--kd-text-sm)/1 var(--kd-font-body); white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s var(--kd-ease), border-color .15s var(--kd-ease), transform .1s;
}
.kd-btn:active { transform: translateY(1px); }
.kd-btn:disabled, .kd-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.kd-btn--primary { background: var(--kd-accent); color: var(--kd-on-accent); }
.kd-btn--primary:hover { background: color-mix(in srgb, var(--kd-accent) 88%, var(--kd-ink)); }
.kd-btn--secondary { background: var(--kd-surface); color: var(--kd-ink); border-color: var(--kd-line); }
.kd-btn--secondary:hover { background: var(--kd-soft); }
.kd-btn--ghost { background: transparent; color: var(--kd-accent); }
.kd-btn--ghost:hover { background: var(--kd-accent-soft); }
.kd-btn--danger { background: var(--kd-err); color: var(--kd-on-accent); }
.kd-btn--sm { min-height: 30px; padding: 0 var(--kd-s3); font-size: var(--kd-text-xs); }
.kd-btn--lg { min-height: 46px; padding: 0 var(--kd-s5); font-size: var(--kd-text-md); }

/* ---------- Form ---------- */
.kd-field { display: flex; flex-direction: column; gap: var(--kd-s1); }
.kd-label { font-weight: 600; font-size: var(--kd-text-sm); }
.kd-hint { font-size: var(--kd-text-xs); color: var(--kd-muted); }
.kd-error-text { font-size: var(--kd-text-xs); color: var(--kd-err); }
.kd-input, .kd-select, .kd-textarea {
  width: 100%; min-height: 38px; padding: var(--kd-s2) var(--kd-s3);
  background: var(--kd-surface); color: var(--kd-ink);
  border: 1px solid var(--kd-line); border-radius: var(--kd-r-sm);
  font: inherit;
}
.kd-input:focus, .kd-select:focus, .kd-textarea:focus { border-color: var(--kd-accent); box-shadow: var(--kd-focus); outline: none; }
.kd-input[aria-invalid="true"] { border-color: var(--kd-err); }

/* ---------- Kart ve istatistik ---------- */
.kd-card { background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--kd-r-md); padding: var(--kd-s5); }
.kd-stat { display: flex; flex-direction: column; gap: 2px; }
.kd-stat__label { font-size: var(--kd-text-xs); color: var(--kd-muted); }
.kd-stat__value { font: 700 var(--kd-text-2xl)/1.1 var(--kd-font-display); font-variant-numeric: tabular-nums; }
.kd-stat__delta--up { color: var(--kd-ok); font-size: var(--kd-text-xs); font-weight: 600; }
.kd-stat__delta--down { color: var(--kd-err); font-size: var(--kd-text-xs); font-weight: 600; }

/* ---------- Durum rozeti ---------- */
.kd-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: var(--kd-r-pill);
  font: 600 var(--kd-text-xs)/1.6 var(--kd-font-body); white-space: nowrap;
  background: var(--kd-soft); color: var(--kd-ink);
}
.kd-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kd-badge--ok   { background: color-mix(in srgb, var(--kd-ok) 15%, transparent);   color: var(--kd-ok); }
.kd-badge--warn { background: color-mix(in srgb, var(--kd-warn) 17%, transparent); color: var(--kd-warn); }
.kd-badge--err  { background: color-mix(in srgb, var(--kd-err) 15%, transparent);  color: var(--kd-err); }
.kd-badge--info { background: color-mix(in srgb, var(--kd-info) 15%, transparent); color: var(--kd-info); }

/* ---------- Tablo ---------- */
.kd-table-wrap { overflow-x: auto; background: var(--kd-surface); border: 1px solid var(--kd-line); border-radius: var(--kd-r-md); }
.kd-table { width: 100%; border-collapse: collapse; font-size: var(--kd-text-sm); }
.kd-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--kd-soft); color: var(--kd-muted);
  font-weight: 600; font-size: var(--kd-text-xs); text-align: left;
  padding: var(--kd-s2) var(--kd-s4); border-bottom: 1px solid var(--kd-line);
}
.kd-table td { padding: var(--kd-s3) var(--kd-s4); border-bottom: 1px solid var(--kd-line); vertical-align: middle; }
.kd-table tr:last-child td { border-bottom: 0; }
.kd-table tbody tr:hover { background: color-mix(in srgb, var(--kd-soft) 60%, transparent); }
.kd-table td.kd-num, .kd-table th.kd-num { text-align: right; }

/* ---------- Boş durum ---------- */
.kd-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--kd-s3); padding: var(--kd-s7) var(--kd-s5); color: var(--kd-muted); }
.kd-empty__title { font: 600 var(--kd-text-lg)/1.3 var(--kd-font-display); color: var(--kd-ink); }

/* ---------- Sekmeler ---------- */
.kd-tabs { display: flex; gap: var(--kd-s1); border-bottom: 1px solid var(--kd-line); overflow-x: auto; }
.kd-tab { padding: var(--kd-s3) var(--kd-s4); border: 0; background: none; color: var(--kd-muted); font: 600 var(--kd-text-sm) var(--kd-font-body); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.kd-tab[aria-selected="true"] { color: var(--kd-ink); border-bottom-color: var(--kd-accent); }

/* ---------- Adım göstergesi (onboarding) ---------- */
.kd-steps { display: flex; gap: var(--kd-s2); list-style: none; margin: 0; padding: 0; }
.kd-steps li { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: var(--kd-text-xs); color: var(--kd-muted); }
.kd-steps li::before { content: ""; height: 4px; border-radius: 2px; background: var(--kd-line); }
.kd-steps li[data-state="done"]::before, .kd-steps li[aria-current="step"]::before { background: var(--kd-accent); }
.kd-steps li[aria-current="step"] { color: var(--kd-ink); font-weight: 600; }

/* ---------- Toast ve modal ---------- */
.kd-toast {
  display: flex; align-items: center; gap: var(--kd-s3);
  padding: var(--kd-s3) var(--kd-s4); border-radius: var(--kd-r-md);
  background: var(--kd-ink); color: var(--kd-bg); box-shadow: var(--kd-shadow-float);
  font-size: var(--kd-text-sm);
}
.kd-modal { background: var(--kd-surface); border-radius: var(--kd-r-lg); box-shadow: var(--kd-shadow-float); padding: var(--kd-s6); max-width: min(560px, calc(100vw - 32px)); }
.kd-backdrop { position: fixed; inset: 0; background: rgba(14, 17, 36, .5); }

/* ---------- Kanal çipi (Connect) ---------- */
.kd-channel { display: inline-flex; align-items: center; gap: var(--kd-s2); padding: var(--kd-s1) var(--kd-s3) var(--kd-s1) var(--kd-s1); border: 1px solid var(--kd-line); border-radius: var(--kd-r-pill); background: var(--kd-surface); font-size: var(--kd-text-xs); font-weight: 600; }
.kd-channel__logo { width: 22px; height: 22px; border-radius: 50%; background: var(--kd-soft); display: grid; place-items: center; font-size: 10px; }

@media (prefers-reduced-motion: reduce) {
  .kd *, .kd *::before, .kd *::after { transition: none !important; animation: none !important; }
}