/* ============================================================================
   OFİS 4.4 — NOTLAR DEFTER SİSTEMİ
   ========================================================================== */
.ofs-defter {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
}
.ofs-defter-title {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em;
  color: var(--faint);
  text-transform: uppercase;
  margin-right: 4px;
}
.ofs-defter-sep {
  width: 1px; height: 20px;
  background: var(--line);
  margin: 0 4px;
}
.ofs-defter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .8rem; font-weight: 600;
}
.ofs-defter-chip i {
  font-style: normal;
  font-size: .7rem;
  font-weight: 700;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.ofs-defter-chip:hover { border-color: var(--control-line); color: var(--ink); }
.ofs-defter-chip.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}
.ofs-defter-chip.active i { color: var(--accent); }

/* not kartı tıklanabilir */
.note-card { cursor: pointer; }
.note-card h3 { cursor: pointer; }
.note-card h3:hover { color: var(--accent); }
.note-card .note-tags .tag { cursor: pointer; }
.note-card .note-tags .tag:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================================
   OFİS 4.4 — KATALOG CİLASI
   ========================================================================== */
.release-card, .artist-card { min-width: 0; overflow: hidden; }
.release-card h3, .artist-card h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.release-cover { aspect-ratio: 1; background: var(--surface-muted); display: grid; place-items: center; }
.release-cover img { width: 100%; height: 100%; object-fit: cover; }