/* Blog sayfası ve kategori sayfaları (template-parts/blog-listing.php).
   Şekil kuralı: etkileşimli öğeler (chip, sayfalama) hap, kartlar 8px. Gölge kullanılmaz. */

/* --- Başlık bandı: eski sayfadaki turuncu gradyan, ortalı, en az 260px --- */
.blog-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 168px;
	padding: 1.75rem 0;
	background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-light) 100%);
	color: var(--color-white);
	text-align: center;
}
.blog-hero .blog-hero__title {
	margin: 0;
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.2;
	color: inherit;
}
.blog-hero__crumb { margin-bottom: 8px; }
.blog-hero .blog-hero__crumb a { font-size: 13px; color: rgba(255, 255, 255, .85); }
.blog-hero .blog-hero__crumb a::before { content: "← "; }
.blog-hero .blog-hero__crumb a:hover, .blog-hero .blog-hero__crumb a:focus-visible { color: var(--color-white); text-decoration: underline; }

/* --- Öne çıkan yazı --- */
.blog-featured { padding: 2.5rem 0; background: rgba(255, 240, 224, .4); }

/* --- Kategori filtresi: eski sayfada turuncu çerçeveli hap, seçili/hover turuncu dolgu --- */
.blog-filter-bar { padding-block: 1rem; border-bottom: 1px solid var(--color-border); }
.blog-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; }
.blog-filter .blog-filter__chip { /* özgüllük: genel bağlantı/Kit stillerini geçer */
	flex: none;
	padding: 8px 16px;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-pill);
	background: transparent;
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-primary);
	white-space: nowrap;
	transition: background-color .2s, color .2s;
}
.blog-filter .blog-filter__chip:hover,
.blog-filter .blog-filter__chip.is-active { background: var(--color-primary); color: var(--color-white); }
.blog-filter .blog-filter__chip:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }

/* --- Izgara --- */
.blog-grid-section { padding: 3rem 0 4.5rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.blog-empty { margin: 0; text-align: center; color: var(--color-text); }

/* --- Sayfalama --- */
.blog-pagination { margin-top: 3rem; }
.blog-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-size: 14px;
	color: var(--color-navy);
	transition: border-color .2s, background-color .2s, color .2s;
}
.blog-pagination a.page-numbers:hover, .blog-pagination a.page-numbers:focus-visible { border-color: var(--color-navy); }
.blog-pagination .page-numbers.current { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }
.blog-pagination .page-numbers.dots { border-color: transparent; }

/* --- Duyarlı --- */
@media (min-width: 1280px) { /* geniş ekranda 4 sütun (kapsayıcı 1280px kalır, 2K'da dağılmasın) */
	.blog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1366px) { /* filtre: sola yaslı, yatay kaydırma */
	.blog-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
	.blog-filter::-webkit-scrollbar { display: none; }
}
@media (max-width: 1024px) {
	.blog-filter-bar { padding-inline: 0; }
	.blog-featured { padding: 2rem 0; }
	.blog-grid-section { padding: 2.5rem 0 3.5rem; }
	.blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.blog-hero { min-height: 128px; }
	.blog-hero .blog-hero__title { font-size: 2rem; }
	.blog-filter .blog-filter__chip { font-size: 12px; }
	.blog-grid { grid-template-columns: minmax(0, 1fr); }
}