*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  min-height:100vh;
background: linear-gradient(135deg, #ffe4f3, #fff7fb);
  font-family:Verdana,sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
}


.window{
  width: min(420px, 100%);
  height: min(620px, 100dvh);
  background:#fff;
  border:2px solid #e7d3de;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

@media (max-width: 420px){
  .window{ width:100%; height: min(620px, 100dvh); }

  .topbar{ padding:12px 14px; }
  .title{ font-size:14px; margin-right:24px; }

  .playlist-header{ padding:18px 16px 8px; }
  .playlist-header h1{ font-size:20px; }
  .playlist-header p{ font-size:11px; }

  .clock-section{ padding:26px 14px; }
  .clock-section h1{ font-size:46px; }

  .playlist-container{ padding:12px; gap:12px; height: calc(100% - 130px); }
  .playlist-card{ height:92px; padding:10px; }
  .cover{ width:56px; height:56px; }

  .playlist-info h3{ font-size:13px; }
  .tag{ font-size:10px; padding:3px 10px; }
  .play-btn{ width:34px; height:34px; font-size:15px; }

  .footer{ padding:8px 10px; }
  .footer-btn img{ width:22px; height:22px; }
}


.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px;
  border-bottom:1px solid #f0dce5;
}

.title{
  flex:1;
  text-align:center;
  font-size:16px;
  font-weight:600;
  color:#8d6b78;
  margin-right:36px;
}

/* HEADER PLAYLIST */
.playlist-header{
  padding:30px 25px 10px;
  text-align:center;
}

.playlist-header h1{
  font-size:24px;
  color:#4f3e45;
  margin-bottom:10px;
}

.playlist-header p{
  font-size:12px;
  color:#a18b94;
}

/* PLAYLIST */
.playlist-container{
  padding:18px;

  height:calc(100% - 150px);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:15px;
}

.playlist-card{
  width:100%;
  max-width:360px;

  display:flex;
  align-items:center;
  gap:10px;

  /* samakan tinggi card biar gak ikut berubah saat judul wrap */
  height:95px;

  background:#e1b3b3;
  border:2px solid #f0dce5;
  border-radius:16px;

  padding:12px;
  margin-bottom:10px;
  margin-top:-10px;

  box-shadow:0 4px 12px rgba(0,0,0,.05);

  transition:.2s ease;
}

.playlist-card:hover{
  transform:translateY(-2px);
}

.cover{
  width:65px;
  height:65px;

  border-radius:12px;
  object-fit:cover;
  border:2px solid #f3e4eb;
  flex-shrink:0;
}

.playlist-info{
  flex:1;
}

.tag{
  display:inline-block;
  padding:4px 12px;
  border:1px solid #efc8d7;
  border-radius:20px;
  color:#d99cb4;
  font-size:11px;
  font-weight:600;
  background:#fff8fb;
}

.playlist-info h3{
  margin-top:8px;
  font-size:15px;
  line-height:1.4;
  color:#4f3e45;
  font-weight:600;

  /* batasi tinggi teks supaya tinggi card stabil */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.play-btn{
  width:36px;
  height:36px;

  border:none;
  border-radius:50%;
  background:#f7dbe7;
  color:#8d5f72;
  font-size:16px;
  cursor:pointer;
  transition:.2s;
}

.play-btn:hover{
  transform:scale(1.08);
}

.play-btn.playing{
  background:#d99cb4;
  color:white;
}

.back{
  display:flex;
  align-items:center;
  justify-content:center;
}

.back img{
  width:35px;
  height:35px;
  object-fit:contain;
  cursor:pointer;
  transition:.2s;
}

.back img:hover{
  transform:scale(1.1);
}

.playlist-container::-webkit-scrollbar{
  width:4px;
}

.playlist-container::-webkit-scrollbar-thumb{
  background:#e7d3de;
  border-radius:10px;
}

.footer{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:8px 12px;
  border-top:2px solid #7c6666;
  background:#eed1d1;
}

/* tombol home */
.footer-btn img{
  width:26px;
  height:26px;
  object-fit:contain;
  cursor:pointer;
  transition:.2s;
}

.footer-btn img:hover{
  transform:scale(1.1);
}