/* Oyun kartı. Ölçüler kart eninin yüzdesi (cqw): kart her boyda aynı görünür.
   3D kuralı: .oyun-karti ile .ok-govde arasında overflow, clip-path, filter, opacity, mask yok.
   Bunlar preserve-3d'yi düzleştirir. Kırpma ve süzgeç yalnız en içteki katmanlarda durur. */

.kart-kutu {
  --pencere-oran: 1.1; /* js/kart.js PENCERE_ORAN ile aynı */
  container-type: inline-size;
  perspective: 1100px;
  width: 100%;
}

.oyun-karti {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 30%;
  --kenar: linear-gradient(140deg, #F6D2A8, #B8692C 35%, #F8DDBA 55%, #9A5523);
  --ic: var(--k-zemin, #FFF6E3);
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.oyun-karti.etkin { transition-duration: .12s; transition-timing-function: linear; }

.ok-govde {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.canli .ok-govde { animation: ok-salin 7s ease-in-out infinite; }
.canli .oyun-karti.etkin .ok-govde { animation-play-state: paused; }

@keyframes ok-salin {
  0%, 100% { transform: rotateY(-9deg) rotateX(4deg); }
  50% { transform: rotateY(9deg) rotateX(-3deg); }
}

.ok-govde > * { backface-visibility: hidden; }

/* Seviye kenarları: bronz, gümüş, altın */
.seviye-2 { --kenar: linear-gradient(140deg, #FFFFFF, #A7B2C3 35%, #F4F7FB 55%, #7F8CA2); }
.seviye-3 { --kenar: linear-gradient(140deg, #FFF3A6, #E3A111 30%, #FFF9D6 50%, #F0B324 70%, #B8740A); }
.kilitli { --kenar: linear-gradient(140deg, #D9CCF2, #9A86C9 50%, #CDBEEC); --ic: #EFE8FB; }

.ok-cerceve {
  position: absolute;
  inset: 0;
  background: var(--kenar);
  border-radius: 7cqw;
  box-shadow: 0 2cqw 6cqw rgba(58, 42, 16, .28), inset 0 0 0 .6cqw rgba(255, 255, 255, .5);
}
.ok-cerceve::before {
  content: '';
  position: absolute;
  inset: 2.6cqw;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 L56 16.2 L56 48.5 L28 64.7 L0 48.5 L0 16.2 Z M28 64.7 L28 97' fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='3'/%3E%3C/svg%3E"),
    var(--ic);
  border-radius: 5cqw;
}
.seviye-3 .ok-cerceve { animation: ok-altin 3s ease-in-out infinite; background-size: 200% 200%; }
@keyframes ok-altin {
  50% { background-position: 100% 100%; }
}

/* Kapak penceresi */
.ok-pencere,
.ok-on {
  position: absolute;
  left: 6cqw;
  top: 6cqw;
  width: 88cqw;
  height: calc(88cqw * var(--pencere-oran));
}
.ok-pencere {
  overflow: hidden;
  background: var(--k-zemin);
  border-radius: 4.5cqw;
  box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .6);
  transform: translateZ(1px);
}
.ok-arka {
  position: absolute;
  max-width: none;
  height: auto;
  aspect-ratio: 560 / 746;
  /* Arka plan hafif bulanık: karakter öne çıkar, eğilince arkadaki kopyası seçilmez. */
  filter: blur(.5cqw) saturate(1.1);
  scale: 1.02;
}

/* Karakter: yanları ve altı pencereye göre kırpılır, üstten taşar. */
.ok-on {
  pointer-events: none;
  clip-path: inset(-60% 0 0 0 round 0 0 4.5cqw 4.5cqw);
  transform: translateZ(7cqw) scale(1.04);
  transform-origin: 50% 100%;
}
.ok-on img {
  position: absolute;
  max-width: none;
  height: auto;
  aspect-ratio: 560 / 746;
  filter: drop-shadow(0 2cqw 2.2cqw rgba(30, 20, 60, .35));
}

/* Işık: imlecin olduğu yerde parlar. Altın kartta gökkuşağı yansıması da gezer. */
.ok-isilti {
  position: absolute;
  left: 6cqw;
  top: 6cqw;
  width: 88cqw;
  height: calc(88cqw * var(--pencere-oran));
  border-radius: 4.5cqw;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .45), transparent 50%);
  pointer-events: none;
  transform: translateZ(2px);
}
.seviye-3 .ok-isilti {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .5), transparent 50%),
    linear-gradient(115deg, transparent 25%, rgba(255, 236, 140, .4) 40%, rgba(255, 150, 220, .3) 50%, rgba(140, 210, 255, .38) 60%, transparent 75%)
      var(--mx) 50% / 300% 100% no-repeat;
}

/* Uçuşan simgeler: çerçevenin dışına taşar, en önde durur. */
.ok-simge {
  position: absolute;
  width: 21cqw;
  height: auto;
  filter: drop-shadow(0 1.6cqw 1.6cqw rgba(30, 20, 60, .3));
  animation: ok-suzul 3.2s ease-in-out infinite;
}
.ok-simge.s1 { right: -7cqw; top: -5cqw; transform: translateZ(12cqw) rotate(12deg); }
.ok-simge.s2 { left: -8cqw; top: 54cqw; width: 18cqw; transform: translateZ(10cqw) rotate(-10deg); animation-delay: -1.1s; }
.ok-simge.s3 { right: -6cqw; top: 84cqw; width: 17cqw; transform: translateZ(11cqw) rotate(8deg); animation-delay: -2.2s; }

@keyframes ok-suzul {
  50% { translate: 0 -2.2cqw; }
}

/* Ad plakası */
.ok-plaka {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  bottom: 5cqw;
  display: grid;
  justify-items: center;
  gap: .4cqw;
  padding: 2.6cqw 3cqw 3cqw;
  background: rgba(255, 255, 255, .94);
  border-radius: 4.5cqw;
  box-shadow: 0 1.4cqw 3cqw rgba(58, 42, 16, .16);
  text-align: center;
  transform: translateZ(5cqw);
}
.ok-no {
  position: absolute;
  top: -3.6cqw;
  right: 4cqw;
  padding: .4cqw 2.4cqw;
  background: var(--k-renk);
  border-radius: 99px;
  color: #FFF;
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: 4.2cqw;
}
.ok-baslik {
  font-family: var(--yazi-baslik);
  font-weight: 800;
  font-size: 8.6cqw;
  line-height: 1.05;
  color: var(--k-renk);
}
.ok-ad { font-weight: 700; font-size: 4.8cqw; line-height: 1.2; color: var(--soluk); }
.ok-alt {
  display: flex;
  align-items: center;
  gap: 2cqw;
  margin-top: 1cqw;
}
.ok-seviye {
  padding: .5cqw 2.6cqw;
  background: var(--kenar);
  border-radius: 99px;
  color: #3A2A10;
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: 4.2cqw;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ok-yildizlar { display: flex; gap: .6cqw; }
.ok-yildizlar svg { width: 6cqw; height: 6cqw; fill: #E7DCC3; }
.ok-yildizlar svg.dolu { fill: #F5B301; filter: drop-shadow(0 .3cqw 0 #B97A06); }

/* Kilitli kart: kapak yerine siluet. */
.kilitli .ok-pencere { background: linear-gradient(160deg, #8E6CD8, #5A23B8); }
.kilitli .ok-arka { opacity: .18; filter: grayscale(1) blur(.8cqw); }
.kilitli .ok-on img { filter: brightness(0) saturate(0); opacity: .55; }
.kilitli .ok-on { transform: translateZ(3cqw); }
.kilitli .ok-plaka { background: rgba(255, 255, 255, .88); }
.kilitli .ok-baslik { color: #5A23B8; }
.ok-kilit {
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
  color: var(--soluk);
  font-weight: 700;
  font-size: 4.4cqw;
}
.ok-kilit svg { width: 5cqw; height: 5cqw; }

/* Arka yüz: yalnız kazanma anında dönerken görünür. */
.ok-arkayuz {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3cqw;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 L56 16.2 L56 48.5 L28 64.7 L0 48.5 L0 16.2 Z M28 64.7 L28 97' fill='none' stroke='%23FFF' stroke-opacity='.18' stroke-width='3'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #8E6CD8, #5A23B8);
  border: 2.6cqw solid #F5B301;
  border-radius: 7cqw;
  color: #FFF;
  font-family: var(--yazi-baslik);
  font-weight: 800;
  font-size: 9cqw;
  transform: rotateY(180deg) translateZ(1px);
}
.ok-arka-logo {
  width: 34cqw;
  height: 38cqw;
  background: #F5B301;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ---------- Kazanma penceresi ---------- */

.kart-odul {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  background: transparent;
  border: 0;
  color: var(--murekkep);
}
/* Pencerede parmakla sürükleyince sayfa kaymasın, kart eğilsin. */
.kart-odul .kart-kutu { touch-action: none; }

.kart-odul::backdrop {
  background: radial-gradient(circle at 50% 42%, rgba(90, 35, 184, .78), rgba(24, 10, 50, .92));
}
.kart-odul[open] { animation: ko-belir .35s ease-out; }
@keyframes ko-belir { from { opacity: 0; } }

.ko-ic {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 18px;
  min-height: 100%;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  text-align: center;
}
.ko-ic h2 {
  margin: 0;
  color: #FFF;
  font-family: var(--yazi-baslik);
  font-weight: 800;
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.05;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .25);
}

.ko-sahne {
  position: relative;
  width: min(72vw, 300px, 46dvh);
  margin: 12px 0 6px;
}
.ko-isin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 227, 122, .32) 0 10deg, transparent 10deg 24deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
  mask-image: radial-gradient(closest-side, #000 30%, transparent);
  border-radius: 50%;
  animation: ko-don 18s linear infinite;
  pointer-events: none;
}
@keyframes ko-don { to { rotate: 1turn; } }

.ko-parca {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 14px;
  height: 14px;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  pointer-events: none;
}

.ko-not {
  max-width: 30ch;
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-weight: 700;
  font-size: 18px;
}
.ko-not strong { color: #FFE27A; }
.ko-dugmeler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.ko-dugmeler a { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- Yıpranma: tozlu, solgun, yıpranmış (koleksiyon.js → asinma) ----------
   3D kuralı gereği süzgeçler yalnız iç katmanlarda: kapak, karakter, simgeler, toz katmanı.
   Toz katmanı kapağın önünde, karakterin arkasında durur. Karakter kendi süzgeciyle solar. */
.ok-toz {
  position: absolute;
  left: 6cqw;
  top: 6cqw;
  width: 88cqw;
  height: calc(88cqw * var(--pencere-oran));
  border-radius: 4.5cqw;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 40%, rgba(96, 72, 40, .6) 0 .6cqw, transparent .8cqw) 0 0 / 8cqw 7cqw,
    radial-gradient(circle at 70% 65%, rgba(96, 72, 40, .5) 0 .4cqw, transparent .6cqw) 2cqw 3cqw / 6cqw 5cqw,
    linear-gradient(170deg, rgba(214, 196, 160, .55), rgba(150, 122, 82, .6));
  transform: translateZ(3px);
}
.asinma-1 .ok-toz { opacity: .6; }
.asinma-1 .ok-arka { filter: blur(.5cqw) saturate(.7) brightness(.95); }
.asinma-1 .ok-on img { filter: drop-shadow(0 2cqw 2.2cqw rgba(30, 20, 60, .3)) saturate(.7) sepia(.15); }
.asinma-1 .ok-isilti { opacity: .4; }

.asinma-2 .ok-toz { opacity: .85; }
.asinma-2 .ok-arka { filter: blur(.5cqw) saturate(.4) sepia(.35) brightness(.92); }
.asinma-2 .ok-on img { filter: drop-shadow(0 2cqw 2.2cqw rgba(30, 20, 60, .25)) saturate(.45) sepia(.35) brightness(.95); }
.asinma-2 .ok-isilti,
.asinma-3 .ok-isilti { opacity: .15; }
.asinma-2 .ok-simge,
.asinma-3 .ok-simge { filter: drop-shadow(0 1.6cqw 1.6cqw rgba(30, 20, 60, .2)) saturate(.35) sepia(.4); }
.asinma-2 .ok-plaka,
.asinma-3 .ok-plaka { background: rgba(236, 222, 194, .95); }
.asinma-2 .ok-cerceve::before,
.asinma-3 .ok-cerceve::before { background-color: #E9DCC0; }

.asinma-3 .ok-toz {
  opacity: 1;
  background:
    /* çizikler */
    linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .7) 30.4%, transparent 31%),
    linear-gradient(64deg, transparent 57%, rgba(255, 255, 255, .6) 57.3%, transparent 57.9%),
    linear-gradient(150deg, transparent 71%, rgba(255, 255, 255, .55) 71.3%, transparent 71.8%),
    /* çay lekesi */
    radial-gradient(circle at 24% 78%, transparent 9cqw, rgba(120, 80, 30, .45) 9.5cqw, rgba(120, 80, 30, .2) 11cqw, transparent 11.5cqw),
    radial-gradient(circle at 30% 40%, rgba(96, 72, 40, .65) 0 .6cqw, transparent .8cqw) 0 0 / 8cqw 7cqw,
    radial-gradient(circle at 70% 65%, rgba(96, 72, 40, .55) 0 .4cqw, transparent .6cqw) 2cqw 3cqw / 6cqw 5cqw,
    linear-gradient(170deg, rgba(204, 182, 140, .62), rgba(136, 106, 66, .68));
}
.asinma-3 .ok-arka { filter: blur(.5cqw) saturate(.2) sepia(.6) brightness(.88); }
.asinma-3 .ok-on img { filter: drop-shadow(0 2cqw 2.2cqw rgba(30, 20, 60, .2)) saturate(.25) sepia(.55) brightness(.9) contrast(.92); }
.asinma-3 .ok-cerceve { animation: none; }
/* Ad plakasının kıvrılmış köşesi */
.asinma-3 .ok-plaka::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10cqw;
  height: 10cqw;
  background: linear-gradient(315deg, var(--zemin) 50%, #E2CFA6 50%, #B59A6C);
  border-radius: 2.4cqw 0 4.5cqw 0;
  box-shadow: -.8cqw -.8cqw 1.2cqw rgba(58, 42, 16, .25);
}

@media (prefers-reduced-motion: reduce) {
  .canli .ok-govde,
  .ok-simge,
  .seviye-3 .ok-cerceve,
  .ko-isin { animation: none; }
  .oyun-karti { transition: none; }
}