/* ============================================================
   SPORSOFT — "ÜRÜN" katmanı
   sahne.css üstüne biner. Amaç: soyut çizgi grafiklerin yerine
   ÜRÜNÜN KENDİSİNİ göstermek.

   Neden fotoğraf yok: marka kuralı yüz/portre/stok görsel
   yasaklıyor, ayrıca internetten indirilen görselin lisansı
   belirsiz. Bunun yerine arayüzler gerçek tipografiyle, cihaz
   çerçevesi içinde çiziliyor.

   Ölçek kuralı: her mockup kendi kök font-size'ını vh ve vw'nin
   küçüğünden alır, iç ölçüler em'dir. Tek bir sayıyla bütün
   kompozisyon büyüyüp küçülür, hiçbir ekranda taşmaz.
   ============================================================ */

.mock {
  position: relative;
  font-size: clamp(4.6px, min(1.12vh, 0.76vw), 11px);
  font-family: var(--fb);
  line-height: 1.4;
  margin-inline: auto;
}

/* ---------- HERO: telefon + kulüp paneli ---------- */
.mock-hero { width: 60em; height: 66em; max-width: 100%; perspective: 160em; }

/* ============================================================
   CİHAZ
   ============================================================ */
.phone {
  position: absolute; right: 0; top: 1.5em; z-index: 3;
  width: 29em; height: 62.6em;
  border-radius: 4.6em;
  padding: 0.9em;
  background: linear-gradient(150deg, #3A3A3A 0%, #101010 26%, #0A0A0A 52%, #2E2E2E 88%, #121212 100%);
  box-shadow:
    0 0 0 0.09em rgba(255,255,255,.10),
    0 6em 10em -4em rgba(0,0,0,.95),
    0 1.6em 4em -1.4em rgba(254,0,0,.30);
  /* Egim sabit: --p'ye bagli rotateY, perspektif ve rotateX ile
     birlesince maketi dikeyde de kaydiriyordu. */
  transform: rotateY(-13deg) rotateX(2deg);
  transform-style: preserve-3d;
}
.phone-scr {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 3.7em; background: #060606;
  display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 0.1em rgba(255,255,255,.05);
}
.phone::after {
  content: ""; position: absolute; inset: 0.9em; border-radius: 3.7em; pointer-events: none; z-index: 6;
  background: linear-gradient(122deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,0) 34%,
              rgba(255,255,255,0) 66%, rgba(255,255,255,.035) 100%);
}
.ph-island {
  position: absolute; top: 2.2em; left: 50%; translate: -50% 0; z-index: 5;
  width: 8.6em; height: 2.4em; border-radius: 1.2em; background: #000;
}

.ph-status {
  display: flex; align-items: center; padding: 1.6em 2.4em 0.4em;
  font-family: var(--fm); font-size: 1.05em; color: #fff;
}
.ph-status span { flex: 1; }
.ph-status i { font-style: normal; display: inline-flex; gap: .35em; align-items: flex-end; }
.ph-status i u { text-decoration: none; display: block; width: .32em; background: #fff; border-radius: .1em; }
.ph-status i u:nth-child(1) { height: .38em; }
.ph-status i u:nth-child(2) { height: .58em; }
.ph-status i u:nth-child(3) { height: .8em; }
.ph-status i u:nth-child(4) { height: 1.02em; }
.ph-bat { width: 2.1em; height: 1em; border: .1em solid rgba(255,255,255,.5); border-radius: .3em; padding: .13em; margin-left: .5em; }
.ph-bat b { display: block; width: 72%; height: 100%; background: #fff; border-radius: .12em; }

.ph-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5em 2.2em 1em;
  font-family: var(--fm); font-size: .95em; letter-spacing: .22em; color: var(--dim);
}
.ph-nav b { color: #fff; font-weight: 500; }

.ph-body { flex: 1; min-height: 0; padding: 0 2.2em; display: flex; flex-direction: column; gap: 1.1em; }

/* --- kimlik satırı --- */
.pc-id { display: grid; grid-template-columns: auto 1fr; gap: 1.3em; align-items: center; }
.pc-mono {
  width: 6.4em; height: 6.4em; border-radius: 1.6em; display: grid; place-items: center;
  background: linear-gradient(155deg, #1E0000, #0E0E0E 70%);
  border: .1em solid rgba(254,0,0,.42);
  font-family: var(--fm); font-size: 1.7em; font-weight: 600; color: #fff; letter-spacing: .04em;
}
.pc-name { font-family: var(--fh); font-size: 2.05em; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.pc-meta { font-family: var(--fm); font-size: 1em; letter-spacing: .16em; color: var(--sub); margin-top: .35em; }
.pc-ver {
  display: inline-flex; align-items: center; gap: .5em; margin-top: .7em;
  font-family: var(--fm); font-size: .92em; letter-spacing: .12em; color: var(--red); font-weight: 600;
}
.pc-ver s { text-decoration: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: .8em; }

/* --- TBS halkası --- */
.pc-score {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6em; align-items: center;
  padding: 1.3em; border-radius: 1.6em;
  background: linear-gradient(150deg, #170808, #0C0C0C 62%);
  border: .1em solid rgba(254,0,0,.3);
}
.pc-ring { position: relative; width: 8.2em; height: 8.2em; }
.pc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.pc-ring .trk { fill: none; stroke: #202020; stroke-width: 7; }
.pc-ring .arc {
  fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 264; stroke-dashoffset: 68;
  filter: drop-shadow(0 0 4px rgba(254,0,0,.85));
}
.js .pc-ring .arc { stroke-dashoffset: 264; }
.js .seen .pc-ring .arc { stroke-dashoffset: 68; transition: stroke-dashoffset 1.5s var(--out) .45s; }
.pc-ring b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--fm); font-size: 2.2em; font-weight: 600; color: #fff; letter-spacing: -.02em;
}
/* Izgara ogesinin varsayilan min-width:auto'su uzun kelimede
   sutunu genisletip karti tasiriyordu. */
.pc-score > * { min-width: 0; }
.pc-score-t {
  font-family: var(--fm); font-size: 1em; letter-spacing: .22em;
  color: var(--dim);
  /* Uzun bilesik kelimeli dillerde kutudan tasmasin. */
  overflow-wrap: break-word;
}
.pc-score-v { font-family: var(--fh); font-size: 1.5em; font-weight: 600; color: #fff; margin-top: .35em; }
.pc-score-s { font-size: 1.05em; color: var(--sub); margin-top: .3em; }
.pc-score-s em { font-style: normal; color: var(--red); font-weight: 600; }

/* --- özellik çubukları --- */
.pc-attr {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em;
}
.pc-attr div {
  padding: .7em .3em .6em; text-align: center;
  border: .09em solid #1E1E1E; border-radius: .7em; background: #121212;
}
.pc-attr b { display: block; font-family: var(--fm); font-size: 1.5em; font-weight: 600; line-height: 1; }
.pc-attr i {
  display: block; font-style: normal; margin-top: .35em;
  font-family: var(--fm); font-size: .78em; letter-spacing: .06em;
  color: var(--sub); line-height: 1.1;
}
.pc-attr div[data-b="a"] { border-color: rgba(254,0,0,.55); background: rgba(254,0,0,.09); }
.pc-attr div[data-b="a"] b { color: var(--red); }
.pc-attr div[data-b="b"] b { color: #fff; }
.pc-attr div[data-b="c"] b { color: var(--sub); }

.pc-cta {
  margin-top: auto; margin-bottom: 1em;
  display: flex; align-items: center; justify-content: center; gap: .7em;
  height: 4.2em; border-radius: 1.2em; background: var(--red); color: #fff;
  font-family: var(--fm); font-size: 1.05em; font-weight: 600; letter-spacing: .14em;
  box-shadow: 0 1.4em 3em -1.2em rgba(254,0,0,.9);
}

.ph-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em;
  padding: 1.1em 2.2em 1.9em; border-top: .09em solid #171717;
}
.ph-tabs i {
  font-style: normal; display: flex; flex-direction: column; align-items: center; gap: .55em;
  font-family: var(--fm); font-size: .82em; letter-spacing: .08em; color: #8A8A8A;
}
.ph-tabs i s { text-decoration: none; width: 1.7em; height: 1.7em; border: .16em solid currentColor; border-radius: .45em; }
.ph-tabs i.on { color: var(--red); }
.ph-tabs i.on s { background: var(--red); border-color: var(--red); }

/* ============================================================
   KULÜP PANELİ PENCERESİ
   ============================================================ */
.glass-win {
  position: absolute; left: 0; top: 10em; z-index: 1;
  width: 41em; border-radius: 1.5em; overflow: hidden;
  background: linear-gradient(168deg, rgba(20,20,20,.97), rgba(9,9,9,.99));
  border: .09em solid #1F1F1F;
  box-shadow: 0 5em 9em -4em #000, inset 0 .09em 0 rgba(255,255,255,.06);
  transform: rotateY(15deg) rotateX(3deg);
}
.win-top {
  display: flex; align-items: center; gap: .7em; padding: 1.2em 1.5em;
  border-bottom: .09em solid #181818; background: rgba(255,255,255,.02);
  font-family: var(--fm); font-size: .92em; letter-spacing: .16em; color: var(--dim);
}
.win-top u { text-decoration: none; width: .95em; height: .95em; border-radius: 50%; background: #262626; flex: none; }
.win-top span { margin-left: .6em; flex: 1; color: var(--sub); }
.win-top em { font-style: normal; font-size: .85em; letter-spacing: .18em; color: #8A8A8A; }
.win-tools { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; padding: 1.2em 1.5em; border-bottom: .09em solid #141414; }
.win-q {
  flex: 1; min-width: 11em; display: flex; align-items: center; gap: .6em;
  padding: .75em 1em; border: .09em solid #202020; border-radius: .7em; background: #0B0B0B;
  font-family: var(--fm); font-size: .95em; color: #8A8A8A; letter-spacing: .04em;
}
.win-chip {
  padding: .7em 1em; border: .09em solid #202020; border-radius: .7em;
  font-family: var(--fm); font-size: .85em; letter-spacing: .12em; color: var(--dim);
}
.win-chip.on { border-color: rgba(254,0,0,.5); color: var(--red); background: rgba(254,0,0,.07); }
.win-rows { display: grid; }
.wrow {
  display: grid; grid-template-columns: 3.6em 1fr auto auto; gap: 1.1em; align-items: center;
  padding: 1.15em 1.5em; border-bottom: .09em solid #141414;
}
.wrow:last-child { border-bottom: 0; }
.wrow > u {
  text-decoration: none; display: grid; place-items: center; height: 3.6em; border-radius: .7em;
  background: #151515; border: .09em solid #212121;
  font-family: var(--fm); font-size: 1em; color: #fff;
}
.wrow-n { font-family: var(--fh); font-size: 1.25em; font-weight: 600; color: #fff; }
.wrow-m { font-family: var(--fm); font-size: .85em; letter-spacing: .12em; color: var(--dim); margin-top: .25em; }
.wrow-s { width: 6.4em; height: 2.4em; display: block; }
.wrow-s path { fill: none; stroke: #3A3A3A; stroke-width: 2.4; stroke-linecap: round; }
.wrow-t { font-family: var(--fm); text-align: right; min-width: 4.6em; }
.wrow-t em { font-style: normal; display: block; font-size: .78em; letter-spacing: .16em; color: #8A8A8A; }
.wrow-t b { font-size: 1.5em; font-weight: 600; color: #fff; }
.wrow.hot { background: linear-gradient(90deg, rgba(254,0,0,.10), transparent 70%); box-shadow: inset .2em 0 0 var(--red); }
.wrow.hot .wrow-t b { color: var(--red); }
.wrow.hot .wrow-s path { stroke: var(--red); }
.wrow.hot > u { border-color: rgba(254,0,0,.45); background: #1A0808; }
.js .wrow { opacity: 0; }
.js .seen .wrow { opacity: 1; transition: opacity .55s var(--out); transition-delay: calc(.5s + var(--i, 0) * .11s); }

/* imleç: panelin üstünde gezinen işaretçi */
.win-cur {
  position: absolute; right: 7em; bottom: 5em; width: 1.5em; height: 1.5em;
  border-left: .16em solid #fff; border-top: .16em solid #fff;
  filter: drop-shadow(0 .2em .3em rgba(0,0,0,.9));
  animation: cur 4.6s ease-in-out infinite;
}
@keyframes cur {
  0%, 100% { transform: rotate(-38deg) translate(0, 0); }
  50% { transform: rotate(-38deg) translate(-1.4em, -3.6em); }
}

/* ============================================================
   VİDEO DOĞRULAMA
   ============================================================ */
.mock-vid { width: 100%; max-width: 58em; font-size: clamp(5px, min(1.35vh, 0.86vw), 12px); }
.vid {
  border-radius: 1.4em; overflow: hidden; background: #0A0A0A;
  border: .09em solid #1E1E1E; box-shadow: 0 4em 8em -4em #000;
}
.vid-top {
  display: flex; align-items: center; gap: 1em; padding: 1em 1.3em;
  border-bottom: .09em solid #171717; background: #0D0D0D;
  font-family: var(--fm); font-size: .95em; letter-spacing: .14em; color: var(--dim);
}
.vid-top .rec { color: var(--red); font-weight: 600; display: inline-flex; align-items: center; gap: .5em; }
.vid-top .rec u { text-decoration: none; width: .7em; height: .7em; border-radius: 50%; background: var(--red); animation: pulse 1.6s ease-in-out infinite; }
.vid-top .sp { flex: 1; }
.vid-scr { position: relative; aspect-ratio: 16/9; background: #070707; overflow: hidden; }
.vid-scr > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vid-scr::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 38%, rgba(0,0,0,.78) 100%);
}
.vid-brk { position: absolute; inset: 1.2em; pointer-events: none; z-index: 2; }
.vid-brk i { position: absolute; width: 2em; height: 2em; border: .16em solid rgba(255,255,255,.22); }
.vid-brk i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.vid-brk i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.vid-brk i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.vid-brk i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.vid-tag {
  position: absolute; z-index: 3; font-family: var(--fm); font-size: .9em; letter-spacing: .12em;
  padding: .45em .8em; border-radius: .4em; background: rgba(254,0,0,.94); color: #fff; font-weight: 600;
  left: 34%; top: 17%; opacity: clamp(0, calc((var(--p, 0) - .3) * 8), 1);
}
.vid-bar { display: flex; align-items: center; gap: 1.1em; padding: 1.1em 1.3em; border-top: .09em solid #171717; background: #0D0D0D; }
.vid-bar > u { text-decoration: none; flex: 1; height: .45em; border-radius: .25em; background: #1D1D1D; position: relative; overflow: hidden; }
.vid-bar > u > s { position: absolute; top: 0; bottom: 0; left: 0; text-decoration: none; background: var(--red); width: calc(clamp(0, calc(var(--p, 0) * 1.6), 1) * 100%); }
.vid-bar span { font-family: var(--fm); font-size: .9em; letter-spacing: .1em; color: var(--dim); }
.vid-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap;
  padding: 1.1em 1.3em; border-top: .09em solid #171717;
  font-family: var(--fm); font-size: .92em; letter-spacing: .12em; color: var(--dim);
}
.vid-ok { color: var(--red); font-weight: 600; opacity: clamp(0, calc((var(--p, 0) - .55) * 7), 1); }

/* Sonuc okumasi: atlet bitis kapisini gectikten sonra beliriyor.
   Kapinin hemen ustunde, sag ust kosede. */
.vid-son {
  position: absolute; z-index: 3; right: 2.6em; top: 2.6em;
  display: grid; gap: .25em; text-align: right;
  padding: .6em .85em; border-radius: .45em;
  background: rgba(10, 10, 10, .92); border: .09em solid rgba(254, 0, 0, .45);
  font-family: var(--fm); letter-spacing: .1em;
  opacity: clamp(0, calc((var(--p, 0) - .82) * 9), 1);
}
.vid-son b { font-size: .8em; font-weight: 500; color: var(--sub); }
.vid-son span { font-size: 1.25em; font-weight: 600; color: var(--red); }

/* ============================================================
   SAHA — çim, projektör, gren
   ============================================================ */
.turf-fill { fill: url(#turf); }
.flood-fill { fill: url(#flood); }
.grain-fill { fill: #9A9A9A; filter: url(#grain); opacity: .05; }
.area-fill { fill: url(#areaRed); }

.tipcard rect { fill: #101010; stroke: rgba(254,0,0,.45); stroke-width: 1.5; }
.tipcard .k { fill: #8E9BA0; font-family: var(--fm); font-size: 11px; letter-spacing: 1.6px; }
.tipcard .v { fill: #FE0000; font-family: var(--fm); font-size: 22px; font-weight: 600; }

/* ============================================================
   KEŞİF SAHNESİ — geniş panel
   ============================================================ */
/* 800px yuksekliginde masaustunde panel sahneyi 45px tasiriyordu;
   vh katsayisi 1.45 -> 1.28. Uzun ekranlarda ust sinir yine 13px. */
.mock-panel { width: 100%; max-width: 76em; font-size: clamp(5px, min(1.08vh, 0.92vw), 13px); }
.mock-panel .glass-win { position: static; width: 100%; transform: none; }
.mock-panel .win-cur { display: none; }

/* ============================================================
   DAR EKRAN
   ============================================================ */
@media (max-width: 900px) {
  .mock { font-size: clamp(3.8px, 1.7vw, 8px); }

  /* Dar ekranda kompozisyon aynen korunur, yalnızca ölçek düşer:
     masaüstünde ne görülüyorsa mobilde de o görülür. */
  .mock-hero { width: 52em; height: 66em; perspective: 110em; }
  .mock-hero .glass-win { width: 33em; top: 13em; }
  .mock-vid, .mock-panel { font-size: clamp(4.6px, 2.15vw, 9px); max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .win-cur, .vid-top .rec u { animation: none; }
  .js .wrow { opacity: 1; }
  .js .pc-ring .arc { stroke-dashoffset: 68; }
}

/* video karesindeki tarama çizgisi (360 birimlik viewBox) */
.scanline-v {
  stroke: var(--red); stroke-width: 2; stroke-opacity: .85;
  filter: drop-shadow(0 0 10px rgba(254, 0, 0, .9));
  transform: translateY(calc(clamp(0, calc(var(--p, 0) * 1.5), 1) * 360px));
}
@media (prefers-reduced-motion: reduce) { .scanline-v { transform: translateY(180px); } }


/* ============================================================
   HERO KOMPOZİSYONU — hale ve bildirim
   Telefon tek başına duruyordu; ürünün ne yaptığını anlatan
   canlı bir an eksikti. Bildirim kartı o anı gösteriyor.
   ============================================================ */
.hero-glow {
  position: absolute; z-index: 0; pointer-events: none;
  left: 12%; top: 8%; width: 88%; height: 84%;
  background: radial-gradient(closest-side, rgba(254,0,0,.20), rgba(254,0,0,.05) 55%, transparent 78%);
  filter: blur(1.5em);
  opacity: clamp(.35, calc(.35 + var(--p, 0) * .65), 1);
}
.notif {
  position: absolute; z-index: 4; left: 3em; bottom: 6em;
  display: grid; grid-template-columns: auto 1fr; gap: 1em; align-items: center;
  width: 26em; padding: 1.3em 1.5em; border-radius: 1.4em;
  background: rgba(18,18,18,.94); border: .09em solid rgba(254,0,0,.38);
  box-shadow: 0 3em 6em -2em #000, 0 0 4em -1.5em rgba(254,0,0,.9);
  backdrop-filter: blur(1em); -webkit-backdrop-filter: blur(1em);
  animation: float 5.4s ease-in-out infinite;
}
.notif-ic {
  width: 3.4em; height: 3.4em; border-radius: 1em; display: grid; place-items: center;
  background: var(--red); color: #fff; font-size: 1.2em; font-weight: 700;
}
.notif b { display: block; font-family: var(--fh); font-size: 1.35em; font-weight: 600; color: #fff; }
.notif em {
  display: block; font-style: normal; margin-top: .25em;
  font-family: var(--fm); font-size: .95em; letter-spacing: .1em; color: #8A8A8A;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.1em); }
}
@media (prefers-reduced-motion: reduce) { .notif { animation: none; } }


/* ============================================================
   DOKUNMATİK — akıcılık ayarı
   Bu blok dosyanın SONUNDA olmak zorunda: .notif ve .hero-glow
   temel kuralları yukarıda değil, aşağıda tanımlı; ortadaki
   medya bloğuna yazılırsa eziliyor.

   Kaydırmanın her karesinde yeniden hesaplanan 3B dönüş,
   bulanıklık ve cam efekti mobilde sabitleniyor. Görünüm aynı
   kalıyor, kare başına iş yükü kalkıyor.
   ============================================================ */
@media (max-width: 900px) {
  .phone {
    transform: rotateY(-11deg) rotateX(2deg);
    box-shadow: 0 0 0 .09em rgba(255,255,255,.10), 0 3em 5em -2.5em rgba(0,0,0,.95);
  }
  .glass-win {
    transform: rotateY(13deg) rotateX(3deg);
    box-shadow: 0 2.5em 4em -2em #000;
  }
  .hero-glow { opacity: .7; filter: blur(1em); }
  .notif {
    left: 1em; bottom: 4.5em; width: 24em;
    background: #121212; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* ============================================================
   CANLILIK
   Telefon ve panel donuk duruyordu. Buradaki hareketlerin hepsi
   `translate` / `transform` / `opacity` üzerinden, yani sadece
   birleştirici katmanda; kaydırma karesine maliyet yazmıyorlar.
   `translate` ayrı bir özellik olduğu için `transform`daki 3B
   dönüşü bozmuyor.
   ============================================================ */
@keyframes suzul   { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.9em; } }
@keyframes suzul-2 { 0%, 100% { translate: 0 0; } 50% { translate: 0 0.75em; } }
@keyframes canli   { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes imlec   { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes parla   { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes bildirim {
  0%   { opacity: 0; translate: 0 1.8em; }
  7%   { opacity: 1; translate: 0 0; }
  48%  { opacity: 1; translate: 0 -0.7em; }
  58%  { opacity: 0; translate: 0 -1.6em; }
  100% { opacity: 0; translate: 0 1.8em; }
}

.phone     { animation: suzul 7.5s ease-in-out infinite; }
.glass-win { animation: suzul-2 9.5s ease-in-out infinite; }

/* pencere başlığındaki ilk nokta canlı bağlantı göstergesi */
.win-top u:first-child { background: var(--red); animation: canli 2.4s ease-in-out infinite; }

/* arama alanında yanıp sönen imleç */
.win-q::after {
  content: ""; width: .12em; height: 1.25em; background: var(--red);
  animation: imlec 1.1s steps(1) infinite;
}

/* kart butonunda ağır bir parlama */
.pc-cta { position: relative; overflow: hidden; }
.pc-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.30) 50%, transparent 58%);
  animation: parla 6.5s ease-in-out infinite;
}

/* doğrulama rozeti nefes alıyor */
.pc-ver s { animation: canli 3.2s ease-in-out infinite; }

/* bildirim: sürekli durmak yerine gelip gidiyor — olay hissi */
.notif { animation: bildirim 11s ease-in-out infinite; }

/* ============================================================
   HERO GÖRSELİ — dar ekranda taşma payı
   390x664'te (adres çubuğu açık) kompozisyonun tamamı metinle
   birlikte sığmıyordu. Cihaz alttan taşıp maskeyle sönüyor;
   kart ve panel tam boyda kalıyor.
   ============================================================ */
@media (max-width: 900px) {
  .mock-hero {
    max-height: 38svh; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 82%, transparent 100%);
    mask-image: linear-gradient(#000 82%, transparent 100%);
  }
  .notif { left: .5em; bottom: auto; top: 30em; width: 23em; }
}

@media (prefers-reduced-motion: reduce) {
  .phone, .glass-win, .win-top u:first-child, .win-q::after,
  .pc-cta::after, .pc-ver s, .notif { animation: none; }
  .notif { opacity: 1; translate: 0 0; }
}

/* ============================================================
   SÜREKLİ HAREKET — ürün mockup'ları
   ============================================================ */

/* Scouting panelinde listeyi tarayan bant: kaydırdıkça aşağı iner.
   Hem hero'daki panelde hem keşif sahnesinde çalışır. */
.win-rows { position: relative; }
.win-rows::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4em; pointer-events: none;
  background: linear-gradient(180deg, rgba(254,0,0,0), rgba(254,0,0,.14), rgba(254,0,0,0));
  transform: translateY(calc(var(--p, 0) * 28em - 4em));
}

/* Doğrulama karesinde atlet, kaydırma boyunca sahayı geçiyor.
   Etiket ve tarama çizgisi onunla birlikte ilerliyor. */
.atlet { transform: translateX(calc(var(--p, 0) * 200px)); }
.vid-tag { left: calc(29% + var(--p, 0) * 30%); opacity: clamp(0, calc((var(--p, 0) - .12) * 8), 1); }
.scanline-v { transform: translateY(calc(clamp(0, var(--p, 0), 1) * 360px)); }
.vid-bar > u > s { width: 100%; transform-origin: left;
  transform: scaleX(clamp(0, var(--p, 0), 1)); }

@media (prefers-reduced-motion: reduce) {
  .win-rows::after { display: none; }
  .atlet { transform: none; }
  .scanline-v { transform: translateY(180px); }
}

/* oyuncu kartindaki profil gorseli */
.pc-mono { overflow: hidden; padding: 0; }
.pc-mono img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   09 KESIF: scouting paneli ve tam profil karti
   Panel calisan filtre cipleri, sonuc sayaci ve sayfa alt bilgisi
   tasiyor; satirlara basinca yerli <dialog> aciliyor.
   Kart maketin em-olcegine bagli degil, kendi rem olculeri var.
   ============================================================ */

/* ---------- panel ---------- */
.win-chip { font: inherit; cursor: pointer; }
.win-say {
  display: flex; align-items: baseline; gap: .6em;
  padding: .9em 1.5em .5em;
  font-family: var(--fm); font-size: .85em; letter-spacing: .08em;
  color: var(--dim); border-bottom: .09em solid #141414;
}
.win-say b { color: var(--red); font-weight: 600; }
.win-say i { font-style: normal; font-size: .82em; letter-spacing: .16em; }
.win-say i:first-of-type { margin-left: auto; }
.win-say i:last-of-type { min-width: 4.6em; text-align: right; }
.win-alt {
  padding: .85em 1.5em; border-top: .09em solid #141414;
  font-family: var(--fm); font-size: .8em; letter-spacing: .1em; color: #6A6A6A;
}
.wrow[hidden] { display: none; }
[data-oyuncu] { cursor: pointer; transition: background .2s; }
[data-oyuncu]:focus-visible { outline: .16em solid var(--red); outline-offset: -.16em; }
@media (hover: hover) {
  [data-oyuncu]:hover { background: rgba(254, 0, 0, .07); }
}
/* Not panele degecek kadar yakindi. */
.panel-not { margin-top: clamp(18px, 2.6vw, 30px); }

/* ---------- profil karti ----------
   Ozellikler ilerleme bari degil, sayi kutucugu: 13 satirlik bar
   listesi ~338px yer kapliyordu, izgara ucte birine siginiyor.
   Deger uc renk bandinda: 80+, 70-79, altinda. */
.pdlg {
  width: min(94vw, 29rem); padding: 1.1rem 1rem .9rem;
  /* genel `* { margin: 0 }` dialog'un kendi margin:auto'sunu eziyor */
  margin: auto; max-height: min(88vh, 44rem); overflow: auto;
  border: 1px solid rgba(254, 0, 0, .3); border-radius: 14px;
  background: #0E0E0E; color: var(--ink);
  font-family: var(--fb); overscroll-behavior: contain;
}
.pdlg::backdrop { background: rgba(4, 4, 4, .84); backdrop-filter: blur(3px); }
.pdlg-x {
  position: sticky; top: -.2rem; float: right; z-index: 2;
  width: 1.9rem; height: 1.9rem; line-height: 1;
  background: #1A1A1A; border: 1px solid #2A2A2A; border-radius: 50%;
  color: var(--sub); font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 0 0 .3rem #0E0E0E; margin-left: .5rem;
}
.pdlg-x:hover { color: var(--red); border-color: rgba(254, 0, 0, .5); }

.pdlg-bas { display: flex; align-items: center; gap: .75rem; padding-right: .3rem; }
.pdlg-av {
  width: 2.7rem; height: 2.7rem; flex: none;
  display: grid; place-items: center; border-radius: .7rem;
  background: linear-gradient(155deg, #1E0000, #0E0E0E 70%);
  border: 1px solid rgba(254, 0, 0, .42);
  font-family: var(--fm); font-weight: 600; font-size: .78rem;
}
.pdlg-ad { display: block; font-size: 1.05rem; font-weight: 600; line-height: 1.15; }
.pdlg-meta {
  display: block; margin-top: .16rem;
  font-family: var(--fm); font-size: .55rem; letter-spacing: .1em; color: var(--sub);
}
.pdlg-tbs-kutu { margin-left: auto; text-align: right; }
.pdlg-tbs { display: block; font-family: var(--fm); font-size: 1.45rem; font-weight: 600; color: var(--red); line-height: 1; }
.pdlg-tbs-kutu em {
  display: block; font-style: normal; margin-top: .1rem;
  font-family: var(--fm); font-size: .5rem; letter-spacing: .16em; color: var(--sub);
}
.pdlg-satir {
  display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center;
  margin-top: .7rem; padding-bottom: .7rem; border-bottom: 1px solid #1E1E1E;
  font-family: var(--fm); font-size: .58rem; letter-spacing: .08em; color: var(--sub);
}
.pdlg-dog { display: inline-flex; align-items: center; gap: .25rem; color: var(--red); font-weight: 600; }
.pdlg-dog[hidden] { display: none; }
.pdlg-showcase[hidden] { display: none; }
.pdlg-dog s { text-decoration: none; }

.pdlg-b { margin-top: 1rem; }
.pdlg-b h3 {
  font-family: var(--fm); font-size: .55rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--sub);
  margin-bottom: .5rem;
}

/* 13 ozellik: sayi kutucuklari.
   On saha testi bes sutunda (5+5), uc kaleci testi kendi satirinda;
   auto-fit ile 4+4+4+1 gibi tirtikli satirlar olusmuyor. */
.pdlg-ozl {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .28rem;
}
/* Kaleci testleri saha testleriyle ayni rayi kullaniyor ki kutu
   genislikleri tutsun; uc kutu ortada duruyor. */
.pdlg-ozl-kl { margin-top: .28rem; }
.pdlg-ozl-kl li:first-child { grid-column-start: 2; }
.pdlg-ozl li {
  padding: .38rem .16rem .32rem; text-align: center;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 3.15rem;
  border: 1px solid #1E1E1E; border-radius: .45rem; background: #121212;
}
.pdlg-ozl b { display: block; font-family: var(--fm); font-size: .92rem; font-weight: 600; line-height: 1; }
.pdlg-ozl span {
  display: block; margin-top: .2rem; hyphens: none;
  font-size: .5625rem; letter-spacing: 0; color: var(--sub); line-height: 1.12;
  /* iki satirlik sabit alan: sayilar satir boyunca ayni hizada */
  min-height: 2.24em;
}
.pdlg-ozl-kl span { font-size: .52rem; }
.pdlg-ozl li[data-b="a"] { border-color: rgba(254, 0, 0, .55); background: rgba(254, 0, 0, .09); }
.pdlg-ozl li[data-b="a"] b { color: var(--red); }
.pdlg-ozl li[data-b="b"] b { color: var(--ink); }
.pdlg-ozl li[data-b="c"] b { color: var(--sub); }

/* mevki uyumu: saha uzerinde isaretler
   Duz liste yerine gercek oranli saha (105x68). Her mevki kendi
   yerinde; en yuksek puan kirmizi. */
/* Saha kartin en buyuk parcasiydi; %78'e cekildi, isaretler
   buna karsilik buyudu (JS'te r 72, deger 58, etiket 44). */
.pdlg-saha {
  width: 78%; max-width: 18rem; height: auto; display: block;
  margin-inline: auto;
  border: 1px solid #1E1E1E; border-radius: 6px;
}
.pdlg-mev circle { fill: #151515; stroke: #2E2E2E; stroke-width: 3; }
.pdlg-mev text { text-anchor: middle; font-family: var(--fm); font-weight: 600; }
.pdlg-mev .v { fill: var(--sub); }
.pdlg-mev .k { fill: var(--dim); letter-spacing: 1.5; }
.pdlg-mev .ust circle, .pdlg-mev g.ust circle {
  fill: var(--red); stroke: rgba(254, 0, 0, .55);
}
.pdlg-mev g.ust .v { fill: #fff; }
.pdlg-mev g.ust .k { fill: var(--red); }
.pdlg-enuygun { margin-top: .4rem; text-align: center; }
.pdlg-enuygun b { color: var(--red); font-weight: 600; }

/* isi haritasi + gelisim yan yana */
.pdlg-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.pdlg-isi, .pdlg-trend {
  width: 100%; height: auto; display: block;
  border: 1px solid #1E1E1E; border-radius: 6px;
}
.pv-line { fill: none; stroke: #262626; stroke-width: 1.4; }
.pdlg-alt {
  margin-top: .3rem; font-family: var(--fm);
  font-size: .5rem; letter-spacing: .06em; color: var(--sub);
}
.pdlg-alt b { color: var(--ink); font-weight: 600; }
.pdlg-tline { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pdlg-tarea { fill: url(#areaRed); stroke: none; }
.pdlg-tnok circle { fill: #0E0E0E; stroke: var(--red); stroke-width: 3; }
.pdlg-tnok circle:last-child { fill: var(--red); }

/* video */
.pdlg-vid { position: relative; }
.pdlg-vid svg { width: 100%; height: auto; display: block; border: 1px solid #1E1E1E; border-radius: 6px; }
.pv-oyuncu circle { fill: #3A3A3A; }
.pv-oyuncu circle:first-child { fill: var(--red); }
.pdlg-oynat {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(254, 0, 0, .92); border: 0; color: #fff;
  box-shadow: 0 0 0 .4rem rgba(254, 0, 0, .14);
}
.pdlg-vmac {
  position: absolute; left: .4rem; bottom: .4rem;
  font-family: var(--fm); font-size: .5rem; letter-spacing: .06em; color: var(--sub);
  background: rgba(8, 8, 8, .85); padding: .2rem .4rem; border-radius: .25rem;
}
.pdlg-not {
  margin-top: 1rem; padding-top: .7rem; border-top: 1px solid #1E1E1E;
  font-size: .66rem; color: var(--sub);
}

@media (max-width: 360px) {
  .pdlg-ikili { grid-template-columns: 1fr; }
}

/* ---------- KESIF panelinin dokunulan parcalari ----------
   Bu panel artik dekoratif degil: filtreler ve satirlar gercekten
   tiklaniyor. max(rem, em) ile maket kucuk olcekte de okunur ve
   parmakla basilabilir kaliyor. Kurallar yalnizca .mock-panel'e
   uygulaniyor; HERO maketi eski oranlarini koruyor. */
.mock-panel .win-q {
  font-size: max(.62rem, .95em);
  min-height: 2.75rem; padding: .35rem .7rem;
  color: var(--sub); flex: 0 0 auto; min-width: 7rem;
}
.mock-panel .win-chip {
  font-size: max(.6rem, .85em);
  min-height: 2.75rem; padding: .35rem .7rem;
  color: var(--sub); background: #101010;
  flex: none; white-space: nowrap;
}
.mock-panel .win-say { font-size: max(.6rem, .85em); padding: .55rem 1rem .45rem; }
.mock-panel .win-say i { font-size: max(.52rem, .82em); }
.mock-panel .win-alt { font-size: max(.56rem, .8em); padding: .5rem 1rem; color: var(--dim); }
.mock-panel .wrow { min-height: 2.7rem; padding: .5rem 1rem; gap: .7rem; }
.mock-panel .wrow > u { font-size: max(.56rem, 1em); height: auto; min-height: 2.1rem; }
.mock-panel .wrow-n { font-size: max(.78rem, 1.25em); }
.mock-panel .wrow-m { font-size: max(.53rem, .85em); color: var(--sub); }
.mock-panel .wrow-t em { font-size: max(.5rem, .78em); color: var(--sub); }
.mock-panel .wrow-t b { font-size: max(.82rem, 1.5em); }
.mock-panel .wrow-s { width: max(2.6rem, 6.4em); }

/* Hicbir yerde kaydirma yok: filtre serididi sariyor, liste her
   filtrede uc satir gosteriyor, yuksekligi bu yuzden sabit. */
/* Serit esnek degil sabit izgara: arama ustte tam genislik, dort
   filtre altta esit dortte bir. Filtre secilince serit yeniden
   sarmadigi icin panelin boyu degismiyor. */
.mock-panel .win-tools {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem; align-items: stretch;
}
.mock-panel .win-q { grid-column: 1 / -1; white-space: nowrap; }
.mock-panel .win-flt > summary { justify-content: center; width: 100%; }
.mock-panel .win-chip { justify-content: center; }
.mock-panel .win-rows { max-height: none; overflow: visible; }
.mock-panel .win-alt b { color: var(--sub); font-weight: 600; }

/* ---------- panel filtreleri ----------
   Acik deger listesi degil, kategori: Mevki / TBS / Yas / Sehir.
   <details name="wflt"> oldugu icin biri acilinca digeri kapaniyor
   ve JS calismasa da menuler aciliyor. */
.win-flt { position: relative; }
.win-flt > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.win-flt > summary::-webkit-details-marker { display: none; }
.win-flt > summary::after {
  content: ""; margin-left: .5em; width: .32em; height: .32em; flex: none;
  border-right: .09em solid currentColor; border-bottom: .09em solid currentColor;
  rotate: 45deg; translate: 0 -.12em;
}
.win-flt[open] > summary { border-color: #3A3A3A; color: var(--sub); }
.win-mnu {
  position: absolute; left: 0; top: calc(100% + .35em); z-index: 6;
  min-width: 100%; padding: .25rem; display: grid; gap: .1rem;
  border: 1px solid #2A2A2A; border-radius: .5rem; background: #101010;
  box-shadow: 0 1.2rem 2rem -.8rem #000;
}
.win-mnu button {
  text-align: left; white-space: nowrap; cursor: pointer;
  display: flex; align-items: center; min-height: 2.75rem;
  padding: .3rem .7rem; border: 0; border-radius: .35rem;
  background: transparent; color: var(--sub);
  font-family: var(--fm); font-size: max(.58rem, .82em); letter-spacing: .06em;
}
.win-mnu button:hover { background: #191919; color: var(--ink); }
.win-mnu button.on { color: var(--red); background: rgba(254, 0, 0, .09); }
.win-bos {
  padding: 1.1rem 1rem; text-align: center;
  font-family: var(--fm); font-size: max(.58rem, .82em); color: var(--dim);
}
.win-bos[hidden] { display: none; }
/* Liste uc satirlik yerini her filtrede koruyor: panel ziplamiyor. */
.mock-panel .win-rows { min-height: 8.1rem; }

/* Sayac satiri her dilde TEK satir kalmali: Rusca gibi uzun
   dillerde iki satira dusup panelin boyunu filtreye gore
   degistiriyordu. Tasan kisim .win-sec'te ucnokta olur. */
.win-say { white-space: nowrap; overflow: hidden; }
.win-say .win-sec {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.win-flt > summary.on { border-color: rgba(254, 0, 0, .5); color: var(--red); background: rgba(254, 0, 0, .07); }

/* Acilir menu panelden tasabilmeli: gercek bir menu gibi davraniyor.
   overflow gorunur olunca kose yuvarlaklarini parcalar kendisi tasir. */
.mock-panel .glass-win { overflow: visible; }
.mock-panel .win-top { border-radius: 1.5em 1.5em 0 0; }
.mock-panel .win-alt { border-radius: 0 0 1.5em 1.5em; }
.mock-panel .wrow.hot { border-radius: 0; }


/* Maketler de sagdan sola akar; icerideki sayi ve kod dizeleri
   tek parca kalsin diye izole ediliyor. */
/* Latin kisaltma ve sayi dizeleri RTL paragrafta bozuluyor:
   "E.K." sondaki noktayi basa aliyordu. Kendi yonlerinde
   yalitiliyorlar. */
[dir="rtl"] .wrow > u, [dir="rtl"] .wrow-n, [dir="rtl"] .pdlg-ad,
[dir="rtl"] .pdlg-av, [dir="rtl"] .pc-name, [dir="rtl"] .wrow-t,
[dir="rtl"] .pdlg-ozl span, [dir="rtl"] .win-say,
[dir="rtl"] .win-alt, [dir="rtl"] .pdlg-tbs,
[dir="rtl"] .pc-score-v {
  /* isolate yetmiyor: kutunun ICI de RTL kaliyor ve "E.K."
     sondaki noktayi basa aliyor. plaintext yonu ilk guclu
     karakterden alir. */
  unicode-bidi: plaintext;
}