/**
 * Bileşenler: header/footer, butonlar, form kontrolleri, ilan kartı.
 * Ayrım 1px çizgiyle; kart ve panellerde çizginin üstüne yumuşak yükselti
 * (--golge-*) eklenir (bkz. TASARIM-SISTEMI.md "Yükselti").
 */

/* ---- Header / Footer ---- */

.odhun-baslik {
	background: var(--renk-yuzey);
	border-bottom: 1px solid var(--renk-cizgi);
}

.odhun-baslik__ic {
	display: flex;
	align-items: center;
	gap: var(--bosluk-5);
	min-height: 72px;
	flex-wrap: wrap;
}

.odhun-logo {
	font-family: var(--yazi-baslik);
	font-weight: 600;
	font-size: 1.25rem;
	text-decoration: none;
	margin-right: auto;
}

.odhun-logo__gorsel { max-height: 44px; width: auto; }

.odhun-menu__liste {
	display: flex;
	gap: var(--bosluk-1);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	align-items: center;
}

/* Menü öğeleri sitenin hap diline uyar (telefon butonu, hero kategorileri,
   rozetler hep hap). Durağan hâlde çerçeve yok — başlık şeridi sakin kalsın;
   şekil yalnızca hover, odak ve aktif sayfada belirir. */
.odhun-menu__liste a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: var(--radius-hap);
	color: var(--renk-sessiz);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.94rem;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.odhun-menu__liste a:hover {
	background: color-mix(in srgb, var(--renk-deniz) 8%, transparent);
	color: var(--renk-deniz);
}

/* Aktif sayfa: dolu hap değil, hafif tonlu zemin — üst şerit iki renkli bir
   sekme çubuğuna dönüşmesin. wp_nav_menu current-menu-item, elle yazılan
   yedek menü is-aktif verir; ikisi de aynı görünür. */
.odhun-menu__liste .current-menu-item > a,
.odhun-menu__liste .current-menu-ancestor > a,
.odhun-menu__liste .is-aktif > a,
.odhun-menu__liste a[aria-current="page"] {
	background: color-mix(in srgb, var(--renk-deniz) 12%, transparent);
	color: var(--renk-deniz);
	font-weight: 700;
}

/* color-mix desteklemeyen tarayıcıda hap görünmez kalmasın. */
@supports not (background: color-mix(in srgb, #000 8%, transparent)) {
	.odhun-menu__liste a:hover { background: var(--renk-kagit); }
	.odhun-menu__liste .current-menu-item > a,
	.odhun-menu__liste .is-aktif > a,
	.odhun-menu__liste a[aria-current="page"] { background: var(--renk-kagit); }
}

.odhun-baslik__sag {
	display: flex;
	align-items: center;
	gap: var(--bosluk-4);
	margin-left: auto;
}

.odhun-dil-secici { display: flex; gap: var(--bosluk-2); font-size: 0.8rem; }
.odhun-dil-secici a { text-decoration: none; color: var(--renk-sessiz); }
.odhun-dil-secici a.is-aktif { color: var(--renk-murekkep); font-weight: 700; }

.odhun-baslik__telefon {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--renk-deniz);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 10px 16px;
	border-radius: var(--radius-hap);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.odhun-baslik__telefon:hover { background: var(--renk-deniz-acik); }

/* ---- Menü açma düğmesi (yalnızca dar ekran) ---- */

.odhun-menu-ac {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kontrol);
	background: var(--renk-yuzey);
	cursor: pointer;
}
/* Üç çizgi: ortadaki gerçek öğe, diğer ikisi ::before/::after. */
.odhun-menu-ac__cizgi,
.odhun-menu-ac__cizgi::before,
.odhun-menu-ac__cizgi::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--renk-murekkep);
	transition: transform 0.18s ease, opacity 0.18s ease;
}
.odhun-menu-ac__cizgi { position: relative; }
.odhun-menu-ac__cizgi::before,
.odhun-menu-ac__cizgi::after {
	content: '';
	position: absolute;
	left: 0;
}
.odhun-menu-ac__cizgi::before { top: -6px; }
.odhun-menu-ac__cizgi::after  { top: 6px; }

/* Açıkken çarpıya döner. */
.odhun-menu-ac.is-acik .odhun-menu-ac__cizgi { background: transparent; }
.odhun-menu-ac.is-acik .odhun-menu-ac__cizgi::before { transform: translateY(6px) rotate(45deg); }
.odhun-menu-ac.is-acik .odhun-menu-ac__cizgi::after  { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
	.odhun-menu-ac__cizgi,
	.odhun-menu-ac__cizgi::before,
	.odhun-menu-ac__cizgi::after { transition: none; }
}

/* ---- Mobil header ----
   375px'te logo + menü + telefon alt alta düşünce başlık 227px yer kaplıyordu,
   ekranın dörtte biri gidiyordu. Dar ekranda tek satır: solda marka, sağda
   favori/karşılaştır + telefon + menü düğmesi; menü açılır panel olarak iner.

   Eşik 820px: 760px'te masaüstü düzeni taşmıyordu ama başlık üç satıra
   bölünüp 160px yer kaplıyordu. Küçük tabletler ve yatay tutulan telefonlar
   da kompakt başlığı kullansın. */

@media (max-width: 820px) {
	/* Açılır menü panelinin hizalanacağı bağlam. */
	.odhun-baslik { position: relative; }

	.odhun-menu-ac { display: inline-flex; order: 2; flex: 0 0 auto; }

	.odhun-baslik__ic {
		min-height: 0;
		padding-block: var(--bosluk-3);
		gap: var(--bosluk-2);
		align-items: center;
	}

	/* Marka adı kısa (odhun_firma_adi; tam unvan yalnızca yasal metinlerde),
	   bu yüzden logo ve telefon ilk satırı paylaşır, menü alta iner. */
	.odhun-logo {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 1.05rem;
		line-height: 1.3;
		margin-right: 0;
	}
	.odhun-logo__gorsel { max-height: 34px; }

	/* Menü açılır panel olur. Eskiden yatay kaydırılan bir şeritti; 360px'te
	   son iki bağlantı (Blog, İletişim) ekranın dışında kalıyor ve ziyaretçi
	   sayfanın "sığmadığını" düşünüyordu. */
	.odhun-menu {
		order: 3;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 30;
		display: none;
		background: var(--renk-yuzey);
		border-top: 1px solid var(--renk-cizgi);
		border-bottom: 1px solid var(--renk-cizgi);
		box-shadow: var(--golge-2);
	}
	/* JS yoksa (odhun-js sınıfı basılmaz) menü hep açık kalsın. */
	html:not(.odhun-js) .odhun-menu,
	.odhun-menu.is-acik { display: block; }

	.odhun-menu__liste {
		flex-direction: column;
		flex-wrap: nowrap;
		/* Masaüstünde satır düzeni için align-items:center var; dikey panelde
		   öğeleri ortalayıp ayraçları kısaltıyordu. */
		align-items: stretch;
		text-align: left;
		gap: 0;
		padding: var(--bosluk-2) 0;
		font-size: 0.98rem;
	}
	.odhun-menu__liste li { white-space: nowrap; }
	.odhun-menu__liste li + li { border-top: 1px solid var(--renk-cizgi); }
	.odhun-menu__liste a {
		display: block;
		/* Parmakla basılacak: 44px'lik dokunma hedefi. */
		padding: 13px var(--bosluk-5);
	}
	.odhun-menu__liste li.is-aktif a,
	.odhun-menu__liste li.current-menu-item a {
		background: var(--renk-kagit);
		font-weight: 700;
	}

	.odhun-baslik__sag {
		order: 1;
		flex: 0 0 auto;
		margin-left: auto;
		margin-right: var(--bosluk-2);
		gap: var(--bosluk-2);
	}
	.odhun-baslik__telefon { padding: 9px 13px; font-size: 0.85rem; }

	/* Dil seçici dar ekranda başlığı şişiriyor; diller altbilgide de var. */
	.odhun-dil-secici { display: none; }
}

.odhun-alt-bilgi {
	border-top: 1px solid var(--renk-cizgi);
	margin-top: var(--bosluk-8);
	padding: var(--bosluk-6) 0;
	color: var(--renk-sessiz);
	font-size: 0.9rem;
}

.odhun-alt-bilgi__ic {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--bosluk-4);
}

.odhun-alt-bilgi__yasal { display: flex; gap: var(--bosluk-3); flex-wrap: wrap; }
.odhun-alt-bilgi__yasal a { text-decoration: underline; color: inherit; }
.odhun-alt-bilgi p { margin: 4px 0; }

.odhun-alt-bilgi__telif {
	border-top: 1px solid var(--renk-cizgi);
	margin-top: var(--bosluk-4);
	padding-top: var(--bosluk-3);
	text-align: center;
	font-size: 0.8rem;
	color: var(--renk-sessiz);
}
.odhun-alt-bilgi__telif a { color: inherit; text-decoration: underline; }

/* ---- Butonlar ---- */

.odhun-buton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: var(--radius-kontrol);
	font-family: var(--yazi-govde);
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
}

.odhun-buton--birincil {
	background: var(--renk-deniz);
	color: #fff;
}
.odhun-buton--birincil:hover { background: var(--renk-deniz-acik); }

.odhun-buton--ikincil {
	background: transparent;
	color: var(--renk-deniz);
	border-color: var(--renk-deniz);
}
.odhun-buton--ikincil:hover { background: var(--renk-kagit); }

/* Hap varyantı: hero kategori butonları ve benzeri "etiket" hissi verenler. */
.odhun-buton--hap { border-radius: var(--radius-hap); }

.odhun-buton-metin {
	background: none;
	border: none;
	color: var(--renk-deniz);
	text-decoration: underline;
	cursor: pointer;
	font-size: 0.9rem;
	padding: 4px 0;
}

/* ---- Form kontrolleri ---- */

.odhun-filtre-form select,
.odhun-filtre-form input[type="text"],
.odhun-filtre-form input[type="search"],
.odhun-filtre-form input[type="number"],
.odhun-sonuc-arac-cubugu select {
	width: 100%;
	min-height: 40px;
	padding: 0 10px;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kontrol);
	background: var(--renk-yuzey);
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--renk-murekkep);
}

.odhun-radio-grubu, .odhun-checkbox-grubu {
	display: flex;
	flex-direction: column;
	gap: var(--bosluk-2);
}

/* 6'dan fazla seçenekli alanlar (Oda Sayısı, Bina Yaşı, Bulunduğu Kat...)
   sabit yükseklikte kaydırmalı kutuda gösterilir — srcgayrimenkul.com
   referansındaki gibi, sayfayı aşağı doğru uzatan bir duvar yerine. */
.odhun-checkbox-grubu--kaydirmali {
	max-height: 160px;
	overflow-y: auto;
	padding-right: 4px;
	scrollbar-gutter: stable;
}

.odhun-radio, .odhun-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	cursor: pointer;
}

.odhun-aralik-grubu {
	display: flex;
	align-items: center;
	gap: var(--bosluk-2);
}
.odhun-aralik-grubu input { flex: 1; min-width: 0; }

/* Hazır fiyat aralığı butonları: iki boş kutu yerine tek tıkla daraltma. */
.odhun-hizli-aralik {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--bosluk-2);
}
.odhun-hizli-aralik__dugme {
	padding: 6px 11px;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-hap);
	background: var(--renk-yuzey);
	color: var(--renk-murekkep);
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.odhun-hizli-aralik__dugme:hover { border-color: var(--renk-deniz); color: var(--renk-deniz); }
.odhun-hizli-aralik__dugme.is-aktif {
	background: var(--renk-deniz);
	border-color: var(--renk-deniz);
	color: #fff;
}

/* "Fiyatı düşenler" gibi tek başına duran, dikkat çekmesi gereken onay kutusu. */
.odhun-checkbox--vurgulu {
	margin-top: var(--bosluk-3);
	padding-top: var(--bosluk-3);
	border-top: 1px solid var(--renk-cizgi);
	font-weight: 600;
	color: var(--renk-fiyat);
}

/* Serbest metin kutusu: akordiyonların üstünde, daima açık. */
.odhun-filtre-arama {
	padding: var(--bosluk-4);
	border-bottom: 1px solid var(--renk-cizgi);
}
.odhun-filtre-arama input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
}

/* ---- Filtre paneli: akordiyon bloklar (referans tasarım) ---- */

.odhun-filtre-form {
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kart);
	background: var(--renk-yuzey);
	overflow: hidden;
	box-shadow: var(--golge-1);
}

.odhun-filtre-baslik {
	padding: var(--bosluk-4);
	border-bottom: 1px solid var(--renk-cizgi);
}
.odhun-filtre-baslik h2 {
	font-family: var(--yazi-govde);
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 var(--bosluk-3);
}

.odhun-tip-listesi { display: flex; flex-direction: column; gap: 2px; }
.odhun-tip-oge {
	display: block;
	padding: 6px 0;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--renk-deniz);
	cursor: pointer;
}
/* Radyo görünmez: görünüm bağlantı gibi, ama form GET ile çalışsın diye
   gerçek bir <input type="radio"> korunuyor. */
.odhun-tip-oge input { position: absolute; opacity: 0; width: 0; height: 0; }
.odhun-tip-oge:hover { text-decoration: underline; }
.odhun-tip-oge.is-aktif {
	color: var(--renk-murekkep);
	font-weight: 700;
	text-decoration: underline;
}

.odhun-filtre-blok {
	border: none;
	border-bottom: 1px solid var(--renk-cizgi);
	padding: 0;
	margin: 0;
}
.odhun-filtre-blok > summary {
	list-style: none;
	cursor: pointer;
	padding: var(--bosluk-3) var(--bosluk-4);
	font-weight: 700;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	user-select: none;
}
.odhun-filtre-blok > summary::-webkit-details-marker { display: none; }
.odhun-filtre-blok > summary::after {
	content: '⌄';
	font-size: 1.1rem;
	line-height: 1;
	color: var(--renk-sessiz);
	transition: transform 150ms ease;
}
.odhun-filtre-blok[open] > summary::after { transform: rotate(180deg); }
.odhun-filtre-blok > summary:hover { background: var(--renk-kagit); }

.odhun-filtre-blok__govde {
	padding: 0 var(--bosluk-4) var(--bosluk-4);
	display: flex;
	flex-direction: column;
	gap: var(--bosluk-2);
}

.odhun-konum-temizle {
	background: none;
	border: none;
	color: var(--renk-fiyat);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 0;
	text-align: center;
}
.odhun-konum-temizle:hover { text-decoration: underline; }

.odhun-filtre-blok legend {
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0 0 var(--bosluk-2);
	width: 100%;
}
.odhun-ozellik-grup-adi {
	font-size: 0.8rem;
	color: var(--renk-sessiz);
	margin: var(--bosluk-3) 0 var(--bosluk-1);
}

.odhun-filtre-gonder {
	width: 100%;
	margin: 0;
	border-radius: 0;
	min-height: 48px;
}

/* ---- İlan Kartı ---- */

.odhun-ilan-kart {
	display: flex;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kart);
	overflow: hidden;
	background: var(--renk-yuzey);
	box-shadow: var(--golge-1);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.odhun-ilan-kart:hover {
	transform: translateY(-3px);
	box-shadow: var(--golge-3);
}

.odhun-ilan-kart__foto {
	position: relative;
	flex: 0 0 280px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--renk-cizgi);
}
.odhun-ilan-kart__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 200ms ease;
}
.odhun-ilan-kart:hover .odhun-ilan-kart__foto img { transform: scale(1.04); }
/* Karusel rayındaki fotoğraflar büyütülmez: scroll-snap konumunu kaydırıp
   aktif kareyi yanlış gösteriyor. */
.odhun-ilan-kart:hover .odhun-ilan-kart__foto--karusel img { transform: none; }

/* Sol üst yığın: durum bandı / rozet ve altında indirim. */
.odhun-ilan-kart__sol-ust {
	position: absolute;
	left: 8px;
	top: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	max-width: calc(100% - 56px);
}

.odhun-ilan-kart__bant {
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--radius-hap);
	background: var(--renk-fiyat);
}
.odhun-ilan-kart__bant--rezerve { background: var(--renk-kale); color: var(--renk-murekkep); }

/* Rozetler (admin ilan formundan seçilir). Durum bandı varsa rozet basılmaz —
   ikisi kartın aynı köşesini paylaşıyor. */
.odhun-ilan-kart__bant--one_cikan { background: var(--renk-fiyat); }
.odhun-ilan-kart__bant--firsat    { background: var(--renk-fiyat); }
.odhun-ilan-kart__bant--yeni      { background: var(--renk-deniz); }
.odhun-ilan-kart__bant--acil      { background: var(--renk-murekkep); }

.odhun-ilan-kart__icerik {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
	padding: var(--bosluk-4);
}

.odhun-ilan-kart__baslik {
	font-family: var(--yazi-govde);
	/* Referans kartlarda başlık ağır değil: 500 ağırlık, normal punto.
	   800'lük başlık + 800'lük fiyat aynı anda bağırınca hiçbiri okunmuyordu. */
	font-weight: 400;
	font-size: 0.98rem;
	line-height: 1.4;
	color: var(--renk-murekkep);
	margin: 0;
	/* Serbest metin başlıklar uzun olabiliyor; kart yüksekliği sabit kalsın. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Konum: "Mersin • Anamur". Sessiz gri, başlığın hemen altında. */
.odhun-ilan-kart__konum {
	margin: 0;
	color: var(--renk-sessiz);
	font-size: 0.85rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Alt meta satırı: solda oda · m², sağda ilan tarihi. */
.odhun-ilan-kart__meta {
	margin-top: auto;
	padding-top: var(--bosluk-2);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bosluk-3);
	font-size: 0.85rem;
	color: var(--renk-sessiz);
	font-variant-numeric: tabular-nums;
}
.odhun-ilan-kart__ozellik {
	color: var(--renk-murekkep);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Kart fotoğraf karuseli ----
   Kaydırma CSS scroll-snap ile: dokunmatik kaydırma ve ivme tarayıcıdan gelir,
   JS yalnızca okları ve noktaları yönetir (assets/js/karusel.js). JS yüklenmese
   bile fotoğraflar parmakla kaydırılabilir kalır. */

.odhun-karusel__ray {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.odhun-karusel__ray::-webkit-scrollbar { display: none; }

.odhun-karusel__ray img {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	scroll-snap-align: center;
}

.odhun-karusel__ok {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--renk-murekkep);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	/* Parmakla kaydırma birincil hareket; oklar yalnızca imleç yaklaşınca. */
	opacity: 0;
	transition: opacity 0.15s ease, background-color 0.15s ease;
	box-shadow: 0 1px 4px rgba(20, 32, 31, 0.25);
}
.odhun-karusel__ok--sol { left: 8px; }
.odhun-karusel__ok--sag { right: 8px; }
.odhun-ilan-kart:hover .odhun-karusel__ok { opacity: 1; }
.odhun-karusel__ok:hover { background: #fff; }
.odhun-karusel__ok:focus-visible { opacity: 1; }

/* Dokunmatik cihazda hover yok — oklar hep görünür ama daha silik. Parmakla
   basılacakları için 30px yerine 38px: 30x30 dokunma hedefi çok küçüktü. */
@media (hover: none) {
	/* Parmakla kaydırma zaten çalışıyor; oklar tür rozetinin üstüne binip
	   kartı kalabalıklaştırıyordu. */
	.odhun-karusel__ok { display: none; }
}

.odhun-karusel__noktalar {
	position: absolute;
	left: 0;
	right: 0;
	/* Fiyat perdesinin üstünde: eskiden 8px'teydi ve fiyatın arkasında kalıyordu. */
	bottom: 72px;
	z-index: 1;
	display: flex;
	justify-content: center;
	gap: 5px;
	pointer-events: none;
}
.odhun-karusel__nokta {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	transition: background-color 0.15s ease, transform 0.15s ease;
	box-shadow: 0 0 2px rgba(20, 32, 31, 0.4);
}
.odhun-karusel__nokta.is-aktif {
	background: #fff;
	transform: scale(1.35);
}

/* İndirim rozeti fotoğrafın SAĞ üstünde — sol üst durum bandı/rozet için ayrılmış. */
/* İndirim rozeti sol üst yığında, durum bandının altında akar — sağ üst
   köşe artık favori/karşılaştır butonlarının. */
.odhun-ilan-kart__indirim {
	background: var(--renk-fiyat);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: var(--radius-hap);
	letter-spacing: 0.01em;
}

/* Üstü çizili eski fiyat — indirim görünür olsun. */
.odhun-ilan-kart__eski-fiyat {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: line-through;
	letter-spacing: 0;
}

/* Danışman satırı: kartın altında ince şerit, ilana girmeden arama için. */
.odhun-ilan-kart__danisman {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--bosluk-3);
	padding-top: var(--bosluk-3);
	border-top: 1px solid var(--renk-cizgi);
	font-size: 0.82rem;
	color: var(--renk-sessiz);
}
.odhun-ilan-kart__danisman img {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.odhun-ilan-kart__danisman-ad {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.odhun-ilan-kart__ara {
	flex-shrink: 0;
	padding: 5px 12px;
	border: 1px solid var(--renk-deniz);
	border-radius: var(--radius-hap);
	color: var(--renk-deniz);
	font-weight: 700;
	font-size: 0.78rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.odhun-ilan-kart__ara:hover { background: var(--renk-deniz); color: #fff; }

/* İlan tarihi konumun sağında, ondan bir tık daha soluk (ana sayfadaki
   meta satırının sağ ucunda. */
.odhun-ilan-kart__tarih {
	flex: 0 0 auto;
	font-size: 0.82rem;
	white-space: nowrap;
}

.odhun-ilan-kart__aciklama {
	margin: 4px 0 0;
	color: var(--renk-sessiz);
	font-size: 0.85rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Fotoğraf üstündeki özet: tür rozeti + fiyat ----
   Referans kartların en belirleyici parçası. Fiyat gövdenin içindeyken
   başlık, konum ve danışman satırıyla yarışıyordu; buraya alınca kart
   tarandığında ilk okunan şey oluyor. Alttan yukarı koyu perde, açık
   fotoğraflarda beyaz yazının okunmasını garantiler. */

.odhun-ilan-kart__ozet-kutu {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 34px 12px 10px;
	background: linear-gradient(to top, rgba(12, 20, 19, 0.82) 0%, rgba(12, 20, 19, 0.45) 45%, rgba(12, 20, 19, 0) 100%);
	pointer-events: none;
}

.odhun-ilan-kart__tur {
	max-width: 100%;
	padding: 4px 10px;
	border-radius: var(--radius-kontrol);
	background: rgba(12, 20, 19, 0.78);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.odhun-ilan-kart__fiyat {
	margin: 0;
	font-weight: 700;
	/* Dar ekranda iki sütunlu ızgarada 1,35rem "3.629.000 / TL" diye
	   bölünüyordu; kart genişliğine göre küçülsün ama asla sarmasın. */
	font-size: clamp(1.05rem, 4.4vw, 1.35rem);
	line-height: 1.15;
	white-space: nowrap;
	color: #fff;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Favori/karşılaştır fotoğrafın sağ üstünde, yuvarlak. */
.odhun-ilan-kart__eylemler {
	position: absolute;
	right: 8px;
	top: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
}
.odhun-ilan-kart__eylemler .odhun-favori-butonu,
.odhun-ilan-kart__eylemler .odhun-karsilastir-butonu {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(2px);
}
.odhun-ilan-kart__eylemler .odhun-ikon { width: 18px; height: 18px; }

.odhun-favori-butonu, .odhun-karsilastir-butonu {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--renk-cizgi);
	background: var(--renk-yuzey);
	color: var(--renk-murekkep);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.odhun-favori-butonu:hover, .odhun-karsilastir-butonu:hover {
	border-color: var(--renk-deniz);
	transform: scale(1.06);
}
.odhun-favori-butonu.is-aktif {
	background: var(--renk-fiyat);
	border-color: var(--renk-fiyat);
	color: #fff;
}
.odhun-karsilastir-butonu.is-aktif {
	background: var(--renk-deniz);
	border-color: var(--renk-deniz);
	color: #fff;
}

/* Butonların içindeki SVG: metin karakteri (♡/⇄) yerine tema içinde çizilen
   ikon. Boyut yazı tipinden bağımsız, her ekranda net. */
.odhun-favori-butonu .odhun-ikon,
.odhun-karsilastir-butonu .odhun-ikon {
	width: 20px;
	height: 20px;
	stroke-width: 1.7;
}

/* Dolu/boş kalp aynı butonun içinde durur; hangisinin görüneceğine
   .is-aktif karar verir (favoriler.js yalnızca sınıfı değiştirir). */
.odhun-ikon-ikili { display: inline-flex; }
.odhun-favori-butonu .odhun-ikon--dolu { display: none; }
.odhun-favori-butonu.is-aktif .odhun-ikon--bos { display: none; }
.odhun-favori-butonu.is-aktif .odhun-ikon--dolu { display: block; }

/* Metinli varyant (ilan detayı): yuvarlak değil hap, etiketiyle birlikte. */
.odhun-favori-butonu--metinli,
.odhun-karsilastir-butonu--metinli {
	width: auto;
	height: auto;
	min-height: 40px;
	padding: 0 16px;
	gap: 7px;
	border-radius: var(--radius-hap);
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
}
.odhun-favori-butonu--metinli .odhun-ikon,
.odhun-karsilastir-butonu--metinli .odhun-ikon { width: 19px; height: 19px; }

/* Başlıktaki Favorilerim / Karşılaştır ikon bağlantıları. İçerik menüsünde
   değiller: yardımcı sayfalar menüyü şişirip telefon butonunu alt satıra
   itiyordu. Sayaç localStorage'dan JS ile dolar. */
.odhun-baslik__listeler {
	display: flex;
	align-items: center;
	gap: var(--bosluk-2);
}

.odhun-baslik__liste-baglantisi {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kontrol);
	background: var(--renk-yuzey);
	color: var(--renk-murekkep);
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* İkon metin karakteri değil SVG: her ekranda aynı boyda ve net. */
.odhun-baslik__liste-baglantisi .odhun-ikon {
	width: 21px;
	height: 21px;
	stroke-width: 1.7;
}
.odhun-baslik__liste-baglantisi:hover { border-color: var(--renk-deniz); }
.odhun-baslik__liste-baglantisi:hover,
.odhun-baslik__liste-baglantisi.is-aktif {
	background: rgba(14, 82, 89, 0.08);
	background: color-mix(in srgb, var(--renk-deniz) 10%, transparent);
	border-color: var(--renk-deniz);
	color: var(--renk-deniz);
}
@supports not (background: color-mix(in srgb, #000 8%, transparent)) {
	.odhun-baslik__liste-baglantisi:hover,
	.odhun-baslik__liste-baglantisi.is-aktif { background: var(--renk-kagit); }
}

/* Sayaç düğmenin sağ üst köşesinden hafifçe taşar — ikonun üstünü kapatmasın. */
.odhun-baslik__liste-baglantisi .odhun-menu__sayac {
	position: absolute;
	top: -6px;
	right: -6px;
	margin-left: 0;
	border: 2px solid var(--renk-yuzey);
	min-width: 20px;
	height: 20px;
}

/* Menüdeki favori/karşılaştır sayacı. */
.odhun-menu__sayac {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	margin-left: 5px;
	padding: 0 5px;
	border-radius: var(--radius-hap);
	background: var(--renk-fiyat);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1;
	vertical-align: 1px;
}
.odhun-menu__sayac[hidden] { display: none; }

@media (max-width: 640px) {
	.odhun-ilan-kart { flex-direction: column; }
	.odhun-ilan-kart__foto { flex-basis: auto; }
}

/* Izgara görünümünde kartlar dikey (bkz. .odhun-ilan-listesi[data-gorunum="izgara"]) */
.odhun-ilan-listesi[data-gorunum="izgara"] .odhun-ilan-kart {
	flex-direction: column;
}
.odhun-ilan-listesi[data-gorunum="izgara"] .odhun-ilan-kart__foto {
	flex-basis: auto;
}

/* ---- Aktif filtre etiketleri ---- */

.odhun-aktif-filtreler {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bosluk-2);
	margin-bottom: var(--bosluk-4);
}
.odhun-aktif-filtreler[hidden] { display: none; }

.odhun-etiket {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--renk-kale);
	color: var(--renk-murekkep);
	border-radius: var(--radius-hap);
	padding: 5px 8px 5px 13px;
	font-size: 0.85rem;
	font-weight: 600;
}
.odhun-etiket-kaldir {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	color: inherit;
	padding: 0 4px;
}

/* ---- Boş sonuç ---- */

.odhun-bos-sonuc {
	padding: var(--bosluk-7) var(--bosluk-4);
	text-align: center;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kart);
	background: var(--renk-yuzey);
}
.odhun-bos-sonuc__baslik { font-weight: 700; margin: 0 0 var(--bosluk-2); }
.odhun-bos-sonuc__metin { color: var(--renk-sessiz); margin: 0; }

/* ---- Genel içerik sayfaları (Hakkımızda, KVKK, İletişim vb.) ---- */

.odhun-icerik { padding-block: var(--bosluk-6) var(--bosluk-8); }
/* Uzun metin sayfalarında satır uzunluğu okunabilir sınırda tutulur. Blok
   ortalanmıyor: başlıklar bazı şablonlarda kapsayıcının doğrudan çocuğu
   değil, ortalayınca başlık solda metin ortada kalıp hizasızlık yapıyordu. */
.odhun-sayfa-govde { max-width: 70ch; }
.odhun-sayfa-govde img { border-radius: var(--radius-kart); margin: var(--bosluk-3) 0; }

.odhun-iletisim-sayfa { padding-block: var(--bosluk-6) var(--bosluk-8); }
.odhun-iletisim-sayfa__izgara {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bosluk-6);
	align-items: start;
}
.odhun-iletisim-bilgi p { margin: 0 0 var(--bosluk-3); }
.odhun-sosyal-medya { display: flex; gap: var(--bosluk-3); margin: var(--bosluk-3) 0; }
.odhun-sosyal-medya a { color: var(--renk-deniz); font-weight: 700; text-decoration: none; }

@media (max-width: 768px) {
	.odhun-iletisim-sayfa__izgara { grid-template-columns: 1fr; }
}

/* ---- Bölge landing sayfaları ---- */

.odhun-bolge-sayfasi__giris {
	max-width: 70ch;
	color: var(--renk-sessiz);
	margin: var(--bosluk-2) 0 var(--bosluk-5);
}

/* ---- Hesaplama araçları ---- */

.odhun-hesaplama-izgara {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bosluk-6);
	margin-top: var(--bosluk-5);
}

@media (max-width: 768px) {
	.odhun-hesaplama-izgara { grid-template-columns: 1fr; }
}

.odhun-hesaplama-kart {
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kart);
	background: var(--renk-yuzey);
	padding: var(--bosluk-5);
	box-shadow: var(--golge-1);
}

.odhun-hesaplama-form .odhun-satir { margin-bottom: var(--bosluk-3); }
.odhun-hesaplama-form label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 4px; }
.odhun-hesaplama-form input {
	width: 100%;
	min-height: 40px;
	padding: 0 10px;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kontrol);
	font-family: inherit;
	font-size: 0.95rem;
}

.odhun-hesaplama-sonuc {
	margin: var(--bosluk-4) 0 0;
	padding-top: var(--bosluk-4);
	border-top: 1px solid var(--renk-cizgi);
	display: flex;
	flex-direction: column;
	gap: var(--bosluk-2);
}
.odhun-hesaplama-sonuc > div { display: flex; justify-content: space-between; gap: var(--bosluk-3); }
.odhun-hesaplama-sonuc dt { color: var(--renk-sessiz); font-size: 0.9rem; }
.odhun-hesaplama-sonuc dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.odhun-hesaplama-not { margin-top: var(--bosluk-3); color: var(--renk-sessiz); font-size: 0.85rem; }

/* ---- 404 sayfası ---- */

.odhun-404-sayfasi { max-width: 560px; }

.odhun-404-arama {
	display: flex;
	gap: var(--bosluk-2);
	margin: var(--bosluk-5) 0;
}
.odhun-404-arama input[type="search"] {
	flex: 1;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kontrol);
	font-size: 0.95rem;
}

.odhun-404-populer { margin: var(--bosluk-6) 0; }
.odhun-404-populer h2 { font-size: 1.1rem; margin-bottom: var(--bosluk-3); }
.odhun-404-populer__liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bosluk-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.odhun-404-populer__liste a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kontrol);
	text-decoration: none;
	color: inherit;
}
.odhun-404-populer__sayi { color: var(--renk-sessiz); font-size: 0.85rem; }

.odhun-404-geri-don { margin-top: var(--bosluk-5); }

/* ---- Çerez bandı ---- */

.odhun-alt-bilgi__cerez-buton {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	font-size: inherit;
	font-family: inherit;
}

.odhun-cerez-bandi {
	position: fixed;
	left: var(--bosluk-4);
	right: var(--bosluk-4);
	bottom: var(--bosluk-4);
	z-index: 1000;
	max-width: 640px;
	margin: 0 auto;
	background: var(--renk-murekkep);
	color: #fff;
	border-radius: var(--radius-kontrol);
	padding: var(--bosluk-4);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bosluk-3);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.odhun-cerez-bandi[hidden] { display: none; }

.odhun-cerez-bandi__metin { margin: 0; flex: 1 1 260px; font-size: 0.9rem; }
.odhun-cerez-bandi__metin a { color: inherit; text-decoration: underline; }

.odhun-cerez-bandi__butonlar { display: flex; gap: var(--bosluk-2); flex-shrink: 0; }
.odhun-cerez-bandi__butonlar .odhun-buton--ikincil { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.odhun-cerez-bandi__butonlar .odhun-buton--ikincil:hover { background: rgba(255, 255, 255, 0.1); }

/* ---- PWA: ana ekrana ekle bildirimleri ---- */

.odhun-pwa-bildirim {
	position: fixed;
	left: var(--bosluk-4);
	right: var(--bosluk-4);
	bottom: var(--bosluk-4);
	z-index: 999;
	max-width: 420px;
	margin: 0 auto;
	background: var(--renk-yuzey);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-kontrol);
	padding: var(--bosluk-3) var(--bosluk-4);
	display: flex;
	align-items: center;
	gap: var(--bosluk-3);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.odhun-pwa-bildirim span { flex: 1; font-size: 0.9rem; }
.odhun-pwa-bildirim__kapat {
	background: none;
	border: none;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	color: var(--renk-sessiz);
	padding: 4px;
}

.odhun-pwa-modal {
	position: fixed;
	inset: 0;
	z-index: 1001;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.odhun-pwa-modal__kutu {
	position: relative;
	background: var(--renk-yuzey);
	width: 100%;
	max-width: 480px;
	border-radius: var(--radius-kontrol) var(--radius-kontrol) 0 0;
	padding: var(--bosluk-6) var(--bosluk-5) var(--bosluk-5);
}
.odhun-pwa-modal__kutu h2 { margin: 0 0 var(--bosluk-3); font-size: 1.1rem; }
.odhun-pwa-modal__kutu p { margin: 0 0 var(--bosluk-2); color: var(--renk-sessiz); }
.odhun-pwa-modal__kapat {
	position: absolute;
	top: var(--bosluk-3);
	right: var(--bosluk-3);
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

/* ---- Kaydırınca beliren bölümler ---- */

.odhun-animasyon {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.odhun-animasyon.is-gorunur { opacity: 1; transform: none; }
/* Gecikme kademesi: yan yana kartlar sırayla girsin. */
.odhun-animasyon[data-gecikme="1"] { transition-delay: 0.08s; }
.odhun-animasyon[data-gecikme="2"] { transition-delay: 0.16s; }

/* JS yoksa içerik gizli kalmasın: script yüklenince html'e sınıf eklenmiyor,
   bu yüzden animasyon yalnızca IntersectionObserver destekli tarayıcılarda
   çalışır ve animasyon.js her koşulda is-gorunur ekler. Hareket azaltma
   tercihinde geçiş tamamen kapanır. */
@media (prefers-reduced-motion: reduce) {
	.odhun-animasyon { opacity: 1; transform: none; transition: none; }
	.odhun-hizmet-kart:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.odhun-ilan-kart:hover .odhun-ilan-kart__foto img,
	.odhun-blog-kart:hover .odhun-blog-kart__foto img { transform: none; }
	.odhun-blog-kart:hover, .odhun-ilan-kart:hover { transform: none; }
}

/* ---- Dokunmatik: form kontrolleri 16px ----
   iOS Safari, 16px'ten küçük yazı tipli bir alana odaklanınca sayfayı ZORLA
   yakınlaştırıyor; kullanıcı her filtre denemesinde geri uzaklaştırmak zorunda
   kalıyordu. Filtre panelinde 100'den fazla kontrol var, hepsi 15,2px'ti.

   Bu blok dosyanın SONUNDA: yukarıdaki `.odhun-filtre-form input[type="text"]`
   kuralları aynı özgüllükte, sırayla kazanılıyor. */

@media (max-width: 820px) {
	.odhun-filtre-form select,
	.odhun-filtre-form input[type="text"],
	.odhun-filtre-form input[type="search"],
	.odhun-filtre-form input[type="number"],
	.odhun-sonuc-arac-cubugu select,
	.odhun-hero__arama input,
	.odhun-form input[type="text"],
	.odhun-form input[type="tel"],
	.odhun-form input[type="email"],
	.odhun-form textarea {
		font-size: 16px;
	}

	/* Onay kutusu/radyo parmakla seçilebilsin (13x13'tü). */
	.odhun-filtre-form input[type="checkbox"],
	.odhun-filtre-form input[type="radio"] {
		width: 20px;
		height: 20px;
		flex: 0 0 auto;
	}

	/* Satırın tamamı dokunma hedefi olsun. */
	.odhun-checkbox-grubu label,
	.odhun-radio-grubu label,
	.odhun-tip-listesi .odhun-tip-oge {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 40px;
		font-size: 0.95rem;
	}

	/* Hızlı fiyat aralığı düğmeleri 28px yüksekliğindeydi. */
	.odhun-hizli-aralik__dugme { min-height: 40px; }
	.odhun-konum-temizle { min-height: 40px; }
}