:root{
    /* MenuTheme.cs'ten birebir alindi - site ile oyun ayni paleti kullanir */
    --bg:#333952; --bg-deep:#252a3d; --ink:#f2f4f8; --muted:#9aa4b2;
    --accent:#6ee7ff; --green:#5be3a6; --warn:#ffc857;
    --purple:#48367b; --blue:#36437b;
    --edge:rgba(110,231,255,.22);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg-deep); color:var(--ink);
    font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  h1,h2,h3{line-height:1.1; margin:0; letter-spacing:-.02em}
  a{color:var(--accent); text-decoration:none}
  .wrap{max-width:1080px; margin:0 auto; padding:0 24px}

  /* --- ust bar --- */
  .bar{position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
       background:rgba(37,42,61,.82); border-bottom:1px solid rgba(255,255,255,.07)}
  .bar .wrap{display:flex; align-items:center; gap:16px; height:58px}
  .bar b{font-size:15px; letter-spacing:.14em}
  .bar nav{margin-left:auto; display:flex; gap:22px; align-items:center}
  .bar nav a{color:var(--muted); font-size:14px; font-weight:500}
  .bar nav a:hover{color:var(--ink)}
  .lang{display:flex; border:1px solid var(--edge); border-radius:999px; overflow:hidden}
  .lang button{background:none; border:0; color:var(--muted); font:600 12px/1 system-ui;
               padding:7px 11px; cursor:pointer; letter-spacing:.06em}
  .lang button[aria-pressed="true"]{background:var(--accent); color:#10141f}

  /* --- hero --- */
  .hero{position:relative; padding:74px 0 88px; text-align:center; overflow:hidden}
  .hero::before{content:""; position:absolute; inset:-40% -20% auto; height:640px;
    background:radial-gradient(58% 50% at 50% 40%, rgba(110,231,255,.20), transparent 70%);
    pointer-events:none}
  /* Hiz cizgileri - oyunun chamfer kitindeki egik kenari yankiliyor */
  .streaks{position:absolute; inset:0; pointer-events:none; opacity:.5}
  .streaks i{position:absolute; height:2px; border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
    animation:dash 3.4s linear infinite}
  @keyframes dash{
    from{transform:translateX(-30vw) skewX(-24deg); opacity:0}
    12%{opacity:.75} 88%{opacity:.75}
    to{transform:translateX(115vw) skewX(-24deg); opacity:0}}
  .hero picture{position:relative; display:block}
  .hero img{position:relative; width:min(88%,620px); height:auto;
            filter:drop-shadow(0 18px 46px rgba(0,0,0,.55))}
  .tag{position:relative; margin:22px auto 0; max-width:660px; font-size:20px; color:var(--muted)}
  .cta{position:relative; margin-top:32px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
  .pill{display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:999px;
        border:1px solid var(--edge); color:var(--ink); font-weight:600; font-size:14px;
        background:rgba(110,231,255,.06)}
  .pill.solid{background:var(--accent); color:#10141f; border-color:transparent}
  .pill small{font-weight:500; opacity:.7}

  /* --- bolumler --- */
  section{padding:74px 0; border-top:1px solid rgba(255,255,255,.06)}
  .kicker{color:var(--accent); font:700 12px/1 system-ui; letter-spacing:.18em; text-transform:uppercase}
  h2{font-size:clamp(26px,3.6vw,38px); margin:14px 0 10px}
  .lede{color:var(--muted); max-width:660px; font-size:17px}

  .grid{display:grid; gap:16px; margin-top:34px}
  .g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .card{position:relative; padding:22px 22px 22px 26px; border-radius:14px; background:var(--bg);
        border:1px solid rgba(255,255,255,.08); overflow:hidden}
  .card::after{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent)}
  .card.p::after{background:var(--purple)} .card.b::after{background:var(--blue)}
  .card.g::after{background:var(--green)} .card.w::after{background:var(--warn)}
  .card h3{font-size:18px; margin-bottom:7px}
  .card p{margin:0; color:var(--muted); font-size:15px}

  /* --- hareket listesi --- */
  .moves{display:flex; flex-wrap:wrap; gap:9px; margin-top:30px}
  .moves span{padding:8px 14px; border-radius:8px; font-size:14px; font-weight:600;
    background:var(--bg); border:1px solid rgba(255,255,255,.09); color:var(--ink)}
  .moves span:nth-child(4n+1){border-color:rgba(110,231,255,.35)}
  .moves span:nth-child(4n+2){border-color:rgba(91,227,166,.30)}
  .moves span:nth-child(4n+3){border-color:rgba(255,200,87,.28)}

  .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-top:32px}
  .stat{padding:20px; border-radius:14px; background:var(--bg); border:1px solid rgba(255,255,255,.08)}
  .stat b{display:block; font-size:30px; color:var(--accent); letter-spacing:-.02em}
  .stat span{color:var(--muted); font-size:13px}

  footer{padding:44px 0 60px; color:var(--muted); font-size:14px; border-top:1px solid rgba(255,255,255,.06)}
  footer .wrap{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
  footer .right{margin-left:auto}

  [data-en]{display:none}
  html[data-lang="en"] [data-tr]{display:none}
  html[data-lang="en"] [data-en]{display:revert}

  @media (prefers-reduced-motion:reduce){ .streaks{display:none} *{animation:none!important} }
  @media (max-width:640px){ .bar nav a{display:none} .hero{padding:48px 0 60px} .tag{font-size:18px} }

  /* Hiz cizgilerinin konumlari. Eskiden style="" ozniteligiydi;
     CSP'nin inline oznitelikleri ayri yonetmesi yuzunden buraya tasindi. */
  .streaks i:nth-child(1){top:18%;left:0;width:36vw;animation-delay:0s}
  .streaks i:nth-child(2){top:34%;left:0;width:22vw;animation-delay:.7s}
  .streaks i:nth-child(3){top:62%;left:0;width:30vw;animation-delay:1.4s}
  .streaks i:nth-child(4){top:78%;left:0;width:18vw;animation-delay:2.1s}