/**
 * Ana sayfa: hero, kategori/arama, vitrinler, bölge kartları, hizmetler,
 * blog önizleme, iletişim şeridi (bkz. PROJE-PLANI.md §4, TASARIM-SISTEMI.md
 * "Hareket": hero medyasının yumuşak belirmesi).
 */

.odhun-hero {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: center;
	color: #fff;
	background: var(--renk-murekkep);
	overflow: hidden;
	text-align: center;
}
.odhun-hero__medya {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: odhun-hero-belir 600ms ease forwards;
}
@media (prefers-reduced-motion: reduce) {
	.odhun-hero__medya { animation: none; opacity: 0.85; }
}
@keyframes odhun-hero-belir {
	to { opacity: 0.55; }
}
.odhun-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,32,31,0.1), rgba(20,32,31,0.75));
}
.odhun-hero__icerik {
	position: relative;
	z-index: 1;
	padding-block: var(--bosluk-6);
	width: 100%;
}
.odhun-hero h1 { color: #fff; margin-bottom: 4px; }
.odhun-hero__slogan { font-size: 1.1rem; margin: 0 0 var(--bosluk-4); }

.odhun-hero__kategoriler {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bosluk-3);
	margin-bottom: var(--bosluk-5);
	justify-content: center;
}

/* Hero butonları koyu zemin üzerinde: dolgu yerine yarı saydam hap, seçilen
   ya da hover olan kum rengine döner. Ana renk butonu koyu zeminde kayboluyordu. */
.odhun-hero__kategoriler .odhun-buton {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
	border-radius: var(--radius-hap);
	min-height: 46px;
}
.odhun-hero__kategoriler .odhun-buton:hover {
	background: var(--renk-kale);
	color: var(--renk-murekkep);
	border-color: var(--renk-kale);
}

.odhun-hero__arama {
	display: flex;
	gap: var(--bosluk-2);
	max-width: 420px;
	margin: 0 auto;
}
.odhun-hero__arama input {
	/* min-width: 0 şart — flex öğesi varsayılan olarak içeriğinden (uzun
	   placeholder) daha dar olamaz ve butonu alt satıra iterdi. */
	flex: 1 1 0;
	min-width: 0;
	-webkit-appearance: none;
	appearance: none;
	min-height: 52px;
	padding: 0 16px;
	border: none;
	border-radius: var(--radius-kontrol);
	font-family: inherit;
	font-size: 0.95rem;
}
.odhun-hero__arama .odhun-buton {
	min-height: 52px;
	padding: 0 26px;
	background: var(--renk-kale);
	color: var(--renk-murekkep);
	border-color: var(--renk-kale);
	font-weight: 700;
}
.odhun-hero__arama .odhun-buton:hover { filter: brightness(1.06); background: var(--renk-kale); }

/* ---- Afiş modu (Ayarlar > Tasarım > Ana Sayfa Hero = Afiş) ---- */

/* Hazır afişin üstüne hiçbir şey binmez: görselin kendi yazıları (firma adı,
   danışman telefonları, hizmet listesi) okunabilir kalsın. Bu yüzden perde de
   yok, kırpma da yok — görsel kendi oranında akar. */
.odhun-afis {
	background: var(--renk-kagit);
}
/* Afiş tam genişlik verilince geniş ekranda (2.5:1 oranıyla) 700px'i aşıyor ve
   ilk ekranı tek başına kaplıyordu. Konteynere alınıp yüksekliği sınırlanıyor;
   contain sayesinde kırpılmadan sığıyor, kenarlarda kalan boşluk afişin kendi
   krem zeminiyle uyumlu. */
.odhun-afis__medya {
	display: flex;
	justify-content: center;
	max-width: var(--konteyner-genislik);
	margin: 0 auto;
	padding: var(--bosluk-4) 20px 0;
	line-height: 0;
}
/* Afiş, altındaki ilan ızgarasıyla aynı genişlikte biter: dar kalınca
   kenarlarda boşluk oluşup sayfayla hizasız duruyordu. Yükseklik oranından
   gelir (2.5:1 afişte ~470px); max-height yalnızca daha kare bir afiş
   yüklenirse devreye girer. */
.odhun-afis__gorsel {
	display: block;
	width: 100%;
	max-height: 480px;
	height: auto;
	object-fit: contain;
}

/* Dar ekran karşılığı, geniş ekranda gizli. */
.odhun-afis__mobil { display: none; }

/* Arama şeridi: afişin hemen altında, ilk ekranda kalacak kadar yakın. */
.odhun-afis-arama {
	background: var(--renk-yuzey);
	border-bottom: 1px solid var(--renk-cizgi);
	padding: var(--bosluk-4) 0;
}
/* Afişin altındaki üst çizgi, iki bloğu tek parça gibi gösteriyor. */
.odhun-afis + .odhun-afis-arama { border-top: 1px solid var(--renk-cizgi); }
/* Geniş ekranda tek satır: solda arama, sağda kategori hapları. Alt alta
   dizilince şerit gereksiz yer kaplıyordu. Dar ekranda yine alt alta. */
.odhun-afis-arama__ic {
	/* Izgara, esnek kutu değil: space-between ile arama kutusu esnedikçe
	   ortadaki logo da kayıyordu. Orta sütun logoyu şeridin gerçek ortasına
	   sabitler, yanlardaki 1fr'ler eşit kalır. */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--bosluk-3) var(--bosluk-4);
}
/* İşaretlemede kategoriler önce basılıyor (mobilde üstte kalmaları için);
   masaüstünde sıra order ile ters çevriliyor. */
.odhun-afis-arama .odhun-hero__arama { order: 1; justify-self: start; }
.odhun-afis-arama__logo { order: 2; justify-self: center; }
.odhun-afis-arama .odhun-hero__kategoriler { order: 3; justify-self: end; }

.odhun-afis-arama__logo {
	display: inline-flex;
	flex: 0 0 auto;
}
.odhun-afis-arama__logo img {
	display: block;
	width: auto;
	height: 58px;
	/* Marka üçüncü kez görünüyor (üst menü + afiş); soluk tutulunca aramayla
	   hap butonlarının arasında ayraç gibi duruyor, onlarla yarışmıyor. */
	opacity: 0.85;
}

/* Şerit daralınca logo ilk feda edilen: arama ve haplar öncelikli. */
@media (max-width: 1000px) {
	.odhun-afis-arama__logo { display: none; }
	/* Logo gizlenince orta sütun boş kalmasın. */
	.odhun-afis-arama__ic { grid-template-columns: 1fr auto; }
}
/* Şerit açık zeminde: hero'nun koyu zemin için yazılmış hap stilleri burada
   okunmuyordu, normal buton görünümüne dönülüyor. */
.odhun-afis-arama .odhun-hero__kategoriler { margin-bottom: 0; }
.odhun-afis-arama .odhun-hero__kategoriler .odhun-buton {
	background: var(--renk-kagit);
	color: var(--renk-murekkep);
	border-color: var(--renk-cizgi);
}
.odhun-afis-arama .odhun-hero__kategoriler .odhun-buton:hover {
	background: var(--renk-deniz);
	color: #fff;
	border-color: var(--renk-deniz);
}
.odhun-afis-arama .odhun-hero__arama {
	width: 100%;
	min-width: 0;
	max-width: 460px;
	margin: 0;
}
.odhun-afis-arama .odhun-hero__arama input {
	border: 1px solid var(--renk-cizgi);
	background: var(--renk-yuzey);
}

/* 3262x1280 bir afişin metni 768px altında okunamayacak kadar küçülüyor
   (ölçek ~0.2, 40px başlık 9px'e iner). O yüzden afiş gizlenip aynı bilgiyi
   taşıyan sade blok gösteriliyor. */
@media (max-width: 767px) {
	.odhun-afis__medya { display: none; }

	/* Dar ekranda sıra ters: önce arama + kategoriler, sonra marka ve
	   danışmanlar. Telefonda ziyaretçinin ilk işi ilan aramak; marka zaten
	   üst menüde logo ve telefon düğmesi olarak duruyor. İki blok da ilk
	   ekrana sığıyor. */
	.odhun-afis-blok {
		display: flex;
		flex-direction: column;
	}
	.odhun-afis-blok .odhun-afis-arama { order: 1; }
	.odhun-afis-blok .odhun-afis { order: 2; }

	/* Sıra değişince çizgiler yanlış kenarda kalıyordu. */
	.odhun-afis-blok .odhun-afis-arama {
		border-bottom: none;
		border-top: none;
	}
	.odhun-afis-blok .odhun-afis { border-top: 1px solid var(--renk-cizgi); }

	.odhun-afis__mobil {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--bosluk-3);
		padding: var(--bosluk-5) var(--bosluk-4) var(--bosluk-4);
		text-align: center;
	}

	.odhun-afis__logo {
		width: 132px;
		height: auto;
	}

	.odhun-afis__baslik {
		margin: 0;
		font-size: 1.5rem;
		line-height: 1.2;
	}
	.odhun-afis__slogan {
		margin: 0;
		color: var(--renk-sessiz);
		font-size: 0.95rem;
	}

	.odhun-afis__danismanlar {
		display: flex;
		flex-direction: column;
		gap: var(--bosluk-2);
		width: 100%;
		max-width: 420px;
	}

	/* Afişteki "ara" bilgisi burada gerçek dokunma hedefi oluyor. */
	.odhun-afis__danisman {
		display: flex;
		align-items: center;
		gap: var(--bosluk-3);
		min-height: 56px;
		padding: 10px var(--bosluk-4);
		border: 1px solid var(--renk-cizgi);
		border-radius: var(--radius-kart);
		background: var(--renk-yuzey);
		color: var(--renk-murekkep);
		text-align: left;
		text-decoration: none;
	}
	.odhun-afis__danisman-ikon {
		display: inline-flex;
		flex: 0 0 auto;
		color: var(--renk-deniz);
	}
	.odhun-afis__danisman-ikon .odhun-ikon { width: 20px; height: 20px; }

	.odhun-afis__danisman-foto {
		width: 46px;
		height: 46px;
		flex: 0 0 auto;
		border-radius: 50%;
		object-fit: cover;
		/* Portreler vesikalık: üst kısım yüz, alt kısım omuz. */
		object-position: center top;
		background: var(--renk-kagit);
	}

	.odhun-afis__danisman-bilgi {
		display: flex;
		flex-direction: column;
		min-width: 0;
		line-height: 1.3;
	}
	.odhun-afis__danisman-bilgi strong { font-size: 0.98rem; }
	.odhun-afis__danisman-bilgi em {
		font-style: normal;
		font-size: 0.8rem;
		color: var(--renk-sessiz);
	}
	.odhun-afis__danisman-bilgi span {
		font-size: 0.92rem;
		font-weight: 600;
		color: var(--renk-deniz);
		font-variant-numeric: tabular-nums;
	}

	.odhun-afis-arama { padding: var(--bosluk-3) 0 var(--bosluk-4); }

	.odhun-afis-arama__ic {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}
	.odhun-afis-arama .odhun-hero__kategoriler { order: 1; }
	.odhun-afis-arama .odhun-hero__arama {
		order: 2;
		justify-self: stretch;
		width: 100%;
		max-width: none;
	}
}

/* ---- Vitrinler (öne çıkan / son ilanlar) ---- */

.odhun-vitrin { padding-block: var(--bosluk-7); }
.odhun-vitrin__tumunu-gor { text-align: center; margin-top: var(--bosluk-4); }

/* ---- Bölge kartları ---- */

.odhun-bolge-kartlari { padding-block: var(--bosluk-7); }
.odhun-bolge-izgara {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bosluk-4);
}
.odhun-bolge-kart {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	min-height: 160px;
	padding: var(--bosluk-4);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kart);
	background: var(--renk-yuzey);
	box-shadow: var(--golge-1);
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.odhun-bolge-kart:hover {
	border-color: var(--renk-deniz);
	transform: translateY(-3px);
	box-shadow: var(--golge-3);
}
.odhun-bolge-kart__ad {
	font-family: var(--yazi-baslik);
	font-weight: 600;
	font-size: 1.15rem;
}

@media (max-width: 900px) {
	.odhun-bolge-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.odhun-bolge-izgara { grid-template-columns: 1fr; }
}
.odhun-bolge-kart__sayi { font-size: 0.85rem; color: var(--renk-sessiz); }

.odhun-bolge-kart--gorselli {
	position: relative;
	border: none;
	overflow: hidden;
}
.odhun-bolge-kart__gorsel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.odhun-bolge-kart--gorselli::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 32, 31, 0) 40%, rgba(20, 32, 31, 0.75) 100%);
	z-index: 1;
}
.odhun-bolge-kart--gorselli .odhun-bolge-kart__ad,
.odhun-bolge-kart--gorselli .odhun-bolge-kart__sayi {
	position: relative;
	z-index: 2;
	color: #fff;
}

/* ---- Hizmetler ---- */

.odhun-hizmetler { padding-block: var(--bosluk-7); }
.odhun-hizmetler__izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--bosluk-5);
}
.odhun-hizmet-blok {
	background: var(--renk-yuzey);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kart);
	padding: var(--bosluk-5);
	box-shadow: var(--golge-1);
}
.odhun-hizmet-blok__ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-kontrol);
	background: color-mix(in srgb, var(--renk-deniz) 12%, var(--renk-yuzey));
	font-size: 1.4rem;
	margin-bottom: var(--bosluk-3);
}
.odhun-hizmet-blok h3 { margin-bottom: 6px; }
.odhun-hizmet-blok p { color: var(--renk-sessiz); margin: 0; line-height: 1.5; }

/* ---- Blog önizleme ---- */

.odhun-blog-onizleme { padding-block: var(--bosluk-7); }
.odhun-blog-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--bosluk-4);
}

/* ---- İletişim şeridi ---- */

.odhun-iletisim-seridi {
	background: var(--renk-murekkep);
	color: #fff;
	padding: var(--bosluk-5) 0;
}
.odhun-iletisim-seridi__ic {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bosluk-5);
	align-items: center;
	justify-content: center;
}
.odhun-iletisim-seridi a { color: #fff; text-decoration: none; font-weight: 700; }
.odhun-iletisim-seridi span { color: rgba(255,255,255,0.8); font-size: 0.9rem; }

@media (max-width: 640px) {
	.odhun-hero { min-height: 380px; }

	/* Arama tek satır kalır. Alt alta dizilince "Ara" butonu ekran genişliğine
	   yayılıp bir bölüm gibi duruyordu; 375px'te bile input + kompakt buton
	   rahat sığıyor. */
	.odhun-hero__arama .odhun-buton { padding: 0 18px; }
	.odhun-hero__arama input { min-width: 0; }
}