body{
background:#f4f6fb;
font-family:system-ui;
}

/* loading */

#loading,
.spinner-overlay{
position:fixed;
width:100%;
height:100%;
background:white;
top:0;
left:0;
z-index:9999;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}

/* sticky header */

#headerSticky{
position:sticky;
top:0;
z-index:1000;
background:#f4f6fb;
padding-top:20px;
}

.top-sticky{
position:sticky;
top:0;
z-index:1000;
background:#f4f6fb;
padding-bottom:10px;
}

/* title card */

.title-card{
border-radius:20px;
background:linear-gradient(135deg,#0d6efd,#4f8cff);
color:white;
}

/* surah header */

.surah-header{
background:linear-gradient(135deg,#0d6efd,#4f8cff);
color:white;
border-radius:20px;
padding:30px;
text-align:center;
box-shadow:0 8px 25px rgba(0,0,0,0.1);
transition:.3s;
}

.surah-header.shrink{
padding:12px 20px;
border-radius:12px;
}

.surah-header.shrink h2{
font-size:22px;
}

/* search */

#searchContainer{
display:flex;
justify-content:center;
margin-bottom:30px;
}

#searchInput{
border-radius:50px;
padding:12px 20px;
border:none;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
transition:all .3s;
width:220px;
}

#searchInput:focus{
width:320px;
outline:none;
box-shadow:0 5px 20px rgba(0,0,0,0.15);
}

#searchButton{
margin-left:-45px;
border:none;
background:#0d6efd;
color:white;
border-radius:50%;
width:40px;
height:40px;
}

/* surah card */

.surah-card{
border:none;
border-radius:18px;
transition:all .25s;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.surah-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

/* surah number */

.surah-number{
background:#0d6efd;
color:white;
width:35px;
height:35px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-weight:bold;
font-size:14px;
}

/* arabic text */

.arabic-text{
font-size:28px;
font-family:'Amiri',serif;
direction:rtl;
line-height:2;
}

/* ayat */

.ayat{
background:white;
padding:18px 22px;
border-radius:18px;
margin-bottom:15px;
box-shadow:0 3px 12px rgba(0,0,0,0.08);
transition:.25s;
}

.ayat.active{
background:#e8f6ee;
border:2px solid #28a745;
}

/* nomor ayat */

.ayat-number{
font-size:18px;
color:#0d6efd;
margin-left:10px;
}

/* badge */

.badge-place{
background:#e9f1ff;
color:#0d6efd;
font-weight:500;
}

/* audio */

audio{
width:100%;
margin-top:20px;
}

/* button start */

.start-btn{
padding:12px 30px;
border-radius:50px;
font-size:18px;
}

/* MODE HAFALAN */

.hafalan1 .ayat{
filter:blur(2px);
}

.hafalan2 .ayat{
filter:blur(10px);
}

.hafalan2 .ayat.active{
filter:blur(0);
}

.no-ayat .ayat{
display:none;
}