/* Brand kit — lihat CLAUDE.md. Warna diambil dari assets/logo.pdf */
:root {
  --red: #ed1c24;
  --red-deep: #be1e2d;
  --navy: #2e3192;
  --cyan: #00aeef; /* hanya ujung gradien Garis Fondasi */
  --ink: #3c3c3c;
  --paper: #ffffff;
  --mist: #f4f4f2;
  --line: rgb(60 60 60 / 0.12);

  --roof: linear-gradient(110deg, var(--red) 0%, var(--red-deep) 100%);
  --foundation: linear-gradient(90deg, var(--cyan) 0%, var(--navy) 70%);

  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --r-tag: 2px; --r-btn: 4px; --r-card: 4px;
  --container: 1240px;
  --gutter: 20px;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.6 var(--font-body);
}
@media (min-width: 1024px) { body { font-size: 1.0625rem; } }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.1; letter-spacing: 0.005em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* Garis Fondasi — garis dasar miring dari logo */
.foundation { display: block; height: 6px; width: 96px; background: var(--foundation); transform: skewX(-30deg); transform-origin: left; }

/* Placeholder foto — wajib berlabel */
.ph {
  position: relative; background-color: #e9e9e6;
  background-image: repeating-linear-gradient(135deg, rgb(60 60 60 / 0.07) 0 2px, transparent 2px 14px);
  display: flex; align-items: flex-end; overflow: hidden;
}
.ph > span {
  font: 600 0.75rem/1.3 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); padding: 6px 10px; margin: 12px; border-radius: var(--r-tag);
}

/* Menu mobile tanpa JS */
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }