/* enisakarsu.com — blog (/blog, /blog/<slug>)
   site.css'in token'ları ve bileşenleri (course-hero, course-body, course-aside, course-card) üzerine kurulur;
   burada yalnızca yazı tipografisi ve blog'a özgü parçalar var. */

/* ---------------------------------------------------------------- liste */

.blog-hero {
  position: relative;
  overflow: hidden;
  background: var(--orange-soft);
  padding-block: 6.6rem 2.8rem;
}
.blog-hero .shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 3rem; align-items: center; }
.blog-hero .shell:not(:has(.bh-stack)) { grid-template-columns: minmax(0, 1fr); }
.blog-hero h1 { margin: 0; font-size: clamp(3.2rem, 2rem + 4.4vw, 5.6rem); line-height: 0.95; letter-spacing: -0.04em; font-weight: 800; }
/* Kategori süzülünce başlık kategori adına döner ("Haftanın AI Skill'leri"); uzun olduğu için küçülür */
.blog-hero h1.is-kategori { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.blog-hero .lede { margin: 1.1rem 0 0; color: var(--ink-body); font-size: 1.15rem; line-height: 1.5; max-width: 36ch; }

.bh-by { display: flex; align-items: center; gap: 0.7rem; margin: 1.5rem 0 0; color: var(--ink-body); font-size: 0.93rem; }
.bh-by img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--cream-deep); flex: none; }
.bh-by b { color: var(--ink); }

.blog-filters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.7rem; }
.blog-filters a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.blog-filters a:hover { background: var(--ink); color: #fff; }
.blog-filters a[aria-current='page'] { background: var(--ink); color: #fff; font-weight: 700; }

/* Kapak destesi: data-p sırayı tutar (0 üstte). Sırayı build.mjs'teki desteScript döndürür. */
.bh-stack { position: relative; aspect-ratio: 1200 / 760; }
.bh-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 84%;
  border: 1px solid var(--rule);
  background: var(--cream);
  box-shadow: 0 34px 50px -30px rgba(24, 21, 17, 0.5);
  transition: transform 0.8s var(--ease-out);
}
.bh-card img { display: block; width: 100%; height: auto; }
.bh-card[data-p='0'] { transform: rotate(-2.5deg); z-index: 3; }
.bh-card[data-p='1'] { transform: translate(9%, 8%) rotate(2.5deg); z-index: 2; }
.bh-card[data-p='2'] { transform: translate(18%, 17%) rotate(6deg); z-index: 1; }
.bh-card.is-out { transform: translate(34%, -7%) rotate(9deg); transition-duration: 0.42s; transition-timing-function: var(--ease-io); }
.bh-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) {
  .bh-stack:hover .bh-card[data-p='0'] { transform: translate(-2%, -3%) rotate(-3.5deg); }
  .bh-stack:hover .bh-card[data-p='2'] { transform: translate(21%, 20%) rotate(7.5deg); }
}

@media (max-width: 900px) {
  .blog-hero .shell { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: 2rem; }
}
@media (max-width: 700px) {
  .blog-hero { padding-block: 6rem 2.4rem; }
  .blog-hero .shell { grid-template-columns: minmax(0, 1fr); }
  .bh-stack { max-width: 460px; }
  .bh-card { width: 82%; }
}

.blog-list { padding-block: clamp(1.8rem, 3vw, 2.6rem) clamp(3rem, 6vw, 5.5rem); }
.blog-empty {
  border: 1px dashed var(--rule);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  color: var(--ink-muted);
}
.blog-empty b { display: block; color: var(--ink); font-size: 1.1rem; margin-bottom: 0.4rem; }

/* Kart kapağı: görsel ya da kategoriye göre tipografik kapak */
.post-cover { aspect-ratio: 1200 / 630; place-items: stretch; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.post-card:hover .post-cover img { transform: scale(1.03); }
.post-ph {
  display: grid;
  place-items: end start;
  width: 100%;
  height: 100%;
  padding: 1.1rem 1.25rem;
  background: var(--dark);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}
.post-ph::after {
  content: '';
  position: absolute;
  right: -18%;
  top: -40%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--orange) 60%, transparent), transparent 68%);
}
.post-ph span {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 12ch;
}
.post-ph--yapay-zeka-gundemi { background: var(--dark-sub); }
.post-ph--promptlar, .post-ph--rehber { background: var(--cream-deep); color: var(--ink); }
.post-ph--promptlar::after { background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--orange) 45%, transparent), transparent 68%); }

/* ---------------------------------------------------------------- yazı */

/* Dar, açık başlık alanı (koyu hero ve turuncu hale yok): geri linki, küçük başlık, künye satırı */
.post-hero {
  background: var(--cream);
  padding-block: clamp(5.4rem, 4.6rem + 3vw, 6.6rem) 1.3rem;
  border-bottom: 1px solid var(--rule);
}
.post-hero .crumb { color: var(--ink-muted); margin-bottom: 0.7rem; }
.post-hero .crumb:hover { color: var(--ink); }
.post-hero h1 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0.55rem;
  text-wrap: balance;
}
.post-hero + .course-body { padding-top: clamp(1.6rem, 3vw, 2.4rem); }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  color: var(--ink-muted);
  font-size: var(--fs-small);
}
.post-meta a { color: var(--orange-ink); text-decoration: none; font-weight: 700; }
.post-meta a:hover { text-decoration: underline; }
.post-meta .sep { opacity: 0.5; }

.post-cover-figure {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--rule);
  background: var(--cream-deep);
}
.post-cover-figure img { display: block; width: 100%; height: auto; }

/* Yazı gövdesi tipografisi */
.yazi-icerik {
  color: var(--ink-body);
  font-size: 1.075rem;
  line-height: 1.75;
  /* Gövde kapakla aynı genişlikte: sütunun tamamını kullanır (Enis'in kararı, 2026-10-12) */
  max-width: none;
}
.yazi-icerik > * + * { margin-top: 1.15em; }
.yazi-icerik h2 {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  line-height: 1.2;
  margin-top: 2.2em;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--ink);
  scroll-margin-top: 110px;
}
.yazi-icerik h3 { font-size: 1.22rem; line-height: 1.3; margin-top: 1.8em; }
.yazi-icerik h4 { font-size: 1.05rem; margin-top: 1.5em; }
.yazi-icerik h2 + *, .yazi-icerik h3 + *, .yazi-icerik h4 + * { margin-top: 0.7em; }
.yazi-icerik a { color: var(--orange-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.yazi-icerik a:hover { text-decoration-thickness: 2px; }
.yazi-icerik strong { color: var(--ink); }
.yazi-icerik ul, .yazi-icerik ol { padding-left: 1.3rem; }
.yazi-icerik li + li { margin-top: 0.45em; }
.yazi-icerik li::marker { color: var(--orange-ink); }
.yazi-icerik blockquote {
  margin-inline: 0;
  padding: 0.9rem 1.2rem;
  border-left: 3px solid var(--orange);
  background: var(--cream-sub);
  color: var(--ink);
}
.yazi-icerik code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--cream-deep);
  padding: 0.12em 0.38em;
  border-radius: 3px;
}
/* Prompt ve komut kutuları (functions/_lib/blog.js → kodBlogu): pencere görünümü, sağ üstte Kopyala.
   Türler: .kod--terminal (komut), .kod--prompt (yapıştırılacak metin, .md indirilebilir), .kod--kod (diğer) */
.kod {
  position: relative;
  background: var(--dark);
  color: var(--on-dark);
  border: 1px solid #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 40px -26px rgba(24, 21, 17, 0.55);
}
.kod-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.35rem 0.45rem 0.35rem 0.9rem;
  background: var(--dark-sub);
  border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent);
}
.kod-nokta { display: inline-flex; gap: 6px; flex: none; }
.kod-nokta i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.kod-nokta i:nth-child(2) { background: #FEBC2E; }
.kod-nokta i:nth-child(3) { background: #28C840; }
.kod-baslik {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--on-dark-mut);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.kod--prompt .kod-baslik::before { content: '›_ '; color: var(--orange); }
.kod-eylem { display: inline-flex; gap: 0.4rem; flex: none; }
.kod-btn {
  min-height: 32px;
  padding: 0 0.75rem;
  border: 1px solid color-mix(in srgb, var(--on-dark) 26%, transparent);
  border-radius: 6px;
  background: transparent;
  color: var(--on-dark-mut);
  font: inherit;
  font-size: var(--fs-micro);
  font-weight: 700;
  cursor: pointer;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.kod-btn:hover { color: var(--on-dark); border-color: var(--on-dark); }
.kod-btn--ana { background: var(--orange); border-color: var(--orange); color: #fff; }
.kod-btn--ana:hover { background: #ff8a3d; border-color: #ff8a3d; color: #fff; }
.kod-btn.is-ok { background: #28C840; border-color: #28C840; color: #08210f; }
.kod-btn:focus-visible, .kod-ac:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.kod-govde { position: relative; }
.yazi-icerik .kod pre {
  margin: 0;
  padding: 1rem 1.1rem 1.1rem;
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre;
}
.yazi-icerik .kod--prompt pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.yazi-icerik .kod pre code { background: none; padding: 0; color: inherit; font-size: inherit; border-radius: 0; }
.kod--terminal pre code::before { content: '$ '; color: var(--orange); user-select: none; }
/* Kapalı uzun prompt: ilk satırlar görünür, alt kısım soluklaşır */
.kod.is-kapali .kod-govde { max-height: 12.5rem; overflow: hidden; }
.kod.is-kapali .kod-govde::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 5.5rem;
  background: linear-gradient(to bottom, transparent, var(--dark) 88%);
  pointer-events: none;
}
.kod-ac {
  display: block;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 10%, transparent);
  background: var(--dark-sub);
  color: var(--on-dark);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
}
.kod-ac::after { content: ' ▾'; color: var(--orange); }
.kod-ac[aria-expanded='true']::after { content: ' ▴'; }
.kod-ac:hover { color: var(--orange); }
@media (max-width: 520px) {
  .kod-nokta { display: none; }
  .kod-btn { padding: 0 0.6rem; }
}
.yazi-icerik figure { margin-inline: 0; }
.yazi-icerik figure img { max-width: 100%; height: auto; border: 1px solid var(--rule); }
.yazi-icerik figcaption { font-size: var(--fs-small); color: var(--ink-muted); margin-top: 0.5rem; }
.yazi-icerik hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2.2em; }
.yazi-tablo { overflow-x: auto; }

/* GitHub repo kartı (functions/_lib/blog.js → paragraph) */
.gh-kart {
  display: block;
  border: 1px solid var(--rule);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out), transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.gh-kart:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(24, 21, 17, 0.28); }
.gh-kart img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.yazi-icerik table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.yazi-icerik th, .yazi-icerik td { border-bottom: 1px solid var(--rule); padding: 0.6rem 0.7rem; text-align: left; vertical-align: top; }
.yazi-icerik th { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }

.post-sources {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.post-sources h2 { font-size: 1.05rem; margin-bottom: 0.8rem; }
.post-sources .yazi-icerik { font-size: var(--fs-small); line-height: 1.6; }
.post-sources .yazi-icerik > * + * { margin-top: 0.6em; }

/* Yan kutu: içindekiler + bülten. Hücre satır boyunca uzar (align-self: stretch), içindeki kutu yapışkan kalır;
   yoksa hücre içeriği kadar kısa olur ve sticky'nin kayacak alanı kalmaz */
.post-aside { display: block; align-self: stretch; }
.post-aside .course-aside { position: static; }
.post-aside-sticky { position: sticky; top: clamp(88px, 8vw, 116px); display: grid; gap: 1.2rem;
  max-height: calc(100vh - clamp(104px, 9vw, 136px)); overflow-y: auto; overscroll-behavior: contain; }
.post-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; counter-reset: toc; }
.post-toc li { counter-increment: toc; display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; font-size: var(--fs-small); }
.post-toc li::before { content: counter(toc, decimal-leading-zero); color: var(--orange-ink); font-weight: 700; }
.post-toc a { color: var(--ink-body); text-decoration: none; }
.post-toc a:hover { color: var(--orange-ink); }
.post-nl .nl-form input[type='email'] { width: 100%; }
.post-nl .nl-done { font-size: var(--fs-small); color: var(--ink); }

/* Tek sütuna inince ızgara izi uzun kod satırına göre esnemesin (pre kendi içinde kaysın) */
.course-content { min-width: 0; }

@media (max-width: 900px) {
  .course-body { grid-template-columns: minmax(0, 1fr); }
  .post-aside-sticky { position: static; }
  .post-toc { display: none; }
}

/* Dar ekranda künye satırı sarınca ayırıcı nokta satır sonunda yetim kalmasın */
@media (max-width: 480px) {
  .post-meta { gap: 0.2rem 1rem; }
  .post-meta .sep { display: none; }
}