/*
 * The contact page (view/storefront/page/contact.html) — /kontak and
 * /kontak/terkirim: the design's boards Contact (1440 px) and MContact
 * (390 px); there is no tablet board. Ported from the <style> blocks of
 * design/source/src/pages/Contact.html and MContact.html; the markup's
 * style="" attributes became the classes marked "was inline" (the CSP
 * forbids them).
 *
 * One grid holds the form, the info card and the common questions: side by
 * side from tablet up (the questions under the info card), in the phone
 * board's order below that — the info card first, then the form, then the
 * questions.
 */

.aa > main.kt-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0 88px;
}

/* ---------- Hero ---------- */

.aa .kt-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aa .kt-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
  color: var(--primary);
}

/* The lead keeps the design's measure (was inline: max-width 760 px). */
.aa .kt-lead {
  max-width: 760px;
}

/* ---------- The four ways to reach the shop ---------- */

/*
 * Equal columns for however many channels the shop configured (the design
 * draws four; a missing WhatsApp number or address drops its card).
 */
.aa .kt-channels {
  display: flex;
  gap: 16px;
}

.aa .kt-ch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  padding: 24px;
  border-radius: 28px;
  background: var(--aa-raised);
  box-shadow: var(--elevate1);
}

/* Desktop: the text's parts take part in the card's own column. */
.aa .kt-ch .tx {
  display: contents;
}

.aa .kt-ch .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
}

.aa .kt-ch .v {
  font-size: 15px;
  line-height: 22px;
  font-weight: 650;
  color: var(--on-surface);
  overflow-wrap: anywhere;
}

.aa .kt-ch .d {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 21px;
  color: var(--on-surface-variant);
}

/* The dark band; its icon's colours as properties, so dark mode changes
   them without a selector more specific than the other icons' (Biome's
   noDescendingSpecificity). */
.aa .kt-ch.is-bespoke {
  --kt-ic-bg: var(--inverse-primary);
  --kt-ic-fg: #001c39;
  background: var(--aa-band);
  color: var(--aa-on-band);
}

.aa.dark .kt-ch.is-bespoke {
  --kt-ic-bg: var(--primary);
  --kt-ic-fg: var(--on-primary);
}

.aa .kt-ch.is-bespoke .v {
  color: var(--aa-on-band);
}

.aa .kt-ch.is-bespoke .d {
  color: var(--aa-band-muted);
}

.aa .is-bespoke .ic {
  background-color: var(--kt-ic-bg);
  color: var(--kt-ic-fg);
}

/* ---------- The form, the info card, the questions ---------- */

.aa .kt-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  grid-template-areas:
    "form info"
    "form faq";
  grid-template-rows: auto 1fr;
  gap: 16px 32px;
  align-items: start;
}

.aa .kt-form {
  grid-area: form;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px;
  border-radius: 32px;
  background: var(--aa-raised);
  box-shadow: var(--elevate1);
}

/* Title and intro (was inline). */
.aa .kt-formhead {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aa .kt-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--error-container);
  color: var(--on-error-container);
  font-size: 14px;
  line-height: 20px;
}

/* The form's column of fields (was inline). */
.aa .kt-fields {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.aa .kt-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 16px;
  align-items: start;
}

/* The fields of the other topic hide once app.js switches them; without
   JavaScript both show (the server reads what the topic needs). */
html.js .aa .kt-when.is-off {
  display: none;
}

.aa .kt-bespoke {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  background: var(--aa-inset);
}

.aa .kt-bespoke .t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
  color: var(--on-surface);
}

/* The title's icon (was inline; :where(): as specific as any icon rule
   here, see .kt-ch.is-bespoke). */
.aa .kt-bespoke :where(.t) > i {
  color: var(--primary);
}

.aa .kt-send {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 6px;
}

/* The consent line (was inline: max-width 440 px). */
.aa .kt-note {
  max-width: 440px;
}

.aa .kt-note .aa-link {
  font-weight: 500;
}

/* Sent: the card in the form's place. */
.aa .kt-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 32px;
  text-align: center;
}

.aa .kt-sent p {
  max-width: 480px;
}

/* The tick (was inline). */
.aa .kt-sent-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  background-color: var(--aa-success-container);
  color: var(--aa-on-success-container);
}

.aa .kt-sent-ic > i {
  --_size: 44px;
  font-size: 44px;
}

.aa .kt-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 28px;
  background: var(--aa-raised);
  box-shadow: var(--elevate1);
}

.aa .kt-info > div {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
}

.aa .kt-info .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}

/* Label above value (was inline). */
.aa .kt-info-tx {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The company's name (decision 110): the value's own look, a link to the
   company's site with its new-tab mark beside it; the hit area hugs the
   words. */
.aa .kt-coname {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  color: inherit;
}

.aa .kt-coname:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aa .kt-coname > i {
  --_size: 16px;
  font-size: 16px;
  color: var(--primary);
}

.aa .kt-faq {
  grid-area: faq;
  display: flex;
  flex-direction: column;
  padding: 20px 8px 8px;
  border-radius: 28px;
  background: var(--aa-raised);
  box-shadow: var(--elevate1);
  scroll-margin-top: 24px;
}

.aa .kt-faq > h2 {
  padding: 0 16px 10px;
}

.aa .kt-faq details {
  border-radius: 18px;
}

.aa .kt-faq details + details {
  border-top: 1px solid var(--outline-variant);
  border-radius: 0;
}

.aa .kt-faq summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px 8px 16px;
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.aa .kt-faq summary::-webkit-details-marker {
  display: none;
}

.aa .kt-faq summary i {
  margin-left: auto;
  flex: none;
  color: var(--on-surface-variant);
  transition: transform var(--speed2);
}

.aa .kt-faq details[open] summary i {
  transform: rotate(180deg);
}

.aa .kt-faq details p {
  padding: 0 16px 16px;
  font-size: 14px;
  line-height: 21px;
  color: var(--on-surface-variant);
}

/* "Lihat semua pertanyaan" (the design's: at the start, 4 px around; was inline). */
.aa .kt-faqall {
  align-self: flex-start;
  margin: 4px;
}

/* ---------- Desktop widths the design never drew (993–1279 px) ---------- */

@media (min-width: 993px) and (max-width: 1279px) {
  .aa .kt-ch {
    padding: 20px;
  }

  .aa .kt-cols {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px 24px;
  }
}

/* ---------- Tablet (601–992 px; no board) ---------- */

@media (min-width: 601px) and (max-width: 992px) {
  .aa > main.kt-main {
    gap: 32px;
    padding: 24px 0 64px;
  }

  /* Two channels a row. */
  .aa .kt-channels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The phone's order in one column, wider. */
  .aa .kt-cols {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "info"
      "form"
      "faq";
    grid-template-rows: none;
    gap: 20px;
  }
}

/* ---------- Phone (≤ 600 px: the design's MContact) ---------- */

@media (max-width: 600px) {
  .aa > main.kt-main {
    gap: 20px;
    padding: 4px 0 32px;
  }

  .aa .kt-hero {
    gap: 6px;
  }

  /* The phone board's h1 is the smaller headline (t-hs). */
  .aa .kt-h1 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 660;
    letter-spacing: -0.2px;
  }

  /* Body medium (t-bm) on the phone board. */
  .aa .kt-lead {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
  }

  /* The channels as rows: the icon beside the text (MContact's mk-ch). */
  .aa .kt-channels {
    flex-direction: column;
    gap: 10px;
  }

  .aa .kt-ch {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px;
    border-radius: 24px;
  }

  .aa .kt-ch .tx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
  }

  .aa .kt-ch .ic {
    width: 44px;
    height: 44px;
  }

  /* Title small (t-ts) on the phone board. */
  .aa .kt-ch h2 {
    font-size: 14px;
    line-height: 20px;
  }

  .aa .kt-ch .v {
    font-size: 14px;
    line-height: 20px;
  }

  .aa .kt-ch .d {
    font-size: 13px;
    line-height: 19px;
    margin-bottom: 6px;
  }

  .aa .kt-cols {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "info"
      "form"
      "faq";
    grid-template-rows: none;
    gap: 20px;
  }

  .aa .kt-form {
    gap: 18px;
    padding: 20px 16px;
    border-radius: 28px;
  }

  .aa .kt-formhead {
    gap: 4px;
  }

  /* t-tl emph and t-bs on the phone board. */
  .aa .kt-formhead h2 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 650;
    letter-spacing: normal;
  }

  .aa .kt-formhead p {
    font-size: 12px;
    line-height: 16px;
  }

  .aa .kt-fields {
    gap: 18px;
  }

  .aa .kt-grid2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .aa .kt-bespoke {
    padding: 16px;
    border-radius: 20px;
  }

  /* The button first, the consent line under it (MContact). */
  .aa .kt-send {
    flex-direction: column-reverse;
    align-items: stretch;
    padding-top: 0;
  }

  /* A plain <button> is content-box in BeerCSS: full width needs border-box. */
  .aa .kt-send > button {
    width: 100%;
    box-sizing: border-box;
  }

  .aa .kt-info {
    gap: 14px;
    padding: 16px;
  }

  .aa .kt-info > div {
    gap: 12px;
    padding: 0;
  }

  .aa .kt-faq {
    padding: 18px 4px 6px;
  }

  .aa .kt-sent {
    gap: 14px;
    padding: 24px 8px;
  }

  .aa .kt-sent-ic {
    width: 96px;
    height: 96px;
  }

  .aa .kt-sent-ic > i {
    --_size: 40px;
    font-size: 40px;
  }
}