/* ======================================================
   LANDING PAGE SPMB SMKN 2 KOTA SERANG
   Premium Version 2.0
====================================================== */

/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#0b2d6b;
    color:#ffffff;
    overflow-x:hidden;
}

/* VARIABLE */

:root{

    --primary:#0B3D91;
    --secondary:#FFD54A;
    --white:#ffffff;
    --dark:#07275c;

    --glass:rgba(255,255,255,.12);

    --border:rgba(255,255,255,.18);

    --shadow:
    0 15px 40px rgba(0,0,0,.35);

}

/* CONTAINER */

.container{

    width:min(1180px,92%);

    margin:auto;

}

/* LINK */

a{

    text-decoration:none;

}

/* IMAGE */

img{

    display:block;

    max-width:100%;

}
/* ======================================================
RUNNING BAR
====================================================== */

.running-bar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:38px;

    background:#FFD54A;

    z-index:9999;

    display:flex;

    align-items:center;

}

.running-bar marquee{

    color:#083B92;

    font-size:15px;

    font-weight:700;

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

header{

    position:fixed;

    top:38px;

    left:0;

    width:100%;

    height:82px;

    display:flex;

    align-items:center;

    background:rgba(8,32,83,.85);

    backdrop-filter:blur(15px);

    z-index:999;

}

.header-container{

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    width:95px;

    display:flex;

    justify-content:center;

}

.logo img{

    width:68px;

}

.header-title{

    flex:1;

    text-align:center;

}

.header-title h3{

    font-size:14px;

    letter-spacing:2px;

    font-weight:500;

}

.header-title h1{

    margin-top:6px;

    font-size:36px;

    font-weight:800;

}

.header-title h2{

    margin-top:6px;

    color:var(--secondary);

    font-size:22px;

}

.tahun{

    display:inline-block;

    margin-top:12px;

    padding:8px 22px;

    background:#FFD54A;

    color:#083B92;

    border-radius:50px;

    font-weight:700;

}
/* ======================================================
HERO
====================================================== */

.hero{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:calc(100vh - 120px);

    margin-top:120px;

    padding:30px 20px;

    background:
    linear-gradient(rgba(6,35,92,.82),rgba(6,35,92,.90)),
    url("../assets/gedung.jpeg") center center/cover no-repeat;

    overflow:hidden;

}
.overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(

    circle,

    rgba(255,255,255,.05),

    transparent 60%

    );

}
#particles-js{

    position:absolute;

    inset:0;

}
.glass-card{

    width:100%;

    max-width:920px;

    margin:auto;

    padding:55px;

    border-radius:30px;

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

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.18);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

    text-align:center;

}
.typing{

    min-height:70px;

    color:#FFD54A;

    font-size:30px;

    font-weight:700;

    line-height:1.5;

}
.greeting{

    margin-top:15px;

    font-size:24px;

    font-weight:600;

}
.clock{

    margin-top:15px;

    font-size:22px;

    color:#FFD54A;

    font-weight:700;

}
.divider{

    width:140px;

    height:3px;

    background:#FFD54A;

    margin:25px auto;

    border-radius:50px;

}
/* ======================================================
INFO PENGUMUMAN
====================================================== */

.glass-card h3{

    font-size:34px;

    font-weight:700;

    margin-top:10px;

    margin-bottom:20px;

}

.info{

    width:90%;

    margin:auto;

    font-size:18px;

    line-height:34px;

    color:#f4f4f4;

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

.tanggal-box{

    width:320px;

    margin:35px auto;

    padding:25px;

    border-radius:25px;

    background:linear-gradient(135deg,#FFD54A,#FFC107);

    color:#083B92;

    box-shadow:0 15px 35px rgba(255,193,7,.35);

}

.hari{

    display:block;

    font-size:26px;

    font-weight:700;

}

.tanggal{

    display:block;

    margin-top:10px;

    font-size:42px;

    font-weight:800;

}
/* ======================================================
WEBSITE
====================================================== */

.website-title{

    margin-top:10px;

    font-size:18px;

}

.website-link{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:18px;

    padding:14px 28px;

    border-radius:50px;

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

    border:1px solid rgba(255,255,255,.15);

    color:#ffffff;

    transition:.35s;

}

.website-link:hover{

    background:#FFD54A;

    color:#083B92;

    transform:translateY(-4px);

}
/* ======================================================
COUNTDOWN
====================================================== */

.countdown{

    display:flex;

    justify-content:center;

    gap:22px;

    margin-top:45px;

    flex-wrap:wrap;

}

.time-box{

    width:135px;

    height:135px;

    border-radius:28px;

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

    border:1px solid rgba(255,255,255,.15);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.time-box:hover{

    transform:translateY(-8px);

    border-color:#FFD54A;

}

.time-box span{

    font-size:54px;

    font-weight:800;

    color:#FFD54A;

}

.time-box small{

    margin-top:8px;

    font-size:18px;

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

.button-area{

    margin-top:45px;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    min-width:320px;

    padding:18px 35px;

    border-radius:60px;

    background:linear-gradient(135deg,#FFD54A,#FFC107);

    color:#083B92;

    font-weight:700;

    font-size:19px;

    transition:.35s;

    box-shadow:0 18px 40px rgba(255,193,7,.35);

}

.btn:hover{

    background:#ffffff;

    transform:translateY(-6px);

}
/* ======================================================
MESSAGE
====================================================== */

.message{

    margin-top:60px;

    padding:35px;

    border-radius:25px;

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

    border:1px solid rgba(255,255,255,.10);

}

.message h3{

    color:#FFD54A;

    margin-bottom:20px;

}

.message p{

    margin-top:15px;

    line-height:32px;

    text-align:justify;

}
/* ======================================================
SUCCESS
====================================================== */

.success-card{

    display:none;

    margin-top:40px;

    padding:35px;

    border-radius:25px;

    background:linear-gradient(135deg,#22c55e,#16a34a);

    color:#ffffff;

}

.success-icon{

    font-size:60px;

}

.success-card h2{

    margin-top:15px;

}

.success-card p{

    margin-top:18px;

}
/* ======================================================
FOOTER
====================================================== */

footer{

    background:#041C46;

    padding:50px 20px;

}

.footer-content{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

    text-align:center;

}

.footer-logo img{

    width:90px;

}

.footer-text h3{

    color:#FFD54A;

    margin-bottom:12px;

}

.footer-text p{

    margin:6px 0;

}

.footer-text a{

    color:#FFD54A;

}
/* ======================================================
BACK TO TOP
====================================================== */

#backToTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#FFD54A;

    color:#083B92;

    cursor:pointer;

    font-size:20px;

    display:none;

    z-index:999;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

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

@media(max-width:768px){

.header-container{

    flex-direction:column;

}

.header-title h1{

    font-size:24px;

}

.header-title h2{

    font-size:18px;

}

.hero{

    padding-top:210px;

}

.glass-card{

    padding:30px 22px;

}

.typing{

    font-size:22px;

}

.countdown{

    gap:12px;

}

.time-box{

    width:82px;

    height:82px;

}

.time-box span{

    font-size:28px;

}

.btn{

    width:100%;

    min-width:100%;

}

.tanggal-box{

    width:100%;

}

}
.hero .container{

    width:100%;

    max-width:1200px;

    display:flex;

    justify-content:center;

    align-items:center;

    height:100%;

    position:relative;

    z-index:2;

}