/* ==========================================================================
   InstaStory – Frontend Styles
   Instagram Highlights & Stories benzeri görünüm
   ========================================================================== */

/* Custom Properties */
:root {
  --is-gradient-start: #f09433;
  --is-gradient-mid1:  #e6683c;
  --is-gradient-mid2:  #dc2743;
  --is-gradient-mid3:  #cc2366;
  --is-gradient-end:   #bc1888;
  --is-ring-size:      3px;
  --is-ring-gap:       2px;
  --is-lb-bg:          rgba(0, 0, 0, 0.96);
  --is-lb-radius:      18px;
  --is-progress-h:     2px;
  --is-caption-bg:     linear-gradient(transparent, rgba(0,0,0,.65));
  --is-font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --is-easing:         cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Container & Row
   -------------------------------------------------------------------------- */
.instastory-container {
  width: 100%;
  overflow: hidden;
  font-family: var(--is-font);
}

.instastory-highlights-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 12px 4px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.2) transparent;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.instastory-highlights-row::-webkit-scrollbar { height: 3px; }
.instastory-highlights-row::-webkit-scrollbar-track { background: transparent; }
.instastory-highlights-row::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 99px;
}

/* --------------------------------------------------------------------------
   Highlight Bubble
   -------------------------------------------------------------------------- */
.instastory-highlight-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  scroll-snap-align: start;
  flex-shrink: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.instastory-highlight-ring {
  width: calc(var(--is-size, 80px) + (var(--is-ring-size) + var(--is-ring-gap)) * 2);
  height: calc(var(--is-size, 80px) + (var(--is-ring-size) + var(--is-ring-gap)) * 2);
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(
    135deg,
    var(--is-gradient-start),
    var(--is-gradient-mid1),
    var(--is-gradient-mid2),
    var(--is-gradient-mid3),
    var(--is-gradient-end)
  );
  padding: var(--is-ring-size);
  transition: transform 0.2s var(--is-easing), box-shadow 0.2s var(--is-easing);
  will-change: transform;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  transform: translateZ(0);
}

.instastory-highlight-item:hover .instastory-highlight-ring,
.instastory-highlight-item:focus .instastory-highlight-ring {
  transform: scale(1.07);
  box-shadow: 0 6px 24px rgba(188, 24, 136, 0.4);
}

.instastory-highlight-item:active .instastory-highlight-ring {
  transform: scale(0.96);
}

.instastory-highlight-img-wrap {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  padding: var(--is-ring-gap);
  overflow: hidden;
  box-sizing: border-box;
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
}

.instastory-highlight-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s var(--is-easing);
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
}

.instastory-highlight-item:hover .instastory-highlight-img {
  transform: scale(1.05);
}

/* Seen state */
.instastory-highlight-item.is-seen .instastory-highlight-ring {
  background: #c7c7c7;
}

.instastory-highlight-label {
  font-size: 11px;
  font-weight: 500;
  color: #262626;
  text-align: center;
  max-width: calc(var(--is-size, 80px) + 12px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

@media (prefers-color-scheme: dark) {
  .instastory-highlight-label { color: #fafafa; }
}

/* --------------------------------------------------------------------------
   Lightbox Overlay
   -------------------------------------------------------------------------- */
.instastory-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.instastory-lightbox[hidden] {
  display: none !important;
}

.instastory-lb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: is-overlay-in 0.25s var(--is-easing);
}

@keyframes is-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Stage (Story Viewer)
   -------------------------------------------------------------------------- */
.instastory-lb-stage {
  position: relative;
  z-index: 1;
  width: min(100vw, 420px);
  height: min(100vh, 748px);
  max-height: 100vh;
  border-radius: var(--is-lb-radius);
  overflow: hidden;
  background: #111;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.7);
  animation: is-stage-in 0.3s var(--is-easing);
}

@media (max-width: 480px) {
  .instastory-lb-stage {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
}

@keyframes is-stage-in {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.instastory-lb-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 10px 12px 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
}

/* --------------------------------------------------------------------------
   Progress Bars
   -------------------------------------------------------------------------- */
.instastory-progress-bars {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
}

.instastory-progress-bar {
  flex: 1;
  height: var(--is-progress-h);
  background: rgba(255,255,255,.35);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.instastory-progress-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #fff;
  border-radius: 99px;
  width: 0%;
  transition: width linear;
}

.instastory-progress-bar.is-done .instastory-progress-bar-fill {
  width: 100%;
  transition: none;
}

/* --------------------------------------------------------------------------
   Meta (Avatar + Title + Actions)
   -------------------------------------------------------------------------- */
.instastory-lb-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
}

.instastory-lb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--is-gradient-start), var(--is-gradient-end));
  padding: 2px;
  flex-shrink: 0;
}

.instastory-lb-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #000;
  display: block;
}

.instastory-lb-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.instastory-lb-time {
  font-size: 11px;
  color: rgba(255,255,255,.7);
  margin-left: 2px;
}

.instastory-lb-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Mute & Close Divs  –  (div[role=button] kullanıyoruz – tema button stilleri uygulamasın)
   -------------------------------------------------------------------------- */
.instastory-lightbox .instastory-mute-btn,
.instastory-lightbox .instastory-close-btn {
  background:         transparent !important;
  background-color:   transparent !important;
  border:             none        !important;
  outline:            none        !important;
  box-shadow:         none        !important;
  color:              #fff        !important;
  cursor:             pointer     !important;
  padding:            4px         !important;
  border-radius:      50%         !important;
  display:            flex        !important;
  align-items:        center      !important;
  justify-content:    center      !important;
  transition:         background 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select:        none;
}

.instastory-lightbox .instastory-mute-btn:hover,
.instastory-lightbox .instastory-close-btn:hover {
  background: rgba(255,255,255,.15) !important;
}

/* hidden attribute desteği – div'de hidden = display:none */
.instastory-lightbox [hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Media Area  –  ElementorKit/tema img { height:auto } override'larını kır
   -------------------------------------------------------------------------- */
.instastory-lb-media {
  flex: 1;
  width: 100%;
  min-height: 0;
  position: relative;
  background: #111;
  overflow: hidden;
  display: block !important;
}

/* Her story slide'ı */
.instastory-lb-media .is-media-item {
  position: absolute !important;
  top:    0 !important;
  left:   0 !important;
  right:  0 !important;
  bottom: 0 !important;
  width:  100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #111 !important;
  display: block !important;
  margin:  0 !important;
  padding: 0 !important;
}

/*
 * Görsel & video – tüm tema override'larını geçersiz kıl.
 * JS tarafında da setAttribute ile inline !important yazılıyor.
 */
.instastory-lb-media .is-media-item > img,
.instastory-lb-media .is-media-item > video,
#instastory-lb-media .is-media-item > img,
#instastory-lb-media .is-media-item > video,
.instastory-lightbox img.is-story-media,
.instastory-lightbox video.is-story-media {
  position:    absolute !important;
  top:         0        !important;
  left:        0        !important;
  right:       0        !important;
  bottom:      0        !important;
  width:       100%     !important;
  height:      100%     !important;
  min-width:   100%     !important;
  min-height:  100%     !important;
  max-width:   none     !important;
  max-height:  none     !important;
  object-fit:      cover  !important;
  object-position: center !important;
  display:       block !important;
  border-radius: 0     !important;
  margin:        0     !important;
  padding:       0     !important;
  float:         none  !important;
  border:        none  !important;
  box-shadow:    none  !important;
  vertical-align: top  !important;
  -webkit-filter: none !important;
  filter:         none !important;
  outline:        none !important;
}

/* Slide animasyonları – .is-media-item üzerinde yapılır */
.instastory-lb-media .is-media-item.is-entering-right {
  animation: is-enter-right 0.28s var(--is-easing) forwards;
}
.instastory-lb-media .is-media-item.is-entering-left {
  animation: is-enter-left 0.28s var(--is-easing) forwards;
}
.instastory-lb-media .is-media-item.is-leaving-left {
  animation: is-leave-left 0.28s var(--is-easing) forwards;
}
.instastory-lb-media .is-media-item.is-leaving-right {
  animation: is-leave-right 0.28s var(--is-easing) forwards;
}

@keyframes is-enter-right {
  from { transform: translateX(100%); opacity: 0.7; }
  to   { transform: translateX(0);    opacity: 1;   }
}
@keyframes is-enter-left {
  from { transform: translateX(-100%); opacity: 0.7; }
  to   { transform: translateX(0);     opacity: 1;   }
}
@keyframes is-leave-left {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}
@keyframes is-leave-right {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Loading Spinner
   -------------------------------------------------------------------------- */
.instastory-lb-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.instastory-lb-loading.is-visible {
  opacity: 1;
  pointer-events: all;
}

.instastory-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: is-spin 0.7s linear infinite;
}

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

/* --------------------------------------------------------------------------
   Caption
   -------------------------------------------------------------------------- */
.instastory-lb-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 48px 20px 28px;
  background: var(--is-caption-bg);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  line-height: 1.5;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 3;
}

.instastory-lb-caption:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   Nav Divs (sol/sağ dokunma alanları)
   div kullanıyoruz – ElementorKit'in button stilleri uygulanmıyor
   -------------------------------------------------------------------------- */
.instastory-lightbox .instastory-nav {
  position:            absolute    !important;
  top:                 0           !important;
  bottom:              0           !important;
  width:               35%         !important;
  height:              100%        !important;
  background:          transparent !important;
  background-color:    transparent !important;
  border:              none        !important;
  outline:             none        !important;
  box-shadow:          none        !important;
  cursor:              pointer     !important;
  z-index:             8           !important;
  padding:             0           !important;
  margin:              0           !important;
  display:             block       !important;
  -webkit-tap-highlight-color: transparent;
  user-select:         none;
}

.instastory-lightbox .instastory-nav:hover,
.instastory-lightbox .instastory-nav:focus {
  background: transparent !important;
  outline:    none        !important;
}

.instastory-lightbox .instastory-nav-prev { left: 0    !important; right: auto !important; }
.instastory-lightbox .instastory-nav-next { right: 0   !important; left: auto  !important; }

/* --------------------------------------------------------------------------
   Group Prev / Next (sahne dışı oklar – div)
   -------------------------------------------------------------------------- */
.instastory-lightbox .instastory-group-prev,
.instastory-lightbox .instastory-group-next {
  position:    absolute              !important;
  top:         50%                   !important;
  transform:   translateY(-50%)      !important;
  z-index:     2                     !important;
  background:  rgba(255,255,255,.12) !important;
  backdrop-filter: blur(4px);
  border:      none                  !important;
  outline:     none                  !important;
  box-shadow:  none                  !important;
  color:       #fff                  !important;
  width:       44px                  !important;
  height:      44px                  !important;
  border-radius: 50%                 !important;
  display:     flex                  !important;
  align-items: center                !important;
  justify-content: center            !important;
  cursor:      pointer               !important;
  transition:  background 0.2s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.instastory-lightbox .instastory-group-prev { left: 12px; }
.instastory-lightbox .instastory-group-next { right: 12px; }

.instastory-lightbox .instastory-group-prev:hover,
.instastory-lightbox .instastory-group-next:hover {
  background: rgba(255,255,255,.28) !important;
}

.instastory-group-prev.is-hidden,
.instastory-group-next.is-hidden {
  opacity: 0 !important;
  pointer-events: none;
}

@media (max-width: 540px) {
  .instastory-group-prev,
  .instastory-group-next { display: none !important; }
}

/* --------------------------------------------------------------------------
   Link CTA
   -------------------------------------------------------------------------- */
.instastory-lb-link {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.2s;
  border: 1px solid rgba(255,255,255,.3);
}

.instastory-lb-link:hover {
  background: rgba(255,255,255,.28);
  transform: translateX(-50%) translateY(-2px);
}

.instastory-lb-link[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Body lock
   -------------------------------------------------------------------------- */
body.instastory-open {
  overflow: hidden;
  touch-action: none;
}

/* --------------------------------------------------------------------------
   Empty
   -------------------------------------------------------------------------- */
.instastory-empty {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 24px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .instastory-highlights-row {
    gap: 12px;
    padding: 8px 2px 12px;
  }
  .instastory-lb-caption {
    font-size: 13px;
    padding: 40px 16px 84px;
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .instastory-lightbox { display: none !important; }
}