                                       <!-- ========================================================================= 
                                            🔴 CSS BY MAS JACK GANTENG (JANGAN DI UBAH KALO BELUM JAGO CODING GAES) 
                                       ========================================================================== -->


* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  min-height: 2vh;
  background: linear-gradient(
  115deg,
  #2a0a1a,   /* dark pink → lebih gelap */
  #3a0f14,   /* merah gelap → lebih gelap */
  #2f1f00,   /* dark orange → lebih gelap */
  #5a4a00,   /* kuning → lebih gelap */
  #061a3a,   /* biru → lebih gelap */
  #003a44,   /* cyan → lebih gelap */
  #002a14,   /* hijau → lebih gelap */
  #232a5a    /* ungu kebiruan → lebih gelap */
  );
  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 ISI KONTEN SELURUH KONTEN UKURAN RASIO 9:16
======================================================= */
.card {
  background: linear-gradient(
  115deg,
  #1f0714,
  #1f090b,
  #1f1004,
  #1f1700,
  #00101f,
  #001c21,
  #001c0e,
  #12121a
  );
  border: 2px solid #00FFFF !important;
  max-width: 480px;       /* card maksimal 430px */
  width: 100%;            /* tetap responsive 9:16 */
  padding: 80px 10px 0px 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 - ATURAN AREA YANG BISA DI SCROLL
================================================================ */
.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 mobile */

  padding-bottom: 10px;          /* space supaya div terakhir terlihat */
  padding-top: 5px;
  padding-left: 5px;             /* kiri/kanan cukup kecil supaya teks tidak terpotong */
  padding-right: 5px;
  background:none;              /* tidak ada background */

  /* ukuran wrapper area scroll */
  margin: 0 0 0 0;
  width: 110%;
  max-width: 500px;               /* jangan melebihi card - layar dekstop*/
  
  /* 🔥 FIX: scrollbar kanan */
  direction: ltr;

  /* 🔥 FIX tambahan biar tidak muncul celah kiri */
  position: relative;
  left: -9px;
  box-sizing: border-box;
}

/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 820px)
============================================= */
@media (min-width: 260px) and (max-width: 820px) {
	.scroll-vertical-wrapper {
		left: -10px;
		width: 106%;
        max-width: 470px;               /* jangan melebihi card - layar hp */
  }
}
	
/* ==================================================================
   🔵 SCROLL AREA - AREA YANG DI PILIH UNTUK KONTEN YANG BISA SCROLL
===================================================================== */
.scroll-area {
  display: flex;
  flex-direction: column;
  min-height: 178%;              /* pastikan scroll-area cukup panjang */
  width: 100%;                   /* penuh horizontal */
}


/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - SIZE SAMA DI SEMUA LAYAR (NO SCALE DIFFERENCE)
========================================================= */
/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

.scroll-area {
    min-height: 163%;
  }
}


/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

.scroll-area {
    min-height: 155%;
  }
}


/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

.scroll-area {
    min-height: 155%;
  }
}


/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

.scroll-area {
    min-height: 155%;
  }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

.scroll-area {
    min-height: 155%;
  }
}


/* ================================================
   🔵 SCROLLBAR BULAT (EDITAN TAMPILAN SCROLL BAR)
   👉 Mengatur tampilan scrollbar di Chrome / Edge / Safari
=================================================== */

/* Lebar scrollbar */
.scroll-vertical-wrapper::-webkit-scrollbar {
  width: 5px;
}

/* Track / jalur scrollbar (background jalur scroll) */
.scroll-vertical-wrapper::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px; /* bikin track ikut melengkung */
}

/* Thumb / bagian yang digeser */
.scroll-vertical-wrapper::-webkit-scrollbar-thumb {
  background: transparent; /* warna utama scrollbar */
  border-radius: 999px; /* bikin ujung scrollbar bulat */
}

/* Hover saat scrollbar disentuh */
.scroll-vertical-wrapper::-webkit-scrollbar-thumb:hover {
  background: #FF7F50; /* warna lebih gelap saat hover */
}

/* ======================================
   🔵 WARNA SCROLL BAR (FIREFOX SUPPORT)
========================================= */

.scroll-vertical-wrapper {
  scrollbar-width: auto;
  scrollbar-color: #FF8C00 rgba(255, 255, 255, 0.2);
}

/* =========================
   FIX WRAP (TIDAK POTONG KONTEN)
========================= */
.scroll-area,
.scroll-area * {
  max-width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: anywhere;
}
	

/* =========================================
   🔵 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:166px;
  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;
  letter-spacing: 0.5px;
  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 820px)
============================================= */
@media (min-width: 260px) and (max-width: 820px) {
  .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: 0px 8px 0px 10px;
  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;
}

.location-text {
  font-size: 14px;
  color: #fff;
  margin-bottom: 4px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  text-align: left;
  white-space: nowrap;
  letter-spacing: 0.5px;
  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;
  letter-spacing: 0.5px;
  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: 0px 10px 10px 0px;
  overflow-y: auto;
  max-height: 144px !important;
  
  /* scrollbar di kiri */
  direction: rtl;
}

.location-item {
  padding: 4px 8px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  border-bottom: 1px solid #fff;
  letter-spacing: 0.5px;
}

.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); }
}

/* Lebar scrollbar */
.location-dropdown::-webkit-scrollbar {
  width: 5px;
}

/* Track / jalur scrollbar (background jalur scroll) */
.location-dropdown::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px; /* bikin track ikut melengkung */
}

/* Thumb / bagian yang digeser */
.location-dropdown::-webkit-scrollbar-thumb {
  background: transparent; /* warna utama scrollbar */
  border-radius: 999px; /* bikin ujung scrollbar bulat */
}

/* Hover saat scrollbar disentuh */
.location-dropdown::-webkit-scrollbar-thumb:hover {
  background: #FF7F50; /* warna lebih gelap saat hover */
}

/* ======================================
   🔵 WARNA SCROLL BAR (FIREFOX SUPPORT)
========================================= */

.location-dropdown {
  scrollbar-width: auto;
  scrollbar-color: #00FFFF rgba(255, 255, 255, 0.2);
}


/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 1024px)
============================================= */
@media (min-width: 260px) and (max-width: 1024px) {
  .location-module {
    right: 0px !important;
    top: 0px;
	padding: 4px 18px;
  }
  .location-btn {
    padding: 2px 8px !important;
  }
  .location-item {
  padding: 6px 4px !important;
  }
}


/* ================================================
   🔵 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 820px)
============================================= */
@media (min-width: 260px) and (max-width: 820px) {

  .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: -6px;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.profile-img.active {
  opacity: 1;
}

/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 820px)
============================================= */
@media (min-width: 260px) and (max-width: 820px) {
.profile-holder {
  width: 160px !important;
  height: 160px !important;
}

.profile-img {
  width: 160px !important;
  height: 160px !important;
  top: -35px !important;
  left: -8px !important;
 }
}


.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;
  letter-spacing: 0.5px;
}

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:colorRun 1s linear infinite;
}

/* 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 820px)
============================================= */
@media (min-width: 260px) and (max-width: 820px) {
 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;
  letter-spacing: 0.5px;
  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;
  
  /* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px rgba(0,0,0,0.9);
}

/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - SIZE SAMA DI SEMUA LAYAR (NO SCALE DIFFERENCE)
========================================================= */
/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

h2 {
  font-size: 11px !important;
 }
}


/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

h2 {
  font-size: 12px !important;
 }
}


/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

h2 {
  font-size: 12px !important;
 }
}


/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

h2 {
  font-size: 12px !important;
 }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

h2 {
  font-size: 12px !important;
 }
}


/* ==================================
   🔵 APPLY TITTLE - INTRUKSI ARAHAN
===================================== */
.apply-title { 
 text-align: center; 
 font-size: 15px;
 font-weight: bold;
 color: #FFA500 !important;
 margin-top: -6px; 
 margin-bottom: -13px;
}


/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - SIZE SAMA DI SEMUA LAYAR (NO SCALE DIFFERENCE)
========================================================= */
/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

.apply-title {
 font-size: 14px !important;
 margin-top: -3px; 
 margin-bottom: -13px; 
 }
}


/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

.apply-title {
 font-size: 16px !important;
 margin-top: -3px; 
 margin-bottom: -13px; 
 }
}


/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

.apply-title {
 font-size: 16px !important;
 margin-top: -3px; 
 margin-bottom: -13px; 
 }
}


/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

.apply-title {
 font-size: 16px !important;
 margin-top: -3px; 
 margin-bottom: -13px; 
 }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

.apply-title {
 font-size: 16px !important;
 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: 15px;
  letter-spacing: 1px;
  border: 2px solid #00FFFF;
  border-radius: 18px;
  padding: 1px 4px;
	
  /* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px rgba(0,0,0,0.9);
}

/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 820px)
============================================= */
@media (min-width: 260px) and (max-width: 820px) {
.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;
  padding-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  border: 2px solid #FF8C00;
  flex-shrink: 0;
  
  margin-left: -1px ;
  margin-top: 2px !important;
  margin-bottom: 0px !important;
  
  /* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px rgba(0,0,0,0.9);
}

/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - SIZE SAMA DI SEMUA LAYAR (NO SCALE DIFFERENCE)
========================================================= */
/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

.step-num {
 margin-left: -1px !important;
 margin-top: 2px !important;
 margin-bottom: 0px !important;
 padding-top: 1px !important;
 padding-left: 1px !important;
 padding-right: 1px !important;
 }
}


/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

.step-num {
 margin-left: -1px !important;
 margin-top: 2px !important;
 margin-bottom: 0px !important;
 padding-top: 1px !important;
 padding-left: 1px !important;
 padding-right: 1px !important;
 }
}


/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

.step-num {
 margin-left: -1px !important;
 margin-top: 2px !important;
 margin-bottom: 0px !important;
 padding-top: 1px !important;
 padding-left: 1px !important;
 padding-right: 1px !important;
 }
}


/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

.step-num {
 margin-left: -1px !important;
 margin-top: 2px !important;
 margin-bottom: 0px !important;
 padding-top: 1px !important;
 padding-left: 1px !important;
 padding-right: 1px !important;
 }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

.step-num {
 margin-left: -1px !important;
 margin-top: 2px !important;
 margin-bottom: 0px !important;
 padding-top: 1px !important;
 padding-left: 1px !important;
 padding-right: 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;
}


/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - SIZE SAMA DI SEMUA LAYAR (NO SCALE DIFFERENCE)
========================================================= */
/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

.bio {
  font-size: 13px !important;
 }

.bio-main {
  font-weight: bold;
 }
}

/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

.bio {
  font-size: 14px !important;
 }

.bio-main {
  font-weight: bold;
 }
}

/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

.bio {
  font-size: 14px !important;
 }

.bio-main {
  font-weight: bold;
 }
}

/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

.bio {
  font-size: 14px !important;
 }

.bio-main {
  font-weight: bold;
 }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

.bio {
  font-size: 14px !important;
 }

.bio-main {
  font-weight: bold;
 }
}


/* =========================================================
    🔵 PANAH  ARROW DOWN 1 (DI BAWAH BIO MAIN - KEDIP ELEGANT
============================================================= */
.arrow-down {
  display: flex;
  justify-content: center;
  gap: 1px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: -35px;
  position: relative;
  top: -55px;
  letter-spacing: 1px;
}

.arrow-down span {
  display: inline-block;
  color: #00FF00 !important;
  animation: blink 0.5s infinite;
}

/* ==============================================================
   🔵 TEKS ARROW DOWN 1 - nth-child(11) 11 ADALAH JUMLAH PANAH
================================================================= */
.arrow-down span:nth-child(11) {
  font-size: 14px;
  letter-spacing: 0.5px;
  animation-duration: 0.6s;
}

@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}


/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - SIZE SAMA DI SEMUA LAYAR (NO SCALE DIFFERENCE)
========================================================= */
/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

.arrow-down {
  font-size: 12px;
}

.arrow-down span:nth-child(11) {
  font-size: 13px;
 }
}

/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

.arrow-down {
  font-size: 12px;
}

.arrow-down span:nth-child(11) {
  font-size: 13px;
 }
}

/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

.arrow-down {
  font-size: 12px;
}

.arrow-down span:nth-child(11) {
  font-size: 13px;
 }
}

/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

.arrow-down {
  font-size: 12px;
}

.arrow-down span:nth-child(11) {
  font-size: 13px;
 }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

.arrow-down {
  font-size: 12px;
}

.arrow-down span:nth-child(11) {
  font-size: 13px;
 }
}


/* ===================================
   🔵 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;
  letter-spacing: 1px;
  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 3px #00ff55,
              0 0 6px #00ff55;
  animation: softShake 2s infinite, textBlink 0.5s infinite;
  
/* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px 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 */
}

.btn-primary {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* ===== LABEL "Step - 1" WARNA HIJAU ===== */
.btn-primary .alt-label1 {
  position: absolute;
  right: 10px;
  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;
  
  /* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px rgba(0,0,0,0.9);
}

/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - SIZE SAMA DI SEMUA LAYAR (NO SCALE DIFFERENCE)
========================================================= */
/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

.btn-secondary .alt-label1 {
  right: 8px !important;
  top: 4px;
 }
}


/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

.btn-secondary .alt-label1 {
  right: 8px !important;
  top: 4px;
 }
}


/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

.btn-secondary .alt-label1 {
  right: 8px !important;
  top: 4px;
 }
}


/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

.btn-secondary .alt-label1 {
  right: 8px !important;
  top: 4px;
 }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

.btn-secondary .alt-label1 {
  right: 8px !important;
  top: 4px;
 }
}


/* ==============================
   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;
  letter-spacing: 1px;
  
  box-sizing: border-box;
  display: block;
  
  box-shadow: 0 0 6px #00ff55,
            0 0 10px #00ff55;

    /* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px rgba(0,0,0,0.9);
}

.text-step-dua span {
  font-size: 15px;
  font-weight: bold;
}

/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - SIZE SAMA DI SEMUA LAYAR (NO SCALE DIFFERENCE)
========================================================= */
/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

.text-step-dua span {
  font-size: 14px;
 }
}


/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

.text-step-dua span {
  font-size: 14px;
 }
}


/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

.text-step-dua span {
  font-size: 14px;
 }
}


/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

.text-step-dua span {
  font-size: 14px;
 }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

.text-step-dua span {
  font-size: 14px;
 }
}


/* =====================================
    🔵 TEKS ARROW DOWN 2 -KEDIP ELEGANT
======================================== */
.arrow-down-2 {
  display: flex;
  justify-content: center;
  gap: 1px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.5px;
  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;
  letter-spacing: 0.5px;
  color: #00FF00 !important;
  animation: blink 0.5s infinite;
}

/* ==============================================================
   🔵 PANAH  ARROW DOWN 2 - nth-child(11) 11 ADALAH JUMLAH PANAH
================================================================= */
.arrow-down-2 span:nth-child(11) {
  font-size: 14px;
  letter-spacing: 0.5px;
  animation-duration: 0.6s;
}

/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - SIZE SAMA DI SEMUA LAYAR (NO SCALE DIFFERENCE)
========================================================= */
/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

.arrow-down-2 {
  font-size: 12px;
}

.arrow-down-2 span:nth-child(11) {
  font-size: 13px;
 }
}

/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

.arrow-down-2 {
  font-size: 12px;
}

.arrow-down-2 span:nth-child(11) {
  font-size: 13px;
 }
}

/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

.arrow-down-2 {
  font-size: 12px;
}

.arrow-down-2 span:nth-child(11) {
  font-size: 13px;
 }
}

/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

.arrow-down-2 {
  font-size: 12px;
}

.arrow-down-2 span:nth-child(11) {
  font-size: 13px;
 }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

.arrow-down-2 {
  font-size: 12px;
}

.arrow-down-2 span:nth-child(11) {
  font-size: 13px;
 }
}


/* ==== 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 3px #00ff55,
              0 0 6px #00ff55;

  /* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px 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 */
}

.btn-secondary {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* ===== LABEL "Step - 2" WARNA HIJAU ===== */
.btn-secondary .alt-label2 {
  position: absolute;
  right: 10px;
  top: 4px;
  background: #00FF00 !important;
  color: #ffffff !important;
  padding: 2px 2px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
  border: 3px solid #FFA500 !important;
  
  /* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px rgba(0,0,0,0.9);
}

/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - SIZE SAMA DI SEMUA LAYAR (NO SCALE DIFFERENCE)
========================================================= */
/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

.btn-secondary .alt-label2 {
  right: 8px !important;
  top: 4px;
 }
}


/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

.btn-secondary .alt-label2 {
  right: 8px !important;
  top: 4px;
 }
}


/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

.btn-secondary .alt-label2 {
  right: 8px !important;
  top: 4px;
 }
}


/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

.btn-secondary .alt-label2 {
  right: 8px !important;
  top: 4px;
 }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

.btn-secondary .alt-label2 {
  right: 8px !important;
  top: 4px;
 }
}


/* ========================
     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 820px)
============================================= */
@media (min-width: 260px) and (max-width: 820px) {

.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: 155px;
  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: 150px;
  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: 65px;  /* 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: 5px;
}

/* RATING + BINTANG (atas) */
.infoRow-rating-score {
  font-size: 14px;
  display: flex;
  align-items: center;   /* angka dan bintang sejajar vertikal */
  gap: 3px;              /* jarak angka dan bintang */
  color: #fff;
  font-weight: bold;
  margin-top: 5px;
  margin-left: -5px;
  margin-right: 0px;
  margin-bottom: 0px;
  line-height: 1;
  white-space: nowrap;
}

/* ICON BINTANG */
.infoRow-star {
  width: 14px;  /* ubah sesuai besar */
  height: auto;
  margin-bottom: 1px !important;
}

/* TAGLINE / REVIEW (bawah rating) */
.infoRow-rating-review {
  font-size: 12px;   /* 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 */
}


/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 820px)
============================================= */
@media (min-width: 260px) and (max-width: 820px) {

/* KIRI (Play Store) */
.infoRow-rating-left {
  right: 145px;
  gap: 3px;
}

/* KANAN (App Store) */
.infoRow-rating-right {
  left: 140px;
  gap: 3px;
}

/* ICON STORE (Play / App) */
.infoRow-rating-play {
  width: 55px;  /* ubah sesuai besar icon */
}

/* RATING + BINTANG (atas) */
.infoRow-rating-score {
  margin-top: 3px;
  font-size: 12px;
  margin-left: -3px;
}

/* ICON BINTANG */
.infoRow-star {
  width: 12px;  /* ubah sesuai besar */
  margin-bottom: 1.5px !important;
}

/* TAGLINE / REVIEW (bawah rating) */
.infoRow-rating-review {
  font-size: 10px;   /* bisa diperbesar tanpa acak */
  }
}


/* ==================================================
    🔵 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: 0px;
  transform: translateY(-50%) translateX(-100%);
  padding: 6px 30px;
  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;
  letter-spacing: 0.5px;

  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);

  /* FIX HIGHLIGHT / TAP EFFECT */
  -webkit-tap-highlight-color: transparent;
  outline: none;
  box-shadow: none;
  user-select: none;
  -webkit-user-select: none;
}

/* BLOCK FOCUS / ACTIVE */
.infoRow-btn-about:focus,
.infoRow-btn-about:active {
  outline: none !important;
  box-shadow: none !important;
}

.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: 0px;
  transform: translateY(-50%) translateX(100%);
  padding: 6px 25px;
  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: 8px;
  transition: 0.25s;
  letter-spacing: 0.5px;

  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);

  /* FIX HIGHLIGHT / TAP EFFECT */
  -webkit-tap-highlight-color: transparent;
  outline: none;
  box-shadow: none;
  user-select: none;
  -webkit-user-select: none;
}

/* BLOCK FOCUS / ACTIVE */
.infoRow-btn-company:focus,
.infoRow-btn-company:active {
  outline: none !important;
  box-shadow: none !important;
}

.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);
}


/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 820px)
============================================= */
@media (min-width: 260px) and (max-width: 820px) {

.infoRow-btn-about {
	padding: 6px 20px;
	font-size: 12px;
	gap: 4px;
}

.infoRow-btn-company {
	padding: 6px 12px;
	font-size: 12px;
	gap: 4px;
  }
}


/* =====================================================
    🔵          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: 15px; /* Geser popup ke atas */
  z-index: 999999;
}

.infoRow-popup-box-about {
  width: 94%;
  max-width: 460px;
  max-height: 95vh;
  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: 4px solid #00ffff;
  border-radius: 20px;
  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: 0 5px;
}

/* Teks About */
.infoRow-popup-box-about .infoRow-popup-text {
  padding: 5px 5px;
  margin-top: 35px;
  margin-right: 0px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: left !important;
  background:#1A1A1A;
  border-radius: 10px;
  letter-spacing: 1px;
  
  /* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px 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: 2px 8px;
  font-size: 28px;
  font-weight: bold;
  border-radius: 50px;
  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: 15px; /* Geser popup ke bawah agar gambar tidak terpotong */
  z-index: 999999;
}

.infoRow-popup-box-company {
  width: 94%;
  max-width: 460px;
  max-height: 95vh;
  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: 4px solid #00ffff;
  border-radius: 20px;
  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: 5px 5px;
}

/* Gambar atas Company */
.infoRow-popup-box-company .infoRow-popup-img {
  display: block;
  left: 45px !important;
  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;
  margin-bottom: -15px;  /* jarak ke teks */
  flex-shrink: 0;
}

/* Teks di bawah gambar */
.infoRow-popup-box-company .infoRow-popup-text {
  padding: 10px 5px;
  margin-top: 35px;
  margin-right: 0px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: left !important;
  background:#1A1A1A;
  border-radius: 10px;
  letter-spacing: 1px;
  
  /* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px 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: 2px 8px;
  font-size: 28px;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  z-index: 10;
  border: 1px solid #00ffff;
}

.infoRow-close-btn:hover{
background:#1e73ff;
}


/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - SIZE SAMA DI SEMUA LAYAR (NO SCALE DIFFERENCE)
========================================================= */
/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

/* BOX */
  .infoRow-popup-box-about,
  .infoRow-popup-box-company {
    width: 94%;
    max-width: 420px;
    max-height: 80vh; /* 🔥 biar tidak kepotong bawah */
    border-radius: 15px;
}

.infoRow-popup-box-company .infoRow-popup-img {
  left: 45px !important;
  }
}


/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

/* BOX */
  .infoRow-popup-box-about,
  .infoRow-popup-box-company {
    width: 94%;
    max-width: 420px;
    max-height: 80vh; /* 🔥 biar tidak kepotong bawah */
    border-radius: 15px;
}

.infoRow-popup-box-company .infoRow-popup-img {
  left: 45px !important;
  }
}


/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

/* BOX */
  .infoRow-popup-box-about,
  .infoRow-popup-box-company {
    width: 94%;
    max-width: 424px;
    max-height: 84vh; /* 🔥 biar tidak kepotong bawah */
    border-radius: 15px;
}

.infoRow-popup-box-company .infoRow-popup-img {
  left: 45px !important;
  }
}


/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

/* BOX */
  .infoRow-popup-box-about,
  .infoRow-popup-box-company {
    width: 94%;
    max-width: 425px;
    max-height: 86vh; /* 🔥 biar tidak kepotong bawah */
    border-radius: 15px;
}

.infoRow-popup-box-company .infoRow-popup-img {
  left: 45px !important;
  }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

/* BOX */
  .infoRow-popup-box-about,
  .infoRow-popup-box-company {
    width: 94%;
    max-width: 426px;
    max-height: 86vh; /* 🔥 biar tidak kepotong bawah */
    border-radius: 15px;
}

.infoRow-popup-box-company .infoRow-popup-img {
  left: 45px !important;
  }
}


/* ===================================================
   🔵 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: 5px auto !important;
  border-radius: 40px;
  cursor: pointer;
  font-size: 25px;
  font-weight: bold;
  display: block;
  animation: softShake 1s infinite, textBlink 0.5s infinite;
  
  /* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px rgba(0,0,0,0.9);
}
}


.infoRow-sign-btn {
  -webkit-tap-highlight-color: transparent;
  outline: none;
 }
  
.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 - 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 25px 25px !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: 16px !important;
  font-style: italic !important;  
  position: relative !important;
  top: -2px !important;
  letter-spacing: 1px;

  /* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px rgba(0,0,0,0.9);
}

.note-text {
  color: #00FFFF !important;
  font-weight: bold !important;
  font-size: 16px !important;
  font-style: italic !important;
  position: relative !important;
  top: -2px !important;
  letter-spacing: 1px;

  /* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px rgba(0,0,0,0.9);
}

/* ==========================================
    🔵 RESPONSIVE (HP 260px → TABLET 820px)
============================================= */
@media (min-width: 260px) and (max-width: 820px) {

.note-div {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
}

.note-label {
    font-size: 13px !important;
}

.note-text {
    font-size: 13px !important;
  }
}


/* ========================================
   🔵 FLOATING CLOSE BUTTON TIPUAN REDIRECT
=========================================== */
#floatingCloseButton {
  position: fixed;
  gap: 1px;
  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: 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);
}

#floatingCloseButton:hover {
  color: #0000FF;
}

#floatingCloseButton .arrow {
  margin-top: 4px; 
  margin-right: 2px; 
  font-size: 20px; 
}

#floatingCloseButton {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - SIZE SAMA DI SEMUA LAYAR (NO SCALE DIFFERENCE)
========================================================= */
/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

#floatingCloseButton {
    height: 40px;
	left: -4px;
    font-size: 11px; /* 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;
  }
}


/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

#floatingCloseButton {
    height: 40px;
	left: -4px;
    font-size: 11px; /* 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;
  }
}


/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

#floatingCloseButton {
    height: 40px;
	left: -4px;
    font-size: 11px; /* 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;
  }
}


/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

#floatingCloseButton {
    height: 40px;
	left: -4px;
    font-size: 11px; /* 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;
  }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

#floatingCloseButton {
    height: 40px;
	left: -4px;
    font-size: 11px; /* 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;
  }
}


/* ====================================
   🔵 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: 26px;
  color: #ffffff;
  cursor: pointer;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  text-decoration: none;
  
  /* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px rgba(0,0,0,0.9);
}

#floatingBackButton:hover {
  color: #0000FF;
}

#floatingBackButton .panahback {
  margin-top: -1px; 
  margin-left: 2px; 
  font-size: 18px; 
}

#floatingBackButton span {
  animation: blink 0.4s infinite;
}

#floatingBackButton {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}


/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - SIZE SAMA DI SEMUA LAYAR (NO SCALE DIFFERENCE)
========================================================= */
/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

#floatingBackButton {
    height: 40px !important;
    font-size: 13px !important; /* ukuran lebih realistis */
    padding: 0 6px;
    border-radius: 20px 0 0 20px;
    border-left: 2px solid black;
  }

  #floatingBackButton .panahback {
    font-size: 11px !important;
    margin-left: 2px !important;
	margin-top: -1.4px !important;
  }
}


/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

#floatingBackButton {
    height: 40px !important;
    font-size: 13px !important; /* ukuran lebih realistis */
    padding: 0 6px;
    border-radius: 20px 0 0 20px;
    border-left: 2px solid black;
  }

  #floatingBackButton .panahback {
    font-size: 11px !important;
    margin-left: 2px!important;
	margin-top: 0px !important;
  }
}


/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

#floatingBackButton {
    height: 40px !important;
    font-size: 13px !important; /* ukuran lebih realistis */
    padding: 0 6px;
    border-radius: 20px 0 0 20px;
    border-left: 2px solid black;
  }

  #floatingBackButton .panahback {
    font-size: 11px !important;
    margin-left: 2px !important;
	margin-top: 0px !important;
  }
}


/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

#floatingBackButton {
    height: 40px !important;
    font-size: 13px !important; /* ukuran lebih realistis */
    padding: 0 6px;
    border-radius: 20px 0 0 20px;
    border-left: 2px solid black;
  }

  #floatingBackButton .panahback {
    font-size: 11px !important;
    margin-left: 2px !important;
	margin-top: 0px !important;
  }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

#floatingBackButton {
    height: 40px !important;
    font-size: 13px !important; /* ukuran lebih realistis */
    padding: 0 6px;
    border-radius: 20px 0 0 20px;
    border-left: 2px solid black;
  }

  #floatingBackButton .panahback {
    font-size: 11px !important;
    margin-left: 2px !important;
	margin-top: 0px !important;
  }
}


/* ===========================================================================
   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: 26px;
  color: #ffffff;
  cursor: pointer;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  text-decoration: none;
  
  /* Shadow Hitam Elegant (LEBIH JELAS & TEBAL) */
  text-shadow:
  1px 0px 3px rgba(0,0,0,0.95),
  -1px 0px 3px rgba(0,0,0,0.95),
  0px 1px 3px rgba(0,0,0,0.95),
  0px -1px 3px rgba(0,0,0,0.95),
  0px 0px 6px rgba(0,0,0,0.9);
}

#floatingNextButton span {
  animation: blink 0.4s infinite;
}

#floatingNextButton .panahnext { 
  margin-left: 2px;
  margin-top: -1px;  
  font-size: 18px; 
}

#floatingNextButton {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* =================================================================================
    🔵 ANIMASI GESER DARI KANAN KE DALAM & COLOR RUN (UNTUK FLOATING BACK DAN NEXT)
==================================================================================== */
#floatingBackButton {
  animation: colorRun 1.8s linear infinite, slideInRight 0.5s ease-out !important;
}

.floating-btn-next {
  animation: colorRun 0.4s linear infinite, slideInRight 0.5s ease-out !important;
}

@keyframes slideInRight {
  0% {
    transform: translate(150px, -50%);
    opacity: 0;
  }
  100% {
    transform: translate(0, -50%);
    opacity: 1;
  }
}

/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - SIZE SAMA DI SEMUA LAYAR (NO SCALE DIFFERENCE)
========================================================= */
/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

#floatingNextButton {
    height: 40px;
    font-size: 13px;
    padding: 0 6px;
    border-radius: 20px 0 0 20px;
    border-left: 2px solid black;
  }

  #floatingNextButton .panahnext {
    font-size: 11px;
    margin-left: 2px;
	margin-top: 0px !important;
  }
}


/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

#floatingNextButton {
    height: 40px;
    font-size: 13px;
    padding: 0 6px;
    border-radius: 20px 0 0 20px;
    border-left: 2px solid black;
  }

  #floatingNextButton .panahnext {
    font-size: 11px;
    margin-left: 2px;
	margin-top: 0px !important;
  }
}


/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

#floatingNextButton {
    height: 40px;
    font-size: 13px;
    padding: 0 6px;
    border-radius: 20px 0 0 20px;
    border-left: 2px solid black;
  }

  #floatingNextButton .panahnext {
    font-size: 11px;
    margin-left: 2px;
	margin-top: 0px !important;
  }
}


/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

#floatingNextButton {
    height: 40px;
    font-size: 13px;
    padding: 0 6px;
    border-radius: 20px 0 0 20px;
    border-left: 2px solid black;
  }

  #floatingNextButton .panahnext {
    font-size: 11px;
    margin-left: 2px;
	margin-top: 0px !important;
  }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

#floatingNextButton {
    height: 40px;
    font-size: 13px;
    padding: 0 6px;
    border-radius: 20px 0 0 20px;
    border-left: 2px solid black;
  }

  #floatingNextButton .panahnext {
    font-size: 11px;
    margin-left: 2px;
	margin-top: 0px !important;
  }
}


/* =========================================================================
   HIDE NEXT BUTTON AWAL BUKA LANDING PAGE - OPEN KETIKA TAMPILAN DI STEP 1
============================================================================ */
#floatingNextButton {
  display: none;
}