/* ===================================================================
   BİLEŞEN: story  (varyantlar: cip · daire · kapali)
   KURAL: yalnız --em-* tokenı. Tema öneki (--ph-*, --pf-*) YASAK —
   bileşen hangi temada olursa çalışmalı.
   =================================================================== */

.bs-story { margin: var(--em-4) 0; }

.bs-story-serit {
  display: flex; gap: var(--em-2);
  overflow-x: auto; padding-bottom: var(--em-2);
  scrollbar-width: none;
  /* Şerit içeriği dar ekranda belgenin kaydırma genişliğini büyütüyordu;
     contain kaydırmayı kutuya hapseder. */
  contain: paint;
}
.bs-story-serit::-webkit-scrollbar { display: none; }

.bs-story-oge {
  flex: 0 0 auto;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: block;
}

/* --- varyant: cip (89×50 yuvarlak dikdörtgen) --- */
.bs-story-cerceve {
  position: relative; display: block;
  width: 89px; height: 50px;
  border: 2px solid var(--em-primary);
  border-radius: var(--em-r-lg);
  overflow: hidden;
  background: var(--em-bg-soft);
  transition: transform var(--em-hiz) ease-out;
}
.bs-story-oge:hover .bs-story-cerceve { transform: translateY(-2px); }
.bs-story-oge.goruldu .bs-story-cerceve { border-color: var(--em-border); }

/* Kapak görseli çipi doldurur (oyun kapakları wordmark logo değil) */
.bs-story-cerceve img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--em-hiz-yavas) ease-out;
}
.bs-story-oge:hover .bs-story-cerceve img { transform: scale(1.06); }

.bs-story-bos {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--em-bg-soft); color: var(--em-text-muted); font-size: var(--em-fs-2xl);
}

/* cip varyantında ad görsel olarak gizlenir (logolar zaten okunur),
   ekran okuyucuda kalır */
.bs-gizli-metin {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- varyant: daire --- */
.bs-story.daire .bs-story-oge {
  width: 72px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.bs-story.daire .bs-story-cerceve {
  width: 64px; height: 64px; border-radius: var(--em-r-daire);
  padding: 2px;
}
.bs-story.daire .bs-story-cerceve img { border-radius: var(--em-r-daire); }
.bs-story-ad {
  font-size: var(--em-fs-xs); color: var(--em-text-muted); text-align: center;
  max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===================================================================
   Tam ekran görüntüleyici (varyantlarda ORTAK)
   =================================================================== */
.bs-story-ekran {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(8, 10, 24, .96);
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity 180ms;
}
.bs-story-ekran.acik { opacity: 1; }

.bs-story-ilerleme { display: flex; gap: var(--em-1); padding: var(--em-3) var(--em-4) 6px; }
.bs-story-cubuk {
  flex: 1 1 0; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .22); overflow: hidden;
}
.bs-story-cubuk i { display: block; height: 100%; width: 0; background: #fff; }
.bs-story-cubuk.gecti i { width: 100%; }
@keyframes bsStoryDol { from { width: 0; } to { width: 100%; } }

.bs-story-kapat {
  position: absolute; z-index: 2; top: var(--em-3); right: var(--em-3);
  width: 36px; height: 36px; border-radius: var(--em-r-daire);
  background: rgba(255, 255, 255, .12); border: 0; color: #fff; cursor: pointer;
}
.bs-story-sahne { position: relative; flex: 1 1 auto; display: grid; place-items: center; padding: var(--em-3); }
.bs-story-gez { position: absolute; top: 0; bottom: 0; width: 34%; background: none; border: 0; cursor: pointer; }
.bs-story-gez.sol { left: 0; }
.bs-story-gez.sag { right: 0; }

.bs-story-kare {
  margin: 0; max-width: 420px; width: 100%;
  border-radius: var(--em-r-xl); overflow: hidden;
  background: var(--em-bg-card);
}
.bs-story-kare img { width: 100%; display: block; }
.bs-story-alt { padding: var(--em-3); display: flex; flex-direction: column; gap: var(--em-2); }
.bs-story-alt b { color: var(--em-text); font-size: var(--em-fs-lg); }

/* Bileşen kendi butonunu taşır: temaya bağımlı olmasın */
.bs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--em-2);
  padding: 9px 18px; border: 0; border-radius: var(--em-r-xs);
  font-size: var(--em-fs-md); font-weight: 600; cursor: pointer;
  transition: background var(--em-hiz) ease-out;
}
.bs-btn-birincil { background: var(--em-primary); color: #fff; }
.bs-btn-birincil:hover { background: var(--em-primary-2); color: #fff; }
.bs-btn-blok { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .bs-story-cerceve, .bs-story-cerceve img { transition: none; }
}