:root{
      --primary:#1a5f7a;
      --primary-dark:#134a5e;
      --primary-light:#2a7a99;
      --accent:#f4a261;
      --accent-dark:#e76f51;

      --bg:#f6f8fb;
      --surface:#ffffff;
      --border:#e2e8f0;
      --text:#1e293b;
      --text-muted:#64748b;

      --shadow:0 5px 20px rgba(2,6,23,.10);
      --shadow-strong:0 15px 40px rgba(2,6,23,.18);
      --radius:20px;

      --nav-height:80px;
    }

    *{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      font-family:'Inter','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
      overflow-x:hidden;
      background:var(--bg);
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    @media (prefers-reduced-motion: reduce) {
      *{animation:none !important; transition:none !important;}
      html{scroll-behavior:auto}
    }

    #sakura-canvas{
  position:absolute;  /* Ubah dari fixed menjadi absolute */
  top:0;
  left:0;
  width:100%; 
  pointer-events:none !important;
  z-index:3;
}


 /* ==========================================
   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);
      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);
      }
    }

    /* ==========================================
       HERO - Enhanced Design
    ========================================== */
    .hero{
      position:relative;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:calc(var(--nav-height) + 60px) 20px 60px;
      background:linear-gradient(135deg,rgba(26,95,122,.94) 0%,rgba(19,74,94,.94) 100%);
      z-index:2;
    }
    
    .hero-content{
      position:relative; 
      z-index:3; 
      max-width:900px;
    }
    
    .japanese-text{
      font-size:1.9rem;
      color:var(--accent);
      margin-bottom:12px;
      text-shadow:2px 2px 6px rgba(0,0,0,.2);
      font-weight:600;
      letter-spacing:2px;
    }
    
    h1{
      font-size:3.2rem;
      color:var(--surface);
      margin-bottom:24px;
      text-shadow:2px 2px 12px rgba(0,0,0,.3);
      line-height:1.2;
      font-weight:800;
      letter-spacing:-1px;
    }
    
    .subtitle{
      font-size:1.25rem;
      color:rgba(255,255,255,.92);
      margin-bottom:36px;
      line-height:1.7;
      font-weight:400;
    }
    
    .cta-button{
      display:inline-block;
      padding:18px 44px;
      background:linear-gradient(135deg,var(--accent-dark) 0%,var(--accent) 100%);
      color:var(--surface);
      text-decoration:none;
      border-radius:14px;
      font-size:1.1rem;
      font-weight:800;
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow:0 12px 28px rgba(231,111,81,.35),
                 inset 0 1px 0 rgba(255,255,255,.2);
    }
    
    .cta-button:hover{
      background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);
      transform:translateY(-3px);
      box-shadow:0 16px 36px rgba(244,162,97,.4),
                 inset 0 1px 0 rgba(255,255,255,.3);
    }

    /* FEATURES */
    .features{
      position:relative; 
      padding:100px 20px; 
      background:var(--surface); 
      z-index:2;
    }
    
    .features-container{
      max-width:1200px; 
      margin:0 auto;
    }
    
    .section-title{
      text-align:center; 
      font-size:2.4rem; 
      color:var(--text); 
      margin-bottom:50px;
      font-weight:800;
      letter-spacing:-1px;
    }
    
    .features-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:28px;
      margin-bottom:40px;
    }
    
    .feature-card{
      background:var(--surface);
      padding:32px 26px;
      border-radius:var(--radius);
      text-align:center;
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow:var(--shadow);
      border:1px solid var(--border);
    }
    
    .feature-card:hover{
      transform:translateY(-8px);
      box-shadow:var(--shadow-strong);
      border-color:rgba(26,95,122,.3);
    }
    
    .feature-icon{
      font-size:3.2rem; 
      margin-bottom:18px; 
      color:var(--primary);
    }
    
    .feature-card h3{
      font-size:1.5rem; 
      color:var(--text); 
      margin-bottom:12px;
      font-weight:700;
    }
    
    .feature-card p{
      color:var(--text-muted); 
      font-size:1rem; 
      line-height:1.7;
    }

    /* FAQ */
    .faq-section{
      position:relative; 
      padding:100px 20px; 
      background:var(--bg); 
      z-index:2;
    }
    
    .faq-container{
      max-width:900px; 
      margin:0 auto;
    }
    
    .faq-item{
      background:var(--surface);
      margin-bottom:14px;
      border-radius:14px;
      overflow:hidden;
      box-shadow:0 3px 14px rgba(2,6,23,.07);
      border:1px solid var(--border);
      transition:all .3s ease;
    }
    
    .faq-item:hover{
      box-shadow:0 12px 28px rgba(2,6,23,.12);
    }

    .faq-question{
      width:100%;
      padding:18px 22px;
      cursor:pointer;
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-size:1.05rem;
      font-weight:700;
      color:var(--text);
      transition:all .3s ease;
      user-select:none;
      background:transparent;
      border:0;
      text-align:left;
    }
    
    .faq-question:hover{
      background:rgba(246,248,251,.8);
    }
    
    .faq-question i{
      transition:transform .3s ease;
      color:var(--primary);
      font-size:1.1rem;
      flex-shrink:0;
      margin-left:12px;
    }
    
    .faq-question[aria-expanded="true"] i{
      transform:rotate(180deg);
    }

    .faq-answer{
      height:0;
      overflow:hidden;
      transition:height .3s ease;
      padding:0 22px;
      color:var(--text-muted);
      line-height:1.8;
      font-size:.98rem;
    }

    /* FINAL CTA */
    .final-cta{
      position:relative;
      padding:100px 20px;
      background:linear-gradient(135deg,rgba(26,95,122,.96) 0%,rgba(19,74,94,.96) 100%);
      text-align:center;
      z-index:2;
    }
    
    .final-cta-content{
      max-width:800px; 
      margin:0 auto;
    }
    
    .final-cta h2{
      font-size:2.6rem;
      color:var(--surface);
      margin-bottom:18px;
      text-shadow:2px 2px 10px rgba(0,0,0,.25);
      font-weight:800;
      letter-spacing:-1px;
    }
    
    .final-cta p{
      font-size:1.15rem; 
      color:rgba(255,255,255,.92); 
      margin-bottom:32px; 
      line-height:1.7;
    }
    
    .cta-buttons{
      display:flex; 
      gap:16px; 
      justify-content:center; 
      flex-wrap:wrap;
    }

    .cta-primary,.cta-secondary{
      padding:16px 40px;
      border-radius:14px;
      font-size:1.05rem;
      font-weight:800;
      text-decoration:none;
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor:pointer;
    }
    
    .cta-primary{
      background:linear-gradient(135deg,var(--accent-dark) 0%,var(--accent) 100%);
      color:var(--surface); 
      box-shadow:0 12px 28px rgba(231,111,81,.35);
    }
    
    .cta-primary:hover{
      background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);
      transform:translateY(-3px); 
      box-shadow:0 16px 36px rgba(244,162,97,.4);
    }
    
    .cta-secondary{
      background:var(--surface); 
      color:var(--primary); 
      border:2px solid rgba(255,255,255,.3); 
      box-shadow:0 12px 28px rgba(2,6,23,.15);
    }
    
    .cta-secondary:hover{
      background:rgba(255,255,255,.95); 
      transform:translateY(-3px); 
      box-shadow:0 16px 36px rgba(2,6,23,.2);
    }

    /* FOOTER */
    footer{
      position:relative;
      background:#0b2230;
      color:var(--surface);
      padding:60px 20px 24px;
      z-index:2;
    }
    
    .footer-container{
      max-width:1200px; 
      margin:0 auto;
    }
    
    .footer-content{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
      gap:36px;
      margin-bottom:36px;
    }
    
    .footer-section h3{
      font-size:1.35rem; 
      margin-bottom:16px; 
      color:var(--accent);
      font-weight:700;
    }
    
    .footer-section p{
      color:rgba(255,255,255,.8); 
      line-height:1.8; 
      margin-bottom:14px;
    }
    
    .footer-links{
      list-style:none;
    }
    
    .footer-links li{
      margin-bottom:11px;
    }
    
    .footer-links a{
      color:rgba(255,255,255,.8);
      text-decoration:none;
      transition:color .3s ease;
      display:flex;
      align-items:center;
      gap:10px;
      font-size:.98rem;
    }
    
    .footer-links a:hover{
      color:var(--accent);
    }
    
    .footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.footer-logo{
  width:42px;
  height:42px;
  object-fit:contain;
  flex-shrink:0;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.15));
}

.footer-title{
  margin:0;
}

    
    .social-links{
      display:flex; 
      gap:14px; 
      margin-top:14px;
    }
    
    .social-links a{
      width:40px; 
      height:40px;
      background:rgba(255,255,255,.15);
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--surface);
      text-decoration:none;
      transition:all .3s ease;
      font-size:1rem;
    }
    
    .social-links a:hover{
      background:var(--primary); 
      transform:translateY(-3px);
    }
    
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.15);
      padding-top:16px;
      text-align:center;
      color:rgba(255,255,255,.65);
      font-size:.92rem;
    }

    @media (max-width: 480px){
      h1{
        font-size:2.3rem;
      }
      
      .japanese-text{
        font-size:1.5rem;
      }
      
      .subtitle{
        font-size:1.05rem;
      }
      
      .cta-button{
        padding:16px 32px; 
        font-size:1rem;
      }
      
      .section-title{
        font-size:2rem;
      }
      
      .final-cta h2{
        font-size:2.1rem;
      }
      
      .final-cta p{
        font-size:1.05rem;
      }
      
      .cta-buttons{
        flex-direction:column;
      }
      
      .cta-primary,.cta-secondary{
        width:100%;
      }
    }