/**
 * Favoriler: başlıktaki çekmece ve “Favorilerim” sayfası.
 *
 * İkisi de aynı satır bileşenini kullanır; ayrı bir tasarım dili kurulmaz.
 * Tipografi, renk, yarıçap, düğme ve odak sistemi mevcut tokenlardan gelir.
 */

.dj-wishlist-list,
.dj-wishlist-table__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------------ */
/* Ortak satır parçaları                                               */
/* ------------------------------------------------------------------ */

/*
 * Ürün görseli kutunun içine tamamı sığacak biçimde oturur: kırpma ve `cover`
 * yok. Kaynak da oransal bir boyuttur — `woocommerce_thumbnail` kare kırptığı
 * için ürünün yalnız bir bölümü görünüyordu (bkz. `Wishlist::item()`).
 * `overflow: hidden` yalnız hover'daki mikro yakınlaştırmanın kutudan
 * taşmaması için.
 */
.dj-wishlist-item__media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	overflow: hidden;
	padding: 8px;
	border-radius: var(--dj-radius-md);
	background: var(--dj-surface);
	transition: background-color 220ms ease;
}

.dj-wishlist-item__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform 220ms ease;
}

/* Görsel ya da ad üzerinde hover: kutu bir tık koyulaşır, ürün hafif büyür. */
@media (hover: hover) {
	.dj-wishlist-item__media:hover,
	:is(.dj-wishlist-item, .dj-wishlist-row__product):has(.dj-wishlist-item__title:hover) .dj-wishlist-item__media {
		background: var(--dj-line);
	}

	.dj-wishlist-item__media:hover img,
	:is(.dj-wishlist-item, .dj-wishlist-row__product):has(.dj-wishlist-item__title:hover) .dj-wishlist-item__media img {
		transform: scale(1.025);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dj-wishlist-item__media img {
		transition: none;
		transform: none !important;
	}
}

/* Ad en fazla iki satır; hover'da alt çizgi yok, yalnız renk mikro değişimi. */
.dj-wishlist-item__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-width: 0;
	color: var(--dj-ink);
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
	line-height: 1.45;
	text-decoration: none;
	transition: color 180ms ease;
}

@media (hover: hover) {
	.dj-wishlist-item__title:hover {
		color: var(--dj-muted);
	}
}

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

/* Fiyat işaretlemesi WooCommerce'ten gelir; burada yalnız tonu ayarlanır. */
.dj-wishlist-item__price {
	color: var(--dj-ink);
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-semibold);
	line-height: 1.3;
}

.dj-wishlist-item__price del {
	display: block;
	margin-top: 2px;
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-regular);
	text-decoration: line-through;
}

.dj-wishlist-item__price ins {
	background: transparent;
	text-decoration: none;
}

/*
 * İndirimli fiyatta sitenin genel biçimi “güncel - eski” ayracını taşır.
 * Dar sütunda bu ayraç satırı ikiye bölüyordu; favori bağlamında ayraç
 * gizlenir, iki fiyat arasındaki ayrım renk ve üstü çizili tonla kurulur.
 * Fiyat işaretlemesi yine WooCommerce'ten gelir, kopyalanmaz.
 */
.dj-wishlist-item__price .dj-price__sep {
	display: none;
}

/*
 * Favori satırındaki eylem sitenin siyah düğmesidir. Kenarlık normalde de
 * vardır (zeminle aynı renk), böylece hover'da beyaz zemine geçerken kutu
 * ölçüsü değişmez — düzen kayması sıfır. Hızlı Bakış ve giriş penceresindeki
 * koyu düğmeyle aynı davranış.
 */
.dj-wishlist-item__cta,
.dj-wishlist-row__action .dj-btn {
	box-sizing: border-box;
	min-height: 44px;
	padding-inline: 22px;
	border: 1px solid var(--dj-ink);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-bold);
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

@media (hover: hover) {
	.dj-wishlist-item__cta:hover,
	.dj-wishlist-row__action .dj-btn:hover {
		background: var(--dj-white);
		border-color: var(--dj-ink);
		color: var(--dj-ink);
	}
}

.dj-wishlist-item__cta:focus-visible,
.dj-wishlist-row__action .dj-btn:focus-visible {
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/* Stok bilgisi sakin kalır: küçük punto, nokta işareti, baskın renk yok. */
.dj-wishlist-item__stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--dj-fs-14);
	color: var(--dj-muted);
}

.dj-wishlist-item__stock::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.dj-wishlist-item__stock.is-in {
	color: var(--dj-green);
}

.dj-wishlist-item__stock.is-out {
	color: var(--dj-muted);
}

/*
 * Kaldırma düğmesi yalnız hover/odakta yüzey değiştirir. Görünen daire 32 px;
 * dokunma alanı görünmez bir katmanla her yönde 6 px genişler (44 px) —
 * ızgara sütunu ve hover dairesi değişmez.
 */
.dj-wishlist-item__remove {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--dj-muted);
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease;
}

.dj-wishlist-item__remove::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
}

.dj-wishlist-item__remove svg {
	width: 15px;
	height: 15px;
}

@media (hover: hover) {
	.dj-wishlist-item__remove:hover {
		background: var(--dj-line);
		color: var(--dj-ink);
	}
}

.dj-wishlist-item__remove:focus-visible {
	background: var(--dj-surface);
	color: var(--dj-ink);
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/* Çıkarılan satır yumuşak kapanır; hareket azaltma tercihinde anında gider. */
[data-dj-wishlist-row].is-leaving {
	overflow: hidden;
	opacity: 0;
	transition: height 180ms ease, opacity 150ms ease, margin 180ms ease, padding 180ms ease;
	margin-block: 0;
	padding-block: 0;
	border-color: transparent;
}

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

/*
 * Başlık ve alt eylem sabit, yalnız liste kaydırılır. Panelin kendisi
 * sütun düzenine alınır; çekmecenin aç/kapa davranışına dokunulmaz.
 */
.dj-drawer--wishlist .dj-drawer__panel {
	display: flex;
	flex-direction: column;
	/*
	 * Genel çekmece genişliği `--dj-u` ile küçülüyor; favori satırı görsel,
	 * fiyat, stok ve düğme taşıdığı için okunabilirlik tabanı ister. Taban
	 * ekran genişliğiyle sınırlıdır, dar ekranda taşma oluşmaz.
	 * Aç/kapa davranışı ve animasyon değişmedi.
	 */
	/*
	 * 430–470 px bandı, ekran genişliğiyle sınırlı. `clamp()`'in alt sınırı
	 * üst sınırı geçerse alt sınır kazandığı için ekran sınırı dışarıda,
	 * `min()` ile uygulanır — dar ekranda çekmece taşmaz.
	 */
	width: min(clamp(430px, calc(470 * var(--dj-u)), 470px), 92vw);
}

.dj-drawer--wishlist .dj-drawer__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.dj-drawer__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-height: 64px;
	padding: var(--dj-space-12) var(--dj-space-20);
	border-top: 1px solid var(--dj-line);
	background: var(--dj-white);
}

/*
 * Çekmecenin alt eylemi sitenin mevcut ikincil (outline) CTA'sıdır: ürün
 * satırındaki siyah “Satın Al” birincil kalır, bu düğme daha sakin okunur.
 * Buraya yalnız yerleşim yazılır — zemin, çerçeve, tipografi, köşe, hover ve
 * ok davranışı `.dj-btn--outline` / `.dj-btn--sm` bileşeninden gelir.
 *
 * Genişlik içeriğe göredir ama çekmecede dengeli dursun diye bir alt sınır
 * vardır; dar ekranda kullanılabilir genişliğe yayılır.
 */
.dj-wishlist-all {
	min-width: min(240px, 100%);
	max-width: 100%;
}

@media (max-width: 480px) {
	.dj-wishlist-all {
		width: 100%;
	}
}

/*
 * Çekmece satırı: ürün bağlantısı (görsel + ad) üstte, altında fiyat/stok/eylem.
 * Kaldırma sağ üstte, sabit genişlikte bir sütunda — satır kaldırılırken metin
 * kolonu yerinden oynamaz.
 */
/*
 * Çekmece satırı: solda görsel, sağda ad → fiyat → stok → eylem, sağ üstte
 * kaldırma. Kaldırma sütunu sabit genişlikte olduğu için satır kaldırılırken
 * metin kolonu yerinden oynamaz.
 */
.dj-wishlist-item {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) 32px;
	gap: 8px 18px;
	padding-block: 20px;
	border-bottom: 1px solid var(--dj-line);
}

.dj-wishlist-item:first-child {
	padding-block-start: 6px;
}

.dj-wishlist-item .dj-wishlist-item__media {
	width: 88px;
	height: 88px;
	grid-column: 1;
	grid-row: 1 / span 2;
	/* Görselin üstü ürün adının üstüyle aynı hizada başlar. */
	align-self: start;
}

.dj-wishlist-item .dj-wishlist-item__title {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	font-size: var(--dj-fs-16);
}

.dj-wishlist-item .dj-wishlist-item__remove {
	grid-column: 3;
	grid-row: 1;
	align-self: start;
}

.dj-wishlist-item__body {
	display: grid;
	gap: 7px;
	justify-items: start;
	min-width: 0;
	grid-column: 2 / -1;
	grid-row: 2;
}

.dj-wishlist-item__cta {
	min-width: 160px;
	margin-top: 5px;
}

/* ------------------------------------------------------------------ */
/* Boş durum                                                           */
/* ------------------------------------------------------------------ */

.dj-wishlist-empty {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding-block: var(--dj-space-60);
	text-align: center;
}

.dj-wishlist-empty__icon {
	display: inline-flex;
	color: var(--dj-gray-400);
}

.dj-wishlist-empty__icon svg {
	width: 46px;
	height: 46px;
}

.dj-wishlist-empty__title {
	margin: 8px 0 0;
	color: var(--dj-ink);
	font-size: var(--dj-fs-18);
	font-weight: var(--dj-fw-semibold);
}

.dj-wishlist-empty__text {
	margin: 0;
	max-width: 340px;
	color: var(--dj-muted);
	font-size: var(--dj-fs-14);
	line-height: 1.5;
}

.dj-wishlist-empty__cta {
	margin-top: var(--dj-space-16);
}

/* ------------------------------------------------------------------ */
/* “Favorilerim” sayfası                                               */
/* ------------------------------------------------------------------ */

.dj-wishlist-page {
	margin-block-start: var(--dj-space-40);
}

/*
 * Sayfadaki boş durum başlığı: `--dj-fs-18` 1440'ta 14 px'e iniyor ve altındaki
 * 14 px açıklamayla aynı boya düşüyordu. Sayfada 18 px tabanı; çekmecenin
 * kompakt boş durumu değişmez.
 */
.dj-wishlist-page .dj-wishlist-empty__title {
	font-size: max(18px, calc(18 * var(--dj-ut)));
}

/*
 * Kolon oranları esnek birimlerle kurulur (sabit px yok): ürün bilgisi baskın,
 * diğerleri içeriğine göre dengeli. Son dar sütun kaldırma düğmesinindir.
 */
.dj-wishlist-table__head,
.dj-wishlist-row {
	display: grid;
	grid-template-columns: minmax(0, 41fr) minmax(0, 14fr) minmax(0, 17fr) minmax(0, 11fr) minmax(0, 17fr) 32px;
	align-items: center;
	gap: var(--dj-space-16);
}

/*
 * Başlık satırı yönetim tablosu gibi değil: yalnız ince bir ayraç ve muted
 * etiketler. Kutu, dolgu ya da zemin yok.
 */
/* Başlıklar ortalı; ürün hücresinin kendi içeriği soldan okunmaya devam eder. */
.dj-wishlist-table__head {
	padding-block-end: 14px;
	border-bottom: 1px solid var(--dj-line);
	color: var(--dj-ink);
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-semibold);
	text-align: center;
}

/* Satır ritmi: ayraçtan içeriğe 22 px — önceki 24'ten bir tık sıkı. */
.dj-wishlist-row {
	padding-block: 22px;
	border-bottom: 1px solid var(--dj-line);
	text-align: center;
}

/*
 * Ayraç satırlar arasındadır, listenin altında değil: son ürünün alt çizgisi
 * kaldırılır. Kural satır sayısından bağımsızdır — tek ürün varsa hiç ayraç
 * görünmez, çok üründe yalnız aralar ayrılır.
 */
.dj-wishlist-row:last-child {
	border-bottom: 0;
}

.dj-wishlist-row__product {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
	text-align: start;
}

.dj-wishlist-row__product .dj-wishlist-item__media {
	width: 132px;
	height: 132px;
}

/*
 * Ürün adı satırın ana bilgisidir: `--dj-fs-18` 1440'ta 14 px'e iniyor, 16 px
 * fiyat ve tarihin altında kalıyordu. 16 px tabanı; 1920'de tasarımın 18'i.
 */
.dj-wishlist-row .dj-wishlist-item__title {
	font-size: max(16px, calc(18 * var(--dj-ut)));
}

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

/* Tarih üstte koyu, saat altında sessiz ve bir tık küçük. */
.dj-wishlist-row__date {
	display: block;
	color: var(--dj-ink);
	font-size: var(--dj-fs-16);
}

.dj-wishlist-row__time {
	display: block;
	margin-top: 3px;
	font-size: var(--dj-fs-14);
}

.dj-wishlist-row__stock .dj-wishlist-item__stock {
	color: var(--dj-green);
}

.dj-wishlist-row__stock .dj-wishlist-item__stock.is-out {
	color: var(--dj-muted);
}

/* Fiyat kolonu ortalı; iki fiyat arasında gereksiz boşluk yok. */
.dj-wishlist-row__price .dj-wishlist-item__price {
	text-align: center;
}

/* Satır içi etiket yalnız mobil kartta görünür. */
.dj-wishlist-row__label {
	display: none;
}

.dj-wishlist-row__action {
	display: flex;
	justify-content: center;
}

.dj-wishlist-row__action .dj-btn {
	width: 100%;
	max-width: 190px;
}

@media (max-width: 1199px) {
	/*
	 * Tablet aralığında ürün kolonu bir tık daralır, eylem kolonu genişler:
	 * en uzun etiket (“Seçenekleri Gör”) düğmeye sığsın.
	 */
	.dj-wishlist-table__head,
	.dj-wishlist-row {
		grid-template-columns: minmax(0, 34fr) minmax(0, 14fr) minmax(0, 16fr) minmax(0, 11fr) minmax(0, 25fr) 32px;
		gap: var(--dj-space-12);
	}

	.dj-wishlist-row__product {
		gap: 14px;
	}

	.dj-wishlist-row__product .dj-wishlist-item__media {
		width: 104px;
		height: 104px;
	}

	.dj-wishlist-row .dj-wishlist-item__title {
		font-size: var(--dj-fs-16);
	}

	.dj-wishlist-row__action .dj-btn {
		padding-inline: 12px;
	}
}

/*
 * Tablet ve mobilde tablo sıkıştırılmaz: 768'de beş sütun ürün adını 84 px'e,
 * tarihi üç, “Stokta yok”u iki satıra eziyordu. Başlık satırı gizlenir, her
 * ürün soldan okunan bir satır kartına dönüşür; yatay kaydırma oluşmaz.
 *
 * Tablet: [görsel][ad · fiyat · stok · tarih][eylem][kaldır]
 * Mobil:  [görsel][ad · fiyat · stok · tarih][kaldır], eylem altta tam genişlik.
 *
 * Ürün hücresi `display: contents` ile açılır; işaretleme ve sıra aynı kalır.
 */
@media (max-width: 1023px) {
	.dj-wishlist-table__head {
		display: none;
	}

	.dj-wishlist-row {
		grid-template-columns: 120px minmax(0, 1fr) 180px 32px;
		grid-template-rows: auto auto auto 1fr;
		grid-template-areas:
			"media title action remove"
			"media price action remove"
			"media stock action remove"
			"media added action remove";
		align-items: start;
		gap: 6px 20px;
		padding-block: 20px;
		text-align: start;
	}

	.dj-wishlist-row__product {
		display: contents;
	}

	.dj-wishlist-row__product .dj-wishlist-item__media {
		grid-area: media;
		width: 120px;
		height: 120px;
	}

	.dj-wishlist-row__product .dj-wishlist-item__title {
		grid-area: title;
	}

	.dj-wishlist-row__price {
		grid-area: price;
	}

	.dj-wishlist-row__price .dj-wishlist-item__price {
		text-align: start;
	}

	.dj-wishlist-row__stock {
		grid-area: stock;
	}

	.dj-wishlist-row__added {
		grid-area: added;
	}

	/* Tarih ve saat tek satır: “12 Eylül 2026 · 23:43”. */
	.dj-wishlist-row__date,
	.dj-wishlist-row__time {
		display: inline;
		margin-top: 0;
		font-size: var(--dj-fs-14);
	}

	.dj-wishlist-row__time::before {
		content: " · ";
	}

	.dj-wishlist-row__action {
		grid-area: action;
		align-self: center;
	}

	.dj-wishlist-row__action .dj-btn {
		max-width: none;
	}

	.dj-wishlist-row .dj-wishlist-item__remove {
		grid-area: remove;
	}
}

@media (max-width: 767px) {
	.dj-wishlist-row {
		grid-template-columns: 96px minmax(0, 1fr) 32px;
		grid-template-rows: auto auto auto 1fr auto;
		grid-template-areas:
			"media title title-end"
			"media price price"
			"media stock stock"
			"media added added"
			"action action action";
		gap: 6px 16px;
	}

	.dj-wishlist-row__product .dj-wishlist-item__media {
		width: 96px;
		height: 96px;
	}

	.dj-wishlist-row .dj-wishlist-item__remove {
		grid-area: title-end;
	}

	.dj-wishlist-row__action {
		align-self: stretch;
		margin-top: 10px;
	}
}

/* Dar ekranda ortak mobil yüzey ölçüsü (bkz. header.css `--dj-sheet-*`). */
@media (max-width: 767px) {
	.dj-drawer--wishlist .dj-drawer__panel {
		width: calc(100% - var(--dj-sheet-gap) * 2);
		max-width: none;
	}
}