/* ============================================================================
   mz-karsilastir.css — karsilastirma dugmesi, alt tepsi ve sayfa

   KAPSAM: her kural .mz-kars* ile basliyor. Yonetim paneli, hesap sayfalari
   ve ilgisiz sayfalar bu dosyadan etkilenmez.

   YON: bosluk/konum ozellikleri mantiksal (inline-start/end). Arapca'da
   tepsi sagdan baslar, sutunlar sagdan sola dizilir - ayri bir [dir="rtl"]
   blogu gerekmiyor. Tek istisna sondaki ok isareti: chevron-forward fiziksel
   bir simge oldugu icin RTL'de aynalaniyor.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. "Karsilastir" dugmesi (ilan karti ve ilan sayfasi)
   ------------------------------------------------------------------------- */
.mz-kars-dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 12.5px;
	line-height: 1.4;
	border: 1px solid var(--mz-cizgi, #e4e7eb);
	border-radius: var(--mz-radius-sm, 8px);
	background: var(--mz-yuzey, #fff);
	color: var(--mz-muted, #7b8794);
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
}
.mz-kars-dugme:hover,
.mz-kars-dugme:focus {
	border-color: var(--mz-brand, #3f475f);
	color: var(--mz-brand, #3f475f);
}
.mz-kars-dugme:focus-visible {
	outline: 2px solid var(--mz-brand, #3f475f);
	outline-offset: 1px;
}
.mz-kars-dugme.mz-kars-icinde {
	border-color: var(--mz-brand, #3f475f);
	background: var(--mz-brand, #3f475f);
	color: var(--mz-brand-yazi, #fff);
}
.mz-kars-dugme i { font-size: 13px; }

/* Kart icinde fiyatin altinda, kendi satirinda dursun. */
.mz-kart-yan .mz-kars-dugme { margin-block-start: 8px; }

/* Ilan sayfasindaki dugme kutusu favori/yazdir ile ayni genislikte. */
.mz-kars-buton-sar .mz-kars-dugme {
	inline-size: 100%;
	justify-content: flex-start;
	border: 0;
	background: transparent;
	padding: 0;
}
.mz-kars-buton-sar .mz-kars-dugme.mz-kars-icinde {
	background: transparent;
	color: var(--mz-brand, #3f475f);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   2. Alt tepsi
   ------------------------------------------------------------------------- */
.mz-kars-tepsi {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 1040;
	background: var(--mz-yuzey, #fff);
	border-top: 1px solid var(--mz-cizgi, #e4e7eb);
	box-shadow: 0 -6px 24px rgba(31, 41, 51, .12);
	padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}
/* Alt tab cubugu varsa onun USTUNE otur; ust uste binmesinler.
   Tab cubugu yuksekligi mz-v2-mobil.css ile ayni: 56px. */
body.mz-tabbar-var .mz-kars-tepsi {
	bottom: 56px;
	padding-bottom: 10px;
}
.mz-kars-tepsi-ic {
	max-inline-size: 1320px;
	margin-inline: auto;
	padding-inline: 15px;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.mz-kars-tepsi-basi {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}
.mz-kars-tepsi-baslik {
	font-size: 13px;
	font-weight: 600;
	color: var(--mz-ink, #1f2933);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.mz-kars-tepsi-adet {
	font-size: 11px;
	font-weight: 600;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--mz-brand, #3f475f);
	color: var(--mz-brand-yazi, #fff);
	font-variant-numeric: tabular-nums;
	unicode-bidi: isolate;
}
.mz-kars-tepsi-temizle {
	font-size: 12px;
	color: var(--mz-muted, #7b8794);
	text-decoration: none;
}
.mz-kars-tepsi-temizle:hover { color: #c0392b; text-decoration: none; }

.mz-kars-tepsi-liste {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-inline-size: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.mz-kars-tepsi-liste::-webkit-scrollbar { display: none; }

.mz-kars-mini {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
	max-inline-size: 210px;
	padding: 5px 8px 5px 5px;
	border: 1px solid var(--mz-cizgi, #e4e7eb);
	border-radius: var(--mz-radius-sm, 8px);
	background: var(--mz-yuzey, #fff);
}
.mz-kars-mini-bag {
	display: flex;
	align-items: center;
	gap: 7px;
	min-inline-size: 0;
	text-decoration: none;
	color: inherit;
}
.mz-kars-mini-bag:hover { text-decoration: none; color: inherit; }
.mz-kars-mini img {
	inline-size: 46px;
	block-size: 36px;
	object-fit: cover;
	border-radius: 5px;
	flex: none;
}
.mz-kars-mini-ad {
	font-size: 12px;
	line-height: 1.35;
	color: var(--mz-ink, #1f2933);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-inline-size: 130px;
}
.mz-kars-mini-sil {
	flex: none;
	color: var(--mz-muted, #7b8794);
	text-decoration: none;
	font-size: 14px;
	padding: 2px 4px;
	line-height: 1;
}
.mz-kars-mini-sil:hover { color: #c0392b; text-decoration: none; }

.mz-kars-bos {
	flex: none;
	inline-size: 58px;
	block-size: 48px;
	display: grid;
	place-items: center;
	border: 1px dashed var(--mz-cizgi-kuvvetli, #c8d0db);
	border-radius: var(--mz-radius-sm, 8px);
	color: var(--mz-cizgi-kuvvetli, #c8d0db);
	font-size: 15px;
}

.mz-kars-tepsi-git {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 20px;
	border-radius: var(--mz-radius-sm, 8px);
	background: var(--mz-brand, #3f475f);
	color: var(--mz-brand-yazi, #fff) !important;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
}
.mz-kars-tepsi-git:hover { opacity: .92; }
.mz-kars-tepsi-git.mz-pasif {
	background: var(--mz-yuzey-2, #eef1f6);
	color: var(--mz-muted, #7b8794) !important;
	font-weight: 500;
	cursor: default;
}
/* chevron-forward fiziksel bir ok; RTL'de aynalanmali. */
[dir="rtl"] .mz-kars-ok { transform: scaleX(-1); display: inline-block; }

@media (max-width: 767px) {
	.mz-kars-tepsi-ic { gap: 10px; padding-inline: 12px; }
	.mz-kars-tepsi-basi { inline-size: 100%; }
	.mz-kars-tepsi-temizle { margin-inline-start: auto; }
	.mz-kars-mini-ad { display: none; }      /* telefonda gorsel yeter */
	.mz-kars-mini { max-inline-size: none; padding: 4px; }
	.mz-kars-tepsi-git { inline-size: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   3. Karsilastirma sayfasi
   ------------------------------------------------------------------------- */
.mz-kars-h1 {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 14px;
	color: var(--mz-ink, #1f2933);
}
/* Sayfa alttaki tepsinin arkasina saklanmasin. */
.mz-kars-sayfa { padding-bottom: 130px; }

.mz-kars-kart { padding: 0; overflow: hidden; }

/* Dar ekranda tablo KENDI kabinda kayar; sayfa govdesi yatay kaymaz. */
.mz-kars-kaydir {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mz-kars-tablo {
	inline-size: 100%;
	border-collapse: collapse;
	/* Ilk sutun ozellik adi, kalanlar ilanlar - hepsi esit. */
	table-layout: fixed;
	min-inline-size: calc(150px + (var(--mz-kars-sutun, 3) * 190px));
}
.mz-kars-tablo th,
.mz-kars-tablo td {
	padding: 11px 13px;
	border-bottom: 1px solid var(--mz-cizgi, #e4e7eb);
	text-align: start;
	vertical-align: middle;
	font-size: 13.5px;
}
.mz-kars-tablo tbody th[scope="row"] {
	inline-size: 150px;
	color: var(--mz-muted, #7b8794);
	font-weight: 500;
	background: var(--mz-yuzey-2, #f7f8fa);
}
.mz-kars-tablo td {
	color: var(--mz-ink, #1f2933);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.mz-kars-yok { color: var(--mz-cizgi-kuvvetli, #c8d0db); }
.mz-kars-yok-satir {
	text-align: center;
	color: var(--mz-muted, #7b8794);
	padding-block: 26px;
}

.mz-kars-grup th {
	background: var(--mz-brand-cok-acik, #eef1f6);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--mz-ink, #1f2933);
	letter-spacing: .01em;
}

/* --- sutun basligi --- */
.mz-kars-kose { inline-size: 150px; background: var(--mz-yuzey, #fff); }
.mz-kars-sutun {
	vertical-align: top;
	padding: 12px 13px 14px !important;
	border-inline-start: 1px solid var(--mz-cizgi, #e4e7eb);
}
.mz-kars-araclar {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 8px;
	min-block-size: 24px;
}
.mz-kars-tasi,
.mz-kars-sil {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	padding: 3px 7px;
	border-radius: 6px;
	color: var(--mz-muted, #7b8794);
	text-decoration: none;
	background: var(--mz-yuzey-2, #f7f8fa);
}
.mz-kars-tasi:hover { color: var(--mz-brand, #3f475f); text-decoration: none; }
.mz-kars-sil { margin-inline-start: auto; }
.mz-kars-sil:hover { color: #fff; background: #c0392b; text-decoration: none; }

.mz-kars-gorsel {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--mz-radius-sm, 8px);
	overflow: hidden;
	background: var(--mz-yuzey-2, #f7f8fa);
	margin-bottom: 8px;
}
.mz-kars-gorsel img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}
.mz-kars-baslik {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mz-ink, #1f2933);
	text-decoration: none;
	margin-bottom: 5px;
	/* Uc satirdan uzun basliklar sutun yuksekligini patlatmasin. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mz-kars-baslik:hover { color: var(--mz-brand, #3f475f); text-decoration: none; }
.mz-kars-fiyat {
	font-size: 15px;
	font-weight: 700;
	color: var(--mz-brand, #3f475f);
	unicode-bidi: isolate;
}
.mz-kars-konum {
	font-size: 11.5px;
	color: var(--mz-muted, #7b8794);
	margin-top: 3px;
}

/* --- "daha fazla ozellik": <details>, JS yok --- */
.mz-kars-detay { border-top: 1px solid var(--mz-cizgi, #e4e7eb); }
.mz-kars-detay > summary {
	list-style: none;
	cursor: pointer;
	padding: 13px 15px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mz-brand, #3f475f);
	text-align: center;
	user-select: none;
}
.mz-kars-detay > summary::-webkit-details-marker { display: none; }
.mz-kars-detay > summary:focus-visible {
	outline: 2px solid var(--mz-brand, #3f475f);
	outline-offset: -2px;
}
.mz-kars-detay > summary:hover { background: var(--mz-yuzey-2, #f7f8fa); }
.mz-kars-detay .mz-kars-detay-kapa { display: none; }
.mz-kars-detay[open] .mz-kars-detay-ac { display: none; }
.mz-kars-detay[open] .mz-kars-detay-kapa { display: inline; }

.mz-kars-alt {
	padding: 13px 15px;
	border-top: 1px solid var(--mz-cizgi, #e4e7eb);
	text-align: center;
}
.mz-kars-temizle-hepsi {
	font-size: 12.5px;
	color: var(--mz-muted, #7b8794);
	text-decoration: none;
}
.mz-kars-temizle-hepsi:hover { color: #c0392b; text-decoration: none; }

/* --- bos durum --- */
.mz-kars-bos-durum {
	text-align: center;
	padding: 46px 20px !important;
	color: var(--mz-muted, #7b8794);
}
.mz-kars-bos-durum i {
	font-size: 42px;
	color: var(--mz-cizgi-kuvvetli, #c8d0db);
	display: block;
	margin-bottom: 12px;
}
.mz-kars-bos-durum h2 {
	font-size: 17px;
	font-weight: 600;
	color: var(--mz-ink, #1f2933);
	margin: 0 0 6px;
}
.mz-kars-bos-durum p { margin: 0 0 16px; font-size: 13.5px; }

@media (max-width: 767px) {
	.mz-kars-tablo th, .mz-kars-tablo td { padding: 9px 10px; font-size: 12.5px; }
	.mz-kars-tablo tbody th[scope="row"],
	.mz-kars-kose { inline-size: 112px; }
	.mz-kars-tablo { min-inline-size: calc(112px + (var(--mz-kars-sutun, 3) * 150px)); }
	.mz-kars-sayfa { padding-bottom: 170px; }
	.mz-kars-sil span { display: none; }
}

/* --- Dugme tablo satirinda ve izgara kartinda ------------------------- */
/* DIKKAT - AD CAKISMASI: bu sinif once ".mz-kars-tablo" diye yazilmisti ve
   karsilastirma SAYFASININ tablosu da ayni adi kullaniyor (yukarida). Dugme
   oradan table-layout:fixed ve min-inline-size:calc(150px + 3*190px) miras
   alacakti - yani 720px genisliginde bir "dugme". Kaynagi okuyunca cikti;
   tarayicida gorunurdu ama once burada yakalandi. Ad: .mz-kars-satir. */
.mz-kars-satir {
	margin-block-start: 6px;
	padding: 4px 9px;
	font-size: 11.5px;
}
.mz-kars-satir i { font-size: 12px; }

/* Izgara karti bir <a>; dugme onun DISINDA duruyor, o yuzden karta
   yapisik gorunmesi icin negatif ust bosluk yerine kendi satirinda
   ortalaniyor. */
.mz-kars-izgara {
	display: flex;
	inline-size: 100%;
	margin-block-start: 6px;
	justify-content: center;
	font-size: 12px;
	padding: 5px 10px;
}

@media (max-width: 767px) {
	/* Telefonda tablo hucresi cok dar: yalnizca ikon. */
	.mz-kars-satir span { display: none; }
	.mz-kars-satir { padding: 5px 8px; }
}