/* ============================================================================
   HOLO FOLYO EFEKTLERİ — 23 Ağustos 2026
   Teknik: simeydotme/pokemon-cards-css (MIT) incelenerek uyarlandı.
   Dokular: app/assets/holo/*.png (PIL ile üretildi, gerçek kart görselinden ölçüldü)

   KIRPMA — iki tür:
     .holo / .ters      → yalnız görsel kutusu (normal kart düzeni)
     .tamkart           → kırpma yok (IR/SRI/MHR/Ultra Rare — görsel tüm kartı kaplar)
   Kırpma sınırı gerçek karttan ölçüldü: üst %10,4 · sol %8,9 · sağ %92,8 · alt %47,2

   ⚠️ Bu kırpma MODERN düzen içindir; WOTC/e-Card dönemi farklı orana sahiptir.

   JS'in yazdığı değişkenler:
     --px --py (imleç %) · --bx --by (arka plan kaydırma %) · --fc (merkeze uzaklık)
     --op (yoğunluk, varsayılan .4) · --rx --ry (3B eğim)
   ============================================================================ */

:root{
  --holo-clip: inset(9.85% 8% 52.85% 8%);
  /* Trainer / Stadium / Item düzeninde görsel kutusu DAHA AŞAĞIDA başlar */
  --holo-clip-trainer: inset(14.5% 8.5% 48.2% 8.5%);
  --holo-clip-trainer-ters: polygon(0% 0%,100% 0%,100% 100%,0% 100%,
                            0 51.8%,91.5% 51.8%,91.5% 14.5%,8.5% 14.5%,8.5% 51.8%,0 55%);
  --holo-kose: 4.6% / 3.3%;
  --holo-clip-ters: polygon(0% 0%,100% 0%,100% 100%,0% 100%,
                            0 47.15%,92% 47.15%,92% 9.85%,8% 9.85%,8% 47.15%,0 50%);
}

.holokart{
  --px:50%; --py:50%; --bx:50%; --by:50%; --fc:0; --op:.4; --rx:0deg; --ry:0deg;
  position:relative; isolation:isolate;
  transform:rotateY(var(--ry)) rotateX(var(--rx));
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.6,.3,1);
}
.holokart.aktif{ transition:none }
.holokart{ border-radius:var(--holo-kose) }
.holokart > img{ border-radius:inherit; display:block }
.holokart .kat{ position:absolute; inset:0; pointer-events:none;
  border-radius:var(--holo-kose); overflow:hidden; clip-path:var(--holo-clip) }
.holokart.tamkart .kat{ clip-path:none }
.holokart.ters .kat{ clip-path:var(--holo-clip-ters) }
.holokart.trainer .kat{ clip-path:var(--holo-clip-trainer) }
.holokart.trainer.ters .kat{ clip-path:var(--holo-clip-trainer-ters) }
.holokart.tamkart .kat, .holokart.tamkart.ters .kat{ clip-path:none }

/* ── ortak parlama ── */
.holokart .glare{
  background:radial-gradient(farthest-corner circle at var(--px) var(--py),
    hsla(0,0%,100%,.65) 6%, hsla(0,0%,100%,.2) 22%, hsla(0,0%,0%,.5) 90%);
  mix-blend-mode:overlay; opacity:calc(var(--op)*.8) }

/* ── COSMOS / GALAXY — 1999-2011 (Base → Neo) ── */
.holokart.d-cosmos .shine{
  --s:4%;
  background-image:
    url("/assets/holo/cosmos_doku.png"),
    repeating-linear-gradient(82deg,
      hsl(53,65%,60%) calc(var(--s)*1), hsl(93,56%,50%) calc(var(--s)*2),
      hsl(176,54%,49%) calc(var(--s)*3), hsl(228,59%,55%) calc(var(--s)*4),
      hsl(283,60%,55%) calc(var(--s)*5), hsl(326,59%,51%) calc(var(--s)*6),
      hsl(283,60%,55%) calc(var(--s)*8), hsl(228,59%,55%) calc(var(--s)*9),
      hsl(176,54%,49%) calc(var(--s)*10), hsl(93,56%,50%) calc(var(--s)*11),
      hsl(53,65%,60%) calc(var(--s)*12)),
    radial-gradient(farthest-corner circle at var(--px) var(--py),
      hsla(180,100%,89%,.5) 5%, hsla(180,14%,57%,.3) 40%, #000 130%);
  background-size:55% 55%, 200% 200%, cover;
  background-position:center, calc(((50% - var(--bx))*2.2)+50%) calc(((50% - var(--by))*2.6)+50%), center;
  background-blend-mode:soft-light, hue;
  filter:brightness(1.15) contrast(1.35) saturate(1.4);
  mix-blend-mode:color-dodge; opacity:var(--op) }

/* ── TINSEL — Black & White ── */
.holokart.d-tinsel .shine{
  background-image:
    url("/assets/holo/tinsel_doku.png"),
    repeating-linear-gradient(97deg,
      #ff5d8f, #ffd93d 10%, #6bffb0 20%, #4dc9ff 30%, #b57bff 40%, #ff5d8f 50%);
  background-size:34% 100%, 240% 240%;
  background-position:center, calc(((50% - var(--bx))*3)+50%) var(--by);
  background-blend-mode:overlay;
  filter:brightness(1.1) contrast(1.3) saturate(1.25);
  mix-blend-mode:color-dodge; opacity:var(--op) }

/* ── SHEEN — XY · ayrıca IR/SRI/MHR/Ultra Rare (tam görsel) ── */
.holokart.d-sheen .shine{
  background-image:
    repeating-linear-gradient(118deg,
      hsla(0,0%,0%,0) 0%, hsla(190,90%,88%,.9) 7%, hsla(0,0%,100%,1) 10%,
      hsla(310,80%,86%,.85) 13%, hsla(0,0%,0%,0) 20%, hsla(0,0%,0%,0) 34%);
  background-size:230% 230%;
  background-position:calc(((50% - var(--bx))*4.5)+50%) calc(((50% - var(--by))*4.5)+50%);
  filter:brightness(1.25) contrast(1.35) saturate(1.15);
  mix-blend-mode:screen; opacity:calc(var(--op)*1.5) }

/* ── CRACKED ICE — promo/özel ── */
.holokart.d-buz .shine{
  background-image:
    url("/assets/holo/buz_doku.png"),
    repeating-linear-gradient(108deg,
      hsl(200,45%,86%) 0%, hsl(255,40%,88%) 26%, hsl(330,42%,88%) 52%, hsl(200,45%,86%) 78%);
  background-size:62% 62%, 240% 240%;
  background-position:calc(((50% - var(--bx))*.9)+50%) calc(((50% - var(--by))*.9)+50%),
                      calc(((50% - var(--bx))*2.4)+50%) center;
  background-blend-mode:multiply;
  filter:brightness(1.08) contrast(1.05) saturate(1.1);
  mix-blend-mode:overlay; opacity:calc(var(--op)*.75) }
/* fasetlere hapsolmuş holo: doku maske olarak kullanılır */
.holokart.d-buz .bars{
  background-image:
    repeating-linear-gradient(101deg,
      hsl(348,95%,68%) 0%, hsl(45,95%,68%) 9%, hsl(150,85%,62%) 18%,
      hsl(192,95%,65%) 27%, hsl(255,90%,72%) 36%, hsl(348,95%,68%) 45%),
    radial-gradient(farthest-corner circle at var(--px) var(--py),
      hsla(0,0%,100%,.9) 6%, hsla(0,0%,60%,.35) 30%, #000 75%);
  background-size:190% 190%, 160% 160%;
  background-position:calc(((50% - var(--bx))*3.6)+50%) calc(((50% - var(--by))*2.4)+50%), center;
  background-blend-mode:color-dodge;
  -webkit-mask-image:url("/assets/holo/buz_doku.png"); mask-image:url("/assets/holo/buz_doku.png");
  -webkit-mask-size:62% 62%; mask-size:62% 62%;
  -webkit-mask-position:calc(((50% - var(--bx))*.9)+50%) calc(((50% - var(--by))*.9)+50%);
          mask-position:calc(((50% - var(--bx))*.9)+50%) calc(((50% - var(--by))*.9)+50%);
  filter:brightness(1.15) contrast(1.5) saturate(1.5);
  mix-blend-mode:color-dodge; opacity:calc(var(--op)*.55) }

/* ── SWSH — bant + tarama çizgileri ── */
.holokart.d-swsh .shine{
  background-image:
    repeating-linear-gradient(110deg,#a259ff,#4d7bff,#3ddc84,#ffe74d,#ff4d6d,
      #a259ff,#4d7bff,#3ddc84,#ffe74d,#ff4d6d,#a259ff,#4d7bff,#3ddc84,#ffe74d,#ff4d6d),
    repeating-linear-gradient(90deg,#000 0px,#000 2px,#666 2px,#666 4px);
  background-position:calc(((50% - var(--bx))*2.6)+50%) calc(((50% - var(--by))*3.5)+50%), center;
  background-size:400% 400%, cover;
  background-blend-mode:overlay;
  filter:brightness(1.1) contrast(1.1) saturate(1.2);
  mix-blend-mode:color-dodge; opacity:var(--op) }
.holokart.d-swsh .bars{
  --b:3%;
  background-image:
    repeating-linear-gradient(90deg,#000 calc(var(--b)*2),#b3b3b3 calc(var(--b)*3),
      #000 calc(var(--b)*3.5),#b3b3b3 calc(var(--b)*4),#000 calc(var(--b)*5),#000 calc(var(--b)*14)),
    repeating-linear-gradient(90deg,#000 calc(var(--b)*2),#b3b3b3 calc(var(--b)*3),
      #000 calc(var(--b)*3.5),#b3b3b3 calc(var(--b)*4),#000 calc(var(--b)*5),#000 calc(var(--b)*10));
  background-position:calc((((50% - var(--bx))*1.65)+50%)+(var(--by)*.5)) var(--bx), center;
  background-size:200% 200%,200% 200%;
  background-blend-mode:difference;
  filter:brightness(.9) contrast(1.4);
  mix-blend-mode:color-dodge; opacity:calc(var(--op)*.75) }

/* ── MIRAGE — Scarlet & Violet (Sheen'in yatay hali) ── */
.holokart.d-mirage .shine{
  background-image:
    repeating-linear-gradient(93deg,
      hsla(0,0%,0%,0) 0%, hsla(200,70%,90%,.75) 5%, hsla(0,0%,100%,.95) 7.5%,
      hsla(45,70%,90%,.7) 10%, hsla(0,0%,0%,0) 16%, hsla(0,0%,0%,0) 30%),
    repeating-linear-gradient(93deg,
      hsla(0,0%,100%,0) 0px, hsla(0,0%,100%,0) 3px,
      hsla(0,0%,100%,.35) 3px, hsla(0,0%,100%,.35) 4px);
  background-size:210% 210%, cover;
  background-position:calc(((50% - var(--bx))*3.6)+50%) calc(((50% - var(--by))*1.2)+50%), center;
  filter:brightness(1.12) contrast(1.2) saturate(.7);
  mix-blend-mode:screen; opacity:var(--op) }

/* ── REVERSE HOLO — görsel HARİÇ her yer ── */
.holokart.ters .shine{
  background-image:
    radial-gradient(circle at var(--px) var(--py), #fff 5%, #000 50%, #fff 80%),
    linear-gradient(-45deg, #000 15%, #fff, #000 85%),
    repeating-linear-gradient(102deg,
      #ff4d6d, #ffe74d 12%, #3ddc84 24%, #4d7bff 36%, #a259ff 48%, #ff4d6d 60%);
  background-blend-mode:soft-light, difference;
  background-size:120% 120%, 200% 200%, 260% 260%;
  background-position:center, calc(100% * var(--fx,.5)) calc(100% * var(--fy,.5)), var(--bx) var(--by);
  filter:brightness(.95) contrast(1.75) saturate(1.35);
  mix-blend-mode:color-dodge;
  opacity:calc(var(--op)*1.35 - var(--fc)*.25) }
.holokart.ters .bars{
  background-image:
    repeating-linear-gradient(94deg,#000 0px,#000 1px,#8a8a8a 1px,#8a8a8a 3px),
    repeating-linear-gradient(-16deg,
      #ff4d6d, #ffe74d 14%, #3ddc84 28%, #4d7bff 42%, #a259ff 56%, #ff4d6d 70%);
  background-position:center, calc(((50% - var(--bx))*2.2)+50%) var(--by);
  background-size:cover, 330% 330%;
  background-blend-mode:overlay;
  filter:brightness(1.05) contrast(1.25) saturate(1.3);
  mix-blend-mode:color-dodge; opacity:calc(var(--op)*.5) }

@media (prefers-reduced-motion: reduce){ .holokart{ transition:none } }

/* ── varyant satırındaki küçük görsel ──────────────────────────────────────
   Kaynaklarda varyanta özel görsel YOK (hepsi aynı kart taraması). Folyo
   efekti burada da uygulanınca varyantlar birbirinden ayırt edilebilir hâle
   gelir. Fare takibi yok — sabit bir açıdan bakılıyormuş gibi statik. */
.vthumb-holo{
  position:relative; display:inline-block; isolation:isolate; line-height:0;
  --px:38%; --py:30%; --bx:44%; --by:36%; --fx:.38; --fy:.3; --fc:.35; --op:.42;
}
.vthumb-holo .vthumb{ display:block }
.vthumb-holo{ border-radius:var(--holo-kose) }
.vthumb-holo .kat{ position:absolute; inset:0; pointer-events:none;
  border-radius:var(--holo-kose); clip-path:var(--holo-clip) }
.vthumb-holo.trainer .kat{ clip-path:var(--holo-clip-trainer) }
.vthumb-holo.trainer.ters .kat{ clip-path:var(--holo-clip-trainer-ters) }
.vthumb-holo.tamkart .kat{ clip-path:none }
.vthumb-holo.ters .kat{ clip-path:var(--holo-clip-ters) }

/* Sarmalayıcı her zaman var; folyo sınıfı yokken katmanlar görünmez olmalı */
#holoSheet:not(.holokart) .kat, .vthumb-holo:not(.holokart) .kat{ display:none }