/* ==================================================
   CSS CODING BY JAGO KOMPUTER - JANGAN DI UBAH APAPUN
================================================== */

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

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:none;
}


/* ==================================================
   TOP BAR UI PREMIUM
================================================== */

.top-ui{
    position:fixed;
    top:15px;
    left:15px;
    right:15px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    z-index:9999;
    pointer-events:none;
}

/* =========================
   LOGO KIRI (GLASS BLACK UI)
========================= */

.logo-box{
    display:flex;
    align-items:center;
    gap:6px;

    padding:8px 10px;

    background:rgba(0,0,0,.45);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

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

    border-radius:50px;

    box-shadow:
        0 0 25px rgba(0,0,0,.6),
        inset 0 0 10px rgba(255,255,255,.05);
}

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

.logo-box img{
    width:38px;
    height:38px;
    border-radius:50%;
    object-fit:cover;
}

/* =========================
   LOGO TEXT (GRADIENT STYLE)
========================= */

.logo-text{
    font-size:16px;
    font-weight:800;
    letter-spacing:.3px;
    line-height:1;
    cursor:pointer;

    background:linear-gradient(
        135deg,
        #ff2d55 0%,
        #ff4d8d 35%,
        #ff7a45 70%,
        #ffb347 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color:transparent;

    filter:
        drop-shadow(0 2px 10px rgba(255,45,85,.35))
        drop-shadow(0 0 12px rgba(255,138,0,.25));
}

/* =========================
   LOGO SUB TEXT
========================= */

.logo-sub{
    color:rgba(255,255,255,.75);
    font-size:11px;
    font-family:Arial,sans-serif;
    line-height:1.2;
}

/* =========================
   STATUS KANAN
========================= */

.status-box{
    display:flex;
    align-items:center;
    gap:6px;

    padding:8px 10px;

    background:rgba(0,0,0,.45);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

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

    border-radius:50px;

    box-shadow:
        0 0 25px rgba(0,0,0,.6),
        inset 0 0 10px rgba(255,255,255,.05);
}

.status-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#00ff4c;

    animation:pulse 1s infinite;
}

.status-text{
    color:#fff;
    font-size:13px;
    font-weight:600;
    font-family:Arial,sans-serif;
    white-space:nowrap;
}

@keyframes pulse{

    0%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(1.4);
        opacity:.5;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }

}

/* ============================================
     🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
=============================================== */

/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

    .top-ui{
        top:8px;
        left:8px;
        right:8px;
    }

    .logo-box{
        padding:6px 10px;
        gap:8px;
    }

    .logo-box img{
        width:30px;
        height:30px;
    }

    .logo-text{
        font-size:12px;
    }

    .logo-sub{
        font-size:9px;
    }

    .status-box{
        padding:6px 10px;
    }

    .status-text{
        font-size:11px;
    }

}

/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

    .top-ui{
        top:8px;
        left:8px;
        right:8px;
    }

    .logo-box img{
        width:32px;
        height:32px;
    }

    .logo-text{
        font-size:13px;
    }

    .status-text{
        font-size:12px;
    }

}

/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

    .top-ui{
        top:8px;
        left:8px;
        right:8px;
    }

    .logo-box img{
        width:34px;
        height:34px;
    }

}

/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

    .top-ui{
        top:8px;
        left:8px;
        right:8px;
    }

    .logo-box img{
        width:36px;
        height:36px;
    }

}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

    .top-ui{
        top:12px;
        left:12px;
        right:12px;
    }

}

/* LAPTOP */
@media (min-width:821px) and (max-width:1440px){

    .top-ui{
        top:20px;

        left:50%;
        transform:translateX(-50%);

        width:1100px;
        max-width:1100px;
    }

}

/* MONITOR BESAR */
@media (min-width:1441px) and (max-width:1920px){

    .top-ui{
        top:22px;

        left:50%;
        transform:translateX(-50%);

        width:1200px;
        max-width:1200px;
    }

}

/* TV DIGITAL / ULTRAWIDE */
@media (min-width:1921px){

    .top-ui{
        top:25px;

        left:50%;
        transform:translateX(-50%);

        width:1300px;
        max-width:1300px;
    }

}


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

.slider-container{
    position:fixed;
    inset:0;
    overflow:hidden;

    background:linear-gradient(
    270deg,
    #ff0000,
    #ff8800,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
    );

    background-size:1600% 1600%;

    animation:rainbowBG 3s linear infinite;
}

/* ==================================
   ANIMASI GRADIENT
================================== */

@keyframes rainbowBG{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

/* ==================================
   TRACK
================================== */

.slider-track{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    will-change:transform;
}

/* ==================================
   SLIDE
================================== */

.slide{
    width:100%;
    height:100vh;
    display:flex;
    overflow:hidden;
}

/* ==================================
   MOBILE 9:16
================================== */

.mobile-slide{
    display:flex;
    justify-content:center;
    align-items:center;
    background:#000;
    width:100%;
    height:100vh;
}

.mobile-frame{
    width:100%;
    height:100%;
    display:flex;
    overflow:hidden;
}

.mobile-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ==================================
   DESKTOP
================================== */

.desktop-slide img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

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

@media(max-width:768px){

    .desktop-slide{
        display:none !important;
    }

}

/* ==================================
   DESKTOP
================================== */

@media(min-width:769px){

    .mobile-slide{
        display:none !important;
    }

}