/* Site başlığı: üst şerit, ana gezinme, arama ve çekmeceler. */

/*
 * WordPress yönetim çubuğu (giriş yapmış kullanıcı). Çekirdek, çubuk
 * yüklüyken `html` üzerinde `--wp-admin--admin-bar--height` tanımlar
 * (32 px; ≤782 px'te 46 px) ve belgeyi o kadar aşağı iter. Konumlanmış
 * başlık bu değeri okumazsa üst şerit çubuğun altında kalır. Çubuk yoksa
 * değişken tanımsızdır ve değer 0 olur; ziyaretçi görünümü değişmez.
 *
 * `--dj-adminbar-offset` yapışan/sabit öğeler içindir: ≤600 px'te çekirdek
 * çubuğu `position: absolute` yapar (sayfayla kayar), orada pay 0'dır.
 */
:root {
	--dj-adminbar-height: var(--wp-admin--admin-bar--height, 0px);
	--dj-adminbar-offset: var(--dj-adminbar-height);
}

@media (max-width: 600px) {
	:root {
		--dj-adminbar-offset: 0px;
	}
}

/*
 * Mobil yüzey (sheet) dili. Dar ekranda açılan bütün paneller — gezinme,
 * filtre, favoriler, sepet — aynı dış boşluğu, genişliği, köşe yarıçapını,
 * gölgeyi ve güvenli üst payı paylaşır; gezinme ile filtrenin dış kutusu
 * birebir aynıdır. Hesap penceresi aynı çerçeveyi kullanır ama içeriği
 * kadar uzar ve dikeyde ortalanır (account.css). Panelin içeriği kendi
 * dosyasında kalır; burada yalnız ortak geometri ve çerçeve vardır.
 *
 * `--dj-sheet-safe-top`: yönetim çubuğunun panelin üstünü örttüğü pay.
 * Çubuk ≤600 px'te sayfayla kaydığı için pay sabit değildir; `main.js`
 * panel açılırken gerçek örtüşmeyi ölçüp bu değişkeni yazar. Betik
 * çalışmazsa çubuğun tam yüksekliği kullanılır ve panel yine kırpılmaz.
 */
:root {
	--dj-sheet-gap: 12px;
	--dj-sheet-radius: var(--dj-radius-lg);
	--dj-sheet-safe-top: var(--dj-adminbar-height);
}

.dj-header {
	position: relative;
	z-index: var(--dj-z-header);
	background: var(--dj-white);
}

/* Anasayfada başlık hero görselinin üzerine biner. */
.dj-header--transparent {
	position: absolute;
	inset-inline: 0;
	top: var(--dj-adminbar-height);
	background: transparent;
}

/* ------------------------------------------------------------------ */
/* Üst şerit                                                           */
/* ------------------------------------------------------------------ */

/*
 * İlk ekran kapsamı: 12–16 px okunabilirlik tabanı burada oranı bozuyor —
 * dar masaüstünde üst şerit metni (sabit 16) ana gezinmeden (ölçekli 15.3)
 * büyük kalıyordu. Üst şerit kendi puntolarını tasarım oranında kullanır.
 */
.dj-topbar {
	background: var(--dj-ink);
	color: var(--dj-white);
	font-size: calc(16 * var(--dj-u));
}

/*
 * Tetikleyiciler üst şeridin tam yüksekliğini kaplar. Böylece imleç
 * metinden aşağı inerken hover bölgesinden çıkmaz; açılır panel titremez.
 */
.dj-topbar__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: var(--dj-space-24);
	min-height: var(--dj-topbar-height);
}

.dj-topbar__side {
	display: flex;
	align-items: stretch;
	gap: var(--dj-space-24);
	min-width: 0;
}

/*
 * Öğe şeridin tam yüksekliğini kaplar (kesintisiz hover bölgesi) ama içindeki
 * bağlantı ile ok düğmesi birbirine baseline'dan hizalanır. Tek satırlık
 * sarmalayıcıda `align-content` satırı dikeyde ortalar; böylece hem hizalama
 * hem ortalama aynı anda sağlanır.
 */
.dj-menu--topbar > .dj-menu__item {
	display: flex;
	/*
	 * `wrap` dikey ortalama içindir (`align-content` yalnız sarmalı kapta
	 * çalışır). Alt menülü başlıkta etiket ve ok tek düğmede olduğundan
	 * (`.dj-menu__heading`) ok alt satıra düşemez.
	 */
	flex-wrap: wrap;
	align-items: baseline;
	align-content: center;
}

.dj-topbar__side--end {
	justify-content: flex-end;
}

.dj-menu--topbar {
	display: flex;
	align-items: stretch;
	/* XD: “Kurumsal” 105–176, “İletişim” 206 → aralık 30. */
	gap: var(--dj-space-30);
	list-style: none;
}

/*
 * Caret hizası: XD'de ok gövdesinin ALTI metin baseline'ına oturuyor
 * (nav 20pt'de 1.3 üstünde, topbar 16pt'de 0.7 altında). `align-items:center`
 * oku em kutusunun ortasına koyduğu için havada duruyordu. Baseline hizası
 * bunu font ölçüsünden bağımsız, tek sistemle çözer.
 */
.dj-menu--topbar .dj-menu__link {
	display: inline-flex;
	align-items: baseline;
	/*
	 * 1024–1279'da 16u 8.5–10.6 px'e iniyordu. Yardımcı metin tabanı 14 px:
	 * 1920'de 16 px, küçülürken 14 px'in altına inmez. 1023 altında 16u
	 * zaten 16 px.
	 */
	font-size: max(0.875rem, calc(16 * var(--dj-u)));
	font-weight: var(--dj-fw-regular);
	line-height: 1.5;
	gap: calc(6 * var(--dj-u));
	color: var(--dj-white);
	white-space: nowrap;
}

/* Dil oku ile aynı ince chevron (XD Union 48). */
.dj-menu--topbar .dj-menu__caret svg {
	width: calc(11.3 * var(--dj-u));
	height: calc(6.7 * var(--dj-u));
	transition: transform var(--dj-transition);
}

/* ------------------------------------------------------------------ */
/* Üst şerit açılır menüsü (Destek Merkezi)                            */
/*                                                                     */
/* Dil menüsüyle aynı yüzey dilini kullanır. Açılma tetikleyicisi       */
/* yalnız kendi öğesidir; üst şeridin başka bir yerine gelmek menüyü    */
/* açmaz.                                                              */
/* ------------------------------------------------------------------ */

/*
 * ORTAK AÇILIR PANEL KABUĞU
 *
 * Destek Merkezi ve dil menüsü aynı kabuğu paylaşır: aynı yüzey, kenarlık,
 * köşe, gölge ve geçiş. Ölçüleri farklıdır — Destek zengin, dil kompakt —
 * ama ağırlıkları aynı sistemden gelir.
 *
 * Panel sayfa sütununa değil KENDİ TETİKLEYİCİSİNE bağlıdır; iki öğe de üst
 * şeridin tam yüksekliğinde olduğu için `top: 100%` ikisinde de aynı Y'yi
 * verir.
 */
.dj-topbar {
	--dj-tb-panel-radius: calc(15 * var(--dj-u));
	--dj-tb-panel-offset: calc(11 * var(--dj-u));
	--dj-tb-panel-shadow: var(--dj-shadow-md);
	--dj-tb-row-radius: calc(10 * var(--dj-u));
	--dj-tb-row-hover: var(--dj-surface-2);
}

.dj-menu--topbar > .dj-menu__item--parent {
	position: relative;
}

.dj-menu--topbar .dj-menu__submenu,
.dj-lang__menu {
	position: absolute;
	top: calc(100% + var(--dj-tb-panel-offset));
	z-index: var(--dj-z-header);
	margin: 0;
	padding: calc(8 * var(--dj-u));
	list-style: none;
	background: var(--dj-white);
	color: var(--dj-ink);
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-tb-panel-radius);
	box-shadow: var(--dj-tb-panel-shadow);

	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--dj-motion-fast) var(--dj-ease-standard),
		transform var(--dj-motion-fast) var(--dj-ease-standard),
		visibility var(--dj-motion-fast) var(--dj-ease-standard);
}

/*
 * Destek paneli zengin olandır: tetikleyicinin optik merkezine hizalanır,
 * görünüm alanını taşmaması için kenar payıyla sınırlanır.
 */
.dj-menu--topbar .dj-menu__submenu {
	inset-inline-start: 50%;
	translate: -50% 0;
	width: calc(345 * var(--dj-u));
	max-width: calc(100vw - var(--dj-page-padding) * 2);
}

/*
 * Satır: ikon karosu + etiket. İkonun ayrı büyük kutusu yoktur; karo
 * satırın içindedir ve hover satırın tamamında verilir.
 */
.dj-menu--topbar .dj-menu__submenu .dj-menu__link {
	display: flex;
	align-items: center;
	gap: calc(14 * var(--dj-u));
	min-height: calc(64 * var(--dj-u));
	padding: calc(9 * var(--dj-u));
	border-radius: var(--dj-tb-row-radius);
	color: var(--dj-ink);
	font-size: calc(16 * var(--dj-u));
	font-weight: var(--dj-fw-medium);
	white-space: nowrap;
	transition: background-color var(--dj-motion-fast) var(--dj-ease-standard);
}

.dj-menu--topbar .dj-menu__submenu > li + li {
	margin-block-start: calc(2 * var(--dj-u));
}

@media (hover: hover) {
	.dj-menu--topbar .dj-menu__submenu .dj-menu__link:hover {
		background: var(--dj-tb-row-hover);
	}
}

.dj-menu--topbar .dj-menu__submenu .dj-menu__link:focus-visible {
	background: var(--dj-tb-row-hover);
}

/* İkon karosu: yumuşak nötr zemin, saç teli kenarlık, büyük kare kutu yok. */
.dj-menu--topbar .dj-menu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: calc(46 * var(--dj-u));
	height: calc(46 * var(--dj-u));
	background: var(--dj-surface);
	border: 1px solid var(--dj-line);
	border-radius: calc(10 * var(--dj-u));
	color: var(--dj-ink);
	transition: border-color var(--dj-motion-fast) var(--dj-ease-standard);
}

.dj-menu--topbar .dj-menu__icon svg {
	width: calc(32 * var(--dj-u));
	height: calc(32 * var(--dj-u));
}

@media (hover: hover) {
	.dj-menu--topbar .dj-menu__submenu .dj-menu__link:hover .dj-menu__icon {
		border-color: var(--dj-gray-300);
	}
}

/* Yalnız kendi öğesinin üzerine gelindiğinde açılır. */
@media (hover: hover) and (pointer: fine) {
	.dj-menu--topbar > .dj-menu__item--parent:not(.is-dismissed):hover > .dj-menu__submenu,
	.dj-menu--topbar > .dj-menu__item--parent:not(.is-dismissed):focus-within > .dj-menu__submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.dj-menu--topbar > .dj-menu__item--parent:not(.is-dismissed):hover > .dj-menu__toggle svg {
		transform: rotate(180deg);
	}
}

/*
 * Etkileşimli denetim bağlantının içindeki dekoratif ok değil, yürüyücünün
 * ürettiği gerçek düğmedir: `aria-expanded` taşır, klavyeyle çalışır ve
 * bağlantının içine yerleştirilmiş etkileşimli öğe sorunu doğmaz.
 */
.dj-menu--topbar .dj-menu__item--parent > .dj-menu__link .dj-menu__caret {
	display: none;
}

/* Ok, dil oku ile aynı baseline sistemine girsin: blok kutu → sentezlenen
   baseline alt kenardır, ok gövdesinin altı metin baseline'ına oturur. */
.dj-menu--topbar .dj-menu__item--parent > .dj-menu__toggle {
	display: block;
	margin-inline-start: calc(6 * var(--dj-u));
	padding: 0;
	line-height: 0;
	color: inherit;
}

/* XD Union 48: ince chevron; baseline'a oturması için blok. */
.dj-menu--topbar .dj-menu__item--parent > .dj-menu__toggle svg,
.dj-lang__caret {
	display: block;
	width: calc(11.3 * var(--dj-u));
	height: calc(6.7 * var(--dj-u));
	transition: transform var(--dj-transition);
}

.dj-menu--topbar .dj-menu__item--parent > .dj-menu__toggle:focus-visible {
	outline: 2px solid var(--dj-white);
	outline-offset: 3px;
}

/*
 * Adresi olmayan başlık (ör. "Destek Merkezi") tek düğmedir: etiket + ok.
 * Görünüm bağlantıyla aynıdır (renk, punto, baseline'a oturan ok); ayrı
 * açma düğmesi kurallarını (blok, satır yüksekliği 0) geçer.
 */
.dj-menu--topbar .dj-menu__item--parent > button.dj-menu__heading {
	display: inline-flex;
	align-items: baseline;
	gap: calc(6 * var(--dj-u));
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dj-white);
	font: inherit;
	font-size: max(0.875rem, calc(16 * var(--dj-u)));
	line-height: 1.5;
	white-space: nowrap;
	cursor: pointer;
}

.dj-menu--topbar .dj-menu__item--parent > button.dj-menu__heading .dj-menu__caret {
	display: block;
	align-self: baseline;
	margin: 0;
}

.dj-menu--topbar .dj-menu__item--parent > button.dj-menu__heading .dj-menu__caret svg {
	display: block;
}

@media (hover: hover) and (pointer: fine) {
	.dj-menu--topbar > .dj-menu__item--parent:not(.is-dismissed):hover > .dj-menu__heading .dj-menu__caret svg {
		transform: rotate(180deg);
	}
}

.dj-menu--topbar > .dj-menu__item--parent.dj-menu__item--open > .dj-menu__heading .dj-menu__caret svg {
	transform: rotate(180deg);
}

/* Dokunmatik ve klavye: durum düğmeyle yönetilir. */
.dj-menu--topbar > .dj-menu__item--parent.dj-menu__item--open > .dj-menu__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dj-menu--topbar > .dj-menu__item--parent.dj-menu__item--open > .dj-menu__toggle svg {
	transform: rotate(180deg);
}

/* Duyuru şeridi */

.dj-announce {
	display: flex;
	align-items: center;
	/* XD: ok çizimi 632–638 / 1261.5–1267.5, mesaj 702–1224 arasında. */
	gap: calc(50 * var(--dj-u));
	justify-content: center;
	min-width: 0;
}

/*
 * Kaydırma penceresi. Metinler aynı ızgara gözünde üst üste durur; yalnız
 * biri 0 konumunda, diğerleri pencerenin dışına park etmiştir. Yükseklik
 * metnin kendi satır kutusundan gelir — şerit yüksekliği değişmez.
 */
.dj-announce__viewport {
	display: grid;
	min-width: 0;
	overflow: hidden;
}

.dj-announce__item {
	grid-area: 1 / 1;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: max(0.875rem, calc(18 * var(--dj-u)));
	line-height: 1.5;
	text-align: center;
	transform: translateX(0);
	transition: transform var(--dj-transition-slide);
}

/*
 * Bağlantılı duyuru (Header widget'ında bağlantı girildiyse). Görünüm düz
 * metinle aynıdır; tıklanabilirlik imleçte alt çizgiyle belirir, odak
 * halkası genel `:focus-visible` kuralından gelir.
 */
.dj-announce__link {
	color: inherit;
	text-decoration: none;
}

.dj-announce__link:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* İlk çizimde etkin olmayan metinler sağda bekler. */
.dj-announce__item.is-parked {
	transform: translateX(100%);
}

/* Park anında hareket olmaz; yalnız konum ayarlanır. */
.dj-announce__item.is-instant {
	transition: none;
}

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

.dj-announce__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(24 * var(--dj-u));
	height: calc(24 * var(--dj-u));
	color: var(--dj-white);
	/* Kullanıcı revizesi: küçük kalsın ama ilk bakışta seçilsin. */
	opacity: 1;
	transition: opacity var(--dj-transition);
	flex: 0 0 auto;
}

.dj-announce__nav:hover {
	opacity: 1;
}

/* XD Union 6/7: yatay ok dikey oranlıdır — ölçülen çizim 6 x 10.5. */
.dj-announce__nav svg {
	width: calc(6 * var(--dj-u));
	height: calc(10.5 * var(--dj-u));
	/* 7'lik viewBox'ta 2 → ekranda ~1.3px: küçük ama anti-aliasing'de kaybolmaz. */
	stroke-width: 2;
}

.dj-announce__nav:disabled {
	opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Dil seçimi                                                          */
/*                                                                     */
/* Tasarım revizyonu: açılır menü YALNIZ “Türkçe” öğesinin kendisine    */
/* (tetikleyici düğme veya doğrudan altındaki liste) gelindiğinde       */
/* açılır. Sarmalayıcı tetikleyici genişliğindedir; başlığın veya üst   */
/* şeridin başka bir yerine gelmek bu animasyonu tetiklemez.            */
/* ------------------------------------------------------------------ */

.dj-lang {
	/* Panel kendi tetikleyicisine bağlıdır; bağlam sarmalayıcının kendisi. */
	position: relative;
	/* Üst şeridin tam yüksekliğini kaplar (kesintisiz hover bölgesi) ve
	   tetikleyiciyi Kurumsal/Destek Merkezi ile aynı optik hatta oturtur. */
	display: flex;
	align-items: center;
	width: max-content;
	line-height: 1;
}

.dj-lang__trigger {
	display: inline-flex;
	align-items: baseline;
	gap: calc(6 * var(--dj-u));
	color: var(--dj-white);
	/* Okunurluk tabanı: bkz. `.dj-menu--topbar .dj-menu__link`. */
	font-size: max(0.875rem, calc(16 * var(--dj-u)));
	white-space: nowrap;
	padding: calc(8 * var(--dj-u)) 0;
}

/*
 * Tetikleyici geri bildirimi yalnız renk değişimidir; zemin ve alt çizgi yok.
 * Seçici üst seviyeyle sınırlıdır — alt menü bağlantıları beyaz panelin
 * içindedir, onlara bu kural uygulanmaz.
 */
@media (hover: hover) {
	.dj-menu--topbar > .dj-menu__item > .dj-menu__link:hover,
	.dj-lang__trigger:hover {
		color: var(--dj-gray-300);
	}
}

/*
 * Dil paneli Destek ile aynı kabuğu (yüzey, kenar, köşe, gölge, geçiş)
 * kullanır ama KOMPAKTTIR: iki satır, dar genişlik, küçük rozet. Sağ kenarı
 * “Türkçe” tetikleyicisinin sağ kenarına hizalanır.
 */
.dj-lang__menu {
	inset-inline-end: 0;
	width: calc(225 * var(--dj-u));
	max-width: calc(100vw - var(--dj-page-padding) * 2);
}

/* Tetikleyici bir cihazda gerçekten üzerine gelinebiliyorsa hover ile aç. */
@media (hover: hover) and (pointer: fine) {
	.dj-lang:not(.is-dismissed):hover > .dj-lang__menu,
	.dj-lang:not(.is-dismissed):focus-within > .dj-lang__menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.dj-lang:hover > .dj-lang__trigger .dj-lang__caret {
		transform: rotate(180deg);
	}
}

/* Dokunmatik ve klavye: açık durum düğme üzerinden yönetilir. */
.dj-lang.is-open > .dj-lang__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dj-lang.is-open > .dj-lang__trigger .dj-lang__caret {
	transform: rotate(180deg);
}

.dj-lang__menu > li + li {
	margin-block-start: calc(2 * var(--dj-u));
}

.dj-lang__item {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--dj-u));
	min-height: calc(54 * var(--dj-u));
	padding: calc(8 * var(--dj-u));
	border-radius: var(--dj-tb-row-radius);
	font-size: calc(16 * var(--dj-u));
	font-weight: var(--dj-fw-regular);
	color: var(--dj-muted);
	white-space: nowrap;
	transition:
		background-color var(--dj-motion-fast) var(--dj-ease-standard),
		color var(--dj-motion-fast) var(--dj-ease-standard);
}

.dj-lang__label {
	flex: 1 1 auto;
}

/* Seçili dil: koyu metin ve sağda işaret; satır zemini gerekmez. */
.dj-lang__item.is-current {
	color: var(--dj-ink);
	font-weight: var(--dj-fw-medium);
	cursor: default;
}

@media (hover: hover) {
	a.dj-lang__item:hover {
		background: var(--dj-tb-row-hover);
		color: var(--dj-ink);
	}
}

a.dj-lang__item:focus-visible {
	background: var(--dj-tb-row-hover);
	color: var(--dj-ink);
}

/* Adresi olmayan dil: seçilebilir görünür ama etkin değildir. */
.dj-lang__item.is-unavailable {
	color: var(--dj-muted);
	cursor: default;
}

/*
 * Dil kısaltması: kutu yok. Sabit genişlikte, ikincil düz metin — iki satır
 * aynı optik ızgaraya oturur.
 */
/* Dil rozeti kompakt: destek karosundan küçük, yumuşak nötr zemin. */
.dj-lang__item .dj-menu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: calc(38 * var(--dj-u));
	height: calc(38 * var(--dj-u));
	background: var(--dj-surface);
	border: 1px solid var(--dj-line);
	border-radius: calc(9 * var(--dj-u));
	font-size: calc(13 * var(--dj-u));
	font-weight: var(--dj-fw-semibold);
	color: inherit;
}

/*
 * Locale rozeti: XD'de bayrak/globe varlığı yok. Emoji ya da sistem font
 * bayrağı platforma göre değiştiği için kullanılmadı; destek panelindeki
 * ikon kutusunun içine dil kodu yazılır — iki satır net biçimde ayrışır.
 */
.dj-lang__badge {
	font-size: calc(15 * var(--dj-u));
	font-weight: var(--dj-fw-semibold);
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--dj-ink);
}

.dj-lang__item.is-unavailable .dj-lang__badge {
	color: var(--dj-muted);
	border-color: var(--dj-line);
}

.dj-lang__check {
	display: inline-flex;
	flex: 0 0 auto;
}

.dj-lang__check svg {
	width: calc(16 * var(--dj-u));
	height: calc(16 * var(--dj-u));
	color: var(--dj-ink);
}

/* ------------------------------------------------------------------ */
/* Ana gezinme                                                         */
/* ------------------------------------------------------------------ */

/*
 * XD'de gezinme sayfa merkezinde (501–1422.1, merkez 961.6 ≈ 960).
 * Esnek satırda logo ve araç sırası farklı genişlikte olduğu için
 * gezinme merkeze oturmuyordu; eşit yan sütunlu ızgara bunu çözer.
 */
.dj-navbar__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--dj-space-40);
	min-height: var(--dj-header-height);
}

.dj-navbar__actions {
	justify-self: end;
}

.dj-navbar__brand {
	flex: 0 0 auto;
}

.dj-logo-link {
	display: inline-flex;
	align-items: center;
}

.dj-logo {
	width: calc(225 * var(--dj-u));
	height: auto;
	color: var(--dj-ink);
}

.dj-logo--drawer {
	width: calc(180 * var(--dj-u));
}

.dj-logo--light {
	color: var(--dj-white);
}

.custom-logo {
	width: auto;
	max-height: calc(48 * var(--dj-u));
}

/* Gezinme sarmalayıcısı navbar yüksekliğini kaplar → mega panel ile
   tetikleyici arasında imlecin düşeceği boşluk kalmaz. */
.dj-navbar__nav {
	flex: 1 1 auto;
	display: flex;
	align-self: stretch;
	justify-content: center;
	min-width: 0;
}

/*
 * Öğeler navbar yüksekliğini kaplar. Mega panel `li` içinde ve tam altında
 * durduğu için tetikleyici ile panel arasında geçilecek boşluk yoktur;
 * flicker zamanlayıcıyla değil, geometriyle çözülür.
 */
.dj-menu--primary {
	display: flex;
	align-self: stretch;
	align-items: stretch;
	/* XD: gezinme 501–1422.1; öğe kutuları 684.5 → 4 aralık × 59. */
	gap: calc(59 * var(--dj-u));
	list-style: none;
}

.dj-menu--primary > .dj-menu__item {
	position: relative;
	display: flex;
	align-items: center;
}

/* Mega panel başlığın tamamına yaslanır → konumlanma başlığa göre. */
.dj-menu--primary > .dj-menu__item--mega {
	position: static;
}

/*
 * Kullanıcı revizesi: ana gezinmedeki üç caret metnin DİKEY MERKEZİNE
 * oturur ([metin][ok] tek birim). Satır kutusunun merkezi Inter'de
 * baseline − 0.364em'e denk gelir; bu da büyük harf yüksekliğinin optik
 * merkezidir. Üst şerit ve dil oku kendi baseline ilişkisini korur.
 */
.dj-menu--primary .dj-menu__link {
	display: inline-flex;
	align-items: center;
	gap: calc(4.3 * var(--dj-u));
	font-size: var(--dj-fs-20);
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-ink);
	white-space: nowrap;
	padding: calc(8 * var(--dj-u)) 0;
}

/*
 * Ana menü etkileşimi, sağ üstteki araç ikonlarıyla aynı dili kullanır:
 * renk yumuşar ve öğe 1 px yukarı gelir. Alt çizgi, zemin dolgusu, ölçek ve
 * kalınlık değişimi yok — hiçbiri düzen kaydırmaz.
 *
 * Açık mega öğesi ile etkin sayfa, diğerlerinden **daha güçlü** kontrastla
 * ayrılır: onlar tam renkte kalırken hover'daki öğe yumuşar.
 */
.dj-menu--primary .dj-menu__link {
	transition: color var(--dj-transition), opacity var(--dj-transition), transform var(--dj-transition);
}

@media (hover: hover) {
	.dj-menu--primary .dj-menu__item:hover > .dj-menu__link {
		color: var(--dj-hdr-fg-soft, var(--dj-muted));
		transform: translateY(-1px);
	}
}

.dj-menu--primary .dj-menu__link:focus-visible {
	transform: translateY(-1px);
}

/* Açık panel ve etkin sayfa tam kontrastta kalır. */
.dj-menu--primary .dj-menu__item--mega.is-open > .dj-menu__link,
.dj-menu--primary .dj-menu__item--mega.is-open:hover > .dj-menu__link,
.dj-menu--primary .current-menu-item > .dj-menu__link {
	color: var(--dj-hdr-fg, var(--dj-ink));
	opacity: 1;
}

/*
 * Bir mega panel açıkken diğer başlıklar yumuşar: açık öğe en güçlü
 * kontrastta kalır, hangisinin açık olduğu çizgisiz anlaşılır.
 */
.dj-navbar:has(.dj-menu__item--mega.is-open) .dj-menu--primary > .dj-menu__item:not(.is-open) > .dj-menu__link {
	color: var(--dj-hdr-fg-soft, var(--dj-muted));
}

/* Caret açık durumda yönünü belli eder; hover'da bir tık ilerler. */
.dj-menu--primary .dj-menu__caret {
	transition: transform var(--dj-transition);
}

@media (hover: hover) {
	.dj-menu--primary .dj-menu__item--mega:hover > .dj-menu__link .dj-menu__caret {
		transform: translateY(1px);
	}
}

.dj-menu--primary .dj-menu__item--mega.is-open > .dj-menu__link .dj-menu__caret,
.dj-menu--primary .dj-menu__item--mega.is-open:hover > .dj-menu__link .dj-menu__caret {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.dj-menu--primary .dj-menu__link,
	.dj-menu--primary .dj-menu__caret {
		transition: none;
	}

	.dj-menu--primary .dj-menu__item:hover > .dj-menu__link,
	.dj-menu--primary .dj-menu__link:focus-visible {
		transform: none;
	}
}

/*
 * Ok, metnin optik merkezine oturur. Kutu ortalaması em kutusunu merkezler;
 * gözün gördüğü merkez ise büyük harf yüksekliğinin ortasıdır ve Inter'de
 * bunun 1 tasarım birimi yukarısına denk gelir. Düzeltme birim tabanlı
 * olduğu için her görünüm genişliğinde aynı oranda kalır.
 */
.dj-menu__caret {
	display: inline-flex;
	align-items: center;
	margin-block-end: calc(1 * var(--dj-u));
}

/* XD Union 49/50/51: 11.3 × 6.7. Blok kutu → satır içi descender boşluğu
   oluşmaz, ok kutusunun optik merkezi metnin merkeziyle çakışır. */
.dj-menu__caret svg {
	display: block;
	width: calc(11.3 * var(--dj-u));
	height: calc(6.7 * var(--dj-u));
	transition: transform var(--dj-transition);
}

.dj-menu__toggle {
	display: none;
}

/* Alt menü: yalnız kendi üst öğesine gelindiğinde açılır. */
.dj-menu--primary .dj-menu__submenu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: calc(240 * var(--dj-u));
	padding: calc(8 * var(--dj-u));
	list-style: none;
	background: var(--dj-white);
	border-radius: var(--dj-radius-md);
	box-shadow: var(--dj-shadow-md);

	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--dj-transition),
		transform var(--dj-transition),
		visibility var(--dj-transition);
}

@media (hover: hover) and (pointer: fine) {
	.dj-menu--primary > .dj-menu__item--parent:hover > .dj-menu__submenu,
	.dj-menu--primary > .dj-menu__item--parent:focus-within > .dj-menu__submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.dj-menu--primary > .dj-menu__item--parent:hover > .dj-menu__link .dj-menu__caret svg {
		transform: rotate(180deg);
	}
}

.dj-menu--primary .dj-menu__item--open > .dj-menu__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dj-menu--primary .dj-menu__submenu .dj-menu__link {
	display: block;
	padding: calc(10 * var(--dj-u)) calc(12 * var(--dj-u));
	border-radius: var(--dj-radius-sm);
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-regular);
	white-space: normal;
}

.dj-menu--primary .dj-menu__submenu .dj-menu__link:hover {
	background: var(--dj-surface);
	color: var(--dj-ink);
}

/* Başlık aksiyonları */

.dj-navbar__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	/*
	 * XD ölçümü (design px): arama 1544–1575.5, hesap ikonu 1601.5–1633,
	 * “Hesap” 1644.7–1691.7, kalp 1712.5–1744.5, sepet 1770–1802.
	 * Araç–araç aralığı 26; hesap ikonu ile etiketi arasındaki 11.7 ise
	 * `.dj-action` kendi gap'iyle verilir (tek kompakt birim).
	 */
	gap: calc(22 * var(--dj-u));
	/* Sepet rozeti dışarı taştığı için grup içeride biter; rozetin sağ kenarı
	   kapsayıcının kenarına (1815) oturur. */
	padding-inline-end: calc(4 * var(--dj-u));
}

/* XD: “Hesap” etiketinden sonraki aralık 20.8 — etiket kendi boşluğuyla
   aralığı optik olarak büyüttüğü için tasarım burayı daraltmış. */
.dj-navbar__actions .dj-action--account {
	margin-inline-end: calc(-4 * var(--dj-u));
}

.dj-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* Hesap ikonu ile etiketi tek kompakt birim. */
	gap: calc(9 * var(--dj-u));
	color: var(--dj-ink);
	font-size: calc(16 * var(--dj-u));
	font-weight: var(--dj-fw-semibold);
}

/*
 * Başlık araçları (arama, hesap, favori, karşılaştırma, sepet) tek bir
 * etkileşim ailesi kullanır: hover'da ikon 1 px yukarı gelir ve rengi
 * yumuşar. Ölçek, yaylanma ve gövde kalınlığı değişimi yok; rozet
 * ikonla birlikte taşınmadığı için yerinden oynamaz.
 */
.dj-action {
	transition: color var(--dj-transition);
}

.dj-action > svg {
	transition: transform var(--dj-transition), opacity var(--dj-transition);
}

@media (hover: hover) {
	.dj-action:hover {
		color: var(--dj-hdr-fg-soft, var(--dj-muted));
	}

	.dj-action:hover > svg {
		transform: translateY(-1px);
		opacity: 0.85;
	}
}

.dj-action:focus-visible > svg {
	transform: translateY(-1px);
}

/* Favori dolu durumu hover'da da korunur. */
.dj-action--wishlist.is-active > svg,
.dj-action--wishlist.is-active:hover > svg {
	opacity: 1;
}

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

/*
 * Araçlar aynı gövde kalınlığını (2.5) paylaşır. Görünen ikon kutusu
 * arama / hesap / favori / karşılaştırma için 30, sepet için 33 — menü ve
 * logoyla daha dengeli okunsun diye küçültüldü. Çizimler kendi oranlarını
 * korur (`preserveAspectRatio`), gövde kalınlığı değişmez.
 *
 * Tıklama alanı küçülmez: kutu ölçüleri `.dj-action--icon` üzerinde eski
 * değerlerinde sabitlenir, böylece ikonlar arası boşluk ve başlık yüksekliği
 * de aynı kalır.
 */
.dj-action svg {
	width: calc(30 * var(--dj-u));
	height: calc(30 * var(--dj-u));
}

.dj-action--cart svg {
	width: calc(33 * var(--dj-u));
	height: calc(33 * var(--dj-u));
}

/* Eski kutu ölçüleri = eski tıklama alanı ve eski yerleşim. */
.dj-action--icon,
.dj-action--account {
	min-width: calc(35 * var(--dj-u));
	min-height: calc(35 * var(--dj-u));
}

.dj-action--compare {
	min-width: calc(33.1 * var(--dj-u));
}

.dj-action--cart {
	min-width: calc(39 * var(--dj-u));
	min-height: calc(36.8 * var(--dj-u));
}

/*
 * Karşılaştırma ikonu ürün kartıyla aynı çizimdir (viewBox 24.59 × 26,
 * gövde 2). Ortak 30'luk kutuyu kullanır; çizim kutuya kendi oranıyla
 * oturur. Ölçeklenen gövde 2 × 30/26 = 2.31 → diğer araçların
 * 2.5 × 30/32 = 2.34 değeriyle aynı ağırlıkta okunur.
 */

/*
 * XD: rozet Ø18 (Ellipse r=9), rakam 12 punto. İkon kutusu 35'ten 30'a
 * indiği için rozet, çizimi daha az örtsün diye köşeye doğru 1 birim dışarı
 * alındı; sağ kenarı `.dj-navbar__actions` içindeki 4 birimlik payın içinde
 * kalır, yani kapsayıcıyı taşırmaz. İkondan kopmaz, çizimin gövdesine binmez.
 */
.dj-action__badge {
	position: absolute;
	top: calc(-1.5 * var(--dj-u));
	inset-inline-end: calc(-4 * var(--dj-u));
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: calc(18 * var(--dj-u));
	height: calc(18 * var(--dj-u));
	padding: 0 calc(4 * var(--dj-u));
	border-radius: var(--dj-radius-pill);
	background: var(--dj-ink);
	color: var(--dj-white);
	font-size: calc(12 * var(--dj-u));
	font-weight: var(--dj-fw-medium);
	line-height: 1;
}

.dj-navbar__burger {
	display: none;
}

/* Şeffaf başlık varyantı */

/*
 * Şeffaf başlığın iki durumu tek anahtarla yönetilir: varsayılan (hero
 * üzerinde beyaz metin) ve açık durum (beyaz zemin, koyu metin). Durum
 * değişkenleri aşağıda bir kez tanımlanır, bileşenler yalnız onları okur —
 * böylece seçici listesi her kural için tekrarlanmaz.
 */
.dj-header--transparent {
	--dj-hdr-bg: transparent;
	--dj-hdr-fg: var(--dj-white);
	--dj-hdr-fg-soft: var(--dj-gray-300);
	--dj-hdr-badge-bg: var(--dj-white);
	--dj-hdr-badge-fg: var(--dj-ink);
}

/*
 * Açık duruma geçiş koşulları:
 *  - ana başlık alanında işaretçi veya odak (açılır panel de bu ağacın
 *    içinde olduğu için tetikleyiciden panele geçerken titreme olmaz),
 *  - üst şeritteki destek veya dil menüsü açık / üzerinde.
 */
/*
 * Üst şerit bu koşulların dışındadır. Daha önce üst şeridin sağ kümesine
 * (Destek Merkezi / Türkçe) yalnız işaretçi girdiğinde de başlık beyaza
 * geçiyordu; imleç siyah şeridin sağına gittiğinde altındaki gezinme
 * çubuğu kendiliğinden beyaz moda düşüyordu. Açılır panellerin kendi beyaz
 * yüzeyi olduğu için bu koşullara gerek yok: üst şerit her zaman siyah
 * kalır, hover yalnız tıklanabilir öğenin kendisini değiştirir.
 */
/*
 * Açık (beyaz) durumun iki girdisi, tek görünüm:
 *  - `is-solid` (main.js → `headerSync()`): açık mega panel ya da açık
 *    arama. İmleç bölgeden çıktığında 140 ms'lik kapanış payı boyunca
 *    başlık bu sınıfla beyaz kalır; pay dolunca panel ile birlikte kapanır.
 *  - `:hover` / `:focus-within`: gezinme satırının herhangi bir yerinde
 *    imleç ya da odak (logo, menü bağlantıları, eylemler). Mega panel de
 *    bu ağacın içinde olduğu için tetikleyiciden panele geçişte düşmez.
 * Masaüstünde bu değişkenleri okuyan özelliklerde geçiş yoktur ve hiçbir
 * durumda değişmez (aşağıda `min-width: 1200px`); iki girdinin hangi karede
 * açılıp kapandığı yarım sönüm ya da ara renkten sıçrama üretemez.
 */
.dj-header--transparent.is-solid,
.dj-header--transparent:has(.dj-navbar:hover),
.dj-header--transparent:has(.dj-navbar:focus-within) {
	--dj-hdr-bg: var(--dj-white);
	--dj-hdr-fg: var(--dj-ink);
	--dj-hdr-fg-soft: var(--dj-muted);
	--dj-hdr-badge-bg: var(--dj-ink);
	--dj-hdr-badge-fg: var(--dj-white);
}

/* Üst şerit her durumda siyah kalır; anahtar yalnız ana başlığı etkiler. */
.dj-header--transparent .dj-navbar {
	background: var(--dj-hdr-bg);
	transition: background-color 200ms ease;
}

.dj-header--transparent .dj-logo,
.dj-header--transparent .dj-menu--primary .dj-menu__link,
.dj-header--transparent .dj-action {
	color: var(--dj-hdr-fg);
	transition: color 200ms ease;
}

.dj-header--transparent .dj-menu--primary .dj-menu__link:hover,
.dj-header--transparent .dj-menu--primary .dj-menu__item--parent:hover > .dj-menu__link,
.dj-header--transparent .dj-action:hover {
	color: var(--dj-hdr-fg-soft);
}

/*
 * Paneli açık olan başlık tam koyulukta kalır; üzerine gelinen ama açık
 * olmayan öğeler yumuşar. Böylece açık öğe diğerlerinden çizgiyle değil,
 * kontrastla ayrılır. (`:hover` / `:focus-within` buradan çıkarıldı: o iki
 * durum hover renginin uygulanmasını engelliyordu.)
 */
.dj-menu--primary > .dj-menu__item--mega.is-open > .dj-menu__link,
.dj-header--transparent .dj-menu--primary > .dj-menu__item--mega.is-open > .dj-menu__link {
	color: var(--dj-hdr-fg, var(--dj-ink));
}

.dj-header--transparent .dj-action__badge {
	background: var(--dj-hdr-badge-bg);
	color: var(--dj-hdr-badge-fg);
	transition: background-color 200ms ease, color 200ms ease;
}

/* Açılır panellerin içi her zaman beyaz yüzey üzerindedir. */
.dj-header--transparent .dj-menu--primary .dj-menu__submenu .dj-menu__link {
	color: var(--dj-ink);
}

/*
 * Masaüstü (mega menülü genişlik): zemin ve renk geçişi yoktur — açılışta
 * da kapanışta da. Önce geçiş durumla birlikte değişiyordu (mega açık:
 * `none`, kapalı: 200 ms); hero ↔ menü arasında gidip gelirken kapanış
 * sönümü yarıda kesiliyor, yeniden açılışta zemin ara renkten tek karede
 * tam beyaza sıçrıyordu (ölçüldü: 0.42 → 1.00). Geçiş değeri artık hiçbir
 * durumda değişmez; panel de aynı karede açılıp kapanır (aşağıda `.dj-mega`).
 */
@media (min-width: 1200px) {
	.dj-header--transparent .dj-navbar,
	.dj-header--transparent .dj-logo,
	.dj-header--transparent .dj-menu--primary .dj-menu__link,
	.dj-header--transparent .dj-action,
	.dj-header--transparent .dj-action__badge {
		transition: none;
	}
}


/* ------------------------------------------------------------------ */
/* Arama katmanı                                                       */
/* ------------------------------------------------------------------ */

/*
 * Arama, gezinme satırının üzerinde konumlandırılmış bir örtüdür. Belge
 * akışına satır eklemediği için açılıp kapanması başlık yüksekliğini,
 * hero'nun konumunu ve sayfa boyunu değiştirmez.
 *
 * Konum kutusu bilerek `.dj-header`'dır: mega panel de aynı kutuya göre
 * konumlanır (`.dj-menu__item--mega { position: static }`), aradaki bir
 * öğeye `position` verilseydi mega menü kap genişliğine düşerdi.
 * Alt kenar başlığın alt kenarı, yükseklik gezinme satırının yüksekliği →
 * örtü tam olarak o satırı kaplar.
 *
 * Yan kenarlar kabın içerik kenarından hesaplanır: akışkan aralıkta
 * `(100% - kap) / 2` sayfa boşluğuna eşittir, 1920 üstünde ise kap
 * ortalandığı için gerçek kenarı verir.
 */
.dj-search {
	--dj-search-gutter: max(
		var(--dj-page-padding),
		calc((100% - var(--dj-container)) / 2)
	);

	position: absolute;
	inset-block-end: 0;
	height: var(--dj-header-height);
	inset-inline-start: calc(var(--dj-search-gutter) + 225 * var(--dj-u) + var(--dj-space-40));
	inset-inline-end: var(--dj-search-gutter);
	display: flex;
	align-items: center;
	z-index: 3;
}

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

.dj-search__form {
	display: flex;
	align-items: center;
	gap: calc(16 * var(--dj-u));
	width: 100%;
}

/* Başlık ölçeği: satır 110, alan 56 → üstte ve altta 27 boşluk kalır. */
.dj-search__field {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	height: calc(56 * var(--dj-u));
	padding-inline: calc(24 * var(--dj-u)) calc(8 * var(--dj-u));
	background: var(--dj-white);
	border: 1px solid var(--dj-ink);
	border-radius: var(--dj-radius-pill);
}

.dj-search__icon {
	flex: 0 0 auto;
	width: calc(22 * var(--dj-u));
	height: calc(22 * var(--dj-u));
	color: var(--dj-ink);
	pointer-events: none;
}

.dj-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding-inline: calc(14 * var(--dj-u)) calc(12 * var(--dj-u));
	background: transparent;
	border: 0;
	color: var(--dj-ink);
	font-size: var(--dj-fs-16-fluid);
}

.dj-search__input::placeholder {
	color: var(--dj-muted);
	opacity: 1;
}

.dj-search__input:focus {
	outline: none;
}

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

/*
 * Gönder düğmesi alanın içinde — alt bilgi bülten formuyla aynı dil.
 *
 * Kenarlık normal durumda da vardır ve zeminle aynı renktedir: hover'da
 * beyaza dönerken kenarlık görünür olur ama kutu ölçüsü değişmez. `border-box`
 * sayesinde 40'lık yükseklik ve pill köşe her iki durumda birebir aynıdır.
 */
.dj-search__submit {
	flex: 0 0 auto;
	height: calc(40 * var(--dj-u));
	padding-inline: calc(28 * var(--dj-u));
	border: 1px solid var(--dj-ink);
	border-radius: var(--dj-radius-pill);
	background: var(--dj-ink);
	color: var(--dj-white);
	font-size: var(--dj-fs-16-fluid);
	font-weight: var(--dj-fw-semibold);
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

/* Klavye odağı hover ile aynı görsel aileyi kullanır; halka ayrıca kalır. */
.dj-search__submit:focus-visible {
	background: var(--dj-white);
	color: var(--dj-ink);
	border-color: var(--dj-ink);
}

@media (hover: hover) {
	.dj-search__submit:hover {
		background: var(--dj-white);
		color: var(--dj-ink);
		border-color: var(--dj-ink);
	}
}

.dj-search__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(44 * var(--dj-u));
	height: calc(44 * var(--dj-u));
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--dj-ink);
	cursor: pointer;
	transition: background-color var(--dj-transition), color var(--dj-transition);
}

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

@media (hover: hover) {
	.dj-search__close:hover {
		background: var(--dj-surface);
	}
}

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

/*
 * Açık durum. Gezinme ve araçlar `visibility` ile gizlenir: ızgara gözleri
 * yerinde kaldığı için satır yüksekliği ve logo konumu değişmez.
 */
.dj-header.is-search-open .dj-navbar__nav,
.dj-header.is-search-open .dj-navbar__actions {
	visibility: hidden;
}

/*
 * Arama açıkken mega panel açılmasın. Panelin kendi görünürlük mekanizması
 * `opacity/visibility/pointer-events`; aynı mekanizma kullanılır, `display`
 * değiştirilmez — geçiş kesilmez, kapanınca titreme olmaz. Özgüllük açma
 * kuralının (0,3,0) üstünde tutulur.
 */
.dj-header.is-search-open .dj-menu--primary > .dj-menu__item--mega > .dj-mega {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Çekmeceler                                                          */
/* ------------------------------------------------------------------ */

.dj-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--dj-z-drawer);
}

.dj-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: var(--dj-overlay);
	border: 0;
	width: 100%;
	cursor: default;
	animation: dj-fade-in var(--dj-transition) both;
}

.dj-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: min(calc(420 * var(--dj-u)), 88vw);
	background: var(--dj-white);
	display: flex;
	flex-direction: column;
	box-shadow: var(--dj-shadow-lg);
	animation: dj-slide-in-start var(--dj-transition-slow) both;
	z-index: 1;
}

.dj-drawer--end .dj-drawer__panel {
	inset-inline-start: auto;
	inset-inline-end: 0;
	animation-name: dj-slide-in-end;
}

.dj-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dj-space-16);
	padding: var(--dj-space-20) var(--dj-space-24);
	border-bottom: 1px solid var(--dj-line);
}

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

.dj-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var(--dj-space-20) var(--dj-space-24) var(--dj-space-40);
}

/*
 * Dar ekranda çekmece, kenardan kenara kaplayan bir katman değil; site
 * bağlamını arkasında bırakan bir karttır. Ortak ölçüler yukarıdaki
 * belirteçlerden gelir; genişlik de ortaktır (iki yanda `--dj-sheet-gap`).
 */
@media (max-width: 767px) {
	.dj-drawer__panel {
		inset-block: calc(var(--dj-sheet-safe-top) + var(--dj-sheet-gap)) var(--dj-sheet-gap);
		inset-inline-start: var(--dj-sheet-gap);
		width: calc(100% - var(--dj-sheet-gap) * 2);
		border-radius: var(--dj-sheet-radius);
		overflow: hidden;
	}

	.dj-drawer--end .dj-drawer__panel {
		inset-inline-start: auto;
		inset-inline-end: var(--dj-sheet-gap);
	}

	/* Başlık ve kapatma sabit kalır; yalnız gövde kayar. */
	.dj-drawer__head {
		flex: 0 0 auto;
	}
}

/* ------------------------------------------------------------------ */
/* Çekmece gezinmesi                                                   */
/* ------------------------------------------------------------------ */

/*
 * Tek satır bileşeni. Kategoriler, kurumsal sayfalar, destek menüsü,
 * karşılaştırma ve dil aynı ölçüleri paylaşır: aynı satır yüksekliği, aynı
 * punto, aynı alt ayraç ve **aynı ok/rozet hizası** (hepsi satırın bitiş
 * kenarına yaslı). Etkin ve açık durumlar yalnız kalınlıkla ayrılır; marka
 * dışı vurgu rengi kullanılmaz.
 */
.dj-dnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dj-dnav__item {
	border-bottom: 1px solid var(--dj-line);
}

.dj-dnav__row {
	display: flex;
	align-items: center;
	gap: var(--dj-space-8);
	min-height: 52px;
}

.dj-dnav__link {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: var(--dj-space-12);
	min-width: 0;
	min-height: 52px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dj-ink);
	font-family: inherit;
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-medium);
	line-height: var(--dj-lh-snug);
	text-align: start;
	cursor: pointer;
}

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

.dj-dnav__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--dj-ink);
}

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

/* Yardımcı metin (etkin dil) ve sayaç aynı kenara yaslanır. */
.dj-dnav__meta {
	margin-inline-start: auto;
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
	white-space: nowrap;
}

.dj-dnav__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-inline-start: auto;
	min-width: 22px;
	height: 22px;
	padding-inline: 6px;
	border-radius: var(--dj-radius-pill);
	background: var(--dj-ink);
	color: var(--dj-white);
	font-size: var(--dj-fs-12);
	font-weight: var(--dj-fw-medium);
	line-height: 1;
}

/*
 * Ok kutusu 44 px dokunma alanıdır ama çizim satırın bitiş kenarına yaslanır:
 * adresi olan satırda ayrı düğme, adresi olmayan satırda satırın kendisi
 * açar — iki hâlde de ok aynı x'te durur.
 */
.dj-dnav__toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	width: 44px;
	min-height: 52px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dj-ink);
	cursor: pointer;
}

.dj-dnav__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
}

.dj-dnav__link--toggle .dj-dnav__chevron {
	margin-inline-start: auto;
}

.dj-dnav__link--toggle .dj-dnav__meta + .dj-dnav__chevron {
	margin-inline-start: var(--dj-space-8);
}

.dj-dnav__chevron svg {
	width: 16px;
	height: 16px;
	transition: transform var(--dj-transition);
}

.dj-dnav__item.is-open > .dj-dnav__row .dj-dnav__chevron svg {
	transform: rotate(180deg);
}

/* Etkin ve açık satır: yalnız kalınlık değişir. */
.dj-dnav__link.is-current .dj-dnav__text,
.dj-dnav__item.is-open > .dj-dnav__row .dj-dnav__text {
	font-weight: var(--dj-fw-semibold);
}

.dj-dnav__link:focus-visible,
.dj-dnav__toggle:focus-visible,
.dj-dnav__sub:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: -2px;
}

/* Açık panel */

.dj-dnav__panel {
	padding-block: 2px var(--dj-space-16);
}

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

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

.dj-dnav__sub {
	display: flex;
	align-items: center;
	gap: var(--dj-space-8);
	min-height: 40px;
	padding-inline-start: var(--dj-space-20);
	color: var(--dj-muted);
	font-size: var(--dj-fs-15);
	line-height: var(--dj-lh-snug);
}

/*
 * Grup başlığı: kategori terimi olduğunda bağlantı, ölçü sütunu gibi
 * adressiz gruplarda düz metindir — iki hâlde de aynı satır ölçüleri.
 */
.dj-dnav__sub--heading {
	margin: 0;
	padding-inline-start: 0;
	color: var(--dj-ink);
	font-weight: var(--dj-fw-medium);
}

.dj-dnav__sub.is-current {
	color: var(--dj-ink);
	font-weight: var(--dj-fw-medium);
}

.dj-dnav__sub.is-unavailable {
	opacity: 0.45;
}

.dj-dnav__check {
	display: inline-flex;
	margin-inline-start: auto;
}

.dj-dnav__check svg {
	width: 16px;
	height: 16px;
}

@media (hover: hover) {
	.dj-dnav__link:hover .dj-dnav__text,
	a.dj-dnav__sub:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

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

@keyframes dj-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes dj-slide-in-start {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}

@keyframes dj-slide-in-end {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

/* Favori çekmecesi içeriği */

.dj-wishlist-item {
	display: flex;
	gap: var(--dj-space-12);
	padding-block: var(--dj-space-16);
	border-bottom: 1px solid var(--dj-line);
	align-items: center;
}

.dj-wishlist-item img {
	width: calc(72 * var(--dj-u));
	height: calc(72 * var(--dj-u));
	object-fit: contain;
	flex: 0 0 auto;
	background: var(--dj-surface);
	border-radius: var(--dj-radius-sm);
}

.dj-wishlist-item__title {
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-semibold);
	line-height: var(--dj-lh-snug);
}

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

.dj-wishlist-item__remove {
	margin-inline-start: auto;
	color: var(--dj-muted);
}

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

.dj-drawer__empty {
	color: var(--dj-muted);
	padding-block: var(--dj-space-24);
}

/* ------------------------------------------------------------------ */
/* Duyarlı davranış                                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 1279px) {
	.dj-menu--primary {
		gap: var(--dj-space-24);
	}

	.dj-menu--primary .dj-menu__link {
		font-size: var(--dj-fs-18);
	}

	.dj-logo {
		width: calc(180 * var(--dj-u));
	}
}

@media (max-width: 1099px) {
	.dj-navbar__nav {
		display: none;
	}

	.dj-navbar__burger {
		display: inline-flex;
	}

	/*
	 * Gezinme gizlenince `1fr auto 1fr` ızgarasının orta sütunu araçlara
	 * kalıyordu: araçlar sayfanın ortasına itiliyor, 390'da logo sütunu
	 * 0 genişliğe eziliyordu (logo hiç görünmüyordu). Logo esnek sütunda
	 * içeriği kadar küçülebilir, araçlar sağ kenara yaslanır.
	 */
	.dj-navbar__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--dj-space-12);
	}

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

	.dj-navbar .dj-logo {
		max-width: 100%;
	}
}

/*
 * Dokunmatik başlık aralığında (≤1023) sol bağlantılar (Kurumsal, İletişim)
 * gizlenir; çekmece menüsünde zaten var. 900–1023'te üç sütunlu şerit
 * sığmıyordu: “İletişim” duyurunun önceki okuna biniyor, “Destek Merkezi”
 * oku alt satıra düşüyordu. 1024 ve üstü değişmez.
 */
@media (max-width: 1023px) {
	.dj-topbar__inner {
		grid-template-columns: 1fr auto;
	}

	.dj-topbar__side--start {
		display: none;
	}

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

/*
 * Dokunmatik başlık (≤1023, birim 1 px).
 *
 * Araçların görünen ikonu küçük kalır, tıklama kutusu 44 × 44'e çıkar.
 * Kutu ikondan geniş olduğu için grup sağda 10 px dışarı alınır: son
 * ikonun çizimi kap kenarına hizalı kalır, sayfa taşmaz (kabın kendi
 * iç boşluğu içinde). Rozet ikonun sağ üst köşesine bağlı kalır.
 */
@media (max-width: 1023px) {
	.dj-navbar__actions {
		gap: 4px;
		padding-inline-end: 0;
		margin-inline-end: -10px;
	}

	.dj-navbar__actions .dj-action--icon,
	.dj-navbar__actions .dj-action--account {
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		margin-inline-end: 0;
	}

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

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

	.dj-navbar__actions .dj-action__badge {
		top: 3px;
		inset-inline-end: 1px;
	}

	/*
	 * Yapışkan gezinme satırı. Üst şerit kayıp gider, logo + araç satırı
	 * ekranın üstünde kalır: sepet, favori, arama ve menü sayfanın her
	 * yerinden tek dokunuşla erişilir. Başlık akıştan çıkarılmaz; şeffaf
	 * başlıkta hero'nun üzerine binme negatif alt boşlukla korunur
	 * (önceki `position: absolute` ile aynı yerleşim).
	 *
	 * `is-stuck` sınıfını `assets/js/main.js` verir; yalnız bu aralıkta
	 * okunur, masaüstü başlığı etkilenmez.
	 */
	:root {
		--dj-sticky-header-offset: calc(var(--dj-header-height) + var(--dj-adminbar-offset));
	}

	.dj-header {
		position: sticky;
		top: calc(var(--dj-adminbar-offset) - var(--dj-topbar-height));
	}

	.dj-header--transparent {
		inset-inline: auto;
		margin-block-end: calc(-1 * (var(--dj-topbar-height) + var(--dj-header-height)));
	}

	.dj-header .dj-navbar {
		transition: background-color 200ms ease, box-shadow 200ms ease;
	}

	.dj-header.is-stuck .dj-navbar {
		box-shadow: 0 1px 0 var(--dj-line), 0 6px 16px rgba(16, 18, 19, 0.06);
	}

	/* Yapışan şeffaf başlık açık duruma geçer: hero bittikten sonra da okunur. */
	.dj-header--transparent.is-stuck {
		--dj-hdr-bg: var(--dj-white);
		--dj-hdr-fg: var(--dj-ink);
		--dj-hdr-fg-soft: var(--dj-muted);
		--dj-hdr-badge-bg: var(--dj-ink);
		--dj-hdr-badge-fg: var(--dj-white);
	}
}

@media (max-width: 767px) {
	/*
	 * Mobil başlık ölçüleri tek yerde tutulur: yapışma kaymasının (üst
	 * şerit yüksekliği) ve beyaz satırın yüksekliği aynı iki değişkenden
	 * okunur. Küresel `--dj-topbar-height` / `--dj-header-height` değerleri
	 * başka bileşenler (hero, hesap penceresi) tarafından da okunduğu için
	 * burada ayrı bir ad kullanılır.
	 */
	:root {
		--dj-mobile-topbar-h: 36px;
		--dj-mobile-navbar-h: 60px;
	}

	/*
	 * Siyah duyuru şeridi yapışmaz: başlık tam şerit yüksekliği kadar
	 * yukarı kayar, beyaz gezinme satırı ekranın tepesine **tam** oturur.
	 * Önceki değer küresel değişkendendi (44 px) ve şeridin gerçek
	 * yüksekliğini (37 px) aşıyordu; beyaz satırın üstünden 7 px kesiliyordu.
	 */
	.dj-header {
		top: calc(var(--dj-adminbar-offset) - var(--dj-mobile-topbar-h));
	}

	.dj-topbar {
		height: var(--dj-mobile-topbar-h);
	}

	/*
	 * Mobil ana başlık üç kolondur: hamburger · logo · sepet. Logo sabit
	 * genişlikli iki yan kolonun arasında kaldığı için optik olarak tam
	 * ortada durur (ikon sayısı değişse de kaymaz). Arama, hesap ve favori
	 * eylemleri buradan çıkarıldı; alt gezinmede yaşıyorlar (aynı
	 * tetikleyiciler, ikinci bir sistem yok).
	 */
	.dj-navbar__inner {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		align-items: center;
		column-gap: var(--dj-space-8);
		min-height: var(--dj-mobile-navbar-h);
	}

	/*
	 * Marka kutusu esnek kutu: içindeki `inline-flex` bağlantı blok
	 * kapsayıcıda satır kutusunun taban çizgisi payını (6 px) alıyor, kutu
	 * 30.56 yerine 36.56 px oluyordu. Izgara bu uzun kutuyu ortaladığı için
	 * logo hamburger ve sepetin 3 px üstünde kalıyordu.
	 */
	.dj-navbar__brand {
		grid-column: 2;
		justify-self: center;
		display: flex;
		align-items: center;
	}

	/*
	 * Logo satır yüksekliğine göre büyütüldü. Kaynak tema içindeki SVG
	 * olduğu için ölçek netliği bozmaz; en-boy oranı `height: auto` ile
	 * korunur ve yapışan başlıkta ölçek değişmez.
	 */
	.dj-logo {
		width: clamp(116px, 36vw, 148px);
	}

	.dj-navbar__burger {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		order: -1;
	}

	.dj-navbar__actions {
		grid-column: 3;
		grid-row: 1;
		display: contents;
	}

	.dj-navbar__actions .dj-action--cart {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}

	/*
	 * Arama / hesap / favori / karşılaştır mobil başlıkta basılmaz: aynı
	 * eylemler alt gezinmede ve çekmece menüsünde duruyor. Öğeler DOM'da
	 * kalır (tetikleyici ve `aria` bağları bozulmasın diye) yalnız
	 * görünmezler.
	 */
	.dj-navbar__actions [data-dj-search-open],
	.dj-navbar__actions .dj-action--account,
	.dj-navbar__actions .dj-account,
	.dj-navbar__actions .dj-action--wishlist,
	.dj-navbar__actions .dj-action--compare {
		display: none;
	}

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

	/*
	 * Sepet çizimi bir kademe küçük (26 → 22): 26'da görünür glif 25 × 21.5
	 * idi ve rozetle birlikte logodan baskın okunuyordu. Dokunma kutusu
	 * (44 × 44) ve rozet (18, mutlak) değişmez; yalnız çizim küçülür.
	 */
	.dj-navbar__actions .dj-action--cart svg {
		width: 22px;
		height: 22px;
	}

	.dj-topbar__inner {
		grid-template-columns: 1fr auto;
		gap: var(--dj-space-12);
	}

	.dj-topbar .dj-menu--topbar {
		gap: var(--dj-space-12);
		font-size: var(--dj-fs-14);
	}

	/*
	 * Dar şeritte “Destek Merkezi” duyuruyu üç harfe kadar kırpıyordu.
	 * Aynı menü çekmece menüsünde alt menüsüyle birlikte zaten var; burada
	 * gizlenir — böylece duyuru şeridi kalabalıklaşmaz.
	 */
	.dj-topbar__side--end .dj-menu--topbar {
		display: none;
	}

	/*
	 * Şerit tek satır: duyuru ortalanır, sığmayan metin üç noktayla biter.
	 * Kaynak ve slider davranışı değişmedi.
	 */
	.dj-topbar__inner {
		min-height: 0;
		height: 100%;
	}

	.dj-announce {
		justify-content: center;
	}

	.dj-announce__item {
		display: block;
		overflow: hidden;
		font-size: var(--dj-fs-14);
		line-height: 1.25;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
	}

	/*
	 * Dil seçimi dar şeritte basılmaz: aynı dil kaynağı çekmece
	 * gezinmesinde (`dijitsu_languages()`) bir akordeon satırı olarak
	 * duruyor. İkinci bir dil bileşeni kurulmadı.
	 */
	.dj-topbar .dj-lang {
		display: none;
	}

	.dj-announce__nav {
		display: none;
	}

	/*
	 * Dar ekranda arama gezinme satırının altına, yine konumlandırılmış bir
	 * katman olarak açılır: sayfa itilmez, hero kaymaz.
	 */
	.dj-search {
		inset-block-end: auto;
		height: auto;
		inset-inline: 0;
		top: 100%;
		padding: calc(14 * var(--dj-u)) var(--dj-page-padding);
		background: var(--dj-white);
		border-top: 1px solid var(--dj-line);
		box-shadow: var(--dj-shadow-md);
	}

	.dj-search__form {
		gap: calc(10 * var(--dj-u));
	}

	.dj-search__field {
		height: calc(48 * var(--dj-u));
		padding-inline: calc(16 * var(--dj-u)) calc(6 * var(--dj-u));
	}

	.dj-search__submit {
		height: calc(36 * var(--dj-u));
		padding-inline: calc(18 * var(--dj-u));
	}

	.dj-search__close {
		width: calc(36 * var(--dj-u));
		height: calc(36 * var(--dj-u));
	}

	/* Dar ekranda araçlar görünür kalır; yalnız gezinme gizlenir. */
	.dj-header.is-search-open .dj-navbar__actions {
		visibility: visible;
	}
}


/* ------------------------------------------------------------------ */
/* Mega menü                                                           */
/* ------------------------------------------------------------------ */

/*
 * XD ölçüleri (1920 tasarım px): panel üst kenarı 160 (başlığın altı),
 * ayraçlar x=105 ve x=532, sütun içerikleri x=155 ve x=583, görsel x=960.
 * Bu yüzden ızgara: sayfa boşluğu | 427 | 428 | kalan.
 */
.dj-mega {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: var(--dj-z-header);
	display: none;
	/* Üç menü de tek paylaşılan geometriyi kullanır; içeriği az olan menüde
	   kontrollü boşluk kalır, panel kısalmaz. Satır yüksekliği panele
	   kilitlenir — aksi hâlde uzun sütun ızgara satırını büyütüp görseli
	   panelin dışına taşırıyordu. */
	height: var(--dj-mega-height);
	grid-template-rows: 100%;
	overflow: hidden;
	background: var(--dj-white);
	color: var(--dj-ink);
	text-align: start;
	cursor: default;
	/*
	 * Beyaz panel beyaz sayfa üzerinde bittiği yerde sınırını kaybediyordu.
	 * Tek, kesintisiz bir yatay bitiş çizgisi: sütunlar arasındaki dikey
	 * ayraçlarla (`.dj-mega__col::before`) aynı 1px `--dj-line` — ızgara
	 * çizgilerinin devamı gibi okunur. Gölge, degrade ve kalınlaştırma yok.
	 *
	 * Kutu `border-box` olduğu için panel yüksekliği değişmez; panel
	 * kapalıyken görünmez olduğundan başlığın altında fazladan çizgi kalmaz.
	 */
	border-block-end: 1px solid var(--dj-line);
}

@media (min-width: 1024px) {
	.dj-mega {
		display: grid;
		grid-template-columns:
			var(--dj-page-padding)
			calc(427 * var(--dj-u))
			calc(428 * var(--dj-u))
			1fr;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		/* Başlık zemini gibi panel de tek karede açılır/kapanır (bkz. yukarıda
		   "Masaüstü … geçiş yoktur"); sönüm, zeminle yarışan ikinci bir zaman
		   çizgisiydi. */
		transition: none;
	}

/*
	 * Görünürlüğün tek kaynağı `is-open`.
	 *
	 * `:hover` ve `:focus-within` de paneli açtığı sürece panelin üç ayrı
	 * açma kaynağı oluyordu: tetikleyiciye tıklandıktan sonra odak orada
	 * kaldığı için `:focus-within` eşleşmeye devam ediyor, imleç başlıktan
	 * çıkınca betik `is-open`'ı kaldırsa bile panel görünür kalıyordu.
	 * Bu iki kural artık yalnız betiksiz sayfa için geçerli; betik
	 * çalışırken (`html.dj-js`) durumu tek yerden betik yönetir.
	 */
	html:not(.dj-js) .dj-menu--primary > .dj-menu__item--mega:hover > .dj-mega,
	html:not(.dj-js) .dj-menu--primary > .dj-menu__item--mega:focus-within > .dj-mega,
	.dj-menu--primary > .dj-menu__item--mega.is-open > .dj-mega {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* Escape ile kapatıldığında imleç üzerindeyken yeniden açılmasın. */
	.dj-menu--primary > .dj-menu__item--mega.is-dismissed:hover > .dj-mega,
	.dj-menu--primary > .dj-menu__item--mega.is-dismissed > .dj-mega {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

.dj-mega__lists {
	display: contents;
}

.dj-mega__col {
	position: relative;
	grid-row: 1;
	/* XD: ayraç 210'da başlıyor, panel üstü 160 → 50 iç boşluk. */
	padding-block: calc(50 * var(--dj-u));
	padding-inline-start: calc(50 * var(--dj-u));
}

.dj-mega__col:first-child {
	grid-column: 2;
}

.dj-mega__col:nth-child(2) {
	grid-column: 3;
}

/* XD Line 26/27: 1px #dee2e6, panelin altına ve üstüne 50 mesafede. */
.dj-mega__col::before {
	content: "";
	position: absolute;
	inset-block: calc(50 * var(--dj-u));
	inset-inline-start: 0;
	width: 1px;
	background: var(--dj-line);
}

.dj-mega__group + .dj-mega__group {
	margin-block-start: calc(30 * var(--dj-u));
}

/* XD: başlıklar Inter Bold 20. */
.dj-mega__heading {
	margin: 0 0 calc(18.5 * var(--dj-u));
	font-size: calc(20 * var(--dj-u));
	font-weight: var(--dj-fw-bold);
	line-height: 1.2;
	color: var(--dj-ink);
	display: block;
}

a.dj-mega__heading:hover,
a.dj-mega__heading:focus-visible {
	color: var(--dj-muted);
}

/* XD: satırlar Inter Regular 18, satır yüksekliği 48. */
.dj-mega__list {
	margin: 0 0 calc(8 * var(--dj-u));
	padding: 0;
	list-style: none;
}

.dj-mega__link {
	display: block;
	font-size: calc(18 * var(--dj-u));
	font-weight: var(--dj-fw-regular);
	line-height: calc(48 / 18);
	color: var(--dj-ink);
	transition: color var(--dj-transition);
}

/*
 * Satır hover'ı: metin koyulaşır ve solunda kısa bir işaret belirir.
 * İşaret akış dışıdır, satır yüksekliği ve mega menü geometrisi değişmez.
 * Pill zemin ya da büyük hareket kullanılmaz.
 */
/*
 * Bağlantı yerinde durur; hover'da yalnız içindeki metin (`.dj-mega__label`)
 * 2u kayar. Bağlantının kendisi kaydığında imleç sol kenardan girerken
 * hover alanından çıkıp giriyor, satır titriyordu.
 */
.dj-mega__link {
	position: relative;
	display: inline-block;
	transition: color var(--dj-transition);
}

.dj-mega__label {
	display: inline-block;
	transition: transform var(--dj-transition);
}

.dj-mega__link::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(-12 * var(--dj-u));
	inset-block-start: 50%;
	width: calc(6 * var(--dj-u));
	height: 2px;
	background: currentColor;
	transform: translateY(-50%) scaleX(0);
	transition: transform var(--dj-transition);
	pointer-events: none;
}

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

	.dj-mega__link:hover .dj-mega__label {
		transform: translateX(calc(2 * var(--dj-u)));
	}

	.dj-mega__link:hover::before {
		transform: translateY(-50%) scaleX(1);
	}
}

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

.dj-mega__link:focus-visible::before {
	transform: translateY(-50%) scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.dj-mega__link,
	.dj-mega__link::before,
	.dj-mega__label {
		transition: none;
	}

	.dj-mega__link:hover .dj-mega__label {
		transform: none;
	}
}

/*
 * Mega görseli ürün kartı değildir: dekoratif/gezinme görselidir. Hover'da
 * yakınlaştırma, kayma, opaklık, filtre ya da geçiş yoktur — normal ve
 * hover hesaplanmış değerleri birebir aynıdır. Üstünde kaplama, degrade,
 * sözde öğe, gölge veya kenarlık da kullanılmaz.
 */
.dj-mega__media {
	grid-column: 4;
	grid-row: 1;
	position: relative;
	overflow: hidden;
}

/*
 * Görsel kapsayıcısına tam oturur: mutlak konum satır içi görselin
 * baseline boşluğunu da ortadan kaldırır. Kadraj tasarımdaki gibi
 * `cover` ile korunur.
 */
/*
 * Seçici `.dj-mega__media` ile nitelendirilir (0,2,0): WooCommerce kendi
 * `woocommerce-layout.css` dosyasında `.woocommerce img, .woocommerce-page img
 * { height: auto }` (0,1,1) yazıyor ve bu dosya yalnız gerçek WooCommerce
 * sayfalarında (sepet, hesabım, mağaza…) kuyruğa giriyordu. Orada tek sınıflı
 * `.dj-mega__image` (0,1,0) kuralı yeniliyor, `height` `auto`ya düşüyor ve
 * mutlak konumlu değiştirilmiş öğe (img) yüksekliğini `bottom: 0` yerine kendi
 * doğal en-boy oranından alıyordu. Sonuç: görsel sütunun altında kategori
 * başına DEĞİŞEN beyaz şerit (1920×1218 Televizyon → 52.25px, 1920×1310 Beyaz
 * Eşya / İklimlendirme → 17.75px @1440). Panel kabuğu hep aynıydı, farkı
 * yaratan buydu. Sayfa ya da kategori bazlı kural değil, `!important` değil —
 * yalnız kapsayıcıyla nitelendirme.
 */
.dj-mega__media .dj-mega__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	max-width: none;
	transform: none;
	transition: none;
	filter: none;
	opacity: 1;
}

/*
 * Görsel bağlantısı (kategoride "Görsel bağlantısı" girildiyse). Kutuyu
 * tam kaplar; görsel yine `.dj-mega__media .dj-mega__image` kuralıyla aynı
 * kutuya oturur. Odak halkası kutunun içinde çizilir.
 */
.dj-mega__media-link {
	position: absolute;
	inset: 0;
	display: block;
}

.dj-mega__media-link:focus-visible {
	outline-offset: -4px;
}

/*
 * Elementor önizlemesi — "Mega Menü İçeriği" widget'ı (yalnız mega menü
 * şablonunun düzenleyicisinde çizilir, frontend'de bu sarmalayıcı yok).
 * Panel menü öğesinin içinde değil, sayfada durduğu için görünürlüğü
 * `is-open` beklemez ve akışta yer kaplar. Dar ekranda (Elementor Tablet /
 * Mobil) mega panel yoktur; aynı veri mobil çekmecedeki görünümüyle çizilir.
 */
.dj-mega-preview__mobile {
	display: none;
}

@media (min-width: 1024px) {
	.dj-mega-preview .dj-mega {
		position: relative;
		top: auto;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

@media (max-width: 1023px) {
	.dj-mega-preview__mobile {
		display: block;
		padding: 0 var(--dj-page-padding, 20px);
		background: var(--dj-white);
	}
}

/* Mega menü yalnız masaüstünde; mobilde çekmece menü kullanılır. */
@media (max-width: 1023px) {
	.dj-mega {
		display: none;
	}
}


/* ------------------------------------------------------------------ */
/* Açılır panel hover köprüsü                                          */
/* ------------------------------------------------------------------ */

/*
 * Tetikleyici ile panel arasındaki boşluk imleç için ölü bölgeydi: imleç
 * oraya girdiğinde `:hover` düşüyor, panel kapanıp yeniden açılıyordu.
 * Köprü panelin değil TETİKLEYİCİNİN genişliğindedir — panel genişliğinde
 * olsaydı komşu tetikleyicinin üzerini de örter ve iki panel birden açılırdı.
 * Paneller köprülerden üstte çizildiği için panelin içine girildiğinde
 * köprü isabet almaz. Zamanlayıcı kullanılmaz.
 */
.dj-menu--topbar .dj-menu__item--parent > .dj-menu__link,
.dj-lang__trigger {
	position: relative;
}

/* Köprü yalnız işaretçiyle gezilen masaüstünde gerekir; dar ekranda
   tetikleyicinin dışına taşıp yatay kaydırma açmaması için kapalıdır. */
@media (min-width: 1024px) {
	.dj-menu--topbar .dj-menu__item--parent > .dj-menu__link::after,
	.dj-lang__trigger::after {
		content: "";
		position: absolute;
		top: 100%;
		inset-inline: 0 calc(-22 * var(--dj-u));
		height: calc(28 * var(--dj-u));
	}
}


/*
 * İki üst şerit paneli neredeyse aynı yere düşer. Biri açılırken diğerinin
 * sönümlenmesi kısa bir hayalet bırakabildiği için geçiş karşılıklı olarak
 * anında kesilir: her an yalnız bir panel görünür.
 *
 * Bastırma yalnız İMLEÇ ve AÇIK durumuna bakar. `:focus-within` de vardı ve
 * bir tetikleyiciye tıklandıktan sonra odak orada kaldığı için diğer panel
 * imleçle bile açılamıyordu; klavye tekilliği artık betikte (`focusin`)
 * yönetiliyor.
 */
.dj-topbar__side--end:has(.dj-lang:hover) .dj-menu--topbar .dj-menu__submenu,
.dj-topbar__side--end:has(.dj-lang.is-open) .dj-menu--topbar .dj-menu__submenu {
	opacity: 0;
	visibility: hidden;
	transition: none;
}

.dj-topbar__side--end:has(.dj-menu--topbar .dj-menu__item--parent:hover) .dj-lang__menu,
.dj-topbar__side--end:has(.dj-menu--topbar .dj-menu__item--open) .dj-lang__menu {
	opacity: 0;
	visibility: hidden;
	transition: none;
}


/*
 * Üç mega panel tam olarak aynı yere düşer. Bir panel açıkken diğerleri
 * kesin gizlidir; değişim tek karede olur — ne çakışma ne boşluk. (Panel
 * geçişi artık hiçbir durumda yoktur; bu kural öğe değişiminde eskisini
 * aynı karede gizlemeyi güvenceye alır.)
 */
.dj-menu--primary:has(.dj-menu__item--mega.is-open) .dj-menu__item--mega > .dj-mega {
	transition: none;
}

.dj-menu--primary:has(.dj-menu__item--mega.is-open) .dj-menu__item--mega:not(.is-open) > .dj-mega {
	opacity: 0;
	visibility: hidden;
}

/* ------------------------------------------------------------------ */
/* Üst şerit panelleri — dar ekran                                     */
/* ------------------------------------------------------------------ */

/*
 * Masaüstü ölçüleri dar ekrana zorlanmaz: paneller kabın içinde kalır ve
 * görünüm alanını taşmaz. Konum hâlâ kendi tetikleyicisine bağlıdır;
 * genişlik kaba göre sınırlanır.
 */
@media (max-width: 767px) {
	.dj-menu--topbar .dj-menu__submenu {
		width: calc(100vw - var(--dj-page-padding) * 2);
	}

	.dj-lang__menu {
		width: calc(240 * var(--dj-ut));
		max-width: calc(100vw - var(--dj-page-padding) * 2);
	}

	.dj-menu--topbar .dj-menu__submenu .dj-menu__link,
	.dj-lang__item {
		white-space: normal;
	}
}

/* ------------------------------------------------------------------ */
/* Yardımcı popover açıkken başlık araç satırı                          */
/* ------------------------------------------------------------------ */

/*
 * Popover üst şeridin altına, başlığın araç ikonlarının üstüne iner. Geniş
 * Destek içeriği bu satırı tamamen örterken dar dil içeriği soldaki bir
 * ikonu (arama) açıkta bırakıyordu; panelin yanında tek başına duran bu
 * ikon panele aitmiş gibi okunuyordu.
 *
 * Çözüm ikonların kendi tasarımına dokunmaz: yalnız popover AÇIKKEN araç
 * satırı geri çekilir. Kapanınca aynen geri gelir; düzen kaymaz.
 */
/*
 * Yalnız 768 ve üstünde: dar ekranda panel araç satırını zaten tamamen
 * örttüğü için geri çekmeye gerek yok — menü düğmesi görünür kalır.
 */
@media (min-width: 768px) {
	.dj-navbar__actions {
		transition:
			opacity var(--dj-motion-fast) var(--dj-ease-standard),
			visibility var(--dj-motion-fast) var(--dj-ease-standard);
	}

	.dj-header:has(.dj-lang:hover) .dj-navbar__actions,
	.dj-header:has(.dj-lang.is-open) .dj-navbar__actions,
	.dj-header:has(.dj-menu--topbar .dj-menu__item--parent:hover) .dj-navbar__actions,
	.dj-header:has(.dj-menu--topbar .dj-menu__item--open) .dj-navbar__actions {
		opacity: 0;
		visibility: hidden;
	}
}

/* ------------------------------------------------------------------ */
/* Mobil alt gezinme (≤767)                                            */
/*                                                                     */
/* Beş eylem de mevcut bileşenleri tetikler; burada yalnız sunum var.  */
/* Katman sırası mevcut z-index tokenlarını izler:                     */
/*   sayfa < başlık (100) < alt gezinme (120) < perde (190) < çekmece  */
/*   (200). Böylece bir çekmece/pencere açıldığında gezinme üstte       */
/*   kalmaz.                                                            */
/* ------------------------------------------------------------------ */

.dj-mobilenav {
	display: none;
}

/*
 * Çubuk ≤1199'a kadar görünür. Tablette de birincil gezinme dokunmatiktir;
 * ayrı bir tablet bileşeni kurulmaz, aynı beş eylem (Mağaza, Ara,
 * Favoriler, Karşılaştır, Hesabım) aynı işaretleme ve aynı tetikleyicilerle
 * kullanılır. Kategoriler burada değil, başlıktaki hamburger çekmecesinde.
 */
@media (max-width: 1199px) {
	:root {
		/* Sabit çubuğun yüksekliği tek yerde; içerik payı da bunu okur. */
		--dj-mobilenav-height: 66px;
	}

	.dj-mobilenav {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 120;
		display: block;
		background: var(--dj-white);
		border-top: 1px solid var(--dj-line);
		padding-block-end: env(safe-area-inset-bottom, 0px);
	}

	.dj-mobilenav__list {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		margin: 0;
		padding: 0;
		list-style: none;
	}

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

	/*
	 * Dokunma kutusu 44'ün altına inmez; ikon üstte, etiket altta,
	 * ikisi de ortalı. Çevrede kapsül/daire yok — yalnız renk değişir.
	 */
	.dj-mobilenav__link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: 100%;
		min-height: var(--dj-mobilenav-height);
		padding: 8px 4px;
		border: 0;
		background: none;
		color: var(--dj-muted);
		font-family: inherit;
		text-decoration: none;
		cursor: pointer;
		transition: color var(--dj-transition);
	}

	.dj-mobilenav__link svg {
		width: 23px;
		height: 23px;
		flex: 0 0 auto;
	}

	.dj-mobilenav__label {
		font-size: 10.5px;
		font-weight: var(--dj-fw-medium);
		line-height: 1.2;
		letter-spacing: 0.01em;
		white-space: nowrap;
	}

	/* Etkin: yalnız ink'e döner, marka rengi/vurgu rengi kullanılmaz. */
	.dj-mobilenav__link.is-active,
	.dj-mobilenav__link[aria-current="page"],
	.dj-mobilenav__link[aria-expanded="true"] {
		color: var(--dj-ink);
	}

	.dj-mobilenav__link.is-active .dj-mobilenav__label,
	.dj-mobilenav__link[aria-current="page"] .dj-mobilenav__label,
	.dj-mobilenav__link[aria-expanded="true"] .dj-mobilenav__label {
		font-weight: var(--dj-fw-semibold);
	}

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

	/* Favori sayacı: başlıktaki rozetle aynı veri kaynağı. */
	.dj-mobilenav__icon {
		position: relative;
		display: inline-flex;
	}

	.dj-mobilenav__badge {
		position: absolute;
		inset-block-start: -5px;
		inset-inline-start: 100%;
		transform: translateX(-45%);
		min-width: 16px;
		height: 16px;
		padding-inline: 4px;
		border-radius: 999px;
		background: var(--dj-ink);
		color: var(--dj-white);
		font-size: 10px;
		font-weight: var(--dj-fw-bold);
		line-height: 16px;
		text-align: center;
	}

	.dj-mobilenav__badge:empty,
	.dj-mobilenav__badge[hidden] {
		display: none;
	}

	/*
	 * Sabit çubuk sayfanın son satırını örtmesin: gövdeye çubuk yüksekliği
	 * + güvenli alan kadar gerçek alt pay verilir. Alt bilgi böylece
	 * tamamen okunur kalır.
	 */
	body {
		padding-block-end: calc(var(--dj-mobilenav-height) + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * Bir çekmece/pencere/arama katmanı açıkken çubuk sahneden çekilir:
	 * durum ortak kaydırma kilidinden ve panellerin kendi `hidden`
	 * durumundan okunur — sayfa bazlı bir kural yazılmadı.
	 */
	html:has(.dj-drawer:not([hidden])) .dj-mobilenav,
	html:has([data-dj-auth-modal]:not([hidden])) .dj-mobilenav,
	html:has([data-dj-search-panel]:not([hidden])) .dj-mobilenav {
		transform: translateY(100%);
		pointer-events: none;
	}

	.dj-mobilenav {
		transition: transform var(--dj-transition);
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.dj-mobilenav {
		transition: none;
	}
}


/* ------------------------------------------------------------------ */
/* Mobil menü çekmecesi                                                */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	/*
	 * Çekmece, görünen alanın tamamını kaplayan bir katman değil; kenarından
	 * biraz içeride duran bir karttır (ortak mobil yüzey — `--dj-sheet-*`).
	 * Yükseklik sabit verilmez: üst ve alt pay panelin boyunu kurar, böylece
	 * yönetim çubuğu açıkken üst satır kırpılmaz, alt kenar da görünen alanın
	 * dışına taşmaz. Genişlik ayrıca verilmez: dış kutu filtre paneliyle
	 * birebir aynıdır (ortak kural yukarıda). Başlık sabittir, yalnız gövde
	 * kaydırılır.
	 */
	.dj-drawer__panel {
		height: auto;
	}

	.dj-drawer__head {
		flex: 0 0 auto;
		min-height: 68px;
		padding: var(--dj-space-12) var(--dj-space-20);
	}

	/*
	 * Kapatma düğmesi dokunma alanını (44) korur, kutusu logonun optik
	 * satırından taşmaz; çizimi gövdedeki ok sütunuyla aynı kenara yaslanır.
	 */
	.dj-drawer__head .dj-icon-btn {
		width: 44px;
		height: 44px;
		margin-inline-end: -11px;
	}

	.dj-drawer__body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--dj-space-16) var(--dj-space-20)
			calc(var(--dj-space-40) + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * Çekmece logosu ile kapatma düğmesi tek optik satırda durur: ikisi de
	 * satırın dikey ortasına hizalı, logo başlıktakinden büyük.
	 */
	.dj-logo--drawer {
		width: clamp(132px, 40vw, 168px);
	}
}