/* font (opsional, biar mirip screenshot) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

:root{
  --blue:#3c5cf1;
  --text:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
}

*{box-sizing:border-box}
.contact-wrap{display:block;padding:60px 24px}
body{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text)}

.contact-grid{
  max-width:1100px;margin:0 auto;
  display:grid;
  grid-template-columns:45% 55%; /* kiri 45%, kanan 55% */
  gap:40px;
  align-items:start;
}

/* LEFT */
.contact-media{height: 100%;border-radius:6px;overflow:hidden;box-shadow:0 10px 30px rgba(2,6,23,.06); margin-top: 50px}
.media-top{background:var(--blue);color:#fff;padding:10px 14px}
.info-item{display:flex;gap:10px;align-items:center;padding:4px 0}
.divider{height:1px;background:rgba(255,255,255,.35)}
.icon{
  width:22px;height:22px;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.65);padding: 0;
  
}
.icon svg{width:15px;height:15px;fill:#fff}
.info-title{opacity:.85;font-size:12px;margin:0 0 2px; font-weight: 200; color: #fff;}
.info-strong{margin:0;font-weight:600;letter-spacing:.2px;font-size: 13px;color: #fff;}

.media-photo{flex:1;height:auto;background:#ddd;min-height: 300px; margin-top: 0; }
.media-photo img{position:static;width:100%;height:auto;object-fit:cover}

/* RIGHT */
.contact-form .title{font-size:34px;line-height:1.2;margin:6px 0 12px;font-weight:700}
.contact-form .subtitle{color:var(--muted);font-size:14.5px;line-height:1.8;margin:0 0 26px;max-width:560px}

form{margin-top:4px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:18px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
label{font-size:13px;color:var(--text)}
input,textarea{
  width:100%;border:1px solid var(--line);border-radius:4px;
  padding:12px 14px;font-size:14px;outline:0;transition:.2s
}
input:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(60,92,241,.12)}
textarea{min-height:160px;resize:vertical}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--blue);color:#fff;border:none;border-radius:4px;
  padding:13px 22px;font-weight:600;cursor:pointer;letter-spacing:.2px
}
.btn .arrow{font-size:18px;line-height:0;margin-top:-2px}
.btn:hover{filter:brightness(.96)}
.form-status{margin-top:10px;font-size:13.5px;color:var(--muted)}

/* RESPONSIVE */
@media (max-width: 1024px){
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .media-photo{height:300px}
}



/* ==== CONTACT INFO SECTION (alamat, WA, dll) ==== */
.contact-info-section {
  padding: 60px 20px;
  background: #fff;
  font-family: 'Inter', sans-serif;
  display: flex;
  justify-content: center;
}

.contact-info-container {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}

.info-box {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  padding: 32px 24px;
  flex: 1 1 300px;
  min-width: 280px;
}

.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.icon {
  background: #D71920; /* 🔥 Icon merah */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  font-size: 24px;
  margin-right: 16px;
  flex-shrink: 0;
}

.info-header h4 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.info-box p {
  font-size: 15px;
  color: #222526;
  line-height: 1.6;
  margin: 0;
}

.wa-number {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

.wa-number:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-info-container {
    flex-direction: column;
    align-items: center;
  }

  .info-box {
    width: 100%;
    max-width: 500px;
  }
}

/* ==== MAP FULL SECTION ==== */
.map-full {
  width: 100%;
  height: 100vh; /* tampil full 1 layar */
  margin: 0;
  padding: 0;
}

.map-full iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.contact-section {
  padding: 40px;
  display: flex;
  justify-content: center;
}

.contact-container {
  display: flex;
  max-width: 1100px;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Left side */
.contact-info {
  flex: 1;
  background: #e63946; /* merah */
  color: #fff;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-box {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.info-box i {
  font-size: 24px;
  margin-right: 15px;
}

.info-box h4 {
  margin: 0;
}

.info-image img {
  width: 100%;
  border-radius: 8px;
  margin-top: 20px;
}

/* Right side */
.contact-form {
  flex: 1;
  padding: 40px;
}

.contact-form h2 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
}

.form-group {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.form-group input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

textarea {
  width: 100%;
  height: 120px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 20px;
  resize: none;
}



button:hover {
  background: #c5303d;
}