/* ============================================================
   Cumhurbaşkanlığı ve Cumhuriyet Koşuları — etkinlik sayfaları
   (/cumhuriyet-ve-cumhurbaskanligi-kosulari ve alt sayfaları)
   Tek yazı ailesi: Plus Jakarta Sans. Ölçek (az sayıda boy):
   display 40–64 · h1 32–44 · h2 28–36 · h3 21 · metin 17 (mobil 16) · yardımcı 15 · etiket 13.
   Ağırlık: 400 metin · 500 yardımcı · 600 bağlantı/alt başlık · 700 başlık · 800 vitrin.
   Sayılar (saat, yıl, derece, sayaç): tabular-nums.
   Renk: kırmızı yalnız birincil eylem, seçim ve veri çubukları; önemli metin asla soluk gri.
   Yerleşim: hero → tabela → tahmin oyunu → koşular (sekmeli; her koşunun bilgisi yalnız kendi
   panelinde) → (isteğe bağlı söz) → footer. Hero sanatı cumhuriyet-v2.css'te (değişmedi).
   ============================================================ */
:root {
    --cm-red: #c8102e;
    --cm-red-dark: #a30d25;
    --cm-bordo: #8f0b21;
    --cm-ink: #15100e;
    --cm-ink-2: #2b2421;
    --cm-paper: #f6f2ea;
    --cm-paper-2: #ede7db;
    --cm-rule: #d9cfbe;
    --cm-rule-strong: #b9ad99;
    --cm-muted: #5b514a;
    --cm-white: #fff;
    --cm-on-red: rgba(255, 255, 255, .9);
    --cm-on-red-2: rgba(255, 255, 255, .76);
    --cm-on-red-rule: rgba(255, 255, 255, .26);
    --cm-on-dark: rgba(246, 242, 234, .76);
    --cm-on-dark-rule: rgba(246, 242, 234, .16);
    --cm-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --cm-sans: var(--cm-font);
    --cm-serif: var(--cm-font); /* cumhuriyet-v2.css eski değişkeni okur; serif yok */
    --cm-wrap: 1200px;
    --cm-gutter: clamp(16px, 4vw, 48px);
    --cm-header-h: 72px;
    --cm-ease: cubic-bezier(.6, .05, .25, 1);
    --cm-fs-display: clamp(40px, 4.8vw, 64px);
    --cm-fs-h1: clamp(32px, 3.4vw, 44px);
    --cm-fs-h2: clamp(28px, 2.6vw, 36px);
    --cm-fs-h3: 21px;
    --cm-fs-num: clamp(30px, 3vw, 44px);
    --cm-fs-body: 17px;
    --cm-sec-pad: clamp(56px, 6vw, 88px);
}
@media (min-width: 1700px) { :root { --cm-wrap: 1360px; } }
@media (min-width: 2300px) { :root { --cm-wrap: 1500px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cm-header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--cm-paper);
    color: var(--cm-ink);
    font: 400 var(--cm-fs-body)/1.6 var(--cm-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.cm-lock { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
dl, dd, ol, ul, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
::selection { background: var(--cm-red); color: var(--cm-white); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.cm-num, .cm-countdown, .cm-ev-time-val, .cm-ev-when, .cm-roll-year, .cm-roll-time, .cm-bars-year, .cm-bars-value, .cm-ev-roll-year, .cm-facts dd, .cm-stat dd { font-variant-numeric: lining-nums tabular-nums; }

.cm-wrap { width: 100%; max-width: calc(var(--cm-wrap) + 2 * var(--cm-gutter)); margin: 0 auto; padding: 0 var(--cm-gutter); }
.cm-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tipografi parçaları ---------- */
.cm-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 32px; padding-bottom: 16px; border-bottom: 1px solid var(--cm-ink); margin-bottom: 32px; }
.cm-sec-head-plain { border-bottom: 0; padding-bottom: 0; margin-bottom: 20px; }
.cm-sec-title { font-size: var(--cm-fs-h2); font-weight: 700; }
.cm-sec-meta { margin: 0 0 4px; font-size: 15px; color: var(--cm-muted); max-width: 520px; text-align: right; }
.cm-sec-meta b { font-weight: 600; color: var(--cm-ink); }
.cm-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 16px; font-size: var(--cm-fs-h3); font-weight: 700; }
.cm-sub small { font-size: 14px; font-weight: 500; color: var(--cm-muted); white-space: nowrap; }
.cm-lead { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; font-weight: 500; color: var(--cm-ink); }
.cm-fine { margin: 20px 0 0; font-size: 14px; line-height: 1.5; color: var(--cm-muted); }
.cm-label { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cm-muted); }
.cm-link { color: var(--cm-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--cm-rule-strong); transition: color .15s, text-decoration-color .15s; }
.cm-link:hover { color: var(--cm-red); text-decoration-color: currentColor; }
.cm-link-light { color: var(--cm-white); text-decoration-color: var(--cm-on-red-rule); }
.cm-link-light:hover { color: var(--cm-white); text-decoration-color: currentColor; }
.cm-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; font-size: 16px; }
/* Koşu etiketi: hangi koşu / hangi ırk — her koşu bloğunun başında */
.cm-tag { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1.3; background: var(--cm-ink); color: var(--cm-paper); }
.cm-tag-light { background: rgba(255, 255, 255, .16); color: var(--cm-white); }

/* ---------- Butonlar ---------- */
.cm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; padding: 0 24px;
    font: 700 16px/1 var(--cm-font); text-decoration: none; letter-spacing: 0;
    border: 1px solid transparent; border-radius: 4px;
    transition: background-color .15s, color .15s, border-color .15s;
    cursor: pointer;
}
.cm-btn-light { background: var(--cm-white); color: var(--cm-red); border-color: var(--cm-white); }
.cm-btn-light:hover { background: var(--cm-paper); }
.cm-btn-red { background: var(--cm-red); color: var(--cm-white); border-color: var(--cm-red); }
.cm-btn-red:hover { background: var(--cm-red-dark); border-color: var(--cm-red-dark); }
.cm-btn-ghost { background: transparent; color: var(--cm-white); border-color: rgba(255, 255, 255, .55); }
.cm-btn-ghost:hover { border-color: var(--cm-white); background: rgba(255, 255, 255, .08); }

/* ---------- Header: marka solda, menü sağda, canlı yayın düğmesi ---------- */
.cm-header {
    position: fixed; inset: 0 0 auto; z-index: 50;
    color: var(--cm-white);
    border-bottom: 1px solid transparent;
    transition: background-color .25s, border-color .25s;
}
.cm-header.is-solid, .cm-header.is-open { background: var(--cm-red); border-bottom-color: var(--cm-on-red-rule); }
.cm-header-inner {
    display: flex; align-items: center; gap: 24px;
    height: var(--cm-header-h);
    max-width: calc(var(--cm-wrap) + 2 * var(--cm-gutter)); margin: 0 auto; padding: 0 var(--cm-gutter);
}
.cm-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--cm-white); text-decoration: none; flex: none; }
.cm-brand-mark { display: inline-flex; align-items: center; padding-right: 12px; border-right: 1px solid var(--cm-on-red-rule); }
.cm-brand-tay { display: block; height: 30px; width: auto; padding-right: 12px; border-right: 1px solid var(--cm-on-red-rule); box-sizing: content-box; } /* TAY TV logosu, ay-yıldızın solunda */
.cm-brand-mark svg { display: block; height: 30px; width: auto; fill: currentColor; }
.cm-brand-name { font: 700 11.5px/1.3 var(--cm-font); letter-spacing: .07em; text-transform: uppercase; }
.cm-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.cm-nav-link {
    position: relative; display: inline-flex; align-items: center;
    font: 600 15px/1 var(--cm-font); color: var(--cm-on-red); text-decoration: none; padding: 10px 10px;
}
.cm-nav-link::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; background: var(--cm-white);
    transform: scaleX(0); transform-origin: left; transition: transform .2s var(--cm-ease);
}
.cm-nav-link:hover, .cm-nav-link.is-active { color: var(--cm-white); }
.cm-nav-link:hover::after, .cm-nav-link.is-active::after { transform: scaleX(1); }
.cm-nav-sep { width: 1px; height: 18px; background: var(--cm-on-red-rule); margin: 0 10px; }
.cm-nav-live { flex: none; min-height: 40px; padding: 0 16px; font-size: 15px; background: var(--cm-white); color: var(--cm-red); border-color: var(--cm-white); }
.cm-nav-live:hover { background: var(--cm-paper); }
.cm-nav-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cm-red); }

.cm-burger { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: inherit; cursor: pointer; position: relative; flex: none; }
.cm-burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; transition: transform .2s, top .2s; }
.cm-burger span:first-child { top: 17px; }
.cm-burger span:last-child { top: 25px; }
.cm-header.is-open .cm-burger span:first-child { top: 21px; transform: rotate(45deg); }
.cm-header.is-open .cm-burger span:last-child { top: 21px; transform: rotate(-45deg); }
.cm-mobile { display: none; }

/* ---------- Ay-yıldız teknik çizimi (alt sayfa başlıkları) ---------- */
.cm-art { display: block; width: 100%; height: auto; overflow: visible; }
.cm-art .ln {
    stroke: rgba(255, 255, 255, .42); stroke-width: 1; vector-effect: non-scaling-stroke;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: cm-draw 1.5s var(--cm-ease) forwards; animation-delay: var(--d, 0s);
}
.cm-art .ln.dash { stroke-dasharray: .006 .006; stroke-dashoffset: 0; opacity: 0; animation: cm-fade .8s ease forwards .2s; }
.cm-art-ticks path { stroke: rgba(255, 255, 255, .5); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; animation: cm-fade .6s ease forwards 1.2s; }
.cm-art-labels text { fill: rgba(255, 255, 255, .72); font: 500 10.5px var(--cm-font); letter-spacing: .03em; opacity: 0; animation: cm-fade .8s ease forwards 1.35s; }
.cm-art-emblem path { fill: var(--cm-white); opacity: 0; animation: cm-fade 1.1s ease forwards 1s; }
@keyframes cm-draw { to { stroke-dashoffset: 0; } }
@keyframes cm-fade { to { opacity: 1; } }

/* ---------- Hero: ne, ne zaman, ne yapabilirim, tek birincil eylem ---------- */
.cm-hero {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    min-height: min(100svh, 900px);
    background: var(--cm-red); color: var(--cm-white);
}
.cm-hero-art { position: absolute; z-index: 0; width: min(60vw, 900px); right: max(-6vw, -90px); top: 50%; transform: translateY(-60%); pointer-events: none; }
.cm-hero-inner {
    position: relative; z-index: 1;
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    padding-top: calc(var(--cm-header-h) + 40px); padding-bottom: 48px;
}
.cm-hero-inner > * { max-width: 640px; }
.cm-kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; font-size: 17px; font-weight: 600; color: var(--cm-white); margin: 0 0 18px; }
.cm-kicker .cm-sep { color: var(--cm-on-red-2); font-weight: 400; }
.cm-hero-title { font-size: var(--cm-fs-display); font-weight: 800; line-height: 1.02; letter-spacing: -.025em; margin: 0 0 22px; max-width: none; }
.cm-hero-title span { display: block; white-space: nowrap; }
.cm-hero-title em { display: block; font-style: normal; font-weight: 500; color: var(--cm-on-red-2); }
.cm-hero-what { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--cm-white); max-width: 560px; margin: 0 0 22px; }
.cm-hero-what b { font-weight: 700; }
/* Oyun satırı: ne kazanılır + tek birincil eylem */
.cm-hero-game { max-width: 640px; padding: 18px 0 0; border-top: 1px solid var(--cm-on-red-rule); }
.cm-hero-game-text { font-size: clamp(17px, 1.35vw, 19px); font-weight: 700; line-height: 1.45; margin: 0 0 16px; }
.cm-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.cm-hero-link { font-size: 16px; font-weight: 600; color: var(--cm-white); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, .5); }
.cm-hero-link:hover { text-decoration-color: currentColor; }

/* ---------- Tabela (bordo): ilk koşuya geri sayım + iki koşu saati ---------- */
.cm-board { position: relative; z-index: 1; background: var(--cm-bordo); color: var(--cm-white); }
.cm-board-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px clamp(24px, 4vw, 64px); padding-top: 22px; padding-bottom: 24px; }
.cm-board-main { min-width: 0; }
.cm-board-label { font-size: 15px; font-weight: 600; color: var(--cm-white); margin: 0 0 8px; }
.cm-countdown { display: flex; }
.cm-countdown div { display: flex; align-items: baseline; gap: 8px; padding: 0 22px; border-left: 1px solid var(--cm-on-red-rule); }
.cm-countdown div:first-child { padding-left: 0; border-left: 0; }
.cm-countdown span { font-size: clamp(36px, 3.4vw, 48px); font-weight: 700; line-height: 1; letter-spacing: -.02em; min-width: 2ch; }
.cm-countdown small { font-size: 14px; font-weight: 500; color: var(--cm-on-red); }
.cm-ev-times { display: flex; justify-content: flex-end; }
.cm-ev-time { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 2px clamp(18px, 2.4vw, 32px); border-left: 1px solid var(--cm-on-red-rule); color: inherit; text-decoration: none; }
.cm-ev-time:last-child { padding-right: 0; }
.cm-ev-time-head { font-size: 15px; font-weight: 600; color: var(--cm-white); white-space: nowrap; }
.cm-ev-time-head small { display: block; font-size: 14px; font-weight: 500; color: var(--cm-on-red); margin-top: 2px; }
.cm-ev-time-val { font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; line-height: 1; letter-spacing: -.01em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: transparent; transition: text-decoration-color .2s; }
.cm-ev-time:hover .cm-ev-time-val { text-decoration-color: var(--cm-on-red-rule); }
.cm-ev-time-val small { font-size: 14px; font-weight: 500; color: var(--cm-on-red); }
/* Yarış günü: iki hücre yan yana, saat sayacı */
.cm-ev-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; padding-bottom: 0; }
.cm-ev-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 24px clamp(16px, 3vw, 40px) 26px; color: inherit; text-decoration: none; }
.cm-ev-cell:first-child { padding-left: 0; }
.cm-ev-cell + .cm-ev-cell { border-left: 1px solid var(--cm-on-red-rule); }
.cm-ev-cell .cm-board-label { margin: 0; }
.cm-ev-when { font-size: clamp(28px, 3vw, 40px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: transparent; transition: text-decoration-color .2s; }
.cm-ev-cell:hover .cm-ev-when { text-decoration-color: var(--cm-on-red-rule); }
.cm-board-note { color: var(--cm-on-red); font-size: 15px; margin: 0; }

/* ---------- Bölümler ---------- */
.cm-section { padding: var(--cm-sec-pad) 0; }
.cm-section-alt { background: var(--cm-paper-2); }
.cm-section + .cm-section:not(.cm-section-alt) { border-top: 1px solid var(--cm-rule); }

/* ---------- Tahmin oyunu (mürekkep) ---------- */
.cm-game { background: var(--cm-ink); color: var(--cm-paper); padding: var(--cm-sec-pad) 0 clamp(40px, 4vw, 56px); }
.cm-game-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px clamp(48px, 7vw, 120px); align-items: start; }
.cm-game-label { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--cm-on-dark); }
.cm-game-title { font-size: var(--cm-fs-h2); font-weight: 700; color: var(--cm-white); margin: 0 0 18px; max-width: 16em; }
.cm-game .cm-lead { color: var(--cm-paper); max-width: 580px; }
.cm-game-text p:not(.cm-lead) { color: var(--cm-on-dark); max-width: 580px; }
.cm-game-closed { display: inline-block; margin: 0 0 18px; padding: 8px 14px; border: 1px solid var(--cm-on-dark-rule); border-radius: 4px; font-weight: 600; color: var(--cm-paper) !important; }
.cm-steps { counter-reset: step; margin: 22px 0 0; max-width: 580px; border-top: 1px solid var(--cm-on-dark-rule); }
.cm-steps li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cm-on-dark-rule); color: var(--cm-paper); line-height: 1.5; }
.cm-steps li::before { content: counter(step); font-weight: 700; color: var(--cm-on-dark); font-variant-numeric: tabular-nums; }
.cm-game-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.cm-badges { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.cm-badges img { height: 40px; width: auto; }
.cm-badges a { display: inline-flex; transition: opacity .2s; }
.cm-badges a:hover { opacity: .85; }
.cm-prize { padding-bottom: 14px; border-bottom: 1px solid var(--cm-on-dark-rule); margin-bottom: 4px; }
.cm-prize-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 10px; }
.cm-prize-partner { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 24px; border-left: 1px solid var(--cm-on-dark-rule); }
.cm-prize-partner span { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cm-on-dark); }
.cm-prize-partner img { height: 22px; width: auto; }
.cm-prize-value { font-size: clamp(40px, 3.6vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--cm-white); margin: 0; }
.cm-prize-note { margin: 0; font-size: 15px; color: var(--cm-on-dark); }
.cm-prize-note b { color: var(--cm-paper); font-weight: 600; }
.cm-rules div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--cm-on-dark-rule); }
.cm-rules dt { font-size: 15px; color: var(--cm-on-dark); }
.cm-rules dd { font-size: 16px; font-weight: 600; color: var(--cm-paper); }
.cm-rules dd small { display: block; font-size: 14px; font-weight: 400; color: var(--cm-on-dark); }
.cm-legal { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--cm-on-dark-rule); }
.cm-legal details { border-bottom: 1px solid var(--cm-on-dark-rule); }
.cm-legal summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--cm-paper); }
.cm-legal summary::-webkit-details-marker { display: none; }
.cm-legal summary::after { content: 'Oku'; font-size: 14px; font-weight: 500; color: var(--cm-on-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cm-on-dark-rule); }
.cm-legal summary:hover::after { color: var(--cm-paper); }
.cm-legal details[open] summary::after { content: 'Kapat'; }
.cm-legal details p { max-width: 820px; font-size: 16px; line-height: 1.65; color: var(--cm-on-dark); }
.cm-legal details p:last-child { padding-bottom: 14px; }

/* ---------- Koşular: bordo bant + iki büyük koşu kartı (seçici) + çerçeveli panel ---------- */
.cm-races-band { background: var(--cm-bordo); color: var(--cm-white); padding: clamp(44px, 5vw, 64px) 0 0; }
.cm-races-intro { max-width: 760px; margin-bottom: 28px; }
.cm-races-label { margin: 0 0 8px; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cm-on-red); }
.cm-races-title { font-size: var(--cm-fs-h2); font-weight: 800; letter-spacing: -.015em; color: var(--cm-white); margin: 0 0 10px; }
.cm-races-text { margin: 0; font-size: 17px; line-height: 1.55; color: var(--cm-on-red); }
.cm-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; scroll-margin-top: 150px; } /* html scroll-padding ile toplanır: bant başlığı görünür kalır */
.cm-tab {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
    padding: 20px 22px 22px; margin-bottom: -1px; text-align: left; cursor: pointer;
    background: rgba(255, 255, 255, .08); color: var(--cm-white);
    border: 1px solid rgba(255, 255, 255, .34); border-bottom: 0; border-radius: 6px 6px 0 0;
    font: inherit; transition: background-color .15s, border-color .15s, color .15s;
}
.cm-tab:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); }
.cm-tab:focus-visible { outline: 2px solid var(--cm-white); outline-offset: 2px; }
.cm-tab-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 2px; }
.cm-tab-no { font-size: 15px; font-weight: 700; color: var(--cm-on-red); }
.cm-tab-state { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); }
.cm-tab-state::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.cm-tab-name { font-size: clamp(20px, 2vw, 26px); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.cm-tab-meta { font-size: 16px; font-weight: 500; color: var(--cm-on-red); }
.cm-tab-time { margin-top: 6px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cm-white); }
.cm-tab[aria-selected="true"] { background: var(--cm-white); color: var(--cm-ink); border-color: var(--cm-white); }
.cm-tab[aria-selected="true"]:hover { background: var(--cm-white); }
.cm-tab[aria-selected="true"] .cm-tab-no { color: var(--cm-red); }
.cm-tab[aria-selected="true"] .cm-tab-meta { color: var(--cm-muted); }
.cm-tab[aria-selected="true"] .cm-tab-time { color: var(--cm-ink); }
.cm-tab[aria-selected="true"] .cm-tab-state { border-color: var(--cm-red); }
.cm-tab[aria-selected="true"] .cm-tab-state::after { background: var(--cm-red); }
/* Seçilen koşunun içeriği: beyaz, çerçeveli panel (seçili kartla birleşir) */
.cm-races-body { padding-bottom: var(--cm-sec-pad); }
.cm-panel { background: var(--cm-white); border: 1px solid var(--cm-rule-strong); border-top: 0; border-radius: 0 0 6px 6px; padding: 0 clamp(20px, 3vw, 40px) clamp(28px, 3vw, 40px); animation: cm-panel-in .3s ease both; }
.cm-panel[hidden] { display: none; }
.cm-panel:not([hidden]) + .cm-panel:not([hidden]) { margin-top: 40px; border-top: 1px solid var(--cm-rule-strong); border-radius: 6px; } /* JS yokken iki koşu alt alta; gizli panel komşusunu itmesin */
@keyframes cm-panel-in { from { opacity: 0; } to { opacity: 1; } }
/* Panel üstü yapışkan koşu çubuğu: görüntülenen koşu + diğerine geçiş */
.cm-race-bar { position: sticky; top: var(--cm-header-h); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 calc(-1 * clamp(20px, 3vw, 40px)) 28px; padding: 12px clamp(20px, 3vw, 40px); background: var(--cm-white); border-bottom: 1px solid var(--cm-rule); }
.cm-race-bar-now { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; }
.cm-race-bar-now b { font-weight: 700; }
.cm-race-bar-switch { font-size: 15px; font-weight: 600; color: var(--cm-red); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(200, 16, 46, .4); }
.cm-race-bar-switch:hover { text-decoration-color: currentColor; }
.cm-panel .cm-race-head { margin-top: 0; }
.cm-panel > .cm-block:first-of-type { margin-top: 0; }
/* Koşu başlığı: etiket + ad + tek satır künye + tanıtım */
.cm-race-head { margin-bottom: 28px; }
.cm-race-head .cm-tag { margin-bottom: 12px; }
.cm-race-title { font-size: var(--cm-fs-h2); font-weight: 800; letter-spacing: -.015em; margin: 0 0 8px; }
.cm-race-meta { margin: 0 0 14px; font-size: 16px; font-weight: 500; color: var(--cm-ink-2); }
.cm-race-meta b { font-weight: 700; color: var(--cm-ink); }
.cm-race-about { margin: 0; max-width: 760px; color: var(--cm-ink-2); }
.cm-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 40px; }
.cm-facts div { min-width: 0; padding: 14px 16px 15px; border-radius: 12px; background: var(--cm-paper); }
.cm-facts div:first-child { background: var(--cm-ink); color: var(--cm-white); } /* koşu saati önde */
.cm-facts dt { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--cm-muted); }
.cm-facts div:first-child dt, .cm-facts div:first-child dd small { color: var(--cm-on-dark); }
.cm-facts dd { margin: 0; font-size: 20px; font-weight: 800; }
.cm-facts dd small { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--cm-muted); }
.cm-block { margin-top: 44px; scroll-margin-top: 56px; } /* yapışkan koşu çubuğu kadar */
.cm-block:first-child { margin-top: 0; }
.cm-result { padding: 0 0 24px; }
.cm-result-label { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--cm-muted); }
.cm-result-name { display: flex; align-items: center; gap: 14px; margin: 0; font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.02em; }
.cm-top5 { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-weight: 600; }
.cm-top5 span { font-weight: 700; margin-right: 6px; color: var(--cm-muted); }

/* Jokey forması (ipek) */
.cm-silk { width: 36px; height: 36px; flex: none; }
.cm-silk-md { width: 44px; height: 44px; }
.cm-silk-sm { width: 26px; height: 26px; }
.cm-silk-shirt { fill: var(--sb, var(--cm-paper-2)); stroke: rgba(21, 16, 14, .28); stroke-width: 1; stroke-linejoin: round; }
.cm-silk-collar { fill: none; stroke: rgba(21, 16, 14, .35); stroke-width: 1.2; stroke-linejoin: round; }
.cm-silk text { fill: var(--sf, var(--cm-ink)); font: 700 11.5px var(--cm-font); text-anchor: middle; }
.cm-silk-none { opacity: .35; }
/* TJK sahip forması (görsel): beyaz zeminli küçük kart, varsa At No köşede */
.cm-silk-img { position: relative; display: inline-block; background: #fff; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(21, 16, 14, .12); overflow: hidden; }
span.cm-silk.cm-silk-img { height: auto; aspect-ratio: 78 / 90; }
.cm-silk-img img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 1px; box-sizing: border-box; }
.cm-silk-img b { position: absolute; right: 0; bottom: 0; min-width: 21px; padding: 0 4px; border-radius: 7px 0 5px 0; background: var(--cm-ink, #15100e); color: #fff; font: 800 13.5px/20px var(--cm-font); text-align: center; }
.cm-silk-sm.cm-silk-img b { min-width: 14px; padding: 0 2px; border-radius: 4px 0 4px 0; font-size: 10px; line-height: 14px; }
.cm-runner .cm-silk-img { width: 46px; }

/* Kayıtlar — tablo */
.cm-table-head, .cm-runner {
    display: grid;
    /* forma · safkan · yaş · kilo · son 6 · stil · HP · KGS · sahibi · ok */
    grid-template-columns: 52px minmax(0, 1.6fr) 74px 64px 128px 76px 44px 44px minmax(0, 1fr) 16px;
    gap: 14px; align-items: center;
}
.cm-table--j .cm-table-head, .cm-table--j .cm-runner { grid-template-columns: 52px minmax(0, 1.5fr) 74px 64px 128px 76px 44px 44px minmax(0, .9fr) minmax(0, 1fr) 16px; }
.cm-table > li { list-style: none; }
a.cm-runner { color: inherit; text-decoration: none; }
a.cm-runner:hover .cm-runner-name { color: var(--cm-red); }
.cm-runner-go { font-size: 22px; line-height: 1; color: var(--cm-rule-strong); text-align: right; }
a.cm-runner:hover .cm-runner-go { color: var(--cm-red); }
.cm-runner-kg { font-weight: 700; color: var(--cm-ink); }
.cm-table-note { margin-top: 12px; }
/* Son 6 yarış: TJK pist renkleri (çim yeşil, kum kahve, sentetik hardal), 1. altın çerçeve, yıl değişimi ince ayraç */
.cm-l6 { display: inline-flex; align-items: center; gap: 3px; }
.cm-l6 b { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 20px; border-radius: 4px; color: #fff; font: 700 11.5px/1 var(--cm-font); }
.cm-l6-cim { background: #2E8B3D; }
.cm-l6-kum { background: #A26B2C; }
.cm-l6 .cm-l6-sen { background: #D39B1E; color: var(--cm-ink); }
.cm-l6 b.is-win { box-shadow: 0 0 0 2px #E2B93B; }
.cm-l6-sep { width: 2px; height: 16px; margin: 0 2px; border-radius: 1px; background: var(--cm-rule-strong); }
.cm-l6-none { color: var(--cm-muted); }
/* Büyük gösterim (safkan sayfası): derece kutusu + altında zemin adı */
.cm-l6--big { align-items: flex-start; gap: 5px; }
.cm-l6-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cm-l6--big b { width: 32px; height: 32px; border-radius: 8px; font-size: 15px; letter-spacing: -.02em; }
.cm-l6--big b.is-win { box-shadow: 0 0 0 2.5px #E2B93B; }
.cm-l6-item small { font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--cm-ink-2); }
.cm-l6--big .cm-l6-sep { position: relative; height: 32px; margin: 0 12px; font-style: normal; }
.cm-l6--big .cm-l6-sep small { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--cm-muted); white-space: nowrap; }

/* Safkan sayfası — kırmızı bant: solda forma, ad, at bilgileri ve dönüş; sağda özet istatistikleri */
.cm-hh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 28px 48px; align-items: start; }
.cm-horsehead-row { display: flex; align-items: center; gap: 22px; }
.cm-horsehead-silk { position: relative; flex: none; width: 84px; height: 97px; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); overflow: hidden; }
.cm-horsehead-silk img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.cm-horsehead-silk b { position: absolute; right: 0; bottom: 0; min-width: 28px; padding: 0 6px; border-radius: 9px 0 0 0; background: var(--cm-ink); color: #fff; font: 800 16px/27px var(--cm-font); text-align: center; }
.cm-horsehead .cm-pagehead-title { margin-bottom: 6px; }
.cm-horsehead-meta { margin: 0; font-size: 17px; font-weight: 600; color: var(--cm-on-red); }
/* At bilgileri: kutusuz, bantta düz yazı; üç hizalı sütun, ayrım boşlukla */
.cm-hh-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; margin: 24px 0 22px; }
.cm-hh-info > div { min-width: 0; }
.cm-hh-info dt { margin: 0 0 2px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--cm-on-red-2); }
.cm-hh-info dd { margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.cm-hh-stats { padding: 16px 16px 12px; border-radius: 16px; background: #fff; color: var(--cm-ink); box-shadow: 0 12px 32px rgba(60, 0, 10, .22); }
.cm-hh-stats h2 { margin: 0 4px 8px; font-size: 16px; font-weight: 800; }
.cm-hh-stats table { width: 100%; border-collapse: separate; border-spacing: 0 2px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.cm-hh-stats th, .cm-hh-stats td { padding: 6px 5px; text-align: center; }
.cm-hh-stats thead th { padding-top: 0; padding-bottom: 3px; font-size: 12.5px; font-weight: 700; color: var(--cm-muted); }
.cm-hh-stats tbody th { text-align: left; font-weight: 800; white-space: nowrap; }
.cm-hh-stats tbody tr:nth-child(even) > * { background: var(--cm-paper); }
.cm-hh-stats tbody tr > :first-child { padding-left: 10px; border-radius: 8px 0 0 8px; }
.cm-hh-stats tbody tr > :last-child { padding-right: 10px; border-radius: 0 8px 8px 0; }
.cm-hh-stats .r { text-align: right; font-weight: 700; white-space: nowrap; }
.cm-hh-stats td.is-p1 { color: var(--cm-red); font-weight: 800; }
.cm-hh-stats tr.is-total > * { background: var(--cm-ink); color: #fff; font-weight: 800; }
.cm-hh-stats tr.is-total td.is-p1 { color: #fff; }

/* Safkan sayfası — özet kutuları, sekmeler, tablolar. Çizgi yok: beyaz kart, satırlar sırayla kâğıt zemin; etiket okunur, değer kalın. */
.cm-hd-top { background: var(--cm-paper); padding: 28px 0 72px; }
/* Kutular kırmızı bantta, at bilgilerinin altında: bilgilerden büyük, beyaz zeminli; sığmazsa alt satıra akar */
.cm-hd-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cm-hd-tile, .cm-hd-card, .cm-hd-empty { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(21, 16, 14, .05), 0 4px 14px rgba(21, 16, 14, .04); }
.cm-hd-tile { flex: 1 1 auto; min-width: 0; padding: 11px 14px 12px; border-radius: 12px; color: var(--cm-ink); }
.cm-hd-tile dt { margin: 0 0 3px; font-size: 12.5px; font-weight: 700; color: var(--cm-muted); white-space: nowrap; }
.cm-hd-tile dt small { font-size: 12px; font-weight: 600; }
.cm-hd-tile dd { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--cm-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-hd-tile dd small { font-size: 13px; font-weight: 700; color: var(--cm-muted); }
.cm-hd-tile--l6 { flex: 1 1 auto; padding-bottom: 9px; } /* ikramiye · stil · KGS sırasının altında tek başına: satırı doldurur */
.cm-hd-tile--l6 dd { font-size: inherit; }

.cm-hd-tabs { position: sticky; top: calc(var(--cm-header-h) + 8px); z-index: 6; display: flex; gap: 4px; padding: 6px; margin-bottom: 20px; border-radius: 14px; background: var(--cm-ink); overflow-x: auto; scrollbar-width: none; box-shadow: 0 8px 20px rgba(21, 16, 14, .16); }
.cm-hd-tabs::-webkit-scrollbar { display: none; }
.cm-hd-tabs button { flex: none; padding: 11px 18px; border: 0; border-radius: 10px; background: transparent; color: rgba(246, 242, 234, .8); font: 700 15.5px var(--cm-font); cursor: pointer; }
.cm-hd-tabs button small { margin-left: 5px; font-size: 13px; font-weight: 700; opacity: .75; }
.cm-hd-tabs button:hover:not([aria-selected="true"]) { background: rgba(246, 242, 234, .08); color: #fff; }
.cm-hd-tabs button[aria-selected="true"] { background: var(--cm-red); color: #fff; }
.cm-hd-panel[hidden] { display: none; }
.cm-hd-note { margin: 0 0 14px; font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--cm-ink-2); }
.cm-hd-empty { margin: 0; padding: 28px 24px; font-size: 16px; color: var(--cm-ink-2); }
.cm-hd-card { padding: 14px 16px; min-width: 0; }
.cm-hd-scroll { overflow-x: auto; }

/* Koşu ve idman tabloları */
.cm-hd-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--cm-ink); }
.cm-hd-tbl th, .cm-hd-tbl td { padding: 10px 7px; text-align: left; vertical-align: middle; }
.cm-hd-tbl thead th { padding-top: 6px; padding-bottom: 10px; font-size: 13px; font-weight: 800; color: var(--cm-ink-2); white-space: nowrap; vertical-align: bottom; }
.cm-hd-tbl tbody td { background: #fff; }
.cm-hd-tbl tbody tr:nth-child(odd) > td { background: var(--cm-paper); }
.cm-hd-tbl tbody tr > td:first-child { padding-left: 14px; border-radius: 10px 0 0 10px; }
.cm-hd-tbl tbody tr > td:last-child { padding-right: 14px; border-radius: 0 10px 10px 0; }
.cm-hd-tbl thead th:first-child { padding-left: 14px; }
.cm-hd-tbl thead th:last-child { padding-right: 14px; }
.cm-hd-tbl tbody tr:hover > td { background: var(--cm-paper-2); }
.cm-hd-tbl .c { text-align: center; }
.cm-hd-tbl .r { text-align: right; }
.cm-hd-tbl .nw { white-space: nowrap; }
.cm-hd-tbl .b { font-weight: 800; }
.cm-hd-nil { color: var(--cm-rule-strong); font-weight: 700; }
.cm-hd-place { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 8px; background: var(--cm-paper-2); font-size: 16px; font-weight: 800; }
.cm-hd-tbl tbody tr:nth-child(even) .cm-hd-place { background: var(--cm-paper); }
.cm-hd-place.is-win, .cm-hd-tbl tbody tr:nth-child(even) .cm-hd-place.is-win { background: var(--cm-red); color: #fff; }
.cm-hd-track { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 13px; font-weight: 800; line-height: 1.3; color: #fff; }
.cm-hd-track--cim { background: #2E8B3D; }
.cm-hd-track--kum { background: #A26B2C; }
.cm-hd-track--sen { background: #D39B1E; color: var(--cm-ink); }
.cm-hd-cond { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--cm-ink-2); }
.cm-hd-kind { display: inline-block; max-width: 104px; padding: 2px 7px; border-radius: 6px; background: var(--cm-ink); color: #fff; font-size: 12.5px; font-weight: 800; line-height: 1.35; }
.cm-hd-racename { min-width: 84px; }
.cm-hd-racename b { display: block; font-weight: 700; }
.cm-hd-raceno { display: block; font-size: 13.5px; font-weight: 600; color: var(--cm-ink-2); white-space: nowrap; }
.cm-hd-trackcell { min-width: 64px; }
.cm-hd-trackcell .cm-hd-track { white-space: nowrap; }
.cm-hd-owner { min-width: 104px; }
.cm-hd-tbl--idman .cm-hd-group { padding-bottom: 4px; color: var(--cm-ink); }
.cm-hd-tbl--idman thead tr + tr th { padding-top: 4px; font-size: 14px; color: var(--cm-ink); }
.cm-hd-split { min-width: 64px; }
.cm-hd-split b { font-size: 16px; font-weight: 800; }
.cm-hd-tbl--idman .cm-hd-split .cm-hd-nil { font-size: 18px; }

/* Kardeşleri: iki liste, her biri kendi başlığıyla */
.cm-hd-sibs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cm-hd-sibs .cm-hd-card { padding: 18px 18px 16px; }
.cm-hd-h3 { margin: 0 0 4px; font-size: 19px; font-weight: 800; }
.cm-hd-h3-sub { margin: 0 0 14px; font-size: 14.5px; font-weight: 600; line-height: 1.6; color: var(--cm-ink-2); }
.cm-hd-h3-sub b { font-weight: 800; color: var(--cm-ink); }
.cm-hd-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cm-hd-list li { display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 10px; border-radius: 12px; background: var(--cm-paper); }
.cm-hd-list li > div { flex: 1; min-width: 0; }
.cm-hd-list b { font-size: 16.5px; font-weight: 800; }
.cm-hd-list p { margin: 3px 0 0; font-size: 14.5px; font-weight: 500; color: var(--cm-ink-2); }
.cm-hd-rank { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 800; }
.cm-hd-amount { flex: none; text-align: right; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cm-hd-amount small { display: block; font-size: 12.5px; font-weight: 700; color: var(--cm-muted); }
.cm-hd-full { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--cm-red); color: #fff; font-size: 12px; font-weight: 800; line-height: 1.5; vertical-align: 1px; white-space: nowrap; }
.cm-hd-empty--in { padding: 12px 0 2px; background: none; box-shadow: none; }
.cm-table-head { padding: 0 14px 10px; }
.cm-runner { padding: 12px 14px; border-radius: 12px; transition: background-color .15s; }
.cm-table > li:nth-child(even) .cm-runner { background: var(--cm-paper); }
.cm-runner:hover, .cm-table > li:nth-child(even) .cm-runner:hover { background: var(--cm-paper-2); }
.cm-runner-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-runner-name { font-size: 18px; font-weight: 700; }
.cm-runner-sub { font-size: 14px; color: var(--cm-muted); }
.cm-runner-sub em { font-style: normal; font-weight: 600; color: var(--cm-ink); margin-left: 10px; }
.cm-runner-cell { font-size: 16px; color: var(--cm-ink-2); overflow-wrap: anywhere; }
.cm-empty { display: flex; align-items: center; gap: 32px; border-bottom: 1px solid var(--cm-rule); padding: 32px 0; }
.cm-empty-silks { display: flex; gap: 4px; flex: none; }
.cm-empty-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.cm-empty p:last-child { color: var(--cm-ink-2); margin: 0; max-width: 600px; }

/* Yorumcu tahminleri — solda en çok seçilenler (yorumcu sayısına oranlı çubuk), sağda yorumcu kartları; çizgi yok */
.cm-predbox { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.cm-pred-sum { position: sticky; top: calc(var(--cm-header-h) + 72px); padding: 20px 20px 18px; border-radius: 16px; background: var(--cm-ink); color: var(--cm-white); } /* kartlar kayarken özet görünür kalır (yapışkan koşu çubuğunun altında) */
.cm-pred-sum-title { margin: 0; font-size: 19px; font-weight: 800; }
.cm-pred-sum-sub { margin: 2px 0 14px; font-size: 14.5px; font-weight: 600; color: var(--cm-on-dark); }
.cm-pred-bars { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cm-pred-bars li { display: grid; grid-template-columns: 26px minmax(0, 9fr) minmax(0, 7fr) 40px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.cm-pred-bars li:nth-child(odd) { background: rgba(246, 242, 234, .07); }
.cm-pred-bar-name { font-size: 15.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-pred-bar { height: 10px; border-radius: 5px; background: rgba(246, 242, 234, .14); overflow: hidden; }
.cm-pred-bar i { display: block; height: 100%; border-radius: 5px; background: var(--cm-red); }
.cm-pred-bars li:first-child .cm-pred-bar i { background: #E2B93B; }
.cm-pred-bar-n { font-size: 16px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.cm-pred-bar-n small { font-size: 12.5px; font-weight: 600; color: var(--cm-on-dark); }
.cm-preds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cm-pred { min-width: 0; padding: 16px 16px 14px; border-radius: 16px; background: var(--cm-paper); }
.cm-pred-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cm-pred-photo { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--cm-paper-2); }
.cm-pred-photo--none { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: var(--cm-muted); }
.cm-pred-name { margin: 0 0 1px; font-size: 17px; font-weight: 800; line-height: 1.25; }
.cm-pred-role { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--cm-muted); }
.cm-pred-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cm-pred-list li { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 10px; background: #fff; font-size: 15.5px; font-weight: 700; }
.cm-pred-horse { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-pred-rank { flex: none; width: 22px; font-size: 14px; font-weight: 800; color: var(--cm-red); text-align: center; font-variant-numeric: tabular-nums; }
.cm-pred-note { margin: 12px 2px 0; font-size: 15px; line-height: 1.5; color: var(--cm-ink-2); }
.cm-pred-empty { margin: 0; padding: 20px 22px; border-radius: 12px; background: var(--cm-paper); color: var(--cm-ink-2); }

/* Son şampiyon + önceki kazananlar (panel içinde, iki sütun) */
/* Şampiyonlar — çizgi yok: son şampiyon koyu kartta, listeler sıra sıra kâğıt zeminli satırlar */
.cm-champ-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(20px, 3vw, 40px); align-items: start; }
.cm-champ-grid > * { min-width: 0; }
.cm-champ-grid > :first-child { padding: clamp(20px, 2.4vw, 30px); border-radius: 16px; background: var(--cm-ink); color: var(--cm-white); }
.cm-champ-kicker { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--cm-ink-2); }
.cm-champ-grid > :first-child .cm-champ-kicker { color: var(--cm-on-dark); }
.cm-champ-kicker-gap { margin-top: 24px; }
.cm-champ-name { font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 20px; overflow-wrap: anywhere; }
.cm-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
.cm-rows div { min-width: 0; }
.cm-rows div:last-child:nth-child(odd) { grid-column: 1 / -1; } /* tek kalan (çoğunlukla Not) tam satır */
.cm-rows dt { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--cm-muted); }
.cm-rows dd { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--cm-ink); }
.cm-rows dd small { font-size: 13.5px; font-weight: 600; color: var(--cm-muted); margin-left: 6px; }
.cm-champ-grid > :first-child .cm-rows dt, .cm-champ-grid > :first-child .cm-rows dd small { color: var(--cm-on-dark); }
.cm-champ-grid > :first-child .cm-rows dd { color: var(--cm-white); }
.cm-ev-roll, .cm-honours-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cm-ev-roll li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 14px; border-radius: 10px; font-size: 16px; }
.cm-ev-roll li:nth-child(odd), .cm-honours-list li:nth-child(odd) { background: var(--cm-paper); }
.cm-ev-roll-year { font-weight: 800; color: var(--cm-ink-2); }
.cm-ev-roll-name { font-weight: 700; }
.cm-ev-roll-meta { font-size: 14px; font-weight: 500; color: var(--cm-ink-2); text-align: right; }
.cm-champ-more { margin: 18px 0 0; font-size: 16px; }
.cm-champ-empty { color: var(--cm-ink-2); margin: 0; }

/* Söz (panelden açılır) */
.cm-quote-section { padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--cm-rule); }
.cm-quote { text-align: center; max-width: calc(820px + 2 * var(--cm-gutter)); }
.cm-quote blockquote { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; font-weight: 500; color: var(--cm-ink); }
.cm-quote figcaption { display: flex; justify-content: center; margin-top: 20px; }
.cm-quote img { width: 120px; filter: brightness(0); opacity: .8; }

/* ---------- Alt sayfa başlığı: ekmek kırıntısı + başlık + geri bağlantı ---------- */
.cm-pagehead { position: relative; overflow: hidden; background: var(--cm-red); color: var(--cm-white); padding: calc(var(--cm-header-h) + 48px) 0 44px; }
.cm-pagehead .cm-wrap { position: relative; z-index: 1; }
.cm-pagehead-art { position: absolute; z-index: 0; width: min(52vw, 760px); right: max(-8vw, -120px); top: 50%; transform: translateY(-46%); pointer-events: none; }
.cm-pagehead-art .cm-art-labels { display: none; }
.cm-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--cm-white); }
.cm-crumb a { color: var(--cm-on-red); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45); }
.cm-crumb a:hover { color: var(--cm-white); text-decoration-color: currentColor; }
.cm-crumb-sep { color: var(--cm-on-red-2); font-weight: 400; }
.cm-pagehead-title { font-size: var(--cm-fs-h1); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 12px; max-width: 760px; }
.cm-pagehead-lead { font-size: 18px; color: var(--cm-white); margin: 0; max-width: 600px; }
.cm-pagehead-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 16px; font-weight: 600; color: var(--cm-white); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .45); }
.cm-pagehead-back:hover { text-decoration-color: currentColor; }
@media (min-width: 2300px) { .cm-pagehead-art { right: calc((100% - var(--cm-wrap)) / 2 - 300px); } }
/* Alt sayfa gezinme: dört alt sayfa, bulunulan işaretli */
.cm-subnav { padding: 10px 0; border-bottom: 1px solid var(--cm-rule); background: var(--cm-paper); }
.cm-subnav-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.cm-subnav-label { font-size: 15px; font-weight: 600; color: var(--cm-muted); padding: 8px 12px 8px 0; }
.cm-subnav a { font-size: 16px; font-weight: 600; color: var(--cm-ink-2); text-decoration: none; padding: 8px 12px; border-radius: 4px; }
.cm-subnav a:hover { background: var(--cm-paper-2); color: var(--cm-ink); }
.cm-subnav a.is-active { background: var(--cm-ink); color: var(--cm-paper); }

/* ---------- Şampiyonlar (alt sayfa) ---------- */
.cm-honours { display: grid; grid-template-columns: 1fr 1fr; gap: 32px clamp(32px, 5vw, 72px); }
.cm-honours > div { min-width: 0; }
.cm-honours-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 14px; border-radius: 10px; }
.cm-honours-list strong { font-size: 17px; font-weight: 800; }
.cm-honours-list span { font-size: 15px; font-weight: 600; color: var(--cm-ink-2); text-align: right; }
.cm-honours-text { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--cm-paper); color: var(--cm-ink-2); font-weight: 600; line-height: 1.7; }
/* Yıllara göre: dönem rozetleri, on yıl başlığı + sayı rozeti, satırlar sırayla kâğıt zemin */
.cm-decades { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 28px; font-size: 15px; }
.cm-decades a { padding: 7px 15px; border-radius: 999px; background: var(--cm-paper); color: var(--cm-ink); font-weight: 700; text-decoration: none; transition: background-color .15s, color .15s; }
.cm-decades a:hover { background: var(--cm-ink); color: var(--cm-white); }
.cm-decades-label { margin-right: 4px; color: var(--cm-ink-2); font-weight: 700; }
.cm-decade + .cm-decade { margin-top: 36px; }
.cm-decade-title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 22px; font-weight: 800; }
.cm-decade-count { padding: 3px 11px; border-radius: 999px; background: var(--cm-paper-2); font-size: 13.5px; font-weight: 700; color: var(--cm-ink-2); }
.cm-honour-roll { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cm-honour-roll li { display: grid; grid-template-columns: 76px minmax(0, 1fr) 96px; gap: 18px; align-items: center; padding: 13px 18px; border-radius: 12px; transition: background-color .15s; }
.cm-honour-roll li:nth-child(odd) { background: var(--cm-paper); }
.cm-honour-roll li:hover { background: var(--cm-paper-2); }
.cm-roll-year { font-size: 19px; font-weight: 800; color: var(--cm-red); }
.cm-roll-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cm-roll-name { font-size: 18px; font-weight: 800; }
.cm-roll-meta { font-size: 15px; font-weight: 600; color: var(--cm-ink); }
.cm-roll-meta em { font-style: normal; font-weight: 500; color: var(--cm-muted); }
.cm-roll-note { font-size: 14px; font-weight: 500; color: var(--cm-ink-2); }
.cm-roll-time { text-align: right; font-size: 17px; font-weight: 800; }

/* ---------- Tarihçe (alt sayfa) ---------- */
.cm-timeline { margin-top: 28px; }
.cm-timeline li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; padding: 22px 0; border-top: 1px solid var(--cm-rule); }
.cm-timeline li:first-child { border-top-color: var(--cm-rule-strong); }
.cm-timeline-year { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--cm-ink); }
.cm-timeline-title { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.cm-timeline p { color: var(--cm-ink-2); margin: 0; max-width: 680px; }
.cm-prize-head { margin-top: clamp(40px, 5vw, 64px); }
.cm-bars li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 130px; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--cm-rule); }
.cm-bars-year { font-size: 16px; font-weight: 600; color: var(--cm-ink-2); }
.cm-bars-track { height: 8px; background: var(--cm-paper-2); border-radius: 2px; overflow: hidden; }
.cm-bars-fill { display: block; height: 100%; background: var(--cm-red); transform-origin: left; animation: cm-bar 1s var(--cm-ease) both; }
.cm-bars-value { text-align: right; font-size: 16px; font-weight: 600; }
@keyframes cm-bar { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- İstatistikler (alt sayfa) ---------- */
.cm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid var(--cm-ink); margin-bottom: clamp(40px, 5vw, 56px); }
.cm-stat { padding: 18px 0 20px; border-bottom: 1px solid var(--cm-rule); }
.cm-stat dt { font-size: 14px; color: var(--cm-muted); margin-bottom: 8px; }
.cm-stat dd { font-size: var(--cm-fs-num); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.cm-stat dd em { font-style: normal; font-size: .45em; font-weight: 600; margin-left: 4px; letter-spacing: 0; }
.cm-stat dd small { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--cm-ink-2); letter-spacing: 0; }
.cm-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 5vw, 72px); }
.cm-stat-grid > div { min-width: 0; }
.cm-stat-grid .cm-sub, .cm-honours .cm-sub { padding-bottom: 10px; border-bottom: 1px solid var(--cm-ink); margin-bottom: 2px; }
.cm-jockeys li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 18px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cm-rule); }
.cm-jockeys strong { font-size: 17px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.cm-jockey-bar { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 10px; }
.cm-jockey-bar i { display: block; height: 8px; background: var(--cm-paper-2); border-radius: 2px; overflow: hidden; }
.cm-jockey-bar i b { display: block; height: 100%; background: var(--cm-red); transform-origin: left; animation: cm-bar 1s var(--cm-ease) both; }
.cm-jockey-bar em { font-size: 15px; font-weight: 600; font-style: normal; text-align: right; white-space: nowrap; }
.cm-jockeys span { grid-column: 1 / -1; font-size: 14px; color: var(--cm-muted); }
.cm-fastest li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--cm-rule); }
.cm-fastest-pos { font-size: 14px; font-weight: 600; color: var(--cm-muted); }
.cm-fastest-name { font-size: 17px; font-weight: 600; }
.cm-fastest-name small { display: block; font-size: 14px; color: var(--cm-muted); font-weight: 400; }
.cm-fastest strong { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Hipodrom (alt sayfa) ---------- */
.cm-statbar { background: var(--cm-paper-2); border-bottom: 1px solid var(--cm-rule); }
.cm-statbar-row { display: flex; flex-wrap: wrap; gap: 18px 0; padding-top: 22px; padding-bottom: 24px; }
.cm-statbar-row div { padding: 0 clamp(18px, 2.6vw, 40px); border-left: 1px solid var(--cm-rule-strong); min-width: 0; }
.cm-statbar-row div:first-child { padding-left: 0; border-left: 0; }
.cm-statbar-row dt { font-size: 14px; color: var(--cm-muted); margin-bottom: 6px; }
.cm-statbar-row dd { font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm-statbar-row dd small { font-size: 14px; font-weight: 500; color: var(--cm-muted); margin-left: 6px; }
.cm-about { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.cm-about .cm-sec-head { grid-column: 1 / -1; }
.cm-about-text p:not(.cm-lead) { color: var(--cm-ink-2); }
.cm-about-text p:last-child { margin-bottom: 0; }
.cm-about-text .cm-links { margin-top: 20px; }
.cm-kunye { border-top: 1px solid var(--cm-rule-strong); }
.cm-kunye div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--cm-rule); }
.cm-kunye dt { font-size: 15px; color: var(--cm-muted); }
.cm-kunye dd { font-size: 16px; font-weight: 600; }
.cm-kunye dd small { display: block; font-size: 14px; font-weight: 400; color: var(--cm-muted); }
.cm-about-fine { grid-column: 1 / -1; margin-top: 0; }
.cm-duo { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(40px, 6vw, 96px); }
.cm-duo::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--cm-rule-strong); }
.cm-duo > * { min-width: 0; }
.cm-track-head { margin-bottom: 12px; }
.cm-track-head .cm-tag { margin-bottom: 10px; }
.cm-track-name { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.cm-track-dist { font-size: var(--cm-fs-num); font-weight: 800; letter-spacing: -.02em; line-height: 1; margin: 0; }
.cm-track-dist small { font-size: 16px; font-weight: 600; letter-spacing: 0; margin-left: 6px; }
.cm-track p { margin: 0; color: var(--cm-ink-2); }
.cm-track-pct { display: block; height: 8px; background: var(--cm-paper); border-radius: 2px; overflow: hidden; margin: 18px 0 8px; }
.cm-track-pct b { display: block; height: 100%; background: var(--cm-red); transform-origin: left; animation: cm-bar 1.1s var(--cm-ease) both; }
.cm-track-pct-label { font-size: 14px; color: var(--cm-muted); }

/* ---------- Footer ---------- */
.cm-footer { background: var(--cm-ink); color: var(--cm-white); }
.cm-footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; padding-top: 52px; padding-bottom: 52px; }
.cm-brand-footer { margin-bottom: 18px; }
.cm-brand-footer .cm-brand-mark { border-right-color: var(--cm-on-dark-rule); }
.cm-footer-text { color: var(--cm-on-dark); max-width: 460px; margin-bottom: 14px; font-size: 16px; }
.cm-footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 16px; }
.cm-footer-links a { color: var(--cm-paper); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cm-on-dark-rule); }
.cm-footer-links a:hover { text-decoration-color: currentColor; }
.cm-footer-label { font-size: 15px; color: var(--cm-on-dark); margin-bottom: 12px; }
.cm-footer-app { justify-self: end; }
.cm-footer-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.cm-footer-badges img { height: 40px; width: auto; }
.cm-footer-bar { border-top: 1px solid var(--cm-on-dark-rule); }
.cm-footer-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 20px; font-size: 14px; color: var(--cm-on-dark); }
.cm-footer-tay { display: inline-flex; align-items: center; gap: 16px; }
.cm-footer-tay-logo { display: inline-flex; flex: none; transition: opacity .2s; }
.cm-footer-tay-logo:hover { opacity: .8; }
.cm-footer-tay-logo img { height: 28px; width: auto; display: block; }
.cm-footer-bar nav { display: flex; flex-wrap: wrap; gap: 18px; }
.cm-footer-bar a { color: var(--cm-paper); font-weight: 600; text-decoration: none; }
.cm-footer-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Geniş tablet ---------- */
@media (max-width: 1180px) {
    .cm-board-inner { grid-template-columns: 1fr; gap: 18px; }
    .cm-ev-times { justify-content: flex-start; }
    .cm-ev-time:first-child { padding-left: 0; border-left: 0; }
    .cm-predbox { grid-template-columns: 1fr; }
    .cm-pred-sum { position: static; }
    .cm-preds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cm-hh-grid { grid-template-columns: 1fr; }
    .cm-hh-stats { max-width: 560px; }
}

/* ---------- Menü: 1100 px altında hamburger ---------- */
@media (max-width: 1100px) {
    .cm-nav, .cm-header-inner > .cm-nav-live { display: none; }
    .cm-burger { display: block; margin-left: auto; }
    .cm-mobile {
        display: flex; flex-direction: column;
        position: fixed; inset: var(--cm-header-h) 0 0; background: var(--cm-red);
        padding: 8px var(--cm-gutter) 32px; overflow-y: auto;
        transform: translateY(-8px); opacity: 0; visibility: hidden;
        transition: opacity .18s, transform .18s, visibility .18s;
    }
    .cm-header.is-open .cm-mobile { transform: none; opacity: 1; visibility: visible; }
    .cm-mobile-group { padding: 18px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cm-on-red-2); }
    .cm-mobile a {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 13px 0; border-bottom: 1px solid var(--cm-on-red-rule);
        font-size: 19px; font-weight: 700; color: var(--cm-white); text-decoration: none;
    }
    .cm-mobile a.is-active::after { content: 'Buradasınız'; font-size: 13px; font-weight: 600; color: var(--cm-on-red-2); }
    .cm-mobile .cm-mobile-live { margin-top: 20px; justify-content: center; border: 0; background: var(--cm-white); color: var(--cm-red); border-radius: 4px; padding: 14px; font-size: 17px; }
    .cm-mobile .cm-mobile-tay { border-bottom: 0; justify-content: center; font-size: 16px; font-weight: 600; color: var(--cm-on-red); }
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
    .cm-game-grid { grid-template-columns: 1fr; }
    .cm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cm-statbar-row div { padding: 0 20px; }
    .cm-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cm-champ-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Dar tablet: kayıt satırları iki sütuna katlanır ---------- */
@media (max-width: 960px) {
    .cm-table-head { display: none; }
    /* Satır karta döner: forma solda, ad + orijin üstte, diğerleri etiketli ve yan yana akar */
    .cm-runner, .cm-table--j .cm-runner { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 14px 32px 14px 70px; min-height: 76px; }
    .cm-runner > .cm-silk { position: absolute; left: 12px; top: 14px; }
    .cm-hd-sibs { grid-template-columns: 1fr; }
    .cm-hh-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cm-preds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cm-hd-tbl tbody tr > td:first-child { position: sticky; left: 0; z-index: 1; } /* yatay kaydırmada tarih sabit */
    .cm-runner-main { flex: 1 1 100%; margin-bottom: 2px; }
    .cm-runner-cell { font-size: 15px; display: inline-flex; align-items: center; }
    .cm-runner-cell::before { content: attr(data-label); display: inline; margin-right: 6px; font-size: 13.5px; color: var(--cm-muted); }
    .cm-runner-owner { flex: 1 1 100%; order: 7; }
    .cm-runner-main { order: -1; }
    .cm-runner-cell[data-label="Jokey"] { order: 5; }
    .cm-runner-cell[data-label="Son 6"] { flex: 1 1 100%; order: 6; }
    .cm-runner-go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
}

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
    :root { --cm-header-h: 62px; --cm-sec-pad: 48px; --cm-fs-body: 16px; }
    .cm-brand-mark svg { height: 26px; }
    .cm-brand-tay { height: 26px; }
    .cm-brand-name { font-size: 10.5px; }

    .cm-hero { min-height: 0; }
    .cm-hero-inner { padding-top: calc(var(--cm-header-h) + 36px); padding-bottom: 36px; }
    .cm-kicker { font-size: 16px; margin-bottom: 14px; }
    .cm-hero-title { margin-bottom: 18px; }
    .cm-hero-what { font-size: 16px; margin-bottom: 18px; }
    .cm-hero-game-text { font-size: 17px; }
    .cm-countdown div { padding: 0 14px; }
    .cm-ev-times { flex-direction: row; }
    .cm-ev-time { flex: 1 1 0; padding: 0 14px; }
    .cm-ev-time:first-child { padding-left: 0; border-left: 0; }
    .cm-ev-time-head { white-space: normal; min-height: 4.8em; }
    .cm-ev-cell { padding: 18px 14px 20px; }
    .cm-ev-cell .cm-board-label { min-height: 3.2em; }

    .cm-sec-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 24px; }
    .cm-sec-meta { text-align: left; max-width: none; }
    .cm-sub { flex-wrap: wrap; gap: 4px 12px; }
    .cm-sub small { white-space: normal; }
    .cm-tabs { gap: 0 10px; }
    .cm-tab { padding: 16px 14px 18px; }
    .cm-races-intro { margin-bottom: 22px; }
    .cm-panel { padding: 0 16px 24px; }
    .cm-race-bar { margin: 0 -16px 24px; padding: 10px 16px; }
    .cm-prize-partner { padding-left: 0; border-left: 0; }
    .cm-race-title { font-size: 26px; }
    .cm-race-meta { font-size: 15px; }
    .cm-facts { gap: 8px; margin-bottom: 32px; }
    .cm-facts dd { font-size: 18px; }
    .cm-facts dd small { display: block; margin-left: 0; }
    .cm-block { margin-top: 36px; }
    .cm-honours, .cm-stat-grid, .cm-about, .cm-duo { grid-template-columns: 1fr; }
    .cm-duo { gap: 32px; }
    .cm-duo::before { display: none; }
    .cm-duo > * + * { padding-top: 28px; border-top: 1px solid var(--cm-rule-strong); }
    .cm-timeline li { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
    .cm-rules div { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
    .cm-pagehead { padding: calc(var(--cm-header-h) + 32px) 0 32px; }
    .cm-pagehead-art { width: 120vw; right: -64vw; opacity: .35; }
    .cm-subnav { padding: 8px 0; }
    .cm-subnav a { font-size: 15px; padding: 8px 10px; }
    .cm-empty { flex-direction: column; align-items: flex-start; gap: 16px; }
    .cm-footer-grid { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 36px; }
    .cm-footer-app { justify-self: start; }
    .cm-footer-bar-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
    .cm-hero-title { font-size: clamp(30px, 8.6vw, 40px); }
    .cm-countdown span { font-size: 32px; }
    .cm-countdown div { flex-direction: column; gap: 4px; padding: 0 12px; }
    .cm-countdown small { font-size: 13px; }
    .cm-hero-actions .cm-btn { width: 100%; }
    .cm-ev-when { font-size: 24px; }
    .cm-ev-time-val { font-size: 22px; }
    .cm-ev-time-head { font-size: 14px; }
    .cm-ev-time-head small { font-size: 13px; }
    .cm-board-note { font-size: 14px; }
    .cm-tab-name { font-size: 17px; }
    .cm-tab-meta { font-size: 14px; }
    .cm-tab-time { font-size: 15px; }
    .cm-tab-state { width: 20px; height: 20px; }
    .cm-race-bar-switch { font-size: 14px; }
    .cm-runner, .cm-table--j .cm-runner { padding-left: 62px; gap: 6px 12px; }
    .cm-runner .cm-silk { width: 38px; }
    .cm-runner .cm-silk-img { width: 42px; }
    .cm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cm-facts div:first-child { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
    .cm-facts div:first-child dt { margin: 0; }
    .cm-facts div:first-child dd small { display: inline; margin-left: 8px; }
    .cm-horsehead-row { gap: 14px; }
    .cm-horsehead-silk { width: 62px; height: 72px; }
    .cm-horsehead-silk b { min-width: 24px; font-size: 14px; line-height: 23px; }
    .cm-horsehead-meta { font-size: 15.5px; }
    .cm-hh-info { gap: 12px 18px; margin: 18px 0 18px; }
    .cm-hh-info dd { font-size: 14.5px; }
    .cm-hh-stats { padding: 14px 10px 10px; }
    .cm-hh-stats table { font-size: 13.5px; }
    .cm-hh-stats th, .cm-hh-stats td { padding: 6px 3px; }
    .cm-hh-stats tbody tr > :first-child { padding-left: 8px; }
    .cm-hh-stats tbody tr > :last-child { padding-right: 8px; }
    .cm-hd-tile { flex-basis: 40%; padding: 10px 12px 11px; }
    .cm-hd-tile--kgs { flex: 0 0 auto; }
    .cm-hd-tile--l6 { flex: 1 1 auto; }
    .cm-hd-tabs { gap: 2px; padding: 5px; }
    .cm-hd-tabs button { padding: 10px 12px; font-size: 14.5px; }
    .cm-hd-tabs button small { margin-left: 3px; font-size: 12px; }
    .cm-hd-cond { white-space: nowrap; }
    .cm-hd-tile dd { font-size: 18px; }
    .cm-l6--big { gap: 4px; }
    .cm-l6--big b { width: 28px; height: 28px; font-size: 13.5px; border-radius: 7px; }
    .cm-l6--big .cm-l6-sep { height: 28px; margin: 0 10px; }
    .cm-l6--big .cm-l6-sep small { top: 32px; font-size: 10px; }
    .cm-l6-item small { font-size: 10.5px; }
    .cm-hd-card { padding: 14px; }
    .cm-hd-card.cm-hd-scroll { padding: 8px 6px; }
    .cm-hd-tbl { font-size: 14.5px; }
    .cm-hd-tbl th, .cm-hd-tbl td { padding: 9px 8px; }
    .cm-hd-tbl tbody tr > td:first-child, .cm-hd-tbl thead th:first-child { padding-left: 10px; }
    .cm-preds { grid-template-columns: 1fr; }
    .cm-pred-sum { padding: 16px 14px 14px; }
    .cm-pred-bars li { grid-template-columns: 26px minmax(0, 1fr) 64px 36px; gap: 8px; padding: 6px; }
    .cm-game-cta .cm-btn { width: 100%; }
    .cm-kunye div { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
    .cm-ev-roll li { grid-template-columns: 52px minmax(0, 1fr); padding: 10px 12px; }
    .cm-ev-roll-meta { grid-column: 2; text-align: left; }
    .cm-ev-roll-meta:empty { display: none; }
    .cm-honour-roll li { grid-template-columns: 52px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 12px 12px; }
    .cm-roll-year { font-size: 16px; }
    .cm-roll-time { grid-column: 2; text-align: left; font-size: 15px; color: var(--cm-ink-2); }
    .cm-rows { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
    .cm-roll-time:empty { display: none; }
    .cm-bars li { grid-template-columns: 48px minmax(0, 1fr) 104px; gap: 12px; }
    .cm-bars-value { font-size: 15px; }
    .cm-stats { grid-template-columns: 1fr 1fr; gap: 0 16px; }
    .cm-stat dd { font-size: 28px; }
    .cm-statbar-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
    .cm-statbar-row div { padding: 0 14px; }
    .cm-statbar-row div:nth-child(odd) { padding-left: 0; border-left: 0; }
    .cm-statbar-row dd { font-size: 22px; white-space: normal; }
    .cm-jockeys li { grid-template-columns: 1fr; gap: 6px; }
    .cm-quote blockquote { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .cm-art .ln, .cm-art .ln.dash, .cm-art-ticks path, .cm-art-labels text, .cm-art-emblem path { animation: none; stroke-dashoffset: 0; opacity: 1; }
    .cm-panel, .cm-bars-fill, .cm-jockey-bar i b, .cm-track-pct b { animation: none; }
    .cm-tab { transition: none; }
    .cm-header, .cm-mobile, .cm-btn, .cm-nav-link::after, .cm-runner, .cm-honour-roll li, .cm-tab, .cm-ev-time-val, .cm-ev-when, .cm-link, .cm-badges a, .cm-decades a { transition: none; }
}

/* ============================================================
   Kuş bakışı pist haritası (_pist.php) + "Mesafe" kutusundaki pist simgesi ve açılır pencere
   ============================================================ */
.cm-pist { margin: 0; }
.cm-pist-svg { display: block; width: 100%; height: auto; }
.cm-pist-infield { fill: #eef4ea; }
.cm-pist-cim { fill: none; stroke: #2E8B3D; stroke-opacity: .28; }
.cm-pist-kum { fill: none; stroke: #A26B2C; stroke-opacity: .55; }
.cm-pist-run { fill: none; stroke: #2E8B3D; stroke-linejoin: round; }
.cm-pist-arrow { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cm-pist-finish-w { stroke: #fff; stroke-width: 2.6; }
.cm-pist-finish-k { stroke: var(--cm-ink); stroke-width: 2.6; stroke-dasharray: 1.6 1.6; }
.cm-pist-post { stroke: var(--cm-red); stroke-width: 2; }
.cm-pist-post-dot { fill: var(--cm-red); }
.cm-pist-start { fill: var(--cm-ink); stroke: #fff; stroke-width: 1.8; }
.cm-pist-start-line { stroke: var(--cm-ink); stroke-width: 1.2; }
.cm-pist-label { font: 800 10px var(--cm-font); fill: var(--cm-ink); }
.cm-pist-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--cm-ink-2); }
.cm-pist-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cm-pist-key { display: inline-block; width: 20px; height: 7px; border-radius: 4px; }
.cm-pist-key--run { background: #2E8B3D; }
.cm-pist-key--cim { background: rgba(46, 139, 61, .3); }
.cm-pist-key--kum { background: rgba(162, 107, 44, .55); }
.cm-pist-key--start { width: 11px; height: 11px; border-radius: 50%; background: var(--cm-ink); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(21, 16, 14, .2); }
.cm-pist-key--finish { width: 4px; height: 14px; border-radius: 2px; background: var(--cm-red); }
/* Mesafe kutusu: sağ üstte belirgin pist simgesi, kutunun tamamı dokunulabilir */
.cm-facts div.cm-fact-pist { position: relative; padding-right: 64px; }
.cm-pist-open { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--cm-ink); font: 800 11.5px/1 var(--cm-font); cursor: pointer; transition: background-color .15s; }
/* Düğme kutunun tamamını kaplar ama zemini hep saydam: üzerine gelince kutunun kendisi koyulaşır, yazı örtülmez */
.cm-facts div.cm-fact-pist { transition: background-color .15s; }
.cm-facts div.cm-fact-pist:hover { background: var(--cm-paper-2); }
.cm-pist-open:focus-visible { outline: 2px solid var(--cm-red); outline-offset: 2px; }
.cm-pist-icon { width: 40px; height: 24px; }
.cm-pist-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 22px 22px 20px; border: 0; border-radius: 20px; background: #fff; color: var(--cm-ink); box-shadow: 0 24px 60px rgba(21, 16, 14, .3); }
.cm-pist-dialog::backdrop { background: rgba(21, 16, 14, .55); }
.cm-pist-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.cm-pist-dialog-kicker { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--cm-muted); }
.cm-pist-dialog-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; }
.cm-pist-dialog-meta { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--cm-ink-2); }
.cm-pist-close { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--cm-paper); color: var(--cm-ink); font: 400 26px/1 var(--cm-font); cursor: pointer; }
.cm-pist-close:hover { background: var(--cm-paper-2); }
/* Üzerine gelince küçük önizleme (fareli cihazlar), doğrudan Mesafe kutusunun üstünde; tıklayınca pencere açılır */
.cm-pist-peek { position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 10px); width: 300px; padding: 12px 12px 10px; border-radius: 14px; background: #fff; box-shadow: 0 14px 36px rgba(21, 16, 14, .22); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 6px); transition: opacity .16s, transform .16s, visibility .16s; }
.cm-pist-peek::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: #fff; transform: rotate(45deg); }
.cm-pist-peek-hint { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--cm-muted); text-align: center; }
@media (hover: hover) and (pointer: fine) {
    .cm-fact-pist:hover .cm-pist-peek, .cm-pist-open:focus-visible + .cm-pist-peek { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}
/* Hipodrom sayfası: kartlardaki harita */
.cm-track .cm-pist { margin-top: 16px; }
@media (max-width: 560px) {
    .cm-brand-tay { height: 24px; padding-right: 9px; }
    .cm-brand-mark svg { height: 24px; }
    .cm-pist-dialog { padding: 18px 14px 16px; }
    .cm-pist-legend { font-size: 12.5px; gap: 5px 12px; }
    .cm-pist-label { font-size: 14px; } /* harita dar ekranda küçülür; yazı okunur kalsın */
}

/* ============================================================
   Yarış stili (_stil.php): üç yuvarlak koşu yönünde (geride · ön grupta · önde), arkada ince pist çizgisi ve
   sağ uçta kırmızı bitiş direği. Yuvarlak, o stilin oranı kadar alttan dolar (--p); en sık stil kırmızı.
   ============================================================ */
.cm-stil { --d: 13px; position: relative; display: inline-flex; align-items: flex-start; gap: 7px; padding-right: 9px; vertical-align: middle; }
.cm-stil::before { content: ''; position: absolute; left: 0; right: 2px; top: calc(var(--d) / 2 - 1px); height: 2px; border-radius: 1px; background: linear-gradient(to right, rgba(21, 16, 14, 0), rgba(21, 16, 14, .16) 10px); }
.cm-stil::after { content: ''; position: absolute; right: 0; top: calc(var(--d) / 2 - 6px); width: 2.5px; height: 12px; border-radius: 1px; background: var(--cm-red); }
.cm-stil-item { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.cm-stil-dot { --c: #8a7f77; display: block; width: var(--d); height: var(--d); box-sizing: border-box; border: 1.5px solid var(--c); border-radius: 50%; background: linear-gradient(to top, var(--c) var(--p), #fff var(--p)); }
.cm-stil-item.is-top .cm-stil-dot { --c: var(--cm-red); }
.cm-stil--big { --d: 24px; gap: 14px; padding-right: 12px; }
.cm-stil--big .cm-stil-dot { border-width: 2px; }
.cm-stil-name { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--cm-muted); white-space: nowrap; }
.cm-stil-item.is-top .cm-stil-name { font-weight: 800; color: var(--cm-ink); }
.cm-stil-none { color: var(--cm-muted); }
.cm-hd-tile--stil { flex: 0 1 auto; }
.cm-hd-tile--stil dd { font-size: inherit; padding-top: 3px; }
/* Safkan sayfası: toplam ve yıl ikramiyesi tek kutuda */
.cm-hd-tile--prize dd { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 2px 14px; font-size: 18px; }
.cm-hd-tile--prize dd span { font-size: 13px; font-weight: 700; color: var(--cm-muted); align-self: center; }

/* Yapay zeka tahmini kartı (kullanıcı 27.10: renkler kötüydü): yorumcu kartlarıyla aynı kâğıt zemin, ince kırmızı
   çerçeve, mürekkep rozet + kırmızı ışıltı; sıra panelden */
.cm-pred--ai { background: var(--cm-white); box-shadow: inset 0 0 0 1.5px rgba(200, 16, 46, .28); }
.cm-pred--ai .cm-pred-name { color: var(--cm-ink); }
.cm-pred--ai .cm-pred-role { color: var(--cm-muted); }
.cm-pred--ai .cm-pred-list li { background: var(--cm-paper); }
.cm-pred--ai .cm-pred-note { color: var(--cm-ink-2); }
.cm-pred-photo--ai { display: inline-flex; align-items: center; justify-content: center; background: var(--cm-ink); }
.cm-pred-photo--ai svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Safkan sayfası: yapay zeka yorumu (yalnız panelde yazılmışsa) */
.cm-hd-ai { margin: 0 0 22px; padding: 18px 22px 16px; border-radius: 16px; background: var(--cm-ink); color: var(--cm-white); }
.cm-hd-ai-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 4px 12px 4px 6px; border-radius: 999px; background: rgba(246, 242, 234, .1); font-size: 13px; font-weight: 800; }
.cm-hd-ai-badge svg { width: 18px; height: 18px; fill: #E2B93B; }
.cm-hd-ai-text { margin: 0 0 8px; font-size: 16.5px; line-height: 1.6; }
.cm-hd-ai-fine { margin: 8px 0 0; font-size: 12.5px; color: var(--cm-on-dark); }
@media (max-width: 560px) {
    .cm-stil--big { --d: 22px; gap: 10px; }
    /* ikramiye tam satır, iki tutar yan yana; altında stil + KGS, en altta son 6 */
    .cm-hd-tile--prize { flex: 1 1 100%; }
    .cm-hd-tile--prize dd { grid-template-columns: repeat(4, auto); align-items: baseline; gap: 0 7px; font-size: 17px; }
    .cm-hd-tile--prize dd span:nth-of-type(2) { margin-left: 12px; }
    .cm-hd-ai { padding: 16px; }
    .cm-hd-ai-text { font-size: 15.5px; }
}

/* ═════════ Durum · sonuç · Kazananı Bil durumu · yarış günü (kullanıcı 27.10) ═════════ */
/* Hero: ertelendi / iptal uyarıları */
.cm-hero-alerts { display: grid; gap: 10px; max-width: 640px; margin-top: 24px; }
.cm-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--cm-white); color: var(--cm-ink); text-decoration: none; }
.cm-alert-tag { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1.3; letter-spacing: .01em; background: #fde68a; color: #6b4300; }
.cm-alert--cancelled .cm-alert-tag { background: var(--cm-ink); color: var(--cm-white); }
.cm-alert-text { font-size: 15.5px; line-height: 1.45; color: var(--cm-ink-2); }
.cm-alert-text b { color: var(--cm-ink); }
.cm-panel-alert { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 24px; padding: 18px 20px; border-radius: 14px; background: #fff7e0; }
.cm-panel-alert.cm-alert--cancelled { background: var(--cm-paper-2); }
.cm-panel-alert p { margin: 0; font-size: 16.5px; line-height: 1.5; font-weight: 600; color: var(--cm-ink); }
.cm-ev-time-flag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--cm-white); color: var(--cm-red); font-size: 15px; font-weight: 800; text-decoration: none; }
.cm-board-status { margin: 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; letter-spacing: -.01em; }
/* Sekme rozeti */
.cm-tab-flag { align-self: flex-start; margin: 4px 0 2px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.cm-tab-flag--warn { background: #fde68a; color: #6b4300; }
.cm-tab-flag--done { background: rgba(255, 255, 255, .18); color: var(--cm-white); }
.cm-tab[aria-selected="true"] .cm-tab-flag--done { background: var(--cm-red); color: var(--cm-white); }

/* Yarış günü: hero altı canlı bant + hero düğmesi */
.cm-live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: cm-live 1.6s ease-in-out infinite; }
@keyframes cm-live { 50% { opacity: .35; } }
.cm-btn-live { background: var(--cm-ink); color: var(--cm-white); border-color: var(--cm-ink); }
.cm-btn-live:hover { background: #000; }
.cm-btn-live .cm-live-dot { color: #ff4d5e; }
.cm-raceday { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px var(--cm-gutter); background: var(--cm-ink); color: var(--cm-white); font-size: 16px; text-decoration: none; }
.cm-raceday .cm-live-dot { color: #ff4d5e; }
.cm-raceday b { font-weight: 800; }
.cm-raceday-go { margin-left: auto; font-weight: 800; color: #ff8a96; }
.cm-raceday:hover .cm-raceday-go { color: var(--cm-white); }
@media (min-width: 1240px) { .cm-raceday { padding-left: calc((100vw - var(--cm-wrap)) / 2); padding-right: calc((100vw - var(--cm-wrap)) / 2); } }

/* Kazananı Bil durumu (oyun bölümü, koşu paneli, sıradaki koşu kartı) */
.cm-gstate { display: inline-flex; align-items: baseline; gap: 10px; }
.cm-gstate-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #9aa0a6; transform: translateY(-1px); }
.cm-gstate--open .cm-gstate-dot { background: #22a559; }
.cm-gstate--technical .cm-gstate-dot { background: #f2a516; }
.cm-gstate--finished .cm-gstate-dot { background: var(--cm-red); }
.cm-gstate-text { font-size: 16px; line-height: 1.45; }
.cm-gstate-text b { font-weight: 800; }
.cm-gstate-note { display: block; font-size: 14.5px; opacity: .85; }
.cm-gstate-cd { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-game-states { display: grid; gap: 8px; margin: 0 0 22px; max-width: 580px; }
.cm-game-state { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 16px; padding: 12px 16px; border-radius: 12px; background: rgba(246, 242, 234, .07); }
.cm-game-state-race { font-size: 15px; font-weight: 700; color: var(--cm-on-dark); }
.cm-game .cm-gstate-text { color: var(--cm-paper); }
.cm-game .cm-gstate--technical { padding: 0; }
.cm-race-game { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: var(--cm-paper); }
.cm-race-game-label { font-size: 14px; font-weight: 800; color: var(--cm-red); }
.cm-race-game .cm-gstate--technical { color: #7a4b00; }

/* Sonuçlar bölümü: önce biten koşu, sonra sıradaki */
.cm-results { padding: clamp(40px, 5vw, 64px) 0; background: var(--cm-paper); }
.cm-results-label { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--cm-red); }
.cm-results-title { margin: 0 0 24px; font-size: var(--cm-fs-h2); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.cm-results-list { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.cm-res { padding: clamp(20px, 2.4vw, 28px); border-radius: 20px; background: var(--cm-white); }
.cm-res--feature { background: var(--cm-ink); color: var(--cm-paper); }
.cm-res-head { margin-bottom: 18px; }
.cm-res-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; font-size: 14.5px; font-weight: 600; color: var(--cm-muted); }
.cm-res--feature .cm-res-kicker { color: var(--cm-on-dark); }
.cm-res-done { padding: 3px 10px; border-radius: 999px; background: var(--cm-red); color: var(--cm-white); font-size: 13px; font-weight: 800; }
.cm-res-race { margin: 0; font-size: clamp(19px, 1.7vw, 23px); font-weight: 800; letter-spacing: -.01em; }
.cm-res-winner { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); }
.cm-silk-xl { width: 92px; height: 92px; }
span.cm-silk-xl.cm-silk-img { width: 84px; height: auto; border-radius: 10px; }
.cm-silk-xl.cm-silk-img b { min-width: 28px; font-size: 16px; line-height: 26px; border-radius: 9px 0 9px 0; }
.cm-res-winner-text { min-width: 0; }
.cm-res-place { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .02em; color: #e2b93b; }
.cm-res:not(.cm-res--feature) .cm-res-place { color: var(--cm-red); }
.cm-res-name { margin: 2px 0 8px; font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.02; letter-spacing: -.025em; overflow-wrap: anywhere; }
.cm-res-people { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.cm-res-people div { display: flex; gap: 6px; font-size: 15px; }
.cm-res-people dt { font-weight: 600; opacity: .7; }
.cm-res-people dd { margin: 0; font-weight: 700; }
.cm-res-note { margin: 8px 0 0; font-size: 15px; font-weight: 600; opacity: .85; }
.cm-res-top { display: grid; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; }
.cm-res-top li { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--cm-paper); font-size: 15.5px; font-weight: 700; }
.cm-res--feature .cm-res-top li { background: rgba(246, 242, 234, .08); }
.cm-res-pos { flex: none; width: 24px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cm-red); }
.cm-res--feature .cm-res-pos { color: #e2b93b; }
.cm-res-top-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-res-top-j { margin-left: auto; font-size: 13.5px; font-weight: 600; opacity: .7; white-space: nowrap; }
.cm-res-game { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--cm-paper); font-size: 15px; line-height: 1.5; color: var(--cm-ink-2); }
.cm-res--feature .cm-res-game { background: rgba(200, 16, 46, .22); color: var(--cm-paper); }
.cm-next { padding: clamp(20px, 2.4vw, 28px); border-radius: 20px; background: var(--cm-white); }
.cm-next-kicker { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: var(--cm-red); }
.cm-next-race { margin: 0 0 14px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 800; }
.cm-next-time { margin: 0; font-size: clamp(34px, 3.4vw, 48px); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cm-next-time span { font-size: 15px; font-weight: 600; color: var(--cm-muted); letter-spacing: 0; }
.cm-next-cd { margin: 8px 0 16px; font-size: 16px; color: var(--cm-ink-2); }
.cm-next-cd b { font-weight: 800; font-variant-numeric: tabular-nums; }
.cm-next-note { margin: 0 0 16px; font-size: 16px; line-height: 1.5; font-weight: 600; }
.cm-next .cm-gstate { padding: 12px 14px; border-radius: 12px; background: var(--cm-paper); width: 100%; box-sizing: border-box; }
.cm-next-go { display: inline-block; margin-top: 14px; font-size: 15.5px; font-weight: 700; color: var(--cm-red); text-decoration: none; }
.cm-next-go:hover { text-decoration: underline; }
.cm-panel .cm-res { background: var(--cm-paper); }
.cm-panel .cm-res .cm-res-top li, .cm-panel .cm-res .cm-res-game { background: var(--cm-white); }

/* Yorumcu tahminleri: yatay şerit (sayfa aşağı uzamasın) */
.cm-preds-wrap { position: relative; display: flex; flex-direction: column; min-width: 0; }
.cm-pred-bars li[hidden] { display: none; }
.cm-preds { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 290px); grid-template-columns: none; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px; }
.cm-preds > .cm-pred { scroll-snap-align: start; }
.cm-preds-nav { display: none; order: 2; align-self: flex-end; gap: 6px; margin-top: 10px; }
.cm-preds-wrap.is-scrollable .cm-preds-nav { display: flex; }
.cm-preds-btn { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--cm-paper-2); color: var(--cm-ink); font: 700 22px/1 var(--cm-font); cursor: pointer; }
.cm-preds-btn:hover { background: var(--cm-ink); color: var(--cm-white); }
.cm-preds-wrap.at-start [data-preds-step="-1"], .cm-preds-wrap.at-end [data-preds-step="1"] { opacity: .35; pointer-events: none; }
.cm-predbox { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.cm-pred-all { margin-top: 10px; padding: 8px 12px; border: 0; border-radius: 8px; background: rgba(246, 242, 234, .1); color: var(--cm-paper); font: 700 14px var(--cm-font); cursor: pointer; }
.cm-pred-all:hover { background: rgba(246, 242, 234, .18); }

@media (max-width: 1080px) {
    .cm-preds { grid-template-columns: none; }
}
@media (max-width: 900px) {
    .cm-results-list { grid-template-columns: 1fr; }
    .cm-predbox { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .cm-preds { grid-auto-columns: 82%; }
    .cm-game-state { grid-template-columns: 1fr; }
    .cm-res-winner { align-items: flex-start; }
    .cm-silk-xl { width: 64px; height: 64px; }
    span.cm-silk-xl.cm-silk-img { width: 60px; }
    .cm-res-top-j { display: none; }
    .cm-raceday-go { margin-left: 0; }
}

/* Not 3 satır + "Devamını gör"; kartlar uzun nota göre uzamasın; gayri resmi / resmi rozeti (kullanıcı 27.10) */
.cm-preds { align-items: start; }
.cm-pred-notebox { margin-top: 12px; }
.cm-pred-notebox .cm-pred-note { margin: 0 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cm-pred-notebox.is-open .cm-pred-note { display: block; -webkit-line-clamp: unset; overflow: visible; }
.cm-pred-more-btn { margin: 6px 2px 0; padding: 0; border: 0; background: none; color: var(--cm-red); font: 700 14px var(--cm-font); cursor: pointer; }
.cm-pred-more-btn:hover { text-decoration: underline; }
.cm-res-done { background: #f2b33d; color: #3d2600; }
.cm-res-done.is-official { background: #1f8a4c; color: var(--cm-white); }
.cm-res-unofficial { margin: 16px 0 0; font-size: 14.5px; font-weight: 700; color: #b77400; }
.cm-res--feature .cm-res-unofficial { color: #f2b33d; }