/* Hareket katmanı (25.09.2026). Kurallar: yalnızca transform ve opacity animasyona girer; mikro etkileşimler 100–250 ms,
   girişler ease-out, çıkışlar hızlı; prefers-reduced-motion: reduce'da büyük hareketler (paralaks, akan şerit, yüzme) kapalı,
   opacity ve basış tepkisi kalır. Kaynak ölçütler: .claude/skills/harici/web-animation-skills (micro-interaction, accessible, 60fps). */
:root { --h-cik: cubic-bezier(.16, 1, .3, 1); --h-std: cubic-bezier(.4, 0, .2, 1); --h-zipla: cubic-bezier(.34, 1.56, .64, 1); }

/* Basış ve üzerine gelme tepkisi */
.btn, .urun-kart, .kat a, .adet-secim__k, .paket-oneri, .insta__kart, .hero__ok, .ust__ikon, .nasil__video, .urun__video { transition: transform .15s var(--h-std), box-shadow .2s var(--h-std), background-color .2s, border-color .2s, color .2s, opacity .2s; }
.btn:active, .kat a:active, .adet-secim__k:active, .paket-oneri:active, .insta__kart:active, .hero__ok:active, .nasil__video:active, .urun__video:active { transform: scale(.97); }
.urun-kart:active { transform: scale(.985); }
.adet-secim__k.secili { transform: translateY(-2px); }
@media (hover: hover) {
	.urun-kart:hover { transform: translateY(-3px); }
	.paket-oneri:hover { transform: translateY(-1px); }
	.btn--k:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(213, 24, 43, .28); }
	.kat a:hover { transform: translateY(-3px); box-shadow: var(--golge); }
}

/* Kaydırınca belirme (JS .belir ekler; JS yoksa her şey görünür) */
.belir { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--h-cik), transform .6s var(--h-cik); transition-delay: calc(var(--i, 0) * 70ms); }
.belir.goruldu { opacity: 1; transform: none; }

/* Sepete ekle durumları: yükleniyor → eklendi */
.btn--ekleniyor { pointer-events: none; opacity: .85; }
.btn--ekleniyor::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: don .7s linear infinite; vertical-align: -2px; }
.btn--eklendi, .single_add_to_cart_button.btn--eklendi { background: var(--c-yesil) !important; color: #fff !important; }
@keyframes don { to { transform: rotate(360deg); } }
.ucan-gorsel { position: fixed; z-index: 9999; pointer-events: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transition: transform .75s var(--h-std), opacity .75s var(--h-std); will-change: transform, opacity; }
.ust__ikon .adet.zipla { animation: zipla .5s var(--h-zipla); }
@keyframes zipla { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } }
.ust__ikon.salla { animation: salla .5s var(--h-std); }
@keyframes salla { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } }
#toast[data-acik="1"] { animation: toast-gir .3s var(--h-cik); }
@keyframes toast-gir { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Fiyat güncellenince kısa vurgu */
.fiyat-guncel { animation: fiyat-guncel .35s var(--h-cik); }
@keyframes fiyat-guncel { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Kargo eşiği çubuğu dolarken */
.sepet-esik__cubuk span { transition: width .9s var(--h-cik); }

/* Önce / sonra kaydırıcı */
.oncesonra { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #111; user-select: none; -webkit-user-select: none; touch-action: pan-y; box-shadow: var(--golge); }
.oncesonra img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; user-drag: none; }
.oncesonra > * { pointer-events: none; }
.oncesonra input[type=range] { pointer-events: none; }
.oncesonra__sonra { clip-path: inset(0 0 0 var(--k, 50%)); }
.oncesonra__cizgi { position: absolute; top: 0; bottom: 0; left: var(--k, 50%); width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }
.oncesonra__tutamac { position: absolute; top: 50%; left: var(--k, 50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); pointer-events: none; color: var(--c-koyu); font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.oncesonra { cursor: ew-resize; touch-action: pan-y; }
.oncesonra input[type=range] { position: absolute; left: 0; bottom: 0; width: 100%; height: 44px; opacity: 0; margin: 0; pointer-events: none; }
.oncesonra:focus-within { outline: 3px solid var(--c-kirmizi); outline-offset: 2px; }
.oncesonra__etiket { position: absolute; bottom: 12px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; background: rgba(0, 0, 0, .62); color: #fff; pointer-events: none; }
.oncesonra__etiket--once { left: 12px; }
.oncesonra__etiket--sonra { right: 12px; background: var(--c-kirmizi); }
.oncesonra__ipucu { text-align: center; font-size: 13px; color: var(--c-metin2); margin-top: 8px; }
.oncesonra.ipucu { animation: ipucu 1.6s var(--h-std) .6s 1; }
@keyframes ipucu { 0%, 100% { --k: 50%; } 30% { --k: 38%; } 70% { --k: 62%; } }
@property --k { syntax: "<percentage>"; inherits: true; initial-value: 50%; } /* inherits: true şart: çocuklar (kesilen görsel, çizgi, tutamaç) değeri kutudan alır */
.urun__oncesonra { margin-top: 0; }

/* Akan duyuru şeridi (yalnızca mobil; masaüstü sabit) */
.duyuru--akan a { display: inline; margin-left: 0; }
@media (max-width: 899px) {
	.duyuru--akan { display: flex; align-items: center; padding: 0; overflow: hidden; }
	.duyuru__akis { display: flex; gap: 40px; white-space: nowrap; padding: 9px 0 9px 16px; animation: akis 24s linear infinite; }
	.duyuru__akis > span { flex: none; }
	.duyuru--akan[data-durdu="1"] .duyuru__akis { animation-play-state: paused; }
	.duyuru__durdur { flex: none; margin-left: auto; width: 36px; align-self: stretch; background: rgba(255, 255, 255, .06); border-left: 1px solid rgba(255, 255, 255, .12); color: #fff; font-size: 10px; display: grid; place-items: center; }
}
@media (min-width: 900px) { .duyuru__akis > span:nth-child(n+3), .duyuru__akis > span[aria-hidden="true"], .duyuru__durdur { display: none; } .duyuru__akis > span + span { margin-left: 10px; } }
@keyframes akis { to { transform: translateX(-50%); } }

/* Kahraman açılışı: metin sırayla, görsel yüzer, rozet zıplar */
@media (prefers-reduced-motion: no-preference) {
	.hero__slide:first-child .hero__eyebrow, .hero__slide:first-child .hero__baslik, .hero__slide:first-child .hero__metin > p, .hero__slide:first-child .hero__fiyat, .hero__slide:first-child .hero__cta, .hero__slide:first-child .hero__kanit { animation: belir-yukari .7s var(--h-cik) both; }
	.hero__slide:first-child .hero__baslik { animation-delay: 80ms; }
	.hero__slide:first-child .hero__metin > p { animation-delay: 160ms; }
	.hero__slide:first-child .hero__fiyat { animation-delay: 240ms; }
	.hero__slide:first-child .hero__cta { animation-delay: 320ms; }
	.hero__slide:first-child .hero__kanit { animation-delay: 400ms; }
	.hero__slide:first-child .hero__gorsel img { animation: hero-gir .8s var(--h-cik) both; }
	.hero__etiket { animation: rozet-gir .5s var(--h-cik) .7s both; }
	.hero__gorsel { will-change: transform; }
}
@keyframes belir-yukari { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes yuz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rozet-gir { from { opacity: 0; } to { opacity: 1; } }

/* Hareket azaltma: büyük hareketler kapalı, geri bildirim kalır */
@media (prefers-reduced-motion: reduce) {
	.belir { transform: none; transition: opacity .2s; }
	.duyuru__akis { animation: none !important; }
	.hero__gorsel img { animation: none !important; }
	.ucan-gorsel { transition: opacity .3s; transform: none !important; }
	.oncesonra.ipucu { animation: none; }
	.hero__gorsel { transform: none !important; }
}