/* ============================================================================
   mz-hasar.css — arac hasar/boya semasi

   KAPSAM: her kural .mz-hasar* ile basliyor.

   RENK, TEK BASINA ANLAM TASIMAZ. Her durum hem renkle hem de efsanedeki
   metinle veriliyor; alici gorunumunde ayrica "3 boyalı, 1 değişen" gibi
   sayisal bir ozet var. Renk korlugu olan ya da gri basan biri de okuyabilsin.

   SEMA AYNALANMAZ. RTL sayfada bile "sağ" parca cizimin saginda kalir:
   arac bir metin degil, fiziksel bir nesne - aynalarsak sag/sol yer degistirir
   ve yanlis bilgi verir.
   ========================================================================== */

.mz-hasar {
	--mz-h0: #dfe4ea;   /* orijinal */
	--mz-h1: #e2b13c;   /* boyali   */
	--mz-h2: #c2603a;   /* degisen  */
	--mz-h3: #8f2f2f;   /* hasarli  */
	--mz-h-cizgi: #b9c2cd;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.mz-hasar-sema {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	inline-size: 100%;
}
.mz-hasar-ust {
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--mz-muted, #7b8794);
}

.mz-hasar-arac {
	inline-size: 100%;
	max-inline-size: 240px;
	block-size: auto;
	display: block;
	direction: ltr;   /* sema aynalanmasin */
}
.mz-hasar-parca {
	fill: var(--mz-h0);
	stroke: var(--mz-h-cizgi);
	stroke-width: 1.4;
	transition: fill .15s ease, stroke .15s ease;
}
.mz-hasar-parca[data-durum="boyali"]  { fill: var(--mz-h1); }
.mz-hasar-parca[data-durum="degisen"] { fill: var(--mz-h2); }
.mz-hasar-parca[data-durum="hasarli"] { fill: var(--mz-h3); }
.mz-hasar-cam {
	fill: none;
	stroke: var(--mz-h-cizgi);
	stroke-width: 1.4;
	pointer-events: none;
}

/* --- Duzenlenebilir (satici) --------------------------------------------- */
.mz-hasar-duzen .mz-hasar-parca { cursor: pointer; }
.mz-hasar-duzen .mz-hasar-parca:hover {
	stroke: var(--mz-ink, #1f2933);
	stroke-width: 2;
}
.mz-hasar-duzen .mz-hasar-parca:focus-visible {
	outline: none;
	stroke: var(--mz-ink, #1f2933);
	stroke-width: 3;
}
.mz-hasar-girdiler { display: none; }
.mz-hasar-ipucu {
	font-size: 12.5px;
	color: var(--mz-muted, #7b8794);
	text-align: center;
	margin: 0;
	max-inline-size: 42ch;
}

/* --- Efsane --------------------------------------------------------------- */
.mz-hasar-efsane {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.mz-hasar-ef {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--mz-muted, #7b8794);
}
.mz-hasar-ef i {
	inline-size: 13px;
	block-size: 13px;
	border-radius: 3px;
	border: 1px solid var(--mz-h-cizgi);
	display: inline-block;
}
.mz-hasar-ef[data-durum="orijinal"] i { background: var(--mz-h0); }
.mz-hasar-ef[data-durum="boyali"]   i { background: var(--mz-h1); }
.mz-hasar-ef[data-durum="degisen"]  i { background: var(--mz-h2); }
.mz-hasar-ef[data-durum="hasarli"]  i { background: var(--mz-h3); }

/* --- Alici ozeti ---------------------------------------------------------- */
.mz-hasar-ozet {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mz-hasar-ozet li {
	font-size: 12.5px;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--mz-yuzey-2, #f1f4f7);
	border: 1px solid var(--mz-cizgi, #e4e7eb);
	color: var(--mz-ink, #1f2933);
}
.mz-hasar-ozet li b { font-variant-numeric: tabular-nums; }
.mz-hasar-ozet li[data-durum="boyali"]  { border-color: var(--mz-h1); }
.mz-hasar-ozet li[data-durum="degisen"] { border-color: var(--mz-h2); }
.mz-hasar-ozet li[data-durum="hasarli"] { border-color: var(--mz-h3); }

@media (prefers-reduced-motion: reduce) {
	.mz-hasar-parca { transition: none; }
}