/* ============================================================
   VocaLuma — components.css
   Reusable UI: Forms, Chips, Lesson Layout, Exercise, Table
   ============================================================ */

/* ── Form Elements ──────────────────────────────────────── */
.form-group { margin-bottom:1.2rem; }
.label { display:block; font-size:0.83rem; color:var(--tx2); margin-bottom:0.5rem; }
.input, .textarea, select.sel {
  width:100%; background:var(--s2); border:1px solid var(--b1);
  border-radius:var(--r2); padding:0.72rem 1rem;
  color:var(--tx); font-size:0.9rem; outline:none; transition:border-color 0.2s;
}
.input:focus,.textarea:focus,select.sel:focus { border-color:var(--accent); }
.input::placeholder,.textarea::placeholder { color:var(--tx3); }
.textarea { resize:vertical; line-height:1.7; min-height:130px; }
select.sel option { background:var(--s2); }

/* ── Chips ──────────────────────────────────────────────── */
.chips { display:flex; gap:0.45rem; flex-wrap:wrap; }
.chip {
  background:var(--s2); border:1px solid var(--b1);
  border-radius:20px; padding:0.35rem 0.95rem;
  font-size:0.82rem; color:var(--tx2); cursor:pointer; transition:all 0.15s;
}
.chip:hover { border-color:var(--b2); color:var(--tx); }
.chip.on { background:var(--adim); border-color:var(--accent); color:var(--accent); }

/* ── Divider ────────────────────────────────────────────── */
hr.div { border:none; border-top:1px solid var(--b1); margin:1.5rem 0; }
.div-txt { display:flex; align-items:center; gap:1rem; color:var(--tx3); font-size:0.8rem; margin:1.2rem 0; }
.div-txt::before,.div-txt::after { content:''; flex:1; border-top:1px solid var(--b1); }

/* ── Upload Zone ────────────────────────────────────────── */
.upload-zone {
  border:2px dashed var(--b1); border-radius:var(--r3);
  padding:2.5rem; text-align:center; cursor:pointer;
  transition:all 0.2s; background:var(--s2); margin-bottom:1.2rem;
}
.upload-zone:hover { border-color:var(--accent); background:rgba(123,110,246,0.04); }
.upload-zone h3 { font-size:0.95rem; font-weight:500; }
.upload-zone p  { font-size:0.82rem; color:var(--tx2); margin-top:0.3rem; }

/* ── Lesson Layout ──────────────────────────────────────── */
.lesson-layout {
  display:grid; grid-template-columns:272px 1fr;
  gap:1.5rem; align-items:start;
}
.lesson-sidebar {
  position:sticky; top:calc(var(--nav-h) + 1.5rem);
  background:var(--s1); border:1px solid var(--b1); border-radius:var(--r3); overflow:hidden;
}
.sidebar-hd { padding:1rem 1.2rem; border-bottom:1px solid var(--b1); }
.sidebar-course { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); margin-bottom:0.25rem; }
.sidebar-mod    { font-family:var(--serif); font-size:0.95rem; letter-spacing:-0.02em; }
.sidebar-prog   { padding:0.75rem 1.2rem; border-bottom:1px solid var(--b1); }
.sidebar-prog-lbl { font-size:0.74rem; color:var(--tx2); display:flex; justify-content:space-between; margin-bottom:0.4rem; }
.lesson-list    { padding:0.4rem 0; }
.l-item {
  display:flex; align-items:center; gap:0.7rem;
  padding:0.55rem 1.2rem; font-size:0.82rem; color:var(--tx2);
  cursor:pointer; transition:all 0.14s; border-left:2px solid transparent;
}
.l-item:hover { color:var(--tx); background:var(--s2); }
.l-item.on    { color:var(--accent); background:var(--adim); border-left-color:var(--accent); }
.l-item.done  { color:var(--teal); }
.l-item.lock  { opacity:0.38; cursor:not-allowed; }
.l-item.lock:hover { background:none; color:var(--tx2); }
.l-dot { width:17px; height:17px; border-radius:50%; border:1.5px solid var(--b2); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.58rem; }
.l-item.done .l-dot { background:var(--teal); border-color:var(--teal); color:#07201F; }
.l-item.on .l-dot   { border-color:var(--accent); background:var(--adim); }
.l-name { flex:1; line-height:1.4; }
.l-dur  { font-size:0.7rem; color:var(--tx3); }

/* ── Lesson Main ────────────────────────────────────────── */
.lesson-main { background:var(--s1); border:1px solid var(--b1); border-radius:var(--r4); overflow:hidden; min-height:600px; }
.lesson-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 2rem; border-bottom:1px solid var(--b1); background:var(--s2);
}
.breadcrumb { font-size:0.8rem; color:var(--tx2); display:flex; align-items:center; gap:0.35rem; }
.breadcrumb .sep { color:var(--tx3); }
.lesson-body { padding:2.5rem 2rem; animation:fdin 0.3s ease; }

/* ── Lesson Content ─────────────────────────────────────── */
.l-tags { margin-bottom:0.9rem; }
.l-h1 { font-family:var(--serif); font-size:2rem; letter-spacing:-0.03em; margin-bottom:0.5rem; line-height:1.2; }
.l-sub { font-size:1rem; color:var(--tx2); margin-bottom:2rem; line-height:1.6; }

.section { margin-bottom:1.8rem; }
.section h3 { font-family:var(--serif); font-size:1.12rem; margin-bottom:0.7rem; letter-spacing:-0.02em; }
.section p  { color:var(--tx2); line-height:1.8; font-size:0.9rem; margin-bottom:0.6rem; }
.section strong { color:var(--tx); font-weight:500; }

.ex-box {
  background:var(--s2); border-left:3px solid var(--accent);
  border-radius:0 var(--r1) var(--r1) 0;
  padding:0.9rem 1.2rem; margin:0.7rem 0;
  font-size:0.875rem; color:var(--tx); line-height:1.75;
}
.tip-box {
  background:var(--tdim); border:1px solid rgba(78,205,196,0.2);
  border-radius:var(--r2); padding:0.85rem 1.1rem;
  margin:0.8rem 0; font-size:0.85rem; color:var(--tx); line-height:1.6;
}
.tip-box strong { color:var(--teal); }
.warn-box {
  background:rgba(255,107,107,0.08); border:1px solid rgba(255,107,107,0.2);
  border-radius:var(--r2); padding:0.85rem 1.1rem;
  margin:0.8rem 0; font-size:0.85rem; color:var(--tx); line-height:1.6;
}
.warn-box strong { color:var(--coral); }
.info-box {
  background:var(--adim); border:1px solid rgba(123,110,246,0.2);
  border-radius:var(--r2); padding:0.85rem 1.1rem;
  margin:0.8rem 0; font-size:0.85rem; color:var(--tx); line-height:1.6;
}
.info-box strong { color:var(--accent); }

/* ── Table ──────────────────────────────────────────────── */
.tbl-wrap { overflow-x:auto; margin:0.8rem 0; border-radius:var(--r2); border:1px solid var(--b1); }
.tbl { width:100%; border-collapse:collapse; font-size:0.865rem; }
.tbl th { background:var(--s2); padding:0.6rem 0.9rem; text-align:left; font-weight:500; color:var(--tx2); border-bottom:1px solid var(--b1); white-space:nowrap; }
.tbl td { padding:0.52rem 0.9rem; border-bottom:1px solid rgba(37,37,56,0.65); color:var(--tx2); line-height:1.5; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:var(--s2); }
.tbl strong { color:var(--tx); }

/* ── Vocab Grid ─────────────────────────────────────────── */
.vocab-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:0.65rem; margin:0.8rem 0; }
.vocab-card { background:var(--s2); border:1px solid var(--b1); border-radius:var(--r2); padding:0.8rem 1rem; }
.vocab-word { font-weight:500; font-size:0.95rem; }
.vocab-ipa  { font-size:0.7rem; color:var(--tx3); font-style:italic; margin-left:0.4rem; }
.vocab-tr   { font-size:0.78rem; color:var(--tx2); margin-top:0.15rem; }
.vocab-ex   { font-size:0.75rem; color:var(--tx3); font-style:italic; margin-top:0.15rem; }

/* ── Exercise Wrap ──────────────────────────────────────── */
.ex-wrap { margin-top:2.2rem; padding-top:2rem; border-top:1px solid var(--b1); }
.ex-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.ex-header h3 { font-family:var(--serif); font-size:1.05rem; letter-spacing:-0.02em; }

/* ── Exercise Tabs ──────────────────────────────────────── */
.ex-tabs { display:flex; gap:0.38rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.ex-tab {
  background:var(--s2); border:1px solid var(--b1); border-radius:var(--r1);
  padding:0.42rem 0.95rem; font-size:0.82rem; color:var(--tx2);
  cursor:pointer; transition:all 0.14s; font-family:var(--sans);
}
.ex-tab:hover { border-color:var(--b2); color:var(--tx); }
.ex-tab.on    { background:var(--adim); border-color:var(--accent); color:var(--accent); }

/* ── Quiz ───────────────────────────────────────────────── */
.quiz-card { background:var(--s2); border-radius:var(--r3); padding:1.4rem; margin-bottom:1.1rem; }
.quiz-q    { font-size:0.93rem; margin-bottom:1.1rem; font-weight:500; line-height:1.5; }
.quiz-opts { display:flex; flex-direction:column; gap:0.45rem; }
.quiz-opt  {
  display:flex; align-items:center; gap:0.75rem;
  padding:0.6rem 0.95rem; border-radius:var(--r2);
  border:1px solid var(--b1); cursor:pointer;
  font-size:0.87rem; color:var(--tx2); transition:all 0.14s;
}
.quiz-opt:hover  { border-color:var(--b2); color:var(--tx); background:var(--s3); }
.quiz-opt.sel    { border-color:var(--accent); color:var(--accent); background:var(--adim); }
.quiz-opt.right  { border-color:var(--teal);  color:var(--teal);  background:var(--tdim); }
.quiz-opt.wrong  { border-color:var(--coral); color:var(--coral); background:var(--cdim); }
.quiz-letter { width:23px; height:23px; border-radius:5px; background:var(--s3); border:1px solid var(--b1); display:flex; align-items:center; justify-content:center; font-size:0.73rem; font-weight:500; flex-shrink:0; }
.quiz-fb { margin-top:0.9rem; padding:0.7rem 0.95rem; border-radius:var(--r2); font-size:0.84rem; display:none; line-height:1.6; }
.quiz-fb.ok  { background:var(--tdim); color:var(--teal); }
.quiz-fb.bad { background:var(--cdim); color:var(--coral); }

/* ── Speaking Card ──────────────────────────────────────── */
.speak-card { background:var(--s2); border:1px solid var(--b1); border-radius:var(--r3); padding:1.4rem; margin-bottom:0.9rem; }
.speak-prompt { font-family:var(--serif); font-size:1.15rem; letter-spacing:-0.02em; margin-bottom:0.35rem; }
.speak-hint   { font-size:0.82rem; color:var(--tx2); margin-bottom:1.3rem; }
.speak-ctrl   { display:flex; align-items:center; gap:1rem; }
.rec-btn { width:52px; height:52px; border-radius:50%; background:var(--accent); border:none; color:#fff; font-size:1.15rem; display:flex; align-items:center; justify-content:center; transition:all 0.2s; flex-shrink:0; }
.rec-btn.rec  { background:var(--coral); animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,107,107,0.4)} 50%{box-shadow:0 0 0 11px rgba(255,107,107,0)} }
.waveform { flex:1; height:36px; background:var(--s3); border-radius:var(--r1); display:flex; align-items:center; gap:2.5px; padding:0 10px; overflow:hidden; }
.wave-bar { width:3px; border-radius:2px; background:var(--accent); opacity:0.32; transition:height 0.09s; }
.rec-time { font-size:0.8rem; color:var(--tx2); min-width:36px; }
.speak-tips { background:var(--s2); border:1px solid var(--b1); border-radius:var(--r2); padding:0.9rem 1.1rem; margin-top:0.7rem; }
.speak-tips p { font-size:0.82rem; color:var(--tx2); margin-bottom:0.3rem; line-height:1.6; }

/* ── Writing Editor ─────────────────────────────────────── */
.write-prompt { background:var(--s2); border-left:3px solid var(--amber); border-radius:0 var(--r2) var(--r2) 0; padding:0.9rem 1.1rem; margin-bottom:0.9rem; font-size:0.875rem; line-height:1.7; color:var(--tx); }
.write-prompt strong { color:var(--amber); }
.write-editor { background:var(--s2); border:1px solid var(--b1); border-radius:var(--r3); overflow:hidden; }
.write-editor textarea { width:100%; background:transparent; border:none; padding:1.1rem; color:var(--tx); font-size:0.9rem; line-height:1.8; resize:none; outline:none; min-height:190px; }
.write-editor textarea::placeholder { color:var(--tx3); }
.write-bar { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1.1rem; border-top:1px solid var(--b1); }
.wc-badge { font-size:0.78rem; color:var(--tx3); }
.wc-badge.ok { color:var(--green); }
.ai-fb-box { background:var(--s2); border:1px solid var(--b2); border-radius:var(--r3); padding:1.1rem; margin-top:0.9rem; display:none; }
.ai-fb-hd { display:flex; align-items:center; gap:0.65rem; margin-bottom:0.9rem; }
.ai-bubble { width:26px; height:26px; background:linear-gradient(135deg,var(--accent),var(--teal)); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:0.7rem; color:#fff; flex-shrink:0; }

/* ── Lesson Complete ────────────────────────────────────── */
.l-complete { text-align:center; padding:3rem 2rem; }
.l-complete .trophy  { font-size:3rem; margin-bottom:0.9rem; }
.l-complete h2 { font-family:var(--serif); font-size:1.6rem; letter-spacing:-0.02em; margin-bottom:0.4rem; }
.l-complete p  { color:var(--tx2); font-size:0.9rem; margin-bottom:1.8rem; }
.l-complete-stats { display:flex; justify-content:center; gap:2rem; margin-bottom:2rem; }
.lcs-val { font-size:1.9rem; font-family:var(--serif); color:var(--accent); }
.lcs-lbl { font-size:0.76rem; color:var(--tx2); margin-top:0.15rem; }

/* ── Sidebar Toggle Button (mobilde görünür) ─────────────── */
.sidebar-toggle {
  display:none;
  width:100%; background:var(--s2); border:1px solid var(--b1);
  border-radius:var(--r2); padding:0.65rem 1rem;
  color:var(--tx2); font-size:0.85rem; text-align:left;
  cursor:pointer; font-family:var(--sans); margin-bottom:1rem;
  justify-content:space-between; align-items:center;
}
.sidebar-toggle .arr { transition:transform 0.2s; }
.sidebar-toggle.open .arr { transform:rotate(180deg); }

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:900px){
  .lesson-layout { grid-template-columns:1fr; }
  .lesson-sidebar { position:static; }
  .l-h1 { font-size:1.5rem; }
  .lesson-body { padding:1.4rem 1.1rem; }
}

@media(max-width:768px){
  /* Lesson sidebar — toggle ile gizle/göster */
  .sidebar-toggle { display:flex; }
  .lesson-sidebar { display:none; }
  .lesson-sidebar.open { display:block; }

  /* Vocab grid — 2 sütun */
  .vocab-grid { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); }

  /* Speaking card */
  .speak-ctrl { flex-wrap:wrap; }

  /* Writing bar */
  .write-bar { flex-direction:column; align-items:flex-start; gap:0.5rem; }

  /* Lesson complete stats */
  .l-complete-stats { gap:1.2rem; }
  .lcs-val { font-size:1.5rem; }
}

@media(max-width:600px){
  /* Quiz seçenekler tam genişlik */
  .quiz-opts { gap:0.5rem; }
  .quiz-opt { font-size:0.84rem; padding:0.65rem 0.85rem; }

  /* Vocab tek sütun */
  .vocab-grid { grid-template-columns:1fr 1fr; }

  /* Ders içerik */
  .lesson-topbar { padding:0.9rem 1rem; }
  .breadcrumb { font-size:0.73rem; }
  .l-h1 { font-size:1.3rem; }
  .l-sub { font-size:0.9rem; }

  /* Form */
  .input, .textarea, select.sel { font-size:0.875rem; }

  /* Chips */
  .chip { font-size:0.78rem; padding:0.3rem 0.75rem; }
}