/* Kart anlarının görsel coşkusu (public/efekt.js). Hepsi kısa sürer ve kendini siler. */
#ef-katman { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.ef-parca { position: fixed; width: 10px; height: 14px; border-radius: 3px; will-change: transform, opacity; }
.ef-parca.yildiz { width: 14px; height: 14px; border-radius: 0; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ef-isik { position: fixed; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 8%, var(--renk) 10% 14%, transparent 16% 24%, var(--renk) 26% 30%, transparent 32% 40%, var(--renk) 42% 46%, transparent 48% 56%, var(--renk) 58% 62%, transparent 64% 72%, var(--renk) 74% 78%, transparent 80% 88%, var(--renk) 90% 94%, transparent 96%);
  mask-image: radial-gradient(circle, #000 10%, transparent 70%); opacity: 0; animation: ef-isik 1s ease-out forwards; }
.ef-isik.buyuk { width: 520px; height: 520px; margin: -260px 0 0 -260px; animation-duration: 1.6s; }
@keyframes ef-isik { 0% { opacity: 0; transform: scale(.3) rotate(0deg); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.2) rotate(70deg); } }
.ef-flas { position: fixed; inset: 0; opacity: 0; animation: ef-flas .7s ease-out; }
@keyframes ef-flas { 0% { opacity: 0; } 15% { opacity: .75; } 100% { opacity: 0; } }
.ef-rozet { position: absolute; z-index: 3; left: 50%; top: -14px; padding: 4px 12px; border-radius: 99px; background: #fff; color: var(--mor); font: 800 .9rem/1.2 var(--baslik); white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); transform: translateX(-50%); animation: ef-rozet .55s cubic-bezier(.2, 1.6, .4, 1) both; pointer-events: none; }
.ef-rozet.yeni { background: #2f8a4a; color: #fff; }
.ef-rozet.parlak { background: linear-gradient(135deg, #ffe680, #ffb300); color: #4a2b00; }
.ef-rozet.efsane { background: linear-gradient(135deg, #ff5fd2, #7c3aed, #22d3ee); color: #fff; font-size: 1rem; }
@keyframes ef-rozet { 0% { transform: translateX(-50%) translateY(14px) scale(.3); opacity: 0; } 100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; } }

.ses-dugme { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--cizgi); background: #fff; color: var(--mor); cursor: pointer; }
.ses-dugme svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ses-dugme[aria-pressed="false"] { color: var(--soluk); }

/* ---------- paket açma ---------- */
.d-paket h1 { animation: ef-zipla .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ef-zipla { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.paket-kart { animation: ef-dagit .55s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--sira, 0) * 140ms + 150ms); }
@keyframes ef-dagit { 0% { transform: translateY(80px) rotate(-12deg) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.paket-kart:not(.acik) .paket-arka { animation: ef-salla 2.4s ease-in-out infinite; animation-delay: calc(var(--sira, 0) * 300ms + 900ms); }
@keyframes ef-salla { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-4deg) scale(1.03); } 90% { transform: rotate(4deg) scale(1.03); } 94% { transform: rotate(-2deg); } }
/* İçinde parlak ya da efsane olan kartın arkası ipucu verir: altın parıltı. */
.paket-kart.ozel:not(.acik) .paket-arka { box-shadow: 0 0 0 3px #ffd54a, 0 0 26px rgba(255, 213, 74, .8); }
.paket-kart.ozel:not(.acik) .paket-arka::after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); background-size: 250% 100%; animation: ef-isilti 1.6s linear infinite; }
@keyframes ef-isilti { to { background-position: -150% 0; } }
.paket-kart.acik { animation: ef-pop .5s cubic-bezier(.2, 1.6, .4, 1) .45s both; }
@keyframes ef-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.paket-kart.acik.efsane .kolek, .paket-kart.acik.parlak .kolek { box-shadow: 0 0 0 3px #ffd54a, 0 0 34px rgba(255, 196, 0, .75); }
.d-paket .d-guc-kazanc { animation: ef-kay .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.d-paket .d-guc-kazanc[hidden] { display: none; }
@keyframes ef-kay { 0% { transform: translateY(30px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
.d-paket .dugme.hazir { animation: ef-nabiz 1.4s ease-in-out infinite; }
@keyframes ef-nabiz { 50% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(252, 140, 28, .25); } }
.paket-ipucu { min-height: 1.5em; margin: 8px 0 0; font-weight: 800; color: var(--mor); }

/* ---------- güç kartı kullanımı ---------- */
.ef-guc { position: fixed; left: 50%; top: 45%; z-index: 61; display: grid; justify-items: center; gap: 10px; pointer-events: none; transform: translate(-50%, -50%); }
.ef-guc img { width: 150px; height: 200px; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 4px #fff, 0 0 40px var(--renk, #ffd54a); animation: ef-guc 1.2s cubic-bezier(.2, 1.4, .4, 1) both; }
.ef-guc b { padding: 6px 16px; border-radius: 99px; background: var(--renk, var(--mor)); color: #fff; font: 800 1.3rem var(--baslik); animation: ef-guc 1.2s cubic-bezier(.2, 1.4, .4, 1) .05s both; }
@keyframes ef-guc { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 25% { transform: scale(1.1) rotate(4deg); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(.4) translateY(-200px); opacity: 0; } }
.d-soru.buz { position: relative; }
.d-soru.buz::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 4; box-shadow: inset 0 0 80px rgba(56, 189, 248, .55); background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, .5), transparent 30%), radial-gradient(circle at 90% 85%, rgba(255, 255, 255, .45), transparent 30%); animation: ef-buz .6s ease-out; }
@keyframes ef-buz { from { opacity: 0; } }
.d-sik.ucuyor { animation: ef-uc .6s ease-in both; }
@keyframes ef-uc { 0% { transform: none; } 30% { transform: scale(1.08) rotate(-4deg); } 100% { transform: translateY(-40px) rotate(18deg) scale(.6); opacity: .2; } }
.d-ipucu.yeni { animation: ef-ipucu .8s ease-out; }
@keyframes ef-ipucu { 0% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(252, 140, 28, .6); } 60% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(252, 140, 28, 0); } 100% { transform: none; } }

/* ---------- albüm ---------- */
.kolek.yeni-gelen { animation: ef-dagit .6s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--sira, 0) * 90ms); }
.kolek .ef-rozet { top: 8px; left: 12px; transform: none; animation-name: ef-rozet-sol; }
@keyframes ef-rozet-sol { 0% { transform: translateY(10px) scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.album-buyuk { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 24px; background: rgba(29, 10, 40, .78); backdrop-filter: blur(6px); animation: ef-buz .25s ease-out; }
.album-buyuk-ic { display: grid; justify-items: center; gap: 14px; width: min(320px, 100%); }
.album-buyuk .kolek { width: 100%; max-width: 300px; animation: ef-zipla .45s cubic-bezier(.2, 1.5, .4, 1) both; }
.album-buyuk-bilgi { width: 100%; padding: 14px 16px; border-radius: 18px; background: #fff; text-align: center; }
.album-buyuk-bilgi > b { display: block; font: 800 1.15rem var(--baslik); color: var(--mor); }
.album-ilerleme { height: 12px; margin: 10px 0 6px; border-radius: 99px; background: #f1ecf5; overflow: hidden; }
.album-ilerleme i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb300, #ff5fd2, #7c3aed); }
.album-buyuk button { min-height: 48px; padding: 0 24px; border: 0; border-radius: 14px; background: var(--turuncu); color: #2b1600; font: 800 1rem var(--govde); cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .paket-kart, .paket-kart:not(.acik) .paket-arka, .paket-kart.acik, .d-paket h1, .d-paket .dugme.hazir, .kolek.yeni-gelen, .ef-guc img, .ef-guc b, .d-sik.ucuyor, .album-buyuk .kolek { animation: none !important; }
  .paket-kart.ozel:not(.acik) .paket-arka::after { animation: none; }
  .ef-isik { animation-duration: .01s; }
}

/* ---------- 3B hediye kutusu (paket ekranı) ---------- */
.hediye-sahne { display: grid; place-items: center; height: 300px; perspective: 900px; }
.hediye { position: relative; width: 220px; height: 260px; border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kutu3b { --k: 150px; --kurdele: #fc8c1c; position: absolute; left: 50%; top: 58%; width: var(--k); height: var(--k); margin: calc(var(--k) / -2) 0 0 calc(var(--k) / -2); transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(-35deg); animation: kutu-bekle 3s ease-in-out infinite; }
@keyframes kutu-bekle { 0%, 100% { transform: translateY(0) rotateX(-20deg) rotateY(-35deg); } 50% { transform: translateY(-14px) rotateX(-20deg) rotateY(-20deg); } }
.kutu-yuz, .kapak-yuz { position: absolute; display: block; backface-visibility: hidden; }
.kutu-yuz { width: var(--k); height: var(--k); border-radius: 10px;
  background: linear-gradient(90deg, transparent 42%, var(--kurdele) 42% 58%, transparent 58%), linear-gradient(160deg, #8b2fb0, #651584 60%, #4a0f61); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .15); }
.kutu-yuz.on { transform: translateZ(calc(var(--k) / 2)); }
.kutu-yuz.arka { transform: rotateY(180deg) translateZ(calc(var(--k) / 2)); }
.kutu-yuz.sag { transform: rotateY(90deg) translateZ(calc(var(--k) / 2)); filter: brightness(.82); }
.kutu-yuz.sol { transform: rotateY(-90deg) translateZ(calc(var(--k) / 2)); filter: brightness(.82); }
.kutu-yuz.alt { transform: rotateX(-90deg) translateZ(calc(var(--k) / 2)); background: #3a0b4d; }
/* Kapak kutudan biraz geniş ve kalın: üst yüz + dört kenar. */
.kutu-kapak { --kk: calc(var(--k) + 16px); --kh: 30px; position: absolute; left: -8px; top: -8px; width: var(--kk); height: var(--kh); transform-style: preserve-3d; transform: translateY(calc(var(--kh) / -2 - 6px)); transition: transform .7s cubic-bezier(.2, .8, .3, 1), opacity .7s; }
.kapak-yuz.ust { width: var(--kk); height: var(--kk); transform: rotateX(90deg) translateZ(calc(var(--kh) / 2)); transform-origin: center; top: calc(var(--kh) / 2 - var(--kk) / 2); border-radius: 10px;
  background: linear-gradient(90deg, transparent 42%, var(--kurdele) 42% 58%, transparent 58%), linear-gradient(0deg, transparent 42%, var(--kurdele) 42% 58%, transparent 58%), linear-gradient(135deg, #a64bd1, #7a1fa0); }
.kapak-yuz.on, .kapak-yuz.arka, .kapak-yuz.sag, .kapak-yuz.sol { width: var(--kk); height: var(--kh); border-radius: 6px; background: linear-gradient(90deg, transparent 42%, var(--kurdele) 42% 58%, transparent 58%), linear-gradient(180deg, #a64bd1, #7a1fa0); }
.kapak-yuz.on { transform: translateZ(calc(var(--kk) / 2)); }
.kapak-yuz.arka { transform: rotateY(180deg) translateZ(calc(var(--kk) / 2)); }
.kapak-yuz.sag { transform: rotateY(90deg) translateZ(calc(var(--kk) / 2)); filter: brightness(.85); }
.kapak-yuz.sol { transform: rotateY(-90deg) translateZ(calc(var(--kk) / 2)); filter: brightness(.85); }
/* Fiyonk: kapağın üstünde iki ilmek ve düğüm, kameraya dönük. */
.fiyonk { position: absolute; left: 50%; top: -34px; width: 90px; height: 50px; margin-left: -45px; transform: translateZ(0) rotateY(35deg); }
.fiyonk::before, .fiyonk::after { content: ""; position: absolute; top: 4px; width: 46px; height: 38px; border: 10px solid var(--kurdele); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.fiyonk::before { left: -2px; transform: rotate(-24deg); }
.fiyonk::after { right: -2px; transform: rotate(24deg); }
.kutu3b.ozel { --kurdele: #ffd54a; }
.kutu3b.ozel .kutu-yuz.on { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .2), 0 0 40px rgba(255, 213, 74, .8); }
.kutu-golge { position: absolute; left: 50%; bottom: 6px; width: 150px; height: 22px; margin-left: -75px; border-radius: 50%; background: radial-gradient(rgba(40, 10, 60, .35), transparent 70%); animation: golge-bekle 3s ease-in-out infinite; }
@keyframes golge-bekle { 50% { transform: scale(.82); opacity: .7; } }
.hediye:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 6px; border-radius: 20px; }
/* Dokununca: giderek sertleşen titreme, sonra kapak uçar, kutu ışıkla söner. */
.hediye.titriyor .kutu3b { animation: kutu-titre .65s ease-in forwards; }
@keyframes kutu-titre {
  0% { transform: rotateX(-20deg) rotateY(-30deg); }
  15% { transform: rotateX(-20deg) rotateY(-30deg) rotateZ(-4deg) scale(1.02); }
  30% { transform: rotateX(-20deg) rotateY(-30deg) rotateZ(5deg) scale(1.04); }
  45% { transform: rotateX(-20deg) rotateY(-30deg) rotateZ(-7deg) scale(1.06); }
  60% { transform: rotateX(-20deg) rotateY(-30deg) rotateZ(8deg) scale(1.08); }
  75% { transform: rotateX(-20deg) rotateY(-30deg) rotateZ(-9deg) scale(.94, 1.12); }
  100% { transform: rotateX(-20deg) rotateY(-30deg) scale(1.18, .86); }
}
.hediye.acildi .kutu-kapak { transform: translateY(-220px) rotateX(-70deg) rotateZ(35deg); opacity: 0; }
.hediye.acildi .kutu3b { animation: kutu-son .7s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes kutu-son { 0% { transform: rotateX(-20deg) rotateY(-30deg) scale(1.18, .86); } 40% { transform: rotateX(-20deg) rotateY(-30deg) scale(1.05); filter: brightness(1.6); } 100% { transform: rotateX(-20deg) rotateY(-30deg) scale(.2); opacity: 0; } }
.hediye.acildi .kutu-golge { opacity: 0; transition: opacity .5s; }
/* Kartlar kutudan fırlar. */
#paket:not([hidden]) .paket-kart { animation: kart-firla .7s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(var(--sira, 0) * 120ms); }
@keyframes kart-firla { 0% { transform: translateY(-40px) scale(.15) rotate(calc((var(--sira) - 1) * 40deg)); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
#paket:not([hidden]) .paket-kart.acik { animation: ef-pop .5s cubic-bezier(.2, 1.6, .4, 1) .45s both; }
@media (prefers-reduced-motion: reduce) {
  .kutu3b, .hediye.titriyor .kutu3b, .hediye.acildi .kutu3b, .kutu-golge, #paket:not([hidden]) .paket-kart { animation: none !important; }
  .kutu-kapak { transition: none; }
}
.album-izgara .kolek[data-kart] { cursor: pointer; }