/**
 * 02-common.css
 * Tüm form adımlarında tekrar eden bileşenler.
 */

/* Sayfa sarmalayıcı — max-width değişkeni ile ortalanır */
.form-page-wrap {
    --max-w: 800px;
}

.form-page-wrap .card.mx-auto[style*="max-width"] {
    max-width: var(--max-w) !important;
}

/* Mavi gradient üst başlık şeridi — metin beyaz kalır */
.card-header.baslik {
    background: linear-gradient(135deg, var(--km-primary) 0%, var(--km-primary-dark) 100%);
    color: #fff;
    text-align: center;
    padding: 0.85rem 1rem;
    border-bottom: none;
}

.card-header.baslik h6 {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
}

.card-header.baslik .alt-baslik {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    opacity: 0.9;
    font-weight: 400;
    color: #fff;
}

/* Bilgi / uyarı kutusu — açık mavi zemin, koyu mavi yazı */
.info-uyari {
    background: var(--km-primary-light);
    border: 1px solid var(--km-info-border);
    color: var(--km-primary-dark);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

/* Mavi gradient toplam / banner şeritleri */
.toplam-tutar-banner,
.toplam-ozet-banner {
    background: linear-gradient(135deg, var(--km-primary) 0%, var(--km-primary-dark) 100%);
    color: #fff;
    text-align: center;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

/* Bölüm kutusu (eğitim, hediye alt alanları) */
.section-block {
    border: 1px solid var(--km-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #fff;
}

.section-block .section-head {
    background: var(--km-primary-light);
    border-bottom: 1px solid var(--km-info-border);
    padding: 0.6rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--km-primary-dark);
}

.section-block .section-body {
    padding: 1rem;
}

/* Form validasyon / genel hata metni */
.form-error-text {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Sayfa giriş animasyonu */
.animate-slide-top {
    animation: km-slide-top 0.35s ease-out;
}

@keyframes km-slide-top {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}