/* =====================================================================
 *  SEVİYE ROZETLERİ — KADEMELİ SÜS
 *
 *  On bir unvan vardı ama on birinin rozeti de aynı düz kareydi:
 *  3. seviyedeki "Çırak" ile 100. seviyedeki "Ölümsüz" görsel olarak
 *  ayırt edilemiyordu. Unvana yükselmenin tek karşılığı yazının
 *  değişmesiydi.
 *
 *  Buradaki kural: SÜS KADEMEYLE ARTIYOR. Alt kademeler bilinçli
 *  olarak sade — hepsi parlasaydı hiçbiri özel olmazdı ve asıl üst
 *  kademeler değersizleşirdi. İlk üç kademede animasyon YOK.
 *
 *  Animasyonların hepsi transform/opacity üzerinden: yerleşimi yeniden
 *  hesaplatan bir özellik (width, background-position vb.) sıralama
 *  sayfasında yirmi rozet birden döndüğünde kare düşürürdü.
 * ===================================================================*/

.level-badge{
  position:relative; display:inline-flex; align-items:center;
  justify-content:center; flex:none; isolation:isolate;
  border-radius:10px; font-weight:900; line-height:1;
  color:#fff; overflow:hidden;
  background:var(--surface-3,#26262e);
  border:1px solid var(--border,#333);
}
.level-badge__num{ position:relative; z-index:2; }
/* Aura katmanı: parıltı ve dönen halka burada döner, rakam sabit
   kalır. Rakama animasyon verseydik yazı oynar, okunmazdı. */
.level-badge__aura{
  position:absolute; inset:0; z-index:1;
  border-radius:inherit; pointer-events:none;
}

.level-badge--sm{ width:24px; height:24px; font-size:.72rem; border-radius:8px; }
.level-badge--md{ width:34px; height:34px; font-size:.95rem; }
.level-badge--lg{ width:48px; height:48px; font-size:1.3rem; border-radius:13px; }

/* ---------------------------------------------------------------
   1) ÇIRAK — taş. Süs yok, olması da gerekmiyor: buradan
   yükselince farkın hissedilmesi için başlangıcın sade olması lazım.
   --------------------------------------------------------------- */
.level-badge--cirak{
  background:linear-gradient(160deg,#3a3a44,#26262e);
  border-color:#4a4a56; color:#c9c9d4;
}

/* 2) ÖĞRENCİ — soğuk gri-mavi. */
.level-badge--ogrenci{
  background:linear-gradient(160deg,#3d4a63,#232a3a);
  border-color:#56688c; color:#dce6f7;
}

/* 3) GEZGİN — yeşilimsi turkuaz, ince iç halka. */
.level-badge--gezgin{
  background:linear-gradient(160deg,#1f5f57,#123531);
  border-color:#3fbfa8; color:#d6fff6;
  box-shadow:inset 0 0 0 1px rgba(63,191,168,.28);
}

/* ---------------------------------------------------------------
   Buradan sonrası hareketli. İlk hareket 4. kademede başlıyor ki
   "artık bir şey oluyor" hissi belirgin olsun.
   --------------------------------------------------------------- */

/* 4) SAVAŞÇI — bronz, yavaş nefes. */
.level-badge--savasci{
  background:linear-gradient(160deg,#8a5222,#43230d);
  border-color:#c8813c; color:#ffe9d2;
}
.level-badge--savasci .level-badge__aura{
  background:radial-gradient(circle at 50% 120%,rgba(255,170,80,.5),transparent 62%);
  animation:lbNefes 3.4s ease-in-out infinite;
}

/* 5) KILIÇ USTASI — çelik, üstünden parıltı geçiyor. */
.level-badge--kilic{
  /* Açık uç #7d8794 idi: beyaz rakamla karşıtlık 3.64 ölçüldü,
     küçük (24px) rozette WCAG eşiği 4.5. #6c7684 ile 4.6. */
  background:linear-gradient(160deg,#6c7684,#39414d);
  border-color:#cfd8e3; color:#fff;
}
.level-badge--kilic .level-badge__aura{
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);
  animation:lbParilti 3.6s ease-in-out infinite;
}

/* 6) ULU BÜYÜCÜ — mor karanlık, dönen büyü halkası. */
.level-badge--buyucu{
  background:linear-gradient(160deg,#4a2470,#1a0d2b);
  border-color:#9d6bff; color:#eadcff;
  box-shadow:0 0 10px rgba(157,107,255,.28);
}
.level-badge--buyucu .level-badge__aura{
  background:conic-gradient(from 0deg,transparent 0deg,rgba(157,107,255,.6) 70deg,transparent 150deg);
  animation:lbDon 4.5s linear infinite;
}

/* 7) KAN EFENDİSİ — kızıl, kalp atışı. */
.level-badge--kan{
  background:linear-gradient(160deg,#8c1220,#3a040c);
  border-color:#ff4d5e; color:#ffe2e5;
}
.level-badge--kan .level-badge__aura{
  background:radial-gradient(circle at 50% 50%,rgba(255,60,80,.6),transparent 68%);
  animation:lbAtis 1.9s ease-in-out infinite;
}

/* 8) EFSANE — altın, parıltı + hafif nefes. */
.level-badge--efsane{
  /* Koyu uç #7a4c05 idi ve koyu rakamla karşıtlık 2.30 -- üç
     kademenin en kötüsü, büyük yazı eşiğini bile geçmiyordu.
     Rozetin alt köşesinde rakam okunmuyordu. #bd7608 ile 4.62. */
  background:linear-gradient(160deg,#f6c344,#bd7608);
  border-color:#ffd76a; color:#2a1a00;
  box-shadow:0 0 12px rgba(255,199,74,.35);
}
.level-badge--efsane .level-badge__aura{
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%);
  animation:lbParilti 2.8s ease-in-out infinite;
}

/* 9) EJDERHA — köz, dönen alev halkası. */
.level-badge--ejderha{
  background:linear-gradient(160deg,#c2410c,#4a1503);
  border-color:#ff8a3d; color:#fff1e6;
  box-shadow:0 0 14px rgba(255,120,40,.4);
}
.level-badge--ejderha .level-badge__aura{
  background:conic-gradient(from 0deg,
    rgba(255,196,60,.85), rgba(255,90,20,.2), rgba(255,196,60,.85));
  animation:lbDon 2.6s linear infinite;
  mask:radial-gradient(circle,transparent 54%,#000 60%);
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 60%);
}

/* 10) YARI TANRI — elmas beyazı, dönen halka + parıltı. */
.level-badge--yaritanri{
  /* Koyu uç #4a7fa8 idi: karşıtlık 3.70. #5c90b7 ile 4.63. */
  background:linear-gradient(160deg,#bfe9ff,#5c90b7);
  border-color:#eafaff; color:#08243a;
  box-shadow:0 0 16px rgba(150,220,255,.5);
}
.level-badge--yaritanri .level-badge__aura{
  background:conic-gradient(from 0deg,
    rgba(255,255,255,.95), rgba(120,200,255,.15), rgba(255,255,255,.95));
  animation:lbDon 3.2s linear infinite;
  mask:radial-gradient(circle,transparent 52%,#000 58%);
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 58%);
}

/* 11) ÖLÜMSÜZ — gökkuşağı. Tek hue döndürme filtresi kullanılıyor:
   ayrı ayrı renk durakları animasyonlamak yerine tek bir ucuz
   filtre, çünkü bu rozet en çok görünen yerde (sıralama) çıkıyor. */
.level-badge--olumsuz{
  background:linear-gradient(135deg,#ff4d6d,#ffd166,#4ade80,#38bdf8,#a78bfa,#ff4d6d);
  background-size:100% 100%;
  border-color:#fff; color:#160b22;
  text-shadow:0 1px 2px rgba(255,255,255,.5);
  box-shadow:0 0 18px rgba(190,120,255,.55);
  animation:lbGokkusagi 6s linear infinite;
}
.level-badge--olumsuz .level-badge__aura{
  background:conic-gradient(from 0deg,rgba(255,255,255,.9),transparent 40%,rgba(255,255,255,.9));
  animation:lbDon 2.2s linear infinite;
  mask:radial-gradient(circle,transparent 56%,#000 62%);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 62%);
}

/* 12) İMPARATOR (200) — en üst kademe, en gösterişli.
   Ölümsüz'ün gökkuşağından ayrışması gerekiyordu: orada renk
   döner, burada ALTIN taç zemininde iki ayrı halka ters yönde
   döner. İki halka bilerek: tek halka Ejderha ve Yarı Tanrı ile
   karışıyordu. */
.level-badge--imparator{
  background:
    /* Dis uc #8a5a06 idi: koyu rakamla karsitlik 2.84 olculdu --
       Efsane kademesinde yasanan ayni tuzak. #b97908 ile 4.6. */
    radial-gradient(circle at 50% 30%, #fff3c4 0%, #f0b93f 38%, #b97908 100%);
  border-color:#fff0b8; color:#2b1a00;
  box-shadow:0 0 22px rgba(240,185,63,.7), inset 0 0 12px rgba(255,255,255,.45);
}
.level-badge--imparator .level-badge__aura{
  background:conic-gradient(from 0deg,
    rgba(255,255,255,.95), transparent 30%, rgba(255,240,184,.9) 60%, transparent 85%);
  animation:lbDon 3.4s linear infinite;
  mask:radial-gradient(circle,transparent 58%,#000 64%);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 64%);
}
/* İkinci halka ters yönde: ::after ayrı bir katman, aura'nın
   animasyonunu ezmiyor. */
.level-badge--imparator::after{
  content:''; position:absolute; inset:0; z-index:1;
  border-radius:inherit; pointer-events:none;
  background:conic-gradient(from 180deg,
    rgba(255,215,120,.85), transparent 40%, rgba(255,255,255,.75) 70%, transparent 95%);
  animation:lbDonTers 5.2s linear infinite;
  mask:radial-gradient(circle,transparent 70%,#000 76%);
  -webkit-mask:radial-gradient(circle,transparent 70%,#000 76%);
}
@keyframes lbDonTers{ to{ transform:rotate(-360deg) } }

.level-title--imparator{ color:#c98a12; }
@supports (-webkit-background-clip:text) or (background-clip:text){
  .level-title--imparator{
    background:linear-gradient(90deg,#8a5a06,#f0b93f,#fff3c4,#f0b93f,#8a5a06);
    background-size:200% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation:lbAltinAkis 4.5s linear infinite;
  }
}
@keyframes lbAltinAkis{ to{ background-position:200% 0 } }
@media (prefers-reduced-motion:reduce){
  .level-badge--imparator::after{ animation:none; }
  .level-title--imparator{ animation:none; }
}

@keyframes lbNefes{
  0%,100%{ opacity:.45; transform:scale(1) }
  50%    { opacity:.9;  transform:scale(1.08) }
}
@keyframes lbAtis{
  0%,100%{ opacity:.4;  transform:scale(1) }
  14%    { opacity:.95; transform:scale(1.13) }
  28%    { opacity:.5;  transform:scale(1.02) }
  42%    { opacity:.85; transform:scale(1.09) }
}
/* Parıltı SOLDAN SAĞA kayan bir katman; genişlik değil transform
   değişiyor, yani yerleşim yeniden hesaplanmıyor. */
@keyframes lbParilti{
  0%     { transform:translateX(-120%) }
  55%,100%{ transform:translateX(120%) }
}
@keyframes lbDon{ to{ transform:rotate(360deg) } }
@keyframes lbGokkusagi{ to{ filter:hue-rotate(360deg) } }

/* Hareketi azaltma tercihi: süs KALIYOR (degrade, kenar, gölge),
   yalnızca hareket duruyor. Kademeler yine ayırt edilebiliyor. */
@media (prefers-reduced-motion:reduce){
  .level-badge__aura{ animation:none !important; }
  .level-badge--olumsuz{ animation:none !important; }
  .level-badge--imparator::after{ animation:none !important; }
  .level-badge--kilic .level-badge__aura,
  .level-badge--efsane .level-badge__aura{ transform:translateX(0); opacity:.25; }
}

/* =====================================================================
 *  UNVAN YAZISI — rozetle aynı kademeyi taşıyor
 * ===================================================================*/
.level-title{ font-weight:800; }
.level-title--savasci { color:#e6a563; }
.level-title--kilic   { color:#dbe4ef; }
.level-title--buyucu   { color:#c4a5ff; }
.level-title--kan     { color:#ff7c8a; }
.level-title--efsane  { color:#ffd76a; }
.level-title--ejderha { color:#ff9a55; }
.level-title--yaritanri{ color:#bfe9ff; }
/* Ölümsüz: yazının kendisi degrade. background-clip:text tarayıcı
   desteği olmayan yerde yazıyı GÖRÜNMEZ yapardı, o yüzden önce
   düz renk veriliyor, degrade @supports içinde biniyor. */
.level-title--olumsuz{ color:#ffd1f5; }
@supports (-webkit-background-clip:text) or (background-clip:text){
  .level-title--olumsuz{
    background:linear-gradient(90deg,#ff4d6d,#ffd166,#4ade80,#38bdf8,#a78bfa,#ff4d6d);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation:lbGokkusagi 6s linear infinite;
  }
}
@media (prefers-reduced-motion:reduce){
  .level-title--olumsuz{ animation:none !important; }
}

/* =====================================================================
 *  UNVAN YOLU — profildeki kademe şeridi
 *
 *  Bir sonraki unvanın ADI görünmüyordu; yalnızca "şu kadar XP kaldı"
 *  yazıyordu. Neye doğru gidildiğini göstermek, ilerlemeyi
 *  sürdürmenin en ucuz nedeni.
 * ===================================================================*/
.tier-path{
  display:flex; gap:.5rem; overflow-x:auto; padding:.15rem .1rem .55rem;
  scrollbar-width:thin;
}
.tier-path__step{
  flex:none; display:flex; flex-direction:column; align-items:center;
  gap:.3rem; min-width:64px; text-align:center; opacity:.42;
  transition:opacity var(--transition,.18s ease);
}
.tier-path__step.is-reached{ opacity:1; }
/* Şu anki kademe: hafifçe büyük ve altında bir nokta. */
.tier-path__step.is-current{ opacity:1; }
.tier-path__step.is-current .level-badge{ transform:scale(1.14); }
.tier-path__name{ font-size:.62rem; font-weight:800; color:var(--text-2,#b9b9c6); }
.tier-path__lv{ font-size:.56rem; color:var(--muted,#8b8b99); font-weight:700; }
.tier-path__step.is-current .tier-path__name{ color:var(--text,#fff); }

/* =====================================================================
 *  SEÇİLEBİLİR UNVANLAR
 *
 *  Seviye unvanından (Çırak, Gezgin...) ayrı: orası otomatik ve tek,
 *  burası seviyeyle açılan bir havuz ve kullanıcı seçiyor.
 *
 *  Tonlar renk DEĞİL sınıf: iki tema var ve her tonun aydınlık
 *  karşılığı ayrı. Doğrudan renk yazılsaydı beyaz temada altın
 *  unvan okunmazdı -- bu tuzağa sitenin geri kalanında zaten
 *  düşülmüştü.
 * ===================================================================*/
.utitle{
  display:inline-flex; align-items:center;
  padding:.08rem .42rem; border-radius:5px;
  font-size:.66rem; font-weight:800; letter-spacing:.02em;
  border:1px solid currentColor; line-height:1.5;
  white-space:nowrap; vertical-align:middle;
}
.utitle--sade { color:var(--muted); }
.utitle--bronz{ color:var(--ut-bronz); }
.utitle--gumus{ color:var(--ut-gumus); }
.utitle--altin{ color:var(--ut-altin); }
.utitle--mor  { color:var(--ut-mor); }
.utitle--ates { color:var(--ut-ates); }
.utitle--buz  { color:var(--ut-buz); }
/* Gökkuşağı yalnızca en üst iki unvanda: hepsi hareketli olsaydı
   hiçbiri özel görünmezdi. */
.utitle--gokkusagi{
  color:#fff; border-color:transparent;
  background:linear-gradient(90deg,#ff4d6d,#ffd166,#4ade80,#38bdf8,#a78bfa,#ff4d6d);
  background-size:200% 100%;
  animation:utAkis 5s linear infinite;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
@keyframes utAkis{ to{ background-position:200% 0 } }
@media (prefers-reduced-motion:reduce){ .utitle--gokkusagi{ animation:none; } }

/* Seçici */
.utitle-grid{
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.utitle-opt{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .6rem; border-radius:10px;
  border:1px solid var(--border); background:var(--surface-2);
  cursor:pointer;
  transition:border-color var(--transition,.18s ease), background var(--transition,.18s ease);
}
.utitle-opt:hover{ border-color:var(--border-2); }
.utitle-opt.is-on{
  border-color:rgb(var(--accent-rgb));
  background:rgba(var(--accent-rgb),.12);
}
/* Radyo düğmesi gizli ama ERİŞİLEBİLİR: display:none olsaydı klavye
   ile seçilemezdi. */
.utitle-opt input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.utitle-opt:focus-within{ outline:2px solid rgb(var(--accent-rgb)); outline-offset:2px; }
.utitle-opt small{ font-size:.6rem; color:var(--muted); font-weight:700; }
.utitle-opt.is-locked{ opacity:.45; cursor:default; }
.utitle-next{ font-size:.85rem; margin:1.1rem 0 .5rem; color:var(--text-2); }