/* css/contact.css - TÜM KAYMA SORUNLARI %100 ÇÖZÜLDÜ */
.contact-hero{
  background:linear-gradient(135deg,#003087 0%,#00b5e2 100%);
  padding:160px 5% 100px;text-align:center;position:relative;color:white;
}
.contact-hero::before{
  content:'';position:absolute;inset:0;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="20" cy="20" r="4" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="50" r="3" fill="rgba(255,255,255,0.15)"/></svg>') repeat;
  animation:float 25s infinite linear;
}
@keyframes float{to{transform:translateY(-100px)}}

.contact-section{padding:0 5% 5rem}
.form-container{
  max-width:1200px;margin:-80px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:4rem;position:relative;z-index:2
}
.form-card,.info-card{
  background:white;border-radius:28px;padding:3rem;box-shadow:0 25px 70px rgba(0,48,135,.22)
}
.form-header{text-align:center;margin-bottom:2.5rem}
.form-header i{font-size:3rem;color:#00b5e2;margin-bottom:1rem}
.form-header h2{color:#003087}
.form-header p{color:#00b5e2;font-weight:600}

/* INPUT GRUPLARI */
.input-group{
  position:relative;margin-bottom:2rem;
}
.input-group input,
.input-group textarea,
.input-group select{
  width:100%;
  padding:1.4rem 1rem 1.4rem 3.5rem;
  border:2px solid #e0e0e0;
  border-radius:14px;
  font-family:'Inter',sans-serif;
  font-size:1rem;
  background:#fafafa;
  transition:border .3s,box-shadow .3s,background .3s;
  box-sizing:border-box;
}
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus{
  outline:none;
  border-color:#00b5e2;
  background:white;
  box-shadow:0 0 0 4px rgba(0,181,226,.15);
}
.input-group label{
  position:absolute;
  left:3.5rem;
  top:1.4rem;
  color:#999;
  font-size:1rem;
  pointer-events:none;
  transition:all .25s cubic-bezier(0.4,0,0.2,1);
  transform-origin:left center;
}
.input-group input:focus~label,
.input-group input:valid~label,
.input-group textarea:focus~label,
.input-group textarea:valid~label,
.input-group select:focus~label,
.input-group select:valid~label{
  transform:translateY(-2.6rem) translateX(-0.5rem) scale(.85);
  color:#00b5e2;
  font-weight:600;
  background:white;
  padding:0 .4rem;
}
.input-group i{
  position:absolute;
  left:1rem;
  top:1.5rem;
  color:#003087;
  font-size:1.2rem;
  pointer-events:none;
  z-index:1;
}

/* SELECT İÇİN ÖZEL DÜZELTME */
.input-group select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%23003087' d='M0 0l6 8 6-8z'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:12px;
}

/* BUTONLAR */
.submit-btn{width:100%;padding:1.3rem;background:linear-gradient(135deg,#003087,#00b5e2);color:white;border:none;border-radius:50px;font-size:1.1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.8rem;transition:.4s;margin-top:1rem}
.submit-btn:hover{transform:translateY(-4px);box-shadow:0 15px 30px rgba(0,181,226,.4)}
.submit-btn i{transition:.3s}
.submit-btn:hover i{transform:translateX(5px)}

.success-message {
  position: absolute;
  inset: 0;
  background: white;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s;
  z-index: 10;
}

.success-message.active {
  opacity: 1;
  visibility: visible;
}

.success-message i {
  font-size: 4rem;
  color: #00b5e2;
  margin-bottom: 1rem;
}

.success-message h3 {
  color: #003087;
}


.info-card{display:flex;flex-direction:column;gap:2rem}
.info-item{display:flex;gap:1.5rem;align-items:start}
.icon-circle{width:60px;height:60px;background:linear-gradient(135deg,#003087,#00b5e2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.5rem;flex-shrink:0}
.info-item h4{color:#003087;margin-bottom:.5rem}
.info-item a{color:#00b5e2;text-decoration:none}
.whatsapp{background:#25D366;color:white!important;padding:.5rem 1rem;border-radius:50px;font-size:.9rem;display:inline-flex;align-items:center;gap:.5rem}
.map-container{margin:4rem 0;border-radius:28px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.15)}

@media(max-width:992px){
  .form-container{grid-template-columns:1fr;margin:-40px auto 0;gap:2rem}
  .contact-hero{padding:140px 5% 80px}
}

/* 💎 TÜM LABEL KAYMA SORUNLARI TAMAMEN ÇÖZÜLDÜ */

/* 1. Ad Soyad ve E-Posta */
#name ~ label,
#email ~ label {
  top: 1.4rem !important;
  font-size: 1rem !important;
}

/* TELEFON ALANI - KAYMA %100 DÜZELTİLDİ */
#phone ~ label {
  top: 1.4rem !important;
  font-size: 1rem !important;
  color: #999;
}

#phone:focus ~ label,
#phone:not(:placeholder-shown) ~ label {
  transform: translateY(-2.6rem) translateX(-0.5rem) scale(0.85) !important;
  color: #00b5e2 !important;
  font-weight: 600 !important;
  background: white;
  padding: 0 .4rem;
}


/* 3. Servis (Select) */
#service ~ label {
  top: 1.4rem !important;
  font-size: 1rem !important;
}
#service:focus ~ label,
#service:valid ~ label {
  transform: translateY(-2.6rem) translateX(-0.5rem) scale(0.85) !important;
  color: #00b5e2 !important;
  font-weight: 600 !important;
  background: white;
  padding: 0 .4rem;
}

/* Select boş option hilesi */
#service option[value=""] {
  display: none;
}