/* ============================================================
   RIVALS.CSS
   Marvel Rivals Türkçe Dublaj - oyuna özel görünüm (rivals.js).
   Oyun renkleri (sarı + kahraman renkleri) yalnızca bu kartta ve
   detay sayfasında kullanılır; sitenin geri kalanı tek renkli kalır.

   Bölümler:
     01 Kart / kapak katmanları
     02 Detay: ilerleme paneli
     03 Ulti girişi (ekran boyu bant)
     04 Hareket azaltma
   ============================================================ */

.work-card--rivals,
.rv-art,
.rv,
.rv-splash {
  --rv-yellow: #F5C84A;
  --rv-ink: #100D17;
  --rv-display: 'Bebas Neue', var(--font-display);
}
/* Bebas Neue yalnız büyük harf çizer: büyük harfe dil kuralıyla çevrilir
   (Türkçe metinde i -> İ, lang="en" kahraman adlarında i -> I) */
.rv-dash__title, .rv-splash__name { text-transform: uppercase; }

/* ============================================================
   01 · KART / KAPAK KATMANLARI
   Üzerine gelince: kahramanlar ulti girişindeki gibi öne atılır,
   arkada hız çizgileri döner, logo kısa bir "zaman akışı"
   kırılması yaşar.
   ============================================================ */
.work-card--rivals { border-color: rgba(245, 200, 74, 0.26); }
.work-card--rivals:hover {
  border-color: rgba(245, 200, 74, 0.6);
  box-shadow: 0 26px 60px -32px rgba(245, 200, 74, 0.38);
}
.rv-art { isolation: isolate; }
.rv-art .work-card__img,
.rv-art .pd-cover__img { filter: saturate(1.1); }

.rv-art__fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Hız çizgileri: kahramanların arkasından yayılır */
.rv-art__lines {
  position: absolute;
  inset: -40%;
  background: repeating-conic-gradient(from 0deg at 64% 58%, transparent 0deg 5deg, rgba(255, 244, 214, 0.16) 5deg 6deg);
  -webkit-mask-image: radial-gradient(circle at 64% 58%, transparent 12%, #000 55%);
  mask-image: radial-gradient(circle at 64% 58%, transparent 12%, #000 55%);
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 0.35s var(--ease-soft), transform 0.8s var(--ease);
}

.rv-art__heroes { position: absolute; inset: 0; }
.rv-art__hero {
  position: absolute;
  bottom: -7%;
  height: 88%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55));
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.25), opacity 0.4s var(--ease-soft);
}
.rv-art__hero--1 { right: 42%; height: 80%; opacity: 0.88; transform: translate(10%, 6%) scale(0.94); }
.rv-art__hero--2 { right: 20%; z-index: 2; height: 96%; transform: translateY(5%); }
.rv-art__hero--3 { right: -6%; height: 84%; opacity: 0.92; transform: translate(-4%, 6%) scale(0.96); }

/* Raster nokta deseni: çizgi roman baskısı hissi, sol üst köşede */
.rv-art__dots {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: radial-gradient(rgba(245, 200, 74, 0.7) 1px, transparent 1.5px);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(120deg, #000 0%, transparent 34%);
  mask-image: linear-gradient(120deg, #000 0%, transparent 34%);
  opacity: 0.32;
  transition: opacity var(--t-base);
}

.rv-art__logo {
  position: absolute;
  z-index: 4;
  left: 1.1rem;
  bottom: 2.9rem;
  width: 40%;
  max-width: 230px;
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7));
}

/* Kart altındaki canlı ilerleme şeridi (ulti şarj göstergesi gibi bölmeli) */
.rv-art__meter {
  position: absolute;
  z-index: 4;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.rv-art__meter-bar {
  position: relative;
  flex: 1;
  height: 4px;
  overflow: hidden;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 10px);
  mask-image: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 10px);
  background: rgba(255, 255, 255, 0.16);
}
.rv-art__meter-bar i {
  position: absolute;
  inset: 0;
  background: var(--rv-yellow);
  transform-origin: left center;
  transition: transform 1.2s var(--ease);
}
.rv-art__meter-val { color: var(--rv-yellow); font-weight: var(--w-medium); }

/* Kartta üzerine gelince; detay kapağında fare beklemeden hep açık */
.work-card--rivals:hover .rv-art__lines,
.rv-art--detail .rv-art__lines { opacity: 1; transform: scale(1); }
.work-card--rivals:hover .rv-art__hero--1,
.rv-art--detail .rv-art__hero--1 { transform: translate(-6%, 1%) scale(0.98); opacity: 1; }
.work-card--rivals:hover .rv-art__hero--2,
.rv-art--detail .rv-art__hero--2 { transform: translateY(-3%) scale(1.06); }
.work-card--rivals:hover .rv-art__hero--3,
.rv-art--detail .rv-art__hero--3 { transform: translate(6%, 1%) scale(1); opacity: 1; }
.work-card--rivals:hover .rv-art__dots,
.rv-art--detail .rv-art__dots { opacity: 0.5; }
/* Oyundaki gibi büyük düzen: kartın büyütme efekti kahraman katmanında kalsın */
.work-card--rivals:hover .work-card__img { transform: scale(1.06); }

/* Detay kapağı: biraz daha geniş yerleşim */
.rv-art--detail { position: relative; }
.rv-art--detail .rv-art__logo { width: 38%; max-width: 280px; bottom: 3.3rem; left: 1.4rem; }
.rv-art--detail .rv-art__meter { left: 1.4rem; right: 1.4rem; bottom: 1.2rem; }

@media (prefers-reduced-motion: no-preference) {
  .work-card--rivals:hover .rv-art__lines,
  .rv-art--detail .rv-art__lines { animation: rv-spin 14s linear infinite; }
  .work-card--rivals:hover .rv-art__logo { animation: rv-glitch 0.5s steps(1, end) 1; }
  /* Detay kapağı: kahramanlar hafifçe süzülür, logo ara ara kırılır */
  .rv-art--detail .rv-art__hero { animation: rv-float 3.6s ease-in-out infinite alternate; }
  .rv-art--detail .rv-art__hero--1 { animation-delay: -1.2s; }
  .rv-art--detail .rv-art__hero--3 { animation-delay: -2.4s; }
  .rv-art--detail .rv-art__logo { animation: rv-glitch-loop 5s steps(1, end) 1.2s infinite; }
  .rv-art.is-entering .rv-art__hero { animation: rv-hero-enter 0.75s cubic-bezier(0.2, 0.9, 0.25, 1.2) both; }
  .rv-art.is-entering .rv-art__hero--1 { animation-delay: 0.08s; }
  .rv-art.is-entering .rv-art__hero--2 { animation-delay: 0.16s; }
  .rv-art.is-entering .rv-art__hero--3 { animation-delay: 0.24s; }
}
@keyframes rv-spin { to { rotate: 360deg; } }
@keyframes rv-glitch {
  0%   { filter: drop-shadow(3px 0 0 rgba(255, 70, 100, 0.85)) drop-shadow(-3px 0 0 rgba(70, 220, 255, 0.85)); translate: -3px 0; }
  25%  { filter: drop-shadow(-4px 0 0 rgba(255, 70, 100, 0.85)) drop-shadow(4px 0 0 rgba(70, 220, 255, 0.85)); translate: 3px -1px; clip-path: inset(10% 0 45% 0); }
  50%  { filter: drop-shadow(2px 0 0 rgba(255, 70, 100, 0.85)) drop-shadow(-2px 0 0 rgba(70, 220, 255, 0.85)); translate: -2px 1px; clip-path: inset(50% 0 5% 0); }
  75%  { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7)); translate: 1px 0; clip-path: none; }
  100% { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7)); translate: 0 0; }
}
/* Aynı kırılma, 5 sn'lik döngünün ilk %10'unda; kalan sürede logo sakin */
@keyframes rv-glitch-loop {
  0%   { filter: drop-shadow(3px 0 0 rgba(255, 70, 100, 0.85)) drop-shadow(-3px 0 0 rgba(70, 220, 255, 0.85)); translate: -3px 0; }
  2.5% { filter: drop-shadow(-4px 0 0 rgba(255, 70, 100, 0.85)) drop-shadow(4px 0 0 rgba(70, 220, 255, 0.85)); translate: 3px -1px; clip-path: inset(10% 0 45% 0); }
  5%   { filter: drop-shadow(2px 0 0 rgba(255, 70, 100, 0.85)) drop-shadow(-2px 0 0 rgba(70, 220, 255, 0.85)); translate: -2px 1px; clip-path: inset(50% 0 5% 0); }
  7.5%, 100% { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7)); translate: 0 0; clip-path: none; }
}
@keyframes rv-hero-enter {
  from { translate: 40% 0; opacity: 0; }
  to   { translate: 0 0; }
}
@keyframes rv-float {
  from { translate: 0 0; }
  to   { translate: 0 -2.5%; }
}

/* ============================================================
   02 · DETAY: İLERLEME PANELİ
   Halka, oyundaki ulti şarj göstergesinden esinli (bölmeli yay).
   ============================================================ */
.rv {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.rv-dash {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid rgba(245, 200, 74, 0.22);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(108, 78, 200, 0.16), transparent 55%),
    var(--bg-1);
}
/* Panel köşesinde raster deseni */
.rv-dash::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(245, 200, 74, 0.5) 1px, transparent 1.5px);
  background-size: 8px 8px;
  -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 30%);
  mask-image: linear-gradient(225deg, #000 0%, transparent 30%);
  opacity: 0.35;
}
.rv-dash > * { position: relative; }

.rv-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.rv-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.rv-live.is-live { color: var(--rv-yellow); }
.rv-live.is-live .rv-live__dot { background: var(--rv-yellow); }
@media (prefers-reduced-motion: no-preference) {
  .rv-live.is-live .rv-live__dot { animation: rv-live 1.8s var(--ease-soft) infinite; }
}
@keyframes rv-live {
  0%   { box-shadow: 0 0 0 0 rgba(245, 200, 74, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(245, 200, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 200, 74, 0); }
}

.rv-dash__title {
  font-family: var(--rv-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  line-height: 1;
  letter-spacing: 0.01em;
}
.rv-dash__lead {
  margin-top: var(--s-3);
  max-width: 62ch;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.rv-dash__updated { color: var(--text-3); white-space: nowrap; }

.rv-dash__body {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 720px) {
  .rv-dash__body { grid-template-columns: auto 1fr; justify-items: stretch; align-items: center; }
}

.rv-meter {
  position: relative;
  width: clamp(170px, 22vw, 210px);
  aspect-ratio: 1;
}
.rv-meter svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.rv-meter__track,
.rv-meter__arc { fill: none; stroke-width: 14; }
.rv-meter__track { stroke: rgba(255, 255, 255, 0.1); }
.rv-meter__arc {
  stroke: var(--rv-yellow);
  transition: stroke-dasharray 1.4s var(--ease);
}
.rv-meter__core {
  position: absolute;
  inset: 22%;
  display: grid;
  place-content: center;
  text-align: center;
}
/* Ortadaki elmas: oyundaki ulti simgesinin çerçevesi */
.rv-meter__core::before {
  content: "";
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(245, 200, 74, 0.45);
  background: radial-gradient(circle, rgba(245, 200, 74, 0.1), transparent 70%);
  transform: rotate(45deg) scale(0.86);
}
.rv-meter__val {
  position: relative;
  font-family: var(--rv-display);
  font-size: clamp(2.5rem, 4.6vw, 3.25rem);
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rv-meter__label {
  position: relative;
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.rv-meter.is-ready .rv-meter__label { color: var(--rv-yellow); }

.rv-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 3vw, 2.5rem);
  width: 100%;
}
.rv-stat dt { color: var(--text-2); font-size: var(--fs-sm); }
.rv-stat dd {
  margin-top: 0.25rem;
  font-family: var(--rv-display);
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.rv-stat dd small { font-size: 0.55em; color: var(--text-3); margin-left: 0.1em; }

.rv-dash__managers {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.rv-dash__managers strong { color: var(--text); font-weight: var(--w-medium); }

.rv__credit { color: var(--text-3); font-size: var(--fs-xs); line-height: var(--lh-normal); }

/* ============================================================
   03 · ULTI GİRİŞİ
   Oyunda ulti açılınca gelen kahraman bandı: eğik renkli şerit
   sağdan girer, kahraman soldan öne atılıp ses boyunca büyür
   (--rv-dur = ses süresi), adı çarpar. Ses bitince kahraman
   küçülmeden, büyüdüğü hâliyle kaybolur.
   Tıklamaları engellemez (pointer-events: none).
   ============================================================ */
.rv-splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
.rv-splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 12, 0.5);
  opacity: 0;
}
.rv-splash.is-on { visibility: visible; }
.rv-splash__band {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: min(44vh, 360px);
  margin-top: calc(min(44vh, 360px) / -2);
  overflow: hidden;
  background: linear-gradient(100deg, color-mix(in srgb, var(--hc) 95%, #000) 0%, color-mix(in srgb, var(--hc) 62%, #000) 100%);
  border-block: 3px solid var(--rv-yellow);
  transform: skewY(-7deg) translateX(110%);
}
.rv-splash__lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 14px, rgba(255, 255, 255, 0.1) 14px 16px);
}
.rv-splash__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.35) 1.4px, transparent 1.8px);
  background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%);
  mask-image: linear-gradient(90deg, transparent 20%, #000 75%);
}
.rv-splash__hero {
  position: absolute;
  left: 50%;
  top: 50%;
  height: min(72vh, 580px);
  width: auto;
  max-width: none;
  filter: drop-shadow(10px 14px 0 rgba(0, 0, 0, 0.35));
  transform: translate(-100%, -50%);
  transform-origin: 50% 70%;
  opacity: 0;
  translate: -30vw 0;
  scale: 1;
}
/* Geçiş (animasyon değil): çıkışta yalnız opaklık değişir, boyut korunur */
.rv-splash.is-on .rv-splash__hero {
  opacity: 1;
  translate: 0 0;
  scale: 1.14;
  transition:
    opacity 0.3s var(--ease-soft) 0.08s,
    translate 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) 0.08s,
    scale var(--rv-dur, 2.5s) cubic-bezier(0.2, 0.7, 0.3, 1) 0.1s;
}
.rv-splash.is-on.is-out .rv-splash__hero {
  opacity: 0;
  transition:
    opacity 0.32s var(--ease-soft),
    translate 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) 0.08s,
    scale var(--rv-dur, 2.5s) cubic-bezier(0.2, 0.7, 0.3, 1) 0.1s;
}
.rv-splash__text {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(44vw, 520px);
  transform: translate(4%, -50%) skewY(-7deg);
}
.rv-splash__name {
  display: block;
  font-family: var(--rv-display);
  font-size: clamp(3rem, 8.5vw, 6.5rem);
  line-height: 0.9;
  color: #FFFDF6;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
  opacity: 0;
}
@media (max-width: 719px) {
  .rv-splash__hero { height: min(56vh, 420px); transform: translate(-80%, -50%); }
  .rv-splash__text { left: 50%; width: 52vw; transform: translate(-6%, -50%) skewY(-7deg); }
}

.rv-splash.is-on::before { animation: rv-fade-in 0.25s var(--ease-soft) forwards; }
.rv-splash.is-on .rv-splash__band { animation: rv-band-in 0.36s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
.rv-splash.is-on .rv-splash__lines { animation: rv-lines-run 0.5s linear infinite; }
.rv-splash.is-on .rv-splash__name { animation: rv-slam 0.32s 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards; }
.rv-splash.is-out::before { animation: rv-fade-out 0.38s var(--ease-soft) forwards; }
.rv-splash.is-out .rv-splash__band { animation: rv-band-out 0.38s cubic-bezier(0.6, 0, 0.8, 0.4) forwards; }
.rv-splash.is-out .rv-splash__name { animation: rv-fade-out 0.25s var(--ease-soft) forwards; }

@keyframes rv-fade-in  { to { opacity: 1; } }
@keyframes rv-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rv-band-in  { from { transform: skewY(-7deg) translateX(110%); } to { transform: skewY(-7deg) translateX(0); } }
@keyframes rv-band-out { from { transform: skewY(-7deg) translateX(0); } to { transform: skewY(-7deg) translateX(-110%); } }
@keyframes rv-lines-run { to { background-position: 0 32px; } }
@keyframes rv-slam     { from { opacity: 0; scale: 1.5; } to { opacity: 1; scale: 1; } }

/* ============================================================
   04 · HAREKET AZALTMA
   Bant JS tarafında hiç gösterilmez; burada sürekli döngüler
   ve geçişler kapatılır.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .rv-art__lines, .rv-art__hero, .rv-art__meter-bar i, .rv-meter__arc { transition: none; }
  .rv-splash { display: none; }
}