/* theme/menu.css — header, hamburger drawer, footer untuk voltingers.com */

:root{
  --vg-ink:#14141c;
  --vg-muted:#6b6d7a;
  --vg-border:#e7e7ee;
  --vg-bg:#ffffff;
  --vg-volt:#2f5fee;
  --vg-spark:#c6ff2f;
  --vg-drawer-bg:#101019;
}

.top-strip{
  height:4px;
  background:linear-gradient(90deg, var(--vg-volt), var(--vg-spark));
}

.vg-header{
  background:var(--vg-bg);
  border-bottom:1px solid var(--vg-border);
  position:sticky;
  top:0;
  z-index:100;
}
.vg-header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  height:56px;
  display:flex;
  align-items:center;
  gap:18px;
}

.vg-header-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.vg-hamburger-btn{
  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:8px;
  color:var(--vg-ink);
  flex-shrink:0;
  transition:background .15s ease;
}
.vg-hamburger-btn:hover{ background:#f2f2f6; }
.vg-hamburger-btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }

.vg-logo{
  display:flex;
  align-items:center;
  gap:2px;
  text-decoration:none;
  font-family:'Manrope', sans-serif;
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.vg-logo-volt{ color:var(--vg-ink); }
.vg-logo-ingers{ color:var(--vg-muted); font-weight:600; }
.vg-logo-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--vg-spark);
  margin-left:4px;
  flex-shrink:0;
}

.vg-header-search{
  flex:1;
  max-width:480px;
  display:flex;
  align-items:center;
  gap:8px;
  background:#f2f2f6;
  border-radius:8px;
  padding:0 12px;
  height:38px;
}
.vg-header-search svg{ width:16px; height:16px; stroke:var(--vg-muted); fill:none; stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.vg-search-input{
  flex:1;
  border:none;
  background:none;
  outline:none;
  font-size:.9rem;
  color:var(--vg-ink);
  font-family:'Manrope', sans-serif;
}
.vg-search-input::placeholder{ color:#a8a9b3; }

.vg-header-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  margin-left:auto;
}
.vg-write-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  color:var(--vg-ink);
  text-decoration:none;
  font-weight:700;
  font-size:.88rem;
  padding:.4em .7em;
  border-radius:8px;
  transition:background .15s ease;
}
.vg-write-btn:hover{ background:#f2f2f6; }
.vg-write-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.vg-icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  color:var(--vg-ink);
  transition:background .15s ease;
  flex-shrink:0;
}
.vg-icon-btn:hover{ background:#f2f2f6; }
.vg-icon-btn svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---- drawer (kanal & topic) ---- */
.vg-drawer-overlay{
  position:fixed; inset:0;
  background:rgba(10,10,16,.4);
  z-index:199;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.vg-drawer-overlay.open{ opacity:1; pointer-events:auto; }

.vg-drawer{
  position:fixed;
  top:0; left:0; bottom:0;
  width:300px;
  max-width:85vw;
  background:var(--vg-drawer-bg);
  color:#fff;
  z-index:200;
  transform:translateX(-100%);
  transition:transform .22s ease;
  display:flex;
  flex-direction:column;
}
.vg-drawer.open{ transform:translateX(0); }

.vg-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-weight:700;
  font-family:'Manrope', sans-serif;
}
.vg-drawer-close{
  background:none; border:none; color:#fff;
  font-size:22px; line-height:1; cursor:pointer;
}
.vg-drawer-body{
  flex:1;
  overflow-y:auto;
  padding:12px 8px;
}
.vg-drawer-empty{
  padding:20px 16px;
  color:rgba(255,255,255,.5);
  font-size:.85rem;
}
.vg-drawer-kanal{ margin-bottom:10px; }
.vg-drawer-kanal-label{
  font-size:.7rem;
  font-weight:700;
  color:rgba(255,255,255,.45);
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:10px 16px 4px;
}
.vg-drawer-topic{
  display:block;
  padding:10px 16px;
  border-radius:8px;
  color:#fff;
  text-decoration:none;
  font-size:.92rem;
  transition:background .15s ease;
}
.vg-drawer-topic:hover{ background:rgba(255,255,255,.08); }

/* ---- footer ---- */
.vg-footer{
  background:var(--vg-ink);
  color:#fff;
  padding:36px 20px 20px;
  margin-top:8px;
}
.vg-footer-inner{ max-width:1200px; margin:0 auto; }
.vg-footer-logo{ font-family:'Manrope', sans-serif; font-size:1.1rem; font-weight:800; margin-bottom:14px; }
.vg-footer-logo .vg-logo-volt{ color:#fff; }
.vg-footer-logo .vg-logo-ingers{ color:rgba(255,255,255,.6); }
.vg-footer-links{
  display:flex; gap:20px; flex-wrap:wrap;
  font-size:12px; color:rgba(255,255,255,.6);
  padding-top:16px; border-top:1px solid rgba(255,255,255,.15);
}
.vg-footer-links a{ color:inherit; text-decoration:none; }
.vg-footer-links a:hover{ color:#fff; }
.vg-footer-copy{ font-size:11px; color:rgba(255,255,255,.35); margin-top:12px; }

@media (max-width:640px){
  .vg-header-inner{ gap:10px; padding:0 12px; }
  .vg-write-btn span{ display:none; }
  .vg-header-search{ max-width:none; }
}