@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap");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:#0a0a0a;--text-color:#e5e7eb;--link-color:#3b82f6;--strong-color:#fff;--bg-menu:rgba(24,24,27,.8);--bg-panel:#18181b;--bg-kotak-kecil:#3b82f6;--bg-kotak:#3b82f6;--bg-kotak-active:#2563eb;--text-kotak:#fff;--bg-kotak-artikel:#18181b;--border-kotak-artikel:#27272a;--border-kotak-artikel-hover:#3b82f6;--bg-kotak-tag-artikel:#27272a;--bg-code:rgba(59,130,246,.1);--text-code:#93c5fd;--border-blockquote:#3b82f6;--text-blockquote:#d1d5db;--menu-hover:rgba(59,130,246,.1);--border-gatsby-image:#27272a;--accent-primary:#3b82f6;--accent-secondary:#2563eb;--card-shadow:none;--card-shadow-hover:none;--border-color:#27272a}body.dark,body.light{transition-property:background-color,background,color,border-color;transition-duration:.2s;transition-timing-function:ease-in-out}body.light{--body-color:#f9fafb;--text-color:#1f2937;--link-color:#2563eb;--strong-color:#111827;--bg-menu:hsla(0,0%,100%,.8);--bg-panel:#fff;--bg-kotak-kecil:#2563eb;--bg-kotak:#2563eb;--bg-kotak-active:#1d4ed8;--text-kotak:#fff;--bg-kotak-artikel:#fff;--border-kotak-artikel:#e5e7eb;--border-kotak-artikel-hover:#2563eb;--bg-kotak-tag-artikel:#e5e7eb;--bg-code:rgba(37,99,235,.1);--text-code:#1e40af;--border-blockquote:#2563eb;--text-blockquote:#4b5563;--menu-hover:rgba(37,99,235,.08);--border-gatsby-image:#e5e7eb;--accent-primary:#2563eb;--accent-secondary:#1d4ed8;--card-shadow:none;--card-shadow-hover:none;--border-color:#e5e7eb}::-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;color:var(--strong-color)}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:6px;border:1px solid var(--border-color);margin-bottom:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;gap:4px}.menuku .icon{display:none}.menuku a{display:inline-flex;align-items:center;gap:8px;color:var(--text-color);font-weight:500;text-align:center;padding:10px 16px;text-decoration:none;border-radius:8px;transition:all .15s ease;position:relative}.menuku a,.menuku a i{font-size:14px}.menuku a:hover{background:var(--menu-hover);color:var(--strong-color)}.menuku .active{color:var(--text-kotak);background:var(--bg-kotak)}.theme-toggle{margin-left:auto;background:transparent;border:1px solid var(--border-color);color:var(--text-color);width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;font-size:16px}.theme-toggle:hover{background:var(--menu-hover);color:var(--strong-color);border-color:var(--border-kotak-artikel-hover)}.theme-toggle i{pointer-events:none}.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:32px;background-color:var(--bg-panel);border-radius:12px;margin-top:0;border:1px solid var(--border-color);transition:all .2s ease}.panel .nama{font-size:2.2em;font-weight:800;margin-top:10px;font-family:Poppins,sans-serif;color:var(--strong-color)}.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%;border:3px solid var(--border-color);transition:all .2s ease}.foto img:hover{border-color:var(--accent-primary);transform:scale(1.02)}@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;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;border-radius:8px;margin-top:10px;margin-right:10px;border:none;transition:all .15s ease}.my-button a:hover{text-decoration:none;background:var(--bg-kotak-active)}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:24px auto 40px;font-size:14px;line-height:1.5em;max-width:900px;padding:20px;background:var(--bg-panel);border-radius:12px;border:1px solid var(--border-color);font-weight:500;color:var(--text-color)}*{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:13px;padding:8px 10px;gap:6px}.menuku a i{font-size:12px}.theme-toggle{width:36px;height:36px;font-size:14px}}@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 24px;padding:24px;background:var(--bg-kotak-artikel);border:1px solid var(--border-kotak-artikel);border-radius:12px;transition:all .2s ease}.portfolio-row:hover{border-color:var(--border-kotak-artikel-hover)}.portfolio-row h4{font-size:1.2em;font-weight:700;margin-bottom:16px;color:var(--strong-color)}.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:8px;border:1px solid var(--border-color);transition:all .2s ease}.portfolio-row img:hover{border-color:var(--accent-primary)}.deskripsi .year{background:var(--bg-kotak);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}.section-block{margin-bottom:56px}.section-title-home{font-size:1.8em;color:var(--strong-color);margin:0 0 24px;display:inline-flex;align-items:center;gap:12px;font-weight:700}.about-content p{margin:0 0 16px;line-height:1.7;text-align:left}.about-content p:last-child{margin-bottom:0}.timeline-card{background:var(--bg-kotak-artikel);border:1px solid var(--border-kotak-artikel);border-radius:12px;padding:24px;margin-bottom:20px;transition:all .2s ease}.timeline-card:hover{border-color:var(--border-kotak-artikel-hover)}.timeline-header{display:flex;gap:20px;margin-bottom:16px;align-items:center}.timeline-icon{width:48px;height:48px;min-width:48px;background:var(--bg-kotak);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-kotak)}.timeline-content{flex:1 1;text-align:left}.timeline-date{display:inline-flex;align-items:center;gap:6px;background:var(--bg-kotak-tag-artikel);padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600;color:var(--text-color);margin-bottom:10px}.timeline-date i{font-size:12px;color:var(--accent-primary)}.timeline-title{margin:8px 0 4px;font-size:1.3em;color:var(--strong-color);font-weight:700;line-height:1.3;text-align:left}.timeline-subtitle{margin:0;font-size:.95em;color:var(--text-color);opacity:.8;text-align:left}.timeline-description{margin-bottom:12px;margin-left:68px;text-align:left}.timeline-description p{margin:0 0 8px;line-height:1.6;text-align:left}.timeline-list{margin:12px 0 0 68px;padding-left:24px;list-style:disc;text-align:left}.timeline-list li{margin-bottom:8px;line-height:1.6;color:var(--text-color);text-align:left}.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-gap:12px;gap:12px;margin-top:0}.skill-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 16px;background:var(--bg-kotak-artikel);border:1px solid var(--border-kotak-artikel);border-radius:10px;transition:all .2s ease;text-align:center}.skill-item:hover{border-color:var(--border-kotak-artikel-hover);transform:translateY(-2px)}.skill-item i{font-size:32px;color:var(--accent-primary)}.skill-item span{font-size:14px;font-weight:600;color:var(--text-color)}@media only screen and (max-width:768px){.timeline-header{gap:16px}.timeline-icon{width:44px;height:44px;min-width:44px;font-size:18px}.timeline-title{font-size:1.2em}.section-title-home{font-size:1.6em}}@media only screen and (max-width:520px){.section-block{margin-bottom:40px}.section-title-home{font-size:1.4em;gap:8px}.timeline-card{padding:20px}.timeline-header{flex-direction:column;gap:12px}.timeline-icon{width:40px;height:40px;min-width:40px;font-size:16px}.timeline-title{font-size:1.1em}.timeline-subtitle{font-size:.9em}.timeline-description{margin-left:0}.timeline-list{margin-left:0;padding-left:20px}.skills-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}.skill-item{padding:16px 12px;gap:8px}.skill-item i{font-size:28px}.skill-item span{font-size:12px}}.portfolio-header{margin-bottom:40px;text-align:center}.portfolio-header h1{margin:0 0 12px;font-size:2.5em;color:var(--strong-color);display:flex;align-items:center;justify-content:center;gap:12px}.portfolio-subtitle{color:var(--text-color);font-size:1.1em;margin:0;opacity:.8}.portfolio-section{margin-bottom:64px}.section-title{font-size:1.6em;color:var(--strong-color);margin:0 0 24px;font-weight:700}.portfolio-grid-featured{display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));grid-gap:24px;gap:24px;margin-bottom:32px}.portfolio-card{background:var(--bg-kotak-artikel);border:1px solid var(--border-kotak-artikel);border-radius:12px;overflow:hidden;transition:all .2s ease}.portfolio-card:hover{border-color:var(--border-kotak-artikel-hover)}.portfolio-image-wrapper{display:block;width:100%;background:var(--bg-kotak-tag-artikel);position:relative;border-bottom:1px solid var(--border-color)}.portfolio-image{width:100%;height:auto;display:block;transition:all .2s ease}.portfolio-image-wrapper:hover .portfolio-image{opacity:.9}.portfolio-content{padding:24px}.portfolio-header-card{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}.portfolio-icon{font-size:32px;color:var(--accent-primary);min-width:32px;margin-top:4px}.portfolio-title{margin:0 0 6px;font-size:1.4em;color:var(--strong-color);line-height:1.3}.portfolio-company{margin:0;font-size:.95em;color:var(--text-color);opacity:.7}.portfolio-description{margin:0 0 20px;line-height:1.6;color:var(--text-color)}.portfolio-features{margin-top:16px}.features-title{display:block;margin-bottom:10px;color:var(--strong-color);font-size:.95em}.features-list{margin:0;padding-left:20px;line-height:1.8}.features-list li{margin-bottom:6px;color:var(--text-color);font-size:.95em}.portfolio-grid-other{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:20px;gap:20px}.portfolio-card-small{background:var(--bg-kotak-artikel);border:1px solid var(--border-kotak-artikel);border-radius:12px;overflow:hidden;transition:all .2s ease}.portfolio-card-small:hover{border-color:var(--border-kotak-artikel-hover)}.portfolio-image-wrapper-small{display:block;width:100%;background:var(--bg-kotak-tag-artikel);border-bottom:1px solid var(--border-color)}.portfolio-image-small{width:100%;height:auto;display:block;transition:all .2s ease}.portfolio-image-wrapper-small:hover .portfolio-image-small{opacity:.9}.portfolio-content-small{padding:16px;display:flex;align-items:center;gap:12px}.portfolio-content-small i{font-size:20px;color:var(--accent-primary);min-width:20px}.portfolio-content-small h5{margin:0;font-size:1em;color:var(--strong-color);font-weight:600;line-height:1.4}.portfolio-cta{margin-top:48px;padding-top:32px;border-top:1px solid var(--border-color);text-align:center}.portfolio-cta p{font-size:1.1em;color:var(--text-color);margin:0}.portfolio-cta a{color:var(--link-color);font-weight:600;text-decoration:underline}.portfolio-cta a:hover{color:var(--accent-primary)}@media only screen and (max-width:768px){.portfolio-grid-featured{grid-template-columns:1fr}.portfolio-header h1{font-size:2em}.section-title{font-size:1.4em}}@media only screen and (max-width:520px){.portfolio-grid-other{grid-template-columns:1fr}.portfolio-header h1{font-size:1.8em;gap:8px}.portfolio-subtitle{font-size:1em}.portfolio-content{padding:20px}.portfolio-title{font-size:1.2em}.portfolio-icon{font-size:28px}}