/* 6. bölüm: mini beste ve kapanış */

/* beste slaytında ızgara daha geniş yer alsın */
.slide.wide-stage { grid-template-columns: minmax(280px, 0.56fr) 1.44fr; }

/* ---------- Mini beste ---------- */
.cp-fill { display: flex; padding: 14px 18px 10px; overflow: auto; }
.cp { width: 100%; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.cp-head, .cp-grid {
  display: grid; grid-template-columns: 3.4em repeat(16, minmax(0, 1fr));
  column-gap: 3px;
}
.cp-head { grid-template-columns: 3.4em repeat(4, minmax(0, 1fr)); column-gap: 8px; }
.cp-chord {
  display: flex; align-items: baseline; gap: 8px; padding: 4px 8px;
  border-top: 3px solid var(--c); background: rgba(20, 9, 7, 0.35);
  color: var(--ink-2); transition: background .15s;
}
.cp-chord b { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); font-weight: 600; }
.cp-chord small { color: var(--c); font-weight: 700; }
.cp-chord.now { background: color-mix(in srgb, var(--c) 22%, transparent); }
.cp-grid { flex: 1; min-height: 0; row-gap: 2px; grid-template-rows: repeat(var(--rows), minmax(14px, 1fr)); }
.cp-lab { font-size: 0.72rem; color: var(--muted); align-self: center; text-align: right; padding-right: 6px; white-space: nowrap; }
.cp-lab.do { color: var(--tonic); font-weight: 700; }
.cp-lab.out { color: var(--tension); }
.cp-cell {
  min-width: 0; min-height: 0; padding: 0; cursor: pointer;
  border: 0; border-radius: 2px;
  background: rgba(239, 228, 204, 0.045);
  transition: background .1s, transform .08s;
}
/* ölçü başı: biraz boşluk */
.cp-grid > .cp-cell.bar:not([data-s="0"]) { margin-left: 5px; }
/* çalan akorun notaları: hafif altın */
.cp-cell.ct { background: rgba(242, 190, 75, 0.12); }
.cp-cell.out { background: rgba(216, 70, 94, 0.07); }
.cp-cell:hover { background: rgba(239, 228, 204, 0.16); }
.cp-cell.now { box-shadow: inset 0 0 0 1px rgba(224, 189, 118, 0.55); }
.cp-cell.on { background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cp-cell.on.ct { background: var(--tonic); box-shadow: 0 0 0 1px var(--tonic); }
.cp-cell.on.out { background: var(--tension); box-shadow: 0 0 0 1px var(--tension); }
.cp-cell.on.now { transform: scale(1.12); box-shadow: 0 0 14px currentColor; }
.btn.out.on { border-color: var(--tension); color: #f08a9b; background: rgba(216, 70, 94, 0.14); }
.cp-status { font-size: 0.86rem; color: var(--ink-2); }
.cp-status.c-tension { color: var(--tension); font-weight: 600; }

@media (max-width: 1100px) {
  .slide.wide-stage { grid-template-columns: minmax(260px, 0.6fr) 1.4fr; }
}
@media (max-width: 640px) {
  .cp-fill { padding: 10px 8px 8px; }
  .cp-head, .cp-grid { grid-template-columns: 2.6em repeat(16, minmax(0, 1fr)); column-gap: 2px; }
  .cp-head { grid-template-columns: 2.6em repeat(4, minmax(0, 1fr)); column-gap: 4px; }
  .cp-chord { flex-direction: column; gap: 0; padding: 3px 5px; }
  .cp-chord b { font-size: 0.95rem; }
  .cp-lab { font-size: 0.62rem; padding-right: 3px; }
  .cp-grid > .cp-cell.bar:not([data-s="0"]) { margin-left: 3px; }
}

/* ---------- Kapanış ---------- */
.fin-names { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 0.92rem; color: var(--ink); }
.fin-names .c-tonic { font-weight: 700; }
.fin-names small { color: var(--muted); font-size: 0.8rem; }
.cp-grid.locked > .out { display: none; }