/* ==========================================================
   JAKSKY MOON V2
   Redesign mengikuti konsep Moon
   GRID / UKURAN CARD TIDAK DIUBAH
========================================================== */

:root{
  --m2-bg:#020817;
  --m2-panel:rgba(5,20,52,.94);
  --m2-panel2:rgba(8,28,66,.94);
  --m2-blue:#35a9ff;
  --m2-blue2:#6674ff;
  --m2-text:#f5f9ff;
  --m2-muted:#9eb2d3;
  --m2-line:rgba(100,177,255,.25);
}


/* ==========================================================
   PAGE
========================================================== */

html{
  background:#020612 !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2{
  background:
    radial-gradient(
      circle at 15% 15%,
      #102a68 0,
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #02091d 0%,
      #030c23 42%,
      #020817 100%
    ) !important;

  color:var(--m2-text) !important;
}


/* Faint moon photo behind lower page */
body.jakPageHome.jakUiRefreshV10.jakMoonV2::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;

  background:
    linear-gradient(
      rgba(2,8,25,.83),
      rgba(2,8,25,.94)
    ),
    url("/jaksky-moon-bg.jpg")
    center top / cover no-repeat;

  opacity:.46;

  pointer-events:none;
}


/* ==========================================================
   HERO — BIG CHANGE
========================================================== */

body.jakPageHome.jakUiRefreshV10.jakMoonV2 .brandHero{
  position:relative !important;

  width:100% !important;
  max-width:none !important;

  min-height:540px !important;

  margin:0 0 16px !important;

  padding:
    25px 22px 30px !important;

  overflow:hidden !important;

  border-radius:
    0 0 30px 30px !important;

  border:0 !important;

  background-image:
    linear-gradient(
      180deg,
      rgba(0,8,31,.12) 0%,
      rgba(0,8,31,.06) 33%,
      rgba(0,9,32,.48) 69%,
      rgba(0,8,27,.93) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,9,34,.12),
      transparent 50%,
      rgba(0,5,24,.08)
    ),
    url("/jaksky-moon-bg.jpg") !important;

  background-size:
    cover !important;

  background-position:
    center 27% !important;

  background-repeat:
    no-repeat !important;

  box-shadow:
    0 18px 45px rgba(0,5,30,.46) !important;

  text-align:left !important;
}


/* no old shine */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
.brandHero::before,

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.brandHero::after{
  display:none !important;
  animation:none !important;
}


/* Small top JakSky logo */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
.brandLogo{
  position:relative !important;
  z-index:5 !important;

  width:max-content !important;

  margin:0 !important;

  justify-content:flex-start !important;

  font-size:34px !important;

  filter:none !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.brandLogo *{
  animation:none !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.brandLogo .jakTextV31{
  background:
    linear-gradient(
      90deg,
      #fff 0%,
      #dcebff 27%,
      #6bcaff 62%,
      #7286ff 100%
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

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

  filter:none !important;
}


/* Existing subtitle becomes top subtitle */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
.brandSub{
  position:relative !important;
  z-index:5 !important;

  width:max-content !important;
  max-width:72% !important;

  margin:5px 0 0 !important;

  color:#d5e4ff !important;

  font-size:11px !important;
  line-height:1.4 !important;
  font-weight:750 !important;

  text-shadow:
    0 2px 8px rgba(0,0,0,.50) !important;
}


/* old update pill not needed in hero */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
.brandMini{
  display:none !important;
}


/* ==========================================================
   BIG HERO COPY
========================================================== */

.jakMoonHeroCopyV2{
  position:absolute;

  z-index:5;

  left:24px;
  right:24px;
  bottom:31px;

  max-width:360px;

  text-shadow:
    0 3px 15px rgba(0,4,25,.85);
}

.jakMoonHeroCopyV2 h1{
  margin:0;

  font-size:
    clamp(46px,14vw,73px);

  line-height:.93;

  font-weight:1000;

  letter-spacing:-3px;

  background:
    linear-gradient(
      100deg,
      #ffffff 0%,
      #e7f4ff 26%,
      #52bcff 63%,
      #657cff 100%
    );

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

  color:transparent;
}

.jakMoonHeroCopyV2 .jakMoonTagline{
  margin:12px 0 18px;

  color:#eaf3ff;

  font-size:19px;
  line-height:1.25;
  font-style:italic;
  font-weight:650;
}

.jakMoonFeaturesV2{
  display:grid;
  gap:9px;

  width:max-content;
}

.jakMoonFeaturesV2 span{
  display:flex;
  align-items:center;
  gap:10px;

  color:#edf5ff;

  font-size:13px;
  font-weight:750;
}

.jakMoonFeaturesV2 i{
  width:25px;
  height:25px;

  display:grid;
  place-items:center;

  border-radius:8px;

  background:
    rgba(39,132,255,.22);

  border:
    1px solid rgba(107,194,255,.20);

  font-style:normal;

  color:#7ed2ff;
}


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

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#jakMusicLauncher{
  top:22px !important;
  right:116px !important;

  width:44px !important;
  height:44px !important;

  padding:0 !important;

  border-radius:50% !important;

  border:
    1px solid rgba(122,190,255,.34) !important;

  background:
    rgba(3,16,49,.76) !important;

  color:#dff3ff !important;

  box-shadow:
    0 7px 22px rgba(0,6,33,.36) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#jakMusicLauncher .jakMusicLabel{
  display:none !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#jakMusicLauncher .jakMusicBars{
  display:none !important;
}


/* notification */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
#notifBell{
  position:absolute !important;

  top:22px !important;
  right:68px !important;

  width:44px !important;
  height:44px !important;

  border-radius:50% !important;

  color:#e8f5ff !important;

  border:
    1px solid rgba(122,190,255,.34) !important;

  background:
    rgba(3,16,49,.76) !important;

  box-shadow:
    0 7px 22px rgba(0,6,33,.36) !important;
}


/* theme moon */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
#jakThemeToggle{
  position:absolute !important;

  top:22px !important;
  right:18px !important;

  width:44px !important;
  height:44px !important;

  border-radius:50% !important;

  border:
    1px solid rgba(122,190,255,.34) !important;

  background:
    rgba(3,16,49,.76) !important;

  color:#fff !important;

  box-shadow:
    0 0 21px rgba(56,175,255,.21) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


/* ==========================================================
   ONLINE STATS
========================================================== */

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#jakLiveSummary{
  width:calc(100% - 28px) !important;
  max-width:900px !important;

  margin:
    -6px auto 14px !important;

  background:transparent !important;

  border:0 !important;

  box-shadow:none !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#jakLiveSummaryButton{
  min-height:72px !important;

  padding:
    9px 12px !important;

  border-radius:20px !important;

  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      rgba(5,24,65,.97),
      rgba(7,30,77,.97)
    ) !important;

  border:
    1px solid rgba(81,166,255,.41) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 25px rgba(0,7,36,.35) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakLiveMetric{
  gap:3px !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakLiveMetric strong{
  color:#fff !important;

  font-size:18px !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakLiveMetric small{
  color:#9eb6da !important;

  font-size:9px !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakLiveDivider{
  background:
    linear-gradient(
      transparent,
      rgba(111,181,255,.28),
      transparent
    ) !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakLiveDot{
  animation:none !important;

  background:#42ee9a !important;

  box-shadow:
    0 0 11px rgba(49,235,143,.65) !important;
}


/* ==========================================================
   ELEMENTS NOT PRESENT IN CONCEPT
   only hidden visually, not deleted
========================================================== */

/* Promo slider remains in DOM but doesn't break new hero */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
#jakPromoSlider{
  display:none !important;
}


/* old live activity bar */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakLiveBarV4{
  display:none !important;
}


/* ==========================================================
   SEARCH AREA
========================================================== */

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.userTop{
  position:relative !important;
  top:auto !important;

  z-index:5 !important;

  width:calc(100% - 28px) !important;
  max-width:900px !important;

  margin:0 auto !important;

  padding:0 !important;

  background:transparent !important;

  border:0 !important;

  box-shadow:none !important;
}


/* SEARCH */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
#search{
  width:100% !important;

  height:58px !important;

  padding:
    0 19px !important;

  border-radius:17px !important;

  color:#eef6ff !important;

  background:
    rgba(5,23,61,.94) !important;

  border:
    1px solid rgba(91,170,255,.32) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 22px rgba(0,6,31,.25) !important;

  outline:none !important;

  font-size:14px !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#search::placeholder{
  color:#8ba6cf !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#search:focus{
  border-color:#42b5ff !important;

  box-shadow:
    0 0 0 3px rgba(45,168,255,.10),
    0 8px 22px rgba(0,6,31,.25)
    !important;
}


/* ==========================================================
   FILTERS
========================================================== */

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#filterTabs{
  gap:8px !important;

  padding:
    11px 0 8px !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#filterTabs button{
  min-height:42px !important;

  padding:
    0 15px !important;

  border-radius:14px !important;

  color:#bdcee9 !important;

  background:
    rgba(6,24,61,.92) !important;

  border:
    1px solid rgba(90,165,255,.25) !important;

  box-shadow:none !important;

  animation:none !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#filterTabs button.active{
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #1097ff,
      #3f7cff
    ) !important;

  border-color:#62c1ff !important;

  box-shadow:
    0 0 17px rgba(37,164,255,.32),
    inset 0 1px 0 rgba(255,255,255,.22)
    !important;
}


/* ==========================================================
   OWNER / FREE QUOTA
========================================================== */

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakFreeQuotaBar{
  width:calc(100% - 28px) !important;
  max-width:900px !important;

  margin:
    5px auto 10px !important;

  min-height:54px !important;

  border-radius:16px !important;

  color:#e8f3ff !important;

  background:
    linear-gradient(
      135deg,
      rgba(5,24,62,.94),
      rgba(8,38,86,.92)
    ) !important;

  border:
    1px solid rgba(91,167,255,.22) !important;

  box-shadow:
    0 7px 21px rgba(0,5,29,.24) !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakFreeQuotaBar b{
  color:#e6f4ff !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakFreeQuotaBar small{
  color:#8fa8cc !important;
}


/* ==========================================================
   SECTION HEADING
========================================================== */

.jakMoonSectionTitleV2{
  width:calc(100% - 28px);
  max-width:1100px;

  margin:
    14px auto 3px;

  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:10px;

  color:#fff;
}

.jakMoonSectionTitleV2 > div{
  min-width:0;
}

.jakMoonSectionTitleV2 h2{
  margin:0;

  font-size:22px;
  line-height:1.15;

  font-weight:950;
}

.jakMoonSectionTitleV2 p{
  margin:3px 0 0;

  color:#9eb3d4;

  font-size:11px;
  font-style:italic;
}

.jakMoonSectionTitleV2 span{
  color:#40b9ff;

  font-size:11px;
  font-weight:850;

  white-space:nowrap;
}


/* ==========================================================
   GRID
========================================================== */

/*
   PENTING:

   TIDAK ADA:
   - display:grid
   - grid-template-columns
   - gap
   - padding
   - card width
   - card height
   - thumbnail height

   Semua ukuran grid memakai JakSky ASLI.
*/


/* ==========================================================
   VIDEO CARD — skin only
========================================================== */

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#list .card{
  color:#fff !important;

  background:
    linear-gradient(
      165deg,
      #0a2453,
      #061632
    ) !important;

  border:
    1px solid rgba(85,165,255,.28) !important;

  box-shadow:
    0 8px 23px rgba(0,5,27,.34) !important;

  transform:none !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#list .card:active{
  transform:scale(.985) !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#list .thumb{
  background:#030b1e !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#list .body{
  color:#fff !important;

  background:
    linear-gradient(
      180deg,
      #0a2453,
      #061733
    ) !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#list .body b{
  color:#f5f9ff !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#list .meta span,

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#list .stats span{
  color:#a2b7da !important;

  background:
    rgba(10,39,84,.68) !important;

  border-color:
    rgba(103,173,255,.14) !important;

  box-shadow:none !important;
}


/* Favorite */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
.btnFav{
  color:#fff !important;

  background:
    rgba(2,11,31,.82) !important;

  border:
    1px solid rgba(120,188,255,.28) !important;

  box-shadow:
    0 5px 15px rgba(0,0,0,.24) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.btnFav.active{
  background:
    linear-gradient(
      135deg,
      #129bff,
      #6a62ff
    ) !important;
}


/* ==========================================================
   CS
========================================================== */

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#jakCsLauncher{
  background:
    linear-gradient(
      135deg,
      #118eff,
      #5366ff
    ) !important;

  color:#fff !important;

  border:
    1px solid rgba(126,207,255,.38) !important;

  box-shadow:
    0 7px 20px rgba(17,128,255,.29) !important;

  animation:none !important;
}


/* ==========================================================
   BOTTOM NAV
========================================================== */

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.bottomNav{
  background:
    linear-gradient(
      135deg,
      rgba(4,19,52,.98),
      rgba(8,31,73,.98)
    ) !important;

  border:
    1px solid rgba(95,174,255,.29) !important;

  box-shadow:
    0 13px 36px rgba(0,4,26,.52) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.bottomNav button{
  color:#96add1 !important;

  background:transparent !important;

  box-shadow:none !important;

  animation:none !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.bottomNav button span{
  color:inherit !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.bottomNav button:is(
  .jakNavActive,
  .activeNav,
  .active
){
  color:#fff !important;

  background:
    linear-gradient(
      145deg,
      rgba(16,139,255,.37),
      rgba(60,92,255,.29)
    ) !important;

  border:
    1px solid rgba(88,191,255,.33) !important;

  box-shadow:
    inset 0 0 18px rgba(48,170,255,.12)
    !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.bottomNav button:is(
  .jakNavActive,
  .activeNav,
  .active
) span{
  color:#5bc5ff !important;
}


/* ==========================================================
   VIDEO MODAL
========================================================== */

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#modal{
  background:
    rgba(0,5,19,.91) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#modal .modalBox{
  color:#fff !important;

  background:
    linear-gradient(
      160deg,
      #0a214b,
      #05132d
    ) !important;

  border:
    1px solid rgba(91,172,255,.26) !important;

  box-shadow:
    0 30px 75px rgba(0,0,0,.57) !important;
}

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#mtitle{
  color:#fff !important;
}


/* ==========================================================
   PERFORMANCE
========================================================== */

body.jakPageHome.jakUiRefreshV10.jakMoonV2
[class*="shine"],

body.jakPageHome.jakUiRefreshV10.jakMoonV2
[class*="Shine"],

body.jakPageHome.jakUiRefreshV10.jakMoonV2
[class*="Pulse"]{
  animation:none !important;
}


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

@media(max-width:520px){

  body.jakPageHome.jakUiRefreshV10.jakMoonV2
  .brandHero{
    min-height:535px !important;

    background-position:
      center 25% !important;
  }

  .jakMoonHeroCopyV2{
    left:21px;
    right:21px;
    bottom:27px;
  }

  .jakMoonHeroCopyV2 h1{
    font-size:55px;
  }

  .jakMoonHeroCopyV2 .jakMoonTagline{
    max-width:280px;
    font-size:17px;
  }

}


/* very small */
@media(max-width:370px){

  .jakMoonHeroCopyV2 h1{
    font-size:48px;
  }

  body.jakPageHome.jakUiRefreshV10.jakMoonV2
  .brandHero{
    min-height:500px !important;
  }

}