/* ══════════════════════════════════════════════════════════════
   DiKED — Üyelik başvuru formu stilleri
   Tema-bağımsız: her tema CSS'inde tanımlı CSS değişkenlerini
   (--bg-card, --bg-card2, --cyan, --magenta, --border, --text,
   --text-dim, --gradient-2, --radius-lg, --font) kullanır.
   Tema CSS'inden SONRA yüklenmeli.
   ══════════════════════════════════════════════════════════════ */

/* ─── MEMBERSHIP LAYOUT (stacked: conditions on top, form below) ─── */
.mem-stack { display: flex; flex-direction: column; gap: 2rem; }
.mem-stack > .mem-box { width: 100%; }
.mem-stack .mem-form { width: 100%; }

/* ─── MEMBERSHIP FORM (multi-step) ───────────────────────────── */
.mem-form { display: flex; flex-direction: column; }
.form-progress {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; margin-bottom: 2rem;
  padding: .3rem 0;
}
.form-progress::before {
  content: '';
  position: absolute;
  top: 50%; left: 22px; right: 22px;
  height: 3px;
  background: var(--border);
  z-index: 0;
  transform: translateY(-50%);
}
.progress-dot {
  position: relative;
  z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-card2); color: var(--text-dim);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .2s, box-shadow .2s, background .25s, color .25s, border-color .25s;
}
.progress-dot:hover {
  transform: scale(1.08);
  border-color: var(--cyan);
  color: var(--cyan);
}
.progress-dot.done {
  background: var(--gradient-2);
  color: #fff;
  border-color: transparent;
}
.progress-dot.done:hover {
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(22,190,226,.35);
}
.progress-dot.active {
  background: var(--gradient-2);
  color: #fff;
  border-color: transparent;
  transform: scale(1.15);
  box-shadow: 0 0 0 5px rgba(22,190,226,.22), 0 6px 18px rgba(22,190,226,.35);
}
.progress-dot.active:hover { color: #fff; }
.progress-dot:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.form-step { display: none; animation: formStepFade .35s ease; }
.form-step.active { display: block; }
@keyframes formStepFade { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }
.form-step-title {
  font-size: 1.25rem; font-weight: 700; color: var(--cyan);
  margin-bottom: .6rem;
}
.form-required-note {
  font-size: .95rem; color: var(--text-dim); margin-bottom: 1.2rem;
}
.form-row { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.form-row.two-col { flex-direction: row; }
.form-row.two-col > .form-field { flex: 1 1 0; min-width: 0; }
.form-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.form-field label {
  font-size: 1rem; font-weight: 600; color: var(--text);
}
.form-field label .req { color: var(--magenta); margin-left: .15rem; }
.field-help {
  font-size: .88rem; color: var(--text-dim); margin-top: .25rem;
}
.form-field-help {
  font-size: 1rem; color: var(--text-dim); margin-bottom: 1rem; line-height: 1.6;
}
.form-input, .form-textarea {
  width: 100%;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem 1rem;
  font-size: 1rem;
  color: var(--text);
  font-family: var(--font);
  transition: border-color .2s, box-shadow .2s;
}
select.form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316bee2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.4rem;
  cursor: pointer;
}
.dogum-row {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.dogum-row select.form-input { flex: 1 1 0; min-width: 0; }
.dogum-row select[name="dogumGun"] { flex: 0 1 90px; }
.dogum-row select[name="dogumAy"]  { flex: 1 1 130px; }
.dogum-row select[name="dogumYil"] { flex: 0 1 110px; }
@media (max-width: 480px) {
  .dogum-row select[name="dogumGun"],
  .dogum-row select[name="dogumAy"],
  .dogum-row select[name="dogumYil"] { flex: 1 1 100%; }
}
.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(22,190,226,.18);
}
.form-input[disabled] { opacity: .5; cursor: not-allowed; }
.form-input.invalid, .form-textarea.invalid { border-color: var(--magenta); }
.form-textarea { resize: vertical; min-height: 3.5rem; }

.form-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem 1rem;
  margin-bottom: 1rem;
}
.form-check {
  display: flex; align-items: flex-start; gap: .55rem;
  cursor: pointer; padding: .35rem 0;
  font-size: 1rem; color: var(--text);
}
.form-check input[type="checkbox"] {
  margin-top: .18rem;
  width: 18px; height: 18px;
  accent-color: var(--cyan);
  cursor: pointer; flex-shrink: 0;
}
.form-check.consent {
  align-items: flex-start; padding: 1rem;
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: 10px;
  font-size: 1.05rem; line-height: 1.55;
}
.form-check.consent input[type="checkbox"] { width: 22px; height: 22px; margin-top: .12rem; }

.form-diger-wrap {
  display: flex; align-items: center; gap: 1rem;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
.form-diger-wrap .form-check { margin: 0; flex-shrink: 0; }
.form-diger-wrap .form-input { flex: 1 1 200px; min-width: 200px; }

.aidat-info-card {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.2rem;
}
.aidat-info-card p {
  font-size: 1.05rem; color: var(--text);
  margin: 0; padding: .2rem 0; line-height: 1.7;
}

.form-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: 1.6rem;
  padding-top: 1.2rem; border-top: 1px solid var(--border);
}
.form-nav > span { flex: 0 0 auto; }
.mem-form .form-nav .btn-primary,
.mem-form .form-nav .btn-secondary {
  padding: .7rem 1.6rem; border-radius: 50px;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  font-family: var(--font);
  transition: opacity .25s, transform .25s;
  border: none;
}
.mem-form .form-nav .btn-primary {
  background: var(--gradient-2); color: #fff;
  box-shadow: none;
}
.mem-form .form-nav .btn-primary:hover { opacity: .88; transform: translateY(-1px); box-shadow: none; }
.mem-form .form-nav .btn-secondary {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.mem-form .form-nav .btn-secondary:hover { border-color: var(--cyan); color: var(--cyan); }

.captcha-field {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-top: 1rem;
}
.captcha-field label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 600; }
.captcha-field label strong { color: var(--cyan); font-size: 1.15rem; letter-spacing: .5px; }
.captcha-input { max-width: 120px; margin-top: .5rem; }

.form-server-error {
  background: rgba(172,68,160,.1);
  border: 1px solid var(--magenta);
  color: var(--text);
  padding: .8rem 1.1rem; border-radius: 10px;
  margin-bottom: 1.1rem; font-size: 1rem;
}
.field-error {
  display: block;
  color: var(--magenta);
  font-size: .88rem; margin-top: .25rem;
  font-weight: 600;
}

.honeypot {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
  opacity: 0;
}

.draft-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: rgba(22,190,226,.08);
  border: 1px solid rgba(22,190,226,.35);
  border-radius: 10px;
  padding: .75rem 1rem;
  margin-bottom: 1.2rem;
  font-size: .95rem;
}
.draft-banner-text { color: var(--text); }
.draft-clear-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim);
  padding: .35rem .9rem; border-radius: 50px;
  font-size: .88rem; font-weight: 600; cursor: pointer;
  font-family: var(--font);
  transition: border-color .2s, color .2s;
}
.draft-clear-btn:hover { border-color: var(--magenta); color: var(--magenta); }

.thankyou-box {
  max-width: 640px; margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem 2.4rem;
  text-align: center;
}
.thankyou-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--gradient-2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.3rem; font-weight: 800;
  margin: 0 auto 1.2rem;
}
.thankyou-title { font-size: 1.6rem; color: var(--cyan); margin-bottom: .8rem; }
.thankyou-body { font-size: 1.1rem; color: var(--text-dim); line-height: 1.7; margin-bottom: 1.6rem; }

/* Responsive form */
@media (max-width: 640px) {
  .form-row.two-col { flex-direction: column; }
  .form-check-grid { grid-template-columns: 1fr; }
  .form-nav { flex-direction: column-reverse; }
  .mem-form .form-nav .btn-primary,
  .mem-form .form-nav .btn-secondary { width: 100%; }

  /* Progress dots: küçültülür + gap daraltılır ki 7 nokta ekrana sığsın */
  .form-progress {
    gap: .3rem;
    padding: .2rem 0;
  }
  .progress-dot {
    width: 36px; height: 36px;
    font-size: 1rem;
    border-width: 2px;
  }
  .form-progress::before {
    left: 18px; right: 18px;
    height: 2px;
  }
  .progress-dot.active {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(22,190,226,.22), 0 4px 12px rgba(22,190,226,.3);
  }
}

@media (max-width: 400px) {
  .form-progress { gap: .2rem; }
  .progress-dot {
    width: 30px; height: 30px;
    font-size: .82rem;
    border-width: 1px;
  }
  .form-progress::before {
    left: 15px; right: 15px;
  }
}

/* Light mode overrides */
.light-mode .form-input, .light-mode .form-textarea { background: #f5f5fb; }
.light-mode .form-check.consent { background: #f5f5fb; }
.light-mode .aidat-info-card { background: #f5f5fb; }
.light-mode .captcha-field { background: #f5f5fb; }
.light-mode .progress-dot { background: #e6e6ee; }