body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;margin:0;padding:0;color:var(--text-color);background-color:var(--body-color);line-height:1.6}body.dark{--body-color:#0f1419;--text-color:#e4e6eb;--link-color:#60a5fa;--strong-color:#fff;--bg-menu:#1a1f2e;--bg-panel:#1a1f2e;--bg-kotak-kecil:linear-gradient(135deg,#667eea,#764ba2);--bg-kotak:linear-gradient(135deg,#667eea,#764ba2);--bg-kotak-active:linear-gradient(135deg,#764ba2,#667eea);--text-kotak:#fff;--bg-kotak-artikel:#1a1f2e;--border-kotak-artikel:#2d3748;--border-kotak-artikel-hover:#667eea;--bg-kotak-tag-artikel:#2d3748;--bg-code:rgba(100,126,234,.1);--text-code:#a5b4fc;--border-blockquote:#667eea;--text-blockquote:#cbd5e0;--menu-hover:#2d3748;--border-gatsby-image:#2d3748;--accent-primary:#667eea;--accent-secondary:#764ba2;--card-shadow:0 4px 12px rgba(0,0,0,.2);--card-shadow-hover:0 8px 20px rgba(102,126,234,.15)}body.dark,body.light{transition-property:background-color,background,color;transition-duration:.3s}body.light{--body-color:#efefef;--text-color:#333;--link-color:#27ae60;--bg-menu:#27ae60;--bg-panel:#fff;--bg-kotak-kecil:#27ae60;--bg-kotak:#27ae60;--bg-kotak-active:#13753c;--text-kotak:#fff;--bg-kotak-artikel:#f5f5f5;--border-kotak-artikel:#c9c9c9;--border-kotak-artikel-hover:#27ae60;--bg-kotak-tag-artikel:#27ae60;--bg-code:#ddd;--text-code:#000;--border-blockquote:#27ae60;--text-blockquote:#27ae60;--menu-hover:#13753c;--border-gatsby-image:#ddd}::-webkit-scrollbar{width:11px}::-webkit-scrollbar-track{background:#bbb}::-webkit-scrollbar-thumb{background:var(--bg-menu)}::-webkit-scrollbar-thumb:hover{background:var(--bg-kotak-active)}ul{margin-top:12px;line-height:1.8}ul li{margin-bottom:6px}h1,h2,h3,h4,h5,h6{font-family:Poppins,sans-serif;font-weight:700;letter-spacing:-.02em}h1{padding:0;margin:0;font-size:2em}h4{font-size:1.5em;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}a:link,a:visited{color:var(--link-color);text-decoration:none}a:hover{text-decoration:underline}a:active,a:focus{outline:0;border:none;-moz-outline-style:none}.strong-text{color:var(--strong-color)}table{font-family:arial,sans-serif;border-collapse:collapse;border-spacing:0;width:100%}td,th{border:1px solid #ddd;text-align:left;padding:8px}tr:nth-child(2n){background-color:#ddd}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.container{width:900px;max-width:100%;margin:30px auto 0;overflow:auto;padding:0 20px 20px}.logo-container{padding:0 0 10px}.logo-container img{width:100%;max-width:250px}.title-header{padding:0;font-size:2em;font-weight:700;display:inline;margin:0 10px 0 0}.menuku{background:var(--bg-menu);overflow:auto;white-space:nowrap;border-radius:12px;padding:8px;box-shadow:var(--card-shadow);margin-bottom:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.menuku .icon{display:none}.menuku a{display:inline-flex;align-items:center;gap:8px;color:var(--text-color);font-weight:600;text-align:center;font-size:15px;padding:10px 20px;text-decoration:none;text-transform:capitalize;border-radius:8px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;margin:0 4px}.menuku a i{font-size:14px}.menuku a:hover{background:linear-gradient(135deg,rgba(102,126,234,.2),rgba(118,75,162,.2));color:var(--text-kotak);transform:translateY(-2px)}.menuku .active{color:var(--text-kotak);background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 15px rgba(102,126,234,.4)}.theme-changer{cursor:pointer;float:right;position:relative;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;margin-right:13px}.theme-changer a{padding:0!important;cursor:pointer}.theme-changer a,.theme-changer a:hover{transition-property:transform;transition-duration:.3s;border-bottom:none!important}.theme-changer a:hover{background:none!important;transform:rotate(15deg)}.theme-changer img{margin-top:7px;width:24px}.theme-changer .tooltiptext{visibility:hidden;width:155px;text-align:center;border-radius:6px;padding:4px 0;position:absolute;z-index:1;top:5px;right:142%;font-size:.9em}.theme-changer .tooltiptext.dark{background-color:#000;color:#fff}.theme-changer .tooltiptext.light{background-color:#ff0;color:#000}.theme-changer .tooltiptext:after{content:"";position:absolute;top:50%;left:100%;margin-top:-5px;border-width:5px;border-style:solid}.theme-changer .tooltiptext.dark:after{border-color:transparent transparent transparent #000}.theme-changer .tooltiptext.light:after{border-color:transparent transparent transparent #ff0}.theme-changer:hover .tooltiptext{visibility:visible}.panel{padding:30px;background-color:var(--bg-panel);border-radius:16px;box-shadow:var(--card-shadow);margin-top:20px;border:1px solid rgba(102,126,234,.1);transition:all .3s ease}.panel:hover{border-color:rgba(102,126,234,.25)}.panel .nama{font-size:2.2em;font-weight:800;margin-top:10px;font-family:Poppins,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.panel .nama span{padding-bottom:10px}.home-title{margin-bottom:50px}.foto{float:left;margin-right:20px}.foto img{width:150px;height:150px;border-radius:50%;box-shadow:0 4px 12px rgba(102,126,234,.25);border:4px solid transparent;background:linear-gradient(#1a1f2e,#1a1f2e) padding-box,linear-gradient(135deg,#667eea,#764ba2) border-box;transition:all .3s ease}.foto img:hover{animation:goyang .82s cubic-bezier(.36,.07,.19,.97) both;transform:translateZ(0) scale(1.03);-webkit-backface-visibility:hidden;backface-visibility:hidden;perspective:1000px;box-shadow:0 8px 20px rgba(102,126,234,.3)}@keyframes goyang{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.kotak-kecil{background:var(--bg-kotak-kecil);color:var(--text-kotak);font-size:12px;font-weight:600;display:inline-block;padding:6px 12px;text-transform:uppercase;box-shadow:0 4px 12px rgba(102,126,234,.3);border-radius:6px;letter-spacing:.05em}.panel .deskripsi{margin-top:10px;font-size:16px;padding-bottom:0;line-height:1.5em;text-align:justify}.deskripsi h3{margin:0 0 5px}.deskripsi h2{line-height:1em;margin-bottom:5px}.deskripsi h4{font-size:1.6em;line-height:1.2;margin:25px 0 15px;padding:0;color:var(--strong-color)}.deskripsi .grid{width:100%;display:inline-block}.deskripsi .grid-container{display:grid;grid-template-columns:auto auto auto}.judul-blog{font-size:2em;margin-bottom:15px;margin-top:5px;line-height:1.4}.artikel-detail .kotak-kecil{background-color:var(--bg-kotak-kecil);color:var(--text-kotak);padding:0 6px!important;box-shadow:none}.list-tags{background-color:var(--bg-kotak);color:var(--text-kotak);font-size:13px;font-weight:700;display:inline-block;padding:3px 7px;text-transform:capitalize;border-radius:3px;margin-top:10px;margin-right:7px}.list-tags .count{color:#f1f1f1;background:#e74c3c;padding:0 5px 1px;border-radius:3px;margin-left:2px}.list-tags.active{background-color:var(--bg-kotak-active)}.tag-artikel{font-size:.8em}.blog .tag-artikel .kotak-kecil{background-color:var(--bg-kotak-tag-artikel);font-size:.9em;text-transform:capitalize;padding:3px 5px}.blog a:hover{text-decoration:none}.blog .kiri{float:left;width:30%;margin-right:10px}.blog .kanan{float:right;width:65%;margin-top:15px}.tag-artikel a:hover .kotak-kecil{color:var(--text-kotak)}.tag-artikel a:hover .kotak-kecil,a:hover .list-tags{background-color:var(--bg-kotak-active)}.kotak-artikel{background:var(--bg-kotak-artikel);padding:6px 10px 0;margin:0 0 10px;border-radius:3px;border:2px solid var(--border-kotak-artikel)}.kotak-artikel:hover{border:2px solid var(--border-kotak-artikel-hover)}.kotak-artikel p{color:var(--text-color)}.kotak-artikel .tanggal{color:var(--text-color);font-size:13px}.kotak-artikel h3{display:inline}.post{border-bottom:1px dotted #999;padding-bottom:10px;margin-top:-5px;line-height:1.6;overflow-wrap:break-word;word-wrap:break-word}.post section{font-size:1.1em}.post h2{line-height:1.3}.post .gatsby-resp-image-wrapper{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);border-top:1px solid var(--border-gatsby-image)!important}.post .tag-artikel{margin-top:-5px}.post .tag-artikel .kotak-kecil{background-color:var(--bg-kotak-kecil);font-size:.9em;text-transform:capitalize;padding:3px 5px}code{display:inline-block;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;padding-left:.2em;padding-right:.2em;border-radius:.125rem;font-size:.9em;background-color:var(--bg-code);color:var(--text-code)}blockquote{padding:.1rem 1rem;margin-left:0;border-left:2px solid var(--border-blockquote);color:var(--text-blockquote);font-style:italic}.footer-post{font-weight:700}.artikel-detail{margin-top:7px;margin-bottom:12px}.disqus-komen{border-top:1px dotted #999}.disqus-komen,.my-button{padding-top:10px}.my-button .share-title{font-weight:700}.my-button a{background:var(--bg-kotak);color:var(--text-kotak);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;text-transform:capitalize;box-shadow:0 4px 12px rgba(102,126,234,.3);border-radius:8px;margin-top:10px;margin-right:10px;border:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.my-button a:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 16px rgba(102,126,234,.3)}input[type=text]{width:100%;padding:9px 10px;margin:8px 0 17px;box-sizing:border-box;border:2px solid var(--border-kotak-artikel);border-radius:3px;outline:none;background:var(--bg-kotak-artikel);color:var(--text-color)}input[type=text]:focus{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);border:2px solid var(--border-kotak-artikel-hover)}::placeholder{color:var(--text-color);opacity:1}:-ms-input-placeholder{color:var(--text-color)}::-ms-input-placeholder{color:var(--text-color)}.footer{text-align:center;margin:20px auto 40px;font-size:14px;line-height:1.5em;max-width:900px;padding:20px;background:var(--bg-panel);border-radius:12px;box-shadow:var(--card-shadow);border:1px solid rgba(102,126,234,.1);font-weight:500}*{box-sizing:border-box}@media only screen and (max-width:820px){.container{width:94%;margin:15px auto 0}.judul-blog{font-size:1.5em}}@media only screen and (max-width:748px){.panel .nama{font-size:1.8em}}@media only screen and (max-width:717px){.title-header,h1{font-size:2em}.panel .nama{font-size:1.4em}.blog .kiri{float:left;width:100%;margin-right:0}.blog .kanan{float:right;width:100%;margin-top:0}}@media only screen and (max-width:630px){.foto{float:none;text-align:center;margin:0 auto 20px;width:100%}.foto img{margin:0 auto}.home-desc,.home-title{text-align:center}.my-button{display:flex;flex-direction:column;align-items:center;gap:0}.my-button a{width:80%;max-width:300px;justify-content:center}}@media only screen and (max-width:615px){.portfolio-row .column{width:100%!important}.portfolio-row{padding:20px;margin-bottom:25px}.portfolio-row h4{font-size:1.1em}}@media only screen and (max-width:520px){.container{width:98%;margin:15px auto 0;padding:0 10px 10px}.footer{width:95%;margin:20px auto 30px;padding:15px}.panel{padding:20px}.menuku{padding:6px}.menuku a{font-size:14px;padding:8px 12px;margin:0 2px}.menuku a i{font-size:13px}}@media only screen and (max-width:467px){.deskripsi .grid-container{display:grid;grid-template-columns:auto auto}.foto img{width:45%;height:45%;display:block;margin:0 auto 10px}.foto{padding:10px;width:100%}.home-title{text-align:center;margin-bottom:30px}}@media only screen and (max-width:395px){.title-header,h1{font-size:7vw}.panel .nama{font-size:5.5vw}.deskripsi .grid-container{display:grid;grid-template-columns:auto}}@media only screen and (max-width:353px){.title-header,h1{font-size:7.2vw}.logo-container span{font-size:4vw}.kotak-artikel h3{font-size:1.1em}.artikel-detail{font-size:.8em}}.switch{position:relative;display:block;vertical-align:top;width:62px;height:20px;padding:2px;background:linear-gradient(180deg,#eee,#fff 25px);background-image:-webkit-linear-gradient(top,#eee,#fff 25px);border-radius:18px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px rgba(0,0,0,.05);cursor:pointer;float:right;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;margin:7px 13px 0 0}.switch,.switch-input{box-sizing:content-box}.switch-input{position:absolute;top:0;left:0;opacity:0}.switch-label{position:relative;display:block;height:inherit;font-size:10px;text-transform:uppercase;background:#eceeef;border-radius:inherit;box-shadow:inset 0 1px 2px rgba(0,0,0,.12),inset 0 0 2px rgba(0,0,0,.15);box-sizing:content-box}.switch-label:after,.switch-label:before{position:absolute;top:49%;margin-top:-.5em;line-height:1;transition:inherit;box-sizing:content-box;font-weight:700}.switch-label:before{content:attr(data-off);right:11px;color:#777;text-shadow:0 1px hsla(0,0%,100%,.5)}.switch-label:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(0,0,0,.2);opacity:0}.switch-input:checked~.switch-label{background:#e1b42b;box-shadow:inset 0 1px 2px rgba(0,0,0,.15),inset 0 0 3px rgba(0,0,0,.2)}.switch-input:checked~.switch-label:before{opacity:0}.switch-input:checked~.switch-label:after{opacity:1}.switch-handle{position:absolute;top:2px;left:4px;width:20px;height:20px;background:linear-gradient(180deg,#fff 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#fff 40%,#f0f0f0);border-radius:100%;box-shadow:1px 1px 5px rgba(0,0,0,.2)}.switch-handle:before{content:"";position:absolute;top:50%;left:50%;margin:-6px 0 0 -6px;width:12px;height:12px;background:linear-gradient(180deg,#eee,#fff);background-image:-webkit-linear-gradient(top,#eee,#fff);border-radius:6px;box-shadow:inset 0 1px rgba(0,0,0,.02)}.switch-input:checked~.switch-handle{left:43px;box-shadow:-1px 1px 5px rgba(0,0,0,.2)}.switch-handle,.switch-label{transition:All .2s ease;-webkit-transition:All .2s ease;-moz-transition:All .2s ease;-o-transition:All .2s ease}.portfolio-row{margin:0 0 30px;padding:25px;background:var(--bg-kotak-artikel);border:1px solid var(--border-kotak-artikel);border-radius:12px;box-shadow:var(--card-shadow);transition:all .3s ease}.portfolio-row:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hover);border-color:var(--border-kotak-artikel-hover)}.portfolio-row h4{font-size:1.3em;font-weight:700;margin-bottom:15px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.portfolio-row>.column{float:left}.portfolio-row .column{float:left;width:50%}.portfolio-row:after{content:"";display:table;clear:both}.portfolio-row .content.left{margin-right:10px}.portfolio-row .content p{line-height:1.5em;margin-top:0}.portfolio-row img{width:100%;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:all .3s ease}.portfolio-row img:hover{transform:scale(1.01);box-shadow:0 6px 16px rgba(102,126,234,.2)}.deskripsi .year{background:linear-gradient(135deg,#667eea,#764ba2);display:inline-flex;align-items:center;gap:6px;padding:6px 14px;line-height:1em;font-size:13px;border-radius:20px;margin:8px 0 4px;color:var(--text-kotak);font-weight:600;box-shadow:0 4px 12px rgba(102,126,234,.3)}