/* ============================================
   ZARİF TASARIM SİSTEMİ — Design Tokens
   2026-05-30

   Felsefe:
   - Beyaz baskın, minimal, modern (ChatGPT estetiği)
   - Az renk kullan, vurguda Apple mavisi + yeşil
   - Tipografi: Inter, weight max 600
   - Border radius max 10px (yumuşak köşeler)
   - Cömert boşluk, klinik temizlik
   - Tabular numerik (font-variant-numeric: tabular-nums) — sayılar hizalı

   Kullanım:
   1. Bu dosyayı projenize ekleyin: <link rel="stylesheet" href="tokens.css">
   2. Root selektör altında değişkenlere erişin: var(--rd-bg), var(--rd-fs-14)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* === RENKLER === */

  /* Yüzey renkleri (açıktan koyuya) */
  --rd-bg: #FFFFFF;
  --rd-sidebar-bg: #F7F7F8;
  --rd-surface: #FFFFFF;
  --rd-hover: #F0F0F0;
  --rd-bg-strong: #F1F5F9;

  /* Sınırlar (ince → kalın) */
  --rd-divider: #ECECEC;
  --rd-border: #E0E0E0;
  --rd-border-strong: #B0B0B0;

  /* Form girdi alanları */
  --rd-input-bg: #F0F0F2;

  /* Metin renkleri (kontrasttan soluğa) */
  --rd-text-strong: #000000;
  --rd-text: #1A1A1A;
  --rd-text-muted: #6E6E6E;
  --rd-text-soft: #9E9E9E;
  --rd-text-on-fill: #FFFFFF;

  /* Vurgu renkleri — AZ kullan */
  --rd-blue: #007AFF;
  --rd-blue-strong: #0062CC;
  --rd-blue-tint: rgba(0, 122, 255, 0.08);
  --rd-blue-ring: rgba(0, 122, 255, 0.16);

  --rd-green: #25D366;
  --rd-green-strong: #1FB855;
  --rd-green-tint: rgba(37, 211, 102, 0.08);

  --rd-red: #E5453A;
  --rd-red-tint: rgba(229, 69, 58, 0.08);

  --rd-orange: #E08600;
  --rd-orange-tint: rgba(224, 134, 0, 0.08);

  --rd-amber-tint: rgba(245, 158, 11, 0.08);

  /* === TİPOGRAFİ === */

  --rd-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;

  /* Font boyutları — küçükten büyüğe */
  --rd-fs-9: 9px;
  --rd-fs-10: 10px;
  --rd-fs-11: 11px;
  --rd-fs-12: 12px;
  --rd-fs-13: 13px;
  --rd-fs-14: 14px;
  --rd-fs-15: 15px;
  --rd-fs-16: 16px;
  --rd-fs-17: 17px;
  --rd-fs-18: 18px;
  --rd-fs-22: 22px;
  --rd-fs-24: 24px;

  /* Font ağırlığı — 600'ü geçme */
  --rd-fw-light: 300;
  --rd-fw-regular: 400;
  --rd-fw-medium: 500;
  --rd-fw-semibold: 600;

  /* Satır yüksekliği */
  --rd-lh-tight: 1.3;
  --rd-lh-normal: 1.55;
  --rd-lh-relaxed: 1.7;

  /* === SPACING === */

  /* Boşluk skalası — 4px temelli */
  --rd-s-1: 4px;
  --rd-s-2: 8px;
  --rd-s-3: 12px;
  --rd-s-4: 16px;
  --rd-s-5: 20px;
  --rd-s-6: 24px;
  --rd-s-8: 32px;
  --rd-s-10: 40px;
  --rd-s-12: 48px;

  /* === KÖŞE === */

  /* Yumuşak köşeler — 10px'i geçme */
  --rd-r-sm: 4px;
  --rd-r-md: 6px;
  --rd-r-lg: 8px;
  --rd-r-xl: 10px;

  /* === GÖLGE === */

  --rd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --rd-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --rd-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* === GEÇİŞLER === */

  --rd-tr-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --rd-tr-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* === ANA UYGULAMA STİLİ === */
/* Bu sınıfı kök DIV'ine ekleyin: <div class="zarif-app">...</div> */
.zarif-app {
  font-family: var(--rd-font);
  font-size: var(--rd-fs-14);
  line-height: var(--rd-lh-normal);
  color: var(--rd-text);
  background: var(--rd-bg);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11" on, "ss01" on;
}

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

/* Başlıklar — max 18px, ağırlık 500 */
.zarif-app h1,
.zarif-app h2,
.zarif-app h3,
.zarif-app h4,
.zarif-app h5,
.zarif-app h6 {
  font-family: var(--rd-font);
  font-weight: var(--rd-fw-medium);
  color: var(--rd-text-strong);
  letter-spacing: -0.02em;
  line-height: var(--rd-lh-tight);
  margin: 0;
}

/* Sayılar için tabular hizalama */
.zarif-app .num {
  font-variant-numeric: tabular-nums;
}

/* === KARANLIK MOD OPSİYONELDİR ===
   İhtiyaç olursa .dark sınıfı ile aşağıdaki değişkenleri override edin.
   Şu an açık tema baskındır. */