/**
 * Fluent Forms görsel katmanı: çok adımlı form, ilerleme çubuğu, doğrulama durumları.
 *
 * Eklenti sınıflarını (.ff-*) ezerken tema değişkenleri kullanılır; böylece
 * A/B varyantı renkleri forma da yansır.
 *
 * @package Seviye_Onkayit
 */

/* --------------------------------------------------------------------- *
 * Alanlar
 * --------------------------------------------------------------------- */
.fluentform .ff-el-group { margin-bottom: 1.15rem; }

.fluentform .ff-el-input--label label {
	font-weight: 600; font-size: .9rem; color: var(--seviye-text);
	margin-bottom: .35rem; display: inline-block;
}

.fluentform .ff-el-form-control {
	width: 100%; padding: .8rem .95rem;
	border: 1px solid var(--seviye-border); border-radius: var(--seviye-radius-sm);
	background: var(--seviye-bg); color: var(--seviye-text);
	font: inherit; font-size: 1rem; /* iOS'ta 16px altı zoom tetikler. */
	transition: border-color var(--seviye-transition), box-shadow var(--seviye-transition);
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--seviye-primary);
	box-shadow: 0 0 0 3px rgba(29, 78, 216, .15);
	outline: none;
}

.fluentform .ff-el-form-control.seviye-input--valid { border-color: var(--seviye-success); }
.fluentform .ff-el-form-control.seviye-input--invalid { border-color: var(--seviye-danger); }

.seviye-inline-feedback { margin: .35rem 0 0; font-size: .82rem; min-height: 1.1em; }
.seviye-inline-feedback.is-valid { color: var(--seviye-success); }
.seviye-inline-feedback.is-invalid { color: var(--seviye-danger); }

.seviye-inline-feedback.is-valid::before { content: "✓ "; }
.seviye-inline-feedback.is-invalid::before { content: "⚠ "; }

/* Radyo/checkbox seçimleri kart görünümünde — mobil dokunma hedefi büyür. */
.fluentform .ff-el-form-check {
	border: 1px solid var(--seviye-border); border-radius: var(--seviye-radius-sm);
	padding: .7rem .9rem; margin-bottom: .5rem;
	transition: border-color var(--seviye-transition), background-color var(--seviye-transition);
}

.fluentform .ff-el-form-check:hover { border-color: var(--seviye-primary); background: var(--seviye-bg-soft); }
.fluentform .ff-el-form-check:has(input:checked) { border-color: var(--seviye-primary); background: rgba(29, 78, 216, .06); }

/* --------------------------------------------------------------------- *
 * Çok adımlı form
 * --------------------------------------------------------------------- */
.fluentform .ff-step-header { margin-bottom: 1.5rem; }

.fluentform .ff-el-progress {
	height: 8px; border-radius: 999px; background: var(--seviye-border); overflow: hidden;
}

.fluentform .ff-el-progress-bar {
	height: 100%; border-radius: 999px;
	background: linear-gradient(90deg, var(--seviye-primary), var(--seviye-cta));
	transition: width 400ms cubic-bezier(.4, 0, .2, 1);
}

.fluentform .ff-el-progress-status { font-size: .82rem; color: var(--seviye-text-muted); margin-top: .4rem; }

.fluentform .ff-step-titles { display: flex; gap: .5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }

.fluentform .ff-step-titles li {
	flex: 1; text-align: center; font-size: .8rem; font-weight: 600;
	color: var(--seviye-text-muted); padding-bottom: .5rem;
	border-bottom: 3px solid var(--seviye-border);
}

.fluentform .ff-step-titles li.active { color: var(--seviye-primary); border-bottom-color: var(--seviye-primary); }
.fluentform .ff-step-titles li.ff_active { color: var(--seviye-primary); border-bottom-color: var(--seviye-primary); }

/* Adım geçiş animasyonu. */
.fluentform .ff-step-body .ff_step_start { animation: seviye-step-in 280ms ease-out; }

@keyframes seviye-step-in {
	from { opacity: 0; transform: translateX(12px); }
	to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------- *
 * Butonlar
 * --------------------------------------------------------------------- */
.fluentform .ff-btn-submit,
.fluentform .ff-btn-next,
.fluentform .ff-btn-prev {
	padding: .9rem 1.6rem; border-radius: var(--seviye-radius-sm);
	font-weight: 700; font-size: 1rem; border: 0; cursor: pointer;
	transition: transform var(--seviye-transition), background-color var(--seviye-transition);
}

.fluentform .ff-btn-submit,
.fluentform .ff-btn-next {
	background: var(--seviye-cta); color: #fff;
	box-shadow: 0 6px 16px rgba(249, 115, 22, .28);
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-next:hover { background: var(--seviye-cta-hover); transform: translateY(-1px); }

.fluentform .ff-btn-prev { background: transparent; color: var(--seviye-text-muted); border: 1px solid var(--seviye-border); }

.fluentform .ff-btn-submit:focus-visible,
.fluentform .ff-btn-next:focus-visible { outline: 3px solid var(--seviye-primary); outline-offset: 2px; }

/* --------------------------------------------------------------------- *
 * Hata mesajları
 * --------------------------------------------------------------------- */
.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
	color: var(--seviye-danger); font-size: .84rem; margin-top: .3rem;
}

.fluentform .ff-errors-in-stack .error {
	background: #fef2f2; border-left: 4px solid var(--seviye-danger);
	padding: .8rem 1rem; border-radius: var(--seviye-radius-sm); color: #991b1b;
}

/* Mükerrer kayıt uyarısı uzun metin olabilir — okunabilir kalsın. */
.fluentform .ff-el-is-error .text-danger { line-height: 1.5; }

/* --------------------------------------------------------------------- *
 * Bağlama duyarlı alanlar (LGS / YKS)
 * --------------------------------------------------------------------- */
/* 5-8. sınıf → LGS bloğu · 9-12/YKS/Mezun → YKS bloğu */
.fluentform[data-seviye-context="lgs"] .seviye-only-yks,
.fluentform[data-seviye-context="yks"] .seviye-only-lgs { display: none; }

/* Anasınıfı, 1-4. sınıf ve Deneme Kulübü → sınava özel blokların hiçbiri gösterilmez */
.fluentform[data-seviye-context="anaokul"] .seviye-only-lgs,
.fluentform[data-seviye-context="anaokul"] .seviye-only-yks,
.fluentform[data-seviye-context="ilkokul"] .seviye-only-lgs,
.fluentform[data-seviye-context="ilkokul"] .seviye-only-yks,
.fluentform[data-seviye-context="deneme"] .seviye-only-lgs,
.fluentform[data-seviye-context="deneme"] .seviye-only-yks { display: none; }

/* Google Places elementi tema girdileriyle aynı görünsün. */
.seviye-places-input {
	display: block; width: 100%;
	--gmp-input-border-radius: var(--seviye-radius-sm);
}

/* Başarı mesajı. */
.fluentform .ff-message-success {
	background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d;
	padding: 1.1rem 1.25rem; border-radius: var(--seviye-radius-sm);
}