/* ==========================================================================
   HUBUNGI KAMI — contact page
   Ported verbatim from the scoped <style> block of src/pages/hubungi.astro.

   Enqueued ONLY on this page. That is load-bearing, not an optimisation:
   several class names here (.project, .explain, .benefit, .step, .cta,
   .prose, .faq-aside) are reused across pages with conflicting rules, and
   Astro's per-file scoping is what kept them apart. Keeping each page's
   rules in a file that loads on that page alone reproduces that isolation.
   Do not merge these into one stylesheet.
   ========================================================================== */

  .contact {
    display: grid;
    gap: var(--space-xl);
    align-items: start;
  }

  @media (min-width: 62rem) {
    .contact {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: var(--space-2xl);
    }
  }

  .contact h2 {
    font-size: var(--step-3);
    margin-bottom: var(--space-m);
  }

  /* --- Channels --- */
  .channel {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s) var(--space-m);
    background: var(--stone-000);
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    text-decoration: none;
    color: inherit;
    margin-bottom: var(--space-xs);
    transition:
      border-color 0.18s var(--ease-out),
      box-shadow 0.18s var(--ease-out);
  }

  .channel:hover {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-s);
  }

  /* An unconfirmed channel is shown, but never as something you can tap. */
  .channel--primary {
    background: var(--action-100);
    border-color: var(--action-border);
  }

  .channel--primary:hover {
    border-color: var(--action-600);
  }

  .channel__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-s);
    background: var(--stone-100);
    color: var(--graphite-700);
  }

  .channel--primary .channel__icon {
    background: var(--action-600);
    color: #fff;
  }

  .channel__body {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
  }

  .channel__label {
    font-size: var(--step--4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--graphite-500);
  }

  .channel__value {
    font-size: var(--step-0);
    font-weight: 700;
    color: var(--graphite-900);
    overflow-wrap: anywhere;
  }

  .channel__hint {
    font-size: var(--step--2);
    color: var(--graphite-600);
    line-height: 1.4;
  }

  .channel .channel__go {
    margin-left: auto;
    flex: none;
    color: var(--action-700);
  }

  /* --- Meta list --- */
  .meta {
    margin: var(--space-m) 0 0;
    display: grid;
    gap: var(--space-s);
    padding-top: var(--space-m);
    border-top: 1px solid var(--rule);
  }

  .meta dt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--step--4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--graphite-500);
  }

  .meta dt svg {
    color: var(--brand-600);
  }

  .meta dd {
    margin: 0.25rem 0 0 1.625rem;
    font-size: var(--step--1);
    color: var(--graphite-700);
    line-height: 1.5;
  }

  /* --- Form --- */
  .contact__form {
    padding: var(--space-l);
    background: var(--stone-000);
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-s);
  }

  @media (max-width: 34rem) {
    .contact__form {
      padding: var(--space-m);
    }
  }

  .form-intro {
    margin-bottom: var(--space-m);
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--graphite-600);
    max-width: 52ch;
  }

  .field {
    margin-bottom: var(--space-m);
  }

  .field label {
    display: block;
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--graphite-900);
    margin-bottom: 0.375rem;
  }

  .field label span {
    color: var(--rust-600);
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    min-height: 3rem;
    background: var(--stone-050);
    border: 1.5px solid var(--rule-strong);
    border-radius: var(--radius-s);
    font-size: var(--step-0);
    line-height: 1.5;
    color: var(--graphite-900);
    transition: border-color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
  }

  .field textarea {
    resize: vertical;
    min-height: 6rem;
  }

  .field input::placeholder,
  .field textarea::placeholder {
    color: var(--input-placeholder);
  }

  .field input:hover,
  .field select:hover,
  .field textarea:hover {
    border-color: var(--graphite-500);
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    background: #fff;
    border-color: var(--brand-600);
  }

  .field .is-invalid {
    border-color: var(--rust-600);
    background: var(--rust-100);
  }

  .field__error {
    margin-top: 0.375rem;
    font-size: var(--step--2);
    font-weight: 600;
    color: var(--rust-700);
  }

  .form-note {
    margin-top: var(--space-s);
    font-size: var(--step--3);
    line-height: 1.5;
    color: var(--graphite-500);
  }

  .form-note--warn {
    color: var(--rust-700);
    font-weight: 600;
  }

  /* --- Process --- */
  .steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-l);
  }

  @media (min-width: 44rem) {
    .steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-l) var(--space-2xl);
    }
  }

  @media (min-width: 72rem) {
    .steps {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .step {
    display: flex;
    gap: var(--space-s);
  }

  .step__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--graphite-900);
    color: #fff;
    font-weight: 800;
    font-size: var(--step-0);
  }

  .step h3 {
    font-size: var(--step-1);
    line-height: 1.3;
    margin-top: 0.25rem;
  }

  .step p {
    margin-top: 0.5rem;
    color: var(--graphite-600);
    font-size: var(--step--1);
    line-height: 1.6;
  }

  /* --- Map --- */
  .map {
    aspect-ratio: 16 / 7;
    border-radius: var(--radius-m);
    overflow: hidden;
    border: 1px solid var(--rule);
  }

  .map iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }