/* ═══════════════════════════════════════════════════════════
   GLOBAL STYLES — Tipografi, Layout, Temel Stiller
   ═══════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
}

/* ─── Tipografi ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

/* ─── Links ──────────────────────────────────────────── */
a.link {
  color: var(--color-primary);
  font-weight: var(--fw-medium);
  transition: color var(--transition-fast);
  border-bottom: 1px solid transparent;
}

a.link:hover {
  color: var(--color-primary-hover);
  border-bottom-color: var(--color-primary-hover);
}

/* ─── Container ──────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--tight {
  max-width: var(--container-tight);
}

/* ─── Main Content ───────────────────────────────────── */
main {
  min-height: calc(100vh - var(--header-height) - 200px);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-4xl);
}

/* ─── Section Spacing ────────────────────────────────── */
.section {
  margin-bottom: var(--space-4xl);
}

.section__header {
  margin-bottom: var(--space-2xl);
}

.section__title {
  margin-bottom: var(--space-sm);
}

.section__subtitle {
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
  font-weight: var(--fw-regular);
  max-width: 600px;
}

/* ─── Selection ──────────────────────────────────────── */
::selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ─── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* ─── Utilities ──────────────────────────────────────── */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-small { font-size: var(--fs-small); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --fs-display: 2.5rem;
    --fs-h1: 2rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.25rem;
    --fs-h4: 1.125rem;
  }

  .container {
    padding: 0 var(--space-lg);
  }

  main {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-3xl);
  }
}

@media (max-width: 480px) {
  :root {
    --fs-display: 2rem;
    --fs-h1: 1.75rem;
    --fs-h2: 1.375rem;
  }

  .container {
    padding: 0 var(--space-md);
  }
}