/*
 * Enerji sınıfı rozeti (AB enerji etiketi ölçeği) — paylaşılan bileşen.
 *
 * Ürün sayfası, ürün kartları ve yönetim ekranındaki “Enerji sınıfı”
 * önizlemesi aynı stili kullanır; işaretleme `dijitsu_energy_badge()`
 * (inc/woocommerce.php) ile üretilir. Önceden product.css içindeydi,
 * kurallar değişmeden buraya taşındı.
 */

/*
 * AB enerji etiketi — XD `Component 26` içindeki `energy-label-type2-a`
 * çizimi (kart-göreli 50,515 · 73.42 × 40). Tüm parçalar etiketin kendi
 * yüksekliğine orantılıdır, böylece kart (40) ve ürün sayfası (45)
 * varyantları aynı tasarımı korur:
 *
 *   ölçek sütunu genişliği   17.30 / 40 = 0.4325
 *   ölçek harfi              13.70 / 40 = 0.3425
 *   sınıf gövdesi genişliği  56.05 / 40 = 1.4013
 *   ok ucu uzunluğu          16.00 / 40 = 0.4000
 *   sınıf harfi              27.00 / 40 = 0.6750
 *
 * Dış hat XD'de 0.82 birim; en küçük uygulanabilir değer olan 1 px kullanılır.
 */
.dj-energy {
	--dj-energy-h: calc(52 * var(--dj-u));
	--dj-energy-point: calc(var(--dj-energy-h) * 0.4);
	--dj-energy-clip: polygon(0 0, calc(100% - var(--dj-energy-point)) 0, 100% 50%, calc(100% - var(--dj-energy-point)) 100%, 0 100%);
	--dj-energy-clip-inner: polygon(0 0, calc(100% - var(--dj-energy-point) + 1px) 0, 100% 50%, calc(100% - var(--dj-energy-point) + 1px) 100%, 0 100%);
	display: inline-flex;
	align-items: stretch;
	height: var(--dj-energy-h);
	flex: 0 0 auto;
	font-weight: var(--dj-fw-bold);
	line-height: 1;
}

/*
 * A–G ölçeği üç satırlık eşit ızgaradır. `space-between` ile dizildiğinde
 * satır kutuları (yazı tipi boyu kadar) mevcut alandan yüksek kalıyor,
 * negatif boşluk da öğeleri dengesiz itiyordu: G ok'a yapışıyor, A üstte
 * sıkışıyordu. Eşit satır + hücre içinde ortalama, mürekkebi tasarımdaki
 * yerine oturtur ve `line-height` sıkıştırmasına gerek bırakmaz.
 *
 * Onaylı PDF (etiket üstüne göre, 40 birime normalize): A merkezi 8.10,
 * ok merkezi 20.13, G merkezi 32.16; A ve G mürekkebi 10.0, ok 9.5.
 * Inter'de büyük harf mürekkebi `line-height: 1` kutusunda tam ortalıdır,
 * bu yüzden hücre merkezi doğrudan mürekkep merkezidir.
 */
.dj-energy__scale {
	display: grid;
	/*
	 * `minmax(0, 1fr)`: satır kutusu (yazı boyu kadar) mürekkepten yüksek
	 * olduğu için düz `1fr` satırları min-content'e kilitliyor ve üçü uç uca
	 * diziliyordu. Sıfır alt sınırla satırlar gerçekten eşit bölünür; harf
	 * kutusu satırdan taşsa da Inter'de büyük harf mürekkebi kutunun tam
	 * ortasında olduğu için mürekkep satır merkezine oturur ve kırpılmaz.
	 */
	grid-template-rows: repeat(3, minmax(0, 1fr));
	place-items: center;
	box-sizing: border-box;
	width: calc(var(--dj-energy-h) * 0.4325);
	padding-block: calc(var(--dj-energy-h) * 0.021);
	border: 1px solid var(--dj-ink);
	border-inline-end: 0;
	font-size: calc(var(--dj-energy-h) * 0.3425);
	line-height: 1;
	color: var(--dj-ink);
	background: var(--dj-white);
}

/* A ile G arasındaki yukarı ok: XD `Line 23` + `Path 3448`. */
.dj-energy__arrow {
	width: calc(var(--dj-energy-h) * 0.139);
	height: calc(var(--dj-energy-h) * 0.2385);
	flex: 0 0 auto;
	color: var(--dj-ink);
}

/*
 * Sınıf gövdesi: dış hat ve renk iki ayrı katman olarak çizilir, çünkü
 * `clip-path` ile kesilen bir kutuya kenarlık uygulanamaz. `isolation`
 * sayesinde negatif z-index'li katmanlar harfin altında kalır.
 */
.dj-energy__value {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(var(--dj-energy-h) * 1.4013);
	padding-inline-end: var(--dj-energy-point);
	color: var(--dj-white);
	font-size: calc(var(--dj-energy-h) * 0.675);
	/*
	 * XD `Path 3450`: sınıf harfi beyaz dolgu + 0.5 birim koyu kontur.
	 * `paint-order` sayesinde kontur dışa doğru çizilir; harfin içi ve
	 * sayacı (A'nın üçgeni) beyaz kalır.
	 */
	-webkit-text-stroke: calc(var(--dj-energy-h) * 0.0125) var(--dj-ink);
	paint-order: stroke fill;
	background: none;
}

.dj-energy__value::before,
.dj-energy__value::after {
	content: "";
	position: absolute;
}

.dj-energy__value::before {
	inset: 0;
	background: var(--dj-ink);
	clip-path: var(--dj-energy-clip);
	z-index: -2;
}

.dj-energy__value::after {
	inset: 1px 1px 1px 0;
	background: var(--dj-energy-color, var(--dj-gray-400));
	clip-path: var(--dj-energy-clip-inner);
	z-index: -1;
}

/* Enerji etiketinin oku yazım yönünü izler. */
[dir="rtl"] .dj-energy {
	--dj-energy-clip: polygon(100% 0, var(--dj-energy-point) 0, 0 50%, var(--dj-energy-point) 100%, 100% 100%);
	--dj-energy-clip-inner: polygon(100% 0, calc(var(--dj-energy-point) - 1px) 0, 0 50%, calc(var(--dj-energy-point) - 1px) 100%, 100% 100%);
}

[dir="rtl"] .dj-energy__value::after {
	inset: 1px 0 1px 1px;
}

/* Ürün kartındaki daha küçük varyant. */
.dj-card .dj-energy {
	--dj-energy-h: calc(40 * var(--dj-u));
}

/*
 * Tasarım kuralı açık: renkli gövdedeki büyük sınıf harfi HER SINIFTA
 * beyazdır. Kontrasta göre otomatik siyah/beyaz seçimi yapılmaz — açık
 * sınıflarda (C/D/E) harf siyaha dönüyordu, kaldırıldı. Soldaki küçük
 * A↑G ölçeği siyah kalır; onun rengi `.dj-energy__scale` tarafından verilir.
 */
.dj-energy[data-class="A"] { --dj-energy-color: #00a651; }
.dj-energy[data-class="B"] { --dj-energy-color: #51b848; }
.dj-energy[data-class="C"] { --dj-energy-color: #c1d82f; }
.dj-energy[data-class="D"] { --dj-energy-color: #fff200; }
.dj-energy[data-class="E"] { --dj-energy-color: #fdb913; }
.dj-energy[data-class="F"] { --dj-energy-color: #f37021; }
.dj-energy[data-class="G"] { --dj-energy-color: #ed1c24; }