/* 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; }
}