/* ==========================================================================
   Halaman Contact — tampilan final

   Berkas ini dimuat paling akhir dan sengaja memegang seluruh tampilan
   halaman Contact, karena di style.css ada dua blok kontak lama yang saling
   menimpa. Nilai warna dan ukuran di sini diambil langsung dari render
   Figma (frame Mobile - Contact Us), bukan perkiraan.
   ========================================================================== */

/* --- 1. Tata letak ------------------------------------------------------- */
/* Di Figma versi mobile urutannya: judul, formulir, lalu blok kontak.
   Di desktop blok kontak kembali ke kolom kiri di bawah judul. */
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "intro form"
    "intro form";
  align-items: start;
  gap: var(--sp-8) var(--sp-10);
}
.contact__intro { grid-area: intro; min-width: 0; align-self: end; }
.contact .form-card { grid-area: form; min-width: 0; }
.contact__rows { display: none; }

/* --- 2. Judul dan teks pengantar ----------------------------------------- */
.contact__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--sp-5);
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d6cec5; /* diambil dari render Figma */
}

.contact__title {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white-100);
}

.contact__lede {
  margin: 0 0 var(--sp-5);
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
}
.contact__lede:last-child { margin-bottom: 0; }

/* --- 3. Blok Email / Phone / Location ------------------------------------ */
.contact__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin: 0;
}
.contact__row { margin: 0; }
.contact__row dt {
  margin: 0 0 4px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.52);
}
.contact__row dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.contact__row a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.contact__row a:hover { color: var(--white-100); }

/* --- 4. Kartu formulir --------------------------------------------------- */
.contact .form-card {
  position: relative;
  overflow: hidden;
  /* style.css memateri lebarnya di 490px, jadi tepi kanannya tidak pernah
     sampai ke garis navbar. Di sini dilepas supaya mengisi kolomnya. */
  flex: none;
  width: 100%;
  max-width: none;
  padding: clamp(24px, 3.2vw, 38px);
  border: 0;
  border-radius: 24px;
  /* Isi kartu agak tembus pandang supaya cahaya oranye di belakangnya
     masih terbaca di tepi, persis seperti di Figma. */
  background: rgba(2, 2, 2, 0.82);
  transition: height 520ms var(--ease-out);
}

/* Stroke highlight: terang di tepi atas lalu melemah ke bawah. Digambar
   sebagai cincin satu piksel memakai mask, supaya isi kartu tidak ikut
   terwarnai. */
.contact .form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.44) 0%,
    rgba(255, 255, 255, 0.2) 18%,
    rgba(255, 255, 255, 0.2) 62%,
    rgba(255, 255, 255, 0.04) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.form-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.form-card__title {
  margin: 0;
  /* Satu baris selama muat; baru turun ke dua baris kalau ruangnya
     tidak cukup dan judulnya akan menabrak dot di kanan. */
  min-width: 0;
  font-size: clamp(1.75rem, 2.4vw, 2.1875rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--white-100);
}

/* Titik kecil di ujung kanan judul, sesuai vector 12x12 di Figma.
   Bernapas sekaligus menyala, berulang terus. */
.form-card__dot {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
  border: 1.5px solid rgba(248, 97, 59, 0.85);
  border-radius: 50%;
  animation: dot-breathe 3.4s ease-in-out infinite;
}
.form-card__dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--orange-100);
}
@keyframes dot-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 6px 0 rgba(248, 97, 59, 0.4);
  }
  50% {
    transform: scale(1.14);
    box-shadow: 0 0 15px 3px rgba(248, 97, 59, 0.75);
  }
}

/* --- 5. Isian ------------------------------------------------------------ */
.form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.contact .field { display: block; }
.contact .field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}
.contact .field__req { color: var(--orange-100); }

.contact .field__input {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #282828; /* diambil dari render Figma */
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--white-100);
  transition: background 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.contact textarea.field__input {
  min-height: 112px;
  resize: vertical;
}
.contact .field__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.contact .field__input:hover { background: #2f2f2f; }

/* Keadaan aktif dibuat jelas lebih putih dan lebih terang daripada
   keadaan diam, supaya mudah terlihat sedang diisi yang mana. */
.contact .field__input:focus,
.contact .field__input:focus-visible {
  outline: none;
  background: #343434;
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* --- 6. Project Type: pilihan ganda -------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: #282828;
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    transform 0.2s var(--ease-out);
}
.chip:hover {
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--white-100);
}
.chip:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}
.chip[aria-pressed="true"] {
  background: linear-gradient(
    135deg,
    rgba(248, 97, 59, 0.28),
    rgba(250, 150, 124, 0.14)
  );
  border-color: var(--orange-100);
  color: var(--white-100);
}
.chip[aria-pressed="true"]:hover { border-color: var(--orange-20); }

/* Kolom tambahan yang muncul kalau "Other" dipilih */
.field__sub { margin-top: var(--sp-4); }
.field__sub[hidden] { display: none; }
.js-anim .field__sub {
  animation: sub-open 320ms var(--ease-out) both;
}
@keyframes sub-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* --- 7. Pesan kesalahan -------------------------------------------------- */
.contact .field__error {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--error);
}
.contact .field__error svg { width: 14px; height: 14px; flex: none; }
.contact .field[data-invalid="true"] .field__error { display: flex; }
.contact .field[data-invalid="true"] .field__input {
  border-color: var(--error);
  background: var(--error-soft);
}
.contact .field[data-invalid="true"] .field__input:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.18);
}
.contact .field--types[data-invalid="true"] .chips .chip {
  border-color: rgba(255, 92, 92, 0.55);
}

/* --- 8. Tombol kirim ----------------------------------------------------- */
.contact .btn--submit {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1c1c1c;
  cursor: pointer;
  transition: filter 0.25s ease, box-shadow 0.25s ease,
    transform 0.25s var(--ease-out);
}
/* Cahaya hover sama seperti tombol di homepage, sedikit lebih kuat. */
.contact .btn--submit:hover {
  filter: brightness(0.96);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2),
    0 0 18px rgba(255, 255, 255, 0.18);
}
.contact .btn--submit:active { transform: translateY(0); }
.contact .btn--submit[data-busy="true"] {
  pointer-events: none;
  filter: saturate(0.8) brightness(0.95);
}

/* --- 9. Keadaan terkirim ------------------------------------------------- */
.form-card__inner {
  transition: opacity 240ms ease, transform 420ms var(--ease-out);
}
.form-card__done {
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease 140ms, transform 520ms var(--ease-out) 140ms;
}
.form-card__done[hidden] { display: none; }
.form-card__done-title {
  /* Centang digambar sendiri sebagai SVG supaya bisa memakai gradasi oranye
     Nightless, bukan emoji hijau bawaan sistem. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 var(--sp-4);
  font-size: clamp(1.75rem, 2.4vw, 2.1875rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--white-100);
}
.form-card__check {
  width: 0.82em;
  height: 0.82em;
  flex: none;
}

.form-card__done-text {
  margin: 0 auto;
  max-width: 34ch;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}
/* Tombol kembali di panel hasil: mengembalikan kartu ke formulir semula. */
.btn--back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--sp-6);
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease,
    box-shadow 0.25s ease, transform 0.25s var(--ease-out);
}
.btn--back svg { width: 14px; height: 14px; flex: none; transition: transform 0.3s var(--ease-out); }
.btn--back:hover {
  border-color: var(--orange-100);
  color: var(--white-100);
  box-shadow: 0 0 16px rgba(248, 97, 59, 0.28);
}
.btn--back:hover svg { transform: translateX(-3px); }
.btn--back:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 2px; }

.form-card.is-sent .form-card__inner {
  position: absolute;
  inset: clamp(24px, 3.2vw, 38px);
  opacity: 0;
  transform: translateY(-12px) scale(0.98);
  pointer-events: none;
}
.form-card.is-sent .form-card__done { opacity: 1; transform: none; }

/* Panel gagal memakai kerangka yang sama; hanya tautan email yang perlu gaya. */
.form-card__done--fail .form-card__done-text { max-width: 38ch; }
.form-card__done--fail a {
  color: var(--orange-20);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.form-card__done--fail a:hover { color: var(--white-100); }
/* "Message Not Sent" lebih panjang dari "Message Sent": di layar sempit
   ukurannya diturunkan sedikit agar judul dan ikon tetap satu baris. */
@media (max-width: 560px) {
  .form-card__done--fail .form-card__done-title { font-size: clamp(1.375rem, 6.4vw, 1.75rem); }
}

/* Kolom jebakan bot: disembunyikan dari pengunjung dan pembaca layar. */
.form-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 10. Layar sempit ---------------------------------------------------- */
/* Di bawah 1024px semuanya menumpuk dan rata tengah, sesuai Figma mobile:
   judul, formulir, lalu blok kontak. Isi formulir tetap rata kiri. */
@media (max-width: 1023px) {
  .contact__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "form";
    justify-items: center;
    text-align: center;
    gap: var(--sp-8);
  }
  /* Lebar penuh supaya tepi kiri-kanannya tetap segaris dengan navbar.
     Di 428px ini menghasilkan isi selebar 348px, persis seperti Figma. */
  .contact__intro,
  .contact .form-card {
    width: 100%;
    max-width: none;
  }
  .contact__lede { margin-inline: auto; }
  .contact .form-card { text-align: left; }
  .form-card__done { text-align: center; }
}

@media (min-width: 701px) and (max-width: 1023px) {
  .contact__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "intro form";
    align-items: end;
    text-align: left;
  }
  .contact__lede { margin-inline: 0; }
}

@media (max-width: 560px) {
  .contact .form-card { border-radius: 20px; }
  .chip { font-size: 0.6875rem; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .form-card__dot { animation: none; }
  .contact .form-card,
  .form-card__inner,
  .form-card__done { transition: none; }
  .js-anim .field__sub { animation: none; }
}

/* --- 11. Latar tidak boleh ikut tinggi isi ------------------------------- */
/* .contact__bg semula setinggi seluruh section, dan ukuran fotonya diambil
   dari situ. Akibatnya begitu pesan kesalahan muncul, section bertambah
   tinggi dan fotonya ikut membesar — terlihat seperti zoom mendadak.
   Sekarang tingginya dipatok ke tinggi layar (900px seperti frame Figma),
   jadi perubahan isi tidak lagi menggesernya. Di bawah 861px aturan piksel
   di figma-images.css sudah menangani ini. */
@media (min-width: 861px) {
  .contact__bg {
    bottom: auto;
    height: min(900px, 100svh);
  }
  .contact__fade {
    bottom: auto;
    top: calc(min(900px, 100svh) - 420px);
    height: 420px;
  }
}

/* --- 12. Revisi 12 Okt 2026: satu layar penuh di desktop & tablet --------- */
/* Formulir tetap satu kolom memanjang seperti desain semula. Jarak antar-isian,
   padding, dan tinggi kotak pesan mengikuti tinggi layar: lega di layar tinggi,
   rapat di laptop pendek, sehingga judul sampai tombol Send Message selalu
   terlihat tanpa scroll. Layar ≥1000px dan mobile memakai tampilan semula. */
@media (min-width: 1024px) and (max-height: 999px), (min-width: 701px) and (max-width: 1023px) {
  .contact .form-card { padding: clamp(16px, 2.6vh, 32px) clamp(22px, 2.4vw, 34px); }
  .form-card__head { margin-bottom: clamp(8px, 1.8vh, 22px); }
  .form-card__title { font-size: clamp(1.4rem, 3.4vh, 2.1875rem); }
  .form-fields { gap: clamp(6px, 1.25vh, 20px); margin-bottom: clamp(10px, 1.9vh, 24px); }
  .contact .field__label { margin-bottom: clamp(4px, .7vh, 8px); }
  .contact .field__input { padding: clamp(7px, 1.15vh, 13px) 13px; }
  .contact textarea.field__input { min-height: 0; height: clamp(48px, calc(100svh - 610px), 112px); }
  .contact .chips { gap: 6px; }
  .contact .chip { padding-block: clamp(5px, .8vh, 8px); }
  .contact .btn--submit { padding: clamp(10px, 1.4vh, 14px) 20px; }
}
/* Desktop & tablet mendatar: tinggi section = tinggi layar. */
@media (min-width: 1024px) and (max-height: 999px), (min-width: 861px) and (max-width: 1023px) {
  .contact {
    min-height: max(560px, 100svh);
    padding-top: calc(80px + 1.5vh);
    padding-bottom: 2vh;
    align-items: center;
  }
}
/* Tablet tegak: tata letak tetap (foto di atas, teks & formulir di bawah),
   tetapi area foto menyesuaikan tinggi layar supaya formulir muat. */
@media (min-width: 701px) and (max-width: 860px) {
  .contact { --photo: max(270px, calc(100svh - 740px)); padding-top: var(--photo); padding-bottom: 32px; min-height: 100svh; }
  .contact__bg { height: calc(var(--photo) + 50px); }
  .contact__bg::after { background: linear-gradient(to bottom, rgba(0,0,0,.2), transparent 240px, #000 calc(100% - 10px)); }
  /* Foto sedikit diperbesar agar menutup seluruh lebar tablet; lapisan tengah
     (foto lain) tidak lagi mengintip sebagai garis biru di tepi kanan. */
  .contact__artwork { width: 2900px; height: 1618px; left: calc(50% - 1916px); top: -341px; }
  .contact__bg .contact__image--middle { display: none; }
  .contact textarea.field__input { height: 72px; }
}

/* V10.38 — animasi error halus: pesan turun & muncul, ikon "berdenyut" sekali,
   kolom bergetar kecil 1×. Hanya transform/opacity (ringan), tanpa loop. */
.contact .field[data-invalid="true"] .field__error{animation:nlErrIn .38s cubic-bezier(.2,.8,.2,1) both}
.contact .field[data-invalid="true"] .field__error svg{animation:nlErrPop .5s .08s cubic-bezier(.34,1.56,.64,1) both}
.contact .field[data-invalid="true"] .field__input,.contact .field--types[data-invalid="true"] .chips{animation:nlErrNudge .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes nlErrIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes nlErrPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
@keyframes nlErrNudge{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(1px)}}
@media (prefers-reduced-motion:reduce){.contact .field[data-invalid="true"] .field__error,.contact .field[data-invalid="true"] .field__error svg,.contact .field[data-invalid="true"] .field__input,.contact .field--types[data-invalid="true"] .chips{animation:none}}