/* Koleksiyon kartları: ana sayfa, deneme sonu paketi ve albüm. 3D his CSS ile: eğilme, parıltı, çevirme.
   --rx/--ry/--px/--py değerlerini ritim.js kartEgimi() yazar. */
.kolek-sira { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; justify-items: center; margin: 16px 0; }

.kolek {
  --renk: var(--mor);
  position: relative;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  background: var(--renk);
  box-shadow: var(--golge), inset 0 0 0 2px rgba(255, 255, 255, .35);
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .2s ease-out;
  overflow: hidden;
  isolation: isolate;
}
/* color-mix eski tarayıcıda yok. var() içeren bildirim yedeğe düşmez, bu yüzden @supports. */
@supports (color: color-mix(in srgb, red, blue)) {
  .kolek {
    background: linear-gradient(150deg, color-mix(in srgb, var(--renk) 75%, #fff), var(--renk));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--renk) 35%, transparent), inset 0 0 0 2px rgba(255, 255, 255, .35);
  }
}
.kolek::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--px, 30%) var(--py, 20%), rgba(255, 255, 255, .45), transparent 45%); mix-blend-mode: soft-light; }
.kolek-resim { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: cover; border-radius: 13px; }
.kolek-serit { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 18% 8px 8px; border-radius: 0 0 13px 13px; background: linear-gradient(transparent, rgba(20, 10, 40, .82) 45%); text-align: center; z-index: 1; }
.kolek-ad { margin: 0; font: 800 .8rem/1.1 var(--baslik); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.kolek-alt { margin: 2px 0 0; font-size: .62rem; font-weight: 700; color: #f1e6ff; }
.kolek-yildiz { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 2px 7px; border-radius: 99px; background: rgba(20, 10, 40, .55); color: #ffd54a; font-size: .8rem; letter-spacing: 1px; }
/* Yazı kart genişliğiyle büyür: küçük paket kartında da sığar. */
@supports (container-type: inline-size) {
  .kolek { container-type: inline-size; }
  .kolek-ad { font-size: clamp(.66rem, 10cqw, 1.1rem); }
  .kolek-alt { font-size: clamp(.52rem, 6.5cqw, .8rem); }
  .kolek-yildiz { font-size: clamp(.55rem, 7cqw, .85rem); }
}

/* Parlak: yanardöner çerçeve ve yanardöner parıltı. Efsane: altın çerçeve, akan yanardöner parıltı,
   karakter öne çıkar ve çerçevenin üstünden taşar (kolek-on: karakterin saydam katmanı, kart eğilince derinlik verir). */
.kolek.seviye-1 { background: conic-gradient(from 210deg, #7dd3fc, #c4b5fd, #f9a8d4, #fde68a, #86efac, #7dd3fc); }
.kolek.seviye-2 { background: radial-gradient(circle at 20% 8%, #fff8d6 0 2px, transparent 3px), radial-gradient(circle at 72% 12%, #fff8d6 0 1.5px, transparent 2.5px), radial-gradient(circle at 45% 5%, #fff 0 1.5px, transparent 2.5px), linear-gradient(135deg, #b8860b, #ffe08a 30%, #c99700 55%, #fff1b8 75%, #b8860b); }
.kolek.seviye-1::after, .kolek.seviye-2::after {
  inset: 6px;
  border-radius: 13px;
  background:
    radial-gradient(circle at var(--px, 50%) var(--py, 30%), rgba(255, 255, 255, .5), transparent 40%),
    repeating-linear-gradient(115deg, #ff5f6d 0%, #ffc371 7%, #47ffb8 14%, #36d1ff 21%, #b56cff 28%, #ff5f6d 35%);
  background-size: 100% 100%, 300% 300%;
  background-position: center, var(--px, 50%) var(--py, 50%);
  mix-blend-mode: color-dodge;
  opacity: .28;
}
.kolek.seviye-2::after { opacity: .42; animation: kolek-holo 6s linear infinite; }
@keyframes kolek-holo { from { background-position: center, 0% 0%; } to { background-position: center, 300% 150%; } }

/* Efsane: kart 3D katmanlı. overflow açık: taşan karakter kesilmesin. Resimler kendi köşelerinde kırpılır. */
.kolek.seviye-2 { overflow: visible; transform-style: preserve-3d; }
/* Taşma: resmin üst %22'si kırpılır ve altın çerçeve bandı görünür. Karakter katmanı kırpılmaz,
   başı bu bandın üstüne çıkar. Katman resimle aynı çerçevede durur: arkadaki karakterle çift görünmez. */
.kolek.seviye-2 .kolek-resim { clip-path: inset(22% 0 0 0 round 13px); }
.kolek-on {
  position: absolute; left: 6px; bottom: 6px; width: calc(100% - 12px); height: calc(100% - 12px);
  object-fit: cover; z-index: 1; pointer-events: none;
  transform-origin: 50% 88%;
  transform: translateZ(40px) translateY(-5%) scale(1.1);
  filter: drop-shadow(0 10px 12px rgba(10, 0, 30, .55));
  animation: kolek-suzul 3.6s ease-in-out infinite;
}
.kolek.seviye-2 .kolek-serit { z-index: 2; transform: translateZ(46px); }
.kolek.seviye-2 .kolek-yildiz { z-index: 3; transform: translateZ(50px); top: 8px; right: 8px; }
@keyframes kolek-suzul {
  0%, 100% { transform: translateZ(40px) translateY(-5%) scale(1.1); }
  50% { transform: translateZ(40px) translateY(-7%) scale(1.11); }
}
/* Akan altın parıltı: çerçeve içinde kalsın diye dönüşüm yerine zemin konumu kayar. */
.kolek.seviye-2::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .7) 50%, transparent 58%);
  background-size: 300% 100%;
  animation: kolek-parilti 3.2s ease-in-out infinite;
}
@keyframes kolek-parilti { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.kolek.kilitli { background: #3b2a55; box-shadow: none; transform: none; }
.kolek.kilitli .kolek-resim { filter: blur(9px) grayscale(.6) brightness(.55); transform: scale(1.08); }
.kolek-soru { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; font: 800 clamp(2rem, 30cqw, 3.6rem) var(--baslik); color: rgba(255, 255, 255, .85); text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }

/* Paket: arka yüz → ön yüz çevirme. */
.paket-kart { position: relative; width: 100%; max-width: 200px; aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer; perspective: 900px; }
.paket-kart { transform-style: preserve-3d; }
.paket-kart > span { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .6s cubic-bezier(.2, .7, .2, 1.2); }
/* Çevrilmemiş kartın ön yüzü kendi 3D katmanında kalırsa arka yüz görünmez: eğilme yalnız açılınca. */
.paket-kart:not(.acik) .kolek { transform: none; }
.paket-on .kolek { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.paket-arka { display: grid; place-items: center; border-radius: 18px; background: repeating-linear-gradient(45deg, var(--mor) 0 14px, var(--mor-koyu) 14px 28px); box-shadow: var(--golge); }
.paket-arka img { width: 64px; height: 64px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3)); }
.paket-on { transform: rotateY(180deg); }
.paket-on .kolek { max-width: none; height: 100%; }
.paket-kart.acik .paket-arka { transform: rotateY(-180deg); }
.paket-kart.acik .paket-on { transform: rotateY(0); }
.paket-kart:not(.acik):hover .paket-arka { transform: translateY(-4px) rotate(-1deg); }

@media (prefers-reduced-motion: reduce) {
  .kolek, .paket-kart > span { transition: none; }
  .kolek.seviye-2::before, .kolek.seviye-2::after, .kolek-on { animation: none; }
}