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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Georgia, serif;

    background:black;

    overflow-x:hidden;

    color:white;
}

/* ========================= */
/* VIDEO BACKGROUND */
/* ========================= */

.video-bg{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-5;
}

/* ========================= */
/* DARK OVERLAY */
/* ========================= */

.overlay{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
    linear-gradient(
    to bottom,
    rgba(0,0,0,0.1),
    rgba(0,0,0,0.35)
    );

    z-index:-4;
}

/* ========================= */
/* CONTAINER */
/* ========================= */

.container{

    width:100%;
    min-height:100vh;

    position:relative;

    padding:20px;
}

/* ========================= */
/* HERO SECTION */
/* ========================= */

.hero-section{

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    position:relative;

    padding-top:30px;

    padding-bottom:80px;
}

/* cinematic glow */

.hero-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at center,
    rgba(255,140,0,0.12),
    transparent 60%
    );

    pointer-events:none;
}

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

.header{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;
}
/* ========================= */
/* OBT SECTION */
/* ========================= */

.obt-section{

    margin-top:200px;

    text-align:center;
}

/* ========================= */
/* OBT TITLE */
/* ========================= */

.obt-title{

    font-size:clamp(40px,5vw,80px);

    color:#ff9933;

    text-shadow:
    0 0 10px rgba(255,120,0,0.8),
    0 0 25px rgba(255,180,0,0.6);

    margin-bottom:5px;
}

/* ========================= */
/* OBT DATE */
/* ========================= */

.obt-date{

    font-size:clamp(18px,2vw,30px);

    color:white;

    margin-bottom:25px;

    text-shadow:
    0 0 10px rgba(255,255,255,0.5);
}

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

.countdown{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:20px;
}

/* ========================= */
/* TIME BOX */
/* ========================= */

.time-box{

    width:120px;

    padding:20px 10px;

    background:
    rgba(10,10,10,0.7);

    border:
    1px solid rgba(255,150,0,0.3);

    border-radius:12px;

    backdrop-filter:blur(5px);

    box-shadow:
    0 0 20px rgba(255,120,0,0.2);
}

/* ========================= */
/* NUMBER */
/* ========================= */

.time-box span{

    display:block;

    font-size:clamp(28px,3vw,50px);

    font-weight:bold;

    color:#ffcc66;

    text-shadow:
    0 0 10px rgba(255,180,0,0.7);
}

/* ========================= */
/* TEXT */
/* ========================= */

.time-box p{

    margin-top:8px;

    font-size:16px;

    color:white;

    opacity:0.9;
}

/* ========================= */
/* BUTTON PNG */
/* ========================= */

.btn-wrapper{

    position:relative;
}

.top-btn{

    width:195px;

    transition:0.3s;

    cursor:pointer;
}

.top-btn:hover{

    transform:scale(1.08);

    filter:
    drop-shadow(0 0 10px orange)
    drop-shadow(0 0 20px gold);
}

/* ========================= */
/* BOTTOM BUTTONS */
/* ========================= */

.bottom-buttons{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    margin-top:50px;

    margin-bottom:-75px;

    flex-wrap:wrap;
}

.bottom-btn{

    width:180px;

    transition:0.3s;

    cursor:pointer;

    filter:
    drop-shadow(0 0 10px rgba(255,140,0,0.3));
}

.bottom-btn:hover{

    transform:
    translateY(-5px)
    scale(1.05);

    filter:
    drop-shadow(0 0 15px orange)
    drop-shadow(0 0 25px gold);
}

/* MOBILE */

@media(max-width:768px){

    .bottom-btn{

        width:140px;
    }

}

/* ========================= */
/* LOGO */
/* ========================= */

.logo{

    display:block;

    width:min(45vw,240px);

    margin:10px 15px;

    filter:
    drop-shadow(0 0 15px orange)
    drop-shadow(0 0 35px gold);
}

/* ========================= */
/* SERVER INFO */
/* ========================= */

/* ========================= */
/* SERVER INFO */
/* ========================= */

.server-info{

    text-align:center;

    font-size:clamp(20px,2vw,38px);

    font-weight:bold;

    line-height:1.7;

    text-shadow:
    0 0 15px black;
}

/* ========================= */
/* ACCOUNT TEXT */
/* ========================= */

.account-text{

    font-size:clamp(19px,2vw,35px);

    font-weight:bold;

    color:white;

    margin-bottom:5px;

    text-shadow:
    0 0 10px rgba(255,255,255,0.5),
    0 0 20px rgba(255,180,0,0.6);
}

/* ========================= */
/* SERVER SMALL TEXT */
/* ========================= */

.server-small{

    font-size:clamp(16px,1.2vw,24px);

    opacity:0.9;
}

/* ========================= */
/* SERVER INFO WRAPPER */
/* ========================= */

.server-info-wrapper{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:40px;

    width:100%;
}

/* ========================= */
/* SIDE PNG */
/* ========================= */

.server-side-img{

    width:min(10vw,120px);

    min-width:70px;

    pointer-events:none;

    filter:
    drop-shadow(0 0 15px rgba(255,150,0,0.5));
}

/* ========================= */
/* MAIN SECTION */
/* ========================= */

.main-section{

    margin-top:50px;

    display:flex;

    flex-direction:column;

    gap:80px;

    align-items:center;
}

/* ========================= */
/* CONTENT BOX */
/* ========================= */

.content-box{

    width:min(95vw,1450px);

    position:relative;

    background:rgba(15,15,15,0.75);

    border:2px solid rgba(255,255,255,0.2);

    backdrop-filter:blur(6px);

    padding:35px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    flex-wrap:wrap;

    overflow:hidden;

    border-radius:15px;

    box-shadow:
    0 0 25px rgba(0,0,0,0.6);
}

/* glow border */

.content-box::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:15px;

    padding:1px;

    background:
    linear-gradient(
    45deg,
    rgba(255,140,0,0.7),
    rgba(255,215,0,0.4),
    transparent
    );

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    pointer-events:none;
}

/* ========================= */
/* REVERSE BOX */
/* ========================= */

.reverse-box{

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:space-between;

    gap:40px;
}

/* text kiri */

.reverse-box .gameplay-text{

    order:1;
}

/* gambar kanan */

.reverse-box .right-image{

    order:2;
}

/* ========================= */
/* IMAGE TITLE */
/* ========================= */

.image-title{

    margin-bottom:15px;

    text-align:center;

    font-size:clamp(18px,1.8vw,28px);

    font-weight:bold;

    color:#ff3b3b;

    letter-spacing:2px;

    -webkit-text-stroke:1px white;

    text-shadow:
    0 0 10px rgba(255,0,0,0.7),
    0 0 20px rgba(120,0,0,0.5);
}

/* ========================= */
/* IMAGE SUBTITLE */
/* ========================= */

.image-subtitle{

    text-align:center;

    font-size:clamp(14px,1vw,20px);

    color:white;

    margin-top:-5px;

    margin-bottom:15px;

    line-height:1.6;

    text-shadow:
    0 0 10px rgba(0,0,0,0.9);
}

/* ========================= */
/* GUIDE TITLE */
/* ========================= */

.guide-title{

    font-size:clamp(24px,2.5vw,38px) !important;

    color:#ff9966;

    margin-bottom:1px;

    text-shadow:
    0 0 10px rgba(255,120,0,0.5);
}

/* ========================= */
/* GUIDE SUBTITLE */
/* ========================= */

.guide-subtitle{

    display:inline-block;

    font-size:clamp(16px,1.5vw,24px);

    font-weight:bold;

    color:#ff2b2b;

    letter-spacing:1px;

    -webkit-text-stroke:1px white;

    text-shadow:
    0 0 8px rgba(255,0,0,0.7),
    0 0 15px rgba(180,0,0,0.5);
}

/* ========================= */
/* GAMEPLAY IMAGE */
/* ========================= */

.gameplay-image{

    flex:1 1 500px;

    z-index:2;
}

.gameplay-image img{

    width:100%;

    display:block;

    border-radius:10px;
}

/* ========================= */
/* MIDDLE CHARACTER */
/* ========================= */

.middle-character{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:min(25vw,320px);

    z-index:5;

    pointer-events:none;

    filter:
    drop-shadow(0 0 25px rgba(255,150,0,0.7));
}

/* ========================= */
/* GAMEPLAY TEXT */
/* ========================= */

.gameplay-text{

    flex:1 1 500px;

    text-align:center;

    line-height:1.9;

    z-index:2;
}

.gameplay-text h2{

    color:#ff9966;

    margin-bottom:25px;

    font-size:clamp(24px,3vw,45px);

    text-shadow:
    0 0 10px rgba(255,120,0,0.6);
}

.gameplay-text p{

    font-size:clamp(14px,1vw,20px);
}

/* ========================= */
/* TOP SPENDER */
/* ========================= */

.spender-box{

    flex:0 1 320px;

    text-align:center;
}

.spender-box h2{

    color:#ff9966;

    font-size:clamp(18px,2vw,30px);

    margin-bottom:18px;

    text-shadow:
    0 0 10px rgba(255,120,0,0.4);
}

/* table */

.spender-table{

    width:100%;

    border-collapse:collapse;
}

.spender-table td{

    padding:8px;

    font-size:clamp(11px,0.9vw,15px);

    border-bottom:
    1px solid rgba(255,255,255,0.08);
}

/* ========================= */
/* MINI GALLERY */
/* ========================= */

.mini-gallery{

    width:min(95vw,1450px);

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:30px;

    margin-top:-20px;

    margin-bottom:-20px;
}

/* gambar kecil */

.mini-gallery img{

    width:min(15vw,160px);

    min-width:120px;

    transition:0.3s;

    cursor:pointer;

    filter:
    drop-shadow(0 0 10px rgba(255,140,0,0.3));
}

/* hover */

.mini-gallery img:hover{

    transform:
    translateY(-8px)
    scale(1.05);

    filter:
    drop-shadow(0 0 15px orange)
    drop-shadow(0 0 30px gold);
}

/* ========================= */
/* SECOND BOX */
/* ========================= */

.second-box{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    flex-wrap:wrap;
}

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

.center-image{

    flex:0 1 220px;

    display:flex;

    justify-content:center;

    align-items:center;
}

.center-image img{

    width:100%;

    max-width:220px;

    pointer-events:none;

    filter:
    drop-shadow(0 0 20px rgba(255,150,0,0.6));
}

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

.footer{

    margin-top:120px;

    text-align:center;

    padding-bottom:70px;
}

.footer-logo{

    width:min(75vw,260px);

    margin-bottom:20px;

    filter:
    drop-shadow(0 0 15px orange);
}

.footer p{

    font-size:18px;

    opacity:0.8;
}

/* ========================= */
/* TABLET */
/* ========================= */

@media(max-width:1000px){

    .middle-character{

        position:relative;

        left:auto;
        top:auto;

        transform:none;

        width:250px;

        margin:auto;
    }

    .content-box{

        flex-direction:column;
    }

}

/* ========================= */
/* MOBILE */
/* ========================= */

@media(max-width:768px){

    .header{

        gap:8px;
    }

    .top-btn{

        width:105px;
    }

    .server-info{

        margin-top:60px;

        font-size:20px;
    }

    .content-box{

        padding:20px;
    }

    .middle-character{

        width:180px;
    }

}

/* ========================= */
/* SMALL PHONE */
/* ========================= */

@media(max-width:480px){

    .top-btn{

        width:85px;
    }

    .logo{

        width:90vw;
    }

    .server-info{

        font-size:17px;
    }

    .middle-character{

        width:140px;
    }

}