/* =====================================================
   JAKSKY MOON HERO V3
   hanya memperbaiki HERO
   GRID VIDEO TIDAK DISENTUH
===================================================== */

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

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

  min-height:560px !important;

  margin:0 0 16px !important;
  padding:0 !important;

  overflow:hidden !important;

  border:0 !important;

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

  background:#02091d !important;

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

  isolation:isolate !important;
}


/* FOTO ASLI */
.jakMoonHeroBgV3{
  position:absolute !important;

  z-index:0 !important;

  inset:0 !important;

  width:100% !important;
  height:100% !important;

  display:block !important;

  object-fit:cover !important;

  /* fokus bulan + wajah */
  object-position:
    50% 25% !important;

  pointer-events:none !important;

  user-select:none !important;
}


/* lapisan agar teks tetap jelas */
.jakMoonHeroShadeV3{
  position:absolute;

  z-index:1;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(0,5,25,.13) 0%,
      rgba(0,6,27,.03) 30%,
      rgba(0,7,28,.24) 54%,
      rgba(0,7,27,.72) 78%,
      rgba(1,8,27,.96) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,8,31,.17),
      transparent 55%
    );
}


/* ======================================
   TOP BAR
====================================== */

.jakMoonTopV3{
  position:absolute;

  z-index:10;

  top:0;
  left:0;
  right:0;

  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  padding:
    19px 18px 0;
}


.jakMoonBrandV3{
  min-width:0;

  display:flex;
  flex-direction:column;

  align-items:flex-start;
}


/* Logo */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakMoonBrandV3 .brandLogo{
  position:relative !important;

  width:auto !important;

  margin:0 !important;

  justify-content:flex-start !important;

  font-size:34px !important;
  line-height:1 !important;

  filter:none !important;
}


/* Hilangkan dekorasi lama yang ramai */
.jakMoonBrandV3 .jakBoltV31,
.jakMoonBrandV3 .jakArcV31,
.jakMoonBrandV3 .jakSparkV31{
  display:none !important;
}

.jakMoonBrandV3 .brandLogo,
.jakMoonBrandV3 .brandLogo *{
  animation:none !important;
}


/* JakSky putih-biru seperti mockup */
.jakMoonBrandV3 .jakTextV31{
  font-weight:1000 !important;

  letter-spacing:-1.4px !important;

  background:
    linear-gradient(
      100deg,
      #ffffff 0%,
      #ffffff 31%,
      #7fd0ff 62%,
      #7186ff 100%
    ) !important;

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

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

  color:transparent !important;

  text-shadow:none !important;

  filter:none !important;
}


/* crown kecil */
.jakMoonBrandV3::after{
  content:"♛";

  position:absolute;

  top:-5px;
  left:192px;

  color:#8bbaff;

  font-size:14px;

  transform:rotate(8deg);

  text-shadow:
    0 0 10px rgba(82,178,255,.55);
}


/* subtitle kecil */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakMoonBrandV3 .brandSub{
  position:static !important;

  width:auto !important;
  max-width:260px !important;

  margin:
    7px 0 0 !important;

  color:#dce9ff !important;

  font-size:10px !important;

  line-height:1.3 !important;

  font-weight:700 !important;

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


/* ======================================
   TOP ACTIONS
====================================== */

.jakMoonActionsV3{
  display:flex;

  align-items:center;

  gap:8px;

  flex:0 0 auto;
}


body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakMoonActionsV3 #jakMusicLauncher,

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakMoonActionsV3 #notifBell,

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakMoonActionsV3 #jakThemeToggle{

  position:relative !important;

  top:auto !important;
  right:auto !important;
  left:auto !important;
  bottom:auto !important;

  margin:0 !important;

  width:44px !important;
  min-width:44px !important;

  height:44px !important;
  min-height:44px !important;

  padding:0 !important;

  display:grid !important;

  place-items:center !important;

  border-radius:50% !important;

  border:
    1px solid rgba(117,193,255,.38) !important;

  background:
    rgba(2,15,48,.72) !important;

  color:#fff !important;

  font-size:18px !important;

  box-shadow:
    0 8px 22px rgba(0,5,29,.39),
    inset 0 1px 0 rgba(255,255,255,.08)
    !important;

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

  animation:none !important;
}


.jakMoonActionsV3
#jakMusicLauncher .jakMusicLabel,

.jakMoonActionsV3
#jakMusicLauncher .jakMusicBars{
  display:none !important;
}


.jakMoonActionsV3
#jakMusicLauncher .jakMusicNote{
  margin:0 !important;

  font-size:18px !important;
}


/* notif badge tetap */
.jakMoonActionsV3 #notifBadge{
  top:-2px !important;
  right:-2px !important;
}


/* ======================================
   BIG HERO TEXT
====================================== */

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakMoonHeroCopyV2{

  position:absolute !important;

  z-index:8 !important;

  left:25px !important;
  right:25px !important;

  bottom:31px !important;

  max-width:360px !important;

  text-align:left !important;
}


.jakMoonHeroCopyV2 h1{
  margin:0 !important;

  font-size:
    clamp(51px,14vw,72px) !important;

  line-height:.92 !important;

  font-weight:1000 !important;

  letter-spacing:-3px !important;

  background:
    linear-gradient(
      100deg,
      #ffffff 0%,
      #f7fbff 28%,
      #5fc6ff 63%,
      #7286ff 100%
    ) !important;

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

  color:transparent !important;

  text-shadow:none !important;

  filter:
    drop-shadow(
      0 4px 12px rgba(0,5,30,.32)
    ) !important;
}


.jakMoonHeroCopyV2 .jakMoonTagline{
  margin:
    12px 0 17px !important;

  max-width:300px !important;

  color:#f0f5ff !important;

  font-size:18px !important;

  line-height:1.25 !important;

  font-style:italic !important;

  font-weight:650 !important;

  text-shadow:
    0 3px 11px rgba(0,0,0,.90) !important;
}


.jakMoonFeaturesV2{
  display:grid !important;

  gap:8px !important;
}


.jakMoonFeaturesV2 span{
  display:flex !important;

  align-items:center !important;

  gap:10px !important;

  color:#f4f8ff !important;

  font-size:12px !important;

  font-weight:800 !important;

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


.jakMoonFeaturesV2 i{
  width:28px !important;
  height:28px !important;

  display:grid !important;

  place-items:center !important;

  border-radius:9px !important;

  color:#8ed7ff !important;

  background:
    rgba(18,80,158,.44) !important;

  border:
    1px solid rgba(112,193,255,.31) !important;

  font-style:normal !important;

  box-shadow:
    0 0 13px rgba(39,145,255,.15) !important;
}


/* Update pill lama */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
.brandHero > .brandMini{
  display:none !important;
}


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

@media(max-width:520px){

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

  .jakMoonHeroBgV3{
    object-position:
      50% 23% !important;
  }

  .jakMoonTopV3{
    padding:
      18px 17px 0 !important;
  }

  body.jakPageHome.jakUiRefreshV10.jakMoonV2
  .jakMoonBrandV3 .brandLogo{
    font-size:30px !important;
  }

  .jakMoonBrandV3::after{
    left:167px;
  }

  body.jakPageHome.jakUiRefreshV10.jakMoonV2
  .jakMoonActionsV3 #jakMusicLauncher,

  body.jakPageHome.jakUiRefreshV10.jakMoonV2
  .jakMoonActionsV3 #notifBell,

  body.jakPageHome.jakUiRefreshV10.jakMoonV2
  .jakMoonActionsV3 #jakThemeToggle{
    width:41px !important;
    min-width:41px !important;

    height:41px !important;
    min-height:41px !important;
  }

  body.jakPageHome.jakUiRefreshV10.jakMoonV2
  .jakMoonHeroCopyV2{
    left:23px !important;
    right:23px !important;

    bottom:27px !important;
  }

}


/* ======================================
   PENTING:
   TIDAK ADA CSS #list / .card SIZE.
   GRID ASLI TETAP.
====================================== */