/* Blog yazısı: "Yazıyı dinle" düğmesi + alttaki küçük oynatıcı + okunan paragraf/kelime vurgusu.
   Yalnız blog-yazi sayfasında ve panelde açıksa yüklenir. Davranış: post-listen.js. Ses motoru (assets/tts/voice.js) tıklanınca iner. */

/* ---- tetik: başlık altındaki hap ---- */
.pl-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.pl-trig{position:relative;--p:0}
.pl-trig .pl-btn{display:inline-flex;align-items:center;gap:10px;height:46px;margin:0;padding:4px 18px 4px 4px;border:1px solid #E4E4E4;border-radius:999px;background:#fff;color:var(--yk-ink,#0D1015);font:inherit;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,box-shadow .2s,background-color .2s}
.pl-trig .pl-btn:hover{border-color:#cfcfcf;box-shadow:0 6px 18px -10px rgba(13,16,21,.35)}
.pl-trig .pl-btn:focus-visible{outline:2px solid var(--yk-red,#E1243A);outline-offset:3px}
.pl-ic{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--yk-red,#E1243A);color:#fff;transition:background-color .25s,color .25s}
.pl-ic svg{position:absolute;left:50%;top:50%}
.pl-g{width:18px;height:18px;margin:-9px 0 0 -9px;fill:currentColor;transition:opacity .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.pl-g.pl-play{margin-left:-8px}
.pl-pause,.pl-wave{opacity:0;transform:scale(.6)}
.pl-ring{width:44px;height:44px;margin:-22px 0 0 -22px;transform:rotate(-90deg);fill:none;stroke-width:2.2;opacity:0;transition:opacity .25s}
.pl-ring .t{stroke:#EDEDED}
.pl-ring .p{stroke:var(--yk-red,#E1243A);stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--p) * 100);transition:stroke-dashoffset .3s linear}
.pl-wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2.5px;transition:opacity .2s,transform .3s}
.pl-wave i{display:block;width:3px;height:14px;border-radius:2px;background:currentColor;transform:scaleY(.35);transform-origin:center}
.pl-tx{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.pl-tx b{font-size:15px;font-weight:600;letter-spacing:-.005em}
.pl-tx small{font-size:13.5px;font-weight:500;color:#6b6f75;font-variant-numeric:tabular-nums}
.pl-tx small:not(:empty)::before{content:"·";margin-right:7px;color:#b5b8bc}

/* durumlar: idle | ask | load | prep | buffer | play | pause | end | err */
.pl-trig[data-st=load] .pl-ic,.pl-trig[data-st=prep] .pl-ic{background:#fff;color:var(--yk-red,#E1243A)}
.pl-trig[data-st=load] .pl-ring,.pl-trig[data-st=prep] .pl-ring{opacity:1}
.pl-trig[data-st=prep] .pl-ring .p{stroke-dasharray:22 78;animation:plSpin 1s linear infinite;transition:none}
.pl-trig[data-st=load] .pl-play,.pl-trig[data-st=prep] .pl-play{opacity:0;transform:scale(.6)}
.pl-trig[data-st=load] .pl-ic::after,.pl-trig[data-st=prep] .pl-ic::after{content:"";width:8px;height:8px;border-radius:2px;background:currentColor}
.pl-trig[data-st=play] .pl-play,.pl-trig[data-st=buffer] .pl-play{opacity:0;transform:scale(.6)}
.pl-trig[data-st=play] .pl-wave,.pl-trig[data-st=buffer] .pl-wave{opacity:1;transform:none}
.pl-trig[data-st=play] .pl-wave i{animation:plWave 1s ease-in-out infinite}
.pl-trig[data-st=play] .pl-wave i:nth-child(2){animation-delay:-.33s}
.pl-trig[data-st=play] .pl-wave i:nth-child(3){animation-delay:-.66s}
.pl-trig[data-st=play] .pl-btn,.pl-trig[data-st=pause] .pl-btn,.pl-trig[data-st=buffer] .pl-btn,.pl-trig[data-st=play] .pl-btn:hover,.pl-trig[data-st=pause] .pl-btn:hover{border-color:rgba(225,36,58,.35);background:#FFF8F9}
.pl-trig[data-st=err] .pl-ic{background:#585959}
.pl-trig[data-st=err] .pl-tx b{color:#585959}
@keyframes plWave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes plSpin{to{transform:rotate(360deg)}}
.pl-ring .p{transform-origin:20px 20px}

/* indirme onayı: düğmenin altında küçük kart (sohbetteki onayla aynı metin) */
.pl-ask{position:absolute;z-index:30;left:0;top:calc(100% + 10px);width:min(340px,calc(100vw - 32px));padding:14px 16px 14px;border:1px solid #E4E4E4;border-radius:16px;background:#fff;box-shadow:0 18px 40px -18px rgba(13,16,21,.35);font-size:14px;line-height:1.45;color:#3a3d42}
.pl-ask[hidden]{display:none}
.pl-ask p{margin:0 0 12px}
.pl-ask div{display:flex;gap:8px}
.pl-trig .pl-ask button{height:36px;padding:0 14px;border:1px solid #E4E4E4;border-radius:999px;background:#fff;color:var(--yk-ink,#0D1015);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.pl-trig .pl-ask button.y{border-color:var(--yk-red,#E1243A);background:var(--yk-red,#E1243A);color:#fff}
.pl-trig .pl-ask button:focus-visible{outline:2px solid var(--yk-red,#E1243A);outline-offset:2px}
.pl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- okunan paragraf: kayan, hafif kırmızı zemin + sol kırmızı çizgi; o anki kelime ---- */
.pl-hl{position:absolute;z-index:1;left:0;top:0;width:0;height:0;border-left:3px solid var(--yk-red,#E1243A);border-radius:4px 12px 12px 4px;background:rgba(225,36,58,.055);mix-blend-mode:multiply;pointer-events:none;opacity:0;transition:opacity .25s,top .35s cubic-bezier(.2,.8,.2,1),left .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1)}
.pl-hl.on{opacity:1}
::highlight(pl-word){background-color:rgba(225,36,58,.16);color:#B0122A}

/* ---- alttaki oynatıcı ---- */
.pl-bar{position:fixed;z-index:74;bottom:var(--pl-b,16px);left:var(--pl-l,16px);width:var(--pl-w,560px);height:56px;display:flex;align-items:center;gap:2px;padding:0 7px;border:1px solid #E4E4E4;border-radius:20px;background:rgba(255,255,255,.97);box-shadow:0 18px 44px -18px rgba(13,16,21,.38),0 2px 6px rgba(13,16,21,.05);color:var(--yk-ink,#0D1015);font-family:inherit;container-type:inline-size;transform:translateY(0);opacity:1;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
.pl-bar[hidden]{display:flex;transform:translateY(calc(100% + 30px));opacity:0;pointer-events:none;visibility:hidden;transition:transform .3s,opacity .2s,visibility 0s .3s}
.pl-bar button{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,color .2s}
.pl-bar button:hover{background:#F3F3F3}
.pl-bar button:focus-visible,.pl-trk:focus-visible{outline:2px solid var(--yk-red,#E1243A);outline-offset:2px}
.pl-bar svg{width:20px;height:20px;fill:currentColor}
.pl-bar .pl-pp{position:relative;width:40px;height:40px;background:var(--yk-red,#E1243A);color:#fff;margin-right:2px}
.pl-bar .pl-pp:hover{background:#C81E32}
.pl-pp .a,.pl-pp .b{position:absolute;left:50%;top:50%;margin:-10px 0 0 -10px;transition:opacity .2s,transform .25s}
.pl-pp .b{opacity:0;transform:scale(.6)}
.pl-bar[data-st=pause] .pl-pp .a,.pl-bar[data-st=end] .pl-pp .a{opacity:0;transform:scale(.6)}
.pl-bar[data-st=pause] .pl-pp .b,.pl-bar[data-st=end] .pl-pp .b{opacity:1;transform:none}
.pl-bar .pl-pp .r{position:absolute;left:-4px;top:-4px;width:48px;height:48px;margin:0;fill:none;stroke:var(--yk-red,#E1243A);stroke-width:2;stroke-linecap:round;stroke-dasharray:22 78;opacity:0;transition:opacity .2s}
.pl-bar[data-st=buffer] .pl-pp .r{opacity:1;animation:plSpin 1s linear infinite}
.pl-pp .r circle{transform-origin:24px 24px}
.pl-bar .pl-sk svg{width:18px;height:18px}
.pl-bar .pl-sk:disabled{opacity:.3;cursor:default;background:transparent}
.pl-trk{position:relative;flex:1 1 auto;min-width:40px;height:28px;margin:0 8px;cursor:pointer;touch-action:none}
.pl-trk::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:#EDEDED}
.pl-trk i{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;width:100%;border-radius:4px;background:var(--yk-red,#E1243A);transform-origin:0 50%;transform:scaleX(var(--f,0));transition:transform .4s linear}
.pl-trk b{position:absolute;top:50%;width:2px;height:10px;margin:-5px 0 0 -1px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px rgba(13,16,21,.12)}
.pl-trk em{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;border:2px solid var(--yk-red,#E1243A);box-shadow:0 1px 4px rgba(13,16,21,.2);transform:translateX(var(--x,0px));transition:transform .4s linear}
.pl-n{flex:none;min-width:44px;font-size:13px;font-weight:600;text-align:center;color:#585959;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.pl-bar .pl-sp{width:auto;min-width:40px;height:30px;padding:0 8px;border-radius:999px;border:1px solid #E4E4E4;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.pl-bar .pl-sp[aria-pressed=true]{border-color:var(--yk-red,#E1243A);color:var(--yk-red,#E1243A)}
.pl-bar .pl-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* dar oynatıcı (telefon): ilerleme çubuğu üst kenara iner, düğmeler sıkışır */
@container (max-width:340px){
  .pl-trk{position:absolute;left:14px;right:14px;top:-1px;height:14px;margin:0;min-width:0}
  .pl-trk::before,.pl-trk i{height:3px;margin-top:-1.5px}
  .pl-trk em{width:10px;height:10px;margin:-5px 0 0 -5px;border-width:2px}
  .pl-trk b{height:7px;margin-top:-3.5px}
  .pl-n{flex:1 1 auto;min-width:34px;font-size:12.5px}
  .pl-bar .pl-sk{width:30px}
  .pl-bar .pl-sp{min-width:36px;padding:0 6px}
  .pl-bar .pl-x{width:30px}
}
@container (max-width:212px){.pl-bar .pl-sp{display:none}}

/* "Okunan yere dön" çipi */
.pl-back{position:fixed;z-index:74;left:var(--pl-cx,50%);bottom:calc(var(--pl-b,16px) + 66px);display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px 0 12px;border:0;border-radius:999px;background:var(--yk-ink,#0D1015);color:#fff;font:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;transform:translateX(-50%);box-shadow:0 10px 24px -12px rgba(13,16,21,.5);transition:opacity .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.pl-back[hidden]{display:inline-flex;opacity:0;pointer-events:none;transform:translate(-50%,8px)}
.pl-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.pl-back.up svg{transform:rotate(180deg)}
.pl-back:focus-visible{outline:2px solid var(--yk-red,#E1243A);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .pl-hl,.pl-bar,.pl-back,.pl-trk i,.pl-trk em{transition:opacity .15s}
  .pl-trig[data-st=play] .pl-wave i{animation:none;transform:scaleY(.7)}
  .pl-trig[data-st=prep] .pl-ring .p,.pl-bar[data-st=buffer] .pl-pp .r{animation-duration:2.4s}
}
@media print{.pl-trig,.pl-bar,.pl-back,.pl-hl{display:none!important}}