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

#mpd-auto-prayer{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:40px 20px;
position:relative;
overflow:hidden;
font-family:Arial,sans-serif;
}

#mpd-auto-prayer::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.75)),
url('https://mpd.or.id/wp-content/uploads/2025/11/mpd-drone-scaled.jpeg');
background-size:cover;
background-position:center;
filter:blur(12px);
transform:scale(1.08);
}

.mpd-box{
position:relative;
z-index:2;
width:100%;
max-width:1250px;
text-align:center;
color:white;
animation:fadeUp 1s ease;
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.mpd-title{
font-size:72px;
font-weight:800;
margin-bottom:20px;
color:#ffffff;
}

.mpd-title span{
color:#b7ff3c;
}

.mpd-clock{
font-size:76px;
font-weight:700;
}

.mpd-hijri{
margin-top:15px;
font-size:22px;
color:#f1f1f1;
}

.mpd-location{
margin-top:10px;
font-size:20px;
color:#b7ff3c;
}

.mpd-selectors{
margin-top:30px;
display:flex;
justify-content:center;
}

.mpd-selectors select{
padding:16px 20px;
border:none;
border-radius:14px;
background:rgba(255,255,255,.92);
min-width:320px;
font-size:16px;
}

.mpd-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
margin-top:40px;
}

.mpd-card{
background:rgba(25,25,25,.72);
backdrop-filter:blur(16px);
padding:34px;
border-radius:24px;
transition:.3s;
}

.mpd-card.active{
background:linear-gradient(135deg,#96d913,#b7ff3c);
color:#111;
}

.mpd-card strong{
display:block;
font-size:40px;
margin-top:10px;
}

.mpd-running{
margin-top:40px;
background:rgba(0,0,0,.5);
padding:16px;
border-radius:14px;
overflow:hidden;
white-space:nowrap;
}

.mpd-running span{
display:inline-block;
padding-left:100%;
animation:runText 45s linear infinite;
color:#b7ff3c;
font-size:18px;
}

@keyframes runText{
0%{transform:translateX(0);}
100%{transform:translateX(-100%);}
}

@media(max-width:768px){

.mpd-title{
font-size:46px;
}

.mpd-clock{
font-size:44px;
}

.mpd-selectors select{
min-width:100%;
}

}