/* ============================================
   Betine Club — Hızlı Soru Etkinliği
   Sadece quiz-specific stiller
   Base stiller style.css'te tanımlı
   ============================================ */

/* ─── Quiz Banner ─── */
.quiz-banner{position:relative;border-radius:28px;overflow:hidden;border:1px solid rgba(255,196,0,.15);margin-bottom:20px;background:var(--panel)}
.quiz-banner>img{width:100%;aspect-ratio:1/1;max-height:340px;object-fit:cover;display:block}
.quiz-banner-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px 24px 14px;background:linear-gradient(to top,rgba(9,9,13,.95) 0%,rgba(9,9,13,.7) 50%,transparent 100%)}
.quiz-banner-overlay h2{font-size:clamp(24px,4vw,38px);margin:10px 0 6px;letter-spacing:-.03em;line-height:1.1}
.quiz-banner-overlay p{color:#d4d9e4;font-size:14px;margin:0}

.quiz-pill{display:inline-flex;padding:6px 12px;border-radius:999px;background:rgba(255,196,0,.12);border:1px solid rgba(255,196,0,.23);color:var(--gold2);font-size:11px;font-weight:900;letter-spacing:.04em}

/* Meta bar */
.quiz-meta-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.qm-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;background:var(--panel);text-align:center}
.qm-icon{font-size:20px}
.qm-val{font-size:14px;font-weight:900;color:var(--gold)}
.qm-lbl{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* ─── Quiz Card (genel kapsayıcı) ─── */
.quiz-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:16px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.quiz-card h3{margin:0 0 14px;font-size:17px}

/* ─── Login Form ─── */
.quiz-login-form{display:flex;flex-direction:column;gap:12px;max-width:400px;margin:0 auto}
.qq-input{width:100%;border:1px solid var(--line);background:rgba(0,0,0,.25);color:#fff;border-radius:14px;padding:14px 16px;font-size:16px;outline:none;text-align:center}
.qq-input:focus{border-color:rgba(255,196,0,.4);box-shadow:0 0 0 3px rgba(255,196,0,.08)}
.qq-join-btn{width:100%;border:0;border-radius:16px;padding:14px;font-weight:900;font-size:15px;background:linear-gradient(135deg,var(--gold),#ff9d00);color:#171006;cursor:pointer;transition:.18s}
.qq-join-btn:hover{transform:translateY(-1px)}

/* ─── Question Header & Timer ─── */
.qq-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.qq-day{font-size:14px;font-weight:800;color:var(--muted)}
.qq-day span{font-size:24px;font-weight:900;color:var(--gold)}

.qq-timer{position:relative;width:56px;height:56px}
.qq-timer-ring{width:100%;height:100%}
.qq-timer-text{position:absolute;inset:0;display:grid;place-items:center;font-size:16px;font-weight:900;color:var(--gold)}
.qq-timer-text.warning{color:var(--red);animation:timerBlink 1s ease infinite}
#qqTimerFill.warning{stroke:var(--red)}
@keyframes timerBlink{0%,100%{opacity:1}50%{opacity:.4}}

/* Question Text */
.qq-question{font-size:18px;font-weight:700;line-height:1.5;margin:0 0 20px;color:var(--text)}

/* ─── Options ─── */
.qq-options{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.qq-option{width:100%;display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;transition:.18s;text-align:left;font-weight:600;font-size:15px}
.qq-option:hover{border-color:rgba(255,196,0,.35);background:rgba(255,196,0,.06)}
.qq-option.selected{border-color:var(--gold);background:rgba(255,196,0,.12);box-shadow:0 0 0 2px rgba(255,196,0,.2)}
.qq-option.correct{border-color:var(--green)!important;background:rgba(66,211,146,.12)!important;box-shadow:0 0 0 2px rgba(66,211,146,.2)!important}
.qq-option.wrong{border-color:var(--red)!important;background:rgba(255,100,116,.12)!important;box-shadow:0 0 0 2px rgba(255,100,116,.2)!important}
.qq-option[disabled]{pointer-events:none;opacity:.6}

.qq-opt-letter{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-weight:900;font-size:14px;flex:0 0 auto;transition:.18s}
.qq-option.selected .qq-opt-letter{background:var(--gold);color:#171006}
.qq-option.correct .qq-opt-letter{background:var(--green);color:#fff}
.qq-option.wrong .qq-opt-letter{background:var(--red);color:#fff}
.qq-opt-text{flex:1}

/* Submit */
.qq-submit{width:100%;border:0;border-radius:16px;padding:16px;font-weight:900;font-size:16px;letter-spacing:.04em;background:linear-gradient(135deg,var(--gold),#ff9d00);color:#171006;cursor:pointer;transition:.18s;margin-top:4px}
.qq-submit:hover{transform:translateY(-1px)}
.qq-submit:disabled{opacity:.4;cursor:not-allowed;transform:none!important}

/* ─── Countdown ─── */
.qq-countdown{display:flex;align-items:center;justify-content:center;gap:8px}
.qq-cd-block{display:flex;flex-direction:column;align-items:center;background:rgba(255,196,0,.1);border:1px solid rgba(255,196,0,.2);border-radius:14px;padding:12px 18px;min-width:70px}
.qq-cd-block span{font-size:32px;font-weight:900;color:var(--gold);line-height:1}
.qq-cd-block small{font-size:10px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.qq-cd-sep{font-size:28px;color:var(--muted);font-weight:900}

/* ─── Performans ─── */
.qp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.qp-stat{text-align:center;padding:14px 8px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)}
.qp-val{display:block;font-size:20px;font-weight:900;color:var(--gold);margin-bottom:4px}
.qp-lbl{display:block;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}

.qp-history{display:flex;gap:8px;flex-wrap:wrap}
.qp-day{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);min-width:52px}
.qp-day.correct{border-color:rgba(66,211,146,.3);background:rgba(66,211,146,.08)}
.qp-day.wrong{border-color:rgba(255,100,116,.3);background:rgba(255,100,116,.08)}
.qp-day.pending{border-style:dashed;opacity:.5}
.qp-day-num{font-size:10px;color:var(--muted);font-weight:700}
.qp-day-icon{font-size:18px}
.qp-day-time{font-size:10px;color:var(--muted)}

/* ─── Liderlik Tablosu ─── */
.ql-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);transition:.18s;margin-bottom:6px}
.ql-item:hover{background:rgba(255,255,255,.06)}

.ql-item.rank-1{border-color:rgba(255,196,0,.3);background:linear-gradient(135deg,rgba(255,196,0,.12),rgba(255,196,0,.04))}
.ql-item.rank-2{border-color:rgba(192,192,192,.25);background:linear-gradient(135deg,rgba(192,192,192,.08),rgba(192,192,192,.03))}
.ql-item.rank-3{border-color:rgba(205,127,50,.25);background:linear-gradient(135deg,rgba(205,127,50,.08),rgba(205,127,50,.03))}

.ql-rank{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:900;font-size:13px;background:rgba(255,255,255,.08);flex:0 0 auto}
.rank-1 .ql-rank{background:linear-gradient(135deg,#ffc400,#ff9d00);color:#171006}
.rank-2 .ql-rank{background:linear-gradient(135deg,#c0c0c0,#8a8a8a);color:#1a1a1a}
.rank-3 .ql-rank{background:linear-gradient(135deg,#cd7f32,#a0522d);color:#fff}

.ql-name{flex:1;font-weight:700;font-size:14px}
.ql-score{font-weight:900;font-size:13px;color:var(--gold);white-space:nowrap}
.ql-empty{text-align:center;padding:24px;color:var(--muted);font-size:14px}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Quiz-specific only
   ═══════════════════════════════════════════════ */
@media(max-width:980px){
  .quiz-meta-bar{grid-template-columns:repeat(2,1fr)}
  .qp-stats{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
  .quiz-banner>img{max-height:260px}
  .quiz-banner-overlay h2{font-size:22px}
  .quiz-meta-bar{grid-template-columns:1fr 1fr}
  .qq-question{font-size:16px}
  .qq-option{padding:12px 14px}
  .qp-stats{grid-template-columns:repeat(2,1fr)}
  .qq-cd-block{min-width:58px;padding:10px 14px}
  .qq-cd-block span{font-size:26px}
}

@media(max-width:400px){
  .quiz-meta-bar{grid-template-columns:1fr}
  .qq-countdown{flex-wrap:wrap}
}