@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

  :root{
    --bg: #0e1512;
    --bg-2: #131c18;
    --panel: #17211c;
    --line: #263a30;
    --green: #6bffb0;
    --lime: #b8ff5c;
    --text: #e9f5ee;
    --muted: #93a89d;
  }

  *{ box-sizing: border-box; margin:0; padding:0; }

  html{ scroll-behavior: smooth; }

  body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
  }

  body::before{
    content:"";
    position: fixed; inset:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
  }

  .wrap{ max-width: 920px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

  /* ---------- NAV ---------- */
  nav{
    display:flex; justify-content: space-between; align-items:center;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
  }
  .logo{
    font-family:'JetBrains Mono', monospace;
    font-weight:700; font-size: 15px; letter-spacing: 1px;
    color: var(--green);
  }
  .logo span{ color: var(--muted); }
  .status{
    font-family:'JetBrains Mono', monospace;
    font-size: 12px; color: var(--muted);
    display:flex; align-items:center; gap:8px;
  }
  .nav-links{ display:flex; gap:22px; }
  .nav-links a{
    font-family:'JetBrains Mono', monospace;
    font-size: 12px; color: var(--muted);
    text-decoration:none;
    text-transform: uppercase; letter-spacing: 1px;
    transition: color .2s;
  }
  .nav-links a:hover{ color: var(--green); }
  @media (max-width: 640px){ .nav-links{ display:none; } }
  .dot{
    width:7px; height:7px; border-radius:50%;
    background: var(--lime);
    box-shadow: 0 0 8px var(--lime);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }

  /* ---------- HERO ---------- */
  .hero{
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items:center;
    padding: 56px 0 48px;
    border-bottom: 1px solid var(--line);
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size: 12px; color: var(--green);
    letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 18px;
    opacity:0; animation: fadeUp .6s ease forwards .1s;
  }
  h1{
    font-size: clamp(2.4rem, 7vw, 4.2rem);
    font-weight: 700; line-height: 0.98;
    letter-spacing: -0.02em;
    opacity:0; animation: fadeUp .6s ease forwards .25s;
  }
  h1 .accent{ color: var(--green); }
  .nickname-tag{
    font-family:'JetBrains Mono', monospace;
    font-size: 14px; color: var(--muted);
    margin-top: 16px;
    opacity:0; animation: fadeUp .6s ease forwards .4s;
  }
  .nickname-tag b{ color: var(--lime); }
  .hero-desc{
    margin-top: 18px; color: var(--muted); font-size: 15px; max-width: 46ch;
    opacity:0; animation: fadeUp .6s ease forwards .5s;
  }

  @keyframes fadeUp{
    from{ opacity:0; transform: translateY(14px); }
    to{ opacity:1; transform: translateY(0); }
  }

  .photo-frame{
    position:relative;
    aspect-ratio: 3/4;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow:hidden;
    background: var(--panel);
    opacity:0; animation: fadeUp .7s ease forwards .3s;
  }
  .photo-frame img{
    width:100%; height:100%; object-fit: cover;
    filter: saturate(0.92) contrast(1.03);
  }
  .photo-frame::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 60%, rgba(14,21,18,0.85) 100%);
  }
  .photo-tag{
    position:absolute; bottom:12px; left:12px; z-index:2;
    font-family:'JetBrains Mono', monospace;
    font-size: 11px; color: var(--lime);
    border: 1px solid var(--green);
    padding: 3px 8px; border-radius: 3px;
    background: rgba(14,21,18,0.7);
  }
  .corner{
    position:absolute; width:14px; height:14px;
    border-color: var(--green); z-index:2;
  }
  .corner.tl{ top:8px; left:8px; border-top:2px solid; border-left:2px solid; }
  .corner.tr{ top:8px; right:8px; border-top:2px solid; border-right:2px solid; }

  /* ---------- SECTION LABEL ---------- */
  .section{ padding: 46px 0; border-bottom: 1px solid var(--line); }
  .section-label{
    font-family:'JetBrains Mono', monospace;
    font-size: 12px; color: var(--muted);
    letter-spacing: 1.5px; text-transform: uppercase;
    display:flex; align-items:center; gap: 10px;
    margin-bottom: 28px;
  }
  .section-label::before{
    content:"//"; color: var(--green);
  }

  /* ---------- INFO GRID (biodata) ---------- */
  .biodata{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow:hidden;
  }
  .field{
    padding: 20px 22px;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  .field:nth-child(2n){ border-right:none; }
  .field-key{
    font-family:'JetBrains Mono', monospace;
    font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 6px;
  }
  .field-value{ font-size: 17px; font-weight: 600; }
  .field-value.mono{ font-family:'JetBrains Mono', monospace; font-size:15px; color:var(--green); }

  @media (max-width: 640px){
    .biodata{ grid-template-columns: 1fr; }
    .field{ border-right:none; }
    .hero{ grid-template-columns: 1fr; padding-top: 36px; }
    .photo-frame{ max-width: 280px; margin: 0 auto; order:-1; }
  }

  /* ---------- ABOUT / MINAT ---------- */
  .about-text{ color: var(--muted); font-size: 15.5px; max-width: 62ch; margin-bottom: 26px; }
  .about-text b{ color: var(--text); }

  .tags{ display:flex; flex-wrap:wrap; gap: 10px; }
  .tag{
    font-family:'JetBrains Mono', monospace;
    font-size: 12.5px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--text);
    background: var(--panel);
    transition: border-color .2s, color .2s;
  }
  .tag:hover{ border-color: var(--green); color: var(--green); }

  /* ---------- CONTACT BUTTON ---------- */
  .contact-row{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
  .btn{
    font-family:'JetBrains Mono', monospace;
    font-size: 13px; font-weight: 600;
    padding: 12px 20px; border-radius: 4px;
    text-decoration:none;
    display:inline-flex; align-items:center; gap:8px;
    transition: transform .15s, box-shadow .15s;
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn-primary{
    background: var(--green); color: #08130d;
    box-shadow: 0 0 0 rgba(107,255,176,0);
  }
  .btn-primary:hover{ box-shadow: 0 6px 24px rgba(107,255,176,0.25); }
  .btn-ghost{
    border: 1px solid var(--line); color: var(--text);
  }
  .btn-ghost:hover{ border-color: var(--green); color: var(--green); }

  /* ---------- TIMELINE ---------- */
  .timeline{ position:relative; padding-left: 28px; }
  .timeline::before{
    content:""; position:absolute; left: 5px; top:6px; bottom:6px;
    width: 1px; background: var(--line);
  }
  .t-item{ position:relative; padding-bottom: 28px; }
  .t-item:last-child{ padding-bottom:0; }
  .t-item::before{
    content:""; position:absolute; left:-28px; top:4px;
    width:10px; height:10px; border-radius:50%;
    background: var(--bg); border: 2px solid var(--green);
  }
  .t-year{
    font-family:'JetBrains Mono', monospace; font-size:12px;
    color: var(--lime); margin-bottom: 4px;
  }
  .t-title{ font-weight:600; font-size:16px; margin-bottom:4px; }
  .t-desc{ color: var(--muted); font-size: 14px; max-width: 56ch; }

  /* ---------- PORTFOLIO CARD ---------- */
  .port-card{
    display:flex; justify-content: space-between; align-items:center;
    gap: 16px; flex-wrap: wrap;
    border: 1px solid var(--line); border-radius: 4px;
    padding: 22px; background: var(--panel);
    transition: border-color .2s;
  }
  .port-card:hover{ border-color: var(--green); }
  .port-card-title{ font-weight:700; font-size: 18px; margin-bottom:6px; }
  .port-card-desc{ color: var(--muted); font-size: 14px; max-width: 46ch; }
  .port-arrow{
    font-family:'JetBrains Mono', monospace; color: var(--green);
    font-size: 20px; flex-shrink:0;
  }

  /* ---------- CONTACT GRID ---------- */
  .contact-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  @media (max-width: 640px){ .contact-grid{ grid-template-columns: 1fr; } }
  .contact-card{
    display:flex; align-items:center; gap: 14px;
    border: 1px solid var(--line); border-radius: 4px;
    padding: 18px; background: var(--panel);
    text-decoration:none; color: var(--text);
    transition: border-color .2s, transform .15s;
  }
  .contact-card:hover{ border-color: var(--green); transform: translateY(-2px); }
  .contact-icon{
    width: 38px; height:38px; border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    background: var(--bg); border: 1px solid var(--line);
    font-size: 16px; flex-shrink:0;
  }
  .contact-label{ font-size: 11px; color: var(--muted); text-transform:uppercase; letter-spacing:1px; font-family:'JetBrains Mono', monospace; }
  .contact-value{ font-size: 14px; font-weight:600; word-break: break-all; }

  /* ---------- SCROLL TOP ---------- */
  .scroll-top{
    position: fixed; right: 20px; bottom: 20px;
    width: 44px; height:44px; border-radius: 50%;
    background: var(--panel); border: 1px solid var(--line);
    color: var(--green); font-size: 18px;
    display:flex; align-items:center; justify-content:center;
    text-decoration:none;
    opacity:0; pointer-events:none;
    transition: opacity .25s, border-color .2s;
    z-index: 5;
  }
  .scroll-top.show{ opacity:1; pointer-events:auto; }
  .scroll-top:hover{ border-color: var(--green); }

  /* ---------- LOADING SCREEN ---------- */
  #loadingScreen{
    position: fixed; inset:0; z-index:100;
    background: var(--bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap: 16px;
    transition: opacity .5s ease, visibility .5s ease;
  }
  #loadingScreen.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .load-logo{
    font-family:'JetBrains Mono', monospace; font-size: 20px;
    color: var(--green); letter-spacing: 3px;
  }
  .load-bar{
    width: 160px; height: 3px; background: var(--line);
    border-radius: 2px; overflow:hidden;
  }
  .load-bar-fill{
    height:100%; width:0%; background: var(--green);
    animation: loadFill 1.1s ease forwards;
  }
  @keyframes loadFill{ to{ width:100%; } }

  /* ---------- CANVAS PARTICLES ---------- */
  #particleCanvas{
    position: fixed; inset:0; z-index:0;
    pointer-events:none;
  }

  /* ---------- UTILITY BAR (lang / sound) ---------- */
  .util-bar{
    display:flex; align-items:center; gap: 10px;
  }
  .util-btn{
    font-family:'JetBrains Mono', monospace;
    font-size: 11px; color: var(--muted);
    border: 1px solid var(--line); border-radius: 3px;
    padding: 5px 9px; background: transparent;
    cursor: pointer; transition: border-color .2s, color .2s;
  }
  .util-btn:hover{ border-color: var(--green); color: var(--green); }
  .util-btn.active{ color: var(--green); border-color: var(--green); }

  /* ---------- VISITOR COUNTER ---------- */
  .visitor-counter{
    font-family:'JetBrains Mono', monospace; font-size: 12px; color: var(--muted);
  }
  .visitor-counter b{ color: var(--lime); }

  /* ---------- SHARE CARD ---------- */
  .share-btn-row{ display:flex; justify-content:center; margin-top: 10px; }
  #shareCardCanvas{ display:none; }
  .share-preview{
    max-width: 320px; width:100%; border-radius: 6px; border:1px solid var(--line);
    margin-bottom: 14px; display:block;
  }
  .share-download{
    font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:600;
    padding: 10px 18px; border-radius:4px; border:none; cursor:pointer;
    background: var(--green); color:#08130d;
  }

  /* ---------- EASTER EGG ---------- */
  .easter-egg-overlay{
    position: fixed; inset:0; z-index: 200;
    background: rgba(14,21,18,0.92);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition: opacity .3s;
  }
  .easter-egg-overlay.show{ opacity:1; pointer-events:auto; }
  .easter-egg-box{
    text-align:center; font-family:'JetBrains Mono', monospace;
    color: var(--lime); font-size: 18px; padding: 30px;
    border: 1px solid var(--green); border-radius: 8px;
    animation: eggPop .4s ease;
  }
  @keyframes eggPop{ from{ transform: scale(.8); opacity:0; } to{ transform: scale(1); opacity:1; } }

  /* ---------- PRINT ---------- */
  @media print{
    body::before, .scroll-top, .contact-row, .util-bar, #loadingScreen,
    #particleCanvas, .share-btn-row, .easter-egg-overlay{ display:none !important; }
    body{ background: white; color: black; }
    .section{ border-color: #ccc; }
    .field, .contact-card, .port-card{ border-color: #ccc !important; background: white !important; }
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding: 34px 0 48px;
    display:flex; justify-content: space-between; align-items:center;
    font-family:'JetBrains Mono', monospace; font-size:12px; color: var(--muted);
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition:none !important; }
  }

  a:focus-visible, .tag:focus-visible{ outline: 2px solid var(--lime); outline-offset: 2px; }