/* ════════════════════════════════════════════════════════════════════════
   ProYA Engineering · blog.css  (Bilgi Bankası — liste + detay)
   ────────────────────────────────────────────────────────────────────────
   Anasayfayla aynı tasarım sistemi: tokens + base + components + index
   yüklendikten SONRA gelir. Yalnızca blog'a özgü bölümler (.blog-* liste,
   .post-* detay) burada. Nav / footer / cursor / button / link / sec-head
   components.css + index.css'ten gelir, bozulmaz.
   Tek sinyal --signal (#0A5096), hairline ayrımlar, gölge yok,
   köşe ≤ 6px (blueprint). Tektonik Editorial.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Sayfa üst boşluğu (sticky nav payı) ──────────────────────────────── */
.blog-page { padding-top: clamp(92px, 11vh, 124px); }

/* Skeleton `section{display:flex}` (@layer proya-default) bu bölümlerin
   .container'ını daraltıyor; unlayered blok düzene sabitle. */
.blog-hero,
.blog-feat-sec,
.blog-index,
.post-hero,
.post-cover-sec,
.post-body-sec,
.post-related,
.post-cta { display: block; }

/* ════════════════════════════════════════════════════════════════════════
   LİSTE — 01 · Hero künye
   ════════════════════════════════════════════════════════════════════════ */
.blog-hero { padding-block: clamp(36px, 5vw, 76px) clamp(40px, 5vw, 72px); }
.blog-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}
@media (min-width: 960px) {
  .blog-hero__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 72px; }
}
.blog-hero__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(44px, 6.2vw, 100px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
  margin: 18px 0 0;
  max-width: 17ch;
}
.blog-hero__title .serif-i { color: var(--signal); letter-spacing: 0; }
.blog-hero__lede { margin-top: clamp(20px, 2.4vw, 30px); max-width: 50ch; }

/* Künye HUD (iletişimle aynı dil) */
.blog-hero__coords { display: flex; flex-direction: column; border-top: var(--border-hair); }
.blog-hero__coords-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding-block: 13px;
  border-bottom: var(--border-hair);
}
.blog-hero__coords-row dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink-3);
}
.blog-hero__coords-row dd { font-family: var(--ff-display); font-size: 15px; color: var(--ink); margin: 0; }

/* ════════════════════════════════════════════════════════════════════════
   LİSTE — Öne çıkan yazı (featured)
   ════════════════════════════════════════════════════════════════════════ */
.blog-feat-sec { padding-block: 0 clamp(48px, 6vw, 88px); }
.blog-feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 52px);
  align-items: center;
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--ink);
}
@media (min-width: 900px) {
  .blog-feat { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 4vw, 72px); }
}
.blog-feat__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--bg-3);
  display: block;
}
.blog-feat__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  transition: transform var(--dur-900) var(--ease);
}
.blog-feat:hover .blog-feat__media img { transform: scale(1.07); }
.blog-feat__tag {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  background: var(--signal);
  color: var(--ink-on-signal);
  border-radius: var(--r-chip);
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
}
.blog-feat__body { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 22px); }
.blog-feat__hud {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink-3);
}
.blog-feat__hud .signal { color: var(--signal); }
.blog-feat__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--ink);
  text-wrap: balance;
}
.blog-feat__title a { color: inherit; transition: color var(--dur-300) var(--ease); }
.blog-feat__title a:hover { color: var(--signal-deep); }
.blog-feat__title .serif-i { letter-spacing: 0; color: var(--signal-deep); margin-inline: 0.04em; }
.blog-feat__excerpt { font-size: 17px; line-height: 1.62; color: var(--ink-2); max-width: 54ch; }
.blog-feat__cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-display);
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-top: 2px;
  width: fit-content;
}
.blog-feat__cta svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; transition: transform var(--dur-300) var(--ease); }
.blog-feat__cta:hover { color: var(--signal-deep); }
.blog-feat__cta:hover svg { transform: translateX(5px); }

/* ════════════════════════════════════════════════════════════════════════
   LİSTE — Filtre şeridi + kart grid
   ════════════════════════════════════════════════════════════════════════ */
.blog-index { padding-block: 0 var(--section-y); }

.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-bottom: 22px;
  margin-bottom: clamp(36px, 4vw, 56px);
  border-bottom: 1px solid var(--ink);
}
.blog-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-filter__btn {
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: transparent;
  transition: color var(--dur-300) var(--ease),
              border-color var(--dur-300) var(--ease),
              background-color var(--dur-300) var(--ease);
}
.blog-filter__btn:hover { border-color: var(--ink); color: var(--ink); }
.blog-filter__btn.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.blog-toolbar__count {
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.blog-toolbar__count b { color: var(--ink); font-weight: 500; }

.blog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 3.4vw, 52px) clamp(24px, 2.6vw, 40px);
}
@media (min-width: 620px)  { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  transition: border-top-color var(--dur-300) var(--ease);
}
.blog-card:hover { border-top-color: var(--ink); }
.blog-card[hidden] { display: none; }
.blog-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--bg-3);
  display: block;
  order: -1;
}
.blog-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform var(--dur-900) var(--ease), filter var(--dur-500) var(--ease);
}
.blog-card:hover .blog-card__media img { transform: scale(1.06); }
.blog-card__index {
  position: absolute;
  top: 10px; right: 12px;
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  color: var(--ink-bone);
  mix-blend-mode: difference;
}
.blog-card__hud {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink-3);
}
.blog-card__hud .cat { color: var(--signal); }
.blog-card__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}
.blog-card__title a { color: inherit; transition: color var(--dur-300) var(--ease); }
.blog-card:hover .blog-card__title a { color: var(--signal-deep); }
.blog-card__title .serif-i { letter-spacing: 0; color: var(--signal-deep); }
.blog-card__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.blog-card__foot {
  margin-top: auto;
  padding-top: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.blog-card__read {
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink-3);
}
.blog-card__arrow {
  width: 16px; height: 16px;
  stroke: var(--ink-3); stroke-width: 1.5; fill: none;
  transition: transform var(--dur-300) var(--ease), stroke var(--dur-300) var(--ease);
}
.blog-card:hover .blog-card__arrow { transform: translateX(5px); stroke: var(--signal-deep); }

/* Boş durum (filtre eşleşmezse) */
.blog-empty {
  display: none;
  padding: 48px 0;
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink-3);
}
.blog-empty.is-shown { display: block; }

/* Daha fazla */
.blog-more { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 72px); }
.blog-more[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   DETAY — Okuma ilerleme çubuğu (üst sabit)
   ════════════════════════════════════════════════════════════════════════ */
.post-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: calc(var(--z-nav) + 1);
  background: transparent;
  pointer-events: none;
}
.post-progress__fill {
  height: 100%; width: 0%;
  background: var(--signal);
  transform-origin: left;
  transition: width 80ms linear;
}

/* ════════════════════════════════════════════════════════════════════════
   DETAY — Başlık bloğu
   ════════════════════════════════════════════════════════════════════════ */
.post-hero { padding-block: clamp(28px, 3.4vw, 56px) clamp(28px, 3vw, 44px); }
.post-breadcrumb {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(22px, 3vw, 38px);
}
.post-breadcrumb a { color: var(--ink-3); transition: color var(--dur-300) var(--ease); }
.post-breadcrumb a:hover { color: var(--signal); }
.post-breadcrumb .sep { color: var(--line); }
.post-breadcrumb .current { color: var(--signal); }

.post-hero__cat {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--signal);
  display: inline-flex; align-items: center; gap: 10px;
}
.post-hero__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(38px, 5.4vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.034em;
  color: var(--ink);
  text-wrap: balance;
  margin: 18px 0 0;
  max-width: 18ch;
}
.post-hero__title .serif-i { color: var(--signal); letter-spacing: 0; margin-inline: 0.03em; }
.post-hero__lede {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  max-width: 60ch;
  margin-top: clamp(20px, 2.2vw, 30px);
}
.post-meta {
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  align-items: center;
  margin-top: clamp(24px, 2.8vw, 38px);
  padding-top: 20px;
  border-top: var(--border-hair);
}
.post-meta__item { display: flex; flex-direction: column; gap: 4px; }
.post-meta__item dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink-3);
}
.post-meta__item dd { font-family: var(--ff-display); font-size: 15px; color: var(--ink); margin: 0; }
.post-meta__sep { flex: 0 0 1px; align-self: stretch; background: var(--line); margin-block: 2px; }

/* ─── Kapak görseli ─────────────────────────────────────────────────────── */
.post-cover-sec { padding-block: 0 clamp(36px, 4vw, 64px); }
.post-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-3);
}
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-cover__caption {
  position: absolute;
  left: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: oklch(0.965 0.005 70 / 0.92);
  border: var(--border-hair);
  border-radius: var(--r-sm);
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink);
}
.post-cover__caption-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; }

/* ════════════════════════════════════════════════════════════════════════
   DETAY — Gövde: sticky rail + okuma kolonu
   ════════════════════════════════════════════════════════════════════════ */
.post-body-sec { padding-block: clamp(8px, 1.5vw, 24px) var(--section-y); }
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
}
@media (min-width: 1040px) {
  .post-layout { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: clamp(48px, 5vw, 88px); }
}

/* Sol rail — içindekiler + künye + paylaş */
.post-rail { display: none; }
@media (min-width: 1040px) {
  .post-rail { display: block; position: sticky; top: 108px; align-self: start; }
}
.post-rail__title {
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: var(--border-hair);
}
.post-toc { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.post-toc a {
  display: block;
  font-family: var(--ff-display);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--line-2);
  transition: color var(--dur-300) var(--ease), border-color var(--dur-300) var(--ease);
}
.post-toc a:hover { color: var(--ink); }
.post-toc a.is-active { color: var(--ink); border-left-color: var(--signal); }
.post-rail__share {
  margin-top: 28px;
  padding-top: 20px;
  border-top: var(--border-hair);
  display: flex; flex-direction: column; gap: 10px;
}
.post-rail__share span {
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink-3);
}
.post-rail__share a {
  font-family: var(--ff-display);
  font-size: 13.5px;
  color: var(--ink-2);
  transition: color var(--dur-300) var(--ease);
}
.post-rail__share a:hover { color: var(--signal); }

/* ─── Okuma kolonu (uzun-form tipografi) ───────────────────────────────── */
/* min-width: 0 → grid item'ın default min-content boyutlanmasını ez ki
   alt-bileşenlerdeki overflow-x:auto (.post-code) gerçekten çalışsın. */
.post-content { max-width: 68ch; min-width: 0; }
.post-content > * + * { margin-top: 1.45em; }
.post-content p {
  font-family: var(--ff-display);
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--ink);
  letter-spacing: -0.003em;
}
.post-content p.lead-para { font-size: 19px; line-height: 1.65; color: var(--ink); }
.post-content a:not(.btn) {
  color: var(--ink);
  background-image: linear-gradient(to right, var(--signal), var(--signal));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  text-decoration: none;
  transition: color var(--dur-300) var(--ease);
}
.post-content a:not(.btn):hover { color: var(--signal-deep); }

.post-content h2 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-top: 2.2em;
  scroll-margin-top: 104px;
  display: flex; align-items: baseline; gap: 14px;
}
.post-content h2 .num {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--signal);
  flex: none;
}
.post-content h2 .serif-i { letter-spacing: 0; color: var(--signal-deep); }
.post-content h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-top: 1.8em;
}

.post-content ul, .post-content ol { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.post-content li {
  position: relative;
  padding-left: 28px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
}
.post-content ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.7em;
  width: 7px; height: 7px;
  background: var(--signal);
  border-radius: var(--r-chip);
}
.post-content ol { counter-reset: post-li; }
.post-content ol li { counter-increment: post-li; }
.post-content ol li::before {
  content: counter(post-li, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.15em;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--signal);
}

/* Pull-quote */
.post-quote {
  margin-block: 2em;
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.post-quote p {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.28;
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
}
.post-quote cite {
  display: block;
  margin-top: 16px;
  font-family: var(--ff-mono);
  font-style: normal;
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Teknik / spec kutu */
.post-spec {
  margin-block: 2em;
  border: var(--border-hair);
  border-left: 3px solid var(--signal);
  border-radius: var(--r-md);
  background: var(--bg-2);
  padding: clamp(20px, 2.4vw, 30px);
}
.post-spec__label {
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 14px;
}
.post-spec dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.post-spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px;
  padding-block: 11px;
  border-bottom: var(--border-hair);
  align-items: baseline;
}
.post-spec__row:last-child { border-bottom: 0; padding-bottom: 0; }
.post-spec__row dt { font-family: var(--ff-display); font-size: 14.5px; color: var(--ink-2); }
.post-spec__row dd {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: right;
}

/* Kod / formül bloğu — uzun yorum satırları kutu içinde yatay scroll,
   sayfayı taşırmaz. Parent grid item'da min-width:0 + burada
   max-width:100% gerekli; aksi halde white-space:pre genişliği parent'a
   sızdırır ve body{overflow-x:hidden} satırları KESER (scrollla görme şansı vermez). */
.post-code {
  margin-block: 2em;
  font-family: var(--ff-mono);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-bone);
  background: var(--bg-deep);
  border-radius: var(--r-md);
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 28px);
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* pre-wrap → uzun yorum satırları kutu içinde yumuşak sarar
     (mühendislik formülleri zaten tek satır kalır). */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}
.post-code .c { color: var(--ink-3); }     /* yorum */
.post-code .k { color: oklch(0.72 0.11 253); } /* anahtar */

/* Figür + caption */
.post-figure { margin-block: 2.2em; }
.post-figure img {
  width: 100%;
  border-radius: var(--r-md);
  background: var(--bg-3);
  display: block;
}
.post-figure figcaption {
  display: flex; gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: var(--border-hair);
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink-3);
}
.post-figure figcaption .idx { color: var(--signal); flex: none; }

/* İmza / yazar kapanışı */
.post-sign {
  margin-top: 2.4em;
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: var(--border-hair);
  display: flex; align-items: center; gap: 16px;
}
.post-sign__badge {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.post-sign__meta { display: flex; flex-direction: column; gap: 3px; }
.post-sign__name { font-family: var(--ff-display); font-weight: 500; font-size: 15px; color: var(--ink); }
.post-sign__role {
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Etiketler */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.8em; }
.post-tags__item {
  font-family: var(--ff-mono);
  font-size: var(--fs-hud);
  letter-spacing: var(--tracking-hud);
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 6px 11px;
  border: var(--border-hair);
  border-radius: var(--r-chip);
}

/* ════════════════════════════════════════════════════════════════════════
   DETAY — İlgili yazılar
   ════════════════════════════════════════════════════════════════════════ */
.post-related { background: var(--bg-2); padding-block: var(--section-y); }
.post-related__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 3vw, 44px) clamp(24px, 2.6vw, 40px);
  margin-top: clamp(36px, 4vw, 56px);
}
@media (min-width: 760px) { .post-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ════════════════════════════════════════════════════════════════════════
   DETAY — Kapanış CTA (koyu)
   ════════════════════════════════════════════════════════════════════════ */
.post-cta {
  background: var(--bg-deep);
  color: var(--ink-bone);
  padding-block: clamp(72px, 9vw, 128px);
}
.post-cta__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 44px); align-items: end; }
@media (min-width: 880px) { .post-cta__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; } }
.post-cta__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink-bone);
  text-wrap: balance;
  max-width: 18ch;
}
.post-cta__title .serif-i { color: oklch(0.78 0.10 253); letter-spacing: 0; }
.post-cta__lede { font-size: 16px; line-height: 1.6; color: oklch(0.78 0.010 65); max-width: 44ch; margin-bottom: 24px; }
.post-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ─── Reveal yardımcıları (blog.js IntersectionObserver) ───────────────── */
.blog-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-900) var(--ease), transform var(--dur-900) var(--ease); }
.blog-reveal.is-in, .blog-reveal.is-in-view { opacity: 1; transform: none; }
.blog-reveal--d1 { transition-delay: 80ms; }
.blog-reveal--d2 { transition-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
  .blog-reveal { opacity: 1; transform: none; }
  .post-progress { display: none; }
}