/* =====================================================
   JAKSKY MOON POLISH V1
   HANYA RAPIIKAN UI
   UKURAN GRID TIDAK DIUBAH
===================================================== */


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

body.jakPageHome.jakUiRefreshV10.jakMoonV2{
  background:
    linear-gradient(
      180deg,
      #020817 0%,
      #04112c 44%,
      #020817 100%
    ) !important;
}


/* ===== HERO ===== */

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

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

  margin-bottom:12px !important;
}


/* tampilkan karakter + bulan lebih enak */
.jakMoonHeroBgV3{
  object-position:
    50% 17% !important;
}


/* gradasi bawah lebih halus */
.jakMoonHeroShadeV3{
  background:
    linear-gradient(
      180deg,
      rgba(0,5,25,.08) 0%,
      rgba(0,7,28,.03) 30%,
      rgba(0,7,28,.23) 57%,
      rgba(1,8,29,.72) 79%,
      #03102a 100%
    ) !important;
}


/* ===== TOP HEADER ===== */

.jakMoonTopV3{
  top:0 !important;

  padding:
    15px 16px 0 !important;

  align-items:center !important;

  z-index:20 !important;
}


/* logo atas */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakMoonBrandV3 .brandLogo{
  display:flex !important;

  font-size:28px !important;

  opacity:1 !important;

  visibility:visible !important;

  z-index:20 !important;
}


/* subtitle header */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakMoonBrandV3 .brandSub{
  max-width:230px !important;

  margin-top:5px !important;

  font-size:9px !important;

  color:#c9dbf7 !important;
}


/* top action circles */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakMoonActionsV3 #jakMusicLauncher,

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

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

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

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

  background:
    rgba(3,17,48,.85) !important;

  border:
    1px solid rgba(109,190,255,.28) !important;

  box-shadow:
    0 5px 16px rgba(0,0,0,.28)
    !important;
}


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

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.jakMoonHeroCopyV2{

  left:27px !important;
  right:27px !important;

  bottom:27px !important;
}


.jakMoonHeroCopyV2 h1{
  font-size:53px !important;

  letter-spacing:-2.7px !important;
}


.jakMoonHeroCopyV2 .jakMoonTagline{
  margin:
    10px 0 15px !important;

  font-size:16px !important;

  line-height:1.27 !important;
}


.jakMoonFeaturesV2{
  gap:7px !important;
}


.jakMoonFeaturesV2 span{
  font-size:11px !important;
}


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

  border-radius:8px !important;
}


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

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#jakLiveSummary{
  margin:
    0 auto 13px !important;
}


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

  border-radius:19px !important;

  background:
    linear-gradient(
      135deg,
      #061d4b,
      #082b65
    ) !important;

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


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

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

  margin:
    0 auto 4px !important;
}


body.jakPageHome.jakUiRefreshV10.jakMoonV2
#search{
  height:54px !important;

  border-radius:16px !important;

  background:#061b44 !important;

  border:
    1px solid rgba(97,174,255,.25)
    !important;

  box-shadow:none !important;
}


/* ===== FILTER ===== */

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#filterTabs{

  padding:
    10px 6px 11px 0 !important;

  gap:8px !important;

  scroll-padding-right:20px !important;

  scrollbar-width:none !important;
}


body.jakPageHome.jakUiRefreshV10.jakMoonV2
#filterTabs::-webkit-scrollbar{
  display:none !important;
}


body.jakPageHome.jakUiRefreshV10.jakMoonV2
#filterTabs button{

  min-height:40px !important;

  padding:
    0 15px !important;

  border-radius:14px !important;

  flex:0 0 auto !important;

  white-space:nowrap !important;

  background:#081b40 !important;
}


body.jakPageHome.jakUiRefreshV10.jakMoonV2
#filterTabs button.active{

  background:
    linear-gradient(
      135deg,
      #19a4ff,
      #3e7cff
    ) !important;

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


/* ===== SECTION TITLE ===== */

.jakMoonSectionTitleV2{
  margin:
    13px auto 9px !important;

  align-items:center !important;
}


.jakMoonSectionTitleV2 h2{
  font-size:21px !important;
}


.jakMoonSectionTitleV2 p{
  margin-top:2px !important;

  color:#889fc4 !important;
}


.jakMoonSectionTitleV2 > span{
  color:#44baff !important;

  padding-right:2px !important;
}


/* =====================================================
   VIDEO CARD
   HANYA WARNA / DETAIL
   TIDAK MENGUBAH UKURAN GRID
===================================================== */

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#list .card{

  border-color:
    rgba(85,162,255,.22) !important;

  background:
    linear-gradient(
      165deg,
      #09204b,
      #061630
    ) !important;

  box-shadow:
    0 6px 17px rgba(0,5,26,.29)
    !important;
}


body.jakPageHome.jakUiRefreshV10.jakMoonV2
#list .body{

  background:
    linear-gradient(
      180deg,
      #09224f,
      #061731
    ) !important;
}


/* metadata lebih clean */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
#list .meta span,

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#list .stats span{

  background:
    rgba(9,32,72,.82) !important;

  border:
    1px solid rgba(91,164,255,.11)
    !important;

  color:#a9bcda !important;

  box-shadow:none !important;
}


/* favorite lebih kecil visualnya */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
.btnFav{

  background:
    rgba(3,12,31,.80) !important;

  box-shadow:
    0 4px 12px rgba(0,0,0,.22)
    !important;
}


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

body.jakPageHome.jakUiRefreshV10.jakMoonV2
#jakCsLauncher{

  position:fixed !important;

  right:13px !important;

  bottom:
    calc(
      89px +
      env(safe-area-inset-bottom)
    ) !important;

  min-width:62px !important;

  height:42px !important;

  padding:
    0 10px !important;

  border-radius:16px !important;

  z-index:990 !important;

  background:
    linear-gradient(
      135deg,
      #159dff,
      #526eff
    ) !important;

  box-shadow:
    0 7px 18px rgba(22,132,255,.27)
    !important;
}


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

body.jakPageHome.jakUiRefreshV10.jakMoonV2
.bottomNav{

  left:14px !important;
  right:14px !important;

  bottom:
    calc(
      8px +
      env(safe-area-inset-bottom)
    ) !important;

  height:65px !important;

  padding:
    5px 6px !important;

  border-radius:22px !important;

  z-index:980 !important;

  background:
    linear-gradient(
      135deg,
      rgba(5,20,52,.98),
      rgba(7,29,67,.98)
    ) !important;

  box-shadow:
    0 12px 31px rgba(0,3,23,.52)
    !important;
}


/* jangan nav nutup card bagian paling bawah */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
#list{

  padding-bottom:
    calc(
      105px +
      env(safe-area-inset-bottom)
    ) !important;
}


/* nav active */
body.jakPageHome.jakUiRefreshV10.jakMoonV2
.bottomNav button:is(
  .jakNavActive,
  .activeNav,
  .active
){

  background:
    linear-gradient(
      145deg,
      rgba(25,145,255,.30),
      rgba(70,92,255,.23)
    ) !important;

  box-shadow:
    inset 0 0 14px rgba(58,169,255,.09)
    !important;
}


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

@media(max-width:520px){

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

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

}


/*
  SENGAJA TIDAK ADA:
  grid-template-columns
  grid-auto-columns
  gap #list
  width card
  height card
  height thumbnail
*/