/* =========================
   PAGE
========================= */
.page-wrapper{
  min-height:
    calc(100dvh - 50px - 28px);

  padding-bottom:20px;
}

/* TITLE */
.page-title{
  text-align:center;
  font-size:20px;
  font-weight:800;
  margin-top:2px;
  margin-bottom:10px;
}

/* SEARCH */
#search-input{
  width:100%;
  padding:10px 16px;
  border:none;
  border-radius:14px;
  font-size:14px;
  outline:none;
  margin-bottom:10px;
}

/* FILTER */
#kategori-filter{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:10px;
}

.filter-btn{
  border:none;
  padding:5px 5px;
  border-radius:12px;
  background:#1f1f1f;
  color:white;
  cursor:pointer;
  font-weight:600;
}

.filter-btn.active{
  background:#ff6600;
  color:black;
}

/* LIST */
#daftar-container{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* CATEGORY */
.song-category{
  color:#666;
  font-size:14px;
  margin-top:4px;
}

/* MOBILE */
@media(max-width:600px){
  .song-name{
    font-size:18px;
  }
}

/* SONG ITEM */
.song-item{
  background:white;
  border-radius:10px;
  padding:4px 8px;
  display:flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
  transition:.2s;
}

.song-item:hover{
  transform:scale(1.01);
}

/* STRIP */
.song-strip{
  width:6px;
  height:14px;
  border-radius:999px;
  flex-shrink:0;
}

/* TITLE */
.song-name{
  color:black;
  font-size:14px;
  font-weight:700;
}