/* Filtre çekmecesi. */

/*
 * Panel kenardan 50px içeride, üstten/alttan 50px boşluklu, dört köşesi
 * yuvarlatılmış bir kart olarak açılır.
 *
 * Genişlik küçültüldü: 550px, küçülen tipografiye göre fazla genişti ve
 * satırlar yayılıp okunaksızlaşıyordu. Alt sınır içeriğin (ölçü satırı +
 * sayaç, fiyat alanları) sıkışmadan sığdığı ölçü; üst sınır geniş ekranda
 * panelin orantısız büyümesini engeller. 1440'ta ~374, 1920'de 400.
 */
/*
 * Panel ile form aynı öğedir: `.dj-filter { height: 100% }` yüksekliği
 * `inset-block`'tan önce belirliyor, panel üst boşluk kadar ekranın altına
 * taşıyor ve son gruptaki gönder düğmesi görünür alanın dışında kalıyordu
 * (ölçüldü: 1440'ta y 37.5 + h 900, 768'de y 50 + h 1024). Yükseklik
 * serbest bırakılınca üst/alt boşluklar paneli kendisi kurar.
 *
 * Alt kenar görünür alanın tabanına oturur. Onaylı `Filtrele.pdf`'te panel
 * üstten 59 px boşlukla başlar ve 1776 px sürer — hiçbir gerçek ekran
 * yüksekliğine sığmayan bu ölçü, panelin ekranın **altına kadar** devam
 * ettiği anlamına gelir. Simetrik alt boşluk uzun artboard'ın yan etkisiydi;
 * uygulamada yüzen kart hissi veriyor ve panel sayfanın ortasında bitiyordu.
 * Bu yüzden alt boşluk ve alt köşe yuvarlaması kaldırıldı: üst köşeler
 * tasarımdaki gibi yuvarlak, alt kenar ekran tabanında doğal biter.
 * Gövde kaydırması taban `.dj-drawer__body` kuralından gelir
 * (`flex: 1 1 auto; overflow-y: auto`); başlık ve varsa alt eylem şeridi
 * sabit kalır.
 */
.dj-drawer--filter .dj-drawer__panel {
	width: clamp(360px, 26vw, 400px);
	max-width: calc(100vw - 100px);
	height: auto;
	inset-block: var(--dj-space-50) 0;
	inset-inline-start: var(--dj-space-50);
	border-radius: var(--dj-radius-lg) var(--dj-radius-lg) 0 0;
	overflow: hidden;
}

.dj-drawer--filter .dj-drawer__head {
	min-height: 84px;
	padding: var(--dj-space-20) var(--dj-space-40);
}

.dj-drawer--filter .dj-drawer__title {
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-bold);
	margin-inline-end: auto;
}

/*
 * Tasarımda temizleme kontrolü yoktur; yalnız aktif filtre varken beliren
 * ikincil metin bağlantısı olarak durur, başlık düzenini bozmaz.
 */
.dj-filter__clear {
	font-size: var(--dj-fs-14);
	color: var(--dj-muted);
	text-decoration: underline;
	text-underline-offset: 4px;
	margin-inline-end: var(--dj-space-20);
}

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

/*
 * Tasarımın çerçeveli kapatma düğmesi; küçülen tipografiyle aynı oranda
 * (59 → 44) indirildi, biçimi değişmedi.
 */
.dj-drawer--filter .dj-drawer__head .dj-icon-btn {
	width: 44px;
	height: 44px;
	border: 1px solid var(--dj-line);
	border-radius: 50%;
}

.dj-drawer--filter .dj-drawer__head .dj-icon-btn svg {
	width: 16px;
	height: 16px;
}

.dj-filter {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.dj-filter .dj-drawer__body {
	padding: var(--dj-space-12) var(--dj-space-40) var(--dj-space-30);
}

/* Tasarımda gruplar arasında ayraç çizgisi yoktur. */
.dj-filter__group {
	padding-block: var(--dj-space-8);
}

.dj-filter__group-title {
	margin: 0;
	font-size: var(--dj-fs-15);
	font-weight: var(--dj-fw-semibold);
}

.dj-filter__group-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dj-space-12);
	width: 100%;
	padding-block: var(--dj-space-12);
	color: var(--dj-ink);
	text-align: start;
	font: inherit;
}

.dj-filter__group-caret {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	transition: transform var(--dj-transition);
	color: var(--dj-muted);
}

.dj-filter__group.is-open .dj-filter__group-caret {
	transform: rotate(180deg);
}

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

.dj-filter__options {
	display: flex;
	flex-direction: column;
	list-style: none;
}

.dj-filter__option {
	position: relative;
}

.dj-filter__option input {
	position: absolute;
	opacity: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	inset-inline-start: 0;
	top: 9px;
	cursor: pointer;
}

.dj-filter__option label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dj-space-12);
	min-height: 38px;
	padding-inline: 30px 0;
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-medium);
	cursor: pointer;
	color: var(--dj-ink);
}

.dj-filter__option label::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 9px;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--dj-line);
	border-radius: 50%;
	background: var(--dj-white);
	transition: border-color var(--dj-transition), background-color var(--dj-transition);
}

.dj-filter__option label::after {
	content: "";
	position: absolute;
	inset-inline-start: 7px;
	top: 16px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dj-white);
	opacity: 0;
	transition: opacity var(--dj-transition);
}

.dj-filter__option input:checked + label::before {
	border-color: var(--dj-ink);
	background: var(--dj-ink);
}

.dj-filter__option input:checked + label::after {
	opacity: 1;
}

.dj-filter__option input:focus-visible + label::before {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

.dj-filter__option-count {
	color: var(--dj-gray-400);
	font-size: var(--dj-fs-12);
	flex: 0 0 auto;
}

/*
 * Gezinme bölümleri (Ürün Kategorileri / boyut aileleri)
 *
 * Bunlar filtre değil: her satır bir kategori arşivine giden gerçek
 * bağlantıdır, bu yüzden onay kutusu çizilmez ve katlanmaz. Tipografi
 * seçenek satırlarıyla aynı ölçektedir; ayrım ağırlık ve renkle kurulur.
 */
.dj-filter__group--nav .dj-filter__group-static {
	display: block;
	padding-block: var(--dj-space-12);
}

.dj-filter__nav {
	display: flex;
	flex-direction: column;
	list-style: none;
}

/*
 * Seçim dili: her satırın başında bir daire durur, bulunulan arşivde içi
 * dolar. Onay kutusu değildir — satırın kendisi gerçek bir kategori
 * adresine giden bağlantıdır; daire yalnız "şu an buradasın" bilgisini
 * verir. Filtre seçeneklerindeki daireyle aynı ölçü ve aynı çizgi rengi
 * kullanılır, böylece çekmecede tek bir seçim dili olur.
 */
.dj-filter__nav-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dj-space-12);
	min-height: 38px;
	padding-inline: var(--dj-space-8);
	margin-inline: calc(var(--dj-space-8) * -1);
	border-radius: var(--dj-radius-sm);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-regular);
	color: var(--dj-ink);
	transition: background-color var(--dj-transition), color var(--dj-transition);
}

.dj-filter__nav-link::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 1px solid var(--dj-line);
	border-radius: 50%;
	background: var(--dj-white);
	transition: border-color var(--dj-transition);
}

/* Bulunulan arşiv: dairenin içinde dolu nokta. */
.dj-filter__nav-link.is-current::after {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--dj-space-8) + 5px);
	inset-block-start: 50%;
	width: 10px;
	height: 10px;
	margin-block-start: -5px;
	border-radius: 50%;
	background: var(--dj-ink);
}

.dj-filter__nav-link.is-current::before {
	border-color: var(--dj-ink);
}

.dj-filter__nav-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dj-filter__nav-link--root {
	font-weight: var(--dj-fw-semibold);
}

/* Alt terimler ailenin altında bir kademe içeride durur. */
.dj-filter__nav-link--child {
	padding-inline-start: calc(var(--dj-space-8) + var(--dj-space-16));
}

.dj-filter__nav-link--child.is-current::after {
	inset-inline-start: calc(var(--dj-space-8) + var(--dj-space-16) + 5px);
}

.dj-filter__nav-count {
	flex: 0 0 auto;
	font-size: var(--dj-fs-12);
	color: var(--dj-gray-400);
}

a.dj-filter__nav-link:hover {
	background: var(--dj-surface);
	color: var(--dj-ink);
}

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

/* Bulunulan arşiv. */
.dj-filter__nav-link.is-current {
	background: var(--dj-surface);
	font-weight: var(--dj-fw-semibold);
}

/* Ürünü olmayan boyut: bağlantı değil, yalnız kapsam bilgisi. */
.dj-filter__nav-link.is-empty {
	color: var(--dj-gray-400);
	cursor: default;
}

.dj-filter__nav-link.is-empty::before {
	border-color: var(--dj-line);
	opacity: 0.5;
}

/* Fiyat aralığı */

.dj-filter__range {
	display: flex;
	align-items: flex-end;
	gap: var(--dj-space-16);
}

.dj-filter__range .dj-field {
	flex: 1 1 0;
	min-width: 0;
}

.dj-filter__range .dj-field label {
	display: block;
	margin-bottom: var(--dj-space-8);
	font-size: var(--dj-fs-14);
	color: var(--dj-muted);
}

.dj-filter__range .dj-input {
	height: 44px;
	width: 100%;
	border-radius: var(--dj-radius-pill);
	font-size: var(--dj-fs-14);
	padding-inline: var(--dj-space-16);
	appearance: textfield;
}

/* Tasarımda sayı artırma okları yok. */
.dj-filter__range .dj-input::-webkit-outer-spin-button,
.dj-filter__range .dj-input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.dj-filter__range-sep {
	padding-bottom: 12px;
	font-size: var(--dj-fs-16);
	color: var(--dj-ink);
}

/*
 * Tasarımdaki çift tutamaklı fiyat kaydırıcısı. İki ayrı `range` girişi
 * üst üste bindirilir; değerler sayısal alanlarla çift yönlü eşitlenir.
 */
.dj-filter__slider {
	position: relative;
	height: 20px;
	margin-block: 24px 20px;
}

.dj-filter__slider-track {
	position: absolute;
	inset-block-start: 7px;
	inset-inline: 0;
	height: 6px;
	border-radius: var(--dj-radius-pill);
	background: var(--dj-line);
}

.dj-filter__slider-fill {
	position: absolute;
	inset-block-start: 7px;
	height: 6px;
	border-radius: var(--dj-radius-pill);
	background: var(--dj-gray-400);
}

.dj-filter__slider input[type="range"] {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	width: 100%;
	height: 20px;
	margin: 0;
	background: none;
	appearance: none;
	pointer-events: none;
}

.dj-filter__slider input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: var(--dj-ink);
	cursor: pointer;
	pointer-events: auto;
}

.dj-filter__slider input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: var(--dj-ink);
	cursor: pointer;
	pointer-events: auto;
}

.dj-filter__slider input[type="range"]:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/*
 * Dar panelde özet metni ile düğme yan yana sığmıyor; satır sarılır, özet
 * üstte tam genişlikte, düğme altında sağa yaslı durur.
 */
.dj-filter__apply {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--dj-space-12) var(--dj-space-20);
}

.dj-filter__range-summary {
	flex: 1 1 100%;
}

.dj-filter__range-summary {
	margin: 0;
	font-size: var(--dj-fs-14);
	color: var(--dj-ink);
}

/* Tasarımın 160×60 pill düğmesi; tipografiyle birlikte 132×42'ye indi. */
.dj-filter__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 132px;
	height: 42px;
	border-radius: var(--dj-radius-pill);
	background: var(--dj-line);
	color: var(--dj-ink);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-semibold);
	transition: background-color var(--dj-transition);
}

.dj-filter__submit:hover {
	background: var(--dj-gray-300);
	color: var(--dj-ink);
}

/* Alt aksiyonlar */

.dj-filter__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dj-space-16);
	justify-content: flex-end;
	padding: 0 var(--dj-space-40) var(--dj-space-30);
	background: var(--dj-white);
}

/*
 * Dar ekranda filtre paneli sayfa genişliğini alır ama kenardan kenara
 * yapışmaz: dış boşluk, köşe yarıçapı ve yönetim çubuğu payı site genelindeki
 * mobil yüzey belirteçlerinden gelir (`--dj-sheet-*`, header.css).
 */
@media (max-width: 767px) {
	.dj-drawer--filter .dj-drawer__panel {
		width: calc(100% - var(--dj-sheet-gap) * 2);
		max-width: none;
		inset-block: calc(var(--dj-sheet-safe-top) + var(--dj-sheet-gap)) var(--dj-sheet-gap);
		inset-inline-start: var(--dj-sheet-gap);
		border-radius: var(--dj-sheet-radius);
	}

	.dj-drawer--filter .dj-drawer__head {
		min-height: 72px;
		padding: var(--dj-space-16) var(--dj-space-20);
	}

	.dj-drawer--filter .dj-drawer__title {
		font-size: var(--dj-fs-16);
	}

	.dj-drawer--filter .dj-drawer__head .dj-icon-btn {
		width: 44px;
		height: 44px;
	}

	.dj-filter .dj-drawer__body {
		padding-inline: var(--dj-space-20);
	}

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

	.dj-filter__option label {
		min-height: 40px;
		font-size: var(--dj-fs-14);
	}

	.dj-filter__actions {
		padding: 0 var(--dj-space-20) var(--dj-space-24);
	}

	.dj-filter__apply {
		flex-wrap: wrap;
		gap: var(--dj-space-16);
	}

	.dj-filter__submit {
		width: 100%;
	}
}