/* story.css - Instagram hikaye seridi (baloncuklar) + tam ekran viewer */

/* ---------- Serit ---------- */
/* Serit krem zemine sola yapisik ve az baloncukla bos duruyordu:
   kendi beyaz karti icine alindi, baloncuklar ortalandi. */
.ig-strip { padding-block: var(--sp-8); background: var(--bg-page-alt, var(--cream)); }
@media (min-width: 768px) { .ig-strip { padding-block: var(--sp-10); } }
.ig-strip > .container {
  background: var(--bg-surface);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
@media (min-width: 768px) { .ig-strip > .container { padding: var(--sp-7) var(--sp-8); } }

.ig-strip__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-block-end: var(--sp-5);
}
.ig-strip__title {
  font-size: var(--fs-h4); margin: 0;
  display: flex; align-items: center; gap: var(--sp-2);
}
/* Basligin onundeki Instagram isareti (markup: ig-rail.ejs icinde SVG). */
.ig-strip__logo {
  inline-size: 24px; block-size: 24px; flex: none;
  display: block;
}
@media (min-width: 768px) {
  .ig-strip__logo { inline-size: 26px; block-size: 26px; }
}
/* Yuksek kontrast modunda gradyan kalkar; glif sistem rengiyle cizilsin. */
@media (forced-colors: active) {
  .ig-strip__logo g { stroke: CanvasText; }
  .ig-strip__logo circle[fill] { fill: CanvasText; }
}
.ig-strip__link { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-pink); text-decoration: none; }
.ig-strip__link:hover { text-decoration: underline; }

.ig-rail {
  display: flex; gap: var(--sp-4);
  /* Baloncuk sayisi az oldugunda sola yapismaz, ortalanir; cok olunca kayar */
  justify-content: safe center;
  overflow-x: auto; scroll-snap-type: x proximity;
  /* Odak halkasi overflow:auto tarafindan KIRPILIYORDU: klavye kullanicisi
     hangi baloncukta oldugunu goremiyordu. Ic bosluk halkaya yer acar. */
  padding: 6px 6px var(--sp-2);
  margin: 0; list-style: none;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  /* Kaydirilabilir oldugu belli olsun: sagda yumusak bir kesme. */
  scroll-padding-inline: 6px;
}
.ig-rail::-webkit-scrollbar { height: 6px; }
.ig-rail::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 3px; }
.ig-rail::-webkit-scrollbar-track { background: transparent; }
.ig-rail__item { flex: 0 0 auto; scroll-snap-align: start; }

.ig-bubble {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  inline-size: 92px; min-inline-size: 92px; max-inline-size: 92px;
  background: none; border: none; cursor: pointer; padding: 0;
}
.ig-bubble__ring {
  display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 50%;
  background: conic-gradient(from 210deg,
    var(--yellow-400), var(--pink-500), var(--purple-500), var(--blue-400), var(--yellow-400));
  padding: 3px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.ig-bubble:hover .ig-bubble__ring { transform: scale(1.05); }
.ig-bubble:focus-visible .ig-bubble__ring {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring-inner), 0 0 0 5px var(--focus-ring);
}
.ig-bubble__img {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden;
  border: 2.5px solid var(--bg-surface); background: var(--navy-50);
}

/* Aktif hikaye (24 saatlik): kalici gonderiden ayirt edilsin diye kucuk
   bir "canli" noktasi. Halka dondurulmez - icindeki fotograf da donerdi. */
.ig-bubble--canli { position: relative; }
.ig-bubble--canli::after {
  content: '';
  position: absolute; inset-block-start: 4px; inset-inline-end: 4px;
  inline-size: 14px; block-size: 14px; border-radius: 50%;
  background: var(--pink-500);
  border: 2.5px solid var(--bg-surface);
  animation: ig-canli 2s ease-in-out infinite;
}
@keyframes ig-canli {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.82); }
}
.ig-bubble__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-bubble__label {
  font-size: var(--fs-xs); line-height: 1.25; color: var(--ink-body);
  font-weight: var(--fw-semibold); text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  inline-size: 100%;
  overflow-wrap: anywhere;      /* uzun kelime baloncugu tasirmasin */
  hyphens: auto;
}

/* ---------- Tam ekran viewer ---------- */
/* KILIT KOK OGEDE: site.css'te `html { overflow-x: clip }` var; CSS Overflow
   §3.5'e gore body'nin overflow'u viewport'a yalnizca html'in overflow'u iki
   eksende de `visible` ise tasinir. Bu yuzden `body.story-open{overflow:hidden}`
   hicbir tarayicida calismiyordu ve goruntuleyici acikken arka plandaki sayfa
   kaymaya devam ediyordu. */
html.story-open, body.story-open { overflow: hidden; }
html.story-open { overscroll-behavior: none; }

.story {
  position: fixed; inset: 0; z-index: var(--z-story, 900);
  display: grid; place-items: center;
}
.story[hidden] { display: none; }
.story__backdrop { position: absolute; inset: 0; background: rgba(10 12 24 / 0.94); }

.story__stage {
  position: relative;
  width: 100%; height: 100dvh;
  max-width: 100%; max-height: 100dvh;
  display: flex; flex-direction: column;
  background: #0b0e18;
  overflow: hidden;
  overscroll-behavior: contain;   /* parmak hareketi arkadaki sayfaya gecmesin */
  touch-action: pan-y;
  padding-block-start: env(safe-area-inset-top, 0px);
  padding-block-end: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 700px) {
  .story__stage {
    width: min(430px, 42vw);
    height: min(92dvh, 860px);
    aspect-ratio: 9 / 16;
    border-radius: var(--r-2xl);
  }
}

/* Ilerleme cubuklari */
.story__bars {
  position: absolute; inset-block-start: calc(8px + env(safe-area-inset-top, 0px));
  inset-inline: 10px; z-index: 3;
  display: flex; gap: 4px;
}
.story__bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255 255 255 / 0.32); overflow: hidden; }
.story__bar-fill { display: block; height: 100%; width: 0; background: #fff; }

/* Ust bilgi */
.story__top {
  position: absolute; inset-block-start: calc(22px + env(safe-area-inset-top, 0px));
  inset-inline: 10px; z-index: 3;
  display: flex; align-items: center; gap: var(--sp-2);
  color: #fff;
}
.story__avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: rgba(255 255 255 / 0.2); flex: none; }
.story__avatar img { width: 100%; height: 100%; object-fit: cover; }
.story__meta { display: grid; line-height: 1.2; flex: 1; min-width: 0; }
.story__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story__time { font-size: 11px; opacity: 0.75; }
.story__btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer;
  border-radius: 50%; flex: none;
}
.story__btn:hover { background: rgba(255 255 255 / 0.14); }
/* display:grid, [hidden] ozniteligini eziyordu - acikca geri al */
.story__btn[hidden] { display: none; }
.story__btn svg { width: 20px; height: 20px; }

/* SVG <g> uzerinde .hidden JS'ten CALISMAZ (bkz. story.js syncMuteIcon).
   Ikon durumu dugmedeki sinifla, CSS uzerinden secilir. */
.story__btn.is-muted .story__icon-loud,
.story__btn:not(.is-muted) .story__icon-muted { display: none; }
.story__btn--play.is-paused .story__icon-pause,
.story__btn--play:not(.is-paused) .story__icon-play { display: none; }

/* Otomatik oynatma engellenince cikan buyuk oynat dugmesi */
.story__bigplay {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  inline-size: 72px; block-size: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0 0 0 / 0.55); border: 2px solid rgba(255 255 255 / 0.9);
  color: #fff; cursor: pointer;
}
.story__bigplay[hidden] { display: none; }
.story__bigplay svg { width: 34px; height: 34px; margin-inline-start: 3px; }
.story__bigplay:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); }

/* Medya yuklenemediginde bos siyah ekran yerine gorunen mesaj */
.story__hata {
  color: #fff; opacity: 0.9; font-size: var(--fs-sm);
  text-align: center; padding: var(--sp-5); margin: 0;
}

/* Medya alani */
.story__media { flex: 1; display: grid; place-items: center; min-height: 0; }
.story__img, .story__video {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain; display: block;
}

/* Alt metin */
/* Aciklama + "Daha fazla göster". Zemin sarmalayiciya tasindi ki metin
   acildiginda gecis de birlikte buyusun ve dugme de okunakli kalsin. */
.story__captionwrap {
  position: relative; z-index: 3; flex: 0 0 auto;
  padding-block-start: var(--sp-6);
  background: linear-gradient(to top, rgba(0 0 0 / 0.72), rgba(0 0 0 / 0.35) 60%, transparent);
  /* Alt bilgi seridi ekranin ~185px'ini kapliyordu ve ileri/geri dokunma
     bolgelerini yutuyordu: metnin uzerine basmak hicbir sey yapmiyordu.
     Serit dokunuslari gecirir, yalnizca gercek dugmeler yakalar. */
  pointer-events: none;
}
.story__more, .story__permalink, .story__caption--acik { pointer-events: auto; }
.story__caption {
  /* ALT BOSLUK YOK: overflow:hidden icerigi padding kenarinda kesiyor, satir
     sonunda degil. Alt padding varken 4. satirin ust kismi o boslukta yarim
     yarim goruniyordu. Bosluk asagidaki dugmeye tasindi. */
  margin: 0; padding: var(--sp-4) var(--sp-5) 0;
  color: #fff; font-size: var(--fs-sm); line-height: 1.5;
  max-width: none;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;              /* uzun tek kelime/bağlantı taşmasın */
  white-space: pre-line;                /* Instagram'daki satır sonları korunsun */
}
/* Acik hal: satir siniri kalkar, cok uzun metinde alan kendi icinde kayar. */
.story__caption--acik {
  -webkit-line-clamp: unset;
  display: block;
  overflow-y: auto;
  max-block-size: min(46vh, 340px);
  overscroll-behavior: contain;         /* sonuna gelince sayfa kaymasın */
}
.story__more {
  display: block; margin: 0;
  padding: var(--sp-2) var(--sp-5) var(--sp-2);
  background: none; border: none; cursor: pointer;
  color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  font-family: inherit; text-decoration: underline; text-underline-offset: 2px;
  opacity: 0.9;
}
.story__more:hover { opacity: 1; }
.story__more:focus-visible {
  outline: none; border-radius: var(--r-xs);
  box-shadow: 0 0 0 2px rgba(0 0 0 / 0.6), 0 0 0 4px #fff;
}
.story__permalink {
  position: relative; z-index: 3;
  display: block; padding: 0 var(--sp-5) var(--sp-4);
  color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  opacity: 0.85; text-decoration: underline;
}

/* [hidden] TUZAGI: yazar tarafindaki display, tarayicinin [hidden] kuralini
   ezer. JS bu ogeleri .hidden = true ile gizlemeye calisiyor ama ekranda
   kaliyorlardi: aciklamasi olmayan bir gonderide bir onceki gonderinin
   "Instagram'da gör" baglantisi duruyordu. Acikca geri alinmali. */
.story__caption[hidden],
.story__more[hidden],
.story__permalink[hidden] { display: none; }

/* Alt bilginin tamami bossa gradyan seridi bosuna gorunmesin. */
.story__captionwrap:not(:has(> :not([hidden]))) { background: none; padding: 0; }

/* Dokunma bolgeleri: sol %30 geri, sag %70 ileri */
.story__nav { position: absolute; inset-block: 60px 90px; z-index: 2; background: none; border: none; cursor: pointer; }
.story__nav--prev { inset-inline-start: 0; width: 30%; }
.story__nav--next { inset-inline-end: 0; width: 70%; }

@media (prefers-reduced-motion: reduce) {
  .ig-bubble__ring { transition: none; }
  .ig-bubble--canli::after { animation: none; }
}

/* Windows Yuksek Kontrast: sistem renkleri arka planlari eziyor, ilerleme
   cubugu ve aciklama zemini kayboluyordu. Kenarlik/sistem rengiyle geri gelir. */
@media (forced-colors: active) {
  .story__stage { border: 1px solid CanvasText; }
  .story__bar { border: 1px solid CanvasText; background: Canvas; forced-color-adjust: none; }
  .story__bar-fill { background: Highlight; forced-color-adjust: none; }
  .story__captionwrap { background: Canvas; border-block-start: 1px solid CanvasText; }
  .story__caption, .story__more, .story__permalink, .story__hata { color: CanvasText; }
  .story__bigplay { background: Canvas; border-color: CanvasText; color: CanvasText; }
  .ig-bubble__ring { background: CanvasText; }
  .ig-bubble--canli::after { background: Highlight; }
}