body {
  font-family: Arial, Helvetica, sans-serif;
}

/* ================================================================
   QuizApp — style.css   (tek dosya: base + landing + quiz + admin)
   Modern minimal · indigo/violet
   ================================================================ */
:root {
  --primary:#6366f1; --primary-dark:#4f46e5;
  --ink:#0f1222; --ink2:#454b5f; --muted:#8b90a3;
  --bg:#f6f7fb; --card:#ffffff; --line:#e6e8f0;
  --success:#10b981; --danger:#ef4444; --warning:#f59e0b;
  --radius:14px; --radius-lg:22px; --radius-sm:9px;
  --shadow-sm:0 1px 3px rgba(16,24,40,.06);
  --shadow:0 10px 30px rgba(16,24,40,.08);
  --shadow-lg:0 24px 60px rgba(16,24,40,.14);
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  /* qx paleti (quiz motoru + duraklat katmanı body'de olduğu için global) */
  --qx-ink:#0f1222; --qx-ink2:#454b5f; --qx-muted:#8b90a3;
  --qx-a1:#6366f1; --qx-a2:#8b5cf6; --qx-a3:#06b6d4;
  --qx-safe:#10b981; --qx-warn:#f59e0b; --qx-danger:#ef4444; --qx-line:#e6e8f0;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--ink2); line-height:1.6; min-height:100vh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; }
a { color:var(--primary); text-decoration:none; transition:.2s; }
img { max-width:100%; display:block; }
ul,ol { list-style:none; }
h1,h2,h3,h4 { color:var(--ink); line-height:1.15; letter-spacing:-.02em; }
.container { width:100%; max-width:1120px; margin:0 auto; padding:0 22px; }
.site-main { flex:1 0 auto; }

/* ── Header ─────────────────────────────────────── */
.site-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.site-header .container { display:flex; align-items:center; justify-content:space-between; height:66px; }
.logo { display:flex; align-items:center; gap:11px; }
.logo-icon { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff; font-size:18px; background:linear-gradient(135deg,var(--qx-a1),var(--qx-a2)); box-shadow:0 6px 16px rgba(99,102,241,.35); }
.logo-text { display:flex; flex-direction:column; line-height:1.1; }
.logo-main { font-weight:800; font-size:16px; color:var(--ink); letter-spacing:-.02em; }
.logo-sub { font-size:11px; color:var(--muted); font-weight:500; }
.main-nav { display:flex; align-items:center; gap:6px; }
.nav-link { padding:9px 15px; border-radius:10px; font-weight:600; font-size:14px; color:var(--ink2); }
.nav-link:hover { background:#eef0f6; color:var(--ink); }
.nav-link.active { color:var(--primary); }
.nav-cta { background:linear-gradient(135deg,var(--qx-a1),var(--qx-a2)); color:#fff !important; box-shadow:0 6px 16px rgba(99,102,241,.3); }
.nav-cta:hover { background:linear-gradient(135deg,var(--qx-a1),var(--qx-a2)); filter:brightness(1.05); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span { width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── Footer ─────────────────────────────────────── */
.site-footer { flex-shrink:0; background:#fff; border-top:1px solid var(--line); margin-top:40px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1.6fr; gap:32px; padding:36px 0 26px; }
.footer-brand p { font-size:13.5px; color:var(--muted); margin-top:12px; max-width:280px; line-height:1.6; }
.logo--footer { gap:9px; }
.logo--footer .logo-icon { width:32px; height:32px; font-size:15px; }
.footer-col h4 { font-size:14px; color:var(--ink); margin-bottom:12px; }
.footer-nav { display:flex; flex-direction:column; gap:9px; }
.footer-nav a { color:var(--ink2); font-size:14px; font-weight:500; }
.footer-nav a:hover { color:var(--primary); }
.footer-notlar p { font-size:13px; color:var(--muted); line-height:1.65; margin-bottom:10px; }
.footer-notlar-link { font-size:13.5px; font-weight:600; color:var(--primary); }
.footer-notlar-link:hover { text-decoration:underline; }
.footer-bottom { padding:16px 0; border-top:1px solid var(--line); font-size:13px; color:var(--muted); text-align:center; }

/* ── qx butonlar ────────────────────────────────── */
.qx-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 26px; border-radius:14px; border:none; cursor:pointer; font:inherit; font-weight:600; font-size:15px; text-decoration:none; transition:transform .18s ease, box-shadow .22s ease, background .2s; }
.qx-btn-primary { background:linear-gradient(135deg,var(--qx-a1),var(--qx-a2)); color:#fff; box-shadow:0 10px 24px rgba(99,102,241,.32); }
.qx-btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(99,102,241,.44); color:#fff; }
.qx-btn-ghost { background:rgba(255,255,255,.75); color:var(--ink); border:1.5px solid var(--line); }
.qx-btn-ghost:hover { background:#fff; transform:translateY(-2px); color:var(--ink); }
.qx-btn-block { width:100%; }
.qx-btn-lg { padding:16px 34px; font-size:16px; border-radius:16px; }
.qx-btn-sm { padding:10px 16px; font-size:13px; border-radius:11px; }

/* ── qx canvas + dinamik arka plan ──────────────── */
.qx { position:relative; min-height:70vh; background:var(--bg); overflow:hidden; }
.qx > *:not(.qx-bg) { position:relative; z-index:1; }
.qx-bg { position:absolute; inset:0; z-index:0; pointer-events:none; transition:background .9s ease; }
.qx-bg--calm { background:
  radial-gradient(1000px 520px at 50% -12%, rgba(99,102,241,.10), transparent 66%),
  radial-gradient(760px 420px at 92% 108%, rgba(139,92,246,.08), transparent 70%); }

/* ── Hero ───────────────────────────────────────── */
.qx-hero { padding:80px 0 44px; text-align:center; }
.qx-hero-inner { max-width:840px; margin:0 auto; }
.qx-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:rgba(99,102,241,.10); color:var(--qx-a1); font-weight:600; font-size:13px; margin-bottom:26px; animation:qxUp .6s ease both; }
.qx-dot { width:8px; height:8px; border-radius:50%; background:var(--qx-safe); animation:qxPulse 2s infinite; }
.qx-hero-title { font-weight:800; font-size:clamp(40px,7vw,70px); line-height:1.02; letter-spacing:-.03em; color:var(--ink); margin-bottom:22px; animation:qxUp .6s .04s ease both; }
.qx-hero-title span { background:linear-gradient(135deg,var(--qx-a1),var(--qx-a2) 55%,var(--qx-a3)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.qx-hero-sub { font-size:clamp(16px,2.1vw,20px); color:var(--ink2); max-width:620px; margin:0 auto 34px; line-height:1.6; animation:qxUp .6s .08s ease both; }
.qx-hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:54px; animation:qxUp .6s .12s ease both; }
.qx-hero-stats { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; animation:qxUp .6s .16s ease both; }
.qx-stat { background:rgba(255,255,255,.72); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.9); border-radius:18px; padding:16px 26px; min-width:118px; box-shadow:var(--shadow-sm); }
.qx-stat b { display:block; font-size:28px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.qx-stat span { font-size:12.5px; color:var(--muted); font-weight:500; }

/* ── Bölüm başlığı ──────────────────────────────── */
.qx-sec-head { text-align:center; margin-bottom:44px; }
.qx-eyebrow { display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13px; color:var(--qx-a1); margin-bottom:12px; }
.qx-sec-head h2 { font-weight:800; font-size:clamp(26px,4vw,40px); letter-spacing:-.025em; }

/* ── Özellikler ─────────────────────────────────── */
.qx-features { padding:56px 0; }
.qx-feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.qx-feature { background:rgba(255,255,255,.72); backdrop-filter:blur(10px); border:1px solid rgba(230,232,240,.9); border-radius:22px; padding:28px 24px; transition:transform .2s ease, box-shadow .25s ease; }
.qx-feature:hover { transform:translateY(-6px); box-shadow:0 18px 42px rgba(16,24,40,.10); }
.qx-feature-ic { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; font-size:22px; color:#fff; background:var(--c,var(--qx-a1)); margin-bottom:18px; }
.qx-feature h3 { font-weight:700; font-size:17px; margin-bottom:8px; }
.qx-feature p { font-size:14px; color:var(--ink2); line-height:1.6; }

/* ── Nasıl çalışır ──────────────────────────────── */
.qx-how { padding:56px 0; }
.qx-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.qx-step { background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px 26px; position:relative; }
.qx-step-no { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--qx-a1),var(--qx-a2)); color:#fff; font-weight:800; font-size:17px; margin-bottom:16px; }
.qx-step h3 { font-size:18px; font-weight:700; margin-bottom:8px; }
.qx-step p { font-size:14px; color:var(--ink2); }

/* ── CTA bandı ──────────────────────────────────── */
.qx-cta { padding:20px 0 76px; }
.qx-cta-card { text-align:center; background:linear-gradient(135deg,var(--qx-a1),var(--qx-a2)); color:#fff; border-radius:28px; padding:56px 30px; box-shadow:0 24px 60px rgba(99,102,241,.34); }
.qx-cta-card h2 { color:#fff; font-size:clamp(26px,4vw,38px); font-weight:800; margin-bottom:10px; }
.qx-cta-card p { opacity:.9; margin-bottom:26px; font-size:16px; }
.qx-cta-card .qx-btn-primary { background:#fff; color:var(--qx-a1); box-shadow:0 12px 30px rgba(0,0,0,.2); }
.qx-cta-card .qx-btn-primary:hover { color:var(--qx-a1); }

/* ── Kurulum kartı (app) ────────────────────────── */
.qx-setup { padding:44px 0 80px; }
.qx-app-head { text-align:center; margin-bottom:28px; }
.qx-app-head h1 { font-size:clamp(28px,5vw,44px); font-weight:800; margin:6px 0 8px; }
.qx-app-head p { color:var(--ink2); }
.qx-setup-card { max-width:720px; margin:0 auto; background:#fff; border:1px solid #eceef4; border-radius:28px; padding:38px; box-shadow:0 20px 60px rgba(16,24,40,.08); }
.qx-form { display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.qx-field { display:flex; flex-direction:column; gap:8px; }
.qx-field > label { font-weight:600; font-size:13px; color:var(--ink2); display:flex; align-items:center; gap:7px; }
.qx-hint { color:var(--muted); font-weight:500; }
.qx-select { position:relative; }
.qx-select select { appearance:none; -webkit-appearance:none; width:100%; padding:14px 44px 14px 16px; border-radius:14px; border:1.5px solid var(--line); background:#fff; font:inherit; font-size:15px; color:var(--ink); cursor:pointer; transition:.2s; }
.qx-select select:focus { outline:none; border-color:var(--qx-a1); box-shadow:0 0 0 4px rgba(99,102,241,.14); }
.qx-select i { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; font-size:12px; }
.qx-seg { display:inline-flex; background:#eef0f6; border-radius:14px; padding:4px; gap:4px; }
.qx-seg input { position:absolute; opacity:0; pointer-events:none; }
.qx-seg label { flex:1; text-align:center; padding:11px 18px; border-radius:10px; font-weight:600; font-size:14px; color:var(--muted); cursor:pointer; transition:.2s; }
.qx-seg input:checked + label { background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(16,24,40,.10); }
.qx-form .qx-btn-block { grid-column:1 / -1; margin-top:6px; }

/* ── Runner ─────────────────────────────────────── */
.quiz-container { max-width:760px; margin:0 auto; padding:44px 0 60px; }
.quiz-progress { background:rgba(255,255,255,.85); backdrop-filter:blur(8px); border:1px solid #eceef4; box-shadow:var(--shadow-sm); border-radius:var(--radius-lg); padding:16px 22px; margin-bottom:22px; display:flex; align-items:center; gap:16px; }
.progress-bar-wrap { flex:1; background:var(--line); border-radius:20px; height:8px; overflow:hidden; }
.progress-bar { height:100%; background:linear-gradient(90deg,var(--qx-a1),var(--qx-a2)); border-radius:20px; transition:width .4s ease; }
.progress-text { font-size:13px; font-weight:700; color:var(--ink2); white-space:nowrap; }
.quiz-controls { display:flex; align-items:center; gap:8px; }
.quiz-timer { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:20px; padding:5px 13px; font-variant-numeric:tabular-nums; }
.quiz-timer.az { color:var(--danger); border-color:var(--danger); background:#fff5f5; animation:qxPulse2 1s ease-in-out infinite; }
.quiz-pause { width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink2); cursor:pointer; display:grid; place-items:center; font-size:13px; transition:.18s; }
.quiz-pause:hover { background:var(--qx-a1); color:#fff; border-color:var(--qx-a1); }

.quiz-card { background:#fff; border:1px solid #eceef4; border-radius:28px; box-shadow:0 20px 50px rgba(16,24,40,.08); padding:38px; }
.quiz-meta { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.quiz-chip { font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; background:#eef0f6; color:var(--ink2); text-transform:capitalize; }
.quiz-chip--kolay { background:rgba(16,185,129,.12); color:#0f9d6e; }
.quiz-chip--orta  { background:rgba(245,158,11,.16); color:#b45309; }
.quiz-chip--zor   { background:rgba(239,68,68,.12); color:#dc2626; }
.quiz-chip--alt   { background:rgba(99,102,241,.12); color:#4f46e5; }
.quiz-soru { font-weight:700; font-size:19px; color:var(--ink); line-height:1.5; margin-bottom:26px; }
.secenekler { display:flex; flex-direction:column; gap:10px; }
.secenek { display:flex; align-items:center; gap:12px; padding:15px 18px; border-radius:16px; border:1.5px solid var(--line); background:#fff; cursor:pointer; font-size:15px; font-family:inherit; color:var(--ink2); transition:.18s; text-align:left; }
.secenek:hover:not(.disabled) { border-color:var(--qx-a1); background:#f5f6ff; transform:translateX(3px); }
.secenek.selected { border-color:var(--qx-a1); background:#eef0ff; box-shadow:0 0 0 3px rgba(99,102,241,.14); }
.secenek.dogru { border-color:var(--success); background:#f0fdf9; color:#0f9d6e; }
.secenek.yanlis { border-color:var(--danger); background:#fff5f5; color:#dc2626; }
.secenek.disabled { cursor:default; }
.secenek-harf { width:28px; height:28px; flex-shrink:0; border-radius:9px; display:grid; place-items:center; font-size:12px; font-weight:700; background:#eef0f6; border:1px solid var(--line); transition:.18s; }
.secenek.selected .secenek-harf { background:var(--qx-a1); color:#fff; border-color:var(--qx-a1); }
.secenek.dogru .secenek-harf { background:var(--success); color:#fff; border-color:var(--success); }
.secenek.yanlis .secenek-harf { background:var(--danger); color:#fff; border-color:var(--danger); }
.quiz-aciklama { margin-top:18px; padding:14px 18px; border-radius:14px; background:#fffbeb; border:1px solid #f6e9a0; font-size:13px; color:#7a5c00; display:none; line-height:1.6; }
.quiz-aciklama.open { display:block; }
.quiz-aciklama strong { color:#5a4000; }
.quiz-actions { margin-top:24px; display:flex; justify-content:space-between; gap:10px; }

/* ── Sonuç ──────────────────────────────────────── */
.quiz-sonuc { max-width:520px; margin:44px auto 60px; text-align:center; background:#fff; border:1px solid #eceef4; border-radius:28px; box-shadow:0 20px 50px rgba(16,24,40,.08); padding:40px; }
.quiz-sonuc.has-detay { max-width:680px; }
.sure-doldu { background:#fff5f5; border:1px solid var(--danger); color:var(--danger); border-radius:12px; padding:10px 16px; font-size:13px; font-weight:600; margin-bottom:20px; }
.sonuc-daire { width:120px; height:120px; border-radius:50%; border:6px solid; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto 22px; }
.sonuc-daire.basarili { border-color:var(--success); color:var(--success); }
.sonuc-daire.orta { border-color:var(--warning); color:var(--warning); }
.sonuc-daire.zayif { border-color:var(--danger); color:var(--danger); }
.sonuc-puan { font-size:34px; font-weight:800; line-height:1; }
.sonuc-label { font-size:12px; font-weight:600; }
.quiz-sonuc h2 { font-weight:800; }
.sonuc-ozet { margin:12px 0 24px; color:var(--muted); }
.sonuc-butonlar { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:24px; }

.konu-analiz { text-align:left; margin:8px 0 4px; padding:20px; background:var(--bg); border-radius:16px; }
.konu-analiz h3, .quiz-review h3 { font-size:15px; color:var(--ink); margin:0 0 16px; display:flex; align-items:center; gap:8px; }
.analiz-satir { margin-bottom:14px; }
.analiz-satir:last-child { margin-bottom:0; }
.analiz-ust { display:flex; justify-content:space-between; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.analiz-bar-wrap { background:var(--line); border-radius:20px; height:8px; overflow:hidden; }
.analiz-bar { height:100%; border-radius:20px; transition:width .5s ease; }
.analiz-bar.basarili { background:var(--success); }
.analiz-bar.orta { background:var(--warning); }
.analiz-bar.zayif { background:var(--danger); }

.quiz-review { text-align:left; margin-top:20px; }
.review-satir { border:1px solid var(--line); border-left-width:4px; border-radius:14px; padding:12px 16px; margin-bottom:10px; }
.review-satir.dogru { border-left-color:var(--success); }
.review-satir.yanlis { border-left-color:var(--danger); }
.review-satir.bos { border-left-color:var(--muted); }
.review-baslik { font-size:14px; font-weight:600; color:var(--ink); line-height:1.5; }
.review-satir.dogru .review-baslik i { color:var(--success); }
.review-satir.yanlis .review-baslik i { color:var(--danger); }
.review-satir.bos .review-baslik i { color:var(--muted); }
.review-cevap { font-size:13px; color:var(--muted); margin-top:6px; }
.review-cevap b { color:var(--ink); }
.review-aciklama { font-size:12.5px; color:#7a5c00; background:#fffbeb; border-radius:8px; padding:8px 12px; margin-top:8px; line-height:1.5; }

/* ── Duraklat katmanı ───────────────────────────── */
.qx-pause { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:20px; background:rgba(15,16,32,.55); backdrop-filter:blur(10px); animation:qxFade .25s ease; }
.qx-pause-box { background:#fff; border-radius:26px; padding:44px 40px; text-align:center; max-width:360px; width:100%; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.qx-pause-box > i { font-size:52px; color:var(--qx-a1); margin-bottom:16px; }
.qx-pause-box h3 { font-weight:800; font-size:24px; margin-bottom:8px; }
.qx-pause-box p { color:var(--ink2); font-size:14px; margin-bottom:24px; }

/* ── Yükleniyor / boş ───────────────────────────── */
.qx-loading { text-align:center; padding:60px 20px; color:var(--muted); font-size:15px; }
.qx-empty { text-align:center; padding:56px 24px; background:#fff; border:1px solid #eceef4; border-radius:24px; max-width:520px; margin:44px auto; box-shadow:var(--shadow-sm); }
.qx-empty i { font-size:40px; color:var(--muted); margin-bottom:14px; }
.qx-empty h3 { font-weight:700; margin-bottom:6px; }
.qx-empty p { color:var(--muted); margin-bottom:18px; }

@keyframes qxPulse { 0%,100% { box-shadow:0 0 0 4px rgba(16,185,129,.20); } 50% { box-shadow:0 0 0 8px rgba(16,185,129,.05); } }
@keyframes qxPulse2 { 50% { opacity:.55; } }
@keyframes qxFade { from { opacity:0; } to { opacity:1; } }
@keyframes qxUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* ── Blog ───────────────────────────────────────── */
.container--narrow { max-width:760px; }
.blog-wrap { padding:44px 0 70px; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.blog-card { display:flex; flex-direction:column; background:#fff; border:1px solid #eceef4; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .25s ease; }
.blog-card:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(16,24,40,.10); }
.blog-card-img { height:168px; background-size:cover; background-position:center; background-color:#eef0f6; }
.blog-card-img--ph { display:grid; place-items:center; color:#c3c8d6; font-size:34px; background:linear-gradient(135deg,#eef0f6,#e6e8f0); }
.blog-card-body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.blog-card-body h2 { font-size:18px; font-weight:700; color:var(--ink); line-height:1.35; margin-bottom:8px; }
.blog-card-body p { font-size:14px; color:var(--ink2); line-height:1.6; margin-bottom:16px; flex:1; }
.blog-card-meta { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--muted); }
.blog-card-more { color:var(--primary); font-weight:600; }

.blog-single { padding:40px 0 70px; }
.blog-back { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--ink2); margin-bottom:20px; }
.blog-back:hover { color:var(--primary); }
.blog-single-title { font-size:clamp(28px,5vw,42px); font-weight:800; line-height:1.15; margin-bottom:12px; }
.blog-single-meta { font-size:13.5px; color:var(--muted); margin-bottom:24px; }
.blog-single-cover { width:100%; border-radius:20px; margin-bottom:28px; border:1px solid var(--line); }
.blog-content { font-size:16.5px; line-height:1.8; color:#2c3140; }
.blog-content p { margin-bottom:18px; }
.blog-content h2 { font-size:24px; margin:32px 0 12px; }
.blog-content h3 { font-size:20px; margin:26px 0 10px; }
.blog-content ul, .blog-content ol { margin:0 0 18px 22px; }
.blog-content ul { list-style:disc; }
.blog-content ol { list-style:decimal; }
.blog-content li { margin-bottom:8px; }
.blog-content a { color:var(--primary); text-decoration:underline; }
.blog-content img { border-radius:14px; margin:20px 0; }
.blog-content blockquote { border-left:4px solid var(--qx-a1); padding:6px 16px; margin:0 0 18px; color:var(--ink2); background:#f6f7fb; border-radius:0 10px 10px 0; }
.blog-cta { margin-top:40px; text-align:center; background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.08)); border:1px solid var(--line); border-radius:22px; padding:34px 24px; }
.blog-cta h3 { font-size:22px; font-weight:800; margin-bottom:6px; }
.blog-cta p { color:var(--ink2); margin-bottom:20px; }

/* ================================================================
   ADMIN
   ================================================================ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:11px; border:none; cursor:pointer; font:inherit; font-weight:600; font-size:14px; text-decoration:none; transition:.18s; }
.btn-primary { background:linear-gradient(135deg,var(--qx-a1),var(--qx-a2)); color:#fff; box-shadow:0 6px 16px rgba(99,102,241,.28); }
.btn-primary:hover { filter:brightness(1.05); transform:translateY(-1px); color:#fff; }
.btn-secondary { background:#eef0f6; color:var(--ink); }
.btn-secondary:hover { background:#e2e5ee; color:var(--ink); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { filter:brightness(.95); color:#fff; }
.btn-sm { padding:8px 14px; font-size:13px; border-radius:9px; }

.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--ink2); margin-bottom:6px; }
.form-control { width:100%; padding:11px 14px; border:1.5px solid var(--line); border-radius:11px; font:inherit; font-size:14px; color:var(--ink); background:#fff; transition:.18s; }
.form-control:focus { outline:none; border-color:var(--qx-a1); box-shadow:0 0 0 4px rgba(99,102,241,.14); }
textarea.form-control { resize:vertical; }

.alert { padding:13px 16px; border-radius:11px; font-size:13.5px; margin-bottom:18px; display:flex; align-items:center; gap:9px; }
.alert-success { background:#e9fbf3; color:#0f7f5b; border:1px solid #a7f0d1; }
.alert-danger { background:#fef1f1; color:#b42323; border:1px solid #f7bcbc; }

.admin-body { display:block; background:#eef1f6; }
.admin-login { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#4f46e5,#7c3aed); }
.admin-login-card { background:#fff; border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,.3); padding:38px 34px; width:100%; max-width:400px; }
.admin-login-card .logo { justify-content:center; margin-bottom:24px; }

.admin-sidebar { position:fixed; top:0; left:0; width:250px; height:100vh; background:#fff; border-right:1px solid var(--line); overflow-y:auto; }
.admin-logo { padding:20px 22px; border-bottom:1px solid var(--line); }
.admin-menu { padding:14px 12px; }
.admin-menu-group { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:14px 12px 6px; }
.admin-menu-item { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px; color:var(--ink2); font-size:14px; font-weight:500; margin-bottom:2px; }
.admin-menu-item i { width:18px; text-align:center; color:var(--muted); }
.admin-menu-item:hover { background:#eef0f6; color:var(--ink); }
.admin-menu-item.active { background:linear-gradient(135deg,var(--qx-a1),var(--qx-a2)); color:#fff; }
.admin-menu-item.active i { color:#fff; }

.admin-main { margin-left:250px; min-height:100vh; }
.admin-topbar { display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); padding:16px 28px; position:sticky; top:0; z-index:10; }
.admin-topbar h1 { font-size:18px; display:flex; align-items:center; gap:10px; }
.admin-content { padding:28px; }

.admin-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.admin-stat-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; align-items:center; gap:16px; }
.admin-stat-icon { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; color:#fff; font-size:20px; }
.admin-stat-icon.blue { background:#6366f1; } .admin-stat-icon.gold { background:#f59e0b; }
.admin-stat-icon.red { background:#ef4444; } .admin-stat-icon.green { background:#10b981; }
.admin-stat-num { font-size:26px; font-weight:800; color:var(--ink); line-height:1; }
.admin-stat-lbl { font-size:13px; color:var(--muted); margin-top:3px; }

.admin-form-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; }
.admin-table-wrap { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:14px; }
.admin-table th { text-align:left; padding:13px 16px; background:#f7f8fb; color:var(--ink2); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.3px; border-bottom:1px solid var(--line); }
.admin-table td { padding:13px 16px; border-bottom:1px solid var(--line); color:var(--ink2); }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table tr:hover td { background:#fafbfd; }
.badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.badge-primary { background:rgba(99,102,241,.14); color:#4f46e5; }
.badge-success { background:rgba(16,185,129,.14); color:#0f9d6e; }
.badge-danger { background:rgba(239,68,68,.14); color:#dc2626; }
.badge-warning { background:rgba(245,158,11,.16); color:#b45309; }

/* ── Responsive ─────────────────────────────────── */
@media (max-width:860px) {
  .nav-toggle { display:flex; }
  .main-nav { position:absolute; top:66px; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; padding:12px 16px; gap:4px; display:none; box-shadow:var(--shadow); }
  .main-nav.open { display:flex; }
  .nav-cta { text-align:center; margin-top:6px; }
  .admin-sidebar { transform:translateX(-100%); transition:.25s; z-index:200; }
  .admin-main { margin-left:0; }
}
@media (max-width:760px) {
  .qx-hero { padding:54px 0 30px; }
  .qx-form { grid-template-columns:1fr; }
  .qx-feature-grid { grid-template-columns:1fr 1fr; }
  .qx-steps { grid-template-columns:1fr; }
  .qx-setup-card { padding:26px 20px; border-radius:22px; }
  .quiz-card { padding:26px 20px; }
}
@media (max-width:480px) {
  .qx-feature-grid { grid-template-columns:1fr; }
  .qx-stat { min-width:calc(50% - 8px); padding:14px; }
  .qx-hero-cta .qx-btn { width:100%; }
}
@media (max-width:680px) {
  .footer-grid { grid-template-columns:1fr; gap:24px; }
}
/* ===== KPSS Sayaç ===== */

.kpss-countdown-menu{
    position:relative;
    margin-right:15px;
}

.kpss-countdown-btn{
    background: linear-gradient(135deg,#4f46e5,#7c3aed);
    color:#fff;
    border:none;
    padding:10px 18px;
    border-radius:12px;
    cursor:pointer;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:8px;
    transition:.3s;
    box-shadow:0 8px 25px rgba(99,102,241,.35);
}

.kpss-countdown-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(99,102,241,.5);
}

.kpss-countdown-btn:hover{
    background:#6366f1;
}

.kpss-countdown-dropdown{
    position:absolute;
    top:58px;
    right:0;
    width:300px;
    background:#111827;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    display:none;
    overflow:hidden;
    z-index:9999;
    box-shadow:0 15px 45px rgba(0,0,0,.45);
}

.kpss-countdown-menu:hover .kpss-countdown-dropdown{
    display:block;
}

.kpss-count-item{
    padding:16px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.kpss-count-item:last-child{
    border:none;
}

.kpss-count-item strong{
    display:block;
    color:#fff;
    margin-bottom:6px;
    font-size:15px;
}

.kpss-count-item span{
    color:#8b5cf6;
    font-size:14px;
    font-weight:700;
}
#quizSetup {
  transition: opacity .2s ease;
}

.quiz-container {
  min-height: 420px;
}

.qx-loading {
  background: #fff;
  border: 1px solid #eceef4;
  border-radius: 24px;
  max-width: 520px;
  margin: 44px auto;
  box-shadow: var(--shadow-sm);
}
.gold{
background:linear-gradient(90deg,#fff7d6,#ffe27a);
font-weight:700;
}

.silver{
background:linear-gradient(90deg,#f4f4f4,#d9d9d9);
font-weight:700;
}

.bronze{
background:linear-gradient(90deg,#f7e3d2,#d59b6c);
font-weight:700;
}

.gold td,
.silver td,
.bronze td{
border-color:transparent;
}
.gold,
.gold:hover{
    background: linear-gradient(90deg,#fff7d6,#ffe27a) !important;
}

.silver,
.silver:hover{
    background: linear-gradient(90deg,#f5f5f5,#d9d9d9) !important;
}

.bronze,
.bronze:hover{
    background: linear-gradient(90deg,#f7e3d2,#d59b6c) !important;
}

.gold td,
.gold:hover td{
    background: transparent !important;
}

.silver td,
.silver:hover td{
    background: transparent !important;
}

.bronze td,
.bronze:hover td{
    background: transparent !important;
}
.leaderboard-save{
    margin-top:30px;
    padding:25px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#f8fafc;
}

.leaderboard-input{
    width:100%;
    max-width:500px;
    height:55px;
    padding:0 18px;
    font-size:18px;
    border:2px solid #d1d5db;
    border-radius:12px;
    margin:15px 0;
    transition:.2s;
}

.leaderboard-input:focus{
    border-color:#6366f1;
    outline:none;
    box-shadow:0 0 0 4px rgba(99,102,241,.15);
}

#saveScoreBtn{
    width:100%;
    max-width:500px;
    height:55px;
    font-size:17px;
    border-radius:12px;
}
/* Blog mini test - modern tasarım */
.blog-mini-test {
    margin-top: 40px;
    padding: 28px;
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.12), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.blog-mini-test-header {
    margin-bottom: 24px;
}

.blog-mini-test-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 1.55rem;
    line-height: 1.2;
    color: #111827;
}

.blog-mini-test-header h3 i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.28);
}

.blog-mini-test-header p {
    margin: 0;
    color: #667085;
    font-size: 0.98rem;
}

.mini-test-soru {
    margin-bottom: 20px;
    padding: 22px;
    border: 1px solid #e8eaf3;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mini-test-soru:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.28);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.mini-test-soru h4 {
    margin: 0 0 16px;
    color: #172033;
    font-size: 1.05rem;
    line-height: 1.55;
}

.mini-test-secenekler {
    display: grid;
    gap: 11px;
}

.mini-test-secenek {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 12px 14px;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.18s ease;
}

.mini-test-secenek:hover {
    border-color: #818cf8;
    background: #f7f7ff;
    transform: translateX(3px);
}

.mini-test-secenek input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mini-test-harf {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #f1f3f9;
    color: #4b5563;
    font-weight: 800;
    transition: all 0.18s ease;
}

.mini-test-metin {
    color: #344054;
    line-height: 1.45;
}

.mini-test-secenek:has(input:checked) {
    border-color: #6366f1;
    background: #f4f3ff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.mini-test-secenek:has(input:checked) .mini-test-harf {
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
}

.mini-test-secenek.dogru {
    border-color: #22c55e;
    background: #f0fdf4;
}

.mini-test-secenek.dogru .mini-test-harf {
    color: #ffffff;
    background: #22c55e;
}

.mini-test-secenek.yanlis {
    border-color: #ef4444;
    background: #fef2f2;
}

.mini-test-secenek.yanlis .mini-test-harf {
    color: #ffffff;
    background: #ef4444;
}

.mini-test-aciklama {
    margin-top: 12px;
    padding: 10px 13px;
    border-radius: 12px;
    background: #f8fafc;
    color: #475467;
    font-size: 0.92rem;
    font-weight: 600;
}

#miniTestKontrol {
    width: 100%;
    min-height: 52px;
    margin-top: 4px;
    border-radius: 14px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.22);
}

.mini-test-sonuc {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 16px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    color: #312e81;
    text-align: center;
    line-height: 1.6;
}

.mini-test-sonuc strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1.25rem;
}

@media (max-width: 640px) {
    .blog-mini-test {
        padding: 18px;
        border-radius: 18px;
    }

    .mini-test-soru {
        padding: 17px;
        border-radius: 15px;
    }

    .mini-test-secenek {
        align-items: flex-start;
        padding: 11px;
    }

    .mini-test-harf {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }
}
/* Tek soruluk mini test sistemi */
.mini-test-progress-area {
    margin-bottom: 22px;
}

.mini-test-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
    color: #667085;
    font-size: 0.9rem;
    font-weight: 700;
}

.mini-test-progress {
    width: 100%;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9eaf3;
}

.mini-test-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    transition: width 0.35s ease;
}

.mini-test-slides {
    min-height: 330px;
}

.mini-test-soru {
    animation: miniTestGiris 0.3s ease;
}

.mini-test-soru[hidden] {
    display: none !important;
}

@keyframes miniTestGiris {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mini-test-buttons {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.mini-test-buttons .qx-btn {
    min-width: 130px;
}

#miniTestDevam {
    margin-left: auto;
}

.mini-test-uyari {
    margin-top: 13px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.9rem;
    font-weight: 700;
}

.mini-test-score-icon {
    margin-bottom: 8px;
    font-size: 3rem;
}

.mini-test-sonuc p {
    margin: 8px 0 18px;
}

.mini-test-tekrar {
    margin-top: 8px;
}

@media (max-width: 640px) {
    .mini-test-slides {
        min-height: 390px;
    }

    .mini-test-buttons {
        flex-direction: column-reverse;
    }

    .mini-test-buttons .qx-btn {
        width: 100%;
    }

    #miniTestDevam {
        margin-left: 0;
    }
}
.correct-answer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.correct-answer-option {
    position: relative;
    cursor: pointer;
}

.correct-answer-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.correct-answer-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid #dfe3ec;
    border-radius: 13px;
    background: #ffffff;
    color: #475467;
    font-weight: 800;
    transition: all 0.18s ease;
}

.correct-answer-option:hover span {
    border-color: #818cf8;
    background: #f7f7ff;
}

.correct-answer-option input:checked + span {
    border-color: #22c55e;
    background: #f0fdf4;
    color: #15803d;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

@media (max-width: 560px) {
    .correct-answer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Mini test sonuç ekranı soru alanının içinde görünsün */
.mini-test-slides[hidden],
.mini-test-progress-area[hidden],
.mini-test-buttons[hidden],
.mini-test-sonuc[hidden] {
    display: none !important;
}

.blog-mini-test.sonuc-modu .mini-test-sonuc {
    display: flex;
    min-height: 330px;
    margin-top: 0;
    padding: 28px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.blog-mini-test.sonuc-modu .mini-test-sonuc strong {
    font-size: 1.35rem;
}

.blog-mini-test.sonuc-modu .mini-test-score-icon {
    margin-bottom: 10px;
    font-size: 3.5rem;
}

.blog-mini-test.sonuc-modu .mini-test-sonuc p {
    margin: 8px 0 18px;
}

@media (max-width: 640px) {
    .blog-mini-test.sonuc-modu .mini-test-sonuc {
        min-height: 300px;
        padding: 20px;
    }
}
/* Header yeni logo */
.logo-image-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.header-logo-image {
    display: block;
    width: auto;
    height: 58px;
    max-width: 265px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .header-logo-image {
        height: 45px;
        max-width: 205px;
    }
}
/* Mobil quiz ekranını sıkıştır */
@media (max-width: 768px) {
    .qx-setup--app {
        padding-top: 34px;
        padding-bottom: 24px;
    }

    .qx-app-head {
        margin-bottom: 20px;
    }

    .qx-app-head .qx-eyebrow {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .qx-app-head h1 {
        font-size: 38px;
        line-height: 1.1;
        margin-bottom: 12px;
    }

    .qx-app-head p {
        font-size: 17px;
        line-height: 1.45;
        margin: 0 auto;
        max-width: 320px;
    }

    .qx-setup-card {
        margin-top: 22px;
        padding: 24px 20px;
    }

    .qx-form {
        gap: 18px;
    }

    .qx-field label {
        margin-bottom: 8px;
    }
}
/* QUIZ MOBİL KOMPAKT TASARIM */
@media screen and (max-width: 768px) {

    body .qx .qx-setup.qx-setup--app {
        padding-top: 14px !important;
        padding-bottom: 20px !important;
    }

    body .qx .qx-app-head {
        margin: 0 0 12px !important;
    }

    body .qx .qx-app-head .qx-eyebrow {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin: 0 0 6px !important;
    }

    body .qx .qx-app-head h1 {
        font-size: 28px !important;
        line-height: 1.05 !important;
        margin: 0 0 6px !important;
    }

    body .qx .qx-app-head p {
        font-size: 14px !important;
        line-height: 1.3 !important;
        max-width: 310px !important;
        margin: 0 auto !important;
    }

    body .qx .qx-setup-card {
        margin-top: 12px !important;
        padding: 16px 14px !important;
        border-radius: 22px !important;
    }

    body .qx .qx-form {
        gap: 12px !important;
    }

    body .qx .qx-field {
        margin: 0 !important;
        padding: 0 !important;
    }

    body .qx .qx-field > label {
        font-size: 14px !important;
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
    }

    body .qx .qx-select select {
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 42px 0 14px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
    }

    body .qx .qx-seg {
        height: 48px !important;
        min-height: 48px !important;
        padding: 4px !important;
        border-radius: 14px !important;
    }

    body .qx .qx-seg label {
        min-height: 40px !important;
        padding: 9px 8px !important;
        font-size: 15px !important;
    }

    body .qx .qx-btn-block {
        min-height: 48px !important;
        padding: 12px 16px !important;
        margin-top: 0 !important;
        font-size: 16px !important;
    }
}
/* QUIZ MOBİL ORTA BOY */
@media screen and (max-width: 768px) {
    body .qx .qx-setup.qx-setup--app {
        padding: 5px 0 12px !important;
    }

    body .qx .qx-app-head {
        margin: 0 0 7px !important;
    }

    body .qx .qx-app-head .qx-eyebrow {
    font-size: 12px !important;
}

body .qx .qx-app-head h1 {
    font-size: 26px !important;
}

body .qx .qx-app-head p {
    font-size: 13px !important;
    line-height: 1.25 !important;
}

body .qx .qx-setup-card {
    padding: 12px 14px !important;
}

body .qx .qx-form {
    gap: 8px !important;
}

body .qx .qx-field > label {
    font-size: 13px !important;
}

body .qx .qx-select select {
    height: 43px !important;
    min-height: 43px !important;
    font-size: 14px !important;
}

body .qx .qx-seg {
    height: 43px !important;
    min-height: 43px !important;
}

body .qx .qx-seg label {
    min-height: 35px !important;
    font-size: 13px !important;
}

body .qx .qx-btn-block {
    min-height: 44px !important;
    font-size: 15px !important;
}
/* MOBİL SORU GÖRSELİNİ KORU */
@media screen and (max-width: 768px) {
    body .qx,
    body .qx > .container,
    body .qx #quizContainer,
    body .qx .quiz-card {
        overflow: visible !important;
    }

    body .qx .quiz-card img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        transform: none !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 430px !important;
        margin: 16px auto !important;
    }

    body .qx .quiz-progress {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
}
/* BİLGİSAYARDA SORU SAYACINI KÜÇÜLT */
@media screen and (min-width: 769px) {
    body .qx .quiz-progress {
        min-height: 0 !important;
        padding: 10px 18px !important;
        margin-top: 10px !important;
        margin-bottom: 14px !important;
        gap: 12px !important;
        border-radius: 18px !important;
        align-items: center !important;
    }

    body .qx .progress-bar-wrap {
        height: 7px !important;
        min-height: 7px !important;
        border-radius: 10px !important;
    }

    body .qx .progress-bar {
        height: 7px !important;
        border-radius: 10px !important;
    }

    body .qx .progress-text {
        min-width: 42px !important;
        font-size: 14px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body .qx .quiz-controls {
        gap: 6px !important;
    }

    body .qx .quiz-card {
        margin-top: 0 !important;
    }
}