/* ================================================================
   TEMA KİMLİKLERİ — her site GERÇEKTEN farklı görünsün.
   data-theme attribute'una göre kapsamlı override'lar.
   ================================================================ */

/* ---------- AÇIK TEMALAR: turf (çim) & steel (veri) kendi paletini alır ---------- */
html[data-theme="turf"] {
  --bg:#f3f8f4; --bg2:#e9f2ec; --surface:#ffffff; --surface2:#f2f9f4;
  --line:#d6e6da; --text:#0d2416; --muted:#5c7a67; --acc:#15803d;
  --acc2:#6abe4a; --live:#e11d48; --win:#15803d;
  --shadow:0 16px 40px -22px rgba(21,128,61,.35);
}
html[data-theme="steel"] {
  --bg:#eef1f5; --bg2:#e4e9ef; --surface:#ffffff; --surface2:#f2f5f9;
  --line:#d3dae3; --text:#0e1822; --muted:#5c6b7a; --acc:#0e7490;
  --acc2:#22b8cf; --live:#e11d48; --win:#15803d;
  --shadow:0 16px 40px -22px rgba(14,116,144,.3);
}
html[data-theme="turf"] body::after, html[data-theme="steel"] body::after { opacity:.5 }

/* ================================================================
   1) MIDNIGHT — "yayın stüdyosu": kare köşeler, elektrik mavisi, CRT tarama
   ================================================================ */
html[data-theme="midnight"] { --r-sm:4px; --r-md:6px; --r-lg:10px; --r-pill:4px; }
html[data-theme="midnight"] .hdr { background:linear-gradient(180deg,#0a1126,#070b18); border-bottom:2px solid var(--acc) }
html[data-theme="midnight"] .brand-mark { border-radius:0; background:var(--acc); color:#04121a }
html[data-theme="midnight"] .nav>a { border:1px solid transparent }
html[data-theme="midnight"] .nav>a.on, html[data-theme="midnight"] .nav>a:hover { border-color:var(--acc); background:color-mix(in srgb,var(--acc) 14%,transparent) }
html[data-theme="midnight"] .hero { background:
  repeating-linear-gradient(0deg, color-mix(in srgb,var(--acc) 4%,transparent) 0 1px, transparent 1px 4px) }
html[data-theme="midnight"] .hero-card { border:1px solid color-mix(in srgb,var(--acc) 55%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 30%,transparent), var(--shadow) }
html[data-theme="midnight"] .bl-row { border-left:3px solid transparent }
html[data-theme="midnight"] .bl-row:hover { border-left-color:var(--acc) }
html[data-theme="midnight"] .odds span { border-radius:0 }
html[data-theme="midnight"] .btn.primary { border-radius:0; letter-spacing:.06em }

/* ================================================================
   2) EMBER — "gazete manşet": kalın Bebas, kırmızı/altın bantlar, keskin
   ================================================================ */
html[data-theme="ember"] .util { background:linear-gradient(90deg,#2a0f00,#1a0d00) }
html[data-theme="ember"] .hdr { background:#120c06; border-bottom:3px solid var(--acc) }
html[data-theme="ember"] .brand-txt b { font-family:'Bebas Neue'; font-size:1.5rem; letter-spacing:.04em; color:var(--acc2) }
html[data-theme="ember"] .nav>a { font-family:'Bebas Neue'; font-size:1.05rem; letter-spacing:.08em }
html[data-theme="ember"] .hero { border-top:3px solid var(--acc); border-bottom:3px solid var(--acc); background:linear-gradient(180deg,#1c0f04,#0c0906) }
html[data-theme="ember"] .hero h1 { font-family:'Bebas Neue'; font-size:clamp(2rem,5vw,3.2rem); text-transform:none }
html[data-theme="ember"] .pill { border-radius:0; background:var(--acc); color:#1a0d00; border-color:var(--acc) }
html[data-theme="ember"] .bl-head { background:var(--acc); color:#1a0d00; border-bottom:0 }
html[data-theme="ember"] .bl-head a b, html[data-theme="ember"] .bl-head span, html[data-theme="ember"] .bl-head i { color:#1a0d00 }
html[data-theme="ember"] .bl-row { border-bottom:1px solid var(--line) }
html[data-theme="ember"] .bl-row:hover { background:color-mix(in srgb,var(--acc) 10%,transparent) }
html[data-theme="ember"] .odds span { border-radius:0; font-family:'Bebas Neue'; font-size:14px }
html[data-theme="ember"] .btn.primary { border-radius:0; font-family:'Bebas Neue'; letter-spacing:.1em; font-size:16px }

/* ================================================================
   3) TURF — "çim saha" (AÇIK): yeşil-beyaz, yuvarlak, stadyum çizgisi
   ================================================================ */
html[data-theme="turf"] .util { border-bottom:1px solid var(--line); background:#eef6f0 }
html[data-theme="turf"] .hdr { background:#fff; border-bottom:2px solid var(--acc) }
html[data-theme="turf"] .brand-mark { background:var(--acc); color:#fff; border-radius:50% }
html[data-theme="turf"] .hero { background:
  repeating-linear-gradient(0deg, color-mix(in srgb,var(--acc) 6%,transparent) 0 22px, transparent 22px 44px),
  linear-gradient(180deg,#f0f8f2,#f7fbf8) }
html[data-theme="turf"] .hero-card { background:#fff; border:1px solid var(--line); box-shadow:var(--shadow) }
html[data-theme="turf"] .bl-group { background:#fff; border:1px solid var(--line) }
html[data-theme="turf"] .bl-head { background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 55%,#fff)); color:#fff }
html[data-theme="turf"] .bl-head a b, html[data-theme="turf"] .bl-head span, html[data-theme="turf"] .bl-head i { color:#fff }
html[data-theme="turf"] .odds span { border-radius:10px }
html[data-theme="turf"] .tm b { color:var(--text) }

/* ================================================================
   4) ROYAL — "dergi/prestij": mor-altın, Playfair serif, zarif çizgiler
   ================================================================ */
html[data-theme="royal"] .hdr { background:linear-gradient(180deg,#160d2e,#0b0718); border-bottom:1px solid color-mix(in srgb,var(--acc2) 40%,transparent) }
html[data-theme="royal"] .brand-txt b { font-family:'Playfair Display'; font-style:italic }
html[data-theme="royal"] .nav>a { font-family:'Playfair Display'; letter-spacing:.02em; font-size:15px }
html[data-theme="royal"] .hero { border-top:1px solid color-mix(in srgb,var(--acc2) 35%,transparent); border-bottom:1px solid color-mix(in srgb,var(--acc2) 35%,transparent) }
html[data-theme="royal"] .hero h1 { font-family:'Playfair Display'; font-weight:600 }
html[data-theme="royal"] .hero-card { border:1px solid color-mix(in srgb,var(--acc2) 45%,transparent); background:linear-gradient(160deg,#1d1238,#150d2b) }
html[data-theme="royal"] .bl-head { border-bottom:1px solid color-mix(in srgb,var(--acc2) 40%,transparent); background:none }
html[data-theme="royal"] .bl-head b { color:var(--acc2); font-family:'Playfair Display' }
html[data-theme="royal"] .odds span:hover { border-color:var(--acc2); color:var(--acc2) }
html[data-theme="royal"] .btn.primary { background:linear-gradient(120deg,var(--acc),var(--acc2)); color:#1a0d00 }

/* ================================================================
   5) CRIMSON — "tribün": bordo-kırmızı, Anton condensed, diagonal şerit
   ================================================================ */
html[data-theme="crimson"] .hdr { background:linear-gradient(180deg,#200609,#120406); border-bottom:3px solid var(--acc) }
html[data-theme="crimson"] .brand-txt b { font-family:'Anton'; font-size:1.35rem; letter-spacing:.03em }
html[data-theme="crimson"] .nav>a { font-family:'Anton'; letter-spacing:.06em; font-size:14px }
html[data-theme="crimson"] .hero { background:
  repeating-linear-gradient(-45deg, color-mix(in srgb,var(--acc) 7%,transparent) 0 14px, transparent 14px 34px),
  linear-gradient(180deg,#1d070b,#120406) }
html[data-theme="crimson"] .hero h1 { font-family:'Anton'; text-transform:none; letter-spacing:.01em }
html[data-theme="crimson"] .pill { background:var(--acc); color:#fff; border-color:var(--acc); border-radius:0 }
html[data-theme="crimson"] .bl-head { background:var(--acc); color:#fff; border-bottom:0 }
html[data-theme="crimson"] .bl-head a b, html[data-theme="crimson"] .bl-head span, html[data-theme="crimson"] .bl-head i { color:#fff }
html[data-theme="crimson"] .bl-row.is-live { background:linear-gradient(90deg,color-mix(in srgb,var(--live) 16%,transparent),transparent 50%) }
html[data-theme="crimson"] .btn.primary { border-radius:0; font-family:'Anton'; letter-spacing:.08em }

/* ================================================================
   6) STEEL — "veri tablosu" (AÇIK): grafit-cyan, monospace rakam, yoğun
   ================================================================ */
html[data-theme="steel"] .hdr { background:#fff; border-bottom:1px solid var(--line); box-shadow:0 1px 0 var(--line) }
html[data-theme="steel"] .brand-mark { border-radius:4px }
html[data-theme="steel"] .sc, html[data-theme="steel"] .mb-num, html[data-theme="steel"] .odds span { font-variant-numeric:tabular-nums; font-family:'Space Grotesk' }
html[data-theme="steel"] .hero { background:linear-gradient(180deg,#eef2f7,#e6ecf3) }
html[data-theme="steel"] .bl-group { background:#fff; border:1px solid var(--line); border-radius:4px }
html[data-theme="steel"] .bl-head { background:#f5f7fa; border-bottom:2px solid var(--acc); color:var(--text) }
html[data-theme="steel"] .bl-row { border-bottom:1px solid var(--line); padding:8px 14px }
html[data-theme="steel"] .bl-row:hover { background:#f0f7fa }
html[data-theme="steel"] .odds span { border-radius:3px; border:1px solid var(--line) }
html[data-theme="steel"] .btn.primary { border-radius:4px }

/* ================================================================
   7) AURORA — "neon mint": çok yuvarlak, aurora parlama, yumuşak
   ================================================================ */
html[data-theme="aurora"] .hdr { background:color-mix(in srgb,var(--bg) 80%,transparent); border-bottom:1px solid var(--line) }
html[data-theme="aurora"] .hero { background:
  conic-gradient(from 210deg at 30% 20%, color-mix(in srgb,var(--acc) 22%,transparent), transparent 45%),
  radial-gradient(70% 60% at 80% 0%, color-mix(in srgb,var(--acc2) 16%,transparent), transparent 60%) }
html[data-theme="aurora"] .hero-card { border:1px solid color-mix(in srgb,var(--acc) 40%,transparent); box-shadow:var(--shadow) }
html[data-theme="aurora"] .bl-group { border-radius:var(--r-lg) }
html[data-theme="aurora"] .bl-row:hover .odds span { border-color:var(--acc); color:var(--acc); box-shadow:0 0 14px -4px color-mix(in srgb,var(--acc) 60%,transparent) }

/* ================================================================
   8) SUNSET — "genç neon": mor-pembe, glow kartlar, yumuşak
   ================================================================ */
html[data-theme="sunset"] .hdr { background:color-mix(in srgb,var(--bg) 82%,transparent) }
html[data-theme="sunset"] .brand-mark { box-shadow:0 0 18px -4px color-mix(in srgb,var(--acc) 70%,transparent) }
html[data-theme="sunset"] .hero { background:
  radial-gradient(60% 55% at 15% 10%, color-mix(in srgb,var(--acc) 20%,transparent), transparent 60%),
  radial-gradient(50% 50% at 90% 5%, color-mix(in srgb,var(--acc2) 14%,transparent), transparent 60%) }
html[data-theme="sunset"] .hero-card { border:1px solid color-mix(in srgb,var(--acc) 45%,transparent) }
html[data-theme="sunset"] .bl-row { border:1px solid transparent; margin-bottom:6px; border-radius:var(--r-md); background:var(--surface) }
html[data-theme="sunset"] .bl-row:hover { border-color:color-mix(in srgb,var(--acc) 50%,transparent) }
html[data-theme="sunset"] .bl-group { background:none; border:0 }
html[data-theme="sunset"] .bl-head { background:none; padding:10px 4px }
html[data-theme="sunset"] .bl-cta span { box-shadow:0 0 16px -6px color-mix(in srgb,var(--acc) 70%,transparent) }

/* ---------- AÇIK temada yardımcı düzeltmeler ---------- */
html.light .util { color:var(--muted) }
html.light .search { background:var(--surface2) }
html.light .ticker { background:color-mix(in srgb,var(--surface) 80%,transparent) }
html.light .tlogo.mono { color:#fff }