/* ==================================================================
   KONSEPT 1 - "Son Dakika Penaltisi"  |  300 x 600 sabit
   0..44    ust bar
   44..452  oyun alanı (gerçekçi stadyum, kaleci ve top)
   452..582 alt blok (mac satiri + CTA)
   582..600 yasal serit
   ================================================================== */

#stage { background: #080c0e; }

/* ---------------- oyun alani ---------------- */
.play { position: absolute; top: 44px; left: 0; right: 0; height: 408px; overflow: hidden; }

/* Fotoğraf görünümündeki saha tek perspektifte tutulur; kale ayrı bir katmandır. */
.sky {
  position: absolute;
  inset: 0;
  background: #164528 url('../assets/stadium-realistic.jpg') center -41px / 300px 453px no-repeat;
}
.sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,16,21,.12), transparent 42%, rgba(3,16,9,.22));
}
.pitchwrap { display: none; }
.shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 35%, rgba(3,12,9,.14) 100%),
    linear-gradient(180deg, transparent 78%, rgba(4,15,10,.48));
}

.lines { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.lines path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.3; }
.lines .spot { fill: rgba(255,255,255,.65); }

/* ---------------- kale ---------------- */
.goal {
  position: absolute;
  left: 36px; top: 28px;
  width: 228px; height: 100px;
  z-index: 11;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.6));
}
.gsvg { width: 100%; height: 100%; display: block; }
#netg { transform-origin: 50% 50%; }

/* hedef bolgeleri: her biri bir oran */
.zones {
  position: absolute;
  left: 7px; right: 7px; top: 7px; bottom: 3px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
}
.zone {
  position: relative;
  border: 1px dashed rgba(255,255,255,.3);
  border-radius: 3px;
  background: rgba(255,255,255,.05);
  color: #fff;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  cursor: pointer;
  padding: 5px 0 0;
  transition: background .15s linear, border-color .15s linear;
}
.zone b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.zone img { width: 13px; height: 13px; }
.zone.kz {
  border: 1px solid rgba(0,210,102,.85);
  background: rgba(0,134,65,.42);
  animation: glowRing 2s var(--ease-both) infinite;
}
.zone.hot { background: rgba(243,227,0,.32); border-color: var(--yellow); }

/* ---------------- fotoğraf görünümünde kaleci ---------------- */
.keeper {
  position: absolute;
  left: 150px; top: 128px;
  width: 0; height: 0;
  z-index: 14;
  pointer-events: none;
}
.keeper-visual {
  position: absolute;
  display: block;
  left: -33px; top: -74px;
  width: 66px; height: 74px;
  transform-origin: 50% 72%;
  will-change: transform;
  filter: drop-shadow(0 1px 1px rgba(1,13,7,.45));
}
.keeper-visual img { width: 100%; height: 100%; object-fit: contain; display: block; }
.keeper::after {
  content: '';
  position: absolute;
  left: -28px; top: -3px;
  width: 56px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(1,10,5,.7), rgba(1,10,5,.25) 55%, transparent 75%);
  filter: blur(1px);
  transition: opacity .25s;
}
.keeper.ready .keeper-visual { animation: kSway 1.3s var(--ease-both) infinite alternate; }
.keeper.diving::after { opacity: .35; }
@keyframes kSway {
  from { transform: translate(-4px, 0) rotate(-1deg); }
  to { transform: translate(4px, 1px) rotate(1deg); }
}

/* ---------------- gerçekçi top ve temas gölgesi ---------------- */
.ball {
  position: absolute;
  left: 150px; top: 330px;
  width: 0; height: 0;
  z-index: 20;
  will-change: transform;
}
.ball img {
  position: absolute;
  left: -22px; top: -44px;
  width: 44px; height: 44px;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
.ball .sh {
  position: absolute;
  left: -19px; top: -4px;
  width: 38px; height: 9px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  filter: blur(3px);
}
.ball.spin img { animation: bSpin .4s linear infinite; }
@keyframes bSpin { to { transform: rotate(360deg); } }

#aim { position: absolute; inset: 0; z-index: 19; pointer-events: none; }

/* ---------------- skor rozeti ---------------- */
.scorechip {
  position: absolute;
  left: 10px; top: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 5px 7px;
  border-radius: 4px;
  background: rgba(8,12,14,.78);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 10px;
  font-weight: 700;
}
.scorechip .lv {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--red);
  animation: livePulse 1s steps(1, end) infinite;
}
.scorechip b { color: var(--red); font-size: 10px; font-weight: 800; }
.scorechip span { color: #cfd6d9; }
.scorechip em { font-style: normal; font-weight: 800; color: #fff; }

/* ---------------- yonlendirme ---------------- */
.hint { left: 0; right: 0; top: 352px; transition: opacity .2s linear; }
.hint .finger { animation: fSwipe 2s var(--ease-both) infinite; }
@keyframes fSwipe {
  0%        { transform: translate(0,0) scale(1); opacity: .25; }
  12%       { opacity: 1; }
  55%       { transform: translate(18px,-46px) scale(.8); opacity: 1; }
  78%, 100% { transform: translate(18px,-46px) scale(.8); opacity: 0; }
}
.hint.off { opacity: 0; }

/* ---------------- gol ---------------- */
.flash { position: absolute; inset: 0; z-index: 55; background: #fff; opacity: 0; pointer-events: none; }
.shout {
  position: absolute;
  left: 0; right: 0; top: 150px;
  z-index: 58;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.shout .s1 {
  font-size: 40px;
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.045em;
  color: var(--yellow);
  text-shadow: 0 2px 0 #6d6600, 0 5px 14px rgba(0,0,0,.8);
  transform: scale(.4);
}
.shout .s2 {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,.95);
  opacity: 0;
  transform: translateY(8px);
}
.shout.on { opacity: 1; }
.shout.on .s1 { animation: sIn .6s var(--pop) forwards; }
.shout.on .s2 { animation: sSub .45s var(--ease-out) .24s forwards; }
@keyframes sIn  { 0% { transform: scale(.35) rotate(-8deg); } 70% { transform: scale(1.08) rotate(2deg); } 100% { transform: scale(1) rotate(-1.5deg); } }
@keyframes sSub { to { opacity: 1; transform: none; } }

#conf { position: absolute; inset: 0; z-index: 59; pointer-events: none; }

/* ---------------- alt blok ---------------- */
.dock {
  position: absolute;
  left: 0; right: 0;
  top: 452px; bottom: 18px;
  z-index: 50;
  padding: 13px 12px;
  background: #11171a;
}
.dk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
}
.dk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dk-txt b { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-txt em { font-style: normal; font-size: 9px; font-weight: 500; color: var(--muted); }
.dk-odd { flex: none; width: 58px; border-radius: 4px; animation: glowRing 2s var(--ease-both) infinite; }

/* ---------------- bitis karti ---------------- */
.endcard {
  position: absolute;
  left: 0; right: 0;
  top: 240px; bottom: 18px;
  z-index: 65;
  padding: 20px 16px 14px;
  text-align: center;
  background: linear-gradient(180deg, rgba(10,14,16,.92) 0, #0e1316 28px, #0a0e10 100%);
  transform: translateY(110%);
  transition: transform .5s var(--ease-out);
  display: flex;
  flex-direction: column;
}
.endcard.up { transform: translateY(0); }
.ec-tag {
  align-self: center;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--green-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}
.ec-amt {
  margin-top: 10px;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--yellow);
}
.ec-sub {
  margin: 10px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 5px;
  background: rgba(0,134,65,.2);
  border: 1px solid rgba(0,210,102,.3);
  font-size: 11px;
  font-weight: 600;
  color: #d4f2e1;
}
.ec-sub img { width: 13px; height: 13px; }
.ec-sub b { color: var(--yellow); font-weight: 900; }
.ec-copy {
  margin: auto 0 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #c3ccd0;
}
.endcard .cta { margin-bottom: 10px; }

/* Oran hedefleri fileyi ve kaleciyi örten bir perde oluşturmaz. */
.goal { filter: drop-shadow(1px 4px 3px rgba(0,10,5,.34)); }
.zone { border-color: rgba(235,249,237,.32); background: rgba(8,37,20,.03); padding-top: 7px; }
.zone.kz { background: rgba(0,134,65,.19); border-color: rgba(24,225,116,.8); }
.zone b { font-size: 13px; text-shadow: 0 1px 4px #06170e, 0 0 6px #06170e; }
.zone.kz img { width: 12px; height: 12px; }
.zone.hot { background: rgba(243,227,0,.22); }
.lines path { stroke: rgba(246,252,242,.55); stroke-width: 1.1; }
.ball .sh { z-index: -1; opacity: .8; }
.ball.spin .sh { opacity: .22; }
.scorechip { background: rgba(7,18,22,.88); border-color: rgba(230,249,241,.17); box-shadow: 0 3px 10px rgba(0,0,0,.22); }
.hint .txt { text-shadow: 0 1px 7px #06150b; }
.dock { background: linear-gradient(180deg, #17221c, #11171a 28%); box-shadow: 0 -1px 0 rgba(194,232,201,.13); }

/* Büyük kalecinin başı oran etiketlerini kapatmaz. */
.zone { padding-top: 3px; }
.zone b { line-height: 1; }
.zone.kz { flex-direction: row; justify-content: center; align-items: flex-start; gap: 3px; }
.scorechip { top: 7px; padding: 4px 8px; line-height: 1; }