/* ThoughtStocks — gaya diturunkan langsung dari template desain. */
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2")}

:root{
  --ink:#111111;--ink-2:#39393b;--ink-3:#4b4b4d;--muted:#707072;--muted-2:#9e9ea0;
  --line:#cacacb;--line-2:#e5e5e5;--grid:#e0e0e1;--soft:#f5f5f5;--paper:#ffffff;
  --up:#007d48;--up-hi:#1eaa52;--up-soft:#6fb994;--down:#d30005;--down-soft:#e8898b;
  --asing:#0a7281;--ma50:#8b7cf6;
  --ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --pad:48px;--maxw:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Helvetica,Arial,sans-serif;background:var(--paper);color:var(--ink);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--ink)}a:hover{color:var(--ink-2)}
button{font-family:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:500}
.anton{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase}
.muted{color:var(--muted)}.up{color:var(--up)}.down{color:var(--down)}
.wrap{max-width:var(--maxw);margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}

/* ---------- bar utilitas & nav ---------- */
.util{height:36px;background:var(--soft);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);font-size:12px;font-weight:500}
.util .l,.util .r{display:flex;align-items:center;gap:8px}.util .r{gap:18px}
.dot{width:8px;height:8px;border-radius:9999px;background:var(--up);display:inline-block;position:relative}
.dot.live::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;animation:ping 1.8s var(--ease) infinite}
.dot.off{background:var(--muted-2)}.dot.off::after{display:none}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
.util .sep{color:var(--line)}
.linkbtn{height:36px;padding:0 4px;border:0;background:transparent;font-size:12px;font-weight:500;cursor:pointer}
.linkbtn:hover{text-decoration:underline}

.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);box-shadow:inset 0 -1px 0 var(--line-2);position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);z-index:50}
.logo{font-family:Anton,Impact,sans-serif;font-size:26px;letter-spacing:.5px;text-transform:uppercase;width:360px;text-decoration:none}
.logo span{display:inline-block;transition:transform .5s var(--spring)}
.logo:hover span{transform:translateY(-2px)}
.menu{display:flex;align-items:stretch;gap:24px;height:64px;font-size:16px;font-weight:500}
.menu a{display:flex;align-items:center;text-decoration:none;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);transform:scaleX(0);transition:transform .35s var(--ease)}
.menu a:hover::after{transform:scaleX(.4)}
.menu a.on::after{transform:scaleX(1)}
.search{position:relative;display:flex;justify-content:flex-end;width:360px}
.search label{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;background:var(--soft);border-radius:24px;width:220px;transition:width .35s var(--ease),box-shadow .2s}
.search label:focus-within{width:300px;box-shadow:0 0 0 2px var(--ink)}
.search input{border:0;background:transparent;outline:0;font-size:16px;font-family:inherit;width:100%;color:var(--ink)}
.sug{position:absolute;top:48px;right:0;width:300px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.08);display:none;z-index:60;transform-origin:top right;animation:pop .18s var(--ease)}
.sug.show{display:block}
.sug a{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;text-decoration:none;font-size:14px;border-bottom:1px solid var(--line-2)}
.sug a:last-child{border-bottom:0}
.sug a.act,.sug a:hover{background:var(--soft)}
.sug b{font-weight:600}.sug span{color:var(--muted);font-size:12px;text-align:right;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- tombol pil ---------- */
.pills{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{height:40px;min-width:52px;padding:0 16px;border-radius:30px;border:1px solid transparent;background:var(--soft);font-size:14px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s,transform .15s}
.pill:hover{background:#ebebeb}
.pill:active{transform:scale(.96)}
.pill.on{background:var(--ink);color:#fff}
.pill.o{background:#fff;border-color:var(--line)}
.pill.o:hover{border-color:var(--ink)}
.pill.o.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pill.f{background:#fff;border-color:var(--line);color:var(--muted)}
.pill.f.on{border-color:var(--ink);color:var(--ink);font-weight:600}
.pill.sm{height:32px;padding:0 12px;font-size:13px}
.pill .n{color:var(--muted-2);font-weight:500}
.pill.on .n{color:#b9b9bb}
.vsep{width:1px;height:24px;background:var(--line);margin:0 4px}
.chip{padding:4px 12px;border-radius:30px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:500;white-space:nowrap}

/* ---------- halaman & transisi ---------- */
#app{min-height:70vh}
.page{animation:pageIn .55s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sec{padding:48px var(--pad) 0}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.sec-h h2{font-size:32px;line-height:1.2}
.sec-h p{margin:4px 0 0;font-size:16px;color:var(--muted)}
.ul{font-size:16px;font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* muncul saat discroll */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}}

/* batang yang tumbuh */
.gb{height:100%;background:var(--up);transform:scaleX(0);transform-origin:right;transition:transform .9s var(--ease);transition-delay:var(--d,0s)}
.rb{height:100%;background:var(--down);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);transition-delay:var(--d,0s)}
.grow .gb,.grow .rb,.in .gb,.in .rb{transform:scaleX(1)}

/* kerangka memuat */
.sk{background:linear-gradient(90deg,#efefef 25%,#f7f7f7 37%,#efefef 63%);background-size:400% 100%;animation:shim 1.3s ease infinite;border-radius:4px}
@keyframes shim{0%{background-position:100% 50%}100%{background-position:0 50%}}
.loading{display:flex;flex-direction:column;gap:16px;padding:48px var(--pad)}

/* ---------- hero ---------- */
.hero{margin:24px var(--pad) 0;min-height:560px;background:var(--ink);color:#fff;display:grid;grid-template-columns:1fr 560px;overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;inset:-40%;background:radial-gradient(closest-side,rgba(30,170,82,.16),transparent 70%) 72% 45%/60% 60% no-repeat,radial-gradient(closest-side,rgba(211,0,5,.12),transparent 70%) 95% 90%/50% 50% no-repeat;animation:drift 18s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-4%,3%)}}
.hero-l{padding:56px 0 48px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;position:relative}
.hero-l .badge{align-self:flex-start;padding:4px 12px;border-radius:30px;background:#fff;color:var(--ink);font-size:12px;font-weight:500}
.hero h1{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:96px;line-height:.9;text-transform:uppercase;letter-spacing:-.5px}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{display:block;transform:translateY(105%);animation:rise .9s var(--ease) forwards;animation-delay:var(--d)}
@keyframes rise{to{transform:none}}
.hero p{margin:0;max-width:520px;font-size:18px;line-height:1.5;color:var(--line)}
.fade-up{opacity:0;animation:fadeUp .8s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cta{display:flex;align-items:center;gap:24px}
.btn-w{height:48px;padding:0 32px;display:inline-flex;align-items:center;gap:10px;border-radius:30px;background:#fff;color:var(--ink);font-size:16px;font-weight:500;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s}
.btn-w:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,255,255,.15);color:var(--ink)}
.btn-w svg{transition:transform .25s var(--ease)}.btn-w:hover svg{transform:translateX(4px)}
.hero .ul{color:#fff}
.hero-r{padding:48px 56px 48px 24px;display:flex;flex-direction:column;justify-content:center;gap:18px;position:relative}
.hero-r .top{display:flex;justify-content:space-between;align-items:flex-end}
.hero-r .code{font-family:Anton,Impact,sans-serif;font-size:40px;line-height:.9;text-decoration:none;color:#fff}
.hero-r .sub{font-size:12px;font-weight:500;color:var(--muted-2)}
.stat-chip{padding:4px 12px;border-radius:30px;border:1px solid currentColor;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.hero-r .hd{display:grid;grid-template-columns:1fr 1fr;font-size:12px;font-weight:500;color:var(--muted-2);border-bottom:1px solid var(--ink-2);padding-bottom:8px}
.hrow{display:grid;grid-template-columns:32px 1fr 1fr 32px;align-items:center;column-gap:8px;height:36px;font-size:13px;font-weight:600}
.hrow .bl{display:flex;justify-content:flex-end;height:20px;border-right:1px solid var(--ink-3)}
.hrow .sl{display:flex;height:20px}
.hrow .gb{background:var(--up-hi);display:flex;align-items:center;padding-left:6px;font-size:11px;color:var(--ink);white-space:nowrap;overflow:hidden}
.hrow .rb{display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:11px;color:#fff;white-space:nowrap;overflow:hidden}
.hrow .s{text-align:right}
.hero-r .ratio{display:flex;height:8px;border-radius:9999px;overflow:hidden;background:var(--down)}
.hero-r .ratio i{display:block;background:var(--up-hi);width:0;transition:width 1.1s var(--ease)}
.hero-r .hfoot{display:flex;justify-content:space-between;font-size:12px;font-weight:500;color:var(--muted-2)}
.hero-dots{display:flex;gap:6px;justify-content:center;padding-top:6px}
.hero-dots button{width:22px;height:4px;border:0;border-radius:4px;background:#39393b;cursor:pointer;padding:0;overflow:hidden;position:relative}
.hero-dots button.on::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:prog var(--t,7s) linear forwards}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.swap{animation:swapIn .6s var(--ease)}
@keyframes swapIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ---------- IHSG ---------- */
.ihsg{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:24px;align-items:start}
.ihsg-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.big-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.big-row h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:56px;line-height:.9}
.big-row .v{font-size:40px;font-weight:500;line-height:1}
.chartbox{background:var(--soft);padding:16px 0 8px 16px;position:relative}
.chartbox svg{display:block;width:100%;height:auto;overflow:visible}
.strip{display:grid;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip>div{padding:14px 0;display:flex;flex-direction:column;gap:4px}
.strip .k{font-size:12px;font-weight:500;color:var(--muted)}
.strip .v{font-size:16px;font-weight:500}
.idx-row{display:grid;grid-template-columns:1fr 96px 96px;align-items:center;column-gap:16px;height:64px;border-top:1px solid var(--line-2);text-decoration:none}
.idx-row .c{font-size:16px;font-weight:500}.idx-row .n{font-size:12px;font-weight:500;color:var(--muted)}
.idx-row .r{display:flex;flex-direction:column;align-items:flex-end}
.breadth{background:var(--soft);padding:20px;display:flex;flex-direction:column;gap:12px;margin-top:24px}
.tri{display:flex;height:8px;border-radius:9999px;overflow:hidden;gap:2px}
.tri i{display:block;height:100%;width:0;transition:width 1.1s var(--ease)}

/* ---------- kartu radar ---------- */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.card .box{background:var(--soft);height:260px;padding:20px;display:flex;flex-direction:column;gap:10px;position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s}
.card:hover .box{transform:translateY(-4px);box-shadow:0 14px 30px rgba(17,17,17,.08);background:#f0f0f0}
.card .th{display:flex;justify-content:space-between;align-items:center}
.card .th small{font-size:12px;font-weight:500;color:var(--muted)}
.mrow{display:grid;grid-template-columns:24px 1fr 1fr 24px;align-items:center;column-gap:6px;height:26px;font-size:12px;font-weight:600}
.mrow .bl{display:flex;justify-content:flex-end;height:14px;border-right:1px solid var(--ink)}
.mrow .sl{display:flex;height:14px}
.mrow .s{text-align:right}
.card .l1,.card .l2,.card .l3{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card .l1{padding-top:4px;font-size:16px}.card .l1 b{font-weight:600}.card .l1 span{font-weight:500}
.card .l2{font-size:14px;font-weight:500}.card .l2 .muted{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.card .l3{font-size:14px;font-weight:500}
.card .bar2{display:flex;height:4px;background:var(--down);border-radius:4px;overflow:hidden}
.card .bar2 i{display:block;background:var(--up);width:0;transition:width 1s var(--ease);transition-delay:var(--d,0s)}
.in .card .bar2 i,.card.in .bar2 i{width:var(--w)}

/* ---------- penggerak ---------- */
.movers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.mcol-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:8px;border-bottom:1px solid var(--ink)}
.mcol-h h3{font-size:16px;line-height:1.75}
.mcol-h small{font-size:12px;font-weight:500;color:var(--muted)}
.mv{display:grid;grid-template-columns:1fr auto;align-items:center;height:56px;border-bottom:1px solid var(--line-2);text-decoration:none;position:relative;transition:padding .25s var(--ease)}
.mv::before{content:"";position:absolute;left:-8px;right:-8px;top:0;bottom:0;background:var(--soft);opacity:0;transition:opacity .2s;z-index:-1}
.mv:hover{padding:0 4px}.mv:hover::before{opacity:1}
.mv .a{display:flex;flex-direction:column}.mv .a b{font-size:16px;font-weight:600}.mv .a span,.mv .b span{font-size:12px;font-weight:500}
.mv .a span{color:var(--muted);max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mv .b{display:flex;flex-direction:column;align-items:flex-end}.mv .b b{font-size:16px;font-weight:500}

/* ---------- fitur & donasi ---------- */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.feat{background:var(--soft);padding:32px;display:flex;flex-direction:column;gap:16px;min-height:280px;transition:background .3s,transform .35s var(--ease)}
.feat:hover{background:#efefef;transform:translateY(-3px)}
.feat h3{font-size:24px;line-height:1.2}.feat p{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.feat .ul{margin-top:auto}
.feat svg{transition:transform .5s var(--spring)}.feat:hover svg{transform:scale(1.12) rotate(-4deg)}
.donasi{margin:96px var(--pad) 0;background:var(--soft);padding:40px;display:grid;grid-template-columns:56px 1fr auto;gap:24px;align-items:center}
.donasi .hrt{width:56px;height:56px;border-radius:9999px;background:#fff;display:flex;align-items:center;justify-content:center}
.donasi .hrt svg{animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,60%,100%{transform:scale(1)}20%{transform:scale(1.18)}40%{transform:scale(.96)}}
.donasi h3{font-size:24px;line-height:1.2}.donasi p{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--ink-2);max-width:660px}
.donasi .go{display:flex;flex-direction:column;align-items:center;gap:8px}
.btn-k{height:48px;padding:0 32px;display:inline-flex;align-items:center;gap:10px;border-radius:30px;background:var(--ink);color:#fff;font-size:16px;font-weight:500;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s}
.btn-k:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(17,17,17,.2)}
.foot{margin-top:48px;padding:24px var(--pad);border-top:1px solid var(--line-2);display:flex;justify-content:space-between;gap:16px;font-size:12px;font-weight:500;color:var(--muted)}
.foot a{color:var(--muted)}

/* ---------- detail saham ---------- */
.crumb{font-size:14px;font-weight:500;color:var(--muted);padding:40px var(--pad) 0}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--ink)}
.tick{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:24px var(--pad) 24px;border-bottom:1px solid var(--line);margin:0 var(--pad);padding-left:0;padding-right:0}
.tick .l{display:flex;align-items:center;gap:24px}
.tick .code{font-family:Anton,Impact,sans-serif;font-size:96px;line-height:.9;text-transform:uppercase}
.tick .nm{font-size:18px;font-weight:500}
.tick .tags{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.tick .r{text-align:right}
.tick .px{font-size:56px;font-weight:500;line-height:1}
.tick .ch{font-size:18px;font-weight:500;margin-top:4px}
.tick .up2{font-size:12px;color:var(--muted);font-weight:500;margin-top:4px}
.stats8{grid-template-columns:repeat(8,minmax(0,1fr));margin:0 var(--pad)}
.main2{display:grid;grid-template-columns:minmax(0,1fr) 496px;gap:24px;padding:48px var(--pad) 0;align-items:start}
.panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.panel-h h2{font-size:24px;line-height:1.2}
.ohlc{display:flex;gap:16px;font-size:14px;font-weight:500;flex-wrap:wrap}
.ohlc i{font-style:normal;color:var(--muted)}
.ma-dot{width:12px;height:3px;border-radius:9999px;display:inline-block}
.stage{background:var(--soft);padding:16px 0 8px 16px;position:relative;touch-action:pan-y}
.stage svg{display:block;width:100%;height:auto}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;font-weight:500;padding:8px 10px;border-radius:6px;white-space:nowrap;opacity:0;transition:opacity .15s;z-index:5;line-height:1.5}
.tip.show{opacity:1}
.acc{background:var(--soft);padding:20px;display:flex;flex-direction:column;gap:12px}
.acc .t{display:flex;justify-content:space-between;align-items:flex-end}
.acc .st{font-size:24px;font-weight:500;line-height:1.2}
.acc .ratio{display:flex;height:8px;border-radius:9999px;overflow:hidden;background:var(--down)}
.acc .ratio i{display:block;background:var(--up);width:0;transition:width 1s var(--ease)}
.bt-h,.bt-r{display:grid;grid-template-columns:44px 1.3fr 1fr .9fr 44px 1.3fr 1fr .9fr;column-gap:6px;align-items:center}
.bt-h{padding:8px 0;border-bottom:1px solid var(--ink);font-size:12px;font-weight:500;color:var(--muted)}
.bt-h span{text-align:right;white-space:nowrap}.bt-h span:nth-child(1){text-align:left}.bt-h span:nth-child(4){padding-right:8px}
.bt-h span:nth-child(5){text-align:left;padding-left:8px;border-left:1px solid var(--line)}
.bt-r{height:40px;border-bottom:1px solid var(--line-2);font-size:13px;font-weight:500;opacity:0;animation:rowIn .45s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes rowIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.bt-r>span{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-r>span:nth-child(4){padding-right:8px}
.bt-r .lt{color:var(--ink-2)}
.bt-h.st,.bt-r.st{grid-template-columns:64px 1.2fr 1fr .9fr;column-gap:10px}
.bt-h.st span:nth-child(4),.bt-r.st>span:nth-child(4){padding-right:0}
.bt-h.st span:nth-child(5){border-left:0}
.bt-r .bk{display:flex;align-items:center;gap:6px;cursor:default;text-align:left}
.bt-r .bk.s{padding-left:8px;border-left:1px solid var(--line);height:40px}
.bdot{width:8px;height:8px;border-radius:9999px;background:var(--muted-2);display:inline-block;flex-shrink:0}
.bdot.a{background:var(--asing)}
.legend{display:flex;gap:18px;padding-top:12px;font-size:12px;font-weight:500;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.nrow{display:grid;grid-template-columns:40px 1fr 80px;align-items:center;column-gap:8px;height:24px;font-size:14px;font-weight:500}
.nrow .tr{display:flex;height:12px}
.nrow .tr>div{flex:1;display:flex}
.nrow .tr>div:first-child{justify-content:flex-end;border-right:1px solid var(--ink)}
.nrow .v{text-align:right}
.empty{padding:32px;text-align:center;color:var(--muted);font-size:14px;background:var(--soft)}

/* popover tanggal */
.cal{position:absolute;z-index:40;width:640px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:18px;box-shadow:0 20px 50px rgba(0,0,0,.12);animation:pop .2s var(--ease);user-select:none}
.cal .t{display:flex;justify-content:space-between;align-items:flex-start}
.cal .months{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cal .mh{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;margin-bottom:8px}
.cal .nv{width:32px;height:32px;border-radius:9999px;border:0;background:var(--soft);cursor:pointer}
.cal .nv:disabled{opacity:.3;cursor:default}
.cal .g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:13px;text-align:center}
.cal .g .w{color:var(--muted);font-size:11px;font-weight:500;padding:4px 0}
.cal .g button{height:34px;border:0;background:transparent;font-size:13px;font-weight:500;cursor:pointer;border-radius:6px;transition:background .15s}
.cal .g button:hover:not(:disabled){background:var(--soft)}
.cal .g button:disabled{color:#c9c9ca;cursor:default}
.cal .g button.rg{background:#ececec;border-radius:0}
.cal .g button.ed,.cal .g button.ed:hover:not(:disabled){background:var(--ink);color:#fff}
.cal .ft{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;font-weight:500}
.icon-btn{width:40px;height:40px;border-radius:9999px;border:0;background:var(--soft);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,background .2s}
.icon-btn:hover{background:#ebebeb;transform:rotate(90deg)}

/* ---------- radar ---------- */
.subbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 var(--pad);height:56px;border-bottom:1px solid var(--line-2);font-size:14px;font-weight:500;color:var(--muted)}
.subbar .l{display:flex;align-items:center;gap:8px}
.subbar .r{display:flex;align-items:center;gap:16px;color:var(--ink)}
.subbar select{height:40px;padding:0 36px 0 14px;border-radius:30px;border:1px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none;font:inherit;font-size:13px;cursor:pointer}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line-2);margin:32px var(--pad) 0}
.tabs a{display:flex;align-items:center;gap:8px;height:48px;text-decoration:none;font-size:18px;font-weight:500;color:var(--muted);position:relative}
.tabs a.on{color:var(--ink)}
.tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transition:transform .35s var(--ease)}
.tabs a.on::after{transform:scaleX(1)}
.rtitle{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:32px var(--pad) 0;flex-wrap:wrap}
.rtitle h1{font-size:32px;line-height:1.2}.rtitle h1 span{color:var(--muted)}
.rtitle p{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--ink-2);max-width:560px}
.rgrid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:24px var(--pad) 0}
.rgrid.nofilter{grid-template-columns:minmax(0,1fr)}
.rgrid.nofilter .side{display:none}
.side{display:flex;flex-direction:column;gap:0;font-size:14px}
.side h4{margin:0 0 8px;font-size:15px;font-weight:500}
.side .grp{padding:16px 0;border-bottom:1px solid var(--line)}
.side .grp:first-child{padding-top:0}
.side label{display:flex;align-items:flex-start;gap:10px;min-height:28px;padding:5px 0;cursor:pointer;font-weight:500;line-height:1.3}
.side label input{margin-top:1px!important;flex-shrink:0}
.side label .n{color:var(--muted)}
.side input[type=checkbox],.side input[type=radio]{width:16px;height:16px;accent-color:var(--ink);margin:0}
.side input[type=text]{width:100%;height:36px;border-radius:30px;border:0;background:var(--soft);padding:0 14px;font:inherit;font-size:13px;outline:0;text-transform:uppercase}
.side input[type=text]:focus{box-shadow:0 0 0 2px var(--ink)}
.side .reset{margin-top:16px;height:36px;border-radius:30px;border:0;background:var(--soft);cursor:pointer;font-size:13px;font-weight:500}
.rcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 8px;row-gap:32px}
.rcards.list{grid-template-columns:1fr;row-gap:0}
.lrow{display:grid;grid-template-columns:90px minmax(0,1.6fr) 90px 110px minmax(160px,1fr) 120px 120px;align-items:center;gap:12px;height:56px;border-bottom:1px solid var(--line-2);font-size:14px;font-weight:500;text-decoration:none}
.lrow:hover{background:var(--soft)}
.lrow.h{height:40px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--ink)}
.lrow .rt{text-align:right}
.more{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:40px;font-size:14px;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:24px var(--pad) 0}
.kpis>div{padding:20px 24px;display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--line)}
.kpis>div:first-child{border-left:0;padding-left:0}
.kpis .k{font-size:12px;font-weight:500;color:var(--muted)}
.kpis .v{font-size:32px;font-weight:500;line-height:1.1}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.rank-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:8px;border-bottom:1px solid var(--ink)}
.rank-h h3{font-size:22px}
.rank{display:grid;grid-template-columns:24px 150px 1fr 96px;align-items:center;gap:12px;height:56px;border-bottom:1px solid var(--line-2);text-decoration:none}
.rank .no{font-size:12px;color:var(--muted)}
.rank .nm b{display:block;font-size:15px;font-weight:600}.rank .nm span{font-size:12px;color:var(--muted);display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rank .tr{height:10px;background:var(--soft)}
.rank .tr i{display:block;height:100%;width:0;transition:width 1s var(--ease);transition-delay:var(--d,0s)}
.in .rank .tr i{width:var(--w)}
.rank .v{text-align:right;font-weight:500}
.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px}
.btab-h,.btab-r{display:grid;grid-template-columns:40px minmax(0,1.4fr) 1fr 1fr minmax(120px,1.2fr) 70px;align-items:center;gap:12px}
.btab-h{font-size:12px;font-weight:500;color:var(--muted);height:36px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.btab-h span:nth-child(3),.btab-h span:nth-child(4),.btab-h span:nth-child(5),.btab-h span:nth-child(6){text-align:right}
.btab-r{height:56px;border-bottom:1px solid var(--line-2);font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}
.btab-r:hover{background:var(--soft)}
.btab-r .cd{width:32px;height:32px;border-radius:9999px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;transition:background .2s,color .2s}
.btab-r:hover .cd,.btab-r.open .cd{background:var(--ink);color:#fff}
.btab-r>span:nth-child(3),.btab-r>span:nth-child(4),.btab-r>span:nth-child(6){text-align:right}
.btab-r .nb{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
.btab-r .nb .tr{height:6px;background:var(--soft)}
.btab-r .nb .tr i{display:block;height:100%}
.bdet{overflow:hidden;max-height:0;transition:max-height .45s var(--ease);background:var(--soft)}
.bdet.open{max-height:260px}
.bdet .in2{padding:16px 20px;display:grid;grid-template-columns:1fr 1fr;gap:24px;font-size:13px}
.bdet .in2 a{display:flex;justify-content:space-between;text-decoration:none;padding:4px 0}
.sekrow{display:grid;grid-template-columns:1fr 140px 80px;align-items:center;gap:12px;height:44px;border-bottom:1px solid var(--line-2);font-size:14px;font-weight:500}
.sekrow .tr{display:flex;height:10px}
.sekrow .tr>div{flex:1;display:flex}
.sekrow .tr>div:first-child{justify-content:flex-end;border-right:1px solid var(--line)}
.sekrow .v{text-align:right}

/* ---------- modal bantuan ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(17,17,17,.4);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal-bg.show{display:flex;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{width:560px;max-width:100%;max-height:calc(100vh - 32px);overflow:auto;background:#fff;padding:32px;display:flex;flex-direction:column;gap:24px;animation:modalIn .35s var(--spring)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.modal h2{font-size:24px;line-height:1.2}
.modal .sub{font-size:14px;font-weight:500;color:var(--muted);margin-top:4px}
.modal .lbl{font-size:16px;font-weight:500;margin-bottom:12px}
.inp{display:flex;align-items:center;gap:10px;height:48px;padding:0 18px;border-radius:30px;background:var(--soft);transition:box-shadow .2s}
.inp:focus-within{box-shadow:0 0 0 2px var(--ink)}
.inp input{border:0;background:transparent;outline:0;font:inherit;font-size:16px;width:100%}
.hint{font-size:12px;font-weight:500;color:var(--muted);margin-top:8px}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choice button{text-align:left;padding:16px 18px;background:var(--soft);border:1px solid var(--line-2);cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .2s,background .2s,transform .15s}
.choice button:hover{border-color:var(--line)}
.choice button.on{border-color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.choice b{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}
.choice span{font-size:14px;color:var(--ink-2);line-height:1.4}
textarea.ta{width:100%;min-height:110px;border:0;border-radius:16px;background:var(--soft);padding:14px 18px;font:inherit;font-size:15px;resize:vertical;outline:0;animation:fadeUp .3s var(--ease)}
textarea.ta:focus{box-shadow:0 0 0 2px var(--ink)}
.mact{display:flex;justify-content:flex-end;gap:8px;margin-top:auto}
.btn{height:48px;padding:0 28px;border-radius:30px;border:0;font-size:16px;font-weight:500;cursor:pointer;transition:background .2s,opacity .2s,transform .15s}
.btn:active{transform:scale(.97)}
.btn.g{background:var(--soft)}.btn.k{background:var(--ink);color:#fff}
.btn.k:disabled{background:#a9a9aa;cursor:default}
.ok-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 0;text-align:center}
.ok-state svg{animation:modalIn .5s var(--spring)}
.err{color:var(--down);font-size:13px;font-weight:500}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:30px;font-size:14px;font-weight:500;opacity:0;transition:.3s var(--ease);z-index:120;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- responsif ---------- */
@media (max-width:1200px){
  .ihsg,.main2{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .hero-r{padding:0 40px 40px}
  .cards,.movers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats8{grid-template-columns:repeat(4,minmax(0,1fr))}
  .split,.two{grid-template-columns:1fr}
  .logo,.search{width:auto}
}
@media (max-width:760px){
  :root{--pad:16px}
  .util .l span:last-child{max-width:230px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  #util-ihsg,.util .sep{display:none}
  .nav{height:auto;flex-wrap:wrap;padding:10px var(--pad);gap:8px}
  .menu{order:3;width:100%;height:40px;gap:20px;font-size:15px;overflow-x:auto}
  .search label{width:160px}.search label:focus-within{width:200px}
  .sug{width:calc(100vw - 32px)}
  .hero{margin:16px var(--pad) 0;min-height:0}
  .hero-l{padding:32px 24px}
  .hero h1{font-size:60px}
  .hero-r{padding:0 20px 28px}
  .cta{flex-wrap:wrap;gap:16px}
  .sec-h{flex-direction:column;align-items:flex-start}
  .sec-h h2,.rtitle h1{font-size:26px}
  .big-row h2{font-size:42px}.big-row .v{font-size:30px}
  .cards,.movers,.feats,.rcards{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .stats8{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tick{flex-direction:column;align-items:flex-start}
  .tick .l{flex-direction:column;align-items:flex-start;gap:12px}
  .tick .code{font-size:64px}.tick .r{text-align:left}.tick .px{font-size:40px}
  .rgrid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}.kpis>div:nth-child(3){border-left:0;padding-left:0}
  .kpis .v{font-size:24px}
  .rank{grid-template-columns:20px 110px 1fr 80px;gap:8px}
  .lrow{grid-template-columns:70px 1fr 80px 90px;font-size:13px}
  .lrow>*:nth-child(n+5){display:none}
  .btab-h,.btab-r{grid-template-columns:36px 1fr 1fr 70px}
  .btab-h>*:nth-child(2),.btab-r>*:nth-child(2),.btab-h>*:nth-child(5),.btab-r>*:nth-child(5){display:none}
  .donasi{grid-template-columns:1fr;text-align:left;padding:24px;margin-top:64px}
  .foot{flex-direction:column}
  .cal .months{grid-template-columns:1fr}
  .cal .months>div:last-child{display:none}
  .main2{padding-top:32px}
}

.hitung-info{margin:-4px 0 10px;padding:8px 12px;background:#f7efe3;border:1px solid #ead7b8;color:#6b4f1f;font-size:12.5px;font-weight:500;animation:fadeUp .3s var(--ease)}
.hitung-info[hidden]{display:none}
.bt-wrap:not(.semua) .bt-more{display:none}
.bt-tog{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:10px 0;background:none;border:0;border-top:1px solid #e0e0e1;font:inherit;font-size:13px;font-weight:600;color:#111;cursor:pointer}
.bt-tog:hover{background:#f5f5f5}
.bt-tog svg{transition:transform .25s var(--ease)}
.bt-tog[aria-expanded="true"] svg{transform:rotate(180deg)}
.cari-box{display:flex;align-items:center;gap:10px;max-width:520px;height:48px;padding:0 18px;border:1px solid #cacacb;border-radius:24px;background:#fff}
.cari-box:focus-within{border-color:#111}
.cari-box input{flex:1;border:0;outline:0;font:inherit;font-size:15px;background:transparent}
#cari-hasil,#cari-asing-hasil{display:flex;flex-direction:column;gap:8px;max-width:720px;margin-top:12px}
.cari-kartu{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#f5f5f5;border-radius:12px;font-size:14px;color:inherit;text-decoration:none;animation:fadeUp .3s var(--ease)}
a.cari-kartu:hover{background:#ececec}
.cari-kartu b{min-width:56px}
.muat-info{display:flex;align-items:center;gap:10px;padding:12px 16px;margin-bottom:8px;background:#f7efe3;border:1px solid #ead7b8;color:#6b4f1f;font-size:14px;font-weight:500;animation:fadeUp .3s var(--ease)}
.spin2{width:14px;height:14px;border-radius:50%;border:2px solid #e8c878;border-top-color:#6b4f1f;animation:putar .8s linear infinite;flex-shrink:0}
@keyframes putar{to{transform:rotate(360deg)}}
.sekpeta{grid-column:span 2;min-width:0}
.sek-leg{display:flex;align-items:center;gap:3px}
.sek-leg i{display:inline-block;width:10px;height:10px}
.sek-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin-top:12px}
.sek{display:flex;flex-direction:column;gap:4px;min-height:74px;padding:10px 12px;color:#111;text-decoration:none;animation:fadeUp .4s var(--ease) backwards;animation-delay:var(--d);transition:filter .15s}
.sek:hover{filter:brightness(.95)}
.sek.lebar{grid-column:span 2}
.sek .n{font-size:12px;font-weight:500;line-height:1.3}
.sek b{font-size:20px;font-weight:500;line-height:1.1}
.sek .t{font-size:11px;opacity:.8;margin-top:auto}
.sek.gelap{color:#fff}
@media (max-width:1200px){.sekpeta{grid-column:1/-1}}
@media (max-width:760px){.sek-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sek b{font-size:18px}}

/* HP: halaman Akumulasi tidak boleh lebih lebar dari layar (grid 1fr ikut melebar
   mengikuti label terpanjang; baris "filter + urutkan" tidak muat satu baris) */
@media (max-width:760px){
  .rgrid,.cards,.movers,.feats,.rcards{grid-template-columns:minmax(0,1fr)}
  .side,.card,.rcards>*{min-width:0}
  .subbar{height:auto;min-height:56px;flex-wrap:wrap;row-gap:8px;padding-top:10px;padding-bottom:10px}
  .subbar .r{flex-wrap:wrap;gap:10px 16px}
}

/* ---------- popup video tutorial (sekali untuk pengunjung baru) ---------- */
a.linkbtn{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)}
.tutor{position:fixed;top:16px;left:50%;width:520px;max-width:calc(100vw - 32px);transform:translate(-50%,-24px);opacity:0;transition:transform .35s var(--spring),opacity .25s var(--ease);z-index:110;background:#fff;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.14);padding:16px;display:flex;align-items:flex-start;gap:14px}
.tutor.show{transform:translate(-50%,0);opacity:1}
.tutor-play{flex:none;width:56px;height:56px;border-radius:12px;background:var(--soft);display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease)}
.tutor-play:hover{transform:scale(1.06)}
.tutor-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tutor-tx b{font-size:16px;font-weight:600}
.tutor-tx span{font-size:14px;color:var(--muted);line-height:1.45}
.tutor-btn{align-self:flex-start;margin-top:8px;height:36px;padding:0 18px;display:inline-flex;align-items:center;gap:8px;border-radius:30px;background:var(--ink);color:#fff;font-size:14px;font-weight:500;text-decoration:none;transition:transform .2s var(--ease)}
.tutor-btn:hover{color:#fff;transform:translateY(-2px)}
.tutor .icon-btn{flex:none;width:32px;height:32px}
@media (max-width:760px){.tutor{padding:14px;gap:12px}.tutor-play{width:44px;height:44px}}

/* ---------- pola harmonic (ABCD & Butterfly) di chart Analisa ---------- */
.harm-gear{min-width:40px;padding:0 11px}
.harm-set{margin:-4px 0 12px;padding:14px 16px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:10px;font-size:13px;animation:fadeUp .25s var(--ease)}
.harm-set[hidden]{display:none}
.hs-row{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.hs-row .k{min-width:130px;font-weight:600}
.hs-row label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:500}
.hs-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--ink);margin:0}
.hs-row select{height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-weight:500;cursor:pointer}
.hs-row small{color:var(--muted);font-size:12px}
.harm-info{margin-top:10px;padding:10px 14px;background:var(--soft);font-size:13px;line-height:1.6}
.harm-info[hidden]{display:none}
.harm{animation:fade .35s ease}
@media (max-width:760px){.hs-row .k{min-width:100%}}

/* ---------- zoom & geser chart Analisa ---------- */
.stage-wrap{position:relative}
.stage{user-select:none;-webkit-user-select:none}
.stage.geser,.stage.geser *{cursor:grabbing!important}
.diam .harm,.diam .cd,.diam .vb{animation:none}   /* zoom/geser: langsung tampil, tanpa animasi tumbuh */
.zoom-bar{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);display:flex;gap:4px;padding:4px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:30px;box-shadow:0 6px 18px rgba(0,0,0,.08);opacity:0;transition:opacity .2s;z-index:2}
.stage-wrap:hover .zoom-bar,.zoom-bar:focus-within{opacity:1}
.zoom-bar button{width:32px;height:32px;border:0;border-radius:9999px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:background .15s}
.zoom-bar button:hover{background:var(--soft)}
@media (hover:none){.zoom-bar{opacity:1;bottom:40px}}
.harm-zoom{height:auto;padding:0;font-size:13px;font-weight:600;text-decoration:underline;color:var(--ink)}