/**
 * Hızlı Bakış modalı.
 *
 * Site tasarım dilini kullanır: beyaz yüzey, mevcut yarıçap ve tipografi
 * tokenları, siyah birincil düğme, açık arka perde ve mevcut ikon ailesi.
 * Masaüstünde iki sütun, dar ekranda tek sütun; pencere hiçbir boyutta
 * görünümden taşmaz, gerekirse içeride kaydırılır.
 */

.dj-quick-view {
	position: fixed;
	inset: 0;
	/* Çekmece seviyesi: başlık (100), bindirme (190) ve karşılaştırma
	   çubuğunun (120) üstünde kalır. */
	z-index: var(--dj-z-drawer);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--dj-space-30);
}

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

.dj-quick-view__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 18, 19, 0.38);
}

.dj-quick-view__dialog {
	position: relative;
	width: min(calc(1240 * var(--dj-u)), 100%);
	max-height: calc(100dvh - var(--dj-space-60));
	overflow-y: auto;
	padding: var(--dj-space-50);
	border-radius: var(--dj-radius-lg);
	background: var(--dj-white);
	box-shadow: var(--dj-shadow-md);
}

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

.dj-quick-view__close {
	position: absolute;
	inset-block-start: var(--dj-space-20);
	inset-inline-end: var(--dj-space-20);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(44 * var(--dj-u));
	height: calc(44 * var(--dj-u));
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dj-surface);
	color: var(--dj-ink);
	transition: background-color var(--dj-transition);
}

.dj-quick-view__close:hover {
	background: var(--dj-line);
}

.dj-quick-view__close svg {
	width: calc(20 * var(--dj-u));
	height: calc(20 * var(--dj-u));
}

/* --- Düzen --- */

.dj-quick-view__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--dj-space-50);
	/* Kısa açıklaması olmayan üründe metin sütunu görselden kısa kalıyor;
	   ortalanınca pencerenin altında boşluk birikmiyor. */
	align-items: center;
}

.dj-quick-view__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: var(--dj-space-20);
	border-radius: var(--dj-radius-md);
	background: var(--dj-surface);
}

.dj-quick-view__image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.dj-quick-view__thumbs {
	display: flex;
	gap: var(--dj-space-12);
	margin-block-start: var(--dj-space-12);
	flex-wrap: wrap;
}

.dj-quick-view__thumb {
	width: calc(72 * var(--dj-u));
	height: calc(72 * var(--dj-u));
	padding: 4px;
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-sm);
	background: var(--dj-white);
	transition: border-color var(--dj-transition);
}

.dj-quick-view__thumb.is-active,
.dj-quick-view__thumb:hover {
	border-color: var(--dj-ink);
}

.dj-quick-view__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dj-quick-view__body {
	display: flex;
	flex-direction: column;
	/* İki yeni satır eklendiği için dikey ritim 2 px sıkıldı. */
	gap: calc(var(--dj-space-16) - 2px);
}

.dj-quick-view__category {
	font-size: var(--dj-fs-14-fluid);
	font-weight: var(--dj-fw-medium);
	color: var(--dj-muted);
}

.dj-quick-view__title {
	margin: 0;
	font-size: var(--dj-fs-28);
	font-weight: var(--dj-fw-bold);
	line-height: var(--dj-lh-snug);
	color: var(--dj-ink);
}

/*
 * Puan satırı: ürün kartındaki rozetle aynı dil (aynı yıldız çizimi ve
 * `--dj-star` rengi), yalnız daha kompakt — yeni bir yıldız bileşeni
 * kurulmadı. Yalnız gerçek değerlendirme varsa basılır.
 */
.dj-quick-view__rating {
	display: inline-flex;
	align-items: center;
	gap: calc(6 * var(--dj-u));
	margin: 0;
	font-size: var(--dj-fs-14);
	color: var(--dj-gray-600);
}

.dj-quick-view__rating svg {
	width: calc(15 * var(--dj-u));
	height: calc(14.3 * var(--dj-u));
	color: var(--dj-star);
	flex: 0 0 auto;
}

.dj-quick-view__rating-value {
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-ink);
}

.dj-quick-view__rating-count {
	color: var(--dj-muted);
}

/*
 * Fiyat ve indirim aynı satırda. Hizalama dikey merkezden yapılır: rozetin
 * kendi iç boşluğu olduğu için temel çizgi (baseline) hizası onu 2–3 px
 * yukarı kaydırıyordu. Manuel `top`/`translate` düzeltmesi kullanılmaz.
 */
.dj-quick-view__price-row {
	display: flex;
	align-items: center;
	gap: var(--dj-space-12);
	flex-wrap: wrap;
}

/*
 * Kompakt indirim etiketi — karttaki büyük kampanya kutusu değil. Oran
 * mevcut `dijitsu_discount_percentage()` yardımcısından gelir.
 */
.dj-quick-view__discount {
	display: inline-flex;
	align-items: center;
	padding: calc(3 * var(--dj-u)) calc(10 * var(--dj-u));
	border-radius: var(--dj-radius-sm);
	background: var(--dj-red);
	color: var(--dj-white);
	font-size: var(--dj-fs-12);
	font-weight: var(--dj-fw-semibold);
	line-height: 1.35;
	white-space: nowrap;
}

.dj-quick-view__price {
	font-size: var(--dj-fs-26);
}

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

.dj-quick-view__price del,
.dj-quick-view__price del .amount {
	color: var(--dj-gray-400);
	font-weight: var(--dj-fw-semibold);
}

.dj-quick-view__stock .stock {
	margin: 0;
	font-size: var(--dj-fs-16);
}

.dj-quick-view__stock .in-stock {
	color: var(--dj-green);
}

.dj-quick-view__stock .out-of-stock {
	color: var(--dj-red);
}

/*
 * Kısa açıklama gövde tipografisindedir ve ikincil renktedir: başlıktan
 * belirgin şekilde hafif kalır. Uzunluk sınırlanmaz — gerçekten uzun bir
 * kısa açıklama gelirse pencerenin kendi kaydırması devreye girer; metin
 * CSS ile kırpılmaz.
 */
/*
 * Uzun kısa açıklama pencereyi uzatmasın: en fazla üç satır gösterilir.
 * Kırpma yalnız görüntüdedir — metin sunucu tarafında kesilmez, kaynak
 * açıklama olduğu gibi kalır. Kısa açıklamalar doğal boyunda görünür.
 */
.dj-quick-view__short {
	font-size: 15px;
	line-height: 1.6;
	color: var(--dj-muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.dj-quick-view__short p {
	margin: 0;
}

.dj-quick-view__short p + p {
	margin-block-start: var(--dj-space-8);
}

/* --- Eylem satırları --- */

.dj-quick-view__form {
	display: flex;
	flex-direction: column;
	gap: var(--dj-space-16);
	margin-block-start: var(--dj-space-8);
}

.dj-quick-view__row {
	display: flex;
	align-items: center;
	gap: var(--dj-space-16);
	flex-wrap: wrap;
}

.dj-quick-view__row--secondary {
	gap: var(--dj-space-12);
}

.dj-quick-view__buy {
	min-height: var(--dj-button-height);
	padding-inline: var(--dj-space-40);
	border-radius: var(--dj-radius-pill);
	justify-content: center;
	flex: 1 1 auto;
}

.dj-quick-view__cart {
	min-height: var(--dj-button-height);
	padding-inline: var(--dj-space-40);
	border-radius: var(--dj-radius-pill);
	justify-content: center;
	flex: 1 1 auto;
}

/*
 * Favori ve karşılaştırma tek bir eylem ailesidir: ikisi de aynı zemin,
 * kenarlık, renk ve süreyi kullanır. Normalde beyaz yüzey + koyu ikon,
 * hover ve klavye odağında koyu yüzey + beyaz ikon. İkon üzerinde ayrı bir
 * hareket ya da kısmi dolgu yok; ölçek, döndürme ve kaydırma kullanılmaz,
 * bu yüzden kutu ölçüsü ve konum sabit kalır.
 */
.dj-quick-view__row--secondary .dj-icon-btn {
	transition:
		background-color var(--dj-transition),
		border-color var(--dj-transition),
		color var(--dj-transition);
}

@media (hover: hover) {
	.dj-quick-view__row--secondary .dj-icon-btn:hover {
		background: var(--dj-ink);
		border-color: var(--dj-ink);
		color: var(--dj-white);
	}
}

.dj-quick-view__row--secondary .dj-icon-btn:focus-visible {
	background: var(--dj-ink);
	border-color: var(--dj-ink);
	color: var(--dj-white);
	outline: 2px solid var(--dj-focus);
	outline-offset: 2px;
}

/*
 * Kalp hover'da kısmen dolmaz — karşılaştırmada böyle bir karşılığı yok ve
 * iki eylem birebir aynı davranmalı. Dolgu yalnız favori **durumunu**
 * anlatır; o durum aşağıda korunur.
 */
.dj-quick-view__row--secondary .dj-fav:not(.is-active):hover .dj-icon__fill,
.dj-quick-view__row--secondary .dj-fav:not(.is-active):focus-visible .dj-icon__fill {
	fill: none;
}

/* Seçili favori dolu kalır; üzerine gelince ikisi de aynı hover'a döner. */
.dj-quick-view__row--secondary .dj-fav.is-active .dj-icon__fill {
	fill: currentColor;
}

/*
 * CTA hiyerarşisi.
 *
 *   Sepete Ekle    → BİRİNCİL: dolu siyah yüzey.
 *   Hemen Satın Al → İKİNCİL: `.dj-cta--secondary` (beyaz, çerçeveli, oklu).
 *
 * Her iki düğmenin durumu **yalnız kendi sınıfı üzerinde** tanımlıdır: üst
 * öğe seçicisi yoktur, `:hover` doğrudan düğmenin kendisindedir. Bu yüzden
 * birinin hover'ı diğerini, adet alanını, favoriyi ya da karşılaştırmayı
 * etkilemez. Bu dosya `base.css`ten sonra yüklendiği için `.dj-btn--primary`
 * ile aynı özgüllükte yazmak yeterlidir; `!important` ya da yapay özgüllük
 * artırımı kullanılmaz.
 *
 * Kenarlık her durumda 1 px'tir, böylece kutu ölçüsü durumlar arasında
 * değişmez — ölçek, yükselme ve gölge yok.
 */
.dj-quick-view__cart {
	border: 1px solid transparent;
	transition:
		background-color var(--dj-transition),
		border-color var(--dj-transition),
		color var(--dj-transition);
}

/* Birincil — Sepete Ekle */
.dj-quick-view__cart {
	background: var(--dj-ink);
	border-color: var(--dj-ink);
	color: var(--dj-white);
}

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

.dj-quick-view__cart:focus-visible {
	background: var(--dj-white);
	border-color: var(--dj-ink);
	color: var(--dj-ink);
}

/*
 * İkincil — Hemen Satın Al: sitenin ikincil CTA'sı (`.dj-cta--secondary`,
 * base.css) — beyaz, çerçeveli, oklu; hover'da çerçeve siyaha döner, ok
 * 2 px ilerler. Burada yalnız satır ölçüsü (yükseklik, punto) verilir;
 * ortak CTA kuralı (0,2,0) özgüllüğündedir, seçici satır kapsayıcısıyla bir
 * kademe güçlü.
 */
.dj-quick-view__row button.dj-quick-view__buy {
	min-height: var(--dj-button-height);
	padding-inline: var(--dj-space-40);
	font-size: var(--dj-fs-20);
}

.dj-quick-view__cart.is-busy {
	opacity: 0.7;
	pointer-events: none;
}

.dj-quick-view__feedback {
	margin: 0;
	min-height: 1em;
	font-size: var(--dj-fs-14);
	color: var(--dj-green);
}

.dj-quick-view__feedback:empty {
	display: none;
}

.dj-quick-view__feedback.is-error {
	color: var(--dj-red);
}

/* --- Yükleniyor / hata --- */

.dj-quick-view__state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--dj-space-16);
	min-height: calc(240 * var(--dj-u));
	text-align: center;
	color: var(--dj-muted);
}

.dj-quick-view__state--error {
	color: var(--dj-ink);
}

.dj-quick-view__spinner {
	width: calc(32 * var(--dj-u));
	height: calc(32 * var(--dj-u));
	border: 2px solid var(--dj-line);
	border-top-color: var(--dj-ink);
	border-radius: 50%;
	animation: dj-quick-view-spin 700ms linear infinite;
}

@keyframes dj-quick-view-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.dj-quick-view__spinner {
		animation-duration: 2s;
	}
}

/* --- Dar ekran --- */

@media (max-width: 899px) {
	.dj-quick-view {
		padding: var(--dj-space-16);
	}

	.dj-quick-view__dialog {
		padding: var(--dj-space-24);
		max-height: calc(100dvh - var(--dj-space-24) * 2);
	}

	.dj-quick-view__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dj-space-24);
	}

	.dj-quick-view__close {
		inset-block-start: 12px;
		inset-inline-end: 12px;
		width: 40px;
		height: 40px;
	}

	.dj-quick-view__close svg {
		width: 18px;
		height: 18px;
	}

	.dj-quick-view__thumb {
		width: 56px;
		height: 56px;
	}

	.dj-quick-view__cart {
		flex: 1 1 100%;
	}

	/* Favori ve karşılaştırma daireleri “Hemen Satın Al” ile aynı satırda
	   kalır; alt alta düşünce satır dağılıyordu. */
	.dj-quick-view__row--secondary {
		flex-wrap: nowrap;
	}

	.dj-quick-view__buy {
		flex: 1 1 auto;
		min-width: 0;
		padding-inline: var(--dj-space-16);
	}

	/* Görsel dar ekranda pencerenin yarısını yemesin. */
	.dj-quick-view__stage {
		aspect-ratio: auto;
		max-height: 32vh;
		min-height: calc(160 * var(--dj-u));
	}

	.dj-quick-view__image {
		max-height: 32vh;
	}

	/* İndirimli fiyat iki satıra bölünürken ayraç satır sonunda kalmasın. */
	.dj-quick-view__title {
		font-size: var(--dj-fs-24);
	}

	/* “18.400,00 TL - 20.000,00 TL” 390 px'te tek satırda kalsın. */
	.dj-quick-view__price {
		font-size: var(--dj-fs-20);
	}
}

/*
 * Telefon (≤767). Pencere, favoriler/sepet/gezinme panelleriyle aynı
 * ortak mobil yüzeydir (header.css `--dj-sheet-*`): yanlarda ve altta
 * `--dj-sheet-gap`, üstte yönetim çubuğu payı + boşluk, köşe
 * `--dj-sheet-radius`, panel gölgesi ve perdesi aynı.
 *
 * İçerik iki bölgedir ve esnek kutuyla dağılır, sabit yükseklik yoktur:
 *   BİLGİ + EYLEMLER — kendi yüksekliğinde (flex: 0 0 auto), her zaman
 *             pencerenin dibinde tek blok: kategori, ad, puan, fiyat,
 *             stok, kısa açıklama (2 satır), adet + Sepete Ekle, Hemen
 *             Satın Al + favori/karşılaştırma;
 *   GÖRSEL  — geriye kalan bütün üst yükseklik (flex: 1). Gri sahne bu
 *             alanı doldurur; ürün sahnenin iç boşluğu (24 px) kadar
 *             içeride, `contain` ile ortada durur (kırpma/germe yok,
 *             yüzdesel küçültme yok).
 * Görsel en küçük ölçüsünün (160 px) altına inmesi gereken çok kısa
 * ekranda yalnız içerik alanı kayar; kapat düğmesi köşede sabittir.
 */
@media (max-width: 767px) {
	.dj-quick-view {
		padding:
			calc(var(--dj-sheet-safe-top) + var(--dj-sheet-gap))
			var(--dj-sheet-gap)
			var(--dj-sheet-gap);
	}

	.dj-quick-view__backdrop {
		background: var(--dj-overlay);
	}

	.dj-quick-view__dialog {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		max-height: none;
		padding: 0;
		overflow: hidden;
		border-radius: var(--dj-sheet-radius);
		box-shadow: var(--dj-shadow-lg);
	}

	.dj-quick-view__close {
		inset-block-start: 12px;
		inset-inline-end: 12px;
		z-index: 3;
		width: 44px;
		height: 44px;
	}

	.dj-quick-view__content {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 16px 16px max(16px, env(safe-area-inset-bottom, 0px));
	}

	.dj-quick-view__grid {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		align-items: stretch;
		gap: 14px;
	}

	/* GÖRSEL: alt blok yerini aldıktan sonra kalan bütün yükseklik. */
	.dj-quick-view__media {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}

	/* Ürünün çevresindeki nefes payı sahnenin iç boşluğudur. */
	.dj-quick-view__stage {
		--dj-qv-stage-pad: 24px;

		position: relative;
		flex: 1 1 auto;
		height: auto;
		min-height: 160px;
		max-height: none;
		padding: 0;
		aspect-ratio: auto;
	}

	/*
	 * Görsel sahnenin iç boşluğu kadar içeriden doldurur; ürün `contain`
	 * ile ortada ve oranıyla durur. Seçici iki sınıflıdır: WooCommerce'in
	 * `.woocommerce-page img { height: auto }` kuralı (0,1,1) tek sınıflı
	 * seçiciyi eziyordu.
	 */
	.dj-quick-view .dj-quick-view__image {
		position: absolute;
		inset: var(--dj-qv-stage-pad);
		width: calc(100% - var(--dj-qv-stage-pad) * 2);
		height: calc(100% - var(--dj-qv-stage-pad) * 2);
		max-width: none;
		max-height: none;
		object-fit: contain;
	}

	/* Küçük görseller tek satırda; fazlası yana kayar. Tek görselde alan yok. */
	.dj-quick-view__thumbs {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		gap: 8px;
		margin-block-start: 8px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.dj-quick-view__thumbs::-webkit-scrollbar {
		display: none;
	}

	.dj-quick-view__thumb {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		padding: 3px;
	}

	/* BİLGİ + EYLEMLER: kendi yüksekliğinde, pencerenin altında. */
	.dj-quick-view__body {
		flex: 0 0 auto;
		gap: 6px;
	}

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

	.dj-quick-view__title {
		font-size: var(--dj-fs-20);
		line-height: 1.25;
	}

	.dj-quick-view__price-row {
		gap: 8px;
	}

	.dj-quick-view__stock .stock {
		font-size: var(--dj-fs-15);
	}

	.dj-quick-view__short {
		font-size: 14px;
		line-height: 1.5;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.dj-quick-view__form {
		gap: 8px;
		margin-block-start: 6px;
	}

	.dj-quick-view__row {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.dj-quick-view__cart {
		flex: 1 1 auto;
		min-width: 0;
		padding-inline: 16px;
	}
}