/* ═══════════════════════════════════════════════════════════════════════════
   skyra.css  |  SkyraIrl — İnline Stillerden Dönüştürülmüş CSS Sınıfları
   -------------------------------------------------------------------------
   Dinamik (C# hesaplı) değerler:  CSS custom property (--var) ile inline
     style="--var: @(değer)" şeklinde set edilir, sınıf var() ile okur.
   Statik değerler: doğrudan sınıfa yazılmıştır.
   CSS3 standartlarına uygundur — tüm değerler CSS değişkeni veya literal.
═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Değişken Varsayılanları (dinamik özellikler için fallback) ─────── */
:root {
    --exc-w:          0%;
    --exc-bg:         #44aaff;
    --slot-h:         0%;
    --word-w:         0%;
    --progress:       0%;
    --pct:            0%;
    --diff-bg:        transparent;
    --diff-border:    transparent;
    --goal-w:         0%;
}


/* ══════════════════════════════════════════════════════════════════════════
   DİNAMİK ÇUBUKLAR — Değerler Razor ile style="--var:@val" olarak aktarılır
══════════════════════════════════════════════════════════════════════════ */

/* Analytics — Heyecan skoru dolgu çubuğu */
.analytics-exc-fill {
    width:      var(--exc-w);
    background: linear-gradient(90deg, var(--exc-bg), var(--exc-bg));
}

/* Analytics — Zaman dilimi (slot) çubuğu */
.slot-bar { height: var(--slot-h); }

/* Analytics — Kelime sıklığı çubuğu */
.word-bar { width: var(--word-w); }

/* Profile — XP ilerleme çubuğu */
.progress-bar-fill { width: var(--progress); }

/* Quiz Analitik — Doğruluk yüzdesi çubuğu */
.qa-pct-bar { width: var(--pct); }

/* Quiz Analitik — Zorluk rozeti (arka plan + kenarlık dinamik) */
.qa-diff-badge {
    background: var(--diff-bg);
    border:     1px solid var(--diff-border);
}

/* Cat Dreams — Hedef ilerleme çubuğu (JS tarafından güncellenir, başlangıç 0) */
.catd-goal-bar { width: var(--goal-w); }


/* ══════════════════════════════════════════════════════════════════════════
   HOME — Ana Sayfa  (Pages/Index.cshtml)
══════════════════════════════════════════════════════════════════════════ */

/* Hero bölümü alt başlık genişliği */
.home-hero-sub { max-width: 520px; }

/* Canlı istatistik satırı max genişlik */
.home-stats-row {
    max-width: 900px;
    margin:    0 auto;
}

/* Ana içerik satırı (liderboard + quiz + özellikler) max genişlik */
.home-content-row {
    max-width: 1100px;
    margin:    0 auto;
}

/* Boş durum küçük soluk metin */
.home-empty-txt { font-size: .82rem; }

/* Boş durum / tamamlandı emoji ikonu */
.home-empty-icon {
    font-size:     2rem;
    margin-bottom: 8px;
}

/* "X soru daha…" soluk özet metin */
.home-quiz-more {
    color:      var(--skyra-text-muted);
    font-size:  .75rem;
    margin-top: 4px;
}

/* Quiz CTA butonu — ortalanmış, dar iç boşluk */
.home-quiz-btn {
    justify-content: center;
    padding:         8px;
}

/* "Aktif" pasif özellik bağlantısı (soluk mavi) */
.home-feature-inactive { color: rgba(100, 140, 200, .4); }

/* Rol hiyerarşisi bölümü max genişlik */
.home-roles-wrap {
    max-width: 700px;
    margin:    0 auto;
}

/* Rol hiyerarşisi başlık metni */
.home-roles-title {
    color:          #88bbff;
    font-size:      .875rem;
    letter-spacing: .3px;
}


/* ══════════════════════════════════════════════════════════════════════════
   QUIZ — Quiz Oynama  (Pages/Quiz/Index.cshtml)
══════════════════════════════════════════════════════════════════════════ */

/* Geçmiş quiz tablosu kart genişliği */
.qz-history-card { max-width: 680px; }

/* Hata ekranı "Yeniden Dene" butonu — JS tarafından oluşturulur */
.qz-reload-btn { margin-top: 20px; }


/* ══════════════════════════════════════════════════════════════════════════
   QUIZ CREATE — Quiz Oluşturma  (Pages/Quiz/Create.cshtml)
══════════════════════════════════════════════════════════════════════════ */

/* Kelime önerileri ipucu metni (kategori seçilmeden) */
.qc-kw-hint {
    font-size: .68rem;
    color:     rgba(120, 155, 200, .35);
}


/* ══════════════════════════════════════════════════════════════════════════
   SIMULATION — Simülasyon Sayfası  (Pages/Simulation/Index.cshtml)
══════════════════════════════════════════════════════════════════════════ */

/* Rol hiyerarşisi legend küçük yazı boyutu */
.sim-legend { font-size: 0.7em; }


/* ══════════════════════════════════════════════════════════════════════════
   ADMIN — Quiz Analitik  (Pages/Admin/QuizAnalytics.cshtml)
══════════════════════════════════════════════════════════════════════════ */

/* Quiz başlık rengi */
.qa-quiz-title { color: #aaccff; }

/* "Veri yok" boş durum mesajı */
.qa-no-data {
    text-align: center;
    padding:    30px 0;
}

/* Tablo kartı — taşmayı gizle */
.qa-table-card { overflow: hidden; }


/* ══════════════════════════════════════════════════════════════════════════
   ADMIN — Cat Dreams  (Pages/Admin/CatDreams.cshtml)
══════════════════════════════════════════════════════════════════════════ */

/* Canlı önizleme alanı min yükseklik (metin girilmeden alan kaybolmasın) */
.catd-motiv-txt { min-height: 1.3em; }

/* İpucu / yardım metin — çok küçük (.78rem) */
.catd-hint-xs { font-size: .78rem; }

/* İpucu / yardım metin — küçük (.82rem) */
.catd-hint-sm { font-size: .82rem; }

/* Hatırlatma interval sayı girişi */
.catd-interval-inp { width: 80px; }

/* Hatırlatma interval birim etiketi */
.catd-interval-unit { font-size: .82rem; }

/* Timeline öğe içerik sarmalayıcı (flex min-width: 0) */
.catd-tl-body { min-width: 0; }