html {
  width: 100%;
}

body {
  overflow-x: hidden !important;
}

body.show-spinner > main {
  overflow: hidden !important;
}

/* Hide everything under body tag */
body.show-spinner > *{
  opacity: 0;
}

/* Spinner */
body.show-spinner::after{
  content: " ";
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  border-top-color: rgba(0, 0, 0, 0.3);
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  left: calc(50% - 15px);
  top: calc(50% - 15px);
  position: fixed;
  z-index: 1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

/* Hikaye Göstergesi Stilleri - Logo Etrafında Çember */
.story-indicator {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: 1000;
  pointer-events: none;
}

.story-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ff6b6b 0deg,
    #ff8e53 60deg,
    #ffa500 120deg,
    #ff6b6b 180deg,
    #ff4757 240deg,
    #ff6b6b 300deg,
    #ff6b6b 360deg
  );
  animation: storyRotate 3s linear infinite, storyPulse 2s ease-in-out infinite;
  box-shadow: 
    0 0 20px rgba(255, 107, 107, 0.8),
    0 0 40px rgba(255, 107, 107, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  position: relative;
  mask: radial-gradient(circle, transparent 65%, black 65%);
  -webkit-mask: radial-gradient(circle, transparent 65%, black 65%);
  filter: blur(0.5px);
}

.story-ring::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: conic-gradient(
    from 0deg,
    #ff4757 0deg,
    #ff6b6b 45deg,
    #ffa500 90deg,
    #ff6b6b 135deg,
    #ff8e53 180deg,
    #ff6b6b 225deg,
    #ff4757 270deg,
    #ff6b6b 315deg,
    #ff4757 360deg
  );
  border-radius: 50%;
  animation: storyRotate 4s linear infinite reverse;
  mask: radial-gradient(circle, transparent 65%, black 65%);
  -webkit-mask: radial-gradient(circle, transparent 65%, black 65%);
}

@keyframes storyRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes storyPulse {
  0% {
    transform: scale(1);
    box-shadow: 
      0 0 20px rgba(255, 107, 107, 0.8),
      0 0 40px rgba(255, 107, 107, 0.4),
      inset 0 0 20px rgba(255, 255, 255, 0.1);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 
      0 0 30px rgba(255, 107, 107, 1),
      0 0 60px rgba(255, 107, 107, 0.6),
      inset 0 0 30px rgba(255, 255, 255, 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 
      0 0 20px rgba(255, 107, 107, 0.8),
      0 0 40px rgba(255, 107, 107, 0.4),
      inset 0 0 20px rgba(255, 255, 255, 0.1);
  }
}

/* Hikaye Göstergesi - Görüldü Durumu (Soluk) */
.story-indicator.seen .story-ring {
  background: conic-gradient(
    from 0deg,
    #e0e0e0 0deg,
    #f0f0f0 90deg,
    #e8e8e8 180deg,
    #f5f5f5 270deg,
    #e0e0e0 360deg
  );
  animation: storyRotateSeen 6s linear infinite, storyPulseSeen 4s ease-in-out infinite;
  box-shadow: 
    0 0 15px rgba(200, 200, 200, 0.5),
    0 0 30px rgba(200, 200, 200, 0.2),
    inset 0 0 15px rgba(255, 255, 255, 0.3);
  mask: radial-gradient(circle, transparent 65%, black 65%);
  -webkit-mask: radial-gradient(circle, transparent 65%, black 65%);
  filter: blur(0.3px);
}

.story-indicator.seen .story-ring::before {
  background: conic-gradient(
    from 0deg,
    #d0d0d0 0deg,
    #e8e8e8 60deg,
    #f0f0f0 120deg,
    #e0e0e0 180deg,
    #f5f5f5 240deg,
    #d8d8d8 300deg,
    #d0d0d0 360deg
  );
  animation: storyRotateSeen 8s linear infinite reverse;
}

@keyframes storyRotateSeen {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes storyPulseSeen {
  0% {
    opacity: 0.7;
    transform: scale(1);
    box-shadow: 
      0 0 15px rgba(200, 200, 200, 0.5),
      0 0 30px rgba(200, 200, 200, 0.2),
      inset 0 0 15px rgba(255, 255, 255, 0.3);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
    box-shadow: 
      0 0 20px rgba(200, 200, 200, 0.7),
      0 0 40px rgba(200, 200, 200, 0.3),
      inset 0 0 20px rgba(255, 255, 255, 0.4);
  }
  100% {
    opacity: 0.7;
    transform: scale(1);
    box-shadow: 
      0 0 15px rgba(200, 200, 200, 0.5),
      0 0 30px rgba(200, 200, 200, 0.2),
      inset 0 0 15px rgba(255, 255, 255, 0.3);
  }
}

/* Mobil uyumluluk */
@media (max-width: 767px) {
  .story-indicator {
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
  }
  
  .story-ring {
    border-width: 2px;
  }
}