/*
 * otocekicim — sayfa-iletisim.css
 *
 * "İletişim" sayfa şablonu (page-iletisim.php).
 * Ölçüler prototipten birebir: Iletisim.dc.html / _tools/out/D-Iletisim.txt
 *
 * Yalnız .otc-il-* sınıfları tanımlanır; temel.css'teki paylaşılan sınıflar
 * (kap, düğme, ikon kutusu, sayfa başı, bölüm) yeniden tanımlanmaz (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şı */

/* Prototipte bu sayfanın giriş paragrafı 60ch'tir (temel.css 62ch). */
.otc-sayfabasi .otc-il-giris {
	max-width: 60ch;
}

/* ------------------------------------------------- 2. İletişim kartları */

/* Prototip: repeat(auto-fit, minmax(min(100%,260px), 1fr)); gap:16px */
.otc-il-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 16px;
}

.otc-il-kart {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding: 28px;
	border-radius: var(--otc-r-buyuk);
	background: var(--otc-beyaz);
	border: 1px solid var(--otc-cizgi);
	color: var(--otc-koyu);
	transition: border-color .15s;
}

/* Yalnız bağlantı olan kartlar hover alır; çalışma saatleri kartı <div>'dir. */
a.otc-il-kart:hover,
a.otc-il-kart:focus-visible {
	border-color: var(--otc-turuncu);
	color: var(--otc-koyu);
}

a.otc-il-kart-wa:hover,
a.otc-il-kart-wa:focus-visible {
	border-color: var(--otc-yesil);
}

/* .otc-ikon-kutu 44px, -buyuk 48px'tir; bu kartlarda prototip 52px kullanır. */
.otc-il-ikon {
	width: 52px;
	height: 52px;
}

.otc-il-kart-metin {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.otc-il-etiket {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--otc-gri);
}

.otc-il-deger {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.otc-il-deger-buyuk {
	font-size: 24px;
	letter-spacing: -.02em;
}

.otc-il-deger-kucuk {
	font-size: 17px;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------- 3. MERKEZİMİZ */

.otc-il-merkez {
	padding: 0 0 96px;
}

/* Prototip: repeat(auto-fit, minmax(min(100%,380px), 1fr)); gap:48px */
.otc-il-merkez-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 48px;
	align-items: start;
}

.otc-il-merkez-metin {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.otc-il-merkez-basi {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* .otc-eyebrow 12px'tir; bu sayfada prototip 13px kullanır. */
.otc-il-eyebrow {
	font-size: 13px;
}

/* .otc-h2 clamp(26px,2.8vw,36px); bölüm başlığı bir kademe büyüktür. */
.otc-il-h2 {
	font-size: clamp(28px, 3vw, 40px);
}

.otc-il-merkez-ozet {
	font-size: 17px;
	line-height: 1.6;
	color: var(--otc-gri);
	text-wrap: pretty;
}

/* ---------------------------------------------------------- 4. Künye */

.otc-il-kunye {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--otc-cizgi);
}

.otc-il-satir {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--otc-cizgi);
	flex-wrap: wrap;
}

.otc-il-satir-ad {
	font-size: 14px;
	font-weight: 600;
	color: var(--otc-gri);
}

.otc-il-satir-deger {
	font-size: 15.5px;
	font-weight: 600;
	text-align: right;
	min-width: 0;
}

.otc-il-satir-not {
	color: var(--otc-gri);
	font-weight: 500;
}

.otc-il-satir-bolgeler {
	max-width: 34ch;
}

.otc-il-satir-bag {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--otc-koyu);
	text-align: right;
	overflow-wrap: anywhere;
}

/* Küçük turuncu metin AA altındadır → --otc-turuncu-metin (K30). */
.otc-il-satir-bag:hover,
.otc-il-satir-bag:focus-visible {
	color: var(--otc-turuncu-metin);
}

.otc-il-cta-satir {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Prototip: padding:14px 22px (temel .otc-btn 12px 18px). */
.otc-il-btn {
	padding: 14px 22px;
}

/* ---------------------------------------------------------- 5. Harita */

.otc-il-harita {
	position: relative;
	aspect-ratio: 4 / 3;
	min-width: 0;
	border: 1px solid var(--otc-cizgi);
	border-radius: var(--otc-r-buyuk);
	overflow: hidden;
	background: var(--otc-krem);
}

.otc-il-harita-cerceve,
.otc-il-harita-gomme {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.otc-il-harita-gomme iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* K17 — harita ayarı boşken boş gri dikdörtgen değil, adres kutusu basılır. */
.otc-il-harita-bos {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 28px;
	text-align: center;
	background: var(--otc-krem);
}

.otc-il-harita-ikon {
	width: 52px;
	height: 52px;
}

.otc-il-harita-bos-ad {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	text-wrap: pretty;
}

.otc-il-harita-bos-not {
	font-size: 14.5px;
	color: var(--otc-gri);
}

/* ------------------------------------------- 6. Yönetici içeriği (serbest) */

.otc-il-serbest {
	padding: 0 0 96px;
}

.otc-il-serbest-govde {
	max-width: 72ch;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--otc-gri);
}

.otc-il-serbest-govde > * + * {
	margin-top: 16px;
}

.otc-il-serbest-govde h2,
.otc-il-serbest-govde h3 {
	color: var(--otc-koyu);
	text-wrap: pretty;
}

/* temel.css listelerin işaretini kaldırır; yönetici içeriğinde geri verilir. */
.otc-il-serbest-govde ul,
.otc-il-serbest-govde ol {
	padding-left: 22px;
	list-style: disc;
}

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

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

/* 760px — iki sütunlu bant tek sütuna iner (K31). */
@media (max-width: 759.98px) {

	.otc-il-merkez {
		padding: 0 0 56px;
	}

	.otc-il-merkez-izgara {
		gap: 32px;
	}

	.otc-il-merkez-metin {
		gap: 22px;
	}

	.otc-il-serbest {
		padding: 0 0 56px;
	}
}

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

	.otc-il-kart {
		padding: 22px;
	}

	.otc-il-deger-buyuk {
		font-size: 22px;
	}

	/* Künye satırı iki uca yayılmaz; etiket üstte, değer altta ve sola yaslı. */
	.otc-il-satir {
		flex-direction: column;
		gap: 4px;
	}

	.otc-il-satir-deger,
	.otc-il-satir-bag {
		text-align: left;
	}

	.otc-il-cta-satir {
		width: 100%;
	}

	.otc-il-cta-satir .otc-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}