/*
 * otocekicim — sayfa-hizmet-detay.css
 *
 * Hizmet detay sayfası (/hizmetler/<slug>/).
 * Ölçüler prototipten birebir: Hizmet Detay.dc.html / _tools/out/D-Hizmet Detay.txt
 *
 * Yalnız .otc-hd-* sınıfları tanımlanır; temel.css'teki paylaşılan sınıflar
 * (.otc-yan, .otc-yan-kutu, .otc-sss-*, .otc-btn*) yeniden tanımlanmaz (K8).
 * HEX yazılmaz, 100vw ve !important kullanılmaz (K3, K5, K32).
 */

/* ---------------------------------------------------- 1. Sayfa başı CTA satırı */

.otc-hd-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 6px;
}

/* Prototipte bu iki düğme .otc-btn varsayılanından bir kademe büyüktür. */
.otc-hd-cta-btn {
	padding: 14px 22px;
	border-radius: var(--otc-r-kucuk);
	font-size: 16px;
}

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

/* Prototip: padding:72px 0 96px */
.otc-hd-bolum {
	padding: 72px 0 96px;
}

/*
 * Prototipte ızgara auto-fit + "grid-column:span 2" ile kurulmuştur; 1240px
 * kapta bu tam olarak 2fr / 1fr eder (sağ sütun 300px'in altına inmez).
 * Burada aynı oran doğrudan yazılır, böylece 760px kırılımı öngörülebilir olur.
 */
.otc-hd-duzen {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
	gap: 48px;
	align-items: start;
}

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

/* ---------------------------------------------------- 3. Hizmet görseli */

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

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

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

/*
 * Prototip gövde metni koyu ile gri arasında bir tondadır. HEX yazmamak için
 * tokenlardan karıştırılır; color-mix desteklenmezse satır düşer ve metin
 * --otc-koyu ile basılır (ikisi de AA üstü).
 */
.otc-hd-metin {
	display: flex;
	flex-direction: column;
	gap: 18px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--otc-koyu);
	color: color-mix(in srgb, var(--otc-koyu) 56%, var(--otc-gri));
}

.otc-hd-metin p {
	margin: 0;
	text-wrap: pretty;
}

/* ---------------------------------------------------- 5. Blok başlıkları */

.otc-hd-blok {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.otc-hd-baslik {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.015em;
	text-wrap: pretty;
}

/* ---------------------------------------------------- 6. "Neleri kapsar?" */

.otc-hd-kapsam {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 10px 24px;
}

.otc-hd-kapsam-oge {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 6px 0;
	font-size: 15.5px;
	font-weight: 600;
	text-wrap: pretty;
}

.otc-hd-kapsam-oge .otc-ikon {
	margin-top: 1px;
}

/* ---------------------------------------------------- 7. Süreç adımları */

.otc-hd-adimlar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 12px;
}

.otc-hd-adim {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px;
	background: var(--otc-zemin);
	border-radius: var(--otc-r-orta);
}

/* Küçük turuncu metin AA altındadır → --otc-turuncu-metin (K30). */
.otc-hd-adim-etiket {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--otc-turuncu-metin);
}

.otc-hd-adim-baslik {
	font-size: 17px;
	font-weight: 700;
	text-wrap: pretty;
}

.otc-hd-adim-metin {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--otc-gri);
	text-wrap: pretty;
}

/* ---------------------------------------------------- 8. Galeri */

.otc-hd-galeri {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
	gap: 12px;
}

.otc-hd-galeri-oge {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--otc-cizgi);
	border-radius: var(--otc-r-orta);
	background: var(--otc-krem);
}

.otc-hd-galeri-oge img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------- 9. "Fiyatı ne belirler?" */

.otc-hd-fiyat {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 12px;
}

.otc-hd-fiyat-kutu {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	border: 1px solid var(--otc-cizgi);
	border-radius: var(--otc-r-orta);
}

.otc-hd-fiyat-baslik {
	font-size: 16px;
	font-weight: 700;
	text-wrap: pretty;
}

.otc-hd-fiyat-metin {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--otc-gri);
	text-wrap: pretty;
}

.otc-hd-fiyat-not {
	font-size: 15px;
	line-height: 1.6;
	color: var(--otc-gri);
	text-wrap: pretty;
}

/* Bağlantı rengi temel.css'ten gelir (--otc-turuncu-metin, AA). */
.otc-hd-fiyat-bag {
	font-weight: 700;
}

/* ---------------------------------------------------- 10. 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-hd-bolum {
		padding: 48px 0 64px;
	}

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

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

	.otc-hd-ana {
		gap: 32px;
	}

	.otc-hd-baslik {
		font-size: 22px;
	}
}

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

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

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