/* NAV WRAPPER */
  .nav{
    position:sticky;
    top:0;
    z-index:50;
    background:#0a1d45;
    backdrop-filter:saturate(140%) blur(8px);
    border-bottom:1px solid rgba(255,255,255,.06);
    font-family:Agdasima,sans-serif;
    text-transform: uppercase;
  }
  .nav-inner{
    max-width:85%;
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px 0;
  }
  .brand{
    width: 300px;
    float: left;
    font-weight:700;letter-spacing:.3px;font-size:1.05rem;
    color:white;
  }
  .brand img { width: 300px; height: auto;}
  
  /* HAMBURGER (checkbox hack) */
  #nav-toggle{display:none}
  .hamburger{
    margin-left:auto;
    width:38px;height:38px;border-radius:10px;
    border:1px solid rgba(255,255,255,.12);
    display:none;align-items:center;justify-content:center;
    cursor:pointer;
  }
  .hamburger:focus-visible{outline:none;box-shadow:var(--ring)}
  .hamburger .bars, .hamburger .bars::before, .hamburger .bars::after{
    content:"";display:block;width:18px;height:2px;background:var(--dark);
    border-radius:2px;position:relative;transition:.25s ease;
  }
  .hamburger .bars::before{position:absolute;top:-6px;left:0}
  .hamburger .bars::after{position:absolute;top:6px;left:0}

  /* MENU LEVEL-1 */
  .menu{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .menu>li{
    position:relative;
  }
  .menu>a,.menu>li>a{
    /*display:inline-flex;
    gap:2px;
    align-items:center;*/
    display: block;
    padding:10px 12px;
    border-radius:10px;
    font-weight:600;
    color:var(--white);
  }
  .menu>li>a:hover{background:rgba(255,255,255,.2)}
  .menu>li>a:focus-visible{outline:none;box-shadow:var(--ring)}
  .caret{font-size:.9rem;opacity:.7; float: right; color: var(--white);}

  /* DROPDOWN (LEVEL-2) */
  .dropdown{
    position:absolute;left:0;top:110%;
    min-width:220px;background:rgba(255,255,255,1);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;padding:8px;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:.18s ease;box-shadow:0 10px 30px rgba(0,0,0,.35);
  }
  /* Tampilkan saat hover/focus-within pada item induk */
  .menu>li:where(:hover,:focus-within)>.dropdown{
    opacity:1;visibility:visible;transform:translateY(0)
  }

  .dropdown li a{
    display:flex;justify-content:space-between;gap:10px;
    padding:10px;border-radius:8px;color:var(--black);
    white-space:nowrap;
  }
  .dropdown li a:hover{background:rgba(255,255,255,.06);color:var(--gray)}
  .note{font-size:.8rem;opacity:.7}

  /* SUBMENU (LEVEL-3) ke kanan */
  .dropdown li{position:relative}
  .dropdown .dropdown{
    left:100%;top:0;margin-left:8px;
  }

  /* CTA */
  .cta{
    margin-left:8px;padding:8px 14px;border-radius:10px;
    background:linear-gradient(135deg,#23499a,#ddb32b);
    color:#05121e;font-weight:800;border:0;cursor:pointer;
  }
  .cta:hover{filter:brightness(1.05)}
  .cta:focus-visible{outline:none;box-shadow:var(--ring)}

  /* RESPONSIVE: pada layar kecil jadikan vertikal + hamburger */
  @media (max-width: 880px){
    .hamburger{display:flex}
    .menu{
      position:fixed;
      left:0;
      right:0;
      top:88px;
      background:rgba(255,255,255,.95);
      border-top:1px solid rgba(255,255,255,.08);
      display:block;
      padding:10px 12px;
      transform:translateY(-10px);
      visibility:hidden;
      transition:.2s ease;
      height: 100vh;
    }
    #nav-toggle:checked ~ .menu{
      transform:translateY(0);opacity:1;visibility:visible;
    }
    /* Ubah dropdown jadi akordeon */
    .dropdown{
      position:static;min-width:unset;margin:6px 0 0;
      opacity:1;visibility:visible;transform:none;
      border:none;border-left:2px solid rgba(255,255,255,.08);
      border-radius:8px;background:transparent;box-shadow:none;
      padding:6px 0 6px 10px;
      display:none;
    }
    .menu>a,.menu>li>a{
      width: 100%;
    }
    /* Toggle submenu dengan :focus-within (klik link induk lalu tab) atau :hover tetap bekerja */
    .menu>li:focus-within>.dropdown,
    .menu>li:hover>.dropdown{display:block}
  }