/* Hero sağ tarafı (hero-sag.js): sonuç önde. Uygulama renkleri .v (vignette.css) belirteçlerinden. */
.hs.win-hero { position: relative; width: min(640px, 100%); max-width: 100%; justify-self: end; height: 470px; }
.hs-soluk { color: var(--k-t3, #737373); }
.hs-yesil { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #E7F4EC; color: var(--k-grn, #1E8E4E); flex: none; }
.hs-kart { position: absolute; }

.hs-c-oyun { position: absolute; top: 40px; right: 0; z-index: 1; width: 600px; margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 1672 / 941; background: #1C1915; box-shadow: 0 34px 70px -34px rgba(28,25,21,.6); }
.hs-c-oyun img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hs-c-oyun figcaption { position: absolute; right: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; color: rgba(255,255,255,.86); background: rgba(20,18,15,.55); backdrop-filter: blur(6px); }
.hs-c-istek { left: -40px; top: 0; z-index: 4 !important; width: 340px; display: grid; gap: 6px; padding: 14px 16px; }
.hs-c-istek p { margin: 0; color: var(--k-t1); }
.hs-c-istek .hs-soluk { font-size: 12px; }
.hs-c-sonuc { right: 24px; bottom: 0; z-index: 4 !important; width: 360px; padding: 14px 16px; display: grid; gap: 10px; }
.hs-c-ust { display: flex; align-items: center; gap: 10px; }
.hs-c-ust b { font-weight: 600; }
.hs-c-sonuc dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hs-c-sonuc dt { font-size: 12px; color: var(--k-t3); }
.hs-c-sonuc dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; }

/* giriş: sahne, sonra istek, sonra sonuç */
.hs-c-oyun, .hs-kart { opacity: 0; transform: translateY(14px); filter: blur(4px);
  transition: opacity .6s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1), filter .6s cubic-bezier(.23,1,.32,1); }
.hs-gel .hs-c-oyun, .hs-gel .hs-kart, .hs-son-hal .hs-c-oyun, .hs-son-hal .hs-kart { opacity: 1; transform: none; filter: none; }
.hs-gel .hs-c-istek { transition-delay: .14s; }
.hs-gel .hs-c-sonuc { transition-delay: .5s; }

@media (max-width: 1100px) {
  .hs.win-hero { width: 100%; height: auto; justify-self: stretch; }
  .hs-c-oyun, .hs-kart { position: relative; inset: auto; width: 100%; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .hs, .hs * { transition: none !important; } }

/* Fare derinliği: --nx/--ny (-1..1), --hp (0..1) hero-sag.js'ten */
.hs.win-hero { --nx: 0; --ny: 0; --hp: 0; transform-style: preserve-3d;
  transform: perspective(1400px) rotateY(calc(var(--nx) * 5deg)) rotateX(calc(var(--ny) * -4deg)); }
.hs-c-oyun { translate: calc(var(--nx) * -8px) calc(var(--ny) * -6px); }
.hs-c-oyun img { scale: calc(1 + var(--hp) * .045); translate: calc(var(--nx) * -14px) calc(var(--ny) * -10px); }
.hs-c-oyun::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--hp) * .9);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,214,160,.22), rgba(255,180,110,.06) 40%, transparent 70%);
  mix-blend-mode: screen; }
.hs-c-istek { translate: calc(var(--nx) * 16px) calc(var(--ny) * 12px); }
.hs-c-sonuc { translate: calc(var(--nx) * 24px) calc(var(--ny) * 18px); }
.hs-c-istek, .hs-c-sonuc { box-shadow: 0 0 0 1px rgba(13,13,13,.07), 0 1px 2px rgba(13,13,13,.05), 0 calc(28px + var(--hp) * 18px) calc(56px + var(--hp) * 30px) -30px rgba(28,25,21,calc(.34 + var(--hp) * .16)); }
.hs-c-oyun { box-shadow: 0 calc(34px + var(--hp) * 16px) calc(70px + var(--hp) * 30px) -34px rgba(28,25,21,calc(.6 + var(--hp) * .1)); }
.hs-c-oyun figcaption { z-index: 1; }
@media (max-width: 1100px) { .hs.win-hero { transform: none; } .hs-c-oyun, .hs-c-oyun img, .hs-c-istek, .hs-c-sonuc { translate: none; } }