/* ==========================================
   CYBERPANEL V2
   BANNER.CSS
   RESPONSIVE + NO OVERFLOW
========================================== */


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

.hero-banner{

    width:100%;

    /*
       Jangan gunakan 100vh.
       Ini mencegah ruang kosong besar di HP.
    */
    min-height:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:
        150px
        20px
        60px;

    box-sizing:border-box;

    overflow:hidden;

}


/* ==========================================
   HERO CONTENT
========================================== */

.hero-content{

    width:100%;

    max-width:1100px;

    margin:0 auto;

    text-align:center;

    box-sizing:border-box;

}


/* ==========================================
   HERO TITLE
========================================== */

.hero-content h1{

    width:100%;

    max-width:950px;

    margin:0 auto 24px;

    font-family:'Orbitron',sans-serif;

    /*
       Ukuran fleksibel.
       Tidak terlalu besar di HP.
    */
    font-size:clamp(
        34px,
        6vw,
        76px
    );

    line-height:1.15;

    font-weight:700;

    letter-spacing:-1px;

    word-break:normal;

    overflow-wrap:normal;

    background:linear-gradient(
        90deg,
        #00ff9d 0%,
        #00d4ff 50%,
        #ffffff 100%
    );

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

}


/* ==========================================
   HERO DESCRIPTION
========================================== */

.hero-content p{

    width:100%;

    max-width:820px;

    margin:0 auto;

    color:#b8b8b8;

    font-family:'Poppins',sans-serif;

    font-size:18px;

    line-height:1.8;

    text-align:center;

}


/* ==========================================
   HERO STATUS
========================================== */

.hero-status{

    width:100%;

    margin:35px auto 0;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

}


.hero-status span{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:44px;

    padding:11px 20px;

    border-radius:14px;

    background:#141414;

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

    color:#e4e4e4;

    font-family:'Poppins',sans-serif;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

    box-sizing:border-box;

}


/* ==========================================
   ONLINE STATUS
========================================== */

.hero-status .online{

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

    color:#52ff94;

    border-color:rgba(
        0,
        255,
        157,
        .25
    );

    box-shadow:
        0 0 20px
        rgba(0,255,157,.05);

}


/* ==========================================
   HERO BUTTONS
========================================== */

.hero-buttons{

    width:100%;

    margin:35px auto 0;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

}


.hero-buttons a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:220px;

    min-height:52px;

    box-sizing:border-box;

}


/* ==========================================
   HERO STATS
========================================== */

.hero-stats{

    width:100%;

    margin:48px auto 0;

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:14px;

    box-sizing:border-box;

}


/* ==========================================
   STAT CARD
========================================== */

.stat-card{

    min-width:0;

    min-height:120px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:22px 15px;

    background:#141414;

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

    border-radius:20px;

    box-sizing:border-box;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.stat-card:hover{

    transform:translateY(-5px);

    border-color:
        rgba(0,255,157,.35);

    box-shadow:
        0 10px 30px
        rgba(0,255,157,.10);

}


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

.stat-number{

    font-family:'Orbitron',sans-serif;

    font-size:36px;

    line-height:1;

    font-weight:700;

    color:#00ff9d;

    margin-bottom:12px;

    white-space:nowrap;

}


/* ==========================================
   STAT TITLE
========================================== */

.stat-title{

    color:#a8a8a8;

    font-family:'Poppins',sans-serif;

    font-size:14px;

    line-height:1.4;

}


/* ==========================================
   LAPTOP
========================================== */

@media(max-width:1200px){

    .hero-banner{

        padding-top:135px;

    }


    .hero-content{

        max-width:950px;

    }


    .hero-content h1{

        font-size:clamp(
            38px,
            6vw,
            68px
        );

    }

}


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

@media(max-width:992px){

    .hero-banner{

        padding:
            130px
            20px
            50px;

    }


    .hero-content h1{

        max-width:800px;

        font-size:52px;

    }


    .hero-content p{

        max-width:700px;

        font-size:16px;

    }


    .hero-status{

        margin-top:30px;

    }


    .hero-stats{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:14px;

        margin-top:40px;

    }


    .stat-card{

        min-height:115px;

    }

}


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

@media(max-width:768px){

    .hero-banner{

        /*
           Header fixed.
           Padding cukup untuk memberi
           jarak tanpa menciptakan ruang
           kosong berlebihan.
        */
        padding:
            115px
            15px
            35px;

        min-height:auto;

    }


    .hero-content{

        width:100%;

        max-width:100%;

        margin:0 auto;

        text-align:center;

    }


    /* TITLE */

    .hero-content h1{

        max-width:600px;

        margin:
            0 auto 20px;

        font-size:
            clamp(
                34px,
                9vw,
                48px
            );

        line-height:1.15;

        letter-spacing:-.5px;

    }


    /* DESCRIPTION */

    .hero-content p{

        width:100%;

        max-width:520px;

        margin:0 auto;

        padding:0 5px;

        font-size:15px;

        line-height:1.7;

        text-align:center;

        box-sizing:border-box;

    }


    /* STATUS */

    .hero-status{

        width:100%;

        margin:
            28px auto 0;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:10px;

    }


    .hero-status span{

        width:auto;

        max-width:280px;

        min-width:210px;

        padding:
            11px
            16px;

        font-size:13px;

    }


    /* BUTTON */

    .hero-buttons{

        width:100%;

        margin:
            28px auto 0;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:10px;

    }


    .hero-buttons a{

        width:100%;

        max-width:230px;

        min-height:50px;

    }


    /* STATS */

    .hero-stats{

        width:100%;

        margin:
            38px auto 0;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:12px;

    }


    .stat-card{

        width:100%;

        min-width:0;

        min-height:115px;

        padding:
            20px
            10px;

        border-radius:18px;

    }


    .stat-number{

        font-size:30px;

        margin-bottom:9px;

    }


    .stat-title{

        font-size:13px;

    }

}


/* ==========================================
   HP KECIL
========================================== */

@media(max-width:480px){

    .hero-banner{

        padding:
            105px
            12px
            30px;

    }


    .hero-content h1{

        font-size:
            clamp(
                30px,
                9.5vw,
                40px
            );

        line-height:1.16;

        margin-bottom:18px;

    }


    .hero-content p{

        font-size:14px;

        line-height:1.7;

        padding:
            0
            8px;

    }


    .hero-status{

        margin-top:24px;

    }


    .hero-status span{

        min-width:205px;

        max-width:260px;

        min-height:42px;

        padding:
            10px
            14px;

        font-size:12px;

    }


    .hero-buttons{

        margin-top:25px;

    }


    .hero-buttons a{

        max-width:220px;

        min-height:48px;

        font-size:14px;

    }


    .hero-stats{

        margin-top:34px;

        gap:10px;

    }


    .stat-card{

        min-height:105px;

        padding:
            18px
            8px;

        border-radius:16px;

    }


    .stat-number{

        font-size:27px;

    }


    .stat-title{

        font-size:12px;

    }

}


/* ==========================================
   HP SANGAT KECIL
========================================== */

@media(max-width:360px){

    .hero-banner{

        padding:
            100px
            10px
            25px;

    }


    .hero-content h1{

        font-size:30px;

    }


    .hero-content p{

        font-size:13px;

    }


    .hero-status span{

        min-width:190px;

        font-size:11px;

    }


    .hero-buttons a{

        max-width:210px;

    }


    .stat-card{

        min-height:100px;

    }


    .stat-number{

        font-size:24px;

    }


    .stat-title{

        font-size:11px;

    }

}


/* ==========================================
   SAFETY AGAINST HORIZONTAL OVERFLOW
========================================== */

.hero-banner,
.hero-content,
.hero-status,
.hero-buttons,
.hero-stats{

    max-width:100%;

}


.hero-banner *{

    box-sizing:border-box;

}


.hero-content h1,
.hero-content p{

    overflow-wrap:break-word;

}


/* ==========================================
   REDUCE MOTION
========================================== */

@media(prefers-reduced-motion:reduce){

    .stat-card{

        transition:none;

    }

   }