/* Ortak görünüm: eski sayfaları (maç ayrıntısı, analiz sayfaları, giriş/kayıt, hata) yeni tasarım diliyle
   (Maçlar / Kuponlar / Kasam / Fon / Raporlar) uyumlu kılar. */
.hero{align-items:center;margin-bottom:16px}
.hero p{font-size:13.5px;line-height:1.55;max-width:900px}
main > h2{display:flex;align-items:center;gap:10px;font-size:19px;letter-spacing:-.015em;margin:30px 0 12px}
main > h2::after{content:"";flex:1;height:1px;background:var(--line)}
.card.empty{border:2px dashed var(--line);box-shadow:none;border-radius:18px;background:var(--card)}
.tbl-wrap{border-radius:16px;box-shadow:var(--shadow)}
details.card.more{border-radius:16px}

/* giriş / kayıt */
.auth{max-width:420px;margin:24px auto 0}
.auth h1{font-size:26px;letter-spacing:-.025em;margin:0 0 6px;text-align:center}
.auth .sub{margin:0 0 18px;text-align:center;color:var(--mute);font-size:13.5px}
.auth .card.form{max-width:none;padding:22px;border-radius:18px}
.auth .btn{width:100%;justify-content:center;min-height:44px;border-radius:999px}
.auth .alt{text-align:center;color:var(--mute);font-size:13px;margin:14px 0 0}
.auth .alt a{color:var(--acc-ink);font-weight:700}

/* hata sayfası */
.errbox{max-width:460px;margin:40px auto 0;text-align:center;padding:34px 20px;border:2px dashed var(--line);border-radius:18px;background:var(--card)}
.errbox b{display:block;font-size:44px;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.errbox p{color:var(--mute);margin:6px 0 18px}
.errbox a{display:inline-block;font-weight:800;font-size:13px;padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--bg);text-decoration:none}

/* maç ayrıntısı: ana tahmin kutusu ve ızgaralar */
.mh-ana{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;padding:12px 16px;border-radius:14px;
  background:color-mix(in srgb,var(--acc) 9%,var(--card));border:1.5px solid color-mix(in srgb,var(--acc) 30%,var(--line))}
.mh-ana .cap{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.mh-ana b{font-size:18px;font-weight:800;letter-spacing:-.01em}
.mh-ana i{font-style:normal;font-weight:700;font-size:13px;color:var(--acc-ink);margin-left:auto}
.mh-ana.won{background:var(--acc);border-color:var(--acc)}
.mh-ana.won .cap,.mh-ana.won b,.mh-ana.won i{color:#fff}
.mh-ana.lost{background:color-mix(in srgb,var(--bad) 10%,var(--card));border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.mh-ana.lost b,.mh-ana.lost i{color:var(--bad)}
.mh-ana.lv-ok{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 20%,var(--card)),color-mix(in srgb,var(--acc) 7%,var(--card)));border-color:var(--acc)}
.mh-ana.lv-no{background:linear-gradient(90deg,color-mix(in srgb,var(--bad) 16%,var(--card)),color-mix(in srgb,var(--bad) 5%,var(--card)));border-color:color-mix(in srgb,var(--bad) 60%,var(--line))}
.mh-ana.lv-no i{color:var(--bad)}
.grid2.tf{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid2.mk2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.grid2.mk2{grid-template-columns:1fr}}

/* üst menü: tek satır, segmentli modern görünüm */
.top-in{gap:18px;height:64px}
.brand{flex:none;white-space:nowrap}
.nav{flex:0 1 auto;min-width:0;gap:2px;padding:4px;border-radius:14px;background:var(--chip);
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{display:inline-flex;align-items:center;gap:7px;flex:none;white-space:nowrap;padding:7px 12px;border-radius:10px;
  font-size:13.5px;font-weight:600;line-height:1.2;color:var(--mute)}
.nav a svg{width:16px;height:16px;flex:none;opacity:.75}
.nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--card) 55%,transparent)}
.nav a.on{color:var(--ink);background:var(--card);box-shadow:0 1px 2px rgba(15,23,42,.08),0 3px 10px rgba(15,23,42,.07)}
.nav a.on svg{color:var(--acc-ink);opacity:1}
.top-right{margin-left:auto;flex:none}
.top-right .pill,.top-right .btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;height:36px;padding:0 14px;
  border-radius:999px;font-size:13px}
.top-right .pill svg{width:16px;height:16px;flex:none}
.top-right .pill.ic{width:38px;height:38px;padding:0;justify-content:center}
.top-right .pill.ic .lbl{display:none}
.top-right .pill.ic svg{width:18px;height:18px}
@media (max-width:1200px){
  .nav a svg{display:none}
  .nav a{padding:7px 10px}
}
@media (max-width:940px) and (min-width:761px){.brand .bt{display:none}}

/* kupon satırı: takım adları seçilebilir + kopyala düğmesi, maç sayfasına ayrı bağlantı */
.cl-mt{user-select:text;-webkit-user-select:text}
.cl-mt .tm{display:inline-flex;align-items:center;gap:2px}
.cl-mt .cpy{opacity:.6}
.cl-mt .cpy:hover{opacity:1;color:var(--acc-ink)!important;border-color:var(--acc)!important}
.cl-go{display:inline-flex;align-items:center;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700;
  color:var(--mute);background:var(--chip);text-decoration:none;vertical-align:middle}
.cl-go:hover{color:var(--acc-ink)}

/* rol etiketi ve görünüm geçişi (üye / yönetici, 15.10) */
.role-tag{margin-left:8px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:6px;background:var(--ink);color:var(--bg)}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:999px}
.top-right .pill.on{background:var(--ink);color:var(--bg)}
.top-right .view-sw{border:1px dashed color-mix(in srgb,var(--ink) 30%,var(--line))}
@media (max-width:1100px){.nav a{padding:8px 9px}}
@media (max-width:760px){
  .role-tag{display:none}
  .top-right{gap:6px}
  .top-right .view-sw{width:38px;padding:0;justify-content:center}
  .top-right .view-sw .t{display:none}
  .top-right .btn.sm{padding:0 12px}
}
.flash.adm{background:color-mix(in srgb,var(--acc) 10%,var(--card));border:1px solid color-mix(in srgb,var(--acc) 35%,var(--line));color:var(--ink)}
.flash.adm a{color:var(--acc-ink);font-weight:800}