/* ============================================================
   Smart Top Bar Menu — Frontend Stylesheet (statis)
   Warna dinamis dikirim PHP sebagai CSS variables (inline).
   ============================================================ */

/* Fallback variabel (dioverride oleh inline style dari pengaturan) */
:root{
    --stm-bar-bg:#0f0f1a;
    --stm-btn-bg:#e94560;
    --stm-btn-hover:#ff6b81;
    --stm-panel-bg:#111127;
    --stm-panel-shadow:none;
    --stm-cat-color:#e94560;
    --stm-item-color:#e0e0e0;
    --stm-item-hover:rgba(233,69,96,.12);
    --stm-highlight:#e94560;
    --stm-border:rgba(255,255,255,.06);
    --stm-radius:10px;
    --stm-btn-color:#fff;
}

/* Integrasi tema Frontier */
body.stm-topbar-active.frontier.stm-hide-frontier-topbar #top-bar{display:none!important;}
.frontier #stm-topbar{font-family:inherit;}

/* Mode sticky */
body.stm-sticky-topbar #stm-topbar{position:sticky;top:0;}

/* ── Top Bar ── */
#stm-topbar{
    position:relative;z-index:99998;background:var(--stm-bar-bg);
    height:46px;display:flex;align-items:center;justify-content:space-between;
    padding:0 18px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    border-bottom:1px solid var(--stm-border);width:100%;box-sizing:border-box;
}
.stm-logo-area{display:flex;align-items:center;flex-shrink:0;}
.stm-logo-link{display:flex;align-items:center;text-decoration:none;line-height:1;}
.stm-logo-link img{transition:opacity .2s ease;}
.stm-logo-link:hover img{opacity:.85;}
.stm-bar-right{display:flex;align-items:center;gap:8px;margin-left:auto;}

/* ── Tombol (gradient & shimmer) ── */
.stm-toggle-btn{
    display:inline-flex;align-items:center;gap:8px;padding:7px 18px;
    background:var(--stm-btn-bg);color:var(--stm-btn-color);border:none;
    border-radius:var(--stm-radius);font-size:13px;font-weight:600;cursor:pointer;
    transition:all .3s cubic-bezier(.4,0,.2,1);letter-spacing:.3px;white-space:nowrap;
    position:relative;overflow:hidden;
}
.stm-toggle-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 40%,transparent 60%,rgba(255,255,255,.08) 100%);pointer-events:none;}
.stm-toggle-btn::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transform:rotate(25deg) translateX(-100%);transition:transform .6s ease;pointer-events:none;}
.stm-toggle-btn:hover::after{transform:rotate(25deg) translateX(100%);}
.stm-toggle-btn:hover{background:var(--stm-btn-hover);transform:translateY(-1px);box-shadow:0 6px 20px rgba(233,69,96,.3);}
.stm-toggle-btn:active{transform:translateY(0);box-shadow:none;}
.stm-toggle-btn .stm-btn-icon{display:flex;align-items:center;flex-shrink:0;}
.stm-toggle-btn.is-active{border-radius:var(--stm-radius) var(--stm-radius) 0 0;}
.stm-toggle-btn:focus-visible{outline:2px solid var(--stm-btn-color);outline-offset:2px;}

/* ── Panel ── */
.stm-menu-panel{
    position:absolute;top:100%;left:0;right:0;
    background:var(--stm-panel-bg);z-index:99997;
    border-bottom:2px solid var(--stm-border);
    overflow:hidden;pointer-events:none;opacity:0;max-height:0;
    transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease;
    box-shadow:var(--stm-panel-shadow);
}
.stm-menu-panel.is-open{pointer-events:auto;opacity:1;max-height:600px;}
.stm-anim-fade .stm-menu-panel{transition:opacity .35s ease;max-height:600px;}
.stm-anim-fade .stm-menu-panel.is-open{opacity:1;}
.stm-anim-fade .stm-menu-panel:not(.is-open){opacity:0;max-height:0;overflow:hidden;}
.stm-anim-zoom .stm-menu-panel{transform:scale(.96) translateY(-8px);transform-origin:top left;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s ease,max-height .4s cubic-bezier(.4,0,.2,1);}
.stm-anim-zoom .stm-menu-panel.is-open{transform:scale(1) translateY(0);opacity:1;max-height:600px;}

/* ── Overlay ── */
.stm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99996;opacity:0;pointer-events:none;transition:opacity .35s ease;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.stm-overlay.is-visible{opacity:1;pointer-events:auto;}

/* ── Search ── */
.stm-search-wrap{padding:12px 20px;border-bottom:1px solid var(--stm-border);display:flex;align-items:center;gap:10px;}
.stm-search-wrap svg{flex-shrink:0;}
.stm-search-input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--stm-radius);padding:9px 14px;color:#fff;font-size:13px;outline:none;transition:all .25s ease;box-sizing:border-box;}
.stm-search-input::placeholder{color:rgba(255,255,255,.3);}
.stm-search-input:focus{border-color:var(--stm-highlight);background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(233,69,96,.12);}

/* ── Grid kategori ── */
.stm-categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0;padding:8px 0;max-height:480px;overflow-y:auto;}
.stm-categories-grid::-webkit-scrollbar{width:5px;}
.stm-categories-grid::-webkit-scrollbar-track{background:transparent;}
.stm-categories-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px;}

/* ── Kategori ── */
.stm-cat-block{padding:12px 20px 16px;border-right:1px solid var(--stm-border);}
.stm-cat-block:last-child{border-right:none;}
.stm-cat-title{font-size:11px;font-weight:700;color:var(--stm-cat-color);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:8px;}
.stm-cat-title::before{content:'';width:3px;height:14px;background:linear-gradient(180deg,var(--stm-highlight),transparent);border-radius:2px;flex-shrink:0;}

/* ── Item menu ── */
.stm-menu-item{
    display:flex;align-items:center;gap:10px;padding:8px 12px;margin:2px 0;
    border-radius:var(--stm-radius);color:var(--stm-item-color);text-decoration:none;
    font-size:13px;font-weight:500;transition:all .25s ease;cursor:pointer;position:relative;overflow:hidden;
}
.stm-menu-item:hover{background:var(--stm-item-hover);color:#fff;transform:translateX(4px);}
.stm-menu-item:focus-visible{outline:2px solid var(--stm-highlight);outline-offset:1px;}
.stm-menu-item .stm-item-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.04);flex-shrink:0;transition:all .25s ease;}
.stm-menu-item:hover .stm-item-icon{background:linear-gradient(135deg,rgba(233,69,96,.2),rgba(255,107,129,.1));}
.stm-menu-item.is-highlight{color:var(--stm-highlight);font-weight:700;}
.stm-menu-item.is-highlight .stm-item-icon{background:linear-gradient(135deg,rgba(233,69,96,.18),rgba(255,107,129,.08));}
.stm-menu-item.is-highlight::after{content:'';position:absolute;right:12px;width:6px;height:6px;background:linear-gradient(135deg,var(--stm-highlight),#ff6b81);border-radius:50%;animation:stm-pulse 2s infinite;}
@keyframes stm-pulse{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(233,69,96,.4);}50%{opacity:.6;transform:scale(1.3);box-shadow:0 0 0 6px rgba(233,69,96,0);}}

/* Penanda halaman aktif */
.stm-menu-item.is-current{background:var(--stm-item-hover);color:var(--stm-highlight);font-weight:600;}
.stm-menu-item.is-current::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:linear-gradient(180deg,var(--stm-highlight),transparent);border-radius:2px;}

/* Highlight navigasi keyboard */
.stm-menu-item.kb-active{background:var(--stm-item-hover);outline:1px solid var(--stm-highlight);outline-offset:-1px;}

/* Efek ripple */
.stm-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.18);transform:scale(0);animation:stm-ripple .55s ease-out forwards;pointer-events:none;}
@keyframes stm-ripple{to{transform:scale(1);opacity:0;}}

/* ── State ── */
.stm-menu-item.is-hidden{display:none;}
.stm-cat-block.is-empty{display:none;}
.stm-no-results{display:none;text-align:center;padding:30px 20px;color:rgba(255,255,255,.35);font-size:14px;}
.stm-no-results svg{margin-bottom:10px;opacity:.4;}

/* ── Responsive ── */
@media(max-width:768px){
    .stm-categories-grid{grid-template-columns:1fr;}
    .stm-cat-block{border-right:none;border-bottom:1px solid var(--stm-border);}
    .stm-cat-block:last-child{border-bottom:none;}
    .stm-toggle-btn span.stm-btn-text{display:none;}
    .stm-toggle-btn{padding:7px 10px;}
    #stm-topbar{padding:0 12px;}
}

/* ── Aksesibilitas ── */
@media(prefers-reduced-motion:reduce){
    .stm-menu-panel,.stm-overlay,.stm-toggle-btn,.stm-menu-item,.stm-ripple{transition:none!important;animation:none!important;}
}