/* ── SPEAK FILL MODE v2 — Boşluk Doldur ──────────────────────────────────── */

/* ── Tab şeridi ── */
.spk-tabs {
  display: flex;
  gap: 6px;
  padding: 0 2px 14px;
}
.spk-tab {
  flex: 1;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(241,245,249,0.5);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.01em;
}
.spk-tab.spk-tab-on {
  background: rgba(6,182,212,0.16);
  border-color: rgba(6,182,212,0.38);
  color: #06b6d4;
  box-shadow: 0 0 16px rgba(6,182,212,0.1);
}
.spk-tab:hover:not(.spk-tab-on) {
  background: rgba(255,255,255,0.07);
  color: rgba(241,245,249,0.8);
}

/* Seviye pill */
.sfm-level-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  letter-spacing: 0.03em;
}

/* ── Sarmalayıcı ── */
.sfm-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 28px;
  max-width: 540px;
  margin: 0 auto;
}


/* ── Üst bar ── */
.sfm-topbar { display: flex; flex-direction: column; gap: 6px; }
.sfm-stats  { display: flex; align-items: center; gap: 6px; }
.sfm-stat-chip {
  font-size: 0.77rem;
  color: rgba(148,163,184,0.75);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 3px 9px;
  border-radius: 20px;
}
.sfm-stat-chip strong { color: #f1f5f9; }
.sfm-stat-chip em { color: rgba(148,163,184,0.45); font-style: normal; }
.sfm-prog-track {
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
}
.sfm-prog-fill {
  height: 100%;
  background: linear-gradient(90deg,#06b6d4,#a78bfa);
  border-radius: 99px;
  transition: width 0.5s ease;
}

/* ── Ana kart ── */
.sfm-card {
  background: linear-gradient(160deg,
    rgba(15,23,42,0.96) 0%,
    rgba(10,14,28,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.35s, box-shadow 0.35s;
}
.sfm-card.sfm-card-done {
  border-color: rgba(6,182,212,0.25);
  box-shadow: 0 0 32px rgba(6,182,212,0.07);
}

/* Türkçe cümle — büyük ve belirgin */
.sfm-tr-sentence {
  font-size: 1.35rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-align: center;
  padding: 4px 0 6px;
}

/* ── Kelime bankası ── */
.sfm-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 4px 0 8px;
  justify-content: center;
}
.sfm-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  color: #e2e8f0;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: 'Georgia', serif;
  letter-spacing: 0.01em;
  transition: all 0.25s;
  user-select: none;
}
/* Kullanıcı söyledi → teal */
.sfm-chip.sfm-chip-ok {
  background: rgba(6,182,212,0.15);
  border-color: rgba(6,182,212,0.35);
  color: #67e8f9;
  text-decoration: line-through;
  opacity: 0.55;
}
/* TTS otomatik → amber */
.sfm-chip.sfm-chip-auto {
  background: rgba(251,191,36,0.12);
  border-color: rgba(251,191,36,0.3);
  color: #fbbf24;
  text-decoration: line-through;
  opacity: 0.5;
}

/* Ayırıcı */
.sfm-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(6,182,212,0.25), transparent);
  margin: 0 -4px;
}

/* ── Boşluk alanı ── */
.sfm-blanks-area {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 6px 0 2px;
  min-height: 56px;
}

/* Her kelime yuvası */
.sfm-word-slot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Kelime metni (dolu olunca görünür) */
.sfm-slot-fill {
  font-size: 1.3rem;
  font-weight: 800;
  font-family: 'Georgia', serif;
  color: transparent;
  position: relative;
  white-space: nowrap;
  letter-spacing: -0.01em;
  min-width: 4px;
  line-height: 1.3;
  display: block;
}

/* Kullanıcı söyledi → teal */
.sfm-slot-fill.sfm-slot-filled {
  color: #67e8f9;
  text-shadow: 0 0 18px rgba(6,182,212,0.45);
}

/* TTS otomatik doldurdu → amber */
.sfm-slot-fill.sfm-slot-auto {
  color: #fbbf24;
  text-shadow: 0 0 16px rgba(251,191,36,0.35);
}

/* Kelime çıkış animasyonu */
@keyframes sfmWordPop {
  0%   { transform: translateY(10px) scale(0.7); opacity: 0; }
  65%  { transform: translateY(-3px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0)   scale(1);    opacity: 1; }
}
.sfm-slot-fill.sfm-slot-pop {
  animation: sfmWordPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Otomatik doldurma — yavaş fade */
@keyframes sfmWordFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sfm-slot-fill.sfm-slot-auto {
  animation: sfmWordFade 0.3s ease both;
}

/* Tire çizgileri — her harf için ayrı küçük çizgi */
.sfm-slot-dashes {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  margin-top: 3px;
}
.sfm-dash {
  display: inline-block;
  width: 9px;
  height: 2.5px;
  background: rgba(100,116,139,0.45);
  border-radius: 99px;
}

/* Noktalama */
.sfm-slot-punc {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(148,163,184,0.4);
  font-family: 'Georgia', serif;
  align-self: flex-end;
  margin-left: 1px;
  line-height: 1.3;
}

/* Canlı transkript */
.sfm-live { min-height: 20px; }
.sfm-live-txt {
  font-size: 0.78rem;
  color: rgba(148,163,184,0.45);
  font-style: italic;
}

/* ── Mikrofon bölümü ── */
.sfm-mic-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.sfm-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 48px;
}
.sfm-bar {
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  transition: height 0.07s ease;
}
.sfm-mic-outer {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sfm-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(6,182,212,0.15);
  pointer-events: none;
  transition: opacity 0.3s;
}
.sfm-ring-1 { width: 96px;  height: 96px;  }
.sfm-ring-2 { width: 116px; height: 116px; }
@keyframes sfmP1 { 0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.06);opacity:.9} }
@keyframes sfmP2 { 0%,100%{transform:scale(1);opacity:.25}50%{transform:scale(1.1); opacity:.6} }
.sfm-ring-on.sfm-ring-1 { border-color:rgba(6,182,212,0.5); animation:sfmP1 1.4s ease-in-out infinite; }
.sfm-ring-on.sfm-ring-2 { border-color:rgba(6,182,212,0.28);animation:sfmP2 1.8s ease-in-out infinite; }

.sfm-mic-btn {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg,#0e7490,#1e40af);
  box-shadow: 0 8px 28px rgba(6,182,212,0.32), 0 0 0 3px rgba(6,182,212,0.1),
              inset 0 1px 0 rgba(255,255,255,0.15);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.18s, box-shadow 0.18s;
  position: relative; z-index: 1;
}
.sfm-mic-btn:hover:not(:disabled) {
  transform: scale(1.06);
  box-shadow: 0 12px 36px rgba(6,182,212,0.42), 0 0 0 4px rgba(6,182,212,0.16);
}
.sfm-mic-btn:disabled { opacity:0.4; cursor:not-allowed; }
.sfm-mic-btn.sfm-mic-rec {
  background: linear-gradient(135deg,#7c3aed,#0e7490);
  box-shadow: 0 8px 32px rgba(124,58,237,0.38), 0 0 0 3px rgba(124,58,237,0.14);
}
.sfm-mic-btn.sfm-mic-proc {
  background: rgba(30,41,59,0.8);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

.sfm-status {
  font-size: 0.8rem;
  color: rgba(148,163,184,0.55);
  text-align: center;
  min-height: 20px;
}
@keyframes sfmBlink{0%,100%{opacity:1}50%{opacity:.15}}
.sfm-dot {
  display:inline-block; width:8px; height:8px;
  background:#06b6d4; border-radius:50%; margin-right:5px;
  animation:sfmBlink 1.1s ease-in-out infinite;
}
@keyframes sfmSpin{to{transform:rotate(360deg)}}
.sfm-spinner {
  width:22px; height:22px;
  border:3px solid rgba(255,255,255,0.12);
  border-top-color:#06b6d4;
  border-radius:50%;
  animation:sfmSpin 0.8s linear infinite;
}

/* ── Sonuç ── */
@keyframes sfmResIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.sfm-result {
  background: rgba(15,23,42,0.75);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.sfm-result.sfm-result-anim { animation: sfmResIn 0.3s ease both; }
.sfm-result-msg {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sfm-res-label { font-size: 0.95rem; font-weight: 700; }
.sfm-res-pct   { font-size: 0.85rem; font-weight: 600; }
.sfm-xp {
  font-size: 0.72rem; font-weight: 800;
  background: rgba(52,211,153,0.14);
  color: #34d399; padding: 2px 9px;
  border-radius: 99px; border: 1px solid rgba(52,211,153,0.25);
}
.sfm-result-btns { display: flex; gap: 8px; }
.sfm-rbtn {
  flex: 1; padding: 10px; border-radius: 12px;
  font-size: 0.83rem; font-weight: 700; cursor: pointer;
  transition: all 0.18s; border: 1px solid transparent;
}
.sfm-rbtn-ghost {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(241,245,249,0.65);
}
.sfm-rbtn-ghost:hover { background:rgba(255,255,255,0.09); color:#f1f5f9; }
.sfm-rbtn-primary {
  background: linear-gradient(135deg,#0e7490,#1e40af);
  color:#fff; box-shadow:0 4px 14px rgba(6,182,212,0.22);
}
.sfm-rbtn-primary:hover { box-shadow:0 6px 22px rgba(6,182,212,0.35); transform:translateY(-1px); }

/* ── Navigasyon ── */
.sfm-nav { display:flex; align-items:center; justify-content:center; gap:10px; }
.sfm-nav-btn {
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
  color:rgba(148,163,184,0.55);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.18s;
}
.sfm-nav-btn:hover:not(:disabled) { border-color:rgba(6,182,212,0.3); color:#06b6d4; }
.sfm-nav-btn:disabled { opacity:0.2; cursor:not-allowed; }
.sfm-skip-btn {
  padding:8px 20px; border-radius:20px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
  color:rgba(148,163,184,0.6);
  font-size:0.8rem; font-weight:700; cursor:pointer; transition:all 0.18s;
}
.sfm-skip-btn:hover { border-color:rgba(248,113,113,0.3); color:#f87171; }

/* ── Boş durum ── */
.sfm-empty { text-align:center; padding:48px 16px; color:rgba(148,163,184,0.35); }

/* ── Mobil ── */
@media (max-width: 480px) {
  .sfm-tr-main      { font-size:1.05rem !important; }
  .sfm-slot-fill    { font-size:1.1rem !important; }
  .sfm-slot-dashes  { font-size:0.9rem !important; }
  .sfm-blanks-area  { gap:5px 8px !important; }
  .sfm-card         { padding:16px 14px 14px !important; }
  .sfm-mic-btn      { width:64px !important; height:64px !important; }
  .sfm-ring-1       { width:82px !important; height:82px !important; }
  .sfm-ring-2       { width:100px !important; height:100px !important; }
}

/* ── Portrait: tam viewport'a sabitlenmiş, kaydırma yok ── */
@media (orientation: portrait) and (max-width: 500px) {
  #spk-pane-fill:not([style*="display: none"]):not([style*="display:none"]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 50 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg, #0a0a14) !important;
    overflow: hidden !important;
  }
  #speak-fill-point {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }
  .sfm-wrap {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 8px 14px calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 10px) !important;
    overflow: hidden !important;
    min-height: 0 !important;
    max-width: 100% !important;
  }
  /* Kart kompakt — içerik kadar yükseklik */
  .sfm-card {
    flex-shrink: 0 !important;
    padding: 16px 14px 14px !important;
    gap: 10px !important;
    border-radius: 18px !important;
  }
  /* Mikrofon: kalan alanı doldur ve içeriği ortala */
  .sfm-mic-section {
    flex: 1 !important;
    justify-content: center !important;
    margin-top: 0 !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  /* Wave çizgisini gizle — cümle tekrar gibi temiz görünüm */
  .sfm-wave { display: none !important; }
  .sfm-nav { flex-shrink: 0 !important; gap: 8px !important; }
  /* Tipografi */
  .sfm-tr-sentence { font-size: 1.12rem !important; line-height: 1.4 !important; padding: 0 0 4px !important; }
  .sfm-bank   { gap: 5px !important; padding: 0 0 4px !important; }
  .sfm-chip   { padding: 5px 11px !important; font-size: 0.82rem !important; }
  .sfm-slot-fill { font-size: 1.1rem !important; }
  .sfm-mic-outer { width: 88px !important; height: 88px !important; }
  .sfm-mic-btn   { width: 76px !important; height: 76px !important; }
  .sfm-ring-1 { width: 96px !important; height: 96px !important; }
  .sfm-ring-2 { width: 116px !important; height: 116px !important; }
  .sfm-status { font-size: 0.8rem !important; }
}

/* ── Landscape: tam ekran, CSS Grid — sol kart, sağ mikrofon ── */
@media (orientation: landscape) and (max-height: 500px) {
  #spk-pane-fill:not([style*="display: none"]):not([style*="display:none"]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 50 !important;
    background: var(--bg, #0a0a14) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Back button satırı — ince */
  #spk-pane-fill > div:first-child {
    padding: 4px max(12px, env(safe-area-inset-left)) 0 max(12px, env(safe-area-inset-left)) !important;
    flex-shrink: 0 !important;
  }
  #speak-fill-point {
    flex: 1 !important;
    overflow: hidden !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Grid: sol sütun içerik (1fr), sağ sütun mikrofon (150px) */
  .sfm-wrap {
    flex: 1 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 4px max(14px, env(safe-area-inset-right)) 6px max(14px, env(safe-area-inset-left)) !important;
    display: grid !important;
    grid-template-columns: 1fr 148px !important;
    grid-template-rows: auto 1fr auto auto !important;
    grid-template-areas:
      "topbar mic"
      "card   mic"
      "result mic"
      "nav    mic" !important;
    gap: 4px 16px !important;
  }
  /* Her alan grid-area ile yerini alıyor */
  .sfm-topbar {
    grid-area: topbar !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .sfm-stats { flex-wrap: nowrap !important; }
  .sfm-stat-chip { font-size: 0.72rem !important; padding: 3px 8px !important; }
  .sfm-prog-track { display: none !important; }
  .sfm-card {
    grid-area: card !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    border-radius: 14px !important;
    padding: 10px 14px 8px !important;
    gap: 6px !important;
    float: none !important;
    width: auto !important;
    margin-right: 0 !important;
  }
  .sfm-tr-sentence { font-size: 1rem !important; padding: 0 0 3px !important; line-height: 1.3 !important; }
  .sfm-bank  { gap: 5px !important; padding: 0 0 3px !important; }
  .sfm-chip  { padding: 4px 10px !important; font-size: 0.8rem !important; }
  .sfm-blanks-area { gap: 4px 7px !important; min-height: 36px !important; }
  .sfm-slot-fill { font-size: 1rem !important; }
  .sfm-result {
    grid-area: result !important;
    clear: none !important;
  }
  .sfm-nav {
    grid-area: nav !important;
    clear: none !important;
    flex-shrink: 0 !important;
    justify-content: flex-start !important;
    padding-right: 0 !important;
    gap: 8px !important;
  }
  /* Mikrofon — sağ sütun, dikeyde ortada */
  .sfm-mic-section {
    grid-area: mic !important;
    position: static !important;
    transform: none !important;
    width: 148px !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  .sfm-wave   { display: none !important; }
  .sfm-mic-outer { width: 80px !important; height: 80px !important; }
  .sfm-mic-btn   { width: 70px !important; height: 70px !important; }
  .sfm-ring-1 { width: 90px !important; height: 90px !important; }
  .sfm-ring-2 { width: 108px !important; height: 108px !important; }
  .sfm-status { font-size: 0.75rem !important; text-align: center !important; max-width: 128px !important; }
}

/* ── Fullscreen: speak-container fills the screen ── */
.speak-container:fullscreen,
.speak-container:-webkit-full-screen {
  background: var(--bg, #0a0a14);
  overflow-y: auto;
  height: 100dvh !important;
}