:root{ --svHeaderH: 72px; }

.story-viewer{position:fixed;inset:0;z-index:99999;display:none}
.story-viewer.is-open{display:block}

.sv-backdrop{position:absolute;inset:0;background:#000;z-index:0} /* tam siyah */

.sv-shell{
  position:absolute;inset:0;
  display:flex;align-items:stretch;justify-content:stretch;
  touch-action:none;
}

.sv-stage{
  position:absolute;inset:0;
  z-index:1;
  background:#000;
  overflow:hidden;
}

.sv-media{
  width:100%;
  height:100%;
  object-fit:cover; /* IG hissi: genelde contain; istersen cover yap */
  display:block;
  background:#000;
}

.sv-top{
  position:absolute;left:0;right:0;top:0;
  padding:10px 12px 0;
  pointer-events:none;
  z-index:50;
}

.sv-bars{display:flex;gap:6px;padding:0 0 10px}
.sv-bar{height:2px;flex:1;background:rgba(255,255,255,.28);border-radius:999px;overflow:hidden}
.sv-bar>i{display:block;height:100%;width:0%;background:#fff}

.sv-header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  pointer-events:auto;
  position:relative;z-index:50;
}

.sv-user{display:flex;align-items:center;gap:10px;min-width:0}
.sv-avatar{
  width:34px;height:34px;border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.85);
}
.sv-meta{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.sv-name{color:#fff;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.sv-time{color:rgba(255,255,255,.75);font-size:12px;margin-top:2px}

.sv-actions{display:flex;align-items:center;gap:8px}
.sv-btn{
  width:36px;height:36px;border-radius:999px;border:0;
  background:rgba(0,0,0,.35);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.sv-close{font-size:22px;line-height:1;position:relative;z-index:40;}

/* Tap zones */
.sv-nav{
  position:absolute;top:0;bottom:0;
  z-index:10;
  width:50%;
  background:transparent;border:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  top: var(--svHeaderH);  
  bottom:0;
  height:auto;
}




.sv-nav-left{left:0}
.sv-nav-right{right:0}

/* Swipe feedback */
.sv-shell.is-dragging{transition:none}
.sv-shell.is-returning{transition:transform .18s ease, opacity .18s ease}



/* Hold-to-pause: selection/callout kapat */
#storyViewer, #storyViewer *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;           /* iOS copy/select menüsü */
  -webkit-tap-highlight-color:transparent;
}

/* iOS Safari: long-press drag/select glitch azaltır */
#svShell, #svStage{
  -webkit-user-drag:none;
}
#svStage img, #svStage video{
  -webkit-user-drag:none;
}