/**
 * CaseMagnet AI — Paylaşılan Tasarım Sistemi
 * Tüm sayfalar bu dosyayı <link rel="stylesheet" href="styles.css"> ile çeker.
 * Yön: Linear (hız/keskinlik) + Deel (kurumsal güven) + Supabase (teknik/geliştirici estetiği)
 *
 * Bu dosya sadece TASARIM TOKEN'LARINI (CSS custom property) tanımlar.
 * Bileşen class'ları (.btn, .card, .input-field vb.) Faz 2'de buraya eklenecek.
 */

:root {
  /* ---- Yüzeyler (koyu ana zemin, katmanlı) ---- */
  --color-bg: #0A0B0D;
  --color-bg-elevated: #121317;
  --color-surface: #16181D;
  --color-surface-hover: #1D2028;
  --color-border: #24262C;
  --color-border-strong: #33363E;

  /* ---- Vurgu rengi — tek, doygun mavi ---- */
  --color-accent: #4C7DFF;
  --color-accent-hover: #6E97FF;
  --color-accent-soft: rgba(76,125,255,0.14);
  --color-accent-text: #0A0B0D;

  /* ---- Metin ---- */
  --color-text: #F3F4F6;
  --color-text-muted: #9AA1AC;
  --color-text-subtle: #62666F;

  /* ---- Durum renkleri (minimal kullanım) ---- */
  --color-success: #34C08C;
  --color-success-soft: rgba(52,192,140,0.14);
  --color-error: #F0685E;
  --color-error-soft: rgba(240,104,94,0.14);

  /* ---- Tipografi ---- */
  --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 34px;
  --text-3xl: 44px;
  --text-4xl: 56px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;

  /* ---- Boşluk (spacing) birimleri ---- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* ---- Köşe yuvarlaklığı ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---- Gölge seviyeleri ---- */
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.45);
  --shadow-focus: 0 0 0 3px var(--color-accent-soft);

  /* ---- Geçiş (transition) süreleri ---- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

/* ============================================================
 * FAZ 2 — Bileşenler (buton, kart, input, badge)
 * ============================================================ */

/* ---- Buton ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-family-base);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-base), border-color var(--transition-base),
              color var(--transition-base), transform var(--transition-fast),
              box-shadow var(--transition-base);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--color-border); color: var(--color-text-subtle); cursor: not-allowed; }

.btn-primary { background: var(--color-accent); color: var(--color-accent-text); }
.btn-primary:hover { background: var(--color-accent-hover); }

.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); }

.btn-ghost { background: transparent; color: var(--color-text-muted); }
.btn-ghost:hover { color: var(--color-text); background: var(--color-surface); }

.btn-sm { padding: var(--space-3xs) var(--space-sm); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn-lg { padding: var(--space-sm) var(--space-lg); font-size: var(--text-md); }
.btn-block { width: 100%; }

/* ---- Kart ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.card--interactive:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
.card--accent { border-color: var(--color-accent); border-width: 2px; }

/* ---- Input ---- */
.input-field {
  width: 100%;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input-field::placeholder { color: var(--color-text-subtle); }
.input-field:focus { border-color: var(--color-accent); box-shadow: var(--shadow-focus); }
textarea.input-field { resize: vertical; min-height: 90px; line-height: var(--leading-normal); }

/* ---- Badge ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-full);
  font-family: var(--font-family-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--error { background: var(--color-error-soft); color: var(--color-error); }
.badge--neutral { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* ============================================================
 * FAZ 3 — Site nav & footer
 * "Site" sayfaları (index/privacy/demo) için ortak yapı.
 * chat.html ve widget.html bilinçli olarak DIŞARIDA (immersive/
 * embed deneyimler, chrome eklemek ürünü bozar).
 * ============================================================ */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,11,13,0.85);
  backdrop-filter: blur(20px);
}

.site-nav__logo {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  letter-spacing: var(--tracking-tight);
}
.site-nav__logo em { color: var(--color-accent); font-style: normal; }
.site-nav__logo .icon { color: var(--color-accent); width: 19px; height: 19px; }

.site-nav__links { display: flex; align-items: center; gap: var(--space-lg); }
.site-nav__links a { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-base); }
.site-nav__links a:hover { color: var(--color-text); }

.site-nav__actions { display: flex; align-items: center; gap: var(--space-2xs); }

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.site-footer__logo {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--color-text);
  text-decoration: none;
}
.site-footer__logo em { color: var(--color-accent); font-style: normal; }
.site-footer__logo .icon { color: var(--color-accent); width: 16px; height: 16px; }

.site-footer__meta { display: flex; align-items: center; gap: var(--space-md); }
.site-footer__meta span { font-size: var(--text-sm); color: var(--color-text-subtle); }
.site-footer__meta a { font-size: var(--text-sm); color: var(--color-text-subtle); text-decoration: none; transition: color var(--transition-base); }
.site-footer__meta a:hover { color: var(--color-text-muted); }

@media (max-width: 900px) {
  .site-nav { padding: var(--space-sm) var(--space-sm); }
  .site-nav__links { display: none; }
  .site-footer { flex-direction: column; gap: var(--space-xs); text-align: center; }
}