/* ============================================================
   Nabız Hızı Dashboard V2
   Layout:
     Sol 1/3  : KALP (büyük animasyon) + EKG&BPM
     Sağ 2/3  : Canlı Seçimi (kompakt) + QUIZ (büyük)
   Bilgi Kartları, Tablo, Referanslar : Top bar butonları ile modal
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Global: HTML hidden attribute her zaman gizler (panel class'ı override etmesin) */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background: #f4f6fb;
  color: #1f2937;
  overflow: hidden;
}

:root {
  --fast-1:#ff8f3d;  --fast-2:#ff6a00;  --fast-soft:#fff1e3;
  --normal-1:#34c77a; --normal-2:#1fa362; --normal-soft:#e6f8ee;
  --slow-1:#3d8bff;  --slow-2:#1f6bdc;  --slow-soft:#e6efff;
  --warm-soft:#ffece8; --warm-dark:#b42020;
  --cold-soft:#e6efff; --cold-dark:#1e4a9c;
  --highlight-soft:#fff4e6; --highlight-dark:#a05a10;
  --quiz-accent:#6c48c9; --quiz-soft:#f0e9fc;
  --panel-bg:#ffffff; --panel-border:#e5e8f0; --text-muted:#6b7280;
}

.app {
  height: 100vh;
  display: grid;
  grid-template-rows: 58px 1fr 24px;
  padding: 10px 14px;
  gap: 8px;
}

/* TOP BAR */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff8a8a, #d93030 70%);
  box-shadow: 0 0 0 3px #ffe1e1;
  animation: dotPulse 1.2s infinite ease-in-out;
}
@keyframes dotPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }
.brand h1 { font-size: 19px; font-weight: 700; letter-spacing: .3px; }
.version-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #34c77a, #1fa362);
  color: #fff;
  margin-left: 4px;
  box-shadow: 0 2px 4px rgba(31, 163, 98, 0.3);
}
.version-badge.v1 {
  background: linear-gradient(180deg, #888, #5a5a5a);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.version-badge.web {
  background: linear-gradient(180deg, #3d8bff, #1f6bdc);
  box-shadow: 0 2px 4px rgba(31, 107, 220, 0.3);
}

.topbar-right {
  display: flex; align-items: center; gap: 8px;
}
.current-info {
  font-size: 13px; color: var(--text-muted);
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap;
}
.current-info strong { color: #111827; font-size: 13.5px; }
.current-info .sep { color: #c8cdd8; margin: 0 2px; }
.metabolism-badge {
  margin-left: 6px;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.metabolism-badge[data-m="sicakkanli"] { background: var(--warm-soft); color: var(--warm-dark); }
.metabolism-badge[data-m="sogukkanli"] { background: var(--cold-soft); color: var(--cold-dark); }

.topbar-btn {
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: #fff; color: var(--text-muted);
  cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.topbar-btn:hover { border-color: #c6cde0; background: #fafbfe; color: #111827; }
.sound-btn.on {
  color: #fff;
  background: linear-gradient(180deg, #d93030, #b22020);
  border-color: #a01818;
  box-shadow: 0 2px 8px rgba(217,48,48,.35);
}

/* ============================================================
   ANA GRID — Sol 1/3 (kalp büyük + EKG kompakt) · Sağ 2/3
   ============================================================ */
.dashboard {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;       /* tek satır, tam yüksekliği doldur */
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}
.left-col, .right-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
/* Sol: kalp büyük (%70) + BPM kompakt (%30) */
.left-col > .heart-panel     { flex: 7 1 0; min-height: 0; }
.left-col > .bpm-panel       { flex: 3 1 0; min-height: 0; }
/* Sağ: canlı seçimi (büyük) + durum şeridi (ince) + quiz butonu (orta) */
.right-col > .creatures-panel    { flex: 5 1 0; min-height: 0; }
.right-col > .state-bar-panel    { flex: 1.5 1 0; min-height: 0; }
.right-col > .quiz-button-panel  { flex: 2 1 0; min-height: 0; }

/* Panellere uygulanan eski grid-column/grid-row artık wrapper içinde anlamsız */
.heart-panel, .bpm-panel, .creatures-panel,
.quiz-panel, .state-bar-panel, .quiz-button-panel {
  grid-column: auto !important;
  grid-row: auto !important;
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; gap: 8px;
}
.panel-head h2 { font-size: 14px; font-weight: 700; color: #111827; }
.panel-head .hint { font-size: 11px; color: var(--text-muted); }

.expand-btn {
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: #fff; color: var(--text-muted);
  cursor: pointer; transition: all .12s;
}
.expand-btn:hover { border-color: #c6cde0; background: #fafbfe; color: #111827; }

/* ============================================================
   İNSAN KONTROLLERİ (cinsiyet toggle + yaş slider)
   ============================================================ */
.human-controls {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: linear-gradient(180deg, #fafbfe, #f5f7fc);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  flex-wrap: wrap;
}
.human-controls[hidden] { display: none; }

.gender-toggle {
  display: flex; background: #e8ecf4;
  border-radius: 999px; padding: 2px; gap: 2px;
}
.gender-btn {
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer;
  border-radius: 999px; transition: all .12s; white-space: nowrap;
}
.gender-btn:hover { color: #111827; }
.gender-btn.active { background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.gender-btn[data-gender="erkek"].active { color: #1e4a9c; }
.gender-btn[data-gender="kadin"].active { color: #c02060; }

.age-slider-row {
  display: flex; align-items: center; gap: 6px;
  flex: 1; min-width: 180px; font-size: 11.5px;
}
.age-icon { font-size: 14px; line-height: 1; }
.age-label { color: var(--text-muted); font-weight: 700; }
.age-value {
  font-weight: 800; color: #d93030;
  min-width: 24px; text-align: right;
  font-variant-numeric: tabular-nums; font-size: 13px;
}
.age-group-badge {
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  background: #fff; color: #111827;
  border: 1px solid var(--panel-border);
  white-space: nowrap;
}
#ageSlider { flex: 1; min-width: 70px; accent-color: #d93030; cursor: pointer; height: 5px; }

/* ============================================================
   KALP SAHNESİ (BÜYÜK)
   ============================================================ */
.heart-stage-big {
  flex: 1; min-height: 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 55%,
      rgba(255, 225, 220, 0.6) 0%,
      rgba(250, 240, 244, 0.3) 40%,
      rgba(244, 246, 251, 0) 78%),
    linear-gradient(180deg, #fdfdff 0%, #f0f3fa 100%);
  padding: 2px;
}
.heart-svg {
  width: 82%; height: 82%;
  max-width: 82%; max-height: 82%;
  object-fit: contain;
  transform-origin: 50% 60%;
  will-change: transform;
  animation: heartBeat 0.83s cubic-bezier(0.25, 0.4, 0.3, 1) infinite;
}
/* %20 daha büyütülmüş animasyon - base scale 1.2, peak 1.32 */
@keyframes heartBeat {
  0%   { transform: scale(1.2);  }
  14%  { transform: scale(1.32); }
  28%  { transform: scale(1.2);  }
  42%  { transform: scale(1.26); }
  55%  { transform: scale(1.2);  }
  100% { transform: scale(1.2);  }
}

/* ============================================================
   EKG + BPM + durum/faktör yatay şerit
   ============================================================ */
.bpm-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  min-height: 0;
  flex: 1;
}
.bpm-display {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-width: 110px;
  padding: 4px 10px;
  background: linear-gradient(180deg, #fff 0%, #fafbfe 100%);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
}
.bpm-value {
  font-size: 44px; font-weight: 800; line-height: 1;
  color: #d93030; letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.bpm-unit {
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 1.5px; font-weight: 700; margin-top: 2px;
}
.bpm-category {
  margin-top: 4px; padding: 3px 8px;
  border-radius: 999px; font-size: 10px;
  font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.bpm-category[data-cat="fast"]   { background: var(--fast-soft);   color: var(--fast-2); }
.bpm-category[data-cat="normal"] { background: var(--normal-soft); color: var(--normal-2); }
.bpm-category[data-cat="slow"]   { background: var(--slow-soft);   color: var(--slow-2); }

.ekg-wrap {
  position: relative;
  background: linear-gradient(180deg, #fafcfe 0%, #f2f6fc 100%);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
}
.ekg-canvas { display: block; width: 100%; height: 100%; }
.ekg-hud {
  position: absolute; top: 6px; right: 8px;
  display: flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 3px 9px; font-size: 11px;
  backdrop-filter: blur(4px);
}
.ekg-hud-label { color: var(--text-muted); font-weight: 600; }
.ekg-hud-value { color: #d93030; font-weight: 800; letter-spacing: .3px; }

/* Durum/faktör yatay şerit (ayrı panelde, tam genişlik) */
.state-bar-panel {
  padding: 8px 10px;
}
.state-bar-panel .panel-head {
  margin-bottom: 4px;
}
.state-bar-panel .panel-head h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
}
.state-bar-panel .panel-head .hint { font-size: 10.5px; }

.state-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 2px 2px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  align-items: center;
}
.state-bar::-webkit-scrollbar { height: 6px; }
.state-bar::-webkit-scrollbar-thumb { background: #d6dbe8; border-radius: 6px; }

.fs-chip {
  flex-shrink: 0;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  padding: 7px 12px; border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: #fff; color: #1f2937;
  cursor: pointer;
  transition: all .12s;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.fs-chip:hover { border-color: #c6cde0; background: #fafbfe; }
.fs-chip.active {
  box-shadow: 0 0 0 2px #c9d4ef, 0 2px 6px rgba(15,23,42,.1);
  border-color: transparent;
}
.fs-chip[data-cat="fast"]   { border-left: 3px solid var(--fast-1); }
.fs-chip[data-cat="normal"] { border-left: 3px solid var(--normal-1); }
.fs-chip[data-cat="slow"]   { border-left: 3px solid var(--slow-1); }
.fs-chip .fs-emoji { font-size: 15px; }
.fs-chip .fs-bpm {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-left: 3px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   CANLI SEÇİMİ (SAĞ ÜST, KOMPAKT)
   ============================================================ */
.category-tabs {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 6px;
}
.cat-tab {
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: #fff; color: var(--text-muted);
  cursor: pointer; transition: all .12s;
  display: flex; align-items: center; gap: 4px;
}
.cat-tab:hover { border-color: #c6cde0; background: #fafbfe; }
.cat-tab.active { background: #111827; color: #fff; border-color: #111827; }

.creatures-list {
  flex: 1; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px; padding-right: 4px;
}
.creature-card {
  font-family: inherit;
  border: 1px solid var(--panel-border); background: #fff;
  border-radius: 10px; padding: 8px 6px;
  cursor: pointer; text-align: center;
  transition: all .12s;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  position: relative;
}
.creature-card:hover { border-color: #c6cde0; box-shadow: 0 2px 6px rgba(15,23,42,.06); }
.creature-card.active {
  background: #fff;
  box-shadow: 0 0 0 2px #c9d4ef, 0 4px 10px rgba(15,23,42,.1);
  border-color: transparent;
}
.creature-card .c-emoji { font-size: 24px; line-height: 1; margin-bottom: 1px; }
.creature-card .c-name  { font-size: 11.5px; font-weight: 700; color: #111827; }
.creature-card .c-heart { font-size: 9.5px; color: var(--text-muted); }
.creature-card .c-meta {
  position: absolute; top: 4px; right: 4px; font-size: 9px;
}

/* ============================================================
   QUIZ BUTON PANELİ (SAĞ ALT - büyük CTA)
   ============================================================ */
.quiz-button-panel {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.quiz-big-btn {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 18px 24px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #7a5cdd 0%, #4a2aa0 100%);
  color: #fff;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  font-family: inherit;
  text-align: left;
  box-shadow: 0 6px 20px rgba(108, 72, 201, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}
.quiz-big-btn::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.quiz-big-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(108, 72, 201, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.quiz-big-btn:active { transform: translateY(0); }
.qbig-emoji {
  font-size: 44px; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.qbig-text {
  flex: 1;
  display: flex; flex-direction: column; gap: 3px;
}
.qbig-title { font-size: 20px; font-weight: 800; letter-spacing: .3px; }
.qbig-sub { font-size: 12.5px; opacity: 0.85; font-weight: 500; }
.qbig-arrow {
  font-size: 30px; font-weight: 800; opacity: 0.6;
  transition: transform .15s, opacity .15s;
}
.quiz-big-btn:hover .qbig-arrow { transform: translateX(6px); opacity: 1; }

/* ============================================================
   QUIZ PANELİ (sadece modal olarak görünür)
   ============================================================ */
.quiz-panel {
  background: linear-gradient(180deg, #fff 0%, var(--quiz-soft) 100%);
}
.quiz-panel[hidden] { display: none !important; }
.quiz-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--text-muted);
}
.quiz-counter strong { color: #111827; font-variant-numeric: tabular-nums; }
.quiz-score strong {
  color: var(--quiz-accent);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
}

.quiz-content {
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
  gap: 10px;
  overflow-y: auto;
}

.quiz-question {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.quiz-option {
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 11px;
  border-radius: 9px;
  border: 2px solid var(--panel-border);
  background: #fff; color: #111827;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  display: flex; align-items: center; gap: 7px;
  line-height: 1.35;
}
.quiz-option:hover:not(:disabled) {
  border-color: var(--quiz-accent);
  background: #fafafe;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(108, 72, 201, .12);
}
.quiz-option:disabled { cursor: default; }
.quiz-option .opt-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #f0e9fc;
  color: var(--quiz-accent);
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
.quiz-option.correct {
  border-color: #1fa362;
  background: #e6f8ee;
  color: #15703f;
  animation: quizCorrectPop 0.4s ease;
}
.quiz-option.correct .opt-letter {
  background: #1fa362; color: #fff;
}
.quiz-option.wrong {
  border-color: #d93030;
  background: #ffeceb;
  color: #a01818;
  animation: quizWrongShake 0.4s ease;
}
.quiz-option.wrong .opt-letter {
  background: #d93030; color: #fff;
}
@keyframes quizCorrectPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes quizWrongShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.quiz-feedback {
  padding: 9px 12px;
  border-radius: 10px;
  border: 2px solid;
  background: #fff;
  display: flex; flex-direction: column; gap: 6px;
}
.quiz-feedback[data-result="correct"] {
  border-color: #1fa362;
  background: linear-gradient(180deg, #f2fcf6, #e6f8ee);
}
.quiz-feedback[data-result="wrong"] {
  border-color: #d93030;
  background: linear-gradient(180deg, #fff5f4, #ffeceb);
}
.quiz-result {
  font-size: 13.5px; font-weight: 800;
}
.quiz-feedback[data-result="correct"] .quiz-result { color: #15703f; }
.quiz-feedback[data-result="wrong"]   .quiz-result { color: #a01818; }
.quiz-explanation {
  font-size: 12px; color: #374151;
  line-height: 1.45;
}
.quiz-next-btn {
  align-self: flex-start;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 7px 16px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, var(--quiz-accent), #5035a0);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(108, 72, 201, .3);
  transition: transform .1s;
}
.quiz-next-btn:hover { transform: translateY(-1px); }

/* Yeni Quiz butonu (başlıkta, belirgin) */
.quiz-new-btn {
  font-family: inherit; font-size: 11.5px; font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, var(--quiz-accent), #5035a0);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(108, 72, 201, .3);
  transition: transform .1s;
  letter-spacing: .3px;
}
.quiz-new-btn:hover { transform: translateY(-1px); }

/* Quiz bitişi - skor ekranı */
.quiz-finished {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 8px; padding: 14px 18px;
  background: #fff;
  border-radius: 12px;
  border: 2px solid var(--panel-border);
}
.quiz-finished .big-emoji {
  font-size: 48px; line-height: 1;
}
.quiz-finished .big-score {
  font-size: 28px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.quiz-finished h3 {
  font-size: 20px; font-weight: 800; letter-spacing: .3px;
  margin-top: 2px;
}
.quiz-finished p {
  font-size: 13px; color: #374151; line-height: 1.5;
  margin-top: 4px;
}
.quiz-finished .retry-btn {
  margin-top: 8px;
  font-family: inherit; font-size: 13px; font-weight: 800;
  padding: 9px 24px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, var(--quiz-accent), #5035a0);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(108, 72, 201, .4);
  transition: transform .1s;
}
.quiz-finished .retry-btn:hover { transform: translateY(-2px); }

/* Skor seviyesi renkleri */
.quiz-finished[data-score="5"] { border-color: #1fa362; background: linear-gradient(180deg, #fff, #e6f8ee); }
.quiz-finished[data-score="5"] h3 { color: #1fa362; }
.quiz-finished[data-score="4"] { border-color: #34c77a; background: linear-gradient(180deg, #fff, #f0fcf5); }
.quiz-finished[data-score="4"] h3 { color: #1fa362; }
.quiz-finished[data-score="3"] { border-color: #3d8bff; background: linear-gradient(180deg, #fff, #e6efff); }
.quiz-finished[data-score="3"] h3 { color: #1f6bdc; }
.quiz-finished[data-score="2"] { border-color: #ff8f3d; background: linear-gradient(180deg, #fff, #fff1e3); }
.quiz-finished[data-score="2"] h3 { color: #ff6a00; }
.quiz-finished[data-score="1"] { border-color: #d93030; background: linear-gradient(180deg, #fff, #ffeceb); }
.quiz-finished[data-score="1"] h3 { color: #a01818; }
.quiz-finished[data-score="0"] { border-color: #6b7280; background: linear-gradient(180deg, #fff, #f4f6fb); }
.quiz-finished[data-score="0"] h3 { color: #374151; }

/* ============================================================
   MODALLAR: Bilgi Kartları, Tablo, Referanslar
   ============================================================ */
.notes-panel[hidden],
.table-panel[hidden],
.ref-panel[hidden] { display: none !important; }

.notes-panel.expanded,
.table-panel.expanded,
.ref-panel.expanded,
.quiz-panel.expanded {
  display: flex !important;
  position: fixed;
  top: 24px; left: 24px; right: 24px; bottom: 24px;
  z-index: 1000;
  padding: 18px 22px;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
  background: #fff;
}
.notes-panel.expanded .panel-head h2,
.table-panel.expanded .panel-head h2,
.ref-panel.expanded .panel-head h2,
.quiz-panel.expanded .panel-head h2 { font-size: 20px; }

/* Quiz tam ekran modunda tipografi büyür */
.quiz-panel.expanded {
  background: linear-gradient(180deg, #fff 0%, var(--quiz-soft) 100%);
}
.quiz-panel.expanded .quiz-content {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  gap: 16px;
}
.quiz-panel.expanded .quiz-question {
  font-size: 20px;
  padding: 18px 22px;
  line-height: 1.45;
}
.quiz-panel.expanded .quiz-options {
  gap: 12px;
}
.quiz-panel.expanded .quiz-option {
  font-size: 16px;
  padding: 16px 20px;
  line-height: 1.45;
}
.quiz-panel.expanded .quiz-option .opt-letter {
  width: 32px; height: 32px; font-size: 14px;
}
.quiz-panel.expanded .quiz-feedback {
  padding: 16px 20px;
}
.quiz-panel.expanded .quiz-result { font-size: 18px; }
.quiz-panel.expanded .quiz-explanation { font-size: 15px; line-height: 1.55; }
.quiz-panel.expanded .quiz-next-btn {
  font-size: 15px; padding: 10px 24px;
}
.quiz-panel.expanded .quiz-meta { font-size: 13px; }
.quiz-panel.expanded .quiz-score strong { font-size: 16px; }
.quiz-panel.expanded .quiz-finished .big-emoji { font-size: 68px; }
.quiz-panel.expanded .quiz-finished .big-score { font-size: 38px; }
.quiz-panel.expanded .quiz-finished h3 { font-size: 24px; }
.quiz-panel.expanded .quiz-finished p { font-size: 15px; }

/* Bilgi kartları modal */
.notes-list {
  flex: 1; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px; padding-right: 6px;
  align-content: start;
}
.note {
  background: #fafbfe; border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 12px 14px;
}
.note h3 { font-size: 13.5px; font-weight: 700; color: #111827; margin-bottom: 6px; }
.note p { font-size: 12.5px; color: #374151; line-height: 1.55; }
.note ul {
  margin: 6px 0 6px 18px; padding: 0;
  font-size: 12.5px; color: #374151; line-height: 1.55;
}
.note ul li { margin-bottom: 3px; }

.note.note-warm { background: var(--warm-soft); border-color: #f4c9c0; grid-column: span 1; }
.note.note-warm h3 { color: var(--warm-dark); }
.note.note-cold { background: var(--cold-soft); border-color: #c0d0f4; grid-column: span 1; }
.note.note-cold h3 { color: var(--cold-dark); }
.note.note-highlight {
  background: var(--highlight-soft); border-color: #f4d9a8;
  grid-column: 1 / -1;
}
.note.note-highlight h3 { color: var(--highlight-dark); }
.note.note-age {
  background: #f0f8ff; border-color: #c8dcf5;
  grid-column: 1 / -1;
}
.note.note-age h3 { color: #1e4a9c; }

/* Canlıya özel bilgi kartları */
.creature-notes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fff7e6 0%, #fff2d9 100%);
  border: 1px solid #f4d9a8;
  border-radius: 12px;
}
.creature-notes:empty { display: none; }
.creature-notes-header {
  grid-column: 1 / -1;
  font-size: 13px; font-weight: 800;
  color: #8a4d10;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
  display: flex; align-items: center; gap: 8px;
}
.metabolism-inline {
  margin-left: auto;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  text-transform: none; letter-spacing: 0;
}
.metabolism-inline[data-m="sicakkanli"] { background: var(--warm-soft); color: var(--warm-dark); }
.metabolism-inline[data-m="sogukkanli"] { background: var(--cold-soft); color: var(--cold-dark); }
.note.note-creature { background: #fff; border-color: #f4d9a8; }
.note.note-creature h3 { color: #8a4d10; }

.note .mini-table {
  width: 100%; border-collapse: collapse;
  margin-top: 8px; font-size: 11.5px;
}
.note .mini-table th,
.note .mini-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.note .mini-table thead th {
  font-weight: 700; color: #111827;
  background: rgba(255, 255, 255, 0.5);
}
.note .mini-table tbody tr:last-child td {
  border-bottom: none;
  background: rgba(255, 255, 255, 0.5);
}

/* Canlı moduna göre filtreleme */
body[data-creature-mode="animal"] .only-human { display: none; }
body[data-creature-mode="human"]  .only-animal { display: none; }
body[data-metabolism="sicakkanli"] .only-sogukkanli { display: none; }
body[data-metabolism="sogukkanli"] .only-sicakkanli { display: none; }

/* Tablo */
.table-wrap {
  flex: 1; overflow: auto;
  border: 1px solid var(--panel-border); border-radius: 10px;
}
.rate-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rate-table thead th {
  position: sticky; top: 0; background: #f7f9fd;
  color: #374151; font-weight: 700; text-align: left;
  padding: 10px 12px; border-bottom: 1px solid var(--panel-border);
  font-size: 12px; letter-spacing: .3px; white-space: nowrap;
}
.rate-table tbody td {
  padding: 9px 12px; border-bottom: 1px solid #eef1f7;
  vertical-align: middle; white-space: nowrap;
}
.rate-table tbody tr:hover { background: #fafbff; cursor: pointer; }
.rate-table tbody tr.active-row { background: #fff7e6; }
.rate-table .c-emoji { font-size: 14px; margin-right: 4px; }
.rate-table td.col-bpm { font-weight: 700; font-variant-numeric: tabular-nums; }
.rate-table td.col-bpm[data-cat="fast"]   { color: var(--fast-2); }
.rate-table td.col-bpm[data-cat="normal"] { color: var(--normal-2); }
.rate-table td.col-bpm[data-cat="slow"]   { color: var(--slow-2); }
.rate-table td.col-meta { font-weight: 700; font-size: 12px; }
.rate-table td.col-meta[data-m="sicakkanli"] { color: var(--warm-dark); }
.rate-table td.col-meta[data-m="sogukkanli"] { color: var(--cold-dark); }

/* Referanslar */
.ref-content { flex: 1; overflow-y: auto; padding-right: 8px; }
.ref-intro {
  font-size: 13px; color: var(--text-muted);
  margin-bottom: 14px;
  padding: 10px 14px;
  background: #fafbfe;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  line-height: 1.55;
}
.ref-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.ref-group { display: flex; flex-direction: column; gap: 8px; }
.ref-group-title {
  font-size: 13px; font-weight: 800; color: #8a4d10;
  text-transform: uppercase; letter-spacing: .5px;
  padding: 6px 10px;
  background: #fff7e6;
  border-radius: 8px;
}
.ref-item {
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
}
.ref-item h4 {
  font-size: 13px; color: #111827;
  margin-bottom: 4px; line-height: 1.35;
}
.ref-item .ref-kurum {
  font-size: 11.5px; font-weight: 700;
  color: #1f6bdc; margin-bottom: 5px;
}
.ref-item .ref-not {
  font-size: 11.5px; color: #374151;
  line-height: 1.5; margin-bottom: 6px;
}
.ref-item .ref-url {
  font-size: 10.5px; color: var(--text-muted);
  word-break: break-all; display: inline-block;
  padding: 3px 0; text-decoration: none;
}
.ref-item .ref-url:hover { color: #1f6bdc; text-decoration: underline; }

/* Modal backdrop */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
  z-index: 999;
}
body.modal-open { overflow: hidden; }

/* FOOTER */
.footer {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 11px;
  letter-spacing: .5px;
}
.footer small { font-weight: 600; }

/* SCROLLBAR */
.creatures-list::-webkit-scrollbar,
.notes-list::-webkit-scrollbar,
.ref-content::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.quiz-content::-webkit-scrollbar { width: 8px; height: 8px; }
.creatures-list::-webkit-scrollbar-thumb,
.notes-list::-webkit-scrollbar-thumb,
.ref-content::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.quiz-content::-webkit-scrollbar-thumb { background: #d6dbe8; border-radius: 8px; }

/* RESPONSIVE */
@media (max-width: 1200px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: 420px 320px auto auto;
  }
  .heart-panel     { grid-column: 1; grid-row: 1; }
  .bpm-panel       { grid-column: 1; grid-row: 2; }
  .creatures-panel { grid-column: 1; grid-row: 3; }
  .quiz-panel      { grid-column: 1; grid-row: 4; }
  html, body { overflow: auto; }
  .app { height: auto; }
  .quiz-options { grid-template-columns: 1fr; }
}