/* ==========================================================================
   FOUNDATION.CSS
   Adım 1/4 — Global Renk Paleti, Tipografi & Reset
   --------------------------------------------------------------------------
   Tasarım Dili: "Mürekkep & Teleks" (Ink & Telex)
   Klasik basın estetiğinden (gazete mürekkebi, kağıt, teleks bandı) ilham
   alan; koyu/aydınlık mod arasında geçiş yapabilen premium bir sistem.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT İÇE AKTARIMLARI
   - Fraunces   : Başlıklar için karakterli, "gazete manşeti" hissi veren
                  değişken ağırlıklı serif font.
   - Inter      : Gövde metni için yüksek okunabilirlik sağlayan grotesk.
   - JetBrains Mono : Kategori etiketleri, zaman damgaları, "teleks" hissi
                  veren mono-space utility font.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
   2. CSS DEĞİŞKENLERİ (DESIGN TOKENS)
   Tüm proje boyunca renk/spacing/typografi değerleri BURADAN türetilir.
   Bileşen dosyalarında "sihirli sayı" / ham hex değer kullanılmaz.
   -------------------------------------------------------------------------- */
:root {
  /* ---- Tipografi Aileleri ---- */
  --font-display: 'Fraunces', 'Georgia', serif;       /* Manşetler, başlıklar */
  --font-body: 'Inter', -apple-system, sans-serif;     /* Gövde metni, UI */
  --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Etiket, meta, saat */

  /* ---- Tipografi Ölçeği (Type Scale) — 1.25 oranlı (Major Third) ---- */
  --text-xs: 0.75rem;     /* 12px — mikro etiketler */
  --text-sm: 0.875rem;    /* 14px — meta bilgiler */
  --text-base: 1rem;      /* 16px — gövde metni */
  --text-md: 1.125rem;    /* 18px — vurgulu gövde */
  --text-lg: 1.375rem;    /* 22px — kart başlıkları */
  --text-xl: 1.75rem;     /* 28px — alt başlıklar */
  --text-2xl: 2.25rem;    /* 36px — bölüm başlıkları */
  --text-3xl: 3rem;       /* 48px — manşet (tablet) */
  --text-4xl: 4.25rem;    /* 68px — manşet (masaüstü) */

  /* ---- Boşluk Sistemi (8px bazlı) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- Grid & Container ---- */
  --container-max: 1440px;
  --container-padding: var(--space-5);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ---- Geçiş & Animasyon Eğrileri ----
     Premium "akıcı" his için yapay linear/ease yerine özel cubic-bezier
     eğrileri kullanılır — yumuşak başlangıç, kararlı duruş. */
  --ease-fluid: cubic-bezier(0.65, 0, 0.35, 1);       /* genel UI geçişleri */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* açılma / giriş */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* hover sıçraması */
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;

  /* ---- Z-Index Katmanları ---- */
  --z-breaking-bar: 60;
  --z-navbar: 50;
  --z-dropdown: 40;
  --z-overlay: 70;
  --z-modal: 80;

  /* ---- Gölgeler (Light mod referans; dark mod override eder) ---- */
  --shadow-sm: 0 1px 2px rgba(15, 18, 26, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 18, 26, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 18, 26, 0.12);
  --shadow-glow-accent: 0 0 24px rgba(212, 32, 44, 0.25);
}

/* --------------------------------------------------------------------------
   3. RENK PALETİ — AYDINLIK MOD (Varsayılan / "Kağıt")
   Sıcak, hafif kirli-beyaz bir kağıt tonu üzerine derin mürekkep yazısı.
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  /* Zemin Katmanları */
  --color-bg: #FAF8F4;            /* sıcak kağıt beyazı */
  --color-bg-elevated: #FFFFFF;   /* kart / yükseltilmiş yüzeyler */
  --color-bg-subtle: #F1EDE4;     /* hover, ayraç arkası */
  --color-bg-inverse: #15181F;    /* navbar gibi koyu bantlar (light modda da koyu kalır) */

  /* Metin Katmanları */
  --color-text-primary: #15181F;   /* mürekkep siyahı */
  --color-text-secondary: #4A4F5C; /* ikincil metin */
  --color-text-tertiary: #8A8F9C;  /* meta / zaman damgası */
  --color-text-on-inverse: #F1EDE4;

  /* Vurgu Renkleri */
  --color-accent-press: #D4202C;     /* basın kırmızısı — Son Dakika, CTA */
  --color-accent-press-hover: #B5121C;
  --color-accent-gold: #B8924F;      /* premium bakır/altın detay */
  --color-accent-gold-soft: #E4D2AC;

  /* Çizgiler & Kenarlıklar */
  --color-border: rgba(21, 24, 31, 0.10);
  --color-border-strong: rgba(21, 24, 31, 0.18);

  /* Kategori Renk Kodları — her kategorinin kendi "mürekkep" tonu */
  --cat-ekonomi: #1F6E50;
  --cat-guncel: #B5121C;
  --cat-egitim: #2A5C8A;
  --cat-gurme: #C2701A;
  --cat-turizm: #1A8C8C;
  --cat-kultur: #6B3FA0;
  --cat-teknoloji: #2563EB;
  --cat-gayrimenkul: #8A6D3B;
  --cat-spor: #1F7A3D;
  --cat-magazin: #C2287A;
  --cat-otomotiv: #4B5563;
}

/* --------------------------------------------------------------------------
   4. RENK PALETİ — KARANLIK MOD ("Karanlık Oda / Matbaa Gecesi")
   Derin lacivert-siyah zemin; kağıt değil, gece baskı atölyesi hissi.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg: #0B0E14;
  --color-bg-elevated: #12151D;
  --color-bg-subtle: #1A1E29;
  --color-bg-inverse: #0B0E14;

  --color-text-primary: #F1EDE4;
  --color-text-secondary: #B4B8C2;
  --color-text-tertiary: #707686;
  --color-text-on-inverse: #F1EDE4;

  --color-accent-press: #FF4B56;
  --color-accent-press-hover: #FF7077;
  --color-accent-gold: #D4B06C;
  --color-accent-gold-soft: #4A3F2A;

  --color-border: rgba(241, 237, 228, 0.08);
  --color-border-strong: rgba(241, 237, 228, 0.16);

  --cat-ekonomi: #3CA178;
  --cat-guncel: #FF4B56;
  --cat-egitim: #5B9BD9;
  --cat-gurme: #E8954B;
  --cat-turizm: #3FC4C4;
  --cat-kultur: #A87DDB;
  --cat-teknoloji: #5B8DEF;
  --cat-gayrimenkul: #C4A05E;
  --cat-spor: #4CAF6E;
  --cat-magazin: #E85AA0;
  --cat-otomotiv: #9CA3AF;

  /* Koyu modda gölgeler daha derin ve az opak olmalı */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow-accent: 0 0 28px rgba(255, 75, 86, 0.35);
}

/* Tema geçişi sırasında TÜM renk özellikleri yumuşak animasyonla değişsin.
   Böylece kullanıcı dark/light arasında geçtiğinde "flash" değil,
   premium bir "fade" hissi alır. */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color var(--duration-slow) var(--ease-fluid),
    border-color var(--duration-slow) var(--ease-fluid),
    color var(--duration-slow) var(--ease-fluid),
    box-shadow var(--duration-slow) var(--ease-fluid) !important;
}

/* --------------------------------------------------------------------------
   5. GLOBAL RESET
   Modern, minimal bir sıfırlama. Tarayıcı varsayılanlarını temizler,
   kutu modelini tutarlı hale getirir.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 1rem = 16px taban; kullanıcı tarayıcı zoom'unu bozmadan ölçeklenir */
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Tema değişimi body üzerinden yönetilir */
  transition: background-color var(--duration-slow) var(--ease-fluid);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  text-align: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Erişilebilir odak göstergesi — premium ama görünür.
   outline KALDIRILMAZ, sadece markaya uygun şekilde yeniden çizilir. */
:focus-visible {
  outline: 2px solid var(--color-accent-press);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Fare ile etkileşimde gereksiz outline göstermemek için (klavye kullanıcıları korunur) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Kullanıcı "azaltılmış hareket" tercih ettiyse TÜM animasyonları kıs.
   Premium deneyim, erişilebilirliği asla feda etmez. */
@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;
  }
}

/* --------------------------------------------------------------------------
   6. TİPOGRAFİ TEMEL STİLLERİ
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-4xl); font-weight: 700; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p {
  color: var(--color-text-secondary);
}

/* "Teleks" tarzı etiket metinleri — kategori, meta, zaman damgası için
   genel yardımcı sınıf. Geniş harf aralığı = basın ajansı teyp hissi. */
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   7. LAYOUT YARDIMCILARI
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Responsive kırılım noktaları — referans (yorum amaçlı, media query'lerde kullanılır)
   --bp-sm: 480px   (büyük telefon)
   --bp-md: 768px   (tablet)
   --bp-lg: 1024px  (küçük masaüstü)
   --bp-xl: 1280px  (masaüstü)
   --bp-2xl: 1536px (büyük masaüstü) */

@media (max-width: 768px) {
  :root {
    --container-padding: var(--space-4);
    --text-4xl: 2.75rem;  /* mobilde manşet boyutu küçülür */
    --text-3xl: 2.25rem;
  }
}