/* Deneme sınavları + konu testleri. Mobil öncelikli; tasarım token'ları study.css / theme.css'ten gelir. */
.ex-wrap { max-width: 1100px; margin: 0 auto; padding-bottom: 96px; min-width: 0; }
.ex-wrap * { min-width: 0; }
.ex-card { background: var(--el-card, #1e293b); border: 1px solid var(--st-line, #334155); border-radius: 16px; padding: 16px; }
.ex-card + .ex-card { margin-top: 12px; }
.ex-muted { color: var(--st-muted, #94a3b8); font-size: .9rem; }
.ex-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ex-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--st-line, #334155); color: #cbd5e1 !important; font-weight: 600; text-decoration: none; }
.ex-tab.active { border-color: var(--el-accent, #38bdf8); color: var(--el-accent, #38bdf8) !important; background: rgba(56,189,248,.1); }
.ex-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .ex-grid { grid-template-columns: 1fr 1fr; } }
.ex-band { font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--el-accent, #38bdf8); }
.ex-band small { font-size: .7rem; font-weight: 600; color: var(--st-muted); display: block; margin-top: 4px; letter-spacing: .02em; }
.ex-credit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-chip { font-size: .75rem; padding: .2rem .55rem; border: 1px solid var(--st-line, #334155); border-radius: 999px; color: #cbd5e1; }
.ex-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ex-row.between { justify-content: space-between; }
.ex-btn-block { width: 100%; }
.ex-ok { color: #86efac; } .ex-no { color: #fca5a5; }

/* ---------- Çalıştırıcı ---------- */
.ex-bar { position: sticky; top: 0; z-index: 20; background: #0b1220; border-bottom: 1px solid var(--st-line, #334155); margin: 0 -16px 12px; padding: 8px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ex-bar .grow { flex: 1 1 140px; min-width: 0; }
.ex-bar .title { font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.ex-timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.25rem; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid var(--st-line, #334155); border-radius: 12px; }
.ex-timer.warn { color: #fbbf24; border-color: #fbbf24; }
.ex-timer.over { color: #fca5a5; border-color: #ef4444; }
.ex-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.ex-step { font-size: .78rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--st-line, #334155); color: var(--st-muted); }
.ex-step.cur { color: var(--el-accent, #38bdf8); border-color: var(--el-accent, #38bdf8); }
.ex-step.done { color: #86efac; }
.ex-save { font-size: .75rem; color: var(--st-muted); }
.ex-note { border-left: 3px solid #fbbf24; background: rgba(251,191,36,.08); padding: 10px 12px; border-radius: 0 10px 10px 0; font-size: .92rem; margin-bottom: 12px; }
.ex-pillnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ex-pillnav button { min-height: 44px; min-width: 56px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--st-line, #334155); background: transparent; color: #e2e8f0; font-weight: 700; }
.ex-pillnav button.active { border-color: var(--el-accent, #38bdf8); background: rgba(56,189,248,.12); color: var(--el-accent, #38bdf8); }
.ex-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* Reading: masaüstünde iki sütun, mobilde yığın + geçiş */
.ex-read { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ex-toggle { display: flex; gap: 8px; margin-bottom: 10px; }
.ex-toggle button { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--st-line, #334155); background: transparent; color: #e2e8f0; font-weight: 600; }
.ex-toggle button.active { border-color: var(--el-accent, #38bdf8); color: var(--el-accent, #38bdf8); background: rgba(56,189,248,.1); }
.ex-read[data-view="text"] .ex-qpane { display: none; }
.ex-read[data-view="q"] .ex-textpane { display: none; }
@media (min-width: 992px) {
  .ex-toggle { display: none; }
  .ex-read { grid-template-columns: 1fr 1fr; align-items: start; }
  .ex-read[data-view] .ex-qpane, .ex-read[data-view] .ex-textpane { display: block; }
  .ex-textpane, .ex-qpane { max-height: calc(100vh - 150px); overflow-y: auto; }
}
.ex-passage p { line-height: 1.7; overflow-wrap: anywhere; margin-bottom: .8rem; }
.ex-passage .lab { display: inline-block; font-weight: 800; color: var(--el-accent, #38bdf8); margin-right: 6px; }

/* Sorular */
.ex-group { margin-bottom: 18px; }
.ex-ins { font-weight: 600; margin-bottom: 10px; overflow-wrap: anywhere; }
.ex-q { padding: 12px 0; border-top: 1px solid rgba(51,65,85,.6); }
.ex-q .num { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 8px; background: rgba(56,189,248,.14); color: var(--el-accent, #38bdf8); font-weight: 800; font-size: .82rem; margin-right: 8px; flex: 0 0 auto; }
.ex-q .ptext { overflow-wrap: anywhere; }
.ex-opts { display: grid; gap: 8px; margin-top: 10px; }
.ex-opt { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--st-line, #334155); border-radius: 12px; cursor: pointer; overflow-wrap: anywhere; }
.ex-opt input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: #38bdf8; }
.ex-opt.sel { border-color: var(--el-accent, #38bdf8); background: rgba(56,189,248,.08); }
.ex-opt.ok { border-color: rgba(34,197,94,.7); background: rgba(34,197,94,.1); }
.ex-opt.no { border-color: rgba(239,68,68,.7); background: rgba(239,68,68,.1); }
.ex-q input[type=text].ex-gap { display: inline-block; width: 100%; max-width: 220px; min-height: 44px; font-size: 16px; padding: 6px 10px; margin: 4px 0; background: #0b1220; color: #e2e8f0; border: 1px solid var(--st-line, #334155); border-radius: 10px; vertical-align: middle; }
.ex-q select.ex-sel { width: 100%; max-width: 100%; min-height: 44px; font-size: 16px; margin-top: 10px; }
.ex-fb { margin-top: 8px; font-size: .92rem; padding: 8px 12px; border-radius: 10px; background: rgba(148,163,184,.08); overflow-wrap: anywhere; }

/* Writing / Speaking */
.ex-text { width: 100%; min-height: 280px; font-size: 16px; line-height: 1.55; padding: 12px; border-radius: 12px; background: #0b1220; color: #e2e8f0; border: 1px solid var(--st-line, #334155); resize: vertical; }
.ex-wc { font-variant-numeric: tabular-nums; font-weight: 700; }
.ex-wc.short { color: #fbbf24; } .ex-wc.okc { color: #86efac; }
.ex-chart { background: #0b1220; border-radius: 12px; padding: 10px; margin: 10px 0; overflow: hidden; }
.ex-chart svg { width: 100%; height: auto; display: block; }
.ex-chart .tbl { overflow-x: auto; }
.ex-chart table { width: auto; min-width: 100%; font-size: .9rem; display: table; }
.ex-chart th, .ex-chart td { padding: 6px 10px; border-bottom: 1px solid #334155; white-space: nowrap; }
.ex-chart .legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: .8rem; color: #cbd5e1; margin-top: 6px; }
.ex-chart .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.ex-cue { border: 1px dashed var(--st-line, #334155); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.ex-mic { display: inline-flex; }
.ex-mic.rec { border-color: #ef4444 !important; color: #fca5a5 !important; }
.ex-live { color: var(--st-muted); font-style: italic; min-height: 1.3em; }
.ex-sq textarea { min-height: 110px; }
.ex-play { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ex-prog { height: 6px; background: var(--st-line, #334155); border-radius: 99px; overflow: hidden; flex: 1 1 120px; }
.ex-prog > span { display: block; height: 100%; width: 0; background: var(--el-accent, #38bdf8); transition: width .3s; }

/* ---------- Sonuç ---------- */
.ex-hero { text-align: center; padding: 22px 16px; }
.ex-hero .ex-band { font-size: 3.2rem; }
.ex-bands { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 768px) { .ex-bands { grid-template-columns: repeat(4, 1fr); } }
.ex-bands .b { background: #0b1220; border-radius: 12px; padding: 10px; }
.ex-bands .b .v { font-size: 1.5rem; font-weight: 800; }
.ex-rev { border-top: 1px solid rgba(51,65,85,.6); padding: 10px 0; overflow-wrap: anywhere; }
.ex-corr { background: rgba(148,163,184,.08); border-radius: 10px; padding: 8px 12px; margin-top: 8px; font-size: .92rem; }
.ex-corr del { color: #fca5a5; } .ex-corr ins { color: #86efac; text-decoration: none; }
.ex-vocab { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 768px) { .ex-vocab { grid-template-columns: 1fr 1fr; } }
.ex-vocab .w { border: 1px solid var(--st-line, #334155); border-radius: 10px; padding: 8px 12px; overflow-wrap: anywhere; }
.ex-crit { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ex-crit span { border: 1px solid var(--st-line, #334155); border-radius: 10px; padding: 4px 10px; font-size: .85rem; }
.ex-details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }