/* pause.css: hero Pause/Play (WCAG 2.2.2). Sound + Pause share one bottom-left bar so widths (EN/TR) never collide.
   Only index.html links this file. Without JS the button stays [hidden]. */
.herobar{position:absolute;left:max(clamp(20px,4vw,56px),calc(var(--gut,0px) - 40px));bottom:28px;display:flex;gap:10px;align-items:center}
.herobar .sound{position:static}
.pause{background:none;border:1px solid var(--line);color:var(--mute);font:600 12px var(--display);letter-spacing:.12em;padding:10px 16px;cursor:pointer;transition:color .2s,border-color .2s;display:flex;gap:8px;align-items:center}
.pause[hidden]{display:none}
.pause:hover{color:var(--ink);border-color:var(--red)}
.pause i{display:inline-flex;gap:3px;align-items:center;height:12px}
.pause i b{width:3px;height:12px;background:currentColor}
.pause[aria-pressed="true"]{color:var(--ink);border-color:var(--red)}
.pause[aria-pressed="true"] i{gap:0}
.pause[aria-pressed="true"] i b:nth-child(1){width:0;height:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.pause[aria-pressed="true"] i b:nth-child(2){display:none}
@media (max-width:1024px){.pause{min-height:44px}}
@media (max-width:760px){.herobar{bottom:22px}}