/* Rise Online esya tarayicisi. Solda filtreli liste, sagda secilen esyanin
   kademe kademe stat tablosu. Genis ekranda yan yana, darda alt alta. */

.re-kontrol { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.re-ara { flex: 1 1 240px; max-width: 380px; }
.re-suz { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

.re-cip {
  padding: 5px 11px;
  border: 1px solid var(--ucuz-border); border-radius: var(--r-tam);
  background: rgba(255,255,255,.03); color: var(--ucuz-sonuk);
  font-size: .76rem; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.re-cip:hover { color: var(--ucuz-metin); border-color: var(--ucuz-border-guc); }
.re-cip.is-on {
  background: var(--ucuz-gold-zayif); border-color: var(--ucuz-gold-cizgi);
  color: var(--ucuz-gold); font-weight: 600;
}

.re-sayac { font-size: .78rem; color: var(--ucuz-sonuk2); margin-bottom: 10px; }

.re-govde { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
@media (max-width: 991.98px) { .re-govde { grid-template-columns: 1fr; } }

.re-liste-kutu { max-height: 620px; }
.re-liste tbody tr { cursor: pointer; }
.re-liste tbody tr:hover td { background: rgba(242,179,61,.07); }
.re-liste tbody tr.is-on td { background: rgba(242,179,61,.14); }
.re-ad { font-weight: 600; color: var(--ucuz-metin); }
.re-liste th[data-sirala] { cursor: pointer; user-select: none; }
.re-liste th.is-sirali { color: var(--ucuz-gold); }
.re-liste th.is-sirali::after { content: ' ▲'; font-size: .6em; }
.re-liste th.is-sirali.is-ters::after { content: ' ▼'; }
.re-bos { padding: 16px 4px; font-size: .84rem; color: var(--ucuz-sonuk2); }

/* Nadirlik renkleri. Oyun icindeki kaliteyi bir bakista ayirt etmek icin. */
.re-nadir, .re-etiket {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-tam);
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--ucuz-border); color: var(--ucuz-sonuk);
}
.n-epic { background: rgba(167,139,250,.14); border-color: rgba(167,139,250,.4); color: #c4b1fb; }
.n-unique { background: rgba(242,179,61,.14); border-color: var(--ucuz-gold-cizgi); color: var(--ucuz-gold); }
.n-rare { background: rgba(122,162,247,.14); border-color: rgba(122,162,247,.4); color: #9db8f9; }
.n-common { background: rgba(255,255,255,.05); color: var(--ucuz-sonuk2); }

/* ---- Detay paneli ---- */
.re-detay {
  align-self: start; position: sticky; top: 76px;
  max-height: calc(100vh - 96px); overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid var(--ucuz-border); border-radius: var(--r-lg);
  background: var(--ucuz-panel);
}
@media (max-width: 991.98px) { .re-detay { position: static; max-height: none; } }

.re-detay-bos { padding: 28px 0; text-align: center; font-size: .84rem; color: var(--ucuz-sonuk3); }
.re-detay-bas h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; color: var(--ucuz-metin); }
.re-etiketler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.re-tanim { font-size: .82rem; line-height: 1.65; color: var(--ucuz-sonuk); margin-bottom: 14px; }

.re-tablo-ad {
  font-family: var(--yt-metin); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ucuz-sonuk2);
  margin: 16px 0 7px;
}
.re-stat { font-size: .74rem; }
.re-stat th { white-space: nowrap; }
.re-stat tbody th { text-align: left; font-weight: 600; color: var(--ucuz-metin2); }
.re-stat .re-sabit { color: var(--ucuz-sonuk); font-style: italic; }

.re-liste-madde { margin: 0; padding-left: 1.1rem; font-size: .8rem; line-height: 1.8; color: var(--ucuz-sonuk); }
.re-liste-madde li::marker { color: var(--ucuz-gold); }

/* ---- Yetenek listesi ---- */
.ry-grup { margin-bottom: 22px; }
.ry-grup-ad {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--yt-metin); font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ucuz-metin2);
  margin: 0 0 8px;
}
.ry-grup-ad span {
  padding: 1px 8px; border-radius: var(--r-tam);
  background: var(--ucuz-gold-zayif); color: var(--ucuz-gold);
  font-size: .66rem; letter-spacing: 0;
}
.ry-tablo { font-size: .78rem; }
.ry-tablo th { white-space: nowrap; }
.ry-aciklama { color: var(--ucuz-sonuk); line-height: 1.6; min-width: 260px; }
.ry-pasif {
  display: inline-block; padding: 1px 7px; margin-left: 5px;
  border-radius: var(--r-tam); background: rgba(122,162,247,.14);
  border: 1px solid rgba(122,162,247,.35); color: #9db8f9;
  font-size: .62rem; font-weight: 700;
}

/* ---- Gorev listesi ---- */
.rg-tablo { font-size: .76rem; }
.rg-tablo th { white-space: nowrap; }
.rg-hedef { color: var(--ucuz-sonuk); line-height: 1.55; min-width: 200px; }
.rg-odul { color: var(--ucuz-metin2); line-height: 1.55; min-width: 150px; }
.rg-premium { color: var(--ucuz-gold); }
.rg-tekrar {
  display: inline-block; padding: 1px 7px; margin-left: 5px;
  border-radius: var(--r-tam); background: rgba(58,208,125,.13);
  border: 1px solid rgba(58,208,125,.35); color: var(--ucuz-green);
  font-size: .62rem; font-weight: 700; white-space: nowrap;
}

/* ---- Uretim listesi ---- */
.ru-tablo { font-size: .76rem; }
.ru-tablo th { white-space: nowrap; }
.ru-malzeme { min-width: 230px; }
.ru-mz {
  display: inline-block; margin: 1px 4px 1px 0; padding: 2px 8px;
  border: 1px solid var(--ucuz-border); border-radius: var(--r-tam);
  background: rgba(255,255,255,.03); color: var(--ucuz-metin2);
  font-size: .7rem; white-space: nowrap;
}

/* Eşya ve yetenek simgeleri. Kaynak dosyalar 64x64 PNG; tabloda 30px, detay
   panelinde 52px basiliyor. Oyun simgeleri keskin kenarli olduğu için
   büyütmede yumuşatma kapalı, küçültmede açık kalıyor. */
.re-ad-sar { display: flex; align-items: center; gap: 9px; min-width: 0; }
.re-ikon {
  flex: 0 0 auto; width: 30px; height: 30px;
  border-radius: 6px;
  background: var(--ucuz-dark);
  border: 1px solid var(--ucuz-border);
}
.re-ikon-yok {
  display: block;
  background: repeating-linear-gradient(45deg,
    transparent 0 4px, rgba(255,255,255,.03) 4px 8px);
}
.re-ikon-buyuk {
  width: 52px; height: 52px; border-radius: var(--r-md);
  image-rendering: -webkit-optimize-contrast;
}
.re-detay-bas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.re-detay-bas h2 { margin: 0; }
.re-detay-bas .re-etiketler { flex: 1 0 100%; }

/* Simgeler yuklenirken satir yuksekligi oynamasin diye olculer sabit; img
   etiketinde de width/height duruyor. */
.re-tablo td, .ry-tablo td, .ru-tablo td { vertical-align: middle; }

@media (max-width: 575.98px) {
  .re-ikon { width: 26px; height: 26px; }
  .re-ikon-buyuk { width: 44px; height: 44px; }
}