:root {
      --blue-900: #0057D8;
      /* header / CTA */
      --blue-700: #0096C7;
      /* nav hover / accents */
      --blue-500: #4CC9F0;
      /* gradients / tags */
      --blue-200: #A6E9FA;
      /* section bg light */
      --blue-100: #D8F2FF;
      /* alt bg */
      --offwhite: #F8FFFF;
      /* page bg */
      --ink: #0F172A;
      /* text */
      --muted: #475569;
      /* secondary text */
      --radius: 18px;
      --shadow: 0 10px 30px rgba(0, 0, 0, .08);
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      color: var(--ink);
      background: var(--offwhite);
    }

    a {
      color: inherit;
      text-decoration: none
    }

    .container {
      width: min(1120px, 100% - 2rem);
      margin-inline: auto
    }


    /* Header */
    header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: saturate(120%) blur(6px);
    }

    .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    white-space: nowrap;
    }

    .nav .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap;
    }

    .logo {
      width: 300px;
      height: 300px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: white;
      font-weight: 700
    }
    /* Brand section (logo + text) */


    .brand .logo {
    height: 75px; /* atur sesuai ukuran logo */
    width: auto;
    }

    .brand-name {
    font-weight: bold;
    color: #111827;
    font-size: 1rem;
    }

    .brand span {
      font-weight: 700;
      letter-spacing: 1px
    }
    

    .nav-links {
      display: flex;
      gap: 1rem
    }

    .nav-links a {
      padding: .6rem .9rem;
      border-radius: 12px
    }

    .nav-links a:hover {
      background: var(--blue-100)
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      border: none;
      border-radius: 16px;
      padding: .85rem 1.2rem;
      cursor: pointer
    }

    .btn-primary {
      background: var(--blue-900);
      color: #fff
    }

    .btn-primary:hover {
      background: #084fc2
    }

    .btn-light {
      background: #fff;
      color: var(--blue-900);
      box-shadow: var(--shadow)
    }

   /* Mobile nav */
    .menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 100;
    }
    .menu-toggle .hamburger {
  display: block;
  width: 28px;
  height: 22px;
  position: relative;
}
.menu-toggle .hamburger,
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
  content: '';
  display: block;
  background: var(--blue-900);
  border-radius: 3px;
  height: 4px;
  width: 100%;
  position: absolute;
  left: 0;
  transition: all 0.3s;
}
.menu-toggle .hamburger {
  top: 9px;
}
.menu-toggle .hamburger::before {
  top: -8px;
}
.menu-toggle .hamburger::after {
  top: 8px;
}


    @media (max-width:768px) {
      .nav {
        position: relative;
        flex-wrap: wrap;
        white-space: normal;
        padding: 0.5rem 0.5rem;
      }

      .nav .brand {
        gap: 6px;
        flex: 1 1 100%;
        min-width: 0;
      }

      .logo {
        width: 40px;
        height: 40px;
      }

      .nav .brand span {
   font-size: 0.95rem;
    max-width: 140px;
    white-space: normal;
    word-break: break-word;
    display: block;
      }

      .nav-links {
   display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%; /* Change from 64px to 100% so it appears below .nav */
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 1rem;
    flex-direction: column;
    z-index: 99;
      }

      .nav-links.open {
        display: flex;
      }
      .nav .ul {
       flex-direction: column;
       text-align: center;
      }
      

      .menu-toggle {
    display: inline-flex;
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: none;         /* Remove background */
    border-radius: 0;         /* Remove rounded corners */
    box-shadow: none;         /* Remove shadow */
    border: none;             /* Remove border */
      }
    }

    

    /* Footer */
    footer {
      background: #0b3ea3;
      color: #eaf2ff;
      padding: 2.5rem 0
    }

    .foot {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 1.5rem
    }

    .foot h5 {
      margin: .2rem 0 1rem;
      font-size: 1rem
    }

    .foot a {
      color: #eaf2ff
    }

    .foot a:hover {
      text-decoration: underline
    }

    .copyright {
      margin-top: 1.5rem;
      border-top: 1px solid #2c57b8;
      padding-top: 1rem;
      font-size: .9rem;
      color: #cddcff
    }

    @media (max-width:900px) {
      .foot {
        grid-template-columns: 1fr
      }
    }



    /* Utilities */
    .muted {
      color: #eaf2ff
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0
    }

    .kbd {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      background: #eef2ff;
      border: 1px solid #c7d2fe;
      border-radius: 6px;
      padding: .05rem .35rem
    }