/* ---------- FON İŞIĞI ---------- */
  .ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
  .ambient span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.28;}
  .ambient .a1{width:520px;height:520px;background:var(--accent);top:-220px;left:-120px;animation:drift1 26s ease-in-out infinite;}
  .ambient .a2{width:420px;height:420px;background:var(--clay);top:-80px;right:-140px;opacity:.16;animation:drift2 32s ease-in-out infinite;}
  :root[data-theme="dark"] .ambient span{opacity:.22;}
  :root[data-theme="dark"] .ambient .a2{opacity:.13;}
  @keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(70px,50px) scale(1.12);}}
  @keyframes drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-60px,40px) scale(1.08);}}

  /* ---------- HERO ---------- */
  .hero{padding:44px 0 30px;}
  .hero h1{max-width:16ch;margin-bottom:14px;}
  .hero .lead{font-size:17px;}

  /* ---------- KART ---------- */
  .tcard{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 1px 2px rgba(var(--ink-rgb),.04),0 18px 50px -24px rgba(var(--ink-rgb),.28);
    transition:box-shadow .3s ease,border-color .3s ease;
  }
  .tcard:focus-within{
    border-color:rgba(var(--accent-rgb),.45);
    box-shadow:0 1px 2px rgba(var(--ink-rgb),.04),0 22px 60px -26px rgba(var(--accent-rgb),.45);
  }

  .langbar{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    border-bottom:1px solid var(--line);background:rgba(var(--ink-rgb),.014);
  }
  .lang-cell{position:relative;}
  .lang-cell select{
    appearance:none;width:100%;background:none;border:none;cursor:pointer;
    padding:17px 42px 17px 24px;font-size:14.5px;font-weight:700;letter-spacing:-.005em;
    transition:color .16s ease;
  }
  .lang-cell select:hover{color:var(--accent);}
  .lang-cell::after{
    content:"";position:absolute;right:22px;top:50%;
    width:7px;height:7px;margin-top:-5px;pointer-events:none;
    border-right:1.9px solid var(--muted);border-bottom:1.9px solid var(--muted);transform:rotate(45deg);
  }
  .swap{
    width:38px;height:38px;flex-shrink:0;margin:0 6px;
    background:var(--surface);border:1px solid var(--line-strong);border-radius:50%;
    cursor:pointer;color:var(--muted);
    display:flex;align-items:center;justify-content:center;
    transition:color .18s ease,border-color .18s ease,background .18s ease,transform .45s cubic-bezier(.34,1.4,.64,1);
  }
  .swap svg{width:16px;height:16px;}
  .swap:hover:not(:disabled){color:var(--accent);border-color:var(--accent);background:rgba(var(--accent-rgb),.09);}
  .swap:disabled{opacity:.3;cursor:not-allowed;}
  .swap.spin{transform:rotate(180deg);}

  .panes{display:grid;grid-template-columns:1fr 1fr;min-height:280px;}
  .pane{padding:24px 26px;position:relative;display:flex;flex-direction:column;}
  .pane + .pane{border-left:1px solid var(--line);background:rgba(var(--ink-rgb),.012);}
  .pane textarea,.pane .out{
    flex:1;width:100%;border:none;background:none;resize:none;
    font-size:20px;line-height:1.62;letter-spacing:-.004em;padding:0;margin:0;
  }
  .pane textarea::placeholder{color:var(--muted);opacity:.75;}
  .pane textarea:focus{outline:none;}
  .pane .out{white-space:pre-wrap;word-break:break-word;}
  .pane .out.empty{color:var(--muted);opacity:.7;}
  .pane .out.loading{opacity:.35;}
  .note{
    font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--accent);margin:0 0 11px;min-height:14px;font-weight:500;
  }

  /* Tələffüz sətri — saytın əsas fərqləndiricisi, ona görə
     görünməsi hiss olunsun: aşağıdan sürüşüb açılır. */
  .say-row{
    display:none;align-items:center;gap:10px;margin-top:14px;
    padding-top:13px;border-top:1px dashed var(--line);
  }
  .say-row.show{display:flex;animation:sayIn .34s cubic-bezier(.2,.8,.3,1) both;}
  @keyframes sayIn{
    from{opacity:0;transform:translateY(-7px);}
    to{opacity:1;transform:translateY(0);}
  }

  /* Yeni tərcümə gələndə mətn sakitcə yerinə oturur —
     dəyişdiyi bilinsin, amma diqqəti dağıtmasın. */
  .pane .out.fresh{animation:outIn .3s ease both;}
  @keyframes outIn{
    from{opacity:.25;transform:translateY(4px);}
    to{opacity:1;transform:translateY(0);}
  }

  /* Vitrin kartları ardıcıl açılır — altısı eyni anda sıçramasın. */
  .js .showcase .sc-item{opacity:0;}
  .js .showcase.in .sc-item{animation:scIn .5s cubic-bezier(.2,.8,.3,1) both;}
  .js .showcase.in .sc-item:nth-child(1){animation-delay:.04s;}
  .js .showcase.in .sc-item:nth-child(2){animation-delay:.10s;}
  .js .showcase.in .sc-item:nth-child(3){animation-delay:.16s;}
  .js .showcase.in .sc-item:nth-child(4){animation-delay:.22s;}
  .js .showcase.in .sc-item:nth-child(5){animation-delay:.28s;}
  .js .showcase.in .sc-item:nth-child(6){animation-delay:.34s;}
  @keyframes scIn{
    from{opacity:0;transform:translateY(12px) scale(.97);}
    to{opacity:1;transform:translateY(0) scale(1);}
  }
  /* Animasiya söndürüləndə kartlar gizli qalmamalıdır. */
  @media(prefers-reduced-motion:reduce){
    .js .showcase .sc-item{opacity:1;}
  }
  .say-btn{
    width:32px;height:32px;flex-shrink:0;border-radius:50%;
    background:none;border:1px solid var(--line-strong);cursor:pointer;color:var(--muted);
    display:flex;align-items:center;justify-content:center;
    transition:color .18s ease,border-color .18s ease,background .18s ease,transform .14s ease;
  }
  .say-btn svg{width:15px;height:15px;}
  .say-btn:hover{color:var(--accent);border-color:var(--accent);background:rgba(var(--accent-rgb),.09);}
  .say-btn:active{transform:scale(.9);}
  .say-btn.playing{color:var(--accent);border-color:var(--accent);background:rgba(var(--accent-rgb),.12);}
  .say-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .reading{
    font-size:15px;line-height:1.45;color:var(--ink);font-weight:600;
    word-break:break-word;
  }
  .reading .lbl{
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;
    text-transform:uppercase;color:var(--muted);font-weight:500;margin-right:7px;
  }
  .ipa{
    font-family:var(--font-mono);font-size:12.5px;color:var(--muted);
    word-break:break-word;
  }

  .cardfoot{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:14px 24px;border-top:1px solid var(--line);flex-wrap:wrap;
    background:rgba(var(--ink-rgb),.014);
  }
  .count{font-family:var(--font-mono);font-size:12px;color:var(--muted);}
  .count.warn{color:var(--clay);font-weight:500;}
  .count.over{color:var(--err);font-weight:500;}
  .actions{display:flex;gap:8px;flex-wrap:wrap;}
  .act{
    background:none;border:1px solid var(--line-strong);border-radius:9px;
    padding:8px 14px;font-size:13.5px;font-weight:600;cursor:pointer;
    display:inline-flex;align-items:center;gap:7px;
    transition:border-color .18s ease,color .18s ease,background .18s ease,transform .14s ease;
  }
  .act svg{width:14px;height:14px;}
  .act:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
  .act:active:not(:disabled){transform:scale(.96);}
  .act:disabled{opacity:.38;cursor:not-allowed;}
  .act.done,.act.on{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb),.1);}

  /* ---------- NÜMUNƏLƏR ---------- */
  .samples{margin-top:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .samples .lbl{font-size:13px;color:var(--muted);}
  .chip{
    background:var(--surface);border:1px solid var(--line);border-radius:22px;
    padding:7px 14px;font-size:13.5px;font-weight:500;cursor:pointer;color:inherit;
    font-family:inherit;
    transition:border-color .18s ease,color .18s ease,transform .16s ease;
  }
  .chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}

  /* ---------- LÜĞƏT ---------- */
  .dict{
    margin-top:18px;background:var(--surface);border:1px solid var(--line);
    border-radius:16px;padding:22px 24px;display:none;
  }
  .dict.show{display:block;}
  .dict-head{
    display:flex;align-items:baseline;gap:10px;margin-bottom:16px;
    padding-bottom:14px;border-bottom:1px solid var(--line);
  }
  .dict-head h2{font-family:var(--font-display);font-size:17px;font-weight:600;margin:0;letter-spacing:-.01em;}
  .dict-head span{font-size:12.5px;color:var(--muted);}
  .pos-group + .pos-group{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
  .pos-name{
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--accent);margin:0 0 11px;font-weight:500;
  }
  .mean{display:flex;align-items:baseline;gap:12px;padding:7px 0;flex-wrap:wrap;}
  .mean + .mean{border-top:1px dashed var(--line);}
  .mean-word{
    font-size:15.5px;font-weight:600;flex-shrink:0;min-width:120px;
    cursor:pointer;background:none;border:none;padding:0;text-align:left;
    font-family:inherit;color:inherit;
    transition:color .16s ease;
  }
  .mean-word:hover{color:var(--accent);}
  .mean-back{font-size:13.5px;color:var(--muted);line-height:1.5;}

  .tip{margin-top:18px;font-size:12.5px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap;}
  .kbd{font-family:var(--font-mono);font-size:11px;border:1px solid var(--line-strong);border-radius:5px;padding:2px 6px;}

  /* ---------- SON TƏRCÜMƏLƏR ---------- */
  .recent{margin-top:44px;}
  .recent-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:15px;}
  .recent-head h2{font-family:var(--font-display);font-size:20px;font-weight:600;margin:0;letter-spacing:-.01em;}
  .recent-head a{font-size:13.5px;text-decoration:none;font-weight:600;}
  .rec-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  .rec{
    background:var(--surface);border:1px solid var(--line);border-radius:13px;
    padding:15px 17px;cursor:pointer;text-align:left;width:100%;font-family:inherit;color:inherit;
    transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
  }
  .rec:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 26px -16px rgba(var(--accent-rgb),.5);}
  .rec .pair{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;}
  .rec .src{font-size:14.5px;font-weight:600;margin:0 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rec .res{font-size:13.5px;color:var(--muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* ---------- VİTRİN ---------- */
  .showcase{margin-top:56px;padding-top:34px;border-top:1px solid var(--line);}
  .sc-eyebrow{
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent);margin:0 0 8px;
  }
  .sc-title{font-family:var(--font-display);font-size:26px;font-weight:600;margin:0 0 7px;line-height:1.25;}
  .sc-lead{font-size:14.5px;color:var(--muted);margin:0 0 24px;max-width:56ch;}

  .sc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
  .sc-item{
    margin:0;padding:18px 14px;border:1px solid var(--line);border-radius:var(--radius);
    background:var(--surface);display:flex;flex-direction:column;align-items:center;
    gap:9px;text-align:center;
    transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
  }
  .sc-item:hover{
    border-color:var(--accent);transform:translateY(-3px);
    box-shadow:0 12px 26px -18px rgba(var(--accent-rgb),.55);
  }
  .sc-lang{
    font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);
  }
  /* Hər əlifba fərqli hündürlük tutur — sabit sətir hündürlüyü
     kartların bir sırada durmasını təmin edir. */
  .sc-word{
    font-family:var(--font-display);font-size:21px;line-height:1.35;
    min-height:calc(21px * 1.35 * 1.5);display:flex;align-items:center;
  }
  .sc-read{
    font-family:var(--font-mono);font-size:12.5px;color:var(--accent);
    padding-top:7px;border-top:1px dashed var(--line-strong);width:100%;
  }
  .sc-say{
    margin-top:2px;width:34px;height:34px;border-radius:50%;flex-shrink:0;
    border:1px solid var(--line-strong);background:var(--paper);color:var(--muted);
    cursor:pointer;display:grid;place-items:center;
    transition:border-color .18s ease,color .18s ease,background .18s ease,transform .12s ease;
  }
  .sc-say svg{width:16px;height:16px;}
  .sc-say:hover{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb),.08);}
  .sc-say:active{transform:scale(.92);}
  .sc-say.sc-playing{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb),.12);animation:scPulse 1s ease-in-out infinite;}
  @keyframes scPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.4);}50%{box-shadow:0 0 0 5px rgba(var(--accent-rgb),0);}}

  .sc-note{
    margin:18px 0 0;font-size:13px;color:var(--muted);
    padding-left:12px;border-left:2px solid rgba(var(--accent-rgb),.35);
  }

  @media(max-width:880px){ .sc-grid{grid-template-columns:repeat(3,1fr);} }
  @media(max-width:520px){ .sc-grid{grid-template-columns:repeat(2,1fr);} .sc-title{font-size:22px;} }

  /* ---------- ÜSTÜNLÜKLƏR ---------- */
  .perks{
    margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
    padding-top:34px;border-top:1px solid var(--line);
  }
  .perk .ico{
    width:34px;height:34px;border-radius:10px;background:rgba(var(--accent-rgb),.12);
    color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:12px;
  }
  .perk .ico svg{width:17px;height:17px;}
  .perk h3{font-family:var(--font-display);font-size:16.5px;font-weight:600;margin:0 0 5px;}
  .perk p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;}

  main{padding-bottom:70px;}

  @media(max-width:760px){
    .panes{grid-template-columns:1fr;}
    .pane + .pane{border-left:none;border-top:1px solid var(--line);}
    .pane{min-height:160px;padding:20px;}
    .rec-list,.perks{grid-template-columns:1fr;}
    .hero{padding:32px 0 24px;}
    .ambient .a1{width:340px;height:340px;}
  }

/* ---------- YANLIŞ DİL XƏBƏRDARLIĞI ---------- */
.lang-hint{
  display:block;width:100%;margin-top:10px;
  padding:9px 13px;border-radius:var(--radius-sm);
  background:rgba(var(--clay-rgb),.12);
  border:1px solid rgba(var(--clay-rgb),.3);
  color:var(--clay);font-family:inherit;font-size:13px;font-weight:600;
  text-align:left;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.lang-hint:hover{
  background:rgba(var(--clay-rgb),.2);
  border-color:var(--clay);
}
.lang-hint[hidden]{display:none;}

/* ---------- SƏSLƏ YAZMA MİKROFONU ---------- */
.mic-btn{
  position:absolute;right:18px;bottom:16px;z-index:3;
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--surface);border:1px solid var(--line-strong);
  color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px -6px rgba(var(--ink-rgb),.3);
  transition:color .16s ease,border-color .16s ease,background .16s ease,transform .12s ease;
}
.mic-btn svg{width:19px;height:19px;}
/* Mənbə mətni səsləndirmə — mikrofonun solunda */
.src-say-btn{right:68px;}
.src-say-btn.playing{color:#fff;background:var(--accent);border-color:var(--accent);}
/* Mikrofon dəstəklənmirsə (gizli), səs düyməsi künc yerini tutsun */
.pane-input:not(:has(#micBtn:not([hidden]))) .src-say-btn{right:18px;}
.mic-btn:hover{color:var(--accent);border-color:var(--accent);}
.mic-btn:active{transform:scale(.9);}
.mic-btn[hidden]{display:none;}
/* Dinləyəndə nəbz effekti + qırmızı vurğu */
.mic-btn.listening{
  color:#fff;background:var(--clay);border-color:var(--clay);
  animation:micPulse 1.4s ease-in-out infinite;
}
@keyframes micPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--clay-rgb),.5);}
  50%{box-shadow:0 0 0 9px rgba(var(--clay-rgb),0);}
}
@media(prefers-reduced-motion:reduce){ .mic-btn.listening{animation:none;} }
/* Mikrofon mətnin üstünü örtməsin */
.pane-input textarea{padding-bottom:44px;}

/* ---------- CANLI SƏS DALĞASI (mikrofon dinləyəndə) ---------- */
.mic-wave{
  position:absolute;right:70px;bottom:20px;z-index:3;
  display:none;align-items:center;gap:3px;
  padding:7px 13px 7px 12px;border-radius:22px;
  background:var(--clay);color:#fff;
  box-shadow:0 6px 18px -6px rgba(var(--clay-rgb),.6);
}
.mic-wave.on{display:flex;animation:waveIn .2s ease both;}
@keyframes waveIn{from{opacity:0;transform:translateX(8px);}to{opacity:1;transform:translateX(0);}}
.mic-wave-label{font-size:12.5px;font-weight:600;margin-right:5px;white-space:nowrap;}
.mic-wave i{
  display:block;width:3px;height:7px;border-radius:3px;background:#fff;
  animation:waveBar 1s ease-in-out infinite;
}
.mic-wave i:nth-child(2){animation-delay:0s;}
.mic-wave i:nth-child(3){animation-delay:.15s;}
.mic-wave i:nth-child(4){animation-delay:.3s;}
.mic-wave i:nth-child(5){animation-delay:.45s;}
.mic-wave i:nth-child(6){animation-delay:.6s;}
@keyframes waveBar{
  0%,100%{height:6px;opacity:.6;}
  50%{height:18px;opacity:1;}
}
@media(prefers-reduced-motion:reduce){ .mic-wave i{animation:none;height:12px;} }
@media(max-width:520px){ .mic-wave{right:64px;bottom:18px;} .mic-wave-label{display:none;} }