/* =====================================================================
 *  ENVANTER
 *
 *  Sayfa mağaza ızgarasının bir kopyasıydı: sahip olunanlar düz bir
 *  listede diziliyordu, başka hiçbir şey yoktu. İki eşyası olan biri
 *  için ekranın dörtte üçü boştu.
 *
 *  Eklenenler: kuşanılı süsün bir arada önizlemesi ("şu an nasıl
 *  görünüyorum"), koleksiyon ilerlemesi, türlere ayrılmış bölümler,
 *  nadirliğe göre kart kimliği ve basamaklı giriş animasyonu.
 * ===================================================================*/

/* ---------------------------------------------------------------
   GÖRÜNÜŞÜN — üstteki önizleme paneli
   --------------------------------------------------------------- */
.inv-look{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(240px,.9fr);
  gap:1.4rem; align-items:center;
  padding:1.25rem 1.4rem;
  margin-bottom:1.6rem;
  border:1px solid var(--border);
  border-radius:var(--radius-lg,16px);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb),.13), transparent 58%),
    var(--surface-1);
  position:relative; overflow:hidden;
}
/* Panelin üstünden ağır ağır geçen ışık. Yalnızca transform
   değişiyor; background-position animasyonu her karede yeniden
   boyama demekti. */
.inv-look::after{
  content:''; position:absolute; inset:-40% -60%;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.055) 50%,transparent 58%);
  animation:invSweep 9s ease-in-out infinite; pointer-events:none;
}
@keyframes invSweep{
  0%     { transform:translateX(-60%) }
  55%,100%{ transform:translateX(60%) }
}

.inv-look__stage{
  position:relative; display:grid; place-items:center;
  width:132px; height:132px; flex:none;
}
.inv-look__glow{
  position:absolute; inset:8px; border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.34),transparent 68%);
  animation:invNefes 4.2s ease-in-out infinite; pointer-events:none;
}
@keyframes invNefes{
  0%,100%{ transform:scale(.9);  opacity:.55 }
  50%    { transform:scale(1.08); opacity:.95 }
}
/* Çerçeve süsleri ::after ile NEGATIF inset kullanıyor; burada
   overflow kırpılırsa çerçevenin taşan kısmı kesilir. */
.inv-look__avatar{
  position:relative; z-index:1;
  width:96px; height:96px; border-radius:50%;
}
.inv-look__avatar img{
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
}
.inv-look__initial{
  display:grid; place-items:center; width:100%; height:100%;
  border-radius:50%; background:var(--surface-3);
  font-size:2.1rem; font-weight:900; color:var(--text-2);
}

.inv-look__id{ min-width:0; }
.inv-look__name{ font-size:1.55rem; font-weight:900; display:inline-block; }
.inv-look__meta{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin-top:.55rem;
}
.inv-look__worn{
  list-style:none; margin:.9rem 0 0; padding:0;
  display:flex; gap:1.6rem; flex-wrap:wrap;
}
.inv-look__worn li{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.inv-look__worn span{
  font-size:.62rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.inv-look__worn strong{ font-size:.86rem; color:var(--text); }
.inv-look__worn em{ color:var(--muted); font-style:normal; font-weight:600; }

/* ---------------------------------------------------------------
   KOLEKSİYON
   --------------------------------------------------------------- */
.inv-collection{
  display:flex; flex-direction:column; gap:.75rem;
  padding:.9rem 1rem;
  border:1px solid var(--border);
  border-radius:var(--radius,12px);
  background:var(--surface-2);
}
.inv-collection__total{ display:flex; align-items:center; gap:.75rem; }
.inv-collection__total strong{ display:block; font-size:1.15rem; font-weight:900; }
.inv-collection__total span{ font-size:.66rem; color:var(--muted); font-weight:700; }

/* r = 15.9155 seçildi: çevresi tam 100 birim (2πr = 100), yani
   dasharray'e yüzdeyi DOĞRUDAN yazabiliyoruz, ayrıca hesap yok. */
.inv-ring{ width:52px; height:52px; flex:none; transform:rotate(-90deg); }
.inv-ring circle{ fill:none; stroke-width:3.4; }
.inv-ring__bg{ stroke:rgba(255,255,255,.1); }
.inv-ring__fg{
  stroke:rgb(var(--accent-rgb)); stroke-linecap:round;
  stroke-dasharray:0 100;
  animation:invRing .95s cubic-bezier(.22,1,.36,1) .15s forwards;
}
@keyframes invRing{ to{ stroke-dasharray:var(--pct) 100 } }

.inv-collection__list{ list-style:none; margin:0; padding:0; display:grid; gap:.42rem; }
.inv-collection__list li{
  display:grid; grid-template-columns:minmax(84px,auto) 1fr auto;
  align-items:center; gap:.55rem;
}
.inv-collection__name{ font-size:.7rem; color:var(--text-2); font-weight:700; }
.inv-collection__bar{
  height:6px; border-radius:999px; background:rgba(255,255,255,.09);
  overflow:hidden;
}
/* Dolgu SAĞA DOĞRU açılıyor: transform ile ölçekleniyor, width
   animasyonu değil -- width her karede yerleşimi yeniden hesaplatır. */
.inv-collection__bar i{
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,rgb(var(--accent-rgb)),#9d6bff);
  transform-origin:left center;
  animation:invBar .8s cubic-bezier(.22,1,.36,1) .2s both;
}
@keyframes invBar{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.inv-collection__num{
  font-size:.66rem; font-weight:800; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------
   TÜR BÖLÜMLERİ
   --------------------------------------------------------------- */
.inv-group{ margin-top:1.9rem; }
.inv-group__head{
  display:flex; align-items:center; gap:.55rem;
  font-size:1rem; margin:0 0 .85rem;
}
.inv-group__head > span{ font-weight:800; }
.inv-group__head > b{
  font-size:.68rem; font-weight:900; color:var(--muted);
  background:var(--surface-3); border-radius:999px;
  padding:.12rem .45rem; min-width:20px; text-align:center;
}
.inv-group__more{
  margin-left:auto; display:inline-flex; align-items:center; gap:.2rem;
  font-size:.72rem; font-weight:700; color:var(--muted);
  transition:color var(--transition,.18s ease);
}
.inv-group__more:hover{ color:rgb(var(--accent-rgb)); }
.inv-group__empty{
  color:var(--muted); font-size:.82rem; margin:0;
  padding:.85rem 1rem; border:1px dashed var(--border);
  border-radius:var(--radius,12px);
}

/* ---------------------------------------------------------------
   KARTLAR
   --------------------------------------------------------------- */
.inv-card{ position:relative; }
/* Basamaklı giriş: gecikme satır içi --gec ile geliyor. */
.inv-card{
  animation:invGir .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--gec,0ms);
}
@keyframes invGir{
  from{ opacity:0; transform:translateY(14px) scale(.97) }
  to  { opacity:1; transform:none }
}
.inv-card:hover{ transform:translateY(-3px); }
.inv-card{ transition:transform var(--transition,.18s ease),
                      border-color var(--transition,.18s ease); }

/* Kuşanılı kart: kenarı vurgulu ve köşede etiket. Önce iki kart da
   "Çıkar" yazıyordu ve hangisinin takılı olduğu ancak buton metninden
   anlaşılıyordu -- göz taradığında fark edilmiyordu. */
.inv-card.is-equipped{
  border-color:rgba(var(--accent-rgb),.65);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.28), 0 8px 26px rgba(var(--accent-rgb),.14);
}
.inv-card__badge{
  position:absolute; top:.55rem; left:.55rem; z-index:3;
  font-size:.58rem; font-weight:900; letter-spacing:.04em;
  text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg,rgb(var(--accent-rgb)),#7c3aed);
  border-radius:999px; padding:.18rem .48rem;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.inv-card__rarity{
  position:absolute; top:.55rem; right:.55rem; z-index:3;
  font-size:.55rem; font-weight:900; letter-spacing:.05em;
  text-transform:uppercase; padding:.16rem .42rem;
  border-radius:999px; border:1px solid currentColor; opacity:.9;
}
/* Nadirlik renkleri kartın data-rarity'sinden, tema değişkenleriyle:
   sabit değerler koyu zemin için seçilmişti ve beyazda okunmuyordu
   (nadir 2.54, efsanevi 1.67). */
.inv-card[data-rarity="common"]    .inv-card__rarity{ color:var(--muted); }
.inv-card[data-rarity="uncommon"]  .inv-card__rarity{ color:var(--c-pos); }
.inv-card[data-rarity="rare"]      .inv-card__rarity{ color:var(--rar-rare); }
.inv-card[data-rarity="epic"]      .inv-card__rarity{ color:var(--rar-epic); }
.inv-card[data-rarity="legendary"] .inv-card__rarity{ color:var(--rar-leg); }
/* Efsanevi kartın kenarı hafifçe nefes alıyor — yalnızca en üst
   nadirlik, yoksa "özel" olmaktan çıkardı. */
.inv-card[data-rarity="legendary"]{ animation:invGir .5s cubic-bezier(.22,1,.36,1) both,
                                              invEfsane 3.2s ease-in-out infinite 1s; }
@keyframes invEfsane{
  0%,100%{ box-shadow:0 0 0 1px rgba(251,191,36,.22) }
  50%    { box-shadow:0 0 16px 1px rgba(251,191,36,.34) }
}

/* Sticker paketi önizlemesi */
.inv-card__stickers{
  display:flex; gap:.35rem; align-items:center; justify-content:center;
  flex-wrap:wrap;
}
.inv-card__stickers img{
  width:42px; height:42px; object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.4));
}

@media (max-width:900px){
  .inv-look{ grid-template-columns:auto minmax(0,1fr); }
  .inv-collection{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .inv-look{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .inv-look__worn{ justify-content:center; }
  .inv-look__meta{ justify-content:center; }
}

/* Hareket azaltma: giriş ve dolgu animasyonları ANINDA bitmiş
   sayılıyor -- kapatmak yerine `to` durumunda bırakmak gerekiyor,
   yoksa scaleX(0) kalır ve çubuklar hiç görünmezdi. */
@media (prefers-reduced-motion:reduce){
  .inv-look::after,
  .inv-look__glow{ animation:none; }
  .inv-card,
  .inv-card[data-rarity="legendary"]{ animation:none; opacity:1; transform:none; }
  .inv-collection__bar i{ animation:none; transform:scaleX(1); }
  .inv-ring__fg{ animation:none; stroke-dasharray:var(--pct) 100; }
}

/* ---------------------------------------------------------------
   KİLİTLİ KARTLAR — henüz alınmamış ürünler
   Envanterin koleksiyon gibi okunmasını sağlıyor: iki eşyayla
   sayfanın dörtte üçü boş kalıyordu ve daha ne toplanabileceği
   hiçbir yerde görünmüyordu.
   --------------------------------------------------------------- */
.inv-card--locked{
  display:flex; flex-direction:column;
  opacity:.52; filter:saturate(.35);
  text-decoration:none;
  transition:opacity var(--transition,.18s ease),
             filter var(--transition,.18s ease),
             transform var(--transition,.18s ease);
}
/* Üzerine gelince tam renkleniyor: "bu benim olabilir" hissi. */
.inv-card--locked:hover{ opacity:1; filter:none; transform:translateY(-3px); }
.inv-card--locked .shop-card__name{ color:var(--text-2); }

.inv-card__lock{
  position:absolute; top:.55rem; left:.55rem; z-index:3;
  display:grid; place-items:center; width:22px; height:22px;
  border-radius:50%; background:rgba(0,0,0,.55);
  border:1px solid var(--border); color:var(--muted);
}
.inv-card__price{
  display:inline-flex; align-items:center; gap:.3rem;
  margin-top:auto; padding-top:.5rem;
  font-size:.8rem; font-weight:800; color:var(--text-2);
}
/* Kilitli kartta efsanevi nefes animasyonu YOK: kilitliyken
   parlaması, sahip olunan efsanevi kartla aynı ağırlıkta
   görünmesine yol açardı. */
.inv-card--locked[data-rarity="legendary"]{
  animation:invGir .5s cubic-bezier(.22,1,.36,1) both;
}

/* =====================================================================
 *  OKUMA DURUMU VE LİSTELER
 *
 *  "Kaydedilenler" tek kovaydı: bir seriyi bıraktığını, planladığını
 *  ya da bitirdiğini işaretlemenin yolu yoktu.
 * ===================================================================*/
.rstatus-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.6rem;
}
.rstatus-box{
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding:.9rem .7rem; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border);
  border-top:3px solid var(--rst-color, var(--border-2));
}
.rstatus-box strong{ font-size:1.5rem; font-weight:900; font-variant-numeric:tabular-nums; }
.rstatus-box span{ font-size:.72rem; color:var(--muted); font-weight:700; }
/* Her durumun kendi rengi: dört kutunun aynı görünmesi, hangisinin
   ne olduğunu okumadan ayırt etmeyi imkânsız kılardı. */
.rstatus-box[data-status="okuyorum"]   { --rst-color:rgb(var(--accent-rgb)); }
.rstatus-box[data-status="bitirdim"]   { --rst-color:var(--c-pos); }
.rstatus-box[data-status="biraktim"]   { --rst-color:var(--c-neg); }
.rstatus-box[data-status="planliyorum"]{ --rst-color:var(--c-gold); }

/* Seri sayfasındaki seçici */
.rstatus-pick{ margin-top:.8rem; }
.rstatus-pick__label{
  display:block; font-size:.68rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.35rem;
}
.rstatus-pick__row{ display:flex; flex-wrap:wrap; gap:.3rem; }
.rstatus-btn{
  padding:.32rem .6rem; border-radius:8px; cursor:pointer;
  font-size:.74rem; font-weight:700;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  transition:border-color var(--transition,.18s ease), color var(--transition,.18s ease);
}
.rstatus-btn:hover{ border-color:var(--border-2); color:var(--text); }
.rstatus-btn.is-on{
  background:rgba(var(--accent-rgb),.16);
  border-color:rgb(var(--accent-rgb)); color:var(--text);
}
.rstatus-btn[data-status="bitirdim"].is-on{ background:rgba(34,201,122,.16); border-color:var(--c-pos); }
.rstatus-btn[data-status="biraktim"].is-on{ background:rgba(239,68,68,.14);  border-color:var(--c-neg); }
.rstatus-btn[data-status="planliyorum"].is-on{ background:rgba(245,176,74,.14); border-color:var(--c-gold); }

/* Listeye ekleme açılırı */
.list-pick{ margin-top:.7rem; }
.list-pick > summary{
  display:flex; align-items:center; gap:.4rem; cursor:pointer;
  font-size:.8rem; font-weight:700; color:var(--text-2);
  padding:.45rem .6rem; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--border);
  list-style:none;
}
.list-pick > summary::-webkit-details-marker{ display:none; }
.list-pick > summary:hover{ border-color:var(--border-2); color:var(--text); }
.list-pick > summary b{
  margin-left:auto; font-size:.68rem; color:rgb(var(--accent-rgb));
}
.list-pick__body{ display:flex; flex-direction:column; gap:.25rem; margin-top:.4rem; }
.list-pick__item{
  display:flex; align-items:center; gap:.5rem; width:100%;
  padding:.4rem .6rem; border-radius:8px; cursor:pointer;
  background:transparent; border:1px solid var(--border);
  color:var(--text-2); font-size:.78rem; text-align:left;
}
.list-pick__item:hover{ border-color:var(--border-2); color:var(--text); }
.list-pick__item.is-in{
  background:rgba(var(--accent-rgb),.12);
  border-color:rgba(var(--accent-rgb),.5); color:var(--text);
}
.list-pick__item span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-pick__item em{ font-style:normal; font-weight:900; color:rgb(var(--accent-rgb)); }
.list-pick__empty{
  display:inline-block; margin-top:.7rem;
  font-size:.78rem; color:var(--muted);
}

/* Listeler sayfası */
.list-new{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem;
}
.list-new input[type="text"]{
  flex:1; min-width:200px; padding:.55rem .75rem; border-radius:9px;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
}
.list-new__pub{ display:flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--text-2); }
.list-cards{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.list-card{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid var(--border); border-radius:12px; background:var(--surface-2);
  transition:border-color var(--transition,.18s ease);
}
.list-card:hover{ border-color:rgba(var(--accent-rgb),.5); }
.list-card__body{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem;
  padding:.75rem .9rem; text-decoration:none; color:var(--text);
}
.list-card__body span{ font-size:.72rem; color:var(--muted); font-weight:700; }
.list-card__body small{ font-size:.72rem; color:var(--text-2); }
.list-card__side{ display:flex; align-items:center; gap:.5rem; padding-right:.8rem; }
.list-card__private{
  font-style:normal; font-size:.62rem; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--border); border-radius:999px; padding:.1rem .4rem;
}
.list-card__del{
  display:grid; place-items:center; width:28px; height:28px;
  border-radius:8px; cursor:pointer;
  background:transparent; border:1px solid var(--border); color:var(--muted);
}
.list-card__del:hover{ color:var(--c-neg); border-color:var(--c-neg); }