/* ================= CONTACT PAGE ================= */

.contact{
  padding: 5rem 0 6rem;
  background: var(--bg);
}

.contact-inner{
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.contact-head{
  margin-bottom: 2.25rem;
}

/* ===== Contact page typography ===== */
.contact-title{
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-align: center;
  margin: 0 0 .75rem;
  color: var(--text);
}
.contact-title .accent{ color: var(--primary); }

.contact-subtitle{
  max-width: 56ch;
  margin: 0 auto 2.25rem;
  text-align: center;
  color: var(--muted);
  line-height: 1.7;
  font-size: 1.05rem;
}


/* ===== Form container (20% tighter) ===== */
.contact-form{
  max-width: 720px;            /* önce 860 idi */
  margin: 0 auto;
}

/* ===== Fields spacing ===== */
.contact-form .field{
  position: relative;
  text-align: left;
  margin-bottom: 14px;          /* daha sıkı */
}



/* ===== Inputs base (smaller) ===== */
.contact-form input,
.contact-form textarea,
.contact-form select{
  width: 100%;
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  border-radius: 16px;          /* 18 -> 16 */
  padding: 16px 16px;           /* 18 -> 16 */
  font-size: 1rem;
  font-family: inherit;
  font-size: 1rem; 
  line-height: 1.4; 
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.contact-form textarea{
  min-height: 150px;
  resize: vertical;
}

/* Focus */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}

/* ===== Floating labels (only input/textarea) ===== */
.field.floating input,
.field.floating textarea{
  padding-top: 24px;            /* label boşluğu */
}

.field.floating label{
  position: absolute;
  left: 16px;
  top: 16px;
  color: rgba(17,24,39,.42);
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
  transition: top .16s ease, font-size .16s ease, color .16s ease;
}

.field.floating input:focus + label,
.field.floating textarea:focus + label,
.field.floating input:not(:placeholder-shown) + label,
.field.floating textarea:not(:placeholder-shown) + label{
  top: 10px;
  font-size: .78rem;
  color: rgba(17,24,39,.55);
}

.field.floating input:focus + label,
.field.floating textarea:focus + label{
  color: var(--primary);
}

.req{ color: #ef4444; margin-left: 4px; }

/* Select label */
.static-label{
  display: block;
  font-size: .85rem;
  color: rgba(17,24,39,.60);
  margin: 0 0 8px;
}

/* Errors */
.field ul.errorlist{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  color: #dc2626;
  font-size: .9rem;
}

/* Buttons row */
.btn-area{
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.btn-area .btn{
  flex: 1;
  justify-content: center;
  border-radius: 9px;
  padding: 14px 18px;
}

/* Mail icon */
.btn-icon{
  display: inline-flex;
  margin-right: 8px;
  opacity: .85;
}

/* Microcopy centered */
.micro{
  margin: 18px auto 0;
  text-align: center;
  color: rgba(17,24,39,.55);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 64ch;
}

/* Errors */
.field ul.errorlist{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  color: #dc2626;
  font-size: .9rem;
}

/* Disabled select (kilitli paket) */
.contact-form select:disabled{
  background: rgba(17,24,39,.03);
  color: rgba(17,24,39,.70);
  cursor: not-allowed;
}

.select-wrap{
  position: relative;
}

.select-wrap select{
  padding-right: 52px; /* ok alanı */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* sağdaki ok */
.select-chevron{
  position: absolute;
  right: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: transform .18s ease;
  opacity: .75;

  background: no-repeat center/18px 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* open hissi: focus'ta 180 dön */
.select-wrap.is-open .select-chevron{
  transform: translateY(-50%) rotate(180deg);
}


@media (max-width: 520px){
  .btn-area{ flex-direction: column; }
}

/* ================= CONTACT SUCCESS ================= */
.contact-success{
  background: var(--bg);
  min-height: 67vh;              /* footer için nefes */
  display: flex;                 /* dikey ortalama */
  align-items: center;
  padding: 5.5rem 0 6.5rem;
}

.contact-success .container{
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.success-card{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 0;                    /* card değil, sade */
}

.success-title{
  margin: 0 0 .75rem;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--text);
}

.success-title .accent{
  color: var(--primary);         /* Successfully! mavi */
}

.success-desc{
  margin: 0 auto 1.75rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 60ch;
  font-size: 1.05rem;
}

.success-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 520px){
  .success-actions{ flex-direction: column; }
  .success-actions .btn{ width: 100%; }
}