:root{
  --bg:#070b16;--bg2:#0c1324;--card:rgba(18,27,48,.72);--line:rgba(120,160,255,.14);
  --txt:#e8eefc;--muted:#8ea3c9;--accent:#38bdf8;--accent2:#a855f7;--accent3:#22d3ee;
  --err:#fb7185;--ok:#34d399;--rad:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--txt);line-height:1.65;min-height:100vh;overflow-x:hidden;position:relative}

/* animated backdrop */
.bg-grid{position:fixed;inset:0;z-index:-2;background-image:linear-gradient(rgba(56,189,248,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);animation:gridpan 22s linear infinite}
@keyframes gridpan{from{background-position:0 0,0 0}to{background-position:44px 44px,44px 44px}}
.bg-glow{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(600px 400px at 15% -5%,rgba(56,189,248,.18),transparent 60%),
  radial-gradient(500px 400px at 90% 10%,rgba(168,85,247,.16),transparent 60%),
  radial-gradient(700px 500px at 50% 110%,rgba(34,211,238,.10),transparent 60%);
  animation:glowpulse 10s ease-in-out infinite alternate}
@keyframes glowpulse{from{opacity:.7}to{opacity:1}}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;backdrop-filter:blur(14px);background:rgba(7,11,22,.6);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt)}
.logo{filter:drop-shadow(0 0 8px rgba(56,189,248,.6))}
.brand-txt{font-weight:800;font-size:1.25rem;letter-spacing:-.5px;position:relative}
.brand-txt b{color:var(--accent);font-weight:800}
.links{display:flex;gap:6px;align-items:center}
.links a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:600;padding:8px 14px;border-radius:10px;transition:.2s;position:relative}
.links a:hover{color:var(--txt);background:rgba(56,189,248,.08)}
.links a.active{color:var(--accent)}
.links a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px}
.navtog{display:none;background:none;border:1px solid var(--line);color:var(--txt);font-size:1.2rem;padding:6px 12px;border-radius:10px;cursor:pointer}

/* glitch text */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;opacity:.85;pointer-events:none}
.glitch::before{color:var(--accent3);clip-path:inset(0 0 55% 0);animation:gl1 3.2s infinite linear alternate-reverse}
.glitch::after{color:var(--accent2);clip-path:inset(55% 0 0 0);animation:gl2 2.6s infinite linear alternate-reverse}
@keyframes gl1{0%,92%{transform:translate(0)}93%{transform:translate(-2px,-1px)}96%{transform:translate(2px,1px)}100%{transform:translate(-1px,0)}}
@keyframes gl2{0%,90%{transform:translate(0)}91%{transform:translate(2px,1px)}95%{transform:translate(-2px,-1px)}100%{transform:translate(1px,0)}}

/* layout */
.wrap{max-width:760px;margin:0 auto;padding:32px 18px 80px}
.page{max-width:820px;margin:0 auto;padding:40px 18px 80px}

/* hero */
.hero{text-align:center;padding:48px 0 30px}
.hero .eyebrow{display:inline-block;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--accent);border:1px solid var(--line);padding:5px 14px;border-radius:99px;background:rgba(56,189,248,.06);margin-bottom:18px}
.hero h1{font-size:clamp(2rem,6vw,3.2rem);font-weight:900;letter-spacing:-1.5px;line-height:1.05}
.hero h1 .hl{background:linear-gradient(120deg,var(--accent),var(--accent3),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative}
.hero p{color:var(--muted);margin-top:16px;font-size:1.05rem;max-width:540px;margin-left:auto;margin-right:auto}

/* glass card */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:24px;backdrop-filter:blur(16px);box-shadow:0 20px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;border-radius:var(--rad);padding:1px;background:linear-gradient(120deg,rgba(56,189,248,.5),transparent 40%,transparent 60%,rgba(168,85,247,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;pointer-events:none}

/* input */
.inrow{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
input[type=text]{flex:1;min-width:0;background:rgba(7,11,22,.7);border:1px solid var(--line);color:var(--txt);padding:16px 18px;border-radius:12px;font-size:1.15rem;letter-spacing:2px;font-variant-numeric:tabular-nums;transition:.2s}
input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,.18),0 0 20px rgba(56,189,248,.15)}
button.go{background:linear-gradient(120deg,var(--accent),var(--accent2));color:#04121f;border:0;padding:16px 28px;border-radius:12px;font-weight:800;font-size:1rem;cursor:pointer;transition:.2s;box-shadow:0 8px 24px rgba(56,189,248,.3)}
button.go:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(56,189,248,.45)}
button.go:disabled{opacity:.55;cursor:wait;transform:none}
.hint{color:var(--muted);font-size:.82rem;margin-top:12px;position:relative;z-index:1}

/* result */
#result{margin-top:22px}
.err{background:rgba(251,113,133,.12);border:1px solid var(--err);color:#fecdd3;padding:14px 16px;border-radius:12px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.item{background:rgba(7,11,22,.6);border:1px solid var(--line);border-radius:12px;padding:15px 16px;animation:pop .4s ease both}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.item .k{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.6px}
.item .v{font-size:1.08rem;font-weight:700;margin-top:3px;word-break:break-word}
.warn{color:var(--err);font-size:.85rem;margin-top:10px}

.note{background:rgba(56,189,248,.07);border:1px solid rgba(56,189,248,.28);border-radius:12px;padding:15px 18px;margin-top:22px;font-size:.88rem;color:#bae6fd}

/* KTP-style result card */
.ktp{margin-top:22px;border-radius:16px;padding:2px;background:linear-gradient(135deg,#0ea5e9,#a855f7,#22d3ee);box-shadow:0 20px 50px rgba(0,0,0,.5);animation:pop .5s ease both}
.ktp>*{position:relative}
.ktp-head{background:rgba(7,11,22,.86);border-radius:15px 15px 0 0;padding:12px 18px;text-align:center;font-weight:800;letter-spacing:.4px;font-size:.82rem;line-height:1.35;color:#e8eefc;text-transform:uppercase;backdrop-filter:blur(4px)}
.ktp-head span{display:block}
.ktp-head span:last-child{font-size:.72rem;color:var(--accent3);font-weight:700}
.ktp-body{display:flex;gap:16px;padding:18px;background:rgba(9,14,28,.92)}
.ktp-photo{flex:0 0 90px;height:112px;border-radius:8px;border:1px dashed rgba(120,160,255,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);background:rgba(7,11,22,.6);font-size:.7rem;letter-spacing:1px}
.ktp-photo span{font-weight:800;font-size:.8rem}
.ktp-photo small{font-size:.58rem;opacity:.7;margin-top:4px;text-align:center;line-height:1.2}
.ktp-fields{flex:1;min-width:0}
.ktp-nik{margin-bottom:8px}
.ktp-nik label{display:block;font-size:.62rem;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.ktp-nik b{font-family:ui-monospace,monospace;font-size:1.15rem;letter-spacing:2px;color:var(--accent3);word-break:break-all}
.krow{display:grid;grid-template-columns:110px 1fr;gap:6px;padding:3px 0;font-size:.82rem;border-bottom:1px dotted rgba(120,160,255,.12)}
.krow label{color:var(--muted);text-transform:uppercase;font-size:.64rem;letter-spacing:.5px;padding-top:2px}
.krow span{color:#e8eefc;font-weight:600;word-break:break-word}
.krow i{color:var(--accent2);font-style:italic;font-size:.8rem}
.ktp-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;background:rgba(7,11,22,.86);border-radius:0 0 15px 15px;padding:9px 18px;font-size:.62rem;color:var(--muted)}
.ktp-foot span:first-child{font-weight:800;color:var(--accent);letter-spacing:.5px}
@media(max-width:520px){.ktp-body{flex-direction:column;align-items:center;text-align:left}.ktp-fields{width:100%}.krow{grid-template-columns:96px 1fr}}

/* digit detail grid */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
@media(max-width:560px){.detail-grid{grid-template-columns:1fr}}
.detail-item{display:flex;gap:12px;align-items:flex-start;background:rgba(7,11,22,.55);border:1px solid var(--line);border-radius:12px;padding:14px}
.detail-item .dnum{flex:0 0 auto;min-width:44px;text-align:center;font-family:ui-monospace,monospace;font-weight:800;font-size:.82rem;color:#04121f;background:linear-gradient(120deg,var(--accent),var(--accent3));border-radius:8px;padding:6px 8px}
.detail-item b{font-size:.95rem}
.detail-item p{margin-top:3px;font-size:.85rem}

/* example breakdown */
.example-table{display:grid;gap:6px;margin:14px 0}
.example-table>div{display:flex;gap:14px;align-items:center;background:rgba(7,11,22,.55);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:.9rem;color:#c3d0ea}
.example-table>div span{font-family:ui-monospace,monospace;font-weight:800;color:var(--accent3);min-width:46px;text-align:center;background:rgba(56,189,248,.1);border-radius:6px;padding:3px 6px}

/* content sections */
.info{margin-top:44px}
.info h2{font-size:1.4rem;margin-bottom:14px;letter-spacing:-.5px}
.info h3{font-size:1.05rem;margin:22px 0 6px;color:var(--txt)}
.info p,.info li{color:var(--muted);font-size:.95rem}
.info ul{padding-left:22px;margin-top:8px}
.digitmap{font-family:ui-monospace,'Cascadia Code',monospace;background:rgba(7,11,22,.7);border:1px solid var(--line);border-radius:12px;padding:16px;overflow-x:auto;font-size:.82rem;margin-top:12px;color:var(--accent3);line-height:1.9;white-space:nowrap}
@media(max-width:560px){.digitmap{font-size:.68rem}}

/* page prose */
.prose h1{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:900;letter-spacing:-1px;margin-bottom:8px}
.prose h1 .hl{background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.prose .lead{color:var(--muted);font-size:1.05rem;margin-bottom:28px}
.prose h2{font-size:1.3rem;margin:28px 0 10px;letter-spacing:-.5px}
.prose p,.prose li{color:#c3d0ea;font-size:.97rem;margin-bottom:10px}
.prose ul{padding-left:22px}
.prose a{color:var(--accent)}
.prose strong{color:var(--txt)}
.contact-card{display:flex;align-items:center;gap:16px;background:rgba(7,11,22,.6);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:20px 0}
.contact-card .ic{font-size:1.8rem}
.contact-card a{font-size:1.15rem;font-weight:700;color:var(--accent);text-decoration:none}

/* footer */
.foot{border-top:1px solid var(--line);background:rgba(7,11,22,.5);backdrop-filter:blur(10px);margin-top:40px}

/* inter-tool nav (internal linking) */
.tools-nav{max-width:760px;margin:44px auto 0;padding:0 18px}
.tools-nav h2{font-size:1.25rem;margin-bottom:14px;letter-spacing:-.5px}
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.tools-grid{grid-template-columns:1fr}}
.tool-card{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:.2s;position:relative;overflow:hidden}
.tool-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 12px 30px rgba(56,189,248,.2)}
.tool-card .tic{font-size:1.5rem;display:block;margin-bottom:6px}
.tool-card b{color:var(--txt);font-size:1.02rem;display:block}
.tool-card small{color:var(--muted);font-size:.83rem;display:block;margin-top:3px}
.tools-back{margin-top:16px;color:var(--muted);font-size:.9rem}
.tools-back a{color:var(--accent)}

/* validator verdict */
.verdict{display:flex;flex-direction:column;gap:4px;border-radius:12px;padding:16px 18px;margin-top:6px;animation:pop .4s ease both}
.verdict b{font-size:1.1rem}
.verdict span{font-size:.9rem;opacity:.92}
.verdict.ok{background:rgba(52,211,153,.12);border:1px solid var(--ok);color:#a7f3d0}
.verdict.bad{background:rgba(251,113,133,.12);border:1px solid var(--err);color:#fecdd3}
.verdict.warn2{background:rgba(251,191,36,.12);border:1px solid #fbbf24;color:#fde68a}

/* wilayah search results */
.wil-list{display:flex;flex-direction:column;gap:8px}
.wil-row{display:flex;gap:14px;align-items:center;background:rgba(7,11,22,.6);border:1px solid var(--line);border-radius:10px;padding:11px 14px}
.wil-row .wcode{font-family:ui-monospace,monospace;font-weight:800;color:#04121f;background:linear-gradient(120deg,var(--accent),var(--accent3));border-radius:7px;padding:5px 9px;font-size:.82rem;min-width:64px;text-align:center}
.wil-row .wtxt b{display:block;font-size:.95rem;color:#e8eefc}
.wil-row .wtxt small{color:var(--muted);font-size:.8rem}

/* generator NIK */
.gen-field{margin-bottom:14px}
.gen-field>label{display:block;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-weight:700}
.gen-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:560px){.gen-row{grid-template-columns:1fr}}
.gen-field input,.gen-field select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(7,11,22,.7);color:var(--txt);font-size:1rem}
.gen-field input:focus,.gen-field select:focus{outline:none;border-color:var(--accent)}
.wil-row.pick{cursor:pointer;transition:.15s}
.wil-row.pick:hover{border-color:var(--accent);transform:translateX(3px)}
.picked{margin-top:10px;padding:10px 14px;background:rgba(52,211,153,.1);border:1px solid var(--ok);border-radius:10px;font-size:.9rem;color:#a7f3d0}
.picked a{color:var(--accent3);margin-left:6px}
.go.full{width:100%;margin-top:6px}
.go.alt{background:transparent;border:1px solid var(--accent);color:var(--accent);text-decoration:none;display:inline-flex;align-items:center}
.genact{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}

/* textarea (bulk) */
textarea{width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);background:rgba(7,11,22,.7);color:var(--txt);font-family:ui-monospace,monospace;font-size:.9rem;resize:vertical;line-height:1.6}
textarea:focus{outline:none;border-color:var(--accent)}

/* result table (bulk) */
.tbl-wrap{overflow-x:auto;margin-top:16px;border:1px solid var(--line);border-radius:12px}
.tbl{width:100%;border-collapse:collapse;font-size:.84rem;min-width:640px}
.tbl th{background:rgba(56,189,248,.08);color:var(--accent3);text-align:left;padding:10px 12px;font-weight:700;white-space:nowrap;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 12px;border-bottom:1px dotted rgba(120,160,255,.12);color:#dbe4f7}
.tbl tr:last-child td{border-bottom:none}
.tbl .mono{font-family:ui-monospace,monospace;color:var(--accent3)}
.tbl .row-bad{background:rgba(251,113,133,.06)}
.badge-ok{background:rgba(52,211,153,.15);color:#a7f3d0;padding:2px 8px;border-radius:6px;font-size:.75rem;font-weight:700}
.badge-bad{background:rgba(251,113,133,.15);color:#fecdd3;padding:2px 8px;border-radius:6px;font-size:.72rem}

/* kode-nik grid + blog */
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:18px 0}
.link-grid a{display:flex;justify-content:space-between;gap:8px;align-items:center;background:rgba(7,11,22,.55);border:1px solid var(--line);border-radius:10px;padding:11px 14px;text-decoration:none;color:#dbe4f7;transition:.15s}
.link-grid a:hover{border-color:var(--accent);transform:translateY(-2px)}
.link-grid a .lc{font-family:ui-monospace,monospace;color:var(--accent3);font-size:.8rem;font-weight:700}
.post-list{display:flex;flex-direction:column;gap:14px;margin:18px 0}
.post-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;text-decoration:none;transition:.2s}
.post-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 30px rgba(56,189,248,.15)}
.post-card h3{color:var(--txt);font-size:1.15rem;margin-bottom:6px}
.post-card .pmeta{color:var(--muted);font-size:.78rem;margin-bottom:8px}
.post-card p{color:var(--muted);font-size:.9rem;margin:0}
.article{max-width:760px}
.article-cover{margin:0 0 26px;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 50px rgba(2,6,15,.4)}
.article-cover img{display:block;width:100%;height:auto}
.article h2{margin-top:28px}
.article p{margin-bottom:12px}
.article ul,.article ol{margin:12px 0 12px 22px}
.article li{margin-bottom:6px;color:#c3d0ea}
.article .faq{margin:8px 0 4px}
.article .faq details{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:10px;background:rgba(7,11,22,.5)}
.article .faq summary{cursor:pointer;font-weight:700;color:var(--txt)}
.article .faq p{margin:10px 0 0;color:var(--muted)}
.article .keytakeaway{border-left:3px solid var(--accent);background:rgba(56,189,248,.06);padding:14px 18px;border-radius:0 12px 12px 0;margin:20px 0}
.article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.92rem}
.article th,.article td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.article th{background:rgba(56,189,248,.08);color:var(--txt)}
.article a{color:#7dd3fc;font-weight:700;text-decoration:none}
.article a:hover{text-decoration:underline}
.foot-in{max-width:760px;margin:0 auto;padding:34px 18px;text-align:center}
.foot-brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:1.1rem}
.foot-brand b{color:var(--accent)}
.foot p{color:var(--muted);font-size:.85rem;margin:12px auto 16px;max-width:460px}
.foot-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.foot-links a{color:var(--muted);text-decoration:none;font-size:.85rem;transition:.2s}
.foot-links a:hover{color:var(--accent)}
.foot-copy{color:#5b6b8c;font-size:.76rem}

@media(max-width:680px){
  .navtog{display:block}
  .links{display:none;position:absolute;top:60px;right:14px;left:14px;flex-direction:column;background:rgba(12,19,36,.97);border:1px solid var(--line);border-radius:14px;padding:10px;backdrop-filter:blur(16px)}
  .links.open{display:flex}
  .links a{width:100%}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}