/* ══════════════════════════════════════════════════
   ALMANCAPRATIK — quiz.css (Anasayfa ile uyumlu revizyon)
   Used by: quiz/play/index.html and other quiz screens

   NOT: Sadece :root token değerleri (font + renk) değiştirildi.
   Aşağıdaki class/selector yapısının tamamı orijinaliyle AYNI —
   hiçbir şey kırılmaz, sadece görünüm anasayfaya yaklaşır.
══════════════════════════════════════════════════ */

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

/* ── Design Tokens (anasayfa ile hizalandı) ── */
:root {
  --bg:     #0b1326;                     /* anasayfa background */
  --s1:     rgba(218,226,253,0.030);
  --s2:     rgba(218,226,253,0.056);
  --s3:     rgba(218,226,253,0.088);
  --br:     rgba(218,226,253,0.068);
  --br2:    rgba(218,226,253,0.15);
  --t1:     #dae2fd;                     /* anasayfa on-surface */
  --t2:     rgba(218,226,253,0.58);
  --t3:     rgba(218,226,253,0.32);
  --v:      #b4c5ff;                     /* anasayfa primary */
  --vd:     #7e93e0;
  --vg:     rgba(180,197,255,0.20);
  --g:      #bcc7de;                     /* anasayfa secondary (eski altın yerine) */
  --gl:     #d8e3fb;
  --gg:     rgba(188,199,222,0.20);
  --gr:     #4ade80;                     /* anasayfa yeşil (A1 rozeti ile aynı aile) */
  --grg:    rgba(74,222,128,0.20);
  --re:     #f07068;
  --reg:    rgba(240,112,104,0.18);
  --bl:     #93c5fd;
  --blg:    rgba(147,197,253,0.18);
  --fd:     'Manrope', sans-serif;       /* anasayfa headline fontu */
  --fb:     'Manrope', sans-serif;       /* anasayfa body fontu */
  --fm:     'Space Grotesk', monospace;  /* anasayfa label fontu */
  --ease:   0.22s cubic-bezier(0.4,0,0.2,1);
  --spring: 0.44s cubic-bezier(0.22,1,0.36,1);
}

/* ── Background ── */
.bg-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(218,226,253,0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(218,226,253,0.014) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 0%, black 20%, transparent 100%);
}
/* Glow orb'lar sadeleştirildi: daha düşük opaklık, tek renk ailesi (mor+altın karışımı yerine) */
.bg-glow { position:absolute; border-radius:50%; filter:blur(130px); animation:drift 16s ease-in-out infinite alternate; }
.bg-glow-1 { width:700px;height:700px;top:-260px;left:-180px;background:radial-gradient(circle,rgba(180,197,255,0.06),transparent 70%); }
.bg-glow-2 { width:500px;height:500px;bottom:5%;right:-150px;background:radial-gradient(circle,rgba(188,199,222,0.045),transparent 70%);animation-delay:-8s; }
@keyframes drift { from{transform:translate(0,0) scale(1)} to{transform:translate(40px,28px) scale(1.08)} }

/* ── Screen wrapper ── */
.screen {
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:88px 20px 48px;
}
.screen.hidden { display:none !important; }

/* ── Loader ── */
.loader-wrap { text-align:center; color:var(--t2); }
.loader-ring {
  width:56px; height:56px;
  border:3px solid rgba(218,226,253,0.06);
  border-top-color:var(--v);
  border-radius:50%; animation:spin 1s linear infinite;
  margin:0 auto 20px;
}
.loader-wrap p { font-size:15px; color:var(--t2); }

/* ── Quiz Layout ── */
.quiz-layout {
  width:100%; max-width:660px;
  display:flex; flex-direction:column; gap:22px;
  animation:fadeUp var(--spring) both;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

/* ── Topbar ── */
.quiz-topbar { display:flex; align-items:center; gap:16px; }
.progress-wrap { flex:1; display:flex; align-items:center; gap:12px; }
.progress-bar { flex:1; height:5px; background:rgba(218,226,253,0.07); border-radius:99px; overflow:hidden; }
.progress-fill {
  height:100%; background:linear-gradient(90deg,var(--v),#93c5fd);
  border-radius:99px; transition:width .5s var(--spring); width:0%;
}
.progress-label { font-size:13px; color:var(--t3); white-space:nowrap; font-weight:500; font-family:var(--fm); }
.score-badge {
  background:rgba(74,222,128,0.1); border:1px solid rgba(74,222,128,0.22);
  color:var(--gr); font-family:var(--fd); font-size:14px; font-weight:700;
  padding:5px 14px; border-radius:20px; white-space:nowrap;
}

/* ── Question Card ── */
.question-card {
  background:var(--s1); border:1px solid var(--br);
  border-radius:26px; padding:52px 44px 44px;
  text-align:center; position:relative; overflow:hidden;
}
.question-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 55% at 50% 0%, rgba(180,197,255,0.045), transparent);
  pointer-events:none;
}
.q-direction {
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--v); font-weight:600; margin-bottom:18px; opacity:.8;
}
.q-word {
  font-family:var(--fd); font-size:clamp(30px,5.5vw,52px); font-weight:800;
  line-height:1.1; color:var(--t1); word-break:break-word;
}
.q-mode-tag {
  display:inline-block; font-size:11px; padding:4px 12px;
  border-radius:20px; font-weight:500; letter-spacing:.05em; margin-top:14px;
}
.q-mode-tag.multiple { background:rgba(188,199,222,0.1); color:var(--g); border:1px solid rgba(188,199,222,0.2); }
.q-mode-tag.typing   { background:rgba(147,197,253,0.1); color:var(--bl); border:1px solid rgba(147,197,253,0.2); }

/* ── Choices ── */
.choices-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.choice-btn {
  background:var(--s1); border:1.5px solid var(--br); border-radius:16px;
  padding:20px 16px; color:var(--t1); font-family:var(--fb); font-size:15px;
  cursor:pointer; transition:var(--ease); text-align:left; line-height:1.4; word-break:break-word;
}
.choice-btn:hover:not(:disabled) { border-color:var(--v); background:rgba(180,197,255,0.08); transform:translateY(-2px); }
.choice-btn.correct { border-color:var(--gr) !important; background:rgba(74,222,128,0.1) !important; color:var(--gr); }
.choice-btn.wrong   { border-color:var(--re) !important; background:rgba(240,112,104,0.07) !important; color:var(--re); }
.choice-btn:disabled { cursor:default; }

/* ── Type Area ── */
.type-area { display:flex; gap:10px; }
.type-area.hidden { display:none; }
.choices-grid.hidden { display:none; }

.type-area input {
  flex:1; background:var(--s2); border:1.5px solid var(--br); border-radius:14px;
  padding:17px 20px; color:var(--t1); font-family:var(--fb); font-size:16px; outline:none;
  transition:var(--ease);
}
.type-area input:focus { border-color:var(--v); box-shadow:0 0 0 3px rgba(180,197,255,0.12); }
.type-area input.correct { border-color:var(--gr); background:rgba(74,222,128,0.05); }
.type-area input.wrong   { border-color:var(--re); background:rgba(240,112,104,0.05); }

.btn-check {
  background:var(--v); border:none; border-radius:14px; padding:17px 26px;
  color:#0b1326; font-family:var(--fd); font-size:15px; font-weight:700;
  cursor:pointer; transition:var(--ease); white-space:nowrap;
}
.btn-check:hover { background:var(--vd); color:#fff; transform:translateY(-2px); }
.btn-check:disabled { opacity:.5; cursor:default; transform:none; }

/* ── Feedback ── */
.feedback {
  background:var(--s1); border:1px solid var(--br); border-radius:20px;
  padding:22px 26px; display:flex; align-items:center; gap:16px;
  animation:slideIn .3s var(--spring) both;
}
@keyframes slideIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.feedback.hidden { display:none !important; }
.feedback.correct-fb { border-color:rgba(74,222,128,0.3); background:rgba(74,222,128,0.05); }
.feedback.wrong-fb   { border-color:rgba(240,112,104,0.3); background:rgba(240,112,104,0.05); }
.feedback-icon { font-size:26px; flex-shrink:0; }
.feedback-text { flex:1; font-size:14px; line-height:1.65; color:var(--t2); }
.feedback-text strong { color:var(--t1); font-size:15px; }
.btn-next {
  background:transparent; border:1px solid var(--br); border-radius:10px;
  padding:10px 20px; color:var(--t1); font-family:var(--fd); font-size:14px;
  font-weight:600; cursor:pointer; transition:var(--ease); white-space:nowrap; flex-shrink:0;
}
.btn-next:hover { border-color:var(--v); color:var(--v); }

/* ── Result Screen ── */
.result-wrap { text-align:center; max-width:520px; animation:fadeUp var(--spring) both; }
.result-emoji { font-size:64px; margin-bottom:16px; }
.result-title { font-family:var(--fd); font-size:clamp(36px,6vw,56px); font-weight:800; letter-spacing:-.04em; margin-bottom:12px; }
.result-score {
  font-family:var(--fd); font-size:clamp(60px,10vw,88px); font-weight:800; line-height:1;
  background:linear-gradient(135deg,var(--g),var(--v)); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:10px;
}
.result-msg { color:var(--t2); font-size:16px; margin-bottom:32px; }
.result-breakdown { display:flex; gap:14px; justify-content:center; margin-bottom:36px; flex-wrap:wrap; }
.rb-item {
  background:var(--s1); border:1px solid var(--br); border-radius:16px;
  padding:18px 24px; display:flex; flex-direction:column; align-items:center; gap:5px; min-width:100px;
}
.rb-num { font-family:var(--fd); font-size:32px; font-weight:800; }
.rb-num.green { color:var(--gr); }
.rb-num.red   { color:var(--re); }
.rb-label { font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:.08em; }
.result-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-restart {
  background:linear-gradient(135deg,var(--v),var(--vd)); border:none; border-radius:14px;
  padding:15px 36px; color:#0b1326; font-family:var(--fd); font-size:16px; font-weight:700;
  cursor:pointer; transition:var(--spring); box-shadow:0 8px 28px var(--vg);
}
.btn-restart:hover { transform:translateY(-3px); box-shadow:0 18px 44px var(--vg); }
.btn-home {
  background:transparent; border:1px solid var(--br); border-radius:14px;
  padding:15px 32px; color:var(--t2); font-family:var(--fd); font-size:16px;
  font-weight:600; cursor:pointer; transition:var(--ease); text-decoration:none; display:inline-block;
}
.btn-home:hover { border-color:var(--br2); color:var(--t1); }

/* ── Artikel Quiz Buttons (used in play screen) ── */
.artikel-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
.artikel-btn {
  padding:28px 10px; border-radius:18px; border:2px solid;
  font-family:var(--fd); font-size:30px; font-weight:800;
  cursor:pointer; transition:var(--ease); background:transparent;
}
.artikel-btn.der-btn { border-color:rgba(147,197,253,0.3); color:var(--bl); }
.artikel-btn.die-btn { border-color:rgba(240,112,104,0.3); color:var(--re); }
.artikel-btn.das-btn { border-color:rgba(180,197,255,0.3); color:var(--v); }
.artikel-btn:hover:not(:disabled) { transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,0.25); }
.artikel-btn.der-btn:hover:not(:disabled) { background:rgba(147,197,253,0.1); border-color:var(--bl); }
.artikel-btn.die-btn:hover:not(:disabled) { background:rgba(240,112,104,0.1); border-color:var(--re); }
.artikel-btn.das-btn:hover:not(:disabled) { background:rgba(180,197,255,0.1); border-color:var(--v); }
.artikel-btn.correct { background:rgba(74,222,128,0.15) !important; border-color:var(--gr) !important; color:var(--gr) !important; }
.artikel-btn.wrong   { background:rgba(240,112,104,0.1) !important; border-color:var(--re) !important; color:var(--re) !important; }
.artikel-btn:disabled { cursor:default; transform:none !important; }

/* ── Start screen (used by play/index.html) ── */
.start-wrap { text-align:center; max-width:520px; animation:fadeUp var(--spring) both; }
.start-badge {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(180,197,255,0.10); border:1px solid rgba(180,197,255,0.28);
  border-radius:999px; padding:5px 16px;
  font-family:var(--fm); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--v); margin-bottom:20px;
}
.start-title {
  font-family:var(--fd); font-size:clamp(28px,6vw,52px); font-weight:800;
  letter-spacing:-.04em; line-height:1.05; color:var(--t1); margin-bottom:10px;
}
.start-sub { font-size:14px; color:var(--t2); margin-bottom:28px; line-height:1.7; }
.settings-row { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:28px; }
.settings-row .count-label { font-size:13px; color:var(--t2); }
.stepper { display:flex; align-items:center; gap:14px; }
.stepper button {
  width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(218,226,253,0.1); background:rgba(218,226,253,0.04);
  color:var(--t1); font-size:16px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:var(--ease);
}
.stepper button:hover { border-color:var(--v); background:var(--vg); color:var(--v); }
.stepper span { font-family:var(--fd); font-size:24px; font-weight:700; min-width:30px; text-align:center; }
.btn-start {
  background:linear-gradient(135deg,var(--v),var(--vd)); color:#0b1326; border:none;
  padding:16px 48px; border-radius:14px; font-family:var(--fd); font-size:18px;
  font-weight:700; cursor:pointer; transition:var(--spring); box-shadow:0 8px 32px var(--vg);
  letter-spacing:.02em;
}
.btn-start:hover { transform:translateY(-3px); box-shadow:0 18px 48px rgba(180,197,255,0.35); }
.start-info { margin-top:16px; font-size:13px; color:var(--t3); }

/* ── Meta info row ── */
.meta-row { display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:32px; }
.meta-item { display:flex; flex-direction:column; align-items:center; gap:4px; }
.meta-num { font-family:var(--fd); font-size:28px; font-weight:800; color:var(--g); }
.meta-label { font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:.08em; }
.meta-sep { width:1px; height:40px; background:rgba(218,226,253,0.07); }

/* ── Animations ── */
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%,60% { transform:translateX(-6px); }
  40%,80% { transform:translateX(6px); }
}
.shake { animation:shake .35s ease both; }

/* ── Responsive ── */
@media (max-width:520px) {
  .choices-grid { grid-template-columns:1fr; }
  .type-area { flex-direction:column; }
  .question-card { padding:32px 22px; }
  .quiz-layout { gap:16px; }
  .artikel-choices { gap:10px; }
  .artikel-btn { font-size:24px; padding:22px 8px; }
  .result-actions { flex-direction:column; align-items:center; }
}