/* Story viewer – mobil benzeri orta çerçeve + arka planda bulanık görsel */
:root{ --story-bg:#0f172a; --story-fg:#fff; --story-accent:#ff4d4f }
*{box-sizing:border-box}
html,body{height:100%}
body.story{margin:0;background:radial-gradient(1200px 600px at 50% 30%, rgba(255,255,255,.08), rgba(15,23,42,1) 60%);color:var(--story-fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial; overflow:hidden; -webkit-tap-highlight-color:transparent}

.story-wrap{position:relative; height:100vh; width:100%; overflow:hidden; display:grid; place-items:center;}
.story-bg{position:absolute; inset:0; background:#000 center/cover no-repeat; filter:blur(30px) saturate(1.2); transform:scale(1.08); opacity:.55}
.story-vignette{position:absolute; inset:0; pointer-events:none; background:radial-gradient(80% 90% at 50% 45%, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 75%, rgba(0,0,0,.7) 100%)}

.story-frame{position:relative; z-index:2; width:min(420px, 88vw); height:min(88vh, 780px); margin:0 auto; border-radius:18px; box-shadow:0 40px 120px rgba(0,0,0,.45); overflow:hidden; background:#111; -webkit-user-select:none; user-select:none; touch-action:manipulation}
.story-progress{position:absolute; left:0; right:0; top:10px; display:flex; gap:6px; padding:0 12px; z-index:5}
.story-progress .bar{flex:1; height:4px; background:rgba(255,255,255,.25); border-radius:20px; overflow:hidden}
.story-progress .bar > span{display:block; width:0%; height:100%; background:#fff; transition:width .2s linear}

.story-close{position:absolute; right:12px; top:22px; z-index:10; width:36px; height:36px; border-radius:999px; border:0; background:rgba(255,255,255,.96); color:#111; display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.25); backdrop-filter:saturate(1.1) blur(2px); outline:1px solid rgba(0,0,0,.08)}
.story-close .ic{width:20px; height:20px}
.story-close:hover{filter:brightness(1.03)}
.story-close:active{transform:scale(.98)}
/* iOS güvenli alan (notch) için küçük offset */
@supports(padding:max(0px)){
	.story-close{ top: calc(22px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); }
}

.story-slide{position:absolute; inset:0; background:#000; opacity:0; transform:translateX(10px) scale(.995); transition:opacity .32s ease, transform .32s ease}
.story-slide.active{opacity:1; transform:translateX(0) scale(1)}
.story-slide .story-img{position:absolute; inset:0; background:center/cover no-repeat; transform:scale(1.04); will-change:transform; animation:kb-zoom 60s linear infinite; animation-play-state:paused}
.story-slide.active .story-img{animation-play-state:running}
.story-slide .scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.35) 52%, rgba(0,0,0,.88) 100%)}
.story-slide .caption{position:absolute; left:0; right:0; bottom:0; padding:22px 22px 26px; z-index:3; display:flex; flex-direction:column; gap:8px}
.story-title{font-size:22px; line-height:1.15; font-weight:800; text-shadow:0 2px 12px rgba(0,0,0,.5)}
.story-sub{opacity:.95; margin-top:2px; font-size:16px; line-height:1.6; font-style:italic}
.story-cta{margin:12px auto 0; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.96); color:#111; text-decoration:none; font-weight:800}
.story-cta:hover{filter:brightness(1.03)}

/* Varsayılan: oklar gizli (FOUC engelleme). Masaüstünde JS body.has-arrows ekleyince görünür. */
.story-next, .story-prev{position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:44px; height:44px; display:none; place-items:center; border-radius:999px; background:rgba(255,255,255,.95); color:#111; border:0; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.25)}
body.story.has-arrows .story-next, body.story.has-arrows .story-prev{ display:grid }
/* Okları kartın DIŞINA yerleştir: merkeze göre hesaplanan sabit ofset */
.story-prev{ left: calc(50% - (min(420px, 88vw))/2 - 56px); }
.story-next{ right: calc(50% - (min(420px, 88vw))/2 - 56px); }
.story-next svg, .story-prev svg{width:22px; height:22px}
.story-next svg, .story-prev svg{width:22px; height:22px}

@media (max-width:560px){
	/* MOBİL: Tam ekran (Instagram benzeri) görünüm */
	.story-wrap{ height:100dvh; display:block; }
	/* Arka plan bulanık katmanı mobilde gereksiz -> kapat */
	.story-bg, .story-vignette{ display:none; }
	.story-frame{ width:100vw; height:100dvh; margin:0; border-radius:0; box-shadow:none; background:#000 }
	.story-progress{ top:10px; padding-left:12px; padding-right:12px }
	/* Güvenli alanları dikkate al (iPhone çentik) */
	@supports(padding:max(0px)){
		.story-progress{ top: calc(10px + env(safe-area-inset-top)); padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); }
	}
	/* Dış okları gizle, mobilde dokunma/sürükleme ile gezin */
	.story-next, .story-prev{ display:none; }
	/* Kapatma butonu boyut ve güvenli alan ayarı */
	.story-close{ width:40px; height:40px; right:12px; top:26px }
	@supports(padding:max(0px)){
		.story-close{ top: calc(26px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); }
	}
}

/* Dokunmatik cihazlar için (ekran genişliğinden bağımsız) tam ekran ve güvenli alan ayarları */
@media (pointer:coarse){
	.story-wrap{ height:100dvh; display:block; }
	.story-bg, .story-vignette{ display:none; }
	.story-frame{ width:100vw; height:100dvh; margin:0; border-radius:0; box-shadow:none; background:#000 }
	.story-progress{ top:10px; padding-left:12px; padding-right:12px }
	@supports(padding:max(0px)){
		.story-progress{ top: calc(10px + env(safe-area-inset-top)); padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); }
	}
	.story-next, .story-prev{ display:none; }
	.story-close{ width:40px; height:40px; right:12px; top:26px }
	@supports(padding:max(0px)){
		.story-close{ top: calc(26px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); }
	}
}

/* JS ile zorla-mobil modu: body.story.is-mobile eklendiğinde her yerde tam ekran uygula */
body.story.is-mobile .story-wrap{ height:100dvh; height:100svh; display:block; }
body.story.is-mobile .story-bg,
body.story.is-mobile .story-vignette{ display:none !important; }
body.story.is-mobile .story-frame{ width:100vw; height:100dvh; height:100svh; margin:0; border-radius:0; box-shadow:none; background:#000 }
body.story.is-mobile .story-next,
body.story.is-mobile .story-prev{ display:none !important; }
body.story.is-mobile .story-progress{ top:10px; padding:0 12px }
@supports(padding:max(0px)){
	body.story.is-mobile .story-progress{ top: calc(10px + env(safe-area-inset-top)); padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); }
	body.story.is-mobile .story-close{ top: calc(26px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); }
}

/* (Kaldırıldı) Genişlik tabanlı zorlamayı iptal ettik; mobil tespiti JS/is-mobile ve pointer:coarse ile yönetiyoruz. */

/* küçük yardımcı sınıflar */
.hidden{display:none !important}

/* Ken Burns efekti: yavaş yakınlaş, son yüzde 20'de uzaklaş */
@keyframes kb-zoom{
	/* Biraz daha hızlı yakınlaşma: ~21sn'de tepe, kısa bekleme, sonra uzaklaşma */
	0%{ transform:scale(1.04) }
	35%{ transform:scale(1.12) }
	58%{ transform:scale(1.12) }
	100%{ transform:scale(1.04) }
}

/* Basılı tutarken (uzun basma) animasyonları durdur: JS .paused sınıfını ekler */
.story-frame.paused .story-slide .story-img{ animation-play-state: paused !important }