/* ============================================================
   base.css — Temel Stiller
   Body, tipografi, başlık hiyerarşisi, paragraflar
   ve genel yardımcı sınıflar tanımlanır.
   ============================================================ */

/* --- Body Temel Stilleri --- */
body {
  /* Tasarım tokenlerinden font ailesi */
  font-family: var(--font-family);
  /* Gövde metin boyutu */
  font-size: var(--font-size-body);
  /* Normal font ağırlığı */
  font-weight: var(--font-weight-regular);
  /* Satır yüksekliği */
  line-height: var(--line-height-normal);
  /* Ana metin rengi */
  color: var(--color-gray-900);
  /* Sayfa arka plan rengi */
  background-color: var(--color-white);
  /* Sticky header için padding — header yüksekliği kadar */
  padding-top: 80px;
}

/* --- Başlık Hiyerarşisi --- */

/* H1 — sayfa başlığı, sayfada tek kullanılır */
h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-gray-900);
  /* Alt boşluk */
  margin-bottom: var(--space-lg);
}

/* H2 — bölüm başlıkları */
h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-gray-900);
  margin-bottom: var(--space-md);
}

/* H3 — alt bölüm başlıkları */
h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-gray-900);
  margin-bottom: var(--space-sm);
}

/* --- Paragraf ve Metin --- */

/* Paragraflar — gövde metni stili */
p {
  margin-bottom: var(--space-md);
  color: var(--color-gray-700);
  line-height: var(--line-height-normal);
}

/* Son paragrafın alt boşluğunu kaldırır */
p:last-child {
  margin-bottom: 0;
}

/* Güçlü/kalın metin */
strong {
  font-weight: var(--font-weight-bold);
}

/* Küçük metin */
small {
  font-size: var(--font-size-small);
}

/* --- Link Stilleri --- */

/* Genel link stili — renk geçişi ile */
a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

/* Link hover durumu */
a:hover {
  color: var(--color-primary-hover);
}

/* Link focus durumu — erişilebilirlik için */
a:focus-visible {
  /* Belirgin outline çerçevesi */
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Bölüm Ayırıcı --- */
hr {
  border: none;
  /* İnce gri çizgi */
  border-top: 1px solid var(--color-gray-200);
  margin: var(--space-2xl) 0;
}

/* --- Seçim Rengi --- */

/* Kullanıcı metin seçtiğinde arka plan rengi */
::selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* --- Genel Yardımcı Sınıflar --- */

/* Metin hizalama sınıfları */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Metin renk sınıfları */
.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-gray-500); }
.text-white   { color: var(--color-white); }
.text-dark    { color: var(--color-gray-900); }

/* Font ağırlık sınıfları */
.font-bold    { font-weight: var(--font-weight-bold); }
.font-medium  { font-weight: var(--font-weight-medium); }
.font-light   { font-weight: var(--font-weight-light); }

/* Üst başlık etiketi — bölüm başlıklarının üzerinde */
.section-label {
  /* Büyük harf */
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  /* Harf aralığı */
  letter-spacing: 0.15em;
  color: var(--color-primary);
  /* Alt boşluk */
  margin-bottom: var(--space-sm);
  /* Blok eleman olarak davranır */
  display: block;
}

/* Bölüm açıklama metni — başlık altında kısa açıklama */
.section-description {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--color-gray-500);
  max-width: 600px;
  line-height: var(--line-height-loose);
}

/* Ortalanmış bölüm açıklaması */
.section-description.centered {
  margin-left: auto;
  margin-right: auto;
}

/* "İçeriğe geç" bağlantısı: yalnızca klavyeyle odaklanınca görünür (WCAG 2.4.1). */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: #fff;
  color: #111;
  box-shadow: 0 0 0 3px #111;
  font-weight: 600;
  border-radius: var(--radius-md, 8px);
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

/* Atlama hedefi programla odaklanır; görünür çerçeve gerekmez. */
main:focus {
  outline: none;
}

/* Klavye odağı her etkileşimli öğede belirgin olsun (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Koyu bölümde bölüm etiketi açık renkte (ana renk koyu zeminde okunmuyordu, ≈1.2:1). */
.section-dark .section-label {
  color: var(--color-gray-300);
}