/* =========================================================================
 * Dosya    : themes/default/assets/css/pages/page_site_quiz_home.css
 * Eski yol : css/modules/quiz/home.css
 * Taşındı  : 2026-10-19 · T3.4 (K1 yerleşim kuralı: <tip>/<tip>_<kapsam>_<modül>)
 * Kapsam   : Bilgi Yarışması ana sayfası — renk değişkenleri, ana sütun / sağ sütun ızgarası, bölüm paneli (Kategori Çalışması sayfası da kullanır)
 * ========================================================================= */

/* ==========================================================================
   ACIZANE QUIZ - HOME PAGE
   Sorumluluk: Ana sayfa renk değişkenleri, genel yerleşim (ana sütun + sağ
   sütun), bölüm paneli ve bölüm başlığı. Bölüm içerikleri kendi dosyalarında
   (T3.4): headers/header_site_quiz_home_hero{,_art}.css, cards/card_site_quiz_home_
   {stats,modes,categories,my_stats}.css, trees/tree_site_quiz_home_categories.css,
   sidebars/sidebar_site_quiz_home.css, lists/list_site_quiz_home_play.css.
   ========================================================================== */

.quiz-home {
  /* ACIZANE lacivert-altın kimliği (QuizPlayer --qp-* ile aynı aile). */
  --qh-navy-950: #061529;
  --qh-navy-900: #0a1f3d;
  --qh-navy-800: #102b52;
  --qh-navy-700: #1a3f73;
  --qh-gold: #f2b84b;
  --qh-gold-light: #f6d58a;
  --qh-gold-deep: #c98a17;
  --qh-teal: #0f9b97;
  --qh-teal-deep: #0b6f78;
  --qh-purple: #7c3aed;
  --qh-purple-deep: #4c1d95;
  --qh-bg: #f6f4ef;
  --qh-surface: #fffdf9;
  --qh-border: #ebe5d8;
  --qh-ink: #13233a;
  --qh-muted: #66758a;
  --qh-radius: 20px;
  --qh-shadow: 0 1px 2px rgb(19 35 58 / 4%), 0 12px 32px rgb(19 35 58 / 6%);
  --qh-gap: clamp(16px, 1.8vw, 24px);

  width: 100%;
  min-width: 0;
  padding-block: clamp(16px, 2.4vw, 32px) clamp(40px, 5vw, 64px);
  background: var(--qh-bg);
  color: var(--qh-ink);
}

/* No global box-sizing reset exists (core/app.css); scoped to the page. */
.quiz-home,
.quiz-home *,
.quiz-home *::before,
.quiz-home *::after {
  box-sizing: border-box;
}

/* Site kabuğunun içerik alanında; 1280 px sınırı kabukta (D3 · T3.1). */
.quiz-home__container {
  padding-inline: clamp(12px, 2vw, 24px);
}

/* ---> Layout: main ≈ 75% | aside ≈ 25% */

.quiz-home__layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
  align-items: start;
  gap: var(--qh-gap);
}

.quiz-home__layout > * {
  grid-column: 1;
  min-width: 0;
}

/* The aside spans the main column's rows (hero, section links, stats, modes,
   categories [, all]) so the main column is never pushed down. */
.quiz-home__layout > .quiz-home__aside {
  grid-column: 2;
  grid-row: 1 / span 5;
  align-self: start;
  position: sticky;
  top: 16px;
}

.quiz-home__layout--all > .quiz-home__aside {
  grid-row: 1 / span 6;
}

@media (max-width: 1180px) {
  .quiz-home__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .quiz-home__layout > .quiz-home__aside {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

/* ---> Section panel (modes, categories, all quizzes) */

.quiz-home__panel {
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius);
  background: var(--qh-surface);
  box-shadow: var(--qh-shadow);
  scroll-margin-top: 16px;
}

.quiz-home__panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(16px, 1.8vw, 22px);
}

.quiz-home__panel-icon {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--qh-navy-800);
  color: var(--qh-gold);
}

.quiz-home__panel-icon--gold {
  background: #fdf1d6;
  color: var(--qh-gold-deep);
}

.quiz-home__panel-icon .quiz-home__icon {
  width: 22px;
  height: 22px;
}

.quiz-home__section-title {
  margin: 0;
  color: var(--qh-ink);
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 800;
  line-height: 1.25;
}

.quiz-home__section-description {
  margin: 4px 0 0;
  color: var(--qh-muted);
  font-size: 14px;
  line-height: 1.5;
}

.quiz-home__icon {
  display: inline-block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}