/* Desaverse shared header (dvh). One file for desaverse.com root, /upkk, /pksk, /prasekolah.
   Approved design: canvas https://claude.ai/artifact/UWFj2iQ9ajk9iMzhtuJfTo (2026-10-08).
   Needs fonts: Plus Jakarta Sans 800, Lexend 400/500/600. No animation on purpose. */

.dvh-strip, .dvh { --dvh-cobalt: #1F44B8; --dvh-cobalt-d: #17359A; --dvh-navy: #172A6E; --dvh-muted: #4A5578;
  --dvh-line: #E8E1D3; --dvh-line-2: #EFE7D7; --dvh-paper: #FAF6EF; --dvh-card: #FFFDF8; --dvh-tint: #EEF1FB; --dvh-tint-2: #E6EBFA;
  --dvh-display: 'Plus Jakarta Sans', system-ui, sans-serif; --dvh-text: Lexend, system-ui, sans-serif; }
.dvh *, .dvh-strip * { box-sizing: border-box; }

/* ---------- Top strip (desktop only): Desaverse · UPKK · PKSK · Prasekolah ... Tentang ---------- */
.dvh-strip { background: var(--dvh-cobalt); font-family: var(--dvh-text); }
.dvh-strip-in { max-width: 1120px; margin: 0 auto; padding: 0 32px; height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dvh-strip nav { display: flex; align-items: center; gap: 22px; }
.dvh-strip a { color: #DCE3FA; text-decoration: none; font-size: 13.5px; font-weight: 500; height: 36px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
.dvh-strip a:hover { color: #FFFFFF; }
.dvh-strip a[aria-current] { color: #FFFFFF; border-bottom-color: #FFFFFF; }
.dvh-strip a.dvh-home { font-family: var(--dvh-display); font-weight: 800; font-size: 14px; color: #FFFFFF; }
.dvh-strip a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* ---------- Main bar ---------- */
.dvh { position: sticky; top: 0; z-index: 50; background: var(--dvh-card); border-bottom: 1px solid var(--dvh-line); font-family: var(--dvh-text); color: var(--dvh-navy); }
.dvh-in { max-width: 1120px; margin: 0 auto; padding: 0 32px; height: 68px; display: flex; align-items: center; gap: 28px; }
.dvh-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.dvh-brand img { width: 34px; height: 34px; display: block; }
.dvh-brand span { font: 800 22px/1 var(--dvh-display); color: var(--dvh-navy); letter-spacing: -0.01em; }
.dvh-nav { display: flex; align-items: center; gap: 4px; }
.dvh-item { font: 500 15.5px/1 var(--dvh-text); color: var(--dvh-navy); background: transparent; border: 0; height: 44px; padding: 0 14px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; white-space: nowrap; list-style: none; }
summary.dvh-item::-webkit-details-marker, summary.dvh-mb::-webkit-details-marker { display: none; }
.dvh-item:hover { background: var(--dvh-tint); color: var(--dvh-navy); }
.dvh-item[aria-current] { color: var(--dvh-cobalt); }
.dvh-drop[open] > summary.dvh-item { background: var(--dvh-tint-2); color: var(--dvh-cobalt); }
.dvh-chev { flex: none; }
.dvh-drop[open] > summary .dvh-chev { transform: rotate(180deg); }
.dvh-item:focus-visible, .dvh-cta:focus-visible, .dvh-mb:focus-visible, .dvh-panel a:focus-visible, .dvh-sheet a:focus-visible { outline: 2px solid var(--dvh-cobalt); outline-offset: 2px; }
.dvh-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dvh-cta { font: 600 15px/1 var(--dvh-text); background: var(--dvh-cobalt); color: #FFFFFF; height: 44px; padding: 0 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
.dvh-cta:hover { background: var(--dvh-cobalt-d); color: #FFFFFF; }

/* ---------- Desktop dropdown panels ---------- */
.dvh-drop { position: relative; }
.dvh-panel { position: absolute; top: calc(100% + 12px); left: 0; background: var(--dvh-card); border: 1px solid var(--dvh-line); border-radius: 16px;
  box-shadow: 0 18px 40px rgba(23, 42, 110, .14); padding: 20px; z-index: 60; width: 340px; }
.dvh-panel.dvh-r { left: auto; right: 0; }
.dvh-panel.dvh-2col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; }
.dvh-panel.dvh-2col > .dvh-col + .dvh-col { border-left: 1px solid var(--dvh-line); padding-left: 20px; }
.dvh-panel.dvh-2col > .dvh-pfoot { grid-column: 1 / -1; margin-top: 0; }
.dvh-ph { font: 800 12.5px/1.2 var(--dvh-display); letter-spacing: .05em; text-transform: uppercase; color: var(--dvh-muted); margin: 0 0 6px 10px; }
.dvh-pl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; border-radius: 10px; text-decoration: none;
  color: var(--dvh-navy); font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.dvh-pl.dvh-row { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; }
.dvh-pl:hover { background: var(--dvh-tint); color: var(--dvh-navy); }
.dvh-pl small { font-size: 13px; font-weight: 400; color: var(--dvh-muted); }
.dvh-pl.dvh-ico { flex-direction: row; align-items: center; gap: 12px; }
.dvh-pl.dvh-ico img { width: 32px; height: 32px; flex: none; }
.dvh-pl.dvh-ico span { display: flex; flex-direction: column; gap: 2px; }
.dvh-pfoot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dvh-line); display: flex; }
.dvh-pfoot a { font-weight: 600; font-size: 14.5px; text-decoration: none; padding: 6px 10px; color: var(--dvh-cobalt); }
.dvh-pfoot a:hover { color: var(--dvh-cobalt-d); }
.dvh-krow { display: grid; grid-template-columns: 150px 1fr 1fr; align-items: center; gap: 8px; padding: 4px 0; }
.dvh-krow > span { font-size: 15.5px; font-weight: 500; padding-left: 10px; }
.dvh-kl { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border: 1px solid #DCE3FA; border-radius: 10px; background: #FFFFFF;
  text-decoration: none; font-size: 14.5px; color: var(--dvh-cobalt); font-weight: 500; white-space: nowrap; }
.dvh-kl:hover { background: var(--dvh-tint); border-color: #C9D3F5; color: var(--dvh-cobalt); }

/* ---------- Phone menu (details.dvh-menu) ---------- */
.dvh-menu { display: none; }
.dvh-mb { font: 500 14px/1 var(--dvh-text); color: var(--dvh-navy); background: transparent; border: 1px solid #C9D3F5; height: 44px; padding: 0 12px;
  border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.dvh-menu[open] > .dvh-mb { background: var(--dvh-tint-2); border-color: var(--dvh-tint-2); color: var(--dvh-cobalt); }
.dvh-mb .dvh-close, .dvh-menu[open] > .dvh-mb .dvh-open { display: none; }
.dvh-menu[open] > .dvh-mb .dvh-close { display: inline-flex; }
.dvh-mb > span { display: inline-flex; align-items: center; gap: 6px; }
.dvh-sheet { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 60px); height: calc(100dvh - 60px); overflow-y: auto;
  overscroll-behavior: contain; background: var(--dvh-paper); border-top: 1px solid var(--dvh-line); }
.dvh-sec { padding: 20px 16px; border-bottom: 1px solid var(--dvh-line); display: flex; flex-direction: column; gap: 10px; }
.dvh-sec.dvh-last { border-bottom: 0; gap: 8px; }
.dvh-h { font: 800 12.5px/1.2 var(--dvh-display); letter-spacing: .05em; text-transform: uppercase; color: var(--dvh-muted); margin: 0; }
.dvh-big { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; text-decoration: none; color: var(--dvh-navy); }
.dvh-big b { font: 800 19px/1.2 var(--dvh-display); display: block; }
.dvh-big small { font-size: 13.5px; color: var(--dvh-muted); }
.dvh-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dvh-tile { min-height: 52px; padding: 0 14px; border: 1px solid var(--dvh-line); background: #FFFFFF; border-radius: 12px; display: flex; align-items: center;
  text-decoration: none; color: var(--dvh-navy); font-size: 15.5px; font-weight: 500; }
.dvh-tile.dvh-wide { grid-column: 1 / -1; }
.dvh-tile.dvh-all { border-color: #C9D3F5; color: var(--dvh-cobalt); font-weight: 600; }
.dvh-card { min-height: 60px; padding: 10px 14px; border: 1px solid var(--dvh-line); background: #FFFFFF; border-radius: 12px; display: flex; flex-direction: column;
  justify-content: center; gap: 2px; text-decoration: none; color: var(--dvh-navy); font-size: 16px; font-weight: 600; }
.dvh-card small { font-size: 13.5px; font-weight: 400; color: var(--dvh-muted); }
.dvh-card.dvh-ico { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 64px; }
.dvh-card.dvh-ico img { width: 34px; height: 34px; flex: none; }
.dvh-card.dvh-ico span { display: flex; flex-direction: column; gap: 2px; }
.dvh-line { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; color: var(--dvh-navy);
  font-size: 15.5px; font-weight: 500; border-top: 1px solid var(--dvh-line-2); }
.dvh-line:first-child { border-top: 0; }
.dvh-line small { font-size: 13px; color: var(--dvh-muted); font-weight: 400; }
.dvh-mk { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; min-height: 52px; border-top: 1px solid var(--dvh-line-2); }
.dvh-mk:first-child { border-top: 0; }
.dvh-mk > span { font-size: 15.5px; font-weight: 500; }
.dvh-mk .dvh-kl { font-size: 14px; }
.dvh-btn { height: 52px; font-size: 16px; display: flex; width: 100%; }
.dvh-btn.dvh-ghost { background: transparent; color: var(--dvh-navy); border: 1px solid #C9D3F5; }
.dvh-btn.dvh-ghost:hover { background: var(--dvh-tint); color: var(--dvh-navy); }
.dvh-dv { background: var(--dvh-cobalt); padding: 20px 16px 28px; display: flex; flex-direction: column; }
.dvh-dv .dvh-h { color: #C9D3F5; margin-bottom: 8px; }
.dvh-dv a { min-height: 52px; display: flex; flex-direction: column; justify-content: center; text-decoration: none; color: #FFFFFF; font-size: 16px; font-weight: 600;
  border-top: 1px solid rgba(255, 255, 255, .18); }
.dvh-dv a small { font-size: 13.5px; font-weight: 400; color: #DCE3FA; }

@media (max-width: 879px) {
  .dvh-strip { display: none; }
  .dvh-in { height: 60px; padding: 0 12px 0 16px; gap: 8px; }
  .dvh-brand { margin-right: auto; gap: 8px; }
  .dvh-brand img { width: 30px; height: 30px; }
  .dvh-brand span { font-size: 19px; }
  .dvh-nav, .dvh-login { display: none; }
  .dvh-right { margin-left: 0; }
  .dvh-cta { font-size: 14px; padding: 0 14px; }
  .dvh-menu { display: block; }
  .dvh:has(.dvh-menu[open]) .dvh-right > .dvh-cta { display: none; }
  html:has(.dvh-menu[open]) { overflow: hidden; }
}

/* ---------- Root (desaverse.com) variant: cobalt bar, lockup, no strip, no CTA ---------- */
.dvh.dvh-root { background: var(--dvh-root-bg, #2448D8); border-bottom: 0; color: #FFFFFF; }
.dvh-root .dvh-in { height: 76px; }
.dvh-root .dvh-brand img { width: 194px; height: 40px; }
.dvh-root .dvh-nav { margin-left: auto; }
.dvh-root .dvh-item { color: #FFFFFF; }
.dvh-root .dvh-item:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.dvh-root .dvh-drop[open] > summary.dvh-item { background: #FFFFFF; color: var(--dvh-cobalt); }
.dvh-root .dvh-item.dvh-pill { border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; padding: 0 18px; margin-left: 8px; }
.dvh-root .dvh-item:focus-visible, .dvh-root .dvh-mb:focus-visible { outline-color: #FFFFFF; }
.dvh-root .dvh-panel { box-shadow: 0 18px 40px rgba(23, 42, 110, .22); padding: 14px; }
.dvh-root .dvh-mb { color: #FFFFFF; border-color: rgba(255, 255, 255, .55); }
.dvh-root .dvh-menu[open] > .dvh-mb { background: #FFFFFF; border-color: #FFFFFF; color: var(--dvh-cobalt); }
@media (max-width: 879px) {
  .dvh-root .dvh-in { height: 60px; }
  .dvh-root .dvh-brand img { width: 160px; height: 33px; }
  .dvh-root .dvh-right { margin-left: auto; }
}

/* desaverse.com root: the bar uses the site cobalt (--cobalt in assets/style.css). */
.dvh.dvh-root { --dvh-root-bg: #2448D8; }

/* phone menu: cobalt Desaverse block fills to the bottom when the sheet is short */
.dvh-sheet { display: flex; flex-direction: column; }
.dvh-sheet > .dvh-dv { flex: 1 0 auto; }