/* =========================================================
   Hikâyeler — şerit ve tam ekran görüntüleyici
   ========================================================= */

.bnk-hikayeler{
  background:#fff;
  border-bottom:1px solid #e3e8ef;

  /* --hik-boy ve --hik-adet satır içi stille gelir (Özelleştirici değerleri).
     Medya sorguları bunlara dokunmaz; yalnızca üst sınır (-mx) koyar.
     Böylece satır içi stil ile stil dosyası birbirini ezmez. */
  --hik-ara:22px;
  --hik-ok:56px;

  --boy:min( var(--hik-boy,78px), var(--hik-boy-mx,300px) );
  --adet:min( var(--hik-adet,8),  var(--hik-adet-mx,24) );
}

/* ---- ekran genişliğine göre üst sınırlar ---- */
@media(max-width:1199px){ .bnk-hikayeler{ --hik-adet-mx:7 } }
@media(max-width:991px){  .bnk-hikayeler{ --hik-adet-mx:6 } }
@media(max-width:839px){  .bnk-hikayeler{ --hik-adet-mx:5 } }
@media(max-width:767px){
  .bnk-hikayeler{ --hik-adet-mx:5;--hik-boy-mx:68px;--hik-ara:16px;--hik-ok:40px }
}
@media(max-width:575px){ .bnk-hikayeler{ --hik-adet-mx:4 } }
@media(max-width:479px){
  .bnk-hikayeler{ --hik-adet-mx:3;--hik-boy-mx:58px;--hik-ara:12px }
}
@media(max-width:359px){
  .bnk-hikayeler{ --hik-boy-mx:50px;--hik-ara:10px;--hik-ok:36px }
}
.bnk-hikaye-en{
  max-width:1240px;margin:0 auto;padding:14px 20px;
  position:relative;display:flex;align-items:flex-start;
}

.bnk-hik-liste{
  list-style:none;margin:0;padding:0;
  display:flex;gap:var(--hik-ara);align-items:flex-start;
  overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;scroll-padding-left:2px;
  scrollbar-width:none;-ms-overflow-style:none;
  flex:1 1 auto;min-width:0;
}
.bnk-hik-liste::-webkit-scrollbar{display:none}
.bnk-hik-liste>li{
  margin:0;scroll-snap-align:start;
  /* görünür alanda tam olarak --hik-adet kadar daire durur */
  flex:0 0 calc( ( 100% - ( var(--adet) - 1 ) * var(--hik-ara) ) / var(--adet) );
  min-width:0;
}

.bnk-hik{
  background:none;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:100%;
  font-family:inherit;
}
.bnk-hik-halka{
  box-sizing:border-box;
  width:min( var(--boy), 100% );height:var(--boy);
  border-radius:50%;padding:3px;
  border:2.5px solid var(--hik-renk);
  display:block;transition:transform .16s ease;
}
@supports( aspect-ratio: 1 ){
  .bnk-hik-halka{height:auto;aspect-ratio:1}
}
.bnk-hik:hover .bnk-hik-halka{transform:scale(1.05)}
.bnk-hik:focus-visible .bnk-hik-halka{outline:2px solid #067242;outline-offset:3px}
.bnk-hik-ic{
  display:block;width:100%;height:100%;border-radius:50%;
  overflow:hidden;background:#f2f5f8;
}
.bnk-hik-ic img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
}
.bnk-hik-ad{
  font-size:14px;line-height:1.25;color:#1f2a3a;text-align:center;
  width:100%;overflow:hidden;overflow-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
/* görülmüş hikâyelerin halkası soluklaşır */
.bnk-hik.gorulmus .bnk-hik-halka{border-color:#c8d2de}

.bnk-hik-ok{
  flex:none;width:var(--hik-ok);height:var(--hik-ok);border-radius:50%;
  border:0;background:#f0f1f3;color:#5f6b7a;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,opacity .15s ease;
  /* ok, dairelerin tam ortasına hizalanır (etiketler hesaba katılmaz) */
  margin-top:calc( var(--boy) / 2 - var(--hik-ok) / 2 );
}
.bnk-hik-ok:hover{background:#e4e7eb;color:#39424f}
.bnk-hik-ok:focus-visible{outline:2px solid #067242;outline-offset:2px}
.bnk-hik-ok svg{width:calc(var(--hik-ok) * .46);height:calc(var(--hik-ok) * .46)}
.bnk-hik-sol{margin-right:calc(var(--hik-ok) * .32)}
.bnk-hik-sag{margin-left:calc(var(--hik-ok) * .32)}
/* kaydırılacak yer kalmadığında yerini koruyarak sönükleşir */
.bnk-hik-ok.pasif{opacity:0;pointer-events:none}

/* ---------------- Tam ekran görüntüleyici ---------------- */
.bnk-hik-katman{
  position:fixed;inset:0;z-index:9999;
  background:rgba(9,16,28,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.bnk-hik-katman.acik{opacity:1}

.bnk-hik-sahne{
  position:relative;width:min(440px,100vw);height:min(92vh,860px);
  background:#0d1420;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
@media(max-width:520px){
  .bnk-hik-sahne{width:100vw;height:100dvh;border-radius:0}
}

.bnk-hik-cubuklar{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;gap:4px;padding:12px 12px 0;
}
.bnk-hik-cubuk{
  flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.32);overflow:hidden;
}
.bnk-hik-dolgu{
  display:block;height:100%;width:0;background:#fff;border-radius:2px;
}

.bnk-hik-ust{
  position:absolute;top:26px;left:0;right:0;z-index:3;
  display:flex;align-items:center;gap:10px;padding:8px 14px;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);
}
.bnk-hik-baslik{
  color:#fff;font-size:15px;font-weight:600;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.bnk-hik-kapat{
  background:none;border:0;color:#fff;cursor:pointer;
  width:36px;height:36px;flex:none;display:flex;
  align-items:center;justify-content:center;border-radius:50%;
}
.bnk-hik-kapat:hover{background:rgba(255,255,255,.16)}
.bnk-hik-kapat svg{width:22px;height:22px}

.bnk-hik-gorsel{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  background:#0d1420;
}
.bnk-hik-gorsel img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
}

.bnk-hik-alt{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:26px 18px 20px;
  background:linear-gradient(to top,rgba(0,0,0,.78),transparent);
  text-align:center;
}
.bnk-hik-metin{
  color:#e8eef6;font-size:14px;line-height:1.5;margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.bnk-hik-buton{
  display:inline-block;background:#fff;color:#092558;
  padding:11px 22px;border-radius:40px;text-decoration:none;
  font-weight:700;font-size:14px;
}
.bnk-hik-buton:hover{background:#e8f3ec;color:#067242}

/* dokunma bölgeleri */
.bnk-hik-bolge{
  position:absolute;top:0;bottom:0;z-index:2;width:34%;
  background:none;border:0;cursor:pointer;padding:0;
}
.bnk-hik-onceki{left:0}
.bnk-hik-sonraki{right:0;width:66%}

/* masaüstü gezinme okları */
.bnk-hik-gez{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.bnk-hik-gez:hover{background:rgba(255,255,255,.26)}
.bnk-hik-gez svg{width:24px;height:24px}
.bnk-hik-gez-sol{left:-62px}
.bnk-hik-gez-sag{right:-62px}
@media(max-width:640px){.bnk-hik-gez{display:none}}

body.bnk-hik-kilit{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .bnk-hik-halka,.bnk-hik-katman{transition:none}
  .bnk-hik:hover .bnk-hik-halka{transform:none}
}

@media(max-width:640px){
  .bnk-hikaye-en{padding:12px 14px}
  .bnk-hik-ad{font-size:12.5px}
}
@media(max-width:479px){
  .bnk-hik-ad{font-size:11.5px}
}