/* ============================================================================
   Erendor Online — İstatistik Rehberi (rehber-statlar.html)
   guide.css'in üstüne biner: bölüm başlıkları, tablo ve mekanik kartları oradan
   gelir; burada yalnızca bu sayfaya özgü kartlar tanımlıdır.
   ============================================================================ */

/* ── Giriş ───────────────────────────────────────────────────────────────── */
.stats-lead {
  color: #a4abc2;
  font-size: 16px;
  line-height: 1.7;
  max-width: 820px;
  margin: 0 0 24px;
}
.stats-lead strong { color: #dfe2ec; }

.stats-callout {
  background: linear-gradient(180deg, #171c2c 0%, #141827 100%);
  border: 1px solid #2b3350;
  border-left: 3px solid #3f9488;
  border-radius: 12px;
  padding: 20px 22px;
}
.stats-callout-title {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: #e4e7f0;
  margin: 0 0 8px;
}
.stats-callout-body { font-size: 14px; color: #a4abc2; line-height: 1.65; margin: 0 0 12px; }
.stats-callout-body strong { color: #e4e7f0; }
.stats-callout-list { margin: 0; padding-left: 18px; }
.stats-callout-list li {
  font-size: 13.5px;
  color: #a4abc2;
  line-height: 1.7;
  margin-bottom: 9px;
}
.stats-callout-list li:last-child { margin-bottom: 0; }
.stats-callout-list li::marker { color: #3f9488; }
.stats-callout-list strong { color: #e4e7f0; }
.stats-callout-list em { color: #86d9cd; font-style: normal; }

/* Kart hücrelerinin okuma kılavuzu — callout'tan sonra, ondan daha sessiz bir katman. */
.stats-cardsnote {
  margin: 16px 0 0;
  padding: 13px 15px;
  background: #12161f;
  border: 1px dashed #2b3350;
  border-radius: 10px;
  font-size: 13px;
  color: #98a0b8;
  line-height: 1.7;
  max-width: 900px;
}
.stats-cardsnote strong { color: #dfe2ec; }
.stats-cardsnote em { color: #86d9cd; font-style: normal; }

/* ── Grup başlığı (renk grup renginden gelir) ─────────────────────────────── */
.stats-group-title { display: flex; align-items: center; gap: 10px; }
.stats-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  font-size: 16px;
  line-height: 1;
  border-radius: 8px;
  color: var(--grp, #4fb3a6);
  /* Düz renkler yedek; color-mix destekleyen tarayıcıda grup rengine boyanır. */
  background: #0f121d;
  border: 1px solid #3a4568;
  background: color-mix(in srgb, var(--grp, #4fb3a6) 12%, transparent);
  border-color: color-mix(in srgb, var(--grp, #4fb3a6) 35%, transparent);
}

/* ── Temel istatistik kartları ────────────────────────────────────────────── */
.basic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.basic-card {
  background: #161a2a;
  border: 1px solid #2b3350;
  border-top: 2px solid var(--grp, #4fb3a6);
  border-radius: 12px;
  padding: 15px 16px;
}
.basic-name {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  color: #e4e7f0;
  margin-bottom: 6px;
}
.basic-what { font-size: 13px; color: #a4abc2; line-height: 1.6; margin: 0; }
.basic-what strong { color: #dfe2ec; }
.basic-what em { color: #86d9cd; font-style: normal; }

/* ── Stat kartları ────────────────────────────────────────────────────────── */
.stat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 16px;
  align-items: start;
}
.statc {
  background: #161a2a;
  border: 1px solid #2b3350;
  border-left: 3px solid var(--card, var(--grp, #4fb3a6));
  border-radius: 12px;
  padding: 17px 18px;
}
.statc-name {
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--card, var(--grp, #4fb3a6));
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.statc-name em { color: #6f7897; font-style: normal; font-size: 12px; }
.statc-badge {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8e97b4;
  border: 1px solid #3a4568;
  border-radius: 4px;
  padding: 1px 6px;
}
.statc-what { font-size: 13.5px; color: #a4abc2; line-height: 1.65; margin: 0; }
.statc-what strong { color: #e4e7f0; }
.statc-what em { color: #cbd0e0; font-style: normal; }

.statc-note {
  font-size: 12.5px;
  color: #cbd0e0;
  line-height: 1.6;
  margin: 11px 0 0;
  padding: 9px 11px;
  background: #10141f;
  border: 1px solid #2b3350;
  border-radius: 8px;
}
.statc-note strong { color: #e8b34a; }
.statc-note em { color: #86d9cd; font-style: normal; }

/* Hücre sayısı stata göre 3–5 arasında değişir (azami roll / güç ağırlığı yalnız bilgi
   taşıdığında basılır) — sabit 3 kolon son satırı tek hücreyle boş bırakıyordu. */
.statc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 7px;
  margin-top: 13px;
}
.statc-fact {
  background: #0f121d;
  border: 1px solid #2b3350;
  border-radius: 8px;
  padding: 7px 9px;
  min-width: 0;
}
.statc-fact-label { display: block; font-size: 10.5px; color: #7d86a6; margin-bottom: 2px; }
.statc-fact-value { font-size: 13px; color: #e4e7f0; }

.statc-slots { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.statc-slots-label {
  width: 100%;
  font-size: 10.5px;
  color: #7d86a6;
  margin-bottom: 2px;
}
.statc-pending {
  margin-top: 12px;
  font-size: 12px;
  color: #7d86a6;
  font-style: italic;
}

.statc-tip {
  margin: 13px 0 0;
  padding: 9px 11px;
  background: #1b2032;
  border-left: 3px solid var(--card, var(--grp, #4fb3a6));
  border-radius: 8px;
  font-size: 12.5px;
  color: #cbd0e0;
  line-height: 1.6;
}

.statc.is-retired { opacity: .72; }

/* ── Element blokları ─────────────────────────────────────────────────────── */
.elem-block { margin-bottom: 26px; }
.elem-block:last-child { margin-bottom: 0; }
.elem-head {
  border-left: 3px solid var(--elem, #4fb3a6);
  padding: 2px 0 2px 13px;
  margin-bottom: 13px;
}
.elem-title {
  font-family: 'Cinzel', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--elem, #e4e7f0);
  display: block;
  margin-bottom: 4px;
}
.elem-line { font-size: 13.5px; color: #a4abc2; line-height: 1.6; margin: 0; max-width: 780px; }
.elem-line strong { color: #e4e7f0; }
.elem-pair { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ── Kaynak kartları ──────────────────────────────────────────────────────── */
.src-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}
.src-card {
  display: flex;
  gap: 13px;
  background: #161a2a;
  border: 1px solid #2b3350;
  border-radius: 12px;
  padding: 16px;
}
.src-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #0f121d;
  border: 1px solid #3a4568;
  color: #3f9488;
  font-size: 17px;
}
.src-body { min-width: 0; }
.src-title { font-family: 'Cinzel', serif; font-size: 16px; color: #e4e7f0; margin-bottom: 5px; }
.src-text { font-size: 13px; color: #a4abc2; line-height: 1.6; margin: 0; }
.src-text strong { color: #dfe2ec; }
.src-link {
  display: inline-block;
  margin-top: 9px;
  font-size: 12.5px;
  color: #3f9488;
  text-decoration: none;
}
.src-link:hover { color: #86d9cd; }

/* ── Kapanış özeti ────────────────────────────────────────────────────────── */
.stats-summary {
  margin: 0;
  padding-left: 18px;
  max-width: 860px;
}
.stats-summary li {
  font-size: 14px;
  color: #a4abc2;
  line-height: 1.75;
  margin-bottom: 10px;
}
.stats-summary li::marker { color: #3f9488; }
.stats-summary strong { color: #e4e7f0; }

/* ── Dar ekran ────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .stat-card-grid, .elem-pair { grid-template-columns: 1fr; }
  .statc-facts { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 5px; }
  .statc-fact { padding: 6px 7px; }
  .statc-fact-value { font-size: 12px; }
  .src-card { flex-direction: column; }
}