/*
 * FirstHandAds - arama/listeleme sayfası stilleri.
 * Renk paleti, orijinal firsthandads.com sitesinin canlı tema renkleriyle
 * eşleşecek şekilde ayarlandı (--fha-accent: #1e73be mavi, yeşil vurgu
 * arama/CTA butonlarında).
 *
 * Tasarım denetimi (Ağustos 2026 - musa'nın isteği): ana CTA butonu
 * ("+ Post Ad" / .fha-btn-primary ve mobildeki sticky CTA) eskiden yeşil
 * degrade kullanıyordu -- yeşil, ilan/classifieds sitelerinde "güven"
 * hissi vermiyor (daha çok "onay/başarı" anlamına geliyor, WhatsApp'ı
 * çağrıştırıyor). Artık sitenin zaten kullandığı --fha-accent mavisi
 * (link, aktif menü, rozet vb. her yerde AYNI mavi) kullanılıyor -- hem
 * "güven veren" bir renk (banka/kurumsal sitelerde en çok bu yüzden
 * tercih edilir) hem de artık marka rengiyle tam tutarlı. --fha-green-*
 * değişkenleri SİLİNMEDİ -- WhatsApp iletişim butonu (.fha-contact-btn-
 * whatsapp) ve sohbet balonları BİLEREK yeşil kaldı, o ikisi zaten
 * WhatsApp'ın kendi marka rengiyle eşleşmesi gerektiği için yeşil.
 */

:root {
	--fha-accent: #1e73be;
	--fha-accent-dark: #185a94;
	--fha-green-1: #25d366;
	--fha-green-2: #1ebe57;
	--fha-green-3: #128c7e;
	--fha-contrast: #222222;
	--fha-contrast-2: #575760;
	--fha-contrast-3: #b2b2be;
	/* Erişilebilirlik denetimi (2026-08-25, musa'nın Lighthouse raporu --
	 * "Arka plan ve ön plan renkleri yeterli kontrast oranına sahip
	 * değil"): --fha-contrast-3 (#b2b2be) beyaz/açık zemin üzerinde
	 * sadece ~2.1:1 kontrasta sahip -- WCAG AA'nın küçük metin için
	 * istediği 4.5:1'in çok altında (kartlardaki "Posted X days ago",
	 * mesaj saatleri, kategori alt-etiketleri gibi 10-12px METİNLERDE
	 * kullanılıyordu, bunlar okunması ZOR). --fha-contrast-3'ü OLDUĞU
	 * GİBİ bıraktım çünkü aynı zamanda METİN OLMAYAN yerlerde de
	 * kullanılıyor (buton hover zemini, dashed border rengi vb. -- bunlar
	 * WCAG metin kontrastı kuralına tabi değil, gereksiz yere
	 * değiştirmek istemedim). Bunun yerine SADECE gerçek metin için
	 * kullanılacak, daha koyu, ayrı bir değişken ekledim.
	 */
	--fha-contrast-4: #717179;
	--fha-base: #f0f0f0;
	--fha-base-2: #f7f8f9;
	--fha-base-3: #ffffff;
	--fha-border: #e5e7eb;
}

* { box-sizing: border-box; }

body {
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	background: var(--fha-base-2);
	color: var(--fha-contrast);
	margin: 0;
}

a { color: var(--fha-accent); text-decoration: none; }
a:hover { color: var(--fha-accent-dark); }
.fha-underline { text-decoration: underline; }

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

.fha-topbar {
	background: var(--fha-base-3);
	border-bottom: 1px solid var(--fha-border);
}

@media (min-width: 769px) {
	/* Masaüstünde header'ı "yapışkan" yap -- ilanları aşağı kaydırırken
	   üstte sabit kalsın, hesap menüsü/"+ Post Ad" her zaman erişilebilir
	   olsun. Mobilde dokunmuyoruz (768px altında zaten ayrı bir "Filters"
	   popup butonu var, header sabitlenirse onunla üst üste biner). */
	.fha-topbar {
		position: sticky;
		top: 0;
		z-index: 200;
	}
}

.fha-topbar-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.fha-logo {
	font-size: 22px;
	font-weight: 800;
	color: var(--fha-contrast);
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.fha-logo-img {
	display: block;
	height: 48px;
	width: auto;
}

.fha-topbar-tagline {
	color: var(--fha-contrast-2);
	font-size: 13px;
}

/* Header'daki genel arama kutusu (eklentideki tema header'ındaki input ile
   aynı: name="q", tek başına -- kategori/konum/fiyat filtreleri YOK, sadece
   anahtar kelime. Aynı /?q=... adresine gönderir, ana sayfadaki arama
   kenar çubuğuyla BİREBİR aynı sonucu döner, kod tekrarı yok.) */
.fha-header-search {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	max-width: 420px;
	margin: 0 4px;
}
.fha-header-search .fha-input {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 999px 0 0 999px;
	border-right: none;
}
.fha-header-search .fha-input:focus { position: relative; z-index: 1; }
.fha-header-search-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 38px;
	border: 1px solid var(--fha-border);
	border-left: none;
	border-radius: 0 999px 999px 0;
	background: var(--fha-base-2);
	color: var(--fha-contrast-2);
	cursor: pointer;
}
.fha-header-search-btn:hover { color: var(--fha-accent); background: var(--fha-base); }

@media (max-width: 768px) {
	.fha-header-search {
		flex: 1 1 100%;
		max-width: none;
		margin: 8px 0 0;
	}
}

.fha-topnav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 18px;
}

.fha-topnav-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--fha-contrast);
	position: relative;
}
.fha-topnav-link:hover { color: var(--fha-accent); }

.fha-topnav-cta {
	padding: 8px 16px;
	font-size: 13px;
}

.fha-nav-badge {
	display: inline-block;
	min-width: 16px;
	padding: 1px 5px;
	margin-left: 4px;
	border-radius: 999px;
	background: var(--fha-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

@media (max-width: 768px) {
	.fha-topbar-inner { flex-wrap: wrap; }
	.fha-topbar-tagline { display: none; }
	/* Sıra: logo (satır 1) → arama kutusu (satır 2, hemen logonun altında,
	   büyük sitelerdeki gibi öne çıkarılmış) → hesap/menü linkleri (satır 3). */
	.fha-header-search { order: 2; }
	.fha-topnav {
		order: 3;
		margin-left: 0;
		width: 100%;
		gap: 14px;
		flex-wrap: wrap;
		/* Tam genişliğe yayılınca (satır kayınca) linkler varsayılan olarak
		   SOLA yapışıyordu -- istenen: mobilde de sağda kalsınlar. */
		justify-content: flex-end;
	}
}

/* ---------- Account dropdown (topnav, giriş yapıldıktan sonra) ---------- */

.fha-topnav-account {
	position: relative;
}

.fha-topnav-account-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	padding: 0;
}

.fha-topnav-account-name {
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fha-topnav-account-arrow {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--fha-contrast-2);
	transition: transform 0.15s ease;
}

.fha-topnav-account-trigger[aria-expanded="true"] .fha-topnav-account-arrow {
	transform: rotate(180deg);
}

.fha-topnav-account-trigger:hover .fha-topnav-account-name {
	color: var(--fha-accent);
}

.fha-topnav-account-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	/* Mobildeki "Filters" popup butonunun (z-index: 60, sticky) ARKASINDA
	   kalıp Favourites/Messages linklerinin altında gizlenmesin diye ondan
	   daha yüksek bir z-index. */
	z-index: 70;
	min-width: 190px;
	background: #fff;
	border: 1px solid var(--fha-border);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	padding: 6px;
	display: flex;
	flex-direction: column;
}

/* [hidden] attribute'u yukarıdaki "display: flex" tarafından eziliyordu
   (ikisi de aynı özgüllükte bir class selector, ama bizimki sonra geldiği
   için tarayıcının kendi [hidden] { display: none } kuralını geçersiz
   kılıyordu) -- menü JS ile "hidden" yapılsa bile görünür kalıyordu.
   Bunu açıkça ezmemiz gerekiyor. */
.fha-topnav-account-menu[hidden] {
	display: none;
}

.fha-topnav-account-menu-link {
	display: block;
	padding: 9px 12px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fha-contrast);
	text-decoration: none;
}

.fha-topnav-account-menu-link:hover {
	background: var(--fha-base-3);
	color: var(--fha-accent);
}

.fha-topnav-account-menu-divider {
	height: 1px;
	margin: 6px 4px;
	background: var(--fha-border);
}

@media (max-width: 768px) {
	.fha-topnav-account-menu { right: auto; left: 0; }
}

/* ---------- Page / layout ---------- */

.fha-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 20px;
}

.fha-page-title {
	font-size: 26px;
	margin: 0 0 20px;
	color: var(--fha-contrast);
}

.fha-layout {
	display: flex;
	gap: 30px;
	/* "stretch" (varsayılan) kasıtlı -- "flex-start" kullanırsak sidebar
	   (.fha-sidebar) kendi İÇERİĞİ kadar (yani arama formu kadar) kısa
	   kalıyor, bu da içindeki sticky #fha-sidebar-card'ın SADECE o kısa
	   aralıkta yapışık kalıp hemen ardından ilan listesiyle birlikte
	   kayıp gitmesine sebep oluyordu (35. maddede not almıştık). "stretch"
	   ile sidebar, yanındaki .fha-main (ilan listesi) ne kadar uzunsa o
	   kadar uzuyor -- sticky kart artık sayfanın en altına kadar takip
	   ediyor. #fha-sidebar-card'ın kendi arka planı/border'ı olduğu için
	   sidebar'ın geri kalan (görünmez) boşluğu hiçbir görsel fark yaratmıyor. */
	align-items: stretch;
}

.fha-sidebar { flex: 0 0 30%; max-width: 30%; }
.fha-main { flex: 1 1 70%; min-width: 0; }

@media (max-width: 860px) {
	.fha-layout { flex-direction: column; }
	.fha-sidebar, .fha-main { flex: 1 1 100%; max-width: 100%; }
}

/* ---------- Mobil filtre butonu + soldan açılan çekmece (sadece index.php) ----------
   WordPress/ACADP eklentisindeki "telefonda sadece liste görünümü kalır,
   arama filtresi bir butona döner" davranışının aynısı: 768px altında sol
   sidebar (arama formu) tamamen gizlenir, yerine sağ üstte küçük bir
   "Filters" butonu çıkar; tıklanınca aynı form (kopyası DEĞİL, gerçek DOM
   node'u -- JS ile taşınır) SOLDAN kayarak açılan bir çekmece (drawer)
   içinde açılır. Arka plan tamamen kapanmıyor -- yarı saydam bir karartma
   (backdrop) ile sayfanın geri kalanı (ilan listesi) hâlâ görünür kalıyor,
   karartılmış kısma dokununca da çekmece kapanıyor. Masaüstünde (768px
   üstü) bu buton/popup hiç görünmez, form her zamanki gibi sidebar'da durur. */

.fha-mobile-filter-toggle-wrap {
	display: none;
}

.fha-mobile-filter-modal[hidden] {
	display: none;
}

.fha-mobile-filter-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.fha-mobile-filter-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.46);
}

.fha-mobile-filter-modal__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(86vw, 360px);
	background: #fff;
	border-radius: 0 18px 18px 0;
	box-shadow: 20px 0 60px rgba(15, 23, 42, 0.18);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.24s ease;
}

.fha-mobile-filter-modal.is-open .fha-mobile-filter-modal__panel {
	transform: translateX(0);
}

.fha-mobile-filter-modal__floating-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.9);
	color: #fff;
	cursor: pointer;
}

.fha-mobile-filter-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 30px 16px 16px;
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	background: #f8fafc;
	border-radius: 0 18px 18px 0;
}

/* Form, popup'ın içindeyken sidebar'daki "sticky" konumlanması/gölgesi
   anlamsız kalıyor -- popup içinde normal (static) bir kart gibi dursun. */
.fha-mobile-filter-modal__body .fha-sidebar-card {
	position: static;
	top: auto;
	box-shadow: none;
}

/* Popup açıkken arka planın kaymasını engelle. */
body.fha-mobile-filter-open {
	overflow: hidden;
}

@media (max-width: 768px) {
	.fha-sidebar {
		display: none;
	}

	.fha-mobile-filter-toggle-wrap {
		position: sticky;
		top: 0;
		z-index: 60;
		display: flex;
		justify-content: flex-end;
		margin-bottom: -52px;
		pointer-events: none;
	}

	.fha-mobile-filter-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 42px;
		padding: 0 16px;
		border: 0;
		border-radius: 999px;
		background: linear-gradient(135deg, var(--fha-contrast) 0%, #1e293b 100%);
		color: #fff;
		font-size: 13px;
		font-weight: 700;
		box-shadow: 0 14px 30px rgba(15, 23, 42, 0.25);
		cursor: pointer;
		pointer-events: auto;
	}
}

/* ---------- Sidebar / search form ---------- */

.fha-sidebar-card {
	background: var(--fha-base-3);
	border: 1px solid var(--fha-border);
	border-radius: 10px;
	padding: 24px;
	position: sticky;
	/* Header artık kendisi de yapışkan (yaklaşık 69px yüksekliğinde) --
	   sidebar'ın "top" değeri onun ALTINDA dursun diye header yüksekliği +
	   20px boşluk. Yoksa kaydırınca sidebar sticky header'ın arkasına girip
	   üstten kırpılırdı. */
	top: 89px;
}

.fha-sidebar-title {
	font-size: 18px;
	margin: 0 0 18px;
}

.fha-form-group { margin-bottom: 16px; }

.fha-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--fha-contrast-2);
	margin-bottom: 6px;
}

/* Erişilebilirlik denetimi (2026-08-25): görsel olarak ihtiyaç olmayan ama
 * ekran okuyucular için gerekli <label>'lar burada kullanılıyor -- örn.
 * radius <input type="range"> ve sıralama <select>'i, yanlarında zaten
 * bağlamı açıklayan görünür metin (km etiketi, "Sort by" gerek yok çünkü
 * seçenekler kendini açıklıyor) olduğu için görsel bir <label>'a ihtiyaç
 * yok, ama <label for="..."> olmadan ekran okuyucu kullanıcıları için
 * kontrolün NE işe yaradığı hiç duyurulmuyordu (Lighthouse/axe
 * "Form elements do not have associated labels" uyarısı). Standart
 * "sr-only" örüntüsü: elemanı görsel olarak gizler ama ekran okuyucular
 * için DOM'da/erişilebilirlik ağacında tam olarak kalır.
 */
.fha-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fha-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--fha-border);
	border-radius: 8px;
	background: var(--fha-base-2);
	color: var(--fha-contrast);
	font-size: 14px;
}

.fha-input:focus {
	outline: none;
	border-color: var(--fha-green-1);
	box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.12);
}

.fha-price-row { display: flex; gap: 8px; }

/* SEO/arama denetimi: "yakınımda ara" (yarıçap) + birleştirilmiş
   "Location" arama kutusu -- bkz. index.php #fha-location-search +
   assets/js/location-search.js. */
.fha-radius-range-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; }
.fha-radius-range-row input[type="range"] { flex: 1; accent-color: var(--fha-green-3, #16a34a); }
#fha-radius-range-label { font-size: 12.5px; font-weight: 600; color: var(--fha-contrast-2); min-width: 52px; text-align: right; }
#fha-radius-use-location { width: 100%; justify-content: center; margin-top: 2px; }
#fha-radius-status { margin-top: 6px; min-height: 15px; }

/* SEO/arama denetimi (form UX birleştirmesi): paylaşılan "yer" otomatik
   tamamlama açılır listesi -- bkz. assets/js/place-autocomplete.js. Hem
   ilan formundaki Şehir kutusunda (#fha-city-suggestions) hem de ana
   sayfa arama kutusunda (#fha-location-suggestions) kullanılıyor. */
.fha-place-autocomplete-wrap { position: relative; }
.fha-place-suggestions {
	position: absolute;
	z-index: 40;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--fha-base-3);
	border: 1px solid var(--fha-border);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	max-height: 240px;
	overflow-y: auto;
}
.fha-place-suggestion {
	padding: 8px 14px;
	font-size: 13.5px;
	color: var(--fha-contrast);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fha-place-suggestion:hover,
.fha-place-suggestion.is-active {
	background: var(--fha-base-2);
	color: var(--fha-accent-dark);
}

.fha-button-row { display: flex; gap: 8px; margin-top: 20px; }

.fha-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	border: none;
	cursor: pointer;
	text-decoration: none;
}

.fha-btn-primary {
	background: linear-gradient(135deg, var(--fha-accent) 0%, var(--fha-accent-dark) 100%);
	color: #fff;
	box-shadow: 0 10px 22px rgba(30, 115, 190, 0.25);
}
.fha-btn-primary:hover { color: #fff; opacity: .92; }

.fha-btn-secondary {
	background: var(--fha-base);
	color: var(--fha-contrast);
}
.fha-btn-secondary:hover { color: var(--fha-contrast); background: var(--fha-contrast-3); }

.fha-btn-ghost {
	background: transparent;
	color: var(--fha-contrast-2);
	border: 1px solid var(--fha-border);
}
.fha-btn-ghost:hover { color: var(--fha-contrast); background: var(--fha-base-2); }

/* ---------- Results header ---------- */

.fha-results-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.fha-results-count { color: var(--fha-contrast-2); }

.fha-sort-form { margin: 0; }
.fha-sort-select { width: auto; min-width: 220px; }

/* ---------- Listing cards (list view) ---------- */

.fha-listing-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.fha-card {
	background: var(--fha-base-3);
	border: 1px solid var(--fha-border);
	border-radius: 10px;
	padding: 16px;
	display: flex;
	gap: 16px;
	position: relative;
}

.fha-card.is-featured {
	border-color: var(--fha-accent);
	box-shadow: 0 0 0 1px var(--fha-accent);
}

.fha-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--fha-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	z-index: 1;
}

/* Birden fazla rozet (New/Featured/Sold) aynı köşede yan yana dizilsin diye
   her rozet kendi konumuna göre sağa doğru kayar. */
.fha-badge + .fha-badge { left: auto; right: 8px; }
.fha-badge + .fha-badge + .fha-badge { top: 34px; left: 8px; right: auto; }

.fha-badge-sold { background: #6b7280; }
.fha-badge-featured { background: var(--fha-accent); }
.fha-badge-new { background: #0a7d32; }

.fha-card-image {
	flex: 0 0 33%;
	max-width: 33%;
	display: block;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 16/9;
	/* Orijinal ACADP eklentisindeki gerçek davranış (public.css):
	   .acadp-listings .acadp-card .acadp-image img { object-fit: cover; }
	   -- yanlarda/üstte-altta BOŞLUK YOK, fotoğraf kutuyu tam dolduruyor.
	   background sadece resim yüklenene kadar (veya resim yoksa) görünür. */
	background: var(--fha-base);
}

.fha-card-image img {
	width: 100%;
	height: 100%;
	/* Orijinal eklenti gibi "cover": fotoğraf kutuyu kırpılarak dolduruyor,
	   yanlarda boşluk kalmıyor (bkz. yukarıdaki not). */
	object-fit: cover;
	display: block;
}

.fha-card-image-placeholder {
	width: 100%;
	height: 100%;
	background: var(--fha-base);
}

.fha-card-content {
	flex: 1 1 67%;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fha-card-title-row { display: flex; justify-content: space-between; align-items: baseline; }
.fha-card-title { font-size: 20px; font-weight: 700; color: var(--fha-contrast); }
.fha-card-title:hover { color: var(--fha-accent); }

.fha-card-meta-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--fha-contrast-2);
}
/* Erişilebilirlik denetimi (2026-08-26 - Lighthouse "Touch targets don't
   have sufficient size or spacing"): kategori/konum linki (ör. "AUTOMOBILE",
   "United States") 13px küçük bir metindi, ekstra dolgu (padding) yoktu --
   dokunma alanı WCAG'ın istediği 24x24px'in altında kalıyordu. padding +
   AYNI miktarda negatif margin ile görsel boyutu/hizalamayı DEĞİŞTİRMEDEN
   (metin/ikon aynı yerde aynı boyutta görünmeye devam ediyor) sadece
   dokunma alanını büyütüyoruz -- negatif margin, padding'in komşu
   öğeleri iterek düzeni bozmasını engelliyor.
*/
.fha-card-meta-row a {
	display: inline-block;
	padding: 6px 4px;
	margin: -6px -4px;
}

.fha-card-price {
	font-size: 18px;
	font-weight: 800;
	color: var(--fha-accent-dark);
}

.fha-card-excerpt {
	color: var(--fha-contrast-2);
	font-size: 14px;
	line-height: 1.5;
}

/* "Read more" popup -- kullanıcı isteği üzerine ACADP eklentisindeki
   .acadp-description-read-more + popup deseninin BİREBİR aynı (renk,
   boyut, gölge, köşe yuvarlaklığı) bir portu. İlan kartlarında (kırpılmış
   açıklama) VE kayıt/Google onay ekranındaki uzun Şartlar/Gizlilik beyan
   metinlerinde (bkz. includes/legal-consent-fields.php) kullanılıyor --
   tek bir paylaşılan popup + assets/js/description-modal.js. */
.fha-description-read-more {
	align-self: flex-start;
	margin-top: 2px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #2563eb;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
}
.fha-description-read-more:hover,
.fha-description-read-more:focus {
	color: #1d4ed8;
	text-decoration: underline;
}

/* Popup kendisi -- her sayfada JS tarafından "lazy" olarak <body>'nin
   sonuna eklenir (bkz. description-modal.js), bu yüzden burada sadece
   görünüm tanımlı, JS'in oluşturduğu markup'la eşleşiyor. */
.fha-description-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(15, 23, 42, 0.12);
	backdrop-filter: blur(1px);
}
.fha-description-modal[hidden] { display: none !important; }
body.fha-description-modal-open { overflow: hidden; }
.fha-description-modal__dialog {
	position: relative;
	width: min(820px, calc(100vw - 48px));
	max-height: min(760px, calc(100vh - 48px));
	overflow: hidden;
	border: 1px solid rgba(148, 163, 184, 0.24);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 34px 90px rgba(15, 23, 42, 0.26);
}
.fha-description-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(148, 163, 184, 0.24);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #334155;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.fha-description-modal__body {
	max-height: min(700px, calc(100vh - 88px));
	overflow-x: hidden;
	overflow-y: auto;
	padding: 32px 34px 34px;
	color: #0f172a;
	font-size: 16px;
	line-height: 1.75;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.fha-description-modal__body ol,
.fha-description-modal__body ul {
	margin: 0 0 1em;
	padding-left: 1.35em;
}
.fha-description-modal__body li {
	margin: 0 0 0.7em;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.fha-description-modal__body p:first-child { margin-top: 0; }
.fha-description-modal__body p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
	.fha-description-modal {
		align-items: flex-end;
		padding: 10px;
		background: rgba(15, 23, 42, 0.22);
	}
	.fha-description-modal__dialog {
		width: 100%;
		max-height: calc(100dvh - 20px);
		border-radius: 16px;
	}
	.fha-description-modal__close {
		top: 10px;
		right: 10px;
		width: 38px;
		height: 38px;
	}
	.fha-description-modal__body {
		max-height: calc(100dvh - 42px);
		padding: 54px 18px 24px;
		font-size: 15px;
		line-height: 1.7;
	}
}

.fha-card-fields {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 4px 16px;
	margin: 4px 0 0;
}
.fha-card-field { display: flex; gap: 4px; font-size: 13px; }
.fha-card-field dt { font-weight: 700; margin: 0; }
.fha-card-field dd { margin: 0; color: var(--fha-contrast-2); }

.fha-card-footer {
	margin-top: auto;
	padding-top: 6px;
	font-size: 12px;
	color: var(--fha-contrast-4);
}

@media (max-width: 640px) {
	.fha-card { flex-direction: column; }
	.fha-card-image { max-width: 100%; }
}

.fha-empty {
	background: var(--fha-base-3);
	border: 1px dashed var(--fha-border);
	border-radius: 10px;
	padding: 30px;
	text-align: center;
	color: var(--fha-contrast-2);
}

/* ---------- Pagination ---------- */

.fha-pagination { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fha-pagination a {
	padding: 7px 13px;
	border: 1px solid var(--fha-border);
	border-radius: 6px;
	color: var(--fha-contrast);
}
.fha-pagination a.is-active { background: var(--fha-accent); border-color: var(--fha-accent); color: #fff; }
.fha-pagination-ellipsis { padding: 7px 4px; color: var(--fha-contrast-2); }
.fha-pagination-arrow { font-weight: 700; }

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

.fha-footer {
	background: var(--fha-base-3);
	border-top: 1px solid var(--fha-border);
	margin-top: 40px;
}
.fha-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	color: var(--fha-contrast-2);
	font-size: 13px;
}
/* SEO denetimi (44. madde): footer'daki kategori linkleri. */
.fha-footer-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}
/* Erişilebilirlik denetimi (2026-08-26 - Lighthouse "Touch targets don't
   have sufficient size or spacing"): aynı düzeltme (bkz. .fha-card-meta-row a)
   footer'daki kategori/şehir linkleri için de gerekliydi -- aynı teknik:
   padding + negatif margin, görsel yerleşim aynen korunuyor.
*/
.fha-footer-categories a {
	display: inline-block;
	padding: 6px 4px;
	margin: -6px -4px;
}
.fha-footer-categories a {
	color: var(--fha-contrast-2);
}
/* Erişilebilirlik denetimi (2026-08-26 - Lighthouse "Links are
   distinguishable without relying on color"): footer'daki linkler (kategori/
   şehir listesi + Terms/Privacy) sadece renkle ayrılıyordu -- kategori/şehir
   linkleri hatta çevredeki düz metinle AYNI renkteydi (--fha-contrast-2),
   hiçbir görsel farkları yoktu. Az gören/renk körü kullanıcılar bunların
   tıklanabilir olduğunu anlayamıyordu. Altı çizili yaparak (rengin dışında
   ikinci, renkten bağımsız bir işaret) bu linkleri metinden ayırt edilebilir
   hale getiriyoruz -- .fha-footer-inner altındaki HER link (kategori/şehir
   nav'ı + Terms + Privacy) kapsanıyor, tek kural yeterli.
*/
.fha-footer-inner a {
	text-decoration: underline;
}

/* ---------- Wallet / other pages (kept from earlier version) ---------- */

.fha-container { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }

.fha-wallet-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 16px 0;
}
.fha-stat {
	background: var(--fha-base-3);
	border: 1px solid var(--fha-border);
	border-radius: 10px;
	padding: 14px;
}
.fha-stat-label { font-size: 12px; color: var(--fha-contrast-2); }
.fha-stat-value { font-size: 20px; font-weight: 700; margin-top: 4px; }

.fha-alert { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; }
.fha-alert-info { background: #e7f3ff; color: #084298; }
.fha-alert-error { background: #fde2e2; color: #842029; }
.fha-alert-success { background: #d4edda; color: #155724; }

.fha-topup-form {
	background: var(--fha-base-3);
	border: 1px solid var(--fha-border);
	border-radius: 10px;
	padding: 16px;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.fha-topup-form input, .fha-topup-form select {
	padding: 8px 10px;
	border: 1px solid var(--fha-border);
	border-radius: 6px;
}
.fha-topup-form button {
	background: var(--fha-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px;
	cursor: pointer;
	font-weight: 600;
}
.fha-form-hint { font-size: 12px; color: var(--fha-contrast-2); }

.fha-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.fha-table th, .fha-table td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--fha-border);
	font-size: 14px;
}

/* ---------- Auth (login/register) ---------- */

.fha-auth-page {
	max-width: 420px;
	margin: 0 auto;
	padding: 50px 20px;
}

.fha-auth-card {
	background: var(--fha-base-3);
	border: 1px solid var(--fha-border);
	border-radius: 10px;
	padding: 28px;
}

.fha-auth-card h1 { margin: 0 0 20px; font-size: 22px; }

.fha-auth-card form { display: flex; flex-direction: column; gap: 14px; }

.fha-auth-card .fha-btn { justify-content: center; margin-top: 6px; }

.fha-form-link-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}

.fha-form-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--fha-green-1);
	text-decoration: none;
}

.fha-form-link:hover { text-decoration: underline; }

.fha-auth-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0 14px;
	color: var(--fha-contrast-2);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.fha-auth-divider::before,
.fha-auth-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--fha-border);
}

.fha-google-signin {
	display: flex;
	justify-content: center;
}

.fha-auth-footer {
	margin-top: 18px;
	font-size: 14px;
	color: var(--fha-contrast-2);
	text-align: center;
}

/* Şartlar/Gizlilik onay kutuları (register.php + google-login.php'nin
   needs_consent ekranı, ikisi de includes/legal-consent-fields.php'i
   paylaşıyor) -- WP sitesindeki "is-attention" amber vurgusuyla aynı fikir:
   kutu işaretlenmeden gönderilirse ilgili kutu dikkat çeker. */
.fha-form-group-terms,
.fha-form-group-privacy {
	border: 1px solid var(--fha-border);
	border-radius: 10px;
	padding: 12px 14px;
	background: var(--fha-base-2);
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.fha-form-group-terms.is-attention,
.fha-form-group-privacy.is-attention {
	border-color: #f59e0b;
	background: #fffaf0;
	box-shadow: 0 0 0 4px rgba(245, 158, 11, .14);
}
/* Onay kutusunun içindeki uzun beyan metni -- checkbox'ın etiketinden ayrı
   (tıklanabilir alanın dışında, metni seçmeye çalışırken yanlışlıkla kutuyu
   işaretleyip kaldırma riski olmasın diye), küçük/soluk ve daha sık satır
   aralığıyla okunabilir. */
.fha-form-group-terms .fha-form-hint,
.fha-form-group-privacy .fha-form-hint {
	margin: 8px 0 0;
	line-height: 1.6;
}
.fha-google-consent-card .fha-form-hint { line-height: 1.6; }
.fha-google-consent-card > .fha-form-hint { margin: 0 0 18px; }

/* ---------- Dashboard ---------- */

.fha-dashboard-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--fha-base-3);
	border: 1px solid var(--fha-border);
	border-radius: 10px;
	padding: 22px;
	margin-bottom: 24px;
}

.fha-dashboard-avatar {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--fha-green-1), var(--fha-green-3));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 800;
	flex-shrink: 0;
}

.fha-dashboard-hero h1 { margin: 0; font-size: 20px; }
.fha-dashboard-hero p { margin: 4px 0 0; color: var(--fha-contrast-2); font-size: 14px; }

.fha-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.fha-dashboard-card {
	background: var(--fha-base-3);
	border: 1px solid var(--fha-border);
	border-radius: 10px;
	padding: 20px;
	display: block;
	position: relative;
}
.fha-dashboard-card:hover { border-color: var(--fha-accent); }
.fha-dashboard-card-icon { font-size: 22px; margin-bottom: 8px; }
.fha-dashboard-card-label { font-weight: 700; color: var(--fha-contrast); }
.fha-dashboard-card-meta { font-size: 13px; color: var(--fha-contrast-2); margin-top: 2px; }

/* ---------- Listing detail ---------- */

.fha-listing-detail {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 30px;
	align-items: start;
}

@media (max-width: 860px) {
	.fha-listing-detail { grid-template-columns: 1fr; }
}

.fha-listing-gallery-main {
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: 10px;
	overflow: hidden;
	/* Kart görselleriyle aynı sebep: orijinal ACADP'de tekli ilan ana
	   görseli de object-fit: cover (aspect-ratio 1/1, !important ile
	   zorlanmış) -- yanlarda boşluk yok, background sadece yükleme
	   anında/placeholder olarak görünür. */
	background: var(--fha-base);
}
.fha-listing-gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.fha-listing-gallery-thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.fha-listing-gallery-thumbs img {
	/* Küçük thumb'larda da aynı kural: object-fit: cover, boşluk yok. */
	width: 88px; height: 66px; object-fit: cover; background: var(--fha-base); border-radius: 6px; border: 2px solid transparent; cursor: pointer;
}
.fha-listing-gallery-thumbs img.is-active { border-color: var(--fha-accent); }

@media (max-width: 480px) {
	.fha-listing-gallery-thumbs { gap: 8px; }
	.fha-listing-gallery-thumbs img { width: 72px; height: 54px; }
}

.fha-listing-detail-side {
	background: var(--fha-base-3);
	border: 1px solid var(--fha-border);
	border-radius: 10px;
	padding: 20px;
}

@media (min-width: 861px) {
	/* Masaüstünde sağ sütunu (fiyat + harita/"Contact details" + satıcı kartı +
	   "Contact seller" mesaj formu) da yapışkan yap -- gerçek ACADP eklentisinde
	   olduğu gibi kullanıcı uzun bir açıklamayı aşağı kaydırırken harita/satıcı
	   bilgisi/mesaj formu her zaman erişilebilir kalsın (bu sayfanın asıl amacı:
	   "masaüstü kullanan biri kaydırırken herşeye hakim olsun"). "top" değeri
	   header'ın kendisi de sticky olduğu için header yüksekliği + boşluk kadar
	   (89px -- .fha-sidebar-card'daki değerle aynı sebep/hesap).
	   Not: burada .fha-listing-detail bir CSS Grid (align-items: start), homepage
	   sidebar'ındaki flexbox'tan farklı olarak grid satırının yüksekliği HER
	   İKİ sütunun da en uzununa göre belirlenir -- yani bu sütunun "yapışabileceği"
	   kaydırma alanı sol sütun (açıklama vb.) kadar geniş olur, sidebar'daki gibi
	   dar bir sorun burada yaşanmıyor. */
	.fha-listing-detail-side {
		position: sticky;
		top: 89px;
	}
}

.fha-listing-detail-title { font-size: 24px; margin: 0 0 6px; }
.fha-listing-detail-price { font-size: 24px; font-weight: 800; color: var(--fha-accent-dark); margin-bottom: 12px; }

.fha-side-section { margin-top: 14px; }
.fha-side-section-title { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--fha-contrast); }

.fha-seller-card {
	display: flex; align-items: center; gap: 10px;
	padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--fha-border);
}

/* ---------- Messages (inbox / thread) -- WhatsApp benzeri iki panelli görünüm ---------- */

.fha-page-messages { max-width: 1100px; }

.fha-inbox-layout {
	display: flex;
	gap: 0;
	align-items: stretch;
	background: var(--fha-base-3);
	border: 1px solid var(--fha-border);
	border-radius: 10px;
	overflow: hidden;
	min-height: 560px;
}

.fha-thread-list {
	flex: 0 0 340px;
	max-width: 340px;
	border-right: 1px solid var(--fha-border);
	overflow-y: auto;
	max-height: 720px;
}

.fha-thread-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--fha-border);
	color: var(--fha-contrast);
	position: relative;
}
.fha-thread-item:hover { background: var(--fha-base-2); color: var(--fha-contrast); }
.fha-thread-item.is-active { background: var(--fha-base-2); border-left: 3px solid var(--fha-green-2); }
.fha-thread-item.is-unread .fha-thread-item-name { font-weight: 800; }
.fha-thread-item.is-unread .fha-thread-item-preview { color: var(--fha-contrast); font-weight: 600; }

.fha-thread-item-body { flex: 1; min-width: 0; }
.fha-thread-item-top { display: flex; justify-content: space-between; gap: 8px; }
.fha-thread-item-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fha-thread-item-subject { font-size: 12px; color: var(--fha-green-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fha-thread-item-preview { font-size: 13px; color: var(--fha-contrast-2); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fha-thread-item-time { font-size: 11px; color: var(--fha-contrast-4); white-space: nowrap; }

.fha-thread-item-badge {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--fha-green-1) 0%, var(--fha-green-2) 45%, var(--fha-green-3) 100%);
	align-self: center;
}

.fha-thread-view {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	/* Hafif "sohbet arka planı" hissi -- WhatsApp'taki gibi mesaj listesinin
	   arkasında panelin genelinden biraz farklı bir zemin. */
	background: var(--fha-base-2);
}

.fha-thread-view-empty {
	align-items: center;
	justify-content: center;
	background: var(--fha-base-3);
}

@media (max-width: 860px) {
	.fha-inbox-layout { flex-direction: column; min-height: 0; }
	.fha-thread-list { max-width: 100%; flex: 1 1 100%; max-height: 320px; border-right: none; border-bottom: 1px solid var(--fha-border); }
}

.fha-thread-view-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--fha-border);
	background: var(--fha-base-3);
}
.fha-thread-view-header-body { flex: 1; min-width: 0; }
.fha-thread-view-header-body strong { display: block; font-size: 15px; }
.fha-thread-view-header-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.fha-report-box { display: none; padding: 14px 20px; border-bottom: 1px solid var(--fha-border); background: var(--fha-base-3); }
.fha-report-box.is-open { display: block; }
.fha-report-box form { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.fha-report-box textarea.fha-input { min-height: 60px; resize: vertical; }

.fha-thread-messages {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	overflow-y: auto;
	max-height: 520px;
}

.fha-message-bubble {
	max-width: 70%;
	align-self: flex-start;
	padding: 8px 12px;
	border-radius: 12px;
	border-top-left-radius: 4px;
	background: var(--fha-base-3);
	border: 1px solid var(--fha-border);
	font-size: 14px;
	line-height: 1.5;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.fha-message-bubble.is-mine {
	align-self: flex-end;
	background: linear-gradient(135deg, var(--fha-green-1) 0%, var(--fha-green-2) 45%, var(--fha-green-3) 100%);
	border-color: transparent;
	color: #fff;
	border-top-left-radius: 12px;
	border-top-right-radius: 4px;
}
.fha-message-bubble-body { white-space: pre-wrap; word-break: break-word; }
.fha-message-bubble-meta { font-size: 11px; opacity: .7; margin-top: 4px; text-align: right; }

@media (max-width: 600px) {
	.fha-message-bubble { max-width: 85%; }
}

.fha-reply-form {
	display: flex;
	gap: 8px;
	padding: 14px 20px;
	border-top: 1px solid var(--fha-border);
	background: var(--fha-base-3);
}
.fha-reply-form textarea {
	flex: 1;
	resize: none;
	min-height: 44px;
	max-height: 120px;
	padding: 10px 14px;
	border: 1px solid var(--fha-border);
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
}
.fha-reply-form .fha-btn { align-self: flex-end; }

/* ---------- Add listing form ----------
 * Bu form (add-listing.php, edit-listing.php, report-listing.php ve
 * profile.php aynı .fha-form-page/.fha-form-card kabuğunu paylaşır) SEO/hız
 * denetiminden sonra kullanıcı isteğiyle "modernize" edildi -- referans,
 * eski WordPress ACADP eklentisinin kendi ilan formu tasarımı (yuvarlak
 * kartlar, yumuşak gölgeler, degrade bölüm başlıkları, hap şeklinde
 * butonlar/inputlar). Buradaki .fha-input/.fha-form-group vb. override'lar
 * BİLEREK sadece `.fha-form-card` içinde scope'landı -- arama çubuğu,
 * admin panel, filtre kutuları gibi diğer .fha-input kullanımları
 * (header/sidebar) etkilenmesin diye. */

.fha-form-page {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 20px 60px;
}
.fha-form-card {
	background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
	border: 1px solid #dbe4f0;
	border-radius: 24px;
	padding: 34px;
	box-shadow: 0 22px 48px rgba(15, 23, 42, 0.07);
}
@media (max-width: 600px) {
	.fha-form-card { padding: 22px 18px; border-radius: 18px; }
}
.fha-form-card h1 {
	margin: 0 0 22px;
	font-size: 26px;
	font-weight: 800;
	color: var(--fha-contrast);
	letter-spacing: -.01em;
}
.fha-form-card textarea.fha-input { resize: vertical; min-height: 120px; }
.fha-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .fha-form-row { grid-template-columns: 1fr; } }

/* Daha "hap" görünümlü, yumuşak odaklanmalı input/select/textarea -- sadece
   ilan formu kartının içinde (bkz. yukarıdaki not). */
.fha-form-card .fha-input {
	border-radius: 12px;
	border: 1px solid #dadce0;
	padding: 13px 16px;
	background: #fff;
	font-size: 15.5px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fha-form-card .fha-input:focus {
	border-color: var(--fha-accent);
	box-shadow: 0 0 0 4px rgba(30, 115, 190, 0.12);
}
.fha-form-card .fha-input[readonly],
.fha-form-card .fha-input:disabled:not(.fha-cf-locked) {
	background: var(--fha-base-2);
	color: var(--fha-contrast-2);
	cursor: not-allowed;
}
.fha-form-card .fha-label {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--fha-contrast);
	margin-bottom: 7px;
}

/* Musa'nın isteği (2026-08-26): "Post a Listing" formu ilan verirken küçük/
   düz bir metin dosyası gibi duruyordu -- masaüstünde ekranda çok boşluk
   varken yazılar hâlâ site genelindeki küçük (12-13px) varsayılan boyuttaydı,
   kullanıcı gözünü kısmak zorunda kalıyordu. Etiket/hint/buton boyutları
   yukarıda ve aşağıda büyütüldü; 900px+ genişlikte (gerçek masaüstü) ayrıca
   bir tık daha büyütülüyor (bkz. aşağıdaki @media bloğu). Yine SADECE
   `.fha-form-card` içinde scope'lu -- diğer sayfalardaki küçük
   .fha-input/.fha-label/.fha-btn kullanımları (arama, admin, filtre)
   etkilenmiyor. */
.fha-form-card .fha-form-hint {
	font-size: 13.5px;
}
.fha-form-card .fha-btn {
	font-size: 15.5px;
	padding: 13px 22px;
}

/* Bölüm başlıkları ("Photos", "Details", "Contact details" vb.) -- düz bir
   üst-border yerine, ACADP'nin panel-header'ına benzeyen yuvarlak/degrade
   bir "banner" görünümü. */
.fha-form-card .fha-form-section-title {
	margin: 30px 0 16px;
	padding: 13px 18px;
	border-top: none;
	border-radius: 14px;
	background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
	border: 1px solid #e2e8f0;
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
}
.fha-form-card .fha-form-section-title:first-child { margin-top: 0; }

/* Form içindeki "publish/save draft" alanı biraz nefes alsın. */
.fha-form-card form > button[type="submit"] { margin-top: 10px; margin-right: 10px; }
@media (max-width: 600px) {
	.fha-form-card form > button[type="submit"] { width: 100%; margin-right: 0; margin-top: 10px; justify-content: center; }
}

/* Gerçek masaüstü genişliğinde (900px+) kart bir tık daha geniş ve yazılar
   bir tık daha büyük -- 760px'lik dar kart, geniş bir monitörde ortada
   küçük bir "demo" kutusu gibi duruyordu. */
@media (min-width: 900px) {
	.fha-form-page { max-width: 860px; }
	.fha-form-card { padding: 44px 48px; }
	.fha-form-card h1 { font-size: 30px; }
	.fha-form-card .fha-label { font-size: 15.5px; }
	.fha-form-card .fha-input { font-size: 16px; padding: 14px 18px; }
	.fha-form-card .fha-form-hint { font-size: 14px; }
	.fha-form-card .fha-form-section-title { font-size: 17px; padding: 14px 20px; }
	.fha-form-card .fha-btn { font-size: 16px; padding: 14px 26px; }
}

/* ---------- Buttons: small size ---------- */

.fha-btn-sm { padding: 6px 12px; font-size: 12.5px; }

/* ---------- Favourites ---------- */

.fha-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.fha-card-fav-form { margin: 0; }
.fha-card-fav-btn {
	border: 1px solid var(--fha-border);
	background: var(--fha-base);
	color: #c94b4b;
	border-radius: 999px;
	width: 32px;
	height: 32px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 auto;
}
.fha-card-fav-btn.is-active { background: #fde2e2; }

.fha-favourite-btn.is-active { color: #c94b4b; }

/* ---------- Share buttons ---------- */

.fha-share-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
.fha-share-btn {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--fha-base);
	border: 1px solid var(--fha-border);
	color: var(--fha-contrast);
	font-size: 12.5px;
	text-decoration: none;
	cursor: pointer;
}
.fha-share-btn:hover { background: var(--fha-contrast-3); }

/* ---------- Owner actions (sold / renew / duplicate) ---------- */

.fha-owner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fha-owner-actions form { margin: 0; }

/* ---------- Video / map embeds ---------- */

.fha-video-embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
	margin-bottom: 16px;
}
.fha-video-embed iframe {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

.fha-map-embed {
	width: 100%;
	height: 280px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--fha-border);
	margin-bottom: 16px;
}

/* ---------- Avatar (nav + dashboard) ---------- */

.fha-topnav-user { display: inline-flex; align-items: center; gap: 8px; }
.fha-nav-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.fha-nav-avatar-fallback {
	background: var(--fha-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

/* ---------- Cookie consent banner ---------- */

.fha-cookie-consent {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 999;
	background: var(--fha-contrast);
	color: #fff;
	padding: 14px 20px;
}
.fha-cookie-consent-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.fha-cookie-consent-inner p { margin: 0; font-size: 13px; }
.fha-cookie-consent-inner a { color: #fff; text-decoration: underline; }

/* ---------- Legal pages (Terms / Privacy) ---------- */

.fha-legal-page { max-width: 760px; }
.fha-legal-page h2 { margin-top: 28px; }

/* ---------- Payment receipt ---------- */

.fha-receipt {
	max-width: 640px;
	background: var(--fha-base-3);
	border: 1px solid var(--fha-border);
	border-radius: 10px;
	padding: 24px;
}
.fha-receipt-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.fha-receipt-id { font-size: 20px; font-weight: 700; color: var(--fha-contrast-2); }
.fha-receipt-actions { display: flex; gap: 10px; margin-top: 20px; }
@media print {
	.fha-topbar, .fha-footer, .fha-cookie-consent, .fha-receipt-actions { display: none !important; }
}

/* ---------- Admin panel ---------- */

.fha-admin-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--fha-border);
}
.fha-admin-nav-link {
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--fha-base);
	color: var(--fha-contrast);
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
}
.fha-admin-nav-link.is-active { background: var(--fha-accent); color: #fff; }
.fha-admin-nav-link.fha-admin-nav-exit { margin-left: auto; background: transparent; color: var(--fha-contrast-2); }

.fha-admin-filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.fha-admin-filter-tabs a {
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--fha-base);
	color: var(--fha-contrast);
	text-decoration: none;
	font-size: 13px;
}
.fha-admin-filter-tabs a.is-active { background: var(--fha-contrast); color: #fff; }

/* ---------- Async image manager (add/edit listing) ---------- */

.fha-image-manager { margin-top: 6px; }
.fha-image-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}
.fha-image-thumb {
	position: relative;
	width: 96px;
	height: 96px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--fha-border);
	background: var(--fha-base);
	cursor: grab;
	box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}
.fha-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fha-image-thumb-dragging { opacity: 0.4; }
.fha-image-thumb-loading { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--fha-contrast-2); text-align: center; opacity: 0.7; }
.fha-image-remove {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
.fha-image-add-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 18px;
	border: 2px dashed var(--fha-contrast-3);
	border-radius: 14px;
	color: var(--fha-contrast-2);
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 700;
	background: var(--fha-base-2);
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.fha-image-add-btn:hover { border-color: var(--fha-accent); color: var(--fha-accent); background: #fff; }
.fha-image-status { font-size: 12.5px; margin-top: 6px; min-height: 16px; }

/* ---------- Rich text editor (description field) ---------- */

.fha-richtext { border: 1px solid var(--fha-border); border-radius: 8px; overflow: hidden; }
.fha-richtext-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 6px;
	background: var(--fha-base);
	border-bottom: 1px solid var(--fha-border);
}
.fha-richtext-btn {
	border: 1px solid transparent;
	background: transparent;
	border-radius: 6px;
	padding: 5px 10px;
	font-size: 13px;
	cursor: pointer;
	color: var(--fha-contrast);
}
.fha-richtext-btn:hover { background: var(--fha-base-3); border-color: var(--fha-border); }
.fha-richtext-body {
	min-height: 140px;
	padding: 12px;
	font-size: 14px;
	line-height: 1.6;
	background: var(--fha-base-3);
}
.fha-richtext-body:focus { outline: none; }
.fha-richtext-body ul, .fha-richtext-body ol { padding-left: 22px; }
.fha-listing-description ul, .fha-listing-description ol { padding-left: 22px; }

/* ---------- Gallery lightbox ---------- */

.fha-lightbox-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.9);
	z-index: 9999;
	align-items: center;
	justify-content: center;
}
.fha-lightbox-overlay.is-open { display: flex; }
.fha-lightbox-img { max-width: 90vw; max-height: 88vh; border-radius: 4px; }
.fha-lightbox-close, .fha-lightbox-prev, .fha-lightbox-next {
	position: absolute;
	background: rgba(255,255,255,0.12);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 20px;
}
.fha-lightbox-close { top: 18px; right: 18px; width: 40px; height: 40px; }
.fha-lightbox-prev, .fha-lightbox-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.fha-lightbox-prev { left: 18px; }
.fha-lightbox-next { right: 18px; }
.fha-gallery-thumb { cursor: zoom-in; }

/* ---------- Contact info / social buttons on listing page ---------- */

.fha-contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fha-contact-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--fha-border);
	color: var(--fha-contrast);
	background: var(--fha-base-3);
}
.fha-contact-btn:hover { border-color: var(--fha-accent); color: var(--fha-accent); }
.fha-contact-btn-whatsapp { background: var(--fha-green-1); border-color: var(--fha-green-1); color: #fff; }
.fha-contact-btn-whatsapp:hover { background: var(--fha-green-2); color: #fff; }
.fha-contact-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--fha-base); font-size: 12.5px; color: var(--fha-contrast-2); }
.fha-map-privacy-note { font-size: 12px; color: var(--fha-contrast-2); margin-top: 6px; }

/* Harita/video gömme uyarısı -- ACADP'deki "acadp_cookie_consent" ayarıyla
   aynı beyan (kullanıcı bunu verdi, bkz. sohbet): harita/video her
   gösterildiğinde, bunların üçüncü taraf (OpenStreetMap/YouTube/Vimeo)
   servisleri olduğunu ve görüntülemenin bazı teknik verilerin o
   sağlayıcılara aktarılmasını içerebileceğini bildiriyor. */
.fha-thirdparty-note { font-size: 12px; color: var(--fha-contrast-2); margin-top: 6px; }

/* ---------- Add/edit listing form: section titles, required marker ---------- */

.fha-form-section-title {
	margin: 28px 0 14px;
	padding-top: 18px;
	border-top: 1px solid var(--fha-border);
	font-size: 15px;
	font-weight: 700;
	color: var(--fha-contrast);
}
.fha-form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.fha-required { color: #c0392b; }
.fha-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .fha-form-row-3 { grid-template-columns: 1fr; } }

/* ---------- Category picker (search + hierarchy popup) ---------- */

.fha-category-picker { position: relative; }
.fha-category-trigger { cursor: pointer; background: var(--fha-base-3); }
.fha-category-select-native { display: none; }

.fha-category-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 9999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 16px;
}
/* KRİTİK: [hidden] override'ı olmadan yukarıdaki "display: flex" kuralı
 * tarayıcının varsayılan "[hidden] { display: none }" UA stilini HER ZAMAN
 * eziyor (author stylesheet, specificity farketmeksizin UA stilinin
 * üzerine yazar). Bu override olmadan modal, "hidden" attribute'u JS
 * tarafından doğru şekilde true yapılsa bile EKRANDA HER ZAMAN AÇIK
 * görünüyordu -- "popup kapanmıyor" şikayetinin gerçek kök nedeni buydu. */
.fha-category-modal-backdrop[hidden] { display: none; }
.fha-category-modal {
	background: var(--fha-base-3);
	border-radius: 10px;
	width: 100%;
	max-width: 560px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.fha-category-modal-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	border-bottom: 1px solid var(--fha-border);
}
.fha-category-modal-header .fha-input { margin: 0; }
.fha-category-modal-close {
	border: none;
	background: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--fha-contrast-2);
	padding: 4px 8px;
}
.fha-category-modal-close:hover { color: var(--fha-contrast); }
.fha-category-modal-body { overflow-y: auto; padding: 8px; }

.fha-cat-group { border-bottom: 1px solid var(--fha-border); }
.fha-cat-group:last-child { border-bottom: none; }
.fha-cat-group-header { display: flex; align-items: stretch; }
.fha-cat-btn {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 10px 8px;
	font-size: 14px;
	color: var(--fha-contrast);
	cursor: pointer;
	border-radius: 6px;
}
.fha-cat-btn:hover { background: var(--fha-base); color: var(--fha-accent); }
.fha-cat-group-select { font-weight: 600; }
.fha-cat-toggle {
	border: none;
	background: none;
	cursor: pointer;
	color: var(--fha-contrast-2);
	padding: 0 12px;
	font-size: 12px;
}
.fha-cat-children { display: none; padding-left: 16px; }
.fha-cat-group.fha-cat-group-open .fha-cat-children { display: block; }
.fha-cat-group.fha-cat-group-open .fha-cat-toggle { transform: rotate(180deg); }
.fha-cat-child { font-size: 13.5px; color: var(--fha-contrast-2); }
.fha-cat-auto-badge { font-size: 12px; }

/* ---------- Category-linked ("locked") custom fields ---------- */

.fha-cf-locked { background: var(--fha-base); color: var(--fha-contrast); border-color: var(--fha-accent, var(--fha-border)); font-weight: 600; cursor: not-allowed; }

/* ---------- Sidebar category filter (radio tree, instant AJAX) ---------- */

.fha-cat-filter-tree { border: 1px solid var(--fha-border); border-radius: 8px; overflow: hidden; }
.fha-cat-filter-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	font-size: 13.5px;
	color: var(--fha-contrast);
	cursor: pointer;
}
.fha-cat-filter-item:hover { background: var(--fha-base); }
.fha-cat-filter-item input[type="radio"],
.fha-cat-filter-item input[type="checkbox"] { margin: 0; }
.fha-cat-filter-group { border-top: 1px solid var(--fha-border); }

/* Kategori seçici tetikleyici -- kapalıyken "Select location" gibi tek
   satır bir kutu; tıklayınca altındaki ağaç açılır/kapanır. */
.fha-cat-filter-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-align: left;
	background: #fff;
	cursor: pointer;
}
.fha-cat-filter-trigger-arrow { transition: transform 0.15s ease; color: var(--fha-contrast-2); font-size: 12px; }
.fha-cat-filter-trigger[aria-expanded="true"] .fha-cat-filter-trigger-arrow { transform: rotate(180deg); }
.fha-cat-filter-tree-wrap { margin-top: 8px; }

/* İlan Ver sayfasında, kategori seçildikten sonra gösterilen kutu --
   eskiden "disabled" bir <select> idi (tıklanamıyordu, "bozuk/kilitli"
   gibi görünüyordu); artık gerçek bir link/buton, tıklayınca kategori
   seçiciye geri dönüp değiştirebiliyorsun. */
.fha-category-display-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-align: left;
	background: #fff;
	color: var(--fha-contrast);
	text-decoration: none;
	cursor: pointer;
}
.fha-category-display-trigger:hover { border-color: var(--fha-accent); color: var(--fha-accent); }
.fha-category-display-trigger:hover .fha-cat-filter-trigger-arrow { color: var(--fha-accent); }

/* İlan formu içindeki kategori seçici düğmesi biraz daha "tıklanabilir" ve
   göze çarpan bir görünüm alsın (ACADP'nin acadp-cat-picker-btn'sinden
   ilham alındı). */
.fha-form-card .fha-category-display-trigger {
	min-height: 54px;
	border-radius: 16px;
	border: 1px solid #dbe4f0;
	background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
	font-weight: 700;
	padding: 12px 16px;
}
.fha-form-card .fha-category-display-trigger:hover,
.fha-form-card .fha-category-display-trigger:focus {
	border-color: var(--fha-accent);
	box-shadow: 0 14px 30px rgba(30, 115, 190, 0.12);
}
.fha-cat-filter-tree > .fha-cat-filter-item:first-child { border-bottom: 1px solid var(--fha-border); }
.fha-cat-filter-row { display: flex; align-items: stretch; }
.fha-cat-filter-row .fha-cat-filter-item { flex: 1; }
.fha-cat-filter-toggle {
	border: none;
	background: none;
	cursor: pointer;
	color: var(--fha-contrast-2);
	padding: 0 12px;
	font-size: 11px;
}
.fha-cat-filter-children { display: none; background: var(--fha-base-2); }
.fha-cat-filter-group.fha-cat-filter-group-open .fha-cat-filter-children { display: block; }
.fha-cat-filter-group.fha-cat-filter-group-open .fha-cat-filter-toggle { transform: rotate(180deg); }
.fha-cat-filter-child { padding-left: 28px; font-size: 13px; color: var(--fha-contrast-2); }

/* "Ortak alt kategori" (dropdown-bağlı özel alan, örn. Brand: Audi) --
   arama kenar çubuğundaki kategori ağacında gerçek alt kategorilerin
   hemen altında görünür, aynı girinti/stil ile. */
.fha-cat-filter-cf-label {
	padding: 8px 12px 2px 28px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fha-contrast-4);
}
.fha-cat-filter-cf-item { padding-left: 28px; font-size: 13px; color: var(--fha-contrast-2); }
.fha-cat-filter-cf-item:has(input:checked) { color: var(--fha-accent); font-weight: 600; }

#fha-results-area { transition: opacity 0.15s ease; }
#fha-results-area.fha-results-loading { opacity: 0.45; pointer-events: none; }

/* ---------- Category-linked "dropdown" custom field choices (in popup) ---------- */

.fha-cat-dropdown-field-label {
	padding: 8px 16px 2px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fha-contrast-2);
}
.fha-cat-dropdown-choice { font-style: normal; }

/* ---------- Sidebar "instant filter" checkboxes (e.g. Advertisement Type: For Sale / For Rent) ---------- */

.fha-cf-instant-filter { display: flex; flex-direction: column; gap: 6px; }
.fha-cf-instant-filter .fha-cf-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.fha-cf-instant-filter .fha-cf-checkbox input { margin: 0; }

/* Genel amaçlı onay kutusu etiketi (register/ilan formu/Google onay ekranı) --
   önceden hiç stili yoktu, tarayıcı varsayılanına bırakılmıştı. */
.fha-cf-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--fha-contrast-2);
	cursor: pointer;
	margin-bottom: 6px;
}
.fha-cf-checkbox input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--fha-accent); cursor: pointer; }

/* İlan formu içindeki onay kutuları (öne çıkar, haritayı gizle vb.) hafif
   bir "chip" kutusu içinde -- ACADP'nin form-group-terms görünümüne benzer. */
.fha-form-card .fha-cf-checkbox {
	background: var(--fha-base-2);
	border: 1px solid var(--fha-border);
	border-radius: 12px;
	padding: 12px 14px;
}

/* ---------- SEO utility sections ---------- */

.fha-faq-section {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--fha-border);
}
.fha-faq-section h2 { margin: 0 0 14px; font-size: 22px; }
.fha-faq-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.fha-faq-item {
	background: var(--fha-base-3);
	border: 1px solid var(--fha-border);
	border-radius: 8px;
	padding: 12px 14px;
}
.fha-faq-item summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--fha-contrast);
}
.fha-faq-item p {
	margin: 10px 0 0;
	color: var(--fha-contrast-2);
	line-height: 1.55;
}
.fha-not-found {
	max-width: 680px;
	margin: 24px auto;
	text-align: center;
	background: var(--fha-base-3);
	border: 1px solid var(--fha-border);
	border-radius: 8px;
	padding: 34px 22px;
}
.fha-not-found-code {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 800;
	color: var(--fha-accent);
	letter-spacing: 0.08em;
}
.fha-not-found h1 { margin: 0 0 10px; }
.fha-not-found p { color: var(--fha-contrast-2); }
.fha-not-found-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 18px;
}

.fha-mobile-sticky-cta { display: none; }

@media (max-width: 768px) {
	body:has(.fha-mobile-sticky-cta) { padding-bottom: 78px; }
	.fha-faq-grid { grid-template-columns: 1fr; }
	.fha-mobile-sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		display: flex;
		gap: 8px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.96);
		border-top: 1px solid var(--fha-border);
		box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
	}
	.fha-mobile-sticky-cta__btn {
		flex: 1 1 0;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		font-weight: 800;
		font-size: 14px;
		text-align: center;
	}
	.fha-mobile-sticky-cta__btn-primary {
		background: var(--fha-accent);
		color: #fff;
	}
	.fha-mobile-sticky-cta__btn-primary:hover { color: #fff; background: var(--fha-accent-dark); }
	.fha-mobile-sticky-cta__btn-secondary {
		background: var(--fha-base-3);
		color: var(--fha-accent);
		border: 1px solid var(--fha-border);
	}
}