body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #e3f2fd, #ffffff);
}

/* LAYOUT */
.cv-container {
  display: grid;
  grid-template-columns: 30% 40% 30%;
  max-width: 1300px;
  margin: 40px auto;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* SIDEBAR MODERN */
.sidebar {
  background: linear-gradient(180deg, #1e88e5, #42a5f5);
  color: white;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* PROFILE CARD */
.profile-card {
  text-align: center;
  margin-bottom: 30px;
}

/* FOTO */
.profile-card img {
  width: 100%;
  border-radius: 15px;
  border: 3px solid rgba(255,255,255,0.6);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* NAMA */
.profile-card h1 {
  margin-top: 15px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

/* JOB */
.job {
  font-size: 12px;
  color: #e3f2fd;
  margin: 10px 0 15px;
}

/* SOCIAL */
.social {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.social span {
  background: rgba(255,255,255,0.25);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  transition: 0.3s;
}

.social span:hover {
  background: white;
  color: #1e88e5;
}

/* SECTION */
.section {
  margin-top: 25px;
}

.section h3 {
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 600;
}

/* CONTACT TEXT */
.section p {
  font-size: 12px;
  margin: 5px 0;
  color: #e3f2fd;
}

/* LANGUAGES */
.lang p {
  font-size: 12px;
  margin: 6px 0;
}

/* BAR */
.bar {
  height: 5px;
  background: rgba(255,255,255,0.3);
  border-radius: 10px;
  overflow: hidden;
}

.bar div {
  height: 100%;
  background: white;
  border-radius: 10px;
}

/* CONTENT */
.content {
  padding: 40px;
  background: white;
}

.content h2 {
  color: #1976d2;
}

.row {
  display: flex;
  margin-bottom: 15px;
  opacity: 0;
  transform: translateY(20px);
  transition: 0.5s;
}

.row.show {
  opacity: 1;
  transform: translateY(0);
}

.left { width: 40%; }
.right { width: 60%; }

/* SKILL */
.skill-row {
  margin-bottom: 10px;
}

.skill-row .bar {
  background: #e3f2fd;
}

.skill-row .bar div {
  background: linear-gradient(90deg, #2196f3, #64b5f6);
}

/* PORTFOLIO */
.portfolio {
  padding: 30px;
  background: #f9fbff;
}

.portfolio-section {
  margin-bottom: 30px;
}

.certificates {
  display: flex;
  gap: 10px;
}

.certificates img {
  width: 48%;
  border-radius: 10px;
}

/* PROJECT GRID */
.projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.projects img {
  width: 100%;
  border-radius: 10px;
  transition: 0.3s;
}

.projects img:hover {
  transform: scale(1.05);
}

/* IMAGE GLOBAL */
img {
  transition: 0.3s;
}

img:hover {
  transform: scale(1.03);
}

.content p {
  text-align: justify;
  line-height: 1.7;
  color: #555;
  font-size: 14px;
}

/* EXPERIENCE STYLE BARU */
.exp-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

/* KIRI */
.exp-left h4 {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.exp-left span {
  font-size: 11px;
  color: #999;
}

/* KANAN */
.exp-right {
  font-size: 13px;
  color: #555;
  text-align: right;
  max-width: 50%;
}

.course-item {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.course-item h4 {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.course-item span {
  font-size: 11px;
  color: #999;
}

.skill-modern {
  margin-bottom: 15px;
}

.skill-modern p {
  font-size: 13px;
  margin-bottom: 5px;
}

.skill-bar {
  height: 6px;
  background: #e3f2fd;
  border-radius: 10px;
  overflow: hidden;
}

.skill-bar div {
  height: 100%;
  background: linear-gradient(90deg, #2196f3, #64b5f6);
  border-radius: 10px;
}

.skill-bar div {
  animation: grow 1.5s ease;
}

@keyframes grow {
  from { width: 0; }
}

.btn-download {
  background: linear-gradient(90deg, #2196f3, #64b5f6);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 20px;
  font-size: 14px;
  transition: 0.3s;
}

.btn-download:hover {
  transform: scale(1.05);
}