/* Speedtest-inspired global header for JaringanLogis Tools. */
/* Reserve the final black header before JavaScript runs. Legacy controls remain
   invisible but keep the same height, preventing layout shift and old-template flash. */
html:not(.jl-header-ready) .portal-header,
html:not(.jl-header-ready) .global-bar{
  min-height:66px !important;
  border-bottom:1px solid #25252a !important;
  background:#050505 !important;
  color:#f7f7f8 !important;
  visibility:visible !important;
}
html:not(.jl-header-ready) .portal-header > *,
html:not(.jl-header-ready) .global-bar > *{visibility:hidden !important}
.portal-header.jl-mega-header{
  --jl-header-bg:#050505;
  --jl-header-text:#f7f7f8;
  --jl-header-muted:#96969d;
  --jl-header-line:#25252a;
  --jl-header-hover:#17171b;
  position:sticky !important;
  top:0;
  z-index:120 !important;
  min-height:66px;
  border-bottom:1px solid var(--jl-header-line) !important;
  background:var(--jl-header-bg) !important;
  color:var(--jl-header-text) !important;
  backdrop-filter:none !important;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.jl-mega-header *{box-sizing:border-box}
.jl-mega-header a{color:inherit}
.jl-header-bar{
  width:min(1180px,calc(100% - 36px));
  min-height:66px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:16px;
}
.jl-header-logo{
  width:104px;
  height:48px;
  flex:0 0 104px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-decoration:none;
  overflow:visible;
}
.jl-header-logo img{
  display:block;
  width:92px;
  height:40px;
  object-fit:contain;
  object-position:left center;
  filter:brightness(0) invert(1);
  opacity:.96;
}
.jl-menu-trigger,
.jl-theme-choice{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--jl-header-text);
  cursor:pointer;
}
.jl-menu-trigger{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 8px;
  border-radius:8px;
  font-size:.91rem;
  font-weight:500;
}
.jl-menu-trigger:hover,
.jl-menu-trigger:focus-visible{background:var(--jl-header-hover);outline:none}
.jl-menu-chevron{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.jl-mega-header.mega-open .jl-menu-chevron{transform:rotate(225deg) translate(-1px,-1px)}
.jl-language-control{
  position:relative;
  display:flex;
  align-items:center;
}
.jl-language-control select{
  width:auto !important;
  min-width:82px;
  height:40px;
  padding:0 25px 0 9px !important;
  border:0 !important;
  border-radius:8px !important;
  background-color:transparent !important;
  color:var(--jl-header-text) !important;
  box-shadow:none !important;
  font-size:.88rem;
  cursor:pointer;
}
.jl-language-control select:hover,
.jl-language-control select:focus{background-color:var(--jl-header-hover) !important;outline:none}
.jl-language-control option{background:#111;color:#fff}
.jl-theme-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid var(--jl-header-line);
  border-radius:999px;
  background:#202024;
}
.jl-theme-choice{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#75757c;
  font-size:15px;
  line-height:1;
}
.jl-theme-choice:hover{color:#fff}
.jl-theme-choice[aria-pressed="true"]{background:#36363c;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.jl-header-spacer{flex:1}
.jl-header-desktop-actions{display:flex;align-items:center;gap:8px}
.jl-header-cta{
  min-width:114px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 18px;
  border:1px solid #a9a9ae;
  border-radius:999px;
  text-decoration:none;
  font-size:.9rem;
  font-weight:500;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.jl-header-cta:hover{background:#17171b;transform:translateY(-1px)}
.jl-header-cta.primary{
  border-color:#8b5cf6;
  background:linear-gradient(#050505,#050505) padding-box,linear-gradient(115deg,#a855f7,#22d3ee) border-box;
  border:1px solid transparent;
}
.jl-header-cta.active{background:#fff;color:#080808;border-color:#fff}
.jl-mega-panel{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  display:none;
  border-top:1px solid #151519;
  border-bottom:1px solid var(--jl-header-line);
  background:#050505;
  color:#fff;
  box-shadow:0 24px 50px rgba(0,0,0,.4);
}
.jl-mega-header.mega-open .jl-mega-panel{display:block;animation:jlMegaIn .18s ease-out both}
@keyframes jlMegaIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
.jl-mega-grid{
  width:min(860px,calc(100% - 36px));
  margin:0 auto;
  padding:23px 0 28px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:42px;
}
.jl-mega-column{min-width:0}
.jl-mega-column h3{
  margin:0 0 11px;
  color:#f3f3f5;
  font-size:.9rem;
  font-weight:650;
  letter-spacing:0;
}
.jl-mega-column a{
  display:block;
  width:fit-content;
  max-width:100%;
  padding:5px 0;
  color:var(--jl-header-muted);
  text-decoration:none;
  font-size:.86rem;
  line-height:1.42;
  overflow-wrap:anywhere;
  transition:color .16s ease,transform .16s ease;
}
.jl-mega-column a:hover,
.jl-mega-column a.active{color:#fff;transform:translateX(2px)}
.jl-mobile-utilities{display:none}
.jl-mobile-utilities .jl-header-cta{flex:1}
.jl-menu-backdrop{display:none;position:fixed;inset:66px 0 0;background:rgba(0,0,0,.42);z-index:-1}
.jl-mega-header.mega-open .jl-menu-backdrop{display:block}
@media (max-width:900px){
  .jl-header-bar{width:min(100% - 24px,1180px);gap:9px}
  .jl-header-logo{width:98px;height:44px;flex-basis:98px}.jl-header-logo img{width:88px;height:38px}
  .jl-header-desktop-actions .jl-header-cta{min-width:92px;padding-inline:13px}
  .jl-mega-grid{width:min(700px,calc(100% - 32px));gap:26px}
}
@media (max-width:720px){
  html:not(.jl-header-ready) .portal-header,
  html:not(.jl-header-ready) .global-bar{min-height:60px !important}
  .portal-header.jl-mega-header{min-height:60px}
  .jl-header-bar{min-height:60px;width:calc(100% - 20px)}
  .jl-header-logo{width:90px;height:42px;flex-basis:90px}.jl-header-logo img{width:82px;height:36px}
  .jl-header-desktop-language,.jl-header-desktop-theme,.jl-header-desktop-actions{display:none !important}
  .jl-menu-trigger{margin-left:auto}
  .jl-mega-panel{max-height:calc(100vh - 60px);overflow:auto}
  .jl-mega-grid{width:calc(100% - 28px);grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px;padding:22px 0 18px}
  .jl-mobile-utilities{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:9px;padding-top:17px;border-top:1px solid var(--jl-header-line)}
  .jl-mobile-controls{width:100%;display:flex;align-items:center;gap:12px;margin-bottom:3px}
  .jl-mobile-controls .jl-language-control{flex:1}
  .jl-mobile-controls .jl-language-control select{width:100% !important;border:1px solid var(--jl-header-line) !important;background:#151519 !important}
  .jl-menu-backdrop{inset:60px 0 0}
}
@media (max-width:430px){
  .jl-header-logo{width:84px;flex-basis:84px}.jl-header-logo img{width:78px;height:34px}
  .jl-menu-trigger{font-size:.84rem;padding-inline:5px}
  .jl-mega-grid{grid-template-columns:1fr;gap:17px}
  .jl-mobile-utilities{grid-column:1}
  .jl-header-cta{min-width:0}
}
@media (prefers-reduced-motion:reduce){.jl-mega-header *{animation:none !important;transition:none !important}}

/* Shared page grid: navigation, heroes, sections, and tool cards use one left edge. */
:root{
  --jl-content-max:1160px;
  --jl-page-gutter:16px;
}
.container,
.jl-header-bar{
  width:min(var(--jl-content-max),calc(100% - var(--jl-page-gutter) - var(--jl-page-gutter))) !important;
  margin-inline:auto;
}
.container.tool-page{max-width:none}
.container.tool-page > .tool-panel{width:min(100%,940px)}
.container.tool-page.rule-page > .tool-panel{width:min(100%,760px)}
@media (max-width:720px){:root{--jl-page-gutter:14px}}

/* Riwayat Speed Test hanya ditampilkan pada komputer desktop/laptop. */
@media (max-width:720px), (hover:none) and (pointer:coarse){
  a[href="/account/speedtest-history/"],
  .speed-history-row,
  .history-page{
    display:none !important;
  }
}