/* Temel sıfırlama, tipografi ve yerleşim yardımcıları. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

/*
 * Yumuşak kaydırma CSS'te verilmez: açılıştaki çapa atlamasını da
 * animasyona çeviriyor, animasyon yarıda kesilince sayfa üstte kalıyordu.
 * Elementor'un ön yüz stili `html { scroll-behavior: smooth }` yazdığı için
 * değer burada bir kademe güçlü seçiciyle geri alınır. Sayfa içi çapalar
 * `assets/js/main.js` ("Sayfa içi çapalar") ile yumuşak kayar.
 */
:root {
	scroll-behavior: auto;
}

/*
 * `hidden` niteliği bileşen kuralları tarafından ezilmesin. Sekme
 * panelleri `display: grid` taşıdığı için bu koruma olmadan gizli panel
 * de çiziliyordu.
 */
[hidden] {
	display: none !important;
}

body {
	margin: 0;
	background: var(--dj-white);
	color: var(--dj-ink);
	font-family: var(--dj-font);
	font-size: var(--dj-fs-16);
	line-height: var(--dj-lh-normal);
	font-weight: var(--dj-fw-regular);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
svg,
video,
canvas {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
 * Satır içi ikonlar ölçüsünü kendi kuralından alır; bir bileşende ölçü
 * verilmediğinde `height: auto` ile kapsayıcı genişliğine büyümesinler.
 */
.dj-menu__icon svg {
	width: calc(20 * var(--dj-u));
	height: calc(20 * var(--dj-u));
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dj-transition), opacity var(--dj-transition);
}

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

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* `cols` niteliği (ör. yorum formu) dar ekranda sayfayı yatay taşırmasın. */
textarea {
	max-width: 100%;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
}

nav ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	width: 100%;
}

:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
	border-radius: var(--dj-radius-sm);
}

/* --- Yerleşim --- */

.dj-container {
	width: 100%;
	max-width: calc(var(--dj-container) + (var(--dj-page-padding) * 2));
	margin-inline: auto;
	padding-inline: var(--dj-page-padding);
}

/* Tasarım ritmi: bloklar arası 50, başlıklı bölümler arası 100. */
.dj-section {
	padding-block: var(--dj-space-50) 0;
}

/* İçerik sayfalarında bölüm tek başına kullanılır; alt boşluğu korunur. */
.dj-container.dj-section {
	padding-block: var(--dj-space-50) var(--dj-space-100);
}

/*
 * Ana içeriğin **son** bölümü kendi alt boşluğunu üretmez: güven bandına
 * giren tek aralık `--dj-content-trust-gap`'tir. Aksi hâlde bölüm dolgusu
 * ile bandın üst boşluğu toplanıp sayfadan sayfaya değişen bir boşluk
 * oluşuyordu (arama/sayfa/karşılaştır: 150, sepet/ödeme: 135, diğerleri 75).
 */
.dj-main > :last-child > .dj-container.dj-section:last-child,
.dj-main > .dj-container.dj-section:last-child {
	padding-block-end: 0;
}

/* Kendi başlığı olan bölümler üstten iki kat boşluk alır. */
.dj-section--titled {
	padding-block-start: var(--dj-space-100);
}

@media (max-width: 1023px) {
	.dj-section {
		padding-block-start: var(--dj-space-40);
	}

	.dj-section--titled {
		padding-block-start: var(--dj-space-60);
	}
}

.dj-stack {
	display: flex;
	flex-direction: column;
}

.dj-row {
	display: flex;
	align-items: center;
}

.dj-divider {
	border: 0;
	border-top: 1px solid var(--dj-line);
	margin: 0;
}

/* --- Erişilebilirlik --- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.dj-skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 999;
	background: var(--dj-ink);
	color: var(--dj-white);
	padding: calc(12 * var(--dj-u)) calc(20 * var(--dj-u));
	border-radius: 0 0 var(--dj-radius-sm) 0;
}

.dj-skip-link:focus {
	inset-inline-start: 0;
	color: var(--dj-white);
}

/* --- Başlıklar --- */

.dj-section-title {
	font-size: var(--dj-fs-52);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-tight);
	color: var(--dj-ink);
}

.dj-section-title--centered {
	text-align: center;
}

/*
 * XD: alt metin tek satır (x 508–1412). Web Inter'de aynı cümle 936 px
 * istediği için sınır ona göre verildi; satır sayısı tasarımla aynı kalır.
 */
.dj-section-lead {
	color: var(--dj-ink);
	font-size: var(--dj-fs-20);
	text-align: center;
	max-width: calc(960 * var(--dj-u));
	margin-inline: auto;
	margin-block-start: var(--dj-space-20);
}

@media (max-width: 1023px) {
	.dj-section-title {
		font-size: var(--dj-fs-36);
	}

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

	.dj-post-card__tag {
		top: calc(16 * var(--dj-u));
		inset-inline-start: calc(16 * var(--dj-u));
		min-height: calc(38 * var(--dj-u));
		padding-inline: calc(18 * var(--dj-u));
		font-size: var(--dj-fs-14);
	}
}

/* Yatay çizgili ortalanmış başlık (kategori arşivi). */
.dj-rule-title {
	display: flex;
	align-items: center;
	gap: var(--dj-space-40);
	margin-block: var(--dj-space-40);
}

.dj-rule-title::before,
.dj-rule-title::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--dj-line);
}

.dj-rule-title h1,
.dj-rule-title h2 {
	font-size: var(--dj-fs-32);
	font-weight: var(--dj-fw-bold);
	white-space: nowrap;
}

/* --- Butonlar --- */

.dj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dj-cta-gap, var(--dj-space-8));
	min-height: var(--dj-button-height);
	padding: var(--dj-button-padding);
	border-radius: var(--dj-radius-pill);
	font-size: var(--dj-fs-20);
	font-weight: var(--dj-fw-bold);
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	transition: background-color var(--dj-transition), color var(--dj-transition), border-color var(--dj-transition);
	border: 1px solid transparent;
}

.dj-btn--primary {
	background: var(--dj-ink);
	color: var(--dj-white);
}

.dj-btn--primary:hover {
	background: var(--dj-ink-deep);
	color: var(--dj-white);
}

.dj-btn--outline {
	background: transparent;
	border-color: var(--dj-line);
	color: var(--dj-ink);
}

.dj-btn--outline:hover {
	border-color: var(--dj-ink);
	color: var(--dj-ink);
}

.dj-btn--light {
	background: var(--dj-white);
	color: var(--dj-ink);
}

.dj-btn--light:hover {
	background: var(--dj-surface);
	color: var(--dj-ink);
}

.dj-btn--sm {
	min-height: var(--dj-button-height-sm);
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
	padding: 0 calc(24 * var(--dj-u));
}

/*
 * Boş durum eylemi — favoriler ve sepetin boş görünümlerinde (sayfa ve
 * çekmece) kullanılan tek CTA. Sitedeki koyu düğme davranışının aynısı:
 * kenarlık normalde de vardır (zeminle aynı renk), bu yüzden hover'da beyaz
 * zemine geçerken kutu ölçüsü değişmez. Ölçek, kaydırma ve alt çizgi yok.
 */
.dj-empty-cta {
	border: 1px solid var(--dj-ink);
	background: var(--dj-ink);
	color: var(--dj-white);
	text-decoration: none;
	transition: background-color var(--dj-transition), color var(--dj-transition), border-color var(--dj-transition);
}

/* İçerik alanının genel bağlantı alt çizgisi bu düğmeye uygulanmaz. */
.dj-entry__content a.dj-empty-cta {
	text-decoration: none;
}

@media (hover: hover) {
	.dj-empty-cta:hover {
		background: var(--dj-white);
		border-color: var(--dj-ink);
		color: var(--dj-ink);
		text-decoration: none;
	}
}

.dj-empty-cta:active {
	background: var(--dj-white);
	border-color: var(--dj-ink);
	color: var(--dj-ink);
}

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


/*
 * Çekmece geri bildirimi (sepete ekleme, favoriye ekleme). Listenin hemen üstünde, çekmece başlığıyla
 * aynı yatay boşlukta duran tek satırlık bir işaret — büyük bildirim kutusu
 * değil. Akıştan çıkarken `hidden` kullanılır, bu yüzden görünür olmadığında
 * çekmecede yer kaplamaz ve liste kaymaz.
 */
.dj-drawer-feedback {
	display: flex;
	align-items: flex-start;
	gap: var(--dj-space-8);
	flex: none;
	margin: 0;
	padding: var(--dj-space-12) var(--dj-space-20);
	border-bottom: 1px solid var(--dj-line);
	background: var(--dj-surface);
	opacity: 0;
	transition: opacity 200ms ease;
}

.dj-drawer-feedback.is-visible {
	opacity: 1;
}

.dj-drawer-feedback__icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-block-start: 1px;
	color: var(--dj-ink);
}

.dj-drawer-feedback__icon svg {
	width: 14px;
	height: 14px;
	stroke-width: 2.4;
}

.dj-drawer-feedback__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dj-drawer-feedback__title {
	color: var(--dj-ink);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-semibold);
	line-height: 1.3;
}

.dj-drawer-feedback__product {
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
	line-height: 1.35;
	overflow-wrap: anywhere;
}

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

/*
 * İşlem sürerken düğme kilitlidir. Genişlik JavaScript tarafında o anki
 * ölçüsüne sabitlendiği için etiket değişse de kutu oynamaz; burada yalnız
 * tıklama ve imleç davranışı değişir — renk, ölçü ve köşe aynı kalır.
 */
.dj-btn[data-dj-busy] {
	pointer-events: none;
	cursor: default;
}

/*
 * Favori düğmesi işlem sürerken kilitlidir. Yalnız etkileşim durur; ikon
 * ölçüsü, rengi ve kutusu aynı kalır — dönen simge eklenmez, düzen kaymaz.
 */
.dj-icon-btn[data-dj-busy] {
	pointer-events: none;
	cursor: default;
	opacity: 0.7;
}

/* ------------------------------------------------------------------ */
/* Dairesel eylem ailesi                                               */
/*                                                                     */
/* Hero ve kategori kaydırıcısının okları ile ürün kartındaki hızlı    */
/* bakış / karşılaştırma düğmeleri aynı kontrol tipidir: normalde beyaz */
/* yüzey + koyu ikon, hover'da koyu yüzey + beyaz ikon. Davranış tek    */
/* yerde tanımlanır; daire ne büyür ne de yer değiştirir, gölge        */
/* patlamaz. Süre `--dj-motion-base`.                                   */
/* ------------------------------------------------------------------ */

:is(.dj-hero__nav, .dj-carousel__arrow, .dj-icon-btn--round) {
	transition:
		background-color var(--dj-transition),
		border-color var(--dj-transition),
		color var(--dj-transition),
		opacity var(--dj-transition);
}

:is(.dj-hero__nav, .dj-carousel__arrow, .dj-icon-btn--round) svg {
	transition: transform var(--dj-transition);
}

@media (hover: hover) {
	:is(.dj-hero__nav, .dj-carousel__arrow, .dj-icon-btn--round):hover:not(:disabled) {
		background: var(--dj-ink);
		border-color: var(--dj-ink);
		color: var(--dj-white);
	}
}

:is(.dj-hero__nav, .dj-carousel__arrow, .dj-icon-btn--round):focus-visible {
	background: var(--dj-ink);
	border-color: var(--dj-ink);
	color: var(--dj-white);
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/*
 * Pasif ok hover almaz. Tasarımda oklar pasifken de okunur kalıyor; durum
 * belirgin ama yok olmayan bir opaklık, imleç ve `pointer-events` ile
 * anlatılır.
 */
:is(.dj-hero__nav, .dj-carousel__arrow):disabled {
	opacity: 0.65;
	cursor: default;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	:is(.dj-hero__nav, .dj-carousel__arrow, .dj-icon-btn--round) svg {
		transition: none;
		transform: none;
	}
}

/*
 * CTA oku — tek bileşen.
 *
 * Anasayfadaki CTA'ların ok dili (sıkı viewBox'lı `caret-right`, 6.5 x 11
 * tasarım px, gövde 2.26, metinden sonra ~12.8 aralık, hover'da 5 birim sağa
 * kayma) buraya alındı; site genelindeki metinli CTA'lar aynı kuralı kullanır.
 * Ok `currentColor` ile çizildiği için siyah ve beyaz CTA ailelerinde metinle
 * aynı rengi miras alır — hover'da renk döndüğünde ok da döner.
 *
 * Hareket yalnız `transform` ile verilir: metin yerinden oynamaz, düğme
 * genişliği ve yüksekliği değişmez, düzen kayması olmaz.
 *
 * Aralık `:where()` ile yazıldığı için özgüllük `.dj-btn` düzeyinde kalır;
 * XD ölçüsü birebir tutturulmuş bölüm CTA'ları (anasayfa kartları, tanıtım
 * döşemeleri, servis ve haber düğmeleri) kendi aralık ve ok ölçülerini
 * korumaya devam eder.
 */
:where(.dj-btn, .dj-cta-wide):has(> .dj-btn__caret) {
	--dj-cta-gap: calc(12.8 * var(--dj-u));
}

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

@media (hover: hover) {
	:is(.dj-btn, .dj-cta-wide):hover .dj-btn__caret {
		transform: translateX(calc(5 * var(--dj-u)));
	}
}

:is(.dj-btn, .dj-cta-wide):focus-visible .dj-btn__caret,
:is(.dj-btn, .dj-cta-wide):active .dj-btn__caret {
	transform: translateX(calc(5 * var(--dj-u)));
}

/*
 * Tam genişlikteki CTA'da (sepet özeti, hesap formları) metin ve ok tek bir
 * ortalanmış grup olarak durur: ok metnin hemen yanındadır, düğmenin sağ
 * kenarına itilmez. Hizalama akışın kendisinden gelir — `margin-inline-start:
 * auto` ya da mutlak konum kullanılmaz, bu yüzden hover'da ok kayarken metin
 * ve kutu yerinden oynamaz.
 */
.dj-cta-wide:where(:has(> .dj-btn__caret)) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dj-cta-gap, var(--dj-space-8));
}

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

	:is(.dj-btn, .dj-cta-wide):hover .dj-btn__caret,
	:is(.dj-btn, .dj-cta-wide):focus-visible .dj-btn__caret,
	:is(.dj-btn, .dj-cta-wide):active .dj-btn__caret {
		transform: none;
	}
}

/*
 * Standart CTA (`.dj-cta`) — anasayfadaki "Tüm Klimalar ›" düğmesinin dili,
 * site genelinde tek bileşen: siyah pill, sağda ok; hover / odakta beyaz
 * zemin + siyah metin, ok 2 px ilerler. Kenarlık her durumda vardır; kutu
 * ölçüsü değişmez. `--outline` ikincil eylemdir (beyaz zemin), hover'da
 * aynı ters çevirme yapılır.
 *
 * Kullanım:
 *  - Tema işaretlemesi: `<a|button class="dj-cta">Metin <?php dijitsu_cta_caret(); ?></a>`
 *  - Elementor "Düğme" widget'ı: CSS sınıfları alanına `dj-cta` (ok, aynı
 *    ok çiziminden maske olarak eklenir).
 */
:is(a.dj-cta, button.dj-cta, .dj-cta .elementor-button) {
	--dj-cta-bg: var(--dj-ink);
	--dj-cta-fg: var(--dj-white);
	--dj-cta-border: var(--dj-ink);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(12.8 * var(--dj-u));
	min-height: var(--dj-button-height-sm);
	padding: 0 calc(30 * var(--dj-u));
	border: 1px solid var(--dj-cta-border);
	border-radius: var(--dj-radius-pill);
	background: var(--dj-cta-bg);
	color: var(--dj-cta-fg);
	font-family: var(--dj-font);
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dj-transition), color var(--dj-transition), border-color var(--dj-transition);
}

:is(a.dj-cta--outline, button.dj-cta--outline, .dj-cta--outline .elementor-button) {
	--dj-cta-bg: var(--dj-white);
	--dj-cta-fg: var(--dj-ink);
	--dj-cta-border: var(--dj-line);
}

/*
 * İkincil CTA (`.dj-cta--secondary`): ana sayfadaki "Ürünleri Görüntüle"
 * dili — beyaz hap, siyah metin, sağda ok. Hover/odakta zemin değişmez;
 * çerçeve siyaha döner, ok 2 px ilerler (ok kayması ortak kuraldan).
 * Açık zeminde de görünsün diye çerçeve normalde açık gridir.
 */
:is(a.dj-cta--secondary, button.dj-cta--secondary, .dj-cta--secondary .elementor-button) {
	--dj-cta-bg: var(--dj-white);
	--dj-cta-fg: var(--dj-ink);
	--dj-cta-border: var(--dj-line-field);
}

/*
 * Elementor "Düğme" widget'ı: Elementor'un `frontend.css`'i
 * `.elementor-button:hover, :focus, :visited { color: #fff }` basar. Bu kural
 * yukarıdaki temel kuralla aynı özgüllükte (0,2,0) ve sonra yüklendiği için
 * kazanıyor, hover'da beyaz zemin üstünde beyaz metin bırakıyordu (ör.
 * Servis Noktaları "Hazır mısınız?" satırı). Metin rengi her durumda
 * CTA'nın kendi değişkeninden gelir.
 */
.dj-cta .elementor-button:is(:hover, :focus, :focus-visible, :visited, :active) {
	color: var(--dj-cta-fg);
}

/*
 * Koyu zemin ikincil CTA (`.dj-cta--ghost`): beyaz çerçeve + beyaz metin,
 * hover/odakta beyaz dolgu + siyah metin. Koyu panellerde (servis videosu).
 */
:is(a.dj-cta--ghost, button.dj-cta--ghost, .dj-cta--ghost .elementor-button) {
	--dj-cta-bg: transparent;
	--dj-cta-fg: var(--dj-white);
	--dj-cta-border: var(--dj-white);
}

/*
 * Küçük CTA (`.dj-cta--sm`): liste satırları gibi dar yerler için; renk
 * varyantlarıyla (`--secondary` vb.) birlikte kullanılır. Seçici temel
 * kuralın özgüllüğünü (`.dj-cta .elementor-button`) geçer.
 */
:is(a.dj-cta.dj-cta--sm, button.dj-cta.dj-cta--sm) {
	gap: 8px;
	min-height: max(36px, calc(40 * var(--dj-u)));
	padding: 0 max(14px, calc(18 * var(--dj-u)));
	font-size: var(--dj-fs-14);
}

/* Ok: tema işaretlemesinde SVG, Elementor düğmesinde aynı çizim maske olarak. */
:is(a.dj-cta, button.dj-cta) > svg,
.dj-cta .elementor-button::after {
	flex: 0 0 auto;
	width: calc(6.2 * var(--dj-u));
	min-width: 5px;
	height: calc(10.8 * var(--dj-u));
	min-height: 9px;
	stroke-width: 2.26;
	transition: transform var(--dj-transition);
}

.dj-cta .elementor-button::after {
	content: "";
	background: currentColor;
	-webkit-mask: var(--dj-cta-caret-mask) center / contain no-repeat;
	mask: var(--dj-cta-caret-mask) center / contain no-repeat;
}

.dj-cta .elementor-button-content-wrapper {
	display: contents;
}

@media (hover: hover) {
	:is(a.dj-cta, button.dj-cta, .dj-cta .elementor-button):hover {
		--dj-cta-bg: var(--dj-white);
		--dj-cta-fg: var(--dj-ink);
		--dj-cta-border: var(--dj-ink);
	}

	:is(a.dj-cta--outline, button.dj-cta--outline, .dj-cta--outline .elementor-button):hover {
		--dj-cta-bg: var(--dj-ink);
		--dj-cta-fg: var(--dj-white);
	}

	:is(a.dj-cta--ghost, button.dj-cta--ghost, .dj-cta--ghost .elementor-button):hover {
		--dj-cta-bg: var(--dj-white);
		--dj-cta-fg: var(--dj-ink);
		--dj-cta-border: var(--dj-white);
	}

	:is(a.dj-cta--secondary, button.dj-cta--secondary, .dj-cta--secondary .elementor-button):hover {
		--dj-cta-bg: var(--dj-white);
		--dj-cta-fg: var(--dj-ink);
		--dj-cta-border: var(--dj-ink);
	}

	:is(a.dj-cta, button.dj-cta):hover > svg,
	.dj-cta .elementor-button:hover::after {
		transform: translateX(2px);
	}
}

:is(a.dj-cta, button.dj-cta, .dj-cta .elementor-button):focus-visible {
	--dj-cta-bg: var(--dj-white);
	--dj-cta-fg: var(--dj-ink);
	--dj-cta-border: var(--dj-ink);

	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

:is(a.dj-cta, button.dj-cta):focus-visible > svg,
.dj-cta .elementor-button:focus-visible::after {
	transform: translateX(2px);
}

:is(a.dj-cta, button.dj-cta):disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
	:is(a.dj-cta, button.dj-cta) > svg,
	.dj-cta .elementor-button::after {
		transition: none;
		transform: none;
	}
}

.dj-btn--block {
	width: 100%;
}

.dj-btn[disabled],
.dj-btn.disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* Yuvarlak ikon butonu */
.dj-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dj-button-height);
	height: var(--dj-button-height);
	flex: 0 0 auto;
	border-radius: 50%;
	border: 1px solid var(--dj-line);
	background: var(--dj-white);
	color: var(--dj-ink);
	transition: border-color var(--dj-transition), background-color var(--dj-transition);
}

.dj-icon-btn:hover {
	border-color: var(--dj-ink);
	color: var(--dj-ink);
}

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

/* --- Form öğeleri --- */

.dj-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

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

.dj-input,
.dj-select {
	height: calc(59 * var(--dj-u));
	padding: 0 calc(20 * var(--dj-u));
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-pill);
	background: var(--dj-white);
	font-size: var(--dj-fs-16);
	width: 100%;
	transition: border-color var(--dj-transition);
}

.dj-input:hover,
.dj-select:hover {
	border-color: var(--dj-gray-400);
}

.dj-select {
	appearance: none;
	padding-inline-end: calc(46 * var(--dj-u));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101213' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 18px;
	cursor: pointer;
}

/* --- Rozetler --- */

/*
 * İndirim rozeti: hover'da görünüm değişmez (tasarım revizyonu). Genişlik
 * içeriğe göredir: tasarım ölçüsü (85u) alt sınırdır; dar ekranda 14 px
 * "İNDİRİM" etiketi kutudan geniş kalırsa kutu etiketin iç boşluğuyla büyür
 * (önceden sabit genişlikte "İNDİR" diye kırpılıyordu).
 */
.dj-badge-discount {
	display: inline-flex;
	flex-direction: column;
	min-width: calc(85 * var(--dj-u));
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--dj-red);
	background: var(--dj-white);
	text-align: center;
	line-height: 1;
	flex: 0 0 auto;
}

.dj-badge-discount__label {
	background: var(--dj-red);
	color: var(--dj-white);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-bold);
	padding: calc(8 * var(--dj-u)) 6px 7px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.dj-badge-discount__value {
	color: var(--dj-red);
	font-size: var(--dj-fs-24);
	font-weight: var(--dj-fw-extrabold);
	padding: calc(10 * var(--dj-u)) 4px calc(11 * var(--dj-u));
}

/*
 * Onaylı tasarım (PDF, kart-göreli): pill 89.4 x 40, yıldız çizimi 23.0 x 22.0,
 * yıldız–sayı aralığı 6.0, sol iç boşluk 12.95, sağ iç boşluk 10.95,
 * sayı 18 px rgb(102,102,102). Yıldız XD `Path 3499`'un kendisidir.
 */
.dj-badge-rating {
	display: inline-flex;
	align-items: center;
	gap: calc(6 * var(--dj-u));
	height: calc(40 * var(--dj-u));
	padding-inline: calc(12.95 * var(--dj-u)) calc(10.95 * var(--dj-u));
	border-radius: var(--dj-radius-pill);
	background: var(--dj-white);
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-medium);
	color: var(--dj-gray-600);
	flex: 0 0 auto;
	transition: opacity var(--dj-transition), visibility var(--dj-transition);
}

.dj-badge-rating svg {
	width: calc(23.13 * var(--dj-u));
	height: calc(22 * var(--dj-u));
	color: var(--dj-star);
	flex: 0 0 auto;
}

/* --- Fiyat --- */

.dj-price {
	display: inline-flex;
	align-items: baseline;
	gap: var(--dj-space-8);
	flex-wrap: wrap;
}

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

.dj-price del,
.dj-price .dj-price__was {
	color: var(--dj-gray-400);
	font-weight: var(--dj-fw-semibold);
	text-decoration: line-through;
}

/* --- Yıldız --- */

.dj-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--dj-amber);
}

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

.dj-stars .dj-stars__empty {
	color: var(--dj-line);
}

/* --- Yatay taşma koruması --- */

.dj-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------------ */
/* Genel içerik                                                        */
/* ------------------------------------------------------------------ */

.dj-main {
	min-height: 40vh;
}

/*
 * Yol izi site genelinde tek standarttır: aynı bileşen, aynı tokenlar, aynı
 * dikey ritim — şablon başına yama yok.
 *
 * `--dj-breadcrumb-top` başlıktan yol izine olan mesafedir. Yol izi sayfanın
 * en üstündeki ilk içerik olduğu için bu boşluğu şablonun kendi bölüm boşluğu
 * değil, yol izinin kabı kurar (aşağıdaki iki kural). Böylece katalog, ürün,
 * sayfa, Hesabım ve WooCommerce uç noktaları aynı mesafeyi paylaşır.
 *
 * Punto sabittir (13 px): `--dj-u` ile küçülmez, dar ekranda da okunur kalır;
 * yatay daralmayı kap sistemi kendisi yapar.
 */
.dj-breadcrumb {
	--dj-breadcrumb-top: 30px;
	--dj-breadcrumb-size: var(--dj-fs-14); /* yardımcı metin tabanı */

	font-size: var(--dj-breadcrumb-size);
	color: var(--dj-gray-400);
	margin-bottom: var(--dj-space-24);
}

/*
 * Yol izini taşıyan kap üst boşluğu kurar; onun üstündeki sarmalayıcılar
 * (ve `.dj-main`) kendi üst bölüm boşluklarını bu sayfalarda bırakır.
 * Kurallar şablon adı içermez: hedef, “yol izini taşıyan kap” tanımıdır.
 */
.dj-main:has(.dj-container > .dj-breadcrumb),
.dj-main :has(.dj-container > .dj-breadcrumb) {
	padding-block-start: 0;
}

.dj-main .dj-container:has(> .dj-breadcrumb) {
	padding-block-start: var(--dj-breadcrumb-top, 30px);
}

.dj-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(8 * var(--dj-u));
	list-style: none;
	margin: 0;
	padding: 0;
}

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

/*
 * Ayraç her zaman sessiz kalır: rengi `currentColor`'dan değil, yol izinin
 * kendi muted tonundan alır. Aksi hâlde son kırıntı koyulaştığında ondan önceki
 * ayraç da koyulaşıyordu.
 */
.dj-breadcrumb li:not(:first-child)::before {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 1.5px solid var(--dj-gray-400);
	border-inline-end: 1.5px solid var(--dj-gray-400);
	transform: rotate(45deg);
	opacity: 0.8;
}

/* Sağdan sola dizilimde ok ters yöne bakar. */
[dir="rtl"] .dj-breadcrumb li:not(:first-child)::before {
	transform: rotate(-135deg);
}

.dj-breadcrumb a {
	color: var(--dj-gray-400);
}

.dj-breadcrumb a:hover {
	color: var(--dj-ink);
}

/* Bağlantısız ara kırıntı (başlık tutucu üst sayfa): bağlantılarla aynı ton. */
.dj-breadcrumb .dj-breadcrumb__text {
	color: var(--dj-gray-400);
}

/*
 * Bulunulan sayfa koyu, öncekiler muted. Kural `<li>`'nin kendisine bağlanır:
 * tema kendi yol izinde son kırıntıyı `<span aria-current="page">` ile sarar,
 * WooCommerce ise düz metin basar — eski seçici (`li:last-child span`) bu
 * yüzden WooCommerce sayfalarında hiç eşleşmiyor, bulunulan sayfa da muted
 * kalıyordu. Ağırlık değişmez (400): yol izi başlık gibi görünmez.
 */
.dj-breadcrumb li:last-child {
	color: var(--dj-ink);
}

/*
 * Elementor "Yol İzi" widget'ı: aynı bileşen, başlık bandında kullanılır.
 * Bant kendi aralıklarını yönettiği için alt boşluk sıfırdır.
 */
.dj-breadcrumb-widget .dj-breadcrumb {
	margin-bottom: 0;
}

.dj-breadcrumb-widget--center .dj-breadcrumb ol {
	justify-content: center;
}

.dj-page-heading {
	margin-bottom: var(--dj-space-40);
}

.dj-page-heading h1 {
	font-size: var(--dj-fs-42);
}

.dj-page-heading__lead {
	color: var(--dj-muted);
	margin-top: var(--dj-space-12);
}

.dj-entry__title {
	font-size: var(--dj-fs-42);
	margin-bottom: var(--dj-space-16);
}

.dj-entry__meta {
	display: flex;
	gap: var(--dj-space-16);
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
}

.dj-entry__media {
	margin: var(--dj-space-30) 0;
	border-radius: var(--dj-radius-lg);
	overflow: hidden;
}

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

.dj-entry__content h2 { font-size: var(--dj-fs-32); margin: 1.4em 0 0.5em; }
.dj-entry__content h3 { font-size: var(--dj-fs-24); margin: 1.3em 0 0.5em; }
.dj-entry__content ul,
.dj-entry__content ol { padding-inline-start: 1.4em; margin-bottom: 1em; }
.dj-entry__content li { margin-bottom: 0.4em; }
.dj-entry__content img { border-radius: var(--dj-radius-md); }
.dj-entry__content a { text-decoration: underline; text-underline-offset: 3px; }

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

/*
 * Kart üç satırlık sabit bir ızgaradır: GÖRSEL / BAŞLIK / META. Başlık satırı
 * esner, meta satırı kartın altına sabitlenir; böylece başlık 1, 2 ya da 3
 * satır olsa da üç kartta meta aynı hizada kalır.
 */
.dj-post-card {
	/*
	 * Kategori etiketi kartın kendi katmanıdır (görsel kutusunun içinde
	 * değil); konumu bu kutuya göre hesaplanır. Görsel kutusu kartın üst
	 * kenarından başladığı için tasarımdaki yer değişmez.
	 */
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100%;
}

/*
 * XD: haber kartı görseli 536.7 × 580, köşe 16. Tek kırpma katmanı vardır —
 * çerçeve, iç boşluk ya da zemin yok; görsel kutuyu doldurur. Varlığın
 * en-boy oranı kutuyla aynı (1073 × 1160 ↔ 537 × 580) olduğu için `cover`
 * hiçbir şeyi kırpmaz, kompozisyon varlıktaki gibi görünür.
 */
.dj-post-card__media {
	position: relative;
	border-radius: var(--dj-radius-md);
	overflow: hidden;
	aspect-ratio: var(--dj-news-img-ratio);
	/* XD: görsel altı 5849, başlık üstü 5886 → 37. */
	margin-bottom: calc(37 * var(--dj-u));
}

.dj-post-card__media-link {
	display: block;
	position: absolute;
	inset: 0;
}

/*
 * Hover'da yalnız görsel optik olarak büyür; kırpma penceresi (sarmalayıcı)
 * ve kart ölçüsü değişmez. Ölçek 1.03 — üç karttaki ürünlerin baş/alt
 * boşluğu kırpılmayacak kadar küçük.
 */
.dj-post-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1);
	transform-origin: center;
	transition: transform 250ms ease;
}

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

/*
 * Klavye odağı da aynı durumu gösterir. `:focus-within` yerine
 * `:has(:focus-visible)` kullanılır: dokunmatikte dokunulan bağlantı odakta
 * kaldığı için `:focus-within` büyütmeyi ekranda asılı bırakıyordu.
 */
.dj-post-card:has(:focus-visible) .dj-post-card__media img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.dj-post-card__media img,
	.dj-post-card:hover .dj-post-card__media img,
	.dj-post-card:has(:focus-visible) .dj-post-card__media img {
		transform: none;
		transition: none;
	}
}

/*
 * XD Rectangle 581: 160 × 50, köşe 25, beyaz; metin SemiBold 18
 * rgb(113,113,122). Etiket dekoratif değil, gerçek kategori arşivi
 * bağlantısıdır: görselin üstünde kendi katmanında durur, görsel
 * büyürken ölçülmez ve kımıldamaz.
 */
.dj-post-card__tag {
	position: absolute;
	z-index: 1;
	top: calc(30 * var(--dj-u));
	inset-inline-start: calc(30 * var(--dj-u));
	display: inline-flex;
	align-items: center;
	min-height: calc(50 * var(--dj-u));
	background: var(--dj-white);
	color: var(--dj-muted);
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
	padding: 0 calc(22.5 * var(--dj-u));
	border-radius: var(--dj-radius-pill);
	transition: background-color 190ms ease, color 190ms ease;
}

/* Kategori bağlantısı olduğunu net anlatan durum; ölçü değişmez. */
@media (hover: hover) {
	.dj-post-card__tag:hover {
		background: var(--dj-ink);
		color: var(--dj-white);
	}
}

.dj-post-card__tag:focus-visible {
	background: var(--dj-ink);
	color: var(--dj-white);
	outline: 2px solid var(--dj-white);
	outline-offset: -4px;
}

.dj-post-card__title {
	font-size: var(--dj-fs-36);
	font-weight: var(--dj-fw-bold);
	line-height: 1.278; /* XD 46/36 */
	/* XD: başlığın son satır tabanı ile meta tabanı arası 44. */
	margin-bottom: calc(9.5 * var(--dj-u));
	color: var(--dj-ink);
}

/*
 * Başlık gerçek kalıcı bağlantıdır ama görsel etkileşimi yoktur: hover'da da
 * odakta da siyah ve çizgisiz kalır — tasarımdaki başlık kimliği hiç
 * değişmez. Kullanıcı etkileşimi görselin büyümesinden ve kategori
 * etiketinin durumundan anlar. Klavye için yalnız kontrollü bir odak
 * halkası vardır; alt çizgi kullanılmaz.
 */
.dj-post-card__title-link {
	color: inherit;
	text-decoration: none;
}

.dj-post-card:hover .dj-post-card__title-link,
.dj-post-card__title-link:hover {
	color: var(--dj-ink);
	text-decoration: none;
}

.dj-post-card__title-link:focus-visible {
	color: var(--dj-ink);
	text-decoration: none;
	outline: 2px solid var(--dj-focus);
	outline-offset: 4px;
}

/*
 * XD: “Admin” Medium 18, tarih Regular 18 — ikisi de rgb(16,18,19);
 * aradaki boşluk 21.5.
 */
.dj-post-card__meta {
	display: flex;
	gap: calc(21.5 * var(--dj-u));
	font-size: var(--dj-fs-18);
	color: var(--dj-ink);
	margin: 0;
	align-self: end;
}

.dj-post-card__meta span:first-child {
	font-weight: var(--dj-fw-medium);
	color: var(--dj-ink);
}

/* Sayfalama */

/*
 * Dairesel, çerçevesiz sayfalama.
 *
 * Bütün denetimler aynı daire: geçerli sayfa siyah zemin + beyaz rakam, diğer
 * sayfalar ve ok çok açık nötr zemin + siyah içerik. Hap/çerçeve biçimi
 * kaldırıldı; rakam uzunluğu daireyi genişletmesin diye kutu ölçüsü sabit.
 *
 * WooCommerce'in kendi `nav … ul li a` kuralları eleman seçicileriyle daha
 * ağır bastığı için seçiciler sınıf sayısıyla dengelendi — `!important`
 * kullanılmıyor.
 */
.dj-pagination,
.woocommerce-pagination {
	--dj-page-dot: max(40px, calc(48 * var(--dj-u)));
	--dj-page-gap: max(8px, calc(12 * var(--dj-u)));

	/*
	 * Listeyle hizmet bandı arasında dengeli duruş: üstte bu boşluk, altta
	 * bandın kendi 100'ü. Arşiv sarmalayıcısının fazladan alt dolgusu
	 * kaldırıldığı için ikisi birbirine yakın kalır.
	 */
	margin-block: var(--dj-space-80) 0;
}

.dj-pagination .nav-links,
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--dj-page-gap);
	list-style: none;
	border: 0;
	margin: 0;
	padding: 0;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li,
.woocommerce-pagination ul.page-numbers li {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
}

.dj-pagination .nav-links :is(a, span).page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers li :is(a, span).page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--dj-page-dot);
	min-width: var(--dj-page-dot);
	height: var(--dj-page-dot);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dj-surface);
	color: var(--dj-ink);
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-medium);
	line-height: 1;
	transition: background-color var(--dj-transition), color var(--dj-transition);
}

@media (hover: hover) {
	.dj-pagination .nav-links a.page-numbers:hover,
	.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
		background: var(--dj-line);
		color: var(--dj-ink);
	}
}

.dj-pagination .nav-links :is(a, span).page-numbers:focus-visible,
.woocommerce nav.woocommerce-pagination ul.page-numbers li :is(a, span).page-numbers:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

.dj-pagination .nav-links :is(a, span).page-numbers.current,
.woocommerce nav.woocommerce-pagination ul.page-numbers li :is(a, span).page-numbers.current {
	background: var(--dj-ink);
	color: var(--dj-white);
}

/* Üç nokta bir düğme değil; dairesi olmaz. */
.dj-pagination .nav-links .page-numbers.dots,
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.dots {
	background: none;
	color: var(--dj-muted);
}

.dj-pagination svg,
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers svg {
	width: calc(var(--dj-page-dot) * 0.2);
	height: calc(var(--dj-page-dot) * 0.34);
}

/* 404 */

.dj-404 {
	text-align: center;
	max-width: calc(640 * var(--dj-u));
	margin-inline: auto;
}

.dj-404 h1 {
	font-size: var(--dj-fs-42);
	margin-bottom: var(--dj-space-16);
}

.dj-404__actions {
	display: flex;
	justify-content: center;
	gap: var(--dj-space-16);
	flex-wrap: wrap;
	margin-block: var(--dj-space-30);
}

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

.dj-empty {
	color: var(--dj-muted);
	padding-block: var(--dj-space-40);
}

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

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

/* ------------------------------------------------------------------ */
/* İki yönlü metin (bidi) yalıtımı                                     */
/*                                                                     */
/* Fiyat, ölçü ve kod gibi değerler sağdan sola bir cümlenin içinde     */
/* yer aldığında tarayıcı nötr karakterleri (nokta, virgül, tire, para  */
/* birimi) yeniden sıralar ve "18.400,00 TL" ters görünür. Bu öğeler    */
/* kendi yön bağlamlarında yalıtılır.                                   */
/* ------------------------------------------------------------------ */

.dj-price,
.dj-price *,
.woocommerce-Price-amount,
.dj-summary__ean,
.dj-summary__model,
.dj-summary__stock,
.dj-specs__value,
.dj-compare__table td,
.dj-badge-rating,
.dj-badge-discount__value,
.dj-toolbar__count,
.dj-hotline__number,
.stock {
	unicode-bidi: isolate;
}

/* Yalnız sayıdan oluşan değerler her zaman soldan sağa okunur. */
.dj-price,
.woocommerce-Price-amount,
.dj-hotline__number,
.dj-badge-discount__value {
	direction: ltr;
}

[dir="rtl"] .dj-price,
[dir="rtl"] .woocommerce-Price-amount,
[dir="rtl"] .dj-hotline__number {
	text-align: end;
}

/* ------------------------------------------------------------------ */
/* Elementor uyumu                                                     */
/* ------------------------------------------------------------------ */

/*
 * Dijitsu bölümleri kendi `.dj-container` genişliğini ve boşluklarını yönetir;
 * Elementor'un widget kenar boşlukları bu bölümlerde devre dışı bırakılır.
 */
.elementor-widget[class*="elementor-widget-dijitsu-"] > .elementor-widget-container {
	margin: 0;
	padding: 0;
}

/*
 * Elementor kabı sitenin kap sınıfını taşıdığında (Gelişmiş → CSS
 * sınıfları: `dj-container`) genişlik, ortalama ve yan boşluk site kabıyla
 * aynı olur. Elementor'un `.e-con` kuralı yatay pay ve dış boşluğu kendi
 * değişkenlerinden, sayfanın en dış kabına ise `max-width` değerini
 * `[data-elementor-id] > .e-con` ile verdiği için bu kurallar aynı
 * kademede yazılır; dikey boşluklar Elementor ayarlarında kalır.
 */
.e-con.dj-container,
[data-elementor-id] > .e-con.dj-container {
	max-width: calc(var(--dj-container) + (var(--dj-page-padding) * 2));
	margin-inline: auto;
	padding-inline: var(--dj-page-padding);
}

/*
 * Kimlikli Elementor bölümleri (ör. `/kurumsal/#amacimiz`) bağlantıyla
 * açıldığında üst kenarı yapışkan başlığın hemen altına oturur. Masaüstünde
 * başlık yapışkan değildir; orada yalnız yönetim çubuğu payı kalır.
 */
.e-con[id] {
	scroll-margin-top: var(--dj-sticky-header-offset, var(--dj-adminbar-offset, 0px));
}

/*
 * Elementor'un `.elementor img { height: auto }` kuralı, tema bileşenlerinde
 * görsel kutusunu taşırıyor. Aşağıdaki seçiciler bileşenlerin kendi ölçüsünü
 * geri kazandırır; değerler tema CSS'indeki asıl kurallarla aynıdır.
 */
.elementor .dj-promo__foreground img,
.elementor .dj-tile__media:not(.dj-tile__media--contain-tall) img,
.elementor .dj-post-card__media img,
.elementor .dj-gallery__thumb img,
.elementor img.dj-service__video {
	height: 100%;
}

/*
 * Ürün kartı görseli ayrı tutulur: kutusunun yüksekliği sahnenin tamamı
 * değil `--dj-card-image-height` kadarıdır. Grup kuralındaki `height: 100%`
 * bunu yok sayıyor, görsel sahnenin dışına taşıyordu. Değer `product.css`
 * içindeki asıl kuralın birebir aynısıdır.
 */
.elementor .dj-card__media img {
	height: calc(var(--dj-card-image-height) - var(--dj-card-image-lift));
}

/*
 * Kırpma çerçevesindeki görsel kendi çizim genişliğini kullanır; Elementor'un
 * `max-width: 100%` kuralı çerçeveyi bozuyordu.
 */
.elementor .dj-cat-card__media .dj-media-frame img {
	width: calc(var(--dj-frame-iw) * var(--dj-u));
	height: auto;
	max-width: none;
	max-height: none;
}

/*
 * Kategori kartı ürün görseli: dört ürün ortak vitrin kutusuna (XD ölçümü
 * 320 × 286) göre `contain` edilir. Elementor'un `.elementor img` kuralı tema
 * CSS'inden sonra yüklendiği ve aynı özgüllükte olduğu için kutu ölçüsünü
 * `max-width: 100%` ile eziyordu; kutu burada geri kazandırılır. Diğer
 * bileşenlerin `height: 100%` davranışı korunur, kart bundan ayrılır.
 */
/*
 * TV promo fotoğrafı katmanlı kompozisyonun parçasıdır: kendi kutusundan
 * taşacak biçimde konumlanır ve görünür pencere tarafından kırpılır.
 * Elementor'un `max-width: 100%` / `height: 100%` kuralları bu taşmayı
 * eziyordu; ölçüler burada geri kazandırılır. Yalnız ön plan katmanı olan
 * (katmanlı) panelde geçerlidir; katmansız görsel kutusuna sığar (home.css).
 */
@media (min-width: 1024px) {
	.elementor .dj-promo__panel--layered .dj-promo__media img {
		width: 107.7%;
		height: 121.63%;
		max-width: none;
	}
}

.elementor .dj-cat-card__media img {
	width: auto;
	height: auto;
	max-width: calc(320 * var(--dj-u));
	max-height: calc(286 * var(--dj-u));
}

/*
 * Hero görseli XD pattern yerleşimini kullanır (tuvalden geniş).
 * Elementor'un `max-width: 100%` kuralı bu taşmayı kırpıyordu.
 */
.elementor .dj-hero__image {
	width: 124.19%;
	height: auto;
	max-width: none;
}

/* Düzenleyicide içeriği olmayan bölüm için bilgi notu. */
.dj-elementor-empty {
	padding: var(--dj-space-40);
	border: 1px dashed var(--dj-line);
	border-radius: var(--dj-radius-md);
	color: var(--dj-muted);
	text-align: center;
	font-size: var(--dj-fs-14);
}

/* ------------------------------------------------------------------ */
/* Yardımcı sayfa ritmi                                                */
/* ------------------------------------------------------------------ */

/*
 * Favoriler, Karşılaştır, Sepet ve Hesabım aynı kabuğu paylaşır: kırıntı
 * yolu (`margin-bottom` her dördünde aynı) ve ardından gelen ilk içerik
 * bloğu. Blokların kendi üst payları farklı olduğu için içerik başlangıçları
 * 48–78 px arasında değişiyordu; burada tek bir token'a bağlanır.
 *
 * Seçici bileşen kurallarından bir kademe güçlüdür, bu yüzden dosya sırası
 * önemli değildir.
 */
:is(
	.dj-wishlist-empty:not(.dj-wishlist-empty--compact),
	.dj-cart-empty--page,
	.dj-compare__empty,
	.dj-account-auth,
	.dj-checkout-shell
) {
	margin-block-start: 0;
	padding-block-start: var(--dj-utility-content-gap);
}

/* Favoriler boşken sarmalayıcının kendi üst payı ritmi ikiye katlıyordu. */
.dj-wishlist-page:has(> .dj-wishlist-empty) {
	margin-block-start: 0;
}


/* ------------------------------------------------------------------ */
/* Site parçaları (Elementor şablonundan basılan başlık / alt bilgi)   */
/* ------------------------------------------------------------------ */

/*
 * Elementor şablonu kendi sarmalayıcılarıyla gelir (belge, kapsayıcı,
 * widget kutuları). Bunlar düzen dışı bırakılır: başlığın yapışkan konumu,
 * şeffaf başlığın hero üstündeki yeri ve sayfa ızgarası tema işaretlemesiyle
 * birebir aynı çalışır. Düzenleyicide (şablonun kendi sayfası) bu sarmalayıcı
 * basılmadığı için Elementor'un düzenleme kutuları etkilenmez.
 */
.dj-site-part,
.dj-site-part .elementor,
.dj-site-part .e-con,
.dj-site-part .e-con-inner,
.dj-site-part .elementor-section,
.dj-site-part .elementor-container,
.dj-site-part .elementor-column,
.dj-site-part .elementor-widget-wrap,
.dj-site-part .elementor-element,
.dj-site-part .elementor-widget-container {
	display: contents;
}

/* ------------------------------------------------------------------ */
/* İçerik sayfaları (Elementor): başlık bandı ve metin öğeleri         */
/* ------------------------------------------------------------------ */

/*
 * Elementor "Başlık" widget'ı tema başlık sınıfını (ör. `dj-section-title`)
 * taşıdığında sınıf widget kabına yazılır; içteki başlık öğesi ölçüyü,
 * rengi ve hizayı kaptan alır. Harf aralığı temanın h1–h6 kuralıyla aynıdır.
 */
.elementor-widget-heading.dj-section-title .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: -0.01em;
}

/* Başlık bandı: açıklama `.dj-section-lead`, yol izi `.dj-breadcrumb-widget`. */

/* Bant alt başlığı gövde metninden küçük olmaz: 1440'ta en az 16 px, 1920'de 20. */
.dj-page-band__lead {
	font-size: max(1rem, var(--dj-fs-20));
}

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

/*
 * Yol izli bant: H1 her sayfada aynı yükseklikte başlar, yol izi bandın
 * altına oturur. Bant yüksekliği başlık + açıklama + yol izine göre sabit
 * olduğundan açıklaması olmayan sayfada (ör. yasal metinler) içerik
 * ortalanıp H1 ve yol izi kaymıyor; boşluk başlık ile yol izi arasında
 * kalır. Açıklamalı bantta serbest alan tam `--dj-space-20`dir, görünüm
 * değişmez. Yol izi olmayan bantlar (ör. Kurumsal "Amacımız") ortalı kalır.
 */
.e-con.dj-page-band:has(> .elementor-widget.dj-page-band__crumb) {
	justify-content: flex-start;
}

.e-con.dj-page-band > .elementor-widget.dj-page-band__crumb {
	margin-block-start: auto;
	padding-block-start: var(--dj-space-20);
}

/*
 * Tema şablonlarındaki başlık bandı (`dijitsu_page_band()`): Elementor
 * "Başlık bandı" kabının ayarlarıyla birebir — yatay beyaz → tile → beyaz
 * gradient (zemin + örtü katmanı), aynı iç boşluk ve aynı yükseklik
 * formülü (başlık + açıklama + yol izi). Tablette 220u, mobilde içeriğe
 * göre. Yol izi bandın altına yaslıdır (yukarıdaki Elementor kuralıyla
 * aynı davranış).
 */
/*
 * Bant yüksekliği (başlık + alt başlık + yol izi + iç boşluk) tek değişken:
 * tema bandı ve bandın altında hesap yapan bileşenler (haber manşetinin ilk
 * ekran yüksekliği) aynı değeri okur. Alt başlık en az 16 px, yol izi 14 px
 * (tipografi tabanları); 1280 / 1440 / 1920'de ölçülen 158 / 167 / 213 px.
 */
:root {
	--dj-page-band-h: calc(
		2 * var(--dj-space-30) + var(--dj-fs-52) * var(--dj-lh-tight) + var(--dj-space-20)
		+ max(1rem, var(--dj-fs-20)) * var(--dj-lh-normal) + var(--dj-space-20) + var(--dj-fs-14) * var(--dj-lh-normal)
	);
}

@media (max-width: 1024px) {
	:root {
		--dj-page-band-h: calc(220 * var(--dj-ut));
	}
}

.dj-page-band--theme {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: var(--dj-page-band-h);
	padding: var(--dj-space-30) var(--dj-page-padding);
	background-image: linear-gradient(90deg, var(--dj-white) 0%, var(--dj-surface-tile) 50%);
}

.dj-page-band--theme::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(90deg, transparent 50%, var(--dj-white) 100%);
	pointer-events: none;
}

.dj-page-band--theme > * {
	position: relative;
	margin-block: 0;
}

.dj-page-band--theme > .dj-page-band__lead {
	margin-block-start: var(--dj-space-20);
}

.dj-page-band--theme > .dj-page-band__crumb {
	margin-block-start: auto;
	padding-block-start: var(--dj-space-20);
}

/* Bant → içerik: Elementor sayfalarındaki "İçerik" kabının üst boşluğu. */
.dj-main .dj-section--after-band {
	padding-block-start: var(--dj-space-50);
}

@media (max-width: 1024px) {
	.dj-page-band--theme {
		padding-block: var(--dj-space-40);
	}
}

@media (max-width: 767px) {
	.dj-page-band--theme {
		min-height: 0;
		padding-block: var(--dj-space-40) var(--dj-space-24);
	}

	.dj-page-band--theme > .dj-page-band__lead {
		margin-block-start: var(--dj-space-12);
	}

	.dj-page-band--theme > .dj-page-band__crumb {
		margin-block-start: var(--dj-space-16);
		padding-block-start: 0;
	}

	.dj-main .dj-section--after-band {
		padding-block-start: var(--dj-space-40);
	}
}

/*
 * Metin öğeleri. Öğeler arası boşluk (lead → metin 20 · metin → soru/kapanış
 * 30 · kapanış → imza 12) Elementor'da widget'ın alt boşluğudur; paragraflar
 * arası 16 burada.
 */
.dj-page-lead {
	font-size: var(--dj-fs-24);
	font-weight: var(--dj-fw-semibold);
	line-height: var(--dj-lh-snug);
	color: var(--dj-ink);
}

.dj-page-text {
	font-size: var(--dj-fs-body);
	line-height: var(--dj-lh-relaxed);
	color: var(--dj-ink);
}

.dj-page-text p {
	margin: 0 0 var(--dj-space-16);
}

.dj-page-text p:last-child,
.dj-page-lead p:last-child,
.dj-page-question p:last-child,
.dj-page-closing p:last-child,
.dj-page-signature p:last-child {
	margin-bottom: 0;
}

.dj-page-question {
	font-size: var(--dj-fs-32);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-snug);
	color: var(--dj-ink);
}

.dj-page-closing {
	font-size: var(--dj-fs-body);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-relaxed);
	color: var(--dj-ink);
}

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

@media (max-width: 1023px) {
	.dj-page-lead {
		font-size: var(--dj-fs-22);
	}

	.dj-page-question {
		font-size: var(--dj-fs-28);
	}
}

@media (max-width: 767px) {
	.dj-page-band__lead {
		margin-block-start: var(--dj-space-12);
		font-size: var(--dj-fs-16);
	}

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

	/*
	 * Mobilde bant içeriğe göre uzar (sabit yükseklik yok, bkz. Elementor
	 * "Başlık bandı" kabı): yol izi bandın altına itilmez, alt başlıktan
	 * (yoksa başlıktan) sabit `--dj-space-16` sonra gelir.
	 */
	.e-con.dj-page-band > .elementor-widget.dj-page-band__crumb {
		margin-block-start: var(--dj-space-16);
		padding-block-start: 0;
	}

	.dj-page-lead {
		font-size: var(--dj-fs-20);
	}

	.dj-page-text,
	.dj-page-closing {
		font-size: var(--dj-fs-16);
	}

	.dj-page-question {
		font-size: var(--dj-fs-24);
	}
}