/*
 * BLOG SAYFALARI - sitenin geri kalanıyla AYNI görünüm, bağımsız belge olarak.
 *
 * ─── Neden `public/` ve neden hash'siz ─────────────────────────────────────
 * Bu dosyayı Vite İŞLEMİYOR: `public/` içeriği `dist`e olduğu gibi kopyalanır,
 * adı değişmez. Blog sayfalarını API üretiyor ve build'in varlık tablosunu
 * okumuyor; hash'li bir ada bağlansaydı ilk dağıtımdan sonra o ad değişir ve
 * blog sayfaları SESSİZCE stilsiz kalırdı.
 *
 * ─── Neden Tailwind değil ──────────────────────────────────────────────────
 * Tailwind sınıfları uygulamanın build'inde üretiliyor; API'nin ürettiği HTML
 * o taramaya GİRMİYOR, dolayısıyla kullanılan sınıflar çıktıya hiç yazılmazdı.
 *
 * ─── Token'lar `index.css` ile AYNI değerler ───────────────────────────────
 * Kopya olmaları bilinçli ve kaçınılmaz (iki ayrı belge, ortak CSS yok). Değer
 * değişirse ikisi birden güncellenmeli; bu yüzden aşağıda kaynak belirtildi.
 *
 * Mantıksal özellikler kullanılıyor (`margin-inline`, `padding-inline-start`),
 * böylece Arapça ve Farsça sayfalar ayrı kural gerektirmiyor.
 */

:root {
  /*
   * DEGERLER apps/landing/src/index.css :root ile BIREBIR.
   *
   * Kopya olmalari kacinilmaz (iki ayri belge, ortak CSS yok) ama "yaklasik
   * ayni" olmalari kacinilmaz DEGIL. Bir surumde ikincil metin rengi burada
   * #475569, sitede #64748b idi; kap 1152px'ti, sitede 1200px. Tek tek kucuk
   * farklar, birlikte "blog bir tuhaf duruyor" diye gorunuyor.
   */
  --bg-ink: #0f172a;          /* index.css --ink */
  --bg-ink-soft: #64748b;     /* index.css --ink-soft */
  --bg-ink-faint: #94a3b8;    /* index.css --ink-faint */
  --bg-yuzey: #ffffff;
  --bg-yumusak: #f8fafc;      /* index.css --bg */
  --bg-mist: #f1f5f9;         /* index.css --bg-soft */
  --bg-cizgi: #e2e8f0;        /* index.css --border */
  --bg-cizgi-koyu: #cbd5e1;   /* index.css --border-strong */
  --bg-vurgu: #0ea5e9;        /* index.css --primary */
  --bg-vurgu-ink: #0284c7;    /* index.css --primary-ink */
  --bg-vurgu-koyu: #0369a1;   /* index.css --primary-deep */
  --bg-en: 1200px;            /* index.css --maxw */
  --bg-radius: 5px;
  --bg-radius-lg: 9px;

  /*
   * Font yiginlari da index.css ile ayni. Dosyalari blog-fonts.css yukluyor
   * (scripts/sync-blog-fonts.mjs uretiyor); o dosya olmadan bu adlar bosa
   * duser ve sayfa sistem fontuna iner - blogun "tuhaf" gorunmesinin asil
   * sebebi buydu.
   */
  --bg-font-body: "Figtree", system-ui, -apple-system, sans-serif;
  --bg-font-display: "Caveat", "Segoe UI", system-ui, cursive;
  --bg-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

/*
 * ARAP HARFLI DILLER - index.css'teki ile ayni iki aile.
 * Naskh gelenegi ile Iran tipografisi ayni sey degil; site de ayiriyor.
 */
[lang="ar"] {
  --bg-font-body: "Noto Naskh Arabic", "Figtree", system-ui, sans-serif;
  --bg-font-display: "Noto Naskh Arabic", "Segoe UI", system-ui, sans-serif;
}
[lang="fa"] {
  --bg-font-body: "Vazirmatn Variable", "Figtree", system-ui, sans-serif;
  --bg-font-display: "Vazirmatn Variable", "Segoe UI", system-ui, sans-serif;
}

/*
 * KOYU TEMA YOK - bilerek.
 *
 * Burada bir prefers-color-scheme: dark blogu vardi. Sitenin geri kalaninda
 * koyu tema YOK: isletim sistemi koyuysa blog koyu, diger butun sayfalar
 * acik ciziliyordu. Tek basina dogru gorunen bir ozellik, butun icinde kusur.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-yumusak);
  color: var(--bg-ink);
  font-family: var(--bg-font-body);
  /* index.css: govde 16px/1.6; uzun metin ayrica .og-prose ile 16.5px/1.75. */
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/*
 * Arap yazisi ARTIK sistem fontuna dusmuyor: blog-fonts.css Noto Naskh
 * Arabic ve Vazirmatn'i de tasiyor. unicode-range sayesinde Turkce ya da
 * Ingilizce bir sayfa o dosyalari HIC indirmiyor, yani bedel yalnizca
 * ar/fa sayfasinda odeniyor. Aile secimi yukarida [lang] kurallarinda.
 */

a { color: var(--bg-vurgu-ink); text-underline-offset: 3px; }
a:hover { color: var(--bg-vurgu-koyu); }

/* Odak halkası - uygulamanın `index.css` kuralı buraya UĞRAMIYOR. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bg-vurgu);
  outline-offset: 2px;
  border-radius: 3px;
}

/*
 * TEK KAP - blog dizini de yazı da site kabıyla (72rem) aynı genişlikte.
 *
 * Önce ikisi de okuma genişliğindeydi (46rem) ve sayfa, tam ekranda iki yanı
 * boş ince bir şerit gibi duruyordu; sitenin geri kalanıyla aynı hizada
 * DEĞİLDİ. Kart listesi de o genişlikte ancak iki sütun alıyordu.
 *
 * Metin satırı kabın tamamına yayılmıyor: `.og-prose` kendi okuma genişliğini
 * koruyor (aşağıda). Kap geniş, satır okunur.
 */
/* Yatay dolgu index.css `.wrap` ile ayni: 24px. Blogda 20px'ti ve sayfalar
   arasi geciste icerik bir tik kayiyordu. */
.bg-kap { max-width: var(--bg-en); margin-inline: auto; padding-inline: 24px; }

/* ══ Üst çubuk - sitenin header'ının statik karşılığı ══════════════════════ */

.bg-ust {
  position: sticky;
  top: 0;
  z-index: 40;
  border-block-end: 1px solid var(--bg-cizgi);
  background: var(--bg-yuzey);
}
.bg-ust-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 74px;
  padding-inline: 1rem;
}
@media (min-width: 640px) { .bg-ust-ic { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .bg-ust-ic { padding-inline: 2rem; } }

/* Marka her dilde LTR: Arapçada sağdan sola dizilirse "glass.opti" okunur. */
/*
 * OLCULER components/Nav.tsx ile BIREBIR: ikon h-10 w-10 (40px), aradaki
 * bosluk gap-2.5 (10px), "opti." 26px/800, "glass" 38px Caveat 700.
 * Blogda 32/24/34 yaziliydi; iki basligi yan yana koyunca fark goruluyordu.
 */
.bg-marka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  direction: ltr;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.bg-marka-ikon { width: 40px; height: 40px; display: block; }
.bg-marka-yazi { display: inline-flex; align-items: baseline; line-height: 1; }
.bg-marka-opti { font-family: var(--bg-font-body); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; color: var(--bg-ink); }
/* "glass" HER dilde Caveat: marka adi cevrilmiyor, ailesi de degismiyor. */
.bg-marka-glass { font-family: "Caveat", "Segoe UI", system-ui, cursive; font-weight: 700; font-size: 38px; color: var(--bg-vurgu); }

/* == Dil secici - betiksiz <details>, gorunumu LanguageMenu.tsx ile ayni == */

/*
 * Sitedeki secici bir React bileseni ve .btn .btn-sm .btn-ghost siniflarini
 * kullaniyor. Blogda o siniflar yok; bu yuzden AYNI OLCULER burada elle
 * yaziliyor: 40px yukseklik, 0 15px dolgu, 14px metin, 8px bosluk.
 * Once 38px yukseklik ve bir "chevron" karakteri kullaniliyordu - yanindaki
 * dugmelerle ayni hizaya gelmiyordu.
 */
.bg-dil { position: relative; display: none; }
@media (min-width: 640px) { .bg-dil { display: block; } }
.bg-dil > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 15px;
  border: 1px solid var(--bg-cizgi-koyu);
  border-radius: var(--bg-radius);
  font-family: var(--bg-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--bg-ink);
  background: var(--bg-yuzey);
  white-space: nowrap;
}
.bg-dil > summary::-webkit-details-marker { display: none; }
.bg-dil > summary:hover { border-color: var(--bg-vurgu); color: var(--bg-vurgu-ink); }
.bg-dil[open] > summary { border-color: var(--bg-vurgu); color: var(--bg-vurgu-ink); }
/* Ikonlar satir ici SVG: blog sayfasi ikon kutuphanesi yukleyemez. */
.bg-dil svg { width: 16px; height: 16px; flex-shrink: 0; }
.bg-dil .bg-dil-ok { width: 14px; height: 14px; opacity: 0.6; }
.bg-dil-liste {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 50;
  width: 12rem;
  max-height: 70vh;
  overflow: auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--bg-yuzey);
  border: 1px solid var(--bg-cizgi);
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.bg-dil-liste a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--bg-ink);
  text-decoration: none;
}
.bg-dil-liste a > span { flex: 1; text-align: start; }
.bg-dil-liste a:hover { background: var(--bg-mist); }
/* Secili dil: sitede oldugu gibi bir onay isareti, kalin yazi degil. */
.bg-dil-liste a[aria-current="true"] svg { color: var(--bg-vurgu); }
.bg-nav { display: none; gap: 4px; }
@media (min-width: 1024px) { .bg-nav { display: flex; flex: 1; justify-content: center; } }
/* Nav.tsx: px-3 py-2, 15px, rounded-md, hover'da yumusak zemin. */
.bg-nav a {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 15px;
  color: var(--bg-ink-soft);
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}
.bg-nav a:hover { background: var(--bg-mist); color: var(--bg-ink); }

.bg-eylem { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/*
 * index.css .btn + .btn-sm ile ayni: 40px yukseklik, 0 15px dolgu, 14px
 * metin, 8px ikon boslugu, 1px seffaf kenar. Blogda 0.45rem/0.9rem dolgu
 * ve 14.5px metin vardi - dugmeler siteninkinden bir tik buyuktu.
 */
.bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: var(--bg-radius);
  font-family: var(--bg-font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.bg-btn-primary { background: var(--bg-vurgu); color: #fff; }
.bg-btn-primary:hover { background: var(--bg-vurgu-ink); color: #fff; }
/*
 * Giris dugmesi dar ekranda dusuyor - Nav.tsx'te de oyle
 * (hidden sm:inline-flex). Bu yuzden gorunum kurali display ile birlikte.
 */
.bg-btn-ghost { display: none; border-color: var(--bg-cizgi-koyu); background: var(--bg-yuzey); color: var(--bg-ink); }
@media (min-width: 640px) { .bg-btn-ghost { display: inline-flex; } }
.bg-btn-ghost:hover { border-color: var(--bg-vurgu); color: var(--bg-vurgu-ink); }
/*
 * KIRINTI YOLU - `components/page/BreadcrumbBar.tsx` + `Breadcrumbs.tsx`
 * ile BİREBİR. Altı ayrı yerde sapmıştı ve tek tek küçük olan bu farklar,
 * sayfa değiştirince birlikte görülüyordu:
 *
 *   şerit zemini  #f8fafc → #f1f5f9 (index.css --bg-soft)
 *   öğe boşluğu   0.4rem  → 6px     (gap-1.5)
 *   ayırıcı       CSS karesi 6.4px  → lucide chevron 14px
 *   son öğe       --ink-faint       → --ink-soft
 *   bağlantı hover altı çizili      → yalnız renk
 *   son öğe kırpma ellipsis         → yok (uzunluk `kirintiKirp` ile sınırlı)
 */
.bg-kirinti-serit { border-block-end: 1px solid var(--bg-cizgi); background: var(--bg-mist); }
.bg-kirinti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-block: 12px;
  font-size: 13px;
  color: var(--bg-ink-faint);
}
.bg-kirinti a { color: inherit; text-decoration: none; }
.bg-kirinti a:hover { color: var(--bg-ink); }
/* Bulunulan sayfa: bağlantılardan bir ton koyu - sitede de öyle. */
.bg-kirinti span[aria-current="page"] { color: var(--bg-ink-soft); }

/*
 * Ayırıcı lucide `ChevronLeft`, sitedeki gibi 180 derece döndürülmüş.
 * Metin karakteri (">") kullanılmıyor: RTL'de yönünü kaybediyor ve ekran
 * okuyucu onu "büyüktür" diye okuyor. RTL'de dönüş sıfırlanıyor, yani ok
 * yol hangi yöne ilerliyorsa oraya bakıyor.
 */
.bg-ayrac {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transform: rotate(180deg);
}
[dir="rtl"] .bg-ayrac { transform: none; }

/* ══ Sayfa başlığı ═════════════════════════════════════════════════════════ */

.bg-hero {
  border-block-end: 1px solid var(--bg-cizgi);
  background: var(--bg-yumusak);
  padding-block: 2.75rem 2.5rem;
}
.bg-hero h1 {
  margin: 0.35rem 0 0;
  font-size: clamp(27px, 4.4vw, 40px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--bg-ink);
}
.bg-hero-ozet { margin: 0.9rem 0 0; max-width: 62ch; font-size: 17.5px; color: var(--bg-ink-soft); }
.bg-ustveri { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; font-size: 13.5px; color: var(--bg-ink-faint); }

/* ══ Kart listesi ══════════════════════════════════════════════════════════
   GÖRSEL YOK, bilinçli: uydurma stok fotoğrafı cam atölyesini anlatmıyor ve
   her kart için 100 kB indirtirdi. Kartın taşıdığı şey metin.                */

.bg-liste-kap { padding-block: 2.5rem 1rem; }
.bg-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
/* Dar ekranda tek, tablette iki, masaüstünde ÜÇ sütun. */
@media (min-width: 700px) { .bg-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .bg-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bg-kart { display: flex; }
/*
  Tıklanabilir alan kartın TAMAMI: tek bir başlık bağlantısı farede hedefi
  gereksiz küçültüyordu. Bağlantı blok seviyesinde, kart onun kabı.
*/
.bg-kart-bag {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  padding: 1.4rem;
  border: 1px solid var(--bg-cizgi);
  border-radius: var(--bg-radius-lg);
  background: var(--bg-yuzey);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.bg-kart-bag:hover {
  border-color: var(--bg-cizgi-koyu);
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.07);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .bg-kart-bag { transition: none; }
  .bg-kart-bag:hover { transform: none; }
}
.bg-kart-baslik {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--bg-ink);
}
.bg-kart-bag:hover .bg-kart-baslik { color: var(--bg-vurgu-ink); }
.bg-kart-ozet { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--bg-ink-soft); }
.bg-kart-devam { margin-block-start: auto; padding-block-start: 0.35rem; font-size: 14px; font-weight: 600; color: var(--bg-vurgu-ink); }
/* Ok RTL'de ters yöne baksın - ikon yok, karakter CSS'ten geliyor. */
.bg-kart-devam::after { content: " →"; }
[dir="rtl"] .bg-kart-devam::after { content: " ←"; }

.bg-bos { padding: 2rem 0; color: var(--bg-ink-faint); }

/* ══ Yazı gövdesi ══════════════════════════════════════════════════════════ */

.bg-yazi { padding-block: 2.5rem 1rem; }
/*
 * Okuma genişliği kabın DEĞİL metnin sınırı. Kap 72rem; satır 72rem olsaydı
 * yaklaşık 115 karakter olurdu ve göz satır sonundan başına dönerken yerini
 * kaybederdi. Metin kabın içinde kendi genişliğinde duruyor.
 */
.bg-yazi .og-prose, .bg-yazi .bg-ustveri, .bg-yazi .bg-geri { max-width: 56rem; }

/*
 * AKIŞ BOŞLUĞU - iki kural, AYNI özgüllükte (0,1,0) ve sırayla.
 *
 * Önce "her öğe sıfır, komşusu boşluklu" değil de `.og-prose p { margin: 0 }`
 * yazılmıştı; o seçici (0,1,1) baykuş kuralından (0,1,0) YÜKSEK olduğu için
 * paragraf boşluğunu eziyordu ve 500 kelimelik yazı tek blok hâlinde akıyordu.
 * Element adı yazmamak bunu yapısal olarak imkânsız kılıyor.
 */
/* index.css .og-prose: 16.5px/1.75, ikincil murekkep, 1.1em akis boslugu. */
.og-prose { color: var(--bg-ink-soft); font-size: 16.5px; line-height: 1.75; }
.og-prose > * { margin-block: 0; }
.og-prose > * + * { margin-block-start: 1.1em; }
/* Başlıklar GÖVDE ailesinde: uzun metinde okuyucu aradığı bölümü gözle
   tarayarak buluyor ve dekoratif bir yazı tipi o taramayı yavaşlatıyor. */
.og-prose h2 { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--bg-ink); margin-top: 2.2em; }
.og-prose h3 { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--bg-ink); margin-top: 1.8em; }
.og-prose h2 + *, .og-prose h3 + * { margin-top: 0.7em; }
.og-prose strong { color: var(--bg-ink); font-weight: 600; }
.og-prose ul, .og-prose ol { padding-inline-start: 1.3em; }
.og-prose ul { list-style: disc; }
.og-prose ol { list-style: decimal; }
.og-prose li + li { margin-top: 0.45em; }
.og-prose code {
  font-family: var(--bg-font-mono);
  font-size: 0.9em;
  background: var(--bg-mist);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
.og-prose blockquote {
  border-inline-start: 3px solid var(--bg-vurgu);
  padding-inline-start: 1em;
  margin-inline: 0;
  color: var(--bg-ink);
}
.og-prose hr { border: 0; border-top: 1px solid var(--bg-cizgi); margin-block: 2.4em; }
.og-prose img { max-width: 100%; height: auto; border-radius: var(--bg-radius-lg); }
/* Uzun kod/tablo yatay taşarsa SAYFA değil kendi kabı kaysın. */
.og-prose pre, .og-prose table { overflow-x: auto; display: block; max-width: 100%; }

.bg-geri { margin-block-start: 2.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--bg-cizgi); font-size: 15px; }
.bg-geri a { font-weight: 600; text-decoration: none; }
.bg-geri a::before { content: "← "; }
[dir="rtl"] .bg-geri a::before { content: "→ "; }

/* ══ Alt çubuk - sitenin footer'ının statik karşılığı ══════════════════════ */

.bg-alt { margin-block-start: 4rem; border-block-start: 1px solid var(--bg-cizgi); background: var(--bg-yumusak); }
.bg-alt-ic {
  display: grid;
  gap: 2rem;
  max-width: var(--bg-en);
  margin-inline: auto;
  padding: 3.5rem 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .bg-alt-ic { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bg-f-marka { grid-column: span 2; }
@media (min-width: 768px) { .bg-f-marka { grid-column: span 1; } }
.bg-f-marka p { margin: 0.75rem 0 0; max-width: 24rem; font-size: 14.5px; color: var(--bg-ink-soft); }
.bg-f-baslik { margin: 0; font-size: 14px; font-weight: 600; color: var(--bg-ink); }
.bg-alt-ic ul { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.bg-alt-ic ul a { font-size: 14px; color: var(--bg-ink-soft); text-decoration: none; }
.bg-alt-ic ul a:hover { color: var(--bg-ink); }

.bg-alt-serit {
  border-block-start: 1px solid var(--bg-cizgi);
}
.bg-alt-serit {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  max-width: var(--bg-en);
  margin-inline: auto;
  padding: 1.25rem;
  font-size: 14px;
  color: var(--bg-ink-faint);
}