/*
"Kriter Bazlı Değerlendirme" (05-EK-OZELLIKLER-VE-REACT.md §B18) — WooCommerce'in native tek
yıldız yorum sistemine ek alt kriter puanlaması. İşleyiş: inc/urun-degerlendirme-kriterleri.php.
Yalnızca tekil ürün sayfalarında enqueue edilir (aynı dosyadaki `dga_kriter_degerlendirme_enqueue_assets`).
Token kullanımı zorunlu — ham hex/px yok (yıldız glif boyutları ve dokunma hedefi yükseklikleri
hariç, mevcut form/chip bileşenleriyle aynı desen — bkz. stok-bildirim.css, archive.css `.dga-chip`).

Üç bölüm:
  1. `.dga-kriter-form*`      — WooCommerce yorum formuna eklenen kriter yıldız seçicileri.
  2. `.dga-kriter-chip*`      — her yorumun altında gösterilen küçük puan chip'leri.
  3. `.dga-kriter-ozeti*`     — yorumlar sekmesinin üstünde, ürün geneli kriter ortalaması bar'ları.
*/

/* =======================================================================
   1. Form — WooCommerce review formuna eklenen kriter yıldız seçicileri.
   ======================================================================= */

.dga-kriter-form {
	margin: var(--space-2) 0;
	padding: var(--space-2);
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-tab);
}

.dga-kriter-form__baslik {
	margin: 0 0 var(--space-2);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-muted);
}

.dga-kriter-form__satir {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.dga-kriter-form__satir + .dga-kriter-form__satir {
	margin-top: var(--space-1);
	padding-top: var(--space-1);
	border-top: 1px solid var(--color-border);
}

.dga-kriter-form__etiket {
	font-size: 14px;
	color: var(--color-text);
}

/* Saf CSS "ters sıra" yıldız tekniği — JS yok. Radio'lar DOM'da 5→1 yazılır (bkz. PHP), burada
   `row-reverse` ile görsel sıra 1→5'e çevrilir; `:checked ~ label` ve `:hover ~ label`, DOM'da
   SONRAKİ (görsel olarak ÖNCEKİ) tüm label'ları doldurur. */
.dga-kriter-yildiz {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: 2px;
}

.dga-kriter-yildiz__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.dga-kriter-yildiz__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 20px;
	line-height: 1;
	color: var(--color-border-strong);
	cursor: pointer;
	transition: color var(--transition);
}

/* DOM'da her input'u KENDİ label'ı hemen izler, DOM sırası 5→1'dir (bkz. yukarıdaki not) —
   bu yüzden "değer X seçili/gezinilen" durumunda, X'in label'ından SONRAKİ (DOM'da sonraki =
   değeri X'ten KÜÇÜK) tüm label'lar `~` genel kardeş seçiciyle otomatik dolar; ayrıca sıfırlama
   kuralına gerek yoktur (yalnızca gerçekten hover/checked olan dal boyanır). */
.dga-kriter-yildiz__input:checked ~ .dga-kriter-yildiz__label,
.dga-kriter-yildiz__label:hover,
.dga-kriter-yildiz__label:hover ~ .dga-kriter-yildiz__label {
	color: var(--color-primary);
}

/* Klavye odağı — yalnızca odaklanılan input'un KENDİ label'ı (bitişik kardeş `+`, genel kardeş
   `~` DEĞİL — aksi halde odaklanılan yıldızdan sonraki tüm label'lar da halka alırdı). */
.dga-kriter-yildiz__input:focus-visible + .dga-kriter-yildiz__label {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
	border-radius: var(--radius-icon);
}

/* =======================================================================
   2. Chip'ler — her yorumun altında gösterilen kriter puanları.
   ======================================================================= */

.dga-kriter-chip-liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: var(--space-1) 0 0;
	padding: 0;
	list-style: none;
}

.dga-kriter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px var(--space-1);
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-tab);
	font-size: 12px;
	line-height: 1.4;
	color: var(--color-text-muted);
}

.dga-kriter-chip__etiket {
	font-weight: 600;
	color: var(--color-text);
}

.dga-kriter-chip__puan {
	font-variant-numeric: tabular-nums;
}

/* =======================================================================
   3. Özet — yorumlar sekmesinin üstünde, ürün geneli kriter ortalaması bar'ları.
   ======================================================================= */

.dga-kriter-ozeti {
	margin-bottom: var(--space-3);
	padding: var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-tab);
}

.dga-kriter-ozeti__baslik {
	margin: 0 0 var(--space-2);
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text);
}

.dga-kriter-ozeti__liste {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dga-kriter-ozeti__satir {
	display: grid;
	grid-template-columns: minmax(120px, 180px) 1fr 48px;
	align-items: center;
	gap: var(--space-2);
}

.dga-kriter-ozeti__etiket {
	font-size: 13px;
	color: var(--color-text-muted);
}

.dga-kriter-ozeti__bar {
	position: relative;
	display: block;
	height: 8px;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-tab);
	overflow: hidden;
}

.dga-kriter-ozeti__dolu {
	display: block;
	height: 100%;
	background: var(--color-primary);
}

.dga-kriter-ozeti__deger {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-text);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ---------- Mobil: etiket üstte, bar+değer altta ---------- */
@media (max-width: 480px) {
	.dga-kriter-ozeti__satir {
		grid-template-columns: 1fr 48px;
		grid-template-areas:
			"etiket etiket"
			"bar deger";
		row-gap: 4px;
	}
	.dga-kriter-ozeti__etiket { grid-area: etiket; }
	.dga-kriter-ozeti__bar    { grid-area: bar; }
	.dga-kriter-ozeti__deger  { grid-area: deger; }

	.dga-kriter-form__satir {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-1);
	}
}