/* Reset & dasar */
* { box-sizing: border-box; margin:0; padding:0; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background: #0f0f1c; color: #fff; line-height:1.6; }

/* Header */
header {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 20px; background: linear-gradient(135deg,#4e54c8,#8f94fb);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  text-align: center;
  animation: headerFade 2s ease-in-out;
}

header img {
  width: 160px; height:160px; border-radius:50%; border:4px solid #fff; object-fit:cover;
  margin-bottom:20px; box-shadow:0 0 20px #8f94fb;
  transition: transform 0.3s;
}
header img:hover { transform: scale(1.05) rotate(2deg); }

header h1 { font-size:2.8rem; margin-bottom:10px; color:#fff; }
header p { font-size:1.2rem; max-width:600px; }

@keyframes headerFade {
  0% { opacity:0; transform: translateY(-30px); }
  100% { opacity:1; transform: translateY(0); }
}

/* Main content */
main { max-width:900px; margin:50px auto; padding:0 20px; }

section {
  margin-bottom:50px; padding:20px; background: rgba(255,255,255,0.05);
  border-radius:15px; box-shadow:0 0 20px rgba(0,0,0,0.5); transition: transform 0.3s;
}
section:hover { transform: translateY(-5px); }

section h2 {
  font-size:2rem; margin-bottom:15px; color:#8f94fb;
  border-bottom:2px solid #4e54c8; display:inline-block; padding-bottom:5px;
}
section p { font-size:1.1rem; margin-bottom:10px; text-align:justify; }

/* Social links */
.social-links a {
  display:inline-block; margin-right:15px; text-decoration:none; color:#4e54c8;
  font-weight:bold; transition: all 0.3s;
}
.social-links a:hover { color:#8f94fb; transform: translateY(-2px); }

/* Footer */
footer { text-align:center; padding:20px; background:#111; color:#aaa; font-size:0.9rem; }

@media(max-width:600px){
  header h1 { font-size:2rem; }
  header p { font-size:1rem; }
  section h2 { font-size:1.5rem; }
}