/*
 * otocekicim — sayfa-bolge-detay.css
 *
 * Bölge detay sayfası (/bolgeler/<slug>/).
 * Ölçüler prototipten birebir: Bolge Detay.dc.html / _tools/out/D-Bolge Detay.txt
 *
 * Yalnız .otc-bd-* sınıfları tanımlanır; temel.css'teki paylaşılan sınıflar
 * (.otc-sayfabasi, .otc-yan, .otc-yan-kutu, .otc-btn*, .otc-eyebrow) yeniden
 * tanımlanmaz — gereken yerlerde KAPSAMLI ezme yapılır (K8).
 * HEX yazılmaz, 100vw ve !important kullanılmaz (K3, K5, K32).
 * Kırılımlar yalnız 760 ve 560'tır (K31).
 */

/* ---------------------------------------------------- 1. Sayfa başı (iki sütun) */

/*
 * .otc-sayfabasi tek sütunlu bir yığındır; bölge sayfasında prototip aynı
 * bandı iki sütuna böler (metin + 3/2 görsel). Kapsamlı ezme: yalnız
 * .otc-bd-basi içindeki kap etkilenir.
 * Prototip: repeat(auto-fit, minmax(min(100%,400px),1fr)); gap:48px
 */
.otc-bd-basi .otc-kap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: 48px;
	align-items: center;
}

.otc-bd-basi-metin {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* .otc-eyebrow 12px/.14em'dir; bu bantta prototip 12.5px/.1em kullanır. */
.otc-bd-eyebrow {
	align-self: flex-start;
	font-size: 12.5px;
	letter-spacing: .1em;
}

/* .otc-sayfabasi p 62ch'tir; prototip bu sayfada 60ch. */
.otc-bd-basi .otc-bd-ozet {
	max-width: 60ch;
}

.otc-bd-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-bd-cta-btn {
	padding: 14px 22px;
	border-radius: var(--otc-r-kucuk);
	font-size: 16px;
}

.otc-bd-gorsel {
	min-width: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 1px solid var(--otc-cizgi);
	border-radius: var(--otc-r-buyuk);
	background: var(--otc-krem);
	box-shadow: var(--otc-golge-kart);
}

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

/* ---------------------------------------------------- 2. İki sütunlu gövde */

/* Prototip: padding:72px 0 96px */
.otc-bd-bolum {
	padding: 72px 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-bd-duzen {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
	gap: 48px;
	align-items: start;
}

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

/* ---------------------------------------------------- 3. 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-bd-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-bd-metin p {
	margin: 0;
	text-wrap: pretty;
}

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

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

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

/* ---------------------------------------------------- 5. Mahalle çipleri */

/*
 * 22 çipe kadar çıkabilir: flex-wrap ile akar, satır taşması yapmaz.
 * temel.css'teki .otc-bolge-cip yan sütun çipidir (13px, 8px 12px);
 * gövde çipi prototipte daha iridir, o yüzden ayrı sınıf.
 */
.otc-bd-cipler {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.otc-bd-cip {
	display: inline-flex;
	align-items: center;
	padding: 9px 14px;
	border-radius: var(--otc-r-buyuk);
	border: 1px solid var(--otc-cizgi);
	background: var(--otc-beyaz);
	color: var(--otc-koyu);
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------- 6. Yollar */

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

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

.otc-bd-yol .otc-ikon {
	margin-top: 1px;
}

/* ---------------------------------------------------- 7. Hizmet kutuları */

/* Prototip: repeat(auto-fit, minmax(min(100%,220px),1fr)); gap:12px */
.otc-bd-hizmetler {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 12px;
}

.otc-bd-hizmet {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 20px;
	border-radius: var(--otc-r-orta);
	background: var(--otc-zemin);
	color: var(--otc-koyu);
	transition: background .15s;
}

.otc-bd-hizmet:hover,
.otc-bd-hizmet:focus-visible {
	background: var(--otc-turuncu-acik);
	color: var(--otc-koyu);
}

.otc-bd-hizmet-ad {
	font-size: 16px;
	font-weight: 700;
	text-wrap: pretty;
	overflow-wrap: anywhere;
}

.otc-bd-hizmet-ozet {
	font-size: 14px;
	line-height: 1.5;
	color: var(--otc-gri);
	text-wrap: pretty;
}

/* ------------------------------------- 8. "Yolda kaldığınızda ne yapmalısınız?" */

.otc-bd-adimlar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px;
	border-radius: var(--otc-r-buyuk);
	background: var(--otc-zemin);
}

.otc-bd-adimlar-baslik {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.015em;
	text-wrap: pretty;
}

/* Prototip: repeat(auto-fit, minmax(min(100%,240px),1fr)); gap:8px 24px */
.otc-bd-adimlar-liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 8px 24px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--otc-koyu);
	color: color-mix(in srgb, var(--otc-koyu) 56%, var(--otc-gri));
}

.otc-bd-adim {
	display: flex;
	gap: 10px;
	text-wrap: pretty;
}

/* Küçük turuncu metin AA altındadır → --otc-turuncu-metin (K30). */
.otc-bd-adim-no {
	flex: none;
	font-weight: 700;
	color: var(--otc-turuncu-metin);
}

/* ---------------------------------------------------- 9. 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-bd-basi .otc-kap {
		gap: 32px;
	}

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

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

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

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

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

	.otc-bd-adimlar {
		padding: 22px;
	}
}

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

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

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