/* Anasayfa bölümleri. */

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

/*
 * XD: koyu üst şerit hero fotoğrafının üzerinde değil, üstündedir
 * (fotoğraf y=50'de başlar). Şeffaf başlık hero'nun üzerine bindiği için
 * şeridin yüksekliği kadar üst boşluk bırakılır; zemin zaten koyu.
 */
.dj-hero {
	position: relative;
	padding-block-start: var(--dj-topbar-height);
	background: var(--dj-ink);
}

/*
 * İlk ekran tam otursun: üst şerit + hero görüntü alanı = 100svh.
 * Ana başlık hero'nun üzerine bindiği için yüksekliği ikinci kez
 * düşülmez. XD oranı (1920/1030) yedek olarak kalır.
 */
.dj-hero__viewport {
	position: relative;
	aspect-ratio: 1920 / 1030;
	min-height: calc(480 * var(--dj-u));
	/* Görsel XD yerleşimiyle tuvalden taşar; kırpma burada yapılır. */
	overflow: hidden;
}

@media (min-width: 1024px) {
	.dj-hero__viewport {
		height: calc(100svh - var(--dj-topbar-height));
		aspect-ratio: auto;
	}
}

.dj-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: calc(90 * var(--dj-u));
	/*
	 * Geçiş yatay kaydırmadır: yön fiziksel olarak okunur, opaklık karışımı
	 * yoktur. Slaytlar görüntü alanının dışına park eder ve pencere zaten
	 * kırptığı için üst üste görünmezler. Ölçek, gölge ya da yaylanma yok.
	 * Süre/yumuşatma referans ölçümüyle aynı: 600 ms, `ease`.
	 */
	visibility: hidden;
	transform: translateX(100%);
	transition: transform var(--dj-transition-slide), visibility 0s linear var(--dj-motion-slide);
}

/* Etkin ve çıkmakta olan slayt geçiş boyunca görünür kalır. */
.dj-hero__slide.is-active,
.dj-hero__slide.is-leaving {
	visibility: visible;
	transition: transform var(--dj-transition-slide), visibility 0s;
}

.dj-hero__slide.is-active {
	transform: translateX(0);
}

/* Park anında hareket olmaz. */
.dj-hero__slide.is-instant {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.dj-hero__slide {
		transition: visibility 0s;
	}
}

/*
 * XD hero pattern'i: `cover` tabanı üzerine ×1.2418 ölçek, offsetY
 * −0.02267. Ölçekli görsel 2384.4×1330.9 (tuval 1920×1030) ve sol üstü
 * (−232.2, −173.8) → yüzdeyle: 124.19% × 129.21%, −12.09% / −16.87%.
 * `object-position: center` tasarımdakinden çok daha geniş bir kadraj
 * gösteriyordu.
 */
/*
 * XD hero pattern'i: `cover` tabanı üzerine ×1.2418 ölçek. Genişlik kutu
 * genişliğinin %124.19'u; yükseklik doğal orandan gelir, böylece kutu
 * yüksekliği (100svh) değişse de kadraj bozulmaz. Dikey çapa `translateY`
 * ile kendi yüksekliğine göre verilir — kutu yüksekliğinden bağımsızdır.
 */
.dj-hero__image {
	position: absolute;
	inset-inline-start: -12.09%;
	inset-block-start: 50%;
	width: 124.19%;
	height: auto;
	max-width: none;
	object-fit: cover;
	/*
	 * XD kadrajında görsel merkezi kutu merkezinin %1.75 üstünde. Çapa
	 * merkeze bağlandığı için kutu (100svh) kısaldığında kompozisyon
	 * kayıp gitmez; üstten ve alttan dengeli kırpılır.
	 */
	transform: translateY(-51.75%);
}

/*
 * Görsel yüksekliği genişlikten gelir; kutu fotoğraftan yüksek kaldığında
 * (1024×900, 1280×1024) altta koyu bant açılıyordu. Merkez çapası −%51.75
 * olduğundan kutuyu iki kenarda da kaplamak için yükseklik en az kutunun
 * %103.7'si olmalı (üst −%3.66, alt +%0.04). Görsel zaten daha yüksekse
 * (1440×900: ~997 > 894) kural etkisizdir ve kadraj birebir aynı kalır;
 * fazlası `cover` ile yanlardan kırpılır.
 */
@media (min-width: 1024px) {
	.dj-hero__image {
		min-height: 103.7%;
	}
}

.dj-hero__overlay {
	position: absolute;
	inset: 0;
	/*
	 * XD'de hero boyunca karartma yok; yalnız gezinmenin arkasında
	 * 1920×200 gradient (opaklık 0.50) duruyor. Alt karartma referansa
	 * göre kanepeyi 0.19 daha koyu gösteriyordu.
	 */
	background: linear-gradient(
		to bottom,
		rgba(16, 18, 19, 0.5) 0,
		rgba(16, 18, 19, 0) calc(200 * var(--dj-u))
	);
}

.dj-hero__content {
	position: relative;
	text-align: center;
	color: var(--dj-white);
}

.dj-hero__label {
	font-size: var(--dj-fs-22);
	font-weight: var(--dj-fw-semibold);
	margin-bottom: var(--dj-space-8);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.dj-hero__title {
	font-size: var(--dj-fs-52);
	font-weight: var(--dj-fw-extrabold);
	line-height: 1.192; /* XD 62/52 */
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
	margin: 0;
}

.dj-hero__title a {
	color: var(--dj-white);
}

.dj-hero__title a:hover {
	color: var(--dj-gray-300);
}

.dj-hero__nav {
	position: absolute;
	/* XD: ok merkezi artboard y=620; hero kutusu 1080 → %57.4. */
	top: 57.4%;
	transform: translateY(-50%);
	/*
	 * Fotoğrafın üzerinde net ayrışsın diye daire görünür bir çerçeve taşır;
	 * kenarlık normalde de vardır, bu yüzden ters çevirmede kutu değişmez.
	 */
	border: 1px solid var(--dj-line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(60 * var(--dj-u));
	height: calc(60 * var(--dj-u));
	border-radius: 50%;
	/* XD: daire dolgusu tam opak beyaz (ölçülen ortalama parlaklık 254). */
	background: var(--dj-white);
	color: var(--dj-ink);
	transition: background-color var(--dj-transition);
	z-index: 2;
}

/*
 * Zemin/renk dönüşü ortak dairesel eylem ailesinden gelir. Burada yalnız
 * ok, yönünü 2 px belli eder; daire yerinde kalır, ölçüsü değişmez.
 */
@media (hover: hover) {
	.dj-hero__nav--prev:hover svg {
		transform: translateX(-2px);
	}

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

/*
 * XD: chevron çizimi 9.5 x 16.5. Kullanıcı revizesi okun daha belirgin
 * olmasını istiyor: 7'lik viewBox'ta 2.2 gövde → ekranda ~2.3px, daire
 * ölçüsü değişmeden anti-aliasing'de kaybolmayan bir ok.
 */
.dj-hero__nav svg {
	width: calc(9.5 * var(--dj-u));
	height: calc(16.5 * var(--dj-u));
	stroke-width: 2.2;
}

.dj-hero__nav--prev { inset-inline-start: var(--dj-space-30); }
.dj-hero__nav--next { inset-inline-end: var(--dj-space-30); }

.dj-hero__dots {
	position: absolute;
	/* XD: nokta üstü 1020, hero altı 1080 → 50 boşluk; merkez aralığı 29. */
	bottom: calc(50 * var(--dj-u));
	inset-inline: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Kutu 13, merkez aralığı 29 (XD). */
	gap: calc(16 * var(--dj-u));
	z-index: 2;
}

/*
 * XD ölçümü: pasif nokta 10 çapında düz gri (#989898); etkin nokta 13 dış çap,
 * 2.6 beyaz halka ve 7.8 gri çekirdek. Kutu her iki durumda 13 kalır, böylece
 * slayt değişince noktalar yer değiştirmez.
 */
.dj-hero__dot {
	box-sizing: border-box;
	width: calc(13 * var(--dj-u));
	height: calc(13 * var(--dj-u));
	border-radius: 50%;
	border: calc(1.5 * var(--dj-u)) solid transparent;
	background: var(--dj-dot-idle);
	background-clip: padding-box;
	transition: border-color var(--dj-transition), border-width var(--dj-transition);
}

.dj-hero__dot.is-active {
	border-width: calc(2.6 * var(--dj-u));
	border-color: var(--dj-white);
}

/* ------------------------------------------------------------------ */
/* Kategori kartları                                                   */
/* ------------------------------------------------------------------ */

.dj-home-cats__track {
	grid-auto-columns: calc((100% - (var(--dj-gutter) * 3)) / 4);
	gap: var(--dj-gutter);
}

/*
 * XD/PDF'te kategori satırının okları 4 kart tam sığdığında da çizili.
 * Kaydırılacak içerik yoksa `product.js` ikisini de `disabled` yapar;
 * burada yalnız görünürlük sağlanır.
 */
.dj-home-cats .dj-carousel__arrow {
	display: inline-flex;
	/*
	 * XD Rectangle 608: daire 60, merkezi (1815, 1379). 1815 son kartın sağ
	 * kenarı, 1379 ise kartın KENDİ dikey merkezi (1129 + 500/2). Dolayısıyla
	 * dairenin yarısı kart alanının içinde, yarısı dışında kalır.
	 *
	 * Yatay: kutuyu yarıçapı kadar dışarı almak merkezi tam kenara oturtur.
	 * Dikey: kapsayıcının yüksekliği, izin kaydırma çubuğu payı (`padding-bottom`)
	 * kadar karttan uzundur; bu pay düşülmezse ok kartın merkezinin altına düşer.
	 */
	top: calc((100% - var(--dj-carousel-pad-b)) / 2);
}

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

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

/* XD: daire içindeki chevron 9.5 × 16.5, gövde ~2 — hero oklarıyla aynı aile. */
.dj-home-cats .dj-carousel__arrow svg {
	width: calc(9.5 * var(--dj-u));
	height: calc(16.5 * var(--dj-u));
	stroke-width: 2.2;
}

/*
 * XD 405×500, iç boşluk 30. Kart dört bölgeli bir ızgaradır: başlık, sayı,
 * medya ve CTA. Medya satırı `1fr` olduğu için ürün yüksekliği değişse de
 * CTA daima kartın altına sabitlenir — dört kartta aynı hizada durur.
 */
.dj-cat-card {
	position: relative;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	padding: var(--dj-space-30);
	aspect-ratio: 405 / 500;
	height: auto;
	background: var(--dj-surface);
	border-radius: var(--dj-radius-md);
}

/* XD: başlık taban çizgisi kart üstünden 61, sayınınki 86 → aradaki fark 25. */
.dj-cat-card__count {
	position: relative;
	z-index: 1;
	margin: calc(4 * var(--dj-u)) 0 0;
	/*
	 * 1024'te 14u 7.5 px'e iniyordu. Okunurluk tabanı 11 px; taban 1280'den
	 * sonra doğrusal söner (1440'ta 9 px < 14u = 10.5 px), 1440 ve üstü aynı.
	 */
	font-size: max(0.875rem, calc(14 * var(--dj-u)));
	font-weight: var(--dj-fw-medium);
	line-height: 1.2;
	color: var(--dj-muted);
}

/*
 * Ortak vitrin alanı. Kutu, kartın iç alanının tamamını kaplar ve akıştan
 * çıkarılır: böylece ürün görseli başlık/CTA bloklarının farklı yükseklikleri
 * yüzünden kaymadan KARTIN KENDİ merkezine oturur (XD'de dört görselin de
 * dikey merkezi 1379 = kart üstü + 250). Kırpma alanı görselden çok daha
 * büyük olduğu için hover büyümesi kenardan taşmaz.
 */
.dj-cat-card__media {
	position: absolute;
	inset: var(--dj-space-30);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	overflow: hidden;
}

.dj-cat-card__media > * {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
}

/* XD ölçümü: en geniş çizim 320 (TV/klima), en yüksek 286 (buzdolabı). */
.dj-cat-card__media img {
	width: auto;
	height: auto;
	max-width: calc(320 * var(--dj-u));
	max-height: calc(286 * var(--dj-u));
	object-fit: contain;
	transition: transform var(--dj-transition-slow);
}

.dj-cat-card:hover .dj-cat-card__media img {
	transform: scale(1.04);
}

/*
 * Kontrollü kırpma çerçevesi. Tasarımda bazı ürünler tamamı sığdırılarak
 * değil, sabit bir pencereden kırpılarak gösteriliyor (XD "Mask Group" +
 * kırpma dikdörtgeni). Pencere ve görsel ölçüleri terim verisinden gelen
 * özel değişkenlerle verilir; kural kategoriden bağımsızdır.
 */
.dj-media-frame {
	position: relative;
	flex: 0 0 auto;
	width: calc(var(--dj-frame-w) * var(--dj-u));
	height: calc(var(--dj-frame-h) * var(--dj-u));
	overflow: hidden;
	/*
	 * Hover'da büyüyen nesne maske + görselin TAMAMI: pencere ve içindeki
	 * görsel birlikte ölçeklenir. Görseli tek başına büyütmek maske içinde
	 * görünen bölgeyi kaydırıyor ve ürünün altını fazladan kesiyordu.
	 * Merkezden büyüdüğü için kafa yana/yukarı zıplamaz.
	 */
	transform-origin: 50% 50%;
	transition: transform var(--dj-transition-slow);
}

/* Diğer kartlarla aynı algısal hover seviyesi (onlarda img 1.04 büyüyor). */
.dj-cat-card:hover .dj-media-frame {
	transform: scale(1.04);
}

.dj-cat-card__media .dj-media-frame img {
	position: absolute;
	inset-inline-start: calc(var(--dj-frame-x) * var(--dj-u));
	inset-block-start: calc(var(--dj-frame-y) * var(--dj-u));
	width: calc(var(--dj-frame-iw) * var(--dj-u));
	height: auto;
	max-width: none;
	max-height: none;
	object-fit: fill;
	/*
	 * Görsel maskeye göre hiç oynamaz — ne normalde ne hover'da. Böylece
	 * pencere içindeki kompozisyon (kafa/LCD konumu, gövde oranı, görünür
	 * alt nokta) her iki durumda birebir aynı kalır; yalnız kırpılmış
	 * nesnenin tamamı büyür. Parlaklık ikincil geri bildirimdir.
	 */
	transform: none;
	transition: filter var(--dj-transition-slow);
}

.dj-cat-card:hover .dj-cat-card__media .dj-media-frame img {
	transform: none;
	filter: brightness(1.03);
}

.dj-cat-card__title {
	position: relative;
	z-index: 1;
	font-size: var(--dj-fs-32);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
	margin: 0;
}

/*
 * XD Rectangle 502: 240×50, köşe 30. Metin soldan 30, ok sağdan ~30 içeride;
 * ikisi arasındaki boşluk 12.5. Bu yüzden içerik iki uca yaslanır.
 */
.dj-cat-card__cta {
	/*
	 * Medya kutusu akış dışı olduğu için düğme ızgaranın son satırına
	 * açıkça yerleştirilir; aksi hâlde boş `1fr` satırına düşüyor.
	 * Ayrıca medya kartı kapladığından düğme onun üstünde kalmalı.
	 */
	grid-row: 4;
	position: relative;
	z-index: 1;
	align-self: start;
	justify-self: start;
	justify-content: space-between;
	gap: calc(12.5 * var(--dj-u));
	min-width: calc(240 * var(--dj-u));
	min-height: calc(50 * var(--dj-u));
	padding-inline: calc(30 * var(--dj-u));
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
	background: var(--dj-white);
	border-color: var(--dj-white);
}

/* XD: ok çizimi 6.2 × 10.8, gövde 2 — dar viewBox'ta ince kalmaz. */
/* Kısa (mobil) düğme metni yalnız 767 ve altında görünür. */
.dj-cat-card__cta-label--mobile {
	display: none;
}

.dj-cat-card__cta svg {
	flex: 0 0 auto;
	width: calc(6.2 * var(--dj-u));
	height: calc(10.8 * var(--dj-u));
	stroke-width: 2.26;
}

/* ------------------------------------------------------------------ */
/* Kategori tanıtımı                                                   */
/* ------------------------------------------------------------------ */

/*
 * Tasarımda bu panel bir ürün kesiti değil, yaşam alanı fotoğrafıdır:
 * kum rengi zemin solda metni taşır, fotoğraf sağdan panelin kenarına
 * taşarak akar (Anasayfa.pdf, 1679–2329).
 */
.dj-promo__panel {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--dj-surface-promo);
	border-radius: var(--dj-radius-md);
	overflow: hidden;
	min-height: calc(650 * var(--dj-u));
}

/*
 * Metin sütunu kum zeminde durur; başlığın son satırı tasarımdaki gibi
 * fotoğrafın soluna doğru taşabilsin diye genişlik içerikten gelir.
 */
.dj-promo__body {
	position: relative;
	/* Metin tüm görsel katmanların üstünde. */
	z-index: 3;
	padding-block: var(--dj-space-60);
	padding-inline: var(--dj-space-100) var(--dj-space-40);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--dj-space-16);
	/* XD: metin çerçevesi 740 + 100 iç boşluk. */
	max-width: calc(840 * var(--dj-u));
}

.dj-promo__eyebrow {
	margin: 0;
	font-size: var(--dj-fs-22);
	font-weight: var(--dj-fw-semibold);
	line-height: 1; /* XD: eyebrow ile başlık arası 36. */
	letter-spacing: 0.04em;
	color: var(--dj-ink);
}

.dj-promo__title {
	font-size: var(--dj-fs-52);
	font-weight: var(--dj-fw-extrabold);
	line-height: 1.385; /* XD 72/52 */
	margin: 0;
}

.dj-promo__bullets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dj-space-8) var(--dj-space-20);
	list-style: none;
	font-size: var(--dj-fs-20);
}

.dj-promo__bullets li {
	display: inline-flex;
	align-items: center;
	gap: calc(8 * var(--dj-u));
}

.dj-promo__bullets li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dj-ink);
	/* Nokta imleç altında da yerinde kalır. */
	flex: 0 0 auto;
}

/*
 * Maddeler kategori arşivine giden bağlantıdır. Normal görünüm metinden
 * ayrışmaz: renk, punto ve kalınlık devralınır, tarayıcının kendi alt
 * çizgisi ve ziyaret edilmiş bağlantı rengi kapatılır.
 *
 * Vurgu yalnız imleç ve klavye odağında gelir ve **yalnız bir sözde
 * öğeyle** çizilir: metnin altında `currentColor` 1 px çizgi, soldan sağa
 * açılır. Metnin rengi, saydamlığı ve kalınlığı hiç değişmez; çizgi akış
 * dışında olduğu için genişlik, satır sarımı ve panel yüksekliği sabit
 * kalır. Nokta madde işaretinin altına uzamaz: sözde öğe bağlantı
 * kutusuna bağlıdır, nokta `li`'nin ayrı bir çocuğudur.
 *
 * Kural yalnız bu bileşene bağlıdır; genel bağlantı stili değişmez.
 */
.dj-promo__bullet-link,
.dj-promo__bullet-link:visited,
.dj-promo__bullet-link:hover,
.dj-promo__bullet-link:focus,
.dj-promo__bullet-link:active {
	/*
	 * `base.css` tüm bağlantılara `a:hover { color: var(--dj-muted) }`
	 * veriyor; metin imleç altında griye dönüyordu. Genel kural
	 * değiştirilmeden yalnız bu bileşende etkisizleştirilir — renk her
	 * durumda gövdeden devralınır, ziyaret edilmiş bağlantı da değişmez.
	 */
	color: inherit;
	text-decoration: none;
}

.dj-promo__bullet-link {
	position: relative;
}

.dj-promo__bullet-link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 200ms ease;
	pointer-events: none;
}

[dir="rtl"] .dj-promo__bullet-link::after {
	transform-origin: right;
}

@media (hover: hover) {
	.dj-promo__bullet-link:hover::after {
		transform: scaleX(1);
	}
}

/*
 * Odak göstergesi tasarım diliyle uyumlu: mavi sistem halkası yerine
 * metnin kendi mürekkep rengiyle ince bir çerçeve. Alt çizgi de açıldığı
 * için odak iki ayrı işaretle belli olur. `outline` akışı etkilemez.
 */
.dj-promo__bullet-link:focus-visible {
	outline: 1px solid var(--dj-ink);
	outline-offset: 3px;
	border-radius: 2px;
}

.dj-promo__bullet-link:focus-visible::after {
	transform: scaleX(1);
}

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

/*
 * XD Rectangle 519: 237 × 50, köşe 30. Metin soldan 30.8, ok sağdan 30.8
 * içeride, metin–ok arası 12.8 — kategori kartı CTA'sıyla aynı sistem.
 * Ok önceden ölçüsüz bir chevron olduğu için 0×0 çiziliyordu.
 */
.dj-promo__body > .dj-btn {
	margin-block-start: var(--dj-space-30);
	/*
	 * Ok metnin hemen yanında durur; sağ kenara itilmez. Düğmenin dış
	 * ölçüsü XD'deki 237 × 50 olarak kalır (aşağıdaki `min-width`).
	 */
	justify-content: center;
	gap: calc(12.8 * var(--dj-u));
	min-width: calc(237 * var(--dj-u));
	padding-inline: calc(30 * var(--dj-u));
}

/* XD Union 12: 6.2 × 10.8, gövde ~2. */
.dj-promo__body > .dj-btn svg {
	flex: 0 0 auto;
	width: calc(6.2 * var(--dj-u));
	height: calc(10.8 * var(--dj-u));
	stroke-width: 2.26;
}

/*
 * CTA etkileşimi — sitedeki birincil düğme standardı.
 *
 * Normalde siyah zemin / beyaz metin, hover ve klavye odağında beyaz zemin /
 * siyah metin; kenarlık normalde de vardır (zeminle aynı renk), bu yüzden
 * kutu ölçüsü durumlar arasında değişmez. Yükselme, gölge ve ölçek yok —
 * geri bildirim renkle verilir, ok en fazla 2 px ilerler. Metin yerinden
 * oynamaz, düğme genişliği sabittir.
 */
.dj-promo__body > .dj-btn {
	border: 1px solid var(--dj-ink);
	transition:
		background-color var(--dj-transition),
		color var(--dj-transition),
		border-color var(--dj-transition);
}

.dj-promo__body > .dj-btn svg {
	transition: transform var(--dj-transition);
}

/* Dokunmatik cihazda hover durumu yapışıp kalmasın. */
@media (hover: hover) {
	.dj-promo__body > .dj-btn:hover {
		background: var(--dj-white);
		border-color: var(--dj-ink);
		color: var(--dj-ink);
	}

	.dj-promo__body > .dj-btn:hover svg {
		transform: translateX(2px);
	}
}

.dj-promo__body > .dj-btn:focus-visible {
	background: var(--dj-white);
	border-color: var(--dj-ink);
	color: var(--dj-ink);
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

.dj-promo__body > .dj-btn:focus-visible svg {
	transform: translateX(2px);
}

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

@media (prefers-reduced-motion: reduce) {
	.dj-promo__body > .dj-btn svg,
	.dj-promo__body > .dj-btn:hover svg,
	.dj-promo__body > .dj-btn:focus-visible svg {
		transition: none;
		transform: none;
	}
}

/*
 * Panel tek düz görsel değil, XD'deki gibi ÜÇ KATMANDIR:
 *
 *   1. fotoğraf        — panel x 580.2, genişlik 1159.8 (sağdan taşar, kırpılır)
 *   2. kum geçişi      — panel x 609, genişlik 263 (Rectangle 613)
 *   3. ön plan koltuk  — panel x 675, y 350, 276 × 263
 *
 * Önceki uygulama fotoğrafı maskeliyordu; maskenin saydam ucu koltuğu da
 * siliyordu. XD ise fotoğrafı hiç kesmez, üzerine kum rengi geçiş bindirir
 * ve koltuğu o geçişin üstünde yeniden çizer. Sıralama bu yüzden önemli.
 */
/*
 * Fotoğrafın yerleşimi XD'den TÜRETİLDİ, tahmin edilmedi: ön plan katmanı
 * (`ea3ac6135d`, 1046×996) kaynak fotoğrafın (456, 1860) noktasından 1:1
 * kesittir — şablon eşleştirmeyle bulundu (korelasyon 0.977). O kesit XD'de
 * panel (675, 350, 276, 263) kutusuna oturduğuna göre fotoğrafın ölçeği
 * 0.26386 ve panel-göreli yerleşimi 554.7 / −140.8 · 1187.4 × 791.6 olur.
 * Bu değerlerle fotoğraftaki koltuk ile ön plan katmanı BİREBİR çakışır.
 */
.dj-promo__media {
	position: absolute;
	inset-block: 0;
	/*
	 * Görünür kutu geçişin başladığı yerden (panel x 609) sağ kenara kadar.
	 * Onaylı tasarımda fotoğraf bu noktadan önce hiç görünmüyor; kutu daha
	 * solda başlarsa geçişin kapsamadığı bir şerit fotoğrafı açıkta bırakıyor.
	 */
	inset-inline-start: 35.61%;
	width: 64.39%;
	overflow: hidden;
	z-index: 0;
}

/*
 * Katmansız panel: görsel kutusunu oranını bozmadan doldurur. Yaşam alanı
 * fotoğrafı `cover` ile kırpılır; dekupe ürün kesiti (`--cutout`) `contain`
 * ile bütün kalır. Önceki kural XD ofsetlerini ve `fill`i her görsele
 * uyguluyordu — başka kategoride ürün ~4 kat esniyordu.
 */
.dj-promo__panel .dj-promo__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.dj-promo__panel--cutout .dj-promo__media img {
	padding: var(--dj-space-40);
	object-fit: contain;
	object-position: 50% 100%;
}

@media (min-width: 1024px) {
	/*
	 * Katmanlı panel (ön plan katmanı tanımlı). Görselin kutu içindeki
	 * yerleşimi türetilmiş değerlerdir (bkz. üstteki not): panel-göreli sol
	 * 553.9, üst −142.2, 1185.8 × 790.6. Yatay değerler kutu genişliğine
	 * göre yüzde (kutu 1101); dikey değerler panel GENİŞLİĞİNE göre `cqw`
	 * (÷1710). Önceden dikeyler panel yüksekliğine göre yüzdeydi: metin
	 * paneli 1710:650 oranından uzattığında (1024–1199'da 4 satır başlık)
	 * fotoğraf ve koltuk ~×1.13 dikey esniyordu. Oran 1710:650 iken iki
	 * yöntem aynı pikseli verir.
	 */
	.dj-promo__panel--layered {
		container-type: inline-size;
	}

	.dj-promo__panel--layered .dj-promo__media img {
		inset: auto;
		inset-inline-start: -5.01%;
		inset-block-start: -8.3158cqw;
		width: 107.7%;
		height: 46.2339cqw;
		object-fit: fill;
	}

	/*
	 * XD Rectangle 613: panel x 609–872, kum renginden saydama doğrusal geçiş.
	 * Durakları XD'den birebir: 0 → tam opak, %25.99 → 0.988, %100 → 0.
	 */
	.dj-promo__panel--layered::after {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 35.61%;
		width: 15.38%;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(
			to right,
			var(--dj-surface-promo) 0,
			rgba(190, 184, 168, 0.988) 25.99%,
			rgba(190, 184, 168, 0) 100%
		);
	}
}

/*
 * Ön plan katmanı geçişin ÜSTÜNDE durur; konumu terim verisinden gelen
 * özel değişkenlerle verilir (tasarım px, panelin sol üstüne göre).
 */
.dj-promo__foreground {
	position: absolute;
	z-index: 2;
	inset-inline-start: calc(var(--dj-fg-x) / 1710 * 100%);
	inset-block-start: calc(var(--dj-fg-y) / 650 * 100%);
	width: calc(var(--dj-fg-w) / 1710 * 100%);
	height: calc(var(--dj-fg-h) / 650 * 100%);
	pointer-events: none;
}

.dj-promo__foreground img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: fill;
}

@media (min-width: 1024px) {
	/*
	 * Ön planın dikey konumu da fotoğrafla aynı ölçekten (panel genişliği)
	 * gelir; koltuk hem oranını korur hem fotoğraftaki koltukla çakışık kalır.
	 */
	.dj-promo__panel--layered .dj-promo__foreground {
		inset-block-start: calc(var(--dj-fg-y) / 1710 * 100cqw);
		height: calc(var(--dj-fg-h) / 1710 * 100cqw);
	}
}

/*
 * 1024–1279: başlık tipografi tabanında (≤1199'da 40 px, üstünde 39 px)
 * kalırken panel küçülüyordu; başlık 4 satıra kırılıp maddeleri koltuğun
 * üstüne itiyor, son satırı koltuğa değiyordu. Burada başlık tasarım
 * ölçeğiyle (52u) küçülür: satır kırılımı Anasayfa.pdf ve 1440 ile aynı,
 * 1024'te ~28 px (1023 tablet başlığıyla aynı). Maddeler koltuk sütununa
 * (XD x 675) girmesin diye iki kolon; 1280 ve üstü değişmez.
 */
@media (min-width: 1024px) and (max-width: 1279px) {
	.dj-promo__panel--layered .dj-promo__title {
		font-size: calc(52 * var(--dj-u));
	}

	.dj-promo__panel--layered .dj-promo__bullets {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, max-content));
		max-width: calc(520 * var(--dj-u));
	}
}

/* ------------------------------------------------------------------ */
/* Popüler ürünler                                                     */
/* ------------------------------------------------------------------ */

/*
 * Kullanıcı revizesi: bölümün alt nefes payı üsttekiyle eşitlenir. Üstteki
 * 100 tamamen bu bölümün kendi `padding-block-start`'ından geliyor; altta
 * sonraki bölümün üst payı 50 olduğu için kalan 50 buradan verilir. Sonraki
 * bölüme margin eklenmez.
 */
.dj-popular {
	padding-block-end: var(--dj-space-50);
}

/* XD: başlık 105'te bitip sekmeler 540'ta başlıyor → aradaki boşluk 44. */
.dj-popular__head {
	display: flex;
	align-items: baseline;
	gap: calc(44 * var(--dj-u));
	flex-wrap: wrap;
	margin-bottom: var(--dj-space-50);
}

/*
 * XD: sekme metinleri arası 54.6 (nokta ortada), sekme taban çizgisi başlık
 * taban çizgisinin 8 üstünde — iki farklı punto için optik hiza.
 */
.dj-popular__tabs {
	display: flex;
	align-items: center;
	gap: calc(54.6 * var(--dj-u));
	flex-wrap: wrap;
	transform: translateY(calc(-8 * var(--dj-u)));
}

.dj-popular__tab {
	position: relative;
	font-size: var(--dj-fs-28);
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-tab-idle);
	transition: color var(--dj-transition);
}

.dj-popular__tab:not(:last-child)::after {
	/* XD: ayırıcı 6×6 daire (Ellipse 1/2), noktalama işareti değil. */
	content: "";
	position: absolute;
	inset-inline-end: calc(-30.3 * var(--dj-u));
	top: 50%;
	width: 6px;
	height: 6px;
	margin-block-start: -3px;
	border-radius: 50%;
	background: var(--dj-tab-idle);
}

.dj-popular__tab.is-active,
.dj-popular__tab:hover {
	color: var(--dj-ink);
}

/* ------------------------------------------------------------------ */
/* İkili tanıtım kutuları                                              */
/* ------------------------------------------------------------------ */

.dj-tiles__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* XD: kutular 830 geniş, aralarında 47. */
	gap: calc(47 * var(--dj-u));
}

.dj-tile {
	/* XD Rectangle 699/700: 830 × 820, köşe 16, zemin #efefef. */
	--dj-tile-w: 830;
	--dj-tile-h: 820;
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--dj-surface-tile);
	border-radius: var(--dj-radius-md);
	overflow: hidden;
	min-height: calc(820 * var(--dj-u));
}

/*
 * Görsel, kutunun kendi koordinat sisteminde bir katmandır: yerleşim
 * bileşenin `media_box` alanından gelir (tasarım px: x, y, genişlik,
 * yükseklik). Kutudan taşan kısım `overflow: hidden` ile kırpılır — soldaki
 * su sebili tasarımda alttan böyle taşar. Kategori adına göre CSS kuralı
 * yoktur; sunum tamamen veriyle belirlenir.
 */
.dj-tile--placed .dj-tile__media {
	position: absolute;
	inset-inline-start: calc(var(--dj-tile-mx) / var(--dj-tile-w) * 100%);
	inset-block-start: calc(var(--dj-tile-my) / var(--dj-tile-h) * 100%);
	width: calc(var(--dj-tile-mw) / var(--dj-tile-w) * 100%);
	height: calc(var(--dj-tile-mh) / var(--dj-tile-h) * 100%);
	min-height: 0;
}

.dj-tile--placed .dj-tile__media img {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top;
}

.dj-tile__body {
	position: relative;
	z-index: 1;
	padding-block: calc(var(--dj-tile-body, 53) * var(--dj-u)) var(--dj-space-30);
	/*
	 * XD'de açıklamalar tek satır: sağdaki 56–774 arasında, ölçü 718. Web
	 * Inter aynı cümleyi 752 çiziyor. Tasarımın iç boşluğu (56) korunsaydı
	 * satır ikiye bölünür, düğme 27 px aşağı kayar ve kutu 820'yi aşardı —
	 * yani dikey ritim ve kutu ölçüsü bozulurdu. Bunun yerine ölçü metnin
	 * gerçek genişliğine açıldı: satır tek kalır, düğme ve kutu tasarımdaki
	 * yerinde durur; açıklama yatayda iki yana 17 px daha yayılır.
	 */
	padding-inline: calc(38 * var(--dj-u));
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

/*
 * Dikey ritim XD'den: üst etiket taban çizgisi 72, başlık satırları 128 ve
 * 180 (satır aralığı 52), açıklama 227, düğme kutusu 261–311. Aynı ritim
 * sağdaki kutuda 531 / 587 / 639 / 686 / 720 olarak tekrar eder; farklı olan
 * yalnız bloğun başlangıç noktasıdır (`body_top`).
 */
.dj-tile__eyebrow {
	margin: 0;
	font-size: var(--dj-fs-22);
	font-weight: var(--dj-fw-semibold);
	line-height: 1;
	/*
	 * Harf aralığı yok: 0.04em ile üst etiket tasarımdakinden %6–7 daha
	 * geniş çiziliyordu (133 → 141 ve 169 → 181).
	 */
	letter-spacing: normal;
}

.dj-tile__title {
	margin: 0;
	margin-block-start: calc(12.7 * var(--dj-u));
	font-size: var(--dj-fs-42);
	font-weight: var(--dj-fw-extrabold);
	line-height: 1.238; /* XD 52/42 */
}

.dj-tile__text {
	margin: 0;
	margin-block-start: calc(15.3 * var(--dj-u));
	font-size: max(1rem, var(--dj-fs-18));
	line-height: var(--dj-lh-normal);
	color: var(--dj-ink);
}

/*
 * Düğme — PDF ölçümü: hap 215 × 50 (sol) ve 189.5 × 50 (sağ), yani genişlik
 * içeriğe bağlı; iç boşluk 28.5, metin–ok aralığı 13.5, ok çizimi 6.5 × 11.
 * Ok, kategori kartı ve TV tanıtımıyla aynı sıkı viewBox'lı `caret-right`.
 */
.dj-tile__cta {
	margin-block-start: calc(27 * var(--dj-u));
	min-height: calc(50 * var(--dj-u));
	padding-inline: calc(28.5 * var(--dj-u));
	gap: calc(13.5 * var(--dj-u));
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
	/*
	 * Etkileşim yalnız çerçeveyle anlatılır: beyaz zemin, siyah metin ve ok
	 * aynı kalır, hap yerinden kımıldamaz. Çizgi `outline` ile çizilir —
	 * `outline` düzen hesabına girmediği için normal ↔ hover geometrisi
	 * birebir aynıdır (kenarlık eklemek hapı 2 px genişletirdi).
	 * `outline-offset` negatif olduğundan çizgi hapın kendi köşesini izler.
	 */
	outline: 2px solid transparent;
	outline-offset: -2px;
	transition: outline-color 180ms ease;
}

.dj-tile__cta svg {
	flex: 0 0 auto;
	width: calc(6.5 * var(--dj-u));
	height: calc(11 * var(--dj-u));
	stroke-width: 2.26;
}

/*
 * Zemin ve metin hover'da da aynı kalır: `.dj-btn--light:hover` beyazı
 * `--dj-surface`e çeviriyordu, bu iki düğmede beyaz korunur.
 */
.dj-tile__cta:hover,
.dj-tile__cta:focus-visible {
	background: var(--dj-white);
	color: var(--dj-ink);
}

/* Dokunmatik cihazda hover durumu yapışıp kalmasın. */
@media (hover: hover) {
	.dj-tile__cta:hover {
		outline-color: var(--dj-ink);
	}
}

/* Klavye odağı da aynı çerçeveli görünümü kullanır; ek halka yok. */
.dj-tile__cta:focus-visible {
	outline-color: var(--dj-ink);
}

/* Yerleşim kutusu tanımlanmadığında (yedek model) görsel akışta kalır. */
.dj-tile__media {
	position: relative;
	flex: 1 1 auto;
	min-height: calc(300 * var(--dj-u));
	overflow: hidden;
}

.dj-tile__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom;
}

/* ------------------------------------------------------------------ */
/* Servis / destek (video zeminli)                                     */
/* ------------------------------------------------------------------ */

.dj-service {
	padding-block: var(--dj-space-50) 0;
}

.dj-service__panel {
	position: relative;
	border-radius: var(--dj-radius-md);
	overflow: hidden;
	background: var(--dj-ink);
	color: var(--dj-white);
	/*
	 * XD (panel-göreli mürekkep): üst etiket 176.5, başlık 218.5, açıklama
	 * 272.5, düğme kutusu 320–370, kartlar 610–750. Kartlar alt kenardan
	 * 50 içeride; blok `space-between` ile alta sabitlenir, üst blok da
	 * bu iç boşlukla yerine oturur.
	 */
	padding: calc(173.5 * var(--dj-u)) var(--dj-space-50) var(--dj-space-50);
	min-height: calc(800 * var(--dj-u));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--dj-space-60);
}

/*
 * Tasarımda harita neredeyse tek renk; pinlerde renk ancak hissediliyor.
 * Videoya blur uygulanmaz; okunurluk aşağıdaki degradeden gelir.
 *
 * Değerler referansın açık bandıyla (panel 440–600) eşleştirildi; canlı
 * taraf beş kareden ortalandı, çünkü hareketli görüntüde tek kare temsil
 * etmiyor:
 *   referans  ort 67.7 · std 48.4 · p5 14.0 · p95 158.0 · doygunluk p95 0.214
 *   canlı     ort 66.3 · std 48.5 · p5  9.1 · p95 160.6 · doygunluk p95 0.209
 *
 * Gri tonlama 0.70 → 0.78: ortalama doygunluk zaten tutuyordu ama en
 * renkli %5 (pinler) tasarımdan belirgin kahverengiydi.
 *
 * Kullanıcı revizesi: beyaz metinlerin video üstünde rahat okunması için
 * parlaklık referansın ~%10 altına indirildi (0.81 → 0.73), kontrast hafif
 * yükseltildi (1.03 → 1.07). Ölçülen etki — beyaz metnin zeminine karşı
 * kontrast oranı, en parlak %5'lik karelerde:
 *   “Destek Dökümanları” 3.79 → 4.51 · “Tümünü Gör” 3.39 → 4.11
 * Harita çizgileri ve pinler görünür kalır; bilinçli olarak tasarımdan
 * biraz daha koyudur.
 */
.dj-service__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.78) saturate(0.5) brightness(0.73) contrast(1.07);
	z-index: 0;
}

/*
 * XD `Rectangle 555`: dikey degrade — üstte ve altta tam opak ink,
 * %65.5'te tamamen saydam. Okunurluk kenarlardan gelir, ortada video
 * olduğu gibi görünür; önceki düz %40–88 bindirme tüm kareyi griye
 * çeviriyordu.
 */
.dj-service__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgb(16, 18, 19) 0%,
		rgba(16, 18, 19, 0) 65.52%,
		rgb(16, 18, 19) 100%
	);
	z-index: 1;
}

/*
 * Okunurluk katmanı (widget "Arka plan → Okunurluk katmanı", `.dj-bg-readable`):
 * içeriğin arkasında sol üstten koyulaşan ink degrade — video ve karartmanın
 * üstünde, içeriğin altında. Metinler (saat satırı dahil) videonun açık
 * bölgelerinde de okunur. Ana sayfa servis bölümünde varsayılan kapalı.
 */
.dj-service__panel.dj-bg-readable::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		160deg,
		color-mix(in srgb, var(--dj-ink) 88%, transparent) 0%,
		color-mix(in srgb, var(--dj-ink) 72%, transparent) 55%,
		color-mix(in srgb, var(--dj-ink) 45%, transparent) 100%
	);
	pointer-events: none;
}

.dj-service__intro,
.dj-service__docs {
	position: relative;
	z-index: 2;
}

.dj-service__intro {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Aralıklar tasarımın taban çizgilerinden türetildi; tek tek verilir. */
	gap: 0;
}

.dj-service__eyebrow {
	margin: 0;
	font-size: var(--dj-fs-22);
	font-weight: var(--dj-fw-semibold);
	line-height: 1; /* XD: eyebrow ile başlık arası 36.6. */
}

.dj-service__title {
	font-size: var(--dj-fs-42);
	font-weight: var(--dj-fw-extrabold);
	line-height: 1.238; /* XD 52/42 */
	margin: 0;
	margin-block-start: calc(12 * var(--dj-u));
}

.dj-service__text {
	margin: 0;
	margin-block-start: calc(5 * var(--dj-u));
	font-size: max(1rem, var(--dj-fs-18));
	/* XD: panel içindeki tüm metin saf beyaz. */
	color: var(--dj-white);
}

.dj-service__docs-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dj-space-20);
	/* XD: “Destek Dökümanları” alt kenarı ile kart üstü arası 31. */
	margin-bottom: calc(33 * var(--dj-u));
}

.dj-service__docs-title {
	font-size: var(--dj-fs-32);
	font-weight: var(--dj-fw-bold);
	margin: 0;
}

.dj-service__docs-all {
	display: inline-flex;
	align-items: center;
	color: var(--dj-white);
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
	transition: color 190ms ease;
}

/* PDF ölçümü: ok çizimi 6.5 × 11, metin–ok aralığı 13.5. */
/*
 * “Tümünü Gör” degradenin saydam noktasına denk geliyor: bazı video
 * karelerinde zemin parlayınca beyaz metin kayboluyordu (ölçülen en kötü
 * kontrast 3.39). Altına ince, koyu ve bulanık bir yama konuldu. Yama
 * `::before` ile çizilir — düzen hesabına girmez, metin ve ok tasarımdaki
 * yerinde kalır.
 */
.dj-service__docs-all {
	position: relative;
	isolation: isolate;
	gap: calc(13.5 * var(--dj-u));
	/* Dar ekranda bağlantı ile oku ayrı satıra düşmesin. */
	white-space: nowrap;
}

.dj-service__docs-all::before {
	content: "";
	position: absolute;
	inset: calc(-7 * var(--dj-u)) calc(-18 * var(--dj-u));
	z-index: -1;
	border-radius: var(--dj-radius-pill);
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(4px);
	transition: background-color 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
}

.dj-service__docs-all svg {
	flex: 0 0 auto;
	width: calc(6.5 * var(--dj-u));
	height: calc(11 * var(--dj-u));
	stroke-width: 2.26;
	transition: transform var(--dj-transition);
}

/*
 * Hover/odakta yama tam beyaza döner, metin ve ok siyaha: koyu video
 * üstünde hangi kare gelirse gelsin durum çok net okunur. Gri ton yok —
 * genel `a:hover { color: var(--dj-muted) }` kuralı burada geçersiz.
 * Yama akış dışında olduğu için ölçü, köşe, metin ve ok konumu değişmez;
 * hareket ya da gölge kullanılmaz.
 */
/*
 * Genel `a:hover { color: var(--dj-muted) }` dokunmatikte de tetikleniyor
 * ve bağlantıyı griye düşürüyordu; medya sorgusundan bağımsız olarak
 * beyazda sabitlenir. Gerçek hover'ı olan cihazda aşağıdaki kural devralır.
 */
.dj-service__docs-all:hover {
	color: var(--dj-white);
}

@media (hover: hover) {
	.dj-service__docs-all:hover {
		color: var(--dj-ink);
	}

	.dj-service__docs-all:hover::before {
		background: var(--dj-white);
		border-color: var(--dj-white);
	}
}

.dj-service__docs-all:focus-visible {
	outline: none;
	color: var(--dj-ink);
}

.dj-service__docs-all:focus-visible::before {
	background: var(--dj-white);
	/* Koyu zeminde halka görevi gören ince dış çizgi. */
	border-color: var(--dj-ink);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
}

/*
 * “Servis Bul” — PDF ölçümü: hap 160 × 50, sol iç boşluk 24, metin–ok
 * aralığı 19.5, sağ iç boşluk 30.5, ok çizimi 6.5 × 10.5.
 */
.dj-service__cta {
	margin-block-start: calc(27 * var(--dj-u));
	min-height: calc(50 * var(--dj-u));
	padding-inline: calc(24 * var(--dj-u)) calc(30.5 * var(--dj-u));
	gap: calc(19.5 * var(--dj-u));
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
}

.dj-service__cta svg {
	flex: 0 0 auto;
	width: calc(6.5 * var(--dj-u));
	height: calc(10.5 * var(--dj-u));
	stroke-width: 2.26;
}

/*
 * Beyaz CTA'ların ortak dili (tanıtım kutularıyla aynı): zemin beyaz,
 * metin ve ok siyah kalır; hover/odakta yalnız siyah çizgi belirir.
 * `outline` düzen hesabına girmediği için geometri sabittir.
 */
.dj-service__cta {
	outline: 2px solid transparent;
	outline-offset: -2px;
	transition: outline-color 180ms ease;
}

.dj-service__cta:hover,
.dj-service__cta:focus-visible {
	background: var(--dj-white);
	color: var(--dj-ink);
}

@media (hover: hover) {
	.dj-service__cta:hover {
		outline-color: var(--dj-ink);
	}
}

.dj-service__cta:focus-visible {
	outline-color: var(--dj-ink);
}

.dj-service__docs-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* XD: kart 380 geniş, aralık 30. */
	gap: var(--dj-gutter);
	list-style: none;
}

/*
 * XD `Rectangle 560`: dolgu opaklığı 0, kenarlık yok; kart yüzeyi yalnız
 * arka planı bulanıklaştırıp aydınlatarak ayrışıyor
 * (`uxdesign#blur` — blurAmount 30, brightnessAmount 15, fillOpacity 0).
 * Önceki beyaz katman + kenarlık kartları tasarımdakinden koyu ve ağır
 * gösteriyordu.
 */
.dj-doc-card {
	display: flex;
	align-items: center;
	gap: calc(20 * var(--dj-u));
	height: 100%;
	/* XD Rectangle 560: 380×140, r8. */
	min-height: calc(140 * var(--dj-u));
	padding: var(--dj-space-20);
	border-radius: var(--dj-radius-sm);
	background: transparent;
	border: 0;
	backdrop-filter: blur(30px) brightness(1.15);
	color: var(--dj-white);
	/*
	 * Çerçeve `outline` ile çizilir: kenarlık eklemek kartı 2 px büyütür,
	 * `outline` düzen hesabına girmez. Yükselme yalnız 2 px — `scale()`
	 * kullanılmaz, dört sütunda komşu kartlara taşma olmaz.
	 */
	outline: 1px solid transparent;
	outline-offset: -1px;
	transform: translateY(0);
	box-shadow: none;
	transition:
		backdrop-filter 200ms ease,
		background-color 200ms ease,
		outline-color 200ms ease,
		box-shadow 200ms ease,
		transform 200ms ease;
}

/* Arka plan filtresi yoksa kart yine de zeminden ayrılmalı. */
@supports not (backdrop-filter: blur(1px)) {
	.dj-doc-card {
		background: rgba(255, 255, 255, 0.1);
	}
}

/*
 * Dokunmatik cihazda hover yapışmasın; odak karşılığı ayrı tanımlı. Hover
 * kartın yerinde duran kabından (`li`) okunur: kart 2 px yükselirken imleç
 * alt kenarda kalsa bile hover düşmez (kart kendi hover'ıyla yer
 * değiştirdiğinde alt kenarda titriyordu).
 */
@media (hover: hover) {
	li:hover > .dj-doc-card {
		backdrop-filter: blur(30px) brightness(1.34);
		background: rgba(255, 255, 255, 0.06);
		outline-color: rgba(255, 255, 255, 0.22);
		box-shadow: 0 calc(8 * var(--dj-u)) calc(20 * var(--dj-u)) rgba(0, 0, 0, 0.28);
		transform: translateY(-2px);
		color: var(--dj-white);
	}

	li:hover > .dj-doc-card .dj-doc-card__icon {
		border-color: rgba(255, 255, 255, 0.6);
		transform: translateY(-2px);
	}
}

.dj-doc-card:focus-visible {
	backdrop-filter: blur(30px) brightness(1.34);
	background: rgba(255, 255, 255, 0.06);
	outline-color: var(--dj-white);
	box-shadow: 0 calc(8 * var(--dj-u)) calc(20 * var(--dj-u)) rgba(0, 0, 0, 0.28);
	transform: translateY(-2px);
	color: var(--dj-white);
}

.dj-doc-card:focus-visible .dj-doc-card__icon {
	border-color: rgba(255, 255, 255, 0.6);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	li:hover > .dj-doc-card,
	.dj-doc-card:focus-visible,
	li:hover > .dj-doc-card .dj-doc-card__icon,
	.dj-doc-card:focus-visible .dj-doc-card__icon {
		transform: none;
	}
}

/* Tasarımdaki çerçeveli ikon kutusu. */
.dj-doc-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	/* XD Rectangle 569: 100×100, r4. */
	width: calc(100 * var(--dj-u));
	height: calc(100 * var(--dj-u));
	/* XD Rectangle 569: dolgu yok, kenarlık rgb(112,112,112) 1 px, köşe 4. */
	border: 1px solid rgb(112, 112, 112);
	border-radius: 4px;
	/* Kutu ölçüsü sabit; tepki yalnız kenarlık rengi ve 2 px yükselme. */
	transform: translateY(0);
	transition: border-color 200ms ease, transform 200ms ease;
}

/* XD çizim kutusu 60.18 + 1.5 gövde payı; dördü aynı ölçüde. */
.dj-doc-card__icon svg {
	width: calc(61.68 * var(--dj-u));
	height: calc(61.68 * var(--dj-u));
}

/* Flex gövdesi içeriğinden dar olabilmeli; yoksa uzun başlık kartı taşırır. */
.dj-doc-card__body {
	min-width: 0;
}

.dj-doc-card__title {
	display: block;
	/*
	 * XD metin sütunu 220 px. En uzun başlık ("Kullanım Kılavuzları")
	 * 24 px'te 228 px istiyor; XD'de de bu kart 22 px'e indirilmiş.
	 * Dördü aynı görünsün diye bileşenin tamamı 22 px kullanır — tek
	 * satırda kalır, hiçbiri kırpılmaz.
	 */
	font-size: var(--dj-fs-22);
	font-weight: var(--dj-fw-semibold);
	line-height: var(--dj-lh-tight);
	/*
	 * 1920 ve 1470'te başlıklar tek satıra sığar. Daha dar masaüstünde
	 * sütun kısaldığında sarmalarına izin verilir: kart yüksekliği ızgara
	 * içinde eşitlendiği için dördü birlikte büyür, hiçbiri kırpılmaz.
	 */
	margin-bottom: 6px;
}

/*
 * XD: gövde Regular 16, satır aralığı 20.5 (1.28), rengi saf beyaz.
 * Sabit `--dj-fs-16` 1470'te 20.9 tasarım px'e çıkıyor ve metin üç satıra
 * bölünüp kartı 140'tan 158.8'e büyütüyordu.
 */
.dj-doc-card__text {
	display: block;
	font-size: var(--dj-fs-16-fluid);
	line-height: 1.28;
	color: var(--dj-white);
}

/*
 * Açık zemin sürümü (`.dj-service__docs-list--light`): video paneli olmayan
 * sayfalarda (ör. /destek/, "Alt Sayfa Kartları" widget'ı) aynı kart
 * geometrisi yüzey zemininde. Ölçüler, ikon kutusu ve ızgara ortak
 * kurallardan gelir; yalnız renkler ve hover dili açık zemine çevrilir.
 * Ana sayfadaki koyu panel etkilenmez.
 */
.dj-service__docs-list--light .dj-doc-card {
	background: var(--dj-surface);
	backdrop-filter: none;
	color: var(--dj-ink);
}

.dj-service__docs-list--light .dj-doc-card__icon {
	border-color: var(--dj-line-field);
	background: var(--dj-white);
}

.dj-service__docs-list--light .dj-doc-card__text {
	color: var(--dj-muted);
}

@media (hover: hover) {
	.dj-service__docs-list--light li:hover > .dj-doc-card {
		backdrop-filter: none;
		background: var(--dj-white);
		outline-color: var(--dj-line-field);
		box-shadow: var(--dj-shadow-md);
		color: var(--dj-ink);
	}

	.dj-service__docs-list--light li:hover > .dj-doc-card .dj-doc-card__icon {
		border-color: var(--dj-ink);
	}
}

.dj-service__docs-list--light .dj-doc-card:focus-visible {
	backdrop-filter: none;
	background: var(--dj-white);
	outline-color: var(--dj-ink);
	box-shadow: var(--dj-shadow-md);
	color: var(--dj-ink);
}

.dj-service__docs-list--light .dj-doc-card:focus-visible .dj-doc-card__icon {
	border-color: var(--dj-ink);
}

/*
 * Dikey kart (`.dj-service__docs-list--stack`, "Bilgi Kartları" widget'ı):
 * ikon üstte, başlık ve metin altta; dar sütunlarda. Sütun sayısı
 * `--cols-2` / `--cols-3` (tablette 2, mobilde 1). İsteğe bağlı küçük
 * görsel alanı (`.dj-doc-card__media`). Bağlantısız kart (`div`) hover'da
 * tepki vermez.
 */
.dj-service__docs-list--stack .dj-doc-card {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--dj-space-16);
	min-height: 0;
	padding: var(--dj-space-24);
}

.dj-service__docs-list--stack .dj-doc-card__icon {
	width: max(56px, calc(72 * var(--dj-u)));
	height: max(56px, calc(72 * var(--dj-u)));
}

.dj-service__docs-list--stack .dj-doc-card__icon svg {
	width: max(34px, calc(44 * var(--dj-u)));
	height: max(34px, calc(44 * var(--dj-u)));
}

.dj-service__docs-list--stack .dj-doc-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--dj-space-8);
}

/* Başlık–metin arası gövdenin `gap`'i; ana sayfa kartının 6 px alt boşluğu burada yok. */
.dj-service__docs-list--stack .dj-doc-card__title {
	margin-bottom: 0;
	font-size: var(--dj-fs-20);
}

/* Açıklama sitenin gövde ölçüsünde (yalnız bu varyant; ana sayfa kartları değişmez). */
.dj-service__docs-list--stack .dj-doc-card__text {
	font-size: var(--dj-fs-16);
	line-height: var(--dj-lh-normal);
}

.dj-service__docs-list.dj-service__docs-list--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dj-service__docs-list.dj-service__docs-list--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dj-doc-card__media {
	display: flex;
	flex-direction: column;
	gap: var(--dj-space-8);
	width: 100%;
	margin-block-start: var(--dj-space-16);
	padding-block-start: var(--dj-space-16);
	border-top: 1px solid var(--dj-line-field);
}

.dj-doc-card__media-title {
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-ink);
}

.dj-doc-card .dj-doc-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border: 1px solid var(--dj-line-field);
	border-radius: var(--dj-radius-sm);
	background: var(--dj-white);
}

.dj-doc-card__media-caption {
	font-size: var(--dj-fs-14);
	line-height: var(--dj-lh-normal);
	color: var(--dj-muted);
}

.dj-service__docs-list--light :is(li:hover > div.dj-doc-card, div.dj-doc-card:focus-visible) {
	outline-color: transparent;
	box-shadow: none;
	background: var(--dj-surface);
	transform: none;
}

.dj-service__docs-list--light li:hover > div.dj-doc-card .dj-doc-card__icon {
	border-color: var(--dj-line-field);
	transform: none;
}

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

@media (max-width: 767px) {
	.dj-service__docs-list--stack .dj-doc-card__text {
		font-size: var(--dj-fs-16);
	}

	/* Tek sütunda her kart kendi içeriği kadar (görselli kart diğerlerini uzatmaz). */
	.dj-service__docs-list.dj-service__docs-list--cols-3,
	.dj-service__docs-list.dj-service__docs-list--cols-2 {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Haberler                                                            */
/* ------------------------------------------------------------------ */

/*
 * Bölüm başı ritmi referans mürekkebinden ölçüldü (kırpma-göreli): başlık
 * 14.0, alt metin 89.0, kart görselleri 159.0. Ortak `--dj-space-100` üst
 * boşluğu (Popüler Ürünler'le paylaşılıyor) değiştirilmeden bu bölüme özel
 * değerler verildi.
 */
.dj-news {
	padding-block-start: calc(95.5 * var(--dj-u));
}

.dj-news .dj-section-lead {
	margin-block-start: calc(18.5 * var(--dj-u));
}

.dj-news__grid {
	margin-top: calc(46.5 * var(--dj-u));
}

/*
 * Bölümün alt boşluğu sıfırdır; yüksekliği belirleyen tek değer kart
 * ızgarası ile düğme arasındaki boşluktur. Kullanıcı isteğiyle önce 60 → 35
 * indirildi, sonra 55'e ayarlandı: başlık, alt metin, kartlar, başlık/meta ve düğmenin yatay
 * merkezi yerinde kalır, bölüm 25 birim kısalır. Düğmenin altındaki nefes
 * (güven şeridine 100) değişmez; düğmenin kendi iç ölçülerine dokunulmadı.
 */
.dj-news__more {
	display: flex;
	justify-content: center;
	margin-top: calc(55 * var(--dj-u));
}

/*
 * XD `Rectangle 584`: 317 × 50, köşe 30, beyaz dolgu, 1 px rgb(112,112,112)
 * çerçeve. Metin SemiBold 18; sol/sağ iç boşluk 30.5, metin–ok aralığı 12,
 * ok çizimi 6.5 × 10.5 (diğer CTA'larla aynı sıkı viewBox'lı `caret-right`).
 * Önce `dj-btn--outline` saydam zeminli ve `chevron-right` ölçüsüzdü — ok
 * canlıda 0 × 0 çiziliyordu.
 */
.dj-news__cta {
	min-height: calc(50 * var(--dj-u));
	padding-inline: calc(30.5 * var(--dj-u));
	gap: calc(12 * var(--dj-u));
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
	background: var(--dj-white);
	border-color: rgb(112, 112, 112);
	color: var(--dj-ink);
	/*
	 * Beyaz düğme hover ailesi: zemin, metin ve ok sabit; hover/odakta
	 * yalnız siyah çizgi belirir. `outline` düzen hesabına girmediği için
	 * kayma olmaz.
	 */
	outline: 2px solid transparent;
	outline-offset: -2px;
	transition: outline-color 180ms ease, border-color 180ms ease;
}

.dj-news__cta svg {
	flex: 0 0 auto;
	width: calc(6.5 * var(--dj-u));
	height: calc(10.5 * var(--dj-u));
	stroke-width: 2.26;
}

.dj-news__cta:hover,
.dj-news__cta:focus-visible {
	background: var(--dj-white);
	color: var(--dj-ink);
}

@media (hover: hover) {
	.dj-news__cta:hover {
		outline-color: var(--dj-ink);
		border-color: var(--dj-ink);
	}
}

.dj-news__cta:focus-visible {
	outline-color: var(--dj-ink);
	border-color: var(--dj-ink);
}

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

/*
 * 1024–1279: masaüstü kompozisyonu korunur, oranı `--dj-u` sağlar.
 * Eskiden burada duran sabit yükseklik ezmeleri (520/640/680) artık
 * orantıyı bozduğu için kaldırıldı; yalnız gerçekten yer kalmayan
 * ızgaralar sütun düşürür.
 */
@media (max-width: 1279px) {
	.dj-home-cats__track {
		grid-auto-columns: calc((100% - (var(--dj-gutter) * 2)) / 3);
	}

	.dj-service__docs-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.dj-home-cats__track {
		grid-auto-columns: calc((100% - var(--dj-gutter)) / 2);
	}

	/*
	 * Yükseklik `aspect-ratio` yerine açık verilir: hero bir Elementor
	 * sütun-flex öğesinin içinde ve oran geç çözüldüğünde öğe eski
	 * ölçüsünde kalıp bir sonraki bölümle üst üste biniyordu.
	 */
	.dj-hero__viewport {
		aspect-ratio: auto;
		height: max(75vw, calc(380 * var(--dj-u)));
	}

	/* Dar ekranda fotoğraf metnin arkasına değil üstüne alınır. */
	.dj-promo__panel {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.dj-promo__body {
		padding: var(--dj-space-40);
		max-width: none;
	}

	/*
	 * Dar ekranda panel alt alta yığılır; fotoğraf tam genişlikte bir bant
	 * olur. Katmanlı masaüstü kompozisyonu (kum geçişi + ön plan koltuk)
	 * bu düzende anlamsızdır ve kapatılır — konumları 1710 × 650'lik panele
	 * göre yüzdeyle verildiği için aksi hâlde metnin üstüne düşerler.
	 */
	.dj-promo__media {
		position: relative;
		inset: auto;
		order: -1;
		width: 100%;
		height: calc(320 * var(--dj-u));
		min-height: calc(240 * var(--dj-u));
		overflow: hidden;
	}

	/*
	 * Görsel sunumu masaüstündeki katmansız kuraldan gelir: fotoğraf `cover`,
	 * dekupe kesit (`--cutout`) `contain` ve altta bütün — bantta ürün
	 * ortasından kesilmez. Katmanlı yerleşim yalnız ≥1024'te tanımlıdır.
	 */
	.dj-promo__panel--cutout .dj-promo__media img {
		padding: var(--dj-space-24) var(--dj-space-24) 0;
	}

	.dj-promo__foreground,
	.dj-promo__panel::after {
		display: none;
	}

	.dj-tiles__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dj-gutter);
	}

	/*
	 * Tek sütunda tasarımın mutlak yerleşimi anlamsız: görsel akışa döner,
	 * metnin altında kalır ve metne binmez. Kutu ölçüsü de içeriğe uyar.
	 */
	.dj-tile--placed .dj-tile__media {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		min-height: calc(300 * var(--dj-u));
	}

	.dj-tile--placed .dj-tile__media img {
		position: absolute;
		inset: 0;
		object-position: bottom;
	}

	.dj-tile__body {
		padding-block-start: var(--dj-space-50);
	}

	.dj-tile {
		min-height: calc(560 * var(--dj-u));
	}

	.dj-service__panel {
		min-height: calc(600 * var(--dj-u));
	}

	.dj-cat-card {
		height: calc(460 * var(--dj-u));
	}

	.dj-cat-card__title {
		font-size: var(--dj-fs-26);
	}
}

@media (max-width: 767px) {
	/*
	 * Telefon kadrajı görünür yüksekliğe bağlı: `svh` adres çubuğu açılıp
	 * kapanırken değişmez, hero zıplamaz. Önceki `133.34vw` sınırı 390'da
	 * kutuyu 520 px'e (61.6svh) indiriyordu; ilk ekranda hero baskın değildi.
	 * 70svh: 390×844 → 590.8, 430×932 → 652.4 px. Üst şerit (36) ile birlikte
	 * ilk ekranın ~%74'ü; altta kategori kartlarının başlık satırı görünür
	 * kalır. Alt sınır kısa ekranda başlık + noktaları korur, üst sınır uzun
	 * ekranda hero'nun tek başına ekranı doldurmasını engeller.
	 */
	.dj-hero__viewport {
		aspect-ratio: auto;
		height: clamp(460px, 70svh, 660px);
		max-height: none;
	}

	.dj-hero__nav {
		display: none;
	}

	/* Dar ekranda okların yeri yok; kaydırma parmakla yapılır. */
	.dj-home-cats .dj-carousel__arrow {
		display: none;
	}

	.dj-service__panel {
		padding: var(--dj-space-40) var(--dj-space-20) var(--dj-space-24);
		min-height: 0;
		gap: var(--dj-space-40);
	}

	.dj-tile {
		min-height: 0;
	}

	.dj-tile__body {
		padding: var(--dj-space-30) var(--dj-space-20) var(--dj-space-24);
	}

	.dj-tile__media {
		min-height: calc(220 * var(--dj-u));
	}

	.dj-cat-card {
		height: calc(420 * var(--dj-u));
		padding: var(--dj-space-24);
	}

	.dj-cat-card__title {
		font-size: var(--dj-fs-24);
	}

	.dj-doc-card__icon {
		width: calc(62 * var(--dj-u));
		height: calc(62 * var(--dj-u));
	}

	.dj-doc-card__icon svg {
		width: calc(32 * var(--dj-u));
		height: calc(32 * var(--dj-u));
	}

	.dj-doc-card__title {
		font-size: var(--dj-fs-20);
	}

	.dj-service__docs-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.dj-popular__tabs {
		gap: var(--dj-space-20);
		font-size: var(--dj-fs-18);
	}

	.dj-popular__tab {
		font-size: var(--dj-fs-18);
	}
}

/* ------------------------------------------------------------------ */
/* Mobil ve tablet                                                     */
/*                                                                     */
/* Mobil XD yoktur. Masaüstü hiyerarşisi ve bölüm sırası korunur        */
/* (hero → kategori → tanıtım → popüler → kutular → servis → haberler). */
/* Uzun dikey kart listeleri, kategori satırıyla aynı dilde yatay        */
/* kaydırmalı şeride döner. Şeritler kap boşluğunu ekran kenarına kadar  */
/* uzatır (negatif kenar + aynı iç boşluk); sayfa yatayda taşmaz.        */
/* ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	/*
	 * XD kadrajı (genişliğin %124'ü, merkez −%51.75) dar ekranda kutuyu
	 * doldurmuyordu: görsel yatayda sığıp dikeyde kısa kalıyor, altta ve
	 * üstte koyu bant açılıyordu (390'da 520 px kutuda ~260 px görsel).
	 * Kutu oranı değişken olduğu için görsel `cover` ile doldurulur.
	 * Seçici `.elementor .dj-hero__image` (base.css) ile eşit özgüllükte;
	 * bu dosya sonra yüklendiği için geçerlidir.
	 */
	.dj-hero__viewport .dj-hero__image {
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: 50% 50%;
		transform: none;
	}

	/*
	 * Sekmeler tek satırlık yatay şerit. Kırıldıklarında ayırıcı nokta
	 * (başlık aralığına göre konumlu) sonraki sekmenin harfinin üstüne
	 * düşüyordu; 768'de üçüncü sekme ayrı satıra iniyordu.
	 */
	/*
	 * Tek satırlı esnek kutu şart: `wrap` açıkken sütun satırının genişliği
	 * en geniş öğeye (kırılmayan sekme şeridi) göre hesaplanıyor, başlık ve
	 * şerit kabı aşıp sayfayı 390'da 530 px'e taşırıyordu.
	 */
	.dj-popular__head {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: var(--dj-space-12);
		margin-bottom: var(--dj-space-30);
	}

	.dj-popular__tabs {
		min-width: 0;
		flex-wrap: nowrap;
		gap: 40px;
		margin-inline: calc(-1 * var(--dj-page-padding));
		padding-inline: var(--dj-page-padding);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		transform: none;
	}

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

	/* Dokunma yüksekliği ~42 px; metin ölçüsü değişmeden. */
	.dj-popular__tab {
		flex: 0 0 auto;
		padding-block: 8px;
		font-size: var(--dj-fs-22);
		white-space: nowrap;
	}

	/* Nokta aralığın tam ortasında: 40 / 2 + 3 (yarıçap). */
	.dj-popular__tab:not(:last-child)::after {
		inset-inline-end: -23px;
	}

	/*
	 * Tek sütunlu kutuda tasarımın mutlak görsel kutusu anlamsız; görsel
	 * akışta, kendi oranında ve üst sınırla durur. Önceki 300 px'lik sabit
	 * kutu geniş-kısa klima görselinin üstünde ~200 px boş gri alan
	 * bırakıyordu. Özgüllük `.elementor .dj-tile__media:not(…) img`
	 * (base.css) kuralına eşit; bu dosya sonra yüklenir.
	 */
	.dj-tile {
		min-height: 0;
	}

	.dj-tiles .dj-tile .dj-tile__media {
		position: relative;
		inset: auto;
		display: block;
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 0 var(--dj-space-24) var(--dj-space-30);
	}

	.dj-tiles .dj-tile .dj-tile__media img {
		position: static;
		width: 100%;
		height: auto;
		max-height: 320px;
		object-fit: contain;
		object-position: center bottom;
	}

	/*
	 * Destek kartları 1023'ün altında birim 1 px olduğu için 100 px'lik ikon
	 * kutusuyla iki sütunda metne ~110 px bırakıyordu (768'de dört satırlık
	 * açıklama). İkon kutusu küçülür, metin sütunu genişler.
	 */
	.dj-doc-card__icon {
		width: 64px;
		height: 64px;
	}

	.dj-doc-card__icon svg {
		width: 40px;
		height: 40px;
	}

	.dj-doc-card__title {
		font-size: var(--dj-fs-20);
	}

	/* Haberler: masaüstü ölçülü 95.5'lik üst boşluk dar ekranda bölüm ritmine iner. */
	.dj-news {
		padding-block-start: var(--dj-space-60);
	}

	.dj-news__grid {
		margin-top: var(--dj-space-30);
	}

	.dj-news__more {
		margin-top: var(--dj-space-30);
	}
}

/*
 * Ürün ızgarası 899'da tek sütuna iniyor (product.css): üç kart alt alta
 * 390'da ~2000, 768'de ~2800 px sayfa boyu demekti. Anasayfada popüler
 * ürünler ve haberler yatay şerit olur; bir sonraki kartın kenarı görünür
 * kalır ki kaydırılabildiği anlaşılsın. Kart çizicisine dokunulmaz —
 * yalnız anasayfa kapsayıcısının yerleşimi değişir.
 *
 * Şerit 1023'e kadar sürer: 900–1023'te ızgara iki sütun + tek başına
 * üçüncü kart bırakıyordu (1023'te sayfa 9316 px). Kart genişliği bu
 * aralıkta aşağıda ayrıca verilir.
 */
@media (max-width: 1023px) {
	.dj-popular .dj-popular__panel,
	.dj-news .dj-news__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(calc(100vw - 2 * var(--dj-page-padding) - 32px), 324px);
		gap: var(--dj-card-gap);
		margin-inline: calc(-1 * var(--dj-page-padding));
		padding-inline: var(--dj-page-padding);
		padding-block-end: var(--dj-carousel-pad-b);
		scroll-padding-inline: var(--dj-page-padding);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.dj-popular .dj-popular__panel::-webkit-scrollbar,
	.dj-news .dj-news__grid::-webkit-scrollbar {
		display: none;
	}

	.dj-popular .dj-popular__panel > *,
	.dj-news .dj-news__grid > * {
		min-width: 0;
		scroll-snap-align: start;
	}

	/*
	 * Şerit kartında masaüstü kart yüksekliği (750 + başlık satırı) görselin
	 * altında boş alan bırakıyordu; kart içeriği kadar uzar, şeritteki
	 * kartlar yine eşit boyda kalır (ızgara satırı).
	 */
	.dj-popular .dj-card {
		min-height: 0;
	}

	/*
	 * Kart 318–336 px: indirimli fiyat çifti 20–24 px'te ikiye bölünüp alt
	 * ritmi kaydırıyordu. Yalnız anasayfa şeridinde bir kademe küçülür;
	 * arşiv kartı değişmez.
	 */
	.dj-popular .dj-card__price {
		font-size: var(--dj-fs-18);
		min-height: calc(var(--dj-lh-normal) * var(--dj-fs-18));
	}
}

@media (max-width: 767px) {
	/*
	 * Masaüstünde hero boyunca karartma yok (XD). Mobil kadrajda başlık
	 * fotoğrafın daha kalabalık bölümüne düşüyor; okunurluk için yalnız
	 * alt kısma hafif bir degrade eklenir, üstteki başlık degradesi kalır.
	 */
	.dj-hero__overlay {
		background:
			linear-gradient(to bottom, rgba(16, 18, 19, 0.5) 0, rgba(16, 18, 19, 0) 160px),
			linear-gradient(to top, rgba(16, 18, 19, 0.55) 0, rgba(16, 18, 19, 0) 45%);
	}

	.dj-hero__slide {
		padding-bottom: 72px;
	}

	.dj-hero__label {
		margin-bottom: 4px;
		font-size: var(--dj-fs-18);
	}

	.dj-hero__dots {
		bottom: 32px;
		gap: 20px;
	}

	/* Nokta çizimi 13 px kalır; dokunma alanı görünmez bir halkayla 37 px. */
	.dj-hero__dot {
		position: relative;
	}

	.dj-hero__dot::before {
		content: "";
		position: absolute;
		inset: -12px;
	}

	/*
	 * Kategori şeridi ekran kenarına kadar akar; sonraki kart kenardan görünür.
	 * Kart genişliği 768'deki şerit kartıyla (~302 px) sınırlı: 600–767'de
	 * tek ~580 px'lik kart yerine iki kart + kenar görünür, 767/768 arasında
	 * kart ölçüsü sıçramaz. 390'da %80 geçerli.
	 */
	.dj-home-cats__track {
		grid-auto-columns: min(80%, 302px);
		margin-inline: calc(-1 * var(--dj-page-padding));
		padding-inline: var(--dj-page-padding);
		scroll-padding-inline: var(--dj-page-padding);
	}

	.dj-cat-card {
		height: 400px;
	}

	.dj-popular__tabs {
		gap: 28px;
	}

	.dj-popular__tab {
		font-size: var(--dj-fs-18);
	}

	.dj-popular__tab:not(:last-child)::after {
		inset-inline-end: -17px;
	}

	/*
	 * Tanıtım başlığındaki satır sonları (`nl2br`) 1920 kutusu için
	 * yazılmış; dar kutuda dört kısa satır üretiyordu. Satırlar doğal
	 * akar ve dengeli bölünür.
	 */
	.dj-tile__title {
		text-wrap: balance;
	}

	.dj-tile__title br {
		display: none;
	}

	.dj-tiles .dj-tile .dj-tile__media img {
		max-height: 260px;
	}

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

	.dj-service__docs-title {
		font-size: var(--dj-fs-22);
		line-height: var(--dj-lh-tight);
	}

	/* Hap zemini metnin 18 px dışına taşar (::before); panel kenarına değmesin. */
	.dj-service__docs-all {
		margin-inline-end: 18px;
		font-size: var(--dj-fs-16-fluid);
	}

	.dj-service__docs-list {
		gap: 12px;
	}

	.dj-doc-card {
		min-height: 0;
		padding: 16px;
		gap: 16px;
	}

	.dj-doc-card__icon {
		width: 56px;
		height: 56px;
	}

	.dj-doc-card__title {
		margin-bottom: 4px;
		font-size: var(--dj-fs-18);
	}

	.dj-doc-card__text {
		font-size: var(--dj-fs-14);
	}

	.dj-news .dj-section-lead {
		margin-block-start: var(--dj-space-12);
		font-size: var(--dj-fs-16);
	}
}

/* ------------------------------------------------------------------ */
/* Tablet / dar ekran düzeltmeleri (V3 pilot)                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	/* 390'da “…Google / TV” gibi tek kelimelik son satır kalmasın. */
	.dj-hero__title {
		text-wrap: balance;
	}

	/* Satır kutusu 44 px'in altına düşmesin; bağlantı bir dokunma hedefi. */
	.dj-hero__title a {
		display: inline-block;
		padding-block: 4px;
	}
}

/*
 * 900–1023: şerit kartı biraz genişler; iki kart tam, üçüncüsü kenardan
 * belirir (900'de 324 px ile ≤899 şeridine süreklidir).
 */
@media (min-width: 900px) and (max-width: 1023px) {
	.dj-popular .dj-popular__panel,
	.dj-news .dj-news__grid {
		grid-auto-columns: clamp(324px, 36vw, 360px);
	}
}

/*
 * Popüler şerit kartı (≤1023). Masaüstünde eylemler hover'da açılır;
 * dar ekranda hover yok ve eylemler görünmüyordu. Kural genişliğe bağlıdır
 * (işaretçi türüne değil), yalnız `.dj-popular` içindedir — arşiv, benzer
 * ürünler ve hızlı bakış kartları değişmez.
 *
 * Kart dar ekranda yeniden kompoze edilir (işaretleme taşınmaz, yalnız
 * ızgara alanları): görsel → kategori + ad → fiyat → enerji etiketi / bilgi
 * formu / favori → tam genişlik Sepete Ekle. Masaüstü sırasında (rozet,
 * görsel, Sepete Ekle, bilgi satırı, ad, fiyat) birincil eylem ürün adı ve
 * fiyattan önce geliyordu ve kart 390'da ~660 px'ti. Enerji etiketi fiyatın
 * hemen altında kalır.
 *
 *  - Rozet şeridi görselin üst bandına biner (masaüstünde de aynı bandı
 *    paylaşırlar); görsel `--dj-card-image-lift` kadar aşağıdan başlar.
 *  - `.dj-card__media` kutusu `display: contents` olur: bağlantı katmanı
 *    görsel alanını, eylem yuvası kartın son satırını alır.
 *  - Favori: bilgi satırında 44 px, sürekli görünür.
 *  - Hızlı bakış + karşılaştır: 36 px ikincil daireler, rozet şeridinin
 *    sağında; puan rozeti yer açmak için sola kayar. ≤767'de hızlı bakış
 *    gizli (arşiv kartıyla aynı karar).
 */
/*
 * Dar ekranda (≤767) kartın kompozisyonu site genelindeki ürün kartı
 * bileşenindedir (`product.css`): anasayfa şeridi ile kategori arşivi aynı
 * dizilimi paylaşır. Aşağıdaki blok yalnız tablet aralığıdır ve anasayfa
 * şeridine özgüdür; arşiv ızgarası o aralıkta kendi düzenini korur.
 */

@media (min-width: 768px) and (max-width: 1023px) {
	.dj-popular .dj-card {
		--dj-card-padding: 16px;
		--dj-card-image-lift: 44px;
		--dj-card-image-height: 100%;
		--dj-card-title-line: calc(var(--dj-lh-snug) * var(--dj-fs-20));
		--dj-popular-media: 256px;
		--dj-popular-quick: 36px;
		--dj-popular-quick-gap: 8px;
		--dj-popular-quick-count: 2;

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

	.dj-popular .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;
	}

	.dj-popular .dj-card__media {
		display: contents;
	}

	.dj-popular .dj-card__media-link {
		grid-area: media;
		position: relative;
		inset: auto;
		height: var(--dj-popular-media);
		overflow: hidden;
	}

	.dj-popular .dj-card__body {
		grid-area: body;
		margin-block-start: 0;
	}

	.dj-popular .dj-card__title {
		font-size: var(--dj-fs-20);
		line-height: var(--dj-lh-snug);
	}

	.dj-popular .dj-card__price {
		grid-area: price;
		margin-top: 0;
	}

	.dj-popular .dj-card__docs {
		grid-area: docs;
		min-height: 44px;
	}

	.dj-popular .dj-card__cart-slot {
		grid-area: cart;
		position: static;
	}

	.dj-popular :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. */
	.dj-popular .dj-card:is(:hover, :focus-within) .dj-badge-rating {
		opacity: 1;
		visibility: visible;
	}

	.dj-popular .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
		);
	}

	/* Puan rozeti 40 px, kartın 16 px üst boşluğunda; daireler onun dikey ortasında. */
	.dj-popular .dj-card__quick {
		flex-direction: row;
		gap: var(--dj-popular-quick-gap);
		inset-block-start: 18px;
		inset-inline-end: var(--dj-card-padding);
	}

	.dj-popular .dj-card__quick .dj-icon-btn--round {
		width: var(--dj-popular-quick);
		height: var(--dj-popular-quick);
	}

	.dj-popular .dj-card__view svg {
		width: 20px;
		height: 13px;
	}

	.dj-popular .dj-card__quick [data-dj-compare-toggle] svg {
		width: 19px;
		height: 20px;
	}

	.dj-popular .dj-card .dj-card__cart-slot .dj-card__cart {
		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.
	 */
	.dj-popular .dj-card__price .dj-price__sep {
		display: none;
	}

	.dj-popular .dj-card__price del {
		font-size: 0.8em;
	}
}

/*
 * 1024 ve üstü dokunmatik (yatay tablet): eylemler `product.css`'teki
 * `hover: none` kuralıyla görünür. Masaüstü ölçeğinde Sepete Ekle 32 px,
 * favori 23.5 px kalıyordu; ikisi de en az 44 px dokunma alanına çıkar.
 * Görsel kutusu büyüyen düğme payı kadar kısalır. Favori satır yüksekliğini
 * değiştirmesin diye fazla yüksekliği negatif dikey boşlukla geri alınır
 * (alttaki ad ve fiyat kaymaz). Fareli masaüstü (1440 dahil) etkilenmez.
 */
@media (min-width: 1024px) and (hover: none) {
	.dj-popular .dj-card {
		--dj-card-image-height: calc(100% - max(70 * var(--dj-u), 56px));
	}

	.dj-popular .dj-card .dj-card__cart-slot .dj-card__cart {
		min-height: max(calc(60 * var(--dj-u)), 44px);
		font-size: max(calc(22 * var(--dj-u)), 14px);
	}

	.dj-popular .dj-card__fav {
		width: max(calc(44 * var(--dj-u)), 44px);
		height: max(calc(44 * var(--dj-u)), 44px);
		margin-block-start: min(0px, calc((40 * var(--dj-u) - 44px) / 2));
		margin-block-end: min(0px, calc((40 * var(--dj-u) - 44px) / 2));
	}

	/*
	 * Dokunuş `:hover`/`:focus-within` durumunu yapışık bırakıyor, masaüstü
	 * kuralı puan rozetini gizliyordu. Dokunmatikte hızlı bakış sütunu zaten
	 * rozetin altındadır; rozet görünür kalır.
	 */
	.dj-popular .dj-card:is(:hover, :focus-within) .dj-badge-rating {
		opacity: 1;
		visibility: visible;
	}
}

/*
 * Kategori şeridi (≤1023). Kart `aspect-ratio: 405/500` açık yükseklikle
 * birlikte genişliğini sütundan bağımsız hesaplıyordu: 768'de kart ~373 px,
 * sütun ~332 px → kartlar üst üste biniyor, tek panel gibi okunuyordu
 * (1023'te tersine ~110 px boşluk). Dar ekranda genişlik sütundan gelir.
 */
@media (max-width: 1023px) {
	.dj-home-cats .dj-cat-card {
		aspect-ratio: auto;
	}
}

/*
 * 768–1023: şerit 390'daki gibi ekran kenarına akar; iki kart ve üçüncünün
 * kenarı görünür. Önceden kart kap kenarında sert kırpılıyordu. Kart
 * genişliği 767'deki sınırla (302 px) sürekli, yükseklik 400 → 420.
 */
@media (min-width: 768px) and (max-width: 1023px) {
	.dj-home-cats__track {
		grid-auto-columns: calc((100% - var(--dj-gutter)) / 2.2);
		margin-inline: calc(-1 * var(--dj-page-padding));
		padding-inline: var(--dj-page-padding);
		scroll-padding-inline: var(--dj-page-padding);
	}

	.dj-home-cats .dj-cat-card {
		height: 420px;
	}
}

/*
 * Dokunmatik tablette kaydırma parmakla yapılır (≤767 ile aynı karar). Kenar
 * okları kartın kenarına biniyor ve kaydırma hareketinin başladığı bölgeyi
 * kapatıyordu. Fareli 768–1023'te oklar kalır. Seçici `product.css`'teki
 * `.dj-carousel--edge.is-scrollable .dj-carousel__arrow` görünürlük
 * kuralından özgül olmalı; aksi hâlde 768/769 dokunmatikte oklar kalıyordu.
 */
@media (max-width: 1023px) and (hover: none) {
	.dj-home-cats .dj-carousel--edge.is-scrollable .dj-carousel__arrow {
		display: none;
	}
}

/*
 * ≤1023 kart yüksekliği sabit (400/420 px) ve birim 1 px: 286 px'lik vitrin
 * kutusu kartın iç alanına sığmıyor, uzun ürün (buzdolabı) başlık satırına
 * dayanıp alttan CTA'nın arkasına giriyordu. Vitrin yüksekliği kartın başlık
 * ile CTA arasındaki bandına indirilir; kırpma çerçevesi kendi birimiyle
 * aynı oranda küçülür. Genişlik sınırı (geniş TV/klima) değişmez. ≥1024
 * değişmez.
 */
@media (max-width: 1023px) {
	.dj-home-cats .dj-cat-card__media img {
		max-height: 218px;
	}

	.dj-home-cats .dj-cat-card__media .dj-media-frame {
		--dj-u: 0.76px;
	}
}

/*
 * Tablet katmanı (640–1023): tanıtım kutuları ve kategori tanıtım paneli
 * büyütülmüş telefon düzeninde kalıyordu — kutular tek sütunda ~1300 px,
 * klima görseli 768'de ~640 px genişlik. Kutular iki sütun, görsel üst
 * sınırlı; panelde metin ve görsel yan yana. Eşik 640: 767/768 arasında
 * düzen değişmez, yatay telefon da bu düzeni alır. ≤639 ve ≥1024 değişmez.
 */
@media (min-width: 640px) and (max-width: 1023px) {
	.dj-tiles__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dj-tile__body {
		padding-inline: 20px;
	}

	.dj-tile__title {
		font-size: var(--dj-fs-28);
		text-wrap: balance;
	}

	.dj-tile__title br {
		display: none;
	}

	/* Görsel kutunun altına yaslanır; iki kutuda aynı taban çizgisinde durur. */
	.dj-tiles .dj-tile .dj-tile__media {
		margin-block-start: auto;
		padding: 0 20px 24px;
	}

	.dj-tiles .dj-tile .dj-tile__media img {
		max-height: 220px;
	}

	.dj-promo__panel {
		flex-direction: row;
		align-items: stretch;
	}

	.dj-promo__body {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		padding: 32px 24px 32px 32px;
	}

	.dj-promo__title {
		font-size: var(--dj-fs-28);
		line-height: var(--dj-lh-snug);
		text-wrap: balance;
	}

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

	.dj-promo__media {
		order: 0;
		flex: 0 0 42%;
		width: auto;
		height: auto;
		min-height: 320px;
	}
}

/*
 * İndirim rozeti genişliği 85u; etiket ise sabit 14 px. 1024–1420 arasında
 * kutu etiketten dar kalıp “İNDİR” diye kırpıyordu. Taban 1440'taki kutu
 * ölçüsüdür (85 × 0.75 = 63.75): 1440'ta değer birebir aynı, altında etiket
 * 1440'taki gibi sığar. 1023 altında birim 1 px, kutu 85 px.
 */
.dj-popular .dj-badge-discount {
	min-width: max(calc(85 * var(--dj-u)), 63.75px);
}

/*
 * 1024–1279: tanıtım kutusu başlığı sabit tabanlı punto nedeniyle üç satıra
 * çıkıp gövdeyi mutlak konumlu görselin üstüne itiyordu (CTA görsele
 * biniyordu). Bu aralıkta görsel akışa döner ve gövdenin altında kalan
 * alanı doldurur; metin, CTA ve görsel çakışmaz. 1280 ve üstü değişmez.
 */
@media (min-width: 1024px) and (max-width: 1279px) {
	.dj-tiles .dj-tile--placed .dj-tile__body {
		padding-block-start: var(--dj-space-60);
	}

	.dj-tiles .dj-tile--placed .dj-tile__media {
		position: relative;
		inset: auto;
		flex: 1 1 auto;
		width: auto;
		height: auto;
		min-height: calc(360 * var(--dj-u));
		margin: 0 var(--dj-space-40) var(--dj-space-40);
	}

	.dj-tiles .dj-tile--placed .dj-tile__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: 50% 100%;
	}
}

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

/* ================================================================== */
/* Mobil anasayfa cilası (≤767)                                        */
/*                                                                     */
/* Yalnız telefon kadrajı. Veri kaynakları, karusel/sekme davranışları  */
/* ve masaüstü yerleşimi değişmez; bu blok sadece sunum ölçülerini      */
/* düzenler. Ölçüler 390 ve 430'da canlı DOM'dan alınmıştır.           */
/* ================================================================== */

@media (max-width: 767px) {

	/* --- 1. Hero: başlık tek satır --------------------------------- */

	/*
	 * Ölçüm: en uzun slayt başlığı ("Yeni Nesil Ekran Teknolojisi") 32 px'te
	 * 432.3 px genişlik istiyor; kullanılabilir kutu 390'da 350, 430'da 390.
	 * Oran 350/432.3 = 0.81 → 26 px sınırda kalıyordu. Akışkan ölçü her iki
	 * kadrajda da payla sığar (390 → 25.0 px / 338 px, 430 → 27.5 px / 372 px)
	 * ve başlık iki satıra düşmez. Taşma yaratmamak için `nowrap` yok:
	 * daha uzun bir başlık gelirse kırılır, ekran dışına çıkmaz.
	 */
	.dj-hero__title {
		font-size: clamp(24px, 6.4vw, 32px);
		line-height: 1.16;
	}

	/* --- 2. Kategori kartları: iki kart + peek --------------------- */

	/*
	 * Şerit iki tam kart gösterir, üçüncüsünden okunur bir pay kalır.
	 * 390'da kart 155 px (2 × 155 + 16 = 326; kalan 44 px peek), 430'da
	 * 175 px. Kart içeriği ortalanır; medya satırı `1fr` olduğu için
	 * düğmeler dört kartta da aynı taban çizgisinde durur.
	 */
	/*
	 * Tam iki eşit kart; üçüncüden hiçbir parça görünmez.
	 *
	 * Şerit kabın dışına taşmaz ama kendi yan boşluğu (sayfa boşluğu, 20 px)
	 * kırpma yapmaz: kartlar o alanda da çizilebilir. Bu yüzden aralık sayfa
	 * boşluğuna eşitlenir — üçüncü kartın sol kenarı tam ekran kenarına denk
	 * gelir. 390'da kart 165 px (20 + 2 × 185 = 390), 430'da 185 px
	 * (20 + 2 × 205 = 430).
	 */
	.dj-home-cats__track {
		grid-auto-columns: calc((100% - var(--dj-page-padding)) / 2);
		gap: var(--dj-page-padding);
	}

	.dj-home-cats .dj-carousel__dots {
		display: flex;
		margin-block-start: var(--dj-space-20);
	}

	.dj-cat-card {
		aspect-ratio: auto;
		height: auto;
		padding: 14px 12px 12px;
		text-align: center;
	}

	.dj-cat-card__title {
		font-size: 15px;
		line-height: 1.25;
	}

	.dj-cat-card__count {
		font-size: var(--dj-fs-14);
		margin-block-start: 2px;
	}

	/*
	 * Medya kutusu akışa girer: kart yüksekliği içeriğinden doğar, görsel
	 * kare bir alanda `contain` ile durur — kırpılmaz ve farklı ürünlerde
	 * optik olarak aynı alanı kaplar.
	 */
	.dj-cat-card__media {
		position: static;
		inset: auto;
		aspect-ratio: 1;
		margin-block: 10px;
		overflow: hidden;
	}

	.dj-cat-card__media img,
	.dj-cat-card__media .dj-media-frame,
	.dj-cat-card__media .dj-media-frame img {
		max-width: 100%;
		max-height: 100%;
	}

	/*
	 * Dar kartta kısa metin ("Ürünleri Gör"), 14 px (yardımcı metin tabanı),
	 * ok kalır; yükseklik 38 px. Masaüstü metni yalnız 768 ve üstünde.
	 */
	.dj-cat-card__cta {
		justify-self: stretch;
		justify-content: center;
		gap: 6px;
		min-width: 0;
		min-height: 38px;
		padding-inline: 10px;
		font-size: var(--dj-fs-14);
	}

	.dj-cat-card__cta-label--desktop {
		display: none;
	}

	.dj-cat-card__cta-label--mobile {
		display: inline;
	}

	/* --- 3. Televizyon tanıtımı: tek premium kart ------------------ */

	/*
	 * Görsel ile metin paneli tek kart gibi birleşir: panelin kırpması
	 * köşeleri taşıyan tek katman olur, aralarında boşluk/çizgi kalmaz.
	 */
	.dj-promo__panel {
		gap: 0;
		overflow: hidden;
	}

	/*
	 * Görsel kutusu 16:10. Kaynak görselin kendi oranı 3:2 (1600/1067)
	 * olduğu için `cover` yalnız birkaç piksel dikey pay alır — salon
	 * kompozisyonu olduğu gibi kalır ve kutu 320 → 219 px kısalır.
	 */
	.dj-promo__media {
		aspect-ratio: 16 / 9;
		height: auto;
		min-height: 0;
	}

	.dj-promo__body {
		padding: 22px 20px 24px;
	}

	.dj-promo__eyebrow {
		font-size: var(--dj-m-fs-eyebrow);
		letter-spacing: 0.1em;
	}

	/*
	 * Başlık 32 px'te beş satıra çıkıp panelin yarısını yiyordu. 22 px /
	 * 1.24 ile üç satıra iner; blok ~139 px kısalır, hiyerarşi korunur.
	 */
	.dj-promo__title {
		margin-block-start: 6px;
		font-size: 22px;
		line-height: 1.24;
	}

	.dj-promo__bullets {
		margin-block-start: 10px;
		font-size: 14px;
		line-height: 1.6;
		row-gap: 0;
		column-gap: 18px;
	}

	.dj-promo__body > .dj-btn {
		margin-block-start: 18px;
	}

	/* --- 4. Popüler ürünler ---------------------------------------- */

	/*
	 * Kartın mobil görünümü (rozetler, eylem yığını, görsel bandı, yazı
	 * ölçüleri) anasayfaya özgü değildir: kategori arşivi de aynı kartı
	 * kullanır. Tek kaynak `product.css` → `:is(.dj-popular, .dj-cards)`.
	 */

	/*
	 * Kategori seçimi yatay kaydırıcı değil: sığmayan etiket alt satıra
	 * iner (etiket bölünmez, `nowrap`). Masaüstündeki ayırıcı nokta sekmenin
	 * SONUNA bağlı olduğu için kırılan satırın ucunda boşta kalıyordu.
	 * Dar ekranda aynı nokta sekmenin BAŞINA, aralığın tam ortasına alınır
	 * (24 / 2 + 2.5 yarıçap). Satırı başlatan sekmenin noktası kabın sol
	 * kenarının dışına düşer ve kap tarafından kırpılır: ilk ve son öğede,
	 * satır başı ve sonunda ayraç kalmaz. Metne karakter eklenmez.
	 */
	.dj-popular__tabs {
		flex-wrap: wrap;
		margin-inline: 0;
		padding-inline: 0;
		overflow: hidden;
		column-gap: 24px;
		row-gap: 2px;
	}

	.dj-popular__tab:not(:last-child)::after {
		display: none;
	}

	.dj-popular__tab:not(:first-child)::before {
		content: "";
		position: absolute;
		inset-inline-start: -14.5px;
		top: 50%;
		width: 5px;
		height: 5px;
		margin-block-start: -2.5px;
		border-radius: 50%;
		background: var(--dj-tab-idle);
	}

	/*
	 * Ritim: bölümler arası boşluğu sonraki bölümün üst dolgusu verir
	 * (diğer bölümlerin alt dolgusu 0). Popüler şeridin masaüstünden gelen
	 * 50 px alt dolgusu buna ekleniyor, kutulara geçiş 90 px oluyordu
	 * (diğer geçişler 40–60). Kaldırılınca geçiş 40 px.
	 */
	.dj-popular {
		padding-block-end: 0;
	}

	/* --- 5. Tanıtım kutuları: tek bileşen geometrisi -------------- */

	/*
	 * Su sebili ve klima kutusu mobilde AYNI bileşen geometrisindedir: aynı
	 * dolgu, aynı köşe, aynı bölge yükseklikleri. Önceden sebil 606, klima
	 * 444 px'ti. Sıra her kutunun kendi onaylı sırasıdır (aşağıda). İçerik
	 * farklı olabilir, geometri değil.
	 *
	 * Eşit dış yükseklik ızgaranın eşit satırlarından gelir (`1fr`: iki satır
	 * da uzun olan kutunun boyuna eşitlenir). Önceki çözüm başlığa ve
	 * açıklamaya üçer satırlık sabit yer ayırıyordu; kısa metinde boş satır
	 * kalıyor, metin grubu dağınık okunuyordu. Artık metin doğal boyunda,
	 * aralıklar ortak tokenlardan (8 / 12 / 16, kutu dolgusu 20); kısa kutuda
	 * kalan pay görsel bölgesine gider — görselin kendi ölçüsü değişmez,
	 * yalnız görünür alanı bir miktar uzar.
	 */
	.dj-tiles__grid {
		grid-auto-rows: 1fr;
	}

	.dj-tiles .dj-tile {
		--dj-m-tile-media: 212px;
	}

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

	.dj-tiles .dj-tile__title {
		margin-block-start: var(--dj-space-8);
	}

	.dj-tiles .dj-tile__text {
		margin-block-start: var(--dj-space-12);
	}

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

	.dj-tiles .dj-tile .dj-tile__media {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1 0 var(--dj-m-tile-media);
		height: auto;
		min-height: 0;
		margin-block-start: 0;
		padding: 0 var(--dj-space-24);
	}

	/*
	 * Görsel bölgesinde ortalanan ürün (klima): kendi oranında, bölgenin
	 * %72'si genişlikte — bölgeyi doldurmaz, çevresinde nefes kalır.
	 */
	.dj-tiles .dj-tile .dj-tile__media img {
		width: 72%;
		height: auto;
		max-height: 100%;
		margin-inline: auto;
		object-fit: contain;
		object-position: center;
	}

	/*
	 * Sıra veriden gelir (`dj-tile--media-first`, bkz. promo-tiles.php):
	 * görsel önce tanımlı kutuda (klima) görsel üstte, metin altta; diğer
	 * kutuda (su sebili) metin üstte, görsel altta. Bölge yükseklikleri
	 * ikisinde aynı olduğu için dış yükseklik sıradan bağımsız eşittir.
	 */
	.dj-tiles .dj-tile--media-first .dj-tile__media {
		order: -1;
	}

	/*
	 * Tasarımda görseli kutunun altından taşan yerleşim (su sebili): aynı
	 * yükseklikteki bölgede ürün bölgeden uzun çizilir, üst gövde okunur,
	 * alt kısım kutunun yuvarlatılmış tabanında kırpılır. `contain` + üst
	 * çapa: kesme/esneme yok. Ayrım yerleşim verisinden (görsel önce değil
	 * = kutunun tabanına oturan görsel), ürün adından değil.
	 */
	.dj-tiles .dj-tile:not(.dj-tile--media-first) .dj-tile__media {
		align-items: flex-start;
		padding-block-start: var(--dj-space-8);
	}

	.dj-tiles .dj-tile:not(.dj-tile--media-first) .dj-tile__media img {
		width: 100%;
		height: 380px;
		max-height: none;
		object-fit: contain;
		object-position: center top;
	}

	/* --- 6. Destek dokümanları: 2 × 2 ------------------------------ */

	/*
	 * Dört tam genişlik satır yerine iki sütun. 390'da kart 167 px:
	 * ikon + iki satır başlık + iki satır açıklama sığar, bölüm ~100 px
	 * kısalır. Kartlar ızgarada eşit yüksekliktedir.
	 */
	/*
	 * Bölüm yaklaşık bir ekran boyunda durur. Yükseklik kör `100vh` değil,
	 * gerçek mobil kromdan hesaplanır: yapışan beyaz başlık ve alt gezinme
	 * çubuğu kendi değişkenlerinden düşülür (header.css ≤767).
	 * Üst içerik doğal yerinde başlar, doküman grubu `margin-block-start:auto`
	 * ile bölümün altına oturur; aradaki fark nefes alanı olur.
	 */
	/*
	 * Bölüm önceden bir ekran boyuna (100svh − başlık − alt gezinme)
	 * uzatılıyordu ve sayfanın en baskın bölümü oluyordu (390'da 718 px
	 * panel). Yükseklik artık içerikten doğar; üst blok ile doküman grubu
	 * arasında tek adımlı aralık kalır.
	 */
	/* Başlıksız bölüm ritmi (`.dj-section`, ≤1023: 40); önceki 50 tekildi. */
	.dj-service {
		padding-block-start: var(--dj-space-40);
	}

	.dj-service__panel {
		min-height: 0;
		padding: var(--dj-space-24) var(--dj-space-20) var(--dj-space-20);
		gap: var(--dj-space-24);
	}

	/*
	 * Üst metin bloğu tek adımlı bir ritim kullanır (8 / 10 / 24). Önceki
	 * değerler tasarımın 1920 taban çizgilerinden ölçekleniyordu ve dar
	 * kadrajda 12 / 5 / 27 gibi düzensiz sayılara düşüyordu.
	 */
	.dj-service__title {
		margin-block-start: var(--dj-space-8);
	}

	.dj-service__text {
		margin-block-start: 10px;
	}

	.dj-service__cta {
		margin-block-start: var(--dj-space-20);
	}

	.dj-service__docs {
		margin-block-start: auto;
	}

	/* Dört kart eşit genişlik ve eşit yükseklik: satırlar da eşit paylaşır. */
	.dj-service__docs-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: 10px;
	}

	.dj-doc-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		min-height: 0;
		padding: 10px;
		outline-color: rgba(255, 255, 255, 0.16);
	}

	.dj-doc-card__icon {
		width: 32px;
		height: 32px;
	}

	.dj-doc-card__icon svg {
		width: 20px;
		height: 20px;
	}

	.dj-doc-card__title {
		font-size: 15px;
		margin-bottom: 2px;
	}

	.dj-doc-card__text {
		font-size: var(--dj-fs-14);
		line-height: 1.32;
	}

	/*
	 * Başlık ve “Tümünü Gör” tek bir başlık çubuğudur: ızgarayla aynı
	 * genişlik, aynı translucent koyu yüzey ve aynı ince çerçeve. Bağlantının
	 * kendi hap yaması burada kapatılır — iki ayrı nesne gibi okunmasın.
	 */
	/*
	 * Başlık satırı ızgarayla aynı genişlikte gerçek bir satırdır: başlık
	 * ızgaranın sol, "Tümünü Gör ›" sağ kenarına oturur (`space-between`).
	 * Önceki çubuk yüzeyi 12 px iç boşlukla iki ucu da içeri alıyordu.
	 */
	.dj-service__docs-head {
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		margin-bottom: 12px;
		padding: 0;
	}

	/*
	 * "Tümünü Gör ›" masaüstündeki hap yüzeyini kullanır — aynı `::before`
	 * katmanı, aynı zemin/kenarlık/bulanıklık/köşe ve aynı hover/odak
	 * dönüşü (base kuralları). Masaüstünde hap metnin 7u / 18u dışına
	 * taşıyordu; burada bağlantının kendi kutusu olur (iç boşluk 7 / 14,
	 * yükseklik 36): sağ kenar ızgaranın sağ kenarında kalır, kutu metin
	 * ölçüsünü büyütmeden dokunulabilir.
	 */
	.dj-service__docs-all {
		min-height: 36px;
		padding: 7px 14px;
	}

	.dj-service__docs-all::before {
		inset: 0;
	}

	/*
	 * Başlık çubukta tek satırda kalır. 390'da çubuk 310 px: iç boşluk (24),
	 * “Tümünü Gör ›” (128.5) ve aralık (12) düşülünce 145.5 px yer kalıyor;
	 * başlık 15 px'te 147.5, 14 px'te 137.7 px çiziliyor. 14 px seçildi.
	 * Kart başlıklarıyla aynı ölçüdedir ama kalın (bold) çizilir.
	 */
	.dj-service__docs-title {
		font-size: var(--dj-m-fs-card);
	}

	/*
	 * ≤767'nin başındaki 18 px sağ pay bağlantının hap zeminine yer açmak
	 * içindi; hap bu kadrajda kapalı, pay boşta kalıp bağlantıyı sola
	 * itiyordu (sağ kenar ızgaradan 31 px içeride).
	 */
	.dj-service__docs-all {
		margin-inline-end: 0;
		font-size: var(--dj-fs-14);
	}

	/* --- 7. Haberler: alt alta, etiket görselin dışında ------------ */

	/*
	 * Yatay şerit yerine üç satır. Ölçüm: 390'da kap 350 px; 104 px kare
	 * görsel + 16 px aralık, metne 230 px kalır — başlık 16 px'te iki
	 * satıra sığar. Kategori artık fotoğrafın üzerinde değil, başlığın
	 * üstünde sade bir etikettir.
	 */
	.dj-news .dj-news__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: var(--dj-space-16);
		margin-inline: 0;
		padding-inline: 0;
		padding-block-end: 0;
		overflow-x: visible;
		scroll-snap-type: none;
	}

	/*
	 * Haber görselleri ürün/tanıtım artwork'üdür; kaynakların üçü de
	 * 1073 × 1160 (0.925 — dikey, ölçüldü).
	 *
	 * Sahne içerikten bağımsız bir KARE kutudur — üç kartta aynı genişlik,
	 * aynı yükseklik, aynı köşe. Kaynak oranı kareye çok yakın olduğu için
	 * `cover` yalnız dikeyde %7 pay alır (390'da üstten ve alttan 14'er px):
	 * görsel çerçevenin dört kenarına ulaşır, bant/iç boşluk kalmaz, ürün
	 * kesilmez. Kırpmayı kartın kendisi yapar (`overflow: hidden`), böylece
	 * görsel kartın köşe yarıçapına temiz oturur.
	 *
	 * Önceki 16:10 sahne yüksekliğin %42'sini kesiyordu; ondan sonraki
	 * `contain` çözümü ise yanlarda 13 px bant bırakıyordu.
	 */

	.dj-news__more {
		margin-top: var(--dj-space-24);
	}

	.dj-news__cta {
		width: 100%;
		justify-content: center;
	}

	/* --- 8. Kapanış faydaları ------------------------------------- */

	/*
	 * Şeridin mobil davranışı (tek öğelik karusel, noktalar) site genelinde
	 * tek yerde tanımlıdır: `footer.css`. Burada yalnız anasayfaya özel
	 * boşluk kalır — içerik → güven çizgisi aralığının sahibi
	 * `--dj-content-trust-gap` (40); mobil üst dolgu eklenince çizgi
	 * haberlerden 80 px uzaklaşıyordu.
	 */
	.dj-trust {
		padding-block-start: 0;
	}

	.dj-trust__title {
		font-size: var(--dj-m-fs-card);
	}

	/* --- 9. Şerit/kart CTA'larında satır içi ok yok ---------------- */

	/*
	 * Gerçek CTA düğme/bağlantılarında ortak ok görünür ve **tek geometriyle**
	 * çizilir: bölümler arasında ölçü 6.2–6.5 × 10.5–11, aralık 6–19.5 px
	 * arasında değişiyordu. Dar kadrajda hepsi 6.5 × 11 ve 10 px aralık.
	 *
	 * Ok yalnız gerçek CTA'lardadır: hero başlığı (bağlantı ama düğme değil)
	 * hariç tutulur. “Sepete Ekle” oku kart bölümünde ayarlanır (bölüm 4).
	 * Kategori adlarına, sekmelere, menü satırlarına, ikon düğmelerine ve
	 * karusel gezinmesine ok eklenmez.
	 */
	:is(
		.dj-cat-card__cta,
		.dj-promo__body > .dj-btn,
		.dj-tile__cta,
		.dj-service__cta,
		.dj-service__docs-all,
		.dj-news__cta
	) {
		gap: 10px;
	}

	:is(
		.dj-cat-card__cta,
		.dj-promo__body > .dj-btn,
		.dj-tile__cta,
		.dj-service__cta,
		.dj-service__docs-all,
		.dj-news__cta
	) .dj-btn__caret {
		display: inline-block;
		flex: 0 0 auto;
		width: 6.5px;
		height: 11px;
		stroke-width: 2.26;
	}

	/* Hero başlığı bir düğme değildir; slayt gezinmesi okları/noktaları ayrıdır. */
	.dj-hero .dj-btn__caret {
		display: none;
	}

	/* --- 10. Tipografi: mobil semantik ölçeğe bağlama ---------------- */

	/*
	 * Değerler tokens.css'teki beş mobil kademeden gelir; burada yeni ölçü
	 * üretilmez. Ölçülen önceki hâl (390): kutu/servis gözcüsü 22, başlık
	 * 28, gövde 18; kart adı 20. Bölüm başlığı (26), hero (akışkan, tek
	 * satır), fiyat (18) ve CTA (16) zaten hedef bantta olduğu için
	 * değişmez; ticari vurgu korunur.
	 */
	.dj-promo__eyebrow,
	.dj-tile__eyebrow,
	.dj-service__eyebrow {
		font-size: var(--dj-m-fs-eyebrow);
	}

	.dj-promo__title,
	.dj-tile__title,
	.dj-service__title {
		font-size: var(--dj-m-fs-title);
		line-height: var(--dj-m-lh-title);
	}

	.dj-tile__text,
	.dj-service__text {
		font-size: var(--dj-m-fs-body);
		line-height: var(--dj-m-lh-body);
	}

	.dj-promo__bullets {
		font-size: var(--dj-m-fs-small);
	}

	/*
	 * Bölüm CTA'ları tek ölçü (tokens.css): 44 px, 15 px metin. Ürün kartının
	 * "Sepete Ekle" düğmesi ve kategori kartı düğmesi bu listede değildir.
	 */
	:is(
		.dj-promo__body > .dj-btn,
		.dj-tile__cta,
		.dj-service__cta,
		.dj-news__cta
	) {
		min-height: var(--dj-m-cta-h);
		padding-inline: var(--dj-space-24);
		font-size: var(--dj-m-fs-button);
	}

	.dj-news .dj-section-title {
		font-size: 24px;
	}

	.dj-news .dj-section-lead {
		font-size: var(--dj-m-fs-body);
		line-height: var(--dj-m-lh-body);
	}
}

/* ================================================================== */
/* TABLET (768–1024)                                                   */
/*                                                                     */
/* Masaüstünün küçültülmüşü değil, kendi kompozisyonu: daha büyük       */
/* kartlar, bir ekranda daha az öğe, kontrollü peek ve tek dikey ritim. */
/* ≤767 mobil ve ≥1025 masaüstü bu bloktan etkilenmez.                  */
/* ================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

	/* --- 11. Ortak dikey ritim + kap boşluğu --------------------- */

	/*
	 * Ölçülen ÖNCE (768): bölüm üstleri 40 / 50 / 60, popüler altı 50,
	 * güven bandı altı 100, alt bilgi üstü 100 — bölümden bölüme
	 * 40–100 arası değişiyordu. Tablet bandında tek adım kullanılır.
	 */
	:root {
		--dj-tablet-gap: 56px;
		--dj-page-padding: 40px;
	}

	.dj-section,
	.dj-service,
	.dj-popular,
	.dj-news {
		padding-block: var(--dj-tablet-gap) 0;
	}

	.dj-trust {
		margin-block-start: var(--dj-tablet-gap);
		padding-block: 0 var(--dj-tablet-gap);
	}

	.dj-footer {
		padding-block-start: 64px;
	}

	/* --- 10. Başlık: dokunma hedefleri ---------------------------- */

	/*
	 * ÖLÇÜM: 768–1023'te başlık araçları 44 × 44 (mevcut dokunmatik kuralı),
	 * ama 1024'te o kural düşüyor ve ikonlar 19 × 19'a iniyordu — tablet
	 * bandında 29 hedef 40 px'in altındaydı. Başlık düzeni (logo · araçlar ·
	 * hamburger) sıkışmadığı için yeniden tasarlanmadı; yalnız dokunma
	 * kutuları bant boyunca korunur.
	 */
	.dj-navbar__actions .dj-action--icon,
	.dj-navbar__actions .dj-action--account {
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	.dj-navbar__actions .dj-action svg {
		width: 24px;
		height: 24px;
	}

	.dj-navbar__actions .dj-action--cart svg {
		width: 26px;
		height: 26px;
	}

	.dj-announce__nav {
		min-width: 40px;
		min-height: 40px;
	}

	.dj-lang__trigger {
		min-height: 40px;
	}

	/*
	 * Nokta gezinmesi görsel olarak küçük kalır ama dokunma alanı büyür:
	 * kutu değil, görünmez bir katman genişler — yerleşim değişmez.
	 */
	.dj-hero__dot,
	.dj-carousel__dot {
		position: relative;
	}

	.dj-hero__dot::after,
	.dj-carousel__dot::after {
		content: "";
		position: absolute;
		inset: -18px;
	}

	/*
	 * Slayt ve şerit okları 1024'te akışkan birimle 32 px'e iniyordu; daire
	 * çizimi aynı kalır, kutu dokunma ölçüsüne çıkar.
	 */
	.dj-hero__nav,
	.dj-carousel__arrow {
		width: 44px;
		height: 44px;
	}

	/*
	 * Bölüm içi eylemler de aynı tabana çekilir: 1024'te akışkan birim
	 * yüzünden sekmeler 32, favori 23, kutu düğmesi 27 px'e iniyordu.
	 */
	.dj-popular__tab {
		min-height: 40px;
		padding-block: 8px;
	}

	.dj-popular .dj-card__fav {
		width: 44px;
		height: 44px;
	}

	.dj-tile__cta,
	.dj-news__cta,
	.dj-cat-card__cta {
		min-height: 44px;
	}

	/* --- 1. Hero ------------------------------------------------- */

	/*
	 * ÖNCE: kutu genişlikten doğuyordu — 768'de 576, 912'de 684, 1024'te
	 * ise `100svh − şerit` kuralıyla 973 px'e çıkıp sonraki bölümleri
	 * ekranın çok altına itiyordu. Bant boyunca tek bir yükseklik:
	 * fotoğraf güçlü kalır, masaüstü kadar uzun hissettirmez.
	 */
	.dj-hero__viewport {
		height: clamp(560px, 68vh, 680px);
		aspect-ratio: auto;
		min-height: 0;
	}

	/* Kutu oranı değiştiği için görsel kutuyu `cover` ile doldurur. */
	.dj-hero__viewport .dj-hero__image {
		inset: 0;
		width: 100%;
		height: 100%;
		min-height: 0;
		max-width: none;
		object-fit: cover;
		object-position: 50% 50%;
		transform: none;
	}

	/* --- 2. Ana kategoriler -------------------------------------- */

	/*
	 * 768–899: iki tam kart + üçüncüden ~%18 pay.
	 *
	 * Şeridin sağ kap boşluğu kırpma yapmaz, üçüncü kart orada da görünür;
	 * bu yüzden pay hesabına o boşluk da katılır:
	 *   görünen pay = W − P − 2k − 2a  →  k = (içerik + P − 2a) / 2.18
	 * 768'de 312 px kart, 56 px (kartın %18'i) pay.
	 */
	.dj-home-cats__track {
		grid-auto-columns: calc((100% + var(--dj-page-padding) - 2 * var(--dj-gutter)) / 2.18);
		gap: var(--dj-gutter);
	}

	.dj-home-cats .dj-carousel__dots {
		display: flex;
		margin-block-start: var(--dj-space-24);
	}

	.dj-cat-card {
		aspect-ratio: auto;
		height: auto;
		padding: var(--dj-space-24);
		text-align: center;
	}

	.dj-cat-card__title {
		font-size: var(--dj-fs-22);
	}

	/*
	 * Medya kutusu akışa girer: kartlar ızgara satırında eşit boyda kalır,
	 * ürün kendi oranında ve aynı kare alanda durur.
	 */
	.dj-cat-card__media {
		position: static;
		inset: auto;
		aspect-ratio: 1;
		margin-block: var(--dj-space-16);
		overflow: hidden;
	}

	.dj-cat-card__media img,
	.dj-cat-card__media .dj-media-frame,
	.dj-cat-card__media .dj-media-frame img {
		max-width: 100%;
		max-height: 100%;
	}

	.dj-cat-card__cta {
		justify-self: stretch;
		justify-content: center;
		gap: 10px;
		min-width: 0;
		min-height: 44px;
		padding-inline: var(--dj-space-16);
		font-size: var(--dj-fs-16);
	}

	/* --- 3. Televizyon tanıtımı: gerçek split-card --------------- */

	/*
	 * ÖNCE (768): metin %58 / görsel %42 — tasarımın masaüstü oranı dar
	 * ekranda ters çalışıyordu. Tablet bandında görsel baskın olur.
	 */
	.dj-promo__panel {
		display: grid;
		grid-template-columns: 46% 54%;
		align-items: stretch;
		min-height: 0;
		overflow: hidden;
	}

	.dj-promo__body {
		max-width: none;
		padding: var(--dj-space-30) var(--dj-space-24);
		justify-content: center;
		gap: 0;
	}

	.dj-promo__eyebrow {
		font-size: var(--dj-fs-16);
		letter-spacing: 0.1em;
	}

	.dj-promo__title {
		margin-block-start: var(--dj-space-12);
		font-size: 30px;
		line-height: 1.22;
	}

	.dj-promo__bullets {
		margin-block-start: var(--dj-space-16);
		font-size: var(--dj-fs-16);
		row-gap: 0;
		column-gap: var(--dj-space-20);
	}

	.dj-promo__body > .dj-btn {
		margin-block-start: var(--dj-space-24);
		min-height: 46px;
	}

	/*
	 * Görsel sütunu kutuyu doldurur. Kaynak salon fotoğrafı yatay (3:2);
	 * kutu dikeye yakın olduğu için `cover` yanlardan ölçülü pay alır,
	 * TV ve koltuk kadrajda kalır. Esneme (stretch) yok.
	 */
	.dj-promo__media {
		position: relative;
		inset: auto;
		flex: none;
		width: auto;
		height: 100%;
		min-height: 0;
	}

	.dj-promo__panel .dj-promo__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: 50% 50%;
		transform: none;
	}

	/*
	 * Ön plan katmanı masaüstü koordinatlarına göre konumlanır; iki sütunlu
	 * tablet kutusunda yerini bulamıyor. Bantta yalnız fotoğraf kalır.
	 */
	.dj-promo__foreground {
		display: none;
	}

	/* --- 4. Popüler ürünler -------------------------------------- */

	/* 768–899: iki tam kart + ~%18 pay; kart içeriği eksilmez. */
	/*
	 * Şerit davranışı bantta bütün genişliklerde kurulur: 1023'e kadar
	 * geçerli olan kural 1024'te düşüyor ve ızgara masaüstünün üç sabit
	 * sütununa dönüp sayfayı yatayda taşırıyordu.
	 */
	.dj-popular .dj-popular__panel,
	.dj-news .dj-news__grid {
		display: grid;
		grid-template-columns: none;
		grid-auto-flow: column;
		gap: var(--dj-card-gap);
		margin-inline: calc(-1 * var(--dj-page-padding));
		padding-inline: var(--dj-page-padding);
		padding-block-end: var(--dj-carousel-pad-b);
		scroll-padding-inline: var(--dj-page-padding);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.dj-popular .dj-popular__panel::-webkit-scrollbar,
	.dj-news .dj-news__grid::-webkit-scrollbar {
		display: none;
	}

	.dj-popular .dj-popular__panel > *,
	.dj-news .dj-news__grid > * {
		min-width: 0;
		scroll-snap-align: start;
	}

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

	.dj-popular .dj-popular__panel {
		grid-auto-columns: calc((100% + var(--dj-page-padding) - 2 * var(--dj-card-gap)) / 2.18);
	}

	.dj-popular .dj-card {
		--dj-popular-media: 300px;
	}

	.dj-popular .dj-card .dj-card__cart-slot .dj-card__cart {
		min-height: 46px;
	}

	.dj-popular .dj-card__quick .dj-icon-btn--round {
		width: 40px;
		height: 40px;
	}

	/* --- 5. Tanıtım kutuları ------------------------------------ */

	/*
	 * İki kutu da aynı sırayı kullanır: görsel üstte, metin altta. Medya
	 * kutusu sabit yüksekliktedir; ikisi de aynı alanda, aynı optik
	 * ağırlıkta durur ve CTA'lar aynı taban çizgisine oturur.
	 */
	.dj-tiles__grid {
		gap: var(--dj-gutter);
		align-items: stretch;
	}

	.dj-tiles .dj-tile {
		min-height: 0;
		height: 100%;
	}

	/*
	 * Seçici `--placed` varyantını da kapsar (masaüstünde medya mutlak
	 * konumludur ve kendi yüksekliğini taşır); iki kutuda da medya alanı
	 * aynı sabit yüksekliktedir.
	 */
	.dj-tiles .dj-tile.dj-tile--placed .dj-tile__media,
	.dj-tiles .dj-tile .dj-tile__media {
		order: -1;
		position: relative;
		inset: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 240px;
		width: 100%;
		height: 240px;
		min-height: 0;
		padding: var(--dj-space-24) var(--dj-space-24) 0;
	}

	.dj-tiles .dj-tile.dj-tile--placed .dj-tile__media img,
	.dj-tiles .dj-tile .dj-tile__media img {
		position: static;
		width: auto;
		max-width: 78%;
		height: 100%;
		max-height: 100%;
		object-fit: contain;
		object-position: center;
	}

	.dj-tile__body {
		flex: 1 1 auto;
		padding: var(--dj-space-24) var(--dj-space-24) var(--dj-space-30);
	}

	/*
	 * Düğme kutunun altına yaslanır (`auto`); metinle arası masaüstündeki
	 * aralıktan (27u) az olmaz — kutu içeriği kadar uzunken `auto` 0'a
	 * iniyor, düğme metne yapışıyordu (1084'te 0 px).
	 */
	.dj-tile__cta {
		margin-block-start: auto;
	}

	.dj-tile__text {
		margin-block-end: calc(27 * var(--dj-u));
	}

	/* --- 6. Servis / destek ------------------------------------- */

	/* Yükseklik içerikten doğar; yapay ekran yüksekliği dayatılmaz. */
	.dj-service__panel {
		min-height: 0;
		padding: var(--dj-space-40) var(--dj-space-30);
		gap: var(--dj-space-40);
	}

	.dj-service__title {
		margin-block-start: var(--dj-space-12);
	}

	.dj-service__text {
		margin-block-start: var(--dj-space-12);
	}

	.dj-service__cta {
		margin-block-start: var(--dj-space-24);
		min-height: 46px;
	}

	.dj-service__docs-head {
		margin-bottom: var(--dj-space-16);
	}

	.dj-service__docs-title {
		font-size: var(--dj-fs-24);
	}

	.dj-service__docs-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: var(--dj-space-16);
	}

	.dj-doc-card {
		min-height: 0;
		padding: var(--dj-space-20);
		gap: var(--dj-space-16);
	}

	.dj-doc-card__icon {
		width: 56px;
		height: 56px;
	}

	.dj-doc-card__icon svg {
		width: 32px;
		height: 32px;
	}

	.dj-doc-card__title {
		font-size: var(--dj-fs-18);
	}

	/* --- 7. Haberler -------------------------------------------- */

	/* Popüler şeritle aynı peek mantığı; üç küçük sütuna düşmez. */
	.dj-news .dj-news__grid {
		grid-auto-columns: calc((100% + var(--dj-page-padding) - 2 * var(--dj-card-gap)) / 2.18);
	}

	.dj-news__more {
		margin-top: var(--dj-space-30);
		display: flex;
		justify-content: center;
	}

	/* --- 8. Güven bandı: 2 × 2 ---------------------------------- */

	.dj-trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: var(--dj-space-24) var(--dj-space-40);
		padding-block-start: var(--dj-space-40);
	}

	.dj-trust__item {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		align-content: start;
		gap: var(--dj-space-16);
	}

	.dj-trust__icon {
		width: calc(var(--dj-trust-icon-w, 80) * 0.7px);
		height: calc(var(--dj-trust-icon-h, 80) * 0.7px);
	}

	.dj-trust__title {
		font-size: var(--dj-fs-20);
		margin-bottom: 6px;
	}

	.dj-trust__text {
		max-width: none;
		min-height: 0;
	}
}

/* 900–1024: bir ekranda bir kart daha sığar. */
@media (min-width: 900px) and (max-width: 1199px) {
	:root {
		--dj-page-padding: 48px;
	}

	/*
	 * Kategoriler üç TAM kart. Şerit kap boşluğuna taşmaz; kaydırma kutusu
	 * kendi içerik kenarında kırptığı için dördüncü karttan hiçbir parça
	 * görünmez (kap genişliği `--dj-container` ile sınırlı olduğundan aralık
	 * temelli hesap bu aralıkta güvenilir değil).
	 */
	.dj-home-cats__track {
		grid-auto-columns: calc((100% - 2 * var(--dj-gutter)) / 3);
		gap: var(--dj-gutter);
		margin-inline: 0;
		padding-inline: 0;
		scroll-padding-inline: 0;
	}

	/* Ürün ve haber kartları okunur genişlikte kalsın: 2.5 kart. */
	.dj-popular .dj-popular__panel,
	.dj-news .dj-news__grid {
		grid-auto-columns: calc((100% - 2 * var(--dj-card-gap)) / 2.5);
	}

	.dj-promo__panel {
		grid-template-columns: 44% 56%;
	}
}

/* ================================================================== */
/* Widget ayarlarıyla açılan yerleşimler (Elementor)                   */
/*                                                                     */
/* Buradaki kuralların hepsi YALNIZ ilgili ayar seçildiğinde basılan   */
/* bir değiştirici sınıf/öznitelikle eşleşir. Ayar varsayılanda          */
/* bırakıldığında hiçbiri eşleşmez ve onaylı tasarım aynen kalır.       */
/* Tablet katmanındaki (tablet.css, sonra yüklenir) eşdeğer kuralları    */
/* geçebilmek için seçiciler bir kademe özgüldür; `!important` yok.     */
/* ================================================================== */

/* --- Ürün Kategorileri: görünen kart sayısı ----------------------- */

@media (min-width: 1200px) {
	.dj-home-cats[data-dj-pv-d] .dj-home-cats__track {
		grid-auto-columns: calc((100% - (var(--dj-cats-pv-d) - 1) * var(--dj-gutter)) / var(--dj-cats-pv-d));
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.dj-home-cats[data-dj-pv-t] .dj-home-cats__track {
		grid-auto-columns: calc((100% - (var(--dj-cats-pv-t) - 1) * var(--dj-gutter)) / var(--dj-cats-pv-t));
	}
}

@media (max-width: 767px) {
	.dj-home-cats[data-dj-pv-m] .dj-home-cats__track {
		grid-auto-columns: calc((100% - (var(--dj-cats-pv-m) - 1) * var(--dj-page-padding)) / var(--dj-cats-pv-m));
	}
}

/* Taşma davranışı "Alt satıra geç": şerit ızgaraya döner, ok ve nokta yok. */
.dj-home-cats.dj-home-cats--wrap .dj-home-cats__track {
	grid-auto-flow: row;
	grid-template-columns: repeat(var(--dj-cats-cols, 4), minmax(0, 1fr));
	grid-auto-columns: auto;
	overflow: visible;
	scroll-snap-type: none;
	margin-inline: 0;
	padding-inline: 0;
}

.dj-home-cats--wrap { --dj-cats-cols: var(--dj-cats-pv-d, 4); }

@media (min-width: 768px) and (max-width: 1199px) {
	.dj-home-cats--wrap { --dj-cats-cols: var(--dj-cats-pv-t, 3); }
}

@media (max-width: 767px) {
	.dj-home-cats--wrap { --dj-cats-cols: var(--dj-cats-pv-m, 2); }
}

.dj-home-cats.dj-home-cats--wrap .dj-carousel__arrow,
.dj-home-cats.dj-home-cats--wrap .dj-carousel__dots,
.dj-home-cats.dj-home-cats--no-arrows .dj-carousel__arrow,
.dj-home-cats.dj-home-cats--no-dots .dj-carousel__dots {
	display: none;
}

/* --- Popüler Ürünler: kaydırmalı şerit (3'ten fazla ürün) ------------ */

/*
 * Kaydırmalı yerleşim yalnız görünen sayıdan fazla ürünü olan sekmede
 * basılır (`dj-popular__panel--carousel`). Kart genişliği ızgaranın sütun
 * genişliğiyle aynı formülden gelir; kart geometrisi değişmez, fazlası
 * yatay kaydırılır. Dar tablet ve mobilde şerit zaten kaydırmalıdır.
 */
@media (min-width: 1024px) {
	.dj-popular .dj-popular__panel.dj-popular__panel--carousel {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - 2 * var(--dj-card-gap)) / 3);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.dj-popular .dj-popular__panel.dj-popular__panel--carousel::-webkit-scrollbar {
		display: none;
	}

	.dj-popular .dj-popular__panel.dj-popular__panel--carousel > * {
		min-width: 0;
		scroll-snap-align: start;
	}
}

/* Tablet: kategori akışta; özet başlığın hemen altında, tarih kartın altında. */

/* --- Tanıtım Kutuları: "Görsel konumu: Üstte" --------------------- */

/* Koordinatsız (akış) kutuda görsel önce çizilir. */
.dj-tiles .dj-tile.dj-tile--media-first:not(.dj-tile--placed) .dj-tile__media {
	order: -1;
}

/*
 * 1200–1279'da (masaüstü bandının dar ucu) yerleşimli kutu akışa döner.
 * Önceden bu aralıkta iki kutu da metin → görsel sırasına zorlanıyordu;
 * görseli üstte tanımlı kutu (klima) 1280 ve üstünde ve mobilde üstte,
 * burada altta çiziliyordu. Elementor düzenleyici kanvası (~1250 px) bu
 * aralıkta kaldığı için düzenleyici önizlemesi frontend'den farklı
 * görünüyordu. Sıra artık kutunun kendi ayarını izler. 768–1199 tablet
 * tasarımı (iki kutu da görsel üstte) bu kuraldan etkilenmez.
 */
@media (min-width: 1200px) and (max-width: 1279px) {
	.dj-tiles .dj-tile--placed.dj-tile--media-first .dj-tile__media {
		order: -1;
		margin: var(--dj-space-40) var(--dj-space-40) 0;
	}

	.dj-tiles .dj-tile--placed.dj-tile--media-first .dj-tile__body {
		padding-block: var(--dj-space-30) var(--dj-space-40);
	}
}