/* =========================================================
   JAKSKY WOW UI V60
   Premium render layer - lightweight / mobile friendly
   ========================================================= */

:root{
  --jak-bg:#08070b;
  --jak-surface:rgba(18,16,23,.82);
  --jak-surface-2:rgba(27,23,34,.78);
  --jak-line:rgba(255,255,255,.085);
  --jak-line-hot:rgba(190,114,255,.25);
  --jak-text:#fff;
  --jak-muted:#aaa4b3;
  --jak-purple:#a96bff;
  --jak-pink:#ff5fac;
  --jak-cyan:#63e6ff;
  --jak-radius:20px;
}


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

html{
  background:var(--jak-bg);
}

body{
  color:var(--jak-text);
  background:
    radial-gradient(
      circle at 15% -5%,
      rgba(124,58,237,.16),
      transparent 33%
    ),
    radial-gradient(
      circle at 92% 7%,
      rgba(236,72,153,.10),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #08070b 0%,
      #0b0910 38%,
      #08070b 100%
    ) !important;

  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  animation:
    jakPageInV60 .38s
    cubic-bezier(.2,.8,.2,1)
    both;
}

::selection{
  background:rgba(169,107,255,.32);
  color:#fff;
}


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

.brandHero{
  position:relative !important;
  isolation:isolate;
  overflow:hidden !important;

  margin-top:10px !important;

  border:
    1px solid
    rgba(255,255,255,.085) !important;

  border-radius:24px !important;

  background:
    radial-gradient(
      circle at 17% 15%,
      rgba(169,107,255,.17),
      transparent 34%
    ),
    radial-gradient(
      circle at 91% 20%,
      rgba(255,95,172,.10),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(24,20,31,.96),
      rgba(12,10,17,.96)
    ) !important;

  box-shadow:
    0 20px 55px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.06);

  animation:
    jakHeroInV60 .52s
    cubic-bezier(.17,.84,.32,1.15)
    both;
}

.brandHero::after{
  content:"";
  position:absolute;
  z-index:-1;

  width:180px;
  height:180px;

  right:-65px;
  top:-100px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(164,92,255,.20),
      transparent 68%
    );

  filter:blur(10px);
  pointer-events:none;
}


/* quick cinematic shine, TANPA intro */

.brandHero::before{
  content:"";
  position:absolute;
  z-index:4;

  top:-70%;
  bottom:-70%;

  width:65px;

  left:-30%;

  transform:
    rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.13),
      transparent
    );

  pointer-events:none;

  animation:
    jakHeroShineV60
    1.15s .18s
    cubic-bezier(.2,.75,.3,1)
    both;
}


.brandLogo{
  position:relative;
  z-index:2;

  filter:
    drop-shadow(
      0 8px 22px
      rgba(127,67,255,.18)
    );
}

.jakTextV31{
  letter-spacing:-.045em;

  text-shadow:
    0 0 24px
    rgba(162,84,255,.22);
}

.jakBoltV31{
  filter:
    drop-shadow(
      0 0 12px
      rgba(255,202,77,.45)
    );
}

.brandSub{
  color:#e7e2ed !important;
  letter-spacing:.01em;
}

.brandMini{
  color:#928b9e !important;
}


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

#jakLiveSummary{
  margin-top:10px;
  animation:
    jakSoftUpV60 .5s .06s
    ease-out both;
}

#jakLiveSummary .jakLiveSummaryButton{
  border:
    1px solid
    rgba(255,255,255,.075) !important;

  background:
    linear-gradient(
      135deg,
      rgba(25,21,31,.88),
      rgba(14,12,18,.88)
    ) !important;

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.22);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

#jakLiveSummary .jakLiveSummaryButton:active{
  transform:scale(.985);
}


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

.userTop{
  animation:
    jakSoftUpV60 .48s .10s
    ease-out both;
}

#search{
  color:#fff !important;

  border:
    1px solid
    rgba(255,255,255,.09) !important;

  background:
    rgba(20,17,25,.78) !important;

  box-shadow:
    0 10px 25px
    rgba(0,0,0,.18),
    inset 0 1px 0
    rgba(255,255,255,.035);

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  outline:none !important;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    background .18s ease;
}

#search::placeholder{
  color:#817b89 !important;
}

#search:focus{
  border-color:
    rgba(169,107,255,.48) !important;

  background:
    rgba(25,21,31,.92) !important;

  box-shadow:
    0 0 0 3px
    rgba(169,107,255,.09),
    0 14px 32px
    rgba(0,0,0,.24);

  transform:translateY(-1px);
}


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

#filterTabs{
  display:flex;
  gap:8px;

  overflow-x:auto;
  overscroll-behavior-inline:contain;

  padding:
    4px 1px 8px;

  scrollbar-width:none;

  animation:
    jakSoftUpV60 .5s .14s
    ease-out both;
}

#filterTabs::-webkit-scrollbar{
  display:none;
}

#filterTabs button{
  flex:0 0 auto;

  border:
    1px solid
    rgba(255,255,255,.075) !important;

  border-radius:999px !important;

  color:#aaa4b3 !important;

  background:
    rgba(22,19,28,.75) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025);

  transition:
    transform .17s ease,
    color .17s ease,
    background .17s ease,
    border-color .17s ease,
    box-shadow .17s ease;
}

#filterTabs button:active{
  transform:scale(.96);
}

#filterTabs button.active{
  color:#fff !important;

  border-color:
    rgba(180,115,255,.30) !important;

  background:
    linear-gradient(
      135deg,
      rgba(137,76,225,.32),
      rgba(207,72,156,.20)
    ) !important;

  box-shadow:
    0 7px 20px
    rgba(110,55,196,.12),
    inset 0 1px 0
    rgba(255,255,255,.08);
}


/* =========================
   VIDEO CARDS
   ========================= */

#list .card{
  position:relative;
  isolation:isolate;

  background:
    linear-gradient(
      160deg,
      rgba(23,20,29,.97),
      rgba(13,11,17,.98)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.065) !important;

  border-radius:
    20px !important;

  box-shadow:
    0 11px 30px
    rgba(0,0,0,.22),
    inset 0 1px 0
    rgba(255,255,255,.025);

  overflow:hidden;

  transform:
    translateZ(0);

  transition:
    transform .22s
    cubic-bezier(.2,.8,.2,1),
    border-color .22s ease,
    box-shadow .22s ease;
}

#list .card.jakCardEnterV60{
  animation:
    jakCardInV60 .47s
    cubic-bezier(.18,.82,.25,1)
    both;

  animation-delay:
    var(--jak-stagger,0ms);
}


/* subtle glow line */

#list .card::after{
  content:"";
  position:absolute;
  z-index:5;

  left:10%;
  right:10%;
  top:0;

  height:1px;

  opacity:.45;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(177,105,255,.55),
      rgba(255,100,183,.30),
      transparent
    );

  pointer-events:none;
}


#list .card:active{
  transform:
    scale(.985)
    translateZ(0);
}


#list .card .thumb{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      110deg,
      #131019 8%,
      #201927 18%,
      #131019 33%
    ) !important;

  background-size:200% 100%;
}


/* skeleton hanya saat JS memang mengelola card */

#list .card.jakCardEnterV60:not(.jakMediaReadyV60)
.thumb::before{
  content:"";

  position:absolute;
  inset:0;
  z-index:4;

  pointer-events:none;

  background:
    linear-gradient(
      105deg,
      transparent 20%,
      rgba(255,255,255,.055) 43%,
      rgba(255,255,255,.10) 50%,
      transparent 68%
    );

  transform:
    translateX(-100%);

  animation:
    jakSkeletonV60
    1.15s ease-in-out infinite;
}


#list .card .thumb img{
  transform:
    scale(1.015)
    translateZ(0);

  transition:
    opacity .32s ease,
    filter .38s ease,
    transform .45s
    cubic-bezier(.2,.8,.2,1);

  backface-visibility:hidden;
}


#list .card.jakCardEnterV60
.thumb img:not(.jakImgReadyV60){
  opacity:.70;
  filter:
    blur(5px)
    saturate(.82);
}


#list .card .thumb img.jakImgReadyV60{
  opacity:1;
  filter:none;
}


@media (hover:hover) and (pointer:fine){

  #list .card:hover{
    transform:
      translateY(-4px)
      translateZ(0);

    border-color:
      rgba(177,105,255,.20) !important;

    box-shadow:
      0 19px 44px
      rgba(0,0,0,.32),
      0 0 0 1px
      rgba(151,81,255,.035),
      inset 0 1px 0
      rgba(255,255,255,.045);
  }

  #list .card:hover
  .thumb img{
    transform:
      scale(1.045)
      translateZ(0);
  }
}


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

.bottomNav{
  border-top:
    1px solid
    rgba(255,255,255,.075) !important;

  background:
    rgba(12,10,16,.88) !important;

  box-shadow:
    0 -12px 34px
    rgba(0,0,0,.33);

  backdrop-filter:
    blur(18px)
    saturate(135%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(135%);

  padding-bottom:
    max(
      5px,
      env(safe-area-inset-bottom)
    ) !important;

  animation:
    jakBottomInV60 .48s .10s
    cubic-bezier(.2,.8,.2,1)
    both;
}


.bottomNav button{
  position:relative;

  transition:
    color .18s ease,
    transform .16s ease,
    opacity .18s ease;
}


.bottomNav button:active{
  transform:
    translateY(1px)
    scale(.92);
}


.bottomNav button.active{
  color:#fff !important;
}


.bottomNav button.active::before{
  content:"";

  position:absolute;

  top:-5px;
  left:50%;

  width:24px;
  height:3px;

  transform:
    translateX(-50%);

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      var(--jak-purple),
      var(--jak-pink)
    );

  box-shadow:
    0 0 13px
    rgba(169,107,255,.42);
}


/* =========================
   SCROLLBAR
   ========================= */

*{
  scrollbar-color:
    rgba(164,99,255,.30)
    transparent;
}

::-webkit-scrollbar{
  width:5px;
  height:5px;
}

::-webkit-scrollbar-track{
  background:transparent;
}

::-webkit-scrollbar-thumb{
  border-radius:20px;
  background:
    rgba(164,99,255,.25);
}


/* =========================
   ANIMATIONS
   ========================= */

@keyframes jakPageInV60{
  from{
    opacity:.82;
  }

  to{
    opacity:1;
  }
}

@keyframes jakHeroInV60{
  from{
    opacity:0;
    transform:
      translateY(-8px)
      scale(.985);
  }

  to{
    opacity:1;
    transform:none;
  }
}

@keyframes jakHeroShineV60{
  0%{
    left:-30%;
    opacity:0;
  }

  15%{
    opacity:.85;
  }

  100%{
    left:130%;
    opacity:0;
  }
}

@keyframes jakSoftUpV60{
  from{
    opacity:0;
    transform:
      translateY(8px);
  }

  to{
    opacity:1;
    transform:none;
  }
}

@keyframes jakCardInV60{
  from{
    opacity:0;
    transform:
      translateY(13px)
      scale(.985);
  }

  to{
    opacity:1;
    transform:none;
  }
}

@keyframes jakBottomInV60{
  from{
    opacity:0;
    transform:
      translateY(14px);
  }

  to{
    opacity:1;
    transform:none;
  }
}

@keyframes jakSkeletonV60{
  to{
    transform:
      translateX(100%);
  }
}


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

@media(max-width:600px){

  .brandHero{
    border-radius:21px !important;

    box-shadow:
      0 13px 34px
      rgba(0,0,0,.26),
      inset 0 1px 0
      rgba(255,255,255,.045);
  }

  #search{
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  #list .card{
    border-radius:18px !important;

    box-shadow:
      0 8px 22px
      rgba(0,0,0,.20);
  }

  .bottomNav{
    backdrop-filter:blur(13px);
    -webkit-backdrop-filter:blur(13px);
  }
}


/* accessibility + battery */

@media(prefers-reduced-motion:reduce){

  body,
  .brandHero,
  .brandHero::before,
  .userTop,
  #filterTabs,
  #jakLiveSummary,
  .bottomNav,
  #list .card.jakCardEnterV60,
  #list .card.jakCardEnterV60:not(.jakMediaReadyV60)
  .thumb::before{
    animation:none !important;
  }

  *{
    scroll-behavior:auto !important;
  }
}