/*==================================================
 SMART PRAYER BANNER
 MASJID GEDHE YOGYAKARTA
 Version 2.0
==================================================*/

/*==================================================
RESET
==================================================*/

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

html,
body{

    width:100%;

    overflow-x:hidden;

}

body{

    background:transparent;

    font-family:
    Arial,
    Helvetica,
    sans-serif;

}


/*==================================================
ROOT
==================================================*/

:root{

    --banner-max-width:728px;

    --radius:10px;

    --red-dark:#770000;

    --red:#a70303;

    --red-light:#520303;

    --yellow:#cf9f01;

    --yellow-soft:#d19d00;

    --white:#FFFFFF;

    

}


/*==================================================
WRAPPER
==================================================*/

.banner-wrapper{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:0px;

}


/*==================================================
MAIN BANNER
==================================================*/

.prayss{

    width:100%;

    max-width:var(--banner-max-width);

    aspect-ratio:728 / 90;

    background:

    linear-gradient(

        135deg,

        var(--red-dark),

        var(--red),

        var(--red-light)

    );

    border-radius:var(--radius);

    border:

    1px solid

    rgba(255,255,255,.15);

    box-shadow:var(--shadow);

    color:var(--white);

    padding:4px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}


/*==================================================
HEADER
==================================================*/

.header{

    width:100%;

    display:grid;

    grid-template-columns:

        18%

        52%

        30%;

    align-items:center;

}


/*==================================================
LEFT
==================================================*/

.header-left{

    display:flex;

    align-items:center;

    justify-content:flex-start;

}

#jam{

    font-size:

    clamp(

        12px,

        2vw,

        18px

    );

    font-weight:bold;

    letter-spacing:.5px;

}


/*==================================================
CENTER
==================================================*/

.header-center{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}


/*==================================================
JUDUL
==================================================*/

.judul{

    font-size:

    clamp(

        10px,

        2vw,

        16px

    );

    font-weight:bold;

    text-transform:uppercase;

    text-align:center;

    line-height:1.1;

}


/*==================================================
TANGGAL
==================================================*/

.tanggal-row{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:5px;

    margin-top:2px;

}

#tanggal{

    font-size:

    clamp(

        7px,

        1.4vw,

        10px

    );

    color:#FFF;

}

.separator{

    color:

    rgba(255,255,255,.6);

}

#hijriah{

    font-size:

    clamp(

        7px,

        1.4vw,

        10px

    );

    color:var(--yellow);

    font-weight:bold;

}


/*==================================================
RIGHT
==================================================*/

.header-right{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-end;

}

.menuju{

    font-size:

    clamp(

        8px,

        1.3vw,

        11px

    );

    text-transform:uppercase;

}

#nextPrayer{

    font-size:

    clamp(

        10px,

        2vw,

        15px

    );

    font-weight:bold;

    color:var(--yellow-soft);

}

#countdown{

    font-size:

    clamp(

        10px,

        1.8vw,

        15px

    );

    font-weight:bold;

    color:var(--yellow);

}

/*==================================================
JADWAL SHOLAT
==================================================*/

.jadwal{

    width:100%;

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:.6%;

    margin-top:1%;

}


/*==================================================
ITEM SHOLAT
==================================================*/

.item{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    border-radius:8px;

    background:rgba(255,255,255,.08);

    transition:.25s;

    min-height:42px;

    padding:4px;

}

.item span{

    font-size:

    clamp(
        7px,
        1.2vw,
        11px
    );

    margin-bottom:2px;

    font-weight:600;

    color:#FFFFFF;

}

.item h3{

    font-size:

    clamp(
        11px,
        2vw,
        18px
    );

    font-weight:bold;

    color:#FFFFFF;

}


/*==================================================
ACTIVE PRAYER
==================================================*/

.item.active{

    background:#ffc400;

    color:#000;

    box-shadow:

    0 0 10px

    rgba(255,213,79,.45);

}

.item.active span,

.item.active h3{

    color:#000;

}


/*==================================================
HOVER
==================================================*/

.item:hover{

    background:

    rgba(255,255,255,.18);

}


/*==================================================
ANIMATION
==================================================*/

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.03);

}

100%{

transform:scale(1);

}

}

.item.active{

    animation:pulse 1.8s infinite;

}


/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:768px){

.header{

    grid-template-columns:

    20%

    48%

    32%;

}

.jadwal{

    gap:3px;

}

}


@media (max-width:576px){

.prayss{

    padding:2%;

}

.header{

    grid-template-columns:

    20%

    45%

    35%;

}

.judul{

    letter-spacing:0;

}

.tanggal-row{

    gap:3px;

}

}


@media (max-width:420px){

.header{

    grid-template-columns:

    22%

    43%

    35%;

}

.item{

    min-height:36px;

}

}


@media (max-width:360px){

.prayss{

    padding:1.5%;

}

.header{

    grid-template-columns:

    24%

    41%

    35%;

}

.item{

    min-height:32px;

}

}