/* =============================== detay.css ===============================

   Seri detay sayfasının sezon katmanı: splash-art'lı sezon kartları ve
   arka plan (zemin) crossfade geçişi. sezonlar.js ile birlikte çalışır.   */

/* ------------------------------ zemin geçişi ----------------------------- */

/* Yeni arka plan görseli üstte saydam bir katman olarak açılır; ::after
   gradyanı DOM çocuklarından sonra boyandığı için karartma hep üstte kalır. */
.detay-zemin-gecis {
  position: absolute; inset: 0;
  background: center 16% / cover no-repeat;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}

/* --------------------------- splash-art kartları -------------------------

   Zincirdeki sezonlar ayrı kayıtlarsa her birinin kendi posteri var: metin
   sekmeleri yerine posterli kartlar. Şerit yatay kayar, aktif kart kırmızı
   çerçeve ve parıltıyla işaretlenir.                                        */

.sezon-sekmeler.afisli {
  flex-wrap: nowrap;
  max-height: none;
  overflow-x: auto; overflow-y: hidden;
  gap: 12px;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
  scroll-snap-type: x proximity;
}

.sezon-sekme.afisli {
  flex: 0 0 132px; width: 132px;
  position: relative;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #0d0d12;
  border: 1px solid rgba(255, 255, 255, .09);
  white-space: normal;
  scroll-snap-align: start;
  transition: transform .18s cubic-bezier(.22, 1, .36, 1),
              border-color .18s, box-shadow .18s;
}

.sezon-afis {
  display: block; width: 100%; aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, #16161d, #0b0b0f);
}
.sezon-afis img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), filter .2s ease;
}

/* Pasif kartlar hafif soluk durur; aktif ve hover tam renk. */
.sezon-sekme.afisli:not(.aktif) .sezon-afis img {
  filter: saturate(.8) brightness(.78);
}
.sezon-sekme.afisli:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .28);
  background: #0d0d12;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
}
.sezon-sekme.afisli:hover .sezon-afis img {
  filter: none;
  transform: scale(1.04);
}

/* Kart üstündeki yazı bandı: alttan gradyanla posterin üstüne oturur. */
.sezon-sekme.afisli .sezon-sekme-yazi {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 30px 10px 9px;
  background: linear-gradient(180deg, transparent 0%,
              rgba(5, 5, 8, .78) 45%, rgba(5, 5, 8, .96) 100%);
  text-align: left;
}
.sezon-sekme.afisli .sezon-sekme-ad {
  color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.3;
  white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sezon-sekme.afisli .sezon-sekme-meta {
  font-size: 11px; color: var(--yazi-2); opacity: .9;
}

/* Aktif kart: kırmızı çerçeve + parıltı; posterin üstüne kırmızı zemin
   basılmaz (metin sekmelerindeki .aktif kuralını geçersiz kılar). */
.sezon-sekme.afisli.aktif {
  background: #0d0d12;
  border-color: var(--kirmizi);
  box-shadow: 0 0 0 1px var(--kirmizi), 0 12px 30px rgba(216, 31, 38, .35);
}
.sezon-sekme.afisli.aktif .sezon-sekme-yazi {
  background: linear-gradient(180deg, transparent 0%,
              rgba(40, 5, 8, .82) 45%, rgba(28, 4, 6, .97) 100%);
}
.sezon-sekme.afisli.aktif .sezon-sekme-meta { color: #ffd6d8; opacity: 1; }

@media (max-width: 620px) {
  .sezon-sekme.afisli { flex: 0 0 112px; width: 112px; }
  .sezon-sekme.afisli .sezon-sekme-yazi { padding: 24px 8px 8px; }
}