
                                       <!-- ========================================================================= 
                                            🔴 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 */
.viewport{
  top:1px;
  bottom:1px;
  aspect-ratio:9/16;
  height:100svh;
  max-width:430px;
  width:100%;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  border: 2px solid #ffa500;
  display:flex;
  flex-direction:column;
  position:relative;
}


/* ========================= OVERLAY ========================= */
#popup-open-lp,
#popup-subscribe{
  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;
}
#popup-open-lp.show,
#popup-subscribe.show{
  display:flex;
}


/* ========================= POPUP SAMBUTAN ========================= */
.popup-box-open-lp{
  width:100%;
  max-width:380px;
  height:88vh;
  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;
}

/* CLOSE X */
.popup-open-close{
  position:absolute;
  top:0;
  right:0;
  padding:8.5px 12px;
  font-size:20px;
  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;
}

/* HEADER SAMBUTAN */
.sambutan-header{
  width:100%;
  padding:10px 10px;
  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:22px;
  margin-bottom: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;
}


/* ========================= PROFILE BOX ========================= */
.popup-open-lp-profile{
  display:flex;
  gap:10px;
  border:4px solid #ff8c00; /* orange modern */
  background:#5a3a1a;
  padding:10px;
  border-radius:50px;
  margin:8px;

  /* ✔ 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: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;
}


/* ========================= TEXT AREA ========================= */
.sambutan-text{
  flex:1;
  padding:10px;
  background:#000;
  color:#fff;
  font-size:18px;
  font-weight:bold;
  overflow-y:auto;
  margin:6px;
  border-radius:10px;
}


/* ========================= BUTTONS ========================= */
.sambutan-btn-wrap{
  display:flex;
  gap:10px;
  padding:12px;
}


/* ================ TOMBOL SKIP ================ */
.btn-skip{
  flex:1;
  background:#6b6b6b;
  color:white;
  border:2px solid #ff8c00; /* orange modern */
  padding:10px;
  border-radius:10px;
  font-weight:bold;
  font-size:16px;
  cursor:pointer;
  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:#D3D3D3; }


/* ============== TOMBOL SUBSCRIBE ============== */
.btn-subscribe{
  flex:1;
  background:#0050FF;
  color:white;
  border:2px solid #ff8c00; /* orange modern */
  padding:10px;
  border-radius:10px;
  font-weight:bold;
  font-size:16px;
  cursor:pointer;
  transition:0.25s ease;
  
  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-subscribe:hover{ background:#00A85A; }


/* ========================= POPUP SUBSCRIBE ========================= */
.popup-subscribe-box{
  width:100%;
  max-width:380px;

  background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
  border-radius:16px;
  overflow:hidden;

  border:4px solid #00FF00;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  padding-bottom:18px;
}

/* ========================= HEADER ========================= */
.sub-header{
  width:100%;
  position:relative;

  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%
  );
  padding:10px 0;
  border-bottom:1px solid #00FF00;
  box-sizing:border-box;
}

/* ========================= TITLE CENTER ========================= */
.sub-title{
  font-size:20px;
  font-weight:bold;
  color:#fff;

  margin:0;
  text-align:center;
  
  width:100%;
  display:block;

  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);
}

/* ========================= CLOSE BUTTON (FIX FINAL STABIL) ========================= */
.sub-close{
  position:absolute;
  top:0;
  right:0;

  padding:5px 12px;
  background:#ff3333;
  color:#ffff;

  font-size:20px;
  font-weight:bold;

  border-bottom-left-radius:12px;
  border-top-right-radius:12px;
  border:3px solid #ff2b2b;
  
  cursor:pointer;
  user-select:none;
  transition:0.25s ease;

  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);
}

/* hover */
.sub-close:hover{
  background:#1565C0;
}

/* ========================= INPUT ========================= */
.sub-input{
  width:90%;
  padding:9px;

  margin-top:16px;
  margin-bottom:10px;

  background:#000;
  border:2px solid #1E90FF;
  border-radius:20px;

  color:#fff !important;
  font-size:18px;
  font-weight:bold;
  text-align:center;

  outline:none;
  box-sizing:border-box;
}

.sub-input::placeholder{
  color:#ffe4c4;
}

.sub-input:focus{
  border-color:#00ffff;
  box-shadow:0 0 8px rgba(0,255,255,0.6);
}

/* ========================= BUTTON ========================= */
.sub-now{
  width:90%;
  padding:8px;

  background:linear-gradient(135deg,#ff8800,#ff5500);
  color:white;

  border-radius:20px;
  border:2px solid #1E90FF;

  font-size:20px;
  font-weight:bold;

  cursor:pointer;
  transition:0.25s ease;
  
  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);
}

.sub-now:hover{
  background:#0F5132;
}


/* ========================= MATIKAN HIGHLIGHT EFEK KLIK ========================= */
.popup-open-close,
.btn-skip,
.btn-subscribe,
.sub-close,
.sub-now {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}


/* ========================= OVERLAY ========================= */
#popup-subscribe{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;

  display:flex;
  justify-content:center;
  align-items:center;

  background:rgba(0,0,0,0.6);
  z-index:99999;

  opacity:0;
  pointer-events:none;
  transition:0.25s ease;
}

#popup-subscribe.show{
  opacity:1;
  pointer-events:auto;
}


/* =========================================================
   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,  /* lebih gelap dari #ff1f6b */
  #e02c3d,  /* lebih gelap dari #ff3344 */
  #cc5500,  /* lebih gelap dari #ff6600 */
  #cc7a00,  /* lebih gelap dari #ff9900 */
  #b9a800,  /* lebih gelap dari #d4c300 */
  #6bb800,  /* lebih gelap dari #7edc00 */
  #00b966,  /* lebih gelap dari #00d977 */
  #009d86,  /* lebih gelap dari #00b899 */
  #006cd6,  /* lebih gelap dari #0088ff */
  #3449d6,  /* lebih gelap dari #3f57ff */
  #6a29d6,  /* lebih gelap dari #7a32ff */
  #a61ad6,  /* lebih gelap dari #c820ff */
  #d10d99,  /* lebih gelap dari #ff0fb3 */
  #d13378,  /* lebih gelap dari #ff3f8e */
  #d6488a   /* lebih gelap dari #ff5aa2 */
  );
  color:#fff;
  padding:0px 10px !important;
  font-size:30px;
  font-weight:bold;
  cursor:pointer;
  border-bottom-left-radius:10px;
  border:2px solid #ffa500;
  display:flex;
  align-items:center;
  justify-content:center;
  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);
}


/* =========================================================
   =============== DROPDOWN MENU ===========================
========================================================= */

.jn-daftar-menu{
  position:absolute;
  top:50px !important;
  right:0;

  width:115px;
  max-width:115px;
  min-width:115px;

  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:12px;
  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:1px solid #00FFFF !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:110px;
    max-width:115px;
    min-width:110px;
  }

  .daftar-item{
    padding:12px 4px;
  }
}


/* ========================================================
   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:380px;
  height:88vh;
  display:flex;
  flex-direction:column;
  background:#000;
  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;
}

/* =========================================================
   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:24px;
  color:#fff;
  padding:8px 15px;
  letter-spacing: 0.6px;
  background: linear-gradient(
  115deg,
  #6b1f45,
  #832d3f,
  #7f5c00,
  #c7a716,
  #0d4a99,
  #007f99,
  #006636,
  #4f62c0
  );
  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:5px 10px;
  font-size:24px;
  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;
}


/* =========================================================
                  POPUP MENU 1
========================================================= */

.jn-popup-menu-1{
  box-sizing:border-box;
}

.jn-popup-menu-1 .img-frame{
  width:320px;
  max-width:90%;
  height:180px;

  margin:10px auto -4px;   /* ❗ FIX: kasih jarak atas dan bawah */
  border:4px solid #FFA500;
  border-radius:10px;
  overflow:hidden;

  display:flex;
  justify-content:center;
  align-items:center;

  background:#000;
}

/* GAMBAR */
.jn-popup-menu-1 .popup-img{
  width:100%;
  height:100%;
  object-fit:contain;        /* isi penuh tanpa distorsi */
  display:block;
  margin-bottom:0;
}

/* DESKRIPSI */
.jn-popup-menu-1 .popup-desc{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0 !important;

  padding-right:5px;
  margin-top:0px !important;
  letter-spacing:1px;
  margin-bottom:10px;
  box-sizing:border-box;
}

/* BUTTON */
.popup-btn{
  margin-top:auto;
  align-self:center;

  display:inline-flex;              /* FIX UTAMA */
  align-items:center;               /* RATA TENGAH */
  gap:6px;                          /* 🔥 JARAK ICON – TEKS – PANAH */

  padding:6px 10px;
  background:#0033A0;
  color:#fff;
  font-size:24px;
  border-radius:25px;
  letter-spacing: 0.5px;
  text-decoration:none;
  font-weight:bold;
  border: 3px solid #FFA500;
  animation: glowRun 1s linear 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 6px #FFA500,
              0 0 10px #FFA500 !important;
}

/* PANAH AFFILIATE FIX */
.panah-affiliate{
  font-size:14px;
  vertical-align:baseline !important;
  animation: blink 0.6s infinite !important;
}

/* ICON SEBELUM TEKS */
.affiliate-icon{
  width:35px;
  height:35px;
  display:inline-block;
  filter: drop-shadow(0 0 4px rgba(0,0,0,1));
}

/* HOVER: jika kursor di tombol, icon ikut hover */
.popup-btn:hover .affiliate-icon{
  transform: scale(1.1);
}

/* HOVER: Tombol + Panah Ikut Hover */
.popup-btn:hover{
  background:#006400;
  border-color:#00e5ff;
  color:#ffffff;
  box-shadow: 0 0 10px #1E90FF,
              0 0 18px #1E90FF !important;
}

.popup-btn:hover .panah-affiliate{
  animation: blink 0.3s 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: linear-gradient(
  115deg,
  #3a0f28,
  #3a1418,
  #3a1f0a,
  #3a2a00,
  #00264d,
  #00363d,
  #00361f,
  #23233a
  );

  border:4px solid rgba(0,255,255,0.5);
  box-sizing:border-box;
}

/* NAMA (FULL ATAS) */
.nama-partner{
  grid-area:nama;
  font-size:18px;
  font-weight:bold;
  color:#ffff;
  line-height:1.2;
  letter-spacing:0.5px;

  animation: glowRun 3s 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;
}

/* IMAGE */
.partner-item img{
  grid-area:img;
  width:60px;
  height:60px;
  border-radius:10px;
  object-fit:cover;
  border:2px solid #00ffff;
}

/* DESKRIPSI (KANAN FOTO) */
.deskripsi-partner{
  grid-area:desc;
  font-size:13px;
  color:#ffff;
  line-height:1.3;
  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;
}

/* 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;

  background:#0066ff;
  border:2px solid #ffa500;
  color:#fff;
  border-radius:25px;

  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;
}

/* ICON PANAH */
.panah-partner{
  display:inline-block;
  font-size:10px;
  line-height:1;
  color:#ffa500;
  animation: blink 0.8s infinite;

  /* 🔥 FIX: supaya tidak mengganggu hover tombol */
  pointer-events:none;
  
  display:inline-flex !important;
  vertical-align:baseline;
  transform: translateY(1px);
}

/* ============  
   HOVER tombol  
=============== */
.partner-btn:hover{
  background:#1B5E20;
  border:2px solid #ff8800;
}

/* ============  
   HOVER Panah  
=============== */
.partner-btn .panah-partner:hover{
  animation: blink 0.2s infinite;
}

/* 🔥 TAMBAHAN: panah ikut efek saat tombol di-hover */
.partner-btn:hover .panah-partner{
  animation: blink 0.2s infinite;
}

/* ========================= 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: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;
}

.profile-box .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;

  /* 👉 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;
  overflow-y:auto;
  overflow-x:hidden;
  margin-top:3px;
  letter-spacing: 1px;
}


/* =============== LABEL KONTEN BERSPONSOR ================ */

.sponsored-label{
  position:absolute;
  top:1px;
  left:1px;

  display:flex;
  align-items:center;
  gap:5px;

  background:rgba(0,0,0,.65);
  color:#fff;

  font-size:12px;
  font-weight:bold;

  padding:2px 4px;
  border-radius:8px;

  z-index:7;

  /* FIX AMAN (TIDAK UBAH LAYOUT) */
  box-sizing:border-box;
}

.sponsored-label img{
  width:14px;
  height:14px;

  border-radius:50%;
  object-fit:cover;

  /* FIX AMAN */
  display:block;
}


/* FOLLOWERS (AMAN DI DALAM CARD — TIDAK DIUBAH) */
.followers{
  position:absolute;
  left:0;
  top:140px;

  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 */
.slider{
  width:100%;
  height:190px;
  aspect-ratio:16/9;   /* 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:100%;
  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:156px !important;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  padding:6px 8px;
  font-size:12px;
  border-radius:20px;
  font-weight:bold;
  text-decoration:none;

  opacity:0;
  visibility:hidden;
  pointer-events:auto;

  z-index: 1 !important;
  border: 2px solid #00ffff;
  isolation:isolate;
  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;
}

.ads-btn.active {
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  animation: popIn 0.4s ease forwards, bgColorChange 8s steps(4) infinite !important;
}

/* ========================================================
   ===== ANIMASI POP IN ====================================
========================================================= */
@keyframes popIn {
  0%   { transform:translateX(-50%) scale(0.4); opacity:0; }
  100% { transform:translateX(-50%) scale(1); opacity:1; }
}

.ads-btn:hover{
  color:orange;
  box-shadow: 0 0 6px #00ff00, 
              0 0 10px #00ff00 !important;
}

/* ========================= MATIKAN HIGHLIGHT EFEK KLIK ========================= */
.ads-btn {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}


/* === 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;     /* opsional karena background foto hitam */
  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%, /* 🔥 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;
}

/* 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;
  /* 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;
  
  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; /* 🔥 KUNCI UTAMA BIAR SEJAJAR */

  /* shadow icon */
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
}

.title-left .tagline{
  font-size:12px;
  font-weight:bold;
  font-style:italic;
  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;
  /* DROP SHADOW HITAM SANGAT JELAS */
  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;
  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;
}

/* ==== RESPONSIVE MOBILE ==== */
@media screen and (max-width:600px){
  
  .title-left .name{
    font-size: 14px;
	font-weight: bold;
  }
  .title-left .name::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  bottom: 0px;
  }
  .title-left .tagline{
  font-size:12px;
  font-weight: bold;
  font-style: italic;
  opacity:1;
  margin-left:1px;
  }
}


/* ================== 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:fit-content;
  max-width:100%;
  padding:5px 16px !important;
  border-radius:25px;
  background: linear-gradient(90deg, #002a5c, #00a6b8, #002a5c);
  background-size: 300% 100%;
  animation: cyanRun 5s linear infinite;
  border: 4px solid #ffa500;
  color:#fff;
  font-weight:bold;
  font-size:20px;
  letter-spacing: 0.5px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;

  cursor:pointer;
  margin:0 auto 5px auto;
  user-select:none;
  gap:10px;
  white-space:nowrap;
}

/* =========================================================
   ===== ICON ==============================================
========================================================= */
.btn .icon{
  width:32px !important;
  height:32px !important;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn .icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* ===== TEKS DI DALAM TOMBOL ===== */
.btn span{
  display:inline-block;
  position:relative;
  z-index:2;
  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;
}

/* ===== EFEK TOMBOL ====================================== */
.btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:35%;
  height:100%;

  z-index:1;

  transform:skewX(-20deg);
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.15) 40%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.15) 60%,
    rgba(255,255,255,0) 100%
  );
  pointer-events:auto;
}

/* ===== HOVER TOMBOL ===================================== */
.btn:hover{
  border: 4px solid #00FFFF;
  background:#006400;
  color:orange;
  box-shadow:0 0 6px #ff0033, 0 0 10px #ff0033 !important;
}

/* ===== AKTIF MENU ======================================= */
.row.active .btn{
  border: 4px solid #00FFFF;
  background:#006400;
  color:orange;
  box-shadow:0 0 6px #ff0033, 0 0 10px #ff0033 !important;
}

/* =========================================================
   ===== PANAH MENU ========================================
========================================================= */
.panah-menu{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(
  115deg,
  #c83a78,
  #c84a4a,
  #c86b1a,
  #239a55,
  #0093aa,
  #2f5fc2,
  #4f45b8,
  #9a2fb8,
  #c02f7f
  );
  padding:5px 6px;
  border-radius:50%;
  border: 4px solid #ffa500;
  margin-top:0;
  line-height:1;
  font-size: 14px;
  transition:.3s;
  
  /* Shadow Hitam Elegant (SUPER JELAS & TEBAL) */
  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;
}

/* penting: paksa center stabil */
.panah-menu .icon-panah-menu{
  display:inline-block;
  transition:.3s;
  transform-origin:center;
  animation: blink 0.8s infinite;
  /* FIX OPTICAL CENTER */
  position: relative;
  left: 0px;
}

/* hover */
.btn:hover .panah-menu .icon-panah-menu{
  color: orange;
  animation: blink 0.2s infinite !important;
}

/* ACTIVE → rotate + optical correction */
.row.active .panah-menu .icon-panah-menu{ 
  transform: rotate(90deg);
  position: relative;
  left: -1px !important; /* ini kunci biar gak geser kanan */
  top: 1px !important; /* ini kunci biar gak geser atas */
}

/* =========================================================
   ===== 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:5px !important;
}

.ads-box{
  width:100%;
  text-align:center;
}

/* =========================================================
   ===== TITLE BAR NAMA APLIKASI / TOOL ====================
========================================================= */
.photo-title-bar{
  width:100%;
  max-width:420px;
  margin:0 auto 6px auto;
  background:#A52A2A;
  color:#fff;
  border-radius:6px;
  border: 2px solid #ff4d4d;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 8px;
  box-sizing:border-box;
}

.photo-title-text{
  font-weight:bold;
  font-size:20px !important;
  text-align:left;
  /* 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;
}

/* =========================================================
   ===== TITLE BAR CLOSE MENU ==============================
========================================================= */
.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;
  
  /* 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;
}

.photo-close:hover {
  background: #004aad !important;
}

/* =========================================================
   ===== IMAGE =============================================
========================================================= */
.content-img{
  width:100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background:#000;
  border-radius:10px;
  display:block;
  margin:0 auto;
}

/* =========================================================
   ===== ADS BOTTOM ========================================
========================================================= */
.ads-bottom{
  display:flex;
  gap:12px;
  width:100%;
  max-width:420px;
  margin:5px auto 0 auto;
  padding:0 6px;
  box-sizing:border-box;
}


/* =========================================================
   ===== LINK ==============================================
========================================================= */

.desc-link,
.try-link{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px !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{
  color:orange;
  box-shadow:0 0 6px #ff0033, 0 0 10px #ff0033;
}

.try-link{
  background:#004aad;
  color:#fff;
  gap:5px !important;
  animation: glowRun 0.5s linear infinite !important;
}

/* =========================================================
   ICON PANAH (FIX SEJAJAR BOTTOM VISUAL)
========================================================= */

.panah-trylink{
  font-size:12px;
  display:inline-block;
  line-height:1;

  margin-left:4px;

  /* 🔥 FIX UTAMA: turunkan sedikit agar sejajar baseline teks */
  position:relative;
  top:1px;

  transition:.3s;
  animation: blink 0.8s infinite !important;
}

.try-link:hover .panah-trylink{
  animation: blink 0.2s infinite !important;
  color:orange;
}



/* =========================================
   ===== POPUP 2 UNTUK MENU CONTENT ========
============================================ */

#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;
  box-sizing:border-box;

  /* FIX STABIL ANTI SCALING */
  overflow:hidden;
}

#popup-2.show{
  display:flex;
}

#popup-2 .popup-box-2{
  width:100%;
  max-width:380px;
  height:88vh;

  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;

  box-sizing:border-box;

  /* FIX ANTI LAYOUT SHIFT */
  flex-shrink:0;
}

/* ===== 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:20px !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;
}

/* ===== JUDUL ===== */
.popup-title-2{
  width:100%;
  padding:8px 15px;

  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:22px !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%;
  display:block;
  object-fit:contain;

  margin:10px auto 0 auto;
  padding:0;

  border:3px solid orange;
  border-radius:12px;

  align-self:center;

  /* FIX STABIL */
  max-width:90%;
}

/* ===== TEXT AREA ===== */
#popupText-2{
  padding:10px;
  overflow-y:auto;

  font-weight:bold;
  color:#fff;
  font-size:15px;

  white-space:pre-line;
  letter-spacing:0.5px;

  box-sizing:border-box;

  margin-top:5px !important;
  margin-bottom:10px !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;
}

/* ================================================
   🔵 SCROLLBAR (DEEP BLUE STABLE)
================================================ */

#popupText-2::-webkit-scrollbar {
  width:5px;
}

#popupText-2::-webkit-scrollbar-track {
  background:transparent;
  border-radius:999px;
}

#popupText-2::-webkit-scrollbar-thumb {
  background:#0033A0;   /* 🔵 DEEP BLUE */
  border-radius:999px;
}

#popupText-2::-webkit-scrollbar-thumb:hover {
  background:#001f66;
}

#popupText-2 {
  scrollbar-width:auto;
  scrollbar-color:#0033A0 transparent;
}

/* ===== BUTTON ===== */
.popup-btn-2{
  position:sticky;
  bottom:0;

  display:block;
  width:75%;

  margin-top:auto;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:8px;

  text-align:center;
  padding:8px 10px;

  background:#8B4513;
  color:#fff;

  font-weight:bold;
  font-size:22px !important;

  letter-spacing:0.5px;
  text-decoration:none !important;

  border-radius:20px;
  border:2px solid #00ffff;

  animation: glowRun 1s linear infinite, blink 0.5s infinite !important;

  z-index:2;

  box-shadow:0 0 6px #00ff00,
             0 0 10px #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;
}

.popup-btn-2:hover {
  background:#004aad !important;
  box-shadow:0 0 10px #800000,
             0 0 18px #800000 !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;
  /* 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:12px;
  height:12px;
  background-image:url("https://img.icons8.com/?size=96&id=V5cGWnc9R4xj&format=png");
  background-size:cover;
  display:inline-block;
  position:relative;
  top:2px;
  left:-2px;
}

/* ===== WRAPPER 2 KOLOM ===== */
.ads-wrapper{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;

  gap:10px;

  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 4:3 ===== */
.ads-img{
  width:100%;
  aspect-ratio:4 / 3;   /* ✔ FIX RASIO */
  object-fit:cover;

  border-radius:8px;
  display:block;
  cursor:pointer;
  transition:transform 0.25s ease;
}

.ads-img:hover{
  transform:scale(1.03);
}


/* ========================= 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:5;          /* pastikan di atas .content-bg */
}

.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: 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%); }
}

/* ==========================
   RESPONSIVE MOBILE 
========================== */
@media screen and (max-width:600px){
  @keyframes marqueeMove{
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
  }
}