/* ================= v2026.10-zzm · MENÜ: renkli bölümler, simge kutuları, açıklamalar =================
   Tek DOM, üç sunum (masaüstü kenar çubuğu · tablet rayı ve açılır panel · telefon menüsü) korunur. Her bölüm kendi tonunu taşır
   (--sc): Keşfet mavi, Kayıtlar çivit, Yarışmalar camgöbeği, Analiz mor, Benim pembe, Daha fazla arduvaz. Altın, yeşil ve kırmızı
   menü renklerinde yok (altın yalnız derece ve madalya, yeşil vize ve temiz tur, kırmızı elenme ve Milli takım düğmesi; Arena kartı
   kendi kimliğini korur). Bölüm başlığındaki çizgili küçük şerit bir engel sırığıdır. */
#rail.zi .rz-home{--sc:var(--accent)}
#rail.zi .rz[data-z="kayit"]{--sc:var(--e-binici)}
#rail.zi .rz[data-z="yar"]{--sc:var(--e-il)}
#rail.zi .rz[data-z="an"]{--sc:var(--s4)}
#rail.zi .rz[data-z="ben"]{--sc:var(--s5)}
#rail.zi .rz-more{--sc:var(--s6)}
#rail.zi .rrec{--sc:var(--e-binici)}

/* engel sırığı: iki tonlu çizgili kısa şerit */
#rail.zi .zbar{flex:none;display:inline-block;width:16px;height:5px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--sc) 0 4px,color-mix(in srgb,var(--sc) 22%,var(--surface)) 4px 8px);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--sc) 45%,transparent)}
#rail.zi .rz-h .zt{min-width:0}
#rail.zi .nav button .nn{display:none}
/* "Yeni": altın değil, ana renk */
#rail .nav button .rnew,#rail.zi .nav button .rnew{background:var(--accent-soft);color:var(--accent-ink)}
#rail.zi .zdot{background:var(--accent)}
/* simge kutusu (Milli takım ve Arena kendi görünümünde) */
#rail.zi .nav button:not([data-v="milli"]):not(.rail-ar) > .ni{border-radius:8px;background:color-mix(in srgb,var(--sc,var(--accent)) 13%,transparent);color:color-mix(in srgb,var(--sc,var(--accent)) 84%,var(--ink))}
#rail.zi .nav button:not([data-v="milli"]):not(.rail-ar)[aria-current="true"] > .ni{background:var(--sc,var(--accent));color:#fff}
#rail.zi .rtop{display:none}

/* ================= masaüstü ≥ 1200 ================= */
@media (min-width:1200px){
  .app{grid-template-columns:260px minmax(0,1fr)}
  #rail.zi .nav-ind{display:none}
  #rail.zi .rscroll{padding:2px 12px 12px}
  #rail.zi .rz-h{display:flex;align-items:center;gap:9px;padding:16px 8px 6px;font:650 12.5px/1.2 var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink-2)}
  #rail.zi .rz .nav{gap:1px}
  #rail.zi .rz .nav button:not([data-v="milli"]){min-height:31px;padding:0 8px 0 5px;gap:10px;border-radius:9px}
  #rail.zi .rz .nav button:not([data-v="milli"]) > .ni{display:grid;place-items:center;width:24px;height:24px;flex:none}
  #rail.zi .rz .nav button:not([data-v="milli"]) > .ni svg{width:15px;height:15px}
  #rail.zi .rz .nav button:not([data-v="milli"]):hover{background:var(--hover)}
  #rail.zi .rz .nav button:not([data-v="milli"])[aria-current="true"]{background:color-mix(in srgb,var(--sc,var(--accent)) 11%,transparent)}
  #rail.zi .rz .nav button:not([data-v="milli"])[aria-current="true"] .lb{font-weight:650;color:var(--ink)}
  #rail.zi .rz .nav button .lb{font-size:14px}
  #rail.zi .rz-home .nav button{min-height:34px}
  #rail.zi .rz-home .nav button .ni{width:24px;height:24px}
  #rail.zi .rz-home .nav button .ni svg{width:15px;height:15px}
  /* alt grup: ok, ad, içindekilerin önizlemesi */
  #rail.zi .nsub-h{display:flex;align-items:center;min-height:30px;padding:0 8px 0 5px;gap:10px;border-radius:9px;color:var(--muted)}
  #rail.zi .nsub-h .ni{display:grid;place-items:center;width:24px;height:24px;flex:none;color:var(--faint)}
  #rail.zi .nsub-h .ni svg{width:13px;height:13px;transition:transform .2s var(--spring)}
  #rail.zi .nsub.open > .nsub-h .ni svg{transform:rotate(90deg)}
  #rail.zi .nsub-h .lb{flex:none;font-size:13.5px;font-weight:550;color:var(--ink-2)}
  #rail.zi .nsub-h:hover{background:var(--hover)}
  #rail.zi .nsub > .nav{margin:0 0 4px 16px;padding-left:4px;border-left:1px solid color-mix(in srgb,var(--sc) 30%,var(--line))}
  #rail.zi .nsub > .nav button:not([data-v="milli"]){min-height:30px;padding-left:6px}
  #rail.zi .nsub > .nav button:not([data-v="milli"]) > .ni{width:22px;height:22px}
  #rail.zi .nsub > .nav button .lb{font-size:13.5px}
  #rail.zi .rz .nav button[data-v="milli"]{margin:3px 0}
  /* "Daha fazla": arduvaz tonlu simge kutusu */
  #rail.zi .rz-more > .rz-t .zic{width:24px;height:24px;border-radius:8px;background:color-mix(in srgb,var(--sc) 13%,transparent);color:color-mix(in srgb,var(--sc) 84%,var(--ink))}
  #rail.zi .rz-more > .rz-t .zic svg{width:15px;height:15px}
  #rail.zi .rz-more > .rz-t{padding:0 8px 0 5px}
  /* 1280×800 dizüstünde menü kaydırmasız kalsın */
  @media (max-height:860px){
    #rail.zi .rz-h{padding:10px 8px 4px}
    #rail.zi .rz .nav button:not([data-v="milli"]),#rail.zi .nsub-h{min-height:28px}
    #rail.zi .rz-home .nav button{min-height:30px}
    #rail.zi .rz .nav button:not([data-v="milli"]) > .ni{width:22px;height:22px}
    #rail.zi .rz .nav button[data-v="milli"]{margin:2px 0}
  }
  @media (max-height:780px){
    #rail.zi .rz-h{padding:7px 8px 3px}
    #rail.zi .rz .nav button:not([data-v="milli"]),#rail.zi .nsub-h{min-height:27px}
    #rail.zi .rz-home .nav button{min-height:28px}
  }
}
@media (min-width:1200px) and (pointer:coarse){
  #rail.zi .rz .nav button:not([data-v="milli"]),#rail.zi .nsub > .nav button:not([data-v="milli"]),#rail.zi .nsub-h{min-height:40px}
}

/* ================= tablet 681–1199: ray simgeleri bölüm renginde ================= */
@media (max-width:1199px) and (min-width:681px){
  #rail.zi .rz:not(.rz-gm) > .rz-t .zic{color:color-mix(in srgb,var(--sc,var(--accent)) 86%,var(--ink))}
  #rail.zi .rz.cur:not(.rz-gm) > .rz-t .zic,#rail.zi .rz.open:not(.rz-gm) > .rz-t .zic{background:color-mix(in srgb,var(--sc,var(--accent)) 15%,transparent);color:color-mix(in srgb,var(--sc,var(--accent)) 90%,var(--ink))}
  #rail.zi .rz.cur:not(.rz-gm) > .rz-t{color:var(--ink)}
  #rail.zi .rz-home .nav button[aria-current="true"] .ni{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
  #rail.zi .rz-home .nav button > .ni{border-radius:15px;background:none}
  #rail.zi .rz-home .nav button[aria-current="true"] > .ni{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
  #rail.zi .zdot{background:var(--accent)}
}

/* ================= açılır panel (tablet: her bölüm; masaüstü: "Daha fazla") ================= */
#rail.zi .rz-l.fly{width:320px;padding:8px 8px 10px}
#rail.zi .rz-l.fly .rz-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;padding:8px 10px 10px;font:700 15px/1.2 var(--f-display);color:var(--ink);text-transform:none;letter-spacing:-.01em}
#rail.zi .rz-l.fly .nav button:not([data-v="milli"]):not(.rail-ar){min-height:44px;padding:6px 10px 6px 8px;gap:12px;align-items:center;border-radius:12px}
#rail.zi .rz-l.fly .nav button:not([data-v="milli"]):not(.rail-ar) > .ni{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:10px}
#rail.zi .rz-l.fly .nav button:not([data-v="milli"]):not(.rail-ar) > .ni svg{width:18px;height:18px}
#rail.zi .rz-l.fly .nav button .lb{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:14.5px;font-weight:600;color:var(--ink)}
#rail.zi .rz-l.fly .nav button .nn{display:block;flex:none;margin-left:auto;font-size:12px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
#rail.zi .rz-l.fly .nav button:not([data-v="milli"]):not(.rail-ar):hover{background:var(--hover)}
#rail.zi .rz-l.fly .nav button:not([data-v="milli"]):not(.rail-ar)[aria-current="true"]{background:color-mix(in srgb,var(--sc,var(--accent)) 11%,transparent)}
#rail.zi .rz-l.fly .nav button:not([data-v="milli"]):not(.rail-ar)[aria-current="true"] .lb{color:var(--ink)}
#rail.zi .rz-l.fly .nsub-h{display:flex;align-items:center;gap:8px;padding:12px 10px 4px;font:650 12.5px/1.2 var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted)}
#rail.zi .rz-l.fly .nav button[data-v="milli"]{margin:4px 0}
#rail.zi .rz-l.fly .rf-nav button{min-height:44px}

/* ================= telefon ≤ 680: arama, son açılanlar, renkli bölüm kartları ================= */
@media (max-width:680px){
  html.menu-open #rail.zi .rtop{display:block;margin:2px 0 6px}
  #rail.zi .rsearch{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 16px;border:0;border-radius:16px;background:var(--surface);box-shadow:var(--sh),inset 0 0 0 .5px var(--line);color:var(--muted);font:500 15.5px/1.2 var(--f-body);text-align:left}
  #rail.zi .rsearch .ni{display:grid;place-items:center;width:22px;height:22px;color:var(--accent)}
  #rail.zi .rsearch .ni svg{width:20px;height:20px}
  #rail.zi .rsearch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  #rail.zi .rrec[hidden]{display:none}
  #rail.zi .rrec-h{padding:16px 4px 8px;font:650 13px/1.2 var(--f-body);color:var(--muted)}
  #rail.zi .rrec-l{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none;scroll-snap-type:x proximity}
  #rail.zi .rrec-l::-webkit-scrollbar{display:none}
  #rail.zi .rrec-i{flex:none;display:inline-flex;align-items:center;gap:8px;max-width:220px;min-height:44px;padding:0 14px 0 8px;border:0;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 .5px var(--line-strong);color:var(--ink);font:550 14px/1.2 var(--f-body);scroll-snap-align:start}
  #rail.zi .rrec-i .ni{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:9px;background:color-mix(in srgb,var(--sc) 13%,transparent);color:color-mix(in srgb,var(--sc) 84%,var(--ink))}
  #rail.zi .rrec-i .ni svg{width:16px;height:16px}
  #rail.zi .rrec-n{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* bölüm başlığı: sırık şeridi ve ad (23.10: açıklamalar kalktı) */
  html.menu-open #rail.zi .rz-h.grp{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;row-gap:2px;padding:22px 6px 9px;font:700 18px/1.2 var(--f-display);letter-spacing:-.015em;text-transform:none;color:var(--ink)}
  html.menu-open #rail.zi .rz-h.grp .zbar{width:18px;height:6px}
  /* satırlar: renkli simge kutusu, ad, sayı, ok */
  html.menu-open #rail.zi .nav button:not([data-v="milli"]):not(.rail-ar){min-height:52px;padding:6px 40px 6px 12px;gap:14px}
  html.menu-open #rail.zi .nav button:not([data-v="milli"]):not(.rail-ar) > .ni{width:34px;height:34px;border-radius:10px}
  html.menu-open #rail.zi .nav button:not([data-v="milli"]):not(.rail-ar) > .ni svg{width:20px;height:20px}
  html.menu-open #rail.zi .nav button + button::after{left:60px}
  html.menu-open #rail.zi .nav button .lb{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:16.5px;font-weight:600;color:var(--ink)}
  html.menu-open #rail.zi .nav button .nn{display:block;flex:none;font-size:13px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
  html.menu-open #rail.zi .nav button .rnew{margin-right:0}
  html.menu-open #rail.zi .nav button:not([data-v="milli"]):not(.rail-ar)[aria-current="true"]{background:color-mix(in srgb,var(--sc,var(--accent)) 10%,var(--surface))}
  /* alt grup başlığı kart içinde ayrı bir ara başlık */
  html.menu-open #rail.zi .nsub-h{display:flex;align-items:center;gap:8px;padding:18px 8px 7px;font:650 13.5px/1.2 var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink-2)}
  html.menu-open #rail.zi .rail-h .icon-btn{width:44px;height:44px}
  html.menu-open #rail.zi .nav button[data-v="milli"]{margin:0}
}
@media (prefers-reduced-motion:reduce){#rail.zi .nsub-h .ni svg{transition:none}}
/* 23.10: Arena kartında oyun alt satırı ve açma oku yok; kart tek parça */
#rail.zi .nav-arw .nav .rail-ar{border-radius:12px}

/* ================= 25.10 (v2026.10-zzzd): telefonda Arena satırı menünün satır diliyle aynı =================
   Emir: "Arena butonunun formu tasarım bütünlüğünü bozuyor". 76 px'lik lacivert, altın kenarlı ayrı kart yerine öteki gruplar gibi
   tek satırlık kart: aynı yüzey, köşe (16 px), satır yüksekliği (52 px), 34 px simge kutusu, yazı ve ok. Arena'yı ayıran yalnız renk:
   altın simge kutusu ve "Yeni" rozetiyle aynı biçimde altın "Oyna" rozeti. Parıltı ve ışık bandı bu görünümde yok. */
@media (max-width:680px){
  html.menu-open #rail.zi .nav-arw .nav.nav-ar{margin:12px 0 2px;background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:var(--sh)}
  html.menu-open #rail.zi .nav-arw .nav-ar .rail-ar{min-height:52px;padding:6px 40px 6px 12px;gap:14px;border-radius:0;background:none;box-shadow:none;color:var(--ink);transform:none}
  html.menu-open #rail.zi .nav-arw .nav-ar .rail-ar:hover{transform:none;box-shadow:none;background:var(--hover)}
  html.menu-open #rail.zi .nav-arw .nav-ar .rail-ar::before{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:2px solid var(--faint);border-top:2px solid var(--faint);transform:translateY(-50%) rotate(45deg)}
  html.menu-open #rail.zi .nav-arw .nav-ar .rail-ar::after,html.menu-open #rail.zi .nav-arw .nav-ar .rar-gl{display:none;animation:none}
  html.menu-open #rail.zi .nav-arw .nav-ar .rail-ar .ni{width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--gold,#F0C25E) 18%,transparent);color:color-mix(in srgb,var(--gold,#F0C25E) 78%,var(--ink))}
  html.menu-open #rail.zi .nav-arw .nav-ar .rail-ar .ni svg{width:20px;height:20px}
  html.menu-open #rail.zi .nav-arw .nav-ar .rail-ar .lb{flex:1;min-width:0}
  html.menu-open #rail.zi .nav-arw .nav-ar .rail-ar .lb b{font:600 16.5px/1.2 var(--f-body);letter-spacing:0;color:var(--ink)}
  html.menu-open #rail.zi .nav-arw .nav-ar .rail-ar .rar-go{margin:0;padding:3px 8px;border-radius:6px;font-size:11.5px;font-weight:750;line-height:1.3;letter-spacing:.02em;background:color-mix(in srgb,var(--gold,#F0C25E) 20%,transparent);color:color-mix(in srgb,var(--gold,#F0C25E) 60%,var(--ink))}
  html.menu-open #rail.zi .nav-arw .nav-ar .rail-ar[aria-current="true"]{background:color-mix(in srgb,var(--gold,#F0C25E) 10%,var(--surface));box-shadow:none}
  html.menu-open #rail.zi .nav-arw .nav-ar .rail-ar[aria-current="true"] .ni{background:var(--gold,#F0C25E);color:#1A1405}
  html.menu-open #rail.zi .nav-arw .nav-ar .rail-ar:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
}