/* Hikâyeler: yuvarlak şeridi (Instagram tarzı) ve tam ekran oynatıcı */
button.story{border:0;background:none;padding:0;font:inherit;cursor:pointer;color:var(--ink);-webkit-tap-highlight-color:transparent}
.story-special .story-ring{background:linear-gradient(45deg,#f09433 0%,#dc2743 52%,#bc1888 100%)}
.story-heart{background:var(--coral);color:#fff;font-size:34px;line-height:1}
.story.seen .story-ring{background:#cbd3cd}
.story:focus-visible .story-ring{outline:3px solid var(--ink);outline-offset:2px}

.sv{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(7,14,11,.95);touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
.sv[hidden]{display:none}
.sv-stage{position:relative;width:100%;height:100%;background:#000;overflow:hidden;color:#fff}
@media(min-width:700px){.sv-stage{height:min(92vh,820px);width:calc(min(92vh,820px) * 9 / 16);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.6)}}
.sv-bg{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(30px) brightness(.5);transform:scale(1.15)}
.sv-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:transparent}
.sv-top{position:absolute;left:0;right:0;top:0;padding:calc(10px + env(safe-area-inset-top)) 12px 40px;background:linear-gradient(rgba(0,0,0,.6),transparent);z-index:3}
.sv-bars{display:flex;gap:4px}
.sv-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.sv-bar i{display:block;height:100%;width:0;background:#fff}
.sv-head{display:flex;align-items:center;gap:10px;margin-top:12px}
.sv-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #fff;background:var(--coral);flex:none}
.sv-title{flex:1;min-width:0;font-weight:800;font-size:15px;text-shadow:0 1px 6px rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-btn{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sv-btn:hover{background:rgba(0,0,0,.55)}
.sv-btn[hidden]{display:none}
.sv-btn svg{width:22px;height:22px;fill:currentColor}
.sv-btn .st{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.sv-cap{position:absolute;left:0;right:0;bottom:0;padding:56px 20px calc(26px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.72));font-size:15.5px;line-height:1.5;text-shadow:0 1px 6px rgba(0,0,0,.5);z-index:3;pointer-events:none}
.sv-cap:empty{display:none}
.sv-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;z-index:4;cursor:pointer;display:grid;place-items:center}
.sv-play[hidden]{display:none}
.sv-play svg{width:34px;height:34px;fill:currentColor}
.sv-spin{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;animation:svspin .8s linear infinite;z-index:2}
.sv-spin[hidden]{display:none}
@keyframes svspin{to{transform:rotate(360deg)}}
.sv-nav{display:none}
@media(min-width:700px){
  .sv-nav{display:grid;position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;place-items:center;cursor:pointer}
  .sv-nav:hover{background:rgba(255,255,255,.3)}
  .sv-nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .sv-prev{left:max(16px,calc(50% - 300px))}.sv-next{right:max(16px,calc(50% - 300px))}
}
@media(prefers-reduced-motion:reduce){.sv-spin{animation-duration:2s}}

.sv-cta{position:absolute;left:16px;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;gap:10px;z-index:5}
.sv-cta[hidden]{display:none}
.sv-cta-btn{flex:1;border:1.5px solid rgba(255,255,255,.7);background:rgba(0,0,0,.35);color:#fff;border-radius:14px;padding:13px 10px;font:700 14.5px var(--sans);cursor:pointer;backdrop-filter:blur(6px);min-height:46px}
.sv-cta-main{background:var(--coral);border-color:var(--coral)}
.sv-cta-btn:hover{filter:brightness(1.1)}
.sv-stage.has-cta .sv-cap{padding-bottom:calc(88px + env(safe-area-inset-bottom))}