/* ============================================================
   mz-v2-anasayfa.css — Mezad V2 · anasayfa ust blogu.

   KAYNAK: "Main.dc.html" (.hero + .trust) ve "HomeMobile.dc.html"
   (mobil .hero). Olculer artboard'dan birebir.

   Butun siniflar "mz-" onekli; style.css bunlarin hicbirini
   secmedigi icin !important gerekmez. Yon: mantiksal ozellikler.
   ============================================================ */

/* ---------- Kahraman (hero) ---------- */
.mz-hero {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: linear-gradient(120deg, var(--mz-brand-koyu, #a5271b), var(--mz-brand, #c0392b) 55%, var(--mz-vurgu, var(--mz-accent, #f39c12)));
	color: #ffffff;
	padding: 34px 40px;
	min-block-size: 220px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-block-end: 20px;
}
.mz-hero h1,
.mz-hero .mz-hero-baslik {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.15;
	max-inline-size: 560px;
	color: #ffffff;
	margin: 0;
}
.mz-hero p {
	margin: 12px 0 0;
	font-size: 16px;
	opacity: .92;
	max-inline-size: 520px;
	line-height: 1.45;
}
/* AD CAKISMASI: bu rozet once ".mz-rozet" adini tasiyordu; ayni ad
   mz-bilesenler.css icinde ilan kartlarinin kucuk etiketi olarak da
   tanimli. Iki tanim ust uste biniyor ve yalnizca ozgulluk sirasi
   sayesinde dogru gorunuyordu - hero kuralinin yazmadigi her ozellik
   (kenarlik, buyuk-kucuk harf, satir yuksekligi) kart etiketinden
   sizmaya devam ediyordu. Kendi adi verildi. */
.mz-hero .mz-hero-rozet {
	position: absolute;
	inset-inline-end: 34px;
	inset-block-start: 34px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #ffffff;
}
.mz-hero .mz-hero-rozet img {
	inline-size: 18px;
	block-size: 13px;
	object-fit: cover;
	border-radius: 2px;
}
.mz-hero .mz-hero-cta {
	display: none;
}

/* RTL'de degradenin yonu de doner: koyu uc metnin BASLADIGI kenarda
   kalsin diye. 240deg, 120deg'nin dikey eksene gore aynasidir. */
[dir="rtl"] .mz-hero {
	background: linear-gradient(240deg, var(--mz-brand-koyu, #a5271b), var(--mz-brand, #c0392b) 55%, var(--mz-vurgu, var(--mz-accent, #f39c12)));
}

/* METIN KONTRASTI DEGRADEYE EMANET EDILMEZ.
   Ilk surum yalnizca acinin dogru olmasina guveniyordu. Iki sebeple
   kirilgan: (1) linear-gradient renkleri kutunun EN/BOY oranina gore
   dagitir - mobilde kisa ve genis kutuda turuncu uc metnin altina
   geliyordu; (2) renkler ulke paletinden geliyor, vurgu rengi acik sari
   olan bir pazarda beyaz baslik her acida okunaksiz olurdu.

   Bu yuzden metnin basladigi kenara ince bir koyu perde konuyor. Perde
   paletten bagimsizdir; hangi renk gelirse gelsin baslik okunur kalir.
   Onceki turlarin dersi: gormedigin bir yuzeye renk DAYATMA, kontrast
   URET. */
.mz-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(20, 26, 33, .45), rgba(20, 26, 33, .10) 55%, rgba(20, 26, 33, 0) 78%);
	pointer-events: none;
}
[dir="rtl"] .mz-hero::before {
	background: linear-gradient(to left, rgba(20, 26, 33, .45), rgba(20, 26, 33, .10) 55%, rgba(20, 26, 33, 0) 78%);
}
/* Perde zeminde kalsin, icerik ustunde. */
.mz-hero > * {position: relative; z-index: 1;}

/* ---------- Guven seridi (trust) ---------- */
.mz-guven {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-block-end: 20px;
}
.mz-guven .mz-g {
	background: var(--mz-yuzey, #ffffff);
	border: 1px solid var(--mz-cizgi, #e4e7eb);
	border-radius: 10px;
	padding: 16px;
	display: flex;
	gap: 12px;
	align-items: center;
	min-inline-size: 0;
}
.mz-guven .mz-g .mz-ikon {
	inline-size: 40px;
	block-size: 40px;
	border-radius: 9px;
	background: var(--mz-brand-acik, #faf6f5);
	color: var(--mz-brand, #c0392b);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex: none;
}
.mz-guven .mz-g b {
	font-size: 14px;
	display: block;
	color: var(--mz-ink, #1f2933);
	line-height: 1.3;
}
.mz-guven .mz-g span {
	font-size: 12px;
	color: var(--mz-muted, #7b8794);
	display: block;
	margin-block-start: 2px;
	line-height: 1.35;
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
	.mz-guven {grid-template-columns: repeat(2, minmax(0, 1fr));}
	.mz-hero {padding: 26px 28px; min-block-size: 180px;}
	.mz-hero h1, .mz-hero .mz-hero-baslik {font-size: 26px;}
	.mz-hero .mz-hero-rozet {inset-inline-end: 20px; inset-block-start: 20px;}
}

/* ---------- Mobil (HomeMobile.dc.html) ---------- */
@media (max-width: 767px) {
	.mz-hero {
		border-radius: 14px;
		padding: 20px;
		min-block-size: 0;
		margin-block-end: 14px;
	}
	.mz-hero h1, .mz-hero .mz-hero-baslik {font-size: 20px; line-height: 1.2;}
	.mz-hero p {font-size: 13px; margin-block-start: 8px;}
	/* Mobilde rozet baslikla cakisiyordu; tasarimda da yok. */
	.mz-hero .mz-hero-rozet {display: none;}
	.mz-hero .mz-hero-cta {
		display: inline-block;
		margin-block-start: 14px;
		align-self: flex-start;
		background: #ffffff;
		color: var(--mz-brand, #c0392b);
		font-weight: 800;
		font-size: 13px;
		padding: 9px 16px;
		border-radius: 8px;
		text-decoration: none;
	}
	.mz-hero .mz-hero-cta:hover {color: var(--mz-brand-koyu, #a5271b); text-decoration: none;}
	.mz-guven {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-block-end: 14px;
	}
	.mz-guven .mz-g {padding: 12px; gap: 9px;}
	.mz-guven .mz-g .mz-ikon {inline-size: 34px; block-size: 34px; font-size: 17px;}
	.mz-guven .mz-g b {font-size: 12.5px;}
	.mz-guven .mz-g span {font-size: 11px;}
}

/* ============================================================
   ANASAYFA ILAN KARTI METNI (damga 174)
   Sahip: "هل الخط المستخدم الان في الصفحه الرئيسية مناسب لتجربة
   المستخدم؟". Olculdu (preview /ar/, gorunen metin karakter
   agirlikli): anasayfa metninin ~%58'i 11px - ilan kartlarinin
   BASLIGI ve IL/ILCE satiri (style.css ".liste h3 {font-size:11px}").
   Govde 14px ve bolum basliklari 18px uygun; yalnizca bu iki satir
   okunur olmanin altinda (arapca harfte ozellikle). Tek satir ve
   uc nokta davranisi KORUNUYOR: kart yuksekligi yalnizca bir kac
   piksel degisir, izgara kaymaz. .liste.yatay (kendi 16px'i var)
   dokunulmadi. */
.bilesen .liste:not(.yatay) h3 {
	font-size: 13.5px;
	line-height: 21px;
	max-height: 21px;
	margin-block-start: 6px;
	font-weight: 500;
	letter-spacing: 0;
}
.bilesen .liste:not(.yatay) .il_ilce {
	font-size: 12px;
	line-height: 18px;
	color: var(--mz-muted, #7b8794);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}