:root{ /* Clinical Performance, light AND dark. Every legacy variable is now an alias onto a --cp-* token from valka-clinical.css rather than a literal, so screens not yet ported to .cp-* markup follow the theme for free. Declared ONCE here rather than split per theme: the --cp-* tokens are what swap (valka-clinical.css sets light values on :root and overrides them under [data-theme="dark"]), so these aliases resolve correctly in both. The maroon/gold collegiate palette is retired, not kept alongside. --card and --card2 share a value, which flattens the gradients in .card and .modal .sheet without editing either rule. */ --bg:var(--cp-bg); --card:var(--cp-surface); --card2:var(--cp-surface); --line:var(--cp-border); --text:var(--cp-navy); --muted:var(--cp-slate); --elev:var(--cp-surface-2); --elev2:var(--cp-surface-2); --toast:var(--cp-surface); /* Both old brand names resolve to the single teal accent. The NAMES stay so the ~40 existing references keep working; they carry no brand meaning. */ --maroon:var(--cp-teal); --gold:var(--cp-teal); --green:var(--cp-good); --amber:var(--cp-caution); --red:var(--cp-risk); --blue:var(--cp-reference); --ref:var(--cp-reference); --refbg1:var(--cp-reference-wash); --refbg2:var(--cp-reference-wash); --refline:var(--cp-reference); } *{box-sizing:border-box} html,body{margin:0;height:100%} body{ background:var(--bg); color:var(--text); font:15px/1.5 'Instrument Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; /* 2026-09-06 — üst çentik payı BURADAN kaldırıldı, .topbar'a taşındı. Sebep: .topbar position:sticky/top:0 ve sticky offset'i gövdenin dolgusuna değil görüntü alanına göre ölçülüyor; sayfa kaydırıldığında bar çentiğin ve durum çubuğunun altına giriyordu. Payı barın kendi padding-top'una koyunca bar her kaydırma konumunda saatin altında kalıyor. ALT paya dokunma: .content'in 88px hesabı buna bağlı (L~140). */ padding:0 0 env(safe-area-inset-bottom); } /* Role-specific backgrounds removed: Clinical Performance has no gradients in either theme, and the two roles are distinguished by layout (bottom tabs vs. desktop sidebar), not by tinting the canvas. Both sit on --cp-bg. */ /* No role gradients in light: Clinical Performance has no gradients at all. Both roles sit on the flat --cp-bg canvas set in valka-clinical.css. */ .wrap{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column} /* Desktop coach shell (2026-08-09). The 520px cap above is the athlete phone frame. The coach dashboard is desktop-only and .cp-shell carries its own min-width:1280px, so the cap has to come off for role-coach or the sidebar and main column get squeezed into a phone width. The two rules after it are positioning fixes for app-side elements the export has no equivalent for: the unread badge refreshUnreadBadge() appends to a nav item, and the sport / team menus, which are absolutely positioned in the mobile top bar and have to sit in normal flow inside the sidebar. No new classes. */ body.role-coach .wrap{max-width:none;display:block} /* .nbadge is position:absolute for the mobile tab bar, where the tab itself is the positioned ancestor. In the sidebar the nav item is static, so the badge would escape to the .cp-sidebar corner — put it back in flow instead. */ .cp-sidebar .nbadge{position:static;margin-left:auto;flex:none} .cp-sidebar .sportsel-menu,.cp-sidebar .cp-menu{position:static} /* üst pay 2026-09-06'da body'den buraya taşındı — gövde artık taşımıyor */ .center{flex:1;display:flex;flex-direction:column;justify-content:center; padding:calc(28px + env(safe-area-inset-top)) 22px 28px} a{color:var(--gold)} /* auth */ .brand{text-align:center;margin-bottom:22px} .badge{width:88px;height:88px;object-fit:contain} .brand h1{margin:12px 0 2px;font-size:28px;letter-spacing:3px;font-weight:600;font-family:Oswald,sans-serif;text-transform:uppercase} .brand .tag{color:var(--muted);letter-spacing:4px;font-size:10.5px;text-transform:uppercase} .card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line); border-radius:16px;padding:18px;margin-bottom:14px} .seg{display:flex;background:var(--elev);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:16px} .seg button{flex:1;border:0;background:transparent;color:var(--muted);padding:9px;border-radius:999px; font-weight:700;letter-spacing:1px;cursor:pointer;font-size:12.5px} .seg button.active{background:var(--cp-teal);color:var(--cp-on-accent)} label{display:block;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin:12px 0 6px} input,select,textarea{width:100%;background:var(--elev);border:1px solid var(--line);border-radius:11px;color:var(--text); padding:13px;font-size:16px;outline:none;font-family:inherit} input:focus,select:focus,textarea:focus{border-color:var(--gold)} /* ---- personal info (health form) — Claude Design handoff ---- */ .hf-grp{font:600 10px 'Instrument Sans',sans-serif;text-transform:uppercase;letter-spacing:1.3px;color:var(--gold);margin:22px 0 12px;padding-top:15px;border-top:1px solid var(--line)} .hf-grp.first{border-top:0;padding-top:0;margin:4px 0 12px} .hf-field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px} .hf-lbl{font:600 11px 'Instrument Sans',sans-serif;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:0} .hf-lbl .opt{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);opacity:.75} .hf-lbl .req{color:var(--gold);font-weight:700;margin-left:2px} .hf-help{font:400 11px/1.4 'Instrument Sans',sans-serif;color:var(--muted);opacity:.82;margin:-1px 0 0} .hf-in{width:100%;box-sizing:border-box;background:var(--elev);border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font:500 15px 'Instrument Sans',sans-serif;color:var(--text);outline:none;transition:border-color .12s,box-shadow .12s;resize:vertical;margin:0} .hf-in:focus{border-color:var(--cp-teal);outline:2px solid var(--cp-teal);outline-offset:2px} [data-theme="dark"] .hf-in{color-scheme:dark} .hf-in.jersey{width:96px;text-align:center;font:600 17px 'Oswald',sans-serif;padding:12px 14px} .hf-seg2{display:flex;border:1.5px solid var(--maroon);border-radius:11px;overflow:hidden} .hf-seg2 button{flex:1;padding:11px 0;text-align:center;font:600 13px 'Instrument Sans',sans-serif;cursor:pointer;background:transparent;color:var(--muted);border:0;transition:background .12s,color .12s} .hf-seg2 button+button{border-left:1.5px solid var(--maroon)} .hf-seg2 button.on{background:var(--maroon);color:var(--cp-on-accent)} .hf-dirty{display:flex;align-items:center;gap:7px;font:500 11.5px 'Instrument Sans',sans-serif;color:var(--gold);margin:20px 0 10px} .hf-dirty .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none} /* Birincil buton 2026-09-02'de eylem aksanına geçti. Kural: aksan "seçili olanı" değil YAPILACAK olanı işaretler — .btn.gold/.ghost, seçili çipler, ikon butonları ve her veri sayısı teal kalır. Bir ekranda ikiden fazla limon öğe görürsen kural kaçmıştır. Açık temada dolgu/zemin farkı 1.16:1 olduğu için kenar şart (--cp-action-border); koyu temada transparent. */ .btn{width:100%;margin-top:16px;background:var(--cp-action);color:var(--cp-on-action); border:1px solid var(--cp-action-border);border-radius:12px; padding:14px;font-weight:700;letter-spacing:1px;font-size:14px;cursor:pointer;text-transform:uppercase} .btn.gold{background:transparent;color:var(--cp-teal);border:1px solid var(--cp-teal)} .btn.sm{width:auto;margin:0;padding:9px 14px;font-size:13px;border-radius:9px} .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)} .btn:hover:not(:disabled){background:var(--cp-action-hover)} .btn:active:not(:disabled){background:var(--cp-action-press)} .btn:disabled{opacity:.55} /* Çıkış Yap (2026-09-06, Profil sekmesinin en altı). Dolgu değil kenar: ekrandaki tek birincil (limon) buton hakkı harcanmasın, ama eylem yıkıcı olduğu için renk --cp-risk. :hover/:active'i ayrıca yazmak ŞART — yukarıdaki .btn:hover:not(:disabled) daha yüksek özgüllükte ve onu teal'e çevirirdi. */ .btn.danger{background:transparent;color:var(--cp-risk);border:1px solid var(--cp-risk)} .btn.danger:hover:not(:disabled), .btn.danger:active:not(:disabled){background:var(--cp-risk-wash)} .msg{margin-top:12px;font-size:13px;padding:10px 12px;border-radius:9px;display:none} .msg.err{display:block;background:var(--cp-risk-wash);border:1px solid var(--cp-risk);color:var(--cp-risk)} .msg.ok{display:block;background:var(--cp-good-wash);border:1px solid var(--cp-good);color:var(--cp-good)} /* app chrome */ /* Üst bar, 2026-09-06 — iOS çentiği + kesintisiz zemin. · padding-top = 15 + env(safe-area-inset-top): sticky bar kaydırırken de saat/pil/Wi-Fi satırının altında kalır, üstündeki şerit sayfa rengiyle boyanır. · background artık --bar (=--cp-surface) DEĞİL --bg: bar kendi kutusu gibi durmasın diye. Aynı sebeple border-bottom ve backdrop-filter kaldırıldı — zemin sayfayla aynı renk olduğu için bulanıklığın görsel karşılığı yok, sürekli ekranda duran bir blur katmanı ise bedava değil. */ /* 2026-10-13 — çentikli iPhone'larda bar yukarı alındı: saat satırının altında 15px değil 0px boşluk (önce 4px denendi, Berkay biraz daha yukarı istedi). max() çentiksiz cihazları (env()=0: masaüstü, Safari sekmesi) eski 15px'te tutar. Bar zaten sticky — kaydırırken yerinde kalır. */ .topbar{display:flex;align-items:center;justify-content:space-between; padding:max(15px, env(safe-area-inset-top)) 18px 15px; position:sticky;top:0;background:var(--bg);z-index:5} .topbar .name{font-weight:400;letter-spacing:2px;font-size:16px;font-family:Oswald,sans-serif;text-transform:uppercase} /* multi-sport header (2026-08-07) — reuses --ref, the existing cool slate-indigo "reference tools" accent, as the new-brand-direction color instead of introducing a fourth accent family */ /* brand name + sport selector as two stacked lines (2026-08-07, Valka Performance rename) — the sport selector used to sit where the app name used to be; now the app name (APP_NAME) leads, sport selector is a smaller secondary control underneath it. */ .brandcol{display:flex;flex-direction:column;gap:1px} .appname{font-weight:400;letter-spacing:2px;font-size:16px;font-family:Oswald,sans-serif;text-transform:uppercase;color:var(--text)} .sportwrap{position:relative} /* single-team athlete: line-2 team name, same typography as .sportsel but with no tap affordance (2026-08-16) */ .teamname{color:var(--muted);font-family:'Instrument Sans',sans-serif;letter-spacing:.2px;font-size:11px;text-transform:none} /* 2026-09-06: APP_NAME üst bardan kalktı, takım artık ikinci satır değil barın kendisi. Yalnızca sporcu üst barında geçerli — koç yan menüsündeki .sportsel (aynı sınıf) etkilenmesin diye body.role-athlete .topbar kapsamı. */ body.role-athlete .topbar .teamname, body.role-athlete .topbar .sportsel{font-size:14px;color:var(--text);letter-spacing:.3px} .sportsel{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer; color:var(--muted);font:inherit;font-family:'Instrument Sans',sans-serif;letter-spacing:.2px;font-size:11px;text-transform:none} .sportsel img{height:15px} .sportsel-menu{position:absolute;top:26px;left:0;background:var(--card);border:1px solid var(--line); border-radius:12px;padding:6px;min-width:210px;z-index:50} .sportsel-menu.hidden{display:none} .sportsel-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0; border-left:3px solid transparent;color:var(--text);padding:9px 10px;border-radius:8px;cursor:pointer; font-family:'Instrument Sans',sans-serif;font-size:13px;letter-spacing:0;text-transform:none} .sportsel-item.on{border-left-color:var(--ref);color:var(--ref)} .sportsel-item.soon{color:var(--muted);cursor:default} .sportsel-item:not(.soon):hover{background:var(--elev)} .soon-tag{margin-left:auto;font-size:9px;letter-spacing:.5px;text-transform:uppercase;background:var(--elev2); color:var(--muted);padding:2px 7px;border-radius:20px} /* .content DEĞİŞMEDİ. 88px zaten doğru, hesabı: barın üst kenarı, ekran altından = 12 (yerden) + env() + 60 (bar) = 72 + env() içeriğin son pikseli, ekran altından = env() (body padding, L29) + 88 = 88 + env() → aradaki nefes 16px. Buraya ikinci bir env() EKLEME: body zaten taşıyor ve .navbar position:fixed olduğu için o padding'den etkilenmiyor; çift sayarsan son kartın altında bir çentik boyu fazladan boşluk açılır. */ .content{flex:1;padding:16px 16px 88px} /* Yüzen ikon barı (2026-09-02) — üç kenardan da boşluklu hap; içerik altından akar. Metrikler: yan boşluk 16 · iç dolgu 8 · sekme arası 6 · sekme yüksekliği 44 → bar 60px. 360px ekranda 6 sekme = 47.0 × 44px, yani 44px tabanının üstünde. Eski bardaki iki quantity query (:has(.tab:nth-child(6)) ve :first-child:nth-last-child(6)) yalnızca 6 sekmede METNİ küçültmek için vardı; metin kalktığı için silindiler. */ .navbar{ position:fixed; left:16px; right:16px; bottom:calc(12px + env(safe-area-inset-bottom)); display:flex; gap:6px; padding:8px; border-radius:999px; background:var(--cp-nav-bg); border:1px solid var(--cp-nav-border); box-shadow:var(--cp-nav-shadow); z-index:40; } /* Cam YALNIZCA koyu temada. Açık temada taban kural zaten opak — yarı saydam beyaz, altındaki açık içerikle karışıp barın nerede bittiğini belirsizleştiriyordu. */ [data-theme="dark"] .navbar{ backdrop-filter:blur(20px) saturate(130%); -webkit-backdrop-filter:blur(20px) saturate(130%); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ [data-theme="dark"] .navbar{ background:var(--cp-surface); border-color:var(--cp-border); } } /* Sürekli ekranda duran bulanık yüzey düşük seviye cihazlarda kaydırmayı yavaşlatabilir; kullanıcı şeffaflığı kısmışsa aynı opak hâle düşülür. */ @media (prefers-reduced-transparency:reduce){ [data-theme="dark"] .navbar{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--cp-surface); } } .navbar .tab{ flex:1; min-width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; cursor:pointer; color:var(--cp-slate); border-radius:999px; position:relative; transition:color .12s linear, transform .09s ease-out; } .navbar .tab:active{ transform:scale(.94); } .navbar .tab .ic{ position:relative; z-index:1; display:block; line-height:0; } /* Aktif: dolu daire ::before ile çiziliyor, böylece ikon ve rozet onun ÜSTÜNDE kalıyor. box-sizing sayesinde açık temadaki 1px kenar sekme boyunu değiştirmez. */ /* Aktif sekme — BFC rebrand (2026-09-07). Kısa ömürlü bir ara sürümde her sekme kendi kategori rengini taşıyordu; rebrand tek aksana döndüğü için o kaldırıldı. Dolgu markanın mavisi, mürekkep --cp-on-action: açık temada beyaz, koyu temada sayfa zemini — mavi iki temada ters yönde durduğu için tek literal ikisine birden yetmiyor. Kenar yok: mavi zeminden 4.72:1 ayrılıyor, eski limon 1.16:1 olduğu için kenara mecburdu. */ .navbar .tab.active{ color:var(--cp-on-action); } .navbar .tab.active::before{ content:""; position:absolute; inset:0; box-sizing:border-box; border-radius:999px; background:var(--cp-action); } /* Etiket: ikonun ÜSTÜNDE açılan hap. opacity ile gizleniyor, display:none ile DEĞİL — metin erişilebilirlik ağacında kalsın diye. Bu yüzden butona ayrıca aria-label yazma, çift okunur. */ .navbar .tab .lb{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px); opacity:0; pointer-events:none; white-space:nowrap; font-size:11px; font-weight:600; letter-spacing:.01em; padding:4px 10px; border-radius:999px; /* Etiket hapı yüzey rengi + kenar. Kısa ömürlü ara sürümde dolu kategori rengiydi; tek aksana dönünce dolu mavi hap, hemen altındaki dolu mavi sekmeyle üst üste iki mavi blok üretiyordu. Nötr hap onu ayırıyor. */ background:var(--cp-surface); border:1px solid var(--cp-nav-border); color:var(--cp-navy); box-shadow:var(--cp-nav-shadow); transition:opacity .16s cubic-bezier(.2,.8,.2,1), transform .16s cubic-bezier(.2,.8,.2,1); } .navbar .tab.active .lb, .navbar .tab:hover .lb, .navbar .tab:focus-visible .lb, .navbar .tab:active .lb{ opacity:1; transform:translateX(-50%) translateY(0); } /* Kenar sekmelerde ortalanmış etiket barın dışına taşar: ilk sekmede sola, son sekmede sağa yaslanır. */ .navbar .tab:first-child .lb{ left:0; transform:translateX(0) translateY(4px); } .navbar .tab:last-child .lb{ left:auto; right:0; transform:translateX(0) translateY(4px); } .navbar .tab:first-child.active .lb, .navbar .tab:first-child:hover .lb, .navbar .tab:first-child:focus-visible .lb, .navbar .tab:first-child:active .lb, .navbar .tab:last-child.active .lb, .navbar .tab:last-child:hover .lb, .navbar .tab:last-child:focus-visible .lb, .navbar .tab:last-child:active .lb{ transform:translateX(0) translateY(0); } @media (prefers-reduced-motion:reduce){ .navbar .tab .lb{ transition:opacity .16s linear; transform:translateX(-50%) translateY(0); } .navbar .tab:first-child .lb,.navbar .tab:last-child .lb{ transform:translateX(0) translateY(0); } .navbar .tab:active{ transform:none; } } .pill{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 9px;border-radius:999px} .pill.coach{background:var(--cp-teal);color:var(--cp-on-accent)} .pill.athlete{background:var(--cp-teal-wash);color:var(--cp-teal);border:1px solid var(--cp-teal)} .link{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px} .h{font-size:22px;font-weight:600;margin:4px 0 2px;font-family:Oswald,sans-serif;letter-spacing:.5px} .sub{color:var(--muted);font-size:13px;margin-bottom:14px} .kicker{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:18px 2px 8px;font-weight:700} .row{display:flex;gap:10px;align-items:center} .between{display:flex;justify-content:space-between;align-items:center;gap:10px} .muted{color:var(--muted)} .small{font-size:12.5px} .dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none} .dot.green{background:var(--green)} .dot.amber{background:var(--amber)} .dot.red{background:var(--red)} .dot.grey{background:var(--cp-text-3)} .hmwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px} .hmhrow,.hmrow{display:flex;align-items:center;gap:4px;width:max-content} .hmrow{margin-top:4px} .hmname{flex:none;width:96px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; position:sticky;left:0;background:var(--card);z-index:1;cursor:pointer} .hmhead{height:1px} .hmcol{flex:none;width:22px;text-align:center;font-size:9.5px;color:var(--muted)} .hmsq{flex:none;width:22px;height:22px;border-radius:5px;display:inline-block;cursor:pointer} .hmlegend{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:11px;color:var(--muted)} .hmlegend .hmsq{width:13px;height:13px;border-radius:4px;margin-left:10px} .hmlegend .hmsq:first-child{margin-left:0} .scale{display:flex;gap:8px} .scale button{flex:1;height:52px;background:var(--elev);border:0;color:var(--muted);border-radius:12px;font-family:Oswald,sans-serif;font-weight:600;font-size:17px;cursor:pointer;transition:background .12s,color .12s} .scale button.on{background:var(--maroon);color:var(--cp-on-accent)} .phases{display:grid;grid-template-columns:1fr 1fr;gap:8px} .phases button{background:var(--elev);border:1px solid var(--line);color:var(--text);border-radius:11px;padding:12px;cursor:pointer;text-align:left;font-weight:700} .phases button.on{border-color:var(--cp-teal);background:var(--cp-teal-wash)} .phases small{display:block;color:var(--muted);font-weight:500;font-size:11px;margin-top:2px} .alert{border-radius:12px;padding:13px 14px;margin-bottom:12px;font-size:13.5px;line-height:1.5} .alert.gold{background:var(--cp-teal-wash);border:1px solid var(--cp-teal)} .alert.amber{background:var(--cp-caution-wash);border:1px solid var(--cp-caution)} .alert.blue{background:var(--cp-reference-wash);border:1px solid var(--cp-reference)} .alert b{color:var(--gold)} .ex{border-bottom:1px solid var(--line);padding:11px 0} .ex:last-child{border-bottom:0} .ex .en{font-weight:700} .ex .meta{color:var(--muted);font-size:12.5px;margin-top:1px} .tag{display:inline-block;background:var(--elev2);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:4px 10px;font-size:12px;margin:3px 4px 0 0} .tag .x{color:var(--red);margin-left:6px;cursor:pointer;font-weight:800} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .stat{background:var(--elev);border:1px solid var(--line);border-radius:11px;padding:12px} .stat .n{font-size:26px;font-weight:600;font-family:Oswald,sans-serif;letter-spacing:.5px} .bignum{font-family:Oswald,sans-serif;font-weight:600;font-size:52px;line-height:1;letter-spacing:1px} .goldline{border-left:4px solid var(--gold)} .redline{border-left:4px solid var(--maroon)} /* triage rows (design 4a/4c) */ .trow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer} .trow:last-child{border-bottom:0} .tdot{width:8px;height:8px;border-radius:50%;flex:none} .tava{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Oswald,sans-serif;font-weight:600;font-size:12px;flex:none;background:var(--elev2)} .tname{width:130px;font-weight:600;font-size:13px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tpos{font-size:10px;font-weight:500;color:var(--gold)} .treason{flex:1;font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tscore{font-family:Oswald,sans-serif;font-weight:700;font-size:16px;width:34px;text-align:right;flex:none} .tbtn{border:1.5px solid var(--cp-border);color:var(--cp-teal);background:none;padding:6px 13px;border-radius:8px;font-weight:600;font-size:11.5px;cursor:pointer;flex:none;font-family:inherit} .sevchip{padding:5px 12px;border-radius:16px;color:var(--cp-on-accent);font-size:11px;font-weight:600} .tsignal{background:var(--cp-risk-wash);border-left:3px solid var(--red);border-radius:8px;padding:10px 14px;font-size:12px;margin:8px 0 4px} /* AI brief card (design 5a/5b/5c) — always dark ink, camel accents */ .briefcard{background:var(--cp-surface);border:1px solid var(--cp-border);border-radius:14px;padding:20px;color:var(--cp-navy);margin-bottom:14px} .briefcard .bhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .briefcard .btitle{display:flex;align-items:center;gap:8px;font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--cp-teal)} .briefcard .bmeta{font-size:11px;color:var(--cp-slate-2)} .briefcard .btext{font-size:13.5px;line-height:1.6;color:var(--cp-navy);white-space:pre-wrap} .briefcard .bmetric{display:flex;align-items:center;gap:10px;background:var(--cp-surface-2);border-radius:9px;padding:10px 13px;margin-top:8px} .briefcard .bnum{font-family:Oswald,sans-serif;font-weight:700;font-size:16px;width:52px;flex:none} .briefcard .bml{flex:1;font-size:12px;color:var(--cp-slate)} .briefcard .bcta{background:var(--cp-teal);color:var(--cp-on-accent);text-align:center;padding:13px;border-radius:11px;font-weight:600;font-size:14px;cursor:pointer;border:0;width:100%;font-family:inherit} .briefcard .bexp{border-top:1px solid var(--cp-border);padding:9px 0 0;margin-top:9px} .briefcard .bexp b{font-size:12.5px} .briefcard a{color:var(--cp-teal);text-decoration:none;font-weight:600;font-size:13px} .bskel{height:11px;border-radius:6px;background:var(--cp-surface-2);animation:briefPulse 1.6s ease-in-out infinite;margin-bottom:9px} .bskel.blk{height:38px;border-radius:9px;background:var(--cp-surface-2)} @keyframes briefPulse{0%,100%{opacity:.3}50%{opacity:.65}} @keyframes briefSpin{to{transform:rotate(360deg)}} /* cycle screen (design 6a) */ .cychero{display:flex;align-items:center;gap:16px;margin-bottom:16px} .cycday{width:74px;height:74px;border-radius:50%;background:var(--card);border:3px solid var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none} .cycday b{font-family:Oswald,sans-serif;font-weight:700;font-size:26px;line-height:1;color:var(--gold)} .cycday small{font-size:9px;letter-spacing:.08em;font-weight:600;color:var(--muted)} .cycphname{font-family:Oswald,sans-serif;font-weight:700;font-size:20px;line-height:1;text-transform:uppercase} .cycbar{display:flex;gap:4px} .cycbar>div{height:8px;border-radius:4px} .cyclbl{display:flex;gap:4px;margin-top:6px;font-size:9px;color:var(--muted)} .cycgrid{display:flex;flex-direction:column;gap:6px} .cycgrid .wk{display:flex;gap:6px} .cycd{flex:1;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:Oswald,sans-serif;font-weight:600;font-size:12.5px} .cycd.today{background:var(--cp-teal)!important;color:var(--cp-on-accent)!important;outline:2px solid var(--cp-teal);outline-offset:2px;opacity:1!important} .cycleg{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:10.5px;color:var(--muted)} .cycleg i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;font-style:normal} /* regl tahmini şeridi (#/today) ve tahmini gün hücreleri (2026-09-01) */ .cycstrip{padding:12px 14px;margin-bottom:12px} .cycstrip b{font-size:14.5px;line-height:1.3;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cycstrip .msi{font-size:22px;color:var(--gold);flex:none} .cycstrip.amber{border-color:var(--cp-caution)} .cycstrip.amber .msi{color:var(--cp-caution)} .cycd.empty{background:transparent!important;pointer-events:none} .cycd.pred{border:1px dashed var(--cp-text-3)} .cycleg i.dash{border:1px dashed var(--cp-text-3);background:transparent} /* state components (design 7a-7d) */ .statecard{text-align:center;padding:34px 26px} .statecard .sic{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:26px} .statecard .sti{font-family:Oswald,sans-serif;font-weight:700;font-size:19px;line-height:1.1;text-transform:uppercase} .statecard .sbo{font-size:12.5px;line-height:1.55;color:var(--muted);margin:8px auto 18px;max-width:260px} .skelrow{display:flex;align-items:center;gap:12px;margin-bottom:18px} .skel{border-radius:6px;background:var(--elev2);animation:briefPulse 1.6s ease-in-out infinite} .flagchip{display:inline-block;background:var(--cp-risk-wash);border:1px solid var(--cp-risk);color:var(--cp-risk); border-radius:999px;padding:3px 9px;font-size:10.5px;font-weight:700;margin:4px 4px 0 0} .flagchip.amber{background:var(--cp-caution-wash);border-color:var(--cp-caution);color:var(--amber)} .spark{width:64px;height:24px;background:var(--elev);border:1px solid var(--line);border-radius:4px;flex:none} .chip{border:1px solid var(--line);background:var(--elev);color:var(--muted);border-radius:999px;padding:7px 14px; font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap} .chip.on{background:var(--gold);color:var(--cp-on-accent);border-color:var(--gold)} .chiprow{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;-ms-overflow-style:none;scrollbar-width:none} .chiprow::-webkit-scrollbar{display:none} .rmgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px} .rmtile{background:var(--elev);border:1px solid var(--line);border-radius:11px;padding:10px} .avset{display:flex;align-items:center} .av{width:26px;height:26px;border-radius:50%;background:var(--maroon);color:var(--cp-on-accent);font-size:10px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--bg);margin-left:-7px;flex:none} .av:first-child{margin-left:0} .ckc{width:24px;height:24px;border-radius:50%;background:var(--cp-teal-wash);color:var(--cp-teal); display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none} .msi{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1; display:inline-block;vertical-align:middle;letter-spacing:normal;text-transform:none;-webkit-font-smoothing:antialiased} .stat .l{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px} /* badge shelf — reuses .stat/.rmtile surface, no new visual language */ .bshelf{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px} .bdg{background:var(--elev);border:1px solid var(--line);border-radius:11px;padding:10px 6px;text-align:center} .bdg .bi{font-size:26px;color:var(--gold);line-height:1} .bdg .bl{font-size:10px;margin-top:5px;letter-spacing:.4px;text-transform:uppercase} .bdg.locked{opacity:.38} .bdg.locked .bi{color:var(--muted)} /* second, smaller streak indicator — deliberately not the big Oswald number */ .ministreak{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .ministreak .mn{font-family:Oswald,sans-serif;font-size:17px;color:var(--gold);letter-spacing:.5px} /* ---- Akordeon satiri (2026-09-04) — ana sayfadaki uzun metinler ---- Kart DEGIL satir: cerceve yok, dolgu yok, yalniz ust sac cizgisi. Ayirici olarak yalnizca border-TOP kullaniliyor; boylece iki ayri kapsayicidan (#vsnormal ve #guidance) gelen satirlar yan yana geldiginde arada cift cizgi olusmuyor ve bos bir kapsayici hicbir iz birakmiyor. Yukseklik gecisi grid-template-rows ile: JS olcumu yok, bkz. core.js. */ .accln{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px} /* Kartin ICINDE duran satir (HRV "Oneri"): kart icinde kart olmasin diye cerceve dusuyor, geriye yalniz ayirici cizgi kaliyor. */ .accln--flat{background:none;border:0;border-top:1px solid var(--line);border-radius:0;margin-bottom:0} .accln__head{display:flex;align-items:center;gap:10px;width:100%;min-height:52px; padding:15px 16px;border:0;background:none;text-align:left;cursor:pointer;color:var(--text); font:600 14px 'Instrument Sans',sans-serif} .accln--flat .accln__head{padding:13px 2px;min-height:48px;font-size:13.5px} .accln__head:active{opacity:.62} .accln__t{flex:1;min-width:0} .accln__m{flex:none;font-weight:500;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} /* Durum isigi. Hale box-shadow ile ama GOLGE DEGIL: yayilma yaricapi 0, yalnizca rengin seyreltilmis halkasi — "NO elevation scale" kurali duruyor. Animasyon YOK: yanip sonen bir nokta ana sayfada gurultudur. */ .accln__d{width:9px;height:9px;border-radius:50%;flex:none} .accln__d.info{background:var(--cp-teal);box-shadow:0 0 0 3px var(--cp-teal-wash)} .accln__d.caution{background:var(--cp-caution);box-shadow:0 0 0 3px var(--cp-caution-wash)} .accln__d.risk{background:var(--cp-risk);box-shadow:0 0 0 3px var(--cp-risk-wash)} .accln__d.good{background:var(--cp-good);box-shadow:0 0 0 3px var(--cp-good-wash)} .accln__c{flex:none;color:var(--muted);font-size:19px;transition:transform .28s cubic-bezier(.2,.8,.2,1)} .accln.on .accln__c{transform:rotate(180deg)} .accln__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.2,.8,.2,1)} .accln.on .accln__body{grid-template-rows:1fr} .accln__in{overflow:hidden;min-height:0} .accln__pad{padding:0 16px 16px} .accln--flat .accln__pad{padding:0 2px 16px} .accln__pad>*:first-child{margin-top:0} .accln__pad>*:last-child{margin-bottom:0} @media (prefers-reduced-motion:reduce){.accln__body,.accln__c{transition:none}} /* ---- Ana sayfa: sade duzen (2026-09-04) ---- Yalnizca #/today'i kapsar (.homev sarmalayicisi); diger ekranlarin kart yogunluguna dokunmaz. Ferahlik boslugtan gelir: bolumler arasi nefes artar, yeni bir yuzey/golge/cam dili GIRMEZ — valka-clinical.css'in "NO elevation scale" kurali burada da gecerli. */ .homev .sub{margin-bottom:24px} .homev .kicker{margin:28px 2px 10px} .homev .card{margin-bottom:18px} .homev .grid2{gap:12px} .homev .accln+.accln{margin-top:0} /* Satirlar 2026-09-04'te kendi cercevelerine girdi; grubu alttan kapatan cizgi kalkti. Geriye yalnizca gruptan sonraki nefes kaldi. */ .homev #guidance:not(:empty){margin-bottom:18px} .clickable{cursor:pointer} .clickable:active{opacity:.7} .hidden{display:none!important} .spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:s 1s linear infinite;margin:44px auto} @keyframes s{to{transform:rotate(360deg)}} .toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--toast);border:1px solid var(--line); color:var(--text);padding:11px 16px;border-radius:11px;font-size:13.5px;z-index:50;max-width:90%} video{width:100%;border-radius:10px;background:var(--cp-surface-2);margin-top:8px} canvas{max-width:100%} /* feature 9: comment threads + unread badge */ .navbar .tab{position:relative} /* Rozet eskiden etiket kutusunun bıraktığı dikey boşluğa oturuyordu; o kutu gitti. Artık ikon kutusunun sağ üstünde, aktif sekmedeki limon daireden ayrılması için 2px yüzey rengi halka taşıyor (border değil box-shadow — rozetin boyunu değiştirmesin). DÜZELTME 2026-09-02: metin rengi #fff sabitti ve koyu temada #F2635A üstünde 3.13:1 kalıyordu. --cp-on-accent zaten temaya göre dönüyor: açıkta #FFFFFF (6.54), koyuda #06121A (6.05). */ .nbadge{position:absolute;top:-1px;right:2px;min-width:18px;height:18px;border-radius:999px; background:var(--red);color:var(--cp-on-accent);z-index:2;box-shadow:0 0 0 2px var(--cp-surface); font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px} .cmt{border-top:1px solid var(--line);padding:9px 0} .cmt:first-child{border-top:0} .cmt .who{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:700} .cmt .who.coach{color:var(--gold)} .cmt .body{margin:3px 0 0;font-size:13.5px;white-space:pre-wrap;word-break:break-word} .tschip{display:inline-block;background:var(--elev2);border:1px solid var(--gold);color:var(--gold);border-radius:999px; padding:2px 9px;font-size:11.5px;font-weight:700;cursor:pointer;margin-right:6px} .cbox{display:flex;gap:8px;margin-top:10px;align-items:flex-end} .cbox textarea{flex:1;min-height:44px;resize:vertical} /* feature 7: soreness body map */ .bmap{display:flex;gap:12px;justify-content:center;margin:10px 0 2px} .bmap svg{flex:1;max-width:150px} .bmap .sil{fill:var(--cp-surface-2);stroke:var(--line);stroke-width:1} .bmap .rg{fill:var(--elev);stroke:var(--line);stroke-width:1.5;cursor:pointer} .bmap .rg.s3{fill:var(--cp-caution);stroke:var(--amber)} .bmap .rg.s4{fill:var(--cp-risk);stroke:var(--cp-risk)} .bmap .rg.s5{fill:var(--cp-risk);stroke:var(--red)} .bmap text{fill:var(--muted);font-size:9px;letter-spacing:1px} .bsum{min-height:18px;text-align:center;margin-bottom:4px} /* feature 12: excel phase programs */ .chip{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px;padding:3px 9px;border-radius:999px} .chip.on{background:var(--maroon);color:var(--cp-on-accent)} .chip.off{background:transparent;border:1px solid var(--line);color:var(--muted)} .xlgrid{border-collapse:collapse;font-size:12px;margin-top:8px} .xlgrid td{border:1px solid var(--line);padding:5px 8px;white-space:nowrap;vertical-align:top} .selcard{border-color:var(--cp-teal);background:var(--cp-teal-wash)} .modal{position:fixed;inset:0;background:rgba(5,8,12,.72);display:flex;align-items:flex-end;justify-content:center;z-index:60} .modal .sheet{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line); border-radius:16px 16px 0 0;width:100%;max-width:520px;padding:18px 18px calc(20px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto} .rpe10{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:2px} .rpe10 button{background:var(--elev);border:1px solid var(--line);color:var(--muted);border-radius:9px;padding:10px 0;font-weight:800;font-size:15px;cursor:pointer} .rpe10 button.on{background:var(--maroon);color:var(--cp-on-accent);border-color:var(--gold)} .dtable{border-collapse:collapse;font-size:12px;width:100%} .dtable th,.dtable td{border-bottom:1px solid var(--line);padding:7px 9px;text-align:left;white-space:nowrap} .dtable th{color:var(--muted);font-size:10px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;user-select:none} .dtable th .ar{color:var(--gold)} .dtable tr.clickable:active{opacity:.7} .dtable tr.selrow{background:var(--cp-teal-wash)} /* ---- season calendar / takvim (periodization) ---- */ .calwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px} .calwrap::-webkit-scrollbar{height:5px} .calwrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px} .gantt{min-width:540px} .gmonths{display:flex;margin-left:100px;border-bottom:1px solid var(--line);margin-bottom:9px} .gmonths span{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:700; padding:0 0 6px 5px;border-left:1px solid var(--line);box-sizing:border-box;overflow:hidden;white-space:nowrap} .gbody{position:relative} .gnowlayer{position:absolute;left:100px;right:0;top:-6px;bottom:0;pointer-events:none;z-index:3} .gnow{position:absolute;top:0;bottom:0;width:2px;background:var(--red);transform:translateX(-1px)} .gnow::before{content:"";position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--red)} .grow{display:flex;align-items:center;margin-bottom:6px} .glabel{width:100px;flex:none;padding-right:9px;box-sizing:border-box;font-size:10.5px;font-weight:700;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gtrack{position:relative;flex:1;height:30px;background:var(--elev);border-radius:8px} .gbar{position:absolute;top:0;bottom:0;min-width:5px;border-radius:8px;background:var(--bc);box-sizing:border-box; display:flex;align-items:center;padding:0 8px;overflow:hidden;cursor:pointer} .gbar b{font-size:11px;font-weight:800;color:var(--cp-on-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gbar.cur{outline:2px solid var(--cp-teal);outline-offset:-2px} .gbar.hid{opacity:.42;border:1px dashed var(--cp-border)} .gtm{position:absolute;top:50%;margin-top:-9px;width:18px;height:18px;border-radius:50%;transform:translateX(-50%); border:2px solid var(--card);box-sizing:border-box;cursor:pointer;z-index:2} .gtm.red{background:var(--red)} .gtm.gold{background:var(--gold)} .gtm.hid{opacity:.45} .calleg{display:flex;flex-wrap:wrap;gap:7px 14px;margin:12px 0 0} .calleg span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)} .calleg i{width:11px;height:11px;border-radius:3px;flex:none} .calleg i.dot{border-radius:50%} /* month grid */ .cmnav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .cmnav b{font-size:14px;font-weight:800} .cmhead,.cmgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .cmhead{margin-bottom:5px} .cmhead div{text-align:center;font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:700} .cmc{aspect-ratio:1;border-radius:9px;background:var(--elev);border:1px solid var(--line);position:relative; display:flex;align-items:flex-start;justify-content:center;padding-top:5px;font-size:12px;font-weight:700;overflow:hidden} .cmc.out{opacity:.3} .cmc.today{border-color:var(--cp-teal)} .cmc .cmstrip{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--bc)} .cmc .cmt{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%} .cmc .cmt.red{background:var(--red)} .cmc .cmt.gold{background:var(--gold)} /* admin list rows */ .calitem{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)} .calitem:last-child{border-bottom:0} .calsw{width:6px;align-self:stretch;min-height:36px;border-radius:3px;flex:none;background:var(--bc)} .calitem .cmeta{flex:1;min-width:0} .calitem .cmeta b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .calitem .cacts{display:flex;gap:6px;flex:none} .iconbtn{background:var(--elev);border:1px solid var(--line);color:var(--muted);border-radius:9px;width:33px;height:33px; display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0} .iconbtn.on{color:var(--gold);border-color:var(--gold)} .iconbtn.danger{color:var(--red)} .iconbtn .msi{font-size:17px} /* current-phase banner + countdown */ .calbanner{display:block;width:100%;text-align:left;cursor:pointer;margin-bottom:12px;padding:13px 14px;border-radius:14px; border:1px solid var(--line);background:linear-gradient(180deg,var(--card),var(--card2));font:inherit;color:inherit} .calbanner .cbtop{display:flex;align-items:center;gap:9px} .calbanner .cbdot{width:10px;height:10px;border-radius:50%;background:var(--bc);flex:none} .calbanner .cbph{font-size:14px;font-weight:800;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .calbar{height:6px;border-radius:3px;background:var(--elev);margin-top:10px;overflow:hidden} .calbar i{display:block;height:100%;background:var(--bc)} .cbcd{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:12px;color:var(--muted)} .cbcd b{color:var(--gold)} .cbcd .msi{font-size:15px;color:var(--gold)} /* monthly report (A4 design) */ .repcover{background:var(--cp-teal);color:var(--cp-on-accent);border-radius:16px;padding:22px;margin-bottom:14px} .repcover .rttl{font-family:Oswald,sans-serif;font-weight:700;font-size:26px;line-height:1;text-transform:uppercase} .repcover .rsub{font-size:12px;color:var(--cp-on-accent);opacity:.78;margin-top:6px} .repcover .link,.repcover button.link{color:var(--cp-on-accent);opacity:.85} .repstats{display:flex;gap:10px;margin-bottom:14px} .repstat{flex:1;border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--card)} .repstat .rl{font-size:10.5px;color:var(--muted)} .repstat .rv{font-family:Oswald,sans-serif;font-weight:700;font-size:24px;line-height:1;margin-top:4px} .repstat .rd{font-family:Oswald,sans-serif;font-weight:600;font-size:10px;margin-top:3px} /* ---- native program execution screen (js/athlete-native.js) ---- */ .npblk.grouped{border-left:2px solid var(--gold);padding-left:10px;margin-top:2px} .npsets{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} .npill{min-width:38px;background:var(--elev);border:1px solid var(--line);color:var(--muted); border-radius:9px;padding:8px 10px;font-weight:800;font-size:12.5px;cursor:pointer;font-family:inherit} .npill.done{background:var(--cp-teal-wash);border-color:var(--cp-teal);color:var(--cp-teal)} .npill.open{border-color:var(--maroon);color:var(--text)} .npform{display:flex;gap:8px;align-items:flex-end;margin-top:10px} .npform .npf{flex:1;min-width:0} .npform label{margin:0 0 4px} .npform input{padding:9px 10px;border-radius:9px} .npform .btn.sm{flex:0 0 auto} .npadj{color:var(--gold);font-weight:900} .nprest{margin-top:10px} .npbar{height:6px;background:var(--elev);border-radius:999px;overflow:hidden} .npbar span{display:block;height:100%;width:100%;background:var(--gold);transition:width .25s linear} /* exercise name = video trigger */ .npname{display:flex;align-items:center;gap:6px} /* conditioning protocol first line — one line only, rest is in the sheet */ .npone{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .npplay{font-size:18px;color:var(--gold);flex:0 0 auto} .npplay.off{color:var(--muted);opacity:.45} /* 16:9 YouTube frame inside the video modal */ .npvid{position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden; background:var(--cp-surface-2);border:1px solid var(--line)} .npvid iframe{position:absolute;inset:0;width:100%;height:100%;border:0} a.btn.npvidlink{display:block;text-align:center;text-decoration:none;color:var(--cp-on-action)} /* ---- reference tools: Toparlanma + Sakatlık Protokolleri ---- Cool slate-indigo instead of the warm card gradient, so the two cards at the bottom of the Program screen read as look-it-up reference and not as another block of today's training. */ .refwrap{margin-top:22px} .refwrap .kicker{color:var(--ref)} .card.refcard{background:linear-gradient(180deg,var(--refbg1),var(--refbg2)); border-color:var(--refline);border-left:3px solid var(--ref)} .card.refcard>.between>b{color:var(--ref)} .card.refcard .ex{border-bottom-color:var(--refline)} .card.refcard select,.card.refcard input{border-color:var(--refline)} /* ---- athlete native program: seçmeli gün parçası şeridi (js/athlete-native.js) ---- */ .npvar{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line);margin:0 0 14px; overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none} .npvar::-webkit-scrollbar{display:none} .npvar button{flex:0 0 auto;white-space:nowrap} .npvar button{background:transparent;border:0;border-bottom:2px solid transparent; color:var(--cp-slate-2);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;padding:12px 2px;min-height:44px;cursor:pointer} .npvar button.on{color:var(--text);border-bottom-color:var(--cp-teal)} .npvar svg{margin-left:auto;flex:none;color:var(--cp-slate-2)} /* ---- athlete native program: >4 day tabs scroll (js/athlete-native.js) ---- */ .seg.npdays{overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none} .seg.npdays::-webkit-scrollbar{display:none} .seg.npdays button{flex:0 0 auto;padding:9px 14px;white-space:nowrap} /* ---- coach native program builder (js/coach-builder.js) ---- */ .seg.pbweeks{overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none} .seg.pbweeks::-webkit-scrollbar{display:none} .seg.pbweeks button{flex:0 0 auto;padding:9px 15px} .chip.pbchip{font-size:12px;letter-spacing:0;padding:7px 13px} .pbf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px} .pbf>div{min-width:0} .pbf .wide{grid-column:1/-1} .pbf label{margin:0 0 3px;font-size:10px} .pbf input,.pbf textarea{padding:8px 9px;border-radius:9px;font-size:13px} .pbmode{width:100%;text-align:center} .pbmv{display:flex;gap:4px;flex:none} .pbmv button{background:var(--elev);border:1px solid var(--line);color:var(--muted);border-radius:8px; width:30px;height:30px;font-size:15px;line-height:1;cursor:pointer;font-family:inherit;flex:none;padding:0} .pbmv button:disabled{opacity:.3} /* ---- Aralık şeridi (Performans ekranı, sporcu görünümü — js/perf.js) ---- Pozisyon grubunun en düşük–en yüksek aralığı bir ray; grup ortalaması ince bir çizgi, sporcunun kendi değeri bir nokta. Değeri UZUNLUK değil KONUM kodluyor, o yüzden sıfır-tabanlı bar sorunu (birbirine yakın süreler aynı görünüyor) burada yok. Her metrikte sağa doğru = daha iyi. */ .rng{position:relative;height:10px;margin:8px 0 5px} .rng__trk{position:absolute;inset:2px 0;border-radius:3px;background:var(--cp-border)} .rng__avg{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--cp-slate);border-radius:1px} .rng__you{position:absolute;top:-2px;width:14px;height:14px;margin-left:-7px;border-radius:50%; background:var(--rng-c,var(--cp-teal));box-shadow:0 0 0 2px var(--cp-surface)} /* Renklendirme (2026-09-05) — --rng-c metriğin KİMLİK rengi, durumu değil. Değişkeni taşımayan şeritler (perf-bafa.js) fallback ile teal kalıyor. Rampa "sağa doğru = daha iyi"yi yazıyla değil açıklıkla söylüyor; açıklık tek yönlü arttığı için gri tonlamada da okunuyor. --cp-ordinal-* BİLEREK kullanılmadı: o ailenin anlamı ters (low=iyi, high=risk), şeride konsa en iyi uç kırmızı olurdu. color-mix() yerine opacity'li ::after: color-mix Safari 16.2 öncesinde yok, sahadaki telefonların bir kısmı orada. */ .rng--tint .rng__trk::after{content:"";position:absolute;inset:0;border-radius:3px; background:linear-gradient(90deg,transparent 0%,var(--rng-c) 100%);opacity:.38} /* Satırın sol kenarı: etiketi, ham değeri ve şeridi tek metriğe bağlayan şey. 3px — grid parçası değil, bkz. yarıçap sınırı: köşe yok. */ .ex--metric{border-left:3px solid var(--rng-c);padding-left:10px} /* Kulüp rengi yalnız burada; bkz. perfClubDotHTML(). */ .cdot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px} .pfband{display:inline-block;margin-top:8px;padding:3px 12px;border-radius:999px; font-size:11px;letter-spacing:.04em} .rng__lbl{display:flex;justify-content:space-between;font-size:10px;color:var(--cp-slate)} @media print{ /* .cp-sidebar added 2026-08-09: the coach shell replaced .topbar/.navbar with a 240px sidebar, which would otherwise print as a column down the left of every page of the monthly report. */ .navbar,.topbar,.cp-sidebar,#mprev,#mnext,#mexport,#mprint,.link{display:none!important} .cp-shell{display:block!important;min-width:0!important} .cp-main{padding:0!important} /* Paper is always white: these MUST stay literals, not tokens, or a coach printing from the dark theme gets off-white ink on white. */ body{background:#fff!important;color:#0F172A!important} .card{border:1px solid #ddd;break-inside:avoid;background:#fff!important} .repcover{border-radius:0;margin:-16px -16px 14px;background:#2563EB!important;-webkit-print-color-adjust:exact;print-color-adjust:exact} .wrap{max-width:none} } /* ---- giriş ekranı sahnesi (2026-09-02) --------------------------------- Üç saha karesi 6 saatte bir dönüyor; hangisinin geldiğini core.js'teki authShot() belirler ve 'ye shot-1 / shot-2 / shot-3 yazar. Her karenin KENDİ kadrajı, KENDİ perdesi ve KENDİ kart dolgusu var: kartın arkasına düşen bandın parlaklığı kareye göre 0.12 ile 0.71 arasında değişiyor, yani tek ayar üçüne birden uymuyor. Ölçümler: login_screen_background proje notu. Fotoğraf yüklenene kadar altındaki --cp-bg formu okunur tutar. Perdenin ara durakları koyu lacivert bir rgba literali (gradient token alamıyor) ama SON durak var(--cp-bg): tuval değeri değişirse dipteki ek görünmesin diye. Kadraj değerleri 390x844'te ölçüldü: kartın üstünde fotoğrafa kalan tek serbest bant ~270 px, üç kare de konusunu oraya getirecek şekilde pan'lendi. */ /* Masaüstünde sahne TÜM ekranı kaplamamalı: fotoğraf yüksekliğin %200'üne ölçekleniyor, geniş ekranda ortada ~830 px'lik bir dikey slab kalıyordu. Katman .wrap ile aynı 520 px'lik telefon çerçevesine kilitli, yani fotoğrafın kenarı formun kenarıyla hizalanıyor; yanlarda düz tuval kalıyor. Telefonda görüntü alanı 520'nin altında olduğu için hiçbir şey değişmiyor. */ .authbg{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px; z-index:0;background:var(--cp-bg);overflow:hidden;pointer-events:none} .authbg-img{position:absolute;inset:-3px;background-repeat:no-repeat;filter:blur(2px)} .authbg-scrim{position:absolute;inset:0} body.shot-1 .authbg-img{background-image:url("bg/login-1.webp");background-size:auto 200%;background-position:50% 55%} body.shot-2 .authbg-img{background-image:url("bg/login-2.webp");background-size:auto 200%;background-position:50% 62%} body.shot-3 .authbg-img{background-image:url("bg/login-3.webp");background-size:auto 160%;background-position:50% 69%} body.shot-1 .authbg-scrim{background:linear-gradient(180deg,rgba(15,21,28,.34) 0%,rgba(15,21,28,.26) 20%, rgba(15,21,28,.70) 46%,rgba(15,21,28,.94) 68%,var(--cp-bg) 100%)} body.shot-2 .authbg-scrim{background:linear-gradient(180deg,rgba(15,21,28,.32) 0%,rgba(15,21,28,.24) 22%, rgba(15,21,28,.50) 52%,rgba(15,21,28,.84) 82%,var(--cp-bg) 100%)} /* 3 numaralı karede gökyüzü neredeyse beyaz (248,247,252): %55 perdede marka yazısı 3.84'e düşüyordu, bu yüzden bu karenin üst perdesi %66. */ body.shot-3 .authbg-scrim{background:linear-gradient(180deg,rgba(15,21,28,.66) 0%,rgba(15,21,28,.58) 22%, rgba(15,21,28,.72) 52%,rgba(15,21,28,.88) 82%,var(--cp-bg) 100%)} body[class*="shot-"] .center{position:relative;z-index:1} /* 2 numaralı kare (üçlü mücadele) cam kartı kaldırabilen TEK kare: kartın arkası koyu çim + siyah forma. brightness(.42) olmadan üçüncül metin 3.76'ya düşüyor — filtre süs değil, AA'yı taşıyan şey. Diğer iki karede kart opak kalır. DİKKAT: rgba(22,30,39) = --cp-surface'ın bugünkü değeri (#161E27). Saydamlık token alamadığı için elle yazılı. 2026-09-04'te koyu tema tazelemesiyle birlikte güncellendi (#12202E → #141F2C, oyuk #0E1A26 → #0C1622). Yüzey token'ları bir daha değişirse bu üç literal de elle güncellenmeli — otomatik takip etmiyorlar. */ body.shot-2 .center>.card{background:rgba(22,30,39,.92);border-color:rgba(39,51,63,.72); -webkit-backdrop-filter:blur(24px) brightness(.42) saturate(120%); backdrop-filter:blur(24px) brightness(.42) saturate(120%)} body.shot-2 .center>.card input,body.shot-2 .center>.card select{background:rgba(30,40,51,.55);border-color:rgba(39,51,63,.85)} body.shot-2 .center>.card .seg{background:rgba(30,40,51,.5)} /* Sahne varken marka bloğu küçülür: 390x844'te form ekranın neredeyse tamamını kaplıyor, rozet 88 -> 68 px o serbest bandı büyütmenin en ucuz yolu. */ body[class*="shot-"] .brand{margin-bottom:16px} body[class*="shot-"] .badge{width:68px;height:68px} body[class*="shot-"] .brand h1{margin:10px 0 2px;font-size:26px} /* ---- Kendin Yap Stüdyosu (#/program/diy — js/athlete-diy.js) ------------- Renk kuralı category_palette_swap.md: TEK mavi aksan (--cp-teal), nötr iskelet slate, durum rengi YALNIZ uyarı taşıdığı yerde. Faz kartları birbirinden renkle DEĞİL numara rozeti ve dolgu durumuyla ayrışıyor — yedi hue ekranı parçalardı ve emekli edilen kategori matrisinin aynısı olurdu. Mavi zemin üstündeki mürekkep her yerde --cp-on-accent: yeni mavi (#60A5FA koyu temada) üstünde beyaz 1.9:1 veriyor, literal #fff kırılır. */ /* Üst ölçüm: kurulan hareket / hedef. Oyunlaştırma burada — rakam değil dolu oranı okunuyor, kilometre taşı etiketi (Taslak/Dengeli/Tam Kurulum) altında. */ .diymeter{display:flex;align-items:center;gap:14px} .diymeter .diymeter-num{font-family:Oswald,sans-serif;font-weight:600;font-size:34px; line-height:1;letter-spacing:1px;color:var(--text);flex:none} .diymeter .diymeter-num span{font-size:17px;color:var(--muted)} .diymeter-body{flex:1;min-width:0} .diybar{height:6px;border-radius:999px;background:var(--elev2);overflow:hidden;margin-top:7px} .diybar>i{display:block;height:100%;border-radius:999px;background:var(--cp-teal); transition:width .18s ease} .diybar.full>i{background:var(--cp-good)} /* Faz kartı. Başlık satırı tıklanabilir (akordeon), sağda hedef sayacı. */ .diyphase{margin-bottom:12px} .diyphase-hd{display:flex;align-items:center;gap:11px;cursor:pointer} .diyphase-hd:active{opacity:.7} .diyno{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center; justify-content:center;font-family:Oswald,sans-serif;font-size:13px;font-weight:600; background:var(--elev2);color:var(--muted);border:1px solid var(--line)} .diyphase.filled .diyno{background:var(--cp-teal);color:var(--cp-on-accent);border-color:var(--cp-teal)} .diyphase-t{flex:1;min-width:0} .diyphase-t b{font-size:14.5px;display:block} .diyphase-t .diyphase-sub{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .diycount{flex:none;font-family:Oswald,sans-serif;font-size:15px;font-weight:600;color:var(--muted)} .diyphase.filled .diycount{color:var(--cp-teal)} /* Hacim seçici: − N + — .pbmv ile aynı dokunma hedefi, 30px kare. */ .diystep{display:flex;align-items:center;gap:6px;flex:none} .diystep button{background:var(--elev);border:1px solid var(--line);color:var(--text); border-radius:8px;width:30px;height:30px;font-size:17px;line-height:1;cursor:pointer; font-family:inherit;padding:0;flex:none} .diystep button:disabled{opacity:.3;cursor:default} .diystep .diystep-v{font-family:Oswald,sans-serif;font-size:16px;font-weight:600; min-width:18px;text-align:center;color:var(--text)} /* Tuvale bırakılan hareket. Sol taraftaki tutamak basılı tutulunca sürükleme başlıyor (pointer-event; iOS Safari native draggable'ı dokunmada çalışmaz). */ /* Satır iki katlı: üstte tutamak + ad + kaldır, altta set/tekrar alanları. 2026-09-09'da flex-row'dan column'a çevrildi (set/tekrar sporcuya açıldı). */ .diyitem{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line); background:var(--elev);border-radius:11px;padding:9px 10px;margin-top:7px; touch-action:pan-y} .diyitem-hd{display:flex;align-items:center;gap:10px} .diyitem .diygrip{flex:none;color:var(--cp-slate-2);cursor:grab;padding:2px;line-height:0; touch-action:none} .diyitem .diyname{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35; overflow-wrap:anywhere} .diyitem .diymeta{font-size:11px;color:var(--muted);font-weight:400;white-space:nowrap} .diyitem .diyx{flex:none;background:transparent;border:0;color:var(--cp-slate-2); font-size:19px;line-height:1;cursor:pointer;padding:3px 4px;font-family:inherit} .diyitem.dragging{opacity:.92;border-color:var(--cp-teal); box-shadow:0 8px 22px rgba(15,23,42,.22);position:relative;z-index:5} .diyitem.ghost{opacity:.35;border-style:dashed;background:transparent} /* Set/tekrar alanları. Tekrar alanı TEXT: "8-10", "30 sn", "400 m" hepsi geçerli girdi — sayıya zorlamak kondisyon ve mobiliteyi kırardı. */ .diyfields{display:flex;align-items:center;gap:7px;padding-left:29px} .diyfields label{margin:0;font-size:9.5px;letter-spacing:.09em;flex:none} .diyfields .diyx-sep{color:var(--cp-slate-2);font-size:12px;flex:none} .diyf{background:var(--card);border:1px solid var(--line);border-radius:8px; color:var(--text);padding:6px 8px;font-size:13px;font-family:inherit; width:auto;min-width:0} .diyf:focus{border-color:var(--cp-teal);outline:2px solid var(--cp-teal);outline-offset:1px} .diyf-s{width:46px;text-align:center} .diyf-r{flex:1;min-width:64px} [data-theme="dark"] .diyf{color-scheme:dark} .diyhint{font-size:11px;color:var(--muted);padding:8px 2px 0} /* Boş faz: hedef varken "eksik", hedef 0 iken sadece davet. */ .diyempty{border:1px dashed var(--line);border-radius:11px;padding:14px;margin-top:8px; text-align:center;font-size:12.5px;color:var(--muted)} /* Uyarı şeridi. İki seviye: dikkat (sarı) ve risk (kırmızı). Kart değil şerit — tuvalin akışını kesmeden faz kartının içinde duruyor. */ .diywarn{display:flex;align-items:flex-start;gap:9px;border-radius:10px;padding:9px 11px; margin-top:9px;font-size:12.5px;line-height:1.45} .diywarn.caution{background:var(--cp-caution-wash);border:1px solid var(--cp-caution);color:var(--cp-caution)} .diywarn.risk{background:var(--cp-risk-wash);border:1px solid var(--cp-risk);color:var(--cp-risk)} .diywarn b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase} .diywarn .msi{font-size:17px;line-height:1.2;flex:none} /* Yük rozeti — havuzdaki ve tuvaldeki yüksek yüklü hareketin yanında. */ .diyload{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; border-radius:999px;padding:2px 7px;border:1px solid var(--cp-caution);color:var(--cp-caution)} /* Hareket havuzu (modal). Liste kendi içinde kayıyor ki arama kutusu ve kategori çipleri sabit kalsın. */ .diypool{max-height:46vh;overflow-y:auto;margin-top:10px;-webkit-overflow-scrolling:touch} .diypool .diyprow{display:flex;align-items:center;gap:10px;width:100%;text-align:left; background:transparent;border:0;border-bottom:1px solid var(--line); padding:11px 2px;cursor:pointer;font-family:inherit;color:var(--text)} .diypool .diyprow:active{opacity:.6} .diypool .diyprow .diypn{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35; overflow-wrap:anywhere} .diypool .diyprow .diypc{font-size:11px;color:var(--muted);font-weight:400} .diypool .diyprow .msi{color:var(--cp-teal)} .diypool .diyprow.added{opacity:.45} /* Kilit kartı — yetkisi olmayan sporcunun gördüğü tek şey. */ .diyfoot{display:flex;gap:8px;align-items:stretch} .diyfoot .diysave{flex:0 0 auto} .diyfoot .diygo{flex:1;white-space:nowrap} .diylock{text-align:center;padding:30px 20px} .diylock .msi{font-size:40px;color:var(--cp-slate-2)} /* ---- Kendin Yap yönetimi, koç ekranı (js/coach-diy.js) ------------------ Hareket seçici: 660 satırlık liste, satır = tek dokunuşluk aç/kapat. Onay kutusu DEĞİL: tüm satır tıklanabilir olsun ve dolgu/kenar tema token'larını takip etsin diye kendi kutusu var. */ .cdiylist{max-height:52vh;overflow-y:auto;margin-top:10px;-webkit-overflow-scrolling:touch; border-top:1px solid var(--cp-border)} .cdiyrow{display:flex;align-items:center;gap:11px;width:100%;text-align:left; background:transparent;border:0;border-bottom:1px solid var(--cp-border); padding:10px 2px;cursor:pointer;font-family:inherit;color:var(--cp-navy)} .cdiyrow:hover{background:var(--cp-surface-2)} .cdiybox{flex:none;width:19px;height:19px;border-radius:5px;border:1.5px solid var(--cp-border); background:var(--cp-surface);display:flex;align-items:center;justify-content:center} .cdiyrow.on .cdiybox{background:var(--cp-teal);border-color:var(--cp-teal);color:var(--cp-on-accent)} .cdiybox .msi{font-size:14px} .cdiyn{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35;overflow-wrap:anywhere} .cdiyn .cdiyc{font-size:11px;color:var(--cp-slate);font-weight:400} /* ===================================================================== * DANIŞMANLIK (#/consulting) — üç aksanlı bölge + bento ızgara 2026-09-11. KAPSAM BİLEREK DAR. Üç aksanlı rebrand henüz uygulamanın geri kalanına inmedi (bkz. figma-design-system notu: ~40 --cp-* referansı + --gold/ --maroon emekliliği tek commit'e sığmaz). Bu blok yalnız `.cs` kökünün ALTINDA yaşıyor, dolayısıyla dışarı sızmıyor ve rebrand'in koddaki ilk ölçülebilir provası oluyor. ÜÇ AKSAN — ikili katman. Ham marka hex'leri açık zeminde çöküyor (#10B981 beyaza karşı 2.54, #F97316 2.80), o yüzden açık temada ölçülmüş koyu ikizleri kullanılıyor. Ölçüm (WCAG 2.1, bu uygulamanın gerçek yüzeylerine karşı — açık kart #FFFFFF, koyu kart #161E27): emerald açık #005539 8.90 koyu #10B981 6.63 violet açık #8454ED 4.70 koyu #8B5CF6 3.97 -> METİN için #A78BFA 6.18 orange açık #BF5400 4.68 koyu #F97316 6.00 Violet koyu temada 3.97 ile metin eşiğini (4.5) GEÇEMİYOR; Berkay'ın #8B5CF6'sı çizgi/dolgu olarak duruyor (grafik eşiği 3.0 rahat geçiliyor), metin ikizi ayrı token. Bu satırı "sadeleştirip" tek violet'e indirme. WASH ÜSTÜNE AKSAN MÜREKKEBİ YAZMA. Ölçüldü: violet 4.29-4.46, orange 3.99 — wash'ı eşiği geçecek kadar açmak wash'ı görünmez yapıyor (1.04). Kural: wash = dolgu + GÖVDE mürekkebi; aksan kenarda, noktada ve düz yüzeydeki metinde taşınır. İKİ EKSEN AYRI (kurgu §7, değişmedi): aciliyet/durum = semantik · kategori = DÜZ METİN, renk taşımaz. Turuncu YALNIZ uyarı taşır (acil + cevap bekleyen vaka, yük uyarısı). Emerald yalnız "iyi/uygulandı". Violet ekranın kimliği: uzman blokları, birincil eylem. Dördüncü ton slate — "bekliyor" bir uyarı değil, durum. * ===================================================================== */ .cs, .rsc{ --cs-em:#005539; --cs-em-ink:#005539; --cs-em-wash:#E6F3EE; --cs-vi:#8454ED; --cs-vi-ink:#8454ED; --cs-vi-wash:#F0EAFD; --cs-or:#BF5400; --cs-or-ink:#BF5400; --cs-or-wash:#FBEADC; --cs-sl:#64748B; --cs-sl-ink:#64748B; --cs-sl-wash:#F1F5F9; --cs-fill:#5F2BBF; /* birincil dolgu · beyaz mürekkeple 8.13 */ --cs-on-fill:#FFFFFF; } [data-theme="dark"] .cs, [data-theme="dark"] .rsc{ --cs-em:#10B981; --cs-em-ink:#10B981; --cs-em-wash:#122E27; --cs-vi:#8B5CF6; --cs-vi-ink:#A78BFA; --cs-vi-wash:#272042; --cs-or:#F97316; --cs-or-ink:#F97316; --cs-or-wash:#33210F; --cs-sl:#8595A6; --cs-sl-ink:#8595A6; --cs-sl-wash:#1E2833; --cs-fill:#A78BFA; /* koyu zeminde dolgu AÇIK -> mürekkep KOYU, 6.74 */ --cs-on-fill:#0F151C; } /* Birincil eylem bu bölgede violet. --cp-teal repoint EDİLMİYOR: o token 30 dosyada geçiyor, burada üzerine yazmak kapsamı sessizce genişletirdi. */ .cs .cp-btn--primary{ background:var(--cs-fill); border-color:var(--cs-fill); color:var(--cs-on-fill); } .cs .cp-btn--primary:hover{ filter:brightness(1.08); } .cs .cp-btn--secondary{ border-color:var(--cs-vi); color:var(--cs-vi-ink); background:transparent; } .cs .cp-btn--secondary:hover{ background:var(--cs-vi-wash); } /* --- bento ızgara ---------------------------------------------------- * auto-fill + minmax: sabit kolon sayısı YOK. 414px'te tek kolon, geniş masaüstünde iki-üç. Breakpoint yazmıyoruz çünkü .cp-main'in genişliği sidebar'a ve tema ayarına göre değişiyor; kolon sayısını içerik belirlesin. */ .cs-bento{ display:grid; gap:var(--cp-space-4); grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); } .cs-bento--wide{ grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); } .cs-span-all{ grid-column:1/-1; } /* Ölçü döşemeleri — üst satır. min 140px: üç hane + etiket dar kutuya sığar. */ .cs-tiles{ display:grid; gap:var(--cp-space-3); grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); margin-bottom:var(--cp-space-5); } .cs-tile{ background:var(--cp-surface); border:1px solid var(--cp-border); border-left:3px solid var(--cs-sl); border-radius:0 var(--cp-radius-md) var(--cp-radius-md) 0; padding:var(--cp-space-4) var(--cp-space-4); } .cs-tile--vi{ border-left-color:var(--cs-vi); } .cs-tile--or{ border-left-color:var(--cs-or); } .cs-tile--em{ border-left-color:var(--cs-em); } .cs-tile b{ display:block; font-family:var(--cp-font-heading); font-size:30px; font-weight:600; line-height:1.05; color:var(--cp-text); font-variant-numeric:tabular-nums; } .cs-tile span{ display:block; margin-top:6px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--cp-text-3); } .cs-tile--vi b{ color:var(--cs-vi-ink); } .cs-tile--or b{ color:var(--cs-or-ink); } .cs-tile--em b{ color:var(--cs-em-ink); } /* Vaka kartı — sol kenar DURUMU taşır. Turuncu yalnız acil+cevap bekleyende. */ .cs-case{ display:block; width:100%; text-align:left; cursor:pointer; background:var(--cp-surface); border:1px solid var(--cp-border); border-left:3px solid var(--cp-border); border-radius:0 var(--cp-radius-lg) var(--cp-radius-lg) 0; padding:var(--cp-space-5); } .cs-case:hover{ border-color:var(--cs-vi); } .cs-case:focus-visible{ outline:var(--cp-focus); outline-offset:2px; } .cs-case--sent{ border-left-color:var(--cs-sl); } .cs-case--answered{ border-left-color:var(--cs-vi); } .cs-case--applied{ border-left-color:var(--cs-em); } .cs-case--alert{ border-left-color:var(--cs-or); background:var(--cs-or-wash); } /* Chip: düz yüzeyde aksan mürekkebi + aksan kenar. Wash üstünde DEĞİL. */ .cs-chip{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:var(--cp-radius-pill); border:1px solid var(--cp-border); background:transparent; color:var(--cp-text-2); font-size:11px; font-weight:700; letter-spacing:.04em; white-space:nowrap; } .cs-chip--em{ border-color:var(--cs-em); color:var(--cs-em-ink); } .cs-chip--vi{ border-color:var(--cs-vi); color:var(--cs-vi-ink); } .cs-chip--or{ border-color:var(--cs-or); color:var(--cs-or-ink); } .cs-chip--sl{ border-color:var(--cs-sl); color:var(--cs-sl-ink); } /* Kategori KİMLİK taşır ama RENK taşımaz — beş enumun hepsine hue dağıtmak emekli beş renkli matrisin aynı hatası olurdu. */ .cs-cat{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--cp-text-3); } /* Bölüm kartı — başlığın yanında ince aksan çubuğu. Kart zemini nötr kalır, whitespace'i renk değil boşluk taşır. */ .cs-sec{ background:var(--cp-surface); border:1px solid var(--cp-border); border-radius:var(--cp-radius-lg); padding:var(--cp-space-6); } .cs-sec__h{ display:flex; align-items:center; gap:10px; margin:0 0 var(--cp-space-4); } .cs-sec__h::before{ content:""; width:3px; height:16px; border-radius:2px; background:var(--cs-sl); flex:none; } .cs-sec--vi .cs-sec__h::before{ background:var(--cs-vi); } .cs-sec--em .cs-sec__h::before{ background:var(--cs-em); } .cs-sec--or .cs-sec__h::before{ background:var(--cs-or); } /* Uyarı şeridi — yük uyarısı ve onam kapısı. Wash + GÖVDE mürekkebi. */ .cs-note{ border:1px solid var(--cs-or); border-left-width:3px; background:var(--cs-or-wash); border-radius:0 var(--cp-radius-md) var(--cp-radius-md) 0; padding:var(--cp-space-4); color:var(--cp-text); } .cs-note--vi{ border-color:var(--cs-vi); background:var(--cs-vi-wash); } .cs-note--em{ border-color:var(--cs-em); background:var(--cs-em-wash); } .cs-kv{ display:flex; gap:12px; padding:9px 0; border-top:1px solid var(--cp-border); align-items:baseline; } .cs-kv:first-child{ border-top:0; } .cs-kv__k{ flex:0 0 96px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--cp-text-3); } .cs-kv__v{ flex:1 1 auto; min-width:0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } .cs-kv__x{ flex:0 0 auto; font-size:12px; color:var(--cp-text-3); } .cs-msg{ padding:var(--cp-space-4) 0; border-top:1px solid var(--cp-border); } .cs-msg:first-of-type{ border-top:0; } /* 414px: kenar payını kart yutmasın, kolon tek olsun. */ @media (max-width:520px){ .cs-bento,.cs-bento--wide{ grid-template-columns:1fr; } .cs-sec{ padding:var(--cp-space-4); } .cs-case{ padding:var(--cp-space-4); } .cs-kv{ flex-wrap:wrap; } .cs-kv__k{ flex-basis:100%; } } /* Nokta göstergeleri bu bölgede üç aksana bağlanıyor: --cp-good/caution/risk hâlâ uygulamanın mavi-tabanlı semantik ailesi, `.cs` içinde onu kullanmak dördüncü ve beşinci hue'yu ekrana sokardı. */ .cs .cp-dot--good{ background:var(--cs-em); } .cs .cp-dot--caution{ background:var(--cs-sl); } .cs .cp-dot--risk{ background:var(--cs-or); } /* Akordiyon durum noktası da üç aksana bağlanıyor (accLine tone'ları: caution = öneri/onaylı, good = uygulandı). Halka spread shadow, stroke değil — mevcut desen korundu. */ .cs .accln__d.caution{ background:var(--cs-vi); box-shadow:0 0 0 3px var(--cs-vi-wash); } .cs .accln__d.good{ background:var(--cs-em); box-shadow:0 0 0 3px var(--cs-em-wash); } .cs .accln__d.risk{ background:var(--cs-or); box-shadow:0 0 0 3px var(--cs-or-wash); } .cs .accln__d.info{ background:var(--cs-sl); box-shadow:0 0 0 3px var(--cs-sl-wash); } /* ================= SPORCU — PC GÖRÜNÜMÜ (body.athlete-d, 2026-10-14) =============== Sporcu #/profile'da PC seçerse coachShell iskeleti (.cp-shell) açılıyor. Telefon çerçevesi (.wrap 520px) kalkıyor; sporcu ekranları telefon için çizildiği için içerik 720px'te ortalanıyor (800 - 2x40 dolgu). .cp-shell'in 1280 alt sınırı yalnız burada kalkıyor: 240 + 800 sığıyor, 768-1279 arasında yatay kaydırma olmasın. Mobil sporcu (athlete-d YOK) ve koç bu bloktan etkilenmez. */ body.athlete-d .wrap{ max-width:none; display:block; } body.athlete-d .cp-shell{ min-width:0; } body.athlete-d .cp-main{ max-width:800px; margin:0 auto; } /* ================= KOÇ PANELİ — MOBİL GÖRÜNÜM (body.coach-m, 2026-09-30) ============ Koç mobil görünümde sporcu kabuğunun AYNISINI kullanır (coachMobileShell, core.js): .topbar + .content + yüzen .navbar. Anahtar = localStorage "bfc_coach_layout" (yan menüde "Mobil görünüm", mobil üst barda masaüstü ikonu); seçim yoksa <768px mobil açılır. Masaüstü (body.role-coach, coach-m YOK) bu bloktan HİÇ etkilenmez — her kural body.coach-m altında. */ .cp-mobile-only{ display:none; } body.coach-m .cp-mobile-only{ display:block; } /* Sporcu telefon çerçevesi geri gelir (role-coach onu kaldırıyordu, L~50). */ body.coach-m .wrap{ max-width:520px; display:flex; } body.coach-m .topbar .cp-iconbtn{ width:36px; height:36px; } /* Masaüstü pencerede mobil görünüm seçilmişse bar 520px çerçevenin içinde kalsın (sporcu barı gibi kenardan kenara uzamasın). 552 = 520 + 2×16 kenar. */ @media (min-width:552px){ body.coach-m .navbar{ left:calc(50% - 244px); right:calc(50% - 244px); } } /* 6'dan fazla sekme (yalnız süper admin): sıkıştırmak yerine yatay kaydır. */ body.coach-m .navbar--scroll{ overflow-x:auto; scrollbar-width:none; } body.coach-m .navbar--scroll::-webkit-scrollbar{ display:none; } body.coach-m .navbar--scroll .tab{ flex:0 0 48px; } /* Masaüstü için yazılmış koç ekranları telefon çerçevesine uysun. */ body.coach-m #view .cp-h1{ font-size:30px !important; } body.coach-m #view div[style*="display:flex"]:has(> div > .cp-h1), body.coach-m #view div[style*="display:flex"]:has(> .cp-h1){ flex-wrap:wrap; gap:14px !important; } body.coach-m #view .cp-field[style*="width"]{ width:100% !important; flex:1 1 100%; } body.coach-m .cp-grid-2, body.coach-m .cp-grid-3, body.coach-m .cp-grid-4{ grid-template-columns:1fr; } body.coach-m .cp-bcgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } /* Ekranlara inline yazılmış İKİ KOLONLU yerleşim ızgaraları (bento) tek sütun. Sıralama satırları gibi küçük veri ızgaralarına dokunulmuyor. */ body.coach-m #view [style*="grid-template-columns:1fr 1fr"], body.coach-m #view [style*="grid-template-columns:repeat(2,1fr)"], body.coach-m #view [style*="minmax(560px"], body.coach-m #view [style*="grid-template-columns:minmax(0,1.35fr)"]{ grid-template-columns:minmax(0,1fr) !important; } body.coach-m #view canvas, body.coach-m #view img{ max-width:100%; } /* .cp-table satırları 2×2 karta döner. Kolon şablonu inline yazıldığı için !important şart. Etiketler başlıktan kopyalanıyor (labelMobileTables, core.js). */ body.coach-m #view .cp-table__head{ display:none; } body.coach-m #view .cp-table__row{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; align-items:end; gap:10px 16px !important; padding:14px 16px; } body.coach-m #view .cp-table__row > :first-child{ grid-column:1 / -1; } body.coach-m #view .cp-table__row > *{ text-align:left !important; } body.coach-m #view .cp-table__row > [data-l]::before, body.coach-m #view table.dtable td[data-l]::before{ content:attr(data-l); display:block; margin-bottom:2px; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cp-slate); } /* .dtable (Program ekranı) — her satır bir kart, hücreler etiket | değer. */ body.coach-m #view table.dtable, body.coach-m #view table.dtable tbody, body.coach-m #view table.dtable tr{ display:block; width:100%; } body.coach-m #view table.dtable thead{ display:none; } body.coach-m #view table.dtable tr{ border:1px solid var(--cp-border); border-radius:var(--cp-radius-sm); padding:8px 12px; margin-bottom:10px; background:var(--cp-surface); } body.coach-m #view table.dtable td{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; border:0; border-top:1px solid var(--cp-border); white-space:normal; text-align:right; } body.coach-m #view table.dtable td:first-child{ border-top:0; } body.coach-m #view table.dtable td[data-l]::before{ display:inline; margin:0; text-align:left; flex:none; } body.coach-m #view table.dtable td:empty{ display:none; } /* ============ RAMS Flag koçu Programlar ekranı (js/coach-rams-programs.js, 2026-09-30) ============ Renk: üç aksan tokenları (.cs ile ORTAK — ".cs, .rsc" kuralı yukarıda). Kural aynı: wash = dolgu + gövde mürekkebi (--cp-navy), aksan yalnız sol kenarda ve işarette. yeşil = antrenman, mor = üniversite, turuncu = final/kamp/etap/lig (önemli tarih), slate = tatil/off-sezon, nötr = okul dönemi. */ .rsp-kicker{ margin-top:0; } #rspSample{ max-width:760px; } .rsp-exhead{ width:100%; background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; text-align:left; } .rsp-exbody{ margin-top:4px; } .rsp-exbody .npvar button[disabled]{ cursor:default; } .rsc-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; } .rsc-bar .rsc-view{ flex:0 1 220px; margin:0; } .rsc-bar .rsc-now{ margin-top:0; } .rsc-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; } .rsc-chip{ border:1px solid var(--cp-border); background:transparent; color:var(--cp-slate); border-radius:999px; padding:6px 11px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; } .rsc-chip.is-on{ background:var(--cp-surface-2); color:var(--cp-navy); border-color:var(--cp-slate-2); } .rsc-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--cp-slate); margin-bottom:12px; } .rsc-lg{ display:inline-flex; align-items:center; gap:6px; } .rsc-sw{ width:14px; height:10px; border-left:3px solid; border-radius:2px; display:inline-block; } /* tonlar — blok, liste etiketi, lejant ve detay kartı ortak */ .rsc .rsc-t-em { background:var(--cs-em-wash); border-color:var(--cs-em); } .rsc .rsc-t-vi { background:var(--cs-vi-wash); border-color:var(--cs-vi); } .rsc .rsc-t-or { background:var(--cs-or-wash); border-color:var(--cs-or); } .rsc .rsc-t-sl { background:var(--cs-sl-wash); border-color:var(--cs-sl); } .rsc .rsc-t-nt { background:var(--cp-surface-2); border-color:var(--cp-slate-2); } .rsc .rsc-t-day{ background:transparent; border-color:var(--cs-sl); border-left-style:dotted; } /* Tablo görünümü */ .rsc-scroll{ overflow-x:auto; border:1px solid var(--cp-border); border-radius:12px; background:var(--cp-surface); } .rsc-grid{ display:grid; min-width:780px; } .rsc-hd{ position:sticky; top:0; z-index:3; background:var(--cp-surface-2); border-bottom:1px solid var(--cp-border); padding:10px 8px; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cp-slate); } .rsc-wk, .rsc-dt{ display:flex; align-items:center; padding:0 8px; font-size:12px; color:var(--cp-slate); border-bottom:1px solid var(--cp-border); font-variant-numeric:tabular-nums; } .rsc-rowbg{ border-bottom:1px solid var(--cp-border); } .rsc-wk.is-now, .rsc-dt.is-now, .rsc-rowbg.is-now{ background:var(--cp-teal-wash); } .rsc-wk.is-now, .rsc-dt.is-now{ color:var(--cp-navy); font-weight:700; } .rsc-nowline{ pointer-events:none; align-self:start; border-top:2px solid var(--cp-action); z-index:2; } .rsc-blk{ z-index:1; margin:2px; min-width:0; overflow:hidden; display:flex; flex-direction:column; justify-content:center; border:0; border-left:3px solid; border-radius:6px; padding:3px 8px; text-align:left; cursor:pointer; font:inherit; font-size:12px; font-weight:600; line-height:1.25; color:var(--cp-navy); } .rsc-blk.is-tall{ align-items:center; text-align:center; font-size:13px; } .rsc-bl{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rsc-blk.is-tall .rsc-bl{ white-space:normal; } .rsc-bs{ font-size:11px; font-weight:500; color:var(--cp-slate); } .rsc-blk.is-sel, .rsc-pill.is-sel{ outline:2px solid var(--cp-action); outline-offset:1px; } .rsc-blk:focus-visible, .rsc-pill:focus-visible, .rsc-chip:focus-visible{ outline:2px solid var(--cp-action); outline-offset:2px; } /* Liste görünümü (telefon) */ .rsc-list{ border:1px solid var(--cp-border); border-radius:12px; background:var(--cp-surface); overflow:hidden; } .rsc-lrow{ display:flex; gap:12px; padding:10px 12px; border-top:1px solid var(--cp-border); } .rsc-lrow:first-child{ border-top:0; } .rsc-lrow.is-now{ background:var(--cp-teal-wash); box-shadow:inset 3px 0 0 var(--cp-action); } .rsc-lwk{ flex:0 0 58px; display:flex; flex-direction:column; font-size:12px; font-variant-numeric:tabular-nums; } .rsc-lwk span{ color:var(--cp-slate); } .rsc-lchips{ flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .rsc-pill{ border:0; border-left:3px solid; border-radius:6px; padding:6px 9px; min-height:32px; font:inherit; font-size:12px; font-weight:600; color:var(--cp-navy); cursor:pointer; text-align:left; } /* Blok detayı */ .rsc-det{ border:1px solid var(--cp-border); border-left:4px solid; border-radius:12px; padding:14px 16px; margin-bottom:12px; } .rsc-kv{ display:flex; gap:12px; padding:7px 0; border-top:1px solid var(--cp-border); font-size:13px; margin-top:6px; } .rsc-kv span{ flex:0 0 76px; padding-top:2px; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cp-slate); } .rsc-kv b{ font-weight:600; color:var(--cp-navy); min-width:0; overflow-wrap:anywhere; } /* ---- Koç programı "Plan" sekmesi (coach-plan-builder.js, 2026-10-14) ---- Solda (telefonda üstte) hareket listesi, sağda gün kartları. Satırlar Kendin Yap'ın .diyitem/.diyfields bileşenini aynen kullanıyor. */ #rcomode{margin-bottom:12px} /* İkon yazı tipi geç yüklenirse ligatür metni ("drag_indicator") satırı ezmesin */ .qbp .msi{display:inline-block;width:1em;overflow:hidden;white-space:nowrap;vertical-align:middle} .qbp{display:grid;gap:14px;margin-top:4px} .qbp-pool{margin:0} .qbp-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .qbp-cats button{border:1px solid var(--line);background:transparent;color:var(--text); border-radius:999px;padding:5px 11px;font:inherit;font-size:12px;cursor:pointer} .qbp-cats button.on{background:var(--cp-teal);border-color:var(--cp-teal);color:var(--cp-on-accent,#fff)} .qbp-poollist{max-height:340px;overflow:auto;margin:0 -4px;padding:0 4px;overscroll-behavior:contain} .qbp-prow{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--elev); border-radius:10px;padding:7px 6px 7px 8px;margin-top:6px;touch-action:pan-y;user-select:none; -webkit-user-select:none;cursor:grab} .qbp-prow .diygrip{flex:none;color:var(--cp-slate-2);line-height:0;touch-action:none} .qbp-pname{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere} .qbp-pcat{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:1px} .qbp-ic{flex:none;background:transparent;border:0;color:var(--muted);cursor:pointer;padding:4px;line-height:0;border-radius:8px} .qbp-ic .msi{font-size:21px} .qbp-add{color:var(--cp-teal)} .qbp-ic:focus-visible{outline:2px solid var(--cp-teal);outline-offset:1px} .qbp-days{display:flex;flex-direction:column;gap:12px;min-width:0} .qbp-day{margin:0;border:1px solid var(--line);transition:border-color .15s} .qbp-day.on{border-color:var(--cp-teal);box-shadow:0 0 0 1px var(--cp-teal) inset} .qbp-dayhd{display:flex;align-items:center;gap:8px} .qbp-dayt{flex:1;min-width:0;background:transparent;border:1px solid transparent;border-radius:8px; color:var(--text);font:inherit;font-size:15px;font-weight:700;padding:4px 6px;margin-left:-6px} .qbp-dayt:hover{border-color:var(--line)} .qbp-dayt:focus{border-color:var(--cp-teal);outline:none;background:var(--card)} .qbp-list{min-height:48px;margin-top:4px} .qbp-empty{border:1px dashed var(--line);border-radius:10px;padding:14px;margin-top:7px; text-align:center;font-size:12.5px;color:var(--muted)} .qbp-ph{border:2px dashed var(--cp-teal);border-radius:11px;margin-top:7px;opacity:.6} .qbp-float{position:fixed;z-index:1000;pointer-events:none;margin:0 !important;opacity:.95; box-shadow:0 10px 26px rgba(15,23,42,.28);border-color:var(--cp-teal) !important} body.qbp-dragging, body.qbp-dragging *{cursor:grabbing !important;user-select:none;-webkit-user-select:none} .qbp-addday{align-self:flex-start} .qbp-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--cp-slate);padding:0 2px} .qbp-status .msi{font-size:16px} @media (min-width:900px){ .qbp{grid-template-columns:minmax(260px,330px) minmax(0,1fr);align-items:start} .qbp-pool{position:sticky;top:12px} .qbp-poollist{max-height:calc(100vh - 210px)} } /* Sporcu #/profile görünüm anahtarları (2026-10-14, core-auth.js apprSwitchHTML). Top rayın sağ ucuna 28px kayar: 58 genişlik − 2 kenar − 24 top − 2×2 boşluk. */ .apsw-row{display:flex;justify-content:space-around;align-items:flex-start;margin:18px 2px 4px} .apsw-wrap{display:flex;flex-direction:column;align-items:center;gap:3px} .apsw{position:relative;width:58px;height:30px;padding:0;border-radius:99px;background:var(--cp-surface-2); border:1px solid var(--cp-border);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none; -webkit-tap-highlight-color:transparent;font:inherit} .apsw:focus-visible{outline:2px solid var(--cp-teal);outline-offset:3px} .apsw-ends{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 7px; color:var(--cp-text-3);font-size:10.5px;font-weight:700;pointer-events:none} .apsw-th{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--cp-teal); color:var(--cp-on-accent);display:grid;place-items:center;font-size:10.5px;font-weight:700;pointer-events:none; box-shadow:0 1px 3px rgba(15,23,42,.25);transition:transform .22s cubic-bezier(.3,.7,.4,1)} .apsw[aria-checked="true"] .apsw-th{transform:translateX(28px)} .apsw.drag .apsw-th{transition:none} .apsw .msi{font-size:15px} .apsw-cap{font-size:11px;color:var(--cp-text-3)}