/* Penaltı Kapışması ekranı: spor yayını grafikleri. Dikey ve yatay yayın; ölçüler ekran yüksekliğine (vh) bağlı. */
body { background: #050a18; }
:root { --ink: #071233; --blue: #1d6bff; --cyan: #33d6ff; --lime: #b9ff3c; }

.bug { position: absolute; left: 50%; top: 1.4vh; transform: translateX(-50%); display: flex; align-items: stretch; border-radius: 0.8vh; overflow: hidden; box-shadow: 0 0.6vh 2vh #0009; white-space: nowrap; font-weight: 900; }
.bug b { padding: 0.65vh 1.5vh; font-size: 1.75vh; letter-spacing: 0.08em; background: linear-gradient(180deg, #123a9c, var(--ink)); }
.bug span { padding: 0.65vh 1.3vh; font-size: 1.75vh; color: var(--ink); background: linear-gradient(180deg, #fff, #cfe0ff); font-variant-numeric: tabular-nums; }

.hint { position: absolute; left: 50%; top: 5.6vh; transform: translateX(-50%); padding: 0.45vh 1.4vh; border-radius: 1vh; background: #000a; font-size: 1.75vh; font-weight: 800; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.hint b { color: var(--lime); font-weight: 900; }

/* şutu atan: profil resmi, ad, ülke, şut türü */
.card { position: absolute; left: 50%; bottom: 11vh; transform: translateX(-50%); display: flex; align-items: center; gap: 1vh; padding: 0.5vh 1.1vh 0.5vh 0.5vh; max-width: 94%; border-radius: 5vh; background: linear-gradient(100deg, #0b2a78f2, #071233f2); border: 0.2vh solid #7fb6ff88; box-shadow: 0 0.8vh 2.4vh #000a; animation: cardIn 0.25s ease-out; }
.card.gold { border-color: #ffd76a; background: linear-gradient(100deg, #6b4a06f2, #2a1c03f2); }
.card .pic .av { width: 5.4vh; height: 5.4vh; font-size: 2.6vh; border: 0.25vh solid #fff; }
.card .meta { min-width: 0; display: flex; flex-direction: column; }
.card small { font-size: 1.3vh; font-weight: 800; letter-spacing: 0.06em; color: var(--cyan); text-transform: uppercase; }
.card.gold small { color: #ffd76a; }
.card b { font-size: 2.2vh; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes cardIn { from { opacity: 0; transform: translate(-50%, 1vh); } }

/* bayrak: gerçek renkleriyle küçük kutu ve yanında ülke kodu */
.flag { flex: none; display: inline-flex; align-items: center; gap: 0.4vh; font-size: 1.1vh; font-weight: 900; letter-spacing: 0.03em; color: #fff; }
.flag i { display: block; width: 3vh; height: 2vh; border-radius: 0.3vh; box-shadow: 0 0 0 0.12vh #ffffff70, 0 0.2vh 0.5vh #0008; }
.flag.big { flex-direction: column; gap: 1vh; font-size: 3vh; }
.flag.big i { width: 30vh; height: 20vh; border-radius: 1.4vh; box-shadow: 0 0 6vh #ffc94a, 0 0 0 0.6vh #ffd76a; }

/* 12 Kasım 2026, kullanıcı: "tribün coşkusunu biraz üste al, altta kalmış" (TikTok'un alt yorum alanında kalıyordu):
   başlığın ve ipucunun hemen altında, biraz daha büyük. Dikeyde listeler ve rehber yer açmak için 4,5vh aşağıda. */
.hype { position: absolute; left: 50%; top: 9.3vh; transform: translateX(-50%); width: 30vh; max-width: 86%; display: flex; flex-direction: column; align-items: center; gap: 0.3vh; }
.hype span { font-size: 1.45vh; font-weight: 900; letter-spacing: 0.1em; text-shadow: 0 0 0.6vh #000; }
.hype i { display: block; width: 100%; height: 1.4vh; border-radius: 1vh; background: #0009; overflow: hidden; box-shadow: 0 0 0 0.12vh #ffffff44; }
.hype b { display: block; height: 100%; width: 0; border-radius: 1vh; background: linear-gradient(90deg, #ff4f6d, #ffb02e); transition: width 0.3s; }
.hype.on b { background: linear-gradient(90deg, #ffb02e, #fff23c); box-shadow: 0 0 1.4vh #ffd76a; }

.panel { background: linear-gradient(180deg, #0b2256d9, #071233e6); border-color: #7fb6ff40; }
.rank { position: absolute; left: 1vh; top: 9vh; width: 20vh; }
.next { position: absolute; left: 1vh; top: 32vh; width: 20vh; }
.panel h4 { color: var(--cyan); font-size: 1.2vh; }
.panel li { font-size: 1.4vh; padding: 0.22vh 0.3vh; }
.panel li .av { width: 2.3vh; height: 2.3vh; font-size: 1vh; }
.panel li > i { font-style: normal; width: 1.5vh; text-align: center; font-weight: 900; color: #ffffffb0; }

.guide { top: 9vh; right: 1vh; gap: 0.5vh; }
.guide div { width: 7.2vh; padding: 0.35vh 0.2vh; background: #071233cc; border-color: #7fb6ff40; }
.guide img { width: 3.2vh; height: 3.2vh; }
.guide i { font-size: 2.3vh; line-height: 3.2vh; }
.guide span { font-size: 1.02vh; }

.calls { position: absolute; left: 50%; bottom: 18vh; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 0.5vh; }
.call { display: flex; align-items: center; gap: 0.7vh; padding: 0.4vh 1.3vh 0.4vh 0.4vh; border-radius: 3vh; background: #071233ee; border: 0.18vh solid #7fb6ff88; font-size: 1.7vh; font-weight: 800; white-space: nowrap; animation: call 3s ease-out forwards; }
.call .av { width: 3.1vh; height: 3.1vh; }
.call b { color: #ffd76a; }
@keyframes call { 0% { opacity: 0; transform: translateY(1vh); } 8% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; } }

/* sonuç damgası */
.stamp { position: absolute; left: 50%; top: 31%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 96%; text-align: center; animation: stamp 2.4s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.stamp b { font-size: 9.5vh; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; color: #fff; -webkit-text-stroke: 0.5vh var(--ink); paint-order: stroke fill; text-shadow: 0 0.6vh 3vh #000c; }
.stamp small { margin-top: 0.8vh; padding: 0.3vh 1.6vh; border-radius: 1vh; background: #071233e8; font-size: 2.2vh; font-weight: 900; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stamp.goal b { color: var(--lime); }
.stamp.bad b { color: #ff5c6c; }
.stamp.near b { color: #ffc94a; }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 84% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -56%) scale(1); } }

.replay { position: absolute; left: 50%; top: 6vh; transform: translateX(-50%); padding: 0.4vh 1.2vh; border-radius: 0.6vh; background: #e4142f; font-size: 1.8vh; font-weight: 900; letter-spacing: 0.08em; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.55; } }

/* şampiyon: üst yarıda; altta sahada sevinen oyuncu görünür */
.champ { position: absolute; left: 0; right: 0; top: 0; height: 52%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8vh; background: radial-gradient(ellipse 70% 80% at 50% 45%, #0a1f5ccc, transparent 75%); animation: champIn 0.6s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes champIn { from { opacity: 0; transform: scale(1.3); } }
.champ .flag.big i { width: 20vh; height: 13vh; animation: champFlag 1.6s ease-in-out infinite alternate; }
@keyframes champFlag { to { transform: perspective(40vh) rotateY(14deg) scale(1.04); } }
.champ-top { display: flex; align-items: center; gap: 0.8vh; padding: 0.4vh 1.4vh 0.4vh 0.4vh; border-radius: 3vh; background: #071233ee; border: 0.2vh solid #ffd76a; font-size: 2vh; font-weight: 800; }
.champ-top .av { width: 3.6vh; height: 3.6vh; }
.champ-top b { font-size: 2vh; }
/* şampiyonlukta yan listeler ve rehber çekilir, bayrağın altındaki kod yazılmaz (ad zaten büyük) */
body.champ-on .rank, body.champ-on .next, body.champ-on .guide, body.champ-on .hint, body.champ-on .calls { opacity: 0; transition: opacity 0.4s; }
.champ .flag.big { font-size: 0; }
.champ small { text-shadow: 0 0 2vh #ffb02e, 0 0.3vh 0.6vh #000; font-size: 3.4vh; font-weight: 900; letter-spacing: 0.22em; color: #ffd76a; }
.champ > b { text-shadow: 0 0.4vh 1.5vh #000; font-size: 5vh; font-weight: 900; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champ span { font-size: 2.6vh; font-weight: 800; color: var(--cyan); }
@keyframes fade { from { opacity: 0; } }

.load { position: absolute; inset: 0; display: grid; place-items: center; background: #050a18; transition: opacity 0.5s; }
.load i { width: 5vh; height: 5vh; border-radius: 50%; border: 0.6vh solid #ffffff33; border-top-color: #fff; animation: spin 0.9s linear infinite; }
.load.done { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.credit { position: absolute; right: 1vh; bottom: 0.5vh; font-size: 1vh; font-weight: 600; color: #ffffff80; }

/* ekran parlaması: adı flash olmasın, kit.css rehber kartı vurgusu da .flash (kart tam ekran saydam katmana dönüşüp kayboluyordu) */
.screenflash { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.wipe { position: absolute; inset: 0; background: linear-gradient(100deg, #071233, #123a9c 55%, #33d6ff); opacity: 0; pointer-events: none; }
.wipe.on { animation: wipe 0.42s ease-in-out; }
@keyframes wipe { 0% { opacity: 0; } 45%, 55% { opacity: 1; } 100% { opacity: 0; } }
.stamp.t2 b { color: #ffb02e; font-size: 10.5vh; }
.stamp.t3 b { color: #7fe9ff; font-size: 10.5vh; }
.stamp.t4 b { color: #ff6a2e; font-size: 11.5vh; }
.stamp.t5 b { color: #ffe28a; font-size: 12.5vh; text-shadow: 0 0 4vh #ffb02e, 0 0.6vh 3vh #000c; }

/* hediye panosu: vuruşa kadar ekranın altında, kademe büyüdükçe büyür */
.gshow { position: absolute; left: 50%; bottom: 9.5vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; width: 96%; pointer-events: none; --c: #6fd7ff; --c2: #123a9c; }
.gshow.t2 { --c: #ffb02e; --c2: #8a2406; }
.gshow.t3 { --c: #33d6ff; --c2: #3a1f9e; }
.gshow.t4 { --c: #ff5a2e; --c2: #6e0d0d; }
.gshow.t5 { --c: #ffd76a; --c2: #7a5200; }
.gs-rays { position: absolute; left: 50%; bottom: calc(50% - 21vh); width: 42vh; height: 42vh; margin-left: -21vh; border-radius: 50%; opacity: 0; background: repeating-conic-gradient(var(--c) 0 9deg, transparent 9deg 24deg); -webkit-mask: radial-gradient(circle, #000 12%, transparent 68%); mask: radial-gradient(circle, #000 12%, transparent 68%); animation: gsSpin 7s linear infinite, gsRays 0.5s ease-out 0.05s forwards; }
.gshow.t0 .gs-rays, .gshow.t1 .gs-rays { display: none; }
.gs-plate { position: relative; display: flex; align-items: center; gap: 1vh; max-width: 100%; padding: 0.6vh 1.5vh 0.6vh 0.6vh; border-radius: 1.3vh; overflow: hidden; background: linear-gradient(100deg, var(--c2), #071233 78%); border: 0.25vh solid var(--c); box-shadow: 0 0 3vh var(--c), 0 1vh 3vh #000b; transform: skewX(-7deg); animation: gsIn 0.34s cubic-bezier(.2, 1.3, .4, 1); }
.gs-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, #ffffffa0 50%, transparent 62%); transform: translateX(-110%); animation: gsShine 1s ease-in-out 0.3s; }
.gs-plate > * { transform: skewX(7deg); }
.gs-plate .pic .av { width: 6vh; height: 6vh; font-size: 2.8vh; border: 0.25vh solid #fff; }
.gs-meta { min-width: 0; display: flex; flex-direction: column; }
.gs-meta small { font-size: 1.6vh; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-meta b { font-size: 3.5vh; line-height: 1.05; font-weight: 900; font-style: italic; color: var(--c); text-transform: uppercase; white-space: nowrap; letter-spacing: 0.01em; }
.gshow.t5 .gs-meta b { font-size: 4.2vh; }
.gshow.t3 .gs-plate { scale: 1.1; }
.gshow.t4 .gs-plate { scale: 1.22; }
.gshow.t5 .gs-plate { scale: 1.32; }
.gs-pts { flex: none; font-size: 3.2vh; font-weight: 900; font-style: italic; color: #fff; text-shadow: 0 0 1.2vh var(--c); }
.gshow.out { animation: gsOut 0.26s ease-in forwards; }
@keyframes gsIn { from { opacity: 0; transform: skewX(-7deg) translateY(4vh) scale(0.8); } }
@keyframes gsSpin { to { transform: rotate(360deg); } }
@keyframes gsRays { to { opacity: 0.5; } }
@keyframes gsShine { to { transform: translateX(110%); } }
@keyframes gsOut { to { opacity: 0; transform: translateX(-50%) translateY(1.5vh) scale(1.08); } }

/* füze ve altında sinema şeritleri, ekran kenarı renkli nabız */
.cine-bar { position: absolute; left: 0; right: 0; height: 7.5vh; background: #000; transition: transform 0.35s cubic-bezier(.2, .8, .3, 1); pointer-events: none; }
.cine-bar.top { top: 0; transform: translateY(-101%); }
.cine-bar.bottom { bottom: 0; transform: translateY(101%); }
body.cine .cine-bar { transform: none; }
.aura { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.4s; box-shadow: inset 0 0 16vh 3vh var(--aura, #ff5a1f); }
body.cine .aura { opacity: 0.75; animation: auraBeat 0.7s ease-in-out infinite alternate; }
body.t4 { --aura: #ff4a1f; }
body.t5 { --aura: #ffc62e; }
@keyframes auraBeat { from { opacity: 0.4; } to { opacity: 0.85; } }

/* sonuç damgası: arkasında ışık, altın ve füzede daha ağır */
.stamp::before { content: ""; position: absolute; left: 50%; top: 40%; width: 76vh; height: 24vh; max-width: 110%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--st, #0008), transparent); z-index: -1; }
.stamp.goal { --st: #b9ff3c44; }
.stamp.t2 { --st: #ff8a2e66; }
.stamp.t3 { --st: #33d6ff66; }
.stamp.t4 { --st: #ff4a1f80; }
.stamp.t5 { --st: #ffc62e90; }
.stamp.bad { --st: #ff315044; }
.stamp.goal b { transform: skewX(-6deg); }
.stamp.t4, .stamp.t5 { animation: stampBig 2.6s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes stampBig { 0% { opacity: 0; transform: translate(-50%, -50%) scale(3.4) rotate(-5deg); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(0.92); } 15% { transform: translate(-50%, -50%) scale(1.04); } 20% { transform: translate(-50%, -50%) scale(1); } 86% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -56%) scale(1); } }
.gshow.t6 { --c: #ff5fa2; --c2: #7a1046; }

/* dikey ekranda tek sütun kalenin sağ yarısını kapatıyordu: iki sütun, kalenin üstünde biter */
@media (max-aspect-ratio: 3/4) {
  .guide { display: grid; grid-template-columns: repeat(2, 7.2vh); gap: 0.4vh; }
  .next { top: 29vh; }
  .rank, .guide { top: 13.8vh; }
  /* şutu atan sol altta durur: kart ve duyurular sağa yaslanır, oyuncunun üstüne binmez */
  .card { left: auto; right: 1.5vh; transform: none; max-width: 62%; animation-name: cardInR; }
  .calls { left: auto; right: 1.5vh; transform: none; align-items: flex-end; max-width: 86%; }
  .call { max-width: 100%; overflow: hidden; }
  .call b { overflow: hidden; text-overflow: ellipsis; }
}
@keyframes cardInR { from { opacity: 0; transform: translateY(1vh); } }

/* yatay ekran (OBS 16:9): yükseklik az, vh ölçüleri küçük kalıyordu; listeler ve rehber büyür, rehber iki sütun */
@media (min-aspect-ratio: 4/3) {
  .rank, .next, .guide { zoom: 1.3; }
  .bug, .hint { zoom: 1.2; }
  .guide { display: grid; grid-template-columns: repeat(2, 7.2vh); gap: 0.4vh; }
  .card, .calls, .hype { zoom: 1.2; }
  .gshow { bottom: 12vh; }
}