/* ==========================================================================
   Evascrape — Design Tokens
   Tek kaynak: landing + app paneli bu dosyayı paylaşır.

   Tema çözümü:
     1. :root            → açık tema varsayılan
     2. prefers-color-scheme: dark → sistem tercihi koyu ise otomatik koyu
     3. [data-theme="dark"] / [data-theme="light"] → kullanıcının açık seçimi,
        her iki yönde de sistem tercihini ezer.
   ========================================================================== */

/* ==========================================================================
   Inter — kendi sunucumuzda barındırılıyor (fonts.googleapis.com'a gitmiyoruz).
   Google artık Inter'i DEĞİŞKEN font olarak sunuyor: 400/500/600/700 istekleri
   bayt bayt AYNI dosyayı döndürüyor. Bu yüzden tek @font-face + `font-weight:
   100 900` tüm ağırlıkları karşılıyor — 4 istek yerine 1 istek.

   "Inter Fallback": Inter yüklenene kadar kullanılan Arial'in metriklerini
   Inter'e eşitler. Override'lar olmadan yazı tipi takası satır yüksekliğini
   değiştiriyor ve CLS üretiyordu (hero-visual + pricing-section kayıyordu).
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metrik eşlemeli yedek: Inter yüklenmeden önce ve sonra satır kutuları aynı
   yükseklikte kalır, dolayısıyla takas anında hiçbir şey kaymaz. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}

:root {
  /* --- Yüzeyler ------------------------------------------------------- */
  --bg: #ffffff;
  --bg-subtle: #fafaf9;
  --bg-inset: #f5f5f4;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-overlay: rgba(255, 255, 255, 0.85);

  /* --- Kenarlıklar ---------------------------------------------------- */
  --border: #e7e5e4;
  --border-strong: #d6d3d1;
  --border-accent: #d6d3d1;

  /* --- Metin ---------------------------------------------------------- */
  --text: #1c1917;
  --text-muted: #57534e;
  /* #78808f açık zeminlerde 3.48–3.98:1 veriyordu, AA'nın altında.
     #646b7a: #ffffff 5.35:1, #f6f7f9 4.99:1, #eef0f4 4.69:1 — üçü de geçer. */
  --text-subtle: #6b6560;
  --text-inverse: #ffffff;

  /* --- Marka ---------------------------------------------------------- */
  --accent: #1c1917;
  --accent-hover: #292524;
  --accent-active: #0c0a09;
  --accent-fg: #ffffff;
  --accent-text: #1d4ed8;
  --accent-subtle: #f5f5f4;
  --accent-subtle-hover: #e7e5e4;

  /* --- Durum ---------------------------------------------------------- */
  --success: #15803d;
  --success-subtle: #f0fdf4;
  --success-border: #bbf7d0;

  --warning: #a16207;
  --warning-subtle: #fefce8;
  --warning-border: #fde68a;

  --danger: #b91c1c;
  --danger-subtle: #fef2f2;
  --danger-border: #fecaca;

  --info: #1d4ed8;
  --info-subtle: #eff6ff;
  --info-border: #bfdbfe;

  /* --- Yükselti -------------------------------------------------------- */
  --shadow-xs: 0 1px 0 rgba(28, 25, 23, 0.04);
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-md: 0 2px 6px rgba(28, 25, 23, 0.07);
  --shadow-lg: 0 4px 14px rgba(28, 25, 23, 0.08);
  --shadow-xl: 0 10px 30px rgba(28, 25, 23, 0.10);
  --shadow-accent: 0 1px 2px rgba(28, 25, 23, 0.12);

  /* --- Dekoratif ------------------------------------------------------- */
  --glow-1: transparent;
  --glow-2: transparent;
  --grid-line: transparent;
  --skeleton: linear-gradient(90deg, #f5f5f4 25%, #e7e5e4 37%, #f5f5f4 63%);

  /* --- Tipografi ------------------------------------------------------- */
  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.2rem, 0.5vw + 1.1rem, 1.375rem);
  --text-2xl: clamp(1.45rem, 1vw + 1.2rem, 1.75rem);
  --text-3xl: clamp(1.75rem, 1.6vw + 1.35rem, 2.25rem);
  --text-4xl: clamp(2.1rem, 2.6vw + 1.5rem, 3rem);
  --text-5xl: clamp(2.5rem, 4vw + 1.6rem, 3.75rem);

  /* --- Ölçü ------------------------------------------------------------ */
  --container: 1200px;
  --container-narrow: 760px;
  --header-h: 68px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 3px;

  /* Tek satırlık form denetimlerinin ortak yüksekliği: input, select, düğme ve
     kaydırıcı aynı satırda aynı boyda dursun diye tek yerden yönetilir. */
  --control-h: 42px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;

  color-scheme: light;
}

/* --- Sistem tercihi koyu ---------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0a09;
    --bg-subtle: #12100f;
    --bg-inset: #1c1917;
    --surface: #12100f;
    --surface-raised: #1c1917;
    --surface-overlay: rgba(12, 10, 9, 0.85);

    --border: #292524;
    --border-strong: #44403c;
    --border-accent: #44403c;

    --text: #fafaf9;
    --text-muted: #a8a29e;
    /* #79828f, --bg-inset (4.45:1) ve --surface-raised (4.25:1) üzerinde AA'nın
       altında kalıyordu. #8a93a1 beş yüzeyin hepsinde 5.32:1 ve üstü verir. */
    --text-subtle: #918b85;
    --text-inverse: #0c0a09;

    /* Beyaz metin #6366f1 üzerinde 4.47:1 (eşik 4.5) — sitedeki her birincil
       düğme kalıyordu. #5d60ec: beyaz 4.83:1, --bg 4.03:1, --surface 3.69:1.
       Hover/active rampası da açık temadaki gibi KOYULAŞACAK yöne çevrildi;
       eskiden hover'da açılıyordu ve kontrast 3.58:1 / 2.87:1'e düşüyordu. */
    --accent: #fafaf9;
    --accent-hover: #e7e5e4;
    --accent-active: #d6d3d1;
    --accent-fg: #0c0a09;
    --accent-text: #93c5fd;
    --accent-subtle: #1c1917;
    --accent-subtle-hover: #292524;

    --success: #4ade80;
    --success-subtle: #0a1f14;
    --success-border: #166534;

    --warning: #fbbf24;
    --warning-subtle: #1c1508;
    --warning-border: #854d0e;

    --danger: #f87171;
    --danger-subtle: #1f0f0f;
    --danger-border: #991b1b;

    --info: #93c5fd;
    --info-subtle: #0c1626;
    --info-border: #1e40af;

    --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.65);
    --shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.7);
    --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.6);

    --glow-1: transparent;
    --glow-2: transparent;
    --grid-line: transparent;
    --skeleton: linear-gradient(90deg, #1c1917 25%, #292524 37%, #1c1917 63%);

    color-scheme: dark;
  }
}

/* --- Kullanıcının açık seçimi: her iki yönde de kazanır ---------------- */
:root[data-theme="dark"] {
  --bg: #0c0a09;
  --bg-subtle: #12100f;
  --bg-inset: #1c1917;
  --surface: #12100f;
  --surface-raised: #1c1917;
  --surface-overlay: rgba(12, 10, 9, 0.85);

  --border: #292524;
  --border-strong: #44403c;
  --border-accent: #44403c;

  --text: #fafaf9;
  --text-muted: #a8a29e;
  /* Yukarıdaki @media bloğuyla aynı gerekçe. */
  --text-subtle: #918b85;
  --text-inverse: #0c0a09;

  --accent: #fafaf9;
  --accent-hover: #e7e5e4;
  --accent-active: #d6d3d1;
  --accent-fg: #0c0a09;
  --accent-text: #93c5fd;
  --accent-subtle: #1c1917;
  --accent-subtle-hover: #292524;

  --success: #4ade80;
  --success-subtle: #0a1f14;
  --success-border: #166534;

  --warning: #fbbf24;
  --warning-subtle: #1c1508;
  --warning-border: #854d0e;

  --danger: #f87171;
  --danger-subtle: #1f0f0f;
  --danger-border: #991b1b;

  --info: #93c5fd;
  --info-subtle: #0c1626;
  --info-border: #1e40af;

  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.65);
  --shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.7);
  --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.6);

  --glow-1: transparent;
  --glow-2: transparent;
  --grid-line: transparent;
  --skeleton: linear-gradient(90deg, #1c1917 25%, #292524 37%, #1c1917 63%);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-subtle: #fafaf9;
  --bg-inset: #f5f5f4;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-overlay: rgba(255, 255, 255, 0.85);

  --border: #e7e5e4;
  --border-strong: #d6d3d1;
  --border-accent: #d6d3d1;

  --text: #1c1917;
  --text-muted: #57534e;
  /* :root ile aynı gerekçe: #78808f açık zeminlerde AA'yı geçmiyordu. */
  --text-subtle: #6b6560;
  --text-inverse: #ffffff;

  --accent: #1c1917;
  --accent-hover: #292524;
  --accent-active: #0c0a09;
  --accent-fg: #ffffff;
  --accent-text: #1d4ed8;
  --accent-subtle: #f5f5f4;
  --accent-subtle-hover: #e7e5e4;

  --success: #15803d;
  --success-subtle: #f0fdf4;
  --success-border: #bbf7d0;

  --warning: #a16207;
  --warning-subtle: #fefce8;
  --warning-border: #fde68a;

  --danger: #b91c1c;
  --danger-subtle: #fef2f2;
  --danger-border: #fecaca;

  --info: #1d4ed8;
  --info-subtle: #eff6ff;
  --info-border: #bfdbfe;

  --shadow-xs: 0 1px 0 rgba(28, 25, 23, 0.04);
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-md: 0 2px 6px rgba(28, 25, 23, 0.07);
  --shadow-lg: 0 4px 14px rgba(28, 25, 23, 0.08);
  --shadow-xl: 0 10px 30px rgba(28, 25, 23, 0.10);
  --shadow-accent: 0 1px 2px rgba(28, 25, 23, 0.12);

  --glow-1: transparent;
  --glow-2: transparent;
  --grid-line: transparent;
  --skeleton: linear-gradient(90deg, #f5f5f4 25%, #e7e5e4 37%, #f5f5f4 63%);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Geriye dönük takma adlar

   EJS şablonlarındaki inline style'lar bu eski isimlere bakıyor. Custom
   property'ler geç çözümlendiği için burada tek sefer tanımlamak yeterli:
   tema değiştiğinde sağ taraftaki semantik token değişir, takma ad onu izler.

   Not: --text-primary, --text-secondary, --border-color, --bg-sidebar ve
   --bg-editor eski style.css'te de hiç tanımlı değildi; o inline style'lar
   bugüne kadar sessizce çalışmıyordu. Burada ilk kez gerçek değer kazanıyorlar.
   -------------------------------------------------------------------------- */
:root {
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --secondary: var(--text);
  --secondary-hover: var(--text-muted);

  --bg-white: var(--bg);
  --bg-alt: var(--bg-subtle);
  --bg-surface: var(--surface);
  --bg-sidebar: var(--bg-subtle);
  --bg-editor: var(--surface);

  --text-main: var(--text);
  --text-light: var(--text-subtle);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);

  --border-color: var(--border);

  --container-width: var(--container);
  --header-height: var(--header-h);
}