/* ── NAVBAR (sama persis kode 1) ── */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 999;
      background: rgba(255, 255, 255, .92);
      backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid rgba(203, 213, 225, .5);
      transition: box-shadow .3s
    }

    .navbar.scrolled {
      box-shadow: 0 4px 24px rgba(15, 23, 42, .08)
    }

    .nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 68px
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none
    }

    .nav-logo-mark {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, var(--blue), var(--blue-mid));
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(26, 86, 219, .3)
    }

    .nav-logo-mark svg {
      width: 20px;
      height: 20px;
      color: white
    }

    .nav-logo-text {
      font-weight: 700;
      font-size: 1rem;
      color: var(--slate);
      letter-spacing: -.02em;
      line-height: 1.2
    }

    .nav-logo-text span {
      display: block;
      font-weight: 400;
      font-size: .72rem;
      color: var(--slate-500)
    }

    .nav-menu {
      display: flex;
      align-items: center;
        overflow: visible;

      gap: 2px
    }

    .nav-item {
      font-size: .875rem;
      font-weight: 500;
      color: var(--slate-700);
      text-decoration: none;
      padding: 8px 14px;
      border-radius: 8px;
      transition: all .2s;
      white-space: nowrap;
      position: relative;
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font);
    }

    .nav-item:hover {
      color: var(--blue);
      background: var(--blue-xlight)
    }

    .nav-item.active {
      color: var(--blue)
    }

    .nav-item.active::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 2px;
      background: var(--blue);
      border-radius: 2px
    }

    .drop-indicator {
      display: inline-block;
      margin-left: 4px;
      font-size: .7rem;
      opacity: .5;
      transition: transform .2s
    }

   

    /* ── Dropdown lama (untuk referensi, tidak dipakai di "Berbagi Materi") ── */
    .nav-dropdown {
      position: relative
    }

    .dropdown-panel {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: white;
      border: 1.5px solid var(--slate-100);
      border-radius: 14px;
      padding: 8px;
      box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
      min-width: 200px;
      z-index: 100
    }

    .nav-dropdown:hover .dropdown-panel {
      display: block
    }

    .dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 9px;
      text-decoration: none;
      color: var(--slate-700);
      font-size: .85rem;
      font-weight: 500;
      transition: all .2s;
      white-space: nowrap
    }

    .dropdown-item:hover {
      background: var(--blue-xlight);
      color: var(--blue)
    }

    .dropdown-item span {
      font-size: 1rem
    }

    .dropdown-divider {
      height: 1px;
      background: var(--slate-100);
      margin: 4px 0
    }
.nav-item.mega-open .drop-indicator {
      opacity: 1;
      transform: rotate(180deg)
    }

    .nav-divider {
      width: 1px;
      height: 20px;
      background: var(--slate-300);
      margin: 0 6px
    }

    .nav-login {
      font-size: .875rem;
      font-weight: 600;
      background: linear-gradient(135deg, var(--blue), var(--blue-mid));
      color: white;
      padding: 9px 22px;
      border-radius: 10px;
      text-decoration: none;
      box-shadow: 0 2px 8px rgba(26, 86, 219, .28);
      transition: all .2s;
      white-space: nowrap
    }

    .nav-login:hover {
      box-shadow: 0 4px 16px rgba(26, 86, 219, .4);
      transform: translateY(-1px)
    }

    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 6px;
      border: none;
      background: none
    }

    .nav-hamburger span {
      width: 24px;
      height: 2px;
      background: var(--slate);
      border-radius: 2px;
      transition: all .3s;
      display: block
    }

    .mobile-nav {
      display: none;
      position: fixed;
      top: 68px;
      left: 0;
      right: 0;
      bottom: 0;
      background: white;
      z-index: 998;
      padding: 24px;
      flex-direction: column;
      gap: 4px;
      overflow-y: auto
    }

    .mobile-nav.open {
      display: flex
    }

    .mobile-nav a {
      font-size: 1rem;
      font-weight: 500;
      color: var(--slate);
      text-decoration: none;
      padding: 14px 16px;
      border-radius: 10px;
      transition: all .2s
    }

    .mobile-nav a:hover {
      background: var(--blue-xlight);
      color: var(--blue)
    }

    .mobile-nav .mobile-sub {
      padding-left: 32px;
      font-size: .9rem;
      color: var(--slate-500)
    }

    .mobile-nav .mobile-login {
      background: var(--blue);
      color: white;
      text-align: center;
      margin-top: 12px;
      font-weight: 600
    }

    /* ════════════════════════════════
       MEGA MENU — gaya putih selaras navbar
    ════════════════════════════════ */
    .mega-anchor {
      position: relative
    }

    .mega-panel {
      position: absolute;
      top: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      width: 640px;
      background: white;
      border: 1.5px solid var(--slate-100);
      border-radius: 20px;
      padding: 8px;
      box-shadow: 0 20px 60px rgba(15, 23, 42, .13), 0 2px 8px rgba(15, 23, 42, .06);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      z-index: 200;
    }

    .mega-panel.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    /* Panah atas */
    .mega-panel::before {
      content: "";
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 12px;
      height: 12px;
      background: white;
      border-top: 1.5px solid var(--slate-100);
      border-left: 1.5px solid var(--slate-100);
    }

    /* Ribbon atas mega menu */
    .mega-ribbon {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px 12px;
      border-bottom: 1px solid var(--slate-100);
      margin-bottom: 6px;
    }

    .mega-ribbon-label {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--slate-500);
    }

    .mega-ribbon-stats {
      display: flex;
      gap: 14px;
      margin-top: 3px
    }

    .mega-rstat {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: .7rem;
      font-weight: 600;
      color: var(--slate-500);
    }

    .mega-rstat-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .mega-rstat-dot.blue {
      background: var(--blue)
    }

    .mega-rstat-dot.green {
      background: var(--green)
    }

    .mega-rstat-dot.gold {
      background: var(--gold)
    }

    .mega-rstat span {
      color: var(--slate-700)
    }

    .mega-online-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: .68rem;
      font-weight: 600;
      color: var(--green-dark);
      background: var(--green-light);
      border: 1px solid #6ee7b7;
      padding: 3px 10px;
      border-radius: 100px;
    }

    .mega-online-dot {
      width: 6px;
      height: 6px;
      background: var(--green);
      border-radius: 50%;
      animation: mgDotPulse 2s ease infinite;
    }

    @keyframes mgDotPulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(5, 150, 105, .5)
      }

      50% {
        box-shadow: 0 0 0 3px rgba(5, 150, 105, 0)
      }
    }

    /* Kartu 3 kolom */
    .mega-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px
    }

    .mega-card {
      display: flex;
      flex-direction: column;
      padding: 16px;
      border-radius: 14px;
      text-decoration: none;
      border: 1.5px solid transparent;
      transition: all .22s ease;
      position: relative;
      overflow: hidden;
    }

    .mega-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-radius: 14px 14px 0 0;
      opacity: 0;
      transition: opacity .22s;
    }

    .mega-card.mc-blue::before {
      background: linear-gradient(90deg, var(--blue), #60a5fa)
    }

    .mega-card.mc-green::before {
      background: linear-gradient(90deg, var(--green), #34d399)
    }

    .mega-card.mc-gold::before {
      background: linear-gradient(90deg, var(--gold), #fbbf24)
    }

    .mega-card:hover {
      border-color: transparent;
      transform: translateY(-2px)
    }

    .mega-card:hover::before {
      opacity: 1
    }

    .mega-card.mc-blue:hover {
      background: var(--blue-xlight);
      box-shadow: 0 8px 24px rgba(26, 86, 219, .10)
    }

    .mega-card.mc-green:hover {
      background: #f0fdf4;
      box-shadow: 0 8px 24px rgba(5, 150, 105, .10)
    }

    .mega-card.mc-gold:hover {
      background: #fffbeb;
      box-shadow: 0 8px 24px rgba(245, 158, 11, .10)
    }

    /* Icon wrap */
    .mega-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 10px
    }

    .mega-card-ico {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      flex-shrink: 0;
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    }

    .mega-card:hover .mega-card-ico {
      transform: scale(1.12) rotate(-6deg)
    }

    .mega-card.mc-blue .mega-card-ico {
      background: var(--blue-xlight)
    }

    .mega-card.mc-green .mega-card-ico {
      background: var(--green-light)
    }

    .mega-card.mc-gold .mega-card-ico {
      background: var(--gold-light)
    }

    .mega-card-badge {
      font-size: .58rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 100px;
    }

    .mega-card.mc-blue .mega-card-badge {
      background: var(--blue-xlight);
      color: var(--blue)
    }

    .mega-card.mc-green .mega-card-badge {
      background: var(--green-light);
      color: var(--green-dark)
    }

    .mega-card.mc-gold .mega-card-badge {
      background: var(--gold-light);
      color: #92400e
    }

    .mega-card-title {
      font-size: .85rem;
      font-weight: 700;
      color: var(--slate);
      letter-spacing: -.01em;
      margin-bottom: 5px;
    }

    .mega-card.mc-blue:hover .mega-card-title {
      color: var(--blue)
    }

    .mega-card.mc-green:hover .mega-card-title {
      color: var(--green-dark)
    }

    .mega-card.mc-gold:hover .mega-card-title {
      color: #92400e
    }

    .mega-card-desc {
      font-size: .74rem;
      color: var(--slate-500);
      line-height: 1.55;
      flex: 1
    }

    .mega-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid var(--slate-100);
    }

    .mega-card-count {
      font-size: .7rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px
    }

    .mega-card.mc-blue .mega-card-count {
      color: var(--blue)
    }

    .mega-card.mc-green .mega-card-count {
      color: var(--green-dark)
    }

    .mega-card.mc-gold .mega-card-count {
      color: #92400e
    }

    .mega-card-arrow {
      width: 22px;
      height: 22px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .2s;
    }

    .mega-card.mc-blue .mega-card-arrow {
      background: var(--blue-xlight);
      color: var(--blue)
    }

    .mega-card.mc-green .mega-card-arrow {
      background: var(--green-light);
      color: var(--green-dark)
    }

    .mega-card.mc-gold .mega-card-arrow {
      background: var(--gold-light);
      color: #92400e
    }

    .mega-card:hover .mega-card-arrow {
      transform: translate(2px, -2px)
    }

    .mega-card-arrow svg {
      width: 11px;
      height: 11px
    }

    /* Footer mega */
    .mega-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-top: 1px solid var(--slate-100);
      margin-top: 6px;
    }

    .mega-foot-left {
      font-size: .72rem;
      color: var(--slate-500)
    }

    .mega-foot-left strong {
      color: var(--slate-700)
    }

    .mega-foot-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: .78rem;
      font-weight: 700;
      color: var(--blue);
      background: var(--blue-xlight);
      border: 1.5px solid var(--blue-light);
      padding: 7px 14px;
      border-radius: 9px;
      text-decoration: none;
      transition: all .2s;
      white-space: nowrap;
    }

    .mega-foot-cta:hover {
      background: var(--blue);
      color: white;
      border-color: var(--blue);
      box-shadow: 0 4px 12px rgba(26, 86, 219, .25)
    }

    .mega-foot-cta svg {
      width: 12px;
      height: 12px
    }


    /* ════════════════════════════════
   E-KONSELING DROPDOWN
════════════════════════════════ */
.nav-dropdown-simple {
    position: relative;
}

.dropdown-simple-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: 260px;
    background: white;
    border: 1.5px solid var(--slate-100);
    border-radius: 16px;
    padding: 6px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .12), 0 2px 8px rgba(15, 23, 42, .06);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 200;
}

.dropdown-simple-panel.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Panah kecil ke atas */
.dropdown-simple-panel::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: white;
    border-top: 1.5px solid var(--slate-100);
    border-left: 1.5px solid var(--slate-100);
}

.dropdown-simple-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: all .18s ease;
    cursor: pointer;
}

.dropdown-simple-item:hover {
    background: var(--blue-xlight);
}

.dsi-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--blue-xlight);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.dropdown-simple-item:hover .dsi-icon {
    transform: scale(1.12) rotate(-5deg);
}

.dsi-label {
    font-size: .84rem;
    font-weight: 700;
    color: var(--slate);
    letter-spacing: -.01em;
}

.dropdown-simple-item:hover .dsi-label {
    color: var(--blue);
}

.dsi-desc {
    font-size: .72rem;
    color: var(--slate-500);
    margin-top: 1px;
    line-height: 1.4;
}

.dropdown-simple-divider {
    height: 1px;
    background: var(--slate-100);
    margin: 4px 6px;
}

/* Indikator panah putar saat dropdown terbuka */
.nav-item.konseling-open .drop-indicator {
    opacity: 1;
    transform: rotate(180deg);
}