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

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

html,
body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:#000;
}


/* =============================== POPUP PERTAMA - SAFE DATING UI ================================== */

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

.popup-pertama_overlay{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
z-index:999999;
background:none;
letter-spacing:0.5px;
}

/* ===============================
   MAIN CARD
================================== */

.popup-pertama_box{
width:360px;
border-radius:20px;
overflow:hidden;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.15);
box-shadow:0 40px 100px rgba(0,0,0,0.55);
font-family:system-ui,-apple-system,sans-serif;
animation:pop .18s ease;
letter-spacing:0.5px;
}

@keyframes pop{
from{transform:scale(.95);opacity:0;}
to{transform:scale(1);opacity:1;}
}

/* ===============================
   HEADER (VERY TIGHT)
================================== */

.popup-pertama_title{
padding:0px 14px 2px 14px;
text-align:center;
}

/* TITLE */

.popup-pertama_title_main{
display:inline-block;
padding:5px 14px;
font-size:20px !important;
font-weight:900 !important;
border-radius:0 0 20px 20px;
background:rgba(0,0,0,0.75);
border:2px solid rgba(255,255,255,.18);
}

.popup-pertama_title_main span{
	
background-image:
linear-gradient(
135deg,
#fff59d 0%,
#ffda44 15%,
#fff59d 35%,
#ffc300 55%,
#ffda44 75%,
#fff59d 100%
);

filter:
drop-shadow(0 2px 0 rgba(0,0,0,.75))
drop-shadow(0 3px 2px rgba(0,0,0,.45))
drop-shadow(1px 1px 0 rgba(255,255,255,.25));

-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
font-weight:900 !important;
}

/* SUB TITLE */

.popup-pertama_title_sub{
display:inline-block;
font-size:13px;
font-weight:bold;
color:#fff;
text-align:center;
line-height:1.2;
letter-spacing:0.6px;
padding:6px 10px;
border-radius:50px;
margin-top:8px;
background:linear-gradient(
145deg,
#16795a 0%,
#0d4d39 15%,
#0d4d39 38%,
#16795a 65%,
#0d4d39 85%,
#081c16 100%
);
border:2px solid rgba(255,255,255,.25);

/* EFEK TIMBUL + SINAR HALUS */
text-shadow:
0 1px 0 rgba(0,0,0,.35),
0 2px 3px rgba(0,0,0,.20),
0 0 6px rgba(255,255,255,.20),
0 0 10px rgba(255,255,255,.12);
}

/* ===============================
   CONTENT (COMPACT)
================================== */

.popup-pertama_iming{
margin:0px 12px 0 12px;
padding:8px;
background:none;
border-radius:12px;
display:flex;
flex-direction:column;
gap:6px;
}

/* ===============================
   STEP BOX
================================== */

.popup-pertama_step_box{
display:flex;
align-items:center;
gap:6px;
width:100%;
padding:10px 12px;
border-radius:25px;
background:#000;
border:1px solid #00FFFF;
color:#fff;
box-sizing:border-box;
}

/* NUMBER */

.popup-pertama_step_number{
width:28px;
height:28px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
font-weight:900;
background:#8B5A2B;
background:linear-gradient(
90deg,
#ff0000,
#ff9900,
#ffff00,
#00ff00,
#00ffff,
#0066ff,
#cc00ff,
#ff0099
);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
border:2px solid #00FF00;
border-radius:50px;
box-shadow:0 5px 12px rgba(0,0,0,0.35);
}

/* TEXT */

.popup-pertama_step_text{
flex:1;
min-width:0;
font-size:14px;
line-height:1.4;
font-weight:800;
color:#fff;
letter-spacing:0.6px;
word-break:break-word;
}

/* ===============================
   BUTTONS (COMPACT)
================================== */

.popup-pertama_btns{
display:flex;
gap:8px;
padding:10px;
}

/* BUTTON BASE */

.popup-pertama_btn{
flex:1;
padding:8px;
border-radius:0 0 25px 25px;
border:2px solid rgba(255,255,255,.18);
font-weight:900;
cursor:pointer;
transition:0.2s ease;
background:#111827;
box-shadow:0 8px 18px rgba(0,0,0,0.45);
}

/* SPAN */

.popup-pertama_btn span{
font-size:22px;
font-weight:800;
}

/* SKIP */

.popup-pertama_skip{
background:linear-gradient(145deg,#0f3d2e,#00a86b);
}

.popup-pertama_skip span{
color:#fff;
font-size:22px;
font-weight:800;

filter:
drop-shadow(0 2px 0 rgba(0,0,0,.75))
drop-shadow(0 3px 2px rgba(0,0,0,.45))
drop-shadow(1px 1px 0 rgba(255,255,255,.35));
}

/* NEXT */

.popup-pertama_next{
background:linear-gradient(
145deg,
#3b82f6 0%,
#1e4d9a 20%,
#12306a 45%,
#1e4d9a 75%,
#3b82f6 100%
);
}

.popup-pertama_next span{
font-size:22px;
font-weight:800;

background-image:
linear-gradient(
135deg,
#fff59d 0%,
#ffda44 15%,
#fff59d 35%,
#ffc300 55%,
#ffda44 75%,
#fff59d 100%
);

filter:
drop-shadow(0 2px 0 rgba(0,0,0,.75))
drop-shadow(0 3px 2px rgba(0,0,0,.45))
drop-shadow(1px 1px 0 rgba(255,255,255,.35));

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

/* hover */

.popup-pertama_btn:hover{
transform:translateY(-1px) scale(1.01);
filter:brightness(1.1);
}

/* active */

.popup-pertama_btn:active{
transform:scale(0.97);
}

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

@media (max-width:420px){

.popup-pertama_box{
width:92%;
 }
}


/* =============================== POPUP KEDUA - AGE VERIFY UI ================================== */

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

.popup-kedua_overlay{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
z-index:999999;
background:none;
letter-spacing:.5px;
}

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

.popup-kedua_box{
width:360px;
overflow:hidden;
border-radius:20px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.15);
box-shadow:0 40px 100px rgba(0,0,0,.55);
font-family:system-ui,-apple-system,sans-serif;
animation:popupKeduaPop .18s ease;
}

@keyframes popupKeduaPop{

from{
transform:scale(.95);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}

}

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

.popup-kedua_image{
width:100%;
height:360px;
background:#000;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.popup-kedua_image svg{
width:100%;
height:100%;
display:block;
}

/* ===============================
   QUESTION
================================== */

.popup-kedua_question{
padding:10px 10px;
text-align:center;
background:rgba(0,0,0,.45);
border-top:1px solid rgba(255,255,255,.12);
border-bottom:1px solid rgba(255,255,255,.12);
}

/* BACKGROUND HIJAU */

.popup-kedua_question .question-bg{
display:inline-block;
padding:6px 12px;
border-radius:15px !important;
background:linear-gradient(
145deg,
#081c16 0%,
#25a875 15%,
#0d4d39 38%,
#16795a 65%,
#25a875 85%,
#081c16 100%
);
border:2px solid rgba(255,255,255,.25);
}

/* TEKS GRADIENT */

.popup-kedua_question .question-text{
display:inline-block;
font-size:20px;
font-weight:900;
line-height:1.2;

color:transparent;

background-image:
linear-gradient(
135deg,
#fff59d 0%,
#ffda44 15%,
#fff59d 35%,
#ffc300 55%,
#ffda44 75%,
#fff59d 100%
);

filter:
drop-shadow(0 2px 0 rgba(0,0,0,.75))
drop-shadow(0 3px 2px rgba(0,0,0,.45))
drop-shadow(1px 1px 0 rgba(255,255,255,.35));

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

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

.popup-kedua_btns{
display:flex;
gap:8px;
padding:10px;
}

/* BUTTON */

.popup-kedua_btn{
flex:1;
padding:8px;
border:none;
cursor:pointer;
border-radius:0 0 25px 25px;
font-weight:800;
background:#111827;
border:2px solid rgba(255,255,255,.18);
transition:.2s ease;
box-shadow:0 8px 18px rgba(0,0,0,.45);
}

.popup-kedua_btn:hover{
transform:translateY(-1px) scale(1.01);
filter:brightness(1.1);
}

.popup-kedua_btn:active{
transform:scale(.97);
}

/* SKIP */

.popup-kedua_skip{
background:linear-gradient(145deg,#0f3d2e,#00a86b);
}

.popup-kedua_skip span{
color:#fff;
font-size:22px;
font-weight:800;

filter:
drop-shadow(0 2px 0 rgba(0,0,0,.75))
drop-shadow(0 3px 2px rgba(0,0,0,.45))
drop-shadow(1px 1px 0 rgba(255,255,255,.35));
}

/* NEXT */

.popup-kedua_next{
background:linear-gradient(
145deg,
#3b82f6 0%,
#1e4d9a 20%,
#12306a 45%,
#1e4d9a 75%,
#3b82f6 100%
);
}

.popup-kedua_next span{
font-size:22px;
font-weight:800;

background-image:
linear-gradient(
135deg,
#fff59d 0%,
#ffda44 15%,
#fff59d 35%,
#ffc300 55%,
#ffda44 75%,
#fff59d 100%
);

filter:
drop-shadow(0 2px 0 rgba(0,0,0,.75))
drop-shadow(0 3px 2px rgba(0,0,0,.45))
drop-shadow(1px 1px 0 rgba(255,255,255,.30));

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

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

@media(max-width:420px){

.popup-kedua_box{
width:92%;
}

.popup-kedua_image{
height:260px;
}

.popup-kedua_question span{
font-size:18px;
 }
}


/* =============================== POPUP 3 UI - NEXT QUESTION ================================== */

/* ===============================
   OVERLAY
================================== */
.popup3_overlay{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
z-index:999999;
background:none;
letter-spacing:.5px;
}

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

.popup3_box{
width:360px;
overflow:hidden;
border-radius:20px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.15);
box-shadow:0 40px 100px rgba(0,0,0,.55);
font-family:system-ui,-apple-system,sans-serif;
animation:popup3Pop .18s ease;
}


@keyframes popup3Pop{

from{
transform:scale(.95);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
 }
}

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

.popup3_image{
width:100%;
height:360px;
background:#000;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.popup3_image svg{
width:100%;
height:100%;
display:block;
}

/* ===============================
   QUESTION
================================== */

.popup3_question{
padding:10px 10px;
text-align:center;
background:rgba(0,0,0,.45);
border-top:1px solid rgba(255,255,255,.12);
border-bottom:1px solid rgba(255,255,255,.12);
}

/* BACKGROUND */

.popup3_question .question-bg{

display:inline-block;
padding:6px 10px;
border-radius:20px !important;
background:linear-gradient(
145deg,
#081c16 0%,
#25a875 15%,
#0d4d39 38%,
#16795a 65%,
#25a875 85%,
#081c16 100%
);
border:2px solid rgba(255,255,255,.25);
}

/* TEXT */

.popup3_question .question-text{

line-height:1.2;
font-size:20px;
font-weight:900;

background-image:
linear-gradient(
135deg,
#fff59d 0%,
#ffda44 15%,
#fff59d 35%,
#ffc300 55%,
#ffda44 75%,
#fff59d 100%
);

filter:
drop-shadow(0 2px 0 rgba(0,0,0,.75))
drop-shadow(0 3px 2px rgba(0,0,0,.45))
drop-shadow(1px 1px 0 rgba(255,255,255,.30));

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

}

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

.popup3_btns{
display:flex;
gap:8px;
padding:10px;
}

/* BUTTON */

.popup3_btn{

flex:1;
padding:8px;
border:none;
cursor:pointer;
border-radius:0 0 25px 25px;
font-weight:800;
background:#111827;
border:2px solid rgba(255,255,255,.18);
transition:.2s ease;
box-shadow:0 8px 18px rgba(0,0,0,.45);
}

.popup3_btn:hover{

transform:translateY(-1px) scale(1.01);
filter:brightness(1.1);
}

.popup3_btn:active{
transform:scale(.97);
}

/* ===============================
   SKIP
================================== */

.popup3_skip{
background:linear-gradient(145deg,#0f3d2e,#00a86b);
}

.popup3_skip span{
	
color:#fff;
font-size:22px;
font-weight:800;

filter:
drop-shadow(0 2px 0 rgba(0,0,0,.75))
drop-shadow(0 3px 2px rgba(0,0,0,.45))
drop-shadow(1px 1px 0 rgba(255,255,255,.35));
}

/* ===============================
   NEXT
================================== */

.popup3_next{
background:linear-gradient(
145deg,
#3b82f6 0%,
#1e4d9a 20%,
#12306a 45%,
#1e4d9a 75%,
#3b82f6 100%
);
}

.popup3_next span{

font-size:22px;
font-weight:800;

background-image:
linear-gradient(
135deg,
#fff59d 0%,
#ffda44 15%,
#fff59d 35%,
#ffc300 55%,
#ffda44 75%,
#fff59d 100%
);

filter:
drop-shadow(0 2px 0 rgba(0,0,0,.75))
drop-shadow(0 3px 2px rgba(0,0,0,.45))
drop-shadow(1px 1px 0 rgba(255,255,255,.35));

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

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

@media(max-width:420px){

.popup3_box{
width:92%;
}

.popup3_image{
height:260px;
}

.popup3_question span{
font-size:18px;
 }
}


/* =============================== POPUP INSTRUKSI DAFTAR ================================ */
/* OVERLAY */

.popup-instruksi_overlay{

position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
z-index:999999;
background:none;
letter-spacing:.5px;
}

/* MAIN BOX */

.popup-instruksi_box{

width:360px;
border-radius:22px;
overflow:hidden;
background:rgba(255,255,255,.10);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);
border:1px solid rgba(255,255,255,.18);

box-shadow:
0 40px 100px rgba(0,0,0,.60);

font-family:
system-ui,
-apple-system,
sans-serif;

animation:popupInstruksiPop .18s ease;
}

@keyframes popupInstruksiPop{

from{
transform:scale(.95);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}

}

/* TITLE */

.popup-instruksi_title{

padding:0 14px 8px;

text-align:center;

}

/* MAIN TITLE */

.popup-instruksi_title_main{

display:inline-block;

max-width:90%;

padding:6px 10px;

font-size:22px !important;

font-weight:900 !important;

text-align:center;

line-height:1.3;

white-space:normal;

overflow-wrap:break-word;

word-break:break-word;

border-radius:0 0 22px 22px;

background:rgba(0,0,0,.78);

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

box-sizing:border-box;

}

/* TITLE TEXT */

.popup-instruksi_title_main span{

background-image:
linear-gradient(
135deg,
#fff59d 0%,
#ffda44 15%,
#fff59d 35%,
#ffc300 55%,
#ffda44 75%,
#fff59d 100%
);

filter:
drop-shadow(0 2px 0 rgba(0,0,0,.75))
drop-shadow(0 3px 2px rgba(0,0,0,.45))
drop-shadow(1px 1px 0 rgba(255,255,255,.35));

-webkit-background-clip:text;

background-clip:text;

-webkit-text-fill-color:transparent;

color:transparent;

font-weight:900 !important;

}

/* CONTENT */

.popup-instruksi_content{

padding:8px 14px;
display:flex;
flex-direction:column;
gap:10px;
}

/* STEP */

.popup-instruksi_step{

display:flex;
align-items:center;
gap:10px;
width:100%;
padding:6px 10px;
box-sizing:border-box;
background:#000;
border-radius:22px;
border:1px solid #00FFFF;
}

/* NUMBER */

.popup-instruksi_number{

width:28px;
height:28px;

flex-shrink:0;

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

font-size:18px;
font-weight:900;

line-height:1;

background:linear-gradient(
135deg,
#ff0000,
#ff9900,
#ffff00,
#00ff00,
#00ffff,
#0066ff,
#cc00ff,
#ff0099
);

-webkit-background-clip:text;
background-clip:text;

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

border:2px solid #00FF00;

border-radius:50%;

box-sizing:border-box;
}

/* TEXT */

.popup-instruksi_text{

flex:1;
min-width:0;
font-size:18px;
line-height:1.1;
font-weight:700;
letter-spacing:.5px;
text-align:left;
white-space:normal;
overflow-wrap:break-word;
word-break:break-word;

}

.popup-instruksi_text span{

color:#ffffff;

text-shadow:
0 1px 0 rgba(255,255,255,.25),
0 2px 0 rgba(0,0,0,.55),
0 3px 4px rgba(0,0,0,.30);

}

/* BUTTON WRAPPER */

.popup-instruksi_btns{

display:flex;
justify-content:center;
padding:12px 20px 15px;
}

/* I AGREE BUTTON */

.popup-instruksi_agree{

width:70%;

padding:8px;

border-radius:0 0 25px 25px;

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

cursor:pointer;

font-weight:800;

background:linear-gradient(
145deg,
#3b82f6 0%,
#1e4d9a 20%,
#12306a 45%,
#1e4d9a 75%,
#3b82f6 100%
);

box-shadow:
0 8px 18px rgba(0,0,0,.45);

}

/* TEXT BUTTON */

.popup-instruksi_agree span{

font-size:22px;

font-weight:800;

background:linear-gradient(
90deg,
#ff0000,
#ff4500,
#ff9900,
#ffff00,
#ccff00,
#00ff00,
#00ff88,
#ffff00,
#ff9900,
#ff0000
);

filter:
drop-shadow(0 2px 0 rgba(0,0,0,.85))
drop-shadow(0 4px 2px rgba(0,0,0,.55))
drop-shadow(1px 1px 0 rgba(255,255,255,.35));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

color:transparent;
}

/* HOVER */

.popup-instruksi_agree:hover{

transform:translateY(-1px) scale(1.01);
filter:brightness(1.1);
}

/* ACTIVE */

.popup-instruksi_agree:active{
transform:scale(.97);
}

/* MOBILE */

@media(max-width:420px){
.popup-instruksi_box{
width:92%;
}

.popup-instruksi_agree{
width:80%;
 }
}

/* ==================== HIDE POPUP KEDUA ====================== */

#popup-keduaPopup {
    display: none;
}

/* ==================== HIDE POPUP KETIGA ====================== */

#popup-ketigaPopup {
    display: none;
}

/* ==================== HIDE POPUP INTRUKSI ==================== */

#popupInstruksi{

display: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: 6px 15px 6px 6px;

    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) 3 MODE
===================================== */

.logo-text1{
    display:block;

    font-size:26px;
    font-weight:900;
    letter-spacing:0.5px;
    line-height:1.15;

    margin:0;

    cursor:pointer;

    background-image:
     linear-gradient(
     135deg,
     #fff59d 0%,
     #ffda44 15%,
     #fff59d 35%,
     #ffc300 55%,
     #ffda44 75%,
     #fff59d 100%
     );

   filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.75))
    drop-shadow(0 3px 2px rgba(0,0,0,.45))
    drop-shadow(1px 1px 0 rgba(255,255,255,.35));

    -webkit-text-stroke:0.4px rgba(255,255,255,.85);

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

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

.logo-sub1{
    display:block;

    margin-top:0px;

    font-size:12px;
    font-weight:700;
    font-family:Arial,sans-serif;
    line-height:1.3;
    letter-spacing:0.5px;
}

.logo-sub1 span{

    color:#ffffff;

    text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    0 2px 0 rgba(0,0,0,.55),
    0 3px 2px rgba(0,0,0,.30);
}

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

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

    padding: 6px 10px 6px 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:18px;
    font-weight:600;
    font-family:Arial,sans-serif;
    white-space:nowrap;
}

.status-text span{

    color:#ffffff;

    text-shadow:
    0 1px 0 rgba(255,255,255,.25),
    0 0 3px rgba(255,255,255,.18),
    0 2px 0 rgba(0,0,0,.55),
    0 3px 2px rgba(0,0,0,.35);

}

@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:16px;
    }

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

    .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:16px;
    }

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

}

/* 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:calc(100% - 30px);
        max-width:1100px;
    }

}

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

    .top-ui{
        top:22px;

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

        width:calc(100% - 30px);
        max-width:1200px;
    }

}

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

    .top-ui{
        top:25px;

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

        width:calc(100% - 30px);
        max-width:1300px;
    }

}


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

.slider-container{
    position:fixed;
    inset:0;
    overflow:hidden;
    background:#000;
}

/* ==================================
   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:cover;
    display:block;
}

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

@media(max-width:768px){

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

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

@media(min-width:769px){

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


/* ==============================================
   🔵 FIX: HILANGKAN TAP-HIGHLIGHT / KEDIP KLIK
      (SEMUA CLASS POPUP)
================================================= */

/* ================= POPUP PERTAMA ================= */

.popup-pertama_overlay,
.popup-pertama_box,
.popup-pertama_title,
.popup-pertama_title_main,
.popup-pertama_title_sub,
.popup-pertama_iming,
.popup-pertama_step_box,
.popup-pertama_step_number,
.popup-pertama_step_text,
.popup-pertama_btns,
.popup-pertama_btn,
.popup-pertama_skip,
.popup-pertama_next,

/* ================= POPUP KEDUA ================= */

.popup-kedua_overlay,
.popup-kedua_box,
.popup-kedua_image,
.popup-kedua_question,
.popup-kedua_btns,
.popup-kedua_btn,
.popup-kedua_skip,
.popup-kedua_next,

/* ================= POPUP KETIGA ================= */

.popup3_overlay,
.popup3_box,
.popup3_image,
.popup3_question,
.popup3_btns,
.popup3_btn,
.popup3_skip,
.popup3_next,

/* ================= POPUP INSTRUKSI ================= */

.popup-instruksi_overlay,
.popup-instruksi_box,
.popup-instruksi_title,
.popup-instruksi_title_main,
.popup-instruksi_content,
.popup-instruksi_step,
.popup-instruksi_number,
.popup-instruksi_text,
.popup-instruksi_btns,
.popup-instruksi_agree {

  -webkit-tap-highlight-color:transparent !important;
  -webkit-touch-callout:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  touch-action:manipulation !important;
  outline:none !important;
}


/* ==============================================
   🔵 FIX: HAPUS FOCUS / OUTLINE
================================================= */

.popup-pertama_overlay:focus,
.popup-pertama_box:focus,
.popup-pertama_title:focus,
.popup-pertama_title_main:focus,
.popup-pertama_title_sub:focus,
.popup-pertama_iming:focus,
.popup-pertama_step_box:focus,
.popup-pertama_step_number:focus,
.popup-pertama_step_text:focus,
.popup-pertama_btns:focus,
.popup-pertama_btn:focus,
.popup-pertama_skip:focus,
.popup-pertama_next:focus,

.popup-kedua_overlay:focus,
.popup-kedua_box:focus,
.popup-kedua_image:focus,
.popup-kedua_question:focus,
.popup-kedua_btns:focus,
.popup-kedua_btn:focus,
.popup-kedua_skip:focus,
.popup-kedua_next:focus,

.popup3_overlay:focus,
.popup3_box:focus,
.popup3_image:focus,
.popup3_question:focus,
.popup3_btns:focus,
.popup3_btn:focus,
.popup3_skip:focus,
.popup3_next:focus,

.popup-instruksi_overlay:focus,
.popup-instruksi_box:focus,
.popup-instruksi_title:focus,
.popup-instruksi_title_main:focus,
.popup-instruksi_content:focus,
.popup-instruksi_step:focus,
.popup-instruksi_number:focus,
.popup-instruksi_text:focus,
.popup-instruksi_btns:focus,
.popup-instruksi_agree:focus {

  outline:none !important;
  box-shadow:none !important;
}


/* ==============================================
   🔵 FIX: ACTIVE / CLICK EFFECT
================================================= */

.popup-pertama_btn:active,
.popup-pertama_skip:active,
.popup-pertama_next:active,

.popup-kedua_btn:active,
.popup-kedua_skip:active,
.popup-kedua_next:active,

.popup3_btn:active,
.popup3_skip:active,
.popup3_next:active,

.popup-instruksi_agree:active {

  outline:none !important;
  box-shadow:none !important;
}


/* ==============================================
   🔵 FIX: SELECTION HIGHLIGHT
================================================= */

.popup-pertama_overlay,
.popup-pertama_box,
.popup-pertama_title,
.popup-pertama_title_main,
.popup-pertama_title_sub,
.popup-pertama_iming,
.popup-pertama_step_box,
.popup-pertama_step_number,
.popup-pertama_step_text,
.popup-pertama_btns,
.popup-pertama_btn,
.popup-pertama_skip,
.popup-pertama_next,

.popup-kedua_overlay,
.popup-kedua_box,
.popup-kedua_image,
.popup-kedua_question,
.popup-kedua_btns,
.popup-kedua_btn,
.popup-kedua_skip,
.popup-kedua_next,

.popup3_overlay,
.popup3_box,
.popup3_image,
.popup3_question,
.popup3_btns,
.popup3_btn,
.popup3_skip,
.popup3_next,

.popup-instruksi_overlay,
.popup-instruksi_box,
.popup-instruksi_title,
.popup-instruksi_title_main,
.popup-instruksi_content,
.popup-instruksi_step,
.popup-instruksi_number,
.popup-instruksi_text,
.popup-instruksi_btns,
.popup-instruksi_agree {

  -webkit-user-select:none !important;
  user-select:none !important;
}

/* MATIKAN NAVBAR BLOGGER (JIKA TEMA DI PASANG DI BLOGGSPOT) */
#navbar-iframe{
  display:none !important;
}