/* Dede4D */

/* THEME: bg=#03201D accent=#28F0FF */
:root{--teal:#1EE6D2;--teal2:#0ED6C2;--deep:#031A18;--blue:#28F0FF;--bg:#03201D;--ink:#D7FFFB;--mut:#8FCBC4;--line:#0A3D38;--ok:#37FF8B;--warn:#FFD35A;--err:#FF3D7A;--lime:#B6FF3A;--panel:#052A26;--panel2:#041F1C;--metal:#062F2B;--glow:rgba(40,240,255,.22);--glow2:rgba(182,255,58,.18)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:16px/1.75 "Segoe UI",system-ui,Arial,sans-serif;background:
repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,rgba(255,255,255,0) 1px 6px),
radial-gradient(1200px 700px at 30% -10%,rgba(40,240,255,.14),transparent 62%),
radial-gradient(900px 600px at 90% 10%,rgba(182,255,58,.10),transparent 55%),
linear-gradient(180deg,#021816 0%,var(--bg) 40%,#021917 100%);color:var(--ink)}
h1,h2,h3{line-height:1.32;color:var(--teal2);font-family:Georgia,"Times New Roman",Times,serif;letter-spacing:.2px;text-shadow:0 0 14px rgba(40,240,255,.16)}
a{color:var(--blue);text-decoration:none;text-shadow:0 0 10px rgba(40,240,255,.12)}a:hover{text-decoration:underline}
code,.mono{font-family:Consolas,"Courier New",monospace}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

header.site{background:
linear-gradient(180deg,#041E1B 0%,#031816 52%,#021514 100%);
border-bottom:3px solid var(--blue);position:sticky;top:0;z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(40,240,255,.10) inset}
header.site::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;background:
repeating-linear-gradient(90deg,rgba(40,240,255,.06) 0 1px,rgba(0,0,0,0) 1px 12px),
radial-gradient(800px 90px at 50% 0,rgba(40,240,255,.18),transparent 70%),
linear-gradient(90deg,rgba(182,255,58,.07),transparent 20%,transparent 80%,rgba(182,255,58,.06));
mix-blend-mode:screen;opacity:.55}

.hbar{display:flex;align-items:center;gap:16px;padding:11px 0;position:relative}
.logo{font-family:Consolas,monospace;font-weight:800;font-size:18px;color:#EFFFFD;letter-spacing:1px;text-shadow:0 0 14px rgba(40,240,255,.18),0 0 26px rgba(182,255,58,.08)}
.logo b{color:var(--lime);text-shadow:0 0 16px rgba(182,255,58,.22)}
.logo .path{color:#89D9D0;font-size:13px;opacity:.95}

nav.main{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px}
nav.main a{color:#B8FFF7;font-size:14px;padding:7px 11px;border-radius:7px;border:1px solid rgba(40,240,255,.18);background:
linear-gradient(180deg,rgba(7,53,48,.82),rgba(4,35,31,.75));
box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(0,0,0,.35)}
nav.main a:hover{color:#001515;background:
linear-gradient(180deg,rgba(40,240,255,.95),rgba(30,230,210,.88));
text-decoration:none;box-shadow:0 0 0 1px rgba(0,0,0,.45) inset,0 10px 28px rgba(40,240,255,.14),0 0 18px rgba(40,240,255,.22)}
nav.main a:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

main{padding:0 0 60px}

.hero{background:
repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,rgba(255,255,255,0) 1px 7px),
radial-gradient(900px 380px at 20% 0,rgba(40,240,255,.22),transparent 60%),
radial-gradient(900px 420px at 85% 10%,rgba(182,255,58,.16),transparent 58%),
linear-gradient(150deg,#021615 0%,#052E2A 55%,#03201D 100%);
color:#E7FFFC;padding:50px 0 38px;border-bottom:3px solid var(--blue);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:
linear-gradient(90deg,transparent 0 6%,rgba(40,240,255,.95) 30%,rgba(182,255,58,.85) 50%,rgba(40,240,255,.95) 70%,transparent 94%);filter:blur(.2px);opacity:.9}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
repeating-linear-gradient(90deg,rgba(0,0,0,.0) 0 10px,rgba(0,0,0,.22) 10px 11px);
opacity:.22}
.hero .kick{font-family:Consolas,monospace;color:var(--lime);font-size:13px;letter-spacing:2px;margin-bottom:12px;text-shadow:0 0 18px rgba(182,255,58,.22)}
.hero h1{color:#F4FFFE;font-size:31px;max-width:820px;text-shadow:0 0 24px rgba(40,240,255,.22),0 0 42px rgba(182,255,58,.10)}
.hero .lede{max-width:780px;margin-top:14px;color:#B8EFE9}

.helpsearch{margin-top:20px;max-width:620px;position:relative}
.helpsearch input{width:100%;padding:13px 18px 13px 46px;border-radius:10px;border:2px solid rgba(40,240,255,.70);background:
linear-gradient(180deg,#052B27 0%,#041F1C 100%);
color:#EFFFFD;font-size:16px;font-family:inherit;box-shadow:0 0 0 1px rgba(0,0,0,.55) inset,0 14px 34px rgba(0,0,0,.35),0 0 22px rgba(40,240,255,.12)}
.helpsearch input::placeholder{color:#7FD4CB}
.helpsearch input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 1px rgba(0,0,0,.55) inset,0 0 0 3px rgba(182,255,58,.14),0 18px 40px rgba(0,0,0,.35),0 0 26px rgba(182,255,58,.18)}
.helpsearch .ic{position:absolute;left:14px;top:13px;color:var(--blue);font-weight:900;text-shadow:0 0 14px rgba(40,240,255,.22)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips a{background:
linear-gradient(180deg,rgba(6,56,51,.95),rgba(4,36,32,.95));
border:1px solid rgba(30,230,210,.30);color:#D3FFFA;font-size:13.5px;border-radius:999px;padding:6px 14px;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(0,0,0,.35)}
.chips a:hover{border-color:var(--blue);color:#001515;text-decoration:none;background:linear-gradient(180deg,rgba(40,240,255,.92),rgba(30,230,210,.86));box-shadow:0 10px 24px rgba(40,240,255,.14),0 0 18px rgba(40,240,255,.18)}

.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center}
.hero-fig img{width:100%;height:auto;border-radius:14px;border:1px solid rgba(40,240,255,.24);background:linear-gradient(180deg,#052A26,#041F1C);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.5) inset,0 0 26px rgba(40,240,255,.10)}

.ticket{background:
linear-gradient(180deg,rgba(9,54,49,.78),rgba(4,35,31,.82)),
repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,rgba(255,255,255,0) 1px 14px);
border:1.5px solid rgba(40,240,255,.22);border-radius:12px;padding:22px 24px;margin:16px 0;position:relative;border-top:5px solid var(--lime);box-shadow:0 12px 34px rgba(0,0,0,.42),0 0 0 1px rgba(0,0,0,.55) inset}
.ticket::before{content:"";position:absolute;inset:10px;border-radius:10px;pointer-events:none;border:1px dashed rgba(182,255,58,.18);opacity:.85}
.ticket::after{content:"";position:absolute;left:0;top:0;right:0;height:34px;pointer-events:none;background:
radial-gradient(500px 34px at 50% 0,rgba(40,240,255,.16),transparent 70%);
opacity:.9}
.ticket h2{font-size:20px;margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ticket .sev{font-size:11.5px;font-weight:900;letter-spacing:1px;border-radius:6px;padding:2px 8px;border:1px solid rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.sev.umum{background:rgba(30,230,210,.14);color:#BFFFF6;border-color:rgba(30,230,210,.28)}
.sev.sedang{background:rgba(255,211,90,.14);color:#FFE8A6;border-color:rgba(255,211,90,.28)}
.sev.eskalasi{background:rgba(255,61,122,.14);color:#FFC3D6;border-color:rgba(255,61,122,.30)}
.ticket .tkno{font-family:Consolas,monospace;color:#91D8D0;font-size:12px;opacity:.95}
.ticket :is(p,ul,ol,table){margin:8px 0}
.ticket table{width:100%;border-collapse:collapse;font-size:14.5px;display:block;overflow-x:auto;border-radius:10px}
.ticket th{background:linear-gradient(180deg,rgba(40,240,255,.18),rgba(30,230,210,.12));color:#EFFFFD;text-align:left;padding:7px 10px;border-bottom:1px solid rgba(40,240,255,.22)}
.ticket td{padding:7px 10px;border:1px solid rgba(40,240,255,.18);color:#D9FFFB;background:rgba(3,32,29,.35)}
.fixsteps li{margin:6px 0}
.crumbs{font-size:13px;color:var(--mut);margin:20px 0 14px;font-family:Consolas,monospace}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"\203A ";color:var(--blue);text-shadow:0 0 10px rgba(40,240,255,.20)}

.art-head{background:
linear-gradient(180deg,rgba(8,58,52,.76),rgba(4,35,31,.82));
border:1.5px solid rgba(40,240,255,.24);border-left:5px solid var(--blue);border-radius:10px;padding:22px 26px;margin-bottom:8px;position:relative;box-shadow:0 14px 34px rgba(0,0,0,.42),0 0 0 1px rgba(0,0,0,.55) inset}
.art-head::before{content:"";position:absolute;left:14px;right:14px;top:12px;height:1px;background:linear-gradient(90deg,transparent,rgba(182,255,58,.40),rgba(40,240,255,.45),rgba(182,255,58,.35),transparent);opacity:.85}
.art-head::after{content:"";position:absolute;right:12px;top:12px;width:10px;height:10px;border-radius:2px;background:linear-gradient(180deg,rgba(182,255,58,.85),rgba(40,240,255,.55));box-shadow:0 0 14px rgba(182,255,58,.20),0 0 20px rgba(40,240,255,.18)}
.art-head h1{font-size:27px;color:#F4FFFE;text-shadow:0 0 22px rgba(40,240,255,.22)}
.art-meta{font-size:13px;color:var(--mut);margin-top:8px;font-family:Consolas,monospace}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.toc{background:linear-gradient(180deg,rgba(6,46,41,.78),rgba(4,35,31,.82));border:1.5px solid rgba(40,240,255,.20);border-radius:10px;padding:16px 20px;margin:16px 0;box-shadow:0 12px 34px rgba(0,0,0,.40),0 0 0 1px rgba(0,0,0,.55) inset}
.toc h2{font-size:14px;letter-spacing:2px;color:var(--lime);text-transform:uppercase;text-shadow:0 0 16px rgba(182,255,58,.18)}
.toc ol{margin:8px 0 0 18px;font-size:14.5px}
.toc a{color:#BFFEF7}
.toc a:hover{color:var(--blue);text-decoration:none}

.fig-main{margin:20px 0;border-radius:12px;overflow:hidden;border:1.5px solid rgba(40,240,255,.20);background:linear-gradient(180deg,rgba(6,46,41,.70),rgba(4,35,31,.86));box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.55) inset}
.fig-main img{display:block;width:100%;height:auto}
.fig-main figcaption{font-size:13px;color:var(--mut);padding:9px 14px;border-top:1px solid rgba(40,240,255,.16);background:rgba(3,32,29,.35)}

.sect{background:
linear-gradient(180deg,rgba(8,58,52,.74),rgba(4,35,31,.86)),
repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,rgba(255,255,255,0) 1px 16px);
border:1.5px solid rgba(40,240,255,.20);border-radius:12px;padding:22px 24px;margin:18px 0;position:relative;box-shadow:0 14px 36px rgba(0,0,0,.44),0 0 0 1px rgba(0,0,0,.55) inset}
.sect::before{content:"";position:absolute;inset:12px;border-radius:10px;pointer-events:none;border:1px solid rgba(182,255,58,.10)}
.sect h2{font-size:20.5px;margin-bottom:8px;padding-left:30px;position:relative;color:#F2FFFE}
.sect h2::before{content:"\1F527";position:absolute;left:0;top:0;font-size:17px;filter:drop-shadow(0 0 10px rgba(40,240,255,.22))}
.sect h3{font-size:17px;color:var(--blue);margin:12px 0 4px;font-family:Georgia,"Times New Roman",Times,serif;text-shadow:0 0 14px rgba(40,240,255,.18)}
.sect :is(p,ul,ol,table){margin:8px 0}
.sect table{width:100%;border-collapse:collapse;font-size:14.5px;display:block;overflow-x:auto;border-radius:10px}
.sect th{background:linear-gradient(180deg,rgba(40,240,255,.18),rgba(30,230,210,.12));color:#EFFFFD;text-align:left;padding:7px 10px;border-bottom:1px solid rgba(40,240,255,.22)}
.sect td{padding:7px 10px;border:1px solid rgba(40,240,255,.18);color:#D9FFFB;background:rgba(3,32,29,.35)}

.symptom{background:
linear-gradient(180deg,rgba(255,61,122,.10),rgba(4,35,31,.84));
border-left:4px solid var(--err);border-radius:8px;padding:12px 16px;margin:10px 0;color:#FFE8F0;box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.55) inset}
.solution{background:
linear-gradient(180deg,rgba(55,255,139,.10),rgba(4,35,31,.84));
border-left:4px solid var(--ok);border-radius:8px;padding:12px 16px;margin:10px 0;color:#E9FFF2;box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.55) inset}

.faq details{background:linear-gradient(180deg,rgba(6,46,41,.76),rgba(4,35,31,.86));border:1.5px solid rgba(40,240,255,.20);border-radius:10px;margin:10px 0;padding:4px 18px;box-shadow:0 12px 32px rgba(0,0,0,.40),0 0 0 1px rgba(0,0,0,.55) inset}
.faq summary{cursor:pointer;font-weight:700;padding:12px 0;color:#DFFFFB;font-family:Georgia,"Times New Roman",Times,serif;text-shadow:0 0 16px rgba(40,240,255,.16)}
.faq summary::marker{color:var(--lime)}
.faq-a{color:var(--mut);padding-bottom:12px}

.related{background:
repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,rgba(255,255,255,0) 1px 7px),
linear-gradient(180deg,#031A18 0%,#021514 100%);
border-radius:12px;padding:20px 24px;margin:22px 0;color:#CFFEF8;border:1px solid rgba(40,240,255,.14);box-shadow:0 14px 36px rgba(0,0,0,.45),0 0 22px rgba(40,240,255,.10) inset}
.related h2{color:#F4FFFE;font-size:17px}
.related ul{list-style:none}
.related li{margin:7px 0;padding-left:24px;position:relative}
.related li::before{content:"\2192";position:absolute;left:0;color:var(--blue);text-shadow:0 0 14px rgba(40,240,255,.18)}
.related a{color:#BFFEF7}
.related a:hover{color:var(--lime);text-decoration:none}

.rg-strip{background:
linear-gradient(180deg,rgba(255,211,90,.12),rgba(4,35,31,.86));
border:1.5px solid rgba(255,211,90,.34);border-radius:10px;padding:14px 18px;margin:20px 0;color:#FFE7A8;font-size:14.5px;box-shadow:0 12px 32px rgba(0,0,0,.40),0 0 0 1px rgba(0,0,0,.55) inset}

footer.site{background:
repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,rgba(255,255,255,0) 1px 7px),
linear-gradient(180deg,#021514 0%,#021312 100%);
color:#BFF6EF;padding:34px 0 24px;font-size:14px;border-top:3px solid rgba(182,255,58,.75);position:relative;box-shadow:0 -20px 60px rgba(0,0,0,.55)}
footer.site::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(90deg,transparent 0 6%,rgba(182,255,58,.85) 28%,rgba(40,240,255,.85) 50%,rgba(182,255,58,.85) 72%,transparent 94%);opacity:.75}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
footer.site h2{font-size:13px;letter-spacing:2px;color:var(--blue);margin-bottom:10px;text-transform:uppercase;text-shadow:0 0 16px rgba(40,240,255,.18);font-family:Consolas,"Courier New",monospace}
footer.site ul{list-style:none}
footer.site li{margin:6px 0}
footer.site a{color:#BFF6EF}
footer.site a:hover{color:var(--lime);text-decoration:none}

.fbadges{display:flex;gap:14px;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid rgba(40,240,255,.18);flex-wrap:wrap}
.badge18{border:2px solid var(--blue);color:#001515;font-weight:900;border-radius:8px;padding:2px 10px;background:linear-gradient(180deg,rgba(40,240,255,.95),rgba(30,230,210,.88));box-shadow:0 12px 26px rgba(40,240,255,.12),0 0 0 1px rgba(0,0,0,.55) inset}
.legal{font-size:12.5px;color:#83C9C1;margin-top:12px}

@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.fgrid{grid-template-columns:1fr}.hero h1{font-size:25px}.art-head h1{font-size:23px)}}