/* Kulvar v5.1 — ana sayfa: K14 haftalık ızgara açılışı + A6 kulüp panosu */

/* ================================================================== açılış: başlık satırı */
.wh { padding: 0; position: relative; background: linear-gradient(180deg, var(--mist) 0, #fff 260px); }
/* tek satır künye; sağda ızgaranın köşesine bağlı pist hücresi */
.wh-k { display: flex; align-items: center; gap: 12px 28px; min-height: 92px; padding: 18px 290px 18px 2px; font-size: 14.5px; }
.wh-p { margin: 0; color: var(--ink3); line-height: 1.5; }
.wh-k .ul { flex: none; font-size: 14.5px; }
.wh-ph { position: absolute; right: 22px; bottom: 100%; margin: 0; width: 256px; height: 74px; display: flex; background: var(--ink); color: #fff; border-radius: 8px 8px 0 0; overflow: hidden; }
.wh-ph .im { width: 104px; height: 100%; flex: none; object-position: 47% 52%; }
.wh-pc { display: grid; align-content: center; gap: 2px; padding: 0 14px; }
.wh-pc span { font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.wh-pc b { font: 600 24px/1 var(--fd); font-variant-numeric: tabular-nums; color: var(--volt); }
.wh-pc small { font-size: 11.5px; color: rgba(255, 255, 255, .72); line-height: 1.25; }
.wt-h { margin: 0; padding-right: 16px; border-right: 1px solid rgba(255, 255, 255, .12); font: 600 24px/1 var(--fd); text-transform: uppercase; letter-spacing: .01em; color: #fff; white-space: nowrap; }

/* ================================================================== ızgara panosu */
.wb { --ax: 74px; --cw: 0px; position: relative; background: #fff; border-radius: 12px; box-shadow: 0 50px 90px -40px rgba(14, 15, 18, .38), 0 18px 36px -20px rgba(255, 77, 31, .18), 0 1px 3px rgba(14, 15, 18, .08); }
/* araç çubuğu (koyu konsolun üst satırı) */
.wt { background: var(--ink); color: #fff; border-radius: 12px 12px 0 0; padding: 14px 18px; display: flex; align-items: center; gap: 12px 12px; flex-wrap: wrap; position: relative; z-index: 6; }
.wt fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: 2px; min-width: 0; }
.wt label { position: relative; }
.wt input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.wt-goal span, .wt-lv span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 11px; border-radius: 4px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .66); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.wt-goal .ic { width: 16px; height: 16px; stroke-width: 1.7; }
.wt-goal span { gap: 7px; padding: 0 9px; }
@media (max-width: 1500px) { .wt { gap: 10px; } .wt-goal span { padding: 0 8px; } .wt-lv span { padding: 0 9px; } .wt-h { padding-right: 12px; } }
.wt label:hover span { color: #fff; background: rgba(255, 255, 255, .06); }
.wt-goal input:checked + span { background: #fff; color: var(--ink); }
.wt-lv { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); border-radius: 4px; padding: 3px !important; }
.wt-lv span { height: 34px; padding: 0 12px; }
.wt-lv input:checked + span { background: rgba(255, 255, 255, .16); color: #fff; }
.wt input:focus-visible + span { outline: 2px solid var(--volt); outline-offset: 2px; }
.wt-n { display: inline-flex; align-items: center; gap: 8px; }
.wt-n button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); background: none; color: #fff; border-radius: 4px; }
.wt-n button:hover { border-color: #fff; }
.wt-n .ic { width: 15px; height: 15px; }
.wt-n output { font: 600 28px/1 var(--fd); min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.wt-n span { font-size: 13.5px; color: rgba(255, 255, 255, .6); }
.wt-more { position: relative; }
.wt-mb { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; border-radius: 4px; background: none; color: rgba(255, 255, 255, .72); font-size: 14px; font-weight: 500; }
.wt-mb:hover, .wt-mb[aria-expanded=true] { color: #fff; background: rgba(255, 255, 255, .08); }
.wt-mb .ic { width: 16px; height: 16px; }
@media (max-width: 1560px) { .wt-mb span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wt-mb { width: 40px; justify-content: center; padding: 0; } }
.wt-pop { position: absolute; top: calc(100% + 10px); left: 0; width: 400px; max-width: calc(100vw - 32px); background: #17191E; border-radius: 8px; padding: 20px 20px 16px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); z-index: 20; animation: pop .12s var(--ease); }
.wt-pop .hb-g legend { font-size: 17px; }
.wt-pn { font-size: 12.5px; color: rgba(255, 255, 255, .55); margin: 4px 0 0; }
.wt-go { margin-left: auto; min-height: 44px; box-shadow: none; }

/* ızgara: konsol satırı + gün başlıkları + saat gövdesi (mobilde birlikte yatay kayar) */
.wg-sc { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.wg { min-width: calc(var(--ax) + 7 * var(--cw)); position: relative; }
.wc { display: grid; grid-template-columns: var(--ax) minmax(0, 1fr); height: 108px; background: var(--ink); color: #fff; border-top: 1px solid rgba(255, 255, 255, .07); }
.wc canvas { grid-column: 2; grid-row: 1; width: 100%; height: 100%; display: block; }
.wc-r { grid-column: 1; grid-row: 1; position: sticky; left: 0; z-index: 2; background: var(--ink); margin: 0; padding: 14px 0 0 18px; display: grid; align-content: start; gap: 3px; }
.wc-r small { font-size: 11px; color: rgba(255, 255, 255, .5); line-height: 1.2; }
.wc-r b { font: 600 30px/1 var(--fd); font-variant-numeric: tabular-nums; color: #fff; }
.wc-r span { font-size: 10.5px; color: rgba(255, 255, 255, .5); }
.wc-r em { font-style: normal; font-size: 10.5px; color: var(--acc); line-height: 1.25; }
.wg-hd { display: grid; grid-template-columns: repeat(7, minmax(var(--cw), 1fr)); margin-left: var(--ax); background: var(--ink); position: relative; }
.wg-hd::before { content: ''; position: absolute; right: 100%; top: 0; bottom: 0; width: var(--ax); background: var(--ink); }
.wd-h { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; row-gap: 5px; padding: 12px 14px 13px; color: #fff; text-decoration: none; border-left: 1px solid rgba(255, 255, 255, .08); position: relative; min-width: 0; transition: background .15s; }
.wd-h:hover { background: rgba(255, 255, 255, .05); }
.wd-h b { font-weight: 600; font-size: 15px; }
.wd-h span { font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.wd-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-h small { grid-column: 1 / -1; font-size: 12.5px; color: rgba(255, 255, 255, .78); display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 18px; }
.wd-h small i { width: 8px; height: 8px; flex: none; background: var(--acc); }
.wd-h small i.z1 { background: var(--z1); } .wd-h small i.z2 { background: var(--z2); } .wd-h small i.z3 { background: var(--z3); } .wd-h small i.z4 { background: var(--z4); } .wd-h small i.z5 { background: var(--z5); }
.wd-h small i.rest { background: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.wd-h.rest small { color: rgba(255, 255, 255, .5); }
.wd-h.today { background: rgba(255, 255, 255, .06); }
.wd-h.today::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--volt); }
.wd-h.today span { color: var(--volt); }

.wg-bd { --ph: 60px; --brk: 34px; --A: calc(7.5 * var(--ph)); position: relative; display: grid; grid-template-columns: var(--ax) repeat(7, minmax(var(--cw), 1fr)); height: calc(13 * var(--ph) + var(--brk)); background:
  repeating-linear-gradient(180deg, rgba(14, 15, 18, .07) 0 1px, transparent 1px var(--ph)) 0 0 / 100% var(--A) no-repeat,
  linear-gradient(var(--mist) 0 0) 0 var(--A) / 100% var(--brk) no-repeat,
  repeating-linear-gradient(180deg, transparent 0 calc(var(--ph) / 2), rgba(14, 15, 18, .07) calc(var(--ph) / 2) calc(var(--ph) / 2 + 1px), transparent calc(var(--ph) / 2 + 1px) var(--ph)) 0 calc(var(--A) + var(--brk)) / 100% calc(5.5 * var(--ph)) no-repeat; }
.wg-ax { order: -1; position: sticky; left: 0; z-index: 6; background: #fff; box-shadow: 1px 0 0 var(--line); }
.wg-ax span { position: absolute; right: 12px; top: calc(var(--o) * (var(--A) + var(--brk)) + var(--m) * var(--ph) / 60); transform: translateY(3px); font: 500 12px/1 var(--fd); color: var(--mute); font-variant-numeric: tabular-nums; }
.wg-brk { position: absolute; left: 0; right: 0; top: var(--A); height: var(--brk); background: var(--mist); display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; font-style: normal; font-size: 10.5px; color: var(--mute2); }
.wd { position: relative; border-left: 1px solid var(--line); min-width: 0; }
.wd.today { background: linear-gradient(180deg, rgba(215, 249, 74, .09), rgba(215, 249, 74, .03)); }
/* ders blokları */
.bk { --zc: var(--z4); position: absolute; left: 5px; right: 5px; top: calc(var(--o) * (var(--A) + var(--brk)) + var(--m) * var(--ph) / 60 + 1px); height: calc(var(--d) * var(--ph) / 60 - 2px); border: 0; border-radius: 5px; padding: 4px 8px 0 10px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: color-mix(in srgb, var(--zc) 15%, #fff); box-shadow: inset 3px 0 0 var(--zc); color: var(--ink); overflow: hidden; font-size: 12px; line-height: 1.35; cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s, opacity .25s, background .2s, color .2s; z-index: 1; }
.bk b { font-weight: 500; font-size: 11.5px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ink) 70%, transparent); line-height: 1.3; }
.bk span { font-weight: 600; font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bk small { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 1px; }
.bk.z1 { --zc: var(--z1); } .bk.z2 { --zc: #A9CF0E; } .bk.z3 { --zc: var(--z3); } .bk.z4 { --zc: var(--z4); } .bk.z5 { --zc: var(--z5); }
/* çakışan dersler: gün sütununda yan yana şeritler */
.bk.ov1 { right: calc(50% + 1px); }
.bk.ov2 { left: calc(50% + 1px); }
.bk.ovn { left: calc(4px + var(--l) * (100% - 8px) / var(--n)); right: auto; width: calc((100% - 8px) / var(--n) - 2px); }
.bk.ov1, .bk.ov2, .bk.ovn { padding: 4px 5px 0 8px; }
.bk.ov1 small, .bk.ov2 small, .bk.ovn small { display: none; }
.bk.ov1 span, .bk.ov2 span { white-space: normal; font-size: 12px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bk.ovn { padding: 4px 3px 0 6px; }
.bk.ovn span { font-size: 11.5px; letter-spacing: -.01em; }
.bk small { display: none; }
.bk.lg:not(.ov1):not(.ov2):not(.ovn) small { display: block; }
.bk:hover:not(:disabled), .bk:focus-visible { transform: translateY(-1px); z-index: 4; box-shadow: inset 3px 0 0 var(--zc), 0 10px 22px -12px rgba(14, 15, 18, .5); }
.bk:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.bk.past { background: #F6F7F9; color: var(--mute2); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--zc) 35%, #fff); cursor: default; }
.bk.past b, .bk.past small { color: var(--mute2); }
.bk.past.ov2 { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--zc) 35%, #fff), 0 0 0 2px #fff; }
.bk.live::after { content: ''; position: absolute; right: 7px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--zc); animation: blink 1.6s infinite; }
/* kişisel hafta: seçilen dersler dolu renk, diğerleri geri çekilir */
.wb.has-plan .bk:not(.in):not(.past):not(:hover):not(:focus-visible) { background: color-mix(in srgb, var(--zc) 8%, #fff); color: var(--ink3); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--zc) 55%, #fff); }
.wb.has-plan .bk.ov2:not(.in):not(.past):not(:hover):not(:focus-visible) { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--zc) 55%, #fff), 0 0 0 2px #fff; }
.bk.in { background: var(--zc); color: var(--ink); z-index: 3; box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--zc) 80%, #000), 0 2px 4px rgba(14, 15, 18, .12); }
.bk.in small, .bk.in b { color: rgba(14, 15, 18, .66); }
.bk.in.z4, .bk.in.z5 { color: #fff; }
.bk.in.z4 small, .bk.in.z5 small, .bk.in.z4 b, .bk.in.z5 b { color: rgba(255, 255, 255, .8); }
.bk.in::before { content: ''; position: absolute; right: 8px; top: 7px; width: 9px; height: 5px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.bk.in:hover { box-shadow: 0 16px 28px -12px color-mix(in srgb, var(--zc) 85%, #000); }
/* şu an çizgisi */
.wg-now { position: absolute; left: var(--ax); right: 0; top: var(--y); height: 0; border-top: 1px dashed rgba(255, 77, 31, .5); z-index: 7; pointer-events: none; transition: top 1s var(--ease); }
.wg-now::before { content: ''; position: absolute; left: calc(var(--a) - var(--ax)); width: var(--w); top: -1.5px; height: 2px; background: var(--or); }
.wg-now::after { content: ''; position: absolute; left: calc(var(--a) - var(--ax) - 5px); top: -5.5px; width: 10px; height: 10px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 0 rgba(255, 77, 31, .5); animation: nowp 2s infinite; }
@keyframes nowp { 70% { box-shadow: 0 0 0 9px rgba(255, 77, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 31, 0); } }
.wg-now b { position: absolute; left: calc(var(--ax) * -1 + 8px); top: -10px; background: var(--or); color: #fff; font: 600 11px/1 var(--ft); padding: 4px 6px; border-radius: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* alt satır */
.wf { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; padding: 14px 20px 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--mute); }
.wf-m { margin: 0; color: var(--ink3); flex: 1 1 320px; }
.wf-z { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; }
.wf-z li { display: flex; align-items: center; gap: 6px; }
.wf-z i { width: 10px; height: 10px; border-radius: 2px; background: var(--acc); }
.wf-z .z1 i { background: var(--z1); } .wf-z .z2 i { background: var(--z2); } .wf-z .z3 i { background: var(--z3); } .wf-z .z4 i { background: var(--z4); } .wf-z .z5 i { background: var(--z5); }
.wf-h { margin: 0; }
/* ders bilgi kartı */
.wp { position: absolute; left: 0; top: 0; z-index: 30; width: 250px; background: #fff; border-radius: 8px; box-shadow: var(--sh3); padding: 14px 16px; pointer-events: none; font-size: 13.5px; animation: pop .12s var(--ease); }
.wp p { margin: 0; }
.wp-d { font-size: 12.5px; color: var(--mute); }
.wp-n { display: flex; align-items: center; gap: 8px; font: 600 24px/1.1 var(--fd); margin: 4px 0 2px !important; }
.wp-n i { width: 10px; height: 10px; background: var(--acc); }
.wp-n.z1 i { background: var(--z1); } .wp-n.z2 i { background: var(--z2); } .wp-n.z3 i { background: var(--z3); } .wp-n.z4 i { background: var(--z4); } .wp-n.z5 i { background: var(--z5); }
.wp-m { color: var(--ink3); }
.wp-c { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px !important; font-weight: 500; }
.wp-h { font-size: 12.5px; color: var(--or-t); padding-top: 8px; border-top: 1px solid var(--line); }

/* ================================================================== kulüp panosu (A6) */
.pn-s { background: var(--mist); padding: clamp(64px, 7vw, 112px) 0 clamp(64px, 7vw, 112px); margin-top: clamp(64px, 7vw, 104px); }
.pn-hd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 24px 56px; align-items: end; margin-bottom: 32px; }
.pn-hd h2 { font-size: clamp(48px, 5.4vw, 84px); font-weight: 600; }
.pn-hd p { font-size: 17px; color: var(--ink3); margin: 0; }
.pn-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.md-dk { grid-column: span 8; } .md-ps { grid-column: span 4; }
.md-ds { grid-column: span 7; } .md-eg { grid-column: span 5; }
.md-uy { grid-column: span 8; } .md-tp { grid-column: span 4; }
.md-kk { grid-column: span 7; } .md-rg { grid-column: span 5; }
.md h4 { font: 500 14px/1.3 var(--ft); color: var(--mute); margin: 0 0 18px; }
.md p { font-size: 15.5px; color: var(--ink3); line-height: 1.6; }

/* haftanın dökümü */
.dk-st { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 26px; }
.dk-st > div { background: var(--mist); padding: 16px 18px; display: grid; gap: 6px; }
.dk-st dt { font-size: 12.5px; color: var(--mute); }
.dk-st dd { font: 400 15px/1 var(--ft); color: var(--ink3); white-space: nowrap; }
.dk-st dd b { font: 600 34px/1 var(--fd); color: var(--ink); margin-right: 3px; font-variant-numeric: tabular-nums; }
.dk-st dd small { font-size: 12px; color: var(--mute); margin-left: 4px; }
.dk-g { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; }
.md-dk .hb-bars { height: 132px; }
.md-dk .hb-bv { background: var(--ink); }
.dk-a { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
/* pist */
.md-ps { display: flex; flex-direction: column; }
.ps-f { position: relative; margin: 0 0 20px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; }
.ps-f .im { position: absolute; inset: 0; }
.ps-f figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(14, 15, 18, .72)); color: #fff; }
.ps-f figcaption b { font: 600 24px/1 var(--fd); }
.ps-ol { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px !important; font-size: 13px !important; color: var(--mute) !important; }
.ps-ol b { color: var(--ink); font-weight: 600; }
.ps-bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.ps-bars i { flex: 1; height: var(--h); background: var(--mist2); border-radius: 2px 2px 0 0; transition: height .5s var(--ease); }
.ps-bars i.c { background: var(--z5); }
.ps-bars i:not(.c):not(.x) { background: var(--ink3); }
.ps-bars i.gone { opacity: .35; }
.ps-bars i.now.now { opacity: 1; background: var(--or); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--or); }
.ps-ax { display: flex; justify-content: space-between; margin: 6px 0 18px !important; font: 500 11px/1 var(--fd) !important; color: var(--mute2) !important; }
.ps-sp { margin-top: auto; }
.ps-sp > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.ps-sp dt { color: var(--mute); }

/* 60 dakika (sabitlenmiş modül) */
.an { position: relative; margin-bottom: 16px; }
.an-pin { background: var(--mist); }
.md-an { padding-bottom: clamp(24px, 2.6vw, 36px); }
.an-clk { display: flex; align-items: baseline; gap: 12px; margin: 0 !important; }
.an-clk b { font: 600 44px/1 var(--fd); font-variant-numeric: tabular-nums; min-width: 2.4ch; text-align: right; }
.an-clk span { font-size: 13.5px; color: var(--mute); min-width: 110px; }
.an-g { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(220px, 300px); gap: 32px; align-items: start; }
.an-ph { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.an-ph li { border-bottom: 1px solid var(--line); position: relative; }
.an-ph li::before { content: ''; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--acc); transition: width .4s var(--ease); }
.an-ph li.on::before { width: 100%; }
.an-ph button { width: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; padding: 14px 0 12px; border: 0; background: none; text-align: left; }
.an-t { font: 500 13px/1 var(--fd); color: var(--mute); font-variant-numeric: tabular-nums; }
.an-ph b { font: 600 24px/1 var(--fd); }
.an-z { grid-column: 2; font-size: 12.5px; color: var(--mute); margin-top: 4px; }
.an-d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.an-d > * { overflow: hidden; min-height: 0; }
.an-ph li.on .an-d { grid-template-rows: 1fr; }
.an-d p { font-size: 14.5px !important; margin: 0 !important; }
.an-d .ul { font-size: 14px; margin: 8px 0 14px; }
.an-ph li.z1 .an-z { color: #2F5BD3; } .an-ph li.z2 .an-z { color: #4C6A00; } .an-ph li.z3 .an-z { color: #9A5A00; } .an-ph li.z4 .an-z { color: #C7330B; } .an-ph li.z5 .an-z { color: #B80E30; }
.an-ph li.z1 { --acc: var(--z1); } .an-ph li.z2 { --acc: var(--z2); } .an-ph li.z3 { --acc: var(--z3); } .an-ph li.z4 { --acc: var(--z4); } .an-ph li.z5 { --acc: var(--z5); }
.an-ch { position: relative; padding-bottom: 26px; }
.an-plot { position: relative; height: clamp(240px, 30vh, 320px); }
.an-plot svg { width: 100%; height: 100%; overflow: visible; }
.an-b { opacity: .14; } .an-b.z1 { fill: var(--z1); } .an-b.z2 { fill: var(--z2); } .an-b.z3 { fill: var(--z3); } .an-b.z4 { fill: var(--z4); } .an-b.z5 { fill: var(--z5); }
.an-v { stroke: var(--line2); stroke-dasharray: 3 5; }
.an-g0 { fill: none; stroke: var(--mist2); stroke-width: 2.5; }
.an-g1 { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.an-cur { position: absolute; width: 14px; height: 14px; margin: 0 0 -7px -7px; background: var(--acc); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--ink); border-radius: 50%; left: 0; bottom: 0; pointer-events: none; }
.an-cur.z1 { background: var(--z1); } .an-cur.z2 { background: var(--z2); } .an-cur.z3 { background: var(--z3); } .an-cur.z4 { background: var(--z4); } .an-cur.z5 { background: var(--z5); }
.an-ax { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; }
.an-ax li { position: absolute; transform: translateX(-50%); font: 500 12px/1 var(--fd); color: var(--mute); }
.an-ax li:first-child { transform: none; } .an-ax li:last-child { transform: translateX(-100%); }
.an-ims { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--ink); }
.an-im { position: absolute; inset: 0; margin: 0; clip-path: inset(0 0 0 100%); transition: clip-path .7s var(--ease); }
.an-im.on { clip-path: inset(0 0 0 0); z-index: 1; }
.an-im .im { position: absolute; inset: 0; }

/* sekiz ders */
.ds-l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ds-l li { border-bottom: 1px solid var(--line); }
.ds-l a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 150px 18px; gap: 16px; align-items: center; padding: 10px 4px 10px 0; text-decoration: none; position: relative; transition: background .15s; }
.ds-l a::before { content: ''; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; background: var(--acc); transform: scaleY(0); transition: transform .2s var(--ease); }
.ds-l li.z1 { --acc: var(--z1); } .ds-l li.z2 { --acc: var(--z2); } .ds-l li.z3 { --acc: var(--z3); } .ds-l li.z4 { --acc: var(--z4); } .ds-l li.z5 { --acc: var(--z5); }
.ds-l a:hover::before { transform: scaleY(1); }
.ds-im { width: 52px; height: 52px; border-radius: 5px; overflow: hidden; }
.ds-t b { display: block; font: 600 22px/1.05 var(--fd); }
.ds-t small { font-size: 13px; color: var(--mute); }
.ds-nx { font-size: 13px; color: var(--mute); text-align: right; }
.ds-nx b { display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.ds-l a .ic { transition: transform .2s var(--ease); color: var(--mute); }
.ds-l a:hover .ic { transform: translateX(3px); color: var(--ink); }
/* antrenörler */
.eg-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 12px; }
.eg-l a { display: grid; gap: 3px; text-decoration: none; }
.eg-im { display: block; border-radius: 6px; overflow: hidden; margin-bottom: 8px; background: var(--mist2); }
.eg-im .im { transition: transform .5s var(--ease); }
.eg-l a:hover .im { transform: scale(1.04); }
.eg-l b { font-weight: 600; font-size: 14px; line-height: 1.25; }
.eg-l small { font-size: 12px; color: var(--mute); line-height: 1.35; }
/* üyelik */
.tg { display: inline-flex; position: relative; box-shadow: inset 0 0 0 1px var(--line2); border-radius: 4px; padding: 3px; }
.tg label { position: relative; }
.tg input { position: absolute; opacity: 0; }
.tg span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; font-size: 13.5px; font-weight: 500; color: var(--mute); cursor: pointer; border-radius: 3px; }
.tg input:checked + span { color: #fff; background: var(--ink); }
.tg input:focus-visible + span { outline: 2px solid var(--or); }
.tg > i { display: none; }
.uy-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.uy-p { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .2s, transform .2s var(--ease); }
.uy-p:hover { box-shadow: inset 0 0 0 1px var(--ink); transform: translateY(-2px); }
.uy-p.is-f { background: var(--ink); color: #fff; box-shadow: var(--sh2); }
.uy-n { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 24px/1 var(--fd); }
.uy-n em { font: 500 11.5px/1 var(--ft); font-style: normal; background: var(--volt); color: var(--ink); padding: 5px 7px; border-radius: 2px; }
.uy-pr b { font: 600 42px/1 var(--fd); font-variant-numeric: tabular-nums; }
.uy-pr small { font-size: 13px; color: var(--mute); margin-left: 6px; }
.uy-l { font-size: 14px; color: var(--mute); }
.uy-p.is-f .uy-l, .uy-p.is-f .uy-pr small { color: rgba(255, 255, 255, .6); }
.uy-p dl { margin-top: auto; }
.uy-p dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.uy-p.is-f dl > div { border-color: rgba(255, 255, 255, .12); }
.uy-p dt { color: var(--mute); } .uy-p.is-f dt { color: rgba(255, 255, 255, .55); }
.uy-p dd { font-weight: 500; text-align: right; }
.uy-f { margin: 18px 0 0 !important; font-size: 14px !important; }
/* toparlanma */
.tp-f { margin: 0 0 18px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }
.proto { display: flex; gap: 3px; margin: 18px 0 0; }
.pr-s { flex: 0 1 var(--w); min-width: 0; display: grid; gap: 4px; padding-top: 30px; position: relative; }
.pr-s::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; border-radius: 2px; }
.pr-hot::before { background: var(--or); } .pr-cold::before { background: var(--z1); } .pr-rest::before { background: var(--mist2); }
.pr-s b { font: 600 15px/1 var(--fd); }
.pr-s small { font-size: 10.5px; color: var(--mute); white-space: nowrap; overflow: hidden; }
.pr-cold small, .pr-rest small, .pr-cold b, .pr-rest b { visibility: hidden; }
/* koşu kulübü */
.md-kk { display: flex; flex-direction: column; }
.kk-g { flex: 1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; align-items: stretch; }
.kk-t { display: flex; flex-direction: column; }
.kk-a { margin: auto 0 0 !important; padding-top: 22px; }
.kk-rt { border-radius: 8px; background: var(--mist); height: 100%; min-height: 300px; }
/* ring */
.rg-f { position: relative; margin: 0 0 18px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; }
.rg-f .im { position: absolute; inset: 0; }
.rg-f figcaption { position: absolute; right: 14px; bottom: 14px; background: var(--or); color: #fff; border-radius: 6px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.rg-f figcaption b { font: 600 40px/1 var(--fd); }
.rg-f figcaption span { font-size: 12.5px; line-height: 1.3; }

/* ================================================================== duyarlı */
@media (max-width: 1280px) {
  .an-g { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); }
  .an-ims { display: none; }
}
@media (max-width: 1080px) {
  .wb { --cw: 132px; }
  .wt-go { margin-left: 0; }
  .pn-g > .md { grid-column: 1 / -1; }
  .pn-hd { grid-template-columns: 1fr; }
  .an-g { grid-template-columns: 1fr; }
  .an-plot { height: 220px; }
  .dk-g { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 680px) {
  .wh > .wrap { padding: 0 10px; }
  .wh-k { min-height: 0; padding: 18px 6px 14px; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; }
  .wh-ph { position: static; width: auto; height: 64px; border-radius: 10px 10px 0 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .wh-ph .im { width: 120px; }
  .wb { --ax: 50px; --cw: 160px; border-radius: 10px; }
  .wt { padding: 12px; border-radius: 0; gap: 10px; }
  .wt-h { width: 100%; border: 0; padding: 2px 0 0; font-size: 26px; }
  .wt-goal { width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px !important; width: calc(100% + 24px); }
  .wt-goal::-webkit-scrollbar { display: none; }
  .wt-goal span { height: 38px; padding: 0 11px; font-size: 13.5px; }
  .wt-lv span { padding: 0 7px; font-size: 12.5px; }
  .wt-n { gap: 6px; }
  .wt-n span { font-size: 12.5px; }
  .wt-mb { padding: 0 8px; }
  .wd-h { grid-template-columns: 1fr; row-gap: 3px; }
  .wt-mb span { display: none; }
  .wt-go { width: 100%; }
  .wt-pop { left: auto; right: -60px; width: calc(100vw - 32px); }
  .wc { height: 92px; }
  .wc-r { padding: 12px 0 0 10px; }
  .wc-r b { font-size: 24px; }
  .wc-r em, .wc-r span { display: none; }
  .wd-h { padding: 10px 10px 12px; }
  .wd-h b { font-size: 14px; }
  .wg-bd { --ph: 46px; }
  .wg-ax span { right: 8px; font-size: 11px; }
  .wg-brk { font-size: 0; }
  .wg-now b { left: calc(var(--ax) * -1 + 3px); font-size: 10px; padding: 3px 4px; }
  .wf { padding: 12px 14px 14px; }
  .wf-z { display: none; }
  .wp { width: 230px; }
  .dk-st { grid-template-columns: 1fr 1fr; }
  .dk-st dd b { font-size: 28px; }
  .ds-l a { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; }
  .ds-m { display: none; }
  .ds-nx { grid-column: 2; grid-row: 2; text-align: left; margin-top: -6px; }
  .ds-nx b { display: inline; margin-right: 6px; }
  .ds-l a .ic { grid-row: 1 / 3; grid-column: 3; }
  .ds-im { width: 48px; height: 48px; grid-row: 1 / 3; }
  .eg-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uy-g { grid-template-columns: 1fr; }
  .md-uy .md-h { flex-wrap: wrap; }
  .kk-g { grid-template-columns: 1fr; }
}