/* ============================================
   JUNIOR LAB – PRACTICE QUIZ  v1
   Rose Luxe Elite Design System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --navy:       #1A0A14;
  --navy-light: #2B1320;
  --navy-mid:   #3D1B2E;
  --gold:       #C9956A;
  --gold-light: #E8B89A;
  --gold-pale:  #F9EDE5;
  --rose:       #D4A5A5;
  --rose-deep:  #B07B7B;
  --cream:      #FBF7F5;
  --white:      #FFFFFF;
  --gray-100:   #F4F0EF;
  --gray-200:   #E2D8D6;
  --gray-400:   #A8928E;
  --gray-600:   #6B5555;
  --success:    #6DBF9E;
  --success-bg: rgba(109,191,158,.12);
  --danger:     #E07070;
  --danger-bg:  rgba(224,112,112,.1);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Inter', sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;

  --shadow-gold: 0 4px 28px rgba(201,149,106,0.22);
  --shadow-deep: 0 8px 48px rgba(26,10,20,0.28);
  --shadow-card: 0 2px 20px rgba(26,10,20,0.08);
  --shadow-soft: 0 4px 16px rgba(26,10,20,0.06);
  --transition:  all 0.3s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family:var(--font-sans); background:var(--cream); color:var(--navy); min-height:100vh; overflow-x:hidden; }
.hidden { display:none !important; }
a { text-decoration:none; }

/* ── SPLASH ── */
.splash {
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(145deg,#0E0308 0%,#1A0A14 50%,#2B1320 100%);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.splash-orbs { position:absolute; inset:0; pointer-events:none; }
.orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:.15; animation:orbFloat 8s ease-in-out infinite; }
.orb-1 { width:300px;height:300px;background:#C9956A;top:-80px;right:-60px; }
.orb-2 { width:200px;height:200px;background:#9B4F7A;bottom:-40px;left:-40px;animation-delay:3s; }
.orb-3 { width:150px;height:150px;background:#D4A5A5;top:50%;left:40%;animation-delay:5s; }
@keyframes orbFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-20px) scale(1.05)} }

.splash-inner { text-align:center; position:relative; z-index:1; animation:splashIn 1s cubic-bezier(.4,0,.2,1) both; }
@keyframes splashIn { from{opacity:0;transform:scale(.92) translateY(20px)} to{opacity:1;transform:none} }

.splash-brand { display:flex;align-items:baseline;justify-content:center;gap:4px;margin-bottom:6px; }
.splash-brand .logo-junior { font-family:var(--font-display);font-size:clamp(3rem,8vw,5rem);font-weight:400;color:var(--white); }
.splash-brand .logo-lab    { font-family:var(--font-display);font-size:clamp(3rem,8vw,5rem);font-weight:600;color:var(--gold); }
.splash-divider { width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:1rem auto; }
.splash-tagline { font-family:var(--font-serif);font-size:clamp(1.1rem,2.5vw,1.6rem);color:var(--rose);font-style:italic;margin-bottom:.3rem; }
.splash-sub     { font-size:.75rem;color:rgba(255,255,255,.35);letter-spacing:.3em;text-transform:uppercase; }
.splash-loader  { width:160px;height:1.5px;background:rgba(255,255,255,.08);margin:2rem auto 0;border-radius:2px;overflow:hidden; }
.loader-bar     { height:100%;background:linear-gradient(90deg,var(--rose-deep),var(--gold),var(--gold-light));animation:loadBar 2s ease-in-out forwards; }
@keyframes loadBar { from{width:0} to{width:100%} }

/* ── HEADER ── */
.app { min-height:100vh; display:flex; flex-direction:column; }
.app-header {
  background:var(--navy); position:sticky; top:0; z-index:100;
  border-bottom:1px solid rgba(201,149,106,.12);
  box-shadow:0 2px 24px rgba(26,10,20,.4);
}
.header-inner { max-width:1200px;margin:0 auto;padding:0 1.75rem;height:66px;display:flex;align-items:center;gap:1.5rem; }
.header-logo { display:flex;align-items:baseline;gap:1px;cursor:pointer;user-select:none;text-decoration:none; }
.header-logo .logo-junior { font-family:var(--font-display);font-size:1.55rem;color:var(--white);font-weight:400; }
.header-logo .logo-lab    { font-family:var(--font-display);font-size:1.55rem;color:var(--gold);font-weight:600;margin-right:10px; }
.header-logo .logo-travel { font-size:.66rem;font-weight:500;color:rgba(201,149,106,.5);letter-spacing:.25em;text-transform:uppercase;align-self:center; }

.header-nav { display:flex;align-items:center;gap:.4rem;flex:1; }
.nav-link {
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:50px;
  font-size:.75rem;font-weight:600;letter-spacing:.03em;
  color:rgba(255,255,255,.45);border:1px solid transparent;
  transition:var(--transition);white-space:nowrap;
}
.nav-link:hover  { color:var(--gold-light);background:rgba(201,149,106,.08); }
.nav-link.active { color:var(--gold);background:rgba(201,149,106,.12);border-color:rgba(201,149,106,.25); }

.header-right { display:flex;align-items:center;gap:.75rem;margin-left:auto; }
.progress-pill { display:flex;align-items:center;gap:6px;background:rgba(201,149,106,.1);border:1px solid rgba(201,149,106,.25);padding:6px 14px;border-radius:50px;font-size:.82rem;color:var(--gold-light);font-weight:500; }
.progress-pill i { color:var(--gold);font-size:.72rem; }
.streak-badge { display:flex;align-items:center;gap:5px;background:rgba(224,112,112,.12);border:1px solid rgba(224,112,112,.25);padding:6px 12px;border-radius:50px;font-size:.78rem;color:#E07070;font-weight:700; }
.streak-badge i { font-size:.72rem; }

/* ── VIEWS ── */
.view { flex:1;max-width:1200px;margin:0 auto;width:100%;padding:2.5rem 1.75rem 5rem; }
.view.active { display:block; }

/* ── HERO ── */
.hero-section {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:2.5rem;padding:3rem 3.5rem;
  background:linear-gradient(135deg,var(--navy) 0%,#2B1320 60%,#3D1B2E 100%);
  border-radius:var(--radius-xl);position:relative;overflow:hidden;
}
.hero-section::before {
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(ellipse 80% 60% at 90% 50%,rgba(201,149,106,.08) 0%,transparent 60%);
}
.hero-badge { display:inline-flex;align-items:center;gap:6px;background:rgba(201,149,106,.12);border:1px solid rgba(201,149,106,.25);color:var(--gold);font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:5px 12px;border-radius:50px;margin-bottom:1.1rem; }
.hero-text { position:relative;z-index:1;flex:1; }
.hero-title { font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.2rem);font-weight:400;color:var(--white);line-height:1.15;margin-bottom:1rem; }
.hero-title em { font-style:italic;color:var(--gold); }
.hero-sub { font-size:.9rem;color:rgba(255,255,255,.45);font-weight:300;max-width:380px;line-height:1.7; }
.hero-stats { display:flex;gap:2rem;margin-top:2rem; }
.hero-stat-num   { display:block;font-family:var(--font-display);font-size:1.8rem;color:var(--gold);line-height:1; }
.hero-stat-label { font-size:.72rem;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.1em; }

.hero-deco { position:relative;flex-shrink:0;margin-left:2rem; }
.quiz-icon-ring {
  width:130px;height:130px;
  border:1.5px solid rgba(201,149,106,.3);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:3.2rem;color:var(--gold);
  background:radial-gradient(circle,rgba(201,149,106,.08),transparent 70%);
  animation:quizPulse 3s ease infinite;
  box-shadow:0 0 40px rgba(201,149,106,.15);
}
@keyframes quizPulse { 0%,100%{box-shadow:0 0 30px rgba(201,149,106,.15)} 50%{box-shadow:0 0 60px rgba(201,149,106,.3)} }

/* ── TYPE CARDS ── */
.type-cards-row { display:flex;gap:1rem;margin-bottom:2.5rem;flex-wrap:wrap; }
.type-card {
  flex:1;min-width:200px;
  display:flex;align-items:center;gap:.9rem;
  background:var(--white);border:1.5px solid var(--gray-200);
  border-radius:var(--radius-md);padding:1rem 1.25rem;
  box-shadow:var(--shadow-soft);transition:var(--transition);
}
.type-card:hover { border-color:rgba(201,149,106,.4);box-shadow:var(--shadow-gold); }
.type-icon { width:42px;height:42px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--navy),var(--navy-mid));display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--gold);flex-shrink:0; }
.type-info h4 { font-size:.85rem;font-weight:700;color:var(--navy);margin-bottom:3px; }
.type-info p  { font-size:.72rem;color:var(--gray-400);line-height:1.4; }

/* ── SECTION TITLE ── */
.section-title { display:flex;align-items:center;gap:.75rem;margin-bottom:1rem; }
.section-title h2 { font-family:var(--font-display);font-size:1.4rem;font-weight:400;color:var(--navy); }
.section-title-line { flex:1;height:1px;background:linear-gradient(90deg,var(--gray-200),transparent); }

/* ── DIFFICULTY FILTER ── */
.difficulty-filter { display:flex;gap:.5rem;margin-bottom:1.25rem;flex-wrap:wrap; }
.diff-btn {
  display:flex;align-items:center;gap:5px;
  padding:6px 16px;border-radius:50px;border:1.5px solid var(--gray-200);
  background:var(--white);font-size:.75rem;font-weight:600;color:var(--gray-600);
  cursor:pointer;transition:var(--transition);font-family:var(--font-sans);
}
.diff-btn:hover  { border-color:rgba(201,149,106,.4);color:var(--navy); }
.diff-btn.active { background:var(--navy);color:var(--gold);border-color:var(--navy); }

/* ── CATEGORY GRID ── */
.categories-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1rem; }

.cat-card {
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);
  border:1.5px solid rgba(201,149,106,.18);border-radius:var(--radius-lg);
  padding:1.3rem 1.4rem;display:flex;align-items:center;gap:1rem;
  cursor:pointer;position:relative;overflow:hidden;transition:var(--transition);
  box-shadow:var(--shadow-deep);
}
.cat-card::after {
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse at 50% -10%,rgba(201,149,106,.32) 0%,transparent 65%);
  opacity:0;transition:var(--transition);
}
.cat-card > * { position:relative;z-index:1; }
.cat-card:hover { border-color:rgba(201,149,106,.8);transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(201,149,106,.3),0 12px 40px rgba(26,10,20,.55),0 0 60px rgba(201,149,106,.18); }
.cat-card:hover::after { opacity:1; }
.cat-card:active { transform:scale(.98); }

.cat-icon-wrap { width:50px;height:50px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;transition:var(--transition);background:rgba(201,149,106,.15);color:var(--gold-light); }
.cat-card:hover .cat-icon-wrap { background:rgba(201,149,106,.28);color:var(--gold-light);box-shadow:0 0 22px rgba(201,149,106,.4);transform:scale(1.06); }

.cat-info { flex:1;min-width:0; }
.cat-info h3 { font-size:.93rem;font-weight:600;color:var(--white);margin-bottom:3px; }
.cat-info p  { font-size:.74rem;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.cat-tags { display:flex;flex-wrap:wrap;gap:4px;margin-top:.45rem; }
.tag-b { font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:50px;background:rgba(109,191,158,.15);color:#47A37A;border:1px solid rgba(109,191,158,.25); }
.tag-i { font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:50px;background:rgba(201,149,106,.15);color:var(--gold);border:1px solid rgba(201,149,106,.25); }
.tag-a { font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:50px;background:rgba(224,112,112,.12);color:var(--danger);border:1px solid rgba(224,112,112,.2); }
.cat-arrow { color:rgba(201,149,106,.35);font-size:.82rem;transition:var(--transition);flex-shrink:0; }
.cat-card:hover .cat-arrow { color:var(--gold);transform:translateX(4px); }

/* ══════════════════════════════════════
   QUIZ VIEW
══════════════════════════════════════ */
#quizView { padding:0; max-width:100%; display:flex; flex-direction:column; min-height:calc(100vh - 66px); }

/* ── TOPBAR ── */
.quiz-topbar {
  display:flex;align-items:center;gap:1rem;
  padding:1rem 2rem;
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
  box-shadow:var(--shadow-soft);
  flex-wrap:wrap;
  gap:.75rem;
}
.back-btn {
  background:var(--white);border:1.5px solid var(--gray-200);border-radius:50px;
  padding:8px 16px;font-size:.8rem;font-weight:600;color:var(--navy);
  cursor:pointer;display:flex;align-items:center;gap:7px;transition:var(--transition);
  white-space:nowrap;flex-shrink:0;box-shadow:var(--shadow-soft);font-family:var(--font-sans);
}
.back-btn:hover { background:var(--navy);color:var(--gold);border-color:var(--navy); }

.quiz-meta { display:flex;align-items:center;gap:1rem;flex:1;min-width:0; }
.quiz-cat-label { font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:rgba(201,149,106,.1);border:1px solid rgba(201,149,106,.22);padding:5px 14px;border-radius:50px;white-space:nowrap; }
.quiz-progress-wrap { flex:1;height:6px;background:var(--gray-200);border-radius:50px;overflow:hidden;min-width:60px; }
.quiz-progress-bar  { height:100%;width:0%;background:linear-gradient(90deg,var(--rose-deep),var(--gold),var(--gold-light));border-radius:50px;transition:width .5s cubic-bezier(.4,0,.2,1); }
.quiz-counter { font-size:.8rem;font-weight:700;color:var(--navy);white-space:nowrap; }

.quiz-lives { display:flex;gap:5px; }
.quiz-lives i { font-size:.95rem;color:var(--danger);transition:var(--transition); }
.quiz-lives i.lost { color:var(--gray-200);transform:scale(.85); }

/* ── QUIZ STAGE ── */
.quiz-stage {
  flex:1;
  display:flex;align-items:flex-start;justify-content:center;
  padding:2rem 1.5rem 4rem;
  background:linear-gradient(180deg,var(--cream) 0%,#F0E8E4 100%);
}

/* ── LOADING CARD ── */
.loading-card {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.5rem;padding:4rem 2rem;
  background:var(--white);border:1.5px solid var(--gray-200);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);
  width:100%;max-width:620px;min-height:320px;
}
.loading-orb {
  width:70px;height:70px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  animation:orbSpin 2s linear infinite;
  box-shadow:0 0 30px rgba(201,149,106,.3);
}
@keyframes orbSpin { 0%{box-shadow:0 0 20px rgba(201,149,106,.3)} 50%{box-shadow:0 0 50px rgba(201,149,106,.6)} 100%{box-shadow:0 0 20px rgba(201,149,106,.3)} }
.loading-text { font-size:.95rem;color:var(--gray-600);font-style:italic; }
.loading-dots span { animation:dotBlink 1.4s ease infinite; }
.loading-dots span:nth-child(2) { animation-delay:.2s; }
.loading-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes dotBlink { 0%,80%,100%{opacity:0} 40%{opacity:1} }

/* ── QUESTION CARD ── */
.question-card {
  background:var(--white);
  border:1.5px solid var(--gray-200);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-deep);
  width:100%;max-width:620px;
  overflow:hidden;
  animation:cardIn .4s cubic-bezier(.4,0,.2,1) both;
}
@keyframes cardIn { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }

/* Tip etiketi */
.q-type-badge {
  padding:.65rem 1.5rem;
  display:flex;align-items:center;gap:.6rem;
  font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
}
.q-type-badge.type-situation { background:linear-gradient(90deg,rgba(107,140,186,.15),transparent);color:#4A7AB5;border-bottom:1px solid rgba(107,140,186,.2); }
.q-type-badge.type-fill      { background:linear-gradient(90deg,rgba(201,149,106,.12),transparent);color:var(--gold);border-bottom:1px solid rgba(201,149,106,.18); }
.q-type-badge.type-wrong     { background:linear-gradient(90deg,rgba(224,112,112,.1),transparent);color:var(--danger);border-bottom:1px solid rgba(224,112,112,.15); }

/* Soru gövdesi */
.q-body { padding:1.5rem 1.5rem 1rem; }
.q-scene {
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray-400);margin-bottom:.75rem;
  display:flex;align-items:center;gap:6px;
}
.q-scene i { color:var(--gold);font-size:.65rem; }
.q-text {
  font-size:1.05rem;font-weight:500;color:var(--navy);line-height:1.65;
  font-family:var(--font-sans);
}
/* Fill-in-blank cümle */
.q-sentence {
  margin-top:1rem;padding:1rem 1.25rem;
  background:var(--gray-100);border:1.5px solid var(--gray-200);
  border-radius:var(--radius-md);
  font-size:1rem;font-weight:500;color:var(--navy);line-height:1.8;
}
.blank-word {
  display:inline-block;
  min-width:80px;height:28px;
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  border-radius:6px;margin:0 4px;vertical-align:middle;
  border-bottom:2px solid var(--gold);
  transition:var(--transition);
}
.blank-word.filled {
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--navy);font-weight:700;font-size:.85rem;
  padding:0 10px;display:inline-flex;align-items:center;justify-content:center;
}

/* ── OPTIONS GRID ── */
.options-grid {
  padding:.75rem 1.25rem 1.25rem;
  display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
}
.option-btn {
  display:flex;align-items:center;gap:.75rem;
  background:var(--gray-100);border:1.5px solid var(--gray-200);
  border-radius:var(--radius-md);padding:.8rem 1rem;
  cursor:pointer;transition:var(--transition);text-align:left;
  font-family:var(--font-sans);
  animation:optIn .3s ease both;
}
.option-btn:nth-child(1) { animation-delay:.05s; }
.option-btn:nth-child(2) { animation-delay:.1s; }
.option-btn:nth-child(3) { animation-delay:.15s; }
.option-btn:nth-child(4) { animation-delay:.2s; }
@keyframes optIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.option-btn:hover:not(:disabled) { border-color:rgba(201,149,106,.5);background:var(--gold-pale);box-shadow:0 3px 14px rgba(201,149,106,.14);transform:translateY(-1px); }
.option-btn:active:not(:disabled) { transform:scale(.98); }
.option-btn:disabled { cursor:default; }

.opt-letter {
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  color:var(--gold);font-size:.75rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);font-family:var(--font-display);
}
.option-btn:hover:not(:disabled) .opt-letter { background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy); }
.opt-text { font-size:.87rem;font-weight:500;color:var(--navy);line-height:1.4;flex:1; }

/* Doğru cevap */
.option-btn.correct {
  background:var(--success-bg);border-color:var(--success);
  animation:correctPop .4s cubic-bezier(.4,0,.2,1);
}
.option-btn.correct .opt-letter { background:var(--success);color:var(--white); }
.option-btn.correct .opt-text   { color:#1e6b4a;font-weight:600; }
@keyframes correctPop { 0%{transform:scale(1)} 40%{transform:scale(1.03)} 100%{transform:scale(1)} }

/* Yanlış cevap */
.option-btn.wrong {
  background:var(--danger-bg);border-color:var(--danger);
  animation:wrongShake .4s cubic-bezier(.4,0,.2,1);
}
.option-btn.wrong .opt-letter { background:var(--danger);color:var(--white); }
.option-btn.wrong .opt-text   { color:#7a2020;font-weight:600; }
@keyframes wrongShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 60%{transform:translateX(5px)} }

/* Doğru ama seçilmedi (vurgula) */
.option-btn.correct-reveal { background:rgba(109,191,158,.07);border-color:rgba(109,191,158,.45);border-style:dashed; }
.option-btn.correct-reveal .opt-letter { background:rgba(109,191,158,.5);color:var(--white); }

/* ── EXPLANATION BOX ── */
.explanation-box {
  margin:0 1.25rem 1.25rem;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1.5px solid var(--gray-200);
  animation:fadeUp .35s ease both;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.exp-header {
  display:flex;align-items:center;gap:.75rem;
  padding:.9rem 1.1rem;
  font-size:.85rem;font-weight:700;
}
.exp-header.correct { background:var(--success-bg);color:#1e6b4a;border-bottom:1px solid rgba(109,191,158,.2); }
.exp-header.wrong   { background:var(--danger-bg);color:#7a2020;border-bottom:1px solid rgba(224,112,112,.15); }
.exp-header i { font-size:1.1rem; }

.exp-tr {
  padding:.75rem 1.1rem;
  background:rgba(201,149,106,.05);
  font-size:.82rem;color:var(--gray-600);
  line-height:1.65;font-style:italic;
  border-bottom:1px solid var(--gray-200);
}
.exp-tr strong { color:var(--navy);font-style:normal;font-weight:600; }

.exp-tip {
  padding:.7rem 1.1rem;
  background:var(--white);
  font-size:.8rem;color:var(--gray-400);
  line-height:1.6;
  display:flex;align-items:flex-start;gap:.5rem;
}
.exp-tip i { color:var(--gold);font-size:.8rem;margin-top:2px;flex-shrink:0; }

.next-btn {
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:.95rem;
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  color:var(--gold);font-size:.85rem;font-weight:700;
  border:none;cursor:pointer;transition:var(--transition);
  font-family:var(--font-sans);letter-spacing:.05em;
}
.next-btn:hover { background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy); }
.next-btn i { transition:transform .2s; }
.next-btn:hover i { transform:translateX(4px); }

/* ── RESULT VIEW ── */
#resultView { display:flex;align-items:center;justify-content:center; }
.result-container {
  background:var(--white);border:1.5px solid var(--gray-200);
  border-radius:var(--radius-xl);padding:3rem 2.5rem;
  max-width:560px;width:100%;text-align:center;
  box-shadow:var(--shadow-deep);
  animation:cardIn .5s cubic-bezier(.4,0,.2,1) both;
}
.result-trophy { font-size:4rem;margin-bottom:.75rem;animation:trophyBounce .6s ease .2s both; }
@keyframes trophyBounce { 0%{transform:scale(0) rotate(-15deg)} 70%{transform:scale(1.12) rotate(4deg)} 100%{transform:scale(1) rotate(0)} }
.result-title { font-family:var(--font-display);font-size:2.1rem;color:var(--navy);margin-bottom:.5rem; }
.result-sub   { font-size:.92rem;color:var(--gray-400);margin-bottom:2rem;line-height:1.65; }

.result-stats { display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.75rem; }
.result-stat { background:var(--gray-100);border:1.5px solid var(--gray-200);border-radius:var(--radius-md);padding:1rem 1.4rem;min-width:90px; }
.rs-num   { display:block;font-family:var(--font-display);font-size:1.9rem;color:var(--gold);line-height:1; }
.rs-label { display:block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gray-400);margin-top:4px; }

.perf-bar-wrap { height:8px;background:var(--gray-200);border-radius:50px;overflow:hidden;margin-bottom:2rem; }
.perf-bar { height:100%;border-radius:50px;transition:width 1s cubic-bezier(.4,0,.2,1);background:linear-gradient(90deg,var(--danger),var(--gold),var(--success)); }

/* Missed listesi */
.missed-section { text-align:left;margin-bottom:2rem; }
.missed-section h4 { font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--navy);font-weight:700;margin-bottom:.85rem;display:flex;align-items:center;gap:6px; }
.missed-list { display:flex;flex-direction:column;gap:.5rem; }
.missed-item {
  background:var(--gray-100);border:1.5px solid var(--gray-200);
  border-radius:var(--radius-md);padding:.8rem 1rem;
  font-size:.82rem;color:var(--navy);line-height:1.5;
  border-left:3px solid var(--danger);
}
.missed-item .mi-correct { margin-top:4px;font-size:.76rem;color:#47A37A;font-weight:600; }

.result-actions { display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap; }
.play-again-btn {
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--navy);border:none;border-radius:50px;
  padding:.85rem 2rem;font-size:.88rem;font-weight:700;
  letter-spacing:.04em;cursor:pointer;transition:var(--transition);
  box-shadow:var(--shadow-gold);font-family:var(--font-sans);
}
.play-again-btn:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,149,106,.4); }
.secondary-btn { background:var(--white);color:var(--navy);border:1.5px solid var(--gray-200);box-shadow:var(--shadow-soft); }
.secondary-btn:hover { background:var(--navy);color:var(--gold);border-color:var(--navy); }

/* ── TÜRKÇE ÇEVİRİ STİLLERİ ── */

/* Soru metninin altındaki Türkçe */
.q-text-tr {
  margin-top:.55rem;
  padding:.45rem .75rem;
  background:rgba(201,149,106,.08);
  border-left:2.5px solid rgba(201,149,106,.35);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.75rem;
  font-style:italic;
  color:var(--gray-600);
  line-height:1.5;
  display:flex;
  align-items:flex-start;
  gap:.4rem;
}
.q-text-tr i {
  color:var(--gold);
  font-size:.72rem;
  margin-top:2px;
  flex-shrink:0;
}

/* Fill cümlesinin altındaki Türkçe */
.q-sentence-tr {
  margin-top:.5rem;
  padding:.4rem .7rem;
  background:rgba(201,149,106,.06);
  border-left:2px solid rgba(201,149,106,.25);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.73rem;
  font-style:italic;
  color:var(--gray-400);
  line-height:1.5;
  display:flex;
  align-items:flex-start;
  gap:.4rem;
}
.q-sentence-tr i {
  color:rgba(201,149,106,.6);
  font-size:.68rem;
  margin-top:2px;
  flex-shrink:0;
}

/* Şık butonlarının altındaki Türkçe */
.opt-tr {
  display:block;
  margin-top:.22rem;
  font-size:.7rem;
  font-style:italic;
  color:var(--gray-400);
  line-height:1.3;
  font-weight:400;
}
.option-btn:hover:not(:disabled) .opt-tr { color:rgba(26,10,20,.55); }
.option-btn.correct .opt-tr { color:rgba(30,107,74,.65); }
.option-btn.wrong   .opt-tr { color:rgba(122,32,32,.55); }

/* ── ANIMATIONS ── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.fade-in { animation:fadeInUp .4s ease both; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .categories-grid { grid-template-columns:1fr 1fr; }
  .type-cards-row { gap:.75rem; }
}
@media (max-width:640px) {
  .hero-section { padding:2rem 1.5rem;border-radius:var(--radius-lg); }
  .hero-deco { display:none; }
  .hero-stats { gap:1.2rem; }
  .categories-grid { grid-template-columns:1fr; }
  .options-grid { grid-template-columns:1fr; }
  .quiz-topbar { padding:.75rem 1rem; }
  .quiz-meta { flex-wrap:wrap; }
  .result-container { padding:2rem 1.25rem; }
  .result-stats { gap:.6rem; }
  .result-stat { min-width:70px;padding:.75rem 1rem; }
  .header-inner { padding:0 1rem; }
}
@media (max-width:480px) {
  .view { padding:1.25rem 1rem 3rem; }
  .type-cards-row { flex-direction:column; }
  .result-actions { flex-direction:column; }
  .play-again-btn { justify-content:center; }
}