/* Üye alanı: hareket kütüphanesi, hareket detayı, beslenme */

/* ---- Kütüphane ---- */
.lib-filters { padding-bottom: 14px; }
.lib-row { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.lib-sel { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--txt-mute); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lib-sel select { padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-base); color: var(--txt); font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.lib-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--txt-mid); padding-bottom: 9px; cursor: pointer; }
.lib-chk input { width: 17px; height: 17px; accent-color: var(--accent); }
.lib-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-base); color: var(--txt-mid); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: border-color var(--tap-fast), color var(--tap-fast); }
.lib-chip b { font-family: var(--mono); font-size: 11.5px; color: var(--txt-mute); font-weight: 700; }
.lib-chip:hover { color: var(--txt); border-color: var(--accent); text-decoration: none; }
.lib-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lib-chip.on b { color: var(--accent-ink); opacity: .75; }
.lib-count { margin: 4px 2px 10px; font-size: 13px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.lib-card { display: flex; flex-direction: column; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; transition: transform var(--tap), border-color var(--tap); }
.lib-card:hover { transform: translateY(-2px); border-color: var(--accent); text-decoration: none; }
.lib-thumb { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #fff; border-bottom: 1px solid var(--line-thin); }
.lib-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.lib-noimg { display: flex; height: 100%; align-items: center; justify-content: center; color: #8a96a3; font-size: 13px; }
.lib-name { padding: 11px 13px 4px; font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.lib-meta { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 13px 13px; }
.lib-credit { font-size: 12px; margin-top: 22px; }

/* ---- Detay ---- */
.lib-h1 { font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 30px); margin: 0 0 10px; }
.lib-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.lib-detail { align-items: start; }
.anim { position: relative; aspect-ratio: 3 / 2; background: #fff; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line-thin); }
.anim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.anim.two .anim-b { animation: lib-fade 2s infinite; }
@keyframes lib-fade { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .anim.two .anim-b { animation: none; opacity: 0; } }
.mm { display: flex; justify-content: center; gap: 18px; background: var(--bg-soft); border-radius: var(--radius-sm); padding: 14px 10px 10px; }
.mm-fig { position: relative; flex: 1; max-width: 190px; aspect-ratio: 200 / 369; }
.mm-fig img { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; }
.mm-base { filter: brightness(1.9) contrast(.8); opacity: .75; }
.mm-cap { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-size: 11px; color: var(--txt-mute); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mm-fig { margin-bottom: 26px; }
.mm-legend { margin-top: 12px; }
.mm-legend p { margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; align-self: center; }
.sw-main { background: #fc0000; }
.sw-sec { background: #f57900; }
.lib-tip { border-left: 3px solid var(--amber); }
.lib-tip strong { display: block; margin-bottom: 4px; font-family: var(--font-display); }
.lib-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.lib-steps li { padding-left: 4px; line-height: 1.55; }
.lib-steps li::marker { color: var(--accent-2); font-weight: 800; font-family: var(--mono); }
.lib-sets { margin-top: 6px; }

/* ---- Beslenme ---- */
.nt-ico { vertical-align: -3px; margin-right: 4px; }
.nt-empty { text-align: left; }
.nt-empty h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 8px; }
.nt-empty .btn { margin-top: 6px; }
.nt-hero { display: flex; gap: 26px; align-items: center; }
.nt-ring { position: relative; width: 160px; height: 160px; flex-shrink: 0; }
.nt-ring-bg { fill: none; stroke: var(--bg-soft); stroke-width: 11; }
.nt-ring-bg { stroke: var(--line-thin); }
.nt-ring-fg { fill: none; stroke: var(--accent); stroke-width: 11; stroke-linecap: round; transition: stroke-dasharray .6s; }
.nt-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.nt-ring-c b { font-family: var(--mono); font-size: 28px; }
.nt-ring-c small { color: var(--txt-mute); font-size: 12px; }
.nt-hero-body { flex: 1; min-width: 0; }
.nt-big { font-family: var(--font-display); font-size: 34px; margin: 0 0 4px; line-height: 1.1; }
.nt-big small { font-size: 16px; color: var(--txt-mute); font-weight: 600; }
.nt-mini { margin: 14px 0 0; }
.nt-mini .m-stat { background: var(--bg-soft); padding: 10px 14px; }
.nt-mini .m-stat b { font-size: 21px; }
.nt-bar { margin-bottom: 4px; }
.nt-bar-h { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; }
.nt-p i { background: var(--blue); }
.nt-c i { background: var(--amber); }
.nt-f i { background: var(--purple); }
.nt-note { font-size: 12.5px; margin-top: 8px !important; }
.nt-notice { border-style: dashed; color: var(--txt-mid); }
.nt-water-n { font-size: 15px; margin-bottom: 6px !important; }
.nt-water-n b { font-family: var(--mono); font-size: 22px; }
.nt-wbar { height: 14px; }
.nt-wbar i { background: linear-gradient(90deg, var(--blue), var(--accent)); }
.nt-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.nt-btns .btn[disabled] { opacity: .45; cursor: not-allowed; }
.nt-form { margin: 0; }
.nt-meal { border: 1px solid var(--line-thin); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; transition: background var(--tap), border-color var(--tap); }
.nt-meal.is-done { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.nt-meal-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nt-meal-t { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.nt-meal-k { font-family: var(--mono); font-weight: 800; font-size: 14px; }
.nt-check { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-base); color: var(--txt-mid); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.nt-check .nt-ico { margin: 0; }
.nt-check:hover { border-color: var(--accent); color: var(--txt); }
.nt-check.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.nt-items { list-style: none; margin: 10px 0 0; padding: 0; }
.nt-items li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line-thin); font-size: 14px; }
.nt-items li:first-child { border-top: 0; }
.nt-items small { color: var(--txt-mute); font-family: var(--mono); font-size: 12px; white-space: nowrap; align-self: center; }
.nt-meal-m { font-size: 12.5px; margin: 8px 0 0 !important; }
.nt-tips { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.nt-tips li::marker { color: var(--accent-2); }

@media (max-width: 760px) {
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nt-hero { flex-direction: column; align-items: stretch; gap: 14px; }
  .nt-ring { align-self: center; }
  .nt-items li { flex-direction: column; gap: 2px; }
  .nt-items small { white-space: normal; }
  .nt-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm { gap: 8px; }
}

.nt-hist-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; }
.nt-hist-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; }
.nt-hist-day.is-today { background: var(--bg-soft); }
.nt-hist-bars { display: flex; align-items: flex-end; gap: 4px; height: 90px; width: 100%; justify-content: center; }
.nt-hist-bar { width: 12px; border-radius: 4px 4px 2px 2px; min-height: 4px; }
.nt-hist-w { background: #3b82f6; }
.nt-hist-m { background: var(--accent); }
.nt-hist-day b { font-size: 12px; }
.nt-hist-day small { color: var(--txt-mute); font-size: 11px; }
.nt-hist-leg { font-size: 12px; margin: 12px 0 0; }
.nt-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 8px; vertical-align: -1px; }