/* 5. bölüm: ritim demoları */

/* ---------- Adım sıralayıcı ---------- */
.sq-fill { display: flex; align-items: center; justify-content: center; padding: 18px 20px; }
.sq { width: 100%; max-width: 860px; display: grid; gap: 10px; }
.sq-row {
  display: grid; grid-template-columns: 7.5em repeat(16, minmax(0, 1fr));
  gap: 4px; align-items: center;
}
.sq-lab { font-size: 0.86rem; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.sq-lab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.sq-nums .sq-lab::before { display: none; }
.sq-lab .short { display: none; }
.sq-cell {
  aspect-ratio: 1 / 1.5; min-width: 0; padding: 0; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: 2px;
  background: rgba(20, 9, 7, 0.45);
  transition: background .1s, border-color .1s, transform .08s;
}
.sq-cell.beat { border-color: var(--line); background: rgba(239, 228, 204, 0.05); }
.sq-cell:hover { border-color: var(--c); }
.sq-cell.on { background: var(--c); border-color: var(--c); box-shadow: inset 0 -4px 0 rgba(0,0,0,.22); }
.sq-cell.now { border-color: var(--brass-hi); background-color: rgba(201, 162, 90, 0.22); }
.sq-cell.on.now { background: var(--c); transform: scale(1.08); box-shadow: 0 0 16px var(--c); }
.sq-num { text-align: center; font-size: 0.72rem; color: var(--muted); }
.sq-num.beat { color: var(--ink-2); font-weight: 700; }

@media (max-width: 640px) {
  .sq-fill { padding: 14px 10px; }
  .sq-row { grid-template-columns: 4.2em repeat(16, minmax(0, 1fr)); gap: 2px; }
  .sq-lab { font-size: 0.72rem; gap: 4px; }
  .sq-lab .long { display: none; }
  .sq-lab .short { display: inline; }
  .sq-cell { aspect-ratio: 1 / 1.6; }
}

/* ---------- Nota süreleri ---------- */
.du-main { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 14px 18px 8px; }
.du-top { flex: 0 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 18px; align-items: center; }
.du-staffbox { min-width: 0; height: 100%; display: flex; align-items: center; }
.du-staff { width: 100%; height: auto; max-height: 100%; }
.du-staff .du-line, .du-staff .du-bar { stroke: rgba(239, 228, 204, 0.55); stroke-width: 1; }
.du-staff .du-bar { stroke-width: 2; }
.du-staff .du-clef { fill: var(--ink); }
.du-staff .du-ts { fill: var(--ink); font: 800 25px var(--f-body); }
.du-staff .du-head { stroke: var(--tonic); stroke-width: 1.5; opacity: 0; }
.du-treebox { border-left: 1px solid var(--line-soft); padding-left: 14px; }
.du-tree { width: 100%; height: auto; }
.du-tree .du-tl-lab { fill: var(--ink-2); font: 600 10px var(--f-body); }
.du-tlwrap { display: flex; flex-direction: column; gap: 6px; }
.du-tl { position: relative; height: 46px; border: 1px solid var(--line); border-radius: var(--r-sm); background: repeating-linear-gradient(90deg, transparent 0 calc(6.25% - 1px), rgba(239,228,204,.06) calc(6.25% - 1px) 6.25%); }
.du-beat { position: absolute; top: -1px; bottom: -1px; border-left: 1px solid rgba(239,228,204,.35); font-size: .66rem; color: var(--muted); padding-left: 3px; }
.du-bars { position: absolute; inset: 14px 0 3px 0; }
.du-b { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: rgba(239,228,204,.75); border: 1px solid var(--bg-2); border-radius: 2px; color: #2b1714; font-size: .66rem; font-weight: 600; transition: background .1s; }
.du-b.down { background: rgba(242,190,75,.75); }
.du-b.rest { background: repeating-linear-gradient(135deg, rgba(154,134,112,.35) 0 4px, transparent 4px 8px); color: var(--muted); }
.du-b.on { background: var(--tonic); color: #2b1714; }
.du-b small { white-space: nowrap; }
.du-tlhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--tonic); opacity: 0; box-shadow: 0 0 8px var(--tonic); }
.du-info { display: flex; gap: 14px; align-items: baseline; font-size: .85rem; min-height: 1.3em; }
.du-left { color: var(--ink-2); font-weight: 600; }
.du-left.full { color: var(--tonic); }
.du-msg { color: var(--tension); }
.du-val { display: inline-flex; align-items: center; gap: 4px; padding-left: .6em; }
.du-ico { width: 15px; height: 19px; }
.du-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.du-lab { color: var(--muted); font-size: .82rem; }
@media (max-width: 1100px) { .du-top { grid-template-columns: minmax(0, 1fr) 170px; } }
@media (max-width: 860px) {
  .du-main { min-height: 300px; padding: 10px 8px 6px; }
  .du-top { grid-template-columns: 1fr; }
  .du-treebox { border-left: 0; border-top: 1px solid var(--line-soft); padding: 8px 0 0; }
  .du-tree { max-height: 120px; }
  .du-b small { display: none; }
}
.du-ctl { gap: 8px 8px; }
.du-ctl .btn { padding: .45em .7em; }