header{border-bottom:1px solid var(--line, #ECE9F5);position:sticky;top:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(6px);z-index:40;}

.header-inner{
  max-width:1152px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;
  position:relative;
}

.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo img{height:36px;width:auto;display:block;}
.logo-text{font-weight:800;font-size:1.15rem;color:#1F2430;white-space:nowrap;}

/* Hamburger button */
.menu-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;background:none;border:none;cursor:pointer;
  padding:0;flex-shrink:0;
}
.menu-toggle span{display:block;width:22px;height:2px;background:#1F2430;border-radius:2px;transition:transform .2s,opacity .2s;}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Desktop nav */
.main-nav{display:flex;align-items:center;gap:20px;}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.nav-links li{display:flex;align-items:center;}
.nav-links a{display:block;padding:10px 14px;font-weight:600;font-size:0.95rem;color:#4B5563;border-radius:8px;white-space:nowrap;transition:color .15s,background .15s;}
.nav-links a:hover{color:#1F2430;background:#F5F3FF;}
.nav-links .mobile-only{display:none;}
.nav-links .cta-link{font-weight:800;color:#D9631F;}
.nav-icons{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.nav-icons a{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#6B7280;transition:background .15s,color .15s;}
.nav-icons a:hover{background:#F5F3FF;color:#7C3AED;}

/* Mobile */
@media (max-width:900px){
  .menu-toggle{display:flex;}
  .main-nav{
    display:none;flex-direction:column;align-items:stretch;gap:4px;
    position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid #ECE9F5;padding:8px 24px 20px;
    box-shadow:0 12px 24px -12px rgba(0,0,0,0.15);
  }
  .main-nav.open{display:flex;}
  .nav-links{flex-direction:column;align-items:stretch;gap:0;width:100%;}
  .nav-links a{padding:14px 4px;border-radius:0;border-bottom:1px solid #F3F0FA;}
  .nav-links .mobile-only{display:block;}
  .nav-icons{margin-top:12px;justify-content:flex-start;gap:8px;}
}

footer.site-footer{border-top:1px solid #ECE9F5;text-align:center;padding:36px 24px;}
footer.site-footer p{margin:4px 0;font-size:0.88rem;color:#6B7280;}
footer.site-footer .copy{margin-top:18px;font-size:0.8rem;color:#7C3AED;font-weight:600;}
.site-footer {
  text-align: center;
  padding: 30px 15px;
}

.footer-socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 15px 0;
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05); /* Latar belakang lingkaran halus */
  color: inherit;
  transition: transform 0.2s, background 0.2s;
}

.footer-socials a:hover {
  transform: translateY(-3px);
  background: rgba(0, 0, 0, 0.12);
}