/* style.css — Dark Tech theme (hijau matrix gelap #00CC55) */
:root{
  --bg:#0A0F0D;
  --card:#07110f;
  --accent:#00CC55;
  --accent-2:#006644;
  --muted:#9ef3bf;
  --text:#E6FFE6;
}

/* base */
*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'Poppins',system-ui, -apple-system;line-height:1.5}
.container{max-width:1100px;margin:0 auto;padding:1rem}

/* header / nav */
.site-header{position:fixed;top:0;left:0;width:100%;background:linear-gradient(0deg, rgba(6,17,12,0.85), rgba(6,17,12,0.6));backdrop-filter:blur(6px);z-index:40}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:0.9rem 1rem}
.brand{display:flex;gap:.5rem;align-items:baseline;font-weight:800;color:var(--text)}
.brand-initial{font-size:1rem;opacity:0.9}
.brand-name{color:var(--accent);font-size:1.25rem;letter-spacing:.06em}
.nav a{margin-left:1rem;color:var(--text);opacity:.95}
.nav a:hover{color:var(--accent);text-shadow:0 0 8px rgba(0,204,85,0.16)}
.nav-cta{padding:.45rem .8rem;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#062016;font-weight:600}

/* spacer for fixed nav */
.nav-spacer{height:64px}

/* hero */
.hero-title{font-size:2.2rem;font-weight:800}
.hero-title .accent{color:var(--accent)}
.tagline{color:var(--muted);font-weight:600;letter-spacing:.02em}

/* card & profile */
.card{background:linear-gradient(180deg, rgba(7,17,15,0.6), rgba(10,26,20,0.55));border:1px solid rgba(0,204,85,0.08);padding:1rem;border-radius:12px}
.profile-photo{width:220px;height:220px;object-fit:cover;border-radius:16px;border:2px solid rgba(0,204,85,0.08);box-shadow:0 8px 20px rgba(0,0,0,0.6)}
.profile-card{display:flex;flex-direction:column;align-items:center;justify-content:center}

/* skills */
.skill{padding:.75rem}
.skill-title{font-weight:600;margin-bottom:.4rem}
.skill-bar{height:10px;background:rgba(0,0,0,0.25);border-radius:999px;overflow:hidden}
.skill-bar > div{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 6px 18px rgba(0,204,85,0.08)}

/* portfolio */
.portfolio-item img{width:100%;height:220px;object-fit:cover;border-radius:8px;transition:transform .25s ease, box-shadow .25s ease}
.portfolio-item:hover img{transform:scale(1.04);box-shadow:0 12px 30px rgba(0,204,85,0.06);border:1px solid rgba(0,204,85,0.12)}

/* calculator */
.calc-btn{padding:.6rem;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#062016;font-weight:700}
.calc-btn.op{background:transparent;border:1px solid rgba(158,243,191,0.08);color:var(--accent)}
.calc-btn.equals{background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#062016}

/* form */
.label {display: block; color: var(--muted); font-weight: 600; margin-bottom: 0.3rem;}

.input {width: 100%; padding: 0.7rem; border-radius: 8px; background: var(--card); color: var(--text); border: 1px solid #e6e6e6; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.7); transition: 0.25s ease-in-out;}

.input:focus {
  border-color: #4cff82; /* hijau neon biar cocok tema dark tech */
  box-shadow:
    inset 0 0 4px rgba(255, 255, 255, 0.9),
    0 0 6px rgba(76, 255, 130, 0.4); /* glowing halus */
  outline: none;
}

.field-error {
  color: #ff8c8c;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  min-height: 1.1rem;
}


/* buttons */
.btn{display:inline-block;padding:.6rem 1rem;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#062016;font-weight:700;box-shadow:0 10px 30px rgba(0,204,85,0.06)}
.btn.ghost{background:transparent;border:1px solid rgba(158,243,191,0.06);color:var(--muted)}
.btn[disabled]{opacity:0.5;cursor:not-allowed}

/* small */
.small-muted{color:var(--muted);opacity:.95}
.section-title{font-size:1.5rem;font-weight:700}

/* Ratakan card foto di tengah */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Foto agar tetap center */
.profile-photo {
  display: block;
  margin: 0 auto;
  width: 180px;
  height: 180px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 0 20px #00ff7f;
  transition: 0.3s ease;
}

.profile-photo:hover {
  transform: scale(1.05);
  box-shadow: 0 0 35px #00ff7f;
}