html { scroll-behavior:smooth; scroll-padding-top:100px; background:#0B1120; color-scheme:dark; }
  section[id] { scroll-margin-top:96px; }
  body { background:#0B1120; color:#fff; overflow-x:hidden; }
  /* Grid halus di latar belakang */
  .bg-grid { background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse at 50% 20%,#000 30%,transparent 75%); }
  /* Efek kaca */
  .glass { background:rgba(255,255,255,.05); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid rgba(255,255,255,.1); border-radius:1rem; }
  .gradient-text { background:linear-gradient(90deg,#60A5FA,#A78BFA); -webkit-background-clip:text; background-clip:text; color:transparent; }
  /* Hover card bento: border menyala + terangkat */
  .lift { transition:all .3s ease; }
  .lift:hover { transform:translateY(-6px); border-color:rgba(96,165,250,.6); box-shadow:0 0 32px -6px rgba(96,165,250,.45); }
  .lift-red:hover { border-color:rgba(248,113,113,.6); box-shadow:0 0 32px -6px rgba(248,113,113,.4); }
  .orb { position:absolute; border-radius:9999px; filter:blur(110px); pointer-events:none; }
  .field { width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:.75rem; padding:.85rem 1rem; min-height:2.9rem; color:#fff; font-size:1rem; }
  .field:focus { outline:2px solid #60A5FA; outline-offset:1px; }
  .pop { animation:pop .5s ease both; }
  @keyframes pop { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
  details summary { cursor:pointer; list-style:none; }
  details summary::-webkit-details-marker { display:none; }
  details[open] .chev { transform:rotate(180deg); }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline:2px solid #60A5FA; outline-offset:3px; }
  @media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }
  .codeblock { background:rgba(2,6,23,.7); border:1px solid rgba(255,255,255,.1); border-radius:.75rem; padding:1rem 1.25rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.78rem; line-height:1.7; color:#93c5fd; overflow-x:auto; white-space:pre; }
  .codeblock .dim { color:#64748b; }
  .codeblock .val { color:#e2e8f0; }
  .tier { display:inline-flex; align-items:center; gap:.5rem; border-radius:9999px; padding:.35rem .9rem; font-size:.72rem; font-weight:700; letter-spacing:.02em; border:1px solid; }
  .tier-live { color:#4ade80; border-color:rgba(74,222,128,.35); background:rgba(74,222,128,.08); }
  .tier-code { color:#60a5fa; border-color:rgba(96,165,250,.35); background:rgba(96,165,250,.08); }
  .tier-server { color:#fbbf24; border-color:rgba(251,191,36,.35); background:rgba(251,191,36,.08); }
  @media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }


/* Keep intrinsic code widths within their cards on phones. */
.grid > * { min-width:0; }
#pusat-keamanan a { overflow-wrap:anywhere; }
.codeblock { max-width:100%; }