:root{
    --bg:            #0F141B;
    --bg-alt:        #141B24;
    --surface:       #1A222D;
    --surface-2:     #212B38;
    --border:        #2B3543;
    --text:          #E9E4D8;
    --text-muted:    #8C96A5;
    --text-dim:      #5C6675;
    --amber:         #E3A857;
    --amber-dim:     #8A6A3E;
    --teal:          #5FB8B3;
    --coral:         #E37B6A;

    --font-display:  'Space Grotesk', 'Segoe UI', sans-serif;
    --font-body:     'Inter', 'Segoe UI', sans-serif;
    --font-mono:     'JetBrains Mono', 'Consolas', monospace;

    --maxw: 1120px;
  }

  @font-face{
    font-family:'Space Grotesk';
    src: local('Space Grotesk');
  }

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

  html{ scroll-behavior:smooth; }

  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* subtle grid texture on background */
  body::before{
    content:'';
    position:fixed; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events:none;
    z-index:0;
  }

  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }

  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:1; }

  ::selection{ background:var(--amber); color:#12161c; }

  /* focus visibility for accessibility */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--teal);
    outline-offset:3px;
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.06em;
    color:var(--teal);
    display:flex; align-items:center; gap:10px;
    margin-bottom:14px;
  }
  .eyebrow::before{
    content:'//';
    color:var(--text-dim);
  }

  h1,h2,h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; }

  /* ============ NAVBAR ============ */
  header.site-nav{
    position:sticky; top:0; z-index:50;
    background:rgba(15,20,27,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 28px;
    max-width:var(--maxw); margin:0 auto;
  }
  .logo{
    font-family:var(--font-mono);
    font-size:1rem;
    color:var(--text);
    display:flex; align-items:center; gap:8px;
  }
  .logo .dot{ color:var(--amber); }
  .nav-links{ display:flex; gap:32px; font-family:var(--font-mono); font-size:0.85rem; }
  .nav-links a{
    color:var(--text-muted);
    position:relative;
    padding:4px 0;
    transition:color .2s ease;
  }
  .nav-links a:hover{ color:var(--text); }
  .nav-links a::after{
    content:'';
    position:absolute; left:0; bottom:-4px;
    width:0; height:1px; background:var(--amber);
    transition:width .25s ease;
  }
  .nav-links a:hover::after{ width:100%; }
  .nav-cta{
    font-family:var(--font-mono);
    font-size:0.82rem;
    border:1px solid var(--amber-dim);
    color:var(--amber);
    padding:8px 16px;
    border-radius:6px;
    transition:all .2s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{ background:var(--amber); color:#12161c; border-color:var(--amber); }
  .nav-toggle{ display:none; }

  /* ============ HERO — code editor window ============ */
  .hero{
    padding:96px 0 80px;
    position:relative;
  }
  .hero-grid{
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap:56px;
    align-items:center;
  }
  .hero-title{
    font-size:clamp(2.2rem, 4.4vw, 3.4rem);
    line-height:1.12;
    margin-bottom:20px;
  }
  .hero-title .accent{ color:var(--amber); }
  .hero-lede{
    color:var(--text-muted);
    font-size:1.05rem;
    max-width:46ch;
    margin-bottom:32px;
  }
  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }
  .btn{
    font-family:var(--font-mono);
    font-size:0.88rem;
    padding:13px 22px;
    border-radius:7px;
    display:inline-flex; align-items:center; gap:8px;
    transition:all .2s ease;
    border:1px solid transparent;
  }
  .btn-primary{ background:var(--amber); color:#12161c; }
  .btn-primary:hover{ background:#f0b96e; transform:translateY(-1px); }
  .btn-ghost{ border-color:var(--border); color:var(--text); }
  .btn-ghost:hover{ border-color:var(--teal); color:var(--teal); }

  .hero-status{
    display:flex; align-items:center; gap:9px;
    font-family:var(--font-mono);
    font-size:0.82rem;
    color:var(--text-muted);
  }
  .pulse-dot{
    width:8px; height:8px; border-radius:50%;
    background:#59c26b;
    box-shadow:0 0 0 0 rgba(89,194,107,0.6);
    animation:pulse 2s infinite;
  }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(89,194,107,0.55); }
    70%{ box-shadow:0 0 0 8px rgba(89,194,107,0); }
    100%{ box-shadow:0 0 0 0 rgba(89,194,107,0); }
  }

  /* editor window mock */
  .editor{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
  }
  .editor-bar{
    display:flex; align-items:center; gap:8px;
    padding:12px 16px;
    background:var(--surface-2);
    border-bottom:1px solid var(--border);
  }
  .editor-bar span{ width:11px; height:11px; border-radius:50%; }
  .editor-bar span:nth-child(1){ background:#e0605a; }
  .editor-bar span:nth-child(2){ background:#e3b34f; }
  .editor-bar span:nth-child(3){ background:#59c26b; }
  .editor-filename{
    margin-left:8px;
    font-family:var(--font-mono);
    font-size:0.78rem;
    color:var(--text-dim);
  }
  .editor-body{
    padding:22px 20px;
    font-family:var(--font-mono);
    font-size:0.86rem;
    line-height:1.85;
  }
  .editor-body .ln{ color:var(--text-dim); display:inline-block; width:22px; user-select:none; }
  .editor-body .key{ color:var(--coral); }
  .editor-body .str{ color:var(--teal); }
  .editor-body .prop{ color:var(--amber); }
  .editor-body .com{ color:var(--text-dim); font-style:italic; }

  /* ============ SECTION SHELL ============ */
  section{ padding:88px 0; position:relative; }
  .section-head{ margin-bottom:48px; max-width:60ch; }
  .section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); }
  .divider{ border-top:1px solid var(--border); }

  /* ============ ABOUT ============ */
  .about-grid{
    display:grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap:56px;
    align-items:start;
  }
  .about-photo{
    aspect-ratio:4/5;
    background:
      repeating-linear-gradient(135deg, var(--surface-2) 0 12px, var(--surface) 12px 24px);
    border:1px solid var(--border);
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono);
    font-size:0.78rem;
    color:var(--text-dim);
    text-align:center;
    padding:20px;
  }
  .about-text p{ color:var(--text-muted); margin-bottom:16px; max-width:62ch; }
  .about-stats{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:20px; margin-top:32px;
  }
  .stat{
    border-left:2px solid var(--amber-dim);
    padding-left:14px;
  }
  .stat b{
    display:block;
    font-family:var(--font-display);
    font-size:1.7rem;
    color:var(--text);
  }
  .stat span{ font-size:0.82rem; color:var(--text-dim); }

  /* ============ SKILLS — IDE sidebar / file-type cards ============ */
  .skills-panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
  }
  .skills-panel-bar{
    padding:12px 18px;
    background:var(--surface-2);
    border-bottom:1px solid var(--border);
    font-family:var(--font-mono);
    font-size:0.78rem;
    color:var(--text-dim);
    display:flex; justify-content:space-between;
  }
  .skills-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:1px;
    background:var(--border);
  }
  .skill-card{
    background:var(--surface);
    padding:30px 18px 24px;
    display:flex; flex-direction:column; align-items:center; gap:14px;
    text-align:center;
    transition:background .25s ease, transform .25s ease;
  }
  .skill-card:hover{ background:var(--surface-2); transform:translateY(-3px); }
  .skill-icon{ width:52px; height:52px; }
  .skill-name{ font-family:var(--font-mono); font-size:0.86rem; color:var(--text); }
  .skill-tag{
    font-family:var(--font-mono);
    font-size:0.68rem;
    color:var(--text-dim);
    background:var(--bg-alt);
    border:1px solid var(--border);
    padding:2px 8px;
    border-radius:20px;
  }

  /* ============ PROJECTS ============ */
  .projects-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .project-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    display:flex; flex-direction:column;
    transition:border-color .2s ease, transform .2s ease;
  }
  .project-card:hover{ border-color:var(--teal); transform:translateY(-4px); }
  .project-thumb{
    aspect-ratio:16/10;
    background:linear-gradient(135deg, var(--surface-2), var(--bg-alt));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:0.75rem; color:var(--text-dim);
    border-bottom:1px solid var(--border);
  }
  .project-body{ padding:20px; flex:1; display:flex; flex-direction:column; gap:10px; }
  .project-body h3{ font-size:1.05rem; }
  .project-body p{ color:var(--text-muted); font-size:0.9rem; }
  .project-stack{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:10px; }
  .project-stack span{
    font-family:var(--font-mono); font-size:0.68rem;
    color:var(--teal); border:1px solid var(--border);
    padding:3px 8px; border-radius:20px;
  }
  .project-link{
    font-family:var(--font-mono); font-size:0.8rem; color:var(--amber);
    display:inline-flex; align-items:center; gap:6px;
  }

  /* ============ COLLABORATION / CTA (untuk kerja sama perusahaan) ============ */
  .collab{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:56px;
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:40px;
    align-items:center;
    position:relative;
    overflow:hidden;
  }
  .collab::after{
    content:'';
    position:absolute; right:-60px; top:-60px;
    width:220px; height:220px;
    background:radial-gradient(circle, rgba(227,168,87,0.14), transparent 70%);
  }
  .collab h2{ font-size:clamp(1.5rem,2.8vw,2rem); margin-bottom:14px; }
  .collab p{ color:var(--text-muted); max-width:52ch; }
  .collab-list{ display:flex; flex-direction:column; gap:14px; }
  .collab-list li{
    font-family:var(--font-mono); font-size:0.85rem;
    display:flex; align-items:center; gap:10px;
    color:var(--text-muted);
  }
  .collab-list li::before{ content:'▸'; color:var(--amber); }

  /* ============ CONTACT ============ */
  .contact-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:56px;
  }
  .contact-info h2{ margin-bottom:16px; }
  .contact-info p{ color:var(--text-muted); margin-bottom:28px; max-width:44ch; }
  .contact-channels{ display:flex; flex-direction:column; gap:16px; }
  .contact-channels a{
    font-family:var(--font-mono); font-size:0.92rem;
    display:flex; align-items:center; gap:12px;
    color:var(--text); padding:10px 0;
    border-bottom:1px solid var(--border);
    transition:color .2s ease, padding-left .2s ease;
  }
  .contact-channels a:hover{ color:var(--amber); padding-left:6px; }
  .contact-channels small{ color:var(--text-dim); display:block; font-family:var(--font-body); }

  form.contact-form{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    padding:28px;
    display:flex; flex-direction:column; gap:18px;
  }
  .field{ display:flex; flex-direction:column; gap:8px; }
  .field label{
    font-family:var(--font-mono); font-size:0.76rem;
    color:var(--text-dim); letter-spacing:0.04em;
  }
  .field input, .field textarea{
    background:var(--bg-alt);
    border:1px solid var(--border);
    border-radius:6px;
    padding:12px 14px;
    color:var(--text);
    font-family:var(--font-body);
    font-size:0.92rem;
    resize:vertical;
  }
  .field input:focus, .field textarea:focus{ border-color:var(--teal); }
  .form-note{ font-family:var(--font-mono); font-size:0.72rem; color:var(--text-dim); }

  /* ============ FOOTER ============ */
  footer{
    border-top:1px solid var(--border);
    padding:32px 0;
  }
  .footer-inner{
    display:flex; justify-content:space-between; align-items:center;
    font-family:var(--font-mono); font-size:0.78rem; color:var(--text-dim);
    flex-wrap:wrap; gap:12px;
  }
  .footer-inner a{ color:var(--text-dim); }
  .footer-inner a:hover{ color:var(--amber); }
  .footer-socials{ display:flex; gap:18px; }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 900px){
    .hero-grid, .about-grid, .contact-grid{ grid-template-columns:1fr; }
    .about-photo{ max-width:280px; aspect-ratio:4/5; }
    .skills-grid{ grid-template-columns:repeat(3,1fr); }
    .projects-grid{ grid-template-columns:1fr 1fr; }
    .collab{ grid-template-columns:1fr; padding:36px; }
  }
  @media (max-width: 640px){
    .nav-links{ display:none; }
    .skills-grid{ grid-template-columns:repeat(2,1fr); }
    .projects-grid{ grid-template-columns:1fr; }
    section{ padding:64px 0; }
    .about-stats{ grid-template-columns:1fr; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .pulse-dot{ animation:none; }
    *{ transition:none !important; }
  }