/* ==========================================================================
   Kemik Kadro — landing (AÇIK TEMA)
   Uygulama web'de her zaman açık temada açıldığı için landing de açık.
   Zemin/mürekkep uygulamanın karşılama ekranıyla birebir:
   #F3F8F4 zemin, #06251B başlık, #0B3D2E dolu CTA.

   Kontrast kuralı: --lime (#7CFF5A) ve --lime-deep (#3DBE22) açık zeminde
   METİN OLARAK KULLANILMAZ (1.20:1 / 2.28:1). Okunması gereken her yerde
   --pitch-light (#14654A, 6.54:1) ya da --ink kademeleri kullanılır; lime
   yalnızca dekoratif dolgu (top, çubuk, koyu blok içi vurgu).

   Sadece transform/opacity animasyonu.
   ========================================================================== */

:root{
  /* Marka (lib/core/design/tokens/app_colors.dart) */
  --pitch-deep:#06251B;
  --pitch:#0B3D2E;
  --pitch-light:#14654A;
  --night:#0A1B2E;
  --night-deep:#05101C;
  --lime:#7CFF5A;
  --lime-soft:#B6FF9E;
  --lime-deep:#3DBE22;
  --gold:#F5C451;
  --live:#FF4757;
  --info:#4A9BFF;

  /* Metin — açık zeminde ölçülmüş oranlar (bkz. dosya başı) */
  --ink:#06251B;    /* başlık  · 15.17:1 zeminde */
  --ink-2:#517569;  /* gövde   ·  4.77:1 zeminde, 5.12:1 beyazda (pitch %70) */
  --ink-3:#5B6874;  /* meta    ·  5.32:1 zeminde, 5.71:1 beyazda */

  /* Koyu bloklarda (skor kartı, oyuncu kartı, CTA bandı) mürekkep */
  --on-dark:#EAF5EE;
  --on-dark-2:rgba(234,245,238,.78);  /* gradyanın en açık ucunda (#14654A) 4.51:1 */
  --on-dark-3:rgba(234,245,238,.72);  /* yalnızca gradyanın koyu yarısında: 8.13:1 */

  /* Yüzeyler */
  --bg:#F3F8F4;
  --bg-2:#E4F0E8;
  --surface:#FFFFFF;
  --surface-2:#EAF1EC;
  --line:#E3EDE7;
  --line-2:rgba(20,101,74,.28);

  /* Gölgeler — açık zeminde cam yerine yükseklik */
  --sh-sm:0 1px 2px rgba(6,37,27,.05);
  --sh-md:0 2px 4px -2px rgba(6,37,27,.05), 0 12px 26px -20px rgba(6,37,27,.30);
  --sh-lg:0 24px 48px -26px rgba(6,37,27,.32);
  --sh-xl:0 44px 80px -40px rgba(6,37,27,.45);

  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:30px;

  --wrap:1180px;
  --pad:24px;

  --ease:cubic-bezier(.22,.75,.24,1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto,
          "Noto Sans", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;
  background:var(--bg);
}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Zemin: açık yeşile çalan zemin + çok hafif yeşil/mavi aurora
   (uygulamadaki PitchBackdrop light gradyanı: F3F8F4 → E4F0E8 → D5E8DC) */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-2;
  background:
    radial-gradient(1200px 700px at 78% -6%, rgba(20,101,74,.10), transparent 62%),
    radial-gradient(900px 620px at 6% 22%, rgba(74,155,255,.06), transparent 66%),
    linear-gradient(180deg, var(--bg) 0%, #EDF6F0 46%, var(--bg-2) 100%);
}
/* İnce doku — dış istek yok, inline SVG gürültü */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

img,svg{display:block;max-width:100%}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}

::selection{background:var(--lime);color:var(--pitch-deep)}

/* Odak halkası: açık zeminde koyu yeşil (6.54:1) */
:focus-visible{
  outline:2px solid var(--pitch-light);
  outline-offset:3px;
  border-radius:6px;
}
/* Koyu bloklarda (CTA bandı) yeşil halka kaybolur — lime'a çevir. */
.cta-inner :focus-visible{outline-color:var(--lime)}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip-link{
  position:fixed; top:10px; left:10px;
  z-index:200;
  padding:10px 16px;
  border-radius:var(--r-sm);
  background:var(--pitch); color:#fff;
  font-weight:700;
  box-shadow:var(--sh-lg);
  transform:translateY(-160%);
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* ---------- Tipografi ---------- */
h1{
  font-size:clamp(2.5rem, 7.4vw, 4.6rem);
  line-height:1.03;
  font-weight:800;
  letter-spacing:-.038em;
  color:var(--ink);
}
h2{
  font-size:clamp(1.75rem, 4vw, 2.9rem);
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.032em;
  color:var(--ink);
}
h3{
  font-size:1.13rem;
  line-height:1.3;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
}

.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.72rem; font-weight:800;
  letter-spacing:.19em;
  color:var(--pitch-light);          /* 6.54:1 */
  text-transform:uppercase;
}
.kicker-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--lime-deep);        /* dekoratif nokta */
  box-shadow:0 0 0 4px rgba(61,190,34,.18);
  animation:breathe 2.6s var(--ease) infinite;
}
@keyframes breathe{50%{transform:scale(1.55);opacity:.6}}

.lede,.sec-lede{
  color:var(--ink-2);
  font-size:clamp(1rem,1.6vw,1.12rem);
  line-height:1.65;
}

.hl{
  position:relative;
  color:var(--pitch-light);           /* 6.54:1 — lime okunmuyordu */
  white-space:nowrap;
}
.hl i{
  position:absolute; left:0; right:7%; bottom:-.02em;
  height:.085em;
  background:linear-gradient(90deg,var(--pitch-light),var(--lime-deep));
  border-radius:99px;
  transform:scaleX(0);
  transform-origin:left;
  animation:underline 1s var(--ease) .95s forwards;
}
@keyframes underline{to{transform:scaleX(1)}}

/* ---------- Butonlar ---------- */
.btn{
  --bh:0;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 26px;
  border-radius:99px;
  font-size:.98rem; font-weight:700;
  letter-spacing:-.01em;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease), border-color .25s var(--ease),
             color .25s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .arr{width:19px;height:19px;transition:transform .28s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* Karşılama ekranındaki "Hadi Başlayalım" ile aynı: dolu pitch + beyaz yazı.
   Beyaz / #0B3D2E = 12.20:1 */
.btn-primary{
  background:var(--pitch);
  color:#fff;
  box-shadow:0 10px 26px -12px rgba(11,61,46,.55);
}
.btn-primary:hover{
  background:var(--pitch-deep);
  box-shadow:0 18px 38px -14px rgba(11,61,46,.62);
}

.btn-outline{
  background:var(--surface);
  border:1px solid rgba(20,101,74,.24);
  color:var(--pitch);                 /* 12.9:1 beyaz üstünde */
  box-shadow:var(--sh-sm);
}
.btn-outline:hover{background:var(--surface-2);border-color:var(--pitch-light)}

.btn-ghost{color:var(--ink-2);padding:12px 14px}
.btn-ghost:hover{color:var(--ink)}
.btn-sm{padding:11px 20px;font-size:.92rem}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0;
  height:2px; z-index:120;
  pointer-events:none;
}
.scroll-progress i{
  display:block; height:100%;
  background:linear-gradient(90deg,var(--pitch),var(--pitch-light),var(--lime-deep));
  transform:scaleX(0);
  transform-origin:left;
}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  transition:background-color .3s var(--ease), border-color .3s var(--ease),
             box-shadow .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(243,248,244,.82);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -24px rgba(6,37,27,.55);
}
.nav-inner{
  display:flex; align-items:center; gap:20px;
  height:72px;
}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{
  width:36px;height:36px;flex:0 0 36px;
  border-radius:11px; overflow:hidden;
  box-shadow:0 6px 16px -10px rgba(6,37,27,.55), 0 0 0 1px rgba(6,37,27,.08);
  transition:transform .35s var(--ease);
}
/* Marka isareti: gercek logo dosyasi (assets/logo.svg). Kutuyu tam doldurur;
   logonun kendi yuvarlak koseli yesil zemini var, ek dolgu gerekmiyor. */
.brand-mark img,.brand-mark svg,
.ph-logo img,.ph-logo svg,
.foot-brand img{width:100%;height:100%;display:block;object-fit:cover}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.06)}
.brand-mark.sm{width:30px;height:30px;flex-basis:30px;border-radius:9px}
.brand-word{
  font-size:.86rem; font-weight:800;
  letter-spacing:.15em;
  color:var(--ink);
}
.nav-links{
  display:flex; gap:6px;
  margin-inline:auto;
}
.nav-links a{
  position:relative;
  padding:9px 14px;
  border-radius:99px;
  font-size:.93rem; font-weight:600;
  color:var(--ink-2);
  transition:color .22s var(--ease), background-color .22s var(--ease);
}
.nav-links a:hover{color:var(--ink);background:var(--surface-2)}
.nav-cta{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  padding:132px 0 76px;
  isolation:isolate;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  z-index:-1;
  overflow:hidden;
}

/* biçilmiş çim şeritleri — uygulamadaki gibi pitch %4 */
.stripes{
  position:absolute; inset:-10%;
  background:repeating-linear-gradient(
    100deg,
    rgba(11,61,46,.035) 0 62px,
    transparent 62px 124px);
  opacity:.9;
}

.glow{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  will-change:transform;
}
.glow-a{
  width:58vw; height:58vw; max-width:760px; max-height:760px;
  top:-22%; right:-14%;
  background:radial-gradient(circle,rgba(61,190,34,.16),transparent 68%);
  animation:drift 17s var(--ease) infinite alternate;
}
.glow-b{
  width:48vw; height:48vw; max-width:620px; max-height:620px;
  bottom:-24%; left:-16%;
  background:radial-gradient(circle,rgba(74,155,255,.10),transparent 68%);
  animation:drift 21s var(--ease) infinite alternate-reverse;
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(5%,7%,0) scale(1.14)}
}

/* Saha çizimi — açık zeminde koyu yeşil düşük opaklık.
   Çizgi rengi HTML'de stroke="#0B3D2E"; efektif opaklık ≈ .62 × .32 ≈ .20 */
.pitch-layer{
  position:absolute;
  top:-6%; left:-6%; right:-6%; bottom:-6%;
  opacity:.62;
  transform:
    perspective(1400px)
    rotateX(52deg)
    rotateZ(-8deg)
    translate3d(calc(var(--mx,0) * 16px), calc(var(--my,0) * 12px), 0)
    scale(1.16);
  transform-origin:50% 34%;
  transition:transform .6s var(--ease);
  will-change:transform;
}
.pitch{width:100%;height:100%}
.pitch-lines{opacity:.32}
.dl{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:draw 1.5s var(--ease) forwards;
  animation-delay:calc(var(--i) * 130ms + 200ms);
}
@keyframes draw{to{stroke-dashoffset:0}}

.center-dot{
  transform-box:fill-box; transform-origin:center;
  opacity:0;
  animation:pop .7s var(--ease) 1.1s forwards;
}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1);opacity:1}}
.center-pulse{
  transform-box:fill-box; transform-origin:center;
  opacity:0;
  animation:ripple 3.4s var(--ease) 1.5s infinite;
}
@keyframes ripple{
  0%{transform:scale(.28);opacity:0}
  22%{opacity:.75}
  100%{transform:scale(1.5);opacity:0}
}

/* koşan top — lime dekoratif dolgu, açık zeminde görünsün diye
   limeDeep gövde + lime ışık */
.ball-track{
  position:absolute; top:44%; left:-8%;
  width:12px;height:12px;
  animation:ballX 7.5s linear 1.6s infinite;
}
.ball-hop{
  width:100%;height:100%;
  animation:ballY 1.9s cubic-bezier(.4,0,.6,1) 1.6s infinite alternate;
}
.ball{
  position:relative;
  display:block; width:12px;height:12px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--lime), var(--lime-deep) 72%);
  box-shadow:0 0 14px 4px rgba(61,190,34,.30);
}
.ball::after{
  content:"";
  position:absolute; top:50%; right:8px;
  width:150px;height:3px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,rgba(61,190,34,.5));
  border-radius:99px;
  filter:blur(2px);
}
@keyframes ballX{to{transform:translate3d(125vw,0,0)}}
@keyframes ballY{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-64px,0)}
}

/* Metnin arkasını açığa yıka — saha çizimi yazının altında zayıflasın */
.hero-fade{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 30% 40%, transparent 18%, rgba(243,248,244,.62) 72%),
    linear-gradient(180deg, rgba(243,248,244,.82) 0%, transparent 26%, rgba(243,248,244,.94) 92%);
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:56px;
  align-items:center;
}
.hero-copy>*+*{margin-top:22px}
.hero-copy .lede{max-width:30em}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px}

.hero-notes{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  color:var(--ink-2);
  font-size:.9rem;
}
.hero-notes li{display:flex;align-items:center;gap:8px}
.tick{
  flex:0 0 17px; width:17px;height:17px;
  border-radius:50%;
  background:rgba(20,101,74,.10);
  border:1px solid rgba(20,101,74,.34);
  position:relative;
}
.tick::after{
  content:"";
  position:absolute; left:5px; top:3.4px;
  width:4px;height:8px;
  border:solid var(--pitch-light);
  border-width:0 1.8px 1.8px 0;
  transform:rotate(42deg);
}

/* ---------- Maç günü sayaçları ---------- */
.matchday{
  margin-top:72px;
  padding:22px 26px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--sh-md);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 34px;
}
.matchday-label{
  font-size:.72rem; font-weight:800; letter-spacing:.19em;
  text-transform:uppercase; color:var(--ink-3);
  padding-right:26px;
  border-right:1px solid var(--line);
}
.counters{display:flex;flex-wrap:wrap;gap:16px 40px;flex:1}
.counter{display:flex;align-items:baseline;gap:9px}
.counter dt{
  font-size:clamp(1.65rem,3.1vw,2.3rem);
  font-weight:800; line-height:1;
  letter-spacing:-.04em;
  color:var(--pitch-light);       /* 7.02:1 beyazda */
  font-variant-numeric:tabular-nums;
}
.counter .suf{color:var(--pitch-light);opacity:.65}  /* büyük metin · 3.17:1 */
.counter dd{color:var(--ink-2);font-size:.94rem}

/* ==========================================================================
   TELEFON MOCKUP — içerik açık tema (uygulama web'de açık açılıyor)
   ========================================================================== */
.hero-visual{display:flex;justify-content:center}
.phone-wrap{
  position:relative;
  width:min(320px,84vw);
  transform:
    perspective(1300px)
    rotateY(calc(var(--mx,0) * -7deg))
    rotateX(calc(var(--my,0) * 5deg))
    translate3d(0, calc(var(--my,0) * -6px), 0);
  transition:transform .5s var(--ease);
  transform-style:preserve-3d;
  will-change:transform;
}
/* Cihaz çerçevesi koyu kalır — gerçek telefon kasası. */
.phone{
  position:relative;
  border-radius:42px;
  padding:11px;
  background:linear-gradient(160deg,#24382f,#0d1a14 55%,#1a2a22);
  box-shadow:
    0 46px 74px -36px rgba(6,37,27,.50),
    0 0 0 1px rgba(6,37,27,.10),
    inset 0 1px 0 rgba(255,255,255,.16);
  animation:float 7s var(--ease) infinite alternate;
}
@keyframes float{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-16px,0)}}
.phone-notch{
  position:absolute; top:11px; left:50%;
  width:112px;height:26px;
  transform:translateX(-50%);
  background:#0d1a14;
  border-radius:0 0 16px 16px;
  z-index:2;
}
.phone-screen{
  position:relative;
  border-radius:32px;
  padding:12px 12px 8px;
  background:linear-gradient(180deg,#F7FBF9,#F1F7F3 55%,#ECF4EF);
  color:var(--ink);
  overflow:hidden;
  min-height:562px;
  display:flex; flex-direction:column; gap:9px;
  font-size:12px;
}
.phone-screen::before{
  content:"";
  position:absolute; top:-40%; left:-30%;
  width:90%; height:70%;
  background:radial-gradient(circle,rgba(61,190,34,.14),transparent 70%);
  filter:blur(26px);
}

.ph-status{
  display:flex; justify-content:space-between; align-items:center;
  font-size:10px; font-weight:700; color:var(--ink-3);
  padding:2px 6px 0;
}
.ph-sig{display:flex;gap:2.5px;align-items:flex-end}
.ph-sig i{width:3px;background:var(--ink-3);border-radius:1px;opacity:.8}
.ph-sig i:nth-child(1){height:5px}
.ph-sig i:nth-child(2){height:8px}
.ph-sig i:nth-child(3){height:11px}

.ph-top{display:flex;align-items:center;gap:9px;padding:4px 2px 2px}
.ph-logo{width:24px;height:24px;flex:0 0 24px;border-radius:8px;overflow:hidden}
.ph-title{font-weight:800;font-size:13px;letter-spacing:-.02em;flex:1;color:var(--ink)}
.ph-bell{position:relative;width:19px;height:19px;color:var(--ink-2)}
.ph-bell svg{width:19px;height:19px}
.ph-bell em{
  position:absolute; top:-1px; right:-1px;
  width:7px;height:7px;border-radius:50%;
  background:var(--live);
  box-shadow:0 0 0 2px #F7FBF9;
  animation:breathe 2s var(--ease) infinite;
}

.ph-card{
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 2px 8px -5px rgba(6,37,27,.28);
  padding:11px 12px;
}
/* Skor bloğu uygulamada koyu yeşil gradyanlı — burada da koyu kalıyor. */
.ph-live{
  position:relative;overflow:hidden;
  background:linear-gradient(158deg,var(--pitch-light),var(--pitch) 52%,var(--pitch-deep));
  border-color:rgba(6,37,27,.45);
  color:var(--on-dark);
  box-shadow:0 10px 22px -14px rgba(6,37,27,.65);
}
.ph-live::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(124,255,90,.14) 50%,transparent 65%);
  transform:translate3d(-120%,0,0);
  animation:sheen 5.5s var(--ease) 2s infinite;
}
@keyframes sheen{0%{transform:translate3d(-120%,0,0)}40%,100%{transform:translate3d(120%,0,0)}}

.ph-live-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.badge-live{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;border-radius:99px;
  background:rgba(255,71,87,.18);
  border:1px solid rgba(255,71,87,.5);
  /* Pembe yazı gradyanın açık ucunda 3.1:1'e düşüyordu; "canlı" anlamını
     nokta + kırmızı zemin/kenarlık taşıyor, yazı beyaz (7.04:1). */
  color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;
}
.badge-live i{
  width:5px;height:5px;border-radius:50%;background:var(--live);
  animation:breathe 1.3s var(--ease) infinite;
}
.badge-live b{font-variant-numeric:tabular-nums;letter-spacing:0}
/* Kartın açık ucunda duruyor — on-dark-2 (4.51:1). */
.ph-venue{font-size:9.5px;color:var(--on-dark-2);text-align:right}

.ph-score{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px; margin:9px 0 7px;
}
.ph-team{display:flex;align-items:center;gap:6px;font-weight:700;font-size:11.5px}
.ph-team-r{justify-content:flex-end}
.jersey{
  width:13px;height:13px;border-radius:4px;flex:0 0 13px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.j-lime{background:linear-gradient(140deg,var(--lime-soft),var(--lime-deep))}
.j-dark{background:linear-gradient(140deg,#3a4750,#161c21)}
.ph-nums{
  display:flex;align-items:baseline;gap:5px;
  font-size:25px;font-weight:800;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.ph-nums s{text-decoration:none;color:var(--on-dark-3);font-size:17px}
.ph-scorers{font-size:9.5px;color:var(--on-dark-2);display:flex;align-items:center;gap:5px}
.dot-g{width:5px;height:5px;border-radius:50%;background:var(--lime);flex:0 0 5px}

.ph-rsvp{display:flex;gap:5px}
.chip{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:4px;
  padding:6px 4px;border-radius:10px;
  font-size:9.5px;font-weight:700;
  border:1px solid transparent;
  white-space:nowrap;
}
.chip b{font-size:10.5px}
/* Renk anlamı tonda; yazı okunur mürekkepte. */
.chip-yes{background:rgba(20,101,74,.11);border-color:rgba(20,101,74,.3);color:var(--pitch-light)}
.chip-maybe{background:rgba(245,196,81,.3);border-color:rgba(201,139,34,.4);color:var(--ink)}
.chip-no{background:var(--surface-2);border-color:var(--line);color:var(--ink-3)}

.ph-sec{
  font-size:9px;font-weight:800;letter-spacing:.16em;
  color:var(--ink-3);text-transform:uppercase;
  padding:4px 2px 0;
}

.ph-lineup{display:flex;flex-direction:column;gap:5px}
.ph-lineup li{
  display:flex;align-items:center;gap:8px;
  padding:7px 9px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(6,37,27,.04);
  opacity:0;
  transform:translate3d(14px,0,0);
  animation:rowIn .6s var(--ease) forwards;
  animation-delay:calc(var(--r) * 130ms + 900ms);
}
@keyframes rowIn{to{opacity:1;transform:translate3d(0,0,0)}}
.av{
  width:22px;height:22px;flex:0 0 22px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:8.5px;font-weight:800;
  color:#06251B;
  box-shadow:inset 0 0 0 1px rgba(6,37,27,.10);
}
.av-1{background:linear-gradient(140deg,#B6FF9E,#3DBE22)}
.av-2{background:linear-gradient(140deg,#F5C451,#C98B22)}
.av-3{background:linear-gradient(140deg,#4A9BFF,#1C56B0)}
.av-4{background:linear-gradient(140deg,#C6D0DA,#7C8A97)}
.av-5{background:linear-gradient(140deg,#7CFF5A,#14654A)}
.av-6{background:linear-gradient(140deg,#CD8B4E,#8A5527)}
.ph-name{flex:1;font-size:11px;font-weight:600;color:var(--ink)}
.pos{
  padding:2px 6px;border-radius:6px;
  font-size:8px;font-weight:800;letter-spacing:.06em;
  color:var(--ink);                  /* ton rengi anlamı taşır, yazı koyu */
}
.pos-gk{background:rgba(245,196,81,.34)}
.pos-df{background:rgba(74,155,255,.22)}
.pos-fw{background:rgba(61,190,34,.24)}
.ovr{
  font-size:11px;font-weight:800;color:var(--pitch-light);
  font-variant-numeric:tabular-nums;
  width:18px;text-align:right;
}

.ph-tabs{
  margin-top:auto;
  display:flex;justify-content:space-around;align-items:center;
  padding:9px 12px 4px;
  border-top:1px solid var(--line);
}
.ph-tabs span{
  width:22px;height:4px;border-radius:99px;
  background:rgba(6,37,27,.16);
}
.ph-tabs .on{background:var(--pitch-light);box-shadow:0 0 8px rgba(20,101,74,.35)}

/* Yüzen kartlar — açık cam */
.float{
  position:absolute;
  display:flex;align-items:center;gap:9px;
  padding:9px 13px;
  border-radius:14px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 20px 40px -22px rgba(6,37,27,.40), 0 2px 6px -3px rgba(6,37,27,.10);
  color:var(--ink);
  font-size:11px;
  white-space:nowrap;
  animation:float 6s var(--ease) infinite alternate;
}
.float b{display:block;font-size:11px;font-weight:800;line-height:1.25;color:var(--ink)}
.float i{display:block;font-size:10px;font-style:normal;color:var(--ink-3);line-height:1.3}
.float-ico{width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center}
.float-ico svg{width:20px;height:20px}
.ico-info{color:var(--pitch-light)}
/* Köşelere otur: ekranın anlamlı içeriğini değil, çerçeve/durum çubuğu
   ve sekme şeridi gibi dekoratif alanları örtsünler. */
.float-mvp{top:-3%;left:-30%;animation-delay:-1.4s}
.float-ovr{bottom:-2%;right:-28%;animation-delay:-3s}
.float-toast{bottom:-7%;left:-28%;animation-delay:-2.2s}
.float-ovr .ring{
  width:36px;height:36px;flex:0 0 36px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:13px;font-weight:800;color:var(--pitch-light);
  background:
    conic-gradient(var(--pitch-light) 0turn .84turn, rgba(6,37,27,.12) .84turn 1turn);
  position:relative;
}
.float-ovr .ring::before{
  content:"";position:absolute;inset:3px;border-radius:50%;background:#fff;
}
.float-ovr .ring b{position:relative;font-size:13px;color:var(--pitch-light)}

/* ==========================================================================
   BÖLÜMLER
   ========================================================================== */
.section{padding:96px 0;position:relative}
.section-alt::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,transparent,rgba(20,101,74,.06) 45%,transparent);
  pointer-events:none;
}
.sec-head{max-width:640px;margin-bottom:46px}
.sec-head>*+*{margin-top:16px}

/* ---------- Özellik kartları ---------- */
/* auto-fit yerine sabit kolon: 6 kart 4'e bolununce yetim satir kaliyordu. */
.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.card{
  position:relative;
  padding:26px 24px 24px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--sh-md);
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s var(--ease),
             box-shadow .35s var(--ease);
  will-change:transform;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(340px 220px at 50% -10%, rgba(61,190,34,.12), transparent 70%);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--line-2);
  box-shadow:0 26px 46px -26px rgba(6,37,27,.38);
}
.card:hover::before{opacity:1}
.card-ico{
  position:relative;
  display:grid;place-items:center;
  width:46px;height:46px;
  border-radius:14px;
  margin-bottom:18px;
  color:var(--pitch-light);
  background:linear-gradient(150deg,rgba(20,101,74,.14),rgba(61,190,34,.07));
  border:1px solid rgba(20,101,74,.18);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card-ico svg{width:24px;height:24px}
.card:hover .card-ico{
  transform:translateY(-2px) rotate(-6deg) scale(1.06);
  box-shadow:0 12px 22px -12px rgba(20,101,74,.55);
}
.card h3{position:relative;margin-bottom:9px}
.card p{position:relative;color:var(--ink-2);font-size:.94rem;line-height:1.6}
.card-tags{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.card-tags b{
  padding:4px 10px;border-radius:99px;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;
  color:var(--pitch-light);
  background:rgba(20,101,74,.08);
  border:1px solid rgba(20,101,74,.18);
}

/* ---------- Adımlar ---------- */
/* 4 adim her zaman tek satir ya da 2x2 - 3+1 kirilmasin. */
.steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.step{
  position:relative;
  padding:26px 22px 24px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--sh-md);
  transition:transform .35s var(--ease), border-color .35s var(--ease),
             box-shadow .35s var(--ease);
}
.step:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  box-shadow:0 24px 42px -26px rgba(6,37,27,.35);
}
.step::after{
  content:"";
  position:absolute; left:22px; right:22px; top:0;
  height:2px;
  background:linear-gradient(90deg,var(--pitch-light),rgba(61,190,34,0));
  border-radius:99px;
  transform:scaleX(.22);
  transform-origin:left;
  transition:transform .5s var(--ease);
}
.step:hover::after{transform:scaleX(1)}
.step-no{
  display:block;
  font-size:1.9rem;font-weight:800;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(20,101,74,.8);
  margin-bottom:12px;
}
.step h3{margin-bottom:8px}
.step p{color:var(--ink-2);font-size:.92rem}

/* ---------- Oyuncu kartı vitrini ----------
   Kart bilerek koyu: uygulamanın paylaşım kartı (share_card.dart) da
   pitch → nightDeep gradyanlı. Sayfaya ritim veren tek koyu obje. */
.showcase{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:64px;
  align-items:center;
}
.showcase-copy>*+*{margin-top:18px}
.bullets{display:flex;flex-direction:column;gap:10px;color:var(--ink-2)}
.bullets li{display:flex;align-items:center;gap:10px;font-size:.96rem}

.showcase-art{display:flex;justify-content:center}
.pcard{
  position:relative;
  width:min(330px,86vw);
  padding:24px 22px 20px;
  border-radius:26px;
  border:1px solid rgba(245,196,81,.34);
  background:
    linear-gradient(165deg, #14654A, #06251B 55%, #05101C);
  color:var(--on-dark);
  box-shadow:0 44px 74px -38px rgba(6,37,27,.62), inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
  transition:transform .5s var(--ease);
  will-change:transform;
}
.pcard:hover{transform:translateY(-6px) rotate(-1deg)}
.pcard-glow{
  position:absolute; top:-40%; left:-20%;
  width:140%;height:80%;
  background:radial-gradient(circle at 30% 60%, rgba(245,196,81,.22), transparent 62%);
  filter:blur(10px);
  animation:drift 12s var(--ease) infinite alternate;
}
.pcard-top{display:flex;align-items:flex-start;gap:14px;position:relative}
.pcard-ovr{text-align:center;line-height:1}
.pcard-ovr b{
  display:block;
  font-size:3.1rem;font-weight:800;letter-spacing:-.06em;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.pcard-ovr i{
  display:block;margin-top:4px;
  font-style:normal;font-size:.63rem;font-weight:800;letter-spacing:.2em;
  color:rgba(245,196,81,.8);
}
.pcard-id{padding-top:8px}
.pcard-name{display:block;font-size:1.35rem;font-weight:800;letter-spacing:-.03em;color:var(--on-dark)}
.pcard-role{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;color:var(--lime-soft)}
.pcard-face{
  position:relative;
  width:104px;height:104px;
  margin:14px auto 16px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(182,255,158,.35);
  box-shadow:0 0 0 6px rgba(124,255,90,.08);
}
.pcard-stats{
  display:flex;flex-direction:column;gap:9px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
  position:relative;
}
.pcard-stats>div{
  display:grid;
  grid-template-columns:38px 1fr 30px;
  grid-template-areas:"dt bar dd";
  align-items:center;
  gap:10px;
}
.pcard-stats dt{grid-area:dt;font-size:.68rem;font-weight:800;letter-spacing:.12em;color:var(--on-dark-3)}
.pcard-stats dd{grid-area:dd;font-size:.95rem;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;color:var(--on-dark)}
.bar{
  grid-area:bar;
  position:relative;
  height:5px;border-radius:99px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.bar::after{
  content:"";
  position:absolute;inset:0;
  border-radius:99px;
  background:linear-gradient(90deg,var(--lime-deep),var(--lime),var(--lime-soft));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease);
}
.in .bar::after,.reveal.in .bar::after{transform:scaleX(var(--v))}
.pcard-foot{
  display:flex;justify-content:space-between;gap:8px;
  margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.76rem;color:var(--on-dark-2);
  position:relative;
}
.pcard-foot b{color:var(--on-dark);font-size:.92rem;font-weight:800}
.pcard-foot .gold b{color:var(--gold)}

/* ---------- CTA bandı ----------
   Bilerek koyu yeşil vurgu bloğu: açık sayfaya ritim verir ve
   "sahaya çık" hissini taşır. İçindeki tipografi koyu blok kuralına göre. */
.cta-band{padding:20px 0 100px}
.cta-inner{
  position:relative;
  padding:64px 32px;
  border-radius:var(--r-xl);
  border:1px solid rgba(6,37,27,.2);
  background:
    radial-gradient(120% 130% at 50% -20%, rgba(61,190,34,.3), transparent 62%),
    linear-gradient(160deg, #14654A, #06251B 88%);
  color:var(--on-dark);
  text-align:center;
  overflow:hidden;
  box-shadow:0 44px 80px -46px rgba(6,37,27,.62);
}
.cta-lines{
  position:absolute; inset:0;
  background:repeating-linear-gradient(100deg,rgba(182,255,158,.045) 0 46px,transparent 46px 92px);
  animation:slide 14s linear infinite;
}
@keyframes slide{to{transform:translate3d(92px,0,0)}}
.cta-inner h2{position:relative;margin-bottom:12px;color:#fff}
.cta-inner p{position:relative;color:var(--on-dark-2);margin-bottom:28px}
.cta-inner .hero-actions{position:relative;justify-content:center}
/* Koyu blokta dolu pitch buton kaybolur — uygulamanın koyu tema aksanı
   olan lime gradyanına dön (pitchDeep yazı, 12.66:1). */
.cta-inner .btn-primary{
  background:linear-gradient(135deg,var(--lime-soft),var(--lime) 45%,var(--lime-deep));
  color:var(--pitch-deep);
  box-shadow:0 12px 30px -14px rgba(6,37,27,.8), inset 0 1px 0 rgba(255,255,255,.45);
}
.cta-inner .btn-primary:hover{
  background:linear-gradient(135deg,var(--lime-soft),var(--lime) 62%,var(--lime-deep));
  box-shadow:0 20px 42px -16px rgba(6,37,27,.85), inset 0 1px 0 rgba(255,255,255,.55);
}
.cta-inner .btn-outline{
  background:rgba(255,255,255,.09);
  border-color:rgba(182,255,158,.45);
  color:var(--on-dark);
  box-shadow:none;
}
.cta-inner .btn-outline:hover{background:rgba(255,255,255,.16);border-color:var(--lime)}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line);padding-top:40px}
.foot-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:22px;padding-bottom:28px;
}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand b{display:block;font-size:.98rem;font-weight:800;color:var(--ink)}
.foot-brand span span,.foot-brand>div>span{display:block;font-size:.84rem;color:var(--ink-3)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px}
.foot-links a{
  padding:8px 13px;border-radius:99px;
  font-size:.9rem;color:var(--ink-2);
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.foot-links a:hover{color:var(--ink);background:var(--surface-2)}
.foot-legal{
  border-top:1px solid var(--line);
  padding:18px 0 26px;
  font-size:.82rem;color:var(--ink-3);
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:translate3d(0,0,0)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .hero-grid{gap:40px}
  .float-mvp{left:-18%}
  .float-ovr{right:-16%}
  .float-toast{left:-14%}
}

@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-links{display:none}
  .nav-inner{justify-content:space-between}
  .hero{padding:110px 0 64px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:52px}
  .hero-copy{text-align:left}
  .showcase{grid-template-columns:minmax(0,1fr);gap:44px}
  .showcase-copy{max-width:640px}
  .section{padding:76px 0}
  .pitch-layer{opacity:.44}
  /* Tek kolonda telefonun iki yaninda yer var - kartlar biraz disari tassin. */
  .float-mvp{left:-27%}
  .float-ovr{right:-27%}
  .float-toast{left:-24%}
}

@media (max-width:880px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:620px){
  .cards,.steps{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:640px){
  :root{--pad:18px}
  .brand-word{font-size:.78rem;letter-spacing:.12em}
  .btn{padding:14px 22px;font-size:.94rem}
  .btn-ghost{display:none}
  .hero{padding:96px 0 56px}
  .hero-actions .btn{flex:1 1 auto;min-width:150px}
  .matchday{
    margin-top:52px;
    padding:18px 20px;
    gap:14px;
  }
  .matchday-label{
    border-right:0;border-bottom:1px solid var(--line);
    padding:0 0 12px;width:100%;
  }
  .counters{gap:14px 24px;justify-content:space-between}
  .counter{flex-direction:column;align-items:flex-start;gap:2px}
  .counter dd{font-size:.82rem}
  /* transform yerine olcek kucult - .float uzerinde calisan animasyon
     transform'u devraliyor, scale() burada ezilirdi. */
  .float{padding:7px 10px;gap:7px;border-radius:12px}
  .float b{font-size:10px}
  .float i{font-size:9px}
  .float-ico{width:18px;height:18px;flex-basis:18px}
  .float-ico svg{width:17px;height:17px}
  .float-mvp{top:-2%;left:-9%}
  .float-ovr{bottom:-2%;right:-8%}
  .float-ovr .ring{width:30px;height:30px;flex-basis:30px;font-size:12px}
  .float-ovr .ring b{font-size:12px}
  .float-toast{display:none}
  .cta-inner{padding:48px 22px}
  .foot-inner{flex-direction:column;align-items:flex-start}
  .foot-links{margin-inline:-13px} /* link ic dolgusunu telafi et, marka ile hizalansin */
}

@media (max-width:400px){
  .phone-wrap{width:min(300px,88vw)}
  .float-mvp{left:-6%}
  .float-ovr{right:-5%}
}

@media (min-width:1500px){
  :root{--wrap:1280px}
  .hero{padding:150px 0 90px}
}

/* ==========================================================================
   HAREKET AZALTMA
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .dl{stroke-dashoffset:0}
  .center-dot{opacity:1}
  .center-pulse{opacity:0}
  .hl i{transform:scaleX(1)}
  .ph-lineup li{opacity:1;transform:none}
  .ball-track{display:none}
  .pitch-layer,.phone-wrap{transition:none}
  .bar::after{transform:scaleX(var(--v))}
}