/* ============================================================
   AI Repro Stúdió – HANGZÓ CIKK lejátszó
   /assets/airepro-hangzo.css
   Beágyazott kártya (.hangzo) + lebegő mini-lejátszó (.hz-float).
   Dark-etalon: glass, primary-glow, gradiens-progressz.
   A tokenek a airepro-blog.css :root-jából öröklődnek; itt
   fallbackként ismételjük a kulcsokat, ha a komponens önállóan tölt.
   ============================================================ */
.hangzo, .hz-float{
  --hz-primary:var(--c-primary,#38ACFF);
  --hz-primary-h:var(--c-primary-hover,#339DE8);
  --hz-secondary:var(--c-secondary,#FBBC34);
  --hz-text:var(--d-text,#F5F5F7);
  --hz-text-2:var(--d-text-2,#A1A1A6);
  --hz-border:var(--d-border,rgba(255,255,255,.12));
  --hz-font-t:var(--font-title,'Kumbh Sans',system-ui,sans-serif);
  --hz-font:var(--font-text,'Lexend',system-ui,sans-serif);
}

/* ---------- közös vezérlő-építőkövek ---------- */
.hz-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;margin:0;cursor:pointer;color:var(--hz-text);
  border-radius:50%;transition:color .25s,background .25s,transform .25s;
  -webkit-tap-highlight-color:transparent;
}
.hz-btn:hover{color:var(--hz-primary)}
.hz-btn:focus-visible{outline:2px solid var(--hz-primary);outline-offset:2px}
.hz-btn svg{display:block;fill:currentColor}

/* play/pause – kék körös fő gomb */
.hz-play{
  width:46px;height:46px;flex:0 0 46px;background:var(--hz-primary);color:#04111c;
  box-shadow:0 4px 18px rgba(56,172,255,.35);
}
.hz-play:hover{background:var(--hz-primary-h);color:#04111c;transform:scale(1.05)}
.hz-play svg{width:20px;height:20px}
.hz-play .hz-ic-pause{display:none}
.hz-play.jatszik .hz-ic-play{display:none}
.hz-play.jatszik .hz-ic-pause{display:block}

/* másodlagos kerek gombok (skip, mute) */
.hz-skip,.hz-mute{width:36px;height:36px;flex:0 0 36px;color:var(--hz-text-2)}
.hz-skip svg,.hz-mute svg{width:19px;height:19px}
.hz-skip:hover,.hz-mute:hover{color:var(--hz-primary);background:rgba(255,255,255,.06)}
.hz-mute .hz-ic-mute{display:none}
.hz-mute.nemitva .hz-ic-vol{display:none}
.hz-mute.nemitva .hz-ic-mute{display:block}

/* sebesség-pill */
.hz-speed{
  font-family:var(--hz-font-t);font-weight:700;font-size:12.5px;color:var(--hz-text-2);
  background:rgba(255,255,255,.06);border:1px solid var(--hz-border);border-radius:999px;
  padding:6px 11px;min-width:44px;line-height:1;
  transition:color .25s,border-color .25s,background .25s;cursor:pointer;
}
.hz-speed:hover{color:var(--hz-primary);border-color:var(--hz-primary)}
.hz-speed:focus-visible{outline:2px solid var(--hz-primary);outline-offset:2px}

/* progressz-sáv */
.hz-track{
  position:relative;flex:1 1 auto;height:6px;border-radius:999px;
  background:rgba(255,255,255,.14);cursor:pointer;touch-action:none;
}
.hz-buffer{position:absolute;inset:0 auto 0 0;height:100%;border-radius:999px;background:rgba(255,255,255,.1);width:0}
.hz-fill{
  position:absolute;inset:0 auto 0 0;height:100%;border-radius:999px;width:0;
  background:linear-gradient(90deg,var(--hz-primary),var(--hz-secondary));
}
.hz-knob{
  position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.5);transform:translate(-50%,-50%);
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.hz-track:hover .hz-knob,.hz-track.huzas .hz-knob{opacity:1}
.hz-track:focus-visible{outline:2px solid var(--hz-primary);outline-offset:4px}

.hz-time{font-family:var(--hz-font);font-size:12.5px;color:var(--hz-text-2);font-variant-numeric:tabular-nums;white-space:nowrap}

.hz-kicsi{
  font-family:var(--hz-font-t);font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--hz-primary);display:inline-flex;align-items:center;gap:6px;
}
.hz-kicsi svg{fill:currentColor;flex:0 0 auto}
.hz-cim{font-family:var(--hz-font);color:var(--hz-text);min-width:0}

/* ============================================================
   BEÁGYAZOTT TRIGGER (.hz-trigger) – a cikk meta-sorában, jobbra
   Diszkrét „Hallgasd meg" link; lejátszáskor felúszik a lebegő.
   ============================================================ */
.hz-trigger{
  display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  background:none;border:0;padding:4px 2px;cursor:pointer;
  font-family:var(--hz-font);font-size:12.5px;letter-spacing:.15px;
  text-transform:uppercase;line-height:1;color:var(--hz-text);
  -webkit-tap-highlight-color:transparent;transition:opacity .25s;
}
.hz-trigger:hover{opacity:.82}
.hz-trigger:hover .hz-trigger-cim,.hz-trigger:hover .hz-trigger-mell{text-decoration:underline;text-underline-offset:3px}
.hz-trigger:focus-visible{outline:2px solid var(--hz-primary);outline-offset:3px;border-radius:6px}
.hz-trigger-cim{font-weight:900;color:var(--hz-text)}
.hz-trigger-mell{font-weight:300;color:var(--hz-text-2)}

/* trigger-ikon: KÉK; hallgatás (hanghullám) + lejátszás közben animált eq */
.hz-trigger-ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 18px;color:#38ACFF}
.hz-trigger-ic svg{width:18px;height:18px;display:block;fill:#38ACFF}
.hz-trigger-ic svg rect{fill:#38ACFF}
.hz-trigger-ic .hz-ic-eq{display:none}
.hz-trigger.jatszik .hz-ic-hang{display:none}
.hz-trigger.jatszik .hz-ic-eq{display:block}
.hz-eqbar{transform-box:fill-box;transform-origin:center bottom;animation:hz-eq 1s ease-in-out infinite}
.hz-eqbar.b2{animation-delay:.18s}
.hz-eqbar.b3{animation-delay:.36s}
.hz-eqbar.b4{animation-delay:.12s}
@keyframes hz-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.hz-eqbar{animation:none;transform:scaleY(.7)}}

/* ============================================================
   LEBEGŐ MINI-LEJÁTSZÓ (.hz-float) – jobb alsó sarok
   ============================================================ */
.hz-float{
  position:fixed;right:22px;bottom:22px;z-index:75;width:344px;max-width:calc(100vw - 32px);
  padding:14px 16px 13px;border-radius:18px;
  background:var(--d-glass-fokusz,rgba(28,30,40,.92));
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--hz-border);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.7),0 0 0 1px rgba(56,172,255,.1);
  display:none;opacity:0;transform:translateY(14px) scale(.98);transform-origin:bottom right;
  transition:opacity .32s ease,transform .32s ease;
}
.hz-float.lathato{display:block}
.hz-float.be{opacity:1;transform:translateY(0) scale(1)}
.hz-float .hz-fejsor{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px}
.hz-float .hz-cover{width:46px;height:46px;flex:0 0 46px;border-radius:10px;object-fit:cover;background:#0c0e14;border:1px solid var(--hz-border)}
.hz-float .hz-meta{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:3px;padding-top:1px}
.hz-float .hz-kicsi{font-size:9.5px;letter-spacing:1.4px}
.hz-float .hz-kicsi svg{width:11px;height:11px}
.hz-float .hz-cim{font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hz-float .hz-close{width:27px;height:27px;flex:0 0 27px;color:var(--hz-text-2);margin:-2px -5px 0 0}
.hz-float .hz-close:hover{color:var(--hz-text);background:rgba(255,255,255,.08)}
.hz-float .hz-close svg{width:15px;height:15px}
.hz-float .hz-sor{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.hz-float .hz-time{font-size:11.5px}
.hz-float .hz-vezerlosor{display:flex;align-items:center;gap:14px}
.hz-float .hz-play{width:42px;height:42px;flex:0 0 42px}
.hz-float .hz-speed{margin-left:auto}

/* ============================================================
   RESPONSZÍV
   ============================================================ */
@media (max-width:560px){
  .hz-trigger{margin-left:0}
  .hz-float{right:10px;left:10px;bottom:10px;width:auto;max-width:none}
}

/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hz-btn,.hz-play,.hz-float,.hz-fill{transition:none}
  .hz-float,.hz-float.be{transform:none}
}