/**
 * İletişim sayfası.
 *
 * Sayfanın omurgası dört eylem kartı: emlakta ziyaretçinin ilk isteği aramak,
 * ikincisi yol tarifi. Form onların altında; bilgi sütunu formun yanında.
 */

.odhun-iletisim {
	padding-bottom: var(--bosluk-8);
}

/* ---- Eylem kartları ---- */

.odhun-iletisim-kartlari {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--bosluk-4);
	/* Başlık bandının üstüne biner: sayfa açılır açılmaz eylemler görünür. */
	margin: calc(var(--bosluk-6) * -1) 0 var(--bosluk-7);
	position: relative;
	z-index: 1;
}

.odhun-iletisim-kart {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: var(--bosluk-4) var(--bosluk-5);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kart);
	background: var(--renk-yuzey);
	box-shadow: var(--golge-1);
	color: var(--renk-murekkep);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.odhun-iletisim-kart:hover {
	transform: translateY(-2px);
	box-shadow: var(--golge-2);
	border-color: var(--renk-deniz);
}

.odhun-iletisim-kart__ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--bosluk-2);
	border-radius: var(--radius-kontrol);
	background: rgba(14, 82, 89, 0.1);
	background: color-mix(in srgb, var(--renk-deniz) 10%, transparent);
	color: var(--renk-deniz);
}
.odhun-iletisim-kart__ikon .odhun-ikon { width: 21px; height: 21px; }

.odhun-iletisim-kart__etiket {
	font-size: 0.82rem;
	color: var(--renk-sessiz);
}
.odhun-iletisim-kart__deger {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	word-break: break-word;
}

/* Telefon kartı asıl eylem: dolu zemin. */
.odhun-iletisim-kart--birincil {
	background: var(--renk-deniz);
	border-color: var(--renk-deniz);
	color: #fff;
}
.odhun-iletisim-kart--birincil .odhun-iletisim-kart__ikon {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}
.odhun-iletisim-kart--birincil .odhun-iletisim-kart__etiket { color: rgba(255, 255, 255, 0.78); }
.odhun-iletisim-kart--birincil:hover { background: var(--renk-deniz-acik); border-color: var(--renk-deniz-acik); }

/* ---- Form + yan sütun ---- */

.odhun-iletisim__izgara {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--bosluk-6);
	align-items: start;
}

.odhun-iletisim__form {
	padding: var(--bosluk-5);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kart);
	background: var(--renk-yuzey);
	box-shadow: var(--golge-1);
}
.odhun-iletisim__form h2 { margin: 0 0 var(--bosluk-2); font-size: 1.35rem; }
.odhun-iletisim__form-not {
	margin: 0 0 var(--bosluk-4);
	color: var(--renk-sessiz);
	font-size: 0.92rem;
}
/* Form kendi başlığını basıyordu; sayfadaki başlıkla çakışmasın. */
.odhun-iletisim__form .odhun-mesaj-formu > h2,
.odhun-iletisim__form .odhun-mesaj-formu > h3 { display: none; }

.odhun-iletisim__yan {
	display: flex;
	flex-direction: column;
	gap: var(--bosluk-4);
	min-width: 0;
}

.odhun-iletisim-kutu {
	padding: var(--bosluk-4) var(--bosluk-5);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kart);
	background: var(--renk-kagit);
}
.odhun-iletisim-kutu h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--bosluk-2);
	font-size: 0.95rem;
	font-weight: 600;
}
.odhun-iletisim-kutu p { margin: 0; line-height: 1.65; font-size: 0.92rem; }
.odhun-iletisim-kutu__ikon { display: inline-flex; color: var(--renk-deniz); }
.odhun-iletisim-kutu__ikon .odhun-ikon { width: 18px; height: 18px; }

.odhun-iletisim-saatler { font-variant-numeric: tabular-nums; }

/* Danışman kartviziti */
.odhun-iletisim-danisman {
	display: flex;
	align-items: center;
	gap: var(--bosluk-3);
	background: var(--renk-yuzey);
}
.odhun-iletisim-danisman__foto {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
	/* Vesikalık portrede kadraj yüzden başlasın. */
	object-position: center top;
	flex: 0 0 auto;
}
/* Fotoğraf yoksa baş harf: boş gri kutudan iyi. */
.odhun-iletisim-danisman__harf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--renk-deniz);
	color: #fff;
	font-family: var(--yazi-baslik);
	font-size: 1.5rem;
	font-weight: 700;
}
.odhun-iletisim-danisman__bilgi {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.odhun-iletisim-danisman__bilgi span { color: var(--renk-sessiz); font-size: 0.85rem; }
.odhun-iletisim-danisman__bilgi a { font-size: 0.92rem; font-weight: 600; }

/* Sosyal medya: metin bağlantı yerine çerçeveli hap. */
.odhun-sosyal-medya { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); }
.odhun-sosyal-medya__bag {
	padding: 6px 14px;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-hap);
	background: var(--renk-yuzey);
	color: var(--renk-murekkep);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}
.odhun-sosyal-medya__bag:hover { border-color: var(--renk-deniz); color: var(--renk-deniz); }

.odhun-iletisim__yetki {
	margin: 0;
	padding: 0 var(--bosluk-2);
	color: var(--renk-sessiz);
	font-size: 0.82rem;
	line-height: 1.6;
}

/* ---- Harita ---- */

.odhun-iletisim-harita {
	margin-top: var(--bosluk-7);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kart);
	overflow: hidden;
	box-shadow: var(--golge-1);
}
.odhun-iletisim-harita__cerceve {
	display: block;
	width: 100%;
	height: 380px;
	border: 0;
	/* Harita gri ve doygun duruyordu; hafif azaltma sayfayla uyumlu kalmasını
	   sağlıyor, hover'da tam renge döner. */
	filter: saturate(0.85);
	transition: filter 0.2s ease;
}
.odhun-iletisim-harita:hover .odhun-iletisim-harita__cerceve { filter: none; }

/* ---- Dar ekran ---- */

@media (max-width: 900px) {
	.odhun-iletisim__izgara { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.odhun-iletisim-kartlari {
		grid-template-columns: minmax(0, 1fr);
		margin-top: calc(var(--bosluk-5) * -1);
		gap: var(--bosluk-3);
	}
	.odhun-iletisim-kart { padding: var(--bosluk-3) var(--bosluk-4); }
	.odhun-iletisim-kart__ikon { width: 34px; height: 34px; margin-bottom: 2px; }
	.odhun-iletisim__form { padding: var(--bosluk-4); }
	.odhun-iletisim-harita__cerceve { height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
	.odhun-iletisim-kart:hover { transform: none; }
}