/* ===================================================================== SAYFA CSS — İNTERAKTİF ANATOMİ / KAS HARİTASI (H2 · 6. oturum) BANNER: dosya adında "-detay-" GEÇMİYOR → kabuk body'ye data-fit-hero-kind="liste" yazıyor → .lib-top yüksekliği --banner-h-liste'ten geliyor (544 / 607 / 587). Burada banner ölçüsüne dair TEK SATIR YOK; yalnız arka plan görseli bildiriliyor. (R15 · DEVIR-5 §3b) Sınıf öneki `an-`. Kabuğa (fit-shell.css) anatomi kuralı YAZILMADI — 60 sayfa o dosyaya bağlı, bu sayfanın stili bu blokta kalıyor. KONUMLANDIRMA (REVIZYON-5 §2 · H2): kabuk modern, içerik ansiklopedik. ===================================================================== */ /* sayfa token'ları — elle sayı yerine tek kaynak (R8 · kalem 14) */ .an-grid{--an-chip-gap:12px} .lib-top{--lib-img:url('https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=1680&q=80&auto=format&fit=crop&exp=8&gam=8&sat=-22');--lib-pos:center 38%} /* banner istatistik şeridi — sayılar VERİDEN hesaplanıp JS ile basılır */ /* ÖLÜ KURAL — R9/K23'te banner şeridi kanon `.lib-stat` kalemine geçti (bkz. sayfa JS'indeki "banner istatistik şeridi" notu). `.an-fact` artık işaretlemede YOK; kabuk sözleşmesi gereği silinmedi, kütüğe yazıldı — eski satır-içi şerit geri istenirse hazır dursun. */ .lib-stats .an-fact{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:rgba(255,255,255,.74)} .lib-stats .an-fact i{color:var(--fit-bright);font-size:13px} .lib-stats .an-fact b{color:#fff;font-weight:800;font-size:15px} /* --------------------------------------------------------------- 1 · İKİ KOLON — SOL harita · SAĞ panel Mobil (≤900px) tek kolon; harita DOM'da ZATEN önce geldiği için sırayı bozacak bir `order` kuralına gerek yok (@390 harita üstte). R6 · M14/geçiş 3 — ızgara ÖLÇÜLEN referansa hizalandı. dadagastro.com/tarif/… `.rd-cols`: 744 px içerik + 48 px boşluk + 384 px yapışkan panel = 1176 px; align-items:start; sticky top 132 px. Burada roller ayna: yapışkan olan SOL harita (384), akan içerik SAĞ panel (744). Boşluk 30 → 48, kolonlar 420/1fr → 384/1fr. --------------------------------------------------------------- */ .an-grid{display:grid;grid-template-columns:minmax(0,384px) minmax(0,1fr);gap:48px;align-items:start} @media (max-width:900px){ .an-grid{grid-template-columns:1fr;gap:18px} } /* ---- SOL: harita kutusu ---- R6/geçiş 3: `top:104px` ölçüldüğünde sabit başlığın alt kenarı 113 px'ti, yani yapışan kartın üst 9 px'i başlığın altına giriyordu. Referansın (`.ing-panel`) yapışma payı 132 px; buradaki karşılığı 133 px. */ .an-map{position:sticky;top:133px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-sm);padding:16px 16px 10px;min-width:0} @media (max-width:900px){ .an-map{position:static;top:auto;padding:12px 12px 8px} } /* geçiş rayları — ÖN/ARKA ve Erkek/Kadın */ .an-switches{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:14px} .an-seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:3px;gap:3px} .an-seg button{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit; padding:8px 13px;border-radius:calc(var(--radius-md) - 3px);font-size:13px;font-weight:700;color:var(--muted); display:inline-flex;align-items:center;gap:7px;transition:.18s var(--ease);min-height:36px} .an-seg button i{font-size:12px} .an-seg button:hover{color:var(--fit-deep)} .an-seg button[aria-pressed="true"]{background:var(--fit);color:#fff;box-shadow:var(--sh-sm)} .an-seg button[aria-pressed="true"]:hover{background:var(--fit-deep);color:#fff} .an-seg button:focus-visible{outline:2px solid var(--fit-deep);outline-offset:2px} /* çizim alanı — "plaka". R6 · M14/geçiş 2: eskiden kolon genişliğinde bir kutuydu ve zemini sayfaya özel bir gradyandı (#f7f8f7→#eef1ef, token dışı iki literal). Şimdi zemin site token'ı (--bg) ve plaka çizimin kendi genişliğine çekiliyor (width:fit-content) — boş plaka kalmıyor. */ .an-stage{width:fit-content;max-width:100%;margin:0 auto;background:var(--bg);border-radius:var(--radius-md);padding:10px 6px} @media (max-width:900px){ .an-stage{padding:8px 6px} } .an-harita{display:block;height:min(62vh,620px);width:auto;max-width:100%;margin:0 auto} /* @390 · R6 madde 21 ile YENİDEN ÖLÇÜLDÜ. Eski değer min(40vh,360px) haritayı 185 px genişliğe düşürüyordu; iki katmanlı haritada ince kaslar (adduktor · brachioradialis · tibialis) o boyutta tıklanamaz oluyordu. Yükseklik 52vh'ye çıkarıldı — dokunma hedefleri büyüdü, M14 garantisi (seçimden sonra hareket bandının kaydırmadan görünmesi) sınamayla yeniden doğrulandı. */ @media (max-width:900px){ .an-harita{height:min(52vh,470px)} } /* ===== R6 · MADDE 21 — İKİ KATMANLI HARİTA ===== 1. .an-govde : görünen gövde. Higgsfield ile üretilmiş nötr kas render'ı, SVG'nin içinde olarak. BOYANMAZ — nötr kalır. 2. .an-bolge : tıklama hedefi + vurgu boyası. Varsayılan dolgu SAYDAM, yani seçilmemiş kasın üstünde hiç boya yoktur (referans: musclewiki). Eski soyut siluet (.an-siluet / .an-cizgi) kaldırıldı; render onun yerini aldı ve path'ler render'dan segmentlenerek çıkarıldığı için birebir hizalı. */ .an-govde{pointer-events:none} .an-bolge{fill:transparent;stroke:none;cursor:pointer; transition:fill .16s var(--ease)} .an-bolge:hover{fill:color-mix(in srgb,var(--fit) 34%,transparent)} /* R9 · ODAK HALKASI (Beyar): tarayıcının varsayılan halkası SVG'de ŞEKLİ değil SINIRLAYICI DİKDÖRTGENİ çiziyor — kas parçasının çevresinde mavi bir kare beliriyordu ve "seçili dikdörtgen" gibi okunuyordu. `outline:none` yalnız `:focus-visible`teydi; fareyle odaklanınca (`:focus` var, `:focus-visible` yok) kural düşüyor ve varsayılan halka geri geliyordu. Artık HER odak hâlinde kapalı; görünür işaret şeklin kendi konturu (`stroke`), yalnız klavye odağında. */ .an-bolge:focus{outline:none} .an-bolge:focus-visible{outline:none;fill:color-mix(in srgb,var(--fit) 46%,transparent); stroke:var(--fit-deep);stroke-width:3;paint-order:stroke fill} .an-bolge[aria-pressed="true"]{fill:var(--fit-deep)} .an-bolge[aria-pressed="true"]:hover{fill:var(--fit-deep)} /* color-mix desteklemeyen tarayıcı için düz yedek */ @supports not (color: color-mix(in srgb, red 50%, transparent)){ .an-bolge:hover{fill:rgba(0,150,227,.34)} .an-bolge:focus-visible{fill:rgba(0,150,227,.46)} } .an-hint{margin:9px 2px 0;font-size:12px;color:var(--muted);font-weight:600;text-align:center;text-align-last:center;line-height:1.5} .an-hint .an-hint-dokunma{display:none} @media (max-width:900px){ .an-hint .an-hint-klavye{display:none} .an-hint .an-hint-dokunma{display:inline} } .an-hint kbd{font-family:inherit;font-size:11px;font-weight:800;background:var(--bg);border:1px solid var(--line); border-bottom-width:2px;border-radius:var(--radius-badge);padding:1px 5px;color:var(--slate-2)} /* ---- SAĞ: ansiklopedik panel ---- */ .an-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-sm);overflow:hidden;min-width:0} /* R6/geçiş 3 — künye zemininden `linear-gradient(--fit-tint→transparent)` ÇIKARILDI. Hareket bandı (--bg) künyenin hemen altına geldiğinde iki yumuşak zemin yan yana düşüyor ve sınır bulanıyordu. Panelde tek renkli alan kalsın: beyaz künye → gri hareket bandı → beyaz künye metni. Geri almak için satıra `background:linear-gradient(180deg, var(--fit-tint),transparent)` eklemek yeter. */ .an-panel-head{padding:22px 26px 18px;border-bottom:1px solid var(--line)} .an-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--fit-deep);margin-bottom:8px} .an-panel-head h2{font-size:24px;line-height:1.2;margin:0 0 6px} .an-latin{font-size:14px;font-style:italic;color:var(--muted);font-weight:600;margin:0} .an-panel-body{padding:6px 26px 24px} .an-sec{padding:19px 0;border-bottom:1px solid var(--line)} .an-sec:last-child{border-bottom:none;padding-bottom:4px} /* ---- R8 · kalem 13 — ORTA BAŞLIKLAR + ACCORDION ------------------ ÖNCE: `.an-sec > h3` 11.5 px / 800 / uppercase / --muted idi; yani başlık gövde metninden (14.5 px / 500) KÜÇÜKTÜ ve daha soluktu. Göz onu başlık değil, üstteki bloğun dipnotu gibi okuyordu — kalem 13'ün şikâyeti bu. ŞİMDİ başlık gövdeden hem BÜYÜK hem KOYU: başlık 16 px / 800 / --slate · gövde 14.5 px / 500 / --slate-2 Uppercase kalktı: 16 px büyük harf bir "etiket" gibi bağırırdı; ayrışmayı boyut ve ağırlık taşıyor, harf biçimi değil. Başlık artık