/* Popup "Join Us" (js/join.js) */
.join { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
.join.is-open { visibility: visible; opacity: 1; }
.join__bg { position: absolute; inset: 0; background: rgba(2, 10, 40, .58); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.join__card {
  position: relative; width: min(520px, 100%); padding: clamp(26px, 4vw, 40px); outline: none;
  transform: translateY(24px) scale(.97); opacity: 0; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .35s;
  background-color: rgba(255, 255, 255, .5);        /* dasar kaca agar teks tetap kontras di atas overlay */
}
.join.is-open .join__card { transform: none; opacity: 1; }
.join__card h2 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -.03em; line-height: 1.05; margin: 10px 0 8px; }
.join__lead { color: var(--text-soft); font-size: 15px; margin-bottom: 22px; }
.join__x { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass-fill); font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.join__x:hover { background: var(--blue); color: var(--on-blue); }

.join__list { display: grid; gap: 12px; }
.join__item { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--glass-fill); color: inherit; transition: transform .25s, border-color .25s, background .25s; }
.join__item:hover, .join__item:focus-visible { transform: translateY(-3px); border-color: var(--pin); background: rgba(255, 255, 255, .22); }
.join__ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); }
.join__ic svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.join__tx { display: grid; flex: 1; min-width: 0; }
.join__tx small { font: 600 11px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ice); }
.join__tx b { font: 700 clamp(17px, 2vw, 20px) var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.join__tx em { font-style: normal; color: var(--text-soft); font-size: 13px; }
.join__go { font-style: normal; font-size: 20px; transition: transform .25s; }
.join__item:hover .join__go { transform: translateX(5px); }

html.join-open { overflow: hidden; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .join__card { background-color: rgba(14, 22, 48, .72); } }
:root[data-theme="dark"] .join__card { background-color: rgba(14, 22, 48, .72); }
@media (max-width: 520px) {
  .join { align-items: end; padding: 12px; }
  .join__card { border-radius: 26px; }
  .join__item { padding: 14px; gap: 12px; }
  .join__ic { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .join, .join__card { transition: none; } }