/* ===================================================================== SAYFA CSS — FİT TESTLERİ (liste sayfası, belge §8) --------------------------------------------------------------------- Kabuktan GELEN ve burada TEKRAR TANIMLANMAYAN her şey: token'lar · .wrap · .btn/.btn-primary/.btn-ghost · .lib-top + .lib-crumb (banner) · .lib-grid ızgarası · .hub-card/.hub-media/.hub-cat/.hub-body/ .hub-foot kart kabuğu · .df-fchip + .fgroup · .ff filtre bileşeni · .lib-empty · .hr-note · .sec/.sec-head/.eyebrow. Banner görseli BİLİNÇLİ EKLENMEDİ (--lib-img:none) — Faz 9 harici Unsplash bağlantılarını üretimden kaldırmak istiyor; pro-v1 · sss-v1 · reklam-ver-v1 · pro-odeme-v1 ile aynı karar. Bu sayfada hiç yok, dolayısıyla CLS kaynağı da yok (§18). ===================================================================== */ /* ---- KOYU BANNER'DA DEMO ETİKETİ ---------------------------------- ama .fp-top'un cam varyantıyla aynı dilde durmuyor. Bu tek satırlık kural bugün pro-v1:64 · pro-odeme-v1:53 · reklam-ver-v1:54'te BİREBİR tekrar ediyor, kabukta yok. Kabuğa taşınınca buradan silinmeli. */ /* ---- SONUÇ ÇUBUĞU: sayı + sıralama -------------------------------- GEÇİCİ KOPYA: .lib-bar / .lib-count / .lib-sort / .sort-seg bugün 12 sayfada birebir aynı şekilde tekrar ediliyor (antrenorler, egzersiz- kutuphane, program-liste, 9 rehber sayfası). Kabuğa taşınması gereken bir kittir — raporda bildirildi. Buraya sapmasın diye BİREBİR kopya. */ /* ================= R8/28 · SAĞLIK NOTU + FİLTRE DIVIDER ================= (a) Not artık bölümün sonunda. Kutusu zaten içerik kolonu genişliğindeydi (ölçüldü: kutu 1176 · #ftGrid 1176 · fark 0) ama paragraf kabuğun --measure kapağıyla 688 px'te bitiyordu — kutunun 488 px'i boştu. Kapak kaldırılıp iki kolona bölündü: genişlik dolar, satır uzunluğu (~63 karakter) okunur kalır. Kabuğun --measure kuralı DEĞİŞMEDİ, yalnız bu tek not için ezildi. (b) Filtre satırındaki dikey çizgi kabuktan geliyordu (`.ff-bar .ff-count::before`, 1×20 px, #ECECEC) — ORTAK bileşen. Önce burada sayfa-yerel kapattım; sonra Beyar kararıyla LEAD kuralı kabuktan tümden kaldırdı (7 sayfa). Sayfa-yerel ezme artık gereksiz, silindi. Kaldırma sonrası ölçüm: çubuk yüksekliği hâlâ 62 px @1440, sayaç ↔ sıralama dikey ortası farkı 0, taşma 0 — hiza bozulmadı. */ .ft-hr-son{margin-top:34px} .ft-hr-son p{max-width:none} /* R12/EK · R16 · Beyar: "burdaki yazıyı niye böldün" — iki kolona bölünen sağlık uyarısı tek cümleyi sütun sınırında kesiyordu. Önceki turun "ÖZ ELEŞTİRİ 2" kolon çizgisi denemesi (column-count:2 + column-rule) geri alındı: metin tek akışta, kutuyu tam genişlik dolduruyor. R11/M5 kararı ("metin kutuyu doldurur") aynen sürüyor — egzersiz-kutuphane-v1 aynı bilgi kutusunda da tek akış var. */ .lib-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap} .lib-count{font-size:14px;font-weight:600;color:var(--slate-2)} .lib-count b{color:var(--slate);font-weight:800} .lib-sort{display:flex;align-items:center;gap:8px} .lib-sort .lbl{font-size:12.5px;font-weight:600;color:var(--muted)} .sort-seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:3px} .sort-seg button{ font-family:inherit;font-size:13px;font-weight:700;color:var(--slate-2); background:none;border:none;border-radius:var(--radius-sm);padding:8px 15px;cursor:pointer; transition:.18s var(--ease); } .sort-seg button:hover{color:var(--fit-deep)} .sort-seg button.on{background:var(--fit);color:#fff} .sort-seg button:focus-visible{outline:3px solid var(--fit-tint);outline-offset:2px} /* ---- TEST KARTI — kabuğun .hub-card kabuğu + sayfaya özgü iç ölçüler ---- */ /* iskelet kuralı: kart başlıkları h3 (§19 hiyerarşi). Kabuk .hub-body h4'ü biçimliyor; h3 karşılığı sayfa-yerel (egzersiz-kutuphane'nin .ex-body h3 deseniyle aynı ölçüler). */ .ft-card .hub-body h3{font-size:16.5px;margin-bottom:8px;letter-spacing:-.01em;transition:color .2s var(--ease)} .ft-card:hover .hub-body h3{color:var(--fit-deep)} /* R12/S4 · Beyar: "hepsinin dividerı aynı hizada olacak". Açıklama paragrafı kartına göre 3 ya da 4 satır sürüyor; kabuğun `.hub-foot{margin-top:auto}` kuralı yalnız ft-meta'dan SONRAKİ boşluğu yutuyor, ft-meta düz akışta kaldığı için 4 satırlık kartlarda ~21px (=1 satır) aşağı kayıyordu — alt çizgi hizalı kalıyordu ama çip rayı değil (ölçüm: docs/lessons.md §R5). Paragrafa 4 satırlık min-height ayrılınca 3 satırlık metin de aynı kutuyu dolduruyor, ft-meta her kartta aynı y'de başlıyor. `min-height` seçildi, `height`+overflow değil: 6.2em'i (1.55 satır-yüksekliği × 4) aşan bir metin gelirse kutu büyür — hiza bozulabilir ama metin KIRPILMAZ. */ .ft-card .hub-body p{min-height:6.2em} .ft-card .hub-media.icon{height:132px} /* kart içi künye satırı: süre · ekipman · kimler için */ /* R11/M12 · Beyar: "buradaki taglı yapılar tek satır olması gerekiyor, sliderlı olsun." Önce `flex-wrap:wrap` ile iki satıra taşıyordu; kart yükseklikleri etikete göre değişiyor, ızgara dişli görünüyordu. Kaydırma deyimi UYDURULMADI — kabuktaki `.row-track` şeridiyle aynı: gizli çubuk · x-snap · overscroll kapalı · dokunma momentumu. `.row-track`ın kendisi kullanılmadı çünkü o kart rayı (`>*{width:274px}`), burada çip var. */ .ft-meta{ display:flex;flex-wrap:nowrap;gap:8px;margin-top:13px; overflow-x:auto;scroll-snap-type:x proximity; scrollbar-width:none;overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;padding-bottom:2px; } .ft-meta::-webkit-scrollbar{display:none} /* KAYDIRILABİLİRLİK İŞARETİ — çubuk gizli olduğu için şeridin devam ettiği başka türlü anlaşılmıyordu (ölçüm: @1440'ta 7 kartın 5'inde, @390'da 7'sinde içerik taşıyor ve son çip kelime ortasından kesiliyordu). Sağ uçta 22px soluklaşma, "devamı var" demenin en sessiz yolu. Taşma yokken son çip zaten soluklaşmadan önce bitiyor, zarar vermiyor. */ .ft-meta{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent); } .ft-meta span{flex:none;scroll-snap-align:start; display:inline-flex;align-items:center;gap:6px; font-size:11.5px;font-weight:700;color:var(--slate-2); background:var(--bg);border:1px solid var(--line); padding:5px 10px;border-radius:var(--radius-sm); } .ft-meta span i{font-size:11px;color:var(--fit-deep)} /* R12/EK · R17 · Beyar (iki kez): "slider chiplerin altındaki divider çok yakın boşluk bırakıyor". `margin-top:auto` çip rayının altında kalan artan boşluğu tümüyle yutuyordu (R5'te paragraf min-height ile sabitlenince artan boşluk 0'a indi). Kabuğun `.hub-foot{margin-top:16px}` değeri geri kazanılsın diye sayfa-yerel override kaldırıldı — kart içeriği (başlık + min-height'lı paragraf + tek satır çip rayı) satır içinde zaten sabit yükseklikte olduğundan auto'nun sağladığı "karta yasla" etkisine ihtiyaç yoktu; R5'in kart eşitliği ölçümle doğrulandı (aşağıda). */ /* ---- "NASIL İŞLER" — numaralı adım kartı ---- */ .ft-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .ft-howc{ background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg); padding:24px 22px;box-shadow:var(--sh-sm); } .ft-howc .st-num{ width:34px;height:34px;border-radius:var(--radius-circle); background:var(--fit-tint);color:var(--fit-deep); display:grid;place-items:center;font-size:14px;font-weight:800;margin-bottom:14px; } .ft-howc h3{font-size:16.5px;margin-bottom:8px} .ft-howc p{font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.55} .ft-howc p+p{margin-top:9px} .ft-howc a{color:var(--fit-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px} /* ===================== SAYFA RESPONSIVE ===================== */ @media (max-width:1024px){ .ft-how{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} } @media (max-width:640px){ .lib-bar{margin-bottom:18px} .lib-sort{width:100%;justify-content:space-between} .sort-seg button{padding:8px 12px;font-size:12.5px} .ft-how{grid-template-columns:minmax(0,1fr);gap:14px} .ft-card .hub-media.icon{height:110px} }