
/* ============================================================
   ZALSTUDIO MASTER LAYOUT
   Satu sumber untuk header, navigasi mobile, footer, dan shell admin.
   ============================================================ */
:root{
  --zs-master-bg:rgba(8,9,14,.88);
  --zs-master-panel:#11131b;
  --zs-master-text:#f7f7fb;
  --zs-master-muted:#9aa3b3;
  --zs-master-border:rgba(255,255,255,.085);
  --zs-master-violet:#7c3aed;
  --zs-master-yellow:#f7d52b;
  --zs-master-header-h:72px;
}
.zs-master-header{position:fixed;z-index:1000;top:12px;left:50%;transform:translateX(-50%);width:min(1280px,calc(100vw - 24px));height:var(--zs-master-header-h);display:flex;align-items:center;gap:18px;padding:0 13px 0 18px;border:1px solid var(--zs-master-border);border-radius:20px;background:var(--zs-master-bg);backdrop-filter:blur(20px) saturate(145%);box-shadow:0 18px 55px rgba(0,0,0,.28);font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.zs-master-logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}.zs-master-logo img{display:block;width:auto!important;height:38px!important;max-width:168px;object-fit:contain}
.zs-master-desktop-nav{display:flex;align-items:center;justify-content:center;gap:3px;flex:1;min-width:0}.zs-master-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 12px;border-radius:10px;color:var(--zs-master-muted);text-decoration:none;font-size:.79rem;font-weight:650;white-space:nowrap;transition:.18s}.zs-master-link:hover,.zs-master-link.active{color:var(--zs-master-text);background:rgba(255,255,255,.055)}.zs-master-link.active{box-shadow:inset 0 0 0 1px rgba(124,58,237,.2);background:rgba(124,58,237,.12);color:#ddd2ff}
.zs-master-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}.zs-master-cta,.zs-master-mobile-cta{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 17px;border-radius:999px;background:#fff;color:#0a0a0f!important;text-decoration:none!important;font-size:.78rem;font-weight:800;white-space:nowrap}.zs-master-menu{display:none;width:44px;height:44px;padding:0;border:1px solid var(--zs-master-border);border-radius:12px;background:rgba(255,255,255,.045);place-items:center;cursor:pointer}.zs-master-menu span{display:block;width:18px;height:2px;margin:3px auto;border-radius:99px;background:#fff;transition:.2s}.zs-master-menu.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg)}.zs-master-menu.is-open span:nth-child(2){opacity:0}.zs-master-menu.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.zs-master-mobile{position:fixed;z-index:1002;top:92px;left:12px;right:12px;display:none;max-height:calc(100dvh - 106px);overflow:auto;padding:12px;border:1px solid var(--zs-master-border);border-radius:20px;background:rgba(12,13,20,.985);box-shadow:0 25px 70px rgba(0,0,0,.46);font-family:'Plus Jakarta Sans',system-ui,sans-serif}.zs-master-mobile.is-open{display:block}.zs-master-mobile-head{display:flex;align-items:center;justify-content:space-between;padding:4px 5px 10px;color:#747f91;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.zs-master-mobile-close{width:36px;height:36px;border:0;border-radius:10px;background:rgba(255,255,255,.045);color:#fff;font-size:1.35rem;cursor:pointer}.zs-master-mobile-links{display:grid;gap:6px}.zs-master-mobile-links .zs-master-link{justify-content:flex-start;min-height:48px;padding:0 13px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.025);font-size:.84rem}.zs-master-mobile-cta{width:100%;margin-top:10px;min-height:46px}.zs-master-backdrop{position:fixed;z-index:1001;inset:0;display:none;border:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}.zs-master-backdrop.is-open{display:block}.zs-master-legacy{position:fixed!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;opacity:0!important;pointer-events:none!important}
.zs-master-ai-actions{display:flex;align-items:center;gap:7px}.zs-master-credit{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 11px;border:1px solid var(--zs-master-border);border-radius:999px;color:#d7dce5;background:rgba(255,255,255,.035);font-size:.72rem}.zs-master-credit>span:first-child{color:#f7d52b}.zs-master-login{min-height:38px;padding:0 13px;border:1px solid var(--zs-master-border);border-radius:10px;background:rgba(255,255,255,.035);color:#fff;font-size:.75rem;font-weight:700;cursor:pointer}
.zs-master-footer{width:min(1280px,calc(100vw - 24px));margin:0 auto 14px;border:1px solid var(--zs-master-border);border-radius:24px;background:linear-gradient(180deg,rgba(20,22,31,.96),rgba(13,15,22,.98));overflow:hidden;color:var(--zs-master-text);font-family:'Plus Jakarta Sans',system-ui,sans-serif;box-shadow:0 18px 55px rgba(0,0,0,.18)}.zs-master-footer-main{display:grid;grid-template-columns:minmax(250px,1.8fr) repeat(3,minmax(130px,1fr));gap:34px;padding:42px}.zs-master-footer-brand img{width:auto!important;height:32px!important;object-fit:contain}.zs-master-footer-brand p{max-width:380px;margin:15px 0 0;color:var(--zs-master-muted);font-size:.82rem;line-height:1.7}.zs-master-footer-col{display:flex;flex-direction:column;gap:9px}.zs-master-footer-col strong{margin-bottom:4px;font-size:.76rem;color:#fff}.zs-master-footer-col a,.zs-master-footer-col span{color:var(--zs-master-muted)!important;text-decoration:none!important;font-size:.76rem;line-height:1.5}.zs-master-footer-col a:hover{color:#fff!important}.zs-master-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 42px;border-top:1px solid var(--zs-master-border);color:#697386;font-size:.7rem}
body.mobile-menu-open{overflow:hidden!important}

/* Admin master shell keeps the extracted component in one source. */
#zs-admin-topbar,#zs-admin-sidebar{display:contents}

@media(max-width:980px){.zs-master-desktop-nav,.zs-master-right>.zs-master-cta{display:none}.zs-master-menu{display:grid}.zs-master-right{margin-left:auto}.zs-master-ai-actions{display:none}.zs-master-footer-main{grid-template-columns:1.5fr 1fr 1fr;gap:28px}.zs-master-footer-col:last-child{grid-column:2/4}}
@media(max-width:680px){:root{--zs-master-header-h:62px}.zs-master-header{top:8px;width:calc(100vw - 16px);height:62px;padding:0 9px 0 13px;border-radius:17px}.zs-master-logo img{height:31px!important;max-width:145px}.zs-master-menu{width:42px;height:42px}.zs-master-mobile{top:78px;left:8px;right:8px;max-height:calc(100dvh - 88px);border-radius:17px}.zs-master-footer{width:calc(100vw - 16px);border-radius:19px;margin-bottom:8px}.zs-master-footer-main{grid-template-columns:1fr;gap:22px;padding:28px 20px}.zs-master-footer-col:last-child{grid-column:auto}.zs-master-footer-bottom{align-items:flex-start;flex-direction:column;gap:5px;padding:15px 20px;font-size:.66rem}}

/* Promo/public shell compatibility refresh */
.zs-master-link[href="/promo"].active{background:rgba(247,213,43,.09);box-shadow:inset 0 0 0 1px rgba(247,213,43,.16);color:#fff7bf}
@media(max-width:680px){.zs-master-mobile-links .zs-master-link{min-height:50px}.zs-master-mobile-cta{min-height:48px}}
