/* ==========================================
   MODERN NAV - Fresh & Contemporary Design
========================================== */
nav{
  position:fixed; 
  top:20px; 
  left:50%; 
  transform:translateX(-50%);
  z-index:1000;
  width:calc(100% - 40px);
  max-width:1400px;
  height:var(--nav-height);
  
  background:#ffffff;  /* Ubah dari rgba(255,255,255,.85) ke solid white */
  border:1px solid rgba(226,232,240,.6);
  border-radius:24px;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  
  box-shadow:0 8px 32px rgba(2,6,23,.08), 
             0 1px 4px rgba(2,6,23,.04),
             inset 0 1px 0 rgba(255,255,255,.9);
  
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
}

nav.scrolled{
  top:10px;
  height:70px;
  background:#ffffff;  /* Ubah dari rgba(255,255,255,.95) ke solid white */
  box-shadow:0 12px 40px rgba(2,6,23,.12), 
             0 2px 8px rgba(2,6,23,.06),
             inset 0 1px 0 rgba(255,255,255,.95);
}


    .nav-container{
      max-width:100%;
      margin:0 auto;
      width:100%;
      height:100%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:0 32px;
      gap:24px;
    }

    /* Modern Logo Design */
    .logo{
      display:flex; 
      align-items:center; 
      gap:14px;
      text-decoration:none;
      flex-shrink:0;
      transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index:1001;
      position:relative;
    }
    
    .logo:hover::after{width:100%}
    .logo:hover{transform:translateY(-2px)}
    
    .logo-img{
      height:48px; 
      width:auto; 
      object-fit:contain; 
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
      filter:drop-shadow(0 2px 8px rgba(26,95,122,.15));
    }
    
    nav.scrolled .logo-img{height:42px}

  .logo-text{
  font-size:1.5rem;
  font-weight:800;
  color:var(--primary);  /* 1 warna saja */
  letter-spacing:-.8px;
  white-space:nowrap;
  position:relative;
}


/* Sleek Navigation Menu - FIXED */
.nav-menu{
  display:flex;
  align-items:center;
  gap:0;  /* Hilangkan gap antar link */
  list-style:none;
  margin:0;
  padding:0;  /* Hilangkan padding container */
  border-radius:16px;
  background:transparent;  /* Hilangkan background container */
  border:none;  /* Hilangkan border container */
  box-shadow:none;  /* Hilangkan shadow container */
}

.nav-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text-muted);
  font-weight:600;
  font-size:.95rem;
  padding:12px 20px 12px 20px;  /* Padding simetris */
  border-radius:12px;
  margin:0 2px;  /* Spacing antar link */
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}

   
    .nav-link i{
      font-size:.9rem;
      transition:transform .3s ease;
    }
    
    .nav-link::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,rgba(26,95,122,.1),rgba(244,162,97,.1));
      opacity:0;
      transition:opacity .3s ease;
      border-radius:12px;
    }
    
    .nav-link:hover{
      color:var(--primary);
      background:rgba(255,255,255,.9);
      box-shadow:0 4px 12px rgba(26,95,122,.12);
      transform:translateY(-1px);
    }
    
    .nav-link:hover i{
      transform:scale(1.1);
    }
    
    .nav-link:hover::before{
      opacity:1;
    }
    
    .nav-link.active{
      color:var(--surface);
      background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);
      box-shadow:0 4px 16px rgba(26,95,122,.25), 
                 inset 0 1px 0 rgba(255,255,255,.2);
      transform:none;
    }
    
    .nav-link.active::before{
      display:none;
    }

    /* Modern CTA Button */
    .nav-actions{
      display:flex; 
      gap:12px; 
      align-items:center; 
      flex-shrink:0;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:12px 24px;
      border-radius:14px;
      font-weight:700;
      font-size:.95rem;
      text-decoration:none;
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
      border:none;
      white-space:nowrap;
      cursor:pointer;
      position:relative;
      overflow:hidden;
    }
    
    .btn::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05));
      opacity:0;
      transition:opacity .3s ease;
    }
    
    .btn:hover::before{
      opacity:1;
    }

    .btn-login-primary{
      background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);
      color:#fff;
      box-shadow:0 8px 20px rgba(26,95,122,.3),
                 inset 0 1px 0 rgba(255,255,255,.2);
    }
    
    .btn-login-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 12px 28px rgba(26,95,122,.4),
                 inset 0 1px 0 rgba(255,255,255,.3);
    }
    
    .btn-login-primary:active{
      transform:translateY(0);
    }

    /* Refined Hamburger */
    .hamburger{
      display:none;
      flex-direction:column;
      cursor:pointer;
      gap:6px;
      padding:12px;
      z-index:1001;
      transition:all .3s ease;
      border-radius:14px;
      background:rgba(255,255,255,.9);
      border:1px solid rgba(226,232,240,.6);
      box-shadow:0 4px 12px rgba(2,6,23,.08);
    }
    
    .hamburger:hover{
      background:rgba(255,255,255,1);
      box-shadow:0 6px 16px rgba(2,6,23,.12);
    }
    
    .hamburger span{
      width:24px; 
      height:2.5px;
      background:var(--text-dark);
      border-radius:3px;
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
      transform-origin:center;
    }
    
    .hamburger.active span:nth-child(1){
      transform:rotate(45deg) translate(7px,7px);
    }
    
    .hamburger.active span:nth-child(2){
      opacity:0; 
      transform:scale(0);
    }
    
    .hamburger.active span:nth-child(3){
      transform:rotate(-45deg) translate(7px,-7px);
    }

    .mobile-overlay{
      display:none;
      position:fixed; 
      inset:0;
      background:rgba(2,6,23,.6);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      z-index:999;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .3s ease;
    }
    
    .mobile-overlay.active{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }

    @media (max-width: 992px){
      nav{
        width:calc(100% - 32px);
        top:16px;
      }
      
      nav.scrolled{
        top:10px;
      }
      
      .nav-container{
        padding:0 20px;
      }
      
      .logo-text{
        font-size:1.3rem;
      }
      
      .nav-link{
        padding:10px 16px;
        font-size:.9rem;
      }
    }

  @media (max-width: 768px){
  :root{--nav-height:70px}
  
  nav{
    top:12px;
    width:calc(100% - 24px);
    border-radius:20px;
  }
  
  nav.scrolled{
    top:8px;
    height:64px;
  }
  
  .nav-container{
    padding:0 16px;
  }

  /* Menu muncul dari atas ke bawah - FIXED */
  .nav-menu{
    position:fixed;
    left:50%;
    top:calc(var(--nav-height) + 24px);
    transform:translateX(-50%);
    width:calc(100% - 24px);
    max-width:400px;
    height:auto;
    max-height:calc(100vh - var(--nav-height) - 48px);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:20px;
    gap:8px;

    border-radius:20px;
    background:rgba(255,255,255,.95);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);

    border:1px solid rgba(226,232,240,.6);
    box-shadow:0 20px 60px rgba(2,6,23,.20),
               inset 0 1px 0 rgba(255,255,255,.9);

    /* Penting: Gunakan opacity dan visibility untuk smooth animation */
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform-origin:top center;
    transform:translateX(-50%) scaleY(0.95);
    
    transition:opacity .3s cubic-bezier(0.4, 0, 0.2, 1),
               visibility .3s cubic-bezier(0.4, 0, 0.2, 1),
               transform .3s cubic-bezier(0.4, 0, 0.2, 1);
    
    overflow-y:auto;
    z-index:1000;
  }
  
  .nav-menu.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) scaleY(1);
  }
  
  .nav-menu li{
    width:100%;
  }

  .nav-link{
    width:100%;
    padding:16px 18px;
    border-radius:14px;
    justify-content:flex-start;
    font-size:1rem;
    font-weight:600;
  }
  
  .nav-link i{
    font-size:1.1rem;
  }

  .nav-menu-login-mobile{
    margin-top:12px;
    padding-top:16px;
    border-top:2px solid rgba(226,232,240,.6);
  }
  
  .nav-menu-login-mobile .nav-link{
    justify-content:center;
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);
    color:#fff;
    box-shadow:0 8px 20px rgba(26,95,122,.3);
    font-weight:700;
  }
  
  .nav-menu-login-mobile .nav-link:hover{
    background:linear-gradient(135deg,var(--primary-light) 0%,var(--primary) 100%);
    color:#fff;
    box-shadow:0 10px 24px rgba(26,95,122,.4);
  }

  .nav-actions{
    display:none;
  }
  
  .hamburger{
    display:flex;
  }
  
  .mobile-overlay{
    display:block;
  }
}

    @media (max-width: 480px){
      nav{
        width:calc(100% - 16px);
        top:8px;
      }
      
      .logo-img{
        height:40px;
      }
      
      nav.scrolled .logo-img{
        height:36px;
      }
      
      .logo-text{
        font-size:1.15rem;
      }
      
      .nav-menu{
        width:calc(100vw - 16px);
      }
    }