/* ============================================
   JUNIOR LAB – TRAVEL ENGLISH  v10
   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;
  --danger:     #E07070;
  --accent:     #9B4F7A;

  --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; }

/* ── 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::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%,rgba(201,149,106,.08) 0%,transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 80%,rgba(155,79,122,.06) 0%,transparent 60%);
}
.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;animation-delay:0s; }
.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:scale(1) translateY(0)} }

.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(3.5rem,9vw,6rem);font-weight:400;color:var(--white); }
.splash-brand .logo-lab    { font-family:var(--font-display);font-size:clamp(3.5rem,9vw,6rem);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.2rem,3vw,1.8rem);color:var(--rose);font-style:italic;margin-bottom:.4rem; }
.splash-sub { font-size:.78rem;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:2.5rem 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%} }

/* ── APP / 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;justify-content:space-between; }
.header-logo { display:flex;align-items:baseline;gap:1px;cursor:pointer;user-select: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-right { display:flex;align-items:center;gap:.85rem; }
.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; }
.level-badge { background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%);color:var(--navy);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 13px;border-radius:50px; }

/* ── HEADER NAV ── */
.header-nav { display:flex;align-items:center;gap:.4rem;flex:1;margin-left:1rem; }
.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;text-decoration:none;
}
.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); }

/* Quiz pill — her sayfada öne çıkan buton */
.nav-quiz-pill {
  color:var(--gold) !important;
  background:rgba(201,149,106,.15);
  border:1.5px solid rgba(201,149,106,.4);
  box-shadow:0 2px 12px rgba(201,149,106,.15);
}
.nav-quiz-pill:hover {
  background:rgba(201,149,106,.28);
  border-color:rgba(201,149,106,.65);
  box-shadow:0 4px 18px rgba(201,149,106,.25);
  transform:translateY(-1px);
}

/* ── 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:3rem;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.4rem);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:.95rem;color:rgba(255,255,255,.45);font-weight:300;max-width:360px;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;width:160px;height:160px;flex-shrink:0;margin-left:2rem; }
.globe-ring { width:130px;height:130px;border:1.5px solid rgba(201,149,106,.25);border-radius:50%;position:absolute;top:15px;left:15px;animation:spin 22s linear infinite; }
.globe-ring::before { content:'';position:absolute;width:88px;height:88px;border:1px dashed rgba(201,149,106,.15);border-radius:50%;top:20px;left:20px; }
.globe-ring::after { content:'';position:absolute;width:14px;height:14px;background:var(--gold-light);border-radius:50%;top:-7px;left:50%;transform:translateX(-50%);box-shadow:0 0 14px rgba(201,149,106,.6); }
.globe-dot { width:22px;height:22px;background:radial-gradient(circle,var(--gold-light),var(--gold));border-radius:50%;position:absolute;top:80px;left:80px;transform:translate(-50%,-50%);box-shadow:0 0 30px rgba(201,149,106,.5);animation:pulseGold 2.5s ease infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes pulseGold { 0%,100%{box-shadow:0 0 20px rgba(201,149,106,.5);transform:translate(-50%,-50%) scale(1)} 50%{box-shadow:0 0 44px rgba(201,149,106,.8);transform:translate(-50%,-50%) scale(1.1)} }

/* ── SECTION TITLE ── */
.section-title { display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem; }
.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); }

/* ── CATEGORY CARDS ── */
.categories-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1.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.4rem 1.5rem;
  display:flex;align-items:center;gap:1.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:54px;height:54px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;flex-shrink:0;transition:var(--transition);
}
.cat-card[data-cat="restaurant"]   .cat-icon-wrap { color:#E8B89A;background:rgba(201,149,106,.15); }
.cat-card[data-cat="hotel"]         .cat-icon-wrap { color:#6DBFA0;background:rgba(82,183,136,.15); }
.cat-card[data-cat="airport"]       .cat-icon-wrap { color:#8BAED4;background:rgba(107,140,186,.15); }
.cat-card[data-cat="transport"]     .cat-icon-wrap { color:#E89090;background:rgba(224,112,112,.15); }
.cat-card[data-cat="directions"]    .cat-icon-wrap { color:#B99AE0;background:rgba(155,114,207,.15); }
.cat-card[data-cat="shopping"]      .cat-icon-wrap { color:#E8A882;background:rgba(212,132,90,.15); }
.cat-card[data-cat="entertainment"] .cat-icon-wrap { color:#D090D0;background:rgba(176,106,179,.15); }
.cat-card[data-cat="beauty"]        .cat-icon-wrap { color:#E89AAA;background:rgba(212,120,138,.15); }
.cat-card[data-cat="social"]        .cat-icon-wrap { color:#70DDD8;background:rgba(78,205,196,.15); }
.cat-card[data-cat="emergency"]     .cat-icon-wrap { color:#E89090;background:rgba(224,112,112,.15); }

.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), inset 0 0 12px rgba(201,149,106,.1);
  transform:scale(1.06);
}

.cat-info { flex:1;min-width:0; }
.cat-info h3 { font-size:.95rem;font-weight:600;color:var(--white);margin-bottom:3px;transition:var(--transition); }
.cat-info p  { font-size:.76rem;color:rgba(255,255,255,.45);transition:var(--transition);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.cat-subs { display:flex;flex-wrap:wrap;gap:4px;margin-top:.55rem; }
.cat-subs span { font-size:.65rem;font-weight:500;background:rgba(201,149,106,.12);color:var(--gold-light);padding:3px 8px;border-radius:50px;border:1px solid rgba(201,149,106,.2);transition:var(--transition); }
.cat-arrow { color:rgba(201,149,106,.35);font-size:.82rem;transition:var(--transition);flex-shrink:0; }
.cat-card:hover .cat-info h3   { color:var(--white); }
.cat-card:hover .cat-info p    { color:rgba(255,255,255,.6); }
.cat-card:hover .cat-subs span { background:rgba(201,149,106,.2);color:var(--gold-light);border-color:rgba(201,149,106,.4); }
.cat-card:hover .cat-arrow     { color:var(--gold);transform:translateX(4px); }

/* ── SUBVIEW ── */
.view-header { display:flex;align-items:center;gap:1rem;margin-bottom:2.5rem;flex-wrap:wrap; }
.view-header h2 { font-family:var(--font-display);font-size:2rem;font-weight:400;color:var(--navy);flex:1; }
.back-btn { background:var(--white);border:1.5px solid var(--gray-200);border-radius:50px;padding:9px 18px;font-size:.82rem;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); }
.back-btn:hover { background:var(--navy);color:var(--gold);border-color:var(--navy); }

.sub-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.25rem; }
.sub-card { background:var(--white);border:1.5px solid var(--gray-200);border-radius:var(--radius-lg);padding:2rem 1.5rem;cursor:pointer;text-align:center;transition:var(--transition);box-shadow:var(--shadow-card);position:relative;overflow:hidden; }
.sub-card::before { content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--rose-deep),var(--gold));opacity:0;transition:var(--transition); }
.sub-card:hover { border-color:var(--gold);transform:translateY(-5px);box-shadow:var(--shadow-gold); }
.sub-card:hover::before { opacity:1; }
.sub-card:active { transform:scale(.97); }
.sub-card-icon { width:66px;height:66px;background:linear-gradient(135deg,var(--navy),var(--navy-mid));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.1rem;font-size:1.45rem;color:var(--gold);box-shadow:0 6px 20px rgba(26,10,20,.18);transition:var(--transition); }
.sub-card:hover .sub-card-icon { background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy); }
.sub-card h4 { font-size:1rem;font-weight:600;color:var(--navy);margin-bottom:.4rem; }
.sub-card p  { font-size:.78rem;color:var(--gray-400);line-height:1.6; }
.difficulty { margin-top:1rem;display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:4px 11px;border-radius:50px; }
.diff-beginner     { background:rgba(109,191,158,.12);color:#47A37A; }
.diff-intermediate { background:rgba(201,149,106,.12);color:var(--gold); }
.diff-advanced     { background:rgba(224,112,112,.1);color:var(--danger); }

/* ── DIALOG VIEW ── */
#dialogView .view-header { justify-content:space-between; }
.dialog-scene-label { font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:rgba(201,149,106,.1);border:1px solid rgba(201,149,106,.22);padding:6px 16px;border-radius:50px; }
.dialog-container { max-width:740px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-deep); }

/* ── PROGRESS BAR ── */
.session-progress-wrap { height:3px;background:rgba(201,149,106,.1); }
.session-progress-bar { height:100%;width:0%;background:linear-gradient(90deg,var(--rose-deep),var(--gold),var(--gold-light));transition:width .6s cubic-bezier(.4,0,.2,1); }

/* ── AI AVATAR BAR ── */
.ai-avatar-bar {
  display:flex;align-items:center;gap:1rem;padding:1.1rem 1.5rem;
  background:linear-gradient(135deg,var(--navy) 0%,#2B1320 100%);
  border-bottom:1px solid rgba(201,149,106,.12);
}
.ai-avatar { position:relative;width:50px;height:50px;flex-shrink:0; }
.ai-face {
  width:50px;height:50px;background:linear-gradient(135deg,#2B1320,#0E0308);
  border-radius:50%;border:2px solid var(--gold);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  box-shadow:0 0 22px rgba(201,149,106,.35);transition:var(--transition);
}
.ai-eyes { display:flex;gap:7px; }
.ai-eyes span { width:6px;height:6px;background:var(--gold);border-radius:50%;display:block;animation:eyeBlink 4.5s ease infinite;transition:var(--transition); }
.ai-eyes span:nth-child(2) { animation-delay:.12s; }
@keyframes eyeBlink { 0%,90%,100%{transform:scaleY(1)} 95%{transform:scaleY(.08)} }
.ai-mouth { width:13px;height:5px;border:2px solid var(--gold);border-top:none;border-radius:0 0 8px 8px;transition:all .15s ease; }
.ai-mouth.speaking { animation:mouthTalk .3s ease infinite alternate; }
@keyframes mouthTalk { from{height:5px;border-radius:0 0 8px 8px} to{height:9px;border-radius:0 0 12px 12px} }
.ai-pulse { position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(201,149,106,.22);animation:aiPing 2.2s ease infinite; }
@keyframes aiPing { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.5);opacity:0} }
.ai-face.face-speaking { box-shadow:0 0 28px rgba(201,149,106,.7);border-color:var(--gold-light); }
.ai-eyes span.eyes-wide { transform:scale(1.25);background:var(--gold-light); }

.ai-name-bar { flex:1; }
.ai-name  { display:block;font-family:var(--font-display);font-size:1.05rem;color:var(--gold);font-weight:600;letter-spacing:.07em; }
.ai-title { font-size:.7rem;color:rgba(255,255,255,.38); }

/* ── AI HEADER RIGHT ── */
.ai-header-right { display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0; }
.ai-status { font-size:.7rem;color:var(--success);display:flex;align-items:center;gap:5px;white-space:nowrap; }
.status-dot { width:7px;height:7px;background:var(--success);border-radius:50%;display:inline-block;animation:statusPulse 1.8s ease infinite; }
@keyframes statusPulse { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── TTS CONTROLS ── */
.tts-controls { display:flex;flex-direction:column;align-items:flex-end;gap:5px; }
.tts-toggle {
  display:flex;align-items:center;gap:6px;
  background:rgba(201,149,106,.12);border:1px solid rgba(201,149,106,.28);
  border-radius:50px;padding:5px 12px;
  color:var(--gold);font-size:.72rem;font-weight:600;font-family:var(--font-sans);
  cursor:pointer;transition:var(--transition);white-space:nowrap;
}
.tts-toggle:hover { background:rgba(201,149,106,.22);border-color:var(--gold); }
.tts-toggle.tts-off { background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.3); }
.tts-label { font-size:.68rem; }

.tts-row { display:flex;flex-direction:column;gap:4px; }
.tts-pill-group { display:flex;gap:3px; }
.tts-pill {
  background:transparent;border:1px solid rgba(201,149,106,.2);border-radius:50px;
  color:rgba(255,255,255,.35);font-size:.6rem;font-weight:600;font-family:var(--font-sans);
  padding:3px 9px;cursor:pointer;transition:var(--transition);white-space:nowrap;
}
.tts-pill:hover { border-color:rgba(201,149,106,.5);color:rgba(255,255,255,.7); }
.tts-pill.active { background:rgba(201,149,106,.18);border-color:rgba(201,149,106,.55);color:var(--gold); }

/* ── CHAT WINDOW ── */
.chat-window {
  background:#F8F4F2;
  border-left:1px solid var(--gray-200);border-right:1px solid var(--gray-200);
  min-height:360px;max-height:440px;
  overflow-y:auto;padding:1.5rem 1.25rem;
  display:flex;flex-direction:column;gap:1.2rem;scroll-behavior:smooth;
}
.chat-window::-webkit-scrollbar { width:4px; }
.chat-window::-webkit-scrollbar-thumb { background:var(--gray-200);border-radius:4px; }

/* ── BUBBLES ── */
.bubble-row { display:flex;align-items:flex-end;gap:.7rem;animation:bubbleIn .38s cubic-bezier(.4,0,.2,1) both; }
.bubble-row.ai   { flex-direction:row; }
.bubble-row.user { flex-direction:row-reverse; }
@keyframes bubbleIn { from{opacity:0;transform:translateY(12px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }

.bubble-avatar { width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.8rem; }
.bubble-avatar.ai-av   { background:linear-gradient(135deg,var(--navy),var(--navy-mid));border:1.5px solid var(--gold);color:var(--gold); }
.bubble-avatar.user-av { background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);font-weight:800;font-size:.62rem; }

.bubble-content { max-width:74%; }
.bubble { padding:.9rem 1.1rem;border-radius:18px;font-size:.9rem;line-height:1.65;position:relative;transition:var(--transition); }
.bubble.ai   { background:var(--navy);color:var(--white);border-bottom-left-radius:4px;box-shadow:0 3px 14px rgba(26,10,20,.2);cursor:default; }
.bubble.user { background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);border-bottom-right-radius:4px;box-shadow:0 3px 14px rgba(201,149,106,.3);font-weight:500; }

/* Turkish translation line — bubble altında */
.bubble-tr-line {
  display:flex;align-items:flex-start;gap:6px;
  margin-top:6px;padding:6px 12px 6px 10px;
  background:rgba(201,149,106,.07);
  border-left:2.5px solid rgba(201,149,106,.4);
  border-radius:0 8px 8px 0;
  font-size:.75rem;color:var(--gray-600);line-height:1.6;font-style:italic;
}
.bubble-tr-line i { color:var(--gold);font-size:.68rem;flex-shrink:0;margin-top:3px;opacity:.8; }

/* Bubble actions */
.bubble-actions { display:flex;align-items:center;justify-content:flex-start;margin-top:7px;gap:.4rem; }

/* ── SPEAK BUTTON ── */
.speak-btn {
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:50px;
  border:1px solid rgba(201,149,106,.28);background:transparent;
  color:rgba(201,149,106,.7);font-size:.65rem;font-weight:500;font-family:var(--font-sans);
  cursor:pointer;transition:var(--transition);letter-spacing:.03em;white-space:nowrap;
}
.speak-btn::before { content:'Listen';font-size:.6rem;text-transform:uppercase;letter-spacing:.08em; }
.speak-btn:hover { background:rgba(201,149,106,.12);border-color:var(--gold);color:var(--gold); }
.speak-btn:disabled { opacity:.35;cursor:not-allowed; }
.speak-playing { background:rgba(201,149,106,.15)!important;border-color:var(--gold)!important;color:var(--gold)!important;animation:speakPulse 1s ease infinite; }
.speak-playing::before { content:'Stop'; }
.speak-loading { opacity:.5; }
.speak-loading::before { content:'Loading…'; }
@keyframes speakPulse { 0%,100%{box-shadow:0 0 0 0 rgba(201,149,106,.35)} 50%{box-shadow:0 0 0 5px rgba(201,149,106,0)} }
.speak-attention { border-color:var(--gold)!important;color:var(--gold-light)!important;animation:speakAttention 1.2s ease infinite; }
@keyframes speakAttention { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── PHRASE TAGS ── */
.phrase-tag { background:rgba(201,149,106,.18);color:var(--gold-light);border-bottom:1.5px dashed var(--gold);padding:0 3px;border-radius:3px;cursor:pointer;font-weight:500;transition:background .2s;display:inline; }
.phrase-tag:hover { background:rgba(201,149,106,.35); }

/* ── TYPING DOTS ── */
.typing-indicator { display:flex;align-items:center;gap:5px;padding:.9rem 1.1rem;background:var(--navy);border-radius:18px;border-bottom-left-radius:4px;width:fit-content;box-shadow:0 3px 14px rgba(26,10,20,.2); }
.typing-indicator span { width:7px;height:7px;background:var(--gold);border-radius:50%;display:block;animation:typeBounce 1.2s ease infinite; }
.typing-indicator span:nth-child(2) { animation-delay:.18s; }
.typing-indicator span:nth-child(3) { animation-delay:.36s; }
@keyframes typeBounce { 0%,60%,100%{transform:translateY(0);opacity:.6} 30%{transform:translateY(-8px);opacity:1} }

/* ═══════════════════════════════════════════════
   ── CHOICES AREA ── YENİ TASARIM
   ═══════════════════════════════════════════════ */
.choices-area {
  background: linear-gradient(180deg, #F8F4F2 0%, #F4EDE9 100%);
  border-left:1px solid var(--gray-200);
  border-right:1px solid var(--gray-200);
  padding:1.1rem 1.25rem .75rem;
  display:flex;flex-direction:column;gap:.55rem;
}

/* Başlık satırı */
.choice-header { margin-bottom:.35rem; }
.choice-label {
  font-size:.62rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.2em;color:var(--gray-400);
  display:flex;align-items:center;gap:8px;
}
.choice-label::after { content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--gray-200),transparent); }
.choice-hint {
  font-size:.68rem;color:var(--gray-400);margin-top:4px;
  display:flex;align-items:center;gap:5px;
}
.choice-hint i { color:var(--gold);font-size:.6rem; }

/* Seçenek kartı */
.choice-card {
  display:flex;align-items:stretch;
  background:var(--white);
  border:1.5px solid var(--gray-200);
  border-radius:14px;
  overflow:hidden;
  cursor:default;
  transition:var(--transition);
  box-shadow:0 2px 10px rgba(26,10,20,.05);
  position:relative;
}
.choice-card:hover {
  border-color:rgba(201,149,106,.4);
  box-shadow:0 4px 20px rgba(201,149,106,.12);
}

/* Harf etiketi */
.choice-letter {
  display:flex;align-items:center;justify-content:center;
  min-width:44px;flex-shrink:0;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-mid) 100%);
  color:var(--gold);font-size:.82rem;font-weight:800;
  letter-spacing:.04em;border-right:1px solid rgba(201,149,106,.15);
  transition:var(--transition);
  font-family:var(--font-display);
}

/* Metin alanı */
.choice-text {
  flex:1;padding:.75rem 1rem;display:flex;flex-direction:column;gap:3px;
  min-width:0;
}
.choice-en {
  font-size:.88rem;font-weight:600;color:var(--navy);
  line-height:1.4;display:block;
}
.choice-tr {
  font-size:.72rem;color:var(--gray-400);display:block;
  font-style:italic;line-height:1.4;
}
.choice-transcript {
  font-size:.7rem;margin-top:4px;min-height:0;transition:all .2s;
  border-radius:6px;padding:0;
}
.choice-transcript:not(:empty) { padding:3px 6px; }
.tr-listening { color:var(--gold);background:rgba(201,149,106,.08); }
.tr-interim   { color:var(--navy);background:rgba(201,149,106,.06); }
.tr-success   { color:#2e7d5a;background:rgba(109,191,158,.12); }
.tr-nomatch   { color:var(--gray-600);background:rgba(0,0,0,.03); }
.tr-error     { color:var(--danger);background:rgba(224,112,112,.08); }

/* ── KART BUTON GRUBU — yatay, yan yana ── */
.card-actions {
  display:flex;
  flex-direction:row;
  align-items:stretch;
  flex-shrink:0;
  border-left:1.5px solid rgba(201,149,106,.18);
}

/* Paylaşılan buton tabanı */
.listen-btn,
.rec-btn {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:transparent;
  border:none;
  cursor:pointer;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
  color:var(--gray-400);
  box-sizing:border-box;
}
.listen-btn::before,
.rec-btn::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(201,149,106,.18),transparent 70%);
  opacity:0;transition:opacity .3s;
  z-index:0;  /* ikonu örtmemesi için */
}

/* Hoparlör — küçük, kompakt */
.listen-btn {
  width:44px;
  padding:.5rem .3rem;
  border-right:1px solid rgba(201,149,106,.13);
}

/* Mikrofon — daha geniş, ana buton */
.rec-btn {
  width:64px;
  padding:.5rem .4rem;
}

/* Hoparlör — dinle */
.listen-btn:hover { color:var(--gold);background:rgba(201,149,106,.1); }
.listen-btn:hover::before { opacity:1; }
.listen-btn.playing {
  color:var(--gold);
  background:rgba(201,149,106,.14);
  animation:listenPulse 1.1s ease infinite;
}
@keyframes listenPulse {
  0%,100%{ box-shadow:inset 0 0 0 0 rgba(201,149,106,.15); }
  50%    { box-shadow:inset 0 0 12px 0 rgba(201,149,106,.2); }
}

/* Mikrofon — kaydet */
.rec-btn:hover { color:var(--gold);background:rgba(201,149,106,.14); }
.rec-btn:hover::before { opacity:1; }
/* İkon ve etiket ::before'un üstünde kalsın */
.listen-btn i, .listen-btn .listen-label,
.rec-btn i,   .rec-btn .rec-label {
  position:relative;
  z-index:1;
}
.rec-btn i    { font-size:.95rem; transition:var(--transition); }
.listen-btn i { font-size:.72rem; transition:var(--transition); }
.rec-btn:hover i,
.listen-btn:hover i { transform:scale(1.15); }

.rec-label, .listen-label {
  font-size:.52rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;line-height:1;color:inherit;
  font-family:var(--font-sans);
}

/* Aktif kayıt durumu */
.rec-btn.rec-active {
  background:linear-gradient(160deg,rgba(224,112,112,.18) 0%,rgba(224,112,112,.08) 100%);
  border-left-color:rgba(224,112,112,.4);
  color:var(--danger);
  animation:recPulse 1.2s ease infinite;
}
@keyframes recPulse {
  0%,100%{ box-shadow:inset 0 0 0 0 rgba(224,112,112,.2); }
  50%    { box-shadow:inset 0 0 14px 0 rgba(224,112,112,.18); }
}

/* Kayıt aktifken kart */
.card-recording {
  border-color:rgba(224,112,112,.5) !important;
  box-shadow:0 0 0 2px rgba(224,112,112,.15), 0 4px 20px rgba(224,112,112,.12) !important;
}
.card-recording .choice-letter {
  background:linear-gradient(180deg,#5c1a1a 0%,#3d0f0f 100%);
}

/* Başarılı kart */
.card-success {
  border-color:rgba(109,191,158,.6) !important;
  box-shadow:0 0 0 2px rgba(109,191,158,.15), 0 4px 20px rgba(109,191,158,.12) !important;
}
.card-success .choice-letter {
  background:linear-gradient(180deg,#1e5c42 0%,#144033 100%);
  color:var(--success);
}
/* Soluk kartlar */
.card-dim { opacity:.38;filter:saturate(.4); }

/* ── ALT BAR ── */
.choices-bottom {
  background:transparent;
  border-left:1px solid var(--gray-200);
  border-right:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  padding:.6rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
}
.rec-info { font-size:.67rem;color:var(--gray-400);display:flex;align-items:center;gap:5px; }

.restart-btn {
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:1.5px solid var(--gray-200);border-radius:50px;
  padding:6px 16px;font-size:.72rem;color:var(--gray-600);
  cursor:pointer;transition:var(--transition);font-weight:600;
  font-family:var(--font-sans);letter-spacing:.03em;
}
.restart-btn:hover { border-color:var(--gold);color:var(--gold);background:rgba(201,149,106,.06); }

/* ── TIP BAR ── */
.tip-bar { margin-top:1.5rem;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);border-radius:var(--radius-md);padding:1rem 1.25rem;display:flex;align-items:flex-start;gap:.75rem;color:rgba(255,255,255,.85);font-size:.86rem;line-height:1.65;box-shadow:var(--shadow-deep);border:1px solid rgba(201,149,106,.12); }
.tip-bar i { color:var(--gold);font-size:.95rem;margin-top:2px;flex-shrink:0; }

/* ── PHRASE PANEL ── */
.phrase-panel { position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);z-index:300;width:min(440px,calc(100vw - 2rem));animation:slideUp .3s cubic-bezier(.4,0,.2,1); }
@keyframes slideUp { from{opacity:0;transform:translateX(-50%) translateY(24px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.phrase-panel-inner { background:var(--navy);border:1.5px solid var(--gold);border-radius:var(--radius-lg);padding:1.3rem 1.6rem;box-shadow:0 20px 60px rgba(26,10,20,.4);position:relative; }
.phrase-type { font-size:.65rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem; }
.phrase-en   { font-family:var(--font-display);font-size:1.35rem;color:var(--white);font-style:italic;margin-bottom:.4rem; }
.phrase-tr   { font-size:.88rem;color:rgba(255,255,255,.45); }
.phrase-close { position:absolute;top:.8rem;right:.8rem;background:rgba(255,255,255,.06);border:none;width:28px;height:28px;border-radius:50%;color:var(--gray-400);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.78rem;transition:var(--transition); }
.phrase-close:hover { background:rgba(201,149,106,.2);color:var(--gold); }

/* ── END SCREEN ── */
.end-screen { text-align:center;padding:3rem 1.5rem 2rem;background:var(--white);border-left:1px solid var(--gray-200);border-right:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.end-trophy { font-size:3.5rem;margin-bottom:.75rem; }
.end-title  { font-family:var(--font-display);font-size:2rem;color:var(--navy);margin-bottom:.5rem; }
.end-sub    { color:var(--gray-400);margin-bottom:2rem;font-size:.92rem; }
.end-phrases { background:var(--gray-100);border-radius:var(--radius-md);padding:1.35rem 1.5rem;margin:0 auto 2rem;max-width:480px;text-align:left;border:1px solid var(--gray-200); }
.end-phrases h4 { font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:6px; }
.end-phrase-item { display:flex;align-items:flex-start;gap:.75rem;padding:.55rem 0;border-bottom:1px solid var(--gray-200); }
.end-phrase-item:last-child { border-bottom:none; }
.ep-bullet { width:6px;height:6px;background:var(--gold);border-radius:50%;margin-top:7px;flex-shrink:0; }
.ep-en     { font-size:.86rem;font-weight:500;color:var(--navy); }
.play-again-btn { background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%);color:var(--navy);border:none;border-radius:50px;padding:.9rem 2.5rem;font-size:.92rem;font-weight:700;letter-spacing:.05em;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-gold); }
.play-again-btn:hover { transform:translateY(-3px);box-shadow:0 10px 32px rgba(201,149,106,.4); }

/* ── WORD CLICK POPUP ── */
.w {
  cursor: pointer;border-radius: 3px;
  transition: background 0.15s;padding: 0 1px;
}
.w:hover { background: rgba(201,149,106,0.22);color: var(--gold-light); }

#wordPopup {
  position: absolute;z-index: 9999;width: 230px;
  background: var(--navy);
  border: 1.5px solid rgba(201,149,106,0.45);
  border-radius: 14px;padding: 14px 16px 12px;
  box-shadow: 0 12px 40px rgba(26,10,20,0.55), 0 0 0 1px rgba(201,149,106,0.08);
  transform: translateY(-110%);
  animation: wpIn 0.2s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes wpIn {
  from { opacity:0; transform:translateY(-105%) scale(0.94); }
  to   { opacity:1; transform:translateY(-110%) scale(1); }
}
#wordPopup::after {
  content:'';position:absolute;bottom: -7px; left: 20px;
  width: 12px; height: 12px;background: var(--navy);
  border-right: 1.5px solid rgba(201,149,106,0.45);
  border-bottom: 1.5px solid rgba(201,149,106,0.45);
  transform: rotate(45deg);border-radius: 2px;
}
.wp-word { font-family: var(--font-display);font-size: 1.05rem;color: var(--gold);font-style: italic;margin-bottom: 6px;padding-right: 22px; }
.wp-body { min-height: 24px; }
.wp-tr { font-size: 0.88rem;font-weight: 600;color: var(--white);margin-bottom: 4px;line-height: 1.4; }
.wp-type { display: inline-block;font-size: 0.58rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.12em;color: var(--gold);background: rgba(201,149,106,0.12);border: 1px solid rgba(201,149,106,0.25);border-radius: 50px;padding: 2px 8px;margin-bottom: 6px; }
.wp-example { font-size: 0.72rem;color: rgba(255,255,255,0.38);font-style: italic;line-height: 1.45;border-top: 1px solid rgba(255,255,255,0.06);padding-top: 6px;margin-top: 4px; }
.wp-loading { font-size: 0.75rem;color: rgba(255,255,255,0.4);display: flex;align-items: center;gap: 6px; }
.wp-error { font-size: 0.75rem;color: var(--danger); }
.wp-close { position: absolute;top: 8px; right: 8px;background: rgba(255,255,255,0.06);border: none;width: 22px; height: 22px;border-radius: 50%;color: rgba(255,255,255,0.3);cursor: pointer;display: flex; align-items: center; justify-content: center;font-size: 0.65rem;transition: var(--transition); }
.wp-close:hover { background: rgba(201,149,106,0.2); color: var(--gold); }

/* ── SCORE FLASH ── */
@keyframes scoreFlash { 0%{transform:scale(1)} 40%{transform:scale(1.18);background:rgba(201,149,106,.28)} 100%{transform:scale(1)} }
.score-flash { animation:scoreFlash .6s ease; }

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

/* ── MISC ── */
.ai-avatar-bar,.ai-face,.ai-eyes { user-select:none; }
* { scrollbar-width:thin;scrollbar-color:var(--gray-200) transparent; }
.back-btn:focus-visible { outline:2px solid var(--gold);outline-offset:2px; }
.rec-btn:focus-visible  { outline:2px solid var(--gold);outline-offset:2px; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .categories-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .categories-grid { grid-template-columns:1fr; }
  .hero-section { padding:2rem 1.5rem;border-radius:var(--radius-lg); }
  .hero-deco { display:none; }
  .hero-stats { gap:1.2rem; }
  .chat-window { min-height:280px;max-height:340px; }
  .bubble-content { max-width:85%; }
  .ai-avatar-bar { flex-wrap:wrap;gap:.75rem;padding:.9rem 1rem; }
  .ai-header-right { flex-direction:row;align-items:center;gap:.75rem;width:100%;justify-content:space-between; }
  .tts-controls { flex-direction:row;align-items:center;gap:.5rem; }
  .tts-toggle .tts-label { display:none; }
  .tts-row { flex-direction:row;gap:4px; }

  /* ── HEADER — 2 satır ── */
  .header-inner {
    height: auto;
    flex-wrap: wrap;
    padding: .5rem .85rem;
    gap: 0;
  }
  /* Üst satır: logo + nav */
  .header-logo {
    flex-shrink: 0;
  }
  .logo-junior { font-size: 1.2rem !important; }
  .logo-lab    { font-size: 1.2rem !important; margin-right: 4px !important; }
  .logo-travel { display: none; }

  .header-nav {
    flex: 1;
    margin-left: .4rem;
    gap: .25rem;
  }
  /* Nav butonlarında sadece ikon göster, yazıyı gizle */
  .nav-link span,
  .nav-link:not(.nav-quiz-pill) { /* metin span'ları */
    font-size: 0;          /* metni gizle */
  }
  .nav-link {
    padding: 6px 10px;
    gap: 0;
  }
  .nav-link i {
    font-size: .82rem !important;
    margin: 0;
  }
  /* Quiz pill'de de sadece ikon */
  .nav-quiz-pill span { font-size: 0; }

  /* Alt satır: skor + level — tam genişlik, ortada */
  .header-right {
    width: 100%;
    justify-content: center;
    gap: .45rem;
    padding: .3rem 0 .2rem;
    border-top: 1px solid rgba(201,149,106,.12);
    margin-top: .3rem;
  }
  .progress-pill { font-size: .7rem; padding: 3px 10px; gap: 4px; }
  .progress-pill i { font-size: .65rem; }
  .level-badge   { font-size: .62rem; padding: 3px 10px; letter-spacing: .06em; }

  /* ── CHOICE KARTLARI — mobil ── */
  .choices-area { padding:.75rem .75rem .55rem; gap:.4rem; }
  .choice-card { border-radius:10px; }
  .choice-letter { min-width:36px; font-size:.75rem; }
  .choice-text { padding:.6rem .75rem; gap:2px; }
  .choice-en { font-size:.82rem; }
  .choice-tr { font-size:.68rem; }

  /* Butonları mobilde biraz küçült ama görünür tut */
  .card-actions { border-left-width:1px; }
  .listen-btn { width:36px; padding:.45rem .2rem; }
  .rec-btn    { width:52px; padding:.45rem .3rem; }
  .listen-btn i { font-size:.65rem; }
  .rec-btn i    { font-size:.85rem; }
  .listen-label, .rec-label { font-size:.46rem; letter-spacing:.06em; }
}
@media (max-width:480px) {
  .header-inner { padding:.55rem .85rem; }
  .view { padding:1.25rem 1rem 3rem; }
  .sub-grid { grid-template-columns:1fr; }
  .tts-row { display:none; }

  /* ── CHOICE KARTLARI — çok küçük ekran ── */
  .choices-area { padding:.6rem .6rem .45rem; border-left:none; border-right:none; border-radius:0; }
  .choice-card { border-radius:8px; }
  .choice-letter { min-width:32px; font-size:.7rem; }
  .choice-text { padding:.55rem .6rem; }
  .choice-en { font-size:.8rem; }
  .choice-tr { font-size:.65rem; }
  .listen-btn { width:32px; padding:.4rem .15rem; }
  .rec-btn    { width:48px; padding:.4rem .25rem; }
  .listen-label, .rec-label { display:none; } /* çok dar, etiketi gizle */
  .choices-bottom { padding:.45rem .75rem; }
  .rec-info { font-size:.62rem; }
}

/* mic-modal tamamen kaldırıldı */

/* ── LANDSCAPE KİLİDİ — Overlay yaklaşımı ── */
#landscape-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--navy);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--gold);
  font-family: var(--font-sans);
  text-align: center;
  padding: 2rem;
}
#landscape-overlay .lo-icon {
  font-size: 2.5rem;
  animation: loRotate 1.5s ease-in-out infinite alternate;
}
@keyframes loRotate {
  from { transform: rotate(-20deg); }
  to   { transform: rotate(20deg); }
}
#landscape-overlay .lo-text {
  font-size: .95rem;
  font-weight: 600;
  color: var(--gold-light);
  line-height: 1.5;
}
@media screen and (orientation: landscape) and (max-height: 500px) {
  #landscape-overlay { display: flex; }
}