/* ── Yetenek Ağacı Paneli — quest panelindeki bottom-sheet/modal deseniyle aynı ── */
#skill-panel{
  position:fixed;inset:0;z-index:800;
  background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:none;align-items:flex-end;justify-content:center;
}
#skill-panel.open{display:flex;}
#skill-card{
  background:linear-gradient(160deg,var(--surf) 0%,var(--surf2) 100%);
  border:1px solid var(--bdr2);
  border-radius:22px 22px 0 0;
  width:100%;max-width:560px;
  max-height:88vh;overflow-y:auto;
  padding:1.2rem 1.1rem 1.6rem;
  display:flex;flex-direction:column;gap:.85rem;
  box-shadow:0 -8px 48px rgba(0,0,0,.55), 0 0 40px rgba(155,127,255,.08);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
#skill-panel.open #skill-card{transform:translateY(0);}
#skill-card::-webkit-scrollbar{width:3px;}
#skill-card::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}
#skill-card::before{
  content:'';display:block;width:36px;height:3px;
  background:rgba(255,255,255,.18);border-radius:2px;
  margin:0 auto .3rem;flex-shrink:0;
}
@media (min-width:700px){
  #skill-panel{align-items:center;}
  #skill-card{border-radius:22px;}
}

/* SP bakiye çubuğu */
.sk-sp-bar{
  display:flex;align-items:center;gap:.45rem;
  background:rgba(155,127,255,.10);border:1px solid rgba(155,127,255,.35);
  border-radius:12px;padding:.6rem .8rem;
}
.sk-sp-star{font-size:1.1rem;}
#sk-sp-val{font-family:var(--font-mono);font-size:1.15rem;font-weight:800;color:#9b7fff;}
.sk-sp-lbl{font-size:.72rem;font-weight:700;color:var(--txt);}
.sk-sp-hint{margin-left:auto;font-size:.58rem;color:var(--muted);text-align:right;}

/* Aktif efekt özeti */
#skill-effects{display:flex;flex-wrap:wrap;gap:.4rem;}
.sk-eff{
  font-family:var(--font-mono);font-size:.62rem;color:var(--muted);
  background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;
  padding:.28rem .55rem;
}

/* ── AĞAÇ GÖRÜNÜMÜ ──
   Dal merkezi (hub) üstte; düğümler önkoşul derinliğine göre
   katmanlarda daireler halinde; SVG bezier "ip"ler düğümleri bağlar. */
.sk-branch{position:relative;padding:.15rem 0 .5rem;}
.sk-branch + .sk-branch{border-top:1px solid var(--bdr);margin-top:.35rem;padding-top:.6rem;}
.sk-tree{position:relative;}
.sk-lines{position:absolute;left:0;top:0;pointer-events:none;z-index:0;overflow:visible;}
.sk-line{fill:none;stroke:var(--bdr2);stroke-width:2;stroke-dasharray:4 5;stroke-linecap:round;opacity:.75;}
.sk-line.ready{stroke:rgba(var(--accent-rgb),.8);stroke-dasharray:none;}
.sk-line.on{stroke:#00d4a0;stroke-dasharray:none;}

.sk-tier{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-start;gap:1.4rem;padding:.7rem 0;flex-wrap:wrap;}
.sk-tier-hub{padding:.1rem 0 .35rem;}
.sk-hub{
  display:flex;align-items:center;gap:.45rem;
  background:var(--surf2);border:1px solid var(--bdr2);border-radius:999px;
  padding:.35rem 1rem;font-weight:800;font-size:.76rem;color:var(--txt);
}

/* Düğüm */
.sk-tnode{
  display:flex;flex-direction:column;align-items:center;gap:.32rem;
  width:96px;cursor:pointer;text-align:center;user-select:none;
}
.sk-tn-circle{
  position:relative;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surf2);border:2px solid var(--bdr2);
  transition:border-color .15s, box-shadow .15s, transform .12s;
}
.sk-tnode:hover .sk-tn-circle{transform:translateY(-2px);}
/* Açılabilir + parası yeten: vurgulu, hafif nabız */
.sk-tnode.ready .sk-tn-circle{
  border-color:var(--accent);
  animation:skPulse 1.9s ease-in-out infinite;
}
@keyframes skPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16);}
  50%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),.28);}
}
/* Açılabilir ama SP/Bits yetmiyor */
.sk-tnode.avail .sk-tn-circle{border-color:var(--bdr2);}
/* Alınmış */
.sk-tnode.owned .sk-tn-circle{border-color:#00d4a0;background:rgba(0,212,160,.10);}
/* Önkoşulu eksik: soluk + kesikli çerçeve */
.sk-tnode.gated{cursor:not-allowed;}
.sk-tnode.gated .sk-tn-circle{opacity:.45;border-style:dashed;}
.sk-tnode.gated .sk-tn-label,.sk-tnode.gated .sk-tn-cost{opacity:.55;}

.sk-tn-ic{color:var(--txt);line-height:1;display:flex;}
.sk-tn-ic svg{width:22px;height:22px;}
.sk-tn-inf{font-size:1.35rem;font-weight:800;color:#f5a623;}
.sk-tn-colors{display:grid;grid-template-columns:repeat(2,15px);gap:3px;}
.sk-tn-colors i{
  width:15px;height:15px;border-radius:4px;display:inline-block;
  border:1px solid rgba(0,0,0,.35);
}
/* Daire üstü rozetler: ✓ / kilit / tekrar sayısı */
.sk-tn-badge{
  position:absolute;right:-5px;bottom:-5px;
  min-width:20px;height:20px;border-radius:999px;padding:0 3px;
  display:flex;align-items:center;justify-content:center;
  font-size:.58rem;font-weight:800;border:2px solid var(--surf);
}
.sk-tn-badge.check{background:#00d4a0;color:#fff;}
.sk-tn-badge.lock{background:var(--surf3);color:var(--muted);}
.sk-tn-badge.lock svg{width:10px;height:10px;}
.sk-tn-badge.reps{background:var(--accent);color:#fff;font-family:var(--font-mono);}

.sk-tn-label{font-size:.62rem;font-weight:700;color:var(--txt);line-height:1.25;}
/* Düğümün somut etkisi (ör. "+7 depo", "3 px/tık") — görünür bilgi */
.sk-tn-fx{
  font-size:.55rem;font-weight:700;color:#9b7fff;line-height:1.2;
  font-family:var(--font-mono);
}
.sk-tnode.gated .sk-tn-fx{opacity:.55;}
/* Bilgi kartı satın alma butonu */
.sk-info-btn{
  width:100%;border:1px solid var(--bdr2);border-radius:10px;padding:.6rem;
  font-family:var(--font-display);font-weight:800;font-size:.8rem;
  cursor:pointer;background:var(--surf3);color:var(--txt);
}
.sk-info-btn.buy{
  background:linear-gradient(135deg,#5b3a94,#9b7fff);color:#fff;border:none;
}
.sk-info-btn.buy.poor{opacity:.55;}
.sk-tn-cost{
  font-family:var(--font-mono);font-size:.6rem;font-weight:800;
  color:var(--accent-text,var(--accent));
  background:rgba(var(--accent-rgb),.12);
  border:1px solid rgba(var(--accent-rgb),.4);
  border-radius:999px;padding:.12rem .5rem;
  display:inline-flex;align-items:center;gap:.2rem;
}
.sk-tn-cost.poor{opacity:.5;}
.sk-tn-cost.bits{color:var(--gold);background:rgba(201,146,42,.12);border-color:rgba(201,146,42,.4);}
.sk-tn-cost.done{color:#00d4a0;background:rgba(0,212,160,.1);border-color:rgba(0,212,160,.4);}
.sk-reps{font-family:var(--font-mono);font-size:.62rem;color:#9b7fff;}

@media (max-width:520px){
  .sk-tier{gap:.7rem;padding:.55rem 0;}
  .sk-tnode{width:80px;}
  .sk-tn-circle{width:48px;height:48px;}
  .sk-tn-ic svg{width:18px;height:18px;}
}

/* ── Kilitli palet renkleri (Sanatçı dalı) ── */
.psw.sk-locked{
  filter:grayscale(.85) brightness(.55);
  cursor:not-allowed;position:relative;
}
.psw.sk-locked::after{
  content:'🔒';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;opacity:.9;
}

/* ── Fırça boyutu butonu (ptoolbar) ── */
#brush-size-btn{
  width:26px;height:26px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;background:var(--surf2);border:1px solid var(--bdr);
  transition:border-color .15s,background .15s;flex-shrink:0;
}
#brush-size-btn.active{border-color:#9b7fff;background:rgba(155,127,255,.18);}

/* ════════════════════════════════════════════════════════════════
   YETENEK AĞACI v2 — "Takımyıldız" yükseltmesi
   Düz gri daireler → derinlikli, ışıyan yetenek küreleri; kesikli
   griler → parlayan enerji hatları. Boyutlar KORUNUR (SVG çizgi
   ölçümü node konumlarına bağlı); yalnız renk/gölge/gradyan/animasyon.
   Sınıflara özeldir (quest paneli etkilenmez).
════════════════════════════════════════════════════════════════ */

/* ── Efekt çipleri: hafif gradyan + accent ikon ── */
.sk-eff{
  background:linear-gradient(160deg, rgba(var(--surf3-rgb),.9) 0%, rgba(var(--surf2-rgb),.9) 100%);
  box-shadow:inset 0 1px 0 rgba(var(--shine-rgb),.06);
  color:var(--txt);
}
.sk-eff svg{color:var(--accent-text,var(--accent));vertical-align:-.12em;}

/* ── Dal merkezi (hub): küçük bir arma ── */
.sk-hub{
  background:linear-gradient(160deg, var(--surf3) 0%, var(--surf2) 100%);
  border-color:var(--bdr2);
  box-shadow:inset 0 1px 0 rgba(var(--shine-rgb),.08), 0 2px 10px rgba(0,0,0,.35);
}
.sk-hub svg{color:var(--accent-text,var(--accent));}

/* ── Bağlantı hatları: parlayan enerji ── */
.sk-line{stroke-width:2.5;opacity:.7;}
.sk-line.ready{
  stroke:rgba(var(--accent-rgb),.9);
  filter:drop-shadow(0 0 3px rgba(var(--accent-rgb),.55));opacity:1;
}
.sk-line.on{
  stroke:#00d4a0;
  filter:drop-shadow(0 0 3px rgba(0,212,160,.6));opacity:1;
}

/* ── Yetenek küreleri: derinlikli çekirdek + hâle ── */
.sk-tn-circle{
  background:radial-gradient(circle at 50% 36%, var(--surf3) 0%, var(--surf2) 72%);
  border:2px solid var(--bdr2);
  box-shadow:
    inset 0 1px 0 rgba(var(--shine-rgb),.12),
    inset 0 -7px 12px -9px rgba(0,0,0,.7),
    0 4px 12px rgba(0,0,0,.42);
}
.sk-tnode:hover .sk-tn-circle{transform:translateY(-3px) scale(1.04);}

/* Alınmış: zümrüt çekirdek + yeşil hâle */
.sk-tnode.owned .sk-tn-circle{
  border-color:#00d4a0;
  background:radial-gradient(circle at 50% 36%, rgba(0,212,160,.4) 0%, rgba(0,120,92,.16) 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 0 0 1px rgba(0,212,160,.35),
    0 0 20px rgba(0,212,160,.35),
    0 4px 12px rgba(0,0,0,.4);
}
.sk-tnode.owned .sk-tn-ic{color:#00d4a0;}

/* Açılabilir + parası yeten: accent çekirdek + nabızlı hâle */
.sk-tnode.ready .sk-tn-circle{
  border-color:var(--accent);
  background:radial-gradient(circle at 50% 36%, rgba(var(--accent-rgb),.34) 0%, var(--surf2) 74%);
  animation:skPulse 2.1s ease-in-out infinite;
}
.sk-tnode.ready .sk-tn-ic{color:var(--accent-text,var(--accent));}
@keyframes skPulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(var(--shine-rgb),.12), 0 0 0 3px rgba(var(--accent-rgb),.16), 0 0 14px rgba(var(--accent-rgb),.30);}
  50%    {box-shadow:inset 0 1px 0 rgba(var(--shine-rgb),.12), 0 0 0 6px rgba(var(--accent-rgb),.10), 0 0 28px rgba(var(--accent-rgb),.52);}
}

/* Açılabilir ama SP/Bits yetmiyor: nötr, hover'da accent ipucu */
.sk-tnode.avail .sk-tn-circle{border-color:var(--bdr2);}
.sk-tnode.avail:hover .sk-tn-circle{
  border-color:rgba(var(--accent-rgb),.6);
  box-shadow:
    inset 0 1px 0 rgba(var(--shine-rgb),.12),
    0 0 16px rgba(var(--accent-rgb),.24),
    0 4px 12px rgba(0,0,0,.42);
}

/* Kilitli: soluk, kesik çerçeve (mevcut) — biraz daha okunur */
.sk-tnode.gated .sk-tn-circle{opacity:.42;border-style:dashed;background:var(--surf2);}

/* ∞ tekrar düğümü ikonu daha canlı */
.sk-tn-inf{text-shadow:0 0 12px rgba(245,166,35,.5);}

/* Rozetler: ✓/kilit/tekrar — hafif gölge */
.sk-tn-badge{box-shadow:0 2px 6px rgba(0,0,0,.45);}
.sk-tn-badge.check{box-shadow:0 0 10px rgba(0,212,160,.5), 0 2px 6px rgba(0,0,0,.45);}

/* Maliyet çipleri: hafif gradyan derinlik */
.sk-tn-cost{box-shadow:inset 0 1px 0 rgba(var(--shine-rgb),.08);}

/* Purple sabitleri accent'e getir (tema rengine uysun) */
#sk-sp-val{color:var(--accent-text,var(--accent));}
.sk-reps{color:var(--accent-text,var(--accent));}

@media (prefers-reduced-motion: reduce){
  .sk-tnode.ready .sk-tn-circle{animation:none;box-shadow:inset 0 1px 0 rgba(var(--shine-rgb),.12), 0 0 0 4px rgba(var(--accent-rgb),.18), 0 0 16px rgba(var(--accent-rgb),.38);}
}

/* ════════════════════════════════════════════════════════════════
   YETENEK AĞACI v3 — "RNG / GACHA" YÜKSELTMESİ
   Her düğüm maliyetine göre bir NADİRLİĞE (rarity) sahip: renkli
   glow küre + dönen konik halka + shine sweep; en üstte MYTHIC için
   holografik gökkuşağı çekirdek. Açılışta tüm ekranı saran dramatik
   "reveal" (flash + parçacık + büyüyen nadirlik yazısı). Düğüm kutu
   boyutu korunur (SVG bağlantı ipleri konumdan ölçülür); zenginlik
   halka/halo/pseudo katmanlarında — layout'a dokunmaz.
   Görenler "oha" desin. 🎰
════════════════════════════════════════════════════════════════ */

/* ── Nadirlik renkleri (--rc: ana renk, hem düğüm hem reveal kullanır) ── */
.sk-r-common   { --rc:#c2cade; --rc-rgb:194,202,222; }
.sk-r-uncommon { --rc:#38d67f; --rc-rgb:56,214,127; }
.sk-r-rare     { --rc:#3f8cff; --rc-rgb:63,140,255; }
.sk-r-epic     { --rc:#b061ff; --rc-rgb:176,97,255; }
.sk-r-legendary{ --rc:#ffb020; --rc-rgb:255,176,32; }
.sk-r-mythic   { --rc:#ff5fe0; --rc-rgb:255,95,224; }

/* ── Küre sarmalayıcı: halo + halka + çekirdek üst üste ── */
.sk-tn-orb{
  position:relative;width:64px;height:64px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
/* Yumuşak dış hâle (nadirlik renginde ışıma) */
.sk-tn-halo{
  position:absolute;z-index:0;width:56px;height:56px;border-radius:50%;
  pointer-events:none;box-shadow:0 0 18px 2px rgba(var(--rc-rgb),.45);opacity:.85;
  transition:box-shadow .2s, opacity .2s;
}
.sk-r-legendary .sk-tn-halo,.sk-r-mythic .sk-tn-halo{box-shadow:0 0 28px 5px rgba(var(--rc-rgb),.62);}
/* Dönen konik enerji halkası (rare ve üstü) */
.sk-tn-ring{
  position:absolute;z-index:1;width:64px;height:64px;border-radius:50%;
  pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(var(--rc-rgb),.95) 40deg, transparent 110deg,
    transparent 200deg, rgba(var(--rc-rgb),.55) 240deg, transparent 300deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation:skSpin 3.4s linear infinite;
}
.sk-r-rare .sk-tn-ring,.sk-r-epic .sk-tn-ring,
.sk-r-legendary .sk-tn-ring,.sk-r-mythic .sk-tn-ring{opacity:.92;}

/* ── Çekirdek küre — nadirlik gradyanı (SVG ipleri bunu ölçer) ── */
.sk-tnode .sk-tn-circle{
  position:relative;z-index:2;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(var(--rc-rgb),.85);
  background:radial-gradient(circle at 50% 32%,
    rgba(var(--rc-rgb),.42) 0%, rgba(var(--rc-rgb),.10) 55%, var(--surf2) 100%);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.22),
    inset 0 -8px 14px -8px rgba(0,0,0,.7),
    0 0 0 1px rgba(var(--rc-rgb),.35),
    0 4px 14px rgba(0,0,0,.45);
  transition:transform .15s var(--ease-spring), box-shadow .2s, border-color .2s;
}
/* İçerik (ikon/renkler/∞) katman üstte */
.sk-tn-circle > .sk-tn-ic,
.sk-tn-circle > .sk-tn-colors,
.sk-tn-circle > .sk-tn-inf{position:relative;z-index:3;}
.sk-tn-ic{color:#fff;}
.sk-tn-ic svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));}
.sk-tn-inf{color:#fff;text-shadow:0 0 12px rgba(255,255,255,.7),0 0 4px rgba(var(--rc-rgb),.9);}

/* Shine sweep — küre üstünden geçen ışık (hover'da herkes, efsanede sürekli) */
.sk-tn-shine{position:absolute;z-index:1;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;}
.sk-tn-shine::before{
  content:'';position:absolute;top:-40%;left:-130%;width:70%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:rotate(22deg);
}
.sk-tnode:not(.gated):hover .sk-tn-shine::before{animation:skSweep .8s ease;}
.sk-r-legendary .sk-tn-shine::before,
.sk-r-mythic .sk-tn-shine::before{animation:skSweep 3.4s ease-in-out infinite;}

/* ── MYTHIC — holografik gökkuşağı çekirdek ── */
.sk-r-mythic .sk-tn-circle{border-color:rgba(255,255,255,.65);}
.sk-r-mythic .sk-tn-circle::before{
  content:'';position:absolute;z-index:0;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,#ff4fd8,#ffd24f,#4fff9f,#4fd2ff,#b061ff,#ff4fd8);
  animation:skSpin 3s linear infinite;opacity:.9;
}
.sk-r-mythic .sk-tn-circle::after{
  content:'';position:absolute;z-index:1;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.6) 0%, transparent 55%);
}

/* ── Durumlar (rarity renkli) ── */
/* Alınabilir + para yeten: nadirlik renginde nabız */
.sk-tnode.ready .sk-tn-circle{animation:skPulseR 1.8s ease-in-out infinite;}
@keyframes skPulseR{
  0%,100%{box-shadow:inset 0 2px 5px rgba(255,255,255,.22), inset 0 -8px 14px -8px rgba(0,0,0,.7), 0 0 0 3px rgba(var(--rc-rgb),.22), 0 0 16px rgba(var(--rc-rgb),.42);}
  50%    {box-shadow:inset 0 2px 5px rgba(255,255,255,.22), inset 0 -8px 14px -8px rgba(0,0,0,.7), 0 0 0 7px rgba(var(--rc-rgb),.10), 0 0 30px rgba(var(--rc-rgb),.68);}
}
/* Para yetmiyor: çekirdek soluk ama nadirlik ipucu görünür */
.sk-tnode.avail .sk-tn-circle{
  background:radial-gradient(circle at 50% 32%, rgba(var(--rc-rgb),.20) 0%, rgba(var(--rc-rgb),.05) 55%, var(--surf2) 100%);
  border-color:rgba(var(--rc-rgb),.5);
}
/* Alınmış: nadirlik + zümrüt onay hâlesi */
.sk-tnode.owned .sk-tn-circle{
  border-color:#00d4a0;
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.20),
    0 0 0 2px rgba(0,212,160,.45),
    0 0 20px rgba(var(--rc-rgb),.35),
    0 0 14px rgba(0,212,160,.35),
    0 4px 12px rgba(0,0,0,.4);
}
.sk-tnode.owned .sk-tn-halo{box-shadow:0 0 22px 3px rgba(0,212,160,.45);}
/* Önkoşul kilitli: soluk, gri, kesik */
.sk-tnode.gated .sk-tn-circle{opacity:.4;border-style:dashed;filter:grayscale(.55);animation:none;}
.sk-tnode.gated .sk-tn-halo,.sk-tnode.gated .sk-tn-ring{opacity:.18;animation:none;}

/* Hover — kaldır + parlat (kilitli hariç) */
.sk-tnode:not(.gated):hover .sk-tn-circle{
  transform:translateY(-3px) scale(1.06);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.24),
    0 0 0 1px rgba(var(--rc-rgb),.5),
    0 0 26px rgba(var(--rc-rgb),.6),
    0 8px 18px rgba(0,0,0,.5);
}
.sk-tnode:not(.gated):hover .sk-tn-halo{box-shadow:0 0 32px 6px rgba(var(--rc-rgb),.6);}

/* ── Nadirlik etiketi ── */
.sk-tn-rarity{
  font-family:var(--font-display);font-size:.5rem;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--rc);text-shadow:0 0 8px rgba(var(--rc-rgb),.55);
}
.sk-r-mythic .sk-tn-rarity{
  color:transparent;
  background:linear-gradient(90deg,#ff5fe0,#ffd24f,#4fff9f,#4fd2ff,#b061ff,#ff5fe0);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  animation:skHue 3s linear infinite;
}
.sk-tnode.gated .sk-tn-rarity{color:var(--muted);text-shadow:none;}

/* ── Küçük atmosfer: SP çubuğunda para parıltısı ── */
.sk-sp-bar{position:relative;overflow:hidden;}
.sk-sp-bar::after{
  content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--shine-rgb),.14),transparent);
  animation:skSweep 5s ease-in-out infinite;
}

/* ── DRAMATİK AÇILIŞ "REVEAL" (tüm ekran) ── */
.sk-reveal{
  position:fixed;inset:0;z-index:900;pointer-events:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.sk-reveal-glow{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 44%, rgba(var(--rc-rgb),.5) 0%, rgba(var(--rc-rgb),.12) 30%, transparent 62%);
  animation:skRevealGlow 1.4s ease-out forwards;
}
.sk-reveal-rays{
  position:absolute;left:50%;top:44%;width:150vmax;height:150vmax;
  background:repeating-conic-gradient(from 0deg, rgba(var(--rc-rgb),.13) 0deg 6deg, transparent 6deg 12deg);
  animation:skSpinC 9s linear infinite, skRevealGlow 1.4s ease-out forwards;
}
.sk-reveal-word{
  position:relative;font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,9vw,3.6rem);letter-spacing:.16em;color:var(--rc);
  text-shadow:0 0 30px rgba(var(--rc-rgb),.9),0 2px 12px rgba(0,0,0,.6);
  animation:skRevealWord 1.4s cubic-bezier(.18,1.5,.3,1) forwards;
}
.sk-reveal.sk-r-mythic .sk-reveal-word{
  color:transparent;
  background:linear-gradient(90deg,#ff5fe0,#ffd24f,#4fff9f,#4fd2ff,#b061ff,#ff5fe0);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  animation:skRevealWord 1.4s cubic-bezier(.18,1.5,.3,1) forwards, skHue 1.6s linear infinite;
}
.sk-spark{
  position:absolute;left:50%;top:44%;width:8px;height:8px;border-radius:50%;
  background:var(--rc);color:var(--rc);box-shadow:0 0 10px 1px currentColor;
  animation:skSpark var(--dur,1s) ease-out forwards;
}

/* ── Keyframes ── */
@keyframes skSpin{to{transform:rotate(360deg);}}
@keyframes skSpinC{from{transform:translate(-50%,-50%) rotate(0);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes skSweep{0%{left:-130%;}60%,100%{left:130%;}}
@keyframes skHue{to{background-position:200% center;}}
@keyframes skRevealGlow{0%{opacity:0;}22%{opacity:1;}100%{opacity:0;}}
@keyframes skRevealWord{
  0%{opacity:0;transform:scale(.35);}
  22%{opacity:1;transform:scale(1.08);}
  68%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(1.18);}
}
@keyframes skSpark{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.2);opacity:0;}
}

/* ── Mobil: küre boyutlarını küçült ── */
@media (max-width:520px){
  .sk-tn-orb{width:56px;height:56px;}
  .sk-tn-ring{width:56px;height:56px;}
  .sk-tn-halo{width:48px;height:48px;}
  .sk-tnode .sk-tn-circle{width:48px;height:48px;}
}

/* ── Hareket azaltma: tüm döngüsel animasyonları durdur ── */
@media (prefers-reduced-motion: reduce){
  .sk-tn-ring,.sk-tn-shine::before,.sk-r-mythic .sk-tn-circle::before,
  .sk-reveal-rays,.sk-sp-bar::after,.sk-r-mythic .sk-tn-rarity{animation:none !important;}
  .sk-tnode.ready .sk-tn-circle{animation:none;box-shadow:inset 0 2px 5px rgba(255,255,255,.2), 0 0 0 4px rgba(var(--rc-rgb),.2), 0 0 16px rgba(var(--rc-rgb),.4);}
}