/* ==========================================================================
   CONTACT US PAGE — mandiri (contact-*)
   ========================================================================== */

.contact-hero .sect-head{ text-align:left; margin:0; max-width:640px; }

/* ---------- Info cards ---------- */
.contact-info{
  padding:0;
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  background:var(--c-surface-alt);
}
.contact-info-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
}
.contact-info-card{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  padding:1.8rem 1.6rem;
  border-right:1px solid var(--c-border);
  transition:background-color .3s ease;
}
.contact-info-row .col-item:last-child .contact-info-card{ border-right:none; }
.contact-info-card:hover{ background:var(--c-surface); }

.contact-info-icon{
  width:38px; height:38px;
  border-radius:var(--r-sm);
  background:var(--c-primary-light);
  color:var(--c-primary);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:.5rem;
  transition:background-color .3s ease, color .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.contact-info-icon svg{ width:19px; height:19px; }
.contact-info-card:hover .contact-info-icon{
  background:var(--c-primary); color:#fff; transform:scale(1.08);
}

.contact-info-label{ font-size:var(--fs-small); color:var(--c-muted); }
.contact-info-value{ font-weight:600; color:var(--c-ink); font-size:.95rem; }

@media (max-width:991.98px){
  .contact-info-row{ grid-template-columns:repeat(2, 1fr); }
  .contact-info-card:nth-child(odd){ border-right:1px solid var(--c-border); }
  .contact-info-card:nth-child(even){ border-right:none; }
  .contact-info-card:nth-child(-n+2){ border-bottom:1px solid var(--c-border); }
}
@media (max-width:575.98px){
  .contact-info-row{ grid-template-columns:1fr; }
  .contact-info-card{ border-right:none !important; border-bottom:1px solid var(--c-border); }
  .contact-info-card:last-child{ border-bottom:none; }
}

/* ---------- Form & map layout ---------- */
.contact-main{ background:var(--c-surface); }
.contact-form-card, .contact-map-card{ height:100%; }
.contact-form-card h2, .contact-map-card h2{ font-size:var(--fs-h3); margin-bottom:1.4rem; }

/* ---------- Floating label form ---------- */
.form-group{
  position:relative;
  margin-bottom:1.4rem;
}
.form-group input,
.form-group textarea{
  width:100%;
  padding:1.15rem 1rem .5rem;
  border-radius:var(--r-sm);
  border:1.5px solid var(--c-border);
  background:var(--c-surface);
  color:var(--c-ink);
  font-family:inherit;
  font-size:.95rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-group textarea{ padding-top:1.35rem; resize:vertical; min-height:120px; }
.form-group label{
  position:absolute;
  left:1rem; top:1.05rem;
  font-size:.95rem;
  color:var(--c-muted);
  pointer-events:none;
  transform-origin:left top;
  transition:transform .2s ease, color .2s ease, top .2s ease;
  background:var(--c-surface);
  padding:0 .2rem;
}
.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px var(--c-primary-light);
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label{
  top:-.55rem;
  transform:scale(.8);
  color:var(--c-primary);
}
.form-group input.is-invalid,
.form-group textarea.is-invalid{
  border-color:#DC3545;
  animation:contactShake .35s ease;
}
.form-group input.is-invalid + label,
.form-group textarea.is-invalid + label{ color:#DC3545; }
@keyframes contactShake{
  0%, 100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  75%{ transform:translateX(4px); }
}

.contact-submit-btn{
  width:100%;
  border:none;
  cursor:pointer;
  position:relative;
}
.contact-submit-btn:disabled{ opacity:.75; cursor:not-allowed; }
.contact-submit-spinner{
  display:inline-block;
  width:15px; height:15px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:contactSpin .7s linear infinite;
  margin-left:.5rem;
  vertical-align:middle;
}
@keyframes contactSpin{ to{ transform:rotate(360deg); } }

/* ---------- Map card ---------- */
.contact-map-frame{
  width:100%;
  aspect-ratio:1/1;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--stage-shadow-bezel);
  border:1px solid var(--c-border);
  position:relative;
}
.contact-map-frame iframe{ filter:grayscale(.15) contrast(1.02); transition:filter .3s ease; }
.contact-map-frame:hover iframe{ filter:grayscale(0) contrast(1); }
@media (min-width:992px){
  .contact-map-frame{ aspect-ratio:4/5; }
}

@media (prefers-reduced-motion: reduce){
  .contact-info-card, .contact-info-icon, .form-group label,
  .form-group input, .form-group textarea, .contact-map-frame iframe{ transition:none; }
  .form-group input.is-invalid, .form-group textarea.is-invalid{ animation:none; }
  .contact-submit-spinner{ animation:none; }
}