/* ============================================
   STORY BANNER - SENKRONİZE SONSÜZ AKIŞ
   ============================================ */
.story-banner { width: 100%; background: linear-gradient(135deg, #0a0a0f 0%, #111118 100%); border-bottom: 1px solid rgba(16, 185, 129, 0.2); padding: 12px 0; position: fixed; top: 0; left: 0; z-index: 9999; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); height: 155px; box-sizing: border-box; }
body { padding-top: 155px !important; }
.story-banner-inner { width: 100%; overflow: hidden; display: flex; align-items: center; height: 100%; }
.story-track { display: flex; align-items: center; gap: 16px; width: max-content; animation: storyScroll 120s linear infinite; will-change: transform; }
.story-track:hover { animation-play-state: paused; }
.story-card { flex-shrink: 0; width: 85px; box-sizing: border-box; }
.story-card a { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.story-card a:hover { transform: translateY(-4px); }
.story-img-inner { width: 85px; height: 110px; border-radius: 14px; overflow: hidden; border: 2px solid rgba(16, 185, 129, 0.3); background: #111118; margin-bottom: 6px; transition: all 0.3s ease; box-sizing: border-box; }
.story-card a:hover .story-img-inner { border-color: rgba(16, 185, 129, 0.8); box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }
.story-img-inner img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px; background: rgba(255, 255, 255, 0.03); box-sizing: border-box; }
.story-card span { display: block; text-align: center; font-size: 0.68rem; font-weight: 700; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.story-banner::before, .story-banner::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }
.story-banner::before { left: 0; background: linear-gradient(90deg, #0a0a0f 0%, transparent 100%); }
.story-banner::after { right: 0; background: linear-gradient(-90deg, #0a0a0f 0%, transparent 100%); }
@keyframes storyScroll { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 768px) { .story-banner { height: 125px; padding: 8px 0; } body { padding-top: 125px !important; } .story-track { gap: 10px; animation-duration: 95s; } .story-card { width: 68px; } .story-img-inner { width: 68px; height: 88px; border-radius: 12px; } .story-card span { font-size: 0.6rem; } }
@media (max-width: 480px) { .story-banner { height: 110px; padding: 6px 0; } body { padding-top: 110px !important; } .story-track { gap: 8px; animation-duration: 80s; } .story-card { width: 58px; } .story-img-inner { width: 58px; height: 74px; border-radius: 10px; } .story-card span { font-size: 0.55rem; } }