/* QUADLUX // cyber-people — gaya dosir cyberpunk untuk Pools, Leaderboard, Portfolio.
   Dimuat setelah base.css + pages.css; hanya dipakai tiga halaman itu (body.cp). */
:root{
  --pk:#ff3b5f;--pk2:#ff7a90;--pk-d:#7a1426;--pk-bg:rgba(255,59,95,.08);--pk-ln:rgba(255,59,95,.32);--pk-ln2:rgba(255,59,95,.18);
  --cy:'Big Shoulders Display','Geist',sans-serif;--ui:'Chakra Petch','Geist',sans-serif;
  --cp-bg:#070306;--cp-panel:rgba(10,4,8,.9);
  --cut:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  --cut-s:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
body.cp{background:var(--cp-bg)}
body.cp::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(1100px 620px at 50% -8%,rgba(255,59,95,.13),transparent 62%),
  linear-gradient(rgba(255,59,95,.035) 1px,transparent 1px) 0 0/56px 56px,
  linear-gradient(90deg,rgba(255,59,95,.035) 1px,transparent 1px) 0 0/56px 56px,
  repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.3));mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.3))}
body.cp .pg,body.cp .pg-foot{position:relative;z-index:1}
body.cp ::selection{background:rgba(255,59,95,.35)}

/* ---------- nav: magenta lama -> crimson ---------- */
body.cp .gnav{border-bottom-color:rgba(255,59,95,.22);background:rgba(7,3,6,.92)}
body.cp .gnav .brand b{color:var(--pk)}
body.cp .gnav-links a.on{color:var(--pk);background:rgba(255,59,95,.09)}
body.cp .gnav-links a:hover{color:#fff}
body.cp .gnav-links a.on::after{background:var(--pk);box-shadow:0 0 10px var(--pk)}
body.cp .venue{border-radius:0;clip-path:var(--cut-s);border-color:var(--pk-ln)}
body.cp .venue button{border-radius:0;font:600 11px var(--ui);letter-spacing:.1em;text-transform:uppercase}
body.cp .venue button.on{background:var(--pk);color:#fff}
body.cp .pill{border-radius:0;clip-path:var(--cut-s);border-color:var(--pk-ln2);font:600 11px var(--ui);letter-spacing:.12em;text-transform:uppercase}

/* ---------- label umum ---------- */
.cp-ph{font:700 11.5px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--pk);display:flex;gap:6px;flex-wrap:wrap}
.cp-ph span{color:var(--ink-3);letter-spacing:.1em}

/* ---------- kepala halaman: judul + kartu adegan ---------- */
.cp-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:28px;align-items:stretch;margin:6px 0 22px}
.cp-head-l{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:12px;min-width:0}
.cp-kick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 11.5px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.cp-kick em{font-style:normal;color:#fff;background:var(--pk);padding:3px 8px;clip-path:var(--cut-s);font-weight:700}
.cp-kick span{color:var(--pk)}
.cp-kick b{color:#fff;font-weight:600}
.cp-head h1{font:900 clamp(46px,5.4vw,84px)/.86 var(--cy);text-transform:uppercase;letter-spacing:.002em;color:#fff;margin-top:4px}
.cp-head h1 span{display:block;background:linear-gradient(100deg,#ff6d86 0%,#ff3b5f 40%,#ffe0e6 48%,#fff 50%,#ffe0e6 52%,#ff3b5f 60%,#a3122e 100%);background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(255,59,95,.3));animation:cpSheen 8s ease-in-out 1.2s infinite}
@keyframes cpSheen{0%,72%{background-position:100% 0}100%{background-position:0 0}}
.cp-head p{color:var(--ink-2);font-size:14px;line-height:1.6;max-width:640px;padding-left:14px;border-left:2px solid var(--pk)}
.cp-head .pg-tools{margin-top:4px}
.cp-tl{font:700 11px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.cp-head-l>*{animation:cpRise .8s cubic-bezier(.16,1,.3,1) both}
.cp-head-l>*:nth-child(2){animation-delay:.06s}.cp-head-l>*:nth-child(3){animation-delay:.12s}.cp-head-l>*:nth-child(4){animation-delay:.18s}
@keyframes cpRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.cp-scene{position:relative;margin:0;min-height:230px;overflow:hidden;clip-path:var(--cut);border:1px solid var(--pk-ln);background:#0a0408;box-shadow:0 0 70px -24px rgba(255,59,95,.5);animation:cpRise 1s cubic-bezier(.16,1,.3,1) .1s both}
.cp-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:cpDrift 22s ease-in-out infinite alternate}
@keyframes cpDrift{from{transform:scale(1.04)}to{transform:scale(1.14) translateY(-2%)}}
.cp-scan{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),radial-gradient(120% 95% at 50% 40%,transparent 50%,rgba(7,3,6,.75)),linear-gradient(0deg,rgba(7,3,6,.85),transparent 45%)}
.cp-scan::after{content:"";position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(180deg,transparent,rgba(255,59,95,.0) 40%,rgba(255,120,140,.35) 92%,rgba(255,255,255,.65) 100%);mix-blend-mode:screen;transform:translateY(-110%);animation:cpSweep 6s cubic-bezier(.6,.1,.3,1) infinite}
@keyframes cpSweep{0%{transform:translateY(-110%)}55%,100%{transform:translateY(360%)}}
.cp-scene .b{position:absolute;width:16px;height:16px;border:0 solid var(--pk);z-index:2}
.cp-scene .b.tl{left:10px;top:10px;border-width:2px 0 0 2px}.cp-scene .b.tr{right:10px;top:10px;border-width:2px 2px 0 0}
.cp-scene .b.bl{left:10px;bottom:10px;border-width:0 0 2px 2px}.cp-scene .b.br{right:10px;bottom:10px;border-width:0 2px 2px 0}
.cp-scene figcaption{position:absolute;left:18px;right:18px;bottom:14px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:10px;font:700 11px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px #000}
.cp-scene figcaption b{color:var(--pk);font-weight:700}
.rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pk);margin-right:8px;box-shadow:0 0 8px var(--pk);animation:cpBlink 1.2s steps(2) infinite;vertical-align:1px}
@keyframes cpBlink{50%{opacity:.2}}

/* ---------- panel, pita angka, tabel ---------- */
body.cp .box{position:relative;border-radius:0;clip-path:var(--cut);border:1px solid var(--pk-ln2);background:var(--cp-panel)}
body.cp .box::after{content:"";position:absolute;right:7px;top:7px;width:6px;height:6px;border-top:1px solid var(--pk);border-right:1px solid var(--pk);pointer-events:none}
body.cp .box-h{border-bottom-color:var(--pk-ln2);padding:12px 18px;flex-wrap:wrap}
body.cp .box-h>b{font:700 12px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--pk)}
body.cp .box-h>b::before{content:"";display:inline-block;width:6px;height:6px;background:var(--pk);margin-right:10px;vertical-align:1px;box-shadow:0 0 8px var(--pk)}
body.cp .box-h .faint{font:600 11px var(--ui);letter-spacing:.12em;text-transform:uppercase}
.cp-boxr{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

body.cp .strip{border-radius:0;clip-path:var(--cut);border:1px solid var(--pk-ln2);background:linear-gradient(180deg,rgba(255,59,95,.05),rgba(10,4,8,.9) 60%)}
body.cp .strip>div{border-left-color:var(--pk-ln2);padding:14px 18px 15px;position:relative}
body.cp .strip>div::before{content:"";position:absolute;left:18px;top:0;width:18px;height:2px;background:var(--pk);box-shadow:0 0 8px var(--pk)}
body.cp .strip span{font:600 10.5px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
body.cp .strip b{font:800 30px/1.05 var(--cy);letter-spacing:.01em;color:#fff}
body.cp .strip b.up{color:var(--up)}body.cp .strip b.down{color:var(--down)}
body.cp .strip b span{font:inherit;letter-spacing:inherit;text-transform:none}
body.cp .strip b span.up{color:var(--up)}body.cp .strip b span.down{color:var(--down)}body.cp .strip b span.faint{color:var(--ink-3)}
body.cp .strip small{font-size:11px}
body.cp .breadth{border-radius:0;height:4px}

body.cp .tbl th{font:600 10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border-bottom-color:var(--pk-ln2);padding:12px 14px}
body.cp .tbl th.on{color:var(--pk)}
body.cp .tbl th.on::before{content:"";display:inline-block;width:5px;height:5px;background:var(--pk);margin-right:6px;vertical-align:1px;box-shadow:0 0 6px var(--pk)}
body.cp .tbl th[data-k]:hover{color:#fff}
body.cp .tbl td{border-bottom-color:rgba(255,59,95,.07)}
body.cp .tbl tbody tr:hover{background:linear-gradient(90deg,rgba(255,59,95,.11),rgba(255,59,95,.02) 70%);box-shadow:inset 2px 0 0 var(--pk)}
body.cp .tbl .sym{font-family:var(--ui);font-weight:700;letter-spacing:.03em}
body.cp .tag{border-radius:0;clip-path:var(--cut-s);font:700 9.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;background:rgba(255,59,95,.12);color:var(--pk2)}
body.cp .rank{border-radius:0;clip-path:var(--cut-s);border-color:var(--pk-ln2);font:700 12px var(--ui);color:var(--ink-2)}
body.cp .rank.r1{background:var(--pk);border-color:var(--pk);color:#fff}
body.cp .rank.r2,body.cp .rank.r3{border-color:var(--pk);color:var(--pk)}
body.cp .ls,body.cp .dist i{border-radius:0;background:rgba(255,255,255,.07)}
body.cp .dist i em{border-radius:0}
body.cp .idn{border-radius:0}

/* ---------- kontrol ---------- */
body.cp .seg2{border-radius:0;clip-path:var(--cut-s);border-color:var(--pk-ln);background:rgba(10,4,8,.8)}
body.cp .seg2 button{border-radius:0;font:700 11.5px var(--ui);letter-spacing:.12em;text-transform:uppercase;padding:0 14px;transition:color .2s,background .2s}
body.cp .seg2 button:hover{color:#fff}
body.cp .seg2 button.on{background:var(--pk);color:#fff;box-shadow:0 0 16px rgba(255,59,95,.4)}
body.cp .search{border-radius:0;clip-path:var(--cut-s);border-color:var(--pk-ln);background:rgba(7,3,6,.9);font:600 12px var(--ui);letter-spacing:.1em;height:32px}
body.cp .search::placeholder{color:var(--ink-3);text-transform:uppercase}
body.cp .search:focus{border-color:var(--pk)}
body.cp .btn-primary{background:var(--pk);color:#fff;border-radius:0;clip-path:var(--cut-s);font:700 12.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 26px rgba(255,59,95,.35)}
body.cp .btn-primary:hover{background:#ff5574}
body.cp .btn-primary i{font-style:normal;transition:transform .2s}body.cp .btn-primary:hover i{transform:translateX(3px)}
body.cp .btn-ghost{border-radius:0;clip-path:var(--cut-s);border-color:var(--pk-ln);font:700 11.5px var(--ui);letter-spacing:.14em;text-transform:uppercase}
body.cp .btn-ghost:hover{background:var(--pk-bg);border-color:var(--pk)}
body.cp .fine{font-size:12px;color:var(--ink-3);line-height:1.6;max-width:820px}

/* ---------- Pools: kartu file LLP ---------- */
.llp-file{position:relative;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);margin-bottom:16px;clip-path:var(--cut);border:1px solid var(--pk-ln);background:linear-gradient(120deg,rgba(255,59,95,.09),rgba(10,4,8,.92) 45%);box-shadow:0 0 80px -30px rgba(255,59,95,.45)}
.llp-file::before{content:"";position:absolute;left:0;top:0;height:1px;width:38%;z-index:3;background:linear-gradient(90deg,transparent,#ff3b5f,#fff,#ff3b5f,transparent);animation:cpEdge 6s linear infinite}
@keyframes cpEdge{0%{transform:translateX(-100%)}60%,100%{transform:translateX(280%)}}
.lf-art{position:relative;overflow:hidden;border-right:1px solid var(--pk-ln);min-height:230px}
.lf-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 35%;animation:cpDrift 24s ease-in-out infinite alternate}
.lf-stamp{position:absolute;right:14px;bottom:16px;z-index:2;font:800 20px/.92 var(--cy);text-transform:uppercase;letter-spacing:.04em;color:var(--pk);padding:6px 10px;border:2px solid var(--pk);transform:rotate(-8deg);background:rgba(7,3,6,.55);text-shadow:0 0 12px rgba(255,59,95,.6)}
.lf-body{padding:20px 24px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.lf-body h3{font:800 clamp(30px,3vw,44px)/.92 var(--cy);text-transform:uppercase;color:#fff;letter-spacing:.01em}
.lf-p{font-size:13px;line-height:1.6;color:var(--ink-2);max-width:640px}
.lf-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--pk-ln2);border-bottom:1px solid var(--pk-ln2);margin-top:2px}
.lf-stats>div{padding:12px 14px 12px 0;display:flex;flex-direction:column;gap:3px;min-width:0}
.lf-stats>div+div{padding-left:16px;border-left:1px solid var(--pk-ln2)}
.lf-stats span{font:600 10.5px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.lf-stats b{font:800 clamp(28px,2.6vw,40px)/1 var(--cy);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-stats b.up{color:var(--up);text-shadow:0 0 20px rgba(47,211,154,.25)}
.lf-bar{display:block;height:4px;background:rgba(255,255,255,.07);margin-top:6px}
.lf-bar em{display:block;height:100%;background:var(--pk);box-shadow:0 0 8px var(--pk);animation:cpGrow 1.2s cubic-bezier(.16,1,.3,1) both;transform-origin:left}
@keyframes cpGrow{from{transform:scaleX(0)}}
.lf-meta{display:flex;flex-wrap:wrap;gap:6px 22px;font:600 11px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.lf-meta b{color:#fff;font-weight:700;margin-left:4px}.lf-meta b.up{color:var(--up)}

/* tabel pool */
.pname{max-width:320px}
.pname .pidx{display:inline-block;min-width:24px;margin-right:10px;font:700 11px var(--ui);color:var(--pk);opacity:.8}
.pname .pn{display:inline-block;max-width:270px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.trader.op{gap:8px}.trader.op .mono{font-size:12px}
.tvl{display:inline-flex;flex-direction:column;align-items:flex-end;gap:5px}
.tvl i{display:block;width:84px;height:3px;background:rgba(255,255,255,.07)}
.tvl em{display:block;height:100%;margin-left:auto;background:linear-gradient(90deg,var(--pk-d),var(--pk))}

/* ---------- Leaderboard: podium kartu dosir ---------- */
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;margin-bottom:16px;transition:opacity .3s}
.podium:empty{display:none}
.podium.busy{opacity:.4;pointer-events:none}
.pc{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px 18px 16px;clip-path:var(--cut);border:1px solid var(--pk-ln2);
  background:linear-gradient(165deg,rgba(255,59,95,.08),rgba(10,4,8,.94) 42%);transition:border-color .3s,transform .35s cubic-bezier(.16,1,.3,1),background .3s;
  animation:cpRise .8s cubic-bezier(.16,1,.3,1) var(--d,0ms) both;min-width:0}
.pc:hover{border-color:var(--pk);transform:translateY(-3px);background:linear-gradient(165deg,rgba(255,59,95,.14),rgba(10,4,8,.94) 50%)}
.pc1{order:2;padding-top:22px;border-color:var(--pk-ln);background:linear-gradient(165deg,rgba(255,59,95,.18),rgba(10,4,8,.94) 48%);box-shadow:0 0 80px -28px rgba(255,59,95,.6)}
.pc2{order:1}.pc3{order:3}
.pc1::before{content:"";position:absolute;left:0;top:0;height:1px;width:40%;background:linear-gradient(90deg,transparent,#ff3b5f,#fff,#ff3b5f,transparent);animation:cpEdge 5s linear infinite}
.pc-b{position:absolute;width:12px;height:12px;border:0 solid var(--pk);pointer-events:none}
.pc-b.tl{left:6px;top:6px;border-width:1px 0 0 1px}.pc-b.br{right:6px;bottom:6px;border-width:0 1px 1px 0}
.pc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pc-rank{font:900 64px/.8 var(--cy);color:transparent;-webkit-text-stroke:1.2px rgba(255,59,95,.75)}
.pc1 .pc-rank{font-size:84px;color:var(--pk);-webkit-text-stroke:0;text-shadow:0 0 30px rgba(255,59,95,.55)}
.pc-tag{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font:700 11px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--pk);text-align:right}
.pc-tag em{font-style:normal;color:var(--ink-3);letter-spacing:.12em;font-weight:600}
.pc1 .pc-tag{color:#fff}.pc1 .pc-tag::before{content:"";align-self:flex-end;width:28px;height:2px;background:var(--pk);box-shadow:0 0 8px var(--pk);margin-bottom:3px}
.pc-id{display:flex;align-items:center;gap:14px;min-width:0}
.pc-idn{position:relative;flex:none;padding:6px;border:1px solid var(--pk-ln);background:radial-gradient(circle,rgba(255,59,95,.16),transparent 70%);overflow:hidden;line-height:0}
.pc-idn svg{display:block}
.pc-idn i{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 10px var(--pk);opacity:.8;animation:cpIdScan 3.2s ease-in-out infinite}
.pc2 .pc-idn i{animation-delay:.8s}.pc3 .pc-idn i{animation-delay:1.6s}
@keyframes cpIdScan{0%,100%{transform:translateY(0)}50%{transform:translateY(68px)}}
.pc-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-who small{font:600 10px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.pc-who small em{font-style:normal;color:#fff}
.pc-who b{font:500 17px var(--mono);letter-spacing:-.01em;color:#fff;white-space:nowrap}
.pc-pnl{display:flex;flex-direction:column;gap:2px;padding-top:10px;border-top:1px solid var(--pk-ln2)}
.pc-pnl small{font:600 10.5px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.pc-pnl b{font:800 40px/1 var(--cy);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc1 .pc-pnl b{font-size:50px}
.pc-pnl b.up{text-shadow:0 0 22px rgba(47,211,154,.28)}
.pc-kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-family:var(--mono);font-size:12px}
.pc-kv dt{color:var(--ink-3);text-transform:uppercase;font-size:10.5px;letter-spacing:.06em;align-self:center}
.pc-kv dd{text-align:right;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-ls{display:flex;align-items:center;gap:10px}
.pc-ls .ls{flex:1;width:auto}
.pc-ls small{font:600 11px var(--ui);letter-spacing:.06em;white-space:nowrap;color:var(--ink-3)}
.pc-go{font:700 11px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--pk);display:flex;align-items:center;gap:8px}
.pc-go i{font-style:normal;transition:transform .25s}.pc:hover .pc-go i{transform:translateX(4px)}

/* ---------- Portfolio: input target ---------- */
body.cp .lookup{width:100%;max-width:700px;margin:6px 0 0;gap:8px}
.lk-in{flex:1;min-width:0;display:flex;align-items:center;height:50px;border:1px solid var(--pk-ln);background:rgba(7,3,6,.92);clip-path:var(--cut-s);transition:border-color .2s,box-shadow .2s}
.lk-in:focus-within{border-color:var(--pk);box-shadow:inset 0 0 0 1px rgba(255,59,95,.4)}
.lk-in span{flex:none;height:100%;display:grid;place-items:center;padding:0 14px;font:700 10.5px var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--pk);border-right:1px solid var(--pk-ln2);background:rgba(255,59,95,.06)}
body.cp .lookup .lk-in input{flex:1;min-width:0;height:100%;border:0;border-radius:0;background:none;padding:0 14px;font:14px var(--mono);outline:none}
body.cp .lookup .btn{height:50px;padding:0 22px}

/* ---------- Portfolio: panel pemindai ---------- */
body.cp .scanner{position:relative;flex-direction:row;justify-content:center;align-items:center;gap:48px;min-height:330px;padding:44px 28px;text-align:left;overflow:hidden;
  background:radial-gradient(60% 80% at 30% 50%,rgba(255,59,95,.1),transparent 70%),
  linear-gradient(rgba(255,59,95,.05) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(255,59,95,.05) 1px,transparent 1px) 0 0/32px 32px,var(--cp-panel)}
.sc-txt{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:380px;position:relative;z-index:1}
.sc-txt>b{font:800 clamp(30px,3vw,42px)/.95 var(--cy);text-transform:uppercase;color:#fff;letter-spacing:.01em}
.sc-txt>span{color:var(--ink-2);font-size:13.5px}
.sc-txt .btn{margin-top:6px}
.reticle{position:relative;width:200px;height:200px;flex:none}
.reticle i{position:absolute;display:block}
.reticle .r1{inset:0;border-radius:50%;border:1px solid var(--pk-ln)}
.reticle .r2{inset:16px;border-radius:50%;border:1px dashed rgba(255,59,95,.5);animation:cpSpin 24s linear infinite}
.reticle .r3{inset:62px;border-radius:50%;border:1px solid rgba(255,59,95,.6);box-shadow:0 0 22px rgba(255,59,95,.25),inset 0 0 18px rgba(255,59,95,.18)}
.reticle .r3::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;background:var(--pk);box-shadow:0 0 10px var(--pk);animation:cpBlink 1.4s steps(2) infinite}
.reticle .cx{left:-14px;right:-14px;top:50%;height:1px;background:linear-gradient(90deg,var(--pk) 0 14px,rgba(255,59,95,.25) 14px calc(50% - 40px),transparent calc(50% - 40px) calc(50% + 40px),rgba(255,59,95,.25) calc(50% + 40px) calc(100% - 14px),var(--pk) calc(100% - 14px))}
.reticle .cy{top:-14px;bottom:-14px;left:50%;width:1px;background:linear-gradient(180deg,var(--pk) 0 14px,rgba(255,59,95,.25) 14px calc(50% - 40px),transparent calc(50% - 40px) calc(50% + 40px),rgba(255,59,95,.25) calc(50% + 40px) calc(100% - 14px),var(--pk) calc(100% - 14px))}
.reticle .sweep{inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,59,95,.45),rgba(255,59,95,.0) 70deg,transparent 360deg);animation:cpSpin 4s linear infinite;-webkit-mask-image:radial-gradient(circle,#000 69%,transparent 70%);mask-image:radial-gradient(circle,#000 69%,transparent 70%)}
@keyframes cpSpin{to{transform:rotate(360deg)}}
.sc-line{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,59,95,.8) 20%,#fff 50%,rgba(255,59,95,.8) 80%,transparent);box-shadow:0 0 14px var(--pk);opacity:.65;animation:cpLine 5s cubic-bezier(.6,.1,.3,1) infinite;pointer-events:none}
@keyframes cpLine{0%{transform:translateY(0)}60%,100%{transform:translateY(420px)}}
.scanner.busy .sweep{animation-duration:1.1s}
.scanner.busy .sc-line{animation-duration:1.6s}
.scanner.busy .sc-txt>b::after{content:"";display:inline-block;width:.45em;height:.1em;margin-left:.15em;background:var(--pk);animation:cpBlink .8s steps(2) infinite}
.scanner.miss .r1,.scanner.miss .r3{border-color:rgba(242,180,83,.55)}
.scanner.miss .sweep{background:conic-gradient(from 0deg,rgba(242,180,83,.35),transparent 70deg,transparent)}
.scanner.miss .cp-ph{color:var(--amber)}

/* ---------- Portfolio: kepala file subjek ---------- */
.subj{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(220px,300px);gap:22px;align-items:center;padding:18px 22px;margin-bottom:14px;
  clip-path:var(--cut);border:1px solid var(--pk-ln);background:linear-gradient(120deg,rgba(255,59,95,.1),rgba(10,4,8,.94) 45%)}
.subj.anim{animation:cpRise .7s cubic-bezier(.16,1,.3,1) both}
.sj-idn{position:relative;padding:8px;border:1px solid var(--pk-ln);background:radial-gradient(circle,rgba(255,59,95,.18),transparent 70%);overflow:hidden;line-height:0}
.sj-idn svg{display:block}
.sj-scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 12px var(--pk);animation:cpIdScanL 3s ease-in-out infinite}
@keyframes cpIdScanL{0%,100%{transform:translateY(0)}50%{transform:translateY(98px)}}
.sj-main{display:flex;flex-direction:column;gap:6px;min-width:0}
body.cp .sj-id{font:500 clamp(24px,2.6vw,34px)/1 var(--mono);letter-spacing:-.02em;color:#fff}
.sj-full{font-size:11.5px;color:var(--ink-3);word-break:break-all}
.sj-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sj-tags span{font:700 10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:4px 9px;border:1px solid var(--pk-ln2);clip-path:var(--cut-s);background:rgba(255,59,95,.05)}
.sj-threat{--tc:var(--ink-3);display:flex;flex-direction:column;gap:6px;padding-left:20px;border-left:1px solid var(--pk-ln2);min-width:0}
.sj-threat.crit{--tc:var(--down)}.sj-threat.warn{--tc:var(--amber)}.sj-threat.ok{--tc:var(--up)}
.sj-threat small{font:600 10.5px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.sj-threat small:last-child{letter-spacing:.04em;text-transform:none;font:400 11.5px var(--font)}
.sj-threat b{font:800 34px/1 var(--cy);text-transform:uppercase;color:var(--tc);text-shadow:0 0 20px color-mix(in srgb,var(--tc) 35%,transparent)}
.sj-threat .segs{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;height:9px}
.sj-threat .segs i{background:rgba(255,255,255,.07)}
.sj-threat .segs i.on{background:var(--tc);box-shadow:0 0 6px color-mix(in srgb,var(--tc) 60%,transparent)}
.sj-threat.crit b{animation:cpBlink 1.6s steps(2) infinite}

body.cp .cp-margin{padding:11px 18px;margin-bottom:10px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px}
body.cp .cp-margin>span:first-child{font:700 11px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--pk)}

/* ---------- kaki ---------- */
body.cp .pg-foot{border-top-color:var(--pk-ln2);font:600 10.5px var(--ui);letter-spacing:.12em;text-transform:uppercase}
body.cp .pg-foot a{color:var(--pk)}

/* ---------- responsif ---------- */
@media (max-width:1100px){
  .lf-stats{grid-template-columns:1fr 1fr}
  .lf-stats>div:nth-child(3){padding-left:0;border-left:0}
  .lf-stats>div:nth-child(n+3){border-top:1px solid var(--pk-ln2)}
  .subj{grid-template-columns:auto minmax(0,1fr)}
  .sj-threat{grid-column:1/-1;padding:12px 0 0;border-left:0;border-top:1px solid var(--pk-ln2)}
  .pc-pnl b{font-size:34px}.pc1 .pc-pnl b{font-size:40px}
  .pc-rank{font-size:52px}.pc1 .pc-rank{font-size:64px}
}
@media (max-width:900px){
  .cp-head{grid-template-columns:1fr;gap:18px}
  .cp-scene{min-height:0;aspect-ratio:16/7;order:-1}
  .cp-head h1{font-size:clamp(44px,13vw,64px)}
  .podium{grid-template-columns:1fr;gap:10px}
  .pc1,.pc2,.pc3{order:0}
  .pc1{padding-top:18px}
  .llp-file{grid-template-columns:1fr}
  .lf-art{min-height:0;aspect-ratio:16/7;border-right:0;border-bottom:1px solid var(--pk-ln)}
  .lf-body{padding:16px}
  body.cp .scanner{flex-direction:column;gap:26px;padding:34px 18px;text-align:center}
  .sc-txt{align-items:center}
  .reticle{width:160px;height:160px}.reticle .r3{inset:50px}
  body.cp .box-h .search{width:100%}
  .cp-boxr{width:100%}
  body.cp .strip b{font-size:26px}
}
@media (max-width:520px){
  .subj{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px}
  .sj-idn{align-self:start;padding:6px}.sj-idn svg{width:56px;height:56px}
  body.cp .lookup{flex-direction:column}
  .lk-in{flex:none;width:100%}
  body.cp .lookup .btn{justify-content:center}
  .cp-kick{font-size:10.5px;letter-spacing:.14em}
  .pc-kv{font-size:11.5px}
  .lf-stats b{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.cp-scene img,.lf-art img,.cp-scan::after,.reticle *,.sc-line,.pc-idn i,.sj-scan{animation:none!important}}