/* hr-rewards-ui.css — hr-rewards-ui.js yer tutucularının yerleşimi (PASS 1).
   Nadirlik token'ları ve çerçeve/aura stilleri assets/cosmetics/cosmetics.css'ten gelir. */

/* ---- rozet ikonu yer tutucusu ----
   Yer tutucudaki `.hr-bi-fb` (emoji / eski ikon) yalnız sanat YÜKLENEMEZSE görünür:
   - sanat gelene kadar gizli (kare başında emoji çakıl taşı gibi parlamasın),
   - `.is-mounted` → gizli kalır, `.is-failed` → görünür (betik yüklenmedi / bilinmeyen slug). */
.hr-bi { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle; }
.hr-bi:not(.is-mounted):not(.is-failed) > .hr-bi-fb { visibility: hidden; }
.hr-bi.is-mounted > .hr-bi-fb { display: none; }
.hr-bi-fb { font-size: 1.6em; }

/* ---- kilitli rozet = gerçek ikonun desatüre hali (PASS 3) ----
   Boş gri kutu DEĞİL: şekil/motif/doku görünür, yalnız renk ve parlaklık alınır. Filtre SARMALAYICI
   (.hr-bi) üzerindedir; hero webp, SVG ve içlerindeki glow/drop-shadow tek geçişte birlikte griye iner.
   Kullanım: kilitli durumdaki bir ATA öğeye `hr-locked` ekle (ör. profil `.badge-card.locked`).
   Sahip olunca sınıf düşer → `filter` geçişiyle tam renk gelir (reduced-motion'da anında).
   NOT: sınıf, JS'in `.hr-bi`'ye yazdığı is-mounted/is-failed bayraklarıyla çakışmasın diye atada durur. */
:root { --hr-locked-filter: grayscale(1) brightness(.64) contrast(.94) opacity(.82); }
.hr-bi { transition: filter .55s ease; }
.hr-locked .hr-bi { filter: var(--hr-locked-filter); }
.hr-locked .hr-bi img.hr-bi-hero { filter: none; } /* renkli glow'u kaldır: gri siluet temiz kalsın */
.hr-locked:hover .hr-bi { filter: grayscale(1) brightness(.8) contrast(.96) opacity(.92); }
@media (prefers-reduced-motion: reduce) { .hr-bi { transition: none; } }

/* ---- ünvan sigili (isim yanı) ---- */
.hr-ts { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.hr-ts:empty, .hr-ts.is-empty { display: none; }

/* ---- sanat sarmalayıcıları: sayfa-yerel `svg { fill:none; stroke:currentColor; width:Npx }`
   kuralları (örn. Profil .stat-sigil svg) üreteçlerin çıktısını bozmasın. Özgüllük (0,1,2). ---- */
span.hr-art > svg {
  display: block;
  width: 100%; height: 100%;
  fill: initial; stroke: none; stroke-width: 1;
  stroke-linecap: butt; stroke-linejoin: miter;
  color: initial;
}
.hr-bi-art.hr-frame { width: var(--sz, 64px); }
img.hr-bi-hero { display: block; object-fit: contain; width: var(--sz, 64px); height: var(--sz, 64px); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--hr-accent) 30%, transparent)); }

/* ---- aura halkası (avatar çevresi) ----
   `.hr-aura` kapsayıcısı cosmetics.css'ten; halka svg'yi kapsayıcının İÇİNE mutlak yerleştirir
   (çekirdek `.hr-aura-core` üstte kalır). */
.hr-aura-ring { position: absolute; inset: 0; pointer-events: none; }
.hr-aura-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Raster yol aurası (assets/cosmetics/auras/<yol>.webp|png, 1254² RGBA, ortası boş halka).
   Görselin deliği ölçüldü (51 aura): medyan iç yarıçap ≈ %25 → avatar deliği (%64 çap = r .32) ile
   hizalamak için halka kutudan %22 büyük çizilir (--hr-aura-scale). Avatar çekirdeği `.hr-aura-core`
   DOM'da halkadan sonra geldiği için üstte kalır: dar delikli birkaç aura'da iç kenar avatarın altına
   girer (çerçeve gibi okunur), taşan parıltı kutunun dışına akar (SVG halkayla aynı: overflow görünür). */
.hr-aura-ring > .hr-aura-img { position: absolute; left: 50%; top: 50%; width: calc(100% * var(--hr-aura-scale, 1.22)); height: auto; max-width: none;
  transform: translate(-50%, -50%); pointer-events: none; user-select: none; -webkit-user-drag: none; }
@media (prefers-reduced-motion: no-preference) {
  .hr-aura.is-raster:not([data-lite]) .hr-aura-img { animation: hr-aura-img-breathe 6.5s ease-in-out infinite; }
}
@keyframes hr-aura-img-breathe {
  0%, 100% { opacity: .88; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.03); }
}

/* ---- raster tamamlama efekti (hr-unlock-fx.js playRaster) ----
   Patlama: küçükten büyüyüp oturur, sonra söner (döndürme YOK). `is-keep` (kutlama diyaloğu): sönmez, amblem
   olarak kalır. Azaltılmış harekette animasyon yok → görsel doğrudan, hareketsiz gösterilir. */
.hr-fx-raster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--hr-accent) 34%, transparent)); }
.hr-uf-fx .hr-fx-raster { position: static; width: var(--fx-size); height: var(--fx-size); }
@media (prefers-reduced-motion: no-preference) {
  .hr-fx-raster.is-play { animation: hr-fx-raster-burst 2800ms cubic-bezier(.2, .9, .25, 1) both; }
  .hr-fx-raster.is-play.is-keep { animation-name: hr-fx-raster-settle; animation-duration: 1500ms; }
}
@keyframes hr-fx-raster-burst {
  0%   { opacity: 0; transform: scale(.4); }
  24%  { opacity: 1; transform: scale(1.1); }
  40%  { opacity: 1; transform: scale(.97); }
  58%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.07); }
}
@keyframes hr-fx-raster-settle {
  0%   { opacity: 0; transform: scale(.4); }
  45%  { opacity: 1; transform: scale(1.1); }
  70%  { transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- landing ödül kartı sanatı ---- */
.hr-rw-art { display: grid; place-items: center; width: 74px; height: 74px; position: relative; }
.hr-rw-art .hr-frame { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--c, var(--hr-accent)) 38%, transparent)); }

/* ---- kutlama diyaloğu (hr-unlock-fx.js, PASS 2) ----
   Animasyonlar yalnız `prefers-reduced-motion: no-preference` iken; azaltılmış harekette kart/öğeler
   doğrudan son halinde görünür (HRFx de son kareye kilitlenir). */
.hr-uf { font-family: 'Space Grotesk', sans-serif; position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; padding: 20px; overflow: auto;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--hr-accent) 22%, transparent), transparent 46%), color-mix(in srgb, var(--hr-bg) 90%, transparent);
  backdrop-filter: blur(6px); }
.hr-uf-card { position: relative; width: min(560px, 100%); margin: auto; text-align: center; padding: 22px 22px 20px;
  border-radius: 20px; border: 1px solid color-mix(in srgb, var(--hr-accent) 34%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--hr-accent) 10%, transparent), transparent 52%), color-mix(in srgb, var(--hr-bg-elevated) 96%, transparent);
  box-shadow: var(--hr-shadow-lg, 0 24px 80px rgba(0,0,0,.55)), 0 0 60px color-mix(in srgb, var(--hr-accent) 14%, transparent); }
.hr-uf-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--hr-accent-2); margin-bottom: 4px; }
.hr-uf-fx { --fx-size: min(230px, 60vw); display: grid; place-items: center; width: 100%; height: var(--fx-size); margin: -6px auto -2px; }
.hr-uf-title { font-family: 'Cinzel', serif; font-size: 24px; line-height: 1.2; color: var(--hr-text); margin: 6px 0 16px; font-weight: 700; overflow-wrap: anywhere; }
.hr-uf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.hr-uf-item { padding: 14px 10px 12px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--hr-accent) 24%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--hr-accent) 9%, transparent), color-mix(in srgb, var(--hr-bg-elevated) 70%, transparent)); }
.hr-uf-art { display: grid; place-items: center; min-height: 80px; margin-bottom: 8px; }
.hr-uf-art .hr-frame { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--c, var(--hr-accent)) 38%, transparent)); }
.hr-uf-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--hr-accent-2); margin-bottom: 4px; }
.hr-uf-value { font-size: 13.5px; font-weight: 800; color: var(--hr-text); line-height: 1.25; overflow-wrap: anywhere; }
.hr-uf-sub { margin-top: 4px; font-size: 11px; line-height: 1.35; color: var(--hr-text-muted); }
.hr-uf-btn { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 14px; cursor: pointer; border: none; border-radius: 10px; padding: 11px 26px;
  color: var(--hr-text-inverse); background: linear-gradient(135deg, var(--hr-accent-2), var(--hr-accent)); box-shadow: 0 0 22px color-mix(in srgb, var(--hr-accent) 32%, transparent); }
.hr-uf-btn:focus-visible { outline: 2px solid var(--hr-text); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .hr-uf { animation: hr-uf-fade 260ms ease-out both; }
  .hr-uf-card { animation: hr-uf-rise 420ms cubic-bezier(.16, 1.1, .3, 1) both; }
  .hr-uf-item { animation: hr-uf-rise 480ms cubic-bezier(.16, 1.1, .3, 1) both; animation-delay: calc(700ms + var(--i, 0) * 140ms); }
  /* Kazanılan rozet gri siluet olarak belirir, sonra tam renkle "patlar" (profil kasasındaki kilitli
     görünümün aynısından başlar → gri→renk geçişi koleksiyonun tamamlandığı anı vurgular). */
  .hr-uf-art [data-hr-badge] { animation: hr-uf-colorize 1000ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(950ms + var(--i, 0) * 140ms); }
}
@keyframes hr-uf-colorize {
  0%, 30% { filter: var(--hr-locked-filter); transform: scale(.94); }
  58%     { filter: grayscale(0) brightness(1.65) saturate(1.3); transform: scale(1.14); }
  100%    { filter: none; transform: none; }
}
@keyframes hr-uf-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes hr-uf-rise { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }