/* ── blog: /blog, /en/blog ve yazılar (tools/build-blog.mjs üretir) ──
   doc.css'in okuma düzeni üstüne gelir. Yeni renk yok: token'lar ve
   doc.css'in zaten kullandığı #546C80. Uzun okuma için gövde metni
   --arduvaz (--ekran üstünde 6.96:1), küçük etiketler #546C80 (4.92:1);
   doc.css'in eyebrow rengi --soluk-metin --ekran üstünde 4.39'da kalıyor. */

/* üst çubuk: Tomurcuk / Blog ................ English */
.doc-nav .doc-crumb {
  font-weight: 600; font-size: 15px; letter-spacing: 0;
  color: var(--kisik);
}
.doc-nav .doc-crumb::before {
  content: '/'; margin-right: 8px;
  color: var(--pasif); font-weight: 400;
}
.doc-nav .doc-crumb:hover { color: var(--ink); }

.post .eyebrow, .blog-index .eyebrow { color: #546C80; }
.post-meta { font-size: 13.5px; color: #546C80; }

/* ── yazı ── */
.post { max-width: 68ch; }
.post h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.12;
  text-wrap: balance;
  margin-bottom: 14px;
}
.post > .post-meta { margin-bottom: 34px; }
.post p, .post li { font-size: 17px; line-height: 1.75; color: var(--arduvaz); }
/* yazının ilk paragrafı (eyebrow ve tarih satırı da <p>, onları atla) */
.post > .post-meta + p { font-size: 18.5px; color: var(--ink); }
.post h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.2;
  text-wrap: balance;
  margin: 46px 0 12px;
}
.post h3 { font-size: 18px; color: var(--ink); margin: 30px 0 8px; }
.post ul, .post ol { margin: 12px 0 16px; }
.post li { margin: 8px 0; padding-left: 4px; }
.post ol li::marker { color: var(--arduvaz-soluk); font-weight: 700; }
.post a {
  color: var(--ink);
  text-decoration-color: var(--arduvaz-soluk);
  text-underline-offset: 3px;
}
.post a:hover { text-decoration-color: var(--ink); }
.post strong { color: var(--ink); }

/* alıntı: kurucuların ve uygulamanın kendi cümleleri */
.post blockquote {
  margin: 24px 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--amber);
}
.post blockquote p { color: var(--ink); font-style: italic; }

/* bilgi satırları: "Etiket :: metin" → <dl class="facts"> ("Tomurcuk nedir?") */
.post .facts {
  margin: 28px 0 10px;
  border-top: 1px solid var(--kenar);
}
.post .facts > div {
  display: grid;
  grid-template-columns: minmax(130px, 28%) 1fr;
  gap: 4px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--kenar);
}
.post .facts dt { font-size: 16px; font-weight: 700; line-height: 1.65; color: var(--ink); }
.post .facts dd { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--arduvaz); }
@media (max-width: 560px) {
  .post .facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* karşılaştırma tablosu: doc.css'in tablosu, satır başlıkları sola yaslı */
.post .doc-table-wrap { margin: 22px 0 8px; }
.post table th[scope="row"] { font-size: 13.5px; white-space: nowrap; }
@media (max-width: 560px) {
  .post table th[scope="row"] { white-space: normal; }
}

/* yazı sonu: indirme kartı */
.post-cta {
  margin-top: 52px;
  padding: 26px 28px 28px;
  background: #fff;
  border-radius: var(--radius-kart);
  box-shadow: var(--golge-kart);
}
.post .post-cta p { font-size: 16.5px; color: var(--ink); margin-bottom: 18px; }
.post-cta-btn {
  position: relative;
  display: inline-flex; align-items: center;
  height: 54px; padding: 0 66px 0 26px;
  border-radius: 999px;
  background: var(--ink);
  font-size: 15.5px; font-weight: 600;
  box-shadow: var(--golge-buton);
}
.post .post-cta-btn { color: #fff; text-decoration: none; }
.post-cta-btn .btn-arrow {
  position: absolute; right: 6px;
  width: 42px; height: 42px; border-radius: 999px;
  background: var(--filiz);
  display: flex; align-items: center; justify-content: center;
}

/* başka yazılar */
.post-more { margin-top: 44px; }
.post .post-more h2 {
  font-family: var(--mono);
  font-size: 12px; font-weight: 600; letter-spacing: .125em;
  text-transform: uppercase;
  color: #546C80;
  margin: 0 0 12px;
}
.post-more ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.post .post-more li { margin: 0; padding: 0; }
.post .post-more a {
  display: block;
  padding: 16px 20px;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--golge-kart);
  font-size: 16px; font-weight: 700; line-height: 1.4;
  text-decoration: none;
}

/* ── liste: /blog ── */
.blog-index .lead { max-width: 56ch; color: var(--arduvaz); }
/* .doc ol'un 22px girintisini ezmek için .doc ile birlikte */
.doc .blog-list {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: grid; gap: 14px;
}
.doc .blog-card {
  position: relative;
  margin: 0;
  padding: 22px 24px;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--golge-kart);
}
.doc .blog-card h2 {
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.25;
  margin: 0 0 6px;
}
.blog-card h2 a { color: var(--ink); text-decoration: none; }
/* bütün kart tıklanır; bağlantının metni yine başlık */
.blog-card h2 a::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
}
.blog-card h2 a:focus-visible { outline: none; }
.blog-card:has(a:focus-visible) {
  outline: 3px solid var(--arduvaz);
  outline-offset: 3px;
}
.doc .blog-card p { font-size: 15.5px; color: var(--kisik); }
.doc .blog-card .post-meta { margin-top: 10px; font-size: 13px; color: #546C80; }

/* hareket yalnızca isteyene */
@media (prefers-reduced-motion: no-preference) {
  .post-cta-btn, .doc .blog-card, .post .post-more a {
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  }
  .post-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(46,74,99,.28); }
  .doc .blog-card:hover, .post .post-more a:hover {
    transform: translateY(-2px);
    box-shadow: var(--golge-yuzen);
  }
}

@media print {
  .post-cta, .post-more { display: none; }
}