/* =========================================================================
 * Dosya    : themes/default/assets/css/cards/card_site_quiz_home_modes.css
 * Eski yol : css/modules/quiz/modes.css
 * Taşındı  : 2026-10-19 · T3.4 (K1 yerleşim kuralı: <tip>/<tip>_<kapsam>_<modül>)
 * Kapsam   : Quiz ana sayfası yarışma modu kartları
 * ========================================================================= */

/* ==========================================================================
   ACIZANE QUIZ - COMPETITION MODES
   Sorumluluk: "Hemen Yarışmaya Başla" mod kartları (Kategori: lacivert-altın,
   Serbest: turkuaz, Özel: mor). Yarışma bağlantı listeleri home-play.css'te.
   ========================================================================== */

.quiz-home__modes {
  container-type: inline-size;
}

/* Equal-height row; card content is bounded (preview of max 3 quizzes),
   so one card's list cannot stretch the row. */
.quiz-home__mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(12px, 1.4vw, 18px);
}

.quiz-home__mode {
  --mode-from: var(--qh-navy-900);
  --mode-to: var(--qh-navy-700);
  --mode-icon-bg: rgb(255 255 255 / 16%);
  --mode-icon-fg: #ffffff;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 220px;
  padding: clamp(18px, 1.8vw, 24px);

  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgb(255 255 255 / 14%), transparent 46%),
    linear-gradient(140deg, var(--mode-from), var(--mode-to));
  color: #ffffff;
  box-shadow: 0 14px 30px rgb(19 35 58 / 14%);
}

.quiz-home__mode--category {
  --mode-from: var(--qh-navy-950);
  --mode-to: var(--qh-navy-700);
  --mode-icon-bg: var(--qh-gold);
  --mode-icon-fg: var(--qh-navy-950);

  border-color: rgb(242 184 75 / 40%);
}

.quiz-home__mode--free {
  --mode-from: var(--qh-teal-deep);
  --mode-to: #17b3ad;
}

.quiz-home__mode--special {
  --mode-from: var(--qh-purple-deep);
  --mode-to: #8b5cf6;
}

.quiz-home__mode-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.quiz-home__mode-icon {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 14px;
  background: var(--mode-icon-bg);
  color: var(--mode-icon-fg);
}

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

.quiz-home__mode h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}

.quiz-home__mode p {
  margin: 0 0 20px;
  max-width: 36ch;
  color: rgb(255 255 255 / 86%);
  font-size: 14px;
  line-height: 1.55;
}

/* Category card action: gold pill (real link to #categories). */
.quiz-home__mode-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: auto;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--qh-gold);
  color: var(--qh-navy-950);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 150ms ease;
}

@media (hover: hover) {
  .quiz-home__mode-action:hover {
    background: var(--qh-gold-light);
  }
}

@container (max-width: 780px) {
  .quiz-home__mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quiz-home__mode:last-child {
    grid-column: 1 / -1;
  }
}

@container (max-width: 520px) {
  .quiz-home__mode-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .quiz-home__mode {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-home__mode-action {
    transition: none;
  }
}

/* Decorative compositions have their own reserved header band; no hit targets. */
.quiz-home__mode-art { position: relative; align-self: flex-end; width: 150px; height: 112px; flex: none; margin: -8px -8px 6px 0; pointer-events: none; perspective: 500px; transition: transform 220ms ease; }
.quiz-home__art-orbit { position: absolute; inset: 6px 2px 0 10px; border: 1px solid #ffffff30; border-radius: 50%; transform: rotate(-22deg); background: radial-gradient(ellipse,#ffffff18,transparent 70%); }
.quiz-home__art-tile { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 65px; height: 78px; border: 1px solid #ffffff70; border-radius: 12px; background: linear-gradient(145deg,#fffdf5,#dbdfec); color: #1a3f73; box-shadow: 0 10px 16px #06152935; }
.quiz-home__art-tile .quiz-home__icon { width: 27px; height: 27px; }
.quiz-home__art-tile--back { left: 22px; top: 8px; transform: rotate(-22deg); background: #85cbc9; }
.quiz-home__art-tile--middle { left: 51px; top: 7px; transform: rotate(13deg); background: #bba5eb; }
.quiz-home__art-tile--front { left: 65px; top: 28px; transform: rotate(9deg); }
.quiz-home__art-tile i { width: 28px; height: 3px; background: currentColor; opacity: .22; border-radius: 3px; }
.quiz-home__art-tile i:last-child { width: 19px; }
.quiz-home__art-dot { position: absolute; right: 5px; top: 22px; width: 8px; height: 8px; background: #f6d58a; border-radius: 50%; box-shadow: -117px 67px 0 -1px #ffffff80; }
.quiz-home__art-question { position: absolute; left: 43px; top: -10px; color: #fff; font-size: 92px; font-weight: 900; text-shadow: 0 6px 0 #07565e,0 12px 16px #06152940; transform: rotate(-15deg); }
.quiz-home__art-mini { position: absolute; right: 10px; top: 8px; font-size: 30px; font-weight: 800; color: #f6d58a; transform: rotate(18deg); }
.quiz-home__mode-art--free .quiz-home__art-tile--front { width: 57px; height: 47px; left: 87px; top: 64px; color: #0b6f78; transform: rotate(12deg); }
.quiz-home__mode-art--free .quiz-home__art-tile--back { width: 44px; height: 49px; left: 9px; top: 47px; }
.quiz-home__art-cup { position: absolute; left: 34px; top: 3px; color: #ffd77c; filter: drop-shadow(0 6px 0 #8b5717) drop-shadow(0 12px 10px #21063d70); }
.quiz-home__art-cup svg, .quiz-home__art-spark svg { display: block; } /* DOCTYPE: taban boşluğu yok (20.10.2026) */
.quiz-home__art-cup .quiz-home__icon { width: 90px; height: 90px; stroke-width: 1.5; fill: #f2b84b45; }
.quiz-home__art-medal { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 42px; height: 42px; border: 3px double #ffe1a0; border-radius: 50%; background: #d69b36; color: #fff3d0; box-shadow: 0 8px 12px #21063d50; transform: rotate(12deg); }
.quiz-home__art-medal::before { content: ''; position: absolute; width: 25px; height: 23px; top: -20px; background: linear-gradient(90deg,#bba5eb 40%,#fff8 40% 60%,#bba5eb 60%); clip-path: polygon(0 0,100% 0,85% 100%,15% 100%); z-index: -1; }
.quiz-home__art-spark { position: absolute; top: 5px; left: 10px; color: #ffe1a0; transform: rotate(-15deg); }
.quiz-home__mode-art--special .quiz-home__art-orbit { background: radial-gradient(ellipse,#f6d58a38,transparent 70%); }
@media (hover:hover) { .quiz-home__mode:hover .quiz-home__mode-art { transform: translateY(-3px) rotate(2deg); } }
@container (max-width:520px) { .quiz-home__mode-art { width: 150px; height: 100px; margin-bottom: 4px; transform: scale(.85); transform-origin: right top; } .quiz-home__art-orbit,.quiz-home__art-dot { display: none; } }
@media (prefers-reduced-motion:reduce) { .quiz-home__mode-art { transition: none; } }