/* ══════════════════════════════════════════════════════════════════════
   ai-vocab-test.css
   YDT Master Pro — stil.css'den ayrıştırıldı
   Bu dosya stil.css @import zinciri ile yüklenir.
   ══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   AI VOCABULARY TEST — Ortalanmış Kart Sistemi
   ═══════════════════════════════════════════════════════════════ */

/* Sayfa container — tam ekran */
#ai-quiz-page.container {
    position:fixed !important;
    top:0; left:228px; right:0; bottom:0;
    max-width:none !important; padding:0 !important;
    margin:0 !important; border-radius:0 !important;
    border:none !important; box-shadow:none !important;
    background:linear-gradient(160deg,#eef2ff 0%,#f5f3ff 100%) !important;
    overflow:hidden !important;
    display:flex !important; flex-direction:column !important;
    z-index:var(--z-floating) !important;
}
#ai-quiz-page.container.hidden { display:none !important; }
@media(max-width:699px){
    #ai-quiz-page.container { left:0; top:52px; bottom:60px; }
}

/* Header */
.aiq-header {
    display:flex; align-items:center; gap:var(--gap-normal);
    padding:12px 24px;
    background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(99,102,241,.12);
    box-shadow:0 2px 16px rgba(99,102,241,.08);
    flex-shrink:0;
}
.aiq-back-btn {
    width:34px; height:34px; border-radius:50%;
    border:2px solid #e0e0f0; background:white;
    color:var(--clr-brand); font-size:1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .15s; flex-shrink:0;
}
.aiq-back-btn:hover { background:#eef2ff; border-color:var(--clr-brand); }
.aiq-header-center { flex:1; }
.aiq-header-title {
    font-size:.95rem; font-weight:900; color:var(--clr-bg-deep);
    letter-spacing:-.2px;
}
.aiq-header-sub {
    font-size:.72rem; color:var(--clr-text-muted); font-weight:500; margin-top:1px;
}
.aiq-counter {
    font-size:.78rem; font-weight:800;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    color:white; padding:5px 14px; border-radius:99px;
    white-space:nowrap; flex-shrink:0;
}

/* Body — tek kolon, ortalanmış scroll */
.aiq-body {
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    display:flex; flex-direction:column; align-items:stretch;
    padding:28px 20px 48px;
}

/* Kontrol Paneli — ortalanmış tek kolon */
.aiq-control-panel {
    width:100%; max-width:860px;
    display:flex; flex-direction:column; gap:var(--gap-loose);
    height:fit-content;
    margin-left:calc(50vw - 678px); margin-right:auto;
}
@media(max-width:1116px){.aiq-control-panel{margin-left:auto;}}

/* İstatistik kartları — 4 eşit kolon */
.aiq-stats-row {
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap-normal);
}
.aiq-stat-card {
    background:white; border-radius:16px; padding:var(--padding-card) 12px;
    text-align:center; border:2px solid var(--clr-brand-light);
    box-shadow:0 4px 16px rgba(99,102,241,.07);
    transition:transform .15s;
}
.aiq-stat-card:hover { transform:translateY(-2px); }
.aiq-stat-num {
    font-size:2rem; font-weight:900; color:var(--clr-brand); line-height:1;
}
.aiq-stat-lbl { font-size:.68rem; font-weight:700; color:var(--clr-text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:.5px; }
.aiq-stat-correct .aiq-stat-num { color:var(--clr-success); }
.aiq-stat-wrong   .aiq-stat-num { color:#ef4444; }
.aiq-stat-pct     .aiq-stat-num { color:#f59e0b; }

/* Başarı bar */
.aiq-success-bar-wrap {
    height:8px; background:var(--clr-brand-light); border-radius:99px; overflow:hidden;
}
.aiq-success-bar-fill {
    height:100%; border-radius:99px; width:0%;
    background:linear-gradient(90deg,#22c55e,#84cc16);
    transition:width .6s ease;
}

/* İki kolon grid — liste + ayarlar */
.aiq-two-col {
    display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-loose);
    align-items:start;
}
@media(max-width:600px) { .aiq-two-col { grid-template-columns:1fr; } }

/* Kart ortak stil */
.aiq-card {
    background:white; border-radius:18px; padding:18px;
    border:1.5px solid #e8e4ff;
    box-shadow:0 4px 18px rgba(99,102,241,.07);
}

/* Section label */
.aiq-section-label {
    font-size:.65rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.8px; color:var(--clr-text-muted);
    padding-bottom:10px; border-bottom:1px solid var(--clr-brand-light);
    margin-bottom:10px;
}

/* Liste grid */
.aiq-list-grid {
    display:flex; flex-direction:column; gap:6px;
    max-height:220px; overflow-y:auto;
}
.aiq-list-btn {
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 12px; border-radius:10px;
    border:1.5px solid #e8e8f0; background:#fafafa;
    cursor:pointer; font-family:inherit; text-align:left;
    transition:all .15s;
}
.aiq-list-btn:hover { border-color:#a5b4fc; background:#eef2ff; }
.aiq-list-btn.active { border-color:#6366f1; background:#eef2ff; box-shadow:0 2px 10px rgba(99,102,241,.15); }
.aiq-list-name { font-size:.85rem; font-weight:700; color:var(--clr-bg-deep); }
.aiq-list-count { font-size:.7rem; color:var(--clr-text-muted); font-weight:600; }
.aiq-list-btn.active .aiq-list-name { color:var(--clr-brand); }

/* Ayar chip'leri */
.aiq-settings-grid { display:flex; flex-direction:column; gap:14px; }
.aiq-setting-item {}
.aiq-setting-label {
    font-size:.72rem; font-weight:700; color:var(--clr-brand); margin-bottom:7px;
    display:flex; align-items:center; gap:4px;
}
.aiq-setting-chips { display:flex; gap:6px; flex-wrap:wrap; }
.aiq-chip {
    padding:6px 14px; border-radius:99px; font-size:.78rem; font-weight:700;
    border:1.5px solid #e0e0ee; background:white; color:#555566;
    cursor:pointer; font-family:inherit; transition:all .15s;
}
.aiq-chip:hover { border-color:#a5b4fc; color:var(--clr-brand); background:#eef2ff; }
.aiq-chip.active { background:#6366f1; border-color:#6366f1; color:white; box-shadow:0 3px 10px rgba(99,102,241,.3); }

/* API key */
.aiq-key-box { display:flex; flex-direction:column; gap:var(--gap-tight); }
.aiq-key-input {
    width:100%; padding:10px 12px; border-radius:10px;
    border:1.5px solid #e0e0ee; font-family:inherit; font-size:.88rem;
    outline:none; box-sizing:border-box;
}
.aiq-key-input:focus { border-color:var(--clr-brand); }
.aiq-key-save-btn {
    padding:10px; border-radius:10px; border:none;
    background:var(--clr-brand); color:white; font-family:inherit;
    font-size:.88rem; font-weight:700; cursor:pointer;
}

/* Başla butonu */
.aiq-start-btn {
    display:flex; flex-direction:column; align-items:center;
    padding:var(--padding-card); border-radius:16px; border:none;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    color:white; font-family:inherit; font-size:1.1rem; font-weight:800;
    cursor:pointer; box-shadow:0 6px 20px rgba(99,102,241,.35);
    transition:transform .15s, box-shadow .15s; gap:3px;
    width:100%;
}
.aiq-start-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(99,102,241,.45); }
.aiq-start-btn:active { transform:scale(.97); }
.aiq-start-sub {
    font-size:.75rem; font-weight:600; opacity:.85;
}
.aiq-ghost-btn {
    width:100%; padding:11px; border-radius:12px; border:2px solid #e0e0ee;
    background:white; color:var(--clr-brand); font-family:inherit;
    font-size:.9rem; font-weight:700; cursor:pointer; margin-top:var(--space-2);
    transition:all .15s;
}
.aiq-ghost-btn:hover { border-color:#a5b4fc; background:#eef2ff; }

/* ── Quiz Alanı — ortalanmış ── */
.aiq-quiz-area {
    width:100%; max-width:860px;
    display:flex; flex-direction:column; gap:14px;
    height:fit-content;
    margin-left:calc(50vw - 678px); margin-right:auto;
}
@media(max-width:1116px){.aiq-quiz-area{margin-left:auto;}}

/* Üst bar */
.aiq-q-topbar {
    display:flex; align-items:center; gap:var(--gap-normal);
    background:white; border-radius:12px; padding:10px 14px;
    border:1.5px solid #e8e4ff;
    box-shadow:0 2px 10px rgba(99,102,241,.06);
}
.aiq-q-word-tag {
    font-size:.72rem; font-weight:900; text-transform:uppercase;
    letter-spacing:1px; background:#e0e7ff; color:var(--clr-brand);
    padding:4px 12px; border-radius:8px; flex-shrink:0;
    border:1.5px solid #a5b4fc;
}
.aiq-q-progress-wrap {
    flex:1; display:flex; align-items:center; gap:var(--gap-tight);
}
.aiq-q-progress-track {
    flex:1; height:7px; border-radius:99px; background:#e8e8f5; overflow:hidden;
}
.aiq-q-progress-fill {
    height:100%; border-radius:99px; width:0%;
    background:linear-gradient(90deg,#6366f1,#a855f7);
    transition:width .4s ease;
}
.aiq-q-prog-label {
    font-size:.72rem; font-weight:800; color:var(--clr-text-muted); white-space:nowrap;
}
.aiq-stop-btn {
    font-size:.72rem; font-weight:700; padding:5px 12px; border-radius:8px;
    border:1.5px solid #fca5a5; background:var(--color-error-soft); color:var(--color-error);
    cursor:pointer; flex-shrink:0; font-family:inherit; transition:all .15s;
}
.aiq-stop-btn:hover { background:var(--clr-danger-bg); }

/* Soru kartı */
.aiq-q-card {
    background:white; border-radius:20px; padding:var(--padding-section) 22px;
    box-shadow:0 6px 24px rgba(99,102,241,.1);
    border:2px solid #e8e4ff;
}
.aiq-q-difficulty {
    font-size:.65rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.7px; color:var(--clr-brand); margin-bottom:14px;
    display:flex; align-items:center; gap:6px;
}
.aiq-q-text {
    font-size:1.05rem; font-weight:700; color:var(--clr-bg-deep);
    line-height:1.8; min-height:52px;
}

/* Loading */
.aiq-loading {
    display:flex; flex-direction:column; align-items:center;
    gap:var(--gap-normal); padding:var(--padding-section); color:var(--clr-text-muted); text-align:center;
    font-size:.9rem; font-weight:600;
}
.aiq-loading-spinner {
    width:36px; height:36px; border-radius:50%;
    border:3px solid #e0e0f0; border-top-color:var(--clr-brand);
    animation:aiqSpin .8s linear infinite;
}
@keyframes aiqSpin { to { transform:rotate(360deg); } }
.aiq-loading-sub { font-size:.75rem; font-weight:500; color:#c4c4d8; }

/* Şıklar */
.aiq-options { display:flex; flex-direction:column; gap:9px; }
.aiq-opt {
    display:flex; align-items:center; gap:var(--gap-normal);
    padding:13px 16px; border-radius:14px;
    border:2px solid #e0e0ee; background:white;
    cursor:pointer; font-family:inherit; font-size:.92rem;
    font-weight:600; color:var(--clr-bg-deep); text-align:left;
    transition:all .15s; width:100%;
}
.aiq-opt:hover:not(:disabled) { border-color:#a5b4fc; background:#f5f3ff; transform:translateX(3px); }
.aiq-opt-letter {
    width:30px; height:30px; border-radius:9px; flex-shrink:0;
    background:#eef2ff; color:var(--clr-brand); font-size:.78rem; font-weight:900;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid #c7d2fe;
}
.aiq-opt-correct { background:var(--clr-success-bg-lt) !important; border-color:var(--clr-success) !important; color:#166534 !important; animation:aiqOptPop .3s; }
.aiq-opt-correct .aiq-opt-letter { background:var(--clr-success-bg); color:#166534; border-color:#86efac; }
.aiq-opt-wrong { background:var(--color-error-soft) !important; border-color:#fca5a5 !important; color:var(--color-error) !important; animation:aiqOptShake .3s; }
.aiq-opt-wrong .aiq-opt-letter { background:var(--clr-danger-bg); color:var(--color-error); border-color:#fca5a5; }
.aiq-opt-disabled { pointer-events:none; opacity:.55; }
.aiq-opt-correct, .aiq-opt-wrong { opacity:1 !important; transform:none !important; }
@keyframes aiqOptPop   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }
@keyframes aiqOptShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* Açıklama */
.aiq-explanation {
    border-radius:16px; padding:18px 20px;
    border-left:4px solid var(--clr-brand);
    font-size:.88rem; line-height:1.8; color:var(--clr-bg-deep);
    background:#f5f3ff;
    animation:aiqExpIn .3s ease;
    border:1.5px solid #e0e0f4; border-left-width:4px;
}
@keyframes aiqExpIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.aiq-exp-correct { border-color:var(--clr-success) !important; background:var(--clr-success-bg-lt); }
.aiq-exp-wrong   { border-color:#ef4444 !important; background:#fef2f2; }
.aiq-exp-header {
    font-weight:800; color:var(--clr-brand); font-size:.9rem; margin-bottom:10px;
    display:flex; align-items:center; gap:6px;
}
.aiq-exp-correct .aiq-exp-header { color:#166534; }
.aiq-exp-wrong   .aiq-exp-header { color:var(--color-error); }

/* Sonraki buton */
.aiq-next-btn {
    padding:15px; border-radius:14px; border:none;
    background:linear-gradient(135deg,#6366f1,#8b5cf6); color:white;
    font-family:inherit; font-size:.95rem; font-weight:700;
    cursor:pointer; box-shadow:0 4px 16px rgba(99,102,241,.3);
    transition:transform .15s; width:100%;
}
.aiq-next-btn:hover { transform:translateY(-1px); }
.aiq-next-btn:active { transform:scale(.97); }
.aiq-next-btn.hidden { display:none; }

/* Finish card */
.aiq-finish-card {
    flex-direction:column; align-items:center;
    background:white; border-radius:22px; padding:40px 28px;
    gap:20px; text-align:center;
    box-shadow:0 10px 40px rgba(99,102,241,.15);
    border:2px solid #e0e0f4;
    animation:aiqFinishIn .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes aiqFinishIn { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:none} }
.aiq-finish-emoji { font-size:4rem; }
.aiq-finish-title { font-size:1.8rem; font-weight:900; color:var(--clr-bg-deep); }
.aiq-finish-stats { display:flex; gap:24px; }
.aiq-finish-stat { text-align:center; }
.aiq-finish-num {
    display:block; font-size:2rem; font-weight:900; color:var(--clr-brand);
}
.aiq-finish-pct { color:#f59e0b; }
.aiq-finish-lbl { font-size:.72rem; font-weight:700; color:var(--clr-text-muted); text-transform:uppercase; letter-spacing:.5px; }

/* ── Vocabulary Test HUD başlık ── */

/* ═══════════════════════════════════════════════════════════════
   VOCABULARY TEST — Görsel Güzelleştirme
   Sadece renkler, gölgeler, border — layout'a dokunma
   ═══════════════════════════════════════════════════════════════ */

/* Sayfa arkaplanı */
#quiz-page.container {
    background: linear-gradient(150deg, #ede9ff 0%, #f9f4ff 60%, #fff0fb 100%) !important;
}

/* HUD — koyu mor */
.qz-hud {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 24px rgba(91,33,182,.35) !important;
}
.qz-exit-btn {
    background: rgba(255,255,255,.15) !important;
    border-color: rgba(255,255,255,.3) !important;
    color: white !important;
}
.qz-exit-btn:hover {
    background: rgba(255,255,255,.28) !important;
    border-color: rgba(255,255,255,.5) !important;
}
.qz-hud-title { color: rgba(255,255,255,.7) !important; }
.qz-progress-bar { background: rgba(255,255,255,.2) !important; }
.qz-prog-fill { background: linear-gradient(90deg, #fbbf24, #f59e0b) !important; }
.qz-prog-label { color: rgba(255,255,255,.8) !important; }
.qz-xp-badge {
    background: rgba(255,255,255,.15) !important;
    border: 1.5px solid rgba(255,255,255,.3) !important;
    box-shadow: none !important;
    font-size: .78rem !important;
}
.qz-hud-center { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* Meta row — ortalanmış */
.qz-meta-row {
    max-width: 640px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Quiz kartı — büyük shadow, border */
.qz-card {
    max-width: 640px !important;
    background: white !important;
    border-radius: 20px !important;
    border: 2px solid rgba(124,58,237,.14) !important;
    box-shadow: 0 16px 48px rgba(109,40,217,.13), 0 2px 8px rgba(0,0,0,.05) !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
}

/* Instruction — mor pill */
.qz-instruction {
    background: linear-gradient(135deg, #6d28d9, #9333ea) !important;
    color: white !important;
    text-align: center !important;
    padding: 10px 20px !important;
    border-radius: 18px 18px 0 0 !important;
    font-size: .65rem !important;
    letter-spacing: .8px !important;
    display: block !important;
}

/* Question area padding */
.qz-question-area { padding: 18px 20px 8px !important; }
#qz-answer-area { padding: 4px 18px 18px !important; }

/* Word hero — lavanta gradient */
.qz-word-hero {
    background: linear-gradient(135deg, #f3efff, #fbf5ff) !important;
    border: 2px solid #e4d4ff !important;
    border-radius: 16px !important;
    padding: 22px 20px 16px !important;
    box-shadow: 0 4px 16px rgba(124,58,237,.09) !important;
}
.qz-word-main { color: #5b21b6 !important; }

/* MCQ butonları */
.qz-opt {
    border: 2px solid #e8e2ff !important;
    background: #fafafe !important;
    border-radius: 14px !important;
    transition: all .18s cubic-bezier(.4,0,.2,1) !important;
}
.qz-opt:hover:not(.qz-disabled):not(.qz-correct):not(.qz-wrong) {
    border-color: #a78bfa !important;
    background: #f4f0ff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(124,58,237,.14) !important;
}
.qz-opt-letter {
    background: var(--clr-brand-light) !important;
    color: var(--clr-brand-dark) !important;
    border: 1.5px solid #c4b5fd !important;
    border-radius: 8px !important;
}

/* Info panel — kart altı */
#qz-info-panel {
    border-top: 1.5px solid rgba(124,58,237,.1) !important;
    background: linear-gradient(to bottom, #faf7ff, #f4efff) !important;
    border-radius: 0 0 18px 18px !important;
    padding: 9px 18px 12px !important;
}

/* Devam butonu */
.qz-next-btn {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(124,58,237,.35) !important;
    border: none !important;
    color: white !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    padding: 10px 22px !important;
    font-size: .92rem !important;
    transition: transform .15s !important;
}
.qz-next-btn:hover { transform: translateY(-1px) !important; }

/* Sonuç ekranı */
.qz-result {
    max-width: 640px !important;
    width: 100% !important;
    margin: 0 auto !important;
    background: white !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 60px rgba(109,40,217,.16) !important;
    border: 2px solid rgba(124,58,237,.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   AI VOCABULARY TEST — Layout Fix + Görsel İyileştirme
   ═══════════════════════════════════════════════════════════════ */

/* Body: scroll, flex kolon, ortalanmış — override gereksiz, orijinal düzeltildi */

/* İstatistik kartları */
.aiq-stats-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin-bottom: 0 !important;
}
.aiq-stat-card {
    background: white !important;
    border-radius: 18px !important;
    padding: 18px 12px !important;
    border: 2px solid #e8e4ff !important;
    box-shadow: 0 6px 22px rgba(99,102,241,.09) !important;
    transition: transform .2s !important;
    cursor: default !important;
}
.aiq-stat-card:hover { transform: translateY(-3px) !important; }
.aiq-stat-num { font-size: 2.2rem !important; line-height: 1 !important; }
.aiq-stat-lbl {
    font-size: .65rem !important;
    font-weight: 800 !important;
    color: var(--clr-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    margin-top: 5px !important;
}

/* İki kolon — kart düzeni */
.aiq-two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--gap-loose) !important;
}
@media (max-width: 640px) {
    .aiq-two-col { grid-template-columns: 1fr !important; }
}

/* Kart ortak */
.aiq-card {
    background: white !important;
    border-radius: 18px !important;
    padding: 20px !important;
    border: 2px solid #e8e4ff !important;
    box-shadow: 0 6px 22px rgba(99,102,241,.07) !important;
}

/* Section label */
.aiq-section-label {
    font-size: .62rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .8px !important;
    color: var(--clr-text-muted) !important;
    padding-bottom: 10px !important;
    border-bottom: 1.5px solid var(--clr-brand-light) !important;
    margin-bottom: var(--space-3) !important;
}

/* Liste butonları */
.aiq-list-btn {
    border: 2px solid #f0ecff !important;
    background: #fafafe !important;
    border-radius: 10px !important;
    transition: all .18s !important;
}
.aiq-list-btn.active {
    background: linear-gradient(135deg, #eef2ff, #ede9fe) !important;
    border-color: #818cf8 !important;
    box-shadow: 0 4px 14px rgba(99,102,241,.18) !important;
}
.aiq-list-btn:hover:not(.active) { border-color: #a5b4fc !important; background: #f0ecff !important; }
.aiq-list-btn.active .aiq-list-name { color: var(--clr-brand) !important; font-weight: 800 !important; }

/* Chip'ler */
.aiq-chip {
    transition: all .15s !important;
}
.aiq-chip.active {
    background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    border-color: var(--clr-brand) !important;
    box-shadow: 0 3px 10px rgba(99,102,241,.3) !important;
}
.aiq-chip:hover:not(.active) { border-color: #a5b4fc !important; color: var(--clr-brand) !important; }

/* Başlat butonu */
.aiq-start-btn {
    border-radius: 16px !important;
    box-shadow: 0 8px 28px rgba(99,102,241,.35) !important;
    font-size: 1.05rem !important;
    transition: all .18s !important;
}
.aiq-start-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 36px rgba(99,102,241,.45) !important;
}

/* ── QUIZ ALANI ── */

/* Top bar */
.aiq-q-topbar {
    background: white !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    box-shadow: 0 4px 18px rgba(99,102,241,.09) !important;
    border: 2px solid #e4e0ff !important;
}

/* Soru kartı */
.aiq-q-card {
    background: white !important;
    border-radius: 22px !important;
    padding: 28px 26px !important;
    box-shadow: 0 14px 50px rgba(99,102,241,.14), 0 2px 8px rgba(0,0,0,.04) !important;
    border: 2px solid rgba(99,102,241,.18) !important;
    position: relative !important;
    overflow: hidden !important;
}
.aiq-q-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important;
    background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899) !important;
}
.aiq-q-text {
    font-size: 1.05rem !important;
    line-height: 1.85 !important;
    color: var(--clr-bg-deep) !important;
    font-weight: 600 !important;
}

/* Şıklar */
.aiq-opt {
    padding: 14px 18px !important;
    border-radius: 16px !important;
    border: 2px solid #e4e0ff !important;
    background: #fafafe !important;
    font-size: .95rem !important;
    transition: all .18s !important;
}
.aiq-opt:hover:not(:disabled):not(.aiq-opt-correct):not(.aiq-opt-wrong) {
    border-color: #a5b4fc !important;
    background: #f0ecff !important;
    transform: translateX(5px) !important;
    box-shadow: 0 4px 16px rgba(99,102,241,.15) !important;
}
.aiq-opt-letter {
    width: 32px !important; height: 32px !important;
    border-radius: 10px !important;
    font-size: .8rem !important; font-weight: 900 !important;
}

/* Açıklama */
.aiq-explanation {
    border-radius: 16px !important;
    padding: 18px 20px !important;
    font-size: .9rem !important;
    line-height: 1.85 !important;
}
.aiq-exp-correct {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
    border: none !important;
    border-left: 5px solid var(--clr-success) !important;
    box-shadow: 0 4px 14px rgba(34,197,94,.1) !important;
}
.aiq-exp-wrong {
    background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
    border: none !important;
    border-left: 5px solid #ef4444 !important;
    box-shadow: 0 4px 14px rgba(239,68,68,.1) !important;
}
.aiq-exp-header {
    font-weight: 900 !important;
    font-size: .88rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
}
.aiq-exp-correct .aiq-exp-header { color: #15803d !important; }
.aiq-exp-wrong   .aiq-exp-header { color: var(--color-error) !important; }

/* Sonraki buton */
.aiq-next-btn {
    padding: 15px !important;
    border-radius: 16px !important;
    font-size: .98rem !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 28px rgba(99,102,241,.35) !important;
    transition: all .18s !important;
}
.aiq-next-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 36px rgba(99,102,241,.4) !important;
}

/* Finish kartı */
.aiq-finish-card {
    border-radius: 24px !important;
    box-shadow: 0 20px 64px rgba(99,102,241,.18) !important;
    border: 2px solid rgba(99,102,241,.2) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 44px 36px !important;
}
.aiq-finish-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; height: 5px !important;
    background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899) !important;
}