@font-face{
  font-family:'Chillax';
  src:url('https://cdn.zhyllanfyllah.my.id/cdn/privite/fonts/format/woff2/Chillax-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Chillax';
  src:url('https://cdn.zhyllanfyllah.my.id/cdn/privite/fonts/format/woff2/Chillax-Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Chillax';
  src:url('https://cdn.zhyllanfyllah.my.id/cdn/privite/fonts/format/woff2/Chillax-Semibold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Chillax';
  src:url('https://cdn.zhyllanfyllah.my.id/cdn/privite/fonts/format/woff2/Chillax-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('https://cdn.zhyllanfyllah.my.id/cdn/privite/fonts/format/woff2/PlusJakartaSans-Regular.woff2') format('woff2');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --md-ref-typeface-brand: 'Chillax', system-ui, sans-serif;
  --md-ref-typeface-plain: 'Plus Jakarta Sans', system-ui, sans-serif;
  --md-sys-color-primary: #d0bcff;
  --md-sys-color-surface: #141218;
  --md-sys-color-surface-container-low: #1d1b20;
  --md-sys-color-surface-container: #211f26;
  --md-sys-color-surface-container-high: #2b2930;
  --md-sys-color-surface-container-highest: #36343b;
  --md-sys-color-on-surface: #e6e0e9;
  --md-sys-color-on-surface-variant: #cac4d0;
  --md-sys-color-outline: #938f99;
  --md-sys-color-outline-variant: #49454f;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{height:100%;}
body{
  font-family:var(--md-ref-typeface-plain);
  background:var(--md-sys-color-surface);
  color:var(--md-sys-color-on-surface);
  height:100vh;overflow:hidden;min-width:1024px;
  -webkit-font-smoothing:antialiased;
}
.page{display:flex;height:100vh;min-width:1024px;}

.sidebar{
  width:300px;min-width:300px;height:100vh;
  background:var(--md-sys-color-surface-container-low);
  border-right:1px solid var(--md-sys-color-outline-variant);
  display:flex;flex-direction:column;
  padding:32px 24px 24px;
  overflow:hidden;
}
.sidebar-top{flex:1;display:flex;flex-direction:column;}

.profile-photo-wrap{
  position:relative;
  width:140px;
  height:140px;
  margin-bottom:20px;
  flex-shrink:0;
}
.morph-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  display:block;
  overflow:visible;
}

#morphFramePath{
  stroke:var(--md-sys-color-primary);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(208,188,255,.55));
}

.sidebar-name{
  font-family:var(--md-ref-typeface-brand);font-weight:700;font-size:20px;
  letter-spacing:-.3px;color:var(--md-sys-color-on-surface);
  line-height:1.2;margin-bottom:4px;
}
.sidebar-role{
  font-family:var(--md-ref-typeface-brand);font-weight:400;font-size:12px;
  color:var(--md-sys-color-primary);margin-bottom:6px;line-height:1.4;
}
.sidebar-location{font-size:12px;color:var(--md-sys-color-on-surface-variant);}

.sidebar-bottom{
  border-top:1px solid var(--md-sys-color-outline-variant);
  padding-top:16px;
}
.sidebar-label{
  font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:1.5px;color:var(--md-sys-color-on-surface-variant);
  margin-bottom:8px;
}
.contact-item{
  display:flex;align-items:center;gap:8px;padding:6px 0;
  font-size:12px;color:var(--md-sys-color-on-surface-variant);
  text-decoration:none;transition:color .15s;
}
.contact-item:hover{color:var(--md-sys-color-primary);}
.contact-item .material-icons-round{
  font-size:15px;color:var(--md-sys-color-on-surface-variant);
  transition:color .15s;
}
.contact-item:hover .material-icons-round{color:var(--md-sys-color-primary);}

.main{
  flex:1;height:100vh;overflow-y:auto;overflow-x:hidden;
  padding:56px 72px 80px;background:var(--md-sys-color-surface);
}
.main::-webkit-scrollbar{width:6px;}
.main::-webkit-scrollbar-track{background:transparent;}
.main::-webkit-scrollbar-thumb{
  background:var(--md-sys-color-outline-variant);border-radius:3px;
}
.main::-webkit-scrollbar-thumb:hover{background:var(--md-sys-color-primary);}

.section{margin-bottom:64px;}
.section:last-child{margin-bottom:0;}
.section-title{
  font-family:var(--md-ref-typeface-brand);font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:2px;
  color:var(--md-sys-color-on-surface-variant);
  margin-bottom:20px;padding-bottom:12px;
  border-bottom:1px solid var(--md-sys-color-outline-variant);
}

.about-text p{
  font-size:15px;color:var(--md-sys-color-on-surface-variant);
  line-height:1.8;margin-bottom:16px;
}
.about-text p:last-child{margin-bottom:0;}
.about-text strong{color:var(--md-sys-color-on-surface);font-weight:600;}

.github-insights{
  background:var(--md-sys-color-surface-container-low);
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:20px;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:200px;
  position:relative;
  overflow:hidden;
  transition:border-color .2s, background .2s;
}
.github-insights:hover{
  border-color:var(--md-sys-color-primary);
  background:var(--md-sys-color-surface-container);
}
.github-insights img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  position:relative;
  z-index:2;
}
.github-insights::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(208,188,255,.06) 50%,
    transparent 100%
  );
  background-size:200% 100%;
  animation:shimmer 1.8s infinite;
  pointer-events:none;
  transition:opacity .4s;
  z-index:1;
}
.github-insights.loaded::before{opacity:0;}
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.github-insights .fallback{
  display:none;
  font-size:13px;
  color:var(--md-sys-color-on-surface-variant);
  text-align:center;
  line-height:1.6;
}
.github-insights.error::before{display:none;}
.github-insights.error img{display:none;}
.github-insights.error .fallback{display:block;}

.badge-grid{display:flex;flex-wrap:wrap;gap:8px;}
.badge-grid img{height:28px;display:block;border-radius:6px;}

.repo-list{display:flex;flex-direction:column;gap:8px;}
.repo-item{
  background:var(--md-sys-color-surface-container-low);
  border-radius:16px;padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  transition:background .15s;text-decoration:none;
  border:1px solid transparent;
}
.repo-item:hover{
  background:var(--md-sys-color-surface-container-high);
  border-color:var(--md-sys-color-outline-variant);
}
.repo-left{flex:1;min-width:0;}
.repo-name{
  font-family:var(--md-ref-typeface-brand);font-weight:600;font-size:15px;
  color:var(--md-sys-color-on-surface);margin-bottom:4px;transition:color .15s;
}
.repo-item:hover .repo-name{color:var(--md-sys-color-primary);}
.repo-desc{
  font-size:13px;color:var(--md-sys-color-on-surface-variant);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  line-clamp:1;
}
.repo-arrow{
  color:var(--md-sys-color-outline);flex-shrink:0;
  transition:color .15s,transform .15s;
}
.repo-item:hover .repo-arrow{
  color:var(--md-sys-color-primary);transform:translateX(3px);
}

.footer{
  margin-top:48px;padding-top:24px;
  border-top:1px solid var(--md-sys-color-outline-variant);
  font-size:12px;color:var(--md-sys-color-on-surface-variant);
}

.fab{
  position:fixed;bottom:120px;right:0;
  width:96px;height:72px;
  border-radius:20px 0 0 20px;
  background:var(--md-sys-color-surface-container-high);
  border:1px solid var(--md-sys-color-outline-variant);
  border-right:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:999;
  transition:width .3s cubic-bezier(.34,1.56,.64,1),
    background .25s, border-color .25s, box-shadow .3s;
  box-shadow:-8px 0 24px rgba(0,0,0,.5);
  overflow:visible;
  text-decoration:none;
}
.fab::after{
  content:'';position:absolute;top:0;right:-14px;width:14px;height:100%;
  background:
    radial-gradient(circle at 100% 0%, transparent 14px, var(--md-sys-color-surface-container-high) 14px) top right / 100% 50% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 14px, var(--md-sys-color-surface-container-high) 14px) bottom right / 100% 50% no-repeat;
  pointer-events:none;transition:background .25s;
}
.fab:hover,.fab:focus-visible{
  width:118px;border-color:var(--md-sys-color-primary);
  box-shadow:-8px 0 32px rgba(208,188,255,.35);
  outline:none;
}
.fab:active{width:108px;}
.fab-inner{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  position:relative;
}
.fab-loader{
  width:28px;height:28px;position:absolute;
  animation:fabSpin 1.2s linear infinite;
}
.fab-loader svg{width:100%;height:100%;display:block;}
@keyframes fabSpin{to{transform:rotate(360deg);}}
.fab-icon{
  width:26px;height:26px;stroke:var(--md-sys-color-primary);
  fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:scale(.6);
  transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  position:absolute;
}
.fab.ready .fab-loader{
  opacity:0;transform:scale(.6);
  transition:opacity .25s,transform .25s;animation:none;
}
.fab.ready .fab-icon{opacity:1;transform:scale(1);}
.fab.ready{
  border-color:var(--md-sys-color-primary);
  background:var(--md-sys-color-surface-container-highest);
}
.fab.ready::after{
  background:
    radial-gradient(circle at 100% 0%, transparent 14px, var(--md-sys-color-surface-container-highest) 14px) top right / 100% 50% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 14px, var(--md-sys-color-surface-container-highest) 14px) bottom right / 100% 50% no-repeat;
}
.fab-tip{
  position:absolute;right:calc(100% + 22px);top:50%;
  transform:translateY(-50%) translateX(6px);
  background:var(--md-sys-color-surface-container-high);
  border:1px solid var(--md-sys-color-outline-variant);
  color:var(--md-sys-color-on-surface-variant);
  font-size:12px;font-weight:500;
  padding:6px 12px;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;
}
.fab.ready:hover .fab-tip,
.fab.ready:focus-visible .fab-tip{
  opacity:1;transform:translateY(-50%) translateX(0);
}

@media (max-width: 1024px) and (min-width: 769px){
  body{min-width:0;overflow:auto;height:auto;}
  .page{min-width:0;height:auto;display:block;}

  .sidebar{
    width:100%;min-width:0;height:auto;
    padding:32px 28px 24px;
    border-right:none;
    border-bottom:1px solid var(--md-sys-color-outline-variant);
    flex-direction:row;
    align-items:center;
    gap:28px;
    overflow:visible;
  }
  .sidebar-top{
    flex-direction:row;
    align-items:center;
    gap:24px;
    flex:1;
  }
  .profile-photo-wrap{width:110px;height:110px;margin-bottom:0;}
  .sidebar-name{font-size:19px;}
  .sidebar-role{font-size:12px;}
  .sidebar-bottom{
    border-top:none;
    border-left:1px solid var(--md-sys-color-outline-variant);
    padding-top:0;
    padding-left:24px;
    min-width:180px;
  }

  .main{height:auto;overflow:visible;padding:40px 32px 64px;}
  .section{margin-bottom:48px;}
  .fab{bottom:80px;}
}

@media (max-width: 768px){
  html{height:auto;}
  body{height:auto;min-width:0;overflow:auto;font-size:14px;}
  .page{display:block;height:auto;min-width:0;}

  .sidebar{
    width:100%;min-width:0;height:auto;position:static;
    padding:28px 20px 20px;border-right:none;
    border-bottom:1px solid var(--md-sys-color-outline-variant);
    display:block;overflow:visible;
  }
  .sidebar-top{display:flex;flex-direction:column;align-items:flex-start;}

  .profile-photo-wrap{width:140px;height:140px;margin-bottom:18px;}

  .sidebar-name{font-size:20px;margin-bottom:4px;}
  .sidebar-role{font-size:12px;margin-bottom:5px;}
  .sidebar-location{font-size:12px;}
  .sidebar-bottom{margin-top:20px;padding-top:16px;border-top:1px solid var(--md-sys-color-outline-variant);border-left:none;padding-left:0;}
  .contact-item{padding:5px 0;font-size:12px;}
  .contact-item .material-icons-round{font-size:14px;}

  .main{height:auto;overflow:visible;padding:32px 20px 48px;}
  .section{margin-bottom:40px;}
  .section-title{font-size:12px;letter-spacing:1.5px;margin-bottom:16px;padding-bottom:10px;}
  .about-text p{font-size:14px;line-height:1.7;margin-bottom:12px;}

  .github-insights{padding:16px;border-radius:14px;min-height:auto;}
  .github-insights img{border-radius:8px;}

  .repo-item{padding:16px 18px;gap:14px;border-radius:12px;}
  .repo-name{font-size:14px;margin-bottom:3px;}
  .repo-desc{font-size:12px;}
  .repo-arrow{width:14px;height:14px;}

  .badge-grid{gap:6px;}
  .badge-grid img{height:24px;}

  .footer{margin-top:32px;padding-top:20px;font-size:11px;text-align:center;}

  .fab{bottom:80px;right:0;width:80px;height:60px;border-radius:16px 0 0 16px;}
  .fab::after{
    right:-12px;width:12px;
    background:
      radial-gradient(circle at 100% 0%, transparent 12px, var(--md-sys-color-surface-container-high) 12px) top right / 100% 50% no-repeat,
      radial-gradient(circle at 100% 100%, transparent 12px, var(--md-sys-color-surface-container-high) 12px) bottom right / 100% 50% no-repeat;
  }
  .fab:hover,.fab:focus-visible{width:96px;}
  .fab-loader{width:22px;height:22px;}
  .fab-icon{width:20px;height:20px;}
  .fab-tip{display:none;}

  #morphFramePath{stroke-width:2;}
}