/*
   Hareket katmanı.

   style.css'ten SONRA yüklenir. Kural: burada içerik gizleyen hiçbir kural
   yoktur. Giriş hareketlerinin başlangıç durumunu GSAP kendi kurar; betik
   yüklenmezse hiçbir şey saklanmaz, sayfa olduğu gibi görünür.

   Yalnız iki istisna gizlemeye yakındır ve ikisi de zararsızdır:
   - .satir/.satir-ic yalnız sahne.js DOM'a yazdığında var olur.
   - .ucus ve .sayfa-bar öğelerini yalnız sahne.js üretir.
*/

/* ==========================================================================
   1. Hero · satır maskesi
   Elemanları sahne.js üretir; CSS yalnız maskeyi kurar.
   ========================================================================== */

.hero h1 .satir { display: block; overflow: hidden; }
.hero h1 .satir-ic { display: block; }

/* Parallax sırasında kırpma olmasın diye görsel kabı zaten overflow:hidden;
   burada yalnız katman ipucu verilir. */
.js-sahne .hero-img img { will-change: transform; }

/* ==========================================================================
   2. Ürün kartı · 3B eğilme
   Perspektifi GSAP transformPerspective ile verir; burada yalnız kartın
   kendi yığılma bağlamı ve katman ipucu vardır.
   ========================================================================== */

.js-sahne .card-img { transform-style: preserve-3d; }
.js-sahne .card:hover .card-img { will-change: transform; }

/* ==========================================================================
   3. Sepete uçan görsel
   Gövdeye sabit konumla eklenir, tıklamayı yutmaz, tek kullanımlıktır.
   ========================================================================== */

.ucus {
	position: fixed;
	z-index: 9995;
	pointer-events: none;
	object-fit: contain;
	border-radius: var(--r-sm);
	background: var(--bg);
	box-shadow: var(--sh-2);
}

/* ==========================================================================
   4. Sayfa geçişi çubuğu
   Üstte 2px altın çizgi. Genişliği scaleX ile sürülür; gerçek gezinme
   bitince sayfa zaten değişir, çubuk yeni sayfada hiç doğmaz.
   ========================================================================== */

.sayfa-bar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100%;
	height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
	opacity: 0;
}

/* ==========================================================================
   5. Ürün sayfası · yapışkan satın alma kutusu
   Izgara çocuğu sticky olmaz (kendi satırına hapsolur); bu yüzden .psummary
   masaüstünde esnek kutuya alınır. Boşluk ve genişlik aynı kalır.
   Sticky hareket değildir, betiğe de bağlı değildir: kapsam dışı bırakılmaz.
   ========================================================================== */

@media (min-width: 901px) {
	.psummary {
		display: flex;
		flex-direction: column;
	}

	.pbuy {
		position: sticky;
		top: 96px;
		z-index: 2;
		transition: box-shadow var(--t) var(--ease);
	}

	.pbuy.is-stuck { box-shadow: var(--sh-2); }
}

/* ==========================================================================
   6. Mikro etkileşim
   Tümü prefers-reduced-motion: no-preference altında. Azaltılmış hareket
   isteyende hiçbiri kurulmaz, hover yine renk değiştirir.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* Bölüm başlığındaki ok · sahne.js oku ayrı span'a alır */
	.ok {
		display: inline-block;
		transition: transform var(--t-fast) var(--ease);
	}
	a:hover > .ok,
	a:focus-visible > .ok { transform: translateX(4px); }

	/* Butonlar · 1px kalkış, basınca geri oturur */
	.btn,
	a.button,
	button.button,
	input.button,
	.card .add_to_cart_button {
		transition: background var(--t-fast) var(--ease),
		            color var(--t-fast) var(--ease),
		            border-color var(--t-fast) var(--ease),
		            transform var(--t-fast) var(--ease);
	}
	.btn:hover,
	a.button:hover,
	button.button:hover,
	input.button:hover,
	.card .add_to_cart_button:hover { transform: translateY(-1px); }

	.btn:active,
	a.button:active,
	button.button:active,
	input.button:active,
	.card .add_to_cart_button:active { transform: translateY(0); }

	/* Sepet ve hesap ikonu */
	.icon-btn svg { transition: transform var(--t-fast) var(--ease); }
	.icon-btn:hover svg { transform: translateY(-1px); }

	/* Kategori kartı görseli · kart zaten 2px kalkıyor, görsel hafif büyür */
	.cat-img img { transition: transform var(--t) var(--ease); }
	.cat:hover .cat-img img { transform: scale(1.04); }

	.sector-card { transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
	.sector-card::after,
	.sector-icon { transition: transform var(--t) var(--ease); }
	.sector-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
	.sector-card:hover::after { transform: scaleX(1); }
	.sector-card:hover .sector-icon { transform: translateY(-1px) scale(1.05) rotate(-2deg); }

	/* Galeri küçük görselleri */
	.pgallery-thumb {
		transition: border-color var(--t-fast) var(--ease),
		            transform var(--t-fast) var(--ease);
	}
	.pgallery-thumb:hover { transform: translateY(-2px); }

	/* Yan sütun kategori bağlantıları · sayaç değil, ad kayar */
	.shop-side ul li a { transition: padding-left var(--t-fast) var(--ease); }
	.shop-side ul li a:hover { padding-left: 4px; }

	/* Sayfalama */
	.woocommerce-pagination a { transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
	.woocommerce-pagination a:hover { transform: translateY(-1px); border-color: var(--line-strong); }
}

/* ==========================================================================
   7. Azaltılmış hareket
   sahne.js `anim` bayrağı zaten kapanır (yeni hareketlerin hepsi o bayrağa
   bağlı). Burası CSS tarafındaki son emniyet: JS'in ürettiği öğeler de
   sabitlenir, içerik baştan görünür kalır.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.hero h1 .satir { overflow: visible; }
	.hero h1 .satir-ic { transform: none !important; }
	.js-sahne .hero-img img,
	.js-sahne .card-img { transform: none !important; will-change: auto; }
	.sayfa-bar,
	.ucus { display: none; }
	.pbuy { transition: none; }
	.pbuy.is-stuck { box-shadow: none; }
	.sector-card,
	.sector-card::after,
	.sector-icon { transition: none; transform: none !important; }
}