/* Blog yazisi sayfalari.
   Site header/footer'i base + layout + components'ten gelir; burada
   yalnizca yazi govdesinin tipografisi ve dil degistirici tanimlanir.
   Onceden her yazinin kendi <style> blogu vardi (Madde 26). */

.blog-article {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-6, 2.5rem) var(--space-3, 1rem) var(--space-7, 3.5rem);
}

.blog-article .lang-switch {
  text-align: right;
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: var(--space-3, 1rem);
}

.blog-article .lang-switch a {
  margin: 0 0.25rem;
}

.blog-article .terug {
  display: inline-block;
  margin-bottom: var(--space-4, 1.5rem);
  font-size: 0.9375rem;
}

.blog-article h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: var(--space-3, 1rem);
}

.blog-article h2 {
  font-size: 1.375rem;
  margin-top: var(--space-6, 2.5rem);
  margin-bottom: var(--space-2, 0.75rem);
}

.blog-article p {
  line-height: 1.75;
  margin-bottom: var(--space-3, 1rem);
  color: var(--text);
}

.blog-article .meta {
  color: var(--muted);
  font-size: 0.9375rem;
  margin-bottom: var(--space-4, 1.5rem);
}

.blog-article hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6, 2.5rem) 0;
}

.blog-article ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: var(--space-3, 1rem);
}

.blog-article li {
  line-height: 1.75;
  margin-bottom: var(--space-1, 0.5rem);
}

/* "Ilgili Yazilar" kart izgarasi kullanan yazilar icin */
.blog-article .card-grid {
  margin-top: var(--space-4, 1.5rem);
}

@media (max-width: 640px) {
  .blog-article {
    padding-left: var(--space-3, 1rem);
    padding-right: var(--space-3, 1rem);
  }
}