/* FITBARBELL — üye alanı: profil, ilerleme, üyelik, satın alma */
.ma-form { display: flex; flex-direction: column; gap: 14px; }
.ma-form .m-card-head { margin-bottom: 0; }
.ma-form .field input, .ma-form .field select { padding: 11px 13px; font-size: 15px; }
.ma-form .field input[readonly] { opacity: .65; cursor: not-allowed; }
.ma-form .btn { align-self: flex-start; }
.ma-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ma-group { display: flex; flex-direction: column; gap: 8px; }
.ma-label { font-size: 13px; font-weight: 600; color: var(--txt-mid); }
.ma-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ma-choice { position: relative; cursor: pointer; }
.ma-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ma-choice span { display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--txt-mid); font-size: 14px; font-weight: 500; transition: border-color .15s, color .15s, background .15s; }
.ma-choice:hover span { border-color: var(--accent); }
.ma-choice input:checked + span { border-color: var(--accent); color: var(--txt); background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 600; }
.ma-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ma-bmi { margin: -4px 0 0; min-height: 1.2em; font-size: 13px; }
.ma-banner { border-style: dashed; }
.flash { margin-bottom: 14px; }
.ma-form .flash { margin-bottom: 0; }

/* Kilo ekle */
.ma-weight { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ma-weight .field { flex: 1 1 140px; }
.ma-weight .btn { flex: 0 0 auto; }
.ma-inline-form { display: inline; margin: 0; }
.ma-link-btn { background: none; border: 0; padding: 0; color: var(--txt-mute); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.ma-link-btn:hover { color: var(--bad); }

/* Rozetler */
.ma-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ma-badge { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 12px; text-align: center; background: var(--bg-soft); opacity: .55; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ma-badge svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--txt-mute); }
.ma-badge strong { font-family: var(--font-display); font-size: 14px; }
.ma-badge small { color: var(--txt-mute); font-size: 12px; line-height: 1.35; }
.ma-badge.on { opacity: 1; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg-soft)); }
.ma-badge.on svg { color: var(--accent); }

/* Hızlı işlemler, söz */
.ma-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ma-quick a { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--txt); font-weight: 600; font-size: 14px; text-decoration: none; transition: border-color .15s, transform .15s; }
.ma-quick a:hover { border-color: var(--accent); transform: translateY(-1px); }
.ma-quick svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ma-quote { border-left: 3px solid var(--accent); }
.ma-quote p { font-family: var(--font-display); font-size: 17px; line-height: 1.45; }

/* Satın alma / üyelik */
.ma-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-thin); }
.ma-sum:last-of-type { border-bottom: 0; }
.ma-sum b { font-family: var(--mono); font-size: 20px; }
.ma-iframe { width: 100%; border: 0; min-height: 600px; background: #fff; border-radius: var(--radius-sm); }
.m-pack .btn { margin-top: 10px; }
.ma-wait { display: flex; align-items: center; gap: 10px; }
.ma-spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: ma-rot 1s linear infinite; }
@keyframes ma-rot { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .ma-row { grid-template-columns: 1fr 1fr; }
  .ma-quick { grid-template-columns: 1fr 1fr; }
  .ma-badges { gap: 8px; }
  .ma-badge { padding: 12px 6px; }
}
@media (max-width: 420px) {
  .ma-row { grid-template-columns: 1fr; }
  .ma-form .btn { align-self: stretch; }
}