/* ============================================================
   BYÖNETİM • CONTACT DESIGN SYSTEM
   Shared tokens & component styles for:
     - iletisim.html
     - sizi-arayalim.html
   Premium, refined, calibrated. One source of truth.
   ============================================================ */

:root {
  /* Brand */
  --cx-primary:        #2563eb;
  --cx-primary-hover:  #1d4ed8;
  --cx-primary-deep:   #1e40af;
  --cx-primary-soft:   rgba(37, 99, 235, 0.12);
  --cx-primary-glow:   rgba(37, 99, 235, 0.18);
  --cx-accent-cyan:    #38bdf8;

  /* Neutrals */
  --cx-text:           #0f172a;
  --cx-text-strong:    #0b1220;
  --cx-muted:          #64748b;
  --cx-muted-soft:     #94a3b8;
  --cx-border:         #e2e8f0;
  --cx-border-hover:   #cbd5e1;
  --cx-border-card:    #e6ebf3;

  /* Surfaces */
  --cx-bg-page:        #f8fbff;
  --cx-bg-input:       #fbfcff;
  --cx-bg-white:       #ffffff;
  --cx-bg-hover:       rgba(37, 99, 235, 0.04);

  /* Radii */
  --cx-radius-input:   12px;
  --cx-radius-card:    22px;
  --cx-radius-chip:    999px;

  /* Motion */
  --cx-ease:           cubic-bezier(.2, .7, .2, 1);
  --cx-transition:     0.2s var(--cx-ease);

  /* Shadows */
  --cx-shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 20px 55px -32px rgba(15, 23, 42, 0.28),
    0 2px 6px -2px rgba(15, 23, 42, 0.06);
  --cx-shadow-btn:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 10px 24px -10px rgba(37, 99, 235, 0.55);
  --cx-shadow-btn-hover:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 16px 32px -12px rgba(37, 99, 235, 0.65);
  --cx-focus-ring:     0 0 0 4px var(--cx-primary-soft);
}

/* ── Page background ─────────────────────────────────────── */
body.contact-page,
.split-right {
  background: var(--cx-bg-page);
}

/* ============================================================
   CARDS (premium, layered shadow, gradient top accent)
   Applied to iletisim form & info cards, and sizi-arayalim form.
   ============================================================ */
.contact-form-card,
.contact-info-card,
.split-right .form-card.cx-card {
  position: relative;
  background: var(--cx-bg-white);
  border: 1px solid var(--cx-border-card);
  border-radius: var(--cx-radius-card);
  padding: 1.9rem 1.6rem 1.55rem;
  box-shadow: var(--cx-shadow-card);
  overflow: hidden;
}
.contact-form-card::before,
.contact-info-card::before,
.split-right .form-card.cx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(37, 99, 235, 0.08), transparent 60%),
    radial-gradient(120% 60% at 0% 100%, rgba(14, 165, 233, 0.06), transparent 60%);
}
.contact-form-card::after,
.contact-info-card::after,
.split-right .form-card.cx-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 1.55rem;
  right: 1.55rem;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--cx-primary) 0%, var(--cx-accent-cyan) 55%, var(--cx-primary) 100%);
}
.contact-form-card > *,
.contact-info-card > *,
.split-right .form-card.cx-card > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   INPUTS / TEXTAREA / SELECT
   Unified surface across both pages.
   ============================================================ */
.contact-input,
.contact-textarea,
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-input);
  padding: 0.9rem 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--cx-text);
  background: var(--cx-bg-input);
  outline: none;
  transition: border-color var(--cx-transition),
              box-shadow var(--cx-transition),
              background var(--cx-transition);
}
.contact-input::placeholder,
.contact-textarea::placeholder,
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--cx-muted-soft);
}
.contact-input:hover,
.contact-textarea:hover,
.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: var(--cx-border-hover);
  background: var(--cx-bg-white);
}
.contact-input:focus,
.contact-textarea:focus,
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--cx-primary);
  background: var(--cx-bg-white);
  box-shadow: var(--cx-focus-ring);
}

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

.form-select {
  cursor: pointer;
  padding-right: 44px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ============================================================
   PHONE INPUT (flag + country select + number)
   Unified inline style for both pages.
   ============================================================ */
.contact-phone,
.phone-wrapper {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-input);
  padding: 0.9rem 1rem;
  background: var(--cx-bg-input);
  overflow: visible;
  transition: border-color var(--cx-transition),
              box-shadow var(--cx-transition),
              background var(--cx-transition);
}
.contact-phone:hover,
.phone-wrapper:hover {
  border-color: var(--cx-border-hover);
  background: var(--cx-bg-white);
}
.contact-phone:focus-within,
.phone-wrapper:focus-within {
  border-color: var(--cx-primary);
  background: var(--cx-bg-white);
  box-shadow: var(--cx-focus-ring);
}

/* Remove divider & bg on old sizi-arayalim prefix */
.phone-wrapper .phone-prefix {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: none;
  background: transparent;
  white-space: nowrap;
}

.contact-phone-flag,
.phone-flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
  margin: 0;
}

.contact-phone-select,
.phone-country-select {
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--cx-text-strong);
  padding: 0 20px 0 0;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  flex-shrink: 0;
}

.contact-phone input[type="tel"],
.phone-wrapper .phone-input {
  flex: 1;
  border: none;
  outline: none;
  font: inherit;
  font-size: 0.95rem;
  color: var(--cx-text);
  background: transparent;
  padding: 0;
  min-width: 0;
}
.contact-phone input[type="tel"]::placeholder,
.phone-wrapper .phone-input::placeholder {
  color: var(--cx-muted-soft);
}

/* ============================================================
   BUTTONS (gradient, shine, arrow)
   .contact-btn--primary (iletisim)
   .gonder-btn (sizi-arayalim step 2)
   .devam-btn (sizi-arayalim step 1)
   .success-back (sizi-arayalim success)
   ============================================================ */
.contact-btn--primary,
.gonder-btn,
.devam-btn,
.success-back {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1.1rem;
  border-radius: var(--cx-radius-input);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, #2f6ef0 0%, var(--cx-primary) 100%);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--cx-shadow-btn);
  transition: transform var(--cx-transition),
              box-shadow var(--cx-transition),
              background var(--cx-transition),
              opacity var(--cx-transition);
}
.contact-btn--primary::after,
.gonder-btn::after,
.devam-btn::after,
.success-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.22) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--cx-ease);
  pointer-events: none;
}
.contact-btn--primary:not(:disabled):hover,
.gonder-btn:not(:disabled):hover,
.devam-btn:not(:disabled):hover,
.success-back:hover {
  background: linear-gradient(180deg, #2a63e0 0%, var(--cx-primary-hover) 100%);
  transform: translateY(-1px);
  box-shadow: var(--cx-shadow-btn-hover);
}
.contact-btn--primary:hover::after,
.gonder-btn:not(:disabled):hover::after,
.devam-btn:not(:disabled):hover::after,
.success-back:hover::after {
  transform: translateX(120%);
}
.contact-btn--primary:active,
.gonder-btn:not(:disabled):active,
.devam-btn:not(:disabled):active,
.success-back:active {
  transform: translateY(0);
}
.gonder-btn:disabled,
.devam-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--cx-shadow-btn);
}
.contact-btn--primary svg,
.gonder-btn svg,
.devam-btn svg,
.success-back svg {
  width: 16px;
  height: 16px;
  position: relative;
  z-index: 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--cx-transition);
}
.contact-btn--primary:hover svg,
.gonder-btn:not(:disabled):hover svg,
.devam-btn:not(:disabled):hover svg,
.success-back:hover svg {
  transform: translateX(3px);
}

/* ============================================================
   CHECKBOX (custom, unified)
   .contact-check (iletisim)
   .checkbox-label (sizi-arayalim)
   ============================================================ */
.contact-check,
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--cx-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}
.contact-check input[type="checkbox"],
.checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 1px 0 0;
  border: 1.5px solid var(--cx-border-hover);
  border-radius: 5px;
  background: var(--cx-bg-white);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color var(--cx-transition), background var(--cx-transition);
}
.contact-check input[type="checkbox"]:hover,
.checkbox-label input[type="checkbox"]:hover {
  border-color: var(--cx-primary);
}
.contact-check input[type="checkbox"]:checked,
.checkbox-label input[type="checkbox"]:checked {
  background: var(--cx-primary);
  border-color: var(--cx-primary);
}
.contact-check input[type="checkbox"]:checked::after,
.checkbox-label input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.contact-check a,
.checkbox-label a {
  color: var(--cx-primary);
  font-weight: 600;
  text-decoration: none;
}

/* ============================================================
   STEP DOTS (sizi-arayalim) - polish to match system
   ============================================================ */
.steps .step-dot {
  background: #dbe3f1;
  transition: background var(--cx-transition), width var(--cx-transition);
}
.steps .step-dot.active {
  background: var(--cx-primary);
  box-shadow: 0 0 0 4px var(--cx-primary-soft);
}
.steps .step-line {
  background: #dbe3f1;
}

/* ============================================================
   PRIVACY NOTE (iletisim)
   ============================================================ */
.contact-privacy-note {
  margin: 0.75rem 0 0;
  color: var(--cx-muted);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.contact-privacy-note svg {
  width: 14px;
  height: 14px;
  color: var(--cx-muted-soft);
}

/* ============================================================
   RESPONSIVE — mobile-first polish
   ============================================================ */
/* Tablet */
@media (max-width: 900px) {
  .contact-form-card,
  .contact-info-card,
  .split-right .form-card.cx-card {
    padding: 1.6rem 1.4rem 1.35rem;
  }
}

/* Phone */
@media (max-width: 640px) {
  .contact-form-card,
  .contact-info-card,
  .split-right .form-card.cx-card {
    padding: 1.35rem 1.15rem 1.15rem;
    border-radius: 18px;
  }
  .contact-form-card::after,
  .contact-info-card::after,
  .split-right .form-card.cx-card::after {
    left: 1.15rem;
    right: 1.15rem;
  }
  .contact-input,
  .contact-textarea,
  .form-input,
  .form-textarea,
  .form-select {
    padding: 0.85rem 0.9rem;
    font-size: 16px; /* iOS zoom prevention */
  }
  .contact-phone,
  .phone-wrapper {
    padding: 0.85rem 0.9rem;
    gap: 0.55rem;
  }
  .contact-phone input[type="tel"],
  .phone-wrapper .phone-input {
    font-size: 16px; /* iOS zoom prevention */
  }
  .contact-phone-select,
  .phone-country-select {
    font-size: 16px;
  }
  .contact-btn--primary,
  .gonder-btn,
  .devam-btn,
  .success-back {
    letter-spacing: 0.06em;
    min-height: 50px;
    font-size: 0.92rem;
    padding: 0.8rem 1rem;
  }
  .contact-check,
  .checkbox-label {
    font-size: 0.88rem;
  }
  .contact-privacy-note {
    font-size: 0.8rem;
  }
}

/* Tiny phones */
@media (max-width: 380px) {
  .contact-form-card,
  .contact-info-card,
  .split-right .form-card.cx-card {
    padding: 1.15rem 1rem 1rem;
    border-radius: 16px;
  }
  .contact-btn--primary,
  .gonder-btn,
  .devam-btn {
    letter-spacing: 0.04em;
  }
}