/* =====================================================================
   v38 — dimuat PALING AKHIR (menimpa v33 + semua tema)
   1. Leaderboard: podium rapi (tidak ada ujung yang nongol) + animasi
   2. Ikon menu (garis tiga) beranimasi
   3. Saklar ON/OFF jelas (hijau = ON, merah = OFF)
   4. Mode performa: Neon off, Animasi off, Mode Hemat (HP ngelag)
   ===================================================================== */

/* ---------- 3. SAKLAR ON / OFF ----------
   Bug lama: ".pf-f label{display:block}" menimpa ".sw-row{display:flex}" sehingga trek saklar
   tidak punya lebar dan hanya bulatan putih yang kelihatan. Diperbaiki + diberi warna & tulisan. */
label.sw-row,.pf-f label.sw-row,.thp label.sw-row{display:flex!important;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;position:relative;margin-top:10px;font-size:inherit;color:var(--fg)}
.sw-row>span{min-width:0;flex:1}
.sw-row>span b{display:block;font-size:14px;color:var(--fg)}
.sw-row>span small{display:block;margin-top:2px;line-height:1.35;color:var(--mut);font-size:12px;font-weight:500}
.sw-row i{flex:none;display:block;position:relative;width:66px;height:32px;border-radius:99px;
  background:linear-gradient(135deg,#7f1d1d,#b91c1c);border:2px solid rgba(255,255,255,.18);
  transition:background .2s,border-color .2s;font-style:normal;-webkit-tap-highlight-color:transparent}
.sw-row i::before{content:"OFF";position:absolute;right:9px;top:50%;translate:0 -50%;font:800 11px/1 Sora,system-ui,sans-serif;letter-spacing:.06em;color:#fff;opacity:.95}
.sw-row i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.45);transition:transform .2s cubic-bezier(.3,1.2,.4,1)}
.sw-row input:checked~i{background:linear-gradient(135deg,#15803d,#22c55e);border-color:#86efac;box-shadow:0 0 12px -3px rgba(34,197,94,.8)}
.sw-row input:checked~i::before{content:"ON";right:auto;left:11px;color:#052e16}
.sw-row input:checked~i::after{transform:translateX(34px)}
.sw-row input:focus-visible~i{outline:2px solid var(--ac);outline-offset:3px}
.sw-row:has(input:checked) > span b::after{content:" · ON";color:#22c55e;font-size:11px;font-weight:800}
.sw-row:not(:has(input:checked)) > span b::after{content:" · OFF";color:#f87171;font-size:11px;font-weight:800}

/* ---------- 1. LEADERBOARD v38 ----------
   Penyebab ujung nongol: bar peringkat (.stp) dibuat lebih lebar dari kartunya (width:100%+8px, margin -4px)
   sementara kartu tidak punya garis bawah. Sekarang bar menempel pas di dalam bingkai (dihitung dari tebal garis). */
body[data-t] .podium{--pw:1.5px;display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:56px 2px 4px}
body[data-t] .pod{--pr:22px;--prb:22px;flex:0 1 31%;max-width:172px;min-width:0;position:relative;overflow:visible;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding:22px 6px 0;
  border:var(--pw) solid var(--bd2,rgba(255,255,255,.2));border-radius:var(--pr)!important;
  background:linear-gradient(180deg,var(--card),transparent 85%)}
body[data-t] .podium:has(.pod:only-child) .pod{flex-basis:58%;max-width:230px}
body[data-t] .pod.r1{border-color:#facc15;background:linear-gradient(180deg,rgba(250,204,21,.18),transparent 85%);box-shadow:0 -10px 34px -18px #facc15}
body[data-t] .pod.r2{border-color:#cbd5e1}
body[data-t] .pod.r3{border-color:#fb923c}
body[data-t] .pod b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;line-height:1.25}
body[data-t] .pod small{color:var(--mut);font-weight:700;font-size:11.5px}
body[data-t] .pod .stp{display:grid;place-items:center;position:relative;overflow:hidden;font-style:normal;font-weight:900;font-size:22px;
  width:calc(100% + var(--pw)*2);margin:10px calc(var(--pw)*-1) calc(var(--pw)*-1);
  border-radius:0 0 max(0px,calc(var(--prb) - var(--pw))) max(0px,calc(var(--prb) - var(--pw)));opacity:1}
body[data-t] .pod.r1 .stp{height:68px;background:linear-gradient(180deg,#fde68a,#f59e0b);color:#78350f}
body[data-t] .pod.r2 .stp{height:50px;background:linear-gradient(180deg,#e2e8f0,#94a3b8);color:#1e293b}
body[data-t] .pod.r3 .stp{height:38px;background:linear-gradient(180deg,#fdba74,#c2410c);color:#431407}
body[data-t] .pod .stp::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);translate:-130% 0}
body[data-t] .pod .medal{position:absolute;top:-13px;left:50%;translate:-50% 0;z-index:2}
body[data-t] .pod .crown{position:absolute;top:-42px;left:50%;translate:-50% 0;font-size:26px;line-height:1;z-index:2;filter:drop-shadow(0 3px 6px rgba(250,204,21,.55))}
body[data-t] .pod img,body[data-t] .pod .av{border-radius:50%}
/* tema khusus: lengkung bawah mengikuti bentuk kartu masing-masing */
[data-t=neon] .podium .pod{--pr:0px;--prb:0px}
[data-t=sakura] .podium .pod{--pr:28px;--prb:28px}
[data-t=halloween] .podium{--pw:2px}
[data-t=halloween] .podium .pod{--pr:22px;--prb:10px;border-radius:22px 22px 10px 10px!important}
[data-t=halloween] .podium .pod .stp{border-radius:0 0 8px 8px}

/* baris peringkat 4 dst. */
body[data-t] .lbr{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px 17px;margin-top:9px;overflow:hidden;border-radius:18px}
body[data-t] .lbr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(127,127,127,.16)}
body[data-t] .lbr .lbar{z-index:1;height:5px;border-radius:0 6px 6px 0;background:linear-gradient(90deg,var(--ac),var(--ac2))}
body[data-t] .lbr .lbs strong{font-size:19px}

@keyframes kxUp{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes kxCrown{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}
@keyframes kxShine{0%,55%{translate:-130% 0}100%{translate:130% 0}}
@keyframes kxMedal{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
html:not(.kx-noanim):not(.kx-lite) body[data-t] .pod{animation:kxUp .5s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i,0)*90ms)}
html:not(.kx-noanim):not(.kx-lite) body[data-t] .pod .crown{animation:kxCrown 2.6s ease-in-out infinite}
html:not(.kx-noanim):not(.kx-lite) body[data-t] .pod.r1 .stp::after{animation:kxShine 3.4s ease-in-out infinite}
html:not(.kx-noanim):not(.kx-lite) body[data-t] .pod.r2 .stp::after,html:not(.kx-noanim):not(.kx-lite) body[data-t] .pod.r3 .stp::after{animation:kxShine 5s 1s ease-in-out infinite}
html:not(.kx-noanim):not(.kx-lite) body[data-t] .pod.r1 .medal{animation:kxMedal 2s ease-in-out infinite}
html:not(.kx-noanim):not(.kx-lite) body[data-t] .lbr{animation:kxUp .45s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i,0)*45ms + .25s)}

/* ---------- 2. IKON MENU (garis tiga) BERANIMASI ----------
   Gerak halus (hanya transform/opacity = ringan di GPU). Tiap ikon punya gaya sendiri. */
@keyframes kxItem{from{opacity:0;translate:14px 0}to{opacity:1;translate:0 0}}
@keyframes kxIcoFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.06)}}
@keyframes kxIcoSway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg) translateY(-2px)}}
@keyframes kxIcoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes kxIcoTilt{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-5px) rotate(-8deg)}60%{transform:translateY(0) rotate(6deg)}}
@keyframes kxIcoFlip{0%,70%,100%{transform:rotateY(0)}85%{transform:rotateY(180deg)}}
@keyframes kxIcoSwing{0%,100%{transform:rotate(-12deg);transform-origin:50% 12%}50%{transform:rotate(12deg);transform-origin:50% 12%}}
@keyframes kxIcoRing{0%,100%{transform:scale(1) rotate(0)}10%,30%{transform:scale(1.1) rotate(-10deg)}20%,40%{transform:scale(1.1) rotate(10deg)}50%{transform:scale(1) rotate(0)}}
@keyframes kxHalo{0%{transform:scale(.7);opacity:.55}100%{transform:scale(1.35);opacity:0}}

body[data-t] nav a i{position:relative}
body[data-t] nav a i::after{content:"";position:absolute;inset:3px;border-radius:50%;border:2px solid var(--ac);opacity:0;pointer-events:none}
html:not(.kx-noanim):not(.kx-lite) body[data-t] nav.s a{animation:kxItem .38s cubic-bezier(.2,.8,.3,1) both!important;animation-delay:calc(var(--i)*45ms)!important}
html:not(.kx-noanim):not(.kx-lite) body[data-t] nav.s a i img{animation:kxIcoFloat 3.2s ease-in-out infinite!important;animation-delay:calc(var(--i)*-.45s)!important;will-change:transform}
html:not(.kx-noanim):not(.kx-lite) body[data-t] nav.s a i::after{animation:kxHalo 2.6s ease-out infinite;animation-delay:calc(var(--i)*-.37s)}
html:not(.kx-noanim):not(.kx-lite) body[data-t] nav.s a:nth-child(2) i img{animation-name:kxIcoSway!important;animation-duration:2.6s!important}
html:not(.kx-noanim):not(.kx-lite) body[data-t] nav.s a:nth-child(3) i img{animation-name:kxIcoPulse!important;animation-duration:2.2s!important}
html:not(.kx-noanim):not(.kx-lite) body[data-t] nav.s a:nth-child(4) i img{animation-name:kxIcoTilt!important;animation-duration:2.8s!important}
html:not(.kx-noanim):not(.kx-lite) body[data-t] nav.s a:nth-child(5) i img{animation-name:kxIcoFlip!important;animation-duration:4s!important}
html:not(.kx-noanim):not(.kx-lite) body[data-t] nav.s a:nth-child(6) i img{animation-name:kxIcoSwing!important;animation-duration:2.4s!important}
html:not(.kx-noanim):not(.kx-lite) body[data-t] nav.s a:nth-child(7) i img{animation-name:kxIcoRing!important;animation-duration:3s!important}
html:not(.kx-noanim):not(.kx-lite) body[data-t] nav.s a:nth-child(n+8) i svg{animation:kxIcoFloat 3s ease-in-out infinite}
html:not(.kx-noanim):not(.kx-lite) body[data-t] nav.s a:active i img,html:not(.kx-noanim):not(.kx-lite) body[data-t] nav.s a:hover i img{animation:npop .5s cubic-bezier(.3,1.5,.5,1)!important}

/* ---------- 4. MODE PERFORMA ----------
   Kelas dipasang di <html> oleh v38.js (dan oleh skrip kecil di <head> supaya tidak berkedip). */

/* Neon OFF: matikan semua cahaya (glow, bayangan berwarna, blur dekor). Tampilan jadi datar & ringan. */
html.kx-noneon *,html.kx-noneon *::before,html.kx-noneon *::after{text-shadow:none!important;box-shadow:none!important}
html.kx-noneon img,html.kx-noneon svg,html.kx-noneon i,html.kx-noneon .crown,html.kx-noneon .lg{filter:none!important}
html.kx-noneon .au-bg,html.kx-noneon .hx-gl,html.kx-noneon .hx-fog,html.kx-noneon .hx-em{display:none!important}
html.kx-noneon .sw-row input:checked~i{border-color:#86efac}

/* Animasi OFF: semua animasi/transisi langsung ke kondisi akhir (tidak ada elemen yang nyangkut tersembunyi) */
html.kx-noanim *,html.kx-noanim *::before,html.kx-noanim *::after,
html.kx-lite *,html.kx-lite *::before,html.kx-lite *::after{
  animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
html.kx-noanim :is(.hwx,.hws,.hdx),html.kx-lite :is(.hwx,.hws,.hdx,.au-bg){display:none!important}
html.kx-noanim nav a{opacity:1}

/* Mode Hemat: semua di atas + tanpa blur kaca, tanpa efek berat. Untuk HP ngelag. */
html.kx-lite *,html.kx-lite *::before,html.kx-lite *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;text-shadow:none!important;box-shadow:none!important}
html.kx-lite img,html.kx-lite svg,html.kx-lite i{filter:none!important}
html.kx-lite .hx-gl,html.kx-lite .hx-fog,html.kx-lite .hx-em,html.kx-lite .wa-lbl::before{display:none!important}
html.kx-lite .g>.p{content-visibility:auto;contain-intrinsic-size:auto 285px}

/* anti patah: tab tersembunyi / sedang scroll -> animasi dekor dijeda (dipasang oleh v38.js) */
html.kx-hidden *,html.kx-hidden *::before,html.kx-hidden *::after{animation-play-state:paused!important}
html.kx-scrolling :is(.hwx,.hws,.hdx,.au-bg,.wa) *,html.kx-scrolling :is(.hwx,.hws,.hdx,.au-bg,.wa-lbl)::before{animation-play-state:paused!important}
html{-webkit-text-size-adjust:100%}
a,button,label,.btn,.ic,.thb,.tc{touch-action:manipulation}

/* panel pengaturan performa di jendela Tema */
.kxp{margin:14px 0 10px;padding:12px;border:1.5px solid var(--bd2);border-radius:16px;background:var(--card)}
.kxp h5{margin:0 0 2px;font-family:Sora,sans-serif;font-size:14px}
.kxp>p{margin:0 0 4px;font-size:12px;color:var(--mut);line-height:1.4}
.kxp .sw-row{background:transparent;border-radius:12px;padding:10px 6px;margin-top:6px}
.kxp-st{margin-top:8px;font-size:11.5px;color:var(--mut)}
.kxp-st b{color:var(--fg)}
.kx-toast{position:fixed;left:12px;right:12px;bottom:84px;z-index:99;max-width:420px;margin:auto;padding:12px 14px;border-radius:14px;
  background:#0f172a;color:#f8fafc;border:1.5px solid #22c55e;font-size:13px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.kx-toast button{flex:none;border:0;border-radius:99px;padding:7px 12px;font-weight:800;font-size:12px;background:#22c55e;color:#052e16;cursor:pointer}