/* ==========================================================================
   Blog: dizin (/blog/), kategori/arama arşivleri ve yazı kartı
   Renk/ölçü değerleri yalnızca tokens.css'ten gelir.
   Yalnız blog dizini, arşivler ve aramada yüklenir (sb_needs_blog_styles()).
   ========================================================================== */

.sb-blog-index {
	padding-block: 2.5rem 5rem;
}

/* --- Kategori süzgeci ------------------------------------------------------
   Eğitim arşivindeki çubukla aynı dil: hap sekmeler, altında ince ayraç. */
.sb-blog-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--sb-line);
}

.sb-blog-filter__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius-pill);
	background: var(--sb-surface);
	font-size: var(--sb-fs-small);
	font-weight: 500;
	color: var(--sb-gray-700);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sb-blog-filter__item:hover {
	border-color: var(--sb-blue);
	color: var(--sb-blue);
}

.sb-blog-filter__item.is-active {
	border-color: var(--sb-blue);
	background: var(--sb-blue);
	color: var(--sb-surface);
}

.sb-blog-filter__count {
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--sb-gray-400);
}

.sb-blog-filter__item.is-active .sb-blog-filter__count {
	color: color-mix(in srgb, var(--sb-surface) 75%, transparent);
}

/* --- Vitrin (en yeni yazı) ------------------------------------------------- */
.sb-blog-feature {
	--sb-accent: var(--sb-blue);

	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	overflow: hidden;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	background: var(--sb-surface);
	transition: border-color 0.18s ease;
}

/* Süzgeç basılmadığında (tek kategori) üstteki boşluğu bölümün kendi
   dolgusu taşır; iki boşluk üst üste binmesin. */
.sb-blog-filter + .sb-blog-feature,
.sb-blog-filter + .sb-blog-index__grid {
	margin-top: 2.5rem;
}

/* Üstüne gelince kart YÜKSELMEZ: kalkma + gölge birlikte yapay duruyordu.
   Geri bildirim yalnız kenarlığın aksan rengine dönmesiyle veriliyor. */
.sb-blog-feature:hover {
	border-color: color-mix(in srgb, var(--sb-accent) 45%, var(--sb-line));
}

/* Görsel yoksa kapak degradeyle boyanır; vitrin hiçbir yazıda boş kalmaz. */
.sb-blog-feature__cover {
	position: relative;
	display: block;
	min-height: 16rem;
	background:
		radial-gradient(18rem 12rem at 80% -20%, color-mix(in srgb, var(--sb-surface) 30%, transparent), transparent 70%),
		linear-gradient(135deg, var(--sb-accent), color-mix(in srgb, var(--sb-accent) 55%, var(--sb-indigo)));
}

.sb-blog-feature__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Görselli vitrinde kapağın alt kenarı gövdeye yumuşak bağlansın; düz kesilen
   fotoğraf kartın içinde yapıştırılmış gibi duruyordu. */
.sb-blog-feature--media .sb-blog-feature__cover::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 35%;
	background: linear-gradient(to top, color-mix(in srgb, var(--sb-ink) 30%, transparent), transparent);
}

.sb-blog-feature__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	padding: clamp(1.5rem, 3vw, 2.4rem);
}

.sb-blog-feature__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.sb-blog-feature__flag {
	padding: 0.25rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--sb-accent) 35%, var(--sb-line));
	border-radius: var(--sb-radius-pill);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sb-accent);
}

.sb-blog-feature__title {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	overflow-wrap: anywhere;
}

.sb-blog-feature__title a:hover {
	color: var(--sb-accent);
}

.sb-blog-feature__lead {
	font-size: var(--sb-fs-body);
	line-height: 1.65;
	color: var(--sb-gray-700);
}

.sb-blog-feature__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
	font-size: 0.8125rem;
	color: var(--sb-gray-500);
}

.sb-blog-feature__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
	padding: 0.85rem 1.35rem;
	border: 1px solid color-mix(in srgb, var(--sb-accent) 40%, var(--sb-line));
	border-radius: var(--sb-radius-sm);
	font-size: var(--sb-fs-small);
	font-weight: 600;
	color: var(--sb-accent);
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.sb-blog-feature__cta:hover {
	border-color: var(--sb-accent);
	background: var(--sb-accent);
	color: var(--sb-surface);
}

.sb-blog-feature__cta:hover .sb-blog-feature__arrow {
	transform: translateX(0.2rem);
}

.sb-blog-feature__arrow {
	transition: transform 0.18s ease;
}

/* --- Kart ızgarası --------------------------------------------------------- */
.sb-blog-index__grid,
.sb-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: 1.75rem;
	margin-top: 2.5rem;
}

/* --- Yazı kartı ------------------------------------------------------------
   Test ve eğitim kartlarıyla aynı aile. Aksan rengi sırayla paletten gelir. */
.sb-post-card {
	--sb-accent: var(--sb-blue);

	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	background: var(--sb-surface);
	transition: border-color 0.18s ease;
}

.sb-blog-index__grid > *:nth-child(5n + 2),
.sb-archive__grid > *:nth-child(5n + 2) { --sb-accent: var(--sb-purple); }
.sb-blog-index__grid > *:nth-child(5n + 3),
.sb-archive__grid > *:nth-child(5n + 3) { --sb-accent: var(--sb-teal); }
.sb-blog-index__grid > *:nth-child(5n + 4),
.sb-archive__grid > *:nth-child(5n + 4) { --sb-accent: var(--sb-green); }
.sb-blog-index__grid > *:nth-child(5n + 5),
.sb-archive__grid > *:nth-child(5n + 5) { --sb-accent: var(--sb-primary); }

.sb-post-card:hover {
	border-color: color-mix(in srgb, var(--sb-accent) 45%, var(--sb-line));
}

.sb-post-card__cover {
	position: relative;
	display: block;
	height: 9.5rem;
	background:
		radial-gradient(14rem 9rem at 85% -30%, color-mix(in srgb, var(--sb-surface) 30%, transparent), transparent 70%),
		linear-gradient(135deg, var(--sb-accent), color-mix(in srgb, var(--sb-accent) 55%, var(--sb-indigo)));
}

.sb-post-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Görselli kartta kategori rozeti okunabilsin diye üst köşeye ince bir perde;
   açık renkli fotoğrafta beyaz halkalı rozet bile kayboluyordu. */
.sb-post-card--media .sb-post-card__cover::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 55%;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--sb-ink) 35%, transparent), transparent);
}

/* Kategori rozeti kapağın üstünde; beyaz halka onu her zeminden ayırır.
   `sb_blog_badge()` rozeti kartın doğrudan çocuğu olarak basar. */
.sb-post-card > .sb-badge {
	position: absolute;
	top: 1rem;
	left: 1.15rem;
	z-index: 1;
	background: var(--sb-accent);
	box-shadow: 0 0 0 2px var(--sb-surface);
}

.sb-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.5rem;
}

.sb-post-card__title {
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.sb-post-card__title a:hover {
	color: var(--sb-accent);
}

.sb-post-card__lead {
	font-size: var(--sb-fs-small);
	line-height: 1.6;
	color: var(--sb-gray-700);
}

/* Künye: ince ayraçlı tek satır, kartın dibine yaslanır. */
.sb-post-card__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	margin-top: auto;
	padding-top: 1.1rem;
	border-top: 1px solid var(--sb-line);
	font-size: 0.8125rem;
	color: var(--sb-gray-500);
}

@media (max-width: 760px) {
	.sb-blog-feature {
		grid-template-columns: minmax(0, 1fr);
	}

	.sb-blog-feature__cover {
		min-height: 11rem;
	}
}

/* --- Dar ekranda kart içi dolgu -------------------------------------------
   Gutter zaten 1.5rem'den 1rem'e indi; kart dolgusu 1.5-1.75rem kalınca metin
   telefonda hâlâ kenardan ~40px içeride duruyordu. Burada 1rem'e çekiliyor,
   yani metin ~32px içeride. ÜSTTEN taşan öğesi olan kartlarda (marka rozeti,
   takvim karosu) yalnız YAN dolgu daralır; üst dolgu o öğenin yerini tutuyor.
   Blok dosyanın SONUNDA: medya sorgusu özgüllük eklemez. */
@media (max-width: 600px) {
	.sb-post-card__body,
	.sb-blog-feature__body {
		padding: 1rem;
	}
}