body.has-docked-player{padding-bottom:128px}.player-card.is-docked{position:fixed;z-index:90;left:50%;bottom:16px;width:min(760px,calc(100% - 32px));margin:0;transform:translateX(-50%);box-shadow:0 24px 75px rgba(0,0,0,.55),0 0 35px rgba(72,111,235,.2);animation:dock-in .36s cubic-bezier(.16,1,.3,1)}@keyframes dock-in{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}
.player-card.is-hidden{display:none!important}
.collapse-player{display:none}
@media(max-width:650px){
  body.has-docked-player{padding-bottom:116px}
  .player-card:not(.is-docked){display:flex;flex-direction:column;gap:0;margin-top:24px;padding:18px 16px 20px;border-radius:26px;background:linear-gradient(145deg,rgba(17,35,73,.96),rgba(5,16,38,.98));box-shadow:0 26px 80px rgba(0,0,0,.28)}
  .player-card:not(.is-docked) .now{display:flex;flex-direction:column;align-items:stretch;gap:17px}
  .player-card:not(.is-docked) .cover{width:100%;height:auto;aspect-ratio:1/1;border-radius:18px;font-size:46px;box-shadow:0 18px 42px rgba(0,0,0,.3)}
  .player-card:not(.is-docked) .now-copy{padding:0 2px}.player-card:not(.is-docked) .now-copy small{font-size:8px;letter-spacing:.18em}.player-card:not(.is-docked) .now-copy h2{margin:8px 0 4px;font-size:28px;line-height:1.05}.player-card:not(.is-docked) .now-copy p{font-size:14px}
  .player-card:not(.is-docked) .timeline{order:2;margin-top:24px;gap:8px;font-size:10px}.player-card:not(.is-docked) .timeline input{height:4px}.player-card:not(.is-docked) .player-controls{order:3;justify-content:space-between;margin-top:22px;padding:0 12px;gap:12px}.player-card:not(.is-docked) .player-controls button{width:42px;height:42px;font-size:24px}.player-card:not(.is-docked) .player-controls button.play{width:68px;height:68px;font-size:0;box-shadow:0 10px 26px rgba(0,0,0,.28)}.player-card:not(.is-docked) .player-controls button.play .play-glyph{border-top-width:10px;border-bottom-width:10px;border-left-width:15px}.player-card:not(.is-docked) .player-controls button.play.is-playing .play-glyph{width:18px;height:23px;background:linear-gradient(90deg,currentColor 0 5px,transparent 5px 12px,currentColor 12px 17px)}.player-card:not(.is-docked) audio{display:none}
  .player-card.is-docked{bottom:9px;width:calc(100% - 18px);min-height:74px;padding:9px 10px 8px;grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;border-radius:18px}.player-card.is-docked .now{gap:9px}.player-card.is-docked .cover{width:48px;height:48px;border-radius:11px;font-size:17px}.player-card.is-docked .now-copy small{font-size:7px;margin-bottom:3px}.player-card.is-docked .now-copy h2{font-size:14px;margin:3px 0 2px}.player-card.is-docked .now-copy p{font-size:9px}.player-card.is-docked .player-controls{gap:4px}.player-card.is-docked .player-controls button{width:28px;height:28px;font-size:18px}.player-card.is-docked .player-controls button.play{width:39px;height:39px;font-size:13px}.player-card.is-docked .timeline{gap:7px;font-size:9px}.player-card.is-docked .timeline input{height:3px}
  .player-card:not(.is-docked) .player-controls button.play:not(.is-playing)::before{border-top-width:10px;border-bottom-width:10px;border-left-width:15px}.player-card:not(.is-docked) .player-controls button.play.is-playing::before{width:18px;height:23px;background:linear-gradient(90deg,currentColor 0 5px,transparent 5px 12px,currentColor 12px 17px)}.player-card.is-docked .player-controls button.play:not(.is-playing)::before{border-top-width:5px;border-bottom-width:5px;border-left-width:7px}.player-card.is-docked .player-controls button.play.is-playing::before{width:9px;height:12px;background:linear-gradient(90deg,currentColor 0 2px,transparent 2px 6px,currentColor 6px 8px)}
  body.has-expanded-player{overflow:hidden}
  .player-card.is-docked.is-expanded{inset:0;left:0;bottom:0;transform:none;width:100%;height:100dvh;min-height:100dvh;max-height:none;margin:0;padding:calc(24px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center;gap:0;border-radius:0;border:0;background:linear-gradient(160deg,#172c5e 0%,#07152f 58%,#050f23 100%);box-shadow:none;animation:player-expand .28s ease-out}
  @keyframes player-expand{from{opacity:.7;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
  .player-card.is-expanded .collapse-player{display:grid;place-items:center;position:absolute;top:calc(18px + env(safe-area-inset-top));left:20px;width:44px;height:44px;border:1px solid rgba(190,207,255,.45);border-radius:50%;background:rgba(5,16,38,.42);color:#f6f0df;font-size:26px;line-height:1;cursor:pointer;z-index:2}
  .player-card.is-expanded .now{display:flex;flex-direction:column;align-items:stretch;gap:22px;width:100%}
  .player-card.is-expanded .cover{width:min(82vw,390px);height:auto;aspect-ratio:1/1;margin:0 auto;border-radius:24px;font-size:52px;box-shadow:0 24px 70px rgba(0,0,0,.36)}
  .player-card.is-expanded .now-copy{width:100%;padding:0 2px}.player-card.is-expanded .now-copy small{font-size:9px;letter-spacing:.2em}.player-card.is-expanded .now-copy h2{font-size:clamp(25px,7vw,38px);line-height:1.08;margin:10px 0 6px}.player-card.is-expanded .now-copy p{font-size:15px}
  .player-card.is-expanded .timeline{order:2;margin-top:26px;width:100%;gap:9px;font-size:11px}.player-card.is-expanded .timeline input{height:5px}.player-card.is-expanded .player-controls{order:3;justify-content:center;margin-top:24px;padding:0;gap:26px}.player-card.is-expanded .player-controls button{width:46px;height:46px;font-size:27px}.player-card.is-expanded .player-controls button.play{width:76px;height:76px}.player-card.is-expanded audio{display:none}
}

/* Crisp, familiar transport icons. */
.player-controls #prevBtn,.player-controls #nextBtn{display:grid;place-items:center;padding:0;font-size:0}
.player-controls #prevBtn::before,.player-controls #nextBtn::before{content:"";display:block;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.player-controls #prevBtn::before{transform:rotate(-135deg);margin-left:4px}
.player-controls #nextBtn::before{transform:rotate(45deg);margin-right:4px}

/* Expanded player: a focused, album-first mobile listening view. */
@media(max-width:650px){
  .player-card.is-docked{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:linear-gradient(120deg,rgba(20,49,108,.96),rgba(6,18,42,.96))}
  .player-card.is-docked.is-expanded{justify-content:flex-start;align-items:stretch;overflow:auto;overscroll-behavior:contain;padding:calc(96px + env(safe-area-inset-top)) 28px calc(30px + env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 16%,rgba(104,145,255,.3),transparent 34%),linear-gradient(160deg,#142d64 0%,#07152f 54%,#040d1f 100%)}
  .player-card.is-expanded::before{content:"ŞİMDİ ÇALIYOR";position:absolute;top:calc(31px + env(safe-area-inset-top));left:0;right:0;text-align:center;color:rgba(246,240,223,.9);font-size:12px;font-weight:700;letter-spacing:.2em}
  .player-card.is-expanded .now-copy small{display:none}
  .player-card.is-expanded .collapse-player{top:calc(25px + env(safe-area-inset-top));left:28px;width:48px;height:48px;border-color:rgba(190,207,255,.6);background:rgba(4,14,34,.34);font-size:31px;line-height:.7;box-shadow:0 8px 24px rgba(0,0,0,.18)}
  .player-card.is-expanded .now{gap:25px}
  .player-card.is-expanded .cover{width:min(82vw,604px);max-width:604px;aspect-ratio:1/1;margin:0 auto;border-radius:30px;background:linear-gradient(145deg,#ff7358 0%,#c85e88 52%,#8a4e9d 100%);box-shadow:0 24px 62px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.18)}
  .player-card.is-expanded .now-copy{padding:0 10px}.player-card.is-expanded .now-copy small{font-size:10px;color:rgba(194,207,255,.8);letter-spacing:.22em}.player-card.is-expanded .now-copy h2{font-size:clamp(30px,7.5vw,44px);line-height:1.02;letter-spacing:-.035em;margin:11px 0 7px}.player-card.is-expanded .now-copy p{font-size:18px;color:rgba(194,207,255,.85)}
  .player-card.is-expanded .timeline{margin-top:35px;padding:0 10px;gap:10px;font-size:11px;color:rgba(211,220,246,.86)}.player-card.is-expanded .timeline input{height:5px;accent-color:#f6f0df}
  .player-card.is-expanded .player-controls{margin-top:27px;gap:30px;padding:0 7px}.player-card.is-expanded .player-controls button{width:52px;height:52px;border-color:rgba(190,207,255,.38);background:rgba(5,17,39,.26);font-size:30px}.player-card.is-expanded .player-controls button.play{width:82px;height:82px;background:#f6f0df;color:#0a1833;box-shadow:0 13px 30px rgba(0,0,0,.3)}
}