/*
 * Ürün açıklaması — yapılandırılmış bloklar (ürün sayfası “Ürün Açıklaması”
 * sekmesi).
 *
 * Masaüstü (≥1024) tek kaynak: dijitsu-urun-ozellik.psd (1920 × 7847).
 * Bütün ölçüler PSD pikselidir; `--u` bir PSD pikselinin tuvaldeki
 * karşılığıdır (tuval genişliği / 1920). 1920 px tuvalde çıktı PSD ile
 * birebir, daha dar tuvalde aynı kompozisyonun orantılı küçüğüdür.
 *
 * Katman sırası: beyaz zemin → desen → görsel → metin. Her bant kendi
 * katman bağlamıdır ve kendi sınırında kırpılır; bir bandın deseni ya da
 * görseli komşu banda taşmaz. Görsel kendi piksel ölçüsüyle tuvalin sağ
 * ya da sol kenarına oturur (bant yüksekliği = görsel yüksekliği); iç
 * kenarı PSD katman maskesindeki duraklarla zemine erir.
 *
 * Desen yalnız zemin dokusudur: düşük opaklıkta, bandın üst/alt kenarında
 * söner (sert kesik yok) ve metin kutusunun arkasında neredeyse kaybolur.
 *
 * Görsel + Metin modülleri açıklamadaki sıralarına göre PSD'deki sekiz
 * kompozisyondan birini alır (`data-psd`, 1–8): maske durakları, metin
 * kutusu ve desen konumu kompozisyona göre değişir. Ölçüm raporu:
 * project-files/qa/v10/PSD-OLCUM-RAPORU.md.
 *
 * Dar ekran (<1024) ayrı uyarlamadır: görsel üstte, metin altta; ikisi de
 * sitenin içerik kılavuzunda (kap yan boşluğu), ekran kenarına taşmaz.
 *
 * Tipografi sitenin kendisidir (PSD'deki Montserrat ve 25–42 px değil):
 * Inter (`--dj-font`), başlık (H2) `--dj-fs-36`, ürün adı ve özellik başlığı
 * (H3) `--dj-fs-24`, paragraflar `--dj-fs-body`. Yerleşim (bant, görsel,
 * maske, metin kutusu) PSD ölçüsünde kalır.
 */

.dj-desc {
	--dj-desc-ink: var(--dj-ink);
	--dj-desc-font: var(--dj-font);

	container-type: inline-size;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	color: var(--dj-desc-ink);
	font-family: var(--dj-desc-font);
}

/* ------------------------------------------------------------------ */
/* Masaüstü: PSD kompozisyonu                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 1024px) {
	/* Bir PSD pikseli. Kapsayıcının (.dj-desc) içinde çözülür. */
	.dj-desc > * {
		--u: calc(100cqi / 1920);
	}

	/* --- Görsel + Metin --- */

	.dj-desc__section,
	.dj-desc__grid {
		position: relative;
		isolation: isolate;
		overflow: clip;
	}

	.dj-desc__section {
		height: calc(var(--dj-img-h, 820) * var(--u));
	}

	.dj-desc__media {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		z-index: 1;
		width: calc(var(--dj-img-w, 1229) * var(--u));
		height: 100%;
	}

	.dj-desc__section--image-left .dj-desc__media {
		inset-inline: 0 auto;
	}

	.dj-desc__image {
		display: block;
		width: 100%;
		height: 100%;
		-webkit-mask-image: var(--dj-psd-fade);
		mask-image: var(--dj-psd-fade);
	}

	/*
	 * Desen (PSD “Pattern” grubu): görsellerin altında, metin tarafında.
	 * Maske iki katmanın kesişimi:
	 * - dikey: desenin görünen kısmı (bant içinde kalan) üst ve alt kenarda
	 *   söner, bant sınırında sert çizgi oluşmaz;
	 * - metin güvenli alanı: metin kutusunun merkezinde elips; içi neredeyse
	 *   saydam, dışına doğru desen geri gelir.
	 * Metin merkezi desenin kendi koordinatında hesaplanır; görsel sağdaki
	 * bantlarda desen aynalı olduğu için iki durumda da aynı formül çıkar
	 * (desen genişliği 1214, metin kenar payı ~85).
	 */
	.dj-desc__section::before {
		--dj-pat-h: min(822, var(--dj-img-h, 820) - var(--dj-psd-pat-y, 0));
		--dj-pat-fade: 110;

		content: "";
		position: absolute;
		top: calc(var(--dj-psd-pat-y, 0) * var(--u));
		left: calc(var(--dj-psd-pat-x, 0) * var(--u));
		z-index: 0;
		width: calc(1214 * var(--u));
		height: calc(822 * var(--u));
		background: url("../img/description-pattern.svg") no-repeat 0 0 / 100% 100%;
		opacity: 0.22;
		transform: scaleX(-1);
		pointer-events: none;
		-webkit-mask-image:
			radial-gradient(
				calc((var(--dj-psd-box, 800) / 2 + 150) * var(--u)) calc(330 * var(--u))
				at calc((1129 - var(--dj-psd-box, 800) / 2) * var(--u)) calc((var(--dj-img-h, 820) / 2 + var(--dj-psd-dy, 0) - var(--dj-psd-pat-y, 0)) * var(--u)),
				rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.1) 55%, #000 100%
			),
			linear-gradient(to bottom, transparent 0, #000 calc(var(--dj-pat-fade) * var(--u)), #000 calc((var(--dj-pat-h) - var(--dj-pat-fade)) * var(--u)), transparent calc(var(--dj-pat-h) * var(--u)));
		-webkit-mask-composite: source-in;
		mask-image:
			radial-gradient(
				calc((var(--dj-psd-box, 800) / 2 + 150) * var(--u)) calc(330 * var(--u))
				at calc((1129 - var(--dj-psd-box, 800) / 2) * var(--u)) calc((var(--dj-img-h, 820) / 2 + var(--dj-psd-dy, 0) - var(--dj-psd-pat-y, 0)) * var(--u)),
				rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.1) 55%, #000 100%
			),
			linear-gradient(to bottom, transparent 0, #000 calc(var(--dj-pat-fade) * var(--u)), #000 calc((var(--dj-pat-h) - var(--dj-pat-fade)) * var(--u)), transparent calc(var(--dj-pat-h) * var(--u)));
		mask-composite: intersect;
	}

	.dj-desc__section--image-left::before {
		left: calc(706 * var(--u));
		transform: none;
	}

	.dj-desc__section[data-psd="1"]::before {
		content: none;
	}

	/* Metin kutusu: PSD'deki paragraf kutusu; dikeyde bandın ortası. */
	.dj-desc__text {
		position: absolute;
		top: 50%;
		left: calc(84.3 * var(--u));
		z-index: 2;
		width: calc(var(--dj-psd-box) * var(--u));
		transform: translateY(calc(-50% + var(--dj-psd-dy, 0) * var(--u)));
		text-align: start;
	}

	.dj-desc__section--image-left .dj-desc__text {
		left: auto;
		right: calc(var(--dj-psd-edge, 85) * var(--u));
		text-align: end;
	}

	/* Başlıklar sitenin H2 / H3 ölçüsünde. */
	.dj-desc__eyebrow,
	.dj-desc__headline {
		margin: 0;
		font-weight: var(--dj-fw-bold);
		color: inherit;
	}

	.dj-desc__headline {
		font-size: var(--dj-fs-36);
		line-height: var(--dj-lh-tight);
	}

	/* Ürün adı (H3 düzeyi); başlıkla arasında bir satır boşluk. */
	.dj-desc__eyebrow {
		margin-bottom: var(--dj-space-16);
		font-size: var(--dj-fs-24);
		line-height: var(--dj-lh-snug);
	}

	/* Gövde: sitenin gövde ölçüsü, metin kutusunun tam genişliğinde. */
	.dj-desc__body {
		margin-top: var(--dj-space-20);
		font-size: var(--dj-fs-body);
		font-weight: var(--dj-fw-regular);
		line-height: var(--dj-lh-relaxed);
	}

	.dj-desc__body p {
		margin: 0;
	}

	/*
	 * Kompozisyon tablosu (PSD ölçümü). Maske: iç kenardan görsel
	 * genişliğinin yüzdesi olarak α durakları. Kutu / kenar / desen: PSD
	 * pikseli. Dikey kayma (dy): bant ortasına göre PSD'deki gerçek metin
	 * konumu.
	 */
	.dj-desc__section[data-psd="1"] {
		--dj-psd-fade: linear-gradient(to right, rgba(0, 0, 0, 0.055) 0%, rgba(0, 0, 0, 0.1) 3.82%, rgba(0, 0, 0, 0.25) 13.43%, rgba(0, 0, 0, 0.5) 24.33%, rgba(0, 0, 0, 0.75) 32.55%, rgba(0, 0, 0, 0.9) 37.67%, #000 41.5%);
		--dj-psd-box: 907.6;
		--dj-psd-dy: -6;
	}

	.dj-desc__section[data-psd="2"] {
		--dj-psd-fade: linear-gradient(to left, transparent 8.87%, rgba(0, 0, 0, 0.1) 19.12%, rgba(0, 0, 0, 0.25) 25.55%, rgba(0, 0, 0, 0.5) 32.38%, rgba(0, 0, 0, 0.75) 37.43%, rgba(0, 0, 0, 0.9) 40.44%, #000 42.72%);
		--dj-psd-box: 868.9;
		--dj-psd-edge: 85;
		--dj-psd-dy: -7;
	}

	.dj-desc__section[data-psd="3"] {
		--dj-psd-fade: linear-gradient(to right, rgba(0, 0, 0, 0.008) 0%, rgba(0, 0, 0, 0.1) 10.25%, rgba(0, 0, 0, 0.25) 18.47%, rgba(0, 0, 0, 0.5) 27.91%, rgba(0, 0, 0, 0.75) 34.99%, rgba(0, 0, 0, 0.9) 39.3%, #000 42.47%);
		--dj-psd-box: 750.7;
		--dj-psd-dy: -2;
	}

	.dj-desc__section[data-psd="4"] {
		--dj-psd-fade: linear-gradient(to left, rgba(0, 0, 0, 0.008) 0%, rgba(0, 0, 0, 0.1) 12.61%, rgba(0, 0, 0, 0.25) 20.67%, rgba(0, 0, 0, 0.5) 26.12%, rgba(0, 0, 0, 0.75) 29.05%, rgba(0, 0, 0, 0.9) 30.76%, #000 32.14%);
		--dj-psd-box: 802.4;
		--dj-psd-edge: 86;
		--dj-psd-pat-y: 160;
		--dj-psd-dy: -1;
	}

	.dj-desc__section[data-psd="5"] {
		--dj-psd-fade: linear-gradient(to right, rgba(0, 0, 0, 0.024) 0%, rgba(0, 0, 0, 0.1) 8.54%, rgba(0, 0, 0, 0.25) 16.68%, rgba(0, 0, 0, 0.5) 22.86%, rgba(0, 0, 0, 0.75) 26.69%, rgba(0, 0, 0, 0.9) 28.97%, #000 30.68%);
		--dj-psd-box: 819.5;
		--dj-psd-gap: 136.8;
		--dj-psd-dy: 40;
		--dj-psd-pat-x: 3;
	}

	.dj-desc__section[data-psd="6"] {
		--dj-psd-fade: linear-gradient(to left, transparent 2.77%, rgba(0, 0, 0, 0.1) 17.36%, rgba(0, 0, 0, 0.25) 26.5%, rgba(0, 0, 0, 0.5) 37.03%, rgba(0, 0, 0, 0.75) 45.06%, rgba(0, 0, 0, 0.9) 49.95%, #000 53.55%);
		--dj-psd-box: 789.9;
		--dj-psd-edge: 89;
		--dj-psd-dy: -4;
	}

	.dj-desc__section[data-psd="7"] {
		--dj-psd-fade: linear-gradient(to right, rgba(0, 0, 0, 0.094) 0%, rgba(0, 0, 0, 0.1) 0.57%, rgba(0, 0, 0, 0.25) 13.67%, rgba(0, 0, 0, 0.5) 28.72%, rgba(0, 0, 0, 0.75) 40.03%, rgba(0, 0, 0, 0.9) 46.79%, #000 51.99%);
		--dj-psd-box: 767.1;
		--dj-psd-pat-x: 3;
		--dj-psd-dy: -4;
	}

	.dj-desc__section[data-psd="8"] {
		--dj-psd-fade: linear-gradient(to left, rgba(0, 0, 0, 0.055) 0%, rgba(0, 0, 0, 0.1) 6.1%, rgba(0, 0, 0, 0.25) 18.31%, rgba(0, 0, 0, 0.5) 29.94%, rgba(0, 0, 0, 0.75) 37.92%, rgba(0, 0, 0, 0.9) 42.64%, #000 46.22%);
		--dj-psd-box: 850.2;
		--dj-psd-edge: 86;
		--dj-psd-dy: 0;
	}

	/* --- Özellik ızgarası --- */

	.dj-desc__grid {
		padding: calc(101 * var(--u)) calc(84 * var(--u)) calc(80 * var(--u));
	}

	/*
	 * Izgara deseni (PSD Layer 11): PSD'de bandın 305 px altından başlar,
	 * yani bant sonundan 524 px yukarıda. Sabit 25 px metinle bant yüksekliği
	 * genişliğe göre değiştiği için bant sonuna göre konumlanır; böylece
	 * seyrek kuşak hep metnin arkasında, belirgin kuşak hep son satırın
	 * altında kalır. Bant sınırında kırpılır, üstte ve bant sonunda söner.
	 */
	.dj-desc__grid::before {
		content: "";
		position: absolute;
		top: calc(100% - 524 * var(--u));
		left: 0;
		z-index: 0;
		width: calc(1920 * var(--u));
		height: calc(1120 * var(--u));
		background: url("../img/description-pattern-grid.svg") no-repeat 0 0 / 100% 100%;
		opacity: 0.22;
		pointer-events: none;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.12) calc(120 * var(--u)), rgba(0, 0, 0, 0.12) calc(445 * var(--u)), rgba(0, 0, 0, 0.7) calc(495 * var(--u)), transparent calc(524 * var(--u)));
		mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.12) calc(120 * var(--u)), rgba(0, 0, 0, 0.12) calc(445 * var(--u)), rgba(0, 0, 0, 0.7) calc(495 * var(--u)), transparent calc(524 * var(--u)));
	}

	.dj-desc__grid-title {
		position: relative;
		z-index: 2;
		margin: 0 0 var(--dj-space-40);
		font-size: var(--dj-fs-36);
		font-weight: var(--dj-fw-bold);
		line-height: var(--dj-lh-tight);
		text-align: center;
	}

	.dj-desc__features {
		position: relative;
		z-index: 2;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: calc(48 * var(--u)) calc(30 * var(--u));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dj-desc__feature {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 0 0 calc((100% - (var(--dj-desc-cols, 4) - 1) * 30 * var(--u)) / var(--dj-desc-cols, 4));
		min-width: 0;
		text-align: center;
	}

	.dj-desc__icon {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		height: calc(209 * var(--u));
		margin-bottom: calc(19 * var(--u));
	}

	.dj-desc__icon img {
		display: block;
		width: calc(var(--dj-icon-w, 200) * var(--u));
		max-width: none;
		height: calc(var(--dj-icon-h, 180) * var(--u));
	}

	.dj-desc__feature-title {
		margin: 0;
		font-size: var(--dj-fs-24);
		font-weight: var(--dj-fw-bold);
		line-height: var(--dj-lh-snug);
		color: inherit;
	}

	/* Özellik açıklaması: gövde ölçüsü, sütunun tam genişliğinde. */
	.dj-desc__feature-body {
		margin-top: var(--dj-space-16);
		font-size: var(--dj-fs-body);
		line-height: var(--dj-lh-relaxed);
	}

	.dj-desc__feature-body p {
		margin: 0;
	}

	/*
	 * 4 öğeli ızgara: PSD'deki sütunlar (metin kutusu x / genişlik; ortalı
	 * satırların PSD'deki merkezine göre ayarlı) ve ikon konumları (üst,
	 * kutu merkezine göre kayma) birebir.
	 */
	/* Alt boşluk: PSD'de son gövde satırının glif altından bant sonuna 80 px; satır kutusundan 69,3 px. */
	.dj-desc__grid[data-count="4"] {
		padding: 0 0 calc(69.3 * var(--u));
	}

	.dj-desc__grid[data-count="4"] .dj-desc__features {
		display: grid;
		grid-template-columns: calc(77 * var(--u)) calc(405.4 * var(--u)) calc(33.5 * var(--u)) calc(413 * var(--u)) calc(28.4 * var(--u)) calc(444.1 * var(--u)) calc(31.3 * var(--u)) calc(412 * var(--u));
		gap: 0;
		justify-content: start;
	}

	.dj-desc__grid[data-count="4"] .dj-desc__feature {
		--dj-psd-icon-top: 101;
		--dj-psd-icon-dx: 0;

		padding-top: calc(322.9 * var(--u));
	}

	.dj-desc__grid[data-count="4"] .dj-desc__feature:nth-child(1) {
		grid-column: 2;
		--dj-psd-icon-dx: 0.3;
	}

	.dj-desc__grid[data-count="4"] .dj-desc__feature:nth-child(2) {
		grid-column: 4;
		--dj-psd-icon-dx: 0.6;
	}

	.dj-desc__grid[data-count="4"] .dj-desc__feature:nth-child(3) {
		grid-column: 6;
		--dj-psd-icon-dx: 0.7;
	}

	.dj-desc__grid[data-count="4"] .dj-desc__feature:nth-child(4) {
		grid-column: 8;
		--dj-psd-icon-top: 82;
		--dj-psd-icon-dx: 15.8;
	}

	.dj-desc__grid[data-count="4"] .dj-desc__icon {
		position: absolute;
		top: calc(var(--dj-psd-icon-top) * var(--u));
		left: calc(50% + var(--dj-psd-icon-dx) * var(--u));
		height: auto;
		margin: 0;
		transform: translateX(-50%);
	}
}

/* ------------------------------------------------------------------ */
/* Dar ekran (<1024): görsel üstte, metin altta; ızgara 2 sütun         */
/* ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	.dj-desc__media {
		display: block;
	}

	.dj-desc__image {
		display: block;
		width: 100%;
		height: auto;
	}

	/* Görsel ve metin aynı içerik kılavuzunda: yan boşluk kabın kendisinden (--dj-page-padding). */
	.dj-desc {
		gap: 16px;
	}

	.dj-desc__text {
		padding: 14px 0 12px;
	}

	.dj-desc__eyebrow {
		margin: 0 0 8px;
		font-size: var(--dj-m-fs-eyebrow, 14px);
		font-weight: 700;
		line-height: 1.35;
	}

	.dj-desc__headline {
		margin: 0;
		font-size: var(--dj-m-fs-title, 22px);
		font-weight: 700;
		line-height: 1.25;
		color: inherit;
	}

	.dj-desc__body {
		margin-top: 10px;
		font-size: var(--dj-fs-body);
		line-height: 1.55;
	}

	.dj-desc__body p {
		margin: 0;
	}

	.dj-desc__grid {
		padding: 16px 0 12px;
	}

	.dj-desc__grid-title {
		margin: 0 0 24px;
		font-size: var(--dj-m-fs-title, 22px);
		font-weight: 700;
		text-align: center;
	}

	.dj-desc__features {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 32px 16px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dj-desc__feature {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 0 0 calc((100% - 16px) / 2);
		min-width: 0;
		text-align: center;
	}

	.dj-desc__icon {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		height: 60px;
		margin-bottom: 14px;
	}

	.dj-desc__icon img {
		display: block;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}

	.dj-desc__feature-title {
		margin: 0;
		font-size: var(--dj-m-fs-card, 16px);
		font-weight: 700;
		line-height: 1.3;
		color: inherit;
	}

	.dj-desc__feature-body {
		margin-top: 6px;
		font-size: var(--dj-fs-body);
		line-height: 1.5;
	}

	.dj-desc__feature-body p {
		margin: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Geçici görsel referansı (bloklar yokken)                            */
/* ------------------------------------------------------------------ */

/*
 * Tek parça, doğal oranıyla akar. Kırpma, sabit yükseklik ve arka plan
 * görseli yoktur. Çizilebilir blok olduğu anda bu dal hiç basılmaz.
 */
.dj-desc-reference__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}