/* ═══════════════════════════════════════════════════════════════════════
 * Logosoft AI — tasarım temeli (foundation)
 *
 * Beautiful UI'nin (https://www.beautifului.dev, MIT, Turbo) temel katmanı
 * vanilla CSS'e uyarlandı. Oradan alınanlar: OKLCH nötr rampa, mürekkep
 * (ink) rampası, saç teli kenarlıklar, katmanlı yumuşak gölgeler, yarıçap
 * ve easing ölçeği, hareket keyframe'leri.
 * Gölge yığınları shadow-plugin'den (flornkm, MIT).
 *
 * NEDEN BURADA, index.html'in içinde DEĞİL:
 * index.html tek başına 870 KB ve içindeki <style> blokları 290 KB. Renk
 * kararlarının tek bir kaynağı olsun diye jetonlar buraya alındı; index.html
 * içindeki :root artık YALNIZ bu dosyanın sahiplenmediği şeyleri tanımlar
 * (marka türevleri, kategori paleti, tipografi).
 *
 * NEDEN REACT DEĞİL:
 * Beautiful UI bileşenleri Next.js + React + Tailwind v4 + TypeScript. Bizim
 * arayüzümüz derleme adımı olmayan tek dosyalık vanilla HTML. Bileşenleri
 * olduğu gibi kuramayız; taşınabilir olan tasarım DİLİdir ve o da saf CSS.
 * Bu dosya o dili taşır — 2000'den fazla var() kullanımı tek noktadan döner.
 *
 * MARKA KARARI: Beautiful UI'nin mavi aksanı yerine Logosoft mavisi korundu.
 * Taşınan şey nötrler, gölgeler ve hareket; kurumsal kimlik bizde kalır.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── yüzeyler — serin, maviye çalan nötrler ──────────────────────────
   * canvas: sayfa zemini · surface: kart · inset: kart içi oyuk alan
   * hover / hover-2: etkileşim katmanları */
  --canvas: oklch(0.961 0.002 247.84);
  --surface: oklch(1 0 0);
  --inset: oklch(0.979 0.002 247.839);
  --hover: oklch(0.97 0.002 247.839);
  --hover-2: oklch(0.933 0.003 247.86);
  --field: oklch(0.961 0.001 286.375);

  /* ── mürekkep rampası — başlıktan sessiz metne ─────────────────────── */
  --ink: oklch(0.247 0.006 258.361);
  --ink-2: oklch(0.506 0.01 264.477);
  --ink-3: oklch(0.695 0.009 264.505);

  /* ── kenarlıklar — alfa değil, gerçek renk: üst üste binince grileşmez */
  --line: oklch(0.946 0.003 264.542);
  --line-strong: oklch(0.912 0.005 258.326);
  --line-soft: oklch(0.966 0.002 264.542);

  /* ── marka (Logosoft mavisi, OKLCH'e çevrildi) ─────────────────────── */
  --brand: oklch(0.484 0.14 250.892);
  --brand-dark: oklch(0.419 0.122 250.928);
  --brand-deep: oklch(0.341 0.087 249.163);
  --brand-soft: oklch(0.958 0.016 239.104);
  --brand-line: oklch(0.484 0.14 250.892 / 0.18);
  --brand-tint: oklch(0.484 0.14 250.892 / 0.08);

  /* ── anlamsal renkler — baharat gibi, az kullanılır ────────────────── */
  --success: oklch(0.64 0.145 158.933);
  --success-tint: oklch(0.64 0.145 158.933 / 0.1);
  --warning: oklch(0.712 0.147 72.705);
  --warning-tint: oklch(0.712 0.147 72.705 / 0.1);
  --danger: oklch(0.608 0.179 24.17);
  --danger-tint: oklch(0.608 0.179 24.17 / 0.1);

  /* ── gölge yığınları (shadow-plugin, MIT) ───────────────────────────
   * Tek bir yumuşak gölge yerine üst üste binen ince katmanlar: kenar
   * sertliği kaybolur, yüzey gerçekten yükseliyormuş gibi okunur. */
  --smooth-xs: 0 0 4px 0 rgba(0, 0, 0, 0.04);
  --smooth-sm:
    0 18px 47px 0 rgba(0, 0, 0, 0.03), 0 7.5px 19px 0 rgba(0, 0, 0, 0.02),
    0 4px 10.5px 0 rgba(0, 0, 0, 0.02), 0 2.3px 5.8px 0 rgba(0, 0, 0, 0.01),
    0 1.2px 3.1px 0 rgba(0, 0, 0, 0.01), 0 0.5px 1.3px 0 rgba(0, 0, 0, 0.01);
  --smooth-md:
    0 17.54px 23.39px 0 rgba(0, 0, 0, 0.04), 0 9.4px 12.5px 0 rgba(0, 0, 0, 0.03),
    0 5.25px 7px 0 rgba(0, 0, 0, 0.02), 0 2.79px 3.72px -2px rgba(0, 0, 0, 0.01),
    0 1.16px 1.5px 0 rgba(0, 0, 0, 0.01);
  --smooth-lg:
    0 25px 50px 0 rgba(0, 0, 0, 0.05), 0 12px 24px 0 rgba(0, 0, 0, 0.04),
    0 6px 12px 0 rgba(0, 0, 0, 0.03), 0 3px 6px 0 rgba(0, 0, 0, 0.02),
    0 1.5px 3px 0 rgba(0, 0, 0, 0.02);
  --smooth-xl:
    0 40px 80px 0 rgba(0, 0, 0, 0.06), 0 20px 40px 0 rgba(0, 0, 0, 0.05),
    0 10px 20px 0 rgba(0, 0, 0, 0.04), 0 5px 10px 0 rgba(0, 0, 0, 0.03),
    0 2px 4px 0 rgba(0, 0, 0, 0.02);

  /* Halkalı sürümler: kenarlık gölgenin İÇİNE gömülür, ayrı bir border
   * çizgisi gibi durmaz. border:1px olan öğelerde bunları KULLANMA —
   * çift kenar olur; onlar --shadow / --shadow-lg kullanmalı. */
  --shadow-hairline: 0 0 0 1px var(--line);
  --shadow-btn: 0 0 0 1px var(--line-strong), var(--smooth-xs);
  --shadow-card: 0 0 0 1px var(--line), var(--smooth-sm);
  --shadow-raised: 0 0 0 1px var(--line), var(--smooth-md);
  --shadow-overlay: 0 0 0 1px var(--line), var(--smooth-lg);
  --shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.12);

  /* ── yarıçap ölçeği — çip 6, kontrol 8, kart 10, pencere 14 ────────── */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* ── easing — tarayıcı yerleşikleri fazla yumuşak, bunlar keskin ───── */
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-link: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

  /* ═══ ESKİ AD KATMANI ═══════════════════════════════════════════════
   * Arayüzdeki 2000+ var() kullanımı bu adlara bakıyor. Değerleri
   * yukarıdaki jetonlara bağlamak, tek satır değişiklikle tüm ekranı
   * yeni palete geçirir — 666 sabit hex'i tek tek düzenlemeye gerek yok. */
  --bg: var(--canvas);
  --bg-elevated: var(--surface);
  --bg-subtle: var(--hover);
  --border: var(--line);
  --border-light: var(--line-soft);
  --border-strong: var(--line-strong);
  --text: oklch(0.3 0.006 258.361);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --shadow: var(--smooth-sm);
  --shadow-lg: var(--smooth-lg);
  --shadow-xl: var(--smooth-xl);
  --transition: 0.24s var(--ease-out-strong);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;

  /* Arayüzde var(--x) ile çağrılan ama HİÇBİR yerde tanımlanmamış adlar.
     Tanımsız bir var() kuralın tamamını düşürür; yani bu satırlar olmadan
     ilgili kurallar sessizce hiç uygulanmıyordu. Bu bir düzeltme, taşıma
     değil — bulundukları yerde marka/nötr karşılıklarına bağlandılar. */
  --primary: var(--brand);
  --primary-light: var(--brand-soft);
  --accent-strong: var(--brand-dark);
  --bg-soft: var(--inset);
  --brand-border: var(--brand-line);
}

[data-theme="dark"] {
  --canvas: oklch(0.209 0.004 264.477);
  --surface: oklch(0.26 0.006 271.191);
  --inset: oklch(0.243 0.004 264.492);
  --hover: oklch(0.289 0.006 271.22);
  --hover-2: oklch(0.318 0.007 274.747);
  --field: oklch(0.293 0.006 271.223);

  --ink: oklch(0.964 0.002 247.839);
  --ink-2: oklch(0.731 0.008 260.731);
  --ink-3: oklch(0.541 0.01 264.484);

  --line: oklch(0.308 0.006 258.354);
  --line-strong: oklch(0.356 0.007 264.474);
  --line-soft: oklch(0.278 0.006 258.354);

  /* Marka karanlıkta AÇILIR. Bu renk arayüzde metin/ikon olarak da
     kullanılıyor; koyu lacivert kalırsa göz yorgunluğunun tek en büyük
     kaynağı olur. */
  --brand: oklch(0.676 0.141 250.92);
  --brand-dark: oklch(0.596 0.134 251.62);
  --brand-deep: oklch(0.52 0.121 251.91);
  --brand-soft: oklch(0.676 0.141 250.92 / 0.15);
  --brand-line: oklch(0.676 0.141 250.92 / 0.3);
  --brand-tint: oklch(0.676 0.141 250.92 / 0.12);

  --success: oklch(0.744 0.145 163.37);
  --success-tint: oklch(0.744 0.145 163.37 / 0.14);
  --warning: oklch(0.778 0.136 79.98);
  --warning-tint: oklch(0.778 0.136 79.98 / 0.14);
  --danger: oklch(0.688 0.164 22.33);
  --danger-tint: oklch(0.688 0.164 22.33 / 0.14);

  /* Karanlıkta yükseklik halkası AÇIK bir saç teline döner: halka arkadaki
     yüzeyin üstüne biner, düşük alfalı beyaz kenar gölgeye karışıp tek bir
     sürekli çizgi olarak okunur. */
  --shadow-btn: 0 0 0 1px oklch(1 0 0 / 0.1), 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-card:
    0 0 0 1px oklch(1 0 0 / 0.11), 0 1px 2px oklch(0 0 0 / 0.2),
    0 2px 6px oklch(0 0 0 / 0.2);
  --shadow-raised: 0 0 0 1px oklch(1 0 0 / 0.13), 0 2px 10px oklch(0 0 0 / 0.22);
  --shadow-overlay: 0 0 0 1px oklch(1 0 0 / 0.15), 0 8px 28px oklch(0 0 0 / 0.34);
  --shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.4);

  /* Karanlıkta yumuşak yığınlar görünmez olur; opaklık yükseltilir. */
  --smooth-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --smooth-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.24);
  --smooth-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.28);
  --smooth-lg: 0 4px 12px rgba(0, 0, 0, 0.34), 0 16px 44px rgba(0, 0, 0, 0.34);
  --smooth-xl: 0 8px 24px rgba(0, 0, 0, 0.4), 0 28px 70px rgba(0, 0, 0, 0.44);

  --text: oklch(0.88 0.005 260);

  color-scheme: dark;
}

/* ── temel hijyen ─────────────────────────────────────────────────────
 * interfaces.dev listesinden: başlıklar dengelenir, paragraflar öksüz
 * satır bırakmaz, alt çizgiler harf kuyruklarını keser. */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  text-underline-position: from-font;
  text-decoration-skip-ink: auto;
}

::selection {
  background: var(--brand-tint);
  color: var(--ink);
}

/* Tema değişince yüzlerce renk aynı anda döner. Geçişleri o an dondurmak,
   birbirini tutmayan onlarca renk animasyonu yerine tek temiz boyama verir.
   Kullanımı: <html>'e .theme-switching ekle, tema değiştir, bir sonraki
   kareden sonra kaldır. */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

/* Dokunmatikte :hover bir kez basınca yapışır — satır/başlık vurgularını
   orada nötrle. */
@media (hover: none) {
  .nav-item:hover,
  .tabulator-row:hover {
    background: transparent;
  }
}

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

/* ── hareket ──────────────────────────────────────────────────────────
 * AI arayüzünün nabzı: parlama (bekleme), yukarı-belirme (yeni içerik),
 * denge çubukları (dinleme), imleç (yazma). */
@keyframes shimmer-text {
  from {
    background-position: 150% center;
  }
  to {
    background-position: -50% center;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes eq-bounce {
  0%,
  100% {
    transform: scaleY(0.35);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes caret-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pixel-on {
  0%,
  100% {
    opacity: 0.15;
  }
  18%,
  42% {
    opacity: 1;
  }
  62% {
    opacity: 0.15;
  }
}