:root{
  --om-primary:#2F7EEA;
  --om-ink:#0E1B2A;
  --om-muted:rgba(14,27,42,0.72);
  --om-edge:rgba(9,51,119,0.25);
  --om-shadow:rgba(6,22,42,0.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#F8FBFF,#EEF5FF);color:var(--om-ink);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height:1.8; letter-spacing:.1px;}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image: linear-gradient(135deg, rgba(47,126,234,0.06) 8%, transparent 8%, transparent 50%, rgba(47,126,234,0.06) 50%, rgba(47,126,234,0.06) 58%, transparent 58%);
  background-size: 28px 28px; opacity:.65;
}
a{color:var(--om-primary); text-decoration:none; border-bottom:1px solid transparent; transition:.2s ease}
a:hover{border-color:var(--om-primary)}
img{max-width:100%;display:block;height:auto}
.om-header{position:sticky; top:0; z-index:70; background:#ffffffcc; backdrop-filter:blur(8px); border-bottom:1px solid var(--om-edge)}
.om-brand{display:flex; align-items:center; justify-content:space-between; max-width:1160px; margin:0 auto; padding:8px 16px}
.om-brand img{width:180px; height:auto}
.om-nav{display:flex; gap:8px; align-items:center; justify-content:flex-end; padding:8px 16px; max-width:1160px; margin:0 auto 6px}
.om-nav a{padding:10px 10px; border-radius:4px; position:relative; color:#0b3461}
.om-nav a::after{content:""; position:absolute; left:8px; right:8px; bottom:4px; height:2px; background:transparent; transform:scaleX(0); transform-origin:right; transition:transform .25s ease, background .25s ease}
.om-nav a:hover::after{background:var(--om-primary); transform:scaleX(1); transform-origin:left}
.om-nav a.om-active::after{background:var(--om-primary); transform:scaleX(1)}
.om-wrap{max-width:1160px; margin:0 auto; padding:22px 16px;}
.om-grid{display:grid; grid-template-columns: 260px minmax(0,1fr); gap:20px; align-items:start}
.om-rail{position:sticky; top:78px; align-self:start; background:linear-gradient(180deg,#fff,#f8fbff); border:1px solid var(--om-edge); border-radius:8px; box-shadow:0 6px 20px var(--om-shadow); padding:14px}
.om-rail h4{margin:6px 0 8px; font-size: .98rem; color:var(--om-muted)}
.om-rail a{display:block; padding:6px 6px; border-radius:6px; color:#0b3461}
.om-rail a:hover{background:#f1f6ff}
.om-content article>h1{font-size:2.05rem; margin:2px 0 6px}
.dek{font-size:1.02rem; color:var(--om-muted); margin:0 0 10px}
.om-banner{border:1px solid var(--om-edge); border-radius:6px; overflow:hidden; margin:10px 0 14px}
.om-banner figcaption{font-size:.92rem; color:var(--om-muted); padding:8px 12px; background:#fff}
.om-card{background:#fff; border:1px solid var(--om-edge); border-radius:8px; padding:16px; margin:14px 0; box-shadow:0 4px 16px var(--om-shadow)}
.om-card h2{font-size:1.18rem; margin:4px 0}
.om-card h3{font-size:.98rem; margin:2px 0; color:var(--om-muted)}
.om-rule{height:1px; background:var(--om-edge); margin:14px 0}
.om-footer{border-top:1px solid var(--om-edge); background:#fff; color:var(--om-muted); text-align:center; padding:20px; margin-top:20px}
article p, section p, main p, p {
  text-align: justify !important;
  text-justify: inter-word !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  hyphens: auto !important;
}
.om-to-top{
  position: fixed; right: 18px; bottom: 18px;
  width: 46px; height: 46px;
  border-radius: 10px;
  border: 1px solid var(--om-edge);
  background: var(--om-primary);
  color:#fff;
  font: 700 18px/46px system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  text-align:center; cursor:pointer;
  opacity: 0 !important; transform: translateY(10px) !important;
  pointer-events: none !important;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
  z-index: 9999 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.om-to-top.om-show{
  opacity: 1 !important; transform: translateY(0) !important;
  pointer-events: auto !important;
}
@media (max-width: 980px){
  .om-grid{grid-template-columns: 1fr; gap:12px}
  .om-rail{position:static; order:2}
}

/* --- Final Footer Refinement (OmniMesh / DesignVista Harmonization) --- */

/* Override global justification */
.om-footer,
.om-footer * {
  text-align: center !important;
}

/* Footer layout: clean, centered, and balanced */
.om-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 28px;
  padding-bottom: 28px;
  background: #fff;
  border-top: 1px solid var(--om-edge);
  color: var(--om-muted);
  box-shadow: 0 -4px 20px rgba(6,22,42,0.08) inset;
}

/* Metrolagu Network (OmniMesh / DesignVista palette) */
.metrolagu-network {
  background: none;
  color: var(--om-ink);
  padding: 20px 0;
}

.network-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

.metrolagu-network h3 {
  font-size: 1.15em;
  margin-bottom: 10px;
  color: #0E1B2A; /* natural */
  font-weight: 600;
  text-align: center;
  text-shadow: 0 0 3px rgba(93,170,104,0.25);
}

.metrolagu-network p {
  color: var(--om-muted);
  margin-bottom: 10px;
  line-height: 1.7;
  text-align: center;
}

/* Network links */
.network-links {
  text-align: center;
}

.network-links a {
  color: #0E1B2A;
  text-decoration: none;
  border-bottom: 1px solid rgba(47,126,234,0.2);
  transition: color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.network-links a:hover {
  color: #5DAA68;
  border-bottom-color: #5DAA68;
  opacity: 0.85;
}

/* Copyright pill refinement */
.om-footer .copyright,
.site-footer .copyright {
  display: inline-block;
  margin: 18px auto 6px auto;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  color: var(--om-ink);
  background: rgba(248,251,255,0.85);
  padding: 8px 22px;
  border: 1.5px solid rgba(47,126,234,0.25);
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(6,22,42,0.08);
  transition: all 0.3s ease;
}

/* Hover tone: subtle blue-sage glow */
.om-footer .copyright:hover {
  background: rgba(247,251,255,0.95);
  color: var(--om-primary);
  border-color: rgba(47,126,234,0.45);
  box-shadow: 0 3px 16px rgba(47,126,234,0.25);
  transform: translateY(-1px);
}

/* Embedded link inherits tone */
.om-footer .copyright a {
  color: inherit !important;
  text-decoration: none !important;
  transition: opacity 0.3s ease;
}