/* =====================================================================
   لێدەری دەنگی مێژوو — وەشانی ٣ (ڕیسپۆنسیڤ)
   ---------------------------------------------------------------------
   بەپێی پانی خودی لێدەرەکە (container query) دەگۆڕێت، نەک شاشە:
     • تەسک  (< 520px):  ناونیشان ← شەپۆل ← کات ← دوگمەکان لە ڕیزێکدا
     • فراوان (≥ 520px): دوگمەی لێدان لە چەپ، هەموو شتێکی تر لە تەنیشتی
   چەپ ← ڕاست · ژمارەکان ئینگلیزی
   ===================================================================== */
.qa{
  --qa-bg1:#2F5C42;
  --qa-bg2:#1B3526;
  --qa-hi:#F4D58D;
  --qa-lo:rgba(255,255,255,.26);

  container-type:inline-size;
  direction:ltr;
  margin-bottom:18px;
  border-radius:22px;
  color:#fff;
  overflow:hidden;
  background:
    radial-gradient(280px 160px at 88% -10%, rgba(244,213,141,.20), transparent 70%),
    radial-gradient(240px 160px at 0% 110%, rgba(126,196,150,.22), transparent 70%),
    linear-gradient(145deg, var(--qa-bg1), var(--qa-bg2));
  box-shadow:0 12px 30px rgba(20,40,28,.24), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-user-select:none;
  user-select:none;
}

/* ---------- تۆڕ: شێوەی تەسک (بنەڕەت) ---------- */
.qa-in{
  display:grid;
  grid-template-columns:1fr auto auto auto 1fr;
  grid-template-areas:
    "head  head head head eq"
    "wave  wave wave wave wave"
    "time  time time time time"
    "speed back play fwd  .";
  align-items:center;
  column-gap:clamp(8px, 4cqw, 18px);
  padding:clamp(12px, 4cqw, 18px);
  padding-bottom:clamp(12px, 3.4cqw, 16px);
}
.qa-head { grid-area:head; }
.qa-wave { grid-area:wave; }
.qa-times{ grid-area:time; }
.qa-speed{ grid-area:speed; justify-self:start; }
.qa-back { grid-area:back; }
.qa-play { grid-area:play; }
.qa-fwd  { grid-area:fwd; }
.qa-eq   { grid-area:eq; justify-self:end; }
.qa-err  { grid-column:1 / -1; }

/* ---------- سەرەوە ---------- */
.qa-head{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  margin-bottom:10px;
}
.qa-badge{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:99px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.qa-badge svg{ width:13px;height:13px;fill:var(--qa-hi); }
.qa-title{
  flex:1;
  min-width:0;
  font-size:clamp(13px, 3.6cqw, 15px);
  font-weight:700;
  line-height:1.6;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---------- شەپۆل ---------- */
.qa-wave{
  position:relative;
  height:clamp(40px, 12cqw, 58px);
  cursor:pointer;
  touch-action:none;
  outline:0;
  border-radius:10px;
}
.qa-bars{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  gap:2px;
}
.qa-bars i{
  flex:1;
  min-width:2px;
  height:var(--v);
  border-radius:3px;
  background:var(--qa-lo);
}
.qa-bars.is-done i{ background:var(--qa-hi); }
.qa-bars.is-done{ clip-path:inset(0 100% 0 0); }
.qa.is-playing .qa-bars i{ animation:qaBreath 1.6s ease-in-out infinite; }
.qa.is-playing .qa-bars i:nth-child(3n){ animation-delay:.2s; }
.qa.is-playing .qa-bars i:nth-child(3n+1){ animation-delay:.45s; }
@keyframes qaBreath{ 50%{ transform:scaleY(.82); } }

.qa-head-line{
  position:absolute;
  top:3px; bottom:3px;
  left:0;
  width:2px;
  margin-left:-1px;
  border-radius:2px;
  background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.7);
  opacity:0;
  transition:opacity .2s;
}
.qa.is-started .qa-head-line,
.qa.is-drag .qa-head-line{ opacity:1; }

.qa-tip{
  position:absolute;
  bottom:calc(100% + 4px);
  left:0;
  transform:translateX(-50%);
  padding:3px 8px;
  border-radius:8px;
  background:#fff;
  color:var(--qa-bg2);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s;
}
.qa-wave:hover .qa-tip, .qa.is-drag .qa-tip{ opacity:1; }
@media (hover:none){ .qa-wave:hover .qa-tip{ opacity:0; } .qa.is-drag .qa-tip{ opacity:1; } }
.qa-wave:focus-visible{ box-shadow:0 0 0 3px rgba(244,213,141,.45); }

/* ---------- کات ---------- */
.qa-times{
  display:flex;
  justify-content:space-between;
  margin:6px 0 8px;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.72);
  font-variant-numeric:tabular-nums;
  font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.qa-cur{ color:#fff; text-align:start; }
.qa-dur{ text-align:end; }

/* ---------- دوگمەکان ---------- */
.qa-play{
  position:relative;
  width:clamp(50px, 15cqw, 62px);
  height:clamp(50px, 15cqw, 62px);
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:#fff;
  color:var(--qa-bg2);
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:transform .18s cubic-bezier(.32,.72,0,1);
}
.qa-play:hover{ transform:scale(1.05); }
.qa-play:active{ transform:scale(.94); }
.qa-play svg{ width:44%; height:44%; fill:currentColor; }
.qa-play svg path{ transform:translateX(1.5px); }
.qa-play::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.45);
  opacity:0;
}
.qa.is-playing .qa-play::after{ animation:qaRing 1.9s ease-out infinite; }
@keyframes qaRing{ 0%{ opacity:.8; transform:scale(.92); } 100%{ opacity:0; transform:scale(1.28); } }

.qa.is-loading .qa-play svg{ opacity:.2; }
.qa.is-loading .qa-play::before{
  content:"";
  position:absolute;
  width:42%;height:42%;
  border:3px solid rgba(27,53,38,.18);
  border-top-color:var(--qa-bg2);
  border-radius:50%;
  animation:qaSpin .7s linear infinite;
}
@keyframes qaSpin{ to{ transform:rotate(360deg); } }

.qa-skip{
  position:relative;
  width:clamp(38px, 11cqw, 44px);
  height:clamp(38px, 11cqw, 44px);
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  transition:background .15s, transform .15s;
}
.qa-skip:hover{ background:rgba(255,255,255,.18); }
.qa-skip:active{ transform:scale(.92); }
.qa-skip svg{ width:66%; height:66%; fill:currentColor; }

.qa-speed{
  min-width:44px;
  height:30px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:99px;
  background:transparent;
  color:#fff;
  font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.qa-speed:hover{ background:rgba(255,255,255,.12); }
.qa-speed.is-on{ background:var(--qa-hi); border-color:transparent; color:var(--qa-bg2); }

.qa-eq{
  display:inline-flex;
  align-items:flex-end;
  gap:3px;
  height:16px;
  margin-bottom:10px;
  opacity:0;
  transition:opacity .25s;
}
.qa.is-playing .qa-eq{ opacity:1; }
.qa-eq i{ width:3px; height:30%; border-radius:2px; background:var(--qa-hi); }
.qa.is-playing .qa-eq i{ animation:qaEq .9s ease-in-out infinite; }
.qa-eq i:nth-child(2){ animation-delay:.15s !important; }
.qa-eq i:nth-child(3){ animation-delay:.3s  !important; }
.qa-eq i:nth-child(4){ animation-delay:.45s !important; }
@keyframes qaEq{ 0%,100%{ height:25%; } 50%{ height:100%; } }

.qa-err{ margin-top:8px; font-size:12px; color:#FFC7B8; text-align:center; }
.qa-err:empty{ display:none; }
.qa.is-error .qa-play{ opacity:.55; }

/* ---------- زۆر تەسک (< 300px) ---------- */
@container (max-width:300px){
  .qa-badge span{ display:none; }
  .qa-badge{ padding:5px 7px; }
  .qa-speed{ min-width:38px; padding:0 7px; }
}

/* ---------- فراوان (≥ 520px): یەک ڕیز ---------- */
@container (min-width:520px){
  .qa-in{
    grid-template-columns:auto 1fr auto auto auto;
    grid-template-areas:
      "play head head head eq"
      "play wave wave wave wave"
      "play time back fwd  speed";
    column-gap:12px;
    row-gap:0;
    padding:18px 22px 16px 18px;
  }
  .qa-play{ width:72px; height:72px; margin-right:6px; align-self:center; }
  .qa-times{ margin:8px 0 0; }
  .qa-back, .qa-fwd{ width:38px; height:38px; margin-top:8px; }
  .qa-times{ margin-inline-end:6px; }
  .qa-speed{ margin-top:8px; justify-self:end; }
  .qa-head{ margin-bottom:8px; }
}

@media (prefers-reduced-motion:reduce){
  .qa *, .qa::after{ animation:none !important; transition:none !important; }
}