
                                       <!-- ========================================================================= 
                                            🔴 CSS BY MAS JACK GANTENG (JANGAN DI UBAH KALO BELUM JAGO CODING GAES) 
                                       ========================================================================== -->

*{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
html,body{margin:0;padding:0;height:100%}
body{
  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;
  justify-content:center;
  align-items:center;
}
/* ===== BASE PERFORMANCE ===== */
html{
  scroll-behavior:smooth;
}

body{
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeSpeed;
}

/* ===== DELAY ANIMATION START ===== */
body:not(.loaded) *{
  transition:none !important;
}

/* ===== GPU PERFORMANCE ===== */
.btn,
.try-link,
.popup-btn,
.ads-btn,
.arrow,
.marquee-track,
.title-left .img-wrap::after{
  will-change:transform,opacity;
  backface-visibility:hidden;
}


/* ============================================================= STYLE CSS FULL TEMA LANDING PAGE UI VERSION ======================================================== */


/* ===========================================================
   VIEWPORT TAMPILAN TEMA RASIO 9:16 SANGAT RESPONSIVE MOBILE 
============================================================== */
.viewport{
  top:1px;
  bottom:1px;
  aspect-ratio:9/16;
  height:100svh;
  max-width:430px;
  width:100%;
  background:#000;
  border-radius: 0 0 5px 5px !important;
  overflow:hidden;
  border: 2px solid #ffa500;
  display:flex;
  flex-direction:column;
  position:relative;
}


/* ========================= POPUP SAMBUTAN ========================= */
.popup-box-open-lp{
  width:100%;
  max-width:380px;
  height:89vh;
  background: linear-gradient(
  115deg,
  #3a0f28,
  #3a1418,
  #3a1f0a,
  #3a2a00,
  #00264d,
  #00363d,
  #00361f,
  #23233a
  );
  border:4px solid #00eaff; /* cyan modern UI */
  border-radius:20px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}


/* =========================================================
       🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
========================================================= */

/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

  .popup-box-open-lp{
    height:82vh !important;
  }
}

/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

  .popup-box-open-lp{
    height:82vh !important;
  }
}

/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

  .popup-box-open-lp{
    height:82vh !important;
  }
}

/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

  .popup-box-open-lp{
    height:82vh !important;
  }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

  .popup-box-open-lp{
    height:82vh !important;
  }
}


/* CLOSE X */
.popup-open-close{
  position:absolute;
  top:0;
  right:0;
  padding:10px 8px;
  font-size:15px;
  font-weight:bold;
  background:#ff0033;
  color:#fff;
  border:1px solid #00eaff; /* cyan modern UI */
  border-bottom-left-radius:12px;
  border-top-right-radius:12px;
  cursor:pointer;
  z-index:10;
  
  /* Shadow Hitam Elegant (LEBIH JELAS, LEBIH TEBAL, LEBIH TERDEFINISI) */
  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

.popup-open-close:hover {
  background: #004aad !important;
  box-shadow:0 0 6px #00E5FF, 0 0 12px #00E5FF !important;
}

/* HEADER SAMBUTAN */
.sambutan-header{
  width:100%;
  padding:10px 8px;
  background: linear-gradient(
  115deg,
  #8a3a65 0%,
  #94406b 8%,
  #9e4670 16%,
  #8a4444 24%,
  #945048 32%,
  #9e5c2d 40%,
  #8a5a2a 48%,
  #9a6a20 56%,
  #a87a18 64%,
  #1a5fb3 72%,
  #1f6fc0 78%,
  #2380c8 82%,
  #1a7f75 86%,
  #1a7f5f 90%,
  #1a7f4f 94%,
  #4a4a8a 100%
  );
  color:white;
  border-bottom:1px solid #00eaff; /* cyan modern UI */
  font-weight:bold;
  font-size:16px;
  margin-bottom:6px;
  letter-spacing: 0.5px;
  
  /* Shadow Hitam Elegant (LEBIH JELAS, LEBIH TEBAL, LEBIH TERDEFINISI) */
  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}


/* ========================= PROFILE BOX ========================= */
.popup-open-lp-profile{
  display:flex;
  gap:10px;
  border:4px solid #ff8c00; /* orange modern */
  background:#5a3a1a;
  padding:10px;
  border-radius:50px;
  margin:5px;

  /* ✔ FIX: supaya nama + icon + tagline naik ke atas */
  align-items:flex-start;
}

/* FOTO WRAPPER */
.popup-open-lp-img-wrap{
  position:relative;
  display:inline-block;
  border-radius:50%;
  overflow:hidden;

  border:3px solid #ffa500; /* pindah ke wrapper */
}

/* FOTO */
.popup-open-lp-img-wrap img{
  width:70px;
  height:70px;
  border-radius:50%;

  object-fit:contain;
  object-position:center;

  background:#000;
  flex-shrink:0;
  display:block;
}

/* SLASH EFFECT */
.popup-open-lp-img-wrap::after{
  content:"";
  position:absolute;
  top:-20%; 
  left:-120%;
  width:20%; 
  height:140%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.25) 35%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0.25) 65%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-25deg);
  animation:borderSlash 2s linear infinite;
  pointer-events:none;
}

@keyframes borderSlash{
  0%{ left:-120%; }
  100%{ left:150%; }
}

/* SIDEBAR TEKS */
.popup-open-lp-info{
  display:flex;
  flex-direction:column;
}

/* NAMA */
.popup-open-lp-name{
  font-weight:bold;
  font-size:20px;
  color:#fff;
  line-height:1.2;
  animation: glowRun 3s linear infinite !important;

    /* Shadow Hitam Elegant (LEBIH JELAS, LEBIH TEBAL, LEBIH TERDEFINISI) */
    text-shadow:
    1px 0px 4px rgba(0,0,0,1),
    -1px 0px 4px rgba(0,0,0,1),
    0px 1px 4px rgba(0,0,0,1),
    0px -1px 4px rgba(0,0,0,1),
    0px 0px 8px rgba(0,0,0,1) !important;
}

/* ICON VERIFIED — DIATUR DARI CSS */
.popup-open-lp-name::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;
  background-repeat: no-repeat;

  /* 👉 rata tengah dengan teks */
  vertical-align: middle;

  margin-left:0;

  /* Glow */
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
}

/* TAGLINE */
.popup-open-lp-tagline{
  font-size:13px;
  font-weight:bold;
  color:#fff;
  margin-top:3px;
  line-height:1.2;

  background: linear-gradient(90deg,
      #ffffff 0%,
      #00ffff 50%,
      #ffffff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: cyanRun 2s linear infinite !important;
}


/* ========================= TEXT AREA ========================= */
.sambutan-text{
  flex:1;
  padding:0px 10px;
  background:#1A1A1A;
  color:#fff;
  font-size:16px;
  font-weight:bold;
  overflow-y:auto;
  margin:0px 6px 0px !important;
  border-radius:10px;
  letter-spacing: 1px;
  
    /* Shadow Hitam Elegant (Versi Tipis & Halus) */
    text-shadow:
    0.5px 0px 2px rgba(0,0,0,0.7),
    -0.5px 0px 2px rgba(0,0,0,0.7),
    0px 0.5px 2px rgba(0,0,0,0.7),
    0px -0.5px 2px rgba(0,0,0,0.7),
    0px 0px 3px rgba(0,0,0,0.6) !important;

  /* FIX WRAPPING */
  white-space:pre-wrap;
  word-wrap:break-word;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.4;
}


/* =================================
   SCROLLBAR DESIGN UI PROFESSIONAL
==================================== */

.sambutan-text::-webkit-scrollbar {
  width: 2px !important;
}

/* 🔥 TRACK (jalur scroll) hitam transparan */
.sambutan-text::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
}

/* 🔥 THUMB (bagian yang digeser) warna ORANGE */
.sambutan-text::-webkit-scrollbar-thumb {
  background: #ff8c00; /* oren */
  border-radius: 999px;
}

/* 🔥 hover lebih terang */
.sambutan-text::-webkit-scrollbar-thumb:hover {
  background: #ffa733 !important;
}

/* Firefox */
.sambutan-text {
  scrollbar-width: auto;
  scrollbar-color: #ff8c00 rgba(0, 0, 0, 0.35);
}


/* ========================= BUTTONS ========================= */
.sambutan-btn-wrap{
  display:flex;
  gap:10px;
  padding:4px 12px;
}


/* ================ TOMBOL SKIP ================ */
.btn-skip{
  flex:1;
  background:#6b6b6b;
  color:white;
  border:4px solid #ff8c00; /* orange modern */
  padding:10px 5px !important;
  border-radius:50px;
  font-weight:bold;
  font-size:16px;
  cursor:pointer;
  letter-spacing: 1px;
  transition:0.25s ease;
  
  /* Shadow Hitam Elegant (LEBIH JELAS, LEBIH TEBAL, LEBIH TERDEFINISI) */
    text-shadow:
    1px 0px 4px rgba(0,0,0,1),
    -1px 0px 4px rgba(0,0,0,1),
    0px 1px 4px rgba(0,0,0,1),
    0px -1px 4px rgba(0,0,0,1),
    0px 0px 8px rgba(0,0,0,1) !important;
}
.btn-skip:hover{ 
  background:#F08080 !important;
  border:4px solid #39ff14 !important; /* hijau menyala */ 
  box-shadow: 0 0 3px #00ff00, 
              0 0 6px #00ff00 !important;
 }


/* ============== TOMBOL JOIN AFFILIATE ============== */
.btn-join-affiliate{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px; /* Jarak icon Dan Teks */ 

  background:#0050FF;
  color:white;
  border:4px solid #ff8c00;
  padding:10px 5px !important;
  border-radius:50px;
  font-weight:bold;
  font-size:16px;
  cursor:pointer;
  letter-spacing:1px;
  transition:0.25s ease;
  animation:shakeSoft 1s ease-in-out infinite, bgColorChange 10s linear infinite;

  text-shadow:
    1px 0px 4px rgba(0,0,0,1),
    -1px 0px 4px rgba(0,0,0,1),
    0px 1px 4px rgba(0,0,0,1),
    0px -1px 4px rgba(0,0,0,1),
    0px 0px 8px rgba(0,0,0,1) !important;
}

/* wrapper icon */
.btn-join-affiliate .icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  flex-shrink:0;
  transition:0.25s ease;
  animation: blink 0.6s infinite;
}

/* IMAGE ICON */
.btn-join-affiliate .icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition:0.25s ease;
}

/* teks */
.btn-join-affiliate span{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* hover tombol */
.btn-join-affiliate:hover{ 
  border:4px solid #39ff14 !important;
  box-shadow:0 0 3px #00ff00,
             0 0 6px #00ff00 !important;
}

/* HOVER ICON SAAT TOMBOL DI HOVER */
.btn-join-affiliate:hover .icon{
  transform:scale(1.2);
}

/* ========================================
   🔵 RESPONSIVE FIXED HP KECIL 4" - 4.7"
=========================================== */
@media (max-width:360px){

.btn-skip,
.btn-join-affiliate {
  font-size: 14px !important;
 }
}


/* ========================= OVERLAY ========================= */
#popup-open-lp {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:none;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,0.6);
  z-index:9999;
  padding:15px;
  box-sizing:border-box;
  font-weight:bold;

  opacity:0;
  pointer-events:none;
  transition:0.25s ease;
}

/* SHOW STATE */
#popup-open-lp.show {
  display:flex;
  opacity:1;
  pointer-events:auto;
}


/* ========================= MATIKAN HIGHLIGHT EFEK KLIK ========================= */
.popup-open-close,
.btn-skip,
.btn-join-affiliate,
.sub-close {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}


/* =====================================
    WRAPPER MENU FIX (KANAN ATAS CARD)
======================================== */

.jn-menu{
 position:absolute;
  top:0;
  right:0;
  display:flex;
  align-items:center;
  z-index:1;
  isolation:isolate;
}

.menu-bar{
  background: linear-gradient(
  115deg,
  #d81a5c,
  #e02c3d,
  #cc5500,
  #cc7a00,
  #b9a800,
  #6bb800,
  #00b966,
  #009d86,
  #006cd6,
  #3449d6,
  #6a29d6,
  #a61ad6,
  #d10d99,
  #d13378,
  #d6488a
  );
  color:#fff;
  padding:6px 10px !important;
  font-size:30px;
  font-weight:bold;
  cursor:pointer;
  border-bottom-left-radius:10px;
  border:2px solid #ffa500;

  display:flex;
  flex-direction:column; /* ✅ tambahan */
  align-items:center;
  justify-content:center;
  gap:4px; /* ✅ tambahan */
  
  /* ✅ Shadow Khusus Untuk Teks pakai ini */
  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);
}

/* ===== GARIS Horizontal ===== */
.menu-bar .line{
  width:100%;
  height:5px;
  background:#fff;
  border-radius:0px;
  
  /* ✅ pakai ini */
  box-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 "MENU" ===== */
.menu-bar small{
  font-size:12px;
  color:#fff;
  letter-spacing:0px;
  line-height:1;
  background:none;
  
  /* ✅ Shadow Khusus Untuk Teks pakai ini */
  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);
}

/* HOVER TOMBOL MENU */
.menu-bar:hover {
  box-shadow:0 0 4px #FFA500, 0 0 8px #FFA500 !important;
}



/* =========================================================
   =============== DROPDOWN MENU ===========================
========================================================= */

.jn-daftar-menu{
  position:absolute;
  top:55px !important;
  right:0;

  width:117px;
  max-width:117px;
  min-width:117px;

  box-sizing:border-box;

  transform:translateX(100%);

  transition:transform 0.3s ease;
  
  border-radius:12px 0 0 12px;
  overflow:hidden;
  border:3px solid #ffa500;
  box-shadow:0 2px 4px #ffa500;
  background:#111;
}


.jn-daftar-menu.show{
  transform:translateX(0);
}


.daftar-item{
  background: linear-gradient(
  115deg,
  #d81a5c,
  #e02c3d,
  #cc5500,
  #cc7a00,
  #b9a800,
  #6bb800,
  #00b966,
  #009d86,
  #006cd6,
  #3449d6,
  #6a29d6,
  #a61ad6,
  #d10d99,
  #d13378,
  #d6488a
  );

  color:#fff;

  padding:12px 4px;
  border-bottom:1px solid rgba(0,0,0,0.4);
  
  cursor:pointer;
  font-size:14px;
  letter-spacing:1px;
  font-weight:bold;
  text-align:left;

  box-sizing:border-box;

  /* FIX ANTI "TERLIHAT MEMBESAR" DI DEVICE TERTENTU */
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

/* HOVER MENU */
.daftar-item:hover{
  background:#00008B !important;
  border:2px solid #00FFFF !important;
  box-shadow:0 0 10px #00E5FF, 0 0 18px #00E5FF !important;
}

/* =========================================================
   RESPONSIVE SECTION (DIBIARKAN, TIDAK DIHAPUS)
   → HANYA DI-LOCK AGAR TIDAK MERUBAH UKURAN
========================================================= */

@media (max-width:360px),
       (min-width:361px) and (max-width:420px),
       (min-width:421px) and (max-width:460px),
       (min-width:461px) and (max-width:480px),
       (min-width:481px) and (max-width:820px){

  .jn-daftar-menu{
    width:117px !important;
    max-width:117px !important;
    min-width:117px !important;
  }

  .daftar-item{
    padding:12px 4px !important;
	font-size:13px !important;
  }
}


/* ========================================================
   GLOBAL POPUP SYSTEM - POPUP KHUSUS MENU - MENU DROPDOWN
=========================================================== */

.jn-popup-menu-1,
.jn-popup-menu-2,
.jn-popup-menu-3{
  position:fixed;
  inset:0;
  display:none;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,0.6);
  z-index:99999;
  padding:15px;
  box-sizing:border-box;
}

.jn-popup-menu-1.show,
.jn-popup-menu-2.show,
.jn-popup-menu-3.show{
  display:flex;
}

/* =========================================================
   POPUP BOX (FIX UTAMA DI SINI)
========================================================= */

.popup-box{
  width:100%;
  max-width:400px;
  height:89vh;
  display:flex;
  flex-direction:column;
  background: linear-gradient(
  115deg,
  #3a0f28,
  #3a1418,
  #3a1f0a,
  #3a2a00,
  #00264d,
  #00363d,
  #00361f,
  #23233a
  );
  border:5px solid #00ffff;
  border-radius:16px;

  overflow:hidden;
  position:relative;
  padding:0px;

  /* 🔥 FIX PENTING: kasih ruang scrollbar supaya tidak “makan konten” */
  box-sizing:border-box;
}


/* =========================================================
       🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
========================================================= */

/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

  .popup-box{
    height:82vh !important;
  }
}

/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

  .popup-box{
    height:82vh !important;
  }
}

/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

  .popup-box{
    height:82vh !important;
  }
}

/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

  .popup-box{
    height:82vh !important;
  }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

  .popup-box{
    height:82vh !important;
  }
}


/* =========================================================
   SCROLL AREA (HARUS DI BODY, BUKAN BOX)
========================================================= */

.popup-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:10px;
  color:#fff;
  font-weight:bold;
  overflow-y:auto;
  overflow-x:hidden;

  /* 🔥 INI KUNCI BIAR TIDAK “GESER KE KIRI” */
  box-sizing:border-box;

  /* 🔥 tambahan penting supaya scrollbar tidak overlap konten */
  padding-right:6px;
}

/* =========================================================
   SCROLLBAR FIX (WAJIB DI BODY)
========================================================= */

.popup-body::-webkit-scrollbar {
  width: 2px !important;
}

/* 🔥 TRACK (jalur scroll) hitam transparan */
.popup-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
}

/* 🔥 THUMB (bagian yang digeser) warna ORANGE */
.popup-body::-webkit-scrollbar-thumb {
  background: #ff8c00; /* oren */
  border-radius: 999px;
}

/* 🔥 hover lebih terang */
.popup-body::-webkit-scrollbar-thumb:hover {
  background: #ffa733 !important;
}

/* Firefox */
.popup-body {
  scrollbar-width: auto;
  scrollbar-color: #ff8c00 rgba(0, 0, 0, 0.35);
}


/* =========================================================
               TITLE / JUDUL
========================================================= */
.popup-title{
  width:100%;
  text-align:left;
  font-weight:bold;
  font-size:16px;
  color:#fff;
  padding:8px 8px;
  letter-spacing: 0.6px;
  background: linear-gradient(
  115deg,
  #8a3a65 0%,
  #94406b 8%,
  #9e4670 16%,
  #8a4444 24%,
  #945048 32%,
  #9e5c2d 40%,
  #8a5a2a 48%,
  #9a6a20 56%,
  #a87a18 64%,
  #1a5fb3 72%,
  #1f6fc0 78%,
  #2380c8 82%,
  #1a7f75 86%,
  #1a7f5f 90%,
  #1a7f4f 94%,
  #4a4a8a 100%
  );
  border-bottom:1px solid #00ffff;
  /* Shadow Hitam Elegant (LEBIH JELAS, LEBIH TEBAL, LEBIH TERDEFINISI) */
  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}


/* =========================================================
               CLOSE BUTTON
========================================================= */

.popup-close{
  position:absolute;
  top:0;
  right:0;
  padding:6px 10px;
  font-size:16px;
  font-weight:bold;
  background:#ff0033;
  color:#fff;
  border:1px solid #00BFFF;
  border-bottom-left-radius:12px;
  border-top-right-radius:12px;
  cursor:pointer;
  z-index:10;
  
  /* Shadow Hitam Elegant (LEBIH JELAS, LEBIH TEBAL, LEBIH TERDEFINISI) */
  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

.popup-close:hover {
  background: #004aad !important;
  box-shadow:0 0 6px #00E5FF, 0 0 12px #00E5FF !important;
}


/* =========================================================
                  POPUP MENU 1
========================================================= */

.jn-popup-menu-1{
  box-sizing:border-box;
}

.jn-popup-menu-1 .img-frame{
  width:340px;
  max-width:90%;
  height:190px;

  margin: 3px auto 0px !important;
  border-radius:10px;
  overflow:hidden;
  padding:0 !important;
  display:flex;
  justify-content:center;
  align-items:center;

  background:none;
}

/* GAMBAR UKURAN 16:9 WAJIB */
.jn-popup-menu-1 .popup-img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:fill;
  border-radius:10px;
  border:2px solid orange;
  display:block;
  margin:0 auto;
  padding:0 !important;
  box-sizing:border-box;
}

/* DESKRIPSI */
.jn-popup-menu-1 .popup-desc{
  flex:1;
  padding:2px 10px !important;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0 !important;
  font-size:16px !important;
  font-weight:bold;
  margin-top:-5px !important;
  margin-bottom:5px;
  box-sizing:border-box;
  background:#1A1A1A;
  border-radius:10px;
  color:#ffff;
  letter-spacing: 1px;
  
  /* Shadow Hitam Elegant (Versi Tipis & Halus) */
    text-shadow:
    0.5px 0px 2px rgba(0,0,0,0.7),
    -0.5px 0px 2px rgba(0,0,0,0.7),
    0px 0.5px 2px rgba(0,0,0,0.7),
    0px -0.5px 2px rgba(0,0,0,0.7),
    0px 0px 3px rgba(0,0,0,0.6) !important;

  /* FIX WRAPPING */
  white-space:pre-wrap;
  word-wrap:break-word;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.4;
}


/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
========================================================= */

/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

  .jn-popup-menu-1 .img-frame{
    margin: 0px auto 0px !important;
  }

  .jn-popup-menu-1 .popup-img{
    margin:0 auto !important;
    padding:0 !important;
 }
 
 .jn-popup-menu-1 .popup-desc{
  padding:6px 10px !important;
  margin-top:-15px !important;
  margin-bottom:7px;
 }
}


/* BUTTON */
.popup-btn{
  margin:2px auto 0px !important;
  align-self:center;

  display:inline-flex;              /* FIX UTAMA */
  align-items:center;               /* RATA TENGAH */
  gap:4px;                          /* 🔥 JARAK ICON – TEKS – PANAH */

  padding:4px 10px;
  background:#0033A0;
  color:#fff;
  font-size:18px;
  border-radius:25px;
  letter-spacing: 0.5px;
  text-decoration:none;
  font-weight:bold;
  border: 3px solid #FFA500;
  animation:shakeSoft 1s ease-in-out infinite, blink 1s infinite;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;

  box-shadow: 0 0 2px #00FF00,
              0 0 4px #00FF00 !important;
}

/* PANAH AFFILIATE FIX */
.panah-affiliate{
  font-size:14px;
  color:#32FF00;
  vertical-align:baseline !important;
  animation: blink 1s infinite !important;
}

/* ICON SEBELUM TEKS */
.affiliate-icon{
  width:32px;
  height:32px;
  display:inline-block;
  filter: drop-shadow(0 0 4px rgba(0,0,0,1));
  animation: blink 0.8s infinite;
}

/* HOVER: jika kursor di tombol, icon ikut hover */
.popup-btn:hover .affiliate-icon{
  transform: scale(1.1);
  animation:blink 0.4s infinite !important;
}

/* HOVER: Tombol + Panah Ikut Hover */
.popup-btn:hover{
  background:#006400;
  border-color:#00e5ff;
  color:orange;
  box-shadow: 0 0 10px #1E90FF,
              0 0 18px #1E90FF !important;
}

/* HOVER: Panah */
.popup-btn:hover .panah-affiliate{
  color: #00ffff;
  animation: blink 0.4s infinite !important;
}


/* =========================================================
                  POPUP MENU 2
========================================================= */

.partner-item{
  position:relative;
  display:grid;
  grid-template-columns:60px 1fr;
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "nama nama"
    "img desc"
    "btn btn";
  gap:6px 12px;
  padding:8px;
  margin-bottom:10px;
  border-radius:10px;
  background:#5a3a1a;
  border:2px solid #00FF00;
  box-sizing:border-box;
}

/* NAMA (FULL ATAS) */
.nama-partner{
  grid-area:nama;
  font-size:20px;
  font-weight:bold;
  color:#fff;
  line-height:1.2;
  letter-spacing:0.5px;
  animation:glowRun 3s linear infinite;
  
  /* Shadow Hitam Elegant (LEBIH JELAS, LEBIH TEBAL, LEBIH TERDEFINISI) */
    text-shadow:
    1px 0px 4px rgba(0,0,0,1),
    -1px 0px 4px rgba(0,0,0,1),
    0px 1px 4px rgba(0,0,0,1),
    0px -1px 4px rgba(0,0,0,1),
    0px 0px 8px rgba(0,0,0,1) !important;
}

/* IMAGE */
.partner-item img{
  grid-area:img;
  width:60px;
  height:60px;
  border-radius:10px;
  object-fit:fill;
  object-position:center;
  border:2px solid #00ffff;
  display:block;
}

/* DESKRIPSI (KANAN FOTO) */
.deskripsi-partner{
  grid-area:desc;
  font-size:16px !important;
  font-weight:bold;
  color:#fff;
  line-height:1.3;
  letter-spacing:0.6px;
  
  /* Shadow Hitam Elegant (LEBIH JELAS, LEBIH TEBAL, LEBIH TERDEFINISI) */
    text-shadow:
    1px 0px 4px rgba(0,0,0,1),
    -1px 0px 4px rgba(0,0,0,1),
    0px 1px 4px rgba(0,0,0,1),
    0px -1px 4px rgba(0,0,0,1),
    0px 0px 8px rgba(0,0,0,1) !important;
}

/* BUTTON (FULL BAWAH) */
.partner-btn{
  grid-area:btn;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  font-size:13px;
  font-weight:bold;
  letter-spacing:1px;
  background:#00008B;
  border:3px solid #0066ff;
  box-shadow:0 0 2px #00FF00, 0 0 4px #00FF00;
  color:#fff;
  border-radius:25px;
  text-decoration:none;
  line-height:1;
  box-sizing:border-box;
  
  /* Shadow Hitam Elegant (LEBIH JELAS, LEBIH TEBAL, LEBIH TERDEFINISI) */
    text-shadow:
    1px 0px 4px rgba(0,0,0,1),
    -1px 0px 4px rgba(0,0,0,1),
    0px 1px 4px rgba(0,0,0,1),
    0px -1px 4px rgba(0,0,0,1),
    0px 0px 8px rgba(0,0,0,1) !important;
}

/* ICON PANAH */
.panah-partner{
  display:inline-flex !important;
  vertical-align:center !important;
  font-size:13px;
  line-height:1;
  color:#ffa500;
  animation:blink 1.2s infinite;
  pointer-events:none;
}

/* ============  
   HOVER tombol  
=============== */
.partner-btn:hover{
  background:#1B5E20 !important;
  color:orange !important;
  border:3px solid #00FFFF !important;
  box-shadow:0 0 6px #009DFF, 0 0 12px #009DFF !important;
}

/* ============  
   HOVER Panah  
=============== */
.partner-btn:hover .panah-partner{
  color: #00ffff !important;
  animation:blink 0.5s infinite !important;
}

/* ========================= MATIKAN HIGHLIGHT EFEK KLIK ========================= */
.jn-menu,
.menu-bar,
.jn-daftar-menu,
.daftar-item,
.popup-close,
.popup-btn,
.panah-affiliate,
.partner-btn,
.panah-partner {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}


 /* =========================================================
                    POPUP MENU 3
========================================================= */

.profile-box{
  display:flex;
  gap:10px;
  border: 2px solid #8B4513;
  background:#5a3a1a;
  padding:10px;
  border-radius:50px;

  flex-shrink:0;
  margin-bottom:3px;

  box-sizing:border-box;
  width:100%;

  align-items:flex-start;
}

/* FOTO BULAT (FULL TERLIHAT) */
.profile-box img{
  width:70px;
  height:70px;
  border-radius:50%;

  object-fit:contain;
  object-position:center;

  background:#000;
  flex-shrink:0;
  display:block;
}

/* WRAPPER wajib agar slash ikut lingkaran */
.profile-box .img-wrap{
  position:relative;
  display:inline-block;
  border-radius:50%;
  overflow:hidden;

  border:3px solid #ffa500; /* pindah ke wrapper */
}

/* SLASH EFFECT */
.profile-box .img-wrap::after{
  content:"";
  position:absolute;
  top:-20%;
  left:-120%;
  width:20%;
  height:140%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.25) 35%,
    rgba(255,255,255,0.85) 50%, /* 🔥 kilau tajam */
    rgba(255,255,255,0.25) 65%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-25deg);
  animation:borderSlash 2s linear infinite;
  pointer-events:none;
}

/* WRAPPER TEKS (KANAN FOTO) */
.profile-info{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* NAMA (atas) */
.name{
  font-weight:bold;
  font-size:24px;
  color:#fff;
  line-height:1.2;
  animation: glowRun 3s linear infinite !important;
  
  /* Shadow Hitam Elegant (LEBIH JELAS, LEBIH TEBAL, LEBIH TERDEFINISI) */
  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

.profile-box .name::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("https://img.icons8.com/?size=96&id=98A4yZTt9abw&format=png");
  background-size: cover;
  background-repeat: no-repeat;

  /* 👉 agar rata tengah dengan teks */
  vertical-align: middle;

  margin-left:0;

  /* 🔥 shadow */
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
}

/* TAGLINE (bawah nama) */
.tagline {
  font-size:16px;
  font-weight:bold;
  color:#fff;
  margin-top:3px;
  line-height:1.2;

  background: linear-gradient(90deg,
      #ffffff 0%,
      #00ffff 50%,
      #ffffff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: cyanRun 2s linear infinite !important;
}

/* ABOUT */
.about-text{
  flex:1;
  padding:0px 10px;
  overflow-y:auto;
  overflow-x:hidden;
  margin-top:3px;
  font-size:16px !important;
  font-weight:bold;
  
  background:#1A1A1A;
  border-radius:10px;
  color:#ffff;
  letter-spacing: 1px;
  
  /* Shadow Hitam Elegant (Versi Tipis & Halus) */
    text-shadow:
    0.5px 0px 2px rgba(0,0,0,0.7),
    -0.5px 0px 2px rgba(0,0,0,0.7),
    0px 0.5px 2px rgba(0,0,0,0.7),
    0px -0.5px 2px rgba(0,0,0,0.7),
    0px 0px 3px rgba(0,0,0,0.6) !important;

  /* FIX WRAPPING */
  white-space:pre-wrap;
  word-wrap:break-word;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.4;
}


/* =============== LABEL KONTEN BERSPONSOR ================ */
.sponsored-label{
  position:absolute;
  top:1px;
  left:0px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:5px;

  background:rgba(0,0,0,.65);
  color:#fff;

  font-size:12px;
  font-weight:bold;
  line-height:1;

  padding:2px 6px;
  min-height:20px;

  border-radius:0 8px 8px 0 !important;

  z-index:7;

  box-sizing:border-box;
  text-align:center;
}

.sponsored-label img{
  width:14px;
  height:14px;

  border-radius:50%;
  object-fit:cover;

  display:block;
  flex-shrink:0;
}


/* =============== LABEL FOLLOWERS ATAU PENGGUNA AKTIF ================ */
.followers{
  position:absolute;
  left:0;
  top:196px !important;

  background: linear-gradient(
  115deg,
  #2a0a1a,
  #3a0f14,
  #2f1f00,
  #5a4a00,
  #061a3a,
  #003a44,
  #002a14,
  #232a5a
  );

  padding:4px 4px 4px 2px !important;
  border-radius:0 20px 8px 0 !important;

  font-size:12px;
  isolation:isolate;
  z-index:1;

  /* FIX AMAN TAMBAHAN */
  box-sizing:border-box;
}

.followers .count {
  font-size: 18px;
  font-weight: bold;
  color: #00FFFF;

  display: block;
  margin-left: 2px;
  margin-bottom: 2px;
}

.followers .label {
  font-size: 12px;
  font-weight: bold;
  color: #00FFFF;

  display: block;
  line-height: 0.5;

  margin-left: 2px;
  margin-bottom: 3px;
}

/* CENTANG DI SAMPING KANAN TANPA MERUBAH LAYOUT */
.followers .label::after{
  content:"✔";
  font-size:14px;
  color:#00ff04;

  margin-left:0px;
}


/* SLIDER – mengikuti ukuran gambar 16:9 WAJIB */
.slider{
  width:100%;
  height:clamp(56vw, 242px) !important;
  aspect-ratio:16/9 !important;   /* FIX UTAMA: slider otomatis sama dengan foto */
  position:relative;
  overflow:hidden;
  background:#000;     /* biar rapi */
  cursor: pointer;
}

/* GAMBAR SELALU DI TENGAH & TIDAK PERNAH TERPOTONG */
.slider img{
  width:100%;
  height:auto;
  object-fit:contain;   /* FOTO 16:9 TIDAK PERNAH TERPOTONG */
  object-position:center; 
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  cursor:pointer;
  transition:.5s ease;
}

.slider img.active{
  opacity:1;
}


/* === IKLAN BUTTON === */
.ads-btn{
  position:absolute;
  top:203px !important;
  left:50%;
  transform:translateX(-50%);
  color:#ffff;
  padding:6px 5px !important;
  font-size:13px;
  border-radius:20px;
  text-decoration:none;
  letter-spacing: 1px;
  opacity:0;
  visibility:hidden;
  pointer-events:auto;

  z-index: 1 !important;
  border: 2px solid #00ffff;
  isolation:isolate;
  
  text-shadow:
  1px 0px 6px rgba(0,0,0,1),
  -1px 0px 6px rgba(0,0,0,1),
  0px 1px 6px rgba(0,0,0,1),
  0px -1px 6px rgba(0,0,0,1),
  0px 0px 12px rgba(0,0,0,1),
  0px 0px 20px rgba(0,0,0,0.9) !important;
}

/* === IKLAN BUTTON HOVER === */
.ads-btn:hover{
  background: #001F54 !important;
  border: 3px solid #00ffff !important;
  box-shadow:0 0 6px #00E5FF, 0 0 12px #00E5FF !important;
}

/* === IKLAN BUTTON ACTIF SINKRON JAVA SCRIPT === */
.ads-btn.active {
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  animation: popIn 0.4s ease forwards, bgColorChange 12s steps(4) infinite !important;
}


/* ========================= MATIKAN HIGHLIGHT EFEK KLIK ========================= */
.ads-btn {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}


/* =========================================================
   🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
   - FOLLOWERS & ADS BTN SAMA DI SEMUA LAYAR
========================================================= */

/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

  .followers{
    top:154px !important;
  }

  .ads-btn{
    top:162px !important;
	font-size:11px !important;
  }
}

/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

  .followers{
    top:174px !important;
  }

  .ads-btn{
    top:182px !important;
	font-size:11px !important;
  }
}

/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

  .followers{
    top:174px !important;
  }

  .ads-btn{
    top:182px !important;
	font-size:11px !important;
  }
}

/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

  .followers{
    top:174px !important;
  }

  .ads-btn{
    top:182px !important;
	font-size:11px !important;
  }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

  .followers{
    top:174px !important;
  }

  .ads-btn{
    top:182px !important;
	font-size:11px !important;
  }
}


/* ========================================================
   ===== ANIMASI POP IN ====================================
========================================================= */
@keyframes popIn {
  0%   { transform:translateX(-50%) scale(0.4); opacity:0; }
  100% { transform:translateX(-50%) scale(1); opacity:1; }
}


/* === BACKGROUND FOTO DI TITLE (OPSIONAL) === */
.title-bg{
  position:relative;
  z-index:1;
  background:#003366;
  overflow:hidden;
}


/* TITLE */
.title{
  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:#fff;
  padding:6px;
  flex-shrink:0;

  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:5px;
}

/* BLOK FOTO + (NAMA + CREATOR) DI KANAN FOTO */
.title-left{
  display:flex;
  align-items:flex-start;
  gap:6px;
}

.title-left img{
  width:50px;
  height:50px;
  border-radius:50%;
  object-fit:contain;
  background:#000;
  border:3px solid #ffa500;
  position:relative;
  display:block;
}

/* wrapper wajib dipakai agar slash ikut bentuk lingkaran */
.title-left .img-wrap{
  position:relative;
  display:inline-block;
  border-radius:50%;
  overflow:hidden;
}

/* SLASH EFFECT */
.title-left .img-wrap::after{
  content:"";
  position:absolute;
  top:-20%;
  left:-120%;
  width:20%;
  height:140%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.25) 35%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0.25) 65%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-25deg);
  animation:borderSlash 2s linear infinite;
  pointer-events:none;
}

/* BLOK TEKS DI SAMPING FOTO */
.title-left .text-box{
  display:flex;
  flex-direction:column;
  gap:1px;
}

.title-left .name{
  display:flex;
  align-items:center;
  gap:1px;
  font-size:14px;
  font-weight:bold;
  color:#fff;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;

  animation: glowRun 6s linear infinite;
}

.title-left .name::after {
  content: "";
  display: inline-block;

  width: 14px;
  height: 14px;
  margin-left: 1px;

  background-image: url("https://img.icons8.com/?size=96&id=98A4yZTt9abw&format=png");
  background-size: cover;
  background-repeat: no-repeat;

  vertical-align: middle;
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
}

.title-left .tagline{
  font-size:11px;
  font-weight:bold;
  letter-spacing: 0.5px;
  opacity:1;
  margin-left:1px;

  color:#fff;
  background:linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 40%,
    #00ffea 50%,
    #ffffff 60%,
    #ffffff 100%
  );
  background-size:200% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: cyanRun 2s linear infinite;

  filter: drop-shadow(0 0 5px rgba(0,0,0,0.8))
          drop-shadow(0 0 8px rgba(0,0,0,0.7));
}

/* GARIS PEMBATAS */
.sep{
  width:1px;
  background:rgba(255,255,255,0.5);
  margin:0 1px;
}

/* TEKS SAMBUTAN KANAN */
.title-right{
  font-size:11px;
  font-weight:bold;
  line-height:1.1;
  text-align:left;
  flex:1;
  white-space:normal;
  word-wrap:break-word;
  word-break:break-word;
  overflow-wrap:anywhere;
  min-width:0;
  letter-spacing:0.5px;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}


/* ================== CONTENT BG ================== */
.content-bg{
  position:absolute;
  inset:0;
  background-image:url("https://picsum.photos/800/600?1");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0;           /* selalu di bawah layer lain */
  pointer-events:none;  /* supaya tidak menghalangi klik */
  opacity:0.7;          /* atur transparansi sesuai keinginan */
}

/* ================== CONTENT ================== */
.content{
  flex:1;
  padding:5px;
  position:relative;
  overflow-y:auto;   /* scroll konten tetap aktif */
  overflow-x:hidden;

  z-index:1;          /* di atas content-bg */
}

/* Konten di atas pseudo-element */
.content > *{
  position:relative;
  z-index:1;
}

/* ================================================
   🔵 SCROLLBAR BULAT (EDITAN TAMPILAN SCROLL BAR)
   👉 Mengatur tampilan scrollbar di Chrome / Edge / Safari
=================================================== */

.content::-webkit-scrollbar {
  width: 2px !important;
}

/* 🔥 TRACK (jalur scroll) hitam transparan */
.content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
}

/* 🔥 THUMB (bagian yang digeser) CYAN PADAT */
.content::-webkit-scrollbar-thumb {
  background: #00ffff; /* cyan solid */
  border-radius: 999px;
}

/* 🔥 hover tetap cyan lebih gelap (tetap solid) */
.content::-webkit-scrollbar-thumb:hover {
  background: #00cccc !important;
}

/* ======================================
   🔵 WARNA SCROLL BAR (FIREFOX SUPPORT)
========================================= */

.content {
  scrollbar-width: auto;
  scrollbar-color: #00ffff rgba(0, 0, 0, 0.6);
}


/* =========================================================
   ===== TOMBOL MENU =======================================
========================================================= */
.btn{
  width: calc(100% - 16px) !important;
  margin-right: 16px !important;
  max-width:100%;
  padding:4px 6px !important;
  border-radius: 0 25px 25px 0 !important;
  background: linear-gradient(90deg, #002a5c, #00a6b8, #002a5c);
  background-size: 300% 100%;
  animation: cyanRun 10s linear infinite !important;
  border: 4px solid #ffa500;
  color:#fff;
  font-weight:bold;
  font-size:16px;
  letter-spacing: 0.5px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  user-select:none;
  gap:4px;
  white-space:nowrap;
  margin:0 auto 5px 0;
}

/* =========================================================
   ===== ICON ==============================================
========================================================= */
.btn .icon{
  width:32px !important;
  height:32px !important;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin: 2px !important;
}

.btn .icon img{
  width:100%;
  height:100%;
  object-fit:fill;
  border-radius:50px !important;
  border: 2px solid #00ff00;
}

/* =========================================================
   ===== FIX AREA TEKS =====================================
========================================================= */
.btn-text{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  z-index:2;
  display:inline-block;
  padding-left:4px !important;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;

  position:relative;
}


/* ============================================================================
   ===== ANIMASI SCROLL BOUNCE + DELAY 2 DETIK SINKRON JS =====================
=============================================================================== */

.scroll-text{
  display:inline-block;
  white-space:nowrap;
  transform: translateX(0);
}

/* class aktif ditambah JS Mili Detik 4S Gak terpakai karena pakai JS*/
.scroll-active{
  animation: bounceScroll var(--scroll-speed, 16s) ease-in-out infinite;
}


/* ===== HOVER TOMBOL ===================================== */
.btn:hover{
  border: 4px solid #00FFFF;
  background:#006400;
  color:orange;
  box-shadow:0 0 8px #009DFF, 0 0 12px #009DFF !important;
}

/* ===== AKTIF MENU ======================================= */
.row.active .btn{
  border: 4px solid #00FFFF;
  background:#006400;
  color:orange;
  box-shadow:0 0 8px #009DFF, 0 0 12px #009DFF !important;
}


/* =========================================================
   ===== PANAH MENU (tetap penuh, tidak hilang) ============
========================================================= */
.panah-menu{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;                     /* WAJIB: panah tidak mengecil */
  background: linear-gradient(
  115deg,
  #c83a78,
  #c84a4a,
  #c86b1a,
  #239a55,
  #0093aa,
  #2f5fc2,
  #4f45b8,
  #9a2fb8,
  #c02f7f
  );
  color: #32FF00;
  padding:5px 6px;
  border-radius:50%;
  border: 3px solid #ffa500;
  margin-top:0;
  line-height:1;
  font-size: 14px;
  transition:.3s;
  
  text-shadow:
  2px 0px 5px rgba(0,0,0,1),
  -2px 0px 5px rgba(0,0,0,1),
  0px 2px 5px rgba(0,0,0,1),
  0px -2px 5px rgba(0,0,0,1),

  2px 2px 6px rgba(0,0,0,1),
  -2px 2px 6px rgba(0,0,0,1),
  2px -2px 6px rgba(0,0,0,1),
  -2px -2px 6px rgba(0,0,0,1),

  0px 0px 12px rgba(0,0,0,1),
  0px 0px 18px rgba(0,0,0,0.95) !important;
}

.panah-menu .icon-panah-menu{
  display:inline-block;
  transition:.3s;
  transform-origin:center;
  animation: blink 0.8s infinite;
  position: relative;
  left: 0px;
}

/* ==== HOVER PANAH MENU ===== */
.btn:hover .panah-menu .icon-panah-menu{
  color: orange;
  animation: blink 0.5s infinite !important;
}

/* ==== PANAH MENU SAAT AKTIF ===== */
.row.active .panah-menu .icon-panah-menu{ 
  transform: rotate(90deg);
  position: relative;
  left: -1px !important;
  top: 1px !important;
}

/* =========================================================
   ===== LIST MENU =========================================
========================================================= */
.list{
  display:none;
}
.row.active .list{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* =========================================================
   ===== ADS ===============================================
========================================================= */
.ads-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:2px !important;
}

.ads-box{
  width:100%;
  text-align:center;
}

/* ======================================================
   ===== WRAPPER TITLE BAR MENU AKTIF ===================
========================================================= */
.photo-title-bar{
  width:100%;
  max-width:350px;
  margin:0 auto 4px auto;
  background: linear-gradient(
  115deg,
  #d81a5c,
  #e02c3d,
  #cc5500,
  #cc7a00,
  #b9a800,
  #6bb800,
  #00b966,
  #009d86,
  #006cd6,
  #3449d6,
  #6a29d6,
  #a61ad6,
  #d10d99,
  #d13378,
  #d6488a
  );
  color:#fff;
  border-radius:6px;
  border:2px solid #00FF4C;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 8px;
  box-sizing:border-box;
}

/* ======================================================
   ===== TEKS DI TITLE BAR MENU AKTIF ===================
========================================================= */
.photo-title-text{
  font-weight:bold;
  font-size:14px !important;
  text-align:left;
  letter-spacing: 0.6px;
  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

/* =========================================================
   ===== CLOSE TITLE =======================================
========================================================= */
.photo-close{
  margin-right:-4px !important;
  background:#00ff00;
  color:#fff;
  font-weight:bold;
  font-size:14px;
  padding:4px 4px;
  border-radius:4px;
  cursor:pointer;
  border:2px solid #ff4d4d;
  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

.photo-close:hover{
  background:#004aad !important;
  box-shadow:0 0 8px #ff4d4d, 0 0 12px #ff4d4d !important;
}

/* =========================================================
   ===== IMAGE =============================================
========================================================= */
.content-img{
  width:100%;
  max-width:350px;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:fill;
  border-radius:10px;
  border:2px solid orange;
  display:block;
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
}

/* =========================================================
   ===== ADS BOTTOM ========================================
========================================================= */
.ads-bottom{
  display:flex;
  gap:12px;
  width:100%;
  max-width:350px;
  margin:5px auto 0 auto;
  padding:0;
  box-sizing:border-box;
}

/* =========================================================
   ===== LINK ==============================================
========================================================= */
.desc-link,
.try-link{
  flex:1;
  display:flex;
  align-items:center; /* ✅ tetap center biar posisi di tombol bagus */
  justify-content:center;
  font-size:16px !important;
  font-weight:bold;
  height:32px;
  border:4px solid #FFA500;
  border-radius:12px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  text-decoration:none;
  line-height:1;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

.desc-link{
  background:#008000;
  color:#fff;
}

.desc-link:hover{
  background: #06451A;
  color:orange;
  border:4px solid #00FFFF;
  box-shadow:0 0 4px #009DFF, 0 0 8px #009DFF !important;
}

.try-link{
  background:#004aad;
  color:#fff;
  gap:5px !important;
  animation:shakeSoft 1s ease-in-out infinite !important;
  
  box-shadow:0 0 4px #00FFFF,
             0 0 8px #00FFFF !important;
}

.try-link:hover{
  animation:none !important;
  background: #001F54 !important;
  color:orange !important;
  border:4px solid #00FFFF;
  box-shadow:0 0 4px #00FF00, 0 0 8px #00FF00 !important;
}

/* ======================================================
   WRAPPER TEKS + ICON (INI KUNCI) ======================
========================================================= */
.try-link span{
  display:inline-block;
  line-height:1;
}

/* ======================================================
   ICON PANAH ===========================================
========================================================= */
.panah-trylink{
  font-size:12px;
  display:inline-block;
  line-height:1;
  margin-left:4px;

  vertical-align:baseline;
  
  position:static;

  transition:.3s;
  animation:blink 0.8s infinite !important;
}

.try-link:hover .panah-trylink{
  animation:blink 0.5s infinite !important;
  color: #00ffff !important;
}


/* =====================================================
   ===== POPUP 2 UNTUK MENU CONTENT - Desc Link ========
======================================================== */

#popup-2{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;

  display:none;

  justify-content:center;
  align-items:center;

  background:rgba(0,0,0,0.6);
  z-index:25;

  padding:15px !important;
  box-sizing:border-box;

  /* FIX STABIL ANTI SCALING */
  overflow:hidden;
}

#popup-2.show{
  display:flex;
}

/* ==============================================
   ===== POPUP BOX UNTUK DESCRPSI PRODUK ========
================================================= */
#popup-2 .popup-box-2{
  width:100%;
  max-width:400px;
  height:90vh;
  margin-bottom:4px !important;
  display:flex;
  flex-direction:column;

  background: linear-gradient(
  115deg,
  #3a0f28,
  #3a1418,
  #3a1f0a,
  #3a2a00,
  #00264d,
  #00363d,
  #00361f,
  #23233a
  );

  border:5px solid #00ffff;
  border-radius:16px;

  overflow:hidden;
  position:relative;
  padding:0px;
  z-index:25 !important;
  box-sizing:border-box;

  /* FIX ANTI LAYOUT SHIFT */
  flex-shrink:0;
}


/* =========================================================
       🔵 RESPONSIVE FIXED (UNIFORM ALL SCREEN)
========================================================= */

/* HP KECIL 4" - 4.7" */
@media (max-width:360px){

  .popup-box-2{
    height:82vh !important;
  }
}

/* HP NORMAL 5" - 5.5" */
@media (min-width:361px) and (max-width:420px){

  .popup-box-2{
    height:82vh !important;
  }
}

/* HP BESAR 6" - 6.5" */
@media (min-width:421px) and (max-width:460px){

  .popup-box-2{
    height:82vh !important;
  }
}

/* HP EXTRA BESAR 6.6" - 7" */
@media (min-width:461px) and (max-width:480px){

  .popup-box-2{
    height:82vh !important;
  }
}

/* TABLET */
@media (min-width:481px) and (max-width:820px){

  .popup-box-2{
    height:82vh !important;
  }
}


/* ===== CLOSE X ===== */
.popup-close-2{
  position:absolute;
  top:0;
  right:0;

  border: 1px solid #00BFFF;
  background:#ff0033;
  color:#fff;

  padding:6px 12px;
  font-weight:bold;
  font-size:16px !important;

  cursor:pointer;
  text-align:center;

  border-bottom-left-radius:12px;
  border-top-right-radius:12px;
  z-index:5;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

.popup-close-2:hover {
  background:#004aad !important;
  box-shadow:0 0 6px #00E5FF, 0 0 12px #00E5FF !important;
}

/* ===== JUDUL ===== */
.popup-title-2{
  width:100%;
  padding:8px 8px;

  background: linear-gradient(
  115deg,
  #d81a5c,
  #e02c3d,
  #cc5500,
  #cc7a00,
  #b9a800,
  #6bb800,
  #00b966,
  #009d86,
  #006cd6,
  #3449d6,
  #6a29d6,
  #a61ad6,
  #d10d99,
  #d13378,
  #d6488a
  );

  text-align:left;
  font-weight:bold;
  font-size:16px !important;
  color:#fff;
  letter-spacing:0.4px;
  border-bottom:1px solid #00ffff;

  box-sizing:border-box;
  z-index:4;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

/* ===== IMAGE ===== */
#popupImg-2{
  width:90%;
  max-width:340px;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:fill;
  border-radius:10px;
  border:2px solid orange;
  display:block;
  margin:10px auto;
  padding:0;
  box-sizing:border-box;
}


/* ===== DESKTOP / NOTEBOOK - 1024px UP SAMPAI LAYAR LEBAR PERSEGI PANJANG {BUKAN LAYAR VERTIKAL SEPERTI HP} ===== */
@media (min-width: 1024px) {
  #popupImg-2 {
    max-width:200px;
  }
}


/* ===== TEXT AREA ===== */
#popupText-2{
  padding:0px 10px;
  overflow-y:auto;
  background:#1A1A1A;
  font-weight:bold;
  color:#fff;
  font-size:16px !important;
  border-radius:10px;
  white-space:pre-line;
  letter-spacing:0.5px;

  box-sizing:border-box;

  margin-top:-5px !important;
  margin-bottom:2px !important;

  flex:1;
  min-height:0;

  /* FIX STABIL SCROLL AREA */
  width:100%;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
  
  /* FIX WRAPPING */
  white-space:pre-wrap;
  word-wrap:break-word;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.4;
}


/* =================================
   SCROLLBAR DESIGN UI PROFESSIONAL
==================================== */

#popupText-2::-webkit-scrollbar {
  width: 2px !important;
}

/* 🔥 TRACK (jalur scroll) hitam transparan */
#popupText-2::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
}

/* 🔥 THUMB (bagian yang digeser) warna ORANGE */
#popupText-2::-webkit-scrollbar-thumb {
  background: #ff8c00; /* oren */
  border-radius: 999px;
}

/* 🔥 hover lebih terang */
#popupText-2::-webkit-scrollbar-thumb:hover {
  background: #ffa733 !important;
}

/* Firefox */
#popupText-2{
  scrollbar-width: auto;
  scrollbar-color: #ff8c00 rgba(0, 0, 0, 0.35);
}


/* ========== TOMBOL REDIRECT DI POP UP DESC LINK =========== */
.popup-btn-2{
  position:sticky;
  bottom:0;

  display:block;
  width:75%;

  margin-top:4px !important;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:4px !important;

  text-align:center;
  padding:8px 8px !important;

  background: #001F54;
  color:#fff;

  font-weight:bold;
  font-size:20px !important;

  letter-spacing:0.5px;
  text-decoration:none !important;

  border-radius:50px;
  border:4px solid #FFA500;

  animation:shakeSoft 1s ease-in-out infinite, blink 0.5s infinite !important;

  z-index:2;

  box-shadow:0 0 3px #00ff00,
             0 0 6px #00ff00 !important;

  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

/* hover tombol */
.popup-btn-2:hover {
  color:#FFA500;
  border:4px solid #00ffff !important;
  background: #06451A !important;
  box-shadow:0 0 3px #009DFF, 0 0 6px #009DFF !important;
}

/* ======================================================
   WRAPPER TEKS + ICON (FIX AMAN)
========================================================= */
.btn-text-2{
  display:inline;   /* ❗ penting: jangan flex */
}

/* semua span di dalam tetap inline stabil */
.btn-text-2 span{
  display:inline-block;
  line-height:1;
}

/* ======================================================
   ICON PANAH POP UP
========================================================= */
.panah-popup-2{
  font-size:18px;
  display:inline-block;
  line-height:1;
  margin-left:4px;
  color: #32FF00 !important;
  
  /* baseline biar nempel ke teks */
  vertical-align:baseline;

  position:static;

  transition:.3s;
  animation:blink 0.8s infinite !important;
}

/* hover icon panah */
.popup-btn-2:hover .panah-popup-2{
  animation:blink 0.5s infinite !important;
  color: #00ffff !important;
}


/* ========================= MATIKAN HIGHLIGHT EFEK KLIK ========================= */
.btn,
.panah-menu,
.photo-close,
.desc-link,
.try-link,
.panah-trylink,
.popup-close-2,
.popup-btn-2 {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}


/* =========================================================
   ===== RESPONSIVE ========================================
========================================================= */
@media screen and (max-width:600px){
  .content-img,
  .ads-bottom,
  .photo-title-bar{
    width:90%;
  }
}


/* ===== GOOGLE ADS ===== */
.google-ads-text {
  font-weight: bold;
  text-align: center;
  margin-top:14px;
  margin-bottom:10px;
  color:#fff;
  letter-spacing: 1px;
  font-size:13px;

  display:flex;
  align-items:center;
  justify-content:center;

  /* Shadow Hitam Elegant (LEBIH JELAS, LEBIH TEBAL, LEBIH TERDEFINISI) */
  text-shadow:
  1px 0px 4px rgba(0,0,0,1),
  -1px 0px 4px rgba(0,0,0,1),
  0px 1px 4px rgba(0,0,0,1),
  0px -1px 4px rgba(0,0,0,1),
  0px 0px 8px rgba(0,0,0,1) !important;
}

.google-ads-text::before{
  content:"";
  width:14px;
  height:14px;
  background-image:url("https://img.icons8.com/?size=96&id=V5cGWnc9R4xj&format=png");
  background-size:cover;
  display:inline-block;
  vertical-align:center;
  position:static;
  top:auto;
  left:auto;

  margin-right:4px;
}

/* ===== WRAPPER 2 KOLOM ===== */
.ads-wrapper{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;

  gap:8px !important;

  width:100%;
  max-width:520px;
  margin:0 auto;
  box-sizing:border-box;
}

/* ===== ITEM 50% ===== */
.ads-item{
  flex:0 0 calc(50% - 5px);
  box-sizing:border-box;
}

/* ===== GAMBAR FIX 1:1 ===== */
.ads-img{
  width:100%;
  aspect-ratio:1 / 1;   /* ✔ FIX RASIO 1:1 */
  object-fit:fill;

  border-radius:8px;
  display:block;
  cursor:pointer;
  transition:transform 0.25s ease;
}

.ads-img:hover{
  transform:scale(1.03) !important;
}


/* ========================= MATIKAN HIGHLIGHT EFEK KLIK ========================= */
.ads-wrapper,
.ads-item,
.ads-img {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}


/* ================== MARQUEE ================== */
.marquee{
  width:100%;
  background: linear-gradient(
  115deg,
  #3a0f25,   /* dark pink → lebih gelap */
  #4a1520,   /* merah gelap → lebih gelap */
  #3f2a00,   /* dark orange → lebih gelap */
  #6a5a0a,   /* kuning → lebih gelap */
  #061f3f,   /* biru → lebih gelap */
  #004a5a,   /* cyan → lebih gelap */
  #00331a,   /* hijau → lebih gelap */
  #2a2f66    /* ungu kebiruan → lebih gelap */
  );
  overflow:hidden;
  padding:5px 0;
  border-radius:0;
  position: relative; /* supaya z-index berfungsi */
  z-index:1 !important;          /* pastikan di atas .content-bg */
  isolation:isolate !important;
}

.marquee-track{
  display:inline-block;
  white-space:nowrap;
  font-size:15px;
  font-weight:bold;
  color:#fff;
  letter-spacing: 0.5px;
  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) !important;

  /* Dua animasi sekaligus: marquee bergerak + pergantian warna tegas */
  animation:marqueeMove 28s linear infinite, glowRun 3s linear infinite;
}

/* ==========================
     RESPONSIVE MOBILE 
   ========================== */
@media screen and (max-width:600px){

  .marquee-track{
    animation-duration: 26s; /* HP lebih cepat */
  }
}



        /* ============================================================================================================================================================== /*
                                 GLOBAL ANIMATION UI MODERN CODING BY MAS JACK GANTENG - BISA DI ATUR MANUAL 
						   
						PEMANGGIL ANIMASI 👇🏻👇🏻
						   
						animation: bounceScroll var(--scroll-speed, 4s) ease-in-out infinite;          /* ==== ANIMASI BOUNCE SCROLL LEMBUT UNTUK TOMBOL MENU UTAMA ==== */
						animation: shakeSoft 1s ease-in-out infinite;                                               /* ======= ANIMASI GOYANG LEMBUT UNTUK TOMBOL ====== */
						animation: popIn 0.4s ease-out forwards;                                                    /* ===== POP IN (ANIMASI MEMBESAR SAAT MUNCUL) ===== */
						animation: bgColorChange 4s linear infinite;                                                /* == BG COLOR CHANGE (GONTA-GANTI BACKGROUND) ===== */
						animation: borderSlash 3s linear infinite;                                                  /* === BORDER SLASH SILVER (EFEK SWIPE CAHAYA) ===== */
						animation: blink 1s infinite;                                                                                 /* ===== BLINK (KEDIP-KEDIP) ===== */
						animation: glowRun 3s linear infinite;                                                      /* ======== GLOW RUN (WARNA BERKILAU BERGANTI) ===== */
						animation: cyanRun 2s linear infinite;                                                      /* ============ CYAN RUN (BACKGROUND BERGERAK) ===== */
						animation: marqueeMove 8s linear infinite;                                                  /* =======KHUSUS UNTUK MARQUEE (TEKS BERGERAK) ===== */
        /* =============================================================================================================================================================== /*


/* ========================================================
   ===== ANIMASI POP IN ====================================
========================================================= */
@keyframes popIn {
  0%   { transform:translateX(-50%) scale(0.4); opacity:0; }
  100% { transform:translateX(-50%) scale(1); opacity:1; }
}

/* =========================================================
   ===== ANIMASI BG COLOR ==================================
========================================================= */
@keyframes bgColorChange {
  0%   { background: #ff0000; }
  25%  { background: #0000ff; }
  50%  { background: #ffa500; }
  75%  { background: #008000; }
  100% { background: #ff0000; }
}

/* =========================================================
   ===== ANIMASI BORDER SLASH ===============================
========================================================= */
@keyframes borderSlash {
  0% { left:-120%; }
  100% { left:140%; }
}

/* =========================================================
   ===== ANIMASI BLINK =====================================
========================================================= */
@keyframes blink {
  0%   { opacity:1; }
  50%  { opacity:0.5; }
  100% { opacity:1; }
}

/* =========================================================
   ===== ANIMASI GLOW RUN ==================================
========================================================= */
@keyframes glowRun {
  0%{
    color:#ffffff;
    text-shadow:
      0 0 2px rgba(255,255,255,0.6),
      0 0 6px rgba(255,255,255,0.4);
  }
  20%{
    color:#00ffea;
    text-shadow:
      0 0 2px rgba(0,255,234,0.6),
      0 0 6px rgba(0,255,234,0.4);
  }
  40%{
    color:#9acd32;
    text-shadow:
      0 0 2px rgba(154,205,50,0.6),
      0 0 6px rgba(154,205,50,0.4);
  }
  60%{
    color:#ffd700;
    text-shadow:
      0 0 2px rgba(255,215,0,0.6),
      0 0 6px rgba(255,215,0,0.4);
  }
  75%{
    color:#ff66cc;
    text-shadow:
      0 0 2px rgba(255,102,204,0.6),
      0 0 6px rgba(255,102,204,0.4);
  }
  90%{
    color:#ff4444;
    text-shadow:
      0 0 2px rgba(255,68,68,0.6),
      0 0 6px rgba(255,68,68,0.4);
  }
  100%{
    color:#ffffff;
    text-shadow:
      0 0 2px rgba(255,255,255,0.6),
      0 0 6px rgba(255,255,255,0.4);
  }
}

/* =========================================================
   ===== ANIMASI CYAN RUN ==================================
========================================================= */
@keyframes cyanRun {
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* =========================================================
   ===== ANIMASI MARQUEE ===================================
========================================================= */
@keyframes marqueeMove {
  0%   { transform: translateX(35vw); }
  100% { transform: translateX(-100%); }
}

/* ========================================
   ANIMASI MARQUE TRACK - RESPONSIVE MOBILE 
=========================================== */
@media screen and (max-width:600px){
  @keyframes marqueeMove{
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
  }
}

/* ============================================
   ANIMASI GOYANG LEMBUT UNTUK TOMBOL - TOMBOL 
=============================================== */
@keyframes shakeSoft {
  /* Goyang lembut di awal */
  0%   { transform: translateX(0); }
  8%   { transform: translateX(-2px); }
  16%  { transform: translateX(2px); }
  24%  { transform: translateX(-2px); }
  32%  { transform: translateX(0); }

  /* Sisanya diam = jeda */
  100% { transform: translateX(0); }
}


/* ====================================
   ANIMASI BOUNCE SCROLL DI MENU UTAMA 
======================================= */
@keyframes bounceScroll {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(0); }                 /* JEDA 2 detik */
  50%  { transform: translateX(var(--scroll-max)); } /* Gerak ke kiri */
  70%  { transform: translateX(var(--scroll-max)); } /* JEDA kiri */
  100% { transform: translateX(0); }                 /* Kembali + JEDA */
}