/* =========================
   PLAYER WRAP
========================= */
.player-wrap{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#fff;
  padding:10px;
  border-top:1px solid #b1d4c5;
  transform: translateY(120%);
}
/* layout */
.qplayer{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  margin-right:40px;
}
body.dark .player-wrap{
  background:#061810;border-color:#03160e;
}
   
body.dark #prevBtn,
body.dark #nextBtn{
  background:rgba(255, 255, 255, 0.09);
}
body.dark #prevBtn svg,
body.dark #nextBtn svg{
  color:#c3cdd4;
}
/* =========================
   BUTTON BASE
========================= */
.qplayer button{
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  padding:0;
  border-radius:50%;
  transition:.15s;
}
.qplayer button:active{
  transform:scale(.9);
}

/* =========================
   PLAY PLAYER
========================= */
#playBtn{
  width:42px;
  height:42px;
  background:#0aa;
  color:#fff;
}
#playBtn svg{width:50%;height:50%}
/* =========================
   PREV / NEXT kecil
========================= */
#prevBtn,
#nextBtn{
  width:32px;
  height:32px;

}
#prevBtn svg,#nextBtn svg{color:#5a5a5a}
/* =========================
   REPEAT
========================= */
#repeatBtn{
  width:30px;
  height:30px;
  opacity:.4;
}

#repeatBtn{
  background:#d3d3d3; 
}
.dark #repeatBtn{background:rgba(255, 255, 255, 0.1);}
.dark #repeatBtn svg{color:#eee}
.dark #repeatBtn.active{color:#166307}
#repeatBtn.active{
  opacity:1;
  color:#fff;          /* warna aksen */
  transform:scale(1.15);
background:rgb(57,135,31, 0.6);
}
/* timer */
#timeNow,
#timeTotal{
  font-size:12px;
  opacity:.7;
}
 /* ======================
   PLAYER INFO
====================== */
.player-info{
	margin-right:20px;
  font-size:.9;
}
.info-surat{
  font-weight:600;
}

.info-ayat{
  font-size:12px;
  opacity:.8;
}
 .qplayer svg{
  width:18px;
  height:18px;
  display:block;
}  
 #playBtn {
  background: linear-gradient(135deg,#2e7d32,#57a05b);
} 
/* =========================
   RANGE BASE (RESET)
========================= */
#volume{
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  border-radius:6px;
  background:#e5e5e5;
  outline:none;
}
/* =========================
   TRACK COLOR (WEBKIT)
========================= */
#volume::-webkit-slider-runnable-track{
  height:4px;
  background:#dcdcdc;
  border-radius:6px;
}
/* =========================
   THUMB (bulat hijau)
========================= */
#volume::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  background:#2e7d32; 
  border-radius:50%;
  cursor:pointer;
  margin-top:-4px;          /* center */
}

/* =========================
   FIREFOX
========================= */
#volume::-moz-range-track{
  height:4px;
  background:#dcdcdc;
  border-radius:6px;
}
#volume::-moz-range-thumb{
  width:14px;
  height:14px;
  background:#2e7d32;
  border:none;
  border-radius:50%;
}
/* =========================
   DIV PROGRESS (QURAN PLAYER)
========================= */
.qpBar{
  position:relative;
  flex:1;
  height:4px;
  background:#cbcbcb;
  border-radius:14px;
  cursor:pointer;
}
/* fill hijau */
#qpFill{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0%;
  background:#2e7d32;
  border-radius:14px;
}
/* thumb */
#qpThumb{
  position:absolute;
  top:50%;
  left:0;
  width:14px;
  height:14px;
  background:#2e7d32;
  border-radius:50%;
  transform:translate(-50%,-50%);
}
/* =========================
   MOBILE FRIENDLY PLAYER
========================= */
@media (max-width:768px){
  .player-wrap{
    padding:7px;
  }
  /* tombol utama */
  #playBtn{
    width:45px;
    height:45px;
  }
  /* prev next */
  #prevBtn,
  #nextBtn{
    width:30px;
    height:30px;
  }
  #volume{
    display:none;
  }
  /* thumb lebih besar */
  #progress::-webkit-slider-thumb,
  #volume::-webkit-slider-thumb{
    width:18px;
    height:18px;
    margin-top:-5px;
  }
  /* timer font */
  #timeNow{font-size:13px;}
    #timeTotal{display:none}

}
@media (max-width:450px){
  #timeNow,#qpBar{display:none}
  .player-info{flex-grow: 2;}
  #playBtn{width:40px;height:40px}
}
/* PLAYER CARD */
/* =========================
   CARD PLAY (OUTLINE)
========================= */
.play{
  width:25px;
  height:25px;
  display:grid;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:transparent;
  border: 2px solid rgba(15, 118, 110, 0.85);
  color:#0f766e;
  cursor:pointer;

}
.play:hover {
  color: #0b5f59;
  border-color: #0b5f59;
}
body.dark .play{border-color:rgba(110, 231, 183, 0.6);color:#6ee7b7;}
.dark .play:hover {
  color: #ffffff;
  border-color: #6ee7b7;
}
.play svg{
  display: block;
  width:13px;
  height:13px;
}

/* active (sedang play) */
.play.active{
  background:#0aa;
  color:#fff;
  border-color:#0aa;
}
/* klik effect */
.play:active{
  transform:scale(.92);
}