<!-- ===== CSS BY MAS JACK GANTENG (JANGAN DI UBAH GUYS) ===== -->
  <style>
* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  min-height: 2vh;
  background: linear-gradient(135deg, #ff5f6d, #ffc371);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  position: relative;
}


/* ===== BASE PERFORMANCE ===== */
html{
  scroll-behavior:smooth;
}

body{
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeSpeed;
}


/* ===== GPU PERFORMANCE ===== */
.btn,
.btn img,
.arrow,
.arrow-down span,
.marquee-track,
.profile-img,
.popup-slider img,
.location-icon-right,
.popup-text span,
.loading-text,
.card::before{
  will-change:transform,opacity;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.card {
  background: #000;
  border: 1px solid #00FFFF !important;
  max-width: 430px;       /* card maksimal 430px */
  width: 100%;            /* tetap responsive 9:16 */
  padding: 80px 10px 80px 10px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
  margin: 0 auto;         /* center card di layar */
  display: flex;
  flex-direction: column;
  height: 100vh;          /* pastikan card tinggi penuh untuk scroll */
}

/* =========================
   SCROLL VERTICAL WRAPPER
========================= */
.scroll-vertical-wrapper {
  flex: 1;                       /* isi sisa tinggi card */
  overflow-y: auto;              /* scroll vertical */
  overflow-x: hidden;            /* jangan bisa scroll horizontal */
  -webkit-overflow-scrolling: touch; /* smooth scroll mobile */
  padding-bottom: 10px;          /* space supaya div terakhir terlihat */
  padding-top: 5px;
  padding-left: 4px;             /* kiri/kanan cukup kecil supaya teks tidak terpotong */
  padding-right: 4px;
  background: none;              /* tidak ada background */
  max-width: 100%;               /* jangan melebihi card */
}

/* =========================
   SCROLL AREA
========================= */
.scroll-area {
  display: flex;
  flex-direction: column;
  min-height: 172%;              /* pastikan scroll-area cukup panjang */
  width: 100%;                   /* penuh horizontal */
}

/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================= */
@media (min-width: 260px) and (max-width: 780px) {
.scroll-area {
	min-height: 160%;
 }
}
	

/* ========================================
   🔵 POP UP SLIDER AWAL BUKA LANDING PAGE
=========================================== */
.popup-wrap {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

/* POPUP CARD */
.popup-card {
    width: 90%;
    max-width: 365px;
    background: rgba(0, 0, 255, 0.5);
    padding: 16px;
    border-radius: 18px;
    text-align: center;
    overflow: hidden;
    position: relative;
	border: 2px solid #00BFFF;
}

/* TOMBOL X */
.popup-close {
    position: Absolute;
    top: 0px;
    right: 0px;
    background: #FF0000;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 4px 9px;
    border-radius: 50px;
    cursor: pointer;
    display: none;
    animation:colorRun 0.2s linear infinite;
	
	text-shadow:
    /* hitam padat, tajam, tidak melebar */
    1px 0px 2px rgba(0,0,0,0.9),
    -1px 0px 2px rgba(0,0,0,0.9),
    0px 1px 2px rgba(0,0,0,0.9),
    0px -1px 2px rgba(0,0,0,0.9);

    z-index: 999999999;
}

/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================= */
@media (min-width: 260px) and (max-width: 780px) {
    .popup-close {
        top: 0px;
        right: 0px;
        font-size: 18px;
    }
}

/* ==================================================
   🔵  POPUP TEXT + CAHAYA PUTIH FOKUS (AMAN EMOJI)
===================================================== */

.popup-text{
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    background: #A52A2A;
    width: 100%;
    padding: 4px;
    text-align: center;
    box-sizing: border-box;
    margin: 0 0 0 0;
    border-radius: 35px 35px 5px 5px;
	
	/* GLOW HIJAU TUA */
  text-shadow:
    0 0 6px rgba(0, 90, 0, 0.9),
    0 0 12px rgba(0, 80, 0, 0.8),
    0 0 18px rgba(0, 70, 0, 0.7),
    0 0 24px rgba(0, 60, 0, 0.6);
}

/* Animasi goyang khusus TEKS saja */
.popup-text span {
    display: inline-block;
    animation: goyangText 0.35s infinite linear;
}

@keyframes goyangText {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-1px); }
    50%  { transform: translateY(0); }
    75%  { transform: translateY(1px); }
    100% { transform: translateY(0); }
}

/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================= */
@media (min-width: 260px) and (max-width: 1200px) {
    .popup-text {
        font-size: 18px;
    }
}


/* SLIDER WRAP */
.popup-slider {
    width: 100%;
    height: 480px;
    position: relative;
    overflow: hidden;
}

/* SLIDE IMAGES */
.popup-slider img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(1.1);
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

/* SHOW ACTIVE SLIDE */
.popup-slider img.active {
    opacity: 1;
}

/* DISABLE CLICK */
body.popup-lock {
    overflow: hidden;
    pointer-events: none;
}
.popup-wrap,
.popup-wrap * {
    pointer-events: auto;
}

/* LOADING TEXT BAWAH POPUP */
.popup-loading {
    margin-top: 0px;
    color: #ffffff;
    background: #A52A2A;
    border-radius: 5px 5px 50px 50px;
    font-size: 26px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 4px;
}

/* TEKS DENGAN CAHAYA PUTIH */
.loading-text{
    background: linear-gradient(
        120deg,
        #ffffff 0%,
        #ffffff 40%,
        #ffffff 48%,
        #ffffff 50%,
        #ffffff 52%,
        #ffffff 60%,
        #ffffff 100%
    );
    background-size: 250% 100%;
    animation: whiteShine 2.5s linear infinite;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    filter: drop-shadow(0 0 4px rgba(255,255,255,0.7));
}

/* ANIMASI KIRI → KANAN */
@keyframes whiteShine{
    0%   { background-position: -250% 0; }
    100% { background-position: 250% 0; }
}

/* TITIK LOADING */
.dots {
    display: inline-block;
    width: 26px;
    overflow: hidden;
    vertical-align: bottom;
    animation: dotsAnim 1s steps(4) infinite;
}

@keyframes dotsAnim {
    0%   { width: 0px; }
    33%  { width: 8px; }
    66%  { width: 16px; }
    100% { width: 24px; }
}


/* =========================================
   🔵 MENU LINK CEPAT POJOK KIRI ATAS LAYAR
============================================ */
.menu-wrapper{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  align-items:center;
  gap:2px;
  z-index:99999;
}

/* tombol garis 3 */
.menu-button{
  font-size:28px;
  font-weight: bold;
  color:#fff;
  background: linear-gradient(115deg, #a85b1e, #b59f1a, #3b94aa, #1f3f8b);
  padding: 1px 10px;
  border-radius: 2px;
  border: 1px solid #87CEFA !important;
  cursor:pointer;
  transition:0.3s;
  
  text-shadow:
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

.menu-button.active{
  background: linear-gradient(
  115deg,
  #4a1430,
  #5c1f2c,
  #5b4400,
  #958c10,
  #0a356f,
  #005f7a,
  #004b26,
  #3a478c
 );
}

.menu-label{
  position:relative;
  top:0;
  margin-left:0px;
  color:#fff;
  background: rgba(0, 0, 0, 0.5) !important;
  padding:2px 4px;
  font-size:12px;
  font-weight:bold;
  border-radius: 50px;
  display:flex;
  align-items:center;
}

/* DROPDOWN */
.menu-items{
  position:absolute;
  top: 43px;
  left:0;
  width:165px;
  opacity:0;
  pointer-events: auto;
  transform:translateX(-60px);
  transition:0.28s ease;
}

.menu-items.active{
  opacity:1;
  pointer-events: auto;
  transform:translateX(0);
}

/* item */
.menu-item{
  color:#fff;
  padding: 3px 10px;
  border:none;
  width:100%;
  font-size:12px;
  font-weight:bold;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #704622;
  cursor:pointer;
  border-radius: 0px 50px 50px 0px;
  
  background: linear-gradient(
  115deg,
  #4a1430,
  #5c1f2c,
  #5b4400,
  #958c10,
  #0a356f,
  #005f7a,
  #004b26,
  #3a478c
);
  
  text-shadow:
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

/* SIGNUP BTN */
.signup-btn{
  color:#fff;
  animation:colorRun 1s linear infinite;
  text-shadow:0 0 6px #800000, 0 0 12px #b30000, 0 0 18px #cc0000;
}

@keyframes colorRun{
  0%{ color:#00ff00; }
  50%{ color:#ffffff; }
  100%{ color:#00ff00; }
}

.arrow{
  font-size:16px;
  margin-left: 0px;
}

.menu-item:hover{
  background: #004aad;
}

/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================= */
@media (min-width: 260px) and (max-width: 780px) {
  .menu-items{
    top: 43px;
    width:165px;
  }
  .menu-item{
    padding:3.5px 10px;
  }
}

/* ==============================================
   🔵 FIX: HILANGKAN TAP-HIGHLIGHT / KEDIP KLIK
================================================= */
.signup-btn,
.general-btn,
.menu-item,
.menu-button,
a,
button {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  user-select: none;
}

.signup-btn:focus,
.general-btn:focus,
.menu-item:focus,
.menu-button:focus,
a:focus,
button:focus {
  outline: none !important;
  box-shadow: none !important;
}

* {
  -webkit-touch-callout: none;
}


/* ================================
   🔵 LOCATION MODULE + REDIRECT 
=================================== */
.location-module {
  position: absolute;
  top: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 20px;
  border-radius: 6px;
  text-align: left;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  z-index: 50;
  width: auto;
  display: inline-block;
  border: 1px solid #87CEFA !important;
}

/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================= */
@media (min-width: 260px) and (max-width: 780px) {
  .location-module {
    right: 0px !important;
    top: 0px;
  }
}

.location-text {
  font-size: 14px;
  color: #fff;
  margin-bottom: 4px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  text-align: left;
  white-space: nowrap;
  
  text-shadow:
  /* hitam padat, tajam, tidak melebar */
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

.location-btn {
  width: 100%;
  padding: 2px 8px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 10px;
  background: linear-gradient(115deg, #a85b1e, #b59f1a, #3b94aa, #1f3f8b);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  gap: 2px;
  align-items: center;
  text-align: left;
  white-space: nowrap;
  border: 2px solid #1E90FF !important;
  
  text-shadow:
  /* hitam padat, tajam, tidak melebar */
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

.location-btn:hover {
  background: linear-gradient(
  115deg,
  #4a1430,   /* dark pink → lebih gelap */
  #5c1f2c,   /* merah gelap → lebih gelap */
  #5b4400,   /* dark orange → lebih gelap */
  #958c10,   /* kuning → lebih gelap */
  #0a356f,   /* biru → lebih gelap */
  #005f7a,   /* cyan → lebih gelap */
  #004b26,   /* hijau → lebih gelap */
  #3a478c    /* ungu kebiruan → lebih gelap */
 );
}

.arrow-icon {
  width: 25px;
  height: 20px;
}

.location-dropdown {
  display: none;
  margin-top: 4px;
  background: linear-gradient(
  115deg,
  #4a1430,   /* dark pink → lebih gelap */
  #5c1f2c,   /* merah gelap → lebih gelap */
  #5b4400,   /* dark orange → lebih gelap */
  #958c10,   /* kuning → lebih gelap */
  #0a356f,   /* biru → lebih gelap */
  #005f7a,   /* cyan → lebih gelap */
  #004b26,   /* hijau → lebih gelap */
  #3a478c    /* ungu kebiruan → lebih gelap */
  );

  text-shadow:
  /* hitam padat, tajam, tidak melebar */
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
  
  border: 1px solid #FF1493;
  border-radius: 8px;
  overflow-y: auto;
  max-height: 144px !important;
}

.location-item {
  padding: 2px 8px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  border-bottom: 1px solid #fff;
}

.location-item:first-child {
  border-top: 1px solid #FF1493;
}
.location-item:last-child {
  border-bottom: 1px solid #FF1493;
}

.location-item:hover {
  background: #004aad;
}

/* ICON LOCATION MERAH FLIP */
.location-icon-right {
  position: absolute;
  top: 0;
  right: -20px;
  width: 24px;
  height: 14px;
  animation: flipLoc 1.2s infinite ease-in-out;
  transform-origin: center;
  pointer-events: none;
}

@keyframes flipLoc {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}


/* ================================================
   🔵 HEADER PROFILE & ACTIVE USERS & BANNER PROMO
=================================================== */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 216px;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY99Q4iSCr-4z6GthjT-DjfT3fysQBtPFNvJa4tgi9Vsi2Kq269UwSsa4ZFasTNxtd8skuRk2BArg17CXWCZ4ppgZ7uX452L6ZEj6Uk4ooN8D3JzqvPk36VoFk1HtDLm8xZOJhNPFhHj81duc8-5Dr_CKultXYDOulFn63NNpTG5DXcxcKfYPJ6_U1iyE/w400-h214/ezgif.com-optimize.gif") center / cover no-repeat;
  z-index: 0;
}

.profile-wrap,
h1 {
  position: relative;
  z-index: 2;
}

.profile-wrap {
  display: inline-block;
  margin-bottom: 2px;
}

.active-users {
  position: absolute;
  right: 85px; 
  top: 178px;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #111, #2b2b2b);
  color: #00BFFF;
  padding: 4px 10px;
  border-radius: 15px;
  border: 2px solid #00BFFF;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  min-width: 60px;

  width: max-content;
  max-width: 90vw;

  z-index: 3;
  white-space: nowrap;
  box-sizing: border-box; /* FIX PADDING KONSISTEN */
}

.active-users .count {
  font-size: 18px;
  font-weight: bold;
  display: block;
  margin-bottom: 2px;
}

.active-users .label {
  font-size: 16px;
  font-weight: bold;
  display: block;
  animation: softBlink 1s ease-in-out infinite;
  line-height: 1.2;
  white-space: nowrap;
}


.banner-promo {
  position: absolute;
  right: -45px ;
  top: 178px;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #111, #2b2b2b);
  color: #00BFFF;
  padding: 4px 10px;
  border-radius: 15px;
  border: 2px solid #00BFFF;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  min-width: 100px;

  width: max-content;
  max-width: 90vw;

  z-index: 3;
  white-space: nowrap;
  box-sizing: border-box; /* FIX PADDING KONSISTEN */
}

.banner-promo .count {
  font-size: 18px;
  font-weight: bold;
  display: block;
  margin-bottom: 2px;
}

.banner-promo .label {
  font-size: 16px;
  font-weight: bold;
  display: block;
  animation: softBlink 1s ease-in-out infinite;
  line-height: 1.2;
  white-space: nowrap;
}


@keyframes softBlink {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}


/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================= */
@media (min-width: 260px) and (max-width: 780px) {

  .active-users {
    position: absolute;
    top: 178px;
    transform: translate(-50%, -50%);
    padding: 2px 4px;
    box-sizing: border-box;
  }
  
  .banner-promo {
    position: absolute;
    top: 178px;
    transform: translate(-50%, -50%);
    padding: 2px 2px;
    box-sizing: border-box;
  }

  .active-users {
    left: 210px;
  }

  .active-users .count {
    font-size: 14px;
    margin-bottom: 2px;
  }

  .active-users .label {
    font-size: 10px;
  }


  .banner-promo {
    left: 305px;
  }

  .banner-promo .count {
    font-size: 14px;
    margin-bottom: 2px;
  }

  .banner-promo .label {
    font-size: 10px;
  }
}


/* ==============================
   🔵 HEADER FOTO PROFILE SLIDER
================================= */
.profile-holder {
  width: 160px;
  height: 160px;
  position: relative;
  z-index: 3;
}

.profile-img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 14%;
  border: 2px solid #ff5f6d;
  position: absolute;
  top: -35px;
  left: -8px;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.profile-img.active {
  opacity: 1;
}

/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================= */
@media (min-width: 260px) and (max-width: 780px) {
.profile-holder {
  width: 160px;
  height: 160px;
}
.profile-img {
  width: 160px;
  height: 160px;
 }
}


.card::before,
.profile-img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  will-change: transform, opacity, background;
  image-rendering: auto;
  pointer-events: none;
}


/* ==============================
     🔵 H1 TITLE NAMA WEB \ APK
================================= */
h1 {
  font-size: 22px;
  margin: -28px -25px 0;
  padding: 1px 8px;
  background: linear-gradient(
  115deg,
  #6b1f45,   /* dark pink → lebih gelap */
  #832d3f,   /* merah gelap → lebih gelap */
  #7f5c00,   /* dark orange → lebih gelap */
  #c7a716,   /* kuning → lebih gelap */
  #0d4a99,   /* biru → lebih gelap */
  #007f99,   /* cyan → lebih gelap */
  #006636,   /* hijau → lebih gelap */
  #4f62c0    /* ungu kebiruan → lebih gelap */
  );
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  position: relative;
  overflow: hidden;
}

h1 span {
  display: inline-block;
  background: linear-gradient(
    to right,
    #ffffff 0%,
    #00ff55 50%,
    #ffffff 100%
  );
  background-size: 200% auto;
  color: transparent;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  -webkit-background-clip: text;
  background-clip: text;
  animation: wuscling 2s linear infinite;
}

@keyframes wuscling {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}


/* ICON BEFORE */
h1::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url("https://img.icons8.com/?size=160&id=zrTptiWiMTtu&format=png");
  background-size: cover;
  vertical-align: middle;
  margin-right: 2px;
  margin-top: -2px;
}

/* ICON AFTER */
h1::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("https://img.icons8.com/?size=96&id=98A4yZTt9abw&format=png");
  background-size: cover;
  vertical-align: middle;
  margin-left: 3px;
}

/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================= */
@media (min-width: 260px) and (max-width: 780px) {
 h1 {
  font-size: 18px;
 }
}
	
	
	
/* ================================
   🔵 H2 TAGLINE DI BAWAH NAMA WEB
=================================== */
h2 {
  background: linear-gradient(
  115deg,
  #6b1f45,   /* dark pink → lebih gelap */
  #832d3f,   /* merah gelap → lebih gelap */
  #7f5c00,   /* dark orange → lebih gelap */
  #c7a716,   /* kuning → lebih gelap */
  #0d4a99,   /* biru → lebih gelap */
  #007f99,   /* cyan → lebih gelap */
  #006636,   /* hijau → lebih gelap */
  #4f62c0    /* ungu kebiruan → lebih gelap */
  );
  color: #00FFFF !important;
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  
  margin: 0 -30px 0;               
  padding: 2px 4px 2px 4px;
  line-height: 1.1;
  position: relative;

  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  width: calc(100% + 50px);          
  box-sizing: border-box;
  
  text-shadow:
  /* hitam padat, tajam, tidak melebar */
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================= */
@media (min-width: 260px) and (max-width: 780px) {
 h2 {
  font-size: 10px;
 }
}


/* ==================================
   🔵 APPLY TITTLE - INTRUKSI ARAHAN
===================================== */
.apply-title { 
 text-align: center; 
 font-size: 14px;
 font-weight: bold;
 color: #FFA500 !important;
 margin-top: -6px; 
 margin-bottom: -13px;
}


/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================= */
@media (min-width: 260px) and (max-width: 780px) {

.apply-title {
 font-size: 14px;
 margin-top: -3px; 
 margin-bottom: -13px; 
 }
}


/* =====================================
   🔵 STEP LIST CARA MENDAFTAR DI LINK
======================================== */
.step-list {
  position: relative;
  z-index: 2;
  list-style: none;
  padding-left: 0px;
  margin: 0;
}

.step-list li {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 2px;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  background: #004d00 !important;
  color: #FFFFFF;
  font-size: 14px;
  border: 2px solid #00FFFF;
  border-radius: 18px;
  padding: 1px 4px;
  
  /* Sinar putih lembut padat dan tidak menyebar */
  text-shadow:
    0 0 1px rgba(255,255,255,0.5),
    0 0 2px rgba(255,255,255,0.3),

    1px 0px 2px rgba(0,0,0,0.9),
    -1px 0px 2px rgba(0,0,0,0.9),
    0px 1px 2px rgba(0,0,0,0.9),
    0px -1px 2px rgba(0,0,0,0.9);
	
  /* hitam padat, tajam, tidak melebar */
  text-shadow:
   1px 0px 2px rgba(0,0,0,0.9),
   -1px 0px 2px rgba(0,0,0,0.9),
   0px 1px 2px rgba(0,0,0,0.9),
   0px -1px 2px rgba(0,0,0,0.9);
}

/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================= */
@media (min-width: 260px) and (max-width: 780px) {
.step-list li {
	font-size: 14px;
	margin-bottom: 2px;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
 }
}


.step-num {
  background: #00FF00;
  color: #fff;
  font-weight: bold;
  width: 20px;
  height: 20px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  border: 2px solid #FF8C00;
  flex-shrink: 0;
  
  margin-left: -2px ;
  margin-top: 1px !important;
  margin-bottom: 1px !important;
  
  text-shadow:
  /* hitam padat, tajam, tidak melebar */
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

/* =========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================ */
@media (min-width: 260px) and (max-width: 780px) {

.step-num {
 margin-left: -2px !important;
 margin-top: 1px !important;
 margin-bottom: 1px !important;
 }
}

/* ============================
   🔵 TEKS DI BAWAH STEP LIST
===============================*/
.bio {
  font-size: 14px !important;
  line-height: 1.7;
  margin: 15px 0 15px;
  text-align: left;
  position: relative;
}

.bio-main {
  color: #FFA500 !important;
  font-weight: bold;
  position: relative;
}

.bio-main > div {
  text-align: center;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 40px;
  color: #FFA500 !important;
}


/* ========================================
   🔵 PANAH  ARROW DOWN 1 DIBAWAH BIO MAIN
=========================================== */
.arrow-down {
  display: flex;
  justify-content: center;
  gap: 1px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: -35px;
  position: relative;
  top: -55px;
}

.arrow-down span {
  display: inline-block;
  color: #00FF00 !important;
  animation: blink 0.5s infinite;
}

.arrow-down span:nth-child(7) {
  animation-duration: 1s;
}

@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}


/* ===================================
   🔵 2 BUTTONS ACTION REDIRECT UTAMA
====================================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: 8px;
  margin-top: -10px;
  margin-bottom: 20px;
  font-size: 26px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  
  box-sizing: border-box;
}

.btn img {
  width: 32px;
  height: 32px;
}

/* ==== MAROON ELEGANT DARK ==== */
.btn-primary {
  background: #0033CC !important;
  color: #ffffff !important;
  border: 5px solid #FFA500;
  box-shadow: 0 0 6px #00ff55,
            0 0 10px #00ff55;
  animation: softShake 2s infinite, textBlink 0.5s infinite;
  
text-shadow:
  /* hitam padat, tajam, tidak melebar */
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

.btn-primary:hover {
  color: #FFD700 !important;
  border-color:#00ff55 !important;
  box-shadow: 0 0 10px #ff0033,  /* maroon cerah */
            0 0 18px #ff0033;  /* maroon cerah */
}

/* ===== LABEL "Step - 1" WARNA ORANGE ===== */
.btn-primary .alt-label1 {
  position: absolute;
  right: 14px;
  top: 4px;
  background: #00FF00 !important;
  color: #ffffff !important;
  padding: 2px 4px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
  border: 3px solid #FFA500 !important;
  
  /* Sinar putih lembut padat dan tidak menyebar */
  text-shadow:
    0 0 1px rgba(255,255,255,0.5),   /* putih sangat halus */
    0 0 2px rgba(255,255,255,0.3),   /* putih sedikit saja */

   /* hitam padat, tajam, tidak melebar */
   1px 0px 2px rgba(0,0,0,0.9),
   -1px 0px 2px rgba(0,0,0,0.9),
   0px 1px 2px rgba(0,0,0,0.9),
   0px -1px 2px rgba(0,0,0,0.9);
}


/* ======================================
        🔵 PANAH  ARROW DOWN 2
========================================= */
.arrow-down-2 {
  display: flex;
  justify-content: center;
  gap: 1px;
  font-size: 12px;
  font-weight: bold;

  margin-top: -30px;   /* naik sedikit dari alt text */
  margin-bottom: 20px; /* kasih jarak ke tombol */

  position: relative;
  top: 0;
  z-index: 250; /* 🔥 biar gak ketutup */
}

.arrow-down-2 span {
  display: inline-block;
  color: #00FF00 !important;
  animation: blink 0.5s infinite;
}

.arrow-down-2 span:nth-child(7) {
  animation-duration: 1s;
}


/* ==== SECONDARY GLOW DARK ==== */
.btn-secondary {
  margin-bottom: 40px;
  background: #0033CC !important;
  color: #ffffff !important;
  border: 5px solid #FFA500;
  animation: softShake 2s infinite, textBlink 0.5s infinite;
  animation-delay: 0.5s;
  
  box-shadow: 0 0 6px #00ff55,
            0 0 10px #00ff55;

  text-shadow:
    /* hitam padat, tajam, tidak melebar */
    1px 0px 2px rgba(0,0,0,0.9),
    -1px 0px 2px rgba(0,0,0,0.9),
    0px 1px 2px rgba(0,0,0,0.9),
    0px -1px 2px rgba(0,0,0,0.9);
}

.btn-secondary:hover {
  color: #FFD700 !important;
  border-color:#00ff55 !important;
  box-shadow: 0 0 10px #ff0033,  /* maroon cerah */
            0 0 18px #ff0033;  /* maroon cerah */
}

/* ===== LABEL "Step - 2" WARNA ORANGE ===== */
.btn-secondary .alt-label2 {
  position: absolute;
  right: 14px;
  top: 4px;
  background: #00FF00 !important;
  color: #ffffff !important;
  padding: 2px 4px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
  border: 3px solid #FFA500 !important;
  
  /* Sinar putih lembut padat dan tidak menyebar */
  text-shadow:
    0 0 1px rgba(255,255,255,0.5),   /* putih sangat halus */
    0 0 2px rgba(255,255,255,0.3),   /* putih sedikit saja */

   /* hitam padat, tajam, tidak melebar */
   1px 0px 2px rgba(0,0,0,0.9),
   -1px 0px 2px rgba(0,0,0,0.9),
   0px 1px 2px rgba(0,0,0,0.9),
   0px -1px 2px rgba(0,0,0,0.9);
}


/* === TEKS STEP 2 (STATIC, CENTERED) === */
.text-step-dua {
  color: #FFFFFF !important;
  width: 100%;
  padding: 1px 4px;
  background: #004d00 !important;
  border: 2px solid #00FFFF !important;
  border-radius: 18px;
  margin-top: 8px;
  margin-bottom: 40px;
  text-align: center;

  box-sizing: border-box;
  display: block;
  
  box-shadow: 0 0 6px #00ff55,
            0 0 10px #00ff55;

  /* Sinar putih lembut padat dan tidak menyebar */
  text-shadow:
    0 0 1px rgba(255,255,255,0.5),
    0 0 2px rgba(255,255,255,0.3),

    1px 0px 2px rgba(0,0,0,0.9),
    -1px 0px 2px rgba(0,0,0,0.9),
    0px 1px 2px rgba(0,0,0,0.9),
    0px -1px 2px rgba(0,0,0,0.9);
}

.text-step-dua span {
  font-size: 15px;
  font-weight: bold;
}

/* ========================
     ANIMASI - ANIMASI
=========================== */
@keyframes textBlink {
  0% { opacity: 1; }
  50% { opacity: 0.5; } /* lebih redup supaya terlihat terang kontras */
  100% { opacity: 1; }
}

@keyframes softShake {
  0% { transform: translateX(0); }
  2% { transform: translateX(-2px); }
  4% { transform: translateX(2px); }
  6% { transform: translateX(-2px); }
  8% { transform: translateX(2px); }
  10% { transform: translateX(0); }
  100% { transform: translateX(0); }
}


/* =========================================================
   Sembunyikan tombol Secondary dan text step dua di awal open lp
============================================================ */
.btn-secondary,
.text-step-dua,
.arrow-down-2 {
  display: none;
}


/* =========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================ */
@media (min-width: 260px) and (max-width: 780px) {

.btn {
  padding: 8px;
  margin-top: -15px;
  margin-bottom: 15px;
  }

  .btn-primary .alt-label1 {
    right: 14px;
    top: 4px;
    padding: 2px 4px;
    font-size: 10px;
    font-weight: bold;
	border-radius: 10px;
  }

  .btn-secondary .alt-label2 {
    right: 14px;
    top: 4px;
    padding: 2px 4px;
    font-size: 10px;
    font-weight: bold;
	border-radius: 10px;
  }
}


/* =================================
   🔵 RATING PLAY STORE & APP STORE
==================================== */

/* KIRI (Play Store) */
.infoRow-rating-left {
  position: absolute;
  right: 135px;
  top: 20px; /* di atas tombol About */
  display: flex;
  align-items: flex-start; /* icon & wrapper teks sejajar vertikal */
  gap: 6px; /* jarak icon store dan wrapper teks */
  z-index: 2; /* pastikan di atas gambar */
}

/* KANAN (App Store) */
.infoRow-rating-right {
  position: absolute;
  left: 130px;
  top: 20px; /* di atas tombol Company */
  display: flex;
  align-items: flex-start;
  gap: 6px;
  z-index: 2;
}

/* ICON STORE (Play / App) */
.infoRow-rating-play {
  display: block;
  width: 55px;  /* ubah sesuai besar icon */
  height: auto;
  flex-shrink: 0;
}

/* WRAPPER Teks rating + tagline di kanan icon */
.infoRow-text-wrapper {
  display: flex;
  flex-direction: column; /* rating di atas, tagline di bawah */
  justify-content: flex-start;
  align-items: flex-start; /* tetap sejajar kiri */
  line-height: 1.2;
  margin-top: 4px;
}

/* RATING + BINTANG (atas) */
.infoRow-rating-score {
  font-size: 12px;
  display: flex;
  align-items: center;   /* angka dan bintang sejajar vertikal */
  gap: 3px;              /* jarak angka dan bintang */
  color: #fff;
  font-weight: bold;
  margin-top: 4px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  line-height: 1;
  white-space: nowrap;
}

/* ICON BINTANG */
.infoRow-star {
  width: 14px;  /* ubah sesuai besar */
  height: auto;
  margin-top: -2px;
}

/* TAGLINE / REVIEW (bawah rating) */
.infoRow-rating-review {
  font-size: 10px;   /* bisa diperbesar tanpa acak */
  line-height: 1.2;
  margin-top: 2px;
  margin-left: -5px;
  margin-right: 0px;
  margin-bottom: 0px;
  color: #fff;
  font-weight: bold;
  white-space: nowrap; /* jangan pindah baris */
}


/* ==================================================
    🔵 DUA POP UP PROFESIONAL WEBSITE GAMBAR + TEKS
===================================================== */
.infoRow-wrap {
  position: relative;
  width: 140px;
  margin: 0 auto;
  display: inline-block;
}

/* =====================================================
                  GAMBAR UTAMA
===================================================== */
.infoRow-img {
  width: 100%;        
  height: auto;
  border-radius: 30px;
  display: block;
}

/* =====================================================
                TOMBOL ABOUT (KIRI)
===================================================== */
.infoRow-btn-about {
  position: absolute;
  top: 80%;
  left: 6px;
  transform: translateY(-50%) translateX(-100%);
  padding: 6px 15px;
  background: #C71585;
  color: #fff;
  border: 2px solid #00FFFF !important;
  border-radius: 50px 0px 0px 50px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: 0.25s;
  
  text-shadow:
  /* hitam padat, tajam, tidak melebar */
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}
.infoRow-btn-about:hover{ background:#1e73ff;}
.infoRow-arrow-about { display: inline-block; transition: 0.3s ease; transform: rotate(0deg);}
.infoRow-arrow-about.active { transform: rotate(90deg);}
/* =====================================================
                TOMBOL COMPANY (KANAN)
===================================================== */
.infoRow-btn-company {
  position: absolute;
  top: 80%;
  right: 6px;
  transform: translateY(-50%) translateX(100%);
  padding: 6px 8px;
  background: #C71585;
  color: #fff;
  border: 2px solid #00FFFF !important;
  border-radius: 0px 50px 50px 0px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: 0.25s;
  
  text-shadow:
  /* hitam padat, tajam, tidak melebar */
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

.infoRow-btn-company:hover{background:#1e73ff;}
.infoRow-arrow-company { display: inline-block; transition: 0.3s ease; transform: rotate(0deg); }
.infoRow-arrow-company.active { transform: rotate(-90deg); }

/* =====================================================
    🔵          POPUP ABOUT (KIRI)
===================================================== */
.infoRow-popup-overlay-about {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  justify-content: center;
  align-items: flex-start;
  padding-top: 40px; /* Geser popup ke atas */
  z-index: 999999;
}

.infoRow-popup-box-about {
  width: 92%;
  max-width: 360px;
  max-height: calc(100vh - 80px);
  background: linear-gradient(
  115deg,
  #6b1f45,   /* dark pink → lebih gelap */
  #832d3f,   /* merah gelap → lebih gelap */
  #7f5c00,   /* dark orange → lebih gelap */
  #064d1a,   /* hijau tua */
  #0d4a99,   /* biru → lebih gelap */
  #007f99,   /* cyan → lebih gelap */
  #006636,   /* hijau → lebih gelap */
  #4f62c0    /* ungu kebiruan → lebih gelap */
  );
  color: #fff;
  border: 2px solid #00ffff;
  border-radius: 14px;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.25s ease;
  overflow: hidden;
}

/* Konten scrollable */
.infoRow-popup-box-about .infoRow-popup-content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

/* Teks About */
.infoRow-popup-box-about .infoRow-popup-text {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: left !important;
  
  text-shadow:
    /* hitam padat, tajam, tidak melebar */
    1px 0px 2px rgba(0,0,0,0.9),
    -1px 0px 2px rgba(0,0,0,0.9),
    0px 1px 2px rgba(0,0,0,0.9),
    0px -1px 2px rgba(0,0,0,0.9);
}

/* Tombol close */
.infoRow-popup-box-about .infoRow-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: #fff;
  padding: 3px 4px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  z-index: 10;
  border: 1px solid #00ffff;
}

/* =====================================================
    🔵          POPUP COMPANY (KANAN)
===================================================== */
.infoRow-popup-overlay-company {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  justify-content: center;
  align-items: flex-start;
  padding-top: 40px; /* Geser popup ke bawah agar gambar tidak terpotong */
  z-index: 999999;
}

.infoRow-popup-box-company {
  width: 92%;
  max-width: 360px;
  max-height: calc(100vh - 80px);
  background: linear-gradient(
  115deg,
  #6b1f45,   /* dark pink → lebih gelap */
  #832d3f,   /* merah gelap → lebih gelap */
  #7f5c00,   /* dark orange → lebih gelap */
  #064d1a,   /* hijau tua */
  #0d4a99,   /* biru → lebih gelap */
  #007f99,   /* cyan → lebih gelap */
  #006636,   /* hijau → lebih gelap */
  #4f62c0    /* ungu kebiruan → lebih gelap */
  );
  color: #fff;
  border: 2px solid #00ffff;
  border-radius: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.25s ease;
  overflow: hidden;
}

/* Konten scrollable: gambar + teks */
.infoRow-popup-box-company .infoRow-popup-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 10px 15px 0 15px;
}

/* Gambar atas Company */
.infoRow-popup-box-company .infoRow-popup-img {
  display: block;
  margin-left: 25px;
  margin-right: auto;
  width: 75% !important;          /* atur lebar gambar */
  max-height: none;     /* biar tidak terpotong */
  object-fit: contain;   /* tampil seluruh gambar tanpa crop */
  border-radius: 10px 10px 10px 10px;
  margin-bottom: -40px;  /* jarak ke teks */
  flex-shrink: 0;
}

/* Teks di bawah gambar */
.infoRow-popup-box-company .infoRow-popup-text {
  padding: 10px 0;
  margin-top: 35px;
  margin-right: 0px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: left !important;
  
  text-shadow:
    /* hitam padat, tajam, tidak melebar */
    1px 0px 2px rgba(0,0,0,0.9),
    -1px 0px 2px rgba(0,0,0,0.9),
    0px 1px 2px rgba(0,0,0,0.9),
    0px -1px 2px rgba(0,0,0,0.9);
}

/* Tombol close */
.infoRow-popup-box-company .infoRow-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: #fff;
  padding: 3px 4px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  z-index: 10;
  border: 1px solid #00ffff;
}

.infoRow-close-btn:hover{
background:#1e73ff;
}

/* ==================================================
    🔵 RESPONSIVE (HP 360px → TABLET 768px)
===================================================== */
@media (min-width: 360px) and (max-width: 768px) {
  /* BOX */
  .infoRow-popup-box-about,
  .infoRow-popup-box-company {
    width: 94%;
    max-width: 420px;
    max-height: 76vh; /* 🔥 biar tidak kepotong bawah */
    border-radius: 15px;
  }
}

/* ===================================================
   🔵 SIGNUP BUTTON DI DUA POP UP PROFESIONAL WEBSITE
====================================================== */
.infoRow-sign-btn {
  background: #0033CC !important;
  border: 4px solid #FFA500 !important;
  color: #fff;
  padding: 8px;
  width: 80%;
  margin: 0 auto 8px auto !important;
  border-radius: 40px;
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
  display: block;
  animation: softShake 2s infinite, textBlink 0.5s infinite;
  
  text-shadow:
  /* hitam padat, tajam, tidak melebar */
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

.infoRow-sign-btn:hover { opacity: 0.9; }

.infoRow-sign-btn:hover {
  color: #FFD700;
  border-color:#00ff55 !important;
  box-shadow: 0 0 10px #ff0033,  /* maroon cerah */
            0 0 18px #ff0033;  /* maroon cerah */
}

/* HOVER SIGN UP BUTTON */
.infoRow-sign-btn:hover{
background:#00FF00;
color: #FFFF00;
transform:scale(1.05);

text-shadow:
  /* hitam padat, tajam, tidak melebar */
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}


/* =====================================
   🔵 NOTE DIV - INTRUKSI CATATAN PALSU 
======================================== */
.note-div {
  margin-top: 5px;
  margin-bottom: 10px;
  text-align: center;
  background: linear-gradient(
  115deg,
  #8a4b1a,   /* oren tua tapi masih hidup */
  #1e3a5f,   /* biru tua medium */
  #1f5a33,   /* hijau tua seimbang */
  #7a1f2a,   /* merah tua soft */
  #4a2a7a,   /* ungu tua terang */
  #7a6a1a    /* kuning tua hangat */
);

  padding: 4px 35px !important;
  border-radius: 0px 0px 80px 80px !important;
  display: inline-block !important;
  border: 1px solid #00ffff !important;
  box-shadow: 0 0 6px #00ffff !important;
}

.note-label {
  color: #FFA500 !important;
  font-weight: bold !important;
  font-size: 13px !important;
  font-style: italic !important;  
  position: relative !important;
  top: -2px !important;

  /* SHADOW HITAM PEKAT (FINAL - TIDAK DOUBLE) */
  text-shadow:
    1px 0px 2px rgba(0,0,0,0.9),
    -1px 0px 2px rgba(0,0,0,0.9),
    0px 1px 2px rgba(0,0,0,0.9),
    0px -1px 2px rgba(0,0,0,0.9);
}

.note-text {
  color: #00FFFF !important;
  font-weight: bold !important;
  font-size: 13px !important;
  font-style: italic !important;
  position: relative !important;
  top: -2px !important;

  /* SHADOW HITAM PEKAT (FINAL - TIDAK DOUBLE) */
  text-shadow:
    1px 0px 2px rgba(0,0,0,0.9),
    -1px 0px 2px rgba(0,0,0,0.9),
    0px 1px 2px rgba(0,0,0,0.9),
    0px -1px 2px rgba(0,0,0,0.9);
}


/* ========================================
   🔵 FLOATING CLOSE BUTTON TIPUAN REDIRECT
=========================================== */
#floatingCloseButton {
  position: fixed;
  top: 78%;
  left: -8px;
  transform: translateY(-50%);
  height: 50px;
  background-color: rgba(255, 165, 0, 0.7);
  border-radius: 0 25px 25px 0;
  border-right: 3px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 22px;
  color: #ffffff;
  cursor: pointer;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  text-decoration: none;
  
  text-shadow:
  /* hitam padat, tajam, tidak melebar */
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

#floatingCloseButton:hover {
  color: #0000FF;
}

#floatingCloseButton .arrow {
  margin-top: 4px; 
  margin-right: 2px; 
  font-size: 20px; 
}

@media (max-width: 480px) {
  #floatingCloseButton {
    height: 40px;
	left: -4px;
    font-size: 14px; /* ukuran lebih realistis */
    padding: 0 6px;
    border-radius: 0 20px 20px 0;
    border-right: 2px solid black;
  }

  #floatingCloseButton .arrow {
    font-size: 12px;
    margin-left: 0px;
	margin-top: 1px;
  }
}

@keyframes slideInRight {
  0% { right: -150px; opacity: 0; }
  100% { right: 0; opacity: 1; }
}


/* ====================================
   🔵 FLOATING BACK BUTTON TO STEP 1
======================================= */
#floatingBackButton {
  position: fixed;
  top: 78%;
  right: -2px;
  transform: translateY(-50%);
  height: 50px;
  background-color: rgba(255, 165, 0, 0.7);
  border-radius: 25px 0 0 25px;
  border-left: 3px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #ffffff;
  cursor: pointer;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  text-decoration: none;
  
  text-shadow:
  /* hitam padat, tajam, tidak melebar */
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

#floatingBackButton:hover {
  color: #0000FF;
}

#floatingBackButton .panahback {
  margin-top: -1px; 
  margin-left: 2px; 
  font-size: 18px; 
}

@media (max-width: 480px) {
  #floatingBackButton {
    height: 40px;
    font-size: 12px; /* ukuran lebih realistis */
    padding: 0 6px;
    border-radius: 20px 0 0 20px;
    border-left: 2px solid black;
  }

  #floatingBackButton .panahback {
    font-size: 12px;
    margin-left: 2px;
  }
}

@keyframes slideInRight {
  0% { right: -150px; opacity: 0; }
  100% { right: 0; opacity: 1; }
}

/* ===========================================================================
   HIDE BACK BUTTON AWAL BUKA LANDING PAGE - OPEN KETIKAN TAMPILAN DI STEP 2
============================================================================== */
#floatingBackButton {
  display: none;
}


/* ====================================
   🔵 FLOATING NEXT BUTTON TO STEP - 2
======================================= */
#floatingNextButton {
  position: fixed;
  top: 78%;
  right: -2px;
  transform: translateY(-50%);
  height: 50px;
  background-color: rgba(255, 165, 0, 0.7);
  border-radius: 25px 0 0 25px;
  border-left: 3px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #ffffff;
  cursor: pointer;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  text-decoration: none;

  text-shadow:
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

#floatingNextButton .panahnext { 
  margin-left: 2px;
  margin-top: -1px;  
  font-size: 18px; 
}


@media (max-width: 480px) {
  #floatingNextButton {
    height: 40px;
    font-size: 12px;
    padding: 0 6px;
    border-radius: 20px 0 0 20px;
    border-left: 2px solid black;
  }

  #floatingNextButton .panahnext {
    font-size: 12px;
    margin-left: 2px;
  }
}

@keyframes slideInRight {
  0% { right: -150px; opacity: 0; }
  100% { right: 0; opacity: 1; }
}

#floatingNextButton span {
  animation: blink 0.4s infinite;
}

.floating-btn-next {
  animation:colorRun 0.5s linear infinite;
}

/* =========================================================================
   HIDE NEXT BUTTON AWAL BUKA LANDING PAGE - OPEN KETIKA TAMPILAN DI STEP 1
============================================================================ */
#floatingNextButton {
  display: none;
}


/* =======================================
   🔵 FLOATING ICON TIPUAN DI BAWAH LAYAR
========================================== */
.floating-menu{
margin: 0 0 0;  
position:fixed;
bottom:-2px;
left:50%;
transform:translateX(-50%);
display:flex;
gap: 34px;
z-index:9999;
background: linear-gradient(
  115deg,
  #6b1f45,   /* dark pink → lebih gelap */
  #832d3f,   /* merah gelap → lebih gelap */
  #7f5c00,   /* dark orange → lebih gelap */
  #c7a716,   /* kuning → lebih gelap */
  #0d4a99,   /* biru → lebih gelap */
  #007f99,   /* cyan → lebih gelap */
  #006636,   /* hijau → lebih gelap */
  #4f62c0    /* ungu kebiruan → lebih gelap */
);
padding:7px 7px;
border-radius:40px 40px 0 0;
font-weight:bold;
}

/* ITEM */
.floating-item{
display:flex;
flex-direction:column;
align-items:center;
position:relative;
}

/* ICON BULAT */
.floating-item button{
width:60px;
height:60px;
border-radius:50%;
border:6px solid #1e73ff;
background:#000;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
padding:0;
overflow:hidden;
transition:0.25s;

box-shadow: 0 0 4px #00ff55,
            0 0 8px #00ff55;
}

/* ICON HOVER */
.floating-item button:hover {
  border-color:#00ff55 !important;
  box-shadow: 0 0 10px #ff0033,
              0 0 18px #ff0033;
}

/* USER AKTIF */
.user-active{
border-color:#00ff55 !important;
}

/* ICON IMAGE */
.floating-item img{
width:100%;
height:100%;
object-fit:contain;
pointer-events:none;
}

/* LABEL */
.icon-label{
font-size:12px;
margin-top: 2px;
margin-bottom: -2px;
color:#fff;
font-weight:bold;

text-shadow:
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

/* NOTIF */
.icon-notif{
position:absolute;
left: 0px;
bottom:84px;
background: #FF0000 !important;
color: #ffffff !important;
padding:4px 4px;
border-radius:6px;
font-size:12px;
white-space:nowrap;
display:none;
font-weight:bold;

text-shadow:
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

/* ===========
   POPUP LOGIN 
============== */
#popupLogin{
position:fixed;
top: 40%;
left: 50%;
transform:translate(-50%,-50%);
background: linear-gradient(
  115deg,
  #6b1f45,
  #832d3f,
  #7f5c00,
  #c7a716,
  #0d4a99,
  #007f99,
  #006636,
  #4f62c0
);
padding:24px;
border-radius:20px;
width: 340px;
box-shadow:0 10px 35px rgba(0,0,0,0.25);
display:none;
z-index:10001;
font-family:sans-serif;
border: 7px solid #FF69B4 !important;
font-weight:bold;
color: #fff;

text-shadow:
  1px 0px 2px rgba(0,0,0,1),
  -1px 0px 2px rgba(0,0,0,1),
  0px 1px 2px rgba(0,0,0,1),
  0px -1px 2px rgba(0,0,0,1);
}

/* =========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================ */
@media (min-width: 260px) and (max-width: 780px) {
#popupLogin{
	width:280px;
 }
}
	
/* CLOSE BUTTON */
#closePopup{
position:absolute;
top:0px;
right:0px;
background:blue;
color:#fff;
padding:6px 10px;
border-radius: 12px;
border: 2px solid #FF69B4;
cursor:pointer;
font-weight:bold;
transition:0.2s;
}

#closePopup:hover{
background:red;
}

/* ==============
  = POPUP LOGIN =
================= */
#popupLogin input{
  width: 100%;
  max-width: 320px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius:8px;
  font-size:14px;
  font-weight:bold;
  box-sizing: border-box;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* WRAPPER PASSWORD HARUS FULL WIDTH */
.input-password{
  position: relative;
  width: 100%;          /* INI YANG FIX */
  max-width: 320px;
  margin: 0 auto;
}

/* INPUT PASSWORD IKUTIN FULL */
.input-password input{
  width: 100%;
  padding-right: 40px; /* ruang icon */
  box-sizing: border-box;
}

/* ICON MATA */
.toggle-password {
  position:absolute;
  right: 10px;
  top: 50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;

  /* mata normal */
  background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666">\
<path d="M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/>\
</svg>') no-repeat center;

  background-size:contain;
}

/* MATA DICORET */
.toggle-password.active{
background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\
<path d="M4 4l16 16"/>\
<path d="M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7z"/>\
<circle cx="12" cy="12" r="3"/>\
</svg>') no-repeat center;

background-size:contain;
}

/* LOGIN BUTTON */
#loginBtn{
width: 100%;
max-width: 320px; /* SAMAKAN DENGAN INPUT */
margin-top:10px;
padding:10px;
background:#1faa3e;
color:#fff;
border:none;
border-radius:8px;
cursor:pointer;
font-weight:bold;
font-size: 16px;
transition:0.2s;
display: block;
margin-left: auto;
margin-right: auto; /* BIAR CENTER */
box-sizing: border-box; /* BIAR GAK MELEBAR */

text-shadow:
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

#loginBtn:hover{
background:#8a2be2;
}

/* MESSAGE */
#loginMsg{
margin-top:10px;
color:red;
font-size:16px;
text-align:center;
font-weight:bold;
}


/* 🔥 WRAPPER (BIAR 2 DIV JADI SEJAJAR) */
.popup-actions-wrapper{
display:flex;
gap:10px;
margin-top: 10px;
margin-bottom: -15px;
background: linear-gradient(
  115deg,
  #4a1430,   /* dark pink → lebih gelap */
  #5c1f2c,   /* merah gelap → lebih gelap */
  #5b4400,   /* dark orange → lebih gelap */
  #958c10,   /* kuning → lebih gelap */
  #0a356f,   /* biru → lebih gelap */
  #005f7a,   /* cyan → lebih gelap */
  #004b26,   /* hijau → lebih gelap */
  #3a478c    /* ungu kebiruan → lebih gelap */
  );
border-radius: 30px;
}

/*===============================
  ACTION FORGOT PASSWORD BUTTONS 
=================================*/
.popup-actions-forgot-password {
display:none;
flex:1;
}

.popup-actions-forgot-password button{
width:100%;
padding: 6px;
border:none;
border-radius: 30px;
border: 2px solid #00ffff;
background:#1e73ff;
color:#fff;
cursor:pointer;
font-weight:bold;
font-size: 20px;
transition:0.2s;

text-shadow:
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

/* HOVER */
.popup-actions-forgot-password button:hover{
background:#00ff55;
}


/*======================
  ACTION SIGN UP BUTTONS 
========================*/
.popup-actions-sign-up {
display:none;
flex:1;
}

.popup-actions-sign-up button{
width:100%;
padding: 6px;
border:none;
border-radius: 30px;
border: 2px solid #00ffff;
background:#1e73ff;
color:#fff;
cursor:pointer;
font-weight:bold;
font-size: 20px;
transition:0.2s;
animation: softShake 2s infinite, textBlink 0.5s infinite;

text-shadow:
  1px 0px 2px rgba(0,0,0,0.9),
  -1px 0px 2px rgba(0,0,0,0.9),
  0px 1px 2px rgba(0,0,0,0.9),
  0px -1px 2px rgba(0,0,0,0.9);
}

/* HOVER */
.popup-actions-sign-up button:hover{
background:#00ff55;
}


/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 780px)
============================================= */
@media (min-width: 260px) and (max-width: 780px) {

.floating-menu{
gap: 18px;
padding:padding:7px 7px;
border-radius:38px 38px 0 0;
}

.floating-item button{
width:54px;
height:54px;
}

.icon-label{
margin-top: 2px;
margin-bottom: -2px;
font-size:11px;
}

.icon-notif{
bottom:84px;
}

#closePopup{
font-size:14px;
font-weight:bold;
}

#loginMsg{
margin-top:10px;
font-size:16px;
}

/* FIX AGAR 2 TOMBOL TETAP SEJAJAR */
.popup-actions-wrapper{
	margin-top: 10px;
    display:flex;
    gap:10px;
}

.popup-actions-forgot-password,
.popup-actions-sign-up{
    flex:1;
}

.popup-actions-forgot-password button,
.popup-actions-sign-up button{
    font-size:20px;
    font-weight:bold;
    width:100%;
}

/* ICON MATA */
.toggle-password {
    top: 18px !important;
    right: -10px;
 }
}