/* === BlueLine Stories (Instagram tarzı) === */
:root{
  --story-size:88px;           /* avatar çapı (JS bunu dinamik ayarlar) */
  --story-gap:14px;            /* avatarlar arası boşluk */
  --ring-width:3px;            /* dış çember kalınlık */
  --ring-unseen: conic-gradient(#ff7a7a, #ffb36a, #ffd36a, #ff7a7a);
  --ring-seen: #cbd5e1;        /* izlenen gri */
  --overlay-bg: rgba(0,0,0,.92);
  --progress-bg: rgba(255,255,255,.25);
  --progress-fg: #ffffff;
}

/* Stories satırı */
.bl-stories-row{
  margin-top:18px;
  display:flex;
  gap:var(--story-gap);
  overflow-x:auto;             /* yatay kaydır */
  overflow-y:visible;
  -ms-overflow-style:none;     /* IE/Edge */
  scrollbar-width:none;        /* Firefox */
  padding:6px 6px 2px;
  width:100%;
  position:relative;
  z-index:5;
  cursor:grab;
  user-select:none;
  touch-action:pan-x;          /* mobilde yatay kaydırmaya izin ver */
}
.bl-stories-row::-webkit-scrollbar{ display:none; }
.bl-stories-row.grabbing{ cursor:grabbing; }

/* Tek avatar kartı */
.bl-story{
  flex:0 0 auto; width:var(--story-size);
  text-align:center; cursor:pointer; user-select:none;
}
.bl-story-ring{
  width:var(--story-size); aspect-ratio:1/1;
  border-radius:50%; padding:var(--ring-width);
  background:var(--ring-unseen);
  display:grid; place-items:center; overflow:hidden;
  transition:filter .2s ease, background .2s ease;
}
.bl-story.seen .bl-story-ring{ background:var(--ring-seen); }
.bl-story:hover .bl-story-ring{ filter:brightness(1.05); }
.bl-story-avatar{
  display:block; width:100%; height:100%;
  border-radius:50%; object-fit:cover; background:#000;
}
.bl-story-title{
  margin-top:6px; font-size:12px; line-height:1.15;
  color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:calc(var(--story-size) + 2px);
}

/* Tam ekran oynatıcı */
.bl-story-overlay{
  position:fixed; inset:0; z-index:9999;
  background:var(--overlay-bg);
  display:none; opacity:0; transition:opacity .2s ease;
}
.bl-story-overlay.active{ display:block; opacity:1; }
.bl-player{ position:absolute; inset:0; display:grid; place-items:center; }

/* >>> ÖNEMLİ: 3D PERSPECTIVE DOĞRUDAN INNER’DA <<< */
.bl-player-inner{
  width:min(92vw, 420px); aspect-ratio:9/16;
  background:#000; border-radius:14px; overflow:hidden;
  position:relative; box-shadow:0 10px 40px rgba(0,0,0,.45);

  /* 3D (Safari/iOS dahil) */
  perspective:980px;
  perspective-origin:50% 50%;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-perspective:980px;
  -webkit-perspective-origin:50% 50%;
  -webkit-transform-style:preserve-3d;
  -webkit-backface-visibility:hidden;
  will-change:transform, opacity;
}

.bl-media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.01);
  transition:opacity .28s ease, transform .28s ease;
  -webkit-user-drag:none; user-select:none;
}
.bl-media.show{ opacity:1; transform:none; }

.bl-controls{ position:absolute; inset:0; display:flex; }
.bl-tapzone{ flex:1; }
.bl-tapzone.left{ cursor:w-resize; }
.bl-tapzone.right{ cursor:e-resize; }

/* Üst çubuklar (progress) */
.bl-progress{
  position:absolute; top:10px; left:10px; right:10px; height:3px;
  display:flex; gap:6px; z-index:10;
}
.bl-bar{ flex:1; background:var(--progress-bg); border-radius:999px; overflow:hidden; position:relative; }
.bl-bar > span{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--progress-fg); transition:width .2s linear; }

/* Üst meta + kapat */
.bl-top{
  position:absolute; left:10px; right:10px; top:14px; z-index:11;
  display:flex; align-items:center; gap:10px; color:#fff;
}
.bl-top .mini{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.3); }
.bl-top .title{ font-weight:600; font-size:14px; }
.bl-top .close{
  margin-left:auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px); cursor:pointer;
}

/* Alt aksiyonlar */
.bl-bottom{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:11;
  display:flex; align-items:center; gap:10px; color:#fff;
}
.bl-btn{
  display:inline-grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  background:rgba(0,0,0,.35); backdrop-filter:blur(2px);
  cursor:pointer;
}

/* Mobil */
@media (max-width: 576px){
  :root{ --story-size:76px; }
}

/* Ok ipuçları */
.bl-tapzone{ position:relative; }
.bl-tapzone.left::after, .bl-tapzone.right::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:999px;
  background:rgba(0,0,0,.20); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .2s ease, transform .2s ease; pointer-events:none;
}
.bl-tapzone.left::after{ left:10px;  box-shadow:inset 14px 0 0 0 rgba(255,255,255,.6); }
.bl-tapzone.right::after{ right:10px; box-shadow:inset -14px 0 0 0 rgba(255,255,255,.6); }
.bl-story-overlay.active .bl-tapzone.left::after,
.bl-story-overlay.active .bl-tapzone.right::after{ opacity:.6; }
.bl-tapzone:hover::after{ opacity:.9; transform:translateY(-50%) scale(1.04); }

/* Fade-in */
.bl-fade{ animation: blFade .35s ease both; }
@keyframes blFade{
  from{ opacity:.05; transform:scale(1.01); }
  to  { opacity:1;   transform:scale(1); }
}

/* --- IG style split cards (current + adjacent) --- */
.bl-pane{ position:absolute; inset:0; border-radius:14px; overflow:hidden; }
.bl-pane-cur, .bl-pane-adj{
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-transform-style:preserve-3d;
  -webkit-backface-visibility:hidden;
  will-change:transform, opacity;
}
/* Kenar seam için yumuşak gölge */
.bl-pane-cur::after, .bl-pane-adj::after{
  content:""; position:absolute; top:0; bottom:0; width:28px;
  pointer-events:none; mix-blend-mode:multiply; opacity:.35;
  background:linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0));
}
.bl-pane-cur[data-side="next"]::after{ right:-1px; transform:scaleX(1); }
.bl-pane-cur[data-side="prev"]::after{ left:-1px;  transform:scaleX(-1); }
.bl-pane-adj[data-side="next"]::after{ left:-1px;  transform:scaleX(-1); }
.bl-pane-adj[data-side="prev"]::after{ right:-1px; transform:scaleX(1); }

/* Adjacent hafif koyu – “arkadan geliyor” etkisi */
.bl-pane-adj{ filter:brightness(.96); }

/* Kullanıcı arayüzünde sürüklenen görseller seçilemesin */
.bl-player-inner, .bl-media{ -webkit-user-drag:none; user-select:none; }