/* ==========================================================================
   HackRiddle — Ödül & Kozmetik Görsel Sistemi (Arcane / Grimoire)
   --------------------------------------------------------------------------
   Aura + rozet çerçevesi + tamamlama efekti için TEK stil kaynağı.
   Kullanım ve tasarım gerekçesi: docs/odul-kozmetik-tasarim-sistemi.md

   KURAL: Burada YENİ RENK YOK. Her renk theme.css'teki --hr-* token'larından
   gelir; ton farkları (parlak/derin/glow) color-mix() ile TÜRETİLİR.
   Bu dosyanın tanımladığı yeni token'lar yalnız takma-adlardır (--hr-rar-*).
   Entegrasyonda zl-frontend bu bloğu theme.css'e taşıyabilir.

   Animasyon adları `hr-cos-*` / `hr-fx-*` (hr- öneki korunur).
   Olay animasyonları (hr-fx-*) 0.25s–3s; ortam döngüleri (hr-cos-*) mevcut
   hr-rune-spin / hr-glow-orb pratiğiyle aynı: yavaş, düşük genlik.
   ========================================================================== */

:root {
  /* --- Nadirlik slotları R1..R7 = 7 rütbe rengi (1:1) --------------------- */
  --hr-rar-1: var(--hr-text-muted);        /* #9AA7B6  common   · Neophyte   */
  --hr-rar-2: var(--hr-info);              /* #2DD4FF  uncommon · Apprentice */
  --hr-rar-3: var(--hr-success);           /* #00FF9C  rare     · Scholar    */
  --hr-rar-4: var(--hr-accent);            /* #B06CFF  epic     · Adept      */
  --hr-rar-5: var(--hr-accent-2);          /* #F5C451  mythic   · Magister   */
  --hr-rar-6: var(--hr-accent-3);          /* #E040FB  arcane   · Wise       */
  --hr-rar-7: #FFD97A;                     /* legend · Archsage (değer mevcut: theme.css --hr-term-bright-yellow, .hr-user-menu[data-rank=archsage]) */

  /* Eş renk (pair): çerçeve/aura ikinci tonu. Referans paketteki "ametist + altın" ikilisi. */
  --hr-rar-pair-1: var(--hr-text);
  --hr-rar-pair-2: var(--hr-accent);
  --hr-rar-pair-3: var(--hr-info);
  --hr-rar-pair-4: var(--hr-accent-2);
  --hr-rar-pair-5: var(--hr-accent);
  --hr-rar-pair-6: var(--hr-accent-2);
  --hr-rar-pair-7: var(--hr-accent-3);

  /* Çerçeve metali: R1-R2 çelik, R3+ altın */
  --hr-rar-metal-1: var(--hr-text-muted);
  --hr-rar-metal-2: var(--hr-text-muted);
  --hr-rar-metal-3: var(--hr-accent-2);
  --hr-rar-metal-4: var(--hr-accent-2);
  --hr-rar-metal-5: var(--hr-accent-2);
  --hr-rar-metal-6: var(--hr-accent-2);
  --hr-rar-metal-7: var(--hr-rar-7);
}

/* Türetilmiş tonlar: tek kural, 7 slotun hepsinde çalışır. */
[data-rar] {
  --c:     var(--hr-rar-1);
  --pair:  var(--hr-rar-pair-1);
  --metal: var(--hr-rar-metal-1);
}
[data-rar="1"] { --c: var(--hr-rar-1); --pair: var(--hr-rar-pair-1); --metal: var(--hr-rar-metal-1); }
[data-rar="2"] { --c: var(--hr-rar-2); --pair: var(--hr-rar-pair-2); --metal: var(--hr-rar-metal-2); }
[data-rar="3"] { --c: var(--hr-rar-3); --pair: var(--hr-rar-pair-3); --metal: var(--hr-rar-metal-3); }
[data-rar="4"] { --c: var(--hr-rar-4); --pair: var(--hr-rar-pair-4); --metal: var(--hr-rar-metal-4); }
[data-rar="5"] { --c: var(--hr-rar-5); --pair: var(--hr-rar-pair-5); --metal: var(--hr-rar-metal-5); }
[data-rar="6"] { --c: var(--hr-rar-6); --pair: var(--hr-rar-pair-6); --metal: var(--hr-rar-metal-6); }
[data-rar="7"] { --c: var(--hr-rar-7); --pair: var(--hr-rar-pair-7); --metal: var(--hr-rar-metal-7); }

[data-rar] {
  --hi:    color-mix(in srgb, var(--c) 58%, var(--hr-text) 42%);          /* ışık alan yüz */
  --lo:    color-mix(in srgb, var(--c) 42%, var(--hr-bg) 58%);            /* gölge yüz */
  --deep:  color-mix(in srgb, var(--c) 16%, var(--hr-bg) 84%);            /* en derin zemin */
  --glow:  color-mix(in srgb, var(--c) 55%, transparent);
  --phi:   color-mix(in srgb, var(--pair) 62%, var(--hr-text) 38%);
  --plo:   color-mix(in srgb, var(--pair) 55%, var(--hr-bg) 45%);
  --mhi:   color-mix(in srgb, var(--metal) 62%, var(--hr-text) 38%);
  --mlo:   color-mix(in srgb, var(--metal) 52%, var(--hr-bg) 48%);
  --obs:   var(--hr-bg-elevated);                                          /* obsidyen */
}

/* ==========================================================================
   AURA
   ========================================================================== */
.hr-aura {
  position: relative;
  width: var(--sz, 160px);
  aspect-ratio: 1;
  display: inline-block;
  flex: none;
}
/* Avatar deliği: viewBox 200'de r=64 → %64 çap. Aura halkası bunun dışında kalır. */
.hr-aura > .hr-aura-core {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--hr-surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent);
}
.hr-aura > .hr-aura-core > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-aura > svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
/* transform-origin YALNIZ animasyonlu sınıflara: evrensel seçici SVG transform= özniteliklerini kaydırır. */
.hr-aura svg [class*="a-"], .hr-frame svg [class*="f-"] { transform-box: fill-box; transform-origin: 50% 50%; }
.hr-fx svg .fx, .hr-fx svg [class*="f-"] { transform-box: fill-box; transform-origin: 50% 50%; }
.hr-aura svg .cx, .hr-frame svg .cx, .hr-fx svg .cx { transform-box: view-box; transform-origin: 100px 100px; }

@keyframes hr-cos-spin     { from { transform: rotate(0deg) }   to { transform: rotate(360deg) } }
@keyframes hr-cos-spin-rev { from { transform: rotate(0deg) }   to { transform: rotate(-360deg) } }
@keyframes hr-cos-breathe  { 0%,100% { opacity: .62; transform: scale(.985) } 50% { opacity: 1; transform: scale(1.03) } }
@keyframes hr-cos-twinkle  { 0%,100% { opacity: .35; transform: scale(.7) } 50% { opacity: 1; transform: scale(1.12) } }
@keyframes hr-cos-flicker  { 0%,100% { opacity: 1 } 47% { opacity: 1 } 50% { opacity: .35 } 53% { opacity: 1 } 78% { opacity: .7 } 80% { opacity: 1 } }
@keyframes hr-cos-glitch   { 0%,86%,100% { transform: translateX(0) } 88% { transform: translateX(2.4px) } 91% { transform: translateX(-2px) } 94% { transform: translateX(1px) } }
@keyframes hr-cos-orbit    { from { offset-distance: 0% } to { offset-distance: 100% } }
@keyframes hr-cos-spark    { 0% { opacity: 0; transform: translate(0,0) scale(.5) }
                             18% { opacity: 1 }
                             100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.15) } }
@keyframes hr-cos-sweep    { from { stroke-dashoffset: 0 } to { stroke-dashoffset: -100 } }

.hr-aura .a-spin   { animation: hr-cos-spin     var(--p, 24s) linear infinite; }
.hr-aura .a-rev    { animation: hr-cos-spin-rev var(--p, 30s) linear infinite; }
.hr-aura .a-breathe{ animation: hr-cos-breathe  var(--p, 5s) ease-in-out infinite; }
.hr-aura .a-twinkle{ animation: hr-cos-twinkle  var(--p, 3s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
.hr-aura .a-flicker{ animation: hr-cos-flicker  var(--p, 4s) steps(1,end) infinite; }
.hr-aura .a-glitch { animation: hr-cos-glitch   var(--p, 5s) steps(1,end) infinite; animation-delay: var(--dl, 0s); }
.hr-aura .a-orbit  { offset-rotate: 0deg; animation: hr-cos-orbit var(--p, 14s) linear infinite; animation-delay: var(--dl, 0s); }
.hr-aura .a-spark  { animation: hr-cos-spark    var(--p, 3s) ease-out infinite; animation-delay: var(--dl, 0s); }

/* Hafif mod: liste/leaderboard satırı. Hareket yok, filtre yok — tek karelik görsel. */
.hr-aura[data-lite] svg *, .hr-aura[data-lite] svg { animation: none !important; }
.hr-aura[data-lite] svg [filter] { filter: none; }
.hr-aura[data-lite] svg .a-spark { display: none; }

/* ==========================================================================
   ROZET / ÖDÜL ÇERÇEVESİ
   ========================================================================== */
.hr-frame { display: inline-block; width: var(--sz, 120px); aspect-ratio: 1; flex: none; }
.hr-frame > svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes hr-cos-prism { 0%,100% { opacity: 0; transform: translateX(-40px) } 45%,55% { opacity: .9 } 100% { transform: translateX(40px) } }
.hr-frame .f-breathe, .hr-fx .f-breathe { animation: hr-cos-breathe 4.5s ease-in-out infinite; }
.hr-frame .f-spin,    .hr-fx .f-spin    { animation: hr-cos-spin 40s linear infinite; }
.hr-frame .f-rev,     .hr-fx .f-rev     { animation: hr-cos-spin-rev 52s linear infinite; }
.hr-frame .f-prism,   .hr-fx .f-prism   { animation: hr-cos-prism 3.2s ease-in-out infinite; }
.hr-frame[data-lite] svg * { animation: none !important; }
.hr-frame[data-lite] svg [filter] { filter: none; }

/* Nadirlik çipi (metin etiketi): kontrast >= 4.5:1 doğrulandı (docs §4.4) */
.hr-rar-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c);
  padding: 6px 10px 6px 8px;
  background: color-mix(in srgb, var(--c) 12%, var(--hr-bg));
  border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.hr-rar-chip::before {
  content: ''; width: 7px; height: 7px; background: var(--c); transform: rotate(45deg);
  box-shadow: 0 0 8px var(--glow);
}

/* ==========================================================================
   TAMAMLAMA EFEKTİ (hr-fx)
   Tüm öğeler sahne merkezinde (400x400 viewBox) çizilir; hareket CSS ile.
   --dl = gecikme, --seek = zaman atlama (QA + reduced-motion son-kare).
   ========================================================================== */
.hr-fx { position: relative; width: var(--fx-size, 360px); aspect-ratio: 1; display: inline-block; }
.hr-fx > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hr-fx .fx {
  animation-duration: var(--du, 1s);
  animation-delay: calc(var(--dl, 0ms) - var(--seek, 0ms));
  animation-fill-mode: both;
  animation-timing-function: var(--ez, cubic-bezier(.2,.8,.2,1));
  animation-play-state: var(--ps, running);
}
.hr-fx .fx-pop   { animation-name: hr-fx-pop;   --ez: cubic-bezier(.2,.9,.25,1.15); }
.hr-fx .fx-slam  { animation-name: hr-fx-slam;  --ez: cubic-bezier(.3,0,.2,1); }
.hr-fx .fx-wave  { animation-name: hr-fx-wave;  --ez: cubic-bezier(.1,.7,.3,1); }
.hr-fx .fx-fly   { animation-name: hr-fx-fly;   --ez: cubic-bezier(.12,.7,.3,1); }
.hr-fx .fx-shard { animation-name: hr-fx-shard; --ez: cubic-bezier(.1,.8,.3,1); }
.hr-fx .fx-draw  { animation-name: hr-fx-draw;  --ez: ease-out; }
.hr-fx .fx-flash { animation-name: hr-fx-flash; --ez: ease-out; }
.hr-fx .fx-beam  { animation-name: hr-fx-beam;  --ez: cubic-bezier(.2,.7,.2,1); }
.hr-fx .fx-rise  { animation-name: hr-fx-rise;  --ez: ease-out; }
.hr-fx .fx-fade  { animation-name: hr-fx-fade;  --ez: ease-out; }
.hr-fx .fx-orbit { animation-name: hr-fx-orbit; --ez: cubic-bezier(.45,0,.35,1); offset-rotate: 0deg; }
.hr-fx .fx-collapse { animation-name: hr-fx-collapse; --ez: cubic-bezier(.7,0,.9,.4); }
.hr-fx .fx-spin  { animation-name: hr-fx-spin;  --ez: cubic-bezier(.3,.6,.3,1); }
.hr-fx .fx-rays  { animation-name: hr-fx-rays;  --ez: ease-out; }
.hr-fx .fx-glint { animation-name: hr-fx-glint; --ez: ease-out; }
.hr-fx .fx-out   { animation-name: hr-fx-out;   --ez: ease-in; }

@keyframes hr-fx-pop      { 0% { transform: scale(.2); opacity: 0 } 55% { transform: scale(1.12); opacity: 1 } 100% { transform: scale(1); opacity: 1 } }
@keyframes hr-fx-slam     { 0% { transform: scale(2); opacity: 0 } 42% { transform: scale(.93); opacity: 1 } 62% { transform: scale(1.045) } 100% { transform: scale(1); opacity: 1 } }
@keyframes hr-fx-wave     { 0% { transform: scale(.4); opacity: 0 } 7% { opacity: .95 } 100% { transform: scale(var(--s, 2.5)); opacity: 0 } }
@keyframes hr-fx-fly      { 0% { transform: translate(0,0) scale(.3); opacity: 0 }
                            14% { opacity: 1 }
                            68% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1 }
                            100% { transform: translate(var(--dx), calc(var(--dy) + 30px)) scale(.1); opacity: 0 } }
@keyframes hr-fx-shard    { 0% { transform: translate(0,0) rotate(0) scale(.15); opacity: 0 }
                            12% { opacity: 1 }
                            100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 0 } }
@keyframes hr-fx-draw     { from { stroke-dashoffset: var(--len) } to { stroke-dashoffset: 0 } }
@keyframes hr-fx-flash    { 0% { opacity: 0; transform: scale(.6) } 18% { opacity: .95 } 100% { opacity: 0; transform: scale(1.5) } }
@keyframes hr-fx-beam     { 0% { transform: scaleY(0); opacity: 0 } 22% { opacity: 1 } 70% { transform: scaleY(1); opacity: .9 } 100% { transform: scaleY(1.05); opacity: 0 } }
@keyframes hr-fx-rise     { 0% { transform: translateY(var(--y0, 70px)); opacity: 0 } 20% { opacity: 1 } 100% { transform: translateY(var(--y1, -190px)); opacity: 0 } }
@keyframes hr-fx-fade     { from { opacity: 0 } to { opacity: 1 } }
@keyframes hr-fx-out      { from { opacity: 1 } to { opacity: 0 } }
@keyframes hr-fx-orbit    { 0% { offset-distance: 0%; opacity: 0; transform: scale(.4) }
                            12% { opacity: 1; transform: scale(1) }
                            78% { offset-distance: var(--od, 100%); opacity: 1; transform: scale(1) }
                            100% { offset-distance: var(--od, 100%); opacity: 0; transform: scale(.2) } }
@keyframes hr-fx-collapse { 0% { transform: scale(var(--s0, 3)); opacity: .9 } 100% { transform: scale(.05); opacity: 1 } }
@keyframes hr-fx-spin     { 0% { transform: rotate(var(--r0, -160deg)) scale(.6); opacity: 0 } 25% { opacity: 1 } 100% { transform: rotate(0deg) scale(1); opacity: 1 } }
@keyframes hr-fx-rays     { 0% { opacity: 0; transform: scale(.4) rotate(0deg) } 20% { opacity: .95 } 100% { opacity: 0; transform: scale(1.35) rotate(var(--rr, 14deg)) } }
@keyframes hr-fx-glint    { 0% { opacity: 0; transform: scale(.2) rotate(0deg) } 30% { opacity: 1; transform: scale(1.15) rotate(20deg) } 100% { opacity: 0; transform: scale(.4) rotate(45deg) } }

/* Hareket azaltma tercihi: aura durur; efekt JS tarafından son kareye (--seek) kilitlenir. */
@media (prefers-reduced-motion: reduce) {
  .hr-aura svg *, .hr-frame svg * { animation: none !important; }
  .hr-aura svg .a-spark { display: none; }
}