/* Magna Kimia — gaya dasar. Sebagian besar gaya ada langsung di HTML. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
a { color: #0F3D5E; }
a:hover { color: #0A2740; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #C9A46A;
  outline-offset: 2px;
}
input:focus { border-color: #0F3D5E !important; outline: none; }
.pill { transition: background-color .15s, color .15s; }
.product a:hover, a[href^="https://wa.me"]:hover { filter: brightness(0.96); }

/* Tablet & HP */
@media (max-width: 760px) {
  h1 { font-size: 34px !important; }
  h2 { font-size: 26px !important; }
  nav a { padding: 10px 10px !important; }
  .product h2 { font-size: 18px !important; }
  .product > div:first-child { min-height: 88px !important; gap: 8px; }
  .product > div:first-child > span { font-size: 28px !important; }
}
@media (max-width: 480px) {
  h1 { font-size: 30px !important; }
  section div[style*="padding: 48px"], section div[style*="padding: 40px"] { padding: 24px !important; }
  form { padding: 20px !important; }
}