/* ============================================================================
   Blog — liste (home.php) + yazı detayı (single.php)
   ----------------------------------------------------------------------------
   Kurallar: renk/tipografi/boşluk YALNIZCA theme.json tokenlarından; ham hex ve
   px font-size yok. Breakpoint sadece 1080 / 900 / 640 — app.css'teki üçlü set.

   Sınıf adları blog'a özel tutuldu (eb-blogcard, eb-postfaq, eb-postcta…).
   docs/04 §5.2 bunlara .eb-postcard / .eb-accordion / .eb-ctaband adını öneriyor;
   o üçü birden fazla sayfa tipinde kullanılacak ORTAK bileşenler olduğu için,
   paralel yazılan parts/*.css dosyalarıyla çakışmamak adına ad alanı ayrıldı.
   Ortak bileşen katmanı kurulduğunda buradaki karşılıkları silinebilir.
   ========================================================================= */

/* ======================================================= LİSTE: sayfa başlığı */

.eb-bloghead .eb-stripe { display: block; }

.eb-bloghead__title {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.eb-bloghead__lead {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--body);
}

/* Pillar filtresi — 7 link, dokunma hedefi 44px */
.eb-pillars {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--wp--preset--spacing--50);
}

.eb-pillar {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	transition: background-color .18s var(--eb-ease), border-color .18s var(--eb-ease), color .18s var(--eb-ease);
}
.eb-pillar:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-dark);
}
.eb-pillar[aria-current="page"] {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface-alt);
}

/* ============================================================ LİSTE: kartlar */

.eb-blogcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--eb-r-lg);
	overflow: hidden;
	text-decoration: none;
	transition: border-color .18s var(--eb-ease), box-shadow .18s var(--eb-ease), transform .18s var(--eb-ease);
}
.eb-blogcard:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

/* Kart içindeki görsel kartın köşesine oturur, kendi yuvarlaklığı olmaz. */
.eb-blogcard .eb-frame {
	border-radius: 0;
	border-inline: 0;
	border-top: 0;
}

.eb-blogcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: var(--wp--preset--spacing--40);
}

.eb-blogcard__tag {
	align-self: start;
	padding: 6px 11px;
	border-radius: var(--eb-r-sm);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--wp--preset--color--accent-dark);
}

.eb-blogcard__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-sm);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
	transition: color .18s var(--eb-ease);
}
.eb-blogcard:hover .eb-blogcard__title { color: var(--wp--preset--color--accent-dark); }

.eb-blogcard__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--body);
}

.eb-blogcard__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px var(--wp--preset--spacing--30);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line-soft);
	font-size: var(--wp--preset--font-size--small);
	/* muted-warm bu ölçüde AA'yı geçmiyor (docs/04 §1.5: 3.6:1) → body (6.1:1). */
	color: var(--wp--preset--color--body);
}

/* ---------------------------------------------------------- boş durum */

.eb-blogempty {
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--eb-r-lg);
	background: var(--wp--preset--color--surface);
}
.eb-blogempty__text {
	margin: 0;
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--body);
}

/* --------------------------------------------------------- sayfalama */

.eb-blogpager-sec { border-top: 1px solid var(--wp--preset--color--line-soft); }

.eb-blogpager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.eb-blogpager__num,
.eb-blogpager__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--eb-r);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	transition: border-color .18s var(--eb-ease), color .18s var(--eb-ease), background-color .18s var(--eb-ease);
}
.eb-blogpager__num:hover,
.eb-blogpager__step:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-dark);
}
.eb-blogpager__num[aria-current="page"] {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface-alt);
}
.eb-blogpager__step { padding-inline: var(--wp--preset--spacing--40); }
/* Sol ok ikon setinde yok: chevron-right çevriliyor. */
.eb-blogpager__step--prev .eb-icon { transform: rotate(180deg); }

/* ==================================================== DETAY: kabuk ve başlık */

/* Yazı kabuğu kapsayıcının tamamını kaplar. Sırayla 820px → 1220px denendi;
   ikisinde de blog gövdesi breadcrumb ve başlıkla FARKLI sol kenarda duruyordu.
   Ölçüler artık iç öğelerde: başlık/meta/SSS metin ekseninde, kapak medya
   ekseninde — hepsi SOLA hizalı, tek eksen. */
.eb-post {
	/* Kabuk kapsayıcının tamamını kaplar. Eskiden 820px, sonra 1220px'ti; her
	   ikisinde de blog gövdesi breadcrumb ve hero ile FARKLI sol kenarda
	   duruyordu (kullanıcı bildirdi). Ölçüler artık iç öğelerde:
	   başlık/meta/SSS metin ekseninde, kapak medya ekseninde, ikisi de SOLDA. */
	max-width: none;
}

/* Kapak medya ekseni: metinden geniş ama kapsayıcıyı doldurmaz — 1392px'lik bir
   3:2 görsel 928px yüksekliğe çıkıp ekranı yerdi. Sola hizalı. */
.eb-posthead__kapak { max-width: 820px; margin-inline: 0; }

.eb-postbar {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line-soft);
	padding-block: var(--wp--preset--spacing--20);
}
/* Breadcrumb linkleri app.css'te 16px yüksekliğinde; dokunma hedefi kuralı için
   burada 44px'e çekiliyor. Ortak .eb-crumbs bileşeninde de düzeltilmeli. */
.eb-postbar .eb-crumbs li { display: flex; align-items: center; }
.eb-postbar .eb-crumbs :is(a, [aria-current="page"]) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Badge bir link olduğu için dokunma hedefi 44px'e çıkarılıyor. */
.eb-posthead__pillar {
	min-height: 44px;
	padding-inline: 15px;
	margin-bottom: var(--wp--preset--spacing--30);
	text-decoration: none;
}

.eb-posthead__title { margin: 0; }

/* ---- Metin ekseni hizası (denetim #8) --------------------------------------
   .eb-post 820px; prose ise 68ch (578px) ve ortalı → gövde başlıktan 121px
   içeride kalıyordu (1440'ta 121, 1200'de 125, 900'de 129 ölçüldü). Diğer üç
   --merkez şablonunda delta 0; blog tek aykırıydı.
   Karar: GENİŞ MEDYA / DAR METİN. Kapak görseli 820px'te kalır (görsel
   genişlikten fayda görür), metinsel öğeler gövdeyle aynı eksene çekilir.

   68ch elle yazılmıştı ve gövde metninden 242px darydı; --eb-metin-eksen'e
   bağlandı (bkz. app.css :root — canlı sitenin ölçüsüyle doğrulandı).
   Kapağın 820px'i bilinçli kalıyor: metinden 60px geniş, hafif bir taşma. */
.eb-posthead > :is(.eb-posthead__pillar, .eb-posthead__title, .eb-postmeta) {
	max-width: var(--eb-metin-eksen);
	margin-inline: 0;
}

/* Yazı içi SSS de okunan metindir → metin ekseninde. Kabuğu (820px) doldurunca
   gövdeden 30px dışarı taşıyordu (ölçüldü: gövde sol 340, SSS sol 310).
   Blog sayfasında bilinçli İKİ eksen var: metin 760px, medya 820px (kapak ve
   ilgili yazı kartları). SSS metin tarafına ait. */
.eb-post > .eb-postfaq {
	max-width: var(--eb-metin-eksen);
	margin-inline: 0;
}

.eb-postmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
}
.eb-postmeta__author { display: inline-flex; align-items: center; gap: 9px; }
.eb-postmeta__avatar {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	color: var(--wp--preset--color--accent-dark);
}
.eb-postmeta__name { font-weight: 600; color: var(--wp--preset--color--ink-soft); }
.eb-postmeta__sep { color: var(--wp--preset--color--line); }

/* ------------------------------------------------------ içindekiler (TOC) */

.eb-toc {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line-soft);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 var(--eb-r) var(--eb-r) 0;
}
.eb-toc__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
}
.eb-toc__list {
	margin: 0;
	padding-left: 1.35em;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}
.eb-toc__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}
.eb-toc__list a:hover {
	color: var(--wp--preset--color--accent-dark);
	text-decoration: underline;
}

/* ---------------------------------------------------------------- içerik */

.eb-post__content { margin-top: var(--wp--preset--spacing--50); }
/* Sticky header hedef başlığı örtmesin. */
.eb-post__content > :is(h2, h3) { scroll-margin-top: calc(var(--eb-header-h) + 20px); }

/* --------------------------------------------------------- ilgili ürün */

.eb-relprod {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--eb-r-lg);
}
.eb-relprod__main { min-width: 0; }
/* eb_kicker() muted-warm kullanıyor (3.6:1) — bu bağlamda AA'ya çekiliyor. */
.eb-relprod .eb-kicker { color: var(--wp--preset--color--body); }
.eb-relprod__title {
	margin: 8px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-md);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------------- SSS */

.eb-postfaq { margin-top: var(--wp--preset--spacing--70); }
.eb-postfaq__title { margin: 0 0 var(--wp--preset--spacing--40); }
.eb-postfaq__list { display: grid; gap: 10px; }

.eb-postfaq__item {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--eb-r);
	overflow: hidden;
}
.eb-postfaq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	min-height: 56px;
	padding: 14px var(--wp--preset--spacing--40);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	list-style: none;
}
.eb-postfaq__item > summary::-webkit-details-marker { display: none; }
.eb-postfaq__item > summary:hover { color: var(--wp--preset--color--accent-dark); }
.eb-postfaq__item .eb-icon {
	color: var(--wp--preset--color--muted-warm);
	transition: transform .2s var(--eb-ease);
}
.eb-postfaq__item[open] .eb-icon { transform: rotate(180deg); }
.eb-postfaq__answer {
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line-soft);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--body);
}

/* ------------------------------------------------------- yazı alt gezinme */

.eb-postnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
}
.eb-postnav__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--body);
	text-decoration: none;
}
.eb-postnav__link:hover { color: var(--wp--preset--color--accent-dark); }
/* Sol ok yerine chevron-right çevriliyor (ikon setinde sol yok). */
.eb-postnav__link .eb-icon { transform: rotate(180deg); }
/* eb-linkarrow app.css'te 26px; burada dokunma hedefi 44px'e çekiliyor. */
.eb-postnav .eb-linkarrow { min-height: 44px; }

/* --------------------------------------------------------- ilgili yazılar */

.eb-relposts__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--heading-md);
}
.eb-relposts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
}
.eb-relposts > * { min-width: 0; }

.eb-relcard {
	display: block;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--eb-r);
	text-decoration: none;
	transition: border-color .18s var(--eb-ease), box-shadow .18s var(--eb-ease);
}
.eb-relcard:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--card);
}
.eb-relcard__tag {
	display: block;
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	/* accent bu ölçüde 4.1:1 → accent-dark (5.2:1) ile AA. */
	color: var(--wp--preset--color--accent-dark);
}
.eb-relcard__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-sm);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}
.eb-relcard:hover .eb-relcard__title { color: var(--wp--preset--color--accent-dark); }

/* ------------------------------------------------------------- CTA bandı */

.eb-postcta {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--ink);
	border-radius: var(--eb-r-xl);
	color: var(--wp--preset--color--surface-alt);
}
.eb-postcta__stripe {
	position: absolute;
	inset-inline: 0;
	top: 0;
	width: 100%;
	border-radius: 0;
}
.eb-postcta__text { max-width: 48ch; min-width: 0; }
.eb-postcta__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-lg);
	color: var(--wp--preset--color--surface-alt);
}
/* Koyu zeminde yumuşak ama AA'lı ton: muted-warm burada 4.3:1 kalıyor,
   line tokeni (sıcak krem) ~11:1 verirken başlıktan ayrışmayı koruyor. */
.eb-postcta__lead {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--line);
}
.eb-postcta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

/* ============================================================== responsive
   Breakpoint seti app.css ile aynı: 1080 / 900 / 640. Yeni değer eklenmedi. */

@media (max-width: 1080px) {
	.eb-postcta { padding: var(--wp--preset--spacing--50); }
}

@media (max-width: 900px) {
	.eb-relposts { grid-template-columns: repeat(2, 1fr); }
	.eb-postcta__actions { width: 100%; }
	.eb-postcta__actions > .eb-btn { flex: 1 1 auto; }
}

@media (max-width: 640px) {
	.eb-relposts { grid-template-columns: 1fr; }
	.eb-blogempty { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
	.eb-postcta {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
		border-radius: var(--eb-r-lg);
	}
	.eb-postcta__actions > .eb-btn { flex: 1 1 100%; }
	.eb-postnav { gap: var(--wp--preset--spacing--20); }
	/* Mobil aksiyon barı son bölümü örtmesin. */
	.eb-postcta { margin-bottom: var(--wp--preset--spacing--20); }
}

/* Yazı kapağı — single.php eb-posthead içinde. Stok kapaklar eklendikten
   sonra gerekti; 13 yazının hepsinde görsel var. */
.eb-posthead__kapak {
	margin: var(--wp--preset--spacing--40) 0 0;
}