:root{
  --bg-color: #bbbbbd;
  --surface-color: #030f32;
  --accent-color: #b3b1bc;
  --accent-color-2: #4f504c;
  --text-muted: #94a3a1;
  --card-radius: 14px;
}

.tabel-pendidikan {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 16px;
}

.tabel-pendidikan th {
  background: #2a2a54;
  color: rgb(255, 255, 255);
  padding: 12px;
  text-align: left;
}

.tabel-pendidikan td {
  padding: 12px;
  border-bottom: 1px solid #2c2b34;
}

.tabel-pendidikan tr:hover {
  background: #03001b;
  transition: 0.2s;
}

/* Reset body */
html,body{
  height:100%;
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #0e1133 0%, #091430 100%);
  color: #e6f4ef;
}

/* Navbar */
.custom-navbar{
  background: rgba(11, 9, 60, 0.95);
  transition: background .25s, box-shadow .25s;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.02);
}
.logo-icon{ font-weight:700; color:var(--accent-color); }
.logo-text{ color: #fff; font-weight:500; }

/* Particles bg (simple shapes) */
.particles-bg{
  position: fixed; inset:0; z-index: -1; overflow:hidden;
}
.particle{
  position:absolute; border-radius:50%; opacity:.06;
}
.p1{ width:420px; height:420px; background:var(--accent-color); top:-80px; left:-80px; transform:rotate(15deg); }
.p2{ width:300px; height:300px; background:var(--accent-color-2); top:80px; right:-60px; }
.p3{ width:220px; height:220px; background:var(--accent-color); bottom:40px; left:20%; }
.p4{ width:160px; height:160px; background:#0fb995; bottom:120px; right:18%; }
.p5{ width:100px; height:100px; background:#7feaaa; top:40%; left:70%; }

/* Hero */
.hero-section{ padding-top:120px; padding-bottom:120px; text-align:center; }
.gradient-text{ background:linear-gradient(90deg,var(--accent-color),var(--accent-color-2)); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }
.text-secondary-custom{ color:var(--text-muted); }
.accent-text{ color:var(--accent-color); }

/* Cards */
.card{ background: rgba(255,255,255,0.02); border-radius: var(--card-radius); }
.card .card-body{ padding:1.25rem; }

/* Profile image */
.profile-img{ width:160px; height:160px; object-fit:cover; }

/* Badges */
.bg-accent{ background: linear-gradient(90deg,var(--accent-color),var(--accent-color-2)); color:#062018; }

/* Footer */
.footer-section{ background: rgba(0,0,0,0.12); padding-top: 4rem; color:var(--text-muted); }

/* Portfolio cards */

.portfolio-card{ overflow:hidden; border-radius: 12px; }
.card-img-wrapper{ position:relative; overflow:hidden; border-radius:12px; }
.card-img-top{ display:block; width:100%; height:220px; object-fit:cover; }
.card-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:all .25s; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,18,14,0.6) 100%); color:#fff; }
.card-img-wrapper:hover .card-overlay{ opacity:1; transform: translateY(0); }

/* Contact cards */
.contact-form-card, .contact-info-card{ border-radius: 14px; }

/* Footer link */
.footer-link{ color:var(--text-muted); text-decoration:none; }
.footer-link:hover{ color:var(--accent-color); }

/* small helpers */
.text-accent{ color:var(--accent-color); }
.text-white{ color:#fff; }

/* Responsive tweaks */
@media (max-width: 991px){
  .hero-section{ padding-top: 140px; padding-bottom:80px; }
  .card-img-top{ height:180px; }
}

/* Buttons / social icon hover */
.social-icon{ color: #cfeee3; }
.social-icon:hover{ color: var(--accent-color); transform: translateY(-3px); transition: .2s; }

/* forms */
.was-validated .form-control:invalid{ border-color: #dc3545; box-shadow:none; }
.was-validated .form-control:valid{ border-color: #198754; box-shadow:none; }

/* small adjustments for modal bg */
.bg-surface{ background: rgba(8,18,14,0.9); }

/* subtle shadow for cards */
.card{ box-shadow: 0 6px 24px rgba(0,0,0,0.35); }

/* status dot */
.status-dot{ width:10px; height:10px; border-radius:50%; background: #0f9; display:inline-block; }

/* footer small text */
.text-secondary-custom{ color: #9fb6a9; }