/* Member area re-brand: swap Poppins for Cera GR (see web/assets/css/font.css
   for the source .otf files used sitewide). member-area.css is generated and
   sets --font-primary itself, so this file is loaded after it to win the
   cascade instead of editing the generated file directly. */

@font-face {
  font-family: 'Cera GR';
  src: url('/web/assets/font/Cera GR.woff2') format('woff2'),
       url('/web/assets/font/Cera GR.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cera GR';
  src: url('/web/assets/font/Cera GR Medium.woff2') format('woff2'),
       url('/web/assets/font/Cera GR Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cera GR';
  src: url('/web/assets/font/Cera GR Bold.woff2') format('woff2'),
       url('/web/assets/font/Cera GR Bold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cera GR';
  src: url('/web/assets/font/Cera GR Black.woff2') format('woff2'),
       url('/web/assets/font/Cera GR Black.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-primary: 'Cera GR';
}

/* Login modal captcha: member-area.css only sizes the old placeholder
   <svg> inside .captcha-box (0 0 400 90 viewBox stretched to fill). The
   real captcha is a plain <img> now (see ajax_captcha.cfm), so mirror the
   same fill-the-box sizing for it. */
.captcha-box img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Login modal server-side error banner (wrong credentials/captcha), shown
   above the fields when loginModal() is rendered with an errorMsg. */
.login-fail-msg {
  font-size: 13px;
  color: var(--error);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 4px;
}

/* Mobile nav: member-area.css hides .nav-links and shows .nav-toggle at
   <=860px (see its own @media 860px block) but never styles an open state
   for .nav-links — nav-toggle.js in member-area.js toggles this class.

   .nav-links stays laid out (flex column, absolutely positioned) in both
   states here rather than using display:none — display can't be
   transitioned, so opacity/transform/visibility carry the open/close
   animation instead, the same technique member-area.css already uses for
   the desktop .dropdown-panel fade (see its .dropdown-panel rule above). */
@media (max-width: 860px) {
  .nav {
    position: relative;
  }
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    padding: 18px 20px;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-links .has-dropdown {
    width: 100%;
  }
  /* Sub-menu (Produk) collapses via max-height instead of display:none —
     same reasoning as .nav-links above, so it can animate open/closed
     instead of snapping, and its collapsed state no longer reserves the
     full open height as blank space between "Produk" and "FAQ". */
  .nav-links .dropdown-panel {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition:
      max-height 0.3s ease,
      opacity 0.2s ease,
      padding 0.3s ease,
      visibility 0.2s;
  }
  /* member-area.css's .has-dropdown.open .dropdown-panel rule re-asserts
     transform: translateX(-50%) translateY(0) (the desktop centering) at
     higher specificity than the closed-state transform: none above, so it
     has to be re-cancelled here too, once the panel is actually open. */
  .nav-links .has-dropdown.open .dropdown-panel {
    max-height: 900px;
    padding-top: 18px;
    padding-bottom: 18px;
    transform: none;
  }
}