/*
 * Blog yazısı gövdesindeki eski tema sınıfları.
 *
 * Yazılar 26 farklı sınıf kullanıyor (faq-item, highlight-box, meta-info,
 * info-table…). Bu sınıflar eski temada stillendirilmişti; yeni temada
 * karşılıkları olmadığı için bütün kutular ve tablolar düz metin gibi
 * görünüyordu. İçeriğe dokunmadan, aynı sınıf adlarıyla yeniden yazıldı.
 *
 * Ortak kalıp: açık zemin + sol kenarda kalın renkli şerit + yuvarlak köşe.
 */

.blog-post-content { max-width: 68ch; }

/* ---------- Künye şeridi ---------- */

.meta-info {
	background: var(--kmi-panel);
	border-left: 4px solid var(--kmi-navy);
	border-radius: var(--kmi-radius);
	padding: var(--kmi-s3) var(--kmi-s4);
	margin-bottom: var(--kmi-s5);
	font-size: var(--kmi-fs-sm);
	color: var(--kmi-muted);
	line-height: 1.9;
}
.meta-info strong { color: var(--kmi-ink); font-weight: 700; }

/* ---------- Kutular ---------- */

.highlight-box,
.info-box,
.warning-box,
.success-box,
.example-box,
.step-box,
.comparison-box,
.formula-box {
	border-left: 4px solid var(--kmi-line);
	border-radius: var(--kmi-radius);
	padding: var(--kmi-s4);
	margin-block: var(--kmi-s4);
	background: var(--kmi-panel);
}

.highlight-box,
.info-box {
	background: var(--kmi-blue-soft);
	border-left-color: var(--kmi-blue);
}

.warning-box {
	background: var(--kmi-warn-soft);
	border-left-color: var(--kmi-warn);
}

.success-box {
	background: var(--kmi-ok-soft);
	border-left-color: var(--kmi-ok);
}

.example-box,
.comparison-box,
.step-box,
.formula-box {
	background: var(--kmi-panel);
	border-left-color: var(--kmi-navy-2);
}

.highlight-box > :first-child,
.info-box > :first-child,
.warning-box > :first-child,
.success-box > :first-child,
.example-box > :first-child,
.step-box > :first-child,
.comparison-box > :first-child,
.formula-box > :first-child { margin-top: 0; }

.highlight-box > :last-child,
.info-box > :last-child,
.warning-box > :last-child,
.success-box > :last-child,
.example-box > :last-child,
.step-box > :last-child,
.comparison-box > :last-child,
.formula-box > :last-child { margin-bottom: 0; }

.example-title {
	display: block;
	font-weight: 700;
	margin-bottom: var(--kmi-s2);
	color: var(--kmi-ink);
}

.formula-box {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: var(--kmi-fs-sm);
}

/* ---------- Vurgulu tutar ---------- */

.amount-showcase {
	background: var(--kmi-navy);
	color: #fff;
	border-radius: var(--kmi-radius);
	padding: var(--kmi-s4);
	margin-block: var(--kmi-s4);
	text-align: center;
}
.amount-value {
	display: block;
	font-family: var(--kmi-font-baslik);
	font-size: var(--kmi-fs-2xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

/* ---------- Tablolar ---------- */

.info-table,
.date-table,
.calc-table {
	width: 100%;
	border-collapse: collapse;
	margin-block: var(--kmi-s4);
	font-size: var(--kmi-fs-sm);
}
.info-table th,
.date-table th,
.calc-table th {
	background: var(--kmi-panel);
	text-align: left;
	font-weight: 700;
	padding: var(--kmi-s2) var(--kmi-s3);
	border-bottom: 2px solid var(--kmi-line);
}
.info-table td,
.date-table td,
.calc-table td {
	padding: var(--kmi-s2) var(--kmi-s3);
	border-bottom: 1px solid var(--kmi-line);
	vertical-align: top;
}
.info-table tr:last-child td,
.date-table tr:last-child td,
.calc-table tr:last-child td { border-bottom: none; }

/*
 * Tablolar taşarsa sayfa yatay kaymasın: her tablo kendi kabında kayar.
 *
 * İlk sürümde tablonun kendisi `display: block` yapılıyordu; bu hem tablo
 * yapısını bozuyor (satır/sütun hizası kayıyor) hem de `white-space: nowrap`
 * ile birlikte hücreleri gereksiz genişletiyordu. Artık `the_content`
 * filtresi her tabloyu bir sarmalayıcıya alıyor (inc/blog.php) ve kaydırma
 * o sarmalayıcıda oluyor — tablo normal tablo olarak kalıyor.
 *
 * Sarmalayıcı sınıfsız tabloları da kapsıyor; içerikteki 45 tablonun 2'si
 * sınıfsızdı ve eski kural onları ıskalıyordu.
 */
.kmi-tablo-kap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-block: var(--kmi-s4);
}
.kmi-tablo-kap > table { margin-block: 0; min-width: 32rem; }

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

.faq-item {
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius);
	padding: var(--kmi-s3) var(--kmi-s4);
	margin-bottom: var(--kmi-s3);
	background: var(--kmi-ground);
}
.faq-question {
	font-weight: 700;
	color: var(--kmi-ink);
	margin-bottom: var(--kmi-s2);
}
.faq-answer { color: var(--kmi-muted); }
.faq-answer > :last-child { margin-bottom: 0; }

/* ---------- Etiketler ---------- */

.blog-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kmi-s2);
	margin-block: var(--kmi-s5);
	padding-top: var(--kmi-s4);
	border-top: 1px solid var(--kmi-line);
}
.blog-tags a {
	font-size: var(--kmi-fs-xs);
	padding: .25rem .6rem;
	background: var(--kmi-panel);
	border: 1px solid var(--kmi-line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--kmi-muted);
}
.blog-tags a:hover { border-color: var(--kmi-blue); color: var(--kmi-blue); }

/* ---------- Yazı kapak görseli ---------- */

.kmi-yazi-kapak {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;   /* yüklenmeden yer kaplasın: CLS 0 */
	object-fit: cover;
	border-radius: var(--kmi-radius);
	margin-bottom: var(--kmi-s5);
	background: var(--kmi-panel);
}

/* ---------- Gövde içi reklam (eski yazılardan) ---------- */

/*
 * Yazı gövdelerinde `.adsense-iskur-basvur` ile sarılı birimler var.
 * Kapları sabit yükseklikli olmadığı için reklam yüklenince altındaki
 * metni aşağı itiyorlardı; tema kapları gibi yer ayırıyorlar artık.
 */
.adsense-iskur-basvur {
	min-height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block: var(--kmi-s5);
	background: var(--kmi-panel);
	border-radius: var(--kmi-radius);
	overflow: hidden;
}
.adsense-iskur-basvur .adsbygoogle { width: 100%; }

@media (max-width: 782px) {
	.adsense-iskur-basvur {
		margin-inline: calc(var(--kmi-s4) * -1);
		width: calc(100% + var(--kmi-s4) * 2);
		border-radius: 0;
	}
}