/* =========================================================
   JAKSKY DARK FINAL V1
   Konsistensi text + form + modal dark mode.
   GRID / HERO SIZE TIDAK DISENTUH.
========================================================= */

html[data-jak-theme="dark"] body.jakPageHome{
  --jak-dark-bg:#020817;
  --jak-dark-panel:#071b3e;
  --jak-dark-panel2:#0a2550;
  --jak-dark-text:#f7faff;
  --jak-dark-muted:#a8bbd8;
  --jak-dark-line:rgba(103,181,255,.23);
  --jak-dark-accent:#50c8ff;

  color:var(--jak-dark-text) !important;
}


/* =========================================================
   HEADER / HERO TEXT
========================================================= */

html[data-jak-theme="dark"]
body.jakPageHome .brandSub,

html[data-jak-theme="dark"]
body.jakPageHome .jakMoonHeroCopyV2,

html[data-jak-theme="dark"]
body.jakPageHome .jakMoonHeroCopyV2 h1,

html[data-jak-theme="dark"]
body.jakPageHome .jakMoonTagline,

html[data-jak-theme="dark"]
body.jakPageHome .jakMoonFeaturesV2 span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
}


/* =========================================================
   LIVE SUMMARY
========================================================= */

html[data-jak-theme="dark"]
#jakLiveSummaryButton .jakLiveMetric strong,

html[data-jak-theme="dark"]
#jakLiveOnlineCount,

html[data-jak-theme="dark"]
#jakLiveTodayCount,

html[data-jak-theme="dark"]
#jakRegisteredUserCount{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
}

html[data-jak-theme="dark"]
#jakLiveSummaryButton .jakLiveMetric small{
  color:#b3c4de !important;
  -webkit-text-fill-color:#b3c4de !important;
  opacity:1 !important;
}


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

html[data-jak-theme="dark"]
body.jakPageHome #search{
  background:#071b3e !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;

  border-color:
    rgba(100,180,255,.24) !important;

  caret-color:#50c8ff !important;
  opacity:1 !important;
}

html[data-jak-theme="dark"]
body.jakPageHome #search::placeholder{
  color:#91a8c9 !important;
  -webkit-text-fill-color:#91a8c9 !important;
  opacity:1 !important;
}


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

html[data-jak-theme="dark"]
body.jakPageHome #filterTabs button{
  color:#c3d1e7 !important;
  -webkit-text-fill-color:#c3d1e7 !important;
  opacity:1 !important;
}

html[data-jak-theme="dark"]
body.jakPageHome #filterTabs button.active{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}


/* =========================================================
   STAFF / QUOTA
========================================================= */

html[data-jak-theme="dark"]
body.jakPageHome .jakFreeQuotaBar{
  color:#eef6ff !important;
}

html[data-jak-theme="dark"]
body.jakPageHome .jakFreeQuotaBar b,

html[data-jak-theme="dark"]
body.jakPageHome .jakFreeQuotaBar strong{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
}

html[data-jak-theme="dark"]
body.jakPageHome .jakFreeQuotaBar small{
  color:#9fb3d1 !important;
  -webkit-text-fill-color:#9fb3d1 !important;
  opacity:1 !important;
}


/* =========================================================
   VIDEO SECTION / CARD TEXT
========================================================= */

html[data-jak-theme="dark"]
.jakMoonSectionTitleV2 h2,

html[data-jak-theme="dark"]
body.jakPageHome #list .card .body b{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
}

html[data-jak-theme="dark"]
.jakMoonSectionTitleV2 p,

html[data-jak-theme="dark"]
body.jakPageHome #list .meta span,

html[data-jak-theme="dark"]
body.jakPageHome #list .stats span{
  color:#a9bddb !important;
  -webkit-text-fill-color:#a9bddb !important;
  opacity:1 !important;
}


/* =========================================================
   LOGIN / PROFILE MODAL
========================================================= */

html[data-jak-theme="dark"] #userModal{
  color:#f7faff !important;
}

html[data-jak-theme="dark"] #userModal .authBox{
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(38,139,255,.10),
      transparent 38%
    ),
    linear-gradient(
      160deg,
      #0b234d,
      #071832 62%,
      #040d1e
    ) !important;

  color:#f7faff !important;

  border:
    1px solid rgba(103,181,255,.26) !important;

  box-shadow:
    0 28px 80px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.05)
    !important;
}


/* Judul */
html[data-jak-theme="dark"]
#userModal .authBox h1,

html[data-jak-theme="dark"]
#userModal .authBox h2,

html[data-jak-theme="dark"]
#userModal .authBox h3,

html[data-jak-theme="dark"]
#userModal .authBox strong,

html[data-jak-theme="dark"]
#userModal .authBox b{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
}


/* Subtitle */
html[data-jak-theme="dark"]
#userModal .authBox p,

html[data-jak-theme="dark"]
#userModal .authBox small,

html[data-jak-theme="dark"]
#userModal .authBox label{
  color:#b1c2dd !important;
  -webkit-text-fill-color:#b1c2dd !important;
  opacity:1 !important;
}


/* =========================================================
   LOGIN TABS
========================================================= */

html[data-jak-theme="dark"]
#userModal .authTabs,

html[data-jak-theme="dark"]
#userModal .authTabRow,

html[data-jak-theme="dark"]
#userModal [class*="authTabs"]{
  background:#081b3d !important;

  border:
    1px solid rgba(103,181,255,.18) !important;
}

html[data-jak-theme="dark"]
#userModal .authTabs button,

html[data-jak-theme="dark"]
#userModal .authTabRow button{
  color:#aebfd9 !important;
  -webkit-text-fill-color:#aebfd9 !important;

  background:transparent !important;
}

html[data-jak-theme="dark"]
#userModal .authTabs button.active,

html[data-jak-theme="dark"]
#userModal .authTabRow button.active{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #168fff,
      #506dff
    ) !important;
}


/* =========================================================
   INPUT USERNAME / PASSWORD
========================================================= */

html[data-jak-theme="dark"]
#userModal .authBox input,

html[data-jak-theme="dark"]
#userModal .authBox textarea{
  background:#081c40 !important;

  color:#fff !important;
  -webkit-text-fill-color:#fff !important;

  border:
    1px solid rgba(105,181,255,.22) !important;

  caret-color:#51c9ff !important;

  opacity:1 !important;
}

html[data-jak-theme="dark"]
#userModal .authBox input::placeholder,

html[data-jak-theme="dark"]
#userModal .authBox textarea::placeholder{
  color:#8da5c6 !important;
  -webkit-text-fill-color:#8da5c6 !important;
  opacity:1 !important;
}


/* Chrome autofill */
html[data-jak-theme="dark"]
#userModal input:-webkit-autofill{
  -webkit-text-fill-color:#fff !important;

  -webkit-box-shadow:
    0 0 0 1000px #081c40 inset !important;

  transition:
    background-color 99999s ease-out !important;
}


/* =========================================================
   MATA PASSWORD — FINAL
========================================================= */

html[data-jak-theme="dark"]
#userModal .jakPasswordEyeFinal{
  position:absolute !important;

  right:10px !important;
  top:50% !important;

  transform:
    translateY(-50%) !important;

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

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

  padding:0 !important;
  margin:0 !important;

  display:grid !important;
  place-items:center !important;

  border-radius:50% !important;

  background:
    linear-gradient(
      145deg,
      #102d60,
      #0a2149
    ) !important;

  border:
    1px solid rgba(101,192,255,.30) !important;

  color:#63ccff !important;
  -webkit-text-fill-color:#63ccff !important;

  opacity:1 !important;

  box-shadow:
    0 5px 15px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.05)
    !important;

  z-index:10 !important;
}

html[data-jak-theme="dark"]
#userModal .jakPasswordEyeFinal svg{
  width:21px !important;
  height:21px !important;

  stroke:#63ccff !important;
  fill:none !important;
}

html[data-jak-theme="dark"]
#userModal .jakPasswordEyeFinal:hover{
  background:#14376f !important;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

html[data-jak-theme="dark"]
#userModal .authBtn{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #159cff,
      #536bff
    ) !important;

  border:0 !important;

  box-shadow:
    0 9px 24px rgba(20,139,255,.23)
    !important;
}


/* Close */
html[data-jak-theme="dark"]
#userModal .authClose,

html[data-jak-theme="dark"]
#userModal .ownProfileClose{
  background:#102b5c !important;

  color:#62cbff !important;
  -webkit-text-fill-color:#62cbff !important;

  border:
    1px solid rgba(105,189,255,.25) !important;
}


/* Links */
html[data-jak-theme="dark"]
#userModal .authBox a{
  color:#76d2ff !important;
  -webkit-text-fill-color:#76d2ff !important;
  opacity:1 !important;
}


/* =========================================================
   PUBLIC PROFILE
========================================================= */

html[data-jak-theme="dark"]
#publicProfileModal .publicProfileBox{
  background:
    linear-gradient(
      160deg,
      #0b234d,
      #071832
    ) !important;

  color:#f7faff !important;

  border:
    1px solid rgba(103,181,255,.25) !important;
}

html[data-jak-theme="dark"]
#publicProfileModal h1,

html[data-jak-theme="dark"]
#publicProfileModal h2,

html[data-jak-theme="dark"]
#publicProfileModal h3,

html[data-jak-theme="dark"]
#publicProfileModal b,

html[data-jak-theme="dark"]
#publicProfileModal strong{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
}


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

html[data-jak-theme="dark"]
body.jakPageHome #modal .modalBox{
  background:
    linear-gradient(
      160deg,
      #0a214b,
      #05132d
    ) !important;

  color:#f5f9ff !important;
}

html[data-jak-theme="dark"]
body.jakPageHome #modal h1,

html[data-jak-theme="dark"]
body.jakPageHome #modal h2,

html[data-jak-theme="dark"]
body.jakPageHome #modal h3,

html[data-jak-theme="dark"]
body.jakPageHome #modal b,

html[data-jak-theme="dark"]
body.jakPageHome #modal strong{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
}


/* =========================================================
   NOTIFICATION
========================================================= */

html[data-jak-theme="dark"] #notifModal,
html[data-jak-theme="dark"] #notifModal .jakNotifPanel{
  color:#f7faff !important;
}

html[data-jak-theme="dark"] #notifModal .jakNotifTitle,
html[data-jak-theme="dark"] #notifModal .notifItem b{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

html[data-jak-theme="dark"] #notifModal .notifItem p,
html[data-jak-theme="dark"] #notifModal .notifItem small{
  color:#a8bad6 !important;
  -webkit-text-fill-color:#a8bad6 !important;
}


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

html[data-jak-theme="dark"]
.jakCsPanel,

html[data-jak-theme="dark"]
.jakCsMessages,

html[data-jak-theme="dark"]
.jakCsComposer{
  color:#f6f9ff !important;
}

html[data-jak-theme="dark"]
.jakCsInput{
  background:#081c40 !important;

  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

html[data-jak-theme="dark"]
.jakCsInput::placeholder{
  color:#91a6c6 !important;
  -webkit-text-fill-color:#91a6c6 !important;
  opacity:1 !important;
}


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

html[data-jak-theme="dark"]
body.jakPageHome .bottomNav button,

html[data-jak-theme="dark"]
body.jakPageHome .bottomNav button span{
  color:#a0b4d4 !important;
  -webkit-text-fill-color:#a0b4d4 !important;
  opacity:1 !important;
}

html[data-jak-theme="dark"]
body.jakPageHome .bottomNav button:is(
  .active,
  .activeNav,
  .jakNavActive
),

html[data-jak-theme="dark"]
body.jakPageHome .bottomNav button:is(
  .active,
  .activeNav,
  .jakNavActive
) span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}