/*
 * otocekicim — sayfa-yazi-detay.css
 *
 * Yazı detayı (/blog/<slug>/).
 * Ölçüler prototipten birebir: Yazi Detay.dc.html / _tools/out/D-Yazi Detay.txt
 *
 * Yalnız .otc-yd-* sınıfları tanımlanır; temel.css'teki paylaşılan sınıflar
 * (.otc-yan, .otc-yan-kutu, .otc-yan-acil, .otc-btn*) yeniden tanımlanmaz (K8);
 * sapan ölçüler .otc-yd-* kapsamı altında ezilir.
 * HEX yazılmaz, 100vw ve !important kullanılmaz (K3, K5, K32).
 * Kırılımlar yalnız 760 ve 560 (K31).
 */

/* ---------------------------------------------------- 1. Sayfa başı */

/* Prototipte bu sayfanın başlığı liste sayfasından bir kademe küçüktür. */
.otc-yd-basi h1 {
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.12;
	max-width: 24ch;
}

.otc-yd-basi p {
	max-width: 64ch;
}

.otc-yd-etiket {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--otc-turuncu-metin);
	text-transform: uppercase;
}

/* ---------------------------------------------------- 2. İki sütunlu düzen */

/* Prototip: padding:64px 0 96px */
.otc-yd-bolum {
	padding: 64px 0 96px;
}

/*
 * Prototipte ızgara auto-fit + "grid-column:span 2" ile kurulmuştur; 1240px
 * kapta bu tam olarak 2fr / 1fr eder. Oran doğrudan yazılır ki 760px kırılımı
 * öngörülebilir olsun (hizmet detayıyla aynı düzen dili).
 */
.otc-yd-duzen {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
	gap: 48px;
	align-items: start;
}

.otc-yd-ana {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* ---------------------------------------------------- 3. Öne çıkan görsel */

.otc-yd-gorsel {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--otc-cizgi);
	border-radius: var(--otc-r-buyuk);
	background: var(--otc-krem);
}

.otc-yd-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------- 4. Gövde tipografisi */

/*
 * the_content() çıktısı: h2 + p + ul. Kurallar yalnız .otc-yd-govde kapsamında
 * yazılır; küresel h2/p/ul seçicisi kullanılmaz (temel.css'in sıfırlaması korunur).
 * Prototipte bölümler arası 36px, bölüm içi 14px boşluk vardır; akışta bu
 * boşluk üst kenar boşluğuyla kurulur.
 */
.otc-yd-govde {
	display: flow-root;
}

.otc-yd-govde > :first-child {
	margin-top: 0;
}

.otc-yd-govde h2 {
	margin-top: 36px;
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.25;
	text-wrap: pretty;
}

.otc-yd-govde h3 {
	margin-top: 28px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
	text-wrap: pretty;
}

/*
 * Prototip gövde metni rengi iki token arasındadır; HEX yazmamak için
 * tokenlardan karıştırılır. color-mix desteklemeyen tarayıcı önceki satıra düşer.
 */
.otc-yd-govde p {
	margin-top: 14px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--otc-koyu);
	color: color-mix(in srgb, var(--otc-koyu) 56%, var(--otc-gri));
	text-wrap: pretty;
}

.otc-yd-govde ul,
.otc-yd-govde ol {
	margin-top: 14px;
	padding-left: 22px;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--otc-koyu);
	color: color-mix(in srgb, var(--otc-koyu) 56%, var(--otc-gri));
}

.otc-yd-govde ul {
	list-style: disc;
}

.otc-yd-govde ol {
	list-style: decimal;
}

.otc-yd-govde li + li {
	margin-top: 8px;
}

.otc-yd-govde li::marker {
	color: var(--otc-turuncu);
}

.otc-yd-govde a:not(.otc-btn) {
	color: var(--otc-turuncu-metin);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.otc-yd-govde a:not(.otc-btn):hover {
	color: var(--otc-koyu);
}

.otc-yd-govde strong,
.otc-yd-govde b {
	font-weight: 700;
	color: var(--otc-koyu);
}

.otc-yd-govde img {
	margin-top: 20px;
	display: block;
	height: auto;
	border-radius: var(--otc-r-buyuk);
}

.otc-yd-govde figure {
	margin-top: 20px;
}

.otc-yd-govde blockquote {
	margin-top: 20px;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--otc-turuncu);
	font-size: 17px;
	line-height: 1.6;
	color: var(--otc-gri);
}

.otc-yd-sayfalar {
	margin-top: 28px;
	font-size: 15px;
	font-weight: 700;
	color: var(--otc-gri);
}

.otc-yd-sayfalar a {
	color: var(--otc-koyu);
	padding: 0 6px;
}

.otc-yd-sayfalar a:hover {
	color: var(--otc-turuncu-metin);
}

/* ---------------------------------------------------- 5. Gövde içi CTA */

.otc-yd-cta {
	background: var(--otc-zemin);
	border-radius: var(--otc-r-buyuk);
	padding: 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.otc-yd-cta-metin {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.otc-yd-cta-baslik {
	font-weight: 700;
	font-size: 18px;
	color: var(--otc-koyu);
	text-wrap: pretty;
}

.otc-yd-cta-not {
	font-size: 15px;
	color: var(--otc-gri);
}

/* Prototip: padding:14px 22px; font-size:16px */
.otc-yd-cta-btn {
	padding: 14px 22px;
	font-size: 16px;
}

/* ---------------------------------------------------- 6. Yan sütun */

/*
 * Acil hat kutusu: kabuk temel.css'teki .otc-yan-acil'dan gelir. Prototipte bu
 * sayfadaki kutu daha sadedir (ikon kutusu/açıklama yok) → yalnız boşluk ve
 * telefon ölçüsü burada ezilir.
 */
.otc-yd-acil {
	gap: 14px;
}

.otc-yd-acil .otc-yan-acil-tel {
	font-size: 22px;
}

/* "DİĞER YAZILAR" listesi — iki satırlı bağlantılar. */
.otc-yd-liste {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.otc-yd-liste a {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 11px 12px;
	border-radius: var(--otc-r-kucuk);
	color: var(--otc-koyu);
}

.otc-yd-liste a:hover {
	background: var(--otc-beyaz);
	color: var(--otc-koyu);
}

.otc-yd-liste-kat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--otc-turuncu-metin);
	text-transform: uppercase;
}

.otc-yd-liste-ad {
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.35;
}

/* "İLGİLİ HİZMET" kutusundaki tek bağlantı. */
.otc-yd-hizmet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-weight: 700;
	font-size: 16px;
	color: var(--otc-koyu);
}

.otc-yd-hizmet:hover {
	color: var(--otc-turuncu-metin);
}

/* ---------------------------------------------------- 7. Kırılımlar */

/* 760px — iki sütun tek sütuna iner, yan sütun akışa girer (K31). */
@media (max-width: 759.98px) {

	.otc-yd-bolum {
		padding: 48px 0 64px;
	}

	.otc-yd-duzen {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.otc-yd-duzen .otc-yan {
		position: static;
		top: auto;
	}

	.otc-yd-ana {
		gap: 28px;
	}

	.otc-yd-govde h2 {
		margin-top: 28px;
	}

	.otc-yd-cta {
		padding: 22px;
	}
}

/* 560px — yatay CTA satırı dikeye döner, düğme tam genişlik olur (K31). */
@media (max-width: 559.98px) {

	.otc-yd-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.otc-yd-cta-btn {
		justify-content: center;
	}
}