:root {
  --bg: #0d0d12;
  --radius: 10.667% / 8%; /* Figma: 128px köşe, 1200x1600 kart */
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); }

body {
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow-x: hidden;
}

/* ---------- ızgara: yalnızca kartlar ---------- */
/* diziliş: büyük = satırda 1, orta = 2 (varsayılan), küçük = 3 kart; geniş ekranda kartlar dev olmasın diye genişlik sınırı */
.grid {
  --cols: 2; --gap: 16px; --maxw: 820px;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  padding: 8px 16px 40px; max-width: var(--maxw); margin: 0 auto;
}
[data-cols="1"] .grid { --cols: 1; --gap: 26px; --maxw: 460px; }
[data-cols="3"] .grid { --cols: 3; --gap: 10px; --maxw: 1080px; padding-left: 12px; padding-right: 12px; }

/* ---------- kart ---------- */
/* Değişkenler JS'teki yay fiziğinden gelir: --px/--py ışık konumu, --rx/--ry eğim, --lift 0..1 kalkış */
.card {
  /* dinlenme ışığı sol üstte: efektler basılı tutmadan da canlı görünür (merkezde holo griye çalıyordu) */
  --px: .32; --py: .28; --mx: 32%; --my: 28%; --o: .8; --lift: 0; --sx: 0; --sy: 0;
  position: relative; aspect-ratio: 3 / 4; width: 100%;
  perspective: 650px;
  touch-action: pan-y;               /* ızgarada kaydırma serbest; basılı tutunca JS kilitler */
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab; outline: none;
}
.card.active { cursor: grabbing; z-index: 3; }

.tilt {
  position: absolute; inset: 0;
  border-radius: var(--radius);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  /* eğimin tersine düşen, kalkınca büyüyen gölge */
  box-shadow: calc(var(--sx) * 1px) calc(var(--sy) * 1px + var(--lift) * 26px) calc(var(--lift) * 50px) calc(var(--lift) * -14px) rgba(0, 0, 0, calc(var(--lift) * .7));
  will-change: transform;
  isolation: isolate;
}
/* Kırpma ayrı katmanda: mobil tarayıcılar 3D dönen kutuda overflow + border-radius kırpmasını,
   karışım modlu efekt katmanları için bazen yok sayıp köşeleri kare kesiyordu. Şekil maskesi (clip-path)
   köşeleri her durumda yuvarlak tutar; gölge dıştaki .tilt'te kaldığı için kırpılmaz. */
.clip {
  position: absolute; inset: 0;
  border-radius: var(--radius); overflow: hidden;
  clip-path: inset(0 round var(--radius));
  isolation: isolate;
}

.ly, .fx, .fx i, .glare, .charwrap { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ly { display: block; object-fit: cover; -webkit-user-drag: none; }
.fx i { display: block; }

/* atvImg gibi paralaks: üst katmanlar imlecin tersine kayar */
.ly-stars, .fx-stars {
  --d: 1.8;
  transform: translate3d(calc((.5 - var(--px)) * var(--d) * var(--lift) * 1%), calc((.5 - var(--py)) * var(--d) * var(--lift) * 1%), 0);
}
/* Karakter: katman kartın altına doğru uzatılmış (720x1040, build_site_assets.py), Figma'daki yerinde durur;
   hangi yöne eğilirse eğilsin gövde kesintisiz devam eder. Kalkınca öne doğru "çıkar". */
.ly-char {
  --d: 5;
  inset: 0 0 auto 0; height: calc(100% * 1040 / 960); object-fit: fill;
  transform-origin: 50% calc(100% * 960 / 1040);   /* kartın alt kenarı hizası */
  transform:
    translate3d(calc((.5 - var(--px)) * var(--d) * var(--lift) * 1%), calc((.5 - var(--py)) * var(--d) * var(--lift) * 1%), 0)
    scale(calc(1 + var(--lift) * .035));
}
.mega .charwrap { /* MEGA: karakter yalnızca panelin içinde görünür */
  -webkit-mask: url(img/mega-black.webp) center / 100% 100% no-repeat;
  mask: url(img/mega-black.webp) center / 100% 100% no-repeat;
}

.glare {
  background: radial-gradient(130% 97.5% at var(--mx) var(--my), rgba(255, 255, 255, 0.500) 0%, rgba(255, 255, 255, 0.430) 10%, rgba(255, 255, 255, 0.330) 20%, rgba(255, 255, 255, 0.220) 32%, rgba(255, 255, 255, 0.125) 45%, rgba(255, 255, 255, 0.055) 58%, rgba(255, 255, 255, 0.018) 70%, rgba(255, 255, 255, 0.000) 82%), radial-gradient(150% 112% at var(--mx) var(--my), transparent 55%, rgba(0, 0, 0, .14) 100%);
  mix-blend-mode: overlay;
  opacity: var(--lift);
}
/* kenar ışığı: ışığın geldiği taraftaki kenar parlar */
.edge {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: var(--radius); border: 2px solid transparent;
  background: radial-gradient(130% 97.5% at var(--mx) var(--my), rgba(255, 255, 255, 0.900) 0%, rgba(255, 255, 255, 0.774) 10%, rgba(255, 255, 255, 0.594) 20%, rgba(255, 255, 255, 0.396) 32%, rgba(255, 255, 255, 0.225) 45%, rgba(255, 255, 255, 0.099) 58%, rgba(255, 255, 255, 0.032) 70%, rgba(255, 255, 255, 0.000) 82%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  opacity: calc(var(--lift) * .8);
}

/* ---------- ★4 FOIL: fırçalanmış metal + gren + kayan gümüş yansıma (renksiz) ---------- */
.r4 .f1 { /* metal fırça çizgileri */
  background: var(--tex-brushed) 0 calc(var(--py) * 40%) / 70% auto;
  filter: contrast(1.8);
  mix-blend-mode: overlay; opacity: calc(.5 + var(--o) * .4);
}
.r4 .f2 { /* metal gölgesi: ışık açısına göre koyulaşan/açılan yüzey */
  background: linear-gradient(115deg, rgba(30, 30, 35, .5) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 60%, rgba(30, 30, 35, .45) 100%) calc(var(--px) * 100%) calc(var(--py) * 100%) / 220% 220%;
  mix-blend-mode: soft-light; opacity: calc(.5 + var(--o) * .5);
}
.r4 .f3 { /* ışığın vurduğu gümüş bant */
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .9) 47%, rgba(235, 240, 245, .85) 52%, transparent 66%) calc(var(--px) * 100%) calc(var(--py) * 100%) / 260% 260%;
  mix-blend-mode: overlay; opacity: calc(.3 + var(--o) * .7);
}
.r4 .f4 { background: var(--tex-noise) 0 0 / 128px; mix-blend-mode: overlay; opacity: .28; }

/* ---------- ★5 POLYCHROME: ince çapraz kazıma + eğdikçe yavaşça dönen hafif renk ---------- */
.r5 .f1 { /* çok hafif renk kayması (kartın kendi rengini bastırmaz) */
  background: repeating-linear-gradient(125deg, #ffb3c1 0%, #ffe0a8 10%, #c9f5d9 20%, #b9e1ff 30%, #dccbff 40%, #ffb3c1 50%) calc(var(--px) * 100%) calc(var(--py) * 100%) / 400% 400%;
  mix-blend-mode: soft-light; opacity: calc(.25 + var(--o) * .35);
}
.r5 .f2 { /* kazıma deseni: iki yönlü ince çizgi, ışık açısına göre parlıyor */
  background: linear-gradient(125deg, rgba(255, 255, 255, .15) 20%, rgba(255, 255, 255, .95) 45%, rgba(255, 240, 225, .9) 52%, rgba(255, 255, 255, .15) 80%) calc(var(--px) * 100%) calc(var(--py) * 100%) / 250% 250%;
  -webkit-mask: repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, #000 0 1px, transparent 1px 6px);
  mask: repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, #000 0 1px, transparent 1px 6px);
  mix-blend-mode: overlay; opacity: calc(.35 + var(--o) * .55);
}
.r5 .f3 { /* yüzeyde kayan parlaklık */
  background: linear-gradient(125deg, transparent 30%, rgba(255, 255, 255, .6) 48%, transparent 66%) calc(var(--px) * 100%) calc(var(--py) * 100%) / 250% 250%;
  mix-blend-mode: soft-light; opacity: calc(.3 + var(--o) * .7);
}
.r5 .f4 { background: var(--tex-noise) 0 0 / 160px; mix-blend-mode: overlay; opacity: .15; }

/* ---------- ★6 HOLOGRAPHIC: sakin holo şeritleri + tarama çizgileri + ışıltılar ---------- */
.r6 .f1 {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 0 2px, rgba(255, 255, 255, .3) 2px 3px),
    repeating-linear-gradient(110deg, #ff7ab8 0%, #a98bff 6%, #79b8ff 12%, #7ff0d9 18%, #e3ff9a 24%, #ffcf8a 30%, #ff7ab8 36%);
  background-size: 100% 100%, 380% 380%;
  background-position: 0 0, calc(var(--px) * 100%) calc(var(--py) * 100%);
  filter: saturate(.7);
  mix-blend-mode: soft-light; opacity: calc(.3 + var(--o) * .4);
}
.r6 .f2 { /* ışıltı: imlecin çevresinde yanar */
  background: var(--tex-sparkle) calc(var(--px) * -60px) calc(var(--py) * -60px) / 55% auto;
  -webkit-mask: radial-gradient(130% 97.5% at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .8) 18%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, .25) 58%, rgba(0, 0, 0, .12) 80%);
  mask: radial-gradient(130% 97.5% at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .8) 18%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, .25) 58%, rgba(0, 0, 0, .12) 80%);
  mix-blend-mode: screen; opacity: calc(.35 + var(--o) * .55);
}
.r6 .f3 { /* ince glitter, ters yönde kayar (derinlik) */
  background: var(--tex-glitter) calc(var(--px) * 40px) calc(var(--py) * 40px) / 30% auto;
  mix-blend-mode: overlay; opacity: calc(.25 + var(--o) * .35);
}
.r6 .f4 { /* yönlü beyaz-gümüş parlama */
  background: radial-gradient(130% 97.5% at var(--mx) var(--my), rgba(240, 246, 255, 0.450) 0%, rgba(240, 246, 255, 0.387) 10%, rgba(240, 246, 255, 0.297) 20%, rgba(240, 246, 255, 0.198) 32%, rgba(240, 246, 255, 0.113) 45%, rgba(240, 246, 255, 0.050) 58%, rgba(240, 246, 255, 0.016) 70%, rgba(240, 246, 255, 0.000) 82%);
  mix-blend-mode: soft-light; opacity: calc(.3 + var(--o) * .7);
}

/* ---------- MEGALEGEND ---------- */
/* çerçeve: parlayan altın (turuncu zeminin üstünü tamamen kaplar) */
.mega .m-frame i:nth-child(1) {
  background: linear-gradient(135deg, #7a5200 0%, #d9a520 14%, #fff0a8 26%, #c48a0e 38%, #f7d35a 50%, #8f6200 62%, #ffe58a 74%, #b98100 86%, #fff3c4 100%) calc(var(--px) * 100%) calc(var(--py) * 100%) / 260% 260%;
}
.mega .m-frame i:nth-child(2) { /* fırçalanmış altın dokusu */
  background: var(--tex-brushed) 0 calc(var(--py) * 40%) / 60% auto;
  filter: contrast(1.6); mix-blend-mode: overlay; opacity: .55;
}
.mega .m-frame i:nth-child(3) { /* ışık süpürmesi + ışıltı */
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .95) 48%, transparent 58%) calc(var(--px) * 100%) calc(var(--py) * 100%) / 260% 260%,
    var(--tex-glitter) calc(var(--px) * 30px) calc(var(--py) * 30px) / 20% auto;
  mix-blend-mode: overlay; opacity: calc(.45 + var(--o) * .55);
}

/* siyah alanlar: sıcak, altın-turuncu galaksi (siyah değil) */
.mega .m-cosmic {
  -webkit-mask: url(img/mega-black.webp) center / 100% 100% no-repeat;
  mask: url(img/mega-black.webp) center / 100% 100% no-repeat;
}
.mega .m-cosmic i:nth-child(1) { /* nebula: imlece göre kayan amber / turuncu / altın bulutlar */
  background:
    radial-gradient(55% 40% at calc(15% + var(--px) * 35%) 28%, rgba(255, 140, 20, .9) 0%, transparent 70%),
    radial-gradient(50% 45% at calc(90% - var(--px) * 30%) 68%, rgba(255, 205, 60, .85) 0%, transparent 70%),
    radial-gradient(60% 40% at 45% calc(115% - var(--py) * 35%), rgba(230, 80, 20, .85) 0%, transparent 70%),
    radial-gradient(40% 30% at calc(70% - var(--py) * 20%) 15%, rgba(255, 230, 150, .7) 0%, transparent 70%),
    linear-gradient(160deg, #5a2400, #8a3a00 45%, #4a1c00);
  animation: nebula 14s ease-in-out infinite alternate;
}
.mega .m-cosmic i:nth-child(2) { /* sıcak holo şeritler */
  background: repeating-linear-gradient(115deg, #ffb347 0%, #ffd86b 6%, #fff3b0 12%, #ff9a3c 18%, #ffcf5a 24%, #ff8a2a 30%, #ffb347 36%) calc(var(--px) * 100%) calc(var(--py) * 100%) / 350% 350%;
  mix-blend-mode: soft-light; opacity: calc(.4 + var(--o) * .4);
  animation: drift 9s linear infinite;
}
.mega .m-cosmic i:nth-child(3) { /* yıldız tozu */
  background: var(--tex-sparkle) calc(var(--px) * -80px) calc(var(--py) * -80px) / 40% auto, var(--tex-glitter) calc(var(--px) * 50px) calc(var(--py) * 50px) / 22% auto;
  mix-blend-mode: screen; opacity: .8;
  animation: twinkle 3.2s ease-in-out infinite alternate;
}
.mega .m-cosmic i:nth-child(4) { background: radial-gradient(130% 97.5% at var(--mx) var(--my), rgba(255, 240, 200, 0.500) 0%, rgba(255, 240, 200, 0.430) 10%, rgba(255, 240, 200, 0.330) 20%, rgba(255, 240, 200, 0.220) 32%, rgba(255, 240, 200, 0.125) 45%, rgba(255, 240, 200, 0.055) 58%, rgba(255, 240, 200, 0.018) 70%, rgba(255, 240, 200, 0.000) 82%); mix-blend-mode: overlay; opacity: var(--o); }

/* yıldızlar: altın varak + ışıltı */
.mega .fx-stars {
  -webkit-mask: url(img/mega-stars.webp) center / 100% 100% no-repeat;
  mask: url(img/mega-stars.webp) center / 100% 100% no-repeat;
}
.mega .fx-stars i:nth-child(1) {
  background: linear-gradient(120deg, #8a5a00 0%, #f2b705 16%, #fff1b0 26%, #c98a00 38%, #ffd84a 50%, #7a4d00 62%, #ffe27a 74%, #b07800 86%, #fff3c2 100%) calc(var(--px) * 100%) calc(var(--py) * 100%) / 300% 300%;
  animation: drift 6s linear infinite alternate;
}
.mega .fx-stars i:nth-child(2) { background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .95) 48%, transparent 58%) calc(var(--px) * 100%) calc(var(--py) * 100%) / 260% 260%; mix-blend-mode: overlay; }
.mega .fx-stars i:nth-child(3) { background: var(--tex-glitter) 0 0 / 18% auto; mix-blend-mode: screen; animation: twinkle 1.8s ease-in-out infinite alternate; }

@keyframes nebula { from { filter: hue-rotate(0deg) brightness(1); } to { filter: hue-rotate(-12deg) brightness(1.12); } }
@keyframes drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes twinkle { from { opacity: .5; } to { opacity: 1; } }

/* ---------- büyük önizleme: kart öne gelir, arka plan bulanıklaşır ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: rgba(8, 8, 12, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  transition: background .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease;
}
.viewer.open { background: rgba(8, 8, 12, .45); backdrop-filter: blur(16px) saturate(.8); -webkit-backdrop-filter: blur(16px) saturate(.8); }
.viewer[hidden] { display: none; }
.viewer .stage { position: relative; width: min(84vw, 60dvh * .75, 520px); will-change: transform; } /* altta ad + PAYLAŞ için yer */
.viewer .card { touch-action: none; }
.grid .card.away { visibility: hidden; } /* öne çıkan kartın ızgaradaki yeri boş kalır */

@media (prefers-reduced-motion: reduce) {
  .mega i { animation: none !important; }
}

/* =================== KART PAKETİ =================== */
.pack { position: relative; display: block; --tear: 7%; } /* --tear: tırtıklı üst şeridin hemen altı */
.pack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.pack .pack-body { position: relative; height: auto; } /* paketin yüksekliğini görselin kendi oranı belirler */
.pack-top { clip-path: inset(0 0 calc(100% - var(--tear)) 0); }
.pack-body { clip-path: inset(var(--tear) 0 0 0); }
.pack-shine { /* folyo üzerinde gezen parlama; paketin şekliyle maskeli */
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 48%, rgba(255, 240, 200, .25) 52%, transparent 62%) 0 0 / 250% 100% no-repeat;
  -webkit-mask: url(img/pack.webp) center / contain no-repeat; mask: url(img/pack.webp) center / contain no-repeat;
  mix-blend-mode: overlay; animation: packshine 3.6s ease-in-out infinite;
}
.pack-tear { /* yırtılma çizgisi */
  position: absolute; left: 6%; right: 6%; top: calc(var(--tear) - 1px); height: 3px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 15%, #ffe27a 50%, #fff 85%, rgba(255, 255, 255, 0));
  box-shadow: 0 0 10px 2px rgba(255, 226, 122, .9), 0 0 26px 6px rgba(255, 190, 60, .5);
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
}
@keyframes packshine { 0%, 15% { background-position: 120% 0; } 70%, 100% { background-position: -40% 0; } }
@keyframes packfloat { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-8px) rotate(1.2deg); } }

.pack-hero {
  display: block; margin: 22px auto 24px; padding: 0; border: 0; background: none; cursor: pointer; /* altta geri sayım çizgisine yer */
  width: min(42vw, 200px); -webkit-tap-highlight-color: transparent;
  animation: packfloat 4.2s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255, 200, 80, .25));
}
.pack-hero.away { visibility: hidden; }

/* ---------- sahne ---------- */
.opener {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; overflow: hidden;
  background: rgba(8, 8, 12, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  transition: background .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease;
  --cardw: min(80vw, 60dvh * .75, 460px);   /* altta ad + PAYLAŞ için yer */
  --packw: min(58vw, 64dvh * .5625, 330px);
}
.opener[hidden] { display: none; }
.opener.on { background: rgba(8, 8, 12, .55); backdrop-filter: blur(16px) saturate(.8); -webkit-backdrop-filter: blur(16px) saturate(.8); }
.sparks { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 5; }
.spot { position: relative; display: grid; place-items: center; z-index: 2; }
.spot > * { grid-area: 1 / 1; }

.pack-stage { width: var(--packw); z-index: 2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pack-stage .pack { animation: packfloat 4.2s ease-in-out infinite; }
.pack-stage.armed .pack-tear { animation: tearhint 1.4s ease-in-out infinite; }
@keyframes tearhint { 0%, 100% { opacity: 0; transform: scaleX(.15); } 50% { opacity: .9; transform: scaleX(1); } }
.pack-stage.shake .pack { animation: packshake .42s ease-in-out; }
@keyframes packshake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-3deg) translateX(-4px); } 40% { transform: rotate(3deg) translateX(4px); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(2deg); } }
.pack-stage.drop { pointer-events: none; }
.pack-stage.drop .pack { animation: packdrop .6s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes packdrop { to { transform: translateY(70%) rotate(-6deg); opacity: 0; } }

/* ---------- kıvrılan üst şerit (dilimler JS ile yay üzerine dizilir) ---------- */
.pack-strip { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.pack-strip .sl { position: absolute; top: 0; height: 100%; overflow: hidden; transform-origin: 100% 100%; will-change: transform; }
.pack .pack-strip .sl img { position: absolute; top: 0; inset: auto; max-width: none; clip-path: none; }
.pack-stage .pack-shine { clip-path: inset(var(--tear) 0 0 0); } /* parlama yalnızca gövdede */
.pack-hinge { /* yırtığın ilerlediği nokta: küçük sakin parıltı */
  position: absolute; top: var(--tear); left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 35%, rgba(255, 236, 170, .8) 55%, transparent 75%);
  box-shadow: 0 0 10px 3px rgba(255, 230, 160, .6); opacity: 0; pointer-events: none; transition: opacity .2s;
}

/* ---------- yırtılma: kesme kıvılcımı + ağızdan taşan ışık ---------- */
.pack-cut {
  position: absolute; top: var(--tear); left: 6%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, #ffe27a 50%, rgba(255, 180, 60, 0) 72%);
  box-shadow: 0 0 18px 6px rgba(255, 220, 120, .85), 0 0 40px 12px rgba(255, 170, 50, .45);
  opacity: 0; pointer-events: none;
}
.pack-light { /* paketin açılan ağzından yukarı taşan ışık huzmesi */
  position: absolute; left: 10%; right: 10%; bottom: calc(100% - var(--tear)); height: 75%;
  background: linear-gradient(to top, rgba(255, 245, 205, .95), rgba(255, 214, 120, .5) 28%, rgba(255, 190, 80, .15) 60%, transparent 90%);
  -webkit-mask: radial-gradient(60% 100% at 50% 100%, #000 40%, transparent 100%); mask: radial-gradient(60% 100% at 50% 100%, #000 40%, transparent 100%);
  filter: blur(4px); transform-origin: 50% 100%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
}
.pack-light.charge { animation: charge .16s ease-in-out infinite alternate; }
@keyframes charge { from { filter: blur(4px) brightness(1); } to { filter: blur(6px) brightness(1.6); } }

/* ---------- kart: ön yüzü dönük, paketin içinden çıkar ---------- */
.emerge {
  position: relative; width: var(--cardw); z-index: 1;   /* önce paketin arkasında */
  opacity: 0; transform: translateY(4%) scale(.5);
}
.emerge.front { z-index: 3; }
.emerge .card { touch-action: none; }

/* ---------- nadirlik ışığı ---------- */
.burst { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .5s ease; }
.burst i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: block; border-radius: 50%; }
.burst .rays {
  width: 170vmax; height: 170vmax;
  background: repeating-conic-gradient(from 0deg, var(--b1, #fff) 0deg 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, .55) 30%, transparent 70%);
  mask: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, .55) 30%, transparent 70%);
  opacity: .28; animation: spin 24s linear infinite;
}
.burst .glow { width: 90vmin; height: 90vmin; background: radial-gradient(closest-side, var(--b2, #fff), transparent 72%); opacity: .45; filter: blur(10px); }
.opener.burst-on .burst { opacity: 1; }
@keyframes spin { to { rotate: 1turn; } }
.flash { position: fixed; inset: 0; background: #fff6d8; opacity: 0; pointer-events: none; z-index: 4; }
.opener.flash-on .flash { animation: flash .7s ease-out; }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: .95; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pack-hero, .pack-stage .pack, .pack-shine, .burst .rays { animation: none !important; }
}

/* =================== KOLEKSİYON =================== */
/* sayaç: sahip olunan / toplam (Quicksand) */
/* üst bar: solda sayaç, sağda diziliş seçici */
.topbar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  /* tam genişlik zemin, içerik 1080px'lik ortada */
  padding: calc(10px + env(safe-area-inset-top)) max(16px, calc((100% - 1080px) / 2 + 16px)) 10px;
  background: var(--bg);                                  /* düz zemin: kaydırınca kartlar altından temiz geçer */
}
.count {
  font-family: Quicksand, system-ui, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: .5px;
  color: #b9b6c6; margin: 0; line-height: 1.2;
}
.layout { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #1c1b24; }
.layout button {
  width: 38px; height: 32px; border: 0; padding: 0; border-radius: 999px; cursor: pointer;
  background: transparent; display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
  transition: background .2s ease;
}
.layout button svg { width: 20px; height: 20px; fill: #6d6a7c; transition: fill .2s ease; }
.layout button[aria-pressed="true"] { background: #33313e; }
.layout button[aria-pressed="true"] svg { fill: #fff; }
/* paket kullanıldıysa büyük paket gizlenir */
.pack-used .pack-hero { display: none; }
.count b { color: #fff; font-weight: 700; font-size: 22px; }
.count span { margin: 0 6px; opacity: .5; }

/* sahip olunmayan: rengi ne olursa olsun aynı arduvaz zemin, kedi silüeti ve açık gri yıldızlar
   (eski hâli arka planı karartıyordu; koyu renkli kartlar sayfanın siyahında kayboluyordu) */
.card.locked { cursor: default; }
.card.locked .tilt { background: linear-gradient(160deg, #34323f 0%, #24222d 55%, #1c1b24 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.card.locked .ly-bg { filter: grayscale(1); opacity: .12; mix-blend-mode: luminosity; }
.card.locked .ly-char { filter: brightness(0); opacity: .5; }
.card.locked .ly-stars { filter: brightness(0) invert(1); opacity: .22; }
.card.locked .fx, .card.locked .m-cosmic, .card.locked .fx-stars, .card.locked .m-frame { display: none; }

/* tekrar çıkanlar: arkada üst üste kart kenarı */
.card.dup { isolation: isolate; }
.card.dup::before, .card.dup2::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius);
  background: linear-gradient(160deg, #3a3646, #22202b); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
  transform: translate(5px, 6px) rotate(2.2deg);
}
.card.dup2::after { transform: translate(9px, 11px) rotate(4deg); opacity: .7; }

/* yeni çıkan kart: parlayarak belirir */
.card.fresh .tilt { animation: freshglow 1.4s ease-in-out 3; }
@keyframes freshglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 220, 120, 0); } 50% { box-shadow: 0 0 0 3px rgba(255, 230, 150, .9), 0 0 40px 8px rgba(255, 200, 90, .55); } }

/* bugün açıldı: paket sönük, altındaki ışık gece yarısına kadar dolar */
.pack-hero { position: relative; }
.pack-hero.locked { animation: none; filter: none; cursor: default; }
.pack-hero.locked .pack { filter: grayscale(.85) brightness(.5); }
.pack-timer { position: absolute; left: 12%; right: 12%; bottom: -13px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; opacity: 0; }
.pack-hero.locked .pack-timer { opacity: 1; }
.pack-timer b { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ffe9a8, #ffb347); box-shadow: 0 0 10px rgba(255, 200, 100, .8); }

/* paylaş düğmesi: ikon + PAYLAŞ (düz) */
.share-btn {
  position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: calc(26px + env(safe-area-inset-bottom)); z-index: 40;
  height: 50px; padding: 0 24px 0 20px; border-radius: 999px; border: 0; cursor: pointer;
  background: #2a2935;
  display: flex; align-items: center; gap: 10px; -webkit-tap-highlight-color: transparent;
  color: #fff; font: 700 16px/1 Quicksand, system-ui, sans-serif; letter-spacing: 1.5px;
  opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .25, 1.1), background .2s;
}
.share-btn.in { opacity: 1; transform: none; }
.share-btn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share-btn.busy { opacity: .5; }
.share-btn:active { background: #36343f; }

/* açılan kartın adı */
.reveal-name {
  position: absolute; left: 0; right: 0; top: calc(100% + 28px); text-align: center; pointer-events: none;
  font: 700 28px/1.2 Quicksand, system-ui, sans-serif; color: #fff; letter-spacing: .4px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5); text-wrap: balance;
  opacity: 0; transform: translateY(8px); transition: opacity .5s ease .1s, transform .5s ease .1s;
}
.reveal-name.in { opacity: 1; transform: none; }

/* kapatma düğmesi (✕): sağ üst, düz */
.close-x {
  position: fixed; top: calc(14px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); z-index: 45;
  width: 42px; height: 42px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: #2a2935;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
  opacity: 0; transition: opacity .3s ease, background .2s;
}
.close-x.in { opacity: 1; transform: none; }
.close-x:active { background: #36343f; }
.close-x svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }