/*
 * Ürün gruplarının fotoğrafı (PLAN, K109; Beest kararı, 22 Ekim 2026) ve
 * ürün kartlarının görsel zemini (K113, 23 Ekim).
 * Paketten sapma: ana sayfanın ürün grupları vitrini ve Ürünler menüsü
 * (üst alan ve mobil menü; ana sayfada ve öbür sayfalarda) grubun çizimi
 * yerine Ürünler sayfasının grup kartındaki fotoğrafı gösterir (grubun
 * fotoğrafı, yoksa vitrin ürününün ilk görseli). Fotoğrafı olmayan grupta
 * çizim kalır.
 *
 * Fotoğrafın beyaz zemini çarpma karışımıyla kutunun zeminine karışır
 * (Ürünler'deki grup kartı gibi). Bölüm beyaz; koyu ve mavi karo iki
 * parça, fotoğraf kenara kadar açık gri alanda; öbür karolar açık gri
 * (aşağıda). Üstüne gelince kap değil fotoğraf büyür: dönüşüm kabı
 * yalıttığında çarpma karışımı karonun zeminine ulaşmaz.
 *
 * Ana sayfanın ve öbür şablonların stil zincirinde; sınıflar yalnızca
 * kendi şablonunda geçer, renkler o zincirin belirteçlerinden.
 */

/* Ana sayfa: vitrin karoları */

.vitrin-kutu__cizim--foto {
	display: flex;
}

.vitrin-kutu:is(:hover, :focus-within) .vitrin-kutu__cizim--foto {
	transform: none;
}

.vitrin-kutu__foto {
	position: relative;
	flex: 1;
	min-height: 0;
	display: block;
}

.vitrin-kutu__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 1s var(--egri-yumusak);
}

.vitrin-kutu:is(:hover, :focus-within) .vitrin-kutu__foto img {
	transform: scale(1.045);
}

/*
 * Koyu (büyük) ve mavi (geniş) karo iki parça: fotoğraf kenara kadar açık
 * gri alanda; büyük karoda ad, markalar ve düğme alttaki koyu şeritte, geniş
 * karoda soldaki mavi yarıda (Beest, 22 Ekim: "plc başlığı ve butonun olduğu
 * alt kısmı siyah şerit yapalım", "görselin üst alt ve sağ tarafında mavilik
 * kalmayacak"). Karonun boyu değişmez; kenarı öbür karolardaki ince çizgi.
 */
.vitrin-kutu--buyuk:has(> .vitrin-kutu__cizim--foto),
.vitrin-kutu--genis:has(> .vitrin-kutu__cizim--foto) {
	border-color: var(--acik-gri);
}

.vitrin-kutu--buyuk > .vitrin-kutu__cizim--foto,
.vitrin-kutu--genis > .vitrin-kutu__cizim--foto {
	padding: 0;
}

.vitrin-kutu--buyuk .vitrin-kutu__foto,
.vitrin-kutu--genis .vitrin-kutu__foto {
	overflow: hidden;
	background: var(--kagit);
}

.vitrin-kutu--buyuk .vitrin-kutu__foto img,
.vitrin-kutu--genis .vitrin-kutu__foto img {
	padding: 8% 10%;
}

/*
 * Bölüm beyaz, beyaz karolar açık gri (fotoğrafın zemini), ızgara deseni
 * yok (Beest, 22 Ekim: "sayfa backgroundunu beyaz yap kalan 6 kartın da
 * backgroundunu gri yap"). Ok düğmesi gri karoda beyaz; üstüne gelince
 * paketteki gibi mavi.
 */
.urunler.bant-gri:has(.vitrin-kutu__cizim--foto) {
	--zemin: var(--beyaz);
}

.vitrin-kutu--tek:has(> .vitrin-kutu__cizim--foto) {
	background: var(--kagit);
}

.vitrin-kutu--tek:has(> .vitrin-kutu__cizim--foto) .ok-dugme {
	background: var(--beyaz);
}

.vitrin-kutu--tek:has(> .vitrin-kutu__cizim--foto):is(:hover, :focus-within) .ok-dugme {
	background: var(--mavi);
}

/* Büyük karonun iç çerçevesi yalnızca koyu şeritte. */
.vitrin-kutu--buyuk:has(> .vitrin-kutu__cizim--foto)::before {
	display: none;
}

.vitrin-kutu--buyuk:has(> .vitrin-kutu__cizim--foto) > .vitrin-kutu__alt {
	position: relative;
}

.vitrin-kutu--buyuk:has(> .vitrin-kutu__cizim--foto) > .vitrin-kutu__alt::before {
	content: "";
	position: absolute;
	inset: 10px;
	pointer-events: none;
	border: 1px solid rgb(197 198 198 / 0.18);
	border-radius: 2px;
	transition: border-color 0.5s var(--egri);
}

.vitrin-kutu--buyuk:has(> .vitrin-kutu__cizim--foto):is(:hover, :focus-within) > .vitrin-kutu__alt::before {
	border-color: rgb(0 158 227 / 0.5);
}

/*
 * Ürün kartının görsel alanı açık gri (K113; Beest, 23 Ekim: "bütün ürün
 * kartlarındaki ürün görselinin bulunduğu backgroundun rengini gri yap"):
 * paketteki beyaz çizim kâğıdı (ızgara) yerine görsel kutusunun kendi
 * zemini; ürün görselinin beyaz zemini çarpma karışımıyla buna karışır.
 * Tüm ürünler, ürün grupları, benzer ürünler, yaşam döngüsü uyarısındaki
 * ardıl ürün.
 */
.hk-urun-k .hk-gorsel-kutusu {
	background: var(--zemin-ikincil);
}

/* Ana sayfa: Ürünler menüsü ve mobil menü */

.mega-grup__cizim--foto {
	background-image: none;
}

.mega-grup__cizim--foto img,
.mobil-grup__cizim--foto img {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 8% 10%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.7s var(--egri-yumusak);
}

.mega-grup:hover .mega-grup__cizim--foto img {
	transform: scale(1.06);
}

/* Öbür sayfalar: Ürünler paneli ve mobil menü */

.hk-grup-ma__cizim--foto img,
.hk-mgrup-ma__cizim--foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {

	.vitrin-kutu__foto img,
	.mega-grup__cizim--foto img,
	.mobil-grup__cizim--foto img {
		transition: none;
	}

	.vitrin-kutu:is(:hover, :focus-within) .vitrin-kutu__foto img,
	.mega-grup:hover .mega-grup__cizim--foto img {
		transform: none;
	}
}