/* =====================================================================
 EGZERSİZ KÜTÜPHANESİ — DadaFit liste/filtre sayfası
 Chrome (token+topbar+header+drawer+bottom-nav+footer+modal+JS) hub'dan
 BİREBİR taşındı (dadafit-hub-v1.html). DadaFit recolor: --fit → #009d4f.
 Sayfa içeriği "SAYFA CSS" altına eklendi. Mega menü/chrome KİLİTLİ.
 ===================================================================== */

/* =====================================================================
 SAYFA CSS — EGZERSİZ KÜTÜPHANESİ
 ===================================================================== */
:root{
  --fit:var(--marka);          /* DadaFit aksanı (Pantone 7482 C) */
  --fit-deep:var(--marka-koyu);     /* hover / gradient ucu */
  --fit-tint:var(--marka-yikama-2);     /* yumuşak yeşil yıkama */
  --fit-line:var(--marka-cizgi);     /* yeşil-nötr hairline */
  --fit-bright:var(--marka-parlak);   /* koyu zeminde okunur aksan metni */
  --fit-dark:#211E16;     /* vurgu/hero zemini */
}
.sec-fit .eyebrow{color:var(--fit-deep)}
.sec-fit .eyebrow::before{background:var(--fit)}

/* ---- ÜST PANEL: koyu band + breadcrumb + başlık + arama (signature carry-over) ---- */
.lib-top{
  position:relative;overflow:hidden;margin-top:112px;
  /* hub df-hero-media deseni: desatüre görsel + koyu gradient overlay (metin solda okunur, görsel sağda belirir) */
  background:
    radial-gradient(820px 360px at 84% 14%,color-mix(in srgb, var(--marka) 20%, transparent),transparent 62%),
    linear-gradient(90deg,rgba(33,30,22,.94) 0%,rgba(29,26,20,.82) 46%,rgba(27,25,19,.74) 100%),
    linear-gradient(180deg,rgba(33,30,22,0) 58%,rgba(24,22,16,.62) 100%),
    url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1680&q=80&auto=format&fit=crop&exp=7&gam=6&sat=-16') center 26%/cover no-repeat,
    #1b1913;
  padding:40px 0 38px;
}
.lib-top .wrap{position:relative;z-index:2}
.lib-crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:18px}
.lib-crumb a{color:rgba(255,255,255,.6);transition:color .2s var(--ease)}
.lib-crumb a:hover{color:#fff}
.lib-crumb i{font-size:9px;color:rgba(255,255,255,.34)}
.lib-crumb .cur{color:var(--fit-bright)}
.lib-top .eyebrow{color:var(--fit-bright)}
.lib-top .eyebrow::before{background:var(--fit-bright)}
.lib-top h1{color:#fff;font-size:39px;letter-spacing:-.02em;margin:14px 0 10px;max-width:680px}
.lib-top .lib-sub{color:rgba(255,255,255,.78);font-size:15.5px;font-weight:500;max-width:560px;line-height:1.55}
/* arama input — cam panel */
/* ==================================================================
 YENİ BAŞLAYANLAR — makale (Fit yeşil)
 Anatomi: beslenme-dengeli-tabak (qa accordion + reh-bridge + reh-note)
 → Fit token'larıyla yeniden kuruldu (mint literal YOK, sızmaz).
 ================================================================== */
.art-wrap{max-width:840px}
.art-intro{font-size:16.5px;color:var(--slate-2);font-weight:500;line-height:1.75}
.art-intro p+p{margin-top:15px}
.art-intro strong{color:var(--slate);font-weight:700}
/* accordion (tek-seferde-bir açık) */
.qa-list{display:flex;flex-direction:column;gap:12px}
.qa{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.qa.open{border-color:var(--fit-line);box-shadow:var(--sh-sm)}
.qa-head{display:flex;align-items:center;gap:14px;width:100%;background:none;border:none;font-family:inherit;font-size:15.5px;font-weight:700;color:var(--slate);padding:18px 22px;cursor:pointer;text-align:left;transition:color .2s var(--ease)}
.qa-head:hover,.qa.open .qa-head{color:var(--fit-deep)}
.qa-ico{flex:none;width:34px;height:34px;border-radius:var(--radius-md);background:var(--fit-tint);color:var(--fit-deep);display:grid;place-items:center;font-size:14px}
.qa-car{margin-left:auto;flex:none;font-size:12px;color:var(--muted);transition:transform .25s var(--ease)}
.qa.open .qa-car{transform:rotate(180deg);color:var(--fit-deep)}
.qa-body{max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}
.qa-body p{padding:0 26px 18px 70px;font-size:14.5px;color:var(--slate-2);font-weight:500;line-height:1.7}
.qa-body p+p{padding-top:0;margin-top:-6px}
.qa-body .qa-sub{padding:2px 26px 10px 70px;font-size:13.5px;font-weight:700;color:var(--slate)}
.qa-ul{list-style:none;padding:0 26px 20px 70px;display:flex;flex-direction:column;gap:9px}
.qa-ul li{position:relative;padding-left:20px;font-size:14px;color:var(--slate-2);font-weight:500;line-height:1.6}
.qa-ul li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--fit)}
/* cross-brand köprü kartları */
.reh-bridge{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.brg-card{display:flex;flex-direction:column;gap:11px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.brg-card:hover{transform:translateY(-4px);border-color:var(--fit);box-shadow:var(--sh-md)}
/* R11/M7 · Etiket artık kabuktaki `.brand-tag` bileşeni (fit-shell.css →
   "MARKA ETİKETİ"): Dada kalın + marka adı ince + markanın kendi rengi.
   Eski kuralın rengi (`--slate-2`) ve BÜYÜK HARF'i bileşeni EZİYORDU —
   sayfa CSS'i kabuktan sonra yükleniyor. İkisi de kaldırıldı; yerleşim
   (gap · hizalama) burada kaldı, kimlik bileşenden geliyor. */
.brg-brand{display:inline-flex;align-items:center;gap:7px}
/* ikon rengi de bileşenin `--bt-c`'sinden gelir; aşağıdaki `.food` istisnası
   artık gereksiz ama SİLİNMEDİ — `.brg-card.food .brg-go` hâlâ kullanıyor. */
.brg-card h4{font-size:16.5px;letter-spacing:-.01em}
.brg-card p{font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.55;flex:1}
.brg-go{display:inline-flex;align-items:center;gap:8px;color:var(--fit-deep);font-weight:700;font-size:13.5px}
.brg-card:hover .brg-go i{transform:translateX(3px)}
.brg-go i{transition:.2s var(--ease)}
/* Gastro köprüsü — tomato aksan */
.brg-card.food:hover{border-color:var(--food)}
.brg-card.food .brg-brand i,.brg-card.food .brg-go{color:var(--food)}
/* disclaimer + CTA */
.hr-note{display:flex;gap:14px;align-items:flex-start;background:var(--fit-tint);border:1px solid var(--fit-line);border-radius:var(--radius-lg);padding:20px 22px}
.hr-note>i{color:var(--fit-deep);font-size:18px;margin-top:2px;flex:none}
.hr-note p{font-size:14px;color:var(--slate-2);font-weight:500;line-height:1.6;margin:0}
.hr-note p a{color:var(--fit-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.hr-note .btn{margin-top:14px}
@media (max-width:1024px){.reh-bridge{grid-template-columns:1fr}}
@media (max-width:640px){.qa-body p,.qa-ul,.qa-body .qa-sub{padding-left:24px}.qa-ul li{padding-left:18px}}

/* ===================== SAYFA RESPONSIVE ===================== */
@media (max-width:1024px){
  .lib-top{margin-top:112px}
  .lib-filters{top:112px}
  .lib-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lib-top h1{font-size:33px}
  .fgroup .lbl{min-width:88px}
}
@media (max-width:760px){
  .lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .lib-top{margin-top:62px;padding:30px 0 30px}
  .lib-top h1{font-size:27px}
  .lib-top .lib-sub{font-size:14px}
  .lib-search{max-width:none}
  .lib-stats{gap:18px;margin-top:20px}
  .lib-stat b{font-size:18px}
  .lib-body{padding:var(--sec-pad-sm) 0 var(--sec-pad)}
  /* sticky filtre bar mobilde tek satır yatay kaydır */
  .lib-filters{top:62px;padding:14px 14px 12px}
  .fgroup{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:5px}
  .fgroup::-webkit-scrollbar{display:none}
  .fgroup .lbl{position:sticky;left:0;background:rgba(255,255,255,.96);min-width:auto;padding-right:6px;z-index:1}
  .df-fchip{flex:none;white-space:nowrap}
  .fclear{flex:none}
  .lib-bar{margin-bottom:18px}
  .lib-sort{width:100%;justify-content:space-between}
  .sort-seg button{padding:8px 12px;font-size:12.5px}
  .lib-grid{grid-template-columns:1fr 1fr;gap:14px}
  .ex-media{height:148px}
  .ex-body{padding:13px 14px 15px}
  .ex-body h3{font-size:15px}
}
@media (max-width:400px){
  .lib-grid{grid-template-columns:1fr}
  .ex-media{height:200px}
}

/* ============ KABUK: topbar social + acct-pro + gw imza (hub parite) ============ */