:root{
  --berkah-topnav-bg-1:#08152f;
  --berkah-topnav-bg-2:#0b1837;
  --berkah-topnav-accent:#3b82f6;
  --berkah-topnav-caret:#93c5fd;
  --berkah-topnav-dropdown-border:#dbe4f0;
}

.berkah-topnav--berkah-default{--berkah-topnav-bg-1:#08152f;--berkah-topnav-bg-2:#0b1837;--berkah-topnav-accent:#3b82f6;--berkah-topnav-caret:#93c5fd;--berkah-topnav-dropdown-border:#dbe4f0;}
.berkah-topnav--cor-01-indigo{--berkah-topnav-bg-1:#312e81;--berkah-topnav-bg-2:#4f46e5;--berkah-topnav-accent:#818cf8;--berkah-topnav-caret:#c7d2fe;--berkah-topnav-dropdown-border:#c7d2fe;}
.berkah-topnav--cor-02-slate{--berkah-topnav-bg-1:#0f172a;--berkah-topnav-bg-2:#334155;--berkah-topnav-accent:#64748b;--berkah-topnav-caret:#cbd5e1;--berkah-topnav-dropdown-border:#cbd5e1;}
.berkah-topnav--cor-03-cyan{--berkah-topnav-bg-1:#164e63;--berkah-topnav-bg-2:#06b6d4;--berkah-topnav-accent:#67e8f9;--berkah-topnav-caret:#a5f3fc;--berkah-topnav-dropdown-border:#a5f3fc;}
.berkah-topnav--cor-04-amber{--berkah-topnav-bg-1:#92400e;--berkah-topnav-bg-2:#f59e0b;--berkah-topnav-accent:#fde68a;--berkah-topnav-caret:#fde68a;--berkah-topnav-dropdown-border:#fde68a;}
.berkah-topnav--taf-05-emerald{--berkah-topnav-bg-1:#065f46;--berkah-topnav-bg-2:#10b981;--berkah-topnav-accent:#6ee7b7;--berkah-topnav-caret:#a7f3d0;--berkah-topnav-dropdown-border:#a7f3d0;}
.berkah-topnav--taf-06-teal{--berkah-topnav-bg-1:#134e4a;--berkah-topnav-bg-2:#14b8a6;--berkah-topnav-accent:#5eead4;--berkah-topnav-caret:#99f6e4;--berkah-topnav-dropdown-border:#99f6e4;}
.berkah-topnav--taf-07-lime{--berkah-topnav-bg-1:#3f6212;--berkah-topnav-bg-2:#84cc16;--berkah-topnav-accent:#d9f99d;--berkah-topnav-caret:#d9f99d;--berkah-topnav-dropdown-border:#d9f99d;}
.berkah-topnav--pos-08-rose{--berkah-topnav-bg-1:#881337;--berkah-topnav-bg-2:#f43f5e;--berkah-topnav-accent:#fda4af;--berkah-topnav-caret:#fecdd3;--berkah-topnav-dropdown-border:#fecdd3;}
.berkah-topnav--pos-09-fuchsia{--berkah-topnav-bg-1:#86198f;--berkah-topnav-bg-2:#d946ef;--berkah-topnav-accent:#f0abfc;--berkah-topnav-caret:#f5d0fe;--berkah-topnav-dropdown-border:#f5d0fe;}
.berkah-topnav--pos-10-pink{--berkah-topnav-bg-1:#9d174d;--berkah-topnav-bg-2:#ec4899;--berkah-topnav-accent:#f9a8d4;--berkah-topnav-caret:#fbcfe8;--berkah-topnav-dropdown-border:#fbcfe8;}
.berkah-topnav--pro-11-green{--berkah-topnav-bg-1:#166534;--berkah-topnav-bg-2:#22c55e;--berkah-topnav-accent:#86efac;--berkah-topnav-caret:#bbf7d0;--berkah-topnav-dropdown-border:#bbf7d0;}
.berkah-topnav--pro-12-olive{--berkah-topnav-bg-1:#365314;--berkah-topnav-bg-2:#65a30d;--berkah-topnav-accent:#bef264;--berkah-topnav-caret:#d9f99d;--berkah-topnav-dropdown-border:#d9f99d;}
.berkah-topnav--pro-13-mint{--berkah-topnav-bg-1:#065f46;--berkah-topnav-bg-2:#34d399;--berkah-topnav-accent:#a7f3d0;--berkah-topnav-caret:#d1fae5;--berkah-topnav-dropdown-border:#d1fae5;}
.berkah-topnav--sdm-14-sky{--berkah-topnav-bg-1:#0c4a6e;--berkah-topnav-bg-2:#0ea5e9;--berkah-topnav-accent:#7dd3fc;--berkah-topnav-caret:#bae6fd;--berkah-topnav-dropdown-border:#bae6fd;}
.berkah-topnav--sdm-15-blue{--berkah-topnav-bg-1:#1e3a8a;--berkah-topnav-bg-2:#2563eb;--berkah-topnav-accent:#93c5fd;--berkah-topnav-caret:#bfdbfe;--berkah-topnav-dropdown-border:#bfdbfe;}
.berkah-topnav--sdm-16-navy{--berkah-topnav-bg-1:#172554;--berkah-topnav-bg-2:#1e3a8a;--berkah-topnav-accent:#60a5fa;--berkah-topnav-caret:#93c5fd;--berkah-topnav-dropdown-border:#93c5fd;}
.berkah-topnav--kit-17-orange{--berkah-topnav-bg-1:#9a3412;--berkah-topnav-bg-2:#f97316;--berkah-topnav-accent:#fdba74;--berkah-topnav-caret:#fed7aa;--berkah-topnav-dropdown-border:#fed7aa;}
.berkah-topnav--kit-18-coral{--berkah-topnav-bg-1:#9a3412;--berkah-topnav-bg-2:#ff7f50;--berkah-topnav-accent:#ffd6c2;--berkah-topnav-caret:#ffe7dd;--berkah-topnav-dropdown-border:#ffd6c2;}
.berkah-topnav--kit-19-red{--berkah-topnav-bg-1:#7f1d1d;--berkah-topnav-bg-2:#dc2626;--berkah-topnav-accent:#fca5a5;--berkah-topnav-caret:#fecaca;--berkah-topnav-dropdown-border:#fecaca;}
.berkah-topnav--pms-20-violet{--berkah-topnav-bg-1:#5b21b6;--berkah-topnav-bg-2:#8b5cf6;--berkah-topnav-accent:#c4b5fd;--berkah-topnav-caret:#ddd6fe;--berkah-topnav-dropdown-border:#ddd6fe;}
.berkah-topnav--pms-21-purple{--berkah-topnav-bg-1:#6b21a8;--berkah-topnav-bg-2:#9333ea;--berkah-topnav-accent:#e9d5ff;--berkah-topnav-caret:#e9d5ff;--berkah-topnav-dropdown-border:#e9d5ff;}
.berkah-topnav--pms-22-plum{--berkah-topnav-bg-1:#431407;--berkah-topnav-bg-2:#7c2d12;--berkah-topnav-accent:#fed7aa;--berkah-topnav-caret:#fdba74;--berkah-topnav-dropdown-border:#fdba74;}
.berkah-topnav--crm-23-magenta{--berkah-topnav-bg-1:#9d174d;--berkah-topnav-bg-2:#db2777;--berkah-topnav-accent:#f9a8d4;--berkah-topnav-caret:#fbcfe8;--berkah-topnav-dropdown-border:#fbcfe8;}
.berkah-topnav--crm-24-berry{--berkah-topnav-bg-1:#831843;--berkah-topnav-bg-2:#9d174d;--berkah-topnav-accent:#f472b6;--berkah-topnav-caret:#f9a8d4;--berkah-topnav-dropdown-border:#f9a8d4;}
.berkah-topnav--crm-25-maroon{--berkah-topnav-bg-1:#450a0a;--berkah-topnav-bg-2:#7f1d1d;--berkah-topnav-accent:#fca5a5;--berkah-topnav-caret:#fecaca;--berkah-topnav-dropdown-border:#fecaca;}
.berkah-topnav--dss-26-gold{--berkah-topnav-bg-1:#92400e;--berkah-topnav-bg-2:#d4af37;--berkah-topnav-accent:#fde68a;--berkah-topnav-caret:#fde68a;--berkah-topnav-dropdown-border:#fde68a;}
.berkah-topnav--dss-27-charcoal{--berkah-topnav-bg-1:#111827;--berkah-topnav-bg-2:#1f2937;--berkah-topnav-accent:#6b7280;--berkah-topnav-caret:#d1d5db;--berkah-topnav-dropdown-border:#d1d5db;}

.berkah-topnav,
.berkah-topnav *,
.berkah-mobile-topbar,
.berkah-mobile-topbar *{
  font-family:var(--berkah-font-sans) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.berkah-topnav{
  position:sticky;
  top:0;
  z-index:40;
  background:linear-gradient(135deg,var(--berkah-topnav-bg-1) 0%, var(--berkah-topnav-bg-2) 100%);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 22px rgba(15,23,42,.14);
}

.berkah-topnav__inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 18px;
  display:flex;
  align-items:stretch;
  gap:0;
  min-height:60px;
}

.berkah-topnav__item{position:relative;display:flex;align-items:stretch;}

.berkah-topnav__link,
.berkah-topnav__link:link,
.berkah-topnav__link:visited,
.berkah-topnav__link:hover,
.berkah-topnav__link:focus,
.berkah-topnav__link:active{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 18px;
  min-height:60px;
  color:#f8fbff;
  font-size:14px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.01em;
  text-decoration:none !important;
  white-space:nowrap;
  text-shadow:0 1px 1px rgba(15,23,42,.18);
  transition:background .16s ease,color .16s ease;
}

.berkah-topnav__item:hover > .berkah-topnav__link,
.berkah-topnav__item.is-open > .berkah-topnav__link,
.berkah-topnav__link:focus{
  background:rgba(255,255,255,.08);
}

.berkah-topnav__caret{
  color:var(--berkah-topnav-caret);
  font-size:10px;
  line-height:1;
  opacity:.9;
}

.berkah-topnav__dropdown{
  position:absolute;
  top:calc(100% - 4px);
  left:0;
  min-width:270px;
  max-width:360px;
  display:none;
  gap:6px;
  padding:10px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--berkah-topnav-dropdown-border);
  box-shadow:0 18px 40px rgba(15,23,42,.16);
}

.berkah-topnav__dropdown::before{
  content:"";
  display:block;
  height:4px;
  margin:-10px -10px 10px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,var(--berkah-topnav-bg-2), var(--berkah-topnav-accent));
}

.berkah-topnav__item:hover > .berkah-topnav__dropdown,
.berkah-topnav__item.is-open > .berkah-topnav__dropdown{
  display:grid;
}

.berkah-topnav__dropdown-link,
.berkah-topnav__dropdown-link:link,
.berkah-topnav__dropdown-link:visited,
.berkah-topnav__dropdown-link:hover,
.berkah-topnav__dropdown-link:focus,
.berkah-topnav__dropdown-link:active{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  color:#0f172a;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-0.01em;
  text-decoration:none !important;
}

.berkah-topnav__dropdown-link:hover,
.berkah-topnav__dropdown-link:focus{
  background:color-mix(in srgb, var(--berkah-topnav-accent) 12%, white);
  color:var(--berkah-topnav-bg-2);
}

.berkah-topnav__dropdown-group{
  border-radius:14px;
  background:rgba(15,23,42,.03);
}

.berkah-topnav__dropdown-group[open]{
  background:color-mix(in srgb, var(--berkah-topnav-accent) 10%, white);
}

.berkah-topnav__dropdown-group-title{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  border-radius:14px;
  color:#0f172a;
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:-0.01em;
}

.berkah-topnav__dropdown-group-title::-webkit-details-marker{
  display:none;
}

.berkah-topnav__dropdown-submenu{
  display:grid;
  gap:4px;
  padding:0 8px 8px;
}

.berkah-topnav__dropdown-link--child{
  font-weight:600;
  font-size:12px;
  padding:10px 12px;
}


.berkah-topnav__dropdown-separator{
  height:1px;
  margin:4px 6px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--berkah-topnav-bg-2) 14%, white),
    color-mix(in srgb, var(--berkah-topnav-accent) 36%, white),
    color-mix(in srgb, var(--berkah-topnav-bg-2) 14%, white)
  );
  opacity:.95;
}

.berkah-mobile-topbar{display:none;}
.berkah-mobile-topbar__brand{font-weight:800;letter-spacing:.04em;color:#fff;}
.berkah-mobile-topbar__title{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-weight:700;}
.berkah-mobile-topbar__toggle{appearance:none;border:0;background:rgba(255,255,255,.14);color:#fff;width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;}

.berkah-mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.48);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
  z-index:58;
}

body.berkah-mobile-nav-open{overflow:hidden;}

@media (max-width:1100px){
  body{padding-top:56px;}

  .berkah-mobile-topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:56px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 16px;
    background:linear-gradient(135deg,var(--berkah-topnav-bg-1) 0%, var(--berkah-topnav-bg-2) 100%);
    box-shadow:0 10px 26px rgba(2,6,23,.16);
    z-index:60;
  }

  .berkah-topnav{
    position:fixed;
    top:56px;
    left:0;
    bottom:0;
    width:min(86vw, 340px);
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:59;
    border-bottom:0;
    box-shadow:18px 0 40px rgba(15,23,42,.18);
    overflow:hidden;
  }

  .berkah-topnav.is-mobile-open{transform:translateX(0);}
  .berkah-mobile-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto;}

  .berkah-topnav__inner{
    display:block;
    height:100%;
    overflow:auto;
    padding:14px 12px 18px;
    white-space:normal;
    min-height:56px;
  }

  .berkah-topnav__item{display:block;margin-bottom:6px;}

  .berkah-topnav__link{
    width:100%;
    min-height:56px;
    justify-content:space-between;
    padding:0 16px;
    border-radius:14px;
  }

  .berkah-topnav__dropdown{
    position:static;
    width:auto;
    min-width:0;
    max-width:none;
    margin-top:6px;
    border-radius:14px;
    display:none;
    box-shadow:none;
  }

  .berkah-topnav__item.is-open > .berkah-topnav__dropdown{display:grid;gap:6px;}
  .berkah-topnav__dropdown::before{display:none;}
  .berkah-topnav__dropdown-link{white-space:normal;line-height:1.35;}

  body > *:first-child,
  body [class$="-dashboard"],
  body [class*="-dashboard "],
  body .berkah-module,
  body .portal-shell{margin-top:12px;}
}


/* ===== Global injected system menu + dashboard defaults ===== */
.berkah-topnav__inner{
  justify-content:space-between;
}

.berkah-topnav__left,
.berkah-topnav__right{
  display:flex;
  align-items:stretch;
}

.berkah-topnav__left{
  gap:0;
  min-width:0;
  flex-wrap:wrap;
}

.berkah-topnav__right{
  gap:0;
  margin-left:auto;
}

.berkah-topnav__item--system{
  margin-left:6px;
}

.berkah-topnav__dropdown--right{
  left:auto;
  right:0;
}

@media (max-width:1100px){
  .berkah-topnav__left,
  .berkah-topnav__right{
    display:block;
  }

  .berkah-topnav__right{
    margin-left:0;
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.12);
  }

  .berkah-topnav__item--system{
    margin-left:0;
  }

  .berkah-topnav__dropdown--right{
    right:auto;
    left:0;
  }
}