:root{--accent:#c0162a;--accent-2:#e53a4e;--bg:#0b0c10;--card:rgba(255,255,255,0.06);--glass:rgba(255,255,255,0.08);--text:#f5f5f7;--muted:#cbd0d6;--border:rgba(255,255,255,0.14);--ring:rgba(224,47,60,0.35)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;line-height:1.8;font-size:18px;letter-spacing:.01em}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
main{max-width:1150px;margin:0 auto;padding:28px 24px}
header.site-header{position:sticky;top:0;backdrop-filter:saturate(140%) blur(14px);background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));border-bottom:1px solid var(--border);z-index:50}
.nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px}

.nav a{padding:10px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--border);transition:transform .15s ease, box-shadow .15s ease, background .2s ease;box-shadow:0 6px 18px -12px rgba(224,47,60,.45) inset}
.nav a:hover{transform:translateY(-1px)}
.nav a.active{background:linear-gradient(145deg, var(--accent), var(--accent-2));color:#fff;border-color:transparent;box-shadow:0 10px 24px -12px rgba(224,47,60,.75) inset}
.brand{display:flex;align-items:center;gap:10px;justify-content:center;padding:8px 0}
.brand img{width:160px;height:auto}
.hero{padding-top:14px}
h1{font-size:2.2rem;margin:14px 0 8px 0} .dek{font-size:1.15rem;color:var(--muted);margin:0 0 14px 0;line-height:1.7}
.media{margin:12px 0 20px 0}
.hero-media{border-radius:18px;overflow:hidden;border:1px solid var(--border);max-height:55vh;margin-top:8px;margin-bottom:18px}
.hero-media img{width:100%;height:auto;object-fit:cover;object-position:center top}
.hero-media figcaption{font-size:.9rem;color:var(--muted);padding:8px 12px;background:rgba(0,0,0,.3)}
section.card{backdrop-filter:blur(8px) saturate(120%);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:18px;margin:18px 0;box-shadow:0 18px 50px -20px rgba(224,47,60,.35)}
h2{font-size:1.6rem;margin:6px 0 4px 0} h3{font-size:1.15rem;margin:0 0 2px 0;color:var(--muted)}
footer.site-footer{border-top:1px solid var(--border);padding:24px;text-align:center;color:var(--muted)}
@media (max-width:720px){.nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px}h1{font-size:1.8rem}.brand img{width:130px}}
/* Paragraph justification everywhere */
article p, section.card p, main p, p{ text-align:justify !important; text-justify:inter-word !important; -webkit-hyphens:auto !important; -ms-hyphens:auto !important; hyphens:auto !important; orphans:3; widows:3 }

/* =========================
   MEDIA PROTECTION ADD-ONS
   ========================= */

/* Prevent dragging, long-press save, and selection on common media */
img, picture, svg, canvas, video{
  -webkit-user-drag:none !important;
  user-drag:none !important;
  -webkit-touch-callout:none !important; /* iOS long-press */
  -webkit-user-select:none !important;
  -moz-user-select:none !important;
  -ms-user-select:none !important;
  user-select:none !important;
  -webkit-tap-highlight-color:transparent;
}

/* Optional utility: add .no-drag to any element you want fully inert to pointer actions */
/* .no-drag{pointer-events:none} */

/* If you intentionally want captions selectable while image is locked, keep this neutral */
figure, .media{-webkit-touch-callout:none}

/* --- Final Footer Refinement (LitVerse Harmonization) --- */

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

/* Footer layout: deep glass-red elegance */
footer.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 26px;
  padding-bottom: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.15));
  border-top: 1px solid var(--border);
  color: var(--muted);
  box-shadow: 0 -4px 20px rgba(224,47,60,0.25) inset;
}

/* Metrolagu Network (LitVerse palette) */
.metrolagu-network {
  background: none;
  color: var(--text);
  padding: 20px 0;
}

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

.metrolagu-network h3 {
  font-size: 1.15em;
  margin-bottom: 10px;
  color: var(--accent-2); /* vivid crimson highlight */
  font-weight: 600;
  text-align: center;
  text-shadow: 0 0 6px rgba(229,58,78,0.25);
}

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

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

.network-links a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.network-links a:hover {
  color: var(--accent-2);
  border-bottom-color: var(--accent-2);
  opacity: 0.85;
}

/* Copyright pill refinement */
footer.site-footer .copyright {
  display: inline-block;
  margin: 18px auto 6px auto;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  padding: 8px 22px;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(224,47,60,0.35);
  transition: all 0.3s ease;
}

/* Hover tone: soft ember glow */
footer.site-footer .copyright:hover {
  background: rgba(224,47,60,0.25);
  color: #fff;
  border-color: rgba(224,47,60,0.45);
  box-shadow: 0 3px 16px rgba(224,47,60,0.45);
  transform: translateY(-1px);
}

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