:root{
  --bg1:#04140f; --bg2:#0a2018; --hijau:#0d3b2a; --hijau2:#134f38;
  --emas:#e8b84b; --emas2:#f7d98a; --putih:#f4f7f5; --abu:#9fb3a8;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Poppins',sans-serif;
  background:radial-gradient(circle at 50% 0%,#0b271c 0%,var(--bg1) 70%);
  color:var(--putih);height:100vh;overflow:hidden;
}
.frame{
  height:100vh;display:flex;flex-direction:column;
  padding:1.1vh 1.2vw .6vh;gap:1vh;
  border:.35vh solid transparent;
  border-image:linear-gradient(135deg,var(--emas),transparent 35%,transparent 65%,var(--emas)) 1;
}

/* HEADER */
.head{display:grid;grid-template-columns:16vw 1fr 19vw;gap:1vw;align-items:stretch}
.panel{
  background:linear-gradient(160deg,var(--hijau2),var(--hijau));
  border:.2vh solid rgba(232,184,75,.5);border-radius:1vh;
  padding:1vh 1vw;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
}
.tanggal .lbl{font-size:1.1vh;letter-spacing:.25em;color:var(--emas2)}
.tanggal .hari{font-size:2.6vh;font-weight:800;color:var(--emas);letter-spacing:.1em}
.tanggal .masehi{font-size:1.9vh;font-weight:700;margin-top:.8vh}
.tanggal .hijri{font-size:1.5vh;color:var(--emas2)}

.judul{display:flex;flex-direction:column;align-items:center;justify-content:center}
.judul .ornamen{font-size:3vh;color:var(--emas);line-height:1}
.judul h1{
  font-size:6.4vh;font-weight:800;letter-spacing:.06em;
  background:linear-gradient(180deg,var(--emas2),var(--emas) 55%,#b8860b);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.judul .motto{
  font-size:1.9vh;letter-spacing:.35em;color:var(--putih);
  border-top:.15vh solid rgba(232,184,75,.4);
  border-bottom:.15vh solid rgba(232,184,75,.4);
  padding:.5vh 2vw;margin-top:.6vh;
}
.ayat .arab{font-family:'Amiri',serif;font-size:2.6vh;color:var(--emas2);line-height:1.9;direction:rtl}
.ayat .latin{font-size:1.35vh;font-style:italic;color:var(--putih);margin-top:.8vh;line-height:1.5}
.ayat .sumber{font-size:1.2vh;color:var(--emas);margin-top:.5vh}

/* JAM */
.jamrow{display:flex;align-items:center;justify-content:center;gap:2.5vw;padding:.5vh 0}
.jambox{text-align:center}
.jam{font-size:12vh;font-weight:800;line-height:.95;letter-spacing:-.01em;
     text-shadow:0 0 4vh rgba(232,184,75,.25)}
.jamlbl{font-size:1.4vh;letter-spacing:.3em;color:var(--emas);margin-top:.4vh}
.divider{width:.2vh;height:12vh;background:linear-gradient(transparent,var(--emas),transparent)}
.countbox{text-align:center}
.clbl{font-size:1.5vh;letter-spacing:.25em;color:var(--emas2)}
.cnama{font-size:3.6vh;font-weight:800;color:#3ddc97;letter-spacing:.06em}
.cdown{
  background:linear-gradient(160deg,var(--hijau2),var(--hijau));
  border:.2vh solid var(--emas);border-radius:1vh;
  padding:.7vh 1.4vw;margin-top:.6vh;
  font-size:4.6vh;font-weight:800;color:var(--emas);line-height:1;
}
.cunit{display:flex;justify-content:space-between;font-size:1vh;
       letter-spacing:.15em;color:var(--abu);font-weight:600;margin-top:.3vh}

/* KARTU WAKTU SHOLAT */
.konten{flex:1;display:grid;grid-template-columns:1fr 27vw;gap:1.2vw;min-height:0}
.kartu-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:.9vw}
.kartu{
  background:linear-gradient(175deg,var(--hijau2),#072018);
  border:.2vh solid rgba(232,184,75,.35);border-radius:1.4vh;
  display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;
  padding:1vh .5vw;transition:.4s;
}
.kartu.now{
  border-color:var(--emas);box-shadow:0 0 3vh rgba(232,184,75,.45);
  background:linear-gradient(175deg,#1a6b4a,#0a3527);transform:translateY(-.6vh);
}
.kartu .nm{font-size:2.2vh;font-weight:800;letter-spacing:.14em}
.kartu.now .nm{color:var(--emas)}
.kartu .ico{font-size:4vh}
.kartu .jm{font-size:4.6vh;font-weight:800;line-height:1}
.kartu .azn{
  font-size:1.2vh;color:var(--emas2);letter-spacing:.2em;
  border-top:.15vh solid rgba(232,184,75,.35);padding-top:.5vh;width:70%;text-align:center;
}
.kartu .azn b{display:block;font-size:2vh;color:var(--putih);font-weight:700}

/* SIDEBAR SLIDER */
.sidebar{position:relative;
  background:linear-gradient(160deg,var(--hijau2),#06190f);
  border:.2vh solid rgba(232,184,75,.4);border-radius:1.4vh;padding:1.4vh 1.2vw;overflow:hidden}
.slide{position:absolute;inset:1.4vh 1.2vw;opacity:0;transform:translateY(2vh);
       transition:.6s;pointer-events:none}
.slide.aktif{opacity:1;transform:none}
.sidebar h3{
  font-size:2vh;color:var(--emas);letter-spacing:.18em;text-align:center;
  padding-bottom:.8vh;margin-bottom:1vh;border-bottom:.15vh solid rgba(232,184,75,.4);
}
.iqlist{list-style:none}
.iqlist li{display:flex;justify-content:space-between;font-size:1.7vh;
           padding:.75vh 0;border-bottom:.1vh dashed rgba(255,255,255,.12)}
.iqlist li b{color:var(--emas2);letter-spacing:.1em}
.kajianlist{list-style:none;display:flex;flex-direction:column;gap:.7vh}
.kajianlist li{background:rgba(0,0,0,.28);border-left:.35vh solid var(--emas);
               border-radius:.6vh;padding:.7vh .8vw}
.kajianlist .kj{font-size:1.6vh;font-weight:700;color:var(--emas2)}
.kajianlist .kp{font-size:1.3vh;color:var(--putih)}
.kajianlist .kw{font-size:1.2vh;color:var(--abu)}
.jumatbox{font-size:1.6vh;line-height:2}
.jumatbox .tgl{text-align:center;color:var(--emas2);font-weight:700;margin-bottom:1vh}
.jumatbox .row{display:flex;justify-content:space-between;
               border-bottom:.1vh dashed rgba(255,255,255,.12);padding:.5vh 0}
.jumatbox .row span:first-child{color:var(--abu);letter-spacing:.06em}
.jumatbox .row span:last-child{font-weight:700;text-align:right}
.jumatbox .tema{margin-top:1vh;background:rgba(232,184,75,.12);
                border-radius:.6vh;padding:.7vh .8vw;font-size:1.4vh;font-style:italic}

/* RUNNING TEXT */
.ticker{display:flex;align-items:center;height:6vh;
  background:linear-gradient(90deg,#8a6a12,#e8b84b 12%,#8a6a12);
  border-radius:.8vh;overflow:hidden}
.tlabel{flex:0 0 auto;background:#04140f;color:var(--emas);font-weight:800;
        font-size:1.7vh;letter-spacing:.14em;padding:0 1.4vw;height:100%;
        display:flex;align-items:center}
.tviewport{flex:1;overflow:hidden;height:100%;display:flex;align-items:center}
.ttrack{display:inline-flex;white-space:nowrap;
        animation:run 38s linear infinite;
        font-size:1.9vh;font-weight:600;color:#1a1005}
.ttrack span{padding:0 2.5vw}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* OVERLAY AZAN */
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:radial-gradient(circle,#0d3b2a,#02100b 75%);z-index:99;text-align:center}
.overlay.show{display:flex}
.ovlbl{font-size:3vh;letter-spacing:.4em;color:var(--emas2)}
.ovnama{font-size:14vh;font-weight:800;color:var(--emas);line-height:1}
.ovjam{font-size:8vh;font-weight:700}
.ovnote{font-size:2.6vh;color:var(--abu);margin-top:2vh}