:root{
  --bg:#f6f6f6;
  --card:#fff;
  --card2:#eeecec;
  --text:#222;
  --accent:#0ea5a4;
  --dark-accent:#078281;
  --light-accent:#e3fcf0;
  --bd-accent:#30c0a5;
  --border-accent:#eceaea;
}

body.dark{
  --bg:#1d2332;
  --card:#111827;
  --card2:#111827;
  --text:#e5e7eb;
  --accent:#111827;
  --light-accent:#023b32;
  --border-accent:#2b3444;
}
body,.Blog .blog-posts .post-outer-container{
  background:var(--bg);
  color:var(--text);
}
.comments,h3.post-title{display:none}

@font-face {
  font-family: "LPMQ";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/kangismet/lpmq-font@v1.0.0/fonts/LPMQ-Isep-Misbah.woff2") format("woff2");
}

/* HEADER */
.arab-title{ font-family:'LPMQ', 'Uthmanic Hafs', 'Traditional Arabic', 'Noto Naskh Arabic', 'Geeza Pro', serif;color:var(--text);font-size:40px; display:block;line-height:2 }
.arti-surat{ font-size:14px;color:var(--text); opacity:0.9; margin-bottom:4px; }
.info{ font-size:12px;color:var(--text); opacity:.9; text-transform:capitalize}

/* CONTAINER */
.quran-container{max-width:850px;color:var(--text) margin:auto; padding:16px; padding-bottom:10px; }
.top-container{ max-width:850px;color:var(--text);margin:auto; text-align:center;padding:25px 0 5px;}
.top-container h2{ margin:0;font-size:1.3em }
/* NAV */
.nav{ display:flex; gap:10px; margin-bottom:20px; }
.nav button{ flex:1; padding:6px; border:1px solid var(--border-accent); border-radius:8px; background:var(--card); color:var(--text); display:flex; align-items:center; justify-content:center; gap:5px; cursor:pointer; }
.nav button:disabled{ opacity:.5; cursor:default; }
.topnav {max-width:400px;margin:0 auto}

/* BISMILLAH */
.bismillah{font-family:'LPMQ', 'Uthmanic Hafs', 'Traditional Arabic', 'Noto Naskh Arabic', 'Geeza Pro', serif;color:var(--text); text-align:center; font-size: clamp(24px, 4.5vw, 30px);line-height:2;margin-bottom:20px;margin-top:15px; }

/* AYAT */
.ayat{ background:var(--card); color:var(--text);padding:20px; border-radius:12px; margin-bottom:12px; box-shadow:0 2px 5px rgba(0,0,0,.08); }
.ayat.active{ background:#0ea5a415; }
.arab{
  font-family:'LPMQ', 'Uthmanic Hafs', 'Traditional Arabic', 'Noto Naskh Arabic', 'Geeza Pro', serif;
  font-size: clamp(26px, 4.5vw, 30px);
  font-weight:400;
  line-height: 2;
  letter-spacing: 0.35px;
  margin-bottom:10px;
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right; 
 -webkit-text-stroke: 0.2px currentColor;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  font-feature-settings:
    "mark" 1,
    "mkmk" 1,
    "liga" 1,
    "kern" 1;
  }
  .latin{margin-bottom:15px;color:#16a09f}
.ayah-num{
  font-family:'LPMQ', 'Uthmanic Hafs', 'Traditional Arabic', 'Noto Naskh Arabic', 'Geeza Pro', serif;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border:2px solid currentColor;
  border-radius:50%;
  font-size:14px;
  font-weight:600;
  margin-inline:4px;
  position:relative;
  top:-4px;
}  
.play{ background:var(--accent); color:#fff; width:25px;height:25px;border-radius:50%; border:none;cursor:pointer; margin-bottom:4px;display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
 }
.surat-select-wrap{
  display:flex;
  justify-content:center;
}
.surat-select-wrap select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  margin-top:10px;
  padding:6px 40px 6px 14px;
  border-radius:8px;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23666' stroke-width='2' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9'/></svg>")
    no-repeat right 12px center,
    var(--card);
  border:1px solid var(--border-accent);
  color:var(--text);
  cursor:pointer;
}
  .surat-select-wrap select:focus{outline:none;border:1px solid var(--accent);}

/* =====================================
   QPLAYER — BLOGGER SAFE VERSION
   pakai ID biar 100% match
===================================== */


/* ========= THEME ========= */

:root{
  --qp-bg:#ffffff;
  --qp-text:#111;
  --qp-sub:#666;

  --qp-accent:#0ea5a4;
  --qp-track:#e5e7eb;

  --qp-shadow:0 -4px 18px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark){
  :root{
    --qp-bg:#0f172a;
    --qp-text:#f1f5f9;
    --qp-sub:#94a3b8;
    --qp-track:#1e293b;
  }
}


/* =====================================
   WRAP
===================================== */

#playerWrap{
  position:fixed;
  bottom:0;
  left:0;
  right:0;

  background:var(--qp-bg);
  box-shadow:var(--qp-shadow);

  padding:10px 14px;
  z-index:9999;

  transform:translateY(110%);
  transition:.28s;
}

#playerWrap.show{
  transform:translateY(0);
}


/* =====================================
   FLEX LAYOUT
===================================== */

#playerWrap{
  display:flex;
  align-items:center;
  gap:10px;
}


/* =====================================
   INFO TEXT
===================================== */

#qpInfo{
  font-size:13px;
  color:var(--qp-text);
  white-space:nowrap;
  max-width:130px;
  display:flex;
  flex-direction:column;
  line-height:1.2;
}

.qp-surah{
  font-weight:600;
  font-size:14px;
}

.qp-ayat{
  font-size:12px;
  opacity:.7;
}

/* =====================================
   BUTTON
===================================== */

#playerWrap button{
  border:none;
  background:transparent;
  color:var(--qp-text);

  width:34px;
  height:34px;

  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  transition:.18s;
}

#playerWrap button:hover{
  background:rgba(0,0,0,.08);
}


/* PLAY MAIN */

#qpPlay{
  background:#0ea5a4;
  color:#fff;
  width:40px;
  height:40px;
}


/* =====================================
   PROGRESS BAR
===================================== */


.qp-wave{
  position: relative;
  flex:1;
  height: 6px;
  background: #ddd;
  border-radius: 20px;
  cursor: pointer;
  overflow: visible;
}

/* Progress hijau */
#qpBar{
  position: relative;
  height: 100%;
  width: 0%;
  background: #0ea5a4;
  border-radius: 20px;
  transition: width .1s linear;
}

/* Bulatan hijau */
#qpBar::after{
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: #0ea5a4;
  border-radius: 50%;
}

/* =====================================
   VOLUME
===================================== */

#qpVol{
  -webkit-appearance:none;
  width:90px;
  height:6px;
  border-radius:999px;
  cursor:pointer;

  background:
  linear-gradient(var(--qp-accent),var(--qp-accent))
  0/var(--val,100%) 100% no-repeat,
  var(--qp-track);
}

#qpVol::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--qp-accent);
}

#qpVol::-moz-range-thumb{
  width:14px;
  height:14px;
  border:none;
  border-radius:50%;
  background:var(--qp-accent);
}




/* =====================================
   CLOSE BUTTON
===================================== */

#qpClose{
  width:34px;
  height:34px;

  background:var(--qp-track);
  color:var(--qp-text);

  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  opacity:1;
  transition:.2s;
}

#qpClose svg{
  width:16px;
  height:16px;
}

#qpClose:hover{
  background:#ef4444;
  color:#fff;
  transform:scale(1.05);
}

#qpVolIcon {
  cursor: pointer;
  opacity: .7;
  transition: .2s;
}
  
#qpRepeat
{
  opacity: .6;
}
  
#qpRepeat:hover,
#qpVolIcon:hover {
  opacity: 1;
}

/* =====================================
   MOBILE
===================================== */

@media(max-width:640px){

  #qpVol, #qpVolIcon{
    display:none;
  }

  #qpInfo{
    font-size:12px;
    max-width:80px;
  }

  #playerWrap button{
    width:30px;
    height:30px;
  }
  
  .quran-container{padding:0}
}
 .back-btn{
  position:absolute;
  top:20px;
  left:20px;
  width:35px;
  height:35px;
  border-radius:50%;
  background:rgba(68,139,131,.7);
  color:#fff;
  text-decoration:none;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
}
.back-btn svg{
  stroke: #fff;
}
.back-btn:hover{
  background:rgba(0,0,0,.65);
}