/* ==================== GLOBAL ==================== */
* { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body { font-family:"Poppins", sans-serif; background:#e9e9e9; color:#333; }

/* ==================== NAVBAR ==================== */
.navbar {
  position: fixed; top:12px; left:50%; transform:translateX(-50%);
  width:90%; z-index:1000;
  background: rgba(255,255,255,0.18);
  border:1px solid rgba(200,200,200,0.25);
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
  backdrop-filter:blur(20px);
  border-radius:50px; padding:10px 20px;
}
.navbar-logo { height:43px; }
.navbar-brand { font-size:1.35rem; font-weight:600; color:#233ce6 !important; }
.navbar-nav { display:flex; align-items:center; gap:22px; }
.navbar-nav .nav-link {
  display:inline-flex; justify-content:center; align-items:center;
  width:90px; height:32px; border-radius:999px; border:1px solid transparent;
  color: rgba(35,60,230,0.75); font-weight:400; background-color:transparent;
  transition:all 0.3s ease;
}
.navbar-nav .nav-link:hover {
  background-color:#233ce6; color:#fff; border-color:#233ce6;
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(35,60,230,0.3);
}

/* ==================== HOME ==================== */
.home-section {
  width:100%; min-height:100vh;
  display:flex; justify-content:center; align-items:center;
  overflow:hidden;
}
.homepage-img { width:100%; height:100%; object-fit:cover; }

/* ==================== ABOUT ==================== */
.about-section { width:100%; overflow:hidden; padding:60px 0; }
.about-container { display:flex; flex-direction:column; gap:20px; }
.about-full-img { width:100%; height:auto; display:block; object-fit:cover; }

/* ==================== WORK CARD ==================== */
.work-card {
  background: rgba(255,255,255,0.15);
  backdrop-filter:blur(15px);
  border-radius:50px;
  border:1px solid rgba(255,255,255,0.3);
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
  padding:30px 40px; text-align:center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}
.work-card h3 {
  color:#233ce6; font-weight:600;
  margin-bottom:15px; font-size:1.2rem;
}

/* ==================== BUTTON ==================== */
.more-detail-btn {
  border-radius:50px; padding:8px 22px; font-weight:500;
  color:#233ce6; border:1px solid #233ce6; background-color:transparent;
  transition:all 0.3s ease; font-size:0.95rem; text-decoration:none;
}
.more-detail-btn:hover { background:#233ce6; color:#fff; }

/* ==================== CONTENT FULL WIDTH ==================== */
.content-full {
  width:100%;
  display:block;
  margin:0 auto;
}

/* ==================== PROJECT SECTIONS ==================== */
.project-section { padding:60px 15px; }

.project-container {
  display:flex; gap:50px;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;
}

.project-left { flex:1 1 300px; }
.project-left h2 {
  font-weight:bold; color:#233ce6;
  text-transform:uppercase; margin-bottom:5px;
}
.project-left p {
  margin-bottom:15px; color:#233ce6;
  font-size:0.95rem;
}

/* ==================== UPDATED BUTTON MINIMALIS ==================== */
.project-buttons { 
  display:flex; 
  flex-direction:column; 
  gap:10px; 
}

.project-buttons button.project-pill {
  padding:6px 14px;          /* lebih kecil */
  min-width:80px;            /* tidak melebar */
  max-width:120px;           /* batasi lebar */
  border-radius:30px;        /* minimalis */
  font-size:0.85rem;
  font-weight:500;
  background: rgba(35,60,230,0.12);
  color:#233ce6;
  border:1px solid #233ce6;
  cursor:pointer;
  transition: all 0.25s ease;
  text-align:center;         /* lebih rapi */
}

.project-buttons button.project-pill:hover {
  background:#233ce6;
  color:#fff;
  transform: translateY(-1px);
}

/* ==================== RIGHT VIEW AREA ==================== */
.project-right { flex:1 1 650px; text-align:center; }
.project-right .image-container {
  max-width:1050px; width:100%;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
  margin:0 auto;
}
.project-right .image-container:hover { transform: scale(1.02); }
.project-right img {
  width:100%; height:auto; display:block;
  opacity:0; transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.project-right img.show { opacity:1; transform: scale(1); }

/* Thumbnails */
.project-right .thumbnails {
  display:flex; gap:10px; justify-content:center;
  margin-top:15px; flex-wrap:wrap;
}
.project-right .thumbnails img {
  width:70px; height:70px; object-fit:cover;
  border-radius:10px;
  border:2px solid transparent;
  cursor:pointer;
  transition: transform 0.3s ease, border 0.3s ease;
}
.project-right .thumbnails img:hover,
.project-right .thumbnails img.active {
  transform:scale(1.05);
  border-color:#233ce6;
}

/* ==================== ENDING IMAGE FULL WIDTH ==================== */
.ending-section {
  width: 100%;
  margin: 0;
  padding: 0;
}
.ending-full {
  width: 100%;
  height: auto;
  display: block;
}

/* ==================== RESPONSIVE ==================== */
@media(max-width:768px){
  .project-container {
    flex-direction:column;
    align-items:center;
  }
  .project-left, .project-right {
    text-align:center;
    flex:1 1 100%;
  }
  .project-buttons button.project-pill {
    min-width:70px;
    max-width:110px;
  }
}