/* TKJ3 NetCode Pages: hitam dan biru #049FD9, tema jaringan + coding */

html.np-root{background:#000;scroll-behavior:smooth;scroll-padding-top:72px}
body.tkj3np{margin:0;background:#000;color:#e7f5fb;overflow-x:hidden}

.np,.np *,.np *::before,.np *::after{box-sizing:border-box}
.np{
	--blue:#049FD9;--ice:#c9ecf8;--mute:#86a1ad;--line:rgba(4,159,217,.3);--wash:rgba(4,159,217,.07);--up:#35e08c;
	--mono:"Martian Mono",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
	--sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	position:relative;min-height:100vh;background:#000;color:#e7f5fb;
	font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.np h1,.np h2,.np h3,.np p,.np ul,.np ol,.np figure,.np pre{margin:0;padding:0}
.np ul,.np ol{list-style:none}
.np a{color:inherit;text-decoration:none}
.np button,.np input{font:inherit;color:inherit}
.np :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.np-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- transisi antar halaman (paket pindah node) ---------- */
.np-wipe{position:fixed;inset:0;z-index:99998;background:#000;border-left:2px solid #049FD9;pointer-events:none;transform:translateX(100%)}
.np-js .np-wipe{animation:np-in .6s cubic-bezier(.7,0,.2,1) .1s both}
.np-wipe.is-leaving{animation:np-out .38s cubic-bezier(.7,0,.2,1) both}
@keyframes np-in{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes np-out{from{transform:translateX(100%)}to{transform:translateX(0)}}

/* ---------- latar grid dengan senter mengikuti kursor ---------- */
.np-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
	background-image:linear-gradient(rgba(4,159,217,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(4,159,217,.07) 1px,transparent 1px);
	background-size:48px 48px}
.np-grid::after{content:"";position:absolute;inset:0;
	background-image:linear-gradient(rgba(4,159,217,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(4,159,217,.6) 1px,transparent 1px);
	background-size:48px 48px;
	-webkit-mask-image:radial-gradient(240px circle at var(--mx,70%) var(--my,28%),#000,transparent 72%);
	mask-image:radial-gradient(240px circle at var(--mx,70%) var(--my,28%),#000,transparent 72%)}

/* ---------- bar atas ---------- */
.np-bar{position:fixed;top:0;left:0;right:0;z-index:50;height:56px;display:flex;align-items:center;gap:1.25rem;
	padding:0 clamp(1rem,4vw,2.5rem);background:rgba(0,0,0,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body.admin-bar .np-bar{top:32px}
@media(max-width:782px){body.admin-bar .np-bar{top:46px}}
.np-brand{flex:none;font:700 .9rem/1 var(--mono);letter-spacing:.01em;color:#fff}
.np-brand b{color:var(--blue);font-weight:800}
.np-nav{margin-left:auto;display:flex;gap:1.3rem;overflow-x:auto;scrollbar-width:none;font:500 .8rem/1 var(--mono)}
.np-nav::-webkit-scrollbar{display:none}
.np-nav a{position:relative;flex:none;padding:.55rem 0;color:var(--mute);transition:color .2s}
.np-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.np-nav a:hover{color:#fff}
.np-nav a:hover::after{transform:scaleX(1)}

/* ---------- komponen dasar ---------- */
.np-led{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up);
	animation:np-blink 2.6s steps(1) infinite;animation-delay:calc(var(--i,0) * -.43s)}
@keyframes np-blink{0%,84%{opacity:1}88%{opacity:.25}92%{opacity:1}95%{opacity:.35}}
.np-caret{display:inline-block;width:.55em;height:1.05em;background:var(--blue);animation:np-caret 1s steps(1) infinite}
@keyframes np-caret{50%{opacity:0}}

.np-btn{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.3rem;border:1px solid var(--blue);border-radius:6px;
	background:var(--blue);color:#000;font:700 .8125rem/1 var(--mono);cursor:pointer;transition:box-shadow .2s,background .2s,transform .12s}
.np-btn:hover{box-shadow:0 0 0 4px rgba(4,159,217,.25)}
.np-btn:active{transform:translateY(1px)}
.np-btn--ghost{background:transparent;color:var(--blue)}
.np-btn--ghost:hover{background:var(--wash)}
.np-btn[disabled]{opacity:.55;cursor:progress;box-shadow:none}
.np-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

.np-chip{display:inline-block;padding:.4rem .75rem;border:1px solid var(--line);border-radius:999px;background:transparent;
	font:500 .78rem/1.2 var(--mono);color:var(--ice);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
a.np-chip:hover,button.np-chip:hover{background:var(--blue);border-color:var(--blue);color:#000}
span.np-chip{cursor:default}
.np-none{color:#6f8a96;font:400 .8rem/1.4 var(--mono)}

.np-win{border:1px solid var(--line);border-radius:10px;overflow:hidden;
	background:linear-gradient(180deg,rgba(4,159,217,.1),rgba(4,159,217,.03)),#000;
	box-shadow:0 30px 80px -40px rgba(4,159,217,.45)}
.np-win__bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .85rem;border-bottom:1px solid var(--line);font:500 .72rem/1 var(--mono);color:var(--mute)}
.np-win__bar>i{width:9px;height:9px;border-radius:50%;background:rgba(4,159,217,.4)}
.np-win__bar>span{margin-left:.5rem}

/* ---------- reveal: tiap bagian punya gaya sendiri ---------- */
.np-js .np-rv{clip-path:inset(0 0 100% 0);transform:translateY(.5rem);
	transition:clip-path .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.np-js .np-rv.is-in{clip-path:inset(-.15em -.15em -.3em -.15em);transform:none}

/* ---------- sections ---------- */
.np-sec{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:clamp(4.5rem,9vw,8rem) clamp(1rem,5vw,4rem) 0}
.np-h2{font:700 clamp(1.7rem,3.6vw,2.8rem)/1.12 var(--mono);font-stretch:100%;letter-spacing:-.02em;color:#fff;max-width:22ch}
.np-lead{max-width:58ch;margin-top:1rem;color:var(--mute)}

/* ---------- hero beranda ---------- */
.np-hero{position:relative;z-index:1;max-width:1440px;margin:0 auto;min-height:100vh;min-height:100svh;
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1rem,3vw,3rem);align-items:center;
	padding:96px clamp(1rem,5vw,4rem) 3rem}
.np-title{font:800 clamp(3.6rem,10.5vw,8.5rem)/.9 var(--mono);font-stretch:112%;letter-spacing:-.045em;color:#fff;overflow-wrap:anywhere}
.np-js .np-title{animation:np-glitch .9s steps(1) .5s both}
@keyframes np-glitch{
	0%{opacity:0}
	10%{opacity:1;text-shadow:-4px 0 #049FD9,4px 0 #c9ecf8;transform:translateX(-3px) skewX(-6deg)}
	20%{text-shadow:4px 0 #049FD9,-4px 0 #c9ecf8;transform:translateX(3px)}
	32%{text-shadow:none;transform:none}
	46%{text-shadow:-2px 0 #049FD9;transform:translateX(-2px)}
	58%,100%{text-shadow:none;transform:none;opacity:1}}
.np-sub{margin-top:1.1rem;font:700 clamp(1.05rem,2.2vw,1.55rem)/1.3 var(--mono);color:var(--blue)}
.np-tag{max-width:46ch;margin-top:.5rem;color:var(--mute)}

.np-boot{max-width:34rem;margin-top:1.75rem}
.np-boot__body{min-height:15.5rem;max-height:15.5rem;overflow:hidden;padding:.9rem 1rem;color:var(--ice);font:400 .75rem/1.75 var(--mono);font-stretch:88%}
.np-l{display:flex;align-items:center;gap:.6rem;white-space:nowrap;overflow:hidden}
.np-l>span{overflow:hidden;text-overflow:ellipsis}
.np-l b{color:var(--blue);font-weight:800}
.np-who{color:#fff;font-weight:700}
.np-dim{color:var(--mute)}
.np-js .np-boot .np-l{opacity:0}
.np-js .np-boot .np-l.is-shown{opacity:1;animation:np-type .42s steps(34) both}
@keyframes np-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

.np-topo{position:relative;width:100%;aspect-ratio:1/1;max-height:78vh}
.np-topo canvas{display:block;width:100%;height:100%}

/* ---------- daftar anggota (show ip interface brief) ---------- */
.np-if{margin-top:2.5rem;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:rgba(0,0,0,.7)}
.np-if__head,.np-row{display:grid;grid-template-columns:5rem minmax(0,1.45fr) minmax(0,1.6fr) 9.5rem 5.5rem;column-gap:1rem;align-items:center;padding:.95rem 1.25rem}
.np-if__head{background:var(--wash);border-bottom:1px solid var(--line);font:500 .74rem/1 var(--mono);color:var(--mute)}
.np-if li+li{border-top:1px solid rgba(4,159,217,.16)}
.np-row{position:relative;font:500 .8rem/1.4 var(--mono);transition:background .25s}
.np-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);transform:scaleY(0);transition:transform .25s}
.np-row:hover,.np-row:focus-visible{background:var(--wash)}
.np-row:hover::before,.np-row:focus-visible::before{transform:scaleY(1)}
.np-row__port{color:var(--blue);font-weight:700}
.np-row__who{display:flex;align-items:center;gap:.8rem;min-width:0}
.np-row__who strong{display:block;color:#fff;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.np-row__who small{display:block;color:var(--mute);font-weight:400;font-size:.72rem}
.np-row__topic{color:var(--ice)}
.np-row__ip{color:var(--mute)}
.np-row__st{display:flex;align-items:center;gap:.5rem;color:var(--up)}
.np-row__more{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.np-row__more>span{min-height:0;overflow:hidden;max-width:68ch;padding-top:0;font:400 .95rem/1.6 var(--sans);color:var(--mute);transition:padding .35s}
.np-row:hover .np-row__more,.np-row:focus-visible .np-row__more{grid-template-rows:1fr}
.np-row:hover .np-row__more>span,.np-row:focus-visible .np-row__more>span{padding-top:.8rem}
.np-av{display:block;flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.np-av img,.np-av svg{display:block;width:100%;height:100%;object-fit:cover}
.np-js .np-if li{opacity:0}
.np-js .np-if li.is-in{animation:np-link .6s calc(var(--i) * 110ms) both}
@keyframes np-link{0%{opacity:0;clip-path:inset(0 100% 0 0)}40%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0)}}

/* ---------- lapisan OSI ---------- */
.np-osi__ctl{margin-top:1.5rem}
.np-stack{display:grid;gap:.5rem;margin-top:1.25rem}
.np-layer{display:grid;grid-template-columns:11rem minmax(0,1fr) minmax(0,1.3fr);gap:1rem;align-items:center;padding:.85rem 1rem;
	border:1px solid rgba(4,159,217,.18);border-radius:8px;background:rgba(0,0,0,.6);transition:border-color .3s,background .3s,box-shadow .3s}
.np-layer.is-hit{border-color:var(--line);background:var(--wash)}
.np-layer.is-now{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 0 36px -10px var(--blue)}
.np-layer__id{display:flex;align-items:baseline;gap:.6rem;font:700 .8rem/1 var(--mono)}
.np-layer__id b{color:var(--blue);font-size:1.15rem;font-weight:800}
.np-layer__id span{color:var(--mute);font-weight:500}
.np-layer__who .np-chip{margin:.15rem .35rem .15rem 0}
.np-pkt{display:flex;gap:2px;overflow:hidden;opacity:.12;transition:opacity .35s}
.np-layer.is-hit .np-pkt{opacity:1}
.np-pkt i{flex:none;padding:.42rem .55rem;border:1px solid var(--line);background:rgba(4,159,217,.2);color:var(--ice);font:700 .68rem/1 var(--mono);font-style:normal;white-space:nowrap}
.np-pkt i.d{background:#000;color:var(--mute)}
.np-pkt i.bits{background:#000;color:var(--up);letter-spacing:.06em}
.np-layer.is-now .np-pkt i:first-child{animation:np-pop .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes np-pop{from{opacity:0;transform:translateX(-14px);background:var(--blue);color:#000}to{opacity:1;transform:none}}

/* ---------- terminal ---------- */
.np-term{max-width:860px;margin-top:2.5rem}
.np-term__out{height:20rem;overflow:auto;padding:1rem 1.1rem;color:var(--ice);font:400 .8rem/1.65 var(--mono);font-stretch:90%}
.np-t{white-space:pre-wrap;word-break:break-word}
.np-t--cmd{color:#fff}
.np-t--ok{color:var(--up)}
.np-t--err{color:#ffb86b}
.np-term__in{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-top:1px solid var(--line);color:var(--blue);font:700 .8rem/1 var(--mono);cursor:text}
.np-term__in input{flex:1;min-width:0;padding:0;border:0;outline:0;background:transparent;color:#fff;font:400 .8rem/1.4 var(--mono);caret-color:var(--blue)}
.np-term__in:focus-within{box-shadow:inset 0 0 0 1px var(--blue)}
.np-sugg{display:flex;flex-wrap:wrap;gap:.5rem;max-width:860px;margin-top:1rem}

/* ---------- footer ---------- */
.np-foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;max-width:1240px;margin:clamp(4rem,8vw,7rem) auto 0;
	padding:1.5rem clamp(1rem,5vw,4rem) 3rem;border-top:1px solid var(--line);color:var(--mute);font:400 .78rem/1.5 var(--mono)}
.np-foot a:hover{color:#fff}

/* ---------- halaman anggota ---------- */
.np-mhero{position:relative;z-index:1;max-width:1240px;margin:0 auto;min-height:min(92vh,820px);
	display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(1.5rem,5vw,4rem);align-items:center;
	padding:110px clamp(1rem,5vw,4rem) 0}
.np-name{font:800 clamp(2.4rem,7vw,5.6rem)/1 var(--mono);font-stretch:108%;letter-spacing:-.04em;color:#fff;overflow-wrap:anywhere}
.np-topic{margin-top:1.1rem;font:700 clamp(1.1rem,2.4vw,1.75rem)/1.3 var(--mono);color:var(--blue)}
.np-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}

.np-frame{position:relative;width:min(100%,360px);aspect-ratio:1;margin-inline:auto}
.np-frame__ring{position:absolute;left:-7%;top:-7%;width:114%;height:114%;animation:np-spin 28s linear infinite}
@keyframes np-spin{to{transform:rotate(360deg)}}
.np-frame__hex,.np-frame__in{position:absolute;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.np-frame__hex{inset:0;background:var(--blue)}
.np-frame__in{inset:3px;background:#000;overflow:hidden}
.np-frame__in img,.np-frame__in svg{display:block;width:100%;height:100%;object-fit:cover}
.np-frame__in::after,.np-slot::after{content:"";position:absolute;left:0;right:0;top:0;height:30%;pointer-events:none;
	background:linear-gradient(180deg,transparent,rgba(4,159,217,.3),transparent);animation:np-scan 4.2s linear infinite}
@keyframes np-scan{from{transform:translateY(-110%)}to{transform:translateY(380%)}}

.np-two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;margin-top:2.5rem}
.np-sum{max-width:52ch;font-size:1.25rem;line-height:1.6}
.np-pts li{position:relative;padding:.85rem 0 .85rem 1.75rem;border-bottom:1px solid rgba(4,159,217,.16)}
.np-pts li:first-child{border-top:1px solid rgba(4,159,217,.16)}
.np-pts li::before{content:"";position:absolute;left:0;top:1.4rem;width:8px;height:8px;border-radius:2px;background:var(--blue);box-shadow:0 0 10px var(--blue)}

.np-code{margin-top:2.5rem}
.np-tabs{display:flex;gap:.25rem;margin-left:auto}
.np-tab{padding:.45rem .7rem;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--mute);font:500 .72rem/1 var(--mono);cursor:pointer;transition:background .2s,color .2s}
.np-tab:hover{color:#fff}
.np-tab[aria-selected="true"]{background:var(--blue);color:#000}
.np-copy{border-color:var(--line)}
.np-pre{margin:0;padding:1rem 0;overflow:auto;counter-reset:ln;tab-size:4;font:400 .8rem/1.8 var(--mono);font-stretch:86%;color:#e7f5fb}
.np-pre code{font:inherit;font-stretch:inherit}
.np-ln{display:block;padding-right:1.25rem;white-space:pre;counter-increment:ln}
.np-ln::before{content:counter(ln);display:inline-block;width:2.6rem;margin-right:1rem;text-align:right;color:#5f7b88;user-select:none}
.np-js .np-code:not(.is-in) .np-ln{opacity:0}
.np-code.is-in .np-ln{animation:np-ln .45s var(--d,0ms) both}
@keyframes np-ln{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.t-k{color:var(--blue);font-weight:700}
.t-s{color:var(--ice)}
.t-n,.t-ip{color:var(--up)}
.t-c{color:#6f8a96;font-style:italic}

.np-diag{margin-top:2.5rem;padding:1rem;border:1px solid var(--line);border-radius:10px;background:rgba(4,159,217,.04);color:var(--blue)}
.np-diag svg,.np-diag img{display:block;width:100%;height:auto;border-radius:6px}
.np-flow{stroke-dasharray:6 8;animation:np-flow 1s linear infinite}
@keyframes np-flow{to{stroke-dashoffset:-14}}
.np-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
.np-shot,.np-slot{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:8px}
.np-shot img{display:block;width:100%;height:100%;object-fit:cover}
.np-slot{display:grid;place-items:center;padding:1rem;border:1px dashed var(--line);text-align:center;color:var(--mute);font:500 .78rem/1.4 var(--mono)}

.np-hops{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}
.np-hopcard{display:block;padding:1.25rem 1.4rem;border:1px solid var(--line);border-radius:10px;transition:background .25s,border-color .25s}
.np-hopcard:hover{background:var(--wash);border-color:var(--blue)}
.np-hopcard small{display:block;color:var(--mute);font:500 .74rem/1 var(--mono)}
.np-hopcard strong{display:block;margin-top:.7rem;color:#fff;font:700 1.1rem/1.3 var(--mono)}
.np-hopcard span{display:block;margin-top:.3rem;color:var(--blue);font:500 .8rem/1.4 var(--mono)}
.np-hopcard--next{text-align:right}

/* ---------- responsif ---------- */
@media(max-width:960px){
	.np-hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:88px}
	.np-topo{max-width:560px;margin-inline:auto}
	.np-mhero{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:96px}
	.np-frame{width:min(70%,300px);margin-inline:0}
	.np-two{grid-template-columns:minmax(0,1fr)}
	.np-layer{grid-template-columns:minmax(0,1fr);gap:.6rem}
}
@media(max-width:820px){
	.np-if__head{display:none}
	.np-row{grid-template-columns:minmax(0,1fr) auto;row-gap:.45rem}
	.np-row__port,.np-row__ip{display:none}
	.np-row__who{grid-column:1}
	.np-row__st{grid-column:2;grid-row:1}
	.np-row__topic{grid-column:1/-1}
	.np-row__more>span{padding-top:0!important}
}
@media(max-width:640px){
	.np-gal,.np-hops{grid-template-columns:minmax(0,1fr)}
	.np-hopcard--next{text-align:left}
	.np-nav{gap:1rem}
	.np-brand{font-size:.8rem}
}

/* ---------- gerak dikurangi ---------- */
@media(prefers-reduced-motion:reduce){
	html.np-root{scroll-behavior:auto}
	.np *,.np *::before,.np *::after,.np-wipe{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
	.np-js .np-rv,.np-js .np-boot .np-l,.np-js .np-if li,.np-js .np-code:not(.is-in) .np-ln{opacity:1;clip-path:none;transform:none}
	.np-grid::after{display:none}
}