/* ==========================================================================
   Frontend member → sheet "Bantuan" berisi kanal sosial media aktif.
   Dibuka dari bottom-nav mobile (dan tautan Bantuan di footer).
   ========================================================================== */
body.help-open-lock{overflow:hidden}

.help-sheet{position:fixed;inset:0;z-index:120;display:none}
.help-sheet.open{display:block}
.help-sheet-backdrop{position:absolute;inset:0;background:rgba(3,10,17,.62);backdrop-filter:blur(2px);animation:help-fade .2s ease both}
.help-sheet-panel{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(460px,100%);max-height:82vh;overflow-y:auto;
  padding:10px 18px calc(20px + env(safe-area-inset-bottom,0px));
  border-radius:20px 20px 0 0;
  background:linear-gradient(180deg,#12222e,#0b1720);
  border:1px solid rgba(255,255,255,.09);border-bottom:0;
  box-shadow:0 -18px 50px rgba(0,0,0,.55);
  animation:help-rise .26s cubic-bezier(.22,1,.36,1) both
}
@keyframes help-fade{from{opacity:0}to{opacity:1}}
@keyframes help-rise{from{transform:translate(-50%,26px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

.help-sheet-grip{width:40px;height:4px;margin:2px auto 12px;border-radius:99px;background:rgba(255,255,255,.22)}
.help-sheet-panel header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.help-sheet-panel header b{font-size:15px;font-weight:800;color:#fff;letter-spacing:.02em}
.help-sheet-panel header button{
  width:30px;height:30px;border:0;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.08);color:#cbd8e0;font-size:17px;line-height:1
}
.help-sheet-panel header button:hover{background:rgba(255,255,255,.16);color:#fff}
.help-sheet-note{margin:5px 0 13px;color:#8ba6b7;font-size:11.5px;line-height:1.6}

.help-sheet-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.help-sheet-panel li a{
  display:flex;align-items:center;gap:12px;padding:11px 13px;
  border:1px solid rgba(255,255,255,.08);border-radius:13px;
  background:rgba(255,255,255,.045);color:#e7eef3;text-decoration:none;
  transition:background .18s,border-color .18s,transform .18s
}
.help-sheet-panel li a:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);transform:translateY(-1px)}
.help-ico{
  width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:linear-gradient(140deg,#f7e3ab,#dca62c);color:#12222e;
  font-style:normal;font-size:15px;font-weight:800
}
.help-ico-whatsapp{background:linear-gradient(140deg,#5ce07a,#1faa4b);color:#04240f}
.help-ico-telegram{background:linear-gradient(140deg,#7cc9f5,#1f8fd0);color:#03202f}
.help-ico-line{background:linear-gradient(140deg,#7ce6a5,#12a749);color:#03230f}
.help-ico-livechat{background:linear-gradient(140deg,#ffd98a,#dca62c);color:#2d1f04}
.help-ico-facebook{background:linear-gradient(140deg,#7fb0f7,#1c62d1);color:#02152f}
.help-ico-instagram{background:linear-gradient(140deg,#f8a05c,#d1338a);color:#2a0518}
.help-ico-twitter{background:linear-gradient(140deg,#9fb2bf,#2b3b45);color:#fff}
.help-ico-youtube{background:linear-gradient(140deg,#f78b8b,#d02525);color:#2c0505}
.help-ico-tiktok{background:linear-gradient(140deg,#8ce7e0,#1f2b30);color:#fff}
.help-ico-email{background:linear-gradient(140deg,#c4d3dc,#5d7a8a);color:#0d1c25}

.help-sheet-panel li span{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.help-sheet-panel li b{font-size:12.5px;font-weight:700}
.help-sheet-panel li small{color:#8ba6b7;font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.help-sheet-panel li em{font-style:normal;color:#6f8b9b;font-size:17px;line-height:1}

@media(min-width:760px){
  .help-sheet-panel{bottom:50%;transform:translate(-50%,50%);border-radius:18px;border-bottom:1px solid rgba(255,255,255,.09);padding-bottom:20px}
  @keyframes help-rise{from{transform:translate(-50%,calc(50% + 16px));opacity:0}to{transform:translate(-50%,50%);opacity:1}}
}
@media(prefers-reduced-motion:reduce){
  .help-sheet-panel,.help-sheet-backdrop{animation:none}
  .help-sheet-panel li a:hover{transform:none}
}