.music-page { min-width: 280px; }
.music-header, .music-main { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.music-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 24px; border-bottom: 1px solid var(--border); }
.music-label { font: 400 11px/1.6 var(--font-mono); letter-spacing: .12em; color: var(--text-dim); }
.music-intro { padding: 64px 0 48px; }
.music-intro > .music-label { color: var(--accent); }
.music-intro h1 { font-size: clamp(36px, 6vw, 68px); line-height: 1.12; letter-spacing: -.055em; margin: 22px 0; }
.music-intro h1 span { color: var(--accent); }
.music-intro > p:last-child { color: var(--text-dim); font-size: 16px; }
.music-library-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); padding-top: 20px; }
.music-library-heading h2 { font-size: 19px; }
.music-shelf { margin: 20px 0 40px; }
.music-shelf-heading { position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; padding-inline: 12px; }
.music-shelf-controls { display: flex; gap: 6px; margin-left: auto; }
.music-shelf-arrow { min-width: 36px; min-height: 36px; padding: 4px 10px; }
.music-shelf-arrow:disabled { opacity: .35; cursor: default; }
.music-shelf-heading h3 { font-size: 14px; font-weight: 500; }
.music-shelf-deck { padding: 24px 24px 0; background: linear-gradient(180deg, #171c24, #20252c); border: 1px solid #303845; border-bottom: 0; border-radius: 8px 8px 0 0; }
.music-shelf-viewport { margin-top: -132px; padding-top: 132px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.music-shelf-viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.music-cds { display: flex; flex-wrap: nowrap; gap: 12px; align-items: flex-end; width: max-content; min-width: 100%; padding: 12px 6px 6px; }
.music-cd { position: relative; flex: 0 0 48px; width: 48px; height: 224px; color: var(--text); padding: 0; background: transparent; border: 0; text-align: left; cursor: pointer; font: inherit; perspective: 700px; transition: flex-basis .4s ease, width .4s ease, transform .4s ease; }
.music-spine { position: absolute; inset: 0 auto 0 0; width: 48px; z-index: 1; border: 1px solid #77818c; border-radius: 3px; background: linear-gradient(90deg, #181f27, #394552 18%, #252f3a 70%, #111820); box-shadow: 4px 0 8px #0006; transition: width .4s ease; }
.music-spine-copy { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; justify-content: center; width: 190px; height: 40px; transform: translate(-50%, -50%) rotate(-90deg); transition: opacity .2s ease; }
.music-cd-title, .music-cd-artist { display: block; overflow: hidden; white-space: nowrap; line-height: 1.35; }
.music-cd-title { font-size: 12px; font-weight: 600; }
.music-cd-artist { color: #b2bfcd; font-size: 10px; margin-top: 3px; }
.music-spine-text { display: block; width: max-content; }
.music-spine-text.is-overflowing { animation: music-spine-scroll var(--music-scroll-duration, 7s) ease-in-out infinite alternate; }
@keyframes music-spine-scroll { 0%, 20% { transform: translateX(0); } 80%, 100% { transform: translateX(var(--music-scroll-end)); } }
.music-case { position: absolute; top: 0; left: 24px; display: block; width: 200px; height: 224px; padding-block: 12px; background: #596573; border-radius: 0 3px 3px 0; box-shadow: 6px 8px 18px #0006; opacity: 0; visibility: hidden; transform: rotateY(-90deg); transform-origin: left center; transition: transform .4s ease, opacity .2s ease, visibility .4s; }
/* Ön kapak kareyi doldurur; metinler CD sırtında kalır. */
.music-case img { display: block; width: 200px; height: 200px; min-width: 200px; min-height: 200px; object-fit: cover; background: #0d0f14; }
.music-paper { position: absolute; bottom: calc(100% + 8px); left: 24px; width: 200px; max-height: 110px; overflow: auto; padding: 14px 16px; border: 1px solid #d9cdaa; border-radius: 2px 3px 1px 2px; background: repeating-linear-gradient(0deg, transparent 0 23px, #a5956b14 23px 24px), #f4edda; color: #28271f; box-shadow: 2px 5px 12px #0004; opacity: 0; visibility: hidden; transform: translateY(28px) scaleX(0); transform-origin: left bottom; transition: transform .4s ease, opacity .25s ease, visibility .4s; }
.music-paper-title, .music-paper-artist { display: block; white-space: normal; overflow-wrap: anywhere; }
.music-paper-title { font-size: 16px; font-weight: 700; line-height: 1.4; }
.music-paper-artist { margin-top: 6px; color: #605843; font-size: 13px; line-height: 1.5; }
.music-cd:is(:focus-visible, .is-preview) { flex-basis: 224px; width: 224px; transform: translateY(-10px); z-index: 2; }
.music-cd:is(:focus-visible, .is-preview) .music-spine { width: 24px; }
.music-cd:is(:focus-visible, .is-preview) .music-spine-copy { opacity: 0; }
.music-cd:is(:focus-visible, .is-preview) .music-case { opacity: 1; visibility: visible; transform: rotateY(0); }
.music-cd:is(:focus-visible, .is-preview) .music-paper { opacity: 1; visibility: visible; transform: translateY(0) scaleX(1); }
@media (hover: hover) {
  .music-cd:hover { flex-basis: 224px; width: 224px; transform: translateY(-10px); z-index: 2; }
  .music-cd:hover .music-spine { width: 24px; }
  .music-cd:hover .music-spine-copy { opacity: 0; }
  .music-cd:hover .music-case { opacity: 1; visibility: visible; transform: rotateY(0); }
  .music-cd:hover .music-paper { opacity: 1; visibility: visible; transform: translateY(0) scaleX(1); }
}
.music-cd:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 3px; }
.music-shelf-edge { height: 15px; background: linear-gradient(#68717a, #39414a 30%, #252c34); border: 1px solid #59626d; border-radius: 0 0 4px 4px; box-shadow: 0 15px 20px #0004; }
.music-footnote { color: var(--text-dim); max-width: 670px; font-size: 12px; padding-bottom: 40px; }
.music-message { padding: 24px; }
.music-dialog { box-sizing: border-box; width: min(860px, calc(100% - 24px)); max-width: none; min-width: 224px; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); max-height: calc(100dvh - 24px); overflow: auto; }
.music-dialog::backdrop { background: #03070dd9; }
.music-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.music-dialog-heading h2 { margin: 8px 0; font-size: 24px; overflow-wrap: anywhere; }
.music-dialog-heading p { margin: 0; }
.music-dialog-heading button { flex-shrink: 0; }
/* Oynatıcı görünür, kontroller açık ve dar ekranlarda dahi en az 200 × 200 px. */
#music-player-host iframe { display: block; width: 100%; min-width: 200px; height: auto; min-height: 200px; aspect-ratio: 16 / 9; border: 0; }
.music-dialog-bottom { margin-top: 18px; }
.music-dialog-bottom p { font-size: 12px; }
@media (max-width: 639px) {
  .music-header, .music-main { width: calc(100% - 32px); }
  .music-header > .music-label { display: none; }
  .music-intro { padding-block: 40px 28px; }
  .music-wide-break { display: none; }
  .music-shelf-deck { padding: 20px 8px 0; }
  .music-cds { justify-content: flex-start; }
  .music-dialog { padding: 12px; }
  .music-dialog-heading { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .music-cd, .music-spine, .music-spine-copy, .music-case, .music-paper { transition: none; }
  .music-spine-text.is-overflowing { animation: none; }
  .music-cd-title, .music-cd-artist { overflow: auto; scrollbar-width: none; }
}