/* 4. Ritim ve sağ el
   Desen kutuları klavyenin malzemesinden: aşağı vuruş gülağacı, yukarı vuruş kemik, boş adım sedef nokta.
   Vurgu metronomdaki gibi altın halka; çalan adım koyu seafoam çerçeve. */
.rt-fb { width: 100%; }
.rt-chk { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.rt-chk input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.rt-presets { gap: 8px 12px; }

/* ---------- desen kutuları ---------- */
.rt-grid { display: grid; gap: 10px 4px; }
.rt-16 { grid-template-columns: repeat(16, minmax(0, 1fr)); }
.rt-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.rt-16 .rt-cell[data-beat="1"], .rt-16 .rt-cell[data-beat="3"] { --band: 1; }
.rt-16 .rt-cell[data-i="4"], .rt-16 .rt-cell[data-i="8"], .rt-16 .rt-cell[data-i="12"],
.rt-8 .rt-cell[data-i="2"], .rt-8 .rt-cell[data-i="4"], .rt-8 .rt-cell[data-i="6"] { margin-left: 7px; }

.rt-cell {
  position: relative; min-width: 0; height: clamp(54px, 7.4vh, 74px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; border-radius: 7px; padding: 4px 0 5px; cursor: pointer;
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .15s, color .15s, transform .12s, box-shadow .15s;
}
.rt-cell:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.rt-ico { width: 18px; height: 27px; display: grid; place-items: center; flex: none; }
.rt-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rt-cnt { font: 650 .7rem/1 var(--f-body); color: var(--muted); min-height: .7rem; }
.rt-cell[data-i="0"] .rt-cnt, .rt-cell[data-i="4"] .rt-cnt, .rt-cell[data-i="8"] .rt-cnt, .rt-cell[data-i="12"] .rt-cnt { color: var(--ink); font-weight: 800; }
.rt-8 .rt-cell:nth-child(odd):not([data-v="D"]):not([data-v="v"]) .rt-cnt { color: var(--ink); font-weight: 800; }
.rt-8 .rt-cell:nth-child(odd) .rt-cnt { font-weight: 800; }

/* boş adım: sedef perde işareti */
.rt-cell[data-v="."] .rt-ico::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fffdf8, #e6efe9 45%, #d4e6e8 70%, #e7d6e7);
  box-shadow: inset 0 0 0 1px rgba(42, 28, 25, .2);
}
/* aşağı: gülağacı; yukarı: kemik; susturulmuş: kesik çizgili */
.rt-cell[data-v="D"] { background: linear-gradient(180deg, var(--wood-3), var(--wood) 60%, var(--wood-2)); color: var(--bone); box-shadow: none; }
.rt-cell[data-v="D"] .rt-cnt { color: rgba(239, 231, 214, .78); }
.rt-cell[data-v="U"] { background: linear-gradient(180deg, #f8f3e8, var(--bone)); color: var(--wood); box-shadow: inset 0 0 0 1px rgba(42, 28, 25, .28); }
.rt-cell[data-v="U"] .rt-cnt { color: rgba(42, 28, 25, .7); }
.rt-cell[data-v="X"] { background: transparent; color: var(--seventh); box-shadow: inset 0 0 0 1.5px var(--line-2); background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(42, 28, 25, .06) 5px 7px); }
/* çalan adım */
.rt-cell.now { transform: translateY(-3px); box-shadow: 0 0 0 2.5px var(--accent), 0 8px 16px rgba(36, 21, 15, .22); }
.rt-cell.now[data-v="."] { box-shadow: 0 0 0 2px var(--accent); }

/* ---------- sağ el: sarkaç ---------- */
.rt-hand { position: relative; height: clamp(210px, 34vh, 320px); flex: none; }
.rt-hand canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-line .rt-cell { height: clamp(58px, 7.6vh, 76px); }
.rt-line .rt-cell[data-v="."] { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line-2); border: 0; }
.rt-line .rt-cell[data-v="."] .rt-ico { opacity: .45; }
.rt-line .rt-cell[data-v="."] .rt-ico::before { display: none; }
.rt-line .rt-cell[data-v="."] .rt-ico svg { stroke-dasharray: 3 3.5; }
.rt-miss { display: none; font-size: .62rem; font-weight: 700; color: var(--muted); line-height: 1; }
.rt-line .rt-cell[data-v="."] .rt-miss { display: block; }

/* ---------- susturma ve vurgu ---------- */
.rt-mute .rt-cell { height: clamp(66px, 9vh, 88px); }
.rt-acc, .rt-pm { display: none; line-height: 1; }
.rt-acc { font: 800 1rem/1 var(--f-display); color: var(--root); margin-bottom: -2px; }
.rt-pm { font: 600 .56rem/1 var(--f-mono); letter-spacing: -.02em; color: var(--ink-2); border-bottom: 1.5px dashed var(--ink-2); padding-bottom: 2px; }
.rt-mute .rt-cell[data-v="n"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.rt-mute .rt-cell[data-v="v"] { background: linear-gradient(180deg, var(--wood-3), var(--wood) 60%, var(--wood-2)); color: var(--bone); box-shadow: inset 0 0 0 2px var(--root); }
.rt-mute .rt-cell[data-v="v"] .rt-acc { display: block; }
.rt-mute .rt-cell[data-v="v"] .rt-ico svg { stroke-width: 3.4; }
.rt-mute .rt-cell[data-v="v"] .rt-cnt { color: rgba(239, 231, 214, .8); }
.rt-mute .rt-cell[data-v="c"] { background: transparent; color: var(--seventh); box-shadow: inset 0 0 0 1.5px var(--line-2); background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(42, 28, 25, .06) 5px 7px); }
.rt-mute .rt-cell[data-v="pm"] { background: var(--bg-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.rt-mute .rt-cell[data-v="pm"] .rt-pm { display: block; }
.rt-mute .rt-cell[data-v="pm"] .rt-ico { height: 20px; opacity: .8; }
.rt-one { gap: 8px; }

.rt-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.rt-fig { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rt-fig-svg { width: 100%; height: auto; max-height: 118px; display: block; }
.rt-fig figcaption { font-size: .82rem; line-height: 1.4; color: var(--ink-2); }
.rt-fig figcaption b { color: var(--ink); }
.rt-fs { stroke: var(--ink-2); opacity: .55; stroke-linecap: round; }
.rt-fs.w { stroke: #9a8a68; opacity: .8; }
.rt-fs.on-wood { stroke: var(--nickel-hi); opacity: .95; }
.rt-fs.on-wood.w { stroke: #d8c9a6; }
.rt-f-bridge { fill: var(--wood); }
.rt-f-saddle { fill: var(--bone); }
.rt-f-palm { fill: var(--bone); stroke: var(--ink); stroke-width: 1.4; fill-opacity: .93; }
.rt-f-edge { fill: none; stroke: var(--rh-p); stroke-width: 5; stroke-linecap: round; opacity: .9; }
.rt-f-wood { fill: var(--wood); }
.rt-f-fret { fill: var(--nickel); }
.rt-f-finger { fill: var(--bone); stroke: var(--ink); stroke-width: 1.3; fill-opacity: .82; }
.rt-f-lab { font: 600 11px var(--f-body); fill: var(--muted); }

/* ---------- aksak ---------- */
.rt-aksak { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-group { flex: var(--n) 1 0; min-width: calc(var(--n) * 54px); display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.rt-group-cells {
  display: grid; grid-template-columns: repeat(var(--n), 1.35fr .85fr); gap: 3px;
  padding: 5px; border-radius: 10px; background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.rt-group .rt-cell { height: clamp(52px, 7vh, 70px); }
.rt-group .rt-cell.off { height: clamp(44px, 6vh, 58px); align-self: end; }
.rt-group .rt-cell.off .rt-ico { width: 14px; height: 21px; }
.rt-group .rt-cell .rt-cnt { color: var(--ink); font-weight: 800; }
.rt-group .rt-cell[data-v="D"] .rt-cnt { color: var(--bone); }
.rt-group .rt-cell.acc { box-shadow: inset 0 0 0 2.5px var(--root); }
.rt-group .rt-cell.acc[data-v="D"] { box-shadow: inset 0 0 0 2.5px var(--root); }
.rt-group .rt-cell.acc .rt-cnt { color: var(--root-ink); }
.rt-group .rt-cell.acc[data-v="D"] .rt-cnt { color: var(--root); }
.rt-group .rt-cell.now { box-shadow: 0 0 0 2.5px var(--accent), 0 8px 16px rgba(36, 21, 15, .22); }
.rt-glab { font: 600 .74rem/1 var(--f-mono); color: var(--muted); text-align: center; letter-spacing: -.02em; }
.rt-chrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rt-chbox {
  display: flex; align-items: baseline; gap: 8px; text-align: left; flex-wrap: wrap;
  border: 0; border-radius: 4px 14px 14px 4px; padding: 6px 12px; cursor: pointer;
  background: var(--surface); color: var(--ink); border-left: 4px solid var(--line-2);
  transition: background .15s, border-color .15s;
}
.rt-chbox .chord { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.04em; }
.rt-chbox small { color: var(--muted); font-weight: 600; font-size: .78rem; }
.rt-chbox.on { background: var(--wood); color: var(--bone); border-left-color: var(--root); }
.rt-chbox.on small { color: rgba(239, 231, 214, .75); }

/* ---------- parmakla arpej ve Travis: teller gibi satırlar, halka işaretler ---------- */
.rt-pick, .rt-travis { display: grid; grid-template-columns: max-content repeat(var(--n, 8), minmax(0, 1fr)); gap: 3px 4px; align-items: center; }
.rt-travis { --n: 8; row-gap: 6px; }
.rt-rlab { display: flex; align-items: center; gap: 6px; padding-right: 8px; font-size: .84rem; white-space: nowrap; }
.rt-rlab b { font-family: var(--f-body); font-style: italic; font-weight: 750; color: var(--ink); }
.rt-rlab small { color: var(--muted); font-size: .74rem; font-weight: 600; }
.rt-rlab .key-dot { margin: 0; }
.rt-pc {
  --rc: var(--rh-p);
  position: relative; height: 34px; min-width: 0; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
  /* tel: hücrenin ortasından geçen nikel çizgi */
  background: linear-gradient(180deg, transparent calc(50% - 1px), var(--line-2) calc(50% - 1px), var(--line-2) calc(50% + 1px), transparent calc(50% + 1px));
  border-radius: 6px;
}
.rt-pc[data-beat="1"] { background-color: rgba(42, 28, 25, .045); }
.rt-pc > span {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: italic 750 .9rem/1 var(--f-body); color: var(--ink);
  background: color-mix(in srgb, var(--rc) 38%, var(--bg)); box-shadow: inset 0 0 0 3px var(--rc);
  transform: scale(0); transition: transform .18s cubic-bezier(.2, .9, .3, 1.3);
}
.rt-pc.on > span { transform: scale(1); }
.rt-pc:not(.on):hover > span { transform: scale(.55); opacity: .55; }
.rt-pc[data-r="i"] { --rc: var(--rh-i); } .rt-pc[data-r="m"] { --rc: var(--rh-m); } .rt-pc[data-r="a"] { --rc: var(--rh-a); }
.rt-pc.now { background-color: rgba(31, 111, 106, .16); }
.rt-pc.now.on > span { transform: scale(1.18); box-shadow: inset 0 0 0 3px var(--rc), 0 0 0 2px var(--accent); }
.rt-pcnt { font: 650 .7rem/1 var(--f-body); color: var(--muted); text-align: center; padding-top: 2px; }
.rt-pick.trip .rt-pc[data-k="0"], .rt-pick.trip .rt-pc[data-k="3"], .rt-pick.trip .rt-pc[data-k="6"] { margin-left: 0; }

/* Travis: iki katman */
.rt-travis .rt-pc { height: 46px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; background-image: none; background: transparent; }
.rt-travis .rt-pc[data-beat="1"] { background-color: rgba(42, 28, 25, .045); }
.rt-travis .rt-pc > small { font-size: .62rem; font-weight: 650; color: var(--muted); line-height: 1; min-height: .62rem; }
.rt-travis .rt-pc > span { width: 26px; height: 26px; }
.rt-tf:not(.on) > span { transform: scale(.3); opacity: .35; }
.rt-tt { cursor: default; --rc: var(--rh-p); }
.rt-tt.off > span { transform: scale(.22); opacity: .3; }
.rt-travis .rt-pc.now { background-color: rgba(31, 111, 106, .16); }
.rt-travis.mute-f .rt-tf, .rt-travis.mute-f .rt-layer-f, .rt-travis.mute-t .rt-tt, .rt-travis.mute-t .rt-layer-t { opacity: .3; filter: grayscale(.6); }
/* sağ el halkaları klavyede: çalmayan parmak soluk, çalan büyür */
.fb .mk.rh.rt-rest { opacity: .62; }

/* ---------- dar ekran ---------- */
@media (max-width: 860px) {
  .rt-16 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .rt-16 .rt-cell[data-i="8"] { margin-left: 0; }
  .rt-chrow { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .rt-chbox { padding: 5px 8px; }
  .rt-chbox small { display: none; }
}
@media (max-width: 520px) {
  .rt-figs { grid-template-columns: 1fr; }
  .rt-rlab small { display: none; }
  .rt-pc > span { width: 24px; height: 24px; font-size: .8rem; }
  .rt-travis .rt-pc > small { font-size: .55rem; }
  .rt-travis .rt-rlab b { font-size: .78rem; }
  .rt-group { min-width: calc(var(--n) * 42px); }
}
@media (prefers-reduced-motion: reduce) {
  .rt-cell, .rt-pc > span { transition: none; }
}
.fb .mk.rh.now .mk-disc { stroke: var(--rh); stroke-width: 3.8; fill: rgba(36, 21, 15, .35); }