/* 2. Başlamadan önce */
.fb-wrap { width: 100%; }
.chk { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.chk input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------- akort ---------- */
.ak-main { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 18px 28px; align-items: center; }
.ak-head { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ak-svg { width: 150px; height: auto; display: block; overflow: visible; }
body.lefty .ak-svg { transform: scaleX(-1); }
.ak-face { fill: var(--wood); }
.ak-neck { fill: var(--wood); }
.ak-nut { fill: var(--bone); }
.ak-str { stroke: var(--nickel); stroke-width: .9; }
.ak-str.s6, .ak-str.s5, .ak-str.s4 { stroke-width: 1.5; }
.ak-shaft { stroke: var(--nickel); stroke-width: 3; }
.ak-key { fill: var(--nickel-hi); stroke: var(--nickel); stroke-width: 1.2; transition: fill .2s; }
.ak-post { fill: var(--nickel-hi); stroke: rgba(0, 0, 0, .35); stroke-width: 1; }
.ak-arrow { fill: none; stroke: var(--root); stroke-width: 2.6; stroke-linecap: round; opacity: 0; transition: opacity .25s; }
.ak-arrowhead { fill: var(--root); }
.ak-peg.on .ak-arrow { opacity: 1; }
.ak-peg.on .ak-key { fill: var(--root); }
.ak-peg.on .ak-str { stroke: var(--root); stroke-width: 2; }
.ak-cap { margin: 0; font-size: .8rem; color: var(--muted); text-align: center; line-height: 1.4; min-height: 3.4em; }
.ak-cap b { color: var(--ink); font-family: var(--f-mono); font-size: .78rem; font-weight: 600; }
.ak-foot { gap: 10px 18px; }
.ak-freqs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ak-freqs span { display: inline-flex; align-items: baseline; gap: 5px; }
.ak-freqs b { font-family: var(--f-mono); font-size: .76rem; color: var(--ink); font-weight: 600; }
.ak-freqs small { font-size: .72rem; }

/* ---------- kulaktan akort ---------- */
.fb .mk.kt-ref { --mk: var(--bone); --mk-t: var(--ink); }
.fb .mk.kt-tune { --mk: var(--accent); --mk-t: #fff; }
.fb .mk.kt-ref.ghost .mk-t, .fb .mk.kt-tune.ghost .mk-t { fill: var(--bone); }
.fb .mk.kt-tune.open .mk-disc { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.fb .mk.kt-tune.open .mk-t { fill: #fff; }
.kt-statrow { justify-content: space-between; flex-wrap: nowrap; align-items: flex-start; }
.fb .mk.kt-tune.ghost .mk-disc { stroke: #8fd0c0; stroke-width: 2.2; }
.kt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.kt-pair { margin: 0; font-weight: 650; color: var(--ink); font-size: .95rem; }
.kt-live { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.kt-beatbox { display: flex; flex-direction: column; align-items: flex-start; min-width: 7.5em; }
.kt-beat { font-variant-numeric: tabular-nums; }
.kt-beatbox small { color: var(--muted); font-weight: 600; font-size: .8rem; }
.kt-cvwrap { position: relative; height: 108px; }
.kt-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.kt-knob input[type="range"] { width: clamp(120px, 13vw, 220px); }
.kt-status { flex: 1; margin: 0; color: var(--ink-2); font-size: .92rem; min-height: 2.8em; }
.kt-status.ok { color: var(--f2); font-weight: 650; }

/* ---------- duruş ---------- */
.ps-fig { margin: 0; display: flex; justify-content: center; }
.ps-fig.in .ps-svg { animation: psIn .45s ease-out; }
@keyframes psIn { from { opacity: .25; } to { opacity: 1; } }
.ps-svg { width: 100%; max-width: 640px; height: auto; max-height: 54vh; display: block; overflow: visible; }
.ps-svg {
  --ps-cloth: color-mix(in srgb, var(--accent) 34%, var(--ink-2));
  --ps-skin: color-mix(in srgb, var(--ink) 16%, var(--bg));
  --ps-skin2: color-mix(in srgb, var(--ink) 26%, var(--bg));
}
.ps-limb { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ps-cloth { stroke: var(--ps-cloth); }
.ps-body { fill: var(--ps-cloth); }
.ps-skin { fill: var(--ps-skin); }
.ps-skinl { stroke: var(--ps-skin); }
.ps-skin2 { stroke: var(--ps-skin2); }
.ps-nail { fill: var(--bone); stroke: var(--ps-skin2); stroke-width: 1; }
.ps-hair { fill: var(--ink-2); }
.ps-shoe { fill: var(--ink-2); }
.ps-floor { stroke: var(--line-2); stroke-width: 2; }
.ps-furn { stroke: var(--line-2); stroke-width: 5; stroke-linecap: round; }
.ps-stool { fill: var(--surface); stroke: var(--line-2); stroke-width: 2; }
.ps-strap { fill: none; stroke: var(--wood-3); stroke-linecap: round; }
.ps-gedge { fill: var(--wood); }
.ps-gside { fill: var(--wood-3); }
.ps-gtop { fill: var(--bone); }
.ps-rose { fill: none; stroke: var(--wood-3); stroke-width: 2; }
.ps-hole { fill: var(--wood-2); }
.ps-bridge { fill: var(--wood); }
.ps-neck { fill: var(--wood); }
.ps-headst { fill: var(--wood-2); }
.ps-str { stroke: var(--nickel); stroke-width: .7; }
.ps-fret { stroke: var(--nickel); stroke-width: 1; }
.ps-neckwood { fill: var(--wood-3); }
.ps-board { fill: var(--wood); }
.ps-strdot { fill: var(--nickel-hi); stroke: var(--ink-2); stroke-width: 1; }
.ps-strdot.muted { fill: var(--seventh); stroke: var(--seventh); }
.ps-lab { font: 650 12px var(--f-body); fill: var(--muted); text-anchor: middle; }
.ps-gap { fill: none; stroke: var(--f2); stroke-width: 2; stroke-dasharray: 4 4; }
.ps-call circle { fill: var(--surface-2); stroke-width: 2.6; }
.ps-call text { font: 750 12px var(--f-body); text-anchor: middle; dominant-baseline: central; }
.ps-call.bad circle { stroke: var(--seventh); } .ps-call.bad text { fill: var(--seventh); }
.ps-call.good circle { stroke: var(--f2); } .ps-call.good text { fill: var(--f2); }
.ps-list { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; font-size: .92rem; color: var(--ink-2); max-width: 640px; align-self: center; width: 100%; }
.ps-list li::marker { font-weight: 750; }
.ps-list.bad li::marker { color: var(--seventh); }
.ps-list.good li::marker { color: var(--f2); }
.ps-ok button.on:first-child { background: var(--seventh); color: #fff; }
.ps-ok button.on:last-child { background: var(--f2); color: #fff; }

/* ---------- pena ve parmak ---------- */
.pn-pane { display: flex; flex-direction: column; gap: 12px; }
.pn-pane[hidden] { display: none; }
.pn-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pn-pick {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 7px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); cursor: pointer; color: var(--ink);
  transition: background .15s, border-color .15s, transform .1s;
}
.pn-pick:hover { border-color: var(--accent); }
.pn-pick:active { transform: translateY(1px); }
.pn-pick svg { width: 40px; height: 52px; }
.pn-pick b { font-size: .86rem; font-weight: 650; }
.pn-pick small { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pn-pick.on { background: var(--wood); border-color: var(--wood); color: var(--bone); }
.pn-pick.on small { color: var(--bone); opacity: .75; }
.pn-shape { fill: var(--bone); stroke: var(--wood); stroke-width: 2; }
.pn-pick.on .pn-shape { fill: var(--root); stroke: var(--bone); }
.pn-edge { fill: var(--ink-2); }
.pn-pick.on .pn-edge { fill: var(--bone); }
.pn-finger { fill: color-mix(in srgb, var(--ink) 16%, var(--bg)); }
.pn-nail { fill: var(--bone); stroke: var(--line-2); }
.pn-cvwrap { position: relative; height: 150px; }
.pn-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.pn-meters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: .86rem; color: var(--muted); font-weight: 600; }
.pn-meters b { color: var(--ink); font-weight: 650; }
.pn-m { display: inline-flex; align-items: center; gap: 8px; }
.pn-meter { width: 110px; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pn-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--wood-3), var(--root)); transition: width .35s cubic-bezier(.3,.7,.2,1); }
.pn-griprow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pn-grip { width: 200px; height: auto; flex: none; overflow: visible; }
.pn-grip { --ps-skin: color-mix(in srgb, var(--ink) 16%, var(--bg)); --ps-skin2: color-mix(in srgb, var(--ink) 26%, var(--bg)); }
body.lefty .pn-grip { transform: scaleX(-1); }
body.lefty .pn-grip text { transform-box: fill-box; transform-origin: center; transform: scaleX(-1); }
.pn-shape.gp { fill: var(--root); stroke: var(--wood); }
.pn-call circle { fill: var(--surface-2); stroke: var(--accent); stroke-width: 2; }
.pn-call text { font: 750 11px var(--f-body); fill: var(--accent); text-anchor: middle; dominant-baseline: central; }
.pn-gt { margin: 0 0 4px; font-weight: 700; color: var(--ink); }
.pn-gripcap { margin: 0; padding-left: 1.3em; font-size: .86rem; color: var(--ink-2); }
.pn-gripcap li::marker { color: var(--accent); font-weight: 700; }
.pn-hand { width: 100%; max-width: 560px; height: auto; max-height: 50vh; display: block; margin: 0 auto; overflow: visible; }
.pn-hand { --ps-skin: color-mix(in srgb, var(--ink) 16%, var(--bg)); --ps-skin2: color-mix(in srgb, var(--ink) 26%, var(--bg)); }
body.lefty .pn-hand { transform: scaleX(-1); }
body.lefty .pn-hand text { transform-box: fill-box; transform-origin: center; transform: scaleX(-1); }
.pn-str { stroke: var(--nickel); transform-box: fill-box; transform-origin: center; }
.pn-str.s6, .pn-str.s5, .pn-str.s4 { stroke: color-mix(in srgb, var(--nickel) 70%, var(--wood-3)); }
.pn-str.hit { animation: pnVib .7s ease-out; stroke: var(--root); }
@keyframes pnVib { 0%, 100% { transform: none; } 10% { transform: translateY(2.5px); } 20% { transform: translateY(-2px); } 32% { transform: translateY(1.5px); } 46% { transform: translateY(-1px); } 60% { transform: translateY(.5px); } }
.pn-ring { cursor: pointer; outline: none; }
.pn-ring circle { fill: rgba(36, 21, 15, .62); stroke: var(--rh); stroke-width: 3.4; transform-box: fill-box; transform-origin: center; transition: transform .2s; }
.pn-ring text { font: italic 750 15px var(--f-body); fill: var(--rh); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.pn-ring:hover circle, .pn-ring:focus-visible circle { transform: scale(1.15); }
.pn-ring.hit circle { animation: pnRing .5s ease-out; }
@keyframes pnRing { 30% { transform: scale(1.35); } }
.pn-ring.rh-p { --rh: var(--rh-p); } .pn-ring.rh-i { --rh: var(--rh-i); } .pn-ring.rh-m { --rh: var(--rh-m); } .pn-ring.rh-a { --rh: var(--rh-a); }
.pn-c { font: italic 650 13px var(--f-body); fill: var(--muted); text-anchor: middle; }
.pn-info { margin: 0; text-align: center; font-size: .9rem; color: var(--ink-2); min-height: 1.5em; font-weight: 600; }

/* ---------- tab ve diyagram ---------- */
.tb-title { min-height: 1.6em; }
.tb-none { font-family: var(--f-body); font-size: .95rem; color: var(--muted); font-weight: 600; }
.tb-pair { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tb-exmode .tb-pair { grid-template-columns: minmax(0, 1fr); }
.tb-box { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tb-box[hidden] { display: none; }
.tb-lab { font-size: .76rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.tb-tab .fb[data-mode="tab"] .mk.good .mk-t { fill: var(--f2); }
.tb-tab .fb[data-mode="tab"] .mk.tb-x .mk-t { fill: var(--muted); }
.tb-uc[hidden], .tb-al[hidden] { display: none; }
.tb-alctl { display: flex; flex-direction: column; gap: 8px; }
.tb-msg { margin: 0; font-size: .92rem; color: var(--ink-2); min-height: 2.8em; }
.tb-msg.good { color: var(--f2); font-weight: 650; }
.tb-msg.bad { color: var(--seventh); font-weight: 600; }

@media (max-width: 860px) {
  .ak-main { grid-template-columns: 1fr; }
  .tb-pair { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .kt-live { grid-template-columns: 1fr; gap: 6px; }
  .kt-knob input[type="range"] { width: 160px; }
  .pn-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-svg { max-height: none; }
}
.tb-top { flex-wrap: wrap; row-gap: 10px; }
.tb-sub { display: flex; align-items: center; gap: 10px; flex: 1 1 340px; min-width: 0; flex-wrap: wrap; }
.tb-sub .spacer { flex: 1; }
.fb .mk.kt-ref.ghost .mk-disc { stroke: var(--bone); stroke-width: 2.2; fill: rgba(36, 21, 15, .45); }
.fb .mk.kt-tune.ghost .mk-disc { fill: rgba(36, 21, 15, .45); }
/* PlayCheck'in "Atla" düğmesi gizliyken görünmesin (.btn display kuralı [hidden]'ı eziyor) */
#tab-okuma .playcheck .btn[hidden] { display: none; }
.tb-tab .fb[data-mode="tab"] .mk.now .mk-disc { fill: var(--surface-2); stroke: var(--f1); stroke-width: 1.6; }
.fb .mk.kt-ref.ghost .mk-disc, .fb .mk.kt-tune.ghost .mk-disc { stroke-dasharray: none; stroke-width: 3; }
.fb .mk.kt-tune.ghost .mk-t { fill: #8fd0c0; }
.ps-cap { font-size: 11px; font-weight: 600; }
/* dikey klavye tercihinde sahne ekrana sığmazsa kaydırılsın */
@media (min-width: 861px) {
  #tab-okuma .stage, #kulaktan-akort .stage { overflow-y: auto; justify-content: flex-start; scrollbar-width: thin; }
}