:root{
      /* ===== PALET WARNA UNIVERSITAS TERBUKA (dapat disesuaikan) ===== */
      --ut-navy:#003366;      /* biru utama */
      --ut-blue:#0055A5;      /* biru sekunder */
      --ut-gold:#FFC20E;      /* aksen emas */

      /* ===== Turunan UI ===== */
      --bg1:#f6f9ff;          /* latar terang */
      --bg2:#ffffff;          /* panel */
      --ink:#0f1f3a;          /* teks */
      --muted:#4a5a73;        /* teks sekunder */
      --line:#e6edf6;         /* garis lembut */
      --pri:var(--ut-navy);
      --sec:var(--ut-blue);
      --acc:var(--ut-gold);
      --sun:#fff6db;          /* highlight hangat */
      --leaf:#37cd8f;         /* aksen tropis lembut */
      --shadow: 0 12px 32px rgba(0,26,51,.10);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; color:var(--ink);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background:
        radial-gradient(900px 420px at 85% 8%, var(--sun) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(180deg, var(--bg1), var(--bg2));
    }

    /* ===== Header ===== */
    header{max-width:1200px; margin:22px auto 10px; padding:0 20px}
    .brand{display:flex; align-items:center; gap:14px}
    .ut-logo{height:46px; width:auto; display:block; object-fit:contain}
    .brand-title{display:flex; flex-direction:column}
    h1{font-size:clamp(22px,3vw,32px); margin:0; color:var(--pri); letter-spacing:.2px}
    .subtitle{opacity:.85; color:var(--muted); margin-top:6px}

    /* ===== Shell ===== */
    .wrap{max-width:1200px; margin:16px auto; padding:0 16px}
    .panel{background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); overflow:hidden}

    /* ===== Quick links (mobile only) ===== */
    .quick{display:none; grid-template-columns:repeat(2,1fr); gap:10px; padding:14px; border-top:1px dashed var(--line); background:linear-gradient(180deg, rgba(255,255,255,.7), #fff)}
    .qbtn{display:flex; align-items:center; gap:10px; padding:12px; border-radius:12px; text-decoration:none; color:var(--ink); background:#fff; border:1px solid var(--line); box-shadow:0 6px 16px rgba(0,0,0,.04); transition:transform .18s ease, box-shadow .18s ease}
    .qbtn:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.08)}
    .dot{width:10px; height:10px; border-radius:50%; background:var(--pri); box-shadow:0 0 0 3px rgba(0,51,102,.12)}

    /* bikin dot beda-beda warna per item + layer agar selalu bisa diklik */
    .quick { position: relative; z-index: 10; }

    /* Warna dot per urutan item */
    .quick .qbtn:nth-child(1) .dot { background:#0b61a4; box-shadow:0 0 0 3px rgba(11,97,164,.12); } /* Panutan (UT blue) */
    .quick .qbtn:nth-child(2) .dot { background:#1ea7ff; box-shadow:0 0 0 3px rgba(30,167,255,.12); } /* SIPPP */
    .quick .qbtn:nth-child(3) .dot { background:#ff6b6b; box-shadow:0 0 0 3px rgba(255,107,107,.12); } /* Promise */
    .quick .qbtn:nth-child(4) .dot { background:#f25022; box-shadow:0 0 0 3px rgba(242,80,34,.12); }  /* Office 365 */
    .quick .qbtn:nth-child(5) .dot { background:#4285f4; box-shadow:0 0 0 3px rgba(66,133,244,.12); }  /* Google */
    .quick .qbtn:nth-child(6) .dot { background:#ffc20e; box-shadow:0 0 0 3px rgba(255,194,14,.18); }  /* Sisma */

    @media (max-width: 768px){
      /* Pastikan SVG tidak “menutupi” klik di mobile */
	  .panel svg { pointer-events:none; }
    }


    /* Tampilkan quick links hanya pada layar kecil */
    @media (max-width: 768px){
      .quick{display:grid}
    }

    footer{max-width:1200px; margin:12px auto 36px; padding:0 20px; color:var(--muted)}

    /* ===== SVG Scene ===== */
    svg{width:100%; height:auto; display:block}
    .desk{cursor:pointer}
    .desk:focus, .desk:hover{filter: drop-shadow(0 14px 24px rgba(0,0,0,.16))}
    .cap{font:600 14px/1.1 Inter, system-ui, Segoe UI, Roboto, Arial; fill:var(--pri)}
    .sub{font:400 11px/1 Inter, system-ui, Segoe UI, Roboto, Arial; fill:#4a5a73; opacity:.95}

    /* Opsional dark mode */
    @media (prefers-color-scheme: dark){
      :root{ --bg1:#0c1a2b; --bg2:#0f2138; --ink:#e7eef7; --muted:#b9c6d3; --line:#16314f; --shadow:0 14px 36px rgba(0,0,0,.4)}
      .panel{background:#0f2138}
      .qbtn{background:#0f2138}
      .cap{fill:#e7eef7}
      .sub{fill:#c7d4e3}
    }

.logo {
  max-width: 200px;
  height: auto;
}