/* Grafik Dedektifi — SADECE bu oyuna özgü kurallar.
   Ortak taban /ortak/tema.css'te; genel bir kuralı oraya ekle, buraya kopyalama. */

.grafik-question-card {
  position: relative;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 12px 28px rgba(67, 53, 107, 0.12);
  padding: 3vh 4vw;
  width: 100%;
  text-align: center;
  transform: rotate(-1deg);
}

/* grafiğin başlığı — veri kümesinin ne olduğunu söyler */
.gr-baslik {
  font-size: clamp(14px, 3.8vw, 18px);
  font-weight: 800;
  color: var(--teal-dark);
  padding-bottom: 1vh;
}

.gr-gorsel { display: flex; justify-content: center; }

.gr-gorsel svg { max-width: 100%; height: auto; }

/* ---- nesne / şekil grafiği (1-3. sınıf) ---- */

.gr-nesne { display: flex; flex-direction: column; gap: 5px; width: 100%; }

.gr-satir { display: flex; align-items: center; gap: 8px; }

.gr-ad {
  flex: 0 0 4.6em;
  text-align: right;
  font-size: clamp(12px, 3.4vw, 16px);
  font-weight: 800;
  color: var(--ink);
}

/* şekiller: sayılabilsin diye aralarında net boşluk var, satır kaymaz */
.gr-oge {
  flex: 1;
  text-align: left;
  font-size: clamp(15px, 4.4vw, 22px);
  letter-spacing: 0.16em;
  line-height: 1.35;
  white-space: nowrap;
}

.gr-anahtar {
  align-self: center;
  margin-top: 6px;
  padding: 2px 12px;
  border-radius: 999px;
  background: #fff3d6;
  color: #a6740c;
  font-size: 13px;
  font-weight: 800;
}

/* ---- çetele tablosu (3. sınıf) ---- */

.gr-cetele-satir { display: flex; align-items: center; gap: 10px; min-height: 30px; }

.gr-cetele-satir .gr-ad { flex: 0 0 4.6em; }

.gr-soru {
  display: block;
  padding-top: 1.6vh;
  font-size: clamp(16px, 4.2vw, 23px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--muted);
}

.gr-soru b { color: var(--ink); }

/* kategori adı şıkları (en çok/en az soruları) */
.answer-btn .answer-word {
  font-size: clamp(18px, 5vw, 26px);
  letter-spacing: 0;
}

.answer-btn .answer-num { font-variant-numeric: tabular-nums; }