/* ================================================================
   BPI Navigation  —  Desktop Mega Menu + Mobile Panel
   Version 2 — fixes hover-gap bug, adds mega menu layout
   ================================================================ */

/* ── DESKTOP NAV ─────────────────────────────────────────────── */
.bpi-nav { display: none !important; }
@media (min-width: 1200px) {
    .bpi-nav { display: flex !important; align-items: center; }
}

.bpi-nav-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; gap: 0;
    /* Mega menu anchor point: kiri nav-list = sejajar huruf "H" Home */
    position: relative;
}

.bpi-nav-item {
    /* position: relative diangkat ke bpi-nav-list agar mega menu
       anchor ke seluruh nav, bukan per item */
    position: static;
}

/* ── Nav link ────────────────────────────────────────────────── */
.bpi-nav-link {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 10px 20px;
    font-size: 16px; font-weight: 600; letter-spacing: .01em;
    color: #1a1a2e;
    text-decoration: none !important;
    white-space: nowrap;
    border-radius: 8px;
    position: relative;
    transition: color .18s, background .18s;
    line-height: 1.3;
    cursor: pointer;
}
.bpi-nav-link:hover { color: #306FC1 !important; background: rgba(48,111,193,.06); }

/* Active state */
.bpi-nav-item.bpi-active > .bpi-nav-link { color: #306FC1 !important; }
.bpi-nav-item.bpi-active > .bpi-nav-link::after {
    content: '';
    position: absolute; bottom: 3px; left: 50%;
    transform: translateX(-50%);
    width: 16px; height: 2px;
    background: #306FC1; border-radius: 99px;
}

/* Chevron */
.bpi-chevron {
    font-size: 9px; color: #9ca3af;
    display: inline-block;
    transition: transform .22s cubic-bezier(.4,0,.2,1), color .18s;
}
.bpi-nav-item:hover .bpi-chevron,
.bpi-nav-item.bpi-active .bpi-chevron { transform: rotate(180deg); color: #306FC1; }


/* ================================================================
   MEGA MENU WRAPPER
   — anchor ke .bpi-nav-list (position:relative)
   — left: 0  →  sisi kiri card sejajar huruf "H" menu Home
   — top: 100% →  tepat di bawah nav bar
   ================================================================ */

/* Invisible bridge — fills the gap between nav bar and card
   so moving mouse between items doesn't close mega menu */
.bpi-nav-list::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: 14px; /* sama dengan padding-top di bpi-mega-wrap */
    z-index: 9989;
    pointer-events: auto;
}

.bpi-mega-wrap {
    position: absolute;
    top: 100%;
    left: 0;               /* sejajar kiri nav-list = huruf "H" Home */
    transform: none;
    padding-top: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* delay hide saat hover keluar agar ada waktu pindah ke item lain */
    transition: opacity .18s ease .05s, visibility .18s ease .05s;
    z-index: 9990;
}

/* Show on hover — no delay saat show */
.bpi-nav-item:hover > .bpi-mega-wrap {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease 0s, visibility .18s ease 0s;
}

/* Prevent flicker: keep current mega visible while hovering nav-list bridge */
.bpi-nav-list:hover .bpi-mega-wrap:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ── Mega card ───────────────────────────────────────────────── */
.bpi-mega-card {
    background: #fff;
    border-radius: 18px;
    box-shadow:
        0 4px 6px rgba(0,0,0,.04),
        0 10px 30px rgba(0,0,0,.08),
        0 32px 64px rgba(0,0,0,.1);
    border: 1px solid rgba(0,0,0,.07);
    overflow: hidden;
}

/* 3-col card: lebar tetap 780px agar 9 items terbagi 3×3 */
.bpi-mega-card--3col { width: 780px; }

/* Header strip — light mode default */
.bpi-mega-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px 12px;
    border-bottom: 1px solid rgba(0,0,0,.07);
    background: #f1f5f9;
}
.bpi-mega-head-title {
    font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #475569;
}

/* Dark mode header strip */
html.bpi-dark .bpi-mega-head {
    background: #09071B;
    border-bottom-color: rgba(255,255,255,.08);
}
html.bpi-dark .bpi-mega-head-title {
    color: rgba(255,255,255,.7);
}

/* Dark mode mega card */
html.bpi-dark .bpi-mega-card {
    background: #0f172a;
    border-color: rgba(255,255,255,.08);
    box-shadow:
        0 4px 6px rgba(0,0,0,.2),
        0 10px 30px rgba(0,0,0,.3),
        0 32px 64px rgba(0,0,0,.4);
}
html.bpi-dark .bpi-mega-item:hover,
html.bpi-dark .bpi-mega-item.is-active { background: rgba(255,255,255,.04); }
html.bpi-dark .bpi-mega-label { color: #e2e8f0; }
html.bpi-dark .bpi-mega-item:hover .bpi-mega-label,
html.bpi-dark .bpi-mega-item.is-active .bpi-mega-label { color: #93c5fd; }
html.bpi-dark .bpi-mega-desc { color: #64748b; }
.bpi-mega-head-link {
    font-size: 12px; font-weight: 600; color: #7ab3f5;
    text-decoration: none !important;
    display: flex; align-items: center; gap: 4px;
    transition: gap .15s;
}
.bpi-mega-head-link:hover { gap: 7px; color: #93c5fd !important; }

/* Grid body */
.bpi-mega-body { padding: 12px; }
.bpi-mega-grid {
    display: grid;
    gap: 4px;
}
/* 3 kolom horizontal — setiap baris 3 item sejajar ke samping */
.bpi-mega-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bpi-mega-grid--2 { grid-template-columns: 1fr 1fr; min-width: 480px; }
.bpi-mega-grid--1 { grid-template-columns: 1fr; min-width: 280px; }

/* Each item */
.bpi-mega-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 12px; border-radius: 10px;
    text-decoration: none !important;
    transition: background .15s;
    cursor: pointer;
    min-width: 0; /* prevent overflow in grid cell */
}
.bpi-mega-item:hover,
.bpi-mega-item.is-active { background: #f8faff; text-decoration: none !important; }

/* Icon badge */
.bpi-mega-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 15px;
    transition: transform .2s;
}
.bpi-mega-item:hover .bpi-mega-icon { transform: scale(1.08); }

/* Icon color themes */
.bpi-icon--blue   { background: #eff6ff; color: #3b82f6; }
.bpi-icon--violet { background: #f5f3ff; color: #7c3aed; }
.bpi-icon--pink   { background: #fdf2f8; color: #db2777; }
.bpi-icon--cyan   { background: #ecfeff; color: #0891b2; }
.bpi-icon--amber  { background: #fffbeb; color: #d97706; }
.bpi-icon--green  { background: #f0fdf4; color: #16a34a; }
.bpi-icon--red    { background: #fff1f2; color: #306FC1; }
.bpi-icon--indigo { background: #eef2ff; color: #4f46e5; }
.bpi-icon--teal   { background: #f0fdfa; color: #0d9488; }

/* Text */
.bpi-mega-text { min-width: 0; overflow: hidden; }
.bpi-mega-label {
    display: block;
    font-size: 13px; font-weight: 600; color: #1e293b;
    line-height: 1.2; margin-bottom: 3px;
    transition: color .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bpi-mega-item:hover .bpi-mega-label,
.bpi-mega-item.is-active .bpi-mega-label { color: #306FC1; }

.bpi-mega-desc {
    display: block;
    font-size: 11px; font-weight: 400; color: #94a3b8;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer strip */
.bpi-mega-foot {
    padding: 10px 12px;
    border-top: 1px solid #f1f5f9;
    display: flex; align-items: center; justify-content: center;
}
.bpi-mega-foot-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #64748b;
    text-decoration: none !important; padding: 6px 14px;
    border-radius: 8px; border: 1px solid #e2e8f0;
    transition: all .18s;
}
.bpi-mega-foot-link:hover {
    background: #306FC1; color: #fff !important;
    border-color: #306FC1;
}


/* ── HAMBURGER ───────────────────────────────────────────────── */
.bpi-hamburger {
    display: flex !important;
    flex-direction: column; justify-content: center; align-items: flex-end;
    gap: 5px; width: 40px; height: 40px; padding: 6px;
    cursor: pointer; border-radius: 10px;
    transition: background .2s; flex-shrink: 0;
}
@media (min-width: 1200px) { .bpi-hamburger { display: none !important; } }
.bpi-hamburger:hover { background: rgba(0,0,0,.05); }
.bpi-hamburger span {
    display: block; height: 2px; background: #1a1a2e;
    border-radius: 99px; transition: all .3s cubic-bezier(.4,0,.2,1);
}
.bpi-hamburger span:nth-child(1) { width: 22px; }
.bpi-hamburger span:nth-child(2) { width: 15px; }
.bpi-hamburger span:nth-child(3) { width: 22px; }
.bpi-hamburger.is-open span:nth-child(1) { width:22px; transform:rotate(45deg) translate(5px,5px); }
.bpi-hamburger.is-open span:nth-child(2) { opacity:0; width:0; }
.bpi-hamburger.is-open span:nth-child(3) { width:22px; transform:rotate(-45deg) translate(5px,-5px); }

/* ── OVERLAY ─────────────────────────────────────────────────── */
.bpi-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    z-index: 99990;
    opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.bpi-overlay.is-active { opacity: 1; visibility: visible; }

/* ── SLIDE PANEL ─────────────────────────────────────────────── */
.bpi-panel {
    position: fixed; top: 0; right: -370px;
    width: 340px; height: 100dvh; height: 100vh;
    background: #0d1526;
    z-index: 99999;
    display: flex; flex-direction: column; overflow: hidden;
    transition: right .35s cubic-bezier(.4,0,.2,1);
    box-shadow: -12px 0 48px rgba(0,0,0,.35);
}
.bpi-panel.is-open { right: 0; }
@media (max-width: 380px) { .bpi-panel { width: 100%; right: -100%; } }

.bpi-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.bpi-panel-brand { display:flex; align-items:center; gap:10px; text-decoration:none !important; }
.bpi-panel-brand-name { font-size:15px; font-weight:700; color:#fff; letter-spacing:.02em; }

.bpi-close {
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.08); border:none; border-radius:8px;
    cursor:pointer; color:rgba(255,255,255,.7); font-size:14px;
    transition:all .2s; flex-shrink:0;
}
.bpi-close:hover { background:#306FC1; color:#fff; }

.bpi-panel-body {
    flex:1; overflow-y:auto; padding:12px 14px;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
}
.bpi-panel-body::-webkit-scrollbar { width:4px; }
.bpi-panel-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:4px; }

.bpi-panel-nav { list-style:none; margin:0; padding:0; }
.bpi-panel-item { margin-bottom:2px; }

.bpi-panel-link-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 13px; border-radius:10px; cursor:pointer;
    transition:background .18s; user-select:none;
}
.bpi-panel-link-row:hover { background:rgba(255,255,255,.07); }
.bpi-panel-item.is-active > .bpi-panel-link-row { background:rgba(48,111,193,.12); }

.bpi-panel-link {
    font-size:15px; font-weight:600; color:rgba(255,255,255,.82);
    text-decoration:none !important; transition:color .18s; flex:1;
}
.bpi-panel-link-row:hover .bpi-panel-link { color:#fff; }
.bpi-panel-item.is-active > .bpi-panel-link-row .bpi-panel-link { color:#306FC1; }

.bpi-panel-arrow {
    width:26px; height:26px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.07); border-radius:6px;
    color:rgba(255,255,255,.4); font-size:10px;
    transition:all .25s; flex-shrink:0;
}
.bpi-panel-item.is-sub-open > .bpi-panel-link-row .bpi-panel-arrow {
    transform:rotate(180deg); background:rgba(48,111,193,.2); color:#306FC1;
}

.bpi-sub-nav {
    list-style:none; margin:0; padding:4px 0 4px 10px;
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
}
.bpi-panel-item.is-sub-open > .bpi-sub-nav { max-height:500px; }
.bpi-sub-item { margin-bottom:2px; }

.bpi-sub-link {
    display:flex; align-items:center; gap:10px;
    padding:9px 12px; border-radius:8px;
    text-decoration:none !important;
    border-left:2px solid rgba(255,255,255,.07);
    transition:all .18s;
}
.bpi-sub-link:hover,
.bpi-sub-item.is-active .bpi-sub-link {
    background:rgba(255,255,255,.05); border-left-color:#306FC1;
}

.bpi-sub-icon {
    width:28px; height:28px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(48,111,193,.13); border-radius:7px;
    color:#306FC1; font-size:11px; transition:all .18s;
}
.bpi-sub-link:hover .bpi-sub-icon,
.bpi-sub-item.is-active .bpi-sub-icon { background:#306FC1; color:#fff; }

.bpi-sub-text {
    font-size:13px; font-weight:500; color:rgba(255,255,255,.6); transition:color .18s;
}
.bpi-sub-link:hover .bpi-sub-text,
.bpi-sub-item.is-active .bpi-sub-text { color:rgba(255,255,255,.9); }

.bpi-panel-footer {
    padding:18px 22px; border-top:1px solid rgba(255,255,255,.07); flex-shrink:0;
}
.bpi-panel-contacts { margin-bottom:14px; }
.bpi-panel-contacts a {
    display:flex; align-items:center; gap:9px;
    color:rgba(255,255,255,.55); font-size:13px;
    text-decoration:none !important; padding:5px 0; transition:color .18s;
}
.bpi-panel-contacts a:hover { color:rgba(255,255,255,.9); }
.bpi-panel-contacts a i { color:#306FC1; font-size:14px; width:16px; text-align:center; }

.bpi-panel-cta {
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:linear-gradient(135deg,#306FC1,#2558a3);
    color:#fff !important; text-decoration:none !important;
    padding:13px; border-radius:11px;
    font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    transition:all .2s; box-shadow:0 4px 16px rgba(48,111,193,.3);
}
.bpi-panel-cta:hover { box-shadow:0 8px 24px rgba(48,111,193,.45); transform:translateY(-1px); }