/* Bassdarbuka — parça satırı, oynatıcı, öneri penceresi ve müzik listesi sayfası */

/* ---------- Parça satırı ---------- */
.trk{
  display:flex; align-items:center; gap:14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.trk:hover{ background: rgba(246,240,250,.03); }
.trk.is-playing{ background: rgba(255,47,158,.07); border-color: rgba(255,47,158,.35); }
.trk.is-selected{ border-color: rgba(240,185,61,.45); }

.trk-play{
  width: 38px; height: 38px; flex-shrink:0;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color: var(--text);
  transition: border-color .15s, background .15s;
}
.trk-play:hover{ border-color: var(--pink); }
.trk-play:focus-visible, .trk-pick:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.trk-play-icon{
  width:0; height:0;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 3px;
}
.trk.is-playing .trk-play{ background: var(--pink); border-color: var(--pink); color:#1a0512; }
.trk.is-playing .trk-play-icon{
  width: 10px; height: 10px; margin:0;
  border: none; background: currentColor; border-radius: 2px;
}
.trk-play-off{ cursor:default; opacity:.25; }

.trk-meta{ flex:1; min-width:0; display:flex; flex-direction:column; }
.trk-name{
  font-weight: 700; font-size: .95rem; color: var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.trk-artist{ font-size: .82rem; color: var(--text-dim); }

.trk-pick{
  flex-shrink:0;
  border: 1px solid var(--line-strong);
  background: none; color: var(--text);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: 'Manrope'; font-weight: 700; font-size: .82rem;
  cursor:pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.trk-pick:hover{ border-color: var(--gold); color: var(--gold); }
.trk.is-selected .trk-pick{ background: var(--gold); border-color: var(--gold); color: #1a0f00; }

/* ---------- Tıklayınca açılan YouTube oynatıcı ---------- */
.yt-panel{ padding: 4px 14px 14px 66px; }
.yt-frame{
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 420px;
  border-radius: 10px; overflow:hidden;
  border: 1px solid var(--line-strong);
  background: #000;
}
.yt-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width: 640px){
  .yt-panel{ padding-left: 14px; }
  .yt-frame{ max-width:none; }
}

/* ---------- Formdaki "öneriler" butonu ---------- */
.track-input-row{ display:flex; gap:10px; align-items:stretch; }
.track-input-row input{ flex:1; min-width:0; }
.sugg-btn{
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 0 14px;
  font-family:'Manrope', system-ui, sans-serif; font-weight:700; font-size:.85rem;
  cursor:pointer;
  transition: border-color .15s, color .15s;
}
.sugg-btn:hover{ border-color: var(--pink); color: var(--pink); }
.sugg-btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.sugg-btn .plus{
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--pink); color:#1a0512;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 1rem; line-height: 1; font-weight: 800;
}
.sugg-btn .cnt{ color: var(--text-dim); font-weight:600; }
@media (max-width: 480px){
  .sugg-btn .lbl{ display:none; }
  .sugg-btn{ padding: 0 12px; }
}

/* ---------- Öneri penceresi (modal) ---------- */
.mmodal{
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8,4,12,.72);
  backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
}
.mmodal[hidden]{ display:none; }
.mmodal-box{
  width: 100%; max-width: 560px;
  max-height: min(80vh, 720px);
  display:flex; flex-direction:column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), var(--shadow-glow);
  animation: mmodalIn .18s ease-out;
}
@keyframes mmodalIn{ from{ opacity:0; transform: translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .mmodal-box{ animation:none; } }

.mmodal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--line);
}
.mmodal-head h3{ font-size: 1.15rem; }
.mmodal-head p{ margin: 6px 0 0; color: var(--text-dim); font-size: .85rem; }
.mmodal-close{
  width: 36px; height: 36px; flex-shrink:0;
  border-radius: 50%; border: 1px solid var(--line-strong);
  background:none; color: var(--text); font-size: 1.2rem; cursor:pointer;
}
.mmodal-close:hover{ border-color: var(--pink); color: var(--pink); }
.mmodal-close:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.mmodal-list{ overflow-y:auto; padding: 10px 8px 14px; }
.mmodal-empty{ padding: 24px 16px; color: var(--text-muted); font-size: .92rem; }

.form-list-link{
  display:inline-block; margin-top: 10px;
  color: var(--gold); font-size:.88rem; font-weight:700; text-decoration:none;
}
.form-list-link:hover{ text-decoration: underline; }

/* ---------- Müzik listesi sayfası ---------- */
.ml-toolbar{
  display:flex; flex-wrap:wrap; gap: 14px; align-items:center; justify-content:space-between;
  margin-bottom: 36px;
}
.ml-chips{ display:flex; flex-wrap:wrap; gap: 8px; }
.ml-chip{
  border: 1px solid var(--line-strong);
  background: none; color: var(--text-muted);
  border-radius: 999px;
  padding: 8px 16px;
  font-family:'Manrope', system-ui, sans-serif; font-weight:700; font-size:.88rem;
  cursor:pointer;
}
.ml-chip:hover{ color: var(--text); }
.ml-chip[aria-pressed="true"]{ background: var(--text); border-color: var(--text); color: var(--bg); }
.ml-chip:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

.ml-search{
  width: min(100%, 300px);
  background: var(--bg-2); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 10px 18px; color: var(--text);
  font-family:'Manrope', system-ui, sans-serif; font-size:.92rem;
}
.ml-search:focus{ outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }

.ml-cats{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items:start; }
.ml-cat{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 10px 12px;
}
.ml-cat-head{
  display:flex; align-items:baseline; justify-content:space-between; gap: 12px;
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.ml-cat-head h2{ font-size: 1.1rem; }
.ml-cat-head .ml-count{ color: var(--text-dim); font-size: .82rem; white-space:nowrap; }
.ml-cat-empty{ padding: 14px; color: var(--text-dim); font-size: .88rem; }
.ml-none{ color: var(--text-muted); padding: 30px 0; }

.ml-bar{
  position: fixed; left: 50%; bottom: 20px; z-index: 150;
  transform: translateX(-50%);
  display:flex; align-items:center; gap: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 8px 8px 22px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  max-width: calc(100% - 32px);
}
.ml-bar[hidden]{ display:none; }
.ml-bar span{ font-weight:700; font-size:.92rem; white-space:nowrap; }
.ml-bar .ml-clear{
  background:none; border:none; color: var(--text-dim);
  font-family:'Manrope', system-ui, sans-serif; font-size:.85rem; cursor:pointer; padding: 6px;
}
.ml-bar .ml-clear:hover{ color: var(--text); }
.ml-bar .btn{ padding: 10px 18px; }

@media (max-width: 900px){
  .ml-cats{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .ml-search{ width: 100%; }
  .ml-bar{ padding-left: 16px; gap: 8px; }
  .ml-bar .ml-clear{ display:none; }
}