/* Ürün detayı, ürün kartı ve teknik özellikler. */

.dj-product {
	padding-block-end: var(--dj-space-80);
}

/* ==================================================================
 * ÜRÜN DETAY — ÜST KATMAN
 *
 * Tek otorite `design/Ürün Detay.pdf` + `design/Dijitsu.xd`. Bütün
 * değerler **tasarım px** (1920 tabanı) ve `--dj-u` ile ölçeklenir.
 * Ölçüm yöntemi: PDF'in yerleştirme kutuları (PyMuPDF `get_image_info`),
 * XD düğüm geometrisi ve 1920 rasterinden piksel sınır kutuları.
 *
 * Sayfa ızgarası:  galeri 1071 · boşluk 30 · özet 610  (toplam 1711)
 * Galeri:          küçük görsel 120 · boşluk 74 · sahne 877
 * Sahne:           299 → 1176 yatay, 240 → 1010 dikey (877 × 770)
 * ================================================================== */

.dj-product__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) calc(610 * var(--dj-u));
	gap: var(--dj-gutter);
	align-items: start;
}

/* ------------------------------------------------------------------ */
/* Galeri                                                              */
/* ------------------------------------------------------------------ */

/*
 * Kullanıcı revizesi: tasarımın ana sahnesinde dar bir yan görünüm paketi
 * var; geniş ön görünüm aynı 74'lük boşlukla sağa yaslanmış duruyordu.
 * Boşluk 56'ya indi — medya alanı ve onun sol üst köşesindeki indirim
 * rozeti birlikte sola gelir. Küçük görsel kolonu, özet kolonu ve sağ kenar
 * değişmez.
 */
.dj-gallery {
	display: grid;
	grid-template-columns: calc(120 * var(--dj-u)) minmax(0, 1fr);
	gap: calc(43 * var(--dj-u));
	align-items: start;
}

.dj-gallery:not(:has(.dj-gallery__thumbs)) {
	grid-template-columns: minmax(0, 1fr);
}

.dj-gallery__thumbs {
	display: flex;
	flex-direction: column;
	gap: calc(20 * var(--dj-u));
}

/*
 * Kutu zemini sitenin onaylı açık gri yüzeyidir (`--dj-surface`) — anasayfa
 * kategori kartı, teknik özellik kartı ve yorum formu paneliyle aynı token.
 * Ayrı bir gri türetilmez.
 */
.dj-gallery__thumb {
	display: block;
	width: calc(120 * var(--dj-u));
	height: calc(120 * var(--dj-u));
	padding: 6px;
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-sm);
	background: var(--dj-surface);
	overflow: hidden;
	transition: border-color var(--dj-transition);
}

.dj-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Hover ve seçili durumda **yalnız kenar rengi** değişir; zemin beş kutuda
 * ve üç durumda da aynı kalır, kutu ölçüsü de değişmez.
 */
.dj-gallery__thumb:hover {
	border-color: var(--dj-ink);
	background: var(--dj-surface);
}

.dj-gallery__thumb.is-active {
	border-color: var(--dj-ink);
	background: var(--dj-surface);
}

/*
 * Medya sahnesi tasarımın 877 × 770'lik kutusudur ve **seçilen görselden
 * bağımsız olarak sabittir**: hiçbir galeri üyesi kutuyu büyütüp küçültmez,
 * özet kolonu yerinden oynamaz, sayfa katlanması zıplamaz.
 *
 * Üstteki bant indirim rozetine ayrılmıştır (tasarımda rozet 240 → 316);
 * ana görsel bu bandın altında başlar, rozet görselin üzerine binmez.
 * Tasarımda sahne görünür bir kart değil: çerçeve, zemin, köşe, gölge yok.
 */
.dj-gallery__stage {
	position: relative;
	box-sizing: border-box;
	aspect-ratio: 907 / 771;
	padding-block-start: calc(50 * var(--dj-u));
}

/*
 * Tasarımda rozet 299, 240 · 82 × 76 — sahnenin sol üst köşesi. Ürün
 * kartındaki rozet 85 × 83.7 ile aynı çizim, yalnız bu bağlamda tasarımın
 * ölçüsüne indirilir; kart kuralı değişmez.
 */
/*
 * Rozet sahnenin tam sol üst köşesine oturur: yatay ya da dikey hiçbir
 * içeri payı yok. Seçili görselin çizim kutusuyla, ölçeğiyle ya da sunum
 * meta'sıyla bağı yoktur — beş seçimde de aynı tek x/y.
 *
 * Genişlik sabit 82 u iken “İNDİRİM” satırı kırpılıyordu: etiket puntosu
 * (`--dj-fs-14`) sabit rem olduğu için kutuyla birlikte küçülmüyor, 1024'te
 * kutu 43,7 px'e inerken metin 62 px istiyordu. Kutu artık içeriğine göre
 * genişleyebilir; tasarım ölçüsü alt sınır olarak durur.
 */
.dj-gallery__badge {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: auto;
	min-width: calc(82 * var(--dj-u));
	z-index: 2;
}

.dj-gallery__badge .dj-badge-discount__label {
	padding: calc(7 * var(--dj-u)) 4px calc(6 * var(--dj-u));
}

.dj-gallery__badge .dj-badge-discount__value {
	padding: calc(8 * var(--dj-u)) 4px calc(9 * var(--dj-u));
}

/*
 * Görsel, bandın altında kalan 877 × 682'lik alana `contain` ile oturur:
 * kırpma, esnetme ve ürün bazlı istisna yok. Yatay paketler genişliği,
 * dikey paketler (yan görünüm, buzdolabı) yüksekliği doldurur; kalan
 * boşluk kendiliğinden oluşur.
 */
/*
 * Medya bandı, tasarım mockup'larından (Downloads/1–5.png) ölçüldü: görseller
 * x 268 → 1151, y 289 → 957 aralığında çiziliyor. Sahne 268'de başladığı ve
 * 1175'te bittiği için sağdan 24, alttan 53 pay bırakılır; üstteki 50 pay
 * rozet bandıdır. Kutu beş seçimde de aynıdır.
 *
 * Kadrajın kendisi ekin **sunum meta'sından** gelir (`_dijitsu_media_fit` →
 * `--dj-fit`, `--dj-fit-x`, `--dj-fit-y`). Tasarım her galeri üyesini elle
 * yerleştirdiği için ölçek ve konum üyeden üyeye değişir; meta yazılmamış
 * görsel olağan `contain` + ortalama davranışını sürdürür. Ürün kimliği,
 * SKU, dosya adı ya da sıra numarasına bakan kural yoktur.
 */
.dj-gallery__figure {
	margin: 0;
	height: 100%;
	display: grid;
	place-items: stretch;
	padding-inline-end: calc(24 * var(--dj-u));
	padding-block-end: calc(53 * var(--dj-u));
	box-sizing: border-box;
}

.dj-gallery__figure img {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	object-position: var(--dj-fit-x, 50%) var(--dj-fit-y, 50%);
	transform: scale(var(--dj-fit, 1));
	transform-origin: var(--dj-fit-x, 50%) var(--dj-fit-y, 50%);
}

/* ------------------------------------------------------------------ */
/* Özet                                                                */
/* ------------------------------------------------------------------ */

/*
 * Blok araları tasarımdan tek tek ölçüldü; ortak bir `gap` bu ritmi
 * tutturmuyor, bu yüzden boşluklar bloğun kendi üst kenar boşluğu olarak
 * verilir.
 */
.dj-summary {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/*
 * Marka işareti tasarımda 1206, 240 · 120 × 26. Kaynak başlıktaki ile aynı
 * satır içi SVG'dir (`assets/img/dijitsu-logo.svg`, viewBox 225 × 49,
 * `currentColor`) — raster yok, büyütmede bulanıklık olmaz. Ürün adının
 * yanında bir kademe küçük kaldığı için 136'ya, sonra %30 büyütülerek 177'ye
 * çıkarıldı (2026-10-02); oran (225/49) korunur, yükseklik kendiliğinden gelir.
 */
.dj-summary__brand-logo {
	width: calc(177 * var(--dj-u));
	height: auto;
	color: var(--dj-ink);
}

.dj-summary__brand-text {
	font-size: var(--dj-fs-20);
	font-weight: var(--dj-fw-bold);
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

/*
 * Özet dikey ritmi bir kademe sıkı (2026-10-02): masaüstünde Paylaş satırı
 * dahil özet ilk ekrana sığsın. Satır aralığı 1.12 (tasarımdaki 38/42
 * iki satırda harfleri birbirine yaklaştırıyordu).
 *
 * Tasarım: punto 42, satır yüksekliği 38, glif kutusu 1206 → 1830.
 * Ürün adı tasarımda **tek satır** ve 610'luk kolonu 14 px aşıyor; web
 * Inter'in ölçüsü de neredeyse aynı (622,7). Bu yüzden başlık kolonu
 * 30 tasarım px'e kadar aşabilir — punto küçültülmez, satır kırılmaz.
 * Dar ekranda bu pay kapanır ve metin doğal olarak sarar.
 */
.dj-summary__title {
	font-size: var(--dj-fs-36);
	font-weight: var(--dj-fw-medium);
	line-height: 1.12;
	margin: calc(14 * var(--dj-u)) 0 0;
}

@media (min-width: 1024px) {
	.dj-summary__title {
		width: max-content;
		max-width: calc(100% + 30 * var(--dj-u));
	}
}

/* Puan + barkod satırı — tasarım 349 → 367. */
.dj-summary__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--dj-space-8) calc(32 * var(--dj-u));
	margin-block-start: calc(18 * var(--dj-u));
	/* Tasarımda 16 — sabit rem 1440'ta 21 tasarım px'e çıkıyordu. */
	font-size: var(--dj-fs-16-fluid);
	line-height: calc(20 / 16);
	color: var(--dj-ink);
}

/* Puan grubu barkodun solunda, aynı taban çizgisinde. */
.dj-summary__rating {
	display: inline-flex;
	align-items: center;
	gap: var(--dj-space-8);
	color: inherit;
	text-decoration: none;
}

.dj-summary__rating:hover .dj-summary__rating-count,
.dj-summary__rating:focus-visible .dj-summary__rating-count {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Ayırıcılar — tasarım 406 ve 753. */
.dj-summary .dj-divider {
	margin-block-start: calc(26 * var(--dj-u));
}

/*
 * Tasarım: kırıntı yolu 193, galeri/özet 240. Üst boşluğu yol izini taşıyan
 * kap kurar (`base.css`); burada yalnız ürün detayı için daraltılır, diğer
 * sayfaların ritmi değişmez.
 */
.dj-main .dj-product .dj-container:has(> .dj-breadcrumb) {
	padding-block-start: calc(25 * var(--dj-u));
}

.dj-product .dj-breadcrumb {
	margin-bottom: calc(28 * var(--dj-u));
}

/* Fiyat satırı — stok bilgisi sağda. */
.dj-summary__pricing {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dj-space-16);
	flex-wrap: wrap;
	margin-block-start: calc(26 * var(--dj-u));
}

.dj-summary__price {
	font-size: var(--dj-fs-28);
	line-height: calc(38 / 28);
}

.dj-summary__price ins,
.dj-summary__price .amount {
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-ink);
	text-decoration: none;
}

.dj-summary__price del,
.dj-summary__price del .amount {
	color: var(--dj-gray-400);
}

.dj-summary__stock {
	font-size: var(--dj-fs-18);
	white-space: nowrap;
}

.dj-summary__stock.is-out {
	color: var(--dj-red);
}

/*
 * 1200–1439: özet sütunu dar (325–392 px). Fiyat puntosu sütunla orantılı
 * küçülür (25.5u, en az 16 px; 1200'de 16, 1439'da 19.1) ve aralık 8 px:
 * en uzun fiyat ("89.999,00 TL - 99.999,00 TL") ile "Stok: X adet" aynı
 * satırda kalır. Önceden stok alt satıra iniyor, özeti 39 px uzatıyordu.
 * 1440 ve üstü değişmez.
 */
@media (min-width: 1200px) and (max-width: 1439px) {
	.dj-summary__pricing {
		gap: var(--dj-space-8) 8px;
	}

	.dj-summary__price {
		font-size: max(1rem, calc(25.5 * var(--dj-u)));
		white-space: nowrap;
	}
}

/* Tasarımda yalnız etiket kalın; değer normal ağırlıkta kalır. */
.dj-summary__stock-label {
	font-weight: var(--dj-fw-semibold);
}

/*
 * Kısa açıklama — tasarım 16/22, 610 genişlik, masaüstünde iki satır.
 * Punto tasarım birimine bağlı; kısaltma, `line-clamp` ya da PHP budaması
 * yok.
 */
.dj-summary__short {
	margin-block-start: calc(22 * var(--dj-u));
	font-size: max(1rem, var(--dj-fs-16-fluid));
	line-height: calc(22 / 16);
	color: var(--dj-ink);
}

/*
 * Masaüstünde kısa açıklama en fazla 3 satır ("…" ile): özet Paylaş satırı
 * dahil ilk ekrana sığsın. Tam metin Ürün Açıklaması sekmesinde durur.
 */
@media (min-width: 1024px) {
	.dj-summary__short {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.dj-summary__short p {
		display: inline;
		margin: 0;
	}
}

/*
 * Masaüstünde iki eşit kolon: solda enerji etiketi + ilk belge, sağda
 * ikinci belge. Kolonlar `1fr 1fr` olduğu için üçüncü belge eklenirse
 * ızgara kendiliğinden alt satıra sarar; kural belge sayısından bağımsız.
 * Olmayan belge için bağlantı üretilmez.
 *
 * Hücreler satır boyunca esner (`stretch`), bağlantılar hücre içinde
 * dikey ortalanır: enerji etiketi ilk hücreyi büyütse de iki bağlantı
 * aynı çizgide kalır.
 */
.dj-summary__docs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: calc(24 * var(--dj-u)) calc(16 * var(--dj-u));
	margin-block-start: calc(26 * var(--dj-u));
}

.dj-summary__doc-cell {
	display: inline-flex;
	align-items: center;
	gap: calc(10 * var(--dj-u));
	min-width: 0;
}

.dj-summary__doc {
	display: inline-flex;
	align-items: center;
	gap: var(--dj-space-8);
	font-size: var(--dj-fs-16-fluid);
	font-weight: var(--dj-fw-medium);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.dj-summary__doc svg {
	width: calc(20 * var(--dj-u));
	height: calc(20 * var(--dj-u));
}


/* Enerji etiketi */

/* Enerji sınıfı rozeti: assets/css/energy.css (paylaşılan bileşen). */

/* Sepete ekleme */

/*
 * Tasarım: adet 1208, 794 · 122 × 60 — boşluk 33 — Sepete Ekle 1363 · 453 × 60.
 * İkinci satır 881'de: Hemen Al 429 × 60, boşluk 30, iki daire 60 × 60.
 * Satır arası 27.
 */
.dj-summary__cart {
	margin-block-start: calc(28 * var(--dj-u));
}

/*
 * WooCommerce `form.cart`'a temizleyici sözde öğeler basar; esnek kapsayıcıda
 * bunlar birer öğeye dönüşüp iki fazla boşluk yaratıyor ve Paylaş satırını
 * aşağı itiyordu.
 */
/*
 * Kurallar ürün özetine bağlı: sepet sayfası da `dj-cart-form` sınıfını
 * kullanıyor ve oradaki ritim değişmemeli.
 */
.dj-summary__cart .dj-cart-form {
	display: flex;
	flex-direction: column;
	gap: calc(20 * var(--dj-u));
}

.woocommerce div.product form.dj-cart-form::before,
.woocommerce div.product form.dj-cart-form::after {
	content: none;
}

/* WooCommerce `form.cart`'a 2em alt boşluk verir; Paylaş satırını itiyordu. */
.woocommerce div.product form.dj-cart-form {
	margin-bottom: 0;
}

.dj-summary__cart .dj-cart-form__row {
	display: flex;
	align-items: center;
	gap: calc(33 * var(--dj-u));
}

.dj-summary__cart .dj-cart-form__row--secondary {
	gap: calc(30 * var(--dj-u));
}

.dj-cart-form__submit {
	flex: 1 1 auto;
}

/*
 * Birincil CTA'nın genel hover'ı (#101213 → `--dj-ink-deep`) bu boyuttaki
 * bir düğmede gözle seçilmiyordu. Ürün özetindeki iki CTA, temanın kendi
 * buton dilinden **`.dj-btn--outline`** görünümüne çevrilir: zemin beyaz,
 * metin ve kenar mürekkep. Yeni bir efekt icat edilmedi; kenar kalınlığı
 * (1 px) zaten var olduğu için ölçü, konum ve yazı kalınlığı değişmez.
 * Kural yalnız ürün özetine bağlı — anasayfa, kart ve sepet düğmeleri
 * genel davranışını sürdürür. Seçici, temanın `woocommerce.css` dosyasındaki
 * `.woocommerce button.button:hover` kuralını (aynı özgüllükte ama sonra
 * yüklenen) geçecek kadar özgülleştirildi.
 */
.woocommerce .dj-summary__cart button.dj-btn--primary.dj-cart-form__submit:hover,
.woocommerce .dj-summary__cart button.dj-btn--primary.dj-cart-form__submit:focus-visible {
	background: var(--dj-white);
	border-color: var(--dj-ink);
	color: var(--dj-ink);
}

/*
 * "Hemen Al": ikincil CTA (`.dj-cta--secondary` — beyaz, çerçeveli, oklu);
 * yüksekliği ve puntosu yanındaki "Sepete Ekle" ile aynı satır ölçüsünde.
 * Ortak CTA kuralı `:is(…, .dj-cta .elementor-button)` (0,2,0) özgüllüğündedir;
 * seçici satır kapsayıcısıyla bir kademe güçlü.
 */
.dj-cart-form__row button.dj-cart-form__buy-now {
	flex: 1 1 auto;
	min-height: var(--dj-button-height);
	padding-inline: var(--dj-space-24);
	font-size: var(--dj-fs-20);
}

.dj-qty {
	display: inline-flex;
	align-items: center;
	height: var(--dj-button-height);
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-pill);
	padding: 0 6px;
	flex: 0 0 auto;
}

/*
 * Tasarımda adet seçici 122 × 60, köşe 30, kenar 1 px `#dee2e6`, zemin
 * beyaz. Ölçü tam tutsun diye parçalar sabitlendi: 36 + 48 + 36 + 2 kenar.
 * Kural yalnız ürün özetine bağlı; sepet sayfası ve çekmecesi kendi
 * stilinde kalır.
 */
.dj-summary__cart .dj-qty {
	width: calc(122 * var(--dj-u));
	justify-content: space-between;
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-pill);
	background: var(--dj-white);
	padding: 0;
}

.dj-summary__cart .dj-qty .quantity,
.dj-summary__cart .dj-qty .dj-qty__input {
	width: calc(48 * var(--dj-u));
}

.dj-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(36 * var(--dj-u));
	height: 100%;
	color: var(--dj-ink);
}

.dj-qty__btn svg {
	width: calc(18 * var(--dj-u));
	height: calc(18 * var(--dj-u));
}

.dj-qty .quantity {
	margin: 0;
}

.dj-qty__input,
.dj-qty input[type="number"] {
	width: calc(44 * var(--dj-u));
	height: calc(44 * var(--dj-u));
	border: 0;
	background: transparent;
	text-align: center;
	font-size: var(--dj-fs-20);
	font-weight: var(--dj-fw-bold);
	-moz-appearance: textfield;
	appearance: textfield;
}

.dj-qty input[type="number"]::-webkit-outer-spin-button,
.dj-qty input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dj-icon-btn.is-active {
	border-color: var(--dj-ink);
	background: var(--dj-ink);
	color: var(--dj-white);
}

/*
 * Favori düğmesi — kartta ve Hızlı Bakış'ta ortak davranış.
 *
 * Yuvarlak ikon butonunun etkin görünümü (siyah zemin + beyaz ikon) favori
 * için doğru değil: tasarımda dolan şey kalbin kendisi. Dolgu yalnız XD
 * `Path 3498`in dış konturundan üretilen `dj-icon__fill` path'ine verilir;
 * sarmalayıcıya, gruba veya arka plana değil. Kutu ölçüsü değişmez.
 */
/*
 * Kart ve çekmecede favorinin etkin görünümü kalbi doldurur: düğme
 * fotoğrafın üstünde yüzer, zemini siyaha çevirmek o bağlamda doğru değil.
 */
.dj-card__fav.is-active,
.dj-card__fav.is-active:hover,
.dj-drawer .dj-fav.is-active,
.dj-drawer .dj-fav.is-active:hover {
	border-color: var(--dj-ink);
	background: var(--dj-white);
	color: var(--dj-ink);
}

/*
 * Ürün detayında favori ve karşılaştırma yan yana iki eşdeğer denetimdir:
 * etkin görünüm ortak `.dj-icon-btn.is-active` dilidir — siyah daire, siyah
 * kenar, beyaz ikon. Fark yalnız ikonun kendisidir (kalp / karşılaştırma
 * okları); kalp **dolmaz**, beyaz kontur olarak kalır.
 */
.dj-summary__cart .dj-fav.is-active .dj-icon__fill,
.dj-summary__cart .dj-fav.is-active:hover .dj-icon__fill {
	fill: none;
}

/*
 * Favori hover'ı: kalp önce yarı dolarak niyetini gösterir, tıklamadan
 * sonra tam dolu kalır. Kutu ölçüsü, gövde kalınlığı ve konum değişmez;
 * ölçek yalnız tıklama nabzında kullanılır.
 */
/*
 * Ürün detayında favoriye özel bir hover dolgusu yoktur: imleç ve odak
 * geri bildirimi her iki denetimde de ortak `.dj-icon-btn:hover`
 * kenar rengiyle verilir. Yarı dolu kalp yalnız kart bağlamında kalır.
 */
@media (hover: hover) {
	.dj-card__fav:not(.is-active):hover .dj-icon__fill {
		fill: currentColor;
		fill-opacity: 0.35;
	}
}

.dj-card__fav:not(.is-active):focus-visible .dj-icon__fill {
	fill: currentColor;
	fill-opacity: 0.35;
}

.dj-fav .dj-icon__fill {
	transition: fill var(--dj-transition), fill-opacity var(--dj-transition);
}

.dj-fav.is-active .dj-icon__fill {
	fill: currentColor;
}

/* Tıklamadan hemen sonra kısa bir nabız; yalnız `transform` değişir. */
.dj-fav.is-pulse svg {
	animation: dj-fav-pulse 200ms ease-out;
}

@keyframes dj-fav-pulse {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.dj-fav.is-pulse svg {
		animation: none;
	}
}

.dj-icon-btn--sm {
	width: calc(44 * var(--dj-u));
	height: calc(44 * var(--dj-u));
}

.dj-icon-btn--sm svg {
	width: calc(18 * var(--dj-u));
	height: calc(18 * var(--dj-u));
}

/* Stok durumu */

.stock {
	margin: 0;
	font-size: var(--dj-fs-16);
}

.stock.out-of-stock {
	color: var(--dj-red);
}

/* Paylaş */

/* Paylaş satırı CTA grubunun 26u altında (önceden 38u). */
.dj-share {
	display: flex;
	align-items: center;
	gap: var(--dj-space-16);
	line-height: calc(20 / 16);
	margin-block-start: calc(26 * var(--dj-u));
}

.dj-share__label,
.dj-share {
	font-size: var(--dj-fs-16-fluid);
}

.dj-share__label {
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-semibold);
}

.dj-share__list {
	display: flex;
	align-items: center;
	gap: var(--dj-space-16);
	list-style: none;
}

.dj-share__link svg {
	width: calc(20 * var(--dj-u));
	height: calc(20 * var(--dj-u));
}

/* ------------------------------------------------------------------ */
/* Sekmeler                                                            */
/* ------------------------------------------------------------------ */

.dj-tabs {
	padding-block: var(--dj-space-100) var(--dj-space-60);
}

/*
 * Sekme puntosu üretim ölçeğine çekildi: tasarımın 28'i 1920'de 22'de
 * durur, 1440 ve altında 21'e iner. Ölçek tasarımın oranını izlemeye devam
 * eder, yalnız üst sınırı vardır.
 */
.dj-tabs {
	--dj-tab-size: clamp(18px, calc(28 * var(--dj-ut)), 22px);
}

.dj-tabs__nav {
	display: flex;
	align-items: flex-end;
	gap: var(--dj-space-60);
	border-bottom: 1px solid var(--dj-line);
	overflow-x: auto;
	scrollbar-width: none;
}

.dj-tabs__nav::-webkit-scrollbar {
	display: none;
}

/*
 * Tasarım (Ürün Detay.pdf): sekme yazısının taban çizgisinden ayırıcı
 * çizgiye 36. Punto 28'in satır kutusu tabanın altında ~11 bıraktığı için
 * alt iç boşluk 25.
 */
.dj-tabs__tab {
	position: relative;
	padding-bottom: calc(25 * var(--dj-u));
	font-size: var(--dj-tab-size);
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-gray-400);
	white-space: nowrap;
	transition: color var(--dj-transition);
}

.dj-tabs__tab::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	/* Tasarım: etkin çizgi 3. */
	height: max(2px, calc(3 * var(--dj-u)));
	background: var(--dj-ink);
	opacity: 0;
	transition: opacity var(--dj-transition);
}

.dj-tabs__tab:hover {
	color: var(--dj-muted);
}

.dj-tabs__tab.is-active {
	color: var(--dj-ink);
	font-weight: var(--dj-fw-bold);
}

.dj-tabs__tab.is-active::after {
	opacity: 1;
}

/*
 * Tasarım revizyonu: paneller kendi içeriklerinin doğal yüksekliği
 * kadar yer kaplar. Sabit height / min-height kullanılmaz; açıklama
 * sekmesinin uzunluğu diğer sekmelere taşınmaz.
 *
 * Tasarım ritmi: bir önceki çizgiden (sekme ayırıcısı ya da grubun son
 * satırı) grup başlığının taban çizgisine 93. Başlığın satır kutusu tabanı
 * 25'te taşıdığı için panel üstü ve gruplar arası boşluk 68.
 */
.dj-tabs__panel {
	padding-top: clamp(32px, calc(40 * var(--dj-u)), 40px);
}

.dj-tabs__notice {
	color: var(--dj-muted);
	font-size: var(--dj-fs-18);
	max-width: calc(720 * var(--dj-u));
	margin: 0;
}

.dj-prose {
	max-width: calc(900 * var(--dj-u));
	line-height: var(--dj-lh-relaxed);
}

/* ------------------------------------------------------------------ */
/* Teknik özellikler                                                   */
/*                                                                     */
/* Her grup kendi yumuşak kartıdır; masaüstünde kartlar iki kolona      */
/* akar. Kolon seçimi tamamen ızgaranın doğal akışıdır — grup adına,    */
/* sırasına ya da satır sayısına bakan hiçbir kural yoktur.             */
/*                                                                     */
/* Zemin ve köşe yarıçapı anasayfa kategori kartının kendi değerleridir */
/* (`--dj-surface` + `--dj-radius-md`); yeni bir gri türetilmez.        */
/* Gölge yok, çerçeve yok.                                             */
/* ------------------------------------------------------------------ */

/*
 * Alan sekme panelinin tam genişliğini kullanır: iç içe bir `max-width`
 * yok, bu yüzden sekmeler, teknik föy, yorumlar ve benzer ürünler aynı
 * yatay ızgarada durur.
 */
.dj-specs {
	width: 100%;
	max-width: none;
	margin-block-end: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: clamp(24px, calc(32 * var(--dj-u)), 32px);
}

/*
 * Kartlar kendi içeriklerinin doğal yüksekliğindedir; `align-items: start`
 * ile yapay eşitleme yapılmaz. Tek satırlık grup tek satır boyunda kalır.
 */
.dj-specs__group {
	min-width: 0;
	background: var(--dj-surface);
	border-radius: var(--dj-radius-md);
	padding: clamp(24px, calc(28 * var(--dj-u)), 28px);
	border: 0;
	box-shadow: none;
}

.dj-specs__group-title {
	font-size: clamp(18px, calc(20 * var(--dj-ut)), 20px);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
	color: var(--dj-ink);
	margin-block-end: clamp(16px, calc(20 * var(--dj-u)), 20px);
	padding-block-end: 0;
	border-bottom: 0;
}

.dj-specs__list {
	margin: 0;
}

/*
 * Satır adımı ~50: 12 + 12 iç boşluk, 14–15 puntonun satır kutusu ve
 * 1 px ayırıcı. `padding-block` kısayolu `calc(… var(--dj-u))` ile
 * geçersiz sayılabildiği için uzun yazım kullanılır. Kartın kendisi grubu
 * ayırdığı için son satırda çizgi yoktur.
 */
.dj-specs__row {
	display: grid;
	grid-template-columns: minmax(130px, 42%) minmax(0, 58%);
	column-gap: var(--dj-space-16);
	align-items: center;
	min-height: 50px;
	padding-block-start: 12px;
	padding-block-end: 12px;
	border-bottom: 1px solid var(--dj-line);
}

.dj-specs__row:last-child {
	border-bottom: 0;
	padding-block-end: 0;
}

.dj-specs__label {
	font-size: clamp(14px, calc(15 * var(--dj-ut)), 15px);
	font-weight: var(--dj-fw-semibold);
	line-height: var(--dj-lh-snug);
	color: var(--dj-ink);
	margin: 0;
}

.dj-specs__value {
	font-size: clamp(14px, calc(15 * var(--dj-ut)), 15px);
	font-weight: var(--dj-fw-regular);
	line-height: var(--dj-lh-snug);
	color: var(--dj-ink);
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Yorumlar                                                            */
/*                                                                     */
/* Üstte tam genişlikte özet (ortalama + dağılım), altında masaüstünde  */
/* iki kolon: solda liste, sağda kompakt form paneli. Bölümün boyu      */
/* listeyle belirlenir; form yapay boşlukla aşağı itilmez.              */
/* ------------------------------------------------------------------ */

/*
 * Yorumlar da sekme panelinin tam genişliğini kullanır; iç içe `max-width`
 * yok. Sol/sağ kenarları teknik föy ve sekme çubuğuyla birebir aynı.
 */
.dj-reviews {
	width: 100%;
	max-width: none;
}

/*
 * İki kolon: solda yorum içeriğinin tamamı (başlık, puan özeti, liste),
 * sağda form. `align-items: start` ile formun üst kenarı sol sütunun ilk
 * Y hattında başlar — listenin boyu formu aşağı itmez, form da yapay bir
 * üst boşlukla itilmez.
 */
.dj-reviews__body {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(380px, 0.9fr);
	align-items: start;
	gap: 48px;
}

.dj-reviews__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, calc(28 * var(--dj-u)), 28px);
}

.dj-reviews__col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(24px, calc(32 * var(--dj-u)), 32px);
}

.dj-reviews__title {
	font-size: clamp(18px, calc(22 * var(--dj-ut)), 22px);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
	margin: 0;
}

.dj-reviews__rule {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--dj-line);
}

/* --- Özet: ortalama + dağılım --- */

.dj-reviews__summary {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, calc(48 * var(--dj-u)), 48px);
}

.dj-reviews__score {
	display: grid;
	justify-items: start;
	gap: 6px;
}

.dj-reviews__average {
	font-size: clamp(44px, calc(48 * var(--dj-ut)), 48px);
	font-weight: var(--dj-fw-bold);
	line-height: 1;
	color: var(--dj-ink);
}

.dj-reviews__score .dj-stars svg {
	width: 18px;
	height: 18px;
}

.dj-reviews__score-note {
	font-size: var(--dj-fs-14);
	color: var(--dj-muted);
}

.dj-reviews__dist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.dj-reviews__dist-row {
	display: grid;
	grid-template-columns: max-content minmax(0, 320px) max-content;
	align-items: center;
	gap: 12px;
}

.dj-reviews__dist-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--dj-fs-14);
	color: var(--dj-muted);
	white-space: nowrap;
}

.dj-reviews__dist-label svg {
	width: 13px;
	height: 13px;
	color: var(--dj-amber);
}

.dj-reviews__dist-track {
	display: block;
	block-size: 7px;
	border-radius: 999px;
	background: var(--dj-surface);
	overflow: hidden;
}

.dj-reviews__dist-fill {
	display: block;
	block-size: 100%;
	background: var(--dj-amber);
}

.dj-reviews__dist-count {
	font-size: var(--dj-fs-14);
	color: var(--dj-muted);
	font-variant-numeric: tabular-nums;
}

/* --- Liste --- */

.dj-reviews__comments {
	min-width: 0;
}

.dj-reviews__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * WooCommerce yorum listesini iki kimlik + üç sınıfla boyar: 32 px'lik
 * mutlak konumlu avatar, çerçeveli gri metin kutusu, paragraf altı 1em.
 * Tasarım dili düz çizgi olduğu için bu kurallar kendi bağlamımızda aynı
 * güçle geçersiz kılınır; `!important` yok, seçicide bir sınıf fazlası
 * yeterli.
 */
#reviews.dj-reviews #comments ol.commentlist.dj-reviews__list li {
	margin: 0;
	padding: 0;
	position: relative;
	border: 0;
}

#reviews.dj-reviews #comments ol.commentlist.dj-reviews__list li + li {
	border-top: 1px solid var(--dj-line);
}

#reviews.dj-reviews #comments ol.commentlist.dj-reviews__list li .comment_container {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: start;
	gap: 18px;
	padding-block-start: clamp(24px, calc(28 * var(--dj-u)), 28px);
	padding-block-end: clamp(24px, calc(28 * var(--dj-u)), 28px);
	background: none;
	border-radius: 0;
}

#reviews.dj-reviews #comments ol.commentlist.dj-reviews__list li img.avatar {
	position: static;
	float: none;
	width: 48px;
	height: 48px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dj-surface);
}

#reviews.dj-reviews #comments ol.commentlist.dj-reviews__list li .comment-text {
	min-width: 0;
	display: grid;
	gap: 4px;
	align-content: start;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

#reviews.dj-reviews #comments ol.commentlist.dj-reviews__list li .star-rating {
	font-size: 16px;
	float: none;
	margin: 0;
}

#reviews.dj-reviews #comments ol.commentlist.dj-reviews__list li .meta {
	font-size: var(--dj-fs-14);
	color: var(--dj-muted);
	margin: 0;
}

#reviews.dj-reviews #comments ol.commentlist.dj-reviews__list li .meta strong {
	color: var(--dj-ink);
	font-weight: var(--dj-fw-semibold);
}

#reviews.dj-reviews #comments ol.commentlist.dj-reviews__list li .description p {
	font-size: 14px;
	line-height: var(--dj-lh-normal);
	margin: 0;
}

/* --- Form paneli --- */

.dj-reviews__form {
	min-width: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	background: var(--dj-surface);
	border: 1px solid var(--dj-line);
	border-radius: 12px;
	padding: clamp(28px, calc(32 * var(--dj-u)), 32px);
}

#reviews #reply-title {
	font-size: 20px;
	font-weight: var(--dj-fw-bold);
	display: block;
	margin-bottom: var(--dj-space-12);
}

#reviews #review_form,
#reviews .comment-form {
	width: 100%;
	max-width: none;
}

#reviews .comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--dj-space-16);
}

#reviews .comment-form > p,
#reviews .comment-form > .comment-form-rating {
	margin: 0;
}

/*
 * Yardımcı cümle ikincil kalır ama okunur: `--dj-muted` yerine bir tık
 * koyu olan `--dj-gray-600`. Alan etiketleri ve gövde metni ana metin
 * rengini kullanır — devre dışı görünmezler.
 */
#reviews .comment-notes {
	font-size: var(--dj-fs-14);
	line-height: var(--dj-lh-normal);
	color: var(--dj-gray-600);
	margin: 0 0 var(--dj-space-4);
}

#reviews .comment-form label {
	display: block;
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-medium);
	color: var(--dj-ink);
	margin-bottom: 6px;
}

/*
 * Panel açık gri olsa da alanların iç yüzeyi beyaz kalır; böylece yazı
 * alanı zeminden net ayrışır.
 */
#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form textarea {
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-md);
	padding: 12px 16px;
	font-size: var(--dj-fs-15);
	color: var(--dj-ink);
	background: var(--dj-white);
}

#reviews .comment-form input[type="text"]::placeholder,
#reviews .comment-form input[type="email"]::placeholder,
#reviews .comment-form textarea::placeholder {
	color: var(--dj-muted);
}

#reviews .comment-form textarea {
	min-height: 160px;
	resize: vertical;
}

/*
 * Puan girişi: WooCommerce `select`'i JavaScript ile beş bağlantıya
 * çevirir ve `select` gizlenerek doğal gönderim korunur. Sunumun
 * WooCommerce'in `.woocommerce` sarmalayıcısına bağlı kalmaması için
 * yıldız çizimi burada da tanımlanır — bağlam ne olursa olsun **beş**
 * yıldız çizilir, bağlantı metni gizlenir.
 */
#reviews .comment-form-rating label {
	margin-bottom: 4px;
}

#reviews p.stars {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	line-height: 1;
	font-size: 22px;
}

#reviews p.stars > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#reviews p.stars a {
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	text-indent: -999em;
	overflow: hidden;
	color: var(--dj-amber);
	text-decoration: none;
	box-shadow: none;
}

#reviews p.stars a::before {
	content: "\e021";
	display: block;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 1em;
	height: 1em;
	line-height: 1;
	font-family: "WooCommerce", "star";
	font-weight: 400;
	text-indent: 0;
}

/*
 * Dolu/boş durumlar WooCommerce'in kendi kademelenmesiyle **aynı sırada**
 * yinelenir: taban boş yıldız, imlecin sağındakiler boş kalır, imlecin
 * soluna kadar dolar; seçim yapıldığında seçilen ve solundakiler dolu,
 * sağındakiler boş. Tek fark seçicilerin `#reviews` ile başlaması — böylece
 * çizim `.woocommerce` sarmalayıcısı olsun olmasın aynı kalır ve her
 * durumda **beş** yıldız çizilir.
 */
#reviews p.stars a:hover ~ a::before {
	content: "\e021";
}

#reviews p.stars:hover a::before {
	content: "\e020";
}

#reviews p.stars.selected a.active::before {
	content: "\e020";
}

#reviews p.stars.selected a.active ~ a::before {
	content: "\e021";
}

#reviews p.stars.selected a:not(.active)::before {
	content: "\e020";
}

#reviews p.stars a:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 3px;
}

#reviews .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--dj-space-8);
}

#reviews .comment-form-cookies-consent label {
	margin: 0;
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-regular);
	line-height: var(--dj-lh-normal);
	color: var(--dj-ink);
}

#reviews .comment-form-cookies-consent input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var(--dj-ink);
	width: 16px;
	height: 16px;
	min-height: 0;
	flex: 0 0 auto;
}

/*
 * Gönder düğmesi `<p class="form-submit">` içinde durduğu için esnek
 * kutunun doğrudan çocuğu değildir; genişliği sarmalayıcıdan değil
 * kendisinden gelir.
 */
#reviews .comment-form .form-submit {
	margin: 0;
}

#reviews .comment-form .submit {
	display: block;
	width: 100%;
	min-height: 50px;
	padding: 0 var(--dj-space-24);
	border-radius: var(--dj-radius-pill);
	background: var(--dj-ink);
	color: var(--dj-white);
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-bold);
	border: 1px solid var(--dj-ink);
	cursor: pointer;
	transition: background var(--dj-transition), color var(--dj-transition);
}

#reviews .comment-form .submit:hover,
#reviews .comment-form .submit:focus-visible {
	background: var(--dj-white);
	color: var(--dj-ink);
}

.woocommerce-noreviews {
	color: var(--dj-muted);
}

/* ------------------------------------------------------------------ */
/* Ürün kartı                                                          */
/* ------------------------------------------------------------------ */

/* Tasarım ölçüsü: 537x750, iç boşluk 30/50/50. */

/*
 * Satır düzeni ve ayrılmış alanlar
 *
 * Kartın satırları (rozet / sahne / bilgi / kategori / başlık / fiyat) her
 * üründe aynı Y'de durmalı. Önceden yalnız fiyat hizalıydı: başlık iki
 * satıra çıktığında esneyen görsel sahnesi farkı yutuyor, sahne ile onun
 * üstündeki her şey 28.5 px kayıyordu — üstelik görsel de o kadar küçülüyordu.
 *
 * Çözüm, farkı yutacak esnek bir alan bırakmamak: başlık ürün adı tek satır
 * bile olsa **iki satırlık** alan ayırır, kategori bir satırlık. Kart en az
 * yüksekliği de ayrılan ikinci satır kadar artar, böylece görsel sahnesi
 * tasarımdaki ölçüsünü birebir korur (dondurulmuş sahne kuralı bozulmaz) ve
 * tüm kartlar aynı yüksekliğe oturur.
 *
 * Değerler tasarımın kendi tipografisinden türetilir; ölçülmüş piksel
 * yazılmaz.
 */
.dj-card {
	--dj-card-title-lines: 2;
	--dj-card-title-line: calc(1.583 * var(--dj-fs-24));
	--dj-card-category-line: calc(var(--dj-lh-normal) * var(--dj-fs-14-fluid));

	display: flex;
	flex-direction: column;
	gap: var(--dj-space-16);
	background: var(--dj-surface);
	border-radius: var(--dj-card-radius);
	padding: var(--dj-space-30) var(--dj-card-padding) var(--dj-card-padding-b);
	height: 100%;
	min-height: calc(
		750 * var(--dj-u) + (var(--dj-card-title-lines) - 1) * var(--dj-card-title-line)
	);
	position: relative;
}

/*
 * XD `Component 26` iki state'te de kart dikdörtgenine filtre uygulamıyor
 * (`style.filters` boş): tasarımda hover'da gölge/yükselme yok. Hover,
 * eylem denetimleriyle anlatılır.
 */

/*
 * Rozet şeridi ayrılmış bir banttır, içeriğine göre büyümez.
 *
 * İndirim rozeti iki satırlı olduğu için puan rozetinden yüksek: `min-height`
 * ile şerit ürüne göre 3.5–14.3 px arasında değişiyor, altındaki her satır
 * o kadar kayıyordu. Ölçü sabitlenince rozet gerektiğinde bandın altına
 * taşar — tasarımda zaten görsel sahnesiyle aynı bandı paylaşır (sahne
 * `--dj-card-image-rise` kadar yukarı çekilir), bu yüzden görünüm değişmez.
 */
.dj-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--dj-space-12);
	height: calc(79 * var(--dj-u));
}

.dj-card__head-spacer {
	display: block;
	width: 1px;
}

/*
 * Kullanıcı kararı: indirim rozeti normal ve hover durumunda BİREBİR aynı
 * kalır — kutu, renk, tipografi ve konum değişmez.
 *
 * Puan rozeti ise tasarımda hover'da yok: yerini hızlı bakış sütunu alır
 * (XD'de `Ellipse 43` puan rozetiyle aynı kutuda, 397–487 / 30–90). Rozet
 * `display` ile değil, görünürlükle kaldırılır; kutusu yerinde durduğu için
 * başlık satırı ve kartın geri kalanı kımıldamaz.
 */
.dj-card:is(:hover, :focus-within) .dj-badge-rating {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/*
 * Görsel sahnesi — DONDURULDU (kullanıcı onayı, 13.09.2026).
 * Referans davranış: DCM8000. Ölçü ya da yerleşim değiştirilmeyecek.
 *
 * XD: kart 536.7×750 sabit; ürün görseli bu alanın içine sığar. Görsel akışta
 * kalırsa dikey kesitler kartı boyuna büyütür — bu yüzden mutlak konumludur ve
 * kart yüksekliğini kesitin oranı belirlemez.
 *
 * Kutunun ölçüsü doğrudan medya alanından türetilir: yanlarda pay, altta
 * hover'da beliren “Sepete Ekle” şeridi için ayrılan yükseklik. Yüzde tabanlı
 * `max-height` esnek kutuda kapsayıcının dolgusunu yok sayıp görseli taşırdığı
 * için bu yol seçildi.
 *
 * Ölçü tasarımdan gelir, eylem şeridinden değil. XD Hover State'te şerit
 * ürünün alt bölümüne biner ve görselin boyunu belirlemez; burada da öyle.
 * Kutu sahnenin tamamı kadar geniş, `--dj-card-image-height` kadar
 * yüksektir. 1920'de ürün 110.6 – 451.1 (boy 340.5) — tasarım 110.3 – 459.7
 * (349.3). Hover 1.02'de 107.2'ye çıkar, sahnenin üst kenarını aşmaz.
 *
 * Sistem geneldir — SKU, ürün kimliği ya da kategoriye özel kural yoktur.
 * Oran korunur (`contain`), iki eksende ortalanır, `cover` kullanılmaz.
 *
 * Kaynak kadrajı farklı olan ürünlerde ölçek ve konum farkı burada değil,
 * sunum asseti katmanında normalize edilir (`_dijitsu_card_image`). Karar
 * kaydı: `project-files/docs/kart-packshot-normalizasyonu.md`.
 */
.dj-card__media img {
	position: absolute;
	inset-block-start: var(--dj-card-image-lift);
	inset-inline: 0;
	width: 100%;
	height: calc(var(--dj-card-image-height) - var(--dj-card-image-lift));
	margin-inline: auto;
	object-fit: contain;
	object-position: center center;
	transition: transform var(--dj-transition-slow);
	transform-origin: 50% 50%;
}

@media (hover: hover) {
	.dj-card:hover .dj-card__media img {
		transform: scale(1.02);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dj-card__media img {
		transition: none;
	}

	.dj-card:hover .dj-card__media img {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* Aile sunum geometrisi                                               */
/*                                                                     */
/* Yukarıdaki sahne kuralı ailelerin ortak tabanıdır ve dokunulmaz.     */
/* Fiziksel oranı ortak tabanla örtüşmeyen aileler kendi bandını        */
/* burada bildirir. Kanca ürünün ailesidir (`data-dj-family`, kart      */
/* şablonunda `dijitsu_product_family()` çıktısı); ürün kimliği, SKU,   */
/* sıra ya da dosya adına göre kural yoktur. Yeni aile eklemek bu       */
/* bloğa bir kardeş kural yazmaktır; beyaz eşya ve iklimlendirme        */
/* bildirmediği için ortak tabanda kalır ve değişmez.                   */
/*                                                                     */
/* Televizyon — ölçüldü (1440, çapa bandı rozet altı 81.75 → belge      */
/* satırı üstü 382.19): ortak tabanda üst nefes payı 3.68, alt 39.12    */
/* idi; görsel rozete yapışıp belge satırından kopuyordu. Bandı         */
/* `--dj-card-image-rise` kadar aşağıdan başlatıp sahnenin altına kadar */
/* uzatmak iki ucu da kartın kendi satır boşluğuna (`--dj-space-16`)    */
/* eşitler; `contain` kalan payı iki uca eşit dağıtır.                  */
/*                                                                     */
/* Yatay: televizyon tuvalinin oranı bandın en dar masaüstündeki        */
/* oranından geniştir, bu yüzden `contain` genişlikten sınırlar ve      */
/* görsel bandın tamamını kullanır — sol kenar indirim rozetinin dış    */
/* çizgisine, sağ kenar eylem ikonlarının dış çizgisine oturur.         */
/* ------------------------------------------------------------------ */

/*
 * `height: auto` kutuyu dosyanın kendi oranından türetir (genişlik zaten
 * bandın tamamı). İki uç da bağlandığı ve boy belirli olduğu için kalan
 * payı `margin-block: auto` iki uca eşit dağıtır — görsel bandın tam
 * ortasında durur.
 */
.dj-card[data-dj-family="televizyon"] .dj-card__media img {
	inset-block: var(--dj-card-image-rise) 0;
	height: auto;
	/*
	 * Boy dosyanın kendi oranından gelir; bandı aşamaz. Tipografi 1440'ın
	 * altında tabana oturduğu için bant en dar masaüstünde (1024) orantısal
	 * olarak kısalır ve tuvalin boyu oraya sığmaz — sınır olmasa `overflow:
	 * hidden` ürünün ayaklarını keserdi. Sınır devreye girdiğinde `contain`
	 * görseli bir kademe küçültür; kırpma olmaz, tüm televizyonlarda aynı
	 * ölçüde olur.
	 */
	max-block-size: calc(100% - var(--dj-card-image-rise));
	margin-block: auto;
}

/*
 * Görsel bandın tamamını kullandığı için hover büyütmesi taşar ve
 * `overflow: hidden` ürünü keserdi. Televizyonda ölçek kaldırıldı;
 * kartın diğer hover davranışları (eylem şeridi, hızlı bakış, favori)
 * aynen sürer.
 */
@media (hover: hover) {
	.dj-card[data-dj-family="televizyon"]:hover .dj-card__media img {
		transform: none;
	}
}

.dj-card__media {
	position: relative;
	flex: 1 1 auto;
	/*
	 * Sahne başlık satırının altından yukarı çekilir: tasarımda rozet ile
	 * ürün görseli aynı bandı paylaşır, alt alta dizilmez. Kart yüksekliği
	 * değişmez — esneyen alan payı geri alır.
	 */
	margin-block-start: calc(-1 * var(--dj-card-image-rise));
	/* Görsel mutlak konumlu; kart yüksekliği serbest kaldığında (dar
	   ekran, liste görünümü) alanın kendi ölçüsü olmalı. */
	min-height: calc(260 * var(--dj-u));
	overflow: hidden;
}

/*
 * Bağlantı katmanı medya kutusunun tamamını kaplar; tıklama alanı görselin
 * çizim ölçüsüne bağlı değildir.
 */
.dj-card__media-link {
	position: absolute;
	inset: 0;
	display: block;
}

/*
 * Bilgi satırı — XD: enerji etiketi 50,515 · 73.42 × 40, “Ürün Bilgi Formu”
 * 133'ten başlar (aralık 9.65), favori aynı optik merkezde (535.3) ve içerik
 * sütununun sağ kenarına hizalı. Satır akışın içindedir; favori yalnız
 * görünürlük değiştirdiği için hover'da hiçbir şey kaymaz.
 */
.dj-card__docs {
	display: flex;
	align-items: center;
	gap: calc(9.65 * var(--dj-u));
	min-height: calc(40 * var(--dj-u));
}

/* Onaylı tasarımda bağlantı altı çizili değil; vurgu hover/odakta gelir. */
.dj-card__doc-link {
	font-size: var(--dj-fs-14-fluid);
	font-weight: var(--dj-fw-medium);
	color: var(--dj-ink);
	text-decoration: none;
	text-underline-offset: 3px;
}

.dj-card__doc-link:hover,
.dj-card__doc-link:focus-visible {
	text-decoration: underline;
}

/*
 * Alt blok ritmi onaylı tasarımdan (PDF mürekkep ölçümü, kart-göreli):
 *   bilgi satırı 514.5–555.5 · kategori taban çizgisi 599
 *   başlık taban çizgisi 634 · fiyat taban çizgisi 693.7
 * Aralıklar bu taban çizgilerinden türetildi; kartın alt iç boşluğu 50.
 */
.dj-card__body {
	display: flex;
	flex-direction: column;
	gap: calc(3.44 * var(--dj-u));
	flex: 0 0 auto;
	margin-block-start: calc(11.74 * var(--dj-u));
}

/*
 * Üst kategori: tasarımda başlıktan açıkça ikincil — 14 px, Medium,
 * rgb(113,113,122). Sabit `--dj-fs-14` 1470'te 18.3 tasarım px'e çıkıyordu.
 */
.dj-card__category {
	font-size: var(--dj-fs-14-fluid);
	font-weight: var(--dj-fw-medium);
	line-height: var(--dj-lh-normal);
	color: var(--dj-muted);
	/* Tek satır: uzun kategori adı alttaki ritmi kaydırmaz. */
	min-height: var(--dj-card-category-line);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dj-card__title {
	font-size: var(--dj-fs-24);
	font-weight: var(--dj-fw-bold);
	line-height: 1.583; /* XD 38/24 */
	color: var(--dj-ink);
	margin: 0;
	/* Ayrılmış alan: tek satırlık adda da ikinci satırın yeri durur. */
	min-height: calc(var(--dj-card-title-lines) * var(--dj-card-title-line));
	/* Üst sınır: uzun ad üçüncü satıra taşıp fiyatı aşağı itemez. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--dj-card-title-lines);
	overflow: hidden;
}

/*
 * Kısa açıklama, özellik çipleri ve stok satırı yalnız liste görünümünde
 * okunur; ızgarada onaylı kart kompozisyonu değişmez.
 */
.dj-card__excerpt,
.dj-card__specs,
.dj-card__stock {
	display: none;
}

/*
 * Fiyat artık gövdenin değil kartın çocuğu: aradaki boşluğa kartın kendi
 * `gap`i de giriyor. Onaylı ızgara ritmi korunsun diye üst boşluk o kadar
 * düşülür — eski değer gövde aralığı (3.44) + üst boşluk (18.08) idi.
 */
.dj-card__price {
	font-size: var(--dj-fs-24);
	margin-top: calc(5.52 * var(--dj-u));
	/* Ayrılmış tek satır: fiyat bloğu boş ya da kısa olsa da ritim değişmez. */
	min-height: calc(var(--dj-lh-normal) * var(--dj-fs-24));
}

.dj-card__price ins,
.dj-card__price .amount {
	text-decoration: none;
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-ink);
}

.dj-card__price del,
.dj-card__price del .amount {
	color: var(--dj-gray-400);
	font-weight: var(--dj-fw-semibold);
}

/*
 * Hover eylemleri — XD `Component 26` Hover State, kart-göreli tasarım px:
 *   hızlı bakış / karşılaştır : 60 çap, üst 30, dikey aralık 20, içerik
 *                               sütununun sağ kenarına hizalı
 *   Sepete Ekle               : 300 × 60, köşe 30, x ortalı, görselin alt
 *                               kenarına oturur (XD: düğme 399–459,
 *                               görsel 110–460)
 *   favori                    : bilgi satırının içinde, 29.4 × 27.13
 *
 * Üçü tek bir geçişle birlikte açılır; parça parça gelmez.
 */
.dj-card__quick,
.dj-card__cart-slot,
.dj-card__fav {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dj-transition);
}

.dj-card:is(:hover, :focus-within) :is(.dj-card__quick, .dj-card__cart-slot, .dj-card__fav) {
	opacity: 1;
	pointer-events: auto;
}

.dj-card__quick {
	position: absolute;
	inset-inline-end: var(--dj-card-padding);
	inset-block-start: var(--dj-space-30);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: calc(20 * var(--dj-u));
}

.dj-icon-btn--round {
	width: calc(60 * var(--dj-u));
	height: calc(60 * var(--dj-u));
	border-radius: 50%;
	background: var(--dj-white);
	border: 0;
	box-shadow: var(--dj-shadow-sm);
	color: var(--dj-ink);
}

/*
 * XD çizim ölçüleri: göz 22.59 × 14.06, karşılaştır 22.59 × 24 (gövde 2).
 * Sıkı viewBox olduğu için kutu ölçüsü doğrudan çizim ölçüsüdür.
 */
.dj-card__view svg {
	width: calc(24.59 * var(--dj-u));
	height: calc(16.06 * var(--dj-u));
}

.dj-card__quick [data-dj-compare-toggle] svg {
	width: calc(24.59 * var(--dj-u));
	height: calc(26 * var(--dj-u));
}

/* XD Rectangle 1004: 300 × 60, köşe 30, siyah; metin SemiBold 22. */
.dj-card__cart-slot {
	position: absolute;
	inset-inline: 0;
	inset-block-end: calc(1 * var(--dj-u));
	z-index: 2;
	display: flex;
	justify-content: center;
}

.dj-card__cart-slot .dj-card__cart {
	min-width: calc(300 * var(--dj-u));
	min-height: calc(60 * var(--dj-u));
	padding-inline: calc(30 * var(--dj-u));
	border-radius: var(--dj-radius-pill);
	font-size: calc(22 * var(--dj-u));
	font-weight: var(--dj-fw-semibold);
	justify-content: center;
}

/*
 * Kart CTA'sı sitedeki ters çevirme standardını kullanır: normalde siyah
 * zemin / beyaz metin, hover ve odakta beyaz zemin / siyah metin. Kenarlık
 * normalde de vardır (zeminle aynı renk), bu yüzden kutu ölçüsü değişmez.
 */
.dj-card__cart-slot .dj-card__cart {
	border: 1px solid var(--dj-ink);
}

/*
 * Seçici WooCommerce uyumluluk kuralından (`.woocommerce a.button:hover`,
 * 0-2-1) bir kademe güçlüdür; o dosya bu dosyadan sonra yüklendiği için
 * eşit özgüllük yetmiyordu.
 */
@media (hover: hover) {
	.dj-card .dj-card__cart-slot :is(a, button).dj-card__cart:hover {
		background: var(--dj-white);
		border-color: var(--dj-ink);
		color: var(--dj-ink);
	}
}

.dj-card .dj-card__cart-slot :is(a, button).dj-card__cart:focus-visible {
	background: var(--dj-white);
	border-color: var(--dj-ink);
	color: var(--dj-ink);
}

/*
 * Stokta olmayan ürünün CTA'sı.
 *
 * Ölçü, köşe ve hiza stoklu düğmeyle aynı sınıflardan gelir (`dj-btn`,
 * `dj-card__cart`); burada yalnız yüzey ve etkileşim değişir: açık nötr
 * zemin, soluk koyu metin, ok yok, hover/odak hareketi yok. Kart geometrisi
 * bozulmadığı için stoklu ve stoksuz kartlar aynı hizada durur.
 */
/*
 * Kutu ölçüsü stoklu CTA ile birebir aynı olmalı ki kart geometrisi
 * değişmesin. Genişlik, köşe ve hizayı ortak sınıflar veriyor; dikey iç
 * boşluk ise WooCommerce'in `a.button` ve `button.button` kurallarında farklı
 * (12 / 9.888 px) olduğu için burada eşitlenir — ölçülen değer, tahmin değil:
 * ikisi de 16 px metin ve 19.2 px satır yüksekliği kullanıyor, 12 px dikey
 * boşlukla ikisinin de yüksekliği aynı çıkıyor.
 *
 * Renkler `button.button` kurallarını geçebilmek için kart bağlamıyla
 * birlikte yazılır; `!important` kullanılmaz. Metin `--dj-muted` yerine bir
 * ton koyu (`--dj-gray-600`): açık gri zeminde okunurluk 3.71 → 4.36'ya
 * çıkıyor, siyah CTA'dan ayrımı ise korunuyor.
 */
.dj-card .dj-card__cart-slot button.dj-card__cart.dj-card__cart--unavailable,
.dj-card .dj-card__cart-slot button.dj-card__cart.dj-card__cart--unavailable:hover,
.dj-card .dj-card__cart-slot button.dj-card__cart.dj-card__cart--unavailable:focus-visible {
	padding-block: 12px;
	background: var(--dj-line);
	color: var(--dj-gray-600);
	border-color: transparent;
	box-shadow: none;
	transform: none;
	cursor: default;
	transition: none;
}

/* Karşılaştırmada seçili ürün kalıcı olarak dolu daire ile okunur. */
.dj-card__quick [data-dj-compare-toggle].is-active,
.dj-card__quick [data-dj-compare-toggle].is-active:hover {
	background: var(--dj-ink);
	color: var(--dj-white);
}

/*
 * Favori, karttaki diğer dairesel eylemlerle (önizleme, karşılaştırma) aynı
 * ailededir: normalde beyaz yüzey + koyu kalp, hover ve odakta koyu yüzey +
 * beyaz kalp. Favorideyken yüzey kalıcı olarak koyu ve kalp dolu kalır —
 * hover bu durumu bozmaz. Yalnız renkler değişir; daire büyümez, kutu
 * ölçüsü ve bilgi satırının yüksekliği sabittir.
 *
 * Çizim ölçüsü XD'deki 29.4 × 27.13 olarak korunur, daire onun çevresine
 * bilgi satırının yüksekliğinde (40) oturur.
 */
.dj-card__fav {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(44 * var(--dj-u));
	height: calc(44 * var(--dj-u));
	flex: 0 0 auto;
	padding: 0;
	/*
	 * Normal durumda yüzey yok: zemin ve çerçeve saydamdır, kartta yalnız
	 * kalp okunur. Çerçeve *kaldırılmaz*, saydam bırakılır — kutu ölçüsü
	 * böylece hover'daki dolu daireyle birebir aynı kalır, kayma olmaz.
	 */
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: var(--dj-ink);
	transition:
		background-color var(--dj-transition),
		border-color var(--dj-transition),
		color var(--dj-transition);
}

/* XD `Path 3498`: çizim 29.4 × 27.13 — eski ölçü geri alındı. */
.dj-card__fav svg {
	width: calc(29.4 * var(--dj-u));
	height: calc(27.13 * var(--dj-u));
	transform-origin: 50% 50%;
}

/*
 * Hover ve favori durumunda dolan şey **kalbin kendisidir**: zemin ve çerçeve
 * her durumda saydam kalır, daire/kutu/gölge oluşmaz. Kutu ölçüsü ve konum
 * değişmediği için tıklama alanı da aynıdır.
 */
@media (hover: hover) {
	.dj-card__fav:hover .dj-icon__fill {
		fill: currentColor;
	}
}

.dj-card__fav:focus-visible .dj-icon__fill,
.dj-card__fav.is-active .dj-icon__fill,
.dj-card__fav.is-active:hover .dj-icon__fill {
	fill: currentColor;
}

/* Favorideki ürün de saydam zeminde, yalnız kalp dolu. */
.dj-card__fav,
.dj-card__fav:hover,
.dj-card__fav:focus-visible,
.dj-card__fav.is-active,
.dj-card__fav.is-active:hover,
.dj-card__fav.is-active:focus-visible {
	background: transparent;
	border-color: transparent;
	color: var(--dj-ink);
}

/*
 * Dokunmatik cihazda hover yok: eylemler sürekli görünür kalır, aksi hâlde
 * sepete ekleme/favori erişilemez olurdu. Puan rozeti de görünür kalır.
 */
@media (hover: none) {
	.dj-card__quick,
	.dj-card__cart-slot,
	.dj-card__fav {
		opacity: 1;
		pointer-events: auto;
	}

	/*
	 * Hızlı bakış sütunu sürekli görünür olduğu için puan rozetinin kutusunu
	 * paylaşamaz; dokunmatikte rozetin altından başlar.
	 */
	.dj-card__quick {
		inset-block-start: calc(110 * var(--dj-u));
	}
}

/* 768 ve altında kartlar tek kolona iner. */
@media (max-width: 768px) {
	.dj-specs {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.dj-card {
		min-height: 0;
	}
}

.dj-card__cart {
	/* Eylem yuvasında genişlik XD'den gelir; esneyip karta yayılmamalı. */
	flex: 0 0 auto;
	white-space: nowrap;
}

/*
 * WooCommerce, AJAX ekleme sonrası düğmeye bir onay işareti basar ve yanına
 * “Sepetim” bağlantısı ekler. Geri bildirim artık sepet çekmecesinde
 * verildiği için bu iki öğe yinelenir; kart düzeninin üstüne de taşarlar.
 * İşlev kaybı yok: çekmece zaten sepeti açar.
 */
.woocommerce a.added_to_cart,
.woocommerce-page a.added_to_cart,
a.added_to_cart {
	display: none;
}

.woocommerce a.button.added::after,
.woocommerce button.button.added::after,
.woocommerce a.button.added::before,
.woocommerce button.button.added::before,
.dj-btn.added::after,
.dj-btn.added::before {
	content: none;
}

/* ------------------------------------------------------------------ */
/* Kılavuz varyantı (`.dj-card--manual`, Kullanım Kılavuzları)          */
/*                                                                     */
/* Aynı kart (zemin, köşe, iç boşluk, tipografi); satış öğeleri ve      */
/* rozet bandı basılmaz (bkz. card/product.php). Ölçü içerikten gelir:  */
/* kategori kartının sabit yüksekliği ve sahne geometrisi burada yok.   */
/* Görsel kareye yakın alanda, kırpılmadan; altında kategori → ad (en   */
/* fazla 2 satır) → model, düğmeler modelden en az `--dj-space-16`      */
/* sonra ve kartın altına yaslı: aynı satırdaki kartlar eşit yükseklikte */
/* (ızgara gerdirir), düğmeler hizalı; fazladan boşluk yalnız kısa adlı  */
/* kartta, düğmelerin üstünde.                                          */
/* ------------------------------------------------------------------ */

.dj-card--manual {
	min-height: 0;
}

.dj-card--manual .dj-card__media {
	flex: 0 0 auto;
	aspect-ratio: 1;
	min-height: 0;
	margin-block-start: 0;
}

.dj-card--manual .dj-card__media img {
	inset: 0;
	height: 100%;
}

.dj-card--manual .dj-card__body {
	margin-block-start: 0;
}

.dj-card--manual .dj-card__title {
	min-height: 0;
}

/*
 * 1024 ve üstü: ad kategori kartındakinden bir kademe küçük (24 → 18
 * ölçeği), en az 16 px; ağırlık, satır aralığı oranı ve iki satır sınırı
 * aynı.
 */
@media (min-width: 1024px) {
	.dj-card--manual .dj-card__title {
		font-size: max(16px, var(--dj-fs-18));
	}
}

.dj-card__model {
	margin: 0;
	font-size: var(--dj-fs-14-fluid);
	line-height: var(--dj-lh-normal);
	color: var(--dj-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dj-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dj-space-8);
	margin-top: auto;
}

/*
 * Standart CTA ölçüsü 1024–1279'da 27 px'e iniyor: en az 1440'taki boy;
 * yazı katalog kartı düğmeleriyle aynı (16 px).
 */
.dj-card__actions .dj-cta {
	min-height: max(38px, var(--dj-button-height-sm));
	font-size: var(--dj-fs-16);
}

/* 768–899: kategori ızgarasının kompakt kartıyla aynı iç boşluk ve tipografi. */
@media (min-width: 768px) and (max-width: 899px) {
	.dj-card--manual {
		padding: 20px;
	}

	.dj-card--manual .dj-card__body {
		gap: 2px;
	}

	.dj-card--manual :is(.dj-card__category, .dj-card__model) {
		font-size: var(--dj-fs-14);
	}

	.dj-card--manual .dj-card__title {
		font-size: 17px;
		line-height: 1.4;
	}
}

/*
 * Mobil (≤767): Ürün Katalogları'nın mobil liste satırı — kartsız; solda
 * 96 px kare görsel (gri zemin), sağda kategori, ad (en fazla 2 satır),
 * model ve yan yana iki küçük düğme. Ölçüler katalog satırınınkiler
 * (`.dj-catalog-card`, pages.css); satır ayırıcısı ızgara öğesinde.
 */
@media (max-width: 767px) {
	.dj-card--manual {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-areas:
			"media body"
			"media actions";
		align-content: start;
		gap: var(--dj-space-12) var(--dj-space-16);
		padding: var(--dj-space-16) 0;
		border-radius: 0;
		background: transparent;
	}

	.dj-card--manual .dj-card__media {
		grid-area: media;
		align-self: start;
		border-radius: var(--dj-radius-sm);
		background: var(--dj-surface);
	}

	.dj-card--manual .dj-card__media img {
		inset: 8px;
		width: calc(100% - 16px);
		height: calc(100% - 16px);
	}

	.dj-card--manual .dj-card__body {
		grid-area: body;
		gap: 4px;
	}

	.dj-card--manual .dj-card__category {
		font-size: var(--dj-fs-14);
	}

	.dj-card--manual .dj-card__title {
		font-size: var(--dj-fs-16);
		line-height: var(--dj-lh-tight);
	}

	.dj-card--manual .dj-card__model {
		font-size: var(--dj-fs-14);
	}

	.dj-card--manual .dj-card__actions {
		grid-area: actions;
		flex-wrap: nowrap;
		margin-top: 0;
	}

	.dj-card--manual .dj-card__actions .dj-cta {
		flex: 1 1 0;
		gap: 6px;
		min-width: 0;
		min-height: 38px;
		padding-inline: 10px;
		font-size: var(--dj-fs-14);
	}
}

/* ------------------------------------------------------------------ */
/* Ürün ızgarası (arşiv, anasayfa, kısa kodlar)                        */
/* ------------------------------------------------------------------ */

.dj-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dj-card-gap);
}

/* ------------------------------------------------------------------ */
/* Liste görünümü                                                      */
/* ------------------------------------------------------------------ */

/*
 * Liste ayrı bir kart değildir: `content-product` aynı işaretlemeyi basar,
 * ikinci bir ürün şablonu ya da kart üreticisi yoktur. Değişen yalnız
 * yerleşim.
 *
 * Yerleşim gerçek bir ızgara: rozet şeridi, görsel sahnesi ve gövde
 * `display: contents` ile kendi kutularından çıkıp kartın ızgara alanlarına
 * yerleşir. Böylece indirim rozeti ile puan farklı sütunlara gidebiliyor ve
 * ikisi de ürün görselinin üstüne binmiyor — işaretleme taşınmadan.
 *
 *   [ rozet ] [ enerji + belge      ] [ puan        ]
 *   [ görsel] [ kategori            ] [ fiyat       ]
 *   [ sahne ] [ ürün adı            ] [ stok        ]
 *   [       ] [ kısa açıklama       ] [             ]
 *   [       ] [ öne çıkan özellikler] [ Sepete Ekle ]
 *
 * Favori, hızlı bakış ve karşılaştırma listede yer almaz; ızgara kartında
 * aynen korunur.
 */
.dj-grid[data-view="list"] {
	grid-template-columns: minmax(0, 1fr);
}

.dj-grid[data-view="list"] .dj-card {
	/* Onaylı oran: görsel %28, bilgi %47, fiyat/eylem %25. */
	--dj-list-gap: max(20px, calc(32 * var(--dj-u)));
	--dj-list-pad: 16px;
	--dj-list-row: 6px;
	--dj-list-cta: 48px;
	/* Sahnenin en az boyu satırın alt sınırını belirler. */
	--dj-list-stage: 150px;
	/*
	 * Rozet şeridi için ayrılmış yükseklik. İndirim rozeti olmayan üründe
	 * satır kısalıp kart yüksekliğini düşürüyordu (ölçüldü: 1920'de 243.31
	 * yerine 264). Ayrılan ölçü rozetin kendi kutusunu her genişlikte
	 * kapsar, böylece indirimli ve indirimsiz satırlar aynı boyda durur.
	 */
	--dj-list-badge: max(64px, calc(79 * var(--dj-u)));
	/* Liste satırında ad ızgaradakinden bir kademe küçük okunur. */
	--dj-card-title-line: calc(1.583 * var(--dj-fs-20));

	display: grid;
	/*
	 * `minmax(0, …)`: çıplak `fr` en az içerik genişliğini de dayattığı için
	 * uzun özellik satırı olan satırlarda sütunlar birkaç piksel kayıyordu.
	 * Böylece oran her satırda birebir aynı.
	 */
	grid-template-columns: minmax(0, 28fr) minmax(0, 47fr) minmax(0, 25fr);
	/*
	 * Son satır esner: sağ sütunda fiyat ve stok yukarıda kalır, CTA
	 * `align-self: end` ile satırın altına oturur. Piksel kaydırma yok —
	 * boşluğu ızgaranın kendi `1fr`i verir, `margin-top: auto` ile aynı iş.
	 */
	grid-template-rows: minmax(var(--dj-list-badge), auto) auto auto minmax(0, 1fr);
	grid-template-areas:
		"badge docs  rating"
		"media body  price"
		"media body  stock"
		"media body  cta";
	column-gap: var(--dj-list-gap);
	row-gap: var(--dj-list-row);
	min-height: 0;
	padding: var(--dj-list-pad) var(--dj-card-padding);
}

/* --- Rozet şeridi: iki parça iki ayrı sütuna --- */

.dj-grid[data-view="list"] .dj-card__head {
	display: contents;
}

.dj-grid[data-view="list"] .dj-badge-discount,
.dj-grid[data-view="list"] .dj-card__head-spacer {
	grid-area: badge;
	align-self: start;
	justify-self: start;
}

.dj-grid[data-view="list"] .dj-badge-rating {
	grid-area: rating;
	align-self: start;
	justify-self: end;
}

/*
 * Izgarada puan rozetinin yerini hover'da hızlı bakış sütunu alır. Listede
 * hızlı bakış yok, rozet hover'da da görünür kalır.
 */
.dj-grid[data-view="list"] .dj-card:is(:hover, :focus-within) .dj-badge-rating {
	opacity: 1;
	visibility: visible;
}

/* --- Görsel sahnesi --- */

/*
 * Sahne kutusu bağlantı katmanına geçer: sepet düğmesi böylece sahnenin
 * içinden çıkıp kendi ızgara alanına yerleşebiliyor.
 */
.dj-grid[data-view="list"] .dj-card__media {
	display: contents;
}

.dj-grid[data-view="list"] .dj-card__media-link {
	grid-area: media;
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-height: var(--dj-list-stage);
	overflow: hidden;
}

/* Sahne tam kullanılır; ızgaradaki %92 payı yatay satırda gereksiz. */
.dj-grid[data-view="list"] .dj-card__media img {
	inset-block: 0;
	height: 100%;
}

/* --- Bilgi sütunu --- */

.dj-grid[data-view="list"] .dj-card__docs {
	grid-area: docs;
	align-self: center;
	min-height: 0;
}

/*
 * Bilgi sütunu dört ayrılmış yuvadır: kategori, ürün adı, kısa açıklama ve
 * öne çıkan özellikler. Yuvalar ızgara satırı olarak sabitlenir ve her alan
 * kendi satırına yerleştirilir — böylece kısa açıklaması ya da teknik
 * özelliği olmayan üründe de satır yüksekliği ve alttaki hizalar değişmez
 * (ölçüldü: açıklamasız üründe kart 1920'de 267, açıklamalıda 282.31 idi).
 */
.dj-grid[data-view="list"] .dj-card__body {
	grid-area: body;
	align-self: start;
	margin-block-start: 0;
	display: grid;
	grid-template-rows:
		var(--dj-card-category-line)
		calc(var(--dj-card-title-lines) * var(--dj-card-title-line))
		calc(2 * var(--dj-lh-normal) * var(--dj-fs-14-fluid))
		calc(var(--dj-lh-normal) * var(--dj-fs-14-fluid));
	row-gap: var(--dj-list-row);
}

.dj-grid[data-view="list"] .dj-card__category { grid-row: 1; }
.dj-grid[data-view="list"] .dj-card__title { grid-row: 2; }
.dj-grid[data-view="list"] .dj-card__excerpt { grid-row: 3; }
.dj-grid[data-view="list"] .dj-card__specs { grid-row: 4; }

.dj-grid[data-view="list"] .dj-card__title {
	font-size: var(--dj-fs-20);
}

/*
 * Kısa açıklama ve özellik satırı yalnız burada görünür. İkisi de sabit
 * yükseklikli yuvalar: metin bir satır da olsa iki satır da olsa alttaki
 * hiçbir alan kaymaz. Metin PHP'de kesilmez, satır sınırı burada verilir.
 */
.dj-grid[data-view="list"] .dj-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0;
	min-height: calc(2 * var(--dj-lh-normal) * var(--dj-fs-14-fluid));
	font-size: var(--dj-fs-14-fluid);
	line-height: var(--dj-lh-normal);
	color: var(--dj-muted);
}

/* Öne çıkan özellikler: hap değil, ayraçla okunan tek satırlık künye. */
.dj-grid[data-view="list"] .dj-card__specs {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--dj-space-8);
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
	min-height: calc(var(--dj-lh-normal) * var(--dj-fs-14-fluid));
	font-size: var(--dj-fs-14-fluid);
	line-height: var(--dj-lh-normal);
	color: var(--dj-muted);
	white-space: nowrap;
}

.dj-grid[data-view="list"] .dj-card__spec {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dj-grid[data-view="list"] .dj-card__spec + .dj-card__spec::before {
	content: "·";
	margin-inline-end: var(--dj-space-8);
	color: var(--dj-gray-400);
}

/* --- Fiyat / eylem sütunu --- */

/*
 * Fiyat çifti dar eylem sütununda tek satırda kalsın: ızgaradaki 24'lük
 * ölçü 1024'te iki satıra bölünüyordu. Yuva bir satırlık, sabit.
 */
.dj-grid[data-view="list"] .dj-card__price {
	grid-area: price;
	align-self: start;
	justify-self: end;
	margin-top: 0;
	text-align: end;
	font-size: var(--dj-fs-20);
	min-height: calc(var(--dj-lh-normal) * var(--dj-fs-20));
	/* `.dj-price` esnek bir kutu: satır sarmayı `white-space` değil bu durdurur. */
	flex-wrap: nowrap;
	justify-content: flex-end;
	white-space: nowrap;
}

.dj-grid[data-view="list"] .dj-card__stock {
	grid-area: stock;
	align-self: start;
	justify-self: end;
	display: block;
	margin: 0;
	font-size: var(--dj-fs-14-fluid);
	line-height: var(--dj-lh-normal);
	color: var(--dj-muted);
}

.dj-grid[data-view="list"] .dj-card__stock[data-stock="in"] {
	color: var(--dj-green);
}

/*
 * Listede yalnız birincil eylem var: favori, hızlı bakış ve karşılaştırma
 * kaldırıldı (ızgara kartında korunur). Sepete Ekle hover'a bağlı değil,
 * satırın kalıcı eylemidir.
 */
.dj-grid[data-view="list"] .dj-card__quick,
.dj-grid[data-view="list"] .dj-card__fav {
	display: none;
}

.dj-grid[data-view="list"] .dj-card__cart-slot {
	grid-area: cta;
	position: static;
	align-self: end;
	justify-content: stretch;
	opacity: 1;
	pointer-events: auto;
}

.dj-grid[data-view="list"] .dj-card__cart-slot .dj-card__cart {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	min-height: var(--dj-list-cta);
}

/* 1024: yatay düzen korunur, sütunlar kendi alt sınırlarına iner. */
@media (max-width: 1023px) {
	.dj-grid[data-view="list"] .dj-card {
		--dj-list-gap: var(--dj-space-16);
	}
}

/*
 * 899 ve altı: üç sütun okunaklı kalmıyor. Satır dikey yığına döner; ızgara
 * kartına dönmez, liste kimliği korunur. Kırılma noktası ızgara görünümünün
 * tek sütuna geçtiği yerle aynı.
 */
@media (max-width: 899px) {
	.dj-grid[data-view="list"] .dj-card {
		--dj-list-stage: 200px;
		grid-template-columns: minmax(0, 1fr);
		/* Rozet şeridi burada da ayrılmış: indirimsiz üründe satır kısalmasın. */
		grid-template-rows: minmax(var(--dj-list-badge), auto) auto auto auto auto auto auto;
		grid-template-areas:
			"badge"
			"media"
			"docs"
			"body"
			"price"
			"stock"
			"cta";
		row-gap: var(--dj-space-12);
	}

	.dj-grid[data-view="list"] .dj-badge-rating {
		grid-area: badge;
		justify-self: end;
	}

	.dj-grid[data-view="list"] :is(.dj-card__price, .dj-card__stock) {
		justify-self: start;
	}

	.dj-grid[data-view="list"] .dj-card__price {
		text-align: start;
		justify-content: flex-start;
	}
}


/* Ürün ızgarası kırılma noktaları */

@media (max-width: 1023px) {
	.dj-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * 1023'ün altında birim yeniden 1 px olur: kart tasarım ölçüsünde kalır.
 * İki sütun 900'ün altında kartı 272 px'e düşürüyor, fiyat satırı ikiye
 * bölünüp altındaki ritmi kaydırıyordu (ölçüldü: 36 px yerine 80 px).
 */
@media (max-width: 899px) {
	.dj-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Mobilde fiyat çifti tek satırda kalsın; kart genişliği tasarımın altında. */
@media (max-width: 767px) {
	.dj-card__price {
		font-size: var(--dj-fs-20);
		min-height: calc(var(--dj-lh-normal) * var(--dj-fs-20));
	}
}

/* ------------------------------------------------------------------ */
/* Benzer ürünler karuseli                                             */
/* ------------------------------------------------------------------ */

/*
 * Tasarım (Ürün Detay.pdf / XD): başlık 32 kalın; başlık tabanından kart
 * üstüne 58.5 → satır kutusu tabanın altında ~7.5 bıraktığı için 51.
 * Kart altından güven bandının ayırıcısına olan boşluğun sahibi global
 * `--dj-content-trust-gap` tokenıdır; burada alt boşluk bırakılmaz.
 */
.dj-related {
	padding-block-start: var(--dj-space-60);
	padding-block-end: 0;
}

.dj-product:has(> .dj-related) {
	padding-block-end: 0;
}

.dj-related__title {
	font-size: var(--dj-fs-32);
	margin-bottom: calc(51 * var(--dj-u));
}

/*
 * XD Rectangle 608: daire 60, merkezi kapsayıcının kenarında (1815) ve
 * kartın dikey ortasında — anasayfa kategori karuseliyle aynı kural.
 */
.dj-related .dj-carousel__arrow {
	top: calc((100% - var(--dj-carousel-pad-b)) / 2);
}

.dj-related .dj-carousel__arrow--prev {
	inset-inline-start: calc(-30 * var(--dj-u));
}

.dj-related .dj-carousel__arrow--next {
	inset-inline-end: calc(-30 * var(--dj-u));
}

.dj-related .dj-carousel__arrow svg {
	width: calc(9.5 * var(--dj-u));
	height: calc(16.5 * var(--dj-u));
	stroke-width: 2.2;
}

.dj-carousel {
	overflow: hidden;
}

/*
 * Kenar oklu karusel (onaylı anasayfa kategori satırı): 59x59 daireler
 * kapsayıcının tam kenarında, kart satırının dikey ortasında durur.
 */
.dj-carousel--edge {
	position: relative;
	overflow: visible;
}

.dj-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: calc(60 * var(--dj-u));
	height: calc(60 * var(--dj-u));
	border: 1px solid var(--dj-line);
	border-radius: 50%;
	background: var(--dj-white);
	color: var(--dj-ink);
	z-index: 2;
	transition: background-color var(--dj-transition), border-color var(--dj-transition), opacity var(--dj-transition);
}

/* Yalnız gerçekten kaydırılabilir içerik varsa görünür. */
.dj-carousel--edge.is-scrollable .dj-carousel__arrow {
	display: inline-flex;
}

.dj-carousel__arrow svg {
	width: calc(20 * var(--dj-u));
	height: calc(20 * var(--dj-u));
}

/*
 * Zemin/renk dönüşü ve pasif durum ortak dairesel eylem ailesinden gelir
 * (`assets/css/base.css`). Burada yalnız okun yön hissi var.
 */
@media (hover: hover) {
	.dj-carousel__arrow--prev:hover:not(:disabled) svg {
		transform: translateX(-2px);
	}

	.dj-carousel__arrow--next:hover:not(:disabled) svg {
		transform: translateX(2px);
	}
}

/* Yön mantıksal; RTL'de otomatik yer değiştirir. */
/* XD: ok merkezi tam container kenarında (x 105 / 1815). */
.dj-carousel__arrow--prev { inset-inline-start: -30px; }
.dj-carousel__arrow--next { inset-inline-end: -30px; }

/* Dar ekranda okların yeri yok; kaydırma parmakla yapılır. */
@media (max-width: 767px) {
	.dj-carousel--edge.is-scrollable .dj-carousel__arrow {
		display: none;
	}
}

.dj-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--dj-card-gap) * 2)) / 3);
	gap: var(--dj-card-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Kaydırma payı; kenar okları dikey merkezi hesaplarken bunu düşer. */
	padding-bottom: var(--dj-carousel-pad-b);
}

.dj-carousel__track::-webkit-scrollbar {
	display: none;
}

.dj-carousel__item {
	scroll-snap-align: start;
	min-width: 0;
}

/*
 * Nokta gezinmesi karuselin paylaşılan parçasıdır; görünürlüğü kullanan
 * bölüm açar (varsayılan kapalı, masaüstünde şerit kaydırılmaz).
 * Betik tek sayfa kaldığında kutuyu `hidden` ile kapatır.
 */
.dj-carousel__dots {
	display: none;
	justify-content: center;
	gap: 8px;
}

.dj-carousel__dots[hidden] {
	display: none;
}

.dj-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dj-line);
	cursor: pointer;
	transition: background-color var(--dj-transition);
}

.dj-carousel__dot.is-active {
	background: var(--dj-ink);
}

.dj-carousel__dot:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Duyarlı                                                             */
/* ------------------------------------------------------------------ */

/*
 * 1024–1439: galeri ve özet masaüstündeki gibi yan yana, ölçekli. Özet
 * sütunu 520u; 1024–1199'da bu 277–325 px'e iner, fiyat ve iki düğme
 * satırı sığsın diye en az 320 px. (Önceden 1199 altında tek sütuna
 * düşüyordu: tam genişlik galeri + altında 407 px dar özet + sağda boşluk.)
 */
@media (max-width: 1439px) {
	.dj-product__main {
		grid-template-columns: minmax(0, 1fr) max(calc(520 * var(--dj-u)), 320px);
		gap: var(--dj-space-40);
	}

	.dj-tabs__nav {
		gap: var(--dj-space-40);
	}
}

/*
 * <1024: tek kolon. Galeri tam genişliğe çıkıyor; tasarımın 877 × 770
 * oranı burada sayfayı gereksiz uzatır. Sahne oranı yatayda kalır,
 * masaüstünün mutlak ölçüleri taşınmaz.
 */
@media (max-width: 1023px) {
	.dj-gallery__stage {
		aspect-ratio: 4 / 3;
	}

	.dj-product__main {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dj-space-40);
	}

	.dj-summary {
		max-width: calc(720 * var(--dj-u));
	}
}

@media (max-width: 1199px) {
	.dj-tabs {
		--dj-tab-size: 20px;
	}

	.dj-carousel__track {
		grid-auto-columns: calc((100% - var(--dj-card-gap)) / 2);
	}
}

/*
 * Tablet ve mobil (gece görevi 05). Mobil XD yok; kararlar masaüstü
 * hiyerarşisinden türetildi. 1023 ve altında birim 1 px olduğu için
 * masaüstünün ölçülmüş ritmi (27/38/40/68/100) burada birebir px'e
 * dönüşüp sayfayı gereksiz uzatıyordu. Masaüstü (≥1024) değişmez.
 */
@media (max-width: 1023px) {
	/*
	 * Dikey küçük görsel rayı 768'de 680 px uzuyor, 370 px'lik sahnenin
	 * yanında ~310 px boş sütun bırakıyordu. Ray sahnenin altına yatay
	 * şerit olarak iner, sahne tam genişliği alır.
	 */
	.dj-gallery {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dj-space-16);
	}

	.dj-gallery__thumbs {
		flex-direction: row;
		order: 2;
		gap: var(--dj-space-12);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.dj-gallery__thumbs::-webkit-scrollbar {
		display: none;
	}

	.dj-gallery__thumb {
		width: 96px;
		height: 80px;
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/* Yatay parmak hareketi galeriye (product.js), dikey hareket sayfaya. */
	.dj-gallery__stage {
		touch-action: pan-y pinch-zoom;
	}

	/*
	 * Başlık dar ekranda sarar: masaüstünün tek satırlık 38/42 satır
	 * yüksekliği iki satırı birbirine yapıştırıyordu.
	 */
	.dj-summary__title {
		margin-block-start: var(--dj-space-12);
		line-height: var(--dj-lh-tight);
		text-wrap: balance;
		overflow-wrap: break-word;
	}

	.dj-summary__meta {
		margin-block-start: var(--dj-space-16);
	}

	/* Puan bağlantısı görünür ölçüsünü korur; dokunma alanı 44 px. */
	.dj-summary__rating {
		padding-block-start: 12px;
		padding-block-end: 12px;
		margin-block: -12px;
	}

	.dj-summary .dj-divider {
		margin-block-start: var(--dj-space-24);
	}

	.dj-summary__pricing {
		margin-block-start: var(--dj-space-24);
	}

	.dj-summary__short {
		margin-block-start: var(--dj-space-16);
	}

	.dj-summary__docs {
		gap: var(--dj-space-8) var(--dj-space-16);
		margin-block-start: var(--dj-space-20);
	}

	/* Dar ekranda belgeler yan yana değil alt alta durur. */
	.dj-summary__docs {
		grid-template-columns: minmax(0, 1fr);
	}

	.dj-summary__doc {
		min-height: 44px;
	}

	.dj-summary__cart {
		margin-block-start: var(--dj-space-24);
	}

	.dj-summary__cart .dj-cart-form,
	.dj-summary__cart .dj-cart-form__row,
	.dj-summary__cart .dj-cart-form__row--secondary {
		gap: var(--dj-space-16);
	}

	/* Adet düğmeleri 34 px genişliğindeydi: 44 + alan + 44, genişlik içerikten. */
	.dj-summary__cart .dj-qty {
		width: auto;
	}

	.dj-summary__cart .dj-qty__btn {
		flex: 0 0 44px;
		width: 44px;
	}

	/*
	 * Varyasyonlu ürün formu WooCommerce'in kendi işaretlemesidir (yerelde
	 * varyasyonlu ürün yok). Dar ekranda seçim tablosu yığına döner,
	 * seçiciler tam genişlik ve dokunmaya uygun yükseklikte olur.
	 */
	.dj-summary__cart .variations {
		width: 100%;
		margin-block-end: var(--dj-space-16);
		border-collapse: collapse;
	}

	.dj-summary__cart .variations :is(th, td) {
		display: block;
		padding: 0;
		text-align: start;
	}

	.dj-summary__cart .variations th {
		padding-block-end: var(--dj-space-8);
	}

	.dj-summary__cart .variations tr + tr th {
		padding-block-start: var(--dj-space-16);
	}

	.dj-summary__cart .variations select {
		width: 100%;
		min-height: 48px;
		padding-inline: 16px;
		border: 1px solid var(--dj-line);
		border-radius: var(--dj-radius-sm);
		background-color: var(--dj-white);
		font-size: var(--dj-fs-16);
	}

	.dj-summary__cart .reset_variations {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.dj-summary__cart .woocommerce-variation-add-to-cart {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dj-space-16);
	}

	.dj-summary__cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
		flex: 1 1 200px;
		min-height: var(--dj-button-height);
	}

	/*
	 * Paylaş ikonları 20 × 20 dokunma alanıydı. Kutu 44 px, ikon ve
	 * etiketten görünen mesafe aynı (liste 12 px sola çekilir).
	 */
	.dj-share {
		margin-block-start: var(--dj-space-12);
	}

	.dj-share__list {
		gap: 0;
		margin-inline-start: -12px;
	}

	.dj-share__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	/* Sekmeler ve teknik özellikler: aynı hiyerarşi, px'e göre ritim. */
	.dj-tabs {
		padding-block-start: var(--dj-space-60);
		padding-block-end: var(--dj-space-40);
		/* Puan bağlantısıyla gelindiğinde yapışkan başlığın altında kalmasın. */
		scroll-margin-top: var(--dj-sticky-header-offset, 0px);
	}

	.dj-tabs__tab {
		padding-bottom: var(--dj-space-16);
	}

	.dj-tabs__panel {
		padding-top: var(--dj-space-40);
	}

	/*
	 * 1024'te iki kolonlu kart ızgarası korunur; kart payı ve satır
	 * boşlukları daralır.
	 */
	.dj-specs {
		gap: var(--dj-space-24);
	}

	.dj-specs__group {
		padding: var(--dj-space-24);
	}

	.dj-specs__group-title {
		margin-block-end: 16px;
	}

	/*
	 * 1024 altında bölüm tek kolona iner: başlık → özet → liste → form.
	 * Form tam genişlik olur.
	 */
	.dj-reviews__body {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dj-space-40);
	}

	.dj-related {
		padding-block-start: var(--dj-space-24);
	}

	.dj-related__title {
		margin-bottom: var(--dj-space-24);
	}
}

/*
 * Benzer ürünler kartı dar karuselde masaüstü kartının 750'lik alt
 * sınırını taşıyordu (768'de 788, 390'da 660 px). Anasayfa popüler
 * şeridiyle aynı kural; arşiv ızgarası etkilenmez.
 */
@media (max-width: 899px) {
	.dj-related .dj-card {
		min-height: 0;
	}
}

@media (max-width: 767px) {
	.dj-product .dj-breadcrumb {
		margin-bottom: var(--dj-space-16);
	}

	/*
	 * Kare sahne 16:9 bir TV paketinin altında ve üstünde ~45'er px boş
	 * alan bırakıyordu. 5:4 sahnede rozet bandının altı TV'yi tam
	 * genişlikte taşır; dikey paketler için yeterli yükseklik kalır.
	 */
	.dj-gallery__stage {
		aspect-ratio: 5 / 4;
		padding-block-start: calc(64 * var(--dj-u));
	}

	/*
	 * 1024 altında birim 1 px olduğu için masaüstünün 48/72'lik optik payları
	 * ~350 px'lik sahnede kadrajın çoğunu yiyordu (dikey paket 72 px'e kadar
	 * düşüyordu). Paylar dar ekrana göre küçülür; oran ve `contain` mantığı
	 * aynı kalır.
	 */
	.dj-gallery__figure {
		padding-inline: calc(24 * var(--dj-u));
	}

	.dj-gallery__figure--portrait {
		padding-block: calc(24 * var(--dj-u));
	}

	.dj-gallery__badge {
		width: calc(70 * var(--dj-u));
	}

	.dj-gallery__thumb {
		width: 72px;
		height: 60px;
		padding: 4px;
	}

	.dj-summary__title {
		font-size: var(--dj-fs-32);
	}

	.dj-summary__pricing {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dj-space-4);
	}

	.dj-summary__stock {
		font-size: var(--dj-fs-16);
	}

	/*
	 * Adet + Sepete Ekle tek satırda: önceden Sepete Ekle alt satıra
	 * sarıyor, adet seçici tek başına bir satır kaplıyordu. İkinci
	 * satırda Hemen Al kalan genişliği, daireler kendi ölçüsünü alır.
	 */
	.dj-summary__cart .dj-cart-form__row,
	.dj-summary__cart .dj-cart-form__row--secondary {
		gap: var(--dj-space-12);
	}

	.dj-summary__cart .dj-cart-form {
		gap: var(--dj-space-12);
	}

	.dj-summary__cart :is(.dj-cart-form__submit, .dj-cart-form__buy-now) {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: var(--dj-space-16);
		font-size: var(--dj-fs-18);
	}

	.dj-tabs {
		--dj-tab-size: 18px;
		padding-block-start: var(--dj-space-40);
		padding-block-end: var(--dj-space-30);
	}

	.dj-tabs__nav {
		gap: var(--dj-space-24);
	}

	.dj-tabs__tab {
		min-height: 44px;
		padding-bottom: var(--dj-space-12);
	}

	.dj-tabs__panel {
		padding-top: 32px;
	}

	.dj-specs {
		gap: var(--dj-space-20);
	}

	.dj-specs__group {
		padding: var(--dj-space-20);
	}

	.dj-reviews__summary {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dj-space-24);
	}

	.dj-reviews__dist-row {
		grid-template-columns: max-content minmax(0, 1fr) max-content;
	}

	#reviews.dj-reviews #comments ol.commentlist.dj-reviews__list li .comment_container {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: var(--dj-space-12);
		padding-block-start: var(--dj-space-20);
		padding-block-end: var(--dj-space-20);
	}

	#reviews.dj-reviews #comments ol.commentlist.dj-reviews__list li img.avatar {
		width: 44px;
		height: 44px;
	}

	.dj-reviews__average {
		font-size: 40px;
	}

	/* Dar ekranda panel payı küçülür, köşe yarıçapı korunur. */
	.dj-reviews__form {
		padding: var(--dj-space-20);
	}

	.dj-related {
		padding-block-start: var(--dj-space-16);
	}

	.dj-related__title {
		margin-bottom: var(--dj-space-20);
	}

	.dj-carousel__track {
		grid-auto-columns: 82%;
	}
}

/* ------------------------------------------------------------------ */
/* Dar ekran satın alma çubuğu (≤1023)                                 */
/* ------------------------------------------------------------------ */

/*
 * Dar ekranda Sepete Ekle ilk ekranın altında kalır. Formun kendisi
 * görünüm dışındayken altta sabit bir çubuk **aynı formu** gönderir
 * (`form` niteliği): ikinci bir sepet mantığı yok, adet formdaki
 * seçiciden okunur, AJAX akışı `cart.js`'teki olay dinleyicisidir.
 * Betik yoksa ya da ≥1024'te çubuk `hidden` kalır.
 */
.dj-buybar[hidden] {
	display: none;
}

@media (max-width: 1023px) {
	.dj-buybar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 110;
		display: flex;
		align-items: center;
		gap: var(--dj-space-16);
		padding: 10px var(--dj-page-padding) calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--dj-white);
		border-top: 1px solid var(--dj-line);
		box-shadow: 0 -2px 12px rgba(16, 18, 19, 0.05);
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 200ms ease, visibility 200ms;
	}

	.dj-buybar.is-visible {
		transform: none;
		visibility: visible;
	}

	.dj-buybar__info {
		display: flex;
		flex-direction: column;
		gap: 2px;
		flex: 1 1 auto;
		min-width: 0;
	}

	.dj-buybar__title {
		overflow: hidden;
		font-size: var(--dj-fs-14);
		line-height: 1.3;
		color: var(--dj-muted);
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.dj-buybar__price {
		font-size: var(--dj-fs-18);
		font-weight: var(--dj-fw-semibold);
		line-height: 1.3;
		color: var(--dj-ink);
		white-space: nowrap;
	}

	/* Çubukta yalnız güncel fiyat; eski fiyat özetin kendisinde. */
	.dj-buybar__price :is(del, .dj-price__sep) {
		display: none;
	}

	.dj-buybar__price ins {
		text-decoration: none;
	}

	.dj-buybar__submit {
		flex: 0 0 auto;
		min-width: 150px;
		min-height: 48px;
		padding-inline: var(--dj-space-24);
		font-size: var(--dj-fs-18);
	}

	/* Karşılaştırma çubuğu da altta sabit: ikisi üst üste binmez. */
	body:has(.dj-compare-bar:not([hidden])) .dj-buybar {
		display: none;
	}

	/* Çubuk footer'ın son satırını ve bildirimleri örtmesin. */
	body:has(.dj-buybar.is-visible) .dj-footer {
		padding-bottom: 88px;
	}

	body:has(.dj-buybar.is-visible) .dj-notices {
		inset-block-end: 84px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dj-buybar {
		transition: none;
	}
}


/*
 * Başlıktaki marka adı tasarımda büyük harf; geri kalanı değişmez. Büyütme
 * PHP tarafında yapılır (marka yazımı noktasız I'lu), burada yalnız harf
 * aralığı tasarımdaki optik dengeye getirilir. `text-transform` YOK.
 */
.dj-card__brand {
	letter-spacing: 0.01em;
}

/* Ürün açıklaması blokları: assets/css/product-description.css. */

/* ------------------------------------------------------------------ */
/* Ürün kartı — dar ve orta ekran dizilimi                             */
/*                                                                     */
/* Tek kaynak: anasayfadaki "Popüler Ürünler" şeridi (`.dj-popular`),   */
/* kategori arşivi ızgarası (`.dj-cards`) ve ürün sayfasındaki "Benzer  */
/* Ürünler" karuseli (`.dj-related`) aynı kompozisyonu ve aynı          */
/* ölçüleri kullanır — anasayfada onaylanan kart görünümü burada        */
/* tanımlıdır, `home.css`'te mobil kart kuralı yoktur. İşaretleme       */
/* taşınmaz, yalnız ızgara alanları değişir: görsel → kategori + ad →   */
/* fiyat → enerji/bilgi formu/favori → tam genişlik Sepete Ekle.        */
/* Görsel kaynağı ve kutu içindeki yerleşimi bu blokta ele alınmaz.     */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	:is(.dj-popular, .dj-cards, .dj-related) .dj-card {
		--dj-card-padding: 16px;
		--dj-card-image-lift: 44px;
		--dj-card-image-height: 100%;
		/* Kart adının ayrılmış iki satırı mobil kart ölçüsünden hesaplanır. */
		--dj-card-title-line: calc(var(--dj-m-lh-card) * var(--dj-m-fs-card));
		--dj-card-category-line: calc(var(--dj-lh-normal) * var(--dj-fs-14));
		--dj-popular-media: 252px;
		/*
		 * Önizleme + karşılaştır: masaüstü kartındaki dairesel eylem
		 * ailesinin mobil ölçeği. Daire 36 px, yığın aralığı 6 px; yığın
		 * tek sütun genişliği kaplar, puan rozeti o sütunun solunda kalır.
		 */
		--dj-popular-quick: 36px;
		--dj-popular-quick-gap: 6px;
		--dj-popular-quick-count: 1;

		display: grid;
		min-height: 0;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"media"
			"body"
			"price"
			"docs"
			"cart";
		align-content: start;
		gap: 10px;
		padding: 16px 16px 20px;
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__head {
		grid-area: media;
		align-self: start;
		position: relative;
		z-index: 2;
		height: auto;
		/* Rozetler etkileşimsiz; alttaki görsel bağlantısı dokunulabilir kalır. */
		pointer-events: none;
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__media {
		display: contents;
	}

	/*
	 * Eylem yığınının tabanı (14 + 36 + 6 + 36 = 92) görsel bandının
	 * üstüne biniyordu. Bant yığının altına iner; bandın kendi ölçüsü ve
	 * içindeki görsel yerleşimi (aile geometrisi dahil) aynen kalır.
	 */
	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__media-link {
		grid-area: media;
		position: relative;
		inset: auto;
		height: var(--dj-popular-media);
		margin-block-start: 44px;
		overflow: hidden;
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__body {
		grid-area: body;
		margin-block-start: 0;
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__category {
		font-size: var(--dj-fs-14);
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__title {
		font-size: var(--dj-m-fs-card);
		line-height: var(--dj-m-lh-card);
	}

	/*
	 * İndirimli fiyat çifti 20 px'te dar kartta ikiye bölünüp alt ritmi
	 * kaydırıyordu; bir kademe küçük (18).
	 */
	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__price {
		grid-area: price;
		margin-top: 0;
		font-size: var(--dj-fs-18);
		min-height: calc(var(--dj-lh-normal) * var(--dj-fs-18));
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__docs {
		grid-area: docs;
		min-height: 44px;
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__cart-slot {
		grid-area: cart;
		position: static;
	}

	:is(.dj-popular, .dj-cards, .dj-related) :is(.dj-card__quick, .dj-card__cart-slot, .dj-card__fav) {
		opacity: 1;
		pointer-events: auto;
	}

	/* Dokunuş sonrası odak puan rozetini gizlemesin; eylemler onun yerine geçmiyor. */
	:is(.dj-popular, .dj-cards, .dj-related) .dj-card:is(:hover, :focus-within) .dj-badge-rating {
		opacity: 1;
		visibility: visible;
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__head {
		gap: 8px;
		padding-inline-end: calc(
			var(--dj-popular-quick-count) * var(--dj-popular-quick)
			+ (var(--dj-popular-quick-count) - 1) * var(--dj-popular-quick-gap)
			+ 8px
		);
	}

	/*
	 * Rozet 85 × 76'da görselin üst bandını kapatıyordu. Kutu ve iki iç
	 * satırın dolgusu birlikte küçülür (68 × 52); renk, kenarlık ve metin
	 * aynı kalır. (`.dj-card` öneki: anasayfanın tüm genişliklerde geçerli
	 * rozet genişliği kuralını geçer.)
	 */
	:is(.dj-popular, .dj-cards, .dj-related) .dj-card .dj-badge-discount {
		min-width: 68px;
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card .dj-badge-discount__label {
		font-size: 11px;
		padding: 5px 4px 4px;
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card .dj-badge-discount__value {
		font-size: 17px;
		padding: 6px 4px 7px;
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card .dj-badge-rating {
		height: 32px;
		padding-inline: 10px 9px;
		font-size: 14px;
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card .dj-badge-rating svg {
		width: 17px;
		height: 17px;
	}

	/*
	 * Önizleme üstte, karşılaştırma altında: dikey yığın. Üst dairenin
	 * merkezi puan rozetinin merkeziyle aynı yatay çizgide (14 + 18 =
	 * 16 + 16); sağ iç boşluk indirim rozetinin sol iç boşluğuyla eşit.
	 */
	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__quick {
		flex-direction: column;
		gap: var(--dj-popular-quick-gap);
		inset-block-start: 14px;
		inset-inline-end: var(--dj-card-padding);
	}

	/*
	 * Dokunma hedefi görünmez bir katmanla 42 px (her daireye 3 px; iki
	 * hedef bitişik ama üst üste binmez). Önizleme bir bağlantı olduğu için
	 * Elementor'un `.elementor a` kuralı gölgesini siliyordu; gölge ikisinde
	 * de aynı.
	 */
	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__quick .dj-icon-btn--round {
		position: relative;
		width: var(--dj-popular-quick);
		height: var(--dj-popular-quick);
		box-shadow: var(--dj-shadow-sm);
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__quick .dj-icon-btn--round::after {
		content: "";
		position: absolute;
		inset: -3px;
	}

	/*
	 * İki ikon aynı kaynak SVG'den ve aynı ölçekle (0.8) çizilir; çizgi
	 * kalınlığı site genelindeki CTA okunun gövdesine (2.26) eşitlenir.
	 */
	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__view svg {
		width: calc(24.59px * 0.8);
		height: calc(16.06px * 0.8);
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__quick [data-dj-compare-toggle] svg {
		width: calc(24.59px * 0.8);
		height: calc(26px * 0.8);
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__quick svg path {
		stroke-width: 2.26;
	}

	/* Ok ve metin düğmenin ortasında tek grup; aralık dar kadraj değeri (10). */
	:is(.dj-popular, .dj-cards, .dj-related) .dj-card .dj-card__cart-slot .dj-card__cart {
		--dj-cta-gap: 10px;
		min-width: 0;
		width: 100%;
		min-height: 48px;
		padding-inline: 16px;
		font-size: var(--dj-fs-16);
	}

	/*
	 * “18.400,00 TL - 20.000,00 TL” fiyat aralığı gibi okunuyordu. Ayraç
	 * gizlenir; güncel fiyat önde, eski fiyat üstü çizili ve bir kademe küçük.
	 */
	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__price .dj-price__sep {
		display: none;
	}

	:is(.dj-popular, .dj-cards, .dj-related) .dj-card__price del {
		font-size: 0.8em;
	}

	/*
	 * Televizyon: görünen bitmap kartın iç kılavuzundan kılavuzuna, eylem
	 * yığınının altında.
	 *
	 * Masaüstü kuralı görseli `--dj-card-image-rise` payının altında ve
	 * `max-block-size` sınırıyla çizer. 252 px'lik bantta boy için 230 px
	 * kalır; kartın iç genişliği 338.4 px'i (230 × 768 / 522) geçtiğinde
	 * `contain` bitmap'i yatayda daraltıyordu (430'da her yanda 9.6 px).
	 *
	 * O eşiğin üstünde bant yalnız gerektiği kadar uzar: üst pay +
	 * dosyanın kendi oranındaki boy (768 / 522). Pay, karşılaştırma
	 * dairesinin tabanından (14 + 36 + 6 + 36 = 92) bandın başlangıcını
	 * (16 + 44 = 60) düşüp 8 px nefes ekler: görsel yığının altında kalır,
	 * üstüne binmez. Eşiğin altında (360/390) hiçbir şey değişmez.
	 * Kırpma ve germe yok; genişlik iç kılavuzdan türer (`cqi`).
	 */
	:is(.dj-popular, .dj-cards, .dj-related) .dj-card[data-dj-family="televizyon"] {
		--dj-tv-media-safe: calc(
			14px + 2 * var(--dj-popular-quick) + var(--dj-popular-quick-gap) + 8px
			- var(--dj-card-padding) - 44px
		);

		container: dj-tv-card / inline-size;
	}

	@container dj-tv-card (min-width: 338.4px) {
		:is(.dj-popular, .dj-cards, .dj-related) .dj-card[data-dj-family="televizyon"] .dj-card__media-link {
			height: calc(var(--dj-tv-media-safe) + 100cqi * 522 / 768);
		}

		:is(.dj-popular, .dj-cards, .dj-related) .dj-card[data-dj-family="televizyon"] .dj-card__media img {
			--dj-card-image-rise: var(--dj-tv-media-safe);
		}
	}
}

/* ------------------------------------------------------------------ */
/* Mobil ürün detayı (≤767)                                            */
/*                                                                     */
/* Masaüstü ve tablet ürün sayfası değişmez. Galeri kaynakları, ek     */
/* sırası ve ürün verisi bu blokta ele alınmaz; yalnız sunum.          */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	/*
	 * Ana görsel: yatay paket içerik kılavuzundan kılavuzuna.
	 *
	 * Masaüstü kadrajı (sağ/alt optik pay, ekin `--dj-fit` ölçeği ve
	 * 70/65 konumu) dar sahnede görseli her iki yandan ~60 px içeri
	 * çekiyordu: 5:4 sahnede boy yetmediği için `contain` ölçeği
	 * yüksekliğe göre kuruluyordu. Mobilde yatay görsel sahnenin tüm
	 * genişliğini alır; sahne boyu rozet bandı + yatay paket tuvalinin
	 * oranından (768 / 522) türer, böylece `contain` genişliğe göre
	 * ölçekler. Kırpma ve germe yoktur; dikey paketler kendi kuralını
	 * korur.
	 */
	.dj-gallery {
		--dj-gallery-band: calc(70px + 8px);

		container: dj-gallery / inline-size;
	}

	.dj-gallery__stage {
		aspect-ratio: auto;
		block-size: calc(var(--dj-gallery-band) + 100cqi * 522 / 768);
		padding-block-start: var(--dj-gallery-band);
	}

	.dj-gallery__figure--landscape {
		padding: 0;
	}

	.dj-gallery__figure--landscape img {
		object-position: 50% 50%;
		transform: none;
	}

	/*
	 * Puan + barkod: barkod ikincil bilgi — ürün adı ve fiyatla yarışmaz.
	 * 390'da puanla aynı satıra sığar; daha dar ekranda doğal olarak
	 * alt satıra iner.
	 */
	.dj-summary__meta {
		column-gap: var(--dj-space-24);
	}

	.dj-summary__ean {
		font-size: var(--dj-fs-14);
		color: var(--dj-muted);
	}

	/*
	 * Enerji etiketi + belgeler tek blok: etiket solda, belgeler sağında
	 * alt alta. Tek satır ölçüldü: 390'da (350 px) iki bağlantı + ikonlar
	 * 13 px'te bile 289 px tutuyor, etikete 61 px kalıyor (etiket 95,
	 * kart etiketi 73). Bloğun yüksekliği iki dokunma satırıdır (2 × 44);
	 * önceki iki satırlık, sola kayan dizilimden kısa. Hücreler ızgaraya
	 * açılır (`display: contents`), işaretleme değişmez.
	 */
	.dj-summary__docs:has(.dj-energy) {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 0 var(--dj-space-16);
	}

	.dj-summary__docs:has(.dj-energy) .dj-summary__doc-cell {
		display: contents;
	}

	.dj-summary__docs:has(.dj-energy) .dj-energy {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.dj-summary__docs:has(.dj-energy) .dj-summary__doc {
		grid-column: 2;
		justify-self: start;
	}

	.dj-summary__doc {
		font-size: var(--dj-fs-15);
	}

	.dj-summary__doc svg {
		width: 18px;
		height: 18px;
	}

	/*
	 * Satın alma çubuğu: ürün sayfasının KENDİ formu (`form.dj-cart-form`)
	 * altta sabit yüzeye taşınır. İkinci form, kopya düğme ya da ayrı sepet
	 * mantığı yoktur: adet, Sepete Ekle, Hemen Al, favori ve karşılaştır
	 * aynı DOM'dur; AJAX akışı `cart.js`'teki form dinleyicisidir.
	 *
	 * 1. satır: adet + Sepete Ekle · 2. satır: Hemen Al + favori + karşılaştır.
	 * Çubuk yüksekliği: 12 + 48 + 8 + 48 + 12 + 1 (üst çizgi) = 129.
	 */
	body.single-product {
		--dj-pdp-bar-h: 129px;

		padding-block-end: calc(var(--dj-pdp-bar-h) + env(safe-area-inset-bottom, 0px));
	}

	.dj-summary__cart .dj-cart-form {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 110;
		gap: 8px;
		margin: 0;
		padding: 12px var(--dj-page-padding) calc(12px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--dj-line);
		background: var(--dj-white);
		box-shadow: 0 -2px 12px rgba(16, 18, 19, 0.05);
	}

	.dj-summary__cart .dj-cart-form__row,
	.dj-summary__cart .dj-cart-form__row--secondary {
		gap: 8px;
	}

	/* Kompakt adet kutusu: düğmeler 44 px dokunma alanında, sayı alanı dar. */
	.dj-summary__cart .dj-qty {
		flex: 0 0 auto;
		height: 48px;
	}

	.dj-summary__cart .dj-qty :is(.quantity, .dj-qty__input) {
		width: 32px;
	}

	/*
	 * `woocommerce.css` (bizden sonra yüklenir) Sepete Ekle'ye 54 px ve
	 * 20 px punto veriyor; seçici bir kademe güçlü tutulur.
	 */
	.woocommerce .dj-summary__cart .dj-cart-form :is(button.dj-cart-form__submit.single_add_to_cart_button, button.dj-cart-form__buy-now) {
		min-height: 48px;
		height: 48px;
		padding-inline: var(--dj-space-16);
		font-size: var(--dj-fs-16);
	}

	.dj-summary__cart .dj-cart-form__row--secondary .dj-icon-btn {
		flex: 0 0 auto;
		width: 48px;
		height: 48px;
	}

	/* Form akıştan çıktı: boş kalan sarmalayıcı ritme boşluk eklemez. */
	.dj-summary__cart:not(:has(> :not(form, .dj-buybar))) {
		margin-block-start: 0;
	}

	/*
	 * Tek alt çubuk: ürün sayfasında global alt gezinme ve eski kaydırma
	 * çubuğu (`.dj-buybar`, aynı formun ikinci göndericisi) gösterilmez.
	 * Diğer sayfalarda alt gezinme aynen durur; tablette çubuk korunur.
	 */
	body.single-product .dj-mobilenav,
	.dj-buybar {
		display: none;
	}

	/* Bildirimler ve karşılaştırma çubuğu satın alma çubuğunun üstünde. */
	body.single-product .dj-notices {
		inset-block-end: calc(var(--dj-pdp-bar-h) + 12px + env(safe-area-inset-bottom, 0px));
	}

	body.single-product .dj-compare-bar {
		bottom: calc(var(--dj-pdp-bar-h) + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * Sekmeler: 18 px kalın etiketler 390'da ekranın ~1.3 katı tutuyor,
	 * üçüncü sekme kenarda kesik okunuyordu. 16 px'te iki sekme tam,
	 * üçüncü kaydırılarak gelir; etiketler bölünmez, etkin alt çizgi
	 * etiket genişliğinde kalır.
	 */
	.dj-tabs {
		--dj-tab-size: 16px;
	}

	.dj-tabs__nav {
		gap: var(--dj-space-20);
		scroll-snap-type: x proximity;
		scroll-padding-inline: 0;
	}

	.dj-tabs__tab {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* ------------------------------------------------------------------ */
/* Masaüstü ürün galerisi — yatay: ortak sol kılavuz, dikey: orta     */
/* ------------------------------------------------------------------ */

/*
 * Galeride hangi görsel seçilirse seçilsin görünen ürün görselinin sol
 * kenarı aynı dikey kılavuzda durur: sahnenin sol kenarı, indirim
 * rozetinin sol kenarıyla aynı çizgi. Ekin kadraj verisi (`--dj-fit`,
 * `--dj-fit-y`) ölçeği ve dikey konumu belirlemeye devam eder; yalnız
 * yatay konum ve ölçeğin çıkış noktası sola sabitlenir. `contain`
 * korunur: kırpma ve germe yoktur, sağ kenar görselin oranına göre değişir.
 * Tablet (768–1023) ve mobil (≤767) galeri kuralları bu bloktan etkilenmez.
 */
@media (min-width: 1024px) {
	.dj-gallery__figure img {
		object-position: 0% var(--dj-fit-y, 50%);
		transform-origin: 0% var(--dj-fit-y, 50%);
	}

	/*
	 * Dikey paket (yükseklik > genişlik; sınıf ekin boyut verisinden gelir,
	 * galeri sırasından değil) sahnenin yatay ortasında durur. Sağdaki optik
	 * pay kaldırılır ki orta, kutunun değil sahnenin ortası olsun; dikey
	 * konum ve boy değişmez.
	 */
	.dj-gallery__figure--portrait {
		padding-inline-end: 0;
	}

	.dj-gallery__figure--portrait img {
		object-position: 50% var(--dj-fit-y, 50%);
		transform-origin: 50% var(--dj-fit-y, 50%);
	}
}